@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/dist/Token.js

@@ -5,16 +5,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var Token_1;
-// eslint-disable-next-line max-classes-per-file
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import { isBackSpace, isSpace, isDelete, isSpaceCtrl, } from "@ui5/webcomponents-base/dist/Keys.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import { TOKEN_ARIA_DELETABLE, TOKEN_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js";
+import { TOKEN_ARIA_DELETABLE, TOKEN_ARIA_LABEL, TOKEN_ARIA_REMOVE } from "./generated/i18n/i18n-defaults.js";
 import TokenTemplate from "./TokenTemplate.js";
 // Styles
 import tokenStyles from "./generated/themes/Token.css.js";
@@ -118,12 +117,8 @@ let Token = Token_1 = class Token extends UI5Element {
             this._handleSelect();
         }
     }
-    onBeforeRendering() {
-        this.toBeDeleted = false;
-        // this.fireMyEvent("select");
-    }
     get tokenDeletableText() {
-        return Token_1.i18nBundle.getText(TOKEN_ARIA_DELETABLE);
+        return Token_1.i18nBundle.getText(TOKEN_ARIA_REMOVE);
     }
     get textDom() {
         return this.getDomRef()?.querySelector(".ui5-token--text");

package/dist/Token.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.js","sourceRoot":"","sources":["../src/Token.ts"],"names":[],"mappings":"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","sourcesContent":["// eslint-disable-next-line max-classes-per-file\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport {\n\tisBackSpace,\n\tisSpace,\n\tisDelete,\n\tisSpaceCtrl,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { TOKEN_ARIA_DELETABLE, TOKEN_ARIA_LABEL } from \"./generated/i18n/i18n-defaults.js\";\n\nimport type { IIcon } from \"./Icon.js\";\nimport type { IToken } from \"./MultiInput.js\";\nimport TokenTemplate from \"./TokenTemplate.js\";\n\n// Styles\nimport tokenStyles from \"./generated/themes/Token.css.js\";\n\ntype TokenDeleteEventDetail = {\n\tbackSpace?: boolean;\n\tdelete?: boolean;\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Token.js\";`\n * @constructor\n * @extends UI5Element\n * @since 1.0.0-rc.9\n * @implements {IToken}\n * @public\n */\n@customElement({\n\ttag: \"ui5-token\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: TokenTemplate,\n\tstyles: tokenStyles,\n})\n/**\n * Fired when the the component is selected by user interaction with mouse or by clicking space.\n * @private\n */\n@event(\"select\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the backspace, delete or close icon of the token is pressed\n * @param {Boolean} backSpace Indicates whether token is deleted by backspace key.\n * @param {Boolean} delete Indicates whether token is deleted by delete key.\n * @private\n */\n@event(\"delete\", {\n\tbubbles: true,\n})\nclass Token extends UI5Element implements IToken {\n\teventDetails!: {\n\t\t\"select\": void\n\t\t\"delete\": TokenDeleteEventDetail\n\t}\n\t/**\n\t * Defines the text of the token.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines whether the component is selected or not.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t/**\n\t * Defines whether the component is read-only.\n\t *\n\t * **Note:** A read-only component can not be deleted or selected,\n\t * but still provides visual feedback upon user interaction.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\treadonly = false;\n\n\t/**\n\t * Set by the tokenizer when a token is in the \"more\" area (overflowing)\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\toverflows = false;\n\n\t@property({ type: Boolean })\n\tsingleToken = false;\n\n\t/**\n\t * Defines whether the component is focused or not.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused = false;\n\n\t/**\n\t * Defines whether the token is being deleted\n\t * This flag is used in the ui5-multi-combobox\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\ttoBeDeleted = false;\n\n\t/**\n\t * Defines the tabIndex of the component.\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\tforcedTabIndex = \"-1\";\n\n\t/**\n\t * Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used.\n\t * Accepts `ui5-icon`.\n\t * @public\n\t * @since 1.0.0-rc.9\n\t */\n\t@slot()\n\tcloseIcon!: Array<IIcon>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_handleSelect() {\n\t\tif (!this.toBeDeleted) {\n\t\t\tthis.selected = !this.selected;\n\t\t\tthis.fireDecoratorEvent(\"select\");\n\t\t}\n\t}\n\n\t_focusin() {\n\t\tthis.focused = true;\n\t}\n\n\t_focusout() {\n\t\tthis.focused = !this.focused;\n\t}\n\n\t_delete() {\n\t\tthis.toBeDeleted = true;\n\t\tthis.fireDecoratorEvent(\"delete\");\n\t}\n\n\t_onmousedown(e: MouseEvent) {\n\t\tconst target = e.currentTarget as HTMLElement;\n\n\t\tif (target === this.shadowRoot?.querySelector(\"[ui5-icon]\")) {\n\t\t\tthis.toBeDeleted = true;\n\t\t}\n\t}\n\n\t_keydown(e: KeyboardEvent) {\n\t\tconst isBackSpacePressed = isBackSpace(e);\n\t\tconst isDeletePressed = isDelete(e);\n\n\t\tif (!this.readonly && (isBackSpacePressed || isDeletePressed)) {\n\t\t\te.preventDefault();\n\n\t\t\tthis.fireDecoratorEvent(\"delete\", {\n\t\t\t\tbackSpace: isBackSpacePressed,\n\t\t\t\t\"delete\": isDeletePressed,\n\t\t\t});\n\t\t}\n\n\t\tif (isSpace(e) || isSpaceCtrl(e)) {\n\t\t\te.preventDefault();\n\n\t\t\tthis._handleSelect();\n\t\t}\n\t}\n\n\tonBeforeRendering() {\n\t\tthis.toBeDeleted = false;\n\t\t// this.fireMyEvent(\"select\");\n\t}\n\n\tget tokenDeletableText() {\n\t\treturn Token.i18nBundle.getText(TOKEN_ARIA_DELETABLE);\n\t}\n\n\tget textDom() {\n\t\treturn this.getDomRef()?.querySelector(\".ui5-token--text\");\n\t}\n\n\tget isTruncatable() {\n\t\tif (!this.textDom) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn Math.ceil(this.textDom.getBoundingClientRect().width) < Math.ceil(this.textDom.scrollWidth);\n\t}\n\n\tget ariaDescription() {\n\t\tlet description = Token.i18nBundle.getText(TOKEN_ARIA_LABEL);\n\n\t\tif (!this.readonly) {\n\t\t\tdescription += ` ${Token.i18nBundle.getText(TOKEN_ARIA_DELETABLE)}`;\n\t\t}\n\n\t\treturn description;\n\t}\n\n\t// fireMyEvent(name: keyof this[\"_events\"]) {\n\t// \tconsole.log(name);\n\t// }\n}\n\nToken.define();\n\nexport default Token;\nexport type { TokenDeleteEventDetail };\n"]}
+{"version":3,"file":"Token.js","sourceRoot":"","sources":["../src/Token.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,EACN,WAAW,EACX,OAAO,EACP,QAAQ,EACR,WAAW,GACX,MAAM,sCAAsC,CAAC;AAE9C,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAI9G,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAE/C,SAAS;AACT,OAAO,WAAW,MAAM,iCAAiC,CAAC;AAO1D;;;;;;;;;;;;;;;GAeG;AAyBH,IAAM,KAAK,aAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QAaC;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;;;;;WAOG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;;WAIG;QAEH,cAAS,GAAG,KAAK,CAAC;QAGlB,gBAAW,GAAG,KAAK,CAAC;QAEpB;;;;WAIG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;;;;WAKG;QAEH,gBAAW,GAAG,KAAK,CAAC;QAEpB;;;WAGG;QAEH,mBAAc,GAAG,IAAI,CAAC;QAwFtB,6CAA6C;QAC7C,sBAAsB;QACtB,IAAI;IACL,CAAC;IA7EA,aAAa;QACZ,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACvB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;QACnC,CAAC;IACF,CAAC;IAED,QAAQ;QACP,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACrB,CAAC;IAED,SAAS;QACR,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC9B,CAAC;IAED,OAAO;QACN,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAED,YAAY,CAAC,CAAa;QACzB,MAAM,MAAM,GAAG,CAAC,CAAC,aAA4B,CAAC;QAE9C,IAAI,MAAM,KAAK,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,YAAY,CAAC,EAAE,CAAC;YAC7D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACzB,CAAC;IACF,CAAC;IAED,QAAQ,CAAC,CAAgB;QACxB,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;QAC1C,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEpC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,kBAAkB,IAAI,eAAe,CAAC,EAAE,CAAC;YAC/D,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE;gBACjC,SAAS,EAAE,kBAAkB;gBAC7B,QAAQ,EAAE,eAAe;aACzB,CAAC,CAAC;QACJ,CAAC;QAED,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;YAClC,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,CAAC,aAAa,EAAE,CAAC;QACtB,CAAC;IACF,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,OAAK,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpD,CAAC;IAED,IAAI,OAAO;QACV,OAAO,IAAI,CAAC,SAAS,EAAE,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5D,CAAC;IAED,IAAI,aAAa;QAChB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACnB,OAAO,KAAK,CAAC;QACd,CAAC;QAED,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IACpG,CAAC;IAED,IAAI,eAAe;QAClB,IAAI,WAAW,GAAG,OAAK,CAAC,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAE7D,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACpB,WAAW,IAAI,IAAI,OAAK,CAAC,UAAU,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,CAAC;QACrE,CAAC;QAED,OAAO,WAAW,CAAC;IACpB,CAAC;CAKD,CAAA;AAjJA;IADC,QAAQ,EAAE;mCACG;AAQd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACX;AAWjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACX;AAQjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACR;AAQpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACZ;AAShB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACR;AAOpB;IADC,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;6CACV;AAStB;IADC,IAAI,EAAE;wCACiB;AAGjB;IADN,IAAI,CAAC,oBAAoB,CAAC;+BACG;AA7EzB,KAAK;IAxBV,aAAa,CAAC;QACd,GAAG,EAAE,WAAW;QAChB,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,aAAa;QACvB,MAAM,EAAE,WAAW;KACnB,CAAC;IACF;;;OAGG;;IACF,KAAK,CAAC,QAAQ,EAAE;QAChB,OAAO,EAAE,IAAI;KACb,CAAC;IAEF;;;;;OAKG;;IACF,KAAK,CAAC,QAAQ,EAAE;QAChB,OAAO,EAAE,IAAI;KACb,CAAC;GACI,KAAK,CA4JV;AAED,KAAK,CAAC,MAAM,EAAE,CAAC;AAEf,eAAe,KAAK,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport {\n\tisBackSpace,\n\tisSpace,\n\tisDelete,\n\tisSpaceCtrl,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { TOKEN_ARIA_DELETABLE, TOKEN_ARIA_LABEL, TOKEN_ARIA_REMOVE } from \"./generated/i18n/i18n-defaults.js\";\n\nimport type { IIcon } from \"./Icon.js\";\nimport type { IToken } from \"./MultiInput.js\";\nimport TokenTemplate from \"./TokenTemplate.js\";\n\n// Styles\nimport tokenStyles from \"./generated/themes/Token.css.js\";\n\ntype TokenDeleteEventDetail = {\n\tbackSpace?: boolean;\n\tdelete?: boolean;\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Token.js\";`\n * @constructor\n * @extends UI5Element\n * @since 1.0.0-rc.9\n * @implements {IToken}\n * @public\n */\n@customElement({\n\ttag: \"ui5-token\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: TokenTemplate,\n\tstyles: tokenStyles,\n})\n/**\n * Fired when the the component is selected by user interaction with mouse or by clicking space.\n * @private\n */\n@event(\"select\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the backspace, delete or close icon of the token is pressed\n * @param {Boolean} backSpace Indicates whether token is deleted by backspace key.\n * @param {Boolean} delete Indicates whether token is deleted by delete key.\n * @private\n */\n@event(\"delete\", {\n\tbubbles: true,\n})\nclass Token extends UI5Element implements IToken {\n\teventDetails!: {\n\t\t\"select\": void\n\t\t\"delete\": TokenDeleteEventDetail\n\t}\n\t/**\n\t * Defines the text of the token.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines whether the component is selected or not.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t/**\n\t * Defines whether the component is read-only.\n\t *\n\t * **Note:** A read-only component can not be deleted or selected,\n\t * but still provides visual feedback upon user interaction.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\treadonly = false;\n\n\t/**\n\t * Set by the tokenizer when a token is in the \"more\" area (overflowing)\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\toverflows = false;\n\n\t@property({ type: Boolean })\n\tsingleToken = false;\n\n\t/**\n\t * Defines whether the component is focused or not.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused = false;\n\n\t/**\n\t * Defines whether the token is being deleted\n\t * This flag is used in the ui5-multi-combobox\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\ttoBeDeleted = false;\n\n\t/**\n\t * Defines the tabIndex of the component.\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\tforcedTabIndex = \"-1\";\n\n\t/**\n\t * Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used.\n\t * Accepts `ui5-icon`.\n\t * @public\n\t * @since 1.0.0-rc.9\n\t */\n\t@slot()\n\tcloseIcon!: Slot<IIcon>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_handleSelect() {\n\t\tif (!this.toBeDeleted) {\n\t\t\tthis.selected = !this.selected;\n\t\t\tthis.fireDecoratorEvent(\"select\");\n\t\t}\n\t}\n\n\t_focusin() {\n\t\tthis.focused = true;\n\t}\n\n\t_focusout() {\n\t\tthis.focused = !this.focused;\n\t}\n\n\t_delete() {\n\t\tthis.toBeDeleted = true;\n\t\tthis.fireDecoratorEvent(\"delete\");\n\t}\n\n\t_onmousedown(e: MouseEvent) {\n\t\tconst target = e.currentTarget as HTMLElement;\n\n\t\tif (target === this.shadowRoot?.querySelector(\"[ui5-icon]\")) {\n\t\t\tthis.toBeDeleted = true;\n\t\t}\n\t}\n\n\t_keydown(e: KeyboardEvent) {\n\t\tconst isBackSpacePressed = isBackSpace(e);\n\t\tconst isDeletePressed = isDelete(e);\n\n\t\tif (!this.readonly && (isBackSpacePressed || isDeletePressed)) {\n\t\t\te.preventDefault();\n\n\t\t\tthis.fireDecoratorEvent(\"delete\", {\n\t\t\t\tbackSpace: isBackSpacePressed,\n\t\t\t\t\"delete\": isDeletePressed,\n\t\t\t});\n\t\t}\n\n\t\tif (isSpace(e) || isSpaceCtrl(e)) {\n\t\t\te.preventDefault();\n\n\t\t\tthis._handleSelect();\n\t\t}\n\t}\n\n\tget tokenDeletableText() {\n\t\treturn Token.i18nBundle.getText(TOKEN_ARIA_REMOVE);\n\t}\n\n\tget textDom() {\n\t\treturn this.getDomRef()?.querySelector(\".ui5-token--text\");\n\t}\n\n\tget isTruncatable() {\n\t\tif (!this.textDom) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn Math.ceil(this.textDom.getBoundingClientRect().width) < Math.ceil(this.textDom.scrollWidth);\n\t}\n\n\tget ariaDescription() {\n\t\tlet description = Token.i18nBundle.getText(TOKEN_ARIA_LABEL);\n\n\t\tif (!this.readonly) {\n\t\t\tdescription += ` ${Token.i18nBundle.getText(TOKEN_ARIA_DELETABLE)}`;\n\t\t}\n\n\t\treturn description;\n\t}\n\n\t// fireMyEvent(name: keyof this[\"_events\"]) {\n\t// \tconsole.log(name);\n\t// }\n}\n\nToken.define();\n\nexport default Token;\nexport type { TokenDeleteEventDetail };\n"]}

package/dist/Tokenizer.d.ts

@@ -1,7 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
+import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import type ResponsivePopover from "./ResponsivePopover.js";
@@ -63,7 +65,7 @@ declare enum ClipboardDataOperation {
  * @since 2.0.0
  * @experimental This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change.
  */
-declare class Tokenizer extends UI5Element {
+declare class Tokenizer extends UI5Element implements IFormInputElement {
     eventDetails: {
         "token-delete": TokenizerTokenDeleteEventDetail;
         "selection-change": TokenizerSelectionChangeEventDetail;
@@ -88,6 +90,16 @@ declare class Tokenizer extends UI5Element {
      * @public
      */
     multiLine: boolean;
+    /**
+     * Determines the name by which the component will be identified upon submission in an HTML form.
+     *
+     * **Note:** This property is only applicable within the context of an HTML Form element.
+     * **Note:** When the component is used inside a form element,
+     * the value is sent as the first element in the form data, even if it's empty.
+     * @default undefined
+     * @public
+     */
+    name?: string;
     /**
      * Defines whether "Clear All" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.
      *
@@ -139,7 +151,7 @@ declare class Tokenizer extends UI5Element {
      * @private
      * @default undefined
      */
-    opener?: HTMLElement;
+    opener?: HTMLElement | string | null;
     /**
      * Sets the min-width of the nMore Popover.
      * **Note:** Used inside MultiInput and MultiComboBox components.
@@ -148,7 +160,7 @@ declare class Tokenizer extends UI5Element {
     popoverMinWidth?: number;
     /**
      * Prevents tokens to be part of the tab chain.
-     * **Note:** Used inside MultiInput and MultiComboBox components.
+     * **Note:** Used inside MultiInput, MultiComboBox and FileUploader components.
      * @default false
      * @private
      */
@@ -173,7 +185,7 @@ declare class Tokenizer extends UI5Element {
      * Defines the tokens to be displayed.
      * @public
      */
-    tokens: Array<Token>;
+    tokens: DefaultSlot<Token>;
     static i18nBundle: I18nBundle;
     _resizeHandler: ResizeObserverCallback;
     _itemNav: ItemNavigation;
@@ -185,7 +197,15 @@ declare class Tokenizer extends UI5Element {
     _previousToken: Token | null;
     _focusedElementBeforeOpen?: HTMLElement | null;
     _deletedDialogItems: Token[];
+    _lastFocusedToken: Token | null;
+    _isFocusSetInternally: boolean;
+    /**
+     * Scroll to end when tokenizer is expanded
+     * @private
+     */
+    _scrollToEndOnExpand: boolean;
     _handleResize(): void;
+    get formFormattedValue(): FormData | null;
     constructor();
     handleClearAll(): void;
     onBeforeRendering(): void;
@@ -196,6 +216,12 @@ declare class Tokenizer extends UI5Element {
     onTokenSelect(e: CustomEvent): void;
     _getVisibleTokens(): Token[];
     onAfterRendering(): void;
+    /**
+     * Scrolls the container to the end to ensure very long tokens are visible at their end.
+     * Otherwise, tokens may appear visually cut off.
+     * @protected
+     */
+    _scrollToEndIfNeeded(): void;
     _delete(e: CustomEvent<TokenDeleteEventDetail>): void;
     _tokenClickDelete(e: CustomEvent<TokenDeleteEventDetail>, token: Token): void;
     _handleCurrentItemAfterDeletion(nextToken: Token): void;
@@ -223,7 +249,14 @@ declare class Tokenizer extends UI5Element {
     _handleArrowShift(focusedToken: Token, tokens: Array<Token>, backwards: boolean): void;
     _click(e: MouseEvent): void;
     _onfocusin(e: FocusEvent): void;
+    _addTokenToNavigation(token: Token): void;
     _onfocusout(e: FocusEvent): void;
+    /**
+     * Determines the DOM element to focus when the Tokenizer receives focus.
+     * If the last-focused token is not overflown, focus is restored to it.
+     * Otherwise, the focus defaults to the first visible token.
+     */
+    getFocusDomRef(): HTMLElement | undefined;
     _toggleTokenSelection(tokens: Array<Token>): void;
     _handleTokenSelection(e: KeyboardEvent | MouseEvent, deselectAll?: boolean): void;
     get hasTokens(): boolean;
@@ -243,19 +276,22 @@ declare class Tokenizer extends UI5Element {
     scrollToEnd(): void;
     /**
      * 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
+     * Adds 5 pixels to the scroll position to ensure padding and border visibility on both ends
+     * For the last token, if its width is more than the needed space, scroll to the end without offset
      * @protected
      */
     _scrollToToken(token: IToken): void;
     _getList(): List;
     get _tokens(): Token[];
-    get morePopoverOpener(): HTMLElement;
+    get morePopoverOpener(): HTMLElement | string | null;
     get _nMoreText(): string | undefined;
     get _clearAllText(): string;
     get showNMore(): boolean;
     get contentDom(): HTMLElement;
     get moreLink(): HTMLElement | null;
     get tokenizerLabel(): string;
+    get _okButtonText(): string;
+    get _cancelButtonText(): string;
     get tokenizerAriaDescription(): string | undefined;
     get _ariaDisabled(): true | undefined;
     get _ariaReadonly(): true | undefined;

package/dist/Tokenizer.js

@@ -7,9 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var Tokenizer_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -25,7 +24,7 @@ import { isSpace, isSpaceCtrl, isSpaceShift, isLeftCtrl, isRightCtrl, isUpCtrl,
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import ListSelectionMode from "./types/ListSelectionMode.js";
 import TokenizerTemplate from "./TokenizerTemplate.js";
-import { MULTIINPUT_SHOW_MORE_TOKENS, TOKENIZER_ARIA_LABEL, TOKENIZER_POPOVER_REMOVE, TOKENIZER_ARIA_CONTAIN_TOKEN, TOKENIZER_ARIA_CONTAIN_ONE_TOKEN, TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS, TOKENIZER_SHOW_ALL_ITEMS, TOKENIZER_CLEAR_ALL, } from "./generated/i18n/i18n-defaults.js";
+import { MULTIINPUT_SHOW_MORE_TOKENS, TOKENIZER_ARIA_LABEL, TOKENIZER_ARIA_CONTAIN_TOKEN, TOKENIZER_ARIA_CONTAIN_ONE_TOKEN, TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS, TOKENIZER_SHOW_ALL_ITEMS, TOKENIZER_CLEAR_ALL, TOKENIZER_DIALOG_OK_BUTTON, TOKENIZER_DIALOG_CANCEL_BUTTON, INPUT_SUGGESTIONS_TITLE, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import TokenizerCss from "./generated/themes/Tokenizer.css.js";
 import TokenizerPopoverCss from "./generated/themes/TokenizerPopover.css.js";
@@ -79,6 +78,18 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
     _handleResize() {
         this._nMoreCount = this.overflownTokens.length;
     }
+    get formFormattedValue() {
+        const tokens = this.tokens || [];
+        if (this.name && tokens.length) {
+            const formData = new FormData();
+            const name = this.name;
+            tokens.forEach(token => {
+                formData.append(name, token.text || "");
+            });
+            return formData;
+        }
+        return null;
+    }
     constructor() {
         super();
         /**
@@ -132,7 +143,7 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
         this.open = false;
         /**
          * Prevents tokens to be part of the tab chain.
-         * **Note:** Used inside MultiInput and MultiComboBox components.
+         * **Note:** Used inside MultiInput, MultiComboBox and FileUploader components.
          * @default false
          * @private
          */
@@ -157,6 +168,13 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
         this._preventCollapse = false;
         this._skipTabIndex = false;
         this._previousToken = null;
+        this._lastFocusedToken = null;
+        this._isFocusSetInternally = false;
+        /**
+         * Scroll to end when tokenizer is expanded
+         * @private
+         */
+        this._scrollToEndOnExpand = false;
         this._resizeHandler = this._handleResize.bind(this);
         this._itemNav = new ItemNavigation(this, {
             currentIndex: -1,
@@ -191,7 +209,6 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
         this.expanded = true;
         if (!this.preventPopoverOpen) {
             this.open = true;
-            this.scrollToEnd();
         }
         this._tokens.forEach(token => {
             token.forcedTabIndex = "-1";
@@ -202,12 +219,11 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
     _onmousedown(e) {
         if (e.target.hasAttribute("ui5-token")) {
             const target = e.target;
-            this.expanded = true;
             if (this.open) {
                 this._preventCollapse = true;
             }
             if (!target.toBeDeleted) {
-                this._itemNav.setCurrentItem(target);
+                this._addTokenToNavigation(target);
                 this._scrollToToken(target);
             }
         }
@@ -236,7 +252,7 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
         const tokensArray = this._tokens;
         const firstToken = tokensArray[0];
         this._nMoreCount = this.overflownTokens.length;
-        if (firstToken && !this.disabled && !this.preventInitialFocus && !this._skipTabIndex) {
+        if (firstToken && !this.disabled && !this.preventInitialFocus && !this._skipTabIndex && !this._isFocusSetInternally) {
             firstToken.forcedTabIndex = "0";
         }
         if (this._scrollEnablement) {
@@ -245,8 +261,23 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
         if (this.expanded) {
             this._expandedScrollWidth = this.contentDom.scrollWidth;
         }
+        this._scrollToEndIfNeeded();
         this._tokenDeleting = false;
     }
+    /**
+     * Scrolls the container to the end to ensure very long tokens are visible at their end.
+     * Otherwise, tokens may appear visually cut off.
+     * @protected
+     */
+    _scrollToEndIfNeeded() {
+        // if scroll to end is prevented, skip scroll to the end
+        if (!this._scrollToEndOnExpand) {
+            return;
+        }
+        if (this.tokens.length || this.expanded) {
+            this.scrollToEnd();
+        }
+    }
     _delete(e) {
         const target = e.target;
         if (!e.detail) { // if there are no details, the event is triggered by a click
@@ -346,12 +377,6 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
         }
     }
     handleBeforeClose() {
-        const tokensArray = this._tokens;
-        if (isPhone()) {
-            tokensArray.forEach(token => {
-                token.selected = false;
-            });
-        }
         if (!this._tokenDeleting && !this._preventCollapse) {
             this._preventCollapse = false;
             this.expanded = false;
@@ -578,11 +603,18 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
     }
     _onfocusin(e) {
         const target = e.target;
-        this.open = false;
-        this._itemNav.setCurrentItem(target);
-        if (!this.expanded) {
-            this.expanded = true;
+        this._lastFocusedToken = target;
+        if (target && target.toBeDeleted) {
+            this._tokenDeleting = true;
+            return;
         }
+        this.open = false;
+        this.expanded = true;
+        this._addTokenToNavigation(e.target);
+    }
+    _addTokenToNavigation(token) {
+        this._scrollToEndOnExpand = false;
+        this._itemNav.setCurrentItem(token);
     }
     _onfocusout(e) {
         const relatedTarget = e.relatedTarget;
@@ -593,6 +625,7 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
         this._skipTabIndex = true;
         if (!this.contains(relatedTarget)) {
             this._tokens[0].forcedTabIndex = "0";
+            this._isFocusSetInternally = false;
             this._skipTabIndex = false;
         }
         if (!this._tokenDeleting && !this._preventCollapse) {
@@ -600,6 +633,22 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
             this.expanded = false;
         }
     }
+    /**
+     * Determines the DOM element to focus when the Tokenizer receives focus.
+     * If the last-focused token is not overflown, focus is restored to it.
+     * Otherwise, the focus defaults to the first visible token.
+     */
+    getFocusDomRef() {
+        if (this._lastFocusedToken && !this.overflownTokens.includes(this._lastFocusedToken)) {
+            this._itemNav._currentIndex = this.tokens.indexOf(this._lastFocusedToken);
+            this._isFocusSetInternally = true;
+            this.tokens[0].forcedTabIndex = "-1";
+        }
+        else {
+            this._itemNav._currentIndex = 0;
+        }
+        return this._itemNav._getCurrentItem();
+    }
     _toggleTokenSelection(tokens) {
         if (!tokens || !tokens.length) {
             return;
@@ -632,15 +681,25 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
     }
     _fillClipboard(shortcutName, tokens) {
         const tokensTexts = tokens.filter(token => token.selected).map(token => token.text).join("\r\n");
-        const cutToClipboard = (e) => {
+        // Async clipboard API (works in secure contexts - HTTPS/localhost)
+        if (navigator.clipboard?.writeText && window.isSecureContext) {
+            navigator.clipboard.writeText(tokensTexts)?.catch(() => {
+                // Silent fallback - user can retry
+            });
+            return;
+        }
+        // Fallback for HTTP: use ClipboardEvent with execCommand
+        // execCommand is deprecated but it is kept for compatibility reasons, as
+        // there is no other way to write to clipboard in non-secure contexts
+        const fillClipboardHandler = (e) => {
             if (e.clipboardData) {
                 e.clipboardData.setData("text/plain", tokensTexts);
             }
             e.preventDefault();
         };
-        document.addEventListener(shortcutName, cutToClipboard);
+        document.addEventListener(shortcutName, fillClipboardHandler);
         document.execCommand(shortcutName);
-        document.removeEventListener(shortcutName, cutToClipboard);
+        document.removeEventListener(shortcutName, fillClipboardHandler);
     }
     /**
      * Scrolls the container of the tokens to its beginning.
@@ -665,7 +724,8 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
     }
     /**
      * 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
+     * Adds 5 pixels to the scroll position to ensure padding and border visibility on both ends
+     * For the last token, if its width is more than the needed space, scroll to the end without offset
      * @protected
      */
     _scrollToToken(token) {
@@ -674,11 +734,17 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
         }
         const tokenRect = token.getBoundingClientRect();
         const tokenContainerRect = this.contentDom.getBoundingClientRect();
+        const oneSideBorderAndPaddingOffset = 5;
+        const isLastToken = this._tokens.indexOf(token) === this._tokens.length - 1;
+        if (isLastToken) {
+            this.scrollToEnd();
+            return;
+        }
         if (tokenRect.left < tokenContainerRect.left) {
-            this._scrollEnablement?.scrollTo(this.contentDom.scrollLeft - (tokenContainerRect.left - tokenRect.left + 5), 0);
+            this._scrollEnablement?.scrollTo(this.contentDom.scrollLeft - (tokenContainerRect.left - tokenRect.left + oneSideBorderAndPaddingOffset), 0);
         }
         else if (tokenRect.right > tokenContainerRect.right) {
-            this._scrollEnablement?.scrollTo(this.contentDom.scrollLeft + (tokenRect.right - tokenContainerRect.right + 5), 0);
+            this._scrollEnablement?.scrollTo(this.contentDom.scrollLeft + (tokenRect.right - tokenContainerRect.right + oneSideBorderAndPaddingOffset), 0);
         }
     }
     _getList() {
@@ -719,6 +785,12 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
         const effectiveLabelText = getEffectiveAriaLabelText(this);
         return effectiveLabelText || Tokenizer_1.i18nBundle.getText(TOKENIZER_ARIA_LABEL);
     }
+    get _okButtonText() {
+        return Tokenizer_1.i18nBundle.getText(TOKENIZER_DIALOG_OK_BUTTON);
+    }
+    get _cancelButtonText() {
+        return Tokenizer_1.i18nBundle.getText(TOKENIZER_DIALOG_CANCEL_BUTTON);
+    }
     get tokenizerAriaDescription() {
         return getEffectiveAriaLabelText(this) ? Tokenizer_1.i18nBundle.getText(TOKENIZER_ARIA_LABEL) : undefined;
     }
@@ -729,7 +801,7 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
         return this.readonly || undefined;
     }
     get morePopoverTitle() {
-        return Tokenizer_1.i18nBundle.getText(TOKENIZER_POPOVER_REMOVE);
+        return getEffectiveAriaLabelText(this) || Tokenizer_1.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
     }
     get overflownTokens() {
         if (!this.contentDom) {
@@ -796,6 +868,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Tokenizer.prototype, "multiLine", void 0);
+__decorate([
+    property({ type: String })
+], Tokenizer.prototype, "name", void 0);
 __decorate([
     property({ type: Boolean })
 ], Tokenizer.prototype, "showClearAll", void 0);
@@ -842,6 +917,10 @@ __decorate([
         type: HTMLElement,
         "default": true,
         individualSlots: true,
+        invalidateOnChildChange: {
+            properties: ["text"],
+            slots: false,
+        },
     })
 ], Tokenizer.prototype, "tokens", void 0);
 __decorate([
@@ -851,6 +930,7 @@ Tokenizer = Tokenizer_1 = __decorate([
     customElement({
         tag: "ui5-tokenizer",
         languageAware: true,
+        formAssociated: true,
         renderer: jsxRenderer,
         template: TokenizerTemplate,
         styles: [
@@ -858,7 +938,6 @@ Tokenizer = Tokenizer_1 = __decorate([
             ResponsivePopoverCommonCss,
             SuggestionsCss,
             TokenizerPopoverCss,
-            getEffectiveScrollbarStyle(),
         ],
     })
     /**