@infineon/infineon-design-system-stencil 30.9.3--canary.1640.e9ef59f97cf624f94f0207779497ed5e51e1ed11.0 → 30.9.3--canary.1680.63ee9527ec4620c707f0c9846a009da9e4c52d97.0

package/dist/infineon-design-system-stencil/p-eb8ba37f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownCss","IfxDropdownStyle0","Dropdown","componentWillLoad","this","updateSlotContent","watchHandlerIsOpen","defaultOpen","internalIsOpen","newValue","oldValue","openDropdown","closeDropdown","watchHandlerDisabled","trigger","disabled","watchHandlerSlot","el","querySelector","removeEventListener","triggerClickHandler","bind","addEventListener","noAppendToBody","menu","remove","document","body","append","menuClickHandler","noCloseOnMenuClick","disconnectedCallback","popperInstance","destroy","isOpen","ifxClose","emit","createPopper","placement","ifxOpen","handleOutsideClick","event","target","noCloseOnOutsideClick","contains","render","h","key","class"],"sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-block;\n}","//dropdown.tsx\nimport { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\nimport { createPopper } from '@popperjs/core';\n \n\nimport { IOpenable } from './IOpenable';\n\nexport type Placement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\n@Component({\n  tag: 'ifx-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true\n})\n\nexport class Dropdown {\n  @Prop() placement: Placement = 'bottom-start';\n\n  // isOpen prop\n  @Prop() defaultOpen: boolean = false;\n  // internal state for isOpen prop\n  @State() internalIsOpen: boolean = false;\n\n  // isOpen prop\n  @Prop() noAppendToBody: boolean = false;\n\n  // Custom events for opening and closing dropdown\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  @Event() ifxDropdown: EventEmitter;\n\n  // determine if dropdown is disabled\n  @Prop() disabled: boolean;\n\n  @Prop() noCloseOnOutsideClick: boolean = false;\n  @Prop() noCloseOnMenuClick: boolean = false;\n\n  // Reference to host element\n  @Element() el;\n  // Dropdown trigger and menu\n  @State() trigger: HTMLElement;\n  @State() menu: HTMLElement\n  // Popper instance for positioning\n  popperInstance: any;\n\n\n\n  componentWillLoad() {\n    //maybe not needed\n    this.updateSlotContent();\n    this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\n  }\n\n\n\n  @Watch('defaultOpen')\n  watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue && newValue !== this.internalIsOpen) {\n      if (newValue) {\n        this.openDropdown();\n      } else {\n        this.closeDropdown();\n      }\n    }\n  }\n\n  @Watch('disabled')\n  watchHandlerDisabled(newValue: boolean) {\n    if (this.trigger) {\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\n    }\n  }\n\n\n  @Listen('slotchange')\n  watchHandlerSlot() {\n    this.updateSlotContent();\n  }\n\n\n\n  // handling assignment of trigger and menu\n  updateSlotContent() {\n    // Get dropdown trigger. name has to start with ifx-dropdown-trigger\n    this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');\n    if (this.trigger) {\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = this.disabled;\n      this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));\n      this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));\n    }\n    // Remove menu if exists from body\n    if (!this.noAppendToBody) {\n      if (this.menu) {\n        this.menu.remove();\n      }\n      // Get new menu and add to body\n      this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n      // event handler for closing dropdown on menu click\n      document.body.append(this.menu);\n    } else {\n      this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n    }\n    this.menu.removeEventListener('click', this.menuClickHandler.bind(this));\n    this.menu.addEventListener('click', this.menuClickHandler.bind(this));\n\n  }\n\n  menuClickHandler() {\n    if (!this.noCloseOnMenuClick) {\n      this.closeDropdown();\n    }\n  }\n\n  triggerClickHandler() {\n    if (!this.internalIsOpen) {\n      this.openDropdown();\n    } else {\n      this.closeDropdown();\n    }\n  }\n\n  disconnectedCallback() {\n    // Destroy popper instance if exists\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n    // Remove menu if exists\n    if (this.menu) {\n      this.menu.remove();\n    }\n  }\n\n  @Method()\n  async isOpen() {\n    return this.internalIsOpen;\n  }\n\n  @Method()\n  async closeDropdown() {\n    if (this.internalIsOpen) {\n      this.internalIsOpen = false;\n      // sets isOpen prop on trigger and menu\n      (this.trigger as unknown as IOpenable).isOpen = false;\n      (this.menu as unknown as IOpenable).isOpen = false;\n      // Emit close event\n      this.ifxClose.emit();\n    }\n    // Destroy popper instance if exists\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  @Method()\n  async openDropdown() {\n    if (!this.internalIsOpen && !this.disabled) {\n      this.internalIsOpen = true;\n      // sets isOpen prop on trigger and menu\n      (this.trigger as unknown as IOpenable).isOpen = true;\n      (this.menu as unknown as IOpenable).isOpen = true;\n      // Create popper instance for positioning\n      this.popperInstance = createPopper(\n        this.el,\n        this.menu,\n        { placement: this.placement });\n\n      this.ifxOpen.emit();\n    }\n  }\n\n  //emitted by and listening to it from the dropdown menu right now\n  // @Listen('ifxDropdownMenu')\n  // handleDropdownMenuEvents(event: CustomEvent) {\n  //   this.ifxDropdown.emit(event.detail)\n  //   console.log('Selected item received in higher-level parent:');\n  // }\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    // Close dropdown if outside click\n    if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n      this.closeDropdown();\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label='dropdown menu' class='dropdown'>\n        <slot />\n      </div>\n    )\n  }\n}"],"mappings":"6FAAA,MAAMA,EAAc,8BACpB,MAAAC,EAAeD,E,MC6BFE,EAAQ,M,qJACY,e,iBAGA,M,oBAEI,M,oBAGD,M,mDAUO,M,wBACH,M,2CAYtC,iBAAAC,GAEEC,KAAKC,oBACLD,KAAKE,mBAAmBF,KAAKG,YAAaH,KAAKI,e,CAMjD,kBAAAF,CAAmBG,EAAmBC,GACpC,GAAID,IAAaC,GAAYD,IAAaL,KAAKI,eAAgB,CAC7D,GAAIC,EAAU,CACZL,KAAKO,c,KACA,CACLP,KAAKQ,e,GAMX,oBAAAC,CAAqBJ,GACnB,GAAIL,KAAKU,QAAS,CACfV,KAAKU,QAA6DC,SAAWN,C,EAMlF,gBAAAO,GACEZ,KAAKC,mB,CAMP,iBAAAA,GAEED,KAAKU,QAAUV,KAAKa,GAAGC,cAAc,qDACrC,GAAId,KAAKU,QAAS,CACfV,KAAKU,QAA6DC,SAAWX,KAAKW,SACnFX,KAAKU,QAAQK,oBAAoB,QAASf,KAAKgB,oBAAoBC,KAAKjB,OACxEA,KAAKU,QAAQQ,iBAAiB,QAASlB,KAAKgB,oBAAoBC,KAAKjB,M,CAGvE,IAAKA,KAAKmB,eAAgB,CACxB,GAAInB,KAAKoB,KAAM,CACbpB,KAAKoB,KAAKC,Q,CAGZrB,KAAKoB,KAAOpB,KAAKa,GAAGC,cAAc,qBAGlCQ,SAASC,KAAKC,OAAOxB,KAAKoB,K,KACrB,CACLpB,KAAKoB,KAAOpB,KAAKa,GAAGC,cAAc,oB,CAGpCd,KAAKoB,KAAKL,oBAAoB,QAASf,KAAKyB,iBAAiBR,KAAKjB,OAClEA,KAAKoB,KAAKF,iBAAiB,QAASlB,KAAKyB,iBAAiBR,KAAKjB,M,CAIjE,gBAAAyB,GACE,IAAKzB,KAAK0B,mBAAoB,CAC5B1B,KAAKQ,e,EAIT,mBAAAQ,GACE,IAAKhB,KAAKI,eAAgB,CACxBJ,KAAKO,c,KACA,CACLP,KAAKQ,e,EAIT,oBAAAmB,GAEE,GAAI3B,KAAK4B,eAAgB,CACvB5B,KAAK4B,eAAeC,UACpB7B,KAAK4B,eAAiB,I,CAGxB,GAAI5B,KAAKoB,KAAM,CACbpB,KAAKoB,KAAKC,Q,EAKd,YAAMS,GACJ,OAAO9B,KAAKI,c,CAId,mBAAMI,GACJ,GAAIR,KAAKI,eAAgB,CACvBJ,KAAKI,eAAiB,MAErBJ,KAAKU,QAAiCoB,OAAS,MAC/C9B,KAAKoB,KAA8BU,OAAS,MAE7C9B,KAAK+B,SAASC,M,CAGhB,GAAIhC,KAAK4B,eAAgB,CACvB5B,KAAK4B,eAAeC,UACpB7B,KAAK4B,eAAiB,I,EAK1B,kBAAMrB,GACJ,IAAKP,KAAKI,iBAAmBJ,KAAKW,SAAU,CAC1CX,KAAKI,eAAiB,KAErBJ,KAAKU,QAAiCoB,OAAS,KAC/C9B,KAAKoB,KAA8BU,OAAS,KAE7C9B,KAAK4B,eAAiBK,EACpBjC,KAAKa,GACLb,KAAKoB,KACL,CAAEc,UAAWlC,KAAKkC,YAEpBlC,KAAKmC,QAAQH,M,EAYjB,kBAAAI,CAAmBC,GACjB,MAAMC,EAASD,EAAMC,OAErB,IAAKtC,KAAKuC,wBAA0BvC,KAAKa,GAAG2B,SAASF,KAAYtC,KAAKoB,KAAKoB,SAASF,GAAS,CAC3FtC,KAAKQ,e,EAIT,MAAAiC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,gBAAgBC,MAAM,YACpCF,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-580b88e4.entry.js → p-ee39e4ce.entry.js}

