@infineon/infineon-design-system-stencil 31.0.0--canary.1697.223df0ff1431a5398fd1261ed013c9dd2a89e7a0.0 → 31.0.0--canary.1640.e80c846ce332e4ddd95d97b8ad01c8da2d639e74.0

package/dist/cjs/ifx-accordion_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.js');
 
 const accordionCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}";
 const IfxAccordionStyle0 = accordionCss;
@@ -24,7 +24,7 @@ const Accordion = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'a69a6bea9d5347c0e1808d4635d458ce16614000', class: "accordion-wrapper" }, index.h("slot", { key: '389e9039f9272a88d95aca8b83efbb754736a5dd' })));
+        return (index.h("div", { key: '663e6aac2f3002d3898856b854dbfd96d9519a68', class: "accordion-wrapper" }, index.h("slot", { key: '0f54044bc1e0d2860ccd3096ee2711eb0a1cb927' })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -37,10 +37,10 @@ const IfxAccordionItemStyle0 = accordionItemCss;
 const IfxAccordionItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.ifxItemOpen = index.createEvent(this, "ifxItemOpen", 7);
-        this.ifxItemClose = index.createEvent(this, "ifxItemClose", 7);
+        this.ifxOpen = index.createEvent(this, "ifxOpen", 7);
+        this.ifxClose = index.createEvent(this, "ifxClose", 7);
         this.open = false;
-        this.AriaLive = 3;
+        this.AriaLevel = 3;
         this.internalOpen = false;
     }
     componentWillLoad() {
@@ -59,10 +59,10 @@ const IfxAccordionItem = class {
         this.internalOpen = !this.internalOpen;
         this.open = this.internalOpen;
         if (this.internalOpen) {
-            this.ifxItemOpen.emit({ isOpen: this.internalOpen });
+            this.ifxOpen.emit({ isOpen: this.internalOpen });
         }
         else {
-            this.ifxItemClose.emit({ isClosed: !this.internalOpen });
+            this.ifxClose.emit({ isClosed: !this.internalOpen });
         }
     }
     openAccordionItem() {
@@ -104,7 +104,7 @@ const IfxAccordionItem = class {
         }
     }
     render() {
-        return (index.h("div", { key: '1215772109c33556d626f4a7d40d6655684806a2', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, index.h("div", { key: '30e7771bae93c213d9f95126886d7552ebe03b94', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0' }, index.h("span", { key: '7da5f484c41f9f01dd7eec5092ec8ad82947d481', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLive), class: "accordion-icon" }, index.h("ifx-icon", { key: 'e64e478a66fd0dd2c3d3608294a6160aa4232952', icon: "chevron-down-12" })), index.h("span", { key: '7e1ff777da8ce68d6d5f1266512fbd05731169f5', id: "accordion-caption", class: "accordion-caption" }, this.caption)), index.h("div", { key: '144fa8393da592e1d928b51d7b4ad48d6b06a100', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, index.h("div", { key: '28702f514d9bd400499a49a3b1cd675f56d7fcad', class: "inner-content" }, index.h("slot", { key: 'e40109a457e4b1cc09c8234d5003361bb6c1c6fb', onSlotchange: (e) => this.handleSlotChange(e) })))));
+        return (index.h("div", { key: '90b42fe0fdc59bcb707cdbd345d457a651cadd34', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, index.h("div", { key: '691f906ddcf27924b85cb06a7cd1d469bed4b57d', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0' }, index.h("span", { key: '5a83c087659f68747176e3bc26d6653b4db9dcaf', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, index.h("ifx-icon", { key: '050e89939de98c6e22b6a0563ebc7213e7204b0f', icon: "chevron-down-12" })), index.h("span", { key: '960c0ba799af03b588ac53dd5ef4b3071e2f83f4', id: "accordion-caption", class: "accordion-caption" }, this.caption)), index.h("div", { key: '64a83fedce2c9b0b9a5c65a7fbcd3b76e156dd56', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, index.h("div", { key: '59033c70e0ac0990cd7bdf60e131d2091339b314', class: "inner-content" }, index.h("slot", { key: 'a73b3a5b932c9e71275dd4735142cd4fc222e404', onSlotchange: (e) => this.handleSlotChange(e) })))));
     }
     static get watchers() { return {
         "open": ["openChanged"]

package/dist/cjs/ifx-accordion_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-accordion.ifx-accordion-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,gNAAgN,CAAC;AACtO,2BAAe,YAAY;;MCOd,SAAS;IALtB;;QAOU,iBAAY,GAAY,KAAK,CAAC;KAuBvC;IAnBC,MAAM,UAAU,CAAC,KAAkB;QACjC,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;YACzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;gBACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;oBAC5D,WAAW,CAAC,IAAI,GAAG,KAAK,CAAC;iBAC1B;aACF;SACF;KACF;IAED,MAAM;QACJ,QACEA,kEAAK,KAAK,EAAC,mBAAmB,IAC5BA,oEAAQ,CACJ,EACN;KACH;;;;;;AChCH,MAAM,gBAAgB,GAAG,ioCAAioC,CAAC;AAC3pC,+BAAe,gBAAgB;;MCOlB,gBAAgB;IAL7B;;;;QASK,SAAI,GAAY,KAAK,CAAC;QACjB,aAAQ,GAAG,CAAC,CAAC;QACZ,iBAAY,GAAY,KAAK,CAAC;KAmGxC;IA7FC,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;KAC/B;IAED,gBAAgB;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAA;KACzB;IAED,kBAAkB;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAA;KACzB;IAKD,WAAW,CAAC,QAAiB;QAC3B,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;KAC9B;IAED,UAAU;QACR,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;QAE9B,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;SACtD;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;SAC1D;KACF;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;SACrE;aAAM;YACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;SACtC;KACF;IAED,gBAAgB,CAAC,CAAC;QAChB,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC;QAC7B,MAAM,KAAK,GAAG,WAAW,CAAC,aAAa,EAAE,CAAC;QAE1C,IAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACnB,KAAK,CAAC,OAAO,CAAC,IAAI;gBAChB,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,aAAa,EAAE,CAAC;oBACrD,KAAI,IAAI,QAAQ,IAAI,aAAa,EAAE;wBACjC,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;4BACjC,IAAI,IAAI,CAAC,YAAY,EAAE;gCACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;6BAC1B;yBACF;qBACF;iBACF,CAAC,CAAC;gBACH,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;aAC9E,CAAC,CAAC;SACJ;QAED,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;IAKD,aAAa,CAAC,EAAiB;QAC7B,QAAQ,EAAE,CAAC,GAAG;YACZ,KAAK,OAAO,CAAC;YACb,KAAK,GAAG;gBACN,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,IAAI,CAAC,UAAU,EAAE,CAAC;gBAClB,MAAM;SACT;KACF;IAGD,MAAM;QACJ,QACEA,kEAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,EAAE,EAAE,IAC7DA,kEAAK,IAAI,EAAC,QAAQ,mBAAgB,IAAI,CAAC,YAAY,mBAAgB,mBAAmB,EAAC,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAC,GAAG,IAC3JA,kFAAkB,MAAM,EAAC,IAAI,EAAC,SAAS,gBAAa,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAW,EAAE,KAAK,EAAC,gBAAgB,IACzGA,uEAAU,IAAI,EAAC,iBAAiB,GAAE,CAC7B,EACPA,mEAAM,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACxE,EACNA,kEAAK,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAC,QAAQ,qBAAiB,mBAAmB,IACxJA,kEAAK,KAAK,EAAC,eAAe,IACxBA,mEAAM,YAAY,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAI,CACnD,CACF,CACF,EACN;KACH;;;;;;;;;;","names":["h"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace100;\n  font-family: var(--ifx-font-family);\n\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n\n  @Listen('ifxItemOpen')\n  async onItemOpen(event: CustomEvent) {\n    if (this.autoCollapse) {\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.open)) {\n          itemElement.open = false;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n  border-radius: 3px;\n  overflow: hidden;\n  transition: all 0.3s;\n  font-family: var(--ifx-font-family);\n\n}\n\n.accordion-title:focus {\n  outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -4px;\n  bottom: -4px;\n  left: -4px;\n  right: -4px;\n  border-radius: 5px;\n  border: 2px solid tokens.$ifxColorOcean500;\n  box-sizing: border-box;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$ifxColorEngineering200;\n  color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace150;\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  cursor: pointer;\n  margin: 4px;\n}\n\n.accordion-caption {\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n  gap: tokens.$ifxSpace100;\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\n  line-height: 24px;\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: 400;\n}\n\n.inner-content {\n  background-color: tokens.$ifxColorBaseWhite;\n  padding: tokens.$ifxSpace300;\n  // white-space: pre-wrap;\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  align-self: stretch;\n\n  /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: inline-block;\n  transition: transform 0.3s;\n\n  &:hover {\n    color: tokens.$ifxColorOcean600;\n\n  }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Prop() caption: string;\n  @Prop({\n    mutable: true,\n  }) open: boolean = false;\n  @Prop() AriaLive = 3;\n  @State() internalOpen: boolean = false;\n  @Event() ifxItemOpen: EventEmitter;\n  @Event() ifxItemClose: EventEmitter;\n  private contentEl!: HTMLElement;\n\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.openAccordionItem()\n  }\n\n  componentDidUpdate() {\n    this.openAccordionItem()\n  }\n\n\n\n  @Watch('open')\n  openChanged(newValue: boolean) {\n    this.internalOpen = newValue;\n  }\n\n  toggleOpen() {\n    this.internalOpen = !this.internalOpen;\n    this.open = this.internalOpen;\n\n    if (this.internalOpen) {\n      this.ifxItemOpen.emit({ isOpen: this.internalOpen });\n    } else {\n      this.ifxItemClose.emit({ isClosed: !this.internalOpen });\n    }\n  }\n\n  openAccordionItem() {\n    if (this.internalOpen) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  handleSlotChange(e) {\n    const slotElement = e.target;\n    const nodes = slotElement.assignedNodes();\n    \n    if(nodes.length > 0) {\n      nodes.forEach(node => {\n        const observer = new MutationObserver((mutationsList, _) => {\n          for(let mutation of mutationsList) {\n            if (mutation.type === 'childList') {\n              if (this.internalOpen) {\n                this.openAccordionItem();\n              }\n            }\n          }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n      });\n    }\n\n    if (this.internalOpen) {\n      this.openAccordionItem();\n    }\n  }\n\n  \n\n  @Listen('keydown')\n  handleKeydown(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case 'Enter': // fallthrough\n      case ' ': // space\n        ev.preventDefault();\n        this.toggleOpen();\n        break;\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0'>\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLive) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-12\"/>\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n          <div class=\"inner-content\">\n            <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-accordion.ifx-accordion-item.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace100;\n  font-family: var(--ifx-font-family);\n\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n\n  @Listen('ifxOpen')\n  async onItemOpen(event: CustomEvent) {\n    if (this.autoCollapse) {\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.open)) {\n          itemElement.open = false;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n  border-radius: 3px;\n  overflow: hidden;\n  transition: all 0.3s;\n  font-family: var(--ifx-font-family);\n\n}\n\n.accordion-title:focus {\n  outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -4px;\n  bottom: -4px;\n  left: -4px;\n  right: -4px;\n  border-radius: 5px;\n  border: 2px solid tokens.$ifxColorOcean500;\n  box-sizing: border-box;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$ifxColorEngineering200;\n  color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace150;\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  cursor: pointer;\n  margin: 4px;\n}\n\n.accordion-caption {\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n  gap: tokens.$ifxSpace100;\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\n  line-height: 24px;\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: 400;\n}\n\n.inner-content {\n  background-color: tokens.$ifxColorBaseWhite;\n  padding: tokens.$ifxSpace300;\n  // white-space: pre-wrap;\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  align-self: stretch;\n\n  /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: inline-block;\n  transition: transform 0.3s;\n\n  &:hover {\n    color: tokens.$ifxColorOcean600;\n\n  }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Prop() caption: string;\n  @Prop({\n    mutable: true,\n  }) open: boolean = false;\n  @Prop() AriaLevel = 3;\n  @State() internalOpen: boolean = false;\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  private contentEl!: HTMLElement;\n\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.openAccordionItem()\n  }\n\n  componentDidUpdate() {\n    this.openAccordionItem()\n  }\n\n\n\n  @Watch('open')\n  openChanged(newValue: boolean) {\n    this.internalOpen = newValue;\n  }\n\n  toggleOpen() {\n    this.internalOpen = !this.internalOpen;\n    this.open = this.internalOpen;\n\n    if (this.internalOpen) {\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\n    } else {\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\n    }\n  }\n\n  openAccordionItem() {\n    if (this.internalOpen) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  handleSlotChange(e) {\n    const slotElement = e.target;\n    const nodes = slotElement.assignedNodes();\n    \n    if(nodes.length > 0) {\n      nodes.forEach(node => {\n        const observer = new MutationObserver((mutationsList, _) => {\n          for(let mutation of mutationsList) {\n            if (mutation.type === 'childList') {\n              if (this.internalOpen) {\n                this.openAccordionItem();\n              }\n            }\n          }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n      });\n    }\n\n    if (this.internalOpen) {\n      this.openAccordionItem();\n    }\n  }\n\n  \n\n  @Listen('keydown')\n  handleKeydown(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case 'Enter': // fallthrough\n      case ' ': // space\n        ev.preventDefault();\n        this.toggleOpen();\n        break;\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0'>\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-12\"/>\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n          <div class=\"inner-content\">\n            <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/cjs/ifx-alert.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.js');
 
 const alertCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}";
 const IfxAlertStyle0 = alertCss;

package/dist/cjs/ifx-badge.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.js');
 
 const badgeCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.badge__container{display:inline-flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;border:1px solid #EEEDED;background-color:#EEEDED;border-radius:100px;font-family:var(--ifx-font-family);font-size:0.875rem;line-height:1.25rem;font-weight:400;color:#1D1D1D}";
 const IfxBadgeStyle0 = badgeCss;

package/dist/cjs/ifx-basic-table.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.js');
 const main_esm = require('./main.esm-89f6d971.js');
 const index$1 = require('./index-5b0b9d4c.js');
 

package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.js');
 
 const breadcrumbItemLabelCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.breadcrumb-item-label-container{display:flex;align-items:center;gap:8px;text-decoration:none;color:#1D1D1D}.breadcrumb-item-label-container.margin{margin-left:16px}.breadcrumb-item-label-container ifx-icon:empty{display:none}.breadcrumb-item-label-container .label-icon-wrapper{display:inline-flex}.breadcrumb-item-label-container .menu-icon-wrapper{display:flex;justify-content:center;align-items:center;width:16px;height:16px}.breadcrumb-item-label-container .menu-icon-wrapper.hide{display:none}.breadcrumb-item-label-container .menu-icon-wrapper ifx-icon{transition:0.3s}.breadcrumb-item-label-container .menu-icon-wrapper.show ifx-icon{transition:0.3s;transform:rotate(180deg)}";
 const IfxBreadcrumbItemLabelStyle0 = breadcrumbItemLabelCss;
@@ -19,7 +19,7 @@ const BreadcrumbItemLabel = class {
         this.breadcrumbMenuIconWrapper.emit(menuWrapper);
     }
     render() {
-        return (index.h("a", { key: '16ddbc6dfce781d06c5e852423d1646426c6fb04', href: this.url, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, index.h("ifx-icon", { key: '6d62e4f854b7ea735c46a3849a92c09a8d222e54', icon: this.icon, "aria-hidden": "true" }), index.h("span", { key: '452dc64f08a93f4872f0f033b0b7016073818aab', class: "label-wrapper" }, index.h("slot", { key: '0a522ff8d13c3133367e62b50480af2dc970961d' })), index.h("span", { key: '7f5d3a5305ad187e312ae20a59610c9cfe4b13cf', class: "menu-icon-wrapper", "aria-hiden": "true" }, index.h("ifx-icon", { key: '07dc7f9912e3d87f286273e5758490f39df31d0d', icon: "chevron-down-12" }))));
+        return (index.h("a", { key: '856f06f931087b841e5f0350f1eb03e83b70e598', href: this.href, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, index.h("ifx-icon", { key: 'b67ee6634bea1f1626e073c1cf4238d12e0e8902', icon: this.icon, "aria-hidden": "true" }), index.h("span", { key: '270394a637cc6dd822d74d47dcc0bce51e9455c5', class: "label-wrapper" }, index.h("slot", { key: 'a2c15ce4581d3323d52fe931706ed86f3a777e08' })), index.h("span", { key: 'f013021b230b0a83a9fc1133d395f91c74cec4c4', class: "menu-icon-wrapper", "aria-hiden": "true" }, index.h("ifx-icon", { key: 'b22c149f7cb47f43054ba7e7a2ca669a94f2d8bc', icon: "chevron-down-12" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-breadcrumb-item-label.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,sBAAsB,GAAG,swBAAswB,CAAC;AACtyB,qCAAe,sBAAsB;;MCMxB,mBAAmB;IALhC;;;QAQU,WAAM,GAAW,OAAO,CAAA;KAuBjC;IAnBC,gBAAgB;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAA;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;QACjE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;KACjD;IAED,MAAM;QACJ,QACEA,gEAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,IACzFA,uEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY,EACzDA,mEAAM,KAAK,EAAC,eAAe,IACzBA,oEAAQ,CACH,EACRA,mEAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM,IAChDA,uEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,EACJ;KACH;;;;;;;","names":["h"],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n  display: flex;\n  align-items: center;\n  gap: tokens.$ifxSpace100;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n\n  &.margin {\n    margin-left: 16px;\n  }\n\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  & .label-icon-wrapper {\n    display: inline-flex;\n  }\n\n  & .menu-icon-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n\n    &.hide {\n      display: none;\n    }\n\n    & ifx-icon {\n      transition: .3s;\n    }\n\n    &.show {\n      & ifx-icon {\n        transition: .3s;\n        transform: rotate(180deg);\n      }\n    }\n  }\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb-item-label',\n  styleUrl: 'breadcrumb-item-label.scss',\n  shadow: true,\n})\nexport class BreadcrumbItemLabel {\n  @Prop() icon: string;\n  @Prop() url: string;\n  @Prop() target: string = \"_self\"\n  @Element() el;\n  @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n  componentDidLoad() { \n    const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n    const menuWrapper = container.querySelector('.menu-icon-wrapper')\n    this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n  }\n\n  render() {\n    return (\n      <a href={this.url} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\n        <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n        <span class=\"label-wrapper\">\n          <slot />\n        </span>\n       <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n        <ifx-icon icon=\"chevron-down-12\"></ifx-icon>\n       </span>\n      </a>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-breadcrumb-item-label.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,sBAAsB,GAAG,swBAAswB,CAAC;AACtyB,qCAAe,sBAAsB;;MCMxB,mBAAmB;IALhC;;;QAQU,WAAM,GAAW,OAAO,CAAA;KAuBjC;IAnBC,gBAAgB;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAA;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;QACjE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;KACjD;IAED,MAAM;QACJ,QACEA,gEAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,IAC1FA,uEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY,EACzDA,mEAAM,KAAK,EAAC,eAAe,IACzBA,oEAAQ,CACH,EACRA,mEAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM,IAChDA,uEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,EACJ;KACH;;;;;;;","names":["h"],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n  display: flex;\n  align-items: center;\n  gap: tokens.$ifxSpace100;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n\n  &.margin {\n    margin-left: 16px;\n  }\n\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  & .label-icon-wrapper {\n    display: inline-flex;\n  }\n\n  & .menu-icon-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n\n    &.hide {\n      display: none;\n    }\n\n    & ifx-icon {\n      transition: .3s;\n    }\n\n    &.show {\n      & ifx-icon {\n        transition: .3s;\n        transform: rotate(180deg);\n      }\n    }\n  }\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb-item-label',\n  styleUrl: 'breadcrumb-item-label.scss',\n  shadow: true,\n})\nexport class BreadcrumbItemLabel {\n  @Prop() icon: string;\n  @Prop() href: string;\n  @Prop() target: string = \"_self\"\n  @Element() el;\n  @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n  componentDidLoad() { \n    const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n    const menuWrapper = container.querySelector('.menu-icon-wrapper')\n    this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n  }\n\n  render() {\n    return (\n      <a href={this.href} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\n        <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n        <span class=\"label-wrapper\">\n          <slot />\n        </span>\n       <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n        <ifx-icon icon=\"chevron-down-12\"></ifx-icon>\n       </span>\n      </a>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ifx-breadcrumb-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.js');
 
 const breadcrumbItemCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.breadcrumb-parent{display:flex;flex-direction:row;align-items:center;padding:0px;gap:12px;min-height:24px;justify-content:center}.breadcrumb-parent:hover{cursor:pointer}.breadcrumb-parent .breadcrumb-wrapper{display:flex;flex-direction:row;align-items:center;padding:0px;gap:8px;position:relative}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu{display:none;position:absolute;top:20px}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu.open{display:block}.breadcrumb-parent .breadcrumb-wrapper a{text-decoration:none;color:#1D1D1D;font-family:var(--ifx-font-family);font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;display:flex;align-items:center;color:#1D1D1D;flex-direction:column;justify-content:center;padding:0px;border-bottom:1px solid #1D1D1D}.breadcrumb-parent .breadcrumb-divider{width:10px;height:16px;color:#EEEDED;line-height:13px;font-size:1.25rem;margin-right:12px}";
 const IfxBreadcrumbItemStyle0 = breadcrumbItemCss;

package/dist/cjs/ifx-breadcrumb.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.js');
 
 const breadcrumbCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.breadcrumb{list-style:none;padding:0px;margin:0px;display:flex;flex-direction:row;font-family:var(--ifx-font-family);font-size:0.875rem;align-items:flex-start}";
 const IfxBreadcrumbStyle0 = breadcrumbCss;
@@ -29,15 +29,15 @@ const Breadcrumb = class {
                     const breadcrumbItem = node;
                     const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');
                     const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');
-                    if (breadcrumbItemLabel.hasAttribute('url') && breadcrumbDropdown) {
-                        throw new Error('ifx-breadcrumb-item cannot have both a url and a dropdown menu.');
+                    if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {
+                        throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');
                     }
                 }
             }
         }
     }
     render() {
-        return (index.h("nav", { key: '82aec60bebf9a71d7cdcfc2916f91c0e36dee868', "aria-label": "Page navigation breadcrumb" }, index.h("ol", { key: '70bae75b26b5df4c509f16c0ab8e2b10333de8ac', class: "breadcrumb" }, index.h("slot", { key: '1cb28e3640f20319349b4f6d3cb1568508d3b1ba' }))));
+        return (index.h("nav", { key: '3d01af951d4a6a396545eb9cf26454cbe2b31ed0', "aria-label": "Page navigation breadcrumb" }, index.h("ol", { key: '95ae08a0de7099ecd7c3aa963c1bf9952918ecda', class: "breadcrumb" }, index.h("slot", { key: 'e9fed255fa08b28c8974498d329df69b1e92edf5' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-breadcrumb.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-breadcrumb.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,8QAA8Q,CAAC;AACrS,4BAAe,aAAa;;MCMf,UAAU;;;;IAGrB,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;KAC/C;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;SACR;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE;YACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC7C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC,CAAC;oBAC5D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;oBACtF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;oBAC7E,IAAI,mBAAmB,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,kBAAkB,EAAE;wBACjE,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC,CAAC;qBACpF;iBACF;aACF;SACF;KACF;IAED,MAAM;QACJ,QACEA,gFAAgB,4BAA4B,IAC1CA,iEAAI,KAAK,EAAC,YAAY,IACpBA,oEAAQ,CACL,CACD,EACN;KACH;;;;;;;","names":["h"],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.breadcrumb {\n  list-style: none;\n  padding: 0px;\n  margin: 0px;\n  display: flex;\n  flex-direction: row;\n  font-family: var(--ifx-font-family);\n  font-size: tokens.$ifxFontSizeS;\n  align-items: flex-start;\n  //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n//   color: tokens.$ifxColorEngineering300;\n//   margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true\n})\nexport class Breadcrumb {\n  @Element() el;\n\n  componentDidLoad() {\n    const element = this.el.shadowRoot.firstChild;\n    this.validateBreadcrumbItemStructure(element);\n  }\n\n  private validateBreadcrumbItemStructure(element: HTMLElement) {\n    if (!element) {\n      console.error('element not found');\n      return;\n    }\n  \n    const slot = element.querySelector('slot');\n    if(slot) { \n      const assignedNodes = slot.assignedNodes();\n  \n      for (let i = 0; i < assignedNodes.length; i++) {\n        const node = assignedNodes[i];\n        if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n          const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n          const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n          const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n          if (breadcrumbItemLabel.hasAttribute('url') && breadcrumbDropdown) {\n            throw new Error('ifx-breadcrumb-item cannot have both a url and a dropdown menu.');\n          }\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"Page navigation breadcrumb\">\n        <ol class=\"breadcrumb\">\n          <slot />\n        </ol>\n      </nav>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-breadcrumb.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,8QAA8Q,CAAC;AACrS,4BAAe,aAAa;;MCMf,UAAU;;;;IAGrB,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;KAC/C;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;SACR;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE;YACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC7C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC,CAAC;oBAC5D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;oBACtF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;oBAC7E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE;wBAClE,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAC;qBACrF;iBACF;aACF;SACF;KACF;IAED,MAAM;QACJ,QACEA,gFAAgB,4BAA4B,IAC1CA,iEAAI,KAAK,EAAC,YAAY,IACpBA,oEAAQ,CACL,CACD,EACN;KACH;;;;;;;","names":["h"],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.breadcrumb {\n  list-style: none;\n  padding: 0px;\n  margin: 0px;\n  display: flex;\n  flex-direction: row;\n  font-family: var(--ifx-font-family);\n  font-size: tokens.$ifxFontSizeS;\n  align-items: flex-start;\n  //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n//   color: tokens.$ifxColorEngineering300;\n//   margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true\n})\nexport class Breadcrumb {\n  @Element() el;\n\n  componentDidLoad() {\n    const element = this.el.shadowRoot.firstChild;\n    this.validateBreadcrumbItemStructure(element);\n  }\n\n  private validateBreadcrumbItemStructure(element: HTMLElement) {\n    if (!element) {\n      console.error('element not found');\n      return;\n    }\n  \n    const slot = element.querySelector('slot');\n    if(slot) { \n      const assignedNodes = slot.assignedNodes();\n  \n      for (let i = 0; i < assignedNodes.length; i++) {\n        const node = assignedNodes[i];\n        if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n          const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n          const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n          const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n          if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\n            throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\n          }\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"Page navigation breadcrumb\">\n        <ol class=\"breadcrumb\">\n          <slot />\n        </ol>\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ifx-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.js');
 const index$1 = require('./index-5b0b9d4c.js');
 
 const buttonCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{vertical-align:bottom;display:inline-flex;width:var(--bw, fit-content)}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0px 16px;gap:8px;color:#FFFFFF;font-weight:600;border-radius:1px;line-height:1.5rem;font-family:var(--ifx-font-family);font-style:normal;text-decoration:none;user-select:none;font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;width:var(--bw, fit-content)}.btn:not(.disabled){cursor:pointer}.btn.disabled{pointer-events:none}.btn-default{color:#FFFFFF;background-color:#0A8276}.btn-default:disabled,.btn-default.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-default{background-color:#FFFFFF;color:#0A8276;border:1px solid #0A8276}.btn-secondary-default:disabled,.btn-secondary-default.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-default{background-color:transparent;color:#0A8276}.btn-tertiary-default:disabled,.btn-tertiary-default.disabled{color:#BFBBBB;pointer-events:none}.btn-danger{color:#FFFFFF;background-color:#CD002F;border-color:#CD002F}.btn-danger:disabled,.btn-danger.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-danger{background-color:#FFFFFF;color:#CD002F;border:1px solid #CD002F}.btn-secondary-danger:disabled,.btn-secondary-danger.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-danger{background-color:transparent;color:#CD002F}.btn-tertiary-danger:disabled,.btn-tertiary-danger.disabled{background-color:#FFFFFF;color:#BFBBBB;pointer-events:none}.btn-inverse{color:#0A8276;background-color:#FFFFFF}.btn-inverse:disabled,.btn-inverse.disabled{opacity:1;background-color:#FFFFFF;color:#0A8276;pointer-events:none}.btn-secondary-inverse{color:#FFFFFF;border:1px solid #FFFFFF}.btn-secondary-inverse:disabled,.btn-secondary-inverse.disabled{border:1px solid #FFFFFF;color:#FFFFFF;pointer-events:none}.btn-tertiary-inverse{color:#FFFFFF}.btn-tertiary-inverse:disabled,.btn-tertiary-inverse.disabled{color:#FFFFFF;opacity:1;pointer-events:none}.btn ifx-icon:empty{display:none}.btn.btn-xs{font-size:0.875rem;height:32px;line-height:1rem}.btn.btn-s{font-size:0.875rem;height:36px;line-height:1.25rem}.btn.btn-l{font-size:1.25rem;height:48px;line-height:1.75rem}.btn.btn-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-default:not(:disabled,.disabled):hover{background-color:#08665C}.btn.btn-default:not(:disabled,.disabled):active,.btn.btn-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-default:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#08665C}.btn.btn-secondary-default:not(:disabled,.disabled):active,.btn.btn-secondary-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#9C216E}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#9C216E}.btn.btn-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-danger:not(:disabled,.disabled):hover{background-color:#A2001E}.btn.btn-danger:not(:disabled,.disabled):active,.btn.btn-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-secondary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-danger:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#A2001E}.btn.btn-secondary-danger:not(:disabled,.disabled):active,.btn.btn-secondary-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-inverse:not(:disabled,.disabled):hover{background-color:#EEEDED}.btn.btn-inverse:not(:disabled,.disabled):active,.btn.btn-inverse:not(:disabled,.disabled).active{background-color:#BFBBBB}.btn.btn-secondary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-secondary-inverse:not(:disabled,.disabled):hover{color:#0A8276;background-color:#EEEDED}.btn.btn-secondary-inverse:not(:disabled,.disabled):active,.btn.btn-secondary-inverse:not(:disabled,.disabled).active{color:#0A8276;background-color:#BFBBBB}.btn.btn-tertiary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):hover{color:#08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):active,.btn.btn-tertiary-default:not(:disabled,.disabled).active{color:#06534B}.btn.btn-tertiary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):hover{color:#A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):active,.btn.btn-tertiary-danger:not(:disabled,.disabled).active{color:#900021}.btn.btn-tertiary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-tertiary-inverse:not(:disabled,.disabled):hover{color:#EEEDED}.btn.btn-tertiary-inverse:not(:disabled,.disabled):active,.btn.btn-tertiary-inverse:not(:disabled,.disabled).active{color:#BFBBBB}";

package/dist/cjs/ifx-card-headline.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.js');
 
 const cardHeadlineCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{pointer-events:none}.card__headline-wrapper{padding-bottom:16px}.card__headline-wrapper.withDesc{padding-bottom:8px}.card-headline{margin-top:0;padding-top:0;font-family:var(--ifx-font-family);font-weight:600;font-size:1.5rem;line-height:2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.card-headline.horizontal{font-size:1.25rem;line-height:28px}";
 const IfxCardHeadlineStyle0 = cardHeadlineCss;

package/dist/cjs/ifx-card-image.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.js');
 
 const cardImageCss = ".card-image{width:100%;height:100%;vertical-align:bottom;object-fit:cover}";
 const IfxCardImageStyle0 = cardImageCss;

package/dist/cjs/ifx-card-links.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.js');
 
 const cardLinksCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.container{display:flex;align-items:center;gap:20px;flex-wrap:wrap;text-decoration:none;color:#1D1D1D;padding:0px 24px 24px 24px;word-wrap:break-word;overflow-wrap:anywhere;}.container:hover{cursor:initial}";
 const IfxCardLinksStyle0 = cardLinksCss;

package/dist/cjs/ifx-card-overline.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.js');
 
 const cardOverlineCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{pointer-events:none}.card-overline{font-size:1rem;font-weight:400;color:#575352;padding-bottom:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all}";
 const IfxCardOverlineStyle0 = cardOverlineCss;

package/dist/cjs/ifx-card-text.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.js');
 
 const cardTextCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{pointer-events:none}.card__text-wrapper{padding-bottom:0px}.card__text-wrapper.hasBtn{padding-bottom:16px}.card-text{line-height:1.5rem;font-size:1rem;font-weight:400;white-space:wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}";
 const IfxCardTextStyle0 = cardTextCss;

package/dist/cjs/ifx-card.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.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;

package/dist/cjs/ifx-checkbox.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.js');
 
 const checkboxCss = ":host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;font-family:var(--ifx-font-family)}.checkbox__container .checkbox__wrapper{box-sizing:border-box;display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0;align-self:flex-start}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#CD002F}.checkbox__container .checkbox__wrapper:focus-visible{border:1px solid #575352;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper:hover{background-color:#EEEDED;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked{background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked.error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:focus-visible{border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper.checked:hover{background-color:#08665C;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked.disabled{background:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:\"\";display:block;width:70%;height:2px;background-color:#08665C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;max-width:100%}.checkbox__container .label.label-m{font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#BFBBBB}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}";
 const IfxCheckboxStyle0 = checkboxCss;

package/dist/cjs/ifx-chip_3.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-68ed35ac.js');
+const index = require('./index-051c2b85.js');
 
 const chipCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block}.chip{position:relative}.chip__wrapper{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border:1px solid #BFBBBB;border-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip__wrapper:hover,.chip__wrapper:focus-visible{outline:none;border:1px solid #575352}.chip__wrapper:focus{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--small{padding:4px 12px}.chip__wrapper.chip__wrapper--large{padding:8px 16px}.chip__wrapper.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.chip__wrapper--selected{outline:3px solid #0A8276;outline-offset:-3px;color:#0A8276}.chip__wrapper.chip__wrapper--selected:hover,.chip__wrapper.chip__wrapper--selected:focus-visible{outline:3px solid #08665C;color:#08665C}.wrapper__label{display:inline-flex;align-items:center;gap:4px;font:400 0.875rem/1.25rem \"Source Sans 3\"}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem \"Source Sans 3\"}.wrapper__open-button{display:flex;align-items:center;transition:all 300ms ease}.wrapper__unselect-button{display:flex;align-items:center}.chip__dropdown{position:absolute;z-index:1;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;border-radius:1px;padding:8px 0;min-width:222px;background-color:#FFFFFF}";
 const IfxChipStyle0 = chipCss;
@@ -10,7 +10,7 @@ const IfxChipStyle0 = chipCss;
 const Chip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.ifxChipChange = index.createEvent(this, "ifxChipChange", 7);
+        this.ifxChange = index.createEvent(this, "ifxChange", 7);
         this.placeholder = '';
         this.size = 'large';
         this.value = undefined;
@@ -79,8 +79,8 @@ const Chip = class {
             }
             this.value = this.selectedOptions.map((option) => option.value);
         }
-        if (eventDetail.emitIfxChipChange) {
-            this.ifxChipChange.emit({
+        if (eventDetail.emitIfxChange) {
+            this.ifxChange.emit({
                 previousSelection: previousSelection,
                 currentSelection: this.selectedOptions,
                 name: this.placeholder
@@ -148,7 +148,7 @@ const Chip = class {
             const previousSelection = this.selectedOptions;
             this.selectedOptions = [];
             this.value = [];
-            this.ifxChipChange.emit({
+            this.ifxChange.emit({
                 previousSelection: previousSelection,
                 currentSelection: [],
                 name: this.placeholder
@@ -247,7 +247,7 @@ const Chip = class {
                 label: value,
                 selected: true,
                 key: generateKey(),
-                emitIfxChipChange: true
+                emitIfxChange: true
             }));
         }
         else if (typeof newValue === 'string') {
@@ -256,7 +256,7 @@ const Chip = class {
                     label: newValue,
                     selected: true,
                     key: generateKey(),
-                    emitIfxChipChange: true
+                    emitIfxChange: true
                 }];
         }
         this.syncChipState();
@@ -265,17 +265,17 @@ const Chip = class {
         this.syncSelectedOptionsWithProp(this.value);
     }
     render() {
-        return (index.h("div", { key: 'eaa08fdd3283cb90fa18cb810cd02681d0ae531d', class: 'chip' }, index.h("div", { key: 'd4dfd0e6cf40d1acc32426c56c7d3e1ff0f18f85', class: `chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}
+        return (index.h("div", { key: '8c18c26d395086b72e02bc4a93d0704edd066089', class: 'chip' }, index.h("div", { key: 'c7a091e32092cb523fba9b450a24c482670c066f', class: `chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}
                   chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}
                   ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}
-                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`, tabIndex: 0, onClick: !this.readOnly ? () => { this.handleWrapperClick(); } : undefined, role: 'combobox', "aria-label": this.AriaLabel, "aria-value": this.getSelectedOptions(), "aria-haspopup": !this.readOnly ? 'listbox' : undefined, "aria-expanded": !this.readOnly ? this.opened.toString() : undefined, "aria-controls": !this.readOnly ? 'dropdown' : undefined, "aria-readonly": this.readOnly ? 'true' : undefined, "aria-multiselectable": this.variant === 'multi' ? 'true' : undefined }, index.h("div", { key: '4aaef2ece1dcc35bea91ef726bd76ca4aa8026fb', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&
+                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`, tabIndex: 0, onClick: !this.readOnly ? () => { this.handleWrapperClick(); } : undefined, role: 'combobox', "aria-label": this.AriaLabel, "aria-value": this.getSelectedOptions(), "aria-haspopup": !this.readOnly ? 'listbox' : undefined, "aria-expanded": !this.readOnly ? this.opened.toString() : undefined, "aria-controls": !this.readOnly ? 'dropdown' : undefined, "aria-readonly": this.readOnly ? 'true' : undefined, "aria-multiselectable": this.variant === 'multi' ? 'true' : undefined }, index.h("div", { key: 'aff84b05d8f36b13c59463af3674150d075f0aa9', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&
             `${this.placeholder}:`, (this.selectedOptions.length !== 0) &&
-            index.h("div", { key: '2e9334d52fdb6dc76d3a57019e0ac767653b124b', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
-            index.h("ifx-number-indicator", { key: 'fbe0db0fd96005221685ff2681dd00d98ab9cecb' }, "  ", `+${this.selectedOptions.length - 2}`, " ")), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
-            index.h("div", { key: 'b7c0dd24b8409c2be6556b7add6befd631ad57b7', class: 'wrapper__open-button' }, index.h("ifx-icon", { key: 1, icon: `chevrondown16` })), (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&
-            index.h("div", { key: 'fbf84d682a54d14da73a18b2b52fab8b947c760c', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, index.h("ifx-icon", { key: 2, icon: `cross16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
-            index.h("div", { key: 'c21d50cf12f05d95464615449bc9cc70acdba040', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, index.h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
-            index.h("div", { key: 'c4b49602aaebdd8950646737df5fa19008870c2e', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, index.h("slot", { key: 'fb52f07c992f8f4c3de1ca7e0631bacd8ef7147c' }))));
+            index.h("div", { key: 'd6895d41ea10a0c0ae9e20181cc3e112e78f3c06', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
+            index.h("ifx-number-indicator", { key: 'af8892d23246826d39fc866b292042297f1688e7' }, "  ", `+${this.selectedOptions.length - 2}`, " ")), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
+            index.h("div", { key: '1995a9d622e80b5639af86214a7084427f7c0ad0', class: 'wrapper__open-button' }, index.h("ifx-icon", { key: 1, icon: `chevrondown16` })), (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&
+            index.h("div", { key: '20669e78ce405e4d323b7c61c3e4f70b1aded6a5', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, index.h("ifx-icon", { key: 2, icon: `cross16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
+            index.h("div", { key: 'b4eebcfbcd125f25cb55f94fbd03bab7202f62da', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, index.h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
+            index.h("div", { key: 'dbd65ac1f1b86541a908b370272dd1f2433043c4', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, index.h("slot", { key: '807a0107a2fe23f0d72ed3b0aed7659d7f1a3bb4' }))));
     }
     get chip() { return index.getElement(this); }
     static get watchers() { return {
@@ -322,8 +322,8 @@ const ChipItem = class {
     toggleItemSelection() {
         this.selected = !this.selected;
     }
-    emitIfxChipItemSelectEvent(emitIfxChipChange = true) {
-        this.ifxChipItemSelect.emit({ emitIfxChipChange: emitIfxChipChange,
+    emitIfxChipItemSelectEvent(emitIfxChange = true) {
+        this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,
             key: this.chipState.key,
             label: this.getItemLabel(),
             selected: this.selected,
@@ -347,9 +347,9 @@ const ChipItem = class {
         this.handleSelectedState();
     }
     render() {
-        return (index.h("div", { key: '493fe2e521f96fbe65792b4364c32a3010a4ae86', class: `chip-item chip-item--${this.chipState.size} 
+        return (index.h("div", { key: 'a4d81329a7a5bbbc71b66b0f02f32302e3edd6bd', class: `chip-item chip-item--${this.chipState.size} 
                     chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`, tabIndex: 0, onClick: () => { this.handleItemClick(); }, onKeyDown: (e) => { this.handleItemKeyDown(e); }, role: "option", "aria-selected": this.selected.toString() }, this.chipState.variant === 'multi' &&
-            index.h("ifx-checkbox", { key: '3f65da6457afbeca9e5e803f2569263b499fe839', checked: this.selected, tabIndex: -1, size: 's' }), index.h("div", { key: '02a710f81308419623960d15270f719c45f5fd11', class: 'chip-item__label' }, " ", index.h("slot", { key: 'ad971a10884b08cf3775f7296a44c7aff1769a0b' }), " "), index.h("div", { key: '2ba702249a7fc67ded010890181f5b35494df843', class: 'chip-item__selected-indicator' }, index.h("ifx-icon", { key: '887b43ff1b8c6539b01c0fc620f51d9bc04a05d9', icon: `check${this.chipState.size === 'small' ? '12' : '16'}` }, " "))));
+            index.h("ifx-checkbox", { key: '26865e6c41a95e1a92a0bbcb444ffd99b06b6f6b', checked: this.selected, tabIndex: -1, size: 's' }), index.h("div", { key: '8a48897962af2131d6f574d602b71e035b2f46a6', class: 'chip-item__label' }, " ", index.h("slot", { key: '2945084fa15c686cc6456761f4ca67370d6418b3' }), " "), index.h("div", { key: '94e48f99ce3629f73d2a82530626474a50d0d9c1', class: 'chip-item__selected-indicator' }, index.h("ifx-icon", { key: 'e9aaef0ae55766df51d8d293bb4405703dcdead8', icon: `check${this.chipState.size === 'small' ? '12' : '16'}` }, " "))));
     }
     get chipItem() { return index.getElement(this); }
     static get watchers() { return {
@@ -365,11 +365,9 @@ const Pagination = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ifxPageChange = index.createEvent(this, "ifxPageChange", 7);
-        this.ifxNextPage = index.createEvent(this, "ifxNextPage", 7);
-        this.ifxPrevPage = index.createEvent(this, "ifxPrevPage", 7);
         this.currentPage = 0;
         this.internalPage = 1;
-        this.internalItemsPerPage = 10;
+        this.itemsPerPage = 10;
         this.numberOfPages = [];
         this.total = 1;
         this.CLASS_DISABLED = "disabled";
@@ -379,10 +377,10 @@ const Pagination = class {
     }
     setItemsPerPage(e) {
         if (e.detail) {
-            this.internalItemsPerPage = parseInt(e.detail.label);
+            this.itemsPerPage = parseInt(e.detail.label);
         }
         else {
-            this.internalItemsPerPage = 10;
+            this.itemsPerPage = 10;
         }
     }
     componentDidLoad() {
@@ -395,8 +393,8 @@ const Pagination = class {
         if (isNaN(this.currentPage)) {
             this.currentPage = 1;
         }
-        const total = this.total <= this.internalItemsPerPage ? this.internalItemsPerPage : this.total;
-        const itemsPerPage = this.internalItemsPerPage;
+        const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;
+        const itemsPerPage = this.itemsPerPage;
         const totalPageNumber = Math.ceil(total / itemsPerPage);
         if (this.currentPage <= 0) {
             this.internalPage = 1;
@@ -430,7 +428,7 @@ const Pagination = class {
         let totalPages = this.numberOfPages.length;
         let prevPage = currActive === 0 ? null : currActive;
         let nextPage = currActive + 2 > totalPages ? null : currActive + 2;
-        let itemsPerPage = this.internalItemsPerPage;
+        let itemsPerPage = this.itemsPerPage;
         this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage });
     }
     addEventListenersToPageItems(listItems, paginationContainer) {
@@ -503,7 +501,7 @@ const Pagination = class {
         this.initPagination(paginationElement);
     }
     render() {
-        return (index.h("div", { key: '63115b82f6c296217cea8e9171826b043a88e43c', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, index.h("div", { key: '9f3f2177385ac55b83c2d47aaba9baf7de96ecd9', class: 'items__per-page-wrapper' }, index.h("div", { key: '88745ad121ae18baec9168e6c7ed222e6aa474bd', class: 'items__per-page-label' }, "Results per Page"), index.h("div", { key: '186ae13fc83cb33f64d323335754d47251816a8d', class: 'items__per-page-field' }, index.h("ifx-select", { key: '58fb8be210738d048f89d80f57763f10f37a192f', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: this.itemsPerPage }))), index.h("div", { key: '01bf334e708f14043c0f332279e382c414e15c05', class: 'items__total-wrapper' }, index.h("div", { key: '1dc6c04338f48d9a71374bd6164821da68073d25', class: 'page__numbers-wrapper' }, index.h("div", { key: 'af569e18ffffb0c20d66b4745b741ff709e5b318', class: "pagination" }, index.h("ifx-icon-button", { key: 'ffda1796d8a56d14030669b520ed39f8b0b0be39', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), index.h("ol", { key: '3bd7c3fd7b95f4a5ea4f78698367b0de79ef0f45' }, this.numberOfPages.map((item) => index.h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, index.h("a", { href: undefined }, item)))), index.h("ifx-icon-button", { key: '9d556fc2c16cd2f81cc230ea2573b9fea8f8dd8d', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
+        return (index.h("div", { key: '8c0511fb15d35448655931630d0327dcd15decef', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, index.h("div", { key: '837e788cead111913b8f5c7a85d69806464f9d99', class: 'items__per-page-wrapper' }, index.h("div", { key: 'b7d44991c21d686b054aa0468d8f00d723258307', class: 'items__per-page-label' }, "Results per Page"), index.h("div", { key: '3220f2aff5b6e3bd4277c1d38b2056bd4d2aa7cf', class: 'items__per-page-field' }, index.h("ifx-select", { key: '2fa70f09f22b9996e174a36f8422898e0915742f', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }))), index.h("div", { key: 'd70ff369ce0157f3697baeaecfcf2f51b360be3f', class: 'items__total-wrapper' }, index.h("div", { key: '276b0401d80e9ba2b0a71dca92b5d377ae07f87a', class: 'page__numbers-wrapper' }, index.h("div", { key: '1ba61a67594fb314f54c94f99585ba8beec8a4dd', class: "pagination" }, index.h("ifx-icon-button", { key: '1878ff1be80497db9b908bff31ff312713889676', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), index.h("ol", { key: '255a90ea782385a1eebb8e7addd38973f2e421a2' }, this.numberOfPages.map((item) => index.h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, index.h("a", { href: undefined }, item)))), index.h("ifx-icon-button", { key: 'd16a8059bf6f3fbb6d17c71bc15a5e8ca8aa816e', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
     }
     get el() { return index.getElement(this); }
 };