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

@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b577eb08ea34aa81e7d1054220d0f31ca92579a9.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/components/ifx-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-card.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.card {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n word-wrap: break-word;\n background-color: tokens.$ifxColorBaseWhite;\n background-clip: border-box;\n border: 2px solid tokens.$ifxColorEngineering200;\n border-radius: 2px;\n //width: 22rem;\n width: 350px;\n height: auto;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n // when the link is focused or hovered, the border color changes\n &:has(.card-href:focus), &:has(.card-href:hover) {\n outline: none;\n border-color: tokens.$ifxColorOcean500;\n\n ::slotted(ifx-card-headline) {\n color: tokens.$ifxColorOcean500;\n }\n }\n\n &.noBtns {\n & .vertical {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n\n & .horizontal {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n }\n\n & .horizontal {\n display: flex;\n flex-direction: row;\n min-height: 218px;\n\n & .card-img {\n flex: 1;\n text-decoration: none;\n\n &.noImage {\n display: none;\n }\n\n & ::slotted([slot=img]) {\n width: 100%;\n vertical-align: bottom;\n }\n }\n\n & .lower__body-wrapper {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n\n & .upper-body {\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n padding: 24px 24px 0px 24px;\n }\n }\n }\n\n & .vertical {\n & .upper__body-wrapper {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n & .card-img {\n height: 190px;\n\n &.noImage {\n display: none;\n }\n }\n\n & .upper-body {\n padding: 24px 24px 0px 24px;\n }\n }\n\n & .lower__body-wrapper {\n &:hover {\n border-color: tokens.$ifxColorEngineering200;\n }\n }\n }\n\n &.horizontal {\n flex-direction: row;\n width: 538px;\n\n & .card-img {\n flex: 1;\n order: 2;\n\n & ::slotted([slot=img]) {\n width: 100%;\n height: 100%;\n vertical-align: bottom;\n object-fit: cover;\n }\n }\n\n &.left {\n & .horizontal {\n & .card-img {\n order: 1;\n }\n\n & .lower__body-wrapper {\n order: 2;\n }\n }\n }\n }\n\n & .card-href:focus {\n outline: none;\n }\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\n\nexport class Card {\n @Element() el;\n @State() noBtns: boolean;\n @Prop() direction: 'horizontal' \| 'vertical' = 'vertical';\n @State() alignment: string;\n @State() noImg: boolean;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @Prop() ariaLabel: string \| null;\n\n @Listen('imgPosition')\n setImgPosition(event) {\n this.alignment = event.detail;\n }\n\n handleComponentAdjustment() {\n const image = this.el.querySelector('ifx-card-image');\n const links = this.el.querySelector('ifx-card-links');\n\n this.noImg = !image;\n this.noBtns = !links;\n\n if (this.href.trim() === \"\") {\n this.internalHref = undefined;\n } else {\n this.internalHref = this.href;\n }\n }\n\n componentWillLoad() {\n this.handleComponentAdjustment();\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-card', await framework);\n }\n }\n\n componentWillUpdate() {\n this.handleComponentAdjustment();\n }\n\n render() {\n return (\n <Host>\n <div \n aria-label={this.ariaLabel} \n class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }\n role=\"group\"\n >\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a \n class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} \n href={this.internalHref}\n >\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a \n class={`upper-body ${this.internalHref ? 'card-href' : ''}`} \n href={this.internalHref}\n id=\"upper-body-content\"\n >\n <slot />\n </a>\n <div>\n <slot name='buttons' />\n </div>\n </div>\n </div>}\n\n {this.direction === 'vertical' &&\n <div class=\"vertical\">\n <a \n class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} \n href={this.internalHref} \n target={this.target}\n >\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body' id=\"upper-body-content\">\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper' role=\"group\" aria-labelledby=\"upper-body-content\">\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-card.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,w0DAAw0D;;MCW30D,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;AANjB,IAAA,WAAA,GAAA;;;;AASU,QAAA,IAAS,CAAA,SAAA,GAA8B,UAAU;AAGjD,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AAChB,QAAA,IAAY,CAAA,YAAA,GAAW,EAAE;AAC1B,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AAkGjC;AA9FC,IAAA,cAAc,CAAC,KAAK,EAAA;AAClB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM;;IAG/B,yBAAyB,GAAA;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;QACrD,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;AAErD,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK;AACnB,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK;QAEpB,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;AAC3B,YAAA,IAAI,CAAC,YAAY,GAAG,SAAS;;aACxB;AACL,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI;;;IAIjC,iBAAiB,GAAA;QACf,IAAI,CAAC,yBAAyB,EAAE;;AAGlC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,UAAU,EAAE,MAAM,SAAS,CAAC;;;IAI/C,mBAAmB,GAAA;QACjB,IAAI,CAAC,yBAAyB,EAAE;;IAGlC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EACc,IAAI,CAAC,SAAS,EAC1B,KAAK,EACH,CAAA;cACE,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAA;AAC3B,YAAA,EAAA,IAAI,CAAC,SAAS,CAAA;AACd,YAAA,EAAA,IAAI,CAAC,SAAS,CAAE,CAAA,EAEpB,IAAI,EAAC,OAAO,EAAA,EAGX,IAAI,CAAC,SAAS,KAAK,YAAY;AAC9B,YAAA,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAY,SAAA,EAAA,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,YAAY,GAAG,WAAW,GAAG,EAAE,CAAE,CAAA,EACxF,IAAI,EAAE,IAAI,CAAC,YAAY,EAAA,EAEvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,KAAK,EAAA,CAAG,CACjB,EAEJ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CACE,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,IAAI,CAAC,YAAY,GAAG,WAAW,GAAG,EAAE,CAAE,CAAA,EAC3D,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,EAAE,EAAC,oBAAoB,EAAA,EAEvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACN,EACJ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAG,CAAA,CACnB,CACF,CACF,EAEP,IAAI,CAAC,SAAS,KAAK,UAAU;AAC5B,YAAA,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EACnB,CACE,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAuB,oBAAA,EAAA,IAAI,CAAC,YAAY,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,EACpE,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EAEnB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,SAAA,EAAY,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,EAAE,CAAE,CAAA,EAAA,EACnD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,KAAK,EAAA,CAAG,CACf,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,EAAE,EAAC,oBAAoB,EAAA,EAC7C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACJ,EAEJ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,qBAAiB,oBAAoB,EAAA,EAChF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACF,CACJ,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n display: inline-flex;\r\n}\r\n\r\n.card {\r\n position: relative;\r\n display: inline-flex;\r\n flex-direction: column;\r\n word-wrap: break-word;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n background-clip: border-box;\r\n border: 2px solid tokens.$ifxColorEngineering200;\r\n border-radius: 2px;\r\n //width: 22rem;\r\n width: 350px;\r\n height: auto;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n // when the link is focused or hovered, the border color changes\r\n &:has(.card-href:focus), &:has(.card-href:hover) {\r\n outline: none;\r\n border-color: tokens.$ifxColorOcean500;\r\n\r\n ::slotted(ifx-card-headline) {\r\n color: tokens.$ifxColorOcean500;\r\n }\r\n }\r\n\r\n &.noBtns {\r\n & .vertical {\r\n & .lower__body-wrapper {\r\n padding-bottom: 24px;\r\n }\r\n }\r\n\r\n & .horizontal {\r\n & .lower__body-wrapper {\r\n padding-bottom: 24px;\r\n }\r\n }\r\n }\r\n\r\n & .horizontal {\r\n display: flex;\r\n flex-direction: row;\r\n min-height: 218px;\r\n\r\n & .card-img {\r\n flex: 1;\r\n text-decoration: none;\r\n\r\n &.noImage {\r\n display: none;\r\n }\r\n\r\n & ::slotted([slot=img]) {\r\n width: 100%;\r\n vertical-align: bottom;\r\n }\r\n }\r\n\r\n & .lower__body-wrapper {\r\n flex: 1;\r\n display: grid;\r\n grid-template-rows: 1fr auto;\r\n\r\n & .upper-body {\r\n display: flex;\r\n flex-direction: column;\r\n text-decoration: none;\r\n color: tokens.$ifxColorBaseBlack;\r\n padding: 24px 24px 0px 24px;\r\n }\r\n }\r\n }\r\n\r\n & .vertical {\r\n & .upper__body-wrapper {\r\n text-decoration: none;\r\n color: tokens.$ifxColorBaseBlack;\r\n\r\n & .card-img {\r\n height: 190px;\r\n\r\n &.noImage {\r\n display: none;\r\n }\r\n }\r\n\r\n & .upper-body {\r\n padding: 24px 24px 0px 24px;\r\n }\r\n }\r\n\r\n & .lower__body-wrapper {\r\n &:hover {\r\n border-color: tokens.$ifxColorEngineering200;\r\n }\r\n }\r\n }\r\n\r\n &.horizontal {\r\n flex-direction: row;\r\n width: 538px;\r\n\r\n & .card-img {\r\n flex: 1;\r\n order: 2;\r\n\r\n & ::slotted([slot=img]) {\r\n width: 100%;\r\n height: 100%;\r\n vertical-align: bottom;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n &.left {\r\n & .horizontal {\r\n & .card-img {\r\n order: 1;\r\n }\r\n\r\n & .lower__body-wrapper {\r\n order: 2;\r\n }\r\n }\r\n }\r\n }\r\n\r\n & .card-href:focus {\r\n outline: none;\r\n }\r\n}","import { Component, h, Host, Element, Prop, State, Listen } 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\n\r\n@Component({\r\n tag: 'ifx-card',\r\n styleUrl: 'card.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class Card {\r\n @Element() el;\r\n @State() noBtns: boolean;\r\n @Prop() direction: 'horizontal' \| 'vertical' = 'vertical';\r\n @State() alignment: string;\r\n @State() noImg: boolean;\r\n @Prop() href: string = \"\";\r\n @State() internalHref: string = \"\";\r\n @Prop() target: string = \"_self\";\r\n @Prop() ariaLabel: string \| null;\r\n\r\n @Listen('imgPosition')\r\n setImgPosition(event) {\r\n this.alignment = event.detail;\r\n }\r\n\r\n handleComponentAdjustment() {\r\n const image = this.el.querySelector('ifx-card-image');\r\n const links = this.el.querySelector('ifx-card-links');\r\n\r\n this.noImg = !image;\r\n this.noBtns = !links;\r\n\r\n if (this.href.trim() === \"\") {\r\n this.internalHref = undefined;\r\n } else {\r\n this.internalHref = this.href;\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.handleComponentAdjustment();\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-card', await framework);\r\n }\r\n }\r\n\r\n componentWillUpdate() {\r\n this.handleComponentAdjustment();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div \r\n aria-label={this.ariaLabel} \r\n class={\r\n `card \r\n ${this.noBtns ? 'noBtns' : \"\"}\r\n ${this.direction} \r\n ${this.alignment}`\r\n }\r\n role=\"group\"\r\n >\r\n\r\n {this.direction === 'horizontal' &&\r\n <div class=\"horizontal\">\r\n <a \r\n class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} \r\n href={this.internalHref}\r\n >\r\n <slot name=\"img\" />\r\n </a>\r\n\r\n <div class='lower__body-wrapper'>\r\n <a \r\n class={`upper-body ${this.internalHref ? 'card-href' : ''}`} \r\n href={this.internalHref}\r\n id=\"upper-body-content\"\r\n >\r\n <slot />\r\n </a>\r\n <div>\r\n <slot name='buttons' />\r\n </div>\r\n </div>\r\n </div>}\r\n\r\n {this.direction === 'vertical' &&\r\n <div class=\"vertical\">\r\n <a \r\n class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} \r\n href={this.internalHref} \r\n target={this.target}\r\n >\r\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\r\n <slot name=\"img\" />\r\n </div>\r\n\r\n <div class='upper-body' id=\"upper-body-content\">\r\n <slot />\r\n </div>\r\n </a>\r\n\r\n <div class='lower__body-wrapper' role=\"group\" aria-labelledby=\"upper-body-content\">\r\n <slot name='buttons' />\r\n </div>\r\n </div>}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/ifx-checkbox-group.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
-import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$2 } from './p-BnjY2AJX.js';
 const checkboxGroupCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.checkbox-group-container{display:flex;flex-direction:column}.checkbox-group{display:flex;gap:8px}.checkbox-group.horizontal{flex-direction:row;column-gap:12px}.checkbox-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;color:#1D1D1D;line-height:1.5rem;font-weight:400;margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.group-label .required{color:#575352;margin-left:4px}.group-label .required.error{color:#CD002F}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font-weight:400;font-size:0.75rem;line-height:1rem;flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}";
