@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-54a2b0d7.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i,g as a}from"./p-b7a462e5.js";import{i as t}from"./p-1e2705c8.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 o=n;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(t)}componentDidLoad(){this.handleIconFilter()}render(){return i("div",{key:"7b9c4b5b3212cdae77e4522bd573939b1bc32e62",class:"container"},i("div",{key:"8e4047341dd331f402a2ce249b6bd68b7fe398d5",class:"alert__wrapper"},i("ifx-notification",{key:"42e17eefa571360711ea0aca45d57dae6a5b70a6",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:"ecd1f37f5edb25b913157626ba674f10c2a00026",class:"snippet__wrapper"},i("div",{key:"58f5fd04a7fef398ba47d71c23c74515c5461337",class:"search__wrapper"},i("ifx-search-field",{key:"76802675d5c01562a0f7d69f8d3bd3df15c2944b",id:"search__field",size:"m","show-delete-icon":"true",value:"",autocomplete:"on",placeholder:"Search icon"})),i("div",{key:"2160ef2e64b86140232aa6566db2f153d724b107",class:"html-wrapper"},i("span",{key:"810aa571906d82fbe93d631322bec4ed08b956d4",class:"html-tag"},"<"),i("span",{key:"2aeeb86927938a7b2a3d9f5fb2ef57f0aa925eaa",class:"component-name"},"ifx-icon"),i("span",{key:"de18997563df168af3e976b1ad81d205cd2a850a",class:"attribute-name"}," icon"),"=",i("span",{key:"a93dfbec210940b2d9b2c1dd349a727e5f7185ce",class:"attribute-value"},this.iconName),i("span",{key:"b2900ea9e7099ab4fcb890d6df05cab4d6109c55",class:"html-tag"},">"),i("span",{key:"fee18bd1c39103e29ec84bc115b1719c11a66849",class:"html-tag"},"</"),i("span",{key:"57c6db27a4156d0ad50c20d691138817db80ba18",class:"component-name"},"ifx-icon"),i("span",{key:"395b55e085cb49a133beaca0bf79338662c0905b",class:"html-tag"},">"),i("button",{key:"a6c81538ec62f435c06460e8822aa1784ec06138",onClick:()=>this.copyHtmlString()},this.isCopied?"Copied":"Copy"))),i("div",{key:"dcac1dacdfc1f4d0cdeeabbe908b2b71bc79334e",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:"128cee79fdfa10ea937e704b1a48ae83485c0c1f",class:"no-results"},'No icons found matching "',this.searchTerm,'"')))}get el(){return a(this)}};c.style=o;export{c as ifx_icons_preview};
+//# sourceMappingURL=p-54a2b0d7.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["iconsPreviewCss","IfxIconsPreviewStyle0","IconsPreview","constructor","hostRef","this","iconsArray","isCopied","copiedIcon","htmlTag","iconName","searchTerm","handleCopiedText","setTimeout","copyIconText","icon","copyHtmlString","copiedTag","navigator","clipboard","writeText","filteredIcons","term","toLowerCase","trim","filter","includes","getIconIndex","indexOf","handleIconFilter","searchField","el","shadowRoot","querySelector","addEventListener","e","detail","componentWillLoad","Object","keys","icons","componentDidLoad","render","h","key","class","variant","id","size","value","autocomplete","placeholder","onClick","map","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() copiedIcon: string | null = null;\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: string) { \n    this.htmlTag = `<ifx-icon icon=\"${icon}\"></ifx-icon>`;\n    this.iconName = `\"${icon}\"`;\n    this.copiedIcon = 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    const term = this.searchTerm.toLowerCase().trim();\n    if (!term) return this.iconsArray;\n    \n    return this.iconsArray.filter(icon => \n      icon.toLowerCase().includes(term)\n    );\n  }\n\n  getIconIndex(icon: string): number {\n    return this.iconsArray.indexOf(icon);\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    this.iconsArray = Object.keys(icons);\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) => (\n            <div \n              key={icon}\n              class={`preview__container-item ${\n                this.isCopied && this.copiedIcon === icon ? 'copied' : \"\"\n              }`} \n              onClick={() => this.copyIconText(icon)}\n            >\n              <ifx-icon icon={icon}></ifx-icon>\n            </div>\n          ))}\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,WAA4B,KAC5BH,KAAAI,QAAkB,2CAClBJ,KAAAK,SAAmB,KACnBL,KAAAM,WAAqB,E,CAG9B,gBAAAC,GACEP,KAAKE,SAAW,KAChBM,YAAW,KACTR,KAAKE,SAAW,KAAK,GACpB,I,CAGJ,YAAAO,CAAaC,GACZV,KAAKI,QAAU,mBAAmBM,iBAClCV,KAAKK,SAAW,IAAIK,KACpBV,KAAKG,WAAaO,C,CAGpB,cAAAC,GACE,MAAMC,EAAY,kBAAkBZ,KAAKK,uBACzCQ,UAAUC,UAAUC,UAAUH,GAC9BZ,KAAKO,kB,CAGL,iBAAIS,GACJ,MAAMC,EAAOjB,KAAKM,WAAWY,cAAcC,OAC3C,IAAKF,EAAM,OAAOjB,KAAKC,WAEvB,OAAOD,KAAKC,WAAWmB,QAAOV,GAC5BA,EAAKQ,cAAcG,SAASJ,I,CAIhC,YAAAK,CAAaZ,GACX,OAAOV,KAAKC,WAAWsB,QAAQb,E,CAGjC,gBAAAc,GACE,MAAMC,EAAczB,KAAK0B,GAAGC,WAAWC,cAAc,kBACrDH,EAAYI,iBAAiB,YAAaC,IACxC9B,KAAKM,WAAawB,EAAEC,MAAM,G,CAI9B,iBAAAC,GACEhC,KAAKC,WAAagC,OAAOC,KAAKC,E,CAGhC,gBAAAC,GACEpC,KAAKwB,kB,CAGP,MAAAa,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,kBACPF,EAAA,oBAAAC,IAAA,2CACE7B,KAAK,aACL+B,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,mBAAmBxC,KAAKK,UAC9EiC,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,IAAM/C,KAAKW,kBAAmBX,KAAKE,SAAW,SAAW,UAG9EoC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,sBACXxC,KAAKgB,cAAcgC,KAAKtC,GACpB4B,EAAA,OACEC,IAAK7B,EACL8B,MAAO,2BACLxC,KAAKE,UAAYF,KAAKG,aAAeO,EAAO,SAAW,KAEzDqC,QAAS,IAAM/C,KAAKS,aAAaC,IAEjC4B,EAAA,YAAU5B,KAAMA,OAGnBV,KAAKgB,cAAciC,SAAW,GAC/BX,EAAA,OAAAC,IAAA,2CAAKC,MAAM,cAAY,4BAA2BxC,KAAKM,WAAU,M","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-5650fe08.entry.js → p-84ec2ff5.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as s,h as n,a as o}from"./p-b7a462e5.js";import{g as e}from"./p-816cfb79.js";const i="ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";const c=i;const r=class{constructor(n){t(this,n);this.consoleError=s(this,"consoleError",7);this.icon=""}convertStringToHtml(t){const s=document.createElement("div");s.innerHTML=t;return s.firstChild}convertHtmlToObject(t){let s=Array.from(t.attributes,(({name:t,value:s})=>({name:t,value:s}))).reduce(((t,s)=>{t[s.name]=s.value;return t}),{});return s}convertPathsToVnode(t){let s=[];const o=this.convertHtmlToObject(t);const e=n("path",o);s.push(e);if(t.firstChild){const o=t.querySelectorAll("path");const e=t.querySelectorAll("path").length;for(let t=0;t<e;t++){let e=this.convertHtmlToObject(o[t]);let i=n("path",e);s.push(i)}}return s}getSVG(t){const s=this.convertStringToHtml(this.ifxIcon);const o=s.getAttribute("width");const e=s.getAttribute("height");const i=s.getAttribute("fill");const c=s.getAttribute("viewBox");return n("svg",{class:"inline-svg",width:o,height:e,xmlns:"http://www.w3.org/2000/svg",fill:i,viewBox:c},...t)}constructIcon(){if(this.ifxIcon){const t=this.convertStringToHtml(this.ifxIcon);const s=this.convertPathsToVnode(t);const n=this.getSVG(s);return n}else if(this.icon!==""){console.error("Icon not found!");this.consoleError.emit(true);return}else{return}}componentWillLoad(){const t=t=>t.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g,((t,s)=>s));this.ifxIcon=e(t(this.icon))}render(){return n(o,{key:"c1a8037e96f84eb87d1e111039c34885b7452d85"},this.constructIcon())}};r.style=c;export{r as ifx_icon};
-//# sourceMappingURL=p-5650fe08.entry.js.map
+import{r as t,c as s,h as n,a as e}from"./p-b7a462e5.js";import{g as o}from"./p-1e2705c8.js";const i="ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";const c=i;const r=class{constructor(n){t(this,n);this.consoleError=s(this,"consoleError",7);this.icon=""}convertStringToHtml(t){const s=document.createElement("div");s.innerHTML=t;return s.firstChild}convertHtmlToObject(t){let s=Array.from(t.attributes,(({name:t,value:s})=>({name:t,value:s}))).reduce(((t,s)=>{t[s.name]=s.value;return t}),{});return s}convertPathsToVnode(t){let s=[];const e=this.convertHtmlToObject(t);const o=n("path",e);s.push(o);if(t.firstChild){const e=t.querySelectorAll("path");const o=t.querySelectorAll("path").length;for(let t=0;t<o;t++){let o=this.convertHtmlToObject(e[t]);let i=n("path",o);s.push(i)}}return s}getSVG(t){const s=this.convertStringToHtml(this.ifxIcon);const e=s.getAttribute("width");const o=s.getAttribute("height");const i=s.getAttribute("fill");const c=s.getAttribute("viewBox");return n("svg",{class:"inline-svg",width:e,height:o,xmlns:"http://www.w3.org/2000/svg",fill:i,viewBox:c},...t)}constructIcon(){if(this.ifxIcon){const t=this.convertStringToHtml(this.ifxIcon);const s=this.convertPathsToVnode(t);const n=this.getSVG(s);return n}else if(this.icon!==""){console.error("Icon not found!");this.consoleError.emit(true);return}else{return}}componentWillLoad(){const t=t=>t.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g,((t,s)=>s));this.ifxIcon=o(t(this.icon))}render(){return n(e,{key:"c1a8037e96f84eb87d1e111039c34885b7452d85"},this.constructIcon())}};r.style=c;export{r as ifx_icon};
+//# sourceMappingURL=p-84ec2ff5.entry.js.map

package/dist/types/components/icons-preview/icons-preview.d.ts

@@ -2,14 +2,16 @@ export declare class IconsPreview {
     iconsArray: string[];
     isCopied: boolean;
     copiedIndex: number;
+    copiedIcon: string | null;
     htmlTag: string;
     iconName: string;
     searchTerm: string;
     el: any;
     handleCopiedText(): void;
-    copyIconText(icon: any): void;
+    copyIconText(icon: string): void;
     copyHtmlString(): void;
     get filteredIcons(): string[];
+    getIconIndex(icon: string): number;
     handleIconFilter(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "35.0.0--canary.1896.5fc54ca71b87c5e8db7c7dbe5fcd6d916843c3da.0",
+  "version": "35.0.0--canary.1896.48ace02f79029e2c84d99703b4c0a9c1e0bd2f4c.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",