npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.4.4--canary.1723.b2cb04cb46890b174f47cfd446a0e20dc3cee6fc.0 → 39.4.4-canary.0 - Mend

@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b2cb04cb46890b174f47cfd446a0e20dc3cee6fc.0 → 39.4.4-canary.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.

Files changed (1205) hide show

package/dist/esm/ifx-download.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-download.entry.js","sources":["src/components/download/download.scss?tag=ifx-download&encapsulation=shadow","src/components/download/download.tsx"],"sourcesContent":["","import { Component, h, Prop } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-download',\n styleUrl: './download.scss',\n shadow: true\n})\nexport class Download {\n @Prop() tokens: 'css' \| 'scss' = 'css';\n\n render() {\n const fileMap = {\n css: 'css-variables.css',\n scss: 'scss-variables.scss'\n };\n\n const fileName = `infineon-tokens.${this.tokens}`;\n const sourceFile = fileMap[this.tokens];\n \n const fileUrl = `https://raw.githubusercontent.com/Infineon/public-assets/main/ifx-tokens/${sourceFile}`;\n\n return (\n <ifx-link \n onClick={(e) => {\n e.preventDefault();\n fetch(fileUrl)\n .then(res => res.blob())\n .then(blob => {\n const link = document.createElement('a');\n link.href = URL.createObjectURL(blob);\n link.download = fileName;\n link.click();\n });\n }}\n href={fileUrl}\n download={fileName} \n class=\"download__wrapper\" \n size=\"m\" \n variant=\"bold\"\n >\n <slot />\n </ifx-link>\n );\n }\n}"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,EAAE;;MCOT,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAM,CAAA,MAAA,GAAmB,KAAK;AAoCvC;IAlCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,GAAG,EAAE,mBAAmB;AACxB,YAAA,IAAI,EAAE;SACP;AAED,QAAA,MAAM,QAAQ,GAAG,CAAA,gBAAA,EAAmB,IAAI,CAAC,MAAM,EAAE;QACjD,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;AAEvC,QAAA,MAAM,OAAO,GAAG,CAA4E,yEAAA,EAAA,UAAU,EAAE;AAExG,QAAA,QACE,CACA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,CAAC,CAAC,KAAI;gBACb,CAAC,CAAC,cAAc,EAAE;gBAClB,KAAK,CAAC,OAAO;qBACV,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE;qBACtB,IAAI,CAAC,IAAI,IAAG;oBACX,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC;oBACxC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC;AACrC,oBAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;oBACxB,IAAI,CAAC,KAAK,EAAE;AACd,iBAAC,CAAC;AACN,aAAC,EACC,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,GAAG,EACR,OAAO,EAAC,MAAM,EAAA,EAEd,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACC;;;;;;;"}
1	+ {"version":3,"file":"ifx-download.entry.js","sources":["src/components/download/download.scss?tag=ifx-download&encapsulation=shadow","src/components/download/download.tsx"],"sourcesContent":["","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'ifx-download',\r\n styleUrl: './download.scss',\r\n shadow: true\r\n})\r\nexport class Download {\r\n @Prop() tokens: 'css' \| 'scss' = 'css';\r\n\r\n render() {\r\n const fileMap = {\r\n css: 'css-variables.css',\r\n scss: 'scss-variables.scss'\r\n };\r\n\r\n const fileName = `infineon-tokens.${this.tokens}`;\r\n const sourceFile = fileMap[this.tokens];\r\n \r\n const fileUrl = `https://raw.githubusercontent.com/Infineon/public-assets/main/ifx-tokens/${sourceFile}`;\r\n\r\n return (\r\n <ifx-link \r\n onClick={(e) => {\r\n e.preventDefault();\r\n fetch(fileUrl)\r\n .then(res => res.blob())\r\n .then(blob => {\r\n const link = document.createElement('a');\r\n link.href = URL.createObjectURL(blob);\r\n link.download = fileName;\r\n link.click();\r\n });\r\n }}\r\n href={fileUrl}\r\n download={fileName} \r\n class=\"download__wrapper\" \r\n size=\"m\" \r\n variant=\"bold\"\r\n >\r\n <slot />\r\n </ifx-link>\r\n );\r\n }\r\n}"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,EAAE;;MCOT,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAM,CAAA,MAAA,GAAmB,KAAK;AAoCvC;IAlCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,GAAG,EAAE,mBAAmB;AACxB,YAAA,IAAI,EAAE;SACP;AAED,QAAA,MAAM,QAAQ,GAAG,CAAA,gBAAA,EAAmB,IAAI,CAAC,MAAM,EAAE;QACjD,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;AAEvC,QAAA,MAAM,OAAO,GAAG,CAA4E,yEAAA,EAAA,UAAU,EAAE;AAExG,QAAA,QACE,CACA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,CAAC,CAAC,KAAI;gBACb,CAAC,CAAC,cAAc,EAAE;gBAClB,KAAK,CAAC,OAAO;qBACV,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE;qBACtB,IAAI,CAAC,IAAI,IAAG;oBACX,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC;oBACxC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC;AACrC,oBAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;oBACxB,IAAI,CAAC,KAAK,EAAE;AACd,iBAAC,CAAC;AACN,aAAC,EACC,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,GAAG,EACR,OAAO,EAAC,MAAM,EAAA,EAEd,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACC;;;;;;;"}

package/dist/esm/ifx-dropdown-header.entry.js CHANGED Viewed

@@ -7,7 +7,7 @@ const DropdownHeader = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: 'fb44be3a97b0d43bdc771a216cdf66dbb6d9fd60', class: 'dropdown-header' }, h("span", { key: 'e5303390c42d9f6d536fe747e3aece317ba4cf18' }, h("slot", { key: 'a513ba5f1960a0c00099103b81449ee1ec30b9c1' }))));
+        return (h("div", { key: 'd58d209bafd95f683e1dc354a1202f04196a8b0a', class: 'dropdown-header' }, h("span", { key: '28cc9c63a12069353c9c1305b45b6dc718bace6d' }, h("slot", { key: '41d2a221685739d726b282153f75c5d3c2ca08ae' }))));
     }
 };
 DropdownHeader.style = dropdownHeaderCss;

