@infineon/infineon-design-system-stencil 21.6.0 → 21.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/cjs/ifx-modal.cjs.entry.js +4 -3
  2. package/dist/cjs/ifx-modal.cjs.entry.js.map +1 -1
  3. package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/collection/components/modal/modal.css +14 -0
  6. package/dist/collection/components/modal/modal.js +21 -2
  7. package/dist/collection/components/modal/modal.js.map +1 -1
  8. package/dist/collection/components/modal/modal.stories.js +9 -1
  9. package/dist/collection/components/modal/modal.stories.js.map +1 -1
  10. package/dist/esm/ifx-modal.entry.js +4 -3
  11. package/dist/esm/ifx-modal.entry.js.map +1 -1
  12. package/dist/esm/infineon-design-system-stencil.js +1 -1
  13. package/dist/esm/loader.js +1 -1
  14. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  15. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
  16. package/dist/infineon-design-system-stencil/p-bdcd7de2.entry.js +2 -0
  17. package/dist/infineon-design-system-stencil/p-bdcd7de2.entry.js.map +1 -0
  18. package/dist/types/components/modal/modal.d.ts +1 -0
  19. package/dist/types/components/modal/modal.stories.d.ts +7 -0
  20. package/dist/types/components.d.ts +2 -0
  21. package/package.json +1 -1
  22. package/dist/infineon-design-system-stencil/p-9e387863.entry.js +0 -2
  23. package/dist/infineon-design-system-stencil/p-9e387863.entry.js.map +0 -1
package/dist/cjs/ifx-modal.cjs.entry.js CHANGED
@@ -148,7 +148,7 @@ const KEYFRAMES = {
148
148
  ],
149
149
  };
150
150
 
