@ui5/webcomponents 2.5.0 → 2.6.0-rc.0

package/dist/ToggleButtonTemplate.d.ts

@@ -0,0 +1,2 @@
+import type ToggleButton from "./ToggleButton.js";
+export default function ToggleButtonTemplate(this: ToggleButton): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/ToggleButtonTemplate.js

@@ -0,0 +1,6 @@
+import { Fragment as _Fragment, jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import buttonTemplate from "./ButtonTemplate.js";
+export default function ToggleButtonTemplate() {
+    return (_jsx(_Fragment, { children: buttonTemplate.call(this, { ariaPressed: this.pressed }) }));
+}
+//# sourceMappingURL=ToggleButtonTemplate.js.map

package/dist/ToggleButtonTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonTemplate.js","sourceRoot":"","sources":["../src/ToggleButtonTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,MAAM,qBAAqB,CAAC;AAGjD,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC3C,OAAO,CAAC,4BACL,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,GACxD,CAAC,CAAC;AACN,CAAC","sourcesContent":["import buttonTemplate from \"./ButtonTemplate.js\";\nimport type ToggleButton from \"./ToggleButton.js\";\n\nexport default function ToggleButtonTemplate(this: ToggleButton) {\n\treturn (<>\n\t\t{ buttonTemplate.call(this, { ariaPressed: this.pressed }) }\n\t</>);\n}\n"]}

package/dist/ToggleSpinButton.d.ts

@@ -1,3 +1,4 @@
+import type { AriaRole } from "@ui5/webcomponents-base";
 import ToggleButton from "./ToggleButton.js";
 /**
  * @class
@@ -40,6 +41,6 @@ declare class ToggleSpinButton extends ToggleButton {
     /**
      * Override
      */
-    get effectiveAccRole(): string;
+    get effectiveAccRole(): AriaRole;
 }
 export default ToggleSpinButton;

package/dist/ToggleSpinButton.js

@@ -6,11 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import Button from "./Button.js";
 import ToggleButton from "./ToggleButton.js";
 // Template
