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/collection/components/molecules/mg-popover/mg-popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-popover.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-popover/mg-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"mg-popover.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-popover/mg-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/molecules/mg-table/mg-table.conf.js ADDED Viewed

@@ -0,0 +1,13 @@
+/**
+ * Sizes
+ */
+// Define possible sizes
+export const sizes = ['small', 'medium', 'large', 'xlarge'];
+/**
+ * Columns
+ */
+// Define possible text alignments
+export const textAlignments = ['left', 'center', 'right'];
+// Define possible data types
+export const dataTypes = ['string', 'numeric', 'date'];
+//# sourceMappingURL=mg-table.conf.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-table.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-table/mg-table.conf.ts"],"names":[],"mappings":"AACA;;GAEG;AACH,wBAAwB;AACxB,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAU,CAAC;AAGrE;;GAEG;AACH,kCAAkC;AAClC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAC;AACnE,6BAA6B;AAC7B,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAU,CAAC","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"]}

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

@@ -0,0 +1,364 @@
+import { ClassList, toString, createID, isValidString } from "@mgdis/stencil-helpers";
+import { textAlignments, dataTypes, sizes } from "./mg-table.conf";
+import { initLocales } from "../../../locales";
+/**
+ * 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' });
+};
+/**
+ * @slot - Table content
+ */
+export class MgTable {
+    constructor() {
+        // 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 ClassList([this.componentClass]);
+    }
+    watchSize(newValue, oldValue) {
+        if (!sizes.includes(newValue)) {
+            throw new Error(`<mg-table> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${toString(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: ${toString(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 (!isValidString(captionTable.id)) {
+                captionTable.setAttribute('id', createID(`${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'));
+    }
+    static get is() { return "mg-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableSizeType",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\"",
+                    "references": {
+                        "TableSizeType": {
+                            "location": "import",
+                            "path": "./mg-table.conf",
+                            "id": "src/components/molecules/mg-table/mg-table.conf.ts::TableSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define table size"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if table fits its parent element"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "full-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColumnsType",
+                    "resolved": "{ [key: number]: { align?: \"center\" | \"right\" | \"left\"; sortable?: boolean; datatype?: \"string\" | \"numeric\" | \"date\"; }; }",
+                    "references": {
+                        "ColumnsType": {
+                            "location": "import",
+                            "path": "./mg-table.conf",
+                            "id": "src/components/molecules/mg-table/mg-table.conf.ts::ColumnsType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define column properties"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "classCollection": {}
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "watchSize"
+            }, {
+                "propName": "fullWidth",
+                "methodName": "watchFullWidth"
+            }, {
+                "propName": "columns",
+                "methodName": "watchColumns"
+            }];
+    }
+}
+//# sourceMappingURL=mg-table.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-table.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-table/mg-table.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/locales/en/messages.json CHANGED Viewed

@@ -1,17 +1,6 @@
 {
   "errors": {
-    "required": "This field is required.",
-    "date": {
-      "badInput": "The date format must be {pattern}",
-      "min": "The date cannot be earlier than {min}",
-      "max": "The date cannot be later than {max}",
-      "minMax": "The date must be between {min} and {max}"
-    },
-    "numeric": {
-      "min": "The value cannot be less than {min}",
-      "max": "The value cannot be greater than {max}",
-      "minMax": "The value must be between {min} and {max}"
-    }
+    "required": "This field is required."
   },
   "nbCharLeft": "{counter} characters left.",
   "input": {
@@ -32,29 +21,54 @@
       "sections": {
         "selected": {
           "title": "Selected",
-          "titlePlurial": "Selected",
+          "titlePlural": "Selected",
           "action": "Unselect all",
           "tooltip": "Unselect all current search results"
         },
         "notSelected": {
           "title": "Not selected",
-          "titlePlurial": "Not selected",
+          "titlePlural": "Not selected",
           "action": "Select all",
           "tooltip": "Select all current search results"
         }
       }
     },
     "date": {
-      "helpText": "Expected format: {pattern} (ex: {date})",
       "pattern": {
         "dd": "dd",
         "mm": "mm",
         "yyyy": "yyyy"
+      },
+      "helpText": {
+        "expectedFormat": "Expected format: {pattern} (ex: {date})",
+        "min": "The date must be after {min}",
+        "max": "The date must be before {max}",
+        "minMax": "The date must be between {min} and {max}"
+      },
+      "error": {
+        "badInput": "The date is incorrect, the format must be {pattern} (ex: {date})"
+      }
+    },
+    "numeric": {
+      "helpText": {
+        "min": "The value must be greater than {min}",
+        "max": "The value must be less than {max}",
+        "minMax": "The value must be between {min} and {max}"
       }
     },
     "password": {
       "display": "Display password value",
       "hide": "Hide password value"
+    },
+    "text": {
+      "helpText": {
+        "email": "Expected format: name@example.com",
+        "emails": "Expected format: first@example.com, second@example.com",
+        "url": "Expected format: https://example.com"
+      },
+      "errors": {
+        "typeMismatch": "The value is incorrect."
+      }
     }
   },
   "form": {
@@ -101,6 +115,9 @@
     "label": "Actions"
   },
   "loader": {
-    "inProgess": "Loading in progress…"
+    "inProgress": "Loading in progress…"
+  },
+  "table": {
+    "sortableCaption": "(column headers with buttons are sortable)"
   }
 }