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/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..170dbfb0a3b9 100644 --- a/packages/base/src/events/PseudoEvents.js +++ b/packages/base/src/events/PseudoEvents.js @@ -22,6 +22,18 @@ 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 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. @@ -40,4 +52,7 @@ export { isEscape, isTabNext, isTabPrevious, + isBackSpace, + isDelete, + isShow, }; 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, 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/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/Input.hbs b/packages/main/src/Input.hbs index 0e50d5c3da59..5228a909c696 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.textContent}} + {{/if}} + {{/each}} + + + {{#unless ctr.readonly}} + + {{/unless}} + + + + + {{#each ctr.items}} + {{#if this.selected}} + {{this.textContent}} + {{/if}} + {{/each}} + + + + + + {{#each ctr._filteredItems}} + {{this.textContent}} + {{/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..65a8e9431d2e --- /dev/null +++ b/packages/main/src/MultiComboBox.js @@ -0,0 +1,423 @@ +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 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"; + +// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally) +import "./ThemePropertiesProvider.js"; + +/** + * @public + */ +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, + 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} + * @defaultvalue "" + * @public + */ + value: { + type: String, + defaultValue: "", + }, + + /** + * 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} + * @defaultvalue "" + * @public + */ + placeholder: { + type: String, + defaultValue: "", + }, + + /** + * Defines if the user input will be prevented if no matching item has been found + * + * @type {boolean} + * @defaultvalue false + * @public + */ + validateInput: { + type: Boolean, + }, + + /** + * Defines whether ui5-multi-combobox is in disabled state. + *

+ * Note: A disabled ui5-multi-combobox is completely uninteractive. + * + * @type {boolean} + * @defaultvalue false + * @public + */ + disabled: { + type: Boolean, + }, + + /** + * Defines the value state of the ui5-multi-combobox. + * Available options are: None, Success, Warning, and Error. + * + * @type {string} + * @defaultvalue "None" + * @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} + * @defaultvalue false + * @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 }, + _keydown: { 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. + * + * @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

+ * + * 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: + * + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.MultiComboBox + * @extends UI5Element + * @tagname ui5-multi-combobox + * @public + * @since 0.11.0 + */ +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", + classes: { + icon: { + [`ui5-multi-combobox-icon-pressed`]: state._iconPressed, + [`ui5-multi-combobox--icon`]: true, + }, + }, + }; + }; + } + + 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._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(); + }; + + this._afterAllPopoverOpen = () => { + this._toggleIcon(); + }; + + this._keydown = this._handleKeyDown.bind(this); + } + + _handleInputLiveChange(event) { + const input = event.target; + const value = input.value; + const filteredItems = this._filterItems(value); + const oldValueState = this.valueState; + + if (!filteredItems.length && value && this.validateInput) { + input.value = this._inputLastValue; + input.valueState = "Error"; + + setTimeout(() => { + input.valueState = oldValueState; + }, 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"); + } + + _handleTokenDelete(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.fireEvent("selectionChange", { items: this._getSelectedItems() }); + } + + _handleTokenizerFocusOut() { + const tokenizer = this.shadowRoot.querySelector("ui5-tokenizer"); + const tokensCount = tokenizer.tokens.length - 1; + + tokenizer.tokens.forEach(token => { token.selected = false; }); + + 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) { + 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) { + return this.items.filter(item => { + return item.textContent && item.textContent.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 && 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([ + Input.define(), + Tokenizer.define(), + Token.define(), + Icon.define(), + Popover.define(), + List.define(), + StandardListItem.define(), + ]); + + 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..098ae88eee90 --- /dev/null +++ b/packages/main/src/Token.hbs @@ -0,0 +1,7 @@ +
+ + + {{#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..8d06ad853a11 --- /dev/null +++ b/packages/main/src/Token.js @@ -0,0 +1,177 @@ +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.js"; +import { + isBackSpace, + isEnter, + 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 +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"; + +/** + * @public + */ +const metadata = { + tag: "ui5-token", + defaultSlot: "text", + usesNodeText: true, + 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 */ { + + /** + * 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 }, + + _delete: { type: Function }, + _select: { type: Function }, + _keydown: { type: Function }, + _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: {}, + }, +}; + +/** + * @class + * + *

Overview

+ * + * 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-token + * @usestextcontent + * @private + */ +class Token extends UI5Element { + static get metadata() { + return metadata; + } + + static get renderer() { + return TokenRenderer; + } + + static get calculateTemplateContext() { + return state => { + return { + ctr: state, + iconURI: getTheme() === "sap_fiori_3" ? "sap-icon://decline" : "sap-icon://sys-cancel", + }; + }; + } + + static get styles() { + return styles; + } + + constructor() { + super(); + 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 Icon.define(); + + 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..ff2775b0fc6a --- /dev/null +++ b/packages/main/src/Tokenizer.hbs @@ -0,0 +1,16 @@ +
+
+
+
+
+ {{#each ctr.tokens}} +
+ +
+ {{/each}} +
+ + {{#if showNMore}} + {{ctr._nMoreText}} + {{/if}} +
diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js new file mode 100644 index 000000000000..d633149121f7 --- /dev/null +++ b/packages/main/src/Tokenizer.js @@ -0,0 +1,214 @@ +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 { fetchResourceBundle, getResourceBundle } from "./ResourceBundleProvider.js"; +import TokenizerRenderer from "./build/compiled/TokenizerRenderer.lit.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 TokenizerTemplateContext from "./TokenizerTemplateContext.js"; + +/** + * @public + */ +const metadata = { + tag: "ui5-tokenizer", + slots: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ { + tokens: { + type: HTMLElement, + multiple: true, + individualSlots: true, + }, + }, + defaultSlot: "tokens", + properties: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ { + showMore: { type: Boolean }, + disabled: { type: Boolean }, + + _nMoreText: { type: String }, + _openOverflowPopover: { type: Function }, + _tokenDelete: { 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

+ * + * A container for tokens. + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.Tokenizer + * @extends UI5Element + * @tagname ui5-tokenizer + * @usestextcontent + * @private + */ +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._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(); + }; + + this._delegates.push(this._itemNav); + this.resourceBundle = getResourceBundle("@ui5/webcomponents"); + } + + onBeforeRendering() { + this._itemNav.init(); + + if (this._lastTokenCount !== this.tokens.length) { + this._recalculateLayouting = true; + } + + this._lastTokenCount = this.tokens.length; + this._nMoreText = this.resourceBundle.getText("MULTIINPUT_SHOW_MORE_TOKENS", [this._hiddenTokens.length]); + } + + onAfterRendering() { + if (this._recalculateLayouting) { + this._handleResize(); + this._recalculateLayouting = false; + } + } + + onEnterDOM() { + ResizeHandler.register(this.shadowRoot.querySelector(".ui5-tokenizer--content"), this._resizeHandler); + } + + onExitDOM() { + 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) { + const firstToken = this.shadowRoot.querySelector(".ui5-tokenizer-token-placeholder"); + + if (!firstToken) { + return []; + } + + const firstTokenTop = firstToken.getBoundingClientRect().top; + const tokens = []; + + if (firstToken && this.tokens.length) { + 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; + } + + _handleTokenDelete(event) { + if (event.detail && event.detail.backSpace) { + this._deleteByBackspace(); + } + + this._updateAndFocus(); + this.fireEvent("tokenDelete", { ref: event.target }); + } + + /* 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 fetchResourceBundle("@ui5/webcomponents"); + 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..027a219f11b6 --- /dev/null +++ b/packages/main/src/TokenizerTemplateContext.js @@ -0,0 +1,23 @@ +class TokenizerTemplateContext { + static calculate(state) { + const context = { + ctr: state, + showNMore: state.showMore && state._hiddenTokens.length, + classes: { + wrapper: { + "ui5-tokenizer-nmore--wrapper": state.showMore, + "ui5-tokenizer--wrapper": true, + "ui5-tokenizer-no-padding": !state.tokens.length, + }, + content: { + "ui5-tokenizer--content": true, + "ui5-tokenizer-nmore--content": state.showMore, + }, + }, + }; + + return context; + } +} + +export default TokenizerTemplateContext; 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/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/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/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css new file mode 100644 index 000000000000..160681c9c2c7 --- /dev/null +++ b/packages/main/src/themes/MultiComboBox.css @@ -0,0 +1,62 @@ +:host(ui5-multi-combobox) { + display: inline-block; + width: 100%; + + --_ui5_popover_content_padding: 0; +} + +ui5-multi-combobox { + display: inline-block; + width: 100%; +} + +.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; + width: 2.375rem; +} + +.ui5-multi-combobox--icon[data-ui5-compact-size] { + width: 2rem; +} + +.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); +} + +.ui5-multi-combobox--token { + height: 80%; +} + +span.sapUiSizeCompact .ui5-multi-combobox--token { + height: 100%; +} + +.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 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/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 new file mode 100644 index 000000000000..f822b34ede1c --- /dev/null +++ b/packages/main/src/themes/Token.css @@ -0,0 +1,138 @@ +:host(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: 1.625rem; + box-sizing: border-box; +} + +: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(--_ui5_token_hover_border_color); +} + +: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); +} + +:host(ui5-token[readonly]) .ui5-token--wrapper { + padding-right: 0.375rem; +} + +:host(ui5-token[selected]) .ui5-token--wrapper:focus { + 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; + cursor: pointer; + width: 1rem; + height: 1rem; + color: var(--_ui5_token_icon_color); +} + +.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; + font-size: var(--sapMFontMediumSize); + font-family: var(--sapUiFontFamily); + user-select: none; +} + +.ui5-token--wrapper:focus { + outline-offset: -2px; + outline: 1px dotted var(--sapUiContentFocusColor); +} + +.ui5-token--text { + white-space: nowrap; +} diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css new file mode 100644 index 000000000000..f2bbce314545 --- /dev/null +++ b/packages/main/src/themes/Tokenizer.css @@ -0,0 +1,73 @@ +:host(ui5-tokenizer) { + display: inline-block; + box-sizing: border-box; + border: 1px solid black; + height: 2.25rem; +} + +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; +} + +.ui5-tokenizer--wrapper { + height: 100%; + display: flex; + align-items: center; + padding: 0.1875rem; + overflow-x: scroll; + box-sizing: border-box; + font-family: var(--sapUiFontFamily); +} + +.ui5-tokenizer-no-padding { + padding: 0; +} + +.ui5-tokenizer--wrapper.ui5-tokenizer-nmore--wrapper { + overflow-x: hidden; +} + +.ui5-tokenizer--token--wrapper { + display: inline-flex; + align-items: center; + box-sizing: border-box; + height: 100%; +} + +.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); +} + +.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/src/themes/base/Input-parameters.css b/packages/main/src/themes/base/Input-parameters.css index 358e17a33cfe..3c5d6adbaf80 100644 --- a/packages/main/src/themes/base/Input-parameters.css +++ b/packages/main/src/themes/base/Input-parameters.css @@ -11,7 +11,8 @@ --_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; + --sap_wc_input_compact_min_width: 2rem; } \ 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/src/themes/base/Token-parameters.css b/packages/main/src/themes/base/Token-parameters.css new file mode 100644 index 000000000000..019caf8a22f3 --- /dev/null +++ b/packages/main/src/themes/base/Token-parameters.css @@ -0,0 +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/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 d337256da935..318e2a437bdf 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -25,3 +25,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_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 1193800ce598..a99d30421bfa 100644 --- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize_hcb/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/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 e3b4b3fd389d..a60a9effa782 100644 --- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css @@ -24,3 +24,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/MultiComboBox.html b/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html new file mode 100644 index 000000000000..e453d55988f2 --- /dev/null +++ b/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html @@ -0,0 +1,248 @@ + + + + + + + + MultiComboBox test page + + + + + + + + + + + + + + + + + + +
+ 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: + + +
+
+ + +
+ + + + + + + \ 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 67adaae87c36..c0c70c0a99a4 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 + + + + + + + + + + + + + + + + +
+

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>
+
+
+ + + + + + + + diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js new file mode 100644 index 000000000000..af45484ec500 --- /dev/null +++ b/packages/main/test/specs/MultiComboBox.spec.js @@ -0,0 +1,95 @@ +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-list > ui5-li >>> 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-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 nMoreText = browser.findElementDeep("#more-mcb >>> ui5-tokenizer >>> .ui5-tokenizer-more-text"); + + assert.ok(nMoreText.getText(), "1 More", "token 1 should be visible"); + }); + }); +});