@@ -1,2 +1,2 @@
-import{r as a,h as o}from"./p-f619bff3.js";const f=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.dropdown-header{display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid #EEEDED;font-family:var(--ifx-font-family)}.dropdown-header span{color:#575352;font-family:var(--ifx-font-family);font-size:14px;font-style:normal;font-weight:400;line-height:20px;}';const e=f;const d=class{constructor(o){a(this,o)}render(){return o("div",{key:"b42dc08dabda81dd0e8e604d07c8409686a5f0fd",class:"dropdown-header"},o("span",{key:"9f699e2874688216d23da95c3b96d78caad78695"},o("slot",{key:"f8b69b6e6840fcc1c8f3b877a9361e192a1d76a0"})))}};d.style=e;export{d as ifx_dropdown_header};
-//# sourceMappingURL=p-580b88e4.entry.js.map
+import{r as a,h as o}from"./p-6b122987.js";const e=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.dropdown-header{display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid #EEEDED;font-family:var(--ifx-font-family)}.dropdown-header span{color:#575352;font-family:var(--ifx-font-family);font-size:14px;font-style:normal;font-weight:400;line-height:20px;}';const f=e;const d=class{constructor(o){a(this,o)}render(){return o("div",{key:"b42dc08dabda81dd0e8e604d07c8409686a5f0fd",class:"dropdown-header"},o("span",{key:"9f699e2874688216d23da95c3b96d78caad78695"},o("slot",{key:"f8b69b6e6840fcc1c8f3b877a9361e192a1d76a0"})))}};d.style=f;export{d as ifx_dropdown_header};
+//# sourceMappingURL=p-ee39e4ce.entry.js.map

package/dist/infineon-design-system-stencil/p-f0052c72.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i,g as t}from"./p-6b122987.js";const a=':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 n=a;const o=class{constructor(i){e(this,i);this.direction=undefined;this.hasDesc=undefined}componentWillLoad(){var e;const i=this.el.closest("ifx-card");if(i){const t=(e=i.shadowRoot.querySelector(".card"))===null||e===void 0?void 0:e.className;if(t&&t.includes("horizontal")){this.direction="horizontal"}const a=i.querySelector("ifx-card-text");if(a){this.hasDesc=true}}}render(){return i("div",{key:"3599127fad1e7dc563064d38df9996bcd7bd9217",class:`card__headline-wrapper ${this.hasDesc?"withDesc":""}`},i("div",{key:"643428271dec2bdf71c7059bf6e28c00cae9438b",class:`card-headline ${this.direction}`},i("slot",{key:"3b7ec4e25a399e96a0db4f03d793109eabf08fff"})))}get el(){return t(this)}};o.style=n;export{o as ifx_card_headline};
+//# sourceMappingURL=p-f0052c72.entry.js.map

package/dist/infineon-design-system-stencil/{p-5c33ace7.entry.js.map → p-f0052c72.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["cardHeadlineCss","IfxCardHeadlineStyle0","CardHeadline","componentWillLoad","cardElement","this","el","closest","cardClass","_a","shadowRoot","querySelector","className","includes","direction","desc","hasDesc","render","h","key","class"],"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"],"mappings":"kDAAA,MAAMA,EAAkB,4fACxB,MAAAC,EAAeD,E,MCOFE,EAAY,M,yBAKvB,iBAAAC,G,MACE,MAAMC,EAAcC,KAAKC,GAAGC,QAAQ,YAEpC,GAAIH,EAAa,CACf,MAAMI,GAAYC,EAAAL,EAAYM,WAAWC,cAAc,YAAQ,MAAAF,SAAA,SAAAA,EAAEG,UAEjE,GAAIJ,GAAaA,EAAUK,SAAS,cAAe,CACjDR,KAAKS,UAAY,Y,CAGnB,MAAMC,EAAOX,EAAYO,cAAc,iBACvC,GAAII,EAAM,CACRV,KAAKW,QAAU,I,GAMrB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,0BAA0Bf,KAAKW,QAAU,WAAa,MAChEE,EAAA,OAAAC,IAAA,2CAAKC,MAAO,iBAAiBf,KAAKS,aAChCI,EAAA,QAAAC,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["cardHeadlineCss","IfxCardHeadlineStyle0","CardHeadline","componentWillLoad","cardElement","this","el","closest","cardClass","_a","shadowRoot","querySelector","className","includes","direction","desc","hasDesc","render","h","key","class"],"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"],"mappings":"kDAAA,MAAMA,EAAkB,4fACxB,MAAAC,EAAeD,E,MCOFE,EAAY,M,yEAKvB,iBAAAC,G,MACE,MAAMC,EAAcC,KAAKC,GAAGC,QAAQ,YAEpC,GAAIH,EAAa,CACf,MAAMI,GAAYC,EAAAL,EAAYM,WAAWC,cAAc,YAAQ,MAAAF,SAAA,SAAAA,EAAEG,UAEjE,GAAIJ,GAAaA,EAAUK,SAAS,cAAe,CACjDR,KAAKS,UAAY,Y,CAGnB,MAAMC,EAAOX,EAAYO,cAAc,iBACvC,GAAII,EAAM,CACRV,KAAKW,QAAU,I,GAMrB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,0BAA0Bf,KAAKW,QAAU,WAAa,MAChEE,EAAA,OAAAC,IAAA,2CAAKC,MAAO,iBAAiBf,KAAKS,aAChCI,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-e3f2d25b.entry.js → p-f8d7bbe2.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as s,g as a}from"./p-f619bff3.js";const i=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.group{display:flex;flex-direction:column;justify-content:space-between;gap:12px}.group__label{font:400 0.75rem/1rem "Source Sans 3"}.group__label:empty{display:none}.group__controls{display:flex;flex-wrap:wrap}.group__controls ::slotted(*){margin-left:-1px;margin-top:-1px}.group__caption{display:flex;align-items:center;gap:8px;font:400 0.75rem/1rem "Source Sans 3"}';const o=i;const n=class{constructor(s){e(this,s);this.ifxChange=t(this,"ifxChange",7);this.caption="";this.label="";this.size="regular";this.selectedValue=""}onSegmentSelect(e){const{previousValue:t,selectedValue:s}=this.unselectPreviousSegment(e.detail);this.selectedValue=s;this.ifxChange.emit({previousValue:t,selectedValue:s})}unselectPreviousSegment(e){let t;let s;const a=this.getSegments();a.forEach((a=>{if(a.selected){if(a.segmentIndex!==e){a.selected=false;t=a.value}else{s=a.value}}}));return{previousValue:t,selectedValue:s}}getSegments(){return this.SegmentedControl.querySelectorAll("ifx-segment")}setActiveSegment(){const e=this.getSegments();let t=false;e.forEach(((e,s)=>{e.segmentIndex=s;if(t){if(e.selected)e.selected=false}else{if(e.selected){t=true;this.selectedValue=e.value}}}));if(!t&&e.length){e[0].selected=true;this.selectedValue=e[0].value}}setSegmentSize(){const e=this.getSegments();e.forEach((e=>{e.shadowRoot.querySelector(".segment").classList.add(`segment--${this.size}`)}))}componentDidLoad(){this.setActiveSegment()}render(){return s("div",{key:"2a980fa0fd18e469c2d92c57c80c62b7dfee30e9","aria-value":this.selectedValue,"aria-label":"segmented control",class:"group"},s("div",{key:"bf202bd9f2a4967c5a5c0cd24013242ad4752a80",class:"group__label"},this.label.trim()),s("div",{key:"89e974d972a4ad903193459e9a65b47c89114ab8",class:"group__controls"},s("slot",{key:"10a57ab800389b4a7ae482c152817486a28ae96f"})),this.caption.trim()&&s("div",{key:"f63a61eabf58e03cc0c4b5bae031965b82cb4f2c",class:"group__caption"},s("ifx-icon",{key:"b758bb66d96d48e795565dbd662f1a2fc3648bfe",icon:"cinfo16"})," ",this.caption.trim()))}componentDidRender(){this.setSegmentSize()}get SegmentedControl(){return a(this)}};n.style=o;export{n as ifx_segmented_control};
-//# sourceMappingURL=p-e3f2d25b.entry.js.map
+import{r as e,c as t,h as s,g as a}from"./p-6b122987.js";const i=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.group{display:flex;flex-direction:column;justify-content:space-between;gap:12px}.group__label{font:400 0.75rem/1rem "Source Sans 3"}.group__label:empty{display:none}.group__controls{display:flex;flex-wrap:wrap}.group__controls ::slotted(*){margin-left:-1px;margin-top:-1px}.group__caption{display:flex;align-items:center;gap:8px;font:400 0.75rem/1rem "Source Sans 3"}';const o=i;const n=class{constructor(s){e(this,s);this.ifxChange=t(this,"ifxChange",7);this.selectedValue="";this.caption="";this.label="";this.size="regular"}onSegmentSelect(e){const{previousValue:t,selectedValue:s}=this.unselectPreviousSegment(e.detail);this.selectedValue=s;this.ifxChange.emit({previousValue:t,selectedValue:s})}unselectPreviousSegment(e){let t;let s;const a=this.getSegments();a.forEach((a=>{if(a.selected){if(a.segmentIndex!==e){a.selected=false;t=a.value}else{s=a.value}}}));return{previousValue:t,selectedValue:s}}getSegments(){return this.SegmentedControl.querySelectorAll("ifx-segment")}setActiveSegment(){const e=this.getSegments();let t=false;e.forEach(((e,s)=>{e.segmentIndex=s;if(t){if(e.selected)e.selected=false}else{if(e.selected){t=true;this.selectedValue=e.value}}}));if(!t&&e.length){e[0].selected=true;this.selectedValue=e[0].value}}setSegmentSize(){const e=this.getSegments();e.forEach((e=>{e.shadowRoot.querySelector(".segment").classList.add(`segment--${this.size}`)}))}componentDidLoad(){this.setActiveSegment()}render(){return s("div",{key:"2a980fa0fd18e469c2d92c57c80c62b7dfee30e9","aria-value":this.selectedValue,"aria-label":"segmented control",class:"group"},s("div",{key:"bf202bd9f2a4967c5a5c0cd24013242ad4752a80",class:"group__label"},this.label.trim()),s("div",{key:"89e974d972a4ad903193459e9a65b47c89114ab8",class:"group__controls"},s("slot",{key:"10a57ab800389b4a7ae482c152817486a28ae96f"})),this.caption.trim()&&s("div",{key:"f63a61eabf58e03cc0c4b5bae031965b82cb4f2c",class:"group__caption"},s("ifx-icon",{key:"b758bb66d96d48e795565dbd662f1a2fc3648bfe",icon:"cinfo16"})," ",this.caption.trim()))}componentDidRender(){this.setSegmentSize()}get SegmentedControl(){return a(this)}};n.style=o;export{n as ifx_segmented_control};
+//# sourceMappingURL=p-f8d7bbe2.entry.js.map

