@mgdis/mg-components 6.7.0 → 6.9.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/README.md +17 -78
- package/dist/cjs/app-globals-V2Kpy_OQ.js +8 -0
- package/dist/cjs/app-globals-V2Kpy_OQ.js.map +1 -0
- package/dist/cjs/{index-1a5a1081.js → index-CATFkm3O.js} +244 -196
- package/dist/cjs/index-CATFkm3O.js.map +1 -0
- package/dist/cjs/{index-b7923724.js → index-CTU2m-sy.js} +87 -42
- package/dist/cjs/index-CTU2m-sy.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/index.es-jXqiN1uw.js +152 -0
- package/dist/cjs/index.es-jXqiN1uw.js.map +1 -0
- package/dist/cjs/loader.cjs.js +4 -5
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/cjs/{mg-action-more_36.cjs.entry.js → mg-action-more_37.cjs.entry.js} +842 -826
- package/dist/cjs/mg-action-more_37.cjs.entry.js.map +1 -0
- package/dist/cjs/mg-alert.cjs.entry.js +21 -15
- package/dist/cjs/mg-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-alert.entry.cjs.js.map +1 -0
- package/dist/cjs/mg-components.cjs.js +8 -7
- package/dist/cjs/mg-components.cjs.js.map +1 -1
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +21524 -6868
- 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 -0
- package/dist/cjs/{mg-input.conf-5bbcea79.js → mg-input.conf-WTsvDfpC.js} +2 -1
- package/dist/cjs/mg-input.conf-WTsvDfpC.js.map +1 -0
- package/dist/cjs/mg-loader.cjs.entry.js +12 -10
- package/dist/cjs/mg-loader.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-loader.entry.cjs.js.map +1 -0
- package/dist/cjs/mg-progress.cjs.entry.js +13 -15
- package/dist/cjs/mg-progress.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-progress.entry.cjs.js.map +1 -0
- package/dist/collection/collection-manifest.json +4 -3
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +9 -4
- package/dist/collection/components/atoms/mg-badge/mg-badge.js.map +1 -1
- package/dist/collection/components/atoms/mg-button/mg-button.js +14 -14
- package/dist/collection/components/atoms/mg-button/mg-button.js.map +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +21 -6
- package/dist/collection/components/atoms/mg-icon/mg-icon.js.map +1 -1
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +17 -7
- package/dist/collection/components/atoms/mg-tag/mg-tag.js.map +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +1 -2
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +12 -8
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js +19 -6
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +16 -5
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.conf.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.conf.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +53 -21
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +64 -30
- 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 +12 -7
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +44 -39
- 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 +8 -3
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.conf.js +7 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.conf.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +89 -53
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +28 -23
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +8 -3
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js.map +1 -1
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.conf.js.map +1 -1
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js +2 -2
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js.map +1 -1
- package/dist/collection/components/molecules/menus/mg-menu/mg-menu.conf.js.map +1 -0
- package/dist/collection/components/molecules/{menu → menus}/mg-menu/mg-menu.js +9 -9
- package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js.map +1 -0
- package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.conf.js.map +1 -0
- package/dist/collection/components/molecules/{menu → menus}/mg-menu-item/mg-menu-item.js +7 -7
- package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js.map +1 -0
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.conf.js.map +1 -1
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +9 -4
- 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 +13 -3
- package/dist/collection/components/molecules/mg-alert/mg-alert.js.map +1 -1
- package/dist/collection/components/molecules/mg-details/mg-details.js +3 -2
- package/dist/collection/components/molecules/mg-details/mg-details.js.map +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js +8 -3
- package/dist/collection/components/molecules/mg-form/mg-form.js.map +1 -1
- package/dist/collection/components/molecules/mg-loader/mg-loader.js +10 -3
- package/dist/collection/components/molecules/mg-loader/mg-loader.js.map +1 -1
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +4 -4
- package/dist/collection/components/molecules/mg-modal/mg-modal.js.map +1 -1
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +17 -7
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js.map +1 -1
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +12 -7
- package/dist/collection/components/molecules/mg-panel/mg-panel.js.map +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +2 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js.map +1 -1
- package/dist/collection/components/molecules/mg-table/mg-table.conf.js +13 -0
- package/dist/collection/components/molecules/mg-table/mg-table.conf.js.map +1 -0
- package/dist/collection/components/molecules/mg-table/mg-table.js +364 -0
- package/dist/collection/components/molecules/mg-table/mg-table.js.map +1 -0
- package/dist/collection/locales/en/messages.json +37 -16
- package/dist/collection/locales/fr/messages.json +40 -19
- package/dist/collection/utils/playwright.fixture.js +2 -3
- package/dist/collection/utils/playwright.fixture.js.map +1 -1
- package/dist/components/floating-ui.utils.js +2 -421
- package/dist/components/floating-ui.utils.js.map +1 -1
- package/dist/components/index.es.js +68 -67
- package/dist/components/index.es.js.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/index2.js +86 -41
- package/dist/components/index2.js.map +1 -1
- package/dist/components/mg-action-more.js +13 -9
- package/dist/components/mg-action-more.js.map +1 -1
- package/dist/components/mg-alert.js +16 -8
- package/dist/components/mg-alert.js.map +1 -1
- package/dist/components/mg-badge.js +1 -0
- package/dist/components/mg-badge2.js +14 -10
- package/dist/components/mg-badge2.js.map +1 -1
- package/dist/components/mg-button.js +1 -0
- package/dist/components/mg-button2.js +19 -19
- package/dist/components/mg-button2.js.map +1 -1
- package/dist/components/mg-card.js +1 -0
- package/dist/components/mg-card2.js +2 -2
- package/dist/components/mg-card2.js.map +1 -1
- package/dist/components/mg-character-left.js +1 -0
- package/dist/components/mg-character-left2.js +6 -6
- package/dist/components/mg-character-left2.js.map +1 -1
- package/dist/components/mg-details.js +7 -6
- package/dist/components/mg-details.js.map +1 -1
- package/dist/components/mg-divider.js +1 -0
- package/dist/components/mg-divider2.js +2 -2
- package/dist/components/mg-divider2.js.map +1 -1
- package/dist/components/mg-form.js +14 -10
- package/dist/components/mg-form.js.map +1 -1
- package/dist/components/mg-icon.js +1 -0
- package/dist/components/mg-icon2.js +29 -14
- package/dist/components/mg-icon2.js.map +1 -1
- package/dist/components/mg-illustrated-message.js +7 -7
- package/dist/components/mg-illustrated-message.js.map +1 -1
- package/dist/components/mg-input-checkbox-paginated.js +2 -1
- package/dist/components/mg-input-checkbox-paginated2.js +15 -3
- package/dist/components/mg-input-checkbox-paginated2.js.map +1 -1
- package/dist/components/mg-input-checkbox.js +23 -14
- package/dist/components/mg-input-checkbox.js.map +1 -1
- package/dist/components/mg-input-date.js +64 -32
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +76 -43
- package/dist/components/mg-input-numeric.js.map +1 -1
- package/dist/components/mg-input-password.js +12 -8
- package/dist/components/mg-input-password.js.map +1 -1
- package/dist/components/mg-input-radio.js +10 -10
- package/dist/components/mg-input-radio.js.map +1 -1
- package/dist/components/mg-input-rich-text-editor.js +21525 -6867
- package/dist/components/mg-input-rich-text-editor.js.map +1 -1
- package/dist/components/mg-input-select.js +1 -0
- package/dist/components/mg-input-select2.js +15 -11
- package/dist/components/mg-input-select2.js.map +1 -1
- package/dist/components/mg-input-text.js +1 -0
- package/dist/components/mg-input-text2.js +67 -27
- package/dist/components/mg-input-text2.js.map +1 -1
- package/dist/components/mg-input-textarea.js +16 -12
- package/dist/components/mg-input-textarea.js.map +1 -1
- package/dist/components/mg-input-title.js +1 -0
- package/dist/components/mg-input-title2.js +6 -6
- package/dist/components/mg-input-title2.js.map +1 -1
- package/dist/components/mg-input-toggle.js +14 -10
- package/dist/components/mg-input-toggle.js.map +1 -1
- package/dist/components/mg-input.js +1 -0
- package/dist/components/mg-input2.js +20 -14
- package/dist/components/mg-input2.js.map +1 -1
- package/dist/components/mg-item-more.js +2 -1
- package/dist/components/mg-item-more2.js +18 -19
- package/dist/components/mg-item-more2.js.map +1 -1
- package/dist/components/mg-loader.js +10 -6
- package/dist/components/mg-loader.js.map +1 -1
- package/dist/components/mg-menu-item.js +1 -0
- package/dist/components/mg-menu-item2.js +16 -16
- package/dist/components/mg-menu-item2.js.map +1 -1
- package/dist/components/mg-menu.js +2 -1
- package/dist/components/mg-message.js +1 -0
- package/dist/components/mg-message2.js +6 -6
- package/dist/components/mg-message2.js.map +1 -1
- package/dist/components/mg-modal.js +13 -13
- package/dist/components/mg-modal.js.map +1 -1
- package/dist/components/mg-pagination.js +1 -0
- package/dist/components/mg-pagination2.js +19 -11
- package/dist/components/mg-pagination2.js.map +1 -1
- package/dist/components/mg-panel.js +18 -14
- package/dist/components/mg-panel.js.map +1 -1
- package/dist/components/mg-popover-content.js +1 -0
- package/dist/components/mg-popover-content2.js +5 -5
- package/dist/components/mg-popover-content2.js.map +1 -1
- package/dist/components/mg-popover.js +1 -0
- package/dist/components/mg-popover2.js +9 -9
- package/dist/components/mg-popover2.js.map +1 -1
- package/dist/components/mg-progress.js +12 -12
- package/dist/components/mg-progress.js.map +1 -1
- package/dist/components/mg-skip-links.js +4 -4
- package/dist/components/mg-skip-links.js.map +1 -1
- package/dist/components/mg-table.d.ts +11 -0
- package/dist/components/mg-table.js +320 -0
- package/dist/components/mg-table.js.map +1 -0
- package/dist/components/mg-tabs.js +14 -14
- package/dist/components/mg-tabs.js.map +1 -1
- package/dist/components/mg-tag.js +16 -8
- package/dist/components/mg-tag.js.map +1 -1
- package/dist/components/mg-tooltip-content.js +1 -0
- package/dist/components/mg-tooltip-content2.js +2 -2
- package/dist/components/mg-tooltip-content2.js.map +1 -1
- package/dist/components/mg-tooltip.js +1 -0
- package/dist/components/mg-tooltip2.js +13 -13
- package/dist/components/mg-tooltip2.js.map +1 -1
- package/dist/esm/app-globals-DQuL1Twl.js +6 -0
- package/dist/esm/app-globals-DQuL1Twl.js.map +1 -0
- package/dist/esm/{index-5059254f.js → index-CAuxALt5.js} +242 -174
- package/dist/esm/index-CAuxALt5.js.map +1 -0
- package/dist/esm/{index-a58f8b91.js → index-SQlkEaXW.js} +87 -42
- package/dist/esm/index-SQlkEaXW.js.map +1 -0
- package/dist/esm/index.es-DDBtzymI.js +130 -0
- package/dist/esm/index.es-DDBtzymI.js.map +1 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +5 -4
- package/dist/esm/loader.js.map +1 -1
- package/dist/esm/{mg-action-more_36.entry.js → mg-action-more_37.entry.js} +842 -825
- package/dist/esm/mg-action-more_37.entry.js.map +1 -0
- package/dist/esm/mg-alert.entry.js +21 -13
- package/dist/esm/mg-alert.entry.js.map +1 -1
- package/dist/esm/mg-components.js +7 -5
- package/dist/esm/mg-components.js.map +1 -1
- package/dist/esm/mg-input-rich-text-editor.entry.js +21527 -6869
- package/dist/esm/mg-input-rich-text-editor.entry.js.map +1 -1
- package/dist/esm/{mg-input.conf-712c7bb6.js → mg-input.conf-BtkqaBXm.js} +2 -1
- package/dist/esm/mg-input.conf-BtkqaBXm.js.map +1 -0
- package/dist/esm/mg-loader.entry.js +12 -8
- package/dist/esm/mg-loader.entry.js.map +1 -1
- package/dist/esm/mg-progress.entry.js +13 -13
- package/dist/esm/mg-progress.entry.js.map +1 -1
- package/dist/mg-components/index.esm.js.map +1 -1
- package/dist/mg-components/loader.esm.js.map +1 -0
- package/dist/mg-components/locales/en/messages.json +37 -16
- package/dist/mg-components/locales/fr/messages.json +40 -19
- package/dist/mg-components/mg-alert.entry.esm.js.map +1 -0
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/mg-components.esm.js.map +1 -1
- package/dist/mg-components/mg-input-rich-text-editor.entry.esm.js.map +1 -0
- package/dist/mg-components/mg-loader.entry.esm.js.map +1 -0
- package/dist/mg-components/mg-progress.entry.esm.js.map +1 -0
- package/dist/mg-components/p-583b3769.entry.js +2 -0
- package/dist/mg-components/p-583b3769.entry.js.map +1 -0
- package/dist/mg-components/p-650d6986.entry.js +11 -0
- package/dist/mg-components/p-650d6986.entry.js.map +1 -0
- package/dist/mg-components/p-680948e3.entry.js +2 -0
- package/dist/mg-components/p-680948e3.entry.js.map +1 -0
- package/dist/mg-components/p-9acc6504.entry.js +2 -0
- package/dist/mg-components/p-9acc6504.entry.js.map +1 -0
- package/dist/mg-components/{p-2884f369.js → p-BtkqaBXm.js} +1 -1
- package/dist/mg-components/p-BtkqaBXm.js.map +1 -0
- package/dist/mg-components/p-CAuxALt5.js +3 -0
- package/dist/mg-components/p-CAuxALt5.js.map +1 -0
- package/dist/mg-components/p-CqGbLOnN.js +2 -0
- package/dist/mg-components/p-CqGbLOnN.js.map +1 -0
- package/dist/mg-components/p-DDBtzymI.js +2 -0
- package/dist/mg-components/p-DDBtzymI.js.map +1 -0
- package/dist/mg-components/p-DQuL1Twl.js +2 -0
- package/dist/mg-components/p-DQuL1Twl.js.map +1 -0
- package/dist/mg-components/p-c0fb6f62.entry.js +2 -0
- package/dist/mg-components/p-c0fb6f62.entry.js.map +1 -0
- package/dist/types/components/atoms/mg-button/mg-button.d.ts +1 -1
- package/dist/types/components/atoms/mg-tag/mg-tag.d.ts +2 -2
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts +0 -1
- package/dist/types/components/molecules/inputs/mg-input/mg-input.d.ts +1 -4
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.conf.d.ts +1 -0
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +7 -6
- package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.d.ts +9 -9
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.conf.d.ts +4 -2
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +16 -10
- package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +5 -5
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +1 -1
- package/dist/types/components/molecules/internals/mg-item-more/mg-item-more.conf.d.ts +1 -1
- package/dist/types/components/molecules/mg-action-more/mg-action-more.conf.d.ts +1 -1
- package/dist/types/components/molecules/mg-action-more/mg-action-more.d.ts +1 -1
- package/dist/types/components/molecules/mg-form/mg-form.d.ts +1 -1
- package/dist/types/components/molecules/mg-loader/mg-loader.d.ts +1 -1
- package/dist/types/components/molecules/mg-pagination/mg-pagination.d.ts +2 -2
- package/dist/types/components/molecules/mg-panel/mg-panel.d.ts +1 -1
- package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +1 -0
- package/dist/types/components/molecules/mg-table/mg-table.conf.d.ts +19 -0
- package/dist/types/components/molecules/mg-table/mg-table.d.ts +58 -0
- package/dist/types/components.d.ts +66 -27
- package/dist/types/stencil-public-runtime.d.ts +1 -0
- package/ide/intellij/web-types.json +157 -49
- package/ide/vscode/html-custom-data.json +111 -27
- package/package.json +25 -25
- package/dist/cjs/app-globals-3a1e7e63.js +0 -7
- package/dist/cjs/app-globals-3a1e7e63.js.map +0 -1
- package/dist/cjs/index-1a5a1081.js.map +0 -1
- package/dist/cjs/index-b7923724.js.map +0 -1
- package/dist/cjs/index.es-903492c5.js +0 -151
- package/dist/cjs/index.es-903492c5.js.map +0 -1
- package/dist/cjs/mg-action-more_36.cjs.entry.js.map +0 -1
- package/dist/cjs/mg-input.conf-5bbcea79.js.map +0 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.conf.js.map +0 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js.map +0 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.conf.js.map +0 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js.map +0 -1
- package/dist/esm/app-globals-0f993ce5.js +0 -5
- package/dist/esm/app-globals-0f993ce5.js.map +0 -1
- package/dist/esm/index-5059254f.js.map +0 -1
- package/dist/esm/index-a58f8b91.js.map +0 -1
- package/dist/esm/index.es-b80b758c.js +0 -129
- package/dist/esm/index.es-b80b758c.js.map +0 -1
- package/dist/esm/mg-action-more_36.entry.js.map +0 -1
- package/dist/esm/mg-input.conf-712c7bb6.js.map +0 -1
- package/dist/mg-components/p-2884f369.js.map +0 -1
- package/dist/mg-components/p-2a633b29.entry.js +0 -2
- package/dist/mg-components/p-2a633b29.entry.js.map +0 -1
- package/dist/mg-components/p-361cc090.entry.js +0 -2
- package/dist/mg-components/p-361cc090.entry.js.map +0 -1
- package/dist/mg-components/p-3afebdab.entry.js +0 -2
- package/dist/mg-components/p-3afebdab.entry.js.map +0 -1
- package/dist/mg-components/p-3c6710be.js +0 -2
- package/dist/mg-components/p-3c6710be.js.map +0 -1
- package/dist/mg-components/p-ac8a5083.js +0 -2
- package/dist/mg-components/p-ac8a5083.js.map +0 -1
- package/dist/mg-components/p-bc6ec847.entry.js +0 -2
- package/dist/mg-components/p-bc6ec847.entry.js.map +0 -1
- package/dist/mg-components/p-e1255160.js +0 -2
- package/dist/mg-components/p-e1255160.js.map +0 -1
- package/dist/mg-components/p-e39791fa.js +0 -3
- package/dist/mg-components/p-e39791fa.js.map +0 -1
- package/dist/mg-components/p-f2e6e7ae.entry.js +0 -2
- package/dist/mg-components/p-f2e6e7ae.entry.js.map +0 -1
- package/loader/package.json +0 -11
- /package/dist/collection/components/molecules/{menu → menus}/mg-menu/mg-menu.conf.js +0 -0
- /package/dist/collection/components/molecules/{menu → menus}/mg-menu-item/mg-menu-item.conf.js +0 -0
- /package/dist/types/components/molecules/{menu → menus}/mg-menu/mg-menu.conf.d.ts +0 -0
- /package/dist/types/components/molecules/{menu → menus}/mg-menu/mg-menu.d.ts +0 -0
- /package/dist/types/components/molecules/{menu → menus}/mg-menu-item/mg-menu-item.conf.d.ts +0 -0
- /package/dist/types/components/molecules/{menu → menus}/mg-menu-item/mg-menu-item.d.ts +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-tabs.js","mappings":"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","names":["MgTabs","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';\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,5 +1,5 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
|
-
import {
|
|
2
|
+
import { k as kt, z as zt, L as Le } from './index.es.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* List of all possibles variants
|
|
@@ -7,7 +7,6 @@ import { Z as Ze, V as Ve, m as me } from './index.es.js';
|
|
|
7
7
|
const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
|
|
8
8
|
|
|
9
9
|
const mgTagCss = "/*!\n * @prop --mg-c-tag-height: Defines the height of the tag. Default value is `--mg-b-size-24`.\n * @prop --mg-c-tag-border-radius: Defines the border radius of the tag. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-tag-font-size: Defines the font size of the tag. Default value is `--mg-b-font-size-small`.\n */:host{display:inline-block}.mg-c-tag{display:inline-flex;min-height:var(--mg-c-tag-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-c-tag-height) - 2*var(--mg-b-size-border) - var(--mg-c-tag-font-size)*var(--mg-b-line-height))/2) calc(var(--mg-b-size-8) - var(--mg-b-size-border));border:var(--mg-b-size-border) solid;border-radius:var(--mg-c-tag-border-radius);font-size:var(--mg-c-tag-font-size);font-weight:600;text-align:center;vertical-align:middle}.mg-c-tag.mg-c-tag--primary{border-color:var(--mg-b-color-neutral-110);background-color:var(--mg-b-color-neutral-110);color:var(--mg-b-color-text-on-primary)}.mg-c-tag.mg-c-tag--primary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-neutral-110)}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft{border-color:var(--mg-b-color-neutral-20);background-color:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-neutral-110)}.mg-c-tag.mg-c-tag--secondary{border-color:var(--mg-b-color-neutral-10);background-color:var(--mg-b-color-neutral-10);color:var(--mg-b-color-text-on-secondary)}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-neutral-10)}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft{border-color:var(--mg-b-color-neutral-20);background-color:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-text-on-secondary)}.mg-c-tag.mg-c-tag--danger{border-color:var(--mg-b-color-danger);background-color:var(--mg-b-color-danger);color:var(--mg-b-color-text-on-danger)}.mg-c-tag.mg-c-tag--danger.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-danger)}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft{border-color:var(--mg-b-color-red-20);background-color:var(--mg-b-color-red-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-danger)}.mg-c-tag.mg-c-tag--info{border-color:var(--mg-b-color-info);background-color:var(--mg-b-color-info);color:var(--mg-b-color-text-on-info)}.mg-c-tag.mg-c-tag--info.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-info)}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft{border-color:var(--mg-b-color-blue-20);background-color:var(--mg-b-color-blue-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-info)}.mg-c-tag.mg-c-tag--success{border-color:var(--mg-b-color-success);background-color:var(--mg-b-color-success);color:var(--mg-b-color-text-on-success)}.mg-c-tag.mg-c-tag--success.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-success)}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft{border-color:var(--mg-b-color-green-20);background-color:var(--mg-b-color-green-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-success)}.mg-c-tag.mg-c-tag--warning{border-color:var(--mg-b-color-warning);background-color:var(--mg-b-color-warning);color:var(--mg-b-color-text-on-warning)}.mg-c-tag.mg-c-tag--warning.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-warning)}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft{border-color:var(--mg-b-color-yellow-20);background-color:var(--mg-b-color-yellow-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-warning)}::slotted(mg-icon){margin-right:var(--mg-b-size-4)}slot{display:inline-flex;align-items:center}";
|
|
10
|
-
const MgTagStyle0 = mgTagCss;
|
|
11
10
|
|
|
12
11
|
const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement {
|
|
13
12
|
constructor() {
|
|
@@ -23,15 +22,23 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
|
|
|
23
22
|
/**
|
|
24
23
|
* Define tag variant
|
|
25
24
|
*/
|
|
26
|
-
this.variant =
|
|
25
|
+
this.variant = 'primary';
|
|
26
|
+
/**
|
|
27
|
+
* Define if tag is using outline style
|
|
28
|
+
*/
|
|
29
|
+
this.outline = false;
|
|
30
|
+
/**
|
|
31
|
+
* Define if tag is using soft style
|
|
32
|
+
*/
|
|
33
|
+
this.soft = false;
|
|
27
34
|
/**
|
|
28
35
|
* Component classes
|
|
29
36
|
*/
|
|
30
|
-
this.classCollection = new
|
|
37
|
+
this.classCollection = new kt(['mg-c-tag']);
|
|
31
38
|
}
|
|
32
39
|
validateVariant(newValue, oldValue) {
|
|
33
40
|
if (!variants.includes(newValue)) {
|
|
34
|
-
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: ${zt(newValue)}.`);
|
|
35
42
|
}
|
|
36
43
|
else {
|
|
37
44
|
if (oldValue !== undefined) {
|
|
@@ -64,7 +71,7 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
|
|
|
64
71
|
* @param textContent - html element textContent property
|
|
65
72
|
*/
|
|
66
73
|
validateTextContent(textContent) {
|
|
67
|
-
if (!
|
|
74
|
+
if (!Le(textContent))
|
|
68
75
|
throw new Error('<mg-tag> slot must contain a text content.');
|
|
69
76
|
}
|
|
70
77
|
/*************
|
|
@@ -84,7 +91,7 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
|
|
|
84
91
|
* @returns HTML Element
|
|
85
92
|
*/
|
|
86
93
|
render() {
|
|
87
|
-
return (h("span", { key: '
|
|
94
|
+
return (h("span", { key: '2517dd6020afcf91017c9cfb6a1f3037c0b6a7c4', class: this.classCollection.join() }, h("slot", { key: '0f0f0f82274342a87d98125631174f40060105af' })));
|
|
88
95
|
}
|
|
89
96
|
get element() { return this; }
|
|
90
97
|
static get watchers() { return {
|
|
@@ -92,7 +99,7 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
|
|
|
92
99
|
"outline": ["validateOutline"],
|
|
93
100
|
"soft": ["validateSoft"]
|
|
94
101
|
}; }
|
|
95
|
-
static get style() { return
|
|
102
|
+
static get style() { return mgTagCss; }
|
|
96
103
|
}, [1, "mg-tag", {
|
|
97
104
|
"variant": [1],
|
|
98
105
|
"outline": [4],
|
|
@@ -122,5 +129,6 @@ const MgTag = MgTag$1;
|
|
|
122
129
|
const defineCustomElement = defineCustomElement$1;
|
|
123
130
|
|
|
124
131
|
export { MgTag, defineCustomElement };
|
|
132
|
+
//# sourceMappingURL=mg-tag.js.map
|
|
125
133
|
|
|
126
134
|
//# sourceMappingURL=mg-tag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-tag.js","mappings":";;;AAEA
|
|
1
|
+
{"file":"mg-tag.js","mappings":";;;AAEA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,CAAU;;ACLjG,MAAM,QAAQ,GAAG,89HAA89H;;MCWl+HA,OAAK,iBAAAC,kBAAA,CAAA,MAAA,KAAA,SAAA,WAAA,CAAA;AALlB,IAAA,WAAA,GAAA;;;;AAME;;AAEc;;AAGG,QAAA,IAAY,CAAA,YAAA,GAAG,mBAAmB;AAClC,QAAA,IAAS,CAAA,SAAA,GAAG,gBAAgB;AAW7C;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAmB,SAAS;AAa3C;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAOvB;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAWpB;;AAEG;QACM,IAAe,CAAA,eAAA,GAAc,IAAIC,EAAS,CAAC,CAAC,UAAU,CAAC,CAAC;AAuClE;IA7EC,eAAe,CAAC,QAA0B,EAAE,QAA2B,EAAA;QACrE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;AAChC,YAAA,MAAM,IAAI,KAAK,CAAC,CAA2C,wCAAA,EAAA,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmBC,EAAQ,CAAC,QAAQ,CAAC,CAAA,CAAA,CAAG,CAAC;;aAClH;AACL,YAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;gBAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAa,UAAA,EAAA,QAAQ,CAAE,CAAA,CAAC;;YAEtD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAa,UAAA,EAAA,QAAQ,CAAE,CAAA,CAAC;;;AASrD,IAAA,eAAe,CAAC,QAA0B,EAAA;AACxC,QAAA,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;;YACpD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;;AAQrD,IAAA,YAAY,CAAC,QAAuB,EAAA;;AAElC,QAAA,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC;;AAG1G,QAAA,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;;YACjD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;;AAQlD;;AAEe;AAEf;;;AAGG;AACK,IAAA,mBAAmB,CAAC,WAAmB,EAAA;AAC7C,QAAA,IAAI,CAACC,EAAa,CAAC,WAAW,CAAC;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC;;AAGhG;;AAEe;AAEf;;AAEG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC;AAClC,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC;AAClC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;QAC5B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;;AAGpD;;;AAGG;IACH,MAAM,GAAA;AACJ,QAAA,QACE,6DAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAA,EACtC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgTag","__stencil_proxyCustomElement","ClassList","toString","isValidString"],"sources":["src/components/atoms/mg-tag/mg-tag.conf.ts","../styles/dist/components/mg-tag.css?tag=mg-tag&encapsulation=shadow","src/components/atoms/mg-tag/mg-tag.tsx"],"sourcesContent":["import type { Variant } from '../../../types';\n\n/**\n * List of all possibles variants\n */\nexport const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;\n\n/**\n * TagVariantType type from tag variants\n */\nexport type TagVariantType = Variant & (typeof variants)[number];\n","/*!\n * @prop --mg-c-tag-height: Defines the height of the tag. Default value is `--mg-b-size-24`.\n * @prop --mg-c-tag-border-radius: Defines the border radius of the tag. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-tag-font-size: Defines the font size of the tag. Default value is `--mg-b-font-size-small`.\n */:host{display:inline-block}.mg-c-tag{display:inline-flex;min-height:var(--mg-c-tag-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-c-tag-height) - 2*var(--mg-b-size-border) - var(--mg-c-tag-font-size)*var(--mg-b-line-height))/2) calc(var(--mg-b-size-8) - var(--mg-b-size-border));border:var(--mg-b-size-border) solid;border-radius:var(--mg-c-tag-border-radius);font-size:var(--mg-c-tag-font-size);font-weight:600;text-align:center;vertical-align:middle}.mg-c-tag.mg-c-tag--primary{border-color:var(--mg-b-color-neutral-110);background-color:var(--mg-b-color-neutral-110);color:var(--mg-b-color-text-on-primary)}.mg-c-tag.mg-c-tag--primary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-neutral-110)}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft{border-color:var(--mg-b-color-neutral-20);background-color:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-neutral-110)}.mg-c-tag.mg-c-tag--secondary{border-color:var(--mg-b-color-neutral-10);background-color:var(--mg-b-color-neutral-10);color:var(--mg-b-color-text-on-secondary)}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-neutral-10)}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft{border-color:var(--mg-b-color-neutral-20);background-color:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-text-on-secondary)}.mg-c-tag.mg-c-tag--danger{border-color:var(--mg-b-color-danger);background-color:var(--mg-b-color-danger);color:var(--mg-b-color-text-on-danger)}.mg-c-tag.mg-c-tag--danger.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-danger)}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft{border-color:var(--mg-b-color-red-20);background-color:var(--mg-b-color-red-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-danger)}.mg-c-tag.mg-c-tag--info{border-color:var(--mg-b-color-info);background-color:var(--mg-b-color-info);color:var(--mg-b-color-text-on-info)}.mg-c-tag.mg-c-tag--info.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-info)}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft{border-color:var(--mg-b-color-blue-20);background-color:var(--mg-b-color-blue-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-info)}.mg-c-tag.mg-c-tag--success{border-color:var(--mg-b-color-success);background-color:var(--mg-b-color-success);color:var(--mg-b-color-text-on-success)}.mg-c-tag.mg-c-tag--success.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-success)}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft{border-color:var(--mg-b-color-green-20);background-color:var(--mg-b-color-green-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-success)}.mg-c-tag.mg-c-tag--warning{border-color:var(--mg-b-color-warning);background-color:var(--mg-b-color-warning);color:var(--mg-b-color-text-on-warning)}.mg-c-tag.mg-c-tag--warning.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-warning)}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft{border-color:var(--mg-b-color-yellow-20);background-color:var(--mg-b-color-yellow-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-warning)}::slotted(mg-icon){margin-right:var(--mg-b-size-4)}slot{display:inline-flex;align-items:center}/*# sourceMappingURL=mg-tag.css.map */\n","import { Component, h, Prop, State, Watch, Element } from '@stencil/core';\nimport { TagVariantType, variants } from './mg-tag.conf';\nimport { ClassList, isValidString, toString } from '@mgdis/stencil-helpers';\n/**\n * @slot - Tag content\n */\n@Component({\n tag: 'mg-tag',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tag.css',\n shadow: true,\n})\nexport class MgTag {\n /************\n * Internal *\n ************/\n\n // Classes\n private readonly classOutline = 'mg-c-tag--outline';\n private readonly classSoft = 'mg-c-tag--soft';\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgTagElement;\n\n /**\n * Define tag variant\n */\n @Prop() variant: TagVariantType = 'primary';\n @Watch('variant')\n validateVariant(newValue: MgTag['variant'], oldValue?: MgTag['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-tag> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-tag--${oldValue}`);\n }\n this.classCollection.add(`mg-c-tag--${newValue}`);\n }\n }\n\n /**\n * Define if tag is using outline style\n */\n @Prop() outline = false;\n @Watch('outline')\n validateOutline(newValue: MgTag['outline']): void {\n if (newValue) this.classCollection.add(this.classOutline);\n else this.classCollection.delete(this.classOutline);\n }\n\n /**\n * Define if tag is using soft style\n */\n @Prop() soft = false;\n @Watch('soft')\n validateSoft(newValue: MgTag['soft']): void {\n // usage validation\n if (newValue && this.outline) throw new Error('<mg-tag> prop \"soft\" can NOT be used with prop \"outline\".');\n\n // apply class\n if (newValue) this.classCollection.add(this.classSoft);\n else this.classCollection.delete(this.classSoft);\n }\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-tag']);\n\n /*************\n * Methods *\n *************/\n\n /**\n * Validate the given textContent\n * @param textContent - html element textContent property\n */\n private validateTextContent(textContent: string): void {\n if (!isValidString(textContent)) throw new Error('<mg-tag> slot must contain a text content.');\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateOutline(this.outline);\n this.validateSoft(this.soft);\n this.validateTextContent(this.element.textContent);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <span class={this.classCollection.join()}>\n <slot></slot>\n </span>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
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))}";
|
|
4
|
-
const MgTooltipContentStyle0 = mgTooltipContentCss;
|
|
5
4
|
|
|
6
5
|
const MgTooltipContent = /*@__PURE__*/ proxyCustomElement(class MgTooltipContent extends HTMLElement {
|
|
7
6
|
constructor() {
|
|
@@ -19,7 +18,7 @@ const MgTooltipContent = /*@__PURE__*/ proxyCustomElement(class MgTooltipContent
|
|
|
19
18
|
render() {
|
|
20
19
|
return (h(Host, { key: '2221de3ca0ef7c9d6e46e24b19c69007fababf81', role: "tooltip" }, h("span", { key: '9e14f7f5b3f5e5060ed9f42e8d7259b17575168e', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: 'bc083567d77e8f4ffccee98b96036ba8ac494fb6', name: "arrow" })));
|
|
21
20
|
}
|
|
22
|
-
static get style() { return
|
|
21
|
+
static get style() { return mgTooltipContentCss; }
|
|
23
22
|
}, [1, "mg-tooltip-content", {
|
|
24
23
|
"message": [1]
|
|
25
24
|
}]);
|
|
@@ -39,5 +38,6 @@ function defineCustomElement() {
|
|
|
39
38
|
defineCustomElement();
|
|
40
39
|
|
|
41
40
|
export { MgTooltipContent as M, defineCustomElement as d };
|
|
41
|
+
//# sourceMappingURL=mg-tooltip-content2.js.map
|
|
42
42
|
|
|
43
43
|
//# sourceMappingURL=mg-tooltip-content2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-tooltip-content2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,+kCAA+kC,
|
|
1
|
+
{"file":"mg-tooltip-content2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,+kCAA+kC;;MCU9lC,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;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))}/*# 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}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { x as xt, M as Mt, O as Ot, z as zt, L as Le, R as Rt, j as jt } from './index.es.js';
|
|
3
|
+
import { b as autoUpdate, c as computePosition, o as offset, f as flip, d as shift, e as arrow, i as isFloatingUIPlacement, l as limitShift } from './floating-ui.utils.js';
|
|
4
4
|
import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
|
|
5
5
|
|
|
6
6
|
const Guard = {
|
|
@@ -11,7 +11,6 @@ const Guard = {
|
|
|
11
11
|
};
|
|
12
12
|
|
|
13
13
|
const mgTooltipCss = "/*!\n * @prop --mg-c-tooltip-border-radius: Defines the border radius of the tooltip. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-tooltip-color-background: Defines the background color of the tooltip. Default value: `--mg-b-color-dark`.\n * @prop --mg-c-tooltip-color-text: Defines the font color of the tooltip. Default value: `--mg-b-color-light`.\n */:host{display:inline-block}";
|
|
14
|
-
const MgTooltipStyle0 = mgTooltipCss;
|
|
15
14
|
|
|
16
15
|
/**
|
|
17
16
|
* HTMLMgButtonElement type guard
|
|
@@ -28,7 +27,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
28
27
|
* Sets an `id` attribute.
|
|
29
28
|
* Needed by the input for accessibility `aria-decribedby`.
|
|
30
29
|
*/
|
|
31
|
-
this.identifier =
|
|
30
|
+
this.identifier = xt('mg-tooltip');
|
|
32
31
|
/**
|
|
33
32
|
* Tooltip placement
|
|
34
33
|
*/
|
|
@@ -48,7 +47,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
48
47
|
// Make the tooltip visible
|
|
49
48
|
this.mgTooltipContent.dataset.show = '';
|
|
50
49
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
51
|
-
|
|
50
|
+
Mt(() => {
|
|
52
51
|
this.windows.forEach((localWindow) => {
|
|
53
52
|
localWindow.addEventListener('click', this.handleClickOutside, false);
|
|
54
53
|
localWindow.addEventListener('keydown', this.handlePressEscape, false);
|
|
@@ -267,15 +266,15 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
267
266
|
};
|
|
268
267
|
}
|
|
269
268
|
watchIdentifier(newValue) {
|
|
270
|
-
if (!
|
|
271
|
-
throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${
|
|
269
|
+
if (!Ot(newValue)) {
|
|
270
|
+
throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
|
|
272
271
|
}
|
|
273
272
|
// use renderTooltipContent to update tooltip-content id
|
|
274
273
|
this.renderTooltipContent();
|
|
275
274
|
}
|
|
276
275
|
watchMessage(newValue) {
|
|
277
|
-
if (!
|
|
278
|
-
throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${
|
|
276
|
+
if (!Le(newValue)) {
|
|
277
|
+
throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${zt(newValue)}.`);
|
|
279
278
|
}
|
|
280
279
|
if (this.mgTooltipContent !== undefined)
|
|
281
280
|
this.mgTooltipContent.message = newValue;
|
|
@@ -334,7 +333,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
334
333
|
*/
|
|
335
334
|
componentWillLoad() {
|
|
336
335
|
// Get windows to attach events
|
|
337
|
-
this.windows =
|
|
336
|
+
this.windows = Rt(window);
|
|
338
337
|
// Get tooltip element
|
|
339
338
|
this.renderTooltipContent();
|
|
340
339
|
//validate properties
|
|
@@ -353,7 +352,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
353
352
|
// get slotted element wich is not the tooltip
|
|
354
353
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
355
354
|
// Get interactive element
|
|
356
|
-
const interactiveElement = slotElement.matches(
|
|
355
|
+
const interactiveElement = slotElement.matches(jt) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(jt);
|
|
357
356
|
this.setTooltipedElement(interactiveElement || slotElement);
|
|
358
357
|
// Check if slotted element is a disabled mg-button
|
|
359
358
|
// In this case we wrap the mg-button into a div to enable the tooltip
|
|
@@ -402,7 +401,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
402
401
|
* @returns HTML Element
|
|
403
402
|
*/
|
|
404
403
|
render() {
|
|
405
|
-
return (h(Host, { key: '
|
|
404
|
+
return (h(Host, { key: '31d97272cfd3448abf9ed9cda62fdec0a356d422' }, h("slot", { key: '8fbf8343471f53591caacc3ff4c4b8aaf4577c4f' }), h("slot", { key: '6f4eab4c33e9ec07e0fe7ffa63de4921f4b27e0c', name: "content" })));
|
|
406
405
|
}
|
|
407
406
|
get element() { return this; }
|
|
408
407
|
static get watchers() { return {
|
|
@@ -412,7 +411,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
412
411
|
"display": ["watchDisplay"],
|
|
413
412
|
"disabled": ["watchDisabled"]
|
|
414
413
|
}; }
|
|
415
|
-
static get style() { return
|
|
414
|
+
static get style() { return mgTooltipCss; }
|
|
416
415
|
}, [1, "mg-tooltip", {
|
|
417
416
|
"identifier": [1],
|
|
418
417
|
"message": [1],
|
|
@@ -447,5 +446,6 @@ function defineCustomElement() {
|
|
|
447
446
|
defineCustomElement();
|
|
448
447
|
|
|
449
448
|
export { MgTooltip as M, defineCustomElement as d };
|
|
449
|
+
//# sourceMappingURL=mg-tooltip2.js.map
|
|
450
450
|
|
|
451
451
|
//# sourceMappingURL=mg-tooltip2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-tooltip2.js","mappings":"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","names":["createID","nextTick","isValideID","toString","isValidString","getWindows","focusableElements"],"sources":["src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx","../styles/dist/components/mg-tooltip.css?tag=mg-tooltip&encapsulation=shadow","src/components/atoms/mg-tooltip/mg-tooltip.tsx"],"sourcesContent":["import { type ExtendedPlacement, placements } from '../../../utils/floating-ui.utils';\nexport * from '../../../utils/floating-ui.utils';\n\nexport type GuardType = 'focus' | 'hoverTooltip' | 'hoverTooltiped' | 'disableOnClick';\n\nexport const Guard: Record<string, GuardType> = {\n FOCUS: 'focus',\n HOVER_TOOLTIP_ELEMENT: 'hoverTooltip',\n HOVER_TOOLTIPED_ELEMENT: 'hoverTooltiped',\n DISABLE_ON_CLICK: 'disableOnClick',\n};\n\n/**\n * Placement type from placements\n */\nexport type TooltipPlacementType = ExtendedPlacement & (typeof placements)[number];\n","/*!\n * @prop --mg-c-tooltip-border-radius: Defines the border radius of the tooltip. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-tooltip-color-background: Defines the background color of the tooltip. Default value: `--mg-b-color-dark`.\n * @prop --mg-c-tooltip-color-text: Defines the font color of the tooltip. Default value: `--mg-b-color-light`.\n */:host{display:inline-block}/*# sourceMappingURL=mg-tooltip.css.map */\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createID, focusableElements, getWindows, isValideID, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\nimport { computePosition, autoUpdate, flip, shift, limitShift, offset, arrow, type Strategy, type Placement } from '@floating-ui/dom';\nimport { type GuardType, Guard, type TooltipPlacementType, isFloatingUIPlacement } from './mg-tooltip.conf';\n\n/**\n * HTMLMgButtonElement type guard\n * @param element - element to check\n * @returns return true if type is HTMLMgButtonElement\n */\nconst isButton = (element: unknown): element is HTMLMgButtonElement => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes((element as Element).tagName);\n\n/**\n * @slot - Element that will display the tooltip\n * @slot content - Tooltip content\n */\n@Component({\n tag: 'mg-tooltip',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip.css',\n shadow: true,\n})\nexport class MgTooltip {\n /************\n * Internal *\n ************/\n\n private floatingUICleanup: ReturnType<typeof autoUpdate>;\n private mgTooltipContent: HTMLMgTooltipContentElement;\n private tooltipedElement: HTMLElement;\n private windows: Window[];\n private hasCustomTabIndex: boolean;\n\n // tooltip actions guards\n private guard: GuardType;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgTooltipElement;\n\n /**\n * Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n */\n @Prop() identifier: string = createID('mg-tooltip');\n @Watch('identifier')\n watchIdentifier(newValue: MgTooltip['identifier']): void {\n if (!isValideID(newValue)) {\n throw new Error(`<mg-tooltip> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n // use renderTooltipContent to update tooltip-content id\n this.renderTooltipContent();\n }\n\n /**\n * Displayed message in the tooltip\n */\n @Prop() message!: string;\n @Watch('message')\n watchMessage(newValue: MgTooltip['message']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-tooltip> prop \"message\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n }\n if (this.mgTooltipContent !== undefined) this.mgTooltipContent.message = newValue;\n }\n\n /**\n * Tooltip placement\n */\n @Prop({ mutable: true }) placement: TooltipPlacementType = 'bottom';\n @Watch('placement')\n watchPlacement(newValue): void {\n if (!isFloatingUIPlacement(newValue)) this.placement = 'bottom';\n }\n\n /**\n * Display tooltip\n */\n @Prop({ mutable: true }) display = false;\n @Watch('display')\n watchDisplay(newValue: MgTooltip['display']): void {\n if (newValue) {\n this.show();\n } else {\n this.hide();\n }\n }\n\n /**\n * Disable tooltip\n */\n @Prop() disabled = false;\n @Watch('disabled')\n watchDisabled(newValue: MgTooltip['disabled']): void {\n if (this.hasCustomTabIndex) {\n if (newValue) this.tooltipedElement.removeAttribute('tabindex');\n else if (!this.tooltipedElement.hasAttribute('tabindex')) this.tooltipedElement.setAttribute('tabindex', '0');\n }\n }\n\n /**\n * Show tooltip\n */\n private show = (): void => {\n // Make the tooltip visible\n this.mgTooltipContent.dataset.show = '';\n // hide when click outside on nextTick to prevent event to trigger after creation\n nextTick(() => {\n this.windows.forEach((localWindow: Window) => {\n localWindow.addEventListener('click', this.handleClickOutside, false);\n localWindow.addEventListener('keydown', this.handlePressEscape, false);\n });\n });\n };\n\n /**\n * Hide tooltip\n */\n private hide = (): void => {\n // Hide the tooltip\n this.mgTooltipContent.removeAttribute('data-show');\n // Remove event listener\n this.windows.forEach((localWindow: Window) => {\n localWindow.removeEventListener('click', this.handleClickOutside, false);\n localWindow.removeEventListener('keyboard', this.handlePressEscape, false);\n });\n };\n\n /**\n * Check if clicked outside of component and hide tooltip\n * @param event - mouse event\n */\n private handleClickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n if (event.target.closest('mg-tooltip') !== this.element) this.setDisplay(false);\n };\n\n /**\n * Check if 'Escape' key is pressed of component and hide tooltip\n * @param event - keyboard event\n */\n private handlePressEscape = (event: KeyboardEvent): void => {\n if (event.code === 'Escape') {\n this.setDisplay(false);\n this.resetGuard();\n }\n };\n\n /**\n * Method to set display prop\n * @param newValue - display prop new value\n * @param condition - additionnal condition to apply display prop newValue\n */\n private setDisplay = (newValue: MgTooltip['display'], condition = true): void => {\n if (!this.disabled && condition) this.display = newValue;\n };\n\n /**\n * Action for tooltip element and tooltiped element mouse listener\n * @param elementGuard - tooltip element guard\n * @param eventName - event name\n * @param conditionalGuard - guard condition\n */\n private tooltipMouseListenerAction = (elementGuard: GuardType, eventName: 'mouseenter' | 'mouseleave', conditionalGuard: GuardType): void => {\n // active FOCUS guard cancel process\n if ([Guard.FOCUS, Guard.DISABLE_ON_CLICK].includes(this.guard)) {\n return;\n }\n\n // Update guard by element guard\n this.guard = elementGuard;\n\n if (eventName !== 'mouseenter') {\n // process action in the next event loop macro task\n setTimeout(() => {\n this.setDisplay(false, this.guard !== conditionalGuard);\n this.resetGuard();\n }, 100);\n } else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {\n this.setDisplay(true);\n }\n };\n\n /**\n * Method to reset guard value\n */\n private resetGuard = (): void => {\n this.guard = undefined;\n };\n\n /**\n * Update slot content when it is a mg-button\n * @param mgButton - slotted mg-button\n */\n private setMgButtonWrapper = (mgButton: HTMLMgButtonElement): void => {\n const buttonWrapperClass = 'mg-c-tooltip__mg-button-wrapper';\n const hasButtonWrapper = mgButton.parentElement.classList.contains(buttonWrapperClass);\n // For disabled mg-button, we need to wrap it in a new element\n // We bind handlers to this new element to keep listener features as workaround to disabled mg-button `pointer-events: none`\n // AND to prevent multiple nested wrappers from rendering when a new render is called with a disabled mg-button\n if (mgButton.disabled && !hasButtonWrapper) {\n // wrap mg-button in a div\n const div = document.createElement('div');\n div.classList.add(buttonWrapperClass);\n mgButton.parentNode.insertBefore(div, mgButton);\n div.appendChild(mgButton);\n\n // update tooltipElement\n this.setTooltipedElement(div);\n } else if (!mgButton.disabled && hasButtonWrapper) {\n this.element.firstElementChild.replaceWith(mgButton);\n\n // update tooltipElement\n this.setTooltipedElement(mgButton);\n }\n };\n\n /**\n * Set Floating UI instance\n * @param strategy - Floating UI strategy to apply on instance\n */\n private setFloatingUI = (strategy: Strategy): void => {\n // Initial styles configuration\n Object.assign(this.mgTooltipContent.style, {\n position: strategy,\n top: '0',\n left: '0',\n transform: 'translate(0, 0)',\n });\n\n // Create Floating UI instance with autoUpdate\n this.floatingUICleanup = autoUpdate(this.tooltipedElement, this.mgTooltipContent, () => {\n computePosition(this.tooltipedElement, this.mgTooltipContent, {\n placement: this.placement as Placement,\n strategy,\n middleware: [offset(8), flip(), shift({ limiter: limitShift() }), arrow({ element: this.mgTooltipContent.querySelector('[data-floating-arrow]') })],\n }).then(({ x, y, placement, middlewareData }) => {\n Object.assign(this.mgTooltipContent.style, {\n transform: !isNaN(x) && !isNaN(y) ? `translate(${x}px, ${y}px)` : undefined,\n });\n\n // Update arrow style\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\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.mgTooltipContent.querySelector('[data-floating-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 Object.assign(arrowElement.style, {\n left: numberToPx(arrowX),\n top: numberToPx(arrowY),\n [staticSide]: '-4px',\n position: 'absolute',\n });\n\n this.mgTooltipContent.setAttribute('data-placement', placement);\n });\n });\n };\n\n /**\n * Define selected element to become tooltip selector and init listeners\n * @param element - tooltiped element\n */\n private setTooltipedElement = (element: HTMLElement): void => {\n this.tooltipedElement = element;\n\n // Manage tooltipedElement focus events\n this.tooltipedElement.addEventListener('focus', () => {\n this.guard = Guard.FOCUS;\n this.setDisplay(true);\n });\n\n // as `click` event is the composition of `mousedown` and `mouseup` event,\n // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`\n // we reset the guard on `mouseup` event to unlock tooltip\n this.tooltipedElement.addEventListener('mouseup', () => {\n this.resetGuard();\n });\n\n this.tooltipedElement.addEventListener('blur', () => {\n this.resetGuard();\n this.setDisplay(false);\n });\n\n // manage tooltipElement & tooltipedElement mouseenter/mouseleave events\n this.tooltipedElement.addEventListener('mouseenter', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIP_ELEMENT);\n });\n\n this.tooltipedElement.addEventListener('mouseleave', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIP_ELEMENT);\n });\n };\n\n /**\n * Set button mutation observer\n * @param mgButton - mg-button to observe\n */\n private setMgButtonMutationObserver = (mgButton: HTMLMgButtonElement): void => {\n new MutationObserver(mutationList => {\n // stop process when none of mutations attributed is disabled\n if (!mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) return;\n\n // set guard when one of mutations is for a disabled with disabled-on-click\n if (mutationList.some((mutation: MutationRecord & { target: HTMLMgButtonElement }) => mutation.target.disabled && mutation.target.disableOnClick)) {\n this.guard = Guard.DISABLE_ON_CLICK;\n }\n\n // when the disabled-on-click guard is running we stop process\n if (this.guard === Guard.DISABLE_ON_CLICK) return;\n\n // update button wrapper\n this.setMgButtonWrapper(mgButton);\n\n // Since Firefox doesn't trigger a \"blur\" event when the \"disabled\" attribute is added or removed from a button\n // we have to manually unlock the guard because the \"blur\" handler of the tooltipedElement won't do it.\n this.resetGuard();\n\n // update Floating UI instance\n this.floatingUICleanup();\n this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');\n }).observe(mgButton, { attributes: true });\n };\n\n /**\n * Set tooltiped element aria-describedby\n * @param element - element to update\n */\n private setAriaDescribedby = (element: HTMLElement): void => {\n // Set aria-describedby\n if (!element.hasAttribute('aria-describedby')) {\n this.tooltipedElement.setAttribute('aria-describedby', this.identifier);\n } else {\n // We ensure to have uniq ids\n element.setAttribute('aria-describedby', `${[...new Set([...element.getAttribute('aria-describedby').split(' '), this.identifier])].join(' ')}`);\n }\n };\n\n /**\n * Render tooltip content element and init listeners\n */\n private renderTooltipContent(): void {\n if (this.mgTooltipContent !== undefined) {\n this.mgTooltipContent.setAttribute('id', this.identifier);\n } else {\n this.mgTooltipContent = document.createElement('mg-tooltip-content');\n this.mgTooltipContent.setAttribute('slot', 'content');\n this.mgTooltipContent.setAttribute('id', this.identifier);\n\n const arrow = document.createElement('div');\n arrow.setAttribute('slot', 'arrow');\n arrow.dataset.floatingArrow = '';\n this.mgTooltipContent.appendChild(arrow);\n\n // manage tooltipElement & tooltipedElement mouseenter/mouseleave events\n this.mgTooltipContent.addEventListener('mouseenter', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIPED_ELEMENT);\n });\n this.mgTooltipContent.addEventListener('mouseleave', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIPED_ELEMENT);\n });\n\n // append tooltip element to component\n this.element.appendChild(this.mgTooltipContent);\n }\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * set variables\n */\n componentWillLoad(): void {\n // Get windows to attach events\n this.windows = getWindows(window);\n\n // Get tooltip element\n this.renderTooltipContent();\n\n //validate properties\n this.watchPlacement(this.placement);\n this.watchDisabled(this.disabled);\n this.watchMessage(this.message);\n this.watchIdentifier(this.identifier);\n }\n\n /**\n * Get slotted element\n * Check if it already contain an interactive element, if not we need to add a tabIndex attribute\n * We need to attach the focused element to the tooltip (aria-describedby)\n */\n componentDidLoad(): void {\n // get slotted element wich is not the tooltip\n const slotElement: HTMLElement = this.element.querySelector(`*:not(#${this.identifier})`);\n\n // Get interactive element\n const interactiveElement: HTMLElement = slotElement.matches(focusableElements) ? slotElement : slotElement.shadowRoot?.querySelector(focusableElements);\n\n this.setTooltipedElement(interactiveElement || slotElement);\n\n // Check if slotted element is a disabled mg-button\n // In this case we wrap the mg-button into a div to enable the tooltip\n if (isButton(slotElement)) {\n this.setMgButtonMutationObserver(slotElement);\n this.setMgButtonWrapper(slotElement);\n }\n\n // Add tabindex to slotted element if we can't find any interactive element\n if (!this.disabled && [undefined, null].includes(interactiveElement)) {\n this.hasCustomTabIndex = true;\n slotElement.tabIndex = 0;\n // Add role on non-interactive element to work with \"aria-describedby\" for screen readers\n slotElement.setAttribute('role', 'button');\n }\n\n // apply a11y aria\n this.setAriaDescribedby(slotElement);\n\n // set Tooltip\n this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');\n\n // add document keyboard handler\n document.addEventListener('keydown', this.handlePressEscape);\n\n // check props\n this.watchDisplay(this.display);\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 this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');\n }\n\n /**\n * remove listeners\n */\n disconnectedCallback(): void {\n document.removeEventListener('keydown', this.handlePressEscape);\n this.windows?.forEach((localWindow: Window) => {\n localWindow.removeEventListener('click', this.handleClickOutside, false);\n localWindow.removeEventListener('keydown', this.handlePressEscape, false);\n });\n // cleanup Floating UI\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-tooltip2.js","mappings":"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","names":["__stencil_proxyCustomElement","createID","nextTick","isValideID","toString","isValidString","getWindows","focusableElements"],"sources":["src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx","../styles/dist/components/mg-tooltip.css?tag=mg-tooltip&encapsulation=shadow","src/components/atoms/mg-tooltip/mg-tooltip.tsx"],"sourcesContent":["import { type ExtendedPlacement, placements } from '../../../utils/floating-ui.utils';\nexport * from '../../../utils/floating-ui.utils';\n\nexport type GuardType = 'focus' | 'hoverTooltip' | 'hoverTooltiped' | 'disableOnClick';\n\nexport const Guard: Record<string, GuardType> = {\n FOCUS: 'focus',\n HOVER_TOOLTIP_ELEMENT: 'hoverTooltip',\n HOVER_TOOLTIPED_ELEMENT: 'hoverTooltiped',\n DISABLE_ON_CLICK: 'disableOnClick',\n};\n\n/**\n * Placement type from placements\n */\nexport type TooltipPlacementType = ExtendedPlacement & (typeof placements)[number];\n","/*!\n * @prop --mg-c-tooltip-border-radius: Defines the border radius of the tooltip. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-tooltip-color-background: Defines the background color of the tooltip. Default value: `--mg-b-color-dark`.\n * @prop --mg-c-tooltip-color-text: Defines the font color of the tooltip. Default value: `--mg-b-color-light`.\n */:host{display:inline-block}/*# sourceMappingURL=mg-tooltip.css.map */\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createID, focusableElements, getWindows, isValideID, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\nimport { computePosition, autoUpdate, flip, shift, limitShift, offset, arrow, type Strategy, type Placement } from '@floating-ui/dom';\nimport { type GuardType, Guard, type TooltipPlacementType, isFloatingUIPlacement } from './mg-tooltip.conf';\n\n/**\n * HTMLMgButtonElement type guard\n * @param element - element to check\n * @returns return true if type is HTMLMgButtonElement\n */\nconst isButton = (element: unknown): element is HTMLMgButtonElement => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes((element as Element).tagName);\n\n/**\n * @slot - Element that will display the tooltip\n */\n@Component({\n tag: 'mg-tooltip',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip.css',\n shadow: true,\n})\nexport class MgTooltip {\n /************\n * Internal *\n ************/\n\n private floatingUICleanup: ReturnType<typeof autoUpdate>;\n private mgTooltipContent: HTMLMgTooltipContentElement;\n private tooltipedElement: HTMLElement;\n private windows: Window[];\n private hasCustomTabIndex: boolean;\n\n // tooltip actions guards\n private guard: GuardType;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgTooltipElement;\n\n /**\n * Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n */\n @Prop() identifier: string = createID('mg-tooltip');\n @Watch('identifier')\n watchIdentifier(newValue: MgTooltip['identifier']): void {\n if (!isValideID(newValue)) {\n throw new Error(`<mg-tooltip> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n // use renderTooltipContent to update tooltip-content id\n this.renderTooltipContent();\n }\n\n /**\n * Displayed message in the tooltip\n */\n @Prop() message!: string;\n @Watch('message')\n watchMessage(newValue: MgTooltip['message']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-tooltip> prop \"message\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n }\n if (this.mgTooltipContent !== undefined) this.mgTooltipContent.message = newValue;\n }\n\n /**\n * Tooltip placement\n */\n @Prop({ mutable: true }) placement: TooltipPlacementType = 'bottom';\n @Watch('placement')\n watchPlacement(newValue): void {\n if (!isFloatingUIPlacement(newValue)) this.placement = 'bottom';\n }\n\n /**\n * Display tooltip\n */\n @Prop({ mutable: true }) display = false;\n @Watch('display')\n watchDisplay(newValue: MgTooltip['display']): void {\n if (newValue) {\n this.show();\n } else {\n this.hide();\n }\n }\n\n /**\n * Disable tooltip\n */\n @Prop() disabled = false;\n @Watch('disabled')\n watchDisabled(newValue: MgTooltip['disabled']): void {\n if (this.hasCustomTabIndex) {\n if (newValue) this.tooltipedElement.removeAttribute('tabindex');\n else if (!this.tooltipedElement.hasAttribute('tabindex')) this.tooltipedElement.setAttribute('tabindex', '0');\n }\n }\n\n /**\n * Show tooltip\n */\n private show = (): void => {\n // Make the tooltip visible\n this.mgTooltipContent.dataset.show = '';\n // hide when click outside on nextTick to prevent event to trigger after creation\n nextTick(() => {\n this.windows.forEach((localWindow: Window) => {\n localWindow.addEventListener('click', this.handleClickOutside, false);\n localWindow.addEventListener('keydown', this.handlePressEscape, false);\n });\n });\n };\n\n /**\n * Hide tooltip\n */\n private hide = (): void => {\n // Hide the tooltip\n this.mgTooltipContent.removeAttribute('data-show');\n // Remove event listener\n this.windows.forEach((localWindow: Window) => {\n localWindow.removeEventListener('click', this.handleClickOutside, false);\n localWindow.removeEventListener('keyboard', this.handlePressEscape, false);\n });\n };\n\n /**\n * Check if clicked outside of component and hide tooltip\n * @param event - mouse event\n */\n private handleClickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n if (event.target.closest('mg-tooltip') !== this.element) this.setDisplay(false);\n };\n\n /**\n * Check if 'Escape' key is pressed of component and hide tooltip\n * @param event - keyboard event\n */\n private handlePressEscape = (event: KeyboardEvent): void => {\n if (event.code === 'Escape') {\n this.setDisplay(false);\n this.resetGuard();\n }\n };\n\n /**\n * Method to set display prop\n * @param newValue - display prop new value\n * @param condition - additionnal condition to apply display prop newValue\n */\n private setDisplay = (newValue: MgTooltip['display'], condition = true): void => {\n if (!this.disabled && condition) this.display = newValue;\n };\n\n /**\n * Action for tooltip element and tooltiped element mouse listener\n * @param elementGuard - tooltip element guard\n * @param eventName - event name\n * @param conditionalGuard - guard condition\n */\n private tooltipMouseListenerAction = (elementGuard: GuardType, eventName: 'mouseenter' | 'mouseleave', conditionalGuard: GuardType): void => {\n // active FOCUS guard cancel process\n if ([Guard.FOCUS, Guard.DISABLE_ON_CLICK].includes(this.guard)) {\n return;\n }\n\n // Update guard by element guard\n this.guard = elementGuard;\n\n if (eventName !== 'mouseenter') {\n // process action in the next event loop macro task\n setTimeout(() => {\n this.setDisplay(false, this.guard !== conditionalGuard);\n this.resetGuard();\n }, 100);\n } else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {\n this.setDisplay(true);\n }\n };\n\n /**\n * Method to reset guard value\n */\n private resetGuard = (): void => {\n this.guard = undefined;\n };\n\n /**\n * Update slot content when it is a mg-button\n * @param mgButton - slotted mg-button\n */\n private setMgButtonWrapper = (mgButton: HTMLMgButtonElement): void => {\n const buttonWrapperClass = 'mg-c-tooltip__mg-button-wrapper';\n const hasButtonWrapper = mgButton.parentElement.classList.contains(buttonWrapperClass);\n // For disabled mg-button, we need to wrap it in a new element\n // We bind handlers to this new element to keep listener features as workaround to disabled mg-button `pointer-events: none`\n // AND to prevent multiple nested wrappers from rendering when a new render is called with a disabled mg-button\n if (mgButton.disabled && !hasButtonWrapper) {\n // wrap mg-button in a div\n const div = document.createElement('div');\n div.classList.add(buttonWrapperClass);\n mgButton.parentNode.insertBefore(div, mgButton);\n div.appendChild(mgButton);\n\n // update tooltipElement\n this.setTooltipedElement(div);\n } else if (!mgButton.disabled && hasButtonWrapper) {\n this.element.firstElementChild.replaceWith(mgButton);\n\n // update tooltipElement\n this.setTooltipedElement(mgButton);\n }\n };\n\n /**\n * Set Floating UI instance\n * @param strategy - Floating UI strategy to apply on instance\n */\n private setFloatingUI = (strategy: Strategy): void => {\n // Initial styles configuration\n Object.assign(this.mgTooltipContent.style, {\n position: strategy,\n top: '0',\n left: '0',\n transform: 'translate(0, 0)',\n });\n\n // Create Floating UI instance with autoUpdate\n this.floatingUICleanup = autoUpdate(this.tooltipedElement, this.mgTooltipContent, () => {\n computePosition(this.tooltipedElement, this.mgTooltipContent, {\n placement: this.placement as Placement,\n strategy,\n middleware: [offset(8), flip(), shift({ limiter: limitShift() }), arrow({ element: this.mgTooltipContent.querySelector('[data-floating-arrow]') })],\n }).then(({ x, y, placement, middlewareData }) => {\n Object.assign(this.mgTooltipContent.style, {\n transform: !isNaN(x) && !isNaN(y) ? `translate(${x}px, ${y}px)` : undefined,\n });\n\n // Update arrow style\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\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.mgTooltipContent.querySelector('[data-floating-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 Object.assign(arrowElement.style, {\n left: numberToPx(arrowX),\n top: numberToPx(arrowY),\n [staticSide]: '-4px',\n position: 'absolute',\n });\n\n this.mgTooltipContent.setAttribute('data-placement', placement);\n });\n });\n };\n\n /**\n * Define selected element to become tooltip selector and init listeners\n * @param element - tooltiped element\n */\n private setTooltipedElement = (element: HTMLElement): void => {\n this.tooltipedElement = element;\n\n // Manage tooltipedElement focus events\n this.tooltipedElement.addEventListener('focus', () => {\n this.guard = Guard.FOCUS;\n this.setDisplay(true);\n });\n\n // as `click` event is the composition of `mousedown` and `mouseup` event,\n // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`\n // we reset the guard on `mouseup` event to unlock tooltip\n this.tooltipedElement.addEventListener('mouseup', () => {\n this.resetGuard();\n });\n\n this.tooltipedElement.addEventListener('blur', () => {\n this.resetGuard();\n this.setDisplay(false);\n });\n\n // manage tooltipElement & tooltipedElement mouseenter/mouseleave events\n this.tooltipedElement.addEventListener('mouseenter', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIP_ELEMENT);\n });\n\n this.tooltipedElement.addEventListener('mouseleave', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIP_ELEMENT);\n });\n };\n\n /**\n * Set button mutation observer\n * @param mgButton - mg-button to observe\n */\n private setMgButtonMutationObserver = (mgButton: HTMLMgButtonElement): void => {\n new MutationObserver(mutationList => {\n // stop process when none of mutations attributed is disabled\n if (!mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) return;\n\n // set guard when one of mutations is for a disabled with disabled-on-click\n if (mutationList.some((mutation: MutationRecord & { target: HTMLMgButtonElement }) => mutation.target.disabled && mutation.target.disableOnClick)) {\n this.guard = Guard.DISABLE_ON_CLICK;\n }\n\n // when the disabled-on-click guard is running we stop process\n if (this.guard === Guard.DISABLE_ON_CLICK) return;\n\n // update button wrapper\n this.setMgButtonWrapper(mgButton);\n\n // Since Firefox doesn't trigger a \"blur\" event when the \"disabled\" attribute is added or removed from a button\n // we have to manually unlock the guard because the \"blur\" handler of the tooltipedElement won't do it.\n this.resetGuard();\n\n // update Floating UI instance\n this.floatingUICleanup();\n this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');\n }).observe(mgButton, { attributes: true });\n };\n\n /**\n * Set tooltiped element aria-describedby\n * @param element - element to update\n */\n private setAriaDescribedby = (element: HTMLElement): void => {\n // Set aria-describedby\n if (!element.hasAttribute('aria-describedby')) {\n this.tooltipedElement.setAttribute('aria-describedby', this.identifier);\n } else {\n // We ensure to have uniq ids\n element.setAttribute('aria-describedby', `${[...new Set([...element.getAttribute('aria-describedby').split(' '), this.identifier])].join(' ')}`);\n }\n };\n\n /**\n * Render tooltip content element and init listeners\n */\n private renderTooltipContent(): void {\n if (this.mgTooltipContent !== undefined) {\n this.mgTooltipContent.setAttribute('id', this.identifier);\n } else {\n this.mgTooltipContent = document.createElement('mg-tooltip-content');\n this.mgTooltipContent.setAttribute('slot', 'content');\n this.mgTooltipContent.setAttribute('id', this.identifier);\n\n const arrow = document.createElement('div');\n arrow.setAttribute('slot', 'arrow');\n arrow.dataset.floatingArrow = '';\n this.mgTooltipContent.appendChild(arrow);\n\n // manage tooltipElement & tooltipedElement mouseenter/mouseleave events\n this.mgTooltipContent.addEventListener('mouseenter', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIPED_ELEMENT);\n });\n this.mgTooltipContent.addEventListener('mouseleave', () => {\n this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIPED_ELEMENT);\n });\n\n // append tooltip element to component\n this.element.appendChild(this.mgTooltipContent);\n }\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * set variables\n */\n componentWillLoad(): void {\n // Get windows to attach events\n this.windows = getWindows(window);\n\n // Get tooltip element\n this.renderTooltipContent();\n\n //validate properties\n this.watchPlacement(this.placement);\n this.watchDisabled(this.disabled);\n this.watchMessage(this.message);\n this.watchIdentifier(this.identifier);\n }\n\n /**\n * Get slotted element\n * Check if it already contain an interactive element, if not we need to add a tabIndex attribute\n * We need to attach the focused element to the tooltip (aria-describedby)\n */\n componentDidLoad(): void {\n // get slotted element wich is not the tooltip\n const slotElement: HTMLElement = this.element.querySelector(`*:not(#${this.identifier})`);\n\n // Get interactive element\n const interactiveElement: HTMLElement = slotElement.matches(focusableElements) ? slotElement : slotElement.shadowRoot?.querySelector(focusableElements);\n\n this.setTooltipedElement(interactiveElement || slotElement);\n\n // Check if slotted element is a disabled mg-button\n // In this case we wrap the mg-button into a div to enable the tooltip\n if (isButton(slotElement)) {\n this.setMgButtonMutationObserver(slotElement);\n this.setMgButtonWrapper(slotElement);\n }\n\n // Add tabindex to slotted element if we can't find any interactive element\n if (!this.disabled && [undefined, null].includes(interactiveElement)) {\n this.hasCustomTabIndex = true;\n slotElement.tabIndex = 0;\n // Add role on non-interactive element to work with \"aria-describedby\" for screen readers\n slotElement.setAttribute('role', 'button');\n }\n\n // apply a11y aria\n this.setAriaDescribedby(slotElement);\n\n // set Tooltip\n this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');\n\n // add document keyboard handler\n document.addEventListener('keydown', this.handlePressEscape);\n\n // check props\n this.watchDisplay(this.display);\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 this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');\n }\n\n /**\n * remove listeners\n */\n disconnectedCallback(): void {\n document.removeEventListener('keydown', this.handlePressEscape);\n this.windows?.forEach((localWindow: Window) => {\n localWindow.removeEventListener('click', this.handleClickOutside, false);\n localWindow.removeEventListener('keydown', this.handlePressEscape, false);\n });\n // cleanup Floating UI\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}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"app-globals-DQuL1Twl.js","sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"names":[],"mappings":"AAAY,MAAC,aAAa,GAAG,MAAM;;;;"}
|