npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0 → 30.10.0--canary.1696.f6fc7149013229dfeecb984f52e464c01a339d3d.0 - Mend

@infineon/infineon-design-system-stencil 30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0 → 30.10.0--canary.1696.f6fc7149013229dfeecb984f52e464c01a339d3d.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 (819) hide show

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-35713bcf.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-68d90201.js';
 const cardCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:1px solid #EEEDED;border-radius:1px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card:has(.card-href:focus),.card:has(.card-href:hover){outline:none;border-color:#0A8276}.card:has(.card-href:focus) ::slotted(ifx-card-headline),.card:has(.card-href:hover) ::slotted(ifx-card-headline){color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card .card-href:focus{outline:none}";
 const IfxCardStyle0 = cardCss;
@@ -8,10 +8,14 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends H {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.noBtns = undefined;
         this.direction = 'vertical';
+        this.alignment = undefined;
+        this.noImg = undefined;
         this.href = "";
         this.internalHref = "";
         this.target = "_self";
+        this.AriaLabel = undefined;
     }
     setImgPosition(event) {
         this.alignment = event.detail;

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

	@@ -1 +1 @@
1	- {"file":"ifx-card.js","mappings":";;AAAA,MAAM,OAAO,GAAG,g2DAAg2D,CAAC;AACj3D,sBAAe,OAAO;;MCQT,IAAI~~;IANjB;;;;QASU~~,~~cAAS,GAA8B,~~UAAU,~~CAAC;QAGlD,SAAI,GAAW,~~EAAE~~,CAAC~~;~~QACjB~~,~~iBAAY,GAAW,~~EAAE~~,CAAA~~;~~QAC1B~~,~~WAAM,GAAW,~~OAAO,~~CAAC;KAqFlC;IAjFC,~~cAAc,CAAC,KAAK;QAClB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAA;KAC9B;IAED,yBAAyB;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;QACrD,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;QAErD,IAAI,CAAC,KAAK,EAAE;YACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACnB;;YAAM,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QAE1B,IAAI,CAAC,KAAK,EAAE;YACV,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACpB;;YAAM,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QAE3B,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC3B,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;SAC/B;;YAAM,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;KACtC;IAED,eAAe,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS;QACjC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAA;KAC9B;IAGD,iBAAiB;QACf,IAAI,CAAC,yBAAyB,EAAE,CAAA;KACjC;IAED,mBAAmB;QACjB,IAAI,CAAC,yBAAyB,EAAE,CAAA;KACjC;IAEH,MAAM;QACF,QACE,EAAC,IAAI,uDACH,0EAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EACpC;YACE,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE;YAC3B,IAAI,CAAC,SAAS;YACd,IAAI,CAAC,SAAS,EAAE,EAEpB,IAAI,EAAC,QAAQ,IAEV,IAAI,CAAC,SAAS,KAAK,YAAY;YAC9B,4DAAK,KAAK,EAAC,YAAY,IACrB,0DAAG,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,WAAW,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,IAClH,6DAAM,IAAI,EAAC,KAAK,GAAG,CACjB,EAEJ,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,0DAAG,KAAK,EAAE,cAAc,IAAI,CAAC,YAAY,GAAG,WAAW,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,IACrF,8DAAQ,CACN,EACJ,8DACE,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACF,EAEP,IAAI,CAAC,SAAS,KAAK,UAAU;YAC5B,4DAAK,KAAK,EAAC,UAAU,IACnB,0DAAG,KAAK,EAAE,uBAAuB,IAAI,CAAC,YAAY,GAAG,WAAW,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACnH,4DAAK,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,EAAE,EAAE,IACnD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,EAEN,4DAAK,KAAK,EAAC,YAAY,IACrB,8DAAQ,CACJ,CACJ,EAEJ,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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: 1px solid tokens.$ifxColorEngineering200;\n border-radius: 1px;\n //width: 22rem;\n width: 350px;\n height: auto;\n font-family: var(--ifx-font-family);\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';\n \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;\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 if (!image) {\n this.noImg = true;\n } else this.noImg = false;\n\n if (!links) {\n this.noBtns = true;\n } else this.noBtns = false;\n\n if (this.href.trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n\n componentWillLoad() {\n this.handleComponentAdjustment()\n }\n\n componentWillUpdate() {\n this.handleComponentAdjustment()\n }\n\nrender() {\n return (\n <Host>\n <div aria-label={this.AriaLabel} class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }\n role=\"region\">\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a class={`upper-body ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\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 class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref} target={this.target}>\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body'>\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper'>\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-card.js","mappings":";;AAAA,MAAM,OAAO,GAAG,g2DAAg2D,CAAC;AACj3D,sBAAe,OAAO;;MCQT,IAAI;;;;;;yBAGgC,UAAU;;;oBAGlC,EAAE;4BACO,EAAE;sBACT,OAAO;;;IAIhC,cAAc,CAAC,KAAK;QAClB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAA;KAC9B;IAED,yBAAyB;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;QACrD,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;QAErD,IAAI,CAAC,KAAK,EAAE;YACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACnB;;YAAM,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QAE1B,IAAI,CAAC,KAAK,EAAE;YACV,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACpB;;YAAM,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QAE3B,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC3B,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;SAC/B;;YAAM,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;KACtC;IAED,eAAe,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS;QACjC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAA;KAC9B;IAGD,iBAAiB;QACf,IAAI,CAAC,yBAAyB,EAAE,CAAA;KACjC;IAED,mBAAmB;QACjB,IAAI,CAAC,yBAAyB,EAAE,CAAA;KACjC;IAEH,MAAM;QACF,QACE,EAAC,IAAI,uDACH,0EAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EACpC;YACE,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE;YAC3B,IAAI,CAAC,SAAS;YACd,IAAI,CAAC,SAAS,EAAE,EAEpB,IAAI,EAAC,QAAQ,IAEV,IAAI,CAAC,SAAS,KAAK,YAAY;YAC9B,4DAAK,KAAK,EAAC,YAAY,IACrB,0DAAG,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,WAAW,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,IAClH,6DAAM,IAAI,EAAC,KAAK,GAAG,CACjB,EAEJ,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,0DAAG,KAAK,EAAE,cAAc,IAAI,CAAC,YAAY,GAAG,WAAW,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,IACrF,8DAAQ,CACN,EACJ,8DACE,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACF,EAEP,IAAI,CAAC,SAAS,KAAK,UAAU;YAC5B,4DAAK,KAAK,EAAC,UAAU,IACnB,0DAAG,KAAK,EAAE,uBAAuB,IAAI,CAAC,YAAY,GAAG,WAAW,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACnH,4DAAK,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,EAAE,EAAE,IACnD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,EAEN,4DAAK,KAAK,EAAC,YAAY,IACrB,8DAAQ,CACJ,CACJ,EAEJ,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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: 1px solid tokens.$ifxColorEngineering200;\n border-radius: 1px;\n //width: 22rem;\n width: 350px;\n height: auto;\n font-family: var(--ifx-font-family);\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';\n \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;\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 if (!image) {\n this.noImg = true;\n } else this.noImg = false;\n\n if (!links) {\n this.noBtns = true;\n } else this.noBtns = false;\n\n if (this.href.trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n\n componentWillLoad() {\n this.handleComponentAdjustment()\n }\n\n componentWillUpdate() {\n this.handleComponentAdjustment()\n }\n\nrender() {\n return (\n <Host>\n <div aria-label={this.AriaLabel} class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }\n role=\"region\">\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a class={`upper-body ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\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 class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref} target={this.target}>\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body'>\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper'>\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\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-eab00c46.js';
+import { C as Checkbox, d as defineCustomElement$1 } from './p-f0f583d5.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-529e994b.js';
+import { C as ChipItem, d as defineCustomElement$1 } from './p-23cdd5a7.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-d2a01d2b.js';
+import { C as Chip, d as defineCustomElement$1 } from './p-fa7943d7.js';
 const IfxChip = Chip;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-35713bcf.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-68d90201.js';
 const contentSwitcherItemCss = ".ifx-content-switcher-item{all:unset;height:36px;box-sizing:border-box;border-radius:9999px;border:3px solid transparent;padding:7px 20px;font-family:\"Source Sans 3\";font-weight:600;font-size:14px;line-height:20px;display:flex;justify-content:center;align-items:center;gap:8px;background-color:transparent}.ifx-content-switcher-item.selected{color:#0A8276;background-color:#FFFFFF;border:3px solid #0A8276}.ifx-content-switcher-item:hover{color:#08665C;background-color:#FFFFFF;border:3px solid #08665C;cursor:pointer}.ifx-content-switcher-item:active{color:#08665C;background-color:#FFFFFF;border:3px solid #06534B}.ifx-content-switcher-item:focus{color:#08665C;background-color:#FFFFFF;border:3px solid #08665C}";
 const IfxContentSwitcherItemStyle0 = contentSwitcherItemCss;
@@ -9,6 +9,7 @@ const ContentSwitcherItem = /*@__PURE__*/ proxyCustomElement(class ContentSwitch
         this.__registerHost();
         this.__attachShadow();
         this.selected = false;
+        this.value = undefined;
     }
     render() {
         return (h(Host, { key: '99244cbfde12465c294ba0ce760731ba6e88c8db' }, h("button", { key: '76e0009bcd1dc452964c03cb10e851321467cec2', class: 'ifx-content-switcher-item' + (this.selected ? ' selected' : '') }, h("slot", { key: '987a09faed55d3066f1b80740cdbf6b7de571496' }))));

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,6sBAA6sB,CAAC;AAC7uB,qCAAe,sBAAsB;;MCMxB,mBAAmB~~;IALhC;;;;QAMU~~,~~aAAQ,GAAY,~~KAAK,~~CAAC;KAYnC;IATC,~~MAAM;QACJ,QACE,EAAC,IAAI,uDACH,+DAAQ,KAAK,EAAE,2BAA2B,IAAI,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,IAC7E,8DAAa,CACN,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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: tokens.$ifxFontFamilyBody;\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,6sBAA6sB,CAAC;AAC7uB,qCAAe,sBAAsB;;MCMxB,mBAAmB;;;;;wBACF,KAAK;;;IAGjC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,+DAAQ,KAAK,EAAE,2BAA2B,IAAI,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,IAC7E,8DAAa,CACN,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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: tokens.$ifxFontFamilyBody;\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}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-35713bcf.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-68d90201.js';
 const contentSwitcherCss = ".ifx-content-switcher{background-color:#FFFFFF;border:1px solid #BFBBBB;border-radius:9999px;height:36px;width:fit-content;box-sizing:border-box;display:flex;flex-direction:row;align-items:center}.ifx-content-switcher ::slotted(ifx-content-switcher-item){position:relative}.ifx-content-switcher ::slotted(ifx-content-switcher-item:first-child){left:-1px;margin-right:-1px}.ifx-content-switcher ::slotted(ifx-content-switcher-item:last-child){right:-1px;margin-left:-1px}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider){width:1px;height:20px;background-color:#8D8786;margin:0px 1px;visibility:visible}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider.hidden){visibility:hidden}";
 const IfxContentSwitcherStyle0 = contentSwitcherCss;
@@ -9,11 +9,12 @@ const ContentSwitcher = /*@__PURE__*/ proxyCustomElement(class ContentSwitcher e
         this.__registerHost();
         this.__attachShadow();
         this.ifxChange = createEvent(this, "ifxChange", 7);
+        this.eventHandlers = new Map();
+        this.items = undefined;
         this.activeIndex = -1;
         this.hoverIndex = -1;
         this.focusIndex = -1;
         this.dividers = Array();
-        this.eventHandlers = new Map();
     }
     componentWillLoad() {
         this.items = Array.from(this.el.children);

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

	@@ -1 +1 @@
1	- {"file":"ifx-content-switcher.js","mappings":"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","names":[],"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';\n\nexport type ChangeEvent = { oldValue: string; newValue: string };\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 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 /\n Ensure that only one item is selected at a time.\n /\n ensureSingleSelectedItem() {\n this.items.forEach((item, index) => {\n if (item.hasAttribute('selected')) {\n if (this.activeIndex < 0) {\n this.selectItem(index);\n } else {\n item.removeAttribute('selected');\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":";;AAAA,MAAM,kBAAkB,GAAG,gsBAAgsB,CAAC;AAC5tB,iCAAe,kBAAkB;;MCQpB,eAAe;;;;;;QAYlB,kBAAa,GAAmD,IAAI,GAAG,EAAE,CAAC;;2BAR3D,CAAC,CAAC;0BACK,CAAC,CAAC;0BACF,CAAC,CAAC;wBAED,KAAK,EAAE;;IAMtC,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;QAC1C,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,wBAAwB,EAAE,CAAC;KACjC;IAED,oBAAoB;QAClB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;;;;IAKD,kBAAkB;QAChB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK;YAC7B,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACjC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBAC9C,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,8BAA8B,CAAC,CAAC;gBACtD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aAC7B;SACF,CAAC,CAAC;KACJ;;;;IAKD,iBAAiB;QACf,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK;YAC7B,MAAM,QAAQ,GAAG;gBACf,KAAK,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;gBACnC,UAAU,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC;gBAC/C,UAAU,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC;gBAChD,KAAK,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC;gBAC1C,IAAI,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC;aAC3C,CAAC;YAEF,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK;gBACjC,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;aAC/C,CAAC,CAAC;YAEH,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;SACxC,CAAC,CAAC;KACJ;;;;IAKD,oBAAoB;QAClB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,IAAI;YACxC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK;gBACjC,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;aAClD,CAAC,CAAC;SACJ,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;KAC5B;;;;IAKD,wBAAwB;QACtB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK;YAC7B,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;gBACjC,IAAI,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;oBACxB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;iBACxB;qBAAM;oBACL,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;iBAClC;aACF;SACF,CAAC,CAAC;KACJ;;;;;;IAOD,WAAW,CAAC,KAAa,EAAE,QAAiB;QAC1C,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;QACxC,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;KAClC;;;;;;IAOD,WAAW,CAAC,KAAa,EAAE,QAAiB;QAC1C,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;QACxC,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;KAClC;;;;;IAMD,oBAAoB,CAAC,SAAiB;QACpC,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACrC,IAAI,CAAC,uBAAuB,CAAC,SAAS,CAAC,CAAC;SACzC;QACD,IAAI,SAAS,GAAG,CAAC,EAAE;YACjB,IAAI,CAAC,uBAAuB,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;SAC7C;KACF;;;;;IAMD,uBAAuB,CAAC,YAAoB;QAC1C,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC;QACrJ,IAAI,CAAC,oBAAoB,CAAC,YAAY,EAAE,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC;KAC3E;;;;;;IAOD,oBAAoB,CAAC,YAAoB,EAAE,MAAe;QACxD,IAAI,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;YAC/B,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;SAChE;KACF;;;;;IAMD,UAAU,CAAC,SAAiB;QAC1B,IAAI,SAAS,KAAK,IAAI,CAAC,WAAW;YAAE,OAAO;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC;QAClC,IAAI,QAAQ,IAAI,CAAC,EAAE;YACjB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;SAClD;QAED,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;QAEvD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;QAC3G,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC;KACtC;;;;;;;;IASD,cAAc,CAAC,KAAa;QAC1B,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI;YAAE,OAAO,KAAK,CAAC,cAAc,EAAE,CAAC;QAC7D,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;KAC1E;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,OAAO,IAC5C,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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';\n\nexport type ChangeEvent = { oldValue: string; newValue: string };\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 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 /\n Ensure that only one item is selected at a time.\n /\n ensureSingleSelectedItem() {\n this.items.forEach((item, index) => {\n if (item.hasAttribute('selected')) {\n if (this.activeIndex < 0) {\n this.selectItem(index);\n } else {\n item.removeAttribute('selected');\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}

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

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-35713bcf.js';
-import { d as defineCustomElement$2 } from './p-eee401ca.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
+import { d as defineCustomElement$2 } from './p-7e430b83.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.disabled .label__wrapper{color:#575352}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#575352}.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: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:#575352;background-color:#EEEDED}.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.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:#EEEDED}.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}";
 const IfxDatePickerStyle0 = datePickerCss;
@@ -16,7 +16,13 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
         this.error = false;
         this.success = false;
         this.disabled = false;
+        this.AriaLabel = undefined;
+        this.value = undefined;
+        this.max = undefined;
+        this.min = undefined;
         this.required = false;
+        this.label = undefined;
+        this.caption = undefined;
     }
     getDate(e) {
         const inputValue = e.target.value;

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

	@@ -1 +1 @@
1	- {"file":"ifx-date-picker.js","mappings":"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","names":[],"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\n &.disabled {\n .label__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.error {\n .caption__wrapper {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled {\n .caption__wrapper {\n color: tokens.$ifxColorEngineering500;\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\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.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\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 &.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.$ifxColorEngineering200;\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';\n \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;\n @Prop() value: string;\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\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 if (!inputValue) {\n this.internals.setFormValue(null);\n this.ifxDate.emit({day, month, year});\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 this.ifxDate.emit({day, month, year})\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 componentDidLoad() { \n this.setFireFoxClasses()\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 </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type=\"date\"\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":[],"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\n &.disabled {\n .label__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.error {\n .caption__wrapper {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled {\n .caption__wrapper {\n color: tokens.$ifxColorEngineering500;\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\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.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\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 &.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.$ifxColorEngineering200;\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';\n \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;\n @Prop() value: string;\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\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 if (!inputValue) {\n this.internals.setFormValue(null);\n this.ifxDate.emit({day, month, year});\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 this.ifxDate.emit({day, month, year})\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 componentDidLoad() { \n this.setFireFoxClasses()\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 </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type=\"date\"\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}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-35713bcf.js';
+import { p as proxyCustomElement, H, h } from './p-68d90201.js';
 const dropdownHeaderCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.dropdown-header{display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid #EEEDED;font-family:var(--ifx-font-family)}.dropdown-header span{color:#575352;font-family:var(--ifx-font-family);font-size:14px;font-style:normal;font-weight:400;line-height:20px;}";
 const IfxDropdownHeaderStyle0 = dropdownHeaderCss;

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

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-35713bcf.js';
-import { d as defineCustomElement$2 } from './p-eee401ca.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
+import { d as defineCustomElement$2 } from './p-7e430b83.js';
 const dropdownItemCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, 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.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}";
 const IfxDropdownItemStyle0 = dropdownItemCss;
@@ -10,6 +10,7 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
         this.__registerHost();
         this.__attachShadow();
         this.ifxDropdownItem = createEvent(this, "ifxDropdownItem", 7);
+        this.icon = undefined;
         this.href = "";
         this.target = "_self";
         this.hide = false;

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

	@@ -1 +1 @@
1	- {"file":"ifx-dropdown-item.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,2hBAA2hB,CAAC;AACpjB,8BAAe,eAAe;;MCQjB,YAAY~~;IANzB;;;;;QAQU~~,~~SAAI,GAAW,~~EAAE~~,CAAA~~;~~QACjB~~,~~WAAM,GAAW,~~OAAO~~,CAAA~~;~~QACxB~~,~~SAAI,GAAY,~~KAAK~~,CAAC~~;~~QACrB~~,~~SAAI,GAAW,~~GAAG,~~CAAA;KAwB5B;IAnBC,~~cAAc,CAAC,KAAkB;QAC/B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;KAC1B;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;KAC/C;IAED,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC;QACzE,QACE,0EAAO,QAAQ,IAAE,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,KAC9I,IAAI,CAAC,IAAI,IAAI,iEAAU,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,EACjE,+DACE,8DAAQ,CACH,CACL,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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);\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}","// dropdown-item.tsx\nimport { 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 let hrefAttr = this.href ? { href: this.href, target: this.target } : {};\n return (\n <a {...hrefAttr} onClick={() => this.handleEventEmission()} class={`dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`}>\n {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n <span>\n <slot />\n </span>\n </a>\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-dropdown-item.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,2hBAA2hB,CAAC;AACpjB,8BAAe,eAAe;;MCQjB,YAAY;;;;;;;oBAEA,EAAE;sBACA,OAAO;oBACR,KAAK;oBACL,GAAG;;IAK3B,cAAc,CAAC,KAAkB;QAC/B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;KAC1B;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;KAC/C;IAED,MAAM;QACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC;QACzE,QACE,0EAAO,QAAQ,IAAE,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,KAC9I,IAAI,CAAC,IAAI,IAAI,iEAAU,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,EACjE,+DACE,8DAAQ,CACH,CACL,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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);\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}","// dropdown-item.tsx\nimport { 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 let hrefAttr = this.href ? { href: this.href, target: this.target } : {};\n return (\n <a {...hrefAttr} onClick={() => this.handleEventEmission()} class={`dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`}>\n {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n <span>\n <slot />\n </span>\n </a>\n );\n }\n}"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-35713bcf.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
 const dropdownMenuCss = ":host{position:relative;z-index:1000}.dropdown-menu{display:none;visibility:hidden;flex-direction:column;width:224px;max-height:289px;min-width:224px;overflow-y:auto;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.dropdown-menu.small{max-height:266px;max-width:186px;overflow-y:auto}.dropdown-menu.hideTopPadding{padding-top:0px}.dropdown-menu.show{display:flex;visibility:visible}";
 const IfxDropdownMenuStyle0 = 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,CAAC;AAClgB,8BAAe,eAAe;;MCQjB,YAAY~~;IANzB;;;;;;QAOU~~,~~WAAM,GAAY,~~KAAK~~,CAAC~~;~~QACxB~~,~~SAAI,GAAW,~~GAAG~~,CAAA~~;~~QACjB~~,~~mBAAc,GAAY,~~KAAK~~,CAAC~~;~~QAIhC~~,~~kBAAa,GAAiC,~~EAAE,~~CAAC;KAyD3D;IArDC,~~gBAAgB,CAAC,KAAkB;QACjC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;KACtC;IAGD,+BAA+B,CAAC,KAAkB;QAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;KAC5C;IAED,mBAAmB,CAAC,WAAmB;QACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAC3E,IAAI,YAAY,EAAE,QAAQ,CAAC;QAC3B,IAAI,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE,CAAA;QAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC3B,QAAQ,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,SAAS,CAAC;YAE9D,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE;gBAC9C,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;aACzC;iBAAM;gBACL,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;aACxC;SACF;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC9B;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAiC,CAAC;QAC/G,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;QAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;QAEnE,IAAI,WAAW,IAAI,cAAc,EAAE;YACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;;YAAM,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KACpC;IAGD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE;QACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE;QACzB,IAAI,CAAC,cAAc,GAAG,gBAAgB,GAAG,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,EAAE,IAElC,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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 0px;\n font-family: var(--ifx-font-family);\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}","// dropdown-menu.tsx\nimport { 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,CAAC;AAClgB,8BAAe,eAAe;;MCQjB,YAAY;;;;;;;sBACG,KAAK;oBACR,GAAG;8BACS,KAAK;6BAIe,EAAE;;IAIzD,gBAAgB,CAAC,KAAkB;QACjC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;KACtC;IAGD,+BAA+B,CAAC,KAAkB;QAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;KAC5C;IAED,mBAAmB,CAAC,WAAmB;QACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAC3E,IAAI,YAAY,EAAE,QAAQ,CAAC;QAC3B,IAAI,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE,CAAA;QAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC3B,QAAQ,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,SAAS,CAAC;YAE9D,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE;gBAC9C,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;aACzC;iBAAM;gBACL,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;aACxC;SACF;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC9B;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAiC,CAAC;QAC/G,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;QAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;QAEnE,IAAI,WAAW,IAAI,cAAc,EAAE;YACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;;YAAM,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KACpC;IAGD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE;QACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE;QACzB,IAAI,CAAC,cAAc,GAAG,gBAAgB,GAAG,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,EAAE,IAElC,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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 0px;\n font-family: var(--ifx-font-family);\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}","// dropdown-menu.tsx\nimport { 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}

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

@@ -1,4 +1,4 @@
-import { D as DropdownSeparator, d as defineCustomElement$1 } from './p-920ceb71.js';
+import { D as DropdownSeparator, d as defineCustomElement$1 } from './p-4b3befbf.js';
 const IfxDropdownSeparator = DropdownSeparator;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h } from './p-35713bcf.js';
-import { d as defineCustomElement$3 } from './p-af1f8464.js';
-import { d as defineCustomElement$2 } from './p-eee401ca.js';
+import { p as proxyCustomElement, H, h } from './p-68d90201.js';
+import { d as defineCustomElement$3 } from './p-d0a26bd5.js';
+import { d as defineCustomElement$2 } from './p-7e430b83.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}";
 const IfxDropdownTriggerButtonStyle0 = dropdownTriggerButtonCss;
@@ -12,7 +12,9 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
         this.__attachShadow();
         this.isOpen = false;
         this.theme = 'default';
+        this.variant = undefined;
         this.size = 'm';
+        this.disabled = undefined;
         this.hideArrow = false;
     }
     render() {

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,CAAC;AACjN,uCAAe,wBAAwB;;MCS1B,YAAY~~;IANzB;;;;QAOU~~,~~WAAM,GAAY,~~KAAK~~,CAAC~~;~~QAExB~~,~~UAAK,GAAqC,~~SAAS,~~CAAC;QAEpD,SAAI,GAAc,~~GAAG,~~CAAC;QAEtB,cAAS,GAAY,~~KAAK,~~CAAC;KAkBpC;IAhBC,~~MAAM;QACJ,QACE,mEACE,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,IAE/B,8DAAQ,EACP,CAAC,IAAI,CAAC,SAAS;YACd,iEAAU,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,EAAE,EAAE,GAAI,CAExE,EACd;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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-12\" 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,CAAC;AACjN,uCAAe,wBAAwB;;MCS1B,YAAY;;;;;sBACG,KAAK;qBAEmB,SAAS;;oBAEjC,GAAG;;yBAEA,KAAK;;IAElC,MAAM;QACJ,QACE,mEACE,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,IAE/B,8DAAQ,EACP,CAAC,IAAI,CAAC,SAAS;YACd,iEAAU,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,EAAE,EAAE,GAAI,CAExE,EACd;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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-12\" class={`icon${this.isOpen ? ' rotate' : ''}`} />\n }\n </ifx-button>\n )\n }\n}"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-35713bcf.js';
+import { p as proxyCustomElement, H, h } from './p-68d90201.js';
 const dropdownTriggerCss = ":host{display:inline-block;cursor:pointer}";
 const IfxDropdownTriggerStyle0 = dropdownTriggerCss;

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

	@@ -1 +1 @@
1	- {"file":"ifx-dropdown-trigger.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,4CAA4C,CAAC;AACxE,iCAAe,kBAAkB;;MCSpB,YAAY~~;IANzB;;;;QAOU~~,~~WAAM,GAAY,~~KAAK,~~CAAC;KAOjC;IALC,~~MAAM;QACJ,QACE,8DAAQ,EACT;KACF;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown/dropdown-trigger/dropdown-trigger.scss?tag=ifx-dropdown-trigger&encapsulation=shadow","src/components/dropdown/dropdown-trigger/dropdown-trigger.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n cursor: pointer;\n}","// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n tag: 'ifx-dropdown-trigger',\n styleUrl: 'dropdown-trigger.scss',\n shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n @Prop() isOpen: boolean = false;\n\n render() {\n return (\n <slot />\n )\n }\n}"],"version":3}
1	+ {"file":"ifx-dropdown-trigger.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,4CAA4C,CAAC;AACxE,iCAAe,kBAAkB;;MCSpB,YAAY;;;;;sBACG,KAAK;;IAE/B,MAAM;QACJ,QACE,8DAAQ,EACT;KACF;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown/dropdown-trigger/dropdown-trigger.scss?tag=ifx-dropdown-trigger&encapsulation=shadow","src/components/dropdown/dropdown-trigger/dropdown-trigger.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n cursor: pointer;\n}","// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n tag: 'ifx-dropdown-trigger',\n styleUrl: 'dropdown-trigger.scss',\n shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n @Prop() isOpen: boolean = false;\n\n render() {\n return (\n <slot />\n )\n }\n}"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-35713bcf.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
 import { c as createPopper } from './p-e459974a.js';
 const dropdownCss = ":host{display:inline-block}";
@@ -13,14 +13,14 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
         this.ifxClose = createEvent(this, "ifxClose", 7);
         this.ifxDropdown = createEvent(this, "ifxDropdown", 7);
         this.placement = 'bottom-start';
-        // isOpen prop
         this.defaultOpen = false;
-        // internal state for isOpen prop
         this.internalIsOpen = false;
-        // isOpen prop
         this.noAppendToBody = false;
+        this.disabled = undefined;
         this.noCloseOnOutsideClick = false;
         this.noCloseOnMenuClick = false;
+        this.trigger = undefined;
+        this.menu = undefined;
     }
     componentWillLoad() {
         //maybe not needed

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

	@@ -1 +1 @@
1	- {"file":"ifx-dropdown.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,6BAA6B,CAAC;AAClD,0BAAe,WAAW;;MC6Bb,QAAQ~~;IANrB;;;;;;;QAOU~~,~~cAAS,GAAc,~~cAAc,~~CAAC;;QAGtC~~,~~gBAAW,GAAY,~~KAAK,~~CAAC;;QAE5B,mBAAc,GAAY,~~KAAK~~,CAAC~~;;~~QAGjC~~,~~mBAAc,GAAY,~~KAAK~~,CAAC~~;~~QAUhC~~,~~0BAAqB,GAAY,~~KAAK,~~CAAC;QACvC,uBAAkB,GAAY,KAAK,CAAC;KAkK7C;IAtJC,~~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","names":[],"sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n}","//dropdown.tsx\nimport { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\nimport { createPopper } from '@popperjs/core';\n \n\nimport { IOpenable } from './IOpenable';\n\nexport type Placement =\n \| 'auto'\n \| 'auto-start'\n \| 'auto-end'\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end';\n\n@Component({\n tag: 'ifx-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true\n})\n\nexport class Dropdown {\n @Prop() placement: Placement = 'bottom-start';\n\n // isOpen prop\n @Prop() defaultOpen: boolean = false;\n // internal state for isOpen prop\n @State() internalIsOpen: boolean = false;\n\n // isOpen prop\n @Prop() noAppendToBody: boolean = false;\n\n // Custom events for opening and closing dropdown\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n @Event() ifxDropdown: EventEmitter;\n\n // determine if dropdown is disabled\n @Prop() disabled: boolean;\n\n @Prop() noCloseOnOutsideClick: boolean = false;\n @Prop() noCloseOnMenuClick: boolean = false;\n\n // Reference to host element\n @Element() el;\n // Dropdown trigger and menu\n @State() trigger: HTMLElement;\n @State() menu: HTMLElement\n // Popper instance for positioning\n popperInstance: any;\n\n\n\n componentWillLoad() {\n //maybe not needed\n this.updateSlotContent();\n this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\n }\n\n\n\n @Watch('defaultOpen')\n watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue && newValue !== this.internalIsOpen) {\n if (newValue) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n }\n\n @Watch('disabled')\n watchHandlerDisabled(newValue: boolean) {\n if (this.trigger) {\n (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\n }\n }\n\n\n @Listen('slotchange')\n watchHandlerSlot() {\n this.updateSlotContent();\n }\n\n\n\n // handling assignment of trigger and menu\n updateSlotContent() {\n // Get dropdown trigger. name has to start with ifx-dropdown-trigger\n this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');\n if (this.trigger) {\n (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = this.disabled;\n this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));\n this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));\n }\n // Remove menu if exists from body\n if (!this.noAppendToBody) {\n if (this.menu) {\n this.menu.remove();\n }\n // Get new menu and add to body\n this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n // event handler for closing dropdown on menu click\n document.body.append(this.menu);\n } else {\n this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n }\n this.menu.removeEventListener('click', this.menuClickHandler.bind(this));\n this.menu.addEventListener('click', this.menuClickHandler.bind(this));\n\n }\n\n menuClickHandler() {\n if (!this.noCloseOnMenuClick) {\n this.closeDropdown();\n }\n }\n\n triggerClickHandler() {\n if (!this.internalIsOpen) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n\n disconnectedCallback() {\n // Destroy popper instance if exists\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n // Remove menu if exists\n if (this.menu) {\n this.menu.remove();\n }\n }\n\n @Method()\n async isOpen() {\n return this.internalIsOpen;\n }\n\n @Method()\n async closeDropdown() {\n if (this.internalIsOpen) {\n this.internalIsOpen = false;\n // sets isOpen prop on trigger and menu\n (this.trigger as unknown as IOpenable).isOpen = false;\n (this.menu as unknown as IOpenable).isOpen = false;\n // Emit close event\n this.ifxClose.emit();\n }\n // Destroy popper instance if exists\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n @Method()\n async openDropdown() {\n if (!this.internalIsOpen && !this.disabled) {\n this.internalIsOpen = true;\n // sets isOpen prop on trigger and menu\n (this.trigger as unknown as IOpenable).isOpen = true;\n (this.menu as unknown as IOpenable).isOpen = true;\n // Create popper instance for positioning\n this.popperInstance = createPopper(\n this.el,\n this.menu,\n { placement: this.placement });\n\n this.ifxOpen.emit();\n }\n }\n\n //emitted by and listening to it from the dropdown menu right now\n // @Listen('ifxDropdownMenu')\n // handleDropdownMenuEvents(event: CustomEvent) {\n // this.ifxDropdown.emit(event.detail)\n // console.log('Selected item received in higher-level parent:');\n // }\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n // Close dropdown if outside click\n if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n this.closeDropdown();\n }\n }\n\n render() {\n return (\n <div aria-label='dropdown menu' class='dropdown'>\n <slot />\n </div>\n )\n }\n}"],"version":3}
1	+ {"file":"ifx-dropdown.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,6BAA6B,CAAC;AAClD,0BAAe,WAAW;;MC6Bb,QAAQ;;;;;;;;yBACY,cAAc;2BAGd,KAAK;8BAED,KAAK;8BAGN,KAAK;;qCAUE,KAAK;kCACR,KAAK;;;;IAY3C,iBAAiB;;QAEf,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KAChE;IAKD,kBAAkB,CAAC,QAAiB,EAAE,QAAiB;QACrD,IAAI,QAAQ,KAAK,QAAQ,IAAI,QAAQ,KAAK,IAAI,CAAC,cAAc,EAAE;YAC7D,IAAI,QAAQ,EAAE;gBACZ,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB;iBAAM;gBACL,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;SACF;KACF;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE;YACf,IAAI,CAAC,OAA4D,CAAC,QAAQ,GAAG,QAAQ,CAAC;SACxF;KACF;IAID,gBAAgB;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;;IAKD,iBAAiB;;QAEf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mDAAmD,CAAC,CAAC;QAC1F,IAAI,IAAI,CAAC,OAAO,EAAE;YACf,IAAI,CAAC,OAA4D,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5F,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAC/E,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;SAC7E;;QAED,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;aACpB;;YAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;;YAGvD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACjC;aAAM;YACL,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;SAExD;QACD,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACzE,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAEvE;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC5B,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACxB,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;aAAM;YACL,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;IAED,oBAAoB;;QAElB,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;;QAED,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;SACpB;KACF;IAGD,MAAM,MAAM;QACV,OAAO,IAAI,CAAC,cAAc,CAAC;KAC5B;IAGD,MAAM,aAAa;QACjB,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;;YAE3B,IAAI,CAAC,OAAgC,CAAC,MAAM,GAAG,KAAK,CAAC;YACrD,IAAI,CAAC,IAA6B,CAAC,MAAM,GAAG,KAAK,CAAC;;YAEnD,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;SACtB;;QAED,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;KACF;IAGD,MAAM,YAAY;QAChB,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC1C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;;YAE1B,IAAI,CAAC,OAAgC,CAAC,MAAM,GAAG,IAAI,CAAC;YACpD,IAAI,CAAC,IAA6B,CAAC,MAAM,GAAG,IAAI,CAAC;;YAElD,IAAI,CAAC,cAAc,GAAG,YAAY,CAChC,IAAI,CAAC,EAAE,EACP,IAAI,CAAC,IAAI,EACT,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;YAEjC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACrB;KACF;;;;;;;IAUD,kBAAkB,CAAC,KAAiB;QAClC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;;QAE3C,IAAI,CAAC,IAAI,CAAC,qBAAqB,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;YAC3F,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,eAAe,EAAC,KAAK,EAAC,UAAU,IAC9C,8DAAQ,CACJ,EACP;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n}","//dropdown.tsx\nimport { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\nimport { createPopper } from '@popperjs/core';\n \n\nimport { IOpenable } from './IOpenable';\n\nexport type Placement =\n \| 'auto'\n \| 'auto-start'\n \| 'auto-end'\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end';\n\n@Component({\n tag: 'ifx-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true\n})\n\nexport class Dropdown {\n @Prop() placement: Placement = 'bottom-start';\n\n // isOpen prop\n @Prop() defaultOpen: boolean = false;\n // internal state for isOpen prop\n @State() internalIsOpen: boolean = false;\n\n // isOpen prop\n @Prop() noAppendToBody: boolean = false;\n\n // Custom events for opening and closing dropdown\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n @Event() ifxDropdown: EventEmitter;\n\n // determine if dropdown is disabled\n @Prop() disabled: boolean;\n\n @Prop() noCloseOnOutsideClick: boolean = false;\n @Prop() noCloseOnMenuClick: boolean = false;\n\n // Reference to host element\n @Element() el;\n // Dropdown trigger and menu\n @State() trigger: HTMLElement;\n @State() menu: HTMLElement\n // Popper instance for positioning\n popperInstance: any;\n\n\n\n componentWillLoad() {\n //maybe not needed\n this.updateSlotContent();\n this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\n }\n\n\n\n @Watch('defaultOpen')\n watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue && newValue !== this.internalIsOpen) {\n if (newValue) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n }\n\n @Watch('disabled')\n watchHandlerDisabled(newValue: boolean) {\n if (this.trigger) {\n (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\n }\n }\n\n\n @Listen('slotchange')\n watchHandlerSlot() {\n this.updateSlotContent();\n }\n\n\n\n // handling assignment of trigger and menu\n updateSlotContent() {\n // Get dropdown trigger. name has to start with ifx-dropdown-trigger\n this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');\n if (this.trigger) {\n (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = this.disabled;\n this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));\n this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));\n }\n // Remove menu if exists from body\n if (!this.noAppendToBody) {\n if (this.menu) {\n this.menu.remove();\n }\n // Get new menu and add to body\n this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n // event handler for closing dropdown on menu click\n document.body.append(this.menu);\n } else {\n this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n }\n this.menu.removeEventListener('click', this.menuClickHandler.bind(this));\n this.menu.addEventListener('click', this.menuClickHandler.bind(this));\n\n }\n\n menuClickHandler() {\n if (!this.noCloseOnMenuClick) {\n this.closeDropdown();\n }\n }\n\n triggerClickHandler() {\n if (!this.internalIsOpen) {\n this.openDropdown();\n } else {\n this.closeDropdown();\n }\n }\n\n disconnectedCallback() {\n // Destroy popper instance if exists\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n // Remove menu if exists\n if (this.menu) {\n this.menu.remove();\n }\n }\n\n @Method()\n async isOpen() {\n return this.internalIsOpen;\n }\n\n @Method()\n async closeDropdown() {\n if (this.internalIsOpen) {\n this.internalIsOpen = false;\n // sets isOpen prop on trigger and menu\n (this.trigger as unknown as IOpenable).isOpen = false;\n (this.menu as unknown as IOpenable).isOpen = false;\n // Emit close event\n this.ifxClose.emit();\n }\n // Destroy popper instance if exists\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n @Method()\n async openDropdown() {\n if (!this.internalIsOpen && !this.disabled) {\n this.internalIsOpen = true;\n // sets isOpen prop on trigger and menu\n (this.trigger as unknown as IOpenable).isOpen = true;\n (this.menu as unknown as IOpenable).isOpen = true;\n // Create popper instance for positioning\n this.popperInstance = createPopper(\n this.el,\n this.menu,\n { placement: this.placement });\n\n this.ifxOpen.emit();\n }\n }\n\n //emitted by and listening to it from the dropdown menu right now\n // @Listen('ifxDropdownMenu')\n // handleDropdownMenuEvents(event: CustomEvent) {\n // this.ifxDropdown.emit(event.detail)\n // console.log('Selected item received in higher-level parent:');\n // }\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n // Close dropdown if outside click\n if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n this.closeDropdown();\n }\n }\n\n render() {\n return (\n <div aria-label='dropdown menu' class='dropdown'>\n <slot />\n </div>\n )\n }\n}"],"version":3}

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

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h } from './p-35713bcf.js';
-import { d as defineCustomElement$4 } from './p-c194f64d.js';
-import { d as defineCustomElement$3 } from './p-1ab9570f.js';
-import { d as defineCustomElement$2 } from './p-eee401ca.js';
+import { p as proxyCustomElement, H, h } from './p-68d90201.js';
+import { d as defineCustomElement$4 } from './p-094bb435.js';
+import { d as defineCustomElement$3 } from './p-b2439194.js';
+import { d as defineCustomElement$2 } from './p-7e430b83.js';
 const faqCss = ".container{padding-top:10px}";
 const IfxFaqStyle0 = faqCss;

package/dist/components/ifx-filter-accordion.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-35713bcf.js';
-import { d as defineCustomElement$3 } from './p-eee401ca.js';
-import { d as defineCustomElement$2 } from './p-9bb5a60b.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
+import { d as defineCustomElement$3 } from './p-7e430b83.js';
+import { d as defineCustomElement$2 } from './p-c4df8284.js';
 // utils.ts
 function getInitiallySelectedItems(el) {
@@ -25,10 +25,6 @@ const FilterAccordion = /*@__PURE__*/ proxyCustomElement(class FilterAccordion e
         this.__attachShadow();
         this.ifxFilterAccordionChange = createEvent(this, "ifxFilterAccordionChange", 7);
         this.initialized = false;
-        this.expanded = false;
-        this.count = 0;
-        this.totalItems = 0;
-        this.filterGroupName = "";
         this.handleCheckedChange = (event) => {
             const selectedItems = event.detail.selectedItems;
             this.count = selectedItems.length;
@@ -38,6 +34,11 @@ const FilterAccordion = /*@__PURE__*/ proxyCustomElement(class FilterAccordion e
             event.stopPropagation();
             this.expanded = !this.expanded;
         };
+        this.expanded = false;
+        this.maxVisibleItems = undefined;
+        this.count = 0;
+        this.totalItems = 0;
+        this.filterGroupName = "";
     }
     componentWillLoad() {
         this.el.addEventListener('ifxListUpdate', this.handleCheckedChange);

package/dist/components/ifx-filter-accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-filter-accordion.js","mappings":";;;;AAAA;SACgB,yBAAyB,CAAC,EAAe;IACtD,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;SAEtD,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,MAAM,CAAC;SACvD,GAAG,CAAC,KAAK;QACR,OAAO;YACL,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC;YAClC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC;YAClC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC;SACjC,CAAC;KACH,CAAC,CAAC;AACP;;ACZA,MAAM,kBAAkB,GAAG,s0BAAs0B,CAAC;AACl2B,iCAAe,kBAAkB;;MCOpB,eAAe~~;IAL5B;;;;;QAMU~~,gBAAW,GAAG,KAAK,CAAC;~~QAEnB~~,~~aAAQ,GAAY,KAAK,CAAC;QAE1B,UAAK,GAAW,CAAC,CAAC;QAClB,eAAU,GAAG,CAAC,CAAC;QAEhB,oBAAe,GAAG,EAAE,CAAC;QAkB/B,~~wBAAmB,GAAG,CAAC,KAAkB;YACrC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;YACjD,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC;YAClC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,aAAa,EAAE,CAAC,CAAC;SAC9F,CAAA;QAMD,oBAAe,GAAG,CAAC,KAAiB;YAClC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;SAChC,CAAA;~~KA+BF~~;~~IA1DC~~,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KAErE;IAEH,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,MAAM,aAAa,GAAG,yBAAyB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACzD,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC;YAClC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SACzB;KACF;IASC,mBAAmB;QACjB,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACxE;IAOD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACxD,4DAAK,KAAK,EAAE,UAAU,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IACpF,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC5D,4DAAK,KAAK,EAAC,MAAM,IACf,+DAAO,IAAI,CAAC,eAAe,CAAQ,EACnC,+EAAuB,IAAI,CAAC,KAAK,CAAwB,CACrD,EACN,iEACE,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,QAAQ,EACpC,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,eAAe,GACnB,EACZ,iEACE,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,EACpC,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,IAAI,CAAC,eAAe,GACnB,CACR,CACF,EACL,IAAI,CAAC,QAAQ;YACZ,4DAAK,KAAK,EAAC,4BAA4B,IACrC,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CAEJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/table-advanced-version/filter-type-group/utils.ts","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.scss?tag=ifx-filter-accordion&encapsulation=shadow","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.tsx"],"sourcesContent":["// utils.ts\nexport function getInitiallySelectedItems(el: HTMLElement) {\n return Array.from(el.querySelectorAll('ifx-list-entry'))\n\n .filter(entry => entry.getAttribute('value') === 'true')\n .map(entry => {\n return {\n label: entry.getAttribute('label'),\n value: entry.getAttribute('value'),\n type: entry.getAttribute('type')\n };\n });\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.header {\n display: flex;\n align-items: flex-start;\n align-self: stretch;\n cursor: pointer;\n border-left: 3px solid transparent;\n}\n\n.text-and-icon {\n display: flex;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200 tokens.$ifxSpace150 tokens.$ifxSpace250;\n align-items: center;\n gap: tokens.$ifxSpace200;\n flex: 1 0 0;\n}\n\n.header.expanded {\n border-left: 3px solid tokens.$ifxColorOcean500;\n}\n\n.text {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1 0 0;\n color: tokens.$ifxColorBaseBlack;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n}\n\n.hidden {\n display: none;\n}\n\n.accordion {\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n\n.filter-accordion-container {\n display: flex;\n padding: 8px 16px 16px 20px;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n align-self: stretch;\n border-left: 3px solid tokens.$ifxColorOcean500;\n}\n\n::slotted(ifx-filter-entry:nth-child(n+7)) {\n display: none;\n}\n\n.link {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.show-more ::slotted(ifx-filter-entry:nth-child(n+7)) {\n display: block;\n}\n\n.show-more .show-more-link {\n display: none;\n}","import { Component, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { getInitiallySelectedItems } from '../utils';\n\n@Component({\n tag: 'ifx-filter-accordion',\n styleUrl: 'filter-accordion.scss',\n shadow: true,\n})\nexport class FilterAccordion {\n private initialized = false;\n @Element() private el: HTMLElement;\n @State() expanded: boolean = false;\n @Prop() maxVisibleItems: number;\n @State() count: number = 0;\n @State() totalItems = 0;\n\n @Prop() filterGroupName = \"\";\n\n @Event() ifxFilterAccordionChange: EventEmitter;\n\n componentWillLoad() {\n this.el.addEventListener('ifxListUpdate', this.handleCheckedChange);\n\n }\n\ncomponentDidLoad() {\n if (!this.initialized) {\n const selectedItems = getInitiallySelectedItems(this.el);\n this.count = selectedItems.length;\n this.initialized = true; // Prevent further execution in future calls\n }\n}\n\n\nhandleCheckedChange = (event: CustomEvent) => {\n const selectedItems = event.detail.selectedItems;\n this.count = selectedItems.length;\n this.ifxFilterAccordionChange.emit({ filterGroupName: this.filterGroupName, selectedItems });\n }\n\n componentWillUnload() {\n this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);\n }\n\n toggleAccordion = (event: MouseEvent) => {\n event.stopPropagation();\n this.expanded = !this.expanded;\n }\n\n render() {\n return (\n <div class={`accordion ${this.expanded ? 'expanded' : ''}`}>\n <div class={`header ${this.expanded ? 'expanded' : ''}`} onClick={this.toggleAccordion} >\n <div class={`text-and-icon ${this.expanded ? 'expanded' : ''}`}>\n <div class=\"text\">\n <span>{this.filterGroupName}</span>\n <ifx-number-indicator>{this.count}</ifx-number-indicator>\n </div>\n <ifx-icon\n class={this.expanded ? '' : 'hidden'}\n icon=\"minus-16\"\n onClick={this.toggleAccordion}\n ></ifx-icon>\n <ifx-icon\n class={this.expanded ? 'hidden' : ''}\n icon=\"plus-16\"\n onClick={this.toggleAccordion}\n ></ifx-icon>\n </div>\n </div>\n {this.expanded &&\n <div class=\"filter-accordion-container\">\n <slot name=\"list\"></slot>\n </div>\n }\n </div>\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-filter-accordion.js","mappings":";;;;AAAA;SACgB,yBAAyB,CAAC,EAAe;IACtD,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;SAEtD,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,MAAM,CAAC;SACvD,GAAG,CAAC,KAAK;QACR,OAAO;YACL,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC;YAClC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC;YAClC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC;SACjC,CAAC;KACH,CAAC,CAAC;AACP;;ACZA,MAAM,kBAAkB,GAAG,s0BAAs0B,CAAC;AACl2B,iCAAe,kBAAkB;;MCOpB,eAAe;;;;;;QAClB,gBAAW,GAAG,KAAK,CAAC;QAyB9B,wBAAmB,GAAG,CAAC,KAAkB;YACrC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;YACjD,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC;YAClC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,aAAa,EAAE,CAAC,CAAC;SAC9F,CAAA;QAMD,oBAAe,GAAG,CAAC,KAAiB;YAClC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;SAChC,CAAA;wBApC4B,KAAK;;qBAET,CAAC;0BACJ,CAAC;+BAEG,EAAE;;IAI5B,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KAErE;IAEH,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,MAAM,aAAa,GAAG,yBAAyB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACzD,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC;YAClC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SACzB;KACF;IASC,mBAAmB;QACjB,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACxE;IAOD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACxD,4DAAK,KAAK,EAAE,UAAU,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IACpF,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC5D,4DAAK,KAAK,EAAC,MAAM,IACf,+DAAO,IAAI,CAAC,eAAe,CAAQ,EACnC,+EAAuB,IAAI,CAAC,KAAK,CAAwB,CACrD,EACN,iEACE,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,QAAQ,EACpC,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,eAAe,GACnB,EACZ,iEACE,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,EACpC,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,IAAI,CAAC,eAAe,GACnB,CACR,CACF,EACL,IAAI,CAAC,QAAQ;YACZ,4DAAK,KAAK,EAAC,4BAA4B,IACrC,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CAEJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/table-advanced-version/filter-type-group/utils.ts","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.scss?tag=ifx-filter-accordion&encapsulation=shadow","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.tsx"],"sourcesContent":["// utils.ts\nexport function getInitiallySelectedItems(el: HTMLElement) {\n return Array.from(el.querySelectorAll('ifx-list-entry'))\n\n .filter(entry => entry.getAttribute('value') === 'true')\n .map(entry => {\n return {\n label: entry.getAttribute('label'),\n value: entry.getAttribute('value'),\n type: entry.getAttribute('type')\n };\n });\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.header {\n display: flex;\n align-items: flex-start;\n align-self: stretch;\n cursor: pointer;\n border-left: 3px solid transparent;\n}\n\n.text-and-icon {\n display: flex;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200 tokens.$ifxSpace150 tokens.$ifxSpace250;\n align-items: center;\n gap: tokens.$ifxSpace200;\n flex: 1 0 0;\n}\n\n.header.expanded {\n border-left: 3px solid tokens.$ifxColorOcean500;\n}\n\n.text {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1 0 0;\n color: tokens.$ifxColorBaseBlack;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n}\n\n.hidden {\n display: none;\n}\n\n.accordion {\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n\n.filter-accordion-container {\n display: flex;\n padding: 8px 16px 16px 20px;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n align-self: stretch;\n border-left: 3px solid tokens.$ifxColorOcean500;\n}\n\n::slotted(ifx-filter-entry:nth-child(n+7)) {\n display: none;\n}\n\n.link {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.show-more ::slotted(ifx-filter-entry:nth-child(n+7)) {\n display: block;\n}\n\n.show-more .show-more-link {\n display: none;\n}","import { Component, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { getInitiallySelectedItems } from '../utils';\n\n@Component({\n tag: 'ifx-filter-accordion',\n styleUrl: 'filter-accordion.scss',\n shadow: true,\n})\nexport class FilterAccordion {\n private initialized = false;\n @Element() private el: HTMLElement;\n @State() expanded: boolean = false;\n @Prop() maxVisibleItems: number;\n @State() count: number = 0;\n @State() totalItems = 0;\n\n @Prop() filterGroupName = \"\";\n\n @Event() ifxFilterAccordionChange: EventEmitter;\n\n componentWillLoad() {\n this.el.addEventListener('ifxListUpdate', this.handleCheckedChange);\n\n }\n\ncomponentDidLoad() {\n if (!this.initialized) {\n const selectedItems = getInitiallySelectedItems(this.el);\n this.count = selectedItems.length;\n this.initialized = true; // Prevent further execution in future calls\n }\n}\n\n\nhandleCheckedChange = (event: CustomEvent) => {\n const selectedItems = event.detail.selectedItems;\n this.count = selectedItems.length;\n this.ifxFilterAccordionChange.emit({ filterGroupName: this.filterGroupName, selectedItems });\n }\n\n componentWillUnload() {\n this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);\n }\n\n toggleAccordion = (event: MouseEvent) => {\n event.stopPropagation();\n this.expanded = !this.expanded;\n }\n\n render() {\n return (\n <div class={`accordion ${this.expanded ? 'expanded' : ''}`}>\n <div class={`header ${this.expanded ? 'expanded' : ''}`} onClick={this.toggleAccordion} >\n <div class={`text-and-icon ${this.expanded ? 'expanded' : ''}`}>\n <div class=\"text\">\n <span>{this.filterGroupName}</span>\n <ifx-number-indicator>{this.count}</ifx-number-indicator>\n </div>\n <ifx-icon\n class={this.expanded ? '' : 'hidden'}\n icon=\"minus-16\"\n onClick={this.toggleAccordion}\n ></ifx-icon>\n <ifx-icon\n class={this.expanded ? 'hidden' : ''}\n icon=\"plus-16\"\n onClick={this.toggleAccordion}\n ></ifx-icon>\n </div>\n </div>\n {this.expanded &&\n <div class=\"filter-accordion-container\">\n <slot name=\"list\"></slot>\n </div>\n }\n </div>\n );\n }\n}"],"version":3}