@infineon/infineon-design-system-stencil 30.9.3--canary.1677.79bde5cb960ca0ee87364cb0899d078b69a61f7b.0 → 30.9.3--canary.1640.c246fbcdce3247ffada7a2fffa49d05593d4088f.0

package/dist/esm/ifx-modal.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-dc4139fb.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-689aa2d0.js';
 
 /**
  * Copy/pasted from https://github.com/andreasbm/focus-trap
@@ -150,8 +150,19 @@ const IfxModalStyle0 = modalCss;
 const IfxModal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.ifxModalOpen = createEvent(this, "ifxModalOpen", 7);
-        this.ifxModalClose = createEvent(this, "ifxModalClose", 7);
+        this.ifxOpen = createEvent(this, "ifxOpen", 7);
+        this.ifxClose = createEvent(this, "ifxClose", 7);
+        this.opened = false;
+        this.showModal = this.opened || false;
+        this.caption = 'Modal Title';
+        this.closeOnOverlayClick = true;
+        this.variant = 'default';
+        this.size = 's';
+        this.alertIcon = '';
+        this.okButtonLabel = 'OK';
+        this.cancelButtonLabel = 'Cancel';
+        this.slotButtonsPresent = false;
+        this.showCloseButton = true;
         this.focusableElements = [];
         this.handleTopFocus = () => {
             this.attemptFocus(this.getLastFocusableElement());
@@ -167,17 +178,6 @@ const IfxModal = class {
                 this.doBeforeClose('ESCAPE_KEY');
             }
         };
-        this.opened = false;
-        this.showModal = this.opened || false;
-        this.caption = 'Modal Title';
-        this.closeOnOverlayClick = true;
-        this.variant = 'default';
-        this.size = 's';
-        this.alertIcon = '';
-        this.okButtonLabel = 'OK';
-        this.cancelButtonLabel = 'Cancel';
-        this.slotButtonsPresent = false;
-        this.showCloseButton = true;
     }
     componentDidLoad() {
         // Query all focusable elements and store them in `focusableElements`.
@@ -215,12 +215,12 @@ const IfxModal = class {
                     (_a = this.getLastFocusableElement()) === null || _a === void 0 ? void 0 : _a.focus();
                     (_b = this.getLastFocusableElement()) === null || _b === void 0 ? void 0 : _b.blur();
                 }, 0);
-                this.ifxModalOpen.emit();
+                this.ifxOpen.emit();
             });
             this.hostElement.addEventListener('keydown', this.handleKeypress);
         }
         catch (err) {
-            this.ifxModalOpen.emit();
+            this.ifxOpen.emit();
         }
     }
     close() {
@@ -230,13 +230,13 @@ const IfxModal = class {
             });
             anim.addEventListener('finish', () => {
                 this.showModal = false;
-                this.ifxModalClose.emit();
+                this.ifxClose.emit();
             });
             this.hostElement.removeEventListener('keydown', this.handleKeypress);
         }
         catch (err) {
             this.showModal = false;
-            this.ifxModalClose.emit();
+            this.ifxClose.emit();
         }
     }
     doBeforeClose(trigger) {
@@ -271,8 +271,8 @@ const IfxModal = class {
     }
     render() {
         const isAlertVariant = this.variant !== 'default';
-        return (h(Host, { key: '622de26c143196380000861b977a483595799667' }, h("div", { key: '62e5820014cbf03a4cda7d39dd8e9f7d58d81635', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { key: 'e023841191ff25390e9b5f8b24562f8ec22eb9af', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '10d3e8232f6bc52e6bb337621fe53c96265a6b84', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: '83dbaf46f8461430da29f4ec0de615bae86fc1c2', class: `modal-content-container ${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, isAlertVariant ? (h("div", { class: `modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}` }, this.alertIcon ? h("ifx-icon", { icon: this.alertIcon }) : null)) : null, h("div", { key: '080b7681bca959116bd2c48741a5fd6a4dc97cd8', class: "modal-content" }, h("div", { key: '847772a8f8736914887a869ae7eabd443266ca4e', class: "modal-header" }, h("h2", { key: '0ac26f87449e72c39afa3f672ae4c2f44ee4465f', class: "modal-caption" }, this.caption), this.showCloseButton &&
-            h("ifx-icon-button", { key: 'dba0bc92c5bb0a695f9449bf146933529da935de', class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { key: '571fca3750ca7df83c0c834e235674639d5e88a7', class: "modal-body" }, h("slot", { key: 'b7008875ccc46abe0b06d7f10dcc25a6d257ffdf', name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), h("div", { key: 'f6639e282e3f856d648847c91752a7fca3fc3505', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { key: 'd12f3e70c2ba8f3ae52e1ec3087ea6dc916c9e92', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { key: '05e2615fda33ac19d61f1845d3df042642634347', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+        return (h(Host, { key: '38194353600e6e6ba689ff3c3bec631624c12f24' }, h("div", { key: 'f08db61f400c4af5d0384dc996ff47630537ab53', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { key: '0f80cf4b8f04c46df7ccd8f3cff9fdeb4171cf90', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '5fe062d671589f423ef9bbd8e485f4e345e2a7a9', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: 'b4bd6f3cc799ed24e5eb4736b3d6f9b0d69e408c', class: `modal-content-container ${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, isAlertVariant ? (h("div", { class: `modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}` }, this.alertIcon ? h("ifx-icon", { icon: this.alertIcon }) : null)) : null, h("div", { key: '09f8862f88cde0d410b50da912563db79e812f8d', class: "modal-content" }, h("div", { key: '6770fefb279be63b37179a6e531214a94a43df41', class: "modal-header" }, h("h2", { key: 'babc6449e513fc3ef8513ef98fa192393b32918c', class: "modal-caption" }, this.caption), this.showCloseButton &&
+            h("ifx-icon-button", { key: '6d7fe6a29c39a3c5e3662107f78ca5768ac3ce00', class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { key: '0488350e36fd845481e2bb779e7b54484dd9e070', class: "modal-body" }, h("slot", { key: '269d38f446c6d3d80f89538b57256e19bcdf871d', name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), h("div", { key: 'cbf98594014a535f7f8e08e59af6600f70a24350', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { key: '08f41c2265ec73b466ce8c666d1d653aa2d6e114', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { key: 'a4d68099d24172497f3e5e20abb44a9d7279b236', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ifx-modal.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-modal.entry.js","mappings":"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","names":[],"sources":["src/global/utils/focus-trap.ts","src/global/utils/animation.ts","src/components/modal/modal.scss?tag=ifx-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/**\n * Copy/pasted from https://github.com/andreasbm/focus-trap\n */\n\n/**\n * Traverses the slots of the open shadowroots and returns all children matching the query.\n * We need to traverse each child-depth one at a time because if an element should be skipped\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"*\")\n * the information of whether the children is within a hidden parent is lost.\n * @param {ShadowRoot | HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n */\nexport function queryShadowRoot(\n  root: ShadowRoot | HTMLElement,\n  skipNode: ($elem: HTMLElement) => boolean,\n  isMatch: ($elem: HTMLElement) => boolean,\n  maxDepth: number = 20,\n  depth: number = 0\n): HTMLElement[] {\n  const matches: HTMLElement[] = [];\n\n  // If the depth is above the max depth, abort the searching here.\n  if (depth >= maxDepth) {\n    return matches;\n  }\n\n  // Traverses a slot element\n  const traverseSlot = ($slot: HTMLSlotElement) => {\n    // Only check nodes that are of the type Node.ELEMENT_NODE\n    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n    const assignedNodes = $slot\n      .assignedNodes()\n      .filter((node) => node.nodeType === 1);\n    if (assignedNodes.length > 0) {\n      const $slotParent = assignedNodes[0].parentElement!;\n      return queryShadowRoot(\n        $slotParent,\n        skipNode,\n        isMatch,\n        maxDepth,\n        depth + 1\n      );\n    }\n\n    return [];\n  };\n\n  // Go through each child and continue the traversing if necessary\n  // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n  // Therefore we fallback to an empty array if it is undefined.\n  const children = Array.from(root.children || []) as HTMLElement[];\n  for (const $child of children) {\n    // Check if the element and its descendants should be skipped\n    if (skipNode($child)) {\n      // console.log('-- SKIP', $child);\n      continue;\n    }\n\n    // console.log('$child', $child);\n\n    // If the element matches we always add it\n    if (isMatch($child)) {\n      matches.push($child);\n    }\n\n    if ($child.shadowRoot != null) {\n      // If the element has a shadow root we need to traverse it\n      matches.push(\n        ...queryShadowRoot(\n          $child.shadowRoot,\n          skipNode,\n          isMatch,\n          maxDepth,\n          depth + 1\n        )\n      );\n    } else if ($child.tagName === 'SLOT') {\n      // If the child is a slot we need to traverse each assigned node\n      matches.push(...traverseSlot($child as HTMLSlotElement));\n    } else {\n      // Traverse the children of the element\n      matches.push(\n        ...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1)\n      );\n    }\n  }\n\n  return matches;\n}\n\n/**\n * Returns whether the element is hidden.\n * @param $elem\n */\nexport function isHidden($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('hidden') ||\n    ($elem.hasAttribute('aria-hidden') &&\n      $elem.getAttribute('aria-hidden') !== 'false') ||\n    // A quick and dirty way to check whether the element is hidden.\n    // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n    // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n    // we won't be able to catch it here. We accept it due to the huge performance benefits.\n    $elem.style.display === `none` ||\n    $elem.style.opacity === `0` ||\n    $elem.style.visibility === `hidden` ||\n    $elem.style.visibility === `collapse`\n  );\n\n  // If offsetParent is null we can assume that the element is hidden\n  // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n  // || $elem.offsetParent == null;\n}\n\n/**\n * Returns whether the element is disabled.\n * @param $elem\n */\nexport function isDisabled($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('disabled') ||\n    ($elem.hasAttribute('aria-disabled') &&\n      $elem.getAttribute('aria-disabled') !== 'false')\n  );\n}\n\n/**\n * Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n */\nexport function isFocusable($elem: HTMLElement): boolean {\n  // Discard elements that are removed from the tab order.\n  if (\n    $elem.getAttribute('tabindex') === '-1' ||\n    isHidden($elem) ||\n    isDisabled($elem)\n  ) {\n    return false;\n  }\n\n  return (\n    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n    $elem.hasAttribute('tabindex') ||\n    // Anchor tags or area tags with a href set\n    (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&\n      $elem.hasAttribute('href')) ||\n    // Form elements which are not disabled\n    $elem instanceof HTMLButtonElement ||\n    $elem instanceof HTMLInputElement ||\n    $elem instanceof HTMLTextAreaElement ||\n    $elem instanceof HTMLSelectElement ||\n    // IFrames\n    $elem instanceof HTMLIFrameElement\n  );\n}","export function animationTo(\n  element: HTMLElement,\n  keyframes: Keyframe | Keyframe[],\n  options?: KeyframeAnimationOptions\n) {\n  const animated = element.animate(keyframes, { ...options, fill: 'both' });\n  animated.addEventListener('finish', () => {\n    // @ts-ignore\n    animated.commitStyles();\n    animated.cancel();\n  });\n\n  return animated;\n}\n\nconst keyframeDefaults = {\n  easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n};\n\nexport const KEYFRAMES = {\n  fadeIn: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n  ],\n  fadeOut: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n  ],\n};","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.modal-container {\n  display: none;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1060;\n  overflow-y: auto;\n  font-family: var(--ifx-font-family);\n\n}\n\n.modal-container.open {\n  display: flex;\n}\n\n.modal-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: tokens.$ifxColorBaseBlack;\n  opacity: 0.5;\n  z-index: 0;\n}\n\n.modal-content-container {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  width: 90%;\n  min-height: 218px;\n  background-color: #fff;\n  border-radius: tokens.$ifxBorderRadiusNone;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  box-sizing: border-box;\n  align-items: stretch;\n}\n\n/* Add desktop size here */\n@media screen and (min-width: 768px) {\n  .modal-content-container {\n    width: 540px;\n    min-height: 132px;\n\n    &.m,\n    &.l,\n    &.s {\n      width: 90%;\n    }\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .modal-content-container {\n\n    &.s {\n      width: 47vw;\n    }\n\n    &.m {\n      width: 63vw;\n    }\n\n    &.l {\n      width: 80%;\n    }\n  }\n}\n\n.modal-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-height: 90vh;\n}\n\n.modal-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  background-color: tokens.$ifxColorOcean500;\n  align-self: stretch;\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  & ifx-icon {\n    color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  min-height: 76px;\n  max-height: 105px;\n  box-sizing: border-box;\n  border-radius: 1px 1px 0px 0px;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.modal-caption {\n  max-height: 56px;\n  display: -webkit-box;\n  overflow: hidden;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical; \n}\n\n.modal-header h2 {\n  margin: 0;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeXl;\n  line-height: 28px;\n}\n\n.modal-header button {\n  background: none;\n  border: none;\n  font-size: 1.5em;\n  padding: 0;\n  cursor: pointer;\n}\n\n.modal-close-button {\n  align-self: flex-start;\n  margin-right: -8px;\n}\n\n.modal-body {\n  padding: 16px 24px;\n  min-height: 56px;\n  box-sizing: border-box;\n  flex: 1;\n  overflow-y: auto;\n}\n\n.modal-footer.buttons-present ::slotted(*){\n  display: flex;\n  justify-content: flex-end;\n  gap: 16px;\n  padding: 16px 24px 32px 16px\n}\n\n.modal-border {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  font-size: 1.5em;\n  flex-grow: 1;\n\n  &.primary {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.secondary {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.success {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.warning {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.orange {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.ocean {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.grey {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.grey-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.red {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.green {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.berry {\n    background-color: tokens.$ifxColorBerry500;\n  }\n}","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\n \n\ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n  trigger: CloseEventTrigger;\n}\n@Component({\n  tag: 'ifx-modal',\n  styleUrl: 'modal.scss',\n  shadow: true\n})\nexport class IfxModal {\n  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n  @State() showModal: boolean = this.opened || false;\n\n  @Prop() caption: string = 'Modal Title';\n  @Prop() closeOnOverlayClick: boolean = true;\n\n  @Event() ifxModalOpen: EventEmitter;\n  @Event() ifxModalClose: EventEmitter;\n\n  @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n  \n  @Prop() size: 's' | 'm' | 'l' = 's';\n\n  @Prop() alertIcon: string = '';\n  @Prop() okButtonLabel: string = 'OK';\n  @Prop() cancelButtonLabel: string = 'Cancel';\n  @Element() hostElement: HTMLElement;\n\n  @State() slotButtonsPresent: boolean = false;\n\n  @Prop() showCloseButton: boolean = true;\n\n  private modalContainer: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n  private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n  componentDidLoad() {\n    // Query all focusable elements and store them in `focusableElements`.\n    // Needed for the \"focus trap\" functionality.\n    this.focusableElements = queryShadowRoot(\n      this.hostElement.shadowRoot,\n      (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'),\n      isFocusable\n    );\n\n  }\n\n  getFirstFocusableElement(): HTMLElement | null {\n    return this.focusableElements[0];\n  }\n\n  getLastFocusableElement(): HTMLElement | null {\n    return this.focusableElements[this.focusableElements.length - 1];\n  }\n\n  handleTopFocus = () => {\n    this.attemptFocus(this.getLastFocusableElement());\n  };\n\n  handleBottomFocus = () => {\n    this.attemptFocus(this.getFirstFocusableElement());\n  };\n\n\n  attemptFocus(element: HTMLElement | null) {\n    if (element == null) {\n      setTimeout(() => { //wait until DOM is fully loaded\n        this.closeButton.focus();\n      },);\n      return;\n    }\n\n    setTimeout(() => { //wait until DOM is fully loaded\n      element.focus();\n    }, 0);\n  }\n\n\n  open() {\n    this.showModal = true;\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        // Setting focus on last item and removing immediately\n        // so, on tab press first element is focused\n        setTimeout(() => {\n          this.getLastFocusableElement()?.focus();\n          this.getLastFocusableElement()?.blur();\n        }, 0);\n\n        this.ifxModalOpen.emit();\n      });\n\n      this.hostElement.addEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.ifxModalOpen.emit();\n\n    }\n\n\n  }\n\n  close() {\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        this.showModal = false;\n        this.ifxModalClose.emit();\n      });\n      this.hostElement.removeEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.showModal = false;\n      this.ifxModalClose.emit();\n    }\n  }\n\n  handleKeypress = (event: KeyboardEvent) => {\n    if (!this.showModal) {\n      return;\n    }\n    if (event.key === 'Escape') {\n      this.doBeforeClose('ESCAPE_KEY');\n    }\n  };\n\n\n  doBeforeClose(trigger: CloseEventTrigger) {\n    const triggers = [];\n    triggers.push(trigger);\n    const prevented = triggers.some((event) => event.defaultPrevented);\n    if (!prevented) {\n      this.opened = false;\n    }\n  }\n\n\n\n  @Watch('opened')\n  openedChanged(newValue) {\n    if (newValue === true) {\n      this.open();\n    } else {\n      this.close()\n    }\n  }\n\n\n  handleOverlayClick() {\n    if (this.closeOnOverlayClick) {\n      this.doBeforeClose('BACKDROP')\n    }\n  }\n\n\n  handleButtonsSlotChange(e) {\n    if(e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\n      this.slotButtonsPresent = true;\n    }else{\n      this.slotButtonsPresent = false;\n    }\n  }\n\n\n  render() {\n    const isAlertVariant = this.variant !== 'default';\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.modalContainer = el)}\n          class={`modal-container ${this.showModal ? 'open' : ''}`}\n        >\n          <div\n            class=\"modal-overlay\"\n            onClick={() => this.handleOverlayClick()}\n          ></div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleTopFocus}\n            tabindex=\"0\"\n          ></div>\n          <div\n            class={`modal-content-container ${this.size}`}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={this.caption}>\n            {isAlertVariant ? (\n              <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\n                {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\n              </div>\n            ) : null}\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h2 class=\"modal-caption\">{this.caption}</h2>\n                { \n                  this.showCloseButton && \n                  <ifx-icon-button class = 'modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-24\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n                  </ifx-icon-button>\n                }\n              </div>\n              <div class=\"modal-body\">\n                <slot name=\"content\" /*onSlotchange={() => console.log('slots children modified')}*/ />\n              </div>\n              <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\n                <slot name=\"buttons\" onSlotchange={(e)=>this.handleButtonsSlotChange(e)}>\n                </slot>\n              </div>\n            </div>\n          </div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleBottomFocus}\n            tabindex=\"0\"\n          ></div>\n        </div>\n      </Host>\n\n    );\n  }\n}"],"version":3}
+{"file":"ifx-modal.entry.js","mappings":"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","names":[],"sources":["src/global/utils/focus-trap.ts","src/global/utils/animation.ts","src/components/modal/modal.scss?tag=ifx-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/**\n * Copy/pasted from https://github.com/andreasbm/focus-trap\n */\n\n/**\n * Traverses the slots of the open shadowroots and returns all children matching the query.\n * We need to traverse each child-depth one at a time because if an element should be skipped\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"*\")\n * the information of whether the children is within a hidden parent is lost.\n * @param {ShadowRoot | HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n */\nexport function queryShadowRoot(\n  root: ShadowRoot | HTMLElement,\n  skipNode: ($elem: HTMLElement) => boolean,\n  isMatch: ($elem: HTMLElement) => boolean,\n  maxDepth: number = 20,\n  depth: number = 0\n): HTMLElement[] {\n  const matches: HTMLElement[] = [];\n\n  // If the depth is above the max depth, abort the searching here.\n  if (depth >= maxDepth) {\n    return matches;\n  }\n\n  // Traverses a slot element\n  const traverseSlot = ($slot: HTMLSlotElement) => {\n    // Only check nodes that are of the type Node.ELEMENT_NODE\n    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n    const assignedNodes = $slot\n      .assignedNodes()\n      .filter((node) => node.nodeType === 1);\n    if (assignedNodes.length > 0) {\n      const $slotParent = assignedNodes[0].parentElement!;\n      return queryShadowRoot(\n        $slotParent,\n        skipNode,\n        isMatch,\n        maxDepth,\n        depth + 1\n      );\n    }\n\n    return [];\n  };\n\n  // Go through each child and continue the traversing if necessary\n  // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n  // Therefore we fallback to an empty array if it is undefined.\n  const children = Array.from(root.children || []) as HTMLElement[];\n  for (const $child of children) {\n    // Check if the element and its descendants should be skipped\n    if (skipNode($child)) {\n      // console.log('-- SKIP', $child);\n      continue;\n    }\n\n    // console.log('$child', $child);\n\n    // If the element matches we always add it\n    if (isMatch($child)) {\n      matches.push($child);\n    }\n\n    if ($child.shadowRoot != null) {\n      // If the element has a shadow root we need to traverse it\n      matches.push(\n        ...queryShadowRoot(\n          $child.shadowRoot,\n          skipNode,\n          isMatch,\n          maxDepth,\n          depth + 1\n        )\n      );\n    } else if ($child.tagName === 'SLOT') {\n      // If the child is a slot we need to traverse each assigned node\n      matches.push(...traverseSlot($child as HTMLSlotElement));\n    } else {\n      // Traverse the children of the element\n      matches.push(\n        ...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1)\n      );\n    }\n  }\n\n  return matches;\n}\n\n/**\n * Returns whether the element is hidden.\n * @param $elem\n */\nexport function isHidden($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('hidden') ||\n    ($elem.hasAttribute('aria-hidden') &&\n      $elem.getAttribute('aria-hidden') !== 'false') ||\n    // A quick and dirty way to check whether the element is hidden.\n    // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n    // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n    // we won't be able to catch it here. We accept it due to the huge performance benefits.\n    $elem.style.display === `none` ||\n    $elem.style.opacity === `0` ||\n    $elem.style.visibility === `hidden` ||\n    $elem.style.visibility === `collapse`\n  );\n\n  // If offsetParent is null we can assume that the element is hidden\n  // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n  // || $elem.offsetParent == null;\n}\n\n/**\n * Returns whether the element is disabled.\n * @param $elem\n */\nexport function isDisabled($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('disabled') ||\n    ($elem.hasAttribute('aria-disabled') &&\n      $elem.getAttribute('aria-disabled') !== 'false')\n  );\n}\n\n/**\n * Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n */\nexport function isFocusable($elem: HTMLElement): boolean {\n  // Discard elements that are removed from the tab order.\n  if (\n    $elem.getAttribute('tabindex') === '-1' ||\n    isHidden($elem) ||\n    isDisabled($elem)\n  ) {\n    return false;\n  }\n\n  return (\n    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n    $elem.hasAttribute('tabindex') ||\n    // Anchor tags or area tags with a href set\n    (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&\n      $elem.hasAttribute('href')) ||\n    // Form elements which are not disabled\n    $elem instanceof HTMLButtonElement ||\n    $elem instanceof HTMLInputElement ||\n    $elem instanceof HTMLTextAreaElement ||\n    $elem instanceof HTMLSelectElement ||\n    // IFrames\n    $elem instanceof HTMLIFrameElement\n  );\n}","export function animationTo(\n  element: HTMLElement,\n  keyframes: Keyframe | Keyframe[],\n  options?: KeyframeAnimationOptions\n) {\n  const animated = element.animate(keyframes, { ...options, fill: 'both' });\n  animated.addEventListener('finish', () => {\n    // @ts-ignore\n    animated.commitStyles();\n    animated.cancel();\n  });\n\n  return animated;\n}\n\nconst keyframeDefaults = {\n  easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n};\n\nexport const KEYFRAMES = {\n  fadeIn: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n  ],\n  fadeOut: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n  ],\n};","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.modal-container {\n  display: none;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1060;\n  overflow-y: auto;\n  font-family: var(--ifx-font-family);\n\n}\n\n.modal-container.open {\n  display: flex;\n}\n\n.modal-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: tokens.$ifxColorBaseBlack;\n  opacity: 0.5;\n  z-index: 0;\n}\n\n.modal-content-container {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  width: 90%;\n  min-height: 218px;\n  background-color: #fff;\n  border-radius: tokens.$ifxBorderRadiusNone;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  box-sizing: border-box;\n  align-items: stretch;\n}\n\n/* Add desktop size here */\n@media screen and (min-width: 768px) {\n  .modal-content-container {\n    width: 540px;\n    min-height: 132px;\n\n    &.m,\n    &.l,\n    &.s {\n      width: 90%;\n    }\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .modal-content-container {\n\n    &.s {\n      width: 47vw;\n    }\n\n    &.m {\n      width: 63vw;\n    }\n\n    &.l {\n      width: 80%;\n    }\n  }\n}\n\n.modal-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-height: 90vh;\n}\n\n.modal-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  background-color: tokens.$ifxColorOcean500;\n  align-self: stretch;\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  & ifx-icon {\n    color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  min-height: 76px;\n  max-height: 105px;\n  box-sizing: border-box;\n  border-radius: 1px 1px 0px 0px;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.modal-caption {\n  max-height: 56px;\n  display: -webkit-box;\n  overflow: hidden;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical; \n}\n\n.modal-header h2 {\n  margin: 0;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeXl;\n  line-height: 28px;\n}\n\n.modal-header button {\n  background: none;\n  border: none;\n  font-size: 1.5em;\n  padding: 0;\n  cursor: pointer;\n}\n\n.modal-close-button {\n  align-self: flex-start;\n  margin-right: -8px;\n}\n\n.modal-body {\n  padding: 16px 24px;\n  min-height: 56px;\n  box-sizing: border-box;\n  flex: 1;\n  overflow-y: auto;\n}\n\n.modal-footer.buttons-present ::slotted(*){\n  display: flex;\n  justify-content: flex-end;\n  gap: 16px;\n  padding: 16px 24px 32px 16px\n}\n\n.modal-border {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  font-size: 1.5em;\n  flex-grow: 1;\n\n  &.primary {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.secondary {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.success {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.warning {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.orange {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.ocean {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.grey {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.grey-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.red {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.green {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.berry {\n    background-color: tokens.$ifxColorBerry500;\n  }\n}","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\n \n\ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n  trigger: CloseEventTrigger;\n}\n@Component({\n  tag: 'ifx-modal',\n  styleUrl: 'modal.scss',\n  shadow: true\n})\nexport class IfxModal {\n  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n  @State() showModal: boolean = this.opened || false;\n\n  @Prop() caption: string = 'Modal Title';\n  @Prop() closeOnOverlayClick: boolean = true;\n\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n\n  @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n  \n  @Prop() size: 's' | 'm' | 'l' = 's';\n\n  @Prop() alertIcon: string = '';\n  @Prop() okButtonLabel: string = 'OK';\n  @Prop() cancelButtonLabel: string = 'Cancel';\n  @Element() hostElement: HTMLElement;\n\n  @State() slotButtonsPresent: boolean = false;\n\n  @Prop() showCloseButton: boolean = true;\n\n  private modalContainer: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n  private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n  componentDidLoad() {\n    // Query all focusable elements and store them in `focusableElements`.\n    // Needed for the \"focus trap\" functionality.\n    this.focusableElements = queryShadowRoot(\n      this.hostElement.shadowRoot,\n      (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'),\n      isFocusable\n    );\n\n  }\n\n  getFirstFocusableElement(): HTMLElement | null {\n    return this.focusableElements[0];\n  }\n\n  getLastFocusableElement(): HTMLElement | null {\n    return this.focusableElements[this.focusableElements.length - 1];\n  }\n\n  handleTopFocus = () => {\n    this.attemptFocus(this.getLastFocusableElement());\n  };\n\n  handleBottomFocus = () => {\n    this.attemptFocus(this.getFirstFocusableElement());\n  };\n\n\n  attemptFocus(element: HTMLElement | null) {\n    if (element == null) {\n      setTimeout(() => { //wait until DOM is fully loaded\n        this.closeButton.focus();\n      },);\n      return;\n    }\n\n    setTimeout(() => { //wait until DOM is fully loaded\n      element.focus();\n    }, 0);\n  }\n\n\n  open() {\n    this.showModal = true;\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        // Setting focus on last item and removing immediately\n        // so, on tab press first element is focused\n        setTimeout(() => {\n          this.getLastFocusableElement()?.focus();\n          this.getLastFocusableElement()?.blur();\n        }, 0);\n\n        this.ifxOpen.emit();\n      });\n\n      this.hostElement.addEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.ifxOpen.emit();\n\n    }\n\n\n  }\n\n  close() {\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        this.showModal = false;\n        this.ifxClose.emit();\n      });\n      this.hostElement.removeEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.showModal = false;\n      this.ifxClose.emit();\n    }\n  }\n\n  handleKeypress = (event: KeyboardEvent) => {\n    if (!this.showModal) {\n      return;\n    }\n    if (event.key === 'Escape') {\n      this.doBeforeClose('ESCAPE_KEY');\n    }\n  };\n\n\n  doBeforeClose(trigger: CloseEventTrigger) {\n    const triggers = [];\n    triggers.push(trigger);\n    const prevented = triggers.some((event) => event.defaultPrevented);\n    if (!prevented) {\n      this.opened = false;\n    }\n  }\n\n\n\n  @Watch('opened')\n  openedChanged(newValue) {\n    if (newValue === true) {\n      this.open();\n    } else {\n      this.close()\n    }\n  }\n\n\n  handleOverlayClick() {\n    if (this.closeOnOverlayClick) {\n      this.doBeforeClose('BACKDROP')\n    }\n  }\n\n\n  handleButtonsSlotChange(e) {\n    if(e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\n      this.slotButtonsPresent = true;\n    }else{\n      this.slotButtonsPresent = false;\n    }\n  }\n\n\n  render() {\n    const isAlertVariant = this.variant !== 'default';\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.modalContainer = el)}\n          class={`modal-container ${this.showModal ? 'open' : ''}`}\n        >\n          <div\n            class=\"modal-overlay\"\n            onClick={() => this.handleOverlayClick()}\n          ></div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleTopFocus}\n            tabindex=\"0\"\n          ></div>\n          <div\n            class={`modal-content-container ${this.size}`}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={this.caption}>\n            {isAlertVariant ? (\n              <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\n                {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\n              </div>\n            ) : null}\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h2 class=\"modal-caption\">{this.caption}</h2>\n                { \n                  this.showCloseButton && \n                  <ifx-icon-button class = 'modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-24\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n                  </ifx-icon-button>\n                }\n              </div>\n              <div class=\"modal-body\">\n                <slot name=\"content\" /*onSlotchange={() => console.log('slots children modified')}*/ />\n              </div>\n              <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\n                <slot name=\"buttons\" onSlotchange={(e)=>this.handleButtonsSlotChange(e)}>\n                </slot>\n              </div>\n            </div>\n          </div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleBottomFocus}\n            tabindex=\"0\"\n          ></div>\n        </div>\n      </Host>\n\n    );\n  }\n}"],"version":3}

package/dist/esm/ifx-multiselect_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-dc4139fb.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-689aa2d0.js';
 
 const multiselectCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.ifx-multiselect-container{position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container.small-select{height:36px}.ifx-multiselect-container.medium-select{height:40px}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{background-color:#FFFFFF;box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;width:100%;font-weight:400;font-style:normal}.ifx-multiselect-container .ifx-multiselect-wrapper.small-select{height:36px;padding:8px 12px;font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .ifx-multiselect-wrapper.medium-select{height:40px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-multiselect-container .ifx-multiselect-wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;align-items:center;display:flex}.ifx-multiselect-container .ifx-clear-button{display:flex}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{position:absolute;top:100%;left:0;width:100%;margin-top:2px;background-color:#fff;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);max-height:300px;overflow-y:auto;z-index:var(--dynamic-z-index, 1)}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input{position:sticky;top:0;left:0;z-index:1;width:100%;padding:8px 16px;font-size:1rem;line-height:1.5rem;font-style:normal;font-weight:400;box-sizing:border-box;background-color:#FFFFFF;border:none;border-bottom:1px solid #8D8786}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input:focus{outline:none;border:1px solid #0A8276}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input::placeholder{color:#999}.ifx-multiselect-container .option{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;font-style:normal;font-weight:400}.ifx-multiselect-container .option.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .option.medium-select{font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .option:hover{background-color:#EEEDED}.ifx-multiselect-container .option:focus:not(.disabled){background-color:#BFBBBB;outline:none}.ifx-multiselect-container .option.is-highlighted{background-color:#EEEDED}.ifx-multiselect-container .option.sub-option{padding-left:30px;}.ifx-multiselect-container .option.disabled:hover{cursor:default}.ifx-multiselect-container .option label{cursor:inherit}.select-all-wrapper{padding-top:8px}";
 const IfxMultiselectStyle0 = multiselectCss;
@@ -19,7 +19,7 @@ const Multiselect = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ifxSelect = createEvent(this, "ifxSelect", 7);
-        this.ifxMultiselectIsOpen = createEvent(this, "ifxMultiselectIsOpen", 7);
+        this.ifxOpen = createEvent(this, "ifxOpen", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -27,7 +27,25 @@ const Multiselect = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
+        this.batchSize = 50;
+        this.size = 'medium (40px)';
+        this.disabled = false;
+        this.error = false;
+        this.internalError = false;
+        this.errorMessage = "Error";
+        this.label = "";
+        this.persistentSelectedOptions = [];
+        this.placeholder = "";
+        this.dropdownOpen = false;
+        this.zIndex = 1; // default z-index value
         this.currentIndex = 0; //needed for option selection using keyboard
+        this.isLoading = false;
+        this.loadedOptions = [];
+        this.filteredOptions = [];
+        this.showSearch = true;
+        this.showSelectAll = true;
+        this.optionCount = 0; // number of all options (leaves of the tree)
+        this.optionsProcessed = false; // flag whether options have already been counted, intial selections saved
         this.handleSearch = debounce((targetElement) => {
             const searchTerm = targetElement.value.toLowerCase();
             if (searchTerm === '') {
@@ -42,33 +60,10 @@ const Multiselect = class {
             if (!path.includes(this.dropdownElement)) {
                 this.dropdownOpen = false;
                 document.removeEventListener('click', this.handleDocumentClick);
-                // Dispatch the ifxMultiselectIsOpen event
-                this.ifxMultiselectIsOpen.emit(this.dropdownOpen);
+                // Dispatch the ifxOpen event
+                this.ifxOpen.emit(this.dropdownOpen);
             }
         };
-        this.name = undefined;
-        this.options = undefined;
-        this.batchSize = 50;
-        this.size = 'medium (40px)';
-        this.disabled = false;
-        this.error = false;
-        this.internalError = false;
-        this.errorMessage = "Error";
-        this.internalErrorMessage = undefined;
-        this.label = "";
-        this.persistentSelectedOptions = [];
-        this.placeholder = "";
-        this.dropdownOpen = false;
-        this.dropdownFlipped = undefined;
-        this.maxItemCount = undefined;
-        this.zIndex = 1;
-        this.isLoading = false;
-        this.loadedOptions = [];
-        this.filteredOptions = [];
-        this.showSearch = true;
-        this.showSelectAll = true;
-        this.optionCount = 0;
-        this.optionsProcessed = false;
     }
     updateOptions() {
         this.loadedOptions = [];
@@ -312,8 +307,8 @@ const Multiselect = class {
             if (this.dropdownOpen) {
                 document.addEventListener('click', this.handleDocumentClick);
             }
-            // Dispatch the ifxMultiselectIsOpen event
-            this.ifxMultiselectIsOpen.emit(this.dropdownOpen);
+            // Dispatch the ifxOpen event
+            this.ifxOpen.emit(this.dropdownOpen);
         }, 0);
         this.zIndex = Multiselect.globalZIndex++;
     }
@@ -554,7 +549,6 @@ const TextField = class {
         this.optional = false;
         this.success = false;
         this.disabled = false;
-        this.maxlength = undefined;
         this.showDeleteIcon = false;
     }
     valueWatcher(newValue) {