-import ToggleSpinButtonTemplate from "./generated/templates/ToggleSpinButtonTemplate.lit.js";
+import ToggleSpinButtonTemplate from "./ToggleSpinButtonTemplate.js";
 /**
  * @class
  *
@@ -70,7 +70,7 @@ __decorate([
 ToggleSpinButton = __decorate([
     customElement({
         tag: "ui5-toggle-spin-button",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: [Button.styles, ToggleButton.styles],
         template: ToggleSpinButtonTemplate,
     })

package/dist/ToggleSpinButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSpinButton.js","sourceRoot":"","sources":["../src/ToggleSpinButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAE7E,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAE7C,WAAW;AACX,OAAO,wBAAwB,MAAM,uDAAuD,CAAC;AAE7F;;;;;;;;;;;;GAYG;AAQH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,YAAY;IAA3C;;QACC;;;WAGG;QAEH,aAAQ,GAAG,CAAC,CAAC,CAAC;QAEd;;;WAGG;QAEH,aAAQ,GAAG,CAAC,CAAC,CAAC;QAEd;;;WAGG;QAEH,aAAQ,GAAG,CAAC,CAAC,CAAC;IAoBf,CAAC;IApBc,CAAC;IASf;;OAEG;IACH,QAAQ,KAAI,CAAC;IAEb;;OAEG;IACH,IAAI,gBAAgB;QACnB,OAAO,YAAY,CAAC;IACrB,CAAC;CACD,CAAA;AAlCA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACb;AAOd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACb;AAOd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACb;AAOd;IADC,QAAQ,EAAE;mDACQ;AA3Bd,gBAAgB;IAPrB,aAAa,CAAC;QACd,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC;QAC5C,QAAQ,EAAE,wBAAwB;KAClC,CAAC;GAEI,gBAAgB,CAwCrB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\nimport Button from \"./Button.js\";\nimport ToggleButton from \"./ToggleButton.js\";\n\n// Template\nimport ToggleSpinButtonTemplate from \"./generated/templates/ToggleSpinButtonTemplate.lit.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * `ui5-toggle-spin-button` is explicitly used in the new design of `ui5-time-picker`.\n * It extends `ui5-toggle-button` with some specific accessibility-related properties in order to\n * have spin button look and feel from accessibility point of view. This component should not be used separately.\n * @constructor\n * @extends ToggleButton\n * @since 1.15.0\n * @private\n */\n@customElement({\n\ttag: \"ui5-toggle-spin-button\",\n\trenderer: litRender,\n\tstyles: [Button.styles, ToggleButton.styles],\n\ttemplate: ToggleSpinButtonTemplate,\n})\n\nclass ToggleSpinButton extends ToggleButton {\n\t/**\n\t * Defines the ARIA valuemin of the component.\n\t * @default -1\n\t */\n\t@property({ type: Number })\n\tvalueMin = -1;\n\n\t/**\n\t * Defines the ARIA valuemax of the component.\n\t * @default -1\n\t */\n\t@property({ type: Number })\n\tvalueMax = -1;\n\n\t/**\n\t * Defines the ARIA valuenow of the component.\n\t * @default -1\n\t */\n\t@property({ type: Number })\n\tvalueNow = -1;;\n\n\t/**\n\t * Defines the ARIA valuetext of the component.\n\t * @default undefined\n\t */\n\t@property()\n\tvalueText?: string;\n\n\t/**\n\t * Override of the handler in order to prevent button toggle functionality\n\t */\n\t_onclick() {}\n\n\t/**\n\t * Override\n\t */\n\tget effectiveAccRole() {\n\t\treturn \"spinbutton\";\n\t}\n}\n\nToggleSpinButton.define();\n\nexport default ToggleSpinButton;\n"]}
+{"version":3,"file":"ToggleSpinButton.js","sourceRoot":"","sources":["../src/ToggleSpinButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAG/E,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAE7C,WAAW;AACX,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE;;;;;;;;;;;;GAYG;AAQH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,YAAY;IAA3C;;QACC;;;WAGG;QAEH,aAAQ,GAAG,CAAC,CAAC,CAAC;QAEd;;;WAGG;QAEH,aAAQ,GAAG,CAAC,CAAC,CAAC;QAEd;;;WAGG;QAEH,aAAQ,GAAG,CAAC,CAAC,CAAC;IAoBf,CAAC;IApBc,CAAC;IASf;;OAEG;IACH,QAAQ,KAAI,CAAC;IAEb;;OAEG;IACH,IAAI,gBAAgB;QACnB,OAAO,YAAY,CAAC;IACrB,CAAC;CACD,CAAA;AAlCA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACb;AAOd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACb;AAOd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACb;AAOd;IADC,QAAQ,EAAE;mDACQ;AA3Bd,gBAAgB;IAPrB,aAAa,CAAC;QACd,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC;QAC5C,QAAQ,EAAE,wBAAwB;KAClC,CAAC;GAEI,gBAAgB,CAwCrB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { AriaRole } from \"@ui5/webcomponents-base\";\n\nimport Button from \"./Button.js\";\nimport ToggleButton from \"./ToggleButton.js\";\n\n// Template\nimport ToggleSpinButtonTemplate from \"./ToggleSpinButtonTemplate.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * `ui5-toggle-spin-button` is explicitly used in the new design of `ui5-time-picker`.\n * It extends `ui5-toggle-button` with some specific accessibility-related properties in order to\n * have spin button look and feel from accessibility point of view. This component should not be used separately.\n * @constructor\n * @extends ToggleButton\n * @since 1.15.0\n * @private\n */\n@customElement({\n\ttag: \"ui5-toggle-spin-button\",\n\trenderer: jsxRenderer,\n\tstyles: [Button.styles, ToggleButton.styles],\n\ttemplate: ToggleSpinButtonTemplate,\n})\n\nclass ToggleSpinButton extends ToggleButton {\n\t/**\n\t * Defines the ARIA valuemin of the component.\n\t * @default -1\n\t */\n\t@property({ type: Number })\n\tvalueMin = -1;\n\n\t/**\n\t * Defines the ARIA valuemax of the component.\n\t * @default -1\n\t */\n\t@property({ type: Number })\n\tvalueMax = -1;\n\n\t/**\n\t * Defines the ARIA valuenow of the component.\n\t * @default -1\n\t */\n\t@property({ type: Number })\n\tvalueNow = -1;;\n\n\t/**\n\t * Defines the ARIA valuetext of the component.\n\t * @default undefined\n\t */\n\t@property()\n\tvalueText?: string;\n\n\t/**\n\t * Override of the handler in order to prevent button toggle functionality\n\t */\n\t_onclick() {}\n\n\t/**\n\t * Override\n\t */\n\tget effectiveAccRole(): AriaRole {\n\t\treturn \"spinbutton\";\n\t}\n}\n\nToggleSpinButton.define();\n\nexport default ToggleSpinButton;\n"]}

