import { r as registerInstance, c as createEvent, a as getElement, h, d as Host } from './index-wX3eJOEL.js';
import { g as getIcon } from './icons-BqOxJCFA.js';
import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.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) {
        registerInstance(this, hostRef);
        this.consoleError = createEvent(this, "consoleError", 7);
    }
    get el() { return 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 = 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 = 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 (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 = 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 (!isNestedInIfxComponent(this.el)) {
            if (!this.isInsideAgGrid(this.el) && !this.isInsideChoices(this.el)) {
                const framework = detectFramework();
                trackComponent("ifx-icon", await framework);
            }
        }
    }
    render() {
        return h(Host, { key: '197846ea1ba83ce9d0c11abb0c1613623fd98845' }, this.constructIcon());
    }
    static get watchers() { return {
        "icon": [{
                "updateIcon": 0
            }]
    }; }
};
IfxIcon.style = iconCss();

export { IfxIcon as ifx_icon };
