@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,7 +1,8 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-
|
|
2
|
-
import {
|
|
3
|
-
import { i as initLocales } from './index-
|
|
4
|
-
import {
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-CAuxALt5.js';
|
|
2
|
+
import { P as Pt, G as Gt, Z as Zt, a as De, X as Xt, U as Ut, b as qt, J as Jt, L as Lt, F as Ft, c as ar, d as ir, l as lr, f as fr, e as cr, o as or, D as Dt, B as Bt, g as Ht } from './index.es-rLV3KFPd.js';
|
|
3
|
+
import { i as initLocales } from './index-DmsGewMC.js';
|
|
4
|
+
import { K as Keys } from './events.utils-yMGqY8YG.js';
|
|
5
|
+
import { t as tooltipPositions, b as classFieldset, c as classReadonly, a as classDisabled, d as classVerticalList, w as widths } from './mg-input.conf-CNgv8hc5.js';
|
|
5
6
|
|
|
6
7
|
/**
|
|
7
8
|
* Available menu item status values
|
|
@@ -30,7 +31,6 @@ const directions$1 = {
|
|
|
30
31
|
const sizes$5 = ['medium', 'large', 'xlarge'];
|
|
31
32
|
|
|
32
33
|
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)}";
|
|
33
|
-
const MgActionMoreStyle0 = mgActionMoreCss;
|
|
34
34
|
|
|
35
35
|
/**
|
|
36
36
|
* MgActionMore['items'] type guard
|
|
@@ -74,11 +74,15 @@ const MgActionMore = class {
|
|
|
74
74
|
************/
|
|
75
75
|
this.name = 'mg-action-more';
|
|
76
76
|
this.classBase = 'mg-c-action-more';
|
|
77
|
-
this.mgPopoverIdentifier =
|
|
77
|
+
this.mgPopoverIdentifier = Pt(this.name);
|
|
78
78
|
/**
|
|
79
79
|
* Define button properties
|
|
80
80
|
*/
|
|
81
81
|
this.button = { variant: 'flat', isIcon: true };
|
|
82
|
+
/**
|
|
83
|
+
* Define if chevron is display
|
|
84
|
+
*/
|
|
85
|
+
this.displayChevron = false;
|
|
82
86
|
/**
|
|
83
87
|
* Menu expanded state
|
|
84
88
|
*/
|
|
@@ -117,15 +121,15 @@ const MgActionMore = class {
|
|
|
117
121
|
}
|
|
118
122
|
validateItems(newValue) {
|
|
119
123
|
if (!isMgActionMoreItems(newValue)) {
|
|
120
|
-
throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${
|
|
124
|
+
throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${Gt(newValue)}.`);
|
|
121
125
|
}
|
|
122
126
|
else if (isMgActionMoreItems(newValue) && newValue.length > 0 && (isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {
|
|
123
|
-
throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${
|
|
127
|
+
throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${Gt(newValue)}.`);
|
|
124
128
|
}
|
|
125
129
|
}
|
|
126
130
|
validateIcon(newValue) {
|
|
127
131
|
if (newValue && !isMgActionMoreIcon(newValue)) {
|
|
128
|
-
throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${
|
|
132
|
+
throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${Gt(newValue)}.`);
|
|
129
133
|
}
|
|
130
134
|
else if ((newValue === null || newValue === void 0 ? void 0 : newValue.icon) === undefined && Boolean(this.button.isIcon)) {
|
|
131
135
|
this.icon = { icon: 'ellipsis' };
|
|
@@ -133,7 +137,7 @@ const MgActionMore = class {
|
|
|
133
137
|
}
|
|
134
138
|
validateButton(newValue) {
|
|
135
139
|
if (newValue && !isMgActionMoreButton(newValue)) {
|
|
136
|
-
throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${
|
|
140
|
+
throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${Gt(newValue)}.`);
|
|
137
141
|
}
|
|
138
142
|
}
|
|
139
143
|
validateDisplayChevron(newValue) {
|
|
@@ -167,9 +171,9 @@ const MgActionMore = class {
|
|
|
167
171
|
[`${this.classBase}__chevron--rotate`]: this.expanded === true,
|
|
168
172
|
} }, h("mg-icon", { icon: "chevron-down" })));
|
|
169
173
|
}
|
|
170
|
-
return (h(Host, { key: '
|
|
174
|
+
return (h(Host, { key: '655b4be7b0b17db8ad6e2d688f59c18f2750dfe4', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: '19f5763f7732fb156803fb6a24f776f182d230f4', class: this.classBase }, h("mg-popover", { key: '617fefddd54794e3f3da60e700e1c60e0758c66b', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, 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 && h("mg-icon", Object.assign({ key: 'ded976da4cd3a457a232aee9613dc9e108c35358' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: 'e3308c1e0ae198f204c283408f9c3afc154ddf21', slot: "content" }, h("mg-menu", { key: '70c222a09f42b938f56a5bb02fa4193ca8f47788', direction: directions$1.VERTICAL, label: this.messages.label }, this.items.map(item => {
|
|
171
175
|
var _a, _b;
|
|
172
|
-
return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider" })) : (h("mg-menu-item", { key: item.label, status: item.status || Status$1.VISIBLE, target: item.target, href: item.href,
|
|
176
|
+
return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider", "full-width": true })) : (h("mg-menu-item", { key: item.label, status: item.status || Status$1.VISIBLE, target: item.target, href: item.href,
|
|
173
177
|
// eslint-disable-next-line react/jsx-no-bind
|
|
174
178
|
onClick: e => this.handleItemClick(e, item.mouseEventHandler) }, ((_a = item.icon) === null || _a === void 0 ? void 0 : _a.icon) && h("mg-icon", { icon: item.icon.icon, variant: item.icon.variant, variantStyle: item.icon.variantStyle, slot: "image" }), h("span", { slot: "label" }, item.label), ((_b = item.badge) === null || _b === void 0 ? void 0 : _b.label) && h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" })));
|
|
175
179
|
})))))));
|
|
@@ -182,7 +186,7 @@ const MgActionMore = class {
|
|
|
182
186
|
"displayChevron": ["validateDisplayChevron"]
|
|
183
187
|
}; }
|
|
184
188
|
};
|
|
185
|
-
MgActionMore.style =
|
|
189
|
+
MgActionMore.style = mgActionMoreCss;
|
|
186
190
|
|
|
187
191
|
/**
|
|
188
192
|
* List of all possibles variants
|
|
@@ -190,7 +194,6 @@ MgActionMore.style = MgActionMoreStyle0;
|
|
|
190
194
|
const variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
|
|
191
195
|
|
|
192
196
|
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}";
|
|
193
|
-
const MgBadgeStyle0 = mgBadgeCss;
|
|
194
197
|
|
|
195
198
|
const MgBadge = class {
|
|
196
199
|
constructor(hostRef) {
|
|
@@ -203,25 +206,29 @@ const MgBadge = class {
|
|
|
203
206
|
/**
|
|
204
207
|
* Define badge variant
|
|
205
208
|
*/
|
|
206
|
-
this.variant =
|
|
209
|
+
this.variant = 'info';
|
|
210
|
+
/**
|
|
211
|
+
* Define if button is using outline style
|
|
212
|
+
*/
|
|
213
|
+
this.outline = false;
|
|
207
214
|
/**
|
|
208
215
|
* Component classes
|
|
209
216
|
*/
|
|
210
|
-
this.classCollection = new
|
|
217
|
+
this.classCollection = new Zt(['mg-c-badge']);
|
|
211
218
|
}
|
|
212
219
|
validateValue(newValue) {
|
|
213
220
|
if (/^[^A-Z]+$/i.exec(`${newValue}`) === null) {
|
|
214
|
-
throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${
|
|
221
|
+
throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${Gt(newValue)}.`);
|
|
215
222
|
}
|
|
216
223
|
}
|
|
217
224
|
validateLabel(newValue) {
|
|
218
|
-
if (!
|
|
219
|
-
throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${
|
|
225
|
+
if (!De(newValue)) {
|
|
226
|
+
throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${Gt(newValue)}.`);
|
|
220
227
|
}
|
|
221
228
|
}
|
|
222
229
|
validateVariant(newValue, oldValue) {
|
|
223
230
|
if (!variants$4.includes(newValue)) {
|
|
224
|
-
throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${
|
|
231
|
+
throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
225
232
|
}
|
|
226
233
|
else {
|
|
227
234
|
if (oldValue !== undefined) {
|
|
@@ -250,7 +257,7 @@ const MgBadge = class {
|
|
|
250
257
|
* @returns HTML Element
|
|
251
258
|
*/
|
|
252
259
|
render() {
|
|
253
|
-
return (h("span", { key: '
|
|
260
|
+
return (h("span", { key: 'b5d63ec3facd86cae8b8612a5318fcc8c63287a9', class: this.classCollection.join() }, h("span", { key: '350de0e420b7a7d432cd8179b4c353375d8bf185', class: "mg-c-badge__value" }, this.value), h("span", { key: '279602e43db9644f673ddbbd79970f07439c6aad', class: "mg-u-visually-hidden" }, this.label)));
|
|
254
261
|
}
|
|
255
262
|
static get watchers() { return {
|
|
256
263
|
"value": ["validateValue"],
|
|
@@ -259,7 +266,7 @@ const MgBadge = class {
|
|
|
259
266
|
"outline": ["validateOutline"]
|
|
260
267
|
}; }
|
|
261
268
|
};
|
|
262
|
-
MgBadge.style =
|
|
269
|
+
MgBadge.style = mgBadgeCss;
|
|
263
270
|
|
|
264
271
|
/**
|
|
265
272
|
* List of all possibles sizes
|
|
@@ -271,12 +278,11 @@ const sizes$4 = ['medium', 'large'];
|
|
|
271
278
|
const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
|
|
272
279
|
|
|
273
280
|
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}";
|
|
274
|
-
const MgButtonStyle0 = mgButtonCss;
|
|
275
281
|
|
|
276
282
|
const MgButton = class {
|
|
277
283
|
constructor(hostRef) {
|
|
278
284
|
registerInstance(this, hostRef);
|
|
279
|
-
this.disabledChange = createEvent(this, "disabled-change"
|
|
285
|
+
this.disabledChange = createEvent(this, "disabled-change");
|
|
280
286
|
/************
|
|
281
287
|
* Internal *
|
|
282
288
|
************/
|
|
@@ -287,11 +293,11 @@ const MgButton = class {
|
|
|
287
293
|
/**
|
|
288
294
|
* Define button variant
|
|
289
295
|
*/
|
|
290
|
-
this.variant =
|
|
296
|
+
this.variant = 'primary';
|
|
291
297
|
/**
|
|
292
298
|
* Define button size
|
|
293
299
|
*/
|
|
294
|
-
this.size =
|
|
300
|
+
this.size = 'medium';
|
|
295
301
|
/**
|
|
296
302
|
* Set button to full-width
|
|
297
303
|
*/
|
|
@@ -315,7 +321,7 @@ const MgButton = class {
|
|
|
315
321
|
/**
|
|
316
322
|
* Component classes
|
|
317
323
|
*/
|
|
318
|
-
this.classCollection = new
|
|
324
|
+
this.classCollection = new Zt(['mg-c-button']);
|
|
319
325
|
/**
|
|
320
326
|
* Trigger actions onClick event
|
|
321
327
|
* @param event - click event
|
|
@@ -337,7 +343,7 @@ const MgButton = class {
|
|
|
337
343
|
if (!this.disabled && event.key === ' ') {
|
|
338
344
|
event.preventDefault();
|
|
339
345
|
}
|
|
340
|
-
else if (!this.disabled && [
|
|
346
|
+
else if (!this.disabled && [Keys.ENTER, Keys.NUMPADENTER, Keys.SPACE].includes(event.key)) {
|
|
341
347
|
event.preventDefault();
|
|
342
348
|
this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
|
|
343
349
|
}
|
|
@@ -373,7 +379,7 @@ const MgButton = class {
|
|
|
373
379
|
this.variant = variants$3[0];
|
|
374
380
|
return;
|
|
375
381
|
}
|
|
376
|
-
throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${
|
|
382
|
+
throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
377
383
|
}
|
|
378
384
|
else {
|
|
379
385
|
if (oldValue !== undefined) {
|
|
@@ -385,7 +391,7 @@ const MgButton = class {
|
|
|
385
391
|
validateSize(newValue, oldValue) {
|
|
386
392
|
// validate new value
|
|
387
393
|
if (!sizes$4.includes(newValue)) {
|
|
388
|
-
throw new Error(`<mg-button> prop "size" must be one of: ${sizes$4.join(', ')}. Passed value: ${
|
|
394
|
+
throw new Error(`<mg-button> prop "size" must be one of: ${sizes$4.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
389
395
|
}
|
|
390
396
|
else {
|
|
391
397
|
if (oldValue !== undefined) {
|
|
@@ -427,7 +433,7 @@ const MgButton = class {
|
|
|
427
433
|
watchIsIcon(newValue) {
|
|
428
434
|
if (newValue) {
|
|
429
435
|
this.classCollection.add(`mg-c-button--icon`);
|
|
430
|
-
if (!
|
|
436
|
+
if (!De(this.label)) {
|
|
431
437
|
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
432
438
|
}
|
|
433
439
|
}
|
|
@@ -458,7 +464,7 @@ const MgButton = class {
|
|
|
458
464
|
* Add listners
|
|
459
465
|
*/
|
|
460
466
|
componentDidLoad() {
|
|
461
|
-
|
|
467
|
+
Xt(() => {
|
|
462
468
|
var _a;
|
|
463
469
|
const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
|
|
464
470
|
// submit buttons should trigger form submition;
|
|
@@ -475,7 +481,7 @@ const MgButton = class {
|
|
|
475
481
|
*/
|
|
476
482
|
render() {
|
|
477
483
|
var _a;
|
|
478
|
-
return (h(Host, { key: '
|
|
484
|
+
return (h(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 }, h("div", { key: 'e4fc763ce10eb5958ebd9330f778380bb93100d6', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: '6796487254b12a33339ac6b3a5f6c67000d8fe04', icon: "loader", spin: true }), h("div", { key: '469136ef8519825ebff3e6ee2bfe8c55e64a807d', class: "mg-c-button__content" }, h("slot", { key: 'eda514d71eaab7f7cf5cd3a65b64ffb6c9ed2e02' })))));
|
|
479
485
|
}
|
|
480
486
|
get element() { return getElement(this); }
|
|
481
487
|
static get watchers() { return {
|
|
@@ -487,10 +493,9 @@ const MgButton = class {
|
|
|
487
493
|
"loading": ["loadingHandler"]
|
|
488
494
|
}; }
|
|
489
495
|
};
|
|
490
|
-
MgButton.style =
|
|
496
|
+
MgButton.style = mgButtonCss;
|
|
491
497
|
|
|
492
498
|
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}";
|
|
493
|
-
const MgCardStyle0 = mgCardCss;
|
|
494
499
|
|
|
495
500
|
const MgCard = class {
|
|
496
501
|
constructor(hostRef) {
|
|
@@ -507,10 +512,9 @@ const MgCard = class {
|
|
|
507
512
|
return (h("div", { key: 'e59cabb09dbc28c148770b57de98f130c4479b75', class: "mg-c-card" }, h("slot", { key: 'b6e679317bddd23e73443c601992b7b344d6dc72' })));
|
|
508
513
|
}
|
|
509
514
|
};
|
|
510
|
-
MgCard.style =
|
|
515
|
+
MgCard.style = mgCardCss;
|
|
511
516
|
|
|
512
517
|
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}";
|
|
513
|
-
const MgCharacterLeftStyle0 = mgCharacterLeftCss;
|
|
514
518
|
|
|
515
519
|
const MgCharacterLeft = class {
|
|
516
520
|
constructor(hostRef) {
|
|
@@ -521,13 +525,13 @@ const MgCharacterLeft = class {
|
|
|
521
525
|
this.characters = '';
|
|
522
526
|
}
|
|
523
527
|
watchIdentifier(newValue) {
|
|
524
|
-
if (newValue !== undefined && !
|
|
525
|
-
console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${
|
|
528
|
+
if (newValue !== undefined && !Ut(newValue)) {
|
|
529
|
+
console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
|
|
526
530
|
}
|
|
527
531
|
}
|
|
528
532
|
validateMaxlength(newValue) {
|
|
529
533
|
if (typeof newValue !== 'number') {
|
|
530
|
-
throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${
|
|
534
|
+
throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${Gt(newValue)}.`);
|
|
531
535
|
}
|
|
532
536
|
}
|
|
533
537
|
/*************
|
|
@@ -554,15 +558,14 @@ const MgCharacterLeft = class {
|
|
|
554
558
|
"maxlength": ["validateMaxlength"]
|
|
555
559
|
}; }
|
|
556
560
|
};
|
|
557
|
-
MgCharacterLeft.style =
|
|
561
|
+
MgCharacterLeft.style = mgCharacterLeftCss;
|
|
558
562
|
|
|
559
|
-
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}}";
|
|
560
|
-
const MgDetailsStyle0 = mgDetailsCss;
|
|
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: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}}";
|
|
561
564
|
|
|
562
565
|
const MgDetails = class {
|
|
563
566
|
constructor(hostRef) {
|
|
564
567
|
registerInstance(this, hostRef);
|
|
565
|
-
this.expandedChange = createEvent(this, "expanded-change"
|
|
568
|
+
this.expandedChange = createEvent(this, "expanded-change");
|
|
566
569
|
/**
|
|
567
570
|
* Hide summary element
|
|
568
571
|
*/
|
|
@@ -579,7 +582,7 @@ const MgDetails = class {
|
|
|
579
582
|
};
|
|
580
583
|
}
|
|
581
584
|
validateTitles(newValue) {
|
|
582
|
-
if (!
|
|
585
|
+
if (!De(newValue)) {
|
|
583
586
|
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}'".`);
|
|
584
587
|
}
|
|
585
588
|
}
|
|
@@ -596,8 +599,9 @@ const MgDetails = class {
|
|
|
596
599
|
this.validateTitles(this.toggleClosed);
|
|
597
600
|
this.validateTitles(this.toggleOpened);
|
|
598
601
|
this.element.addEventListener('click', (event) => {
|
|
599
|
-
if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]'))
|
|
602
|
+
if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]') !== null) {
|
|
600
603
|
event.preventDefault();
|
|
604
|
+
}
|
|
601
605
|
});
|
|
602
606
|
}
|
|
603
607
|
/**
|
|
@@ -605,7 +609,7 @@ const MgDetails = class {
|
|
|
605
609
|
* @returns HTML Element
|
|
606
610
|
*/
|
|
607
611
|
render() {
|
|
608
|
-
return (h("details", { key: '
|
|
612
|
+
return (h("details", { key: 'e43aa4f4262d7006b9fdd0e75666649498081d55', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '050d5c0a645a017aaa784a4034201122b27238f0' }, h("slot", { key: 'e0d7ed83952bdd74a23ecabe93c4d0c922cda286', name: "summary" }), h("span", { key: '27238089072f0f0ca8f3263ec39e41291ab89907', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'f1702911d70e2a95ecaac17a7a0c43a075ea8c18', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '6854f4ecd77d04e297b807060a0d064401d6537f', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '85e57b346ff8327d31f92a1e86c42fd8f131f6dc', class: "mg-c-details__details" }, h("slot", { key: 'bd016ab29d695bb1ccd99b9fd402ed23bbdc19ea', name: "details" }))));
|
|
609
613
|
}
|
|
610
614
|
get element() { return getElement(this); }
|
|
611
615
|
static get watchers() { return {
|
|
@@ -614,10 +618,9 @@ const MgDetails = class {
|
|
|
614
618
|
"expanded": ["handleExpanded"]
|
|
615
619
|
}; }
|
|
616
620
|
};
|
|
617
|
-
MgDetails.style =
|
|
621
|
+
MgDetails.style = mgDetailsCss;
|
|
618
622
|
|
|
619
623
|
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%}";
|
|
620
|
-
const MgDividerStyle0 = mgDividerCss;
|
|
621
624
|
|
|
622
625
|
const MgDivider = class {
|
|
623
626
|
constructor(hostRef) {
|
|
@@ -641,7 +644,7 @@ const MgDivider = class {
|
|
|
641
644
|
} }));
|
|
642
645
|
}
|
|
643
646
|
};
|
|
644
|
-
MgDivider.style =
|
|
647
|
+
MgDivider.style = mgDividerCss;
|
|
645
648
|
|
|
646
649
|
/**
|
|
647
650
|
* List of all possibles roles
|
|
@@ -653,13 +656,12 @@ const roles = ['form', 'search', 'none', 'presentation'];
|
|
|
653
656
|
const requiredMessageStatus = ['default', 'hide'];
|
|
654
657
|
|
|
655
658
|
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)}";
|
|
656
|
-
const MgFormStyle0 = mgFormCss;
|
|
657
659
|
|
|
658
660
|
const MgForm = class {
|
|
659
661
|
constructor(hostRef) {
|
|
660
662
|
registerInstance(this, hostRef);
|
|
661
|
-
this.formValid = createEvent(this, "form-valid"
|
|
662
|
-
this.formSubmit = createEvent(this, "form-submit"
|
|
663
|
+
this.formValid = createEvent(this, "form-valid");
|
|
664
|
+
this.formSubmit = createEvent(this, "form-submit");
|
|
663
665
|
// Classes
|
|
664
666
|
this.classAllRequired = 'mg-c-form--all-required';
|
|
665
667
|
this.classLabelOnTop = 'mg-c-form--label-on-top';
|
|
@@ -667,7 +669,7 @@ const MgForm = class {
|
|
|
667
669
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
668
670
|
* If not set, it will be created.
|
|
669
671
|
*/
|
|
670
|
-
this.identifier =
|
|
672
|
+
this.identifier = Pt('mg-form');
|
|
671
673
|
/**
|
|
672
674
|
* Input name
|
|
673
675
|
* If not set the value equals the identifier
|
|
@@ -677,6 +679,10 @@ const MgForm = class {
|
|
|
677
679
|
* Define if form is readonly
|
|
678
680
|
*/
|
|
679
681
|
this.readonly = false;
|
|
682
|
+
/**
|
|
683
|
+
* Define if slotted mg-component's label are displayed on top
|
|
684
|
+
*/
|
|
685
|
+
this.labelOnTop = false;
|
|
680
686
|
/**
|
|
681
687
|
* Define if form is disabled
|
|
682
688
|
*/
|
|
@@ -684,7 +690,7 @@ const MgForm = class {
|
|
|
684
690
|
/**
|
|
685
691
|
* Component classes
|
|
686
692
|
*/
|
|
687
|
-
this.classCollection = new
|
|
693
|
+
this.classCollection = new Zt(['mg-c-form']);
|
|
688
694
|
/**
|
|
689
695
|
* Define required message based on mg-inputs required elements
|
|
690
696
|
*/
|
|
@@ -772,18 +778,18 @@ const MgForm = class {
|
|
|
772
778
|
};
|
|
773
779
|
}
|
|
774
780
|
watchIdentifier(newValue) {
|
|
775
|
-
if (!
|
|
776
|
-
console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${
|
|
781
|
+
if (!Ut(newValue)) {
|
|
782
|
+
console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
|
|
777
783
|
}
|
|
778
784
|
}
|
|
779
785
|
validateRequiredMessage(newValue) {
|
|
780
786
|
if (newValue && !requiredMessageStatus.includes(newValue)) {
|
|
781
|
-
throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${
|
|
787
|
+
throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
782
788
|
}
|
|
783
789
|
}
|
|
784
790
|
validateAriaRole(newValue) {
|
|
785
791
|
if (newValue && !roles.includes(newValue)) {
|
|
786
|
-
throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${
|
|
792
|
+
throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
787
793
|
}
|
|
788
794
|
}
|
|
789
795
|
handlelabelOnTop(newValue) {
|
|
@@ -872,7 +878,7 @@ const MgForm = class {
|
|
|
872
878
|
* @returns HTML Element
|
|
873
879
|
*/
|
|
874
880
|
render() {
|
|
875
|
-
return (h("form", { key: '
|
|
881
|
+
return (h("form", { key: '444703cae8a5374a86adc1dcaf048665f06e795f', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '1a936dfeb41a257be7b44afada7bd435f9a357f0', innerHTML: this.requiredMessageText }), h("slot", { key: 'a446094e8658b02c5a9baf7b19d77ca11b1432e9' }), !this.readonly && !this.disabled && h("slot", { key: '41f4e1c80a0f78b112eaac1d5bc53a219eee926e', name: "actions" })));
|
|
876
882
|
}
|
|
877
883
|
get element() { return getElement(this); }
|
|
878
884
|
static get watchers() { return {
|
|
@@ -884,7 +890,7 @@ const MgForm = class {
|
|
|
884
890
|
"disabled": ["handleAttributeChange"]
|
|
885
891
|
}; }
|
|
886
892
|
};
|
|
887
|
-
MgForm.style =
|
|
893
|
+
MgForm.style = mgFormCss;
|
|
888
894
|
|
|
889
895
|
/**
|
|
890
896
|
* List of all possibles sizes
|
|
@@ -902,7 +908,6 @@ const variantStyles$1 = ['icon', 'background', 'full'];
|
|
|
902
908
|
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>' };
|
|
903
909
|
|
|
904
910
|
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)}}";
|
|
905
|
-
const MgIconStyle0 = mgIconCss;
|
|
906
911
|
|
|
907
912
|
const MgIcon = class {
|
|
908
913
|
constructor(hostRef) {
|
|
@@ -918,7 +923,7 @@ const MgIcon = class {
|
|
|
918
923
|
/**
|
|
919
924
|
* Component classes
|
|
920
925
|
*/
|
|
921
|
-
this.classCollection = new
|
|
926
|
+
this.classCollection = new Zt(['mg-c-icon']);
|
|
922
927
|
/**
|
|
923
928
|
* Method to set default varianStyle props
|
|
924
929
|
* needeed has stencil doesn't know that props is mutated when updated in prop watcher
|
|
@@ -949,7 +954,7 @@ const MgIcon = class {
|
|
|
949
954
|
}
|
|
950
955
|
validateIcon(newValue, oldValue) {
|
|
951
956
|
if (!Object.keys(icons).includes(newValue)) {
|
|
952
|
-
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${
|
|
957
|
+
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
953
958
|
}
|
|
954
959
|
else {
|
|
955
960
|
if (oldValue !== undefined) {
|
|
@@ -965,7 +970,7 @@ const MgIcon = class {
|
|
|
965
970
|
newValue = 'medium';
|
|
966
971
|
}
|
|
967
972
|
if (!sizes$3.includes(newValue)) {
|
|
968
|
-
throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$3.join(', ')}. Passed value: ${
|
|
973
|
+
throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$3.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
969
974
|
}
|
|
970
975
|
else {
|
|
971
976
|
if (oldValue !== undefined) {
|
|
@@ -977,7 +982,7 @@ const MgIcon = class {
|
|
|
977
982
|
validateVariant(newValue, oldValue) {
|
|
978
983
|
if (newValue !== undefined) {
|
|
979
984
|
if (!variants$2.includes(newValue))
|
|
980
|
-
throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${
|
|
985
|
+
throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
981
986
|
else {
|
|
982
987
|
this.setDefaultVariantStyle();
|
|
983
988
|
if (oldValue !== undefined)
|
|
@@ -989,7 +994,7 @@ const MgIcon = class {
|
|
|
989
994
|
validateVariantStyle(newValue, oldValue) {
|
|
990
995
|
if (newValue !== undefined) {
|
|
991
996
|
if (!variantStyles$1.includes(newValue))
|
|
992
|
-
throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${
|
|
997
|
+
throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
993
998
|
else {
|
|
994
999
|
if (oldValue !== undefined)
|
|
995
1000
|
this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
|
|
@@ -1032,7 +1037,7 @@ const MgIcon = class {
|
|
|
1032
1037
|
"spin": ["handleSpin"]
|
|
1033
1038
|
}; }
|
|
1034
1039
|
};
|
|
1035
|
-
MgIcon.style =
|
|
1040
|
+
MgIcon.style = mgIconCss;
|
|
1036
1041
|
|
|
1037
1042
|
/**
|
|
1038
1043
|
* List of all possibles sizes
|
|
@@ -1044,7 +1049,6 @@ const sizes$2 = ['small', 'medium', 'large'];
|
|
|
1044
1049
|
const directions = ['vertical', 'horizontal'];
|
|
1045
1050
|
|
|
1046
1051
|
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))}";
|
|
1047
|
-
const MgIllustratedMessageStyle0 = mgIllustratedMessageCss;
|
|
1048
1052
|
|
|
1049
1053
|
const MgIllustratedMessage = class {
|
|
1050
1054
|
constructor(hostRef) {
|
|
@@ -1060,11 +1064,11 @@ const MgIllustratedMessage = class {
|
|
|
1060
1064
|
/**
|
|
1061
1065
|
* Component classes
|
|
1062
1066
|
*/
|
|
1063
|
-
this.classCollection = new
|
|
1067
|
+
this.classCollection = new Zt(['mg-c-illustrated-message']);
|
|
1064
1068
|
}
|
|
1065
1069
|
watchSize(newValue, oldValue) {
|
|
1066
1070
|
if (!sizes$2.includes(newValue)) {
|
|
1067
|
-
throw new Error(`<mg-illustrated-message> prop "size" must be one of: ${sizes$2.join(', ')}. Passed value: ${
|
|
1071
|
+
throw new Error(`<mg-illustrated-message> prop "size" must be one of: ${sizes$2.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
1068
1072
|
}
|
|
1069
1073
|
else {
|
|
1070
1074
|
if (oldValue !== undefined) {
|
|
@@ -1075,7 +1079,7 @@ const MgIllustratedMessage = class {
|
|
|
1075
1079
|
}
|
|
1076
1080
|
watchDirection(newValue, oldValue) {
|
|
1077
1081
|
if (newValue !== undefined && !directions.includes(newValue)) {
|
|
1078
|
-
throw new Error(`<mg-illustrated-message> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${
|
|
1082
|
+
throw new Error(`<mg-illustrated-message> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
1079
1083
|
}
|
|
1080
1084
|
else if (newValue === 'horizontal') {
|
|
1081
1085
|
this.classCollection.add('mg-c-illustrated-message--direction-horizontal');
|
|
@@ -1098,7 +1102,7 @@ const MgIllustratedMessage = class {
|
|
|
1098
1102
|
if (slottedDetails.length === 0 && slottedTitle === null) {
|
|
1099
1103
|
throw new Error('<mg-illustrated-message> Slot "title" or "details" must be present.');
|
|
1100
1104
|
}
|
|
1101
|
-
else if (slottedTitle !== null && !
|
|
1105
|
+
else if (slottedTitle !== null && !qt(slottedTitle, headingTags)) {
|
|
1102
1106
|
throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}.`);
|
|
1103
1107
|
}
|
|
1104
1108
|
else if (slottedIllustrations.length !== 1) {
|
|
@@ -1122,7 +1126,7 @@ const MgIllustratedMessage = class {
|
|
|
1122
1126
|
* @returns HTML Element
|
|
1123
1127
|
*/
|
|
1124
1128
|
render() {
|
|
1125
|
-
return (h("div", { key: '
|
|
1129
|
+
return (h("div", { key: '60c53ef4294aa36a8c354b42f47f5c7d9fc409f6', class: this.classCollection.join() }, h("div", { key: '254673ae5b7183a1adfa53c18d9e632bcdd67607', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '16b9bbe8abaae4d0f7b713fbe345e54b5b966ac0', name: "illustration" })), h("div", { key: 'c272c168ea520f8c71261e8f84297fb1bd44c044', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '7ba11d5f5fe293175a01768619bc43b0632ba0a5', name: "title" }), h("slot", { key: 'f03540939af486bb44134298b12eaf9de32f814a', name: "details" }))));
|
|
1126
1130
|
}
|
|
1127
1131
|
get element() { return getElement(this); }
|
|
1128
1132
|
static get watchers() { return {
|
|
@@ -1130,10 +1134,9 @@ const MgIllustratedMessage = class {
|
|
|
1130
1134
|
"direction": ["watchDirection"]
|
|
1131
1135
|
}; }
|
|
1132
1136
|
};
|
|
1133
|
-
MgIllustratedMessage.style =
|
|
1137
|
+
MgIllustratedMessage.style = mgIllustratedMessageCss;
|
|
1134
1138
|
|
|
1135
1139
|
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}}";
|
|
1136
|
-
const MgInputStyle0 = mgInputCss;
|
|
1137
1140
|
|
|
1138
1141
|
const MgInput = class {
|
|
1139
1142
|
constructor(hostRef) {
|
|
@@ -1145,6 +1148,10 @@ const MgInput = class {
|
|
|
1145
1148
|
this.classInput = 'mg-c-input';
|
|
1146
1149
|
this.classHasError = 'mg-c-input--has-error';
|
|
1147
1150
|
this.classLabelOnTop = 'mg-c-input--label-on-top';
|
|
1151
|
+
/**
|
|
1152
|
+
* Define if label is displayed on top
|
|
1153
|
+
*/
|
|
1154
|
+
this.labelOnTop = false;
|
|
1148
1155
|
/**
|
|
1149
1156
|
* Define if label is visible
|
|
1150
1157
|
*/
|
|
@@ -1180,11 +1187,11 @@ const MgInput = class {
|
|
|
1180
1187
|
this.renderTooltip = () => (h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, h("mg-icon", { icon: "info-circle" })));
|
|
1181
1188
|
}
|
|
1182
1189
|
watchIdentifier(newValue) {
|
|
1183
|
-
if (!
|
|
1184
|
-
throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${
|
|
1190
|
+
if (!De(newValue)) {
|
|
1191
|
+
throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${Gt(newValue)}.`);
|
|
1185
1192
|
}
|
|
1186
|
-
else if (!
|
|
1187
|
-
console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${
|
|
1193
|
+
else if (!Ut(newValue)) {
|
|
1194
|
+
console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
|
|
1188
1195
|
}
|
|
1189
1196
|
else {
|
|
1190
1197
|
this.helpTextId = `${this.identifier}-help-text`;
|
|
@@ -1206,7 +1213,7 @@ const MgInput = class {
|
|
|
1206
1213
|
}
|
|
1207
1214
|
watchTooltipPosition(newValue) {
|
|
1208
1215
|
if (!tooltipPositions.includes(newValue)) {
|
|
1209
|
-
throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${
|
|
1216
|
+
throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
1210
1217
|
}
|
|
1211
1218
|
}
|
|
1212
1219
|
watchErrorMessage(newValue) {
|
|
@@ -1249,10 +1256,12 @@ const MgInput = class {
|
|
|
1249
1256
|
ariaDescribedbyIDs.add(this.helpTextErrorId);
|
|
1250
1257
|
}
|
|
1251
1258
|
this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach(element => {
|
|
1252
|
-
if (ariaDescribedbyIDs.size)
|
|
1259
|
+
if (ariaDescribedbyIDs.size > 0) {
|
|
1253
1260
|
element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
|
|
1254
|
-
|
|
1261
|
+
}
|
|
1262
|
+
else {
|
|
1255
1263
|
element.removeAttribute('aria-describedby');
|
|
1264
|
+
}
|
|
1256
1265
|
});
|
|
1257
1266
|
}
|
|
1258
1267
|
/**
|
|
@@ -1273,8 +1282,8 @@ const MgInput = class {
|
|
|
1273
1282
|
*/
|
|
1274
1283
|
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1275
1284
|
watchLabel() {
|
|
1276
|
-
if (!
|
|
1277
|
-
throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${
|
|
1285
|
+
if (!De(this.label)) {
|
|
1286
|
+
throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${Gt(this.label)}.`);
|
|
1278
1287
|
}
|
|
1279
1288
|
else {
|
|
1280
1289
|
this.watchAriaDescribedbyIDs();
|
|
@@ -1366,7 +1375,7 @@ const MgInput = class {
|
|
|
1366
1375
|
*/
|
|
1367
1376
|
render() {
|
|
1368
1377
|
const isGroup = this.isFieldset && !this.isReadonly;
|
|
1369
|
-
return (h(Host, { key: '
|
|
1378
|
+
return (h(Host, { key: '052fc371413e939c23d1881633ed8d9f2e70ad90', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: 'f12463ab540800f45a8d52beb2ac57a3733d3958', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'bb4d18b8faf540c26451aabcc35c8f8bc05e75b4', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: 'e46cd50480c677ff9bde03e78335ad838775577c', class: "mg-c-input__input-container" }, h("div", { key: '8a9106982a4b53669b62897aacc5fae13c482e50', class: "mg-c-input__input" }, h("slot", { key: 'd2df2fcae71b45b96d8cdb86f5e7fec2487641c6' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: 'd85f5b8c268f842e99137d10b5b852b49ac7d395', class: "mg-c-input__help-text" }, h("slot", { key: '7f50c07fd312859efd88dc5a1b9d61552547f7d0', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: '9f2c02102f3464fe38acc70dab745901320c1eb3', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '2861117e844fa887ff8231a6e0903e36b5d3d005', name: this.slotError }))))));
|
|
1370
1379
|
}
|
|
1371
1380
|
get element() { return getElement(this); }
|
|
1372
1381
|
static get watchers() { return {
|
|
@@ -1384,7 +1393,7 @@ const MgInput = class {
|
|
|
1384
1393
|
"isFieldset": ["watchLabel"]
|
|
1385
1394
|
}; }
|
|
1386
1395
|
};
|
|
1387
|
-
MgInput.style =
|
|
1396
|
+
MgInput.style = mgInputCss;
|
|
1388
1397
|
|
|
1389
1398
|
/**
|
|
1390
1399
|
* List of all availables checkbox type
|
|
@@ -1411,7 +1420,6 @@ const MgInputCheckboxList = (props) => (h("ul", { class: "mg-c-input__input-grou
|
|
|
1411
1420
|
})));
|
|
1412
1421
|
|
|
1413
1422
|
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)}";
|
|
1414
|
-
const MgInputCheckboxStyle0 = mgInputCheckboxCss;
|
|
1415
1423
|
|
|
1416
1424
|
/**
|
|
1417
1425
|
* type CheckboxItem validation function
|
|
@@ -1423,8 +1431,8 @@ const isCheckboxItems = (items) => Array.isArray(items) &&
|
|
|
1423
1431
|
const MgInputCheckbox = class {
|
|
1424
1432
|
constructor(hostRef) {
|
|
1425
1433
|
registerInstance(this, hostRef);
|
|
1426
|
-
this.valueChange = createEvent(this, "value-change"
|
|
1427
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
1434
|
+
this.valueChange = createEvent(this, "value-change");
|
|
1435
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
1428
1436
|
// hasDisplayedError (triggered by blur event)
|
|
1429
1437
|
this.hasDisplayedError = false;
|
|
1430
1438
|
this.mode = 'custom';
|
|
@@ -1443,6 +1451,10 @@ const MgInputCheckbox = class {
|
|
|
1443
1451
|
* If not set the value equals the identifier
|
|
1444
1452
|
*/
|
|
1445
1453
|
this.name = this.identifier;
|
|
1454
|
+
/**
|
|
1455
|
+
* Define if label is displayed on top
|
|
1456
|
+
*/
|
|
1457
|
+
this.labelOnTop = false;
|
|
1446
1458
|
/**
|
|
1447
1459
|
* Define if label is visible
|
|
1448
1460
|
*/
|
|
@@ -1459,6 +1471,11 @@ const MgInputCheckbox = class {
|
|
|
1459
1471
|
* Define if mg-input-checkbox is readonly
|
|
1460
1472
|
*/
|
|
1461
1473
|
this.readonly = false;
|
|
1474
|
+
/**
|
|
1475
|
+
* Display selected values list in "multi" type
|
|
1476
|
+
* This prop is only applied with prop type "multi" or when an "unset" mode render a "multi" type.
|
|
1477
|
+
*/
|
|
1478
|
+
this.displaySelectedValues = false;
|
|
1462
1479
|
/**
|
|
1463
1480
|
* Define if input is disabled
|
|
1464
1481
|
*/
|
|
@@ -1470,7 +1487,7 @@ const MgInputCheckbox = class {
|
|
|
1470
1487
|
/**
|
|
1471
1488
|
* Component classes
|
|
1472
1489
|
*/
|
|
1473
|
-
this.classCollection = new
|
|
1490
|
+
this.classCollection = new Zt([this.baseClassName, classFieldset]);
|
|
1474
1491
|
/**
|
|
1475
1492
|
* Formated value to display in list
|
|
1476
1493
|
*/
|
|
@@ -1588,7 +1605,7 @@ const MgInputCheckbox = class {
|
|
|
1588
1605
|
* Method to update searchResults
|
|
1589
1606
|
*/
|
|
1590
1607
|
this.updateSearchResults = () => {
|
|
1591
|
-
this.searchResults = this.checkboxItems.filter(item =>
|
|
1608
|
+
this.searchResults = this.checkboxItems.filter(item => Jt(item.title).includes(Jt(this.searchValue)));
|
|
1592
1609
|
};
|
|
1593
1610
|
/**
|
|
1594
1611
|
* Method to validate if one of inputs value is checked id required
|
|
@@ -1620,13 +1637,13 @@ const MgInputCheckbox = class {
|
|
|
1620
1637
|
* @returns message to display
|
|
1621
1638
|
*/
|
|
1622
1639
|
this.getSelectValuesButtonMessage = () => {
|
|
1623
|
-
if (this.selectValuesButtonKey === 'editButton' &&
|
|
1640
|
+
if (this.selectValuesButtonKey === 'editButton' && De(this.editButtonMessage)) {
|
|
1624
1641
|
return this.editButtonMessage;
|
|
1625
1642
|
}
|
|
1626
|
-
else if (this.selectValuesButtonKey === 'showButton' &&
|
|
1643
|
+
else if (this.selectValuesButtonKey === 'showButton' && De(this.showButtonMessage)) {
|
|
1627
1644
|
return this.showButtonMessage;
|
|
1628
1645
|
}
|
|
1629
|
-
else if (this.selectValuesButtonKey === 'selectButton' &&
|
|
1646
|
+
else if (this.selectValuesButtonKey === 'selectButton' && De(this.selectButtonMessage)) {
|
|
1630
1647
|
return this.selectButtonMessage;
|
|
1631
1648
|
}
|
|
1632
1649
|
else {
|
|
@@ -1682,12 +1699,12 @@ const MgInputCheckbox = class {
|
|
|
1682
1699
|
this.valueChange.emit(newValue);
|
|
1683
1700
|
}
|
|
1684
1701
|
else {
|
|
1685
|
-
throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${
|
|
1702
|
+
throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${Gt(newValue)}.`);
|
|
1686
1703
|
}
|
|
1687
1704
|
}
|
|
1688
1705
|
validateType(newValue) {
|
|
1689
1706
|
if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
|
|
1690
|
-
throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${
|
|
1707
|
+
throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${Gt(newValue)}.`);
|
|
1691
1708
|
}
|
|
1692
1709
|
else if (newValue === undefined) {
|
|
1693
1710
|
this.mode = 'auto';
|
|
@@ -1787,7 +1804,7 @@ const MgInputCheckbox = class {
|
|
|
1787
1804
|
if (typeof valid !== 'boolean') {
|
|
1788
1805
|
throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean.');
|
|
1789
1806
|
}
|
|
1790
|
-
else if (!
|
|
1807
|
+
else if (!De(errorMessage)) {
|
|
1791
1808
|
throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string.');
|
|
1792
1809
|
}
|
|
1793
1810
|
else {
|
|
@@ -1924,7 +1941,7 @@ const MgInputCheckbox = class {
|
|
|
1924
1941
|
else {
|
|
1925
1942
|
inputContent = this.renderCheckboxMulti();
|
|
1926
1943
|
}
|
|
1927
|
-
return (h("mg-input", { key: '
|
|
1944
|
+
return (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));
|
|
1928
1945
|
}
|
|
1929
1946
|
get element() { return getElement(this); }
|
|
1930
1947
|
static get watchers() { return {
|
|
@@ -1940,16 +1957,27 @@ const MgInputCheckbox = class {
|
|
|
1940
1957
|
"searchValue": ["validateSearchValue"]
|
|
1941
1958
|
}; }
|
|
1942
1959
|
};
|
|
1943
|
-
MgInputCheckbox.style =
|
|
1960
|
+
MgInputCheckbox.style = mgInputCheckboxCss;
|
|
1944
1961
|
|
|
1945
1962
|
const MgInputCheckboxPaginated = class {
|
|
1946
1963
|
constructor(hostRef) {
|
|
1947
1964
|
registerInstance(this, hostRef);
|
|
1948
|
-
this.massAction = createEvent(this, "mass-action"
|
|
1965
|
+
this.massAction = createEvent(this, "mass-action");
|
|
1949
1966
|
/*************
|
|
1950
1967
|
* Constantes *
|
|
1951
1968
|
*************/
|
|
1952
1969
|
this.offset = 10;
|
|
1970
|
+
/*************
|
|
1971
|
+
* Decorators *
|
|
1972
|
+
*************/
|
|
1973
|
+
/**
|
|
1974
|
+
* Define if mg-input-checkbox-list is readonly
|
|
1975
|
+
*/
|
|
1976
|
+
this.readonly = false;
|
|
1977
|
+
/**
|
|
1978
|
+
* Define if mg-input-checkbox-list is disabled
|
|
1979
|
+
*/
|
|
1980
|
+
this.disabled = false;
|
|
1953
1981
|
/**
|
|
1954
1982
|
* Current page
|
|
1955
1983
|
*/
|
|
@@ -2036,10 +2064,10 @@ const MgInputCheckboxPaginated = class {
|
|
|
2036
2064
|
* @returns HTML Element
|
|
2037
2065
|
*/
|
|
2038
2066
|
render() {
|
|
2039
|
-
const getText = (checkboxes) => (h("em", { key: '
|
|
2067
|
+
const getText = (checkboxes) => (h("em", { key: '0bf489a95090b519c85a4649d6c3b9a0e97bf0d8', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlural' : 'title']} (${checkboxes.length})`));
|
|
2040
2068
|
const [from, to] = this.getFromToIndexes();
|
|
2041
2069
|
const itemsContainerId = `items-${this.sectionKind}-container`;
|
|
2042
|
-
return (h(Host, { key: '
|
|
2070
|
+
return (h(Host, { key: 'ee67aa1705efa2b88010748b6978e0c1dec6e4de', hidden: this.checkboxes.length < 1 }, h("div", { key: 'b713e2a0e21f57d3b238b72163f3d7a4781b7026', class: "mg-c-input__section-header" }, this.sectionKind === SectionKind.SELECTED ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (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) && (h("mg-tooltip", { key: 'ef75381dab8028c3da4cbcefba644770322c2e7e', class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip }, h("mg-button", { key: '6e33b32300e7932f09ce1152462a3cf19e452df8', variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (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}` }))), h("div", { key: '727ef2955d5866131e421c0809244ccc42c75dd0', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, 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 }))));
|
|
2043
2071
|
}
|
|
2044
2072
|
static get watchers() { return {
|
|
2045
2073
|
"checkboxes": ["watchCheckboxes"]
|
|
@@ -2048,14 +2076,13 @@ const MgInputCheckboxPaginated = class {
|
|
|
2048
2076
|
|
|
2049
2077
|
const DEFAULT_MAX_DATE = '9999-12-31';
|
|
2050
2078
|
|
|
2051
|
-
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}}";
|
|
2052
|
-
const MgInputDateStyle0 = mgInputDateCss;
|
|
2079
|
+
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}}";
|
|
2053
2080
|
|
|
2054
2081
|
const MgInputDate = class {
|
|
2055
2082
|
constructor(hostRef) {
|
|
2056
2083
|
registerInstance(this, hostRef);
|
|
2057
|
-
this.valueChange = createEvent(this, "value-change"
|
|
2058
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
2084
|
+
this.valueChange = createEvent(this, "value-change");
|
|
2085
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
2059
2086
|
// hasDisplayedError (triggered by blur event)
|
|
2060
2087
|
this.hasDisplayedError = false;
|
|
2061
2088
|
/**
|
|
@@ -2063,6 +2090,10 @@ const MgInputDate = class {
|
|
|
2063
2090
|
* If not set the value equals the identifier
|
|
2064
2091
|
*/
|
|
2065
2092
|
this.name = this.identifier;
|
|
2093
|
+
/**
|
|
2094
|
+
* Define if label is displayed on top
|
|
2095
|
+
*/
|
|
2096
|
+
this.labelOnTop = false;
|
|
2066
2097
|
/**
|
|
2067
2098
|
* Define if label is visible
|
|
2068
2099
|
*/
|
|
@@ -2091,13 +2122,13 @@ const MgInputDate = class {
|
|
|
2091
2122
|
/**
|
|
2092
2123
|
* Component classes
|
|
2093
2124
|
*/
|
|
2094
|
-
this.classCollection = new
|
|
2125
|
+
this.classCollection = new Zt(['mg-c-input--date']);
|
|
2095
2126
|
/**
|
|
2096
2127
|
* Method to validate date pattern string
|
|
2097
2128
|
* @param value - value to test
|
|
2098
2129
|
* @returns truthy when value match the pattern
|
|
2099
2130
|
*/
|
|
2100
|
-
this.isValidPattern = (value) =>
|
|
2131
|
+
this.isValidPattern = (value) => De(value) && Lt.test(value);
|
|
2101
2132
|
/**
|
|
2102
2133
|
* Format help text to display
|
|
2103
2134
|
* @param helpText - help text format
|
|
@@ -2111,23 +2142,23 @@ const MgInputDate = class {
|
|
|
2111
2142
|
}
|
|
2112
2143
|
const defaultHelpTextVariable = '{defaultHelpText}';
|
|
2113
2144
|
// If a custom helpText is provided, store it but don't return it directly
|
|
2114
|
-
let text =
|
|
2145
|
+
let text = De(helpText) ? helpText : this.messages.input.date.helpText.expectedFormat;
|
|
2115
2146
|
// Handle defaultHelpText
|
|
2116
2147
|
if (text.includes(defaultHelpTextVariable)) {
|
|
2117
2148
|
text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText.expectedFormat));
|
|
2118
2149
|
}
|
|
2119
2150
|
// Replace pattern and date variables
|
|
2120
|
-
text = text.replace('{pattern}', this.renderPattern()).replace('{date}',
|
|
2151
|
+
text = text.replace('{pattern}', this.renderPattern()).replace('{date}', Ft(ar(new Date('2025-12-24')), this.systemLocale));
|
|
2121
2152
|
// Add additional message for min/max if necessary
|
|
2122
2153
|
let rangeMessage;
|
|
2123
2154
|
if (((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
|
|
2124
|
-
rangeMessage = this.messages.input.date.helpText.minMax.replace('{min}',
|
|
2155
|
+
rangeMessage = this.messages.input.date.helpText.minMax.replace('{min}', Ft(this.min, this.systemLocale)).replace('{max}', Ft(this.max, this.systemLocale));
|
|
2125
2156
|
}
|
|
2126
2157
|
else if (((_b = this.min) === null || _b === void 0 ? void 0 : _b.length) > 0) {
|
|
2127
|
-
rangeMessage = this.messages.input.date.helpText.min.replace('{min}',
|
|
2158
|
+
rangeMessage = this.messages.input.date.helpText.min.replace('{min}', Ft(this.min, this.systemLocale));
|
|
2128
2159
|
}
|
|
2129
2160
|
else if (this.max !== DEFAULT_MAX_DATE) {
|
|
2130
|
-
rangeMessage = this.messages.input.date.helpText.max.replace('{max}',
|
|
2161
|
+
rangeMessage = this.messages.input.date.helpText.max.replace('{max}', Ft(this.max, this.systemLocale));
|
|
2131
2162
|
}
|
|
2132
2163
|
// Combine custom helpText with range message if both exist
|
|
2133
2164
|
if (text !== undefined && rangeMessage !== undefined) {
|
|
@@ -2224,15 +2255,15 @@ const MgInputDate = class {
|
|
|
2224
2255
|
// min, max & minMax
|
|
2225
2256
|
else if (['min', 'max', 'minMax'].includes(inputError)) {
|
|
2226
2257
|
this.errorMessage = this.messages.input.date.helpText[inputError]
|
|
2227
|
-
.replace('{min}',
|
|
2228
|
-
.replace('{max}',
|
|
2258
|
+
.replace('{min}', Ft(this.min, this.systemLocale))
|
|
2259
|
+
.replace('{max}', Ft(this.max, this.systemLocale));
|
|
2229
2260
|
}
|
|
2230
2261
|
// wrong date format
|
|
2231
2262
|
// element.validity.badInput is default error message
|
|
2232
2263
|
else {
|
|
2233
2264
|
this.errorMessage = this.messages.input.date.error.badInput
|
|
2234
2265
|
.replace('{pattern}', this.renderPattern())
|
|
2235
|
-
.replace('{date}',
|
|
2266
|
+
.replace('{date}', Ft(ar(new Date('2025-12-24')), this.systemLocale));
|
|
2236
2267
|
}
|
|
2237
2268
|
}
|
|
2238
2269
|
};
|
|
@@ -2241,7 +2272,7 @@ const MgInputDate = class {
|
|
|
2241
2272
|
* @returns translated html pattern
|
|
2242
2273
|
*/
|
|
2243
2274
|
this.renderPattern = () => {
|
|
2244
|
-
let patternLocal =
|
|
2275
|
+
let patternLocal = ir(this.systemLocale);
|
|
2245
2276
|
for (const key in this.messages.input.date.pattern) {
|
|
2246
2277
|
patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
|
|
2247
2278
|
}
|
|
@@ -2256,9 +2287,9 @@ const MgInputDate = class {
|
|
|
2256
2287
|
// - `undefined` is not allowed in CustomEvent['detail']
|
|
2257
2288
|
this.value = null;
|
|
2258
2289
|
}
|
|
2259
|
-
else if (newValue && !
|
|
2290
|
+
else if (newValue && !De(newValue)) {
|
|
2260
2291
|
// check value validity
|
|
2261
|
-
throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${
|
|
2292
|
+
throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${Gt(newValue)}.`);
|
|
2262
2293
|
}
|
|
2263
2294
|
else if (newValue === null || this.isValidPattern(newValue)) {
|
|
2264
2295
|
this.valueChange.emit(newValue);
|
|
@@ -2275,7 +2306,7 @@ const MgInputDate = class {
|
|
|
2275
2306
|
}
|
|
2276
2307
|
validateMinMax(newValue) {
|
|
2277
2308
|
if (newValue && !this.isValidPattern(newValue)) {
|
|
2278
|
-
throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${
|
|
2309
|
+
throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${Gt(newValue)}.`);
|
|
2279
2310
|
}
|
|
2280
2311
|
}
|
|
2281
2312
|
handleValidityChange(newValue, _oldValue, prop) {
|
|
@@ -2325,7 +2356,7 @@ const MgInputDate = class {
|
|
|
2325
2356
|
if (typeof valid !== 'boolean') {
|
|
2326
2357
|
throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean.');
|
|
2327
2358
|
}
|
|
2328
|
-
else if (!
|
|
2359
|
+
else if (!De(errorMessage)) {
|
|
2329
2360
|
throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string.');
|
|
2330
2361
|
}
|
|
2331
2362
|
else {
|
|
@@ -2391,7 +2422,7 @@ const MgInputDate = class {
|
|
|
2391
2422
|
* @returns HTML Element
|
|
2392
2423
|
*/
|
|
2393
2424
|
render() {
|
|
2394
|
-
return (h("mg-input", { key: '
|
|
2425
|
+
return (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 && h("b", { class: "mg-c-input__readonly-value" }, Ft(this.value, this.locale))) : (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) => {
|
|
2395
2426
|
if (el !== null)
|
|
2396
2427
|
this.input = el;
|
|
2397
2428
|
} }))));
|
|
@@ -2406,7 +2437,7 @@ const MgInputDate = class {
|
|
|
2406
2437
|
"disabled": ["handleValidityChange", "watchDisabled"]
|
|
2407
2438
|
}; }
|
|
2408
2439
|
};
|
|
2409
|
-
MgInputDate.style =
|
|
2440
|
+
MgInputDate.style = mgInputDateCss;
|
|
2410
2441
|
|
|
2411
2442
|
/**
|
|
2412
2443
|
* List of all possibles types
|
|
@@ -2414,14 +2445,13 @@ MgInputDate.style = MgInputDateStyle0;
|
|
|
2414
2445
|
const types = ['decimal', 'integer'];
|
|
2415
2446
|
const formats = ['none', 'number', 'currency', 'percent', 'unit'];
|
|
2416
2447
|
|
|
2417
|
-
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)}";
|
|
2418
|
-
const MgInputNumericStyle0 = mgInputNumericCss;
|
|
2448
|
+
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)}";
|
|
2419
2449
|
|
|
2420
2450
|
const MgInputNumeric = class {
|
|
2421
2451
|
constructor(hostRef) {
|
|
2422
2452
|
registerInstance(this, hostRef);
|
|
2423
|
-
this.valueChange = createEvent(this, "value-change"
|
|
2424
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
2453
|
+
this.valueChange = createEvent(this, "value-change");
|
|
2454
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
2425
2455
|
// hasDisplayedError (triggered by blur event)
|
|
2426
2456
|
this.hasDisplayedError = false;
|
|
2427
2457
|
/**
|
|
@@ -2429,6 +2459,10 @@ const MgInputNumeric = class {
|
|
|
2429
2459
|
* If not set the value equals the identifier
|
|
2430
2460
|
*/
|
|
2431
2461
|
this.name = this.identifier;
|
|
2462
|
+
/**
|
|
2463
|
+
* Define if label is displayed on top
|
|
2464
|
+
*/
|
|
2465
|
+
this.labelOnTop = false;
|
|
2432
2466
|
/**
|
|
2433
2467
|
* Define if label is visible
|
|
2434
2468
|
*/
|
|
@@ -2479,17 +2513,17 @@ const MgInputNumeric = class {
|
|
|
2479
2513
|
/**
|
|
2480
2514
|
* Component classes
|
|
2481
2515
|
*/
|
|
2482
|
-
this.classCollection = new
|
|
2516
|
+
this.classCollection = new Zt(['mg-c-input--numeric']);
|
|
2483
2517
|
/**
|
|
2484
2518
|
* Handle input event
|
|
2485
2519
|
*/
|
|
2486
2520
|
this.handleInput = () => {
|
|
2521
|
+
this.value = this.input.value;
|
|
2487
2522
|
// Check validity
|
|
2488
2523
|
this.checkValidity();
|
|
2489
2524
|
if (this.hasDisplayedError) {
|
|
2490
2525
|
this.setErrorMessage();
|
|
2491
2526
|
}
|
|
2492
|
-
this.value = this.input.value;
|
|
2493
2527
|
};
|
|
2494
2528
|
/**
|
|
2495
2529
|
* Handle focus event
|
|
@@ -2522,7 +2556,7 @@ const MgInputNumeric = class {
|
|
|
2522
2556
|
* @param value - value to format
|
|
2523
2557
|
* @returns formatted value according to locale
|
|
2524
2558
|
*/
|
|
2525
|
-
this.formatErrorValue = (value) =>
|
|
2559
|
+
this.formatErrorValue = (value) => lr(value, this.locale, !Number.isInteger(value) && this.type === 'decimal' ? this.decimalLength : 0);
|
|
2526
2560
|
/**
|
|
2527
2561
|
* Set input error message
|
|
2528
2562
|
* @param errorMessage - errorMessage override
|
|
@@ -2577,13 +2611,13 @@ const MgInputNumeric = class {
|
|
|
2577
2611
|
this.formatValue = (value) => {
|
|
2578
2612
|
switch (this.format) {
|
|
2579
2613
|
case 'number':
|
|
2580
|
-
return
|
|
2614
|
+
return lr(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2581
2615
|
case 'currency':
|
|
2582
|
-
return
|
|
2616
|
+
return or(value, this.locale, this.currency);
|
|
2583
2617
|
case 'percent':
|
|
2584
|
-
return
|
|
2618
|
+
return cr(value / 100, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2585
2619
|
case 'unit':
|
|
2586
|
-
return
|
|
2620
|
+
return fr(value, this.locale, this.unit, this.unitDisplay, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2587
2621
|
case 'none':
|
|
2588
2622
|
return value.toString();
|
|
2589
2623
|
}
|
|
@@ -2614,7 +2648,7 @@ const MgInputNumeric = class {
|
|
|
2614
2648
|
return undefined;
|
|
2615
2649
|
}
|
|
2616
2650
|
// If a custom helpText is provided, store it but don't return it directly
|
|
2617
|
-
const text =
|
|
2651
|
+
const text = De(helpText) ? helpText : undefined;
|
|
2618
2652
|
// If neither min nor max are defined, and there's no custom helpText,
|
|
2619
2653
|
// we can return undefined as there's no message to display
|
|
2620
2654
|
if (this.min === undefined && this.max === undefined && text === undefined) {
|
|
@@ -2698,22 +2732,22 @@ const MgInputNumeric = class {
|
|
|
2698
2732
|
}
|
|
2699
2733
|
validateType(newValue) {
|
|
2700
2734
|
if (!types.includes(newValue)) {
|
|
2701
|
-
throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${
|
|
2735
|
+
throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
2702
2736
|
}
|
|
2703
2737
|
}
|
|
2704
2738
|
watchFormat(newValue) {
|
|
2705
2739
|
if (!formats.includes(newValue)) {
|
|
2706
|
-
throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${
|
|
2740
|
+
throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
2707
2741
|
}
|
|
2708
2742
|
}
|
|
2709
2743
|
validateIntegerLength(newValue) {
|
|
2710
2744
|
if (newValue < 1) {
|
|
2711
|
-
throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${
|
|
2745
|
+
throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${Gt(newValue)}.`);
|
|
2712
2746
|
}
|
|
2713
2747
|
}
|
|
2714
2748
|
validateDecimalLength(newValue) {
|
|
2715
2749
|
if (newValue < 1) {
|
|
2716
|
-
throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${
|
|
2750
|
+
throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${Gt(newValue)}.`);
|
|
2717
2751
|
}
|
|
2718
2752
|
}
|
|
2719
2753
|
/**
|
|
@@ -2747,7 +2781,7 @@ const MgInputNumeric = class {
|
|
|
2747
2781
|
if (typeof valid !== 'boolean') {
|
|
2748
2782
|
throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean.');
|
|
2749
2783
|
}
|
|
2750
|
-
else if (!
|
|
2784
|
+
else if (!De(errorMessage)) {
|
|
2751
2785
|
throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string.');
|
|
2752
2786
|
}
|
|
2753
2787
|
else {
|
|
@@ -2848,7 +2882,7 @@ const MgInputNumeric = class {
|
|
|
2848
2882
|
* @returns HTML Element
|
|
2849
2883
|
*/
|
|
2850
2884
|
render() {
|
|
2851
|
-
return (h("mg-input", { key: '
|
|
2885
|
+
return (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
|
|
2852
2886
|
? this.readonlyValue && this.renderReadonly()
|
|
2853
2887
|
: [
|
|
2854
2888
|
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) => {
|
|
@@ -2873,16 +2907,15 @@ const MgInputNumeric = class {
|
|
|
2873
2907
|
"decimalLength": ["validateDecimalLength"]
|
|
2874
2908
|
}; }
|
|
2875
2909
|
};
|
|
2876
|
-
MgInputNumeric.style =
|
|
2910
|
+
MgInputNumeric.style = mgInputNumericCss;
|
|
2877
2911
|
|
|
2878
|
-
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}";
|
|
2879
|
-
const MgInputPasswordStyle0 = mgInputPasswordCss;
|
|
2912
|
+
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}";
|
|
2880
2913
|
|
|
2881
2914
|
const MgInputPassword = class {
|
|
2882
2915
|
constructor(hostRef) {
|
|
2883
2916
|
registerInstance(this, hostRef);
|
|
2884
|
-
this.valueChange = createEvent(this, "value-change"
|
|
2885
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
2917
|
+
this.valueChange = createEvent(this, "value-change");
|
|
2918
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
2886
2919
|
// hasDisplayedError (triggered by blur event)
|
|
2887
2920
|
this.hasDisplayedError = false;
|
|
2888
2921
|
/**
|
|
@@ -2890,6 +2923,10 @@ const MgInputPassword = class {
|
|
|
2890
2923
|
* If not set the value equals the identifier
|
|
2891
2924
|
*/
|
|
2892
2925
|
this.name = this.identifier;
|
|
2926
|
+
/**
|
|
2927
|
+
* Define if label is displayed on top
|
|
2928
|
+
*/
|
|
2929
|
+
this.labelOnTop = false;
|
|
2893
2930
|
/**
|
|
2894
2931
|
* Define if label is visible
|
|
2895
2932
|
*/
|
|
@@ -2917,7 +2954,7 @@ const MgInputPassword = class {
|
|
|
2917
2954
|
/**
|
|
2918
2955
|
* Component classes
|
|
2919
2956
|
*/
|
|
2920
|
-
this.classCollection = new
|
|
2957
|
+
this.classCollection = new Zt(['mg-c-input--password']);
|
|
2921
2958
|
/**
|
|
2922
2959
|
* Indicates if password is displayed or not
|
|
2923
2960
|
*/
|
|
@@ -3037,7 +3074,7 @@ const MgInputPassword = class {
|
|
|
3037
3074
|
if (typeof valid !== 'boolean') {
|
|
3038
3075
|
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean.');
|
|
3039
3076
|
}
|
|
3040
|
-
else if (!
|
|
3077
|
+
else if (!De(errorMessage)) {
|
|
3041
3078
|
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string.');
|
|
3042
3079
|
}
|
|
3043
3080
|
else {
|
|
@@ -3094,7 +3131,7 @@ const MgInputPassword = class {
|
|
|
3094
3131
|
* @returns HTML Element
|
|
3095
3132
|
*/
|
|
3096
3133
|
render() {
|
|
3097
|
-
return (h("mg-input", { key: '
|
|
3134
|
+
return (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 && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, 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) => {
|
|
3098
3135
|
if (el !== null)
|
|
3099
3136
|
this.input = el;
|
|
3100
3137
|
} }), 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 }, h("mg-icon", { class: "mg-c-input__input-icon", icon: this.displayPassword ? 'eye-slash' : 'eye' }))))));
|
|
@@ -3108,10 +3145,9 @@ const MgInputPassword = class {
|
|
|
3108
3145
|
"mgWidth": ["watchMgWidth"]
|
|
3109
3146
|
}; }
|
|
3110
3147
|
};
|
|
3111
|
-
MgInputPassword.style =
|
|
3148
|
+
MgInputPassword.style = mgInputPasswordCss;
|
|
3112
3149
|
|
|
3113
3150
|
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}}";
|
|
3114
|
-
const MgInputRadioStyle0 = mgInputRadioCss;
|
|
3115
3151
|
|
|
3116
3152
|
/**
|
|
3117
3153
|
* type Option validation function
|
|
@@ -3122,8 +3158,8 @@ const isOption$3 = (option) => typeof option === 'object' && typeof option.title
|
|
|
3122
3158
|
const MgInputRadio = class {
|
|
3123
3159
|
constructor(hostRef) {
|
|
3124
3160
|
registerInstance(this, hostRef);
|
|
3125
|
-
this.valueChange = createEvent(this, "value-change"
|
|
3126
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
3161
|
+
this.valueChange = createEvent(this, "value-change");
|
|
3162
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
3127
3163
|
/************
|
|
3128
3164
|
* Internal *
|
|
3129
3165
|
************/
|
|
@@ -3169,7 +3205,7 @@ const MgInputRadio = class {
|
|
|
3169
3205
|
/**
|
|
3170
3206
|
* Component classes
|
|
3171
3207
|
*/
|
|
3172
|
-
this.classCollection = new
|
|
3208
|
+
this.classCollection = new Zt(['mg-c-input--radio', classFieldset]);
|
|
3173
3209
|
/**
|
|
3174
3210
|
* Handle input event
|
|
3175
3211
|
* @param event - input event
|
|
@@ -3220,7 +3256,7 @@ const MgInputRadio = class {
|
|
|
3220
3256
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3221
3257
|
watchValue(newValue) {
|
|
3222
3258
|
var _a;
|
|
3223
|
-
if (
|
|
3259
|
+
if (Dt(this.items) && typeof newValue === 'string') {
|
|
3224
3260
|
this.readonlyValue = newValue;
|
|
3225
3261
|
}
|
|
3226
3262
|
else if (Array.isArray(this.items) && this.items.every(isOption$3)) {
|
|
@@ -3234,10 +3270,10 @@ const MgInputRadio = class {
|
|
|
3234
3270
|
validateItems(newValue) {
|
|
3235
3271
|
// Validate if items have required min length
|
|
3236
3272
|
if (typeof newValue === 'object' && newValue.length < 2) {
|
|
3237
|
-
throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${
|
|
3273
|
+
throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${Gt(newValue)}.`);
|
|
3238
3274
|
}
|
|
3239
3275
|
// String array
|
|
3240
|
-
else if (
|
|
3276
|
+
else if (Dt(newValue)) {
|
|
3241
3277
|
this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
|
|
3242
3278
|
}
|
|
3243
3279
|
// Object array
|
|
@@ -3245,7 +3281,7 @@ const MgInputRadio = class {
|
|
|
3245
3281
|
this.options = newValue;
|
|
3246
3282
|
}
|
|
3247
3283
|
else {
|
|
3248
|
-
throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${
|
|
3284
|
+
throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${Gt(newValue)}.`);
|
|
3249
3285
|
}
|
|
3250
3286
|
}
|
|
3251
3287
|
watchInputVerticalList(newValue) {
|
|
@@ -3307,7 +3343,7 @@ const MgInputRadio = class {
|
|
|
3307
3343
|
if (typeof valid !== 'boolean') {
|
|
3308
3344
|
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean.');
|
|
3309
3345
|
}
|
|
3310
|
-
else if (!
|
|
3346
|
+
else if (!De(errorMessage)) {
|
|
3311
3347
|
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string.');
|
|
3312
3348
|
}
|
|
3313
3349
|
else {
|
|
@@ -3367,7 +3403,7 @@ const MgInputRadio = class {
|
|
|
3367
3403
|
* @returns HTML Element
|
|
3368
3404
|
*/
|
|
3369
3405
|
render() {
|
|
3370
|
-
return (h("mg-input", { key: '
|
|
3406
|
+
return (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 && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
|
|
3371
3407
|
if (el !== null)
|
|
3372
3408
|
this.inputs[index] = el;
|
|
3373
3409
|
} }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));
|
|
@@ -3382,10 +3418,9 @@ const MgInputRadio = class {
|
|
|
3382
3418
|
"disabled": ["handleValidityChange", "watchDisabled"]
|
|
3383
3419
|
}; }
|
|
3384
3420
|
};
|
|
3385
|
-
MgInputRadio.style =
|
|
3421
|
+
MgInputRadio.style = mgInputRadioCss;
|
|
3386
3422
|
|
|
3387
|
-
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%}}";
|
|
3388
|
-
const MgInputSelectStyle0 = mgInputSelectCss;
|
|
3423
|
+
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%}}";
|
|
3389
3424
|
|
|
3390
3425
|
/**
|
|
3391
3426
|
* Check if item is a well configured option
|
|
@@ -3432,8 +3467,8 @@ const groupOptions = (acc, { group, title, value, disabled }) => {
|
|
|
3432
3467
|
const MgInputSelect = class {
|
|
3433
3468
|
constructor(hostRef) {
|
|
3434
3469
|
registerInstance(this, hostRef);
|
|
3435
|
-
this.valueChange = createEvent(this, "value-change"
|
|
3436
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
3470
|
+
this.valueChange = createEvent(this, "value-change");
|
|
3471
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
3437
3472
|
// hasDisplayedError (triggered by blur event)
|
|
3438
3473
|
this.hasDisplayedError = false;
|
|
3439
3474
|
/**
|
|
@@ -3441,6 +3476,10 @@ const MgInputSelect = class {
|
|
|
3441
3476
|
* If not set the value equals the identifier
|
|
3442
3477
|
*/
|
|
3443
3478
|
this.name = this.identifier;
|
|
3479
|
+
/**
|
|
3480
|
+
* Define if label is displayed on top
|
|
3481
|
+
*/
|
|
3482
|
+
this.labelOnTop = false;
|
|
3444
3483
|
/**
|
|
3445
3484
|
* Define if label is visible
|
|
3446
3485
|
*/
|
|
@@ -3472,7 +3511,7 @@ const MgInputSelect = class {
|
|
|
3472
3511
|
/**
|
|
3473
3512
|
* Component classes
|
|
3474
3513
|
*/
|
|
3475
|
-
this.classCollection = new
|
|
3514
|
+
this.classCollection = new Zt(['mg-c-input--select']);
|
|
3476
3515
|
/**
|
|
3477
3516
|
* Handle input event
|
|
3478
3517
|
*/
|
|
@@ -3502,7 +3541,7 @@ const MgInputSelect = class {
|
|
|
3502
3541
|
if (this.input.value === '') {
|
|
3503
3542
|
this.setValue(null);
|
|
3504
3543
|
}
|
|
3505
|
-
else if (
|
|
3544
|
+
else if (Dt(this.items) && this.items.includes(this.input.value)) {
|
|
3506
3545
|
this.setValue(this.input.value);
|
|
3507
3546
|
}
|
|
3508
3547
|
else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
|
|
@@ -3560,7 +3599,7 @@ const MgInputSelect = class {
|
|
|
3560
3599
|
}
|
|
3561
3600
|
validateValue(newValue) {
|
|
3562
3601
|
var _a, _b;
|
|
3563
|
-
if (
|
|
3602
|
+
if (Dt(this.items) && typeof newValue === 'string') {
|
|
3564
3603
|
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== undefined ? this.input.value : newValue;
|
|
3565
3604
|
}
|
|
3566
3605
|
else if (allItemsAreOptions(this.items)) {
|
|
@@ -3577,7 +3616,7 @@ const MgInputSelect = class {
|
|
|
3577
3616
|
this.options = [];
|
|
3578
3617
|
}
|
|
3579
3618
|
// String array
|
|
3580
|
-
else if (
|
|
3619
|
+
else if (Dt(newValue)) {
|
|
3581
3620
|
if (typeof this.value === 'string')
|
|
3582
3621
|
this.valueExist = newValue.includes(this.value);
|
|
3583
3622
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
@@ -3595,7 +3634,7 @@ const MgInputSelect = class {
|
|
|
3595
3634
|
}
|
|
3596
3635
|
}
|
|
3597
3636
|
else {
|
|
3598
|
-
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: ${
|
|
3637
|
+
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: ${Gt(newValue)}.`);
|
|
3599
3638
|
}
|
|
3600
3639
|
}
|
|
3601
3640
|
watchReadonly(newValue) {
|
|
@@ -3660,7 +3699,7 @@ const MgInputSelect = class {
|
|
|
3660
3699
|
if (typeof valid !== 'boolean') {
|
|
3661
3700
|
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean.');
|
|
3662
3701
|
}
|
|
3663
|
-
else if (!
|
|
3702
|
+
else if (!De(errorMessage)) {
|
|
3664
3703
|
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string.');
|
|
3665
3704
|
}
|
|
3666
3705
|
else {
|
|
@@ -3724,7 +3763,7 @@ const MgInputSelect = class {
|
|
|
3724
3763
|
* @returns HTML Element
|
|
3725
3764
|
*/
|
|
3726
3765
|
render() {
|
|
3727
|
-
return (h("mg-input", { key: '
|
|
3766
|
+
return (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 && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (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) => {
|
|
3728
3767
|
if (el !== null)
|
|
3729
3768
|
this.input = el;
|
|
3730
3769
|
} }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
@@ -3740,7 +3779,7 @@ const MgInputSelect = class {
|
|
|
3740
3779
|
"mgWidth": ["watchMgWidth"]
|
|
3741
3780
|
}; }
|
|
3742
3781
|
};
|
|
3743
|
-
MgInputSelect.style =
|
|
3782
|
+
MgInputSelect.style = mgInputSelectCss;
|
|
3744
3783
|
|
|
3745
3784
|
/**
|
|
3746
3785
|
* TextType from text types
|
|
@@ -3750,8 +3789,7 @@ const helpTextTypes = ['email', 'emails', 'url'];
|
|
|
3750
3789
|
// Define possible text types
|
|
3751
3790
|
const textTypes = ['text', 'search', 'tel', ...helpTextTypes];
|
|
3752
3791
|
|
|
3753
|
-
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}
|
|
3754
|
-
const MgInputTextStyle0 = mgInputTextCss;
|
|
3792
|
+
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}";
|
|
3755
3793
|
|
|
3756
3794
|
/**
|
|
3757
3795
|
* Check if object is an option
|
|
@@ -3764,12 +3802,12 @@ const isOption$1 = (option) => typeof option === 'object' && typeof option.title
|
|
|
3764
3802
|
* @param options - Datalist options to check.
|
|
3765
3803
|
* @returns True if datalist is well structured.
|
|
3766
3804
|
*/
|
|
3767
|
-
const isDatalistOptions = (options) =>
|
|
3805
|
+
const isDatalistOptions = (options) => Dt(options) || (Array.isArray(options) && options.every(isOption$1));
|
|
3768
3806
|
const MgInputText = class {
|
|
3769
3807
|
constructor(hostRef) {
|
|
3770
3808
|
registerInstance(this, hostRef);
|
|
3771
|
-
this.valueChange = createEvent(this, "value-change"
|
|
3772
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
3809
|
+
this.valueChange = createEvent(this, "value-change");
|
|
3810
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
3773
3811
|
/************
|
|
3774
3812
|
* Internal *
|
|
3775
3813
|
************/
|
|
@@ -3787,13 +3825,17 @@ const MgInputText = class {
|
|
|
3787
3825
|
*/
|
|
3788
3826
|
this.name = this.identifier;
|
|
3789
3827
|
/**
|
|
3790
|
-
*
|
|
3828
|
+
* Define if label is displayed on top
|
|
3791
3829
|
*/
|
|
3792
|
-
this.
|
|
3830
|
+
this.labelOnTop = false;
|
|
3793
3831
|
/**
|
|
3794
3832
|
* Define if label is visible
|
|
3795
3833
|
*/
|
|
3796
3834
|
this.labelHide = false;
|
|
3835
|
+
/**
|
|
3836
|
+
* Input type
|
|
3837
|
+
*/
|
|
3838
|
+
this.type = 'text';
|
|
3797
3839
|
/**
|
|
3798
3840
|
* Input max length
|
|
3799
3841
|
*/
|
|
@@ -3825,13 +3867,13 @@ const MgInputText = class {
|
|
|
3825
3867
|
/**
|
|
3826
3868
|
* Component classes
|
|
3827
3869
|
*/
|
|
3828
|
-
this.classCollection = new
|
|
3870
|
+
this.classCollection = new Zt(['mg-c-input--text']);
|
|
3829
3871
|
/**
|
|
3830
3872
|
* Validate pattern configuration
|
|
3831
3873
|
*/
|
|
3832
3874
|
this.validatePattern = () => {
|
|
3833
3875
|
if ((this.pattern !== undefined || this.patternErrorMessage !== undefined) && // At least one is defined
|
|
3834
|
-
(!
|
|
3876
|
+
(!De(this.pattern) || (!helpTextTypes.includes(this.type) && !De(this.patternErrorMessage))) // Both must be defined
|
|
3835
3877
|
) {
|
|
3836
3878
|
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}'".`);
|
|
3837
3879
|
}
|
|
@@ -3851,7 +3893,7 @@ const MgInputText = class {
|
|
|
3851
3893
|
*/
|
|
3852
3894
|
this.handleFocus = () => {
|
|
3853
3895
|
this.classCollection.add(this.classFocus);
|
|
3854
|
-
this.classCollection = new
|
|
3896
|
+
this.classCollection = new Zt(this.classCollection.classes);
|
|
3855
3897
|
};
|
|
3856
3898
|
/**
|
|
3857
3899
|
* Handle blur event
|
|
@@ -3859,7 +3901,7 @@ const MgInputText = class {
|
|
|
3859
3901
|
this.handleBlur = () => {
|
|
3860
3902
|
// Manage focus
|
|
3861
3903
|
this.classCollection.delete(this.classFocus);
|
|
3862
|
-
this.classCollection = new
|
|
3904
|
+
this.classCollection = new Zt(this.classCollection.classes);
|
|
3863
3905
|
// Display Error
|
|
3864
3906
|
this.handlerInProgress = 'blur';
|
|
3865
3907
|
this.displayError().finally(() => {
|
|
@@ -3887,11 +3929,11 @@ const MgInputText = class {
|
|
|
3887
3929
|
}
|
|
3888
3930
|
// Does not match type (email, emails, tel, url, etc.)
|
|
3889
3931
|
else if (!this.valid && this.input.validity.typeMismatch) {
|
|
3890
|
-
this.errorMessage =
|
|
3932
|
+
this.errorMessage = this.messages.input.text.errors.typeMismatch[this.type];
|
|
3891
3933
|
}
|
|
3892
3934
|
// Does not match pattern
|
|
3893
3935
|
else if (!this.valid && this.input.validity.patternMismatch) {
|
|
3894
|
-
this.errorMessage = (_a = this.patternErrorMessage) !== null && _a !== void 0 ? _a :
|
|
3936
|
+
this.errorMessage = (_a = this.patternErrorMessage) !== null && _a !== void 0 ? _a : this.messages.input.text.errors.typeMismatch[this.type];
|
|
3895
3937
|
}
|
|
3896
3938
|
// required
|
|
3897
3939
|
else if (!this.valid && this.input.validity.valueMissing) {
|
|
@@ -3954,7 +3996,7 @@ const MgInputText = class {
|
|
|
3954
3996
|
}
|
|
3955
3997
|
validateDatalistoptions(newValue) {
|
|
3956
3998
|
if (Boolean(newValue) && !isDatalistOptions(newValue)) {
|
|
3957
|
-
throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${
|
|
3999
|
+
throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${Gt(newValue)}.`);
|
|
3958
4000
|
}
|
|
3959
4001
|
}
|
|
3960
4002
|
watchReadonly(newValue) {
|
|
@@ -3992,7 +4034,7 @@ const MgInputText = class {
|
|
|
3992
4034
|
this.validatePattern();
|
|
3993
4035
|
}
|
|
3994
4036
|
watchHelpText(newValue) {
|
|
3995
|
-
if (!
|
|
4037
|
+
if (!De(newValue) && helpTextTypes.includes(this.type)) {
|
|
3996
4038
|
this.helpText = this.messages.input.text.helpText[this.type];
|
|
3997
4039
|
}
|
|
3998
4040
|
}
|
|
@@ -4033,7 +4075,7 @@ const MgInputText = class {
|
|
|
4033
4075
|
if (typeof valid !== 'boolean') {
|
|
4034
4076
|
throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean.');
|
|
4035
4077
|
}
|
|
4036
|
-
else if (!
|
|
4078
|
+
else if (!De(errorMessage)) {
|
|
4037
4079
|
throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string.');
|
|
4038
4080
|
}
|
|
4039
4081
|
else {
|
|
@@ -4099,7 +4141,7 @@ const MgInputText = class {
|
|
|
4099
4141
|
* @returns HTML Element
|
|
4100
4142
|
*/
|
|
4101
4143
|
render() {
|
|
4102
|
-
return (h("mg-input", { key: '
|
|
4144
|
+
return (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
|
|
4103
4145
|
? this.value && this.renderReadonly()
|
|
4104
4146
|
: [
|
|
4105
4147
|
h("div", { key: "input", class: "mg-c-input__with-character-left", style: {
|
|
@@ -4126,16 +4168,15 @@ const MgInputText = class {
|
|
|
4126
4168
|
"helpText": ["watchHelpText"]
|
|
4127
4169
|
}; }
|
|
4128
4170
|
};
|
|
4129
|
-
MgInputText.style =
|
|
4171
|
+
MgInputText.style = mgInputTextCss;
|
|
4130
4172
|
|
|
4131
|
-
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}}";
|
|
4132
|
-
const MgInputTextareaStyle0 = mgInputTextareaCss;
|
|
4173
|
+
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}}";
|
|
4133
4174
|
|
|
4134
4175
|
const MgInputTextarea = class {
|
|
4135
4176
|
constructor(hostRef) {
|
|
4136
4177
|
registerInstance(this, hostRef);
|
|
4137
|
-
this.valueChange = createEvent(this, "value-change"
|
|
4138
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
4178
|
+
this.valueChange = createEvent(this, "value-change");
|
|
4179
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
4139
4180
|
/************
|
|
4140
4181
|
* Internal *
|
|
4141
4182
|
************/
|
|
@@ -4149,6 +4190,10 @@ const MgInputTextarea = class {
|
|
|
4149
4190
|
* If not set the value equals the identifier
|
|
4150
4191
|
*/
|
|
4151
4192
|
this.name = this.identifier;
|
|
4193
|
+
/**
|
|
4194
|
+
* Define if label is displayed on top
|
|
4195
|
+
*/
|
|
4196
|
+
this.labelOnTop = false;
|
|
4152
4197
|
/**
|
|
4153
4198
|
* Define if label is visible
|
|
4154
4199
|
*/
|
|
@@ -4192,7 +4237,7 @@ const MgInputTextarea = class {
|
|
|
4192
4237
|
/**
|
|
4193
4238
|
* Component classes
|
|
4194
4239
|
*/
|
|
4195
|
-
this.classCollection = new
|
|
4240
|
+
this.classCollection = new Zt(['mg-c-input--textarea']);
|
|
4196
4241
|
/**
|
|
4197
4242
|
* Handle input event
|
|
4198
4243
|
*/
|
|
@@ -4208,7 +4253,7 @@ const MgInputTextarea = class {
|
|
|
4208
4253
|
*/
|
|
4209
4254
|
this.handleFocus = () => {
|
|
4210
4255
|
this.classCollection.add(this.classFocus);
|
|
4211
|
-
this.classCollection = new
|
|
4256
|
+
this.classCollection = new Zt(this.classCollection.classes);
|
|
4212
4257
|
};
|
|
4213
4258
|
/**
|
|
4214
4259
|
* Handle blur event
|
|
@@ -4216,7 +4261,7 @@ const MgInputTextarea = class {
|
|
|
4216
4261
|
this.handleBlur = () => {
|
|
4217
4262
|
// Manage focus
|
|
4218
4263
|
this.classCollection.delete(this.classFocus);
|
|
4219
|
-
this.classCollection = new
|
|
4264
|
+
this.classCollection = new Zt(this.classCollection.classes);
|
|
4220
4265
|
// Display Error
|
|
4221
4266
|
this.handlerInProgress = 'blur';
|
|
4222
4267
|
this.displayError().finally(() => {
|
|
@@ -4294,8 +4339,8 @@ const MgInputTextarea = class {
|
|
|
4294
4339
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
4295
4340
|
}
|
|
4296
4341
|
validatePattern(newValue) {
|
|
4297
|
-
if (newValue !== undefined && !(
|
|
4298
|
-
throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${
|
|
4342
|
+
if (newValue !== undefined && !(De(this.pattern) && De(this.patternErrorMessage))) {
|
|
4343
|
+
throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${Gt(this.pattern)}'" and "patternErrorMessage='${Gt(this.patternErrorMessage)}'".`);
|
|
4299
4344
|
}
|
|
4300
4345
|
}
|
|
4301
4346
|
validatecharacterLeftHide(newValue) {
|
|
@@ -4337,7 +4382,7 @@ const MgInputTextarea = class {
|
|
|
4337
4382
|
if (typeof valid !== 'boolean') {
|
|
4338
4383
|
throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean.');
|
|
4339
4384
|
}
|
|
4340
|
-
else if (!
|
|
4385
|
+
else if (!De(errorMessage)) {
|
|
4341
4386
|
throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string.');
|
|
4342
4387
|
}
|
|
4343
4388
|
else {
|
|
@@ -4399,7 +4444,7 @@ const MgInputTextarea = class {
|
|
|
4399
4444
|
* @returns HTML Element
|
|
4400
4445
|
*/
|
|
4401
4446
|
render() {
|
|
4402
|
-
return (h("mg-input", { key: '
|
|
4447
|
+
return (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 && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__with-character-left" }, h("textarea", { class: {
|
|
4403
4448
|
'mg-c-input__box': true,
|
|
4404
4449
|
'mg-c-input__box--width': true,
|
|
4405
4450
|
'mg-c-input__box--resizable': this.resizable === 'both',
|
|
@@ -4422,10 +4467,9 @@ const MgInputTextarea = class {
|
|
|
4422
4467
|
"characterLeftHide": ["validatecharacterLeftHide"]
|
|
4423
4468
|
}; }
|
|
4424
4469
|
};
|
|
4425
|
-
MgInputTextarea.style =
|
|
4470
|
+
MgInputTextarea.style = mgInputTextareaCss;
|
|
4426
4471
|
|
|
4427
4472
|
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)}";
|
|
4428
|
-
const MgInputTitleStyle0 = mgInputTitleCss;
|
|
4429
4473
|
|
|
4430
4474
|
const MgInputTitle = class {
|
|
4431
4475
|
constructor(hostRef) {
|
|
@@ -4440,11 +4484,11 @@ const MgInputTitle = class {
|
|
|
4440
4484
|
this.tagName = 'label';
|
|
4441
4485
|
}
|
|
4442
4486
|
validateIdentifier(newValue) {
|
|
4443
|
-
if (!
|
|
4487
|
+
if (!De(newValue)) {
|
|
4444
4488
|
throw new Error('<mg-input-title> prop "identifier" is required.');
|
|
4445
4489
|
}
|
|
4446
|
-
else if (!
|
|
4447
|
-
console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${
|
|
4490
|
+
else if (!Ut(newValue)) {
|
|
4491
|
+
console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
|
|
4448
4492
|
}
|
|
4449
4493
|
}
|
|
4450
4494
|
validateIsLegend(newValue) {
|
|
@@ -4474,10 +4518,9 @@ const MgInputTitle = class {
|
|
|
4474
4518
|
"isLegend": ["validateIsLegend"]
|
|
4475
4519
|
}; }
|
|
4476
4520
|
};
|
|
4477
|
-
MgInputTitle.style =
|
|
4521
|
+
MgInputTitle.style = mgInputTitleCss;
|
|
4478
4522
|
|
|
4479
4523
|
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}";
|
|
4480
|
-
const MgInputToggleStyle0 = mgInputToggleCss;
|
|
4481
4524
|
|
|
4482
4525
|
/**
|
|
4483
4526
|
* type Option validation function
|
|
@@ -4488,8 +4531,8 @@ const isOption = (option) => typeof option === 'object' && typeof option.title =
|
|
|
4488
4531
|
const MgInputToggle = class {
|
|
4489
4532
|
constructor(hostRef) {
|
|
4490
4533
|
registerInstance(this, hostRef);
|
|
4491
|
-
this.valueChange = createEvent(this, "value-change"
|
|
4492
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
4534
|
+
this.valueChange = createEvent(this, "value-change");
|
|
4535
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
4493
4536
|
/************
|
|
4494
4537
|
* Internal *
|
|
4495
4538
|
************/
|
|
@@ -4502,6 +4545,10 @@ const MgInputToggle = class {
|
|
|
4502
4545
|
* If not set the value equals the identifier
|
|
4503
4546
|
*/
|
|
4504
4547
|
this.name = this.identifier;
|
|
4548
|
+
/**
|
|
4549
|
+
* Define if label is displayed on top
|
|
4550
|
+
*/
|
|
4551
|
+
this.labelOnTop = false;
|
|
4505
4552
|
/**
|
|
4506
4553
|
* Define if label is visible
|
|
4507
4554
|
*/
|
|
@@ -4529,7 +4576,7 @@ const MgInputToggle = class {
|
|
|
4529
4576
|
/**
|
|
4530
4577
|
* Component classes
|
|
4531
4578
|
*/
|
|
4532
|
-
this.classCollection = new
|
|
4579
|
+
this.classCollection = new Zt(['mg-c-input--toggle']);
|
|
4533
4580
|
/**
|
|
4534
4581
|
* Checked internal value
|
|
4535
4582
|
*/
|
|
@@ -4590,10 +4637,10 @@ const MgInputToggle = class {
|
|
|
4590
4637
|
}
|
|
4591
4638
|
validateItems(newValue) {
|
|
4592
4639
|
if (typeof newValue === 'object' && this.items.length !== 2) {
|
|
4593
|
-
throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${
|
|
4640
|
+
throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${Gt(newValue)}.`);
|
|
4594
4641
|
}
|
|
4595
4642
|
// String array
|
|
4596
|
-
else if (
|
|
4643
|
+
else if (Dt(newValue)) {
|
|
4597
4644
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
4598
4645
|
}
|
|
4599
4646
|
// Object array
|
|
@@ -4601,7 +4648,7 @@ const MgInputToggle = class {
|
|
|
4601
4648
|
this.options = newValue;
|
|
4602
4649
|
}
|
|
4603
4650
|
else {
|
|
4604
|
-
throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${
|
|
4651
|
+
throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${Gt(newValue)}.`);
|
|
4605
4652
|
}
|
|
4606
4653
|
}
|
|
4607
4654
|
watchIsOnOff(newValue) {
|
|
@@ -4649,7 +4696,7 @@ const MgInputToggle = class {
|
|
|
4649
4696
|
if (typeof valid !== 'boolean') {
|
|
4650
4697
|
throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');
|
|
4651
4698
|
}
|
|
4652
|
-
else if (!
|
|
4699
|
+
else if (!De(errorMessage)) {
|
|
4653
4700
|
throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
|
|
4654
4701
|
}
|
|
4655
4702
|
else {
|
|
@@ -4716,7 +4763,7 @@ const MgInputToggle = class {
|
|
|
4716
4763
|
*/
|
|
4717
4764
|
render() {
|
|
4718
4765
|
const checkedItem = this.getCheckedItem(this.checked);
|
|
4719
|
-
return (h("mg-input", { key: '
|
|
4766
|
+
return (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 && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (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 }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
|
|
4720
4767
|
}
|
|
4721
4768
|
get element() { return getElement(this); }
|
|
4722
4769
|
static get watchers() { return {
|
|
@@ -4729,7 +4776,7 @@ const MgInputToggle = class {
|
|
|
4729
4776
|
"checked": ["handleChecked"]
|
|
4730
4777
|
}; }
|
|
4731
4778
|
};
|
|
4732
|
-
MgInputToggle.style =
|
|
4779
|
+
MgInputToggle.style = mgInputToggleCss;
|
|
4733
4780
|
|
|
4734
4781
|
/**
|
|
4735
4782
|
*
|
|
@@ -4789,8 +4836,8 @@ class OverflowBehavior {
|
|
|
4789
4836
|
else if (!this.isMoreElement(item) && item.parentElement !== this.parentElement)
|
|
4790
4837
|
this.parentElement.insertBefore(item, this.itemMoreElement);
|
|
4791
4838
|
};
|
|
4792
|
-
if (
|
|
4793
|
-
throw new Error('OverflowBehavior - all
|
|
4839
|
+
if (this.parentElement === null || this.itemMoreElement === null || this.itemMoreContainerElement === null) {
|
|
4840
|
+
throw new Error('OverflowBehavior - all constructor params are required');
|
|
4794
4841
|
}
|
|
4795
4842
|
const items = Array.from(this.parentElement.children);
|
|
4796
4843
|
this._resizeObserver = new ResizeObserver(entries => {
|
|
@@ -4803,7 +4850,7 @@ class OverflowBehavior {
|
|
|
4803
4850
|
let accWidth = 0;
|
|
4804
4851
|
items.forEach((item, index) => {
|
|
4805
4852
|
accWidth += item.offsetWidth;
|
|
4806
|
-
if (index)
|
|
4853
|
+
if (index > 0)
|
|
4807
4854
|
this.toggleItem(item, this.isOverflowElement(accWidth, item));
|
|
4808
4855
|
});
|
|
4809
4856
|
});
|
|
@@ -4812,7 +4859,6 @@ class OverflowBehavior {
|
|
|
4812
4859
|
}
|
|
4813
4860
|
|
|
4814
4861
|
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}";
|
|
4815
|
-
const MgItemMoreStyle0 = mgItemMoreCss;
|
|
4816
4862
|
|
|
4817
4863
|
const MgItemMore = class {
|
|
4818
4864
|
constructor(hostRef) {
|
|
@@ -4832,17 +4878,17 @@ const MgItemMore = class {
|
|
|
4832
4878
|
}
|
|
4833
4879
|
validateIcon(newValue) {
|
|
4834
4880
|
if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
|
|
4835
|
-
throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${
|
|
4881
|
+
throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${Gt(newValue)}.`);
|
|
4836
4882
|
}
|
|
4837
4883
|
validateSlotLabel(newValue) {
|
|
4838
4884
|
if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
|
|
4839
|
-
throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${
|
|
4885
|
+
throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${Gt(newValue)}.`);
|
|
4840
4886
|
else if (typeof newValue.label !== 'string')
|
|
4841
4887
|
this.slotlabel.label = this.messages.menuLabel;
|
|
4842
4888
|
}
|
|
4843
4889
|
validateSize(newValue) {
|
|
4844
4890
|
if (newValue && !sizes$5.includes(newValue))
|
|
4845
|
-
throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${
|
|
4891
|
+
throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${Gt(newValue)}.`);
|
|
4846
4892
|
}
|
|
4847
4893
|
/*************
|
|
4848
4894
|
* Lifecycle *
|
|
@@ -4889,7 +4935,7 @@ const MgItemMore = class {
|
|
|
4889
4935
|
*/
|
|
4890
4936
|
render() {
|
|
4891
4937
|
const menuItemIdentifier = 'mg-item-more';
|
|
4892
|
-
return (h(Host, { key: '
|
|
4938
|
+
return (h(Host, { key: 'd7811bdedea2159c351185958976bda08c21ba20', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (h("mg-menu-item", { key: '66f7fe8056bf40a034c49ea1b2f97b3eff8cedc5', "data-overflow-more": true, "data-size": this.parentMenu.size, "data-style-direction": directions$1.HORIZONTAL, identifier: menuItemIdentifier }, h("mg-icon", { key: '06c7e052299f37d913605c2d0e938eaee6b820ba', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: '9b8e2da9edb472f6822e8ed1878d1540e459c96a', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '5b8f0a9b0208bf881b5f5348d296a80dd2e60f0b', direction: directions$1.VERTICAL, label: this.messages.menuLabel, size: this.size, ref: ref => {
|
|
4893
4939
|
if (ref !== null)
|
|
4894
4940
|
this.itemMoreContainer = ref;
|
|
4895
4941
|
} })))));
|
|
@@ -4901,10 +4947,9 @@ const MgItemMore = class {
|
|
|
4901
4947
|
"size": ["validateSize"]
|
|
4902
4948
|
}; }
|
|
4903
4949
|
};
|
|
4904
|
-
MgItemMore.style =
|
|
4950
|
+
MgItemMore.style = mgItemMoreCss;
|
|
4905
4951
|
|
|
4906
4952
|
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}";
|
|
4907
|
-
const MgMenuStyle0 = mgMenuCss;
|
|
4908
4953
|
|
|
4909
4954
|
const MgMenu = class {
|
|
4910
4955
|
constructor(hostRef) {
|
|
@@ -4916,7 +4961,7 @@ const MgMenu = class {
|
|
|
4916
4961
|
/**
|
|
4917
4962
|
* Component display direction.
|
|
4918
4963
|
*/
|
|
4919
|
-
this.direction =
|
|
4964
|
+
this.direction = 'horizontal';
|
|
4920
4965
|
/**
|
|
4921
4966
|
* Define mg-menu size
|
|
4922
4967
|
*/
|
|
@@ -4937,7 +4982,7 @@ const MgMenu = class {
|
|
|
4937
4982
|
var _a, _b;
|
|
4938
4983
|
const menuItems = Array.from(menu.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
|
|
4939
4984
|
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');
|
|
4940
|
-
if (itemMoreMenuItem) {
|
|
4985
|
+
if (itemMoreMenuItem !== null && itemMoreMenuItem !== undefined) {
|
|
4941
4986
|
menuItems.push(itemMoreMenuItem);
|
|
4942
4987
|
}
|
|
4943
4988
|
return menuItems;
|
|
@@ -4976,12 +5021,12 @@ const MgMenu = class {
|
|
|
4976
5021
|
}
|
|
4977
5022
|
validateLabel(newValue) {
|
|
4978
5023
|
if (newValue === undefined && !this.element.hasAttribute('aria-label')) {
|
|
4979
|
-
throw new Error(`<${this.name}> prop "label" is required. Passed value: ${
|
|
5024
|
+
throw new Error(`<${this.name}> prop "label" is required. Passed value: ${Gt(newValue)}.`);
|
|
4980
5025
|
}
|
|
4981
5026
|
}
|
|
4982
5027
|
validateDirection(newValue) {
|
|
4983
5028
|
if (![directions$1.VERTICAL, directions$1.HORIZONTAL].includes(newValue)) {
|
|
4984
|
-
throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$1.HORIZONTAL}, ${directions$1.VERTICAL}. Passed value: ${
|
|
5029
|
+
throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$1.HORIZONTAL}, ${directions$1.VERTICAL}. Passed value: ${Gt(newValue)}.`);
|
|
4985
5030
|
}
|
|
4986
5031
|
else {
|
|
4987
5032
|
this.updateMenuItems();
|
|
@@ -4997,7 +5042,7 @@ const MgMenu = class {
|
|
|
4997
5042
|
}
|
|
4998
5043
|
validateSize(newValue) {
|
|
4999
5044
|
if (!sizes$5.includes(newValue)) {
|
|
5000
|
-
throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$5.join(', ')}. Passed value: ${
|
|
5045
|
+
throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$5.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
5001
5046
|
}
|
|
5002
5047
|
}
|
|
5003
5048
|
/**
|
|
@@ -5013,7 +5058,7 @@ const MgMenu = class {
|
|
|
5013
5058
|
if (focusedItem === itemToWatch)
|
|
5014
5059
|
return;
|
|
5015
5060
|
// reset expanded on previous active menu item
|
|
5016
|
-
if (focusedItem)
|
|
5061
|
+
if (focusedItem !== null)
|
|
5017
5062
|
focusedItem.removeAttribute('data-has-focus');
|
|
5018
5063
|
// update focusedMenuItem with new value
|
|
5019
5064
|
itemToWatch.setAttribute('data-has-focus', 'true');
|
|
@@ -5044,15 +5089,15 @@ const MgMenu = class {
|
|
|
5044
5089
|
const isElementChild = (element) => {
|
|
5045
5090
|
if (element === this.element)
|
|
5046
5091
|
return true;
|
|
5047
|
-
else if (
|
|
5092
|
+
else if (element.parentElement === null)
|
|
5048
5093
|
return false;
|
|
5049
5094
|
else
|
|
5050
5095
|
return isElementChild(element.parentElement);
|
|
5051
5096
|
};
|
|
5052
|
-
if (
|
|
5097
|
+
if (event.target.closest('mg-menu') === null || !isElementChild(event.target)) {
|
|
5053
5098
|
const focusedItem = this.element.querySelector('[data-has-focus]');
|
|
5054
5099
|
// reset expanded on previous active menu item
|
|
5055
|
-
if (focusedItem)
|
|
5100
|
+
if (focusedItem !== null)
|
|
5056
5101
|
focusedItem.removeAttribute('data-has-focus');
|
|
5057
5102
|
}
|
|
5058
5103
|
});
|
|
@@ -5065,7 +5110,7 @@ const MgMenu = class {
|
|
|
5065
5110
|
* @returns HTML Element
|
|
5066
5111
|
*/
|
|
5067
5112
|
render() {
|
|
5068
|
-
return (h(Host, { key: '
|
|
5113
|
+
return (h(Host, { key: '027cd6b867d852c1d238ffedd9ea9c8d40eb82f0', role: "list", "aria-label": this.label }, h("slot", { key: 'cb6dfa4a26800f3dd3fc820954a45aad025cc4a3' })));
|
|
5069
5114
|
}
|
|
5070
5115
|
get element() { return getElement(this); }
|
|
5071
5116
|
static get watchers() { return {
|
|
@@ -5075,16 +5120,15 @@ const MgMenu = class {
|
|
|
5075
5120
|
"size": ["validateSize"]
|
|
5076
5121
|
}; }
|
|
5077
5122
|
};
|
|
5078
|
-
MgMenu.style =
|
|
5123
|
+
MgMenu.style = mgMenuCss;
|
|
5079
5124
|
|
|
5080
5125
|
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}";
|
|
5081
|
-
const MgMenuItemStyle0 = mgMenuItemCss;
|
|
5082
5126
|
|
|
5083
5127
|
const MgMenuItem = class {
|
|
5084
5128
|
constructor(hostRef) {
|
|
5085
5129
|
registerInstance(this, hostRef);
|
|
5086
|
-
this.itemLoaded = createEvent(this, "item-loaded"
|
|
5087
|
-
this.itemUpdated = createEvent(this, "item-updated"
|
|
5130
|
+
this.itemLoaded = createEvent(this, "item-loaded");
|
|
5131
|
+
this.itemUpdated = createEvent(this, "item-updated");
|
|
5088
5132
|
/************
|
|
5089
5133
|
* Internal *
|
|
5090
5134
|
************/
|
|
@@ -5096,11 +5140,11 @@ const MgMenuItem = class {
|
|
|
5096
5140
|
/**
|
|
5097
5141
|
* Identifier is used to control mg-popover
|
|
5098
5142
|
*/
|
|
5099
|
-
this.identifier =
|
|
5143
|
+
this.identifier = Pt('mg-menu-item');
|
|
5100
5144
|
/**
|
|
5101
5145
|
* Define menu-item status.
|
|
5102
5146
|
*/
|
|
5103
|
-
this.status =
|
|
5147
|
+
this.status = 'visible';
|
|
5104
5148
|
/**
|
|
5105
5149
|
* Define menu-item content expanded.
|
|
5106
5150
|
*/
|
|
@@ -5115,7 +5159,7 @@ const MgMenuItem = class {
|
|
|
5115
5159
|
/**
|
|
5116
5160
|
* Component button classes
|
|
5117
5161
|
*/
|
|
5118
|
-
this.navigationButtonClassList = new
|
|
5162
|
+
this.navigationButtonClassList = new Zt([this.navigationButton]);
|
|
5119
5163
|
/**
|
|
5120
5164
|
* Does component have children.
|
|
5121
5165
|
*/
|
|
@@ -5140,7 +5184,7 @@ const MgMenuItem = class {
|
|
|
5140
5184
|
* @returns truthy if component display popover
|
|
5141
5185
|
*/
|
|
5142
5186
|
this.hasPopover = () => this.isDirection(directions$1.HORIZONTAL) &&
|
|
5143
|
-
((this.isInMainMenu() && Array.from(this.element.children).some(element =>
|
|
5187
|
+
((this.isInMainMenu() && Array.from(this.element.children).some(element => element.querySelector('[slot]') === null)) || this.isItemMore) &&
|
|
5144
5188
|
this.href === undefined;
|
|
5145
5189
|
/**
|
|
5146
5190
|
* Method to control if one of component children have active status
|
|
@@ -5154,7 +5198,7 @@ const MgMenuItem = class {
|
|
|
5154
5198
|
* Is component an interactive item
|
|
5155
5199
|
* @returns truthy if element is clickable
|
|
5156
5200
|
*/
|
|
5157
|
-
this.isInteractiveItem = () => this.hasChildren || !
|
|
5201
|
+
this.isInteractiveItem = () => this.hasChildren || !De(this.href);
|
|
5158
5202
|
/**
|
|
5159
5203
|
* Is component contextual direction match the given direction
|
|
5160
5204
|
* @param direction - in parent menu
|
|
@@ -5207,7 +5251,7 @@ const MgMenuItem = class {
|
|
|
5207
5251
|
}
|
|
5208
5252
|
['label', 'metadata'].forEach(slot => {
|
|
5209
5253
|
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
|
|
5210
|
-
if (!
|
|
5254
|
+
if (!De(element.textContent))
|
|
5211
5255
|
throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
|
|
5212
5256
|
if ((guard && !element.hasAttribute('title')) || !guard)
|
|
5213
5257
|
element.setAttribute('title', element.textContent);
|
|
@@ -5248,7 +5292,7 @@ const MgMenuItem = class {
|
|
|
5248
5292
|
// when item is the last clickable item we close the parent popover
|
|
5249
5293
|
if (!this.isInteractiveItem()) {
|
|
5250
5294
|
const closePopover = (element) => {
|
|
5251
|
-
if (
|
|
5295
|
+
if (element === null)
|
|
5252
5296
|
return;
|
|
5253
5297
|
else if (element !== this.element && element.expanded && element.shadowRoot.querySelector('mg-popover') !== null) {
|
|
5254
5298
|
element.expanded = false;
|
|
@@ -5274,8 +5318,8 @@ const MgMenuItem = class {
|
|
|
5274
5318
|
this.renderSlot = () => h("slot", null);
|
|
5275
5319
|
}
|
|
5276
5320
|
watchIdentifier(newValue) {
|
|
5277
|
-
if (!
|
|
5278
|
-
console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${
|
|
5321
|
+
if (!Ut(newValue)) {
|
|
5322
|
+
console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
|
|
5279
5323
|
}
|
|
5280
5324
|
else {
|
|
5281
5325
|
this.popoverIdentifier = `${this.identifier}-popover`;
|
|
@@ -5283,7 +5327,7 @@ const MgMenuItem = class {
|
|
|
5283
5327
|
}
|
|
5284
5328
|
watchTarget(newValue) {
|
|
5285
5329
|
if (newValue && !targets.includes(newValue)) {
|
|
5286
|
-
throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${
|
|
5330
|
+
throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
5287
5331
|
}
|
|
5288
5332
|
}
|
|
5289
5333
|
watchStatus(newValue, oldValue) {
|
|
@@ -5293,7 +5337,7 @@ const MgMenuItem = class {
|
|
|
5293
5337
|
}
|
|
5294
5338
|
watchExpanded(newValue) {
|
|
5295
5339
|
if (typeof newValue !== 'boolean') {
|
|
5296
|
-
throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${
|
|
5340
|
+
throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${Gt(newValue)}.`);
|
|
5297
5341
|
}
|
|
5298
5342
|
else {
|
|
5299
5343
|
this.updateExpanded(newValue);
|
|
@@ -5342,7 +5386,7 @@ const MgMenuItem = class {
|
|
|
5342
5386
|
*/
|
|
5343
5387
|
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
5344
5388
|
watchDataHasFocus(newValue) {
|
|
5345
|
-
if (!newValue)
|
|
5389
|
+
if (!De(newValue))
|
|
5346
5390
|
this.updateExpanded(Boolean(newValue));
|
|
5347
5391
|
}
|
|
5348
5392
|
/**
|
|
@@ -5350,7 +5394,7 @@ const MgMenuItem = class {
|
|
|
5350
5394
|
*/
|
|
5351
5395
|
updatePopoverGuard() {
|
|
5352
5396
|
const subItem = this.element.querySelector('*:not([slot])');
|
|
5353
|
-
if (
|
|
5397
|
+
if (subItem === null)
|
|
5354
5398
|
return;
|
|
5355
5399
|
if (this.hasPopover())
|
|
5356
5400
|
subItem.dataset.mgPopoverGuard = this.popoverIdentifier;
|
|
@@ -5408,7 +5452,7 @@ const MgMenuItem = class {
|
|
|
5408
5452
|
* @returns promise process wich emit the 'item-updated' event
|
|
5409
5453
|
*/
|
|
5410
5454
|
componentShouldUpdate() {
|
|
5411
|
-
return
|
|
5455
|
+
return Xt(() => {
|
|
5412
5456
|
this.itemUpdated.emit();
|
|
5413
5457
|
});
|
|
5414
5458
|
}
|
|
@@ -5435,7 +5479,7 @@ const MgMenuItem = class {
|
|
|
5435
5479
|
['mg-c-menu-item__collapse-container']: true,
|
|
5436
5480
|
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions$1.HORIZONTAL),
|
|
5437
5481
|
});
|
|
5438
|
-
return (h(Host, { key: '
|
|
5482
|
+
return (h(Host, { key: 'caeeabd1d1c9f7de3c8ecda6a315b85215b9e656', role: this.isItemMore ? 'presentation' : 'listitem' }, this.hasPopover() ? (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
|
|
5439
5483
|
}, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
|
|
5440
5484
|
this.renderInteractiveElement(),
|
|
5441
5485
|
h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
|
|
@@ -5454,7 +5498,7 @@ const MgMenuItem = class {
|
|
|
5454
5498
|
"data-has-focus": ["watchDataHasFocus"]
|
|
5455
5499
|
}; }
|
|
5456
5500
|
};
|
|
5457
|
-
MgMenuItem.style =
|
|
5501
|
+
MgMenuItem.style = mgMenuItemCss;
|
|
5458
5502
|
|
|
5459
5503
|
/**
|
|
5460
5504
|
* List available variants
|
|
@@ -5466,7 +5510,6 @@ const variants$1 = ['info', 'warning', 'success', 'danger'];
|
|
|
5466
5510
|
const variantStyles = ['bar-left', 'background'];
|
|
5467
5511
|
|
|
5468
5512
|
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%}";
|
|
5469
|
-
const MgMessageStyle0 = mgMessageCss;
|
|
5470
5513
|
|
|
5471
5514
|
const MgMessage = class {
|
|
5472
5515
|
constructor(hostRef) {
|
|
@@ -5486,7 +5529,7 @@ const MgMessage = class {
|
|
|
5486
5529
|
/**
|
|
5487
5530
|
* Component classes
|
|
5488
5531
|
*/
|
|
5489
|
-
this.classCollection = new
|
|
5532
|
+
this.classCollection = new Zt(['mg-c-message']);
|
|
5490
5533
|
/**
|
|
5491
5534
|
* Define if component is using actions slot
|
|
5492
5535
|
*/
|
|
@@ -5510,7 +5553,7 @@ const MgMessage = class {
|
|
|
5510
5553
|
}
|
|
5511
5554
|
watchVariant(newValue, oldValue) {
|
|
5512
5555
|
if (!variants$1.includes(newValue)) {
|
|
5513
|
-
throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${
|
|
5556
|
+
throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
5514
5557
|
}
|
|
5515
5558
|
else {
|
|
5516
5559
|
if (newValue !== undefined)
|
|
@@ -5521,7 +5564,7 @@ const MgMessage = class {
|
|
|
5521
5564
|
}
|
|
5522
5565
|
watchVariantStyle(newValue, oldValue) {
|
|
5523
5566
|
if (!variantStyles.includes(newValue)) {
|
|
5524
|
-
throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${
|
|
5567
|
+
throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
5525
5568
|
}
|
|
5526
5569
|
else {
|
|
5527
5570
|
if (newValue !== undefined)
|
|
@@ -5548,9 +5591,9 @@ const MgMessage = class {
|
|
|
5548
5591
|
* @returns HTML Element
|
|
5549
5592
|
*/
|
|
5550
5593
|
render() {
|
|
5551
|
-
return (h("div", { key: '
|
|
5594
|
+
return (h("div", { key: '851d97fde6f05799e1420f8825fcff986d9af1d6', class: this.classCollection.join() }, h("mg-card", { key: '40f85f1fb3240ab709b1ab46286e9a953f2d5dc8' }, this.variantStyle === 'bar-left' && h("span", { key: '50b078ec379c7774d2f409c64b56108041bf3053', class: "mg-c-message__bar" }), h("span", { key: 'bc6b1019e1103fc8cd5e4e92f95b62374207be2b', class: "mg-c-message__icon" }, h("mg-icon", { key: 'e461ddc1eb1ddcb7ecc673f59dc59f400efbe916', icon: this.getIcon() })), h("div", { key: 'edf836b375d7f1fd413b53711b99acbe2bef3e92', class: "mg-c-message__content" }, h("span", { key: 'c6ce4628e450b7e89ef3715126b3a2dee081224e', class: "mg-c-message__content-slot" }, h("slot", { key: '36ecf7417e61ab84695078e2fd4ebe829bd769a7' })), this.hasActions && [
|
|
5552
5595
|
h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
|
|
5553
|
-
h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '
|
|
5596
|
+
h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '43be5769165cac1ab702b2ba80fb885c2ec1834f', name: "actions" })),
|
|
5554
5597
|
]))));
|
|
5555
5598
|
}
|
|
5556
5599
|
get element() { return getElement(this); }
|
|
@@ -5559,7 +5602,7 @@ const MgMessage = class {
|
|
|
5559
5602
|
"variantStyle": ["watchVariantStyle"]
|
|
5560
5603
|
}; }
|
|
5561
5604
|
};
|
|
5562
|
-
MgMessage.style =
|
|
5605
|
+
MgMessage.style = mgMessageCss;
|
|
5563
5606
|
|
|
5564
5607
|
/**
|
|
5565
5608
|
* List of all possibles dialog roles
|
|
@@ -5567,25 +5610,24 @@ MgMessage.style = MgMessageStyle0;
|
|
|
5567
5610
|
const dialogRoles = ['dialog', 'alertdialog'];
|
|
5568
5611
|
|
|
5569
5612
|
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}";
|
|
5570
|
-
const MgModalStyle0 = mgModalCss;
|
|
5571
5613
|
|
|
5572
5614
|
const MgModal = class {
|
|
5573
5615
|
constructor(hostRef) {
|
|
5574
5616
|
registerInstance(this, hostRef);
|
|
5575
|
-
this.componentShow = createEvent(this, "component-show"
|
|
5576
|
-
this.componentHide = createEvent(this, "component-hide"
|
|
5577
|
-
this.componentClose = createEvent(this, "component-close"
|
|
5617
|
+
this.componentShow = createEvent(this, "component-show");
|
|
5618
|
+
this.componentHide = createEvent(this, "component-hide");
|
|
5619
|
+
this.componentClose = createEvent(this, "component-close");
|
|
5578
5620
|
// IDs
|
|
5579
5621
|
this.titleId = '';
|
|
5580
5622
|
/**
|
|
5581
5623
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
5582
5624
|
* If not set, it will be created.
|
|
5583
5625
|
*/
|
|
5584
|
-
this.identifier =
|
|
5626
|
+
this.identifier = Pt('mg-modal');
|
|
5585
5627
|
/**
|
|
5586
5628
|
* Modal dialog role.
|
|
5587
5629
|
*/
|
|
5588
|
-
this.dialogRole =
|
|
5630
|
+
this.dialogRole = 'dialog';
|
|
5589
5631
|
/**
|
|
5590
5632
|
* Define if modal has a cross button
|
|
5591
5633
|
*/
|
|
@@ -5601,7 +5643,7 @@ const MgModal = class {
|
|
|
5601
5643
|
/**
|
|
5602
5644
|
* Component classes
|
|
5603
5645
|
*/
|
|
5604
|
-
this.classCollection = new
|
|
5646
|
+
this.classCollection = new Zt(['mg-c-modal']);
|
|
5605
5647
|
/***********
|
|
5606
5648
|
* Handles *
|
|
5607
5649
|
***********/
|
|
@@ -5614,17 +5656,17 @@ const MgModal = class {
|
|
|
5614
5656
|
};
|
|
5615
5657
|
}
|
|
5616
5658
|
watchIdentifier(newValue) {
|
|
5617
|
-
if (!
|
|
5618
|
-
throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${
|
|
5659
|
+
if (!Ut(newValue)) {
|
|
5660
|
+
throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
|
|
5619
5661
|
}
|
|
5620
5662
|
}
|
|
5621
5663
|
validateDialogRole(newValue) {
|
|
5622
5664
|
if (!dialogRoles.includes(newValue))
|
|
5623
|
-
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${
|
|
5665
|
+
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
5624
5666
|
}
|
|
5625
5667
|
validateModalTitle(newValue) {
|
|
5626
|
-
if (!
|
|
5627
|
-
throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${
|
|
5668
|
+
if (!De(newValue)) {
|
|
5669
|
+
throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${Gt(newValue)}.`);
|
|
5628
5670
|
}
|
|
5629
5671
|
}
|
|
5630
5672
|
watchOpen(newValue) {
|
|
@@ -5673,11 +5715,11 @@ const MgModal = class {
|
|
|
5673
5715
|
* @returns HTML Element
|
|
5674
5716
|
*/
|
|
5675
5717
|
render() {
|
|
5676
|
-
return (h("dialog", { key: '
|
|
5718
|
+
return (h("dialog", { key: '4b7346b707b895a8a110bb7553f0db32d1c5778c', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
|
|
5677
5719
|
if (el !== null) {
|
|
5678
5720
|
this.dialog = el;
|
|
5679
5721
|
}
|
|
5680
|
-
} }, h("mg-card", { key: '
|
|
5722
|
+
} }, h("mg-card", { key: '2aaabab2e1be14013bcae66d100ac56c1a9bbf4d' }, h("div", { key: '56a03d6cbda094d7ae4444ca3fab924982f73e2a', class: "mg-c-modal__dialog" }, h("header", { key: 'e7eb70e614a9e6c6b3f14f9e165bf801b780b031', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'c57ccc8f049893c5e46d769b527cc2e2c5ff14c0', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'b1b4357af8c875aab9f1104895de3cc228d12feb', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: 'cfe5fba2577ece682368332d3836cf709bb1b0e1', icon: "cross" })))), h("h1", { key: '718527902ea4814d55bf4d1c89d111a965233f0a', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '78603fdb8fffa93e5caa6cf0ece9c6dbdbdfefde', class: "mg-c-modal__content" }, h("slot", { key: '1cd5a0415e53cb836428f8b9c4fc02dac11447a9' })), this.hasActions && (h("footer", { key: 'da72e5c2f43308d0f94d4e2eb36e317a13b5b16e', class: "mg-c-modal__footer" }, h("slot", { key: '49467ef13123cb4f4e2b315d293379d857ca3245', name: "actions" })))))));
|
|
5681
5723
|
}
|
|
5682
5724
|
get element() { return getElement(this); }
|
|
5683
5725
|
static get watchers() { return {
|
|
@@ -5687,7 +5729,7 @@ const MgModal = class {
|
|
|
5687
5729
|
"open": ["watchOpen"]
|
|
5688
5730
|
}; }
|
|
5689
5731
|
};
|
|
5690
|
-
MgModal.style =
|
|
5732
|
+
MgModal.style = mgModalCss;
|
|
5691
5733
|
|
|
5692
5734
|
const NavigationAction = {
|
|
5693
5735
|
NEXT: 'next',
|
|
@@ -5695,7 +5737,6 @@ const NavigationAction = {
|
|
|
5695
5737
|
};
|
|
5696
5738
|
|
|
5697
5739
|
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}";
|
|
5698
|
-
const MgPaginationStyle0 = mgPaginationCss;
|
|
5699
5740
|
|
|
5700
5741
|
/**
|
|
5701
5742
|
* Range generator
|
|
@@ -5722,12 +5763,20 @@ const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - st
|
|
|
5722
5763
|
const MgPagination = class {
|
|
5723
5764
|
constructor(hostRef) {
|
|
5724
5765
|
registerInstance(this, hostRef);
|
|
5725
|
-
this.currentPageChange = createEvent(this, "current-page-change"
|
|
5766
|
+
this.currentPageChange = createEvent(this, "current-page-change");
|
|
5726
5767
|
/**
|
|
5727
5768
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
5728
5769
|
* If not set, it will be created.
|
|
5729
5770
|
*/
|
|
5730
|
-
this.identifier =
|
|
5771
|
+
this.identifier = Pt('mg-pagination');
|
|
5772
|
+
/**
|
|
5773
|
+
* Hide navigation label
|
|
5774
|
+
*/
|
|
5775
|
+
this.hideNavigationLabels = false;
|
|
5776
|
+
/**
|
|
5777
|
+
* Hide select input
|
|
5778
|
+
*/
|
|
5779
|
+
this.hidePageCount = false;
|
|
5731
5780
|
/**
|
|
5732
5781
|
* Component total pages
|
|
5733
5782
|
*/
|
|
@@ -5764,18 +5813,18 @@ const MgPagination = class {
|
|
|
5764
5813
|
};
|
|
5765
5814
|
}
|
|
5766
5815
|
watchIdentifier(newValue) {
|
|
5767
|
-
if (!
|
|
5768
|
-
console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${
|
|
5816
|
+
if (!Ut(newValue)) {
|
|
5817
|
+
console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
|
|
5769
5818
|
}
|
|
5770
5819
|
}
|
|
5771
5820
|
validateTotalPages(newValue) {
|
|
5772
5821
|
if (newValue < 1) {
|
|
5773
|
-
throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${
|
|
5822
|
+
throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${Gt(newValue)}.`);
|
|
5774
5823
|
}
|
|
5775
5824
|
}
|
|
5776
5825
|
validateCurrentPage(newValue) {
|
|
5777
5826
|
if (newValue < 1) {
|
|
5778
|
-
throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${
|
|
5827
|
+
throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${Gt(newValue)}.`);
|
|
5779
5828
|
}
|
|
5780
5829
|
else if (newValue > this.totalPages) {
|
|
5781
5830
|
throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
|
|
@@ -5805,10 +5854,10 @@ const MgPagination = class {
|
|
|
5805
5854
|
* @returns HTML Element
|
|
5806
5855
|
*/
|
|
5807
5856
|
render() {
|
|
5808
|
-
const navigationActionButton = (disabled, action) => (h("mg-button", { key: '
|
|
5857
|
+
const navigationActionButton = (disabled, action) => (h("mg-button", { key: 'b6983bde889955b35b1e580ffd5ece96a2919eca', label: this.messages.pagination[`${action}Page`],
|
|
5809
5858
|
// eslint-disable-next-line react/jsx-no-bind
|
|
5810
|
-
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '
|
|
5811
|
-
return (h(Host, { key: '
|
|
5859
|
+
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '64316742287d7cb9adf0c4bb3cb902a3c1cea6b5', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { key: '2c405c1530509f3e6938e7c1d754b7aff216a6f7', icon: "chevron-right" })));
|
|
5860
|
+
return (h(Host, { key: 'a341519e24868b594c1bb91c12549c0338fc0f49', hidden: this.totalPages < 2 }, 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 && (h("div", { key: '32498b13867e363f6f51ffbaff6f18623cbd698d', class: "mg-c-pagination__page-count" }, 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 }), 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))));
|
|
5812
5861
|
}
|
|
5813
5862
|
get element() { return getElement(this); }
|
|
5814
5863
|
static get watchers() { return {
|
|
@@ -5817,7 +5866,7 @@ const MgPagination = class {
|
|
|
5817
5866
|
"currentPage": ["validateCurrentPage"]
|
|
5818
5867
|
}; }
|
|
5819
5868
|
};
|
|
5820
|
-
MgPagination.style =
|
|
5869
|
+
MgPagination.style = mgPaginationCss;
|
|
5821
5870
|
|
|
5822
5871
|
/**
|
|
5823
5872
|
* Available expand toggle display options
|
|
@@ -5829,18 +5878,17 @@ const expandToggleDisplays = ['text', 'icon'];
|
|
|
5829
5878
|
const titlePositions = ['left', 'right'];
|
|
5830
5879
|
|
|
5831
5880
|
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}";
|
|
5832
|
-
const MgPanelStyle0 = mgPanelCss;
|
|
5833
5881
|
|
|
5834
5882
|
const MgPanel = class {
|
|
5835
5883
|
constructor(hostRef) {
|
|
5836
5884
|
registerInstance(this, hostRef);
|
|
5837
|
-
this.titleChange = createEvent(this, "title-change"
|
|
5838
|
-
this.expandedChange = createEvent(this, "expanded-change"
|
|
5885
|
+
this.titleChange = createEvent(this, "title-change");
|
|
5886
|
+
this.expandedChange = createEvent(this, "expanded-change");
|
|
5839
5887
|
/**
|
|
5840
5888
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
5841
5889
|
* If not set, it will be created.
|
|
5842
5890
|
*/
|
|
5843
|
-
this.identifier =
|
|
5891
|
+
this.identifier = Pt('mg-panel');
|
|
5844
5892
|
/**
|
|
5845
5893
|
* Define if panel title is editable
|
|
5846
5894
|
*/
|
|
@@ -5848,7 +5896,7 @@ const MgPanel = class {
|
|
|
5848
5896
|
/**
|
|
5849
5897
|
* Define title position
|
|
5850
5898
|
*/
|
|
5851
|
-
this.titlePosition =
|
|
5899
|
+
this.titlePosition = 'left';
|
|
5852
5900
|
/**
|
|
5853
5901
|
* Panel is opened
|
|
5854
5902
|
*/
|
|
@@ -5856,11 +5904,15 @@ const MgPanel = class {
|
|
|
5856
5904
|
/**
|
|
5857
5905
|
* Define expand toggle button display
|
|
5858
5906
|
*/
|
|
5859
|
-
this.expandToggleDisplay =
|
|
5907
|
+
this.expandToggleDisplay = 'text';
|
|
5908
|
+
/**
|
|
5909
|
+
* Disable possibility to toggle expand
|
|
5910
|
+
*/
|
|
5911
|
+
this.expandToggleDisabled = false;
|
|
5860
5912
|
/**
|
|
5861
5913
|
* Component classes
|
|
5862
5914
|
*/
|
|
5863
|
-
this.classCollection = new
|
|
5915
|
+
this.classCollection = new Zt(['mg-c-panel']);
|
|
5864
5916
|
/**
|
|
5865
5917
|
* Title is in edition mode
|
|
5866
5918
|
*/
|
|
@@ -5959,13 +6011,13 @@ const MgPanel = class {
|
|
|
5959
6011
|
};
|
|
5960
6012
|
}
|
|
5961
6013
|
watchIdentifier(newValue) {
|
|
5962
|
-
if (!
|
|
5963
|
-
console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${
|
|
6014
|
+
if (!Ut(newValue)) {
|
|
6015
|
+
console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
|
|
5964
6016
|
}
|
|
5965
6017
|
}
|
|
5966
6018
|
validatePanelTitle(newValue) {
|
|
5967
|
-
if (!
|
|
5968
|
-
throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${
|
|
6019
|
+
if (!De(newValue))
|
|
6020
|
+
throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${Gt(newValue)}.`);
|
|
5969
6021
|
this.titleChange.emit(newValue);
|
|
5970
6022
|
}
|
|
5971
6023
|
validateTitlePattern(newValue) {
|
|
@@ -5974,14 +6026,14 @@ const MgPanel = class {
|
|
|
5974
6026
|
}
|
|
5975
6027
|
validateTitlePosition(newValue) {
|
|
5976
6028
|
if (!titlePositions.includes(newValue))
|
|
5977
|
-
throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${
|
|
6029
|
+
throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
5978
6030
|
}
|
|
5979
6031
|
handleExpanded(newValue) {
|
|
5980
6032
|
this.expandedChange.emit(newValue);
|
|
5981
6033
|
}
|
|
5982
6034
|
validateExpandToggleDisplay(newValue) {
|
|
5983
6035
|
if (!expandToggleDisplays.includes(newValue))
|
|
5984
|
-
throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${
|
|
6036
|
+
throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
5985
6037
|
if (newValue === 'icon' && this.titleEditable)
|
|
5986
6038
|
this.titleEditable = false;
|
|
5987
6039
|
}
|
|
@@ -6016,7 +6068,7 @@ const MgPanel = class {
|
|
|
6016
6068
|
*/
|
|
6017
6069
|
render() {
|
|
6018
6070
|
const headerId = `${this.identifier}-header`;
|
|
6019
|
-
return (h("section", { key: '
|
|
6071
|
+
return (h("section", { key: '73b9b1ab03307718bc7085799675da7447787c73', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '91702feab4cde0548c276f3d32fa193ff1093cae' }, h("header", { key: '442a17d42f86e73648ffa33124a1745fef3b07e3', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '0df72fb9e53f0a8307c062d506e8c744fd6780f3', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '44fa7501182e1c671d229929ebc12031c3048fdb' })))));
|
|
6020
6072
|
}
|
|
6021
6073
|
get element() { return getElement(this); }
|
|
6022
6074
|
static get watchers() { return {
|
|
@@ -6029,16 +6081,13 @@ const MgPanel = class {
|
|
|
6029
6081
|
"expandToggleDisplay": ["validateExpandToggleDisplay"]
|
|
6030
6082
|
}; }
|
|
6031
6083
|
};
|
|
6032
|
-
MgPanel.style =
|
|
6084
|
+
MgPanel.style = mgPanelCss;
|
|
6033
6085
|
|
|
6034
6086
|
/**
|
|
6035
6087
|
* Custom positioning reference element.
|
|
6036
6088
|
* @see https://floating-ui.com/docs/virtual-elements
|
|
6037
6089
|
*/
|
|
6038
6090
|
|
|
6039
|
-
const sides$1 = ['top', 'right', 'bottom', 'left'];
|
|
6040
|
-
const alignments$1 = ['start', 'end'];
|
|
6041
|
-
const placements$1 = /*#__PURE__*/sides$1.reduce((acc, side) => acc.concat(side, side + "-" + alignments$1[0], side + "-" + alignments$1[1]), []);
|
|
6042
6091
|
const min = Math.min;
|
|
6043
6092
|
const max = Math.max;
|
|
6044
6093
|
const round = Math.round;
|
|
@@ -6462,109 +6511,6 @@ const arrow$1 = options => ({
|
|
|
6462
6511
|
}
|
|
6463
6512
|
});
|
|
6464
6513
|
|
|
6465
|
-
function getPlacementList(alignment, autoAlignment, allowedPlacements) {
|
|
6466
|
-
const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
|
|
6467
|
-
return allowedPlacementsSortedByAlignment.filter(placement => {
|
|
6468
|
-
if (alignment) {
|
|
6469
|
-
return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
|
|
6470
|
-
}
|
|
6471
|
-
return true;
|
|
6472
|
-
});
|
|
6473
|
-
}
|
|
6474
|
-
/**
|
|
6475
|
-
* Optimizes the visibility of the floating element by choosing the placement
|
|
6476
|
-
* that has the most space available automatically, without needing to specify a
|
|
6477
|
-
* preferred placement. Alternative to `flip`.
|
|
6478
|
-
* @see https://floating-ui.com/docs/autoPlacement
|
|
6479
|
-
*/
|
|
6480
|
-
const autoPlacement = function (options) {
|
|
6481
|
-
if (options === void 0) {
|
|
6482
|
-
options = {};
|
|
6483
|
-
}
|
|
6484
|
-
return {
|
|
6485
|
-
name: 'autoPlacement',
|
|
6486
|
-
options,
|
|
6487
|
-
async fn(state) {
|
|
6488
|
-
var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
|
|
6489
|
-
const {
|
|
6490
|
-
rects,
|
|
6491
|
-
middlewareData,
|
|
6492
|
-
placement,
|
|
6493
|
-
platform,
|
|
6494
|
-
elements
|
|
6495
|
-
} = state;
|
|
6496
|
-
const {
|
|
6497
|
-
crossAxis = false,
|
|
6498
|
-
alignment,
|
|
6499
|
-
allowedPlacements = placements$1,
|
|
6500
|
-
autoAlignment = true,
|
|
6501
|
-
...detectOverflowOptions
|
|
6502
|
-
} = evaluate(options, state);
|
|
6503
|
-
const placements$1$1 = alignment !== undefined || allowedPlacements === placements$1 ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
|
|
6504
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
6505
|
-
const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
|
|
6506
|
-
const currentPlacement = placements$1$1[currentIndex];
|
|
6507
|
-
if (currentPlacement == null) {
|
|
6508
|
-
return {};
|
|
6509
|
-
}
|
|
6510
|
-
const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
|
|
6511
|
-
|
|
6512
|
-
// Make `computeCoords` start from the right place.
|
|
6513
|
-
if (placement !== currentPlacement) {
|
|
6514
|
-
return {
|
|
6515
|
-
reset: {
|
|
6516
|
-
placement: placements$1$1[0]
|
|
6517
|
-
}
|
|
6518
|
-
};
|
|
6519
|
-
}
|
|
6520
|
-
const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
|
|
6521
|
-
const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
|
|
6522
|
-
placement: currentPlacement,
|
|
6523
|
-
overflows: currentOverflows
|
|
6524
|
-
}];
|
|
6525
|
-
const nextPlacement = placements$1$1[currentIndex + 1];
|
|
6526
|
-
|
|
6527
|
-
// There are more placements to check.
|
|
6528
|
-
if (nextPlacement) {
|
|
6529
|
-
return {
|
|
6530
|
-
data: {
|
|
6531
|
-
index: currentIndex + 1,
|
|
6532
|
-
overflows: allOverflows
|
|
6533
|
-
},
|
|
6534
|
-
reset: {
|
|
6535
|
-
placement: nextPlacement
|
|
6536
|
-
}
|
|
6537
|
-
};
|
|
6538
|
-
}
|
|
6539
|
-
const placementsSortedByMostSpace = allOverflows.map(d => {
|
|
6540
|
-
const alignment = getAlignment(d.placement);
|
|
6541
|
-
return [d.placement, alignment && crossAxis ?
|
|
6542
|
-
// Check along the mainAxis and main crossAxis side.
|
|
6543
|
-
d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
|
|
6544
|
-
// Check only the mainAxis.
|
|
6545
|
-
d.overflows[0], d.overflows];
|
|
6546
|
-
}).sort((a, b) => a[1] - b[1]);
|
|
6547
|
-
const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
|
|
6548
|
-
// Aligned placements should not check their opposite crossAxis
|
|
6549
|
-
// side.
|
|
6550
|
-
getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
|
|
6551
|
-
const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
|
|
6552
|
-
if (resetPlacement !== placement) {
|
|
6553
|
-
return {
|
|
6554
|
-
data: {
|
|
6555
|
-
index: currentIndex + 1,
|
|
6556
|
-
overflows: allOverflows
|
|
6557
|
-
},
|
|
6558
|
-
reset: {
|
|
6559
|
-
placement: resetPlacement
|
|
6560
|
-
}
|
|
6561
|
-
};
|
|
6562
|
-
}
|
|
6563
|
-
return {};
|
|
6564
|
-
}
|
|
6565
|
-
};
|
|
6566
|
-
};
|
|
6567
|
-
|
|
6568
6514
|
/**
|
|
6569
6515
|
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
6570
6516
|
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
@@ -6691,206 +6637,6 @@ const flip$1 = function (options) {
|
|
|
6691
6637
|
};
|
|
6692
6638
|
};
|
|
6693
6639
|
|
|
6694
|
-
function getSideOffsets(overflow, rect) {
|
|
6695
|
-
return {
|
|
6696
|
-
top: overflow.top - rect.height,
|
|
6697
|
-
right: overflow.right - rect.width,
|
|
6698
|
-
bottom: overflow.bottom - rect.height,
|
|
6699
|
-
left: overflow.left - rect.width
|
|
6700
|
-
};
|
|
6701
|
-
}
|
|
6702
|
-
function isAnySideFullyClipped(overflow) {
|
|
6703
|
-
return sides$1.some(side => overflow[side] >= 0);
|
|
6704
|
-
}
|
|
6705
|
-
/**
|
|
6706
|
-
* Provides data to hide the floating element in applicable situations, such as
|
|
6707
|
-
* when it is not in the same clipping context as the reference element.
|
|
6708
|
-
* @see https://floating-ui.com/docs/hide
|
|
6709
|
-
*/
|
|
6710
|
-
const hide = function (options) {
|
|
6711
|
-
if (options === void 0) {
|
|
6712
|
-
options = {};
|
|
6713
|
-
}
|
|
6714
|
-
return {
|
|
6715
|
-
name: 'hide',
|
|
6716
|
-
options,
|
|
6717
|
-
async fn(state) {
|
|
6718
|
-
const {
|
|
6719
|
-
rects
|
|
6720
|
-
} = state;
|
|
6721
|
-
const {
|
|
6722
|
-
strategy = 'referenceHidden',
|
|
6723
|
-
...detectOverflowOptions
|
|
6724
|
-
} = evaluate(options, state);
|
|
6725
|
-
switch (strategy) {
|
|
6726
|
-
case 'referenceHidden':
|
|
6727
|
-
{
|
|
6728
|
-
const overflow = await detectOverflow(state, {
|
|
6729
|
-
...detectOverflowOptions,
|
|
6730
|
-
elementContext: 'reference'
|
|
6731
|
-
});
|
|
6732
|
-
const offsets = getSideOffsets(overflow, rects.reference);
|
|
6733
|
-
return {
|
|
6734
|
-
data: {
|
|
6735
|
-
referenceHiddenOffsets: offsets,
|
|
6736
|
-
referenceHidden: isAnySideFullyClipped(offsets)
|
|
6737
|
-
}
|
|
6738
|
-
};
|
|
6739
|
-
}
|
|
6740
|
-
case 'escaped':
|
|
6741
|
-
{
|
|
6742
|
-
const overflow = await detectOverflow(state, {
|
|
6743
|
-
...detectOverflowOptions,
|
|
6744
|
-
altBoundary: true
|
|
6745
|
-
});
|
|
6746
|
-
const offsets = getSideOffsets(overflow, rects.floating);
|
|
6747
|
-
return {
|
|
6748
|
-
data: {
|
|
6749
|
-
escapedOffsets: offsets,
|
|
6750
|
-
escaped: isAnySideFullyClipped(offsets)
|
|
6751
|
-
}
|
|
6752
|
-
};
|
|
6753
|
-
}
|
|
6754
|
-
default:
|
|
6755
|
-
{
|
|
6756
|
-
return {};
|
|
6757
|
-
}
|
|
6758
|
-
}
|
|
6759
|
-
}
|
|
6760
|
-
};
|
|
6761
|
-
};
|
|
6762
|
-
|
|
6763
|
-
function getBoundingRect(rects) {
|
|
6764
|
-
const minX = min(...rects.map(rect => rect.left));
|
|
6765
|
-
const minY = min(...rects.map(rect => rect.top));
|
|
6766
|
-
const maxX = max(...rects.map(rect => rect.right));
|
|
6767
|
-
const maxY = max(...rects.map(rect => rect.bottom));
|
|
6768
|
-
return {
|
|
6769
|
-
x: minX,
|
|
6770
|
-
y: minY,
|
|
6771
|
-
width: maxX - minX,
|
|
6772
|
-
height: maxY - minY
|
|
6773
|
-
};
|
|
6774
|
-
}
|
|
6775
|
-
function getRectsByLine(rects) {
|
|
6776
|
-
const sortedRects = rects.slice().sort((a, b) => a.y - b.y);
|
|
6777
|
-
const groups = [];
|
|
6778
|
-
let prevRect = null;
|
|
6779
|
-
for (let i = 0; i < sortedRects.length; i++) {
|
|
6780
|
-
const rect = sortedRects[i];
|
|
6781
|
-
if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {
|
|
6782
|
-
groups.push([rect]);
|
|
6783
|
-
} else {
|
|
6784
|
-
groups[groups.length - 1].push(rect);
|
|
6785
|
-
}
|
|
6786
|
-
prevRect = rect;
|
|
6787
|
-
}
|
|
6788
|
-
return groups.map(rect => rectToClientRect(getBoundingRect(rect)));
|
|
6789
|
-
}
|
|
6790
|
-
/**
|
|
6791
|
-
* Provides improved positioning for inline reference elements that can span
|
|
6792
|
-
* over multiple lines, such as hyperlinks or range selections.
|
|
6793
|
-
* @see https://floating-ui.com/docs/inline
|
|
6794
|
-
*/
|
|
6795
|
-
const inline = function (options) {
|
|
6796
|
-
if (options === void 0) {
|
|
6797
|
-
options = {};
|
|
6798
|
-
}
|
|
6799
|
-
return {
|
|
6800
|
-
name: 'inline',
|
|
6801
|
-
options,
|
|
6802
|
-
async fn(state) {
|
|
6803
|
-
const {
|
|
6804
|
-
placement,
|
|
6805
|
-
elements,
|
|
6806
|
-
rects,
|
|
6807
|
-
platform,
|
|
6808
|
-
strategy
|
|
6809
|
-
} = state;
|
|
6810
|
-
// A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
|
|
6811
|
-
// ClientRect's bounds, despite the event listener being triggered. A
|
|
6812
|
-
// padding of 2 seems to handle this issue.
|
|
6813
|
-
const {
|
|
6814
|
-
padding = 2,
|
|
6815
|
-
x,
|
|
6816
|
-
y
|
|
6817
|
-
} = evaluate(options, state);
|
|
6818
|
-
const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);
|
|
6819
|
-
const clientRects = getRectsByLine(nativeClientRects);
|
|
6820
|
-
const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
|
|
6821
|
-
const paddingObject = getPaddingObject(padding);
|
|
6822
|
-
function getBoundingClientRect() {
|
|
6823
|
-
// There are two rects and they are disjoined.
|
|
6824
|
-
if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
|
|
6825
|
-
// Find the first rect in which the point is fully inside.
|
|
6826
|
-
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;
|
|
6827
|
-
}
|
|
6828
|
-
|
|
6829
|
-
// There are 2 or more connected rects.
|
|
6830
|
-
if (clientRects.length >= 2) {
|
|
6831
|
-
if (getSideAxis(placement) === 'y') {
|
|
6832
|
-
const firstRect = clientRects[0];
|
|
6833
|
-
const lastRect = clientRects[clientRects.length - 1];
|
|
6834
|
-
const isTop = getSide(placement) === 'top';
|
|
6835
|
-
const top = firstRect.top;
|
|
6836
|
-
const bottom = lastRect.bottom;
|
|
6837
|
-
const left = isTop ? firstRect.left : lastRect.left;
|
|
6838
|
-
const right = isTop ? firstRect.right : lastRect.right;
|
|
6839
|
-
const width = right - left;
|
|
6840
|
-
const height = bottom - top;
|
|
6841
|
-
return {
|
|
6842
|
-
top,
|
|
6843
|
-
bottom,
|
|
6844
|
-
left,
|
|
6845
|
-
right,
|
|
6846
|
-
width,
|
|
6847
|
-
height,
|
|
6848
|
-
x: left,
|
|
6849
|
-
y: top
|
|
6850
|
-
};
|
|
6851
|
-
}
|
|
6852
|
-
const isLeftSide = getSide(placement) === 'left';
|
|
6853
|
-
const maxRight = max(...clientRects.map(rect => rect.right));
|
|
6854
|
-
const minLeft = min(...clientRects.map(rect => rect.left));
|
|
6855
|
-
const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
|
|
6856
|
-
const top = measureRects[0].top;
|
|
6857
|
-
const bottom = measureRects[measureRects.length - 1].bottom;
|
|
6858
|
-
const left = minLeft;
|
|
6859
|
-
const right = maxRight;
|
|
6860
|
-
const width = right - left;
|
|
6861
|
-
const height = bottom - top;
|
|
6862
|
-
return {
|
|
6863
|
-
top,
|
|
6864
|
-
bottom,
|
|
6865
|
-
left,
|
|
6866
|
-
right,
|
|
6867
|
-
width,
|
|
6868
|
-
height,
|
|
6869
|
-
x: left,
|
|
6870
|
-
y: top
|
|
6871
|
-
};
|
|
6872
|
-
}
|
|
6873
|
-
return fallback;
|
|
6874
|
-
}
|
|
6875
|
-
const resetRects = await platform.getElementRects({
|
|
6876
|
-
reference: {
|
|
6877
|
-
getBoundingClientRect
|
|
6878
|
-
},
|
|
6879
|
-
floating: elements.floating,
|
|
6880
|
-
strategy
|
|
6881
|
-
});
|
|
6882
|
-
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) {
|
|
6883
|
-
return {
|
|
6884
|
-
reset: {
|
|
6885
|
-
rects: resetRects
|
|
6886
|
-
}
|
|
6887
|
-
};
|
|
6888
|
-
}
|
|
6889
|
-
return {};
|
|
6890
|
-
}
|
|
6891
|
-
};
|
|
6892
|
-
};
|
|
6893
|
-
|
|
6894
6640
|
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
6895
6641
|
// Derivable.
|
|
6896
6642
|
|
|
@@ -7121,90 +6867,6 @@ const limitShift$1 = function (options) {
|
|
|
7121
6867
|
};
|
|
7122
6868
|
};
|
|
7123
6869
|
|
|
7124
|
-
/**
|
|
7125
|
-
* Provides data that allows you to change the size of the floating element —
|
|
7126
|
-
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
7127
|
-
* width of the reference element.
|
|
7128
|
-
* @see https://floating-ui.com/docs/size
|
|
7129
|
-
*/
|
|
7130
|
-
const size = function (options) {
|
|
7131
|
-
if (options === void 0) {
|
|
7132
|
-
options = {};
|
|
7133
|
-
}
|
|
7134
|
-
return {
|
|
7135
|
-
name: 'size',
|
|
7136
|
-
options,
|
|
7137
|
-
async fn(state) {
|
|
7138
|
-
var _state$middlewareData, _state$middlewareData2;
|
|
7139
|
-
const {
|
|
7140
|
-
placement,
|
|
7141
|
-
rects,
|
|
7142
|
-
platform,
|
|
7143
|
-
elements
|
|
7144
|
-
} = state;
|
|
7145
|
-
const {
|
|
7146
|
-
apply = () => {},
|
|
7147
|
-
...detectOverflowOptions
|
|
7148
|
-
} = evaluate(options, state);
|
|
7149
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
7150
|
-
const side = getSide(placement);
|
|
7151
|
-
const alignment = getAlignment(placement);
|
|
7152
|
-
const isYAxis = getSideAxis(placement) === 'y';
|
|
7153
|
-
const {
|
|
7154
|
-
width,
|
|
7155
|
-
height
|
|
7156
|
-
} = rects.floating;
|
|
7157
|
-
let heightSide;
|
|
7158
|
-
let widthSide;
|
|
7159
|
-
if (side === 'top' || side === 'bottom') {
|
|
7160
|
-
heightSide = side;
|
|
7161
|
-
widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
|
|
7162
|
-
} else {
|
|
7163
|
-
widthSide = side;
|
|
7164
|
-
heightSide = alignment === 'end' ? 'top' : 'bottom';
|
|
7165
|
-
}
|
|
7166
|
-
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
7167
|
-
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
7168
|
-
const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
|
|
7169
|
-
const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
|
|
7170
|
-
const noShift = !state.middlewareData.shift;
|
|
7171
|
-
let availableHeight = overflowAvailableHeight;
|
|
7172
|
-
let availableWidth = overflowAvailableWidth;
|
|
7173
|
-
if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
|
|
7174
|
-
availableWidth = maximumClippingWidth;
|
|
7175
|
-
}
|
|
7176
|
-
if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
|
|
7177
|
-
availableHeight = maximumClippingHeight;
|
|
7178
|
-
}
|
|
7179
|
-
if (noShift && !alignment) {
|
|
7180
|
-
const xMin = max(overflow.left, 0);
|
|
7181
|
-
const xMax = max(overflow.right, 0);
|
|
7182
|
-
const yMin = max(overflow.top, 0);
|
|
7183
|
-
const yMax = max(overflow.bottom, 0);
|
|
7184
|
-
if (isYAxis) {
|
|
7185
|
-
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
|
|
7186
|
-
} else {
|
|
7187
|
-
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
|
|
7188
|
-
}
|
|
7189
|
-
}
|
|
7190
|
-
await apply({
|
|
7191
|
-
...state,
|
|
7192
|
-
availableWidth,
|
|
7193
|
-
availableHeight
|
|
7194
|
-
});
|
|
7195
|
-
const nextDimensions = await platform.getDimensions(elements.floating);
|
|
7196
|
-
if (width !== nextDimensions.width || height !== nextDimensions.height) {
|
|
7197
|
-
return {
|
|
7198
|
-
reset: {
|
|
7199
|
-
rects: true
|
|
7200
|
-
}
|
|
7201
|
-
};
|
|
7202
|
-
}
|
|
7203
|
-
return {};
|
|
7204
|
-
}
|
|
7205
|
-
};
|
|
7206
|
-
};
|
|
7207
|
-
|
|
7208
6870
|
function hasWindow() {
|
|
7209
6871
|
return typeof window !== 'undefined';
|
|
7210
6872
|
}
|
|
@@ -8014,14 +7676,6 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
8014
7676
|
*/
|
|
8015
7677
|
const offset = offset$1;
|
|
8016
7678
|
|
|
8017
|
-
/**
|
|
8018
|
-
* Optimizes the visibility of the floating element by choosing the placement
|
|
8019
|
-
* that has the most space available automatically, without needing to specify a
|
|
8020
|
-
* preferred placement. Alternative to `flip`.
|
|
8021
|
-
* @see https://floating-ui.com/docs/autoPlacement
|
|
8022
|
-
*/
|
|
8023
|
-
autoPlacement;
|
|
8024
|
-
|
|
8025
7679
|
/**
|
|
8026
7680
|
* Optimizes the visibility of the floating element by shifting it in order to
|
|
8027
7681
|
* keep it in view when it will overflow the clipping boundary.
|
|
@@ -8037,21 +7691,6 @@ const shift = shift$1;
|
|
|
8037
7691
|
*/
|
|
8038
7692
|
const flip = flip$1;
|
|
8039
7693
|
|
|
8040
|
-
/**
|
|
8041
|
-
* Provides data that allows you to change the size of the floating element —
|
|
8042
|
-
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
8043
|
-
* width of the reference element.
|
|
8044
|
-
* @see https://floating-ui.com/docs/size
|
|
8045
|
-
*/
|
|
8046
|
-
size;
|
|
8047
|
-
|
|
8048
|
-
/**
|
|
8049
|
-
* Provides data to hide the floating element in applicable situations, such as
|
|
8050
|
-
* when it is not in the same clipping context as the reference element.
|
|
8051
|
-
* @see https://floating-ui.com/docs/hide
|
|
8052
|
-
*/
|
|
8053
|
-
hide;
|
|
8054
|
-
|
|
8055
7694
|
/**
|
|
8056
7695
|
* Provides data to position an inner element of the floating element so that it
|
|
8057
7696
|
* appears centered to the reference element.
|
|
@@ -8059,13 +7698,6 @@ hide;
|
|
|
8059
7698
|
*/
|
|
8060
7699
|
const arrow = arrow$1;
|
|
8061
7700
|
|
|
8062
|
-
/**
|
|
8063
|
-
* Provides improved positioning for inline reference elements that can span
|
|
8064
|
-
* over multiple lines, such as hyperlinks or range selections.
|
|
8065
|
-
* @see https://floating-ui.com/docs/inline
|
|
8066
|
-
*/
|
|
8067
|
-
inline;
|
|
8068
|
-
|
|
8069
7701
|
/**
|
|
8070
7702
|
* Built-in `limiter` that will stop `shift()` at a certain point.
|
|
8071
7703
|
*/
|
|
@@ -8115,28 +7747,71 @@ const placements = [
|
|
|
8115
7747
|
'left-start',
|
|
8116
7748
|
'left-end',
|
|
8117
7749
|
];
|
|
7750
|
+
// Alignments constants
|
|
7751
|
+
const alignments = ['start', null, 'end'];
|
|
8118
7752
|
/**
|
|
8119
7753
|
* FloatingUI Placement type guard
|
|
8120
7754
|
* @param placement - value to check
|
|
8121
7755
|
* @returns truthy if placement is valid
|
|
8122
7756
|
*/
|
|
8123
7757
|
const isFloatingUIPlacement = (placement) => placements.filter(p => !p.includes('auto')).includes(placement);
|
|
8124
|
-
|
|
8125
|
-
|
|
7758
|
+
/**
|
|
7759
|
+
* Round value by device pixel ratio
|
|
7760
|
+
* @param value - value to round
|
|
7761
|
+
* @returns rounded value
|
|
7762
|
+
*/
|
|
7763
|
+
const roundByDPR = (value) => {
|
|
7764
|
+
const dpr = window.devicePixelRatio || 1;
|
|
7765
|
+
return Math.round(value * dpr) / dpr;
|
|
7766
|
+
};
|
|
7767
|
+
/**
|
|
7768
|
+
* Get translation for tooltip
|
|
7769
|
+
* @param x - x-axis value
|
|
7770
|
+
* @param y - y-axis value
|
|
7771
|
+
* @returns translation string
|
|
7772
|
+
*/
|
|
7773
|
+
const getTransformation = (x, y) => {
|
|
7774
|
+
const tooltipX = isNaN(x) ? 0 : roundByDPR(x);
|
|
7775
|
+
const tooltipY = isNaN(y) ? 0 : roundByDPR(y);
|
|
7776
|
+
// No translation needed
|
|
7777
|
+
if (tooltipX === 0 && tooltipY === 0)
|
|
7778
|
+
return '';
|
|
7779
|
+
// Only one axis needs translation
|
|
7780
|
+
if (tooltipX === 0)
|
|
7781
|
+
return `translateY(${tooltipY}px)`;
|
|
7782
|
+
if (tooltipY === 0)
|
|
7783
|
+
return `translateX(${tooltipX}px)`;
|
|
7784
|
+
// Both axes need translation
|
|
7785
|
+
return `translate(${tooltipX}px,${tooltipY}px)`;
|
|
7786
|
+
};
|
|
7787
|
+
// https://floating-ui.com/docs/arrow
|
|
7788
|
+
// Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.
|
|
7789
|
+
// Due to this, either x or y will be undefined, depending on the side of placement.
|
|
7790
|
+
// The above code uses `isNaN` to check for null and undefined simultaneously.
|
|
7791
|
+
// Don't remove `isNaN`, because either value can be falsy (0), causing a bug!
|
|
7792
|
+
const numberToPx = (number) => {
|
|
7793
|
+
if (number !== null && !isNaN(number)) {
|
|
7794
|
+
if (number === 0)
|
|
7795
|
+
return '0';
|
|
7796
|
+
else
|
|
7797
|
+
return `${number}px`;
|
|
7798
|
+
}
|
|
7799
|
+
else
|
|
7800
|
+
return '';
|
|
7801
|
+
};
|
|
8126
7802
|
|
|
8127
7803
|
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}";
|
|
8128
|
-
const MgPopoverStyle0 = mgPopoverCss;
|
|
8129
7804
|
|
|
8130
7805
|
const MgPopover = class {
|
|
8131
7806
|
constructor(hostRef) {
|
|
8132
7807
|
registerInstance(this, hostRef);
|
|
8133
|
-
this.displayChange = createEvent(this, "display-change"
|
|
8134
|
-
this.componentClose = createEvent(this, "component-close"
|
|
7808
|
+
this.displayChange = createEvent(this, "display-change");
|
|
7809
|
+
this.componentClose = createEvent(this, "component-close");
|
|
8135
7810
|
/**
|
|
8136
7811
|
* Sets an `id` attribute.
|
|
8137
7812
|
* Needed by the input for accessibility `aria-decribedby`.
|
|
8138
7813
|
*/
|
|
8139
|
-
this.identifier =
|
|
7814
|
+
this.identifier = Pt('mg-popover');
|
|
8140
7815
|
/**
|
|
8141
7816
|
* Popover placement
|
|
8142
7817
|
*/
|
|
@@ -8166,16 +7841,6 @@ const MgPopover = class {
|
|
|
8166
7841
|
this.display = false;
|
|
8167
7842
|
}
|
|
8168
7843
|
};
|
|
8169
|
-
/**
|
|
8170
|
-
* Update aria-expanded attribute on interactive element
|
|
8171
|
-
* @param expanded - expanded state
|
|
8172
|
-
*/
|
|
8173
|
-
this.updateAriaExpanded = (expanded) => {
|
|
8174
|
-
const interactiveElement = this.element.querySelector(':not([slot])');
|
|
8175
|
-
if (interactiveElement !== null) {
|
|
8176
|
-
interactiveElement.setAttribute('aria-expanded', String(expanded));
|
|
8177
|
-
}
|
|
8178
|
-
};
|
|
8179
7844
|
/**
|
|
8180
7845
|
* Show popover
|
|
8181
7846
|
*/
|
|
@@ -8183,12 +7848,13 @@ const MgPopover = class {
|
|
|
8183
7848
|
// Make the popover visible
|
|
8184
7849
|
this.mgPopover.dataset.show = '';
|
|
8185
7850
|
// Update aria-expanded
|
|
8186
|
-
this.
|
|
7851
|
+
this.interactiveElement.setAttribute('aria-expanded', 'true');
|
|
8187
7852
|
// hide when click outside
|
|
8188
7853
|
// setTimeout is used to prevent event to trigger after creation
|
|
8189
7854
|
setTimeout(() => {
|
|
8190
7855
|
this.manageClickOutsideListeners('addEventListener');
|
|
8191
7856
|
});
|
|
7857
|
+
this.updatePopover();
|
|
8192
7858
|
};
|
|
8193
7859
|
/**
|
|
8194
7860
|
* Hide popover
|
|
@@ -8197,7 +7863,7 @@ const MgPopover = class {
|
|
|
8197
7863
|
// Hide the popover
|
|
8198
7864
|
this.mgPopover.removeAttribute('data-show');
|
|
8199
7865
|
// Update aria-expanded
|
|
8200
|
-
this.
|
|
7866
|
+
this.interactiveElement.setAttribute('aria-expanded', 'false');
|
|
8201
7867
|
// Remove event listener
|
|
8202
7868
|
this.manageClickOutsideListeners('removeEventListener');
|
|
8203
7869
|
};
|
|
@@ -8276,63 +7942,50 @@ const MgPopover = class {
|
|
|
8276
7942
|
return Array.from(new Set([...currentSidePlacements, ...sides.filter(otherSide => otherSide !== side)])).filter(isFloatingUIPlacement);
|
|
8277
7943
|
};
|
|
8278
7944
|
/**
|
|
8279
|
-
*
|
|
8280
|
-
* @
|
|
8281
|
-
*/
|
|
8282
|
-
this.
|
|
8283
|
-
|
|
8284
|
-
|
|
8285
|
-
|
|
8286
|
-
|
|
8287
|
-
|
|
8288
|
-
|
|
8289
|
-
|
|
8290
|
-
|
|
8291
|
-
|
|
8292
|
-
|
|
8293
|
-
|
|
8294
|
-
|
|
8295
|
-
|
|
8296
|
-
|
|
8297
|
-
|
|
8298
|
-
],
|
|
8299
|
-
}).then(({ x, y, placement, middlewareData }) => {
|
|
8300
|
-
Object.assign(this.mgPopover.style, {
|
|
8301
|
-
position: 'fixed',
|
|
8302
|
-
top: '0',
|
|
8303
|
-
left: '0',
|
|
8304
|
-
transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`,
|
|
8305
|
-
});
|
|
8306
|
-
// Update arrow style
|
|
8307
|
-
const staticSide = {
|
|
8308
|
-
top: 'bottom',
|
|
8309
|
-
right: 'left',
|
|
8310
|
-
bottom: 'top',
|
|
8311
|
-
left: 'right',
|
|
8312
|
-
}[placement.split('-')[0]];
|
|
8313
|
-
const arrowElement = this.mgPopover.querySelector('[data-floating-arrow]');
|
|
8314
|
-
const { x: arrowX, y: arrowY } = middlewareData.arrow;
|
|
8315
|
-
// https://floating-ui.com/docs/arrow
|
|
8316
|
-
// Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.
|
|
8317
|
-
// Due to this, either x or y will be undefined, depending on the side of placement.
|
|
8318
|
-
// The above code uses `isNaN` to check for null and undefined simultaneously.
|
|
8319
|
-
// Don't remove `isNaN`, because either value can be falsy (0), causing a bug!
|
|
8320
|
-
const numberToPx = (number) => (!isNaN(number) ? `${number}px` : '');
|
|
8321
|
-
if (arrowElement !== null)
|
|
8322
|
-
Object.assign(arrowElement.style, {
|
|
8323
|
-
position: 'absolute',
|
|
8324
|
-
left: numberToPx(arrowX),
|
|
8325
|
-
top: numberToPx(arrowY),
|
|
8326
|
-
[staticSide]: '1px',
|
|
8327
|
-
});
|
|
8328
|
-
this.mgPopover.setAttribute('data-placement', placement);
|
|
8329
|
-
});
|
|
7945
|
+
* Update popover position
|
|
7946
|
+
* @returns autoUpdate function
|
|
7947
|
+
*/
|
|
7948
|
+
this.updatePopover = () => autoUpdate(this.interactiveElement, this.mgPopover, async () => {
|
|
7949
|
+
const { x, y, placement, middlewareData } = await computePosition(this.interactiveElement, this.mgPopover, {
|
|
7950
|
+
placement: this.placement,
|
|
7951
|
+
strategy: 'fixed',
|
|
7952
|
+
middleware: [
|
|
7953
|
+
offset(0),
|
|
7954
|
+
flip({
|
|
7955
|
+
fallbackPlacements: this.getClosestPlacements(this.placement),
|
|
7956
|
+
}),
|
|
7957
|
+
shift({
|
|
7958
|
+
limiter: limitShift(),
|
|
7959
|
+
}),
|
|
7960
|
+
arrow({
|
|
7961
|
+
element: this.arrowElement,
|
|
7962
|
+
}),
|
|
7963
|
+
],
|
|
8330
7964
|
});
|
|
8331
|
-
|
|
7965
|
+
Object.assign(this.mgPopover.style, {
|
|
7966
|
+
transform: getTransformation(x, y),
|
|
7967
|
+
});
|
|
7968
|
+
// Arrow positioning
|
|
7969
|
+
if (this.arrowElement !== null) {
|
|
7970
|
+
const { x: arrowX, y: arrowY } = middlewareData.arrow;
|
|
7971
|
+
const staticSide = {
|
|
7972
|
+
top: 'bottom',
|
|
7973
|
+
right: 'left',
|
|
7974
|
+
bottom: 'top',
|
|
7975
|
+
left: 'right',
|
|
7976
|
+
}[placement.split('-')[0]];
|
|
7977
|
+
Object.assign(this.arrowElement.style, {
|
|
7978
|
+
left: numberToPx(arrowX),
|
|
7979
|
+
top: numberToPx(arrowY),
|
|
7980
|
+
[staticSide]: '1px',
|
|
7981
|
+
});
|
|
7982
|
+
this.mgPopover.setAttribute('data-placement', placement);
|
|
7983
|
+
}
|
|
7984
|
+
});
|
|
8332
7985
|
}
|
|
8333
7986
|
validateIdentifier(newValue) {
|
|
8334
|
-
if (!
|
|
8335
|
-
throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${
|
|
7987
|
+
if (!Ut(newValue)) {
|
|
7988
|
+
throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
|
|
8336
7989
|
}
|
|
8337
7990
|
// use renderPopoverContent to update popover-content id
|
|
8338
7991
|
this.renderPopoverContent();
|
|
@@ -8366,14 +8019,14 @@ const MgPopover = class {
|
|
|
8366
8019
|
* update popper position after props change on component did update hook to benefit from render ended
|
|
8367
8020
|
*/
|
|
8368
8021
|
componentDidUpdate() {
|
|
8369
|
-
this.
|
|
8022
|
+
this.updatePopover();
|
|
8370
8023
|
}
|
|
8371
8024
|
/**
|
|
8372
8025
|
* Check if component props are well configured on init
|
|
8373
8026
|
*/
|
|
8374
8027
|
componentWillLoad() {
|
|
8375
8028
|
// Get windows to attach events
|
|
8376
|
-
this.windows =
|
|
8029
|
+
this.windows = Bt(window);
|
|
8377
8030
|
// render mg-popover-content slot
|
|
8378
8031
|
this.renderPopoverContent();
|
|
8379
8032
|
this.validateCloseButton(this.closeButton);
|
|
@@ -8387,26 +8040,21 @@ const MgPopover = class {
|
|
|
8387
8040
|
componentDidLoad() {
|
|
8388
8041
|
// Get popover content
|
|
8389
8042
|
this.mgPopover = this.element.querySelector(`#${this.identifier}`);
|
|
8043
|
+
// Get arrow element
|
|
8044
|
+
this.arrowElement = this.mgPopover.querySelector('[data-floating-arrow]');
|
|
8390
8045
|
// Get interactive element (first element without slot attribute)
|
|
8391
|
-
|
|
8046
|
+
this.interactiveElement = this.element.querySelector(':not([slot])');
|
|
8392
8047
|
// Add aria attributes
|
|
8393
|
-
interactiveElement.setAttribute('aria-controls', this.identifier);
|
|
8394
|
-
interactiveElement.setAttribute('aria-expanded', `${this.display}`);
|
|
8395
|
-
// Initial styles configuration
|
|
8396
|
-
Object.assign(this.mgPopover.style, {
|
|
8397
|
-
position: 'fixed',
|
|
8398
|
-
});
|
|
8399
|
-
// Create Floating UI instance
|
|
8400
|
-
this.setFloatingUI(interactiveElement);
|
|
8048
|
+
this.interactiveElement.setAttribute('aria-controls', this.identifier);
|
|
8049
|
+
this.interactiveElement.setAttribute('aria-expanded', `${this.display}`);
|
|
8401
8050
|
// Add resize observer
|
|
8402
|
-
[interactiveElement, this.mgPopoverContent].forEach(element => {
|
|
8051
|
+
[this.interactiveElement, this.mgPopoverContent].forEach(element => {
|
|
8403
8052
|
new ResizeObserver(() => {
|
|
8404
|
-
this.
|
|
8405
|
-
this.setFloatingUI(interactiveElement);
|
|
8053
|
+
this.updatePopover();
|
|
8406
8054
|
}).observe(element);
|
|
8407
8055
|
});
|
|
8408
8056
|
// Add events to toggle display
|
|
8409
|
-
interactiveElement.addEventListener('click', () => {
|
|
8057
|
+
this.interactiveElement.addEventListener('click', () => {
|
|
8410
8058
|
if (!this.disabled)
|
|
8411
8059
|
this.display = !this.display;
|
|
8412
8060
|
});
|
|
@@ -8421,7 +8069,7 @@ const MgPopover = class {
|
|
|
8421
8069
|
if (!this.disabled && e.code === 'Escape') {
|
|
8422
8070
|
this.display = false;
|
|
8423
8071
|
this.componentClose.emit();
|
|
8424
|
-
interactiveElement.focus();
|
|
8072
|
+
this.interactiveElement.focus();
|
|
8425
8073
|
}
|
|
8426
8074
|
});
|
|
8427
8075
|
this.handleDisplay(this.display);
|
|
@@ -8430,15 +8078,16 @@ const MgPopover = class {
|
|
|
8430
8078
|
* Cleanup when component is disconnected
|
|
8431
8079
|
*/
|
|
8432
8080
|
disconnectedCallback() {
|
|
8081
|
+
var _a;
|
|
8433
8082
|
// Cleanup Floating UI instance
|
|
8434
|
-
this.
|
|
8083
|
+
(_a = this.updatePopover) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
8435
8084
|
}
|
|
8436
8085
|
/**
|
|
8437
8086
|
* Render
|
|
8438
8087
|
* @returns HTML Element
|
|
8439
8088
|
*/
|
|
8440
8089
|
render() {
|
|
8441
|
-
return (h(Host, { key: '
|
|
8090
|
+
return (h(Host, { key: '26244db5e6a35b731b5220c06b77ad1f14378245' }, h("slot", { key: '92ca05ac9637cf9634d86b177393fd6d0e6c6796' }), h("slot", { key: 'bdc8f8a8b4f2c891e473cdac5a305c3f1ab615b0', name: "content" })));
|
|
8442
8091
|
}
|
|
8443
8092
|
get element() { return getElement(this); }
|
|
8444
8093
|
static get watchers() { return {
|
|
@@ -8449,15 +8098,14 @@ const MgPopover = class {
|
|
|
8449
8098
|
"display": ["handleDisplay"]
|
|
8450
8099
|
}; }
|
|
8451
8100
|
};
|
|
8452
|
-
MgPopover.style =
|
|
8101
|
+
MgPopover.style = mgPopoverCss;
|
|
8453
8102
|
|
|
8454
|
-
const mgPopoverContentCss = ":host{position:
|
|
8455
|
-
const MgPopoverContentStyle0 = mgPopoverContentCss;
|
|
8103
|
+
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)}";
|
|
8456
8104
|
|
|
8457
8105
|
const MgPopoverContent = class {
|
|
8458
8106
|
constructor(hostRef) {
|
|
8459
8107
|
registerInstance(this, hostRef);
|
|
8460
|
-
this.hideContent = createEvent(this, "hide-content"
|
|
8108
|
+
this.hideContent = createEvent(this, "hide-content");
|
|
8461
8109
|
/**
|
|
8462
8110
|
* Define if popover has a cross button
|
|
8463
8111
|
*/
|
|
@@ -8465,7 +8113,7 @@ const MgPopoverContent = class {
|
|
|
8465
8113
|
/**
|
|
8466
8114
|
* Component classes
|
|
8467
8115
|
*/
|
|
8468
|
-
this.classCollection = new
|
|
8116
|
+
this.classCollection = new Zt(['mg-c-popover-content']);
|
|
8469
8117
|
/**
|
|
8470
8118
|
* Handle action for close button
|
|
8471
8119
|
*/
|
|
@@ -8489,7 +8137,7 @@ const MgPopoverContent = class {
|
|
|
8489
8137
|
componentDidLoad() {
|
|
8490
8138
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
8491
8139
|
const slottedTitleElement = this.element.querySelector('[slot="title"]');
|
|
8492
|
-
if (slottedTitleElement && !
|
|
8140
|
+
if (slottedTitleElement && !qt(slottedTitleElement, headingTags)) {
|
|
8493
8141
|
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);
|
|
8494
8142
|
}
|
|
8495
8143
|
}
|
|
@@ -8498,19 +8146,18 @@ const MgPopoverContent = class {
|
|
|
8498
8146
|
* @returns HTML Element
|
|
8499
8147
|
*/
|
|
8500
8148
|
render() {
|
|
8501
|
-
return (h(Host, { key: '
|
|
8149
|
+
return (h(Host, { key: '8d2dd7d21518de744c18f0280b7b418f3a76acca' }, h("mg-card", { key: '8beab7c9fb692c1983515709a1ee888dc7e5157a', class: this.classCollection.join() }, this.closeButton && (h("mg-button", { key: 'e636569be26b0c741e0b03e806787d91b47ded5c', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '3edc717cbe542494d892566c182883e20b1ca4cb', icon: "cross" }))), h("div", { key: 'd18525218972d92b6932984edb50844658e12970', class: "mg-c-popover-content__title" }, h("slot", { key: '2cceb41fd4ebb00b889e71cab211431e5894d04c', name: "title" })), h("slot", { key: 'a6615d9d7c85b32fb63d3d89db02fae2f8d5c1b2', name: "content" })), h("slot", { key: '0ff4bf72de19a3d56aafb64391cfc276d70e2f18', name: "arrow" })));
|
|
8502
8150
|
}
|
|
8503
8151
|
get element() { return getElement(this); }
|
|
8504
8152
|
};
|
|
8505
|
-
MgPopoverContent.style =
|
|
8153
|
+
MgPopoverContent.style = mgPopoverContentCss;
|
|
8506
8154
|
|
|
8507
8155
|
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%)}";
|
|
8508
|
-
const MgSkipLinksStyle0 = mgSkipLinksCss;
|
|
8509
8156
|
|
|
8510
8157
|
const MgSkipLinks = class {
|
|
8511
8158
|
constructor(hostRef) {
|
|
8512
8159
|
registerInstance(this, hostRef);
|
|
8513
|
-
this.goToAnchor = createEvent(this, "go-to-anchor"
|
|
8160
|
+
this.goToAnchor = createEvent(this, "go-to-anchor");
|
|
8514
8161
|
/***********
|
|
8515
8162
|
* Methods *
|
|
8516
8163
|
**********/
|
|
@@ -8524,7 +8171,7 @@ const MgSkipLinks = class {
|
|
|
8524
8171
|
};
|
|
8525
8172
|
}
|
|
8526
8173
|
validateLinks(links) {
|
|
8527
|
-
if (links === undefined || links.length === 0 || links.some(link => !
|
|
8174
|
+
if (links === undefined || links.length === 0 || links.some(link => !De(link.href) || !link.href.startsWith('#') || !De(link.label))) {
|
|
8528
8175
|
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.`);
|
|
8529
8176
|
}
|
|
8530
8177
|
}
|
|
@@ -8543,14 +8190,14 @@ const MgSkipLinks = class {
|
|
|
8543
8190
|
* @returns HTML Element
|
|
8544
8191
|
*/
|
|
8545
8192
|
render() {
|
|
8546
|
-
return (h("nav", { key: '
|
|
8193
|
+
return (h("nav", { key: '0b4e4d6b9481a88faae78602b07c4f5e851da517', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'aaa15193eb2c9e1d9ee3b2e2a7d8d0fd37836ed7', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
|
|
8547
8194
|
}
|
|
8548
8195
|
get element() { return getElement(this); }
|
|
8549
8196
|
static get watchers() { return {
|
|
8550
8197
|
"links": ["validateLinks"]
|
|
8551
8198
|
}; }
|
|
8552
8199
|
};
|
|
8553
|
-
MgSkipLinks.style =
|
|
8200
|
+
MgSkipLinks.style = mgSkipLinksCss;
|
|
8554
8201
|
|
|
8555
8202
|
/**
|
|
8556
8203
|
* Sizes
|
|
@@ -8566,7 +8213,6 @@ const textAlignments = ['left', 'center', 'right'];
|
|
|
8566
8213
|
const dataTypes = ['string', 'numeric', 'date'];
|
|
8567
8214
|
|
|
8568
8215
|
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%)}";
|
|
8569
|
-
const MgTableStyle0 = mgTableCss;
|
|
8570
8216
|
|
|
8571
8217
|
/**
|
|
8572
8218
|
* Check if value is a valid align object
|
|
@@ -8631,11 +8277,11 @@ const MgTable = class {
|
|
|
8631
8277
|
/**
|
|
8632
8278
|
* Class collection
|
|
8633
8279
|
*/
|
|
8634
|
-
this.classCollection = new
|
|
8280
|
+
this.classCollection = new Zt([this.componentClass]);
|
|
8635
8281
|
}
|
|
8636
8282
|
watchSize(newValue, oldValue) {
|
|
8637
8283
|
if (!sizes$1.includes(newValue)) {
|
|
8638
|
-
throw new Error(`<mg-table> prop "size" must be one of: ${sizes$1.join(', ')}. Passed value: ${
|
|
8284
|
+
throw new Error(`<mg-table> prop "size" must be one of: ${sizes$1.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
8639
8285
|
}
|
|
8640
8286
|
else {
|
|
8641
8287
|
if (oldValue !== undefined) {
|
|
@@ -8654,7 +8300,7 @@ const MgTable = class {
|
|
|
8654
8300
|
}
|
|
8655
8301
|
watchColumns(newValue) {
|
|
8656
8302
|
if (newValue !== undefined && !isValidColumnsObject(newValue)) {
|
|
8657
|
-
throw new Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${
|
|
8303
|
+
throw new Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${Gt(newValue)}.`);
|
|
8658
8304
|
}
|
|
8659
8305
|
}
|
|
8660
8306
|
/**
|
|
@@ -8783,8 +8429,8 @@ const MgTable = class {
|
|
|
8783
8429
|
// Ensure caption is not visible (otherwhise the table does not have rounded corners)
|
|
8784
8430
|
captionTable.className = 'mg-u-visually-hidden';
|
|
8785
8431
|
// Link caption to div
|
|
8786
|
-
if (!
|
|
8787
|
-
captionTable.setAttribute('id',
|
|
8432
|
+
if (!De(captionTable.id)) {
|
|
8433
|
+
captionTable.setAttribute('id', Pt(`${this.componentClass}-caption`));
|
|
8788
8434
|
}
|
|
8789
8435
|
divWrapper.setAttribute('aria-labelledby', captionTable.id);
|
|
8790
8436
|
// Add sortable caption if neeeded
|
|
@@ -8829,7 +8475,7 @@ const MgTable = class {
|
|
|
8829
8475
|
"columns": ["watchColumns"]
|
|
8830
8476
|
}; }
|
|
8831
8477
|
};
|
|
8832
|
-
MgTable.style =
|
|
8478
|
+
MgTable.style = mgTableCss;
|
|
8833
8479
|
|
|
8834
8480
|
/**
|
|
8835
8481
|
* Available tabs items status
|
|
@@ -8846,7 +8492,6 @@ const Status = {
|
|
|
8846
8492
|
const sizes = ['medium', 'large'];
|
|
8847
8493
|
|
|
8848
8494
|
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}";
|
|
8849
|
-
const MgTabsStyle0 = mgTabsCss;
|
|
8850
8495
|
|
|
8851
8496
|
/**
|
|
8852
8497
|
* type TabItem validation function
|
|
@@ -8857,7 +8502,7 @@ const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'stri
|
|
|
8857
8502
|
const MgTabs = class {
|
|
8858
8503
|
constructor(hostRef) {
|
|
8859
8504
|
registerInstance(this, hostRef);
|
|
8860
|
-
this.activeTabChange = createEvent(this, "active-tab-change"
|
|
8505
|
+
this.activeTabChange = createEvent(this, "active-tab-change");
|
|
8861
8506
|
/************
|
|
8862
8507
|
* Internal *
|
|
8863
8508
|
************/
|
|
@@ -8869,7 +8514,7 @@ const MgTabs = class {
|
|
|
8869
8514
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
8870
8515
|
* If not set, it will be created.
|
|
8871
8516
|
*/
|
|
8872
|
-
this.identifier =
|
|
8517
|
+
this.identifier = Pt('mg-tabs');
|
|
8873
8518
|
/**
|
|
8874
8519
|
* Define tabs size
|
|
8875
8520
|
*/
|
|
@@ -8881,7 +8526,7 @@ const MgTabs = class {
|
|
|
8881
8526
|
/**
|
|
8882
8527
|
* Component classes
|
|
8883
8528
|
*/
|
|
8884
|
-
this.classCollection = new
|
|
8529
|
+
this.classCollection = new Zt(['mg-c-tabs']);
|
|
8885
8530
|
/**
|
|
8886
8531
|
* Validate that new tab status can be `Status.ACTIVE`
|
|
8887
8532
|
* @param tab - tab item
|
|
@@ -8934,18 +8579,18 @@ const MgTabs = class {
|
|
|
8934
8579
|
*/
|
|
8935
8580
|
this.handleKeydown = (event) => {
|
|
8936
8581
|
const parent = event.target.parentElement;
|
|
8937
|
-
if ([
|
|
8582
|
+
if ([Keys.ARROWLEFT, Keys.ARROWRIGHT].includes(event.key)) {
|
|
8938
8583
|
this.tabFocus = Number(event.target.dataset.index);
|
|
8939
8584
|
parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '-1');
|
|
8940
8585
|
// Move right
|
|
8941
|
-
if (event.key ===
|
|
8586
|
+
if (event.key === Keys.ARROWRIGHT) {
|
|
8942
8587
|
this.tabFocus++;
|
|
8943
8588
|
// If we're at the end, go to the start
|
|
8944
8589
|
if (this.tabFocus > this.tabs.length)
|
|
8945
8590
|
this.tabFocus = this.startIndex;
|
|
8946
8591
|
// Move left
|
|
8947
8592
|
}
|
|
8948
|
-
else if (event.key ===
|
|
8593
|
+
else if (event.key === Keys.ARROWLEFT) {
|
|
8949
8594
|
this.tabFocus--;
|
|
8950
8595
|
// If we're at the start, move to the end
|
|
8951
8596
|
if (this.tabFocus < this.startIndex)
|
|
@@ -8962,7 +8607,7 @@ const MgTabs = class {
|
|
|
8962
8607
|
parentButtonElement.focus();
|
|
8963
8608
|
}
|
|
8964
8609
|
}
|
|
8965
|
-
else if (event.key ===
|
|
8610
|
+
else if (event.key === Keys.TAB) {
|
|
8966
8611
|
this.resetFocus();
|
|
8967
8612
|
}
|
|
8968
8613
|
};
|
|
@@ -8979,7 +8624,7 @@ const MgTabs = class {
|
|
|
8979
8624
|
*/
|
|
8980
8625
|
this.resetFocus = () => {
|
|
8981
8626
|
// update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
|
|
8982
|
-
|
|
8627
|
+
Xt(() => {
|
|
8983
8628
|
this.tabFocus = undefined;
|
|
8984
8629
|
Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
|
|
8985
8630
|
tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
|
|
@@ -8996,30 +8641,30 @@ const MgTabs = class {
|
|
|
8996
8641
|
};
|
|
8997
8642
|
}
|
|
8998
8643
|
watchIdentifier(newValue) {
|
|
8999
|
-
if (!
|
|
9000
|
-
console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${
|
|
8644
|
+
if (!Ut(newValue)) {
|
|
8645
|
+
console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
|
|
9001
8646
|
}
|
|
9002
8647
|
}
|
|
9003
8648
|
validateLabel(newValue) {
|
|
9004
|
-
if (!
|
|
9005
|
-
throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${
|
|
8649
|
+
if (!De(newValue)) {
|
|
8650
|
+
throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${Gt(newValue)}.`);
|
|
9006
8651
|
}
|
|
9007
8652
|
}
|
|
9008
8653
|
validateSize(newValue) {
|
|
9009
8654
|
if (!sizes.includes(newValue)) {
|
|
9010
|
-
throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${
|
|
8655
|
+
throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
9011
8656
|
}
|
|
9012
8657
|
this.classCollection.add(`mg-c-tabs--size-${this.size}`);
|
|
9013
8658
|
}
|
|
9014
8659
|
validateItems(newValue) {
|
|
9015
8660
|
// String array
|
|
9016
|
-
if (
|
|
8661
|
+
if (Dt(newValue))
|
|
9017
8662
|
this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
|
|
9018
8663
|
// Object array
|
|
9019
8664
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
9020
8665
|
this.tabs = newValue;
|
|
9021
8666
|
else
|
|
9022
|
-
throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${
|
|
8667
|
+
throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${Gt(newValue)}.`);
|
|
9023
8668
|
}
|
|
9024
8669
|
validateActiveTab(newValue) {
|
|
9025
8670
|
// when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
|
|
@@ -9044,7 +8689,7 @@ const MgTabs = class {
|
|
|
9044
8689
|
this.activeTabChange.emit(newValue);
|
|
9045
8690
|
}
|
|
9046
8691
|
else {
|
|
9047
|
-
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: ${
|
|
8692
|
+
throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${Gt(newValue)}.`);
|
|
9048
8693
|
}
|
|
9049
8694
|
}
|
|
9050
8695
|
/*************
|
|
@@ -9079,7 +8724,7 @@ const MgTabs = class {
|
|
|
9079
8724
|
* @returns HTML Element
|
|
9080
8725
|
*/
|
|
9081
8726
|
render() {
|
|
9082
|
-
return (h("div", { key: '
|
|
8727
|
+
return (h("div", { key: '558c5ba517bef98ba711dd8992f901768d6770de', class: this.classCollection.join() }, h("header", { key: '0d36d49d51bbbb78bbf68c05e47271349fc58b96', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
|
|
9083
8728
|
[`${this.buttonTabBaseClass}`]: true,
|
|
9084
8729
|
[`${this.buttonTabBaseClass}--horizontal`]: true,
|
|
9085
8730
|
[`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
|
|
@@ -9096,7 +8741,7 @@ const MgTabs = class {
|
|
|
9096
8741
|
"activeTab": ["validateActiveTab"]
|
|
9097
8742
|
}; }
|
|
9098
8743
|
};
|
|
9099
|
-
MgTabs.style =
|
|
8744
|
+
MgTabs.style = mgTabsCss;
|
|
9100
8745
|
|
|
9101
8746
|
/**
|
|
9102
8747
|
* List of all possibles variants
|
|
@@ -9104,7 +8749,6 @@ MgTabs.style = MgTabsStyle0;
|
|
|
9104
8749
|
const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
|
|
9105
8750
|
|
|
9106
8751
|
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}";
|
|
9107
|
-
const MgTagStyle0 = mgTagCss;
|
|
9108
8752
|
|
|
9109
8753
|
const MgTag = class {
|
|
9110
8754
|
constructor(hostRef) {
|
|
@@ -9118,15 +8762,23 @@ const MgTag = class {
|
|
|
9118
8762
|
/**
|
|
9119
8763
|
* Define tag variant
|
|
9120
8764
|
*/
|
|
9121
|
-
this.variant =
|
|
8765
|
+
this.variant = 'primary';
|
|
8766
|
+
/**
|
|
8767
|
+
* Define if tag is using outline style
|
|
8768
|
+
*/
|
|
8769
|
+
this.outline = false;
|
|
8770
|
+
/**
|
|
8771
|
+
* Define if tag is using soft style
|
|
8772
|
+
*/
|
|
8773
|
+
this.soft = false;
|
|
9122
8774
|
/**
|
|
9123
8775
|
* Component classes
|
|
9124
8776
|
*/
|
|
9125
|
-
this.classCollection = new
|
|
8777
|
+
this.classCollection = new Zt(['mg-c-tag']);
|
|
9126
8778
|
}
|
|
9127
8779
|
validateVariant(newValue, oldValue) {
|
|
9128
8780
|
if (!variants.includes(newValue)) {
|
|
9129
|
-
throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${
|
|
8781
|
+
throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${Gt(newValue)}.`);
|
|
9130
8782
|
}
|
|
9131
8783
|
else {
|
|
9132
8784
|
if (oldValue !== undefined) {
|
|
@@ -9159,7 +8811,7 @@ const MgTag = class {
|
|
|
9159
8811
|
* @param textContent - html element textContent property
|
|
9160
8812
|
*/
|
|
9161
8813
|
validateTextContent(textContent) {
|
|
9162
|
-
if (!
|
|
8814
|
+
if (!De(textContent))
|
|
9163
8815
|
throw new Error('<mg-tag> slot must contain a text content.');
|
|
9164
8816
|
}
|
|
9165
8817
|
/*************
|
|
@@ -9179,7 +8831,7 @@ const MgTag = class {
|
|
|
9179
8831
|
* @returns HTML Element
|
|
9180
8832
|
*/
|
|
9181
8833
|
render() {
|
|
9182
|
-
return (h("span", { key: '
|
|
8834
|
+
return (h("span", { key: '2517dd6020afcf91017c9cfb6a1f3037c0b6a7c4', class: this.classCollection.join() }, h("slot", { key: '0f0f0f82274342a87d98125631174f40060105af' })));
|
|
9183
8835
|
}
|
|
9184
8836
|
get element() { return getElement(this); }
|
|
9185
8837
|
static get watchers() { return {
|
|
@@ -9188,7 +8840,7 @@ const MgTag = class {
|
|
|
9188
8840
|
"soft": ["validateSoft"]
|
|
9189
8841
|
}; }
|
|
9190
8842
|
};
|
|
9191
|
-
MgTag.style =
|
|
8843
|
+
MgTag.style = mgTagCss;
|
|
9192
8844
|
|
|
9193
8845
|
const Guard = {
|
|
9194
8846
|
FOCUS: 'focus',
|
|
@@ -9198,7 +8850,6 @@ const Guard = {
|
|
|
9198
8850
|
};
|
|
9199
8851
|
|
|
9200
8852
|
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}";
|
|
9201
|
-
const MgTooltipStyle0 = mgTooltipCss;
|
|
9202
8853
|
|
|
9203
8854
|
/**
|
|
9204
8855
|
* HTMLMgButtonElement type guard
|
|
@@ -9213,7 +8864,7 @@ const MgTooltip = class {
|
|
|
9213
8864
|
* Sets an `id` attribute.
|
|
9214
8865
|
* Needed by the input for accessibility `aria-decribedby`.
|
|
9215
8866
|
*/
|
|
9216
|
-
this.identifier =
|
|
8867
|
+
this.identifier = Pt('mg-tooltip');
|
|
9217
8868
|
/**
|
|
9218
8869
|
* Tooltip placement
|
|
9219
8870
|
*/
|
|
@@ -9233,12 +8884,13 @@ const MgTooltip = class {
|
|
|
9233
8884
|
// Make the tooltip visible
|
|
9234
8885
|
this.mgTooltipContent.dataset.show = '';
|
|
9235
8886
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
9236
|
-
|
|
8887
|
+
Xt(() => {
|
|
9237
8888
|
this.windows.forEach((localWindow) => {
|
|
9238
8889
|
localWindow.addEventListener('click', this.handleClickOutside, false);
|
|
9239
8890
|
localWindow.addEventListener('keydown', this.handlePressEscape, false);
|
|
9240
8891
|
});
|
|
9241
8892
|
});
|
|
8893
|
+
this.updateTooltip();
|
|
9242
8894
|
};
|
|
9243
8895
|
/**
|
|
9244
8896
|
* Hide tooltip
|
|
@@ -9276,8 +8928,9 @@ const MgTooltip = class {
|
|
|
9276
8928
|
* @param condition - additionnal condition to apply display prop newValue
|
|
9277
8929
|
*/
|
|
9278
8930
|
this.setDisplay = (newValue, condition = true) => {
|
|
9279
|
-
if (!this.disabled && condition)
|
|
8931
|
+
if (!this.disabled && condition && this.display !== newValue) {
|
|
9280
8932
|
this.display = newValue;
|
|
8933
|
+
}
|
|
9281
8934
|
};
|
|
9282
8935
|
/**
|
|
9283
8936
|
* Action for tooltip element and tooltiped element mouse listener
|
|
@@ -9335,52 +8988,43 @@ const MgTooltip = class {
|
|
|
9335
8988
|
}
|
|
9336
8989
|
};
|
|
9337
8990
|
/**
|
|
9338
|
-
*
|
|
9339
|
-
* @
|
|
8991
|
+
* Update tooltip position
|
|
8992
|
+
* @returns autoUpdate function
|
|
9340
8993
|
*/
|
|
9341
|
-
this.
|
|
9342
|
-
//
|
|
8994
|
+
this.updateTooltip = () => autoUpdate(this.tooltipedElement, this.mgTooltipContent, async () => {
|
|
8995
|
+
// Placement
|
|
8996
|
+
const { x, y, placement, middlewareData } = await computePosition(this.tooltipedElement, this.mgTooltipContent, {
|
|
8997
|
+
placement: this.placement,
|
|
8998
|
+
strategy: this.tooltipStrategy,
|
|
8999
|
+
middleware: [
|
|
9000
|
+
offset(8),
|
|
9001
|
+
flip(),
|
|
9002
|
+
shift({
|
|
9003
|
+
limiter: limitShift(),
|
|
9004
|
+
}),
|
|
9005
|
+
arrow({ element: this.arrowElement }),
|
|
9006
|
+
],
|
|
9007
|
+
});
|
|
9008
|
+
// Positioning
|
|
9343
9009
|
Object.assign(this.mgTooltipContent.style, {
|
|
9344
|
-
position:
|
|
9345
|
-
|
|
9346
|
-
left: '0',
|
|
9347
|
-
transform: 'translate(0, 0)',
|
|
9010
|
+
position: this.tooltipStrategy,
|
|
9011
|
+
transform: getTransformation(x, y),
|
|
9348
9012
|
});
|
|
9349
|
-
//
|
|
9350
|
-
|
|
9351
|
-
|
|
9352
|
-
|
|
9353
|
-
|
|
9354
|
-
|
|
9355
|
-
|
|
9356
|
-
|
|
9357
|
-
|
|
9358
|
-
|
|
9359
|
-
|
|
9360
|
-
|
|
9361
|
-
const staticSide = {
|
|
9362
|
-
top: 'bottom',
|
|
9363
|
-
right: 'left',
|
|
9364
|
-
bottom: 'top',
|
|
9365
|
-
left: 'right',
|
|
9366
|
-
}[placement.split('-')[0]];
|
|
9367
|
-
const arrowElement = this.mgTooltipContent.querySelector('[data-floating-arrow]');
|
|
9368
|
-
// https://floating-ui.com/docs/arrow
|
|
9369
|
-
// Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.
|
|
9370
|
-
// Due to this, either x or y will be undefined, depending on the side of placement.
|
|
9371
|
-
// The above code uses `isNaN` to check for null and undefined simultaneously.
|
|
9372
|
-
// Don’t remove `isNaN`, because either value can be falsy (0), causing a bug!
|
|
9373
|
-
const numberToPx = (number) => (!isNaN(number) ? `${number}px` : '');
|
|
9374
|
-
Object.assign(arrowElement.style, {
|
|
9375
|
-
left: numberToPx(arrowX),
|
|
9376
|
-
top: numberToPx(arrowY),
|
|
9377
|
-
[staticSide]: '-4px',
|
|
9378
|
-
position: 'absolute',
|
|
9379
|
-
});
|
|
9380
|
-
this.mgTooltipContent.setAttribute('data-placement', placement);
|
|
9381
|
-
});
|
|
9013
|
+
// Arrow positioning
|
|
9014
|
+
const { x: arrowX, y: arrowY } = middlewareData.arrow;
|
|
9015
|
+
const staticSide = {
|
|
9016
|
+
top: 'bottom',
|
|
9017
|
+
right: 'left',
|
|
9018
|
+
bottom: 'top',
|
|
9019
|
+
left: 'right',
|
|
9020
|
+
}[placement.split('-')[0]];
|
|
9021
|
+
Object.assign(this.arrowElement.style, {
|
|
9022
|
+
left: numberToPx(arrowX),
|
|
9023
|
+
top: numberToPx(arrowY),
|
|
9024
|
+
[staticSide]: '-4px',
|
|
9382
9025
|
});
|
|
9383
|
-
|
|
9026
|
+
this.mgTooltipContent.setAttribute('data-placement', placement);
|
|
9027
|
+
});
|
|
9384
9028
|
/**
|
|
9385
9029
|
* Define selected element to become tooltip selector and init listeners
|
|
9386
9030
|
* @param element - tooltiped element
|
|
@@ -9422,18 +9066,15 @@ const MgTooltip = class {
|
|
|
9422
9066
|
// set guard when one of mutations is for a disabled with disabled-on-click
|
|
9423
9067
|
if (mutationList.some((mutation) => mutation.target.disabled && mutation.target.disableOnClick)) {
|
|
9424
9068
|
this.guard = Guard.DISABLE_ON_CLICK;
|
|
9425
|
-
}
|
|
9426
|
-
// when the disabled-on-click guard is running we stop process
|
|
9427
|
-
if (this.guard === Guard.DISABLE_ON_CLICK)
|
|
9428
9069
|
return;
|
|
9070
|
+
}
|
|
9429
9071
|
// update button wrapper
|
|
9430
9072
|
this.setMgButtonWrapper(mgButton);
|
|
9431
9073
|
// Since Firefox doesn't trigger a "blur" event when the "disabled" attribute is added or removed from a button
|
|
9432
9074
|
// we have to manually unlock the guard because the "blur" handler of the tooltipedElement won't do it.
|
|
9433
9075
|
this.resetGuard();
|
|
9434
9076
|
// update Floating UI instance
|
|
9435
|
-
this.
|
|
9436
|
-
this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
|
|
9077
|
+
this.updateTooltip();
|
|
9437
9078
|
}).observe(mgButton, { attributes: true });
|
|
9438
9079
|
};
|
|
9439
9080
|
/**
|
|
@@ -9452,15 +9093,15 @@ const MgTooltip = class {
|
|
|
9452
9093
|
};
|
|
9453
9094
|
}
|
|
9454
9095
|
watchIdentifier(newValue) {
|
|
9455
|
-
if (!
|
|
9456
|
-
throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${
|
|
9096
|
+
if (!Ut(newValue)) {
|
|
9097
|
+
throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
|
|
9457
9098
|
}
|
|
9458
9099
|
// use renderTooltipContent to update tooltip-content id
|
|
9459
9100
|
this.renderTooltipContent();
|
|
9460
9101
|
}
|
|
9461
9102
|
watchMessage(newValue) {
|
|
9462
|
-
if (!
|
|
9463
|
-
throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${
|
|
9103
|
+
if (!De(newValue)) {
|
|
9104
|
+
throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${Gt(newValue)}.`);
|
|
9464
9105
|
}
|
|
9465
9106
|
if (this.mgTooltipContent !== undefined)
|
|
9466
9107
|
this.mgTooltipContent.message = newValue;
|
|
@@ -9519,7 +9160,7 @@ const MgTooltip = class {
|
|
|
9519
9160
|
*/
|
|
9520
9161
|
componentWillLoad() {
|
|
9521
9162
|
// Get windows to attach events
|
|
9522
|
-
this.windows =
|
|
9163
|
+
this.windows = Bt(window);
|
|
9523
9164
|
// Get tooltip element
|
|
9524
9165
|
this.renderTooltipContent();
|
|
9525
9166
|
//validate properties
|
|
@@ -9527,6 +9168,8 @@ const MgTooltip = class {
|
|
|
9527
9168
|
this.watchDisabled(this.disabled);
|
|
9528
9169
|
this.watchMessage(this.message);
|
|
9529
9170
|
this.watchIdentifier(this.identifier);
|
|
9171
|
+
// define if the tooltip is inside a popover
|
|
9172
|
+
this.tooltipStrategy = this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed';
|
|
9530
9173
|
}
|
|
9531
9174
|
/**
|
|
9532
9175
|
* Get slotted element
|
|
@@ -9538,8 +9181,10 @@ const MgTooltip = class {
|
|
|
9538
9181
|
// get slotted element wich is not the tooltip
|
|
9539
9182
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
9540
9183
|
// Get interactive element
|
|
9541
|
-
const interactiveElement = slotElement.matches(
|
|
9184
|
+
const interactiveElement = slotElement.matches(Ht) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(Ht);
|
|
9542
9185
|
this.setTooltipedElement(interactiveElement || slotElement);
|
|
9186
|
+
// Set arrow element
|
|
9187
|
+
this.arrowElement = this.mgTooltipContent.querySelector('[data-floating-arrow]');
|
|
9543
9188
|
// Check if slotted element is a disabled mg-button
|
|
9544
9189
|
// In this case we wrap the mg-button into a div to enable the tooltip
|
|
9545
9190
|
if (isButton(slotElement)) {
|
|
@@ -9555,8 +9200,6 @@ const MgTooltip = class {
|
|
|
9555
9200
|
}
|
|
9556
9201
|
// apply a11y aria
|
|
9557
9202
|
this.setAriaDescribedby(slotElement);
|
|
9558
|
-
// set Tooltip
|
|
9559
|
-
this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
|
|
9560
9203
|
// add document keyboard handler
|
|
9561
9204
|
document.addEventListener('keydown', this.handlePressEscape);
|
|
9562
9205
|
// check props
|
|
@@ -9566,28 +9209,26 @@ const MgTooltip = class {
|
|
|
9566
9209
|
* update popper position after props change on component did update hook to benefit from render ended
|
|
9567
9210
|
*/
|
|
9568
9211
|
componentDidUpdate() {
|
|
9569
|
-
this.
|
|
9570
|
-
this.setFloatingUI(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
|
|
9212
|
+
this.updateTooltip();
|
|
9571
9213
|
}
|
|
9572
9214
|
/**
|
|
9573
9215
|
* remove listeners
|
|
9574
9216
|
*/
|
|
9575
9217
|
disconnectedCallback() {
|
|
9576
|
-
var _a;
|
|
9218
|
+
var _a, _b;
|
|
9577
9219
|
document.removeEventListener('keydown', this.handlePressEscape);
|
|
9578
9220
|
(_a = this.windows) === null || _a === void 0 ? void 0 : _a.forEach((localWindow) => {
|
|
9579
9221
|
localWindow.removeEventListener('click', this.handleClickOutside, false);
|
|
9580
9222
|
localWindow.removeEventListener('keydown', this.handlePressEscape, false);
|
|
9581
9223
|
});
|
|
9582
|
-
|
|
9583
|
-
this.floatingUICleanup();
|
|
9224
|
+
(_b = this.updateTooltip) === null || _b === void 0 ? void 0 : _b.call(this);
|
|
9584
9225
|
}
|
|
9585
9226
|
/**
|
|
9586
9227
|
* Render
|
|
9587
9228
|
* @returns HTML Element
|
|
9588
9229
|
*/
|
|
9589
9230
|
render() {
|
|
9590
|
-
return (h(Host, { key: '
|
|
9231
|
+
return (h(Host, { key: 'dab470c730b1541ab5be487222da8ba3643501ae' }, h("slot", { key: 'a6f5d444e3521d93cf9f39ccffcd68cfde4f8101' }), h("slot", { key: 'ba4d98f953453a710379cb4ce28f1c468a34ffc4', name: "content" })));
|
|
9591
9232
|
}
|
|
9592
9233
|
get element() { return getElement(this); }
|
|
9593
9234
|
static get watchers() { return {
|
|
@@ -9598,10 +9239,9 @@ const MgTooltip = class {
|
|
|
9598
9239
|
"disabled": ["watchDisabled"]
|
|
9599
9240
|
}; }
|
|
9600
9241
|
};
|
|
9601
|
-
MgTooltip.style =
|
|
9242
|
+
MgTooltip.style = mgTooltipCss;
|
|
9602
9243
|
|
|
9603
|
-
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))}";
|
|
9604
|
-
const MgTooltipContentStyle0 = mgTooltipContentCss;
|
|
9244
|
+
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))}";
|
|
9605
9245
|
|
|
9606
9246
|
const MgTooltipContent = class {
|
|
9607
9247
|
constructor(hostRef) {
|
|
@@ -9618,8 +9258,9 @@ const MgTooltipContent = class {
|
|
|
9618
9258
|
return (h(Host, { key: '2221de3ca0ef7c9d6e46e24b19c69007fababf81', role: "tooltip" }, h("span", { key: '9e14f7f5b3f5e5060ed9f42e8d7259b17575168e', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: 'bc083567d77e8f4ffccee98b96036ba8ac494fb6', name: "arrow" })));
|
|
9619
9259
|
}
|
|
9620
9260
|
};
|
|
9621
|
-
MgTooltipContent.style =
|
|
9261
|
+
MgTooltipContent.style = mgTooltipContentCss;
|
|
9622
9262
|
|
|
9623
9263
|
export { MgActionMore as mg_action_more, MgBadge as mg_badge, MgButton as mg_button, MgCard as mg_card, MgCharacterLeft as mg_character_left, MgDetails as mg_details, MgDivider as mg_divider, MgForm as mg_form, MgIcon as mg_icon, MgIllustratedMessage as mg_illustrated_message, MgInput as mg_input, MgInputCheckbox as mg_input_checkbox, MgInputCheckboxPaginated as mg_input_checkbox_paginated, MgInputDate as mg_input_date, MgInputNumeric as mg_input_numeric, MgInputPassword as mg_input_password, MgInputRadio as mg_input_radio, MgInputSelect as mg_input_select, MgInputText as mg_input_text, MgInputTextarea as mg_input_textarea, MgInputTitle as mg_input_title, MgInputToggle as mg_input_toggle, MgItemMore as mg_item_more, MgMenu as mg_menu, MgMenuItem as mg_menu_item, MgMessage as mg_message, MgModal as mg_modal, MgPagination as mg_pagination, MgPanel as mg_panel, MgPopover as mg_popover, MgPopoverContent as mg_popover_content, MgSkipLinks as mg_skip_links, MgTable as mg_table, MgTabs as mg_tabs, MgTag as mg_tag, MgTooltip as mg_tooltip, MgTooltipContent as mg_tooltip_content };
|
|
9264
|
+
//# 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.js.map
|
|
9624
9265
|
|
|
9625
9266
|
//# sourceMappingURL=mg-action-more_37.entry.js.map
|