import{r as e,a as i,h as a}from"./p-Cby2wKoI.js";import{i as t}from"./p-4yOyuXca.js";const o=()=>`.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)}iconsArray=[];isCopied=false;copiedIndex;copiedIcon=null;htmlTag='<ifx-icon icon="calendar-16"></ifx-icon>';iconName=`""`;searchTerm="";get el(){return i(this)}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)))}handleIconFilter(){const e=this.el.shadowRoot.querySelector("#search__field");e.addEventListener("ifxInput",(e=>{this.searchTerm=e.detail}))}componentWillLoad(){this.iconsArray=Object.keys(t)}componentDidLoad(){this.handleIconFilter()}render(){return a("div",{key:"5e32ee38519147fb857c739ef4f725216f2e12c6",class:"container"},a("div",{key:"e3314c61d4ac5acbbce77de5f959ecf73e441db2",class:"alert__wrapper"},a("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.")),a("div",{key:"8e02737e15b5354101b62e5a76d73b539e594934",class:"snippet__wrapper"},a("div",{key:"93e71de1336cd5442816b41a7dd0dec40e25a93b",class:"search__wrapper"},a("ifx-search-field",{key:"afe80285a96f5835402c56e4f4ff3259317a0dc3",id:"search__field",size:"l","show-delete-icon":"true",value:"",autocomplete:"on",placeholder:"Search icon"})),a("div",{key:"1dc19af0d82fe1f535d8ef22f3336666239a4582",class:"html-wrapper"},a("span",{key:"81b3649c3475b8617b7f3091e7f6f6afc04c08fd",class:"html-tag"},"<"),a("span",{key:"bc10cb4b36319b510db1cd33e4d2d286fa16e99e",class:"component-name"},"ifx-icon"),a("span",{key:"43e158624bba2f9a75146fa4772b1061af6a59c7",class:"attribute-name"}," icon"),"=",a("span",{key:"04f4ceeefc3157ba3b1dd0762114995d79ccd265",class:"attribute-value"},this.iconName),a("span",{key:"476121f3a2689e9b969b9bfa4dac6a2b8cb21d28",class:"html-tag"},">"),a("span",{key:"673ce9f6b6ed5b5865d10fcc029b72f14afc89bb",class:"html-tag"},"</"),a("span",{key:"d12f0d2ae3622768930d44bbd7a370a460729e4d",class:"component-name"},"ifx-icon"),a("span",{key:"af19763d160cca8c642b2109b0c24f3d7fc65442",class:"html-tag"},">"),a("button",{key:"6e14cd1a80e96ddba2941f4cb131187d5eaa330e",onClick:()=>this.copyHtmlString()},this.isCopied?"Copied":"Copy"))),a("div",{key:"968777cb6659be29cbcd50655b0832c3b646c7cd",class:"preview__container"},this.filteredIcons.map((e=>a("div",{key:e,class:`preview__container-item ${this.isCopied&&this.copiedIcon===e?"copied":""}`,onClick:()=>this.copyIconText(e)},a("ifx-icon",{icon:e})))),this.filteredIcons.length===0&&a("div",{key:"ab889b8bc7583b237632fa4b59e44b772cd9c198",class:"no-results"},'No icons found matching "',this.searchTerm,'"')))}};c.style=o();export{c as ifx_icons_preview};
//# sourceMappingURL=p-763dd409.entry.js.map