@ui5/webcomponents 0.0.0-fca1107e7 → 0.0.0-fd426fe8a

package/dist/GridWalker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridWalker.js","sourceRoot":"","sources":["../src/GridWalker.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,UAAU;IAQf,YAAY,OAAoB,CAAC,EAAE,CAAC;QANpC,WAAM,GAAW,CAAC,CAAC;QACnB,WAAM,GAAW,CAAC,CAAC;QACnB,aAAQ,GAAW,EAAE,CAAC;QACtB,gBAAW,GAAW,CAAC,CAAC;QACxB,eAAU,GAAW,CAAC,CAAC;QAGtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IAClB,CAAC;IAED,IAAI;QACH,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IACjD,CAAC;IAED,KAAK;QACJ,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACtF,CAAC;IAED,EAAE;QACD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IACjD,CAAC;IAED,IAAI;QACH,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACpE,CAAC;IAED,MAAM;QACL,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAChC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;IAClG,CAAC;IAED,QAAQ;QACP,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAChC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QACvC,MAAM,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC;QAC/C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9F,CAAC;IAED,IAAI;QACH,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACvB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;QACvE,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACzC,CAAC;IACF,CAAC;IAED,GAAG;QACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACvB,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;YACvC,MAAM,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC;YAC/C,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;QACnE,CAAC;aAAM,CAAC;YACP,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;YACrD,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3D,CAAC;IACF,CAAC;IAED,OAAO,CAAC,IAAiB;QACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IAClB,CAAC;IAED,UAAU;QACT,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;IACtD,CAAC;IAED,UAAU,CAAC,OAAgB;QAC1B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE;YACnC,GAAG,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE;gBAC9B,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;oBACtB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;oBACvB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;gBACxB,CAAC;YACF,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,SAAS,CAAC,MAAc;QACvB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACtB,CAAC;IAED,SAAS;QACR,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACpD,CAAC;IAED,SAAS,CAAC,MAAc;QACvB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACtB,CAAC;IAED,SAAS;QACR,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACtE,CAAC;IAED,cAAc,CAAC,WAAmB;QACjC,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IAChC,CAAC;IAED,cAAc;QACb,OAAO,IAAI,CAAC,WAAW,CAAC;IACzB,CAAC;IAED,aAAa,CAAC,UAAkB;QAC/B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC9B,CAAC;IAED,aAAa;QACZ,OAAO,IAAI,CAAC,UAAU,CAAC;IACxB,CAAC;CACD;AAED,eAAe,UAAU,CAAC","sourcesContent":["/**\n * The GridWalker object represents the elements of a two-dimensional grid system and a position within them.\n *\n * @class\n * @private\n */\nclass GridWalker {\n\tgrid: unknown[][];\n\trowPos: number = 0;\n\tcolPos: number = 0;\n\tpageSize: number = 20;\n\tfirstRowPos: number = 0;\n\tlastRowPos: number = 0;\n\n\tconstructor(grid: unknown[][] = [[]]) {\n\t\tthis.grid = grid;\n\t}\n\n\tleft() {\n\t\tthis.colPos = Math.max(this.getColPos() - 1, 0);\n\t}\n\n\tright() {\n\t\tthis.colPos = Math.min(this.getColPos() + 1, this.grid[this.getRowPos()].length - 1);\n\t}\n\n\tup() {\n\t\tthis.rowPos = Math.max(this.getRowPos() - 1, 0);\n\t}\n\n\tdown() {\n\t\tthis.rowPos = Math.min(this.getRowPos() + 1, this.grid.length - 1);\n\t}\n\n\tpageup() {\n\t\tthis.colPos = this.getColPos();\n\t\tconst rowPos = this.getRowPos();\n\t\tthis.rowPos = Math.max(rowPos > this.firstRowPos ? this.firstRowPos : 0, rowPos - this.pageSize);\n\t}\n\n\tpagedown() {\n\t\tthis.colPos = this.getColPos();\n\t\tconst rowPos = this.getRowPos();\n\t\tconst endRowPos = this.grid.length - 1;\n\t\tconst lastRowPos = endRowPos + this.lastRowPos;\n\t\tthis.rowPos = Math.min(rowPos < lastRowPos ? lastRowPos : endRowPos, rowPos + this.pageSize);\n\t}\n\n\thome() {\n\t\tthis.colPos = this.getColPos();\n\t\tif (this.colPos === 0) {\n\t\t\tthis.rowPos = (this.rowPos > this.firstRowPos) ? this.firstRowPos : 0;\n\t\t} else {\n\t\t\tthis.colPos = (this.colPos > 1) ? 1 : 0;\n\t\t}\n\t}\n\n\tend() {\n\t\tthis.colPos = this.getColPos();\n\t\tif (this.colPos === 0) {\n\t\t\tconst endRowPos = this.grid.length - 1;\n\t\t\tconst lastRowPos = endRowPos + this.lastRowPos;\n\t\t\tthis.rowPos = (this.rowPos < lastRowPos) ? lastRowPos : endRowPos;\n\t\t} else {\n\t\t\tconst lastColPos = this.grid[this.rowPos].length - 1;\n\t\t\tthis.colPos = (this.colPos < lastColPos) ? lastColPos : 0;\n\t\t}\n\t}\n\n\tsetGrid(grid: unknown[][]) {\n\t\tthis.grid = grid;\n\t}\n\n\tgetCurrent() {\n\t\treturn this.grid[this.getRowPos()][this.getColPos()];\n\t}\n\n\tsetCurrent(current: unknown) {\n\t\tthis.grid.forEach((row, rowIndex) => {\n\t\t\trow.forEach((cell, colIndex) => {\n\t\t\t\tif (cell === current) {\n\t\t\t\t\tthis.rowPos = rowIndex;\n\t\t\t\t\tthis.colPos = colIndex;\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t}\n\n\tsetRowPos(rowPos: number) {\n\t\tthis.rowPos = rowPos;\n\t}\n\n\tgetRowPos() {\n\t\treturn Math.min(this.rowPos, this.grid.length - 1);\n\t}\n\n\tsetColPos(colPos: number) {\n\t\tthis.colPos = colPos;\n\t}\n\n\tgetColPos() {\n\t\treturn Math.min(this.colPos, this.grid[this.getRowPos()].length - 1);\n\t}\n\n\tsetFirstRowPos(firstRowPos: number) {\n\t\tthis.firstRowPos = firstRowPos;\n\t}\n\n\tgetFirstRowPos() {\n\t\treturn this.firstRowPos;\n\t}\n\n\tsetLastRowPos(lastRowPos: number) {\n\t\tthis.lastRowPos = lastRowPos;\n\t}\n\n\tgetLastRowPos() {\n\t\treturn this.lastRowPos;\n\t}\n}\n\nexport default GridWalker;\n"]}

package/dist/Icon.d.ts

@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import IconDesign from "./types/IconDesign.js";
+import type IconDesign from "./types/IconDesign.js";
+import IconMode from "./types/IconMode.js";
 /**
  * Interface for components that represent an icon, usable in numerous higher-order components
  * @public
@@ -28,7 +29,7 @@ interface IIcon extends HTMLElement {
  * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).
  * - [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the "tnt" collection and includes the following
  * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).
- * - [@ui5/webcomponents-icons-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the "business-suite" collection and includes the following
+ * - [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the "business-suite" collection and includes the following
  * [icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).
  *
  * 2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**
@@ -65,7 +66,7 @@ interface IIcon extends HTMLElement {
  *
  * ### Keyboard Handling
  *
- * - [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.
+ * - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.
  * - [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.
  *
  * ### ES6 Module Import
@@ -78,6 +79,9 @@ interface IIcon extends HTMLElement {
  * @public
  */
 declare class Icon extends UI5Element implements IIcon {
+    eventDetails: {
+        click: void;
+    };
     /**
      * Defines the component semantic design.
      * @default "Default"
@@ -85,13 +89,6 @@ declare class Icon extends UI5Element implements IIcon {
      * @since 1.9.2
      */
     design: `${IconDesign}`;
-    /**
-     * Defines if the icon is interactive (focusable and pressable)
-     * @default false
-     * @public
-     * @since 1.0.0-rc.8
-     */
-    interactive: boolean;
     /**
      * Defines the unique identifier (icon name) of the component.
      *
@@ -114,20 +111,20 @@ declare class Icon extends UI5Element implements IIcon {
      *
      * Example:
      * `name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.
-     * @default ""
+     * @default undefined
      * @public
      */
-    name: string;
+    name?: string;
     /**
      * Defines the text alternative of the component.
      * If not provided a default text alternative will be set, if present.
      *
      * **Note:** Every icon should have a text alternative in order to
      * calculate its accessible name.
-     * @default ""
+     * @default undefined
      * @public
      */
-    accessibleName: string;
+    accessibleName?: string;
     /**
      * Defines whether the component should have a tooltip.
      *
@@ -137,19 +134,12 @@ declare class Icon extends UI5Element implements IIcon {
      */
     showTooltip: boolean;
     /**
-     * Defines the accessibility role of the component.
-     * @default ""
+     * Defines the mode of the component.
+     * @default "Decorative"
      * @public
-     * @since 1.1.0
-     */
-    accessibleRole: string;
-    /**
-     * Defines the ARIA hidden state of the component.
-     * Note: If the role is presentation the default value of aria-hidden will be true.
-     * @private
-     * @since 1.0.0-rc.15
+     * @since 2.0.0
      */
-    ariaHidden: string;
+    mode: `${IconMode}`;
     /**
      * @private
      */
@@ -158,10 +148,6 @@ declare class Icon extends UI5Element implements IIcon {
      * @private
      */
     accData?: I18nText;
-    /**
-     * @private
-     */
-    focused: boolean;
     /**
     * @private
     */
@@ -174,20 +160,16 @@ declare class Icon extends UI5Element implements IIcon {
     packageName?: string;
     viewBox?: string;
     customSvg?: object;
-    _onfocusout?: ((event: FocusEvent) => void);
-    _onfocusin?: ((event: FocusEvent) => void);
-    _onFocusInHandler(): void;
-    _onFocusOutHandler(): void;
     _onkeydown(e: KeyboardEvent): void;
     _onkeyup(e: KeyboardEvent): void;
     /**
     * Enforce "ltr" direction, based on the icons collection metadata.
     */
     get _dir(): "ltr" | undefined;
-    get effectiveAriaHidden(): string | true | undefined;
-    get _tabIndex(): "0" | undefined;
-    get isDecorative(): boolean;
-    get effectiveAccessibleRole(): string;
+    get effectiveAriaHidden(): "true" | undefined;
+    get _tabIndex(): 0 | undefined;
+    get effectiveAccessibleRole(): "button" | "presentation" | "img";
+    onEnterDOM(): void;
     onBeforeRendering(): Promise<void>;
     get hasIconTooltip(): string | false | undefined;
 }

package/dist/Icon.js

@@ -5,20 +5,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import { getIconData, getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
-import IconTemplate from "./generated/templates/IconTemplate.lit.js";
-import IconDesign from "./types/IconDesign.js";
+import IconTemplate from "./IconTemplate.js";
+import IconMode from "./types/IconMode.js";
 // Styles
 import iconCss from "./generated/themes/Icon.css.js";
 const ICON_NOT_FOUND = "ICON_NOT_FOUND";
-const PRESENTATION_ROLE = "presentation";
 /**
  * @class
  * ### Overview
@@ -40,7 +40,7 @@ const PRESENTATION_ROLE = "presentation";
  * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).
  * - [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the "tnt" collection and includes the following
  * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).
- * - [@ui5/webcomponents-icons-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the "business-suite" collection and includes the following
+ * - [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the "business-suite" collection and includes the following
  * [icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).
  *
  * 2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**
@@ -77,7 +77,7 @@ const PRESENTATION_ROLE = "presentation";
  *
  * ### Keyboard Handling
  *
- * - [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.
+ * - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.
  * - [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.
  *
  * ### ES6 Module Import
@@ -90,28 +90,53 @@ const PRESENTATION_ROLE = "presentation";
  * @public
  */
 let Icon = class Icon extends UI5Element {
-    _onFocusInHandler() {
-        if (this.interactive) {
-            this.focused = true;
-        }
-    }
-    _onFocusOutHandler() {
-        this.focused = false;
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the component semantic design.
+         * @default "Default"
+         * @public
+         * @since 1.9.2
+         */
+        this.design = "Default";
+        /**
+         * Defines whether the component should have a tooltip.
+         *
+         * **Note:** The tooltip text should be provided via the `accessible-name` property.
+         * @default false
+         * @public
+         */
+        this.showTooltip = false;
+        /**
+         * Defines the mode of the component.
+         * @default "Decorative"
+         * @public
+         * @since 2.0.0
+         */
+        this.mode = "Decorative";
+        /**
+         * @private
+         */
+        this.pathData = [];
+        /**
+        * @private
+        */
+        this.invalid = false;
     }
     _onkeydown(e) {
-        if (!this.interactive) {
+        if (this.mode !== IconMode.Interactive) {
             return;
         }
         if (isEnter(e)) {
-            this.fireEvent("click");
+            this.fireDecoratorEvent("click");
         }
         if (isSpace(e)) {
             e.preventDefault(); // prevent scrolling
         }
     }
     _onkeyup(e) {
-        if (this.interactive && isSpace(e)) {
-            this.fireEvent("click");
+        if (this.mode === IconMode.Interactive && isSpace(e)) {
+            this.fireDecoratorEvent("click");
         }
     }
     /**
@@ -121,34 +146,30 @@ let Icon = class Icon extends UI5Element {
         return this.ltr ? "ltr" : undefined;
     }
     get effectiveAriaHidden() {
-        if (this.ariaHidden === "") {
-            if (this.isDecorative) {
-                return true;
-            }
-            return;
-        }
-        return this.ariaHidden;
+        return this.mode === IconMode.Decorative ? "true" : undefined;
     }
     get _tabIndex() {
-        return this.interactive ? "0" : undefined;
-    }
-    get isDecorative() {
-        return this.effectiveAccessibleRole === PRESENTATION_ROLE;
+        return this.mode === IconMode.Interactive ? 0 : undefined;
     }
     get effectiveAccessibleRole() {
-        if (this.accessibleRole) {
-            return this.accessibleRole;
+        switch (this.mode) {
+            case IconMode.Interactive:
+                return "button";
+            case IconMode.Decorative:
+                return "presentation";
+            default:
+                return "img";
         }
-        if (this.interactive) {
-            return "button";
+    }
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
         }
-        return this.effectiveAccessibleName ? "img" : PRESENTATION_ROLE;
     }
     async onBeforeRendering() {
         const name = this.name;
         if (!name) {
-            /* eslint-disable-next-line */
-            return console.warn("Icon name property is required", this);
+            return;
         }
         let iconData = getIconDataSync(name);
         if (!iconData) {
@@ -175,8 +196,6 @@ let Icon = class Icon extends UI5Element {
         this.accData = iconData.accData;
         this.ltr = iconData.ltr;
         this.packageName = iconData.packageName;
-        this._onfocusout = this.interactive ? this._onFocusOutHandler.bind(this) : undefined;
-        this._onfocusin = this.interactive ? this._onFocusInHandler.bind(this) : undefined;
         if (this.accessibleName) {
             this.effectiveAccessibleName = this.accessibleName;
         }
@@ -193,11 +212,8 @@ let Icon = class Icon extends UI5Element {
     }
 };
 __decorate([
-    property({ type: IconDesign, defaultValue: IconDesign.Default })
+    property()
 ], Icon.prototype, "design", void 0);
-__decorate([
-    property({ type: Boolean })
-], Icon.prototype, "interactive", void 0);
 __decorate([
     property()
 ], Icon.prototype, "name", void 0);
@@ -209,31 +225,25 @@ __decorate([
 ], Icon.prototype, "showTooltip", void 0);
 __decorate([
     property()
-], Icon.prototype, "accessibleRole", void 0);
-__decorate([
-    property()
-], Icon.prototype, "ariaHidden", void 0);
+], Icon.prototype, "mode", void 0);
 __decorate([
-    property({ multiple: true })
+    property({ type: Array })
 ], Icon.prototype, "pathData", void 0);
 __decorate([
-    property({ type: Object, defaultValue: undefined, noAttribute: true })
+    property({ type: Object, noAttribute: true })
 ], Icon.prototype, "accData", void 0);
-__decorate([
-    property({ type: Boolean })
-], Icon.prototype, "focused", void 0);
 __decorate([
     property({ type: Boolean })
 ], Icon.prototype, "invalid", void 0);
 __decorate([
-    property({ noAttribute: true, defaultValue: undefined })
+    property({ noAttribute: true })
 ], Icon.prototype, "effectiveAccessibleName", void 0);
 Icon = __decorate([
     customElement({
         tag: "ui5-icon",
         languageAware: true,
         themeAware: true,
-        renderer: litRender,
+        renderer: jsxRender,
         template: IconTemplate,
         styles: iconCss,
     })
@@ -241,11 +251,13 @@ Icon = __decorate([
      * Fired on mouseup, `SPACE` and `ENTER`.
      * - on mouse click, the icon fires native `click` event
      * - on `SPACE` and `ENTER`, the icon fires custom `click` event
-     * @private
-     * @since 1.0.0-rc.8
+     * @public
+     * @since 2.11.0
      */
     ,
-    event("click")
+    event("click", {
+        bubbles: true,
+    })
 ], Icon);
 Icon.define();
 export default Icon;

package/dist/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../src/Icon.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport { getIconData, getIconDataSync, IconData } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport IconTemplate from \"./generated/templates/IconTemplate.lit.js\";\nimport IconDesign from \"./types/IconDesign.js\";\n\n// Styles\nimport iconCss from \"./generated/themes/Icon.css.js\";\n\n/**\n * Interface for components that represent an icon, usable in numerous higher-order components\n * @public\n */\ninterface IIcon extends HTMLElement { }\n\nconst ICON_NOT_FOUND = \"ICON_NOT_FOUND\";\nconst PRESENTATION_ROLE = \"presentation\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-icon` component represents an SVG icon.\n * There are two main scenarios how the `ui5-icon` component is used:\n * as a purely decorative element,\n * or as an interactive element that can be focused and clicked.\n *\n * ### Usage\n *\n * 1. **Get familiar with the icons collections.**\n *\n * Before displaying an icon, you need to explore the icons collections to find and import the desired icon.\n *\n * Currently there are 3 icons collection, available as 3 npm packages:\n *\n * - [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n * - [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n * - [@ui5/webcomponents-icons-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n * [icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n *\n * 2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n *\n * `npm i @ui5/webcomponents-icons`\n * `npm i @ui5/webcomponents-icons-tnt`\n * `npm i @ui5/webcomponents-icons-business-suite`\n *\n * 3. **Then, import the desired icon**.\n *\n * `import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n *\n * **For Example**:\n *\n * For the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n *\n * `import \"@ui5/webcomponents-icons/dist/employee.js\";`\n *\n * For the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n *\n * `import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n *\n * For the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n *\n * `import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n *\n * 4. **Display the icon using the `ui5-icon` web component.**\n * Set the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\n * and the icon name to the `name` property.\n *\n * `<ui5-icon name=\"employee\"></ui5-icon>`\n * `<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n * `<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n *\n * ### Keyboard Handling\n *\n * - [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.\n * - [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Icon.js\";`\n * @csspart root - Used to style the outermost wrapper of the `ui5-icon`.\n * @constructor\n * @extends UI5Element\n * @implements {IIcon}\n * @public\n */\n@customElement({\n\ttag: \"ui5-icon\",\n\tlanguageAware: true,\n\tthemeAware: true,\n\trenderer: litRender,\n\ttemplate: IconTemplate,\n\tstyles: iconCss,\n})\n/**\n * Fired on mouseup, `SPACE` and `ENTER`.\n * - on mouse click, the icon fires native `click` event\n * - on `SPACE` and `ENTER`, the icon fires custom `click` event\n * @private\n * @since 1.0.0-rc.8\n */\n@event(\"click\")\nclass Icon extends UI5Element implements IIcon {\n\t/**\n\t * Defines the component semantic design.\n\t * @default \"Default\"\n\t * @public\n\t * @since 1.9.2\n\t */\n\t@property({ type: IconDesign, defaultValue: IconDesign.Default })\n\tdesign!: `${IconDesign}`;\n\n\t/**\n\t * Defines if the icon is interactive (focusable and pressable)\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.8\n\t */\n\t@property({ type: Boolean })\n\tinteractive!: boolean;\n\n\t/**\n\t * Defines the unique identifier (icon name) of the component.\n\t *\n\t * To browse all available icons, see the\n\t * [SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n\t * [SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n\t * [SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\t *\n\t * Example:\n\t * `name='add'`, `name='delete'`, `name='employee'`.\n\t *\n\t * **Note:** To use the SAP Fiori Tools icons,\n\t * you need to set the `tnt` prefix in front of the icon's name.\n\t *\n\t * Example:\n\t * `name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\t *\n\t * **Note:** To use the SAP Business Suite icons,\n\t * you need to set the `business-suite` prefix in front of the icon's name.\n\t *\n\t * Example:\n\t * `name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tname!: string;\n\n\t/**\n\t * Defines the text alternative of the component.\n\t * If not provided a default text alternative will be set, if present.\n\t *\n\t * **Note:** Every icon should have a text alternative in order to\n\t * calculate its accessible name.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\taccessibleName!: string;\n\n\t/**\n\t * Defines whether the component should have a tooltip.\n\t *\n\t * **Note:** The tooltip text should be provided via the `accessible-name` property.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowTooltip!: boolean;\n\n\t/**\n\t * Defines the accessibility role of the component.\n\t * @default \"\"\n\t * @public\n\t * @since 1.1.0\n\t */\n\t@property()\n\taccessibleRole!: string;\n\n\t/**\n\t * Defines the ARIA hidden state of the component.\n\t * Note: If the role is presentation the default value of aria-hidden will be true.\n\t * @private\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\tariaHidden!: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ multiple: true })\n\tpathData!: Array<string>;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Object, defaultValue: undefined, noAttribute: true })\n\taccData?: I18nText;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused!: boolean;\n\n\t/**\n\t* @private\n\t*/\n\t@property({ type: Boolean })\n\tinvalid!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true, defaultValue: undefined })\n\teffectiveAccessibleName?: string;\n\n\tltr?: boolean;\n\tpackageName?: string;\n\tviewBox?: string;\n\tcustomSvg?: object;\n\n\t_onfocusout?: ((event: FocusEvent) => void);\n\t_onfocusin?: ((event: FocusEvent) => void);\n\n\t_onFocusInHandler() {\n\t\tif (this.interactive) {\n\t\t\tthis.focused = true;\n\t\t}\n\t}\n\n\t_onFocusOutHandler() {\n\t\tthis.focused = false;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (!this.interactive) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.fireEvent(\"click\");\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault(); // prevent scrolling\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (this.interactive && isSpace(e)) {\n\t\t\tthis.fireEvent(\"click\");\n\t\t}\n\t}\n\n\t/**\n\t* Enforce \"ltr\" direction, based on the icons collection metadata.\n\t*/\n\tget _dir() {\n\t\treturn this.ltr ? \"ltr\" : undefined;\n\t}\n\n\tget effectiveAriaHidden() {\n\t\tif (this.ariaHidden === \"\") {\n\t\t\tif (this.isDecorative) {\n\t\t\t\treturn true;\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\treturn this.ariaHidden;\n\t}\n\n\tget _tabIndex() {\n\t\treturn this.interactive ? \"0\" : undefined;\n\t}\n\n\tget isDecorative() {\n\t\treturn this.effectiveAccessibleRole === PRESENTATION_ROLE;\n\t}\n\n\tget effectiveAccessibleRole() {\n\t\tif (this.accessibleRole) {\n\t\t\treturn this.accessibleRole;\n\t\t}\n\n\t\tif (this.interactive) {\n\t\t\treturn \"button\";\n\t\t}\n\n\t\treturn this.effectiveAccessibleName ? \"img\" : PRESENTATION_ROLE;\n\t}\n\n\tasync onBeforeRendering() {\n\t\tconst name = this.name;\n\t\tif (!name) {\n\t\t\t/* eslint-disable-next-line */\n\t\t\treturn console.warn(\"Icon name property is required\", this);\n\t\t}\n\n\t\tlet iconData: typeof ICON_NOT_FOUND | IconData | undefined = getIconDataSync(name);\n\t\tif (!iconData) {\n\t\t\ticonData = await getIconData(name);\n\t\t}\n\n\t\tif (!iconData) {\n\t\t\tthis.invalid = true;\n\t\t\t/* eslint-disable-next-line */\n\t\t\treturn console.warn(`Required icon is not registered. Invalid icon name: ${this.name}`);\n\t\t}\n\n\t\tif (iconData === ICON_NOT_FOUND) {\n\t\t\tthis.invalid = true;\n\t\t\t/* eslint-disable-next-line */\n\t\t\treturn console.warn(`Required icon is not registered. You can either import the icon as a module in order to use it e.g. \"@ui5/webcomponents-icons/dist/${name.replace(\"sap-icon://\", \"\")}.js\", or setup a JSON build step and import \"@ui5/webcomponents-icons/dist/AllIcons.js\".`);\n\t\t}\n\n\t\tthis.viewBox = iconData.viewBox || \"0 0 512 512\";\n\n\t\tif (iconData.customTemplate) {\n\t\t\ticonData.pathData = [];\n\t\t\tthis.customSvg = executeTemplate(iconData.customTemplate, this);\n\t\t}\n\n\t\t// in case a new valid name is set, show the icon\n\t\tthis.invalid = false;\n\t\tthis.pathData = Array.isArray(iconData.pathData) ? iconData.pathData : [iconData.pathData];\n\t\tthis.accData = iconData.accData;\n\t\tthis.ltr = iconData.ltr;\n\t\tthis.packageName = iconData.packageName;\n\n\t\tthis._onfocusout = this.interactive ? this._onFocusOutHandler.bind(this) : undefined;\n\t\tthis._onfocusin = this.interactive ? this._onFocusInHandler.bind(this) : undefined;\n\n\t\tif (this.accessibleName) {\n\t\t\tthis.effectiveAccessibleName = this.accessibleName;\n\t\t} else if (this.accData) {\n\t\t\tconst i18nBundle = await getI18nBundle(this.packageName);\n\t\t\tthis.effectiveAccessibleName = i18nBundle.getText(this.accData) || undefined;\n\t\t} else {\n\t\t\tthis.effectiveAccessibleName = undefined;\n\t\t}\n\t}\n\n\tget hasIconTooltip() {\n\t\treturn this.showTooltip && this.effectiveAccessibleName;\n\t}\n}\n\nIcon.define();\n\nexport default Icon;\nexport type {\n\tIIcon,\n};\n"]}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../src/Icon.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRender from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type { IconData } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getIconData, getIconDataSync } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport IconTemplate from \"./IconTemplate.js\";\nimport type IconDesign from \"./types/IconDesign.js\";\nimport IconMode from \"./types/IconMode.js\";\n\n// Styles\nimport iconCss from \"./generated/themes/Icon.css.js\";\n\n/**\n * Interface for components that represent an icon, usable in numerous higher-order components\n * @public\n */\ninterface IIcon extends HTMLElement { }\n\nconst ICON_NOT_FOUND = \"ICON_NOT_FOUND\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-icon` component represents an SVG icon.\n * There are two main scenarios how the `ui5-icon` component is used:\n * as a purely decorative element,\n * or as an interactive element that can be focused and clicked.\n *\n * ### Usage\n *\n * 1. **Get familiar with the icons collections.**\n *\n * Before displaying an icon, you need to explore the icons collections to find and import the desired icon.\n *\n * Currently there are 3 icons collection, available as 3 npm packages:\n *\n * - [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n * - [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n * - [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n * [icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n *\n * 2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n *\n * `npm i @ui5/webcomponents-icons`\n * `npm i @ui5/webcomponents-icons-tnt`\n * `npm i @ui5/webcomponents-icons-business-suite`\n *\n * 3. **Then, import the desired icon**.\n *\n * `import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n *\n * **For Example**:\n *\n * For the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n *\n * `import \"@ui5/webcomponents-icons/dist/employee.js\";`\n *\n * For the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n *\n * `import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n *\n * For the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n *\n * `import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n *\n * 4. **Display the icon using the `ui5-icon` web component.**\n * Set the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\n * and the icon name to the `name` property.\n *\n * `<ui5-icon name=\"employee\"></ui5-icon>`\n * `<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n * `<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n *\n * ### Keyboard Handling\n *\n * - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n * - [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Icon.js\";`\n * @csspart root - Used to style the outermost wrapper of the `ui5-icon`.\n * @constructor\n * @extends UI5Element\n * @implements {IIcon}\n * @public\n */\n@customElement({\n\ttag: \"ui5-icon\",\n\tlanguageAware: true,\n\tthemeAware: true,\n\trenderer: jsxRender,\n\ttemplate: IconTemplate,\n\tstyles: iconCss,\n})\n/**\n * Fired on mouseup, `SPACE` and `ENTER`.\n * - on mouse click, the icon fires native `click` event\n * - on `SPACE` and `ENTER`, the icon fires custom `click` event\n * @public\n * @since 2.11.0\n */\n@event(\"click\", {\n\tbubbles: true,\n})\nclass Icon extends UI5Element implements IIcon {\n\teventDetails!: {\n\t\tclick: void\n\t}\n\t/**\n\t * Defines the component semantic design.\n\t * @default \"Default\"\n\t * @public\n\t * @since 1.9.2\n\t */\n\t@property()\n\tdesign: `${IconDesign}` = \"Default\";\n\n\t/**\n\t * Defines the unique identifier (icon name) of the component.\n\t *\n\t * To browse all available icons, see the\n\t * [SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n\t * [SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n\t * [SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\t *\n\t * Example:\n\t * `name='add'`, `name='delete'`, `name='employee'`.\n\t *\n\t * **Note:** To use the SAP Fiori Tools icons,\n\t * you need to set the `tnt` prefix in front of the icon's name.\n\t *\n\t * Example:\n\t * `name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\t *\n\t * **Note:** To use the SAP Business Suite icons,\n\t * you need to set the `business-suite` prefix in front of the icon's name.\n\t *\n\t * Example:\n\t * `name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines the text alternative of the component.\n\t * If not provided a default text alternative will be set, if present.\n\t *\n\t * **Note:** Every icon should have a text alternative in order to\n\t * calculate its accessible name.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines whether the component should have a tooltip.\n\t *\n\t * **Note:** The tooltip text should be provided via the `accessible-name` property.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowTooltip = false;\n\n\t/**\n\t * Defines the mode of the component.\n\t * @default \"Decorative\"\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property()\n\tmode: `${IconMode}` = \"Decorative\";\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Array })\n\tpathData: Array<string> = [];\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Object, noAttribute: true })\n\taccData?: I18nText;\n\n\t/**\n\t* @private\n\t*/\n\t@property({ type: Boolean })\n\tinvalid = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\teffectiveAccessibleName?: string;\n\n\tltr?: boolean;\n\tpackageName?: string;\n\tviewBox?: string;\n\tcustomSvg?: object;\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (this.mode !== IconMode.Interactive) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.fireDecoratorEvent(\"click\");\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault(); // prevent scrolling\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (this.mode === IconMode.Interactive && isSpace(e)) {\n\t\t\tthis.fireDecoratorEvent(\"click\");\n\t\t}\n\t}\n\n\t/**\n\t* Enforce \"ltr\" direction, based on the icons collection metadata.\n\t*/\n\tget _dir() {\n\t\treturn this.ltr ? \"ltr\" : undefined;\n\t}\n\n\tget effectiveAriaHidden() {\n\t\treturn this.mode === IconMode.Decorative ? \"true\" : undefined;\n\t}\n\n\tget _tabIndex() {\n\t\treturn this.mode === IconMode.Interactive ? 0 : undefined;\n\t}\n\n\tget effectiveAccessibleRole() {\n\t\tswitch (this.mode) {\n\t\tcase IconMode.Interactive:\n\t\t\treturn \"button\";\n\t\tcase IconMode.Decorative:\n\t\t\treturn \"presentation\";\n\t\tdefault:\n\t\t\treturn \"img\";\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tasync onBeforeRendering() {\n\t\tconst name = this.name;\n\t\tif (!name) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet iconData: typeof ICON_NOT_FOUND | IconData | undefined = getIconDataSync(name);\n\t\tif (!iconData) {\n\t\t\ticonData = await getIconData(name);\n\t\t}\n\n\t\tif (!iconData) {\n\t\t\tthis.invalid = true;\n\t\t\t/* eslint-disable-next-line */\n\t\t\treturn console.warn(`Required icon is not registered. Invalid icon name: ${this.name}`);\n\t\t}\n\n\t\tif (iconData === ICON_NOT_FOUND) {\n\t\t\tthis.invalid = true;\n\t\t\t/* eslint-disable-next-line */\n\t\t\treturn console.warn(`Required icon is not registered. You can either import the icon as a module in order to use it e.g. \"@ui5/webcomponents-icons/dist/${name.replace(\"sap-icon://\", \"\")}.js\", or setup a JSON build step and import \"@ui5/webcomponents-icons/dist/AllIcons.js\".`);\n\t\t}\n\n\t\tthis.viewBox = iconData.viewBox || \"0 0 512 512\";\n\n\t\tif (iconData.customTemplate) {\n\t\t\ticonData.pathData = [];\n\t\t\tthis.customSvg = executeTemplate(iconData.customTemplate, this);\n\t\t}\n\n\t\t// in case a new valid name is set, show the icon\n\t\tthis.invalid = false;\n\t\tthis.pathData = Array.isArray(iconData.pathData) ? iconData.pathData : [iconData.pathData];\n\t\tthis.accData = iconData.accData;\n\t\tthis.ltr = iconData.ltr;\n\t\tthis.packageName = iconData.packageName;\n\n\t\tif (this.accessibleName) {\n\t\t\tthis.effectiveAccessibleName = this.accessibleName;\n\t\t} else if (this.accData) {\n\t\t\tconst i18nBundle = await getI18nBundle(this.packageName);\n\t\t\tthis.effectiveAccessibleName = i18nBundle.getText(this.accData) || undefined;\n\t\t} else {\n\t\t\tthis.effectiveAccessibleName = undefined;\n\t\t}\n\t}\n\n\tget hasIconTooltip() {\n\t\treturn this.showTooltip && this.effectiveAccessibleName;\n\t}\n}\n\nIcon.define();\n\nexport default Icon;\nexport type {\n\tIIcon,\n};\n"]}

package/dist/IconTemplate.d.ts

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

package/dist/IconTemplate.js

@@ -0,0 +1,26 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function IconTemplate() {
+    return (_jsxs("svg", { class: "ui5-icon-root", part: "root", tabindex: this._tabIndex, dir: this._dir, viewBox: this.viewBox, role: this.effectiveAccessibleRole, focusable: "false", preserveAspectRatio: "xMidYMid meet", "aria-label": this.effectiveAccessibleName, "aria-hidden": this.effectiveAriaHidden, xmlns: "http://www.w3.org/2000/svg", onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, children: [this.hasIconTooltip &&
+                _jsxs("title", { id: `${this._id}-tooltip`, children: [" ", this.effectiveAccessibleName, " "] }), _jsxs("g", { role: "presentation", children: [this.customSvg && svgTemplate.call(this, this.customSvg), this.pathData.map(path => (_jsx("path", { d: path })))] })] }));
+}
+function svgTemplate(template) {
+    if (template.strings) {
+        return _jsx("g", { dangerouslySetInnerHTML: { __html: renderLegacySVGTemplate(this.customSvg) ?? "" } });
+    }
+    return template;
+}
+// Renders legacy (lit) SVG template
+function renderLegacySVGTemplate(customTemplate) {
+    const { strings, values } = customTemplate;
+    return strings.map((str, i) => {
+        const value = values && values[i];
+        if (typeof value === "string") {
+            return str + value;
+        }
+        if (typeof value === "object" && value?.strings) {
+            return str + renderLegacySVGTemplate(value);
+        }
+        return str;
+    }).join("");
+}
+//# sourceMappingURL=IconTemplate.js.map

package/dist/IconTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconTemplate.js","sourceRoot":"","sources":["../src/IconTemplate.tsx"],"names":[],"mappings":";AAOA,MAAM,CAAC,OAAO,UAAU,YAAY;IACnC,OAAO,CACN,eACC,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,uBAAuB,EAClC,SAAS,EAAC,OAAO,EACjB,mBAAmB,EAAC,eAAe,gBACvB,IAAI,CAAC,uBAAuB,iBAC3B,IAAI,CAAC,mBAAmB,EACrC,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,aAEpB,IAAI,CAAC,cAAc;gBACR,iBAAO,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,kBAAK,IAAI,CAAC,uBAAuB,SAAU,EAGxF,aAAG,IAAI,EAAC,cAAc,aACpB,IAAI,CAAC,SAAS,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,EAExD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC1B,eAAM,CAAC,EAAE,IAAI,GAAS,CACtB,CAAC,IACC,IACC,CACN,CAAC;AACH,CAAC;AAED,SAAS,WAAW,CAAa,QAAoC;IACpE,IAAK,QAA8B,CAAC,OAAO,EAAE,CAAC;QAC7C,OAAO,YAAG,uBAAuB,EAAE,EAAE,MAAM,EAAE,uBAAuB,CAAC,IAAI,CAAC,SAA8B,CAAC,IAAI,EAAE,EAAE,GAAM,CAAC;IACzH,CAAC;IACD,OAAO,QAAQ,CAAC;AACjB,CAAC;AAED,oCAAoC;AACpC,SAAS,uBAAuB,CAAC,cAAiC;IACjE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC;IAE3C,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,GAAW,EAAE,CAAS,EAAE,EAAE;QAC7C,MAAM,KAAK,GAAG,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC;QAElC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC/B,OAAO,GAAG,GAAG,KAAK,CAAC;QACpB,CAAC;QAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,EAAE,OAAO,EAAE,CAAC;YACjD,OAAO,GAAG,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,GAAG,CAAC;IACZ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC","sourcesContent":["import type Icon from \"./Icon.js\";\n\ntype LegacySVGTemplate = {\n\tstrings: string[],\n\tvalues?: Array<string | LegacySVGTemplate>\n}\n\nexport default function IconTemplate(this: Icon) {\n\treturn (\n\t\t<svg\n\t\t\tclass=\"ui5-icon-root\"\n\t\t\tpart=\"root\"\n\t\t\ttabindex={this._tabIndex}\n\t\t\tdir={this._dir}\n\t\t\tviewBox={this.viewBox}\n\t\t\trole={this.effectiveAccessibleRole}\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\taria-label={this.effectiveAccessibleName}\n\t\t\taria-hidden={this.effectiveAriaHidden}\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t>\n\t\t\t{ this.hasIconTooltip &&\n                <title id={`${this._id}-tooltip`} > {this.effectiveAccessibleName} </title>\n\t\t\t}\n\n\t\t\t<g role=\"presentation\">\n\t\t\t\t{this.customSvg && svgTemplate.call(this, this.customSvg)}\n\n\t\t\t\t{this.pathData.map(path => (\n\t\t\t\t\t<path d={path}></path>\n\t\t\t\t))}\n\t\t\t</g>\n\t\t</svg>\n\t);\n}\n\nfunction svgTemplate(this: Icon, template: object | LegacySVGTemplate) {\n\tif ((template as LegacySVGTemplate).strings) {\n\t\treturn <g dangerouslySetInnerHTML={{ __html: renderLegacySVGTemplate(this.customSvg as LegacySVGTemplate) ?? \"\" }}></g>;\n\t}\n\treturn template;\n}\n\n// Renders legacy (lit) SVG template\nfunction renderLegacySVGTemplate(customTemplate: LegacySVGTemplate): string {\n\tconst { strings, values } = customTemplate;\n\n\treturn strings.map((str: string, i: number) => {\n\t\tconst value = values && values[i];\n\n\t\tif (typeof value === \"string\") {\n\t\t\treturn str + value;\n\t\t}\n\n\t\tif (typeof value === \"object\" && value?.strings) {\n\t\t\treturn str + renderLegacySVGTemplate(value);\n\t\t}\n\n\t\treturn str;\n\t}).join(\"\");\n}\n"]}