@infineon/infineon-design-system-stencil 18.2.14 → 18.2.15

package/dist/cjs/{ifx-accordion-item.cjs.entry.js → ifx-accordion_2.cjs.entry.js}

@@ -4,6 +4,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-daa22998.js');
 
+const accordionCss = "*{font-family:\"Source Sans Pro\"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px}";
+
+const Accordion = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.autoCollapse = false;
+  }
+  async onItemOpen(event) {
+    if (this.autoCollapse) {
+      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));
+      for (const item of items) {
+        const itemElement = item;
+        if (itemElement !== event.target && (await itemElement.isOpen())) {
+          itemElement.close();
+        }
+      }
+    }
+  }
+  render() {
+    return (index.h("div", { class: "accordion-wrapper" }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+Accordion.style = accordionCss;
+
 const accordionItemCss = "*{font-family:\"Source Sans Pro\"}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s}.accordion-title:hover{border:1px solid #ebe9e9;background-color:#ebe9e9}.accordion-title{display:flex;align-items:center;padding:1rem;color:#378375;border:1px solid #ebe9e9;cursor:pointer}.accordion-caption{font-weight:600;font-size:1rem}.accordion-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out}.inner-content{padding:24px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.accordion-icon{font-weight:bold;display:inline-block;transition:transform 0.3s;margin-right:0.5rem}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
 
 const IfxAccordionItem = class {
@@ -44,6 +69,7 @@ const IfxAccordionItem = class {
 };
 IfxAccordionItem.style = accordionItemCss;
 
+exports.ifx_accordion = Accordion;
 exports.ifx_accordion_item = IfxAccordionItem;
 
-//# sourceMappingURL=ifx-accordion-item.cjs.entry.js.map
+//# sourceMappingURL=ifx-accordion_2.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ifx-accordion.ifx-accordion-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,sHAAsH;;MCQ9H,SAAS;;;wBAEY,KAAK;;EAGrC,MAAM,UAAU,CAAC,KAAkB;IACjC,IAAG,IAAI,CAAC,YAAY,EAAE;MACpB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;MACzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;QACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE;UAChE,WAAW,CAAC,KAAK,EAAE,CAAC;SACrB;OACF;KACF;GACF;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,qBAAQ,CACJ,EACN;GACH;;;;;AC/BH,MAAM,gBAAgB,GAAG,irBAAirB;;MCQ7rB,gBAAgB;;;;;;gBAEF,KAAK;;EAK9B,UAAU;IACR,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB;SAAM;MACL,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;KACrE;SAAM;MACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;KACtC;GACF;EAGD,MAAM,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;GAC1B;EAGD,MAAM,MAAM;IACV,OAAO,IAAI,CAAC,IAAI,CAAC;GAClB;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,IACrDA,iBAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAC3DA,kBAAM,KAAK,EAAC,gBAAgB,IAC1BA,sBAAU,IAAI,EAAC,iBAAiB,GAAG,CAC9B,EACPA,kBAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACjD,EACNA,iBAAK,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,IAC9EA,iBAAK,KAAK,EAAC,eAAe,IACxBA,qBAAQ,CACJ,CACF,CACF,EACN;GACH;;;;;;;","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: 8px;\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: true,\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\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.isOpen())) {\n          itemElement.close();\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// :host {\n//   display: block;\n// }\n\n.accordion-item {\n  border-radius: 3px;\n  overflow: hidden;\n  transition: all 0.3s;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$color-gray-200;\n  background-color: tokens.$color-gray-200;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  color: tokens.$color-default-500;\n  border: 1px solid tokens.$color-gray-200;\n  cursor: pointer;\n}\n\n.accordion-caption {\n  font-weight: tokens.$font-weight-semi-bold;\n  font-size: tokens.$font-size-m;\n}\n\n.accordion-content {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\n}\n\n.inner-content {\n  padding: 24px;\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.accordion-icon {\n  font-weight: bold;\n  display: inline-block;\n  transition: transform 0.3s;\n  margin-right: 0.5rem;\n}\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Method } 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  @State() open: boolean = false;\n  @Event() ifxItemOpen: EventEmitter;\n  @Event() ifxItemClose: EventEmitter;\n  private contentEl!: HTMLElement;\n\n  toggleOpen() {\n    this.open = !this.open;\n    if (this.open) {\n      this.ifxItemOpen.emit();\n    } else {\n      this.ifxItemClose.emit();\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.open) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  @Method()\n  async close() {\n    this.open = false;\n    this.ifxItemClose.emit();\n  }\n\n  @Method()\n  async isOpen(): Promise<boolean> {\n    return this.open;\n  }\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.open ? 'open' : ''}`}>\n        <div class=\"accordion-title\" onClick={() => this.toggleOpen()}>\n          <span class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-12\" />\n          </span>\n          <span class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)}>\n          <div class=\"inner-content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-daa22998.js');
+
+const faqCss = ".container{padding-top:10px}";
+
+const Faq = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", { class: 'container' }, index.h("ifx-accordion", null, index.h("ifx-accordion-item", { caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), index.h("ifx-accordion-item", { caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), index.h("ifx-accordion-item", { caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), index.h("ifx-accordion-item", { caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), index.h("ifx-accordion-item", { caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+  }
+};
+Faq.style = faqCss;
+
+exports.ifx_faq = Faq;
+
+//# sourceMappingURL=ifx-faq.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ifx-faq.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,MAAM,GAAG,8BAA8B;;MCOhC,GAAG;;;;EAEd,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,WAAW,IACtBA,+BACEA,gCAAoB,OAAO,EAAC,2BAA2B,0dAElC,EACrBA,gCAAoB,OAAO,EAAC,iCAAiC,oNAExC,EACrBA,gCAAoB,OAAO,EAAC,mDAAmD,kVAE1D,EACrBA,gCAAoB,OAAO,EAAC,yCAAyC,gUAEhD,EACrBA,gCAAoB,OAAO,EAAC,iCAAiC,0PAExC,CACP,CACV,EACN;GACH;;;;;;","names":["h"],"sources":["./src/stories/setup-and-installation/faq/faq.scss?tag=ifx-faq&encapsulation=shadow","./src/stories/setup-and-installation/faq/faq.tsx"],"sourcesContent":[".container { \n  padding-top: 10px;\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-faq',\n  styleUrl: './faq.scss',\n  shadow: true,\n})\nexport class Faq {\n\n  render() {\n    return (\n      <div class='container'>\n      <ifx-accordion>\n        <ifx-accordion-item caption=\"What is the Infineon DDS?\">\n          The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application’s structure should be.\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"How do I get access to the DDS?\">\n          You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github.\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"Can I integrate the Infineon DDS into my project?\">\n          Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"Are Infineon DDS components accessable?\">\n          We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here.\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"How to request a new component?\">\n          Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you.\n        </ifx-accordion-item>\n      </ifx-accordion>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/infineon-design-system-stencil.cjs.js

@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["ifx-search-bar.cjs",[[1,"ifx-search-bar",{"icon":[1],"showCloseButton":[4,"show-close-button"],"isOpen":[1028,"is-open"],"hideLabel":[4,"hide-label"],"size":[1],"value":[1025]}]]],["ifx-dropdown-item.cjs",[[1,"ifx-dropdown-item",{"label":[1],"size":[1],"disabled":[4],"icon":[1],"checkable":[4],"value":[1],"url":[1],"target":[1],"checkboxColor":[32]}]]],["ifx-modal.cjs",[[1,"ifx-modal",{"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"alertColor":[1,"alert-color"],"alertIcon":[1,"alert-icon"],"showModal":[32],"open":[64],"close":[64]}]]],["ifx-multi-select-input.cjs",[[1,"ifx-multi-select-input",{"Placeholder":[1,"placeholder"],"isEmpty":[32],"isOverflowing":[32]},[[5,"mousedown","handleOutsideClick"],[0,"closed","handleButtonClose"]]]]],["ifx-accordion-item.cjs",[[1,"ifx-accordion-item",{"caption":[1],"open":[32],"close":[64],"isOpen":[64]}]]],["ifx-alert.cjs",[[1,"ifx-alert",{"color":[1],"icon":[1]}]]],["ifx-breadcrumb-item-label.cjs",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["ifx-chip.cjs",[[1,"ifx-chip",{"placeholder":[1],"isEmpty":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-example.cjs",[[1,"ifx-example",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-icon-button.cjs",[[1,"ifx-icon-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["ifx-icons-preview.cjs",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["ifx-list-item.cjs",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["ifx-navbar.cjs",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32]}]]],["ifx-navbar-menu-item.cjs",[[1,"ifx-navbar-menu-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1]}]]],["ifx-range.cjs",[[1,"ifx-range",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]}]]],["ifx-sidebar-item.cjs",[[1,"ifx-sidebar-item",{"icon":[1],"hasIcon":[32]}]]],["ifx-text-input.cjs",[[1,"ifx-text-input",{"placeholder":[1],"value":[1025],"error":[4],"errorMessage":[1,"error-message"],"success":[4],"disabled":[4],"readonly":[4],"icon":[4]}]]],["ifx-accordion.cjs",[[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["ifx-badge.cjs",[[1,"ifx-badge"]]],["ifx-breadcrumb.cjs",[[1,"ifx-breadcrumb"]]],["ifx-breadcrumb-item.cjs",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["ifx-card.cjs",[[1,"ifx-card",{"direction":[1],"alignment":[1],"hasAll":[1028,"has-all"],"largeSize":[1028,"large-size"],"smallSize":[1028,"small-size"],"hasBtn":[32],"hasDesc":[32]}]]],["ifx-card-headline.cjs",[[1,"ifx-card-headline",{"direction":[1025],"hasDesc":[1028,"has-desc"]}]]],["ifx-card-overline.cjs",[[1,"ifx-card-overline"]]],["ifx-card-text.cjs",[[1,"ifx-card-text",{"hasBtn":[1028,"has-btn"]}]]],["ifx-dropdown.cjs",[[1,"ifx-dropdown",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-dropdown-divider.cjs",[[1,"ifx-dropdown-divider"]]],["ifx-dropdown-menu.cjs",[[1,"ifx-dropdown-menu",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"isShown":[32],"isInsideSelect":[32],"isInsideMultiSelect":[32]}]]],["ifx-filter-input.cjs",[[1,"ifx-filter-input",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"options":[32]}]]],["ifx-footer.cjs",[[1,"ifx-footer",{"variant":[1],"large":[32],"default":[32],"showFacebook":[32]}]]],["ifx-footer-column.cjs",[[1,"ifx-footer-column"]]],["ifx-list-group.cjs",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["ifx-list-notification.cjs",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["ifx-progress-bar.cjs",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]}]]],["ifx-radio-button.cjs",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]}]]],["ifx-select-input.cjs",[[1,"ifx-select-input",null,[[5,"mousedown","handleOutsideClick"]]]]],["ifx-sidebar.cjs",[[1,"ifx-sidebar"]]],["ifx-spinner.cjs",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["ifx-status.cjs",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["ifx-switch.cjs",[[1,"ifx-switch",{"value":[4],"name":[1],"internalValue":[32]}]]],["ifx-tab.cjs",[[4,"ifx-tab",{"header":[1]}]]],["ifx-tabs.cjs",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"small":[4],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32]},[[0,"slotchange","onSlotChange"]]]]],["ifx-tag.cjs",[[1,"ifx-tag",{"label":[1]}]]],["ifx-icon.cjs",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["ifx-button.cjs",[[1,"ifx-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-checkbox.cjs",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"internalValue":[32]}]]],["ifx-multi-select-input-item.cjs",[[1,"ifx-multi-select-input-item",{"content":[1]}]]],["ifx-number-indicator.cjs",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["ifx-link_2.cjs",[[1,"ifx-search-input",{"value":[1025],"width":[1],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"borderColor":[1,"border-color"],"size":[1],"insideDropdown":[32]}],[1,"ifx-link",{"href":[1],"target":[1],"color":[1],"bold":[4],"underline":[4]}]]]], options);
+  return index.bootstrapLazy([["ifx-faq.cjs",[[1,"ifx-faq"]]],["ifx-search-bar.cjs",[[1,"ifx-search-bar",{"icon":[1],"showCloseButton":[4,"show-close-button"],"isOpen":[1028,"is-open"],"hideLabel":[4,"hide-label"],"size":[1],"value":[1025]}]]],["ifx-dropdown-item.cjs",[[1,"ifx-dropdown-item",{"label":[1],"size":[1],"disabled":[4],"icon":[1],"checkable":[4],"value":[1],"url":[1],"target":[1],"checkboxColor":[32]}]]],["ifx-modal.cjs",[[1,"ifx-modal",{"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"alertColor":[1,"alert-color"],"alertIcon":[1,"alert-icon"],"showModal":[32],"open":[64],"close":[64]}]]],["ifx-multi-select-input.cjs",[[1,"ifx-multi-select-input",{"Placeholder":[1,"placeholder"],"isEmpty":[32],"isOverflowing":[32]},[[5,"mousedown","handleOutsideClick"],[0,"closed","handleButtonClose"]]]]],["ifx-alert.cjs",[[1,"ifx-alert",{"color":[1],"icon":[1]}]]],["ifx-breadcrumb-item-label.cjs",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["ifx-chip.cjs",[[1,"ifx-chip",{"placeholder":[1],"isEmpty":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-example.cjs",[[1,"ifx-example",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-icon-button.cjs",[[1,"ifx-icon-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["ifx-icons-preview.cjs",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["ifx-list-item.cjs",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["ifx-navbar.cjs",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32]}]]],["ifx-navbar-menu-item.cjs",[[1,"ifx-navbar-menu-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1]}]]],["ifx-range.cjs",[[1,"ifx-range",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]}]]],["ifx-sidebar-item.cjs",[[1,"ifx-sidebar-item",{"icon":[1],"hasIcon":[32]}]]],["ifx-text-input.cjs",[[1,"ifx-text-input",{"placeholder":[1],"value":[1025],"error":[4],"errorMessage":[1,"error-message"],"success":[4],"disabled":[4],"readonly":[4],"icon":[4]}]]],["ifx-badge.cjs",[[1,"ifx-badge"]]],["ifx-breadcrumb.cjs",[[1,"ifx-breadcrumb"]]],["ifx-breadcrumb-item.cjs",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["ifx-card.cjs",[[1,"ifx-card",{"direction":[1],"alignment":[1],"hasAll":[1028,"has-all"],"largeSize":[1028,"large-size"],"smallSize":[1028,"small-size"],"hasBtn":[32],"hasDesc":[32]}]]],["ifx-card-headline.cjs",[[1,"ifx-card-headline",{"direction":[1025],"hasDesc":[1028,"has-desc"]}]]],["ifx-card-overline.cjs",[[1,"ifx-card-overline"]]],["ifx-card-text.cjs",[[1,"ifx-card-text",{"hasBtn":[1028,"has-btn"]}]]],["ifx-dropdown.cjs",[[1,"ifx-dropdown",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-dropdown-divider.cjs",[[1,"ifx-dropdown-divider"]]],["ifx-dropdown-menu.cjs",[[1,"ifx-dropdown-menu",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"isShown":[32],"isInsideSelect":[32],"isInsideMultiSelect":[32]}]]],["ifx-filter-input.cjs",[[1,"ifx-filter-input",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"options":[32]}]]],["ifx-footer.cjs",[[1,"ifx-footer",{"variant":[1],"large":[32],"default":[32],"showFacebook":[32]}]]],["ifx-footer-column.cjs",[[1,"ifx-footer-column"]]],["ifx-list-group.cjs",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["ifx-list-notification.cjs",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["ifx-progress-bar.cjs",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]}]]],["ifx-radio-button.cjs",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]}]]],["ifx-select-input.cjs",[[1,"ifx-select-input",null,[[5,"mousedown","handleOutsideClick"]]]]],["ifx-sidebar.cjs",[[1,"ifx-sidebar"]]],["ifx-spinner.cjs",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["ifx-status.cjs",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["ifx-switch.cjs",[[1,"ifx-switch",{"value":[4],"name":[1],"internalValue":[32]}]]],["ifx-tab.cjs",[[4,"ifx-tab",{"header":[1]}]]],["ifx-tabs.cjs",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"small":[4],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32]},[[0,"slotchange","onSlotChange"]]]]],["ifx-tag.cjs",[[1,"ifx-tag",{"label":[1]}]]],["ifx-icon.cjs",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["ifx-button.cjs",[[1,"ifx-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-checkbox.cjs",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"internalValue":[32]}]]],["ifx-multi-select-input-item.cjs",[[1,"ifx-multi-select-input-item",{"content":[1]}]]],["ifx-number-indicator.cjs",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["ifx-accordion_2.cjs",[[1,"ifx-accordion-item",{"caption":[1],"open":[32],"close":[64],"isOpen":[64]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["ifx-link_2.cjs",[[1,"ifx-search-input",{"value":[1025],"width":[1],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"borderColor":[1,"border-color"],"size":[1],"insideDropdown":[32]}],[1,"ifx-link",{"href":[1],"target":[1],"color":[1],"bold":[4],"underline":[4]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["ifx-search-bar.cjs",[[1,"ifx-search-bar",{"icon":[1],"showCloseButton":[4,"show-close-button"],"isOpen":[1028,"is-open"],"hideLabel":[4,"hide-label"],"size":[1],"value":[1025]}]]],["ifx-dropdown-item.cjs",[[1,"ifx-dropdown-item",{"label":[1],"size":[1],"disabled":[4],"icon":[1],"checkable":[4],"value":[1],"url":[1],"target":[1],"checkboxColor":[32]}]]],["ifx-modal.cjs",[[1,"ifx-modal",{"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"alertColor":[1,"alert-color"],"alertIcon":[1,"alert-icon"],"showModal":[32],"open":[64],"close":[64]}]]],["ifx-multi-select-input.cjs",[[1,"ifx-multi-select-input",{"Placeholder":[1,"placeholder"],"isEmpty":[32],"isOverflowing":[32]},[[5,"mousedown","handleOutsideClick"],[0,"closed","handleButtonClose"]]]]],["ifx-accordion-item.cjs",[[1,"ifx-accordion-item",{"caption":[1],"open":[32],"close":[64],"isOpen":[64]}]]],["ifx-alert.cjs",[[1,"ifx-alert",{"color":[1],"icon":[1]}]]],["ifx-breadcrumb-item-label.cjs",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["ifx-chip.cjs",[[1,"ifx-chip",{"placeholder":[1],"isEmpty":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-example.cjs",[[1,"ifx-example",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-icon-button.cjs",[[1,"ifx-icon-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["ifx-icons-preview.cjs",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["ifx-list-item.cjs",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["ifx-navbar.cjs",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32]}]]],["ifx-navbar-menu-item.cjs",[[1,"ifx-navbar-menu-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1]}]]],["ifx-range.cjs",[[1,"ifx-range",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]}]]],["ifx-sidebar-item.cjs",[[1,"ifx-sidebar-item",{"icon":[1],"hasIcon":[32]}]]],["ifx-text-input.cjs",[[1,"ifx-text-input",{"placeholder":[1],"value":[1025],"error":[4],"errorMessage":[1,"error-message"],"success":[4],"disabled":[4],"readonly":[4],"icon":[4]}]]],["ifx-accordion.cjs",[[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["ifx-badge.cjs",[[1,"ifx-badge"]]],["ifx-breadcrumb.cjs",[[1,"ifx-breadcrumb"]]],["ifx-breadcrumb-item.cjs",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["ifx-card.cjs",[[1,"ifx-card",{"direction":[1],"alignment":[1],"hasAll":[1028,"has-all"],"largeSize":[1028,"large-size"],"smallSize":[1028,"small-size"],"hasBtn":[32],"hasDesc":[32]}]]],["ifx-card-headline.cjs",[[1,"ifx-card-headline",{"direction":[1025],"hasDesc":[1028,"has-desc"]}]]],["ifx-card-overline.cjs",[[1,"ifx-card-overline"]]],["ifx-card-text.cjs",[[1,"ifx-card-text",{"hasBtn":[1028,"has-btn"]}]]],["ifx-dropdown.cjs",[[1,"ifx-dropdown",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-dropdown-divider.cjs",[[1,"ifx-dropdown-divider"]]],["ifx-dropdown-menu.cjs",[[1,"ifx-dropdown-menu",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"isShown":[32],"isInsideSelect":[32],"isInsideMultiSelect":[32]}]]],["ifx-filter-input.cjs",[[1,"ifx-filter-input",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"options":[32]}]]],["ifx-footer.cjs",[[1,"ifx-footer",{"variant":[1],"large":[32],"default":[32],"showFacebook":[32]}]]],["ifx-footer-column.cjs",[[1,"ifx-footer-column"]]],["ifx-list-group.cjs",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["ifx-list-notification.cjs",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["ifx-progress-bar.cjs",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]}]]],["ifx-radio-button.cjs",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]}]]],["ifx-select-input.cjs",[[1,"ifx-select-input",null,[[5,"mousedown","handleOutsideClick"]]]]],["ifx-sidebar.cjs",[[1,"ifx-sidebar"]]],["ifx-spinner.cjs",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["ifx-status.cjs",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["ifx-switch.cjs",[[1,"ifx-switch",{"value":[4],"name":[1],"internalValue":[32]}]]],["ifx-tab.cjs",[[4,"ifx-tab",{"header":[1]}]]],["ifx-tabs.cjs",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"small":[4],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32]},[[0,"slotchange","onSlotChange"]]]]],["ifx-tag.cjs",[[1,"ifx-tag",{"label":[1]}]]],["ifx-icon.cjs",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["ifx-button.cjs",[[1,"ifx-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-checkbox.cjs",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"internalValue":[32]}]]],["ifx-multi-select-input-item.cjs",[[1,"ifx-multi-select-input-item",{"content":[1]}]]],["ifx-number-indicator.cjs",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["ifx-link_2.cjs",[[1,"ifx-search-input",{"value":[1025],"width":[1],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"borderColor":[1,"border-color"],"size":[1],"insideDropdown":[32]}],[1,"ifx-link",{"href":[1],"target":[1],"color":[1],"bold":[4],"underline":[4]}]]]], options);
+  return index.bootstrapLazy([["ifx-faq.cjs",[[1,"ifx-faq"]]],["ifx-search-bar.cjs",[[1,"ifx-search-bar",{"icon":[1],"showCloseButton":[4,"show-close-button"],"isOpen":[1028,"is-open"],"hideLabel":[4,"hide-label"],"size":[1],"value":[1025]}]]],["ifx-dropdown-item.cjs",[[1,"ifx-dropdown-item",{"label":[1],"size":[1],"disabled":[4],"icon":[1],"checkable":[4],"value":[1],"url":[1],"target":[1],"checkboxColor":[32]}]]],["ifx-modal.cjs",[[1,"ifx-modal",{"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"alertColor":[1,"alert-color"],"alertIcon":[1,"alert-icon"],"showModal":[32],"open":[64],"close":[64]}]]],["ifx-multi-select-input.cjs",[[1,"ifx-multi-select-input",{"Placeholder":[1,"placeholder"],"isEmpty":[32],"isOverflowing":[32]},[[5,"mousedown","handleOutsideClick"],[0,"closed","handleButtonClose"]]]]],["ifx-alert.cjs",[[1,"ifx-alert",{"color":[1],"icon":[1]}]]],["ifx-breadcrumb-item-label.cjs",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["ifx-chip.cjs",[[1,"ifx-chip",{"placeholder":[1],"isEmpty":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-example.cjs",[[1,"ifx-example",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-icon-button.cjs",[[1,"ifx-icon-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["ifx-icons-preview.cjs",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["ifx-list-item.cjs",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["ifx-navbar.cjs",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32]}]]],["ifx-navbar-menu-item.cjs",[[1,"ifx-navbar-menu-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1]}]]],["ifx-range.cjs",[[1,"ifx-range",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]}]]],["ifx-sidebar-item.cjs",[[1,"ifx-sidebar-item",{"icon":[1],"hasIcon":[32]}]]],["ifx-text-input.cjs",[[1,"ifx-text-input",{"placeholder":[1],"value":[1025],"error":[4],"errorMessage":[1,"error-message"],"success":[4],"disabled":[4],"readonly":[4],"icon":[4]}]]],["ifx-badge.cjs",[[1,"ifx-badge"]]],["ifx-breadcrumb.cjs",[[1,"ifx-breadcrumb"]]],["ifx-breadcrumb-item.cjs",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["ifx-card.cjs",[[1,"ifx-card",{"direction":[1],"alignment":[1],"hasAll":[1028,"has-all"],"largeSize":[1028,"large-size"],"smallSize":[1028,"small-size"],"hasBtn":[32],"hasDesc":[32]}]]],["ifx-card-headline.cjs",[[1,"ifx-card-headline",{"direction":[1025],"hasDesc":[1028,"has-desc"]}]]],["ifx-card-overline.cjs",[[1,"ifx-card-overline"]]],["ifx-card-text.cjs",[[1,"ifx-card-text",{"hasBtn":[1028,"has-btn"]}]]],["ifx-dropdown.cjs",[[1,"ifx-dropdown",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-dropdown-divider.cjs",[[1,"ifx-dropdown-divider"]]],["ifx-dropdown-menu.cjs",[[1,"ifx-dropdown-menu",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"isShown":[32],"isInsideSelect":[32],"isInsideMultiSelect":[32]}]]],["ifx-filter-input.cjs",[[1,"ifx-filter-input",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"options":[32]}]]],["ifx-footer.cjs",[[1,"ifx-footer",{"variant":[1],"large":[32],"default":[32],"showFacebook":[32]}]]],["ifx-footer-column.cjs",[[1,"ifx-footer-column"]]],["ifx-list-group.cjs",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["ifx-list-notification.cjs",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["ifx-progress-bar.cjs",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]}]]],["ifx-radio-button.cjs",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]}]]],["ifx-select-input.cjs",[[1,"ifx-select-input",null,[[5,"mousedown","handleOutsideClick"]]]]],["ifx-sidebar.cjs",[[1,"ifx-sidebar"]]],["ifx-spinner.cjs",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["ifx-status.cjs",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["ifx-switch.cjs",[[1,"ifx-switch",{"value":[4],"name":[1],"internalValue":[32]}]]],["ifx-tab.cjs",[[4,"ifx-tab",{"header":[1]}]]],["ifx-tabs.cjs",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"small":[4],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32]},[[0,"slotchange","onSlotChange"]]]]],["ifx-tag.cjs",[[1,"ifx-tag",{"label":[1]}]]],["ifx-icon.cjs",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["ifx-button.cjs",[[1,"ifx-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-checkbox.cjs",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"internalValue":[32]}]]],["ifx-multi-select-input-item.cjs",[[1,"ifx-multi-select-input-item",{"content":[1]}]]],["ifx-number-indicator.cjs",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["ifx-accordion_2.cjs",[[1,"ifx-accordion-item",{"caption":[1],"open":[32],"close":[64],"isOpen":[64]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["ifx-link_2.cjs",[[1,"ifx-search-input",{"value":[1025],"width":[1],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"borderColor":[1,"border-color"],"size":[1],"insideDropdown":[32]}],[1,"ifx-link",{"href":[1],"target":[1],"color":[1],"bold":[4],"underline":[4]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -49,7 +49,8 @@
     "./components/tabs/tabs.js",
     "./components/tag/tag.js",
     "./components/template-story-with-markdown/example.js",
-    "./components/text-input/text-input.js"
+    "./components/text-input/text-input.js",
+    "./stories/setup-and-installation/faq/faq.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/stories/setup-and-installation/faq/faq.css

@@ -0,0 +1,3 @@
+.container {
+  padding-top: 10px;
+}

package/dist/collection/stories/setup-and-installation/faq/faq.js

@@ -0,0 +1,19 @@
+import { h } from '@stencil/core';
+export class Faq {
+  render() {
+    return (h("div", { class: 'container' }, h("ifx-accordion", null, h("ifx-accordion-item", { caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+  }
+  static get is() { return "ifx-faq"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["./faq.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["faq.css"]
+    };
+  }
+}
+//# sourceMappingURL=faq.js.map

package/dist/collection/stories/setup-and-installation/faq/faq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"faq.js","sourceRoot":"","sources":["../../../../src/stories/setup-and-installation/faq/faq.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,GAAG;EAEd,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,WAAW;MACtB;QACE,0BAAoB,OAAO,EAAC,2BAA2B,0dAElC;QACrB,0BAAoB,OAAO,EAAC,iCAAiC,oNAExC;QACrB,0BAAoB,OAAO,EAAC,mDAAmD,kVAE1D;QACrB,0BAAoB,OAAO,EAAC,yCAAyC,gUAEhD;QACrB,0BAAoB,OAAO,EAAC,iCAAiC,0PAExC,CACP,CACV,CACP,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-faq',\n  styleUrl: './faq.scss',\n  shadow: true,\n})\nexport class Faq {\n\n  render() {\n    return (\n      <div class='container'>\n      <ifx-accordion>\n        <ifx-accordion-item caption=\"What is the Infineon DDS?\">\n          The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application’s structure should be.\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"How do I get access to the DDS?\">\n          You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github.\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"Can I integrate the Infineon DDS into my project?\">\n          Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"Are Infineon DDS components accessable?\">\n          We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here.\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"How to request a new component?\">\n          Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you.\n        </ifx-accordion-item>\n      </ifx-accordion>\n      </div>\n    );\n  }\n}\n"]}

package/dist/components/accordion.js

@@ -0,0 +1,47 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const accordionCss = "*{font-family:\"Source Sans Pro\"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px}";
+
+const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.autoCollapse = false;
+  }
+  async onItemOpen(event) {
+    if (this.autoCollapse) {
+      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));
+      for (const item of items) {
+        const itemElement = item;
+        if (itemElement !== event.target && (await itemElement.isOpen())) {
+          itemElement.close();
+        }
+      }
+    }
+  }
+  render() {
+    return (h("div", { class: "accordion-wrapper" }, h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return accordionCss; }
+}, [1, "ifx-accordion", {
+    "autoCollapse": [4, "auto-collapse"]
+  }, [[0, "ifxItemOpen", "onItemOpen"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ifx-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ifx-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Accordion);
+      }
+      break;
+  } });
+}
+
+export { Accordion as A, defineCustomElement as d };
+
+//# sourceMappingURL=accordion.js.map

package/dist/components/accordion.js.map

@@ -0,0 +1 @@
+{"file":"accordion.js","mappings":";;AAAA,MAAM,YAAY,GAAG,sHAAsH;;MCQ9H,SAAS;;;;;wBAEY,KAAK;;EAGrC,MAAM,UAAU,CAAC,KAAkB;IACjC,IAAG,IAAI,CAAC,YAAY,EAAE;MACpB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;MACzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;QACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE;UAChE,WAAW,CAAC,KAAK,EAAE,CAAC;SACrB;OACF;KACF;GACF;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC5B,eAAQ,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","./src/components/accordion/accordion.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: 8px;\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: true,\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\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.isOpen())) {\n          itemElement.close();\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/accordionItem.js

@@ -0,0 +1,71 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './infineonIconStencil.js';
+
+const accordionItemCss = "*{font-family:\"Source Sans Pro\"}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s}.accordion-title:hover{border:1px solid #ebe9e9;background-color:#ebe9e9}.accordion-title{display:flex;align-items:center;padding:1rem;color:#378375;border:1px solid #ebe9e9;cursor:pointer}.accordion-caption{font-weight:600;font-size:1rem}.accordion-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out}.inner-content{padding:24px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.accordion-icon{font-weight:bold;display:inline-block;transition:transform 0.3s;margin-right:0.5rem}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
+
+const IfxAccordionItem = /*@__PURE__*/ proxyCustomElement(class IfxAccordionItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ifxItemOpen = createEvent(this, "ifxItemOpen", 7);
+    this.ifxItemClose = createEvent(this, "ifxItemClose", 7);
+    this.caption = undefined;
+    this.open = false;
+  }
+  toggleOpen() {
+    this.open = !this.open;
+    if (this.open) {
+      this.ifxItemOpen.emit();
+    }
+    else {
+      this.ifxItemClose.emit();
+    }
+  }
+  componentDidUpdate() {
+    if (this.open) {
+      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;
+    }
+    else {
+      this.contentEl.style.maxHeight = '0';
+    }
+  }
+  async close() {
+    this.open = false;
+    this.ifxItemClose.emit();
+  }
+  async isOpen() {
+    return this.open;
+  }
+  render() {
+    return (h("div", { class: `accordion-item ${this.open ? 'open' : ''}` }, h("div", { class: "accordion-title", onClick: () => this.toggleOpen() }, h("span", { class: "accordion-icon" }, h("ifx-icon", { icon: "chevron-down-12" })), h("span", { class: "accordion-caption" }, this.caption)), h("div", { class: "accordion-content", ref: (el) => (this.contentEl = el) }, h("div", { class: "inner-content" }, h("slot", null)))));
+  }
+  static get style() { return accordionItemCss; }
+}, [1, "ifx-accordion-item", {
+    "caption": [1],
+    "open": [32],
+    "close": [64],
+    "isOpen": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ifx-accordion-item", "ifx-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ifx-accordion-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, IfxAccordionItem);
+      }
+      break;
+    case "ifx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { IfxAccordionItem as I, defineCustomElement as d };
+
+//# sourceMappingURL=accordionItem.js.map

package/dist/components/accordionItem.js.map

@@ -0,0 +1 @@
+{"file":"accordionItem.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,irBAAirB;;MCQ7rB,gBAAgB;;;;;;;;gBAEF,KAAK;;EAK9B,UAAU;IACR,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB;SAAM;MACL,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;KACrE;SAAM;MACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;KACtC;GACF;EAGD,MAAM,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;GAC1B;EAGD,MAAM,MAAM;IACV,OAAO,IAAI,CAAC,IAAI,CAAC;GAClB;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,IACrD,WAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAC3D,YAAM,KAAK,EAAC,gBAAgB,IAC1B,gBAAU,IAAI,EAAC,iBAAiB,GAAG,CAC9B,EACP,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACjD,EACN,WAAK,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,IAC9E,WAAK,KAAK,EAAC,eAAe,IACxB,eAAQ,CACJ,CACF,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","./src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n// :host {\n//   display: block;\n// }\n\n.accordion-item {\n  border-radius: 3px;\n  overflow: hidden;\n  transition: all 0.3s;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$color-gray-200;\n  background-color: tokens.$color-gray-200;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  color: tokens.$color-default-500;\n  border: 1px solid tokens.$color-gray-200;\n  cursor: pointer;\n}\n\n.accordion-caption {\n  font-weight: tokens.$font-weight-semi-bold;\n  font-size: tokens.$font-size-m;\n}\n\n.accordion-content {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\n}\n\n.inner-content {\n  padding: 24px;\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.accordion-icon {\n  font-weight: bold;\n  display: inline-block;\n  transition: transform 0.3s;\n  margin-right: 0.5rem;\n}\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Method } 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  @State() open: boolean = false;\n  @Event() ifxItemOpen: EventEmitter;\n  @Event() ifxItemClose: EventEmitter;\n  private contentEl!: HTMLElement;\n\n  toggleOpen() {\n    this.open = !this.open;\n    if (this.open) {\n      this.ifxItemOpen.emit();\n    } else {\n      this.ifxItemClose.emit();\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.open) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  @Method()\n  async close() {\n    this.open = false;\n    this.ifxItemClose.emit();\n  }\n\n  @Method()\n  async isOpen(): Promise<boolean> {\n    return this.open;\n  }\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.open ? 'open' : ''}`}>\n        <div class=\"accordion-title\" onClick={() => this.toggleOpen()}>\n          <span class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-12\" />\n          </span>\n          <span class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)}>\n          <div class=\"inner-content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ifx-accordion-item.js

@@ -1,70 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './infineonIconStencil.js';
-
-const accordionItemCss = "*{font-family:\"Source Sans Pro\"}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s}.accordion-title:hover{border:1px solid #ebe9e9;background-color:#ebe9e9}.accordion-title{display:flex;align-items:center;padding:1rem;color:#378375;border:1px solid #ebe9e9;cursor:pointer}.accordion-caption{font-weight:600;font-size:1rem}.accordion-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out}.inner-content{padding:24px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.accordion-icon{font-weight:bold;display:inline-block;transition:transform 0.3s;margin-right:0.5rem}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
-
-const IfxAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class IfxAccordionItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.ifxItemOpen = createEvent(this, "ifxItemOpen", 7);
-    this.ifxItemClose = createEvent(this, "ifxItemClose", 7);
-    this.caption = undefined;
-    this.open = false;
-  }
-  toggleOpen() {
-    this.open = !this.open;
-    if (this.open) {
-      this.ifxItemOpen.emit();
-    }
-    else {
-      this.ifxItemClose.emit();
-    }
-  }
-  componentDidUpdate() {
-    if (this.open) {
-      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;
-    }
-    else {
-      this.contentEl.style.maxHeight = '0';
-    }
-  }
-  async close() {
-    this.open = false;
-    this.ifxItemClose.emit();
-  }
-  async isOpen() {
-    return this.open;
-  }
-  render() {
-    return (h("div", { class: `accordion-item ${this.open ? 'open' : ''}` }, h("div", { class: "accordion-title", onClick: () => this.toggleOpen() }, h("span", { class: "accordion-icon" }, h("ifx-icon", { icon: "chevron-down-12" })), h("span", { class: "accordion-caption" }, this.caption)), h("div", { class: "accordion-content", ref: (el) => (this.contentEl = el) }, h("div", { class: "inner-content" }, h("slot", null)))));
-  }
-  static get style() { return accordionItemCss; }
-}, [1, "ifx-accordion-item", {
-    "caption": [1],
-    "open": [32],
-    "close": [64],
-    "isOpen": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ifx-accordion-item", "ifx-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ifx-accordion-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, IfxAccordionItem$1);
-      }
-      break;
-    case "ifx-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './accordionItem.js';
 
 const IfxAccordionItem = IfxAccordionItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-accordion-item.js.map

@@ -1 +1 @@
-{"file":"ifx-accordion-item.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,irBAAirB;;MCQ7rBA,kBAAgB;;;;;;;;gBAEF,KAAK;;EAK9B,UAAU;IACR,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB;SAAM;MACL,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;KACrE;SAAM;MACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;KACtC;GACF;EAGD,MAAM,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;GAC1B;EAGD,MAAM,MAAM;IACV,OAAO,IAAI,CAAC,IAAI,CAAC;GAClB;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,IACrD,WAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAC3D,YAAM,KAAK,EAAC,gBAAgB,IAC1B,gBAAU,IAAI,EAAC,iBAAiB,GAAG,CAC9B,EACP,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACjD,EACN,WAAK,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,IAC9E,WAAK,KAAK,EAAC,eAAe,IACxB,eAAQ,CACJ,CACF,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IfxAccordionItem"],"sources":["./src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","./src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n// :host {\n//   display: block;\n// }\n\n.accordion-item {\n  border-radius: 3px;\n  overflow: hidden;\n  transition: all 0.3s;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$color-gray-200;\n  background-color: tokens.$color-gray-200;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  color: tokens.$color-default-500;\n  border: 1px solid tokens.$color-gray-200;\n  cursor: pointer;\n}\n\n.accordion-caption {\n  font-weight: tokens.$font-weight-semi-bold;\n  font-size: tokens.$font-size-m;\n}\n\n.accordion-content {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\n}\n\n.inner-content {\n  padding: 24px;\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.accordion-icon {\n  font-weight: bold;\n  display: inline-block;\n  transition: transform 0.3s;\n  margin-right: 0.5rem;\n}\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Method } 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  @State() open: boolean = false;\n  @Event() ifxItemOpen: EventEmitter;\n  @Event() ifxItemClose: EventEmitter;\n  private contentEl!: HTMLElement;\n\n  toggleOpen() {\n    this.open = !this.open;\n    if (this.open) {\n      this.ifxItemOpen.emit();\n    } else {\n      this.ifxItemClose.emit();\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.open) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  @Method()\n  async close() {\n    this.open = false;\n    this.ifxItemClose.emit();\n  }\n\n  @Method()\n  async isOpen(): Promise<boolean> {\n    return this.open;\n  }\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.open ? 'open' : ''}`}>\n        <div class=\"accordion-title\" onClick={() => this.toggleOpen()}>\n          <span class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-12\" />\n          </span>\n          <span class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)}>\n          <div class=\"inner-content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-accordion-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ifx-accordion.js

@@ -1,46 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const accordionCss = "*{font-family:\"Source Sans Pro\"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px}";
-
-const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.autoCollapse = false;
-  }
-  async onItemOpen(event) {
-    if (this.autoCollapse) {
-      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));
-      for (const item of items) {
-        const itemElement = item;
-        if (itemElement !== event.target && (await itemElement.isOpen())) {
-          itemElement.close();
-        }
-      }
-    }
-  }
-  render() {
-    return (h("div", { class: "accordion-wrapper" }, h("slot", null)));
-  }
-  get el() { return this; }
-  static get style() { return accordionCss; }
-}, [1, "ifx-accordion", {
-    "autoCollapse": [4, "auto-collapse"]
-  }, [[0, "ifxItemOpen", "onItemOpen"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ifx-accordion"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ifx-accordion":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Accordion);
-      }
-      break;
-  } });
-}
+import { A as Accordion, d as defineCustomElement$1 } from './accordion.js';
 
 const IfxAccordion = Accordion;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-accordion.js.map

@@ -1 +1 @@
-{"file":"ifx-accordion.js","mappings":";;AAAA,MAAM,YAAY,GAAG,sHAAsH;;MCQ9H,SAAS;;;;;wBAEY,KAAK;;EAGrC,MAAM,UAAU,CAAC,KAAkB;IACjC,IAAG,IAAI,CAAC,YAAY,EAAE;MACpB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;MACzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;QACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE;UAChE,WAAW,CAAC,KAAK,EAAE,CAAC;SACrB;OACF;KACF;GACF;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC5B,eAAQ,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","./src/components/accordion/accordion.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: 8px;\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: true,\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\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.isOpen())) {\n          itemElement.close();\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-accordion.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ifx-faq.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IfxFaq extends Components.IfxFaq, HTMLElement {}
+export const IfxFaq: {
+  prototype: IfxFaq;
+  new (): IfxFaq;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ifx-faq.js

@@ -0,0 +1,53 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './accordion.js';
+import { d as defineCustomElement$3 } from './accordionItem.js';
+import { d as defineCustomElement$2 } from './infineonIconStencil.js';
+
+const faqCss = ".container{padding-top:10px}";
+
+const Faq = /*@__PURE__*/ proxyCustomElement(class Faq extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("div", { class: 'container' }, h("ifx-accordion", null, h("ifx-accordion-item", { caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+  }
+  static get style() { return faqCss; }
+}, [1, "ifx-faq"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ifx-faq", "ifx-accordion", "ifx-accordion-item", "ifx-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ifx-faq":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Faq);
+      }
+      break;
+    case "ifx-accordion":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ifx-accordion-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ifx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IfxFaq = Faq;
+const defineCustomElement = defineCustomElement$1;
+
+export { IfxFaq, defineCustomElement };
+
+//# sourceMappingURL=ifx-faq.js.map

package/dist/components/ifx-faq.js.map

@@ -0,0 +1 @@
+{"file":"ifx-faq.js","mappings":";;;;;AAAA,MAAM,MAAM,GAAG,8BAA8B;;MCOhC,GAAG;;;;;;EAEd,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,WAAW,IACtB,yBACE,0BAAoB,OAAO,EAAC,2BAA2B,0dAElC,EACrB,0BAAoB,OAAO,EAAC,iCAAiC,oNAExC,EACrB,0BAAoB,OAAO,EAAC,mDAAmD,kVAE1D,EACrB,0BAAoB,OAAO,EAAC,yCAAyC,gUAEhD,EACrB,0BAAoB,OAAO,EAAC,iCAAiC,0PAExC,CACP,CACV,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/stories/setup-and-installation/faq/faq.scss?tag=ifx-faq&encapsulation=shadow","./src/stories/setup-and-installation/faq/faq.tsx"],"sourcesContent":[".container { \n  padding-top: 10px;\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-faq',\n  styleUrl: './faq.scss',\n  shadow: true,\n})\nexport class Faq {\n\n  render() {\n    return (\n      <div class='container'>\n      <ifx-accordion>\n        <ifx-accordion-item caption=\"What is the Infineon DDS?\">\n          The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application’s structure should be.\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"How do I get access to the DDS?\">\n          You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github.\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"Can I integrate the Infineon DDS into my project?\">\n          Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"Are Infineon DDS components accessable?\">\n          We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here.\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"How to request a new component?\">\n          Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you.\n        </ifx-accordion-item>\n      </ifx-accordion>\n      </div>\n    );\n  }\n}\n"],"version":3}