import{r as e,h as i,a as t}from"./p-PqnYwNKt.js";import{i as a}from"./p-CmdmgBUp.js";const n='.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 c=class{constructor(i){e(this,i);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}),2e3)}copyIconText(e){this.htmlTag=`<ifx-icon icon="${e}"></ifx-icon>`;this.iconName=`"${e}"`;this.copiedIcon=e}copyHtmlString(){const e=`<ifx-icon icon=${this.iconName}></ifx-icon>`;navigator.clipboard.writeText(e);this.handleCopiedText()}get filteredIcons(){const e=this.searchTerm.toLowerCase().trim();if(!e)return this.iconsArray;return this.iconsArray.filter((i=>i.toLowerCase().includes(e)))}getIconIndex(e){return this.iconsArray.indexOf(e)}handleIconFilter(){const e=this.el.shadowRoot.querySelector("#search__field");e.addEventListener("ifxInput",(e=>{this.searchTerm=e.detail}))}componentWillLoad(){this.iconsArray=Object.keys(a)}componentDidLoad(){this.handleIconFilter()}render(){return i("div",{key:"cad3f5516e9ff71983c1ab79b423db3d8ff4c046",class:"container"},i("div",{key:"bcaecb8c43b7415c7422293cd71db36dabe03fc7",class:"alert__wrapper"},i("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.")),i("div",{key:"29db796fdc26758434eea3cb0662381e83931c81",class:"snippet__wrapper"},i("div",{key:"cae0df2cebf1499ad0febbe84c5734f7a1150c40",class:"search__wrapper"},i("ifx-search-field",{key:"5624bffdabb2ef12904145ed485d96a95f72e079",id:"search__field",size:"m","show-delete-icon":"true",value:"",autocomplete:"on",placeholder:"Search icon"})),i("div",{key:"f4ff80bdc97d3bf96dc4fbdbb85195ea2b0f1b7d",class:"html-wrapper"},i("span",{key:"11ce503b64564201aa64b37df12f2d7b44c495ff",class:"html-tag"},"<"),i("span",{key:"ff5dca010ee326d8558592300a7152596ff29065",class:"component-name"},"ifx-icon"),i("span",{key:"bee19150f951c80c6bdb2ceb81edb7af7c50c4f7",class:"attribute-name"}," icon"),"=",i("span",{key:"9451bd94d2b6e8122d7e60dcb2fcfd350a10a0eb",class:"attribute-value"},this.iconName),i("span",{key:"c074ba23a0ac267ada8c3b4ea701fd788e0ef047",class:"html-tag"},">"),i("span",{key:"df301dced95dc4003dad62d42fbc7a991e07aa7b",class:"html-tag"},"</"),i("span",{key:"e50e42d063fd5370594fb3a9ad264dcfa30272fc",class:"component-name"},"ifx-icon"),i("span",{key:"72e1e2869c4dd6a373c27949678012a4d17a5750",class:"html-tag"},">"),i("button",{key:"e065221a5f5e4fcd545287050effd8f301960b5e",onClick:()=>this.copyHtmlString()},this.isCopied?"Copied":"Copy"))),i("div",{key:"f5f0b51524f2f850a2151db2b0188dff1e4c3131",class:"preview__container"},this.filteredIcons.map((e=>i("div",{key:e,class:`preview__container-item ${this.isCopied&&this.copiedIcon===e?"copied":""}`,onClick:()=>this.copyIconText(e)},i("ifx-icon",{icon:e})))),this.filteredIcons.length===0&&i("div",{key:"bcc64909d726c6fe43fac93ba623cd643110e67c",class:"no-results"},'No icons found matching "',this.searchTerm,'"')))}get el(){return t(this)}};c.style=n;export{c as ifx_icons_preview};
//# sourceMappingURL=p-6eb6af05.entry.js.map