'use strict';

var index = require('./index-Dc5gCGlQ.js');
var icons = require('./icons-B_27O3dI.js');

const iconsPreviewCss = ".container{display:flex;flex-direction:column;gap:10px}.alert__wrapper{margin-bottom:40px}.snippet__wrapper{display:flex;flex-direction:column;gap:5px;position:sticky;top:0;left:0;z-index:99;background-color:white}.html-wrapper{background:rgb(38, 38, 38);padding:20px;color:white;font-family:monospace}.html-wrapper button{position:absolute;right:0px;bottom:0px;background:rgba(0, 0, 0, 0.85);color:#C9CDCF;border:0 none;padding:4px 10px;font-size:0.75rem;font-family:\"Nunito Sans\";font-weight:700;border-top:1px solid rgba(255, 255, 255, 0.1);border-left:1px solid rgba(255, 255, 255, 0.1);margin-left:-1px;border-radius:4px 0 0 0;cursor:pointer}.html-wrapper .component-name{color:#A8FF60}.html-wrapper .attribute-name{color:rgb(150, 203, 254)}.html-wrapper .attribute-value{color:rgb(180, 116, 221)}.preview__container{box-sizing:border-box;display:flex;align-items:center;padding:2px;flex-wrap:wrap;gap:4px}.preview__container .no-results{width:100%;text-align:center}.preview__container .preview__container-item{display:flex;justify-content:center;align-items:center;border:1px solid #f1f1f1;padding:2px;width:50px;height:50px;position:relative}.preview__container .preview__container-item:active{border-color:#378375}.preview__container .preview__container-item:hover{cursor:pointer}.preview__container .preview__container-item.copied::after{z-index:50;content:\"copied!\";position:absolute;top:0;left:50px;background-color:#000;color:white;padding:3px;border-radius:4px}";

const IconsPreview = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        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.icons);
    }
    componentDidLoad() {
        this.handleIconFilter();
    }
    render() {
        return (index.h("div", { key: 'cad3f5516e9ff71983c1ab79b423db3d8ff4c046', class: 'container' }, index.h("div", { key: 'bcaecb8c43b7415c7422293cd71db36dabe03fc7', class: "alert__wrapper" }, index.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.")), index.h("div", { key: '29db796fdc26758434eea3cb0662381e83931c81', class: "snippet__wrapper" }, index.h("div", { key: 'cae0df2cebf1499ad0febbe84c5734f7a1150c40', class: "search__wrapper" }, index.h("ifx-search-field", { key: '5624bffdabb2ef12904145ed485d96a95f72e079', id: "search__field", size: "m", "show-delete-icon": "true", value: "", autocomplete: "on", placeholder: "Search icon" })), index.h("div", { key: 'f4ff80bdc97d3bf96dc4fbdbb85195ea2b0f1b7d', class: 'html-wrapper' }, index.h("span", { key: '11ce503b64564201aa64b37df12f2d7b44c495ff', class: "html-tag" }, "<"), index.h("span", { key: 'ff5dca010ee326d8558592300a7152596ff29065', class: "component-name" }, "ifx-icon"), index.h("span", { key: 'bee19150f951c80c6bdb2ceb81edb7af7c50c4f7', class: "attribute-name" }, " icon"), "=", index.h("span", { key: '9451bd94d2b6e8122d7e60dcb2fcfd350a10a0eb', class: "attribute-value" }, this.iconName), index.h("span", { key: 'c074ba23a0ac267ada8c3b4ea701fd788e0ef047', class: "html-tag" }, ">"), index.h("span", { key: 'df301dced95dc4003dad62d42fbc7a991e07aa7b', class: "html-tag" }, "</"), index.h("span", { key: 'e50e42d063fd5370594fb3a9ad264dcfa30272fc', class: "component-name" }, "ifx-icon"), index.h("span", { key: '72e1e2869c4dd6a373c27949678012a4d17a5750', class: "html-tag" }, ">"), index.h("button", { key: 'e065221a5f5e4fcd545287050effd8f301960b5e', onClick: () => this.copyHtmlString() }, this.isCopied ? 'Copied' : 'Copy'))), index.h("div", { key: 'f5f0b51524f2f850a2151db2b0188dff1e4c3131', class: "preview__container" }, this.filteredIcons.map((icon) => (index.h("div", { key: icon, class: `preview__container-item ${this.isCopied && this.copiedIcon === icon ? 'copied' : ""}`, onClick: () => this.copyIconText(icon) }, index.h("ifx-icon", { icon: icon })))), this.filteredIcons.length === 0 && (index.h("div", { key: 'bcc64909d726c6fe43fac93ba623cd643110e67c', class: "no-results" }, "No icons found matching \"", this.searchTerm, "\"")))));
    }
    get el() { return index.getElement(this); }
};
IconsPreview.style = iconsPreviewCss;

exports.ifx_icons_preview = IconsPreview;
//# sourceMappingURL=ifx-icons-preview.entry.cjs.js.map

//# sourceMappingURL=ifx-icons-preview.cjs.entry.js.map