@ui5/webcomponents 0.0.0-d9933bd82 → 0.0.0-da0d3eb88

package/dist/Icon.js

@@ -1,281 +1,231 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
-import { getIconData, getIconDataSync } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js";
-import createStyleInHead from "@ui5/webcomponents-base/dist/util/createStyleInHead.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.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 IconMode from "./types/IconMode.js";
 // Styles
 import iconCss from "./generated/themes/Icon.css.js";
-
 const ICON_NOT_FOUND = "ICON_NOT_FOUND";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-icon",
-	properties: /** @lends sap.ui.webcomponents.main.Icon.prototype */ {
-		/**
-		 * Defines if the icon is interactive (focusable and pressable)
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 * @since 1.0.0-rc.8
-		 */
-		interactive: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the unique identifier (icon name) of each <code>ui5-icon</code>.
-		 * <br><br>
-		 * To browse all available icons, see the
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
-		 * <br><br>
-		 * Example:
-		 * <br>
-		 * <code>name='add'</code>, <code>name='delete'</code>, <code>name='employee'</code>.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		*/
-		name: {
-			type: String,
-		},
-
-		/**
-		 * Defines the text alternative of the <code>ui5-icon</code>.
-		 * If not provided a default text alternative will be set, if present.
-		 * <br><br>
-		 * <b>Note:</b> Every icon should have a text alternative in order to
-		 * calculate its accessible name.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		accessibleName: {
-			type: String,
-		},
-
-		/**
-		 * Defines whether the <code>ui5-icon</code> should have a tooltip.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		showTooltip: {
-			type: Boolean,
-		},
-
-		/**
-		 * @private
-		 */
-		pathData: {
-			type: String,
-			noAttribute: true,
-		},
-
-		/**
-		 * @private
-		 */
-		accData: {
-			type: Object,
-			noAttribute: true,
-		},
-
-		/**
-		 * @private
-		 */
-		focused: {
-			type: Boolean,
-		},
-
-		/**
-		* @private
-		*/
-		invalid: {
-			type: Boolean,
-		},
-	},
-	events: {
-		/**
-		 * Fired on mouseup, space and enter if icon is interactive
-		 * @private
-		 * @since 1.0.0-rc.8
-		 */
-		click: {
-
-		},
-	},
-};
-
 /**
  * @class
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
+ *
+ * The `ui5-icon` component represents an SVG icon.
+ * There are two main scenarios how the `ui5-icon` component is used:
+ * as a purely decorative element,
+ * or as an interactive element that can be focused and clicked.
+ *
+ * ### Usage
+ *
+ * 1. **Get familiar with the icons collections.**
+ *
+ * Before displaying an icon, you need to explore the icons collections to find and import the desired icon.
+ *
+ * Currently there are 3 icons collection, available as 3 npm packages:
+ *
+ * - [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the "SAP-icons" collection and includes the following
+ * [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
+ * [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.**
+ *
+ * `npm i @ui5/webcomponents-icons`
+ * `npm i @ui5/webcomponents-icons-tnt`
+ * `npm i @ui5/webcomponents-icons-business-suite`
  *
- * The <code>ui5-icon</code> component represents an SVG icon.
- * There are two main scenarios how the <code>ui5-icon</code> component is used:
- * as a purely decorative element; or as a visually appealing clickable area in the form of an icon button.
- * <br><br>
- * A large set of built-in icons is available
- * and they can be used by setting the <code>name</code> property on the <code>ui5-icon</code>.
+ * 3. **Then, import the desired icon**.
  *
- * <h3>ES6 Module Import</h3>
+ * `import "@ui5/\{package_name\}/dist/\{icon_name\}.js";`
  *
- * <code>import "@ui5/webcomponents/dist/Icon.js";</code>
+ * **For Example**:
  *
+ * For the standard "SAP-icons" icon collection, import an icon from the `@ui5/webcomponents-icons` package:
+ *
+ * `import "@ui5/webcomponents-icons/dist/employee.js";`
+ *
+ * For the "tnt" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:
+ *
+ * `import "@ui5/webcomponents-icons-tnt/dist/antenna.js";`
+ *
+ * For the "business-suite" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:
+ *
+ * `import "@ui5/webcomponents-icons-business-suite/dist/ab-testing.js";`
+ *
+ * 4. **Display the icon using the `ui5-icon` web component.**
+ * Set the icon collection ("SAP-icons", "tnt" or "business-suite" - "SAP-icons" is the default icon collection and can be skipped)
+ * and the icon name to the `name` property.
+ *
+ * `<ui5-icon name="employee"></ui5-icon>`
+ * `<ui5-icon name="tnt/antenna"></ui5-icon>`
+ * `<ui5-icon name="business-suite/ab-testing"></ui5-icon>`
+ *
+ * ### Keyboard Handling
+ *
+ * - [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
+ *
+ * `import "@ui5/webcomponents/dist/Icon.js";`
+ * @csspart root - Used to style the outermost wrapper of the `ui5-icon`.
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.Icon
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-icon
+ * @extends UI5Element
+ * @implements {IIcon}
  * @public
  */
