@infineon/infineon-design-system-stencil 37.6.1--canary.1972.c978f8ac91ef429bb1f8bacc092c1bd327faa594.0 → 37.6.1--canary.1966.24e8efd5e58438d060c76865d601e2b4499cabc4.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 (26) hide show
  1. package/dist/cjs/ifx-modal.cjs.entry.js +4 -4
  2. package/dist/cjs/ifx-modal.cjs.entry.js.map +1 -1
  3. package/dist/cjs/ifx-table.cjs.entry.js +2 -7
  4. package/dist/cjs/ifx-table.cjs.entry.js.map +1 -1
  5. package/dist/collection/components/modal/modal.js +4 -4
  6. package/dist/collection/components/modal/modal.js.map +1 -1
  7. package/dist/collection/components/table-advanced-version/table.js +2 -7
  8. package/dist/collection/components/table-advanced-version/table.js.map +1 -1
  9. package/dist/components/ifx-modal.js +4 -4
  10. package/dist/components/ifx-modal.js.map +1 -1
  11. package/dist/components/ifx-table.js +2 -7
  12. package/dist/components/ifx-table.js.map +1 -1
  13. package/dist/esm/ifx-modal.entry.js +4 -4
  14. package/dist/esm/ifx-modal.entry.js.map +1 -1
  15. package/dist/esm/ifx-table.entry.js +2 -7
  16. package/dist/esm/ifx-table.entry.js.map +1 -1
  17. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  18. package/dist/infineon-design-system-stencil/{p-d8755b62.entry.js → p-5afef060.entry.js} +2 -2
  19. package/dist/infineon-design-system-stencil/p-5afef060.entry.js.map +1 -0
  20. package/dist/infineon-design-system-stencil/p-c99f2f00.entry.js +2 -0
  21. package/dist/infineon-design-system-stencil/{p-3b22661a.entry.js.map → p-c99f2f00.entry.js.map} +1 -1
  22. package/dist/types/components/modal/modal.d.ts +1 -1
  23. package/dist/types/components/table-advanced-version/table.d.ts +0 -1
  24. package/package.json +1 -1
  25. package/dist/infineon-design-system-stencil/p-3b22661a.entry.js +0 -2
  26. package/dist/infineon-design-system-stencil/p-d8755b62.entry.js.map +0 -1
package/dist/cjs/ifx-modal.cjs.entry.js CHANGED
@@ -199,9 +199,9 @@ const IfxModal = class {
199
199
  this.handleComponentOverflow();
200
200
  }
201
201
  }
