@infineon/infineon-design-system-stencil 35.0.0--canary.1896.5fc54ca71b87c5e8db7c7dbe5fcd6d916843c3da.0 → 35.0.0--canary.1896.48ace02f79029e2c84d99703b4c0a9c1e0bd2f4c.0

package/dist/infineon-design-system-stencil/p-f6094d3a.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as i,g as a}from"./p-b7a462e5.js";import{i as t}from"./p-816cfb79.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 n=o;const c=class{constructor(i){e(this,i);this.iconsArray=[];this.isCopied=false;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}"`}copyHtmlString(){const e=`<ifx-icon icon=${this.iconName}></ifx-icon>`;navigator.clipboard.writeText(e);this.handleCopiedText()}get filteredIcons(){if(!this.searchTerm){return this.iconsArray}return this.iconsArray.filter((e=>e.toLowerCase().includes(this.searchTerm.toLowerCase())))}handleIconFilter(){const e=this.el.shadowRoot.querySelector("#search__field");e.addEventListener("ifxInput",(e=>{this.searchTerm=e.detail}))}componentWillLoad(){for(let e in t){this.iconsArray.push(e)}}componentDidLoad(){this.handleIconFilter()}render(){return i("div",{key:"12d0480d739de3af9291c6d93aacfd03f75d2535",class:"container"},i("div",{key:"9b28ab5b20baeb190a813e02510583c29a7312eb",class:"alert__wrapper"},i("ifx-notification",{key:"c5dfcaf95e803a0dc853e6ddc5d58947a4144a4f",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:"71cec712c1881da4209d77bb1c87d1daf42b419d",class:"snippet__wrapper"},i("div",{key:"376276adfd975faa40ffc41eb49c8261ad9dc38d",class:"search__wrapper"},i("ifx-search-field",{key:"491a386e52601c6e1ac0d31fd907c9cf15f61ac9",id:"search__field",size:"m","show-delete-icon":"true",value:"",autocomplete:"on",placeholder:"Search icon"})),i("div",{key:"165683b4a56ea34bc3e3026f5b5091ccb5614f85",class:"html-wrapper"},i("span",{key:"a86298677a3cec06f14028e5711ba521f22a2158",class:"html-tag"},"<"),i("span",{key:"aaf5779efdca727f55d62f92ef4928bf7c7d1305",class:"component-name"},"ifx-icon"),i("span",{key:"bae90774771e62974ff8bb910d8ac56ee5cb633c",class:"attribute-name"}," icon"),"=",i("span",{key:"9df534dc87d60689468043d0086a78e449eb9736",class:"attribute-value"},this.iconName),i("span",{key:"0abcc6692bfbf01bb53901e21e965ecc6e006f7a",class:"html-tag"},">"),i("span",{key:"92effce46778ef95127dd845a59b1819815cf0f7",class:"html-tag"},"</"),i("span",{key:"610c0e7ece1af781611baf03a369cef371944037",class:"component-name"},"ifx-icon"),i("span",{key:"2a14ef5d50e81786e39d3a5f3af1199bda5e4af3",class:"html-tag"},">"),i("button",{key:"9f6375feb25228245ced2eae6dbaf9dc5927bd83",onClick:()=>this.copyHtmlString()},this.isCopied?"Copied":"Copy"))),i("div",{key:"4135bd7f68634bdae6e84112dd351c8e696e77a0",class:"preview__container"},this.filteredIcons.map(((e,a)=>i("div",{class:`preview__container-item ${this.isCopied&&this.copiedIndex===a?"copied":""}`,onClick:()=>this.copyIconText(e)},i("ifx-icon",{icon:e})))),this.filteredIcons.length===0&&i("div",{key:"52976a56b000152ce25b3e69efad8aa2b0edcbcd",class:"no-results"},'No icons found matching "',this.searchTerm,'"')))}get el(){return a(this)}};c.style=n;export{c as ifx_icons_preview};
-//# sourceMappingURL=p-f6094d3a.entry.js.map

package/dist/infineon-design-system-stencil/p-f6094d3a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["iconsPreviewCss","IfxIconsPreviewStyle0","IconsPreview","constructor","hostRef","this","iconsArray","isCopied","htmlTag","iconName","searchTerm","handleCopiedText","setTimeout","copyIconText","icon","copyHtmlString","copiedTag","navigator","clipboard","writeText","filteredIcons","filter","toLowerCase","includes","handleIconFilter","searchField","el","shadowRoot","querySelector","addEventListener","e","detail","componentWillLoad","icons","push","componentDidLoad","render","h","key","class","variant","id","size","value","autocomplete","placeholder","onClick","map","index","copiedIndex","length"],"sources":["src/components/icons-preview/icons-preview.scss?tag=ifx-icons-preview&encapsulation=shadow","src/components/icons-preview/icons-preview.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.container {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.alert__wrapper { \n  margin-bottom: 40px;\n}\n\n.snippet__wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 99;\n  background-color: white;\n}\n\n.html-wrapper {\n  background: rgb(38, 38, 38);\n  padding: 20px;\n  color: white;\n  font-family: monospace;\n\n  & button {\n    position: absolute;\n    right: 0px;\n    bottom: 0px;\n    background: rgba(0, 0, 0, 0.85);\n    color: #C9CDCF;\n    border: 0 none;\n    padding: 4px 10px;\n    font-size: tokens.$ifxFontSizeXs;\n    font-family: \"Nunito Sans\";\n    font-weight: 700;\n    border-top: 1px solid rgba(255, 255, 255, .1);\n    border-left: 1px solid rgba(255, 255, 255, .1);\n    margin-left: -1px;\n    border-radius: 4px 0 0 0;\n    cursor: pointer;\n  }\n\n  & .component-name {\n    color: #A8FF60;\n  }\n\n  & .attribute-name {\n    color: rgb(150, 203, 254);\n  }\n\n  & .attribute-value {\n    color: rgb(180, 116, 221);\n  }\n\n\n}\n\n.preview__container {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding: 2px;\n  flex-wrap: wrap;\n  gap: 4px;\n\n  & .no-results { \n    width: 100%;\n    text-align: center;\n  }\n\n  & .preview__container-item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid #f1f1f1;\n    padding: 2px;\n    width: 50px;\n    height: 50px;\n    position: relative;\n\n    &:active {\n      border-color: #378375;\n    }\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &.copied {\n      &::after {\n        z-index: 50;\n        content: 'copied!';\n        position: absolute;\n        top: 0;\n        left: 50px;\n        background-color: #000;\n        color: white;\n        padding: 3px;\n        border-radius: 4px;\n      }\n    }\n  }\n}","import { Component, h, Element, State } from \"@stencil/core\";\nimport { icons } from '@infineon/infineon-icons';\n\n@Component({\n  tag: 'ifx-icons-preview',\n  styleUrl: './icons-preview.scss',\n  shadow: true\n})\n\nexport class IconsPreview {\n  @State() iconsArray: string[] = [];\n  @State() isCopied: boolean = false;\n  @State() copiedIndex: number;\n  @State() htmlTag: string = '<ifx-icon icon=\"calendar-16\"></ifx-icon>';\n  @State() iconName: string = `\"\"`;\n  @State() searchTerm: string = '';\n  @Element() el;\n\n  handleCopiedText() { \n    this.isCopied = true;\n    setTimeout(() => {\n      this.isCopied = false\n    }, 2000);\n  }\n\n  copyIconText(icon) { \n    this.htmlTag = `<ifx-icon icon=\"${icon}\"></ifx-icon>`;\n    this.iconName = `\"${icon}\"`\n  }\n\n  copyHtmlString() { \n    const copiedTag = `<ifx-icon icon=${this.iconName}></ifx-icon>`;\n    navigator.clipboard.writeText(copiedTag);\n    this.handleCopiedText()\n  }\n\n  get filteredIcons() {\n    if (!this.searchTerm) {\n      return this.iconsArray;\n    }\n    return this.iconsArray.filter(icon => \n      icon.toLowerCase().includes(this.searchTerm.toLowerCase())\n    );\n  }\n\n  handleIconFilter() { \n    const searchField = this.el.shadowRoot.querySelector('#search__field');\n    searchField.addEventListener('ifxInput', (e) => { \n      this.searchTerm = e.detail;\n    })\n  }\n\n  componentWillLoad() { \n    for(let icon in icons) { \n      this.iconsArray.push(icon)\n    }\n  }\n\n  componentDidLoad() { \n    this.handleIconFilter()\n  }\n\n  render() {\n    return (\n      <div class='container'>\n        <div class=\"alert__wrapper\">\n            <ifx-notification \n              icon=\"c-check-16\" \n              variant=\"neutral\" \n              link-text=\"Figma icon library\" \n              link-href=\"https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0\"\n              link-target=\"_blank\">\n              You can also find the UI icons in Figma for use in mockups.\n            </ifx-notification>\n        </div>\n        <div class=\"snippet__wrapper\">\n          <div class=\"search__wrapper\">\n            <ifx-search-field id=\"search__field\" size=\"m\" show-delete-icon=\"true\" value=\"\" autocomplete=\"on\" placeholder=\"Search icon\"></ifx-search-field>\n          </div>\n          <div class='html-wrapper'>\n            <span class=\"html-tag\">&lt;</span>\n            <span class=\"component-name\">ifx-icon</span>\n            <span class=\"attribute-name\"> icon</span>=<span class=\"attribute-value\">{this.iconName}</span>\n            <span class=\"html-tag\">&gt;</span>\n            <span class=\"html-tag\">&lt;/</span>\n            <span class=\"component-name\">ifx-icon</span>\n            <span class=\"html-tag\">&gt;</span>\n            <button onClick={() => this.copyHtmlString()}>{this.isCopied ? 'Copied' : 'Copy'}</button>\n          </div>\n        </div>\n        <div class=\"preview__container\">\n          {this.filteredIcons.map((icon, index) => \n          <div class={`preview__container-item ${this.isCopied && this.copiedIndex === index ? 'copied' : \"\"}`} onClick={() => this.copyIconText(icon)}>\n            <ifx-icon icon={icon}></ifx-icon>\n          </div>)}\n          {this.filteredIcons.length === 0 && (\n          <div class=\"no-results\">No icons found matching \"{this.searchTerm}\"</div>\n          )}\n        </div>\n      </div>\n    )\n  }\n}"],"mappings":"sFAAA,MAAMA,EAAkB,s8CACxB,MAAAC,EAAeD,E,MCQFE,EAAY,MANzB,WAAAC,CAAAC,G,UAOWC,KAAAC,WAAuB,GACvBD,KAAAE,SAAoB,MAEpBF,KAAAG,QAAkB,2CAClBH,KAAAI,SAAmB,KACnBJ,KAAAK,WAAqB,E,CAG9B,gBAAAC,GACEN,KAAKE,SAAW,KAChBK,YAAW,KACTP,KAAKE,SAAW,KAAK,GACpB,I,CAGL,YAAAM,CAAaC,GACXT,KAAKG,QAAU,mBAAmBM,iBAClCT,KAAKI,SAAW,IAAIK,I,CAGtB,cAAAC,GACE,MAAMC,EAAY,kBAAkBX,KAAKI,uBACzCQ,UAAUC,UAAUC,UAAUH,GAC9BX,KAAKM,kB,CAGP,iBAAIS,GACF,IAAKf,KAAKK,WAAY,CACpB,OAAOL,KAAKC,U,CAEd,OAAOD,KAAKC,WAAWe,QAAOP,GAC5BA,EAAKQ,cAAcC,SAASlB,KAAKK,WAAWY,gB,CAIhD,gBAAAE,GACE,MAAMC,EAAcpB,KAAKqB,GAAGC,WAAWC,cAAc,kBACrDH,EAAYI,iBAAiB,YAAaC,IACxCzB,KAAKK,WAAaoB,EAAEC,MAAM,G,CAI9B,iBAAAC,GACE,IAAI,IAAIlB,KAAQmB,EAAO,CACrB5B,KAAKC,WAAW4B,KAAKpB,E,EAIzB,gBAAAqB,GACE9B,KAAKmB,kB,CAGP,MAAAY,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,kBACPF,EAAA,oBAAAC,IAAA,2CACExB,KAAK,aACL0B,QAAQ,UAAS,YACP,qBAAoB,YACpB,mIAAkI,cAChI,UAAQ,gEAI1BH,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACTF,EAAA,oBAAAC,IAAA,2CAAkBG,GAAG,gBAAgBC,KAAK,IAAG,mBAAkB,OAAOC,MAAM,GAAGC,aAAa,KAAKC,YAAY,iBAE/GR,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACTF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,YAAU,KACtBF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBAAgB,YAC5BF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBAAgB,SAAa,IAACF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBAAmBlC,KAAKI,UAC9E4B,EAAA,QAAAC,IAAA,2CAAMC,MAAM,YAAU,KACtBF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,YAAU,MACtBF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBAAgB,YAC5BF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,YAAU,KACtBF,EAAA,UAAAC,IAAA,2CAAQQ,QAAS,IAAMzC,KAAKU,kBAAmBV,KAAKE,SAAW,SAAW,UAG9E8B,EAAA,OAAAC,IAAA,2CAAKC,MAAM,sBACRlC,KAAKe,cAAc2B,KAAI,CAACjC,EAAMkC,IAC/BX,EAAA,OAAKE,MAAO,2BAA2BlC,KAAKE,UAAYF,KAAK4C,cAAgBD,EAAQ,SAAW,KAAMF,QAAS,IAAMzC,KAAKQ,aAAaC,IACrIuB,EAAA,YAAUvB,KAAMA,OAEjBT,KAAKe,cAAc8B,SAAW,GAC/Bb,EAAA,OAAAC,IAAA,2CAAKC,MAAM,cAAY,4BAA2BlC,KAAKK,WAAU,M","ignoreList":[]}