package/dist/infineon-design-system-stencil/p-f8d7bbe2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["segmentedControlCss","IfxSegmentedControlStyle0","SegmentedControl","this","selectedValue","onSegmentSelect","event","previousValue","unselectPreviousSegment","detail","ifxChange","emit","newSelectedIndex","segments","getSegments","forEach","control","selected","segmentIndex","value","querySelectorAll","setActiveSegment","activeSegmentedControlFound","idx","length","setSegmentSize","shadowRoot","querySelector","classList","add","size","componentDidLoad","render","h","key","class","label","trim","caption","icon","componentDidRender"],"sources":["src/components/segmented-control/segmented-control.scss?tag=ifx-segmented-control&encapsulation=shadow","src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.group {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    gap: tokens.$ifxSpace150;\n}\n\n.group__label {\n    font: tokens.$ifxBodyBody05;\n\n    &:empty {\n        display: none;\n    }\n}\n\n.group__controls {\n    display: flex;\n    flex-wrap: wrap;\n}\n\n.group__controls ::slotted(*) {\n    margin-left: -1px;\n    margin-top: -1px;\n}\n\n.group__caption {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    font: tokens.$ifxBodyBody05;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\n\n@Component ({\n    tag: 'ifx-segmented-control',\n    styleUrl: 'segmented-control.scss',\n    shadow: true\n})\n\nexport class SegmentedControl {\n    @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n    @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n    @Prop() caption: string = '';\n    @Prop() label: string = '';\n    @Prop() size: 'regular' | 'small' = 'regular';\n\n    @Listen('segmentSelect')\n    onSegmentSelect(event: CustomEvent) {\n        const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n        this.selectedValue = selectedValue;\n        this.ifxChange.emit({ previousValue, selectedValue });\n    }\n\n    private selectedValue: string = '';\n\n    unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n        let previousValue: string;\n        let selectedValue: string;\n\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            if (control.selected) {\n                if (control.segmentIndex !== newSelectedIndex) {\n                    control.selected = false;\n                    previousValue = control.value;\n                } else {\n                    selectedValue = control.value;\n                }\n            }\n        })\n\n        return { previousValue, selectedValue };\n    }\n\n    getSegments(): NodeList {\n        return this.SegmentedControl.querySelectorAll('ifx-segment');\n    }\n\n    setActiveSegment(): void {\n        const segments: NodeList = this.getSegments();\n        let activeSegmentedControlFound = false;\n        segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n            control.segmentIndex = idx;\n            if (activeSegmentedControlFound) {\n                if (control.selected) control.selected = false;\n            } else {\n                if (control.selected) {\n                    activeSegmentedControlFound = true;\n                    this.selectedValue = control.value;\n                }\n            }\n        });\n        if (!activeSegmentedControlFound && segments.length) {\n            (segments[0] as HTMLIfxSegmentElement).selected = true;\n            this.selectedValue = (segments[0] as HTMLIfxSegmentElement).value;\n        }\n    }\n\n\n    setSegmentSize(): void {\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n        });\n    }\n\n    componentDidLoad() {\n        this.setActiveSegment();\n    }\n\n    render() {\n        return (\n            <div aria-value={this.selectedValue} aria-label='segmented control' class='group'>\n                <div class='group__label'>\n                    { this.label.trim() }\n                </div>\n                \n                <div class='group__controls'>\n                    <slot />\n                </div>\n                \n                {\n                    this.caption.trim() &&\n                    <div class='group__caption'>\n                        <ifx-icon icon='cinfo16'></ifx-icon> { this.caption.trim() }\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    componentDidRender() {\n        this.setSegmentSize();\n    }\n}"],"mappings":"yDAAA,MAAMA,EAAsB,0cAC5B,MAAAC,EAAeD,E,MCOFE,EAAgB,M,8DAgBjBC,KAAAC,cAAwB,G,aAXN,G,WACF,G,UACY,S,CAGpC,eAAAC,CAAgBC,GACZ,MAAMC,cAAEA,EAAaH,cAAEA,GAAkBD,KAAKK,wBAAwBF,EAAMG,QAC5EN,KAAKC,cAAgBA,EACrBD,KAAKO,UAAUC,KAAK,CAAEJ,gBAAeH,iB,CAKzC,uBAAAI,CAAwBI,GACpB,IAAIL,EACJ,IAAIH,EAEJ,MAAMS,EAAqBV,KAAKW,cAChCD,EAASE,SAASC,IACd,GAAIA,EAAQC,SAAU,CAClB,GAAID,EAAQE,eAAiBN,EAAkB,CAC3CI,EAAQC,SAAW,MACnBV,EAAgBS,EAAQG,K,KACrB,CACHf,EAAgBY,EAAQG,K,MAKpC,MAAO,CAAEZ,gBAAeH,gB,CAG5B,WAAAU,GACI,OAAOX,KAAKD,iBAAiBkB,iBAAiB,c,CAGlD,gBAAAC,GACI,MAAMR,EAAqBV,KAAKW,cAChC,IAAIQ,EAA8B,MAClCT,EAASE,SAAQ,CAACC,EAAgCO,KAC9CP,EAAQE,aAAeK,EACvB,GAAID,EAA6B,CAC7B,GAAIN,EAAQC,SAAUD,EAAQC,SAAW,K,KACtC,CACH,GAAID,EAAQC,SAAU,CAClBK,EAA8B,KAC9BnB,KAAKC,cAAgBY,EAAQG,K,MAIzC,IAAKG,GAA+BT,EAASW,OAAQ,CAChDX,EAAS,GAA6BI,SAAW,KAClDd,KAAKC,cAAiBS,EAAS,GAA6BM,K,EAKpE,cAAAM,GACI,MAAMZ,EAAqBV,KAAKW,cAChCD,EAASE,SAASC,IACdA,EAAQU,WAAWC,cAAc,YAAYC,UAAUC,IAAI,YAAY1B,KAAK2B,OAAO,G,CAI3F,gBAAAC,GACI5B,KAAKkB,kB,CAGT,MAAAW,GACI,OACIC,EAAA,OAAAC,IAAA,wDAAiB/B,KAAKC,cAAa,aAAa,oBAAoB+B,MAAM,SACtEF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACLhC,KAAKiC,MAAMC,QAGjBJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACPF,EAAA,QAAAC,IAAA,8CAIA/B,KAAKmC,QAAQD,QACbJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,kBACPF,EAAA,YAAAC,IAAA,2CAAUK,KAAK,YAAqB,IAAGpC,KAAKmC,QAAQD,Q,CAOxE,kBAAAG,GACIrC,KAAKsB,gB","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-fbd9e58e.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i,g as t}from"./p-6b122987.js";import{i as o}from"./p-38c8a9b0.js";const a='.container{display:flex;flex-direction:column;gap:10px}.html-wrapper{background:rgb(38, 38, 38);padding:20px;color:white;font-family:monospace;position:sticky;top:0;left:0;z-index:99}.html-wrapper button{position:absolute;right:0px;bottom:0px;background:rgba(0, 0, 0, 0.85);color:#C9CDCF;border:0 none;padding:4px 10px;font-size:0.75rem;font-family:"Nunito Sans";font-weight:700;border-top:1px solid rgba(255, 255, 255, 0.1);border-left:1px solid rgba(255, 255, 255, 0.1);margin-left:-1px;border-radius:4px 0 0 0;cursor:pointer}.html-wrapper .component-name{color:#A8FF60}.html-wrapper .attribute-name{color:rgb(150, 203, 254)}.html-wrapper .attribute-value{color:rgb(180, 116, 221)}.preview__container{box-sizing:border-box;display:flex;align-items:center;padding:2px;flex-wrap:wrap;gap:4px}.preview__container .preview__container-item{display:flex;justify-content:center;align-items:center;border:1px solid #f1f1f1;padding:2px;width:50px;height:50px;position:relative}.preview__container .preview__container-item:active{border-color:#378375}.preview__container .preview__container-item:hover{cursor:pointer}.preview__container .preview__container-item.copied::after{z-index:50;content:"copied!";position:absolute;top:0;left:50px;background-color:#000;color:white;padding:3px;border-radius:4px}';const n=a;const c=class{constructor(i){e(this,i);this.iconsArray=[];this.isCopied=false;this.copiedIndex=undefined;this.htmlTag='<ifx-icon icon="calendar-16"></ifx-icon>';this.iconName=`"c-info-24"`}handleCopiedText(){this.isCopied=true;setTimeout((()=>{this.isCopied=false}),2e3)}copyIconText(e){this.htmlTag=`<ifx-icon icon="${e}"></ifx-icon>`;this.iconName=`"${e}"`}copyHtmlString(){const e=`<ifx-icon icon=${this.iconName}></ifx-icon>`;navigator.clipboard.writeText(e);this.handleCopiedText()}componentWillLoad(){for(let e in o){this.iconsArray.push(e)}}render(){return i("div",{key:"1115df3774a76b620e5a03e11bd3ef59e5ff05fd",class:"container"},i("div",{key:"18a2839c3a492c31215bbbb29cbcd3c0fea50bf0",class:"html-wrapper"},i("span",{key:"488ae76fd009a5fa0c9aaf2727deaa33cae3e3a1",class:"html-tag"},"<"),i("span",{key:"b8e95423cc15694f066d47b29dc03f6b41ff82fe",class:"component-name"},"ifx-icon"),i("span",{key:"7b87f22cbb47743521365708561b9f1eba8cdf32",class:"attribute-name"}," icon"),"=",i("span",{key:"13ec8254b12497b899b8960e26edf219205dbc36",class:"attribute-value"},this.iconName),i("span",{key:"6ae1377d4f1ba39b8e59a86da834e783bc343bb9",class:"html-tag"},">"),i("span",{key:"017d823522230476dded7323580c5e288c75cb47",class:"html-tag"},"</"),i("span",{key:"cd9091d4d3de72c0495c17097d0bcce5a9234441",class:"component-name"},"ifx-icon"),i("span",{key:"408b285174e12b46b9e3c2f8e413f5914c8fa62d",class:"html-tag"},">"),i("button",{key:"ce263f21f91373c8bc2f697fc876c72611297f0f",onClick:()=>this.copyHtmlString()},this.isCopied?"Copied":"Copy")),i("div",{key:"400251cc2a3dc9aaa646ad631fd37b142aa83381",class:"preview__container"},this.iconsArray.map(((e,t)=>i("div",{class:`preview__container-item ${this.isCopied&&this.copiedIndex===t?"copied":""}`,onClick:()=>this.copyIconText(e)},i("ifx-icon",{icon:e}))))))}get el(){return t(this)}};c.style=n;export{c as ifx_icons_preview};
+//# sourceMappingURL=p-fbd9e58e.entry.js.map

