@mgdis/mg-components 6.9.0 → 6.10.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.
- package/dist/cjs/events.utils-D5SAtkpQ.js +28 -0
- package/dist/cjs/events.utils-D5SAtkpQ.js.map +1 -0
- package/dist/cjs/index-CATFkm3O.js +4 -0
- package/dist/cjs/{index-CTU2m-sy.js → index-CfIlskRh.js} +20 -6
- package/dist/cjs/{index-CTU2m-sy.js.map → index-CfIlskRh.js.map} +1 -1
- package/dist/cjs/index.es-BCLy9yYb.js +250 -0
- package/dist/cjs/index.es-BCLy9yYb.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mg-action-more_37.cjs.entry.js +382 -373
- package/dist/cjs/mg-action-more_37.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-alert.cjs.entry.js +7 -7
- package/dist/cjs/mg-components.cjs.js +1 -1
- package/dist/cjs/mg-input-combobox.cjs.entry.js +774 -0
- package/dist/cjs/mg-input-combobox.cjs.entry.js.map +1 -0
- package/dist/cjs/mg-input-combobox.entry.cjs.js.map +1 -0
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +16 -14
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-input-rich-text-editor.entry.cjs.js.map +1 -1
- package/dist/cjs/mg-loader.cjs.entry.js +5 -5
- package/dist/cjs/mg-progress.cjs.entry.js +11 -11
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/atoms/mg-button/mg-button.js +3 -2
- package/dist/collection/components/atoms/mg-button/mg-button.js.map +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +47 -57
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.js +2 -0
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.js.map +1 -0
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js +1443 -0
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js.map +1 -0
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.scss +1 -0
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +3 -3
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +1 -1
- package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js +2 -2
- package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js.map +1 -1
- package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js +3 -3
- package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js.map +1 -1
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +2 -2
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js.map +1 -1
- package/dist/collection/components/molecules/mg-alert/mg-alert.js +1 -1
- package/dist/collection/components/molecules/mg-details/mg-details.js +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js +1 -1
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +1 -1
- package/dist/collection/components/molecules/mg-loader/mg-loader.js +1 -1
- package/dist/collection/components/molecules/mg-message/mg-message.js +2 -2
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +2 -2
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +3 -3
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +55 -81
- package/dist/collection/components/molecules/mg-popover/mg-popover.js.map +1 -1
- package/dist/collection/components/molecules/mg-progress/mg-progress.js +1 -1
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -1
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +6 -5
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js.map +1 -1
- package/dist/collection/locales/en/messages.json +8 -1
- package/dist/collection/locales/fr/messages.json +8 -1
- package/dist/collection/utils/behaviors.utils.js +3 -3
- package/dist/collection/utils/behaviors.utils.js.map +1 -1
- package/dist/collection/utils/events.utils.js +22 -0
- package/dist/collection/utils/events.utils.js.map +1 -0
- package/dist/collection/utils/floating-ui.utils.js +46 -2
- package/dist/collection/utils/floating-ui.utils.js.map +1 -1
- package/dist/components/events.utils.js +26 -0
- package/dist/components/events.utils.js.map +1 -0
- package/dist/components/floating-ui.utils.js +47 -3
- package/dist/components/floating-ui.utils.js.map +1 -1
- package/dist/components/index.es.js +136 -43
- package/dist/components/index.es.js.map +1 -1
- package/dist/components/index2.js +18 -4
- package/dist/components/index2.js.map +1 -1
- package/dist/components/mg-action-more.js +8 -8
- package/dist/components/mg-action-more.js.map +1 -1
- package/dist/components/mg-alert.js +6 -6
- package/dist/components/mg-badge2.js +6 -6
- package/dist/components/mg-button2.js +9 -8
- package/dist/components/mg-button2.js.map +1 -1
- package/dist/components/mg-character-left2.js +4 -4
- package/dist/components/mg-details.js +4 -4
- package/dist/components/mg-details.js.map +1 -1
- package/dist/components/mg-form.js +8 -8
- package/dist/components/mg-icon2.js +6 -6
- package/dist/components/mg-illustrated-message.js +6 -6
- package/dist/components/mg-input-checkbox.js +9 -9
- package/dist/components/mg-input-combobox.d.ts +11 -0
- package/dist/components/mg-input-combobox.js +897 -0
- package/dist/components/mg-input-combobox.js.map +1 -0
- package/dist/components/mg-input-date.js +18 -18
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +16 -16
- package/dist/components/mg-input-numeric.js.map +1 -1
- package/dist/components/mg-input-password.js +5 -5
- package/dist/components/mg-input-password.js.map +1 -1
- package/dist/components/mg-input-radio.js +8 -8
- package/dist/components/mg-input-rich-text-editor.js +15 -13
- package/dist/components/mg-input-rich-text-editor.js.map +1 -1
- package/dist/components/mg-input-select2.js +9 -9
- package/dist/components/mg-input-select2.js.map +1 -1
- package/dist/components/mg-input-text2.js +11 -11
- package/dist/components/mg-input-text2.js.map +1 -1
- package/dist/components/mg-input-textarea.js +9 -9
- package/dist/components/mg-input-textarea.js.map +1 -1
- package/dist/components/mg-input-title2.js +4 -4
- package/dist/components/mg-input-toggle.js +7 -7
- package/dist/components/mg-input2.js +8 -8
- package/dist/components/mg-item-more2.js +12 -12
- package/dist/components/mg-item-more2.js.map +1 -1
- package/dist/components/mg-loader.js +1 -70
- package/dist/components/mg-loader.js.map +1 -1
- package/dist/components/mg-loader2.js +75 -0
- package/dist/components/mg-loader2.js.map +1 -0
- package/dist/components/mg-menu-item2.js +13 -13
- package/dist/components/mg-menu-item2.js.map +1 -1
- package/dist/components/mg-message2.js +6 -6
- package/dist/components/mg-modal.js +10 -10
- package/dist/components/mg-pagination2.js +9 -9
- package/dist/components/mg-panel.js +10 -10
- package/dist/components/mg-popover-content2.js +5 -5
- package/dist/components/mg-popover-content2.js.map +1 -1
- package/dist/components/mg-popover2.js +60 -86
- package/dist/components/mg-popover2.js.map +1 -1
- package/dist/components/mg-progress.js +11 -11
- package/dist/components/mg-skip-links.js +3 -3
- package/dist/components/mg-table.js +6 -6
- package/dist/components/mg-tabs.js +18 -17
- package/dist/components/mg-tabs.js.map +1 -1
- package/dist/components/mg-tag.js +4 -4
- package/dist/components/mg-tooltip-content2.js +1 -1
- package/dist/components/mg-tooltip-content2.js.map +1 -1
- package/dist/components/mg-tooltip2.js +56 -66
- package/dist/components/mg-tooltip2.js.map +1 -1
- package/dist/esm/events.utils-yMGqY8YG.js +26 -0
- package/dist/esm/events.utils-yMGqY8YG.js.map +1 -0
- package/dist/esm/index-CAuxALt5.js +4 -0
- package/dist/esm/{index-SQlkEaXW.js → index-DmsGewMC.js} +20 -6
- package/dist/esm/{index-SQlkEaXW.js.map → index-DmsGewMC.js.map} +1 -1
- package/dist/esm/index.es-rLV3KFPd.js +223 -0
- package/dist/esm/index.es-rLV3KFPd.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mg-action-more_37.entry.js +383 -374
- package/dist/esm/mg-action-more_37.entry.js.map +1 -1
- package/dist/esm/mg-alert.entry.js +7 -7
- package/dist/esm/mg-components.js +1 -1
- package/dist/esm/mg-input-combobox.entry.js +772 -0
- package/dist/esm/mg-input-combobox.entry.js.map +1 -0
- package/dist/esm/mg-input-rich-text-editor.entry.js +17 -15
- package/dist/esm/mg-input-rich-text-editor.entry.js.map +1 -1
- package/dist/esm/{mg-input.conf-BtkqaBXm.js → mg-input.conf-CNgv8hc5.js} +3 -3
- package/dist/esm/{mg-input.conf-BtkqaBXm.js.map → mg-input.conf-CNgv8hc5.js.map} +1 -1
- package/dist/esm/mg-loader.entry.js +5 -5
- package/dist/esm/mg-progress.entry.js +11 -11
- package/dist/mg-components/locales/en/messages.json +8 -1
- package/dist/mg-components/locales/fr/messages.json +8 -1
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/mg-input-combobox.entry.esm.js.map +1 -0
- package/dist/mg-components/mg-input-rich-text-editor.entry.esm.js.map +1 -1
- package/dist/mg-components/p-0f761c6c.entry.js +2 -0
- package/dist/mg-components/p-0f761c6c.entry.js.map +1 -0
- package/dist/mg-components/{p-650d6986.entry.js → p-73099ed7.entry.js} +3 -3
- package/dist/mg-components/p-73099ed7.entry.js.map +1 -0
- package/dist/mg-components/p-88f77de2.entry.js +2 -0
- package/dist/mg-components/{p-680948e3.entry.js.map → p-88f77de2.entry.js.map} +1 -1
- package/dist/mg-components/p-CNgv8hc5.js +2 -0
- package/dist/mg-components/{p-BtkqaBXm.js.map → p-CNgv8hc5.js.map} +1 -1
- package/dist/mg-components/p-DK9teKTo.js +2 -0
- package/dist/mg-components/{p-CqGbLOnN.js.map → p-DK9teKTo.js.map} +1 -1
- package/dist/mg-components/{p-583b3769.entry.js → p-ad66e7b3.entry.js} +2 -2
- package/dist/mg-components/p-cdbe689e.entry.js +2 -0
- package/dist/mg-components/{p-9acc6504.entry.js.map → p-cdbe689e.entry.js.map} +1 -1
- package/dist/mg-components/p-d3a868f0.entry.js +2 -0
- package/dist/mg-components/p-d3a868f0.entry.js.map +1 -0
- package/dist/mg-components/p-rLV3KFPd.js +2 -0
- package/dist/mg-components/p-rLV3KFPd.js.map +1 -0
- package/dist/mg-components/p-yMGqY8YG.js +2 -0
- package/dist/mg-components/p-yMGqY8YG.js.map +1 -0
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts +6 -5
- package/dist/types/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.d.ts +24 -0
- package/dist/types/components/molecules/inputs/mg-input-combobox/mg-input-combobox.d.ts +340 -0
- package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +5 -9
- package/dist/types/components.d.ts +247 -2
- package/dist/types/utils/events.utils.d.ts +4 -0
- package/dist/types/utils/floating-ui.utils.d.ts +9 -1
- package/ide/intellij/web-types.json +400 -1
- package/ide/vscode/html-custom-data.json +332 -0
- package/package.json +12 -12
- package/dist/cjs/index.es-jXqiN1uw.js +0 -152
- package/dist/cjs/index.es-jXqiN1uw.js.map +0 -1
- package/dist/esm/index.es-DDBtzymI.js +0 -130
- package/dist/esm/index.es-DDBtzymI.js.map +0 -1
- package/dist/mg-components/p-650d6986.entry.js.map +0 -1
- package/dist/mg-components/p-680948e3.entry.js +0 -2
- package/dist/mg-components/p-9acc6504.entry.js +0 -2
- package/dist/mg-components/p-BtkqaBXm.js +0 -2
- package/dist/mg-components/p-CqGbLOnN.js +0 -2
- package/dist/mg-components/p-DDBtzymI.js +0 -2
- package/dist/mg-components/p-DDBtzymI.js.map +0 -1
- package/dist/mg-components/p-c0fb6f62.entry.js +0 -2
- package/dist/mg-components/p-c0fb6f62.entry.js.map +0 -1
- /package/dist/mg-components/{p-583b3769.entry.js.map → p-ad66e7b3.entry.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-popover2.js","mappings":"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","names":["__stencil_proxyCustomElement","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 * @slot title - popover title\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}
|
|
1
|
+
{"file":"mg-popover2.js","mappings":"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","names":["__stencil_proxyCustomElement","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, getTransformation, numberToPx } from './mg-popover.conf';\n\n/**\n * @slot - Element that will display the popover\n * @slot content - popover content\n * @slot title - popover title\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 interactiveElement: HTMLElement;\n private arrowElement: HTMLElement;\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 // Update aria-expanded\n this.interactiveElement.setAttribute('aria-expanded', '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 this.updatePopover();\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.interactiveElement.setAttribute('aria-expanded', '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 * Update popover position\n * @returns autoUpdate function\n */\n private updatePopover = () =>\n autoUpdate(this.interactiveElement, this.mgPopover, async () => {\n const { x, y, placement, middlewareData } = await computePosition(this.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.arrowElement,\n }),\n ],\n });\n\n Object.assign(this.mgPopover.style, {\n transform: getTransformation(x, y),\n });\n\n // Arrow positioning\n if (this.arrowElement !== null) {\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[placement.split('-')[0]];\n\n Object.assign(this.arrowElement.style, {\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 * 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.updatePopover();\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 arrow element\n this.arrowElement = this.mgPopover.querySelector('[data-floating-arrow]');\n\n // Get interactive element (first element without slot attribute)\n this.interactiveElement = this.element.querySelector(':not([slot])');\n\n // Add aria attributes\n this.interactiveElement.setAttribute('aria-controls', this.identifier);\n this.interactiveElement.setAttribute('aria-expanded', `${this.display}`);\n\n // Add resize observer\n [this.interactiveElement, this.mgPopoverContent].forEach(element => {\n new ResizeObserver(() => {\n this.updatePopover();\n }).observe(element);\n });\n\n // Add events to toggle display\n this.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 this.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.updatePopover?.();\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,5 +1,5 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import {
|
|
2
|
+
import { D as De, G as Gt, W as Wt } from './index.es.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* List of all possibles roles
|
|
@@ -35,26 +35,26 @@ const MgProgress$1 = /*@__PURE__*/ proxyCustomElement(class MgProgress extends H
|
|
|
35
35
|
this.max = 100;
|
|
36
36
|
}
|
|
37
37
|
watchLabel(newValue) {
|
|
38
|
-
if (!
|
|
39
|
-
throw new Error(`<mg-progress> prop "label" must be a valid string. Passed value: ${
|
|
38
|
+
if (!De(newValue)) {
|
|
39
|
+
throw new Error(`<mg-progress> prop "label" must be a valid string. Passed value: ${Gt(newValue)}.`);
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
watchAriaRole(newValue) {
|
|
43
43
|
if (newValue && !roles.includes(newValue)) {
|
|
44
|
-
throw new Error(`<mg-progress> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${
|
|
44
|
+
throw new Error(`<mg-progress> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
watchValue(newValue) {
|
|
48
|
-
if (newValue !== undefined && (!
|
|
49
|
-
throw new Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${
|
|
48
|
+
if (newValue !== undefined && (!Wt(newValue) || !(newValue >= this.min && newValue <= this.max)))
|
|
49
|
+
throw new Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${Gt(newValue)}.`);
|
|
50
50
|
}
|
|
51
51
|
watchMin(newValue) {
|
|
52
|
-
if (newValue !== 0 && newValue !== undefined && (!
|
|
53
|
-
throw new Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${
|
|
52
|
+
if (newValue !== 0 && newValue !== undefined && (!Wt(newValue) || newValue >= this.max))
|
|
53
|
+
throw new Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${Gt(newValue)}.`);
|
|
54
54
|
}
|
|
55
55
|
watchMax(newValue) {
|
|
56
|
-
if (newValue !== 100 && newValue !== undefined && (!
|
|
57
|
-
throw new Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${
|
|
56
|
+
if (newValue !== 100 && newValue !== undefined && (!Wt(newValue) || newValue <= this.min))
|
|
57
|
+
throw new Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${Gt(newValue)}.`);
|
|
58
58
|
}
|
|
59
59
|
/*************
|
|
60
60
|
* Lifecycle *
|
|
@@ -75,7 +75,7 @@ const MgProgress$1 = /*@__PURE__*/ proxyCustomElement(class MgProgress extends H
|
|
|
75
75
|
* @returns HTML Element
|
|
76
76
|
*/
|
|
77
77
|
render() {
|
|
78
|
-
return (h(Host, { key: '
|
|
78
|
+
return (h(Host, { key: 'c2a8b5264af27dab4f81981a6d20d04d572321db', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: '1ab08ca9582182c7c2e9cf1041e68cfd38390e3b', class: "mg-c-progress" }, h("div", { key: '95044f35b5fcc1b5eb380828acc3935ff30c6c1f', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: '4d3588379c0b1a135dd9118fd2cb3c00c9dd31cb', class: "mg-c-progress__fill", style: {
|
|
79
79
|
width: `${Math.round(((this.value - this.min) / (this.max - this.min)) * 100)}%`,
|
|
80
80
|
} })))));
|
|
81
81
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { i as initLocales } from './index2.js';
|
|
3
|
-
import {
|
|
3
|
+
import { D as De } from './index.es.js';
|
|
4
4
|
|
|
5
5
|
const mgSkipLinksCss = ".mg-c-skip-links{position:absolute;display:flex;min-height:var(--mg-b-size-56);align-items:center;background:var(--mg-b-color-light);opacity:0;transform:translateY(-100%)}.mg-c-skip-links:focus-within{position:relative;opacity:1;transform:translateY(0)}.mg-c-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;padding:0 var(--mg-b-size-16);margin:0;gap:var(--mg-b-spacing-actions);list-style:none}.mg-c-skip-links__link{display:inline-block;padding:var(--mg-b-size-8) var(--mg-b-size-16);color:var(--mg-b-color-dark)}.mg-c-skip-links__link:hover{background:hsl(var(--mg-b-color-dark-h), var(--mg-b-color-dark-s), var(--mg-b-color-dark-l), 10%)}";
|
|
6
6
|
|
|
@@ -23,7 +23,7 @@ const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class MgSkipLinks extends
|
|
|
23
23
|
};
|
|
24
24
|
}
|
|
25
25
|
validateLinks(links) {
|
|
26
|
-
if (links === undefined || links.length === 0 || links.some(link => !
|
|
26
|
+
if (links === undefined || links.length === 0 || links.some(link => !De(link.href) || !link.href.startsWith('#') || !De(link.label))) {
|
|
27
27
|
throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
|
|
28
28
|
}
|
|
29
29
|
}
|
|
@@ -42,7 +42,7 @@ const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class MgSkipLinks extends
|
|
|
42
42
|
* @returns HTML Element
|
|
43
43
|
*/
|
|
44
44
|
render() {
|
|
45
|
-
return (h("nav", { key: '
|
|
45
|
+
return (h("nav", { key: '0b4e4d6b9481a88faae78602b07c4f5e851da517', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'aaa15193eb2c9e1d9ee3b2e2a7d8d0fd37836ed7', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
|
|
46
46
|
}
|
|
47
47
|
get element() { return this; }
|
|
48
48
|
static get watchers() { return {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
|
|
2
|
-
import {
|
|
2
|
+
import { Z as Zt, G as Gt, D as De, P as Pt } from './index.es.js';
|
|
3
3
|
import { i as initLocales } from './index2.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './mg-icon2.js';
|
|
5
5
|
|
|
@@ -83,11 +83,11 @@ const MgTable$1 = /*@__PURE__*/ proxyCustomElement(class MgTable extends HTMLEle
|
|
|
83
83
|
/**
|
|
84
84
|
* Class collection
|
|
85
85
|
*/
|
|
86
|
-
this.classCollection = new
|
|
86
|
+
this.classCollection = new Zt([this.componentClass]);
|
|
87
87
|
}
|
|
88
88
|
watchSize(newValue, oldValue) {
|
|
89
89
|
if (!sizes.includes(newValue)) {
|
|
90
|
-
throw new Error(`<mg-table> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${
|
|
90
|
+
throw new Error(`<mg-table> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
91
91
|
}
|
|
92
92
|
else {
|
|
93
93
|
if (oldValue !== undefined) {
|
|
@@ -106,7 +106,7 @@ const MgTable$1 = /*@__PURE__*/ proxyCustomElement(class MgTable extends HTMLEle
|
|
|
106
106
|
}
|
|
107
107
|
watchColumns(newValue) {
|
|
108
108
|
if (newValue !== undefined && !isValidColumnsObject(newValue)) {
|
|
109
|
-
throw new Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${
|
|
109
|
+
throw new Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${Gt(newValue)}.`);
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
/**
|
|
@@ -235,8 +235,8 @@ const MgTable$1 = /*@__PURE__*/ proxyCustomElement(class MgTable extends HTMLEle
|
|
|
235
235
|
// Ensure caption is not visible (otherwhise the table does not have rounded corners)
|
|
236
236
|
captionTable.className = 'mg-u-visually-hidden';
|
|
237
237
|
// Link caption to div
|
|
238
|
-
if (!
|
|
239
|
-
captionTable.setAttribute('id',
|
|
238
|
+
if (!De(captionTable.id)) {
|
|
239
|
+
captionTable.setAttribute('id', Pt(`${this.componentClass}-caption`));
|
|
240
240
|
}
|
|
241
241
|
divWrapper.setAttribute('aria-labelledby', captionTable.id);
|
|
242
242
|
// Add sortable caption if neeeded
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
|
-
import {
|
|
2
|
+
import { P as Pt, Z as Zt, X as Xt, U as Ut, G as Gt, D as De, a as Dt } from './index.es.js';
|
|
3
|
+
import { K as Keys } from './events.utils.js';
|
|
3
4
|
import { d as defineCustomElement$3 } from './mg-badge2.js';
|
|
4
5
|
import { d as defineCustomElement$2 } from './mg-icon2.js';
|
|
5
6
|
|
|
@@ -42,7 +43,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
|
|
|
42
43
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
43
44
|
* If not set, it will be created.
|
|
44
45
|
*/
|
|
45
|
-
this.identifier =
|
|
46
|
+
this.identifier = Pt('mg-tabs');
|
|
46
47
|
/**
|
|
47
48
|
* Define tabs size
|
|
48
49
|
*/
|
|
@@ -54,7 +55,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
|
|
|
54
55
|
/**
|
|
55
56
|
* Component classes
|
|
56
57
|
*/
|
|
57
|
-
this.classCollection = new
|
|
58
|
+
this.classCollection = new Zt(['mg-c-tabs']);
|
|
58
59
|
/**
|
|
59
60
|
* Validate that new tab status can be `Status.ACTIVE`
|
|
60
61
|
* @param tab - tab item
|
|
@@ -107,18 +108,18 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
|
|
|
107
108
|
*/
|
|
108
109
|
this.handleKeydown = (event) => {
|
|
109
110
|
const parent = event.target.parentElement;
|
|
110
|
-
if ([
|
|
111
|
+
if ([Keys.ARROWLEFT, Keys.ARROWRIGHT].includes(event.key)) {
|
|
111
112
|
this.tabFocus = Number(event.target.dataset.index);
|
|
112
113
|
parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '-1');
|
|
113
114
|
// Move right
|
|
114
|
-
if (event.key ===
|
|
115
|
+
if (event.key === Keys.ARROWRIGHT) {
|
|
115
116
|
this.tabFocus++;
|
|
116
117
|
// If we're at the end, go to the start
|
|
117
118
|
if (this.tabFocus > this.tabs.length)
|
|
118
119
|
this.tabFocus = this.startIndex;
|
|
119
120
|
// Move left
|
|
120
121
|
}
|
|
121
|
-
else if (event.key ===
|
|
122
|
+
else if (event.key === Keys.ARROWLEFT) {
|
|
122
123
|
this.tabFocus--;
|
|
123
124
|
// If we're at the start, move to the end
|
|
124
125
|
if (this.tabFocus < this.startIndex)
|
|
@@ -135,7 +136,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
|
|
|
135
136
|
parentButtonElement.focus();
|
|
136
137
|
}
|
|
137
138
|
}
|
|
138
|
-
else if (event.key ===
|
|
139
|
+
else if (event.key === Keys.TAB) {
|
|
139
140
|
this.resetFocus();
|
|
140
141
|
}
|
|
141
142
|
};
|
|
@@ -152,7 +153,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
|
|
|
152
153
|
*/
|
|
153
154
|
this.resetFocus = () => {
|
|
154
155
|
// update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
|
|
155
|
-
|
|
156
|
+
Xt(() => {
|
|
156
157
|
this.tabFocus = undefined;
|
|
157
158
|
Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
|
|
158
159
|
tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
|
|
@@ -169,30 +170,30 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
|
|
|
169
170
|
};
|
|
170
171
|
}
|
|
171
172
|
watchIdentifier(newValue) {
|
|
172
|
-
if (!
|
|
173
|
-
console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${
|
|
173
|
+
if (!Ut(newValue)) {
|
|
174
|
+
console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
|
|
174
175
|
}
|
|
175
176
|
}
|
|
176
177
|
validateLabel(newValue) {
|
|
177
|
-
if (!
|
|
178
|
-
throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${
|
|
178
|
+
if (!De(newValue)) {
|
|
179
|
+
throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${Gt(newValue)}.`);
|
|
179
180
|
}
|
|
180
181
|
}
|
|
181
182
|
validateSize(newValue) {
|
|
182
183
|
if (!sizes.includes(newValue)) {
|
|
183
|
-
throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${
|
|
184
|
+
throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
184
185
|
}
|
|
185
186
|
this.classCollection.add(`mg-c-tabs--size-${this.size}`);
|
|
186
187
|
}
|
|
187
188
|
validateItems(newValue) {
|
|
188
189
|
// String array
|
|
189
|
-
if (
|
|
190
|
+
if (Dt(newValue))
|
|
190
191
|
this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
|
|
191
192
|
// Object array
|
|
192
193
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
193
194
|
this.tabs = newValue;
|
|
194
195
|
else
|
|
195
|
-
throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${
|
|
196
|
+
throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${Gt(newValue)}.`);
|
|
196
197
|
}
|
|
197
198
|
validateActiveTab(newValue) {
|
|
198
199
|
// when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
|
|
@@ -217,7 +218,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
|
|
|
217
218
|
this.activeTabChange.emit(newValue);
|
|
218
219
|
}
|
|
219
220
|
else {
|
|
220
|
-
throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${
|
|
221
|
+
throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${Gt(newValue)}.`);
|
|
221
222
|
}
|
|
222
223
|
}
|
|
223
224
|
/*************
|
|
@@ -252,7 +253,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
|
|
|
252
253
|
* @returns HTML Element
|
|
253
254
|
*/
|
|
254
255
|
render() {
|
|
255
|
-
return (h("div", { key: '
|
|
256
|
+
return (h("div", { key: '558c5ba517bef98ba711dd8992f901768d6770de', class: this.classCollection.join() }, h("header", { key: '0d36d49d51bbbb78bbf68c05e47271349fc58b96', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
|
|
256
257
|
[`${this.buttonTabBaseClass}`]: true,
|
|
257
258
|
[`${this.buttonTabBaseClass}--horizontal`]: true,
|
|
258
259
|
[`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-tabs.js","mappings":"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","names":["MgTabs","__stencil_proxyCustomElement","createID","ClassList","nextTick","isValideID","toString","isValidString","allItemsAreString"],"sources":["src/components/molecules/mg-tabs/mg-tabs.conf.ts","../styles/dist/components/mg-tabs.css?tag=mg-tabs&encapsulation=shadow","src/components/molecules/mg-tabs/mg-tabs.tsx"],"sourcesContent":["import type { Size, Status as StatusType } from '../../../types';\nimport type { MgBadge } from '../../atoms/mg-badge/mg-badge';\nimport type { MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n/**\n * Available tabs items status\n */\nexport const Status: Record<string, StatusType> = {\n VISIBLE: 'visible',\n HIDDEN: 'hidden',\n DISABLED: 'disabled',\n ACTIVE: 'active',\n};\n\n/**\n * type TabItem\n * use to match tabs items\n */\nexport type TabItem = {\n label: string;\n icon?: MgIcon['icon'];\n badge?: Pick<MgBadge, 'value' | 'variant' | 'label'> & { role: 'notification' | 'information' };\n status: StatusType;\n};\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['medium', 'large'] as const;\n\n/**\n * Variant type from variants\n */\nexport type SizeType = Size & (typeof sizes)[number];\n","/*!\n * @prop --mg-c-tabs-color: Defines tabs global color, used for bottom line and active tabs. Default value: `--mg-b-color-app`.\n * @prop --mg-c-tabs-color-text: Defines tabs text color. Unset by default, fallback on `--mg-b-color-dark`.\n */.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium{padding:var(--mg-b-size-12) var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium.mg-c-tabs__navigation-button--horizontal{padding-bottom:var(--mg-b-size-12)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium.mg-c-tabs__navigation-button--vertical{padding-left:var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large{padding:var(--mg-b-size-16) var(--mg-b-size-32)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=metadata]){font-size:var(--mg-b-font-size-h4)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--horizontal{padding-bottom:var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--vertical{padding-left:var(--mg-b-size-32)}.mg-c-tabs__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:var(--mg-c-tabs-color-text, var(--mg-b-color-dark));column-gap:var(--mg-c-tabs-navigation-button-column-gap, var(--mg-b-size-8));cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-tabs__navigation-button:disabled,.mg-c-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-tabs__navigation-button:focus-visible{z-index:10}.mg-c-tabs__navigation-button:hover:not(.mg-c-tabs__navigation-button--disabled),.mg-c-tabs__navigation-button:focus-visible:not(.mg-c-tabs__navigation-button--disabled){background-color:color-mix(in srgb, var(--mg-c-tabs-color), transparent 90%)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active{color:var(--mg-c-tabs-color);font-weight:600}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--horizontal{box-shadow:inset 0 calc(-1*var(--mg-b-size-4)) var(--mg-c-tabs-color)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--vertical{box-shadow:inset var(--mg-b-size-4) 0 var(--mg-c-tabs-color)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--hidden{display:none}.mg-c-tabs__header{display:flex;flex-flow:row wrap;border-bottom:var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-c-tabs-color), transparent 90%)}.mg-c-tabs__content-container:focus-visible{outline:none}.mg-c-tabs__navigation-button-text{flex:0 0 content}/*# sourceMappingURL=mg-tabs.css.map */\n","import { Component, Event, EventEmitter, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { createID, ClassList, allItemsAreString, isValidString, nextTick, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { TabItem, sizes, Status, SizeType } from './mg-tabs.conf';\n\n/**\n * type TabItem validation function\n * @param tab - tab item\n * @returns tab item type is valid\n */\nconst isTabItem = (tab: unknown): tab is TabItem => typeof tab === 'object' && typeof (tab as TabItem).label === 'string';\n\n/**\n * @slot tab_content-n - Tab content, where `n` represents the position of the tab content. It starts at 1.\n */\n@Component({\n tag: 'mg-tabs',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tabs.css',\n shadow: true,\n})\nexport class MgTabs {\n /************\n * Internal *\n ************/\n\n // classes\n private readonly tabPanel = 'panel';\n private readonly buttonTabBaseClass = 'mg-c-tabs__navigation-button';\n\n // variables\n private tabFocus: number;\n private startIndex = 1;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgTabsElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n */\n @Prop() identifier: string = createID('mg-tabs');\n @Watch('identifier')\n watchIdentifier(newValue: MgTabs['identifier']): void {\n if (!isValideID(newValue)) {\n console.error(`<mg-tabs> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n }\n /**\n * Tabs label. Include short tabs description.\n * Required for accessibility\n */\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgTabs['label']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-tabs> prop \"label\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define tabs size\n */\n @Prop() size: SizeType = 'medium';\n @Watch('size')\n validateSize(newValue: MgTabs['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<mg-tabs> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n this.classCollection.add(`mg-c-tabs--size-${this.size}`);\n }\n\n /**\n * Tabs items\n */\n @Prop() items!: string[] | TabItem[];\n @Watch('items')\n validateItems(newValue: MgTabs['items']): void {\n // String array\n if (allItemsAreString(newValue)) this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));\n // Object array\n else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem)) this.tabs = newValue;\n else throw new Error(`<mg-tabs> prop \"items\" is required and all items must be the same type: TabItem. Passed value: ${toString(newValue)}.`);\n }\n\n /**\n * Active tab number\n */\n @Prop({ reflect: true, mutable: true }) activeTab: number;\n @Watch('activeTab')\n validateActiveTab(newValue: MgTabs['activeTab']): void {\n // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value\n // after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update\n if (newValue === undefined) {\n this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))\n ? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))\n : this.startIndex;\n } else if (typeof newValue === 'number' && newValue >= this.startIndex && newValue <= this.tabs.length && this.isActivableTab(this.tabs[newValue - this.startIndex])) {\n // if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE\n this.tabs.forEach((tab, index) => {\n const isNewActiveTab = index === newValue - this.startIndex;\n // reset active tabs\n if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab) tab.status = Status.VISIBLE;\n // set active tab from given tab key\n else if (this.isActivableTab(tab) && isNewActiveTab) tab.status = Status.ACTIVE;\n });\n // emit change active tab key event\n this.activeTabChange.emit(newValue);\n } else {\n throw new Error(\n `<mg-tabs> prop \"activeTab\" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be \"activable\". Passed value: ${toString(newValue)}.`,\n );\n }\n }\n\n /**\n * Component tabs\n */\n @State() tabs: TabItem[] = [];\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-tabs']);\n\n /**\n * Emited event when active tab change\n */\n @Event({ eventName: 'active-tab-change' }) activeTabChange: EventEmitter<HTMLMgTabsElement['activeTab']>;\n\n /**\n * Validate that new tab status can be `Status.ACTIVE`\n * @param tab - tab item\n * @returns true when tab match condition to get a `Status.ACTIVE`\n */\n private isActivableTab = (tab: TabItem): boolean => [undefined, Status.ACTIVE, Status.VISIBLE].includes(tab.status);\n\n /**\n * Method to know if given tab has the given status\n * @param tab - item tab key to set to ACTIVE status\n * @param status - status to valide\n * @returns status comparaison\n */\n private tabHasStatus = (tab: TabItem, status: TabItem['status']): boolean => tab.status === status;\n\n /**\n * Method to get element id from index\n * @param element - to get id\n * @param index - to generate id\n * @returns generated element id\n */\n private getElementId = (element: string, index: number): string => `${element}-${this.getTabItemIndex(index)}`;\n\n /**\n * Method to get tab item index\n * @param index - to get\n * @returns index\n */\n private getTabItemIndex = (index: number): number => index + this.startIndex;\n\n /**\n * Handle click events on tabs\n * @param event - mouse event\n */\n private handleClick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n const tabId = event.currentTarget.dataset.index;\n if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {\n event.preventDefault();\n } else {\n this.activeTab = Number(tabId);\n this.tabFocus = undefined;\n }\n };\n\n /**\n * get navigation button class from given status\n * @param status - button tab status\n * @returns button class/selector variant\n */\n private getNavigationButtonClass = (status: TabItem['status']): string => `${this.buttonTabBaseClass}--${status}`;\n\n /**\n * Handle keyboard event on tabs\n * @param event - mouse event\n */\n private handleKeydown = (event: KeyboardEvent & { target: HTMLElement }): void => {\n const parent = event.target.parentElement;\n if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {\n this.tabFocus = Number(event.target.dataset.index);\n parent.querySelector(`[data-index=\"${this.tabFocus}\"]`).setAttribute('tabindex', '-1');\n\n // Move right\n if (event.key === 'ArrowRight') {\n this.tabFocus++;\n // If we're at the end, go to the start\n if (this.tabFocus > this.tabs.length) this.tabFocus = this.startIndex;\n // Move left\n } else if (event.key === 'ArrowLeft') {\n this.tabFocus--;\n // If we're at the start, move to the end\n if (this.tabFocus < this.startIndex) this.tabFocus = this.tabs.length;\n }\n\n const parentButtonElement: HTMLButtonElement = parent.querySelector(`[data-index=\"${this.tabFocus}\"]`);\n // if focus item is ['hidden'] we recursively repeat action\n if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {\n parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));\n // else run focus methods on tabFocus element\n } else {\n parentButtonElement.setAttribute('tabindex', '0');\n parentButtonElement.focus();\n }\n } else if (event.key === 'Tab') {\n this.resetFocus();\n }\n };\n\n /**\n * Reset focus on document click\n * @param event - mouse event\n */\n private handleDocumentClick = (event: MouseEvent & { target: HTMLElement }): void => {\n if (event.target.closest('mg-tabs') !== this.element) this.resetFocus();\n };\n\n /**\n * Method to reset focus behavior\n */\n private resetFocus = (): void => {\n // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process\n nextTick(() => {\n this.tabFocus = undefined;\n Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {\n tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');\n });\n });\n };\n\n /**\n * Validate slots setting\n */\n private validateSlots = (): void => {\n const slots = Array.from(this.element.children).filter(slot => slot.getAttribute('slot')?.includes('tab_content-'));\n if (slots.length !== this.tabs.length) throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Check tabs format\n this.watchIdentifier(this.identifier);\n this.validateLabel(this.label);\n this.validateItems(this.items);\n this.validateActiveTab(this.activeTab);\n this.validateSize(this.size);\n this.validateSlots();\n }\n\n /**\n * add listners\n */\n componentDidLoad(): void {\n document.addEventListener('click', this.handleDocumentClick, false);\n }\n\n /**\n * remove listeners\n */\n disconnectedCallback(): void {\n document.removeEventListener('keydown', this.handleDocumentClick);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class={this.classCollection.join()}>\n <header role=\"tablist\" aria-label={this.label} class=\"mg-c-tabs__header\">\n {this.tabs.map((tab, index) => (\n <button\n key={tab.label}\n role=\"tab\"\n id={this.getElementId(this.identifier, index)}\n class={{\n [`${this.buttonTabBaseClass}`]: true,\n [`${this.buttonTabBaseClass}--horizontal`]: true,\n [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),\n [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),\n [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),\n }}\n tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n aria-selected={this.tabHasStatus(tab, Status.ACTIVE).toString()}\n aria-controls={this.getElementId(this.tabPanel, index)}\n aria-disabled={this.tabHasStatus(tab, Status.DISABLED)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n data-index={this.getTabItemIndex(index)}\n >\n {tab.icon !== undefined && <mg-icon icon={tab.icon}></mg-icon>}\n {tab.label}\n {tab.badge !== undefined && <mg-badge variant=\"text-color\" value={tab.badge.value} label={tab.badge.label} outline={tab.badge.role === 'information'}></mg-badge>}\n </button>\n ))}\n </header>\n {this.tabs.map((tab, index) => (\n <article\n key={tab.label}\n role=\"tabpanel\"\n id={this.getElementId(this.tabPanel, index)}\n hidden={!this.tabHasStatus(tab, Status.ACTIVE)}\n aria-labelledby={this.getElementId(this.identifier, index)}\n tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n class=\"mg-c-tabs__content-container\"\n >\n <slot name={this.getElementId('tab_content', index)}></slot>\n </article>\n ))}\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"mg-tabs.js","mappings":"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","names":["MgTabs","__stencil_proxyCustomElement","createID","ClassList","nextTick","isValideID","toString","isValidString","allItemsAreString"],"sources":["src/components/molecules/mg-tabs/mg-tabs.conf.ts","../styles/dist/components/mg-tabs.css?tag=mg-tabs&encapsulation=shadow","src/components/molecules/mg-tabs/mg-tabs.tsx"],"sourcesContent":["import type { Size, Status as StatusType } from '../../../types';\nimport type { MgBadge } from '../../atoms/mg-badge/mg-badge';\nimport type { MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n/**\n * Available tabs items status\n */\nexport const Status: Record<string, StatusType> = {\n VISIBLE: 'visible',\n HIDDEN: 'hidden',\n DISABLED: 'disabled',\n ACTIVE: 'active',\n};\n\n/**\n * type TabItem\n * use to match tabs items\n */\nexport type TabItem = {\n label: string;\n icon?: MgIcon['icon'];\n badge?: Pick<MgBadge, 'value' | 'variant' | 'label'> & { role: 'notification' | 'information' };\n status: StatusType;\n};\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['medium', 'large'] as const;\n\n/**\n * Variant type from variants\n */\nexport type SizeType = Size & (typeof sizes)[number];\n","/*!\n * @prop --mg-c-tabs-color: Defines tabs global color, used for bottom line and active tabs. Default value: `--mg-b-color-app`.\n * @prop --mg-c-tabs-color-text: Defines tabs text color. Unset by default, fallback on `--mg-b-color-dark`.\n */.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium{padding:var(--mg-b-size-12) var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium.mg-c-tabs__navigation-button--horizontal{padding-bottom:var(--mg-b-size-12)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium.mg-c-tabs__navigation-button--vertical{padding-left:var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large{padding:var(--mg-b-size-16) var(--mg-b-size-32)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=metadata]){font-size:var(--mg-b-font-size-h4)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--horizontal{padding-bottom:var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--vertical{padding-left:var(--mg-b-size-32)}.mg-c-tabs__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:var(--mg-c-tabs-color-text, var(--mg-b-color-dark));column-gap:var(--mg-c-tabs-navigation-button-column-gap, var(--mg-b-size-8));cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-tabs__navigation-button:disabled,.mg-c-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-tabs__navigation-button:focus-visible{z-index:10}.mg-c-tabs__navigation-button:hover:not(.mg-c-tabs__navigation-button--disabled),.mg-c-tabs__navigation-button:focus-visible:not(.mg-c-tabs__navigation-button--disabled){background-color:color-mix(in srgb, var(--mg-c-tabs-color), transparent 90%)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active{color:var(--mg-c-tabs-color);font-weight:600}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--horizontal{box-shadow:inset 0 calc(-1*var(--mg-b-size-4)) var(--mg-c-tabs-color)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--vertical{box-shadow:inset var(--mg-b-size-4) 0 var(--mg-c-tabs-color)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--hidden{display:none}.mg-c-tabs__header{display:flex;flex-flow:row wrap;border-bottom:var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-c-tabs-color), transparent 90%)}.mg-c-tabs__content-container:focus-visible{outline:none}.mg-c-tabs__navigation-button-text{flex:0 0 content}/*# sourceMappingURL=mg-tabs.css.map */\n","import { Component, Event, EventEmitter, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { createID, ClassList, allItemsAreString, isValidString, nextTick, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { TabItem, sizes, Status, SizeType } from './mg-tabs.conf';\nimport { Keys } from '../../../utils/events.utils';\n\n/**\n * type TabItem validation function\n * @param tab - tab item\n * @returns tab item type is valid\n */\nconst isTabItem = (tab: unknown): tab is TabItem => typeof tab === 'object' && typeof (tab as TabItem).label === 'string';\n\n/**\n * @slot tab_content-n - Tab content, where `n` represents the position of the tab content. It starts at 1.\n */\n@Component({\n tag: 'mg-tabs',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tabs.css',\n shadow: true,\n})\nexport class MgTabs {\n /************\n * Internal *\n ************/\n\n // classes\n private readonly tabPanel = 'panel';\n private readonly buttonTabBaseClass = 'mg-c-tabs__navigation-button';\n\n // variables\n private tabFocus: number;\n private startIndex = 1;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgTabsElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n */\n @Prop() identifier: string = createID('mg-tabs');\n @Watch('identifier')\n watchIdentifier(newValue: MgTabs['identifier']): void {\n if (!isValideID(newValue)) {\n console.error(`<mg-tabs> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n }\n /**\n * Tabs label. Include short tabs description.\n * Required for accessibility\n */\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgTabs['label']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-tabs> prop \"label\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define tabs size\n */\n @Prop() size: SizeType = 'medium';\n @Watch('size')\n validateSize(newValue: MgTabs['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<mg-tabs> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n this.classCollection.add(`mg-c-tabs--size-${this.size}`);\n }\n\n /**\n * Tabs items\n */\n @Prop() items!: string[] | TabItem[];\n @Watch('items')\n validateItems(newValue: MgTabs['items']): void {\n // String array\n if (allItemsAreString(newValue)) this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));\n // Object array\n else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem)) this.tabs = newValue;\n else throw new Error(`<mg-tabs> prop \"items\" is required and all items must be the same type: TabItem. Passed value: ${toString(newValue)}.`);\n }\n\n /**\n * Active tab number\n */\n @Prop({ reflect: true, mutable: true }) activeTab: number;\n @Watch('activeTab')\n validateActiveTab(newValue: MgTabs['activeTab']): void {\n // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value\n // after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update\n if (newValue === undefined) {\n this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))\n ? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))\n : this.startIndex;\n } else if (typeof newValue === 'number' && newValue >= this.startIndex && newValue <= this.tabs.length && this.isActivableTab(this.tabs[newValue - this.startIndex])) {\n // if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE\n this.tabs.forEach((tab, index) => {\n const isNewActiveTab = index === newValue - this.startIndex;\n // reset active tabs\n if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab) tab.status = Status.VISIBLE;\n // set active tab from given tab key\n else if (this.isActivableTab(tab) && isNewActiveTab) tab.status = Status.ACTIVE;\n });\n // emit change active tab key event\n this.activeTabChange.emit(newValue);\n } else {\n throw new Error(\n `<mg-tabs> prop \"activeTab\" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be \"activable\". Passed value: ${toString(newValue)}.`,\n );\n }\n }\n\n /**\n * Component tabs\n */\n @State() tabs: TabItem[] = [];\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-tabs']);\n\n /**\n * Emited event when active tab change\n */\n @Event({ eventName: 'active-tab-change' }) activeTabChange: EventEmitter<HTMLMgTabsElement['activeTab']>;\n\n /**\n * Validate that new tab status can be `Status.ACTIVE`\n * @param tab - tab item\n * @returns true when tab match condition to get a `Status.ACTIVE`\n */\n private isActivableTab = (tab: TabItem): boolean => [undefined, Status.ACTIVE, Status.VISIBLE].includes(tab.status);\n\n /**\n * Method to know if given tab has the given status\n * @param tab - item tab key to set to ACTIVE status\n * @param status - status to valide\n * @returns status comparaison\n */\n private tabHasStatus = (tab: TabItem, status: TabItem['status']): boolean => tab.status === status;\n\n /**\n * Method to get element id from index\n * @param element - to get id\n * @param index - to generate id\n * @returns generated element id\n */\n private getElementId = (element: string, index: number): string => `${element}-${this.getTabItemIndex(index)}`;\n\n /**\n * Method to get tab item index\n * @param index - to get\n * @returns index\n */\n private getTabItemIndex = (index: number): number => index + this.startIndex;\n\n /**\n * Handle click events on tabs\n * @param event - mouse event\n */\n private handleClick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n const tabId = event.currentTarget.dataset.index;\n if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {\n event.preventDefault();\n } else {\n this.activeTab = Number(tabId);\n this.tabFocus = undefined;\n }\n };\n\n /**\n * get navigation button class from given status\n * @param status - button tab status\n * @returns button class/selector variant\n */\n private getNavigationButtonClass = (status: TabItem['status']): string => `${this.buttonTabBaseClass}--${status}`;\n\n /**\n * Handle keyboard event on tabs\n * @param event - mouse event\n */\n private handleKeydown = (event: KeyboardEvent & { target: HTMLElement }): void => {\n const parent = event.target.parentElement;\n if ([Keys.ARROWLEFT, Keys.ARROWRIGHT].includes(event.key)) {\n this.tabFocus = Number(event.target.dataset.index);\n parent.querySelector(`[data-index=\"${this.tabFocus}\"]`).setAttribute('tabindex', '-1');\n\n // Move right\n if (event.key === Keys.ARROWRIGHT) {\n this.tabFocus++;\n // If we're at the end, go to the start\n if (this.tabFocus > this.tabs.length) this.tabFocus = this.startIndex;\n // Move left\n } else if (event.key === Keys.ARROWLEFT) {\n this.tabFocus--;\n // If we're at the start, move to the end\n if (this.tabFocus < this.startIndex) this.tabFocus = this.tabs.length;\n }\n\n const parentButtonElement: HTMLButtonElement = parent.querySelector(`[data-index=\"${this.tabFocus}\"]`);\n // if focus item is ['hidden'] we recursively repeat action\n if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {\n parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));\n // else run focus methods on tabFocus element\n } else {\n parentButtonElement.setAttribute('tabindex', '0');\n parentButtonElement.focus();\n }\n } else if (event.key === Keys.TAB) {\n this.resetFocus();\n }\n };\n\n /**\n * Reset focus on document click\n * @param event - mouse event\n */\n private handleDocumentClick = (event: MouseEvent & { target: HTMLElement }): void => {\n if (event.target.closest('mg-tabs') !== this.element) this.resetFocus();\n };\n\n /**\n * Method to reset focus behavior\n */\n private resetFocus = (): void => {\n // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process\n nextTick(() => {\n this.tabFocus = undefined;\n Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {\n tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');\n });\n });\n };\n\n /**\n * Validate slots setting\n */\n private validateSlots = (): void => {\n const slots = Array.from(this.element.children).filter(slot => slot.getAttribute('slot')?.includes('tab_content-'));\n if (slots.length !== this.tabs.length) throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Check tabs format\n this.watchIdentifier(this.identifier);\n this.validateLabel(this.label);\n this.validateItems(this.items);\n this.validateActiveTab(this.activeTab);\n this.validateSize(this.size);\n this.validateSlots();\n }\n\n /**\n * add listners\n */\n componentDidLoad(): void {\n document.addEventListener('click', this.handleDocumentClick, false);\n }\n\n /**\n * remove listeners\n */\n disconnectedCallback(): void {\n document.removeEventListener('keydown', this.handleDocumentClick);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class={this.classCollection.join()}>\n <header role=\"tablist\" aria-label={this.label} class=\"mg-c-tabs__header\">\n {this.tabs.map((tab, index) => (\n <button\n key={tab.label}\n role=\"tab\"\n id={this.getElementId(this.identifier, index)}\n class={{\n [`${this.buttonTabBaseClass}`]: true,\n [`${this.buttonTabBaseClass}--horizontal`]: true,\n [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),\n [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),\n [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),\n }}\n tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n aria-selected={this.tabHasStatus(tab, Status.ACTIVE).toString()}\n aria-controls={this.getElementId(this.tabPanel, index)}\n aria-disabled={this.tabHasStatus(tab, Status.DISABLED)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n data-index={this.getTabItemIndex(index)}\n >\n {tab.icon !== undefined && <mg-icon icon={tab.icon}></mg-icon>}\n {tab.label}\n {tab.badge !== undefined && <mg-badge variant=\"text-color\" value={tab.badge.value} label={tab.badge.label} outline={tab.badge.role === 'information'}></mg-badge>}\n </button>\n ))}\n </header>\n {this.tabs.map((tab, index) => (\n <article\n key={tab.label}\n role=\"tabpanel\"\n id={this.getElementId(this.tabPanel, index)}\n hidden={!this.tabHasStatus(tab, Status.ACTIVE)}\n aria-labelledby={this.getElementId(this.identifier, index)}\n tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n class=\"mg-c-tabs__content-container\"\n >\n <slot name={this.getElementId('tab_content', index)}></slot>\n </article>\n ))}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
|
-
import {
|
|
2
|
+
import { Z as Zt, G as Gt, D as De } from './index.es.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* List of all possibles variants
|
|
@@ -34,11 +34,11 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
|
|
|
34
34
|
/**
|
|
35
35
|
* Component classes
|
|
36
36
|
*/
|
|
37
|
-
this.classCollection = new
|
|
37
|
+
this.classCollection = new Zt(['mg-c-tag']);
|
|
38
38
|
}
|
|
39
39
|
validateVariant(newValue, oldValue) {
|
|
40
40
|
if (!variants.includes(newValue)) {
|
|
41
|
-
throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${
|
|
41
|
+
throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
42
42
|
}
|
|
43
43
|
else {
|
|
44
44
|
if (oldValue !== undefined) {
|
|
@@ -71,7 +71,7 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
|
|
|
71
71
|
* @param textContent - html element textContent property
|
|
72
72
|
*/
|
|
73
73
|
validateTextContent(textContent) {
|
|
74
|
-
if (!
|
|
74
|
+
if (!De(textContent))
|
|
75
75
|
throw new Error('<mg-tag> slot must contain a text content.');
|
|
76
76
|
}
|
|
77
77
|
/*************
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const mgTooltipContentCss = ":host{z-index:1000;display:none;max-width:var(--mg-b-size-floating-element-max-width);box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-c-tooltip-border-radius);background-color:var(--mg-c-tooltip-color-background);color:var(--mg-c-tooltip-color-text);font-family:var(--mg-b-font-family);font-size:var(--mg-b-font-size);font-weight:400;text-align:start}:host([data-show]){display:block}::slotted([slot=arrow]){visibility:hidden}::slotted([slot=arrow])::before{content:\"\";transform:rotate(45deg);visibility:visible}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;z-index:9999;width:var(--mg-b-size-8);height:var(--mg-b-size-8);background-color:var(--mg-c-tooltip-color-background)}:host([data-placement^=top])>::slotted([slot=arrow]){bottom:calc(-1*var(--mg-b-size-4))}:host([data-placement^=bottom])>::slotted([slot=arrow]){top:calc(-1*var(--mg-b-size-4))}:host([data-placement^=left])>::slotted([slot=arrow]){right:calc(-1*var(--mg-b-size-4))}:host([data-placement^=right])>::slotted([slot=arrow]){left:calc(-1*var(--mg-b-size-4))}";
|
|
3
|
+
const mgTooltipContentCss = ":host{z-index:1000;top:0;left:0;display:none;width:max-content;max-width:var(--mg-b-size-floating-element-max-width);box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-c-tooltip-border-radius);background-color:var(--mg-c-tooltip-color-background);color:var(--mg-c-tooltip-color-text);font-family:var(--mg-b-font-family);font-size:var(--mg-b-font-size);font-weight:400;text-align:start}:host([data-show]){display:block}::slotted([slot=arrow]){position:absolute;visibility:hidden}::slotted([slot=arrow])::before{content:\"\";transform:rotate(45deg);visibility:visible}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;z-index:9999;width:var(--mg-b-size-8);height:var(--mg-b-size-8);background-color:var(--mg-c-tooltip-color-background)}:host([data-placement^=top])>::slotted([slot=arrow]){bottom:calc(-1*var(--mg-b-size-4))}:host([data-placement^=bottom])>::slotted([slot=arrow]){top:calc(-1*var(--mg-b-size-4))}:host([data-placement^=left])>::slotted([slot=arrow]){right:calc(-1*var(--mg-b-size-4))}:host([data-placement^=right])>::slotted([slot=arrow]){left:calc(-1*var(--mg-b-size-4))}";
|
|
4
4
|
|
|
5
5
|
const MgTooltipContent = /*@__PURE__*/ proxyCustomElement(class MgTooltipContent extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-tooltip-content2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG
|
|
1
|
+
{"file":"mg-tooltip-content2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,goCAAgoC;;MCU/oC,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;;;;;;AAM3B;;AAEe;AAEf;;;AAGG;IACH,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,6BAA6B,EAAQ,CAAA,EAC1E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAQ,CAAA,CACrB;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["../styles/dist/components/mg-tooltip-content.css?tag=mg-tooltip-content&encapsulation=shadow","src/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.tsx"],"sourcesContent":[":host{z-index:1000;top:0;left:0;display:none;width:max-content;max-width:var(--mg-b-size-floating-element-max-width);box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-c-tooltip-border-radius);background-color:var(--mg-c-tooltip-color-background);color:var(--mg-c-tooltip-color-text);font-family:var(--mg-b-font-family);font-size:var(--mg-b-font-size);font-weight:400;text-align:start}:host([data-show]){display:block}::slotted([slot=arrow]){position:absolute;visibility:hidden}::slotted([slot=arrow])::before{content:\"\";transform:rotate(45deg);visibility:visible}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;z-index:9999;width:var(--mg-b-size-8);height:var(--mg-b-size-8);background-color:var(--mg-c-tooltip-color-background)}:host([data-placement^=top])>::slotted([slot=arrow]){bottom:calc(-1*var(--mg-b-size-4))}:host([data-placement^=bottom])>::slotted([slot=arrow]){top:calc(-1*var(--mg-b-size-4))}:host([data-placement^=left])>::slotted([slot=arrow]){right:calc(-1*var(--mg-b-size-4))}:host([data-placement^=right])>::slotted([slot=arrow]){left:calc(-1*var(--mg-b-size-4))}/*# sourceMappingURL=mg-tooltip-content.css.map */\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @internal\n */\n@Component({\n tag: 'mg-tooltip-content',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip-content.css',\n shadow: true,\n})\nexport class MgTooltipContent {\n /**\n * Displayed message in the tooltip\n */\n @Prop() message!: string;\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"tooltip\">\n <span innerHTML={this.message} class=\"mg-tooltip-content__message\"></span>\n <slot name=\"arrow\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|