npm - @mgdis/mg-components - Versions diffs - 6.6.1 → 6.8.0 - Mend

@mgdis/mg-components 6.6.1 → 6.8.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 (131) hide show

package/dist/components/mg-popover2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { G as Ge, X as Xe, V as Ve, Y as Ye } from './index.es.js';
-import { a as autoUpdate, i as isFloatingUIPlacement, c as computePosition, o as offset, f as flip, s as sides, b as shift, l as limitShift, d as arrow } from './floating-ui.utils.js';
+import { i as isFloatingUIPlacement, s as sides, a as autoUpdate, b as alignments, c as computePosition, o as offset, f as flip, d as shift, l as limitShift, e as arrow } from './floating-ui.utils.js';
 import { d as defineCustomElement$4 } from './mg-button2.js';
 import { d as defineCustomElement$3 } from './mg-card2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
@@ -50,12 +50,24 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
                 this.display = false;
             }
         };
+        /**
+         * Update aria-expanded attribute on interactive element
+         * @param expanded - expanded state
+         */
+        this.updateAriaExpanded = (expanded) => {
+            const interactiveElement = this.element.querySelector(':not([slot])');
+            if (interactiveElement !== null) {
+                interactiveElement.setAttribute('aria-expanded', String(expanded));
+            }
+        };
         /**
          * Show popover
          */
         this.show = () => {
             // Make the popover visible
             this.mgPopover.dataset.show = '';
+            // Update aria-expanded
+            this.updateAriaExpanded(true);
             // hide when click outside
             // setTimeout is used to prevent event to trigger after creation
             setTimeout(() => {
@@ -68,6 +80,8 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
         this.hide = () => {
             // Hide the popover
             this.mgPopover.removeAttribute('data-show');
+            // Update aria-expanded
+            this.updateAriaExpanded(false);
             // Remove event listener
             this.manageClickOutsideListeners('removeEventListener');
         };
@@ -122,12 +136,34 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
                 mgPopoverContent.setAttribute('id', this.identifier);
             }
         };
+        /**
+         * Get alternative placements ordered by proximity to initial placement
+         * First check fallbackPlacement attribute, then generate alternatives:
+         * 1. Same side with different alignments (start, center, end)
+         * 2. Other sides in order
+         * @param placement - initial placement
+         * @returns array of alternative placements
+         */
+        this.getClosestPlacements = (placement) => {
+            // First check if fallbackPlacement attribute is defined
+            const fallbackPlacements = (this.element.dataset.fallbackPlacement || '')
+                .split(',')
+                .map(t => t.trim())
+                .filter(isFloatingUIPlacement);
+            if (fallbackPlacements.length > 0)
+                return Array.from(new Set([...fallbackPlacements, ...sides]).values()).filter(isFloatingUIPlacement);
+            // Extract side from placement (e.g. "top" from "top-start")
+            const [side] = placement.split('-');
+            // Generate placements for same side with different alignments
+            const currentSidePlacements = alignments.map(alignment => (alignment !== null ? `${side}-${alignment}` : side));
+            // Return unique placements: current side variants first, then other sides
+            return Array.from(new Set([...currentSidePlacements, ...sides.filter(otherSide => otherSide !== side)])).filter(isFloatingUIPlacement);
+        };
         /**
          * Set up Floating UI positioning and arrow behavior
          * @param interactiveElement - Element that triggers the popover
          */
         this.setFloatingUI = (interactiveElement) => {
-            const fallbackPlacements = (this.element.dataset.fallbackPlacement || '').split(',').map(t => t.trim());
             this.floatingUICleanup = autoUpdate(interactiveElement, this.mgPopover, () => {
                 computePosition(interactiveElement, this.mgPopover, {
                     placement: this.placement,
@@ -135,7 +171,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
                     middleware: [
                         offset(0),
                         flip({
-                            fallbackPlacements: Array.from(new Set([...fallbackPlacements, ...sides]).values()).filter(isFloatingUIPlacement), // simulate "auto" placement with default fallback values
+                            fallbackPlacements: this.getClosestPlacements(this.placement),
                         }),
                         shift({
                             limiter: limitShift(),
@@ -164,7 +200,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
                     // Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.
                     // Due to this, either x or y will be undefined, depending on the side of placement.
                     // The above code uses `isNaN` to check for null and undefined simultaneously.
-                    // Don’t remove `isNaN`, because either value can be falsy (0), causing a bug!
+                    // Don't remove `isNaN`, because either value can be falsy (0), causing a bug!
                     const numberToPx = (number) => (!isNaN(number) ? `${number}px` : '');
                     if (arrowElement !== null)
                         Object.assign(arrowElement.style, {
@@ -286,7 +322,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '726e360b49d1148572db27898037c1d2cfd1755f' }, h("slot", { key: '4700d3d58fde644274827866ee8f230c077399b7' }), h("slot", { key: '35d20ddd547b3383dd1de655fac2c35e83fb48af', name: "content" })));
+        return (h(Host, { key: '085dde7110b2c100db1876d31f7db23e7c1fda5e' }, h("slot", { key: 'dcc6587d5a88784109f1421925992112ef77490d' }), h("slot", { key: '0d1831d325762c99a503a5e461b428a5cb7bdc2c', name: "content" })));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-popover2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-popover2.js","mappings":"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","names":["createID","isValideID","toString","getWindows"],"sources":["../styles/dist/components/mg-popover.css?tag=mg-popover&encapsulation=shadow","src/components/molecules/mg-popover/mg-popover.tsx"],"sourcesContent":["/!\n @prop --mg-c-popover-color-background: Defines the background color of the popover. Default value: `--mg-b-color-light`.\n * @prop --mg-c-popover-color-text: Defines the font color of the popover. Default value: `--mg-b-color-font-dark`.\n * @prop --mg-c-popover-title-font-size: Defines the font size of the popover title. Default value: `--mg-b-font-size-h5`.\n * @prop --mg-c-popover-padding-vertical: Defines the vertical padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-padding-horizontal: Defines the horizontal padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-max-width: Defines the max-width of the popover. Default value: `--mg-b-size-floating-element-max-width`.\n * @prop --mg-c-popover-min-width: Defines the min-width of the popover. Default value: `unset`.\n /:host{--mg-c-card-spacing: var(--mg-c-popover-padding-vertical, var(--mg-b-size-16)) var(--mg-c-popover-padding-horizontal, var(--mg-b-size-16));--mg-c-card-border: none;--mg-c-card-border-radius: var(--mg-b-size-radius);--mg-c-card-color-background: var(--mg-c-popover-color-background);position:relative;display:contents}:host::slotted(){display:inline-block}/# sourceMappingURL=mg-popover.css.map /\n","import { Component, Element, Host, h, Prop, Watch, EventEmitter, Event } from '@stencil/core';\nimport { createID, getWindows, isValideID, toString } from '@mgdis/stencil-helpers';\nimport { computePosition, autoUpdate, flip, shift, limitShift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { isFloatingUIPlacement, type PopoverPlacementType, sides } from './mg-popover.conf';\n\n/*\n @slot - Element that will display the popover\n * @slot content - popover content\n /\n@Component({\n tag: 'mg-popover',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-popover.css',\n shadow: true,\n})\nexport class MgPopover {\n /**********\n Internal \n *********/\n\n private mgPopover: HTMLElement;\n private mgPopoverContent: HTMLMgPopoverContentElement;\n private windows: Window[];\n private floatingUICleanup: ReturnType<typeof autoUpdate>;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgPopoverElement;\n\n /\n Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n /\n @Prop() identifier: string = createID('mg-popover');\n @Watch('identifier')\n validateIdentifier(newValue: MgPopover['identifier']): void {\n if (!isValideID(newValue)) {\n throw new Error(`<mg-popover> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n // use renderPopoverContent to update popover-content id\n this.renderPopoverContent();\n }\n\n /\n Popover placement\n /\n @Prop({ mutable: true }) placement: PopoverPlacementType = 'bottom';\n @Watch('placement')\n watchPlacement(newValue): void {\n if (!isFloatingUIPlacement(newValue)) this.placement = 'bottom';\n }\n\n /\n Hide popover arrow\n /\n @Prop() arrowHide = false;\n @Watch('arrowHide')\n validateArrowHide(newValue: MgPopover['arrowHide']): void {\n if (newValue) this.mgPopoverContent.dataset.arrowHide = '';\n else delete this.mgPopoverContent.dataset.arrowHide;\n }\n\n /\n Define if popover has a cross button\n /\n @Prop() closeButton = false;\n @Watch('closeButton')\n validateCloseButton(newValue: MgPopover['closeButton']): void {\n this.mgPopoverContent.closeButton = newValue;\n }\n\n /\n Display popover\n /\n @Prop({ mutable: true }) display = false;\n @Watch('display')\n handleDisplay(newValue: boolean): void {\n if (newValue) {\n this.show();\n } else {\n this.hide();\n }\n this.displayChange.emit(newValue);\n }\n\n /\n Disable popover\n /\n @Prop() disabled = false;\n\n /\n Emited event when display value change\n /\n @Event({ eventName: 'display-change' }) displayChange: EventEmitter<HTMLMgPopoverElement['display']>;\n\n /\n Emmited event when popover is closed\n /\n @Event({ eventName: 'component-close' }) componentClose: EventEmitter<void>;\n\n /\n Check if clicked outside of component\n * @param event - mouse event\n /\n private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n if (!this.disabled && event.target.closest('mg-popover') !== this.element && event.target.closest(`[data-mg-popover-guard=\"${this.identifier}\"]`) === null) {\n this.display = false;\n }\n };\n\n /\n Show popover\n /\n private show = (): void => {\n // Make the popover visible\n this.mgPopover.dataset.show = '';\n // hide when click outside\n // setTimeout is used to prevent event to trigger after creation\n setTimeout(() => {\n this.manageClickOutsideListeners('addEventListener');\n });\n };\n\n /\n Hide popover\n /\n private hide = (): void => {\n // Hide the popover\n this.mgPopover.removeAttribute('data-show');\n // Remove event listener\n this.manageClickOutsideListeners('removeEventListener');\n };\n\n /\n Manage all clickOustside listeners\n * @param action - top process on elements listeners\n /\n private manageClickOutsideListeners = (action: 'removeEventListener' \| 'addEventListener'): void => {\n // clickOutside listeners need to bind windows\n // AND as shawdowDom content is not include on windows listeners `event.target` we need to include popover guard content DOM if it's a web-component\n // by doing this we can get and parse all needeed document DOM elements in clickOutside callback event.details.\n // This result in the givern junction :\n // Windows > document > [data-mg-popover-guard] + [data-mg-popover-guard] > shadowRoot = Windows > document > [data-mg-popover-guard] > shadowRoot\n const guardChildren = Array.from(document.querySelector(`[data-mg-popover-guard=\"${this.identifier}\"]`)?.shadowRoot?.children \|\| new Set());\n [...guardChildren, ...this.windows].forEach((element: Window \| HTMLElement) => {\n if (element !== null) {\n element[action]('click', this.clickOutside, false);\n }\n });\n };\n\n /\n Handle content hide event\n /\n private handleHideContent = (): void => {\n this.display = false;\n this.componentClose.emit();\n };\n\n /\n Render popover content element\n /\n private renderPopoverContent = (): void => {\n const mgPopoverContent = this.element.querySelector('mg-popover-content');\n if (mgPopoverContent === null) {\n this.mgPopoverContent = document.createElement('mg-popover-content');\n this.mgPopoverContent.setAttribute('slot', 'content');\n this.mgPopoverContent.setAttribute('id', this.identifier);\n this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);\n\n const arrow = document.createElement('div');\n arrow.setAttribute('slot', 'arrow');\n arrow.dataset.floatingArrow = '';\n this.mgPopoverContent.appendChild(arrow);\n\n // insert elements in DOM\n ['[slot=\"title\"]', '[slot=\"content\"]:not(mg-popover-content)'].forEach(slotType => {\n Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {\n this.mgPopoverContent.appendChild(slot);\n });\n });\n this.element.appendChild(this.mgPopoverContent);\n } else {\n mgPopoverContent.setAttribute('id', this.identifier);\n }\n };\n\n /\n Set up Floating UI positioning and arrow behavior\n * @param interactiveElement - Element that triggers the popover\n /\n private setFloatingUI = (interactiveElement: HTMLElement): void => {\n const fallbackPlacements = (this.element.dataset.fallbackPlacement \|\| '').split(',').map(t => t.trim());\n\n this.floatingUICleanup = autoUpdate(interactiveElement, this.mgPopover, () => {\n computePosition(interactiveElement, this.mgPopover, {\n placement: this.placement as Placement,\n strategy: 'fixed',\n middleware: [\n offset(0),\n flip({\n fallbackPlacements: Array.from(new Set([...fallbackPlacements, ...sides]).values()).filter(isFloatingUIPlacement), // simulate \"auto\" placement with default fallback values\n }),\n shift({\n limiter: limitShift(),\n }),\n arrow({\n element: this.mgPopover.querySelector('[data-floating-arrow]'),\n }),\n ],\n }).then(({ x, y, placement, middlewareData }) => {\n Object.assign(this.mgPopover.style, {\n position: 'fixed',\n top: '0',\n left: '0',\n transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`,\n });\n\n // Update arrow style\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[placement.split('-')[0]];\n\n const arrowElement: HTMLElement = this.mgPopover.querySelector('[data-floating-arrow]');\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n // https://floating-ui.com/docs/arrow\n // Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.\n // Due to this, either x or y will be undefined, depending on the side of placement.\n // The above code uses `isNaN` to check for null and undefined simultaneously.\n // Don’t remove `isNaN`, because either value can be falsy (0), causing a bug!\n const numberToPx = (number: number): string => (!isNaN(number) ? `${number}px` : '');\n\n if (arrowElement !== null)\n Object.assign(arrowElement.style, {\n position: 'absolute',\n left: numberToPx(arrowX),\n top: numberToPx(arrowY),\n [staticSide]: '1px',\n });\n\n this.mgPopover.setAttribute('data-placement', placement);\n });\n });\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * update popper position after props change on component did update hook to benefit from render ended\n /\n componentDidUpdate(): void {\n this.floatingUICleanup();\n }\n\n /\n Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Get windows to attach events\n this.windows = getWindows(window);\n // render mg-popover-content slot\n this.renderPopoverContent();\n this.validateCloseButton(this.closeButton);\n this.validateIdentifier(this.identifier);\n this.validateArrowHide(this.arrowHide);\n this.watchPlacement(this.placement);\n }\n\n /\n Check if component props are well configured on init\n /\n componentDidLoad(): void {\n // Get popover content\n this.mgPopover = this.element.querySelector(`#${this.identifier}`);\n\n // Get interactive element (first element without slot attribute)\n const interactiveElement: HTMLElement = this.element.querySelector(':not([slot])');\n\n // Add aria attributes\n interactiveElement.setAttribute('aria-controls', this.identifier);\n interactiveElement.setAttribute('aria-expanded', `${this.display}`);\n\n // Initial styles configuration\n Object.assign(this.mgPopover.style, {\n position: 'fixed',\n });\n\n // Create Floating UI instance\n this.setFloatingUI(interactiveElement);\n\n // Add resize observer\n [interactiveElement, this.mgPopoverContent].forEach(element => {\n new ResizeObserver(() => {\n this.floatingUICleanup();\n this.setFloatingUI(interactiveElement);\n }).observe(element);\n });\n\n // Add events to toggle display\n interactiveElement.addEventListener('click', () => {\n if (!this.disabled) this.display = !this.display;\n });\n\n this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }): void => {\n const target = event.target.closest('[popovertargetaction]');\n if (this.display === true && target !== null && target.getAttribute('popovertargetaction') === 'hide') {\n this.display = false;\n }\n });\n\n // Add events to hide popover\n this.element.addEventListener('keydown', e => {\n if (!this.disabled && e.code === 'Escape') {\n this.display = false;\n this.componentClose.emit();\n interactiveElement.focus();\n }\n });\n\n this.handleDisplay(this.display);\n }\n\n /\n Cleanup when component is disconnected\n /\n disconnectedCallback(): void {\n // Cleanup Floating UI instance\n this.floatingUICleanup();\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host>\n <slot></slot>\n <slot name=\"content\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-popover2.js","mappings":"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","names":["createID","isValideID","toString","getWindows"],"sources":["../styles/dist/components/mg-popover.css?tag=mg-popover&encapsulation=shadow","src/components/molecules/mg-popover/mg-popover.tsx"],"sourcesContent":["/!\n @prop --mg-c-popover-color-background: Defines the background color of the popover. Default value: `--mg-b-color-light`.\n * @prop --mg-c-popover-color-text: Defines the font color of the popover. Default value: `--mg-b-color-font-dark`.\n * @prop --mg-c-popover-title-font-size: Defines the font size of the popover title. Default value: `--mg-b-font-size-h5`.\n * @prop --mg-c-popover-padding-vertical: Defines the vertical padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-padding-horizontal: Defines the horizontal padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-max-width: Defines the max-width of the popover. Default value: `--mg-b-size-floating-element-max-width`.\n * @prop --mg-c-popover-min-width: Defines the min-width of the popover. Default value: `unset`.\n /:host{--mg-c-card-spacing: var(--mg-c-popover-padding-vertical, var(--mg-b-size-16)) var(--mg-c-popover-padding-horizontal, var(--mg-b-size-16));--mg-c-card-border: none;--mg-c-card-border-radius: var(--mg-b-size-radius);--mg-c-card-color-background: var(--mg-c-popover-color-background);position:relative;display:contents}:host::slotted(){display:inline-block}/# sourceMappingURL=mg-popover.css.map /\n","import { Component, Element, Host, h, Prop, Watch, EventEmitter, Event } from '@stencil/core';\nimport { createID, getWindows, isValideID, toString } from '@mgdis/stencil-helpers';\nimport { computePosition, autoUpdate, flip, shift, limitShift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { isFloatingUIPlacement, type PopoverPlacementType, sides, alignments } from './mg-popover.conf';\n\n/*\n @slot - Element that will display the popover\n * @slot content - popover content\n /\n@Component({\n tag: 'mg-popover',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-popover.css',\n shadow: true,\n})\nexport class MgPopover {\n /**********\n Internal \n *********/\n\n private mgPopover: HTMLElement;\n private mgPopoverContent: HTMLMgPopoverContentElement;\n private windows: Window[];\n private floatingUICleanup: ReturnType<typeof autoUpdate>;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgPopoverElement;\n\n /\n Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n /\n @Prop() identifier: string = createID('mg-popover');\n @Watch('identifier')\n validateIdentifier(newValue: MgPopover['identifier']): void {\n if (!isValideID(newValue)) {\n throw new Error(`<mg-popover> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n // use renderPopoverContent to update popover-content id\n this.renderPopoverContent();\n }\n\n /\n Popover placement\n /\n @Prop({ mutable: true }) placement: PopoverPlacementType = 'bottom';\n @Watch('placement')\n watchPlacement(newValue): void {\n if (!isFloatingUIPlacement(newValue)) this.placement = 'bottom';\n }\n\n /\n Hide popover arrow\n /\n @Prop() arrowHide = false;\n @Watch('arrowHide')\n validateArrowHide(newValue: MgPopover['arrowHide']): void {\n if (newValue) this.mgPopoverContent.dataset.arrowHide = '';\n else delete this.mgPopoverContent.dataset.arrowHide;\n }\n\n /\n Define if popover has a cross button\n /\n @Prop() closeButton = false;\n @Watch('closeButton')\n validateCloseButton(newValue: MgPopover['closeButton']): void {\n this.mgPopoverContent.closeButton = newValue;\n }\n\n /\n Display popover\n /\n @Prop({ mutable: true }) display = false;\n @Watch('display')\n handleDisplay(newValue: boolean): void {\n if (newValue) {\n this.show();\n } else {\n this.hide();\n }\n this.displayChange.emit(newValue);\n }\n\n /\n Disable popover\n /\n @Prop() disabled = false;\n\n /\n Emited event when display value change\n /\n @Event({ eventName: 'display-change' }) displayChange: EventEmitter<HTMLMgPopoverElement['display']>;\n\n /\n Emmited event when popover is closed\n /\n @Event({ eventName: 'component-close' }) componentClose: EventEmitter<void>;\n\n /\n Check if clicked outside of component\n * @param event - mouse event\n /\n private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n if (!this.disabled && event.target.closest('mg-popover') !== this.element && event.target.closest(`[data-mg-popover-guard=\"${this.identifier}\"]`) === null) {\n this.display = false;\n }\n };\n\n /\n Update aria-expanded attribute on interactive element\n * @param expanded - expanded state\n /\n private updateAriaExpanded = (expanded: boolean): void => {\n const interactiveElement = this.element.querySelector(':not([slot])');\n if (interactiveElement !== null) {\n interactiveElement.setAttribute('aria-expanded', String(expanded));\n }\n };\n\n /\n Show popover\n /\n private show = (): void => {\n // Make the popover visible\n this.mgPopover.dataset.show = '';\n // Update aria-expanded\n this.updateAriaExpanded(true);\n // hide when click outside\n // setTimeout is used to prevent event to trigger after creation\n setTimeout(() => {\n this.manageClickOutsideListeners('addEventListener');\n });\n };\n\n /\n Hide popover\n /\n private hide = (): void => {\n // Hide the popover\n this.mgPopover.removeAttribute('data-show');\n // Update aria-expanded\n this.updateAriaExpanded(false);\n // Remove event listener\n this.manageClickOutsideListeners('removeEventListener');\n };\n\n /\n Manage all clickOustside listeners\n * @param action - top process on elements listeners\n /\n private manageClickOutsideListeners = (action: 'removeEventListener' \| 'addEventListener'): void => {\n // clickOutside listeners need to bind windows\n // AND as shawdowDom content is not include on windows listeners `event.target` we need to include popover guard content DOM if it's a web-component\n // by doing this we can get and parse all needeed document DOM elements in clickOutside callback event.details.\n // This result in the givern junction :\n // Windows > document > [data-mg-popover-guard] + [data-mg-popover-guard] > shadowRoot = Windows > document > [data-mg-popover-guard] > shadowRoot\n const guardChildren = Array.from(document.querySelector(`[data-mg-popover-guard=\"${this.identifier}\"]`)?.shadowRoot?.children \|\| new Set());\n [...guardChildren, ...this.windows].forEach((element: Window \| HTMLElement) => {\n if (element !== null) {\n element[action]('click', this.clickOutside, false);\n }\n });\n };\n\n /\n Handle content hide event\n /\n private handleHideContent = (): void => {\n this.display = false;\n this.componentClose.emit();\n };\n\n /\n Render popover content element\n /\n private renderPopoverContent = (): void => {\n const mgPopoverContent = this.element.querySelector('mg-popover-content');\n if (mgPopoverContent === null) {\n this.mgPopoverContent = document.createElement('mg-popover-content');\n this.mgPopoverContent.setAttribute('slot', 'content');\n this.mgPopoverContent.setAttribute('id', this.identifier);\n this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);\n\n const arrow = document.createElement('div');\n arrow.setAttribute('slot', 'arrow');\n arrow.dataset.floatingArrow = '';\n this.mgPopoverContent.appendChild(arrow);\n\n // insert elements in DOM\n ['[slot=\"title\"]', '[slot=\"content\"]:not(mg-popover-content)'].forEach(slotType => {\n Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {\n this.mgPopoverContent.appendChild(slot);\n });\n });\n this.element.appendChild(this.mgPopoverContent);\n } else {\n mgPopoverContent.setAttribute('id', this.identifier);\n }\n };\n\n /\n Get alternative placements ordered by proximity to initial placement\n * First check fallbackPlacement attribute, then generate alternatives:\n * 1. Same side with different alignments (start, center, end)\n * 2. Other sides in order\n * @param placement - initial placement\n * @returns array of alternative placements\n /\n private getClosestPlacements = (placement: PopoverPlacementType): Placement[] => {\n // First check if fallbackPlacement attribute is defined\n const fallbackPlacements = (this.element.dataset.fallbackPlacement \|\| '')\n .split(',')\n .map(t => t.trim())\n .filter(isFloatingUIPlacement);\n if (fallbackPlacements.length > 0) return Array.from(new Set([...fallbackPlacements, ...sides]).values()).filter(isFloatingUIPlacement);\n\n // Extract side from placement (e.g. \"top\" from \"top-start\")\n const [side] = placement.split('-');\n\n // Generate placements for same side with different alignments\n const currentSidePlacements = alignments.map(alignment => (alignment !== null ? `${side}-${alignment}` : side));\n\n // Return unique placements: current side variants first, then other sides\n return Array.from(new Set([...currentSidePlacements, ...sides.filter(otherSide => otherSide !== side)])).filter(isFloatingUIPlacement);\n };\n\n /\n Set up Floating UI positioning and arrow behavior\n * @param interactiveElement - Element that triggers the popover\n /\n private setFloatingUI = (interactiveElement: HTMLElement): void => {\n this.floatingUICleanup = autoUpdate(interactiveElement, this.mgPopover, () => {\n computePosition(interactiveElement, this.mgPopover, {\n placement: this.placement as Placement,\n strategy: 'fixed',\n middleware: [\n offset(0),\n flip({\n fallbackPlacements: this.getClosestPlacements(this.placement),\n }),\n shift({\n limiter: limitShift(),\n }),\n arrow({\n element: this.mgPopover.querySelector('[data-floating-arrow]'),\n }),\n ],\n }).then(({ x, y, placement, middlewareData }) => {\n Object.assign(this.mgPopover.style, {\n position: 'fixed',\n top: '0',\n left: '0',\n transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`,\n });\n\n // Update arrow style\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[placement.split('-')[0]];\n\n const arrowElement: HTMLElement = this.mgPopover.querySelector('[data-floating-arrow]');\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n // https://floating-ui.com/docs/arrow\n // Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.\n // Due to this, either x or y will be undefined, depending on the side of placement.\n // The above code uses `isNaN` to check for null and undefined simultaneously.\n // Don't remove `isNaN`, because either value can be falsy (0), causing a bug!\n const numberToPx = (number: number): string => (!isNaN(number) ? `${number}px` : '');\n\n if (arrowElement !== null)\n Object.assign(arrowElement.style, {\n position: 'absolute',\n left: numberToPx(arrowX),\n top: numberToPx(arrowY),\n [staticSide]: '1px',\n });\n\n this.mgPopover.setAttribute('data-placement', placement);\n });\n });\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * update popper position after props change on component did update hook to benefit from render ended\n /\n componentDidUpdate(): void {\n this.floatingUICleanup();\n }\n\n /\n Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Get windows to attach events\n this.windows = getWindows(window);\n // render mg-popover-content slot\n this.renderPopoverContent();\n this.validateCloseButton(this.closeButton);\n this.validateIdentifier(this.identifier);\n this.validateArrowHide(this.arrowHide);\n this.watchPlacement(this.placement);\n }\n\n /\n Check if component props are well configured on init\n /\n componentDidLoad(): void {\n // Get popover content\n this.mgPopover = this.element.querySelector(`#${this.identifier}`);\n\n // Get interactive element (first element without slot attribute)\n const interactiveElement: HTMLElement = this.element.querySelector(':not([slot])');\n\n // Add aria attributes\n interactiveElement.setAttribute('aria-controls', this.identifier);\n interactiveElement.setAttribute('aria-expanded', `${this.display}`);\n\n // Initial styles configuration\n Object.assign(this.mgPopover.style, {\n position: 'fixed',\n });\n\n // Create Floating UI instance\n this.setFloatingUI(interactiveElement);\n\n // Add resize observer\n [interactiveElement, this.mgPopoverContent].forEach(element => {\n new ResizeObserver(() => {\n this.floatingUICleanup();\n this.setFloatingUI(interactiveElement);\n }).observe(element);\n });\n\n // Add events to toggle display\n interactiveElement.addEventListener('click', () => {\n if (!this.disabled) this.display = !this.display;\n });\n\n this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }): void => {\n const target = event.target.closest('[popovertargetaction]');\n if (this.display === true && target !== null && target.getAttribute('popovertargetaction') === 'hide') {\n this.display = false;\n }\n });\n\n // Add events to hide popover\n this.element.addEventListener('keydown', e => {\n if (!this.disabled && e.code === 'Escape') {\n this.display = false;\n this.componentClose.emit();\n interactiveElement.focus();\n }\n });\n\n this.handleDisplay(this.display);\n }\n\n /\n Cleanup when component is disconnected\n /\n disconnectedCallback(): void {\n // Cleanup Floating UI instance\n this.floatingUICleanup();\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host>\n <slot></slot>\n <slot name=\"content\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-table.d.ts ADDED Viewed

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

package/dist/components/mg-table.js ADDED Viewed

@@ -0,0 +1,320 @@
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { Z as Ze, V as Ve, m as me, G as Ge } from './index.es.js';
+import { i as initLocales } from './index2.js';
+import { d as defineCustomElement$2 } from './mg-icon2.js';
+/**
+ * Sizes
+ */
+// Define possible sizes
+const sizes = ['small', 'medium', 'large', 'xlarge'];
+/**
+ * Columns
+ */
+// Define possible text alignments
+const textAlignments = ['left', 'center', 'right'];
+// Define possible data types
+const dataTypes = ['string', 'numeric', 'date'];
+const mgTableCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}@font-face{font-family:\"Open Sans\";src:url(\"fonts/OpenSans-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:600;src:url(\"fonts/OpenSans-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:700;src:url(\"fonts/OpenSans-Bold.ttf\") format(\"truetype\")}p{margin:0}p+p{margin-top:var(--mg-b-size-8)}h1,.mg-u-h1{font-family:var(--mg-b-font-family-heading);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-weight:bold}h1,.mg-u-h1{font-size:var(--mg-b-font-size-h1)}h2,.mg-u-h2{font-size:var(--mg-b-font-size-h2)}h3,.mg-u-h3{font-size:var(--mg-b-font-size-h3)}h4,.mg-u-h4{font-size:var(--mg-b-font-size-h4)}h5,.mg-u-h5{font-size:var(--mg-b-font-size-h5)}h6,.mg-u-h6{font-size:var(--mg-b-font-size-h6)}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}small{font-size:var(--mg-b-small-font-size)}.mg-u-text-left{text-align:left !important}.mg-u-text-center{text-align:center !important}.mg-u-text-right{text-align:right !important}.mg-c-table{--mg-c-table-cell-spacing:var(--mg-b-size-8) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-40);--mg-c-table-header-cell-height:calc(var(--mg-b-size-min-height) + 2 * var(--mg-b-size-8));overflow:hidden;border:none;border-radius:var(--mg-b-size-8);background:var(--mg-b-color-light);border-collapse:separate;border-spacing:0;color:var(--mg-b-color-dark)}.mg-c-table td,.mg-c-table th{height:var(--mg-c-table-cell-height);box-sizing:border-box;padding:var(--mg-c-table-cell-spacing);text-align:start}.mg-c-table thead td,.mg-c-table th{font-weight:600}.mg-c-table thead{height:var(--mg-c-table-header-cell-height);background-color:var(--mg-b-color-app);color:var(--mg-b-color-light)}.mg-c-table :not(thead) tr:nth-child(even){background:color-mix(in srgb, var(--mg-b-color-app), transparent 80%)}.mg-c-table.mg-c-table--size-small{--mg-c-table-cell-spacing:var(--mg-b-size-4) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-32);--mg-c-table-header-cell-height:var(--mg-b-size-32)}.mg-c-table.mg-c-table--size-large{--mg-c-table-cell-height:var(--mg-c-table-header-cell-height)}.mg-c-table.mg-c-table--size-xlarge{--mg-c-table-cell-spacing:var(--mg-b-size-12) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-64);--mg-c-table-header-cell-height:var(--mg-b-size-64)}.mg-c-table.mg-c-table--full-width{width:100%}.mg-c-table-wrapper{overflow:auto}.mg-c-table thead td,.mg-c-table thead th{position:relative}.mg-c-table thead td .mg-c-table__sort-button,.mg-c-table thead th .mg-c-table__sort-button{padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600}.mg-c-table thead td .mg-c-table__sort-button::after,.mg-c-table thead th .mg-c-table__sort-button::after{position:absolute;content:\"\";inset:0}.mg-c-table thead td .mg-c-table__sort-button:hover,.mg-c-table thead th .mg-c-table__sort-button:hover{cursor:pointer}.mg-c-table thead td .mg-c-table__sort-button mg-icon,.mg-c-table thead th .mg-c-table__sort-button mg-icon{margin-left:var(--mg-b-size-4)}.mg-c-table thead td:has(.mg-c-table__sort-button):hover,.mg-c-table thead td[aria-sort=descending],.mg-c-table thead td[aria-sort=ascending],.mg-c-table thead th:has(.mg-c-table__sort-button):hover,.mg-c-table thead th[aria-sort=descending],.mg-c-table thead th[aria-sort=ascending]{background-color:color-mix(in srgb, var(--mg-b-color-app), black 10%)}";
+const MgTableStyle0 = mgTableCss;
+/**
+ * Check if value is a valid align object
+ * @param newValue - New value
+ * @returns True if value is a valid align object
+ */
+const isValidColumnsObject = (newValue) =>
+// ensure newValue is an object
+typeof newValue === 'object' &&
+    !Array.isArray(newValue) &&
+    // Ensure every property is well formatted
+    Object.entries(newValue).every(([key, value]) =>
+    // ensure key is a number
+    !isNaN(parseInt(key)) &&
+        // ensure value is an object
+        typeof value === 'object' &&
+        !Array.isArray(value) &&
+        // ensure value has at least one of the following properties
+        ((value.align !== undefined && textAlignments.includes(value.align)) ||
+            (value.sortable !== undefined && typeof value.sortable === 'boolean') ||
+            (value.datatype !== undefined && dataTypes.includes(value.datatype))) &&
+        // ensure no extra properties are present
+        Object.keys(value).every(key => ['align', 'sortable', 'datatype'].includes(key)));
+/**
+ * Compare values
+ * @param firstValue - First value
+ * @param secondValue - Second value
+ * @param descending - Define descending order
+ * @param datatype - Data type
+ * @returns Comparison result
+ * @example
+ * compareValues('a', 'b', false, 'string'); // -1
+ */
+const compareValues = (firstValue, secondValue, descending, datatype) => {
+    if (descending) {
+        const temp = firstValue;
+        firstValue = secondValue;
+        secondValue = temp;
+    }
+    if (datatype === 'date') {
+        return new Date(firstValue).getTime() - new Date(secondValue).getTime();
+    }
+    return firstValue.localeCompare(secondValue, undefined, { numeric: datatype === 'numeric' });
+};
+const MgTable$1 = /*@__PURE__*/ proxyCustomElement(class MgTable extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // Classes
+        this.componentClass = 'mg-c-table';
+        this.componentWrapperClass = 'mg-c-table-wrapper';
+        this.classFullWidth = 'mg-c-table--full-width';
+        // Alignment stylesheet
+        this.alignmentStylesheet = new CSSStyleSheet();
+        /**
+         * Define table size
+         */
+        this.size = 'medium';
+        /**
+         * Define if table fits its parent element
+         */
+        this.fullWidth = false;
+        /**
+         * Class collection
+         */
+        this.classCollection = new Ze([this.componentClass]);
+    }
+    watchSize(newValue, oldValue) {
+        if (!sizes.includes(newValue)) {
+            throw new Error(`<mg-table> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Ve(newValue)}.`);
+        }
+        else {
+            if (oldValue !== undefined) {
+                this.classCollection.delete(`mg-c-table--size-${oldValue}`);
+            }
+            this.classCollection.add(`mg-c-table--size-${newValue}`);
+        }
+    }
+    watchFullWidth(newValue) {
+        if (newValue) {
+            this.classCollection.add(this.classFullWidth);
+        }
+        else {
+            this.classCollection.delete(this.classFullWidth);
+        }
+    }
+    watchColumns(newValue) {
+        if (newValue !== undefined && !isValidColumnsObject(newValue)) {
+            throw new Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${Ve(newValue)}.`);
+        }
+    }
+    /**
+     * Render Table
+     * @param table - Table element
+     */
+    renderTable(table) {
+        let isSortable = false;
+        // Remove table classes
+        table.className = '';
+        // Add table classes
+        table.classList.add(...this.classCollection.classes);
+        // Set columns based on columns prop
+        if (this.columns !== undefined) {
+            // Store original rows
+            const rowsDefault = Array.from(table.querySelectorAll('tbody tr'));
+            // Apply columns settings
+            Object.entries(this.columns).forEach(([key, value]) => {
+                // Add alignment to stylesheet
+                if (value.align !== undefined) {
+                    this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:${value.align}}}`);
+                }
+                // if align is not defined and datatype is number, align right
+                else if (value.datatype === 'numeric') {
+                    this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:right}}`);
+                }
+                // Define if column is sortable
+                if (value.sortable) {
+                    isSortable = true;
+                    // Add sortable class to table header
+                    const sortableHeader = table.querySelector(`thead td:nth-child(${key}),thead th:nth-child(${key})`);
+                    // Create button
+                    const button = document.createElement('button');
+                    button.classList.add('mg-c-table__sort-button');
+                    // Append button to header
+                    const sortableHeaderContent = sortableHeader.innerHTML;
+                    sortableHeader.innerHTML = '';
+                    button.innerHTML = sortableHeaderContent;
+                    // Set icon
+                    const icon = document.createElement('mg-icon');
+                    icon.setAttribute('icon', 'arrows-up-down');
+                    // Append icon to button
+                    button.append(icon);
+                    sortableHeader.append(button);
+                    // Add event listener
+                    button.addEventListener('click', () => {
+                        // Reset aria pressed
+                        table.querySelectorAll(`thead td:not(:nth-child(${key})) [aria-pressed],thead th:not(:nth-child(${key})) [aria-pressed]`).forEach(ariaPressed => {
+                            ariaPressed.removeAttribute('aria-pressed');
+                            ariaPressed.querySelector('mg-icon').setAttribute('icon', 'arrows-up-down');
+                        });
+                        // Reset aria sort
+                        table.querySelectorAll(`thead td:not(:nth-child(${key}))[aria-sort],thead th:not(:nth-child(${key}))[aria-sort]`).forEach(ariaSort => {
+                            ariaSort.removeAttribute('aria-sort');
+                        });
+                        // Set aria pressed
+                        button.setAttribute('aria-pressed', 'true');
+                        // Manage sort order
+                        // Get sort order
+                        let sortOrder = sortableHeader.getAttribute('aria-sort');
+                        // First click sort asc
+                        if ([null, 'none'].includes(sortOrder)) {
+                            sortableHeader.setAttribute('aria-sort', 'ascending');
+                        }
+                        // Second click sort desc
+                        else if (sortOrder === 'ascending') {
+                            sortableHeader.setAttribute('aria-sort', 'descending');
+                        }
+                        // Third click remove sort
+                        else {
+                            sortableHeader.setAttribute('aria-sort', 'none');
+                        }
+                        // Update sort order
+                        sortOrder = sortableHeader.getAttribute('aria-sort');
+                        // Update button icon
+                        const icon = button.querySelector('mg-icon');
+                        let iconType = 'arrows-up-down';
+                        if (sortOrder === 'ascending') {
+                            iconType = 'arrow-up';
+                        }
+                        else if (sortOrder === 'descending') {
+                            iconType = 'arrow-down';
+                        }
+                        icon.setAttribute('icon', iconType);
+                        // If sort order is none, return to original order
+                        if (sortOrder === 'none') {
+                            // Append rows to table
+                            rowsDefault.forEach(row => table.querySelector('tbody').append(row));
+                            return;
+                        }
+                        // Set a copy of rows
+                        const rows = Array.from(table.querySelectorAll('tbody tr'));
+                        // Sort rows
+                        rows.sort((a, b) => {
+                            var _a, _b;
+                            // Get cells
+                            const cellA = a.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);
+                            const cellB = b.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);
+                            // Get cell values
+                            const cellValueA = (_a = cellA.dataset.sort) !== null && _a !== void 0 ? _a : cellA.textContent;
+                            const cellValueB = (_b = cellB.dataset.sort) !== null && _b !== void 0 ? _b : cellB.textContent;
+                            // Sort cells based on sort order
+                            return compareValues(cellValueA, cellValueB, sortOrder === 'descending', value.datatype);
+                        });
+                        // Append rows to table
+                        rows.forEach(row => table.querySelector('tbody').append(row));
+                    });
+                }
+            });
+        }
+        // Add alignment to columns
+        this.element.shadowRoot.adoptedStyleSheets = [...this.element.shadowRoot.adoptedStyleSheets, this.alignmentStylesheet];
+        // Create div wrapper for responsive behavior
+        const divWrapper = document.createElement('div');
+        divWrapper.setAttribute('class', this.componentWrapperClass);
+        divWrapper.setAttribute('tabindex', '0');
+        divWrapper.setAttribute('role', 'region');
+        // Get table title
+        let captionTable = table.querySelector('caption');
+        // If table is sortable we must add a caption
+        if (captionTable === null && isSortable) {
+            captionTable = document.createElement('caption');
+            table.prepend(captionTable);
+        }
+        if (captionTable !== null) {
+            // Ensure caption is not visible (otherwhise the table does not have rounded corners)
+            captionTable.className = 'mg-u-visually-hidden';
+            // Link caption to div
+            if (!me(captionTable.id)) {
+                captionTable.setAttribute('id', Ge(`${this.componentClass}-caption`));
+            }
+            divWrapper.setAttribute('aria-labelledby', captionTable.id);
+            // Add sortable caption if neeeded
+            if (isSortable) {
+                captionTable.innerHTML = `${captionTable.innerHTML} ${this.messages.table.sortableCaption}`.trim();
+            }
+        }
+        divWrapper.append(table);
+        // Remove existing table from shadow root
+        const existingTable = this.element.shadowRoot.querySelector(`.${this.componentWrapperClass}`);
+        if (existingTable !== null) {
+            existingTable.remove();
+        }
+        // Append table
+        this.element.shadowRoot.append(divWrapper);
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    componentWillLoad() {
+        this.messages = initLocales(this.element).messages;
+    }
+    /**
+     * Set variables and validate props
+     */
+    componentDidLoad() {
+        this.watchSize(this.size);
+        this.watchFullWidth(this.fullWidth);
+        this.watchColumns(this.columns);
+        this.renderTable(this.element.querySelector('table'));
+    }
+    /**
+     * Update table
+     */
+    componentWillUpdate() {
+        this.renderTable(this.element.shadowRoot.querySelector('table'));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "size": ["watchSize"],
+        "fullWidth": ["watchFullWidth"],
+        "columns": ["watchColumns"]
+    }; }
+    static get style() { return MgTableStyle0; }
+}, [1, "mg-table", {
+        "size": [1],
+        "fullWidth": [4, "full-width"],
+        "columns": [16],
+        "classCollection": [32]
+    }, undefined, {
+        "size": ["watchSize"],
+        "fullWidth": ["watchFullWidth"],
+        "columns": ["watchColumns"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-table", "mg-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-table":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgTable$1);
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+const MgTable = MgTable$1;
+const defineCustomElement = defineCustomElement$1;
+export { MgTable, defineCustomElement };
+//# sourceMappingURL=mg-table.js.map

package/dist/components/mg-table.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-table.js","mappings":";;;;;AACA;;;AAGA;AACO,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAU,CAAC;AAGrE;;;AAGA;AACO,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAC;AACnE;AACO,MAAM,SAAS,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAU;;ACd/D,MAAM,UAAU,GAAG,gmIAAgmI,CAAC;AACpnI,sBAAe,UAAU;;ACIzB;;;;;AAKA,MAAM,oBAAoB,GAAG,CAAC,QAAqB;AACjD;AACA,OAAO,QAAQ,KAAK,QAAQ;IAC5B,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;;IAExB,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CAC5B,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC;;IAEX,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;;QAErB,OAAO,KAAK,KAAK,QAAQ;QACzB,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;;SAEpB,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;aAChE,KAAK,CAAC,QAAQ,KAAK,SAAS,IAAI,OAAO,KAAK,CAAC,QAAQ,KAAK,SAAS,CAAC;aACpE,KAAK,CAAC,QAAQ,KAAK,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;;QAEvE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CACnF,CAAC;AAEJ;;;;;;;;;;AAUA,MAAM,aAAa,GAAG,CAAC,UAAkB,EAAE,WAAmB,EAAE,UAAmB,EAAE,QAAuB;IAC1G,IAAI,UAAU,EAAE;QACd,MAAM,IAAI,GAAG,UAAU,CAAC;QACxB,UAAU,GAAG,WAAW,CAAC;QACzB,WAAW,GAAG,IAAI,CAAC;KACpB;IACD,IAAI,QAAQ,KAAK,MAAM,EAAE;QACvB,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,EAAE,CAAC;KACzE;IACD,OAAO,UAAU,CAAC,aAAa,CAAC,WAAW,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,KAAK,SAAS,EAAE,CAAC,CAAC;AAC/F,CAAC,CAAC;MAUWA,SAAO;IALpB;;;;;QAamB,mBAAc,GAAG,YAAY,CAAC;QAC9B,0BAAqB,GAAG,oBAAoB,CAAC;QAC7C,mBAAc,GAAG,wBAAwB,CAAC;;QAGnD,wBAAmB,GAAG,IAAI,aAAa,EAAE,CAAC;;;;QAc1C,SAAI,GAAkB,QAAQ,CAAC;;;;QAgB/B,cAAS,GAAG,KAAK,CAAC;;;;QAwBjB,oBAAe,GAAc,IAAIC,EAAS,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;KAoM5E;IA1OC,SAAS,CAAC,QAAyB,EAAE,QAA0B;QAC7D,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;YAC7B,MAAM,IAAI,KAAK,CAAC,0CAA0C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmBC,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SACrH;aAAM;YACL,IAAI,QAAQ,KAAK,SAAS,EAAE;gBAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,oBAAoB,QAAQ,EAAE,CAAC,CAAC;aAC7D;YACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,oBAAoB,QAAQ,EAAE,CAAC,CAAC;SAC1D;KACF;IAOD,cAAc,CAAC,QAA8B;QAC3C,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAC/C;aAAM;YACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAClD;KACF;IAOD,YAAY,CAAC,QAAqB;QAChC,IAAI,QAAQ,KAAK,SAAS,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAE;YAC7D,MAAM,IAAI,KAAK,CAAC,yEAAyEA,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SACjH;KACF;;;;;IAWO,WAAW,CAAC,KAAuB;QACzC,IAAI,UAAU,GAAG,KAAK,CAAC;;QAEvB,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;;QAErB,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;;QAGrD,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE;;YAE9B,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;;YAGnE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC;;gBAEhD,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE;oBAC7B,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,cAAc,iBAAiB,GAAG,kBAAkB,GAAG,gBAAgB,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC;iBACtI;;qBAEI,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,EAAE;oBACrC,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,cAAc,iBAAiB,GAAG,kBAAkB,GAAG,sBAAsB,CAAC,CAAC;iBAC7H;;gBAGD,IAAI,KAAK,CAAC,QAAQ,EAAE;oBAClB,UAAU,GAAG,IAAI,CAAC;;oBAElB,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,sBAAsB,GAAG,wBAAwB,GAAG,GAAG,CAAC,CAAC;;oBAGpG,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBAChD,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;;oBAGhD,MAAM,qBAAqB,GAAG,cAAc,CAAC,SAAS,CAAC;oBACvD,cAAc,CAAC,SAAS,GAAG,EAAE,CAAC;oBAC9B,MAAM,CAAC,SAAS,GAAG,qBAAqB,CAAC;;oBAGzC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;oBAC/C,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;;oBAG5C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;oBACpB,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;;oBAG9B,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE;;wBAE/B,KAAK,CAAC,gBAAgB,CAAC,2BAA2B,GAAG,6CAA6C,GAAG,mBAAmB,CAAC,CAAC,OAAO,CAAC,WAAW;4BAC3I,WAAW,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;4BAC5C,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;yBAC7E,CAAC,CAAC;;wBAEH,KAAK,CAAC,gBAAgB,CAAC,2BAA2B,GAAG,yCAAyC,GAAG,eAAe,CAAC,CAAC,OAAO,CAAC,QAAQ;4BAChI,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;yBACvC,CAAC,CAAC;;wBAGH,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;;;wBAI5C,IAAI,SAAS,GAAG,cAAc,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;;wBAGzD,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;4BACtC,cAAc,CAAC,YAAY,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;yBACvD;;6BAEI,IAAI,SAAS,KAAK,WAAW,EAAE;4BAClC,cAAc,CAAC,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;yBACxD;;6BAEI;4BACH,cAAc,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;yBAClD;;wBAGD,SAAS,GAAG,cAAc,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;;wBAGrD,MAAM,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;wBAC7C,IAAI,QAAQ,GAAG,gBAAgB,CAAC;wBAChC,IAAI,SAAS,KAAK,WAAW,EAAE;4BAC7B,QAAQ,GAAG,UAAU,CAAC;yBACvB;6BAAM,IAAI,SAAS,KAAK,YAAY,EAAE;4BACrC,QAAQ,GAAG,YAAY,CAAC;yBACzB;wBACD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;;wBAGpC,IAAI,SAAS,KAAK,MAAM,EAAE;;4BAExB,WAAW,CAAC,OAAO,CAAC,GAAG,IAAI,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;4BACrE,OAAO;yBACR;;wBAGD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;;wBAG5D,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;;;4BAEb,MAAM,KAAK,GAAyB,CAAC,CAAC,aAAa,CAAC,gBAAgB,GAAG,kBAAkB,GAAG,GAAG,CAAC,CAAC;4BACjG,MAAM,KAAK,GAAyB,CAAC,CAAC,aAAa,CAAC,gBAAgB,GAAG,kBAAkB,GAAG,GAAG,CAAC,CAAC;;4BAGjG,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,OAAO,CAAC,IAAI,mCAAI,KAAK,CAAC,WAAW,CAAC;4BAC3D,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,OAAO,CAAC,IAAI,mCAAI,KAAK,CAAC,WAAW,CAAC;;4BAG3D,OAAO,aAAa,CAAC,UAAU,EAAE,UAAU,EAAE,SAAS,KAAK,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;yBAC1F,CAAC,CAAC;;wBAGH,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;qBAC/D,CAAC,CAAC;iBACJ;aACF,CAAC,CAAC;SACJ;;QAGD,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,kBAAkB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;;QAGvH,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjD,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;QAC7D,UAAU,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACzC,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;;QAG1C,IAAI,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;;QAGlD,IAAI,YAAY,KAAK,IAAI,IAAI,UAAU,EAAE;YACvC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YACjD,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;SAC7B;QAED,IAAI,YAAY,KAAK,IAAI,EAAE;;YAEzB,YAAY,CAAC,SAAS,GAAG,sBAAsB,CAAC;;YAGhD,IAAI,CAACC,EAAa,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE;gBACnC,YAAY,CAAC,YAAY,CAAC,IAAI,EAAEC,EAAQ,CAAC,GAAG,IAAI,CAAC,cAAc,UAAU,CAAC,CAAC,CAAC;aAC7E;YACD,UAAU,CAAC,YAAY,CAAC,iBAAiB,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC;;YAG5D,IAAI,UAAU,EAAE;gBACd,YAAY,CAAC,SAAS,GAAG,GAAG,YAAY,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC,IAAI,EAAE,CAAC;aACpG;SACF;QACD,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;QAGzB,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC;QAC9F,IAAI,aAAa,KAAK,IAAI,EAAE;YAC1B,aAAa,CAAC,MAAM,EAAE,CAAC;SACxB;;QAED,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;KAC5C;;;;IAMD,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;KACpD;;;;IAKD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACpC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;KACvD;;;;IAKD,mBAAmB;QACjB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;KAClE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgTable","ClassList","toString","isValidString","createID"],"sources":["src/components/molecules/mg-table/mg-table.conf.ts","../styles/dist/components/mg-table.css?tag=mg-table&encapsulation=shadow","src/components/molecules/mg-table/mg-table.tsx"],"sourcesContent":["import type { Size } from '../../../types';\n/**\n * Sizes\n */\n// Define possible sizes\nexport const sizes = ['small', 'medium', 'large', 'xlarge'] as const;\n// Define Table size type and ensure it is a valid size\nexport type TableSizeType = Size & (typeof sizes)[number];\n/**\n * Columns\n */\n// Define possible text alignments\nexport const textAlignments = ['left', 'center', 'right'] as const;\n// Define possible data types\nexport const dataTypes = ['string', 'numeric', 'date'] as const;\n// Define possible data types\nexport type datatypesType = (typeof dataTypes)[number];\n// Define columns type\nexport type ColumnsType = {\n [key: number]: { align?: (typeof textAlignments)[number]; sortable?: boolean; datatype?: datatypesType };\n};\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}@font-face{font-family:\"Open Sans\";src:url(\"fonts/OpenSans-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:600;src:url(\"fonts/OpenSans-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:700;src:url(\"fonts/OpenSans-Bold.ttf\") format(\"truetype\")}p{margin:0}p+p{margin-top:var(--mg-b-size-8)}h1,.mg-u-h1{font-family:var(--mg-b-font-family-heading);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-weight:bold}h1,.mg-u-h1{font-size:var(--mg-b-font-size-h1)}h2,.mg-u-h2{font-size:var(--mg-b-font-size-h2)}h3,.mg-u-h3{font-size:var(--mg-b-font-size-h3)}h4,.mg-u-h4{font-size:var(--mg-b-font-size-h4)}h5,.mg-u-h5{font-size:var(--mg-b-font-size-h5)}h6,.mg-u-h6{font-size:var(--mg-b-font-size-h6)}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}small{font-size:var(--mg-b-small-font-size)}.mg-u-text-left{text-align:left !important}.mg-u-text-center{text-align:center !important}.mg-u-text-right{text-align:right !important}.mg-c-table{--mg-c-table-cell-spacing: var(--mg-b-size-8) var(--mg-b-size-16);--mg-c-table-cell-height: var(--mg-b-size-40);--mg-c-table-header-cell-height: calc(var(--mg-b-size-min-height) + 2 * var(--mg-b-size-8));overflow:hidden;border:none;border-radius:var(--mg-b-size-8);background:var(--mg-b-color-light);border-collapse:separate;border-spacing:0;color:var(--mg-b-color-dark)}.mg-c-table td,.mg-c-table th{height:var(--mg-c-table-cell-height);box-sizing:border-box;padding:var(--mg-c-table-cell-spacing);text-align:start}.mg-c-table thead td,.mg-c-table th{font-weight:600}.mg-c-table thead{height:var(--mg-c-table-header-cell-height);background-color:var(--mg-b-color-app);color:var(--mg-b-color-light)}.mg-c-table :not(thead) tr:nth-child(even){background:color-mix(in srgb, var(--mg-b-color-app), transparent 80%)}.mg-c-table.mg-c-table--size-small{--mg-c-table-cell-spacing: var(--mg-b-size-4) var(--mg-b-size-16);--mg-c-table-cell-height: var(--mg-b-size-32);--mg-c-table-header-cell-height: var(--mg-b-size-32)}.mg-c-table.mg-c-table--size-large{--mg-c-table-cell-height: var(--mg-c-table-header-cell-height)}.mg-c-table.mg-c-table--size-xlarge{--mg-c-table-cell-spacing: var(--mg-b-size-12) var(--mg-b-size-16);--mg-c-table-cell-height: var(--mg-b-size-64);--mg-c-table-header-cell-height: var(--mg-b-size-64)}.mg-c-table.mg-c-table--full-width{width:100%}.mg-c-table-wrapper{overflow:auto}.mg-c-table thead td,.mg-c-table thead th{position:relative}.mg-c-table thead td .mg-c-table__sort-button,.mg-c-table thead th .mg-c-table__sort-button{padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600}.mg-c-table thead td .mg-c-table__sort-button::after,.mg-c-table thead th .mg-c-table__sort-button::after{position:absolute;content:\"\";inset:0}.mg-c-table thead td .mg-c-table__sort-button:hover,.mg-c-table thead th .mg-c-table__sort-button:hover{cursor:pointer}.mg-c-table thead td .mg-c-table__sort-button mg-icon,.mg-c-table thead th .mg-c-table__sort-button mg-icon{margin-left:var(--mg-b-size-4)}.mg-c-table thead td:has(.mg-c-table__sort-button):hover,.mg-c-table thead td[aria-sort=descending],.mg-c-table thead td[aria-sort=ascending],.mg-c-table thead th:has(.mg-c-table__sort-button):hover,.mg-c-table thead th[aria-sort=descending],.mg-c-table thead th[aria-sort=ascending]{background-color:color-mix(in srgb, var(--mg-b-color-app), black 10%)}/*# sourceMappingURL=mg-table.css.map */\n","import { Component, Element, State, Prop, Watch } from '@stencil/core';\nimport { ClassList, toString, createID, isValidString } from '@mgdis/stencil-helpers';\nimport { type TableSizeType, type ColumnsType, type datatypesType, textAlignments, dataTypes, sizes } from './mg-table.conf';\nimport { initLocales } from '../../../locales';\n\n/**\n * Check if value is a valid align object\n * @param newValue - New value\n * @returns True if value is a valid align object\n */\nconst isValidColumnsObject = (newValue: ColumnsType): boolean =>\n // ensure newValue is an object\n typeof newValue === 'object' &&\n !Array.isArray(newValue) &&\n // Ensure every property is well formatted\n Object.entries(newValue).every(\n ([key, value]) =>\n // ensure key is a number\n !isNaN(parseInt(key)) &&\n // ensure value is an object\n typeof value === 'object' &&\n !Array.isArray(value) &&\n // ensure value has at least one of the following properties\n ((value.align !== undefined && textAlignments.includes(value.align)) ||\n (value.sortable !== undefined && typeof value.sortable === 'boolean') ||\n (value.datatype !== undefined && dataTypes.includes(value.datatype))) &&\n // ensure no extra properties are present\n Object.keys(value).every(key => ['align', 'sortable', 'datatype'].includes(key)),\n );\n\n/**\n * Compare values\n * @param firstValue - First value\n * @param secondValue - Second value\n * @param descending - Define descending order\n * @param datatype - Data type\n * @returns Comparison result\n * @example\n * compareValues('a', 'b', false, 'string'); // -1\n */\nconst compareValues = (firstValue: string, secondValue: string, descending: boolean, datatype: datatypesType): number => {\n if (descending) {\n const temp = firstValue;\n firstValue = secondValue;\n secondValue = temp;\n }\n if (datatype === 'date') {\n return new Date(firstValue).getTime() - new Date(secondValue).getTime();\n }\n return firstValue.localeCompare(secondValue, undefined, { numeric: datatype === 'numeric' });\n};\n\n/**\n * @slot - Table content\n */\n@Component({\n tag: 'mg-table',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-table.css',\n shadow: true,\n})\nexport class MgTable {\n /************\n * Internal *\n ************/\n\n private messages;\n\n // Classes\n private readonly componentClass = 'mg-c-table';\n private readonly componentWrapperClass = 'mg-c-table-wrapper';\n private readonly classFullWidth = 'mg-c-table--full-width';\n\n // Alignment stylesheet\n private alignmentStylesheet = new CSSStyleSheet();\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgTableElement;\n\n /**\n * Define table size\n */\n @Prop() size: TableSizeType = 'medium';\n @Watch('size')\n watchSize(newValue: MgTable['size'], oldValue?: MgTable['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<mg-table> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-table--size-${oldValue}`);\n }\n this.classCollection.add(`mg-c-table--size-${newValue}`);\n }\n }\n\n /**\n * Define if table fits its parent element\n */\n @Prop() fullWidth = false;\n @Watch('fullWidth')\n watchFullWidth(newValue: MgTable['fullWidth']): void {\n if (newValue) {\n this.classCollection.add(this.classFullWidth);\n } else {\n this.classCollection.delete(this.classFullWidth);\n }\n }\n\n /**\n * Define column properties\n */\n @Prop() columns: ColumnsType;\n @Watch('columns')\n watchColumns(newValue: ColumnsType): void {\n if (newValue !== undefined && !isValidColumnsObject(newValue)) {\n throw new Error(`<mg-table> prop \"columns\" must be a ColumnsType object. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Class collection\n */\n @State() classCollection: ClassList = new ClassList([this.componentClass]);\n\n /**\n * Render Table\n * @param table - Table element\n */\n private renderTable(table: HTMLTableElement): void {\n let isSortable = false;\n // Remove table classes\n table.className = '';\n // Add table classes\n table.classList.add(...this.classCollection.classes);\n\n // Set columns based on columns prop\n if (this.columns !== undefined) {\n // Store original rows\n const rowsDefault = Array.from(table.querySelectorAll('tbody tr'));\n\n // Apply columns settings\n Object.entries(this.columns).forEach(([key, value]) => {\n // Add alignment to stylesheet\n if (value.align !== undefined) {\n this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:${value.align}}}`);\n }\n // if align is not defined and datatype is number, align right\n else if (value.datatype === 'numeric') {\n this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:right}}`);\n }\n\n // Define if column is sortable\n if (value.sortable) {\n isSortable = true;\n // Add sortable class to table header\n const sortableHeader = table.querySelector(`thead td:nth-child(${key}),thead th:nth-child(${key})`);\n\n // Create button\n const button = document.createElement('button');\n button.classList.add('mg-c-table__sort-button');\n\n // Append button to header\n const sortableHeaderContent = sortableHeader.innerHTML;\n sortableHeader.innerHTML = '';\n button.innerHTML = sortableHeaderContent;\n\n // Set icon\n const icon = document.createElement('mg-icon');\n icon.setAttribute('icon', 'arrows-up-down');\n\n // Append icon to button\n button.append(icon);\n sortableHeader.append(button);\n\n // Add event listener\n button.addEventListener('click', (): void => {\n // Reset aria pressed\n table.querySelectorAll(`thead td:not(:nth-child(${key})) [aria-pressed],thead th:not(:nth-child(${key})) [aria-pressed]`).forEach(ariaPressed => {\n ariaPressed.removeAttribute('aria-pressed');\n ariaPressed.querySelector('mg-icon').setAttribute('icon', 'arrows-up-down');\n });\n // Reset aria sort\n table.querySelectorAll(`thead td:not(:nth-child(${key}))[aria-sort],thead th:not(:nth-child(${key}))[aria-sort]`).forEach(ariaSort => {\n ariaSort.removeAttribute('aria-sort');\n });\n\n // Set aria pressed\n button.setAttribute('aria-pressed', 'true');\n\n // Manage sort order\n // Get sort order\n let sortOrder = sortableHeader.getAttribute('aria-sort');\n\n // First click sort asc\n if ([null, 'none'].includes(sortOrder)) {\n sortableHeader.setAttribute('aria-sort', 'ascending');\n }\n // Second click sort desc\n else if (sortOrder === 'ascending') {\n sortableHeader.setAttribute('aria-sort', 'descending');\n }\n // Third click remove sort\n else {\n sortableHeader.setAttribute('aria-sort', 'none');\n }\n\n // Update sort order\n sortOrder = sortableHeader.getAttribute('aria-sort');\n\n // Update button icon\n const icon = button.querySelector('mg-icon');\n let iconType = 'arrows-up-down';\n if (sortOrder === 'ascending') {\n iconType = 'arrow-up';\n } else if (sortOrder === 'descending') {\n iconType = 'arrow-down';\n }\n icon.setAttribute('icon', iconType);\n\n // If sort order is none, return to original order\n if (sortOrder === 'none') {\n // Append rows to table\n rowsDefault.forEach(row => table.querySelector('tbody').append(row));\n return;\n }\n\n // Set a copy of rows\n const rows = Array.from(table.querySelectorAll('tbody tr'));\n\n // Sort rows\n rows.sort((a, b) => {\n // Get cells\n const cellA: HTMLTableCellElement = a.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);\n const cellB: HTMLTableCellElement = b.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);\n\n // Get cell values\n const cellValueA = cellA.dataset.sort ?? cellA.textContent;\n const cellValueB = cellB.dataset.sort ?? cellB.textContent;\n\n // Sort cells based on sort order\n return compareValues(cellValueA, cellValueB, sortOrder === 'descending', value.datatype);\n });\n\n // Append rows to table\n rows.forEach(row => table.querySelector('tbody').append(row));\n });\n }\n });\n }\n\n // Add alignment to columns\n this.element.shadowRoot.adoptedStyleSheets = [...this.element.shadowRoot.adoptedStyleSheets, this.alignmentStylesheet];\n\n // Create div wrapper for responsive behavior\n const divWrapper = document.createElement('div');\n divWrapper.setAttribute('class', this.componentWrapperClass);\n divWrapper.setAttribute('tabindex', '0');\n divWrapper.setAttribute('role', 'region');\n\n // Get table title\n let captionTable = table.querySelector('caption');\n\n // If table is sortable we must add a caption\n if (captionTable === null && isSortable) {\n captionTable = document.createElement('caption');\n table.prepend(captionTable);\n }\n\n if (captionTable !== null) {\n // Ensure caption is not visible (otherwhise the table does not have rounded corners)\n captionTable.className = 'mg-u-visually-hidden';\n\n // Link caption to div\n if (!isValidString(captionTable.id)) {\n captionTable.setAttribute('id', createID(`${this.componentClass}-caption`));\n }\n divWrapper.setAttribute('aria-labelledby', captionTable.id);\n\n // Add sortable caption if neeeded\n if (isSortable) {\n captionTable.innerHTML = `${captionTable.innerHTML} ${this.messages.table.sortableCaption}`.trim();\n }\n }\n divWrapper.append(table);\n\n // Remove existing table from shadow root\n const existingTable = this.element.shadowRoot.querySelector(`.${this.componentWrapperClass}`);\n if (existingTable !== null) {\n existingTable.remove();\n }\n // Append table\n this.element.shadowRoot.append(divWrapper);\n }\n\n /*************\n * Lifecycle *\n *************/\n\n componentWillLoad(): void {\n this.messages = initLocales(this.element).messages;\n }\n\n /**\n * Set variables and validate props\n */\n componentDidLoad(): void {\n this.watchSize(this.size);\n this.watchFullWidth(this.fullWidth);\n this.watchColumns(this.columns);\n this.renderTable(this.element.querySelector('table'));\n }\n\n /**\n * Update table\n */\n componentWillUpdate(): void {\n this.renderTable(this.element.shadowRoot.querySelector('table'));\n }\n}\n"],"version":3}

package/dist/components/mg-tooltip2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { G as Ge, s as st, X as Xe, V as Ve, m as me, Y as Ye, Q as Qe } from './index.es.js';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip, b as shift, l as limitShift, d as arrow, i as isFloatingUIPlacement } from './floating-ui.utils.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, d as shift, l as limitShift, e as arrow, i as isFloatingUIPlacement } from './floating-ui.utils.js';
 import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
 const Guard = {

package/dist/esm/index-5059254f.js CHANGED Viewed

@@ -57,10 +57,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
-                case 'mg-action-more_36':
+                case 'mg-action-more_37':
                     return import(
                       /* webpackMode: "lazy" */
-                      './mg-action-more_36.entry.js').then(processMod, consoleError);
+                      './mg-action-more_37.entry.js').then(processMod, consoleError);
                 case 'mg-alert':
                     return import(
                       /* webpackMode: "lazy" */