@infineon/infineon-design-system-stencil 31.3.0--canary.1720.7dd6849729c02dba24cbd1c978dda37d3a74aa8e.0 → 31.3.0--canary.1720.6c171d05689336054bd75b820dd47536c83bf5c8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ifx-icons-preview.cjs.entry.js +1 -1
- package/dist/cjs/ifx-icons-preview.cjs.entry.js.map +1 -1
- package/dist/collection/components/icons-preview/icons-preview.js +1 -1
- package/dist/collection/components/icons-preview/icons-preview.js.map +1 -1
- package/dist/components/ifx-icons-preview.js +1 -1
- package/dist/components/ifx-icons-preview.js.map +1 -1
- package/dist/esm/ifx-icons-preview.entry.js +1 -1
- package/dist/esm/ifx-icons-preview.entry.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/{p-1853d450.entry.js → p-cbf0cd8a.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-1853d450.entry.js.map → p-cbf0cd8a.entry.js.map} +1 -1
- package/package.json +1 -1
|
@@ -37,7 +37,7 @@ const IconsPreview = class {
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
render() {
|
|
40
|
-
return (index.h("div", { key: '1115df3774a76b620e5a03e11bd3ef59e5ff05fd', class: 'container' }, index.h("div", { key: 'e513e6952f643ceb85c11b00ac515a169d4b10ff', class: "alert__wrapper" }, index.h("ifx-notification", { key: '4d4a5adc91abfce7f1aeffcbb5eaf49459d8cb63', icon: "c-check-16", variant: "
|
|
40
|
+
return (index.h("div", { key: '1115df3774a76b620e5a03e11bd3ef59e5ff05fd', class: 'container' }, index.h("div", { key: 'e513e6952f643ceb85c11b00ac515a169d4b10ff', class: "alert__wrapper" }, index.h("ifx-notification", { key: '4d4a5adc91abfce7f1aeffcbb5eaf49459d8cb63', 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.")), index.h("div", { key: 'f697a5c0fc135ce5e4c6fdb46e9048546b56819b', class: 'html-wrapper' }, index.h("span", { key: '893d72ee2dd899e21cc8901dd63417e92257ebc2', class: "html-tag" }, "<"), index.h("span", { key: 'fc80b732f5274841790a4a7d0a080e072f355720', class: "component-name" }, "ifx-icon"), index.h("span", { key: 'aee512ce9297d447d5a60cef6abec4033a1b8cff', class: "attribute-name" }, " icon"), "=", index.h("span", { key: '6da85573beefb794f1aa4ad50a687086f06a6c3d', class: "attribute-value" }, this.iconName), index.h("span", { key: '86582b2a2011836773285e45de5235ffb568ffd8', class: "html-tag" }, ">"), index.h("span", { key: '34684e64ccd0f7a92f52e8dbc108d7fce5494c6d', class: "html-tag" }, "</"), index.h("span", { key: '19cecd8e0ee91008a92a987bd87c0814c2cf1f44', class: "component-name" }, "ifx-icon"), index.h("span", { key: '1f0892b3abf012963f5ff45c774e4d9ad69efa8b', class: "html-tag" }, ">"), index.h("button", { key: 'b5e268a37eff1dc9ee2f115530f64b4d96a2ad20', onClick: () => this.copyHtmlString() }, this.isCopied ? 'Copied' : 'Copy')), index.h("div", { key: 'cc8a8d6e65f4523f267c0733a207d2f6e05d5d2d', class: "preview__container" }, this.iconsArray.map((icon, index$1) => index.h("div", { class: `preview__container-item ${this.isCopied && this.copiedIndex === index$1 ? 'copied' : ""}`, onClick: () => this.copyIconText(icon) }, index.h("ifx-icon", { icon: icon }))))));
|
|
41
41
|
}
|
|
42
42
|
get el() { return index.getElement(this); }
|
|
43
43
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-icons-preview.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,wzCAAwzC,CAAC;AACj1C,8BAAe,eAAe;;MCQjB,YAAY;IANzB;;QAOW,eAAU,GAAa,EAAE,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,0CAA0C,CAAC;QAC7D,aAAQ,GAAW,aAAa,CAAC;KA2D3C;IAxDC,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,UAAU,CAAC;YACT,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;SACtB,EAAE,IAAI,CAAC,CAAC;KACV;IAED,YAAY,CAAC,IAAI;QACf,IAAI,CAAC,OAAO,GAAG,mBAAmB,IAAI,eAAe,CAAC;QACtD,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,GAAG,CAAA;KAC5B;IAED,cAAc;QACZ,MAAM,SAAS,GAAG,kBAAkB,IAAI,CAAC,QAAQ,cAAc,CAAC;QAChE,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,EAAE,CAAA;KACxB;IAED,iBAAiB;QACf,KAAI,IAAI,IAAI,IAAIA,WAAK,EAAE;YACrB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;SAC3B;KACF;IAED,MAAM;QACJ,QACEC,kEAAK,KAAK,EAAC,WAAW,IACpBA,kEAAK,KAAK,EAAC,gBAAgB,IACvBA,+EACE,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,SAAS,eACP,oBAAoB,eACpB,kIAAkI,iBAChI,QAAQ,kEAEH,CACjB,EACNA,kEAAK,KAAK,EAAC,cAAc,IACvBA,mEAAM,KAAK,EAAC,UAAU,QAAY,EAClCA,mEAAM,KAAK,EAAC,gBAAgB,eAAgB,EAC5CA,mEAAM,KAAK,EAAC,gBAAgB,YAAa,OAACA,mEAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAQ,EAC9FA,mEAAM,KAAK,EAAC,UAAU,QAAY,EAClCA,mEAAM,KAAK,EAAC,UAAU,SAAa,EACnCA,mEAAM,KAAK,EAAC,gBAAgB,eAAgB,EAC5CA,mEAAM,KAAK,EAAC,UAAU,QAAY,EAClCA,qEAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAU,CACtF,EACNA,kEAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK,KACjCD,iBAAK,KAAK,EAAE,2BAA2B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,KAAKC,OAAK,GAAG,QAAQ,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAC1ID,sBAAU,IAAI,EAAE,IAAI,GAAa,CAC7B,CAAC,CACH,CACF,EACP;KACF;;;;;;;","names":["icons","h","index"],"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-24\"`;\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=\"
|
|
1
|
+
{"file":"ifx-icons-preview.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,wzCAAwzC,CAAC;AACj1C,8BAAe,eAAe;;MCQjB,YAAY;IANzB;;QAOW,eAAU,GAAa,EAAE,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,0CAA0C,CAAC;QAC7D,aAAQ,GAAW,aAAa,CAAC;KA2D3C;IAxDC,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,UAAU,CAAC;YACT,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;SACtB,EAAE,IAAI,CAAC,CAAC;KACV;IAED,YAAY,CAAC,IAAI;QACf,IAAI,CAAC,OAAO,GAAG,mBAAmB,IAAI,eAAe,CAAC;QACtD,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,GAAG,CAAA;KAC5B;IAED,cAAc;QACZ,MAAM,SAAS,GAAG,kBAAkB,IAAI,CAAC,QAAQ,cAAc,CAAC;QAChE,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,EAAE,CAAA;KACxB;IAED,iBAAiB;QACf,KAAI,IAAI,IAAI,IAAIA,WAAK,EAAE;YACrB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;SAC3B;KACF;IAED,MAAM;QACJ,QACEC,kEAAK,KAAK,EAAC,WAAW,IACpBA,kEAAK,KAAK,EAAC,gBAAgB,IACvBA,+EACE,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,SAAS,eACP,oBAAoB,eACpB,kIAAkI,iBAChI,QAAQ,kEAEH,CACjB,EACNA,kEAAK,KAAK,EAAC,cAAc,IACvBA,mEAAM,KAAK,EAAC,UAAU,QAAY,EAClCA,mEAAM,KAAK,EAAC,gBAAgB,eAAgB,EAC5CA,mEAAM,KAAK,EAAC,gBAAgB,YAAa,OAACA,mEAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAQ,EAC9FA,mEAAM,KAAK,EAAC,UAAU,QAAY,EAClCA,mEAAM,KAAK,EAAC,UAAU,SAAa,EACnCA,mEAAM,KAAK,EAAC,gBAAgB,eAAgB,EAC5CA,mEAAM,KAAK,EAAC,UAAU,QAAY,EAClCA,qEAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAU,CACtF,EACNA,kEAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK,KACjCD,iBAAK,KAAK,EAAE,2BAA2B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,KAAKC,OAAK,GAAG,QAAQ,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAC1ID,sBAAU,IAAI,EAAE,IAAI,GAAa,CAC7B,CAAC,CACH,CACF,EACP;KACF;;;;;;;","names":["icons","h","index"],"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-24\"`;\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\"><</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\">></span>\n <span class=\"html-tag\"></</span>\n <span class=\"component-name\">ifx-icon</span>\n <span class=\"html-tag\">></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}"],"version":3}
|
|
@@ -28,7 +28,7 @@ export class IconsPreview {
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
render() {
|
|
31
|
-
return (h("div", { key: '1115df3774a76b620e5a03e11bd3ef59e5ff05fd', class: 'container' }, h("div", { key: 'e513e6952f643ceb85c11b00ac515a169d4b10ff', class: "alert__wrapper" }, h("ifx-notification", { key: '4d4a5adc91abfce7f1aeffcbb5eaf49459d8cb63', icon: "c-check-16", variant: "
|
|
31
|
+
return (h("div", { key: '1115df3774a76b620e5a03e11bd3ef59e5ff05fd', class: 'container' }, h("div", { key: 'e513e6952f643ceb85c11b00ac515a169d4b10ff', class: "alert__wrapper" }, h("ifx-notification", { key: '4d4a5adc91abfce7f1aeffcbb5eaf49459d8cb63', 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.")), h("div", { key: 'f697a5c0fc135ce5e4c6fdb46e9048546b56819b', class: 'html-wrapper' }, h("span", { key: '893d72ee2dd899e21cc8901dd63417e92257ebc2', class: "html-tag" }, "<"), h("span", { key: 'fc80b732f5274841790a4a7d0a080e072f355720', class: "component-name" }, "ifx-icon"), h("span", { key: 'aee512ce9297d447d5a60cef6abec4033a1b8cff', class: "attribute-name" }, " icon"), "=", h("span", { key: '6da85573beefb794f1aa4ad50a687086f06a6c3d', class: "attribute-value" }, this.iconName), h("span", { key: '86582b2a2011836773285e45de5235ffb568ffd8', class: "html-tag" }, ">"), h("span", { key: '34684e64ccd0f7a92f52e8dbc108d7fce5494c6d', class: "html-tag" }, "</"), h("span", { key: '19cecd8e0ee91008a92a987bd87c0814c2cf1f44', class: "component-name" }, "ifx-icon"), h("span", { key: '1f0892b3abf012963f5ff45c774e4d9ad69efa8b', class: "html-tag" }, ">"), h("button", { key: 'b5e268a37eff1dc9ee2f115530f64b4d96a2ad20', onClick: () => this.copyHtmlString() }, this.isCopied ? 'Copied' : 'Copy')), h("div", { key: 'cc8a8d6e65f4523f267c0733a207d2f6e05d5d2d', class: "preview__container" }, this.iconsArray.map((icon, index) => h("div", { class: `preview__container-item ${this.isCopied && this.copiedIndex === index ? 'copied' : ""}`, onClick: () => this.copyIconText(icon) }, h("ifx-icon", { icon: icon }))))));
|
|
32
32
|
}
|
|
33
33
|
static get is() { return "ifx-icons-preview"; }
|
|
34
34
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons-preview.js","sourceRoot":"","sources":["../../../src/components/icons-preview/icons-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAQjD,MAAM,OAAO,YAAY;IANzB;QAOW,eAAU,GAAa,EAAE,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,0CAA0C,CAAC;QAC7D,aAAQ,GAAW,aAAa,CAAC;KA2D3C;IAxDC,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;QACvB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC;IAED,YAAY,CAAC,IAAI;QACf,IAAI,CAAC,OAAO,GAAG,mBAAmB,IAAI,eAAe,CAAC;QACtD,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,GAAG,CAAA;IAC7B,CAAC;IAED,cAAc;QACZ,MAAM,SAAS,GAAG,kBAAkB,IAAI,CAAC,QAAQ,cAAc,CAAC;QAChE,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,EAAE,CAAA;IACzB,CAAC;IAED,iBAAiB;QACf,KAAI,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC;YACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,WAAW;YACpB,4DAAK,KAAK,EAAC,gBAAgB;gBACvB,yEACE,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,SAAS,eACP,oBAAoB,eACpB,kIAAkI,iBAChI,QAAQ,kEAEH,CACjB;YACN,4DAAK,KAAK,EAAC,cAAc;gBACvB,6DAAM,KAAK,EAAC,UAAU,QAAY;gBAClC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB;gBAC5C,6DAAM,KAAK,EAAC,gBAAgB,YAAa;;gBAAC,6DAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAQ;gBAC9F,6DAAM,KAAK,EAAC,UAAU,QAAY;gBAClC,6DAAM,KAAK,EAAC,UAAU,SAAa;gBACnC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB;gBAC5C,6DAAM,KAAK,EAAC,UAAU,QAAY;gBAClC,+DAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAU,CACtF;YACN,4DAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACrC,WAAK,KAAK,EAAE,2BAA2B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBAC1I,gBAAU,IAAI,EAAE,IAAI,GAAa,CAC7B,CAAC,CACH,CACF,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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-24\"`;\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=\"
|
|
1
|
+
{"version":3,"file":"icons-preview.js","sourceRoot":"","sources":["../../../src/components/icons-preview/icons-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAQjD,MAAM,OAAO,YAAY;IANzB;QAOW,eAAU,GAAa,EAAE,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,0CAA0C,CAAC;QAC7D,aAAQ,GAAW,aAAa,CAAC;KA2D3C;IAxDC,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;QACvB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC;IAED,YAAY,CAAC,IAAI;QACf,IAAI,CAAC,OAAO,GAAG,mBAAmB,IAAI,eAAe,CAAC;QACtD,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,GAAG,CAAA;IAC7B,CAAC;IAED,cAAc;QACZ,MAAM,SAAS,GAAG,kBAAkB,IAAI,CAAC,QAAQ,cAAc,CAAC;QAChE,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,EAAE,CAAA;IACzB,CAAC;IAED,iBAAiB;QACf,KAAI,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC;YACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,WAAW;YACpB,4DAAK,KAAK,EAAC,gBAAgB;gBACvB,yEACE,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,SAAS,eACP,oBAAoB,eACpB,kIAAkI,iBAChI,QAAQ,kEAEH,CACjB;YACN,4DAAK,KAAK,EAAC,cAAc;gBACvB,6DAAM,KAAK,EAAC,UAAU,QAAY;gBAClC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB;gBAC5C,6DAAM,KAAK,EAAC,gBAAgB,YAAa;;gBAAC,6DAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAQ;gBAC9F,6DAAM,KAAK,EAAC,UAAU,QAAY;gBAClC,6DAAM,KAAK,EAAC,UAAU,SAAa;gBACnC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB;gBAC5C,6DAAM,KAAK,EAAC,UAAU,QAAY;gBAClC,+DAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAU,CACtF;YACN,4DAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACrC,WAAK,KAAK,EAAE,2BAA2B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBAC1I,gBAAU,IAAI,EAAE,IAAI,GAAa,CAC7B,CAAC,CACH,CACF,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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-24\"`;\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\"><</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\">></span>\n <span class=\"html-tag\"></</span>\n <span class=\"component-name\">ifx-icon</span>\n <span class=\"html-tag\">></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}"]}
|
|
@@ -37,7 +37,7 @@ const IconsPreview = /*@__PURE__*/ proxyCustomElement(class IconsPreview extends
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
render() {
|
|
40
|
-
return (h("div", { key: '1115df3774a76b620e5a03e11bd3ef59e5ff05fd', class: 'container' }, h("div", { key: 'e513e6952f643ceb85c11b00ac515a169d4b10ff', class: "alert__wrapper" }, h("ifx-notification", { key: '4d4a5adc91abfce7f1aeffcbb5eaf49459d8cb63', icon: "c-check-16", variant: "
|
|
40
|
+
return (h("div", { key: '1115df3774a76b620e5a03e11bd3ef59e5ff05fd', class: 'container' }, h("div", { key: 'e513e6952f643ceb85c11b00ac515a169d4b10ff', class: "alert__wrapper" }, h("ifx-notification", { key: '4d4a5adc91abfce7f1aeffcbb5eaf49459d8cb63', 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.")), h("div", { key: 'f697a5c0fc135ce5e4c6fdb46e9048546b56819b', class: 'html-wrapper' }, h("span", { key: '893d72ee2dd899e21cc8901dd63417e92257ebc2', class: "html-tag" }, "<"), h("span", { key: 'fc80b732f5274841790a4a7d0a080e072f355720', class: "component-name" }, "ifx-icon"), h("span", { key: 'aee512ce9297d447d5a60cef6abec4033a1b8cff', class: "attribute-name" }, " icon"), "=", h("span", { key: '6da85573beefb794f1aa4ad50a687086f06a6c3d', class: "attribute-value" }, this.iconName), h("span", { key: '86582b2a2011836773285e45de5235ffb568ffd8', class: "html-tag" }, ">"), h("span", { key: '34684e64ccd0f7a92f52e8dbc108d7fce5494c6d', class: "html-tag" }, "</"), h("span", { key: '19cecd8e0ee91008a92a987bd87c0814c2cf1f44', class: "component-name" }, "ifx-icon"), h("span", { key: '1f0892b3abf012963f5ff45c774e4d9ad69efa8b', class: "html-tag" }, ">"), h("button", { key: 'b5e268a37eff1dc9ee2f115530f64b4d96a2ad20', onClick: () => this.copyHtmlString() }, this.isCopied ? 'Copied' : 'Copy')), h("div", { key: 'cc8a8d6e65f4523f267c0733a207d2f6e05d5d2d', class: "preview__container" }, this.iconsArray.map((icon, index) => h("div", { class: `preview__container-item ${this.isCopied && this.copiedIndex === index ? 'copied' : ""}`, onClick: () => this.copyIconText(icon) }, h("ifx-icon", { icon: icon }))))));
|
|
41
41
|
}
|
|
42
42
|
get el() { return this; }
|
|
43
43
|
static get style() { return IfxIconsPreviewStyle0; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-icons-preview.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,wzCAAwzC,CAAC;AACj1C,8BAAe,eAAe;;MCQjB,YAAY;IANzB;;;;QAOW,eAAU,GAAa,EAAE,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,0CAA0C,CAAC;QAC7D,aAAQ,GAAW,aAAa,CAAC;KA2D3C;IAxDC,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,UAAU,CAAC;YACT,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;SACtB,EAAE,IAAI,CAAC,CAAC;KACV;IAED,YAAY,CAAC,IAAI;QACf,IAAI,CAAC,OAAO,GAAG,mBAAmB,IAAI,eAAe,CAAC;QACtD,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,GAAG,CAAA;KAC5B;IAED,cAAc;QACZ,MAAM,SAAS,GAAG,kBAAkB,IAAI,CAAC,QAAQ,cAAc,CAAC;QAChE,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,EAAE,CAAA;KACxB;IAED,iBAAiB;QACf,KAAI,IAAI,IAAI,IAAI,KAAK,EAAE;YACrB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;SAC3B;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,WAAW,IACpB,4DAAK,KAAK,EAAC,gBAAgB,IACvB,yEACE,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,SAAS,eACP,oBAAoB,eACpB,kIAAkI,iBAChI,QAAQ,kEAEH,CACjB,EACN,4DAAK,KAAK,EAAC,cAAc,IACvB,6DAAM,KAAK,EAAC,UAAU,QAAY,EAClC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB,EAC5C,6DAAM,KAAK,EAAC,gBAAgB,YAAa,OAAC,6DAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAQ,EAC9F,6DAAM,KAAK,EAAC,UAAU,QAAY,EAClC,6DAAM,KAAK,EAAC,UAAU,SAAa,EACnC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB,EAC5C,6DAAM,KAAK,EAAC,UAAU,QAAY,EAClC,+DAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAU,CACtF,EACN,4DAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KACjC,WAAK,KAAK,EAAE,2BAA2B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,GAAG,QAAQ,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAC1I,gBAAU,IAAI,EAAE,IAAI,GAAa,CAC7B,CAAC,CACH,CACF,EACP;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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-24\"`;\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=\"
|
|
1
|
+
{"file":"ifx-icons-preview.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,wzCAAwzC,CAAC;AACj1C,8BAAe,eAAe;;MCQjB,YAAY;IANzB;;;;QAOW,eAAU,GAAa,EAAE,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,0CAA0C,CAAC;QAC7D,aAAQ,GAAW,aAAa,CAAC;KA2D3C;IAxDC,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,UAAU,CAAC;YACT,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;SACtB,EAAE,IAAI,CAAC,CAAC;KACV;IAED,YAAY,CAAC,IAAI;QACf,IAAI,CAAC,OAAO,GAAG,mBAAmB,IAAI,eAAe,CAAC;QACtD,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,GAAG,CAAA;KAC5B;IAED,cAAc;QACZ,MAAM,SAAS,GAAG,kBAAkB,IAAI,CAAC,QAAQ,cAAc,CAAC;QAChE,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,EAAE,CAAA;KACxB;IAED,iBAAiB;QACf,KAAI,IAAI,IAAI,IAAI,KAAK,EAAE;YACrB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;SAC3B;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,WAAW,IACpB,4DAAK,KAAK,EAAC,gBAAgB,IACvB,yEACE,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,SAAS,eACP,oBAAoB,eACpB,kIAAkI,iBAChI,QAAQ,kEAEH,CACjB,EACN,4DAAK,KAAK,EAAC,cAAc,IACvB,6DAAM,KAAK,EAAC,UAAU,QAAY,EAClC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB,EAC5C,6DAAM,KAAK,EAAC,gBAAgB,YAAa,OAAC,6DAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAQ,EAC9F,6DAAM,KAAK,EAAC,UAAU,QAAY,EAClC,6DAAM,KAAK,EAAC,UAAU,SAAa,EACnC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB,EAC5C,6DAAM,KAAK,EAAC,UAAU,QAAY,EAClC,+DAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAU,CACtF,EACN,4DAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KACjC,WAAK,KAAK,EAAE,2BAA2B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,GAAG,QAAQ,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAC1I,gBAAU,IAAI,EAAE,IAAI,GAAa,CAC7B,CAAC,CACH,CACF,EACP;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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-24\"`;\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\"><</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\">></span>\n <span class=\"html-tag\"></</span>\n <span class=\"component-name\">ifx-icon</span>\n <span class=\"html-tag\">></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}"],"version":3}
|
|
@@ -33,7 +33,7 @@ const IconsPreview = class {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return (h("div", { key: '1115df3774a76b620e5a03e11bd3ef59e5ff05fd', class: 'container' }, h("div", { key: 'e513e6952f643ceb85c11b00ac515a169d4b10ff', class: "alert__wrapper" }, h("ifx-notification", { key: '4d4a5adc91abfce7f1aeffcbb5eaf49459d8cb63', icon: "c-check-16", variant: "
|
|
36
|
+
return (h("div", { key: '1115df3774a76b620e5a03e11bd3ef59e5ff05fd', class: 'container' }, h("div", { key: 'e513e6952f643ceb85c11b00ac515a169d4b10ff', class: "alert__wrapper" }, h("ifx-notification", { key: '4d4a5adc91abfce7f1aeffcbb5eaf49459d8cb63', 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.")), h("div", { key: 'f697a5c0fc135ce5e4c6fdb46e9048546b56819b', class: 'html-wrapper' }, h("span", { key: '893d72ee2dd899e21cc8901dd63417e92257ebc2', class: "html-tag" }, "<"), h("span", { key: 'fc80b732f5274841790a4a7d0a080e072f355720', class: "component-name" }, "ifx-icon"), h("span", { key: 'aee512ce9297d447d5a60cef6abec4033a1b8cff', class: "attribute-name" }, " icon"), "=", h("span", { key: '6da85573beefb794f1aa4ad50a687086f06a6c3d', class: "attribute-value" }, this.iconName), h("span", { key: '86582b2a2011836773285e45de5235ffb568ffd8', class: "html-tag" }, ">"), h("span", { key: '34684e64ccd0f7a92f52e8dbc108d7fce5494c6d', class: "html-tag" }, "</"), h("span", { key: '19cecd8e0ee91008a92a987bd87c0814c2cf1f44', class: "component-name" }, "ifx-icon"), h("span", { key: '1f0892b3abf012963f5ff45c774e4d9ad69efa8b', class: "html-tag" }, ">"), h("button", { key: 'b5e268a37eff1dc9ee2f115530f64b4d96a2ad20', onClick: () => this.copyHtmlString() }, this.isCopied ? 'Copied' : 'Copy')), h("div", { key: 'cc8a8d6e65f4523f267c0733a207d2f6e05d5d2d', class: "preview__container" }, this.iconsArray.map((icon, index) => h("div", { class: `preview__container-item ${this.isCopied && this.copiedIndex === index ? 'copied' : ""}`, onClick: () => this.copyIconText(icon) }, h("ifx-icon", { icon: icon }))))));
|
|
37
37
|
}
|
|
38
38
|
get el() { return getElement(this); }
|
|
39
39
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-icons-preview.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,wzCAAwzC,CAAC;AACj1C,8BAAe,eAAe;;MCQjB,YAAY;IANzB;;QAOW,eAAU,GAAa,EAAE,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,0CAA0C,CAAC;QAC7D,aAAQ,GAAW,aAAa,CAAC;KA2D3C;IAxDC,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,UAAU,CAAC;YACT,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;SACtB,EAAE,IAAI,CAAC,CAAC;KACV;IAED,YAAY,CAAC,IAAI;QACf,IAAI,CAAC,OAAO,GAAG,mBAAmB,IAAI,eAAe,CAAC;QACtD,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,GAAG,CAAA;KAC5B;IAED,cAAc;QACZ,MAAM,SAAS,GAAG,kBAAkB,IAAI,CAAC,QAAQ,cAAc,CAAC;QAChE,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,EAAE,CAAA;KACxB;IAED,iBAAiB;QACf,KAAI,IAAI,IAAI,IAAI,KAAK,EAAE;YACrB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;SAC3B;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,WAAW,IACpB,4DAAK,KAAK,EAAC,gBAAgB,IACvB,yEACE,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,SAAS,eACP,oBAAoB,eACpB,kIAAkI,iBAChI,QAAQ,kEAEH,CACjB,EACN,4DAAK,KAAK,EAAC,cAAc,IACvB,6DAAM,KAAK,EAAC,UAAU,QAAY,EAClC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB,EAC5C,6DAAM,KAAK,EAAC,gBAAgB,YAAa,OAAC,6DAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAQ,EAC9F,6DAAM,KAAK,EAAC,UAAU,QAAY,EAClC,6DAAM,KAAK,EAAC,UAAU,SAAa,EACnC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB,EAC5C,6DAAM,KAAK,EAAC,UAAU,QAAY,EAClC,+DAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAU,CACtF,EACN,4DAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KACjC,WAAK,KAAK,EAAE,2BAA2B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,GAAG,QAAQ,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAC1I,gBAAU,IAAI,EAAE,IAAI,GAAa,CAC7B,CAAC,CACH,CACF,EACP;KACF;;;;;;;","names":[],"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-24\"`;\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=\"
|
|
1
|
+
{"file":"ifx-icons-preview.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,wzCAAwzC,CAAC;AACj1C,8BAAe,eAAe;;MCQjB,YAAY;IANzB;;QAOW,eAAU,GAAa,EAAE,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,0CAA0C,CAAC;QAC7D,aAAQ,GAAW,aAAa,CAAC;KA2D3C;IAxDC,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,UAAU,CAAC;YACT,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;SACtB,EAAE,IAAI,CAAC,CAAC;KACV;IAED,YAAY,CAAC,IAAI;QACf,IAAI,CAAC,OAAO,GAAG,mBAAmB,IAAI,eAAe,CAAC;QACtD,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,GAAG,CAAA;KAC5B;IAED,cAAc;QACZ,MAAM,SAAS,GAAG,kBAAkB,IAAI,CAAC,QAAQ,cAAc,CAAC;QAChE,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,EAAE,CAAA;KACxB;IAED,iBAAiB;QACf,KAAI,IAAI,IAAI,IAAI,KAAK,EAAE;YACrB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;SAC3B;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,WAAW,IACpB,4DAAK,KAAK,EAAC,gBAAgB,IACvB,yEACE,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,SAAS,eACP,oBAAoB,eACpB,kIAAkI,iBAChI,QAAQ,kEAEH,CACjB,EACN,4DAAK,KAAK,EAAC,cAAc,IACvB,6DAAM,KAAK,EAAC,UAAU,QAAY,EAClC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB,EAC5C,6DAAM,KAAK,EAAC,gBAAgB,YAAa,OAAC,6DAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAQ,EAC9F,6DAAM,KAAK,EAAC,UAAU,QAAY,EAClC,6DAAM,KAAK,EAAC,UAAU,SAAa,EACnC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB,EAC5C,6DAAM,KAAK,EAAC,UAAU,QAAY,EAClC,+DAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAU,CACtF,EACN,4DAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KACjC,WAAK,KAAK,EAAE,2BAA2B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,GAAG,QAAQ,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAC1I,gBAAU,IAAI,EAAE,IAAI,GAAa,CAC7B,CAAC,CACH,CACF,EACP;KACF;;;;;;;","names":[],"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-24\"`;\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\"><</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\">></span>\n <span class=\"html-tag\"></</span>\n <span class=\"component-name\">ifx-icon</span>\n <span class=\"html-tag\">></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}"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,b as a}from"./p-3604def6.js";export{s as setNonce}from"./p-3604def6.js";import{g as i}from"./p-e1255160.js";var n=()=>{{o(t.prototype)}const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};var o=e=>{const t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}const a=t.call(this,false);const i=this.childNodes;if(e){for(let e=0;e<i.length;e++){if(i[e].nodeType!==2){a.appendChild(i[e].cloneNode(true))}}}return a}};n().then((async e=>{await i();return a(JSON.parse('[["p-83feb0a3",[[1,"ifx-table",{"cols":[8],"rows":[8],"buttonRendererOptions":[16],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"filterOrientation":[1,"filter-orientation"],"showLoading":[4,"show-loading"],"currentPage":[32],"rowData":[32],"colData":[32],"filterOptions":[32],"currentFilters":[32],"uniqueKey":[32],"showSidebarFilters":[32],"matchingResultsCount":[32],"onBtShowLoading":[64]},[[0,"ifxChange","handleChipChange"]],{"buttonRendererOptions":["onButtonRendererOptionsChanged"]}]]],["p-575246db",[[1,"ifx-templates-ui",null,[[0,"fieldError","handleError"],[0,"toggleTemplates","filterTemplates"]]]]],["p-7cbf8421",[[1,"ifx-set-filter",{"filterName":[1,"filter-name"],"filterLabel":[1,"filter-label"],"placeholder":[1],"type":[1],"options":[1],"filterValues":[32]}]]],["p-d3388d1e",[[1,"ifx-faq"]]],["p-1853d450",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-e3bd44e5",[[1,"ifx-list-entry",{"value":[1028],"label":[1],"type":[1]},[[0,"ifxChange","handleFilterEntryChange"]],{"value":["valueChanged"]}]]],["p-6fc2a56c",[[1,"ifx-overview-table"]]],["p-b51f918f",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-ccd32b01",[[1,"ifx-filter-accordion",{"maxVisibleItems":[2,"max-visible-items"],"filterGroupName":[1,"filter-group-name"],"expanded":[32],"count":[32],"totalItems":[32]}]]],["p-0ec9c8cc",[[1,"ifx-filter-bar",{"maxShownFilters":[2,"max-shown-filters"],"showMoreFiltersButton":[4,"show-more-filters-button"],"selectedOptions":[32],"showAllFilters":[32],"visibleSlots":[32]}]]],["p-7ee6173c",[[1,"ifx-filter-search",{"filterName":[1,"filter-name"],"disabled":[4],"filterValue":[1025,"filter-value"],"filterKey":[1,"filter-key"],"filterOrientation":[1,"filter-orientation"],"placeholder":[1],"showDeleteIcon":[32]},[[0,"ifxInput","handleFilterSearchChange"]],{"value":["valueChanged"]}]]],["p-42234750",[[1,"ifx-list",{"name":[1],"maxVisibleItems":[2,"max-visible-items"],"type":[1],"resetTrigger":[1028,"reset-trigger"],"expanded":[32],"showMore":[32],"selectedCount":[32],"totalItems":[32],"internalResetTrigger":[32]},null,{"type":["handleTypeChange"],"resetTrigger":["resetTriggerChanged"]}]]],["p-c641af6a",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"size":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showCloseButton":[4,"show-close-button"],"showModal":[32],"slotButtonsPresent":[32]},null,{"opened":["openedChanged"]}]]],["p-10d7d655",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"maxlength":[2],"internalState":[32],"onNavbarMobile":[64]},null,{"isOpen":["handlePropChange"]}]]],["p-6b58ed27",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[2,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"handleItemClick":[16],"showIcon":[32],"showIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"isSubMenuItem":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-b9d7e438",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"href":[1],"target":[1]}]]],["p-7cdb5ee4",[[65,"ifx-date-picker",{"size":[1],"error":[4],"success":[4],"disabled":[4],"AriaLabel":[1,"aria-label"],"value":[1],"max":[1],"min":[1],"required":[4],"label":[1],"caption":[1]}]]],["p-a96a529d",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-d4a5b04a",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxNavItem","clearFirstLayerMenu"],[0,"ifxOpen","handleSearchBarToggle"]]]]],["p-27238b0c",[[1,"ifx-navbar-item",{"showLabel":[4,"show-label"],"icon":[1],"href":[1],"target":[1],"hideOnMobile":[4,"hide-on-mobile"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"isSidebarMenuItem":[32],"itemPosition":[32],"hideComponent":[64],"showComponent":[64],"toggleChildren":[64],"moveChildComponentsIntoSubLayerMenu":[64],"toggleFirstLayerItem":[64],"addMenuItemClass":[64],"moveChildComponentsBackIntoNavbar":[64],"returnToFirstLayer":[64],"setMenuItemPosition":[64],"setItemSideSpecifications":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-0a615868",[[1,"ifx-segment",{"icon":[1],"segmentIndex":[2,"segment-index"],"selected":[1028],"value":[1]}]]],["p-8a06f209",[[1,"ifx-segmented-control",{"caption":[1],"label":[1],"size":[1]},[[0,"segmentSelect","onSegmentSelect"]]]]],["p-6e2634b2",[[1,"ifx-slider",{"min":[2],"max":[2],"step":[2],"value":[2],"minValueHandle":[2,"min-value-handle"],"maxValueHandle":[2,"max-value-handle"],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"type":[1],"internalValue":[32],"percentage":[32],"internalMinValue":[32],"internalMaxValue":[32]},null,{"value":["valueChanged"],"minValueHandle":["minValueChanged"],"maxValueHandle":["maxValueChanged"]}]]],["p-7381aae4",[[1,"ifx-step",{"complete":[4],"disabled":[4],"error":[1028],"lastStep":[4,"last-step"],"stepId":[2,"step-id"],"stepperState":[16],"active":[32],"clickable":[32]},[[4,"ifxChange","onStepChange"]],{"stepperState":["updateCurrentStep"],"active":["updateErrorState"]}]]],["p-d23538c4",[[1,"ifx-tabs",{"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"fullWidth":[4,"full-width"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[9,"resize","updateBorderOnWindowResize"],[0,"tabHeaderChange","handleTabHeaderChange"],[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-f952a1f8",[[1,"ifx-tag",{"icon":[1]}]]],["p-6b38715d",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-17678d4e",[[1,"ifx-badge"]]],["p-0ade1663",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"gridOptions":[32],"columnDefs":[32],"rowData":[32],"uniqueKey":[32]}]]],["p-80531643",[[1,"ifx-breadcrumb"]]],["p-d5c652f5",[[1,"ifx-breadcrumb-item",{"isLastItem":[32],"uniqueId":[32],"hasDropdownMenu":[32]},[[5,"mousedown","handleOutsideClick"],[0,"keydown","handleKeyDown"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-3387945d",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"AriaLabel":[1,"aria-label"],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-14d26e65",[[1,"ifx-card-headline",{"direction":[32],"hasDesc":[32]}]]],["p-9be1b9c8",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-455b7dd6",[[1,"ifx-card-links"]]],["p-8248d8c0",[[1,"ifx-card-overline"]]],["p-cd1a498a",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-19e2ffcf",[[1,"ifx-content-switcher",{"items":[32],"activeIndex":[32],"hoverIndex":[32],"focusIndex":[32],"dividers":[32]}]]],["p-e1558a3f",[[1,"ifx-content-switcher-item",{"selected":[4],"value":[1]}]]],["p-11ad5f10",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-24eb5a94",[[1,"ifx-dropdown-header"]]],["p-b4f856ec",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-cc622212",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-2a8944c3",[[1,"ifx-filter-type-group",{"selectedOptions":[32]}]]],["p-77f46443",[[1,"ifx-footer",{"copyrightText":[1,"copyright-text"],"currentYear":[32]}]]],["p-c52cc3c2",[[1,"ifx-footer-column"]]],["p-0e190d11",[[1,"ifx-navbar-profile",{"showLabel":[4,"show-label"],"href":[1],"imageUrl":[1,"image-url"],"target":[1],"alt":[1],"userName":[1,"user-name"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"internalImageUrl":[32],"hideComponent":[64],"showComponent":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-5a43b099",[[1,"ifx-progress-bar",{"value":[2],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-5d7b76b5",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-1b8cf86c",[[1,"ifx-sidebar-title"]]],["p-76a72c0b",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-7f19e900",[[1,"ifx-stepper",{"activeStep":[1026,"active-step"],"indicatorPosition":[1,"indicator-position"],"showStepNumber":[4,"show-step-number"],"variant":[1],"stepsCount":[32],"shouldEmitEvent":[32],"emittedByClick":[32]},[[0,"ifxChange","onStepChange"]],{"activeStep":["handleActiveStep"]}]]],["p-a1883884",[[65,"ifx-switch",{"checked":[4],"name":[1],"disabled":[4],"value":[1],"internalChecked":[32],"isChecked":[64]},null,{"checked":["valueChanged"]}]]],["p-e7733535",[[4,"ifx-tab",{"header":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}]]],["p-a2c1d71b",[[65,"ifx-textarea",{"caption":[1],"cols":[2],"disabled":[4],"error":[4],"label":[1],"maxlength":[2],"name":[1],"placeholder":[1],"readOnly":[4,"read-only"],"resize":[1],"rows":[2],"value":[1025],"wrap":[1],"reset":[64]}]]],["p-e403099a",[[1,"ifx-dropdown-separator"]]],["p-4c92e69c",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-5876b194",[[65,"ifx-multiselect",{"name":[1],"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"showSearch":[4,"show-search"],"showSelectAll":[4,"show-select-all"],"internalError":[32],"internalErrorMessage":[32],"persistentSelectedOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32],"optionCount":[32],"optionsProcessed":[32]},null,{"options":["updateOptions"],"error":["updateInternalError"],"errorMessage":["updateInternalErrorMessage"],"loadedOptions":["loadedOptionsChanged"],"persistentSelectedOptions":["onSelectionChange"]}]]],["p-3fa1bf3a",[[1,"ifx-link",{"href":[1],"target":[1],"variant":[1],"size":[1],"disabled":[4],"internalHref":[32],"internalTarget":[32],"internalVariant":[32]}]]],["p-c5176396",[[1,"ifx-notification",{"icon":[1],"variant":[1],"linkText":[1,"link-text"],"linkHref":[1,"link-href"],"linkTarget":[1,"link-target"]}]]],["p-46b6f5a4",[[65,"ifx-radio-button",{"disabled":[4],"value":[1],"error":[4],"size":[513],"name":[513],"checked":[1028],"internalChecked":[32],"hasSlot":[32]},[[0,"keydown","handleKeyDown"],[4,"change","handleExternalChange"]],{"checked":["handleCheckedChange"],"internalChecked":["updateFormValue"]}]]],["p-06b50ff3",[[65,"ifx-checkbox",{"disabled":[4],"checked":[4],"error":[4],"size":[1],"indeterminate":[4],"value":[1],"internalChecked":[32],"internalIndeterminate":[32],"isChecked":[64],"toggleCheckedState":[64]},null,{"checked":["valueChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-0d05f879",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"AriaLabel":[1,"aria-label"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-e08f0be2",[[1,"ifx-template",{"name":[1],"thumbnail":[1],"repoDetails":[32],"repoUrl":[32],"showDetails":[32],"isTemplatePage":[32],"isLoading":[32],"repoError":[32],"toggleTemplate":[64]}],[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4],"AriaLive":[1,"aria-live"],"uniqueId":[32]}]]],["p-ad2155dc",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"AriaLevel":[2,"aria-level"],"internalOpen":[32]},[[0,"keydown","handleKeydown"]],{"open":["openChanged"]}],[17,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxOpen","onItemOpen"]]]]],["p-f733c692",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"placeholder":[1],"maxlength":[2],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-5b3d96f1",[[0,"ifx-select",{"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"showSearch":[4,"show-search"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"disabled":[4],"placeholderValue":[1,"placeholder-value"],"options":[1025],"size":[1],"selectedOption":[32],"optionIsSelected":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"ajax":[64],"handleDeleteIcon":[64]},[[5,"mousedown","handleOutsideClick"]],{"disabled":["watchDisabled"]}]]],["p-dd597610",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]},[[2,"click","handleClick"]]]]],["p-ec8e99ff",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["p-4c6b1882",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]],[1,"ifx-chip",{"placeholder":[1],"size":[1],"value":[1025],"variant":[1],"readOnly":[4,"read-only"],"AriaLabel":[1,"aria-label"],"opened":[32],"selectedOptions":[32]},[[5,"mousedown","closeDropdownOnOutsideClick"],[0,"keydown","handleKeyDown"],[0,"ifxChipItemSelect","updateSelectedOptions"]],{"value":["handleValueChange"],"readOnly":["handleReadOnlyChange"]}],[1,"ifx-chip-item",{"value":[1],"chipState":[16],"selected":[1540]},[[16,"ifxChipItemSelect","updateItemSelection"]],{"selected":["validateSelected"]}]]],["p-2fd73ad3",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}],[65,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"maxlength":[2],"showDeleteIcon":[4,"show-delete-icon"],"reset":[64]},null,{"value":["valueWatcher"]}]]]]'),e)}));
|
|
1
|
+
import{p as e,H as t,b as a}from"./p-3604def6.js";export{s as setNonce}from"./p-3604def6.js";import{g as i}from"./p-e1255160.js";var n=()=>{{o(t.prototype)}const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};var o=e=>{const t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}const a=t.call(this,false);const i=this.childNodes;if(e){for(let e=0;e<i.length;e++){if(i[e].nodeType!==2){a.appendChild(i[e].cloneNode(true))}}}return a}};n().then((async e=>{await i();return a(JSON.parse('[["p-83feb0a3",[[1,"ifx-table",{"cols":[8],"rows":[8],"buttonRendererOptions":[16],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"filterOrientation":[1,"filter-orientation"],"showLoading":[4,"show-loading"],"currentPage":[32],"rowData":[32],"colData":[32],"filterOptions":[32],"currentFilters":[32],"uniqueKey":[32],"showSidebarFilters":[32],"matchingResultsCount":[32],"onBtShowLoading":[64]},[[0,"ifxChange","handleChipChange"]],{"buttonRendererOptions":["onButtonRendererOptionsChanged"]}]]],["p-575246db",[[1,"ifx-templates-ui",null,[[0,"fieldError","handleError"],[0,"toggleTemplates","filterTemplates"]]]]],["p-7cbf8421",[[1,"ifx-set-filter",{"filterName":[1,"filter-name"],"filterLabel":[1,"filter-label"],"placeholder":[1],"type":[1],"options":[1],"filterValues":[32]}]]],["p-d3388d1e",[[1,"ifx-faq"]]],["p-cbf0cd8a",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-e3bd44e5",[[1,"ifx-list-entry",{"value":[1028],"label":[1],"type":[1]},[[0,"ifxChange","handleFilterEntryChange"]],{"value":["valueChanged"]}]]],["p-6fc2a56c",[[1,"ifx-overview-table"]]],["p-b51f918f",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-ccd32b01",[[1,"ifx-filter-accordion",{"maxVisibleItems":[2,"max-visible-items"],"filterGroupName":[1,"filter-group-name"],"expanded":[32],"count":[32],"totalItems":[32]}]]],["p-0ec9c8cc",[[1,"ifx-filter-bar",{"maxShownFilters":[2,"max-shown-filters"],"showMoreFiltersButton":[4,"show-more-filters-button"],"selectedOptions":[32],"showAllFilters":[32],"visibleSlots":[32]}]]],["p-7ee6173c",[[1,"ifx-filter-search",{"filterName":[1,"filter-name"],"disabled":[4],"filterValue":[1025,"filter-value"],"filterKey":[1,"filter-key"],"filterOrientation":[1,"filter-orientation"],"placeholder":[1],"showDeleteIcon":[32]},[[0,"ifxInput","handleFilterSearchChange"]],{"value":["valueChanged"]}]]],["p-42234750",[[1,"ifx-list",{"name":[1],"maxVisibleItems":[2,"max-visible-items"],"type":[1],"resetTrigger":[1028,"reset-trigger"],"expanded":[32],"showMore":[32],"selectedCount":[32],"totalItems":[32],"internalResetTrigger":[32]},null,{"type":["handleTypeChange"],"resetTrigger":["resetTriggerChanged"]}]]],["p-c641af6a",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"size":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showCloseButton":[4,"show-close-button"],"showModal":[32],"slotButtonsPresent":[32]},null,{"opened":["openedChanged"]}]]],["p-10d7d655",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"maxlength":[2],"internalState":[32],"onNavbarMobile":[64]},null,{"isOpen":["handlePropChange"]}]]],["p-6b58ed27",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[2,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"handleItemClick":[16],"showIcon":[32],"showIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"isSubMenuItem":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-b9d7e438",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"href":[1],"target":[1]}]]],["p-7cdb5ee4",[[65,"ifx-date-picker",{"size":[1],"error":[4],"success":[4],"disabled":[4],"AriaLabel":[1,"aria-label"],"value":[1],"max":[1],"min":[1],"required":[4],"label":[1],"caption":[1]}]]],["p-a96a529d",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-d4a5b04a",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxNavItem","clearFirstLayerMenu"],[0,"ifxOpen","handleSearchBarToggle"]]]]],["p-27238b0c",[[1,"ifx-navbar-item",{"showLabel":[4,"show-label"],"icon":[1],"href":[1],"target":[1],"hideOnMobile":[4,"hide-on-mobile"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"isSidebarMenuItem":[32],"itemPosition":[32],"hideComponent":[64],"showComponent":[64],"toggleChildren":[64],"moveChildComponentsIntoSubLayerMenu":[64],"toggleFirstLayerItem":[64],"addMenuItemClass":[64],"moveChildComponentsBackIntoNavbar":[64],"returnToFirstLayer":[64],"setMenuItemPosition":[64],"setItemSideSpecifications":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-0a615868",[[1,"ifx-segment",{"icon":[1],"segmentIndex":[2,"segment-index"],"selected":[1028],"value":[1]}]]],["p-8a06f209",[[1,"ifx-segmented-control",{"caption":[1],"label":[1],"size":[1]},[[0,"segmentSelect","onSegmentSelect"]]]]],["p-6e2634b2",[[1,"ifx-slider",{"min":[2],"max":[2],"step":[2],"value":[2],"minValueHandle":[2,"min-value-handle"],"maxValueHandle":[2,"max-value-handle"],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"type":[1],"internalValue":[32],"percentage":[32],"internalMinValue":[32],"internalMaxValue":[32]},null,{"value":["valueChanged"],"minValueHandle":["minValueChanged"],"maxValueHandle":["maxValueChanged"]}]]],["p-7381aae4",[[1,"ifx-step",{"complete":[4],"disabled":[4],"error":[1028],"lastStep":[4,"last-step"],"stepId":[2,"step-id"],"stepperState":[16],"active":[32],"clickable":[32]},[[4,"ifxChange","onStepChange"]],{"stepperState":["updateCurrentStep"],"active":["updateErrorState"]}]]],["p-d23538c4",[[1,"ifx-tabs",{"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"fullWidth":[4,"full-width"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[9,"resize","updateBorderOnWindowResize"],[0,"tabHeaderChange","handleTabHeaderChange"],[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-f952a1f8",[[1,"ifx-tag",{"icon":[1]}]]],["p-6b38715d",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-17678d4e",[[1,"ifx-badge"]]],["p-0ade1663",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"gridOptions":[32],"columnDefs":[32],"rowData":[32],"uniqueKey":[32]}]]],["p-80531643",[[1,"ifx-breadcrumb"]]],["p-d5c652f5",[[1,"ifx-breadcrumb-item",{"isLastItem":[32],"uniqueId":[32],"hasDropdownMenu":[32]},[[5,"mousedown","handleOutsideClick"],[0,"keydown","handleKeyDown"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-3387945d",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"AriaLabel":[1,"aria-label"],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-14d26e65",[[1,"ifx-card-headline",{"direction":[32],"hasDesc":[32]}]]],["p-9be1b9c8",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-455b7dd6",[[1,"ifx-card-links"]]],["p-8248d8c0",[[1,"ifx-card-overline"]]],["p-cd1a498a",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-19e2ffcf",[[1,"ifx-content-switcher",{"items":[32],"activeIndex":[32],"hoverIndex":[32],"focusIndex":[32],"dividers":[32]}]]],["p-e1558a3f",[[1,"ifx-content-switcher-item",{"selected":[4],"value":[1]}]]],["p-11ad5f10",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-24eb5a94",[[1,"ifx-dropdown-header"]]],["p-b4f856ec",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-cc622212",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-2a8944c3",[[1,"ifx-filter-type-group",{"selectedOptions":[32]}]]],["p-77f46443",[[1,"ifx-footer",{"copyrightText":[1,"copyright-text"],"currentYear":[32]}]]],["p-c52cc3c2",[[1,"ifx-footer-column"]]],["p-0e190d11",[[1,"ifx-navbar-profile",{"showLabel":[4,"show-label"],"href":[1],"imageUrl":[1,"image-url"],"target":[1],"alt":[1],"userName":[1,"user-name"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"internalImageUrl":[32],"hideComponent":[64],"showComponent":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-5a43b099",[[1,"ifx-progress-bar",{"value":[2],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-5d7b76b5",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-1b8cf86c",[[1,"ifx-sidebar-title"]]],["p-76a72c0b",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-7f19e900",[[1,"ifx-stepper",{"activeStep":[1026,"active-step"],"indicatorPosition":[1,"indicator-position"],"showStepNumber":[4,"show-step-number"],"variant":[1],"stepsCount":[32],"shouldEmitEvent":[32],"emittedByClick":[32]},[[0,"ifxChange","onStepChange"]],{"activeStep":["handleActiveStep"]}]]],["p-a1883884",[[65,"ifx-switch",{"checked":[4],"name":[1],"disabled":[4],"value":[1],"internalChecked":[32],"isChecked":[64]},null,{"checked":["valueChanged"]}]]],["p-e7733535",[[4,"ifx-tab",{"header":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}]]],["p-a2c1d71b",[[65,"ifx-textarea",{"caption":[1],"cols":[2],"disabled":[4],"error":[4],"label":[1],"maxlength":[2],"name":[1],"placeholder":[1],"readOnly":[4,"read-only"],"resize":[1],"rows":[2],"value":[1025],"wrap":[1],"reset":[64]}]]],["p-e403099a",[[1,"ifx-dropdown-separator"]]],["p-4c92e69c",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-5876b194",[[65,"ifx-multiselect",{"name":[1],"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"showSearch":[4,"show-search"],"showSelectAll":[4,"show-select-all"],"internalError":[32],"internalErrorMessage":[32],"persistentSelectedOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32],"optionCount":[32],"optionsProcessed":[32]},null,{"options":["updateOptions"],"error":["updateInternalError"],"errorMessage":["updateInternalErrorMessage"],"loadedOptions":["loadedOptionsChanged"],"persistentSelectedOptions":["onSelectionChange"]}]]],["p-3fa1bf3a",[[1,"ifx-link",{"href":[1],"target":[1],"variant":[1],"size":[1],"disabled":[4],"internalHref":[32],"internalTarget":[32],"internalVariant":[32]}]]],["p-c5176396",[[1,"ifx-notification",{"icon":[1],"variant":[1],"linkText":[1,"link-text"],"linkHref":[1,"link-href"],"linkTarget":[1,"link-target"]}]]],["p-46b6f5a4",[[65,"ifx-radio-button",{"disabled":[4],"value":[1],"error":[4],"size":[513],"name":[513],"checked":[1028],"internalChecked":[32],"hasSlot":[32]},[[0,"keydown","handleKeyDown"],[4,"change","handleExternalChange"]],{"checked":["handleCheckedChange"],"internalChecked":["updateFormValue"]}]]],["p-06b50ff3",[[65,"ifx-checkbox",{"disabled":[4],"checked":[4],"error":[4],"size":[1],"indeterminate":[4],"value":[1],"internalChecked":[32],"internalIndeterminate":[32],"isChecked":[64],"toggleCheckedState":[64]},null,{"checked":["valueChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-0d05f879",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"AriaLabel":[1,"aria-label"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-e08f0be2",[[1,"ifx-template",{"name":[1],"thumbnail":[1],"repoDetails":[32],"repoUrl":[32],"showDetails":[32],"isTemplatePage":[32],"isLoading":[32],"repoError":[32],"toggleTemplate":[64]}],[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4],"AriaLive":[1,"aria-live"],"uniqueId":[32]}]]],["p-ad2155dc",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"AriaLevel":[2,"aria-level"],"internalOpen":[32]},[[0,"keydown","handleKeydown"]],{"open":["openChanged"]}],[17,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxOpen","onItemOpen"]]]]],["p-f733c692",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"placeholder":[1],"maxlength":[2],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-5b3d96f1",[[0,"ifx-select",{"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"showSearch":[4,"show-search"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"disabled":[4],"placeholderValue":[1,"placeholder-value"],"options":[1025],"size":[1],"selectedOption":[32],"optionIsSelected":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"ajax":[64],"handleDeleteIcon":[64]},[[5,"mousedown","handleOutsideClick"]],{"disabled":["watchDisabled"]}]]],["p-dd597610",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]},[[2,"click","handleClick"]]]]],["p-ec8e99ff",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["p-4c6b1882",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]],[1,"ifx-chip",{"placeholder":[1],"size":[1],"value":[1025],"variant":[1],"readOnly":[4,"read-only"],"AriaLabel":[1,"aria-label"],"opened":[32],"selectedOptions":[32]},[[5,"mousedown","closeDropdownOnOutsideClick"],[0,"keydown","handleKeyDown"],[0,"ifxChipItemSelect","updateSelectedOptions"]],{"value":["handleValueChange"],"readOnly":["handleReadOnlyChange"]}],[1,"ifx-chip-item",{"value":[1],"chipState":[16],"selected":[1540]},[[16,"ifxChipItemSelect","updateItemSelection"]],{"selected":["validateSelected"]}]]],["p-2fd73ad3",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}],[65,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"maxlength":[2],"showDeleteIcon":[4,"show-delete-icon"],"reset":[64]},null,{"value":["valueWatcher"]}]]]]'),e)}));
|
|
2
2
|
//# sourceMappingURL=infineon-design-system-stencil.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as i,g as a}from"./p-3604def6.js";import{i as t}from"./p-38c8a9b0.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-24"`}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:"1115df3774a76b620e5a03e11bd3ef59e5ff05fd",class:"container"},i("div",{key:"e513e6952f643ceb85c11b00ac515a169d4b10ff",class:"alert__wrapper"},i("ifx-notification",{key:"4d4a5adc91abfce7f1aeffcbb5eaf49459d8cb63",icon:"c-check-16",variant:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,h as i,g as a}from"./p-3604def6.js";import{i as t}from"./p-38c8a9b0.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-24"`}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:"1115df3774a76b620e5a03e11bd3ef59e5ff05fd",class:"container"},i("div",{key:"e513e6952f643ceb85c11b00ac515a169d4b10ff",class:"alert__wrapper"},i("ifx-notification",{key:"4d4a5adc91abfce7f1aeffcbb5eaf49459d8cb63",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:"f697a5c0fc135ce5e4c6fdb46e9048546b56819b",class:"html-wrapper"},i("span",{key:"893d72ee2dd899e21cc8901dd63417e92257ebc2",class:"html-tag"},"<"),i("span",{key:"fc80b732f5274841790a4a7d0a080e072f355720",class:"component-name"},"ifx-icon"),i("span",{key:"aee512ce9297d447d5a60cef6abec4033a1b8cff",class:"attribute-name"}," icon"),"=",i("span",{key:"6da85573beefb794f1aa4ad50a687086f06a6c3d",class:"attribute-value"},this.iconName),i("span",{key:"86582b2a2011836773285e45de5235ffb568ffd8",class:"html-tag"},">"),i("span",{key:"34684e64ccd0f7a92f52e8dbc108d7fce5494c6d",class:"html-tag"},"</"),i("span",{key:"19cecd8e0ee91008a92a987bd87c0814c2cf1f44",class:"component-name"},"ifx-icon"),i("span",{key:"1f0892b3abf012963f5ff45c774e4d9ad69efa8b",class:"html-tag"},">"),i("button",{key:"b5e268a37eff1dc9ee2f115530f64b4d96a2ad20",onClick:()=>this.copyHtmlString()},this.isCopied?"Copied":"Copy")),i("div",{key:"cc8a8d6e65f4523f267c0733a207d2f6e05d5d2d",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};
|
|
2
|
+
//# sourceMappingURL=p-cbf0cd8a.entry.js.map
|
package/dist/infineon-design-system-stencil/{p-1853d450.entry.js.map → p-cbf0cd8a.entry.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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-24\"`;\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=\"
|
|
1
|
+
{"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-24\"`;\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\"><</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\">></span>\n <span class=\"html-tag\"></</span>\n <span class=\"component-name\">ifx-icon</span>\n <span class=\"html-tag\">></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":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infineon/infineon-design-system-stencil",
|
|
3
|
-
"version": "31.3.0--canary.1720.
|
|
3
|
+
"version": "31.3.0--canary.1720.6c171d05689336054bd75b820dd47536c83bf5c8.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Infineon design system Stencil web components",
|
|
6
6
|
"homepage": "https://infineon.github.io/infineon-design-system-stencil",
|