package/dist/infineon-design-system-stencil/p-fbd9e58e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["iconsPreviewCss","IfxIconsPreviewStyle0","IconsPreview","handleCopiedText","this","isCopied","setTimeout","copyIconText","icon","htmlTag","iconName","copyHtmlString","copiedTag","navigator","clipboard","writeText","componentWillLoad","icons","iconsArray","push","render","h","key","class","onClick","map","index","copiedIndex"],"sources":["src/components/icons-preview/icons-preview.scss?tag=ifx-icons-preview&encapsulation=shadow","src/components/icons-preview/icons-preview.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.container {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.html-wrapper {\n  background: rgb(38, 38, 38);\n  padding: 20px;\n  color: white;\n  font-family: monospace;\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 99;\n\n  & button {\n    position: absolute;\n    right: 0px;\n    bottom: 0px;\n    background: rgba(0, 0, 0, 0.85);\n    color: #C9CDCF;\n    border: 0 none;\n    padding: 4px 10px;\n    font-size: tokens.$ifxFontSizeXs;\n    font-family: \"Nunito Sans\";\n    font-weight: 700;\n    border-top: 1px solid rgba(255, 255, 255, .1);\n    border-left: 1px solid rgba(255, 255, 255, .1);\n    margin-left: -1px;\n    border-radius: 4px 0 0 0;\n    cursor: pointer;\n  }\n\n  & .component-name {\n    color: #A8FF60;\n  }\n\n  & .attribute-name {\n    color: rgb(150, 203, 254);\n  }\n\n  & .attribute-value {\n    color: rgb(180, 116, 221);\n  }\n\n\n}\n\n.preview__container {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding: 2px;\n  flex-wrap: wrap;\n  gap: 4px;\n\n  & .preview__container-item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid #f1f1f1;\n    padding: 2px;\n    width: 50px;\n    height: 50px;\n    position: relative;\n\n    &:active {\n      border-color: #378375;\n    }\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &.copied {\n      &::after {\n        z-index: 50;\n        content: 'copied!';\n        position: absolute;\n        top: 0;\n        left: 50px;\n        background-color: #000;\n        color: white;\n        padding: 3px;\n        border-radius: 4px;\n      }\n    }\n  }\n}","import { Component, h, Element, State } from \"@stencil/core\";\nimport { icons } from '@infineon/infineon-icons';\n\n@Component({\n  tag: 'ifx-icons-preview',\n  styleUrl: './icons-preview.scss',\n  shadow: true\n})\n\nexport class IconsPreview {\n  @State() iconsArray: string[] = [];\n  @State() isCopied: boolean = false;\n  @State() copiedIndex: number;\n  @State() htmlTag: string = '<ifx-icon icon=\"calendar-16\"></ifx-icon>';\n  @State() iconName: string = `\"c-info-24\"`;\n  @Element() el;\n\n  handleCopiedText() { \n    this.isCopied = true;\n    setTimeout(() => {\n      this.isCopied = false\n    }, 2000);\n  }\n\n  copyIconText(icon) { \n    this.htmlTag = `<ifx-icon icon=\"${icon}\"></ifx-icon>`;\n    this.iconName = `\"${icon}\"`\n  }\n\n  copyHtmlString() { \n    const copiedTag = `<ifx-icon icon=${this.iconName}></ifx-icon>`;\n    navigator.clipboard.writeText(copiedTag);\n    this.handleCopiedText()\n  }\n\n  componentWillLoad() { \n    for(let icon in icons) { \n      this.iconsArray.push(icon)\n    }\n  }\n\n  render() {\n    return (\n      <div class='container'>\n        <div class='html-wrapper'>\n          <span class=\"html-tag\">&lt;</span>\n          <span class=\"component-name\">ifx-icon</span>\n          <span class=\"attribute-name\"> icon</span>=<span class=\"attribute-value\">{this.iconName}</span>\n          <span class=\"html-tag\">&gt;</span>\n          <span class=\"html-tag\">&lt;/</span>\n          <span class=\"component-name\">ifx-icon</span>\n          <span class=\"html-tag\">&gt;</span>\n          <button onClick={() => this.copyHtmlString()}>{this.isCopied ? 'Copied' : 'Copy'}</button>\n        </div>\n        <div class=\"preview__container\">\n          {this.iconsArray.map((icon, index) => \n          <div class={`preview__container-item ${this.isCopied && this.copiedIndex === index ? 'copied' : \"\"}`} onClick={() => this.copyIconText(icon)}>\n            <ifx-icon icon={icon}></ifx-icon>\n          </div>)}\n        </div>\n      </div>\n    )\n  }\n}"],"mappings":"sFAAA,MAAMA,EAAkB,kxCACxB,MAAAC,EAAeD,E,MCQFE,EAAY,M,yCACS,G,cACH,M,wCAEF,2C,cACC,a,CAG5B,gBAAAC,GACEC,KAAKC,SAAW,KAChBC,YAAW,KACTF,KAAKC,SAAW,KAAK,GACpB,I,CAGL,YAAAE,CAAaC,GACXJ,KAAKK,QAAU,mBAAmBD,iBAClCJ,KAAKM,SAAW,IAAIF,I,CAGtB,cAAAG,GACE,MAAMC,EAAY,kBAAkBR,KAAKM,uBACzCG,UAAUC,UAAUC,UAAUH,GAC9BR,KAAKD,kB,CAGP,iBAAAa,GACE,IAAI,IAAIR,KAAQS,EAAO,CACrBb,KAAKc,WAAWC,KAAKX,E,EAIzB,MAAAY,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACTF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,YAAU,KACtBF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBAAgB,YAC5BF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBAAgB,SAAa,IAACF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBAAmBnB,KAAKM,UAC9EW,EAAA,QAAAC,IAAA,2CAAMC,MAAM,YAAU,KACtBF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,YAAU,MACtBF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBAAgB,YAC5BF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,YAAU,KACtBF,EAAA,UAAAC,IAAA,2CAAQE,QAAS,IAAMpB,KAAKO,kBAAmBP,KAAKC,SAAW,SAAW,SAE5EgB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,sBACRnB,KAAKc,WAAWO,KAAI,CAACjB,EAAMkB,IAC5BL,EAAA,OAAKE,MAAO,2BAA2BnB,KAAKC,UAAYD,KAAKuB,cAAgBD,EAAQ,SAAW,KAAMF,QAAS,IAAMpB,KAAKG,aAAaC,IACrIa,EAAA,YAAUb,KAAMA,Q","ignoreList":[]}