202
- handleComponentOverflow() {
202
+ async handleComponentOverflow() {
203
203
  const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');
204
- if (this.showModal && this.isModalContentContainerHeightReachedViewport()) {
204
+ if (this.showModal && await this.isModalContentContainerHeightReachedViewport()) {
205
205
  modalContentContainer.classList.add('no-overflow');
206
206
  }
207
207
  else if (modalContentContainer === null || modalContentContainer === void 0 ? void 0 : modalContentContainer.classList.contains('no-overflow')) {
@@ -329,8 +329,8 @@ const IfxModal = class {
329
329
  }
330
330
  render() {
331
331
  const isAlertVariant = this.variant !== 'default';
332
- return (index.h(index.Host, { key: '0d573f93f0188f8255994ebd1f4355d0007d081e' }, index.h("div", { key: '2909db24603f28a307a3d2f88b9df3f1cc496ef3', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, index.h("div", { key: 'bc8994163ac10cc94fbf553bee4590e75cd94c9f', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), index.h("div", { key: '4c978da70c5de23b0f05396a29a8a7d77a998fac', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), index.h("div", { key: '45d00c0226bfaf81f076e9fe99c967b10a24f6e5', 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: '3db82f776b5ea0551a28b941a14812ddddf99a60', class: "modal-content" }, index.h("div", { key: 'f471b0e9429d3ee696a5921b201fe582ca5d94b5', class: "modal-header" }, index.h("h2", { key: '5ea3807496762c5c99f5c8ee86f3d13b5a96b3b2', class: "modal-caption" }, this.caption), this.showCloseButton &&
333
- index.h("ifx-icon-button", { key: 'f725cab8121fa8caf5f3d61925d521a8935864d6', class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-16", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), index.h("div", { key: '7c05913f69feb6ea5e7cc6957f1e051bd0dc1278', class: "modal-body" }, index.h("slot", { key: '674d48b6361b1eece2bb4efd337d8ff1543e3c12', name: "content", onSlotchange: (e) => this.handleContentUpdate(e) })), index.h("div", { key: '13680bcdc4115d945653aa606fda3f6d80cfa94f', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, index.h("slot", { key: 'de1f6c2c4ad5f3d36b68d825ba914784b271a6c6', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), index.h("div", { key: '373cf96a9d6a8783440bbff74fcd60d02f8884cc', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
332
+ return (index.h(index.Host, { key: '7c84f8ffdfff21cbada9e88a8565d8432d7b280d' }, index.h("div", { key: '32d1cbf8ff758a474ed1366e0d8d30159d77c9e7', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, index.h("div", { key: '036a4ab1cfa90cb759a8613d21cd3d1dcf3ee74d', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), index.h("div", { key: '529ecb2daaab9133632c1937589f790e31610522', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), index.h("div", { key: 'af950b569f582d07465797f39d7d79834ce3512b', 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: '6ddefbc12feb0f1c6269092dc948adc84617e8fb', class: "modal-content" }, index.h("div", { key: 'c82231719e7e0b8180b71b97c89fc2846b5ff79d', class: "modal-header" }, index.h("h2", { key: '70ad4e29a330632fa3176066578e826a6f4e96db', class: "modal-caption" }, this.caption), this.showCloseButton &&
333
+ index.h("ifx-icon-button", { key: '2e9f091e469964c2e475caee8eb112a3e4fa0eae', class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-16", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), index.h("div", { key: '517696fdc9de127624b6ed276e2deedd1c7ea6f8', class: "modal-body" }, index.h("slot", { key: 'f280964c1902a46fb81bb3e92195d20b31b2af1f', name: "content", onSlotchange: (e) => this.handleContentUpdate(e) })), index.h("div", { key: '60f5005ec5bfe6ef0d05bf0135377c7c7715e649', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, index.h("slot", { key: '4f334f79931102713261ba746c881595bda9306c', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), index.h("div", { key: '1527d25c162c439022a58255b95f627555ebe6d7', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
334
334
  }
335
335
  get hostElement() { return index.getElement(this); }
336
336
  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":["isNestedInIfxComponent","detectFramework","trackComponent","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 justify-content: center;\n align-items: center;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1060;\n overflow-y: auto;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.modal-container.open {\n display: flex;\n}\n\n.modal-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: tokens.$ifxColorBaseBlack;\n opacity: 0.5;\n z-index: 0;\n}\n\n.modal-content-container {\n position: absolute;\n display: flex;\n justify-content: center;\n width: 90%;\n min-height: 218px;\n background-color: #fff;\n border-radius: tokens.$ifxBorderRadiusNone;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n \n //overflow: hidden;\n\n box-sizing: border-box;\n align-items: stretch;\n}\n\n.modal-content-container {\n &.no-overflow { \n overflow: hidden;\n & .modal-body { \n overflow-y: auto;\n }\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 \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 { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\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() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n\n @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n \n @Prop() size: 's' | 'm' | 'l' = 's';\n\n @Prop() alertIcon: string = '';\n @Prop() okButtonLabel: string = 'OK';\n @Prop() cancelButtonLabel: string = 'Cancel';\n @Element() hostElement: HTMLElement;\n\n @State() slotButtonsPresent: boolean = false;\n\n @Prop() showCloseButton: boolean = true;\n\n private modalContainer: HTMLElement;\n private focusableElements: HTMLElement[] = [];\n private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.hostElement)) { \n const framework = detectFramework();\n trackComponent('ifx-modal', await framework)\n }\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 componentWillRender() { \n if(this.showModal) { \n this.handleComponentOverflow();\n }\n }\n\n handleComponentOverflow() { \n const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');\n if (this.showModal && this.isModalContentContainerHeightReachedViewport()) {\n modalContentContainer.classList.add('no-overflow')\n } else if(modalContentContainer?.classList.contains('no-overflow')) { \n modalContentContainer?.classList.remove('no-overflow')\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 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 open() {\n this.showModal = true;\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n // Setting focus on last item and removing immediately\n // so, on tab press first element is focused\n setTimeout(() => {\n this.getLastFocusableElement()?.focus();\n this.getLastFocusableElement()?.blur();\n }, 0);\n\n this.ifxOpen.emit();\n });\n\n this.hostElement.addEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.ifxOpen.emit();\n }\n }\n\n close() {\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n this.showModal = false;\n this.ifxClose.emit();\n });\n this.hostElement.removeEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.showModal = false;\n this.ifxClose.emit();\n }\n }\n\n handleKeypress = (event: KeyboardEvent) => {\n if (!this.showModal) {\n return;\n }\n if (event.key === 'Escape') {\n this.doBeforeClose('ESCAPE_KEY');\n }\n };\n\n 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 @Watch('opened')\n openedChanged(newValue) {\n if (newValue === true) {\n this.open();\n } else {\n this.close()\n }\n }\n\n handleOverlayClick() {\n if (this.closeOnOverlayClick) {\n this.doBeforeClose('BACKDROP')\n }\n }\n\n handleContentUpdate(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n if(nodes.length > 0) {\n nodes.forEach(node => {\n if (node.observer) {\n node.observer.disconnect();\n delete node.observer;\n }\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if(this.showModal) { \n this.handleComponentOverflow();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n node.observer = observer;\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 isModalContentContainerHeightReachedViewport() {\n //Adding timeout for proper height detection on Edge browser\n return new Promise(resolve => {\n setTimeout(() => {\n const modalContent = this.hostElement.shadowRoot.querySelector('.modal-content') as HTMLElement;\n const modalContentHeight = modalContent.offsetHeight;\n const viewportHeight = window.innerHeight;\n resolve(modalContentHeight >= viewportHeight * 0.9);\n }, 100);\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-16\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n </ifx-icon-button>\n }\n </div>\n <div class=\"modal-body\">\n <slot name=\"content\" onSlotchange={(e) => this.handleContentUpdate(e)} />\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":["isNestedInIfxComponent","detectFramework","trackComponent","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 justify-content: center;\n align-items: center;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1060;\n overflow-y: auto;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.modal-container.open {\n display: flex;\n}\n\n.modal-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: tokens.$ifxColorBaseBlack;\n opacity: 0.5;\n z-index: 0;\n}\n\n.modal-content-container {\n position: absolute;\n display: flex;\n justify-content: center;\n width: 90%;\n min-height: 218px;\n background-color: #fff;\n border-radius: tokens.$ifxBorderRadiusNone;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n \n //overflow: hidden;\n\n box-sizing: border-box;\n align-items: stretch;\n}\n\n.modal-content-container {\n &.no-overflow { \n overflow: hidden;\n & .modal-body { \n overflow-y: auto;\n }\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 \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 { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\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() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n\n @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n \n @Prop() size: 's' | 'm' | 'l' = 's';\n\n @Prop() alertIcon: string = '';\n @Prop() okButtonLabel: string = 'OK';\n @Prop() cancelButtonLabel: string = 'Cancel';\n @Element() hostElement: HTMLElement;\n\n @State() slotButtonsPresent: boolean = false;\n\n @Prop() showCloseButton: boolean = true;\n\n private modalContainer: HTMLElement;\n private focusableElements: HTMLElement[] = [];\n private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.hostElement)) { \n const framework = detectFramework();\n trackComponent('ifx-modal', await framework)\n }\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 componentWillRender() { \n if(this.showModal) { \n this.handleComponentOverflow();\n }\n }\n\n async handleComponentOverflow() { \n const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');\n if (this.showModal && await this.isModalContentContainerHeightReachedViewport()) {\n modalContentContainer.classList.add('no-overflow')\n } else if(modalContentContainer?.classList.contains('no-overflow')) { \n modalContentContainer?.classList.remove('no-overflow')\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 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 open() {\n this.showModal = true;\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n // Setting focus on last item and removing immediately\n // so, on tab press first element is focused\n setTimeout(() => {\n this.getLastFocusableElement()?.focus();\n this.getLastFocusableElement()?.blur();\n }, 0);\n\n this.ifxOpen.emit();\n });\n\n this.hostElement.addEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.ifxOpen.emit();\n }\n }\n\n close() {\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n this.showModal = false;\n this.ifxClose.emit();\n });\n this.hostElement.removeEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.showModal = false;\n this.ifxClose.emit();\n }\n }\n\n handleKeypress = (event: KeyboardEvent) => {\n if (!this.showModal) {\n return;\n }\n if (event.key === 'Escape') {\n this.doBeforeClose('ESCAPE_KEY');\n }\n };\n\n 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 @Watch('opened')\n openedChanged(newValue) {\n if (newValue === true) {\n this.open();\n } else {\n this.close()\n }\n }\n\n handleOverlayClick() {\n if (this.closeOnOverlayClick) {\n this.doBeforeClose('BACKDROP')\n }\n }\n\n handleContentUpdate(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n if(nodes.length > 0) {\n nodes.forEach(node => {\n if (node.observer) {\n node.observer.disconnect();\n delete node.observer;\n }\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if(this.showModal) { \n this.handleComponentOverflow();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n node.observer = observer;\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 isModalContentContainerHeightReachedViewport() {\n //Adding timeout for proper height detection on Edge browser\n return new Promise(resolve => {\n setTimeout(() => {\n const modalContent = this.hostElement.shadowRoot.querySelector('.modal-content') as HTMLElement;\n const modalContentHeight = modalContent.offsetHeight;\n const viewportHeight = window.innerHeight;\n resolve(modalContentHeight >= viewportHeight * 0.9);\n }, 100);\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-16\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n </ifx-icon-button>\n }\n </div>\n <div class=\"modal-body\">\n <slot name=\"content\" onSlotchange={(e) => this.handleContentUpdate(e)} />\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/ifx-table.cjs.entry.js CHANGED
@@ -128,11 +128,6 @@ const Table = class {
128
128
  this.variant = 'default';
129
129
  this.showLoading = false;
130
130
  this.originalRowData = [];
131
- this.itemsPerPage = JSON.stringify([
132
- { value: 10, label: '10', selected: true },
133
- { value: 20, label: '20', selected: false },
134
- { value: 30, label: '30', selected: false }
135
- ]);
136
131
  }
137
132
  handleChipChange(event) {
138
133
  const { name, currentSelection, previousSelection } = event.detail;
@@ -470,12 +465,12 @@ const Table = class {
470
465
  };
471
466
  }
472
467
  const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';
473
- return (index.h(index.Host, { key: 'ab4330b9425fdb169007392236918d8b350fc17d' }, index.h("div", { key: 'e24a70d949fac201bdfa4aa18a524ac9bcf7d197', class: "table-container" }, this.filterOrientation === 'sidebar' && (index.h("div", { key: '986ffe8eba8003a159835b27b71eab34969e0fc7', class: "sidebar-btn" }, index.h("ifx-button", { key: '6a171543107c204f70c3c88b86510aadbd8b0277', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, index.h("ifx-icon", { key: '311fb3701889e2ac535266e935d430c19a1a3b23', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), index.h("div", { key: '4e22f2d2d520cfbb857362433bae12f5221c2d6e', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (index.h("div", { key: '229bf84bbccd90ff502908b8c0f11e2c13b5a2eb', class: "sidebar-container" }, index.h("div", { key: '58672767e689b3a4b905ddbfbe4c7af56e3d3ad4', class: "filters-title-container" }, index.h("span", { key: '5a77ad2d85f51d880d9f541f04b83d001b17dd7a', class: "filters-title" }, "Filters")), index.h("div", { key: 'bf77cc0cfb917c67dc610190b2b0cea7c8a9de59', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (index.h("slot", { key: '76b196f4638bccea8958c66de09983ef14dce2a5', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (index.h("div", { key: '936e7af7043d32e3aa3fdeb8018ade677d28903b', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (index.h("slot", { key: '43c0f00b9634ef4449e301fbf0d4c6f3f075381f', name: "topbar-filter" })))), index.h("div", { key: '44aa129865488ae679716a9dcfce37ed51b3f11f', class: "table-pagination-wrapper" }, index.h("div", { key: 'e9ea60059fac694381efad7a7bc29dc3fd12df1c', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
468
+ return (index.h(index.Host, { key: '6f2bbbf0f6f54b121923a987032ac954a109d836' }, index.h("div", { key: '3bffc08c1f4a2e8088e37615323a58e4fa2b32a6', class: "table-container" }, this.filterOrientation === 'sidebar' && (index.h("div", { key: 'bdbc7badd8eeb7f29c5914badf7804153b792855', class: "sidebar-btn" }, index.h("ifx-button", { key: '31b78635d92061fdbc71ac433e293ead16c926c6', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, index.h("ifx-icon", { key: '61963cb69d3ced50a1451d6fa1342c80b885e634', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), index.h("div", { key: 'c20c2395ecd3bd147d27971341b4f6c7f95faf5c', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (index.h("div", { key: '90e0cf0773c9c482e348c9e0ad3859aec327f06d', class: "sidebar-container" }, index.h("div", { key: 'aa990307d66c22681d40165825bfc6f5a0320903', class: "filters-title-container" }, index.h("span", { key: '84584bfd511e62c13418d4ac985d46aed9b4bb51', class: "filters-title" }, "Filters")), index.h("div", { key: 'af9f92cb7ec2bd4b85dcc0d0b2829f1632420bc7', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (index.h("slot", { key: '52e2be083146f57f786bcd563beffabddd6a83e5', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (index.h("div", { key: 'a7979d6fd338ea344027c30109a7a011dc56406d', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (index.h("slot", { key: '2485a88a51175c2799ab904784d77ffc940b91b5', name: "topbar-filter" })))), index.h("div", { key: '31d196ac4eaeec4b255a351f62de157325129b6a', class: "table-pagination-wrapper" }, index.h("div", { key: '0744dd597b97e2aac23b3e8526dae4a39ac8c9f2', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
474
469
  const filter = this.currentFilters[name];
475
470
  const filterValues = filter.filterValues;
476
471
  const isMultiSelect = filter.type !== 'text';
477
472
  return filterValues.length > 0 ? (index.h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? "multi" : "single", readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (index.h("ifx-chip-item", { value: filterValue, selected: true, key: filterValue }, filterValue))))) : null;
478
- })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (index.h("ifx-button", { key: 'f24fa444fd4120d2a96c53ba9c16ac6d0ccc1c08', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, index.h("ifx-icon", { key: 'f4e10a36aac03fe66df8f3fc989b6820ceca03d7', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (index.h("div", { key: 'd49cd5dc37c9cc4de3b5d196150c095521035fcb', class: "matching-results-container" }, index.h("span", { key: '02dca2f15819680478f3533eaec522ebb77679c1', class: "matching-results-count" }, this.matchingResultsCount), index.h("span", { key: '6841b1790a4e3ea0bf33513a3baefaec85740e56', class: "matching-results-text" }, "matching results"))), index.h("div", { key: '4979f6f00189dcdddcb1f978e822ce9297894375', id: "table-wrapper", class: this.getTableClassNames() }, index.h("div", { key: '54e2dd3b25e78513aa4d4809d8c5221d7bb0e6a8', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? index.h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }) : null)))));
473
+ })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (index.h("ifx-button", { key: '81f1978647c926fb56ce373e5404c710367e1be9', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, index.h("ifx-icon", { key: '574f01906007d6aa46067ec5d48dd372e0fbaab7', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (index.h("div", { key: '6f44b6711af0603388b89023013636c0dfbfabbf', class: "matching-results-container" }, index.h("span", { key: 'ae2104db83897ce4c372e8b5c545e1020614de88', class: "matching-results-count" }, this.matchingResultsCount), index.h("span", { key: '7d1718e0694c78e183f291587347e6a895b3b9e8', class: "matching-results-text" }, "matching results"))), index.h("div", { key: '5323155a4b544e73035e97c3666946a8ca376be5', id: "table-wrapper", class: this.getTableClassNames() }, index.h("div", { key: '38ca8150996e3fe8e3c9a1766eef189dded2acf1', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? index.h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }) : null)))));
479
474
  }
480
475
  hasButtonCol() {
481
476
  return this.getColData().some(column => column.field === 'button');
package/dist/cjs/ifx-table.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"ifx-table.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","createGrid","classNames","h","Host"],"sources":["src/components/table-advanced-version/buttonCellRenderer.ts","src/components/table-advanced-version/customNoRowsOverlay.ts","src/components/table-advanced-version/customLoadingOverlay.ts","src/components/table-advanced-version/table.scss?tag=ifx-table&encapsulation=shadow","src/components/table-advanced-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\nimport { ButtonInterface } from './interfaces';\n\nexport class ButtonCellRenderer implements ICellRendererComp {\n eGui!: HTMLDivElement;\n eButton!: HTMLElement; // Change to a generic HTMLElement to accommodate custom elements\n eventListener!: (event: Event) => void;\n\n init(params: ICellRendererParams) {\n this.createButton(params);\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(params: ICellRendererParams) {\n this.updateButton(params);\n return true;\n }\n\n private createButton(params: ICellRendererParams) {\n const config = params.data.button;\n const options = params.colDef.cellRendererParams || {};\n \n this.eGui = document.createElement('div');\n this.eButton = document.createElement('ifx-button') as HTMLElement;\n \n if (this.hasRequiredKeys(config)) {\n this.setButtonAttributes(config);\n this.eGui.appendChild(this.eButton);\n this.attachEventListener(options, params);\n } else {\n this.eGui.innerHTML = `<span>${config}</span>`;\n }\n }\n\n private updateButton(params: ICellRendererParams) {\n const config = params.data.button;\n const options = params.colDef.cellRendererParams || {};\n \n if (this.hasRequiredKeys(config)) {\n this.setButtonAttributes(config);\n this.detachEventListener();\n this.attachEventListener(options, params);\n } else {\n this.eGui.innerHTML = `<span>${config}</span>`;\n }\n }\n\n private setButtonAttributes(config: ButtonInterface) {\n this.eButton.setAttribute('disabled', config.disabled.toString());\n this.eButton.setAttribute('variant', config.variant);\n this.eButton.setAttribute('theme', config.theme);\n this.eButton.setAttribute('type', config.type);\n this.eButton.setAttribute('size', config.size);\n this.eButton.setAttribute('full-width', config.fullWidth.toString());\n this.eButton.setAttribute('target', config.target);\n this.eButton.setAttribute('href', config.href);\n this.eButton.textContent = config.text;\n }\n\n private attachEventListener(options: any, params: ICellRendererParams) {\n this.eventListener = (event: Event) => {\n if (options.onButtonClick) {\n options.onButtonClick(params, event);\n }\n };\n this.eButton.addEventListener('click', this.eventListener);\n }\n\n private detachEventListener() {\n if (this.eventListener) {\n this.eButton.removeEventListener('click', this.eventListener);\n }\n }\n\n private hasRequiredKeys(config: ButtonInterface): boolean {\n return config && config.text !== '' && config.variant !== '' && config.size !== '' && config.type !== '';\n }\n}\n","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomNoRowsOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `\n <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\n ${params.noRowsMessageFunc()}\n </div>\n `;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomLoadingOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(_params: ICellRendererParams & { loadingMessage: string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\n<ifx-spinner></ifx-spinner>\n </div>`;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n@import \"~ag-grid-community/styles/ag-grid.css\";\n\n.zebra { \n & .ag-row-odd { \n background-color: tokens.$ifxColorEngineering100!important;\n }\n\n & .ag-row { \n border-bottom: none!important;\n }\n}\n\n.ag-header-viewport { \n background-color: tokens.$ifxColorEngineering200!important;\n}\n\n\n.table-container {\n display: block;\n}\n\n.sidebar-btn {\n margin-bottom: 24px;\n}\n\n.sidebar-container {\n margin-right: 24px;\n}\n\n.sidebar-layout {\n display: flex;\n flex-direction: row;\n}\n\n.topbar-layout {\n display: flex;\n flex-direction: column;\n}\n\n.table-pagination-wrapper {\n display: flex;\n flex-direction: column;\n align-items: stretch; // stretches items to fill the container horizontally\n width: 100%; // ensures the wrapper takes up the full width of its parent\n}\n\n#table-wrapper {\n flex: 1; // allows the table to take up the remaining space\n padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.table-wrapper .ag-root-wrapper-body {\n height: auto !important;\n min-height: 100px !important;\n min-width: 100px;\n}\n\n.filter-chips { \n display:flex;\n gap:tokens.$ifxSpace100;\n margin-bottom: 12px;\n}\n\n.filter-chips > ifx-button { // ifx-button with icon and text has a paddingof 16 px. This is to remove the padding to align with the filter-chips container definition\n margin-left: -8px;\n}\n\n.set-filter-wrapper-sidebar {\n display: flex;\n flex-direction: column;\n margin-bottom: tokens.$ifxSpace100;\n}\n\n.set-filter-wrapper-topbar {\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n margin-bottom: tokens.$ifxSpace100;\n background: tokens.$ifxColorEngineering100;\n padding-top: 32px;\n padding-bottom: 32px;\n gap: 24px;\n }\n\n\n.ifx-ag-grid {\n display: grid;\n height: 100%;\n width: 100%;\n min-width: 100px;\n //padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n outline: none !important;\n}\n\n.ifx-ag-grid *:not(.ag-header-cell):focus {\n outline: none;\n}\n\n\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n content: '';\n position: absolute;\n right: 0;\n top: calc(50% - 12px);\n height: 24px; \n width: 1px;\n background-color: tokens.$ifxColorEngineering300; \n}\n\n\n.ag-overlay-loading-center {\n border: none;\n background: none;\n border-radius: none;\n box-shadow: none;\n}\n\n\n.ag-root-wrapper {\n border: 1px solid tokens.$ifxColorEngineering200;\n}\n\n\n\n.ag-header {\n background-color: tokens.$ifxColorEngineering100;\n border-bottom: none;\n\n &.ag-header-active {\n outline: none !important;\n border-color: #0A8276 !important;\n }\n}\n\n.ag-header-cell {\n padding-left: 16px;\n padding-right: 16px;\n gap: 4px;\n}\n\n\n.ag-header-cell-focus {\n border: none !important;\n outline: none !important;\n}\n\n.ag-header-cell-text {\n font-size: 13px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.ag-row-focus {\n background-color: inherit !important;\n /* Reset the hover color to the row's original color */\n}\n\n.ag-row-hover {\n background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\n /* Reset the hover color to the row's original color */\n}\n\n\n.ag-cell-focus {\n border: none !important;\n outline: none !important;\n background-color: inherit !important;\n}\n\n\n\n.ag-row {\n background-color: tokens.$ifxColorBaseWhite;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n z-index: 1; //ensure the stacking order when used inside js frameworks\n}\n\n.ag-row-odd {\n background-color: tokens.$ifxColorBaseWhite;\n}\n\n.ag-cell {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n padding-left: 0px;\n vertical-align: bottom;\n line-height: 12px;\n}\n\n.ag-sort-indicator-container .ag-sort-order { \n display: none;\n}\n\n.unsort-icon-custom-color {\n color: tokens.$ifxColorEngineering400;\n}\n\n\n// Table with set filters in sidebar orientation\n\n\n.filters-title {\n font-size: 24px;\n font-weight: 600;\n}\n\n\n.matching-results-container {\n display: flex;\n gap: 4px;\n font-size: 14px;\n}\n\n.matching-results-count {\n font-weight: 600;\n}\n\n.matching-results-text {\n font-weight: 400;\n}","import { Component, h, Host, Method, Element, Prop, State, Listen, Watch } from '@stencil/core';\nimport classNames from 'classnames';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { ButtonCellRenderer } from './buttonCellRenderer';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\n\n\n@Component({\n tag: 'ifx-table',\n styleUrl: 'table.scss',\n shadow: true\n})\nexport class Table {\n gridOptions: GridOptions;\n gridApi: GridApi;\n @State() currentPage: number = 1;\n @Prop() cols: any;\n @Prop() rows: any;\n @Prop() buttonRendererOptions?: { onButtonClick?: (params: any, event: Event) => void;}; \n @State() rowData: any[] = [];\n @State() colData: any[] = [];\n @State() filterOptions: { [key: string]: string[] } = {};\n @State() currentFilters = {};\n @State() uniqueKey: string;\n allRowData: any[] = [];\n @Prop() rowHeight: string = 'default';\n @Prop() tableHeight: string = 'auto';\n @Prop() pagination: boolean = true;\n @Prop() paginationPageSize: number = 10;\n @Prop() filterOrientation: string = 'sidebar'; // topbar / none\n @State() showSidebarFilters: boolean = true;\n @State() matchingResultsCount: number = 0;\n @Prop() variant: string = 'default'\n\n @Prop() showLoading: boolean = false;\n private container: HTMLDivElement;\n @Element() host: HTMLElement;\n originalRowData: any[] = [];\n\n private itemsPerPage = JSON.stringify([\n { value: 10, label: '10', selected: true },\n { value: 20, label: '20', selected: false },\n { value: 30, label: '30', selected: false }\n ]); \n\n @Listen('ifxChange')\n handleChipChange(event: CustomEvent<{ previousSelection: Array<any>, currentSelection: Array<any>, name: string }>) {\n const { name, currentSelection, previousSelection } = event.detail;\n if(currentSelection && previousSelection) { \n // Clone the current filters state\n const updatedFilters = { ...this.currentFilters };\n \n if (currentSelection.length === 0) {\n // If there are no selections for this filter, delete the filter\n delete updatedFilters[name];\n \n // Emit event with specific filter name\n const customEvent = new CustomEvent('ifxUpdateSidebarFilter', { detail: { filterName: name }, bubbles: true, composed: true });\n this.host.dispatchEvent(customEvent);\n } else {\n // Otherwise, update the filter values with the current selection\n updatedFilters[name].filterValues = currentSelection.map(selection => selection.value);\n }\n \n // Update the component's filters\n this.currentFilters = updatedFilters;\n \n // Ensure table data is updated\n this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\n this.updateTableView();\n }\n }\n\n @Watch('buttonRendererOptions')\n onButtonRendererOptionsChanged() {\n this.colData = this.getColData(); // Re-fetch column data to apply new renderer options\n if (this.gridApi) {\n this.gridApi.setColumnDefs(this.colData); // Update column definitions in the grid API\n }\n }\n\n toggleSidebarFilters() {\n this.showSidebarFilters = !this.showSidebarFilters;\n }\n\n updateFilterOptions() {\n const options = {};\n for (let col of this.colData) {\n options[col.field] = [...new Set(this.rowData.map(row => row[col.field]))];\n }\n this.filterOptions = options;\n }\n\n handleSidebarFilterChange(event: CustomEvent) {\n const filterGroups = event.detail;\n const updatedFilters = {};\n\n filterGroups.forEach(filterGroup => {\n const filterName = filterGroup.filterGroupName;\n let filterValues;\n let type;\n\n if (filterGroup.selectedItems && filterGroup.selectedItems.length > 0) {\n filterValues = filterGroup.selectedItems.map(item => item.label);\n type = 'multi-select';\n } else if (filterGroup.value) {\n filterValues = [filterGroup.value];\n type = 'text';\n } else {\n filterValues = [];\n }\n\n if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\n updatedFilters[filterName] = { filterValues, type };\n }\n });\n\n this.allRowData = this.applyAllFilters(this.originalRowData, updatedFilters);\n this.updateTableView();\n this.currentFilters = updatedFilters;\n }\n\n\n handleTopbarFilterChange(event: CustomEvent) {\n const filters = event.detail;\n\n // Start by resetting the filter conditions to a blank object\n this.currentFilters = {};\n\n // Loop through each filter group provided in the event detail\n filters.forEach(filter => {\n const filterName = filter.filterName;\n let filterValues;\n\n let type = filter.type;\n\n if (type === 'text') {\n // Search/Text filter\n filterValues = filter.filterValues\n } else {\n // Multi-select/Single-Select\n filterValues = filter.filterValues.map(item => item.label);\n }\n\n // If there are no filter values, or the filter is a text filter with an empty value, remove the filter\n if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\n // Add or update the filter in the currentFilters object\n this.currentFilters[filterName] = { filterValues, type };\n }\n });\n\n\n // Now that the currentFilters object has been updated, apply all filters to the data\n this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\n\n // After filtering, update the table view with the new filtered data\n this.updateTableView();\n }\n\n\n applyAllFilters(data, filters) {\n return data.filter(row => {\n for (const filterName in filters) {\n const filterInfo = filters[filterName];\n let selectedValues = (filterInfo.filterValues || []).map(value => {\n if (typeof value === 'string') {\n return value.toLowerCase();\n } else if (typeof value === 'number' || typeof value === 'boolean') {\n return value.toString();\n }\n return '';\n });\n\n // For text filters, check if row values start with any of the selectedValues\n if (filterInfo.type === 'text') {\n let textFilterMatched = false;\n for (let property in row) {\n if (row.hasOwnProperty(property)) {\n let rowValue = row[property] != null ? String(row[property]).toLowerCase() : '';\n if (selectedValues.some(filterValue => rowValue.startsWith(filterValue))) {\n textFilterMatched = true;\n break;\n }\n }\n }\n if (!textFilterMatched) return false;\n }\n // For multi-select filters, this remains unchanged\n else if (filterInfo.type === 'multi-select') {\n let rowValue = row[filterName] != null ? String(row[filterName]).toLowerCase() : '';\n // Check if 'undefined' is a selected value and include rows with empty values in that case\n let includesUndefined = selectedValues.includes('undefined');\n if (!selectedValues.includes(rowValue) && !(includesUndefined && rowValue === '')) {\n return false;\n }\n }\n }\n return true;\n });\n }\n\n\n\n updateTableView() {\n // Calculate the slice of data to display based on pagination\n const startIndex = (this.currentPage - 1) * this.paginationPageSize;\n const endIndex = startIndex + this.paginationPageSize;\n const visibleRowData = this.allRowData.slice(startIndex, endIndex);\n\n // Update the row data in the table\n this.rowData = visibleRowData;\n this.gridApi.setGridOption('rowData', this.rowData);\n\n // Update matching results count\n this.matchingResultsCount = this.allRowData.length;\n }\n\n\n clearAllFilters() {\n this.currentFilters = {};\n this.allRowData = [...this.originalRowData];\n }\n\n\n @Method()\n async onBtShowLoading() {\n this.gridApi.showLoadingOverlay();\n }\n\n componentWillLoad() {\n this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\n this.rowData = this.getRowData();\n this.colData = this.getColData();\n this.updateFilterOptions();\n\n this.gridOptions = {\n\n rowHeight: this.rowHeight === 'default' ? 40 : 32,\n headerHeight: 40,\n defaultColDef: {\n resizable: true,\n },\n suppressDragLeaveHidesColumns: true,\n enableCellTextSelection: true,\n onFirstDataRendered: this.onFirstDataRendered.bind(this),\n columnDefs: this.colData,\n rowData: this.rowData,\n loadingOverlayComponent: CustomLoadingOverlay,\n noRowsOverlayComponent: CustomNoRowsOverlay,\n noRowsOverlayComponentParams: {\n noRowsMessageFunc: () =>\n 'No rows found' //at: ' + new Date().toLocaleTimeString(),\n },\n icons: {\n sortAscending: '<ifx-icon icon=\"arrow-triangle-up-16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></ifx-icon></a>'\n },\n rowDragManaged: this.colData.some(col => col.dndSource === true) ? true : false,\n animateRows: this.colData.some(col => col.dndSource === true) ? true : false,\n };\n\n }\n\n componentDidRender() {\n if (this.gridApi) {\n this.gridApi.setGridOption('columnDefs', this.colData);\n }\n }\n\n async componentDidLoad() {\n if (this.container) {\n if(!isNestedInIfxComponent(this.host)) { \n const framework = detectFramework();\n trackComponent('ifx-table', await framework)\n }\n this.gridApi = createGrid(this.container, this.gridOptions);\n if (this.gridApi) {\n this.gridApi.sizeColumnsToFit({\n defaultMinWidth: 100,\n });\n this.gridApi.setGridOption('columnDefs', this.colData);\n this.gridApi.setGridOption('rowData', this.rowData);\n\n if (this.pagination) {\n const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n if (paginationElement) {\n paginationElement.addEventListener('ifxPageChange', this.handlePageChange.bind(this));\n }\n }\n const sidebarFilterElements = this.host.querySelectorAll('ifx-filter-type-group');\n // Add an event listener to each SetFilter component\n sidebarFilterElements.forEach(sidebarFilterElement => {\n sidebarFilterElement.addEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\n });\n const topbarFilterElements = this.host.querySelectorAll('ifx-filter-bar');\n // Add an event listener to each SetFilter component\n topbarFilterElements.forEach(topbarFilterElement => {\n topbarFilterElement.addEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\n });\n }\n }\n }\n\n componentWillUnmount() {\n if (this.pagination) {\n const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n if (paginationElement) {\n paginationElement.removeEventListener('ifxPageChange', this.handlePageChange.bind(this));\n }\n }\n const sidebarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\n // Remove the event listener from each SetFilter component\n sidebarFilters.forEach(sidebarFilter => {\n sidebarFilter.removeEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\n });\n const topbarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\n // Remove the event listener from each SetFilter component\n topbarFilters.forEach(topbarFilter => {\n topbarFilter.removeEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\n });\n }\n\n handlePageChange(event) {\n this.currentPage = event.detail.currentPage;\n const startIndex = (this.currentPage - 1) * this.paginationPageSize;\n const endIndex = startIndex + this.paginationPageSize;\n const visibleRowData = this.allRowData.slice(startIndex, endIndex);\n // Update the data in the grid\n if (this.gridApi) {\n this.gridApi.setGridOption('rowData', visibleRowData);\n }\n }\n\n isJSONParseable(str) {\n try {\n JSON.parse(str);\n return true;\n } catch (e) {\n return false;\n }\n }\n\n\n getRowData() {\n let rows: any[] = [];\n if (this.rows === undefined || this.rows === null) {\n return rows;\n }\n \n if (this.isJSONParseable(this.rows)) {\n rows = [...JSON.parse(this.rows)];\n }\n else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\n rows = [...this.rows];\n }\n else {\n console.error('Unexpected value for rows: ', this.rows);\n }\n\n this.allRowData = rows;\n this.originalRowData = [...rows]; // Deep copy the original data\n this.matchingResultsCount = this.allRowData.length;\n\n return rows.slice(0, this.paginationPageSize);\n }\n\n\n getColData() {\n let cols: any[] = [];\n if (this.cols === undefined || this.cols === null) {\n return cols;\n }\n \n if (this.isJSONParseable(this.cols)) {\n cols = [...JSON.parse(this.cols)];\n } else if (Array.isArray(this.cols) || typeof this.cols === 'object') {\n cols = [...this.cols];\n } else {\n console.error('Unexpected value for cols: ', this.cols);\n }\n \n const buttonColumn = cols.find(column => column.field === 'button');\n if (buttonColumn) {\n buttonColumn.cellRenderer = ButtonCellRenderer;\n buttonColumn.valueFormatter = params => params.value.text;\n \n // No JSON.parse needed now\n if (this.buttonRendererOptions && typeof this.buttonRendererOptions === 'object') {\n if (this.buttonRendererOptions.onButtonClick) {\n buttonColumn.cellRendererParams = {\n onButtonClick: this.buttonRendererOptions.onButtonClick\n };\n }\n }\n }\n \n return cols;\n }\n \n\n onFirstDataRendered(params: FirstDataRenderedEvent) {\n params.api.sizeColumnsToFit();\n }\n\n handleResetButtonClick() {\n const resetEvent = new CustomEvent('ifxResetFiltersEvent', { bubbles: true, composed: true });\n window.dispatchEvent(resetEvent); // Dispatch from the window object\n\n this.clearAllFilters();\n this.updateTableView(); // Update table view with the original data\n }\n\n\n disconnectedCallback() {\n if (this.pagination) {\n const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n if (paginationElement) {\n paginationElement.removeEventListener('ifxPageChange', this.handlePageChange);\n }\n }\n\n const resetButton = this.host.shadowRoot.querySelector('#reset-filters-button');\n if (resetButton) {\n resetButton.removeEventListener('click', this.handleResetButtonClick.bind(this));\n }\n }\n\n\n\n getTableClassNames() {\n return classNames(\n this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n 'table-wrapper',\n );\n }\n\n\n render() {\n let style = {};\n if (this.tableHeight !== 'auto') {\n style = {\n 'height': this.tableHeight\n };\n }\n const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';\n return (\n <Host>\n <div class=\"table-container\">\n {this.filterOrientation === 'sidebar' && (\n <div class=\"sidebar-btn\">\n <ifx-button\n type=\"button\"\n disabled={false}\n variant=\"secondary\"\n size=\"m\"\n target=\"_blank\"\n theme=\"default\"\n full-width=\"false\"\n onClick={() => this.toggleSidebarFilters()}\n >\n <ifx-icon icon=\"cross-16\"></ifx-icon>{this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'}\n </ifx-button>\n </div>\n )}\n\n <div class={filterClass}>\n {this.filterOrientation === 'sidebar' && this.showSidebarFilters && (\n <div class=\"sidebar-container\">\n <div class=\"filters-title-container\">\n <span class=\"filters-title\">Filters</span>\n </div>\n <div class=\"set-filter-wrapper-sidebar\">\n {(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (\n <slot name=\"sidebar-filter\"></slot>\n )}\n </div>\n </div>\n )}\n\n {this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (\n <div class=\"set-filter-wrapper-topbar\">\n {(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (\n <slot name=\"topbar-filter\"></slot>\n )}\n </div>\n )}\n\n <div class=\"table-pagination-wrapper\">\n <div class=\"filter-chips\">\n {this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (\n Object.keys(this.currentFilters).map(name => {\n const filter = this.currentFilters[name];\n const filterValues = filter.filterValues;\n const isMultiSelect = filter.type !== 'text';\n\n return filterValues.length > 0 ? (\n <ifx-chip\n placeholder={name}\n size=\"large\"\n variant={isMultiSelect ? \"multi\" : \"single\"}\n readOnly={true}\n value={filterValues} // Ensure value prop is set\n key={name}\n >\n {filterValues.map(filterValue => (\n <ifx-chip-item value={filterValue} selected={true} key={filterValue}>\n {filterValue}\n </ifx-chip-item>\n ))}\n </ifx-chip>\n ) : null;\n })\n )}\n\n {this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (\n <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\" onClick={() => this.handleResetButtonClick()}\n >\n <ifx-icon icon=\"curved-arrow-left-16\"></ifx-icon>Reset all\n </ifx-button>\n )}\n </div>\n\n {this.filterOrientation !== 'none' && (\n <div class=\"matching-results-container\">\n <span class=\"matching-results-count\">\n {this.matchingResultsCount}\n </span>\n <span class=\"matching-results-text\">\n matching results\n </span>\n </div>\n )}\n\n <div id=\"table-wrapper\" class={this.getTableClassNames()}>\n <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={style} ref={(el) => this.container = el}>\n </div>\n </div>\n {this.pagination ? <ifx-pagination total={this.allRowData.length} current-page={this.currentPage} items-per-page={this.itemsPerPage}></ifx-pagination> : null}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n\n hasButtonCol(): boolean {\n return this.getColData().some(column => column.field === 'button');\n }\n\n onDragOver(event) {\n var dragSupported = event.dataTransfer.length;\n\n if (dragSupported) {\n event.dataTransfer.dropEffect = 'move';\n }\n\n event.preventDefault();\n }\n\n onDrop(event) {\n var jsonData = event.dataTransfer.getData('application/json');\n\n var eJsonRow = document.createElement('div');\n eJsonRow.classList.add('json-row');\n eJsonRow.innerText = jsonData;\n\n var eJsonDisplay = document.querySelector('#eJsonDisplay');\n\n eJsonDisplay.appendChild(eJsonRow);\n event.preventDefault();\n }\n\n}\n"],"version":3}
1
+ {"file":"ifx-table.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","createGrid","classNames","h","Host"],"sources":["src/components/table-advanced-version/buttonCellRenderer.ts","src/components/table-advanced-version/customNoRowsOverlay.ts","src/components/table-advanced-version/customLoadingOverlay.ts","src/components/table-advanced-version/table.scss?tag=ifx-table&encapsulation=shadow","src/components/table-advanced-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\nimport { ButtonInterface } from './interfaces';\n\nexport class ButtonCellRenderer implements ICellRendererComp {\n eGui!: HTMLDivElement;\n eButton!: HTMLElement; // Change to a generic HTMLElement to accommodate custom elements\n eventListener!: (event: Event) => void;\n\n init(params: ICellRendererParams) {\n this.createButton(params);\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(params: ICellRendererParams) {\n this.updateButton(params);\n return true;\n }\n\n private createButton(params: ICellRendererParams) {\n const config = params.data.button;\n const options = params.colDef.cellRendererParams || {};\n \n this.eGui = document.createElement('div');\n this.eButton = document.createElement('ifx-button') as HTMLElement;\n \n if (this.hasRequiredKeys(config)) {\n this.setButtonAttributes(config);\n this.eGui.appendChild(this.eButton);\n this.attachEventListener(options, params);\n } else {\n this.eGui.innerHTML = `<span>${config}</span>`;\n }\n }\n\n private updateButton(params: ICellRendererParams) {\n const config = params.data.button;\n const options = params.colDef.cellRendererParams || {};\n \n if (this.hasRequiredKeys(config)) {\n this.setButtonAttributes(config);\n this.detachEventListener();\n this.attachEventListener(options, params);\n } else {\n this.eGui.innerHTML = `<span>${config}</span>`;\n }\n }\n\n private setButtonAttributes(config: ButtonInterface) {\n this.eButton.setAttribute('disabled', config.disabled.toString());\n this.eButton.setAttribute('variant', config.variant);\n this.eButton.setAttribute('theme', config.theme);\n this.eButton.setAttribute('type', config.type);\n this.eButton.setAttribute('size', config.size);\n this.eButton.setAttribute('full-width', config.fullWidth.toString());\n this.eButton.setAttribute('target', config.target);\n this.eButton.setAttribute('href', config.href);\n this.eButton.textContent = config.text;\n }\n\n private attachEventListener(options: any, params: ICellRendererParams) {\n this.eventListener = (event: Event) => {\n if (options.onButtonClick) {\n options.onButtonClick(params, event);\n }\n };\n this.eButton.addEventListener('click', this.eventListener);\n }\n\n private detachEventListener() {\n if (this.eventListener) {\n this.eButton.removeEventListener('click', this.eventListener);\n }\n }\n\n private hasRequiredKeys(config: ButtonInterface): boolean {\n return config && config.text !== '' && config.variant !== '' && config.size !== '' && config.type !== '';\n }\n}\n","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomNoRowsOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `\n <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\n ${params.noRowsMessageFunc()}\n </div>\n `;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomLoadingOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(_params: ICellRendererParams & { loadingMessage: string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\n<ifx-spinner></ifx-spinner>\n </div>`;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n@import \"~ag-grid-community/styles/ag-grid.css\";\n\n.zebra { \n & .ag-row-odd { \n background-color: tokens.$ifxColorEngineering100!important;\n }\n\n & .ag-row { \n border-bottom: none!important;\n }\n}\n\n.ag-header-viewport { \n background-color: tokens.$ifxColorEngineering200!important;\n}\n\n\n.table-container {\n display: block;\n}\n\n.sidebar-btn {\n margin-bottom: 24px;\n}\n\n.sidebar-container {\n margin-right: 24px;\n}\n\n.sidebar-layout {\n display: flex;\n flex-direction: row;\n}\n\n.topbar-layout {\n display: flex;\n flex-direction: column;\n}\n\n.table-pagination-wrapper {\n display: flex;\n flex-direction: column;\n align-items: stretch; // stretches items to fill the container horizontally\n width: 100%; // ensures the wrapper takes up the full width of its parent\n}\n\n#table-wrapper {\n flex: 1; // allows the table to take up the remaining space\n padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.table-wrapper .ag-root-wrapper-body {\n height: auto !important;\n min-height: 100px !important;\n min-width: 100px;\n}\n\n.filter-chips { \n display:flex;\n gap:tokens.$ifxSpace100;\n margin-bottom: 12px;\n}\n\n.filter-chips > ifx-button { // ifx-button with icon and text has a paddingof 16 px. This is to remove the padding to align with the filter-chips container definition\n margin-left: -8px;\n}\n\n.set-filter-wrapper-sidebar {\n display: flex;\n flex-direction: column;\n margin-bottom: tokens.$ifxSpace100;\n}\n\n.set-filter-wrapper-topbar {\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n margin-bottom: tokens.$ifxSpace100;\n background: tokens.$ifxColorEngineering100;\n padding-top: 32px;\n padding-bottom: 32px;\n gap: 24px;\n }\n\n\n.ifx-ag-grid {\n display: grid;\n height: 100%;\n width: 100%;\n min-width: 100px;\n //padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n outline: none !important;\n}\n\n.ifx-ag-grid *:not(.ag-header-cell):focus {\n outline: none;\n}\n\n\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n content: '';\n position: absolute;\n right: 0;\n top: calc(50% - 12px);\n height: 24px; \n width: 1px;\n background-color: tokens.$ifxColorEngineering300; \n}\n\n\n.ag-overlay-loading-center {\n border: none;\n background: none;\n border-radius: none;\n box-shadow: none;\n}\n\n\n.ag-root-wrapper {\n border: 1px solid tokens.$ifxColorEngineering200;\n}\n\n\n\n.ag-header {\n background-color: tokens.$ifxColorEngineering100;\n border-bottom: none;\n\n &.ag-header-active {\n outline: none !important;\n border-color: #0A8276 !important;\n }\n}\n\n.ag-header-cell {\n padding-left: 16px;\n padding-right: 16px;\n gap: 4px;\n}\n\n\n.ag-header-cell-focus {\n border: none !important;\n outline: none !important;\n}\n\n.ag-header-cell-text {\n font-size: 13px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.ag-row-focus {\n background-color: inherit !important;\n /* Reset the hover color to the row's original color */\n}\n\n.ag-row-hover {\n background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\n /* Reset the hover color to the row's original color */\n}\n\n\n.ag-cell-focus {\n border: none !important;\n outline: none !important;\n background-color: inherit !important;\n}\n\n\n\n.ag-row {\n background-color: tokens.$ifxColorBaseWhite;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n z-index: 1; //ensure the stacking order when used inside js frameworks\n}\n\n.ag-row-odd {\n background-color: tokens.$ifxColorBaseWhite;\n}\n\n.ag-cell {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n padding-left: 0px;\n vertical-align: bottom;\n line-height: 12px;\n}\n\n.ag-sort-indicator-container .ag-sort-order { \n display: none;\n}\n\n.unsort-icon-custom-color {\n color: tokens.$ifxColorEngineering400;\n}\n\n\n// Table with set filters in sidebar orientation\n\n\n.filters-title {\n font-size: 24px;\n font-weight: 600;\n}\n\n\n.matching-results-container {\n display: flex;\n gap: 4px;\n font-size: 14px;\n}\n\n.matching-results-count {\n font-weight: 600;\n}\n\n.matching-results-text {\n font-weight: 400;\n}","import { Component, h, Host, Method, Element, Prop, State, Listen, Watch } from '@stencil/core';\nimport classNames from 'classnames';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { ButtonCellRenderer } from './buttonCellRenderer';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\n\n\n@Component({\n tag: 'ifx-table',\n styleUrl: 'table.scss',\n shadow: true\n})\nexport class Table {\n gridOptions: GridOptions;\n gridApi: GridApi;\n @State() currentPage: number = 1;\n @Prop() cols: any;\n @Prop() rows: any;\n @Prop() buttonRendererOptions?: { onButtonClick?: (params: any, event: Event) => void;}; \n @State() rowData: any[] = [];\n @State() colData: any[] = [];\n @State() filterOptions: { [key: string]: string[] } = {};\n @State() currentFilters = {};\n @State() uniqueKey: string;\n allRowData: any[] = [];\n @Prop() rowHeight: string = 'default';\n @Prop() tableHeight: string = 'auto';\n @Prop() pagination: boolean = true;\n @Prop() paginationPageSize: number = 10;\n @Prop() filterOrientation: string = 'sidebar'; // topbar / none\n @State() showSidebarFilters: boolean = true;\n @State() matchingResultsCount: number = 0;\n @Prop() variant: string = 'default'\n\n @Prop() showLoading: boolean = false;\n private container: HTMLDivElement;\n @Element() host: HTMLElement;\n originalRowData: any[] = [];\n\n @Listen('ifxChange')\n handleChipChange(event: CustomEvent<{ previousSelection: Array<any>, currentSelection: Array<any>, name: string }>) {\n const { name, currentSelection, previousSelection } = event.detail;\n if(currentSelection && previousSelection) { \n // Clone the current filters state\n const updatedFilters = { ...this.currentFilters };\n \n if (currentSelection.length === 0) {\n // If there are no selections for this filter, delete the filter\n delete updatedFilters[name];\n \n // Emit event with specific filter name\n const customEvent = new CustomEvent('ifxUpdateSidebarFilter', { detail: { filterName: name }, bubbles: true, composed: true });\n this.host.dispatchEvent(customEvent);\n } else {\n // Otherwise, update the filter values with the current selection\n updatedFilters[name].filterValues = currentSelection.map(selection => selection.value);\n }\n \n // Update the component's filters\n this.currentFilters = updatedFilters;\n \n // Ensure table data is updated\n this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\n this.updateTableView();\n }\n }\n\n @Watch('buttonRendererOptions')\n onButtonRendererOptionsChanged() {\n this.colData = this.getColData(); // Re-fetch column data to apply new renderer options\n if (this.gridApi) {\n this.gridApi.setColumnDefs(this.colData); // Update column definitions in the grid API\n }\n }\n\n toggleSidebarFilters() {\n this.showSidebarFilters = !this.showSidebarFilters;\n }\n\n updateFilterOptions() {\n const options = {};\n for (let col of this.colData) {\n options[col.field] = [...new Set(this.rowData.map(row => row[col.field]))];\n }\n this.filterOptions = options;\n }\n\n handleSidebarFilterChange(event: CustomEvent) {\n const filterGroups = event.detail;\n const updatedFilters = {};\n\n filterGroups.forEach(filterGroup => {\n const filterName = filterGroup.filterGroupName;\n let filterValues;\n let type;\n\n if (filterGroup.selectedItems && filterGroup.selectedItems.length > 0) {\n filterValues = filterGroup.selectedItems.map(item => item.label);\n type = 'multi-select';\n } else if (filterGroup.value) {\n filterValues = [filterGroup.value];\n type = 'text';\n } else {\n filterValues = [];\n }\n\n if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\n updatedFilters[filterName] = { filterValues, type };\n }\n });\n\n this.allRowData = this.applyAllFilters(this.originalRowData, updatedFilters);\n this.updateTableView();\n this.currentFilters = updatedFilters;\n }\n\n\n handleTopbarFilterChange(event: CustomEvent) {\n const filters = event.detail;\n\n // Start by resetting the filter conditions to a blank object\n this.currentFilters = {};\n\n // Loop through each filter group provided in the event detail\n filters.forEach(filter => {\n const filterName = filter.filterName;\n let filterValues;\n\n let type = filter.type;\n\n if (type === 'text') {\n // Search/Text filter\n filterValues = filter.filterValues\n } else {\n // Multi-select/Single-Select\n filterValues = filter.filterValues.map(item => item.label);\n }\n\n // If there are no filter values, or the filter is a text filter with an empty value, remove the filter\n if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\n // Add or update the filter in the currentFilters object\n this.currentFilters[filterName] = { filterValues, type };\n }\n });\n\n\n // Now that the currentFilters object has been updated, apply all filters to the data\n this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\n\n // After filtering, update the table view with the new filtered data\n this.updateTableView();\n }\n\n\n applyAllFilters(data, filters) {\n return data.filter(row => {\n for (const filterName in filters) {\n const filterInfo = filters[filterName];\n let selectedValues = (filterInfo.filterValues || []).map(value => {\n if (typeof value === 'string') {\n return value.toLowerCase();\n } else if (typeof value === 'number' || typeof value === 'boolean') {\n return value.toString();\n }\n return '';\n });\n\n // For text filters, check if row values start with any of the selectedValues\n if (filterInfo.type === 'text') {\n let textFilterMatched = false;\n for (let property in row) {\n if (row.hasOwnProperty(property)) {\n let rowValue = row[property] != null ? String(row[property]).toLowerCase() : '';\n if (selectedValues.some(filterValue => rowValue.startsWith(filterValue))) {\n textFilterMatched = true;\n break;\n }\n }\n }\n if (!textFilterMatched) return false;\n }\n // For multi-select filters, this remains unchanged\n else if (filterInfo.type === 'multi-select') {\n let rowValue = row[filterName] != null ? String(row[filterName]).toLowerCase() : '';\n // Check if 'undefined' is a selected value and include rows with empty values in that case\n let includesUndefined = selectedValues.includes('undefined');\n if (!selectedValues.includes(rowValue) && !(includesUndefined && rowValue === '')) {\n return false;\n }\n }\n }\n return true;\n });\n }\n\n\n\n updateTableView() {\n // Calculate the slice of data to display based on pagination\n const startIndex = (this.currentPage - 1) * this.paginationPageSize;\n const endIndex = startIndex + this.paginationPageSize;\n const visibleRowData = this.allRowData.slice(startIndex, endIndex);\n\n // Update the row data in the table\n this.rowData = visibleRowData;\n this.gridApi.setGridOption('rowData', this.rowData);\n\n // Update matching results count\n this.matchingResultsCount = this.allRowData.length;\n }\n\n\n clearAllFilters() {\n this.currentFilters = {};\n this.allRowData = [...this.originalRowData];\n }\n\n\n @Method()\n async onBtShowLoading() {\n this.gridApi.showLoadingOverlay();\n }\n\n componentWillLoad() {\n this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\n this.rowData = this.getRowData();\n this.colData = this.getColData();\n this.updateFilterOptions();\n\n this.gridOptions = {\n\n rowHeight: this.rowHeight === 'default' ? 40 : 32,\n headerHeight: 40,\n defaultColDef: {\n resizable: true,\n },\n suppressDragLeaveHidesColumns: true,\n enableCellTextSelection: true,\n onFirstDataRendered: this.onFirstDataRendered.bind(this),\n columnDefs: this.colData,\n rowData: this.rowData,\n loadingOverlayComponent: CustomLoadingOverlay,\n noRowsOverlayComponent: CustomNoRowsOverlay,\n noRowsOverlayComponentParams: {\n noRowsMessageFunc: () =>\n 'No rows found' //at: ' + new Date().toLocaleTimeString(),\n },\n icons: {\n sortAscending: '<ifx-icon icon=\"arrow-triangle-up-16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></ifx-icon></a>'\n },\n rowDragManaged: this.colData.some(col => col.dndSource === true) ? true : false,\n animateRows: this.colData.some(col => col.dndSource === true) ? true : false,\n };\n\n }\n\n componentDidRender() {\n if (this.gridApi) {\n this.gridApi.setGridOption('columnDefs', this.colData);\n }\n }\n\n async componentDidLoad() {\n if (this.container) {\n if(!isNestedInIfxComponent(this.host)) { \n const framework = detectFramework();\n trackComponent('ifx-table', await framework)\n }\n this.gridApi = createGrid(this.container, this.gridOptions);\n if (this.gridApi) {\n this.gridApi.sizeColumnsToFit({\n defaultMinWidth: 100,\n });\n this.gridApi.setGridOption('columnDefs', this.colData);\n this.gridApi.setGridOption('rowData', this.rowData);\n\n if (this.pagination) {\n const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n if (paginationElement) {\n paginationElement.addEventListener('ifxPageChange', this.handlePageChange.bind(this));\n }\n }\n const sidebarFilterElements = this.host.querySelectorAll('ifx-filter-type-group');\n // Add an event listener to each SetFilter component\n sidebarFilterElements.forEach(sidebarFilterElement => {\n sidebarFilterElement.addEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\n });\n const topbarFilterElements = this.host.querySelectorAll('ifx-filter-bar');\n // Add an event listener to each SetFilter component\n topbarFilterElements.forEach(topbarFilterElement => {\n topbarFilterElement.addEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\n });\n }\n }\n }\n\n componentWillUnmount() {\n if (this.pagination) {\n const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n if (paginationElement) {\n paginationElement.removeEventListener('ifxPageChange', this.handlePageChange.bind(this));\n }\n }\n const sidebarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\n // Remove the event listener from each SetFilter component\n sidebarFilters.forEach(sidebarFilter => {\n sidebarFilter.removeEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\n });\n const topbarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\n // Remove the event listener from each SetFilter component\n topbarFilters.forEach(topbarFilter => {\n topbarFilter.removeEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\n });\n }\n\n handlePageChange(event) {\n this.currentPage = event.detail.currentPage;\n const startIndex = (this.currentPage - 1) * this.paginationPageSize;\n const endIndex = startIndex + this.paginationPageSize;\n const visibleRowData = this.allRowData.slice(startIndex, endIndex);\n // Update the data in the grid\n if (this.gridApi) {\n this.gridApi.setGridOption('rowData', visibleRowData);\n }\n }\n\n isJSONParseable(str) {\n try {\n JSON.parse(str);\n return true;\n } catch (e) {\n return false;\n }\n }\n\n\n getRowData() {\n let rows: any[] = [];\n if (this.rows === undefined || this.rows === null) {\n return rows;\n }\n \n if (this.isJSONParseable(this.rows)) {\n rows = [...JSON.parse(this.rows)];\n }\n else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\n rows = [...this.rows];\n }\n else {\n console.error('Unexpected value for rows: ', this.rows);\n }\n\n this.allRowData = rows;\n this.originalRowData = [...rows]; // Deep copy the original data\n this.matchingResultsCount = this.allRowData.length;\n\n return rows.slice(0, this.paginationPageSize);\n }\n\n\n getColData() {\n let cols: any[] = [];\n if (this.cols === undefined || this.cols === null) {\n return cols;\n }\n \n if (this.isJSONParseable(this.cols)) {\n cols = [...JSON.parse(this.cols)];\n } else if (Array.isArray(this.cols) || typeof this.cols === 'object') {\n cols = [...this.cols];\n } else {\n console.error('Unexpected value for cols: ', this.cols);\n }\n \n const buttonColumn = cols.find(column => column.field === 'button');\n if (buttonColumn) {\n buttonColumn.cellRenderer = ButtonCellRenderer;\n buttonColumn.valueFormatter = params => params.value.text;\n \n // No JSON.parse needed now\n if (this.buttonRendererOptions && typeof this.buttonRendererOptions === 'object') {\n if (this.buttonRendererOptions.onButtonClick) {\n buttonColumn.cellRendererParams = {\n onButtonClick: this.buttonRendererOptions.onButtonClick\n };\n }\n }\n }\n \n return cols;\n }\n \n\n onFirstDataRendered(params: FirstDataRenderedEvent) {\n params.api.sizeColumnsToFit();\n }\n\n handleResetButtonClick() {\n const resetEvent = new CustomEvent('ifxResetFiltersEvent', { bubbles: true, composed: true });\n window.dispatchEvent(resetEvent); // Dispatch from the window object\n\n this.clearAllFilters();\n this.updateTableView(); // Update table view with the original data\n }\n\n\n disconnectedCallback() {\n if (this.pagination) {\n const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n if (paginationElement) {\n paginationElement.removeEventListener('ifxPageChange', this.handlePageChange);\n }\n }\n\n const resetButton = this.host.shadowRoot.querySelector('#reset-filters-button');\n if (resetButton) {\n resetButton.removeEventListener('click', this.handleResetButtonClick.bind(this));\n }\n }\n\n\n\n getTableClassNames() {\n return classNames(\n this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n 'table-wrapper',\n );\n }\n\n\n render() {\n let style = {};\n if (this.tableHeight !== 'auto') {\n style = {\n 'height': this.tableHeight\n };\n }\n const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';\n return (\n <Host>\n <div class=\"table-container\">\n {this.filterOrientation === 'sidebar' && (\n <div class=\"sidebar-btn\">\n <ifx-button\n type=\"button\"\n disabled={false}\n variant=\"secondary\"\n size=\"m\"\n target=\"_blank\"\n theme=\"default\"\n full-width=\"false\"\n onClick={() => this.toggleSidebarFilters()}\n >\n <ifx-icon icon=\"cross-16\"></ifx-icon>{this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'}\n </ifx-button>\n </div>\n )}\n\n <div class={filterClass}>\n {this.filterOrientation === 'sidebar' && this.showSidebarFilters && (\n <div class=\"sidebar-container\">\n <div class=\"filters-title-container\">\n <span class=\"filters-title\">Filters</span>\n </div>\n <div class=\"set-filter-wrapper-sidebar\">\n {(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (\n <slot name=\"sidebar-filter\"></slot>\n )}\n </div>\n </div>\n )}\n\n {this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (\n <div class=\"set-filter-wrapper-topbar\">\n {(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (\n <slot name=\"topbar-filter\"></slot>\n )}\n </div>\n )}\n\n <div class=\"table-pagination-wrapper\">\n <div class=\"filter-chips\">\n {this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (\n Object.keys(this.currentFilters).map(name => {\n const filter = this.currentFilters[name];\n const filterValues = filter.filterValues;\n const isMultiSelect = filter.type !== 'text';\n\n return filterValues.length > 0 ? (\n <ifx-chip\n placeholder={name}\n size=\"large\"\n variant={isMultiSelect ? \"multi\" : \"single\"}\n readOnly={true}\n value={filterValues} // Ensure value prop is set\n key={name}\n >\n {filterValues.map(filterValue => (\n <ifx-chip-item value={filterValue} selected={true} key={filterValue}>\n {filterValue}\n </ifx-chip-item>\n ))}\n </ifx-chip>\n ) : null;\n })\n )}\n\n {this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (\n <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\" onClick={() => this.handleResetButtonClick()}\n >\n <ifx-icon icon=\"curved-arrow-left-16\"></ifx-icon>Reset all\n </ifx-button>\n )}\n </div>\n\n {this.filterOrientation !== 'none' && (\n <div class=\"matching-results-container\">\n <span class=\"matching-results-count\">\n {this.matchingResultsCount}\n </span>\n <span class=\"matching-results-text\">\n matching results\n </span>\n </div>\n )}\n\n <div id=\"table-wrapper\" class={this.getTableClassNames()}>\n <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={style} ref={(el) => this.container = el}>\n </div>\n </div>\n {this.pagination ? <ifx-pagination total={this.allRowData.length} current-page={this.currentPage} items-per-page='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]'></ifx-pagination> : null}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n\n hasButtonCol(): boolean {\n return this.getColData().some(column => column.field === 'button');\n }\n\n onDragOver(event) {\n var dragSupported = event.dataTransfer.length;\n\n if (dragSupported) {\n event.dataTransfer.dropEffect = 'move';\n }\n\n event.preventDefault();\n }\n\n onDrop(event) {\n var jsonData = event.dataTransfer.getData('application/json');\n\n var eJsonRow = document.createElement('div');\n eJsonRow.classList.add('json-row');\n eJsonRow.innerText = jsonData;\n\n var eJsonDisplay = document.querySelector('#eJsonDisplay');\n\n eJsonDisplay.appendChild(eJsonRow);\n event.preventDefault();\n }\n\n}\n"],"version":3}
package/dist/collection/components/modal/modal.js CHANGED
@@ -47,9 +47,9 @@ export class IfxModal {
47
47
  this.handleComponentOverflow();
48
48
  }
49
49
  }
50
- handleComponentOverflow() {
50
+ async handleComponentOverflow() {
51
51
  const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');
52
- if (this.showModal && this.isModalContentContainerHeightReachedViewport()) {
52
+ if (this.showModal && await this.isModalContentContainerHeightReachedViewport()) {
53
53
  modalContentContainer.classList.add('no-overflow');
54
54
  }
55
55
  else if (modalContentContainer === null || modalContentContainer === void 0 ? void 0 : modalContentContainer.classList.contains('no-overflow')) {
@@ -177,8 +177,8 @@ export class IfxModal {
177
177
  }
178
178
  render() {
179
179
  const isAlertVariant = this.variant !== 'default';
180
- return (h(Host, { key: '0d573f93f0188f8255994ebd1f4355d0007d081e' }, h("div", { key: '2909db24603f28a307a3d2f88b9df3f1cc496ef3', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { key: 'bc8994163ac10cc94fbf553bee4590e75cd94c9f', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '4c978da70c5de23b0f05396a29a8a7d77a998fac', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: '45d00c0226bfaf81f076e9fe99c967b10a24f6e5', 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: '3db82f776b5ea0551a28b941a14812ddddf99a60', class: "modal-content" }, h("div", { key: 'f471b0e9429d3ee696a5921b201fe582ca5d94b5', class: "modal-header" }, h("h2", { key: '5ea3807496762c5c99f5c8ee86f3d13b5a96b3b2', class: "modal-caption" }, this.caption), this.showCloseButton &&
181
- h("ifx-icon-button", { key: 'f725cab8121fa8caf5f3d61925d521a8935864d6', class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-16", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { key: '7c05913f69feb6ea5e7cc6957f1e051bd0dc1278', class: "modal-body" }, h("slot", { key: '674d48b6361b1eece2bb4efd337d8ff1543e3c12', name: "content", onSlotchange: (e) => this.handleContentUpdate(e) })), h("div", { key: '13680bcdc4115d945653aa606fda3f6d80cfa94f', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { key: 'de1f6c2c4ad5f3d36b68d825ba914784b271a6c6', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { key: '373cf96a9d6a8783440bbff74fcd60d02f8884cc', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
180
+ return (h(Host, { key: '7c84f8ffdfff21cbada9e88a8565d8432d7b280d' }, h("div", { key: '32d1cbf8ff758a474ed1366e0d8d30159d77c9e7', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { key: '036a4ab1cfa90cb759a8613d21cd3d1dcf3ee74d', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '529ecb2daaab9133632c1937589f790e31610522', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: 'af950b569f582d07465797f39d7d79834ce3512b', 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: '6ddefbc12feb0f1c6269092dc948adc84617e8fb', class: "modal-content" }, h("div", { key: 'c82231719e7e0b8180b71b97c89fc2846b5ff79d', class: "modal-header" }, h("h2", { key: '70ad4e29a330632fa3176066578e826a6f4e96db', class: "modal-caption" }, this.caption), this.showCloseButton &&
181
+ h("ifx-icon-button", { key: '2e9f091e469964c2e475caee8eb112a3e4fa0eae', class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-16", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { key: '517696fdc9de127624b6ed276e2deedd1c7ea6f8', class: "modal-body" }, h("slot", { key: 'f280964c1902a46fb81bb3e92195d20b31b2af1f', name: "content", onSlotchange: (e) => this.handleContentUpdate(e) })), h("div", { key: '60f5005ec5bfe6ef0d05bf0135377c7c7715e649', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { key: '4f334f79931102713261ba746c881595bda9306c', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { key: '1527d25c162c439022a58255b95f627555ebe6d7', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
182
182
  }
183
183
  static get is() { return "ifx-modal"; }
184
184
  static get encapsulation() { return "shadow"; }
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 { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\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() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n\n @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n \n @Prop() size: 's' | 'm' | 'l' = 's';\n\n @Prop() alertIcon: string = '';\n @Prop() okButtonLabel: string = 'OK';\n @Prop() cancelButtonLabel: string = 'Cancel';\n @Element() hostElement: HTMLElement;\n\n @State() slotButtonsPresent: boolean = false;\n\n @Prop() showCloseButton: boolean = true;\n\n private modalContainer: HTMLElement;\n private focusableElements: HTMLElement[] = [];\n private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.hostElement)) { \n const framework = detectFramework();\n trackComponent('ifx-modal', await framework)\n }\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 componentWillRender() { \n if(this.showModal) { \n this.handleComponentOverflow();\n }\n }\n\n handleComponentOverflow() { \n const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');\n if (this.showModal && this.isModalContentContainerHeightReachedViewport()) {\n modalContentContainer.classList.add('no-overflow')\n } else if(modalContentContainer?.classList.contains('no-overflow')) { \n modalContentContainer?.classList.remove('no-overflow')\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 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 open() {\n this.showModal = true;\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n // Setting focus on last item and removing immediately\n // so, on tab press first element is focused\n setTimeout(() => {\n this.getLastFocusableElement()?.focus();\n this.getLastFocusableElement()?.blur();\n }, 0);\n\n this.ifxOpen.emit();\n });\n\n this.hostElement.addEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.ifxOpen.emit();\n }\n }\n\n close() {\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n this.showModal = false;\n this.ifxClose.emit();\n });\n this.hostElement.removeEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.showModal = false;\n this.ifxClose.emit();\n }\n }\n\n handleKeypress = (event: KeyboardEvent) => {\n if (!this.showModal) {\n return;\n }\n if (event.key === 'Escape') {\n this.doBeforeClose('ESCAPE_KEY');\n }\n };\n\n 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 @Watch('opened')\n openedChanged(newValue) {\n if (newValue === true) {\n this.open();\n } else {\n this.close()\n }\n }\n\n handleOverlayClick() {\n if (this.closeOnOverlayClick) {\n this.doBeforeClose('BACKDROP')\n }\n }\n\n handleContentUpdate(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n if(nodes.length > 0) {\n nodes.forEach(node => {\n if (node.observer) {\n node.observer.disconnect();\n delete node.observer;\n }\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if(this.showModal) { \n this.handleComponentOverflow();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n node.observer = observer;\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 isModalContentContainerHeightReachedViewport() {\n //Adding timeout for proper height detection on Edge browser\n return new Promise(resolve => {\n setTimeout(() => {\n const modalContent = this.hostElement.shadowRoot.querySelector('.modal-content') as HTMLElement;\n const modalContentHeight = modalContent.offsetHeight;\n const viewportHeight = window.innerHeight;\n resolve(modalContentHeight >= viewportHeight * 0.9);\n }, 100);\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-16\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n </ifx-icon-button>\n }\n </div>\n <div class=\"modal-body\">\n <slot name=\"content\" onSlotchange={(e) => this.handleContentUpdate(e)} />\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 { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\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() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n\n @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n \n @Prop() size: 's' | 'm' | 'l' = 's';\n\n @Prop() alertIcon: string = '';\n @Prop() okButtonLabel: string = 'OK';\n @Prop() cancelButtonLabel: string = 'Cancel';\n @Element() hostElement: HTMLElement;\n\n @State() slotButtonsPresent: boolean = false;\n\n @Prop() showCloseButton: boolean = true;\n\n private modalContainer: HTMLElement;\n private focusableElements: HTMLElement[] = [];\n private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.hostElement)) { \n const framework = detectFramework();\n trackComponent('ifx-modal', await framework)\n }\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 componentWillRender() { \n if(this.showModal) { \n this.handleComponentOverflow();\n }\n }\n\n async handleComponentOverflow() { \n const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');\n if (this.showModal && await this.isModalContentContainerHeightReachedViewport()) {\n modalContentContainer.classList.add('no-overflow')\n } else if(modalContentContainer?.classList.contains('no-overflow')) { \n modalContentContainer?.classList.remove('no-overflow')\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 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 open() {\n this.showModal = true;\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n // Setting focus on last item and removing immediately\n // so, on tab press first element is focused\n setTimeout(() => {\n this.getLastFocusableElement()?.focus();\n this.getLastFocusableElement()?.blur();\n }, 0);\n\n this.ifxOpen.emit();\n });\n\n this.hostElement.addEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.ifxOpen.emit();\n }\n }\n\n close() {\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n this.showModal = false;\n this.ifxClose.emit();\n });\n this.hostElement.removeEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.showModal = false;\n this.ifxClose.emit();\n }\n }\n\n handleKeypress = (event: KeyboardEvent) => {\n if (!this.showModal) {\n return;\n }\n if (event.key === 'Escape') {\n this.doBeforeClose('ESCAPE_KEY');\n }\n };\n\n 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 @Watch('opened')\n openedChanged(newValue) {\n if (newValue === true) {\n this.open();\n } else {\n this.close()\n }\n }\n\n handleOverlayClick() {\n if (this.closeOnOverlayClick) {\n this.doBeforeClose('BACKDROP')\n }\n }\n\n handleContentUpdate(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n if(nodes.length > 0) {\n nodes.forEach(node => {\n if (node.observer) {\n node.observer.disconnect();\n delete node.observer;\n }\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if(this.showModal) { \n this.handleComponentOverflow();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n node.observer = observer;\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 isModalContentContainerHeightReachedViewport() {\n //Adding timeout for proper height detection on Edge browser\n return new Promise(resolve => {\n setTimeout(() => {\n const modalContent = this.hostElement.shadowRoot.querySelector('.modal-content') as HTMLElement;\n const modalContentHeight = modalContent.offsetHeight;\n const viewportHeight = window.innerHeight;\n resolve(modalContentHeight >= viewportHeight * 0.9);\n }, 100);\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-16\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n </ifx-icon-button>\n }\n </div>\n <div class=\"modal-body\">\n <slot name=\"content\" onSlotchange={(e) => this.handleContentUpdate(e)} />\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}"]}