@infineon/infineon-design-system-stencil 30.10.0--canary.1696.b831179ac32ae02cdeaa1c4b607f326c7553bc3a.0 → 31.0.0--canary.1697.e5e5c4da838c535d0e5399b759dcee2325e38b03.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-af3b4f6c.js');
+const index = require('./index-e489135e.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;
@@ -39,7 +39,6 @@ const IfxAccordionItem = class {
         index.registerInstance(this, hostRef);
         this.ifxItemOpen = index.createEvent(this, "ifxItemOpen", 7);
         this.ifxItemClose = index.createEvent(this, "ifxItemClose", 7);
-        this.caption = undefined;
         this.open = false;
         this.AriaLive = 3;
         this.internalOpen = false;

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

@@ -1 +1 @@
-{"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('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('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}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-af3b4f6c.js');
+const index = require('./index-e489135e.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;
@@ -11,6 +11,9 @@ const Alert = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ifxClose = index.createEvent(this, "ifxClose", 7);
+        this.variant = 'primary';
+        this.closable = true;
+        this.AriaLive = 'assertive';
         this.alertTypeDescription = {
             "primary": 'Neutral alert',
             "success": 'Success Alert',
@@ -18,11 +21,6 @@ const Alert = class {
             "warning": 'Warning Alert',
             "info": 'Neutral alert',
         };
-        this.variant = 'primary';
-        this.icon = undefined;
-        this.closable = true;
-        this.AriaLive = 'assertive';
-        this.uniqueId = undefined;
     }
     handleClose() {
         this.ifxClose.emit();

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

@@ -1 +1 @@
-{"file":"ifx-alert.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,soFAAsoF,CAAC;AACxpF,uBAAe,QAAQ;;MCMV,KAAK;;;;QAQhB,yBAAoB,GAAG;YACrB,SAAS,EAAE,eAAe;YAC1B,SAAS,EAAE,eAAe;YAC1B,QAAQ,EAAE,aAAa;YACvB,SAAS,EAAE,eAAe;YAC1B,MAAM,EAAE,eAAe;SACxB,CAAC;uBAbuE,SAAS;;wBAGtD,IAAI;wBACb,WAAW;;;IAW9B,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,iBAAiB;QACf,QACEA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,oBAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAa,eAAe,IACtEA,sBAAU,IAAI,EAAC,UAAU,GAAG,CACrB,CACL,EACN;KACH;IAED,gBAAgB,CAAC,MAAM,GAAG,IAAI;QAC5B,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;KAClE;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;SAChD;KACF;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAC5BA,iBAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,eAAY,IAAI,CAAC,QAAQ,sBAAoB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAkB,8BAA8B,IAC/KA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,kBAAM,IAAI,EAAC,UAAU,GAAG,CACpB,EACNA,iBAAK,EAAE,EAAE,qBAAqB,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,2BAA2B,IAC9EA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,KAENA,iBAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9C,IAAI,CAAC,IAAI,KACRA,iBAAK,KAAK,EAAC,cAAc,IACvBA,sBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP,EACDA,iBAAK,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,cAAc,IAAI,CAAC,QAAQ,EAAE,IACvDA,qBAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,CACP,CAAC;KACH;;;;;;","names":["h"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.alert__info-wrapper {\n  display: flex;\n  padding: 16px 24px;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .info__text-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace100;\n    width: 100%;\n\n    & .info__headline-wrapper {\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    & .info__headline-wrapper,\n    .info__description-wrapper {\n      color: #1D1D1D;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n\n      ::slotted(p) {\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    & .info__description-wrapper {\n      font-weight: 400;\n    }\n  }\n\n  & .close-icon-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-start;\n    //min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n}\n\n.alert {\n  display: flex;\n  border: 1px solid tokens.$ifxColorOcean500;\n  border-radius: tokens.$ifxBorderRadius12;\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .close-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n\n  & .icon-wrapper {\n    position: relative;\n    min-width: tokens.$ifxSize600;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .alert-text {\n    font-size: 16px;\n    width: 100%;\n    padding: 12px 0px 12px 12px;\n    color: tokens.$ifxColorBaseBlack;\n\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    /* breaks text at arbitrary points when needed */\n  }\n\n  &.primary {\n    border: 1px solid tokens.$ifxColorOcean500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOcean500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.success {\n    border: 1px solid tokens.$ifxColorGreen500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorGreen500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.danger {\n    border: 1px solid tokens.$ifxColorRed500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorRed500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.warning {\n    border: 1px solid tokens.$ifxColorOrange500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOrange500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n}\n\n.close-icon-wrapper {\n  & ifx-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n  @Prop() icon: string;\n  @Event() ifxClose: EventEmitter;\n  @Prop() closable: boolean = true;\n  @Prop() AriaLive = 'assertive';\n  @State() uniqueId: string;\n\n  alertTypeDescription = {\n    \"primary\": 'Neutral alert',\n    \"success\": 'Success Alert',\n    \"danger\": 'Error Alert',\n    \"warning\": 'Warning Alert',\n    \"info\": 'Neutral alert',\n  };\n\n  handleClose() {\n    this.ifxClose.emit();\n  }\n\n  renderCloseButton() {\n    return (\n      <div class=\"close-icon-wrapper\">\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n          <ifx-icon icon=\"cross-16\" />\n        </button>\n      </div>\n    );\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('alert');\n    }\n  }\n\n  render() {\n    return this.variant === 'info' ? (\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n        <div class=\"info__text-wrapper\">\n          <div class=\"info__headline-wrapper\">\n            <slot name=\"headline\" />\n          </div>\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n            <slot name=\"desc\" />\n          </div>\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    ) : (\n      <div class={`alert ${this.variant}`} role=\"alert\">\n        {this.icon && (\n          <div class=\"icon-wrapper\">\n            <ifx-icon icon={this.icon} />\n          </div>\n        )}\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n          <slot />\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-alert.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,soFAAsoF,CAAC;AACxpF,uBAAe,QAAQ;;MCMV,KAAK;IALlB;;;QAMU,YAAO,GAA0D,SAAS,CAAC;QAG3E,aAAQ,GAAY,IAAI,CAAC;QACzB,aAAQ,GAAG,WAAW,CAAC;QAG/B,yBAAoB,GAAG;YACrB,SAAS,EAAE,eAAe;YAC1B,SAAS,EAAE,eAAe;YAC1B,QAAQ,EAAE,aAAa;YACvB,SAAS,EAAE,eAAe;YAC1B,MAAM,EAAE,eAAe;SACxB,CAAC;KAqDH;IAnDC,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,iBAAiB;QACf,QACEA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,oBAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAa,eAAe,IACtEA,sBAAU,IAAI,EAAC,UAAU,GAAG,CACrB,CACL,EACN;KACH;IAED,gBAAgB,CAAC,MAAM,GAAG,IAAI;QAC5B,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;KAClE;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;SAChD;KACF;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAC5BA,iBAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,eAAY,IAAI,CAAC,QAAQ,sBAAoB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAkB,8BAA8B,IAC/KA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,kBAAM,IAAI,EAAC,UAAU,GAAG,CACpB,EACNA,iBAAK,EAAE,EAAE,qBAAqB,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,2BAA2B,IAC9EA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,KAENA,iBAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9C,IAAI,CAAC,IAAI,KACRA,iBAAK,KAAK,EAAC,cAAc,IACvBA,sBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP,EACDA,iBAAK,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,cAAc,IAAI,CAAC,QAAQ,EAAE,IACvDA,qBAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,CACP,CAAC;KACH;;;;;;","names":["h"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.alert__info-wrapper {\n  display: flex;\n  padding: 16px 24px;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .info__text-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace100;\n    width: 100%;\n\n    & .info__headline-wrapper {\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    & .info__headline-wrapper,\n    .info__description-wrapper {\n      color: #1D1D1D;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n\n      ::slotted(p) {\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    & .info__description-wrapper {\n      font-weight: 400;\n    }\n  }\n\n  & .close-icon-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-start;\n    //min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n}\n\n.alert {\n  display: flex;\n  border: 1px solid tokens.$ifxColorOcean500;\n  border-radius: tokens.$ifxBorderRadius12;\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .close-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n\n  & .icon-wrapper {\n    position: relative;\n    min-width: tokens.$ifxSize600;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .alert-text {\n    font-size: 16px;\n    width: 100%;\n    padding: 12px 0px 12px 12px;\n    color: tokens.$ifxColorBaseBlack;\n\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    /* breaks text at arbitrary points when needed */\n  }\n\n  &.primary {\n    border: 1px solid tokens.$ifxColorOcean500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOcean500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.success {\n    border: 1px solid tokens.$ifxColorGreen500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorGreen500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.danger {\n    border: 1px solid tokens.$ifxColorRed500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorRed500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.warning {\n    border: 1px solid tokens.$ifxColorOrange500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOrange500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n}\n\n.close-icon-wrapper {\n  & ifx-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n  @Prop() icon: string;\n  @Event() ifxClose: EventEmitter;\n  @Prop() closable: boolean = true;\n  @Prop() AriaLive = 'assertive';\n  @State() uniqueId: string;\n\n  alertTypeDescription = {\n    \"primary\": 'Neutral alert',\n    \"success\": 'Success Alert',\n    \"danger\": 'Error Alert',\n    \"warning\": 'Warning Alert',\n    \"info\": 'Neutral alert',\n  };\n\n  handleClose() {\n    this.ifxClose.emit();\n  }\n\n  renderCloseButton() {\n    return (\n      <div class=\"close-icon-wrapper\">\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n          <ifx-icon icon=\"cross-16\" />\n        </button>\n      </div>\n    );\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('alert');\n    }\n  }\n\n  render() {\n    return this.variant === 'info' ? (\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n        <div class=\"info__text-wrapper\">\n          <div class=\"info__headline-wrapper\">\n            <slot name=\"headline\" />\n          </div>\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n            <slot name=\"desc\" />\n          </div>\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    ) : (\n      <div class={`alert ${this.variant}`} role=\"alert\">\n        {this.icon && (\n          <div class=\"icon-wrapper\">\n            <ifx-icon icon={this.icon} />\n          </div>\n        )}\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n          <slot />\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-af3b4f6c.js');
+const index = require('./index-e489135e.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-af3b4f6c.js');
+const index = require('./index-e489135e.js');
 const main_esm = require('./main.esm-89f6d971.js');
 const index$1 = require('./index-5b0b9d4c.js');
 
@@ -44,15 +44,11 @@ const IfxBasicTableStyle0 = tableCss;
 const Table = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.gridInitialized = false;
-        this.gridOptions = undefined;
-        this.cols = undefined;
-        this.rows = undefined;
         this.columnDefs = [];
         this.rowData = [];
         this.rowHeight = 'default';
         this.tableHeight = 'auto';
-        this.uniqueKey = undefined;
+        this.gridInitialized = false;
     }
     componentWillLoad() {
         this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;
@@ -186,7 +182,7 @@ const Table = class {
         return {};
     }
     render() {
-        return (index.h(index.Host, { key: '2bb06e43b3ff03850df67b2b45c0e95b1d90952f' }, index.h("div", { key: '85339f4b6231ae03fafdc9a5666b86792a613e60', id: "table-wrapper", class: this.getClassNames() }, index.h("div", { key: 'f2a3b10a1d94122b319a27c7b997ebe898405a9f', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (index.h(index.Host, { key: 'ff940c90b4fd4396cafd1cbfd13476e9225df362' }, index.h("div", { key: '2da95f49bbcd224297c91168c2c29f6178fa6b2b', id: "table-wrapper", class: this.getClassNames() }, index.h("div", { key: 'fb5cf41dd677de23d4fb5a7e897b7e1dcd8444f1', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"ifx-basic-table.entry.cjs.js","mappings":"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","names":["createGrid","classNames","h","Host"],"sources":["src/components/table-basic-version/customNoRowsOverlay.ts","src/components/table-basic-version/customLoadingOverlay.ts","src/components/table-basic-version/table.scss?tag=ifx-basic-table","src/components/table-basic-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomNoRowsOverlay implements ICellRendererComp {\n  eGui!: HTMLElement;\n\n  init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\n    this.eGui = document.createElement('div');\n    this.eGui.innerHTML = `\n            <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\n               ${params.noRowsMessageFunc()}\n            </div>\n        `;\n  }\n\n  getGui() {\n    return this.eGui;\n  }\n\n  refresh(_params: ICellRendererParams): boolean {\n    return false;\n  }\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomLoadingOverlay implements ICellRendererComp {\n  eGui!: HTMLElement;\n\n  init(_params: ICellRendererParams & { loadingMessage: string }) {\n    this.eGui = document.createElement('div');\n    this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\n<ifx-spinner></ifx-spinner>\n            </div>`;\n  }\n\n  getGui() {\n    return this.eGui;\n  }\n\n  refresh(_params: ICellRendererParams): boolean {\n    return false;\n  }\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n@import \"~ag-grid-community/styles/ag-grid.css\";\n// @import \"~ag-grid-community/styles/ag-theme-alpine.css\";\n\n// :host {\n//   --table-height: '200px';\n//   /* Default value */\n// } ag-ltr .ag-header-cell-resize\n\n\n.table-wrapper .ag-root-wrapper-body {\n  height: auto !important;\n  min-height: 100px !important;\n  min-width: 100px;\n}\n\n.ifx-ag-grid {\n  display: grid;\n  height: 100%;\n  width: 100%;\n  min-width: 100px;\n  padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n  outline: none !important;\n  border: none !important;\n  box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n  outline: none !important;\n}\n\n.ifx-ag-grid *:not(.ag-header-cell):focus {\n  outline: none;\n}\n\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n  content: '';\n  position: absolute;\n  right: 0;\n  top: calc(50% - 12px);\n  height: 24px; \n  width: 1px;\n  background-color: tokens.$ifxColorEngineering300; \n}\n\n.ag-overlay-loading-center {\n  border: none;\n  background: none;\n  border-radius: none;\n  box-shadow: none;\n}\n\n\n.ag-root-wrapper {\n  border: none;\n}\n\n.ag-header {\n  background-color: tokens.$ifxColorEngineering100;\n  border-bottom: none;\n\n  &.ag-header-active {\n    outline: none !important;\n    border-color: #0A8276 !important;\n  }\n}\n\n.ag-header-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n  gap: 4px;\n}\n\n\n.ag-header-cell-focus {\n  border: none !important;\n  outline: none !important;\n}\n\n.ag-header-cell-text {\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px;\n  color: tokens.$ifxColorBaseBlack;\n  font-family: var(--ifx-font-family);\n\n}\n\n.ag-row-focus {\n  background-color: inherit !important;\n  /* Reset the hover color to the row's original color */\n}\n\n.ag-row-hover {\n  background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\n  /* Reset the hover color to the row's original color */\n}\n\n\n.ag-cell-focus {\n  border: none !important;\n  outline: none !important;\n  background-color: inherit !important;\n}\n\n\n\n.ag-row {\n  background-color: tokens.$ifxColorBaseWhite;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  z-index: 1; //ensure the stacking order when used inside js frameworks\n}\n\n.ag-row-odd {\n  background-color: tokens.$ifxColorBaseWhite;\n}\n\n.ag-cell {\n  display: flex;\n  padding-left: 16px;\n  padding-right: 16px;\n  align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n  padding-left: 0px;\n  vertical-align: bottom;\n  line-height: 12px;\n}\n\n.unsort-icon-custom-color {\n  color: tokens.$ifxColorEngineering400;\n}","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-basic-table',\n  styleUrl: 'table.scss',\n  shadow: false // only works with shadowdom off because we are using an external library\n})\nexport class Table {\n  @State() gridOptions: GridOptions;\n  @Prop() cols: any[] | string;\n  @Prop() rows: any[] | string;\n  @State() columnDefs: any[] = [];\n  @State() rowData: any[] = [];\n  @Prop() rowHeight: string = 'default';\n  @Prop() tableHeight: string = 'auto';\n  @State() uniqueKey: string;\n  @Element() host: HTMLElement;\n  \n  private container: HTMLDivElement;\n  private gridApi: GridApi; \n  private gridInitialized = false;\n\n  componentWillLoad() {\n    this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\n    this.setColsAndRows(); //needed?\n    this.setGridOptions();\n  }\n\n  setGridOptions() {\n    this.gridOptions = {\n      rowHeight: this.rowHeight === 'default' ? 40 : 32,\n      headerHeight: 40,\n      defaultColDef: {\n        resizable: true,\n      },\n      suppressCellFocus: true,\n      enableCellTextSelection: true,\n      suppressDragLeaveHidesColumns: true,\n      suppressRowHoverHighlight: true,\n      onFirstDataRendered: this.onFirstDataRendered,\n      columnDefs: this.columnDefs,\n      rowData: this.rowData,\n      loadingOverlayComponent: CustomLoadingOverlay,\n      noRowsOverlayComponent: CustomNoRowsOverlay,\n      noRowsOverlayComponentParams: {\n        noRowsMessageFunc: () =>\n          'No rows found at: ' + new Date().toLocaleTimeString(),\n      },\n      icons: {\n        sortAscending: '<ifx-icon icon=\"arrowtriangleup16\"></ifx-icon>',\n        sortDescending: '<ifx-icon icon=\"arrowtriangledown16\"></ifx-icon>',\n        sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrowtrianglevertikal16\"></ifx-icon></a>',\n      },\n      rowDragManaged: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n      animateRows: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n    };\n  }\n\n  setColsAndRows() {\n    if (typeof this.rows === 'string' && typeof this.cols === 'string') {\n      try {\n        if(this.cols) {\n          this.columnDefs = JSON.parse(this.cols);\n        }\n        if(this.rows) {\n          this.rowData = JSON.parse(this.rows);\n        }\n      } catch (err) {\n        console.error('Failed to parse input:', err);\n      }\n    } else if ((Array.isArray(this.rows) || typeof this.rows === 'object') && (Array.isArray(this.cols) || typeof this.cols === 'object')) {\n      this.columnDefs = this.cols;\n      this.rowData = this.rows;\n    } else {\n      console.error('Unexpected value for cols and rows:', this.rows, this.cols);\n    }\n  }\n\n  getRowData() {\n    let rows: any[] = [];\n    if (typeof this.rows === 'string') {\n      try {\n        if(this.rows) {\n          rows = JSON.parse(this.rows);\n        }\n      } catch (err) {\n        console.error('Failed to parse input:', err);\n      }\n    } else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\n      rows = this.rows;\n    } else {\n      console.error('Unexpected value for rows: ', this.rows);\n    }\n\n    return rows;\n  }\n\n  getColData() {\n    let cols: any[] = [];\n\n    if (typeof this.cols === 'string') {\n      try {\n        if(this.cols) { \n          cols = JSON.parse(this.cols);\n        }\n      } catch (err) {\n        console.error('Failed to parse input:', err);\n      }\n    } else if (Array.isArray(this.cols) || typeof this.cols === 'object') {\n      cols = this.cols;\n    } else {\n      console.error('Unexpected value for cols: ', this.cols);\n    }\n    return cols;\n  }\n\n  onFirstDataRendered(params: FirstDataRenderedEvent) {\n    params.api.sizeColumnsToFit();\n  }\n\n  componentWillUpdate() {\n    this.setColsAndRows();\n    this.gridOptions.columnDefs = this.columnDefs;\n    this.gridOptions.rowData = this.rowData;\n    if (this.gridApi) {\n      this.gridApi.setGridOption('rowData', this.rowData);\n      this.gridApi.setGridOption('columnDefs', this.columnDefs);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.container && !this.gridInitialized) {\n      this.gridApi = createGrid(this.container, this.gridOptions);\n      if (this.gridApi) {\n        this.gridApi.sizeColumnsToFit({\n          defaultMinWidth: 100,\n        });\n        this.gridApi.setGridOption('columnDefs', this.getColData());\n        this.gridApi.setGridOption('rowData', this.getRowData());\n        this.gridInitialized = true; \n      }\n    }\n  }\n\n  getClassNames() {\n    return classNames(\n      this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n      'table-wrapper',\n    );\n  }\n\n  getTableStyle() {\n    if (this.tableHeight !== 'auto') {\n      return {\n        height: this.tableHeight,\n      };\n    }\n    return {};\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"table-wrapper\" class={this.getClassNames()}>\n          <div id={`ifxTable-${this.uniqueKey}`} class=\"ifx-ag-grid\" style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-basic-table.entry.cjs.js","mappings":";;;;;;;;MAEa,mBAAmB;IAG9B,IAAI,CAAC,MAAiE;QACpE,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG;;iBAET,MAAM,CAAC,iBAAiB,EAAE;;SAElC,CAAC;KACP;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IAED,OAAO,CAAC,OAA4B;QAClC,OAAO,KAAK,CAAC;KACd;;;MClBU,oBAAoB;IAG/B,IAAI,CAAC,OAAyD;QAC5D,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG;;mBAEP,CAAC;KACjB;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IAED,OAAO,CAAC,OAA4B;QAClC,OAAO,KAAK,CAAC;KACd;;;AClBH,MAAM,QAAQ,GAAG,krjOAAkrjO,CAAC;AACpsjO,4BAAe,QAAQ;;MCUV,KAAK;IALlB;;QASW,eAAU,GAAU,EAAE,CAAC;QACvB,YAAO,GAAU,EAAE,CAAC;QACrB,cAAS,GAAW,SAAS,CAAC;QAC9B,gBAAW,GAAW,MAAM,CAAC;QAM7B,oBAAe,GAAG,KAAK,CAAC;KAqJjC;IAnJC,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,UAAU,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACjE,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,cAAc;QACZ,IAAI,CAAC,WAAW,GAAG;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS,GAAG,EAAE,GAAG,EAAE;YACjD,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE;gBACb,SAAS,EAAE,IAAI;aAChB;YACD,iBAAiB,EAAE,IAAI;YACvB,uBAAuB,EAAE,IAAI;YAC7B,6BAA6B,EAAE,IAAI;YACnC,yBAAyB,EAAE,IAAI;YAC/B,mBAAmB,EAAE,IAAI,CAAC,mBAAmB;YAC7C,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,uBAAuB,EAAE,oBAAoB;YAC7C,sBAAsB,EAAE,mBAAmB;YAC3C,4BAA4B,EAAE;gBAC5B,iBAAiB,EAAE,MACjB,oBAAoB,GAAG,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;aACzD;YACD,KAAK,EAAE;gBACL,aAAa,EAAE,gDAAgD;gBAC/D,cAAc,EAAE,kDAAkD;gBAClE,UAAU,EAAE,8FAA8F;aAC3G;YACD,cAAc,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK;YACpF,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK;SAClF,CAAC;KACH;IAED,cAAc;QACZ,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YAClE,IAAI;gBACF,IAAG,IAAI,CAAC,IAAI,EAAE;oBACZ,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBACzC;gBACD,IAAG,IAAI,CAAC,IAAI,EAAE;oBACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBACtC;aACF;YAAC,OAAO,GAAG,EAAE;gBACZ,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,GAAG,CAAC,CAAC;aAC9C;SACF;aAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,MAAM,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,EAAE;YACrI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC;YAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;SAC1B;aAAM;YACL,OAAO,CAAC,KAAK,CAAC,qCAAqC,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;SAC5E;KACF;IAED,UAAU;QACR,IAAI,IAAI,GAAU,EAAE,CAAC;QACrB,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YACjC,IAAI;gBACF,IAAG,IAAI,CAAC,IAAI,EAAE;oBACZ,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBAC9B;aACF;YAAC,OAAO,GAAG,EAAE;gBACZ,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,GAAG,CAAC,CAAC;aAC9C;SACF;aAAM,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YACpE,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;SAClB;aAAM;YACL,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;SACzD;QAED,OAAO,IAAI,CAAC;KACb;IAED,UAAU;QACR,IAAI,IAAI,GAAU,EAAE,CAAC;QAErB,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YACjC,IAAI;gBACF,IAAG,IAAI,CAAC,IAAI,EAAE;oBACZ,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBAC9B;aACF;YAAC,OAAO,GAAG,EAAE;gBACZ,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,GAAG,CAAC,CAAC;aAC9C;SACF;aAAM,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YACpE,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;SAClB;aAAM;YACL,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;SACzD;QACD,OAAO,IAAI,CAAC;KACb;IAED,mBAAmB,CAAC,MAA8B;QAChD,MAAM,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;KAC/B;IAED,mBAAmB;QACjB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,WAAW,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QACxC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACpD,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;SAC3D;KACF;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YAC3C,IAAI,CAAC,OAAO,GAAGA,mBAAU,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YAC5D,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;oBAC5B,eAAe,EAAE,GAAG;iBACrB,CAAC,CAAC;gBACH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;gBAC5D,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;gBACzD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;aAC7B;SACF;KACF;IAED,aAAa;QACX,OAAOC,kBAAU,CACf,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,oCAAoC,EACnE,eAAe,CAChB,CAAC;KACH;IAED,aAAa;QACX,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,EAAE;YAC/B,OAAO;gBACL,MAAM,EAAE,IAAI,CAAC,WAAW;aACzB,CAAC;SACH;QACD,OAAO,EAAE,CAAC;KACX;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,uDACHD,kEAAK,EAAE,EAAC,eAAe,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IACjDA,kEAAK,EAAE,EAAE,YAAY,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,GAAQ,CAC9H,CACD,EACP;KACH;;;;;;;","names":["createGrid","classNames","h","Host"],"sources":["src/components/table-basic-version/customNoRowsOverlay.ts","src/components/table-basic-version/customLoadingOverlay.ts","src/components/table-basic-version/table.scss?tag=ifx-basic-table","src/components/table-basic-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomNoRowsOverlay implements ICellRendererComp {\n  eGui!: HTMLElement;\n\n  init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\n    this.eGui = document.createElement('div');\n    this.eGui.innerHTML = `\n            <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\n               ${params.noRowsMessageFunc()}\n            </div>\n        `;\n  }\n\n  getGui() {\n    return this.eGui;\n  }\n\n  refresh(_params: ICellRendererParams): boolean {\n    return false;\n  }\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomLoadingOverlay implements ICellRendererComp {\n  eGui!: HTMLElement;\n\n  init(_params: ICellRendererParams & { loadingMessage: string }) {\n    this.eGui = document.createElement('div');\n    this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\n<ifx-spinner></ifx-spinner>\n            </div>`;\n  }\n\n  getGui() {\n    return this.eGui;\n  }\n\n  refresh(_params: ICellRendererParams): boolean {\n    return false;\n  }\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n@import \"~ag-grid-community/styles/ag-grid.css\";\n// @import \"~ag-grid-community/styles/ag-theme-alpine.css\";\n\n// :host {\n//   --table-height: '200px';\n//   /* Default value */\n// } ag-ltr .ag-header-cell-resize\n\n\n.table-wrapper .ag-root-wrapper-body {\n  height: auto !important;\n  min-height: 100px !important;\n  min-width: 100px;\n}\n\n.ifx-ag-grid {\n  display: grid;\n  height: 100%;\n  width: 100%;\n  min-width: 100px;\n  padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n  outline: none !important;\n  border: none !important;\n  box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n  outline: none !important;\n}\n\n.ifx-ag-grid *:not(.ag-header-cell):focus {\n  outline: none;\n}\n\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n  content: '';\n  position: absolute;\n  right: 0;\n  top: calc(50% - 12px);\n  height: 24px; \n  width: 1px;\n  background-color: tokens.$ifxColorEngineering300; \n}\n\n.ag-overlay-loading-center {\n  border: none;\n  background: none;\n  border-radius: none;\n  box-shadow: none;\n}\n\n\n.ag-root-wrapper {\n  border: none;\n}\n\n.ag-header {\n  background-color: tokens.$ifxColorEngineering100;\n  border-bottom: none;\n\n  &.ag-header-active {\n    outline: none !important;\n    border-color: #0A8276 !important;\n  }\n}\n\n.ag-header-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n  gap: 4px;\n}\n\n\n.ag-header-cell-focus {\n  border: none !important;\n  outline: none !important;\n}\n\n.ag-header-cell-text {\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px;\n  color: tokens.$ifxColorBaseBlack;\n  font-family: var(--ifx-font-family);\n\n}\n\n.ag-row-focus {\n  background-color: inherit !important;\n  /* Reset the hover color to the row's original color */\n}\n\n.ag-row-hover {\n  background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\n  /* Reset the hover color to the row's original color */\n}\n\n\n.ag-cell-focus {\n  border: none !important;\n  outline: none !important;\n  background-color: inherit !important;\n}\n\n\n\n.ag-row {\n  background-color: tokens.$ifxColorBaseWhite;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  z-index: 1; //ensure the stacking order when used inside js frameworks\n}\n\n.ag-row-odd {\n  background-color: tokens.$ifxColorBaseWhite;\n}\n\n.ag-cell {\n  display: flex;\n  padding-left: 16px;\n  padding-right: 16px;\n  align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n  padding-left: 0px;\n  vertical-align: bottom;\n  line-height: 12px;\n}\n\n.unsort-icon-custom-color {\n  color: tokens.$ifxColorEngineering400;\n}","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-basic-table',\n  styleUrl: 'table.scss',\n  shadow: false // only works with shadowdom off because we are using an external library\n})\nexport class Table {\n  @State() gridOptions: GridOptions;\n  @Prop() cols: any[] | string;\n  @Prop() rows: any[] | string;\n  @State() columnDefs: any[] = [];\n  @State() rowData: any[] = [];\n  @Prop() rowHeight: string = 'default';\n  @Prop() tableHeight: string = 'auto';\n  @State() uniqueKey: string;\n  @Element() host: HTMLElement;\n  \n  private container: HTMLDivElement;\n  private gridApi: GridApi; \n  private gridInitialized = false;\n\n  componentWillLoad() {\n    this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\n    this.setColsAndRows(); //needed?\n    this.setGridOptions();\n  }\n\n  setGridOptions() {\n    this.gridOptions = {\n      rowHeight: this.rowHeight === 'default' ? 40 : 32,\n      headerHeight: 40,\n      defaultColDef: {\n        resizable: true,\n      },\n      suppressCellFocus: true,\n      enableCellTextSelection: true,\n      suppressDragLeaveHidesColumns: true,\n      suppressRowHoverHighlight: true,\n      onFirstDataRendered: this.onFirstDataRendered,\n      columnDefs: this.columnDefs,\n      rowData: this.rowData,\n      loadingOverlayComponent: CustomLoadingOverlay,\n      noRowsOverlayComponent: CustomNoRowsOverlay,\n      noRowsOverlayComponentParams: {\n        noRowsMessageFunc: () =>\n          'No rows found at: ' + new Date().toLocaleTimeString(),\n      },\n      icons: {\n        sortAscending: '<ifx-icon icon=\"arrowtriangleup16\"></ifx-icon>',\n        sortDescending: '<ifx-icon icon=\"arrowtriangledown16\"></ifx-icon>',\n        sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrowtrianglevertikal16\"></ifx-icon></a>',\n      },\n      rowDragManaged: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n      animateRows: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n    };\n  }\n\n  setColsAndRows() {\n    if (typeof this.rows === 'string' && typeof this.cols === 'string') {\n      try {\n        if(this.cols) {\n          this.columnDefs = JSON.parse(this.cols);\n        }\n        if(this.rows) {\n          this.rowData = JSON.parse(this.rows);\n        }\n      } catch (err) {\n        console.error('Failed to parse input:', err);\n      }\n    } else if ((Array.isArray(this.rows) || typeof this.rows === 'object') && (Array.isArray(this.cols) || typeof this.cols === 'object')) {\n      this.columnDefs = this.cols;\n      this.rowData = this.rows;\n    } else {\n      console.error('Unexpected value for cols and rows:', this.rows, this.cols);\n    }\n  }\n\n  getRowData() {\n    let rows: any[] = [];\n    if (typeof this.rows === 'string') {\n      try {\n        if(this.rows) {\n          rows = JSON.parse(this.rows);\n        }\n      } catch (err) {\n        console.error('Failed to parse input:', err);\n      }\n    } else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\n      rows = this.rows;\n    } else {\n      console.error('Unexpected value for rows: ', this.rows);\n    }\n\n    return rows;\n  }\n\n  getColData() {\n    let cols: any[] = [];\n\n    if (typeof this.cols === 'string') {\n      try {\n        if(this.cols) { \n          cols = JSON.parse(this.cols);\n        }\n      } catch (err) {\n        console.error('Failed to parse input:', err);\n      }\n    } else if (Array.isArray(this.cols) || typeof this.cols === 'object') {\n      cols = this.cols;\n    } else {\n      console.error('Unexpected value for cols: ', this.cols);\n    }\n    return cols;\n  }\n\n  onFirstDataRendered(params: FirstDataRenderedEvent) {\n    params.api.sizeColumnsToFit();\n  }\n\n  componentWillUpdate() {\n    this.setColsAndRows();\n    this.gridOptions.columnDefs = this.columnDefs;\n    this.gridOptions.rowData = this.rowData;\n    if (this.gridApi) {\n      this.gridApi.setGridOption('rowData', this.rowData);\n      this.gridApi.setGridOption('columnDefs', this.columnDefs);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.container && !this.gridInitialized) {\n      this.gridApi = createGrid(this.container, this.gridOptions);\n      if (this.gridApi) {\n        this.gridApi.sizeColumnsToFit({\n          defaultMinWidth: 100,\n        });\n        this.gridApi.setGridOption('columnDefs', this.getColData());\n        this.gridApi.setGridOption('rowData', this.getRowData());\n        this.gridInitialized = true; \n      }\n    }\n  }\n\n  getClassNames() {\n    return classNames(\n      this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n      'table-wrapper',\n    );\n  }\n\n  getTableStyle() {\n    if (this.tableHeight !== 'auto') {\n      return {\n        height: this.tableHeight,\n      };\n    }\n    return {};\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"table-wrapper\" class={this.getClassNames()}>\n          <div id={`ifxTable-${this.uniqueKey}`} class=\"ifx-ag-grid\" style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-af3b4f6c.js');
+const index = require('./index-e489135e.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;
@@ -11,8 +11,6 @@ const BreadcrumbItemLabel = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.breadcrumbMenuIconWrapper = index.createEvent(this, "breadcrumbMenuIconWrapper", 7);
-        this.icon = undefined;
-        this.url = undefined;
         this.target = "_self";
     }
     componentDidLoad() {

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;;;;;;sBAGL,OAAO;;IAIhC,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,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}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-af3b4f6c.js');
+const index = require('./index-e489135e.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;
@@ -11,7 +11,6 @@ const BreadcrumbItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.isLastItem = false;
-        this.uniqueId = undefined;
         this.hasDropdownMenu = false;
     }
     handleOutsideClick(event) {

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

@@ -1 +1 @@
-{"file":"ifx-breadcrumb-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,4+BAA4+B,CAAC;AACvgC,gCAAe,iBAAiB;;MCMnB,cAAc;;;0BAEM,KAAK;;+BAIA,KAAK;;IAGzC,kBAAkB,CAAC,KAAiB;QAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YAC3B,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;IAGD,aAAa,CAAC,EAAiB;QAC7B,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;YACxC,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;aAAM,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC9B,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;IAED,eAAe;QACb,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACxE,OAAO,YAAY,CAAA;KACpB;IAGD,yBAAyB,CAAC,KAA+B;QACvD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;KACpC;IAED,kBAAkB;QAChB,OAAO,IAAI,CAAC,cAAc,CAAC;KAC5B;IAED,eAAe,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS;QACjC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAA;KAC9B;IAED,iBAAiB;QACf,IAAG,IAAI,CAAC,eAAe,EAAE;YACvB,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;YAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAA;YAC7C,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;YACpD,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;SACpD;KACF;IAED,kBAAkB;QAChB,IAAG,IAAI,CAAC,eAAe,EAAE;YACvB,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;YAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAA;YAC7C,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;YACpD,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;SACpD;KACF;IAED,kBAAkB;QAChB,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QAC3C,OAAO,IAAI,CAAC,eAAe,IAAI,YAAY,IAAI,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;KACvF;IAED,cAAc;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAA;QACjG,IAAG,IAAI,CAAC,EAAE,KAAK,eAAe,CAAC,eAAe,CAAC,MAAM,GAAC,CAAC,CAAC,EAAE;YACxD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;;YAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KAChC;IAED,gBAAgB,CAAC,MAAM,GAAG,IAAI;QAC5B,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;KAClE;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;SAC9D;QACD,IAAI,CAAC,cAAc,EAAE,CAAA;KACtB;IAED,kBAAkB;QAChB,IAAI,CAAC,cAAc,EAAE,CAAA;KACtB;IAED,mBAAmB;QACjB,IAAI,CAAC,uBAAuB,EAAE,CAAA;KAC/B;IAED,uBAAuB;QACrB,MAAM,YAAY,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACxD,IAAG,YAAY,EAAE;YACf,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,YAAY,CAAC;SACvC;KACF;IAED,2BAA2B;QACzB,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAChE,OAAO,YAAY,CAAC;KACrB;IAED,gBAAgB;QACd,MAAM,YAAY,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;QAExD,IAAG,CAAC,IAAI,CAAC,eAAe,EAAE;YACxB,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAClD,IAAI,CAAC,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;SACzD;aAAM;YACL,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC;SAC5B;KACF;IAED,MAAM;QACJ,QACEA,iEAAI,KAAK,EAAC,mBAAmB,kBAAe,GAAG,IAAI,CAAC,UAAU,GAAG,MAAM,GAAG,EAAE,EAAE,IAC7EA,iEAAI,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,mBAAiB,IAAI,CAAC,QAAQ,mBAAgB,MAAM,gBAAY,sBAAsB,IACjNA,mEAAM,IAAI,EAAC,OAAO,GAAE,EACpBA,kEAAK,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,kBAAkB,EAAE,gBAAa,eAAe,IAChHA,oEAAQ,CACJ,CACH,EACJ,CAAC,IAAI,CAAC,UAAU,IAAIA,mEAAM,KAAK,EAAC,oBAAoB,iBAAa,MAAM,QAAS,CAC9E,EACL;KACH;;;;;;;","names":["h"],"sources":["src/components/breadcrumb/breadcrumb-item.scss?tag=ifx-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-parent {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px;\n  gap: tokens.$ifxSpace150;\n  min-height: tokens.$ifxSize300;\n  justify-content: center;\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & .breadcrumb-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    position: relative;\n\n    & .dropdown-menu {\n      display: none;\n      position: absolute;\n      top: 20px;\n\n      &.open {\n        display: block;\n      }\n    }\n\n    & a {\n      text-decoration: none;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: var(--ifx-font-family);\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeS;\n      line-height: tokens.$ifxLineHeightS;\n      display: flex;\n      align-items: center;\n      color: tokens.$ifxColorBaseBlack;\n      flex-direction: column;\n      justify-content: center;\n      padding: 0px;\n      border-bottom: 1px solid #1D1D1D;\n    }\n  }\n\n  & .breadcrumb-divider {\n    width: 10px;\n    height: tokens.$ifxSize200;\n    color: tokens.$ifxColorEngineering200;\n    line-height: 13px;\n    font-size: tokens.$ifxFontSizeXl;\n\n    margin-right: 12px;\n  }\n}","import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BreadcrumbItem {\n\n  @State() isLastItem: boolean = false;\n  @Element() el;\n  private emittedElement: HTMLElement;\n  @State() uniqueId: string;\n  @State() hasDropdownMenu: boolean = false;\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.el)) {\n      this.closeDropdownMenu();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.toggleDropdownMenu();\n    } else if (ev.key === 'Escape') {\n      this.closeDropdownMenu();\n    }\n  }\n\n  getDropdownMenu() {\n    const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\n    return dropdownMenu\n  }\n\n  @Listen('breadcrumbMenuIconWrapper')\n  menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \n    this.emittedElement = event.detail;\n  }\n\n  getMenuIconWrapper(): HTMLElement | undefined {\n    return this.emittedElement;\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n  }\n\n  closeDropdownMenu() {\n    if(this.hasDropdownMenu) {\n      const dropdownMenu = this.getDropdownMenu()\n      const menuWrapper = this.getMenuIconWrapper()\n      this.handleClassList(dropdownMenu, 'remove', 'open')\n      this.handleClassList(menuWrapper, 'remove', 'show')\n    }\n  }\n\n  toggleDropdownMenu() { \n    if(this.hasDropdownMenu) {\n      const dropdownMenu = this.getDropdownMenu()\n      const menuWrapper = this.getMenuIconWrapper()\n      this.handleClassList(dropdownMenu, 'toggle', 'open')\n      this.handleClassList(menuWrapper, 'toggle', 'show')\n    }\n  }\n\n  isDropdownMenuOpen(): boolean {\n    const dropdownMenu = this.getDropdownMenu()\n    return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\n  }\n\n  handleLastItem() { \n    const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\n    if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \n      this.isLastItem = true;\n    } else this.isLastItem = false;\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\n    }\n    this.handleLastItem()\n  }\n\n  componentDidUpdate() {\n    this.handleLastItem()\n  }\n\n  componentWillRender() { \n    this.setHasDropdownMenuState()\n  }\n\n  setHasDropdownMenuState() { \n    const dropdownMenu = this.getIfxDropdownMenuComponent();\n    if(dropdownMenu) {\n      this.hasDropdownMenu = !!dropdownMenu;\n    }\n  }\n\n  getIfxDropdownMenuComponent() { \n    const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\n    return dropdownMenu;\n  }\n\n  componentDidLoad() { \n    const dropdownMenu = this.getIfxDropdownMenuComponent();\n\n    if(!this.hasDropdownMenu) { \n      const iconMenuWrapper = this.getMenuIconWrapper();\n      this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\n    } else { \n      dropdownMenu.isOpen = true;\n    }\n  }\n\n  render() {\n    return (\n      <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\n       <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\n          <slot name='label'/>\n          <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\n            <slot />\n          </div>\n        </li>\n        {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\n      </li>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-breadcrumb-item.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/breadcrumb/breadcrumb-item.scss?tag=ifx-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-parent {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px;\n  gap: tokens.$ifxSpace150;\n  min-height: tokens.$ifxSize300;\n  justify-content: center;\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & .breadcrumb-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    position: relative;\n\n    & .dropdown-menu {\n      display: none;\n      position: absolute;\n      top: 20px;\n\n      &.open {\n        display: block;\n      }\n    }\n\n    & a {\n      text-decoration: none;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: var(--ifx-font-family);\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeS;\n      line-height: tokens.$ifxLineHeightS;\n      display: flex;\n      align-items: center;\n      color: tokens.$ifxColorBaseBlack;\n      flex-direction: column;\n      justify-content: center;\n      padding: 0px;\n      border-bottom: 1px solid #1D1D1D;\n    }\n  }\n\n  & .breadcrumb-divider {\n    width: 10px;\n    height: tokens.$ifxSize200;\n    color: tokens.$ifxColorEngineering200;\n    line-height: 13px;\n    font-size: tokens.$ifxFontSizeXl;\n\n    margin-right: 12px;\n  }\n}","import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BreadcrumbItem {\n\n  @State() isLastItem: boolean = false;\n  @Element() el;\n  private emittedElement: HTMLElement;\n  @State() uniqueId: string;\n  @State() hasDropdownMenu: boolean = false;\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.el)) {\n      this.closeDropdownMenu();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.toggleDropdownMenu();\n    } else if (ev.key === 'Escape') {\n      this.closeDropdownMenu();\n    }\n  }\n\n  getDropdownMenu() {\n    const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\n    return dropdownMenu\n  }\n\n  @Listen('breadcrumbMenuIconWrapper')\n  menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \n    this.emittedElement = event.detail;\n  }\n\n  getMenuIconWrapper(): HTMLElement | undefined {\n    return this.emittedElement;\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n  }\n\n  closeDropdownMenu() {\n    if(this.hasDropdownMenu) {\n      const dropdownMenu = this.getDropdownMenu()\n      const menuWrapper = this.getMenuIconWrapper()\n      this.handleClassList(dropdownMenu, 'remove', 'open')\n      this.handleClassList(menuWrapper, 'remove', 'show')\n    }\n  }\n\n  toggleDropdownMenu() { \n    if(this.hasDropdownMenu) {\n      const dropdownMenu = this.getDropdownMenu()\n      const menuWrapper = this.getMenuIconWrapper()\n      this.handleClassList(dropdownMenu, 'toggle', 'open')\n      this.handleClassList(menuWrapper, 'toggle', 'show')\n    }\n  }\n\n  isDropdownMenuOpen(): boolean {\n    const dropdownMenu = this.getDropdownMenu()\n    return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\n  }\n\n  handleLastItem() { \n    const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\n    if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \n      this.isLastItem = true;\n    } else this.isLastItem = false;\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\n    }\n    this.handleLastItem()\n  }\n\n  componentDidUpdate() {\n    this.handleLastItem()\n  }\n\n  componentWillRender() { \n    this.setHasDropdownMenuState()\n  }\n\n  setHasDropdownMenuState() { \n    const dropdownMenu = this.getIfxDropdownMenuComponent();\n    if(dropdownMenu) {\n      this.hasDropdownMenu = !!dropdownMenu;\n    }\n  }\n\n  getIfxDropdownMenuComponent() { \n    const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\n    return dropdownMenu;\n  }\n\n  componentDidLoad() { \n    const dropdownMenu = this.getIfxDropdownMenuComponent();\n\n    if(!this.hasDropdownMenu) { \n      const iconMenuWrapper = this.getMenuIconWrapper();\n      this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\n    } else { \n      dropdownMenu.isOpen = true;\n    }\n  }\n\n  render() {\n    return (\n      <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\n       <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\n          <slot name='label'/>\n          <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\n            <slot />\n          </div>\n        </li>\n        {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\n      </li>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-af3b4f6c.js');
+const index = require('./index-e489135e.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}";
@@ -11,6 +11,13 @@ const IfxButtonStyle0 = buttonCss;
 const Button = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.variant = 'primary';
+        this.theme = 'default';
+        this.size = 'm';
+        this.disabled = false;
+        this.target = '_self';
+        this.type = "button";
+        this.fullWidth = false;
         this.handleClick = (ev) => {
             if (this.el.shadowRoot) {
                 const parentForm = this.el.closest('form');
@@ -33,16 +40,6 @@ const Button = class {
                 }
             }
         };
-        this.variant = 'primary';
-        this.theme = 'default';
-        this.size = 'm';
-        this.disabled = false;
-        this.internalHref = undefined;
-        this.href = undefined;
-        this.target = '_self';
-        this.type = "button";
-        this.fullWidth = false;
-        this.AriaLabel = undefined;
     }
     setInternalHref(newValue) {
         this.internalHref = newValue;

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

@@ -1 +1 @@
-{"file":"ifx-button.entry.cjs.js","mappings":"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","names":["h","Host","classNames"],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  vertical-align: bottom;\n  display: inline-flex;\n  width: var(--bw, fit-content);\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: tokens.$ifxSize500;\n  padding: 0px tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  font-family: var(--ifx-font-family);\n  font-style: normal;\n  text-decoration: none;\n  user-select: none;\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n  width: var(--bw, fit-content);\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn.disabled {\n  pointer-events: none;\n}\n\n.btn-default {\n  //default variant=primary; default color=default\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-default {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorOcean500;\n  border: 1px solid tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary-default {\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-danger {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorRed500;\n  border-color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-danger {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorRed500;\n  border: 1px solid tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary-danger {\n  //combination tertiary + danger not in design\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-inverse {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    opacity: tokens.$ifxOpacity100;\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorOcean500;\n    pointer-events: none;\n  }\n}\n\n.btn-secondary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    border: 1px solid tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-tertiary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorBaseWhite;\n    opacity: tokens.$ifxOpacity100;\n    pointer-events: none;\n\n  }\n}\n\n.btn {\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  &.btn-xs {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize400;\n    line-height: tokens.$ifxLineHeightXs;\n  }\n\n  &.btn-s {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize450;\n    line-height: tokens.$ifxLineHeightS;\n  }\n\n  // &.btn-m { //default\n  //   font-size: tokens.$ifxFontSizeM;\n  //   height: tokens.$ifxSize400;\n  //   line-height: tokens.$ifxLineHeightM;\n  // }\n\n\n  &.btn-l {\n    font-size: tokens.$ifxFontSizeXl;\n    height: tokens.$ifxSize600;\n    line-height: tokens.$ifxLineHeightXl;\n  }\n\n\n\n  &.btn-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary:not(:disabled, .disabled) {\n\n    &:hover {\n      background-color: tokens.$ifxColorBerry500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorBerry500;\n    }\n  }\n\n\n\n  &.btn-danger:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n  &.btn-secondary-danger:not(:disabled, .disabled) {\n\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n\n  &.btn-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.btn-secondary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n\n\n  &.btn-tertiary-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean700;\n    }\n\n\n  }\n\n\n\n\n\n  &.btn-tertiary-danger:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorRed600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorRed700;\n    }\n\n  }\n\n\n  &.btn-tertiary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorEngineering200;\n\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class Button {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\n  @Prop() size: string = 'm';\n  @Prop() disabled: boolean = false;\n  @State() internalHref: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  @Prop() fullWidth: boolean = false;\n  @Prop() AriaLabel: string;\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n  private nativeButton: HTMLButtonElement | HTMLInputElement;\n\n  @Watch('href')\n  setInternalHref(newValue: string) {\n    this.internalHref = newValue;\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  insertNativeButton() {\n    this.nativeButton = document.createElement('button');\n    this.nativeButton.type = this.type;\n    this.nativeButton.style.display = 'none';\n    this.el.closest('form').appendChild(this.nativeButton);\n  }\n\n  handleFormAndInternalHref() {\n    if (this.el.closest('form')) {\n      if (this.el.href) {\n        this.el.internalHref = undefined;\n      }\n      this.insertNativeButton()\n    } else {\n      this.internalHref = this.href;\n    }\n  }\n\n  handleButtonWidth() {\n    if (this.fullWidth) {\n      this.el.style.setProperty('--bw', '100%');\n    } else {\n      this.el.style.setProperty('--bw', 'fit-content');\n    }\n  }\n\n  componentWillLoad() {\n    this.handleFormAndInternalHref()\n  }\n\n  componentWillRender() {\n    this.handleButtonWidth()\n  }\n\n\n\n  handleClick = (ev: Event) => {\n    if (this.el.shadowRoot) {\n      const parentForm = this.el.closest('form');\n      if (parentForm) {\n        ev.preventDefault();\n\n        if (this.type === 'reset') {\n          // If the button type is 'reset', manually reset all custom form fields\n          this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n        } else {\n          const fakeButton = document.createElement('button');\n          if (this.type) {\n            fakeButton.type = this.type;\n          }\n          fakeButton.style.display = 'none';\n          parentForm.appendChild(fakeButton);\n          fakeButton.click();\n          fakeButton.remove();\n        }\n      }\n    }\n  }\n\n  resetClickHandler() {\n    const formElement = this.el.closest('form');\n    const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n    customElements.forEach(element => {\n      element.reset();\n    });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ( ev.key === \" \" || ev.key === 'Enter' && !this.disabled) {\n      this.focusableElement.click();\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleHostClick(event: Event) {\n    if (this.disabled === true) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  handleFocus(event: FocusEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      this.focusableElement.blur();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <a\n          role={this.href ? 'link' : 'button'}\n          tabIndex={this.disabled ? -1 : 0}\n          ref={(el) => (this.focusableElement = el)}\n          class={this.getClassNames()}\n          href={!this.disabled ? this.internalHref : undefined}\n          target={this.target}\n          onClick={this.handleClick}\n          rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          onFocus={(event) => this.handleFocus(event)}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n          aria-label={this.AriaLabel || undefined}\n        >\n          <slot></slot>\n        </a>\n      </Host>\n    );\n  }\n\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary-${this.theme}`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary-${this.theme}`\n        : `${this.theme}`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn',\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"version":3}
+{"file":"ifx-button.entry.cjs.js","mappings":"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","names":["h","Host","classNames"],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  vertical-align: bottom;\n  display: inline-flex;\n  width: var(--bw, fit-content);\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: tokens.$ifxSize500;\n  padding: 0px tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  font-family: var(--ifx-font-family);\n  font-style: normal;\n  text-decoration: none;\n  user-select: none;\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n  width: var(--bw, fit-content);\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn.disabled {\n  pointer-events: none;\n}\n\n.btn-default {\n  //default variant=primary; default color=default\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-default {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorOcean500;\n  border: 1px solid tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary-default {\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-danger {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorRed500;\n  border-color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-danger {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorRed500;\n  border: 1px solid tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary-danger {\n  //combination tertiary + danger not in design\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-inverse {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    opacity: tokens.$ifxOpacity100;\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorOcean500;\n    pointer-events: none;\n  }\n}\n\n.btn-secondary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    border: 1px solid tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-tertiary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorBaseWhite;\n    opacity: tokens.$ifxOpacity100;\n    pointer-events: none;\n\n  }\n}\n\n.btn {\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  &.btn-xs {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize400;\n    line-height: tokens.$ifxLineHeightXs;\n  }\n\n  &.btn-s {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize450;\n    line-height: tokens.$ifxLineHeightS;\n  }\n\n  // &.btn-m { //default\n  //   font-size: tokens.$ifxFontSizeM;\n  //   height: tokens.$ifxSize400;\n  //   line-height: tokens.$ifxLineHeightM;\n  // }\n\n\n  &.btn-l {\n    font-size: tokens.$ifxFontSizeXl;\n    height: tokens.$ifxSize600;\n    line-height: tokens.$ifxLineHeightXl;\n  }\n\n\n\n  &.btn-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary:not(:disabled, .disabled) {\n\n    &:hover {\n      background-color: tokens.$ifxColorBerry500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorBerry500;\n    }\n  }\n\n\n\n  &.btn-danger:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n  &.btn-secondary-danger:not(:disabled, .disabled) {\n\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n\n  &.btn-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.btn-secondary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n\n\n  &.btn-tertiary-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean700;\n    }\n\n\n  }\n\n\n\n\n\n  &.btn-tertiary-danger:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorRed600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorRed700;\n    }\n\n  }\n\n\n  &.btn-tertiary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorEngineering200;\n\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class Button {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\n  @Prop() size: string = 'm';\n  @Prop() disabled: boolean = false;\n  @State() internalHref: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  @Prop() fullWidth: boolean = false;\n  @Prop() AriaLabel: string;\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n  private nativeButton: HTMLButtonElement | HTMLInputElement;\n\n  @Watch('href')\n  setInternalHref(newValue: string) {\n    this.internalHref = newValue;\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  insertNativeButton() {\n    this.nativeButton = document.createElement('button');\n    this.nativeButton.type = this.type;\n    this.nativeButton.style.display = 'none';\n    this.el.closest('form').appendChild(this.nativeButton);\n  }\n\n  handleFormAndInternalHref() {\n    if (this.el.closest('form')) {\n      if (this.el.href) {\n        this.el.internalHref = undefined;\n      }\n      this.insertNativeButton()\n    } else {\n      this.internalHref = this.href;\n    }\n  }\n\n  handleButtonWidth() {\n    if (this.fullWidth) {\n      this.el.style.setProperty('--bw', '100%');\n    } else {\n      this.el.style.setProperty('--bw', 'fit-content');\n    }\n  }\n\n  componentWillLoad() {\n    this.handleFormAndInternalHref()\n  }\n\n  componentWillRender() {\n    this.handleButtonWidth()\n  }\n\n\n\n  handleClick = (ev: Event) => {\n    if (this.el.shadowRoot) {\n      const parentForm = this.el.closest('form');\n      if (parentForm) {\n        ev.preventDefault();\n\n        if (this.type === 'reset') {\n          // If the button type is 'reset', manually reset all custom form fields\n          this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n        } else {\n          const fakeButton = document.createElement('button');\n          if (this.type) {\n            fakeButton.type = this.type;\n          }\n          fakeButton.style.display = 'none';\n          parentForm.appendChild(fakeButton);\n          fakeButton.click();\n          fakeButton.remove();\n        }\n      }\n    }\n  }\n\n  resetClickHandler() {\n    const formElement = this.el.closest('form');\n    const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n    customElements.forEach(element => {\n      element.reset();\n    });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ( ev.key === \" \" || ev.key === 'Enter' && !this.disabled) {\n      this.focusableElement.click();\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleHostClick(event: Event) {\n    if (this.disabled === true) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  handleFocus(event: FocusEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      this.focusableElement.blur();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <a\n          role={this.href ? 'link' : 'button'}\n          tabIndex={this.disabled ? -1 : 0}\n          ref={(el) => (this.focusableElement = el)}\n          class={this.getClassNames()}\n          href={!this.disabled ? this.internalHref : undefined}\n          target={this.target}\n          onClick={this.handleClick}\n          rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          onFocus={(event) => this.handleFocus(event)}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n          aria-label={this.AriaLabel || undefined}\n        >\n          <slot></slot>\n        </a>\n      </Host>\n    );\n  }\n\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary-${this.theme}`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary-${this.theme}`\n        : `${this.theme}`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn',\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"version":3}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-af3b4f6c.js');
+const index = require('./index-e489135e.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;
@@ -10,8 +10,6 @@ const IfxCardHeadlineStyle0 = cardHeadlineCss;
 const CardHeadline = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.direction = undefined;
-        this.hasDesc = undefined;
     }
     componentWillLoad() {
         var _a;

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

@@ -1 +1 @@
-{"file":"ifx-card-headline.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,6fAA6f,CAAC;AACthB,8BAAe,eAAe;;MCOjB,YAAY;;;;;;IAKvB,iBAAiB;;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAEhD,IAAI,WAAW,EAAE;YACf,MAAM,SAAS,GAAG,MAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,SAAS,CAAC;YAE3E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;gBACjD,IAAI,CAAC,SAAS,GAAG,YAAY,CAAA;aAC9B;YAED,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACxD,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;aACrB;SACF;KACF;IAGD,MAAM;QACJ,QACEA,kEAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,IACpEA,kEAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,SAAS,EAAE,IAC3CA,oEAAQ,CACJ,CACF,EACP;KACF;;;;;;;","names":["h"],"sources":["src/components/card/card-headline/card-headline.scss?tag=ifx-card-headline&encapsulation=shadow","src/components/card/card-headline/card-headline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  pointer-events: none;\n}\n\n.card__headline-wrapper {\n  padding-bottom: 16px;\n\n  &.withDesc {\n    padding-bottom: 8px;\n  }\n}\n\n.card-headline {\n  margin-top: 0;\n  padding-top: 0;\n  font-family: var(--ifx-font-family);\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSize3xl;\n  line-height: tokens.$ifxLineHeight3xl;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  &.horizontal {\n    font-size: tokens.$ifxFontSizeXl;\n    line-height: 28px;\n  }\n\n}","import { Component, h, Element, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-headline',\n  styleUrl: 'card-headline.scss',\n  shadow: true,\n})\n\nexport class CardHeadline {\n  @Element() el;\n  @State() direction: string;\n  @State() hasDesc: boolean;\n\n  componentWillLoad() {\n    const cardElement = this.el.closest('ifx-card');\n\n    if (cardElement) {\n      const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\n\n      if (cardClass && cardClass.includes('horizontal')) {\n        this.direction = 'horizontal'\n      }\n\n      const desc = cardElement.querySelector('ifx-card-text');\n      if (desc) {\n        this.hasDesc = true;\n      }\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\n        <div class={`card-headline ${this.direction}`}>\n          <slot />\n        </div>\n      </div>\n    )\n  }\n}\n"],"version":3}
+{"file":"ifx-card-headline.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,6fAA6f,CAAC;AACthB,8BAAe,eAAe;;MCOjB,YAAY;;;;IAKvB,iBAAiB;;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAEhD,IAAI,WAAW,EAAE;YACf,MAAM,SAAS,GAAG,MAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,SAAS,CAAC;YAE3E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;gBACjD,IAAI,CAAC,SAAS,GAAG,YAAY,CAAA;aAC9B;YAED,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACxD,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;aACrB;SACF;KACF;IAGD,MAAM;QACJ,QACEA,kEAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,IACpEA,kEAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,SAAS,EAAE,IAC3CA,oEAAQ,CACJ,CACF,EACP;KACF;;;;;;;","names":["h"],"sources":["src/components/card/card-headline/card-headline.scss?tag=ifx-card-headline&encapsulation=shadow","src/components/card/card-headline/card-headline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  pointer-events: none;\n}\n\n.card__headline-wrapper {\n  padding-bottom: 16px;\n\n  &.withDesc {\n    padding-bottom: 8px;\n  }\n}\n\n.card-headline {\n  margin-top: 0;\n  padding-top: 0;\n  font-family: var(--ifx-font-family);\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSize3xl;\n  line-height: tokens.$ifxLineHeight3xl;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  &.horizontal {\n    font-size: tokens.$ifxFontSizeXl;\n    line-height: 28px;\n  }\n\n}","import { Component, h, Element, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-headline',\n  styleUrl: 'card-headline.scss',\n  shadow: true,\n})\n\nexport class CardHeadline {\n  @Element() el;\n  @State() direction: string;\n  @State() hasDesc: boolean;\n\n  componentWillLoad() {\n    const cardElement = this.el.closest('ifx-card');\n\n    if (cardElement) {\n      const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\n\n      if (cardClass && cardClass.includes('horizontal')) {\n        this.direction = 'horizontal'\n      }\n\n      const desc = cardElement.querySelector('ifx-card-text');\n      if (desc) {\n        this.hasDesc = true;\n      }\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\n        <div class={`card-headline ${this.direction}`}>\n          <slot />\n        </div>\n      </div>\n    )\n  }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-af3b4f6c.js');
+const index = require('./index-e489135e.js');
 
 const cardImageCss = ".card-image{width:100%;height:100%;vertical-align:bottom;object-fit:cover}";
 const IfxCardImageStyle0 = cardImageCss;
@@ -11,9 +11,6 @@ const CardImage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.imgPosition = index.createEvent(this, "imgPosition", 7);
-        this.src = undefined;
-        this.alt = undefined;
-        this.position = undefined;
     }
     handlePosition(position) {
         this.imgPosition.emit(position);

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

@@ -1 +1 @@
-{"file":"ifx-card-image.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,4EAA4E,CAAC;AAClG,2BAAe,YAAY;;MCOd,SAAS;;;;;;;;IAMpB,cAAc,CAAC,QAAQ;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;KAChC;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;KACnC;IAED,kBAAkB;QAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;KACnC;IAED,MAAM;QACJ,QACEA,kEAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,GAAG,EACxD;KACH;;;;;;","names":["h"],"sources":["src/components/card/card-image/card-image.scss?tag=ifx-card-image&encapsulation=shadow","src/components/card/card-image/card-image.tsx"],"sourcesContent":[".card-image {\n  width: 100%;\n  height: 100%;\n  vertical-align: bottom;\n  object-fit: cover;\n}","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-image',\n  styleUrl: 'card-image.scss',\n  shadow: true,\n})\n\nexport class CardImage {\n  @Prop() src: string;\n  @Prop() alt: string;\n  @Prop() position: string;\n  @Event() imgPosition: EventEmitter;\n\n  handlePosition(position) {\n    this.imgPosition.emit(position)\n  }\n\n  componentWillLoad() {\n    this.handlePosition(this.position)\n  }\n\n  componentDidUpdate() {\n    this.handlePosition(this.position)\n  }\n\n  render() {\n    return (\n      <img src={this.src} alt={this.alt} class=\"card-image\" />\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-card-image.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,4EAA4E,CAAC;AAClG,2BAAe,YAAY;;MCOd,SAAS;;;;;IAMpB,cAAc,CAAC,QAAQ;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;KAChC;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;KACnC;IAED,kBAAkB;QAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;KACnC;IAED,MAAM;QACJ,QACEA,kEAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,GAAG,EACxD;KACH;;;;;;","names":["h"],"sources":["src/components/card/card-image/card-image.scss?tag=ifx-card-image&encapsulation=shadow","src/components/card/card-image/card-image.tsx"],"sourcesContent":[".card-image {\n  width: 100%;\n  height: 100%;\n  vertical-align: bottom;\n  object-fit: cover;\n}","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-image',\n  styleUrl: 'card-image.scss',\n  shadow: true,\n})\n\nexport class CardImage {\n  @Prop() src: string;\n  @Prop() alt: string;\n  @Prop() position: string;\n  @Event() imgPosition: EventEmitter;\n\n  handlePosition(position) {\n    this.imgPosition.emit(position)\n  }\n\n  componentWillLoad() {\n    this.handlePosition(this.position)\n  }\n\n  componentDidUpdate() {\n    this.handlePosition(this.position)\n  }\n\n  render() {\n    return (\n      <img src={this.src} alt={this.alt} class=\"card-image\" />\n    );\n  }\n}\n"],"version":3}

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

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