import { icons } from "@infineon/infineon-icons";
import { h } from "@stencil/core";
export class IconsPreview {
    iconsArray = [];
    isCopied = false;
    copiedIndex;
    copiedIcon = null;
    htmlTag = '<ifx-icon icon="calendar-16"></ifx-icon>';
    iconName = `""`;
    searchTerm = "";
    el;
    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));
    }
    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: '5e32ee38519147fb857c739ef4f725216f2e12c6', class: "container" }, h("div", { key: 'e3314c61d4ac5acbbce77de5f959ecf73e441db2', class: "alert__wrapper" }, h("ifx-notification", { key: 'efb47f37b56e927064bf2f64de3261f87203c07f', 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: '8e02737e15b5354101b62e5a76d73b539e594934', class: "snippet__wrapper" }, h("div", { key: '93e71de1336cd5442816b41a7dd0dec40e25a93b', class: "search__wrapper" }, h("ifx-search-field", { key: 'afe80285a96f5835402c56e4f4ff3259317a0dc3', id: "search__field", size: "l", "show-delete-icon": "true", value: "", autocomplete: "on", placeholder: "Search icon" })), h("div", { key: '1dc19af0d82fe1f535d8ef22f3336666239a4582', class: "html-wrapper" }, h("span", { key: '81b3649c3475b8617b7f3091e7f6f6afc04c08fd', class: "html-tag" }, "<"), h("span", { key: 'bc10cb4b36319b510db1cd33e4d2d286fa16e99e', class: "component-name" }, "ifx-icon"), h("span", { key: '43e158624bba2f9a75146fa4772b1061af6a59c7', class: "attribute-name" }, " icon"), "=", h("span", { key: '04f4ceeefc3157ba3b1dd0762114995d79ccd265', class: "attribute-value" }, this.iconName), h("span", { key: '476121f3a2689e9b969b9bfa4dac6a2b8cb21d28', class: "html-tag" }, ">"), h("span", { key: '673ce9f6b6ed5b5865d10fcc029b72f14afc89bb', class: "html-tag" }, "</"), h("span", { key: 'd12f0d2ae3622768930d44bbd7a370a460729e4d', class: "component-name" }, "ifx-icon"), h("span", { key: 'af19763d160cca8c642b2109b0c24f3d7fc65442', class: "html-tag" }, ">"), h("button", { key: '6e14cd1a80e96ddba2941f4cb131187d5eaa330e', onClick: () => this.copyHtmlString() }, this.isCopied ? "Copied" : "Copy"))), h("div", { key: '968777cb6659be29cbcd50655b0832c3b646c7cd', 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: 'ab889b8bc7583b237632fa4b59e44b772cd9c198', 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
