From a163988e46e3c26c00a78cfdb46c892282bca9a5 Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Tue, 7 May 2019 19:17:37 +0300 Subject: [PATCH 01/14] feat(ui5-multi-combobox): initial implementation fixes: https://github.com/SAP/ui5-webcomponents/issues/314 --- packages/base/src/delegate/ItemNavigation.js | 4 + packages/base/src/events/PseudoEvents.js | 6 + packages/main/bundle.esm.js | 3 + packages/main/src/Input.hbs | 4 + packages/main/src/Input.js | 5 + packages/main/src/MultiComboBox.hbs | 69 ++++ packages/main/src/MultiComboBox.js | 348 ++++++++++++++++++ packages/main/src/Token.hbs | 7 + packages/main/src/Token.js | 113 ++++++ packages/main/src/Tokenizer.hbs | 16 + packages/main/src/Tokenizer.js | 207 +++++++++++ packages/main/src/TokenizerTemplateContext.js | 19 + packages/main/src/themes/MultiComboBox.css | 34 ++ packages/main/src/themes/Popup.css | 2 +- packages/main/src/themes/Token.css | 73 ++++ packages/main/src/themes/Tokenizer.css | 43 +++ .../src/themes/base/Popover-parameters.css | 1 + .../ui/webcomponents/main/pages/Popups.html | 4 + .../ui/webcomponents/main/pages/Token.html | 146 ++++++++ 19 files changed, 1103 insertions(+), 1 deletion(-) create mode 100644 packages/main/src/MultiComboBox.hbs create mode 100644 packages/main/src/MultiComboBox.js create mode 100644 packages/main/src/Token.hbs create mode 100644 packages/main/src/Token.js create mode 100644 packages/main/src/Tokenizer.hbs create mode 100644 packages/main/src/Tokenizer.js create mode 100644 packages/main/src/TokenizerTemplateContext.js create mode 100644 packages/main/src/themes/MultiComboBox.css create mode 100644 packages/main/src/themes/Token.css create mode 100644 packages/main/src/themes/Tokenizer.css create mode 100644 packages/main/test/sap/ui/webcomponents/main/pages/Token.html diff --git a/packages/base/src/delegate/ItemNavigation.js b/packages/base/src/delegate/ItemNavigation.js index a9af3fdb5cbe..50360b07972c 100644 --- a/packages/base/src/delegate/ItemNavigation.js +++ b/packages/base/src/delegate/ItemNavigation.js @@ -169,6 +169,10 @@ class ItemNavigation extends EventProvider { _getCurrentItem() { const items = this._getItems(); + if (!items.length) { + return null; + } + // normalize the index while (this.currentIndex >= items.length) { this.currentIndex -= this.rowSize; diff --git a/packages/base/src/events/PseudoEvents.js b/packages/base/src/events/PseudoEvents.js index e967d95e949b..565a75add0b9 100644 --- a/packages/base/src/events/PseudoEvents.js +++ b/packages/base/src/events/PseudoEvents.js @@ -22,6 +22,10 @@ const isTabNext = event => (event.key ? event.key === "Tab" : event.keyCode === const isTabPrevious = event => (event.key ? event.key === "Tab" : event.keyCode === KeyCodes.TAB) && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ false, /* Shift */ true); +const isBackSpace = event => (event.key ? (event.key === "Backspace" || event.key === "Backspace") : event.keyCode === KeyCodes.BACKSPACE) && !hasModifierKeys(event); + +const isDelete = event => (event.key ? (event.key === "Delete" || event.key === "Delete") : event.keyCode === KeyCodes.DELETE) && !hasModifierKeys(event); + const hasModifierKeys = event => event.shiftKey || event.altKey || getCtrlKey(event); const getCtrlKey = event => !!(event.metaKey || event.ctrlKey); // double negation doesn't have effect on boolean but ensures null and undefined are equivalent to false. @@ -40,4 +44,6 @@ export { isEscape, isTabNext, isTabPrevious, + isBackSpace, + isDelete }; diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js index 7155c7f0edfc..cc98ba1e7fd4 100644 --- a/packages/main/bundle.esm.js +++ b/packages/main/bundle.esm.js @@ -31,6 +31,7 @@ import ShellBar from "./dist/ShellBar.js"; import ShellBarItem from "./dist/ShellBarItem.js"; import Switch from "./dist/Switch.js"; import MessageStrip from "./dist/MessageStrip.js"; +import MultiComboBox from "./dist/MultiComboBox.js"; import TabContainer from "./dist/TabContainer.js"; import Tab from "./dist/Tab.js"; import TabSeparator from "./dist/TabSeparator.js"; @@ -42,6 +43,8 @@ import TextArea from "./dist/TextArea.js"; import Timeline from "./dist/Timeline.js"; import TimelineItem from "./dist/TimelineItem.js"; import Title from "./dist/Title.js"; +import Token from "./dist/Token.js"; +import Tokenizer from "./dist/Tokenizer.js"; import ToggleButton from "./dist/ToggleButton.js"; import List from "./dist/List.js"; diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs index d460ba5e8a5b..603be2dca02b 100644 --- a/packages/main/src/Input.hbs +++ b/packages/main/src/Input.hbs @@ -7,6 +7,10 @@
+ {{#if ctr._beginContent}} + + {{/if}} + + + + + {{#each ctr.items}} + {{#if this.selected}} + {{this._nodeText}} + {{/if}} + {{/each}} + + + {{#unless ctr.readonly}} + + {{/unless}} + + + + + {{#each ctr.items}} + {{#if this.selected}} + {{this._nodeText}} + {{/if}} + {{/each}} + + + + + + {{#each ctr._filteredItems}} + {{this._nodeText}} + {{/each}} + + + +
\ No newline at end of file diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js new file mode 100644 index 000000000000..6099f4fac7ea --- /dev/null +++ b/packages/main/src/MultiComboBox.js @@ -0,0 +1,348 @@ +import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; +import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; +import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js"; + +import MultiComboBoxRenderer from "./build/compiled/MultiComboBoxRenderer.lit.js"; + +// Styles +import styles from "./themes/MultiComboBox.css.js"; + +// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally) +import "./ThemePropertiesProvider.js"; +import Function from "@ui5/webcomponents-base/src/types/Function"; + +/** + * @public + */ +const metadata = { + tag: "ui5-multi-combobox", + defaultSlot: "description", + defaultSlot: "items", + slots: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ { + items: { + type: HTMLElement, + multiple: true, + listenFor: { include: ["*"] }, + }, + }, + properties: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ { + /** + * Defines the value of the ui5-multi-combobox. + *

+ * Note: The property is updated upon typing. + * + * @type {string} + * @public + */ + value: { + defaultValue: "", + type: String, + }, + + /** + * Defines a short hint intended to aid the user with data entry when the + * ui5-multi-combobox has no value. + *

+ * Note: The placeholder is not supported in IE. If the placeholder is provided, it won`t be displayed in IE. + * @type {string} + * @public + */ + placeholder: { + defaultValue: null, + type: String, + }, + + /** + * Defines if the user input will be prevented if no matching item has been found + * + * @type {boolean} + * @public + */ + validateInput: { + type: Boolean, + }, + + /** + * Defines whether ui5-multi-combobox is in disabled state. + *

+ * Note: A disabled ui5-input is completely uninteractive. + * + * @type {boolean} + * @public + */ + disabled: { + type: Boolean, + }, + + /** + * Defines the value state of the ui5-multi-combobox. + * Available options are: None, Success, Warning, and Error. + * + * @type {string} + * @public + */ + valueState: { + type: ValueState, + defaultValue: ValueState.None, + }, + + /** + * Defines whether the ui5-multi-combobox is readonly. + *

+ * Note: A read-only ui5-multi-combobox is not editable, + * but still provides visual feedback upon user interaction. + * + * @type {boolean} + * @public + */ + readonly: { + type: Boolean, + }, + + _showMorePopover: { type: Function }, + _tokenDelete: { type: Function }, + _tokenizerFocusOut: { type: Function }, + _showAllItemsPopover: { type: Function }, + _allItemsSelectionChange: { type: Function }, + _selectedItemsSelectionChange: { type: Function }, + _afterAllPopoverClose: { type: Function }, + _afterAllPopoverOpen: { type: Function }, + _inputChage: { type: Function }, + _filteredItems: { type: Object }, + _iconPressed: { type: Boolean }, + }, + events: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ { + /** + * Fired when the value of the ui5-multi-combobox changes at each keystroke, + * and when a suggestion item has been selected. + * + * @event + * @public + */ + input: {}, + + /** + * Fired when selection is changed by user interaction + * in SingleSelect and MultiSelect modes. + * + * @event + * @param {Array} items an array of the selected items. + * @public + */ + selectionChange: { + detail: { + items: { type: Array }, + }, + } + }, +}; + +/** + * @class + * + *

Overview

+ * + * An entry posted on the timeline. + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.MultiComboBox + * @extends UI5Element + * @tagname ui5-timeline + * @usestextcontent + * @public + */ +class MultiComboBox extends UI5Element { + static get metadata() { + return metadata; + } + + static get renderer() { + return MultiComboBoxRenderer; + } + + static get calculateTemplateContext() { + return state => { + return { + ctr: state, + editable: !state.readonly, + selectedItemsListMode: state.readonly ? "None" : "MultiSelect", + styles: { + tokenizer: { + "border": "none", + "width": "auto", + "max-width": "100%", + "min-width": "0px", + "height": "100%", + } + }, + classes: { + icon: { + [`ui5-multi-combobox---icon`]: true, + [`ui5-multi-combobox-icon-pressed`]: state._iconPressed, + } + } + } + }; + } + + static get styles() { + return styles; + } + + constructor() { + super(); + + this._filteredItems = []; + this._inputLastValue = ""; + this._deleting = false; + + this._showMorePopover = event => { + this._togglePopover(true); + } + + this._showAllItemsPopover = event => { + this._togglePopover(false); + } + + this._allItemsSelectionChange = event => { + this._listSelectionChange(event); + } + + this._selectedItemsSelectionChange = event => { + this._listSelectionChange(event); + } + + this._inputChage = event => { + const input = event.target; + const value = input.value; + const filteredItems = this._filterItems(value); + + if (!filteredItems.length && value && this.validateInput) { + input.value = this._inputLastValue; + input.valueState = "Error"; + + setTimeout(() => { + input.valueState = "None"; + }, 2000); + return; + } + + this._inputLastValue = input.value; + this.value = input.value; + this._filteredItems = filteredItems; + + if (filteredItems.length === 0) { + this._getPopover().close(); + } else { + this._getPopover().openBy(this); + } + + this.fireEvent("input"); + } + + this._tokenDelete = event => { + const token = event.detail.ref; + const item = this.items.filter(item => item._id === token.getAttribute("data-ui5-id"))[0]; + + item.selected = false; + this._deleting = true; + } + + this._tokenizerFocusOut = event => { + const tokenizer = this.shadowRoot.querySelector('ui5-tokenizer'); + const tokens = tokenizer.tokens.length - 1; + + if (tokens === 0 && this._deleting) { + setTimeout(() => { + this.shadowRoot.querySelector('ui5-input').focus(); + }, 0); + } + + this._deleting = false; + } + + this._afterAllPopoverClose = () => { + this._toggleIcon(); + } + + this._afterAllPopoverOpen = () => { + this._toggleIcon(); + } + } + + _filterItems(value) { + return this.items.filter(item => { + return item._nodeText.toLowerCase().startsWith(value.toLowerCase()); + }); + } + + _toggleIcon() { + this._iconPressed = !this._iconPressed + } + + _getSelectedItems() { + return this.items.filter(item => item.selected); + } + + _listSelectionChange(event) { + event.target.items.forEach(item => { + this.items.forEach(mcbItem => { + if (mcbItem._id === item.getAttribute("data-ui5-token-id")) { + mcbItem.selected = item.selected; + } + }); + }); + + this.fireEvent("selectionChange", { items: this._getSelectedItems() }); + } + + _getPopover(isMorePopover) { + return this.shadowRoot.querySelector(`.ui5-multi-combobox-${isMorePopover ? "selected" : "all"}-items--popover`); + } + + _togglePopover(isMorePopover) { + const popover = this._getPopover(isMorePopover); + const otherPopover = this._getPopover(!isMorePopover); + + if (popover && popover._isOpen) { + return popover.close(); + } + + otherPopover && otherPopover.close(); + popover && popover.openBy(this); + } + + onBeforeRendering() { + this._inputLastValue = this.value; + + const hasSelectedItem = this.items.some(item => item.selected); + + if (!hasSelectedItem) { + const morePopover = this.shadowRoot.querySelector(`.ui5-multi-combobox-selected-items--popover`); + + morePopover.close(); + } + + const input = this.shadowRoot.querySelector("ui5-input"); + + if (input && !input.value) { + this._filteredItems = this.items; + } + + const filteredItems = this._filterItems(this.value); + this._filteredItems = filteredItems; + } + + static async define(...params) { + await Promise.all([]); + + super.define(...params); + } +} + +Bootstrap.boot().then(_ => { + MultiComboBox.define(); +}); + +export default MultiComboBox; diff --git a/packages/main/src/Token.hbs b/packages/main/src/Token.hbs new file mode 100644 index 000000000000..d02263ba36c2 --- /dev/null +++ b/packages/main/src/Token.hbs @@ -0,0 +1,7 @@ +
+ {{ctr._nodeText}} + + {{#unless ctr.readonly}} + + {{/unless}} +
\ No newline at end of file diff --git a/packages/main/src/Token.js b/packages/main/src/Token.js new file mode 100644 index 000000000000..0a26991fce08 --- /dev/null +++ b/packages/main/src/Token.js @@ -0,0 +1,113 @@ +import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; +import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; + +import TokenRenderer from "./build/compiled/TokenRenderer.lit.js"; + +// Styles +import styles from "./themes/Token.css.js"; + +// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally) +import "./ThemePropertiesProvider.js"; + +import { isBackSpace, isEnter, isSpace, isDelete } from "@ui5/webcomponents-base/src/events/PseudoEvents"; + +/** + * @public + */ +const metadata = { + tag: "ui5-token", + defaultSlot: "description", + usesNodeText: true, + slots: /** @lends sap.ui.webcomponents.main.Token.prototype */ {}, + properties: /** @lends sap.ui.webcomponents.main.Token.prototype */ { + selected: { type: Boolean }, + readonly: { type: Boolean }, + _handlers: { type: Object }, + _tabIndex: { type: String, defaultValue: "-1" }, + }, + events: /** @lends sap.ui.webcomponents.main.Token.prototype */ { + delete: { + detail: { + backSpace: { type: Boolean }, + delete: { type: Boolean }, + } + }, + select: {} + }, +}; + +/** + * @class + * + *

Overview

+ * + * An entry posted on the timeline. + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.Token + * @extends UI5Element + * @tagname ui5-timeline + * @usestextcontent + * @public + */ +class Token extends UI5Element { + static get metadata() { + return metadata; + } + + static get renderer() { + return TokenRenderer; + } + + static get calculateTemplateContext() { + return state => { + return { + ctr: state, + } + }; + } + + static get styles() { + return styles; + } + + constructor() { + super(); + + this._handlers = { + select: () => { + this.fireEvent("select", {}); + }, + delete: () => { + this.fireEvent("delete"); + }, + keydown: event => { + const isBS = isBackSpace(event); + const isD = isDelete(event) + if (isBS || isD) { + this.fireEvent("delete", { + backSpace: isBS, + delete: isD, + }); + } + + if (isEnter(event) || isSpace(event)) { + this.fireEvent("select", {}); + } + } + }; + } + + static async define(...params) { + await Promise.all([]); + + super.define(...params); + } +} + +Bootstrap.boot().then(_ => { + Token.define(); +}); + +export default Token; diff --git a/packages/main/src/Tokenizer.hbs b/packages/main/src/Tokenizer.hbs new file mode 100644 index 000000000000..64f5dd928d57 --- /dev/null +++ b/packages/main/src/Tokenizer.hbs @@ -0,0 +1,16 @@ +
+
+
+
+
+ {{#each ctr.tokens}} +
+ +
+ {{/each}} +
+ + {{#if showNMore}} + {{hiddenTokensCount}} more + {{/if}} +
diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js new file mode 100644 index 000000000000..89d70677f8fb --- /dev/null +++ b/packages/main/src/Tokenizer.js @@ -0,0 +1,207 @@ +import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; +import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; + +import TokenizerRenderer from "./build/compiled/TokenizerRenderer.lit.js"; +import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler"; +import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation.js"; + +// Styles +import styles from "./themes/Tokenizer.css.js"; + +// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally) +import "./ThemePropertiesProvider.js"; +import Function from "@ui5/webcomponents-base/src/types/Function"; +import TokenizerTemplateContext from "./TokenizerTemplateContext.js"; + +/** + * @public + */ +const metadata = { + tag: "ui5-tokenizer", + defaultSlot: "description", + slots: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ { + tokens: { + type: HTMLElement, + multiple: true, + listenFor: { include: ["*"] }, + }, + }, + defaultSlot: "tokens", + properties: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ { + showMore: { type: Boolean }, + + _openOverflowPopover: { type: Function }, + _tokenDelete: { type: Function }, + _tokenSelect: { type: Function }, + _hiddenTokens: { type: Object, multiple: true }, + }, + events: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ { + tokenDelete: { + detail: { + ref: { type: HTMLElement }, + } + }, + + showMoreItemsPress: { + detail: { + ref: { type: HTMLElement }, + } + } + }, +}; + +/** + * @class + * + *

Overview

+ * + * An entry posted on the timeline. + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.Tokenizer + * @extends UI5Element + * @tagname ui5-timeline + * @usestextcontent + * @public + */ +class Tokenizer extends UI5Element { + static get metadata() { + return metadata; + } + + static get renderer() { + return TokenizerRenderer; + } + + static get calculateTemplateContext() { + return TokenizerTemplateContext.calculate; + } + + static get styles() { + return styles; + } + + constructor() { + super(); + + this._itemsCount = 0; + this._lastIndex = 0; + + this._handleResize = sizes => { + const overflowTokens = this._getTokens(true); + + if (!overflowTokens.length) { + this._hiddenTokens = []; + } + + if (this._hiddenTokens.length !== overflowTokens.length) { + this._hiddenTokens = overflowTokens; + } + } + + this._openOverflowPopover = () => { + this.fireEvent("showMoreItemsPress"); + } + + this._tokenDelete = event => { + if (event.detail && event.detail.backSpace) { + this._deleteByBackspace(); + } + + this._updateAndFocus(); + this.fireEvent("tokenDelete", { ref: event.target }); + } + + this._tokenSelect = event => { + const oldValue = event.target.selected; + + this.tokens.forEach(token => token.selected = false); + + event.target.selected = !oldValue; + } + + this._itemNav = new ItemNavigation(this); + + this._itemNav.getItemsCallback = () => { + return this._getTokens(); + }; + + this._delegates.push(this._itemNav); + } + + onBeforeRendering() { + this._itemNav.init(); + } + + onAfterRendering() { + requestAnimationFrame(() => { + this._handleResize(); + }, 0); + } + + onEnterDOM() { + ResizeHandler.register(this.shadowRoot.querySelector(".ui5-tokenizer--content"), this._handleResize); + } + + onExitDOM() { + ResizeHandler.deregister(this.shadowRoot.querySelector(".ui5-tokenizer--content"), this._handleResize); + } + + _getTokens(overflow) { + const firstToken = this.shadowRoot.querySelector("#ui5-tokenizer-token-placeholder"); + + if (!firstToken) { + return []; + } + + const firstTokenTop = firstToken.getBoundingClientRect().top; + const tokens = []; + + if (firstToken && this.tokens.length > 1) { + this.tokens.forEach(token => { + const tokenTop = token.getBoundingClientRect().top; + const tokenOverflows = overflow && tokenTop > firstTokenTop; + const tokenVisible = !overflow && tokenTop <= firstTokenTop; + + (tokenVisible || tokenOverflows) && tokens.push(token); + }); + } + + return tokens; + } + + /* Keyboard handling */ + + _updateAndFocus() { + if (this._getTokens().length) { + this._itemNav.update(); + + setTimeout(() => { + this._itemNav.focusCurrent(); + }, 0); + } + } + + _deleteByBackspace() { + const newIndex = this._itemNav.currentIndex - 1; + + if (newIndex < 0) { + this._itemNav.currentIndex = 0; + } else { + this._itemNav.currentIndex = newIndex; + } + } + + static async define(...params) { + await Promise.all([]); + + super.define(...params); + } +} + +Bootstrap.boot().then(_ => { + Tokenizer.define(); +}); + +export default Tokenizer; diff --git a/packages/main/src/TokenizerTemplateContext.js b/packages/main/src/TokenizerTemplateContext.js new file mode 100644 index 000000000000..222ddfe40e32 --- /dev/null +++ b/packages/main/src/TokenizerTemplateContext.js @@ -0,0 +1,19 @@ +class TokenizerTemplateContext { + static calculate(state) { + const context = { + ctr: state, + showNMore: state.showMore && state._hiddenTokens.length, + hiddenTokensCount: state._hiddenTokens.length, + classes: { + content: { + "ui5-tokenizer--content": true, + "ui5-tokenizer-nmore--content": state.showMore, + } + }, + }; + + return context; + } +} + +export default TokenizerTemplateContext; diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css new file mode 100644 index 000000000000..7b3b75e032f9 --- /dev/null +++ b/packages/main/src/themes/MultiComboBox.css @@ -0,0 +1,34 @@ +:host(ui5-multi-combobox) { + display: inline-block; + width: 100%; + + --_ui5_popover_content_padding: 0; +} + +.ui5-multi-combobox--wrapper { + display: flex; + overflow: hidden; + width: 100%; + height: 100%; +} + +.ui5-multi-combobox---icon { + color: var(--sapUiContentIconColor); + cursor: pointer; + outline: none; + box-sizing: border-box; +} + +.ui5-multi-combobox---icon:active { + background-color: var(--sapUiButtonLiteActiveBackground); + color: var(--sapUiButtonActiveTextColor); +} + +.ui5-multi-combobox---icon.ui5-multi-combobox-icon-pressed { + background: var(--sapUiToggleButtonPressedBackground); + color: var(--sapUiButtonActiveTextColor); +} + +.ui5-multi-combobox---icon:not(.ui5-multi-combobox-icon-pressed):not(:active):hover { + background: var(--sapUiButtonLiteHoverBackground); +} diff --git a/packages/main/src/themes/Popup.css b/packages/main/src/themes/Popup.css index 8497f4020e62..e8625cee2d26 100644 --- a/packages/main/src/themes/Popup.css +++ b/packages/main/src/themes/Popup.css @@ -65,7 +65,7 @@ .sapMPopup .sapMPopupScroll { vertical-align: middle; box-sizing: border-box; - padding: 0.4375em; + padding: var(--_ui5_popover_content_padding); } .sapUiBLy { diff --git a/packages/main/src/themes/Token.css b/packages/main/src/themes/Token.css new file mode 100644 index 000000000000..b927b9b87daf --- /dev/null +++ b/packages/main/src/themes/Token.css @@ -0,0 +1,73 @@ +:host(ui5-token) { + display: inline-block; + background: var(--sapUiButtonBackground); + border-width: 1px; + border-style: solid; + border-color: var(--sapUiButtonBorderColor); + border-radius: 0.125rem; + color: var(--sapUiButtonTextColor); + font-size: var(--sapMFontMediumSize); + font-family: var(--sapUiFontFamily); + height: 100%; + box-sizing: border-box; + user-select: none; +} + +:host(ui5-token:not([readonly]):hover) { + background: var(--sapUiButtonHoverBackground); + border: 1px solid var(--sapUiButtonHoverBorderColor); +} + +:host(ui5-token[selected]:not([readonly])) { + color: var(--sapUiToggleButtonPressedTextColor); + background: var(--sapUiToggleButtonPressedBackground); + border: 1px solid var(--sapUiToggleButtonPressedBorderColor); +} + +:host(ui5-token[selected]:not([readonly]):hover) { + background: var(--sapUiToggleButtonPressedHoverBackground); + border: 1px solid var(--sapUiToggleButtonPressedHoverBorderColor); +} + +:host(ui5-token[readonly]) { + color: var(--sapUiContentForegroundTextColor); + background: var(--sapUiHcReducedBackground); +} + +:host(ui5-token[readonly]) .ui5-token--wrapper { + padding-right: 0.375rem; +} + +.ui5-token--icon { + padding: 0.25rem 0.5rem; + color: inherit; + cursor: pointer; + width: 1rem; + height: 1rem; +} + +.ui5-token--wrapper { + display: flex; + align-items: center; + height: 100%; + width: 100%; + cursor: default; + padding-left: 0.375rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + box-sizing: border-box; +} + +.ui5-token--wrapper:focus { + outline-offset: -2px; + outline: 1px dotted var(--sapUiContentFocusColor); +} + +:host(ui5-token[selected]) .ui5-token--wrapper:focus { + outline: 1px dotted var(--sapUiContentContrastFocusColor); +} + +.ui5-token--text { + white-space: nowrap; + font-size: var(--sapMFontMediumSize); +} \ No newline at end of file diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css new file mode 100644 index 000000000000..2dd901a5a5ce --- /dev/null +++ b/packages/main/src/themes/Tokenizer.css @@ -0,0 +1,43 @@ +:host(ui5-tokenizer) { + display: inline-block; + box-sizing: border-box; + border: 1px solid black; + height: 2.25rem; +} + +.ui5-tokenizer--wrapper { + height: 100%; + display: flex; + align-items: center; + padding: 0.1875rem; + overflow-x: scroll; + box-sizing: border-box; + font-family: var(--sapUiFontFamily); + overflow-y: hidden; +} + +.ui5-tokenizer--token--wrapper { + display: inline-block; + height: 100%; +} + +.ui5-tokenizer--token--wrapper:not(:nth-child(1)) { + display: inline-block; + box-sizing: border-box; +} + +.ui5-tokenizer--content { + height: 100%; +} + +.ui5-tokenizer--content.ui5-tokenizer-nmore--content { + overflow: hidden; +} + +.ui5-tokenizer-more-text { + display: inline-block; + margin-left: 3px; + cursor: pointer; + white-space: nowrap; + font-size: var(--sapMFontMediumSize); +} \ No newline at end of file diff --git a/packages/main/src/themes/base/Popover-parameters.css b/packages/main/src/themes/base/Popover-parameters.css index 2d3f7944a202..5ef5be50cb50 100644 --- a/packages/main/src/themes/base/Popover-parameters.css +++ b/packages/main/src/themes/base/Popover-parameters.css @@ -1,3 +1,4 @@ :root { --_ui5_popover_arrow_shadow_color:rgba(0,0,0,.3); + --_ui5_popover_content_padding: .4375em; } \ No newline at end of file diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Popups.html b/packages/main/test/sap/ui/webcomponents/main/pages/Popups.html index 3df7e4519abf..3439f63f1752 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/Popups.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/Popups.html @@ -6,6 +6,10 @@ Popups + + + + + + + + + + + + UI5 WebComponents + +
+
+ + UI5 WebComponents + +
+
+ + + Hello + UI5 + webcomponents + + +
+
+ + + World! + Martin + Hristovthelong + + +
+
+ + + B + A + A + A + B + B + B + + +
+
+ + + Cosy + Compact + Condensed + Longest word in the world + + +
+
+ + + Cosy + Compact + Condensed + Longest word in the world + + +
+
+ + + Cosy + Compact + Condensed + Longest word in the world + + +
+
+ + + Cosy + Compact + Condensed + Longest word in the world + + +
+
+ + + Cosy + Compact + Condensed + Longest word in the world + + +
+
+ + + Cosy + Compact + Condensed + Longest word in the world + + +
+
+ + + Cosy + Compact + Condensed + Longest word in the world + + +
+
+ + + Cosy + Compact + Condensed + Longest word in the world + + + + + \ No newline at end of file From bac17326beececade819bb81557e3eed65685810 Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Mon, 13 May 2019 11:00:15 +0300 Subject: [PATCH 02/14] improve styling --- packages/main/src/MultiComboBox.hbs | 10 ++++----- packages/main/src/MultiComboBox.js | 8 ++++--- packages/main/src/themes/MultiComboBox.css | 16 ++++++++++---- packages/main/src/themes/Token.css | 6 ++--- packages/main/src/themes/Tokenizer.css | 9 +++----- .../main/src/themes/base/Input-parameters.css | 2 +- .../main/src/themes/base/Token-parameters.css | 3 +++ .../themes/base/component-derived-colors.js | 2 ++ .../themes/sap_belize/Token-parameters.css | 1 + .../themes/sap_belize/parameters-bundle.css | 1 + .../ui/webcomponents/main/pages/Token.html | 22 +++++++++---------- 11 files changed, 47 insertions(+), 33 deletions(-) create mode 100644 packages/main/src/themes/base/Token-parameters.css create mode 100644 packages/main/src/themes/sap_belize/Token-parameters.css diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs index d647971c1645..e25b2b29c895 100644 --- a/packages/main/src/MultiComboBox.hbs +++ b/packages/main/src/MultiComboBox.hbs @@ -17,7 +17,7 @@ > {{#each ctr.items}} {{#if this.selected}} - {{this._nodeText}} + {{this._nodeText}} {{/if}} {{/each}} @@ -38,12 +38,12 @@ hide-header ?hide-arrow={{editable}} placement-type="Bottom"> - {{#each ctr.items}} {{#if this.selected}} - {{this._nodeText}} + {{this._nodeText}} {{/if}} {{/each}} @@ -59,9 +59,9 @@ @selectionChange={{ctr._allItemsSelectionChange}} @afterClose={{ctr._afterAllPopoverClose}} @afterOpen={{ctr._afterAllPopoverOpen}}> - + {{#each ctr._filteredItems}} - {{this._nodeText}} + {{this._nodeText}} {{/each}} diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js index 6099f4fac7ea..9456f6aac1ff 100644 --- a/packages/main/src/MultiComboBox.js +++ b/packages/main/src/MultiComboBox.js @@ -178,7 +178,7 @@ class MultiComboBox extends UI5Element { }, classes: { icon: { - [`ui5-multi-combobox---icon`]: true, + [`ui5-multi-combobox--icon`]: true, [`ui5-multi-combobox-icon-pressed`]: state._iconPressed, } } @@ -251,9 +251,11 @@ class MultiComboBox extends UI5Element { this._tokenizerFocusOut = event => { const tokenizer = this.shadowRoot.querySelector('ui5-tokenizer'); - const tokens = tokenizer.tokens.length - 1; + const tokensCount = tokenizer.tokens.length - 1; - if (tokens === 0 && this._deleting) { + tokenizer.tokens.forEach(token => token.selected = false); + + if (tokensCount === 0 && this._deleting) { setTimeout(() => { this.shadowRoot.querySelector('ui5-input').focus(); }, 0); diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css index 7b3b75e032f9..bed2e2570125 100644 --- a/packages/main/src/themes/MultiComboBox.css +++ b/packages/main/src/themes/MultiComboBox.css @@ -12,23 +12,31 @@ height: 100%; } -.ui5-multi-combobox---icon { +.ui5-multi-combobox--icon { color: var(--sapUiContentIconColor); cursor: pointer; outline: none; box-sizing: border-box; } -.ui5-multi-combobox---icon:active { +.ui5-multi-combobox--icon:active { background-color: var(--sapUiButtonLiteActiveBackground); color: var(--sapUiButtonActiveTextColor); } -.ui5-multi-combobox---icon.ui5-multi-combobox-icon-pressed { +.ui5-multi-combobox--icon.ui5-multi-combobox-icon-pressed { background: var(--sapUiToggleButtonPressedBackground); color: var(--sapUiButtonActiveTextColor); } -.ui5-multi-combobox---icon:not(.ui5-multi-combobox-icon-pressed):not(:active):hover { +.ui5-multi-combobox--icon:not(.ui5-multi-combobox-icon-pressed):not(:active):hover { background: var(--sapUiButtonLiteHoverBackground); } + +.ui5-multi-combobox--token { + height: 80%; +} + +span.sapUiSizeCompact .ui5-multi-combobox--token { + height: 100%; +} diff --git a/packages/main/src/themes/Token.css b/packages/main/src/themes/Token.css index b927b9b87daf..1a83d919c006 100644 --- a/packages/main/src/themes/Token.css +++ b/packages/main/src/themes/Token.css @@ -3,7 +3,7 @@ background: var(--sapUiButtonBackground); border-width: 1px; border-style: solid; - border-color: var(--sapUiButtonBorderColor); + border-color: var(--_ui5_token_border_color); border-radius: 0.125rem; color: var(--sapUiButtonTextColor); font-size: var(--sapMFontMediumSize); @@ -15,7 +15,7 @@ :host(ui5-token:not([readonly]):hover) { background: var(--sapUiButtonHoverBackground); - border: 1px solid var(--sapUiButtonHoverBorderColor); + border-color: var(--sapUiButtonHoverBackgroundDarken5); } :host(ui5-token[selected]:not([readonly])) { @@ -70,4 +70,4 @@ .ui5-token--text { white-space: nowrap; font-size: var(--sapMFontMediumSize); -} \ No newline at end of file +} diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css index 2dd901a5a5ce..3fb604fa3fde 100644 --- a/packages/main/src/themes/Tokenizer.css +++ b/packages/main/src/themes/Tokenizer.css @@ -17,13 +17,10 @@ } .ui5-tokenizer--token--wrapper { - display: inline-block; - height: 100%; -} - -.ui5-tokenizer--token--wrapper:not(:nth-child(1)) { - display: inline-block; + display: inline-flex; + align-items: center; box-sizing: border-box; + height: 100%; } .ui5-tokenizer--content { diff --git a/packages/main/src/themes/base/Input-parameters.css b/packages/main/src/themes/base/Input-parameters.css index 358e17a33cfe..fcc888947079 100644 --- a/packages/main/src/themes/base/Input-parameters.css +++ b/packages/main/src/themes/base/Input-parameters.css @@ -11,7 +11,7 @@ --_ui5_input_disabled_font_weight: normal; --_ui5_input_disabled_border_color: var(--sapUiFieldBorderColor); --_ui5_input_disabled_background: var(--sapUiFieldBackground); - --sap_wc_input_disabled_opacity: 1; + --sap_wc_input_disabled_opacity: 0.5; --sap_wc_input_icon_min_width: 2.375rem; } \ No newline at end of file diff --git a/packages/main/src/themes/base/Token-parameters.css b/packages/main/src/themes/base/Token-parameters.css new file mode 100644 index 000000000000..d898db53fe16 --- /dev/null +++ b/packages/main/src/themes/base/Token-parameters.css @@ -0,0 +1,3 @@ +:root { + --_ui5_token_border_color: var(--sapUiButtonBackgroundDarken10); +} \ No newline at end of file diff --git a/packages/main/src/themes/base/component-derived-colors.js b/packages/main/src/themes/base/component-derived-colors.js index 32d329edd1d0..3f8f5110bad4 100644 --- a/packages/main/src/themes/base/component-derived-colors.js +++ b/packages/main/src/themes/base/component-derived-colors.js @@ -20,6 +20,7 @@ const derivationsFactory = ({ darken, lighten, contrast, fade, saturate, desatur "--sapUiButtonBackgroundDarken7": () => darken("--sapUiButtonBackground", 7), // #e5e5e5; "--sapUiButtonBackgroundDarken2": () => darken("--sapUiButtonBackground", 2), // #f2f2f2; "--sapUiButtonHoverBackgroundDarken2": () => darken("--sapUiButtonHoverBackground", 2), // #e5e5e5; + "--sapUiButtonHoverBackgroundDarken5": () => darken("--sapUiButtonHoverBackground", 5), "--sapUiButtonRejectActiveBackgroundDarken5": () => darken("--sapUiButtonRejectActiveBackground", 5), // #a20000; "--sapUiButtonAcceptActiveBackgroundDarken5": () => darken("--sapUiButtonAcceptActiveBackground", 5), // #246924; "--sapUiContentForegroundColorLighten5": () => lighten("--sapUiContentForegroundColor", 5), // #f2f2f2; @@ -29,6 +30,7 @@ const derivationsFactory = ({ darken, lighten, contrast, fade, saturate, desatur "--sapUiContentForegroundColorDarken10": () => darken("--sapUiContentForegroundColor", 10), // #cccccc; "--sapUiButtonRejectActiveBackgroundLighten5": () => lighten("--sapUiButtonRejectActiveBackground", 5), "--sapUiButtonAcceptActiveBackgroundLighten5": () => lighten("--sapUiButtonAcceptActiveBackground", 5), + "--sapUiButtonBackgroundDarken10": () => darken("--sapUiButtonBackground", 10), }; return derivations; diff --git a/packages/main/src/themes/sap_belize/Token-parameters.css b/packages/main/src/themes/sap_belize/Token-parameters.css new file mode 100644 index 000000000000..536f22d3f76b --- /dev/null +++ b/packages/main/src/themes/sap_belize/Token-parameters.css @@ -0,0 +1 @@ +@import "../base/Token-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css index 4c583a3afdc8..ecf5811a0b86 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -24,3 +24,4 @@ @import "./TimelineItem-parameters.css"; @import "./ToggleButton-parameters.css"; @import "./YearPicker-parameters.css"; +@import "./Token-parameters.css"; diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Token.html b/packages/main/test/sap/ui/webcomponents/main/pages/Token.html index 1aaa8ec728a8..2eb99b2ea87c 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/Token.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/Token.html @@ -12,7 +12,7 @@ @@ -23,12 +23,12 @@ - UI5 WebComponents +

- UI5 WebComponents +

@@ -64,7 +64,7 @@

- + Cosy Compact Condensed @@ -74,7 +74,7 @@

- + Cosy Compact Condensed @@ -84,7 +84,7 @@

- + Cosy Compact Condensed @@ -94,7 +94,7 @@

- + Cosy Compact Condensed @@ -104,7 +104,7 @@

- + Cosy Compact Condensed @@ -114,7 +114,7 @@

- + Cosy Compact Condensed @@ -124,7 +124,7 @@

- + Cosy Compact Condensed @@ -134,7 +134,7 @@

- + Cosy Compact Condensed From 58cedcc6966279fb455aab2a7e16795f2f068649 Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Mon, 13 May 2019 18:08:04 +0300 Subject: [PATCH 03/14] apply all themes --- packages/base/src/UI5Element.js | 8 +- packages/base/src/events/PseudoEvents.js | 13 ++- packages/main/src/MultiComboBox.hbs | 8 +- packages/main/src/MultiComboBox.js | 11 +++ packages/main/src/Token.hbs | 2 +- packages/main/src/Token.js | 7 +- packages/main/src/Tokenizer.hbs | 2 +- packages/main/src/Tokenizer.js | 88 ++++++++++--------- packages/main/src/themes/Input.css | 10 ++- packages/main/src/themes/MultiComboBox.css | 8 ++ packages/main/src/themes/ShellBarInput.css | 7 -- packages/main/src/themes/Token.css | 22 +++-- packages/main/src/themes/Tokenizer.css | 7 +- .../main/src/themes/base/Input-parameters.css | 1 + .../main/src/themes/base/Token-parameters.css | 5 ++ .../sap_belize_hcb/Token-parameters.css | 7 ++ .../sap_belize_hcb/parameters-bundle.css | 1 + .../themes/sap_fiori_3/Token-parameters.css | 10 +++ .../sap_fiori_3/global-derived-colors.js | 2 + .../themes/sap_fiori_3/parameters-bundle.css | 1 + .../pages/{Token.html => MultiComboBox.html} | 8 +- 21 files changed, 158 insertions(+), 70 deletions(-) create mode 100644 packages/main/src/themes/sap_belize_hcb/Token-parameters.css create mode 100644 packages/main/src/themes/sap_fiori_3/Token-parameters.css rename packages/main/test/sap/ui/webcomponents/main/pages/{Token.html => MultiComboBox.html} (97%) diff --git a/packages/base/src/UI5Element.js b/packages/base/src/UI5Element.js index daf54fe5c5a1..8070a917bc2d 100644 --- a/packages/base/src/UI5Element.js +++ b/packages/base/src/UI5Element.js @@ -1,4 +1,4 @@ -import { getWCNoConflict } from "./Configuration.js"; +import { getWCNoConflict, getCompactSize } from "./Configuration.js"; import DOMObserver from "./compatibility/DOMObserver.js"; import ShadowDOM from "./compatibility/ShadowDOM.js"; import UI5ElementMetadata from "./UI5ElementMetadata.js"; @@ -78,6 +78,12 @@ class UI5Element extends HTMLElement { } async _initializeShadowRoot() { + const isCompact = getCompactSize(); + + if (isCompact) { + this.setAttribute("data-ui5-compact-size", ""); + } + if (this.constructor.getMetadata().getNoShadowDOM()) { return Promise.resolve(); } diff --git a/packages/base/src/events/PseudoEvents.js b/packages/base/src/events/PseudoEvents.js index 565a75add0b9..cb0f1e32f1de 100644 --- a/packages/base/src/events/PseudoEvents.js +++ b/packages/base/src/events/PseudoEvents.js @@ -26,6 +26,16 @@ const isBackSpace = event => (event.key ? (event.key === "Backspace" || event.ke const isDelete = event => (event.key ? (event.key === "Delete" || event.key === "Delete") : event.keyCode === KeyCodes.DELETE) && !hasModifierKeys(event); +const isShow = event => { + if (event.key) { + return (event.key === "F4" && !hasModifierKeys(event)) || + ((event.key === "ArrowDown" || event.key === "Down") && checkModifierKeys(event, /*Ctrl*/ false, /*Alt*/ true, /*Shift*/ false)); + } + return (event.keyCode == KeyCodes.F4 && !hasModifierKeys(event)) || + (event.keyCode == KeyCodes.ARROW_DOWN && checkModifierKeys(event, /*Ctrl*/ false, /*Alt*/ true, /*Shift*/ false)); + +} + const hasModifierKeys = event => event.shiftKey || event.altKey || getCtrlKey(event); const getCtrlKey = event => !!(event.metaKey || event.ctrlKey); // double negation doesn't have effect on boolean but ensures null and undefined are equivalent to false. @@ -45,5 +55,6 @@ export { isTabNext, isTabPrevious, isBackSpace, - isDelete + isDelete, + isShow, }; diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs index e25b2b29c895..3269d2fe2ec6 100644 --- a/packages/main/src/MultiComboBox.hbs +++ b/packages/main/src/MultiComboBox.hbs @@ -2,14 +2,16 @@ + @input="{{ctr._inputChage}}" + @keydown="{{ctr._keydown}}"> { this._toggleIcon(); } + + this._keydown = this._handleKeyDown.bind(this); + } + + + _handleKeyDown(event) { + if (isShow(event)) { + this._togglePopover(); + } } _filterItems(value) { diff --git a/packages/main/src/Token.hbs b/packages/main/src/Token.hbs index d02263ba36c2..48f26feeea4f 100644 --- a/packages/main/src/Token.hbs +++ b/packages/main/src/Token.hbs @@ -2,6 +2,6 @@ {{ctr._nodeText}} {{#unless ctr.readonly}} - + {{/unless}} \ No newline at end of file diff --git a/packages/main/src/Token.js b/packages/main/src/Token.js index 0a26991fce08..ddaa575916a4 100644 --- a/packages/main/src/Token.js +++ b/packages/main/src/Token.js @@ -1,5 +1,6 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; +import { getTheme } from "@ui5/webcomponents-base/src/Configuration"; import TokenRenderer from "./build/compiled/TokenRenderer.lit.js"; @@ -64,6 +65,7 @@ class Token extends UI5Element { return state => { return { ctr: state, + iconURI: getTheme() === "sap_fiori_3" ? "sap-icon://decline" : "sap-icon://sys-cancel", } }; } @@ -84,8 +86,9 @@ class Token extends UI5Element { }, keydown: event => { const isBS = isBackSpace(event); - const isD = isDelete(event) - if (isBS || isD) { + const isD = isDelete(event); + + if (!this.readonly && (isBS || isD)) { this.fireEvent("delete", { backSpace: isBS, delete: isD, diff --git a/packages/main/src/Tokenizer.hbs b/packages/main/src/Tokenizer.hbs index 64f5dd928d57..f6f6f0d467d7 100644 --- a/packages/main/src/Tokenizer.hbs +++ b/packages/main/src/Tokenizer.hbs @@ -1,5 +1,5 @@
-
+
diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js index 89d70677f8fb..5dfe48ddfecd 100644 --- a/packages/main/src/Tokenizer.js +++ b/packages/main/src/Tokenizer.js @@ -20,19 +20,18 @@ const metadata = { tag: "ui5-tokenizer", defaultSlot: "description", slots: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ { - tokens: { + tokens: { type: HTMLElement, multiple: true, - listenFor: { include: ["*"] }, }, }, defaultSlot: "tokens", properties: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ { showMore: { type: Boolean }, + disabled: { type: Boolean }, _openOverflowPopover: { type: Function }, _tokenDelete: { type: Function }, - _tokenSelect: { type: Function }, _hiddenTokens: { type: Object, multiple: true }, }, events: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ { @@ -87,43 +86,18 @@ class Tokenizer extends UI5Element { this._itemsCount = 0; this._lastIndex = 0; - - this._handleResize = sizes => { - const overflowTokens = this._getTokens(true); - - if (!overflowTokens.length) { - this._hiddenTokens = []; - } - - if (this._hiddenTokens.length !== overflowTokens.length) { - this._hiddenTokens = overflowTokens; - } - } - - this._openOverflowPopover = () => { - this.fireEvent("showMoreItemsPress"); - } - - this._tokenDelete = event => { - if (event.detail && event.detail.backSpace) { - this._deleteByBackspace(); - } - - this._updateAndFocus(); - this.fireEvent("tokenDelete", { ref: event.target }); - } - - this._tokenSelect = event => { - const oldValue = event.target.selected; - - this.tokens.forEach(token => token.selected = false); - - event.target.selected = !oldValue; - } - + this._lastTokenCount = 0; + this._recalculateLayouting = false; + this._resizeHandler = this._handleResize.bind(this); this._itemNav = new ItemNavigation(this); + this._tokenDelete = this._handleTokenDelete.bind(this); + this._openOverflowPopover = this._handleOpenOverflowPopover.bind(this); this._itemNav.getItemsCallback = () => { + if (this.disabled) { + return []; + } + return this._getTokens(); }; @@ -132,20 +106,41 @@ class Tokenizer extends UI5Element { onBeforeRendering() { this._itemNav.init(); + + if (this._lastTokenCount !== this.tokens.length) { + this._recalculateLayouting = true; + } + + this._lastTokenCount = this.tokens.length; } onAfterRendering() { - requestAnimationFrame(() => { + if (this._recalculateLayouting) { this._handleResize(); - }, 0); + this._recalculateLayouting = false; + } } onEnterDOM() { - ResizeHandler.register(this.shadowRoot.querySelector(".ui5-tokenizer--content"), this._handleResize); + ResizeHandler.register(this.shadowRoot.querySelector(".ui5-tokenizer--content"), this._resizeHandler); } onExitDOM() { - ResizeHandler.deregister(this.shadowRoot.querySelector(".ui5-tokenizer--content"), this._handleResize); + ResizeHandler.deregister(this.shadowRoot.querySelector(".ui5-tokenizer--content"), this._resizeHandler); + } + + _handleOpenOverflowPopover() { + this.fireEvent("showMoreItemsPress"); + } + + _handleResize() { + const overflowTokens = this._getTokens(true); + + if (!overflowTokens.length) { + this._hiddenTokens = []; + } + + this._hiddenTokens = overflowTokens; } _getTokens(overflow) { @@ -158,7 +153,7 @@ class Tokenizer extends UI5Element { const firstTokenTop = firstToken.getBoundingClientRect().top; const tokens = []; - if (firstToken && this.tokens.length > 1) { + if (firstToken && this.tokens.length) { this.tokens.forEach(token => { const tokenTop = token.getBoundingClientRect().top; const tokenOverflows = overflow && tokenTop > firstTokenTop; @@ -171,6 +166,15 @@ class Tokenizer extends UI5Element { return tokens; } + _handleTokenDelete(event) { + if (event.detail && event.detail.backSpace) { + this._deleteByBackspace(); + } + + this._updateAndFocus(); + this.fireEvent("tokenDelete", { ref: event.target }); + } + /* Keyboard handling */ _updateAndFocus() { diff --git a/packages/main/src/themes/Input.css b/packages/main/src/themes/Input.css index a8d30c135b08..59b435183e10 100644 --- a/packages/main/src/themes/Input.css +++ b/packages/main/src/themes/Input.css @@ -160,10 +160,18 @@ ui5-input { } /* Input Icon */ -::slotted(ui5-icon) { +:host(ui5-input) ::slotted(ui5-icon) { min-width: var(--sap_wc_input_icon_min_width); } ui5-input ui5-icon { min-width: var(--sap_wc_input_icon_min_width); +} + +:host(ui5-input[data-ui5-compact-size]) ::slotted(ui5-icon) { + min-width: var(--sap_wc_input_compact_min_width); +} + +ui5-input[data-ui5-compact-size] ui5-icon { + min-width: var(--sap_wc_input_compact_min_width); } \ No newline at end of file diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css index bed2e2570125..9cf1ce0c591c 100644 --- a/packages/main/src/themes/MultiComboBox.css +++ b/packages/main/src/themes/MultiComboBox.css @@ -5,6 +5,7 @@ --_ui5_popover_content_padding: 0; } + .ui5-multi-combobox--wrapper { display: flex; overflow: hidden; @@ -12,11 +13,18 @@ height: 100%; } + + .ui5-multi-combobox--icon { color: var(--sapUiContentIconColor); cursor: pointer; outline: none; box-sizing: border-box; + width: 2.375rem; +} + +.ui5-multi-combobox--icon[data-ui5-compact-size] { + width: 2rem; } .ui5-multi-combobox--icon:active { diff --git a/packages/main/src/themes/ShellBarInput.css b/packages/main/src/themes/ShellBarInput.css index ec0011bb0f7c..e917730f644b 100644 --- a/packages/main/src/themes/ShellBarInput.css +++ b/packages/main/src/themes/ShellBarInput.css @@ -18,11 +18,4 @@ .sapUiSizeCompact .sapWCShellBarSearchFieldElement.sapWCInput { height: 2.25rem; -} - -.sapUiSizeCompact .sapWCFocus .sapWCInputBaseContentWrapper::after { - width: calc(100% - 0.25rem); - height: calc(100% - 0.25rem); - top: 1px; - left: 1px; } \ No newline at end of file diff --git a/packages/main/src/themes/Token.css b/packages/main/src/themes/Token.css index 1a83d919c006..b7ecf2bc0688 100644 --- a/packages/main/src/themes/Token.css +++ b/packages/main/src/themes/Token.css @@ -4,18 +4,29 @@ border-width: 1px; border-style: solid; border-color: var(--_ui5_token_border_color); - border-radius: 0.125rem; - color: var(--sapUiButtonTextColor); + border-radius: var(--_ui5_token_border_radius); + color: var(--_ui5_token_text_color); font-size: var(--sapMFontMediumSize); font-family: var(--sapUiFontFamily); - height: 100%; + height: 1.625rem; box-sizing: border-box; user-select: none; } +:host(ui5-token[data-ui5-compact-size]) { + font-size: 0.75rem; + height: 1.25rem; +} + +:host(ui5-token[data-ui5-compact-size]) .ui5-token--icon { + padding: 0 0.25rem; + width: 0.75rem; + height: 0.75rem; +} + :host(ui5-token:not([readonly]):hover) { background: var(--sapUiButtonHoverBackground); - border-color: var(--sapUiButtonHoverBackgroundDarken5); + border-color: var(--_ui5_token_hover_border_color); } :host(ui5-token[selected]:not([readonly])) { @@ -31,7 +42,6 @@ :host(ui5-token[readonly]) { color: var(--sapUiContentForegroundTextColor); - background: var(--sapUiHcReducedBackground); } :host(ui5-token[readonly]) .ui5-token--wrapper { @@ -44,6 +54,7 @@ cursor: pointer; width: 1rem; height: 1rem; + color: var(--_ui5_token_icon_color); } .ui5-token--wrapper { @@ -69,5 +80,4 @@ .ui5-token--text { white-space: nowrap; - font-size: var(--sapMFontMediumSize); } diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css index 3fb604fa3fde..a0222324bccd 100644 --- a/packages/main/src/themes/Tokenizer.css +++ b/packages/main/src/themes/Tokenizer.css @@ -5,6 +5,10 @@ height: 2.25rem; } +:host(ui5-tokenizer[data-ui5-compact-size]) .ui5-tokenizer--wrapper { + padding: 0.1875rem 0.125rem; +} + .ui5-tokenizer--wrapper { height: 100%; display: flex; @@ -37,4 +41,5 @@ cursor: pointer; white-space: nowrap; font-size: var(--sapMFontMediumSize); -} \ No newline at end of file +} + diff --git a/packages/main/src/themes/base/Input-parameters.css b/packages/main/src/themes/base/Input-parameters.css index fcc888947079..3c5d6adbaf80 100644 --- a/packages/main/src/themes/base/Input-parameters.css +++ b/packages/main/src/themes/base/Input-parameters.css @@ -13,5 +13,6 @@ --_ui5_input_disabled_background: var(--sapUiFieldBackground); --sap_wc_input_disabled_opacity: 0.5; --sap_wc_input_icon_min_width: 2.375rem; + --sap_wc_input_compact_min_width: 2rem; } \ No newline at end of file diff --git a/packages/main/src/themes/base/Token-parameters.css b/packages/main/src/themes/base/Token-parameters.css index d898db53fe16..019caf8a22f3 100644 --- a/packages/main/src/themes/base/Token-parameters.css +++ b/packages/main/src/themes/base/Token-parameters.css @@ -1,3 +1,8 @@ :root { + --_ui5_token_background: var(--sapUiButtonBackground); --_ui5_token_border_color: var(--sapUiButtonBackgroundDarken10); + --_ui5_token_border_radius: 0.125rem; + --_ui5_token_text_color: var(--sapUiButtonTextColor); + --_ui5_token_icon_color: var(--sapUiContentIconColor); + --_ui5_token_hover_border_color: var(--sapUiButtonHoverBackgroundDarken5); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/Token-parameters.css b/packages/main/src/themes/sap_belize_hcb/Token-parameters.css new file mode 100644 index 000000000000..d2b914e9330e --- /dev/null +++ b/packages/main/src/themes/sap_belize_hcb/Token-parameters.css @@ -0,0 +1,7 @@ +@import "../base/YearPicker-parameters.css"; + +:root { + --_ui5_token_border_radius: 0.125rem; + --_ui5_token_border_color: var(--sapUiButtonBorderColor); + --_ui5_token_hover_border_color: var(--sapUiButtonHoverBorderColor); +} diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css index 8ddb31aeb4f9..fe5161b437bb 100644 --- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css @@ -23,3 +23,4 @@ @import "./TimelineItem-parameters.css"; @import "./ToggleButton-parameters.css"; @import "./YearPicker-parameters.css"; +@import "./Token-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3/Token-parameters.css b/packages/main/src/themes/sap_fiori_3/Token-parameters.css new file mode 100644 index 000000000000..70dfa295c641 --- /dev/null +++ b/packages/main/src/themes/sap_fiori_3/Token-parameters.css @@ -0,0 +1,10 @@ +@import "../base/Token-parameters.css"; + +:root { + --_ui5_token_background: var(--sapUiButtonBackgroundDarken2); + --_ui5_token_border_color: var(--sapUiButtonBackgroundDarken24); + --_ui5_token_border_radius: 0.25rem; + --_ui5_token_text_color: var(--sapUiBaseText); + --_ui5_token_icon_color: var(--sapUiContentIconColor); + --_ui5_token_hover_border_color: var(--sapUiButtonHoverBorderColorLighten30); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3/global-derived-colors.js b/packages/main/src/themes/sap_fiori_3/global-derived-colors.js index 5ba2f2d67c85..716584c74105 100644 --- a/packages/main/src/themes/sap_fiori_3/global-derived-colors.js +++ b/packages/main/src/themes/sap_fiori_3/global-derived-colors.js @@ -91,6 +91,8 @@ const derivationsFactory = ({ darken, lighten, contrast, fade, saturate, desatur "--sapUiObjectHeaderBorderColor": () => darken("--sapUiObjectHeaderBackground", 15), "--sapUiDragAndDropActiveBackground": () => fade("--sapUiLink", 5), "--sapUiContentShadowColorFade5": () => fade("--sapUiContentShadowColor", 5), + "--sapUiButtonBackgroundDarken24": () => darken("--sapUiButtonBackground", 24), + "--sapUiButtonHoverBorderColorLighten30": () => lighten("--sapUiButtonHoverBorderColor", 30), "--sapUiShadowHeader": () => concat({ static: "0 1px 0.5rem 0", var: "--sapUiContentShadowColorFade5" diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css index b8bd4f6bb03c..571ee3a45def 100644 --- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css @@ -23,3 +23,4 @@ @import "./YearPicker-parameters.css"; @import "./CalendarHeader-parameters.css"; @import "./Table-parameters.css"; +@import "./Token-parameters.css"; diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Token.html b/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html similarity index 97% rename from packages/main/test/sap/ui/webcomponents/main/pages/Token.html rename to packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html index 2eb99b2ea87c..07c49a226769 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/Token.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html @@ -22,7 +22,7 @@ - +
@@ -30,7 +30,7 @@ -
+ - + Cosy Compact Condensed From e3a4f6a00dac05f674f7a5179dd1672bc64bc945 Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Tue, 14 May 2019 15:18:16 +0300 Subject: [PATCH 04/14] add tests --- packages/main/src/Input.js | 2 +- packages/main/src/MultiComboBox.hbs | 3 +- packages/main/src/MultiComboBox.js | 43 +-- packages/main/src/Token.js | 36 ++- packages/main/src/themes/ListItem.css | 4 + packages/main/src/themes/Token.css | 14 +- .../main/pages/MultiComboBox.html | 264 ++++++++++++------ .../main/test/specs/MultiComboBox.spec.js | 97 +++++++ 8 files changed, 345 insertions(+), 118 deletions(-) create mode 100644 packages/main/test/specs/MultiComboBox.spec.js diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js index 9629ba3f4d6a..15c1fd18f617 100644 --- a/packages/main/src/Input.js +++ b/packages/main/src/Input.js @@ -65,7 +65,7 @@ const metadata = { _beginContent: { type: HTMLElement, - } + }, }, properties: /** @lends sap.ui.webcomponents.main.Input.prototype */ { diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs index 3269d2fe2ec6..9182e4a056b1 100644 --- a/packages/main/src/MultiComboBox.hbs +++ b/packages/main/src/MultiComboBox.hbs @@ -27,7 +27,6 @@ {{#unless ctr.readonly}} @@ -61,7 +60,7 @@ @selectionChange={{ctr._allItemsSelectionChange}} @afterClose={{ctr._afterAllPopoverClose}} @afterOpen={{ctr._afterAllPopoverOpen}}> - + {{#each ctr._filteredItems}} {{this._nodeText}} {{/each}} diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js index 4630b02d47cd..a46a715a9012 100644 --- a/packages/main/src/MultiComboBox.js +++ b/packages/main/src/MultiComboBox.js @@ -1,7 +1,8 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js"; -import { isShow } from "@ui5/webcomponents-base/src/events/PseudoEvents"; +import Function from "@ui5/webcomponents-base/src/types/Function.js"; +import { isShow, isDown } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; import MultiComboBoxRenderer from "./build/compiled/MultiComboBoxRenderer.lit.js"; @@ -10,14 +11,12 @@ import styles from "./themes/MultiComboBox.css.js"; // all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally) import "./ThemePropertiesProvider.js"; -import Function from "@ui5/webcomponents-base/src/types/Function"; /** * @public */ const metadata = { tag: "ui5-multi-combobox", - defaultSlot: "description", defaultSlot: "items", slots: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ { items: { @@ -55,7 +54,7 @@ const metadata = { /** * Defines if the user input will be prevented if no matching item has been found - * + * * @type {boolean} * @public */ @@ -87,15 +86,15 @@ const metadata = { defaultValue: ValueState.None, }, - /** - * Defines whether the ui5-multi-combobox is readonly. - *

- * Note: A read-only ui5-multi-combobox is not editable, - * but still provides visual feedback upon user interaction. - * - * @type {boolean} - * @public - */ + /** + * Defines whether the ui5-multi-combobox is readonly. + *

+ * Note: A read-only ui5-multi-combobox is not editable, + * but still provides visual feedback upon user interaction. + * + * @type {boolean} + * @public + */ readonly: { type: Boolean, }, @@ -115,8 +114,7 @@ const metadata = { }, events: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ { /** - * Fired when the value of the ui5-multi-combobox changes at each keystroke, - * and when a suggestion item has been selected. + * Fired when the value of the ui5-multi-combobox changes at each keystroke. * * @event * @public @@ -219,13 +217,14 @@ class MultiComboBox extends UI5Element { const input = event.target; const value = input.value; const filteredItems = this._filterItems(value); + const oldValueState = input.valueState; if (!filteredItems.length && value && this.validateInput) { input.value = this._inputLastValue; input.valueState = "Error"; setTimeout(() => { - input.valueState = "None"; + input.valueState = oldValueState; }, 2000); return; } @@ -279,9 +278,15 @@ class MultiComboBox extends UI5Element { _handleKeyDown(event) { - if (isShow(event)) { + if (isShow(event) && !this.readonly && !this.disabled) { this._togglePopover(); } + + if (isDown(event) && this._getPopover()._isOpen && this.items.length) { + const list = this.shadowRoot.querySelector(".ui5-multi-combobox-all-items-list"); + list._itemNavigation.current = 0; + list.items[0].focus(); + } } _filterItems(value) { @@ -334,9 +339,9 @@ class MultiComboBox extends UI5Element { if (!hasSelectedItem) { const morePopover = this.shadowRoot.querySelector(`.ui5-multi-combobox-selected-items--popover`); - morePopover.close(); + morePopover && morePopover.close(); } - + const input = this.shadowRoot.querySelector("ui5-input"); if (input && !input.value) { diff --git a/packages/main/src/Token.js b/packages/main/src/Token.js index ddaa575916a4..6d91c2519928 100644 --- a/packages/main/src/Token.js +++ b/packages/main/src/Token.js @@ -21,18 +21,52 @@ const metadata = { usesNodeText: true, slots: /** @lends sap.ui.webcomponents.main.Token.prototype */ {}, properties: /** @lends sap.ui.webcomponents.main.Token.prototype */ { + + /** + * Defines whether the ui5-token is selected or not. + * + * @type {boolean} + * @public + */ selected: { type: Boolean }, + + /** + * Defines whether the ui5-token is read-only. + *

+ * Note: A read-only ui5-token can not be deleted or selected, + * but still provides visual feedback upon user interaction. + * + * @type {boolean} + * @public + */ readonly: { type: Boolean }, + _handlers: { type: Object }, _tabIndex: { type: String, defaultValue: "-1" }, }, events: /** @lends sap.ui.webcomponents.main.Token.prototype */ { + + /** + * Fired when the backspace, delete or close icon of the token is pressed + * + * @event + * @param {boolean} backSpace indicates whether token is deleted by backspace key + * @param {boolean} delete indicates whether token is deleted by delete key + * @public + */ delete: { detail: { backSpace: { type: Boolean }, delete: { type: Boolean }, } }, + + /** + * Fired when the a token is selected by user interaction with mouse, clicking space or enter + * + * @event + * @public + */ select: {} }, }; @@ -50,7 +84,7 @@ const metadata = { * @extends UI5Element * @tagname ui5-timeline * @usestextcontent - * @public + * @private */ class Token extends UI5Element { static get metadata() { diff --git a/packages/main/src/themes/ListItem.css b/packages/main/src/themes/ListItem.css index 102616bf1bb5..8e1039347ba0 100644 --- a/packages/main/src/themes/ListItem.css +++ b/packages/main/src/themes/ListItem.css @@ -77,4 +77,8 @@ margin-top: 0.55rem; height: 1.75rem; width: 1.75rem; +} + +.sapUiSizeCompact ui5-checkbox.multiSelectionCheckBox { + margin-right: 0.5rem; } \ No newline at end of file diff --git a/packages/main/src/themes/Token.css b/packages/main/src/themes/Token.css index b7ecf2bc0688..cf9c61b8d2b6 100644 --- a/packages/main/src/themes/Token.css +++ b/packages/main/src/themes/Token.css @@ -6,11 +6,8 @@ border-color: var(--_ui5_token_border_color); border-radius: var(--_ui5_token_border_radius); color: var(--_ui5_token_text_color); - font-size: var(--sapMFontMediumSize); - font-family: var(--sapUiFontFamily); height: 1.625rem; box-sizing: border-box; - user-select: none; } :host(ui5-token[data-ui5-compact-size]) { @@ -48,6 +45,10 @@ padding-right: 0.375rem; } +:host(ui5-token[selected]) .ui5-token--wrapper:focus { + outline: 1px dotted var(--sapUiContentContrastFocusColor); +} + .ui5-token--icon { padding: 0.25rem 0.5rem; color: inherit; @@ -67,6 +68,9 @@ padding-top: 0.25rem; padding-bottom: 0.25rem; box-sizing: border-box; + font-size: var(--sapMFontMediumSize); + font-family: var(--sapUiFontFamily); + user-select: none; } .ui5-token--wrapper:focus { @@ -74,10 +78,6 @@ outline: 1px dotted var(--sapUiContentFocusColor); } -:host(ui5-token[selected]) .ui5-token--wrapper:focus { - outline: 1px dotted var(--sapUiContentContrastFocusColor); -} - .ui5-token--text { white-space: nowrap; } diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html b/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html index 07c49a226769..58484bfe12c6 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html @@ -1,18 +1,19 @@ + - Button + MultiComboBox test page + delete Document.prototype.adoptedStyleSheets + @@ -23,10 +24,17 @@ - -
-
+ + @@ -39,8 +47,7 @@ webcomponents -
-
+ value World! @@ -48,8 +55,7 @@ Hristovthelong -
-
+ value B @@ -61,86 +67,168 @@ B -
-
--> - - - Cosy - Compact - Condensed - Longest word in the world - - -
-
- - - Cosy - Compact - Condensed - Longest word in the world - - -
-
- - - Cosy - Compact - Condensed - Longest word in the world - - -
-
- - - Cosy - Compact - Condensed - Longest word in the world - - -
-
- - - Cosy - Compact - Condensed - Longest word in the world - - -
-
- - - Cosy - Compact - Condensed - Longest word in the world - - -
-
+value --> + +
+ Predefined value + + + Cosy + Compact + Condensed + Longest word in the world + +
+
+ Validating input and predefined value + + + Cosy + Compact + Condensed + Longest word in the world + +
+
+ Validating input and placeholder + + + Cosy + Compact + Condensed + Longest word in the world + +
+
+ disabled and placeholder + + + Cosy + Compact + Condensed + Longest word in the world + +
+
+ value state success + + + Cosy + Compact + Condensed + Longest word in the world + +
+
+ value state warning + + + Cosy + Compact + Condensed + Longest word in the world + +
+
+ value state error + + + Cosy + Compact + Condensed + Longest word in the world + +
+
+ readonly + + + Cosy + Compact + Condensed + Longest word in the world + +
+ +
+ MultiComboBox with items + + + Cosy + Compact + Condensed + Longest word in the world + +
+ +
+ MultiComboBox n more
+ + + Cosy + Compact + Condensed + Longest word in the world + +
+ +
+ MultiComboBox with validate-input + + + Cosy + Compact + Condensed + Longest word in the world + +
+ + +
+ +
+ Fired event: + + +
+
+ + Parameters Count: + + +
+
+ + Event call count: + + +
+
+ + +
- - Cosy - Compact - Condensed - Longest word in the world - -
-
- - - Cosy - Compact - Condensed - Longest word in the world - + + \ No newline at end of file diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js new file mode 100644 index 000000000000..2e3b71016110 --- /dev/null +++ b/packages/main/test/specs/MultiComboBox.spec.js @@ -0,0 +1,97 @@ +const assert = require("assert"); + +describe("MultiComboBox general interaction", () => { + browser.url("http://localhost:8080/test-resources/sap/ui/webcomponents/main/pages/MultiComboBox.html"); + + describe("selection and filtering", () => { + + it("Opens all items popover, selects and deselects the first item", () => { + const icon = browser.findElementDeep("#mcb >>> #ui5-multi-combobox--input ui5-icon"); + const popover = browser.findElementDeep("#mcb >>> .ui5-multi-combobox-all-items--popover"); + const firstItem = browser.findElementDeep("#first-item"); + const firstItemCheckbox = browser.findElementDeep("#mcb >>> .ui5-multi-combobox-all-items--popover ui5-li[slot=items-1] >>> ui5-checkbox"); + const eventInput = $("#events-input"); + const paramsInput = $("#events-parameters"); + const callCountInput = $("#events-call-count"); + const resetBtn = $("#reset-btn"); + + icon.click(); + + assert.ok(popover.isDisplayedInViewport(), "Popover should be displayed in the viewport"); + assert.equal(firstItem.getAttribute("selected"), null, "First item should not be selected"); + + firstItemCheckbox.click(); + + assert.ok(firstItem.getAttribute("selected"), "First item should be selected"); + assert.strictEqual(eventInput.getValue(), "selectionChange", "selectionChange should be called"); + assert.strictEqual(paramsInput.getValue(), "1", "one parameter should be passed in event's details"); + assert.strictEqual(callCountInput.getValue(), "1", "Event should be called once"); + + firstItemCheckbox.click(); + + assert.equal(firstItem.getAttribute("selected"), null, "First item should not be selected"); + assert.strictEqual(eventInput.getValue(), "selectionChange", "selectionChange should be called"); + assert.strictEqual(paramsInput.getValue(), "0", "no parameter should be passed if no items are selected"); + assert.strictEqual(callCountInput.getValue(), "2", "Event should be called once"); + + resetBtn.click(); + }); + + it("Opens all items popover when start typing and filters items", () => { + const input = browser.findElementDeep("#mcb >>> #ui5-multi-combobox--input >>> input"); + const popover = browser.findElementDeep("#mcb >>> .ui5-multi-combobox-all-items--popover"); + + input.click(); + input.keys("c"); + + const list = browser.findElementDeep("#mcb >>> .ui5-multi-combobox-all-items--popover ui5-list"); + + assert.ok(popover.isDisplayedInViewport(), "Popover should be displayed in the viewport"); + assert.strictEqual(list.getProperty("items").length, 3, "3 items should be shown"); + + input.keys("o"); + + assert.strictEqual(list.getProperty("items").length, 3, "3 items should be shown"); + + input.keys("m"); + + assert.strictEqual(list.getProperty("items").length, 1, "1 items should be shown"); + + input.keys("Backspace"); + + assert.strictEqual(list.getProperty("items").length, 3, "1 items should be shown"); + }); + + it("tests validate-input by typing a non existing option", () => { + const mcb = $("#mcb-validation"); + const input = browser.findElementDeep("#mcb-validation >>> #ui5-multi-combobox--input"); + const innerInput = browser.findElementDeep("#mcb-validation >>> #ui5-multi-combobox--input >>> input"); + + innerInput.click(); + innerInput.keys("c"); + + assert.strictEqual(innerInput.getValue(), "c", "Value is c (as typed)"); + + innerInput.keys("c"); + + assert.strictEqual(innerInput.getValue(), "c", "Value is still c (incorrect input is prevented)"); + assert.strictEqual(input.getAttribute("value-state"), "Error", "Value state is changed to error"); + + browser.waitUntil(() => { + return input.getAttribute("value-state") === "None"; + }, 2500, "expect value state to be different after 2.5 seconds"); + }); + + it("tests if n more is applied and corresponding popover", () => { + $("#more-mcb").scrollIntoView(); + + const token1 = browser.findElementDeep("#more-mcb >>> ui5-tokenizer ui5-token[slot='tokens-1']"); + const token2 = browser.findElementDeep("#more-mcb >>> ui5-tokenizer ui5-token[slot='tokens-2']"); + const token3 = browser.findElementDeep("#more-mcb >>> ui5-tokenizer ui5-token[slot='tokens-3']"); + + assert.ok(token1.isDisplayed(), "token 1 should be visible"); + assert.ok(token2.isDisplayed(), "token 2 should be visible"); + assert.ok(!token3.isDisplayed(), "token 3 should not be visible"); + }); + }); +}); From 2a266e82b77fa158d5a20479082bb760b2c081c5 Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Tue, 14 May 2019 15:40:58 +0300 Subject: [PATCH 05/14] fix eslint errors --- packages/base/src/events/PseudoEvents.js | 7 +-- packages/main/src/MultiComboBox.js | 58 +++++++++---------- packages/main/src/Token.js | 33 ++++++----- packages/main/src/Tokenizer.js | 13 ++--- packages/main/src/TokenizerTemplateContext.js | 2 +- 5 files changed, 58 insertions(+), 55 deletions(-) diff --git a/packages/base/src/events/PseudoEvents.js b/packages/base/src/events/PseudoEvents.js index cb0f1e32f1de..2d9a5fe99024 100644 --- a/packages/base/src/events/PseudoEvents.js +++ b/packages/base/src/events/PseudoEvents.js @@ -28,11 +28,10 @@ const isDelete = event => (event.key ? (event.key === "Delete" || event.key === const isShow = event => { if (event.key) { - return (event.key === "F4" && !hasModifierKeys(event)) || - ((event.key === "ArrowDown" || event.key === "Down") && checkModifierKeys(event, /*Ctrl*/ false, /*Alt*/ true, /*Shift*/ false)); + return (event.key === "F4" && !hasModifierKeys(event)) || ((event.key === "ArrowDown" || event.key === "Down") && checkModifierKeys(event, /*Ctrl*/ false, /*Alt*/ true, /*Shift*/ false)); } - return (event.keyCode == KeyCodes.F4 && !hasModifierKeys(event)) || - (event.keyCode == KeyCodes.ARROW_DOWN && checkModifierKeys(event, /*Ctrl*/ false, /*Alt*/ true, /*Shift*/ false)); + + return (event.keyCode == KeyCodes.F4 && !hasModifierKeys(event)) || (event.keyCode == KeyCodes.ARROW_DOWN && checkModifierKeys(event, /*Ctrl*/ false, /*Alt*/ true, /*Shift*/ false)); } diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js index a46a715a9012..4367578cf236 100644 --- a/packages/main/src/MultiComboBox.js +++ b/packages/main/src/MultiComboBox.js @@ -86,15 +86,15 @@ const metadata = { defaultValue: ValueState.None, }, - /** - * Defines whether the ui5-multi-combobox is readonly. - *

- * Note: A read-only ui5-multi-combobox is not editable, - * but still provides visual feedback upon user interaction. - * - * @type {boolean} - * @public - */ + /** + * Defines whether the ui5-multi-combobox is readonly. + *

+ * Note: A read-only ui5-multi-combobox is not editable, + * but still provides visual feedback upon user interaction. + * + * @type {boolean} + * @public + */ readonly: { type: Boolean, }, @@ -133,7 +133,7 @@ const metadata = { detail: { items: { type: Array }, }, - } + }, }, }; @@ -174,15 +174,15 @@ class MultiComboBox extends UI5Element { "max-width": "100%", "min-width": "0px", "height": "100%", - } + }, }, classes: { icon: { [`ui5-multi-combobox--icon`]: true, [`ui5-multi-combobox-icon-pressed`]: state._iconPressed, - } - } - } + }, + }, + }; }; } @@ -199,19 +199,19 @@ class MultiComboBox extends UI5Element { this._showMorePopover = event => { this._togglePopover(true); - } + }; this._showAllItemsPopover = event => { this._togglePopover(false); - } + }; this._allItemsSelectionChange = event => { this._listSelectionChange(event); - } + }; this._selectedItemsSelectionChange = event => { this._listSelectionChange(event); - } + }; this._inputChage = event => { const input = event.target; @@ -240,38 +240,38 @@ class MultiComboBox extends UI5Element { } this.fireEvent("input"); - } + }; this._tokenDelete = event => { const token = event.detail.ref; - const item = this.items.filter(item => item._id === token.getAttribute("data-ui5-id"))[0]; + const deletingItem = this.items.filter(item => item._id === token.getAttribute("data-ui5-id"))[0]; - item.selected = false; + deletingItem.selected = false; this._deleting = true; - } + }; this._tokenizerFocusOut = event => { - const tokenizer = this.shadowRoot.querySelector('ui5-tokenizer'); + const tokenizer = this.shadowRoot.querySelector("ui5-tokenizer"); const tokensCount = tokenizer.tokens.length - 1; - tokenizer.tokens.forEach(token => token.selected = false); + tokenizer.tokens.forEach(token => { token.selected = false; }); if (tokensCount === 0 && this._deleting) { setTimeout(() => { - this.shadowRoot.querySelector('ui5-input').focus(); + this.shadowRoot.querySelector("ui5-input").focus(); }, 0); } this._deleting = false; - } + }; this._afterAllPopoverClose = () => { this._toggleIcon(); - } + }; this._afterAllPopoverOpen = () => { this._toggleIcon(); - } + }; this._keydown = this._handleKeyDown.bind(this); } @@ -296,7 +296,7 @@ class MultiComboBox extends UI5Element { } _toggleIcon() { - this._iconPressed = !this._iconPressed + this._iconPressed = !this._iconPressed; } _getSelectedItems() { diff --git a/packages/main/src/Token.js b/packages/main/src/Token.js index 6d91c2519928..f7c0f6c7a2a6 100644 --- a/packages/main/src/Token.js +++ b/packages/main/src/Token.js @@ -1,6 +1,12 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; -import { getTheme } from "@ui5/webcomponents-base/src/Configuration"; +import { getTheme } from "@ui5/webcomponents-base/src/Configuration.js"; +import { + isBackSpace, + isEnter, + isSpace, + isDelete, +} from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; import TokenRenderer from "./build/compiled/TokenRenderer.lit.js"; @@ -10,8 +16,6 @@ import styles from "./themes/Token.css.js"; // all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally) import "./ThemePropertiesProvider.js"; -import { isBackSpace, isEnter, isSpace, isDelete } from "@ui5/webcomponents-base/src/events/PseudoEvents"; - /** * @public */ @@ -44,6 +48,7 @@ const metadata = { _handlers: { type: Object }, _tabIndex: { type: String, defaultValue: "-1" }, }, + events: /** @lends sap.ui.webcomponents.main.Token.prototype */ { /** @@ -54,11 +59,11 @@ const metadata = { * @param {boolean} delete indicates whether token is deleted by delete key * @public */ - delete: { + "delete": { detail: { - backSpace: { type: Boolean }, - delete: { type: Boolean }, - } + "backSpace": { type: Boolean }, + "delete": { type: Boolean }, + }, }, /** @@ -67,7 +72,7 @@ const metadata = { * @event * @public */ - select: {} + select: {}, }, }; @@ -100,7 +105,7 @@ class Token extends UI5Element { return { ctr: state, iconURI: getTheme() === "sap_fiori_3" ? "sap-icon://decline" : "sap-icon://sys-cancel", - } + }; }; } @@ -112,27 +117,27 @@ class Token extends UI5Element { super(); this._handlers = { - select: () => { + "select": () => { this.fireEvent("select", {}); }, - delete: () => { + "delete": () => { this.fireEvent("delete"); }, - keydown: event => { + "keydown": event => { const isBS = isBackSpace(event); const isD = isDelete(event); if (!this.readonly && (isBS || isD)) { this.fireEvent("delete", { backSpace: isBS, - delete: isD, + "delete": isD, }); } if (isEnter(event) || isSpace(event)) { this.fireEvent("select", {}); } - } + }, }; } diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js index 29779ccfdc6a..9ed94183a504 100644 --- a/packages/main/src/Tokenizer.js +++ b/packages/main/src/Tokenizer.js @@ -1,16 +1,16 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js"; import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js"; +import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler.js"; +import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation.js"; +import Function from "@ui5/webcomponents-base/src/types/Function.js"; import TokenizerRenderer from "./build/compiled/TokenizerRenderer.lit.js"; -import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler"; -import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation.js"; // Styles import styles from "./themes/Tokenizer.css.js"; // all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally) import "./ThemePropertiesProvider.js"; -import Function from "@ui5/webcomponents-base/src/types/Function"; import TokenizerTemplateContext from "./TokenizerTemplateContext.js"; /** @@ -18,7 +18,6 @@ import TokenizerTemplateContext from "./TokenizerTemplateContext.js"; */ const metadata = { tag: "ui5-tokenizer", - defaultSlot: "description", slots: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ { tokens: { type: HTMLElement, @@ -38,14 +37,14 @@ const metadata = { tokenDelete: { detail: { ref: { type: HTMLElement }, - } + }, }, showMoreItemsPress: { detail: { ref: { type: HTMLElement }, - } - } + }, + }, }, }; diff --git a/packages/main/src/TokenizerTemplateContext.js b/packages/main/src/TokenizerTemplateContext.js index 222ddfe40e32..0d37bc1300d8 100644 --- a/packages/main/src/TokenizerTemplateContext.js +++ b/packages/main/src/TokenizerTemplateContext.js @@ -8,7 +8,7 @@ class TokenizerTemplateContext { content: { "ui5-tokenizer--content": true, "ui5-tokenizer-nmore--content": state.showMore, - } + }, }, }; From d68a118e5aacff356ecf7c14de65439c04137f66 Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Tue, 14 May 2019 17:42:22 +0300 Subject: [PATCH 06/14] fix base eslint errors and allow short short circuit evaluations in eslint config --- packages/base/.eslintrc.js | 2 +- packages/base/src/events/PseudoEvents.js | 7 +++---- packages/main/.eslintrc.js | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/base/.eslintrc.js b/packages/base/.eslintrc.js index c2f576ac8486..b292c0f28bbc 100644 --- a/packages/base/.eslintrc.js +++ b/packages/base/.eslintrc.js @@ -72,7 +72,7 @@ module.exports = { "no-script-url": 2, "no-self-compare": 2, "no-sequences": 2, - "no-unused-expressions": 1, + "no-unused-expressions": [1, { allowShortCircuit: true }], "no-void": 2, "no-warning-comments": 0, "no-with": 2, diff --git a/packages/base/src/events/PseudoEvents.js b/packages/base/src/events/PseudoEvents.js index 2d9a5fe99024..170dbfb0a3b9 100644 --- a/packages/base/src/events/PseudoEvents.js +++ b/packages/base/src/events/PseudoEvents.js @@ -28,12 +28,11 @@ const isDelete = event => (event.key ? (event.key === "Delete" || event.key === const isShow = event => { if (event.key) { - return (event.key === "F4" && !hasModifierKeys(event)) || ((event.key === "ArrowDown" || event.key === "Down") && checkModifierKeys(event, /*Ctrl*/ false, /*Alt*/ true, /*Shift*/ false)); + return (event.key === "F4" && !hasModifierKeys(event)) || ((event.key === "ArrowDown" || event.key === "Down") && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false)); } - return (event.keyCode == KeyCodes.F4 && !hasModifierKeys(event)) || (event.keyCode == KeyCodes.ARROW_DOWN && checkModifierKeys(event, /*Ctrl*/ false, /*Alt*/ true, /*Shift*/ false)); - -} + return (event.keyCode === KeyCodes.F4 && !hasModifierKeys(event)) || (event.keyCode === KeyCodes.ARROW_DOWN && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false)); +}; const hasModifierKeys = event => event.shiftKey || event.altKey || getCtrlKey(event); diff --git a/packages/main/.eslintrc.js b/packages/main/.eslintrc.js index 2ba5e2fb677d..e0220d27b7db 100644 --- a/packages/main/.eslintrc.js +++ b/packages/main/.eslintrc.js @@ -72,7 +72,7 @@ module.exports = { "no-script-url": 2, "no-self-compare": 2, "no-sequences": 2, - "no-unused-expressions": 1, + "no-unused-expressions": [1, { allowShortCircuit: true }], "no-void": 2, "no-warning-comments": 1, "no-with": 2, From df9a3d510caece2fc655ca97b09fefc8ad24471b Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Wed, 15 May 2019 16:42:55 +0300 Subject: [PATCH 07/14] correct styles for IE and Edge --- packages/main/src/MultiComboBox.hbs | 15 ++--- packages/main/src/MultiComboBox.js | 5 +- packages/main/src/Token.js | 2 + packages/main/src/Tokenizer.hbs | 6 +- packages/main/src/Tokenizer.js | 2 +- packages/main/src/TokenizerTemplateContext.js | 4 ++ packages/main/src/themes/MultiComboBox.css | 8 +++ packages/main/src/themes/Token.css | 55 +++++++++++++++++++ packages/main/src/themes/Tokenizer.css | 28 +++++++++- .../main/pages/MultiComboBox.html | 32 +++++++---- 10 files changed, 131 insertions(+), 26 deletions(-) diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs index 9182e4a056b1..11dc3f4ae61f 100644 --- a/packages/main/src/MultiComboBox.hbs +++ b/packages/main/src/MultiComboBox.hbs @@ -11,10 +11,11 @@ {{#each ctr.items}} @@ -27,7 +28,7 @@ {{#unless ctr.readonly}} {{/unless}} @@ -41,7 +42,7 @@ placement-type="Bottom"> + @ui5-selectionChange={{ctr._selectedItemsSelectionChange}}> {{#each ctr.items}} {{#if this.selected}} {{this._nodeText}} @@ -57,9 +58,9 @@ initial-focus="ui5-multi-combobox--input" horizontal-align="Left" placement-type="Bottom" - @selectionChange={{ctr._allItemsSelectionChange}} - @afterClose={{ctr._afterAllPopoverClose}} - @afterOpen={{ctr._afterAllPopoverOpen}}> + @ui5-selectionChange={{ctr._allItemsSelectionChange}} + @ui5-afterClose={{ctr._afterAllPopoverClose}} + @ui5-afterOpen={{ctr._afterAllPopoverOpen}}> {{#each ctr._filteredItems}} {{this._nodeText}} diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js index 4367578cf236..44e46d9bfd17 100644 --- a/packages/main/src/MultiComboBox.js +++ b/packages/main/src/MultiComboBox.js @@ -171,7 +171,6 @@ class MultiComboBox extends UI5Element { tokenizer: { "border": "none", "width": "auto", - "max-width": "100%", "min-width": "0px", "height": "100%", }, @@ -248,6 +247,8 @@ class MultiComboBox extends UI5Element { deletingItem.selected = false; this._deleting = true; + + this.fireEvent("selectionChange", { items: this._getSelectedItems() }); }; this._tokenizerFocusOut = event => { @@ -291,7 +292,7 @@ class MultiComboBox extends UI5Element { _filterItems(value) { return this.items.filter(item => { - return item._nodeText.toLowerCase().startsWith(value.toLowerCase()); + return item.textContent && item.textContent.toLowerCase().startsWith(value.toLowerCase()); }); } diff --git a/packages/main/src/Token.js b/packages/main/src/Token.js index f7c0f6c7a2a6..6ad987cbd314 100644 --- a/packages/main/src/Token.js +++ b/packages/main/src/Token.js @@ -128,6 +128,8 @@ class Token extends UI5Element { const isD = isDelete(event); if (!this.readonly && (isBS || isD)) { + event.preventDefault(); + this.fireEvent("delete", { backSpace: isBS, "delete": isD, diff --git a/packages/main/src/Tokenizer.hbs b/packages/main/src/Tokenizer.hbs index f6f6f0d467d7..20090751b72b 100644 --- a/packages/main/src/Tokenizer.hbs +++ b/packages/main/src/Tokenizer.hbs @@ -1,6 +1,6 @@ -
-
-
+
+
+
{{#each ctr.tokens}} diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js index 9ed94183a504..f0d0f9113676 100644 --- a/packages/main/src/Tokenizer.js +++ b/packages/main/src/Tokenizer.js @@ -143,7 +143,7 @@ class Tokenizer extends UI5Element { } _getTokens(overflow) { - const firstToken = this.shadowRoot.querySelector("#ui5-tokenizer-token-placeholder"); + const firstToken = this.shadowRoot.querySelector(".ui5-tokenizer-token-placeholder"); if (!firstToken) { return []; diff --git a/packages/main/src/TokenizerTemplateContext.js b/packages/main/src/TokenizerTemplateContext.js index 0d37bc1300d8..455ae2bb5375 100644 --- a/packages/main/src/TokenizerTemplateContext.js +++ b/packages/main/src/TokenizerTemplateContext.js @@ -5,6 +5,10 @@ class TokenizerTemplateContext { showNMore: state.showMore && state._hiddenTokens.length, hiddenTokensCount: state._hiddenTokens.length, classes: { + wrapper: { + "ui5-tokenizer-nmore--wrapper": state.showMore, + "ui5-tokenizer--wrapper": true, + }, content: { "ui5-tokenizer--content": true, "ui5-tokenizer-nmore--content": state.showMore, diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css index 9cf1ce0c591c..8617d50a4a7b 100644 --- a/packages/main/src/themes/MultiComboBox.css +++ b/packages/main/src/themes/MultiComboBox.css @@ -5,6 +5,10 @@ --_ui5_popover_content_padding: 0; } +ui5-multi-combobox { + display: inline-block; + width: 100%; +} .ui5-multi-combobox--wrapper { display: flex; @@ -48,3 +52,7 @@ span.sapUiSizeCompact .ui5-multi-combobox--token { height: 100%; } + +.ui5-multi-combobox-tokenizer { + max-width: calc(100% - 3rem - var(--sap_wc_input_icon_min_width)); +} \ No newline at end of file diff --git a/packages/main/src/themes/Token.css b/packages/main/src/themes/Token.css index cf9c61b8d2b6..f822b34ede1c 100644 --- a/packages/main/src/themes/Token.css +++ b/packages/main/src/themes/Token.css @@ -49,6 +49,61 @@ outline: 1px dotted var(--sapUiContentContrastFocusColor); } +/* IE selectors */ + +ui5-token { + display: inline-block; + background: var(--sapUiButtonBackground); + border-width: 1px; + border-style: solid; + border-color: var(--_ui5_token_border_color); + border-radius: var(--_ui5_token_border_radius); + color: var(--_ui5_token_text_color); + height: 1rem; + box-sizing: border-box; +} + +ui5-token[data-ui5-compact-size] { + font-size: 0.75rem; + height: 1.25rem; +} + +ui5-token[data-ui5-compact-size] .ui5-token--icon { + padding: 0 0.25rem; + width: 0.75rem; + height: 0.75rem; +} + +ui5-token:not([readonly]):hover { + background: var(--sapUiButtonHoverBackground); + border-color: var(--_ui5_token_hover_border_color); +} + +ui5-token[selected]:not([readonly]) { + color: var(--sapUiToggleButtonPressedTextColor); + background: var(--sapUiToggleButtonPressedBackground); + border: 1px solid var(--sapUiToggleButtonPressedBorderColor); +} + +ui5-token[selected]:not([readonly]):hover { + background: var(--sapUiToggleButtonPressedHoverBackground); + border: 1px solid var(--sapUiToggleButtonPressedHoverBorderColor); +} + +ui5-token[readonly] { + color: var(--sapUiContentForegroundTextColor); +} + +ui5-token[readonly] .ui5-token--wrapper { + padding-right: 0.375rem; +} + +ui5-token[selected] .ui5-token--wrapper:focus { + outline: 1px dotted var(--sapUiContentContrastFocusColor); +} + +/* end of IE selectors */ + .ui5-token--icon { padding: 0.25rem 0.5rem; color: inherit; diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css index a0222324bccd..9da0eeaf08fb 100644 --- a/packages/main/src/themes/Tokenizer.css +++ b/packages/main/src/themes/Tokenizer.css @@ -5,7 +5,14 @@ height: 2.25rem; } -:host(ui5-tokenizer[data-ui5-compact-size]) .ui5-tokenizer--wrapper { +ui5-tokenizer { + display: inline-block; + box-sizing: border-box; + border: 1px solid black; + height: 2.25rem; +} + +span.sapUiSizeCompact .ui5-tokenizer--wrapper { padding: 0.1875rem 0.125rem; } @@ -17,7 +24,10 @@ overflow-x: scroll; box-sizing: border-box; font-family: var(--sapUiFontFamily); - overflow-y: hidden; +} + +.ui5-tokenizer--wrapper.ui5-tokenizer-nmore--wrapper { + overflow-x: hidden; } .ui5-tokenizer--token--wrapper { @@ -43,3 +53,17 @@ font-size: var(--sapMFontMediumSize); } +.ui5-tokenizer-token-placeholder { + display: inline-block; + height: 1px; + width: 1px; + margin-top: auto; +} + +/* Edge / IE specific coding */ + +span[data-sap-ui-wc-root] { + display: flex; + height: 100%; + width: 100%; +} diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html b/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html index 58484bfe12c6..41cbfc51b0b9 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html @@ -72,7 +72,8 @@
Predefined value - +
+ Cosy Compact Condensed @@ -82,7 +83,8 @@
Validating input and predefined value - +
+ Cosy Compact Condensed @@ -92,7 +94,8 @@
Validating input and placeholder - +
+ Cosy Compact Condensed @@ -102,7 +105,8 @@
disabled and placeholder - +
+ Cosy Compact Condensed @@ -112,7 +116,8 @@
value state success - +
+ Cosy Compact Condensed @@ -122,7 +127,8 @@
value state warning - +
+ Cosy Compact Condensed @@ -132,7 +138,8 @@
value state error - +
+ Cosy Compact Condensed @@ -142,7 +149,8 @@
readonly - +
+ Cosy Compact Condensed @@ -153,7 +161,8 @@
MultiComboBox with items - +
+ Cosy Compact Condensed @@ -175,7 +184,8 @@
MultiComboBox with validate-input - +
+ Cosy Compact Condensed @@ -216,7 +226,7 @@ const callCountInput = document.getElementById("events-call-count"); const resetBtn = document.getElementById("reset-btn"); - document.getElementById("mcb").addEventListener("selectionChange", event => { + document.getElementById("mcb").addEventListener("ui5-selectionChange", event => { eventNameInput.value = "selectionChange"; eventParamsInput.value = event.detail.items.length; callCountInput.value = parseInt(callCountInput.value) + 1; From df5003957287cbd561cf16f25c2820aa95dc4cb0 Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Wed, 15 May 2019 17:13:53 +0300 Subject: [PATCH 08/14] some minor fixes --- packages/main/src/MultiComboBox.hbs | 2 +- packages/main/src/MultiComboBox.js | 2 ++ packages/main/test/specs/MultiComboBox.spec.js | 12 +++++------- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs index 11dc3f4ae61f..aa4612b0e330 100644 --- a/packages/main/src/MultiComboBox.hbs +++ b/packages/main/src/MultiComboBox.hbs @@ -6,7 +6,7 @@ ?readonly={{ctr.readonly}} value-state="{{ctr.valueState}}" show-suggestions - @input="{{ctr._inputChage}}" + @ui5-input="{{ctr._inputChage}}" @keydown="{{ctr._keydown}}"> { input.click(); input.keys("c"); - const list = browser.findElementDeep("#mcb >>> .ui5-multi-combobox-all-items--popover ui5-list"); + const list = browser.findElementDeep("#mcb >>> .ui5-multi-combobox-all-items-list"); assert.ok(popover.isDisplayedInViewport(), "Popover should be displayed in the viewport"); + + assert.strictEqual(list.getProperty("items").length, 3, "3 items should be shown"); input.keys("o"); @@ -85,13 +87,9 @@ describe("MultiComboBox general interaction", () => { it("tests if n more is applied and corresponding popover", () => { $("#more-mcb").scrollIntoView(); - const token1 = browser.findElementDeep("#more-mcb >>> ui5-tokenizer ui5-token[slot='tokens-1']"); - const token2 = browser.findElementDeep("#more-mcb >>> ui5-tokenizer ui5-token[slot='tokens-2']"); - const token3 = browser.findElementDeep("#more-mcb >>> ui5-tokenizer ui5-token[slot='tokens-3']"); + const nMoreText = browser.findElementDeep("#more-mcb >>> ui5-tokenizer >>> .ui5-tokenizer-more-text"); - assert.ok(token1.isDisplayed(), "token 1 should be visible"); - assert.ok(token2.isDisplayed(), "token 2 should be visible"); - assert.ok(!token3.isDisplayed(), "token 3 should not be visible"); + assert.ok(nMoreText.getText(), "1 More", "token 1 should be visible"); }); }); }); From 0d7c645fa11564c0e2664b716cda3dda024518a3 Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Thu, 16 May 2019 15:12:33 +0300 Subject: [PATCH 09/14] - add translations - code cleanup --- .../main/lib/i18n-transform/USED_KEYS.txt | 3 +- packages/main/src/MultiComboBox.hbs | 6 +- packages/main/src/MultiComboBox.js | 127 ++++++++++-------- packages/main/src/Token.hbs | 4 +- packages/main/src/Token.js | 65 +++++---- packages/main/src/Tokenizer.hbs | 2 +- packages/main/src/Tokenizer.js | 7 +- packages/main/src/TokenizerTemplateContext.js | 1 - packages/main/src/i18n/messagebundle.json | 2 +- packages/main/src/i18n/messagebundle_ar.json | 2 +- packages/main/src/i18n/messagebundle_bg.json | 2 +- packages/main/src/i18n/messagebundle_ca.json | 2 +- packages/main/src/i18n/messagebundle_cs.json | 2 +- packages/main/src/i18n/messagebundle_da.json | 2 +- packages/main/src/i18n/messagebundle_de.json | 2 +- packages/main/src/i18n/messagebundle_el.json | 2 +- packages/main/src/i18n/messagebundle_en.json | 2 +- .../src/i18n/messagebundle_en_US_sappsd.json | 2 +- .../src/i18n/messagebundle_en_US_saptrc.json | 2 +- packages/main/src/i18n/messagebundle_es.json | 2 +- packages/main/src/i18n/messagebundle_et.json | 2 +- packages/main/src/i18n/messagebundle_fi.json | 2 +- packages/main/src/i18n/messagebundle_fr.json | 2 +- packages/main/src/i18n/messagebundle_hi.json | 2 +- packages/main/src/i18n/messagebundle_hr.json | 2 +- packages/main/src/i18n/messagebundle_hu.json | 2 +- packages/main/src/i18n/messagebundle_it.json | 2 +- packages/main/src/i18n/messagebundle_iw.json | 2 +- packages/main/src/i18n/messagebundle_ja.json | 2 +- packages/main/src/i18n/messagebundle_kk.json | 2 +- packages/main/src/i18n/messagebundle_ko.json | 2 +- packages/main/src/i18n/messagebundle_lt.json | 2 +- packages/main/src/i18n/messagebundle_lv.json | 2 +- packages/main/src/i18n/messagebundle_ms.json | 2 +- packages/main/src/i18n/messagebundle_nl.json | 2 +- packages/main/src/i18n/messagebundle_no.json | 2 +- packages/main/src/i18n/messagebundle_pl.json | 2 +- packages/main/src/i18n/messagebundle_pt.json | 2 +- packages/main/src/i18n/messagebundle_ro.json | 2 +- packages/main/src/i18n/messagebundle_ru.json | 2 +- packages/main/src/i18n/messagebundle_sh.json | 2 +- packages/main/src/i18n/messagebundle_sk.json | 2 +- packages/main/src/i18n/messagebundle_sl.json | 2 +- packages/main/src/i18n/messagebundle_sv.json | 2 +- packages/main/src/i18n/messagebundle_th.json | 2 +- packages/main/src/i18n/messagebundle_tr.json | 2 +- packages/main/src/i18n/messagebundle_uk.json | 2 +- packages/main/src/i18n/messagebundle_vi.json | 2 +- .../main/src/i18n/messagebundle_zh_CN.json | 2 +- .../main/src/i18n/messagebundle_zh_TW.json | 2 +- packages/main/src/themes/MultiComboBox.css | 4 + 51 files changed, 163 insertions(+), 140 deletions(-) diff --git a/packages/main/lib/i18n-transform/USED_KEYS.txt b/packages/main/lib/i18n-transform/USED_KEYS.txt index 81bd4268cdfe..ee306134e310 100644 --- a/packages/main/lib/i18n-transform/USED_KEYS.txt +++ b/packages/main/lib/i18n-transform/USED_KEYS.txt @@ -1,3 +1,4 @@ TEXTAREA_CHARACTERS_LEFT TEXTAREA_CHARACTERS_EXCEEDED -PANEL_ICON \ No newline at end of file +PANEL_ICON +MULTIINPUT_SHOW_MORE_TOKENS \ No newline at end of file diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs index aa4612b0e330..142edbf2b9b0 100644 --- a/packages/main/src/MultiComboBox.hbs +++ b/packages/main/src/MultiComboBox.hbs @@ -13,7 +13,6 @@ show-more class="ui5-multi-combobox-tokenizer" ?disabled="{{ctr.disabled}}" - style="{{styles.tokenizer}}" @ui5-showMoreItemsPress="{{ctr._showMorePopover}}" @ui5-tokenDelete="{{ctr._tokenDelete}}" @focusout="{{ctr._tokenizerFocusOut}}" @@ -29,7 +28,7 @@ {{/unless}} @@ -41,7 +40,6 @@ ?hide-arrow={{editable}} placement-type="Bottom"> {{#each ctr.items}} {{#if this.selected}} @@ -61,7 +59,7 @@ @ui5-selectionChange={{ctr._allItemsSelectionChange}} @ui5-afterClose={{ctr._afterAllPopoverClose}} @ui5-afterOpen={{ctr._afterAllPopoverOpen}}> - + {{#each ctr._filteredItems}} {{this._nodeText}} {{/each}} diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js index 04593b7edaad..2d20bf747e9f 100644 --- a/packages/main/src/MultiComboBox.js +++ b/packages/main/src/MultiComboBox.js @@ -5,6 +5,13 @@ import Function from "@ui5/webcomponents-base/src/types/Function.js"; import { isShow, isDown } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; import MultiComboBoxRenderer from "./build/compiled/MultiComboBoxRenderer.lit.js"; +import Input from "./Input.js"; +import Tokenizer from "./Tokenizer.js"; +import Token from "./Token.js"; +import Icon from "./Icon.js"; +import Popover from "./Popover.js"; +import List from "./List.js"; +import StandardListItem from "./StandardListItem.js"; // Styles import styles from "./themes/MultiComboBox.css.js"; @@ -167,17 +174,8 @@ class MultiComboBox extends UI5Element { ctr: state, editable: !state.readonly, selectedItemsListMode: state.readonly ? "None" : "MultiSelect", - styles: { - tokenizer: { - "border": "none", - "width": "auto", - "min-width": "0px", - "height": "100%", - }, - }, classes: { icon: { - [`ui5-multi-combobox--icon`]: true, [`ui5-multi-combobox-icon-pressed`]: state._iconPressed, }, }, @@ -212,72 +210,75 @@ class MultiComboBox extends UI5Element { this._listSelectionChange(event); }; - this._inputChage = event => { - const input = event.target; - const value = input.value; - const filteredItems = this._filterItems(value); - const oldValueState = input.valueState; + this._inputChage = this._handleInputLiveChange.bind(this); + this._tokenDelete = this._handleTokenDelete.bind(this); + this._tokenizerFocusOut = this._handleTokenizerFocusOut.bind(this); - if (!filteredItems.length && value && this.validateInput) { - input.value = this._inputLastValue; - input.valueState = "Error"; + this._afterAllPopoverClose = () => { + this._toggleIcon(); + }; - setTimeout(() => { - input.valueState = oldValueState; - }, 2000); - return; - } + this._afterAllPopoverOpen = () => { + this._toggleIcon(); + }; + this._keydown = this._handleKeyDown.bind(this); + } - this._inputLastValue = input.value; - this.value = input.value; - this._filteredItems = filteredItems; + _handleInputLiveChange(event) { + const input = event.target; + const value = input.value; + const filteredItems = this._filterItems(value); + const oldValueState = input.valueState; - if (filteredItems.length === 0) { - this._getPopover().close(); - } else { - this._getPopover().openBy(this); - } + if (!filteredItems.length && value && this.validateInput) { + input.value = this._inputLastValue; + input.valueState = "Error"; - this.fireEvent("input"); - }; + setTimeout(() => { + input.valueState = oldValueState; + }, 2000); + return; + } - this._tokenDelete = event => { - const token = event.detail.ref; - const deletingItem = this.items.filter(item => item._id === token.getAttribute("data-ui5-id"))[0]; - deletingItem.selected = false; - this._deleting = true; + this._inputLastValue = input.value; + this.value = input.value; + this._filteredItems = filteredItems; - this.fireEvent("selectionChange", { items: this._getSelectedItems() }); - }; + if (filteredItems.length === 0) { + this._getPopover().close(); + } else { + this._getPopover().openBy(this); + } - this._tokenizerFocusOut = event => { - const tokenizer = this.shadowRoot.querySelector("ui5-tokenizer"); - const tokensCount = tokenizer.tokens.length - 1; + this.fireEvent("input"); + } - tokenizer.tokens.forEach(token => { token.selected = false; }); + _handleTokenDelete(event) { + const token = event.detail.ref; + const deletingItem = this.items.filter(item => item._id === token.getAttribute("data-ui5-id"))[0]; - if (tokensCount === 0 && this._deleting) { - setTimeout(() => { - this.shadowRoot.querySelector("ui5-input").focus(); - }, 0); - } + deletingItem.selected = false; + this._deleting = true; - this._deleting = false; - }; + this.fireEvent("selectionChange", { items: this._getSelectedItems() }); + } - this._afterAllPopoverClose = () => { - this._toggleIcon(); - }; + _handleTokenizerFocusOut() { + const tokenizer = this.shadowRoot.querySelector("ui5-tokenizer"); + const tokensCount = tokenizer.tokens.length - 1; - this._afterAllPopoverOpen = () => { - this._toggleIcon(); - }; + tokenizer.tokens.forEach(token => { token.selected = false; }); - this._keydown = this._handleKeyDown.bind(this); - } + if (tokensCount === 0 && this._deleting) { + setTimeout(() => { + this.shadowRoot.querySelector("ui5-input").focus(); + }, 0); + } + this._deleting = false; + } _handleKeyDown(event) { if (isShow(event) && !this.readonly && !this.disabled) { @@ -356,7 +357,15 @@ class MultiComboBox extends UI5Element { } static async define(...params) { - await Promise.all([]); + await Promise.all([ + Input.define(), + Tokenizer.define(), + Token.define(), + Icon.define(), + Popover.define(), + List.define(), + StandardListItem.define(), + ]); super.define(...params); } diff --git a/packages/main/src/Token.hbs b/packages/main/src/Token.hbs index 48f26feeea4f..4c70d82b7f1e 100644 --- a/packages/main/src/Token.hbs +++ b/packages/main/src/Token.hbs @@ -1,7 +1,7 @@ -
+
{{ctr._nodeText}} {{#unless ctr.readonly}} - + {{/unless}}
\ No newline at end of file diff --git a/packages/main/src/Token.js b/packages/main/src/Token.js index 6ad987cbd314..697431fcbe4f 100644 --- a/packages/main/src/Token.js +++ b/packages/main/src/Token.js @@ -7,7 +7,9 @@ import { isSpace, isDelete, } from "@ui5/webcomponents-base/src/events/PseudoEvents.js"; +import Function from "@ui5/webcomponents-base/src/types/Function.js"; +import Icon from "./Icon.js"; import TokenRenderer from "./build/compiled/TokenRenderer.lit.js"; // Styles @@ -45,7 +47,9 @@ const metadata = { */ readonly: { type: Boolean }, - _handlers: { type: Object }, + _delete: { type: Function }, + _select: { type: Function }, + _keydown: { type: Function }, _tabIndex: { type: String, defaultValue: "-1" }, }, @@ -115,36 +119,41 @@ class Token extends UI5Element { constructor() { super(); - - this._handlers = { - "select": () => { - this.fireEvent("select", {}); - }, - "delete": () => { - this.fireEvent("delete"); - }, - "keydown": event => { - const isBS = isBackSpace(event); - const isD = isDelete(event); - - if (!this.readonly && (isBS || isD)) { - event.preventDefault(); - - this.fireEvent("delete", { - backSpace: isBS, - "delete": isD, - }); - } - - if (isEnter(event) || isSpace(event)) { - this.fireEvent("select", {}); - } - }, - }; + this._select = this._handleSelect.bind(this); + this._delete = this._handleDelete.bind(this); + this._keydown = this._handleKeyDown.bind(this); } + _handleSelect() { + this.fireEvent("select", {}); + } + + _handleDelete() { + this.fireEvent("delete"); + } + + _handleKeyDown(event) { + const isBS = isBackSpace(event); + const isD = isDelete(event); + + if (!this.readonly && (isBS || isD)) { + event.preventDefault(); + + this.fireEvent("delete", { + backSpace: isBS, + "delete": isD, + }); + } + + if (isEnter(event) || isSpace(event)) { + this.fireEvent("select", {}); + } + } + static async define(...params) { - await Promise.all([]); + await Promise.all([ + Icon.define(), + ]); super.define(...params); } diff --git a/packages/main/src/Tokenizer.hbs b/packages/main/src/Tokenizer.hbs index 20090751b72b..b6895cd5ac21 100644 --- a/packages/main/src/Tokenizer.hbs +++ b/packages/main/src/Tokenizer.hbs @@ -11,6 +11,6 @@
{{#if showNMore}} - {{hiddenTokensCount}} more + {{ctr._nMoreText}} {{/if}}
diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js index f0d0f9113676..2a41188b05ff 100644 --- a/packages/main/src/Tokenizer.js +++ b/packages/main/src/Tokenizer.js @@ -4,6 +4,7 @@ import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler.js import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation.js"; import Function from "@ui5/webcomponents-base/src/types/Function.js"; +import { fetchResourceBundle, getResourceBundle } from "./ResourceBundleProvider.js"; import TokenizerRenderer from "./build/compiled/TokenizerRenderer.lit.js"; // Styles @@ -29,6 +30,7 @@ const metadata = { showMore: { type: Boolean }, disabled: { type: Boolean }, + _nMoreText: { type: String }, _openOverflowPopover: { type: Function }, _tokenDelete: { type: Function }, _hiddenTokens: { type: Object, multiple: true }, @@ -101,6 +103,7 @@ class Tokenizer extends UI5Element { }; this._delegates.push(this._itemNav); + this.resourceBundle = getResourceBundle("@ui5/webcomponents"); } onBeforeRendering() { @@ -111,6 +114,7 @@ class Tokenizer extends UI5Element { } this._lastTokenCount = this.tokens.length; + this._nMoreText = this.resourceBundle.getText("MULTIINPUT_SHOW_MORE_TOKENS", [this._hiddenTokens.length]); } onAfterRendering() { @@ -197,8 +201,7 @@ class Tokenizer extends UI5Element { } static async define(...params) { - await Promise.all([]); - + await fetchResourceBundle("@ui5/webcomponents"); super.define(...params); } } diff --git a/packages/main/src/TokenizerTemplateContext.js b/packages/main/src/TokenizerTemplateContext.js index 455ae2bb5375..c5386b4a815b 100644 --- a/packages/main/src/TokenizerTemplateContext.js +++ b/packages/main/src/TokenizerTemplateContext.js @@ -3,7 +3,6 @@ class TokenizerTemplateContext { const context = { ctr: state, showNMore: state.showMore && state._hiddenTokens.length, - hiddenTokensCount: state._hiddenTokens.length, classes: { wrapper: { "ui5-tokenizer-nmore--wrapper": state.showMore, diff --git a/packages/main/src/i18n/messagebundle.json b/packages/main/src/i18n/messagebundle.json index d9bfc30d2873..ebd280bd25fe 100644 --- a/packages/main/src/i18n/messagebundle.json +++ b/packages/main/src/i18n/messagebundle.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\r\nTEXTAREA_CHARACTERS_LEFT={0} characters remaining\r\n#XTXT: Text for characters over\r\nTEXTAREA_CHARACTERS_EXCEEDED={0} characters over limit\r\n#XTOL: Tooltip for panel expand title\r\nPANEL_ICON=Expand/Collapse\r\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\r\nMULTIINPUT_SHOW_MORE_TOKENS={0} More\r\n#XTXT: Text for characters left\r\nTEXTAREA_CHARACTERS_LEFT={0} characters remaining\r\n#XTXT: Text for characters over\r\nTEXTAREA_CHARACTERS_EXCEEDED={0} characters over limit\r\n#XTOL: Tooltip for panel expand title\r\nPANEL_ICON=Expand/Collapse\r\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_ar.json b/packages/main/src/i18n/messagebundle_ar.json index 8f4227f6c9d3..d3506fe9b92b 100644 --- a/packages/main/src/i18n/messagebundle_ar.json +++ b/packages/main/src/i18n/messagebundle_ar.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=\\u0645\\u062A\\u0628\\u0642 {0} \\u0645\\u0646 \\u0627\\u0644\\u062D\\u0631\\u0648\\u0641\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=\\u062A\\u0645 \\u062A\\u062C\\u0627\\u0648\\u0632 \\u0627\\u0644\\u062D\\u062F \\u0628\\u0645\\u0642\\u062F\\u0627\\u0631 {0} \\u0645\\u0646 \\u0627\\u0644\\u062D\\u0631\\u0648\\u0641\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u062A\\u0648\\u0633\\u064A\\u0639/\\u0637\\u064A\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} \\u0627\\u0644\\u0645\\u0632\\u064A\\u062F\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=\\u0645\\u062A\\u0628\\u0642 {0} \\u0645\\u0646 \\u0627\\u0644\\u062D\\u0631\\u0648\\u0641\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=\\u062A\\u0645 \\u062A\\u062C\\u0627\\u0648\\u0632 \\u0627\\u0644\\u062D\\u062F \\u0628\\u0645\\u0642\\u062F\\u0627\\u0631 {0} \\u0645\\u0646 \\u0627\\u0644\\u062D\\u0631\\u0648\\u0641\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u062A\\u0648\\u0633\\u064A\\u0639/\\u0637\\u064A\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_bg.json b/packages/main/src/i18n/messagebundle_bg.json index dc45f6688210..aa15b7f61533 100644 --- a/packages/main/src/i18n/messagebundle_bg.json +++ b/packages/main/src/i18n/messagebundle_bg.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=\\u041E\\u0441\\u0442\\u0430\\u0432\\u0430\\u0442 {0} \\u0441\\u0438\\u043C\\u0432\\u043E\\u043B\\u0430\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} \\u0441\\u0438\\u043C\\u0432\\u043E\\u043B\\u0430 \\u043D\\u0430\\u0434 \\u043E\\u0433\\u0440\\u0430\\u043D\\u0438\\u0447\\u0435\\u043D\\u0438\\u0435\\u0442\\u043E\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u0420\\u0430\\u0437\\u0448\\u0438\\u0440\\u044F\\u0432\\u0430\\u043D\\u0435/\\u0441\\u043A\\u0440\\u0438\\u0432\\u0430\\u043D\\u0435\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS=\\u041E\\u0449\\u0435 {0}\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=\\u041E\\u0441\\u0442\\u0430\\u0432\\u0430\\u0442 {0} \\u0441\\u0438\\u043C\\u0432\\u043E\\u043B\\u0430\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} \\u0441\\u0438\\u043C\\u0432\\u043E\\u043B\\u0430 \\u043D\\u0430\\u0434 \\u043E\\u0433\\u0440\\u0430\\u043D\\u0438\\u0447\\u0435\\u043D\\u0438\\u0435\\u0442\\u043E\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u0420\\u0430\\u0437\\u0448\\u0438\\u0440\\u044F\\u0432\\u0430\\u043D\\u0435/\\u0441\\u043A\\u0440\\u0438\\u0432\\u0430\\u043D\\u0435\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_ca.json b/packages/main/src/i18n/messagebundle_ca.json index 5fcb7de6adbb..25aef7932184 100644 --- a/packages/main/src/i18n/messagebundle_ca.json +++ b/packages/main/src/i18n/messagebundle_ca.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} car\\u00E0cters restants\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=S''han excedit {0} car\\u00E0cters\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Ampliar/Comprimir\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} M\\u00E9s\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} car\\u00E0cters restants\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=S''han excedit {0} car\\u00E0cters\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Ampliar/Comprimir\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_cs.json b/packages/main/src/i18n/messagebundle_cs.json index 6ca7975fc429..18700e8a45a5 100644 --- a/packages/main/src/i18n/messagebundle_cs.json +++ b/packages/main/src/i18n/messagebundle_cs.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} znaky zb\\u00FDvaj\\u00ED\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} znaky p\\u0159es limit\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Rozbalit/sbalit\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} v\\u00EDce\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} znaky zb\\u00FDvaj\\u00ED\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} znaky p\\u0159es limit\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Rozbalit/sbalit\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_da.json b/packages/main/src/i18n/messagebundle_da.json index 9c155aed6e85..358478fe4653 100644 --- a/packages/main/src/i18n/messagebundle_da.json +++ b/packages/main/src/i18n/messagebundle_da.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} tegn tilbage\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} tegn overskredet\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Ekspander/komprimer\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} Mere\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} tegn tilbage\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} tegn overskredet\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Ekspander/komprimer\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_de.json b/packages/main/src/i18n/messagebundle_de.json index 66c57ca7bcb4..b61e951345ab 100644 --- a/packages/main/src/i18n/messagebundle_de.json +++ b/packages/main/src/i18n/messagebundle_de.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} Zeichen verbleibend\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} Zeichen \\u00FCber Limit\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Expandieren/komprimieren\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} mehr\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} Zeichen verbleibend\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} Zeichen \\u00FCber Limit\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Expandieren/komprimieren\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_el.json b/packages/main/src/i18n/messagebundle_el.json index 0157a1906c8b..08bafd7566e3 100644 --- a/packages/main/src/i18n/messagebundle_el.json +++ b/packages/main/src/i18n/messagebundle_el.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} \\u03B5\\u03BD\\u03B1\\u03C0\\u03BF\\u03BC\\u03B5\\u03AF\\u03BD\\u03B1\\u03BD\\u03C4\\u03B5\\u03C2 \\u03C7\\u03B1\\u03C1\\u03B1\\u03BA\\u03C4\\u03AE\\u03C1\\u03B5\\u03C2\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} \\u03B5\\u03C0\\u03B9\\u03C0\\u03BB\\u03AD\\u03BF\\u03BD \\u03C7\\u03B1\\u03C1\\u03B1\\u03BA\\u03C4\\u03AE\\u03C1\\u03B5\\u03C2\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u0395\\u03C0\\u03AD\\u03BA\\u03C4\\u03B1\\u03C3\\u03B7/\\u03A3\\u03CD\\u03BC\\u03C0\\u03C4\\u03C5\\u03BE\\u03B7\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} \\u03A0\\u03B5\\u03C1\\u03B9\\u03C3\\u03C3\\u03CC\\u03C4\\u03B5\\u03C1\\u03B1\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} \\u03B5\\u03BD\\u03B1\\u03C0\\u03BF\\u03BC\\u03B5\\u03AF\\u03BD\\u03B1\\u03BD\\u03C4\\u03B5\\u03C2 \\u03C7\\u03B1\\u03C1\\u03B1\\u03BA\\u03C4\\u03AE\\u03C1\\u03B5\\u03C2\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} \\u03B5\\u03C0\\u03B9\\u03C0\\u03BB\\u03AD\\u03BF\\u03BD \\u03C7\\u03B1\\u03C1\\u03B1\\u03BA\\u03C4\\u03AE\\u03C1\\u03B5\\u03C2\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u0395\\u03C0\\u03AD\\u03BA\\u03C4\\u03B1\\u03C3\\u03B7/\\u03A3\\u03CD\\u03BC\\u03C0\\u03C4\\u03C5\\u03BE\\u03B7\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_en.json b/packages/main/src/i18n/messagebundle_en.json index b9cd465780ae..6ea80da1c499 100644 --- a/packages/main/src/i18n/messagebundle_en.json +++ b/packages/main/src/i18n/messagebundle_en.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} characters remaining\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} characters over limit\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Expand/Collapse\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} More\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} characters remaining\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} characters over limit\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Expand/Collapse\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_en_US_sappsd.json b/packages/main/src/i18n/messagebundle_en_US_sappsd.json index d4eddc4eb0e5..a4beabaf05df 100644 --- a/packages/main/src/i18n/messagebundle_en_US_sappsd.json +++ b/packages/main/src/i18n/messagebundle_en_US_sappsd.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=[[[{0} \\u010B\\u0125\\u0105\\u0157\\u0105\\u010B\\u0163\\u0113\\u0157\\u015F \\u0157\\u0113\\u0271\\u0105\\u012F\\u014B\\u012F\\u014B\\u011F]]]\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=[[[{0} \\u010B\\u0125\\u0105\\u0157\\u0105\\u010B\\u0163\\u0113\\u0157\\u015F \\u014F\\u028B\\u0113\\u0157 \\u013A\\u012F\\u0271\\u012F\\u0163]]]\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=[[[\\u0114\\u03C7\\u03C1\\u0105\\u014B\\u018C/\\u0108\\u014F\\u013A\\u013A\\u0105\\u03C1\\u015F\\u0113\\u2219\\u2219\\u2219\\u2219]]]\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS=[[[{0} \\u039C\\u014F\\u0157\\u0113]]]\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=[[[{0} \\u010B\\u0125\\u0105\\u0157\\u0105\\u010B\\u0163\\u0113\\u0157\\u015F \\u0157\\u0113\\u0271\\u0105\\u012F\\u014B\\u012F\\u014B\\u011F]]]\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=[[[{0} \\u010B\\u0125\\u0105\\u0157\\u0105\\u010B\\u0163\\u0113\\u0157\\u015F \\u014F\\u028B\\u0113\\u0157 \\u013A\\u012F\\u0271\\u012F\\u0163]]]\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=[[[\\u0114\\u03C7\\u03C1\\u0105\\u014B\\u018C/\\u0108\\u014F\\u013A\\u013A\\u0105\\u03C1\\u015F\\u0113\\u2219\\u2219\\u2219\\u2219]]]\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_en_US_saptrc.json b/packages/main/src/i18n/messagebundle_en_US_saptrc.json index a7eccd09a899..9d8a4f2f6859 100644 --- a/packages/main/src/i18n/messagebundle_en_US_saptrc.json +++ b/packages/main/src/i18n/messagebundle_en_US_saptrc.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=mKEI/SKDBFpaAfahygzAWQ_{0} characters remaining\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=kicy6IVJJ3K1y6kBW4e6zA_{0} characters over limit\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=fHB0Uj0GByhxzXc7B3D1fw_Expand/Collapse\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS=+N9596yZdcPDWELQYkcqnA_{0} More\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=mKEI/SKDBFpaAfahygzAWQ_{0} characters remaining\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=kicy6IVJJ3K1y6kBW4e6zA_{0} characters over limit\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=fHB0Uj0GByhxzXc7B3D1fw_Expand/Collapse\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_es.json b/packages/main/src/i18n/messagebundle_es.json index 474f12eb31a1..5f5a3440a6e8 100644 --- a/packages/main/src/i18n/messagebundle_es.json +++ b/packages/main/src/i18n/messagebundle_es.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} caracteres restantes\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} caracteres excedidos\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Ampliar/Comprimir\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} M\\u00E1s\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} caracteres restantes\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} caracteres excedidos\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Ampliar/Comprimir\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_et.json b/packages/main/src/i18n/messagebundle_et.json index 2332d5944a82..bfbd18d6cc3a 100644 --- a/packages/main/src/i18n/messagebundle_et.json +++ b/packages/main/src/i18n/messagebundle_et.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} m\\u00E4rki veel\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} m\\u00E4rki \\u00FCletatud\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Laienda/ahenda\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} veel\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} m\\u00E4rki veel\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} m\\u00E4rki \\u00FCletatud\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Laienda/ahenda\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_fi.json b/packages/main/src/i18n/messagebundle_fi.json index 91da8c80c617..51239a91ff69 100644 --- a/packages/main/src/i18n/messagebundle_fi.json +++ b/packages/main/src/i18n/messagebundle_fi.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} merkki\\u00E4 j\\u00E4ljell\\u00E4\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} merkki\\u00E4 yli rajan\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Laajenna/tiivist\\u00E4\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} lis\\u00E4\\u00E4\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} merkki\\u00E4 j\\u00E4ljell\\u00E4\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} merkki\\u00E4 yli rajan\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Laajenna/tiivist\\u00E4\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_fr.json b/packages/main/src/i18n/messagebundle_fr.json index 2d83fff681d9..ad90ca378ccc 100644 --- a/packages/main/src/i18n/messagebundle_fr.json +++ b/packages/main/src/i18n/messagebundle_fr.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} caract\\u00E8re restant\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} caract\\u00E8res de trop\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=D\\u00E9velopper/R\\u00E9duire\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} Plus\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} caract\\u00E8re restant\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} caract\\u00E8res de trop\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=D\\u00E9velopper/R\\u00E9duire\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_hi.json b/packages/main/src/i18n/messagebundle_hi.json index a9101332efae..ebe43ef9cb8c 100644 --- a/packages/main/src/i18n/messagebundle_hi.json +++ b/packages/main/src/i18n/messagebundle_hi.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} \\u0936\\u0947\\u0937 \\u0935\\u0930\\u094D\\u0923\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} \\u0938\\u0940\\u092E\\u093E \\u0938\\u0947 \\u0905\\u0927\\u093F\\u0915 \\u0935\\u0930\\u094D\\u0923\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u0935\\u093F\\u0938\\u094D\\u0924\\u0943\\u0924/\\u0938\\u0902\\u0915\\u0941\\u091A\\u093F\\u0924\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} \\u0914\\u0930 \\u0905\\u0927\\u093F\\u0915...\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} \\u0936\\u0947\\u0937 \\u0935\\u0930\\u094D\\u0923\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} \\u0938\\u0940\\u092E\\u093E \\u0938\\u0947 \\u0905\\u0927\\u093F\\u0915 \\u0935\\u0930\\u094D\\u0923\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u0935\\u093F\\u0938\\u094D\\u0924\\u0943\\u0924/\\u0938\\u0902\\u0915\\u0941\\u091A\\u093F\\u0924\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_hr.json b/packages/main/src/i18n/messagebundle_hr.json index a9a13fa87fb4..82f353406efe 100644 --- a/packages/main/src/i18n/messagebundle_hr.json +++ b/packages/main/src/i18n/messagebundle_hr.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} preostali znakovi\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} znakovi prekora\\u010Deni\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Pro\\u0161iri/sa\\u017Emi\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} vi\\u0161e\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} preostali znakovi\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} znakovi prekora\\u010Deni\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Pro\\u0161iri/sa\\u017Emi\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_hu.json b/packages/main/src/i18n/messagebundle_hu.json index afb53b7bad4c..e8da73293ffb 100644 --- a/packages/main/src/i18n/messagebundle_hu.json +++ b/packages/main/src/i18n/messagebundle_hu.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} karakter maradt\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} karakterrel t\\u00FAll\\u00E9pve\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Kibont\\u00E1s / visszaz\\u00E1r\\u00E1s\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS=M\\u00E9g {0}\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} karakter maradt\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} karakterrel t\\u00FAll\\u00E9pve\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Kibont\\u00E1s / visszaz\\u00E1r\\u00E1s\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_it.json b/packages/main/src/i18n/messagebundle_it.json index 2cf1c971b957..f43671d27ebf 100644 --- a/packages/main/src/i18n/messagebundle_it.json +++ b/packages/main/src/i18n/messagebundle_it.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} caratteri rimanenti\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} caratteri superati\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Esplodi/Comprimi\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} altro\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} caratteri rimanenti\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} caratteri superati\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Esplodi/Comprimi\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_iw.json b/packages/main/src/i18n/messagebundle_iw.json index bc257df21da4..a5c7ca85afff 100644 --- a/packages/main/src/i18n/messagebundle_iw.json +++ b/packages/main/src/i18n/messagebundle_iw.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} \\u05EA\\u05D5\\u05D5\\u05D9\\u05DD \\u05E0\\u05D5\\u05EA\\u05E8\\u05D5\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=\\u05D7\\u05E8\\u05D9\\u05D2\\u05D4 \\u05E9\\u05DC {0} \\u05EA\\u05D5\\u05D5\\u05D9\\u05DD\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u05D4\\u05E8\\u05D7\\u05D1/\\u05E6\\u05DE\\u05E6\\u05DD\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} \\u05E0\\u05D5\\u05E1\\u05E4\\u05D9\\u05DD\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} \\u05EA\\u05D5\\u05D5\\u05D9\\u05DD \\u05E0\\u05D5\\u05EA\\u05E8\\u05D5\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=\\u05D7\\u05E8\\u05D9\\u05D2\\u05D4 \\u05E9\\u05DC {0} \\u05EA\\u05D5\\u05D5\\u05D9\\u05DD\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u05D4\\u05E8\\u05D7\\u05D1/\\u05E6\\u05DE\\u05E6\\u05DD\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_ja.json b/packages/main/src/i18n/messagebundle_ja.json index 7a6e32406b4f..689f6edb5ac9 100644 --- a/packages/main/src/i18n/messagebundle_ja.json +++ b/packages/main/src/i18n/messagebundle_ja.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} \\u6587\\u5B57\\u6B8B\\u3063\\u3066\\u3044\\u307E\\u3059\\u3002\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=\\u4E0A\\u9650\\u3092\\u3000{0} \\u6587\\u5B57\\u8D85\\u904E\\u3057\\u307E\\u3057\\u305F\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u5C55\\u958B/\\u5727\\u7E2E\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} \\u8FFD\\u52A0\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} \\u6587\\u5B57\\u6B8B\\u3063\\u3066\\u3044\\u307E\\u3059\\u3002\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=\\u4E0A\\u9650\\u3092\\u3000{0} \\u6587\\u5B57\\u8D85\\u904E\\u3057\\u307E\\u3057\\u305F\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u5C55\\u958B/\\u5727\\u7E2E\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_kk.json b/packages/main/src/i18n/messagebundle_kk.json index c0019c071a51..853057396cd2 100644 --- a/packages/main/src/i18n/messagebundle_kk.json +++ b/packages/main/src/i18n/messagebundle_kk.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} \\u0442\\u0430\\u04A3\\u0431\\u0430 \\u049B\\u0430\\u043B\\u0434\\u044B\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} \\u0442\\u0430\\u04A3\\u0431\\u0430 \\u0430\\u0441\\u044B\\u043F \\u043A\\u0435\\u0442\\u0442\\u0456\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u0416\\u0430\\u044E/\\u0436\\u0438\\u044E\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS=\\u0422\\u0430\\u0493\\u044B {0}...\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} \\u0442\\u0430\\u04A3\\u0431\\u0430 \\u049B\\u0430\\u043B\\u0434\\u044B\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} \\u0442\\u0430\\u04A3\\u0431\\u0430 \\u0430\\u0441\\u044B\\u043F \\u043A\\u0435\\u0442\\u0442\\u0456\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u0416\\u0430\\u044E/\\u0436\\u0438\\u044E\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_ko.json b/packages/main/src/i18n/messagebundle_ko.json index 47b5893040a0..601c36b03d93 100644 --- a/packages/main/src/i18n/messagebundle_ko.json +++ b/packages/main/src/i18n/messagebundle_ko.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0}\\uC790 \\uB0A8\\uC544 \\uC788\\uC74C\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0}\\uC790 \\uCD08\\uACFC\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\uD3BC\\uCE58\\uAE30/\\uC811\\uAE30\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} \\uD56D\\uBAA9 \\uB354\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0}\\uC790 \\uB0A8\\uC544 \\uC788\\uC74C\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0}\\uC790 \\uCD08\\uACFC\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\uD3BC\\uCE58\\uAE30/\\uC811\\uAE30\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_lt.json b/packages/main/src/i18n/messagebundle_lt.json index c692f3a867d5..cffb9973c36a 100644 --- a/packages/main/src/i18n/messagebundle_lt.json +++ b/packages/main/src/i18n/messagebundle_lt.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=Liko simboli\\u0173\\: {0}\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=Vir\\u0161ytas simboli\\u0173 skai\\u010Dius\\: {0}\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=I\\u0161pl\\u0117sti / sutraukti\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} daugiau\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=Liko simboli\\u0173\\: {0}\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=Vir\\u0161ytas simboli\\u0173 skai\\u010Dius\\: {0}\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=I\\u0161pl\\u0117sti / sutraukti\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_lv.json b/packages/main/src/i18n/messagebundle_lv.json index c727776e6601..02dd32469054 100644 --- a/packages/main/src/i18n/messagebundle_lv.json +++ b/packages/main/src/i18n/messagebundle_lv.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=Atliku\\u0161as {0} rakstz\\u012Bmes\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} rakstz\\u012Bmes p\\u0101rsniedz limitu\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Izv\\u0113rst/sak\\u013Caut\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS=V\\u0113l {0}\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=Atliku\\u0161as {0} rakstz\\u012Bmes\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} rakstz\\u012Bmes p\\u0101rsniedz limitu\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Izv\\u0113rst/sak\\u013Caut\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_ms.json b/packages/main/src/i18n/messagebundle_ms.json index e1420953de41..2f9ed8abfa9e 100644 --- a/packages/main/src/i18n/messagebundle_ms.json +++ b/packages/main/src/i18n/messagebundle_ms.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} aksara yang tinggal\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} aksara melebihi had\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Kembangkan/Runtuhkan\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} Lagi\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} aksara yang tinggal\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} aksara melebihi had\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Kembangkan/Runtuhkan\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_nl.json b/packages/main/src/i18n/messagebundle_nl.json index e8347d79228b..18af9fb8246e 100644 --- a/packages/main/src/i18n/messagebundle_nl.json +++ b/packages/main/src/i18n/messagebundle_nl.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} tekens over\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} tekens boven limiet\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Weergeven/verbergen\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} Meer\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} tekens over\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} tekens boven limiet\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Weergeven/verbergen\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_no.json b/packages/main/src/i18n/messagebundle_no.json index 0ce517d0a937..ddd6cd6d929e 100644 --- a/packages/main/src/i18n/messagebundle_no.json +++ b/packages/main/src/i18n/messagebundle_no.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} tegn gjenst\\u00E5r\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} tegn over grensen\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Utvid/komprimer\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} flere\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} tegn gjenst\\u00E5r\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} tegn over grensen\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Utvid/komprimer\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_pl.json b/packages/main/src/i18n/messagebundle_pl.json index 4c1efc71ab2c..c8d0326214d2 100644 --- a/packages/main/src/i18n/messagebundle_pl.json +++ b/packages/main/src/i18n/messagebundle_pl.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=Pozosta\\u0142a nast\\u0119puj\\u0105ca liczba znak\\u00F3w\\: {0}\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=Przekroczono o nast\\u0119puj\\u0105c\\u0105 liczb\\u0119 znak\\u00F3w\\: {0}\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Rozwijanie/zwijanie\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} wi\\u0119cej\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=Pozosta\\u0142a nast\\u0119puj\\u0105ca liczba znak\\u00F3w\\: {0}\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=Przekroczono o nast\\u0119puj\\u0105c\\u0105 liczb\\u0119 znak\\u00F3w\\: {0}\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Rozwijanie/zwijanie\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_pt.json b/packages/main/src/i18n/messagebundle_pt.json index 1e3876744216..5e6124ba7314 100644 --- a/packages/main/src/i18n/messagebundle_pt.json +++ b/packages/main/src/i18n/messagebundle_pt.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} caracteres restantes\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} caracteres acima do limite\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Expandir/comprimir\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} Mais\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} caracteres restantes\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} caracteres acima do limite\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Expandir/comprimir\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_ro.json b/packages/main/src/i18n/messagebundle_ro.json index 330c2fb76cb0..30a476e9938c 100644 --- a/packages/main/src/i18n/messagebundle_ro.json +++ b/packages/main/src/i18n/messagebundle_ro.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} caractere r\\u0103mase\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} caractere peste limit\\u0103\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Expandare/comprimare\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS=\\u00CEnc\\u0103 {0}\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} caractere r\\u0103mase\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} caractere peste limit\\u0103\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Expandare/comprimare\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_ru.json b/packages/main/src/i18n/messagebundle_ru.json index f551be6a964f..4a530e91fb22 100644 --- a/packages/main/src/i18n/messagebundle_ru.json +++ b/packages/main/src/i18n/messagebundle_ru.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=\\u041E\\u0441\\u0442\\u0430\\u043B\\u043E\\u0441\\u044C \\u0441\\u0438\\u043C\\u0432\\u043E\\u043B\\u043E\\u0432\\: {0}\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=\\u0421\\u0438\\u043C\\u0432\\u043E\\u043B\\u043E\\u0432 \\u0441\\u0432\\u044B\\u0448\\u0435 \\u043B\\u0438\\u043C\\u0438\\u0442\\u0430\\: {0}\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u0420\\u0430\\u0437\\u0432\\u0435\\u0440\\u043D\\u0443\\u0442\\u044C/\\u0441\\u0432\\u0435\\u0440\\u043D\\u0443\\u0442\\u044C\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS=\\u0415\\u0449\\u0435 {0}\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=\\u041E\\u0441\\u0442\\u0430\\u043B\\u043E\\u0441\\u044C \\u0441\\u0438\\u043C\\u0432\\u043E\\u043B\\u043E\\u0432\\: {0}\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=\\u0421\\u0438\\u043C\\u0432\\u043E\\u043B\\u043E\\u0432 \\u0441\\u0432\\u044B\\u0448\\u0435 \\u043B\\u0438\\u043C\\u0438\\u0442\\u0430\\: {0}\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u0420\\u0430\\u0437\\u0432\\u0435\\u0440\\u043D\\u0443\\u0442\\u044C/\\u0441\\u0432\\u0435\\u0440\\u043D\\u0443\\u0442\\u044C\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_sh.json b/packages/main/src/i18n/messagebundle_sh.json index 3ea0209d75aa..6c3660fe6427 100644 --- a/packages/main/src/i18n/messagebundle_sh.json +++ b/packages/main/src/i18n/messagebundle_sh.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} znakova preostaje\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} znakova prekora\\u010Deno\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Pro\\u0161iri/sa\\u017Emi\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} vi\\u0161e\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} znakova preostaje\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} znakova prekora\\u010Deno\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Pro\\u0161iri/sa\\u017Emi\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_sk.json b/packages/main/src/i18n/messagebundle_sk.json index ee49cea25134..21ae24a34798 100644 --- a/packages/main/src/i18n/messagebundle_sk.json +++ b/packages/main/src/i18n/messagebundle_sk.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} znakov zost\\u00E1va\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} znakov nad limit\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Rozbali\\u0165/zbali\\u0165\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} \\u010Fal\\u0161\\u00EDch\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} znakov zost\\u00E1va\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} znakov nad limit\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Rozbali\\u0165/zbali\\u0165\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_sl.json b/packages/main/src/i18n/messagebundle_sl.json index 3ebaae76d0a7..ee0ba62fd038 100644 --- a/packages/main/src/i18n/messagebundle_sl.json +++ b/packages/main/src/i18n/messagebundle_sl.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=Ostalo \\u0161e {0} znakov\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=Prese\\u017Eeno za {0} znakov\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Raz\\u0161iri/skr\\u010Di\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} ve\\u010D\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=Ostalo \\u0161e {0} znakov\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=Prese\\u017Eeno za {0} znakov\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Raz\\u0161iri/skr\\u010Di\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_sv.json b/packages/main/src/i18n/messagebundle_sv.json index f0b8127773cb..811c020a38d4 100644 --- a/packages/main/src/i18n/messagebundle_sv.json +++ b/packages/main/src/i18n/messagebundle_sv.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} tecken kvar\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} tecken f\\u00F6r mycket\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Expandera/komprimera\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} fler\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} tecken kvar\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} tecken f\\u00F6r mycket\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Expandera/komprimera\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_th.json b/packages/main/src/i18n/messagebundle_th.json index fb52fd5da297..a51a377f607d 100644 --- a/packages/main/src/i18n/messagebundle_th.json +++ b/packages/main/src/i18n/messagebundle_th.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=\\u0E40\\u0E2B\\u0E25\\u0E37\\u0E2D\\u0E2D\\u0E35\\u0E01{0} \\u0E2D\\u0E31\\u0E01\\u0E02\\u0E23\\u0E30\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=\\u0E40\\u0E01\\u0E34\\u0E19\\u0E21\\u0E32{0} \\u0E2D\\u0E31\\u0E01\\u0E02\\u0E23\\u0E30\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u0E02\\u0E22\\u0E32\\u0E22/\\u0E22\\u0E48\\u0E2D\\u0E23\\u0E27\\u0E21\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS=\\u0E2D\\u0E35\\u0E01 {0} \\u0E23\\u0E32\\u0E22\\u0E01\\u0E32\\u0E23\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=\\u0E40\\u0E2B\\u0E25\\u0E37\\u0E2D\\u0E2D\\u0E35\\u0E01{0} \\u0E2D\\u0E31\\u0E01\\u0E02\\u0E23\\u0E30\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=\\u0E40\\u0E01\\u0E34\\u0E19\\u0E21\\u0E32{0} \\u0E2D\\u0E31\\u0E01\\u0E02\\u0E23\\u0E30\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u0E02\\u0E22\\u0E32\\u0E22/\\u0E22\\u0E48\\u0E2D\\u0E23\\u0E27\\u0E21\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_tr.json b/packages/main/src/i18n/messagebundle_tr.json index 025ebcd93271..7b1c92ca536f 100644 --- a/packages/main/src/i18n/messagebundle_tr.json +++ b/packages/main/src/i18n/messagebundle_tr.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} karakter kald\\u0131\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} karakter a\\u015F\\u0131ld\\u0131\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Geni\\u015Flet/s\\u0131k\\u0131\\u015Ft\\u0131r\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} daha\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} karakter kald\\u0131\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} karakter a\\u015F\\u0131ld\\u0131\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=Geni\\u015Flet/s\\u0131k\\u0131\\u015Ft\\u0131r\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_uk.json b/packages/main/src/i18n/messagebundle_uk.json index 970e1839301b..3d16c283e185 100644 --- a/packages/main/src/i18n/messagebundle_uk.json +++ b/packages/main/src/i18n/messagebundle_uk.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} \\u0441\\u0438\\u043C\\u0432\\u043E\\u043B\\u0456\\u0432 \\u0437\\u0430\\u043B\\u0438\\u0448\\u0438\\u043B\\u043E\\u0441\\u044C\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} \\u0441\\u0438\\u043C\\u0432\\u043E\\u043B\\u0456\\u0432 \\u0437\\u0430 \\u043C\\u0435\\u0436\\u0435\\u044E\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u0420\\u043E\\u0437\\u0433\\u043E\\u0440\\u043D\\u0443\\u0442\\u0438/\\u0437\\u0433\\u043E\\u0440\\u043D\\u0443\\u0442\\u0438\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} \\u0411\\u0456\\u043B\\u044C\\u0448\\u0435\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT={0} \\u0441\\u0438\\u043C\\u0432\\u043E\\u043B\\u0456\\u0432 \\u0437\\u0430\\u043B\\u0438\\u0448\\u0438\\u043B\\u043E\\u0441\\u044C\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} \\u0441\\u0438\\u043C\\u0432\\u043E\\u043B\\u0456\\u0432 \\u0437\\u0430 \\u043C\\u0435\\u0436\\u0435\\u044E\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u0420\\u043E\\u0437\\u0433\\u043E\\u0440\\u043D\\u0443\\u0442\\u0438/\\u0437\\u0433\\u043E\\u0440\\u043D\\u0443\\u0442\\u0438\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_vi.json b/packages/main/src/i18n/messagebundle_vi.json index e7a3aae922f4..2fe6aa8431a5 100644 --- a/packages/main/src/i18n/messagebundle_vi.json +++ b/packages/main/src/i18n/messagebundle_vi.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=co\\u0300n la\\u0323i {0} ky\\u0301 t\\u01B0\\u0323\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} ky\\u0301 t\\u01B0\\u0323 qua\\u0301 gi\\u01A1\\u0301i ha\\u0323n\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=M\\u01A1\\u0309 r\\u00F4\\u0323ng/Thu go\\u0323n\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS={0} Nhi\\u00EA\\u0300u h\\u01A1n\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=co\\u0300n la\\u0323i {0} ky\\u0301 t\\u01B0\\u0323\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED={0} ky\\u0301 t\\u01B0\\u0323 qua\\u0301 gi\\u01A1\\u0301i ha\\u0323n\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=M\\u01A1\\u0309 r\\u00F4\\u0323ng/Thu go\\u0323n\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_zh_CN.json b/packages/main/src/i18n/messagebundle_zh_CN.json index 6fee140ebb16..4f233150c60f 100644 --- a/packages/main/src/i18n/messagebundle_zh_CN.json +++ b/packages/main/src/i18n/messagebundle_zh_CN.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=\\u5269\\u4F59 {0} \\u4E2A\\u5B57\\u7B26\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=\\u8D85\\u8FC7\\u9650\\u5236 {0} \\u4E2A\\u5B57\\u7B26\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u5C55\\u5F00/\\u6298\\u53E0\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS=\\u5176\\u4ED6 {0} \\u4E2A\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=\\u5269\\u4F59 {0} \\u4E2A\\u5B57\\u7B26\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=\\u8D85\\u8FC7\\u9650\\u5236 {0} \\u4E2A\\u5B57\\u7B26\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u5C55\\u5F00/\\u6298\\u53E0\n"} \ No newline at end of file diff --git a/packages/main/src/i18n/messagebundle_zh_TW.json b/packages/main/src/i18n/messagebundle_zh_TW.json index c7a2576b5f9e..121771c5ec31 100644 --- a/packages/main/src/i18n/messagebundle_zh_TW.json +++ b/packages/main/src/i18n/messagebundle_zh_TW.json @@ -1 +1 @@ -{"_":"#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=\\u5269\\u4E0B {0} \\u500B\\u5B57\\u5143\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=\\u8D85\\u904E {0} \\u500B\\u5B57\\u5143\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u5C55\\u958B/\\u6536\\u7E2E\n"} \ No newline at end of file +{"_":"#XFLD: Token number indicator which is used to show more tokens in Tokenizers inside MultiInput and MultiComboBox\nMULTIINPUT_SHOW_MORE_TOKENS=\\u66F4\\u591A ({0})\n#XTXT: Text for characters left\nTEXTAREA_CHARACTERS_LEFT=\\u5269\\u4E0B {0} \\u500B\\u5B57\\u5143\n#XTXT: Text for characters over\nTEXTAREA_CHARACTERS_EXCEEDED=\\u8D85\\u904E {0} \\u500B\\u5B57\\u5143\n#XTOL: Tooltip for panel expand title\nPANEL_ICON=\\u5C55\\u958B/\\u6536\\u7E2E\n"} \ No newline at end of file diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css index 8617d50a4a7b..160681c9c2c7 100644 --- a/packages/main/src/themes/MultiComboBox.css +++ b/packages/main/src/themes/MultiComboBox.css @@ -55,4 +55,8 @@ span.sapUiSizeCompact .ui5-multi-combobox--token { .ui5-multi-combobox-tokenizer { max-width: calc(100% - 3rem - var(--sap_wc_input_icon_min_width)); + border: none; + width: auto; + min-width: 0px; + height: 100%; } \ No newline at end of file From 5cc41d245d0bda17329c3acae5f16dc80c6ca04b Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Fri, 17 May 2019 16:20:47 +0300 Subject: [PATCH 10/14] add sample page --- packages/main/src/MultiComboBox.hbs | 5 +- packages/main/src/MultiComboBox.js | 31 ++- packages/main/src/TokenizerTemplateContext.js | 1 + packages/main/src/themes/Tokenizer.css | 4 + .../main/pages/MultiComboBox.html | 14 +- .../main/samples/MultiComboBox.sample.html | 191 ++++++++++++++++++ 6 files changed, 236 insertions(+), 10 deletions(-) create mode 100644 packages/main/test/sap/ui/webcomponents/main/samples/MultiComboBox.sample.html diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs index 142edbf2b9b0..81661adf15fe 100644 --- a/packages/main/src/MultiComboBox.hbs +++ b/packages/main/src/MultiComboBox.hbs @@ -6,7 +6,8 @@ ?readonly={{ctr.readonly}} value-state="{{ctr.valueState}}" show-suggestions - @ui5-input="{{ctr._inputChage}}" + @ui5-input="{{ctr._inputLiveChange}}" + @ui5-change={{ctr._inputChange}} @keydown="{{ctr._keydown}}"> {{/unless}} diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js index 2d20bf747e9f..844eeddd38c5 100644 --- a/packages/main/src/MultiComboBox.js +++ b/packages/main/src/MultiComboBox.js @@ -26,6 +26,20 @@ const metadata = { tag: "ui5-multi-combobox", defaultSlot: "items", slots: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ { + /** + * Defines the ui5-multi-combobox items. + *

+ * Example:
+ * <ui5-multi-combobox>
+ *     <ui5-li>Item #1</ui5-li>
+ *     <ui5-li>Item #2</ui5-li>
+ * </ui5-multi-combobox> + *

+ * + * @type {HTMLElement[]} + * @slot + * @public + */ items: { type: HTMLElement, multiple: true, @@ -115,11 +129,20 @@ const metadata = { _afterAllPopoverClose: { type: Function }, _afterAllPopoverOpen: { type: Function }, _keydown: { type: Function }, - _inputChage: { type: Function }, + _inputLiveChange: { type: Function }, + _inputChange: { type: Function }, _filteredItems: { type: Object }, _iconPressed: { type: Boolean }, }, events: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ { + /** + * Fired when the input operation has finished by pressing Enter or on focusout. + * + * @event + * @public + */ + change: {}, + /** * Fired when the value of the ui5-multi-combobox changes at each keystroke. * @@ -156,7 +179,6 @@ const metadata = { * @alias sap.ui.webcomponents.main.MultiComboBox * @extends UI5Element * @tagname ui5-timeline - * @usestextcontent * @public */ class MultiComboBox extends UI5Element { @@ -177,6 +199,7 @@ class MultiComboBox extends UI5Element { classes: { icon: { [`ui5-multi-combobox-icon-pressed`]: state._iconPressed, + [`ui5-multi-combobox--icon`]: true, }, }, }; @@ -210,10 +233,12 @@ class MultiComboBox extends UI5Element { this._listSelectionChange(event); }; - this._inputChage = this._handleInputLiveChange.bind(this); + this._inputLiveChange = this._handleInputLiveChange.bind(this); this._tokenDelete = this._handleTokenDelete.bind(this); this._tokenizerFocusOut = this._handleTokenizerFocusOut.bind(this); + this._inputChange = () => this.fireEvent("change"); + this._afterAllPopoverClose = () => { this._toggleIcon(); }; diff --git a/packages/main/src/TokenizerTemplateContext.js b/packages/main/src/TokenizerTemplateContext.js index c5386b4a815b..027a219f11b6 100644 --- a/packages/main/src/TokenizerTemplateContext.js +++ b/packages/main/src/TokenizerTemplateContext.js @@ -7,6 +7,7 @@ class TokenizerTemplateContext { wrapper: { "ui5-tokenizer-nmore--wrapper": state.showMore, "ui5-tokenizer--wrapper": true, + "ui5-tokenizer-no-padding": !state.tokens.length, }, content: { "ui5-tokenizer--content": true, diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css index 9da0eeaf08fb..f2bbce314545 100644 --- a/packages/main/src/themes/Tokenizer.css +++ b/packages/main/src/themes/Tokenizer.css @@ -26,6 +26,10 @@ span.sapUiSizeCompact .ui5-tokenizer--wrapper { font-family: var(--sapUiFontFamily); } +.ui5-tokenizer-no-padding { + padding: 0; +} + .ui5-tokenizer--wrapper.ui5-tokenizer-nmore--wrapper { overflow-x: hidden; } diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html b/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html index 41cbfc51b0b9..e453d55988f2 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html @@ -33,6 +33,10 @@ .demo-section ui5-multi-combobox { margin-top: 10px; } + + ui5-multi-combobox:not(:defined) { + display: none; + } @@ -73,11 +77,11 @@ Predefined value
- - Cosy - Compact - Condensed - Longest word in the world + + Cosy + Compact + Condensed + Longest word in the world
diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/MultiComboBox.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/MultiComboBox.sample.html new file mode 100644 index 000000000000..1b8818e46431 --- /dev/null +++ b/packages/main/test/sap/ui/webcomponents/main/samples/MultiComboBox.sample.html @@ -0,0 +1,191 @@ + + + + + <ui5-multi-combobox> + + + + + + + + + + + + + + + + + + + + + +
+

MultiComboBox

+
<ui5-multi-combobox>
+
+ +
+

Basic MultiComboBox

+
+ + UI5 + + + UI5 + + + UI5 + +
+ 

+<ui5-multi-combobox placeholder="Type your value">
+	<ui5-li selected>UI5</ui5-li>
+</ui5-multi-combobox>
+
+<ui5-multi-combobox readonly value="Readonly combo">
+	<ui5-li selected>UI5</ui5-li>
+</ui5-multi-combobox>
+
+<ui5-multi-combobox disabled value="Disabled combo">
+	<ui5-li selected>UI5</ui5-li>
+</ui5-multi-combobox>
+
+
+ +
+

MultiComboBox with items

+
+ + Argentina + Bulgaria + Denmark + England + Albania + Morocco + Portugal + Germany + Philippines + Paraguay + +
+

+<ui5-multi-combobox placeholder="Choose your countries">
+	<ui5-li selected>Argentina</ui5-li>
+	<ui5-li>Bulgaria</ui5-li>
+	<ui5-li>Denmark</ui5-li>
+	<ui5-li>England</ui5-li>
+	<ui5-li>Albania</ui5-li>
+	<ui5-li>Morocco</ui5-li>
+	<ui5-li>Portugal</ui5-li>
+	<ui5-li>Germany</ui5-li>
+	<ui5-li>Philippines</ui5-li>
+	<ui5-li>Paraguay</ui5-li>
+</ui5-multi-combobox>
+
+
+ +
+

MultiComboBox with items and build-in user input validation

+
+ + Argentina + Bulgaria + Denmark + England + Albania + Morocco + Portugal + Germany + Philippines + Paraguay + +
+
+

+<ui5-multi-combobox validate-input placeholder="Choose your countries">
+	<ui5-li>Argentina</ui5-li>
+	<ui5-li selected>Bulgaria</ui5-li>
+	<ui5-li>Denmark</ui5-li>
+	<ui5-li selected>England</ui5-li>
+	<ui5-li>Albania</ui5-li>
+	<ui5-li>Morocco</ui5-li>
+	<ui5-li>Portugal</ui5-li>
+	<ui5-li selected>Germany</ui5-li>
+	<ui5-li>Philippines</ui5-li>
+	<ui5-li>Paraguay</ui5-li>
+</ui5-multi-combobox>
+
+
+ +
+

MultiComboBox with Value State

+
+ + Hello + UI5 + Web Components + + + Hello + UI5 + Web Components + + + Hello + UI5 + Web Components + +
+ 

+<ui5-multi-combobox value="Success" value-state="Success">
+	<ui5-li>Hello</ui5-li>
+	<ui5-li>UI5</ui5-li>
+	<ui5-li>Web Components</ui5-li>
+</ui5-multi-combobox>
+
+<ui5-multi-combobox value="Warning" value-state="Warning">
+	<ui5-li>Hello</ui5-li>
+	<ui5-li>UI5</ui5-li>
+	<ui5-li>Web Components</ui5-li>
+</ui5-multi-combobox>
+
+<ui5-multi-combobox value="Error" value-state="Error">
+	<ui5-li>Hello</ui5-li>
+	<ui5-li>UI5</ui5-li>
+	<ui5-li>Web Components</ui5-li>
+</ui5-multi-combobox>
+
+
+ + + + + + + + From 15d2ec23366ecf106aeed5f77dbecb5718239165 Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Tue, 21 May 2019 10:19:49 +0300 Subject: [PATCH 11/14] adopt slot simplification change --- packages/main/src/Input.hbs | 2 +- packages/main/src/MultiComboBox.hbs | 10 +++++----- packages/main/src/Token.hbs | 2 +- packages/main/src/Token.js | 17 +++++++++++++++-- packages/main/src/Tokenizer.hbs | 2 +- packages/main/src/Tokenizer.js | 1 + 6 files changed, 24 insertions(+), 10 deletions(-) diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs index 5938cb22aa57..5228a909c696 100644 --- a/packages/main/src/Input.hbs +++ b/packages/main/src/Input.hbs @@ -8,7 +8,7 @@ class="{{classes.wrapper}}" > {{#if ctr._beginContent}} - + {{/if}} - {{#each ctr.items}} {{#if this.selected}} - {{this._nodeText}} + {{this.textContent}} {{/if}} {{/each}} {{#unless ctr.readonly}} @@ -44,7 +44,7 @@ @ui5-selectionChange={{ctr._selectedItemsSelectionChange}}> {{#each ctr.items}} {{#if this.selected}} - {{this._nodeText}} + {{this.textContent}} {{/if}} {{/each}} @@ -62,7 +62,7 @@ @ui5-afterOpen={{ctr._afterAllPopoverOpen}}> {{#each ctr._filteredItems}} - {{this._nodeText}} + {{this.textContent}} {{/each}} diff --git a/packages/main/src/Token.hbs b/packages/main/src/Token.hbs index 4c70d82b7f1e..098ae88eee90 100644 --- a/packages/main/src/Token.hbs +++ b/packages/main/src/Token.hbs @@ -1,5 +1,5 @@
- {{ctr._nodeText}} + {{#unless ctr.readonly}} diff --git a/packages/main/src/Token.js b/packages/main/src/Token.js index 697431fcbe4f..0adb22408a3a 100644 --- a/packages/main/src/Token.js +++ b/packages/main/src/Token.js @@ -23,9 +23,22 @@ import "./ThemePropertiesProvider.js"; */ const metadata = { tag: "ui5-token", - defaultSlot: "description", + defaultSlot: "text", usesNodeText: true, - slots: /** @lends sap.ui.webcomponents.main.Token.prototype */ {}, + slots: /** @lends sap.ui.webcomponents.main.Token.prototype */ { + /** + * Defines the text of the ui5-token. + *
Note: Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. + * + * @type {Node[]} + * @slot + * @public + */ + text: { + type: Node, + multiple: true, + }, + }, properties: /** @lends sap.ui.webcomponents.main.Token.prototype */ { /** diff --git a/packages/main/src/Tokenizer.hbs b/packages/main/src/Tokenizer.hbs index b6895cd5ac21..ff2775b0fc6a 100644 --- a/packages/main/src/Tokenizer.hbs +++ b/packages/main/src/Tokenizer.hbs @@ -5,7 +5,7 @@
{{#each ctr.tokens}}
- +
{{/each}}
diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js index 2a41188b05ff..12bc6abbe048 100644 --- a/packages/main/src/Tokenizer.js +++ b/packages/main/src/Tokenizer.js @@ -23,6 +23,7 @@ const metadata = { tokens: { type: HTMLElement, multiple: true, + individualSlots: true, }, }, defaultSlot: "tokens", From bd4bc58339f7aa1142a7c01710c619e1c955c0f3 Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Tue, 21 May 2019 10:40:18 +0300 Subject: [PATCH 12/14] adjust slot slot selector in tests --- packages/main/test/specs/MultiComboBox.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js index e84763f7e218..af45484ec500 100644 --- a/packages/main/test/specs/MultiComboBox.spec.js +++ b/packages/main/test/specs/MultiComboBox.spec.js @@ -9,7 +9,7 @@ describe("MultiComboBox general interaction", () => { const icon = browser.findElementDeep("#mcb >>> #ui5-multi-combobox--input ui5-icon"); const popover = browser.findElementDeep("#mcb >>> .ui5-multi-combobox-all-items--popover"); const firstItem = browser.findElementDeep("#first-item"); - const firstItemCheckbox = browser.findElementDeep("#mcb >>> .ui5-multi-combobox-all-items--popover ui5-li[slot=items-1] >>> ui5-checkbox"); + const firstItemCheckbox = browser.findElementDeep("#mcb >>> .ui5-multi-combobox-all-items-list > ui5-li >>> ui5-checkbox"); const eventInput = $("#events-input"); const paramsInput = $("#events-parameters"); const callCountInput = $("#events-call-count"); From c814b3e7241d0b43377aa2acf692db512c8abded Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Tue, 21 May 2019 16:38:38 +0300 Subject: [PATCH 13/14] add some more documentation --- packages/main/src/MultiComboBox.js | 32 ++++++++++++++++++++++++------ packages/main/src/Token.js | 8 +++----- packages/main/src/Tokenizer.js | 4 ++-- 3 files changed, 31 insertions(+), 13 deletions(-) diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js index 844eeddd38c5..0e606860b4a7 100644 --- a/packages/main/src/MultiComboBox.js +++ b/packages/main/src/MultiComboBox.js @@ -53,11 +53,12 @@ const metadata = { * Note: The property is updated upon typing. * * @type {string} + * @defaultvalue "" * @public */ value: { - defaultValue: "", type: String, + defaultValue: "", }, /** @@ -66,17 +67,19 @@ const metadata = { *

* Note: The placeholder is not supported in IE. If the placeholder is provided, it won`t be displayed in IE. * @type {string} + * @defaultvalue "" * @public */ placeholder: { - defaultValue: null, type: String, + defaultValue: "", }, /** * Defines if the user input will be prevented if no matching item has been found * * @type {boolean} + * @defaultvalue false * @public */ validateInput: { @@ -86,9 +89,10 @@ const metadata = { /** * Defines whether ui5-multi-combobox is in disabled state. *

- * Note: A disabled ui5-input is completely uninteractive. + * Note: A disabled ui5-multi-combobox is completely uninteractive. * * @type {boolean} + * @defaultvalue false * @public */ disabled: { @@ -100,6 +104,7 @@ const metadata = { * Available options are: None, Success, Warning, and Error. * * @type {string} + * @defaultvalue "None" * @public */ valueState: { @@ -114,6 +119,7 @@ const metadata = { * but still provides visual feedback upon user interaction. * * @type {boolean} + * @defaultvalue false * @public */ readonly: { @@ -172,14 +178,28 @@ const metadata = { * *

Overview

* - * An entry posted on the timeline. + * The ui5-multi-combobox component provides a list box with items and a text field allowing the user to either type a value directly into the control or choose from the list of existing items. + * + * A drop-down list for selecting and filtering values. + *

Description

+ * The ui5-multi-combobox component is commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow of available options. + * The select options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens. + *

Structure

+ * The ui5-multi-combobox consists of the following elements: + *
    + *
  • Tokenizer - a list of tokens with selected options. + *
  • Input field - displays the selected option/s as token/s. Users can type to filter the list. + *
  • Drop-down arrow - expands\collapses the option list.
    • + *
  • Option list - the list of available options.
    • + *
* * @constructor * @author SAP SE * @alias sap.ui.webcomponents.main.MultiComboBox * @extends UI5Element - * @tagname ui5-timeline + * @tagname ui5-multi-combobox * @public + * @since 0.11.0 */ class MultiComboBox extends UI5Element { static get metadata() { @@ -254,7 +274,7 @@ class MultiComboBox extends UI5Element { const input = event.target; const value = input.value; const filteredItems = this._filterItems(value); - const oldValueState = input.valueState; + const oldValueState = this.valueState; if (!filteredItems.length && value && this.validateInput) { input.value = this._inputLastValue; diff --git a/packages/main/src/Token.js b/packages/main/src/Token.js index 0adb22408a3a..8d06ad853a11 100644 --- a/packages/main/src/Token.js +++ b/packages/main/src/Token.js @@ -98,13 +98,13 @@ const metadata = { * *

Overview

* - * An entry posted on the timeline. + * Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. * * @constructor * @author SAP SE * @alias sap.ui.webcomponents.main.Token * @extends UI5Element - * @tagname ui5-timeline + * @tagname ui5-token * @usestextcontent * @private */ @@ -164,9 +164,7 @@ class Token extends UI5Element { } static async define(...params) { - await Promise.all([ - Icon.define(), - ]); + await Icon.define(); super.define(...params); } diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js index 12bc6abbe048..d633149121f7 100644 --- a/packages/main/src/Tokenizer.js +++ b/packages/main/src/Tokenizer.js @@ -56,13 +56,13 @@ const metadata = { * *

Overview

* - * An entry posted on the timeline. + * A container for tokens. * * @constructor * @author SAP SE * @alias sap.ui.webcomponents.main.Tokenizer * @extends UI5Element - * @tagname ui5-timeline + * @tagname ui5-tokenizer * @usestextcontent * @private */ From 7d6a24af2c44e21d0fba5d0934fcb4d4ae72d8ac Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Tue, 21 May 2019 16:42:36 +0300 Subject: [PATCH 14/14] fix eslint --- packages/main/src/MultiComboBox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js index 0e606860b4a7..65a8e9431d2e 100644 --- a/packages/main/src/MultiComboBox.js +++ b/packages/main/src/MultiComboBox.js @@ -179,7 +179,7 @@ const metadata = { *

Overview

* * The ui5-multi-combobox component provides a list box with items and a text field allowing the user to either type a value directly into the control or choose from the list of existing items. - * + * * A drop-down list for selecting and filtering values. *

Description

* The ui5-multi-combobox component is commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow of available options.