@mgdis/mg-components 6.8.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-234e834a.js → index-CTU2m-sy.js} +18 -9
- 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_37.cjs.entry.js +397 -767
- package/dist/cjs/mg-action-more_37.cjs.entry.js.map +1 -1
- 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 +3 -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 +5 -5
- package/dist/collection/components/atoms/mg-button/mg-button.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.js +8 -3
- 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 +8 -3
- 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.js +49 -44
- 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/locales/en/messages.json +6 -2
- package/dist/collection/locales/fr/messages.json +6 -2
- 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 +17 -8
- 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 +11 -11
- 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 +8 -8
- 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 +24 -20
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +21 -17
- 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 +23 -19
- 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.js +8 -8
- package/dist/components/mg-table.js.map +1 -1
- 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-544778a7.js → index-SQlkEaXW.js} +18 -9
- 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_37.entry.js +397 -765
- package/dist/esm/mg-action-more_37.entry.js.map +1 -1
- 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 +6 -2
- package/dist/mg-components/locales/fr/messages.json +6 -2
- 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-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.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +1 -1
- 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.d.ts +8 -8
- 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.d.ts +27 -27
- package/dist/types/stencil-public-runtime.d.ts +1 -0
- package/ide/intellij/web-types.json +89 -45
- package/ide/vscode/html-custom-data.json +26 -26
- package/package.json +23 -23
- 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-234e834a.js.map +0 -1
- package/dist/cjs/index.es-b90f74d4.js +0 -151
- package/dist/cjs/index.es-b90f74d4.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-544778a7.js.map +0 -1
- package/dist/esm/index.es-517b1bf2.js +0 -129
- package/dist/esm/index.es-517b1bf2.js.map +0 -1
- package/dist/esm/mg-input.conf-712c7bb6.js.map +0 -1
- package/dist/mg-components/p-12a1edee.js +0 -2
- package/dist/mg-components/p-12a1edee.js.map +0 -1
- package/dist/mg-components/p-2884f369.js.map +0 -1
- package/dist/mg-components/p-9bc53279.js +0 -2
- package/dist/mg-components/p-9bc53279.js.map +0 -1
- package/dist/mg-components/p-ad98f3d8.entry.js +0 -2
- package/dist/mg-components/p-ad98f3d8.entry.js.map +0 -1
- package/dist/mg-components/p-c10433db.entry.js +0 -2
- package/dist/mg-components/p-c10433db.entry.js.map +0 -1
- package/dist/mg-components/p-c67e4934.entry.js +0 -2
- package/dist/mg-components/p-c67e4934.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-f72efb64.entry.js +0 -2
- package/dist/mg-components/p-f72efb64.entry.js.map +0 -1
- package/dist/mg-components/p-fd4a7980.entry.js +0 -2
- package/dist/mg-components/p-fd4a7980.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
|
@@ -31,6 +31,14 @@ export class MgPagination {
|
|
|
31
31
|
* If not set, it will be created.
|
|
32
32
|
*/
|
|
33
33
|
this.identifier = createID('mg-pagination');
|
|
34
|
+
/**
|
|
35
|
+
* Hide navigation label
|
|
36
|
+
*/
|
|
37
|
+
this.hideNavigationLabels = false;
|
|
38
|
+
/**
|
|
39
|
+
* Hide select input
|
|
40
|
+
*/
|
|
41
|
+
this.hidePageCount = false;
|
|
34
42
|
/**
|
|
35
43
|
* Component total pages
|
|
36
44
|
*/
|
|
@@ -108,10 +116,10 @@ export class MgPagination {
|
|
|
108
116
|
* @returns HTML Element
|
|
109
117
|
*/
|
|
110
118
|
render() {
|
|
111
|
-
const navigationActionButton = (disabled, action) => (h("mg-button", { key: '
|
|
119
|
+
const navigationActionButton = (disabled, action) => (h("mg-button", { key: '3c29dbe0db55d6eda6d53ee174e0e38c086beddf', label: this.messages.pagination[`${action}Page`],
|
|
112
120
|
// eslint-disable-next-line react/jsx-no-bind
|
|
113
|
-
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '
|
|
114
|
-
return (h(Host, { key: '
|
|
121
|
+
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '677232241e8eb8beca9b9ce4a6f997dd69a5e3c1', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { key: '83f0db42841d81a3bc2cea5bec4106b1f102a6e5', icon: "chevron-right" })));
|
|
122
|
+
return (h(Host, { key: '26dea8cd6c77188eddec2e1b35dcf01d8ee458eb', hidden: this.totalPages < 2 }, h("nav", { key: 'afe38df7e48edb84598774aad6ca72225ef074e8', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("div", { key: '1cfd5d883a640fc274fe5f6c8baec734e4479486', class: "mg-c-pagination__page-count" }, h("mg-input-select", { key: 'e58e285a97a1dedf7410a0240ea5607808d66db1', identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { key: 'd5d2cc3dc4324d1a3e2386eaf1da03024313fe24', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page)), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
|
|
115
123
|
}
|
|
116
124
|
static get is() { return "mg-pagination"; }
|
|
117
125
|
static get encapsulation() { return "shadow"; }
|
|
@@ -175,7 +183,7 @@ export class MgPagination {
|
|
|
175
183
|
"references": {}
|
|
176
184
|
},
|
|
177
185
|
"required": false,
|
|
178
|
-
"optional":
|
|
186
|
+
"optional": false,
|
|
179
187
|
"docs": {
|
|
180
188
|
"tags": [],
|
|
181
189
|
"text": "Hide navigation label"
|
|
@@ -183,7 +191,8 @@ export class MgPagination {
|
|
|
183
191
|
"getter": false,
|
|
184
192
|
"setter": false,
|
|
185
193
|
"attribute": "hide-navigation-labels",
|
|
186
|
-
"reflect": false
|
|
194
|
+
"reflect": false,
|
|
195
|
+
"defaultValue": "false"
|
|
187
196
|
},
|
|
188
197
|
"hidePageCount": {
|
|
189
198
|
"type": "boolean",
|
|
@@ -194,7 +203,7 @@ export class MgPagination {
|
|
|
194
203
|
"references": {}
|
|
195
204
|
},
|
|
196
205
|
"required": false,
|
|
197
|
-
"optional":
|
|
206
|
+
"optional": false,
|
|
198
207
|
"docs": {
|
|
199
208
|
"tags": [],
|
|
200
209
|
"text": "Hide select input"
|
|
@@ -202,7 +211,8 @@ export class MgPagination {
|
|
|
202
211
|
"getter": false,
|
|
203
212
|
"setter": false,
|
|
204
213
|
"attribute": "hide-page-count",
|
|
205
|
-
"reflect": false
|
|
214
|
+
"reflect": false,
|
|
215
|
+
"defaultValue": "false"
|
|
206
216
|
},
|
|
207
217
|
"totalPages": {
|
|
208
218
|
"type": "number",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-pagination.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-pagination/mg-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,IAAI,GAAG,CAAC,EAAY,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;AAO3J,MAAM,OAAO,YAAY;IALzB;QAsBE;;;WAGG;QACK,eAAU,GAAW,QAAQ,CAAC,eAAe,CAAC,CAAC;QAwBvD;;WAEG;QACK,eAAU,GAAG,CAAC,CAAC;QAQvB;;WAEG;QACqC,gBAAW,GAAG,CAAC,CAAC;QAiBxD;;;WAGG;QACK,aAAQ,GAAG,CAAC,MAAc,EAAQ,EAAE;YAC1C,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC5B,CAAC,CAAC;QAEF;;sBAEc;QAEd;;;WAGG;QACK,iBAAY,GAAG,CAAC,KAAgD,EAAQ,EAAE;YAChF,MAAM,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACtC,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC,CAAC;QAEF;;;;WAIG;QACK,mBAAc,GAAG,CAAC,MAAc,EAAE,QAAiB,EAAQ,EAAE;YACnE,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;QAC7G,CAAC,CAAC;KAoEH;IArJC,eAAe,CAAC,QAAoC;QAClD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,OAAO,CAAC,KAAK,CAAC,qEAAqE,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC5G,CAAC;IACH,CAAC;IAuBD,kBAAkB,CAAC,QAAgB;QACjC,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,2EAA2E,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACpH,CAAC;IACH,CAAC;IAOD,mBAAmB,CAAC,QAAgB;QAClC,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,4EAA4E,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACrH,CAAC;aAAM,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YACtC,MAAM,IAAI,KAAK,CAAC,wEAAwE,CAAC,CAAC;QAC5F,CAAC;QAED,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAqCD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;QACnD,WAAW;QACX,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC3C,oBAAoB;QACpB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;YAClD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC;QAC9C,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,MAAM,sBAAsB,GAAG,CAAC,QAAiB,EAAE,MAAc,EAAE,EAAE,CAAC,CACpE,kEACE,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,MAAM,MAAM,CAAC;YAChD,6CAA6C;YAC7C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,MAAM,EACd,MAAM,EAAE,IAAI,CAAC,oBAAoB;YAEhC,MAAM,KAAK,gBAAgB,CAAC,QAAQ,IAAI,gEAAS,IAAI,EAAC,cAAc,GAAW;YAC/E,CAAC,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC;YAC3D,MAAM,KAAK,gBAAgB,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAC,eAAe,GAAW,CACnE,CACb,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDAAC,MAAM,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC;YAC/B,4DAAK,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,kCAAkC,EAAE,IAAI,CAAC,aAAa,EAAE;gBAC3J,sBAAsB,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC;gBACxE,CAAC,IAAI,CAAC,aAAa,IAAI,CACtB,4DAAK,KAAK,EAAC,6BAA6B;oBACtC,wEACE,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,SAAS,EACvC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAC7D,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,UAAU,gBAC9B,IAAI,qBACC,IAAI,CAAC,YAAY,EAClC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,6BAEjB;oBACnB,6DAAM,KAAK,EAAC,sBAAsB;wBAC/B,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI;;wBAAG,IAAI,CAAC,WAAW,CAC5C;;oBACJ,IAAI,CAAC,UAAU;;oBAAG,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CACrG,CACP;gBACA,sBAAsB,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAC/E,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID, isValideID, toString } from '@mgdis/stencil-helpers';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/**\n * Range generator\n *\n * ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n *\n * range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n */\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);\n\n@Component({\n tag: 'mg-pagination',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-pagination.css',\n shadow: true,\n})\nexport class MgPagination {\n /************\n * Internal *\n ************/\n\n // Locales\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgPaginationElement;\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-pagination');\n @Watch('identifier')\n watchIdentifier(newValue: MgPagination['identifier']): void {\n if (!isValideID(newValue)) {\n console.error(`<mg-pagination> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Panignation label. Is a short description.\n * Customize default value can be usefull to improve accessibility\n */\n @Prop({ mutable: true }) label: string;\n\n /**\n * Hide navigation label\n */\n @Prop() hideNavigationLabels?: boolean;\n\n /**\n * Hide select input\n */\n @Prop() hidePageCount?: boolean;\n\n /**\n * Component total pages\n */\n @Prop() totalPages = 1;\n @Watch('totalPages')\n validateTotalPages(newValue: number): void {\n if (newValue < 1) {\n throw new Error(`<mg-pagination> prop \"totalPages\" must be greater than 0. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Component current page\n */\n @Prop({ reflect: true, mutable: true }) currentPage = 1;\n @Watch('currentPage')\n validateCurrentPage(newValue: number): void {\n if (newValue < 1) {\n throw new Error(`<mg-pagination> prop \"currentPage\" must be greater than 0. Passed value: ${toString(newValue)}.`);\n } else if (newValue > this.totalPages) {\n throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page.');\n }\n\n this.currentPageChange.emit(newValue);\n }\n\n /**\n * Emmited event when current page change\n */\n @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n /**\n * Change current page from target\n * @param target - target page\n */\n private goToPage = (target: number): void => {\n this.currentPage = target;\n };\n\n /************\n * Handlers *\n ************/\n\n /**\n * select handler\n * @param event - value change event\n */\n private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n const to = Number(event.target.value);\n this.goToPage(to > 0 ? to : 1);\n };\n\n /**\n * Go to 'previous/next' page button handler\n * @param action - navigation action\n * @param disabled - button disable state\n */\n private handleGoToPage = (action: string, disabled: boolean): void => {\n !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.watchIdentifier(this.identifier);\n this.validateTotalPages(this.totalPages);\n this.validateCurrentPage(this.currentPage);\n // Set default label\n if (this.label === undefined || this.label === '') {\n this.label = this.messages.pagination.label;\n }\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const navigationActionButton = (disabled: boolean, action: string) => (\n <mg-button\n label={this.messages.pagination[`${action}Page`]}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={() => this.handleGoToPage(action, disabled)}\n disabled={disabled}\n variant=\"flat\"\n isIcon={this.hideNavigationLabels}\n >\n {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n {!this.hideNavigationLabels && this.messages.general[action]}\n {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n </mg-button>\n );\n\n return (\n <Host hidden={this.totalPages < 2}>\n <nav role=\"navigation\" aria-label={this.label} id={this.identifier} class={{ 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount }}>\n {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n {!this.hidePageCount && (\n <div class=\"mg-c-pagination__page-count\">\n <mg-input-select\n identifier={`${this.identifier}-select`}\n items={range(1, this.totalPages).map(page => page.toString())}\n label={this.messages.pagination.selectPage}\n label-hide={true}\n on-value-change={this.handleSelect}\n value={this.currentPage.toString()}\n placeholder-hide\n ></mg-input-select>\n <span class=\"mg-u-visually-hidden\">\n {this.messages.pagination.page} {this.currentPage}\n </span>\n / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n </div>\n )}\n {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n </nav>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"mg-pagination.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-pagination/mg-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID, isValideID, toString } from '@mgdis/stencil-helpers';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/**\n * Range generator\n *\n * ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n *\n * range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n */\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);\n\n@Component({\n tag: 'mg-pagination',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-pagination.css',\n shadow: true,\n})\nexport class MgPagination {\n /************\n * Internal *\n ************/\n\n // Locales\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgPaginationElement;\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-pagination');\n @Watch('identifier')\n watchIdentifier(newValue: MgPagination['identifier']): void {\n if (!isValideID(newValue)) {\n console.error(`<mg-pagination> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Panignation label. Is a short description.\n * Customize default value can be usefull to improve accessibility\n */\n @Prop({ mutable: true }) label: string;\n\n /**\n * Hide navigation label\n */\n @Prop() hideNavigationLabels = false;\n\n /**\n * Hide select input\n */\n @Prop() hidePageCount = false;\n\n /**\n * Component total pages\n */\n @Prop() totalPages = 1;\n @Watch('totalPages')\n validateTotalPages(newValue: number): void {\n if (newValue < 1) {\n throw new Error(`<mg-pagination> prop \"totalPages\" must be greater than 0. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Component current page\n */\n @Prop({ reflect: true, mutable: true }) currentPage = 1;\n @Watch('currentPage')\n validateCurrentPage(newValue: number): void {\n if (newValue < 1) {\n throw new Error(`<mg-pagination> prop \"currentPage\" must be greater than 0. Passed value: ${toString(newValue)}.`);\n } else if (newValue > this.totalPages) {\n throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page.');\n }\n this.currentPageChange.emit(newValue);\n }\n\n /**\n * Emmited event when current page change\n */\n @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n /**\n * Change current page from target\n * @param target - target page\n */\n private goToPage = (target: number): void => {\n this.currentPage = target;\n };\n\n /************\n * Handlers *\n ************/\n\n /**\n * select handler\n * @param event - value change event\n */\n private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n const to = Number(event.target.value);\n this.goToPage(to > 0 ? to : 1);\n };\n\n /**\n * Go to 'previous/next' page button handler\n * @param action - navigation action\n * @param disabled - button disable state\n */\n private handleGoToPage = (action: string, disabled: boolean): void => {\n !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.watchIdentifier(this.identifier);\n this.validateTotalPages(this.totalPages);\n this.validateCurrentPage(this.currentPage);\n // Set default label\n if (this.label === undefined || this.label === '') {\n this.label = this.messages.pagination.label;\n }\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const navigationActionButton = (disabled: boolean, action: string) => (\n <mg-button\n label={this.messages.pagination[`${action}Page`]}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={() => this.handleGoToPage(action, disabled)}\n disabled={disabled}\n variant=\"flat\"\n isIcon={this.hideNavigationLabels}\n >\n {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n {!this.hideNavigationLabels && this.messages.general[action]}\n {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n </mg-button>\n );\n\n return (\n <Host hidden={this.totalPages < 2}>\n <nav role=\"navigation\" aria-label={this.label} id={this.identifier} class={{ 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount }}>\n {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n {!this.hidePageCount && (\n <div class=\"mg-c-pagination__page-count\">\n <mg-input-select\n identifier={`${this.identifier}-select`}\n items={range(1, this.totalPages).map(page => page.toString())}\n label={this.messages.pagination.selectPage}\n label-hide={true}\n on-value-change={this.handleSelect}\n value={this.currentPage.toString()}\n placeholder-hide\n ></mg-input-select>\n <span class=\"mg-u-visually-hidden\">\n {this.messages.pagination.page} {this.currentPage}\n </span>\n / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n </div>\n )}\n {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n </nav>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -20,7 +20,7 @@ export class MgPanel {
|
|
|
20
20
|
/**
|
|
21
21
|
* Define title position
|
|
22
22
|
*/
|
|
23
|
-
this.titlePosition =
|
|
23
|
+
this.titlePosition = 'left';
|
|
24
24
|
/**
|
|
25
25
|
* Panel is opened
|
|
26
26
|
*/
|
|
@@ -28,7 +28,11 @@ export class MgPanel {
|
|
|
28
28
|
/**
|
|
29
29
|
* Define expand toggle button display
|
|
30
30
|
*/
|
|
31
|
-
this.expandToggleDisplay =
|
|
31
|
+
this.expandToggleDisplay = 'text';
|
|
32
|
+
/**
|
|
33
|
+
* Disable possibility to toggle expand
|
|
34
|
+
*/
|
|
35
|
+
this.expandToggleDisabled = false;
|
|
32
36
|
/**
|
|
33
37
|
* Component classes
|
|
34
38
|
*/
|
|
@@ -188,7 +192,7 @@ export class MgPanel {
|
|
|
188
192
|
*/
|
|
189
193
|
render() {
|
|
190
194
|
const headerId = `${this.identifier}-header`;
|
|
191
|
-
return (h("section", { key: '
|
|
195
|
+
return (h("section", { key: '82d79e85a6d6e376482b89fa9d03f5e381499dbc', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '6b1753575b2faece344d14d473ded961bc6ac7a1' }, h("header", { key: 'aae91889ab75aacfee1eb0b164fb60ee90d3be30', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'eb2cc533c8181e962c21666d67cf920b2e17cdd6', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '8a638a7194bd57a4b3f849401436e5a05160080a' })))));
|
|
192
196
|
}
|
|
193
197
|
static get is() { return "mg-panel"; }
|
|
194
198
|
static get encapsulation() { return "shadow"; }
|
|
@@ -325,7 +329,7 @@ export class MgPanel {
|
|
|
325
329
|
"setter": false,
|
|
326
330
|
"attribute": "title-position",
|
|
327
331
|
"reflect": false,
|
|
328
|
-
"defaultValue": "
|
|
332
|
+
"defaultValue": "'left'"
|
|
329
333
|
},
|
|
330
334
|
"expanded": {
|
|
331
335
|
"type": "boolean",
|
|
@@ -371,7 +375,7 @@ export class MgPanel {
|
|
|
371
375
|
"setter": false,
|
|
372
376
|
"attribute": "expand-toggle-display",
|
|
373
377
|
"reflect": false,
|
|
374
|
-
"defaultValue": "
|
|
378
|
+
"defaultValue": "'text'"
|
|
375
379
|
},
|
|
376
380
|
"expandToggleDisabled": {
|
|
377
381
|
"type": "boolean",
|
|
@@ -382,7 +386,7 @@ export class MgPanel {
|
|
|
382
386
|
"references": {}
|
|
383
387
|
},
|
|
384
388
|
"required": false,
|
|
385
|
-
"optional":
|
|
389
|
+
"optional": false,
|
|
386
390
|
"docs": {
|
|
387
391
|
"tags": [],
|
|
388
392
|
"text": "Disable possibility to toggle expand"
|
|
@@ -390,7 +394,8 @@ export class MgPanel {
|
|
|
390
394
|
"getter": false,
|
|
391
395
|
"setter": false,
|
|
392
396
|
"attribute": "expand-toggle-disabled",
|
|
393
|
-
"reflect": false
|
|
397
|
+
"reflect": false,
|
|
398
|
+
"defaultValue": "false"
|
|
394
399
|
}
|
|
395
400
|
};
|
|
396
401
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-panel.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-panel/mg-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList, isValidString, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n/**\n * @slot - Panel content\n * @slot header-right - Header right panel content\n */\n@Component({\n tag: 'mg-panel',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-panel.css',\n shadow: true,\n})\nexport class MgPanel {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private editInputElement: HTMLMgInputTextElement;\n\n // Locales\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgPanelElement;\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-panel');\n @Watch('identifier')\n watchIdentifier(newValue: MgPanel['identifier']): void {\n if (!isValideID(newValue)) {\n console.error(`<mg-panel> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Panel title\n */\n @Prop({ mutable: true }) panelTitle!: string;\n @Watch('panelTitle')\n validatePanelTitle(newValue: MgPanel['panelTitle']): void {\n if (!isValidString(newValue)) throw new Error(`<mg-panel> prop \"panelTitle\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n this.titleChange.emit(newValue);\n }\n\n /**\n * Panel title pattern\n */\n @Prop() titlePattern?: string;\n\n /**\n * Panel title pattern error message\n */\n @Prop() titlePatternErrorMessage?: string;\n @Watch('titlePattern')\n @Watch('titlePatternErrorMessage')\n validateTitlePattern(newValue: string): void {\n if (newValue !== undefined && !this.titleEditable) throw new Error(`<mg-panel> prop \"titleEditable\" must be set to \"true\".`);\n }\n\n /**\n * Define if panel title is editable\n */\n @Prop({ mutable: true }) titleEditable = false;\n\n /**\n * Define title position\n */\n @Prop() titlePosition: TitlePositionType = titlePositions[0];\n @Watch('titlePosition')\n validateTitlePosition(newValue: MgPanel['titlePosition']) {\n if (!titlePositions.includes(newValue)) throw new Error(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n\n /**\n * Panel is opened\n */\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n handleExpanded(newValue: MgPanel['expanded']): void {\n this.expandedChange.emit(newValue);\n }\n\n /**\n * Define expand toggle button display\n */\n @Prop() expandToggleDisplay: ExpandToggleDisplayType = expandToggleDisplays[0];\n @Watch('expandToggleDisplay')\n validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']) {\n if (!expandToggleDisplays.includes(newValue))\n throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${toString(newValue)}.`);\n if (newValue === 'icon' && this.titleEditable) this.titleEditable = false;\n }\n\n /**\n * Disable possibility to toggle expand\n */\n @Prop() expandToggleDisabled?: boolean;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-panel']);\n\n /**\n * Title is in edition mode\n */\n @State() isEditing = false;\n\n /**\n * Cache for updated panel title before validation\n */\n @State() updatedPanelTitle: string;\n\n /**\n * Emmited event when title change\n */\n @Event({ eventName: 'title-change' }) titleChange: EventEmitter<HTMLMgPanelElement['panelTitle']>;\n\n /**\n * Emmited event when expanded change\n */\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgPanelElement['expanded']>;\n\n /************\n * Methods *\n ************/\n\n /**\n * Toggle is editing state\n */\n private toggleIsEditing = (): void => {\n this.isEditing = !this.isEditing;\n };\n\n /************\n * Handlers *\n ************/\n\n /**\n * Collapse button click handler\n */\n private handleCollapseButton = (): void => {\n if (!this.expandToggleDisabled) this.expanded = !this.expanded;\n };\n\n /**\n * Edit button click handler\n */\n private handleEditButton = (): void => {\n this.toggleIsEditing();\n };\n\n /**\n * Update title handler\n * @param event - input value change event\n */\n private handleUpdateTitle = (event: CustomEvent<HTMLMgInputTextElement['value']>): void => {\n this.updatedPanelTitle = event.detail;\n };\n\n /**\n * Cancel edition button handler\n */\n private handleCancelEditButton = (): void => {\n this.updatedPanelTitle = undefined;\n this.toggleIsEditing();\n };\n\n /**\n * Validate edition button handler\n */\n private handleValidateEditButton = (): void => {\n if (!this.editInputElement.valid) return;\n if (this.updatedPanelTitle !== undefined) this.panelTitle = this.updatedPanelTitle;\n this.toggleIsEditing();\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.watchIdentifier(this.identifier);\n this.validateTitlePattern(this.titlePattern);\n this.validateTitlePattern(this.titlePatternErrorMessage);\n this.validatePanelTitle(this.panelTitle);\n this.validateExpandToggleDisplay(this.expandToggleDisplay);\n this.validateTitlePosition(this.titlePosition);\n }\n\n /**\n * Edit DOM after render\n */\n componentDidRender(): void {\n // when we are editing we get focus on edition input\n if (this.isEditing) this.editInputElement.setFocus();\n }\n\n /*************\n * Render *\n *************/\n\n /**\n * Render collapse button\n * @returns collpase button\n */\n private renderCollapseButton = (): HTMLMgButtonElement => (\n <mg-button\n onClick={this.handleCollapseButton}\n variant=\"flat\"\n aria-expanded={this.expanded.toString()}\n aria-controls={`${this.identifier}-content`}\n disabled={this.expandToggleDisabled}\n isIcon={this.expandToggleDisplay === 'icon'}\n label={this.panelTitle}\n >\n <span class=\"mg-c-panel__collapse-button-content\">\n <mg-icon icon=\"chevron-up\" class={{ 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded }}></mg-icon>\n {!this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle}\n </span>\n </mg-button>\n );\n\n /**\n * Render edit button\n * @returns edit Button\n */\n private renderEditButton = (): HTMLMgButtonElement => (\n <mg-button key=\"edit-button\" is-icon variant=\"flat\" label={this.messages.panel.editLabel} onClick={this.handleEditButton}>\n <mg-icon icon=\"pen\"></mg-icon>\n </mg-button>\n );\n\n /**\n * Render input button\n * @returns edit title input\n */\n private renderEditInput = (): HTMLMgInputTextElement => (\n <mg-input-text\n key=\"edition-input\"\n label={this.messages.panel.editLabel}\n label-hide\n value={this.panelTitle}\n onValue-change={this.handleUpdateTitle}\n characterLeftHide={true}\n pattern={this.titlePattern}\n pattern-error-message={this.titlePatternErrorMessage}\n identifier={`${this.identifier}-edition-input`}\n ref={(el: HTMLMgInputTextElement) => (this.editInputElement = el)}\n >\n <mg-button slot=\"append-input\" label={this.messages.general.cancel} is-icon variant=\"secondary\" onClick={this.handleCancelEditButton}>\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n <mg-button slot=\"append-input\" label={this.messages.general.confirm} is-icon variant=\"secondary\" onClick={this.handleValidateEditButton}>\n <mg-icon icon=\"check\"></mg-icon>\n </mg-button>\n </mg-input-text>\n );\n\n /**\n * Render title\n * @returns title element\n */\n private renderTitle = (): HTMLElement[] => {\n const elementsToRender: HTMLElement[] = [this.renderCollapseButton()];\n if (this.titleEditable) {\n if (!this.isEditing) elementsToRender.push(this.renderEditButton());\n else elementsToRender.push(this.renderEditInput());\n }\n\n return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;\n };\n\n /**\n * Render header children\n * @returns header child\n */\n private renderHeaderChildren = (): HTMLElement[] => {\n const children = [\n <div\n class={{ 'mg-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }}\n key={this.panelTitle}\n >\n {this.renderTitle()}\n </div>,\n <div class=\"mg-c-panel__header-content\" key=\"slot-header\">\n <slot name=\"header-right\"></slot>\n </div>,\n ];\n return this.titlePosition === 'right' ? children.reverse() : children;\n };\n\n /**\n * Render component\n * @returns rendered component\n */\n render(): HTMLElement {\n const headerId = `${this.identifier}-header`;\n return (\n <section class={this.classCollection.join()} id={this.identifier}>\n <mg-card>\n <header class={{ 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n {this.renderHeaderChildren()}\n </header>\n <article class=\"mg-c-panel__content\" id={`${this.identifier}-content`} aria-labelledby={headerId} hidden={!this.expanded}>\n <slot></slot>\n </article>\n </mg-card>\n </section>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"mg-panel.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-panel/mg-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList, isValidString, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n/**\n * @slot - Panel content\n * @slot header-right - Header right panel content\n */\n@Component({\n tag: 'mg-panel',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-panel.css',\n shadow: true,\n})\nexport class MgPanel {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private editInputElement: HTMLMgInputTextElement;\n\n // Locales\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgPanelElement;\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-panel');\n @Watch('identifier')\n watchIdentifier(newValue: MgPanel['identifier']): void {\n if (!isValideID(newValue)) {\n console.error(`<mg-panel> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Panel title\n */\n @Prop({ mutable: true }) panelTitle!: string;\n @Watch('panelTitle')\n validatePanelTitle(newValue: MgPanel['panelTitle']): void {\n if (!isValidString(newValue)) throw new Error(`<mg-panel> prop \"panelTitle\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n this.titleChange.emit(newValue);\n }\n\n /**\n * Panel title pattern\n */\n @Prop() titlePattern?: string;\n\n /**\n * Panel title pattern error message\n */\n @Prop() titlePatternErrorMessage?: string;\n @Watch('titlePattern')\n @Watch('titlePatternErrorMessage')\n validateTitlePattern(newValue: string): void {\n if (newValue !== undefined && !this.titleEditable) throw new Error(`<mg-panel> prop \"titleEditable\" must be set to \"true\".`);\n }\n\n /**\n * Define if panel title is editable\n */\n @Prop({ mutable: true }) titleEditable = false;\n\n /**\n * Define title position\n */\n @Prop() titlePosition: TitlePositionType = 'left';\n @Watch('titlePosition')\n validateTitlePosition(newValue: MgPanel['titlePosition']) {\n if (!titlePositions.includes(newValue)) throw new Error(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n\n /**\n * Panel is opened\n */\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n handleExpanded(newValue: MgPanel['expanded']): void {\n this.expandedChange.emit(newValue);\n }\n\n /**\n * Define expand toggle button display\n */\n @Prop() expandToggleDisplay: ExpandToggleDisplayType = 'text';\n @Watch('expandToggleDisplay')\n validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']) {\n if (!expandToggleDisplays.includes(newValue))\n throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${toString(newValue)}.`);\n if (newValue === 'icon' && this.titleEditable) this.titleEditable = false;\n }\n\n /**\n * Disable possibility to toggle expand\n */\n @Prop() expandToggleDisabled = false;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-panel']);\n\n /**\n * Title is in edition mode\n */\n @State() isEditing = false;\n\n /**\n * Cache for updated panel title before validation\n */\n @State() updatedPanelTitle: string;\n\n /**\n * Emmited event when title change\n */\n @Event({ eventName: 'title-change' }) titleChange: EventEmitter<HTMLMgPanelElement['panelTitle']>;\n\n /**\n * Emmited event when expanded change\n */\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgPanelElement['expanded']>;\n\n /************\n * Methods *\n ************/\n\n /**\n * Toggle is editing state\n */\n private toggleIsEditing = (): void => {\n this.isEditing = !this.isEditing;\n };\n\n /************\n * Handlers *\n ************/\n\n /**\n * Collapse button click handler\n */\n private handleCollapseButton = (): void => {\n if (!this.expandToggleDisabled) this.expanded = !this.expanded;\n };\n\n /**\n * Edit button click handler\n */\n private handleEditButton = (): void => {\n this.toggleIsEditing();\n };\n\n /**\n * Update title handler\n * @param event - input value change event\n */\n private handleUpdateTitle = (event: CustomEvent<HTMLMgInputTextElement['value']>): void => {\n this.updatedPanelTitle = event.detail;\n };\n\n /**\n * Cancel edition button handler\n */\n private handleCancelEditButton = (): void => {\n this.updatedPanelTitle = undefined;\n this.toggleIsEditing();\n };\n\n /**\n * Validate edition button handler\n */\n private handleValidateEditButton = (): void => {\n if (!this.editInputElement.valid) return;\n if (this.updatedPanelTitle !== undefined) this.panelTitle = this.updatedPanelTitle;\n this.toggleIsEditing();\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.watchIdentifier(this.identifier);\n this.validateTitlePattern(this.titlePattern);\n this.validateTitlePattern(this.titlePatternErrorMessage);\n this.validatePanelTitle(this.panelTitle);\n this.validateExpandToggleDisplay(this.expandToggleDisplay);\n this.validateTitlePosition(this.titlePosition);\n }\n\n /**\n * Edit DOM after render\n */\n componentDidRender(): void {\n // when we are editing we get focus on edition input\n if (this.isEditing) this.editInputElement.setFocus();\n }\n\n /*************\n * Render *\n *************/\n\n /**\n * Render collapse button\n * @returns collpase button\n */\n private renderCollapseButton = (): HTMLMgButtonElement => (\n <mg-button\n onClick={this.handleCollapseButton}\n variant=\"flat\"\n aria-expanded={this.expanded.toString()}\n aria-controls={`${this.identifier}-content`}\n disabled={this.expandToggleDisabled}\n isIcon={this.expandToggleDisplay === 'icon'}\n label={this.panelTitle}\n >\n <span class=\"mg-c-panel__collapse-button-content\">\n <mg-icon icon=\"chevron-up\" class={{ 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded }}></mg-icon>\n {!this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle}\n </span>\n </mg-button>\n );\n\n /**\n * Render edit button\n * @returns edit Button\n */\n private renderEditButton = (): HTMLMgButtonElement => (\n <mg-button key=\"edit-button\" is-icon variant=\"flat\" label={this.messages.panel.editLabel} onClick={this.handleEditButton}>\n <mg-icon icon=\"pen\"></mg-icon>\n </mg-button>\n );\n\n /**\n * Render input button\n * @returns edit title input\n */\n private renderEditInput = (): HTMLMgInputTextElement => (\n <mg-input-text\n key=\"edition-input\"\n label={this.messages.panel.editLabel}\n label-hide\n value={this.panelTitle}\n onValue-change={this.handleUpdateTitle}\n characterLeftHide={true}\n pattern={this.titlePattern}\n pattern-error-message={this.titlePatternErrorMessage}\n identifier={`${this.identifier}-edition-input`}\n ref={(el: HTMLMgInputTextElement) => (this.editInputElement = el)}\n >\n <mg-button slot=\"append-input\" label={this.messages.general.cancel} is-icon variant=\"secondary\" onClick={this.handleCancelEditButton}>\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n <mg-button slot=\"append-input\" label={this.messages.general.confirm} is-icon variant=\"secondary\" onClick={this.handleValidateEditButton}>\n <mg-icon icon=\"check\"></mg-icon>\n </mg-button>\n </mg-input-text>\n );\n\n /**\n * Render title\n * @returns title element\n */\n private renderTitle = (): HTMLElement[] => {\n const elementsToRender: HTMLElement[] = [this.renderCollapseButton()];\n if (this.titleEditable) {\n if (!this.isEditing) elementsToRender.push(this.renderEditButton());\n else elementsToRender.push(this.renderEditInput());\n }\n\n return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;\n };\n\n /**\n * Render header children\n * @returns header child\n */\n private renderHeaderChildren = (): HTMLElement[] => {\n const children = [\n <div\n class={{ 'mg-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }}\n key={this.panelTitle}\n >\n {this.renderTitle()}\n </div>,\n <div class=\"mg-c-panel__header-content\" key=\"slot-header\">\n <slot name=\"header-right\"></slot>\n </div>,\n ];\n return this.titlePosition === 'right' ? children.reverse() : children;\n };\n\n /**\n * Render component\n * @returns rendered component\n */\n render(): HTMLElement {\n const headerId = `${this.identifier}-header`;\n return (\n <section class={this.classCollection.join()} id={this.identifier}>\n <mg-card>\n <header class={{ 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n {this.renderHeaderChildren()}\n </header>\n <article class=\"mg-c-panel__content\" id={`${this.identifier}-content`} aria-labelledby={headerId} hidden={!this.expanded}>\n <slot></slot>\n </article>\n </mg-card>\n </section>\n );\n }\n}\n"]}
|
|
@@ -5,6 +5,7 @@ import { isFloatingUIPlacement, sides, alignments } from "./mg-popover.conf";
|
|
|
5
5
|
/**
|
|
6
6
|
* @slot - Element that will display the popover
|
|
7
7
|
* @slot content - popover content
|
|
8
|
+
* @slot title - popover title
|
|
8
9
|
*/
|
|
9
10
|
export class MgPopover {
|
|
10
11
|
constructor() {
|
|
@@ -314,7 +315,7 @@ export class MgPopover {
|
|
|
314
315
|
* @returns HTML Element
|
|
315
316
|
*/
|
|
316
317
|
render() {
|
|
317
|
-
return (h(Host, { key: '
|
|
318
|
+
return (h(Host, { key: 'a2c883c6f1458bfc76d77d944afe99210d0ecdb3' }, h("slot", { key: 'c3d2e25f47c5761be6594cb6cd487e4960e5d30b' }), h("slot", { key: '93bb53d3eac2c2b966eacb00b772faa403b5a86c', name: "content" })));
|
|
318
319
|
}
|
|
319
320
|
static get is() { return "mg-popover"; }
|
|
320
321
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-popover.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-popover/mg-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Watch, EventEmitter, Event } from '@stencil/core';\nimport { createID, getWindows, isValideID, toString } from '@mgdis/stencil-helpers';\nimport { computePosition, autoUpdate, flip, shift, limitShift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { isFloatingUIPlacement, type PopoverPlacementType, sides, alignments } from './mg-popover.conf';\n\n/**\n * @slot - Element that will display the popover\n * @slot content - popover content\n */\n@Component({\n tag: 'mg-popover',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-popover.css',\n shadow: true,\n})\nexport class MgPopover {\n /************\n * Internal *\n ************/\n\n private mgPopover: HTMLElement;\n private mgPopoverContent: HTMLMgPopoverContentElement;\n private windows: Window[];\n private floatingUICleanup: ReturnType<typeof autoUpdate>;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgPopoverElement;\n\n /**\n * Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n */\n @Prop() identifier: string = createID('mg-popover');\n @Watch('identifier')\n validateIdentifier(newValue: MgPopover['identifier']): void {\n if (!isValideID(newValue)) {\n throw new Error(`<mg-popover> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n // use renderPopoverContent to update popover-content id\n this.renderPopoverContent();\n }\n\n /**\n * Popover placement\n */\n @Prop({ mutable: true }) placement: PopoverPlacementType = 'bottom';\n @Watch('placement')\n watchPlacement(newValue): void {\n if (!isFloatingUIPlacement(newValue)) this.placement = 'bottom';\n }\n\n /**\n * Hide popover arrow\n */\n @Prop() arrowHide = false;\n @Watch('arrowHide')\n validateArrowHide(newValue: MgPopover['arrowHide']): void {\n if (newValue) this.mgPopoverContent.dataset.arrowHide = '';\n else delete this.mgPopoverContent.dataset.arrowHide;\n }\n\n /**\n * Define if popover has a cross button\n */\n @Prop() closeButton = false;\n @Watch('closeButton')\n validateCloseButton(newValue: MgPopover['closeButton']): void {\n this.mgPopoverContent.closeButton = newValue;\n }\n\n /**\n * Display popover\n */\n @Prop({ mutable: true }) display = false;\n @Watch('display')\n handleDisplay(newValue: boolean): void {\n if (newValue) {\n this.show();\n } else {\n this.hide();\n }\n this.displayChange.emit(newValue);\n }\n\n /**\n * Disable popover\n */\n @Prop() disabled = false;\n\n /**\n * Emited event when display value change\n */\n @Event({ eventName: 'display-change' }) displayChange: EventEmitter<HTMLMgPopoverElement['display']>;\n\n /**\n * Emmited event when popover is closed\n */\n @Event({ eventName: 'component-close' }) componentClose: EventEmitter<void>;\n\n /**\n * Check if clicked outside of component\n * @param event - mouse event\n */\n private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n if (!this.disabled && event.target.closest('mg-popover') !== this.element && event.target.closest(`[data-mg-popover-guard=\"${this.identifier}\"]`) === null) {\n this.display = false;\n }\n };\n\n /**\n * Update aria-expanded attribute on interactive element\n * @param expanded - expanded state\n */\n private updateAriaExpanded = (expanded: boolean): void => {\n const interactiveElement = this.element.querySelector(':not([slot])');\n if (interactiveElement !== null) {\n interactiveElement.setAttribute('aria-expanded', String(expanded));\n }\n };\n\n /**\n * Show popover\n */\n private show = (): void => {\n // Make the popover visible\n this.mgPopover.dataset.show = '';\n // Update aria-expanded\n this.updateAriaExpanded(true);\n // hide when click outside\n // setTimeout is used to prevent event to trigger after creation\n setTimeout(() => {\n this.manageClickOutsideListeners('addEventListener');\n });\n };\n\n /**\n * Hide popover\n */\n private hide = (): void => {\n // Hide the popover\n this.mgPopover.removeAttribute('data-show');\n // Update aria-expanded\n this.updateAriaExpanded(false);\n // Remove event listener\n this.manageClickOutsideListeners('removeEventListener');\n };\n\n /**\n * Manage all clickOustside listeners\n * @param action - top process on elements listeners\n */\n private manageClickOutsideListeners = (action: 'removeEventListener' | 'addEventListener'): void => {\n // clickOutside listeners need to bind windows\n // AND as shawdowDom content is not include on windows listeners `event.target` we need to include popover guard content DOM if it's a web-component\n // by doing this we can get and parse all needeed document DOM elements in clickOutside callback event.details.\n // This result in the givern junction :\n // Windows > document > [data-mg-popover-guard] + [data-mg-popover-guard] > shadowRoot = Windows > document > [data-mg-popover-guard] > shadowRoot\n const guardChildren = Array.from(document.querySelector(`[data-mg-popover-guard=\"${this.identifier}\"]`)?.shadowRoot?.children || new Set());\n [...guardChildren, ...this.windows].forEach((element: Window | HTMLElement) => {\n if (element !== null) {\n element[action]('click', this.clickOutside, false);\n }\n });\n };\n\n /**\n * Handle content hide event\n */\n private handleHideContent = (): void => {\n this.display = false;\n this.componentClose.emit();\n };\n\n /**\n * Render popover content element\n */\n private renderPopoverContent = (): void => {\n const mgPopoverContent = this.element.querySelector('mg-popover-content');\n if (mgPopoverContent === null) {\n this.mgPopoverContent = document.createElement('mg-popover-content');\n this.mgPopoverContent.setAttribute('slot', 'content');\n this.mgPopoverContent.setAttribute('id', this.identifier);\n this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);\n\n const arrow = document.createElement('div');\n arrow.setAttribute('slot', 'arrow');\n arrow.dataset.floatingArrow = '';\n this.mgPopoverContent.appendChild(arrow);\n\n // insert elements in DOM\n ['[slot=\"title\"]', '[slot=\"content\"]:not(mg-popover-content)'].forEach(slotType => {\n Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {\n this.mgPopoverContent.appendChild(slot);\n });\n });\n this.element.appendChild(this.mgPopoverContent);\n } else {\n mgPopoverContent.setAttribute('id', this.identifier);\n }\n };\n\n /**\n * Get alternative placements ordered by proximity to initial placement\n * First check fallbackPlacement attribute, then generate alternatives:\n * 1. Same side with different alignments (start, center, end)\n * 2. Other sides in order\n * @param placement - initial placement\n * @returns array of alternative placements\n */\n private getClosestPlacements = (placement: PopoverPlacementType): Placement[] => {\n // First check if fallbackPlacement attribute is defined\n const fallbackPlacements = (this.element.dataset.fallbackPlacement || '')\n .split(',')\n .map(t => t.trim())\n .filter(isFloatingUIPlacement);\n if (fallbackPlacements.length > 0) return Array.from(new Set([...fallbackPlacements, ...sides]).values()).filter(isFloatingUIPlacement);\n\n // Extract side from placement (e.g. \"top\" from \"top-start\")\n const [side] = placement.split('-');\n\n // Generate placements for same side with different alignments\n const currentSidePlacements = alignments.map(alignment => (alignment !== null ? `${side}-${alignment}` : side));\n\n // Return unique placements: current side variants first, then other sides\n return Array.from(new Set([...currentSidePlacements, ...sides.filter(otherSide => otherSide !== side)])).filter(isFloatingUIPlacement);\n };\n\n /**\n * Set up Floating UI positioning and arrow behavior\n * @param interactiveElement - Element that triggers the popover\n */\n private setFloatingUI = (interactiveElement: HTMLElement): void => {\n this.floatingUICleanup = autoUpdate(interactiveElement, this.mgPopover, () => {\n computePosition(interactiveElement, this.mgPopover, {\n placement: this.placement as Placement,\n strategy: 'fixed',\n middleware: [\n offset(0),\n flip({\n fallbackPlacements: this.getClosestPlacements(this.placement),\n }),\n shift({\n limiter: limitShift(),\n }),\n arrow({\n element: this.mgPopover.querySelector('[data-floating-arrow]'),\n }),\n ],\n }).then(({ x, y, placement, middlewareData }) => {\n Object.assign(this.mgPopover.style, {\n position: 'fixed',\n top: '0',\n left: '0',\n transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`,\n });\n\n // Update arrow style\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[placement.split('-')[0]];\n\n const arrowElement: HTMLElement = this.mgPopover.querySelector('[data-floating-arrow]');\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n // https://floating-ui.com/docs/arrow\n // Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.\n // Due to this, either x or y will be undefined, depending on the side of placement.\n // The above code uses `isNaN` to check for null and undefined simultaneously.\n // Don't remove `isNaN`, because either value can be falsy (0), causing a bug!\n const numberToPx = (number: number): string => (!isNaN(number) ? `${number}px` : '');\n\n if (arrowElement !== null)\n Object.assign(arrowElement.style, {\n position: 'absolute',\n left: numberToPx(arrowX),\n top: numberToPx(arrowY),\n [staticSide]: '1px',\n });\n\n this.mgPopover.setAttribute('data-placement', placement);\n });\n });\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * update popper position after props change on component did update hook to benefit from render ended\n */\n componentDidUpdate(): void {\n this.floatingUICleanup();\n }\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Get windows to attach events\n this.windows = getWindows(window);\n // render mg-popover-content slot\n this.renderPopoverContent();\n this.validateCloseButton(this.closeButton);\n this.validateIdentifier(this.identifier);\n this.validateArrowHide(this.arrowHide);\n this.watchPlacement(this.placement);\n }\n\n /**\n * Check if component props are well configured on init\n */\n componentDidLoad(): void {\n // Get popover content\n this.mgPopover = this.element.querySelector(`#${this.identifier}`);\n\n // Get interactive element (first element without slot attribute)\n const interactiveElement: HTMLElement = this.element.querySelector(':not([slot])');\n\n // Add aria attributes\n interactiveElement.setAttribute('aria-controls', this.identifier);\n interactiveElement.setAttribute('aria-expanded', `${this.display}`);\n\n // Initial styles configuration\n Object.assign(this.mgPopover.style, {\n position: 'fixed',\n });\n\n // Create Floating UI instance\n this.setFloatingUI(interactiveElement);\n\n // Add resize observer\n [interactiveElement, this.mgPopoverContent].forEach(element => {\n new ResizeObserver(() => {\n this.floatingUICleanup();\n this.setFloatingUI(interactiveElement);\n }).observe(element);\n });\n\n // Add events to toggle display\n interactiveElement.addEventListener('click', () => {\n if (!this.disabled) this.display = !this.display;\n });\n\n this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }): void => {\n const target = event.target.closest('[popovertargetaction]');\n if (this.display === true && target !== null && target.getAttribute('popovertargetaction') === 'hide') {\n this.display = false;\n }\n });\n\n // Add events to hide popover\n this.element.addEventListener('keydown', e => {\n if (!this.disabled && e.code === 'Escape') {\n this.display = false;\n this.componentClose.emit();\n interactiveElement.focus();\n }\n });\n\n this.handleDisplay(this.display);\n }\n\n /**\n * Cleanup when component is disconnected\n */\n disconnectedCallback(): void {\n // Cleanup Floating UI instance\n this.floatingUICleanup();\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host>\n <slot></slot>\n <slot name=\"content\"></slot>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"mg-popover.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-popover/mg-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Watch, EventEmitter, Event } from '@stencil/core';\nimport { createID, getWindows, isValideID, toString } from '@mgdis/stencil-helpers';\nimport { computePosition, autoUpdate, flip, shift, limitShift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { isFloatingUIPlacement, type PopoverPlacementType, sides, alignments } from './mg-popover.conf';\n\n/**\n * @slot - Element that will display the popover\n * @slot content - popover content\n * @slot title - popover title\n */\n@Component({\n tag: 'mg-popover',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-popover.css',\n shadow: true,\n})\nexport class MgPopover {\n /************\n * Internal *\n ************/\n\n private mgPopover: HTMLElement;\n private mgPopoverContent: HTMLMgPopoverContentElement;\n private windows: Window[];\n private floatingUICleanup: ReturnType<typeof autoUpdate>;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgPopoverElement;\n\n /**\n * Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n */\n @Prop() identifier: string = createID('mg-popover');\n @Watch('identifier')\n validateIdentifier(newValue: MgPopover['identifier']): void {\n if (!isValideID(newValue)) {\n throw new Error(`<mg-popover> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n // use renderPopoverContent to update popover-content id\n this.renderPopoverContent();\n }\n\n /**\n * Popover placement\n */\n @Prop({ mutable: true }) placement: PopoverPlacementType = 'bottom';\n @Watch('placement')\n watchPlacement(newValue): void {\n if (!isFloatingUIPlacement(newValue)) this.placement = 'bottom';\n }\n\n /**\n * Hide popover arrow\n */\n @Prop() arrowHide = false;\n @Watch('arrowHide')\n validateArrowHide(newValue: MgPopover['arrowHide']): void {\n if (newValue) this.mgPopoverContent.dataset.arrowHide = '';\n else delete this.mgPopoverContent.dataset.arrowHide;\n }\n\n /**\n * Define if popover has a cross button\n */\n @Prop() closeButton = false;\n @Watch('closeButton')\n validateCloseButton(newValue: MgPopover['closeButton']): void {\n this.mgPopoverContent.closeButton = newValue;\n }\n\n /**\n * Display popover\n */\n @Prop({ mutable: true }) display = false;\n @Watch('display')\n handleDisplay(newValue: boolean): void {\n if (newValue) {\n this.show();\n } else {\n this.hide();\n }\n this.displayChange.emit(newValue);\n }\n\n /**\n * Disable popover\n */\n @Prop() disabled = false;\n\n /**\n * Emited event when display value change\n */\n @Event({ eventName: 'display-change' }) displayChange: EventEmitter<HTMLMgPopoverElement['display']>;\n\n /**\n * Emmited event when popover is closed\n */\n @Event({ eventName: 'component-close' }) componentClose: EventEmitter<void>;\n\n /**\n * Check if clicked outside of component\n * @param event - mouse event\n */\n private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n if (!this.disabled && event.target.closest('mg-popover') !== this.element && event.target.closest(`[data-mg-popover-guard=\"${this.identifier}\"]`) === null) {\n this.display = false;\n }\n };\n\n /**\n * Update aria-expanded attribute on interactive element\n * @param expanded - expanded state\n */\n private updateAriaExpanded = (expanded: boolean): void => {\n const interactiveElement = this.element.querySelector(':not([slot])');\n if (interactiveElement !== null) {\n interactiveElement.setAttribute('aria-expanded', String(expanded));\n }\n };\n\n /**\n * Show popover\n */\n private show = (): void => {\n // Make the popover visible\n this.mgPopover.dataset.show = '';\n // Update aria-expanded\n this.updateAriaExpanded(true);\n // hide when click outside\n // setTimeout is used to prevent event to trigger after creation\n setTimeout(() => {\n this.manageClickOutsideListeners('addEventListener');\n });\n };\n\n /**\n * Hide popover\n */\n private hide = (): void => {\n // Hide the popover\n this.mgPopover.removeAttribute('data-show');\n // Update aria-expanded\n this.updateAriaExpanded(false);\n // Remove event listener\n this.manageClickOutsideListeners('removeEventListener');\n };\n\n /**\n * Manage all clickOustside listeners\n * @param action - top process on elements listeners\n */\n private manageClickOutsideListeners = (action: 'removeEventListener' | 'addEventListener'): void => {\n // clickOutside listeners need to bind windows\n // AND as shawdowDom content is not include on windows listeners `event.target` we need to include popover guard content DOM if it's a web-component\n // by doing this we can get and parse all needeed document DOM elements in clickOutside callback event.details.\n // This result in the givern junction :\n // Windows > document > [data-mg-popover-guard] + [data-mg-popover-guard] > shadowRoot = Windows > document > [data-mg-popover-guard] > shadowRoot\n const guardChildren = Array.from(document.querySelector(`[data-mg-popover-guard=\"${this.identifier}\"]`)?.shadowRoot?.children || new Set());\n [...guardChildren, ...this.windows].forEach((element: Window | HTMLElement) => {\n if (element !== null) {\n element[action]('click', this.clickOutside, false);\n }\n });\n };\n\n /**\n * Handle content hide event\n */\n private handleHideContent = (): void => {\n this.display = false;\n this.componentClose.emit();\n };\n\n /**\n * Render popover content element\n */\n private renderPopoverContent = (): void => {\n const mgPopoverContent = this.element.querySelector('mg-popover-content');\n if (mgPopoverContent === null) {\n this.mgPopoverContent = document.createElement('mg-popover-content');\n this.mgPopoverContent.setAttribute('slot', 'content');\n this.mgPopoverContent.setAttribute('id', this.identifier);\n this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);\n\n const arrow = document.createElement('div');\n arrow.setAttribute('slot', 'arrow');\n arrow.dataset.floatingArrow = '';\n this.mgPopoverContent.appendChild(arrow);\n\n // insert elements in DOM\n ['[slot=\"title\"]', '[slot=\"content\"]:not(mg-popover-content)'].forEach(slotType => {\n Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {\n this.mgPopoverContent.appendChild(slot);\n });\n });\n this.element.appendChild(this.mgPopoverContent);\n } else {\n mgPopoverContent.setAttribute('id', this.identifier);\n }\n };\n\n /**\n * Get alternative placements ordered by proximity to initial placement\n * First check fallbackPlacement attribute, then generate alternatives:\n * 1. Same side with different alignments (start, center, end)\n * 2. Other sides in order\n * @param placement - initial placement\n * @returns array of alternative placements\n */\n private getClosestPlacements = (placement: PopoverPlacementType): Placement[] => {\n // First check if fallbackPlacement attribute is defined\n const fallbackPlacements = (this.element.dataset.fallbackPlacement || '')\n .split(',')\n .map(t => t.trim())\n .filter(isFloatingUIPlacement);\n if (fallbackPlacements.length > 0) return Array.from(new Set([...fallbackPlacements, ...sides]).values()).filter(isFloatingUIPlacement);\n\n // Extract side from placement (e.g. \"top\" from \"top-start\")\n const [side] = placement.split('-');\n\n // Generate placements for same side with different alignments\n const currentSidePlacements = alignments.map(alignment => (alignment !== null ? `${side}-${alignment}` : side));\n\n // Return unique placements: current side variants first, then other sides\n return Array.from(new Set([...currentSidePlacements, ...sides.filter(otherSide => otherSide !== side)])).filter(isFloatingUIPlacement);\n };\n\n /**\n * Set up Floating UI positioning and arrow behavior\n * @param interactiveElement - Element that triggers the popover\n */\n private setFloatingUI = (interactiveElement: HTMLElement): void => {\n this.floatingUICleanup = autoUpdate(interactiveElement, this.mgPopover, () => {\n computePosition(interactiveElement, this.mgPopover, {\n placement: this.placement as Placement,\n strategy: 'fixed',\n middleware: [\n offset(0),\n flip({\n fallbackPlacements: this.getClosestPlacements(this.placement),\n }),\n shift({\n limiter: limitShift(),\n }),\n arrow({\n element: this.mgPopover.querySelector('[data-floating-arrow]'),\n }),\n ],\n }).then(({ x, y, placement, middlewareData }) => {\n Object.assign(this.mgPopover.style, {\n position: 'fixed',\n top: '0',\n left: '0',\n transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`,\n });\n\n // Update arrow style\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[placement.split('-')[0]];\n\n const arrowElement: HTMLElement = this.mgPopover.querySelector('[data-floating-arrow]');\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n // https://floating-ui.com/docs/arrow\n // Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.\n // Due to this, either x or y will be undefined, depending on the side of placement.\n // The above code uses `isNaN` to check for null and undefined simultaneously.\n // Don't remove `isNaN`, because either value can be falsy (0), causing a bug!\n const numberToPx = (number: number): string => (!isNaN(number) ? `${number}px` : '');\n\n if (arrowElement !== null)\n Object.assign(arrowElement.style, {\n position: 'absolute',\n left: numberToPx(arrowX),\n top: numberToPx(arrowY),\n [staticSide]: '1px',\n });\n\n this.mgPopover.setAttribute('data-placement', placement);\n });\n });\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * update popper position after props change on component did update hook to benefit from render ended\n */\n componentDidUpdate(): void {\n this.floatingUICleanup();\n }\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Get windows to attach events\n this.windows = getWindows(window);\n // render mg-popover-content slot\n this.renderPopoverContent();\n this.validateCloseButton(this.closeButton);\n this.validateIdentifier(this.identifier);\n this.validateArrowHide(this.arrowHide);\n this.watchPlacement(this.placement);\n }\n\n /**\n * Check if component props are well configured on init\n */\n componentDidLoad(): void {\n // Get popover content\n this.mgPopover = this.element.querySelector(`#${this.identifier}`);\n\n // Get interactive element (first element without slot attribute)\n const interactiveElement: HTMLElement = this.element.querySelector(':not([slot])');\n\n // Add aria attributes\n interactiveElement.setAttribute('aria-controls', this.identifier);\n interactiveElement.setAttribute('aria-expanded', `${this.display}`);\n\n // Initial styles configuration\n Object.assign(this.mgPopover.style, {\n position: 'fixed',\n });\n\n // Create Floating UI instance\n this.setFloatingUI(interactiveElement);\n\n // Add resize observer\n [interactiveElement, this.mgPopoverContent].forEach(element => {\n new ResizeObserver(() => {\n this.floatingUICleanup();\n this.setFloatingUI(interactiveElement);\n }).observe(element);\n });\n\n // Add events to toggle display\n interactiveElement.addEventListener('click', () => {\n if (!this.disabled) this.display = !this.display;\n });\n\n this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }): void => {\n const target = event.target.closest('[popovertargetaction]');\n if (this.display === true && target !== null && target.getAttribute('popovertargetaction') === 'hide') {\n this.display = false;\n }\n });\n\n // Add events to hide popover\n this.element.addEventListener('keydown', e => {\n if (!this.disabled && e.code === 'Escape') {\n this.display = false;\n this.componentClose.emit();\n interactiveElement.focus();\n }\n });\n\n this.handleDisplay(this.display);\n }\n\n /**\n * Cleanup when component is disconnected\n */\n disconnectedCallback(): void {\n // Cleanup Floating UI instance\n this.floatingUICleanup();\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host>\n <slot></slot>\n <slot name=\"content\"></slot>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"minMax": "The date must be between {min} and {max}"
|
|
47
47
|
},
|
|
48
48
|
"error": {
|
|
49
|
-
"badInput": "The date is incorrect, the format
|
|
49
|
+
"badInput": "The date is inexistent or incorrect, the expected format is {pattern} (ex: {date})"
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
52
|
"numeric": {
|
|
@@ -67,7 +67,11 @@
|
|
|
67
67
|
"url": "Expected format: https://example.com"
|
|
68
68
|
},
|
|
69
69
|
"errors": {
|
|
70
|
-
"typeMismatch":
|
|
70
|
+
"typeMismatch": {
|
|
71
|
+
"email": "The value is incorrect, the expected format is name@example.com",
|
|
72
|
+
"emails": "The value is incorrect, the expected format is first@example.com, second@example.com",
|
|
73
|
+
"url": "The value is incorrect, the expected format is https://example.com"
|
|
74
|
+
}
|
|
71
75
|
}
|
|
72
76
|
}
|
|
73
77
|
},
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"minMax": "La date doit être comprise entre le {min} et le {max}"
|
|
47
47
|
},
|
|
48
48
|
"error": {
|
|
49
|
-
"badInput": "La date est incorrecte, le format
|
|
49
|
+
"badInput": "La date est inexistante ou incorrecte, le format attendu est {pattern} (ex : {date})"
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
52
|
"numeric": {
|
|
@@ -67,7 +67,11 @@
|
|
|
67
67
|
"url": "Format attendu : https://exemple.fr"
|
|
68
68
|
},
|
|
69
69
|
"errors": {
|
|
70
|
-
"typeMismatch":
|
|
70
|
+
"typeMismatch": {
|
|
71
|
+
"email": "La valeur est incorrecte, le format attendu est nom@exemple.fr",
|
|
72
|
+
"emails": "La valeur est incorrecte, le format attendu est premier@exemple.fr, second@exemple.fr",
|
|
73
|
+
"url": "La valeur est incorrecte, le format attendu est https://exemple.fr"
|
|
74
|
+
}
|
|
71
75
|
}
|
|
72
76
|
}
|
|
73
77
|
},
|
|
@@ -9,14 +9,13 @@ export const test = base.extend({
|
|
|
9
9
|
}, html);
|
|
10
10
|
};
|
|
11
11
|
// Add lib JS
|
|
12
|
-
await page.addScriptTag({ url: 'http://localhost:8080/mg-components/dist/mg-components
|
|
12
|
+
await page.addScriptTag({ url: 'http://localhost:8080/mg-components/dist/mg-components/mg-components.esm.js', type: 'module' });
|
|
13
13
|
// Add lib CSS
|
|
14
|
-
await page.addStyleTag({ url: 'http://localhost:8080/mg-components/dist/mg-components
|
|
14
|
+
await page.addStyleTag({ url: 'http://localhost:8080/mg-components/dist/mg-components/mg-components.css' });
|
|
15
15
|
// Add screenshot CSS
|
|
16
16
|
await page.addStyleTag({ content: 'body{margin:0;--mg-b-font-family:"Ubuntu",sans-serif}.e2e-screenshot{display:inline-block}' });
|
|
17
17
|
// Make sure everything is loaded
|
|
18
18
|
await page.waitForLoadState('networkidle');
|
|
19
|
-
await page.locator('html.hydrated').waitFor({ state: 'attached' });
|
|
20
19
|
// Use extended page
|
|
21
20
|
await use(page);
|
|
22
21
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"playwright.fixture.js","sourceRoot":"","sources":["../../src/utils/playwright.fixture.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAiB;IAC9C,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;QAC5B,2DAA2D;QAC3D,IAAI,CAAC,UAAU,GAAG,KAAK,EAAE,IAAY,EAAE,EAAE;YACvC,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAY,EAAE,EAAE;gBACnC,0BAA0B;gBAC1B,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,gCAAgC,IAAI,SAAS,CAAC;YAC1E,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC,CAAC;QACF,aAAa;QACb,MAAM,IAAI,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE,
|
|
1
|
+
{"version":3,"file":"playwright.fixture.js","sourceRoot":"","sources":["../../src/utils/playwright.fixture.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAiB;IAC9C,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;QAC5B,2DAA2D;QAC3D,IAAI,CAAC,UAAU,GAAG,KAAK,EAAE,IAAY,EAAE,EAAE;YACvC,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAY,EAAE,EAAE;gBACnC,0BAA0B;gBAC1B,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,gCAAgC,IAAI,SAAS,CAAC;YAC1E,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC,CAAC;QACF,aAAa;QACb,MAAM,IAAI,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE,6EAA6E,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChI,cAAc;QACd,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,EAAE,0EAA0E,EAAE,CAAC,CAAC;QAC5G,qBAAqB;QACrB,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,4FAA4F,EAAE,CAAC,CAAC;QAClI,iCAAiC;QACjC,MAAM,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAC3C,oBAAoB;QACpB,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC;CACF,CAAC,CAAC","sourcesContent":["import { test as base } from '@playwright/test';\n\nexport const test = base.extend<{ page: void }>({\n page: async ({ page }, use) => {\n // Override setContent method to keep style and script tags\n page.setContent = async (html: string) => {\n await page.evaluate((html: string) => {\n // Add content to the body\n document.body.innerHTML = `<span class=\"e2e-screenshot\">${html}</span>`;\n }, html);\n };\n // Add lib JS\n await page.addScriptTag({ url: 'http://localhost:8080/mg-components/dist/mg-components/mg-components.esm.js', type: 'module' });\n // Add lib CSS\n await page.addStyleTag({ url: 'http://localhost:8080/mg-components/dist/mg-components/mg-components.css' });\n // Add screenshot CSS\n await page.addStyleTag({ content: 'body{margin:0;--mg-b-font-family:\"Ubuntu\",sans-serif}.e2e-screenshot{display:inline-block}' });\n // Make sure everything is loaded\n await page.waitForLoadState('networkidle');\n // Use extended page\n await use(page);\n },\n});\n"]}
|