@infineon/infineon-design-system-stencil 35.0.0--canary.1896.bd752bd5c16c367ec3fb0493b8ca8e6508a16e48.0 → 35.0.0--canary.1896.5fc54ca71b87c5e8db7c7dbe5fcd6d916843c3da.0

package/dist/infineon-design-system-stencil/p-02634b6e.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-2c8c0e87.js";const o='.container{display:flex;flex-direction:column;gap:10px}.alert__wrapper{margin-bottom:40px}.html-wrapper{background:rgb(38, 38, 38);padding:20px;color:white;font-family:monospace;position:sticky;top:0;left:0;z-index:99}.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 .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=`"c-info-16"`}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()}componentWillLoad(){for(let e in t){this.iconsArray.push(e)}}render(){return i("div",{key:"e5e0788565bb50d8b50f202e3824afe86e2a158e",class:"container"},i("div",{key:"ae158193f2a9181eb1426480ea2b94f7430f5eca",class:"alert__wrapper"},i("ifx-notification",{key:"8345b299944d276859d0ddc7514fc6df1cb13784",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:"1aa82aeee7fbf2fcbdef49dad691cc1a45da9fc3",class:"html-wrapper"},i("span",{key:"d8ed26f941d413ed9c97ad913ab0099119a824c6",class:"html-tag"},"<"),i("span",{key:"5061e0909765b0e654a387610a05cb66c5218265",class:"component-name"},"ifx-icon"),i("span",{key:"c72b7029ae8c6a61ef58a337a203952e8f313d3e",class:"attribute-name"}," icon"),"=",i("span",{key:"9dc24de771b12f7c35ef12a666446053043b70c5",class:"attribute-value"},this.iconName),i("span",{key:"5fab1ce949dbe53f00c350ad5f214448d9b57e7a",class:"html-tag"},">"),i("span",{key:"84a21a9f0f9a8b2c0c92d9d12f43e371d0773810",class:"html-tag"},"</"),i("span",{key:"2a41361f12ccd3c314b3fce84e1db9a667c594a9",class:"component-name"},"ifx-icon"),i("span",{key:"8a0e75935ce8736caccac24709904112ec539b73",class:"html-tag"},">"),i("button",{key:"83a4d63fec9460cc387abe1488f220472ab3b16f",onClick:()=>this.copyHtmlString()},this.isCopied?"Copied":"Copy")),i("div",{key:"972b1d933d4e31c5ba78e629414c8f20c52cbb23",class:"preview__container"},this.iconsArray.map(((e,a)=>i("div",{class:`preview__container-item ${this.isCopied&&this.copiedIndex===a?"copied":""}`,onClick:()=>this.copyIconText(e)},i("ifx-icon",{icon:e}))))))}get el(){return a(this)}};c.style=n;export{c as ifx_icons_preview};
-//# sourceMappingURL=p-02634b6e.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["iconsPreviewCss","IfxIconsPreviewStyle0","IconsPreview","constructor","hostRef","this","iconsArray","isCopied","htmlTag","iconName","handleCopiedText","setTimeout","copyIconText","icon","copyHtmlString","copiedTag","navigator","clipboard","writeText","componentWillLoad","icons","push","render","h","key","class","variant","onClick","map","index","copiedIndex"],"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.html-wrapper {\n  background: rgb(38, 38, 38);\n  padding: 20px;\n  color: white;\n  font-family: monospace;\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 99;\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  & .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 = `\"c-info-16\"`;\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  componentWillLoad() { \n    for(let icon in icons) { \n      this.iconsArray.push(icon)\n    }\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='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 class=\"preview__container\">\n          {this.iconsArray.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        </div>\n      </div>\n    )\n  }\n}"],"mappings":"sFAAA,MAAMA,EAAkB,qzCACxB,MAAAC,EAAeD,E,MCQFE,EAAY,MANzB,WAAAC,CAAAC,G,UAOWC,KAAAC,WAAuB,GACvBD,KAAAE,SAAoB,MAEpBF,KAAAG,QAAkB,2CAClBH,KAAAI,SAAmB,a,CAG5B,gBAAAC,GACEL,KAAKE,SAAW,KAChBI,YAAW,KACTN,KAAKE,SAAW,KAAK,GACpB,I,CAGL,YAAAK,CAAaC,GACXR,KAAKG,QAAU,mBAAmBK,iBAClCR,KAAKI,SAAW,IAAII,I,CAGtB,cAAAC,GACE,MAAMC,EAAY,kBAAkBV,KAAKI,uBACzCO,UAAUC,UAAUC,UAAUH,GAC9BV,KAAKK,kB,CAGP,iBAAAS,GACE,IAAI,IAAIN,KAAQO,EAAO,CACrBf,KAAKC,WAAWe,KAAKR,E,EAIzB,MAAAS,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,kBACPF,EAAA,oBAAAC,IAAA,2CACEX,KAAK,aACLa,QAAQ,UAAS,YACP,qBAAoB,YACpB,mIAAkI,cAChI,UAAQ,gEAI1BH,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,mBAAmBpB,KAAKI,UAC9Ec,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,2CAAQG,QAAS,IAAMtB,KAAKS,kBAAmBT,KAAKE,SAAW,SAAW,SAE5EgB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,sBACRpB,KAAKC,WAAWsB,KAAI,CAACf,EAAMgB,IAC5BN,EAAA,OAAKE,MAAO,2BAA2BpB,KAAKE,UAAYF,KAAKyB,cAAgBD,EAAQ,SAAW,KAAMF,QAAS,IAAMtB,KAAKO,aAAaC,IACrIU,EAAA,YAAUV,KAAMA,Q","ignoreList":[]}