package/dist/types/components/accordion/accordion.stories.d.ts

@@ -2,84 +2,18 @@ declare const _default: {
     title: string;
     component: string;
     args: {
-        amountOfItems: number;
-        AriaLevel: number;
         autoCollapse: boolean;
+        AriaLevel: number;
     };
     argTypes: {
         amountOfItems: {
             control: string;
-            name: string;
-            description: string;
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-            };
         };
         AriaLevel: {
             control: string;
             min: number;
             max: number;
             description: string;
-            table: {
-                defaultValue: {
-                    summary: string;
-                };
-                category: string;
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        mutable: {
-            control: string;
-            description: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        autoCollapse: {
-            control: string;
-            description: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        ifxOpen: {
-            action: string;
-            description: string;
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                    detail: string;
-                };
-            };
-        };
-        ifxClose: {
-            action: string;
-            description: string;
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                    detail: string;
-                };
-            };
         };
     };
 };

package/dist/types/components/accordion/accordionItem.d.ts

@@ -2,10 +2,10 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export declare class IfxAccordionItem {
     caption: string;
     open: boolean;
-    AriaLevel: number;
+    AriaLive: number;
     internalOpen: boolean;
-    ifxOpen: EventEmitter;
-    ifxClose: EventEmitter;
+    ifxItemOpen: EventEmitter;
+    ifxItemClose: EventEmitter;
     private contentEl;
     componentWillLoad(): void;
     componentDidLoad(): void;

package/dist/types/components/alert/alert.stories.d.ts

@@ -4,55 +4,32 @@ declare const _default: {
     args: {
         label: string;
         variant: string;
+        showIcon: boolean;
         closable: boolean;
-        icon: string;
+        iconName: string;
         AriaLive: string;
     };
     argTypes: {
-        label: {
-            name: string;
-            description: string;
-            table: {
-                category: string;
-            };
-        };
         variant: {
-            description: string;
             options: string[];
-            control: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
+            control: {
+                type: string;
             };
         };
-        icon: {
-            description: string;
+        iconName: {
             options: any[];
-            control: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
+            control: {
+                type: string;
             };
         };
         closable: {
-            description: string;
             control: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
-            };
+            default: boolean;
         };
         ifxClose: {
             action: string;
             description: string;
             table: {
-                category: string;
                 type: {
                     summary: string;
                     detail: string;
@@ -61,14 +38,10 @@ declare const _default: {
         };
         AriaLive: {
             options: string[];
-            control: string;
-            description: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
+            control: {
+                type: string;
             };
+            description: string;
         };
     };
 };

package/dist/types/components/badge/badge.stories.d.ts

@@ -3,34 +3,14 @@ declare const _default: {
     tags: string[];
     args: {
         label: string;
-        icon: string;
+        icon: boolean;
     };
     argTypes: {
-        label: {
-            description: string;
-            name: string;
-            control: {
-                type: string;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        icon: {
+        iconName: {
+            options: any[];
             control: {
                 type: string;
             };
-            options: any[];
-            description: string;
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-            };
         };
     };
 };

package/dist/types/components/breadcrumb/breadcrumb-item-label.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class BreadcrumbItemLabel {
     icon: string;
-    href: string;
+    url: string;
     target: string;
     el: any;
     breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;

package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts

@@ -2,95 +2,13 @@ declare const _default: {
     title: string;
     tags: string[];
     args: {
-        icon: string;
-        iconArialLabel: string;
-        href: string;
-        hrefOfDropdownItem: string;
-        target: string;
+        icon: boolean;
     };
     argTypes: {
-        icon: {
-            control: {
-                type: string;
-            };
-            options: any[];
-            description: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        target: {
-            control: {
-                type: string;
-            };
-            description: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        iconArialLabel: {
-            control: {
-                type: string;
-            };
-            description: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        href: {
-            control: {
-                type: string;
-            };
-            description: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        hrefOfDropdownItem: {
-            name: string;
-            control: {
-                type: string;
-            };
-            description: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
-                type: {
-                    summary: string;
-                };
-            };
-        };
         ifxDropdownMenuItem: {
             action: string;
             description: string;
             table: {
-                category: string;
                 type: {
                     summary: string;
                     detail: string;

package/dist/types/components/button/button.stories.d.ts

@@ -9,134 +9,58 @@ declare const _default: {
         size: string;
         fullWidth: boolean;
         disabled: boolean;
-        icon: string;
         iconPosition: string;
         href: boolean;
         url: string;
         target: string;
     };
     argTypes: {
-        label: {
-            name: string;
-            description: string;
-            table: {
-                category: string;
-            };
-        };
         icon: {
-            description: string;
-            control: string;
             options: any[];
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
+            control: {
+                type: string;
             };
         };
         variant: {
-            description: string;
-            control: string;
             options: string[];
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
+            control: {
+                type: string;
             };
         };
         theme: {
-            description: string;
-            control: string;
             options: string[];
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
+            control: {
+                type: string;
             };
         };
         type: {
-            description: string;
-            control: string;
             options: string[];
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
+            control: {
+                type: string;
             };
         };
         size: {
             description: string;
-            control: string;
             options: string[];
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
+            control: {
+                type: string;
             };
         };
         fullWidth: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        disabled: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
+            control: {
+                type: string;
             };
         };
         iconPosition: {
-            description: string;
-            control: string;
             options: string[];
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        href: {
-            description: string;
-            control: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        url: {
-            description: string;
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
+            control: {
+                type: string;
             };
         };
         target: {
-            description: string;
-            control: string;
             options: string[];
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
+            control: {
+                type: string;
             };
         };
     };