151
- const modalCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.modal-container{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1060;overflow-y:auto;font-family:var(--ifx-font-family)}.modal-container.open{display:block}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1D1D1D;opacity:0.5;z-index:0}.modal-content-container{position:absolute;display:flex;justify-content:center;top:50%;left:50%;transform:translate(-50%, -50%);width:90%;min-height:218px;background-color:#fff;border-radius:0;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);overflow:hidden;box-sizing:border-box;align-items:stretch}@media screen and (min-width: 768px){.modal-content-container{width:540px;min-height:132px}}.modal-content{display:flex;flex-direction:column;width:100%;max-height:90vh}.modal-icon-container{display:flex;align-items:center;justify-content:center;width:32px;background-color:#0A8276;align-self:stretch}.modal-icon-container.danger{background-color:#CD002F}.modal-icon-container ifx-icon{color:#FFFFFF}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;min-height:76px;max-height:105px;box-sizing:border-box;border-radius:1px 1px 0px 0px;border-bottom:1px solid #EEEDED}.modal-caption{max-height:56px;display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal-header h2{margin:0;font-weight:600;font-size:1.25rem;line-height:28px}.modal-header button{background:none;border:none;font-size:1.5em;padding:0;cursor:pointer}.modal-close-button{align-self:flex-start;margin-right:-8px}.modal-body{padding:16px 24px;min-height:56px;box-sizing:border-box;flex:1;overflow-y:auto}.modal-footer.buttons-present ::slotted(*){display:flex;justify-content:flex-end;gap:16px;padding:16px 24px 32px 16px}.modal-border{display:flex;align-items:center;justify-content:center;width:100%;font-size:1.5em;flex-grow:1}.modal-border.primary{background-color:#0A8276}.modal-border.secondary{background-color:#575352}.modal-border.danger{background-color:#CD002F}.modal-border.success{background-color:#4CA460}.modal-border.warning{background-color:#E16B25}.modal-border.orange{background-color:#E16B25}.modal-border.ocean{background-color:#0A8276}.modal-border.grey{background-color:#575352}.modal-border.grey-200{background-color:#EEEDED}.modal-border.red{background-color:#CD002F}.modal-border.green{background-color:#4CA460}.modal-border.berry{background-color:#9C216E}";
151
+ const modalCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.modal-container{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1060;overflow-y:auto;font-family:var(--ifx-font-family)}.modal-container.open{display:block}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1D1D1D;opacity:0.5;z-index:0}.modal-content-container{position:absolute;display:flex;justify-content:center;top:50%;left:50%;transform:translate(-50%, -50%);width:90%;min-height:218px;background-color:#fff;border-radius:0;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);overflow:hidden;box-sizing:border-box;align-items:stretch}@media screen and (min-width: 768px){.modal-content-container{width:540px;min-height:132px}.modal-content-container.m,.modal-content-container.l,.modal-content-container.s{width:90%}}@media screen and (min-width: 1024px){.modal-content-container.s{width:47vw}.modal-content-container.m{width:63vw}.modal-content-container.l{width:80%}}.modal-content{display:flex;flex-direction:column;width:100%;max-height:90vh}.modal-icon-container{display:flex;align-items:center;justify-content:center;width:32px;background-color:#0A8276;align-self:stretch}.modal-icon-container.danger{background-color:#CD002F}.modal-icon-container ifx-icon{color:#FFFFFF}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;min-height:76px;max-height:105px;box-sizing:border-box;border-radius:1px 1px 0px 0px;border-bottom:1px solid #EEEDED}.modal-caption{max-height:56px;display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal-header h2{margin:0;font-weight:600;font-size:1.25rem;line-height:28px}.modal-header button{background:none;border:none;font-size:1.5em;padding:0;cursor:pointer}.modal-close-button{align-self:flex-start;margin-right:-8px}.modal-body{padding:16px 24px;min-height:56px;box-sizing:border-box;flex:1;overflow-y:auto}.modal-footer.buttons-present ::slotted(*){display:flex;justify-content:flex-end;gap:16px;padding:16px 24px 32px 16px}.modal-border{display:flex;align-items:center;justify-content:center;width:100%;font-size:1.5em;flex-grow:1}.modal-border.primary{background-color:#0A8276}.modal-border.secondary{background-color:#575352}.modal-border.danger{background-color:#CD002F}.modal-border.success{background-color:#4CA460}.modal-border.warning{background-color:#E16B25}.modal-border.orange{background-color:#E16B25}.modal-border.ocean{background-color:#0A8276}.modal-border.grey{background-color:#575352}.modal-border.grey-200{background-color:#EEEDED}.modal-border.red{background-color:#CD002F}.modal-border.green{background-color:#4CA460}.modal-border.berry{background-color:#9C216E}";
152
152
  const IfxModalStyle0 = modalCss;
153
153
 
154
154
  const IfxModal = class {
@@ -176,6 +176,7 @@ const IfxModal = class {
176
176
  this.caption = 'Modal Title';
177
177
  this.closeOnOverlayClick = true;
178
178
  this.variant = 'default';
179
+ this.size = 's';
179
180
  this.alertIcon = '';
180
181
  this.okButtonLabel = 'OK';
181
182
  this.cancelButtonLabel = 'Cancel';
@@ -270,8 +271,8 @@ const IfxModal = class {
270
271
  }
271
272
  render() {
272
273
  const isAlertVariant = this.variant !== 'default';
273
- return (index.h(index.Host, { key: 'f0813d1a7e4f67c3c0a5cdd223a3b2ff15599b74' }, index.h("div", { key: 'e7afd81ae3c34606fec4964f4d064a4a5d4639ef', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, index.h("div", { key: 'f76ab35c1d23f8c85ef8f25c839a785c48d69b5d', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), index.h("div", { key: 'c43a7f61d549ad93d5577d49ac4cbc420622f43b', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), index.h("div", { key: 'bac5195ac2880f7fa258f6ce8d7626a15c210085', class: `modal-content-container`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, isAlertVariant ? (index.h("div", { class: `modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}` }, this.alertIcon ? index.h("ifx-icon", { icon: this.alertIcon }) : null)) : null, index.h("div", { key: '90e5a23f42dc008172db58a6367a061a643cd5c0', class: "modal-content" }, index.h("div", { key: '2d40f525434ffdb9a0147f3f2b6e574a9f36bfcd', class: "modal-header" }, index.h("h2", { key: '5cba0fa055e6f577b00db23c9ea5fbb5258b978e', class: "modal-caption" }, this.caption), this.showCloseButton &&
274
- index.h("ifx-icon-button", { class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), index.h("div", { key: 'b424926417a92bf80a2118cccb3ecceb51661710', class: "modal-body" }, index.h("slot", { key: 'd658802533066be28f5f7ecfd98df0f52cce86a6', name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), index.h("div", { key: 'd2bbc9e119f08bdb63d107304f60d46607e26d23', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, index.h("slot", { key: '1ed1c4d49d506cc62c3722a9f2c25d032c5cd6d6', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), index.h("div", { key: 'bf9623ceab205d2276764183a504bfe45c2e0662', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
274
+ return (index.h(index.Host, { key: '2e78d378ad671747dcac05d1afa4c1fc0dd86720' }, index.h("div", { key: '700ad9d01b15876b337bf6500e2b790a127fbd04', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, index.h("div", { key: 'da1e990a7f517ee2260d40395c9911273c777f90', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), index.h("div", { key: '5eea0359e633e8e5409065fb8db4204ec3cb3ef9', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), index.h("div", { key: '703d57b34fe923fdb707b58670a213545199795b', class: `modal-content-container ${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, isAlertVariant ? (index.h("div", { class: `modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}` }, this.alertIcon ? index.h("ifx-icon", { icon: this.alertIcon }) : null)) : null, index.h("div", { key: 'd71eb504b5a6628baf8f1fa2b000331756258ca5', class: "modal-content" }, index.h("div", { key: '8a96c32c549828c784970fe06d7cccc1fc5d3611', class: "modal-header" }, index.h("h2", { key: '648b3d728c507167a2f3d94bcfadf67dd1f2d4fc', class: "modal-caption" }, this.caption), this.showCloseButton &&
275
+ index.h("ifx-icon-button", { class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), index.h("div", { key: 'ffbf1da62fd93b96828c425b07f9e206dfe9860a', class: "modal-body" }, index.h("slot", { key: '546ef4c17f185c0b69732c54618d053bea568154', name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), index.h("div", { key: '65e137734d83298b58aa6547694d0dc10bc18503', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, index.h("slot", { key: 'b7c4336049d465092fb399ca09df7f72908bb280', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), index.h("div", { key: 'beed561ce9f2118c18ba4324eb795bc8eed0d93c', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
275
276
  }
276
277
  get hostElement() { return index.getElement(this); }
277
278
  static get watchers() { return {
package/dist/cjs/ifx-modal.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"ifx-modal.entry.cjs.js","mappings":"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","names":["h","Host"],"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 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: block;\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 top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\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\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}\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 // & slot[name=content] {\n // display: -webkit-box;\n // -webkit-line-clamp: 1;\n // -webkit-box-orient: vertical;\n // overflow: hidden;\n // text-overflow: ellipsis;\n // }\n}\n\n// .modal-footer{\n// display: flex;\n// justify-content: flex-end;\n// gap: 1em;\n// box-sizing: border-box;\n// margin-left: auto;\n// gap: 24px;\n// padding-top: 16px;\n// padding-bottom: 32px;\n// padding-right: 24px;\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\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() 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 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 this.attemptFocus(this.getFirstFocusableElement());\n this.ifxModalOpen.emit();\n });\n // this.attemptFocus(this.getFirstFocusableElement());\n // this.ifxModalOpen.emit();\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`}\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}
1
+ {"file":"ifx-modal.entry.cjs.js","mappings":"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","names":["h","Host"],"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 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: block;\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 top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\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\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\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 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 this.attemptFocus(this.getFirstFocusableElement());\n this.ifxModalOpen.emit();\n });\n // this.attemptFocus(this.getFirstFocusableElement());\n // this.ifxModalOpen.emit();\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}
package/dist/cjs/infineon-design-system-stencil.cjs.js CHANGED
@@ -42,7 +42,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
42
42
 
43
43
  patchBrowser().then(async (options) => {
44
44
  await appGlobals.globalScripts();
45
- return index.bootstrapLazy(JSON.parse("[[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"ifx-overview-table.cjs\",[[1,\"ifx-overview-table\"]]],[\"ifx-pagination.cjs\",[[1,\"ifx-pagination\",{\"currentPage\":[2,\"current-page\"],\"total\":[2],\"internalPage\":[32],\"itemsPerPage\":[32],\"numberOfPages\":[32]},[[0,\"ifxSelect\",\"setItemsPerPage\"]]]]],[\"ifx-dropdown-trigger-button.cjs\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-modal.cjs\",[[1,\"ifx-modal\",{\"opened\":[1540],\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"variant\":[1],\"alertIcon\":[1,\"alert-icon\"],\"okButtonLabel\":[1,\"ok-button-label\"],\"cancelButtonLabel\":[1,\"cancel-button-label\"],\"showCloseButton\":[4,\"show-close-button\"],\"showModal\":[32],\"slotButtonsPresent\":[32]},null,{\"opened\":[\"openedChanged\"]}]]],[\"ifx-multiselect.cjs\",[[1,\"ifx-multiselect\",{\"options\":[1],\"batchSize\":[2,\"batch-size\"],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"placeholder\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"searchEnabled\":[4,\"search-enabled\"],\"internalError\":[32],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32],\"isLoading\":[32],\"loadedOptions\":[32],\"filteredOptions\":[32]},null,{\"error\":[\"updateInternalError\"],\"loadedOptions\":[\"loadedOptionsChanged\"]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32],\"onNavbarMobile\":[64]},null,{\"isOpen\":[\"handlePropChange\"]}]]],[\"ifx-sidebar-item.cjs\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"numberIndicator\":[2,\"number-indicator\"],\"active\":[4],\"isActionItem\":[4,\"is-action-item\"],\"value\":[1],\"handleItemClick\":[16],\"hasIcon\":[32],\"hasIconWrapper\":[32],\"internalHref\":[32],\"isExpandable\":[32],\"isNested\":[32],\"isSubMenuItem\":[32],\"internalActiveState\":[32],\"setActiveClasses\":[64],\"expandMenu\":[64],\"isItemExpandable\":[64]},[[0,\"consoleError\",\"handleConsoleError\"]],{\"active\":[\"handleActiveChange\"]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"variant\":[1],\"icon\":[1],\"closable\":[4]}]]],[\"ifx-breadcrumb-item-label.cjs\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip.cjs\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"selectedValue\":[32],\"active\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"termsUrl\":[1,\"terms-url\"],\"termsTarget\":[1,\"terms-target\"],\"imprintUrl\":[1,\"imprint-url\"],\"imprintTarget\":[1,\"imprint-target\"],\"privacyPolicyUrl\":[1,\"privacy-policy-url\"],\"privacyPolicyTarget\":[1,\"privacy-policy-target\"],\"glossaryUrl\":[1,\"glossary-url\"],\"glossaryTarget\":[1,\"glossary-target\"],\"copyrightText\":[1,\"copyright-text\"],\"large\":[32],\"medium\":[32],\"currentYear\":[32]}]]],[\"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\"],\"fixed\":[4],\"showLogoAndAppname\":[4,\"show-logo-and-appname\"],\"logoHref\":[1,\"logo-href\"],\"logoHrefTarget\":[1,\"logo-href-target\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32],\"internalLogoHref\":[32],\"internalLogoHrefTarget\":[32]},[[0,\"ifxNavItem\",\"clearFirstLayerMenu\"],[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"]]]]],[\"ifx-navbar-item.cjs\",[[1,\"ifx-navbar-item\",{\"showLabel\":[4,\"show-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideOnMobile\":[4,\"hide-on-mobile\"],\"internalHref\":[32],\"isMenuItem\":[32],\"hasChildNavItems\":[32],\"isSidebarMenuItem\":[32],\"itemPosition\":[32],\"hideComponent\":[64],\"showComponent\":[64],\"toggleChildren\":[64],\"moveChildComponentsIntoSubLayerMenu\":[64],\"toggleFirstLayerItem\":[64],\"addMenuItemClass\":[64],\"moveChildComponentsBackIntoNavbar\":[64],\"returnToFirstLayer\":[64],\"setMenuItemPosition\":[64],\"setItemSideSpecifications\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-slider.cjs\",[[1,\"ifx-slider\",{\"min\":[2],\"max\":[2],\"value\":[2],\"minValueHandle\":[2,\"min-value-handle\"],\"maxValueHandle\":[2,\"max-value-handle\"],\"disabled\":[4],\"showPercentage\":[4,\"show-percentage\"],\"leftIcon\":[1,\"left-icon\"],\"rightIcon\":[1,\"right-icon\"],\"leftText\":[1,\"left-text\"],\"rightText\":[1,\"right-text\"],\"type\":[1],\"internalValue\":[32],\"percentage\":[32],\"internalMinValue\":[32],\"internalMaxValue\":[32]},null,{\"value\":[\"valueChanged\"],\"minValueHandle\":[\"minValueChanged\"],\"maxValueHandle\":[\"maxValueChanged\"]}]]],[\"ifx-step.cjs\",[[1,\"ifx-step\",{\"lastStep\":[4,\"last-step\"],\"stepId\":[2,\"step-id\"],\"stepperState\":[8,\"stepper-state\"],\"error\":[4]}]]],[\"ifx-tabs.cjs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"activeTabIndex\":[1026,\"active-tab-index\"],\"internalOrientation\":[32],\"internalActiveTabIndex\":[32],\"internalFocusedTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"disabledTabs\":[32],\"tabObjects\":[32]},[[0,\"slotchange\",\"onSlotChange\"],[0,\"keydown\",\"handleKeyDown\"]],{\"activeTabIndex\":[\"activeTabIndexChanged\"]}]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\",{\"icon\":[1]}]]],[\"ifx-text-field.cjs\",[[1,\"ifx-text-field\",{\"placeholder\":[1],\"value\":[1025],\"error\":[4],\"label\":[1],\"icon\":[1],\"caption\":[1],\"size\":[1],\"required\":[4],\"optional\":[4],\"success\":[4],\"disabled\":[4],\"reset\":[64]},null,{\"value\":[\"valueWatcher\"]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]},null,{\"position\":[\"positionChanged\"]}]]],[\"ifx-badge.cjs\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table.cjs\",[[0,\"ifx-basic-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"gridOptions\":[32]}]]],[\"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],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32],\"internalHref\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline.cjs\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image.cjs\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links.cjs\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline.cjs\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text.cjs\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown.cjs\",[[1,\"ifx-dropdown\",{\"placement\":[1],\"defaultOpen\":[4,\"default-open\"],\"noAppendToBody\":[4,\"no-append-to-body\"],\"disabled\":[4],\"noCloseOnOutsideClick\":[4,\"no-close-on-outside-click\"],\"noCloseOnMenuClick\":[4,\"no-close-on-menu-click\"],\"internalIsOpen\":[32],\"trigger\":[32],\"menu\":[32],\"isOpen\":[64],\"closeDropdown\":[64],\"openDropdown\":[64]},[[0,\"slotchange\",\"watchHandlerSlot\"],[5,\"mousedown\",\"handleOutsideClick\"]],{\"defaultOpen\":[\"watchHandlerIsOpen\"],\"disabled\":[\"watchHandlerDisabled\"]}]]],[\"ifx-dropdown-header.cjs\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu.cjs\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator.cjs\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger.cjs\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"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-navbar-profile.cjs\",[[1,\"ifx-navbar-profile\",{\"showLabel\":[4,\"show-label\"],\"href\":[1],\"imageUrl\":[1,\"image-url\"],\"target\":[1],\"alt\":[1],\"internalHref\":[32],\"isMenuItem\":[32],\"hasChildNavItems\":[32],\"internalImageUrl\":[32],\"hideComponent\":[64],\"showComponent\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-progress-bar.cjs\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-sidebar.cjs\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"],\"initialCollapse\":[4,\"initial-collapse\"],\"showFooter\":[4,\"show-footer\"],\"showHeader\":[4,\"show-header\"],\"termsOfUse\":[1,\"terms-of-use\"],\"imprint\":[1],\"privacyPolicy\":[1,\"privacy-policy\"],\"target\":[1],\"copyrightText\":[1,\"copyright-text\"],\"currentYear\":[32],\"internalTermsofUse\":[32],\"internalImprint\":[32],\"internalPrivacyPolicy\":[32],\"internalShowFooter\":[32],\"activeItem\":[32]},[[0,\"ifxSidebarMenu\",\"handleSidebarItemInteraction\"],[0,\"ifxSidebarNavigationItem\",\"handleSidebarItemActivated\"]]]]],[\"ifx-sidebar-title.cjs\",[[1,\"ifx-sidebar-title\"]]],[\"ifx-spinner.cjs\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1],\"inverted\":[4]}]]],[\"ifx-status.cjs\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-stepper.cjs\",[[1,\"ifx-stepper\",{\"showNumber\":[4,\"show-number\"],\"activeStep\":[2,\"active-step\"],\"variant\":[1],\"internalActiveStep\":[32]},null,{\"activeStep\":[\"activeStepHandler\"]}]]],[\"ifx-switch.cjs\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\",{\"header\":[1],\"disabled\":[4],\"icon\":[1],\"iconPosition\":[1,\"icon-position\"]}]]],[\"ifx-table.cjs\",[[0,\"ifx-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"pagination\":[4],\"paginationPageSize\":[2,\"pagination-page-size\"],\"gridOptions\":[32]}]]],[\"ifx-icon.cjs\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32],\"internalIndeterminate\":[32]},null,{\"value\":[\"valueChanged\"],\"indeterminate\":[\"indeterminateChanged\"]}]]],[\"ifx-search-field.cjs\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]],{\"value\":[\"valueWatcher\"]}]]],[\"ifx-select.cjs\",[[0,\"ifx-select\",{\"type\":[1],\"value\":[1],\"name\":[1],\"items\":[16],\"choices\":[1],\"renderChoiceLimit\":[2,\"render-choice-limit\"],\"maxItemCount\":[2,\"max-item-count\"],\"addItems\":[4,\"add-items\"],\"removeItems\":[4,\"remove-items\"],\"removeItemButton\":[4,\"remove-item-button\"],\"editItems\":[4,\"edit-items\"],\"duplicateItemsAllowed\":[4,\"duplicate-items-allowed\"],\"delimiter\":[1],\"paste\":[4],\"searchEnabled\":[4,\"search-enabled\"],\"searchChoices\":[4,\"search-choices\"],\"searchFields\":[1,\"search-fields\"],\"searchFloor\":[2,\"search-floor\"],\"searchResultLimit\":[2,\"search-result-limit\"],\"position\":[1],\"resetScrollPosition\":[4,\"reset-scroll-position\"],\"shouldSort\":[4,\"should-sort\"],\"shouldSortItems\":[4,\"should-sort-items\"],\"sorter\":[16],\"placeholder\":[8],\"placeholderValue\":[1,\"placeholder-value\"],\"searchPlaceholderValue\":[1,\"search-placeholder-value\"],\"prependValue\":[1,\"prepend-value\"],\"appendValue\":[1,\"append-value\"],\"renderSelectedChoices\":[1,\"render-selected-choices\"],\"loadingText\":[1,\"loading-text\"],\"noResultsText\":[1,\"no-results-text\"],\"noChoicesText\":[1,\"no-choices-text\"],\"itemSelectText\":[1,\"item-select-text\"],\"addItemText\":[1,\"add-item-text\"],\"maxItemText\":[1,\"max-item-text\"],\"uniqueItemText\":[1,\"unique-item-text\"],\"classNames\":[16],\"fuseOptions\":[16],\"addItemFilter\":[1,\"add-item-filter\"],\"customAddItemText\":[1,\"custom-add-item-text\"],\"callbackOnInit\":[16],\"callbackOnCreateTemplates\":[16],\"valueComparer\":[16],\"ifxError\":[4,\"ifx-error\"],\"ifxErrorMessage\":[1,\"ifx-error-message\"],\"ifxLabel\":[1,\"ifx-label\"],\"ifxDisabled\":[4,\"ifx-disabled\"],\"ifxPlaceholderValue\":[1,\"ifx-placeholder-value\"],\"ifxOptions\":[1,\"ifx-options\"],\"ifxSize\":[1,\"ifx-size\"],\"ifxSelectedOption\":[32],\"handleChange\":[64],\"highlightItem\":[64],\"unhighlightItem\":[64],\"highlightAll\":[64],\"unhighlightAll\":[64],\"removeActiveItemsByValue\":[64],\"removeActiveItems\":[64],\"removeHighlightedItems\":[64],\"showDropdown\":[64],\"hideDropdown\":[64],\"getValue\":[64],\"setValue\":[64],\"setChoiceByValue\":[64],\"setChoices\":[64],\"clearChoices\":[64],\"clearStore\":[64],\"clearInput\":[64],\"enable\":[64],\"disable\":[64],\"ajax\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-button.cjs\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"type\":[1],\"fullWidth\":[4,\"full-width\"],\"internalHref\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"],[2,\"click\",\"handleHostClick\"]],{\"href\":[\"setInternalHref\"]}]]],[\"ifx-accordion_2.cjs\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[1028],\"initialCollapse\":[4,\"initial-collapse\"],\"internalOpen\":[32]},null,{\"open\":[\"openChanged\"]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-icon-button.cjs\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-link.cjs\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"internalHref\":[32],\"internalTarget\":[32],\"internalVariant\":[32]}]]],[\"ifx-number-indicator.cjs\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]]]"), options);
45
+ return index.bootstrapLazy(JSON.parse("[[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"ifx-overview-table.cjs\",[[1,\"ifx-overview-table\"]]],[\"ifx-pagination.cjs\",[[1,\"ifx-pagination\",{\"currentPage\":[2,\"current-page\"],\"total\":[2],\"internalPage\":[32],\"itemsPerPage\":[32],\"numberOfPages\":[32]},[[0,\"ifxSelect\",\"setItemsPerPage\"]]]]],[\"ifx-dropdown-trigger-button.cjs\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-modal.cjs\",[[1,\"ifx-modal\",{\"opened\":[1540],\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"variant\":[1],\"size\":[1],\"alertIcon\":[1,\"alert-icon\"],\"okButtonLabel\":[1,\"ok-button-label\"],\"cancelButtonLabel\":[1,\"cancel-button-label\"],\"showCloseButton\":[4,\"show-close-button\"],\"showModal\":[32],\"slotButtonsPresent\":[32]},null,{\"opened\":[\"openedChanged\"]}]]],[\"ifx-multiselect.cjs\",[[1,\"ifx-multiselect\",{\"options\":[1],\"batchSize\":[2,\"batch-size\"],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"placeholder\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"searchEnabled\":[4,\"search-enabled\"],\"internalError\":[32],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32],\"isLoading\":[32],\"loadedOptions\":[32],\"filteredOptions\":[32]},null,{\"error\":[\"updateInternalError\"],\"loadedOptions\":[\"loadedOptionsChanged\"]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32],\"onNavbarMobile\":[64]},null,{\"isOpen\":[\"handlePropChange\"]}]]],[\"ifx-sidebar-item.cjs\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"numberIndicator\":[2,\"number-indicator\"],\"active\":[4],\"isActionItem\":[4,\"is-action-item\"],\"value\":[1],\"handleItemClick\":[16],\"hasIcon\":[32],\"hasIconWrapper\":[32],\"internalHref\":[32],\"isExpandable\":[32],\"isNested\":[32],\"isSubMenuItem\":[32],\"internalActiveState\":[32],\"setActiveClasses\":[64],\"expandMenu\":[64],\"isItemExpandable\":[64]},[[0,\"consoleError\",\"handleConsoleError\"]],{\"active\":[\"handleActiveChange\"]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"variant\":[1],\"icon\":[1],\"closable\":[4]}]]],[\"ifx-breadcrumb-item-label.cjs\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip.cjs\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"selectedValue\":[32],\"active\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"termsUrl\":[1,\"terms-url\"],\"termsTarget\":[1,\"terms-target\"],\"imprintUrl\":[1,\"imprint-url\"],\"imprintTarget\":[1,\"imprint-target\"],\"privacyPolicyUrl\":[1,\"privacy-policy-url\"],\"privacyPolicyTarget\":[1,\"privacy-policy-target\"],\"glossaryUrl\":[1,\"glossary-url\"],\"glossaryTarget\":[1,\"glossary-target\"],\"copyrightText\":[1,\"copyright-text\"],\"large\":[32],\"medium\":[32],\"currentYear\":[32]}]]],[\"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\"],\"fixed\":[4],\"showLogoAndAppname\":[4,\"show-logo-and-appname\"],\"logoHref\":[1,\"logo-href\"],\"logoHrefTarget\":[1,\"logo-href-target\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32],\"internalLogoHref\":[32],\"internalLogoHrefTarget\":[32]},[[0,\"ifxNavItem\",\"clearFirstLayerMenu\"],[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"]]]]],[\"ifx-navbar-item.cjs\",[[1,\"ifx-navbar-item\",{\"showLabel\":[4,\"show-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideOnMobile\":[4,\"hide-on-mobile\"],\"internalHref\":[32],\"isMenuItem\":[32],\"hasChildNavItems\":[32],\"isSidebarMenuItem\":[32],\"itemPosition\":[32],\"hideComponent\":[64],\"showComponent\":[64],\"toggleChildren\":[64],\"moveChildComponentsIntoSubLayerMenu\":[64],\"toggleFirstLayerItem\":[64],\"addMenuItemClass\":[64],\"moveChildComponentsBackIntoNavbar\":[64],\"returnToFirstLayer\":[64],\"setMenuItemPosition\":[64],\"setItemSideSpecifications\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-slider.cjs\",[[1,\"ifx-slider\",{\"min\":[2],\"max\":[2],\"value\":[2],\"minValueHandle\":[2,\"min-value-handle\"],\"maxValueHandle\":[2,\"max-value-handle\"],\"disabled\":[4],\"showPercentage\":[4,\"show-percentage\"],\"leftIcon\":[1,\"left-icon\"],\"rightIcon\":[1,\"right-icon\"],\"leftText\":[1,\"left-text\"],\"rightText\":[1,\"right-text\"],\"type\":[1],\"internalValue\":[32],\"percentage\":[32],\"internalMinValue\":[32],\"internalMaxValue\":[32]},null,{\"value\":[\"valueChanged\"],\"minValueHandle\":[\"minValueChanged\"],\"maxValueHandle\":[\"maxValueChanged\"]}]]],[\"ifx-step.cjs\",[[1,\"ifx-step\",{\"lastStep\":[4,\"last-step\"],\"stepId\":[2,\"step-id\"],\"stepperState\":[8,\"stepper-state\"],\"error\":[4]}]]],[\"ifx-tabs.cjs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"activeTabIndex\":[1026,\"active-tab-index\"],\"internalOrientation\":[32],\"internalActiveTabIndex\":[32],\"internalFocusedTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"disabledTabs\":[32],\"tabObjects\":[32]},[[0,\"slotchange\",\"onSlotChange\"],[0,\"keydown\",\"handleKeyDown\"]],{\"activeTabIndex\":[\"activeTabIndexChanged\"]}]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\",{\"icon\":[1]}]]],[\"ifx-text-field.cjs\",[[1,\"ifx-text-field\",{\"placeholder\":[1],\"value\":[1025],\"error\":[4],\"label\":[1],\"icon\":[1],\"caption\":[1],\"size\":[1],\"required\":[4],\"optional\":[4],\"success\":[4],\"disabled\":[4],\"reset\":[64]},null,{\"value\":[\"valueWatcher\"]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]},null,{\"position\":[\"positionChanged\"]}]]],[\"ifx-badge.cjs\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table.cjs\",[[0,\"ifx-basic-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"gridOptions\":[32]}]]],[\"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],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32],\"internalHref\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline.cjs\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image.cjs\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links.cjs\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline.cjs\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text.cjs\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown.cjs\",[[1,\"ifx-dropdown\",{\"placement\":[1],\"defaultOpen\":[4,\"default-open\"],\"noAppendToBody\":[4,\"no-append-to-body\"],\"disabled\":[4],\"noCloseOnOutsideClick\":[4,\"no-close-on-outside-click\"],\"noCloseOnMenuClick\":[4,\"no-close-on-menu-click\"],\"internalIsOpen\":[32],\"trigger\":[32],\"menu\":[32],\"isOpen\":[64],\"closeDropdown\":[64],\"openDropdown\":[64]},[[0,\"slotchange\",\"watchHandlerSlot\"],[5,\"mousedown\",\"handleOutsideClick\"]],{\"defaultOpen\":[\"watchHandlerIsOpen\"],\"disabled\":[\"watchHandlerDisabled\"]}]]],[\"ifx-dropdown-header.cjs\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu.cjs\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator.cjs\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger.cjs\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"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-navbar-profile.cjs\",[[1,\"ifx-navbar-profile\",{\"showLabel\":[4,\"show-label\"],\"href\":[1],\"imageUrl\":[1,\"image-url\"],\"target\":[1],\"alt\":[1],\"internalHref\":[32],\"isMenuItem\":[32],\"hasChildNavItems\":[32],\"internalImageUrl\":[32],\"hideComponent\":[64],\"showComponent\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-progress-bar.cjs\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-sidebar.cjs\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"],\"initialCollapse\":[4,\"initial-collapse\"],\"showFooter\":[4,\"show-footer\"],\"showHeader\":[4,\"show-header\"],\"termsOfUse\":[1,\"terms-of-use\"],\"imprint\":[1],\"privacyPolicy\":[1,\"privacy-policy\"],\"target\":[1],\"copyrightText\":[1,\"copyright-text\"],\"currentYear\":[32],\"internalTermsofUse\":[32],\"internalImprint\":[32],\"internalPrivacyPolicy\":[32],\"internalShowFooter\":[32],\"activeItem\":[32]},[[0,\"ifxSidebarMenu\",\"handleSidebarItemInteraction\"],[0,\"ifxSidebarNavigationItem\",\"handleSidebarItemActivated\"]]]]],[\"ifx-sidebar-title.cjs\",[[1,\"ifx-sidebar-title\"]]],[\"ifx-spinner.cjs\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1],\"inverted\":[4]}]]],[\"ifx-status.cjs\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-stepper.cjs\",[[1,\"ifx-stepper\",{\"showNumber\":[4,\"show-number\"],\"activeStep\":[2,\"active-step\"],\"variant\":[1],\"internalActiveStep\":[32]},null,{\"activeStep\":[\"activeStepHandler\"]}]]],[\"ifx-switch.cjs\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\",{\"header\":[1],\"disabled\":[4],\"icon\":[1],\"iconPosition\":[1,\"icon-position\"]}]]],[\"ifx-table.cjs\",[[0,\"ifx-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"pagination\":[4],\"paginationPageSize\":[2,\"pagination-page-size\"],\"gridOptions\":[32]}]]],[\"ifx-icon.cjs\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32],\"internalIndeterminate\":[32]},null,{\"value\":[\"valueChanged\"],\"indeterminate\":[\"indeterminateChanged\"]}]]],[\"ifx-search-field.cjs\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]],{\"value\":[\"valueWatcher\"]}]]],[\"ifx-select.cjs\",[[0,\"ifx-select\",{\"type\":[1],\"value\":[1],\"name\":[1],\"items\":[16],\"choices\":[1],\"renderChoiceLimit\":[2,\"render-choice-limit\"],\"maxItemCount\":[2,\"max-item-count\"],\"addItems\":[4,\"add-items\"],\"removeItems\":[4,\"remove-items\"],\"removeItemButton\":[4,\"remove-item-button\"],\"editItems\":[4,\"edit-items\"],\"duplicateItemsAllowed\":[4,\"duplicate-items-allowed\"],\"delimiter\":[1],\"paste\":[4],\"searchEnabled\":[4,\"search-enabled\"],\"searchChoices\":[4,\"search-choices\"],\"searchFields\":[1,\"search-fields\"],\"searchFloor\":[2,\"search-floor\"],\"searchResultLimit\":[2,\"search-result-limit\"],\"position\":[1],\"resetScrollPosition\":[4,\"reset-scroll-position\"],\"shouldSort\":[4,\"should-sort\"],\"shouldSortItems\":[4,\"should-sort-items\"],\"sorter\":[16],\"placeholder\":[8],\"placeholderValue\":[1,\"placeholder-value\"],\"searchPlaceholderValue\":[1,\"search-placeholder-value\"],\"prependValue\":[1,\"prepend-value\"],\"appendValue\":[1,\"append-value\"],\"renderSelectedChoices\":[1,\"render-selected-choices\"],\"loadingText\":[1,\"loading-text\"],\"noResultsText\":[1,\"no-results-text\"],\"noChoicesText\":[1,\"no-choices-text\"],\"itemSelectText\":[1,\"item-select-text\"],\"addItemText\":[1,\"add-item-text\"],\"maxItemText\":[1,\"max-item-text\"],\"uniqueItemText\":[1,\"unique-item-text\"],\"classNames\":[16],\"fuseOptions\":[16],\"addItemFilter\":[1,\"add-item-filter\"],\"customAddItemText\":[1,\"custom-add-item-text\"],\"callbackOnInit\":[16],\"callbackOnCreateTemplates\":[16],\"valueComparer\":[16],\"ifxError\":[4,\"ifx-error\"],\"ifxErrorMessage\":[1,\"ifx-error-message\"],\"ifxLabel\":[1,\"ifx-label\"],\"ifxDisabled\":[4,\"ifx-disabled\"],\"ifxPlaceholderValue\":[1,\"ifx-placeholder-value\"],\"ifxOptions\":[1,\"ifx-options\"],\"ifxSize\":[1,\"ifx-size\"],\"ifxSelectedOption\":[32],\"handleChange\":[64],\"highlightItem\":[64],\"unhighlightItem\":[64],\"highlightAll\":[64],\"unhighlightAll\":[64],\"removeActiveItemsByValue\":[64],\"removeActiveItems\":[64],\"removeHighlightedItems\":[64],\"showDropdown\":[64],\"hideDropdown\":[64],\"getValue\":[64],\"setValue\":[64],\"setChoiceByValue\":[64],\"setChoices\":[64],\"clearChoices\":[64],\"clearStore\":[64],\"clearInput\":[64],\"enable\":[64],\"disable\":[64],\"ajax\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-button.cjs\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"type\":[1],\"fullWidth\":[4,\"full-width\"],\"internalHref\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"],[2,\"click\",\"handleHostClick\"]],{\"href\":[\"setInternalHref\"]}]]],[\"ifx-accordion_2.cjs\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[1028],\"initialCollapse\":[4,\"initial-collapse\"],\"internalOpen\":[32]},null,{\"open\":[\"openChanged\"]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-icon-button.cjs\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-link.cjs\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"internalHref\":[32],\"internalTarget\":[32],\"internalVariant\":[32]}]]],[\"ifx-number-indicator.cjs\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]]]"), options);
46
46
  });
47
47
 
48
48
  exports.setNonce = index.setNonce;
package/dist/cjs/loader.cjs.js CHANGED
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
8
8
  const defineCustomElements = async (win, options) => {
9
9
  if (typeof window === 'undefined') return undefined;
10
10
  await appGlobals.globalScripts();
11
- return index.bootstrapLazy(JSON.parse("[[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"ifx-overview-table.cjs\",[[1,\"ifx-overview-table\"]]],[\"ifx-pagination.cjs\",[[1,\"ifx-pagination\",{\"currentPage\":[2,\"current-page\"],\"total\":[2],\"internalPage\":[32],\"itemsPerPage\":[32],\"numberOfPages\":[32]},[[0,\"ifxSelect\",\"setItemsPerPage\"]]]]],[\"ifx-dropdown-trigger-button.cjs\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-modal.cjs\",[[1,\"ifx-modal\",{\"opened\":[1540],\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"variant\":[1],\"alertIcon\":[1,\"alert-icon\"],\"okButtonLabel\":[1,\"ok-button-label\"],\"cancelButtonLabel\":[1,\"cancel-button-label\"],\"showCloseButton\":[4,\"show-close-button\"],\"showModal\":[32],\"slotButtonsPresent\":[32]},null,{\"opened\":[\"openedChanged\"]}]]],[\"ifx-multiselect.cjs\",[[1,\"ifx-multiselect\",{\"options\":[1],\"batchSize\":[2,\"batch-size\"],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"placeholder\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"searchEnabled\":[4,\"search-enabled\"],\"internalError\":[32],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32],\"isLoading\":[32],\"loadedOptions\":[32],\"filteredOptions\":[32]},null,{\"error\":[\"updateInternalError\"],\"loadedOptions\":[\"loadedOptionsChanged\"]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32],\"onNavbarMobile\":[64]},null,{\"isOpen\":[\"handlePropChange\"]}]]],[\"ifx-sidebar-item.cjs\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"numberIndicator\":[2,\"number-indicator\"],\"active\":[4],\"isActionItem\":[4,\"is-action-item\"],\"value\":[1],\"handleItemClick\":[16],\"hasIcon\":[32],\"hasIconWrapper\":[32],\"internalHref\":[32],\"isExpandable\":[32],\"isNested\":[32],\"isSubMenuItem\":[32],\"internalActiveState\":[32],\"setActiveClasses\":[64],\"expandMenu\":[64],\"isItemExpandable\":[64]},[[0,\"consoleError\",\"handleConsoleError\"]],{\"active\":[\"handleActiveChange\"]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"variant\":[1],\"icon\":[1],\"closable\":[4]}]]],[\"ifx-breadcrumb-item-label.cjs\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip.cjs\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"selectedValue\":[32],\"active\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"termsUrl\":[1,\"terms-url\"],\"termsTarget\":[1,\"terms-target\"],\"imprintUrl\":[1,\"imprint-url\"],\"imprintTarget\":[1,\"imprint-target\"],\"privacyPolicyUrl\":[1,\"privacy-policy-url\"],\"privacyPolicyTarget\":[1,\"privacy-policy-target\"],\"glossaryUrl\":[1,\"glossary-url\"],\"glossaryTarget\":[1,\"glossary-target\"],\"copyrightText\":[1,\"copyright-text\"],\"large\":[32],\"medium\":[32],\"currentYear\":[32]}]]],[\"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\"],\"fixed\":[4],\"showLogoAndAppname\":[4,\"show-logo-and-appname\"],\"logoHref\":[1,\"logo-href\"],\"logoHrefTarget\":[1,\"logo-href-target\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32],\"internalLogoHref\":[32],\"internalLogoHrefTarget\":[32]},[[0,\"ifxNavItem\",\"clearFirstLayerMenu\"],[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"]]]]],[\"ifx-navbar-item.cjs\",[[1,\"ifx-navbar-item\",{\"showLabel\":[4,\"show-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideOnMobile\":[4,\"hide-on-mobile\"],\"internalHref\":[32],\"isMenuItem\":[32],\"hasChildNavItems\":[32],\"isSidebarMenuItem\":[32],\"itemPosition\":[32],\"hideComponent\":[64],\"showComponent\":[64],\"toggleChildren\":[64],\"moveChildComponentsIntoSubLayerMenu\":[64],\"toggleFirstLayerItem\":[64],\"addMenuItemClass\":[64],\"moveChildComponentsBackIntoNavbar\":[64],\"returnToFirstLayer\":[64],\"setMenuItemPosition\":[64],\"setItemSideSpecifications\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-slider.cjs\",[[1,\"ifx-slider\",{\"min\":[2],\"max\":[2],\"value\":[2],\"minValueHandle\":[2,\"min-value-handle\"],\"maxValueHandle\":[2,\"max-value-handle\"],\"disabled\":[4],\"showPercentage\":[4,\"show-percentage\"],\"leftIcon\":[1,\"left-icon\"],\"rightIcon\":[1,\"right-icon\"],\"leftText\":[1,\"left-text\"],\"rightText\":[1,\"right-text\"],\"type\":[1],\"internalValue\":[32],\"percentage\":[32],\"internalMinValue\":[32],\"internalMaxValue\":[32]},null,{\"value\":[\"valueChanged\"],\"minValueHandle\":[\"minValueChanged\"],\"maxValueHandle\":[\"maxValueChanged\"]}]]],[\"ifx-step.cjs\",[[1,\"ifx-step\",{\"lastStep\":[4,\"last-step\"],\"stepId\":[2,\"step-id\"],\"stepperState\":[8,\"stepper-state\"],\"error\":[4]}]]],[\"ifx-tabs.cjs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"activeTabIndex\":[1026,\"active-tab-index\"],\"internalOrientation\":[32],\"internalActiveTabIndex\":[32],\"internalFocusedTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"disabledTabs\":[32],\"tabObjects\":[32]},[[0,\"slotchange\",\"onSlotChange\"],[0,\"keydown\",\"handleKeyDown\"]],{\"activeTabIndex\":[\"activeTabIndexChanged\"]}]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\",{\"icon\":[1]}]]],[\"ifx-text-field.cjs\",[[1,\"ifx-text-field\",{\"placeholder\":[1],\"value\":[1025],\"error\":[4],\"label\":[1],\"icon\":[1],\"caption\":[1],\"size\":[1],\"required\":[4],\"optional\":[4],\"success\":[4],\"disabled\":[4],\"reset\":[64]},null,{\"value\":[\"valueWatcher\"]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]},null,{\"position\":[\"positionChanged\"]}]]],[\"ifx-badge.cjs\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table.cjs\",[[0,\"ifx-basic-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"gridOptions\":[32]}]]],[\"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],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32],\"internalHref\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline.cjs\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image.cjs\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links.cjs\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline.cjs\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text.cjs\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown.cjs\",[[1,\"ifx-dropdown\",{\"placement\":[1],\"defaultOpen\":[4,\"default-open\"],\"noAppendToBody\":[4,\"no-append-to-body\"],\"disabled\":[4],\"noCloseOnOutsideClick\":[4,\"no-close-on-outside-click\"],\"noCloseOnMenuClick\":[4,\"no-close-on-menu-click\"],\"internalIsOpen\":[32],\"trigger\":[32],\"menu\":[32],\"isOpen\":[64],\"closeDropdown\":[64],\"openDropdown\":[64]},[[0,\"slotchange\",\"watchHandlerSlot\"],[5,\"mousedown\",\"handleOutsideClick\"]],{\"defaultOpen\":[\"watchHandlerIsOpen\"],\"disabled\":[\"watchHandlerDisabled\"]}]]],[\"ifx-dropdown-header.cjs\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu.cjs\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator.cjs\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger.cjs\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"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-navbar-profile.cjs\",[[1,\"ifx-navbar-profile\",{\"showLabel\":[4,\"show-label\"],\"href\":[1],\"imageUrl\":[1,\"image-url\"],\"target\":[1],\"alt\":[1],\"internalHref\":[32],\"isMenuItem\":[32],\"hasChildNavItems\":[32],\"internalImageUrl\":[32],\"hideComponent\":[64],\"showComponent\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-progress-bar.cjs\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-sidebar.cjs\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"],\"initialCollapse\":[4,\"initial-collapse\"],\"showFooter\":[4,\"show-footer\"],\"showHeader\":[4,\"show-header\"],\"termsOfUse\":[1,\"terms-of-use\"],\"imprint\":[1],\"privacyPolicy\":[1,\"privacy-policy\"],\"target\":[1],\"copyrightText\":[1,\"copyright-text\"],\"currentYear\":[32],\"internalTermsofUse\":[32],\"internalImprint\":[32],\"internalPrivacyPolicy\":[32],\"internalShowFooter\":[32],\"activeItem\":[32]},[[0,\"ifxSidebarMenu\",\"handleSidebarItemInteraction\"],[0,\"ifxSidebarNavigationItem\",\"handleSidebarItemActivated\"]]]]],[\"ifx-sidebar-title.cjs\",[[1,\"ifx-sidebar-title\"]]],[\"ifx-spinner.cjs\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1],\"inverted\":[4]}]]],[\"ifx-status.cjs\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-stepper.cjs\",[[1,\"ifx-stepper\",{\"showNumber\":[4,\"show-number\"],\"activeStep\":[2,\"active-step\"],\"variant\":[1],\"internalActiveStep\":[32]},null,{\"activeStep\":[\"activeStepHandler\"]}]]],[\"ifx-switch.cjs\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\",{\"header\":[1],\"disabled\":[4],\"icon\":[1],\"iconPosition\":[1,\"icon-position\"]}]]],[\"ifx-table.cjs\",[[0,\"ifx-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"pagination\":[4],\"paginationPageSize\":[2,\"pagination-page-size\"],\"gridOptions\":[32]}]]],[\"ifx-icon.cjs\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32],\"internalIndeterminate\":[32]},null,{\"value\":[\"valueChanged\"],\"indeterminate\":[\"indeterminateChanged\"]}]]],[\"ifx-search-field.cjs\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]],{\"value\":[\"valueWatcher\"]}]]],[\"ifx-select.cjs\",[[0,\"ifx-select\",{\"type\":[1],\"value\":[1],\"name\":[1],\"items\":[16],\"choices\":[1],\"renderChoiceLimit\":[2,\"render-choice-limit\"],\"maxItemCount\":[2,\"max-item-count\"],\"addItems\":[4,\"add-items\"],\"removeItems\":[4,\"remove-items\"],\"removeItemButton\":[4,\"remove-item-button\"],\"editItems\":[4,\"edit-items\"],\"duplicateItemsAllowed\":[4,\"duplicate-items-allowed\"],\"delimiter\":[1],\"paste\":[4],\"searchEnabled\":[4,\"search-enabled\"],\"searchChoices\":[4,\"search-choices\"],\"searchFields\":[1,\"search-fields\"],\"searchFloor\":[2,\"search-floor\"],\"searchResultLimit\":[2,\"search-result-limit\"],\"position\":[1],\"resetScrollPosition\":[4,\"reset-scroll-position\"],\"shouldSort\":[4,\"should-sort\"],\"shouldSortItems\":[4,\"should-sort-items\"],\"sorter\":[16],\"placeholder\":[8],\"placeholderValue\":[1,\"placeholder-value\"],\"searchPlaceholderValue\":[1,\"search-placeholder-value\"],\"prependValue\":[1,\"prepend-value\"],\"appendValue\":[1,\"append-value\"],\"renderSelectedChoices\":[1,\"render-selected-choices\"],\"loadingText\":[1,\"loading-text\"],\"noResultsText\":[1,\"no-results-text\"],\"noChoicesText\":[1,\"no-choices-text\"],\"itemSelectText\":[1,\"item-select-text\"],\"addItemText\":[1,\"add-item-text\"],\"maxItemText\":[1,\"max-item-text\"],\"uniqueItemText\":[1,\"unique-item-text\"],\"classNames\":[16],\"fuseOptions\":[16],\"addItemFilter\":[1,\"add-item-filter\"],\"customAddItemText\":[1,\"custom-add-item-text\"],\"callbackOnInit\":[16],\"callbackOnCreateTemplates\":[16],\"valueComparer\":[16],\"ifxError\":[4,\"ifx-error\"],\"ifxErrorMessage\":[1,\"ifx-error-message\"],\"ifxLabel\":[1,\"ifx-label\"],\"ifxDisabled\":[4,\"ifx-disabled\"],\"ifxPlaceholderValue\":[1,\"ifx-placeholder-value\"],\"ifxOptions\":[1,\"ifx-options\"],\"ifxSize\":[1,\"ifx-size\"],\"ifxSelectedOption\":[32],\"handleChange\":[64],\"highlightItem\":[64],\"unhighlightItem\":[64],\"highlightAll\":[64],\"unhighlightAll\":[64],\"removeActiveItemsByValue\":[64],\"removeActiveItems\":[64],\"removeHighlightedItems\":[64],\"showDropdown\":[64],\"hideDropdown\":[64],\"getValue\":[64],\"setValue\":[64],\"setChoiceByValue\":[64],\"setChoices\":[64],\"clearChoices\":[64],\"clearStore\":[64],\"clearInput\":[64],\"enable\":[64],\"disable\":[64],\"ajax\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-button.cjs\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"type\":[1],\"fullWidth\":[4,\"full-width\"],\"internalHref\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"],[2,\"click\",\"handleHostClick\"]],{\"href\":[\"setInternalHref\"]}]]],[\"ifx-accordion_2.cjs\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[1028],\"initialCollapse\":[4,\"initial-collapse\"],\"internalOpen\":[32]},null,{\"open\":[\"openChanged\"]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-icon-button.cjs\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-link.cjs\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"internalHref\":[32],\"internalTarget\":[32],\"internalVariant\":[32]}]]],[\"ifx-number-indicator.cjs\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]]]"), options);
11
+ return index.bootstrapLazy(JSON.parse("[[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"ifx-overview-table.cjs\",[[1,\"ifx-overview-table\"]]],[\"ifx-pagination.cjs\",[[1,\"ifx-pagination\",{\"currentPage\":[2,\"current-page\"],\"total\":[2],\"internalPage\":[32],\"itemsPerPage\":[32],\"numberOfPages\":[32]},[[0,\"ifxSelect\",\"setItemsPerPage\"]]]]],[\"ifx-dropdown-trigger-button.cjs\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-modal.cjs\",[[1,\"ifx-modal\",{\"opened\":[1540],\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"variant\":[1],\"size\":[1],\"alertIcon\":[1,\"alert-icon\"],\"okButtonLabel\":[1,\"ok-button-label\"],\"cancelButtonLabel\":[1,\"cancel-button-label\"],\"showCloseButton\":[4,\"show-close-button\"],\"showModal\":[32],\"slotButtonsPresent\":[32]},null,{\"opened\":[\"openedChanged\"]}]]],[\"ifx-multiselect.cjs\",[[1,\"ifx-multiselect\",{\"options\":[1],\"batchSize\":[2,\"batch-size\"],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"placeholder\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"searchEnabled\":[4,\"search-enabled\"],\"internalError\":[32],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32],\"isLoading\":[32],\"loadedOptions\":[32],\"filteredOptions\":[32]},null,{\"error\":[\"updateInternalError\"],\"loadedOptions\":[\"loadedOptionsChanged\"]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32],\"onNavbarMobile\":[64]},null,{\"isOpen\":[\"handlePropChange\"]}]]],[\"ifx-sidebar-item.cjs\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"numberIndicator\":[2,\"number-indicator\"],\"active\":[4],\"isActionItem\":[4,\"is-action-item\"],\"value\":[1],\"handleItemClick\":[16],\"hasIcon\":[32],\"hasIconWrapper\":[32],\"internalHref\":[32],\"isExpandable\":[32],\"isNested\":[32],\"isSubMenuItem\":[32],\"internalActiveState\":[32],\"setActiveClasses\":[64],\"expandMenu\":[64],\"isItemExpandable\":[64]},[[0,\"consoleError\",\"handleConsoleError\"]],{\"active\":[\"handleActiveChange\"]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"variant\":[1],\"icon\":[1],\"closable\":[4]}]]],[\"ifx-breadcrumb-item-label.cjs\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip.cjs\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"selectedValue\":[32],\"active\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"termsUrl\":[1,\"terms-url\"],\"termsTarget\":[1,\"terms-target\"],\"imprintUrl\":[1,\"imprint-url\"],\"imprintTarget\":[1,\"imprint-target\"],\"privacyPolicyUrl\":[1,\"privacy-policy-url\"],\"privacyPolicyTarget\":[1,\"privacy-policy-target\"],\"glossaryUrl\":[1,\"glossary-url\"],\"glossaryTarget\":[1,\"glossary-target\"],\"copyrightText\":[1,\"copyright-text\"],\"large\":[32],\"medium\":[32],\"currentYear\":[32]}]]],[\"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\"],\"fixed\":[4],\"showLogoAndAppname\":[4,\"show-logo-and-appname\"],\"logoHref\":[1,\"logo-href\"],\"logoHrefTarget\":[1,\"logo-href-target\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32],\"internalLogoHref\":[32],\"internalLogoHrefTarget\":[32]},[[0,\"ifxNavItem\",\"clearFirstLayerMenu\"],[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"]]]]],[\"ifx-navbar-item.cjs\",[[1,\"ifx-navbar-item\",{\"showLabel\":[4,\"show-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideOnMobile\":[4,\"hide-on-mobile\"],\"internalHref\":[32],\"isMenuItem\":[32],\"hasChildNavItems\":[32],\"isSidebarMenuItem\":[32],\"itemPosition\":[32],\"hideComponent\":[64],\"showComponent\":[64],\"toggleChildren\":[64],\"moveChildComponentsIntoSubLayerMenu\":[64],\"toggleFirstLayerItem\":[64],\"addMenuItemClass\":[64],\"moveChildComponentsBackIntoNavbar\":[64],\"returnToFirstLayer\":[64],\"setMenuItemPosition\":[64],\"setItemSideSpecifications\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-slider.cjs\",[[1,\"ifx-slider\",{\"min\":[2],\"max\":[2],\"value\":[2],\"minValueHandle\":[2,\"min-value-handle\"],\"maxValueHandle\":[2,\"max-value-handle\"],\"disabled\":[4],\"showPercentage\":[4,\"show-percentage\"],\"leftIcon\":[1,\"left-icon\"],\"rightIcon\":[1,\"right-icon\"],\"leftText\":[1,\"left-text\"],\"rightText\":[1,\"right-text\"],\"type\":[1],\"internalValue\":[32],\"percentage\":[32],\"internalMinValue\":[32],\"internalMaxValue\":[32]},null,{\"value\":[\"valueChanged\"],\"minValueHandle\":[\"minValueChanged\"],\"maxValueHandle\":[\"maxValueChanged\"]}]]],[\"ifx-step.cjs\",[[1,\"ifx-step\",{\"lastStep\":[4,\"last-step\"],\"stepId\":[2,\"step-id\"],\"stepperState\":[8,\"stepper-state\"],\"error\":[4]}]]],[\"ifx-tabs.cjs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"activeTabIndex\":[1026,\"active-tab-index\"],\"internalOrientation\":[32],\"internalActiveTabIndex\":[32],\"internalFocusedTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"disabledTabs\":[32],\"tabObjects\":[32]},[[0,\"slotchange\",\"onSlotChange\"],[0,\"keydown\",\"handleKeyDown\"]],{\"activeTabIndex\":[\"activeTabIndexChanged\"]}]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\",{\"icon\":[1]}]]],[\"ifx-text-field.cjs\",[[1,\"ifx-text-field\",{\"placeholder\":[1],\"value\":[1025],\"error\":[4],\"label\":[1],\"icon\":[1],\"caption\":[1],\"size\":[1],\"required\":[4],\"optional\":[4],\"success\":[4],\"disabled\":[4],\"reset\":[64]},null,{\"value\":[\"valueWatcher\"]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]},null,{\"position\":[\"positionChanged\"]}]]],[\"ifx-badge.cjs\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table.cjs\",[[0,\"ifx-basic-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"gridOptions\":[32]}]]],[\"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],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32],\"internalHref\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline.cjs\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image.cjs\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links.cjs\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline.cjs\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text.cjs\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown.cjs\",[[1,\"ifx-dropdown\",{\"placement\":[1],\"defaultOpen\":[4,\"default-open\"],\"noAppendToBody\":[4,\"no-append-to-body\"],\"disabled\":[4],\"noCloseOnOutsideClick\":[4,\"no-close-on-outside-click\"],\"noCloseOnMenuClick\":[4,\"no-close-on-menu-click\"],\"internalIsOpen\":[32],\"trigger\":[32],\"menu\":[32],\"isOpen\":[64],\"closeDropdown\":[64],\"openDropdown\":[64]},[[0,\"slotchange\",\"watchHandlerSlot\"],[5,\"mousedown\",\"handleOutsideClick\"]],{\"defaultOpen\":[\"watchHandlerIsOpen\"],\"disabled\":[\"watchHandlerDisabled\"]}]]],[\"ifx-dropdown-header.cjs\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu.cjs\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator.cjs\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger.cjs\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"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-navbar-profile.cjs\",[[1,\"ifx-navbar-profile\",{\"showLabel\":[4,\"show-label\"],\"href\":[1],\"imageUrl\":[1,\"image-url\"],\"target\":[1],\"alt\":[1],\"internalHref\":[32],\"isMenuItem\":[32],\"hasChildNavItems\":[32],\"internalImageUrl\":[32],\"hideComponent\":[64],\"showComponent\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-progress-bar.cjs\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-sidebar.cjs\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"],\"initialCollapse\":[4,\"initial-collapse\"],\"showFooter\":[4,\"show-footer\"],\"showHeader\":[4,\"show-header\"],\"termsOfUse\":[1,\"terms-of-use\"],\"imprint\":[1],\"privacyPolicy\":[1,\"privacy-policy\"],\"target\":[1],\"copyrightText\":[1,\"copyright-text\"],\"currentYear\":[32],\"internalTermsofUse\":[32],\"internalImprint\":[32],\"internalPrivacyPolicy\":[32],\"internalShowFooter\":[32],\"activeItem\":[32]},[[0,\"ifxSidebarMenu\",\"handleSidebarItemInteraction\"],[0,\"ifxSidebarNavigationItem\",\"handleSidebarItemActivated\"]]]]],[\"ifx-sidebar-title.cjs\",[[1,\"ifx-sidebar-title\"]]],[\"ifx-spinner.cjs\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1],\"inverted\":[4]}]]],[\"ifx-status.cjs\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-stepper.cjs\",[[1,\"ifx-stepper\",{\"showNumber\":[4,\"show-number\"],\"activeStep\":[2,\"active-step\"],\"variant\":[1],\"internalActiveStep\":[32]},null,{\"activeStep\":[\"activeStepHandler\"]}]]],[\"ifx-switch.cjs\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\",{\"header\":[1],\"disabled\":[4],\"icon\":[1],\"iconPosition\":[1,\"icon-position\"]}]]],[\"ifx-table.cjs\",[[0,\"ifx-table\",{\"cols\":[1],\"rows\":[1],\"columnDefs\":[16],\"rowData\":[16],\"rowHeight\":[1,\"row-height\"],\"uniqueKey\":[1,\"unique-key\"],\"tableHeight\":[1,\"table-height\"],\"pagination\":[4],\"paginationPageSize\":[2,\"pagination-page-size\"],\"gridOptions\":[32]}]]],[\"ifx-icon.cjs\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32],\"internalIndeterminate\":[32]},null,{\"value\":[\"valueChanged\"],\"indeterminate\":[\"indeterminateChanged\"]}]]],[\"ifx-search-field.cjs\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]],{\"value\":[\"valueWatcher\"]}]]],[\"ifx-select.cjs\",[[0,\"ifx-select\",{\"type\":[1],\"value\":[1],\"name\":[1],\"items\":[16],\"choices\":[1],\"renderChoiceLimit\":[2,\"render-choice-limit\"],\"maxItemCount\":[2,\"max-item-count\"],\"addItems\":[4,\"add-items\"],\"removeItems\":[4,\"remove-items\"],\"removeItemButton\":[4,\"remove-item-button\"],\"editItems\":[4,\"edit-items\"],\"duplicateItemsAllowed\":[4,\"duplicate-items-allowed\"],\"delimiter\":[1],\"paste\":[4],\"searchEnabled\":[4,\"search-enabled\"],\"searchChoices\":[4,\"search-choices\"],\"searchFields\":[1,\"search-fields\"],\"searchFloor\":[2,\"search-floor\"],\"searchResultLimit\":[2,\"search-result-limit\"],\"position\":[1],\"resetScrollPosition\":[4,\"reset-scroll-position\"],\"shouldSort\":[4,\"should-sort\"],\"shouldSortItems\":[4,\"should-sort-items\"],\"sorter\":[16],\"placeholder\":[8],\"placeholderValue\":[1,\"placeholder-value\"],\"searchPlaceholderValue\":[1,\"search-placeholder-value\"],\"prependValue\":[1,\"prepend-value\"],\"appendValue\":[1,\"append-value\"],\"renderSelectedChoices\":[1,\"render-selected-choices\"],\"loadingText\":[1,\"loading-text\"],\"noResultsText\":[1,\"no-results-text\"],\"noChoicesText\":[1,\"no-choices-text\"],\"itemSelectText\":[1,\"item-select-text\"],\"addItemText\":[1,\"add-item-text\"],\"maxItemText\":[1,\"max-item-text\"],\"uniqueItemText\":[1,\"unique-item-text\"],\"classNames\":[16],\"fuseOptions\":[16],\"addItemFilter\":[1,\"add-item-filter\"],\"customAddItemText\":[1,\"custom-add-item-text\"],\"callbackOnInit\":[16],\"callbackOnCreateTemplates\":[16],\"valueComparer\":[16],\"ifxError\":[4,\"ifx-error\"],\"ifxErrorMessage\":[1,\"ifx-error-message\"],\"ifxLabel\":[1,\"ifx-label\"],\"ifxDisabled\":[4,\"ifx-disabled\"],\"ifxPlaceholderValue\":[1,\"ifx-placeholder-value\"],\"ifxOptions\":[1,\"ifx-options\"],\"ifxSize\":[1,\"ifx-size\"],\"ifxSelectedOption\":[32],\"handleChange\":[64],\"highlightItem\":[64],\"unhighlightItem\":[64],\"highlightAll\":[64],\"unhighlightAll\":[64],\"removeActiveItemsByValue\":[64],\"removeActiveItems\":[64],\"removeHighlightedItems\":[64],\"showDropdown\":[64],\"hideDropdown\":[64],\"getValue\":[64],\"setValue\":[64],\"setChoiceByValue\":[64],\"setChoices\":[64],\"clearChoices\":[64],\"clearStore\":[64],\"clearInput\":[64],\"enable\":[64],\"disable\":[64],\"ajax\":[64]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-button.cjs\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"type\":[1],\"fullWidth\":[4,\"full-width\"],\"internalHref\":[32],\"setFocus\":[64]},[[0,\"keydown\",\"handleKeyDown\"],[2,\"click\",\"handleHostClick\"]],{\"href\":[\"setInternalHref\"]}]]],[\"ifx-accordion_2.cjs\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[1028],\"initialCollapse\":[4,\"initial-collapse\"],\"internalOpen\":[32]},null,{\"open\":[\"openChanged\"]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-icon-button.cjs\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-link.cjs\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"internalHref\":[32],\"internalTarget\":[32],\"internalVariant\":[32]}]]],[\"ifx-number-indicator.cjs\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]]]"), options);
12
12
  };
13
13
 
14
14
  exports.setNonce = index.setNonce;
package/dist/collection/components/modal/modal.css CHANGED
@@ -57,6 +57,20 @@
57
57
  width: 540px;
58
58
  min-height: 132px;
59
59
  }
60
+ .modal-content-container.m, .modal-content-container.l, .modal-content-container.s {
61
+ width: 90%;
62
+ }
63
+ }
64
+ @media screen and (min-width: 1024px) {
65
+ .modal-content-container.s {
66
+ width: 47vw;
67
+ }
68
+ .modal-content-container.m {
69
+ width: 63vw;
70
+ }
71
+ .modal-content-container.l {
72
+ width: 80%;
73
+ }
60
74
  }
61
75
  .modal-content {
62
76
  display: flex;
package/dist/collection/components/modal/modal.js CHANGED
@@ -23,6 +23,7 @@ export class IfxModal {
23
23
  this.caption = 'Modal Title';
24
24
  this.closeOnOverlayClick = true;
25
25
  this.variant = 'default';
26
+ this.size = 's';
26
27
  this.alertIcon = '';
27
28
  this.okButtonLabel = 'OK';
28
29
  this.cancelButtonLabel = 'Cancel';
@@ -117,8 +118,8 @@ export class IfxModal {
117
118
  }
118
119
  render() {
119
120
  const isAlertVariant = this.variant !== 'default';
120
- return (h(Host, { key: 'f0813d1a7e4f67c3c0a5cdd223a3b2ff15599b74' }, h("div", { key: 'e7afd81ae3c34606fec4964f4d064a4a5d4639ef', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { key: 'f76ab35c1d23f8c85ef8f25c839a785c48d69b5d', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: 'c43a7f61d549ad93d5577d49ac4cbc420622f43b', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: 'bac5195ac2880f7fa258f6ce8d7626a15c210085', class: `modal-content-container`, 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: '90e5a23f42dc008172db58a6367a061a643cd5c0', class: "modal-content" }, h("div", { key: '2d40f525434ffdb9a0147f3f2b6e574a9f36bfcd', class: "modal-header" }, h("h2", { key: '5cba0fa055e6f577b00db23c9ea5fbb5258b978e', class: "modal-caption" }, this.caption), this.showCloseButton &&
121
- h("ifx-icon-button", { class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { key: 'b424926417a92bf80a2118cccb3ecceb51661710', class: "modal-body" }, h("slot", { key: 'd658802533066be28f5f7ecfd98df0f52cce86a6', name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), h("div", { key: 'd2bbc9e119f08bdb63d107304f60d46607e26d23', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { key: '1ed1c4d49d506cc62c3722a9f2c25d032c5cd6d6', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { key: 'bf9623ceab205d2276764183a504bfe45c2e0662', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
121
+ return (h(Host, { key: '2e78d378ad671747dcac05d1afa4c1fc0dd86720' }, h("div", { key: '700ad9d01b15876b337bf6500e2b790a127fbd04', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { key: 'da1e990a7f517ee2260d40395c9911273c777f90', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '5eea0359e633e8e5409065fb8db4204ec3cb3ef9', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: '703d57b34fe923fdb707b58670a213545199795b', 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: 'd71eb504b5a6628baf8f1fa2b000331756258ca5', class: "modal-content" }, h("div", { key: '8a96c32c549828c784970fe06d7cccc1fc5d3611', class: "modal-header" }, h("h2", { key: '648b3d728c507167a2f3d94bcfadf67dd1f2d4fc', class: "modal-caption" }, this.caption), this.showCloseButton &&
122
+ h("ifx-icon-button", { class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { key: 'ffbf1da62fd93b96828c425b07f9e206dfe9860a', class: "modal-body" }, h("slot", { key: '546ef4c17f185c0b69732c54618d053bea568154', name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), h("div", { key: '65e137734d83298b58aa6547694d0dc10bc18503', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { key: 'b7c4336049d465092fb399ca09df7f72908bb280', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { key: 'beed561ce9f2118c18ba4324eb795bc8eed0d93c', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
122
123
  }
123
124
  static get is() { return "ifx-modal"; }
124
125
  static get encapsulation() { return "shadow"; }
@@ -206,6 +207,24 @@ export class IfxModal {
206
207
  "reflect": false,
207
208
  "defaultValue": "'default'"
208
209
  },
210
+ "size": {
211
+ "type": "string",
212
+ "mutable": false,
213
+ "complexType": {
214
+ "original": "'s' | 'm' | 'l'",
215
+ "resolved": "\"l\" | \"m\" | \"s\"",
216
+ "references": {}
217
+ },
218
+ "required": false,
219
+ "optional": false,
220
+ "docs": {
221
+ "tags": [],
222
+ "text": ""
223
+ },
224
+ "attribute": "size",
225
+ "reflect": false,
226
+ "defaultValue": "'s'"
227
+ },
209
228
  "alertIcon": {
210
229
  "type": "string",
211
230
  "mutable": false,
package/dist/collection/components/modal/modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["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\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() 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 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 this.attemptFocus(this.getFirstFocusableElement());\n this.ifxModalOpen.emit();\n });\n // this.attemptFocus(this.getFirstFocusableElement());\n // this.ifxModalOpen.emit();\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`}\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}"]}
1
+ {"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["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\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 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 this.attemptFocus(this.getFirstFocusableElement());\n this.ifxModalOpen.emit();\n });\n // this.attemptFocus(this.getFirstFocusableElement());\n // this.ifxModalOpen.emit();\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}"]}
package/dist/collection/components/modal/modal.stories.js CHANGED
@@ -37,6 +37,11 @@ export default {
37
37
  control: { type: 'select' },
38
38
  description: 'When specified together with alertIcon then an border to the right is shown',
39
39
  },
40
+ size: {
41
+ options: ['s', 'm', 'l'],
42
+ control: { type: 'radio' },
43
+ description: 'Usable only when screen width is more than 1024px'
44
+ },
40
45
  variant: {
41
46
  options: ['default', 'alert-brand', 'alert-danger'],
42
47
  control: { type: 'radio' },
@@ -63,7 +68,7 @@ export default {
63
68
  },
64
69
  },
65
70
  };
66
- const Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, alertIcon }) => {
71
+ const Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, size, alertIcon }) => {
67
72
  const modal = document.createElement('ifx-modal');
68
73
  modal.setAttribute('caption', caption);
69
74
  modal.setAttribute('variant', variant);
@@ -72,6 +77,7 @@ const Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, aler
72
77
  }
73
78
  modal.setAttribute('close-on-overlay-click', closeOnOverlayClick);
74
79
  modal.setAttribute('show-close-button', showCloseButton);
80
+ modal.setAttribute('size', size);
75
81
  modal.addEventListener('ifxModalOpen', action('ifxModalOpen'));
76
82
  modal.addEventListener('ifxModalClose', action('ifxModalClose'));
77
83
  const content = document.createElement('div');
@@ -117,6 +123,7 @@ Default.args = {
117
123
  caption: 'Modal Title',
118
124
  showCloseButton: true,
119
125
  closeOnOverlayClick: false,
126
+ size: 's',
120
127
  variant: 'default',
121
128
  };
122
129
  export const Alert = Template.bind({});
@@ -124,6 +131,7 @@ Alert.args = {
124
131
  caption: 'Alert-Brand Modal Title',
125
132
  closeOnOverlayClick: true,
126
133
  alertIcon: 'arrowdoen24',
134
+ size: 's',
127
135
  variant: 'alert-brand',
128
136
  };
129
137
  //# sourceMappingURL=modal.stories.js.map