@@ -55,7 +55,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (h("div", { key: 'c9424a54db6fcce412275bea3e584b6985cf6479', class: 'checkbox-group-container' }, this.showGroupLabel && (h("div", { key: '9ebd83b86b4be4de0107edeae3101cd64915e6b1', class: "group-label" }, this.groupLabelText, this.required && h("span", { key: 'd83004ec7fc85d23453db833e4b87748be2d088f', class: `required ${this.hasErrors ? 'error' : ''}` }, "*"))), h("div", { key: '647c87572ee92805df964c05b59f59886592c273', class: `checkbox-group ${this.alignment} ${this.size}` }, h("slot", { key: '2ed8287636dda53576fd27440ae9d99b569951d8', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
+        return (h("div", { key: '9a05328e66db20a356ae8353a3cc42b15095a715', class: 'checkbox-group-container' }, this.showGroupLabel && (h("div", { key: 'd4f27726deac615b2fadde61ed2adee68c7390f5', class: "group-label" }, this.groupLabelText, this.required && h("span", { key: '3cd457b997793b0bf50336f94e03b532f3351618', class: `required ${this.hasErrors ? 'error' : ''}` }, "*"))), h("div", { key: 'afa8fba0c9182d3fb7b65722e07ae36761824ec6', class: `checkbox-group ${this.alignment} ${this.size}` }, h("slot", { key: 'c98be02ec7595d6cfbb1694327ba143e9c04cd25', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
     }
     get el() { return this; }
     static get style() { return checkboxGroupCss; }

package/dist/components/ifx-checkbox-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-checkbox-group.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n display: flex;\n flex-direction: column;\n}\n\n.checkbox-group {\n display: flex;\n gap: tokens.$ifxSpace100;\n\n &.horizontal {\n flex-direction: row;\n column-gap: tokens.$ifxSpace150;\n }\n\n &.vertical {\n flex-direction: column;\n row-gap: tokens.$ifxSpace150;\n }\n}\n\n.group-label {\n font-size: tokens.$ifxFontSizeM;\n color: tokens.$ifxColorBaseBlack;\n line-height: tokens.$ifxLineHeightM;\n font-weight: tokens.$ifxFontWeightRegular;\n margin-bottom: tokens.$ifxSpace100;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.group-label .required {\n color: tokens.$ifxColorEngineering500;\n margin-left: tokens.$ifxSpace50;\n}\n\n.group-label .required.error {\n color: tokens.$ifxColorRed500;\n}\n\n.caption {\n margin-top: tokens.$ifxSpace100;\n align-self: flex-start;\n display: flex;\n width: 100%;\n column-gap: tokens.$ifxSpace100;\n justify-content: space-between;\n align-items: center;\n\n &.default {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n}\n\n.caption-text {\n font-weight: tokens.$ifxFontWeightRegular;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n flex: 1;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n flex:0;\n display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n shadow: true,\n // formAssociated: true\n})\n\nexport class CheckboxGroup {\n private errorStates: Map<HTMLElement, boolean> = new Map();\n\n @Element() el: HTMLElement;\n @Prop() alignment: 'horizontal' \| 'vertical' = 'vertical';\n @Prop() size: string;\n @Prop() showGroupLabel: boolean;\n @Prop() groupLabelText: string = 'Group Label Text';\n @Prop() showCaption: boolean;\n @Prop() captionText: string;\n @Prop() showCaptionIcon: boolean;\n @Prop() required: boolean = false;\n @State() hasErrors: boolean = false;\n\n @Listen('ifxError')\n handleCheckboxError(event: CustomEvent) {\n const checkbox = event.target as HTMLElement;\n if (checkbox.tagName.toLowerCase() === 'ifx-checkbox') {\n this.errorStates.set(checkbox, event.detail);\n this.updateHasErrors();\n }\n }\n\n // Method to set the error state of all checkboxes in the group\n @Method()\n async setGroupError(error: boolean) {\n const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n checkboxes.forEach((checkbox) => {\n (checkbox as any).error = error;\n });\n }\n\n componentWillLoad() {\n this.initializeState();\n\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-checkbox-group', await framework)\n }\n }\n\n handleSlotChange = () => {\n this.initializeState();\n };\n\n private initializeState() {\n this.errorStates.clear();\n const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n checkboxes.forEach((checkbox) => {\n if (!this.errorStates.has(checkbox)) {\n this.errorStates.set(checkbox, (checkbox as any).error \|\| false);\n }\n });\n this.updateHasErrors();\n }\n\n private updateHasErrors() {\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n }\n\n render() {\n return (\n <div class='checkbox-group-container'>\n {this.showGroupLabel && (\n <div class=\"group-label\">\n {this.groupLabelText}\n {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\n </div>\n )}\n <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n {this.showCaption ? (\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n </ifx-icon></div> : ''}\n <div class='caption-text'>{this.captionText}</div>\n </div>) : ''}\n </div>\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-checkbox-group.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.checkbox-group-container {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.checkbox-group {\r\n display: flex;\r\n gap: tokens.$ifxSpace100;\r\n\r\n &.horizontal {\r\n flex-direction: row;\r\n column-gap: tokens.$ifxSpace150;\r\n }\r\n\r\n &.vertical {\r\n flex-direction: column;\r\n row-gap: tokens.$ifxSpace150;\r\n }\r\n}\r\n\r\n.group-label {\r\n font-size: tokens.$ifxFontSizeM;\r\n color: tokens.$ifxColorBaseBlack;\r\n line-height: tokens.$ifxLineHeightM;\r\n font-weight: tokens.$ifxFontWeightRegular;\r\n margin-bottom: tokens.$ifxSpace100;\r\n text-align: left;\r\n text-underline-position: from-font;\r\n text-decoration-skip-ink: none;\r\n}\r\n\r\n.group-label .required {\r\n color: tokens.$ifxColorEngineering500;\r\n margin-left: tokens.$ifxSpace50;\r\n}\r\n\r\n.group-label .required.error {\r\n color: tokens.$ifxColorRed500;\r\n}\r\n\r\n.caption {\r\n margin-top: tokens.$ifxSpace100;\r\n align-self: flex-start;\r\n display: flex;\r\n width: 100%;\r\n column-gap: tokens.$ifxSpace100;\r\n justify-content: space-between;\r\n align-items: center;\r\n\r\n &.default {\r\n color: tokens.$ifxColorBaseBlack;\r\n }\r\n\r\n &.error {\r\n color: tokens.$ifxColorRed500;\r\n }\r\n}\r\n\r\n.caption-text {\r\n font-weight: tokens.$ifxFontWeightRegular;\r\n font-size: tokens.$ifxFontSizeXs;\r\n line-height: tokens.$ifxLineHeightXs;\r\n flex: 1;\r\n text-align: left;\r\n text-underline-position: from-font;\r\n text-decoration-skip-ink: none;\r\n}\r\n\r\n.caption-icon {\r\n flex:0;\r\n display: flex;\r\n}","import { Component, State, Prop, h, Element, Listen, Method } 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\n\r\n@Component({\r\n tag: 'ifx-checkbox-group',\r\n styleUrl: 'checkbox-group.scss',\r\n shadow: true,\r\n // formAssociated: true\r\n})\r\n\r\nexport class CheckboxGroup {\r\n private errorStates: Map<HTMLElement, boolean> = new Map();\r\n\r\n @Element() el: HTMLElement;\r\n @Prop() alignment: 'horizontal' \| 'vertical' = 'vertical';\r\n @Prop() size: string;\r\n @Prop() showGroupLabel: boolean;\r\n @Prop() groupLabelText: string = 'Group Label Text';\r\n @Prop() showCaption: boolean;\r\n @Prop() captionText: string;\r\n @Prop() showCaptionIcon: boolean;\r\n @Prop() required: boolean = false;\r\n @State() hasErrors: boolean = false;\r\n\r\n @Listen('ifxError')\r\n handleCheckboxError(event: CustomEvent) {\r\n const checkbox = event.target as HTMLElement;\r\n if (checkbox.tagName.toLowerCase() === 'ifx-checkbox') {\r\n this.errorStates.set(checkbox, event.detail);\r\n this.updateHasErrors();\r\n }\r\n }\r\n\r\n // Method to set the error state of all checkboxes in the group\r\n @Method()\r\n async setGroupError(error: boolean) {\r\n const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\r\n checkboxes.forEach((checkbox) => {\r\n (checkbox as any).error = error;\r\n });\r\n }\r\n\r\n componentWillLoad() {\r\n this.initializeState();\r\n\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-checkbox-group', await framework)\r\n }\r\n }\r\n\r\n handleSlotChange = () => {\r\n this.initializeState();\r\n };\r\n\r\n private initializeState() {\r\n this.errorStates.clear();\r\n const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\r\n checkboxes.forEach((checkbox) => {\r\n if (!this.errorStates.has(checkbox)) {\r\n this.errorStates.set(checkbox, (checkbox as any).error \|\| false);\r\n }\r\n });\r\n this.updateHasErrors();\r\n }\r\n\r\n private updateHasErrors() {\r\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class='checkbox-group-container'>\r\n {this.showGroupLabel && (\r\n <div class=\"group-label\">\r\n {this.groupLabelText}\r\n {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\r\n </div>\r\n )}\r\n <div class={`checkbox-group ${this.alignment} ${this.size}`}>\r\n <slot onSlotchange={this.handleSlotChange}></slot>\r\n </div>\r\n {this.showCaption ? (\r\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\r\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\r\n </ifx-icon></div> : ''}\r\n <div class='caption-text'>{this.captionText}</div>\r\n </div>) : ''}\r\n </div>\r\n );\r\n }\r\n}"],"version":3}

package/dist/components/ifx-checkbox.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { C as Checkbox, d as defineCustomElement$1 } from './p-BQj9WQQe.js';
+import { C as Checkbox, d as defineCustomElement$1 } from './p-B61ip_5M.js';
 const IfxCheckbox = Checkbox;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-chip-item.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { C as ChipItem, d as defineCustomElement$1 } from './p-4wfkxGlJ.js';
+import { C as ChipItem, d as defineCustomElement$1 } from './p-BVontUD4.js';
 const IfxChipItem = ChipItem;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-chip.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { C as Chip, d as defineCustomElement$1 } from './p-DNZFFt4T.js';
+import { C as Chip, d as defineCustomElement$1 } from './p-sukt4tRE.js';
 const IfxChip = Chip;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-content-switcher-item.js CHANGED Viewed

@@ -10,7 +10,7 @@ const ContentSwitcherItem = /*@__PURE__*/ proxyCustomElement(class ContentSwitch
         this.selected = false;
     }
     render() {
-        return (h(Host, { key: '844da0fa26ea37b9b53d16f70f982fc4daf3bed1' }, h("button", { key: 'ed5ec4be1c0cd301db79a078fe28f36967a55d85', class: 'ifx-content-switcher-item' + (this.selected ? ' selected' : '') }, h("slot", { key: '6469c05327408244756a8af3f555c32bae66ace1' }))));
+        return (h(Host, { key: 'a9ba319dbf35fb563cc9f92dd19690e4f4de051d' }, h("button", { key: 'f607a140f0b8ffb5334ecde57f2e9771d8c689d4', class: 'ifx-content-switcher-item' + (this.selected ? ' selected' : '') }, h("slot", { key: 'd86e866d7a798a1c31182ebd902d164efa601a99' }))));
     }
     static get style() { return contentSwitcherItemCss; }
 }, [257, "ifx-content-switcher-item", {

package/dist/components/ifx-content-switcher-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-content-switcher-item.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,ktBAAktB;;MCOpuB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;;AAMU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAYlC;IATC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,2BAA2B,IAAI,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,EAAA,EAC7E,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/content-switcher/content-switcher-item.scss?tag=ifx-content-switcher-item&encapsulation=shadow","src/components/content-switcher/content-switcher-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.ifx-content-switcher-item {\n all: unset;\n\n height: tokens.$ifxSize450;\n box-sizing: border-box;\n border-radius: tokens.$ifxBorderRadiusRound;\n border: 3px solid transparent; // avoid jumping around\n padding: 7px tokens.$ifxSize250;\n\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxSize175;\n line-height: 20px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n gap: tokens.$ifxSpace100;\n background-color: transparent;\n\n &.selected {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 3px solid tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n background-color: tokens.$ifxColorBaseWhite;\n border: 3px solid tokens.$ifxColorOcean600;\n cursor: pointer;\n }\n\n &:active {\n color: tokens.$ifxColorOcean600;\n background-color: tokens.$ifxColorBaseWhite;\n border: 3px solid tokens.$ifxColorOcean700;\n }\n\n &:focus {\n color: tokens.$ifxColorOcean600;\n background-color: tokens.$ifxColorBaseWhite;\n border: 3px solid tokens.$ifxColorOcean600;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-content-switcher-item',\n styleUrl: './content-switcher-item.scss',\n shadow: true,\n})\nexport class ContentSwitcherItem {\n @Prop() selected: boolean = false;\n @Prop() value: string;\n\n render() {\n return (\n <Host>\n <button class={'ifx-content-switcher-item' + (this.selected ? ' selected' : '')}>\n <slot></slot>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-content-switcher-item.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,ktBAAktB;;MCOpuB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;;AAMU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAYlC;IATC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,2BAA2B,IAAI,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,EAAA,EAC7E,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/content-switcher/content-switcher-item.scss?tag=ifx-content-switcher-item&encapsulation=shadow","src/components/content-switcher/content-switcher-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n.ifx-content-switcher-item {\r\n all: unset;\r\n\r\n height: tokens.$ifxSize450;\r\n box-sizing: border-box;\r\n border-radius: tokens.$ifxBorderRadiusRound;\r\n border: 3px solid transparent; // avoid jumping around\r\n padding: 7px tokens.$ifxSize250;\r\n\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n font-size: tokens.$ifxSize175;\r\n line-height: 20px;\r\n\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: tokens.$ifxSpace100;\r\n background-color: transparent;\r\n\r\n &.selected {\r\n color: tokens.$ifxColorOcean500;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n border: 3px solid tokens.$ifxColorOcean500;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorOcean600;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n border: 3px solid tokens.$ifxColorOcean600;\r\n cursor: pointer;\r\n }\r\n\r\n &:active {\r\n color: tokens.$ifxColorOcean600;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n border: 3px solid tokens.$ifxColorOcean700;\r\n }\r\n\r\n &:focus {\r\n color: tokens.$ifxColorOcean600;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n border: 3px solid tokens.$ifxColorOcean600;\r\n }\r\n}\r\n","import { Component, h, Host, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-content-switcher-item',\r\n styleUrl: './content-switcher-item.scss',\r\n shadow: true,\r\n})\r\nexport class ContentSwitcherItem {\r\n @Prop() selected: boolean = false;\r\n @Prop() value: string;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button class={'ifx-content-switcher-item' + (this.selected ? ' selected' : '')}>\r\n <slot></slot>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/ifx-content-switcher.js CHANGED Viewed

@@ -164,7 +164,7 @@ const ContentSwitcher = /*@__PURE__*/ proxyCustomElement(class ContentSwitcher e
         return this.items[index].getAttribute('value') || index.toLocaleString();
     }
     render() {
-        return (h(Host, { key: '6a0e5172af0ececbfbe29ba2c45c464bd228f6b4' }, h("div", { key: 'f17700d042f7b8eef9c07acf1c9fe81ee7283c5f', class: "ifx-content-switcher", role: "group" }, h("slot", { key: 'd1192fc9ca4a4ad57cf9fdc93d98d010d9956484' }))));
+        return (h(Host, { key: '3f76631f0386e5694a07a02bb336fb3f5d04633b' }, h("div", { key: '7873859b37b233cc594b3b785ac2fdf352a7664d', class: "ifx-content-switcher", role: "group" }, h("slot", { key: '3a7d429bffe0fe5f0573c1caf944b62c90840388' }))));
     }
     get el() { return this; }
     static get style() { return contentSwitcherCss; }

package/dist/components/ifx-content-switcher.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-content-switcher.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/content-switcher/content-switcher.scss?tag=ifx-content-switcher&encapsulation=shadow","src/components/content-switcher/content-switcher.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.ifx-content-switcher {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n height: tokens.$ifxSize450;\n width: fit-content;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n & ::slotted(ifx-content-switcher-item) {\n position: relative;\n // top: -1px;\n }\n\n & ::slotted(ifx-content-switcher-item:first-child) {\n left: -1px;\n margin-right: -1px;\n }\n\n & ::slotted(ifx-content-switcher-item:last-child) {\n right: -1px;\n margin-left: -1px;\n }\n\n // Dividers\n & ::slotted(.ifx-content-switcher-divider) {\n width: tokens.$ifxSize12;\n height: tokens.$ifxSize250;\n background-color: tokens.$ifxColorEngineering400;\n margin: 0px 1px;\n visibility: visible;\n }\n\n & ::slotted(.ifx-content-switcher-divider.hidden) {\n visibility: hidden;\n }\n}","import { Component, h, Element, Event, EventEmitter, Host, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\nexport type ChangeEvent = { oldValue: string; newValue: string };\n\ntype ContentSwitcherItem = Element & {\n selected: boolean;\n};\n\n@Component({\n tag: 'ifx-content-switcher',\n styleUrl: './content-switcher.scss',\n shadow: true,\n})\nexport class ContentSwitcher {\n @Element() el: HTMLElement;\n\n @State() items: Element[];\n @State() activeIndex = -1;\n @State() hoverIndex: number = -1;\n @State() focusIndex: number = -1;\n\n @State() dividers: Element[] = Array();\n\n @Event() ifxChange: EventEmitter<ChangeEvent>;\n\n private eventHandlers: Map<Element, { [key: string]: EventListener }> = new Map();\n\n componentWillLoad() {\n this.items = Array.from(this.el.children);\n this.initializeDividers();\n this.addEventListeners();\n this.ensureSingleSelectedItem();\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-content-switcher', await framework)\n }\n }\n\n disconnectedCallback() {\n this.removeEventListeners();\n }\n\n /*\n Initialize the dividers between items.\n /\n initializeDividers() {\n this.items.forEach((item, index) => {\n if (index < this.items.length - 1) {\n const divider = document.createElement('div');\n divider.classList.add('ifx-content-switcher-divider');\n item.after(divider);\n this.dividers.push(divider);\n }\n });\n }\n\n /\n Add event listeners for each item.\n /\n addEventListeners() {\n this.items.forEach((item, index) => {\n const handlers = {\n click: () => this.selectItem(index),\n mouseenter: () => this.handleHover(index, true),\n mouseleave: () => this.handleHover(index, false),\n focus: () => this.handleFocus(index, true),\n blur: () => this.handleFocus(index, false),\n };\n\n Object.keys(handlers).forEach(event => {\n item.addEventListener(event, handlers[event]);\n });\n\n this.eventHandlers.set(item, handlers);\n });\n }\n\n /\n Remove all event listeners.\n /\n removeEventListeners() {\n this.eventHandlers.forEach((handlers, item) => {\n Object.keys(handlers).forEach(event => {\n item.removeEventListener(event, handlers[event]);\n });\n });\n this.eventHandlers.clear();\n }\n\n ensureSingleSelectedItem() {\n this.items.forEach((item, index) => {\n const isSelected = (item.getAttribute('selected') === 'true') \|\| (item as ContentSwitcherItem).selected;\n if (isSelected) {\n if (this.activeIndex < 0) {\n this.selectItem(index);\n } else {\n item.removeAttribute('selected');\n (item as ContentSwitcherItem).selected = false;\n }\n }\n });\n }\n\n /\n Handle hover events on an item.\n * @param index - Index of the item.\n * @param isActive - Whether the item is hovered.\n /\n handleHover(index: number, isActive: boolean) {\n this.hoverIndex = isActive ? index : -1;\n this.updateDividersOfItem(index);\n }\n\n /\n Handle hover events on an item.\n * @param index - Index of the item.\n * @param isActive - Whether the item is focused.\n /\n handleFocus(index: number, isActive: boolean) {\n this.focusIndex = isActive ? index : -1;\n this.updateDividersOfItem(index);\n }\n\n /\n Update visibility of dividers adjacent to a specific item.\n * @param itemIndex - Index of the item.\n /\n updateDividersOfItem(itemIndex: number) {\n if (itemIndex < this.items.length - 1) {\n this.updateDividerVisibility(itemIndex);\n }\n if (itemIndex > 0) {\n this.updateDividerVisibility(itemIndex - 1);\n }\n }\n\n /\n Update visibility of a specific divider.\n * @param dividerIndex - Index of the divider.\n /\n updateDividerVisibility(dividerIndex: number) {\n const hiddenDividers = new Set([this.activeIndex, this.activeIndex - 1, this.hoverIndex, this.hoverIndex - 1, this.focusIndex, this.focusIndex - 1]);\n this.setDividerVisibility(dividerIndex, hiddenDividers.has(dividerIndex));\n }\n\n /\n Set the visibility of a specific divider.\n * @param dividerIndex - Index of the divider.\n * @param hidden - Whether the divider should be hidden.\n /\n setDividerVisibility(dividerIndex: number, hidden: boolean) {\n if (this.dividers[dividerIndex]) {\n this.dividers[dividerIndex].classList.toggle('hidden', hidden);\n }\n }\n\n /\n Select a specific item.\n * @param itemIndex - Index of the item to be selected.\n /\n selectItem(itemIndex: number) {\n if (itemIndex === this.activeIndex) return;\n const oldIndex = this.activeIndex;\n if (oldIndex >= 0) {\n this.items[oldIndex].removeAttribute('selected');\n }\n\n this.activeIndex = itemIndex;\n this.items[itemIndex].setAttribute('selected', 'true');\n\n this.ifxChange.emit({ oldValue: this.getValueOfItem(oldIndex), newValue: this.getValueOfItem(itemIndex) });\n this.updateDividersOfItem(oldIndex);\n this.updateDividersOfItem(itemIndex);\n }\n\n /\n Get the value property of the item at a specific index.\n * Falls back to the index if no value is set.\n * \n * @param index - Index of the item. \n * @returns The value of the item.\n */\n getValueOfItem(index: number): string {\n if (this.items[index] == null) return index.toLocaleString();\n return this.items[index].getAttribute('value') \|\| index.toLocaleString();\n }\n\n render() {\n return (\n <Host>\n <div class=\"ifx-content-switcher\" role=\"group\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-content-switcher.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/content-switcher/content-switcher.scss?tag=ifx-content-switcher&encapsulation=shadow","src/components/content-switcher/content-switcher.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n.ifx-content-switcher {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n border: 1px solid tokens.$ifxColorEngineering300;\r\n border-radius: tokens.$ifxBorderRadiusRound;\r\n height: tokens.$ifxSize450;\r\n width: fit-content;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n & ::slotted(ifx-content-switcher-item) {\r\n position: relative;\r\n // top: -1px;\r\n }\r\n\r\n & ::slotted(ifx-content-switcher-item:first-child) {\r\n left: -1px;\r\n margin-right: -1px;\r\n }\r\n\r\n & ::slotted(ifx-content-switcher-item:last-child) {\r\n right: -1px;\r\n margin-left: -1px;\r\n }\r\n\r\n // Dividers\r\n & ::slotted(.ifx-content-switcher-divider) {\r\n width: tokens.$ifxSize12;\r\n height: tokens.$ifxSize250;\r\n background-color: tokens.$ifxColorEngineering400;\r\n margin: 0px 1px;\r\n visibility: visible;\r\n }\r\n\r\n & ::slotted(.ifx-content-switcher-divider.hidden) {\r\n visibility: hidden;\r\n }\r\n}","import { Component, h, Element, Event, EventEmitter, Host, State } 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\n\r\nexport type ChangeEvent = { oldValue: string; newValue: string };\r\n\r\ntype ContentSwitcherItem = Element & {\r\n selected: boolean;\r\n};\r\n\r\n@Component({\r\n tag: 'ifx-content-switcher',\r\n styleUrl: './content-switcher.scss',\r\n shadow: true,\r\n})\r\nexport class ContentSwitcher {\r\n @Element() el: HTMLElement;\r\n\r\n @State() items: Element[];\r\n @State() activeIndex = -1;\r\n @State() hoverIndex: number = -1;\r\n @State() focusIndex: number = -1;\r\n\r\n @State() dividers: Element[] = Array();\r\n\r\n @Event() ifxChange: EventEmitter<ChangeEvent>;\r\n\r\n private eventHandlers: Map<Element, { [key: string]: EventListener }> = new Map();\r\n\r\n componentWillLoad() {\r\n this.items = Array.from(this.el.children);\r\n this.initializeDividers();\r\n this.addEventListeners();\r\n this.ensureSingleSelectedItem();\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-content-switcher', await framework)\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.removeEventListeners();\r\n }\r\n\r\n /*\r\n Initialize the dividers between items.\r\n /\r\n initializeDividers() {\r\n this.items.forEach((item, index) => {\r\n if (index < this.items.length - 1) {\r\n const divider = document.createElement('div');\r\n divider.classList.add('ifx-content-switcher-divider');\r\n item.after(divider);\r\n this.dividers.push(divider);\r\n }\r\n });\r\n }\r\n\r\n /\r\n Add event listeners for each item.\r\n /\r\n addEventListeners() {\r\n this.items.forEach((item, index) => {\r\n const handlers = {\r\n click: () => this.selectItem(index),\r\n mouseenter: () => this.handleHover(index, true),\r\n mouseleave: () => this.handleHover(index, false),\r\n focus: () => this.handleFocus(index, true),\r\n blur: () => this.handleFocus(index, false),\r\n };\r\n\r\n Object.keys(handlers).forEach(event => {\r\n item.addEventListener(event, handlers[event]);\r\n });\r\n\r\n this.eventHandlers.set(item, handlers);\r\n });\r\n }\r\n\r\n /\r\n Remove all event listeners.\r\n /\r\n removeEventListeners() {\r\n this.eventHandlers.forEach((handlers, item) => {\r\n Object.keys(handlers).forEach(event => {\r\n item.removeEventListener(event, handlers[event]);\r\n });\r\n });\r\n this.eventHandlers.clear();\r\n }\r\n\r\n ensureSingleSelectedItem() {\r\n this.items.forEach((item, index) => {\r\n const isSelected = (item.getAttribute('selected') === 'true') \|\| (item as ContentSwitcherItem).selected;\r\n if (isSelected) {\r\n if (this.activeIndex < 0) {\r\n this.selectItem(index);\r\n } else {\r\n item.removeAttribute('selected');\r\n (item as ContentSwitcherItem).selected = false;\r\n }\r\n }\r\n });\r\n }\r\n\r\n /\r\n Handle hover events on an item.\r\n * @param index - Index of the item.\r\n * @param isActive - Whether the item is hovered.\r\n /\r\n handleHover(index: number, isActive: boolean) {\r\n this.hoverIndex = isActive ? index : -1;\r\n this.updateDividersOfItem(index);\r\n }\r\n\r\n /\r\n Handle hover events on an item.\r\n * @param index - Index of the item.\r\n * @param isActive - Whether the item is focused.\r\n /\r\n handleFocus(index: number, isActive: boolean) {\r\n this.focusIndex = isActive ? index : -1;\r\n this.updateDividersOfItem(index);\r\n }\r\n\r\n /\r\n Update visibility of dividers adjacent to a specific item.\r\n * @param itemIndex - Index of the item.\r\n /\r\n updateDividersOfItem(itemIndex: number) {\r\n if (itemIndex < this.items.length - 1) {\r\n this.updateDividerVisibility(itemIndex);\r\n }\r\n if (itemIndex > 0) {\r\n this.updateDividerVisibility(itemIndex - 1);\r\n }\r\n }\r\n\r\n /\r\n Update visibility of a specific divider.\r\n * @param dividerIndex - Index of the divider.\r\n /\r\n updateDividerVisibility(dividerIndex: number) {\r\n const hiddenDividers = new Set([this.activeIndex, this.activeIndex - 1, this.hoverIndex, this.hoverIndex - 1, this.focusIndex, this.focusIndex - 1]);\r\n this.setDividerVisibility(dividerIndex, hiddenDividers.has(dividerIndex));\r\n }\r\n\r\n /\r\n Set the visibility of a specific divider.\r\n * @param dividerIndex - Index of the divider.\r\n * @param hidden - Whether the divider should be hidden.\r\n /\r\n setDividerVisibility(dividerIndex: number, hidden: boolean) {\r\n if (this.dividers[dividerIndex]) {\r\n this.dividers[dividerIndex].classList.toggle('hidden', hidden);\r\n }\r\n }\r\n\r\n /\r\n Select a specific item.\r\n * @param itemIndex - Index of the item to be selected.\r\n /\r\n selectItem(itemIndex: number) {\r\n if (itemIndex === this.activeIndex) return;\r\n const oldIndex = this.activeIndex;\r\n if (oldIndex >= 0) {\r\n this.items[oldIndex].removeAttribute('selected');\r\n }\r\n\r\n this.activeIndex = itemIndex;\r\n this.items[itemIndex].setAttribute('selected', 'true');\r\n\r\n this.ifxChange.emit({ oldValue: this.getValueOfItem(oldIndex), newValue: this.getValueOfItem(itemIndex) });\r\n this.updateDividersOfItem(oldIndex);\r\n this.updateDividersOfItem(itemIndex);\r\n }\r\n\r\n /\r\n Get the value property of the item at a specific index.\r\n * Falls back to the index if no value is set.\r\n * \r\n * @param index - Index of the item. \r\n * @returns The value of the item.\r\n */\r\n getValueOfItem(index: number): string {\r\n if (this.items[index] == null) return index.toLocaleString();\r\n return this.items[index].getAttribute('value') \|\| index.toLocaleString();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"ifx-content-switcher\" role=\"group\">\r\n <slot></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/ifx-date-picker.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
-import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$2 } from './p-BnjY2AJX.js';
 const datePickerCss = ".date__picker-container{display:flex;flex-direction:column}.date__picker-container .label__wrapper{color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\"}.date__picker-container .label__wrapper .asterisk{display:none}.date__picker-container .label__wrapper .asterisk.required{display:inline;margin-left:4px}.date__picker-container .label__wrapper .asterisk.required.error{color:#CD002F}.date__picker-container.disabled .label__wrapper{color:#BFBBBB}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#BFBBBB}.date__picker-container .caption__wrapper{margin-top:4px;color:#1D1D1D;font:400 0.75rem/1rem \"Source Sans 3\"}.date__picker-input{font-family:\"Source Sans 3\";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786;height:100%}.date__picker-input.firefox__classes{padding:8px 16px;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.date__picker-input.firefox__classes:disabled{color:#FFFFFF}.date__picker-input:focus:not(.error,.success){border-color:#0A8276}.date__picker-input:hover:not(:disabled,:focus,.error,.success){border-color:#575352}.date__picker-input:disabled{border-color:#BFBBBB;background-color:#BFBBBB;cursor:default}.date__picker-input.error{border-color:#CD002F}.date__picker-input.success:not(.error){border-color:#4CA460}.date__picker-input::-webkit-datetime-edit-text{color:#8D8786;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.date__picker-input:disabled::-webkit-datetime-edit,.date__picker-input:disabled::-webkit-datetime-edit-text{color:#FFFFFF}.date__picker-input.has-value::-webkit-datetime-edit-text{color:#1D1D1D}.date__picker-input.has-value::-webkit-datetime-edit{color:#1D1D1D}::-webkit-datetime-edit{color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px}::-webkit-datetime-edit-fields-wrapper{padding:8px 16px;padding-bottom:9px;transform:translateY(1px)}::-webkit-inner-spin-button{display:none}::-webkit-calendar-picker-indicator{position:absolute;right:15px;font-size:19px;cursor:pointer;border-radius:1px}::-webkit-calendar-picker-indicator:focus-within{outline:2px solid #0A8276;outline-offset:2px}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{height:40px}.input__wrapper.small{height:36px}.input__wrapper.disabled .icon__wrapper{background-color:#BFBBBB;color:#FFFFFF}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle}";
@@ -100,8 +100,8 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
     // }
     render() {
         var _a, _b;
-        return (h("div", { key: 'dbb6f430496fefe886885ab005652d412bd30ebf', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '1c2a66b095a48206cf2c9931452964ac7d87dc59', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.trim(), h("span", { key: '0a754b66e239bae671a8c74ce2e0aa7ad5d47bcf', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: '03eedd8172d239cc9bc7ed75a125e2d8213dce5c', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '1ed8fb51d42502d703e564e53624b70e45334842', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: 'f1a55aa2e7ad2c9801b6a04a9a93d5b83fc63dac', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: 'e8109be168cf4e584350b2fe8cf98a908521eecd', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'df37c5fb29c31594720e7e112e18cdbce996942f', class: 'caption__wrapper' }, this.caption.trim()))));
+        return (h("div", { key: '763726725648bb2bf9e576a1c01b35d112dd63ea', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '7027e2b0ce4acf9006671b9b843897c5bbd72e0e', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.trim(), h("span", { key: 'f59e5a49509503293210e7b2bdabd734e9de5d65', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: 'e3a4101944cb8ef8a9b2dad442ad4c193fbb7d96', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: 'cb9b849de19bc9b956451cb54c2179f8af2e16cc', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: '1931e063d676f87844d9342fed5e71608de2daf1', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: '20844bdcdff6ac5ac02bd1a6e79d412bdefe48c0', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '240a8c6f3e522955282246eff9307318cea3c8f1', class: 'caption__wrapper' }, this.caption.trim()))));
     }
     get el() { return this; }
     static get style() { return datePickerCss; }

package/dist/components/ifx-date-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-date-picker.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n display: flex;\n flex-direction: column;\n\n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n\n & .asterisk { \n display: none;\n &.required {\n display: inline;\n margin-left: 4px;\n \n &.error {\n color: #CD002F;\n }\n }\n }\n\n }\n\n &.disabled {\n .label__wrapper {\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.error {\n .caption__wrapper {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled {\n .caption__wrapper {\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n & .caption__wrapper {\n margin-top: tokens.$ifxSpace50;\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody05;\n }\n}\n\n.date__picker-input {\n font-family: 'Source Sans 3';\n outline: none;\n width: 100%;\n cursor: pointer;\n border-radius: 1px;\n border: 1px solid tokens.$ifxColorEngineering400;\n height: 100%;\n\n &.firefox__classes {\n padding: 8px 16px;\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n cursor: pointer;\n\n &:disabled {\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &:focus:not(.error, .success) {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &:disabled {\n border-color: tokens.$ifxColorEngineering300;\n background-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n\n &.error {\n border-color: tokens.$ifxColorRed500;\n }\n\n &.success:not(.error) {\n border-color: tokens.$ifxColorGreen500;\n }\n\n &::-webkit-datetime-edit-text {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n &:disabled::-webkit-datetime-edit,\n &:disabled::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseWhite;\n }\n\n &.has-value::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.has-value::-webkit-datetime-edit {\n color: tokens.$ifxColorBaseBlack;\n }\n}\n\n::-webkit-datetime-edit {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n padding: 8px 16px;\n padding-bottom: 9px;\n transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n position: absolute;\n right: 15px;\n font-size: 19px;\n cursor: pointer;\n border-radius: 1px;\n &:focus-within {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n}\n\n.input__wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n background: tokens.$ifxColorBaseWhite;\n position: relative;\n &.large {\n height: 40px;\n }\n\n &.small {\n height: 36px;\n }\n\n &.disabled {\n & .icon__wrapper {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n}\n\n.icon__wrapper {\n position: absolute;\n right: 17px;\n padding: 2px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n z-index: 100;\n background-color: tokens.$ifxColorBaseWhite;\n line-height: 16px;\n\n & ifx-icon {\n vertical-align: middle;\n }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n \n@Component({\n tag: 'ifx-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n // formAssociated: true,\n})\n\nexport class DatePicker {\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n @Element() el: HTMLElement;\n @Prop() size: string = 's';\n @Prop() error: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Prop() value: string;\n @Prop() type: string = 'date'\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\n @Prop() autocomplete: string = 'on';\n\n @AttachInternals() internals: ElementInternals;\n\n @Event() ifxDate: EventEmitter;\n\n getDate(e) { \n const inputValue = e.target.value;\n const selectedDate = new Date(inputValue);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1; \n const year = selectedDate.getFullYear();\n\n \n \n if (!inputValue) {\n //this.internals.setFormValue(null);\n\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year});\n }\n return;\n }\n\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n input.classList.add('has-value');\n\n //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year})\n }\n }\n\n handleInputFocusOnIconClick() { \n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n if(input) { \n input.focus()\n }\n }\n\n getBrowser() {\n if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n return \"Chrome\";\n } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n return \"Opera\";\n } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n return \"IE\";\n } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n return \"Firefox\";\n } else {\n return \"unknown\";\n }\n }\n\n setFireFoxClasses() { \n const browser = this.getBrowser()\n const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n if(browser === 'Firefox') { \n input.classList.add('firefox__classes')\n } else if(input.classList.contains('firefox__classes')) { \n input.classList.remove('firefox__classes')\n }\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-date-picker', await framework)\n }\n this.setFireFoxClasses()\n }\n\n componentWillUpdate() { \n if (this.value) {\n this.getDate({ target: { value: this.value } });\n }\n }\n\n // formResetCallback() {\n // this.internals.setFormValue(null);\n // }\n\n render() {\n return (\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n <label class='label__wrapper' htmlFor={ this.inputId }>\n { this.label?.trim() }\n <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type={this.type}\n autocomplete={this.autocomplete}\n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error ? true : undefined}\n aria-label={this.ariaLabel}\n max={this.max}\n min={this.min}\n value={this.value}\n required={this.required}\n onChange={(e) => this.getDate(e)} />\n <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n </div>\n </div>\n\n { this.caption?.trim() && (\n <div class='caption__wrapper'>\n { this.caption.trim() }\n </div> \n )}\n </div>\n )\n }\n}\n\nlet datePickerId = 0;"],"version":3}
1	+ {"file":"ifx-date-picker.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\r\n\r\n.date__picker-container {\r\n display: flex;\r\n flex-direction: column;\r\n\r\n & .label__wrapper {\r\n color: tokens.$ifxColorBaseBlack;\r\n font: tokens.$ifxBodyBody03;\r\n\r\n & .asterisk { \r\n display: none;\r\n &.required {\r\n display: inline;\r\n margin-left: 4px;\r\n \r\n &.error {\r\n color: #CD002F;\r\n }\r\n }\r\n }\r\n\r\n }\r\n\r\n &.disabled {\r\n .label__wrapper {\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n &.error {\r\n .caption__wrapper {\r\n color: tokens.$ifxColorRed500;\r\n }\r\n }\r\n\r\n &.disabled {\r\n .caption__wrapper {\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n & .caption__wrapper {\r\n margin-top: tokens.$ifxSpace50;\r\n color: tokens.$ifxColorBaseBlack;\r\n font: tokens.$ifxBodyBody05;\r\n }\r\n}\r\n\r\n.date__picker-input {\r\n font-family: 'Source Sans 3';\r\n outline: none;\r\n width: 100%;\r\n cursor: pointer;\r\n border-radius: 1px;\r\n border: 1px solid tokens.$ifxColorEngineering400;\r\n height: 100%;\r\n\r\n &.firefox__classes {\r\n padding: 8px 16px;\r\n color: tokens.$ifxColorEngineering400;\r\n font-size: 16px;\r\n text-transform: uppercase;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 24px;\r\n cursor: pointer;\r\n\r\n &:disabled {\r\n color: tokens.$ifxColorBaseWhite;\r\n }\r\n }\r\n\r\n &:focus:not(.error, .success) {\r\n border-color: tokens.$ifxColorOcean500;\r\n }\r\n\r\n &:hover:not(:disabled, :focus, .error, .success) {\r\n border-color: tokens.$ifxColorEngineering500;\r\n }\r\n\r\n &:disabled {\r\n border-color: tokens.$ifxColorEngineering300;\r\n background-color: tokens.$ifxColorEngineering300;\r\n cursor: default;\r\n }\r\n\r\n &.error {\r\n border-color: tokens.$ifxColorRed500;\r\n }\r\n\r\n &.success:not(.error) {\r\n border-color: tokens.$ifxColorGreen500;\r\n }\r\n\r\n &::-webkit-datetime-edit-text {\r\n color: tokens.$ifxColorEngineering400;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 24px;\r\n }\r\n\r\n &:disabled::-webkit-datetime-edit,\r\n &:disabled::-webkit-datetime-edit-text {\r\n color: tokens.$ifxColorBaseWhite;\r\n }\r\n\r\n &.has-value::-webkit-datetime-edit-text {\r\n color: tokens.$ifxColorBaseBlack;\r\n }\r\n\r\n &.has-value::-webkit-datetime-edit {\r\n color: tokens.$ifxColorBaseBlack;\r\n }\r\n}\r\n\r\n::-webkit-datetime-edit {\r\n color: tokens.$ifxColorEngineering400;\r\n font-size: 16px;\r\n text-transform: uppercase;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 24px;\r\n}\r\n\r\n::-webkit-datetime-edit-fields-wrapper {\r\n padding: 8px 16px;\r\n padding-bottom: 9px;\r\n transform: translateY(1px);\r\n}\r\n\r\n::-webkit-inner-spin-button {\r\n display: none;\r\n}\r\n\r\n::-webkit-calendar-picker-indicator {\r\n position: absolute;\r\n right: 15px;\r\n font-size: 19px;\r\n cursor: pointer;\r\n border-radius: 1px;\r\n &:focus-within {\r\n outline: 2px solid tokens.$ifxColorOcean500;\r\n outline-offset: 2px;\r\n }\r\n}\r\n\r\n.input__wrapper {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n align-self: stretch;\r\n background: tokens.$ifxColorBaseWhite;\r\n position: relative;\r\n &.large {\r\n height: 40px;\r\n }\r\n\r\n &.small {\r\n height: 36px;\r\n }\r\n\r\n &.disabled {\r\n & .icon__wrapper {\r\n background-color: tokens.$ifxColorEngineering300;\r\n color: tokens.$ifxColorBaseWhite;\r\n }\r\n }\r\n}\r\n\r\n.icon__wrapper {\r\n position: absolute;\r\n right: 17px;\r\n padding: 2px;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n pointer-events: none;\r\n z-index: 100;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n line-height: 16px;\r\n\r\n & ifx-icon {\r\n vertical-align: middle;\r\n }\r\n}\r\n","import { AttachInternals } from '@stencil/core';\r\nimport { Component, Prop, h, Element, Event, EventEmitter } 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\n \r\n@Component({\r\n tag: 'ifx-date-picker',\r\n styleUrl: 'date-picker.scss',\r\n shadow: true,\r\n // formAssociated: true,\r\n})\r\n\r\nexport class DatePicker {\r\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\r\n\r\n @Element() el: HTMLElement;\r\n @Prop() size: string = 's';\r\n @Prop() error: boolean = false;\r\n @Prop() success: boolean = false;\r\n @Prop() disabled: boolean = false;\r\n @Prop() ariaLabel: string \| null;\r\n @Prop() value: string;\r\n @Prop() type: string = 'date'\r\n @Prop() max: string;\r\n @Prop() min: string;\r\n @Prop() required: boolean = false;\r\n @Prop() label: string;\r\n @Prop() caption: string;\r\n @Prop() autocomplete: string = 'on';\r\n\r\n @AttachInternals() internals: ElementInternals;\r\n\r\n @Event() ifxDate: EventEmitter;\r\n\r\n getDate(e) { \r\n const inputValue = e.target.value;\r\n const selectedDate = new Date(inputValue);\r\n const day = selectedDate.getDate();\r\n const month = selectedDate.getMonth() + 1; \r\n const year = selectedDate.getFullYear();\r\n\r\n \r\n \r\n if (!inputValue) {\r\n //this.internals.setFormValue(null);\r\n\r\n if(this.type === 'datetime-local') { \r\n const hours = selectedDate.getHours();\r\n const minutes = selectedDate.getMinutes();\r\n this.ifxDate.emit({day, month, year, hours, minutes});\r\n } else { \r\n this.ifxDate.emit({day, month, year});\r\n }\r\n return;\r\n }\r\n\r\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\r\n input.classList.add('has-value');\r\n\r\n //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\r\n if(this.type === 'datetime-local') { \r\n const hours = selectedDate.getHours();\r\n const minutes = selectedDate.getMinutes();\r\n this.ifxDate.emit({day, month, year, hours, minutes});\r\n } else { \r\n this.ifxDate.emit({day, month, year})\r\n }\r\n }\r\n\r\n handleInputFocusOnIconClick() { \r\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\r\n if(input) { \r\n input.focus()\r\n }\r\n }\r\n\r\n getBrowser() {\r\n if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\r\n return \"Chrome\";\r\n } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\r\n return \"Opera\";\r\n } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\r\n return \"IE\";\r\n } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\r\n return \"Firefox\";\r\n } else {\r\n return \"unknown\";\r\n }\r\n }\r\n\r\n setFireFoxClasses() { \r\n const browser = this.getBrowser()\r\n const input = this.el.shadowRoot.querySelector('.date__picker-input');\r\n\r\n if(browser === 'Firefox') { \r\n input.classList.add('firefox__classes')\r\n } else if(input.classList.contains('firefox__classes')) { \r\n input.classList.remove('firefox__classes')\r\n }\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-date-picker', await framework)\r\n }\r\n this.setFireFoxClasses()\r\n }\r\n\r\n componentWillUpdate() { \r\n if (this.value) {\r\n this.getDate({ target: { value: this.value } });\r\n }\r\n }\r\n\r\n // formResetCallback() {\r\n // this.internals.setFormValue(null);\r\n // }\r\n\r\n render() {\r\n return (\r\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\r\n\r\n <label class='label__wrapper' htmlFor={ this.inputId }>\r\n { this.label?.trim() }\r\n <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\r\n </label>\r\n\r\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\r\n <input\r\n type={this.type}\r\n autocomplete={this.autocomplete}\r\n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\r\n disabled={this.disabled ? true : undefined}\r\n aria-invalid={this.error ? true : undefined}\r\n aria-label={this.ariaLabel}\r\n max={this.max}\r\n min={this.min}\r\n value={this.value}\r\n required={this.required}\r\n onChange={(e) => this.getDate(e)} />\r\n <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\r\n <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\r\n </div>\r\n </div>\r\n\r\n { this.caption?.trim() && (\r\n <div class='caption__wrapper'>\r\n { this.caption.trim() }\r\n </div> \r\n )}\r\n </div>\r\n )\r\n }\r\n}\r\n\r\nlet datePickerId = 0;"],"version":3}

package/dist/components/ifx-download.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './index.js';
-import { d as defineCustomElement$2 } from './p-C12r4j5b.js';
+import { d as defineCustomElement$2 } from './p-BODyHBnq.js';
 const downloadCss = "";
@@ -18,7 +18,7 @@ const Download = /*@__PURE__*/ proxyCustomElement(class Download extends H {
         const fileName = `infineon-tokens.${this.tokens}`;
         const sourceFile = fileMap[this.tokens];
         const fileUrl = `https://raw.githubusercontent.com/Infineon/public-assets/main/ifx-tokens/${sourceFile}`;
-        return (h("ifx-link", { key: '51887d03944efc6448ef2c71288a16754bebf12f', onClick: (e) => {
+        return (h("ifx-link", { key: 'ac131e136730cd07388db72c9136586df6fecbdd', onClick: (e) => {
                 e.preventDefault();
                 fetch(fileUrl)
                     .then(res => res.blob())
@@ -28,7 +28,7 @@ const Download = /*@__PURE__*/ proxyCustomElement(class Download extends H {
                     link.download = fileName;
                     link.click();
                 });
-            }, href: fileUrl, download: fileName, class: "download__wrapper", size: "m", variant: "bold" }, h("slot", { key: '8b4c69297dcbf44cf7182e8db89758a4f3a1f981' })));
+            }, href: fileUrl, download: fileName, class: "download__wrapper", size: "m", variant: "bold" }, h("slot", { key: 'b7c2682a2d67dc561433c8a2eea1927d3370fba9' })));
     }
     static get style() { return downloadCss; }
 }, [257, "ifx-download", {

package/dist/components/ifx-download.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-download.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,EAAE;;MCOT,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,GAAA;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}"],"version":3}
1	+ {"file":"ifx-download.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,EAAE;;MCOT,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,GAAA;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}"],"version":3}

package/dist/components/ifx-dropdown-header.js CHANGED Viewed

@@ -9,7 +9,7 @@ const DropdownHeader = /*@__PURE__*/ proxyCustomElement(class DropdownHeader ext
         this.__attachShadow();
     }
     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' }))));
     }
     static get style() { return dropdownHeaderCss; }
 }, [257, "ifx-dropdown-header"]);

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

	@@ -1 +1 @@
1	- {"file":"ifx-dropdown-header.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,6WAA6W;;MCS1X,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;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;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}"],"version":3}
1	+ {"file":"ifx-dropdown-header.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,6WAA6W;;MCS1X,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;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;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}"],"version":3}

package/dist/components/ifx-dropdown-item.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$2 } from './p-BnjY2AJX.js';
 const dropdownItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.dropdown-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.dropdown-item:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.dropdown-item.hide{display:none}.dropdown-item span{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px;}.dropdown-item.small span{font-size:14px}.dropdown-item:hover{cursor:pointer;background-color:#EEEDED}.dropdown-item:active{background-color:#BFBBBB}.icon{margin-right:4px}";
@@ -29,7 +29,7 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
         };
         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 this; }
     static get style() { return dropdownItemCss; }

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

	@@ -1 +1 @@
1	- {"file":"ifx-dropdown-item.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,qlBAAqlB;;MCQhmB,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AANzB,IAAA,WAAA,GAAA;;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}
1	+ {"file":"ifx-dropdown-item.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,qlBAAqlB;;MCQhmB,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AANzB,IAAA,WAAA,GAAA;;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}

package/dist/components/ifx-dropdown-menu.js CHANGED Viewed

@@ -50,10 +50,10 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
             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 this; }
     static get style() { return dropdownMenuCss; }

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

	@@ -1 +1 @@
1	- {"file":"ifx-dropdown-menu.js","mappings":";;AAAA,MAAM,eAAe,GAAG,yeAAye;;MCQpf,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AANzB,IAAA,WAAA,GAAA;;;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}"],"version":3}
1	+ {"file":"ifx-dropdown-menu.js","mappings":";;AAAA,MAAM,eAAe,GAAG,yeAAye;;MCQpf,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AANzB,IAAA,WAAA,GAAA;;;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}"],"version":3}

package/dist/components/ifx-dropdown-separator.js CHANGED Viewed

@@ -9,7 +9,7 @@ const DropdownSeparator = /*@__PURE__*/ proxyCustomElement(class DropdownSeparat
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'cd362aec9c480b38bb21eb247c05f24ca2668990', class: 'dropdown-separator' }));
+        return (h("div", { key: '7468448e215e04290ad28644bfc7405ff3e92da6', class: 'dropdown-separator' }));
     }
     static get style() { return dropdownSeparatorCss; }
 }, [257, "ifx-dropdown-separator"]);

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

	@@ -1 +1 @@
1	- {"file":"ifx-dropdown-separator.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,0EAA0E;;MCS1F,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;IAC5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,CAAO;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}"],"version":3}
1	+ {"file":"ifx-dropdown-separator.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,0EAA0E;;MCS1F,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;IAC5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,CAAO;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}"],"version":3}

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './index.js';
-import { d as defineCustomElement$3 } from './p-R79iWjuc.js';
-import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$3 } from './p-DrBheHJU.js';
+import { d as defineCustomElement$2 } from './p-BnjY2AJX.js';
 const dropdownTriggerButtonCss = ":host{display:inline-block}.rotate{transition:transform 0.2s ease-in-out;transform:rotate(-180deg);margin-top:0em}.icon{margin-top:0em;transition:transform 0.2s ease-in-out}";
@@ -15,8 +15,8 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
         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' : ''}` })));
     }
     static get style() { return dropdownTriggerButtonCss; }
 }, [257, "ifx-dropdown-trigger-button", {

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

	@@ -1 +1 @@
1	- {"file":"ifx-dropdown-trigger-button.js","mappings":";;;;AAAA,MAAM,wBAAwB,GAAG,+KAA+K;;MCUnM,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AANzB,IAAA,WAAA,GAAA;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}"],"version":3}
1	+ {"file":"ifx-dropdown-trigger-button.js","mappings":";;;;AAAA,MAAM,wBAAwB,GAAG,+KAA+K;;MCUnM,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AANzB,IAAA,WAAA,GAAA;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}"],"version":3}