@openui5/sap.ui.webc.main 1.115.0 → 1.116.0

package/src/sap/ui/webc/main/thirdparty/Tokenizer.js

@@ -1,11 +1,15 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation", "sap/ui/webc/common/thirdparty/base/delegate/ScrollEnablement", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/webc/common/thirdparty/base/types/ValueState", "./ResponsivePopover", "./List", "./Title", "./Button", "./StandardListItem", "./generated/templates/TokenizerTemplate.lit", "./generated/templates/TokenizerPopoverTemplate.lit", "./generated/i18n/i18n-defaults", "./generated/themes/Tokenizer.css", "./generated/themes/TokenizerPopover.css", "./generated/themes/ResponsivePopoverCommon.css", "./generated/themes/ValueStateMessage.css", "./generated/themes/Suggestions.css"], function (_exports, _UI5Element, _LitRenderer, _ResizeHandler, _ItemNavigation, _ScrollEnablement, _Integer, _i18nBundle, _Keys, _Device, _ValueState, _ResponsivePopover, _List, _Title, _Button, _StandardListItem, _TokenizerTemplate, _TokenizerPopoverTemplate, _i18nDefaults, _Tokenizer, _TokenizerPopover, _ResponsivePopoverCommon, _ValueStateMessage, _Suggestions) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation", "sap/ui/webc/common/thirdparty/base/delegate/ScrollEnablement", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/webc/common/thirdparty/base/types/ValueState", "./ResponsivePopover", "./List", "./Title", "./Button", "./StandardListItem", "./generated/templates/TokenizerTemplate.lit", "./generated/templates/TokenizerPopoverTemplate.lit", "./generated/i18n/i18n-defaults", "./generated/themes/Tokenizer.css", "./generated/themes/TokenizerPopover.css", "./generated/themes/ResponsivePopoverCommon.css", "./generated/themes/ValueStateMessage.css", "./generated/themes/Suggestions.css"], function (_exports, _UI5Element, _property, _slot, _event, _customElement, _LitRenderer, _ResizeHandler, _ItemNavigation, _ScrollEnablement, _Integer, _i18nBundle, _Keys, _Device, _ValueState, _ResponsivePopover, _List, _Title, _Button, _StandardListItem, _TokenizerTemplate, _TokenizerPopoverTemplate, _i18nDefaults, _Tokenizer, _TokenizerPopover, _ResponsivePopoverCommon, _ValueStateMessage, _Suggestions) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
     value: true
   });
-  _exports.default = void 0;
+  _exports.default = _exports.ClipboardDataOperation = void 0;
   _UI5Element = _interopRequireDefault(_UI5Element);
+  _property = _interopRequireDefault(_property);
+  _slot = _interopRequireDefault(_slot);
+  _event = _interopRequireDefault(_event);
+  _customElement = _interopRequireDefault(_customElement);
   _LitRenderer = _interopRequireDefault(_LitRenderer);
   _ResizeHandler = _interopRequireDefault(_ResizeHandler);
   _ItemNavigation = _interopRequireDefault(_ItemNavigation);
@@ -25,82 +29,20 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   _ValueStateMessage = _interopRequireDefault(_ValueStateMessage);
   _Suggestions = _interopRequireDefault(_Suggestions);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-  // Styles