package/dist/ToggleSpinButtonTemplate.d.ts

@@ -0,0 +1,2 @@
+import type ToggleSpinButton from "./ToggleSpinButton.js";
+export default function ToggleSpinButtonTemplate(this: ToggleSpinButton): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/ToggleSpinButtonTemplate.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import buttonTemplate from "./ButtonTemplate.js";
+export default function ToggleSpinButtonTemplate() {
+    return (_jsx(_Fragment, { children: buttonTemplate.call(this, {
+            ariaPressed: this.pressed,
+            ariaValueMax: this.valueMax,
+            ariaValueMin: this.valueMin,
+            ariaValueNow: this.valueNow,
+            ariaValueText: this.valueText,
+        }) }));
+}
+//# sourceMappingURL=ToggleSpinButtonTemplate.js.map

package/dist/ToggleSpinButtonTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSpinButtonTemplate.js","sourceRoot":"","sources":["../src/ToggleSpinButtonTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,MAAM,qBAAqB,CAAC;AAEjD,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,OAAO,CAAC,4BACL,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE;YAC3B,WAAW,EAAE,IAAI,CAAC,OAAO;YACzB,YAAY,EAAE,IAAI,CAAC,QAAQ;YAC3B,YAAY,EAAE,IAAI,CAAC,QAAQ;YAC3B,YAAY,EAAE,IAAI,CAAC,QAAQ;YAC3B,aAAa,EAAE,IAAI,CAAC,SAAS;SAC7B,CAAC,GACA,CAAC,CAAC;AACN,CAAC","sourcesContent":["import type ToggleSpinButton from \"./ToggleSpinButton.js\";\nimport buttonTemplate from \"./ButtonTemplate.js\";\n\nexport default function ToggleSpinButtonTemplate(this: ToggleSpinButton) {\n\treturn (<>\n\t\t{ buttonTemplate.call(this, {\n\t\t\tariaPressed: this.pressed,\n\t\t\tariaValueMax: this.valueMax,\n\t\t\tariaValueMin: this.valueMin,\n\t\t\tariaValueNow: this.valueNow,\n\t\t\tariaValueText: this.valueText,\n\t\t})}\n\t</>);\n}\n"]}

package/dist/Token.d.ts

@@ -1,6 +1,4 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import "@ui5/webcomponents-icons/dist/decline.js";
-import "@ui5/webcomponents-icons/dist/sys-cancel.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { IIcon } from "./Icon.js";
 import type { IToken } from "./MultiInput.js";

package/dist/Token.js

@@ -5,19 +5,18 @@ 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import { isBackSpace, isSpace, isDelete, isSpaceCtrl, } from "@ui5/webcomponents-base/dist/Keys.js";
-import "@ui5/webcomponents-icons/dist/decline.js";
-import "@ui5/webcomponents-icons/dist/sys-cancel.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 Icon from "./Icon.js";
-import TokenTemplate from "./generated/templates/TokenTemplate.lit.js";
+import TokenTemplate from "./TokenTemplate.js";
 // Styles
 import tokenStyles from "./generated/themes/Token.css.js";
 /**
@@ -84,6 +83,9 @@ let Token = Token_1 = class Token extends UI5Element {
          * @private
          */
         this._isVisible = false;