-class Icon extends UI5Element {
-	constructor() {
-		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return IconTemplate;
-	}
-
-	static get styles() {
-		return iconCss;
-	}
-
-	static async onDefine() {
-		this.createGlobalStyle(); // hide all icons until the first icon has rendered (and added the Icon.css)
-		await fetchI18nBundle("@ui5/webcomponents");
-	}
-
-	_onfocusin(event) {
-		if (this.interactive) {
-			this.focused = true;
-		}
-	}
-
-	_onfocusout(event) {
-		this.focused = false;
-	}
-
-	_onkeydown(event) {
-		if (this.interactive && isEnter(event)) {
-			this.fireEvent("click");
-		}
-	}
-
-	_onkeyup(event) {
-		if (this.interactive && isSpace(event)) {
-			this.fireEvent("click");
-		}
-	}
-
-	_onclick(event) {
-		if (this.interactive) {
-			event.preventDefault();
-			// Prevent the native event and fire custom event because otherwise the noConfict event won't be thrown
-			this.fireEvent("click");
-		}
-	}
-
-	get tabIndex() {
-		return this.interactive ? "0" : "-1";
-	}
-
-	get role() {
-		if (this.interactive) {
-			return "button";
-		}
-
-		return this.accessibleNameText ? "img" : "presentation";
-	}
-
-	static createGlobalStyle() {
-		if (!window.ShadyDOM) {
-			return;
-		}
-		const styleElement = document.head.querySelector(`style[data-ui5-icon-global]`);
-		if (!styleElement) {
-			createStyleInHead(`ui5-icon { display: none !important; }`, { "data-ui5-icon-global": "" });
-		}
-	}
-
-	static removeGlobalStyle() {
-		if (!window.ShadyDOM) {
-			return;
-		}
-		const styleElement = document.head.querySelector(`style[data-ui5-icon-global]`);
-		if (styleElement) {
-			document.head.removeChild(styleElement);
-		}
-	}
-
-	async onBeforeRendering() {
-		const name = this.name;
-		if (!name) {
-			/* eslint-disable-next-line */
-			return console.warn("Icon name property is required", this);
-		}
-		let iconData = getIconDataSync(name);
-		if (!iconData) {
-			iconData = await getIconData(name);
-		}
-
-		if (iconData === ICON_NOT_FOUND) {
-			this.invalid = true;
-			/* eslint-disable-next-line */
-			return 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/icons/${name.replace("sap-icon://", "")}.js", or setup a JSON build step and import "@ui5/webcomponents-icons/dist/Assets.js".`);
-		}
-
-		if (!iconData) {
-			this.invalid = true;
-			/* eslint-disable-next-line */
-			return console.warn(`Required icon is not registered. Invalid icon name: ${this.name}`);
-		}
-
-		this.pathData = iconData.pathData;
-		this.accData = iconData.accData;
-	}
-
-	get hasIconTooltip() {
-		return this.showTooltip && this.accessibleNameText;
-	}
-
-	get accessibleNameText() {
-		if (this.accessibleName) {
-			return this.accessibleName;
-		}
-
-		return this.i18nBundle.getText(this.accData) || undefined;
-	}
-
-	get dir() {
-		return getRTL() ? "rtl" : "ltr";
-	}
-
-	async onEnterDOM() {
-		setTimeout(() => {
-			this.constructor.removeGlobalStyle(); // remove the global style as Icon.css is already in place
-		}, 0);
-	}
-}
-
+let Icon = class Icon extends UI5Element {
+    _onkeydown(e) {
+        if (this.mode !== IconMode.Interactive) {
+            return;
+        }
+        if (isEnter(e)) {
+            this.fireEvent("click");
+        }
+        if (isSpace(e)) {
+            e.preventDefault(); // prevent scrolling
+        }
+    }
+    _onkeyup(e) {
+        if (this.mode === IconMode.Interactive && isSpace(e)) {
+            this.fireEvent("click");
+        }
+    }
+    /**
+    * Enforce "ltr" direction, based on the icons collection metadata.
+    */
+    get _dir() {
+        return this.ltr ? "ltr" : undefined;
+    }
+    get effectiveAriaHidden() {
+        return this.mode === IconMode.Decorative ? "true" : undefined;
+    }
+    get _tabIndex() {
+        return this.mode === IconMode.Interactive ? "0" : undefined;
+    }
+    get effectiveAccessibleRole() {
+        switch (this.mode) {
+            case IconMode.Interactive:
+                return "button";
+            case IconMode.Decorative:
+                return "presentation";
+            default:
+                return "img";
+        }
+    }
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+    async onBeforeRendering() {
+        const name = this.name;
+        if (!name) {
+            /* eslint-disable-next-line */
+            return console.warn("Icon name property is required", this);
+        }
+        let iconData = getIconDataSync(name);
+        if (!iconData) {
+            iconData = await getIconData(name);
+        }
+        if (!iconData) {
+            this.invalid = true;
+            /* eslint-disable-next-line */
+            return console.warn(`Required icon is not registered. Invalid icon name: ${this.name}`);
+        }
+        if (iconData === ICON_NOT_FOUND) {
+            this.invalid = true;
+            /* eslint-disable-next-line */
+            return 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".`);
+        }
+        this.viewBox = iconData.viewBox || "0 0 512 512";
+        if (iconData.customTemplate) {
+            iconData.pathData = [];
+            this.customSvg = executeTemplate(iconData.customTemplate, this);
+        }
+        // in case a new valid name is set, show the icon
+        this.invalid = false;
+        this.pathData = Array.isArray(iconData.pathData) ? iconData.pathData : [iconData.pathData];
+        this.accData = iconData.accData;
+        this.ltr = iconData.ltr;
+        this.packageName = iconData.packageName;
+        if (this.accessibleName) {
+            this.effectiveAccessibleName = this.accessibleName;
+        }
+        else if (this.accData) {
+            const i18nBundle = await getI18nBundle(this.packageName);
+            this.effectiveAccessibleName = i18nBundle.getText(this.accData) || undefined;
+        }
+        else {
+            this.effectiveAccessibleName = undefined;
+        }
+    }
+    get hasIconTooltip() {
+        return this.showTooltip && this.effectiveAccessibleName;
+    }
+};
+__decorate([
+    property({ type: IconDesign, defaultValue: IconDesign.Default })
+], Icon.prototype, "design", void 0);
+__decorate([
+    property()
+], Icon.prototype, "name", void 0);
+__decorate([
+    property()
+], Icon.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: Boolean })
+], Icon.prototype, "showTooltip", void 0);
+__decorate([
+    property({ type: IconMode, defaultValue: IconMode.Image })
+], Icon.prototype, "mode", void 0);
+__decorate([
+    property({ multiple: true })
+], Icon.prototype, "pathData", void 0);
+__decorate([
+    property({ type: Object, defaultValue: undefined, noAttribute: true })
+], Icon.prototype, "accData", void 0);
+__decorate([
+    property({ type: Boolean })
+], Icon.prototype, "invalid", void 0);
+__decorate([
+    property({ noAttribute: true, defaultValue: undefined })
+], Icon.prototype, "effectiveAccessibleName", void 0);
+Icon = __decorate([
+    customElement({
+        tag: "ui5-icon",
+        languageAware: true,
+        themeAware: true,
+        renderer: litRender,
+        template: IconTemplate,
+        styles: iconCss,
+    })
+    /**
+     * 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
+     */
+    ,
+    event("click")
+], Icon);
 Icon.define();
-
 export default Icon;
+//# sourceMappingURL=Icon.js.map

package/dist/Icon.js.map

@@ -0,0 +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 { 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 \"./generated/templates/IconTemplate.lit.js\";\nimport 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-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: 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 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 mode of the component.\n\t * @default \"Image\"\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: IconMode, defaultValue: IconMode.Image })\n\tmode!: `${IconMode}`;\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\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_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.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.mode === IconMode.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\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\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\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"]}