-
-  // reuse suggestions focus styling for NMore popup
-
-  /**
-   * @public
-   */
-  const metadata = {
-    tag: "ui5-tokenizer",
-    languageAware: true,
-    managedSlots: true,
-    slots: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */{
-      "default": {
-        propertyName: "tokens",
-        type: HTMLElement,
-        individualSlots: true
-      },
-      "valueStateMessage": {
-        propertyName: "valueStateMessage",
-        type: HTMLElement
-      }
-    },
-    properties: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */{
-      showMore: {
-        type: Boolean
-      },
-      disabled: {
-        type: Boolean
-      },
-      /**
-       * Indicates if the tokenizer should show all tokens or n more label instead
-       *
-       * @private
-       */
-      expanded: {
-        type: Boolean
-      },
-      morePopoverOpener: {
-        type: Object
-      },
-      popoverMinWidth: {
-        type: _Integer.default
-      },
-      /**
-       * Indicates the value state of the related input component.
-       *
-       * @type {ValueState}
-       * @defaultvalue "None"
-       * @private
-       */
-      valueState: {
-        type: _ValueState.default,
-        defaultValue: _ValueState.default.None
-      },
-      _nMoreCount: {
-        type: _Integer.default
-      }
-    },
-    events: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */{
-      "token-delete": {
-        detail: {
-          ref: {
-            type: HTMLElement
-          }
-        }
-      },
-      "show-more-items-press": {
-        detail: {
-          ref: {
-            type: HTMLElement
-          }
-        }
-      }
-    }
+  var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
-
+  var Tokenizer_1;
+  var ClipboardDataOperation;
+  _exports.ClipboardDataOperation = ClipboardDataOperation;
+  (function (ClipboardDataOperation) {
+    ClipboardDataOperation["cut"] = "cut";
+    ClipboardDataOperation["copy"] = "copy";
+  })(ClipboardDataOperation || (_exports.ClipboardDataOperation = ClipboardDataOperation = {}));
   /**
    * @class
    *
@@ -110,31 +52,13 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    *
    * @constructor
    * @author SAP SE
-   * @alias sap.ui.webcomponents.main.Tokenizer
-   * @extends UI5Element
+   * @alias sap.ui.webc.main.Tokenizer
+   * @extends sap.ui.webc.base.UI5Element
    * @tagname ui5-tokenizer
    * @usestextcontent
    * @private
    */
-  class Tokenizer extends _UI5Element.default {
-    static get metadata() {
-      return metadata;
-    }
-    static get render() {
-      return _LitRenderer.default;
-    }
-    static get template() {
-      return _TokenizerTemplate.default;
-    }
-    static get styles() {
-      return _Tokenizer.default;
-    }
-    static get staticAreaStyles() {
-      return [_ResponsivePopoverCommon.default, _ValueStateMessage.default, _Suggestions.default, _TokenizerPopover.default];
-    }
-    static get staticAreaTemplate() {
-      return _TokenizerPopoverTemplate.default;
-    }
+  let Tokenizer = Tokenizer_1 = class Tokenizer extends _UI5Element.default {
     _handleResize() {
       this._nMoreCount = this.overflownTokens.length;
     }
@@ -142,23 +66,19 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       super();
       this._resizeHandler = this._handleResize.bind(this);
       this._itemNav = new _ItemNavigation.default(this, {
-        currentIndex: "-1",
+        currentIndex: -1,
         getItemsCallback: this._getVisibleTokens.bind(this)
       });
       this._scrollEnablement = new _ScrollEnablement.default(this);
     }
-    async onBeforeRendering() {
-      if (this.showPopover && !this._getTokens().length) {
-        const popover = await this.getPopover();
-        popover.close();
-      }
+    onBeforeRendering() {
       this._nMoreCount = this.overflownTokens.length;
     }
     onEnterDOM() {
-      _ResizeHandler.default.register(this.shadowRoot.querySelector(".ui5-tokenizer--content"), this._resizeHandler);
+      _ResizeHandler.default.register(this.contentDom, this._resizeHandler);
     }
     onExitDOM() {
-      _ResizeHandler.default.deregister(this.shadowRoot.querySelector(".ui5-tokenizer--content"), this._resizeHandler);
+      _ResizeHandler.default.deregister(this.contentDom, this._resizeHandler);
     }
     async _openOverflowPopover() {
       if (this.showPopover) {
@@ -174,7 +94,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return this.getSlottedNodes("tokens");
     }
     get showPopover() {
-      return Object.keys(this.morePopoverOpener).length;
+      return !!Object.keys(this.morePopoverOpener).length;
     }
     _getVisibleTokens() {
       if (this.disabled) {
@@ -184,88 +104,129 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         return index < this._tokens.length - this._nMoreCount;
       });
     }
-    onAfterRendering() {
-      this._scrollEnablement.scrollContainer = this.expanded ? this.contentDom : this;
+    async onAfterRendering() {
+      if (this.showPopover && !this._getTokens().length) {
+        const popover = await this.getPopover();
+        popover.close();
+      }
+      this._scrollEnablement.scrollContainer = this.expanded || !this.narrowContentDom ? this.expandedContentDom : this.narrowContentDom;
+      if (this.expanded) {
+        this._expandedScrollWidth = this.expandedContentDom.scrollWidth;
+        this.scrollToEnd();
+      }
+      if (!this.expanded) {
+        this.scrollToStart();
+      }
     }
-    _delete(event) {
+    _delete(e) {
+      const target = e.target;
+      if (!e.detail) {
+        // if there are no details, the event is triggered by a click
+        this._tokenClickDelete(e, target);
+        return;
+      }
       if (this._selectedTokens.length) {
-        this._selectedTokens.forEach(token => this._tokenDelete(event, token));
+        this._selectedTokens.forEach(token => this.deleteToken(token, e.detail.backSpace));
       } else {
-        this._tokenDelete(event);
+        this.deleteToken(target, e.detail.backSpace);
       }
     }
-    _tokenDelete(event, token) {
-      let nextTokenIndex; // The index of the next token that needs to be focused next due to the deletion
-
+    _tokenClickDelete(e, token) {
       const tokens = this._getVisibleTokens();
-      const deletedTokenIndex = token ? tokens.indexOf(token) : tokens.indexOf(event.target); // The index of the token that just got deleted
+      const target = e.target;
+      const deletedTokenIndex = token ? tokens.indexOf(token) : tokens.indexOf(target); // The index of the token that just got deleted
+      const nextTokenIndex = deletedTokenIndex === tokens.length - 1 ? deletedTokenIndex - 1 : deletedTokenIndex + 1; // The index of the next token that needs to be focused next due to the deletion
+      const nextToken = tokens[nextTokenIndex]; // if the last item was deleted this will be undefined
+      this._handleCurrentItemAfterDeletion(nextToken);
+      this.fireEvent("token-delete", {
+        ref: token || target
+      });
+    }
+    _handleCurrentItemAfterDeletion(nextToken) {
+      if (nextToken && !(0, _Device.isPhone)()) {
+        this._itemNav.setCurrentItem(nextToken); // update the item navigation with the new token or undefined, if the last was deleted
+        setTimeout(() => {
+          nextToken.focus();
+        }, 0);
+      }
+    }
+    /**
+     * Removes a token from the Tokenizer.
+     * This method should only be used by ui5-multi-combobox and ui5-multi-input
+     *
+     * @protected
+     * @param token Token to be focused.
+     * @param forwardFocusToPrevious Indicates whether the focus will be forwarded to previous or next token after deletion.
+     */
+    deleteToken(token, forwardFocusToPrevious) {
+      const tokens = this._getVisibleTokens();
+      const deletedTokenIndex = tokens.indexOf(token);
+      let nextTokenIndex = deletedTokenIndex === tokens.length - 1 ? deletedTokenIndex - 1 : deletedTokenIndex + 1;
       const notSelectedTokens = tokens.filter(t => !t.selected);
-      if (event.detail && event.detail.backSpace) {
+      if (forwardFocusToPrevious) {
         // on backspace key select the previous item (unless deleting the first)
         nextTokenIndex = deletedTokenIndex === 0 ? deletedTokenIndex + 1 : deletedTokenIndex - 1;
       } else {
         // on delete key or mouse click on the "x" select the next item (unless deleting the last)
         nextTokenIndex = deletedTokenIndex === tokens.length - 1 ? deletedTokenIndex - 1 : deletedTokenIndex + 1;
       }
-      let nextToken = tokens[nextTokenIndex]; // if the last item was deleted this will be undefined
-
+      let nextToken = tokens[nextTokenIndex];
       if (notSelectedTokens.length > 1) {
         while (nextToken && nextToken.selected) {
-          nextToken = event.detail.backSpace ? tokens[--nextTokenIndex] : tokens[++nextTokenIndex];
+          nextToken = forwardFocusToPrevious ? tokens[--nextTokenIndex] : tokens[++nextTokenIndex];
         }
       } else {
         nextToken = notSelectedTokens[0];
       }
-      if (nextToken && !(0, _Device.isPhone)()) {
-        this._itemNav.setCurrentItem(nextToken); // update the item navigation with the new token or undefined, if the last was deleted
-
-        setTimeout(() => {
-          nextToken.focus();
-        }, 0);
-      }
+      this._handleCurrentItemAfterDeletion(nextToken);
       this.fireEvent("token-delete", {
-        ref: token || event.target
+        ref: token
       });
     }
-    itemDelete(event) {
-      const token = event.detail.item.tokenRef;
+    itemDelete(e) {
+      const token = e.detail.item.tokenRef;
       this.fireEvent("token-delete", {
         ref: token
       });
     }
-    _onkeydown(event) {
-      if ((0, _Keys.isSpaceShift)(event)) {
-        event.preventDefault();
+    _onkeydown(e) {
+      if ((0, _Keys.isSpaceShift)(e)) {
+        e.preventDefault();
       }
-      if ((0, _Keys.isSpace)(event) || (0, _Keys.isSpaceCtrl)(event)) {
-        event.preventDefault();
-        return this._handleTokenSelection(event, false);
+      if ((0, _Keys.isSpace)(e) || (0, _Keys.isSpaceCtrl)(e)) {
+        e.preventDefault();
+        return this._handleTokenSelection(e, false);
       }
-      if ((0, _Keys.isHomeShift)(event)) {
-        this._handleHomeShift(event);
+      if ((0, _Keys.isHomeShift)(e)) {
+        this._handleHomeShift(e);
       }
-      if ((0, _Keys.isEndShift)(event)) {
-        this._handleEndShift(event);
+      if ((0, _Keys.isEndShift)(e)) {
+        this._handleEndShift(e);
       }
-      this._handleItemNavigation(event, this._tokens);
+      this._handleItemNavigation(e, this._tokens);
     }
-    _handleItemNavigation(event, tokens) {
-      const isCtrl = !!(event.metaKey || event.ctrlKey);
-      if ((0, _Keys.isLeftCtrl)(event) || (0, _Keys.isRightCtrl)(event) || (0, _Keys.isDownCtrl)(event) || (0, _Keys.isUpCtrl)(event)) {
-        return this._handleArrowCtrl(event, event.target, tokens, (0, _Keys.isRightCtrl)(event) || (0, _Keys.isDownCtrl)(event));
+    _handleItemNavigation(e, tokens) {
+      const isCtrl = !!(e.metaKey || e.ctrlKey);
+      const target = e.target;
+      if ((0, _Keys.isLeftCtrl)(e) || (0, _Keys.isRightCtrl)(e) || (0, _Keys.isDownCtrl)(e) || (0, _Keys.isUpCtrl)(e)) {
+        return this._handleArrowCtrl(e, target, tokens, (0, _Keys.isRightCtrl)(e) || (0, _Keys.isDownCtrl)(e));
       }
-      if ((0, _Keys.isLeftShift)(event) || (0, _Keys.isRightShift)(event) || (0, _Keys.isUpShift)(event) || (0, _Keys.isDownShift)(event) || (0, _Keys.isLeftShiftCtrl)(event) || (0, _Keys.isRightShiftCtrl)(event)) {
-        event.preventDefault();
-        return this._handleArrowShift(event.target, tokens, (0, _Keys.isRightShift)(event) || (0, _Keys.isRightShiftCtrl)(event) || (0, _Keys.isDownShift)(event));
+      if ((0, _Keys.isLeftShift)(e) || (0, _Keys.isRightShift)(e) || (0, _Keys.isUpShift)(e) || (0, _Keys.isDownShift)(e) || (0, _Keys.isLeftShiftCtrl)(e) || (0, _Keys.isRightShiftCtrl)(e)) {
+        e.preventDefault();
+        return this._handleArrowShift(target, tokens, (0, _Keys.isRightShift)(e) || (0, _Keys.isRightShiftCtrl)(e) || (0, _Keys.isDownShift)(e));
       }
-      if ((0, _Keys.isHome)(event) || (0, _Keys.isEnd)(event) || (0, _Keys.isHomeCtrl)(event) || (0, _Keys.isEndCtrl)(event)) {
-        event.preventDefault();
-        return this._handleHome(tokens, (0, _Keys.isEnd)(event) || (0, _Keys.isEndCtrl)(event));
+      if ((0, _Keys.isHome)(e) || (0, _Keys.isEnd)(e) || (0, _Keys.isHomeCtrl)(e) || (0, _Keys.isEndCtrl)(e)) {
+        e.preventDefault();
+        return this._handleHome(tokens, (0, _Keys.isEnd)(e) || (0, _Keys.isEndCtrl)(e));
       }
-      if (isCtrl && event.key.toLowerCase() === "a") {
-        event.preventDefault();
+      if (isCtrl && e.key.toLowerCase() === "a") {
+        e.preventDefault();
         return this._toggleTokenSelection(tokens);
       }
+      if ((0, _Keys.isLeft)(e) || (0, _Keys.isRight)(e) || (0, _Keys.isUp)(e) || (0, _Keys.isDown)(e)) {
+        const nextTokenIdx = this._calcNextTokenIndex(this._tokens.find(token => token.focused), tokens, (0, _Keys.isRight)(e) || (0, _Keys.isDown)(e));
+        this._scrollToToken(tokens[nextTokenIdx]);
+      }
     }
     _handleHome(tokens, endKeyPressed) {
       if (!tokens || !tokens.length) {
@@ -275,18 +236,20 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       tokens[index].focus();
       this._itemNav.setCurrentItem(tokens[index]);
     }
-    _handleHomeShift(event) {
+    _handleHomeShift(e) {
       const tokens = this.tokens;
-      const currentTokenIdx = tokens.indexOf(event.target);
+      const target = e.target;
+      const currentTokenIdx = tokens.indexOf(target);
       tokens.filter((token, index) => index <= currentTokenIdx).forEach(token => {
         token.selected = true;
       });
       tokens[0].focus();
       this._itemNav.setCurrentItem(tokens[0]);
     }
-    _handleEndShift(event) {
+    _handleEndShift(e) {
       const tokens = this.tokens;
-      const currentTokenIdx = tokens.indexOf(event.target);
+      const target = e.target;
+      const currentTokenIdx = tokens.indexOf(target);
       tokens.filter((token, index) => index >= currentTokenIdx).forEach(token => {
         token.selected = true;
       });
@@ -307,13 +270,16 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
       return nextIndex;
     }
-    _handleArrowCtrl(event, focusedToken, tokens, backwards) {
+    _handleArrowCtrl(e, focusedToken, tokens, backwards) {
       const nextIndex = this._calcNextTokenIndex(focusedToken, tokens, backwards);
-      event.preventDefault();
+      e.preventDefault();
       if (nextIndex === -1) {
         return;
       }
-      setTimeout(() => tokens[nextIndex].focus(), 0);
+      setTimeout(() => {
+        tokens[nextIndex].focus();
+      }, 0);
+      this._scrollToToken(tokens[nextIndex]);
       this._itemNav.setCurrentItem(tokens[nextIndex]);
     }
     _handleArrowShift(focusedToken, tokens, backwards) {
@@ -324,14 +290,23 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
       focusedToken.selected = true;
       tokens[nextIndex].selected = true;
-      setTimeout(() => tokens[nextIndex].focus(), 0);
+      setTimeout(() => {
+        tokens[nextIndex].focus();
+      }, 0);
+      this._scrollToToken(tokens[nextIndex]);
       this._itemNav.setCurrentItem(tokens[nextIndex]);
     }
-    _click(event) {
-      this._handleTokenSelection(event);
+    _click(e) {
+      this._handleTokenSelection(e);
     }
-    _onmousedown(event) {
-      this._itemNav.setCurrentItem(event.target);
+    _onmousedown(e) {
+      if (e.target.hasAttribute("ui5-token")) {
+        const target = e.target;
+        if (!target.toBeDeleted) {
+          this._itemNav.setCurrentItem(target);
+          this._scrollToToken(target);
+        }
+      }
     }
     _toggleTokenSelection(tokens) {
       if (!tokens || !tokens.length) {
@@ -342,11 +317,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         token.selected = !tokensAreSelected;
       });
     }
-    _handleTokenSelection(event, deselectAll = true) {
-      if (event.target.hasAttribute("ui5-token")) {
-        const deselectTokens = deselectAll ? this._tokens : [event.target];
+    _handleTokenSelection(e, deselectAll = true) {
+      const target = e.target;
+      if (target.hasAttribute("ui5-token")) {
+        const deselectTokens = deselectAll ? this._tokens : [];
         deselectTokens.forEach(token => {
-          if (token !== event.target) {
+          if (token !== target) {
             token.selected = false;
           }
         });
@@ -354,53 +330,84 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     }
     _fillClipboard(shortcutName, tokens) {
       const tokensTexts = tokens.filter(token => token.selected).map(token => token.text).join("\r\n");
-
       /* fill clipboard with tokens' texts so parent can handle creation */
-      const cutToClipboard = event => {
-        if (event.clipboardData) {
-          event.clipboardData.setData("text/plain", tokensTexts);
-        } else {
-          event.originalEvent.clipboardData.setData("text/plain", tokensTexts);
+      const cutToClipboard = e => {
+        if (e.clipboardData) {
+          e.clipboardData.setData("text/plain", tokensTexts);
         }
-        event.preventDefault();
+        e.preventDefault();
       };
       document.addEventListener(shortcutName, cutToClipboard);
       document.execCommand(shortcutName);
       document.removeEventListener(shortcutName, cutToClipboard);
     }
-
     /**
      * Scrolls the container of the tokens to its beginning.
      * This method is used by MultiInput and MultiComboBox.
      * @private
      */
     scrollToStart() {
-      this.contentDom.scrollLeft = 0;
+      if (this._scrollEnablement.scrollContainer) {
+        this._scrollEnablement.scrollTo(0, 0);
+      }
+    }
+    /**
+     * Scrolls the container of the tokens to its end when expanded.
+     * This method is used by MultiInput and MultiComboBox.
+     * @private
+     */
+    scrollToEnd() {
+      const expandedTokenizerScrollWidth = this.expandedContentDom && (this.effectiveDir !== "rtl" ? this.expandedContentDom.scrollWidth : -this.expandedContentDom.scrollWidth);
+      if (this._scrollEnablement.scrollContainer) {
+        this._scrollEnablement.scrollTo(expandedTokenizerScrollWidth, 0, 5, 10);
+      }
+    }
+    /**
+     * Scrolls token to the visible area of the container.
+     * Adds 4 pixels to the scroll position to ensure padding and border visibility on both ends
+     * @private
+     */
+    _scrollToToken(token) {
+      if (!this.expandedContentDom) {
+        return;
+      }
+      const tokenRect = token.getBoundingClientRect();
+      const tokenContainerRect = this.expandedContentDom.getBoundingClientRect();
+      if (tokenRect.left < tokenContainerRect.left) {
+        this._scrollEnablement.scrollTo(this.expandedContentDom.scrollLeft - (tokenContainerRect.left - tokenRect.left + 5), 0);
+      } else if (tokenRect.right > tokenContainerRect.right) {
+        this._scrollEnablement.scrollTo(this.expandedContentDom.scrollLeft + (tokenRect.right - tokenContainerRect.right + 5), 0);
+      }
     }
     async closeMorePopover() {
       const popover = await this.getPopover();
       popover.close();
     }
     get _nMoreText() {
-      return Tokenizer.i18nBundle.getText(_i18nDefaults.MULTIINPUT_SHOW_MORE_TOKENS, this._nMoreCount);
+      return Tokenizer_1.i18nBundle.getText(_i18nDefaults.MULTIINPUT_SHOW_MORE_TOKENS, this._nMoreCount);
     }
     get showNMore() {
-      return !this.expanded && this.showMore && this.overflownTokens.length;
+      return !this.expanded && this.showMore && !!this.overflownTokens.length;
     }
     get contentDom() {
       return this.shadowRoot.querySelector(".ui5-tokenizer--content");
     }
+    get expandedContentDom() {
+      return this.shadowRoot.querySelector(".ui5-tokenizer-expanded--content");
+    }
+    get narrowContentDom() {
+      return this.shadowRoot.querySelector(".ui5-tokenizer-nmore--content");
+    }
     get tokenizerLabel() {
-      return Tokenizer.i18nBundle.getText(_i18nDefaults.TOKENIZER_ARIA_LABEL);
+      return Tokenizer_1.i18nBundle.getText(_i18nDefaults.TOKENIZER_ARIA_LABEL);
     }
     get morePopoverTitle() {
-      return Tokenizer.i18nBundle.getText(_i18nDefaults.TOKENIZER_POPOVER_REMOVE);
+      return Tokenizer_1.i18nBundle.getText(_i18nDefaults.TOKENIZER_POPOVER_REMOVE);
     }
     get overflownTokens() {
       if (!this.contentDom) {
         return [];
       }
-
       // Reset the overflow prop of the tokens first in order
       // to use their dimensions for calculation because already
       // hidden tokens are set to 'display: none'
@@ -408,13 +415,13 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         token.overflows = false;
       });
       return this._getTokens().filter(token => {
-        const isRTL = this.effectiveDir === "rtl";
-        const elementEnd = isRTL ? "left" : "right";
         const parentRect = this.contentDom.getBoundingClientRect();
         const tokenRect = token.getBoundingClientRect();
-        const tokenEnd = parseInt(tokenRect[elementEnd]);
-        const parentEnd = parseInt(parentRect[elementEnd]);
-        token.overflows = isRTL ? tokenEnd < parentEnd && !this.expanded : tokenEnd > parentEnd && !this.expanded;
+        const tokenEnd = tokenRect.right;
+        const parentEnd = parentRect.right;
+        const tokenStart = tokenRect.left;
+        const parentStart = parentRect.left;
+        token.overflows = !this.expanded && (tokenStart < parentStart || tokenEnd > parentEnd);
         return token.overflows;
       });
     }
@@ -424,7 +431,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     get valueStateMessageText() {
       return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
     }
-
     /**
      * This method is relevant for sap_horizon theme only
      */
@@ -452,7 +458,8 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         },
         content: {
           "ui5-tokenizer--content": true,
-          "ui5-tokenizer-nmore--content": this.showMore
+          "ui5-tokenizer-expanded--content": !this.showNMore,
+          "ui5-tokenizer-nmore--content": this.showNMore
         },
         popoverValueState: {
           "ui5-valuestatemessage-root": true,
@@ -467,10 +474,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     get styles() {
       return {
         popover: {
-          "min-width": `${this.popoverMinWidth}px`
+          "min-width": this.popoverMinWidth ? `${this.popoverMinWidth}px` : ""
         },
         popoverValueStateMessage: {
-          "width": (0, _Device.isPhone)() ? "100%" : `${this.popoverMinWidth}px`,
+          "width": this.popoverMinWidth && !(0, _Device.isPhone)() ? `${this.popoverMinWidth}px` : "100%",
           "min-height": "2rem"
         },
         popoverHeader: {
@@ -484,14 +491,13 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _tokensCountText() {
       const iTokenCount = this._getTokens().length;
       if (iTokenCount === 0) {
-        return Tokenizer.i18nBundle.getText(_i18nDefaults.TOKENIZER_ARIA_CONTAIN_TOKEN);
+        return Tokenizer_1.i18nBundle.getText(_i18nDefaults.TOKENIZER_ARIA_CONTAIN_TOKEN);
       }
       if (iTokenCount === 1) {
-        return Tokenizer.i18nBundle.getText(_i18nDefaults.TOKENIZER_ARIA_CONTAIN_ONE_TOKEN);
+        return Tokenizer_1.i18nBundle.getText(_i18nDefaults.TOKENIZER_ARIA_CONTAIN_ONE_TOKEN);
       }
-      return Tokenizer.i18nBundle.getText(_i18nDefaults.TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS, iTokenCount);
+      return Tokenizer_1.i18nBundle.getText(_i18nDefaults.TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS, iTokenCount);
     }
-
     /**
      * @protected
      */
@@ -503,16 +509,64 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       lastToken.focus();
       this._itemNav.setCurrentItem(lastToken);
     }
-    static get dependencies() {
-      return [_ResponsivePopover.default, _List.default, _StandardListItem.default, _Title.default, _Button.default];
-    }
     static async onDefine() {
-      Tokenizer.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
+      Tokenizer_1.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
     }
     async getPopover() {
-      return (await this.getStaticAreaItemDomRef()).querySelector("[ui5-responsive-popover]");
+      const staticAreaItem = await this.getStaticAreaItemDomRef();
+      return staticAreaItem.querySelector("[ui5-responsive-popover]");
+    }
+  };
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Tokenizer.prototype, "showMore", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Tokenizer.prototype, "disabled", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Tokenizer.prototype, "expanded", void 0);
+  __decorate([(0, _property.default)({
+    type: Object
+  })], Tokenizer.prototype, "morePopoverOpener", void 0);
+  __decorate([(0, _property.default)({
+    validator: _Integer.default
+  })], Tokenizer.prototype, "popoverMinWidth", void 0);
+  __decorate([(0, _property.default)({
+    type: _ValueState.default,
+    defaultValue: _ValueState.default.None
+  })], Tokenizer.prototype, "valueState", void 0);
+  __decorate([(0, _property.default)({
+    validator: _Integer.default
+  })], Tokenizer.prototype, "_nMoreCount", void 0);
+  __decorate([(0, _slot.default)({
+    type: HTMLElement,
+    "default": true,
+    individualSlots: true
+  })], Tokenizer.prototype, "tokens", void 0);
+  __decorate([(0, _slot.default)()], Tokenizer.prototype, "valueStateMessage", void 0);
+  Tokenizer = Tokenizer_1 = __decorate([(0, _customElement.default)({
+    tag: "ui5-tokenizer",
+    languageAware: true,
+    renderer: _LitRenderer.default,
+    template: _TokenizerTemplate.default,
+    styles: _Tokenizer.default,
+    staticAreaStyles: [_ResponsivePopoverCommon.default, _ValueStateMessage.default, _Suggestions.default, _TokenizerPopover.default],
+    staticAreaTemplate: _TokenizerPopoverTemplate.default,
+    dependencies: [_ResponsivePopover.default, _List.default, _StandardListItem.default, _Title.default, _Button.default]
+  }), (0, _event.default)("token-delete", {
+    detail: {
+      ref: {
+        type: HTMLElement
+      }
+    }
+  }), (0, _event.default)("show-more-items-press", {
+    detail: {
+      ref: {
+        type: HTMLElement
+      }
     }
-  }
+  })], Tokenizer);
   Tokenizer.define();
   var _default = Tokenizer;
   _exports.default = _default;