+        // fireMyEvent(name: keyof this["_events"]) {
+        // 	console.log(name);
+        // }
     }
     _handleSelect() {
         if (!this.toBeDeleted) {
@@ -118,6 +120,7 @@ let Token = Token_1 = class Token extends UI5Element {
     }
     onBeforeRendering() {
         this.toBeDeleted = false;
+        // this.fireMyEvent("select");
     }
     get tokenDeletableText() {
         return Token_1.i18nBundle.getText(TOKEN_ARIA_DELETABLE);
@@ -176,7 +179,7 @@ Token = Token_1 = __decorate([
     customElement({
         tag: "ui5-token",
         languageAware: true,
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: TokenTemplate,
         styles: tokenStyles,
         dependencies: [Icon],

package/dist/Token.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.js","sourceRoot":"","sources":["../src/Token.ts"],"names":[],"mappings":"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","sourcesContent":["import 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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport {\n\tisBackSpace,\n\tisSpace,\n\tisDelete,\n\tisSpaceCtrl,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/sys-cancel.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 Icon from \"./Icon.js\";\nimport type { IIcon } from \"./Icon.js\";\nimport type { IToken } from \"./MultiInput.js\";\nimport TokenTemplate from \"./generated/templates/TokenTemplate.lit.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: litRender,\n\ttemplate: TokenTemplate,\n\tstyles: tokenStyles,\n\tdependencies: [Icon],\n})\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})\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 * Indicates whether the token is visible or not.\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_isVisible = false\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_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}\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\nToken.define();\n\nexport default Token;\nexport type { TokenDeleteEventDetail };\n"]}
+{"version":3,"file":"Token.js","sourceRoot":"","sources":["../src/Token.ts"],"names":[],"mappings":";;;;;;;AAAA,gDAAgD;AAChD,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,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,MAAM,mCAAmC,CAAC;AAE3F,OAAO,IAAI,MAAM,WAAW,CAAC;AAG7B,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAE/C,SAAS;AACT,OAAO,WAAW,MAAM,iCAAiC,CAAC;AAO1D;;;;;;;;;;;;;;;GAeG;AA0BH,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;QAEtB;;;WAGG;QAEH,eAAU,GAAG,KAAK,CAAA;QAqFlB,6CAA6C;QAC7C,sBAAsB;QACtB,IAAI;IACL,CAAC;IA1EA,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,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,iBAAiB;QAChB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,8BAA8B;IAC/B,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,OAAK,CAAC,UAAU,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACvD,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;AArJA;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;AAOtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;yCAC7B;AASlB;IADC,IAAI,EAAE;wCACkB;AAGlB;IADN,IAAI,CAAC,oBAAoB,CAAC;+BACG;AApFzB,KAAK;IAzBV,aAAa,CAAC;QACd,GAAG,EAAE,WAAW;QAChB,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,aAAa;QACvB,MAAM,EAAE,WAAW;QACnB,YAAY,EAAE,CAAC,IAAI,CAAC;KACpB,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,CAgKV;AAED,KAAK,CAAC,MAAM,EAAE,CAAC;AAEf,eAAe,KAAK,CAAC","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 Icon from \"./Icon.js\";\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\tdependencies: [Icon],\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 * Indicates whether the token is visible or not.\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_isVisible = false\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_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"]}

package/dist/TokenTemplate.d.ts

@@ -0,0 +1,2 @@
+import type Token from "./Token.js";
+export default function TokenTemplate(this: Token): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/TokenTemplate.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "./Icon.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+export default function TokenTemplate() {
+    return (_jsxs("div", { role: "option", tabindex: this.forcedTabIndex ? parseInt(this.forcedTabIndex) : -1, class: "ui5-token--wrapper", "aria-description": this.ariaDescription, "aria-selected": this.selected, onClick: this._handleSelect, onFocusIn: this._focusin, onFocusOut: this._focusout, onKeyDown: this._keydown, children: [_jsx("span", { class: "ui5-token--text", children: this.text }), !this.readonly &&
+                _jsx("div", { class: "ui5-token--icon", children: this.closeIcon.length > 0 ?
+                        _jsx("slot", { name: "closeIcon", onClick: this._delete })
+                        :
+                            _jsx(Icon, { name: decline, mode: "Decorative", accessibleName: this.tokenDeletableText, showTooltip: true, onClick: this._delete }) })] }));
+}
+//# sourceMappingURL=TokenTemplate.js.map

package/dist/TokenTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenTemplate.js","sourceRoot":"","sources":["../src/TokenTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAE/D,MAAM,CAAC,OAAO,UAAU,aAAa;IACpC,OAAO,CACN,eACC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAClE,KAAK,EAAC,oBAAoB,sBACR,IAAI,CAAC,eAAe,mBACvB,IAAI,CAAC,QAAQ,EAC5B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,UAAU,EAAE,IAAI,CAAC,SAAS,EAC1B,SAAS,EAAE,IAAI,CAAC,QAAQ,aAExB,eAAM,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,IAAI,GAAQ,EAE/C,CAAC,IAAI,CAAC,QAAQ;gBACd,cAAK,KAAK,EAAC,iBAAiB,YAC1B,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;wBAC3B,eAAM,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAS;wBACrD,CAAC;4BACD,KAAC,IAAI,IACJ,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,YAAY,EACjB,cAAc,EAAE,IAAI,CAAC,kBAAkB,EACvC,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,GACpB,GAEE,IAEF,CACN,CAAC;AACH,CAAC","sourcesContent":["import type Token from \"./Token.js\";\nimport Icon from \"./Icon.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\n\nexport default function TokenTemplate(this: Token) {\n\treturn (\n\t\t<div\n\t\t\trole=\"option\"\n\t\t\ttabindex={this.forcedTabIndex ? parseInt(this.forcedTabIndex) : -1}\n\t\t\tclass=\"ui5-token--wrapper\"\n\t\t\taria-description={this.ariaDescription}\n\t\t\taria-selected={this.selected}\n\t\t\tonClick={this._handleSelect}\n\t\t\tonFocusIn={this._focusin}\n\t\t\tonFocusOut={this._focusout}\n\t\t\tonKeyDown={this._keydown}\n\t\t>\n\t\t\t<span class=\"ui5-token--text\">{this.text}</span>\n\n\t\t\t{!this.readonly &&\n\t\t\t\t<div class=\"ui5-token--icon\">\n\t\t\t\t\t{this.closeIcon.length > 0 ?\n\t\t\t\t\t\t<slot name=\"closeIcon\" onClick={this._delete}></slot>\n\t\t\t\t\t\t:\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tname={decline}\n\t\t\t\t\t\t\tmode=\"Decorative\"\n\t\t\t\t\t\t\taccessibleName={this.tokenDeletableText}\n\t\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\t\tonClick={this._delete}\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t);\n}\n"]}

package/dist/Tokenizer.d.ts

@@ -4,7 +4,7 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation
 import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResponsivePopover from "./ResponsivePopover.js";
-import List from "./List.js";
+import List, { type ListItemDeleteEventDetail } from "./List.js";
 import ListSelectionMode from "./types/ListSelectionMode.js";
 import type Token from "./Token.js";
 import type { IToken } from "./MultiInput.js";
@@ -198,7 +198,7 @@ declare class Tokenizer extends UI5Element {
      * @param forwardFocusToPrevious Indicates whether the focus will be forwarded to previous or next token after deletion.
      */
     deleteToken(token: Token, forwardFocusToPrevious?: boolean): void;
-    itemDelete(e: CustomEvent): Promise<void>;
+    itemDelete(e: CustomEvent<ListItemDeleteEventDetail>): Promise<void>;
     handleBeforeClose(): void;
     handleBeforeOpen(): void;
     handleAfterClose(): void;
@@ -266,6 +266,7 @@ declare class Tokenizer extends UI5Element {
      */
     _focusLastToken(): void;
     getPopover(): ResponsivePopover;
+    getTokenByRefId(refId: string): Token;
 }
 declare const getTokensCountText: (iTokenCount: number) => string;
 export default Tokenizer;

package/dist/Tokenizer.js

@@ -11,7 +11,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
@@ -24,13 +24,13 @@ import DOMReferenceConverter from "@ui5/webcomponents-base/dist/converters/DOMRe
 import { isSpace, isSpaceCtrl, isSpaceShift, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isUpShift, isDownShift, isLeftShift, isRightShift, isLeftShiftCtrl, isRightShiftCtrl, isDeleteShift, isInsertCtrl, isEnd, isHome, isHomeShift, isEndShift, isPageUpShift, isPageDownShift, isHomeCtrl, isEndCtrl, isRight, isLeft, isUp, isDown, isEscape, } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import ResponsivePopover from "./ResponsivePopover.js";
-import List from "./List.js";
+import List, {} from "./List.js";
 import ListSelectionMode from "./types/ListSelectionMode.js";
 import Title from "./Title.js";
 import Button from "./Button.js";
 import Icon from "./Icon.js";
 import ListItemStandard from "./ListItemStandard.js";
-import TokenizerTemplate from "./generated/templates/TokenizerTemplate.lit.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";
 // Styles
 import TokenizerCss from "./generated/themes/Tokenizer.css.js";
@@ -320,7 +320,7 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
         }
     }
     async itemDelete(e) {
-        const token = e.detail.item.tokenRef;
+        const token = this.getTokenByRefId(e.detail.item.getAttribute("data-ui5-token-ref-id"));
         const tokensArray = this._tokens;
         // delay the token deletion in order to close the popover before removing token of the DOM
         if (tokensArray.length === 1) {
@@ -809,6 +809,9 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
     getPopover() {
         return this.shadowRoot.querySelector("[ui5-responsive-popover]");
     }
+    getTokenByRefId(refId) {
+        return this.tokens.find(token => token._id === refId);
+    }
 };
 __decorate([
     property({ type: Boolean })
@@ -875,7 +878,7 @@ Tokenizer = Tokenizer_1 = __decorate([
     customElement({
         tag: "ui5-tokenizer",
         languageAware: true,
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: TokenizerTemplate,
         styles: [
             TokenizerCss,