import { h } from "@stencil/core";
import { icons } from "@infineon/infineon-icons";
export class IconsPreview {
    constructor() {
        this.iconsArray = [];
        this.isCopied = false;
        this.copiedIcon = null;
        this.htmlTag = '<ifx-icon icon="calendar-16"></ifx-icon>';
        this.iconName = `""`;
        this.searchTerm = '';
    }
    handleCopiedText() {
        this.isCopied = true;
        setTimeout(() => {
            this.isCopied = false;
        }, 2000);
    }
    copyIconText(icon) {
        this.htmlTag = `<ifx-icon icon="${icon}"></ifx-icon>`;
        this.iconName = `"${icon}"`;
        this.copiedIcon = icon;
    }
    copyHtmlString() {
        const copiedTag = `<ifx-icon icon=${this.iconName}></ifx-icon>`;
        navigator.clipboard.writeText(copiedTag);
        this.handleCopiedText();
    }
    get filteredIcons() {
        const term = this.searchTerm.toLowerCase().trim();
        if (!term)
            return this.iconsArray;
        return this.iconsArray.filter(icon => icon.toLowerCase().includes(term));
    }
    getIconIndex(icon) {
        return this.iconsArray.indexOf(icon);
    }
    handleIconFilter() {
        const searchField = this.el.shadowRoot.querySelector('#search__field');
        searchField.addEventListener('ifxInput', (e) => {
            this.searchTerm = e.detail;
        });
    }
    componentWillLoad() {
        this.iconsArray = Object.keys(icons);
    }
    componentDidLoad() {
        this.handleIconFilter();
    }
    render() {
        return (h("div", { key: 'cad3f5516e9ff71983c1ab79b423db3d8ff4c046', class: 'container' }, h("div", { key: 'bcaecb8c43b7415c7422293cd71db36dabe03fc7', class: "alert__wrapper" }, h("ifx-notification", { key: '28fe835bd823d3b7ca753303b2ab7231f5aa0c47', icon: "c-check-16", variant: "neutral", "link-text": "Figma icon library", "link-href": "https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0", "link-target": "_blank" }, "You can also find the UI icons in Figma for use in mockups.")), h("div", { key: '29db796fdc26758434eea3cb0662381e83931c81', class: "snippet__wrapper" }, h("div", { key: 'cae0df2cebf1499ad0febbe84c5734f7a1150c40', class: "search__wrapper" }, h("ifx-search-field", { key: '5624bffdabb2ef12904145ed485d96a95f72e079', id: "search__field", size: "m", "show-delete-icon": "true", value: "", autocomplete: "on", placeholder: "Search icon" })), h("div", { key: 'f4ff80bdc97d3bf96dc4fbdbb85195ea2b0f1b7d', class: 'html-wrapper' }, h("span", { key: '11ce503b64564201aa64b37df12f2d7b44c495ff', class: "html-tag" }, "<"), h("span", { key: 'ff5dca010ee326d8558592300a7152596ff29065', class: "component-name" }, "ifx-icon"), h("span", { key: 'bee19150f951c80c6bdb2ceb81edb7af7c50c4f7', class: "attribute-name" }, " icon"), "=", h("span", { key: '9451bd94d2b6e8122d7e60dcb2fcfd350a10a0eb', class: "attribute-value" }, this.iconName), h("span", { key: 'c074ba23a0ac267ada8c3b4ea701fd788e0ef047', class: "html-tag" }, ">"), h("span", { key: 'df301dced95dc4003dad62d42fbc7a991e07aa7b', class: "html-tag" }, "</"), h("span", { key: 'e50e42d063fd5370594fb3a9ad264dcfa30272fc', class: "component-name" }, "ifx-icon"), h("span", { key: '72e1e2869c4dd6a373c27949678012a4d17a5750', class: "html-tag" }, ">"), h("button", { key: 'e065221a5f5e4fcd545287050effd8f301960b5e', onClick: () => this.copyHtmlString() }, this.isCopied ? 'Copied' : 'Copy'))), h("div", { key: 'f5f0b51524f2f850a2151db2b0188dff1e4c3131', class: "preview__container" }, this.filteredIcons.map((icon) => (h("div", { key: icon, class: `preview__container-item ${this.isCopied && this.copiedIcon === icon ? 'copied' : ""}`, onClick: () => this.copyIconText(icon) }, h("ifx-icon", { icon: icon })))), this.filteredIcons.length === 0 && (h("div", { key: 'bcc64909d726c6fe43fac93ba623cd643110e67c', class: "no-results" }, "No icons found matching \"", this.searchTerm, "\"")))));
    }
    static get is() { return "ifx-icons-preview"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["./icons-preview.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["icons-preview.css"]
        };
    }
    static get states() {
        return {
            "iconsArray": {},
            "isCopied": {},
            "copiedIndex": {},
            "copiedIcon": {},
            "htmlTag": {},
            "iconName": {},
            "searchTerm": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=icons-preview.js.map
