@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/cjs/ifx-icon.cjs.entry.js

@@ -0,0 +1,134 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var icons = require('./icons-oFc1Jyfp.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const iconCss = () => `ifx-icon{display:inline-flex;justify-content:center}ifx-icon svg{outline:none}ifx-icon:empty{display:none}`;
+
+const IfxIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.consoleError = index.createEvent(this, "consoleError", 7);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * The icon that will be displayed.
+     * Refer to the [Icon Library](https://infineon.github.io/infineon-design-system-stencil/storybook/?path=/docs/icon-library--development) for available icons.
+     */
+    icon = "";
+    /**
+     * Emitted when the provided icon name is invalid and the component fails to render an icon.
+     *  The event detail contains a boolean value `true` indicating an error occurred.
+     */
+    consoleError;
+    /**
+     * The resolved icon as SVG string.
+     */
+    iconSvg;
+    updateIcon(_newIcon) {
+        this.setIcon();
+    }
+    convertStringToHtml(htmlString) {
+        const div = document.createElement("div");
+        div.innerHTML = htmlString;
+        return div.firstChild;
+    }
+    convertHtmlToObject(htmlElement) {
+        const pathToObject = Array.from(htmlElement.attributes, ({ name, value }) => ({ name, value })).reduce((acc, current) => {
+            acc[current.name] = current.value;
+            return acc;
+        }, {});
+        return pathToObject;
+    }
+    convertPathsToVnode(htmlPath) {
+        const svgPaths = [];
+        const parentPath = this.convertHtmlToObject(htmlPath);
+        const parentPathToVnode = index.h("path", parentPath);
+        svgPaths.push(parentPathToVnode);
+        if (htmlPath.firstChild) {
+            const paths = htmlPath.querySelectorAll("path");
+            const pathLength = htmlPath.querySelectorAll("path").length;
+            for (let i = 0; i < pathLength; i++) {
+                const pathToObject = this.convertHtmlToObject(paths[i]);
+                const objToVnode = index.h("path", pathToObject);
+                svgPaths.push(objToVnode);
+            }
+        }
+        return svgPaths;
+    }
+    getSVG(svgPath) {
+        const htmlPath = this.convertStringToHtml(this.iconSvg);
+        const width = htmlPath.getAttribute("width");
+        const height = htmlPath.getAttribute("height");
+        const fill = htmlPath.getAttribute("fill");
+        const viewBox = htmlPath.getAttribute("viewBox");
+        return (index.h("svg", { class: "inline-svg", width: width, height: height, xmlns: "http://www.w3.org/2000/svg", fill: fill, viewBox: viewBox, focusable: "false", role: "presentation", "aria-hidden": "true" // Label should be set on the ifx-icon element, e.g. <ifx-icon icon="c-check-16" aria-label="Check Icon"></ifx-icon>
+        }, ...svgPath));
+    }
+    constructIcon() {
+        if (this.iconSvg) {
+            const htmlPath = this.convertStringToHtml(this.iconSvg);
+            const svgPath = this.convertPathsToVnode(htmlPath);
+            const SVG = this.getSVG(svgPath);
+            return SVG;
+        }
+        else if (this.icon !== "") {
+            this.consoleError.emit(true);
+            return;
+        }
+        else {
+            return;
+        }
+    }
+    setIcon() {
+        const toCamelCase = (str) => str
+            .replace(/[-_]+(.)/g, (_, chr) => chr.toUpperCase())
+            .replace(/^(.)/, (m) => m.toLowerCase());
+        const iconName = toCamelCase(this.icon);
+        this.iconSvg = icons.getIcon(iconName);
+    }
+    isInsideAgGrid(el) {
+        let current = el;
+        while (current) {
+            if (current.className?.toLowerCase().startsWith("ag-")) {
+                return true;
+            }
+            current = current.parentElement;
+        }
+        return false;
+    }
+    isInsideChoices(el) {
+        let current = el;
+        while (current) {
+            if (current.className?.toLowerCase().startsWith("choices__")) {
+                return true;
+            }
+            current = current.parentElement;
+        }
+        return false;
+    }
+    componentWillLoad() {
+        this.setIcon();
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            if (!this.isInsideAgGrid(this.el) && !this.isInsideChoices(this.el)) {
+                const framework = tracking.detectFramework();
+                tracking.trackComponent("ifx-icon", await framework);
+            }
+        }
+    }
+    render() {
+        return index.h(index.Host, { key: '25207ec8fe2e0d15d0125d35a152f5e6d1e40df3' }, this.constructIcon());
+    }
+    static get watchers() { return {
+        "icon": [{
+                "updateIcon": 0
+            }]
+    }; }
+};
+IfxIcon.style = iconCss();
+
+exports.ifx_icon = IfxIcon;