@mgdis/mg-components 6.8.0 → 6.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/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/events.utils-D5SAtkpQ.js +28 -0
- package/dist/cjs/events.utils-D5SAtkpQ.js.map +1 -0
- package/dist/cjs/{index-1a5a1081.js → index-CATFkm3O.js} +248 -196
- package/dist/cjs/index-CATFkm3O.js.map +1 -0
- package/dist/cjs/{index-234e834a.js → index-CfIlskRh.js} +34 -11
- package/dist/cjs/index-CfIlskRh.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-BCLy9yYb.js +250 -0
- package/dist/cjs/index.es-BCLy9yYb.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 +573 -934
- 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-combobox.cjs.entry.js +774 -0
- package/dist/cjs/mg-input-combobox.cjs.entry.js.map +1 -0
- package/dist/cjs/mg-input-combobox.entry.cjs.js.map +1 -0
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +21526 -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 +14 -16
- package/dist/cjs/mg-progress.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-progress.entry.cjs.js.map +1 -0
- package/dist/collection/collection-manifest.json +4 -3
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +9 -4
- package/dist/collection/components/atoms/mg-badge/mg-badge.js.map +1 -1
- package/dist/collection/components/atoms/mg-button/mg-button.js +7 -6
- 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 +47 -58
- 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-combobox/mg-input-combobox.conf.js +2 -0
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.js.map +1 -0
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js +1443 -0
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js.map +1 -0
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +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 +9 -4
- 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-radio/mg-input-radio.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.scss +1 -0
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +46 -41
- 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 +10 -10
- 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 +9 -9
- 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 +11 -6
- 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-illustrated-message/mg-illustrated-message.js +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-message/mg-message.js +2 -2
- 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-content/mg-popover-content.js +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +56 -81
- package/dist/collection/components/molecules/mg-popover/mg-popover.js.map +1 -1
- package/dist/collection/components/molecules/mg-progress/mg-progress.js +1 -1
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -1
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +6 -5
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js.map +1 -1
- package/dist/collection/locales/en/messages.json +14 -3
- package/dist/collection/locales/fr/messages.json +14 -3
- package/dist/collection/utils/behaviors.utils.js +3 -3
- package/dist/collection/utils/behaviors.utils.js.map +1 -1
- package/dist/collection/utils/events.utils.js +22 -0
- package/dist/collection/utils/events.utils.js.map +1 -0
- package/dist/collection/utils/floating-ui.utils.js +46 -2
- package/dist/collection/utils/floating-ui.utils.js.map +1 -1
- package/dist/collection/utils/playwright.fixture.js +2 -3
- package/dist/collection/utils/playwright.fixture.js.map +1 -1
- package/dist/components/events.utils.js +26 -0
- package/dist/components/events.utils.js.map +1 -0
- package/dist/components/floating-ui.utils.js +48 -423
- package/dist/components/floating-ui.utils.js.map +1 -1
- package/dist/components/index.es.js +161 -67
- package/dist/components/index.es.js.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/index2.js +33 -10
- package/dist/components/index2.js.map +1 -1
- package/dist/components/mg-action-more.js +15 -11
- 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 +13 -12
- 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 +8 -7
- 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 +8 -8
- 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-combobox.d.ts +11 -0
- package/dist/components/mg-input-combobox.js +897 -0
- package/dist/components/mg-input-combobox.js.map +1 -0
- package/dist/components/mg-input-date.js +25 -21
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +23 -19
- package/dist/components/mg-input-numeric.js.map +1 -1
- package/dist/components/mg-input-password.js +13 -9
- package/dist/components/mg-input-password.js.map +1 -1
- package/dist/components/mg-input-radio.js +11 -11
- package/dist/components/mg-input-radio.js.map +1 -1
- package/dist/components/mg-input-rich-text-editor.js +21527 -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 +16 -12
- 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 +24 -20
- package/dist/components/mg-input-text2.js.map +1 -1
- package/dist/components/mg-input-textarea.js +17 -13
- 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 +22 -23
- package/dist/components/mg-item-more2.js.map +1 -1
- package/dist/components/mg-loader.js +2 -67
- package/dist/components/mg-loader.js.map +1 -1
- package/dist/components/mg-loader2.js +75 -0
- package/dist/components/mg-loader2.js.map +1 -0
- package/dist/components/mg-menu-item.js +1 -0
- package/dist/components/mg-menu-item2.js +18 -18
- 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 +8 -8
- 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 +7 -7
- package/dist/components/mg-popover-content2.js.map +1 -1
- package/dist/components/mg-popover.js +1 -0
- package/dist/components/mg-popover2.js +62 -88
- package/dist/components/mg-popover2.js.map +1 -1
- package/dist/components/mg-progress.js +13 -13
- package/dist/components/mg-progress.js.map +1 -1
- package/dist/components/mg-skip-links.js +5 -5
- 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 +20 -19
- 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 +3 -3
- package/dist/components/mg-tooltip-content2.js.map +1 -1
- package/dist/components/mg-tooltip.js +1 -0
- package/dist/components/mg-tooltip2.js +58 -68
- 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/events.utils-yMGqY8YG.js +26 -0
- package/dist/esm/events.utils-yMGqY8YG.js.map +1 -0
- package/dist/esm/{index-5059254f.js → index-CAuxALt5.js} +246 -174
- package/dist/esm/index-CAuxALt5.js.map +1 -0
- package/dist/esm/{index-544778a7.js → index-DmsGewMC.js} +34 -11
- package/dist/esm/index-DmsGewMC.js.map +1 -0
- package/dist/esm/index.es-rLV3KFPd.js +223 -0
- package/dist/esm/index.es-rLV3KFPd.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 +573 -932
- 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-combobox.entry.js +772 -0
- package/dist/esm/mg-input-combobox.entry.js.map +1 -0
- package/dist/esm/mg-input-rich-text-editor.entry.js +21529 -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-CNgv8hc5.js} +3 -2
- package/dist/esm/mg-input.conf-CNgv8hc5.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 +14 -14
- 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 +14 -3
- package/dist/mg-components/locales/fr/messages.json +14 -3
- 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-combobox.entry.esm.js.map +1 -0
- 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-0f761c6c.entry.js +2 -0
- package/dist/mg-components/p-0f761c6c.entry.js.map +1 -0
- package/dist/mg-components/p-73099ed7.entry.js +11 -0
- package/dist/mg-components/p-73099ed7.entry.js.map +1 -0
- package/dist/mg-components/p-88f77de2.entry.js +2 -0
- package/dist/mg-components/p-88f77de2.entry.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-CNgv8hc5.js +2 -0
- package/dist/mg-components/p-CNgv8hc5.js.map +1 -0
- package/dist/mg-components/p-DK9teKTo.js +2 -0
- package/dist/mg-components/p-DK9teKTo.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-ad66e7b3.entry.js +2 -0
- package/dist/mg-components/p-ad66e7b3.entry.js.map +1 -0
- package/dist/mg-components/p-cdbe689e.entry.js +2 -0
- package/dist/mg-components/p-cdbe689e.entry.js.map +1 -0
- package/dist/mg-components/p-d3a868f0.entry.js +2 -0
- package/dist/mg-components/p-d3a868f0.entry.js.map +1 -0
- package/dist/mg-components/p-rLV3KFPd.js +2 -0
- package/dist/mg-components/p-rLV3KFPd.js.map +1 -0
- package/dist/mg-components/p-yMGqY8YG.js +2 -0
- package/dist/mg-components/p-yMGqY8YG.js.map +1 -0
- package/dist/types/components/atoms/mg-tag/mg-tag.d.ts +2 -2
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts +6 -6
- 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-combobox/mg-input-combobox.conf.d.ts +24 -0
- package/dist/types/components/molecules/inputs/mg-input-combobox/mg-input-combobox.d.ts +340 -0
- package/dist/types/components/molecules/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 +6 -9
- package/dist/types/components.d.ts +274 -29
- package/dist/types/stencil-public-runtime.d.ts +1 -0
- package/dist/types/utils/events.utils.d.ts +4 -0
- package/dist/types/utils/floating-ui.utils.d.ts +9 -1
- package/ide/intellij/web-types.json +488 -45
- package/ide/vscode/html-custom-data.json +358 -26
- package/package.json +26 -26
- 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 +0 -2
- 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
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const mgInput_conf = require('./mg-input.conf-5bbcea79.js');
|
|
3
|
+
var index = require('./index-CATFkm3O.js');
|
|
4
|
+
var index_es = require('./index.es-BCLy9yYb.js');
|
|
5
|
+
var index$1 = require('./index-CfIlskRh.js');
|
|
6
|
+
var events_utils = require('./events.utils-D5SAtkpQ.js');
|
|
7
|
+
var mgInput_conf = require('./mg-input.conf-WTsvDfpC.js');
|
|
9
8
|
|
|
10
9
|
/**
|
|
11
10
|
* Available menu item status values
|
|
@@ -34,7 +33,6 @@ const directions$1 = {
|
|
|
34
33
|
const sizes$5 = ['medium', 'large', 'xlarge'];
|
|
35
34
|
|
|
36
35
|
const mgActionMoreCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{--mg-c-popover-padding-vertical:var(--mg-b-size-8);--mg-c-popover-padding-horizontal:0;--mg-c-popover-max-width:unset}.mg-c-action-more__divider{--mg-c-divider-spacing-vertical:var(--mg-b-size-4)}.mg-c-action-more__chevron{transition:200ms}.mg-c-action-more__chevron--rotate.mg-c-action-more__chevron{transform:rotate(180deg)}";
|
|
37
|
-
const MgActionMoreStyle0 = mgActionMoreCss;
|
|
38
36
|
|
|
39
37
|
/**
|
|
40
38
|
* MgActionMore['items'] type guard
|
|
@@ -78,11 +76,15 @@ const MgActionMore = class {
|
|
|
78
76
|
************/
|
|
79
77
|
this.name = 'mg-action-more';
|
|
80
78
|
this.classBase = 'mg-c-action-more';
|
|
81
|
-
this.mgPopoverIdentifier = index_es.
|
|
79
|
+
this.mgPopoverIdentifier = index_es.Pt(this.name);
|
|
82
80
|
/**
|
|
83
81
|
* Define button properties
|
|
84
82
|
*/
|
|
85
83
|
this.button = { variant: 'flat', isIcon: true };
|
|
84
|
+
/**
|
|
85
|
+
* Define if chevron is display
|
|
86
|
+
*/
|
|
87
|
+
this.displayChevron = false;
|
|
86
88
|
/**
|
|
87
89
|
* Menu expanded state
|
|
88
90
|
*/
|
|
@@ -121,15 +123,15 @@ const MgActionMore = class {
|
|
|
121
123
|
}
|
|
122
124
|
validateItems(newValue) {
|
|
123
125
|
if (!isMgActionMoreItems(newValue)) {
|
|
124
|
-
throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${index_es.
|
|
126
|
+
throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${index_es.Gt(newValue)}.`);
|
|
125
127
|
}
|
|
126
128
|
else if (isMgActionMoreItems(newValue) && newValue.length > 0 && (isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {
|
|
127
|
-
throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${index_es.
|
|
129
|
+
throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${index_es.Gt(newValue)}.`);
|
|
128
130
|
}
|
|
129
131
|
}
|
|
130
132
|
validateIcon(newValue) {
|
|
131
133
|
if (newValue && !isMgActionMoreIcon(newValue)) {
|
|
132
|
-
throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${index_es.
|
|
134
|
+
throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${index_es.Gt(newValue)}.`);
|
|
133
135
|
}
|
|
134
136
|
else if ((newValue === null || newValue === void 0 ? void 0 : newValue.icon) === undefined && Boolean(this.button.isIcon)) {
|
|
135
137
|
this.icon = { icon: 'ellipsis' };
|
|
@@ -137,7 +139,7 @@ const MgActionMore = class {
|
|
|
137
139
|
}
|
|
138
140
|
validateButton(newValue) {
|
|
139
141
|
if (newValue && !isMgActionMoreButton(newValue)) {
|
|
140
|
-
throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${index_es.
|
|
142
|
+
throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${index_es.Gt(newValue)}.`);
|
|
141
143
|
}
|
|
142
144
|
}
|
|
143
145
|
validateDisplayChevron(newValue) {
|
|
@@ -171,9 +173,9 @@ const MgActionMore = class {
|
|
|
171
173
|
[`${this.classBase}__chevron--rotate`]: this.expanded === true,
|
|
172
174
|
} }, index.h("mg-icon", { icon: "chevron-down" })));
|
|
173
175
|
}
|
|
174
|
-
return (index.h(index.Host, { key: '
|
|
176
|
+
return (index.h(index.Host, { key: '655b4be7b0b17db8ad6e2d688f59c18f2750dfe4', "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { key: '19f5763f7732fb156803fb6a24f776f182d230f4', class: this.classBase }, index.h("mg-popover", { key: '617fefddd54794e3f3da60e700e1c60e0758c66b', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, index.h("mg-button", { key: 'c9ef1d8f771b015ddb5b8f280c3657e74606ef22', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && index.h("mg-icon", Object.assign({ key: 'ded976da4cd3a457a232aee9613dc9e108c35358' }, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { key: 'e3308c1e0ae198f204c283408f9c3afc154ddf21', slot: "content" }, index.h("mg-menu", { key: '70c222a09f42b938f56a5bb02fa4193ca8f47788', direction: directions$1.VERTICAL, label: this.messages.label }, this.items.map(item => {
|
|
175
177
|
var _a, _b;
|
|
176
|
-
return isMgActionMoreDivider(item) ? (index.h("mg-divider", { class: "mg-c-action-more__divider", key: "divider" })) : (index.h("mg-menu-item", { key: item.label, status: item.status || Status$1.VISIBLE, target: item.target, href: item.href,
|
|
178
|
+
return isMgActionMoreDivider(item) ? (index.h("mg-divider", { class: "mg-c-action-more__divider", key: "divider", "full-width": true })) : (index.h("mg-menu-item", { key: item.label, status: item.status || Status$1.VISIBLE, target: item.target, href: item.href,
|
|
177
179
|
// eslint-disable-next-line react/jsx-no-bind
|
|
178
180
|
onClick: e => this.handleItemClick(e, item.mouseEventHandler) }, ((_a = item.icon) === null || _a === void 0 ? void 0 : _a.icon) && index.h("mg-icon", { icon: item.icon.icon, variant: item.icon.variant, variantStyle: item.icon.variantStyle, slot: "image" }), index.h("span", { slot: "label" }, item.label), ((_b = item.badge) === null || _b === void 0 ? void 0 : _b.label) && index.h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" })));
|
|
179
181
|
})))))));
|
|
@@ -186,7 +188,7 @@ const MgActionMore = class {
|
|
|
186
188
|
"displayChevron": ["validateDisplayChevron"]
|
|
187
189
|
}; }
|
|
188
190
|
};
|
|
189
|
-
MgActionMore.style =
|
|
191
|
+
MgActionMore.style = mgActionMoreCss;
|
|
190
192
|
|
|
191
193
|
/**
|
|
192
194
|
* List of all possibles variants
|
|
@@ -194,7 +196,6 @@ MgActionMore.style = MgActionMoreStyle0;
|
|
|
194
196
|
const variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
|
|
195
197
|
|
|
196
198
|
const mgBadgeCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-badge-size: Defines the height and minimum width of the badge. The default value is `--mg-b-size-16`.\n * @prop --mg-c-badge-font-size: Defines the font size of the badge. The default value is `--mg-b-font-size-small`.\n * @prop --mg-c-badge-color-text: Defines the font color of the badge when used with the `text-color` variant and without `outline`. The default value is `--mg-b-color-light`.\n */.mg-c-badge{min-width:var(--mg-c-badge-size);height:var(--mg-c-badge-size);box-sizing:border-box;padding:0 var(--mg-b-size-4);border:var(--mg-b-size-border) solid;border-radius:calc(var(--mg-c-badge-size)/2);font-size:var(--mg-c-badge-font-size);font-weight:600;line-height:var(--mg-c-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:var(--mg-b-color-primary);background-color:var(--mg-b-color-primary);color:var(--mg-b-color-text-on-primary)}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-primary)}.mg-c-badge.mg-c-badge--secondary{border-color:var(--mg-b-color-secondary);background-color:var(--mg-b-color-secondary);color:var(--mg-b-color-text-on-secondary)}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-secondary)}.mg-c-badge.mg-c-badge--danger{border-color:var(--mg-b-color-danger);background-color:var(--mg-b-color-danger);color:var(--mg-b-color-text-on-danger)}.mg-c-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-danger)}.mg-c-badge.mg-c-badge--info{border-color:var(--mg-b-color-info);background-color:var(--mg-b-color-info);color:var(--mg-b-color-text-on-info)}.mg-c-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-info)}.mg-c-badge.mg-c-badge--success{border-color:var(--mg-b-color-success);background-color:var(--mg-b-color-success);color:var(--mg-b-color-text-on-success)}.mg-c-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-success)}.mg-c-badge.mg-c-badge--warning{border-color:var(--mg-b-color-warning);background-color:var(--mg-b-color-warning);color:var(--mg-b-color-text-on-warning)}.mg-c-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-warning)}.mg-c-badge.mg-c-badge--text-color{border-color:currentcolor;background-color:currentcolor}.mg-c-badge.mg-c-badge--text-color .mg-c-badge__value{color:var(--mg-c-badge-color-text, var(--mg-b-color-light))}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline{background-color:rgba(0,0,0,0)}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline .mg-c-badge__value{color:currentcolor}.mg-c-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
|
|
197
|
-
const MgBadgeStyle0 = mgBadgeCss;
|
|
198
199
|
|
|
199
200
|
const MgBadge = class {
|
|
200
201
|
constructor(hostRef) {
|
|
@@ -207,25 +208,29 @@ const MgBadge = class {
|
|
|
207
208
|
/**
|
|
208
209
|
* Define badge variant
|
|
209
210
|
*/
|
|
210
|
-
this.variant =
|
|
211
|
+
this.variant = 'info';
|
|
212
|
+
/**
|
|
213
|
+
* Define if button is using outline style
|
|
214
|
+
*/
|
|
215
|
+
this.outline = false;
|
|
211
216
|
/**
|
|
212
217
|
* Component classes
|
|
213
218
|
*/
|
|
214
|
-
this.classCollection = new index_es.
|
|
219
|
+
this.classCollection = new index_es.Zt(['mg-c-badge']);
|
|
215
220
|
}
|
|
216
221
|
validateValue(newValue) {
|
|
217
222
|
if (/^[^A-Z]+$/i.exec(`${newValue}`) === null) {
|
|
218
|
-
throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${index_es.
|
|
223
|
+
throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${index_es.Gt(newValue)}.`);
|
|
219
224
|
}
|
|
220
225
|
}
|
|
221
226
|
validateLabel(newValue) {
|
|
222
|
-
if (!index_es.
|
|
223
|
-
throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${index_es.
|
|
227
|
+
if (!index_es.De(newValue)) {
|
|
228
|
+
throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${index_es.Gt(newValue)}.`);
|
|
224
229
|
}
|
|
225
230
|
}
|
|
226
231
|
validateVariant(newValue, oldValue) {
|
|
227
232
|
if (!variants$4.includes(newValue)) {
|
|
228
|
-
throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${index_es.
|
|
233
|
+
throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
229
234
|
}
|
|
230
235
|
else {
|
|
231
236
|
if (oldValue !== undefined) {
|
|
@@ -254,7 +259,7 @@ const MgBadge = class {
|
|
|
254
259
|
* @returns HTML Element
|
|
255
260
|
*/
|
|
256
261
|
render() {
|
|
257
|
-
return (index.h("span", { key: '
|
|
262
|
+
return (index.h("span", { key: 'b5d63ec3facd86cae8b8612a5318fcc8c63287a9', class: this.classCollection.join() }, index.h("span", { key: '350de0e420b7a7d432cd8179b4c353375d8bf185', class: "mg-c-badge__value" }, this.value), index.h("span", { key: '279602e43db9644f673ddbbd79970f07439c6aad', class: "mg-u-visually-hidden" }, this.label)));
|
|
258
263
|
}
|
|
259
264
|
static get watchers() { return {
|
|
260
265
|
"value": ["validateValue"],
|
|
@@ -263,7 +268,7 @@ const MgBadge = class {
|
|
|
263
268
|
"outline": ["validateOutline"]
|
|
264
269
|
}; }
|
|
265
270
|
};
|
|
266
|
-
MgBadge.style =
|
|
271
|
+
MgBadge.style = mgBadgeCss;
|
|
267
272
|
|
|
268
273
|
/**
|
|
269
274
|
* List of all possibles sizes
|
|
@@ -275,12 +280,11 @@ const sizes$4 = ['medium', 'large'];
|
|
|
275
280
|
const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
|
|
276
281
|
|
|
277
282
|
const mgButtonCss = "/*!\n * @prop --mg-c-button-border-radius: Defines the border radius of the button. The default value is `--mg-b-size-radius`.\n * @prop --mg-c-button-border-top-width: Defines the top border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-right-width: Defines the right border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-bottom-width: Defines the bottom border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-left-width: Defines the left border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-radius-top-left: Defines the top left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-top-right: Defines the top right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-right: Defines the bottom right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-left: Defines the bottom left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-font-weight: Defines the font weight of the button. Unset by default, fallback on `normal`.\n * @prop --mg-c-button-icon-border-radius: Defines the border radius of the button in icon mode. The default value is `--mg-b-size-min-height`.\n */:host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{/*!\n * @prop --mg-c-button-color-background-primary: Defines the background color for the primary variant button.\n * @prop --mg-c-button-color-border-primary: Defines the border color for the primary variant button.\n * @prop --mg-c-button-color-gradient-primary: Defines the gradient color for the primary variant button.\n * @prop --mg-c-button-color-text-primary: Defines the font color for the primary variant button.\n */border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{/*!\n * @prop --mg-c-button-color-background-secondary: Defines the background color for the secondary variant button.\n * @prop --mg-c-button-color-border-secondary: Defines the border color for the secondary variant button.\n * @prop --mg-c-button-color-gradient-secondary: Defines the gradient color for the secondary variant button.\n * @prop --mg-c-button-color-text-secondary: Defines the font color for the secondary variant button.\n */border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{/*!\n * @prop --mg-c-button-color-background-danger: Defines the background color for the danger variant button.\n * @prop --mg-c-button-color-border-danger: Defines the border color for the danger variant button.\n * @prop --mg-c-button-color-gradient-danger: Defines the gradient color for the danger variant button.\n * @prop --mg-c-button-color-text-danger: Defines the font color for the danger variant button.\n */border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{/*!\n * @prop --mg-c-button-color-background-info: Defines the background color for the info variant button.\n * @prop --mg-c-button-color-border-info: Defines the border color for the info variant button.\n * @prop --mg-c-button-color-gradient-info: Defines the gradient color for the info variant button.\n * @prop --mg-c-button-color-text-info: Defines the font color for the info variant button.\n */border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{/*!\n * @prop --mg-c-button-color-background-success: Defines the background color for the success variant button.\n * @prop --mg-c-button-color-border-success: Defines the border color for the success variant button.\n * @prop --mg-c-button-color-gradient-success: Defines the gradient color for the success variant button.\n * @prop --mg-c-button-color-text-success: Defines the font color for the success variant button.\n */border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{/*!\n * @prop --mg-c-button-color-background-warning: Defines the background color for the warning variant button.\n * @prop --mg-c-button-color-border-warning: Defines the border color for the warning variant button.\n * @prop --mg-c-button-color-gradient-warning: Defines the gradient color for the warning variant button.\n * @prop --mg-c-button-color-text-warning: Defines the font color for the warning variant button.\n */border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{/*!\n * @prop --mg-c-button-color-background-danger-alt: Defines the background color for the danger-alt variant button.\n * @prop --mg-c-button-color-border-danger-alt: Defines the border color for the danger-alt variant button.\n * @prop --mg-c-button-color-gradient-danger-alt: Defines the gradient color for the danger-alt variant button.\n * @prop --mg-c-button-color-text-danger-alt: Defines the font color for the danger-alt variant button.\n */border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}";
|
|
278
|
-
const MgButtonStyle0 = mgButtonCss;
|
|
279
283
|
|
|
280
284
|
const MgButton = class {
|
|
281
285
|
constructor(hostRef) {
|
|
282
286
|
index.registerInstance(this, hostRef);
|
|
283
|
-
this.disabledChange = index.createEvent(this, "disabled-change"
|
|
287
|
+
this.disabledChange = index.createEvent(this, "disabled-change");
|
|
284
288
|
/************
|
|
285
289
|
* Internal *
|
|
286
290
|
************/
|
|
@@ -291,11 +295,11 @@ const MgButton = class {
|
|
|
291
295
|
/**
|
|
292
296
|
* Define button variant
|
|
293
297
|
*/
|
|
294
|
-
this.variant =
|
|
298
|
+
this.variant = 'primary';
|
|
295
299
|
/**
|
|
296
300
|
* Define button size
|
|
297
301
|
*/
|
|
298
|
-
this.size =
|
|
302
|
+
this.size = 'medium';
|
|
299
303
|
/**
|
|
300
304
|
* Set button to full-width
|
|
301
305
|
*/
|
|
@@ -319,7 +323,7 @@ const MgButton = class {
|
|
|
319
323
|
/**
|
|
320
324
|
* Component classes
|
|
321
325
|
*/
|
|
322
|
-
this.classCollection = new index_es.
|
|
326
|
+
this.classCollection = new index_es.Zt(['mg-c-button']);
|
|
323
327
|
/**
|
|
324
328
|
* Trigger actions onClick event
|
|
325
329
|
* @param event - click event
|
|
@@ -341,7 +345,7 @@ const MgButton = class {
|
|
|
341
345
|
if (!this.disabled && event.key === ' ') {
|
|
342
346
|
event.preventDefault();
|
|
343
347
|
}
|
|
344
|
-
else if (!this.disabled && [
|
|
348
|
+
else if (!this.disabled && [events_utils.Keys.ENTER, events_utils.Keys.NUMPADENTER, events_utils.Keys.SPACE].includes(event.key)) {
|
|
345
349
|
event.preventDefault();
|
|
346
350
|
this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
|
|
347
351
|
}
|
|
@@ -377,7 +381,7 @@ const MgButton = class {
|
|
|
377
381
|
this.variant = variants$3[0];
|
|
378
382
|
return;
|
|
379
383
|
}
|
|
380
|
-
throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${index_es.
|
|
384
|
+
throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
381
385
|
}
|
|
382
386
|
else {
|
|
383
387
|
if (oldValue !== undefined) {
|
|
@@ -389,7 +393,7 @@ const MgButton = class {
|
|
|
389
393
|
validateSize(newValue, oldValue) {
|
|
390
394
|
// validate new value
|
|
391
395
|
if (!sizes$4.includes(newValue)) {
|
|
392
|
-
throw new Error(`<mg-button> prop "size" must be one of: ${sizes$4.join(', ')}. Passed value: ${index_es.
|
|
396
|
+
throw new Error(`<mg-button> prop "size" must be one of: ${sizes$4.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
393
397
|
}
|
|
394
398
|
else {
|
|
395
399
|
if (oldValue !== undefined) {
|
|
@@ -431,7 +435,7 @@ const MgButton = class {
|
|
|
431
435
|
watchIsIcon(newValue) {
|
|
432
436
|
if (newValue) {
|
|
433
437
|
this.classCollection.add(`mg-c-button--icon`);
|
|
434
|
-
if (!index_es.
|
|
438
|
+
if (!index_es.De(this.label)) {
|
|
435
439
|
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
436
440
|
}
|
|
437
441
|
}
|
|
@@ -462,7 +466,7 @@ const MgButton = class {
|
|
|
462
466
|
* Add listners
|
|
463
467
|
*/
|
|
464
468
|
componentDidLoad() {
|
|
465
|
-
index_es.
|
|
469
|
+
index_es.Xt(() => {
|
|
466
470
|
var _a;
|
|
467
471
|
const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
|
|
468
472
|
// submit buttons should trigger form submition;
|
|
@@ -479,7 +483,7 @@ const MgButton = class {
|
|
|
479
483
|
*/
|
|
480
484
|
render() {
|
|
481
485
|
var _a;
|
|
482
|
-
return (index.h(index.Host, { key: '
|
|
486
|
+
return (index.h(index.Host, { key: '9cf0c234da7c2f0ca5ab1d6578fc1a00b7b6aa71', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, index.h("div", { key: 'e4fc763ce10eb5958ebd9330f778380bb93100d6', class: this.classCollection.join() }, this.loading && index.h("mg-icon", { key: '6796487254b12a33339ac6b3a5f6c67000d8fe04', icon: "loader", spin: true }), index.h("div", { key: '469136ef8519825ebff3e6ee2bfe8c55e64a807d', class: "mg-c-button__content" }, index.h("slot", { key: 'eda514d71eaab7f7cf5cd3a65b64ffb6c9ed2e02' })))));
|
|
483
487
|
}
|
|
484
488
|
get element() { return index.getElement(this); }
|
|
485
489
|
static get watchers() { return {
|
|
@@ -491,10 +495,9 @@ const MgButton = class {
|
|
|
491
495
|
"loading": ["loadingHandler"]
|
|
492
496
|
}; }
|
|
493
497
|
};
|
|
494
|
-
MgButton.style =
|
|
498
|
+
MgButton.style = mgButtonCss;
|
|
495
499
|
|
|
496
500
|
const mgCardCss = "/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-min-width: Defines the min-width property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default));box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
|
|
497
|
-
const MgCardStyle0 = mgCardCss;
|
|
498
501
|
|
|
499
502
|
const MgCard = class {
|
|
500
503
|
constructor(hostRef) {
|
|
@@ -511,10 +514,9 @@ const MgCard = class {
|
|
|
511
514
|
return (index.h("div", { key: 'e59cabb09dbc28c148770b57de98f130c4479b75', class: "mg-c-card" }, index.h("slot", { key: 'b6e679317bddd23e73443c601992b7b344d6dc72' })));
|
|
512
515
|
}
|
|
513
516
|
};
|
|
514
|
-
MgCard.style =
|
|
517
|
+
MgCard.style = mgCardCss;
|
|
515
518
|
|
|
516
519
|
const mgCharacterLeftCss = ".mg-u-visually-hidden.sc-mg-character-left{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*.sc-mg-character-left:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*.sc-mg-character-left{animation:none !important;transition:none !important}}mg-character-left.sc-mg-character-left{display:block}";
|
|
517
|
-
const MgCharacterLeftStyle0 = mgCharacterLeftCss;
|
|
518
520
|
|
|
519
521
|
const MgCharacterLeft = class {
|
|
520
522
|
constructor(hostRef) {
|
|
@@ -525,13 +527,13 @@ const MgCharacterLeft = class {
|
|
|
525
527
|
this.characters = '';
|
|
526
528
|
}
|
|
527
529
|
watchIdentifier(newValue) {
|
|
528
|
-
if (newValue !== undefined && !index_es.
|
|
529
|
-
console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
530
|
+
if (newValue !== undefined && !index_es.Ut(newValue)) {
|
|
531
|
+
console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${index_es.Gt(newValue)}.`);
|
|
530
532
|
}
|
|
531
533
|
}
|
|
532
534
|
validateMaxlength(newValue) {
|
|
533
535
|
if (typeof newValue !== 'number') {
|
|
534
|
-
throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${index_es.
|
|
536
|
+
throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${index_es.Gt(newValue)}.`);
|
|
535
537
|
}
|
|
536
538
|
}
|
|
537
539
|
/*************
|
|
@@ -558,15 +560,14 @@ const MgCharacterLeft = class {
|
|
|
558
560
|
"maxlength": ["validateMaxlength"]
|
|
559
561
|
}; }
|
|
560
562
|
};
|
|
561
|
-
MgCharacterLeft.style =
|
|
563
|
+
MgCharacterLeft.style = mgCharacterLeftCss;
|
|
562
564
|
|
|
563
|
-
const mgDetailsCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}";
|
|
564
|
-
const MgDetailsStyle0 = mgDetailsCss;
|
|
565
|
+
const mgDetailsCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}";
|
|
565
566
|
|
|
566
567
|
const MgDetails = class {
|
|
567
568
|
constructor(hostRef) {
|
|
568
569
|
index.registerInstance(this, hostRef);
|
|
569
|
-
this.expandedChange = index.createEvent(this, "expanded-change"
|
|
570
|
+
this.expandedChange = index.createEvent(this, "expanded-change");
|
|
570
571
|
/**
|
|
571
572
|
* Hide summary element
|
|
572
573
|
*/
|
|
@@ -583,7 +584,7 @@ const MgDetails = class {
|
|
|
583
584
|
};
|
|
584
585
|
}
|
|
585
586
|
validateTitles(newValue) {
|
|
586
|
-
if (!index_es.
|
|
587
|
+
if (!index_es.De(newValue)) {
|
|
587
588
|
throw new Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`);
|
|
588
589
|
}
|
|
589
590
|
}
|
|
@@ -600,8 +601,9 @@ const MgDetails = class {
|
|
|
600
601
|
this.validateTitles(this.toggleClosed);
|
|
601
602
|
this.validateTitles(this.toggleOpened);
|
|
602
603
|
this.element.addEventListener('click', (event) => {
|
|
603
|
-
if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]'))
|
|
604
|
+
if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]') !== null) {
|
|
604
605
|
event.preventDefault();
|
|
606
|
+
}
|
|
605
607
|
});
|
|
606
608
|
}
|
|
607
609
|
/**
|
|
@@ -609,7 +611,7 @@ const MgDetails = class {
|
|
|
609
611
|
* @returns HTML Element
|
|
610
612
|
*/
|
|
611
613
|
render() {
|
|
612
|
-
return (index.h("details", { key: '
|
|
614
|
+
return (index.h("details", { key: 'e43aa4f4262d7006b9fdd0e75666649498081d55', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, index.h("summary", { key: '050d5c0a645a017aaa784a4034201122b27238f0' }, index.h("slot", { key: 'e0d7ed83952bdd74a23ecabe93c4d0c922cda286', name: "summary" }), index.h("span", { key: '27238089072f0f0ca8f3263ec39e41291ab89907', class: "mg-c-details__toggle" }, index.h("mg-icon", { key: 'f1702911d70e2a95ecaac17a7a0c43a075ea8c18', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { key: '6854f4ecd77d04e297b807060a0d064401d6537f', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { key: '85e57b346ff8327d31f92a1e86c42fd8f131f6dc', class: "mg-c-details__details" }, index.h("slot", { key: 'bd016ab29d695bb1ccd99b9fd402ed23bbdc19ea', name: "details" }))));
|
|
613
615
|
}
|
|
614
616
|
get element() { return index.getElement(this); }
|
|
615
617
|
static get watchers() { return {
|
|
@@ -618,10 +620,9 @@ const MgDetails = class {
|
|
|
618
620
|
"expanded": ["handleExpanded"]
|
|
619
621
|
}; }
|
|
620
622
|
};
|
|
621
|
-
MgDetails.style =
|
|
623
|
+
MgDetails.style = mgDetailsCss;
|
|
622
624
|
|
|
623
625
|
const mgDividerCss = "/*!\n * @prop --mg-c-divider-color-background: Defines the background color of the divider. The default value is `color-mix(in srgb, var(--mg-b-color-dark), transparent 85%)`.\n * @prop --mg-c-divider-thickness: Defines the thickness of the divider. The default value is `--mg-b-size-border`.\n * @prop --mg-c-divider-spacing-vertical: Defines the vertical spacing of the divider. The default value is `--mg-b-size-40`.\n */.mg-c-divider{width:var(--mg-b-size-120);height:var(--mg-c-divider-thickness);margin:var(--mg-c-divider-spacing-vertical) auto;background-color:var(--mg-c-divider-color-background)}.mg-c-divider.mg-c-divider--full-width{width:100%}";
|
|
624
|
-
const MgDividerStyle0 = mgDividerCss;
|
|
625
626
|
|
|
626
627
|
const MgDivider = class {
|
|
627
628
|
constructor(hostRef) {
|
|
@@ -645,7 +646,7 @@ const MgDivider = class {
|
|
|
645
646
|
} }));
|
|
646
647
|
}
|
|
647
648
|
};
|
|
648
|
-
MgDivider.style =
|
|
649
|
+
MgDivider.style = mgDividerCss;
|
|
649
650
|
|
|
650
651
|
/**
|
|
651
652
|
* List of all possibles roles
|
|
@@ -657,13 +658,12 @@ const roles = ['form', 'search', 'none', 'presentation'];
|
|
|
657
658
|
const requiredMessageStatus = ['default', 'hide'];
|
|
658
659
|
|
|
659
660
|
const mgFormCss = ".mg-u-form-legacy{--mg-c-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:var(--mg-b-color-danger)}/*!\n * @prop --mg-c-form-inputs-title-width: Defines the width of the input title. Fallback on `calc(28 * var(--mg-b-size-8))`.\n */.mg-c-form{--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-margin-bottom:var(--mg-b-size-16);--mg-c-input-title-horizontal-space:var(--mg-b-size-32)}.mg-c-form.mg-c-form--all-required{--mg-c-input-title-display:none}.mg-c-form.mg-c-form--label-on-top{--mg-c-input-margin-bottom:var(--mg-b-size-24)}.mg-c-form>p{font-size:var(--mg-b-font-size-small)}";
|
|
660
|
-
const MgFormStyle0 = mgFormCss;
|
|
661
661
|
|
|
662
662
|
const MgForm = class {
|
|
663
663
|
constructor(hostRef) {
|
|
664
664
|
index.registerInstance(this, hostRef);
|
|
665
|
-
this.formValid = index.createEvent(this, "form-valid"
|
|
666
|
-
this.formSubmit = index.createEvent(this, "form-submit"
|
|
665
|
+
this.formValid = index.createEvent(this, "form-valid");
|
|
666
|
+
this.formSubmit = index.createEvent(this, "form-submit");
|
|
667
667
|
// Classes
|
|
668
668
|
this.classAllRequired = 'mg-c-form--all-required';
|
|
669
669
|
this.classLabelOnTop = 'mg-c-form--label-on-top';
|
|
@@ -671,7 +671,7 @@ const MgForm = class {
|
|
|
671
671
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
672
672
|
* If not set, it will be created.
|
|
673
673
|
*/
|
|
674
|
-
this.identifier = index_es.
|
|
674
|
+
this.identifier = index_es.Pt('mg-form');
|
|
675
675
|
/**
|
|
676
676
|
* Input name
|
|
677
677
|
* If not set the value equals the identifier
|
|
@@ -681,6 +681,10 @@ const MgForm = class {
|
|
|
681
681
|
* Define if form is readonly
|
|
682
682
|
*/
|
|
683
683
|
this.readonly = false;
|
|
684
|
+
/**
|
|
685
|
+
* Define if slotted mg-component's label are displayed on top
|
|
686
|
+
*/
|
|
687
|
+
this.labelOnTop = false;
|
|
684
688
|
/**
|
|
685
689
|
* Define if form is disabled
|
|
686
690
|
*/
|
|
@@ -688,7 +692,7 @@ const MgForm = class {
|
|
|
688
692
|
/**
|
|
689
693
|
* Component classes
|
|
690
694
|
*/
|
|
691
|
-
this.classCollection = new index_es.
|
|
695
|
+
this.classCollection = new index_es.Zt(['mg-c-form']);
|
|
692
696
|
/**
|
|
693
697
|
* Define required message based on mg-inputs required elements
|
|
694
698
|
*/
|
|
@@ -776,18 +780,18 @@ const MgForm = class {
|
|
|
776
780
|
};
|
|
777
781
|
}
|
|
778
782
|
watchIdentifier(newValue) {
|
|
779
|
-
if (!index_es.
|
|
780
|
-
console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
783
|
+
if (!index_es.Ut(newValue)) {
|
|
784
|
+
console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${index_es.Gt(newValue)}.`);
|
|
781
785
|
}
|
|
782
786
|
}
|
|
783
787
|
validateRequiredMessage(newValue) {
|
|
784
788
|
if (newValue && !requiredMessageStatus.includes(newValue)) {
|
|
785
|
-
throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${index_es.
|
|
789
|
+
throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
786
790
|
}
|
|
787
791
|
}
|
|
788
792
|
validateAriaRole(newValue) {
|
|
789
793
|
if (newValue && !roles.includes(newValue)) {
|
|
790
|
-
throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${index_es.
|
|
794
|
+
throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
791
795
|
}
|
|
792
796
|
}
|
|
793
797
|
handlelabelOnTop(newValue) {
|
|
@@ -876,7 +880,7 @@ const MgForm = class {
|
|
|
876
880
|
* @returns HTML Element
|
|
877
881
|
*/
|
|
878
882
|
render() {
|
|
879
|
-
return (index.h("form", { key: '
|
|
883
|
+
return (index.h("form", { key: '444703cae8a5374a86adc1dcaf048665f06e795f', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && index.h("p", { key: '1a936dfeb41a257be7b44afada7bd435f9a357f0', innerHTML: this.requiredMessageText }), index.h("slot", { key: 'a446094e8658b02c5a9baf7b19d77ca11b1432e9' }), !this.readonly && !this.disabled && index.h("slot", { key: '41f4e1c80a0f78b112eaac1d5bc53a219eee926e', name: "actions" })));
|
|
880
884
|
}
|
|
881
885
|
get element() { return index.getElement(this); }
|
|
882
886
|
static get watchers() { return {
|
|
@@ -888,7 +892,7 @@ const MgForm = class {
|
|
|
888
892
|
"disabled": ["handleAttributeChange"]
|
|
889
893
|
}; }
|
|
890
894
|
};
|
|
891
|
-
MgForm.style =
|
|
895
|
+
MgForm.style = mgFormCss;
|
|
892
896
|
|
|
893
897
|
/**
|
|
894
898
|
* List of all possibles sizes
|
|
@@ -906,7 +910,6 @@ const variantStyles$1 = ['icon', 'background', 'full'];
|
|
|
906
910
|
const icons = { 'address-card': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm11 3h-3v1h3zm-3 2h3v1h-3zM8 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-5 5.4A2.4 2.4 0 0 1 5.4 9h1.2A2.4 2.4 0 0 1 9 11.4a.6.6 0 0 1-.6.6H3.6a.6.6 0 0 1-.6-.6" clip-rule="evenodd"/></svg>', 'address-card-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 6.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" d="M13 5h-3v1h3zm-3 2h3v1h-3z"/><path fill="currentColor" fill-rule="evenodd" d="M5.4 9A2.4 2.4 0 0 0 3 11.4a.6.6 0 0 0 .6.6h4.8a.6.6 0 0 0 .6-.6A2.4 2.4 0 0 0 6.6 9zm0 1a1.4 1.4 0 0 0-1.342 1h3.884A1.4 1.4 0 0 0 6.6 10z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm12 1H2v10h12z" clip-rule="evenodd"/></svg>', 'align-center': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 3h8v1H4zm-2 9h12v1H2zm12-6H2v1h12zM4 9h8v1H4z"/></svg>', 'align-justify': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 3h12v1H2zm0 9h12v1H2zm12-6H2v1h12zM2 9h12v1H2z"/></svg>', 'align-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 3h8v1H2zm0 9h12v1H2zm12-6H2v1h12zM2 9h8v1H2z"/></svg>', 'align-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6 3h8v1H6zm-4 9h12v1H2zm12-6H2v1h12zM6 9h8v1H6z"/></svg>', 'api': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.44 11.47h-.02l-.66-.1-.02-.08c-.03-.11-.08-.21-.13-.31l-.04-.07.4-.54v-.02l-.52-.52h-.02l-.54.41-.07-.04c-.1-.05-.2-.09-.31-.13l-.08-.02-.1-.67v-.01h-.73v.02l-.1.66-.08.02c-.11.03-.21.08-.31.13l-.07.04-.55-.41-.52.52v.02l.41.54-.04.07c-.05.1-.09.2-.13.31l-.02.08-.67.1h-.01v.73h.02l.66.1.02.08c.03.1.08.21.13.3l.04.07-.41.55.52.52h.02l.54-.41.07.04c.1.05.2.09.31.13l.08.02.1.67v.01h.73v-.02l.1-.66.08-.02c.11-.03.21-.08.31-.13l.07-.04.55.41.52-.52v-.02l-.4-.54.04-.07c.05-.1.09-.2.13-.31l.02-.08.67-.1h.01v-.73zm-2.46 1.38c-.56 0-1.01-.45-1.01-1.01s.45-1.01 1.01-1.01 1.01.45 1.01 1.01-.45 1.01-1.01 1.01M8.51 5.81c-.11-.09-.27-.14-.5-.14h-.38v1.17h.27c.26 0 .45-.05.58-.15s.19-.25.19-.44-.05-.34-.16-.43zm1.57 5.13-.3-.4c-.1-.1-.09-.27 0-.37l.52-.52c.1-.1.26-.1.37 0l.4.29c.06-.03.13-.06.2-.08l.07-.49c0-.14.12-.25.26-.25h.45a5.44 5.44 0 1 0-10.5-1.99 5.44 5.44 0 0 0 5.44 5.44c.78 0 1.54-.17 2.25-.49v-.6c0-.14.11-.26.26-.26l.49-.07c.02-.07.05-.13.08-.2zm.18-5.96h.84v3.94h-.84zM5.4 8.92l-.29-.94H3.67l-.29.94h-.9l1.39-3.96h1.02l1.4 3.96h-.9zm3.72-1.74c-.26.23-.64.34-1.13.34h-.36v1.4h-.84V4.98h1.26c.48 0 .84.1 1.09.31s.37.51.37.92c0 .42-.13.75-.4.97zM4.4 5.57q-.09.345-.51 1.71h1.03q-.39-1.275-.45-1.44c-.03-.11-.06-.2-.07-.26z"/></svg>', 'archive': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3 6v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6zm7 2H6V7h4zm3-3H3c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1"/></svg>', 'archive-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13 2H3c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1m-1 11H4.04S4 12.98 4 12.96V6h8zm1-8H3V3h10zm-3 3H6V7h4z"/></svg>', 'arrow-clock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m3.025 3.82-.002-.001.083-.09.063-.066.009-.01q.132-.15.273-.292a4 4 0 0 1 .215-.196q.136-.124.279-.24.108-.086.22-.166l.024-.018q.143-.105.293-.203a7 7 0 0 1 1.198-.607l.029-.01q.126-.05.257-.094a6 6 0 0 1 .375-.108l.067-.019q.105-.029.21-.053c.146-.032.294-.054.442-.075l.092-.015q.072-.013.146-.022A6.47 6.47 0 0 1 13 3.847V1.996h1v4h-4v-1h2.594a5.48 5.48 0 0 0-5.189-2.467l-.124.019-.077.012q-.188.025-.373.064a3 3 0 0 0-.173.044l-.063.017a6 6 0 0 0-.317.09 6 6 0 0 0-.227.084l-.016.006a6 6 0 0 0-.523.232 5.4 5.4 0 0 0-.736.452l-.028.021q-.092.065-.18.135-.12.098-.235.204l-.05.044q-.068.06-.133.122-.117.117-.226.241l-.013.014A5.496 5.496 0 1 0 13.5 7.996h1A6.5 6.5 0 1 1 3.025 3.82"/><path fill="currentColor" d="M9.795 11.746 7 8.95V4.246h1v4.29l2.5 2.505z"/></svg>', 'arrow-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.295 8.295 8.5 12.085V2h-1v10.085l-3.795-3.79L3 9l5 5 5-5z"/></svg>', 'arrow-down-a-z': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m6.53 10.9-1.41 1.41-.71.71-2.12-2.12.71-.71.88.88V3.02h1v8.12l.95-.95.71.71zM12.29 6H10.5l-.36 1H9.08l1.79-5h1.05l1.79 5h-1.06zm-.36-1.02-.53-1.49-.53 1.49zm1.79 5.18V9H9.09v1h3.29l-3.29 2.84V14h4.63v-1h-3.29z"/></svg>', 'arrow-down-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.999 12.292V3.999h1v10h-10v-1h8.292L2 2.707 2.707 2z"/></svg>', 'arrow-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m7 13 .705-.705L3.915 8.5H14v-1H3.915l3.79-3.795L7 3 2 8z"/></svg>', 'arrow-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m9 3-.715.696 3.79 3.804H2v1h10.075l-3.79 3.787L9 13l5-5z"/></svg>', 'arrow-rotate': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m3.025 3.82-.002-.001c.046-.055.098-.103.146-.156q.137-.155.282-.302c.069-.068.142-.13.215-.195q.136-.124.279-.241.12-.095.244-.184.143-.105.293-.203a7 7 0 0 1 1.198-.607q.142-.055.286-.104a6 6 0 0 1 .375-.108c.092-.025.184-.052.278-.072a6 6 0 0 1 .441-.075c.08-.012.157-.028.238-.037A6.47 6.47 0 0 1 13 3.847V1.996h1v4h-4v-1h2.594a5.48 5.48 0 0 0-5.188-2.467q-.102.014-.202.031-.188.025-.373.064c-.08.017-.157.04-.236.06a6 6 0 0 0-.317.092q-.122.042-.243.089a6 6 0 0 0-.523.232 5.4 5.4 0 0 0-.736.452q-.106.076-.208.156-.12.098-.235.204-.093.08-.183.166c-.083.081-.16.169-.239.255A5.496 5.496 0 1 0 13.5 7.996h1A6.5 6.5 0 1 1 3.025 3.82"/></svg>', 'arrow-rotate-backward': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.975 3.82.002-.001c-.046-.055-.098-.103-.146-.156-.092-.103-.183-.205-.282-.302-.069-.068-.142-.13-.215-.195q-.135-.124-.279-.241-.12-.095-.244-.184a7 7 0 0 0-.293-.203 7 7 0 0 0-.859-.467 7 7 0 0 0-.339-.14q-.142-.055-.286-.104a6 6 0 0 0-.375-.108c-.092-.025-.184-.052-.278-.072a6 6 0 0 0-.441-.075c-.08-.012-.157-.028-.238-.037A6.47 6.47 0 0 0 3 3.847V1.996H2v4h4v-1H3.406a5.48 5.48 0 0 1 5.189-2.467q.101.014.2.031.19.025.374.064c.08.017.157.04.236.06q.16.042.317.092.122.042.243.089a6 6 0 0 1 .523.232 5.3 5.3 0 0 1 .736.452q.105.076.208.156.12.098.235.204.093.08.183.166c.083.081.16.169.239.255A5.496 5.496 0 1 1 2.5 7.996h-1A6.5 6.5 0 1 0 12.975 3.82"/></svg>', 'arrow-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2 3 7l.705.705L7.5 3.915V14h1V3.915l3.795 3.79L13 7z"/></svg>', 'arrow-up-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.292 3H3.999V2h10v10h-1V3.707L2.707 14 2 13.29z"/></svg>', 'arrow-up-right-square': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.33 3v10c0 .73-.6 1.32-1.33 1.33H3c-.73 0-1.32-.6-1.33-1.33V3c0-.73.6-1.32 1.33-1.33h10c.73 0 1.32.6 1.33 1.33m-2.48.46H8.68c-.37 0-.67.29-.68.66v.04c0 .18.07.35.2.47l.91.91-5.53 5.53c-.13.13-.14.33-.01.47h.01l.87.88c.13.13.33.14.47.01h.01l5.53-5.53.91.9c.26.28.7.29.98.02l.02-.02c.12-.13.19-.3.19-.48V4.15c0-.37-.3-.67-.67-.67z"/></svg>', 'arrow-up-z-a': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m5.82 5.85-.94-.94v8.11h-1V4.96l-.89.89-.71-.71 1.41-1.41.71-.71.71.71 1.41 1.41-.71.71zM12.29 13H10.5l-.36 1H9.08l1.79-5h1.05l1.79 5h-1.06zm-.36-1.02-.53-1.49-.53 1.49zm1.79-8.82V2H9.09v1h3.29L9.09 5.84V7h4.63V6h-3.29z"/></svg>', 'arrows-compare': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.705 8.295 9.915 6.5H15v-1H9.915l1.79-1.795L11 3 8 6l3 3zM8 10 5 7l-.705.705L6.085 9.5H1v1h5.085l-1.79 1.795L5 13z"/></svg>', 'arrows-right-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.085 4.499-1.79-1.795.705-.705 3 3-3 3-.705-.705 1.79-1.795H9v-1zM8 6.514h.003v5.572l1.795-1.79.705.705-3 3-3-3 .705-.705 1.795 1.79V5.499H2v-1h6z"/></svg>', 'arrows-right-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m11 2 3 3-3 3-.705-.705 1.79-1.795H2v-1h10.085l-1.79-1.795zm-7.085 9.5 1.79 1.795L5 14l-3-3 3-3 .705.705-1.79 1.795H14v1z" clip-rule="evenodd"/></svg>', 'arrows-rotate': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10 4.997h2.61a5.5 5.5 0 0 0-6.175-2.271A5.5 5.5 0 0 0 2.5 7.993h-1a6.49 6.49 0 0 1 4.289-6.112A6.51 6.51 0 0 1 13 3.838V2h1v3.996h-4zM6 10.99H3.39a5.5 5.5 0 0 0 6.175 2.271A5.5 5.5 0 0 0 13.5 7.993h1a6.49 6.49 0 0 1-4.289 6.113A6.51 6.51 0 0 1 3 12.15v1.838H2V9.991h4z"/></svg>', 'arrows-rotate-backward': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6 4.997H3.39a5.5 5.5 0 0 1 6.175-2.271A5.5 5.5 0 0 1 13.5 7.993h1a6.49 6.49 0 0 0-4.289-6.112A6.51 6.51 0 0 0 3 3.838V2H2v3.996h4zm4 5.993h2.61a5.5 5.5 0 0 1-6.175 2.271A5.5 5.5 0 0 1 2.5 7.993h-1a6.49 6.49 0 0 0 4.289 6.113A6.51 6.51 0 0 0 13 12.15v1.838h1V9.991h-4z"/></svg>', 'arrows-up-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1.5 5 3-3 3 3-.7.7L5 3.9V14H4V3.9L2.2 5.7zM12 12.1l1.8-1.8.7.7-3 3-3-3 .7-.7 1.8 1.8V2h1z" clip-rule="evenodd"/></svg>', 'ban': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-3.126 4.582a6 6 0 0 1-8.456-8.456zm.707-.708L4.127 3.418a6 6 0 0 1 8.456 8.456" clip-rule="evenodd"/></svg>', 'bell': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.97 6a4 4 0 0 1 8 0v2.3l1.507.822c.91.496.558 1.878-.478 1.878H3.002c-1.027 0-1.387-1.362-.494-1.87l1.461-.83zm2.027 6a2 2 0 1 0 4 0z"/></svg>', 'bell-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="currentColor" d="m11.47 8.597 1.768.964c.455.248.28.939-.239.939H3.002c-.514 0-.694-.681-.247-.935l1.714-.974V6a3.5 3.5 0 0 1 7 0zM7.996 13.5a1.5 1.5 0 0 1-1.415-1h2.83a1.5 1.5 0 0 1-1.415 1Z"/></svg>', 'book': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2H1.5a.5.5 0 0 1 0-1H3V9H1.5a.5.5 0 0 1 0-1H3V7H1.5a.5.5 0 0 1 0-1H3zm8 0H9v4h2z" clip-rule="evenodd"/></svg>', 'book-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4 2a1 1 0 0 0-1 1v3H1.5a.5.5 0 0 0 0 1H3v1H1.5a.5.5 0 0 0 0 1H3v1H1.5a.5.5 0 0 0 0 1H3v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm5 1H4v3h.5a.5.5 0 0 1 0 1H4v1h.5a.5.5 0 0 1 0 1H4v1h.5a.5.5 0 0 1 0 1H4v2h8V3h-1v4H9z" clip-rule="evenodd"/></svg>', 'briefcase': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 4v1H2a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-3V4a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1m5 1V4H6v1z" clip-rule="evenodd"/></svg>', 'briefcase-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 5V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1-1h4v1H6zM2 6v7h12V6z" clip-rule="evenodd"/></svg>', 'building-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4 2h8v12H9v-1a1 1 0 1 0-2 0v1H4zm4 13h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1zM7 4H5v2h2zm2 0h2v2H9zm2 4H9v2h2zM5 8h2v2H5z" clip-rule="evenodd"/></svg>', 'calculator': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm2 1h8v3H4zm2 5H4v2h2zm1 0h2v2H7zm5 0h-2v5h2zm-8 3h2v2H4zm5 0H7v2h2z" clip-rule="evenodd"/></svg>', 'calculator-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 3h8v3H4zm2 5H4v2h2zm3 0H7v2h2zm3 0h-2v5h2zm-6 3H4v2h2zm3 0H7v2h2z"/><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm1 0h10v12H3z" clip-rule="evenodd"/></svg>', 'calendar': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 1h1v1h4V1h1v1h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h2zm8 5H3v7h10z" clip-rule="evenodd"/></svg>', 'calendar-euro': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 2.5h1c.6 0 1 .4 1 1v10c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1v-10c0-.6.4-1 1-1h1v-1h1v1h6v-1h1zm-9 3v8h10v-8zm7.5 6.24-.71-.71c-.35.3-.8.49-1.29.49-.74 0-1.4-.41-1.74-1.02h1.77v-.75H6.51c-.01-.07-.01-.15-.01-.23 0-.09.01-.18.02-.27h2.01V8.5H6.78c.35-.59.99-.98 1.72-.98.49 0 .94.19 1.29.49l.71-.71a2.974 2.974 0 0 0-4.81 1.2H4.5v.75h1.02c-.02.09-.02.18-.02.27 0 .08 0 .16.02.23H4.5v.75h1.17c.4 1.17 1.52 2.02 2.83 2.02.77 0 1.47-.3 2-.78" clip-rule="evenodd"/></svg>', 'calendar-euro-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m9.79 11.02.71.71a2.976 2.976 0 0 1-4.83-1.24H4.5v-.75h1.01c-.01-.08-.01-.15-.01-.23 0-.09 0-.18.02-.27H4.5v-.75h1.19a2.974 2.974 0 0 1 4.81-1.2L9.79 8c-.35-.3-.8-.49-1.29-.49-.73 0-1.37.39-1.72.98h1.75v.75H6.52c-.01.09-.02.18-.02.27 0 .08 0 .16.01.23h2.02v.75H6.76c.34.61 1 1.02 1.74 1.02.49 0 .94-.19 1.29-.49M13 3.5v1H3v-1zm-1-2h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10c0-.55-.45-1-1-1h-1zm-9 12v-8h10v8z"/></svg>', 'calendar-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13 2h-2V1h-1v1H6V1H5v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1m0 11H3V6h10zm0-8H3V3h2v1h1V3h4v1h1V3h2z"/></svg>', 'check': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.77 12.113 15 3.883l-.707-.707-8.23 8.23-4.355-4.355L1 7.76l4.355 4.355-.004.004.707.706.004-.004.003.004.708-.707z"/></svg>', 'check-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1m-1 9.795-2.5-2.5.795-.795L7 9.205 10.705 5.5l.798.793z"/></svg>', 'check-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m4.5 8.207 2.5 2.5 4.5-4.5-.707-.707L7 9.293 5.207 7.5z"/><path fill="currentColor" fill-rule="evenodd" d="M4.111 2.18a7 7 0 1 1 7.778 11.64A7 7 0 0 1 4.111 2.18m.556 10.809a6 6 0 1 0 6.666-9.978 6 6 0 0 0-6.666 9.978" clip-rule="evenodd"/></svg>', 'chevron-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8 11.708 6-6L13.293 5 8 10.293 2.708 5 2 5.708z"/></svg>', 'chevron-down-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14M3.706 6 8 10.294 12.294 6l.706.706-5 5-5-5z" clip-rule="evenodd"/></svg>', 'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m4 8 6 6 .708-.708L5.415 8l5.293-5.292L10 2z"/></svg>', 'chevron-left-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m9-4.294L5.706 8 10 12.294 9.294 13l-5-5 5-5z" clip-rule="evenodd"/></svg>', 'chevron-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m11.708 8-6-6L5 2.708 10.293 8 5 13.293l.708.707z"/></svg>', 'chevron-right-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 0 1 8a7 7 0 0 0 14 0m-9 4.294L10.294 8 6 3.706 6.706 3l5 5-5 5z" clip-rule="evenodd"/></svg>', 'chevron-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8 4.5-6 6 .708.707L8 5.916l5.293 5.293L14 10.5z"/></svg>', 'chevron-up-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1m4.294 9L8 5.706 3.706 10 3 9.294l5-5 5 5z" clip-rule="evenodd"/></svg>', 'circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8"/></svg>', 'clock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m-.5-6.795L10.295 11l.705-.705L8.5 7.79V3.5h-1z" clip-rule="evenodd"/></svg>', 'clock-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m10.95 10.04-.71.71L7.5 8.01v-4h1V7.6l2.45 2.45zM8 2C4.69 2 2 4.69 2 8s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6m0-1c3.87 0 7 3.13 7 7s-3.13 7-7 7-7-3.13-7-7 3.13-7 7-7"/></svg>', 'code-square-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m6.32 10.28.73-.73L5.5 8l1.53-1.53-.73-.73-2.27 2.27 2.28 2.28zm3.37 0L11.97 8 9.69 5.72l-.73.73L10.51 8 8.96 9.55zM3.01 14c-.27 0-.5-.1-.7-.3s-.3-.43-.3-.7V3c0-.27.1-.5.3-.7s.43-.3.7-.3h10c.27 0 .5.1.7.3s.3.43.3.7v10c0 .27-.1.5-.3.7s-.43.3-.7.3H3zm0-1h10V3H3v10z"/></svg>', 'cog': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.062 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.416c.345.15.67.34.97.56l1.226-.708a1 1 0 0 1 1.366.366l1 1.732a1 1 0 0 1-.366 1.366l-1.227.709a5 5 0 0 1 0 1.119l1.227.708a1 1 0 0 1 .366 1.366l-1 1.732a1 1 0 0 1-1.366.366l-1.227-.708c-.3.22-.624.41-.969.56V14a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1.416a5 5 0 0 1-.969-.56l-1.227.708a1 1 0 0 1-1.366-.366l-1-1.732a1 1 0 0 1 .366-1.366l1.227-.709a5 5 0 0 1 0-1.118l-1.227-.709A1 1 0 0 1 1.5 5.366l1-1.732a1 1 0 0 1 1.366-.366l1.227.709q.45-.334.97-.561zm2 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4" clip-rule="evenodd"/></svg>', 'cog-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.438 8a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0m2.5-1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M10 3.416V2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v1.416c-.345.15-.67.34-.969.56l-1.227-.708a1 1 0 0 0-1.366.366l-1 1.732a1 1 0 0 0 .366 1.366l1.227.709a5 5 0 0 0 0 1.118l-1.227.709a1 1 0 0 0-.366 1.366l1 1.732a1 1 0 0 0 1.366.366l1.227-.708a5 5 0 0 0 .969.56V14a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1.416c.345-.15.67-.34.969-.56l1.227.708a1 1 0 0 0 1.366-.366l1-1.732a1 1 0 0 0-.366-1.366l-1.227-.709a5 5 0 0 0 0-1.118l1.227-.709a1 1 0 0 0 .366-1.366l-1-1.732a1 1 0 0 0-1.366-.366l-1.227.708c-.3-.22-.624-.41-.97-.56M7 4.07l-.6.262q-.414.182-.775.449l-.527.39-1.794-1.037-1 1.732 1.793 1.035-.072.65a4 4 0 0 0 0 .898l.072.65-1.793 1.035 1 1.732 1.794-1.036.527.39q.361.265.775.448l.6.262V14h2v-2.07l.6-.262q.414-.182.774-.449l.527-.39 1.795 1.037 1-1.732-1.793-1.035.072-.65a4 4 0 0 0 0-.898l-.072-.65 1.793-1.035-1-1.732-1.795 1.036-.527-.39q-.36-.265-.774-.448L9 4.07V2H7z" clip-rule="evenodd"/></svg>', 'comment': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.5 2A5.5 5.5 0 0 0 4 11.743V14l3.5-1h1a5.5 5.5 0 1 0 0-11zM5 6h6v1H5zm3 2H5v1h3z" clip-rule="evenodd"/></svg>', 'comment-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5 6h6v1H5zm0 2h3v1H5z"/><path fill="currentColor" fill-rule="evenodd" d="m4 14 3.5-1h1a5.5 5.5 0 1 0 0-11h-1A5.5 5.5 0 0 0 4 11.743zm1-2.728-.363-.3A4.5 4.5 0 0 1 7.5 3h1a4.5 4.5 0 1 1 0 9H7.36L5 12.674z" clip-rule="evenodd"/></svg>', 'comment-sms': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2.67c-3.37 0-6.1 2.21-6.1 4.95.02 1.18.51 2.3 1.36 3.11-.26.85-.71 1.62-1.3 2.28a.2.2 0 0 0-.04.21c.03.07.1.11.17.11 1.22-.02 2.4-.45 3.34-1.22.82.31 1.68.46 2.56.46 3.37 0 6.1-2.22 6.1-4.95S11.37 2.67 8 2.67M4.95 8.39a.76.76 0 1 1 0-1.52.76.76 0 0 1 0 1.52m3.05 0a.76.76 0 1 1 0-1.52.76.76 0 0 1 0 1.52m3.05 0a.76.76 0 1 1-.02-1.52c.42 0 .77.33.77.75v.01c0 .42-.34.76-.76.76"/></svg>', 'conversation': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.01 6.51c0-1.93 2.23-3.5 4.99-3.5s4.99 1.57 4.99 3.5-2.23 3.5-4.99 3.5c-.36 0-.71-.03-1.05-.08l-2.26 1.05c-.06.03-.11.03-.17.03-.27 0-.5-.21-.5-.5V8.6c-.62-.58-1.01-1.3-1.01-2.09m10.48-.01c0-.5-.13-.97-.36-1.41h.01c2.22.36 3.88 1.75 3.88 3.41 0 .79-.39 1.5-1.02 2.09v1.91a.5.5 0 0 1-.67.47l-2.26-1.05c-.34.05-.69.08-1.05.08-1.69 0-3.19-.59-4.09-1.5h.12c3.03 0 5.44-1.81 5.44-4" clip-rule="evenodd"/></svg>', 'conversation-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 6.5C10 5.14 8.17 4 6 4l-.01.01c-2.17 0-4 1.14-4 2.5 0 .59.38 1.06.7 1.36l.32.3v1.55l1.51-.7.27-.13.3.04c.31.05.62.07.91.07 2.17 0 4-1.14 4-2.5m-9.01.01c0-1.929 2.237-3.498 4.995-3.5 2.758.002 4.995 1.571 4.995 3.5s-2.24 3.5-5 3.5c-.36 0-.71-.03-1.05-.08l-2.26 1.05c-.06.03-.11.03-.17.03-.26 0-.5-.21-.5-.5V8.6C1.38 8.02.99 7.3.99 6.51m4.995-3.5h.005-.01zm8.005 7.58c.62-.58 1.01-1.3 1.01-2.09q0-.18-.03-.36c-.01-.11-.04-.22-.07-.33a2.3 2.3 0 0 0-.17-.45 3.55 3.55 0 0 0-1.1-1.26c-.1-.07-.19-.13-.3-.2a5 5 0 0 0-.65-.35c-.23-.1-.48-.19-.73-.27a4 4 0 0 1-.19-.06c.14.36.22.74.23 1.13C13.18 6.78 14 7.59 14 8.5c0 .59-.38 1.07-.7 1.36l-.31.3-.01.43v1.12l-1.5-.7-.28-.12-.29.04c-.31.05-.62.07-.91.07-.67 0-1.3-.1-1.86-.29-.51.15-1.06.24-1.64.27.06.05.12.09.18.13l.42.24c.36.18.76.33 1.18.43.15.04.3.08.46.1.02.01.03.01.05.01.17.04.34.07.52.07.22.03.46.04.69.04.36 0 .71-.03 1.05-.08l2.26 1.05q.09.03.18.03c.26 0 .49-.21.5-.5z" clip-rule="evenodd"/></svg>', 'copy': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 2h6V1H4a1 1 0 0 0-1 1v9h1z"/><path fill="currentColor" d="M5 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z"/></svg>', 'copy-file': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 2h6V1H4a1 1 0 0 0-1 1v9h1z"/><path fill="currentColor" d="M6 3h3v4h4v7a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1"/><path fill="currentColor" d="m13 6-3-3v3z"/></svg>', 'copy-file-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m10 3 3 3v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm0 1.414V6h1.586zM12 7H9V4H6v10h6z" clip-rule="evenodd"/><path fill="currentColor" d="M4 2h6V1H4a1 1 0 0 0-1 1v9h1z"/></svg>', 'copy-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10 2H4v9H3V2a1 1 0 0 1 1-1h6z"/><path fill="currentColor" fill-rule="evenodd" d="M5 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1zm1 0h6v10H6z" clip-rule="evenodd"/></svg>', 'credit-card': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3 9h3v2H3z"/><path fill="currentColor" fill-rule="evenodd" d="M2 13a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm0-9h12v1H2zm12 3v5H2V7z" clip-rule="evenodd"/></svg>', 'cross': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 2.707 2.707 2l11.29 11.289-.708.707z"/><path fill="currentColor" d="M2.707 14 2 13.293 13.293 2l.707.708z"/></svg>', 'cross-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7m2.7 10.5L8 8.8l-2.7 2.7-.8-.8L7.2 8 4.5 5.3l.8-.8L8 7.2l2.7-2.7.8.8L8.8 8l2.7 2.7z"/></svg>', 'cross-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 8c0-3.9 3.1-7 7-7s7 3.1 7 7-3.1 7-7 7-7-3.1-7-7m1 0c0 3.3 2.7 6 6 6s6-2.7 6-6-2.7-6-6-6-6 2.7-6 6m6 .8 2.7 2.7.8-.8L8.8 8l2.7-2.7-.8-.8L8 7.2 5.3 4.5l-.8.8L7.2 8l-2.7 2.7.8.8z" clip-rule="evenodd"/></svg>', 'dashboard': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 2h6v7H2zm0 8h6v4H2zm7-8h5v4H9zm0 5h5v7H9z"/></svg>', 'dashboard-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 2H2v7h6zM7 3H3v5h4zm1 7H2v4h6zm-1 1H3v2h4zm2-9v4h5V2zm4 1h-3v2h3zm1 4H9v7h5zm-1 1h-3v5h3z" clip-rule="evenodd"/></svg>', 'download': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.295 6.295 13 7l-5 5-5-5 .705-.705 3.795 3.79V1h1v9.085zM13 14v-2h1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2h1v2z" clip-rule="evenodd"/></svg>', 'earth': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m-1.224-2.553-.63 1.261A6.003 6.003 0 0 1 4.501 3.126l1.6.4a1 1 0 0 1 .742 1.14L6.41 7.19a1 1 0 0 1-.986.83H4.47a1 1 0 0 0-.77.362l-.185.223A1 1 0 0 0 3.5 9.862l.273.348a1 1 0 0 0 .59.362l1.658.332a1 1 0 0 1 .699.533l.057.116a1 1 0 0 1 0 .894m3.543-9.983V4.53a1 1 0 0 0 1 1h1.234a1 1 0 0 0 .664-.252l.09-.08a6.02 6.02 0 0 0-2.988-2.733m3.612 4.622-.012-.075h-3.05a1 1 0 0 0-.884.535l-.773 1.469a1 1 0 0 0-.115.465v.964a1 1 0 0 0 .408.806l.353.259a1 1 0 0 1 .408.806v1.242a6 6 0 0 0 3.665-6.47" clip-rule="evenodd"/></svg>', 'earth-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m0-1a6 6 0 0 0 1.766-.264v-1.421a.5.5 0 0 0-.204-.403l-.353-.26a1.5 1.5 0 0 1-.612-1.208V9.48c0-.243.06-.483.173-.698l.772-1.469a1.5 1.5 0 0 1 1.328-.802h2.944a6 6 0 0 0-.284-.844 1.5 1.5 0 0 1-.977.362h-1.235a1.5 1.5 0 0 1-1.5-1.5V2.28A6 6 0 0 0 8 2a6 6 0 0 0-2.918.756l1.14.286A1.5 1.5 0 0 1 7.336 4.75l-.433 2.525a1.5 1.5 0 0 1-1.479 1.247H4.47a.5.5 0 0 0-.385.18l-.185.223a.5.5 0 0 0-.008.628l.273.348a.5.5 0 0 0 .295.181l1.658.332a1.5 1.5 0 0 1 1.048.8l.058.115a1.5 1.5 0 0 1 0 1.342l-.587 1.174A6 6 0 0 0 8 14m6-6q0-.247-.02-.489h-3.11a.5.5 0 0 0-.443.268l-.772 1.468a.5.5 0 0 0-.058.233v.964a.5.5 0 0 0 .204.403l.353.259a1.5 1.5 0 0 1 .612 1.209v1.01A6 6 0 0 0 14 8m-8.402 5.5h.093l.638-1.276a.5.5 0 0 0 0-.448l-.057-.115a.5.5 0 0 0-.35-.267l-1.658-.331a1.5 1.5 0 0 1-.885-.545l-.273-.347a1.5 1.5 0 0 1 .025-1.884l.184-.223a1.5 1.5 0 0 1 1.155-.542h.954a.5.5 0 0 0 .493-.416l.433-2.525a.5.5 0 0 0-.37-.57l-1.95-.487-.046.018A6.002 6.002 0 0 0 5.598 13.5m7.287-8.597.164-.146a6 6 0 0 0-1.458-1.564 6 6 0 0 0-.772-.457V4.53a.5.5 0 0 0 .5.5h1.234a.5.5 0 0 0 .332-.126" clip-rule="evenodd"/></svg>', 'ellipsis': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0m4 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0m4 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0"/></svg>', 'ellipsis-vertical': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/></svg>', 'euro': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.08 11.02 1.42 1.42a5.95 5.95 0 0 1-4 1.56c-2.6 0-4.8-1.64-5.62-3.94H1.5v-1.5h2.04C3.5 8.38 3.5 8.18 3.5 8c0-.16 0-.34.04-.5H1.5V6h2.36c.8-2.34 3.02-4 5.64-4 1.54 0 2.94.6 4 1.56l-1.42 1.42c-.7-.6-1.6-.98-2.58-.98-1.48 0-2.76.8-3.46 2h3.52v1.5H5.54c-.02.16-.04.32-.04.5 0 .2.02.38.04.56h4.02v1.5H6.08C6.78 11.22 8.06 12 9.5 12c.98 0 1.88-.38 2.58-.98"/></svg>', 'euro-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill="currentColor" d="M8 .67C3.95.67.67 3.95.67 8S3.95 15.33 8 15.33s7.33-3.28 7.33-7.33S12.05.67 8 .67m2.27 11.4c-.38.09-.76.14-1.15.14a4.04 4.04 0 0 1-3.99-2.92h-.58c-.12 0-.23-.09-.23-.22v-.54c0-.12.11-.22.23-.22h.41a5 5 0 0 1 0-.8h-.41c-.12 0-.23-.09-.23-.22v-.58c0-.12.1-.22.23-.22h.63c.6-1.65 2.18-2.74 3.94-2.71.34 0 .68.03 1.02.1.12.03.19.16.16.28l-.23.84c-.03.12-.15.19-.27.17-.24-.05-.48-.08-.73-.08A2.42 2.42 0 0 0 6.81 6.5h2.71c.12.03.2.15.17.27l-.13.58c-.02.1-.11.18-.22.18H6.52c-.03.27-.03.53 0 .8h2.63c.12.03.2.15.17.27l-.11.52c-.03.1-.12.17-.22.18H6.8c.36.96 1.28 1.6 2.31 1.61.3 0 .59-.04.88-.1.12-.02.24.06.27.18l.17.84c.02.12-.05.24-.17.27v-.03z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></svg>', 'exclamation-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8m7.75-4v5h-1.5V4zm0 8v-1.5h-1.5V12z" clip-rule="evenodd"/></svg>', 'exclamation-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.75 4v5h-1.5V4zm0 8v-1.5h-1.5V12z"/><path fill="currentColor" fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1M2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8" clip-rule="evenodd"/></svg>', 'exclamation-stamp': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m15 8-1.55-1.86.22-2.46-2.3-.55L10.17 1 8 1.98 5.84 1 4.63 3.13l-2.29.54.22 2.46L1.01 8l1.55 1.86-.22 2.47 2.3.55 1.2 2.13L8 14.03l2.17.98 1.2-2.13 2.3-.55-.22-2.46L15 8.01zm-6.36 3.35H7.36v-1.34h1.28zm0-2.67H7.36V4.67h1.28z"/></svg>', 'exclamation-triangle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m8 2 7 12H1zm-.75 4.5h1.5V10h-1.5zm1.5 6V11h-1.5v1.5z" clip-rule="evenodd"/></svg>', 'exclamation-triangle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.75 6.5V10h-1.5V6.5zm0 6V11h-1.5v1.5z"/><path fill="currentColor" fill-rule="evenodd" d="M8 2 1 14h14zm0 1.985L2.741 13h10.518z" clip-rule="evenodd"/></svg>', 'eye': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/><path fill="currentColor" fill-rule="evenodd" d="M15 8s-3.134 5-7 5-7-5-7-5 3.134-5 7-5 7 5 7 5m-7 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6" clip-rule="evenodd"/></svg>', 'eye-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6m0-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M1 8s3.134 5 7 5 7-5 7-5-3.134-5-7-5-7 5-7 5m1.215 0 .133.178a15 15 0 0 0 1.405 1.61C4.974 10.994 6.478 12 8 12s3.026-1.006 4.247-2.212A15 15 0 0 0 13.785 8l-.133-.178a15 15 0 0 0-1.405-1.61C11.026 5.006 9.522 4 8 4S4.974 5.006 3.753 6.212A15 15 0 0 0 2.215 8" clip-rule="evenodd"/></svg>', 'eye-slash': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1 1.7.7-.7L15 14.302l-.7.7-3.084-3.085c-.963.63-2.057 1.08-3.216 1.08-3.866 0-7-5-7-5S2.174 6.124 3.97 4.67zm4.556 4.557A3 3 0 0 0 9.74 10.44l-.722-.722a2 2 0 0 1-2.74-2.74z" clip-rule="evenodd"/><path fill="currentColor" d="m5.67 3.572 1.532 1.532a3.003 3.003 0 0 1 3.69 3.691l1.877 1.877C14.142 9.366 15 7.997 15 7.997s-3.134-5-7-5c-.817 0-1.6.223-2.33.575"/><path fill="currentColor" d="M9.998 7.9 8.097 6a2 2 0 0 1 1.9 1.901"/></svg>', 'eye-slash-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1 1.7.7-.7L15 14.302l-.7.7-3.084-3.085c-.963.63-2.057 1.08-3.216 1.08-3.866 0-7-5-7-5S2.174 6.124 3.97 4.67zm3.682 3.683c-.324.256-.635.535-.93.826a15 15 0 0 0-1.537 1.788l.133.178c.334.442.815 1.028 1.405 1.61C4.974 10.99 6.478 11.997 8 11.997c.852 0 1.698-.315 2.492-.804l-.752-.752a3 3 0 0 1-4.184-4.184zm1.596 1.596a2 2 0 0 0 2.74 2.74z" clip-rule="evenodd"/><path fill="currentColor" d="m5.67 3.572.757.757A4.2 4.2 0 0 1 8 3.997c1.522 0 3.026 1.006 4.247 2.212a15 15 0 0 1 1.538 1.788q-.061.085-.133.178a15 15 0 0 1-1.531 1.733l-.06.057.708.707C14.142 9.366 15 7.997 15 7.997s-3.134-5-7-5c-.817 0-1.6.223-2.33.575"/><path fill="currentColor" d="m8.097 6-.895-.896a3.003 3.003 0 0 1 3.69 3.691L9.999 7.9A2 2 0 0 0 8.097 6"/></svg>', 'fax': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13 14H6V2h7v3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1M7 3h5v2H7zm0 4h5v1H7zm1 2H7v1h1zm-1 2h1v1H7zm3-2H9v1h1zm-1 2h1v1H9zm3-2h-1v1h1zm-1 2h1v1h-1z" clip-rule="evenodd"/><path fill="currentColor" d="M2 5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/></svg>', 'fax-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 3H7v2h5zM6 3v2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1V2H6zm6 3h1v7H6V6zM3 5h2v8H3zm9 2H7v1h5zM7 9h1v1H7zm1 2H7v1h1zm1-2h1v1H9zm1 2H9v1h1zm1-2h1v1h-1zm1 2h-1v1h1z" clip-rule="evenodd"/></svg>', 'file': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zm1-1V1l3 3z" clip-rule="evenodd"/></svg>', 'file-cog': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 10.06c-.03.53-.47.94-1 .94-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1zm.55-4.81h3.76v9.4a.68.68 0 0 1-.66.66h-9.3c-.37 0-.67-.31-.66-.68V1.33c.01-.36.3-.65.66-.66h5.54v3.89c-.01.37.28.68.65.69zM10 8l-.51.29c-.21-.18-.46-.32-.72-.41v-.57c0-.06-.05-.12-.11-.14-.43-.09-.87-.09-1.3 0a.14.14 0 0 0-.12.14v.59q-.405.135-.72.42L6 8a.135.135 0 0 0-.17 0c-.3.32-.52.71-.65 1.13-.02.06 0 .13.06.16l.51.29q-.075.42 0 .84l-.51.29c-.05.03-.08.1-.06.16.13.42.35.81.65 1.13.05.04.12.04.17 0l.51-.29c.22.18.46.32.73.41v.59c0 .07.04.13.11.14.43.09.87.09 1.3 0 .07-.01.12-.07.11-.14v-.51c.27-.09.51-.23.73-.41l.51.29c.05.04.12.04.17 0 .3-.32.52-.71.65-1.13.02-.06 0-.13-.06-.16l-.5-.3c.05-.27.05-.56 0-.83l.5-.3c.06-.03.09-.1.07-.16a2.9 2.9 0 0 0-.65-1.13A.16.16 0 0 0 10 8m3.12-4.33L10.41.87a.63.63 0 0 0-.47-.2h-.17v3.66h3.54v-.17c0-.18-.06-.36-.19-.49"/></svg>', 'file-download': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m10.41.87 2.71 2.8a.7.7 0 0 1 .19.49v.17H9.77V.67h.17a.63.63 0 0 1 .47.2m2.9 4.38v9.42a.67.67 0 0 1-.66.66h-9.3a.67.67 0 0 1-.66-.68V1.33a.67.67 0 0 1 .66-.66h5.54v3.9a.67.67 0 0 0 .66.68zm-5.45 7.69 2.54-2.53a.19.19 0 0 0 .01-.27.16.16 0 0 0-.14-.06H8.93a.2.2 0 0 1-.2-.2v-2.6a.18.18 0 0 0-.18-.19H6.92a.19.19 0 0 0-.19.18v2.61a.2.2 0 0 1-.2.2H5.19a.18.18 0 0 0-.19.18.2.2 0 0 0 .06.15l2.54 2.53a.18.18 0 0 0 .26 0" clip-rule="evenodd"/></svg>', 'file-excel': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zm-.018 7h1.335L8.776 9.48l1.5-2.48H9.02l-.795 1.485a5 5 0 0 0-.157.436h-.014a2.6 2.6 0 0 0-.15-.422L7.19 7H5.82l1.457 2.5L5.683 12h1.342l.865-1.614q.09-.234.115-.349h.014q.053.244.101.335z" clip-rule="evenodd"/><path fill="currentColor" d="M10 4V1l3 3z"/></svg>', 'file-excel-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.982 12h1.335L8.776 9.48l1.5-2.48H9.02l-.795 1.485a5 5 0 0 0-.157.436h-.014a2.6 2.6 0 0 0-.15-.422L7.19 7H5.82l1.457 2.5L5.683 12h1.342l.865-1.614q.09-.234.115-.349h.014q.053.244.101.335z"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4l-3-3zm6 3V2.537L11.254 4zm2 1v9H4V2h5v3z" clip-rule="evenodd"/></svg>', 'file-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m10 1 3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 1.415V4h1.585zM12 5H9V2H4v12h8z" clip-rule="evenodd"/></svg>', 'file-pdf': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.464 11.274a4 4 0 0 0-.393.207c-.223.137-.37.27-.444.387-.072.11-.073.19-.03.273l.019.034.027-.01c.103-.042.268-.177.48-.433q.18-.22.34-.458m1.243-1.007q.378-.09.764-.146a9 9 0 0 1-.386-.65 16 16 0 0 1-.378.796m1.873.363a3 3 0 0 0 .341.314c.164.123.28.165.344.168a.1.1 0 0 0 .053-.012.23.23 0 0 0 .07-.094.3.3 0 0 0 .045-.152.07.07 0 0 0-.02-.047c-.039-.047-.15-.116-.391-.159a3 3 0 0 0-.463-.04zM8.051 7.952q.096-.308.151-.626.035-.213.029-.352a.5.5 0 0 0-.024-.15.4.4 0 0 0-.11.03c-.066.027-.12.08-.148.215l-.01.057q-.029.213.044.565.027.126.068.26"/><path fill="currentColor" fill-rule="evenodd" d="M9 1v4h4v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM5.42 12.713a.6.6 0 0 1-.332-.318c-.147-.294-.098-.588.06-.834.15-.233.4-.43.68-.596a6 6 0 0 1 1.122-.489q.454-.817.804-1.686a5.6 5.6 0 0 1-.326-.98c-.065-.303-.09-.603-.034-.86.056-.268.207-.509.492-.623l.055-.02a.75.75 0 0 1 .4-.038.53.53 0 0 1 .362.276c.066.124.09.27.096.407.005.142-.01.3-.036.465-.063.386-.204.859-.394 1.358q.316.672.742 1.277a4.5 4.5 0 0 1 1.01.038c.276.049.556.147.727.352a.64.64 0 0 1 .151.392.9.9 0 0 1-.104.426.8.8 0 0 1-.312.341.65.65 0 0 1-.342.078c-.25-.01-.495-.148-.706-.315l-.095-.081a4.3 4.3 0 0 1-.595-.638 9 9 0 0 0-1.512.307 8.6 8.6 0 0 1-.773 1.143c-.22.265-.46.496-.701.596a.6.6 0 0 1-.44.022" clip-rule="evenodd"/><path fill="currentColor" d="M10 1v3h3z"/></svg>', 'file-pdf-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.42 12.713a.6.6 0 0 1-.332-.318c-.147-.294-.098-.588.06-.834.15-.233.4-.43.68-.596a6 6 0 0 1 1.122-.489q.454-.817.804-1.686a5.5 5.5 0 0 1-.326-.98c-.065-.303-.09-.603-.034-.86.056-.268.207-.509.492-.623.145-.058.303-.09.455-.058a.53.53 0 0 1 .362.276c.066.124.09.27.096.407.005.142-.01.3-.036.465-.063.386-.204.859-.394 1.358q.316.672.742 1.277a4.4 4.4 0 0 1 1.01.038c.276.049.556.147.727.352a.64.64 0 0 1 .151.392.9.9 0 0 1-.104.426.8.8 0 0 1-.268.315.65.65 0 0 1-.386.104c-.25-.01-.495-.148-.706-.315a4.3 4.3 0 0 1-.69-.72 9 9 0 0 0-1.512.308 8.6 8.6 0 0 1-.773 1.143c-.22.265-.46.496-.701.596a.6.6 0 0 1-.44.022m1.044-1.44a4 4 0 0 0-.348.18c-.248.148-.41.29-.49.415-.07.11-.072.19-.03.273l.02.034.027-.01c.103-.042.268-.177.48-.433q.18-.22.34-.458m1.242-1.006q.378-.09.764-.146a9 9 0 0 1-.386-.65 16 16 0 0 1-.378.796m2.18.65a3 3 0 0 1-.328-.309q.233.002.463.04c.24.043.352.112.392.159q.019.02.02.047a.3.3 0 0 1-.045.152.23.23 0 0 1-.071.094.1.1 0 0 1-.053.012c-.07-.003-.196-.05-.377-.194m-1.684-3.59q-.056.316-.15.625a3 3 0 0 1-.069-.26c-.057-.268-.065-.478-.034-.623.028-.134.082-.188.148-.214a.4.4 0 0 1 .11-.03.5.5 0 0 1 .024.15q.006.138-.029.351" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 1 1-1h6l3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm7 .537V4h1.254zM12 14V5H9V2H4v12z" clip-rule="evenodd"/></svg>', 'file-text': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zm2 2H5v1h6zM5 9h6v1H5zm6 2H5v1h6z" clip-rule="evenodd"/><path fill="currentColor" d="M10 4V1l3 3z"/></svg>', 'file-text-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11 7H5v1h6zM5 9h6v1H5zm6 2H5v1h6z"/><path fill="currentColor" fill-rule="evenodd" d="m13 4-3-3H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1zm-3 0V2.415L11.585 4zM9 5h3v9H4V2h5z" clip-rule="evenodd"/></svg>', 'file-upload': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.12 3.67 10.41.87a.63.63 0 0 0-.47-.2h-.17v3.66h3.54v-.17c0-.18-.06-.36-.19-.49m.19 11V5.25H9.55c-.37 0-.67-.31-.66-.68V.67H3.35a.68.68 0 0 0-.66.66v13.32c0 .37.29.67.66.68h9.3c.36-.01.65-.3.66-.66m-3-4.64H8.93c-.1 0-.19.07-.2.18v2.61c0 .1-.09.18-.19.18H6.91a.18.18 0 0 1-.18-.18V10.2c0-.1-.07-.19-.18-.2H5.19s-.09.01-.14 0a.19.19 0 0 1 0-.27L7.6 7.14c.07-.07.19-.07.26 0l2.54 2.54s.06.09.06.14c0 .1-.09.18-.19.18z"/></svg>', 'file-word': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zM5 7l1.091 5h1.002L8 8.262 8.91 12h.98L11 7h-.93l-.701 3.492L8.568 7H7.47l-.836 3.435L5.944 7z" clip-rule="evenodd"/><path fill="currentColor" d="M10 4V1l3 3z"/></svg>', 'file-word-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m5 7 1.091 5h1.002L8 8.262 8.91 12h.98L11 7h-.93l-.701 3.492L8.568 7H7.47l-.836 3.435L5.944 7z"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4l-3-3zm6 3V2.537L11.254 4zm2 1v9H4V2h5v3z" clip-rule="evenodd"/></svg>', 'filter': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 0-1 1v1.586a1 1 0 0 0 .293.707L6 9v2.5a1 1 0 0 0 .4.8l2 1.5A1 1 0 0 0 10 13V9l3.707-3.707A1 1 0 0 0 14 4.586V3a1 1 0 0 0-1-1z" clip-rule="evenodd"/></svg>', 'filter-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 3h10v1.586l-4 4V13l-2-1.5V8.586l-4-4zm3 7V9L2.293 5.293A1 1 0 0 1 2 4.586V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1.586a1 1 0 0 1-.293.707L10 9v4a1 1 0 0 1-1.6.8l-2-1.5a1 1 0 0 1-.4-.8z" clip-rule="evenodd"/></svg>', 'floppy-disk': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 3a1 1 0 0 1 1-1h7.586a1 1 0 0 1 .707.293l2.414 2.414a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm2 0h6v3H4zm4 5a2 2 0 1 0 0 4 2 2 0 0 0 0-4" clip-rule="evenodd"/></svg>', 'floppy-disk-checked': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 3a1 1 0 0 1 1-1h7.586a1 1 0 0 1 .707.293l2.414 2.414a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm2 0h6v3H4zm6.828 5-3.535 3.535-2.12-2.12.706-.708 1.415 1.414 2.828-2.828z" clip-rule="evenodd"/></svg>', 'floppy-disk-checked-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11.293 2.293A1 1 0 0 0 10.586 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5.414a1 1 0 0 0-.293-.707zM3 13V3h1v3h6V3h.586L13 5.414V13zM9 3H5v2h4zm1.828 5.12L8 10.948v.001l-.707.707-.707-.706-1.414-1.415.707-.707 1.415 1.414 2.828-2.828z" clip-rule="evenodd"/></svg>', 'floppy-disk-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6 10a2 2 0 1 1 4 0 2 2 0 0 1-4 0m2 1a1 1 0 1 1 0-2 1 1 0 0 1 0 2" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M10.586 2a1 1 0 0 1 .707.293l2.414 2.414a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zM3 3v10h10V5.414L10.586 3H10v3H4V3zm2 0h4v2H5z" clip-rule="evenodd"/></svg>', 'folder': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 4h7c.55 0 1 .45 1 1v7c0 .55-.45 1-1 1H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h4z"/></svg>', 'folder-check': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14 4H7L6 3H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1M5.705 8.185 7 9.48l3.295-3.295.705.705-4 4-2-2z" clip-rule="evenodd"/></svg>', 'folder-check-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.705 8.185 7 9.48l3.295-3.295.705.705-4 4-2-2z"/><path fill="currentColor" fill-rule="evenodd" d="m6 3 1 1.001h7c.55 0 1 .45 1 1.001v6.997c0 .55-.45 1.001-1 1.001H2c-.55 0-1-.45-1-1.001V4.001C1 3.451 1.45 3 2 3zm-.41 1.001H2v8.008h12V5.002H6.59z" clip-rule="evenodd"/></svg>', 'folder-lines': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4H7L6 3H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1m-5 6H4V9h5zm3-2H4V7h8z"/></svg>', 'folder-lines-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12 8.005H4V7.004h8zM9 9.006H4v1.001h5zM5.59 4.001H2v8.008h12V5.002H6.59l-.29-.29zM6 3l1 1.001h7c.55 0 1 .45 1 1.001v6.997c0 .55-.45 1.001-1 1.001H2c-.55 0-1-.45-1-1.001V4.001C1 3.451 1.45 3 2 3z"/></svg>', 'folder-link': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4.44H8.46L6.62 2.67H2C1.27 2.67.68 3.27.67 4v8c0 .73.6 1.32 1.33 1.33h12c.73 0 1.32-.6 1.33-1.33V5.78c0-.73-.6-1.33-1.33-1.34m-6.82 6.88H5.65c-1.34 0-2.42-1.08-2.42-2.42s1.08-2.42 2.42-2.42h.84c.14 0 .25.11.25.25 0 .06-.02.13-.06.17-.2.21-.36.45-.49.71-.04.07-.11.13-.19.14h-.33c-.62-.15-1.24.22-1.39.84s.22 1.24.84 1.39c.15.04.31.04.47.02h1.58c.62 0 1.12-.48 1.15-1.1v-.22c-.02-.08 0-.16.06-.22.12-.13.29-.2.47-.2h.45c.12 0 .23.09.25.21.02.14.02.29 0 .43 0 1.32-1.05 2.39-2.37 2.42m3.17 0h-.84c-.06 0-.13-.02-.17-.07-.1-.1-.1-.25 0-.35.2-.21.36-.45.49-.71.02-.09.08-.16.17-.19h.36c.63.04 1.18-.43 1.23-1.07.04-.63-.43-1.18-1.07-1.23H8.83c-.64 0-1.15.51-1.15 1.15v.25c.02.08 0 .16-.06.22-.12.13-.29.21-.47.21H6.7c-.13 0-.24-.09-.26-.22-.01-.14-.01-.27 0-.41a2.41 2.41 0 0 1 2.38-2.43h1.52c1.34 0 2.42 1.07 2.43 2.41 0 1.34-1.09 2.42-2.42 2.43z"/></svg>', 'folder-link-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m6.22 3.67 1.55 1.49.29.28h5.93c.19 0 .34.16.34.34v6.21c0 .18-.15.34-.33.34H2.01c-.18 0-.34-.15-.34-.33V4.01c0-.18.15-.34.33-.34zm.4-1H2C1.27 2.67.68 3.27.67 4v8c0 .73.6 1.32 1.33 1.33h12c.73 0 1.32-.6 1.33-1.33V5.78c0-.73-.6-1.33-1.33-1.34H8.46z"/><path fill="currentColor" d="M9.555 8.848a2.37 2.37 0 0 1-2.372 2.372l-1.486.006a2.366 2.366 0 0 1-2.37-2.37 2.38 2.38 0 0 1 2.376-2.377h.82c.135 0 .25.106.25.249q-.001.094-.062.17a3 3 0 0 0-.474.687.26.26 0 0 1-.223.143h-.286a1.13 1.13 0 0 0-1.165 1.086 1.123 1.123 0 0 0 1.082 1.163c.023.005.045 0 .063 0l1.481-.002A1.123 1.123 0 0 0 8.292 8.64a.25.25 0 0 1 .063-.214.62.62 0 0 1 .46-.201l.464-.001c.125 0 .223.089.245.21q.034.206.035.419zm3.11.001a2.365 2.365 0 0 0-2.371-2.37l-1.481.001a2.387 2.387 0 0 0-2.337 2.8c.022.12.125.205.245.21l.464-.001a.6.6 0 0 0 .46-.201.24.24 0 0 0 .063-.214 1.123 1.123 0 0 1 1.104-1.335l1.48-.002a1.12 1.12 0 0 1 1.15 1.096 1.13 1.13 0 0 1-1.099 1.152c-.022.004-.045 0-.062 0h-.286a.25.25 0 0 0-.223.143c-.125.25-.286.482-.474.688a.244.244 0 0 0 .013.352.24.24 0 0 0 .17.063l.82-.001a2.38 2.38 0 0 0 2.377-2.376z"/></svg>', 'folder-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7 4.001 6 3H2c-.55 0-1 .45-1 1.001v7.998C1 12.549 1.45 13 2 13h12c.55 0 1-.45 1-1.001V5.002c0-.55-.45-1.001-1-1.001zm-5 0h3.59l1 1.001H14v7.007H2z" clip-rule="evenodd"/></svg>', 'folder-star': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4.44H8.46L6.62 2.67H2A1.35 1.35 0 0 0 .67 4v8A1.35 1.35 0 0 0 2 13.33h12A1.35 1.35 0 0 0 15.33 12V5.78A1.36 1.36 0 0 0 14 4.44m-.2 3.89L12 9.66l.69 2a.22.22 0 0 1-.08.27.26.26 0 0 1-.13.06.4.4 0 0 1-.15-.06l-1.77-1.26L8.75 12a.34.34 0 0 1-.15 0 .3.3 0 0 1-.13 0 .23.23 0 0 1-.08-.27l.69-2-1.81-1.35a.23.23 0 0 1-.1-.17.24.24 0 0 1 .24-.24h2.21l.67-2a.26.26 0 0 1 .243-.156.24.24 0 0 1 .217.156l.67 2h2.2a.26.26 0 0 1 .26.24.3.3 0 0 1-.08.12"/></svg>', 'folders': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 3h4c.55 0 1 .45 1 1v5c0 .55-.45 1-1 1h-1V8a2 2 0 0 0-2-2H6.414l-1-1H5V3c0-.55.45-1 1-1h2z"/><path fill="currentColor" d="M10 7a1 1 0 0 1 1 1v5c0 .55-.45 1-1 1H3c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h2l1 1z"/></svg>', 'folders-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 3 8 2H6c-.55 0-1 .45-1 1v2h1V3h1.59l1 1H13v5.01h-1V10h1c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1z"/><path fill="currentColor" fill-rule="evenodd" d="m5 6 1 1h4c.55 0 1 .45 1 1v5c0 .55-.45 1-1 1H3c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1zm-.41 1H3v6.01h7V8H5.59z" clip-rule="evenodd"/></svg>', 'gavel': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.908 5.012a.59.59 0 0 0 .59 1.02l.138-.08.59 1.02-5.892 3.402a.59.59 0 0 0 .589 1.02l5.892-3.4.589 1.02-.14.08a.59.59 0 0 0 .59 1.02l3.31-1.91a.59.59 0 0 0-.59-1.02l-.139.08-1.768-3.062.14-.08a.59.59 0 0 0-.59-1.021zm3.631 7.01a.5.5 0 1 0 0 1h5a.5.5 0 0 0 0-1z"/></svg>', 'gavel-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.869 4.99a.59.59 0 0 0 .59 1.02l.138-.08.59 1.02-5.892 3.402a.59.59 0 1 0 .589 1.02l5.892-3.4.59 1.02-.14.08a.59.59 0 0 0 .589 1.02l3.31-1.91a.59.59 0 0 0-.59-1.02l-.139.08L9.628 4.18l.14-.08a.59.59 0 0 0-.59-1.021zm1.594.44 1.3-.75 1.767 3.062-1.299.75z" clip-rule="evenodd"/><path fill="currentColor" d="M9.5 12a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1z"/></svg>', 'graduation-cap': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m1 6 7-3 7 3v5h-1V6.429L8 9z"/><path fill="currentColor" d="M3 7.945V11l5 2 5-2V7.945l-5 2.143z"/></svg>', 'graduation-cap-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1 6 2 .857V11l5 2 5-2V6.857l1-.428V11h1V6L8 3zm3 4.323V7.286L8 9l4-1.714v3.037l-4 1.6zM3.539 6 8 7.912 12.461 6 8 4.088z" clip-rule="evenodd"/></svg>', 'hand-euro': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.91 7.11c-.581.55-1.362.89-2.213.89h-.01c-1.357 0-2.527-.86-3.043-2.09H8v-1h1.385a4 4 0 0 1-.02-.554l.002-.043q.005-.113.017-.223H8v-1h1.642C10.156 1.86 11.322 1 12.687 1c.901 0 1.712.37 2.313.98l-.711.71c-.42-.43-.991-.69-1.602-.69-.774 0-1.492.422-1.92 1.09h1.239v1h-1.612a2.7 2.7 0 0 0 0 .82h1.612v1h-1.241C11.19 6.578 11.907 7 12.687 7c.57 0 1.101-.22 1.512-.6zM3 7H1v7h2zm9.81 4.5h-2.06c-.09.18-.2.34-.35.49-.37.37-.87.58-1.39.58s-1.02-.2-1.39-.58l-1.04-1.04c-.2-.2-.2-.51 0-.71s.51-.2.71 0l1.04 1.04c.36.36 1 .37 1.36 0 .18-.18.28-.42.28-.68s-.1-.5-.28-.68L8.44 8.67c-.2-.2-.44-.36-.71-.48-.3-.12-.62-.18-.94-.18h-2.8v4.8h.02l.29-.02 1.94 1.63c.45.38 1.02.58 1.6.58h5.81c.74 0 1.33-.6 1.33-1.33 0-1.2-.97-2.17-2.17-2.17"/></svg>', 'hand-euro-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.91 7.11c-.581.55-1.362.89-2.213.89h-.01c-1.357 0-2.527-.86-3.043-2.09H8v-1h1.385a3.7 3.7 0 0 1 0-.82H8v-1h1.642C10.156 1.86 11.322 1 12.687 1c.901 0 1.712.37 2.313.98l-.711.71c-.42-.43-.991-.69-1.602-.69-.774 0-1.492.422-1.92 1.09h1.239v1h-1.612a2.7 2.7 0 0 0 0 .82h1.612v1h-1.241C11.19 6.578 11.907 7 12.687 7c.57 0 1.101-.22 1.512-.6z"/><path fill="currentColor" fill-rule="evenodd" d="M1 7h3v1h2.798a2.5 2.5 0 0 1 1.77.731L9.73 9.896a1.56 1.56 0 0 1 .376 1.603h2.726c1.197 0 2.167.971 2.167 2.167 0 .737-.599 1.333-1.334 1.333H7.852a2.5 2.5 0 0 1-1.599-.578L4 12.566V14H1zm1 1h1v5H2zm2 1v2.27l2.892 2.382c.27.224.61.347.96.347h5.814c.185 0 .334-.15.334-.333 0-.644-.522-1.167-1.167-1.167h-3.77a1.56 1.56 0 0 1-1.539-.395l-.75-.75a.5.5 0 1 1 .707-.707l.75.75a.56.56 0 0 0 .397.164h.021a.56.56 0 0 0 .375-.957L7.861 9.439A1.5 1.5 0 0 0 6.799 9z" clip-rule="evenodd"/></svg>', 'hand-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.75 3.5c-.41 0-.75.34-.75.75v3.5c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-4c0-.41-.34-.75-.75-.75s-.75.34-.75.75v4c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-5c0-.41-.34-.75-.75-.75S8 2.34 8 2.75v5c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-4c0-.41-.34-.75-.75-.75S6 3.34 6 3.75V11L3.97 9.54a.845.845 0 0 0-1.21 0c-.33.34-.34.88 0 1.21l2.22 2.22c.66.66 1.55 1.03 2.47 1.03H11a2.5 2.5 0 0 0 2.5-2.5V4.25c0-.41-.34-.75-.75-.75"/></svg>', 'history': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.975 3.82.002-.001-.083-.09-.063-.066-.009-.01-.001-.002a6 6 0 0 0-.272-.29q-.076-.074-.157-.144l-.058-.052-.004-.003a6 6 0 0 0-.275-.237 6 6 0 0 0-.22-.166l-.024-.018a7 7 0 0 0-.293-.203 7 7 0 0 0-.859-.467 7 7 0 0 0-.339-.14l-.03-.011a6 6 0 0 0-.255-.093 7 7 0 0 0-.376-.108L9.592 1.7a4 4 0 0 0-.652-.128l-.092-.015q-.072-.013-.146-.022A6.47 6.47 0 0 0 3 3.847V1.996H2v4h4v-1H3.406a5.48 5.48 0 0 1 5.189-2.467q.061.008.124.019l.077.012q.188.025.373.064.088.02.173.044l.063.017q.16.041.317.09.115.04.227.084l.016.006a6 6 0 0 1 .523.232 5.4 5.4 0 0 1 .736.452l.03.022q.09.066.178.134.12.098.235.204l.05.044a4 4 0 0 1 .36.364l.012.013A5.496 5.496 0 1 1 2.5 7.996h-1A6.5 6.5 0 1 0 12.975 3.82"/><path fill="currentColor" d="M10.088 11.746 7.293 8.95V4.246h1v4.29l2.5 2.505z"/></svg>', 'home': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m13.55 5.5-5-3.33C8.38 2.06 8.19 2 7.99 2s-.39.06-.56.17L2.45 5.5c-.28.19-.45.5-.45.83v6.66c0 .55.45 1 1 1h4V12c0-.56.45-1.01 1-1.01s1 .45 1 1.01v1.99h4c.55 0 1-.45 1-1V6.33c0-.33-.17-.65-.45-.83"/></svg>', 'home-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m13.55 5.5-5-3.33C8.38 2.06 8.19 2 7.99 2s-.39.06-.56.17L2.45 5.5c-.28.19-.45.5-.45.83v6.66c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V6.33c0-.33-.17-.65-.45-.83m-.56 7.5h-4v-1c0-.55-.45-1-1-1s-1 .45-1 1v1H3V6.33L8 3l5 3.33V13z"/></svg>', 'info-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-7.75 4V7h1.5v5zm0-8v1.5h1.5V4z" clip-rule="evenodd"/></svg>', 'info-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.25 12V7h1.5v5zm0-8v1.5h1.5V4z"/><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m6-7A6 6 0 1 0 2 8a6 6 0 0 0 12 0" clip-rule="evenodd"/></svg>', 'interrogation-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15.039 8.146a7 7 0 1 1-14 0 7 7 0 0 1 14 0m-6.974-.5a1 1 0 1 0-.942-1.335l-1.43-.458A2.501 2.501 0 1 1 8.79 9.04v.606h-1.5v-2zm-.026 3a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5" clip-rule="evenodd"/></svg>', 'interrogation-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.824 7.646a1 1 0 1 0-.943-1.335l-1.429-.458A2.501 2.501 0 1 1 8.548 9.04v.606h-1.5v-2zm-.776 3.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0"/><path fill="currentColor" fill-rule="evenodd" d="M7.798 15.146a7 7 0 1 0 0-14 7 7 0 0 0 0 14m0-1a6 6 0 1 0 0-12 6 6 0 0 0 0 12" clip-rule="evenodd"/></svg>', 'key': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.44 6.67a3.994 3.994 0 0 0-5.1-2.44A3.986 3.986 0 0 0 .9 9.33 3.994 3.994 0 0 0 6 11.77c1.14-.4 2.04-1.3 2.44-2.44h2.89V12H14V9.33h1.33V6.67zM4.67 9.33c-.73 0-1.33-.6-1.33-1.33s.6-1.33 1.33-1.33S6 7.27 6 8s-.58 1.32-1.31 1.33z"/></svg>', 'laptop': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.5 5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z"/><path fill="currentColor" fill-rule="evenodd" d="M3 3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1H1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1h-2a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm10 1H3v7h10z" clip-rule="evenodd"/></svg>', 'layers': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.763 8.94a.5.5 0 0 0 .474 0l6.5-3.5a.5.5 0 0 0 0-.88l-6.5-3.5a.5.5 0 0 0-.474 0l-6.5 3.5a.5.5 0 0 0 0 .88zM8 7.932 2.555 5 8 2.068 13.445 5zM8 12a.5.5 0 0 1-.237-.06l-6.5-3.5.474-.88L8 10.932l6.263-3.372.474.88-6.5 3.5A.5.5 0 0 1 8 12m0 3a.5.5 0 0 1-.237-.06l-6.5-3.5.474-.88L8 13.932l6.263-3.372.474.88-6.5 3.5A.5.5 0 0 1 8 15" clip-rule="evenodd"/></svg>', 'life-ring': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15a6.97 6.97 0 0 0 4.192-1.394 7 7 0 0 0 1.315-1.284A6.97 6.97 0 0 0 15 8a6.97 6.97 0 0 0-1.394-4.192 7 7 0 0 0-1.414-1.414A6.97 6.97 0 0 0 8 1a6.97 6.97 0 0 0-4.192 1.394 7 7 0 0 0-1.414 1.414A6.97 6.97 0 0 0 1 8a6.97 6.97 0 0 0 1.394 4.192c.368.493.8.935 1.284 1.315A6.97 6.97 0 0 0 8 15m3.446-4.968 1.445 1.444a6 6 0 0 1-1.415 1.415l-1.444-1.445a4 4 0 0 0 1.414-1.414m-6.892 0a4 4 0 0 0 1.414 1.414l-1.445 1.445a6 6 0 0 1-1.414-1.415zm1.414-5.478a4 4 0 0 0-1.414 1.414L3.109 4.523A6 6 0 0 1 4.523 3.11zm5.509-1.445-1.445 1.445a4 4 0 0 1 1.414 1.414l1.445-1.445a6 6 0 0 0-1.415-1.414M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6" clip-rule="evenodd"/></svg>', 'lines-rectangle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm2 4h6v1H5zm4 3H5v1h4z" clip-rule="evenodd"/></svg>', 'lines-rectangle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5 6h6v1H5zm4 3H5v1h4z"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm8 1H4v12h8z" clip-rule="evenodd"/></svg>', 'link': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13.65 2.727a3 3 0 0 1 .975.653 3 3 0 0 1 .01 4.24l-4 4a3 3 0 0 1-2.135.88 3 3 0 0 1-2.125-.865 3 3 0 0 1 0-4.25l.71-.71.705.71-.705.71a2.003 2.003 0 1 0 2.835 2.83l4-4a2.006 2.006 0 0 0-.65-3.27 2.005 2.005 0 0 0-2.185.435l-.71-.71a3 3 0 0 1 3.275-.653M1.66 11.76a2 2 0 0 0 .435.65 2 2 0 0 0 2.835 0l.71.71A3.04 3.04 0 0 1 3.5 14a3 3 0 0 1-2.13-.85 3 3 0 0 1 0-4.255l4-4A3.009 3.009 0 0 1 9.625 9.15l-1.06 1.06-.71-.71 1.06-1.075A2 2 0 0 0 9.5 7a1.97 1.97 0 0 0-1.22-1.86 2 2 0 0 0-2.185.435l-4 4a2 2 0 0 0-.436 2.185" clip-rule="evenodd"/></svg>', 'list': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 3h9v1H5zm0 9h9v1H5zm9-4.5H5v1h9zm-12 0h1v1H2zM3 3H2v1h1zm-1 9h1v1H2z" clip-rule="evenodd"/></svg>', 'loader': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-opacity=".2" d="M13.657 8A5.657 5.657 0 1 1 2.343 8a5.657 5.657 0 0 1 11.314 0M3.475 8a4.526 4.526 0 1 0 9.05 0 4.526 4.526 0 0 0-9.05 0"/><path fill="currentColor" d="M2.343 8A5.657 5.657 0 0 1 8 2.343v1.132A4.525 4.525 0 0 0 3.475 8z"/></svg>', 'location': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 14.997c2.5-2.5 5-6.236 5-8.997A5 5 0 0 0 3 6c0 2.761 2.5 6.496 5 8.997m0-7.499a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'location-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 6.002a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M13 6.002c0 2.506-2.06 5.814-4.309 8.273q-.344.376-.691.723a23 23 0 0 1-.691-.723C5.059 11.816 3 8.508 3 6.002a5 5 0 0 1 10 0m-1 0c0 1.116-.52 2.554-1.424 4.088A21.5 21.5 0 0 1 8 13.55a21.5 21.5 0 0 1-2.576-3.459C4.52 8.556 4 7.118 4 6.002a4 4 0 1 1 8 0" clip-rule="evenodd"/></svg>', 'lock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 4v3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-6 0m5 3V4a2 2 0 1 0-4 0v3zm-2 3a1 1 0 1 0 0 2 1 1 0 0 0 0-2" clip-rule="evenodd"/></svg>', 'lock-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/><path fill="currentColor" fill-rule="evenodd" d="M5 4v3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-6 0m5 3V4a2 2 0 1 0-4 0v3zm2 1v6H4V8z" clip-rule="evenodd"/></svg>', 'log-in': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 13v1h5a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H8v1h5v10z"/><path fill="currentColor" d="m9.086 8.5-1.793 1.793L8 11l3-3-3-3-.707.707L9.086 7.5H2v1z"/></svg>', 'log-out': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.086 8.5-1.793 1.793L11 11l3-3-3-3-.707.707L12.086 7.5H5v1z"/><path fill="currentColor" d="M8 3V2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5v-1H3V3z"/></svg>', 'magnifying-glass': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7a5 5 0 1 1 8.872 3.164l3.127 3.128-.707.707-3.128-3.128A5 5 0 0 1 2 7m5 4a4 4 0 1 1 0-8 4 4 0 0 1 0 8" clip-rule="evenodd"/></svg>', 'mail': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M1.007 4.002v8.011a1 1 0 0 0 1 1h11.997a1 1 0 0 0 1-1V4l-7 5z"/><path fill="currentColor" d="m1.52 3.14 6.484 4.63 6.485-4.632a1 1 0 0 0-.486-.126H2.008a1 1 0 0 0-.487.127"/></svg>', 'mail-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 3.999v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8A1 1 0 0 0 14.001 3H2a1 1 0 0 0-1 .999m13 .713-6 4.28-6-4.28V12h12zM2.724 4 8 7.764 13.276 4z" clip-rule="evenodd"/></svg>', 'messages-square': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 10v1.017a1 1 0 0 1-1.006 1L8 12l-4 2v-1.978H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm1-6H5v1h6a1 1 0 0 1 1 1v3h1zm-3 3H4v1h6zM4 9h3v1H4z" clip-rule="evenodd"/></svg>', 'messages-square-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 7h6v1H4zm0 2h3v1H4z"/><path fill="currentColor" fill-rule="evenodd" d="M12 10v1.017a1 1 0 0 1-1.006 1L8 12l-4 2v-1.978H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm1-6H5v1h6a1 1 0 0 1 1 1v3h1zm-5.233 6.999L5 12.382v-1.36H3V6h8v5.017z" clip-rule="evenodd"/></svg>', 'mobile': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 10a1 1 0 1 1 2 0 1 1 0 0 1-2 0M6 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5" clip-rule="evenodd"/></svg>', 'mobile-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M6 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm8 1H4v12h8z" clip-rule="evenodd"/></svg>', 'notes': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13 4h-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1v1a1 1 0 0 0 1 1h5v-4h4V5a1 1 0 0 0-1-1M3 3h8v1H5a1 1 0 0 0-1 1v6H3zm9 4H6v1h6zM6 9h3v1H6z" clip-rule="evenodd"/><path fill="currentColor" d="m11 14 3-3h-3z"/></svg>', 'notes-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12 7H6v1h6zM9 9H6v1h3z"/><path fill="currentColor" fill-rule="evenodd" d="M13 4h-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1v1a1 1 0 0 0 1 1h6l3-3V5a1 1 0 0 0-1-1M3 3h8v1H5a1 1 0 0 0-1 1v6H3zm10 2H5v8h5v-3h3zm-.414 6L11 12.586V11z" clip-rule="evenodd"/></svg>', 'paper-plane': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.855 2.145a.5.5 0 0 0-.525-.115l-11 4a.5.5 0 0 0 0 .935L6.625 8.68l3.17-3.18.705.705L7.315 9.39l1.72 4.295A.5.5 0 0 0 9.5 14a.5.5 0 0 0 .46-.33l4-11a.5.5 0 0 0-.105-.525"/></svg>', 'paper-plane-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.855 2.145a.5.5 0 0 0-.525-.115l-11 4a.5.5 0 0 0 0 .935l4.8 1.92 1.92 4.8A.5.5 0 0 0 9.5 14a.5.5 0 0 0 .46-.33l4-11a.5.5 0 0 0-.105-.525M9.5 12.1 8.105 8.6 10.5 6.205 9.795 5.5 7.38 7.915 3.9 6.5l8.765-3.165z"/></svg>', 'paper-plane-slash': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.705 1 15 14.295l-.7.705-4-4-1.34 3.67a.5.5 0 0 1-.46.33.5.5 0 0 1-.465-.315l-1.72-4.295L8 8.705 7.295 8l-1.67 1.68L1.33 7.965a.5.5 0 0 1 0-.935L5 5.705l-4-4zM12.97 3.67l-1.725 4.745-3.66-3.66L12.33 3.03a.5.5 0 0 1 .64.64" clip-rule="evenodd"/></svg>', 'paper-plane-slash-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.705 1 15 14.295l-.7.705-4-4-1.34 3.67a.5.5 0 0 1-.46.33.5.5 0 0 1-.45-.315l-1.92-4.8-4.8-1.92a.5.5 0 0 1 0-.935L5 5.705l-4-4zM5.77 6.5l-2.87 1 3.48 1.415L7.295 8zm1.335 3.1L8.5 13.1l1-2.87L8 8.705zm4.56-5.265-3.82 1.39-.78-.78L12.33 3.03a.5.5 0 0 1 .64.64l-1.915 5.265-.78-.78z" clip-rule="evenodd"/></svg>', 'paperclip': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m6.57 12.358 6.09-6.09a1.035 1.035 0 1 0-1.465-1.463l-5.32 5.32-.733-.731 5.321-5.321A2.07 2.07 0 1 1 13.391 7l-5.339 5.34-.006.006-.744.744A3.106 3.106 0 0 1 2.91 8.698L9.608 2l.732.732L3.642 9.43a2.07 2.07 0 1 0 2.928 2.928"/></svg>', 'pen': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10.88 2.293a1 1 0 0 1 1.415 0l1.414 1.414a1 1 0 0 1 0 1.414l-1.414 1.415-2.828-2.829zm.705 4.953L8.756 4.417 2 11.174l.003 2.825 2.825.003z"/></svg>', 'pen-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m-3.692-3.307v-1.54l4.538-4.539 1.54 1.54-4.538 4.539zm7.268-6.312a.42.42 0 0 1 0 .583l-.753.753-1.54-1.54.747-.753a.42.42 0 0 1 .583 0z" clip-rule="evenodd"/></svg>', 'pen-fancy': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.63 8.65c-.24.07-.43.26-.5.5l-1.46 4.37.11.12 2.3-2.3v-.19c0-.44.35-.8.79-.81.44 0 .8.35.81.79 0 .44-.35.8-.79.81h-.21l-2.3 2.3.12.11 4.37-1.46c.24-.07.43-.26.5-.5l.82-2.08L5.7 7.83zm7.17-6.3L6.27 7.28 8.69 9.7l4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83"/></svg>', 'pen-fancy-files-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 2H6v10h6V8.946l.023-.058.085-.078.892-.813V12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v.112a2.3 2.3 0 0 0-.974.66L12 2.8zm1 4.643-1 .913-.566.515-1.528-1.524L12 4.275l.767-.832q.113-.127.233-.215c1.167-.857 2.797.9 1.555 1.997zM4 3H3v11.5a.5.5 0 0 0 .5.5H11v-1H4zm4.238 4.41a.47.47 0 0 0-.316.315L7 10.477l.07.076 1.452-1.449v-.12a.51.51 0 0 1 .5-.51.51.51 0 0 1 .511.498.51.51 0 0 1-.499.51h-.133L7.45 10.931l.075.069 2.76-.92a.47.47 0 0 0 .317-.314l.518-1.31-1.573-1.562z" clip-rule="evenodd"/></svg>', 'pen-fancy-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.24 1.67c-.49 0-1 .21-1.44.7L6.27 7.3l2.42 2.42 4.94-4.52c1.6-1.42.19-3.53-1.39-3.53M8.72 8.34 7.66 7.28l3.9-4.24c.22-.24.44-.36.69-.36.41 0 .87.34 1.03.78.14.37.04.7-.32 1.02L8.73 8.36zM5.7 7.86l-2.08.82c-.24.08-.42.26-.5.5l-1.46 4.37.12.12.56.56.12.12 4.37-1.46c.24-.08.42-.26.5-.5l.81-2.08L5.7 7.87zm-2.57 4.46L4 9.72c.03-.08.09-.15.17-.18l1.29-.51 1.52 1.52-.5 1.29c-.03.08-.1.15-.19.18l-2.6.87.95-.95c.06.02.12.04.19.04.44 0 .79-.35.79-.79s-.35-.79-.79-.79-.79.35-.79.79c0 .07.02.13.04.19l-.95.95z"/></svg>', 'pen-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.295 2.293a1 1 0 0 0-1.414 0L9.467 3.707l2.828 2.829 1.414-1.415a1 1 0 0 0 0-1.414z"/><path fill="currentColor" fill-rule="evenodd" d="m2.003 13.999 2.825.003 6.757-6.756-2.829-2.829L2 11.174zM3 11.587l5.756-5.755 1.414 1.414-5.755 5.756L3.002 13z" clip-rule="evenodd"/></svg>', 'phone': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m10 10.53 1.034-1.035a1.01 1.01 0 0 1 1.08-.221l1.259.503A1.01 1.01 0 0 1 14 10.7v2.308a1 1 0 0 1-1.052.992C4.124 13.45 2.343 5.974 2.006 3.112A1.002 1.002 0 0 1 3.007 2h2.228a1 1 0 0 1 .923.628l.503 1.26a1 1 0 0 1-.217 1.08L5.41 6.002s.595 4.029 4.59 4.527"/></svg>', 'phone-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.62 14h-.079C3.472 13.479 2.184 5.826 2.004 3.49A1.384 1.384 0 0 1 3.278 2h2.543a.92.92 0 0 1 .859.582l.701 1.726a.92.92 0 0 1-.203.997l-.983.992a4.325 4.325 0 0 0 3.499 3.508l1.001-.993a.92.92 0 0 1 1.002-.189l1.74.697a.92.92 0 0 1 .567.858v2.437A1.385 1.385 0 0 1 12.62 14M3.389 2.923a.46.46 0 0 0-.462.462v.037c.213 2.732 1.574 9.193 9.665 9.655a.46.46 0 0 0 .49-.434v-2.465l-1.74-.696-1.325 1.315-.222-.028c-4.015-.503-4.56-4.518-4.56-4.56l-.028-.221 1.311-1.325-.692-1.74z"/></svg>', 'picture': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14 3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1zM4 5a1 1 0 1 0 2 0 1 1 0 0 0-2 0m7.134 2.514L13 10.023V13H3v-2.494l.896-1.064c.203-.242.305-.362.425-.408a.5.5 0 0 1 .358 0c.12.046.222.166.425.408l1.767 2.098 2.995-4.026c.21-.282.316-.423.444-.476a.5.5 0 0 1 .38 0c.129.053.234.194.444.476" clip-rule="evenodd"/></svg>', 'picture-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/><path fill="currentColor" fill-rule="evenodd" d="M14 13a1 1 0 0 1-1 1H2h.994A1 1 0 0 1 2 13V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zM3 3h10v5.315l-1.069-1.43a6 6 0 0 0-.29-.368 1.5 1.5 0 0 0-.555-.41 1.5 1.5 0 0 0-1.14-.001c-.27.11-.448.288-.556.408-.098.11-.2.246-.291.366L6.822 9.911l-.974-1.14a5 5 0 0 0-.283-.314 1.5 1.5 0 0 0-.53-.353 1.5 1.5 0 0 0-1.064 0c-.248.094-.42.245-.529.352a5 5 0 0 0-.283.314L3 8.956zm0 10v-2.506l.903-1.055c.202-.237.303-.355.423-.4a.5.5 0 0 1 .355 0c.12.045.22.164.422.4l1.769 2.07 3.01-4.006c.21-.28.315-.42.443-.472a.5.5 0 0 1 .38 0c.127.053.232.193.441.474L13 9.985V13z" clip-rule="evenodd"/></svg>', 'play-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1m3.724 7.447-6 3A.5.5 0 0 1 5 11V5a.5.5 0 0 1 .724-.447l6 3a.5.5 0 0 1 0 .894"/></svg>', 'plus': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 2H7v5H2v2h5v5h2V9h5V7H9z"/></svg>', 'plus-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14M7 7V4h2v3h3v2H9v3H7V9H4V7z" clip-rule="evenodd"/></svg>', 'share': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4.5a2.5 2.5 0 0 1-4.467 1.543L6.915 7.35a2.5 2.5 0 0 1 0 1.298l2.618 1.308a2.5 2.5 0 1 1-.448.894L6.467 9.544a2.5 2.5 0 1 1 0-3.085l2.618-1.31A2.503 2.503 0 0 1 11.5 2 2.5 2.5 0 0 1 14 4.5"/></svg>', 'share-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m1 0a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0M6 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.623 1.32a2.5 2.5 0 1 1-.156-2.863L9.085 5.15c.088.33.243.633.448.894L6.915 7.35a2.5 2.5 0 0 1 0 1.298l2.618 1.308a2.5 2.5 0 1 1-.448.894L6.467 9.544q.084-.107.156-.223M11.5 13a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'shuffle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m11.295 9.705 1.79 1.795h-3.31L7.59 8l2.185-3.5h3.31l-1.79 1.795L12 7l3-3-3-3-.705.705 1.79 1.795h-3.31a1 1 0 0 0-.845.47L7 7.055 5.07 3.97a1 1 0 0 0-.845-.47H1v1h3.225L6.41 8l-2.185 3.5H1v1h3.225a1 1 0 0 0 .845-.47L7 8.945l1.93 3.085a1 1 0 0 0 .845.47h3.31l-1.79 1.795L12 15l3-3-3-3z"/></svg>', 'sitemap': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.33 10h-2c-.37 0-.66.3-.66.67v2c0 .36.3.65.66.66h2c.37 0 .66-.29.67-.66v-2c0-.37-.3-.67-.67-.67m-.5-1.67H7.5v1h1v-1h4.67v1h1v-1.2c0-.44-.36-.8-.8-.8H8.5V6h.83c.37 0 .67-.3.67-.67v-2c0-.37-.3-.66-.67-.66H6.67c-.37 0-.66.29-.67.66v2c0 .37.3.67.67.67h.83v1.33H2.63c-.44 0-.8.36-.8.8v1.2h1zM9 10H7c-.37 0-.67.3-.67.67v2c0 .37.3.66.67.66h2c.37 0 .66-.29.67-.66v-2c0-.37-.3-.67-.67-.67m5.67 0h-2c-.37 0-.67.3-.67.67v2c0 .37.3.66.67.66h2c.36 0 .65-.3.66-.66v-2c0-.37-.29-.66-.66-.67"/></svg>', 'sliders': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.95 4H15v1h-2.05v.002a2.5 2.5 0 0 1-2.672 1.988A2.52 2.52 0 0 1 8.05 5.002V5H1V4h7.05v-.002a2.5 2.5 0 0 1 2.672-1.988 2.52 2.52 0 0 1 2.228 1.988zm-9.9 8H1v-1h2.05v-.002A2.52 2.52 0 0 1 5.5 9a2.5 2.5 0 0 1 2.45 1.999V11H15v1H7.95v.002A2.52 2.52 0 0 1 5.5 14a2.5 2.5 0 0 1-2.45-1.998z"/></svg>', 'sliders-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.95 4H15v1h-2.05c-.25 1.15-1.25 2-2.45 2s-2.2-.85-2.45-2H1V4h7.05C8.3 2.85 9.3 2 10.5 2s2.2.85 2.45 2M9 4.5c0 .85.65 1.5 1.5 1.5S12 5.35 12 4.5 11.35 3 10.5 3 9 3.65 9 4.5M3.05 12H1v-1h2.05C3.3 9.85 4.3 9 5.5 9s2.2.85 2.45 2H15v1H7.95c-.25 1.15-1.25 2-2.45 2s-2.2-.85-2.45-2M7 11.5c0-.85-.65-1.5-1.5-1.5S4 10.65 4 11.5 4.65 13 5.5 13 7 12.35 7 11.5" clip-rule="evenodd"/></svg>', 'squares': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm7 0a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1zm0 7a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1zm-7 0a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/></svg>', 'star': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" stroke="currentColor" d="m8 2.472 1.715 3.475.116.235.26.038 3.835.557-2.775 2.705-.188.183.044.26.655 3.818-3.43-1.803L8 11.818l-.233.122-3.43 1.803.656-3.818.044-.26-.188-.183-2.775-2.705L5.91 6.22l.26-.038.116-.235z"/></svg>', 'star-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="currentColor" d="m8 2.472 1.715 3.475.116.235.26.038 3.835.557-2.775 2.705-.188.183.044.26.655 3.818-3.43-1.803L8 11.818l-.233.122-3.43 1.803.656-3.818.044-.26-.188-.183-2.775-2.705L5.91 6.22l.26-.038.116-.235z"/></svg>', 'table': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 13a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1zm1-3v3h3v-3zm4 0v3h6v-3zm6-1H7V6h6zM6 9H3V6h3zM3 5V3h10v2z" clip-rule="evenodd"/></svg>', 'tag': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7.43c0 .275.11.538.303.732l5.535 5.535c.404.404 1.06.404 1.464 0l4.395-4.395a1.036 1.036 0 0 0 0-1.464L8.162 2.303A1.04 1.04 0 0 0 7.43 2H3.036C2.464 2 2 2.464 2 3.036zM5.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'tag-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0-1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2 7.43c0 .275.11.538.303.732l5.535 5.535c.404.404 1.06.404 1.464 0l4.395-4.395a1.036 1.036 0 0 0 0-1.464L8.162 2.303A1.04 1.04 0 0 0 7.43 2H3.036C2.464 2 2 2.464 2 3.036zm1 0q0 .016.01.025l5.535 5.534a.036.036 0 0 0 .05 0l4.394-4.394a.036.036 0 0 0 0-.05L7.456 3.01A.04.04 0 0 0 7.43 3H3.036A.036.036 0 0 0 3 3.036z" clip-rule="evenodd"/></svg>', 'tags': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.855 6.645 8.5 1.295A1 1 0 0 0 7.795 1H4a1 1 0 0 0-1 1v1h1V2h3.795l5 5-.65.645.71.71 1-1a.5.5 0 0 0 0-.71"/><path fill="currentColor" fill-rule="evenodd" d="M2 8.978c0 .251.1.493.278.67l5.073 5.074a.95.95 0 0 0 1.343 0l4.028-4.028a.95.95 0 0 0 0-1.343L7.649 4.278A.95.95 0 0 0 6.978 4H2.949A.95.95 0 0 0 2 4.95zM5.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'tags-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8.5 1.295 5.355 5.35a.5.5 0 0 1 0 .71l-1 1-.71-.71.65-.645-5-5H4v1H3V2a1 1 0 0 1 1-1h3.795a1 1 0 0 1 .705.295"/><path fill="currentColor" fill-rule="evenodd" d="M5.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0-1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2.278 9.649A.95.95 0 0 1 2 8.978V4.949A.95.95 0 0 1 2.95 4h4.028c.251 0 .493.1.67.278l5.074 5.073a.95.95 0 0 1 0 1.343l-4.028 4.028a.95.95 0 0 1-1.343 0zm5.744 4.33L3 8.957V5h3.957l5.022 5.022z" clip-rule="evenodd"/></svg>', 'thumb-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.202 11.934a1.506 1.506 0 0 1-2.438 1.651L5.5 10.461v-8.46h4.922c1.081 0 2.058.714 2.484 1.817l.944 3.394c.51 1.32-.362 2.788-1.656 2.788h-1.772zM4.5 10H2V2h2.5z"/></svg>', 'thumb-down-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11.204 11.934 10.424 10h1.772c1.294 0 2.166-1.468 1.656-2.788l-.944-3.394C12.484 2.715 11.507 2 10.426 2H5v.003H2v8h3.023l3.744 3.582a1.506 1.506 0 0 0 2.437-1.651m.755-7.797C11.657 3.4 11.033 3 10.425 3H6.002l.017 6.572 3.439 3.29a.506.506 0 0 0 .819-.554L8.943 9h3.253c.24 0 .48-.131.645-.41.167-.28.218-.657.079-1.018l-.018-.045zM3 9.003h2v-6H3z" clip-rule="evenodd"/></svg>', 'thumb-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.202 4.069a1.506 1.506 0 0 0-2.438-1.651L5.5 5.542v8.46h4.922c1.081 0 2.058-.714 2.484-1.817l.944-3.394c.51-1.32-.362-2.788-1.656-2.788h-1.772zM4.5 6.003H2v8h2.5z"/></svg>', 'thumb-up-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m11.204 4.069-.78 1.934h1.772c1.294 0 2.166 1.468 1.656 2.788l-.944 3.394c-.425 1.103-1.402 1.818-2.483 1.818H5V14H2V6h3.023l3.744-3.582a1.506 1.506 0 0 1 2.437 1.65m.755 7.797c-.302.738-.926 1.137-1.534 1.137H6.002L6.02 6.43l3.439-3.29a.506.506 0 0 1 .819.554L8.943 7.003h3.253c.24 0 .48.13.645.41.167.28.218.657.079 1.018l-.018.045zM3 7h2v6H3z" clip-rule="evenodd"/></svg>', 'thumbtack': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m8.91 2-1.2 3.594L2.364 7.09 5.274 10l-.707.706-1.687 1.687-.264.264-.09.09-.209.498L2 14l.755-.317.498-.21.09-.089.264-.264 1.687-1.687.706-.706 2.91 2.908 1.496-5.347L14 7.09z" clip-rule="evenodd"/></svg>', 'thumbtack-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m5.273 10-2.91 2.91L2 14l1.09-.364L6 10.727l2.91 2.91 1.496-5.348L14 7.09 8.91 2l-1.2 3.594L2.364 7.09zm3.241-3.563-4.18 1.17 4.059 4.059 1.17-4.18 2.533-.845-2.737-2.737z" clip-rule="evenodd"/></svg>', 'trash': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11 2v1h3v1h-1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4H2V3h3V2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1M6 3V2h4v1zm1 3H6v6h1zm2 0h1v6H9z" clip-rule="evenodd"/></svg>', 'trash-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 6H6v6h1zm2 0h1v6H9z"/><path fill="currentColor" fill-rule="evenodd" d="M11 3V2a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v1H2v1h1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4h1V3zM6 2v1h4V2zm6 2v10H4V4z" clip-rule="evenodd"/></svg>', 'universal-access': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-3.5-1V6h-7v1H7v1.367l-1.934 3.385.868.496L7.79 9h.42l1.856 3.248.868-.496L9 8.367V7zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/></svg>', 'universal-access-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4.111 13.82A7 7 0 0 0 8 15a7.01 7.01 0 0 0 7-7 7 7 0 1 0-10.889 5.82m.556-10.809A6 6 0 0 1 8 2a6.007 6.007 0 0 1 6 6 6 6 0 1 1-9.333-4.989M8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2M11.5 7V6h-7v1H7v1.367l-1.934 3.385.868.496L7.79 9h.42l1.856 3.248.868-.496L9 8.367V7z" clip-rule="evenodd"/></svg>', 'unlink': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.5 1h-1v2h1zM1.792 2.501l.707-.707L4.207 3.5l-.707.707zm9.998 9.995.708-.707 1.707 1.708-.707.707zM1 5.5h2v1H1zm14 4h-2v1h2zM9.5 13h1v2h-1zm-1.21-2.465-1.855 1.86a2.002 2.002 0 0 1-2.83-2.83l1.86-1.86L4.755 7 2.9 8.86a3 3 0 0 0-.03 4.27A3 3 0 0 0 5 14a3.04 3.04 0 0 0 2.16-.9L9 11.245zm1.275-6.93-1.86 1.86L7 4.755 8.84 2.9A3.04 3.04 0 0 1 11 2a3 3 0 0 1 2.13.87 3 3 0 0 1-.03 4.27L11.245 9l-.71-.705 1.86-1.86a2.002 2.002 0 0 0-2.83-2.83"/></svg>', 'unlock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 7V4a2 2 0 1 0-4 0v1H5V4a3 3 0 0 1 6 0v3h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm-3 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0" clip-rule="evenodd"/></svg>', 'unlock-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/><path fill="currentColor" fill-rule="evenodd" d="M10 4v3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-6 0v1h1V4a2 2 0 1 1 4 0m2 4v6H4V8z" clip-rule="evenodd"/></svg>', 'upload': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3.706 6.703 3 6l5-5 5 5-.704.702L8.5 2.912V12h-1V2.913zM13 14v-2h1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-.996-1.002L2 14v-2h1v2z" clip-rule="evenodd"/></svg>', 'user': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6M6 9a4 4 0 0 0-4 4 1 1 0 0 0 1 1h10a1 1 0 0 0 1-1 4 4 0 0 0-4-4z" clip-rule="evenodd"/></svg>', 'user-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.01 1C4.146.99 1.01 4.128 1 7.99c0 3.863 3.128 7 6.99 7.01 3.853 0 6.99-3.109 7.01-6.962C15.019 4.176 11.9 1.02 8.038 1zm0 .715a6.28 6.28 0 0 1 6.275 6.295v.028a6.2 6.2 0 0 1-1.135 3.586 2.59 2.59 0 0 0-2.537-2.26H9.478a3.44 3.44 0 0 1-2.937 0H5.415a2.573 2.573 0 0 0-2.546 2.26 6.2 6.2 0 0 1-1.135-3.586 6.284 6.284 0 0 1 6.247-6.323zM5.147 5.778a2.914 2.914 0 0 1 2.91-2.909 2.914 2.914 0 0 1 2.908 2.909 2.914 2.914 0 0 1-2.909 2.909H8.01a2.917 2.917 0 0 1-2.86-2.91"/></svg>', 'user-group': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m-4 4c0-.972.347-1.863.923-2.556A2.5 2.5 0 0 0 1 10.5V12a1 1 0 0 0 1 1h2.268A2 2 0 0 1 4 12zm10 2h-2.268A2 2 0 0 0 12 12v-1c0-.972-.347-1.863-.923-2.556A2.5 2.5 0 0 1 15 10.5V12a1 1 0 0 1-1 1m-9-2a3 3 0 0 1 6 0v1a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1zm9-5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0M3.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/></svg>', 'user-group-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0M9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" d="M2 10.5V12h2c0 .364.097.706.268 1H2a1 1 0 0 1-1-1v-1.5a2.5 2.5 0 0 1 3.923-2.056q-.321.386-.54.844A1.5 1.5 0 0 0 2 10.5M14 13h-2.268A2 2 0 0 0 12 12h2v-1.5a1.5 1.5 0 0 0-2.384-1.212 4 4 0 0 0-.539-.844A2.5 2.5 0 0 1 15 10.5V12a1 1 0 0 1-1 1"/><path fill="currentColor" fill-rule="evenodd" d="M8 8a3 3 0 0 0-3 3v1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1a3 3 0 0 0-3-3m2 4v-1a2 2 0 1 0-4 0v1zm2.5-5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0-1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1M5 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0" clip-rule="evenodd"/></svg>', 'user-lock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.5 7a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M5 8a4 4 0 0 0-4 4 1 1 0 0 0 1 1h7v-1.5a1.5 1.5 0 0 1 1.036-1.427c.109-.63.452-1.178.938-1.553A4 4 0 0 0 9 8z"/><path fill="currentColor" fill-rule="evenodd" d="M10.5 11h.5v-.5a1.5 1.5 0 0 1 3 0v.5h.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5m2.75-.5v.5h-1.5v-.5a.75.75 0 0 1 1.5 0" clip-rule="evenodd"/></svg>', 'user-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0m-1 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-8 8a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4 1 1 0 0 1-1 1H3a1 1 0 0 1-1-1m1 0a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3z" clip-rule="evenodd"/></svg>', 'user-pen-fancy-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.5 7a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5m0-4C6.67 3 6 3.67 6 4.5S6.67 6 7.5 6 9 5.33 9 4.5 8.33 3 7.5 3m3.62 8.46-.22.54-.3.77s-.04.09-.06.13c-.03.04-.06.07-.1.1-.05.04-.1.07-.16.08L7.52 14l-.07-.07 1.45-1.45h.13c.15 0 .27-.06.36-.16a.6.6 0 0 0 .1-.15c.01-.02.02-.04.03-.07v-.02s.01-.05.01-.08v-.03c0-.28-.23-.5-.51-.5-.28.01-.5.24-.5.51v.14l-.76.75-.14.13-.55.55-.07-.07.16-.48.1-.29.24-.71.42-1.27c.05-.16.17-.28.32-.32l1.31-.52zm3.44-3.24-2.05 1.87-.7.64-.06.05-.32.29-1.52-1.52.28-.31.06-.06.64-.7 1.88-2.04c1.16-1.31 3.11.61 1.79 1.78"/><path fill="currentColor" fill-rule="evenodd" d="M9 8H6c-2.21 0-4 1.79-4 4 0 .55.45 1 1 1h3.11l.33-1H3c0-1.66 1.34-3 3-3h3.05l.83-.9C9.6 8.03 9.3 8 9 8" clip-rule="evenodd"/></svg>', 'user-plus': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 3.33h-1.35V2c-.02-.18-.17-.33-.35-.33h-.65c-.18 0-.33.15-.35.33v1.33H10c-.18 0-.33.16-.33.34v.66c0 .18.15.33.33.34h1.3V6c.02.18.17.32.35.33h.65c.18 0 .33-.15.35-.33V4.67H14a.34.34 0 0 0 .32-.34v-.66a.34.34 0 0 0-.32-.34M9.28 9.77h-.2c-1.25.51-2.66.51-3.91 0H5a3.006 3.006 0 0 0-3.3 2.67v.74c.06.67.63 1.17 1.3 1.15h8.25c.69.06 1.3-.45 1.36-1.14v-.68a3 3 0 0 0-3.23-2.75h-.1zM7.13 3.7c1.46 0 2.64 1.17 2.65 2.63 0 1.46-1.17 2.64-2.63 2.65-1.46 0-2.64-1.17-2.65-2.63A2.65 2.65 0 0 1 7.13 3.7"/></svg>', 'user-question-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.23 11.14c.86-.66 1.01-1.9.35-2.75s-1.9-1.01-2.75-.35a1.96 1.96 0 0 0 0 3.1c-.72.42-1.16 1.2-1.16 2.03v.8c0 .2.17.37.37.37h3.98c.2 0 .37-.17.37-.37v-.8c0-.83-.44-1.61-1.16-2.03M2.81 9.59c0-.67.55-1.22 1.22-1.22s1.22.55 1.22 1.22-.55 1.22-1.22 1.22-1.22-.55-1.22-1.22m2.83 4H2.41v-.42c0-.89.72-1.62 1.62-1.62s1.62.72 1.62 1.62v.42zm7.13-11.93H8c-.86 0-1.56.7-1.56 1.56v7.16c0 .21.17.37.37.37.08 0 .16-.03.22-.07l1.49-1.12h4.25c.86 0 1.56-.7 1.56-1.56V3.22c0-.86-.7-1.56-1.56-1.56m.82 6.33c0 .45-.37.82-.82.82H8.4a.4.4 0 0 0-.22.07l-1 .75V3.22c0-.45.37-.82.82-.82h4.77c.45 0 .82.37.82.82zm-2.8-.42c0 .23-.18.41-.41.41s-.41-.18-.41-.41.18-.41.41-.41.41.18.41.41m-.41-4.34c-.83 0-1.5.67-1.5 1.5 0 .23.18.41.41.41s.41-.18.41-.41c0-.38.31-.68.69-.68s.68.31.68.69-.31.68-.68.68c-.23 0-.41.18-.41.41v.44c0 .23.18.41.41.41s.41-.18.41-.41v-.09c.8-.23 1.26-1.06 1.04-1.85-.18-.65-.77-1.09-1.44-1.09z"/></svg>', 'user-shield': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2.676 2.768A1 1 0 0 0 2 3.714v4.799a3 3 0 0 0 .154.949l.06.177A7 7 0 0 0 5.1 13.334l2.373 1.508a1 1 0 0 0 1.074-.001l2.361-1.507a7 7 0 0 0 2.875-3.687l.062-.185c.102-.306.154-.627.154-.949V3.714a1 1 0 0 0-.676-.946l-5-1.712a1 1 0 0 0-.648 0zM8 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4m-4.22 2.627a6 6 0 0 0 1.857 1.863l2.373 1.508 2.361-1.507a6 6 0 0 0 1.85-1.862A4 4 0 0 0 9 8.999H7c-1.32 0-2.492.641-3.22 1.628" clip-rule="evenodd"/></svg>', 'user-shield-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 5.998a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2 3.712a1 1 0 0 1 .676-.946l5-1.712a1 1 0 0 1 .648 0l5 1.712a1 1 0 0 1 .676.946v4.799c0 .322-.052.643-.154.949l-.062.185a7 7 0 0 1-2.875 3.687l-2.36 1.507a1 1 0 0 1-1.075 0l-2.373-1.507a7 7 0 0 1-2.888-3.695l-.06-.177A3 3 0 0 1 2 8.51zm11 0v4.799q0 .324-.103.632l-.061.186a6 6 0 0 1-.614 1.298A4 4 0 0 0 9 8.997H7c-1.32 0-2.492.64-3.22 1.628a6 6 0 0 1-.618-1.304l-.06-.178A2 2 0 0 1 3 8.511V3.712L8 2zM9 9.998a3 3 0 0 1 2.582 1.47c-.355.39-.76.734-1.21 1.021L8.01 13.996l-2.373-1.508a6 6 0 0 1-1.217-1.022A3 3 0 0 1 7 9.998z" clip-rule="evenodd"/></svg>', 'users': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.25 3.335a2.5 2.5 0 1 0 0 4.33A3.5 3.5 0 0 1 6.5 5.5c0-.818.28-1.57.75-2.165M10 3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m-5 9.2A3.2 3.2 0 0 1 8.2 9h3.6a3.2 3.2 0 0 1 3.2 3.2.8.8 0 0 1-.8.8H5.8a.8.8 0 0 1-.8-.8M5.48 9H4.2A3.2 3.2 0 0 0 1 12.2a.8.8 0 0 0 .8.8h2.387A1.8 1.8 0 0 1 4 12.2 4.19 4.19 0 0 1 5.48 9"/></svg>', 'users-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.5 5.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0M10 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" clip-rule="evenodd"/><path fill="currentColor" d="M4.2 9h1.28a4.2 4.2 0 0 0-.858 1H4.2a2.2 2.2 0 0 0-2.191 2h1.996a4 4 0 0 0-.005.2c0 .287.067.559.187.8H1.8a.8.8 0 0 1-.8-.8A3.2 3.2 0 0 1 4.2 9"/><path fill="currentColor" fill-rule="evenodd" d="M5 12.2A3.2 3.2 0 0 1 8.2 9h3.6a3.2 3.2 0 0 1 3.2 3.2.8.8 0 0 1-.8.8H5.8a.8.8 0 0 1-.8-.8m6.8-2.2a2.2 2.2 0 0 1 2.191 2H6.009A2.2 2.2 0 0 1 8.2 10z" clip-rule="evenodd"/><path fill="currentColor" d="M6 3c.455 0 .882.122 1.25.335a3.5 3.5 0 0 0-.5.865 1.5 1.5 0 1 0 0 2.6c.125.313.294.604.5.865A2.5 2.5 0 1 1 6 3"/></svg>', 'wallet': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm1 0h11v1H2zm9 5a1 1 0 1 1 2 0 1 1 0 0 1-2 0" clip-rule="evenodd"/></svg>', 'wallet-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11 9a1 1 0 1 1 2 0 1 1 0 0 1-2 0"/><path fill="currentColor" fill-rule="evenodd" d="M2 13a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm0-9h11v1H2zm12 2H2v6h12z" clip-rule="evenodd"/></svg>' };
|
|
907
911
|
|
|
908
912
|
const mgIconCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-icon-border-radius: Defines the border radius of icons. Default value is `50%`.\n */:host{display:inline-flex;vertical-align:middle}.mg-c-icon{color:currentcolor}.mg-c-icon[size=small],.mg-c-icon.mg-c-icon--size-small{width:var(--mg-b-size-12);height:var(--mg-b-size-12)}.mg-c-icon[size=small][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-small[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-16) - var(--mg-b-size-12))/2)}.mg-c-icon[size=medium],.mg-c-icon.mg-c-icon--size-medium{width:var(--mg-b-size-16);height:var(--mg-b-size-16)}.mg-c-icon[size=medium][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-medium[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-24) - var(--mg-b-size-16))/2)}.mg-c-icon[size=large],.mg-c-icon.mg-c-icon--size-large{width:var(--mg-b-size-20);height:var(--mg-b-size-20)}.mg-c-icon[size=large][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-large[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-32) - var(--mg-b-size-20))/2)}.mg-c-icon[size=xlarge],.mg-c-icon.mg-c-icon--size-xlarge{width:var(--mg-b-size-24);height:var(--mg-b-size-24)}.mg-c-icon[size=xlarge][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-xlarge[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-40) - var(--mg-b-size-24))/2)}.mg-c-icon[size=xxlarge],.mg-c-icon.mg-c-icon--size-xxlarge{width:var(--mg-b-size-32);height:var(--mg-b-size-32)}.mg-c-icon[size=xxlarge][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-xxlarge[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-48) - var(--mg-b-size-32))/2)}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-icon{color:var(--mg-b-color-app)}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-icon{color:var(--mg-b-color-blue)}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-icon{color:var(--mg-b-color-80)}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-icon{color:var(--mg-b-color-danger)}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-icon{color:var(--mg-b-color-info)}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-icon{color:var(--mg-b-color-success)}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-icon{color:var(--mg-b-color-warning)}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-app), white 80%))}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-blue), white 80%))}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-80), white 80%))}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-full{color:var(--mg-b-color-app);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-app), white 80%))}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-full{color:var(--mg-b-color-blue);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-blue), white 80%))}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-full{color:var(--mg-b-color-80);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-80), white 80%))}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-full{color:var(--mg-b-color-danger);background-color:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-full{color:var(--mg-b-color-info);background-color:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-full{color:var(--mg-b-color-success);background-color:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-full{color:var(--mg-b-color-warning);background-color:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-icon[class*=mg-c-icon--variant-]{overflow:visible;border-radius:var(--mg-c-icon-border-radius)}.mg-c-icon--spin{animation-duration:.75s;animation-iteration-count:infinite;animation-name:rotate}@keyframes rotate{to{transform:rotate(360deg)}}";
|
|
909
|
-
const MgIconStyle0 = mgIconCss;
|
|
910
913
|
|
|
911
914
|
const MgIcon = class {
|
|
912
915
|
constructor(hostRef) {
|
|
@@ -922,7 +925,7 @@ const MgIcon = class {
|
|
|
922
925
|
/**
|
|
923
926
|
* Component classes
|
|
924
927
|
*/
|
|
925
|
-
this.classCollection = new index_es.
|
|
928
|
+
this.classCollection = new index_es.Zt(['mg-c-icon']);
|
|
926
929
|
/**
|
|
927
930
|
* Method to set default varianStyle props
|
|
928
931
|
* needeed has stencil doesn't know that props is mutated when updated in prop watcher
|
|
@@ -953,7 +956,7 @@ const MgIcon = class {
|
|
|
953
956
|
}
|
|
954
957
|
validateIcon(newValue, oldValue) {
|
|
955
958
|
if (!Object.keys(icons).includes(newValue)) {
|
|
956
|
-
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${index_es.
|
|
959
|
+
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
957
960
|
}
|
|
958
961
|
else {
|
|
959
962
|
if (oldValue !== undefined) {
|
|
@@ -969,7 +972,7 @@ const MgIcon = class {
|
|
|
969
972
|
newValue = 'medium';
|
|
970
973
|
}
|
|
971
974
|
if (!sizes$3.includes(newValue)) {
|
|
972
|
-
throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$3.join(', ')}. Passed value: ${index_es.
|
|
975
|
+
throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$3.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
973
976
|
}
|
|
974
977
|
else {
|
|
975
978
|
if (oldValue !== undefined) {
|
|
@@ -981,7 +984,7 @@ const MgIcon = class {
|
|
|
981
984
|
validateVariant(newValue, oldValue) {
|
|
982
985
|
if (newValue !== undefined) {
|
|
983
986
|
if (!variants$2.includes(newValue))
|
|
984
|
-
throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${index_es.
|
|
987
|
+
throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
985
988
|
else {
|
|
986
989
|
this.setDefaultVariantStyle();
|
|
987
990
|
if (oldValue !== undefined)
|
|
@@ -993,7 +996,7 @@ const MgIcon = class {
|
|
|
993
996
|
validateVariantStyle(newValue, oldValue) {
|
|
994
997
|
if (newValue !== undefined) {
|
|
995
998
|
if (!variantStyles$1.includes(newValue))
|
|
996
|
-
throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${index_es.
|
|
999
|
+
throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
997
1000
|
else {
|
|
998
1001
|
if (oldValue !== undefined)
|
|
999
1002
|
this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
|
|
@@ -1036,7 +1039,7 @@ const MgIcon = class {
|
|
|
1036
1039
|
"spin": ["handleSpin"]
|
|
1037
1040
|
}; }
|
|
1038
1041
|
};
|
|
1039
|
-
MgIcon.style =
|
|
1042
|
+
MgIcon.style = mgIconCss;
|
|
1040
1043
|
|
|
1041
1044
|
/**
|
|
1042
1045
|
* List of all possibles sizes
|
|
@@ -1048,7 +1051,6 @@ const sizes$2 = ['small', 'medium', 'large'];
|
|
|
1048
1051
|
const directions = ['vertical', 'horizontal'];
|
|
1049
1052
|
|
|
1050
1053
|
const mgIllustratedMessageCss = "/*!\n * @prop --mg-c-illustrated-message-spacing-vertical: Defines the vertical padding of the illustrated message. Default value: `--mg-b-size-40`.\n */.mg-c-illustrated-message{display:flex;max-width:calc(60*var(--mg-b-size-8));box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);margin:auto;gap:var(--mg-b-size-16) var(--mg-b-size-64);text-align:center}.mg-c-illustrated-message__illustration{max-height:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:100%;max-width:100%;height:auto;max-height:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__slots{display:flex;flex-direction:column;gap:var(--mg-b-size-16)}.mg-c-illustrated-message__slots ::slotted([slot=title]){margin:0;font-family:var(--mg-b-font-family) !important;font-size:var(--mg-b-font-size-h2) !important;font-weight:400 !important}.mg-c-illustrated-message__slots ::slotted([slot=details]){margin:0}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration{max-height:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-height:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration{max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{max-width:unset;flex-flow:row wrap;align-items:center}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots,.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration{max-width:calc(60*var(--mg-b-size-8))}";
|
|
1051
|
-
const MgIllustratedMessageStyle0 = mgIllustratedMessageCss;
|
|
1052
1054
|
|
|
1053
1055
|
const MgIllustratedMessage = class {
|
|
1054
1056
|
constructor(hostRef) {
|
|
@@ -1064,11 +1066,11 @@ const MgIllustratedMessage = class {
|
|
|
1064
1066
|
/**
|
|
1065
1067
|
* Component classes
|
|
1066
1068
|
*/
|
|
1067
|
-
this.classCollection = new index_es.
|
|
1069
|
+
this.classCollection = new index_es.Zt(['mg-c-illustrated-message']);
|
|
1068
1070
|
}
|
|
1069
1071
|
watchSize(newValue, oldValue) {
|
|
1070
1072
|
if (!sizes$2.includes(newValue)) {
|
|
1071
|
-
throw new Error(`<mg-illustrated-message> prop "size" must be one of: ${sizes$2.join(', ')}. Passed value: ${index_es.
|
|
1073
|
+
throw new Error(`<mg-illustrated-message> prop "size" must be one of: ${sizes$2.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
1072
1074
|
}
|
|
1073
1075
|
else {
|
|
1074
1076
|
if (oldValue !== undefined) {
|
|
@@ -1079,7 +1081,7 @@ const MgIllustratedMessage = class {
|
|
|
1079
1081
|
}
|
|
1080
1082
|
watchDirection(newValue, oldValue) {
|
|
1081
1083
|
if (newValue !== undefined && !directions.includes(newValue)) {
|
|
1082
|
-
throw new Error(`<mg-illustrated-message> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${index_es.
|
|
1084
|
+
throw new Error(`<mg-illustrated-message> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
1083
1085
|
}
|
|
1084
1086
|
else if (newValue === 'horizontal') {
|
|
1085
1087
|
this.classCollection.add('mg-c-illustrated-message--direction-horizontal');
|
|
@@ -1102,7 +1104,7 @@ const MgIllustratedMessage = class {
|
|
|
1102
1104
|
if (slottedDetails.length === 0 && slottedTitle === null) {
|
|
1103
1105
|
throw new Error('<mg-illustrated-message> Slot "title" or "details" must be present.');
|
|
1104
1106
|
}
|
|
1105
|
-
else if (slottedTitle !== null && !index_es.
|
|
1107
|
+
else if (slottedTitle !== null && !index_es.qt(slottedTitle, headingTags)) {
|
|
1106
1108
|
throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}.`);
|
|
1107
1109
|
}
|
|
1108
1110
|
else if (slottedIllustrations.length !== 1) {
|
|
@@ -1126,7 +1128,7 @@ const MgIllustratedMessage = class {
|
|
|
1126
1128
|
* @returns HTML Element
|
|
1127
1129
|
*/
|
|
1128
1130
|
render() {
|
|
1129
|
-
return (index.h("div", { key: '
|
|
1131
|
+
return (index.h("div", { key: '60c53ef4294aa36a8c354b42f47f5c7d9fc409f6', class: this.classCollection.join() }, index.h("div", { key: '254673ae5b7183a1adfa53c18d9e632bcdd67607', class: "mg-c-illustrated-message__illustration" }, index.h("slot", { key: '16b9bbe8abaae4d0f7b713fbe345e54b5b966ac0', name: "illustration" })), index.h("div", { key: 'c272c168ea520f8c71261e8f84297fb1bd44c044', class: "mg-c-illustrated-message__slots" }, index.h("slot", { key: '7ba11d5f5fe293175a01768619bc43b0632ba0a5', name: "title" }), index.h("slot", { key: 'f03540939af486bb44134298b12eaf9de32f814a', name: "details" }))));
|
|
1130
1132
|
}
|
|
1131
1133
|
get element() { return index.getElement(this); }
|
|
1132
1134
|
static get watchers() { return {
|
|
@@ -1134,10 +1136,9 @@ const MgIllustratedMessage = class {
|
|
|
1134
1136
|
"direction": ["watchDirection"]
|
|
1135
1137
|
}; }
|
|
1136
1138
|
};
|
|
1137
|
-
MgIllustratedMessage.style =
|
|
1139
|
+
MgIllustratedMessage.style = mgIllustratedMessageCss;
|
|
1138
1140
|
|
|
1139
1141
|
const mgInputCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n */:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}";
|
|
1140
|
-
const MgInputStyle0 = mgInputCss;
|
|
1141
1142
|
|
|
1142
1143
|
const MgInput = class {
|
|
1143
1144
|
constructor(hostRef) {
|
|
@@ -1149,6 +1150,10 @@ const MgInput = class {
|
|
|
1149
1150
|
this.classInput = 'mg-c-input';
|
|
1150
1151
|
this.classHasError = 'mg-c-input--has-error';
|
|
1151
1152
|
this.classLabelOnTop = 'mg-c-input--label-on-top';
|
|
1153
|
+
/**
|
|
1154
|
+
* Define if label is displayed on top
|
|
1155
|
+
*/
|
|
1156
|
+
this.labelOnTop = false;
|
|
1152
1157
|
/**
|
|
1153
1158
|
* Define if label is visible
|
|
1154
1159
|
*/
|
|
@@ -1184,11 +1189,11 @@ const MgInput = class {
|
|
|
1184
1189
|
this.renderTooltip = () => (index.h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, index.h("mg-icon", { icon: "info-circle" })));
|
|
1185
1190
|
}
|
|
1186
1191
|
watchIdentifier(newValue) {
|
|
1187
|
-
if (!index_es.
|
|
1188
|
-
throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${index_es.
|
|
1192
|
+
if (!index_es.De(newValue)) {
|
|
1193
|
+
throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${index_es.Gt(newValue)}.`);
|
|
1189
1194
|
}
|
|
1190
|
-
else if (!index_es.
|
|
1191
|
-
console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
1195
|
+
else if (!index_es.Ut(newValue)) {
|
|
1196
|
+
console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${index_es.Gt(newValue)}.`);
|
|
1192
1197
|
}
|
|
1193
1198
|
else {
|
|
1194
1199
|
this.helpTextId = `${this.identifier}-help-text`;
|
|
@@ -1210,7 +1215,7 @@ const MgInput = class {
|
|
|
1210
1215
|
}
|
|
1211
1216
|
watchTooltipPosition(newValue) {
|
|
1212
1217
|
if (!mgInput_conf.tooltipPositions.includes(newValue)) {
|
|
1213
|
-
throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${mgInput_conf.tooltipPositions.join(', ')}. Passed value: ${index_es.
|
|
1218
|
+
throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${mgInput_conf.tooltipPositions.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
1214
1219
|
}
|
|
1215
1220
|
}
|
|
1216
1221
|
watchErrorMessage(newValue) {
|
|
@@ -1253,10 +1258,12 @@ const MgInput = class {
|
|
|
1253
1258
|
ariaDescribedbyIDs.add(this.helpTextErrorId);
|
|
1254
1259
|
}
|
|
1255
1260
|
this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach(element => {
|
|
1256
|
-
if (ariaDescribedbyIDs.size)
|
|
1261
|
+
if (ariaDescribedbyIDs.size > 0) {
|
|
1257
1262
|
element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
|
|
1258
|
-
|
|
1263
|
+
}
|
|
1264
|
+
else {
|
|
1259
1265
|
element.removeAttribute('aria-describedby');
|
|
1266
|
+
}
|
|
1260
1267
|
});
|
|
1261
1268
|
}
|
|
1262
1269
|
/**
|
|
@@ -1277,8 +1284,8 @@ const MgInput = class {
|
|
|
1277
1284
|
*/
|
|
1278
1285
|
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1279
1286
|
watchLabel() {
|
|
1280
|
-
if (!index_es.
|
|
1281
|
-
throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${index_es.
|
|
1287
|
+
if (!index_es.De(this.label)) {
|
|
1288
|
+
throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${index_es.Gt(this.label)}.`);
|
|
1282
1289
|
}
|
|
1283
1290
|
else {
|
|
1284
1291
|
this.watchAriaDescribedbyIDs();
|
|
@@ -1370,7 +1377,7 @@ const MgInput = class {
|
|
|
1370
1377
|
*/
|
|
1371
1378
|
render() {
|
|
1372
1379
|
const isGroup = this.isFieldset && !this.isReadonly;
|
|
1373
|
-
return (index.h(index.Host, { key: '
|
|
1380
|
+
return (index.h(index.Host, { key: '052fc371413e939c23d1881633ed8d9f2e70ad90', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, index.h("div", { key: 'f12463ab540800f45a8d52beb2ac57a3733d3958', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, index.h("slot", { key: 'bb4d18b8faf540c26451aabcc35c8f8bc05e75b4', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), index.h("div", { key: 'e46cd50480c677ff9bde03e78335ad838775577c', class: "mg-c-input__input-container" }, index.h("div", { key: '8a9106982a4b53669b62897aacc5fae13c482e50', class: "mg-c-input__input" }, index.h("slot", { key: 'd2df2fcae71b45b96d8cdb86f5e7fec2487641c6' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (index.h("div", { key: 'd85f5b8c268f842e99137d10b5b852b49ac7d395', class: "mg-c-input__help-text" }, index.h("slot", { key: '7f50c07fd312859efd88dc5a1b9d61552547f7d0', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (index.h("div", { key: '9f2c02102f3464fe38acc70dab745901320c1eb3', class: "mg-c-input__error", "aria-live": "assertive" }, index.h("slot", { key: '2861117e844fa887ff8231a6e0903e36b5d3d005', name: this.slotError }))))));
|
|
1374
1381
|
}
|
|
1375
1382
|
get element() { return index.getElement(this); }
|
|
1376
1383
|
static get watchers() { return {
|
|
@@ -1388,7 +1395,7 @@ const MgInput = class {
|
|
|
1388
1395
|
"isFieldset": ["watchLabel"]
|
|
1389
1396
|
}; }
|
|
1390
1397
|
};
|
|
1391
|
-
MgInput.style =
|
|
1398
|
+
MgInput.style = mgInputCss;
|
|
1392
1399
|
|
|
1393
1400
|
/**
|
|
1394
1401
|
* List of all availables checkbox type
|
|
@@ -1415,7 +1422,6 @@ const MgInputCheckboxList = (props) => (index.h("ul", { class: "mg-c-input__inpu
|
|
|
1415
1422
|
})));
|
|
1416
1423
|
|
|
1417
1424
|
const mgInputCheckboxCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-group-container{padding:var(--mg-b-size-4) var(--mg-b-size-8);margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container{display:flex;width:unset;flex:unset;flex-wrap:wrap;column-gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container-list{display:flex;flex-flow:row wrap;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__sections{max-height:100%;padding-right:var(--mg-b-size-8);overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header{display:flex;min-height:var(--mg-b-size-min-height);flex-wrap:wrap;flex-wrap:nowrap;align-items:center;gap:var(--mg-b-size-8);text-wrap:nowrap}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-tootlip{display:inline-block;width:auto;height:auto;margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title{display:inline;margin:0;color:var(--mg-b-color-neutral-80)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title-label{font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title--static.mg-c-input__section-header-title{margin:0 var(--mg-b-size-12)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-value{display:inline-flex;min-width:var(--mg-b-size-min-height);min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-radius:var(--mg-b-size-4);background-color:var(--mg-b-color-neutral-20);font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-no-result{text-align:center}.mg-c-input.mg-c-input--checkbox-multi b{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container b{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--with-values .mg-c-input__input-container{gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content{display:flex;width:calc(var(--mg-b-size-floating-element-max-width) - var(--mg-b-size-16));height:calc(50*var(--mg-b-size-8));max-height:calc(100vh - var(--mg-b-size-32));flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__section-header-tootlip){margin-left:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-c-card-spacing:var(--mg-b-size-8)}.mg-c-input.mg-c-input--readonly ul{display:flex;min-height:var(--mg-b-font-size);flex-flow:column wrap;padding:0;margin:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) 0 0;list-style:none;row-gap:var(--mg-b-size-8)}";
|
|
1418
|
-
const MgInputCheckboxStyle0 = mgInputCheckboxCss;
|
|
1419
1425
|
|
|
1420
1426
|
/**
|
|
1421
1427
|
* type CheckboxItem validation function
|
|
@@ -1427,8 +1433,8 @@ const isCheckboxItems = (items) => Array.isArray(items) &&
|
|
|
1427
1433
|
const MgInputCheckbox = class {
|
|
1428
1434
|
constructor(hostRef) {
|
|
1429
1435
|
index.registerInstance(this, hostRef);
|
|
1430
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
1431
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
1436
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
1437
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
1432
1438
|
// hasDisplayedError (triggered by blur event)
|
|
1433
1439
|
this.hasDisplayedError = false;
|
|
1434
1440
|
this.mode = 'custom';
|
|
@@ -1447,6 +1453,10 @@ const MgInputCheckbox = class {
|
|
|
1447
1453
|
* If not set the value equals the identifier
|
|
1448
1454
|
*/
|
|
1449
1455
|
this.name = this.identifier;
|
|
1456
|
+
/**
|
|
1457
|
+
* Define if label is displayed on top
|
|
1458
|
+
*/
|
|
1459
|
+
this.labelOnTop = false;
|
|
1450
1460
|
/**
|
|
1451
1461
|
* Define if label is visible
|
|
1452
1462
|
*/
|
|
@@ -1463,6 +1473,11 @@ const MgInputCheckbox = class {
|
|
|
1463
1473
|
* Define if mg-input-checkbox is readonly
|
|
1464
1474
|
*/
|
|
1465
1475
|
this.readonly = false;
|
|
1476
|
+
/**
|
|
1477
|
+
* Display selected values list in "multi" type
|
|
1478
|
+
* This prop is only applied with prop type "multi" or when an "unset" mode render a "multi" type.
|
|
1479
|
+
*/
|
|
1480
|
+
this.displaySelectedValues = false;
|
|
1466
1481
|
/**
|
|
1467
1482
|
* Define if input is disabled
|
|
1468
1483
|
*/
|
|
@@ -1474,7 +1489,7 @@ const MgInputCheckbox = class {
|
|
|
1474
1489
|
/**
|
|
1475
1490
|
* Component classes
|
|
1476
1491
|
*/
|
|
1477
|
-
this.classCollection = new index_es.
|
|
1492
|
+
this.classCollection = new index_es.Zt([this.baseClassName, mgInput_conf.classFieldset]);
|
|
1478
1493
|
/**
|
|
1479
1494
|
* Formated value to display in list
|
|
1480
1495
|
*/
|
|
@@ -1592,7 +1607,7 @@ const MgInputCheckbox = class {
|
|
|
1592
1607
|
* Method to update searchResults
|
|
1593
1608
|
*/
|
|
1594
1609
|
this.updateSearchResults = () => {
|
|
1595
|
-
this.searchResults = this.checkboxItems.filter(item => index_es.
|
|
1610
|
+
this.searchResults = this.checkboxItems.filter(item => index_es.Jt(item.title).includes(index_es.Jt(this.searchValue)));
|
|
1596
1611
|
};
|
|
1597
1612
|
/**
|
|
1598
1613
|
* Method to validate if one of inputs value is checked id required
|
|
@@ -1624,13 +1639,13 @@ const MgInputCheckbox = class {
|
|
|
1624
1639
|
* @returns message to display
|
|
1625
1640
|
*/
|
|
1626
1641
|
this.getSelectValuesButtonMessage = () => {
|
|
1627
|
-
if (this.selectValuesButtonKey === 'editButton' && index_es.
|
|
1642
|
+
if (this.selectValuesButtonKey === 'editButton' && index_es.De(this.editButtonMessage)) {
|
|
1628
1643
|
return this.editButtonMessage;
|
|
1629
1644
|
}
|
|
1630
|
-
else if (this.selectValuesButtonKey === 'showButton' && index_es.
|
|
1645
|
+
else if (this.selectValuesButtonKey === 'showButton' && index_es.De(this.showButtonMessage)) {
|
|
1631
1646
|
return this.showButtonMessage;
|
|
1632
1647
|
}
|
|
1633
|
-
else if (this.selectValuesButtonKey === 'selectButton' && index_es.
|
|
1648
|
+
else if (this.selectValuesButtonKey === 'selectButton' && index_es.De(this.selectButtonMessage)) {
|
|
1634
1649
|
return this.selectButtonMessage;
|
|
1635
1650
|
}
|
|
1636
1651
|
else {
|
|
@@ -1686,12 +1701,12 @@ const MgInputCheckbox = class {
|
|
|
1686
1701
|
this.valueChange.emit(newValue);
|
|
1687
1702
|
}
|
|
1688
1703
|
else {
|
|
1689
|
-
throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${index_es.
|
|
1704
|
+
throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${index_es.Gt(newValue)}.`);
|
|
1690
1705
|
}
|
|
1691
1706
|
}
|
|
1692
1707
|
validateType(newValue) {
|
|
1693
1708
|
if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
|
|
1694
|
-
throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${index_es.
|
|
1709
|
+
throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${index_es.Gt(newValue)}.`);
|
|
1695
1710
|
}
|
|
1696
1711
|
else if (newValue === undefined) {
|
|
1697
1712
|
this.mode = 'auto';
|
|
@@ -1791,7 +1806,7 @@ const MgInputCheckbox = class {
|
|
|
1791
1806
|
if (typeof valid !== 'boolean') {
|
|
1792
1807
|
throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean.');
|
|
1793
1808
|
}
|
|
1794
|
-
else if (!index_es.
|
|
1809
|
+
else if (!index_es.De(errorMessage)) {
|
|
1795
1810
|
throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string.');
|
|
1796
1811
|
}
|
|
1797
1812
|
else {
|
|
@@ -1928,7 +1943,7 @@ const MgInputCheckbox = class {
|
|
|
1928
1943
|
else {
|
|
1929
1944
|
inputContent = this.renderCheckboxMulti();
|
|
1930
1945
|
}
|
|
1931
|
-
return (index.h("mg-input", { key: '
|
|
1946
|
+
return (index.h("mg-input", { key: 'acc005b56c767a84c6b4bcc5b29769da82d12c1e', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
|
|
1932
1947
|
}
|
|
1933
1948
|
get element() { return index.getElement(this); }
|
|
1934
1949
|
static get watchers() { return {
|
|
@@ -1944,16 +1959,27 @@ const MgInputCheckbox = class {
|
|
|
1944
1959
|
"searchValue": ["validateSearchValue"]
|
|
1945
1960
|
}; }
|
|
1946
1961
|
};
|
|
1947
|
-
MgInputCheckbox.style =
|
|
1962
|
+
MgInputCheckbox.style = mgInputCheckboxCss;
|
|
1948
1963
|
|
|
1949
1964
|
const MgInputCheckboxPaginated = class {
|
|
1950
1965
|
constructor(hostRef) {
|
|
1951
1966
|
index.registerInstance(this, hostRef);
|
|
1952
|
-
this.massAction = index.createEvent(this, "mass-action"
|
|
1967
|
+
this.massAction = index.createEvent(this, "mass-action");
|
|
1953
1968
|
/*************
|
|
1954
1969
|
* Constantes *
|
|
1955
1970
|
*************/
|
|
1956
1971
|
this.offset = 10;
|
|
1972
|
+
/*************
|
|
1973
|
+
* Decorators *
|
|
1974
|
+
*************/
|
|
1975
|
+
/**
|
|
1976
|
+
* Define if mg-input-checkbox-list is readonly
|
|
1977
|
+
*/
|
|
1978
|
+
this.readonly = false;
|
|
1979
|
+
/**
|
|
1980
|
+
* Define if mg-input-checkbox-list is disabled
|
|
1981
|
+
*/
|
|
1982
|
+
this.disabled = false;
|
|
1957
1983
|
/**
|
|
1958
1984
|
* Current page
|
|
1959
1985
|
*/
|
|
@@ -2040,10 +2066,10 @@ const MgInputCheckboxPaginated = class {
|
|
|
2040
2066
|
* @returns HTML Element
|
|
2041
2067
|
*/
|
|
2042
2068
|
render() {
|
|
2043
|
-
const getText = (checkboxes) => (index.h("em", { key: '
|
|
2069
|
+
const getText = (checkboxes) => (index.h("em", { key: '0bf489a95090b519c85a4649d6c3b9a0e97bf0d8', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlural' : 'title']} (${checkboxes.length})`));
|
|
2044
2070
|
const [from, to] = this.getFromToIndexes();
|
|
2045
2071
|
const itemsContainerId = `items-${this.sectionKind}-container`;
|
|
2046
|
-
return (index.h(index.Host, { key: '
|
|
2072
|
+
return (index.h(index.Host, { key: 'ee67aa1705efa2b88010748b6978e0c1dec6e4de', hidden: this.checkboxes.length < 1 }, index.h("div", { key: 'b713e2a0e21f57d3b238b72163f3d7a4781b7026', class: "mg-c-input__section-header" }, this.sectionKind === SectionKind.SELECTED ? (index.h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, index.h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), index.h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (index.h("p", { class: "mg-c-input__section-header-title mg-c-input__section-header-title--static" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (index.h("mg-tooltip", { key: 'ef75381dab8028c3da4cbcefba644770322c2e7e', class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip }, index.h("mg-button", { key: '6e33b32300e7932f09ce1152462a3cf19e452df8', variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (index.h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), index.h("div", { key: '727ef2955d5866131e421c0809244ccc42c75dd0', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, index.h(MgInputCheckboxList, { key: 'd26de7f05b85142df7218ad9941e4b201cfb2e01', checkboxes: this.getArrayRange(this.checkboxes, from, to), displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
|
|
2047
2073
|
}
|
|
2048
2074
|
static get watchers() { return {
|
|
2049
2075
|
"checkboxes": ["watchCheckboxes"]
|
|
@@ -2052,14 +2078,13 @@ const MgInputCheckboxPaginated = class {
|
|
|
2052
2078
|
|
|
2053
2079
|
const DEFAULT_MAX_DATE = '9999-12-31';
|
|
2054
2080
|
|
|
2055
|
-
const mgInputDateCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}";
|
|
2056
|
-
const MgInputDateStyle0 = mgInputDateCss;
|
|
2081
|
+
const mgInputDateCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}";
|
|
2057
2082
|
|
|
2058
2083
|
const MgInputDate = class {
|
|
2059
2084
|
constructor(hostRef) {
|
|
2060
2085
|
index.registerInstance(this, hostRef);
|
|
2061
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
2062
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
2086
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
2087
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
2063
2088
|
// hasDisplayedError (triggered by blur event)
|
|
2064
2089
|
this.hasDisplayedError = false;
|
|
2065
2090
|
/**
|
|
@@ -2067,6 +2092,10 @@ const MgInputDate = class {
|
|
|
2067
2092
|
* If not set the value equals the identifier
|
|
2068
2093
|
*/
|
|
2069
2094
|
this.name = this.identifier;
|
|
2095
|
+
/**
|
|
2096
|
+
* Define if label is displayed on top
|
|
2097
|
+
*/
|
|
2098
|
+
this.labelOnTop = false;
|
|
2070
2099
|
/**
|
|
2071
2100
|
* Define if label is visible
|
|
2072
2101
|
*/
|
|
@@ -2095,13 +2124,13 @@ const MgInputDate = class {
|
|
|
2095
2124
|
/**
|
|
2096
2125
|
* Component classes
|
|
2097
2126
|
*/
|
|
2098
|
-
this.classCollection = new index_es.
|
|
2127
|
+
this.classCollection = new index_es.Zt(['mg-c-input--date']);
|
|
2099
2128
|
/**
|
|
2100
2129
|
* Method to validate date pattern string
|
|
2101
2130
|
* @param value - value to test
|
|
2102
2131
|
* @returns truthy when value match the pattern
|
|
2103
2132
|
*/
|
|
2104
|
-
this.isValidPattern = (value) => index_es.
|
|
2133
|
+
this.isValidPattern = (value) => index_es.De(value) && index_es.Lt.test(value);
|
|
2105
2134
|
/**
|
|
2106
2135
|
* Format help text to display
|
|
2107
2136
|
* @param helpText - help text format
|
|
@@ -2115,23 +2144,23 @@ const MgInputDate = class {
|
|
|
2115
2144
|
}
|
|
2116
2145
|
const defaultHelpTextVariable = '{defaultHelpText}';
|
|
2117
2146
|
// If a custom helpText is provided, store it but don't return it directly
|
|
2118
|
-
let text = index_es.
|
|
2147
|
+
let text = index_es.De(helpText) ? helpText : this.messages.input.date.helpText.expectedFormat;
|
|
2119
2148
|
// Handle defaultHelpText
|
|
2120
2149
|
if (text.includes(defaultHelpTextVariable)) {
|
|
2121
2150
|
text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText.expectedFormat));
|
|
2122
2151
|
}
|
|
2123
2152
|
// Replace pattern and date variables
|
|
2124
|
-
text = text.replace('{pattern}', this.renderPattern()).replace('{date}', index_es.
|
|
2153
|
+
text = text.replace('{pattern}', this.renderPattern()).replace('{date}', index_es.Ft(index_es.ar(new Date('2025-12-24')), this.systemLocale));
|
|
2125
2154
|
// Add additional message for min/max if necessary
|
|
2126
2155
|
let rangeMessage;
|
|
2127
2156
|
if (((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
|
|
2128
|
-
rangeMessage = this.messages.input.date.helpText.minMax.replace('{min}', index_es.
|
|
2157
|
+
rangeMessage = this.messages.input.date.helpText.minMax.replace('{min}', index_es.Ft(this.min, this.systemLocale)).replace('{max}', index_es.Ft(this.max, this.systemLocale));
|
|
2129
2158
|
}
|
|
2130
2159
|
else if (((_b = this.min) === null || _b === void 0 ? void 0 : _b.length) > 0) {
|
|
2131
|
-
rangeMessage = this.messages.input.date.helpText.min.replace('{min}', index_es.
|
|
2160
|
+
rangeMessage = this.messages.input.date.helpText.min.replace('{min}', index_es.Ft(this.min, this.systemLocale));
|
|
2132
2161
|
}
|
|
2133
2162
|
else if (this.max !== DEFAULT_MAX_DATE) {
|
|
2134
|
-
rangeMessage = this.messages.input.date.helpText.max.replace('{max}', index_es.
|
|
2163
|
+
rangeMessage = this.messages.input.date.helpText.max.replace('{max}', index_es.Ft(this.max, this.systemLocale));
|
|
2135
2164
|
}
|
|
2136
2165
|
// Combine custom helpText with range message if both exist
|
|
2137
2166
|
if (text !== undefined && rangeMessage !== undefined) {
|
|
@@ -2228,15 +2257,15 @@ const MgInputDate = class {
|
|
|
2228
2257
|
// min, max & minMax
|
|
2229
2258
|
else if (['min', 'max', 'minMax'].includes(inputError)) {
|
|
2230
2259
|
this.errorMessage = this.messages.input.date.helpText[inputError]
|
|
2231
|
-
.replace('{min}', index_es.
|
|
2232
|
-
.replace('{max}', index_es.
|
|
2260
|
+
.replace('{min}', index_es.Ft(this.min, this.systemLocale))
|
|
2261
|
+
.replace('{max}', index_es.Ft(this.max, this.systemLocale));
|
|
2233
2262
|
}
|
|
2234
2263
|
// wrong date format
|
|
2235
2264
|
// element.validity.badInput is default error message
|
|
2236
2265
|
else {
|
|
2237
2266
|
this.errorMessage = this.messages.input.date.error.badInput
|
|
2238
2267
|
.replace('{pattern}', this.renderPattern())
|
|
2239
|
-
.replace('{date}', index_es.
|
|
2268
|
+
.replace('{date}', index_es.Ft(index_es.ar(new Date('2025-12-24')), this.systemLocale));
|
|
2240
2269
|
}
|
|
2241
2270
|
}
|
|
2242
2271
|
};
|
|
@@ -2245,7 +2274,7 @@ const MgInputDate = class {
|
|
|
2245
2274
|
* @returns translated html pattern
|
|
2246
2275
|
*/
|
|
2247
2276
|
this.renderPattern = () => {
|
|
2248
|
-
let patternLocal = index_es.
|
|
2277
|
+
let patternLocal = index_es.ir(this.systemLocale);
|
|
2249
2278
|
for (const key in this.messages.input.date.pattern) {
|
|
2250
2279
|
patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
|
|
2251
2280
|
}
|
|
@@ -2260,9 +2289,9 @@ const MgInputDate = class {
|
|
|
2260
2289
|
// - `undefined` is not allowed in CustomEvent['detail']
|
|
2261
2290
|
this.value = null;
|
|
2262
2291
|
}
|
|
2263
|
-
else if (newValue && !index_es.
|
|
2292
|
+
else if (newValue && !index_es.De(newValue)) {
|
|
2264
2293
|
// check value validity
|
|
2265
|
-
throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${index_es.
|
|
2294
|
+
throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${index_es.Gt(newValue)}.`);
|
|
2266
2295
|
}
|
|
2267
2296
|
else if (newValue === null || this.isValidPattern(newValue)) {
|
|
2268
2297
|
this.valueChange.emit(newValue);
|
|
@@ -2279,7 +2308,7 @@ const MgInputDate = class {
|
|
|
2279
2308
|
}
|
|
2280
2309
|
validateMinMax(newValue) {
|
|
2281
2310
|
if (newValue && !this.isValidPattern(newValue)) {
|
|
2282
|
-
throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${index_es.
|
|
2311
|
+
throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${index_es.Gt(newValue)}.`);
|
|
2283
2312
|
}
|
|
2284
2313
|
}
|
|
2285
2314
|
handleValidityChange(newValue, _oldValue, prop) {
|
|
@@ -2329,7 +2358,7 @@ const MgInputDate = class {
|
|
|
2329
2358
|
if (typeof valid !== 'boolean') {
|
|
2330
2359
|
throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean.');
|
|
2331
2360
|
}
|
|
2332
|
-
else if (!index_es.
|
|
2361
|
+
else if (!index_es.De(errorMessage)) {
|
|
2333
2362
|
throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string.');
|
|
2334
2363
|
}
|
|
2335
2364
|
else {
|
|
@@ -2395,7 +2424,7 @@ const MgInputDate = class {
|
|
|
2395
2424
|
* @returns HTML Element
|
|
2396
2425
|
*/
|
|
2397
2426
|
render() {
|
|
2398
|
-
return (index.h("mg-input", { key: '
|
|
2427
|
+
return (index.h("mg-input", { key: '504777cb807b9747a6c854d7056cb5420eb2cdcf', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && index.h("b", { class: "mg-c-input__readonly-value" }, index_es.Ft(this.value, this.locale))) : (index.h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
|
|
2399
2428
|
if (el !== null)
|
|
2400
2429
|
this.input = el;
|
|
2401
2430
|
} }))));
|
|
@@ -2410,7 +2439,7 @@ const MgInputDate = class {
|
|
|
2410
2439
|
"disabled": ["handleValidityChange", "watchDisabled"]
|
|
2411
2440
|
}; }
|
|
2412
2441
|
};
|
|
2413
|
-
MgInputDate.style =
|
|
2442
|
+
MgInputDate.style = mgInputDateCss;
|
|
2414
2443
|
|
|
2415
2444
|
/**
|
|
2416
2445
|
* List of all possibles types
|
|
@@ -2418,14 +2447,13 @@ MgInputDate.style = MgInputDateStyle0;
|
|
|
2418
2447
|
const types = ['decimal', 'integer'];
|
|
2419
2448
|
const formats = ['none', 'number', 'currency', 'percent', 'unit'];
|
|
2420
2449
|
|
|
2421
|
-
const mgInputNumericCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input .mg-c-input__box{width:auto;text-align:var(--mg-c-input-text-align, right)}";
|
|
2422
|
-
const MgInputNumericStyle0 = mgInputNumericCss;
|
|
2450
|
+
const mgInputNumericCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input .mg-c-input__box{width:auto;text-align:var(--mg-c-input-text-align, right)}";
|
|
2423
2451
|
|
|
2424
2452
|
const MgInputNumeric = class {
|
|
2425
2453
|
constructor(hostRef) {
|
|
2426
2454
|
index.registerInstance(this, hostRef);
|
|
2427
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
2428
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
2455
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
2456
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
2429
2457
|
// hasDisplayedError (triggered by blur event)
|
|
2430
2458
|
this.hasDisplayedError = false;
|
|
2431
2459
|
/**
|
|
@@ -2433,6 +2461,10 @@ const MgInputNumeric = class {
|
|
|
2433
2461
|
* If not set the value equals the identifier
|
|
2434
2462
|
*/
|
|
2435
2463
|
this.name = this.identifier;
|
|
2464
|
+
/**
|
|
2465
|
+
* Define if label is displayed on top
|
|
2466
|
+
*/
|
|
2467
|
+
this.labelOnTop = false;
|
|
2436
2468
|
/**
|
|
2437
2469
|
* Define if label is visible
|
|
2438
2470
|
*/
|
|
@@ -2483,17 +2515,17 @@ const MgInputNumeric = class {
|
|
|
2483
2515
|
/**
|
|
2484
2516
|
* Component classes
|
|
2485
2517
|
*/
|
|
2486
|
-
this.classCollection = new index_es.
|
|
2518
|
+
this.classCollection = new index_es.Zt(['mg-c-input--numeric']);
|
|
2487
2519
|
/**
|
|
2488
2520
|
* Handle input event
|
|
2489
2521
|
*/
|
|
2490
2522
|
this.handleInput = () => {
|
|
2523
|
+
this.value = this.input.value;
|
|
2491
2524
|
// Check validity
|
|
2492
2525
|
this.checkValidity();
|
|
2493
2526
|
if (this.hasDisplayedError) {
|
|
2494
2527
|
this.setErrorMessage();
|
|
2495
2528
|
}
|
|
2496
|
-
this.value = this.input.value;
|
|
2497
2529
|
};
|
|
2498
2530
|
/**
|
|
2499
2531
|
* Handle focus event
|
|
@@ -2526,7 +2558,7 @@ const MgInputNumeric = class {
|
|
|
2526
2558
|
* @param value - value to format
|
|
2527
2559
|
* @returns formatted value according to locale
|
|
2528
2560
|
*/
|
|
2529
|
-
this.formatErrorValue = (value) => index_es.
|
|
2561
|
+
this.formatErrorValue = (value) => index_es.lr(value, this.locale, !Number.isInteger(value) && this.type === 'decimal' ? this.decimalLength : 0);
|
|
2530
2562
|
/**
|
|
2531
2563
|
* Set input error message
|
|
2532
2564
|
* @param errorMessage - errorMessage override
|
|
@@ -2581,13 +2613,13 @@ const MgInputNumeric = class {
|
|
|
2581
2613
|
this.formatValue = (value) => {
|
|
2582
2614
|
switch (this.format) {
|
|
2583
2615
|
case 'number':
|
|
2584
|
-
return index_es.
|
|
2616
|
+
return index_es.lr(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2585
2617
|
case 'currency':
|
|
2586
|
-
return index_es.
|
|
2618
|
+
return index_es.or(value, this.locale, this.currency);
|
|
2587
2619
|
case 'percent':
|
|
2588
|
-
return index_es.
|
|
2620
|
+
return index_es.cr(value / 100, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2589
2621
|
case 'unit':
|
|
2590
|
-
return index_es.
|
|
2622
|
+
return index_es.fr(value, this.locale, this.unit, this.unitDisplay, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2591
2623
|
case 'none':
|
|
2592
2624
|
return value.toString();
|
|
2593
2625
|
}
|
|
@@ -2618,7 +2650,7 @@ const MgInputNumeric = class {
|
|
|
2618
2650
|
return undefined;
|
|
2619
2651
|
}
|
|
2620
2652
|
// If a custom helpText is provided, store it but don't return it directly
|
|
2621
|
-
const text = index_es.
|
|
2653
|
+
const text = index_es.De(helpText) ? helpText : undefined;
|
|
2622
2654
|
// If neither min nor max are defined, and there's no custom helpText,
|
|
2623
2655
|
// we can return undefined as there's no message to display
|
|
2624
2656
|
if (this.min === undefined && this.max === undefined && text === undefined) {
|
|
@@ -2702,22 +2734,22 @@ const MgInputNumeric = class {
|
|
|
2702
2734
|
}
|
|
2703
2735
|
validateType(newValue) {
|
|
2704
2736
|
if (!types.includes(newValue)) {
|
|
2705
|
-
throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${index_es.
|
|
2737
|
+
throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
2706
2738
|
}
|
|
2707
2739
|
}
|
|
2708
2740
|
watchFormat(newValue) {
|
|
2709
2741
|
if (!formats.includes(newValue)) {
|
|
2710
|
-
throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${index_es.
|
|
2742
|
+
throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
2711
2743
|
}
|
|
2712
2744
|
}
|
|
2713
2745
|
validateIntegerLength(newValue) {
|
|
2714
2746
|
if (newValue < 1) {
|
|
2715
|
-
throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${index_es.
|
|
2747
|
+
throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${index_es.Gt(newValue)}.`);
|
|
2716
2748
|
}
|
|
2717
2749
|
}
|
|
2718
2750
|
validateDecimalLength(newValue) {
|
|
2719
2751
|
if (newValue < 1) {
|
|
2720
|
-
throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${index_es.
|
|
2752
|
+
throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${index_es.Gt(newValue)}.`);
|
|
2721
2753
|
}
|
|
2722
2754
|
}
|
|
2723
2755
|
/**
|
|
@@ -2751,7 +2783,7 @@ const MgInputNumeric = class {
|
|
|
2751
2783
|
if (typeof valid !== 'boolean') {
|
|
2752
2784
|
throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean.');
|
|
2753
2785
|
}
|
|
2754
|
-
else if (!index_es.
|
|
2786
|
+
else if (!index_es.De(errorMessage)) {
|
|
2755
2787
|
throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string.');
|
|
2756
2788
|
}
|
|
2757
2789
|
else {
|
|
@@ -2852,7 +2884,7 @@ const MgInputNumeric = class {
|
|
|
2852
2884
|
* @returns HTML Element
|
|
2853
2885
|
*/
|
|
2854
2886
|
render() {
|
|
2855
|
-
return (index.h("mg-input", { key: '
|
|
2887
|
+
return (index.h("mg-input", { key: '3f78e44ccfd37e0d9245b368e66d5650fa3c642c', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
|
|
2856
2888
|
? this.readonlyValue && this.renderReadonly()
|
|
2857
2889
|
: [
|
|
2858
2890
|
index.h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
@@ -2877,16 +2909,15 @@ const MgInputNumeric = class {
|
|
|
2877
2909
|
"decimalLength": ["validateDecimalLength"]
|
|
2878
2910
|
}; }
|
|
2879
2911
|
};
|
|
2880
|
-
MgInputNumeric.style =
|
|
2912
|
+
MgInputNumeric.style = mgInputNumericCss;
|
|
2881
2913
|
|
|
2882
|
-
const mgInputPasswordCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input.mg-c-input--password .mg-c-input__input-icon{color:var(--mg-b-color-dark)}.mg-c-input.mg-c-input--password .mg-c-input__input-group{position:relative;flex-grow:1}.mg-c-input.mg-c-input--password .mg-c-input__append-button{position:absolute;right:0}.mg-c-input.mg-c-input--password .mg-c-input__box{padding-right:calc(var(--mg-b-size-min-height) + var(--mg-b-size-8))}.mg-c-input.mg-c-input--password .mg-c-input__box::-ms-reveal{display:none}";
|
|
2883
|
-
const MgInputPasswordStyle0 = mgInputPasswordCss;
|
|
2914
|
+
const mgInputPasswordCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input.mg-c-input--password .mg-c-input__input-icon{color:var(--mg-b-color-dark)}.mg-c-input.mg-c-input--password .mg-c-input__input-group{position:relative;flex-grow:1}.mg-c-input.mg-c-input--password .mg-c-input__append-button{position:absolute;right:0}.mg-c-input.mg-c-input--password .mg-c-input__box{padding-right:calc(var(--mg-b-size-min-height) + var(--mg-b-size-8))}.mg-c-input.mg-c-input--password .mg-c-input__box::-ms-reveal{display:none}";
|
|
2884
2915
|
|
|
2885
2916
|
const MgInputPassword = class {
|
|
2886
2917
|
constructor(hostRef) {
|
|
2887
2918
|
index.registerInstance(this, hostRef);
|
|
2888
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
2889
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
2919
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
2920
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
2890
2921
|
// hasDisplayedError (triggered by blur event)
|
|
2891
2922
|
this.hasDisplayedError = false;
|
|
2892
2923
|
/**
|
|
@@ -2894,6 +2925,10 @@ const MgInputPassword = class {
|
|
|
2894
2925
|
* If not set the value equals the identifier
|
|
2895
2926
|
*/
|
|
2896
2927
|
this.name = this.identifier;
|
|
2928
|
+
/**
|
|
2929
|
+
* Define if label is displayed on top
|
|
2930
|
+
*/
|
|
2931
|
+
this.labelOnTop = false;
|
|
2897
2932
|
/**
|
|
2898
2933
|
* Define if label is visible
|
|
2899
2934
|
*/
|
|
@@ -2921,7 +2956,7 @@ const MgInputPassword = class {
|
|
|
2921
2956
|
/**
|
|
2922
2957
|
* Component classes
|
|
2923
2958
|
*/
|
|
2924
|
-
this.classCollection = new index_es.
|
|
2959
|
+
this.classCollection = new index_es.Zt(['mg-c-input--password']);
|
|
2925
2960
|
/**
|
|
2926
2961
|
* Indicates if password is displayed or not
|
|
2927
2962
|
*/
|
|
@@ -3041,7 +3076,7 @@ const MgInputPassword = class {
|
|
|
3041
3076
|
if (typeof valid !== 'boolean') {
|
|
3042
3077
|
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean.');
|
|
3043
3078
|
}
|
|
3044
|
-
else if (!index_es.
|
|
3079
|
+
else if (!index_es.De(errorMessage)) {
|
|
3045
3080
|
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string.');
|
|
3046
3081
|
}
|
|
3047
3082
|
else {
|
|
@@ -3098,7 +3133,7 @@ const MgInputPassword = class {
|
|
|
3098
3133
|
* @returns HTML Element
|
|
3099
3134
|
*/
|
|
3100
3135
|
render() {
|
|
3101
|
-
return (index.h("mg-input", { key: '
|
|
3136
|
+
return (index.h("mg-input", { key: 'ac5e6acb05dbad179aa6c216bf49531399276563', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && index.h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (index.h("span", { class: "mg-c-input__input-group" }, index.h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
3102
3137
|
if (el !== null)
|
|
3103
3138
|
this.input = el;
|
|
3104
3139
|
} }), index.h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, index.h("mg-icon", { class: "mg-c-input__input-icon", icon: this.displayPassword ? 'eye-slash' : 'eye' }))))));
|
|
@@ -3112,10 +3147,9 @@ const MgInputPassword = class {
|
|
|
3112
3147
|
"mgWidth": ["watchMgWidth"]
|
|
3113
3148
|
}; }
|
|
3114
3149
|
};
|
|
3115
|
-
MgInputPassword.style =
|
|
3150
|
+
MgInputPassword.style = mgInputPasswordCss;
|
|
3116
3151
|
|
|
3117
3152
|
const mgInputRadioCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}";
|
|
3118
|
-
const MgInputRadioStyle0 = mgInputRadioCss;
|
|
3119
3153
|
|
|
3120
3154
|
/**
|
|
3121
3155
|
* type Option validation function
|
|
@@ -3126,8 +3160,8 @@ const isOption$3 = (option) => typeof option === 'object' && typeof option.title
|
|
|
3126
3160
|
const MgInputRadio = class {
|
|
3127
3161
|
constructor(hostRef) {
|
|
3128
3162
|
index.registerInstance(this, hostRef);
|
|
3129
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
3130
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
3163
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
3164
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
3131
3165
|
/************
|
|
3132
3166
|
* Internal *
|
|
3133
3167
|
************/
|
|
@@ -3173,7 +3207,7 @@ const MgInputRadio = class {
|
|
|
3173
3207
|
/**
|
|
3174
3208
|
* Component classes
|
|
3175
3209
|
*/
|
|
3176
|
-
this.classCollection = new index_es.
|
|
3210
|
+
this.classCollection = new index_es.Zt(['mg-c-input--radio', mgInput_conf.classFieldset]);
|
|
3177
3211
|
/**
|
|
3178
3212
|
* Handle input event
|
|
3179
3213
|
* @param event - input event
|
|
@@ -3224,7 +3258,7 @@ const MgInputRadio = class {
|
|
|
3224
3258
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3225
3259
|
watchValue(newValue) {
|
|
3226
3260
|
var _a;
|
|
3227
|
-
if (index_es.
|
|
3261
|
+
if (index_es.Dt(this.items) && typeof newValue === 'string') {
|
|
3228
3262
|
this.readonlyValue = newValue;
|
|
3229
3263
|
}
|
|
3230
3264
|
else if (Array.isArray(this.items) && this.items.every(isOption$3)) {
|
|
@@ -3238,10 +3272,10 @@ const MgInputRadio = class {
|
|
|
3238
3272
|
validateItems(newValue) {
|
|
3239
3273
|
// Validate if items have required min length
|
|
3240
3274
|
if (typeof newValue === 'object' && newValue.length < 2) {
|
|
3241
|
-
throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${index_es.
|
|
3275
|
+
throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${index_es.Gt(newValue)}.`);
|
|
3242
3276
|
}
|
|
3243
3277
|
// String array
|
|
3244
|
-
else if (index_es.
|
|
3278
|
+
else if (index_es.Dt(newValue)) {
|
|
3245
3279
|
this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
|
|
3246
3280
|
}
|
|
3247
3281
|
// Object array
|
|
@@ -3249,7 +3283,7 @@ const MgInputRadio = class {
|
|
|
3249
3283
|
this.options = newValue;
|
|
3250
3284
|
}
|
|
3251
3285
|
else {
|
|
3252
|
-
throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${index_es.
|
|
3286
|
+
throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${index_es.Gt(newValue)}.`);
|
|
3253
3287
|
}
|
|
3254
3288
|
}
|
|
3255
3289
|
watchInputVerticalList(newValue) {
|
|
@@ -3311,7 +3345,7 @@ const MgInputRadio = class {
|
|
|
3311
3345
|
if (typeof valid !== 'boolean') {
|
|
3312
3346
|
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean.');
|
|
3313
3347
|
}
|
|
3314
|
-
else if (!index_es.
|
|
3348
|
+
else if (!index_es.De(errorMessage)) {
|
|
3315
3349
|
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string.');
|
|
3316
3350
|
}
|
|
3317
3351
|
else {
|
|
@@ -3371,7 +3405,7 @@ const MgInputRadio = class {
|
|
|
3371
3405
|
* @returns HTML Element
|
|
3372
3406
|
*/
|
|
3373
3407
|
render() {
|
|
3374
|
-
return (index.h("mg-input", { key: '
|
|
3408
|
+
return (index.h("mg-input", { key: '9d8c6fb134330e0d126f3585f3c4c4145d39515a', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index$1) => (index.h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
|
|
3375
3409
|
if (el !== null)
|
|
3376
3410
|
this.inputs[index$1] = el;
|
|
3377
3411
|
} }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title))))))));
|
|
@@ -3386,10 +3420,9 @@ const MgInputRadio = class {
|
|
|
3386
3420
|
"disabled": ["handleValidityChange", "watchDisabled"]
|
|
3387
3421
|
}; }
|
|
3388
3422
|
};
|
|
3389
|
-
MgInputRadio.style =
|
|
3423
|
+
MgInputRadio.style = mgInputRadioCss;
|
|
3390
3424
|
|
|
3391
|
-
const mgInputSelectCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__box{padding-top:0;padding-right:var(--mg-b-size-8);padding-bottom:0}@media screen and (max-width: 767px){.mg-c-input__box{width:100%}}";
|
|
3392
|
-
const MgInputSelectStyle0 = mgInputSelectCss;
|
|
3425
|
+
const mgInputSelectCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__box{padding-top:0;padding-right:var(--mg-b-size-8);padding-bottom:0}@media screen and (max-width: 767px){.mg-c-input__box{width:100%}}";
|
|
3393
3426
|
|
|
3394
3427
|
/**
|
|
3395
3428
|
* Check if item is a well configured option
|
|
@@ -3436,8 +3469,8 @@ const groupOptions = (acc, { group, title, value, disabled }) => {
|
|
|
3436
3469
|
const MgInputSelect = class {
|
|
3437
3470
|
constructor(hostRef) {
|
|
3438
3471
|
index.registerInstance(this, hostRef);
|
|
3439
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
3440
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
3472
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
3473
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
3441
3474
|
// hasDisplayedError (triggered by blur event)
|
|
3442
3475
|
this.hasDisplayedError = false;
|
|
3443
3476
|
/**
|
|
@@ -3445,6 +3478,10 @@ const MgInputSelect = class {
|
|
|
3445
3478
|
* If not set the value equals the identifier
|
|
3446
3479
|
*/
|
|
3447
3480
|
this.name = this.identifier;
|
|
3481
|
+
/**
|
|
3482
|
+
* Define if label is displayed on top
|
|
3483
|
+
*/
|
|
3484
|
+
this.labelOnTop = false;
|
|
3448
3485
|
/**
|
|
3449
3486
|
* Define if label is visible
|
|
3450
3487
|
*/
|
|
@@ -3476,7 +3513,7 @@ const MgInputSelect = class {
|
|
|
3476
3513
|
/**
|
|
3477
3514
|
* Component classes
|
|
3478
3515
|
*/
|
|
3479
|
-
this.classCollection = new index_es.
|
|
3516
|
+
this.classCollection = new index_es.Zt(['mg-c-input--select']);
|
|
3480
3517
|
/**
|
|
3481
3518
|
* Handle input event
|
|
3482
3519
|
*/
|
|
@@ -3506,7 +3543,7 @@ const MgInputSelect = class {
|
|
|
3506
3543
|
if (this.input.value === '') {
|
|
3507
3544
|
this.setValue(null);
|
|
3508
3545
|
}
|
|
3509
|
-
else if (index_es.
|
|
3546
|
+
else if (index_es.Dt(this.items) && this.items.includes(this.input.value)) {
|
|
3510
3547
|
this.setValue(this.input.value);
|
|
3511
3548
|
}
|
|
3512
3549
|
else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
|
|
@@ -3564,7 +3601,7 @@ const MgInputSelect = class {
|
|
|
3564
3601
|
}
|
|
3565
3602
|
validateValue(newValue) {
|
|
3566
3603
|
var _a, _b;
|
|
3567
|
-
if (index_es.
|
|
3604
|
+
if (index_es.Dt(this.items) && typeof newValue === 'string') {
|
|
3568
3605
|
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== undefined ? this.input.value : newValue;
|
|
3569
3606
|
}
|
|
3570
3607
|
else if (allItemsAreOptions(this.items)) {
|
|
@@ -3581,7 +3618,7 @@ const MgInputSelect = class {
|
|
|
3581
3618
|
this.options = [];
|
|
3582
3619
|
}
|
|
3583
3620
|
// String array
|
|
3584
|
-
else if (index_es.
|
|
3621
|
+
else if (index_es.Dt(newValue)) {
|
|
3585
3622
|
if (typeof this.value === 'string')
|
|
3586
3623
|
this.valueExist = newValue.includes(this.value);
|
|
3587
3624
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
@@ -3599,7 +3636,7 @@ const MgInputSelect = class {
|
|
|
3599
3636
|
}
|
|
3600
3637
|
}
|
|
3601
3638
|
else {
|
|
3602
|
-
throw new Error(`<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option. Passed value: ${index_es.
|
|
3639
|
+
throw new Error(`<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option. Passed value: ${index_es.Gt(newValue)}.`);
|
|
3603
3640
|
}
|
|
3604
3641
|
}
|
|
3605
3642
|
watchReadonly(newValue) {
|
|
@@ -3664,7 +3701,7 @@ const MgInputSelect = class {
|
|
|
3664
3701
|
if (typeof valid !== 'boolean') {
|
|
3665
3702
|
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean.');
|
|
3666
3703
|
}
|
|
3667
|
-
else if (!index_es.
|
|
3704
|
+
else if (!index_es.De(errorMessage)) {
|
|
3668
3705
|
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string.');
|
|
3669
3706
|
}
|
|
3670
3707
|
else {
|
|
@@ -3728,7 +3765,7 @@ const MgInputSelect = class {
|
|
|
3728
3765
|
* @returns HTML Element
|
|
3729
3766
|
*/
|
|
3730
3767
|
render() {
|
|
3731
|
-
return (index.h("mg-input", { key: '
|
|
3768
|
+
return (index.h("mg-input", { key: '8fc77d20fe8fda510ea0352bc7246fafea31f8d8', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
3732
3769
|
if (el !== null)
|
|
3733
3770
|
this.input = el;
|
|
3734
3771
|
} }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
@@ -3744,7 +3781,7 @@ const MgInputSelect = class {
|
|
|
3744
3781
|
"mgWidth": ["watchMgWidth"]
|
|
3745
3782
|
}; }
|
|
3746
3783
|
};
|
|
3747
|
-
MgInputSelect.style =
|
|
3784
|
+
MgInputSelect.style = mgInputSelectCss;
|
|
3748
3785
|
|
|
3749
3786
|
/**
|
|
3750
3787
|
* TextType from text types
|
|
@@ -3754,8 +3791,7 @@ const helpTextTypes = ['email', 'emails', 'url'];
|
|
|
3754
3791
|
// Define possible text types
|
|
3755
3792
|
const textTypes = ['text', 'search', 'tel', ...helpTextTypes];
|
|
3756
3793
|
|
|
3757
|
-
const mgInputTextCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input.mg-c-input--display-character-left mg-character-left{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__with-character-left{position:relative;width:100%}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left .mg-c-input__box{padding-right:max(var(--mg-c-character-left-message-length)*(.35ch + .3rem) + var(--mg-b-size-16)*clamp(0,var(--mg-c-character-left-message-length),1),var(--mg-b-size-8))}.mg-c-input__with-character-left mg-character-left{position:absolute;top:50%;right:var(--mg-b-size-8);display:none;font-size:var(--mg-b-font-size-small);opacity:.6;transform:translateY(-50%)}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{display:block}
|
|
3758
|
-
const MgInputTextStyle0 = mgInputTextCss;
|
|
3794
|
+
const mgInputTextCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input.mg-c-input--display-character-left mg-character-left{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__with-character-left{position:relative;width:100%}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left .mg-c-input__box{padding-right:max(var(--mg-c-character-left-message-length)*(.35ch + .3rem) + var(--mg-b-size-16)*clamp(0,var(--mg-c-character-left-message-length),1),var(--mg-b-size-8))}.mg-c-input__with-character-left mg-character-left{position:absolute;top:50%;right:var(--mg-b-size-8);display:none;font-size:var(--mg-b-font-size-small);opacity:.6;transform:translateY(-50%)}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{display:block}";
|
|
3759
3795
|
|
|
3760
3796
|
/**
|
|
3761
3797
|
* Check if object is an option
|
|
@@ -3768,12 +3804,12 @@ const isOption$1 = (option) => typeof option === 'object' && typeof option.title
|
|
|
3768
3804
|
* @param options - Datalist options to check.
|
|
3769
3805
|
* @returns True if datalist is well structured.
|
|
3770
3806
|
*/
|
|
3771
|
-
const isDatalistOptions = (options) => index_es.
|
|
3807
|
+
const isDatalistOptions = (options) => index_es.Dt(options) || (Array.isArray(options) && options.every(isOption$1));
|
|
3772
3808
|
const MgInputText = class {
|
|
3773
3809
|
constructor(hostRef) {
|
|
3774
3810
|
index.registerInstance(this, hostRef);
|
|
3775
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
3776
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
3811
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
3812
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
3777
3813
|
/************
|
|
3778
3814
|
* Internal *
|
|
3779
3815
|
************/
|
|
@@ -3791,13 +3827,17 @@ const MgInputText = class {
|
|
|
3791
3827
|
*/
|
|
3792
3828
|
this.name = this.identifier;
|
|
3793
3829
|
/**
|
|
3794
|
-
*
|
|
3830
|
+
* Define if label is displayed on top
|
|
3795
3831
|
*/
|
|
3796
|
-
this.
|
|
3832
|
+
this.labelOnTop = false;
|
|
3797
3833
|
/**
|
|
3798
3834
|
* Define if label is visible
|
|
3799
3835
|
*/
|
|
3800
3836
|
this.labelHide = false;
|
|
3837
|
+
/**
|
|
3838
|
+
* Input type
|
|
3839
|
+
*/
|
|
3840
|
+
this.type = 'text';
|
|
3801
3841
|
/**
|
|
3802
3842
|
* Input max length
|
|
3803
3843
|
*/
|
|
@@ -3829,13 +3869,13 @@ const MgInputText = class {
|
|
|
3829
3869
|
/**
|
|
3830
3870
|
* Component classes
|
|
3831
3871
|
*/
|
|
3832
|
-
this.classCollection = new index_es.
|
|
3872
|
+
this.classCollection = new index_es.Zt(['mg-c-input--text']);
|
|
3833
3873
|
/**
|
|
3834
3874
|
* Validate pattern configuration
|
|
3835
3875
|
*/
|
|
3836
3876
|
this.validatePattern = () => {
|
|
3837
3877
|
if ((this.pattern !== undefined || this.patternErrorMessage !== undefined) && // At least one is defined
|
|
3838
|
-
(!index_es.
|
|
3878
|
+
(!index_es.De(this.pattern) || (!helpTextTypes.includes(this.type) && !index_es.De(this.patternErrorMessage))) // Both must be defined
|
|
3839
3879
|
) {
|
|
3840
3880
|
throw new Error(`<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${this.pattern}'" and "patternErrorMessage='${this.patternErrorMessage}'".`);
|
|
3841
3881
|
}
|
|
@@ -3855,7 +3895,7 @@ const MgInputText = class {
|
|
|
3855
3895
|
*/
|
|
3856
3896
|
this.handleFocus = () => {
|
|
3857
3897
|
this.classCollection.add(this.classFocus);
|
|
3858
|
-
this.classCollection = new index_es.
|
|
3898
|
+
this.classCollection = new index_es.Zt(this.classCollection.classes);
|
|
3859
3899
|
};
|
|
3860
3900
|
/**
|
|
3861
3901
|
* Handle blur event
|
|
@@ -3863,7 +3903,7 @@ const MgInputText = class {
|
|
|
3863
3903
|
this.handleBlur = () => {
|
|
3864
3904
|
// Manage focus
|
|
3865
3905
|
this.classCollection.delete(this.classFocus);
|
|
3866
|
-
this.classCollection = new index_es.
|
|
3906
|
+
this.classCollection = new index_es.Zt(this.classCollection.classes);
|
|
3867
3907
|
// Display Error
|
|
3868
3908
|
this.handlerInProgress = 'blur';
|
|
3869
3909
|
this.displayError().finally(() => {
|
|
@@ -3891,11 +3931,11 @@ const MgInputText = class {
|
|
|
3891
3931
|
}
|
|
3892
3932
|
// Does not match type (email, emails, tel, url, etc.)
|
|
3893
3933
|
else if (!this.valid && this.input.validity.typeMismatch) {
|
|
3894
|
-
this.errorMessage =
|
|
3934
|
+
this.errorMessage = this.messages.input.text.errors.typeMismatch[this.type];
|
|
3895
3935
|
}
|
|
3896
3936
|
// Does not match pattern
|
|
3897
3937
|
else if (!this.valid && this.input.validity.patternMismatch) {
|
|
3898
|
-
this.errorMessage = (_a = this.patternErrorMessage) !== null && _a !== void 0 ? _a :
|
|
3938
|
+
this.errorMessage = (_a = this.patternErrorMessage) !== null && _a !== void 0 ? _a : this.messages.input.text.errors.typeMismatch[this.type];
|
|
3899
3939
|
}
|
|
3900
3940
|
// required
|
|
3901
3941
|
else if (!this.valid && this.input.validity.valueMissing) {
|
|
@@ -3958,7 +3998,7 @@ const MgInputText = class {
|
|
|
3958
3998
|
}
|
|
3959
3999
|
validateDatalistoptions(newValue) {
|
|
3960
4000
|
if (Boolean(newValue) && !isDatalistOptions(newValue)) {
|
|
3961
|
-
throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${index_es.
|
|
4001
|
+
throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${index_es.Gt(newValue)}.`);
|
|
3962
4002
|
}
|
|
3963
4003
|
}
|
|
3964
4004
|
watchReadonly(newValue) {
|
|
@@ -3996,7 +4036,7 @@ const MgInputText = class {
|
|
|
3996
4036
|
this.validatePattern();
|
|
3997
4037
|
}
|
|
3998
4038
|
watchHelpText(newValue) {
|
|
3999
|
-
if (!index_es.
|
|
4039
|
+
if (!index_es.De(newValue) && helpTextTypes.includes(this.type)) {
|
|
4000
4040
|
this.helpText = this.messages.input.text.helpText[this.type];
|
|
4001
4041
|
}
|
|
4002
4042
|
}
|
|
@@ -4037,7 +4077,7 @@ const MgInputText = class {
|
|
|
4037
4077
|
if (typeof valid !== 'boolean') {
|
|
4038
4078
|
throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean.');
|
|
4039
4079
|
}
|
|
4040
|
-
else if (!index_es.
|
|
4080
|
+
else if (!index_es.De(errorMessage)) {
|
|
4041
4081
|
throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string.');
|
|
4042
4082
|
}
|
|
4043
4083
|
else {
|
|
@@ -4103,7 +4143,7 @@ const MgInputText = class {
|
|
|
4103
4143
|
* @returns HTML Element
|
|
4104
4144
|
*/
|
|
4105
4145
|
render() {
|
|
4106
|
-
return (index.h("mg-input", { key: '
|
|
4146
|
+
return (index.h("mg-input", { key: 'ef5b732baa01518f61610cfc36dc8574782f12cc', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
|
|
4107
4147
|
? this.value && this.renderReadonly()
|
|
4108
4148
|
: [
|
|
4109
4149
|
index.h("div", { key: "input", class: "mg-c-input__with-character-left", style: {
|
|
@@ -4130,16 +4170,15 @@ const MgInputText = class {
|
|
|
4130
4170
|
"helpText": ["watchHelpText"]
|
|
4131
4171
|
}; }
|
|
4132
4172
|
};
|
|
4133
|
-
MgInputText.style =
|
|
4173
|
+
MgInputText.style = mgInputTextCss;
|
|
4134
4174
|
|
|
4135
|
-
const mgInputTextareaCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input.mg-c-input--display-character-left mg-character-left{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__input{align-items:start}.mg-c-input__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input__readonly-value{white-space:pre-line}.mg-c-input__with-character-left{flex-grow:1}.mg-c-input__with-character-left mg-character-left{display:block;text-align:end;visibility:hidden}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}";
|
|
4136
|
-
const MgInputTextareaStyle0 = mgInputTextareaCss;
|
|
4175
|
+
const mgInputTextareaCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input.mg-c-input--display-character-left mg-character-left{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__input{align-items:start}.mg-c-input__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input__readonly-value{white-space:pre-line}.mg-c-input__with-character-left{flex-grow:1}.mg-c-input__with-character-left mg-character-left{display:block;text-align:end;visibility:hidden}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}";
|
|
4137
4176
|
|
|
4138
4177
|
const MgInputTextarea = class {
|
|
4139
4178
|
constructor(hostRef) {
|
|
4140
4179
|
index.registerInstance(this, hostRef);
|
|
4141
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
4142
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
4180
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
4181
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
4143
4182
|
/************
|
|
4144
4183
|
* Internal *
|
|
4145
4184
|
************/
|
|
@@ -4153,6 +4192,10 @@ const MgInputTextarea = class {
|
|
|
4153
4192
|
* If not set the value equals the identifier
|
|
4154
4193
|
*/
|
|
4155
4194
|
this.name = this.identifier;
|
|
4195
|
+
/**
|
|
4196
|
+
* Define if label is displayed on top
|
|
4197
|
+
*/
|
|
4198
|
+
this.labelOnTop = false;
|
|
4156
4199
|
/**
|
|
4157
4200
|
* Define if label is visible
|
|
4158
4201
|
*/
|
|
@@ -4196,7 +4239,7 @@ const MgInputTextarea = class {
|
|
|
4196
4239
|
/**
|
|
4197
4240
|
* Component classes
|
|
4198
4241
|
*/
|
|
4199
|
-
this.classCollection = new index_es.
|
|
4242
|
+
this.classCollection = new index_es.Zt(['mg-c-input--textarea']);
|
|
4200
4243
|
/**
|
|
4201
4244
|
* Handle input event
|
|
4202
4245
|
*/
|
|
@@ -4212,7 +4255,7 @@ const MgInputTextarea = class {
|
|
|
4212
4255
|
*/
|
|
4213
4256
|
this.handleFocus = () => {
|
|
4214
4257
|
this.classCollection.add(this.classFocus);
|
|
4215
|
-
this.classCollection = new index_es.
|
|
4258
|
+
this.classCollection = new index_es.Zt(this.classCollection.classes);
|
|
4216
4259
|
};
|
|
4217
4260
|
/**
|
|
4218
4261
|
* Handle blur event
|
|
@@ -4220,7 +4263,7 @@ const MgInputTextarea = class {
|
|
|
4220
4263
|
this.handleBlur = () => {
|
|
4221
4264
|
// Manage focus
|
|
4222
4265
|
this.classCollection.delete(this.classFocus);
|
|
4223
|
-
this.classCollection = new index_es.
|
|
4266
|
+
this.classCollection = new index_es.Zt(this.classCollection.classes);
|
|
4224
4267
|
// Display Error
|
|
4225
4268
|
this.handlerInProgress = 'blur';
|
|
4226
4269
|
this.displayError().finally(() => {
|
|
@@ -4298,8 +4341,8 @@ const MgInputTextarea = class {
|
|
|
4298
4341
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
4299
4342
|
}
|
|
4300
4343
|
validatePattern(newValue) {
|
|
4301
|
-
if (newValue !== undefined && !(index_es.
|
|
4302
|
-
throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${index_es.
|
|
4344
|
+
if (newValue !== undefined && !(index_es.De(this.pattern) && index_es.De(this.patternErrorMessage))) {
|
|
4345
|
+
throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${index_es.Gt(this.pattern)}'" and "patternErrorMessage='${index_es.Gt(this.patternErrorMessage)}'".`);
|
|
4303
4346
|
}
|
|
4304
4347
|
}
|
|
4305
4348
|
validatecharacterLeftHide(newValue) {
|
|
@@ -4341,7 +4384,7 @@ const MgInputTextarea = class {
|
|
|
4341
4384
|
if (typeof valid !== 'boolean') {
|
|
4342
4385
|
throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean.');
|
|
4343
4386
|
}
|
|
4344
|
-
else if (!index_es.
|
|
4387
|
+
else if (!index_es.De(errorMessage)) {
|
|
4345
4388
|
throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string.');
|
|
4346
4389
|
}
|
|
4347
4390
|
else {
|
|
@@ -4403,7 +4446,7 @@ const MgInputTextarea = class {
|
|
|
4403
4446
|
* @returns HTML Element
|
|
4404
4447
|
*/
|
|
4405
4448
|
render() {
|
|
4406
|
-
return (index.h("mg-input", { key: '
|
|
4449
|
+
return (index.h("mg-input", { key: '6ae7c6f9cfce48886d68e079ed6ac7e5b6e52eb4', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && index.h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (index.h("div", { class: "mg-c-input__with-character-left" }, index.h("textarea", { class: {
|
|
4407
4450
|
'mg-c-input__box': true,
|
|
4408
4451
|
'mg-c-input__box--width': true,
|
|
4409
4452
|
'mg-c-input__box--resizable': this.resizable === 'both',
|
|
@@ -4426,10 +4469,9 @@ const MgInputTextarea = class {
|
|
|
4426
4469
|
"characterLeftHide": ["validatecharacterLeftHide"]
|
|
4427
4470
|
}; }
|
|
4428
4471
|
};
|
|
4429
|
-
MgInputTextarea.style =
|
|
4472
|
+
MgInputTextarea.style = mgInputTextareaCss;
|
|
4430
4473
|
|
|
4431
4474
|
const mgInputTitleCss = ".mg-u-form-legacy.sc-mg-input-title{--mg-c-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk.sc-mg-input-title{color:var(--mg-b-color-danger)}legend.mg-c-input-title.sc-mg-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required.sc-mg-input-title{display:var(--mg-c-input-title-display, unset)}";
|
|
4432
|
-
const MgInputTitleStyle0 = mgInputTitleCss;
|
|
4433
4475
|
|
|
4434
4476
|
const MgInputTitle = class {
|
|
4435
4477
|
constructor(hostRef) {
|
|
@@ -4444,11 +4486,11 @@ const MgInputTitle = class {
|
|
|
4444
4486
|
this.tagName = 'label';
|
|
4445
4487
|
}
|
|
4446
4488
|
validateIdentifier(newValue) {
|
|
4447
|
-
if (!index_es.
|
|
4489
|
+
if (!index_es.De(newValue)) {
|
|
4448
4490
|
throw new Error('<mg-input-title> prop "identifier" is required.');
|
|
4449
4491
|
}
|
|
4450
|
-
else if (!index_es.
|
|
4451
|
-
console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
4492
|
+
else if (!index_es.Ut(newValue)) {
|
|
4493
|
+
console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${index_es.Gt(newValue)}.`);
|
|
4452
4494
|
}
|
|
4453
4495
|
}
|
|
4454
4496
|
validateIsLegend(newValue) {
|
|
@@ -4478,10 +4520,9 @@ const MgInputTitle = class {
|
|
|
4478
4520
|
"isLegend": ["validateIsLegend"]
|
|
4479
4521
|
}; }
|
|
4480
4522
|
};
|
|
4481
|
-
MgInputTitle.style =
|
|
4523
|
+
MgInputTitle.style = mgInputTitleCss;
|
|
4482
4524
|
|
|
4483
4525
|
const mgInputToggleCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:0;border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));background-color:unset;color:var(--mg-b-color-dark);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-app);font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:var(--mg-b-size-4);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-light);cursor:pointer;font-family:var(--mg-b-font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-info);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));height:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:var(--mg-b-color-neutral-30);color:var(--mg-b-color-dark);font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}";
|
|
4484
|
-
const MgInputToggleStyle0 = mgInputToggleCss;
|
|
4485
4526
|
|
|
4486
4527
|
/**
|
|
4487
4528
|
* type Option validation function
|
|
@@ -4492,8 +4533,8 @@ const isOption = (option) => typeof option === 'object' && typeof option.title =
|
|
|
4492
4533
|
const MgInputToggle = class {
|
|
4493
4534
|
constructor(hostRef) {
|
|
4494
4535
|
index.registerInstance(this, hostRef);
|
|
4495
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
4496
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
4536
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
4537
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
4497
4538
|
/************
|
|
4498
4539
|
* Internal *
|
|
4499
4540
|
************/
|
|
@@ -4506,6 +4547,10 @@ const MgInputToggle = class {
|
|
|
4506
4547
|
* If not set the value equals the identifier
|
|
4507
4548
|
*/
|
|
4508
4549
|
this.name = this.identifier;
|
|
4550
|
+
/**
|
|
4551
|
+
* Define if label is displayed on top
|
|
4552
|
+
*/
|
|
4553
|
+
this.labelOnTop = false;
|
|
4509
4554
|
/**
|
|
4510
4555
|
* Define if label is visible
|
|
4511
4556
|
*/
|
|
@@ -4533,7 +4578,7 @@ const MgInputToggle = class {
|
|
|
4533
4578
|
/**
|
|
4534
4579
|
* Component classes
|
|
4535
4580
|
*/
|
|
4536
|
-
this.classCollection = new index_es.
|
|
4581
|
+
this.classCollection = new index_es.Zt(['mg-c-input--toggle']);
|
|
4537
4582
|
/**
|
|
4538
4583
|
* Checked internal value
|
|
4539
4584
|
*/
|
|
@@ -4594,10 +4639,10 @@ const MgInputToggle = class {
|
|
|
4594
4639
|
}
|
|
4595
4640
|
validateItems(newValue) {
|
|
4596
4641
|
if (typeof newValue === 'object' && this.items.length !== 2) {
|
|
4597
|
-
throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${index_es.
|
|
4642
|
+
throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${index_es.Gt(newValue)}.`);
|
|
4598
4643
|
}
|
|
4599
4644
|
// String array
|
|
4600
|
-
else if (index_es.
|
|
4645
|
+
else if (index_es.Dt(newValue)) {
|
|
4601
4646
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
4602
4647
|
}
|
|
4603
4648
|
// Object array
|
|
@@ -4605,7 +4650,7 @@ const MgInputToggle = class {
|
|
|
4605
4650
|
this.options = newValue;
|
|
4606
4651
|
}
|
|
4607
4652
|
else {
|
|
4608
|
-
throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${index_es.
|
|
4653
|
+
throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${index_es.Gt(newValue)}.`);
|
|
4609
4654
|
}
|
|
4610
4655
|
}
|
|
4611
4656
|
watchIsOnOff(newValue) {
|
|
@@ -4653,7 +4698,7 @@ const MgInputToggle = class {
|
|
|
4653
4698
|
if (typeof valid !== 'boolean') {
|
|
4654
4699
|
throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');
|
|
4655
4700
|
}
|
|
4656
|
-
else if (!index_es.
|
|
4701
|
+
else if (!index_es.De(errorMessage)) {
|
|
4657
4702
|
throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
|
|
4658
4703
|
}
|
|
4659
4704
|
else {
|
|
@@ -4720,7 +4765,7 @@ const MgInputToggle = class {
|
|
|
4720
4765
|
*/
|
|
4721
4766
|
render() {
|
|
4722
4767
|
const checkedItem = this.getCheckedItem(this.checked);
|
|
4723
|
-
return (index.h("mg-input", { key: '
|
|
4768
|
+
return (index.h("mg-input", { key: '3886ea7cfdb32db9bbc2b7d38760c91aac30c004', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && index.h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (index.h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-1" })), index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-2" }))))));
|
|
4724
4769
|
}
|
|
4725
4770
|
get element() { return index.getElement(this); }
|
|
4726
4771
|
static get watchers() { return {
|
|
@@ -4733,7 +4778,7 @@ const MgInputToggle = class {
|
|
|
4733
4778
|
"checked": ["handleChecked"]
|
|
4734
4779
|
}; }
|
|
4735
4780
|
};
|
|
4736
|
-
MgInputToggle.style =
|
|
4781
|
+
MgInputToggle.style = mgInputToggleCss;
|
|
4737
4782
|
|
|
4738
4783
|
/**
|
|
4739
4784
|
*
|
|
@@ -4793,8 +4838,8 @@ class OverflowBehavior {
|
|
|
4793
4838
|
else if (!this.isMoreElement(item) && item.parentElement !== this.parentElement)
|
|
4794
4839
|
this.parentElement.insertBefore(item, this.itemMoreElement);
|
|
4795
4840
|
};
|
|
4796
|
-
if (
|
|
4797
|
-
throw new Error('OverflowBehavior - all
|
|
4841
|
+
if (this.parentElement === null || this.itemMoreElement === null || this.itemMoreContainerElement === null) {
|
|
4842
|
+
throw new Error('OverflowBehavior - all constructor params are required');
|
|
4798
4843
|
}
|
|
4799
4844
|
const items = Array.from(this.parentElement.children);
|
|
4800
4845
|
this._resizeObserver = new ResizeObserver(entries => {
|
|
@@ -4807,7 +4852,7 @@ class OverflowBehavior {
|
|
|
4807
4852
|
let accWidth = 0;
|
|
4808
4853
|
items.forEach((item, index) => {
|
|
4809
4854
|
accWidth += item.offsetWidth;
|
|
4810
|
-
if (index)
|
|
4855
|
+
if (index > 0)
|
|
4811
4856
|
this.toggleItem(item, this.isOverflowElement(accWidth, item));
|
|
4812
4857
|
});
|
|
4813
4858
|
});
|
|
@@ -4816,7 +4861,6 @@ class OverflowBehavior {
|
|
|
4816
4861
|
}
|
|
4817
4862
|
|
|
4818
4863
|
const mgItemMoreCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host:not([hidden]){display:flex}";
|
|
4819
|
-
const MgItemMoreStyle0 = mgItemMoreCss;
|
|
4820
4864
|
|
|
4821
4865
|
const MgItemMore = class {
|
|
4822
4866
|
constructor(hostRef) {
|
|
@@ -4836,17 +4880,17 @@ const MgItemMore = class {
|
|
|
4836
4880
|
}
|
|
4837
4881
|
validateIcon(newValue) {
|
|
4838
4882
|
if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
|
|
4839
|
-
throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${index_es.
|
|
4883
|
+
throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${index_es.Gt(newValue)}.`);
|
|
4840
4884
|
}
|
|
4841
4885
|
validateSlotLabel(newValue) {
|
|
4842
4886
|
if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
|
|
4843
|
-
throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${index_es.
|
|
4887
|
+
throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${index_es.Gt(newValue)}.`);
|
|
4844
4888
|
else if (typeof newValue.label !== 'string')
|
|
4845
4889
|
this.slotlabel.label = this.messages.menuLabel;
|
|
4846
4890
|
}
|
|
4847
4891
|
validateSize(newValue) {
|
|
4848
4892
|
if (newValue && !sizes$5.includes(newValue))
|
|
4849
|
-
throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${index_es.
|
|
4893
|
+
throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${index_es.Gt(newValue)}.`);
|
|
4850
4894
|
}
|
|
4851
4895
|
/*************
|
|
4852
4896
|
* Lifecycle *
|
|
@@ -4893,7 +4937,7 @@ const MgItemMore = class {
|
|
|
4893
4937
|
*/
|
|
4894
4938
|
render() {
|
|
4895
4939
|
const menuItemIdentifier = 'mg-item-more';
|
|
4896
|
-
return (index.h(index.Host, { key: '
|
|
4940
|
+
return (index.h(index.Host, { key: 'd7811bdedea2159c351185958976bda08c21ba20', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (index.h("mg-menu-item", { key: '66f7fe8056bf40a034c49ea1b2f97b3eff8cedc5', "data-overflow-more": true, "data-size": this.parentMenu.size, "data-style-direction": directions$1.HORIZONTAL, identifier: menuItemIdentifier }, index.h("mg-icon", { key: '06c7e052299f37d913605c2d0e938eaee6b820ba', icon: this.icon.icon, size: this.size, slot: "image" }), index.h("span", { key: '9b8e2da9edb472f6822e8ed1878d1540e459c96a', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { key: '5b8f0a9b0208bf881b5f5348d296a80dd2e60f0b', direction: directions$1.VERTICAL, label: this.messages.menuLabel, size: this.size, ref: ref => {
|
|
4897
4941
|
if (ref !== null)
|
|
4898
4942
|
this.itemMoreContainer = ref;
|
|
4899
4943
|
} })))));
|
|
@@ -4905,10 +4949,9 @@ const MgItemMore = class {
|
|
|
4905
4949
|
"size": ["validateSize"]
|
|
4906
4950
|
}; }
|
|
4907
4951
|
};
|
|
4908
|
-
MgItemMore.style =
|
|
4952
|
+
MgItemMore.style = mgItemMoreCss;
|
|
4909
4953
|
|
|
4910
4954
|
const mgMenuCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-menu-color-background: Defines the background color of the menu. Unset by default, fallback on `--mg-b-color-light`.\n */:host{display:inline-flex;width:100%;min-width:0;background-color:var(--mg-c-menu-color-background, var(--mg-b-color-light))}:host([direction=vertical]){display:flex;height:100%;flex-direction:column;overflow-y:auto}";
|
|
4911
|
-
const MgMenuStyle0 = mgMenuCss;
|
|
4912
4955
|
|
|
4913
4956
|
const MgMenu = class {
|
|
4914
4957
|
constructor(hostRef) {
|
|
@@ -4920,7 +4963,7 @@ const MgMenu = class {
|
|
|
4920
4963
|
/**
|
|
4921
4964
|
* Component display direction.
|
|
4922
4965
|
*/
|
|
4923
|
-
this.direction =
|
|
4966
|
+
this.direction = 'horizontal';
|
|
4924
4967
|
/**
|
|
4925
4968
|
* Define mg-menu size
|
|
4926
4969
|
*/
|
|
@@ -4941,7 +4984,7 @@ const MgMenu = class {
|
|
|
4941
4984
|
var _a, _b;
|
|
4942
4985
|
const menuItems = Array.from(menu.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
|
|
4943
4986
|
const itemMoreMenuItem = (_b = (_a = menu.querySelector('mg-item-more')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item');
|
|
4944
|
-
if (itemMoreMenuItem) {
|
|
4987
|
+
if (itemMoreMenuItem !== null && itemMoreMenuItem !== undefined) {
|
|
4945
4988
|
menuItems.push(itemMoreMenuItem);
|
|
4946
4989
|
}
|
|
4947
4990
|
return menuItems;
|
|
@@ -4980,12 +5023,12 @@ const MgMenu = class {
|
|
|
4980
5023
|
}
|
|
4981
5024
|
validateLabel(newValue) {
|
|
4982
5025
|
if (newValue === undefined && !this.element.hasAttribute('aria-label')) {
|
|
4983
|
-
throw new Error(`<${this.name}> prop "label" is required. Passed value: ${index_es.
|
|
5026
|
+
throw new Error(`<${this.name}> prop "label" is required. Passed value: ${index_es.Gt(newValue)}.`);
|
|
4984
5027
|
}
|
|
4985
5028
|
}
|
|
4986
5029
|
validateDirection(newValue) {
|
|
4987
5030
|
if (![directions$1.VERTICAL, directions$1.HORIZONTAL].includes(newValue)) {
|
|
4988
|
-
throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$1.HORIZONTAL}, ${directions$1.VERTICAL}. Passed value: ${index_es.
|
|
5031
|
+
throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$1.HORIZONTAL}, ${directions$1.VERTICAL}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
4989
5032
|
}
|
|
4990
5033
|
else {
|
|
4991
5034
|
this.updateMenuItems();
|
|
@@ -5001,7 +5044,7 @@ const MgMenu = class {
|
|
|
5001
5044
|
}
|
|
5002
5045
|
validateSize(newValue) {
|
|
5003
5046
|
if (!sizes$5.includes(newValue)) {
|
|
5004
|
-
throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$5.join(', ')}. Passed value: ${index_es.
|
|
5047
|
+
throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$5.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5005
5048
|
}
|
|
5006
5049
|
}
|
|
5007
5050
|
/**
|
|
@@ -5017,7 +5060,7 @@ const MgMenu = class {
|
|
|
5017
5060
|
if (focusedItem === itemToWatch)
|
|
5018
5061
|
return;
|
|
5019
5062
|
// reset expanded on previous active menu item
|
|
5020
|
-
if (focusedItem)
|
|
5063
|
+
if (focusedItem !== null)
|
|
5021
5064
|
focusedItem.removeAttribute('data-has-focus');
|
|
5022
5065
|
// update focusedMenuItem with new value
|
|
5023
5066
|
itemToWatch.setAttribute('data-has-focus', 'true');
|
|
@@ -5048,15 +5091,15 @@ const MgMenu = class {
|
|
|
5048
5091
|
const isElementChild = (element) => {
|
|
5049
5092
|
if (element === this.element)
|
|
5050
5093
|
return true;
|
|
5051
|
-
else if (
|
|
5094
|
+
else if (element.parentElement === null)
|
|
5052
5095
|
return false;
|
|
5053
5096
|
else
|
|
5054
5097
|
return isElementChild(element.parentElement);
|
|
5055
5098
|
};
|
|
5056
|
-
if (
|
|
5099
|
+
if (event.target.closest('mg-menu') === null || !isElementChild(event.target)) {
|
|
5057
5100
|
const focusedItem = this.element.querySelector('[data-has-focus]');
|
|
5058
5101
|
// reset expanded on previous active menu item
|
|
5059
|
-
if (focusedItem)
|
|
5102
|
+
if (focusedItem !== null)
|
|
5060
5103
|
focusedItem.removeAttribute('data-has-focus');
|
|
5061
5104
|
}
|
|
5062
5105
|
});
|
|
@@ -5069,7 +5112,7 @@ const MgMenu = class {
|
|
|
5069
5112
|
* @returns HTML Element
|
|
5070
5113
|
*/
|
|
5071
5114
|
render() {
|
|
5072
|
-
return (index.h(index.Host, { key: '
|
|
5115
|
+
return (index.h(index.Host, { key: '027cd6b867d852c1d238ffedd9ea9c8d40eb82f0', role: "list", "aria-label": this.label }, index.h("slot", { key: 'cb6dfa4a26800f3dd3fc820954a45aad025cc4a3' })));
|
|
5073
5116
|
}
|
|
5074
5117
|
get element() { return index.getElement(this); }
|
|
5075
5118
|
static get watchers() { return {
|
|
@@ -5079,16 +5122,15 @@ const MgMenu = class {
|
|
|
5079
5122
|
"size": ["validateSize"]
|
|
5080
5123
|
}; }
|
|
5081
5124
|
};
|
|
5082
|
-
MgMenu.style =
|
|
5125
|
+
MgMenu.style = mgMenuCss;
|
|
5083
5126
|
|
|
5084
5127
|
const mgMenuItemCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-menu-item-color: Defines menu item global color, used for bottom line and active tabs. Default value: `--mg-b-color-app`.\n * @prop --mg-c-menu-item-color-text: Defines the color of the menu item. Unset by default, fallback on `--mg-b-color-dark`.\n * @prop --mg-c-menu-item-navigation-button-max-width: Defines the max-width property for the navigation button. Unset by default.\n */.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{height:var(--mg-b-size-40);padding:var(--mg-b-size-12) var(--mg-b-size-16)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--horizontal{padding-bottom:var(--mg-b-size-12)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--vertical{padding-left:var(--mg-b-size-16)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{height:var(--mg-b-size-48);padding:var(--mg-b-size-12) var(--mg-b-size-32)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:var(--mg-b-font-size-h4)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--horizontal{padding-bottom:var(--mg-b-size-12)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--vertical{padding-left:var(--mg-b-size-32)}.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{height:var(--mg-b-size-72);padding:var(--mg-b-size-12) var(--mg-b-size-40)}.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge ::slotted([slot=metadata]){font-size:var(--mg-b-font-size-h4)}.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge.mg-c-menu-item__navigation-button--horizontal{padding-bottom:var(--mg-b-size-12)}.mg-c-menu-item.mg-c-menu-item--size-xlarge .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge.mg-c-menu-item__navigation-button--vertical{padding-left:var(--mg-b-size-40)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:var(--mg-c-menu-item-color-text, var(--mg-b-color-dark));column-gap:var(--mg-c-menu-item-navigation-button-column-gap, var(--mg-b-size-8));cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled),.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled){background-color:color-mix(in srgb, var(--mg-c-menu-item-color), transparent 90%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:var(--mg-c-menu-item-color);font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal{box-shadow:inset 0 calc(-1*var(--mg-b-size-4)) var(--mg-c-menu-item-color)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{box-shadow:inset var(--mg-b-size-4) 0 var(--mg-c-menu-item-color)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(1*var(--mg-b-size-16))}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:10}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(2*var(--mg-b-size-16))}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:20}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(3*var(--mg-b-size-16))}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:30}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(4*var(--mg-b-size-16))}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:40}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(5*var(--mg-b-size-16))}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:50}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(6*var(--mg-b-size-16))}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:60}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(1*var(--mg-b-size-32))}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:10}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(2*var(--mg-b-size-32))}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:20}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(3*var(--mg-b-size-32))}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:30}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(4*var(--mg-b-size-32))}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:40}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(5*var(--mg-b-size-32))}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:50}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(6*var(--mg-b-size-32))}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:60}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(1*var(--mg-b-size-40))}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:10}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(2*var(--mg-b-size-40))}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:20}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(3*var(--mg-b-size-40))}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:30}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(4*var(--mg-b-size-40))}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:40}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(5*var(--mg-b-size-40))}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:50}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-xlarge{padding-left:calc(6*var(--mg-b-size-40))}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:60}.mg-c-menu-item{max-width:var(--mg-c-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:var(--mg-b-size-8);font-size:var(--mg-b-font-size)}.mg-c-menu-item__navigation-button-new-tab{margin-left:var(--mg-b-size-4)}.mg-c-menu-item__navigation-button-chevron{display:var(--mg-c-menu-item-chevron-display);margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}:host{position:relative;display:flex;--mg-c-popover-padding-vertical:0;--mg-c-popover-padding-horizontal:0;--mg-c-popover-max-width:unset}:host([data-style-direction=vertical]){flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__navigation-button{width:100%}:host([data-style-direction=vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction=vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-overflow-more]){--mg-c-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-chevron{--mg-c-menu-item-chevron-display:none}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-c-menu-item-navigation-button-column-gap:var(--mg-b-size-8)}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level{background-color:var(--mg-b-color-light)}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:var(--mg-b-size-8) 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
|
|
5085
|
-
const MgMenuItemStyle0 = mgMenuItemCss;
|
|
5086
5128
|
|
|
5087
5129
|
const MgMenuItem = class {
|
|
5088
5130
|
constructor(hostRef) {
|
|
5089
5131
|
index.registerInstance(this, hostRef);
|
|
5090
|
-
this.itemLoaded = index.createEvent(this, "item-loaded"
|
|
5091
|
-
this.itemUpdated = index.createEvent(this, "item-updated"
|
|
5132
|
+
this.itemLoaded = index.createEvent(this, "item-loaded");
|
|
5133
|
+
this.itemUpdated = index.createEvent(this, "item-updated");
|
|
5092
5134
|
/************
|
|
5093
5135
|
* Internal *
|
|
5094
5136
|
************/
|
|
@@ -5100,11 +5142,11 @@ const MgMenuItem = class {
|
|
|
5100
5142
|
/**
|
|
5101
5143
|
* Identifier is used to control mg-popover
|
|
5102
5144
|
*/
|
|
5103
|
-
this.identifier = index_es.
|
|
5145
|
+
this.identifier = index_es.Pt('mg-menu-item');
|
|
5104
5146
|
/**
|
|
5105
5147
|
* Define menu-item status.
|
|
5106
5148
|
*/
|
|
5107
|
-
this.status =
|
|
5149
|
+
this.status = 'visible';
|
|
5108
5150
|
/**
|
|
5109
5151
|
* Define menu-item content expanded.
|
|
5110
5152
|
*/
|
|
@@ -5119,7 +5161,7 @@ const MgMenuItem = class {
|
|
|
5119
5161
|
/**
|
|
5120
5162
|
* Component button classes
|
|
5121
5163
|
*/
|
|
5122
|
-
this.navigationButtonClassList = new index_es.
|
|
5164
|
+
this.navigationButtonClassList = new index_es.Zt([this.navigationButton]);
|
|
5123
5165
|
/**
|
|
5124
5166
|
* Does component have children.
|
|
5125
5167
|
*/
|
|
@@ -5144,7 +5186,7 @@ const MgMenuItem = class {
|
|
|
5144
5186
|
* @returns truthy if component display popover
|
|
5145
5187
|
*/
|
|
5146
5188
|
this.hasPopover = () => this.isDirection(directions$1.HORIZONTAL) &&
|
|
5147
|
-
((this.isInMainMenu() && Array.from(this.element.children).some(element =>
|
|
5189
|
+
((this.isInMainMenu() && Array.from(this.element.children).some(element => element.querySelector('[slot]') === null)) || this.isItemMore) &&
|
|
5148
5190
|
this.href === undefined;
|
|
5149
5191
|
/**
|
|
5150
5192
|
* Method to control if one of component children have active status
|
|
@@ -5158,7 +5200,7 @@ const MgMenuItem = class {
|
|
|
5158
5200
|
* Is component an interactive item
|
|
5159
5201
|
* @returns truthy if element is clickable
|
|
5160
5202
|
*/
|
|
5161
|
-
this.isInteractiveItem = () => this.hasChildren || !index_es.
|
|
5203
|
+
this.isInteractiveItem = () => this.hasChildren || !index_es.De(this.href);
|
|
5162
5204
|
/**
|
|
5163
5205
|
* Is component contextual direction match the given direction
|
|
5164
5206
|
* @param direction - in parent menu
|
|
@@ -5211,7 +5253,7 @@ const MgMenuItem = class {
|
|
|
5211
5253
|
}
|
|
5212
5254
|
['label', 'metadata'].forEach(slot => {
|
|
5213
5255
|
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
|
|
5214
|
-
if (!index_es.
|
|
5256
|
+
if (!index_es.De(element.textContent))
|
|
5215
5257
|
throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
|
|
5216
5258
|
if ((guard && !element.hasAttribute('title')) || !guard)
|
|
5217
5259
|
element.setAttribute('title', element.textContent);
|
|
@@ -5252,7 +5294,7 @@ const MgMenuItem = class {
|
|
|
5252
5294
|
// when item is the last clickable item we close the parent popover
|
|
5253
5295
|
if (!this.isInteractiveItem()) {
|
|
5254
5296
|
const closePopover = (element) => {
|
|
5255
|
-
if (
|
|
5297
|
+
if (element === null)
|
|
5256
5298
|
return;
|
|
5257
5299
|
else if (element !== this.element && element.expanded && element.shadowRoot.querySelector('mg-popover') !== null) {
|
|
5258
5300
|
element.expanded = false;
|
|
@@ -5278,8 +5320,8 @@ const MgMenuItem = class {
|
|
|
5278
5320
|
this.renderSlot = () => index.h("slot", null);
|
|
5279
5321
|
}
|
|
5280
5322
|
watchIdentifier(newValue) {
|
|
5281
|
-
if (!index_es.
|
|
5282
|
-
console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
5323
|
+
if (!index_es.Ut(newValue)) {
|
|
5324
|
+
console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5283
5325
|
}
|
|
5284
5326
|
else {
|
|
5285
5327
|
this.popoverIdentifier = `${this.identifier}-popover`;
|
|
@@ -5287,7 +5329,7 @@ const MgMenuItem = class {
|
|
|
5287
5329
|
}
|
|
5288
5330
|
watchTarget(newValue) {
|
|
5289
5331
|
if (newValue && !targets.includes(newValue)) {
|
|
5290
|
-
throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${index_es.
|
|
5332
|
+
throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5291
5333
|
}
|
|
5292
5334
|
}
|
|
5293
5335
|
watchStatus(newValue, oldValue) {
|
|
@@ -5297,7 +5339,7 @@ const MgMenuItem = class {
|
|
|
5297
5339
|
}
|
|
5298
5340
|
watchExpanded(newValue) {
|
|
5299
5341
|
if (typeof newValue !== 'boolean') {
|
|
5300
|
-
throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${index_es.
|
|
5342
|
+
throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5301
5343
|
}
|
|
5302
5344
|
else {
|
|
5303
5345
|
this.updateExpanded(newValue);
|
|
@@ -5346,7 +5388,7 @@ const MgMenuItem = class {
|
|
|
5346
5388
|
*/
|
|
5347
5389
|
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
5348
5390
|
watchDataHasFocus(newValue) {
|
|
5349
|
-
if (!newValue)
|
|
5391
|
+
if (!index_es.De(newValue))
|
|
5350
5392
|
this.updateExpanded(Boolean(newValue));
|
|
5351
5393
|
}
|
|
5352
5394
|
/**
|
|
@@ -5354,7 +5396,7 @@ const MgMenuItem = class {
|
|
|
5354
5396
|
*/
|
|
5355
5397
|
updatePopoverGuard() {
|
|
5356
5398
|
const subItem = this.element.querySelector('*:not([slot])');
|
|
5357
|
-
if (
|
|
5399
|
+
if (subItem === null)
|
|
5358
5400
|
return;
|
|
5359
5401
|
if (this.hasPopover())
|
|
5360
5402
|
subItem.dataset.mgPopoverGuard = this.popoverIdentifier;
|
|
@@ -5412,7 +5454,7 @@ const MgMenuItem = class {
|
|
|
5412
5454
|
* @returns promise process wich emit the 'item-updated' event
|
|
5413
5455
|
*/
|
|
5414
5456
|
componentShouldUpdate() {
|
|
5415
|
-
return index_es.
|
|
5457
|
+
return index_es.Xt(() => {
|
|
5416
5458
|
this.itemUpdated.emit();
|
|
5417
5459
|
});
|
|
5418
5460
|
}
|
|
@@ -5439,7 +5481,7 @@ const MgMenuItem = class {
|
|
|
5439
5481
|
['mg-c-menu-item__collapse-container']: true,
|
|
5440
5482
|
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions$1.HORIZONTAL),
|
|
5441
5483
|
});
|
|
5442
|
-
return (index.h(index.Host, { key: '
|
|
5484
|
+
return (index.h(index.Host, { key: 'caeeabd1d1c9f7de3c8ecda6a315b85215b9e656', role: this.isItemMore ? 'presentation' : 'listitem' }, this.hasPopover() ? (index.h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.popoverIdentifier, "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
|
|
5443
5485
|
}, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
|
|
5444
5486
|
this.renderInteractiveElement(),
|
|
5445
5487
|
index.h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
|
|
@@ -5458,7 +5500,7 @@ const MgMenuItem = class {
|
|
|
5458
5500
|
"data-has-focus": ["watchDataHasFocus"]
|
|
5459
5501
|
}; }
|
|
5460
5502
|
};
|
|
5461
|
-
MgMenuItem.style =
|
|
5503
|
+
MgMenuItem.style = mgMenuItemCss;
|
|
5462
5504
|
|
|
5463
5505
|
/**
|
|
5464
5506
|
* List available variants
|
|
@@ -5470,7 +5512,6 @@ const variants$1 = ['info', 'warning', 'success', 'danger'];
|
|
|
5470
5512
|
const variantStyles = ['bar-left', 'background'];
|
|
5471
5513
|
|
|
5472
5514
|
const mgMessageCss = "/*!\n * @prop --mg-c-message-border-radius: Defines the border radius of the message. Default value: `--mg-b-size-radius`.\n */:host{--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-message-border-radius);--mg-c-card-border:none;--mg-c-card-overflow:hidden}.mg-c-message{display:inline-block;min-height:var(--mg-b-size-min-height)}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-message.mg-c-message--info .mg-c-message__icon{color:var(--mg-b-color-info)}.mg-c-message.mg-c-message--info.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-info)}.mg-c-message.mg-c-message--info.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-message.mg-c-message--success .mg-c-message__icon{color:var(--mg-b-color-success)}.mg-c-message.mg-c-message--success.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-success)}.mg-c-message.mg-c-message--success.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-message.mg-c-message--warning .mg-c-message__icon{color:var(--mg-b-color-warning)}.mg-c-message.mg-c-message--warning.mg-c-message--bar-left .mg-c-message__bar{background-color:var(--mg-b-color-warning)}.mg-c-message.mg-c-message--warning.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-message ::slotted(*){padding:0;margin:0}.mg-c-message__icon{position:absolute;top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);left:calc(var(--mg-b-size-4) + var(--mg-b-size-8));line-height:1}.mg-c-message__content{display:flex;flex-wrap:wrap;padding:0 var(--mg-b-size-8) 0 calc(var(--mg-b-size-4) + var(--mg-b-size-8) + var(--mg-b-size-16) + var(--mg-b-size-8));place-content:stretch flex-end}.mg-c-message__content-slot{flex-grow:1;margin:var(--mg-b-size-8) 0}.mg-c-message__content-separator{display:inline-block;width:var(--mg-b-size-40);height:0}.mg-c-message__content-actions-slot{padding:var(--mg-b-size-8) 0;text-align:right}.mg-c-message__bar{position:absolute;top:0;left:0;width:var(--mg-b-size-4);height:100%}.mg-c-message ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}.mg-c-message,.mg-c-message mg-message{max-width:100%}";
|
|
5473
|
-
const MgMessageStyle0 = mgMessageCss;
|
|
5474
5515
|
|
|
5475
5516
|
const MgMessage = class {
|
|
5476
5517
|
constructor(hostRef) {
|
|
@@ -5490,7 +5531,7 @@ const MgMessage = class {
|
|
|
5490
5531
|
/**
|
|
5491
5532
|
* Component classes
|
|
5492
5533
|
*/
|
|
5493
|
-
this.classCollection = new index_es.
|
|
5534
|
+
this.classCollection = new index_es.Zt(['mg-c-message']);
|
|
5494
5535
|
/**
|
|
5495
5536
|
* Define if component is using actions slot
|
|
5496
5537
|
*/
|
|
@@ -5514,7 +5555,7 @@ const MgMessage = class {
|
|
|
5514
5555
|
}
|
|
5515
5556
|
watchVariant(newValue, oldValue) {
|
|
5516
5557
|
if (!variants$1.includes(newValue)) {
|
|
5517
|
-
throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${index_es.
|
|
5558
|
+
throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5518
5559
|
}
|
|
5519
5560
|
else {
|
|
5520
5561
|
if (newValue !== undefined)
|
|
@@ -5525,7 +5566,7 @@ const MgMessage = class {
|
|
|
5525
5566
|
}
|
|
5526
5567
|
watchVariantStyle(newValue, oldValue) {
|
|
5527
5568
|
if (!variantStyles.includes(newValue)) {
|
|
5528
|
-
throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${index_es.
|
|
5569
|
+
throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5529
5570
|
}
|
|
5530
5571
|
else {
|
|
5531
5572
|
if (newValue !== undefined)
|
|
@@ -5552,9 +5593,9 @@ const MgMessage = class {
|
|
|
5552
5593
|
* @returns HTML Element
|
|
5553
5594
|
*/
|
|
5554
5595
|
render() {
|
|
5555
|
-
return (index.h("div", { key: '
|
|
5596
|
+
return (index.h("div", { key: '851d97fde6f05799e1420f8825fcff986d9af1d6', class: this.classCollection.join() }, index.h("mg-card", { key: '40f85f1fb3240ab709b1ab46286e9a953f2d5dc8' }, this.variantStyle === 'bar-left' && index.h("span", { key: '50b078ec379c7774d2f409c64b56108041bf3053', class: "mg-c-message__bar" }), index.h("span", { key: 'bc6b1019e1103fc8cd5e4e92f95b62374207be2b', class: "mg-c-message__icon" }, index.h("mg-icon", { key: 'e461ddc1eb1ddcb7ecc673f59dc59f400efbe916', icon: this.getIcon() })), index.h("div", { key: 'edf836b375d7f1fd413b53711b99acbe2bef3e92', class: "mg-c-message__content" }, index.h("span", { key: 'c6ce4628e450b7e89ef3715126b3a2dee081224e', class: "mg-c-message__content-slot" }, index.h("slot", { key: '36ecf7417e61ab84695078e2fd4ebe829bd769a7' })), this.hasActions && [
|
|
5556
5597
|
index.h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
|
|
5557
|
-
index.h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, index.h("slot", { key: '
|
|
5598
|
+
index.h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, index.h("slot", { key: '43be5769165cac1ab702b2ba80fb885c2ec1834f', name: "actions" })),
|
|
5558
5599
|
]))));
|
|
5559
5600
|
}
|
|
5560
5601
|
get element() { return index.getElement(this); }
|
|
@@ -5563,7 +5604,7 @@ const MgMessage = class {
|
|
|
5563
5604
|
"variantStyle": ["watchVariantStyle"]
|
|
5564
5605
|
}; }
|
|
5565
5606
|
};
|
|
5566
|
-
MgMessage.style =
|
|
5607
|
+
MgMessage.style = mgMessageCss;
|
|
5567
5608
|
|
|
5568
5609
|
/**
|
|
5569
5610
|
* List of all possibles dialog roles
|
|
@@ -5571,25 +5612,24 @@ MgMessage.style = MgMessageStyle0;
|
|
|
5571
5612
|
const dialogRoles = ['dialog', 'alertdialog'];
|
|
5572
5613
|
|
|
5573
5614
|
const mgModalCss = "/*!\n * @prop --mg-c-modal-border-radius: Defines the border radius of the modal. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-modal-title-font-size: Defines the font size of the modal title. Default value: `--mg-b-font-size-h3`.\n */:host{--mg-c-card-border-radius:var(--mg-c-modal-border-radius);--mg-c-card-spacing:var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border:none}.mg-c-modal{border:none;background:none;color:inherit}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-light);opacity:.85}.mg-c-modal mg-card{display:flex;width:calc(75*var(--mg-b-size-8));max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:var(--mg-b-size-24)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)*var(--mg-b-line-height))/2*-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2*-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)*-1);overflow-y:auto}.mg-c-modal ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
|
|
5574
|
-
const MgModalStyle0 = mgModalCss;
|
|
5575
5615
|
|
|
5576
5616
|
const MgModal = class {
|
|
5577
5617
|
constructor(hostRef) {
|
|
5578
5618
|
index.registerInstance(this, hostRef);
|
|
5579
|
-
this.componentShow = index.createEvent(this, "component-show"
|
|
5580
|
-
this.componentHide = index.createEvent(this, "component-hide"
|
|
5581
|
-
this.componentClose = index.createEvent(this, "component-close"
|
|
5619
|
+
this.componentShow = index.createEvent(this, "component-show");
|
|
5620
|
+
this.componentHide = index.createEvent(this, "component-hide");
|
|
5621
|
+
this.componentClose = index.createEvent(this, "component-close");
|
|
5582
5622
|
// IDs
|
|
5583
5623
|
this.titleId = '';
|
|
5584
5624
|
/**
|
|
5585
5625
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
5586
5626
|
* If not set, it will be created.
|
|
5587
5627
|
*/
|
|
5588
|
-
this.identifier = index_es.
|
|
5628
|
+
this.identifier = index_es.Pt('mg-modal');
|
|
5589
5629
|
/**
|
|
5590
5630
|
* Modal dialog role.
|
|
5591
5631
|
*/
|
|
5592
|
-
this.dialogRole =
|
|
5632
|
+
this.dialogRole = 'dialog';
|
|
5593
5633
|
/**
|
|
5594
5634
|
* Define if modal has a cross button
|
|
5595
5635
|
*/
|
|
@@ -5605,7 +5645,7 @@ const MgModal = class {
|
|
|
5605
5645
|
/**
|
|
5606
5646
|
* Component classes
|
|
5607
5647
|
*/
|
|
5608
|
-
this.classCollection = new index_es.
|
|
5648
|
+
this.classCollection = new index_es.Zt(['mg-c-modal']);
|
|
5609
5649
|
/***********
|
|
5610
5650
|
* Handles *
|
|
5611
5651
|
***********/
|
|
@@ -5618,17 +5658,17 @@ const MgModal = class {
|
|
|
5618
5658
|
};
|
|
5619
5659
|
}
|
|
5620
5660
|
watchIdentifier(newValue) {
|
|
5621
|
-
if (!index_es.
|
|
5622
|
-
throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
5661
|
+
if (!index_es.Ut(newValue)) {
|
|
5662
|
+
throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5623
5663
|
}
|
|
5624
5664
|
}
|
|
5625
5665
|
validateDialogRole(newValue) {
|
|
5626
5666
|
if (!dialogRoles.includes(newValue))
|
|
5627
|
-
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${index_es.
|
|
5667
|
+
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5628
5668
|
}
|
|
5629
5669
|
validateModalTitle(newValue) {
|
|
5630
|
-
if (!index_es.
|
|
5631
|
-
throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${index_es.
|
|
5670
|
+
if (!index_es.De(newValue)) {
|
|
5671
|
+
throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5632
5672
|
}
|
|
5633
5673
|
}
|
|
5634
5674
|
watchOpen(newValue) {
|
|
@@ -5677,11 +5717,11 @@ const MgModal = class {
|
|
|
5677
5717
|
* @returns HTML Element
|
|
5678
5718
|
*/
|
|
5679
5719
|
render() {
|
|
5680
|
-
return (index.h("dialog", { key: '
|
|
5720
|
+
return (index.h("dialog", { key: '4b7346b707b895a8a110bb7553f0db32d1c5778c', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
|
|
5681
5721
|
if (el !== null) {
|
|
5682
5722
|
this.dialog = el;
|
|
5683
5723
|
}
|
|
5684
|
-
} }, index.h("mg-card", { key: '
|
|
5724
|
+
} }, index.h("mg-card", { key: '2aaabab2e1be14013bcae66d100ac56c1a9bbf4d' }, index.h("div", { key: '56a03d6cbda094d7ae4444ca3fab924982f73e2a', class: "mg-c-modal__dialog" }, index.h("header", { key: 'e7eb70e614a9e6c6b3f14f9e165bf801b780b031', class: "mg-c-modal__header" }, this.closeButton && (index.h("span", { key: 'c57ccc8f049893c5e46d769b527cc2e2c5ff14c0', class: "mg-c-modal__close-button" }, index.h("mg-button", { key: 'b1b4357af8c875aab9f1104895de3cc228d12feb', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, index.h("mg-icon", { key: 'cfe5fba2577ece682368332d3836cf709bb1b0e1', icon: "cross" })))), index.h("h1", { key: '718527902ea4814d55bf4d1c89d111a965233f0a', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), index.h("article", { key: '78603fdb8fffa93e5caa6cf0ece9c6dbdbdfefde', class: "mg-c-modal__content" }, index.h("slot", { key: '1cd5a0415e53cb836428f8b9c4fc02dac11447a9' })), this.hasActions && (index.h("footer", { key: 'da72e5c2f43308d0f94d4e2eb36e317a13b5b16e', class: "mg-c-modal__footer" }, index.h("slot", { key: '49467ef13123cb4f4e2b315d293379d857ca3245', name: "actions" })))))));
|
|
5685
5725
|
}
|
|
5686
5726
|
get element() { return index.getElement(this); }
|
|
5687
5727
|
static get watchers() { return {
|
|
@@ -5691,7 +5731,7 @@ const MgModal = class {
|
|
|
5691
5731
|
"open": ["watchOpen"]
|
|
5692
5732
|
}; }
|
|
5693
5733
|
};
|
|
5694
|
-
MgModal.style =
|
|
5734
|
+
MgModal.style = mgModalCss;
|
|
5695
5735
|
|
|
5696
5736
|
const NavigationAction = {
|
|
5697
5737
|
NEXT: 'next',
|
|
@@ -5699,7 +5739,6 @@ const NavigationAction = {
|
|
|
5699
5739
|
};
|
|
5700
5740
|
|
|
5701
5741
|
const mgPaginationCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-pagination{display:flex;align-items:center;gap:var(--mg-b-spacing-actions)}.mg-c-pagination__page-count{display:flex;align-items:center;gap:var(--mg-b-size-4)}.mg-c-pagination.mg-c-pagination--hide-page-count{gap:0}";
|
|
5702
|
-
const MgPaginationStyle0 = mgPaginationCss;
|
|
5703
5742
|
|
|
5704
5743
|
/**
|
|
5705
5744
|
* Range generator
|
|
@@ -5726,12 +5765,20 @@ const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - st
|
|
|
5726
5765
|
const MgPagination = class {
|
|
5727
5766
|
constructor(hostRef) {
|
|
5728
5767
|
index.registerInstance(this, hostRef);
|
|
5729
|
-
this.currentPageChange = index.createEvent(this, "current-page-change"
|
|
5768
|
+
this.currentPageChange = index.createEvent(this, "current-page-change");
|
|
5730
5769
|
/**
|
|
5731
5770
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
5732
5771
|
* If not set, it will be created.
|
|
5733
5772
|
*/
|
|
5734
|
-
this.identifier = index_es.
|
|
5773
|
+
this.identifier = index_es.Pt('mg-pagination');
|
|
5774
|
+
/**
|
|
5775
|
+
* Hide navigation label
|
|
5776
|
+
*/
|
|
5777
|
+
this.hideNavigationLabels = false;
|
|
5778
|
+
/**
|
|
5779
|
+
* Hide select input
|
|
5780
|
+
*/
|
|
5781
|
+
this.hidePageCount = false;
|
|
5735
5782
|
/**
|
|
5736
5783
|
* Component total pages
|
|
5737
5784
|
*/
|
|
@@ -5768,18 +5815,18 @@ const MgPagination = class {
|
|
|
5768
5815
|
};
|
|
5769
5816
|
}
|
|
5770
5817
|
watchIdentifier(newValue) {
|
|
5771
|
-
if (!index_es.
|
|
5772
|
-
console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
5818
|
+
if (!index_es.Ut(newValue)) {
|
|
5819
|
+
console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5773
5820
|
}
|
|
5774
5821
|
}
|
|
5775
5822
|
validateTotalPages(newValue) {
|
|
5776
5823
|
if (newValue < 1) {
|
|
5777
|
-
throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${index_es.
|
|
5824
|
+
throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5778
5825
|
}
|
|
5779
5826
|
}
|
|
5780
5827
|
validateCurrentPage(newValue) {
|
|
5781
5828
|
if (newValue < 1) {
|
|
5782
|
-
throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${index_es.
|
|
5829
|
+
throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5783
5830
|
}
|
|
5784
5831
|
else if (newValue > this.totalPages) {
|
|
5785
5832
|
throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
|
|
@@ -5809,10 +5856,10 @@ const MgPagination = class {
|
|
|
5809
5856
|
* @returns HTML Element
|
|
5810
5857
|
*/
|
|
5811
5858
|
render() {
|
|
5812
|
-
const navigationActionButton = (disabled, action) => (index.h("mg-button", { key: '
|
|
5859
|
+
const navigationActionButton = (disabled, action) => (index.h("mg-button", { key: 'b6983bde889955b35b1e580ffd5ece96a2919eca', label: this.messages.pagination[`${action}Page`],
|
|
5813
5860
|
// eslint-disable-next-line react/jsx-no-bind
|
|
5814
|
-
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && index.h("mg-icon", { key: '
|
|
5815
|
-
return (index.h(index.Host, { key: '
|
|
5861
|
+
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && index.h("mg-icon", { key: '64316742287d7cb9adf0c4bb3cb902a3c1cea6b5', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && index.h("mg-icon", { key: '2c405c1530509f3e6938e7c1d754b7aff216a6f7', icon: "chevron-right" })));
|
|
5862
|
+
return (index.h(index.Host, { key: 'a341519e24868b594c1bb91c12549c0338fc0f49', hidden: this.totalPages < 2 }, index.h("nav", { key: '1102f256da9b8c25e8dbe6be64b934267d58f4b8', 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 && (index.h("div", { key: '32498b13867e363f6f51ffbaff6f18623cbd698d', class: "mg-c-pagination__page-count" }, index.h("mg-input-select", { key: 'ff80a43e9fa1bf7cc13c7104e41730df0c044c3e', 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 }), index.h("span", { key: 'c3e331768f997740ed95cde7dc7433df7d065122', 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))));
|
|
5816
5863
|
}
|
|
5817
5864
|
get element() { return index.getElement(this); }
|
|
5818
5865
|
static get watchers() { return {
|
|
@@ -5821,7 +5868,7 @@ const MgPagination = class {
|
|
|
5821
5868
|
"currentPage": ["validateCurrentPage"]
|
|
5822
5869
|
}; }
|
|
5823
5870
|
};
|
|
5824
|
-
MgPagination.style =
|
|
5871
|
+
MgPagination.style = mgPaginationCss;
|
|
5825
5872
|
|
|
5826
5873
|
/**
|
|
5827
5874
|
* Available expand toggle display options
|
|
@@ -5833,18 +5880,17 @@ const expandToggleDisplays = ['text', 'icon'];
|
|
|
5833
5880
|
const titlePositions = ['left', 'right'];
|
|
5834
5881
|
|
|
5835
5882
|
const mgPanelCss = "/*!\n * @prop --mg-c-panel-border-radius: Defines the border radius of the panel. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-panel-color-background: Defines the background of the panel. Default value: `color-mix(in srgb, var(--mg-b-color-info), white 97%)`.\n * @prop --mg-c-panel-box-shadow: Defines the box shadow of the panel. Default value: `--mg-b-box-shadow`.\n * @prop --mg-c-panel-content-spacing: Defines the padding of the panel content. Default value: `--mg-b-size-16`.\n */:host{--mg-c-card-border:none;--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-panel-border-radius);--mg-c-card-color-background:var(--mg-c-panel-color-background);--mg-c-card-box-shadow:var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size:var(--mg-b-font-size-h5);--mg-c-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
|
|
5836
|
-
const MgPanelStyle0 = mgPanelCss;
|
|
5837
5883
|
|
|
5838
5884
|
const MgPanel = class {
|
|
5839
5885
|
constructor(hostRef) {
|
|
5840
5886
|
index.registerInstance(this, hostRef);
|
|
5841
|
-
this.titleChange = index.createEvent(this, "title-change"
|
|
5842
|
-
this.expandedChange = index.createEvent(this, "expanded-change"
|
|
5887
|
+
this.titleChange = index.createEvent(this, "title-change");
|
|
5888
|
+
this.expandedChange = index.createEvent(this, "expanded-change");
|
|
5843
5889
|
/**
|
|
5844
5890
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
5845
5891
|
* If not set, it will be created.
|
|
5846
5892
|
*/
|
|
5847
|
-
this.identifier = index_es.
|
|
5893
|
+
this.identifier = index_es.Pt('mg-panel');
|
|
5848
5894
|
/**
|
|
5849
5895
|
* Define if panel title is editable
|
|
5850
5896
|
*/
|
|
@@ -5852,7 +5898,7 @@ const MgPanel = class {
|
|
|
5852
5898
|
/**
|
|
5853
5899
|
* Define title position
|
|
5854
5900
|
*/
|
|
5855
|
-
this.titlePosition =
|
|
5901
|
+
this.titlePosition = 'left';
|
|
5856
5902
|
/**
|
|
5857
5903
|
* Panel is opened
|
|
5858
5904
|
*/
|
|
@@ -5860,11 +5906,15 @@ const MgPanel = class {
|
|
|
5860
5906
|
/**
|
|
5861
5907
|
* Define expand toggle button display
|
|
5862
5908
|
*/
|
|
5863
|
-
this.expandToggleDisplay =
|
|
5909
|
+
this.expandToggleDisplay = 'text';
|
|
5910
|
+
/**
|
|
5911
|
+
* Disable possibility to toggle expand
|
|
5912
|
+
*/
|
|
5913
|
+
this.expandToggleDisabled = false;
|
|
5864
5914
|
/**
|
|
5865
5915
|
* Component classes
|
|
5866
5916
|
*/
|
|
5867
|
-
this.classCollection = new index_es.
|
|
5917
|
+
this.classCollection = new index_es.Zt(['mg-c-panel']);
|
|
5868
5918
|
/**
|
|
5869
5919
|
* Title is in edition mode
|
|
5870
5920
|
*/
|
|
@@ -5963,13 +6013,13 @@ const MgPanel = class {
|
|
|
5963
6013
|
};
|
|
5964
6014
|
}
|
|
5965
6015
|
watchIdentifier(newValue) {
|
|
5966
|
-
if (!index_es.
|
|
5967
|
-
console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
6016
|
+
if (!index_es.Ut(newValue)) {
|
|
6017
|
+
console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5968
6018
|
}
|
|
5969
6019
|
}
|
|
5970
6020
|
validatePanelTitle(newValue) {
|
|
5971
|
-
if (!index_es.
|
|
5972
|
-
throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${index_es.
|
|
6021
|
+
if (!index_es.De(newValue))
|
|
6022
|
+
throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5973
6023
|
this.titleChange.emit(newValue);
|
|
5974
6024
|
}
|
|
5975
6025
|
validateTitlePattern(newValue) {
|
|
@@ -5978,14 +6028,14 @@ const MgPanel = class {
|
|
|
5978
6028
|
}
|
|
5979
6029
|
validateTitlePosition(newValue) {
|
|
5980
6030
|
if (!titlePositions.includes(newValue))
|
|
5981
|
-
throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${index_es.
|
|
6031
|
+
throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5982
6032
|
}
|
|
5983
6033
|
handleExpanded(newValue) {
|
|
5984
6034
|
this.expandedChange.emit(newValue);
|
|
5985
6035
|
}
|
|
5986
6036
|
validateExpandToggleDisplay(newValue) {
|
|
5987
6037
|
if (!expandToggleDisplays.includes(newValue))
|
|
5988
|
-
throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${index_es.
|
|
6038
|
+
throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
5989
6039
|
if (newValue === 'icon' && this.titleEditable)
|
|
5990
6040
|
this.titleEditable = false;
|
|
5991
6041
|
}
|
|
@@ -6020,7 +6070,7 @@ const MgPanel = class {
|
|
|
6020
6070
|
*/
|
|
6021
6071
|
render() {
|
|
6022
6072
|
const headerId = `${this.identifier}-header`;
|
|
6023
|
-
return (index.h("section", { key: '
|
|
6073
|
+
return (index.h("section", { key: '73b9b1ab03307718bc7085799675da7447787c73', class: this.classCollection.join(), id: this.identifier }, index.h("mg-card", { key: '91702feab4cde0548c276f3d32fa193ff1093cae' }, index.h("header", { key: '442a17d42f86e73648ffa33124a1745fef3b07e3', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), index.h("article", { key: '0df72fb9e53f0a8307c062d506e8c744fd6780f3', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, index.h("slot", { key: '44fa7501182e1c671d229929ebc12031c3048fdb' })))));
|
|
6024
6074
|
}
|
|
6025
6075
|
get element() { return index.getElement(this); }
|
|
6026
6076
|
static get watchers() { return {
|
|
@@ -6033,16 +6083,13 @@ const MgPanel = class {
|
|
|
6033
6083
|
"expandToggleDisplay": ["validateExpandToggleDisplay"]
|
|
6034
6084
|
}; }
|
|
6035
6085
|
};
|
|
6036
|
-
MgPanel.style =
|
|
6086
|
+
MgPanel.style = mgPanelCss;
|
|
6037
6087
|
|
|
6038
6088
|
/**
|
|
6039
6089
|
* Custom positioning reference element.
|
|
6040
6090
|
* @see https://floating-ui.com/docs/virtual-elements
|
|
6041
6091
|
*/
|
|
6042
6092
|
|
|
6043
|
-
const sides$1 = ['top', 'right', 'bottom', 'left'];
|
|
6044
|
-
const alignments$1 = ['start', 'end'];
|
|
6045
|
-
const placements$1 = /*#__PURE__*/sides$1.reduce((acc, side) => acc.concat(side, side + "-" + alignments$1[0], side + "-" + alignments$1[1]), []);
|
|
6046
6093
|
const min = Math.min;
|
|
6047
6094
|
const max = Math.max;
|
|
6048
6095
|
const round = Math.round;
|
|
@@ -6466,109 +6513,6 @@ const arrow$1 = options => ({
|
|
|
6466
6513
|
}
|
|
6467
6514
|
});
|
|
6468
6515
|
|
|
6469
|
-
function getPlacementList(alignment, autoAlignment, allowedPlacements) {
|
|
6470
|
-
const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
|
|
6471
|
-
return allowedPlacementsSortedByAlignment.filter(placement => {
|
|
6472
|
-
if (alignment) {
|
|
6473
|
-
return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
|
|
6474
|
-
}
|
|
6475
|
-
return true;
|
|
6476
|
-
});
|
|
6477
|
-
}
|
|
6478
|
-
/**
|
|
6479
|
-
* Optimizes the visibility of the floating element by choosing the placement
|
|
6480
|
-
* that has the most space available automatically, without needing to specify a
|
|
6481
|
-
* preferred placement. Alternative to `flip`.
|
|
6482
|
-
* @see https://floating-ui.com/docs/autoPlacement
|
|
6483
|
-
*/
|
|
6484
|
-
const autoPlacement = function (options) {
|
|
6485
|
-
if (options === void 0) {
|
|
6486
|
-
options = {};
|
|
6487
|
-
}
|
|
6488
|
-
return {
|
|
6489
|
-
name: 'autoPlacement',
|
|
6490
|
-
options,
|
|
6491
|
-
async fn(state) {
|
|
6492
|
-
var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
|
|
6493
|
-
const {
|
|
6494
|
-
rects,
|
|
6495
|
-
middlewareData,
|
|
6496
|
-
placement,
|
|
6497
|
-
platform,
|
|
6498
|
-
elements
|
|
6499
|
-
} = state;
|
|
6500
|
-
const {
|
|
6501
|
-
crossAxis = false,
|
|
6502
|
-
alignment,
|
|
6503
|
-
allowedPlacements = placements$1,
|
|
6504
|
-
autoAlignment = true,
|
|
6505
|
-
...detectOverflowOptions
|
|
6506
|
-
} = evaluate(options, state);
|
|
6507
|
-
const placements$1$1 = alignment !== undefined || allowedPlacements === placements$1 ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
|
|
6508
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
6509
|
-
const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
|
|
6510
|
-
const currentPlacement = placements$1$1[currentIndex];
|
|
6511
|
-
if (currentPlacement == null) {
|
|
6512
|
-
return {};
|
|
6513
|
-
}
|
|
6514
|
-
const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
|
|
6515
|
-
|
|
6516
|
-
// Make `computeCoords` start from the right place.
|
|
6517
|
-
if (placement !== currentPlacement) {
|
|
6518
|
-
return {
|
|
6519
|
-
reset: {
|
|
6520
|
-
placement: placements$1$1[0]
|
|
6521
|
-
}
|
|
6522
|
-
};
|
|
6523
|
-
}
|
|
6524
|
-
const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
|
|
6525
|
-
const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
|
|
6526
|
-
placement: currentPlacement,
|
|
6527
|
-
overflows: currentOverflows
|
|
6528
|
-
}];
|
|
6529
|
-
const nextPlacement = placements$1$1[currentIndex + 1];
|
|
6530
|
-
|
|
6531
|
-
// There are more placements to check.
|
|
6532
|
-
if (nextPlacement) {
|
|
6533
|
-
return {
|
|
6534
|
-
data: {
|
|
6535
|
-
index: currentIndex + 1,
|
|
6536
|
-
overflows: allOverflows
|
|
6537
|
-
},
|
|
6538
|
-
reset: {
|
|
6539
|
-
placement: nextPlacement
|
|
6540
|
-
}
|
|
6541
|
-
};
|
|
6542
|
-
}
|
|
6543
|
-
const placementsSortedByMostSpace = allOverflows.map(d => {
|
|
6544
|
-
const alignment = getAlignment(d.placement);
|
|
6545
|
-
return [d.placement, alignment && crossAxis ?
|
|
6546
|
-
// Check along the mainAxis and main crossAxis side.
|
|
6547
|
-
d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
|
|
6548
|
-
// Check only the mainAxis.
|
|
6549
|
-
d.overflows[0], d.overflows];
|
|
6550
|
-
}).sort((a, b) => a[1] - b[1]);
|
|
6551
|
-
const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
|
|
6552
|
-
// Aligned placements should not check their opposite crossAxis
|
|
6553
|
-
// side.
|
|
6554
|
-
getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
|
|
6555
|
-
const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
|
|
6556
|
-
if (resetPlacement !== placement) {
|
|
6557
|
-
return {
|
|
6558
|
-
data: {
|
|
6559
|
-
index: currentIndex + 1,
|
|
6560
|
-
overflows: allOverflows
|
|
6561
|
-
},
|
|
6562
|
-
reset: {
|
|
6563
|
-
placement: resetPlacement
|
|
6564
|
-
}
|
|
6565
|
-
};
|
|
6566
|
-
}
|
|
6567
|
-
return {};
|
|
6568
|
-
}
|
|
6569
|
-
};
|
|
6570
|
-
};
|
|
6571
|
-
|
|
6572
6516
|
/**
|
|
6573
6517
|
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
6574
6518
|
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
@@ -6695,206 +6639,6 @@ const flip$1 = function (options) {
|
|
|
6695
6639
|
};
|
|
6696
6640
|
};
|
|
6697
6641
|
|
|
6698
|
-
function getSideOffsets(overflow, rect) {
|
|
6699
|
-
return {
|
|
6700
|
-
top: overflow.top - rect.height,
|
|
6701
|
-
right: overflow.right - rect.width,
|
|
6702
|
-
bottom: overflow.bottom - rect.height,
|
|
6703
|
-
left: overflow.left - rect.width
|
|
6704
|
-
};
|
|
6705
|
-
}
|
|
6706
|
-
function isAnySideFullyClipped(overflow) {
|
|
6707
|
-
return sides$1.some(side => overflow[side] >= 0);
|
|
6708
|
-
}
|
|
6709
|
-
/**
|
|
6710
|
-
* Provides data to hide the floating element in applicable situations, such as
|
|
6711
|
-
* when it is not in the same clipping context as the reference element.
|
|
6712
|
-
* @see https://floating-ui.com/docs/hide
|
|
6713
|
-
*/
|
|
6714
|
-
const hide = function (options) {
|
|
6715
|
-
if (options === void 0) {
|
|
6716
|
-
options = {};
|
|
6717
|
-
}
|
|
6718
|
-
return {
|
|
6719
|
-
name: 'hide',
|
|
6720
|
-
options,
|
|
6721
|
-
async fn(state) {
|
|
6722
|
-
const {
|
|
6723
|
-
rects
|
|
6724
|
-
} = state;
|
|
6725
|
-
const {
|
|
6726
|
-
strategy = 'referenceHidden',
|
|
6727
|
-
...detectOverflowOptions
|
|
6728
|
-
} = evaluate(options, state);
|
|
6729
|
-
switch (strategy) {
|
|
6730
|
-
case 'referenceHidden':
|
|
6731
|
-
{
|
|
6732
|
-
const overflow = await detectOverflow(state, {
|
|
6733
|
-
...detectOverflowOptions,
|
|
6734
|
-
elementContext: 'reference'
|
|
6735
|
-
});
|
|
6736
|
-
const offsets = getSideOffsets(overflow, rects.reference);
|
|
6737
|
-
return {
|
|
6738
|
-
data: {
|
|
6739
|
-
referenceHiddenOffsets: offsets,
|
|
6740
|
-
referenceHidden: isAnySideFullyClipped(offsets)
|
|
6741
|
-
}
|
|
6742
|
-
};
|
|
6743
|
-
}
|
|
6744
|
-
case 'escaped':
|
|
6745
|
-
{
|
|
6746
|
-
const overflow = await detectOverflow(state, {
|
|
6747
|
-
...detectOverflowOptions,
|
|
6748
|
-
altBoundary: true
|
|
6749
|
-
});
|
|
6750
|
-
const offsets = getSideOffsets(overflow, rects.floating);
|
|
6751
|
-
return {
|
|
6752
|
-
data: {
|
|
6753
|
-
escapedOffsets: offsets,
|
|
6754
|
-
escaped: isAnySideFullyClipped(offsets)
|
|
6755
|
-
}
|
|
6756
|
-
};
|
|
6757
|
-
}
|
|
6758
|
-
default:
|
|
6759
|
-
{
|
|
6760
|
-
return {};
|
|
6761
|
-
}
|
|
6762
|
-
}
|
|
6763
|
-
}
|
|
6764
|
-
};
|
|
6765
|
-
};
|
|
6766
|
-
|
|
6767
|
-
function getBoundingRect(rects) {
|
|
6768
|
-
const minX = min(...rects.map(rect => rect.left));
|
|
6769
|
-
const minY = min(...rects.map(rect => rect.top));
|
|
6770
|
-
const maxX = max(...rects.map(rect => rect.right));
|
|
6771
|
-
const maxY = max(...rects.map(rect => rect.bottom));
|
|
6772
|
-
return {
|
|
6773
|
-
x: minX,
|
|
6774
|
-
y: minY,
|
|
6775
|
-
width: maxX - minX,
|
|
6776
|
-
height: maxY - minY
|
|
6777
|
-
};
|
|
6778
|
-
}
|
|
6779
|
-
function getRectsByLine(rects) {
|
|
6780
|
-
const sortedRects = rects.slice().sort((a, b) => a.y - b.y);
|
|
6781
|
-
const groups = [];
|
|
6782
|
-
let prevRect = null;
|
|
6783
|
-
for (let i = 0; i < sortedRects.length; i++) {
|
|
6784
|
-
const rect = sortedRects[i];
|
|
6785
|
-
if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {
|
|
6786
|
-
groups.push([rect]);
|
|
6787
|
-
} else {
|
|
6788
|
-
groups[groups.length - 1].push(rect);
|
|
6789
|
-
}
|
|
6790
|
-
prevRect = rect;
|
|
6791
|
-
}
|
|
6792
|
-
return groups.map(rect => rectToClientRect(getBoundingRect(rect)));
|
|
6793
|
-
}
|
|
6794
|
-
/**
|
|
6795
|
-
* Provides improved positioning for inline reference elements that can span
|
|
6796
|
-
* over multiple lines, such as hyperlinks or range selections.
|
|
6797
|
-
* @see https://floating-ui.com/docs/inline
|
|
6798
|
-
*/
|
|
6799
|
-
const inline = function (options) {
|
|
6800
|
-
if (options === void 0) {
|
|
6801
|
-
options = {};
|
|
6802
|
-
}
|
|
6803
|
-
return {
|
|
6804
|
-
name: 'inline',
|
|
6805
|
-
options,
|
|
6806
|
-
async fn(state) {
|
|
6807
|
-
const {
|
|
6808
|
-
placement,
|
|
6809
|
-
elements,
|
|
6810
|
-
rects,
|
|
6811
|
-
platform,
|
|
6812
|
-
strategy
|
|
6813
|
-
} = state;
|
|
6814
|
-
// A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
|
|
6815
|
-
// ClientRect's bounds, despite the event listener being triggered. A
|
|
6816
|
-
// padding of 2 seems to handle this issue.
|
|
6817
|
-
const {
|
|
6818
|
-
padding = 2,
|
|
6819
|
-
x,
|
|
6820
|
-
y
|
|
6821
|
-
} = evaluate(options, state);
|
|
6822
|
-
const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);
|
|
6823
|
-
const clientRects = getRectsByLine(nativeClientRects);
|
|
6824
|
-
const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
|
|
6825
|
-
const paddingObject = getPaddingObject(padding);
|
|
6826
|
-
function getBoundingClientRect() {
|
|
6827
|
-
// There are two rects and they are disjoined.
|
|
6828
|
-
if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
|
|
6829
|
-
// Find the first rect in which the point is fully inside.
|
|
6830
|
-
return clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom) || fallback;
|
|
6831
|
-
}
|
|
6832
|
-
|
|
6833
|
-
// There are 2 or more connected rects.
|
|
6834
|
-
if (clientRects.length >= 2) {
|
|
6835
|
-
if (getSideAxis(placement) === 'y') {
|
|
6836
|
-
const firstRect = clientRects[0];
|
|
6837
|
-
const lastRect = clientRects[clientRects.length - 1];
|
|
6838
|
-
const isTop = getSide(placement) === 'top';
|
|
6839
|
-
const top = firstRect.top;
|
|
6840
|
-
const bottom = lastRect.bottom;
|
|
6841
|
-
const left = isTop ? firstRect.left : lastRect.left;
|
|
6842
|
-
const right = isTop ? firstRect.right : lastRect.right;
|
|
6843
|
-
const width = right - left;
|
|
6844
|
-
const height = bottom - top;
|
|
6845
|
-
return {
|
|
6846
|
-
top,
|
|
6847
|
-
bottom,
|
|
6848
|
-
left,
|
|
6849
|
-
right,
|
|
6850
|
-
width,
|
|
6851
|
-
height,
|
|
6852
|
-
x: left,
|
|
6853
|
-
y: top
|
|
6854
|
-
};
|
|
6855
|
-
}
|
|
6856
|
-
const isLeftSide = getSide(placement) === 'left';
|
|
6857
|
-
const maxRight = max(...clientRects.map(rect => rect.right));
|
|
6858
|
-
const minLeft = min(...clientRects.map(rect => rect.left));
|
|
6859
|
-
const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
|
|
6860
|
-
const top = measureRects[0].top;
|
|
6861
|
-
const bottom = measureRects[measureRects.length - 1].bottom;
|
|
6862
|
-
const left = minLeft;
|
|
6863
|
-
const right = maxRight;
|
|
6864
|
-
const width = right - left;
|
|
6865
|
-
const height = bottom - top;
|
|
6866
|
-
return {
|
|
6867
|
-
top,
|
|
6868
|
-
bottom,
|
|
6869
|
-
left,
|
|
6870
|
-
right,
|
|
6871
|
-
width,
|
|
6872
|
-
height,
|
|
6873
|
-
x: left,
|
|
6874
|
-
y: top
|
|
6875
|
-
};
|
|
6876
|
-
}
|
|
6877
|
-
return fallback;
|
|
6878
|
-
}
|
|
6879
|
-
const resetRects = await platform.getElementRects({
|
|
6880
|
-
reference: {
|
|
6881
|
-
getBoundingClientRect
|
|
6882
|
-
},
|
|
6883
|
-
floating: elements.floating,
|
|
6884
|
-
strategy
|
|
6885
|
-
});
|
|
6886
|
-
if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) {
|
|
6887
|
-
return {
|
|
6888
|
-
reset: {
|
|
6889
|
-
rects: resetRects
|
|
6890
|
-
}
|
|
6891
|
-
};
|
|
6892
|
-
}
|
|
6893
|
-
return {};
|
|
6894
|
-
}
|
|
6895
|
-
};
|
|
6896
|
-
};
|
|
6897
|
-
|
|
6898
6642
|
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
6899
6643
|
// Derivable.
|
|
6900
6644
|
|
|
@@ -7125,90 +6869,6 @@ const limitShift$1 = function (options) {
|
|
|
7125
6869
|
};
|
|
7126
6870
|
};
|
|
7127
6871
|
|
|
7128
|
-
/**
|
|
7129
|
-
* Provides data that allows you to change the size of the floating element —
|
|
7130
|
-
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
7131
|
-
* width of the reference element.
|
|
7132
|
-
* @see https://floating-ui.com/docs/size
|
|
7133
|
-
*/
|
|
7134
|
-
const size = function (options) {
|
|
7135
|
-
if (options === void 0) {
|
|
7136
|
-
options = {};
|
|
7137
|
-
}
|
|
7138
|
-
return {
|
|
7139
|
-
name: 'size',
|
|
7140
|
-
options,
|
|
7141
|
-
async fn(state) {
|
|
7142
|
-
var _state$middlewareData, _state$middlewareData2;
|
|
7143
|
-
const {
|
|
7144
|
-
placement,
|
|
7145
|
-
rects,
|
|
7146
|
-
platform,
|
|
7147
|
-
elements
|
|
7148
|
-
} = state;
|
|
7149
|
-
const {
|
|
7150
|
-
apply = () => {},
|
|
7151
|
-
...detectOverflowOptions
|
|
7152
|
-
} = evaluate(options, state);
|
|
7153
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
7154
|
-
const side = getSide(placement);
|
|
7155
|
-
const alignment = getAlignment(placement);
|
|
7156
|
-
const isYAxis = getSideAxis(placement) === 'y';
|
|
7157
|
-
const {
|
|
7158
|
-
width,
|
|
7159
|
-
height
|
|
7160
|
-
} = rects.floating;
|
|
7161
|
-
let heightSide;
|
|
7162
|
-
let widthSide;
|
|
7163
|
-
if (side === 'top' || side === 'bottom') {
|
|
7164
|
-
heightSide = side;
|
|
7165
|
-
widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
|
|
7166
|
-
} else {
|
|
7167
|
-
widthSide = side;
|
|
7168
|
-
heightSide = alignment === 'end' ? 'top' : 'bottom';
|
|
7169
|
-
}
|
|
7170
|
-
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
7171
|
-
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
7172
|
-
const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
|
|
7173
|
-
const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
|
|
7174
|
-
const noShift = !state.middlewareData.shift;
|
|
7175
|
-
let availableHeight = overflowAvailableHeight;
|
|
7176
|
-
let availableWidth = overflowAvailableWidth;
|
|
7177
|
-
if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
|
|
7178
|
-
availableWidth = maximumClippingWidth;
|
|
7179
|
-
}
|
|
7180
|
-
if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
|
|
7181
|
-
availableHeight = maximumClippingHeight;
|
|
7182
|
-
}
|
|
7183
|
-
if (noShift && !alignment) {
|
|
7184
|
-
const xMin = max(overflow.left, 0);
|
|
7185
|
-
const xMax = max(overflow.right, 0);
|
|
7186
|
-
const yMin = max(overflow.top, 0);
|
|
7187
|
-
const yMax = max(overflow.bottom, 0);
|
|
7188
|
-
if (isYAxis) {
|
|
7189
|
-
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
|
|
7190
|
-
} else {
|
|
7191
|
-
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
|
|
7192
|
-
}
|
|
7193
|
-
}
|
|
7194
|
-
await apply({
|
|
7195
|
-
...state,
|
|
7196
|
-
availableWidth,
|
|
7197
|
-
availableHeight
|
|
7198
|
-
});
|
|
7199
|
-
const nextDimensions = await platform.getDimensions(elements.floating);
|
|
7200
|
-
if (width !== nextDimensions.width || height !== nextDimensions.height) {
|
|
7201
|
-
return {
|
|
7202
|
-
reset: {
|
|
7203
|
-
rects: true
|
|
7204
|
-
}
|
|
7205
|
-
};
|
|
7206
|
-
}
|
|
7207
|
-
return {};
|
|
7208
|
-
}
|
|
7209
|
-
};
|
|
7210
|
-
};
|
|
7211
|
-
|
|
7212
6872
|
function hasWindow() {
|
|
7213
6873
|
return typeof window !== 'undefined';
|
|
7214
6874
|
}
|
|
@@ -8018,14 +7678,6 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
8018
7678
|
*/
|
|
8019
7679
|
const offset = offset$1;
|
|
8020
7680
|
|
|
8021
|
-
/**
|
|
8022
|
-
* Optimizes the visibility of the floating element by choosing the placement
|
|
8023
|
-
* that has the most space available automatically, without needing to specify a
|
|
8024
|
-
* preferred placement. Alternative to `flip`.
|
|
8025
|
-
* @see https://floating-ui.com/docs/autoPlacement
|
|
8026
|
-
*/
|
|
8027
|
-
autoPlacement;
|
|
8028
|
-
|
|
8029
7681
|
/**
|
|
8030
7682
|
* Optimizes the visibility of the floating element by shifting it in order to
|
|
8031
7683
|
* keep it in view when it will overflow the clipping boundary.
|
|
@@ -8041,21 +7693,6 @@ const shift = shift$1;
|
|
|
8041
7693
|
*/
|
|
8042
7694
|
const flip = flip$1;
|
|
8043
7695
|
|
|
8044
|
-
/**
|
|
8045
|
-
* Provides data that allows you to change the size of the floating element —
|
|
8046
|
-
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
8047
|
-
* width of the reference element.
|
|
8048
|
-
* @see https://floating-ui.com/docs/size
|
|
8049
|
-
*/
|
|
8050
|
-
size;
|
|
8051
|
-
|
|
8052
|
-
/**
|
|
8053
|
-
* Provides data to hide the floating element in applicable situations, such as
|
|
8054
|
-
* when it is not in the same clipping context as the reference element.
|
|
8055
|
-
* @see https://floating-ui.com/docs/hide
|
|
8056
|
-
*/
|
|
8057
|
-
hide;
|
|
8058
|
-
|
|
8059
7696
|
/**
|
|
8060
7697
|
* Provides data to position an inner element of the floating element so that it
|
|
8061
7698
|
* appears centered to the reference element.
|
|
@@ -8063,13 +7700,6 @@ hide;
|
|
|
8063
7700
|
*/
|
|
8064
7701
|
const arrow = arrow$1;
|
|
8065
7702
|
|
|
8066
|
-
/**
|
|
8067
|
-
* Provides improved positioning for inline reference elements that can span
|
|
8068
|
-
* over multiple lines, such as hyperlinks or range selections.
|
|
8069
|
-
* @see https://floating-ui.com/docs/inline
|
|
8070
|
-
*/
|
|
8071
|
-
inline;
|
|
8072
|
-
|
|
8073
7703
|
/**
|
|
8074
7704
|
* Built-in `limiter` that will stop `shift()` at a certain point.
|
|
8075
7705
|
*/
|
|
@@ -8119,28 +7749,71 @@ const placements = [
|
|
|
8119
7749
|
'left-start',
|
|
8120
7750
|
'left-end',
|
|
8121
7751
|
];
|
|
7752
|
+
// Alignments constants
|
|
7753
|
+
const alignments = ['start', null, 'end'];
|
|
8122
7754
|
/**
|
|
8123
7755
|
* FloatingUI Placement type guard
|
|
8124
7756
|
* @param placement - value to check
|
|
8125
7757
|
* @returns truthy if placement is valid
|
|
8126
7758
|
*/
|
|
8127
7759
|
const isFloatingUIPlacement = (placement) => placements.filter(p => !p.includes('auto')).includes(placement);
|
|
8128
|
-
|
|
8129
|
-
|
|
7760
|
+
/**
|
|
7761
|
+
* Round value by device pixel ratio
|
|
7762
|
+
* @param value - value to round
|
|
7763
|
+
* @returns rounded value
|
|
7764
|
+
*/
|
|
7765
|
+
const roundByDPR = (value) => {
|
|
7766
|
+
const dpr = window.devicePixelRatio || 1;
|
|
7767
|
+
return Math.round(value * dpr) / dpr;
|
|
7768
|
+
};
|
|
7769
|
+
/**
|
|
7770
|
+
* Get translation for tooltip
|
|
7771
|
+
* @param x - x-axis value
|
|
7772
|
+
* @param y - y-axis value
|
|
7773
|
+
* @returns translation string
|
|
7774
|
+
*/
|
|
7775
|
+
const getTransformation = (x, y) => {
|
|
7776
|
+
const tooltipX = isNaN(x) ? 0 : roundByDPR(x);
|
|
7777
|
+
const tooltipY = isNaN(y) ? 0 : roundByDPR(y);
|
|
7778
|
+
// No translation needed
|
|
7779
|
+
if (tooltipX === 0 && tooltipY === 0)
|
|
7780
|
+
return '';
|
|
7781
|
+
// Only one axis needs translation
|
|
7782
|
+
if (tooltipX === 0)
|
|
7783
|
+
return `translateY(${tooltipY}px)`;
|
|
7784
|
+
if (tooltipY === 0)
|
|
7785
|
+
return `translateX(${tooltipX}px)`;
|
|
7786
|
+
// Both axes need translation
|
|
7787
|
+
return `translate(${tooltipX}px,${tooltipY}px)`;
|
|
7788
|
+
};
|
|
7789
|
+
// https://floating-ui.com/docs/arrow
|
|
7790
|
+
// Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.
|
|
7791
|
+
// Due to this, either x or y will be undefined, depending on the side of placement.
|
|
7792
|
+
// The above code uses `isNaN` to check for null and undefined simultaneously.
|
|
7793
|
+
// Don't remove `isNaN`, because either value can be falsy (0), causing a bug!
|
|
7794
|
+
const numberToPx = (number) => {
|
|
7795
|
+
if (number !== null && !isNaN(number)) {
|
|
7796
|
+
if (number === 0)
|
|
7797
|
+
return '0';
|
|
7798
|
+
else
|
|
7799
|
+
return `${number}px`;
|
|
7800
|
+
}
|
|
7801
|
+
else
|
|
7802
|
+
return '';
|
|
7803
|
+
};
|
|
8130
7804
|
|
|
8131
7805
|
const mgPopoverCss = "/*!\n * @prop --mg-c-popover-color-background: Defines the background color of the popover. Default value: `--mg-b-color-light`.\n * @prop --mg-c-popover-color-text: Defines the font color of the popover. Default value: `--mg-b-color-font-dark`.\n * @prop --mg-c-popover-title-font-size: Defines the font size of the popover title. Default value: `--mg-b-font-size-h5`.\n * @prop --mg-c-popover-padding-vertical: Defines the vertical padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-padding-horizontal: Defines the horizontal padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-max-width: Defines the max-width of the popover. Default value: `--mg-b-size-floating-element-max-width`.\n * @prop --mg-c-popover-min-width: Defines the min-width of the popover. Default value: `unset`.\n */:host{--mg-c-card-spacing:var(--mg-c-popover-padding-vertical, var(--mg-b-size-16)) var(--mg-c-popover-padding-horizontal, var(--mg-b-size-16));--mg-c-card-border:none;--mg-c-card-border-radius:var(--mg-b-size-radius);--mg-c-card-color-background:var(--mg-c-popover-color-background);position:relative;display:contents}:host::slotted(*){display:inline-block}";
|
|
8132
|
-
const MgPopoverStyle0 = mgPopoverCss;
|
|
8133
7806
|
|
|
8134
7807
|
const MgPopover = class {
|
|
8135
7808
|
constructor(hostRef) {
|
|
8136
7809
|
index.registerInstance(this, hostRef);
|
|
8137
|
-
this.displayChange = index.createEvent(this, "display-change"
|
|
8138
|
-
this.componentClose = index.createEvent(this, "component-close"
|
|
7810
|
+
this.displayChange = index.createEvent(this, "display-change");
|
|
7811
|
+
this.componentClose = index.createEvent(this, "component-close");
|
|
8139
7812
|
/**
|
|
8140
7813
|
* Sets an `id` attribute.
|
|
8141
7814
|
* Needed by the input for accessibility `aria-decribedby`.
|
|
8142
7815
|
*/
|
|
8143
|
-
this.identifier = index_es.
|
|
7816
|
+
this.identifier = index_es.Pt('mg-popover');
|
|
8144
7817
|
/**
|
|
8145
7818
|
* Popover placement
|
|
8146
7819
|
*/
|
|
@@ -8170,16 +7843,6 @@ const MgPopover = class {
|
|
|
8170
7843
|
this.display = false;
|
|
8171
7844
|
}
|
|
8172
7845
|
};
|
|
8173
|
-
/**
|
|
8174
|
-
* Update aria-expanded attribute on interactive element
|
|
8175
|
-
* @param expanded - expanded state
|
|
8176
|
-
*/
|
|
8177
|
-
this.updateAriaExpanded = (expanded) => {
|
|
8178
|
-
const interactiveElement = this.element.querySelector(':not([slot])');
|
|
8179
|
-
if (interactiveElement !== null) {
|
|
8180
|
-
interactiveElement.setAttribute('aria-expanded', String(expanded));
|
|
8181
|
-
}
|
|
8182
|
-
};
|
|
8183
7846
|
/**
|
|
8184
7847
|
* Show popover
|
|
8185
7848
|
*/
|
|
@@ -8187,12 +7850,13 @@ const MgPopover = class {
|
|
|
8187
7850
|
// Make the popover visible
|
|
8188
7851
|
this.mgPopover.dataset.show = '';
|
|
8189
7852
|
// Update aria-expanded
|
|
8190
|
-
this.
|
|
7853
|
+
this.interactiveElement.setAttribute('aria-expanded', 'true');
|
|
8191
7854
|
// hide when click outside
|
|
8192
7855
|
// setTimeout is used to prevent event to trigger after creation
|
|
8193
7856
|
setTimeout(() => {
|
|
8194
7857
|
this.manageClickOutsideListeners('addEventListener');
|
|
8195
7858
|
});
|
|
7859
|
+
this.updatePopover();
|
|
8196
7860
|
};
|
|
8197
7861
|
/**
|
|
8198
7862
|
* Hide popover
|
|
@@ -8201,7 +7865,7 @@ const MgPopover = class {
|
|
|
8201
7865
|
// Hide the popover
|
|
8202
7866
|
this.mgPopover.removeAttribute('data-show');
|
|
8203
7867
|
// Update aria-expanded
|
|
8204
|
-
this.
|
|
7868
|
+
this.interactiveElement.setAttribute('aria-expanded', 'false');
|
|
8205
7869
|
// Remove event listener
|
|
8206
7870
|
this.manageClickOutsideListeners('removeEventListener');
|
|
8207
7871
|
};
|
|
@@ -8280,63 +7944,50 @@ const MgPopover = class {
|
|
|
8280
7944
|
return Array.from(new Set([...currentSidePlacements, ...sides.filter(otherSide => otherSide !== side)])).filter(isFloatingUIPlacement);
|
|
8281
7945
|
};
|
|
8282
7946
|
/**
|
|
8283
|
-
*
|
|
8284
|
-
* @
|
|
8285
|
-
*/
|
|
8286
|
-
this.
|
|
8287
|
-
|
|
8288
|
-
|
|
8289
|
-
|
|
8290
|
-
|
|
8291
|
-
|
|
8292
|
-
|
|
8293
|
-
|
|
8294
|
-
|
|
8295
|
-
|
|
8296
|
-
|
|
8297
|
-
|
|
8298
|
-
|
|
8299
|
-
|
|
8300
|
-
|
|
8301
|
-
|
|
8302
|
-
],
|
|
8303
|
-
}).then(({ x, y, placement, middlewareData }) => {
|
|
8304
|
-
Object.assign(this.mgPopover.style, {
|
|
8305
|
-
position: 'fixed',
|
|
8306
|
-
top: '0',
|
|
8307
|
-
left: '0',
|
|
8308
|
-
transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`,
|
|
8309
|
-
});
|
|
8310
|
-
// Update arrow style
|
|
8311
|
-
const staticSide = {
|
|
8312
|
-
top: 'bottom',
|
|
8313
|
-
right: 'left',
|
|
8314
|
-
bottom: 'top',
|
|
8315
|
-
left: 'right',
|
|
8316
|
-
}[placement.split('-')[0]];
|
|
8317
|
-
const arrowElement = this.mgPopover.querySelector('[data-floating-arrow]');
|
|
8318
|
-
const { x: arrowX, y: arrowY } = middlewareData.arrow;
|
|
8319
|
-
// https://floating-ui.com/docs/arrow
|
|
8320
|
-
// Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.
|
|
8321
|
-
// Due to this, either x or y will be undefined, depending on the side of placement.
|
|
8322
|
-
// The above code uses `isNaN` to check for null and undefined simultaneously.
|
|
8323
|
-
// Don't remove `isNaN`, because either value can be falsy (0), causing a bug!
|
|
8324
|
-
const numberToPx = (number) => (!isNaN(number) ? `${number}px` : '');
|
|
8325
|
-
if (arrowElement !== null)
|
|
8326
|
-
Object.assign(arrowElement.style, {
|
|
8327
|
-
position: 'absolute',
|
|
8328
|
-
left: numberToPx(arrowX),
|
|
8329
|
-
top: numberToPx(arrowY),
|
|
8330
|
-
[staticSide]: '1px',
|
|
8331
|
-
});
|
|
8332
|
-
this.mgPopover.setAttribute('data-placement', placement);
|
|
8333
|
-
});
|
|
7947
|
+
* Update popover position
|
|
7948
|
+
* @returns autoUpdate function
|
|
7949
|
+
*/
|
|
7950
|
+
this.updatePopover = () => autoUpdate(this.interactiveElement, this.mgPopover, async () => {
|
|
7951
|
+
const { x, y, placement, middlewareData } = await computePosition(this.interactiveElement, this.mgPopover, {
|
|
7952
|
+
placement: this.placement,
|
|
7953
|
+
strategy: 'fixed',
|
|
7954
|
+
middleware: [
|
|
7955
|
+
offset(0),
|
|
7956
|
+
flip({
|
|
7957
|
+
fallbackPlacements: this.getClosestPlacements(this.placement),
|
|
7958
|
+
}),
|
|
7959
|
+
shift({
|
|
7960
|
+
limiter: limitShift(),
|
|
7961
|
+
}),
|
|
7962
|
+
arrow({
|
|
7963
|
+
element: this.arrowElement,
|
|
7964
|
+
}),
|
|
7965
|
+
],
|
|
8334
7966
|
});
|
|
8335
|
-
|
|
7967
|
+
Object.assign(this.mgPopover.style, {
|
|
7968
|
+
transform: getTransformation(x, y),
|
|
7969
|
+
});
|
|
7970
|
+
// Arrow positioning
|
|
7971
|
+
if (this.arrowElement !== null) {
|
|
7972
|
+
const { x: arrowX, y: arrowY } = middlewareData.arrow;
|
|
7973
|
+
const staticSide = {
|
|
7974
|
+
top: 'bottom',
|
|
7975
|
+
right: 'left',
|
|
7976
|
+
bottom: 'top',
|
|
7977
|
+
left: 'right',
|
|
7978
|
+
}[placement.split('-')[0]];
|
|
7979
|
+
Object.assign(this.arrowElement.style, {
|
|
7980
|
+
left: numberToPx(arrowX),
|
|
7981
|
+
top: numberToPx(arrowY),
|
|
7982
|
+
[staticSide]: '1px',
|
|
7983
|
+
});
|
|
7984
|
+
this.mgPopover.setAttribute('data-placement', placement);
|
|
7985
|
+
}
|
|
7986
|
+
});
|
|
8336
7987
|
}
|
|
8337
7988
|
validateIdentifier(newValue) {
|
|
8338
|
-
if (!index_es.
|
|
8339
|
-
throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
7989
|
+
if (!index_es.Ut(newValue)) {
|
|
7990
|
+
throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${index_es.Gt(newValue)}.`);
|
|
8340
7991
|
}
|
|
8341
7992
|
// use renderPopoverContent to update popover-content id
|
|
8342
7993
|
this.renderPopoverContent();
|
|
@@ -8370,14 +8021,14 @@ const MgPopover = class {
|
|
|
8370
8021
|
* update popper position after props change on component did update hook to benefit from render ended
|
|
8371
8022
|
*/
|
|
8372
8023
|
componentDidUpdate() {
|
|
8373
|
-
this.
|
|
8024
|
+
this.updatePopover();
|
|
8374
8025
|
}
|
|
8375
8026
|
/**
|
|
8376
8027
|
* Check if component props are well configured on init
|
|
8377
8028
|
*/
|
|
8378
8029
|
componentWillLoad() {
|
|
8379
8030
|
// Get windows to attach events
|
|
8380
|
-
this.windows = index_es.
|
|
8031
|
+
this.windows = index_es.Bt(window);
|
|
8381
8032
|
// render mg-popover-content slot
|
|
8382
8033
|
this.renderPopoverContent();
|
|
8383
8034
|
this.validateCloseButton(this.closeButton);
|
|
@@ -8391,26 +8042,21 @@ const MgPopover = class {
|
|
|
8391
8042
|
componentDidLoad() {
|
|
8392
8043
|
// Get popover content
|
|
8393
8044
|
this.mgPopover = this.element.querySelector(`#${this.identifier}`);
|
|
8045
|
+
// Get arrow element
|
|
8046
|
+
this.arrowElement = this.mgPopover.querySelector('[data-floating-arrow]');
|
|
8394
8047
|
// Get interactive element (first element without slot attribute)
|
|
8395
|
-
|
|
8048
|
+
this.interactiveElement = this.element.querySelector(':not([slot])');
|
|
8396
8049
|
// Add aria attributes
|
|
8397
|
-
interactiveElement.setAttribute('aria-controls', this.identifier);
|
|
8398
|
-
interactiveElement.setAttribute('aria-expanded', `${this.display}`);
|
|
8399
|
-
// Initial styles configuration
|
|
8400
|
-
Object.assign(this.mgPopover.style, {
|
|
8401
|
-
position: 'fixed',
|
|
8402
|
-
});
|
|
8403
|
-
// Create Floating UI instance
|
|
8404
|
-
this.setFloatingUI(interactiveElement);
|
|
8050
|
+
this.interactiveElement.setAttribute('aria-controls', this.identifier);
|
|
8051
|
+
this.interactiveElement.setAttribute('aria-expanded', `${this.display}`);
|
|
8405
8052
|
// Add resize observer
|
|
8406
|
-
[interactiveElement, this.mgPopoverContent].forEach(element => {
|
|
8053
|
+
[this.interactiveElement, this.mgPopoverContent].forEach(element => {
|
|
8407
8054
|
new ResizeObserver(() => {
|
|
8408
|
-
this.
|
|
8409
|
-
this.setFloatingUI(interactiveElement);
|
|
8055
|
+
this.updatePopover();
|
|
8410
8056
|
}).observe(element);
|
|
8411
8057
|
});
|
|
8412
8058
|
// Add events to toggle display
|
|
8413
|
-
interactiveElement.addEventListener('click', () => {
|
|
8059
|
+
this.interactiveElement.addEventListener('click', () => {
|
|
8414
8060
|
if (!this.disabled)
|
|
8415
8061
|
this.display = !this.display;
|
|
8416
8062
|
});
|
|
@@ -8425,7 +8071,7 @@ const MgPopover = class {
|
|
|
8425
8071
|
if (!this.disabled && e.code === 'Escape') {
|
|
8426
8072
|
this.display = false;
|
|
8427
8073
|
this.componentClose.emit();
|
|
8428
|
-
interactiveElement.focus();
|
|
8074
|
+
this.interactiveElement.focus();
|
|
8429
8075
|
}
|
|
8430
8076
|
});
|
|
8431
8077
|
this.handleDisplay(this.display);
|
|
@@ -8434,15 +8080,16 @@ const MgPopover = class {
|
|
|
8434
8080
|
* Cleanup when component is disconnected
|
|
8435
8081
|
*/
|
|
8436
8082
|
disconnectedCallback() {
|
|
8083
|
+
var _a;
|
|
8437
8084
|
// Cleanup Floating UI instance
|
|
8438
|
-
this.
|
|
8085
|
+
(_a = this.updatePopover) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
8439
8086
|
}
|
|
8440
8087
|
/**
|
|
8441
8088
|
* Render
|
|
8442
8089
|
* @returns HTML Element
|
|
8443
8090
|
*/
|
|
8444
8091
|
render() {
|
|
8445
|
-
return (index.h(index.Host, { key: '
|
|
8092
|
+
return (index.h(index.Host, { key: '26244db5e6a35b731b5220c06b77ad1f14378245' }, index.h("slot", { key: '92ca05ac9637cf9634d86b177393fd6d0e6c6796' }), index.h("slot", { key: 'bdc8f8a8b4f2c891e473cdac5a305c3f1ab615b0', name: "content" })));
|
|
8446
8093
|
}
|
|
8447
8094
|
get element() { return index.getElement(this); }
|
|
8448
8095
|
static get watchers() { return {
|
|
@@ -8453,15 +8100,14 @@ const MgPopover = class {
|
|
|
8453
8100
|
"display": ["handleDisplay"]
|
|
8454
8101
|
}; }
|
|
8455
8102
|
};
|
|
8456
|
-
MgPopover.style =
|
|
8103
|
+
MgPopover.style = mgPopoverCss;
|
|
8457
8104
|
|
|
8458
|
-
const mgPopoverContentCss = ":host{position:
|
|
8459
|
-
const MgPopoverContentStyle0 = mgPopoverContentCss;
|
|
8105
|
+
const mgPopoverContentCss = ":host{position:fixed;z-index:2000;top:0;left:0;display:none;padding:var(--mg-b-size-8);color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}:host([data-placement^=left-start]),:host([data-placement^=left-end]),:host([data-placement^=right-start]),:host([data-placement^=right-end]){padding:0 var(--mg-b-size-8)}.mg-c-popover-content{--mg-c-card-max-width:var(--mg-c-popover-max-width);--mg-c-card-min-width:var(--mg-c-popover-min-width)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-8) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}:host([data-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-placement$=end][data-arrow-hide]),:host([data-placement^=left][data-arrow-hide]){padding-right:0}:host([data-placement$=start][data-arrow-hide]),:host([data-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-placement^=top]) ::slotted([slot=arrow]),:host([data-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-placement^=top]) ::slotted([slot=arrow])::before,:host([data-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-right:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-left:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-placement^=top]) ::slotted([slot=arrow]){bottom:var(--mg-b-size-border);filter:drop-shadow(0 0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=bottom]) ::slotted([slot=arrow]){top:var(--mg-b-size-border);filter:drop-shadow(0 -0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=left]) ::slotted([slot=arrow]),:host([data-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-placement^=left]) ::slotted([slot=arrow])::before,:host([data-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-top:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-bottom:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-placement^=left]) ::slotted([slot=arrow]){right:var(--mg-b-size-border);filter:drop-shadow(0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=right]) ::slotted([slot=arrow]){left:var(--mg-b-size-border);filter:drop-shadow(-0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=left-start]) ::slotted([slot=arrow]),:host([data-placement^=left-end]) ::slotted([slot=arrow]),:host([data-placement^=right-start]) ::slotted([slot=arrow]),:host([data-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius))}:host([data-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-card-border-radius)}";
|
|
8460
8106
|
|
|
8461
8107
|
const MgPopoverContent = class {
|
|
8462
8108
|
constructor(hostRef) {
|
|
8463
8109
|
index.registerInstance(this, hostRef);
|
|
8464
|
-
this.hideContent = index.createEvent(this, "hide-content"
|
|
8110
|
+
this.hideContent = index.createEvent(this, "hide-content");
|
|
8465
8111
|
/**
|
|
8466
8112
|
* Define if popover has a cross button
|
|
8467
8113
|
*/
|
|
@@ -8469,7 +8115,7 @@ const MgPopoverContent = class {
|
|
|
8469
8115
|
/**
|
|
8470
8116
|
* Component classes
|
|
8471
8117
|
*/
|
|
8472
|
-
this.classCollection = new index_es.
|
|
8118
|
+
this.classCollection = new index_es.Zt(['mg-c-popover-content']);
|
|
8473
8119
|
/**
|
|
8474
8120
|
* Handle action for close button
|
|
8475
8121
|
*/
|
|
@@ -8493,7 +8139,7 @@ const MgPopoverContent = class {
|
|
|
8493
8139
|
componentDidLoad() {
|
|
8494
8140
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
8495
8141
|
const slottedTitleElement = this.element.querySelector('[slot="title"]');
|
|
8496
|
-
if (slottedTitleElement && !index_es.
|
|
8142
|
+
if (slottedTitleElement && !index_es.qt(slottedTitleElement, headingTags)) {
|
|
8497
8143
|
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);
|
|
8498
8144
|
}
|
|
8499
8145
|
}
|
|
@@ -8502,19 +8148,18 @@ const MgPopoverContent = class {
|
|
|
8502
8148
|
* @returns HTML Element
|
|
8503
8149
|
*/
|
|
8504
8150
|
render() {
|
|
8505
|
-
return (index.h(index.Host, { key: '
|
|
8151
|
+
return (index.h(index.Host, { key: '8d2dd7d21518de744c18f0280b7b418f3a76acca' }, index.h("mg-card", { key: '8beab7c9fb692c1983515709a1ee888dc7e5157a', class: this.classCollection.join() }, this.closeButton && (index.h("mg-button", { key: 'e636569be26b0c741e0b03e806787d91b47ded5c', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { key: '3edc717cbe542494d892566c182883e20b1ca4cb', icon: "cross" }))), index.h("div", { key: 'd18525218972d92b6932984edb50844658e12970', class: "mg-c-popover-content__title" }, index.h("slot", { key: '2cceb41fd4ebb00b889e71cab211431e5894d04c', name: "title" })), index.h("slot", { key: 'a6615d9d7c85b32fb63d3d89db02fae2f8d5c1b2', name: "content" })), index.h("slot", { key: '0ff4bf72de19a3d56aafb64391cfc276d70e2f18', name: "arrow" })));
|
|
8506
8152
|
}
|
|
8507
8153
|
get element() { return index.getElement(this); }
|
|
8508
8154
|
};
|
|
8509
|
-
MgPopoverContent.style =
|
|
8155
|
+
MgPopoverContent.style = mgPopoverContentCss;
|
|
8510
8156
|
|
|
8511
8157
|
const mgSkipLinksCss = ".mg-c-skip-links{position:absolute;display:flex;min-height:var(--mg-b-size-56);align-items:center;background:var(--mg-b-color-light);opacity:0;transform:translateY(-100%)}.mg-c-skip-links:focus-within{position:relative;opacity:1;transform:translateY(0)}.mg-c-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;padding:0 var(--mg-b-size-16);margin:0;gap:var(--mg-b-spacing-actions);list-style:none}.mg-c-skip-links__link{display:inline-block;padding:var(--mg-b-size-8) var(--mg-b-size-16);color:var(--mg-b-color-dark)}.mg-c-skip-links__link:hover{background:hsl(var(--mg-b-color-dark-h), var(--mg-b-color-dark-s), var(--mg-b-color-dark-l), 10%)}";
|
|
8512
|
-
const MgSkipLinksStyle0 = mgSkipLinksCss;
|
|
8513
8158
|
|
|
8514
8159
|
const MgSkipLinks = class {
|
|
8515
8160
|
constructor(hostRef) {
|
|
8516
8161
|
index.registerInstance(this, hostRef);
|
|
8517
|
-
this.goToAnchor = index.createEvent(this, "go-to-anchor"
|
|
8162
|
+
this.goToAnchor = index.createEvent(this, "go-to-anchor");
|
|
8518
8163
|
/***********
|
|
8519
8164
|
* Methods *
|
|
8520
8165
|
**********/
|
|
@@ -8528,7 +8173,7 @@ const MgSkipLinks = class {
|
|
|
8528
8173
|
};
|
|
8529
8174
|
}
|
|
8530
8175
|
validateLinks(links) {
|
|
8531
|
-
if (links === undefined || links.length === 0 || links.some(link => !index_es.
|
|
8176
|
+
if (links === undefined || links.length === 0 || links.some(link => !index_es.De(link.href) || !link.href.startsWith('#') || !index_es.De(link.label))) {
|
|
8532
8177
|
throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
|
|
8533
8178
|
}
|
|
8534
8179
|
}
|
|
@@ -8547,14 +8192,14 @@ const MgSkipLinks = class {
|
|
|
8547
8192
|
* @returns HTML Element
|
|
8548
8193
|
*/
|
|
8549
8194
|
render() {
|
|
8550
|
-
return (index.h("nav", { key: '
|
|
8195
|
+
return (index.h("nav", { key: '0b4e4d6b9481a88faae78602b07c4f5e851da517', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, index.h("ul", { key: 'aaa15193eb2c9e1d9ee3b2e2a7d8d0fd37836ed7', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (index.h("li", { key: link.href }, index.h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
|
|
8551
8196
|
}
|
|
8552
8197
|
get element() { return index.getElement(this); }
|
|
8553
8198
|
static get watchers() { return {
|
|
8554
8199
|
"links": ["validateLinks"]
|
|
8555
8200
|
}; }
|
|
8556
8201
|
};
|
|
8557
|
-
MgSkipLinks.style =
|
|
8202
|
+
MgSkipLinks.style = mgSkipLinksCss;
|
|
8558
8203
|
|
|
8559
8204
|
/**
|
|
8560
8205
|
* Sizes
|
|
@@ -8570,7 +8215,6 @@ const textAlignments = ['left', 'center', 'right'];
|
|
|
8570
8215
|
const dataTypes = ['string', 'numeric', 'date'];
|
|
8571
8216
|
|
|
8572
8217
|
const mgTableCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}@font-face{font-family:\"Open Sans\";src:url(\"fonts/OpenSans-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:600;src:url(\"fonts/OpenSans-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:700;src:url(\"fonts/OpenSans-Bold.ttf\") format(\"truetype\")}p{margin:0}p+p{margin-top:var(--mg-b-size-8)}h1,.mg-u-h1{font-family:var(--mg-b-font-family-heading);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-weight:bold}h1,.mg-u-h1{font-size:var(--mg-b-font-size-h1)}h2,.mg-u-h2{font-size:var(--mg-b-font-size-h2)}h3,.mg-u-h3{font-size:var(--mg-b-font-size-h3)}h4,.mg-u-h4{font-size:var(--mg-b-font-size-h4)}h5,.mg-u-h5{font-size:var(--mg-b-font-size-h5)}h6,.mg-u-h6{font-size:var(--mg-b-font-size-h6)}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}small{font-size:var(--mg-b-small-font-size)}.mg-u-text-left{text-align:left !important}.mg-u-text-center{text-align:center !important}.mg-u-text-right{text-align:right !important}.mg-c-table{--mg-c-table-cell-spacing:var(--mg-b-size-8) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-40);--mg-c-table-header-cell-height:calc(var(--mg-b-size-min-height) + 2 * var(--mg-b-size-8));overflow:hidden;border:none;border-radius:var(--mg-b-size-8);background:var(--mg-b-color-light);border-collapse:separate;border-spacing:0;color:var(--mg-b-color-dark)}.mg-c-table td,.mg-c-table th{height:var(--mg-c-table-cell-height);box-sizing:border-box;padding:var(--mg-c-table-cell-spacing);text-align:start}.mg-c-table thead td,.mg-c-table th{font-weight:600}.mg-c-table thead{height:var(--mg-c-table-header-cell-height);background-color:var(--mg-b-color-app);color:var(--mg-b-color-light)}.mg-c-table :not(thead) tr:nth-child(even){background:color-mix(in srgb, var(--mg-b-color-app), transparent 80%)}.mg-c-table.mg-c-table--size-small{--mg-c-table-cell-spacing:var(--mg-b-size-4) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-32);--mg-c-table-header-cell-height:var(--mg-b-size-32)}.mg-c-table.mg-c-table--size-large{--mg-c-table-cell-height:var(--mg-c-table-header-cell-height)}.mg-c-table.mg-c-table--size-xlarge{--mg-c-table-cell-spacing:var(--mg-b-size-12) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-64);--mg-c-table-header-cell-height:var(--mg-b-size-64)}.mg-c-table.mg-c-table--full-width{width:100%}.mg-c-table-wrapper{overflow:auto}.mg-c-table thead td,.mg-c-table thead th{position:relative}.mg-c-table thead td .mg-c-table__sort-button,.mg-c-table thead th .mg-c-table__sort-button{padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600}.mg-c-table thead td .mg-c-table__sort-button::after,.mg-c-table thead th .mg-c-table__sort-button::after{position:absolute;content:\"\";inset:0}.mg-c-table thead td .mg-c-table__sort-button:hover,.mg-c-table thead th .mg-c-table__sort-button:hover{cursor:pointer}.mg-c-table thead td .mg-c-table__sort-button mg-icon,.mg-c-table thead th .mg-c-table__sort-button mg-icon{margin-left:var(--mg-b-size-4)}.mg-c-table thead td:has(.mg-c-table__sort-button):hover,.mg-c-table thead td[aria-sort=descending],.mg-c-table thead td[aria-sort=ascending],.mg-c-table thead th:has(.mg-c-table__sort-button):hover,.mg-c-table thead th[aria-sort=descending],.mg-c-table thead th[aria-sort=ascending]{background-color:color-mix(in srgb, var(--mg-b-color-app), black 10%)}";
|
|
8573
|
-
const MgTableStyle0 = mgTableCss;
|
|
8574
8218
|
|
|
8575
8219
|
/**
|
|
8576
8220
|
* Check if value is a valid align object
|
|
@@ -8635,11 +8279,11 @@ const MgTable = class {
|
|
|
8635
8279
|
/**
|
|
8636
8280
|
* Class collection
|
|
8637
8281
|
*/
|
|
8638
|
-
this.classCollection = new index_es.
|
|
8282
|
+
this.classCollection = new index_es.Zt([this.componentClass]);
|
|
8639
8283
|
}
|
|
8640
8284
|
watchSize(newValue, oldValue) {
|
|
8641
8285
|
if (!sizes$1.includes(newValue)) {
|
|
8642
|
-
throw new Error(`<mg-table> prop "size" must be one of: ${sizes$1.join(', ')}. Passed value: ${index_es.
|
|
8286
|
+
throw new Error(`<mg-table> prop "size" must be one of: ${sizes$1.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
8643
8287
|
}
|
|
8644
8288
|
else {
|
|
8645
8289
|
if (oldValue !== undefined) {
|
|
@@ -8658,7 +8302,7 @@ const MgTable = class {
|
|
|
8658
8302
|
}
|
|
8659
8303
|
watchColumns(newValue) {
|
|
8660
8304
|
if (newValue !== undefined && !isValidColumnsObject(newValue)) {
|
|
8661
|
-
throw new Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${index_es.
|
|
8305
|
+
throw new Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${index_es.Gt(newValue)}.`);
|
|
8662
8306
|
}
|
|
8663
8307
|
}
|
|
8664
8308
|
/**
|
|
@@ -8787,8 +8431,8 @@ const MgTable = class {
|
|
|
8787
8431
|
// Ensure caption is not visible (otherwhise the table does not have rounded corners)
|
|
8788
8432
|
captionTable.className = 'mg-u-visually-hidden';
|
|
8789
8433
|
// Link caption to div
|
|
8790
|
-
if (!index_es.
|
|
8791
|
-
captionTable.setAttribute('id', index_es.
|
|
8434
|
+
if (!index_es.De(captionTable.id)) {
|
|
8435
|
+
captionTable.setAttribute('id', index_es.Pt(`${this.componentClass}-caption`));
|
|
8792
8436
|
}
|
|
8793
8437
|
divWrapper.setAttribute('aria-labelledby', captionTable.id);
|
|
8794
8438
|
// Add sortable caption if neeeded
|
|
@@ -8833,7 +8477,7 @@ const MgTable = class {
|
|
|
8833
8477
|
"columns": ["watchColumns"]
|
|
8834
8478
|
}; }
|
|
8835
8479
|
};
|
|
8836
|
-
MgTable.style =
|
|
8480
|
+
MgTable.style = mgTableCss;
|
|
8837
8481
|
|
|
8838
8482
|
/**
|
|
8839
8483
|
* Available tabs items status
|
|
@@ -8850,7 +8494,6 @@ const Status = {
|
|
|
8850
8494
|
const sizes = ['medium', 'large'];
|
|
8851
8495
|
|
|
8852
8496
|
const mgTabsCss = "/*!\n * @prop --mg-c-tabs-color: Defines tabs global color, used for bottom line and active tabs. Default value: `--mg-b-color-app`.\n * @prop --mg-c-tabs-color-text: Defines tabs text color. Unset by default, fallback on `--mg-b-color-dark`.\n */.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium{padding:var(--mg-b-size-12) var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium.mg-c-tabs__navigation-button--horizontal{padding-bottom:var(--mg-b-size-12)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium.mg-c-tabs__navigation-button--vertical{padding-left:var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large{padding:var(--mg-b-size-16) var(--mg-b-size-32)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=metadata]){font-size:var(--mg-b-font-size-h4)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--horizontal{padding-bottom:var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--vertical{padding-left:var(--mg-b-size-32)}.mg-c-tabs__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:var(--mg-c-tabs-color-text, var(--mg-b-color-dark));column-gap:var(--mg-c-tabs-navigation-button-column-gap, var(--mg-b-size-8));cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-tabs__navigation-button:disabled,.mg-c-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-tabs__navigation-button:focus-visible{z-index:10}.mg-c-tabs__navigation-button:hover:not(.mg-c-tabs__navigation-button--disabled),.mg-c-tabs__navigation-button:focus-visible:not(.mg-c-tabs__navigation-button--disabled){background-color:color-mix(in srgb, var(--mg-c-tabs-color), transparent 90%)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active{color:var(--mg-c-tabs-color);font-weight:600}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--horizontal{box-shadow:inset 0 calc(-1*var(--mg-b-size-4)) var(--mg-c-tabs-color)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--vertical{box-shadow:inset var(--mg-b-size-4) 0 var(--mg-c-tabs-color)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--hidden{display:none}.mg-c-tabs__header{display:flex;flex-flow:row wrap;border-bottom:var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-c-tabs-color), transparent 90%)}.mg-c-tabs__content-container:focus-visible{outline:none}.mg-c-tabs__navigation-button-text{flex:0 0 content}";
|
|
8853
|
-
const MgTabsStyle0 = mgTabsCss;
|
|
8854
8497
|
|
|
8855
8498
|
/**
|
|
8856
8499
|
* type TabItem validation function
|
|
@@ -8861,7 +8504,7 @@ const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'stri
|
|
|
8861
8504
|
const MgTabs = class {
|
|
8862
8505
|
constructor(hostRef) {
|
|
8863
8506
|
index.registerInstance(this, hostRef);
|
|
8864
|
-
this.activeTabChange = index.createEvent(this, "active-tab-change"
|
|
8507
|
+
this.activeTabChange = index.createEvent(this, "active-tab-change");
|
|
8865
8508
|
/************
|
|
8866
8509
|
* Internal *
|
|
8867
8510
|
************/
|
|
@@ -8873,7 +8516,7 @@ const MgTabs = class {
|
|
|
8873
8516
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
8874
8517
|
* If not set, it will be created.
|
|
8875
8518
|
*/
|
|
8876
|
-
this.identifier = index_es.
|
|
8519
|
+
this.identifier = index_es.Pt('mg-tabs');
|
|
8877
8520
|
/**
|
|
8878
8521
|
* Define tabs size
|
|
8879
8522
|
*/
|
|
@@ -8885,7 +8528,7 @@ const MgTabs = class {
|
|
|
8885
8528
|
/**
|
|
8886
8529
|
* Component classes
|
|
8887
8530
|
*/
|
|
8888
|
-
this.classCollection = new index_es.
|
|
8531
|
+
this.classCollection = new index_es.Zt(['mg-c-tabs']);
|
|
8889
8532
|
/**
|
|
8890
8533
|
* Validate that new tab status can be `Status.ACTIVE`
|
|
8891
8534
|
* @param tab - tab item
|
|
@@ -8938,18 +8581,18 @@ const MgTabs = class {
|
|
|
8938
8581
|
*/
|
|
8939
8582
|
this.handleKeydown = (event) => {
|
|
8940
8583
|
const parent = event.target.parentElement;
|
|
8941
|
-
if ([
|
|
8584
|
+
if ([events_utils.Keys.ARROWLEFT, events_utils.Keys.ARROWRIGHT].includes(event.key)) {
|
|
8942
8585
|
this.tabFocus = Number(event.target.dataset.index);
|
|
8943
8586
|
parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '-1');
|
|
8944
8587
|
// Move right
|
|
8945
|
-
if (event.key ===
|
|
8588
|
+
if (event.key === events_utils.Keys.ARROWRIGHT) {
|
|
8946
8589
|
this.tabFocus++;
|
|
8947
8590
|
// If we're at the end, go to the start
|
|
8948
8591
|
if (this.tabFocus > this.tabs.length)
|
|
8949
8592
|
this.tabFocus = this.startIndex;
|
|
8950
8593
|
// Move left
|
|
8951
8594
|
}
|
|
8952
|
-
else if (event.key ===
|
|
8595
|
+
else if (event.key === events_utils.Keys.ARROWLEFT) {
|
|
8953
8596
|
this.tabFocus--;
|
|
8954
8597
|
// If we're at the start, move to the end
|
|
8955
8598
|
if (this.tabFocus < this.startIndex)
|
|
@@ -8966,7 +8609,7 @@ const MgTabs = class {
|
|
|
8966
8609
|
parentButtonElement.focus();
|
|
8967
8610
|
}
|
|
8968
8611
|
}
|
|
8969
|
-
else if (event.key ===
|
|
8612
|
+
else if (event.key === events_utils.Keys.TAB) {
|
|
8970
8613
|
this.resetFocus();
|
|
8971
8614
|
}
|
|
8972
8615
|
};
|
|
@@ -8983,7 +8626,7 @@ const MgTabs = class {
|
|
|
8983
8626
|
*/
|
|
8984
8627
|
this.resetFocus = () => {
|
|
8985
8628
|
// update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
|
|
8986
|
-
index_es.
|
|
8629
|
+
index_es.Xt(() => {
|
|
8987
8630
|
this.tabFocus = undefined;
|
|
8988
8631
|
Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
|
|
8989
8632
|
tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
|
|
@@ -9000,30 +8643,30 @@ const MgTabs = class {
|
|
|
9000
8643
|
};
|
|
9001
8644
|
}
|
|
9002
8645
|
watchIdentifier(newValue) {
|
|
9003
|
-
if (!index_es.
|
|
9004
|
-
console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
8646
|
+
if (!index_es.Ut(newValue)) {
|
|
8647
|
+
console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${index_es.Gt(newValue)}.`);
|
|
9005
8648
|
}
|
|
9006
8649
|
}
|
|
9007
8650
|
validateLabel(newValue) {
|
|
9008
|
-
if (!index_es.
|
|
9009
|
-
throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${index_es.
|
|
8651
|
+
if (!index_es.De(newValue)) {
|
|
8652
|
+
throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${index_es.Gt(newValue)}.`);
|
|
9010
8653
|
}
|
|
9011
8654
|
}
|
|
9012
8655
|
validateSize(newValue) {
|
|
9013
8656
|
if (!sizes.includes(newValue)) {
|
|
9014
|
-
throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${index_es.
|
|
8657
|
+
throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
9015
8658
|
}
|
|
9016
8659
|
this.classCollection.add(`mg-c-tabs--size-${this.size}`);
|
|
9017
8660
|
}
|
|
9018
8661
|
validateItems(newValue) {
|
|
9019
8662
|
// String array
|
|
9020
|
-
if (index_es.
|
|
8663
|
+
if (index_es.Dt(newValue))
|
|
9021
8664
|
this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
|
|
9022
8665
|
// Object array
|
|
9023
8666
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
9024
8667
|
this.tabs = newValue;
|
|
9025
8668
|
else
|
|
9026
|
-
throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${index_es.
|
|
8669
|
+
throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${index_es.Gt(newValue)}.`);
|
|
9027
8670
|
}
|
|
9028
8671
|
validateActiveTab(newValue) {
|
|
9029
8672
|
// when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
|
|
@@ -9048,7 +8691,7 @@ const MgTabs = class {
|
|
|
9048
8691
|
this.activeTabChange.emit(newValue);
|
|
9049
8692
|
}
|
|
9050
8693
|
else {
|
|
9051
|
-
throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${index_es.
|
|
8694
|
+
throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${index_es.Gt(newValue)}.`);
|
|
9052
8695
|
}
|
|
9053
8696
|
}
|
|
9054
8697
|
/*************
|
|
@@ -9083,7 +8726,7 @@ const MgTabs = class {
|
|
|
9083
8726
|
* @returns HTML Element
|
|
9084
8727
|
*/
|
|
9085
8728
|
render() {
|
|
9086
|
-
return (index.h("div", { key: '
|
|
8729
|
+
return (index.h("div", { key: '558c5ba517bef98ba711dd8992f901768d6770de', class: this.classCollection.join() }, index.h("header", { key: '0d36d49d51bbbb78bbf68c05e47271349fc58b96', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index$1) => (index.h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index$1), class: {
|
|
9087
8730
|
[`${this.buttonTabBaseClass}`]: true,
|
|
9088
8731
|
[`${this.buttonTabBaseClass}--horizontal`]: true,
|
|
9089
8732
|
[`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
|
|
@@ -9100,7 +8743,7 @@ const MgTabs = class {
|
|
|
9100
8743
|
"activeTab": ["validateActiveTab"]
|
|
9101
8744
|
}; }
|
|
9102
8745
|
};
|
|
9103
|
-
MgTabs.style =
|
|
8746
|
+
MgTabs.style = mgTabsCss;
|
|
9104
8747
|
|
|
9105
8748
|
/**
|
|
9106
8749
|
* List of all possibles variants
|
|
@@ -9108,7 +8751,6 @@ MgTabs.style = MgTabsStyle0;
|
|
|
9108
8751
|
const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
|
|
9109
8752
|
|
|
9110
8753
|
const mgTagCss = "/*!\n * @prop --mg-c-tag-height: Defines the height of the tag. Default value is `--mg-b-size-24`.\n * @prop --mg-c-tag-border-radius: Defines the border radius of the tag. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-tag-font-size: Defines the font size of the tag. Default value is `--mg-b-font-size-small`.\n */:host{display:inline-block}.mg-c-tag{display:inline-flex;min-height:var(--mg-c-tag-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-c-tag-height) - 2*var(--mg-b-size-border) - var(--mg-c-tag-font-size)*var(--mg-b-line-height))/2) calc(var(--mg-b-size-8) - var(--mg-b-size-border));border:var(--mg-b-size-border) solid;border-radius:var(--mg-c-tag-border-radius);font-size:var(--mg-c-tag-font-size);font-weight:600;text-align:center;vertical-align:middle}.mg-c-tag.mg-c-tag--primary{border-color:var(--mg-b-color-neutral-110);background-color:var(--mg-b-color-neutral-110);color:var(--mg-b-color-text-on-primary)}.mg-c-tag.mg-c-tag--primary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-neutral-110)}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft{border-color:var(--mg-b-color-neutral-20);background-color:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-neutral-110)}.mg-c-tag.mg-c-tag--secondary{border-color:var(--mg-b-color-neutral-10);background-color:var(--mg-b-color-neutral-10);color:var(--mg-b-color-text-on-secondary)}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-neutral-10)}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft{border-color:var(--mg-b-color-neutral-20);background-color:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-text-on-secondary)}.mg-c-tag.mg-c-tag--danger{border-color:var(--mg-b-color-danger);background-color:var(--mg-b-color-danger);color:var(--mg-b-color-text-on-danger)}.mg-c-tag.mg-c-tag--danger.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-danger)}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft{border-color:var(--mg-b-color-red-20);background-color:var(--mg-b-color-red-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-danger)}.mg-c-tag.mg-c-tag--info{border-color:var(--mg-b-color-info);background-color:var(--mg-b-color-info);color:var(--mg-b-color-text-on-info)}.mg-c-tag.mg-c-tag--info.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-info)}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft{border-color:var(--mg-b-color-blue-20);background-color:var(--mg-b-color-blue-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-info)}.mg-c-tag.mg-c-tag--success{border-color:var(--mg-b-color-success);background-color:var(--mg-b-color-success);color:var(--mg-b-color-text-on-success)}.mg-c-tag.mg-c-tag--success.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-success)}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft{border-color:var(--mg-b-color-green-20);background-color:var(--mg-b-color-green-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-success)}.mg-c-tag.mg-c-tag--warning{border-color:var(--mg-b-color-warning);background-color:var(--mg-b-color-warning);color:var(--mg-b-color-text-on-warning)}.mg-c-tag.mg-c-tag--warning.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-warning)}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft{border-color:var(--mg-b-color-yellow-20);background-color:var(--mg-b-color-yellow-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-warning)}::slotted(mg-icon){margin-right:var(--mg-b-size-4)}slot{display:inline-flex;align-items:center}";
|
|
9111
|
-
const MgTagStyle0 = mgTagCss;
|
|
9112
8754
|
|
|
9113
8755
|
const MgTag = class {
|
|
9114
8756
|
constructor(hostRef) {
|
|
@@ -9122,15 +8764,23 @@ const MgTag = class {
|
|
|
9122
8764
|
/**
|
|
9123
8765
|
* Define tag variant
|
|
9124
8766
|
*/
|
|
9125
|
-
this.variant =
|
|
8767
|
+
this.variant = 'primary';
|
|
8768
|
+
/**
|
|
8769
|
+
* Define if tag is using outline style
|
|
8770
|
+
*/
|
|
8771
|
+
this.outline = false;
|
|
8772
|
+
/**
|
|
8773
|
+
* Define if tag is using soft style
|
|
8774
|
+
*/
|
|
8775
|
+
this.soft = false;
|
|
9126
8776
|
/**
|
|
9127
8777
|
* Component classes
|
|
9128
8778
|
*/
|
|
9129
|
-
this.classCollection = new index_es.
|
|
8779
|
+
this.classCollection = new index_es.Zt(['mg-c-tag']);
|
|
9130
8780
|
}
|
|
9131
8781
|
validateVariant(newValue, oldValue) {
|
|
9132
8782
|
if (!variants.includes(newValue)) {
|
|
9133
|
-
throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${index_es.
|
|
8783
|
+
throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${index_es.Gt(newValue)}.`);
|
|
9134
8784
|
}
|
|
9135
8785
|
else {
|
|
9136
8786
|
if (oldValue !== undefined) {
|
|
@@ -9163,7 +8813,7 @@ const MgTag = class {
|
|
|
9163
8813
|
* @param textContent - html element textContent property
|
|
9164
8814
|
*/
|
|
9165
8815
|
validateTextContent(textContent) {
|
|
9166
|
-
if (!index_es.
|
|
8816
|
+
if (!index_es.De(textContent))
|
|
9167
8817
|
throw new Error('<mg-tag> slot must contain a text content.');
|
|
9168
8818
|
}
|
|
9169
8819
|
/*************
|
|
@@ -9183,7 +8833,7 @@ const MgTag = class {
|
|
|
9183
8833
|
* @returns HTML Element
|
|
9184
8834
|
*/
|
|
9185
8835
|
render() {
|
|
9186
|
-
return (index.h("span", { key: '
|
|
8836
|
+
return (index.h("span", { key: '2517dd6020afcf91017c9cfb6a1f3037c0b6a7c4', class: this.classCollection.join() }, index.h("slot", { key: '0f0f0f82274342a87d98125631174f40060105af' })));
|
|
9187
8837
|
}
|
|
9188
8838
|
get element() { return index.getElement(this); }
|
|
9189
8839
|
static get watchers() { return {
|
|
@@ -9192,7 +8842,7 @@ const MgTag = class {
|
|
|
9192
8842
|
"soft": ["validateSoft"]
|
|
9193
8843
|
}; }
|
|
9194
8844
|
};
|
|
9195
|
-
MgTag.style =
|
|
8845
|
+
MgTag.style = mgTagCss;
|
|
9196
8846
|
|
|
9197
8847
|
const Guard = {
|
|
9198
8848
|
FOCUS: 'focus',
|
|
@@ -9202,7 +8852,6 @@ const Guard = {
|
|
|
9202
8852
|
};
|
|
9203
8853
|
|
|
9204
8854
|
const mgTooltipCss = "/*!\n * @prop --mg-c-tooltip-border-radius: Defines the border radius of the tooltip. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-tooltip-color-background: Defines the background color of the tooltip. Default value: `--mg-b-color-dark`.\n * @prop --mg-c-tooltip-color-text: Defines the font color of the tooltip. Default value: `--mg-b-color-light`.\n */:host{display:inline-block}";
|
|
9205
|
-
const MgTooltipStyle0 = mgTooltipCss;
|
|
9206
8855
|
|
|
9207
8856
|
/**
|
|
9208
8857
|
* HTMLMgButtonElement type guard
|
|
@@ -9217,7 +8866,7 @@ const MgTooltip = class {
|
|
|
9217
8866
|
* Sets an `id` attribute.
|
|
9218
8867
|
* Needed by the input for accessibility `aria-decribedby`.
|
|
9219
8868
|
*/
|
|
9220
|
-
this.identifier = index_es.
|
|
8869
|
+
this.identifier = index_es.Pt('mg-tooltip');
|
|
9221
8870
|
/**
|
|
9222
8871
|
* Tooltip placement
|
|
9223
8872
|
*/
|
|
@@ -9237,12 +8886,13 @@ const MgTooltip = class {
|
|
|
9237
8886
|
// Make the tooltip visible
|
|
9238
8887
|
this.mgTooltipContent.dataset.show = '';
|
|
9239
8888
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
9240
|
-
index_es.
|
|
8889
|
+
index_es.Xt(() => {
|
|
9241
8890
|
this.windows.forEach((localWindow) => {
|
|
9242
8891
|
localWindow.addEventListener('click', this.handleClickOutside, false);
|
|
9243
8892
|
localWindow.addEventListener('keydown', this.handlePressEscape, false);
|
|
9244
8893
|
});
|
|
9245
8894
|
});
|
|
8895
|
+
this.updateTooltip();
|
|
9246
8896
|
};
|
|
9247
8897
|
/**
|
|
9248
8898
|
* Hide tooltip
|
|
@@ -9280,8 +8930,9 @@ const MgTooltip = class {
|
|
|
9280
8930
|
* @param condition - additionnal condition to apply display prop newValue
|
|
9281
8931
|
*/
|
|
9282
8932
|
this.setDisplay = (newValue, condition = true) => {
|
|
9283
|
-
if (!this.disabled && condition)
|
|
8933
|
+
if (!this.disabled && condition && this.display !== newValue) {
|
|
9284
8934
|
this.display = newValue;
|
|
8935
|
+
}
|
|
9285
8936
|
};
|
|
9286
8937
|
/**
|
|
9287
8938
|
* Action for tooltip element and tooltiped element mouse listener
|
|
@@ -9339,52 +8990,43 @@ const MgTooltip = class {
|
|
|
9339
8990
|
}
|
|
9340
8991
|
};
|
|
9341
8992
|
/**
|
|
9342
|
-
*
|
|
9343
|
-
* @
|
|
8993
|
+
* Update tooltip position
|
|
8994
|
+
* @returns autoUpdate function
|
|
9344
8995
|
*/
|
|
9345
|
-
this.
|
|
9346
|
-
//
|
|
8996
|
+
this.updateTooltip = () => autoUpdate(this.tooltipedElement, this.mgTooltipContent, async () => {
|
|
8997
|
+
// Placement
|
|
8998
|
+
const { x, y, placement, middlewareData } = await computePosition(this.tooltipedElement, this.mgTooltipContent, {
|
|
8999
|
+
placement: this.placement,
|
|
9000
|
+
strategy: this.tooltipStrategy,
|
|
9001
|
+
middleware: [
|
|
9002
|
+
offset(8),
|
|
9003
|
+
flip(),
|
|
9004
|
+
shift({
|
|
9005
|
+
limiter: limitShift(),
|
|
9006
|
+
}),
|
|
9007
|
+
arrow({ element: this.arrowElement }),
|
|
9008
|
+
],
|
|
9009
|
+
});
|
|
9010
|
+
// Positioning
|
|
9347
9011
|
Object.assign(this.mgTooltipContent.style, {
|
|
9348
|
-
position:
|
|
9349
|
-
|
|
9350
|
-
left: '0',
|
|
9351
|
-
transform: 'translate(0, 0)',
|
|
9012
|
+
position: this.tooltipStrategy,
|
|
9013
|
+
transform: getTransformation(x, y),
|
|
9352
9014
|
});
|
|
9353
|
-
//
|
|
9354
|
-
|
|
9355
|
-
|
|
9356
|
-
|
|
9357
|
-
|
|
9358
|
-
|
|
9359
|
-
|
|
9360
|
-
|
|
9361
|
-
|
|
9362
|
-
|
|
9363
|
-
|
|
9364
|
-
|
|
9365
|
-
const staticSide = {
|
|
9366
|
-
top: 'bottom',
|
|
9367
|
-
right: 'left',
|
|
9368
|
-
bottom: 'top',
|
|
9369
|
-
left: 'right',
|
|
9370
|
-
}[placement.split('-')[0]];
|
|
9371
|
-
const arrowElement = this.mgTooltipContent.querySelector('[data-floating-arrow]');
|
|
9372
|
-
// https://floating-ui.com/docs/arrow
|
|
9373
|
-
// Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.
|
|
9374
|
-
// Due to this, either x or y will be undefined, depending on the side of placement.
|
|
9375
|
-
// The above code uses `isNaN` to check for null and undefined simultaneously.
|
|
9376
|
-
// Don’t remove `isNaN`, because either value can be falsy (0), causing a bug!
|
|
9377
|
-
const numberToPx = (number) => (!isNaN(number) ? `${number}px` : '');
|
|
9378
|
-
Object.assign(arrowElement.style, {
|
|
9379
|
-
left: numberToPx(arrowX),
|
|
9380
|
-
top: numberToPx(arrowY),
|
|
9381
|
-
[staticSide]: '-4px',
|
|
9382
|
-
position: 'absolute',
|
|
9383
|
-
});
|
|
9384
|
-
this.mgTooltipContent.setAttribute('data-placement', placement);
|
|
9385
|
-
});
|
|
9015
|
+
// Arrow positioning
|
|
9016
|
+
const { x: arrowX, y: arrowY } = middlewareData.arrow;
|
|
9017
|
+
const staticSide = {
|
|
9018
|
+
top: 'bottom',
|
|
9019
|
+
right: 'left',
|
|
9020
|
+
bottom: 'top',
|
|
9021
|
+
left: 'right',
|
|
9022
|
+
}[placement.split('-')[0]];
|
|
9023
|
+
Object.assign(this.arrowElement.style, {
|
|
9024
|
+
left: numberToPx(arrowX),
|
|
9025
|
+
top: numberToPx(arrowY),
|
|
9026
|
+
[staticSide]: '-4px',
|
|
9386
9027
|
});
|
|
9387
|
-
|
|
9028
|
+
this.mgTooltipContent.setAttribute('data-placement', placement);
|
|
9029
|
+
});
|
|
9388
9030
|
/**
|
|
9389
9031
|
* Define selected element to become tooltip selector and init listeners
|
|
9390
9032
|
* @param element - tooltiped element
|
|
@@ -9426,18 +9068,15 @@ const MgTooltip = class {
|
|
|
9426
9068
|
// set guard when one of mutations is for a disabled with disabled-on-click
|
|
9427
9069
|
if (mutationList.some((mutation) => mutation.target.disabled && mutation.target.disableOnClick)) {
|
|
9428
9070
|
this.guard = Guard.DISABLE_ON_CLICK;
|
|
9429
|
-
}
|
|
9430
|
-
// when the disabled-on-click guard is running we stop process
|
|
9431
|
-
if (this.guard === Guard.DISABLE_ON_CLICK)
|
|
9432
9071
|
return;
|
|
9072
|
+
}
|
|
9433
9073
|
// update button wrapper
|
|
9434
9074
|
this.setMgButtonWrapper(mgButton);
|
|
9435
9075
|
// Since Firefox doesn't trigger a "blur" event when the "disabled" attribute is added or removed from a button
|
|
9436
9076
|
// we have to manually unlock the guard because the "blur" handler of the tooltipedElement won't do it.
|
|
9437
9077
|
this.resetGuard();
|
|
9438
9078
|
// update Floating UI instance
|
|
9439
|
-
this.
|
|
9440
|
-
this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
|
|
9079
|
+
this.updateTooltip();
|
|
9441
9080
|
}).observe(mgButton, { attributes: true });
|
|
9442
9081
|
};
|
|
9443
9082
|
/**
|
|
@@ -9456,15 +9095,15 @@ const MgTooltip = class {
|
|
|
9456
9095
|
};
|
|
9457
9096
|
}
|
|
9458
9097
|
watchIdentifier(newValue) {
|
|
9459
|
-
if (!index_es.
|
|
9460
|
-
throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
9098
|
+
if (!index_es.Ut(newValue)) {
|
|
9099
|
+
throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${index_es.Gt(newValue)}.`);
|
|
9461
9100
|
}
|
|
9462
9101
|
// use renderTooltipContent to update tooltip-content id
|
|
9463
9102
|
this.renderTooltipContent();
|
|
9464
9103
|
}
|
|
9465
9104
|
watchMessage(newValue) {
|
|
9466
|
-
if (!index_es.
|
|
9467
|
-
throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${index_es.
|
|
9105
|
+
if (!index_es.De(newValue)) {
|
|
9106
|
+
throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${index_es.Gt(newValue)}.`);
|
|
9468
9107
|
}
|
|
9469
9108
|
if (this.mgTooltipContent !== undefined)
|
|
9470
9109
|
this.mgTooltipContent.message = newValue;
|
|
@@ -9523,7 +9162,7 @@ const MgTooltip = class {
|
|
|
9523
9162
|
*/
|
|
9524
9163
|
componentWillLoad() {
|
|
9525
9164
|
// Get windows to attach events
|
|
9526
|
-
this.windows = index_es.
|
|
9165
|
+
this.windows = index_es.Bt(window);
|
|
9527
9166
|
// Get tooltip element
|
|
9528
9167
|
this.renderTooltipContent();
|
|
9529
9168
|
//validate properties
|
|
@@ -9531,6 +9170,8 @@ const MgTooltip = class {
|
|
|
9531
9170
|
this.watchDisabled(this.disabled);
|
|
9532
9171
|
this.watchMessage(this.message);
|
|
9533
9172
|
this.watchIdentifier(this.identifier);
|
|
9173
|
+
// define if the tooltip is inside a popover
|
|
9174
|
+
this.tooltipStrategy = this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed';
|
|
9534
9175
|
}
|
|
9535
9176
|
/**
|
|
9536
9177
|
* Get slotted element
|
|
@@ -9542,8 +9183,10 @@ const MgTooltip = class {
|
|
|
9542
9183
|
// get slotted element wich is not the tooltip
|
|
9543
9184
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
9544
9185
|
// Get interactive element
|
|
9545
|
-
const interactiveElement = slotElement.matches(index_es.
|
|
9186
|
+
const interactiveElement = slotElement.matches(index_es.Ht) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index_es.Ht);
|
|
9546
9187
|
this.setTooltipedElement(interactiveElement || slotElement);
|
|
9188
|
+
// Set arrow element
|
|
9189
|
+
this.arrowElement = this.mgTooltipContent.querySelector('[data-floating-arrow]');
|
|
9547
9190
|
// Check if slotted element is a disabled mg-button
|
|
9548
9191
|
// In this case we wrap the mg-button into a div to enable the tooltip
|
|
9549
9192
|
if (isButton(slotElement)) {
|
|
@@ -9559,8 +9202,6 @@ const MgTooltip = class {
|
|
|
9559
9202
|
}
|
|
9560
9203
|
// apply a11y aria
|
|
9561
9204
|
this.setAriaDescribedby(slotElement);
|
|
9562
|
-
// set Tooltip
|
|
9563
|
-
this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
|
|
9564
9205
|
// add document keyboard handler
|
|
9565
9206
|
document.addEventListener('keydown', this.handlePressEscape);
|
|
9566
9207
|
// check props
|
|
@@ -9570,28 +9211,26 @@ const MgTooltip = class {
|
|
|
9570
9211
|
* update popper position after props change on component did update hook to benefit from render ended
|
|
9571
9212
|
*/
|
|
9572
9213
|
componentDidUpdate() {
|
|
9573
|
-
this.
|
|
9574
|
-
this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
|
|
9214
|
+
this.updateTooltip();
|
|
9575
9215
|
}
|
|
9576
9216
|
/**
|
|
9577
9217
|
* remove listeners
|
|
9578
9218
|
*/
|
|
9579
9219
|
disconnectedCallback() {
|
|
9580
|
-
var _a;
|
|
9220
|
+
var _a, _b;
|
|
9581
9221
|
document.removeEventListener('keydown', this.handlePressEscape);
|
|
9582
9222
|
(_a = this.windows) === null || _a === void 0 ? void 0 : _a.forEach((localWindow) => {
|
|
9583
9223
|
localWindow.removeEventListener('click', this.handleClickOutside, false);
|
|
9584
9224
|
localWindow.removeEventListener('keydown', this.handlePressEscape, false);
|
|
9585
9225
|
});
|
|
9586
|
-
|
|
9587
|
-
this.floatingUICleanup();
|
|
9226
|
+
(_b = this.updateTooltip) === null || _b === void 0 ? void 0 : _b.call(this);
|
|
9588
9227
|
}
|
|
9589
9228
|
/**
|
|
9590
9229
|
* Render
|
|
9591
9230
|
* @returns HTML Element
|
|
9592
9231
|
*/
|
|
9593
9232
|
render() {
|
|
9594
|
-
return (index.h(index.Host, { key: '
|
|
9233
|
+
return (index.h(index.Host, { key: 'dab470c730b1541ab5be487222da8ba3643501ae' }, index.h("slot", { key: 'a6f5d444e3521d93cf9f39ccffcd68cfde4f8101' }), index.h("slot", { key: 'ba4d98f953453a710379cb4ce28f1c468a34ffc4', name: "content" })));
|
|
9595
9234
|
}
|
|
9596
9235
|
get element() { return index.getElement(this); }
|
|
9597
9236
|
static get watchers() { return {
|
|
@@ -9602,10 +9241,9 @@ const MgTooltip = class {
|
|
|
9602
9241
|
"disabled": ["watchDisabled"]
|
|
9603
9242
|
}; }
|
|
9604
9243
|
};
|
|
9605
|
-
MgTooltip.style =
|
|
9244
|
+
MgTooltip.style = mgTooltipCss;
|
|
9606
9245
|
|
|
9607
|
-
const mgTooltipContentCss = ":host{z-index:1000;display:none;max-width:var(--mg-b-size-floating-element-max-width);box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-c-tooltip-border-radius);background-color:var(--mg-c-tooltip-color-background);color:var(--mg-c-tooltip-color-text);font-family:var(--mg-b-font-family);font-size:var(--mg-b-font-size);font-weight:400;text-align:start}:host([data-show]){display:block}::slotted([slot=arrow]){visibility:hidden}::slotted([slot=arrow])::before{content:\"\";transform:rotate(45deg);visibility:visible}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;z-index:9999;width:var(--mg-b-size-8);height:var(--mg-b-size-8);background-color:var(--mg-c-tooltip-color-background)}:host([data-placement^=top])>::slotted([slot=arrow]){bottom:calc(-1*var(--mg-b-size-4))}:host([data-placement^=bottom])>::slotted([slot=arrow]){top:calc(-1*var(--mg-b-size-4))}:host([data-placement^=left])>::slotted([slot=arrow]){right:calc(-1*var(--mg-b-size-4))}:host([data-placement^=right])>::slotted([slot=arrow]){left:calc(-1*var(--mg-b-size-4))}";
|
|
9608
|
-
const MgTooltipContentStyle0 = mgTooltipContentCss;
|
|
9246
|
+
const mgTooltipContentCss = ":host{z-index:1000;top:0;left:0;display:none;width:max-content;max-width:var(--mg-b-size-floating-element-max-width);box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-c-tooltip-border-radius);background-color:var(--mg-c-tooltip-color-background);color:var(--mg-c-tooltip-color-text);font-family:var(--mg-b-font-family);font-size:var(--mg-b-font-size);font-weight:400;text-align:start}:host([data-show]){display:block}::slotted([slot=arrow]){position:absolute;visibility:hidden}::slotted([slot=arrow])::before{content:\"\";transform:rotate(45deg);visibility:visible}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;z-index:9999;width:var(--mg-b-size-8);height:var(--mg-b-size-8);background-color:var(--mg-c-tooltip-color-background)}:host([data-placement^=top])>::slotted([slot=arrow]){bottom:calc(-1*var(--mg-b-size-4))}:host([data-placement^=bottom])>::slotted([slot=arrow]){top:calc(-1*var(--mg-b-size-4))}:host([data-placement^=left])>::slotted([slot=arrow]){right:calc(-1*var(--mg-b-size-4))}:host([data-placement^=right])>::slotted([slot=arrow]){left:calc(-1*var(--mg-b-size-4))}";
|
|
9609
9247
|
|
|
9610
9248
|
const MgTooltipContent = class {
|
|
9611
9249
|
constructor(hostRef) {
|
|
@@ -9622,7 +9260,7 @@ const MgTooltipContent = class {
|
|
|
9622
9260
|
return (index.h(index.Host, { key: '2221de3ca0ef7c9d6e46e24b19c69007fababf81', role: "tooltip" }, index.h("span", { key: '9e14f7f5b3f5e5060ed9f42e8d7259b17575168e', innerHTML: this.message, class: "mg-tooltip-content__message" }), index.h("slot", { key: 'bc083567d77e8f4ffccee98b96036ba8ac494fb6', name: "arrow" })));
|
|
9623
9261
|
}
|
|
9624
9262
|
};
|
|
9625
|
-
MgTooltipContent.style =
|
|
9263
|
+
MgTooltipContent.style = mgTooltipContentCss;
|
|
9626
9264
|
|
|
9627
9265
|
exports.mg_action_more = MgActionMore;
|
|
9628
9266
|
exports.mg_badge = MgBadge;
|
|
@@ -9661,5 +9299,6 @@ exports.mg_tabs = MgTabs;
|
|
|
9661
9299
|
exports.mg_tag = MgTag;
|
|
9662
9300
|
exports.mg_tooltip = MgTooltip;
|
|
9663
9301
|
exports.mg_tooltip_content = MgTooltipContent;
|
|
9302
|
+
//# sourceMappingURL=mg-action-more.mg-badge.mg-button.mg-card.mg-character-left.mg-details.mg-divider.mg-form.mg-icon.mg-illustrated-message.mg-input.mg-input-checkbox.mg-input-checkbox-paginated.mg-input-date.mg-input-numeric.mg-input-password.mg-input-radio.mg-input-select.mg-input-text.mg-input-textarea.mg-input-title.mg-input-toggle.mg-item-more.mg-menu.mg-menu-item.mg-message.mg-modal.mg-pagination.mg-panel.mg-popover.mg-popover-content.mg-skip-links.mg-table.mg-tabs.mg-tag.mg-tooltip.mg-tooltip-content.entry.cjs.js.map
|
|
9664
9303
|
|
|
9665
9304
|
//# sourceMappingURL=mg-action-more_37.cjs.entry.js.map
|