import{r as e,a as i,h as a}from"./p-wX3eJOEL.js";import{i as t}from"./p-BqOxJCFA.js";const c=class{constructor(i){e(this,i)}iconsArray=[];isCopied=!1;copiedIndex;copiedIcon=null;htmlTag='<ifx-icon icon="calendar-16"></ifx-icon>';iconName='""';searchTerm="";get el(){return i(this)}handleCopiedText(){this.isCopied=!0,setTimeout((()=>{this.isCopied=!1}),2e3)}copyIconText(e){this.htmlTag=`<ifx-icon icon="${e}"></ifx-icon>`,this.iconName=`"${e}"`,this.copiedIcon=e}copyHtmlString(){navigator.clipboard.writeText(`<ifx-icon icon=${this.iconName}></ifx-icon>`),this.handleCopiedText()}get filteredIcons(){const e=this.searchTerm.toLowerCase().trim();return e?this.iconsArray.filter((i=>i.toLowerCase().includes(e))):this.iconsArray}handleIconFilter(){this.el.shadowRoot.querySelector("#search__field").addEventListener("ifxInput",(e=>{this.searchTerm=e.detail}))}componentWillLoad(){this.iconsArray=Object.keys(t)}componentDidLoad(){this.handleIconFilter()}render(){return a("div",{key:"6a5c16b2ce6a265a64b8a50c82ce729b476b4c03",class:"container"},a("div",{key:"dd61d941e2beee30011ecc6c908ba89fe041ac3b",class:"alert__wrapper"},a("ifx-notification",{key:"4d83a125d41d89b50afb6bd3cb0e32fdb7ed8bca",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:"713595cbb31fbb6f440de0ccf69f003dc90b2172",class:"snippet__wrapper"},a("div",{key:"3dd81a71ed00af64caaa3f20ec60724e5dcf7eae",class:"search__wrapper"},a("ifx-search-field",{key:"da20019ea603d8b53d054751adb4c2cf5c809393",id:"search__field",size:"l","show-delete-icon":"true",value:"",autocomplete:"on",placeholder:"Search icon"})),a("div",{key:"68e488e31db3aeba0759184b94c5346ba1e3d3ca",class:"html-wrapper"},a("span",{key:"dfd68c7509d138ba3e087863320e6f1268edd7af",class:"html-tag"},"<"),a("span",{key:"532d9f697c68dd34da9d05b0aab596662ab9cbf5",class:"component-name"},"ifx-icon"),a("span",{key:"1c5e3fd47d8022810ad69210d1e59333fe3a1a4f",class:"attribute-name"}," icon"),"=",a("span",{key:"cf538d45a0573a9e0d5cd9c44c62284323ded769",class:"attribute-value"},this.iconName),a("span",{key:"fc27cadc6712cf2f441479c128dc263fe83c4783",class:"html-tag"},">"),a("span",{key:"5c602155b65dba4d0a69ce830df966c2d0f1e130",class:"html-tag"},"</"),a("span",{key:"f3363854834a18542b9af7efbc3104277d213347",class:"component-name"},"ifx-icon"),a("span",{key:"f903fa5905c1fe55d29cdfb5aa8dd8b175ab3e73",class:"html-tag"},">"),a("button",{key:"6622b27da2dc3ddba7ed40b3b00a02503e02823d",onClick:()=>this.copyHtmlString()},this.isCopied?"Copied":"Copy"))),a("div",{key:"c7f8c701b5dd13b2f53f77afe425b972a814e306",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})))),0===this.filteredIcons.length&&a("div",{key:"d34f4e3928186b892f5b1d5a40e4d2c79cf02790",class:"no-results"},'No icons found matching "',this.searchTerm,'"')))}};c.style='.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}';export{c as ifx_icons_preview}