package/dist/esm/ifx-dropdown-header.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-dropdown-header.entry.js","sources":["src/components/dropdown/dropdown-header/dropdown-header.scss?tag=ifx-dropdown-header&encapsulation=shadow","src/components/dropdown/dropdown-header/dropdown-header.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-header {\n display: flex;\n padding: 8px 16px;\n align-items: center;\n gap: 8px;\n align-self: stretch;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n & span {\n color: tokens.$ifxColorEngineering500;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n /* 142.857% */\n }\n}","// dropdown-separator.tsx\nimport { Component, h } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-dropdown-header',\n styleUrl: 'dropdown-header.scss',\n shadow: true\n})\n\nexport class DropdownHeader {\n render() {\n return (\n <div class='dropdown-header'>\n <span>\n <slot />\n </span>\n </div>\n )\n }\n}"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,6WAA6W;;MCS1X,cAAc,GAAA,MAAA;;;;IACzB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH,CACH;;;;;;;"}
1	+ {"version":3,"file":"ifx-dropdown-header.entry.js","sources":["src/components/dropdown/dropdown-header/dropdown-header.scss?tag=ifx-dropdown-header&encapsulation=shadow","src/components/dropdown/dropdown-header/dropdown-header.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.dropdown-header {\r\n display: flex;\r\n padding: 8px 16px;\r\n align-items: center;\r\n gap: 8px;\r\n align-self: stretch;\r\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n\r\n & span {\r\n color: tokens.$ifxColorEngineering500;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n /* 142.857% */\r\n }\r\n}","// dropdown-separator.tsx\r\nimport { Component, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'ifx-dropdown-header',\r\n styleUrl: 'dropdown-header.scss',\r\n shadow: true\r\n})\r\n\r\nexport class DropdownHeader {\r\n render() {\r\n return (\r\n <div class='dropdown-header'>\r\n <span>\r\n <slot />\r\n </span>\r\n </div>\r\n )\r\n }\r\n}"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,6WAA6W;;MCS1X,cAAc,GAAA,MAAA;;;;IACzB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH,CACH;;;;;;;"}

package/dist/esm/ifx-dropdown-item.entry.js CHANGED Viewed

@@ -26,7 +26,7 @@ const DropdownItem = class {
         };
         if (!hasHref)
             common.tabIndex = 0;
-        return (h("a", Object.assign({ key: '0fa61b25ba8f7f8dec6828def32fca24c753970b' }, common, (hasHref ? { href: this.href, target: this.target } : {})), this.icon && h("ifx-icon", { key: '7676baff54e17a8ac7a3de6a47fb00e773b80718', class: "icon", icon: this.icon }), h("span", { key: 'a2b3213b15b3e0d0b40c12cf7863158f5233c400' }, h("slot", { key: 'b0c64b7c89c088900c65736450ebb366fcccad3c' }))));
+        return (h("a", Object.assign({ key: '3b6bafaaafc41c5b41b6aeb95b24ca9dfc877fe7' }, common, (hasHref ? { href: this.href, target: this.target } : {})), this.icon && h("ifx-icon", { key: 'ddc2194b498892b02808fbbc86b974870f4ec766', class: "icon", icon: this.icon }), h("span", { key: 'e7dc8f0743ea61387cf1988233d8b1fa1a791f14' }, h("slot", { key: 'c0b7fb1aaeaee44598d66eed133aa99d16f61b82' }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ifx-dropdown-item.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-dropdown-item.entry.js","sources":["src/components/dropdown/dropdown-item/dropdown-item.scss?tag=ifx-dropdown-item&encapsulation=shadow","src/components/dropdown/dropdown-item/dropdown-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-item {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n display: flex;\n align-items: center;\n padding: 8px 16px;\n gap: tokens.$ifxSize100;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n &:focus{\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &.hide {\n display: none;\n }\n\n & span {\n color: tokens.$ifxColorBaseBlack;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n /* 150% */\n }\n\n &.small {\n & span {\n font-size: 14px;\n }\n }\n\n &:hover {\n cursor: pointer;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active {\n background-color: tokens.$ifxColorEngineering300;\n }\n}\n\n.icon {\n margin-right: 4px;\n}","import { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-dropdown-item',\n styleUrl: 'dropdown-item.scss',\n shadow: true\n})\n\nexport class DropdownItem {\n @Prop() icon: string;\n @Prop() href: string = \"\"\n @Prop() target: string = \"_self\"\n @Prop() hide: boolean = false;\n @State() size: string = 'l'\n @Event() ifxDropdownItem: EventEmitter;\n @Element() el;\n\n @Listen('menuSize', { target: 'body' })\n handleMenuSize(event: CustomEvent) {\n this.size = event.detail;\n }\n\n handleEventEmission() {\n this.ifxDropdownItem.emit(this.el.textContent)\n }\n\n render() {\n const hasHref = this.href !== undefined && this.href !== null && this.href !== '';\n const common = {\n class: `dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`,\n onClick: () => this.handleEventEmission(),\n role: 'menuitem'\n } as any;\n\n if (!hasHref) common.tabIndex = 0;\n\n return (\n <a {...common} {...(hasHref ? { href: this.href, target: this.target } : {})}>\n {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n <span><slot /></span>\n </a>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,qlBAAqlB;;MCQhmB,YAAY,GAAA,MAAA;AANzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AACxB,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpB,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;AA8B5B;AAzBC,IAAA,cAAc,CAAC,KAAkB,EAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM;;IAG1B,mBAAmB,GAAA;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC;;IAGhD,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;AACjF,QAAA,MAAM,MAAM,GAAG;YACb,KAAK,EAAE,CAAiB,cAAA,EAAA,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA;AACrF,YAAA,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE;AACzC,YAAA,IAAI,EAAE;SACA;AAER,QAAA,IAAI,CAAC,OAAO;AAAE,YAAA,MAAM,CAAC,QAAQ,GAAG,CAAC;AAEjC,QAAA,QACE,CAAO,CAAA,GAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,MAAM,GAAO,OAAO,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,EAAC,EACzE,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAa,CAAA,EACjE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAM,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAAO,CACnB;;;;;;;;"}
1	+ {"version":3,"file":"ifx-dropdown-item.entry.js","sources":["src/components/dropdown/dropdown-item/dropdown-item.scss?tag=ifx-dropdown-item&encapsulation=shadow","src/components/dropdown/dropdown-item/dropdown-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.dropdown-item {\r\n text-decoration: none;\r\n color: tokens.$ifxColorBaseBlack;\r\n display: flex;\r\n align-items: center;\r\n padding: 8px 16px;\r\n gap: tokens.$ifxSize100;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n &:focus{\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n }\r\n\r\n &.hide {\r\n display: none;\r\n }\r\n\r\n & span {\r\n color: tokens.$ifxColorBaseBlack;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 24px;\r\n /* 150% */\r\n }\r\n\r\n &.small {\r\n & span {\r\n font-size: 14px;\r\n }\r\n }\r\n\r\n &:hover {\r\n cursor: pointer;\r\n background-color: tokens.$ifxColorEngineering200;\r\n }\r\n\r\n &:active {\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n}\r\n\r\n.icon {\r\n margin-right: 4px;\r\n}","import { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'ifx-dropdown-item',\r\n styleUrl: 'dropdown-item.scss',\r\n shadow: true\r\n})\r\n\r\nexport class DropdownItem {\r\n @Prop() icon: string;\r\n @Prop() href: string = \"\"\r\n @Prop() target: string = \"_self\"\r\n @Prop() hide: boolean = false;\r\n @State() size: string = 'l'\r\n @Event() ifxDropdownItem: EventEmitter;\r\n @Element() el;\r\n\r\n @Listen('menuSize', { target: 'body' })\r\n handleMenuSize(event: CustomEvent) {\r\n this.size = event.detail;\r\n }\r\n\r\n handleEventEmission() {\r\n this.ifxDropdownItem.emit(this.el.textContent)\r\n }\r\n\r\n render() {\r\n const hasHref = this.href !== undefined && this.href !== null && this.href !== '';\r\n const common = {\r\n class: `dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`,\r\n onClick: () => this.handleEventEmission(),\r\n role: 'menuitem'\r\n } as any;\r\n\r\n if (!hasHref) common.tabIndex = 0;\r\n\r\n return (\r\n <a {...common} {...(hasHref ? { href: this.href, target: this.target } : {})}>\r\n {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\r\n <span><slot /></span>\r\n </a>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,qlBAAqlB;;MCQhmB,YAAY,GAAA,MAAA;AANzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AACxB,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpB,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;AA8B5B;AAzBC,IAAA,cAAc,CAAC,KAAkB,EAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM;;IAG1B,mBAAmB,GAAA;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC;;IAGhD,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;AACjF,QAAA,MAAM,MAAM,GAAG;YACb,KAAK,EAAE,CAAiB,cAAA,EAAA,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA;AACrF,YAAA,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE;AACzC,YAAA,IAAI,EAAE;SACA;AAER,QAAA,IAAI,CAAC,OAAO;AAAE,YAAA,MAAM,CAAC,QAAQ,GAAG,CAAC;AAEjC,QAAA,QACE,CAAO,CAAA,GAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,MAAM,GAAO,OAAO,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,EAAC,EACzE,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAa,CAAA,EACjE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAM,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAAO,CACnB;;;;;;;;"}

package/dist/esm/ifx-dropdown-menu.entry.js CHANGED Viewed

@@ -48,10 +48,10 @@ const DropdownMenu = class {
             this.hideTopPadding = false;
     }
     render() {
-        return (h("div", { key: 'e4d2067883d6a787f4b8d718af8ff98b3815ee04', class: `dropdown-menu
-      ${this.isOpen ? 'show' : ''}
-      ${this.hideTopPadding ? 'hideTopPadding' : ""}
-      ${this.size === 's' ? 'small' : ""}` }, h("slot", { key: '290c409805d04ea7f96f5c7516d150222867da6b' })));
+        return (h("div", { key: '9aa77a597f7aa89fc7738d32e2a7a4402adff325', class: `dropdown-menu
+      ${this.isOpen ? 'show' : ''}
+      ${this.hideTopPadding ? 'hideTopPadding' : ""}
+      ${this.size === 's' ? 'small' : ""}` }, h("slot", { key: '39c6c53198ef1ffcf0b1e00031f52969e7769572' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ifx-dropdown-menu.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-dropdown-menu.entry.js","sources":["src/components/dropdown/dropdown-menu/dropdown-menu.scss?tag=ifx-dropdown-menu&encapsulation=shadow","src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n position: relative;\n z-index: 1000;\n}\n\n.dropdown-menu {\n display: none;\n visibility: hidden;\n flex-direction: column;\n width: 224px;\n max-height: 289px;\n min-width: 224px;\n overflow-y: auto;\n background: tokens.$ifxColorBaseWhite;\n box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n border: 1px solid tokens.$ifxColorEngineering200;\n padding: 8px 4px;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n &.small {\n max-height: 266px;\n max-width: 186px;\n overflow-y: auto;\n }\n\n &.hideTopPadding {\n padding-top: 0px;\n }\n}\n\n.dropdown-menu.show {\n display: flex;\n visibility: visible;\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-dropdown-menu',\n styleUrl: 'dropdown-menu.scss',\n shadow: true\n})\n\nexport class DropdownMenu {\n @Prop() isOpen: boolean = false;\n @Prop() size: string = 'l'\n @State() hideTopPadding: boolean = false;\n @Element() el;\n\n @Event() menuSize: EventEmitter;\n @State() filteredItems: HTMLIfxDropdownItemElement[] = [];\n @Event() ifxDropdownMenuItem: EventEmitter<CustomEvent>;\n\n @Listen('ifxInput')\n handleMenuFilter(event: CustomEvent) {\n const searchValue = event.detail;\n this.filterDropdownItems(searchValue)\n }\n\n @Listen('ifxDropdownItem')\n handleDropdownItemValueEmission(event: CustomEvent) {\n this.ifxDropdownMenuItem.emit(event.detail)\n }\n\n filterDropdownItems(searchValue: string) {\n const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));\n let dropdownItem, txtValue;\n let query = searchValue.toUpperCase()\n\n for (let i = 0; i < allItems.length; i++) {\n dropdownItem = allItems[i];\n txtValue = dropdownItem.textContent \|\| dropdownItem.innerText;\n\n if (txtValue.toUpperCase().indexOf(query) > -1) {\n dropdownItem.setAttribute('hide', false)\n } else {\n dropdownItem.setAttribute('hide', true)\n }\n }\n }\n\n componentWillUpdate() {\n this.menuSize.emit(this.size)\n }\n\n componentWillLoad() {\n this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item')) as HTMLIfxDropdownItemElement[];\n const searchField = this.el.querySelector('ifx-search-field')\n const dropdownHeader = this.el.querySelector('ifx-dropdown-header')\n\n if (searchField \|\| dropdownHeader) {\n this.hideTopPadding = true;\n } else this.hideTopPadding = false;\n }\n\n\n render() {\n return (\n <div class={`dropdown-menu \n ${this.isOpen ? 'show' : ''} \n ${this.hideTopPadding ? 'hideTopPadding' : \"\"}\n ${this.size === 's' ? 'small' : \"\"}`\n } >\n <slot />\n </div >\n );\n }\n}"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,yeAAye;;MCQpf,YAAY,GAAA,MAAA;AANzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AACvB,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;AACjB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAI/B,QAAA,IAAa,CAAA,aAAA,GAAiC,EAAE;AAyD1D;AArDC,IAAA,gBAAgB,CAAC,KAAkB,EAAA;AACjC,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM;AAChC,QAAA,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC;;AAIvC,IAAA,+BAA+B,CAAC,KAAkB,EAAA;QAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;AAG7C,IAAA,mBAAmB,CAAC,WAAmB,EAAA;AACrC,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;QAC1E,IAAI,YAAY,EAAE,QAAQ;AAC1B,QAAA,IAAI,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE;AAErC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACxC,YAAA,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC;YAC1B,QAAQ,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,SAAS;AAE7D,YAAA,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,EAAE;AAC9C,gBAAA,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC;;iBACnC;AACL,gBAAA,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC;;;;IAK7C,mBAAmB,GAAA;QACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG/B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAiC;QAC9G,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC;QAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC;AAEnE,QAAA,IAAI,WAAW,IAAI,cAAc,EAAE;AACjC,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;;;AACrB,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;;IAIpC,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA;QACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAA;QACzB,IAAI,CAAC,cAAc,GAAG,gBAAgB,GAAG,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAA,EAElC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;"}
1	+ {"version":3,"file":"ifx-dropdown-menu.entry.js","sources":["src/components/dropdown/dropdown-menu/dropdown-menu.scss?tag=ifx-dropdown-menu&encapsulation=shadow","src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n position: relative;\r\n z-index: 1000;\r\n}\r\n\r\n.dropdown-menu {\r\n display: none;\r\n visibility: hidden;\r\n flex-direction: column;\r\n width: 224px;\r\n max-height: 289px;\r\n min-width: 224px;\r\n overflow-y: auto;\r\n background: tokens.$ifxColorBaseWhite;\r\n box-shadow: 0px 6px 9px 0px #1d1d1d1a;\r\n border: 1px solid tokens.$ifxColorEngineering200;\r\n padding: 8px 4px;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n &.small {\r\n max-height: 266px;\r\n max-width: 186px;\r\n overflow-y: auto;\r\n }\r\n\r\n &.hideTopPadding {\r\n padding-top: 0px;\r\n }\r\n}\r\n\r\n.dropdown-menu.show {\r\n display: flex;\r\n visibility: visible;\r\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'ifx-dropdown-menu',\r\n styleUrl: 'dropdown-menu.scss',\r\n shadow: true\r\n})\r\n\r\nexport class DropdownMenu {\r\n @Prop() isOpen: boolean = false;\r\n @Prop() size: string = 'l'\r\n @State() hideTopPadding: boolean = false;\r\n @Element() el;\r\n\r\n @Event() menuSize: EventEmitter;\r\n @State() filteredItems: HTMLIfxDropdownItemElement[] = [];\r\n @Event() ifxDropdownMenuItem: EventEmitter<CustomEvent>;\r\n\r\n @Listen('ifxInput')\r\n handleMenuFilter(event: CustomEvent) {\r\n const searchValue = event.detail;\r\n this.filterDropdownItems(searchValue)\r\n }\r\n\r\n @Listen('ifxDropdownItem')\r\n handleDropdownItemValueEmission(event: CustomEvent) {\r\n this.ifxDropdownMenuItem.emit(event.detail)\r\n }\r\n\r\n filterDropdownItems(searchValue: string) {\r\n const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));\r\n let dropdownItem, txtValue;\r\n let query = searchValue.toUpperCase()\r\n\r\n for (let i = 0; i < allItems.length; i++) {\r\n dropdownItem = allItems[i];\r\n txtValue = dropdownItem.textContent \|\| dropdownItem.innerText;\r\n\r\n if (txtValue.toUpperCase().indexOf(query) > -1) {\r\n dropdownItem.setAttribute('hide', false)\r\n } else {\r\n dropdownItem.setAttribute('hide', true)\r\n }\r\n }\r\n }\r\n\r\n componentWillUpdate() {\r\n this.menuSize.emit(this.size)\r\n }\r\n\r\n componentWillLoad() {\r\n this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item')) as HTMLIfxDropdownItemElement[];\r\n const searchField = this.el.querySelector('ifx-search-field')\r\n const dropdownHeader = this.el.querySelector('ifx-dropdown-header')\r\n\r\n if (searchField \|\| dropdownHeader) {\r\n this.hideTopPadding = true;\r\n } else this.hideTopPadding = false;\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n <div class={`dropdown-menu \r\n ${this.isOpen ? 'show' : ''} \r\n ${this.hideTopPadding ? 'hideTopPadding' : \"\"}\r\n ${this.size === 's' ? 'small' : \"\"}`\r\n } >\r\n <slot />\r\n </div >\r\n );\r\n }\r\n}"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,yeAAye;;MCQpf,YAAY,GAAA,MAAA;AANzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AACvB,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;AACjB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAI/B,QAAA,IAAa,CAAA,aAAA,GAAiC,EAAE;AAyD1D;AArDC,IAAA,gBAAgB,CAAC,KAAkB,EAAA;AACjC,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM;AAChC,QAAA,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC;;AAIvC,IAAA,+BAA+B,CAAC,KAAkB,EAAA;QAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;AAG7C,IAAA,mBAAmB,CAAC,WAAmB,EAAA;AACrC,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;QAC1E,IAAI,YAAY,EAAE,QAAQ;AAC1B,QAAA,IAAI,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE;AAErC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACxC,YAAA,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC;YAC1B,QAAQ,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,SAAS;AAE7D,YAAA,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,EAAE;AAC9C,gBAAA,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC;;iBACnC;AACL,gBAAA,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC;;;;IAK7C,mBAAmB,GAAA;QACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG/B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAiC;QAC9G,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC;QAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC;AAEnE,QAAA,IAAI,WAAW,IAAI,cAAc,EAAE;AACjC,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;;;AACrB,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;;IAIpC,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA;QACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAA;QACzB,IAAI,CAAC,cAAc,GAAG,gBAAgB,GAAG,EAAE,CAAA;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAA,EAElC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;"}

package/dist/esm/ifx-dropdown-separator.entry.js CHANGED Viewed

@@ -7,7 +7,7 @@ const DropdownSeparator = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: 'cd362aec9c480b38bb21eb247c05f24ca2668990', class: 'dropdown-separator' }));
+        return (h("div", { key: '7468448e215e04290ad28644bfc7405ff3e92da6', class: 'dropdown-separator' }));
     }
 };
 DropdownSeparator.style = dropdownSeparatorCss;

package/dist/esm/ifx-dropdown-separator.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-dropdown-separator.entry.js","sources":["src/components/dropdown/dropdown-seperator/dropdown-separator.scss?tag=ifx-dropdown-separator&encapsulation=shadow","src/components/dropdown/dropdown-seperator/dropdown-separator.tsx"],"sourcesContent":["// dropdown-separator.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.dropdown-separator {\n height: 1px;\n background-color: tokens.$ifxColorEngineering200;\n margin: 8px 16px;\n}","// dropdown-separator.tsx\nimport { Component, h } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-dropdown-separator',\n styleUrl: 'dropdown-separator.scss',\n shadow: true\n})\n\nexport class DropdownSeparator {\n render() {\n return (\n <div class='dropdown-separator'></div>\n )\n }\n}"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG,0EAA0E;;MCS1F,iBAAiB,GAAA,MAAA;;;;IAC5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,CAAO;;;;;;;"}
1	+ {"version":3,"file":"ifx-dropdown-separator.entry.js","sources":["src/components/dropdown/dropdown-seperator/dropdown-separator.scss?tag=ifx-dropdown-separator&encapsulation=shadow","src/components/dropdown/dropdown-seperator/dropdown-separator.tsx"],"sourcesContent":["// dropdown-separator.scss\r\n@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n.dropdown-separator {\r\n height: 1px;\r\n background-color: tokens.$ifxColorEngineering200;\r\n margin: 8px 16px;\r\n}","// dropdown-separator.tsx\r\nimport { Component, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'ifx-dropdown-separator',\r\n styleUrl: 'dropdown-separator.scss',\r\n shadow: true\r\n})\r\n\r\nexport class DropdownSeparator {\r\n render() {\r\n return (\r\n <div class='dropdown-separator'></div>\r\n )\r\n }\r\n}"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG,0EAA0E;;MCS1F,iBAAiB,GAAA,MAAA;;;;IAC5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,CAAO;;;;;;;"}

package/dist/esm/ifx-dropdown-trigger-button.entry.js CHANGED Viewed

@@ -11,8 +11,8 @@ const DropdownItem = class {
         this.hideArrow = false;
     }
     render() {
-        return (h("ifx-button", { key: 'cba835345a4dcbec963deb2589bb26a1294908da', variant: this.variant, theme: this.theme, size: this.size, disabled: this.disabled, class: "dropdown-trigger-button" }, h("slot", { key: 'b8f6d30967aaa2ced90815c96081353f9ec0c7d1' }), !this.hideArrow &&
-            h("ifx-icon", { key: '41a60ee566d9be237bbe05e3ede8402f9d4e3f6e', icon: "chevron-down-16", class: `icon${this.isOpen ? ' rotate' : ''}` })));
+        return (h("ifx-button", { key: '8f1566ffba39304744537dea9b0582d7fb5385c7', variant: this.variant, theme: this.theme, size: this.size, disabled: this.disabled, class: "dropdown-trigger-button" }, h("slot", { key: 'cfd9b40e6ce2f74efd15c4e1f6b7106b4dcf4dc9' }), !this.hideArrow &&
+            h("ifx-icon", { key: '29a120aaf9d98f2638c980e74a7635450522334e', icon: "chevron-down-16", class: `icon${this.isOpen ? ' rotate' : ''}` })));
     }
 };
 DropdownItem.style = dropdownTriggerButtonCss;

package/dist/esm/ifx-dropdown-trigger-button.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-dropdown-trigger-button.entry.js","sources":["src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.scss?tag=ifx-dropdown-trigger-button&encapsulation=shadow","src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n}\n\n.rotate {\n transition: transform 0.2s ease-in-out;\n transform: rotate(-180deg);\n margin-top: 0em;\n}\n\n.icon {\n margin-top: 0em;\n transition: transform 0.2s ease-in-out;\n}\n","// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n tag: 'ifx-dropdown-trigger-button',\n styleUrl: 'dropdown-trigger-button.scss',\n shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n @Prop() isOpen: boolean = false;\n\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\n @Prop() variant: 'primary';\n @Prop() size: 's' \| 'm' = 'm';\n @Prop() disabled: boolean;\n @Prop() hideArrow: boolean = false;\n\n render() {\n return (\n <ifx-button\n variant={this.variant}\n theme={this.theme}\n size={this.size}\n disabled={this.disabled}\n class=\"dropdown-trigger-button\"\n >\n <slot />\n {!this.hideArrow &&\n <ifx-icon icon=\"chevron-down-16\" class={`icon${this.isOpen ? ' rotate' : ''}`} />\n }\n </ifx-button>\n )\n }\n}"],"names":[],"mappings":";;AAAA,MAAM,wBAAwB,GAAG,+KAA+K;;MCUnM,YAAY,GAAA,MAAA;AANzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEvB,QAAA,IAAK,CAAA,KAAA,GAAqC,SAAS;AAEnD,QAAA,IAAI,CAAA,IAAA,GAAc,GAAG;AAErB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAkBnC;IAhBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,yBAAyB,EAAA,EAE/B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,CAAC,IAAI,CAAC,SAAS;AACd,YAAA,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,EAAE,CAAE,CAAA,EAAA,CAAI,CAExE;;;;;;;"}
1	+ {"version":3,"file":"ifx-dropdown-trigger-button.entry.js","sources":["src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.scss?tag=ifx-dropdown-trigger-button&encapsulation=shadow","src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n display: inline-block;\r\n}\r\n\r\n.rotate {\r\n transition: transform 0.2s ease-in-out;\r\n transform: rotate(-180deg);\r\n margin-top: 0em;\r\n}\r\n\r\n.icon {\r\n margin-top: 0em;\r\n transition: transform 0.2s ease-in-out;\r\n}\r\n","// dropdown-trigger-button.tsx\r\nimport { Component, Prop, h } from \"@stencil/core\";\r\nimport { IOpenable } from '../IOpenable';\r\n\r\n@Component({\r\n tag: 'ifx-dropdown-trigger-button',\r\n styleUrl: 'dropdown-trigger-button.scss',\r\n shadow: true\r\n})\r\n\r\nexport class DropdownItem implements IOpenable {\r\n @Prop() isOpen: boolean = false;\r\n\r\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\r\n @Prop() variant: 'primary';\r\n @Prop() size: 's' \| 'm' = 'm';\r\n @Prop() disabled: boolean;\r\n @Prop() hideArrow: boolean = false;\r\n\r\n render() {\r\n return (\r\n <ifx-button\r\n variant={this.variant}\r\n theme={this.theme}\r\n size={this.size}\r\n disabled={this.disabled}\r\n class=\"dropdown-trigger-button\"\r\n >\r\n <slot />\r\n {!this.hideArrow &&\r\n <ifx-icon icon=\"chevron-down-16\" class={`icon${this.isOpen ? ' rotate' : ''}`} />\r\n }\r\n </ifx-button>\r\n )\r\n }\r\n}"],"names":[],"mappings":";;AAAA,MAAM,wBAAwB,GAAG,+KAA+K;;MCUnM,YAAY,GAAA,MAAA;AANzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEvB,QAAA,IAAK,CAAA,KAAA,GAAqC,SAAS;AAEnD,QAAA,IAAI,CAAA,IAAA,GAAc,GAAG;AAErB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAkBnC;IAhBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,yBAAyB,EAAA,EAE/B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,CAAC,IAAI,CAAC,SAAS;AACd,YAAA,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,EAAE,CAAE,CAAA,EAAA,CAAI,CAExE;;;;;;;"}

package/dist/esm/ifx-dropdown-trigger.entry.js CHANGED Viewed

@@ -8,7 +8,7 @@ const DropdownItem = class {
         this.isOpen = false;
     }
     render() {
-        return (h("slot", { key: '39ffc845865675f32133ee990db668ed0e6264dd' }));
+        return (h("slot", { key: '54fbd683065299b0e714e6f91c4e0333d92e28e5' }));
     }
 };
 DropdownItem.style = dropdownTriggerCss;

package/dist/esm/ifx-dropdown-trigger.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-dropdown-trigger.entry.js","sources":["src/components/dropdown/dropdown-trigger/dropdown-trigger.scss?tag=ifx-dropdown-trigger&encapsulation=shadow","src/components/dropdown/dropdown-trigger/dropdown-trigger.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n cursor: pointer;\n}","// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n tag: 'ifx-dropdown-trigger',\n styleUrl: 'dropdown-trigger.scss',\n shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n @Prop() isOpen: boolean = false;\n\n render() {\n return (\n <slot />\n )\n }\n}"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,4CAA4C;;MCU1D,YAAY,GAAA,MAAA;AANzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAOhC;IALC,MAAM,GAAA;AACJ,QAAA,QACE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA;;;;;;;"}
1	+ {"version":3,"file":"ifx-dropdown-trigger.entry.js","sources":["src/components/dropdown/dropdown-trigger/dropdown-trigger.scss?tag=ifx-dropdown-trigger&encapsulation=shadow","src/components/dropdown/dropdown-trigger/dropdown-trigger.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n display: inline-block;\r\n cursor: pointer;\r\n}","// dropdown-trigger-button.tsx\r\nimport { Component, Prop, h } from \"@stencil/core\";\r\nimport { IOpenable } from '../IOpenable';\r\n\r\n@Component({\r\n tag: 'ifx-dropdown-trigger',\r\n styleUrl: 'dropdown-trigger.scss',\r\n shadow: true\r\n})\r\n\r\nexport class DropdownItem implements IOpenable {\r\n @Prop() isOpen: boolean = false;\r\n\r\n render() {\r\n return (\r\n <slot />\r\n )\r\n }\r\n}"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,4CAA4C;;MCU1D,YAAY,GAAA,MAAA;AANzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAOhC;IALC,MAAM,GAAA;AACJ,QAAA,QACE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA;;;;;;;"}

package/dist/esm/ifx-dropdown.entry.js CHANGED Viewed

@@ -209,7 +209,7 @@ const Dropdown = class {
         }
     }
     render() {
-        return (h("div", { key: '98fae8a111b3e91b8a4f2690e0dd462d1c6c4791', "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", { key: 'f491cae9545a2d18342efa9f2fb29412d580f643' })));
+        return (h("div", { key: '78b68c1c7dddb7c41b39c6be63acd951c0c888ad', "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", { key: '2605abfa59787f7c135c762ac651c1ccc30fb59b' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ifx-dropdown.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-dropdown.entry.js","sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n}","import { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport { createPopper } from '@popperjs/core';\n \n\nimport { IOpenable } from './IOpenable';\n\nexport type Placement =\n \| 'auto'\n \| 'auto-start'\n \| 'auto-end'\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end';\n\n@Component({\n tag: 'ifx-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true\n})\n\nexport class Dropdown {\n @Prop() placement: Placement = 'bottom-start';\n @Prop() defaultOpen: boolean = false;\n @State() internalIsOpen: boolean = false;\n @Prop() noAppendToBody: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n @Event() ifxDropdown: EventEmitter;\n @Prop() disabled: boolean;\n @Prop() noCloseOnOutsideClick: boolean = false;\n @Prop() noCloseOnMenuClick: boolean = false;\n @Element() el;\n @State() trigger: HTMLElement;\n @State() menu: HTMLElement\n // Popper instance for positioning\n popperInstance: any;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n this.closeDropdown();\n }\n }\n\n @Listen('focusin', { target: 'document' })\n handleFocusOutside(event: FocusEvent) {\n const target = event.target as HTMLElement;\n if (\n this.internalIsOpen &&\n !this.el.contains(target) &&\n !this.menu.contains(target)\n ) {\n this.closeDropdown();\n }\n }\n\n private handleTriggerClick = () => {\n if (!this.internalIsOpen) this.openDropdown();\n else this.closeDropdown();\n };\n\n private handleTriggerKeyDown = (e: KeyboardEvent) => {\n const key = e.key;\n if (key === 'Tab' && this.internalIsOpen && !e.shiftKey) {\n e.preventDefault();\n this.focusFirstItem();\n }\n };\n\n private handleMenuClick = () => {\n if (!this.noCloseOnMenuClick) this.closeDropdown();\n};\n\n\nprivate getItemFocusables(): HTMLElement[] {\n if (!this.menu) return [];\n const hosts = Array.from(this.menu.querySelectorAll('ifx-dropdown-item')) as HTMLElement[];\n return hosts\n .filter(h => !(h.getAttribute('hide') === 'true' \|\| h.classList.contains('hide')))\n .map(h => h.shadowRoot?.querySelector('a') as HTMLElement \| null)\n .filter((el): el is HTMLElement => !!el);\n}\n\nprivate handleMenuKeyDown = (e: KeyboardEvent) => {\n const items = this.getItemFocusables();\n if (!items.length) return;\n\n const i = items.indexOf(document.activeElement as HTMLElement);\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n items[(i + 1) % items.length].focus();\n break;\n case 'ArrowUp':\n e.preventDefault();\n items[(i - 1 + items.length) % items.length].focus();\n break;\n case 'Home':\n e.preventDefault();\n items[0].focus();\n break;\n case 'End':\n e.preventDefault();\n items[items.length - 1].focus();\n break;\n case 'Enter':\n case ' ':\n case 'Spacebar':\n e.preventDefault();\n (document.activeElement as HTMLElement)?.click();\n break;\n case 'Escape':\n e.preventDefault();\n this.closeDropdown();\n (this.trigger as HTMLElement)?.focus();\n break;\n case 'Tab':\n if (e.shiftKey && i === 0) {\n e.preventDefault();\n this.closeDropdown();\n (this.trigger as HTMLElement)?.focus();\n }\n break;\n }\n};\n\n componentWillLoad() {\n //maybe not needed\n this.updateSlotContent();\n this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-dropdown', await framework)\n }\n }\n\n @Watch('defaultOpen')\n watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue && newValue !== this.internalIsOpen) {\n if (newValue) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n }\n\n @Watch('disabled')\n watchHandlerDisabled(newValue: boolean) {\n if (this.trigger) {\n (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\n }\n }\n\n @Listen('slotchange')\n watchHandlerSlot() {\n this.updateSlotContent();\n }\n\nprivate focusFirstItem() {\n const [first] = this.getItemFocusables();\n first?.focus();\n}\n\n\n updateSlotContent() {\n const newTrigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger') as HTMLElement \| null;\n\n if (newTrigger !== this.trigger) {\n if (this.trigger) {\n this.trigger.removeEventListener('click', this.handleTriggerClick);\n this.trigger.removeEventListener('keydown', this.handleTriggerKeyDown);\n }\n this.trigger = newTrigger!;\n if (this.trigger) {\n (this.trigger as any).disabled = this.disabled;\n this.trigger.addEventListener('click', this.handleTriggerClick);\n this.trigger.addEventListener('keydown', this.handleTriggerKeyDown);\n }\n }\n\n const newMenu = this.el.querySelector('ifx-dropdown-menu') as HTMLElement \| null;\n\n if (!this.noAppendToBody) {\n if (this.menu && this.menu !== newMenu) {\n this.menu.removeEventListener('click', this.handleMenuClick);\n this.menu.removeEventListener('keydown', this.handleMenuKeyDown);\n this.menu.remove();\n }\n this.menu = newMenu!;\n if (this.menu && !document.body.contains(this.menu)) {\n document.body.append(this.menu);\n }\n } else {\n this.menu = newMenu!;\n }\n\n if (this.menu) {\n this.menu.removeEventListener('click', this.handleMenuClick);\n this.menu.removeEventListener('keydown', this.handleMenuKeyDown);\n this.menu.addEventListener('click', this.handleMenuClick);\n this.menu.addEventListener('keydown', this.handleMenuKeyDown);\n }\n }\n\n menuClickHandler() {\n if (!this.noCloseOnMenuClick) {\n this.closeDropdown();\n }\n }\n\n disconnectedCallback() {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n\n if (this.menu) {\n this.menu.remove();\n }\n }\n\n @Method()\n async isOpen() {\n return this.internalIsOpen;\n }\n\n @Method()\n async closeDropdown() {\n if (this.internalIsOpen) {\n this.internalIsOpen = false;\n \n (this.trigger as unknown as IOpenable).isOpen = false;\n (this.menu as unknown as IOpenable).isOpen = false;\n \n this.ifxClose.emit();\n }\n \n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n @Method()\n async openDropdown() {\n if (!this.internalIsOpen && !this.disabled) {\n this.internalIsOpen = true;\n (this.trigger as any).isOpen = true;\n (this.menu as any).isOpen = true;\n this.popperInstance = createPopper(this.el, this.menu, { placement: this.placement });\n this.ifxOpen.emit();\n }\n }\n\n render() {\n return (\n <div aria-label='dropdown menu' class='dropdown'>\n <slot />\n </div>\n )\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ifx-dropdown.entry.js","sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n display: inline-block;\r\n}","import { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport { createPopper } from '@popperjs/core';\r\n \r\n\r\nimport { IOpenable } from './IOpenable';\r\n\r\nexport type Placement =\r\n \| 'auto'\r\n \| 'auto-start'\r\n \| 'auto-end'\r\n \| 'top'\r\n \| 'top-start'\r\n \| 'top-end'\r\n \| 'bottom'\r\n \| 'bottom-start'\r\n \| 'bottom-end'\r\n \| 'right'\r\n \| 'right-start'\r\n \| 'right-end'\r\n \| 'left'\r\n \| 'left-start'\r\n \| 'left-end';\r\n\r\n@Component({\r\n tag: 'ifx-dropdown',\r\n styleUrl: 'dropdown.scss',\r\n shadow: true\r\n})\r\n\r\nexport class Dropdown {\r\n @Prop() placement: Placement = 'bottom-start';\r\n @Prop() defaultOpen: boolean = false;\r\n @State() internalIsOpen: boolean = false;\r\n @Prop() noAppendToBody: boolean = false;\r\n @Event() ifxOpen: EventEmitter;\r\n @Event() ifxClose: EventEmitter;\r\n @Event() ifxDropdown: EventEmitter;\r\n @Prop() disabled: boolean;\r\n @Prop() noCloseOnOutsideClick: boolean = false;\r\n @Prop() noCloseOnMenuClick: boolean = false;\r\n @Element() el;\r\n @State() trigger: HTMLElement;\r\n @State() menu: HTMLElement\r\n // Popper instance for positioning\r\n popperInstance: any;\r\n\r\n @Listen('mousedown', { target: 'document' })\r\n handleOutsideClick(event: MouseEvent) {\r\n const target = event.target as HTMLElement;\r\n\r\n if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\r\n this.closeDropdown();\r\n }\r\n }\r\n\r\n @Listen('focusin', { target: 'document' })\r\n handleFocusOutside(event: FocusEvent) {\r\n const target = event.target as HTMLElement;\r\n if (\r\n this.internalIsOpen &&\r\n !this.el.contains(target) &&\r\n !this.menu.contains(target)\r\n ) {\r\n this.closeDropdown();\r\n }\r\n }\r\n\r\n private handleTriggerClick = () => {\r\n if (!this.internalIsOpen) this.openDropdown();\r\n else this.closeDropdown();\r\n };\r\n\r\n private handleTriggerKeyDown = (e: KeyboardEvent) => {\r\n const key = e.key;\r\n if (key === 'Tab' && this.internalIsOpen && !e.shiftKey) {\r\n e.preventDefault();\r\n this.focusFirstItem();\r\n }\r\n };\r\n\r\n private handleMenuClick = () => {\r\n if (!this.noCloseOnMenuClick) this.closeDropdown();\r\n};\r\n\r\n\r\nprivate getItemFocusables(): HTMLElement[] {\r\n if (!this.menu) return [];\r\n const hosts = Array.from(this.menu.querySelectorAll('ifx-dropdown-item')) as HTMLElement[];\r\n return hosts\r\n .filter(h => !(h.getAttribute('hide') === 'true' \|\| h.classList.contains('hide')))\r\n .map(h => h.shadowRoot?.querySelector('a') as HTMLElement \| null)\r\n .filter((el): el is HTMLElement => !!el);\r\n}\r\n\r\nprivate handleMenuKeyDown = (e: KeyboardEvent) => {\r\n const items = this.getItemFocusables();\r\n if (!items.length) return;\r\n\r\n const i = items.indexOf(document.activeElement as HTMLElement);\r\n\r\n switch (e.key) {\r\n case 'ArrowDown':\r\n e.preventDefault();\r\n items[(i + 1) % items.length].focus();\r\n break;\r\n case 'ArrowUp':\r\n e.preventDefault();\r\n items[(i - 1 + items.length) % items.length].focus();\r\n break;\r\n case 'Home':\r\n e.preventDefault();\r\n items[0].focus();\r\n break;\r\n case 'End':\r\n e.preventDefault();\r\n items[items.length - 1].focus();\r\n break;\r\n case 'Enter':\r\n case ' ':\r\n case 'Spacebar':\r\n e.preventDefault();\r\n (document.activeElement as HTMLElement)?.click();\r\n break;\r\n case 'Escape':\r\n e.preventDefault();\r\n this.closeDropdown();\r\n (this.trigger as HTMLElement)?.focus();\r\n break;\r\n case 'Tab':\r\n if (e.shiftKey && i === 0) {\r\n e.preventDefault();\r\n this.closeDropdown();\r\n (this.trigger as HTMLElement)?.focus();\r\n }\r\n break;\r\n }\r\n};\r\n\r\n componentWillLoad() {\r\n //maybe not needed\r\n this.updateSlotContent();\r\n this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-dropdown', await framework)\r\n }\r\n }\r\n\r\n @Watch('defaultOpen')\r\n watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\r\n if (newValue !== oldValue && newValue !== this.internalIsOpen) {\r\n if (newValue) {\r\n this.openDropdown();\r\n } else {\r\n this.closeDropdown();\r\n }\r\n }\r\n }\r\n\r\n @Watch('disabled')\r\n watchHandlerDisabled(newValue: boolean) {\r\n if (this.trigger) {\r\n (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\r\n }\r\n }\r\n\r\n @Listen('slotchange')\r\n watchHandlerSlot() {\r\n this.updateSlotContent();\r\n }\r\n\r\nprivate focusFirstItem() {\r\n const [first] = this.getItemFocusables();\r\n first?.focus();\r\n}\r\n\r\n\r\n updateSlotContent() {\r\n const newTrigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger') as HTMLElement \| null;\r\n\r\n if (newTrigger !== this.trigger) {\r\n if (this.trigger) {\r\n this.trigger.removeEventListener('click', this.handleTriggerClick);\r\n this.trigger.removeEventListener('keydown', this.handleTriggerKeyDown);\r\n }\r\n this.trigger = newTrigger!;\r\n if (this.trigger) {\r\n (this.trigger as any).disabled = this.disabled;\r\n this.trigger.addEventListener('click', this.handleTriggerClick);\r\n this.trigger.addEventListener('keydown', this.handleTriggerKeyDown);\r\n }\r\n }\r\n\r\n const newMenu = this.el.querySelector('ifx-dropdown-menu') as HTMLElement \| null;\r\n\r\n if (!this.noAppendToBody) {\r\n if (this.menu && this.menu !== newMenu) {\r\n this.menu.removeEventListener('click', this.handleMenuClick);\r\n this.menu.removeEventListener('keydown', this.handleMenuKeyDown);\r\n this.menu.remove();\r\n }\r\n this.menu = newMenu!;\r\n if (this.menu && !document.body.contains(this.menu)) {\r\n document.body.append(this.menu);\r\n }\r\n } else {\r\n this.menu = newMenu!;\r\n }\r\n\r\n if (this.menu) {\r\n this.menu.removeEventListener('click', this.handleMenuClick);\r\n this.menu.removeEventListener('keydown', this.handleMenuKeyDown);\r\n this.menu.addEventListener('click', this.handleMenuClick);\r\n this.menu.addEventListener('keydown', this.handleMenuKeyDown);\r\n }\r\n }\r\n\r\n menuClickHandler() {\r\n if (!this.noCloseOnMenuClick) {\r\n this.closeDropdown();\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n if (this.popperInstance) {\r\n this.popperInstance.destroy();\r\n this.popperInstance = null;\r\n }\r\n\r\n if (this.menu) {\r\n this.menu.remove();\r\n }\r\n }\r\n\r\n @Method()\r\n async isOpen() {\r\n return this.internalIsOpen;\r\n }\r\n\r\n @Method()\r\n async closeDropdown() {\r\n if (this.internalIsOpen) {\r\n this.internalIsOpen = false;\r\n \r\n (this.trigger as unknown as IOpenable).isOpen = false;\r\n (this.menu as unknown as IOpenable).isOpen = false;\r\n \r\n this.ifxClose.emit();\r\n }\r\n \r\n if (this.popperInstance) {\r\n this.popperInstance.destroy();\r\n this.popperInstance = null;\r\n }\r\n }\r\n\r\n @Method()\r\n async openDropdown() {\r\n if (!this.internalIsOpen && !this.disabled) {\r\n this.internalIsOpen = true;\r\n (this.trigger as any).isOpen = true;\r\n (this.menu as any).isOpen = true;\r\n this.popperInstance = createPopper(this.el, this.menu, { placement: this.placement });\r\n this.ifxOpen.emit();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div aria-label='dropdown menu' class='dropdown'>\r\n <slot />\r\n </div>\r\n )\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/ifx-faq.entry.js CHANGED Viewed

@@ -7,7 +7,7 @@ const Faq = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: 'adeafa17925f9102d39715eab6909d46770960d4', class: 'container' }, h("ifx-accordion", { key: '84efcea4b3a9b58049fe21d325306cba1f433396' }, h("ifx-accordion-item", { key: 'fd1d00d722e76a84a0d8175aea9135f1fda63bee', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: '274463b3f960e8e0e588fd312f6295461ed0a3a3', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: 'd3baafb7c0dd648fdb03f53f8a962122c373cc13', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: '989bd8527ebe9935475c0bdda083869a1853e1bc', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: 'bcc207308c52cdbbc3f36c5024834276de5207fd', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+        return (h("div", { key: '750ba5457073ee26c2a0ec5e0ffea950569bd5ef', class: 'container' }, h("ifx-accordion", { key: 'f02cfd45ebad962c7f852395c777d67fd9378d46' }, h("ifx-accordion-item", { key: '296d3f7bd6bbc528a0b1a7a7f23ae0556ab2dd8f', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: 'a1418c2859c7a0406beea37f280e6805c44edcc7', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: 'd0387e97694ea01953d8411882d44a64ca01bfbc', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: '09516365adaa86dcf74018f6eee9e71481da5822', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: '4da90ebc551c090670bf0bac1a89fb0ef8c584db', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
     }
 };
 Faq.style = faqCss;

package/dist/esm/ifx-faq.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-faq.entry.js","sources":["src/stories/setup-and-installation/faq/faq.scss?tag=ifx-faq&encapsulation=shadow","src/stories/setup-and-installation/faq/faq.tsx"],"sourcesContent":[".container { \n padding-top: 10px;\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'ifx-faq',\n styleUrl: './faq.scss',\n shadow: true,\n})\nexport class Faq {\n\n render() {\n return (\n <div class='container'>\n <ifx-accordion>\n <ifx-accordion-item caption=\"What is the Infineon DDS?\">\n The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application’s structure should be.\n </ifx-accordion-item>\n <ifx-accordion-item caption=\"How do I get access to the DDS?\">\n You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github.\n </ifx-accordion-item>\n <ifx-accordion-item caption=\"Can I integrate the Infineon DDS into my project?\">\n Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)\n </ifx-accordion-item>\n <ifx-accordion-item caption=\"Are Infineon DDS components accessable?\">\n We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here.\n </ifx-accordion-item>\n <ifx-accordion-item caption=\"How to request a new component?\">\n Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you.\n </ifx-accordion-item>\n </ifx-accordion>\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,MAAM,GAAG,8BAA8B;;MCOhC,GAAG,GAAA,MAAA;;;;IAEd,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACtB,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,2BAA2B,EAElC,EAAA,qdAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,iCAAiC,EAExC,EAAA,+MAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,mDAAmD,EAE1D,EAAA,6UAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,yCAAyC,EAEhD,EAAA,2TAAA,CAAA,EACrB,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,OAAO,EAAC,iCAAiC,0PAExC,CACP,CACV;;;;;;;"}
1	+ {"version":3,"file":"ifx-faq.entry.js","sources":["src/stories/setup-and-installation/faq/faq.scss?tag=ifx-faq&encapsulation=shadow","src/stories/setup-and-installation/faq/faq.tsx"],"sourcesContent":[".container { \r\n padding-top: 10px;\r\n}","import { Component, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-faq',\r\n styleUrl: './faq.scss',\r\n shadow: true,\r\n})\r\nexport class Faq {\r\n\r\n render() {\r\n return (\r\n <div class='container'>\r\n <ifx-accordion>\r\n <ifx-accordion-item caption=\"What is the Infineon DDS?\">\r\n The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application’s structure should be.\r\n </ifx-accordion-item>\r\n <ifx-accordion-item caption=\"How do I get access to the DDS?\">\r\n You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github.\r\n </ifx-accordion-item>\r\n <ifx-accordion-item caption=\"Can I integrate the Infineon DDS into my project?\">\r\n Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)\r\n </ifx-accordion-item>\r\n <ifx-accordion-item caption=\"Are Infineon DDS components accessable?\">\r\n We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here.\r\n </ifx-accordion-item>\r\n <ifx-accordion-item caption=\"How to request a new component?\">\r\n Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you.\r\n </ifx-accordion-item>\r\n </ifx-accordion>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,MAAM,GAAG,8BAA8B;;MCOhC,GAAG,GAAA,MAAA;;;;IAEd,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACtB,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,2BAA2B,EAElC,EAAA,qdAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,iCAAiC,EAExC,EAAA,+MAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,mDAAmD,EAE1D,EAAA,6UAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,yCAAyC,EAEhD,EAAA,2TAAA,CAAA,EACrB,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,OAAO,EAAC,iCAAiC,0PAExC,CACP,CACV;;;;;;;"}

package/dist/esm/ifx-file-upload.entry.js CHANGED Viewed

@@ -638,10 +638,10 @@ const FileUpload = class {
         this.validateRequired();
     }
     render() {
-        return (h("div", { key: 'ef6b20aec846cdb005bbf42292a6d38a6ed1a503', class: {
+        return (h("div", { key: '1f124f8353f9792779c45c93c69ada515a98e5da', class: {
                 'file-upload-wrapper': true,
                 'disabled': this.disabled,
-            } }, this.label && (h("label", { key: '91b547b30348f765a3542c88c50790d84affaa8a', class: "file-upload-label", htmlFor: this.internalId }, this.label, this.required && h("span", { key: 'bef4e9628b629bacfc729a962b37a009185eb374', class: `required ${this.requiredError ? 'error' : ''}` }, "*"))), this.dragAndDrop ? this.renderDragAndDropArea() : this.renderUploadArea(), (this.files.length > 0 || this.rejectedSizeFiles.length > 0 || this.rejectedTypeFiles.length > 0) && (h("div", { key: '0bbe459c523c0a9077f23c458fb59e03b5ae0134', class: "file-list-wrapper" }, h("div", { key: 'e01f3966e8a3d5697da4d57ea7eb711d026177b9', class: "upload-heading" }, this.labelUploadedFilesHeading), h("ul", { key: '7c3c8ce0f8a4ebdac12c843b120482140adf93c2', class: "file-list" }, this.rejectedSizeFiles.map(fileName => (h("li", { class: "file-item upload-failed", key: `rejected-size-${fileName}` }, h("div", { class: "file-icon" }, h("ifx-icon", { icon: "file-16" })), h("div", { class: "file-info" }, h("div", { class: "file-top-row" }, h("span", { class: "file-name-wrapper" }, h("span", { class: "file-name-base" }, this.splitFileNameParts({ name: fileName }).base), h("span", { class: "file-name-ext" }, this.splitFileNameParts({ name: fileName }).ext)), h("div", { class: "file-actions" }, h("ifx-icon-button", { shape: "square", variant: "tertiary", icon: "delete-forever-16", size: "s", "aria-label": this.ariaLabelRemoveFile, onClick: () => this.clearRejectedFile(fileName, 'size') }))), h("div", { class: "file-middle-row" }, h("span", { class: "file-status", "aria-label": this.labelFileTooLarge.replace('{{size}}', this.maxFileSizeMB.toString()) }, this.getFormattedFileTooLargeText())))))), this.rejectedTypeFiles.map(fileName => (h("li", { class: "file-item upload-failed", key: `rejected-type-${fileName}` }, h("div", { class: "file-icon" }, h("ifx-icon", { icon: "file-16" })), h("div", { class: "file-info" }, h("div", { class: "file-top-row" }, h("span", { class: "file-name-wrapper" }, h("span", { class: "file-name-base" }, this.splitFileNameParts({ name: fileName }).base), h("span", { class: "file-name-ext" }, this.splitFileNameParts({ name: fileName }).ext)), h("div", { class: "file-actions" }, h("ifx-icon-button", { shape: "square", variant: "tertiary", icon: "delete-forever-16", size: "s", "aria-label": this.ariaLabelRemoveFile, onClick: () => this.clearRejectedFile(fileName, 'type') }))), h("div", { class: "file-middle-row" }, h("span", { class: "file-status", "aria-label": this.labelUnsupportedFileType }, this.labelUnsupportedFileType)))))), this.files.map(file => {
+            } }, this.label && (h("label", { key: '978f9239732d695dd2423808c7f693425f57234f', class: "file-upload-label", htmlFor: this.internalId }, this.label, this.required && h("span", { key: '244a6645265dcfceba6b4a4a6ccc99b2c91725f9', class: `required ${this.requiredError ? 'error' : ''}` }, "*"))), this.dragAndDrop ? this.renderDragAndDropArea() : this.renderUploadArea(), (this.files.length > 0 || this.rejectedSizeFiles.length > 0 || this.rejectedTypeFiles.length > 0) && (h("div", { key: '2f2f116d633310829185149787ad207027b79141', class: "file-list-wrapper" }, h("div", { key: '9d572976ac747a7a6a50be2d8d097a2e896c55fb', class: "upload-heading" }, this.labelUploadedFilesHeading), h("ul", { key: '223220ed67180059f08025543d7d46ff76b84308', class: "file-list" }, this.rejectedSizeFiles.map(fileName => (h("li", { class: "file-item upload-failed", key: `rejected-size-${fileName}` }, h("div", { class: "file-icon" }, h("ifx-icon", { icon: "file-16" })), h("div", { class: "file-info" }, h("div", { class: "file-top-row" }, h("span", { class: "file-name-wrapper" }, h("span", { class: "file-name-base" }, this.splitFileNameParts({ name: fileName }).base), h("span", { class: "file-name-ext" }, this.splitFileNameParts({ name: fileName }).ext)), h("div", { class: "file-actions" }, h("ifx-icon-button", { shape: "square", variant: "tertiary", icon: "delete-forever-16", size: "s", "aria-label": this.ariaLabelRemoveFile, onClick: () => this.clearRejectedFile(fileName, 'size') }))), h("div", { class: "file-middle-row" }, h("span", { class: "file-status", "aria-label": this.labelFileTooLarge.replace('{{size}}', this.maxFileSizeMB.toString()) }, this.getFormattedFileTooLargeText())))))), this.rejectedTypeFiles.map(fileName => (h("li", { class: "file-item upload-failed", key: `rejected-type-${fileName}` }, h("div", { class: "file-icon" }, h("ifx-icon", { icon: "file-16" })), h("div", { class: "file-info" }, h("div", { class: "file-top-row" }, h("span", { class: "file-name-wrapper" }, h("span", { class: "file-name-base" }, this.splitFileNameParts({ name: fileName }).base), h("span", { class: "file-name-ext" }, this.splitFileNameParts({ name: fileName }).ext)), h("div", { class: "file-actions" }, h("ifx-icon-button", { shape: "square", variant: "tertiary", icon: "delete-forever-16", size: "s", "aria-label": this.ariaLabelRemoveFile, onClick: () => this.clearRejectedFile(fileName, 'type') }))), h("div", { class: "file-middle-row" }, h("span", { class: "file-status", "aria-label": this.labelUnsupportedFileType }, this.labelUnsupportedFileType)))))), this.files.map(file => {
             var _a;
             const task = this.uploadTasks.find(t => t.file.name === file.name);
             const progress = (_a = task === null || task === void 0 ? void 0 : task.progress) !== null && _a !== void 0 ? _a : 100;