@mgdis/mg-components 6.7.0 → 6.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -78
- package/dist/cjs/app-globals-V2Kpy_OQ.js +8 -0
- package/dist/cjs/app-globals-V2Kpy_OQ.js.map +1 -0
- package/dist/cjs/{index-1a5a1081.js → index-CATFkm3O.js} +244 -196
- package/dist/cjs/index-CATFkm3O.js.map +1 -0
- package/dist/cjs/{index-b7923724.js → index-CTU2m-sy.js} +87 -42
- package/dist/cjs/index-CTU2m-sy.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/index.es-jXqiN1uw.js +152 -0
- package/dist/cjs/index.es-jXqiN1uw.js.map +1 -0
- package/dist/cjs/loader.cjs.js +4 -5
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/cjs/{mg-action-more_36.cjs.entry.js → mg-action-more_37.cjs.entry.js} +842 -826
- package/dist/cjs/mg-action-more_37.cjs.entry.js.map +1 -0
- package/dist/cjs/mg-alert.cjs.entry.js +21 -15
- package/dist/cjs/mg-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-alert.entry.cjs.js.map +1 -0
- package/dist/cjs/mg-components.cjs.js +8 -7
- package/dist/cjs/mg-components.cjs.js.map +1 -1
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +21524 -6868
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-input-rich-text-editor.entry.cjs.js.map +1 -0
- package/dist/cjs/{mg-input.conf-5bbcea79.js → mg-input.conf-WTsvDfpC.js} +2 -1
- package/dist/cjs/mg-input.conf-WTsvDfpC.js.map +1 -0
- package/dist/cjs/mg-loader.cjs.entry.js +12 -10
- package/dist/cjs/mg-loader.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-loader.entry.cjs.js.map +1 -0
- package/dist/cjs/mg-progress.cjs.entry.js +13 -15
- package/dist/cjs/mg-progress.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-progress.entry.cjs.js.map +1 -0
- package/dist/collection/collection-manifest.json +4 -3
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +9 -4
- package/dist/collection/components/atoms/mg-badge/mg-badge.js.map +1 -1
- package/dist/collection/components/atoms/mg-button/mg-button.js +14 -14
- package/dist/collection/components/atoms/mg-button/mg-button.js.map +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +21 -6
- package/dist/collection/components/atoms/mg-icon/mg-icon.js.map +1 -1
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +17 -7
- package/dist/collection/components/atoms/mg-tag/mg-tag.js.map +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +1 -2
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +12 -8
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js +19 -6
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +16 -5
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.conf.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.conf.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +53 -21
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +64 -30
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +12 -7
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +44 -39
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +8 -3
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.conf.js +7 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.conf.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +89 -53
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +28 -23
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +8 -3
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js.map +1 -1
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.conf.js.map +1 -1
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js +2 -2
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js.map +1 -1
- package/dist/collection/components/molecules/menus/mg-menu/mg-menu.conf.js.map +1 -0
- package/dist/collection/components/molecules/{menu → menus}/mg-menu/mg-menu.js +9 -9
- package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js.map +1 -0
- package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.conf.js.map +1 -0
- package/dist/collection/components/molecules/{menu → menus}/mg-menu-item/mg-menu-item.js +7 -7
- package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js.map +1 -0
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.conf.js.map +1 -1
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +9 -4
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js.map +1 -1
- package/dist/collection/components/molecules/mg-alert/mg-alert.js +13 -3
- package/dist/collection/components/molecules/mg-alert/mg-alert.js.map +1 -1
- package/dist/collection/components/molecules/mg-details/mg-details.js +3 -2
- package/dist/collection/components/molecules/mg-details/mg-details.js.map +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js +8 -3
- package/dist/collection/components/molecules/mg-form/mg-form.js.map +1 -1
- package/dist/collection/components/molecules/mg-loader/mg-loader.js +10 -3
- package/dist/collection/components/molecules/mg-loader/mg-loader.js.map +1 -1
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +4 -4
- package/dist/collection/components/molecules/mg-modal/mg-modal.js.map +1 -1
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +17 -7
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js.map +1 -1
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +12 -7
- package/dist/collection/components/molecules/mg-panel/mg-panel.js.map +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +2 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js.map +1 -1
- package/dist/collection/components/molecules/mg-table/mg-table.conf.js +13 -0
- package/dist/collection/components/molecules/mg-table/mg-table.conf.js.map +1 -0
- package/dist/collection/components/molecules/mg-table/mg-table.js +364 -0
- package/dist/collection/components/molecules/mg-table/mg-table.js.map +1 -0
- package/dist/collection/locales/en/messages.json +37 -16
- package/dist/collection/locales/fr/messages.json +40 -19
- package/dist/collection/utils/playwright.fixture.js +2 -3
- package/dist/collection/utils/playwright.fixture.js.map +1 -1
- package/dist/components/floating-ui.utils.js +2 -421
- package/dist/components/floating-ui.utils.js.map +1 -1
- package/dist/components/index.es.js +68 -67
- package/dist/components/index.es.js.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/index2.js +86 -41
- package/dist/components/index2.js.map +1 -1
- package/dist/components/mg-action-more.js +13 -9
- package/dist/components/mg-action-more.js.map +1 -1
- package/dist/components/mg-alert.js +16 -8
- package/dist/components/mg-alert.js.map +1 -1
- package/dist/components/mg-badge.js +1 -0
- package/dist/components/mg-badge2.js +14 -10
- package/dist/components/mg-badge2.js.map +1 -1
- package/dist/components/mg-button.js +1 -0
- package/dist/components/mg-button2.js +19 -19
- package/dist/components/mg-button2.js.map +1 -1
- package/dist/components/mg-card.js +1 -0
- package/dist/components/mg-card2.js +2 -2
- package/dist/components/mg-card2.js.map +1 -1
- package/dist/components/mg-character-left.js +1 -0
- package/dist/components/mg-character-left2.js +6 -6
- package/dist/components/mg-character-left2.js.map +1 -1
- package/dist/components/mg-details.js +7 -6
- package/dist/components/mg-details.js.map +1 -1
- package/dist/components/mg-divider.js +1 -0
- package/dist/components/mg-divider2.js +2 -2
- package/dist/components/mg-divider2.js.map +1 -1
- package/dist/components/mg-form.js +14 -10
- package/dist/components/mg-form.js.map +1 -1
- package/dist/components/mg-icon.js +1 -0
- package/dist/components/mg-icon2.js +29 -14
- package/dist/components/mg-icon2.js.map +1 -1
- package/dist/components/mg-illustrated-message.js +7 -7
- package/dist/components/mg-illustrated-message.js.map +1 -1
- package/dist/components/mg-input-checkbox-paginated.js +2 -1
- package/dist/components/mg-input-checkbox-paginated2.js +15 -3
- package/dist/components/mg-input-checkbox-paginated2.js.map +1 -1
- package/dist/components/mg-input-checkbox.js +23 -14
- package/dist/components/mg-input-checkbox.js.map +1 -1
- package/dist/components/mg-input-date.js +64 -32
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +76 -43
- package/dist/components/mg-input-numeric.js.map +1 -1
- package/dist/components/mg-input-password.js +12 -8
- package/dist/components/mg-input-password.js.map +1 -1
- package/dist/components/mg-input-radio.js +10 -10
- package/dist/components/mg-input-radio.js.map +1 -1
- package/dist/components/mg-input-rich-text-editor.js +21525 -6867
- package/dist/components/mg-input-rich-text-editor.js.map +1 -1
- package/dist/components/mg-input-select.js +1 -0
- package/dist/components/mg-input-select2.js +15 -11
- package/dist/components/mg-input-select2.js.map +1 -1
- package/dist/components/mg-input-text.js +1 -0
- package/dist/components/mg-input-text2.js +67 -27
- package/dist/components/mg-input-text2.js.map +1 -1
- package/dist/components/mg-input-textarea.js +16 -12
- package/dist/components/mg-input-textarea.js.map +1 -1
- package/dist/components/mg-input-title.js +1 -0
- package/dist/components/mg-input-title2.js +6 -6
- package/dist/components/mg-input-title2.js.map +1 -1
- package/dist/components/mg-input-toggle.js +14 -10
- package/dist/components/mg-input-toggle.js.map +1 -1
- package/dist/components/mg-input.js +1 -0
- package/dist/components/mg-input2.js +20 -14
- package/dist/components/mg-input2.js.map +1 -1
- package/dist/components/mg-item-more.js +2 -1
- package/dist/components/mg-item-more2.js +18 -19
- package/dist/components/mg-item-more2.js.map +1 -1
- package/dist/components/mg-loader.js +10 -6
- package/dist/components/mg-loader.js.map +1 -1
- package/dist/components/mg-menu-item.js +1 -0
- package/dist/components/mg-menu-item2.js +16 -16
- package/dist/components/mg-menu-item2.js.map +1 -1
- package/dist/components/mg-menu.js +2 -1
- package/dist/components/mg-message.js +1 -0
- package/dist/components/mg-message2.js +6 -6
- package/dist/components/mg-message2.js.map +1 -1
- package/dist/components/mg-modal.js +13 -13
- package/dist/components/mg-modal.js.map +1 -1
- package/dist/components/mg-pagination.js +1 -0
- package/dist/components/mg-pagination2.js +19 -11
- package/dist/components/mg-pagination2.js.map +1 -1
- package/dist/components/mg-panel.js +18 -14
- package/dist/components/mg-panel.js.map +1 -1
- package/dist/components/mg-popover-content.js +1 -0
- package/dist/components/mg-popover-content2.js +5 -5
- package/dist/components/mg-popover-content2.js.map +1 -1
- package/dist/components/mg-popover.js +1 -0
- package/dist/components/mg-popover2.js +9 -9
- package/dist/components/mg-popover2.js.map +1 -1
- package/dist/components/mg-progress.js +12 -12
- package/dist/components/mg-progress.js.map +1 -1
- package/dist/components/mg-skip-links.js +4 -4
- package/dist/components/mg-skip-links.js.map +1 -1
- package/dist/components/mg-table.d.ts +11 -0
- package/dist/components/mg-table.js +320 -0
- package/dist/components/mg-table.js.map +1 -0
- package/dist/components/mg-tabs.js +14 -14
- package/dist/components/mg-tabs.js.map +1 -1
- package/dist/components/mg-tag.js +16 -8
- package/dist/components/mg-tag.js.map +1 -1
- package/dist/components/mg-tooltip-content.js +1 -0
- package/dist/components/mg-tooltip-content2.js +2 -2
- package/dist/components/mg-tooltip-content2.js.map +1 -1
- package/dist/components/mg-tooltip.js +1 -0
- package/dist/components/mg-tooltip2.js +13 -13
- package/dist/components/mg-tooltip2.js.map +1 -1
- package/dist/esm/app-globals-DQuL1Twl.js +6 -0
- package/dist/esm/app-globals-DQuL1Twl.js.map +1 -0
- package/dist/esm/{index-5059254f.js → index-CAuxALt5.js} +242 -174
- package/dist/esm/index-CAuxALt5.js.map +1 -0
- package/dist/esm/{index-a58f8b91.js → index-SQlkEaXW.js} +87 -42
- package/dist/esm/index-SQlkEaXW.js.map +1 -0
- package/dist/esm/index.es-DDBtzymI.js +130 -0
- package/dist/esm/index.es-DDBtzymI.js.map +1 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +5 -4
- package/dist/esm/loader.js.map +1 -1
- package/dist/esm/{mg-action-more_36.entry.js → mg-action-more_37.entry.js} +842 -825
- package/dist/esm/mg-action-more_37.entry.js.map +1 -0
- package/dist/esm/mg-alert.entry.js +21 -13
- package/dist/esm/mg-alert.entry.js.map +1 -1
- package/dist/esm/mg-components.js +7 -5
- package/dist/esm/mg-components.js.map +1 -1
- package/dist/esm/mg-input-rich-text-editor.entry.js +21527 -6869
- package/dist/esm/mg-input-rich-text-editor.entry.js.map +1 -1
- package/dist/esm/{mg-input.conf-712c7bb6.js → mg-input.conf-BtkqaBXm.js} +2 -1
- package/dist/esm/mg-input.conf-BtkqaBXm.js.map +1 -0
- package/dist/esm/mg-loader.entry.js +12 -8
- package/dist/esm/mg-loader.entry.js.map +1 -1
- package/dist/esm/mg-progress.entry.js +13 -13
- package/dist/esm/mg-progress.entry.js.map +1 -1
- package/dist/mg-components/index.esm.js.map +1 -1
- package/dist/mg-components/loader.esm.js.map +1 -0
- package/dist/mg-components/locales/en/messages.json +37 -16
- package/dist/mg-components/locales/fr/messages.json +40 -19
- package/dist/mg-components/mg-alert.entry.esm.js.map +1 -0
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/mg-components.esm.js.map +1 -1
- package/dist/mg-components/mg-input-rich-text-editor.entry.esm.js.map +1 -0
- package/dist/mg-components/mg-loader.entry.esm.js.map +1 -0
- package/dist/mg-components/mg-progress.entry.esm.js.map +1 -0
- package/dist/mg-components/p-583b3769.entry.js +2 -0
- package/dist/mg-components/p-583b3769.entry.js.map +1 -0
- package/dist/mg-components/p-650d6986.entry.js +11 -0
- package/dist/mg-components/p-650d6986.entry.js.map +1 -0
- package/dist/mg-components/p-680948e3.entry.js +2 -0
- package/dist/mg-components/p-680948e3.entry.js.map +1 -0
- package/dist/mg-components/p-9acc6504.entry.js +2 -0
- package/dist/mg-components/p-9acc6504.entry.js.map +1 -0
- package/dist/mg-components/{p-2884f369.js → p-BtkqaBXm.js} +1 -1
- package/dist/mg-components/p-BtkqaBXm.js.map +1 -0
- package/dist/mg-components/p-CAuxALt5.js +3 -0
- package/dist/mg-components/p-CAuxALt5.js.map +1 -0
- package/dist/mg-components/p-CqGbLOnN.js +2 -0
- package/dist/mg-components/p-CqGbLOnN.js.map +1 -0
- package/dist/mg-components/p-DDBtzymI.js +2 -0
- package/dist/mg-components/p-DDBtzymI.js.map +1 -0
- package/dist/mg-components/p-DQuL1Twl.js +2 -0
- package/dist/mg-components/p-DQuL1Twl.js.map +1 -0
- package/dist/mg-components/p-c0fb6f62.entry.js +2 -0
- package/dist/mg-components/p-c0fb6f62.entry.js.map +1 -0
- package/dist/types/components/atoms/mg-button/mg-button.d.ts +1 -1
- package/dist/types/components/atoms/mg-tag/mg-tag.d.ts +2 -2
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts +0 -1
- package/dist/types/components/molecules/inputs/mg-input/mg-input.d.ts +1 -4
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.conf.d.ts +1 -0
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +7 -6
- package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.d.ts +9 -9
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.conf.d.ts +4 -2
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +16 -10
- package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +5 -5
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +1 -1
- package/dist/types/components/molecules/internals/mg-item-more/mg-item-more.conf.d.ts +1 -1
- package/dist/types/components/molecules/mg-action-more/mg-action-more.conf.d.ts +1 -1
- package/dist/types/components/molecules/mg-action-more/mg-action-more.d.ts +1 -1
- package/dist/types/components/molecules/mg-form/mg-form.d.ts +1 -1
- package/dist/types/components/molecules/mg-loader/mg-loader.d.ts +1 -1
- package/dist/types/components/molecules/mg-pagination/mg-pagination.d.ts +2 -2
- package/dist/types/components/molecules/mg-panel/mg-panel.d.ts +1 -1
- package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +1 -0
- package/dist/types/components/molecules/mg-table/mg-table.conf.d.ts +19 -0
- package/dist/types/components/molecules/mg-table/mg-table.d.ts +58 -0
- package/dist/types/components.d.ts +66 -27
- package/dist/types/stencil-public-runtime.d.ts +1 -0
- package/ide/intellij/web-types.json +157 -49
- package/ide/vscode/html-custom-data.json +111 -27
- package/package.json +25 -25
- package/dist/cjs/app-globals-3a1e7e63.js +0 -7
- package/dist/cjs/app-globals-3a1e7e63.js.map +0 -1
- package/dist/cjs/index-1a5a1081.js.map +0 -1
- package/dist/cjs/index-b7923724.js.map +0 -1
- package/dist/cjs/index.es-903492c5.js +0 -151
- package/dist/cjs/index.es-903492c5.js.map +0 -1
- package/dist/cjs/mg-action-more_36.cjs.entry.js.map +0 -1
- package/dist/cjs/mg-input.conf-5bbcea79.js.map +0 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.conf.js.map +0 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js.map +0 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.conf.js.map +0 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js.map +0 -1
- package/dist/esm/app-globals-0f993ce5.js +0 -5
- package/dist/esm/app-globals-0f993ce5.js.map +0 -1
- package/dist/esm/index-5059254f.js.map +0 -1
- package/dist/esm/index-a58f8b91.js.map +0 -1
- package/dist/esm/index.es-b80b758c.js +0 -129
- package/dist/esm/index.es-b80b758c.js.map +0 -1
- package/dist/esm/mg-action-more_36.entry.js.map +0 -1
- package/dist/esm/mg-input.conf-712c7bb6.js.map +0 -1
- package/dist/mg-components/p-2884f369.js.map +0 -1
- package/dist/mg-components/p-2a633b29.entry.js +0 -2
- package/dist/mg-components/p-2a633b29.entry.js.map +0 -1
- package/dist/mg-components/p-361cc090.entry.js +0 -2
- package/dist/mg-components/p-361cc090.entry.js.map +0 -1
- package/dist/mg-components/p-3afebdab.entry.js +0 -2
- package/dist/mg-components/p-3afebdab.entry.js.map +0 -1
- package/dist/mg-components/p-3c6710be.js +0 -2
- package/dist/mg-components/p-3c6710be.js.map +0 -1
- package/dist/mg-components/p-ac8a5083.js +0 -2
- package/dist/mg-components/p-ac8a5083.js.map +0 -1
- package/dist/mg-components/p-bc6ec847.entry.js +0 -2
- package/dist/mg-components/p-bc6ec847.entry.js.map +0 -1
- package/dist/mg-components/p-e1255160.js +0 -2
- package/dist/mg-components/p-e1255160.js.map +0 -1
- package/dist/mg-components/p-e39791fa.js +0 -3
- package/dist/mg-components/p-e39791fa.js.map +0 -1
- package/dist/mg-components/p-f2e6e7ae.entry.js +0 -2
- package/dist/mg-components/p-f2e6e7ae.entry.js.map +0 -1
- package/loader/package.json +0 -11
- /package/dist/collection/components/molecules/{menu → menus}/mg-menu/mg-menu.conf.js +0 -0
- /package/dist/collection/components/molecules/{menu → menus}/mg-menu-item/mg-menu-item.conf.js +0 -0
- /package/dist/types/components/molecules/{menu → menus}/mg-menu/mg-menu.conf.d.ts +0 -0
- /package/dist/types/components/molecules/{menu → menus}/mg-menu/mg-menu.d.ts +0 -0
- /package/dist/types/components/molecules/{menu → menus}/mg-menu-item/mg-menu-item.conf.d.ts +0 -0
- /package/dist/types/components/molecules/{menu → menus}/mg-menu-item/mg-menu-item.d.ts +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
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 { t as tooltipPositions, c as classFieldset, a as classReadonly, b as classDisabled, d as classVerticalList, w as widths } from './mg-input.conf-
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-CAuxALt5.js';
|
|
2
|
+
import { x as xt, z as zt, k as kt, L as Le, M as Mt, O as Ot, T as Tt, a as Lt, w as wt, E as Et, H as Ht, B as Bt, G as Gt, X as Xt, W as Wt, P as Pt, A as At, R as Rt, j as jt } from './index.es-DDBtzymI.js';
|
|
3
|
+
import { i as initLocales } from './index-SQlkEaXW.js';
|
|
4
|
+
import { t as tooltipPositions, c as classFieldset, a as classReadonly, b as classDisabled, d as classVerticalList, w as widths } from './mg-input.conf-BtkqaBXm.js';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Available menu item status values
|
|
@@ -27,10 +27,9 @@ const directions$1 = {
|
|
|
27
27
|
/**
|
|
28
28
|
* List of all possibles sizes
|
|
29
29
|
*/
|
|
30
|
-
const sizes$
|
|
30
|
+
const sizes$5 = ['medium', 'large', 'xlarge'];
|
|
31
31
|
|
|
32
32
|
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
33
|
|
|
35
34
|
/**
|
|
36
35
|
* MgActionMore['items'] type guard
|
|
@@ -74,11 +73,15 @@ const MgActionMore = class {
|
|
|
74
73
|
************/
|
|
75
74
|
this.name = 'mg-action-more';
|
|
76
75
|
this.classBase = 'mg-c-action-more';
|
|
77
|
-
this.mgPopoverIdentifier =
|
|
76
|
+
this.mgPopoverIdentifier = xt(this.name);
|
|
78
77
|
/**
|
|
79
78
|
* Define button properties
|
|
80
79
|
*/
|
|
81
80
|
this.button = { variant: 'flat', isIcon: true };
|
|
81
|
+
/**
|
|
82
|
+
* Define if chevron is display
|
|
83
|
+
*/
|
|
84
|
+
this.displayChevron = false;
|
|
82
85
|
/**
|
|
83
86
|
* Menu expanded state
|
|
84
87
|
*/
|
|
@@ -117,15 +120,15 @@ const MgActionMore = class {
|
|
|
117
120
|
}
|
|
118
121
|
validateItems(newValue) {
|
|
119
122
|
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: ${
|
|
123
|
+
throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${zt(newValue)}.`);
|
|
121
124
|
}
|
|
122
125
|
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: ${
|
|
126
|
+
throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${zt(newValue)}.`);
|
|
124
127
|
}
|
|
125
128
|
}
|
|
126
129
|
validateIcon(newValue) {
|
|
127
130
|
if (newValue && !isMgActionMoreIcon(newValue)) {
|
|
128
|
-
throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${
|
|
131
|
+
throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${zt(newValue)}.`);
|
|
129
132
|
}
|
|
130
133
|
else if ((newValue === null || newValue === void 0 ? void 0 : newValue.icon) === undefined && Boolean(this.button.isIcon)) {
|
|
131
134
|
this.icon = { icon: 'ellipsis' };
|
|
@@ -133,7 +136,7 @@ const MgActionMore = class {
|
|
|
133
136
|
}
|
|
134
137
|
validateButton(newValue) {
|
|
135
138
|
if (newValue && !isMgActionMoreButton(newValue)) {
|
|
136
|
-
throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${
|
|
139
|
+
throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${zt(newValue)}.`);
|
|
137
140
|
}
|
|
138
141
|
}
|
|
139
142
|
validateDisplayChevron(newValue) {
|
|
@@ -182,7 +185,7 @@ const MgActionMore = class {
|
|
|
182
185
|
"displayChevron": ["validateDisplayChevron"]
|
|
183
186
|
}; }
|
|
184
187
|
};
|
|
185
|
-
MgActionMore.style =
|
|
188
|
+
MgActionMore.style = mgActionMoreCss;
|
|
186
189
|
|
|
187
190
|
/**
|
|
188
191
|
* List of all possibles variants
|
|
@@ -190,7 +193,6 @@ MgActionMore.style = MgActionMoreStyle0;
|
|
|
190
193
|
const variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
|
|
191
194
|
|
|
192
195
|
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
196
|
|
|
195
197
|
const MgBadge = class {
|
|
196
198
|
constructor(hostRef) {
|
|
@@ -203,25 +205,29 @@ const MgBadge = class {
|
|
|
203
205
|
/**
|
|
204
206
|
* Define badge variant
|
|
205
207
|
*/
|
|
206
|
-
this.variant =
|
|
208
|
+
this.variant = 'info';
|
|
209
|
+
/**
|
|
210
|
+
* Define if button is using outline style
|
|
211
|
+
*/
|
|
212
|
+
this.outline = false;
|
|
207
213
|
/**
|
|
208
214
|
* Component classes
|
|
209
215
|
*/
|
|
210
|
-
this.classCollection = new
|
|
216
|
+
this.classCollection = new kt(['mg-c-badge']);
|
|
211
217
|
}
|
|
212
218
|
validateValue(newValue) {
|
|
213
219
|
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: ${
|
|
220
|
+
throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${zt(newValue)}.`);
|
|
215
221
|
}
|
|
216
222
|
}
|
|
217
223
|
validateLabel(newValue) {
|
|
218
|
-
if (!
|
|
219
|
-
throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${
|
|
224
|
+
if (!Le(newValue)) {
|
|
225
|
+
throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${zt(newValue)}.`);
|
|
220
226
|
}
|
|
221
227
|
}
|
|
222
228
|
validateVariant(newValue, oldValue) {
|
|
223
229
|
if (!variants$4.includes(newValue)) {
|
|
224
|
-
throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${
|
|
230
|
+
throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
225
231
|
}
|
|
226
232
|
else {
|
|
227
233
|
if (oldValue !== undefined) {
|
|
@@ -250,7 +256,7 @@ const MgBadge = class {
|
|
|
250
256
|
* @returns HTML Element
|
|
251
257
|
*/
|
|
252
258
|
render() {
|
|
253
|
-
return (h("span", { key: '
|
|
259
|
+
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
260
|
}
|
|
255
261
|
static get watchers() { return {
|
|
256
262
|
"value": ["validateValue"],
|
|
@@ -259,24 +265,23 @@ const MgBadge = class {
|
|
|
259
265
|
"outline": ["validateOutline"]
|
|
260
266
|
}; }
|
|
261
267
|
};
|
|
262
|
-
MgBadge.style =
|
|
268
|
+
MgBadge.style = mgBadgeCss;
|
|
263
269
|
|
|
264
270
|
/**
|
|
265
271
|
* List of all possibles sizes
|
|
266
272
|
*/
|
|
267
|
-
const sizes$
|
|
273
|
+
const sizes$4 = ['medium', 'large'];
|
|
268
274
|
/**
|
|
269
275
|
* List of all possibles variants
|
|
270
276
|
*/
|
|
271
277
|
const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
|
|
272
278
|
|
|
273
279
|
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
280
|
|
|
276
281
|
const MgButton = class {
|
|
277
282
|
constructor(hostRef) {
|
|
278
283
|
registerInstance(this, hostRef);
|
|
279
|
-
this.disabledChange = createEvent(this, "disabled-change"
|
|
284
|
+
this.disabledChange = createEvent(this, "disabled-change");
|
|
280
285
|
/************
|
|
281
286
|
* Internal *
|
|
282
287
|
************/
|
|
@@ -287,11 +292,11 @@ const MgButton = class {
|
|
|
287
292
|
/**
|
|
288
293
|
* Define button variant
|
|
289
294
|
*/
|
|
290
|
-
this.variant =
|
|
295
|
+
this.variant = 'primary';
|
|
291
296
|
/**
|
|
292
297
|
* Define button size
|
|
293
298
|
*/
|
|
294
|
-
this.size =
|
|
299
|
+
this.size = 'medium';
|
|
295
300
|
/**
|
|
296
301
|
* Set button to full-width
|
|
297
302
|
*/
|
|
@@ -315,7 +320,7 @@ const MgButton = class {
|
|
|
315
320
|
/**
|
|
316
321
|
* Component classes
|
|
317
322
|
*/
|
|
318
|
-
this.classCollection = new
|
|
323
|
+
this.classCollection = new kt(['mg-c-button']);
|
|
319
324
|
/**
|
|
320
325
|
* Trigger actions onClick event
|
|
321
326
|
* @param event - click event
|
|
@@ -358,7 +363,7 @@ const MgButton = class {
|
|
|
358
363
|
this.setIconSize = () => {
|
|
359
364
|
var _a, _b;
|
|
360
365
|
if (this.size === 'medium') {
|
|
361
|
-
(_a = this.element.querySelector('mg-icon')) === null || _a === void 0 ? void 0 : _a.removeAttribute('size');
|
|
366
|
+
(_a = this.element.querySelector('mg-icon[size]')) === null || _a === void 0 ? void 0 : _a.removeAttribute('size');
|
|
362
367
|
}
|
|
363
368
|
else if (this.isIcon) {
|
|
364
369
|
(_b = this.element.querySelector('mg-icon')) === null || _b === void 0 ? void 0 : _b.setAttribute('size', this.size);
|
|
@@ -373,7 +378,7 @@ const MgButton = class {
|
|
|
373
378
|
this.variant = variants$3[0];
|
|
374
379
|
return;
|
|
375
380
|
}
|
|
376
|
-
throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${
|
|
381
|
+
throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
377
382
|
}
|
|
378
383
|
else {
|
|
379
384
|
if (oldValue !== undefined) {
|
|
@@ -384,8 +389,8 @@ const MgButton = class {
|
|
|
384
389
|
}
|
|
385
390
|
validateSize(newValue, oldValue) {
|
|
386
391
|
// validate new value
|
|
387
|
-
if (!sizes$
|
|
388
|
-
throw new Error(`<mg-button> prop "size" must be one of: ${sizes$
|
|
392
|
+
if (!sizes$4.includes(newValue)) {
|
|
393
|
+
throw new Error(`<mg-button> prop "size" must be one of: ${sizes$4.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
389
394
|
}
|
|
390
395
|
else {
|
|
391
396
|
if (oldValue !== undefined) {
|
|
@@ -424,7 +429,13 @@ const MgButton = class {
|
|
|
424
429
|
// emit value update
|
|
425
430
|
this.disabledChange.emit(isDisabled);
|
|
426
431
|
}
|
|
427
|
-
watchIsIcon() {
|
|
432
|
+
watchIsIcon(newValue) {
|
|
433
|
+
if (newValue) {
|
|
434
|
+
this.classCollection.add(`mg-c-button--icon`);
|
|
435
|
+
if (!Le(this.label)) {
|
|
436
|
+
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
437
|
+
}
|
|
438
|
+
}
|
|
428
439
|
this.setIconSize();
|
|
429
440
|
}
|
|
430
441
|
loadingHandler(newValue) {
|
|
@@ -443,13 +454,7 @@ const MgButton = class {
|
|
|
443
454
|
this.validateVariant(this.variant);
|
|
444
455
|
this.validateFullWidth(this.fullWidth);
|
|
445
456
|
this.validateSize(this.size);
|
|
446
|
-
this.watchIsIcon();
|
|
447
|
-
if (this.isIcon) {
|
|
448
|
-
this.classCollection.add(`mg-c-button--icon`);
|
|
449
|
-
if (!me(this.label)) {
|
|
450
|
-
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
451
|
-
}
|
|
452
|
-
}
|
|
457
|
+
this.watchIsIcon(this.isIcon);
|
|
453
458
|
// Store the onclick fn
|
|
454
459
|
this.onClickElementFn = this.element.onclick;
|
|
455
460
|
this.disabledHandler(this.disabled);
|
|
@@ -458,7 +463,7 @@ const MgButton = class {
|
|
|
458
463
|
* Add listners
|
|
459
464
|
*/
|
|
460
465
|
componentDidLoad() {
|
|
461
|
-
|
|
466
|
+
Mt(() => {
|
|
462
467
|
var _a;
|
|
463
468
|
const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
|
|
464
469
|
// submit buttons should trigger form submition;
|
|
@@ -475,7 +480,7 @@ const MgButton = class {
|
|
|
475
480
|
*/
|
|
476
481
|
render() {
|
|
477
482
|
var _a;
|
|
478
|
-
return (h(Host, { key: '
|
|
483
|
+
return (h(Host, { key: '73d97963f988261cec281f67842d71194513528b', 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: 'c8ce88a3d9d67ce40cc9687b4ea192681d826896', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: '5e8949fa49487deda3fdeb1fbb85b62d799e33c6', icon: "loader", spin: true }), h("div", { key: 'fc733614c9fb3e30c30c520e9ca3d8a4efd59efe', class: "mg-c-button__content" }, h("slot", { key: '1c2c5a91c44c8983d317a4f475ffe89fc21a36e5' })))));
|
|
479
484
|
}
|
|
480
485
|
get element() { return getElement(this); }
|
|
481
486
|
static get watchers() { return {
|
|
@@ -487,10 +492,9 @@ const MgButton = class {
|
|
|
487
492
|
"loading": ["loadingHandler"]
|
|
488
493
|
}; }
|
|
489
494
|
};
|
|
490
|
-
MgButton.style =
|
|
495
|
+
MgButton.style = mgButtonCss;
|
|
491
496
|
|
|
492
497
|
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
498
|
|
|
495
499
|
const MgCard = class {
|
|
496
500
|
constructor(hostRef) {
|
|
@@ -507,10 +511,9 @@ const MgCard = class {
|
|
|
507
511
|
return (h("div", { key: 'e59cabb09dbc28c148770b57de98f130c4479b75', class: "mg-c-card" }, h("slot", { key: 'b6e679317bddd23e73443c601992b7b344d6dc72' })));
|
|
508
512
|
}
|
|
509
513
|
};
|
|
510
|
-
MgCard.style =
|
|
514
|
+
MgCard.style = mgCardCss;
|
|
511
515
|
|
|
512
516
|
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
517
|
|
|
515
518
|
const MgCharacterLeft = class {
|
|
516
519
|
constructor(hostRef) {
|
|
@@ -521,13 +524,13 @@ const MgCharacterLeft = class {
|
|
|
521
524
|
this.characters = '';
|
|
522
525
|
}
|
|
523
526
|
watchIdentifier(newValue) {
|
|
524
|
-
if (newValue !== undefined && !
|
|
525
|
-
console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${
|
|
527
|
+
if (newValue !== undefined && !Ot(newValue)) {
|
|
528
|
+
console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
|
|
526
529
|
}
|
|
527
530
|
}
|
|
528
531
|
validateMaxlength(newValue) {
|
|
529
532
|
if (typeof newValue !== 'number') {
|
|
530
|
-
throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${
|
|
533
|
+
throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${zt(newValue)}.`);
|
|
531
534
|
}
|
|
532
535
|
}
|
|
533
536
|
/*************
|
|
@@ -554,15 +557,14 @@ const MgCharacterLeft = class {
|
|
|
554
557
|
"maxlength": ["validateMaxlength"]
|
|
555
558
|
}; }
|
|
556
559
|
};
|
|
557
|
-
MgCharacterLeft.style =
|
|
560
|
+
MgCharacterLeft.style = mgCharacterLeftCss;
|
|
558
561
|
|
|
559
562
|
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;
|
|
561
563
|
|
|
562
564
|
const MgDetails = class {
|
|
563
565
|
constructor(hostRef) {
|
|
564
566
|
registerInstance(this, hostRef);
|
|
565
|
-
this.expandedChange = createEvent(this, "expanded-change"
|
|
567
|
+
this.expandedChange = createEvent(this, "expanded-change");
|
|
566
568
|
/**
|
|
567
569
|
* Hide summary element
|
|
568
570
|
*/
|
|
@@ -579,7 +581,7 @@ const MgDetails = class {
|
|
|
579
581
|
};
|
|
580
582
|
}
|
|
581
583
|
validateTitles(newValue) {
|
|
582
|
-
if (!
|
|
584
|
+
if (!Le(newValue)) {
|
|
583
585
|
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
586
|
}
|
|
585
587
|
}
|
|
@@ -596,8 +598,9 @@ const MgDetails = class {
|
|
|
596
598
|
this.validateTitles(this.toggleClosed);
|
|
597
599
|
this.validateTitles(this.toggleOpened);
|
|
598
600
|
this.element.addEventListener('click', (event) => {
|
|
599
|
-
if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]'))
|
|
601
|
+
if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]') !== null) {
|
|
600
602
|
event.preventDefault();
|
|
603
|
+
}
|
|
601
604
|
});
|
|
602
605
|
}
|
|
603
606
|
/**
|
|
@@ -605,7 +608,7 @@ const MgDetails = class {
|
|
|
605
608
|
* @returns HTML Element
|
|
606
609
|
*/
|
|
607
610
|
render() {
|
|
608
|
-
return (h("details", { key: '
|
|
611
|
+
return (h("details", { key: '3f773b6c0d10c12049d62a9bbe3b24ce95329077', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: 'c6378c290a253098a26e832dbc43c58182e1d90c' }, h("slot", { key: '033334926172ca422a1346085cfe5fb1adf33e9b', name: "summary" }), h("span", { key: '105cd284d2cf7363cd0ea85279c057471f2113c9', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'c17df4c2813a346a4ced9be2f872dcdc688baa2e', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '5dc2078f2ba8808dbad0b75f2857173d2bd8d3e5', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'bf9883ad6dbf0c1014ad6559cb5d08b157d80d9b', class: "mg-c-details__details" }, h("slot", { key: '244092eb1aceb39143e53b63faf36ab2a5c4c205', name: "details" }))));
|
|
609
612
|
}
|
|
610
613
|
get element() { return getElement(this); }
|
|
611
614
|
static get watchers() { return {
|
|
@@ -614,10 +617,9 @@ const MgDetails = class {
|
|
|
614
617
|
"expanded": ["handleExpanded"]
|
|
615
618
|
}; }
|
|
616
619
|
};
|
|
617
|
-
MgDetails.style =
|
|
620
|
+
MgDetails.style = mgDetailsCss;
|
|
618
621
|
|
|
619
622
|
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
623
|
|
|
622
624
|
const MgDivider = class {
|
|
623
625
|
constructor(hostRef) {
|
|
@@ -641,7 +643,7 @@ const MgDivider = class {
|
|
|
641
643
|
} }));
|
|
642
644
|
}
|
|
643
645
|
};
|
|
644
|
-
MgDivider.style =
|
|
646
|
+
MgDivider.style = mgDividerCss;
|
|
645
647
|
|
|
646
648
|
/**
|
|
647
649
|
* List of all possibles roles
|
|
@@ -653,13 +655,12 @@ const roles = ['form', 'search', 'none', 'presentation'];
|
|
|
653
655
|
const requiredMessageStatus = ['default', 'hide'];
|
|
654
656
|
|
|
655
657
|
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
658
|
|
|
658
659
|
const MgForm = class {
|
|
659
660
|
constructor(hostRef) {
|
|
660
661
|
registerInstance(this, hostRef);
|
|
661
|
-
this.formValid = createEvent(this, "form-valid"
|
|
662
|
-
this.formSubmit = createEvent(this, "form-submit"
|
|
662
|
+
this.formValid = createEvent(this, "form-valid");
|
|
663
|
+
this.formSubmit = createEvent(this, "form-submit");
|
|
663
664
|
// Classes
|
|
664
665
|
this.classAllRequired = 'mg-c-form--all-required';
|
|
665
666
|
this.classLabelOnTop = 'mg-c-form--label-on-top';
|
|
@@ -667,7 +668,7 @@ const MgForm = class {
|
|
|
667
668
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
668
669
|
* If not set, it will be created.
|
|
669
670
|
*/
|
|
670
|
-
this.identifier =
|
|
671
|
+
this.identifier = xt('mg-form');
|
|
671
672
|
/**
|
|
672
673
|
* Input name
|
|
673
674
|
* If not set the value equals the identifier
|
|
@@ -677,6 +678,10 @@ const MgForm = class {
|
|
|
677
678
|
* Define if form is readonly
|
|
678
679
|
*/
|
|
679
680
|
this.readonly = false;
|
|
681
|
+
/**
|
|
682
|
+
* Define if slotted mg-component's label are displayed on top
|
|
683
|
+
*/
|
|
684
|
+
this.labelOnTop = false;
|
|
680
685
|
/**
|
|
681
686
|
* Define if form is disabled
|
|
682
687
|
*/
|
|
@@ -684,7 +689,7 @@ const MgForm = class {
|
|
|
684
689
|
/**
|
|
685
690
|
* Component classes
|
|
686
691
|
*/
|
|
687
|
-
this.classCollection = new
|
|
692
|
+
this.classCollection = new kt(['mg-c-form']);
|
|
688
693
|
/**
|
|
689
694
|
* Define required message based on mg-inputs required elements
|
|
690
695
|
*/
|
|
@@ -772,18 +777,18 @@ const MgForm = class {
|
|
|
772
777
|
};
|
|
773
778
|
}
|
|
774
779
|
watchIdentifier(newValue) {
|
|
775
|
-
if (!
|
|
776
|
-
console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${
|
|
780
|
+
if (!Ot(newValue)) {
|
|
781
|
+
console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
|
|
777
782
|
}
|
|
778
783
|
}
|
|
779
784
|
validateRequiredMessage(newValue) {
|
|
780
785
|
if (newValue && !requiredMessageStatus.includes(newValue)) {
|
|
781
|
-
throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${
|
|
786
|
+
throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
782
787
|
}
|
|
783
788
|
}
|
|
784
789
|
validateAriaRole(newValue) {
|
|
785
790
|
if (newValue && !roles.includes(newValue)) {
|
|
786
|
-
throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${
|
|
791
|
+
throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
787
792
|
}
|
|
788
793
|
}
|
|
789
794
|
handlelabelOnTop(newValue) {
|
|
@@ -872,7 +877,7 @@ const MgForm = class {
|
|
|
872
877
|
* @returns HTML Element
|
|
873
878
|
*/
|
|
874
879
|
render() {
|
|
875
|
-
return (h("form", { key: '
|
|
880
|
+
return (h("form", { key: '43c060c027330a9db84c469228536db8d2329c86', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '42cba44f2075371ae73b097b84012fdbd1b473d8', innerHTML: this.requiredMessageText }), h("slot", { key: '0797165b78e980ab2680f7a3a1c68b13c5140820' }), !this.readonly && !this.disabled && h("slot", { key: 'a13f2ac1e784b0e03408ed811b1c3bec4b730479', name: "actions" })));
|
|
876
881
|
}
|
|
877
882
|
get element() { return getElement(this); }
|
|
878
883
|
static get watchers() { return {
|
|
@@ -884,12 +889,12 @@ const MgForm = class {
|
|
|
884
889
|
"disabled": ["handleAttributeChange"]
|
|
885
890
|
}; }
|
|
886
891
|
};
|
|
887
|
-
MgForm.style =
|
|
892
|
+
MgForm.style = mgFormCss;
|
|
888
893
|
|
|
889
894
|
/**
|
|
890
895
|
* List of all possibles sizes
|
|
891
896
|
*/
|
|
892
|
-
const sizes$
|
|
897
|
+
const sizes$3 = ['small', 'medium', 'large', 'xlarge', 'xxlarge'];
|
|
893
898
|
/**
|
|
894
899
|
* List of all possibles variants
|
|
895
900
|
*/
|
|
@@ -902,7 +907,6 @@ const variantStyles$1 = ['icon', 'background', 'full'];
|
|
|
902
907
|
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
908
|
|
|
904
909
|
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
910
|
|
|
907
911
|
const MgIcon = class {
|
|
908
912
|
constructor(hostRef) {
|
|
@@ -918,7 +922,7 @@ const MgIcon = class {
|
|
|
918
922
|
/**
|
|
919
923
|
* Component classes
|
|
920
924
|
*/
|
|
921
|
-
this.classCollection = new
|
|
925
|
+
this.classCollection = new kt(['mg-c-icon']);
|
|
922
926
|
/**
|
|
923
927
|
* Method to set default varianStyle props
|
|
924
928
|
* needeed has stencil doesn't know that props is mutated when updated in prop watcher
|
|
@@ -932,37 +936,52 @@ const MgIcon = class {
|
|
|
932
936
|
* @param icon - icon to render
|
|
933
937
|
*/
|
|
934
938
|
this.renderIcon = (icon) => {
|
|
935
|
-
|
|
936
|
-
|
|
939
|
+
var _a;
|
|
940
|
+
// Remove existing SVG from ShadowRoot
|
|
941
|
+
(_a = this.element.shadowRoot.querySelector('svg')) === null || _a === void 0 ? void 0 : _a.remove();
|
|
942
|
+
// Append new SVG to ShadowRoot
|
|
943
|
+
const svgContainer = document.createElement('div');
|
|
944
|
+
svgContainer.innerHTML = icons[icon];
|
|
945
|
+
this.element.shadowRoot.append(svgContainer.firstChild);
|
|
946
|
+
svgContainer.remove();
|
|
937
947
|
// update svg attributes
|
|
948
|
+
this.svg = this.element.shadowRoot.querySelector('svg');
|
|
938
949
|
this.svg.setAttribute('aria-hidden', 'true');
|
|
939
950
|
this.svg.setAttribute('focusable', 'false');
|
|
940
951
|
this.svg.setAttribute('class', this.classCollection.join());
|
|
941
952
|
};
|
|
942
953
|
}
|
|
943
954
|
validateIcon(newValue, oldValue) {
|
|
944
|
-
if (!Object.keys(icons).includes(newValue))
|
|
945
|
-
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${
|
|
955
|
+
if (!Object.keys(icons).includes(newValue)) {
|
|
956
|
+
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
957
|
+
}
|
|
946
958
|
else {
|
|
947
|
-
if (oldValue !== undefined)
|
|
959
|
+
if (oldValue !== undefined) {
|
|
948
960
|
this.classCollection.delete(`mg-c-icon--${oldValue}`);
|
|
961
|
+
}
|
|
949
962
|
this.classCollection.add(`mg-c-icon--${newValue}`);
|
|
950
963
|
this.renderIcon(newValue);
|
|
951
964
|
}
|
|
952
965
|
}
|
|
953
966
|
validateSize(newValue, oldValue) {
|
|
954
|
-
|
|
955
|
-
|
|
967
|
+
// When removing size attribute, it is set to null
|
|
968
|
+
if (newValue === null) {
|
|
969
|
+
newValue = 'medium';
|
|
970
|
+
}
|
|
971
|
+
if (!sizes$3.includes(newValue)) {
|
|
972
|
+
throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$3.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
973
|
+
}
|
|
956
974
|
else {
|
|
957
|
-
if (oldValue !== undefined)
|
|
975
|
+
if (oldValue !== undefined) {
|
|
958
976
|
this.classCollection.delete(`mg-c-icon--size-${oldValue}`);
|
|
977
|
+
}
|
|
959
978
|
this.classCollection.add(`mg-c-icon--size-${newValue}`);
|
|
960
979
|
}
|
|
961
980
|
}
|
|
962
981
|
validateVariant(newValue, oldValue) {
|
|
963
982
|
if (newValue !== undefined) {
|
|
964
983
|
if (!variants$2.includes(newValue))
|
|
965
|
-
throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${
|
|
984
|
+
throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
966
985
|
else {
|
|
967
986
|
this.setDefaultVariantStyle();
|
|
968
987
|
if (oldValue !== undefined)
|
|
@@ -974,7 +993,7 @@ const MgIcon = class {
|
|
|
974
993
|
validateVariantStyle(newValue, oldValue) {
|
|
975
994
|
if (newValue !== undefined) {
|
|
976
995
|
if (!variantStyles$1.includes(newValue))
|
|
977
|
-
throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${
|
|
996
|
+
throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
978
997
|
else {
|
|
979
998
|
if (oldValue !== undefined)
|
|
980
999
|
this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
|
|
@@ -1017,19 +1036,18 @@ const MgIcon = class {
|
|
|
1017
1036
|
"spin": ["handleSpin"]
|
|
1018
1037
|
}; }
|
|
1019
1038
|
};
|
|
1020
|
-
MgIcon.style =
|
|
1039
|
+
MgIcon.style = mgIconCss;
|
|
1021
1040
|
|
|
1022
1041
|
/**
|
|
1023
1042
|
* List of all possibles sizes
|
|
1024
1043
|
*/
|
|
1025
|
-
const sizes$
|
|
1044
|
+
const sizes$2 = ['small', 'medium', 'large'];
|
|
1026
1045
|
/**
|
|
1027
1046
|
* List of all possibles directions
|
|
1028
1047
|
*/
|
|
1029
1048
|
const directions = ['vertical', 'horizontal'];
|
|
1030
1049
|
|
|
1031
1050
|
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))}";
|
|
1032
|
-
const MgIllustratedMessageStyle0 = mgIllustratedMessageCss;
|
|
1033
1051
|
|
|
1034
1052
|
const MgIllustratedMessage = class {
|
|
1035
1053
|
constructor(hostRef) {
|
|
@@ -1045,11 +1063,11 @@ const MgIllustratedMessage = class {
|
|
|
1045
1063
|
/**
|
|
1046
1064
|
* Component classes
|
|
1047
1065
|
*/
|
|
1048
|
-
this.classCollection = new
|
|
1066
|
+
this.classCollection = new kt(['mg-c-illustrated-message']);
|
|
1049
1067
|
}
|
|
1050
1068
|
watchSize(newValue, oldValue) {
|
|
1051
|
-
if (!sizes$
|
|
1052
|
-
throw new Error(`<mg-illustrated-message> prop "size" must be one of: ${sizes$
|
|
1069
|
+
if (!sizes$2.includes(newValue)) {
|
|
1070
|
+
throw new Error(`<mg-illustrated-message> prop "size" must be one of: ${sizes$2.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
1053
1071
|
}
|
|
1054
1072
|
else {
|
|
1055
1073
|
if (oldValue !== undefined) {
|
|
@@ -1060,7 +1078,7 @@ const MgIllustratedMessage = class {
|
|
|
1060
1078
|
}
|
|
1061
1079
|
watchDirection(newValue, oldValue) {
|
|
1062
1080
|
if (newValue !== undefined && !directions.includes(newValue)) {
|
|
1063
|
-
throw new Error(`<mg-illustrated-message> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${
|
|
1081
|
+
throw new Error(`<mg-illustrated-message> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
1064
1082
|
}
|
|
1065
1083
|
else if (newValue === 'horizontal') {
|
|
1066
1084
|
this.classCollection.add('mg-c-illustrated-message--direction-horizontal');
|
|
@@ -1083,7 +1101,7 @@ const MgIllustratedMessage = class {
|
|
|
1083
1101
|
if (slottedDetails.length === 0 && slottedTitle === null) {
|
|
1084
1102
|
throw new Error('<mg-illustrated-message> Slot "title" or "details" must be present.');
|
|
1085
1103
|
}
|
|
1086
|
-
else if (slottedTitle !== null && !
|
|
1104
|
+
else if (slottedTitle !== null && !Tt(slottedTitle, headingTags)) {
|
|
1087
1105
|
throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}.`);
|
|
1088
1106
|
}
|
|
1089
1107
|
else if (slottedIllustrations.length !== 1) {
|
|
@@ -1115,10 +1133,9 @@ const MgIllustratedMessage = class {
|
|
|
1115
1133
|
"direction": ["watchDirection"]
|
|
1116
1134
|
}; }
|
|
1117
1135
|
};
|
|
1118
|
-
MgIllustratedMessage.style =
|
|
1136
|
+
MgIllustratedMessage.style = mgIllustratedMessageCss;
|
|
1119
1137
|
|
|
1120
1138
|
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}}";
|
|
1121
|
-
const MgInputStyle0 = mgInputCss;
|
|
1122
1139
|
|
|
1123
1140
|
const MgInput = class {
|
|
1124
1141
|
constructor(hostRef) {
|
|
@@ -1130,6 +1147,10 @@ const MgInput = class {
|
|
|
1130
1147
|
this.classInput = 'mg-c-input';
|
|
1131
1148
|
this.classHasError = 'mg-c-input--has-error';
|
|
1132
1149
|
this.classLabelOnTop = 'mg-c-input--label-on-top';
|
|
1150
|
+
/**
|
|
1151
|
+
* Define if label is displayed on top
|
|
1152
|
+
*/
|
|
1153
|
+
this.labelOnTop = false;
|
|
1133
1154
|
/**
|
|
1134
1155
|
* Define if label is visible
|
|
1135
1156
|
*/
|
|
@@ -1165,11 +1186,11 @@ const MgInput = class {
|
|
|
1165
1186
|
this.renderTooltip = () => (h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, h("mg-icon", { icon: "info-circle" })));
|
|
1166
1187
|
}
|
|
1167
1188
|
watchIdentifier(newValue) {
|
|
1168
|
-
if (!
|
|
1169
|
-
throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${
|
|
1189
|
+
if (!Le(newValue)) {
|
|
1190
|
+
throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${zt(newValue)}.`);
|
|
1170
1191
|
}
|
|
1171
|
-
else if (!
|
|
1172
|
-
console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${
|
|
1192
|
+
else if (!Ot(newValue)) {
|
|
1193
|
+
console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
|
|
1173
1194
|
}
|
|
1174
1195
|
else {
|
|
1175
1196
|
this.helpTextId = `${this.identifier}-help-text`;
|
|
@@ -1191,7 +1212,7 @@ const MgInput = class {
|
|
|
1191
1212
|
}
|
|
1192
1213
|
watchTooltipPosition(newValue) {
|
|
1193
1214
|
if (!tooltipPositions.includes(newValue)) {
|
|
1194
|
-
throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${
|
|
1215
|
+
throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
1195
1216
|
}
|
|
1196
1217
|
}
|
|
1197
1218
|
watchErrorMessage(newValue) {
|
|
@@ -1234,10 +1255,12 @@ const MgInput = class {
|
|
|
1234
1255
|
ariaDescribedbyIDs.add(this.helpTextErrorId);
|
|
1235
1256
|
}
|
|
1236
1257
|
this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach(element => {
|
|
1237
|
-
if (ariaDescribedbyIDs.size)
|
|
1258
|
+
if (ariaDescribedbyIDs.size > 0) {
|
|
1238
1259
|
element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
|
|
1239
|
-
|
|
1260
|
+
}
|
|
1261
|
+
else {
|
|
1240
1262
|
element.removeAttribute('aria-describedby');
|
|
1263
|
+
}
|
|
1241
1264
|
});
|
|
1242
1265
|
}
|
|
1243
1266
|
/**
|
|
@@ -1258,8 +1281,8 @@ const MgInput = class {
|
|
|
1258
1281
|
*/
|
|
1259
1282
|
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1260
1283
|
watchLabel() {
|
|
1261
|
-
if (!
|
|
1262
|
-
throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${
|
|
1284
|
+
if (!Le(this.label)) {
|
|
1285
|
+
throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${zt(this.label)}.`);
|
|
1263
1286
|
}
|
|
1264
1287
|
else {
|
|
1265
1288
|
this.watchAriaDescribedbyIDs();
|
|
@@ -1351,7 +1374,7 @@ const MgInput = class {
|
|
|
1351
1374
|
*/
|
|
1352
1375
|
render() {
|
|
1353
1376
|
const isGroup = this.isFieldset && !this.isReadonly;
|
|
1354
|
-
return (h(Host, { key: '
|
|
1377
|
+
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 }))))));
|
|
1355
1378
|
}
|
|
1356
1379
|
get element() { return getElement(this); }
|
|
1357
1380
|
static get watchers() { return {
|
|
@@ -1369,7 +1392,7 @@ const MgInput = class {
|
|
|
1369
1392
|
"isFieldset": ["watchLabel"]
|
|
1370
1393
|
}; }
|
|
1371
1394
|
};
|
|
1372
|
-
MgInput.style =
|
|
1395
|
+
MgInput.style = mgInputCss;
|
|
1373
1396
|
|
|
1374
1397
|
/**
|
|
1375
1398
|
* List of all availables checkbox type
|
|
@@ -1396,7 +1419,6 @@ const MgInputCheckboxList = (props) => (h("ul", { class: "mg-c-input__input-grou
|
|
|
1396
1419
|
})));
|
|
1397
1420
|
|
|
1398
1421
|
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)}";
|
|
1399
|
-
const MgInputCheckboxStyle0 = mgInputCheckboxCss;
|
|
1400
1422
|
|
|
1401
1423
|
/**
|
|
1402
1424
|
* type CheckboxItem validation function
|
|
@@ -1408,8 +1430,8 @@ const isCheckboxItems = (items) => Array.isArray(items) &&
|
|
|
1408
1430
|
const MgInputCheckbox = class {
|
|
1409
1431
|
constructor(hostRef) {
|
|
1410
1432
|
registerInstance(this, hostRef);
|
|
1411
|
-
this.valueChange = createEvent(this, "value-change"
|
|
1412
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
1433
|
+
this.valueChange = createEvent(this, "value-change");
|
|
1434
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
1413
1435
|
// hasDisplayedError (triggered by blur event)
|
|
1414
1436
|
this.hasDisplayedError = false;
|
|
1415
1437
|
this.mode = 'custom';
|
|
@@ -1428,6 +1450,10 @@ const MgInputCheckbox = class {
|
|
|
1428
1450
|
* If not set the value equals the identifier
|
|
1429
1451
|
*/
|
|
1430
1452
|
this.name = this.identifier;
|
|
1453
|
+
/**
|
|
1454
|
+
* Define if label is displayed on top
|
|
1455
|
+
*/
|
|
1456
|
+
this.labelOnTop = false;
|
|
1431
1457
|
/**
|
|
1432
1458
|
* Define if label is visible
|
|
1433
1459
|
*/
|
|
@@ -1444,6 +1470,11 @@ const MgInputCheckbox = class {
|
|
|
1444
1470
|
* Define if mg-input-checkbox is readonly
|
|
1445
1471
|
*/
|
|
1446
1472
|
this.readonly = false;
|
|
1473
|
+
/**
|
|
1474
|
+
* Display selected values list in "multi" type
|
|
1475
|
+
* This prop is only applied with prop type "multi" or when an "unset" mode render a "multi" type.
|
|
1476
|
+
*/
|
|
1477
|
+
this.displaySelectedValues = false;
|
|
1447
1478
|
/**
|
|
1448
1479
|
* Define if input is disabled
|
|
1449
1480
|
*/
|
|
@@ -1455,7 +1486,7 @@ const MgInputCheckbox = class {
|
|
|
1455
1486
|
/**
|
|
1456
1487
|
* Component classes
|
|
1457
1488
|
*/
|
|
1458
|
-
this.classCollection = new
|
|
1489
|
+
this.classCollection = new kt([this.baseClassName, classFieldset]);
|
|
1459
1490
|
/**
|
|
1460
1491
|
* Formated value to display in list
|
|
1461
1492
|
*/
|
|
@@ -1573,7 +1604,7 @@ const MgInputCheckbox = class {
|
|
|
1573
1604
|
* Method to update searchResults
|
|
1574
1605
|
*/
|
|
1575
1606
|
this.updateSearchResults = () => {
|
|
1576
|
-
this.searchResults = this.checkboxItems.filter(item =>
|
|
1607
|
+
this.searchResults = this.checkboxItems.filter(item => Lt(item.title).includes(Lt(this.searchValue)));
|
|
1577
1608
|
};
|
|
1578
1609
|
/**
|
|
1579
1610
|
* Method to validate if one of inputs value is checked id required
|
|
@@ -1605,13 +1636,13 @@ const MgInputCheckbox = class {
|
|
|
1605
1636
|
* @returns message to display
|
|
1606
1637
|
*/
|
|
1607
1638
|
this.getSelectValuesButtonMessage = () => {
|
|
1608
|
-
if (this.selectValuesButtonKey === 'editButton' &&
|
|
1639
|
+
if (this.selectValuesButtonKey === 'editButton' && Le(this.editButtonMessage)) {
|
|
1609
1640
|
return this.editButtonMessage;
|
|
1610
1641
|
}
|
|
1611
|
-
else if (this.selectValuesButtonKey === 'showButton' &&
|
|
1642
|
+
else if (this.selectValuesButtonKey === 'showButton' && Le(this.showButtonMessage)) {
|
|
1612
1643
|
return this.showButtonMessage;
|
|
1613
1644
|
}
|
|
1614
|
-
else if (this.selectValuesButtonKey === 'selectButton' &&
|
|
1645
|
+
else if (this.selectValuesButtonKey === 'selectButton' && Le(this.selectButtonMessage)) {
|
|
1615
1646
|
return this.selectButtonMessage;
|
|
1616
1647
|
}
|
|
1617
1648
|
else {
|
|
@@ -1667,12 +1698,12 @@ const MgInputCheckbox = class {
|
|
|
1667
1698
|
this.valueChange.emit(newValue);
|
|
1668
1699
|
}
|
|
1669
1700
|
else {
|
|
1670
|
-
throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${
|
|
1701
|
+
throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${zt(newValue)}.`);
|
|
1671
1702
|
}
|
|
1672
1703
|
}
|
|
1673
1704
|
validateType(newValue) {
|
|
1674
1705
|
if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
|
|
1675
|
-
throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${
|
|
1706
|
+
throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${zt(newValue)}.`);
|
|
1676
1707
|
}
|
|
1677
1708
|
else if (newValue === undefined) {
|
|
1678
1709
|
this.mode = 'auto';
|
|
@@ -1772,7 +1803,7 @@ const MgInputCheckbox = class {
|
|
|
1772
1803
|
if (typeof valid !== 'boolean') {
|
|
1773
1804
|
throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean.');
|
|
1774
1805
|
}
|
|
1775
|
-
else if (!
|
|
1806
|
+
else if (!Le(errorMessage)) {
|
|
1776
1807
|
throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string.');
|
|
1777
1808
|
}
|
|
1778
1809
|
else {
|
|
@@ -1909,7 +1940,7 @@ const MgInputCheckbox = class {
|
|
|
1909
1940
|
else {
|
|
1910
1941
|
inputContent = this.renderCheckboxMulti();
|
|
1911
1942
|
}
|
|
1912
|
-
return (h("mg-input", { key: '
|
|
1943
|
+
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));
|
|
1913
1944
|
}
|
|
1914
1945
|
get element() { return getElement(this); }
|
|
1915
1946
|
static get watchers() { return {
|
|
@@ -1925,16 +1956,27 @@ const MgInputCheckbox = class {
|
|
|
1925
1956
|
"searchValue": ["validateSearchValue"]
|
|
1926
1957
|
}; }
|
|
1927
1958
|
};
|
|
1928
|
-
MgInputCheckbox.style =
|
|
1959
|
+
MgInputCheckbox.style = mgInputCheckboxCss;
|
|
1929
1960
|
|
|
1930
1961
|
const MgInputCheckboxPaginated = class {
|
|
1931
1962
|
constructor(hostRef) {
|
|
1932
1963
|
registerInstance(this, hostRef);
|
|
1933
|
-
this.massAction = createEvent(this, "mass-action"
|
|
1964
|
+
this.massAction = createEvent(this, "mass-action");
|
|
1934
1965
|
/*************
|
|
1935
1966
|
* Constantes *
|
|
1936
1967
|
*************/
|
|
1937
1968
|
this.offset = 10;
|
|
1969
|
+
/*************
|
|
1970
|
+
* Decorators *
|
|
1971
|
+
*************/
|
|
1972
|
+
/**
|
|
1973
|
+
* Define if mg-input-checkbox-list is readonly
|
|
1974
|
+
*/
|
|
1975
|
+
this.readonly = false;
|
|
1976
|
+
/**
|
|
1977
|
+
* Define if mg-input-checkbox-list is disabled
|
|
1978
|
+
*/
|
|
1979
|
+
this.disabled = false;
|
|
1938
1980
|
/**
|
|
1939
1981
|
* Current page
|
|
1940
1982
|
*/
|
|
@@ -2021,24 +2063,25 @@ const MgInputCheckboxPaginated = class {
|
|
|
2021
2063
|
* @returns HTML Element
|
|
2022
2064
|
*/
|
|
2023
2065
|
render() {
|
|
2024
|
-
const getText = (checkboxes) => (h("em", { key: '
|
|
2066
|
+
const getText = (checkboxes) => (h("em", { key: '0bf489a95090b519c85a4649d6c3b9a0e97bf0d8', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlural' : 'title']} (${checkboxes.length})`));
|
|
2025
2067
|
const [from, to] = this.getFromToIndexes();
|
|
2026
2068
|
const itemsContainerId = `items-${this.sectionKind}-container`;
|
|
2027
|
-
return (h(Host, { key: '
|
|
2069
|
+
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 }))));
|
|
2028
2070
|
}
|
|
2029
2071
|
static get watchers() { return {
|
|
2030
2072
|
"checkboxes": ["watchCheckboxes"]
|
|
2031
2073
|
}; }
|
|
2032
2074
|
};
|
|
2033
2075
|
|
|
2076
|
+
const DEFAULT_MAX_DATE = '9999-12-31';
|
|
2077
|
+
|
|
2034
2078
|
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}}";
|
|
2035
|
-
const MgInputDateStyle0 = mgInputDateCss;
|
|
2036
2079
|
|
|
2037
2080
|
const MgInputDate = class {
|
|
2038
2081
|
constructor(hostRef) {
|
|
2039
2082
|
registerInstance(this, hostRef);
|
|
2040
|
-
this.valueChange = createEvent(this, "value-change"
|
|
2041
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
2083
|
+
this.valueChange = createEvent(this, "value-change");
|
|
2084
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
2042
2085
|
// hasDisplayedError (triggered by blur event)
|
|
2043
2086
|
this.hasDisplayedError = false;
|
|
2044
2087
|
/**
|
|
@@ -2046,6 +2089,10 @@ const MgInputDate = class {
|
|
|
2046
2089
|
* If not set the value equals the identifier
|
|
2047
2090
|
*/
|
|
2048
2091
|
this.name = this.identifier;
|
|
2092
|
+
/**
|
|
2093
|
+
* Define if label is displayed on top
|
|
2094
|
+
*/
|
|
2095
|
+
this.labelOnTop = false;
|
|
2049
2096
|
/**
|
|
2050
2097
|
* Define if label is visible
|
|
2051
2098
|
*/
|
|
@@ -2062,7 +2109,7 @@ const MgInputDate = class {
|
|
|
2062
2109
|
* Define input maximum date
|
|
2063
2110
|
* format: yyyy-mm-dd
|
|
2064
2111
|
*/
|
|
2065
|
-
this.max = '9999-12-31';
|
|
2112
|
+
this.max = '9999-12-31'; // Hardcoded value matching DEFAULT_MAX_DATE for documentation
|
|
2066
2113
|
/**
|
|
2067
2114
|
* Define if input is disabled
|
|
2068
2115
|
*/
|
|
@@ -2074,24 +2121,49 @@ const MgInputDate = class {
|
|
|
2074
2121
|
/**
|
|
2075
2122
|
* Component classes
|
|
2076
2123
|
*/
|
|
2077
|
-
this.classCollection = new
|
|
2124
|
+
this.classCollection = new kt(['mg-c-input--date']);
|
|
2078
2125
|
/**
|
|
2079
2126
|
* Method to validate date pattern string
|
|
2080
2127
|
* @param value - value to test
|
|
2081
2128
|
* @returns truthy when value match the pattern
|
|
2082
2129
|
*/
|
|
2083
|
-
this.isValidPattern = (value) =>
|
|
2130
|
+
this.isValidPattern = (value) => Le(value) && wt.test(value);
|
|
2084
2131
|
/**
|
|
2085
2132
|
* Format help text to display
|
|
2086
2133
|
* @param helpText - help text format
|
|
2087
2134
|
* @returns formated pattern help text. Ex: Format attendu : jj/mm/aaaa (ex : 20/12/2020)
|
|
2088
2135
|
*/
|
|
2089
2136
|
this.formatHelpText = (helpText) => {
|
|
2137
|
+
var _a, _b;
|
|
2138
|
+
// If the component is in readonly mode, return directly because the message will not be rendered
|
|
2139
|
+
if (this.readonly) {
|
|
2140
|
+
return undefined;
|
|
2141
|
+
}
|
|
2090
2142
|
const defaultHelpTextVariable = '{defaultHelpText}';
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2143
|
+
// If a custom helpText is provided, store it but don't return it directly
|
|
2144
|
+
let text = Le(helpText) ? helpText : this.messages.input.date.helpText.expectedFormat;
|
|
2145
|
+
// Handle defaultHelpText
|
|
2146
|
+
if (text.includes(defaultHelpTextVariable)) {
|
|
2147
|
+
text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText.expectedFormat));
|
|
2148
|
+
}
|
|
2149
|
+
// Replace pattern and date variables
|
|
2150
|
+
text = text.replace('{pattern}', this.renderPattern()).replace('{date}', Et(Ht(new Date('2025-12-24')), this.systemLocale));
|
|
2151
|
+
// Add additional message for min/max if necessary
|
|
2152
|
+
let rangeMessage;
|
|
2153
|
+
if (((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
|
|
2154
|
+
rangeMessage = this.messages.input.date.helpText.minMax.replace('{min}', Et(this.min, this.systemLocale)).replace('{max}', Et(this.max, this.systemLocale));
|
|
2155
|
+
}
|
|
2156
|
+
else if (((_b = this.min) === null || _b === void 0 ? void 0 : _b.length) > 0) {
|
|
2157
|
+
rangeMessage = this.messages.input.date.helpText.min.replace('{min}', Et(this.min, this.systemLocale));
|
|
2158
|
+
}
|
|
2159
|
+
else if (this.max !== DEFAULT_MAX_DATE) {
|
|
2160
|
+
rangeMessage = this.messages.input.date.helpText.max.replace('{max}', Et(this.max, this.systemLocale));
|
|
2161
|
+
}
|
|
2162
|
+
// Combine custom helpText with range message if both exist
|
|
2163
|
+
if (text !== undefined && rangeMessage !== undefined) {
|
|
2164
|
+
return `${text}<br>${rangeMessage}`;
|
|
2165
|
+
}
|
|
2166
|
+
return text;
|
|
2095
2167
|
};
|
|
2096
2168
|
/**
|
|
2097
2169
|
* Handle input event
|
|
@@ -2141,28 +2213,27 @@ const MgInputDate = class {
|
|
|
2141
2213
|
*/
|
|
2142
2214
|
this.getInputError = () => {
|
|
2143
2215
|
var _a;
|
|
2144
|
-
let inputError = null;
|
|
2145
2216
|
// bad input or pattern
|
|
2146
2217
|
if (this.input.validity.badInput || (this.value && !this.isValidPattern(this.value))) {
|
|
2147
|
-
|
|
2218
|
+
return 'badInput';
|
|
2148
2219
|
}
|
|
2149
2220
|
// required
|
|
2150
|
-
|
|
2151
|
-
|
|
2221
|
+
if (this.input.validity.valueMissing) {
|
|
2222
|
+
return 'required';
|
|
2152
2223
|
}
|
|
2153
2224
|
// min & max
|
|
2154
|
-
|
|
2155
|
-
|
|
2225
|
+
if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
|
|
2226
|
+
return 'minMax';
|
|
2156
2227
|
}
|
|
2157
2228
|
// min
|
|
2158
|
-
|
|
2159
|
-
|
|
2229
|
+
if (this.input.validity.rangeUnderflow) {
|
|
2230
|
+
return 'min';
|
|
2160
2231
|
}
|
|
2161
2232
|
// max
|
|
2162
|
-
|
|
2163
|
-
|
|
2233
|
+
if (this.input.validity.rangeOverflow) {
|
|
2234
|
+
return 'max';
|
|
2164
2235
|
}
|
|
2165
|
-
return
|
|
2236
|
+
return null;
|
|
2166
2237
|
};
|
|
2167
2238
|
/**
|
|
2168
2239
|
* Check input errors
|
|
@@ -2182,14 +2253,16 @@ const MgInputDate = class {
|
|
|
2182
2253
|
}
|
|
2183
2254
|
// min, max & minMax
|
|
2184
2255
|
else if (['min', 'max', 'minMax'].includes(inputError)) {
|
|
2185
|
-
this.errorMessage = this.messages.
|
|
2186
|
-
.replace('{min}',
|
|
2187
|
-
.replace('{max}',
|
|
2256
|
+
this.errorMessage = this.messages.input.date.helpText[inputError]
|
|
2257
|
+
.replace('{min}', Et(this.min, this.systemLocale))
|
|
2258
|
+
.replace('{max}', Et(this.max, this.systemLocale));
|
|
2188
2259
|
}
|
|
2189
2260
|
// wrong date format
|
|
2190
2261
|
// element.validity.badInput is default error message
|
|
2191
2262
|
else {
|
|
2192
|
-
this.errorMessage = this.messages.
|
|
2263
|
+
this.errorMessage = this.messages.input.date.error.badInput
|
|
2264
|
+
.replace('{pattern}', this.renderPattern())
|
|
2265
|
+
.replace('{date}', Et(Ht(new Date('2025-12-24')), this.systemLocale));
|
|
2193
2266
|
}
|
|
2194
2267
|
}
|
|
2195
2268
|
};
|
|
@@ -2198,7 +2271,7 @@ const MgInputDate = class {
|
|
|
2198
2271
|
* @returns translated html pattern
|
|
2199
2272
|
*/
|
|
2200
2273
|
this.renderPattern = () => {
|
|
2201
|
-
let patternLocal =
|
|
2274
|
+
let patternLocal = Bt(this.systemLocale);
|
|
2202
2275
|
for (const key in this.messages.input.date.pattern) {
|
|
2203
2276
|
patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
|
|
2204
2277
|
}
|
|
@@ -2213,9 +2286,9 @@ const MgInputDate = class {
|
|
|
2213
2286
|
// - `undefined` is not allowed in CustomEvent['detail']
|
|
2214
2287
|
this.value = null;
|
|
2215
2288
|
}
|
|
2216
|
-
else if (newValue && !
|
|
2289
|
+
else if (newValue && !Le(newValue)) {
|
|
2217
2290
|
// check value validity
|
|
2218
|
-
throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${
|
|
2291
|
+
throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${zt(newValue)}.`);
|
|
2219
2292
|
}
|
|
2220
2293
|
else if (newValue === null || this.isValidPattern(newValue)) {
|
|
2221
2294
|
this.valueChange.emit(newValue);
|
|
@@ -2232,7 +2305,7 @@ const MgInputDate = class {
|
|
|
2232
2305
|
}
|
|
2233
2306
|
validateMinMax(newValue) {
|
|
2234
2307
|
if (newValue && !this.isValidPattern(newValue)) {
|
|
2235
|
-
throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${
|
|
2308
|
+
throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${zt(newValue)}.`);
|
|
2236
2309
|
}
|
|
2237
2310
|
}
|
|
2238
2311
|
handleValidityChange(newValue, _oldValue, prop) {
|
|
@@ -2282,7 +2355,7 @@ const MgInputDate = class {
|
|
|
2282
2355
|
if (typeof valid !== 'boolean') {
|
|
2283
2356
|
throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean.');
|
|
2284
2357
|
}
|
|
2285
|
-
else if (!
|
|
2358
|
+
else if (!Le(errorMessage)) {
|
|
2286
2359
|
throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string.');
|
|
2287
2360
|
}
|
|
2288
2361
|
else {
|
|
@@ -2348,7 +2421,7 @@ const MgInputDate = class {
|
|
|
2348
2421
|
* @returns HTML Element
|
|
2349
2422
|
*/
|
|
2350
2423
|
render() {
|
|
2351
|
-
return (h("mg-input", { key: '
|
|
2424
|
+
return (h("mg-input", { key: 'cd165b83782c74dab134a1315edd000ea3a9277b', 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" }, Et(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) => {
|
|
2352
2425
|
if (el !== null)
|
|
2353
2426
|
this.input = el;
|
|
2354
2427
|
} }))));
|
|
@@ -2363,7 +2436,7 @@ const MgInputDate = class {
|
|
|
2363
2436
|
"disabled": ["handleValidityChange", "watchDisabled"]
|
|
2364
2437
|
}; }
|
|
2365
2438
|
};
|
|
2366
|
-
MgInputDate.style =
|
|
2439
|
+
MgInputDate.style = mgInputDateCss;
|
|
2367
2440
|
|
|
2368
2441
|
/**
|
|
2369
2442
|
* List of all possibles types
|
|
@@ -2372,13 +2445,12 @@ const types = ['decimal', 'integer'];
|
|
|
2372
2445
|
const formats = ['none', 'number', 'currency', 'percent', 'unit'];
|
|
2373
2446
|
|
|
2374
2447
|
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)}";
|
|
2375
|
-
const MgInputNumericStyle0 = mgInputNumericCss;
|
|
2376
2448
|
|
|
2377
2449
|
const MgInputNumeric = class {
|
|
2378
2450
|
constructor(hostRef) {
|
|
2379
2451
|
registerInstance(this, hostRef);
|
|
2380
|
-
this.valueChange = createEvent(this, "value-change"
|
|
2381
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
2452
|
+
this.valueChange = createEvent(this, "value-change");
|
|
2453
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
2382
2454
|
// hasDisplayedError (triggered by blur event)
|
|
2383
2455
|
this.hasDisplayedError = false;
|
|
2384
2456
|
/**
|
|
@@ -2386,6 +2458,10 @@ const MgInputNumeric = class {
|
|
|
2386
2458
|
* If not set the value equals the identifier
|
|
2387
2459
|
*/
|
|
2388
2460
|
this.name = this.identifier;
|
|
2461
|
+
/**
|
|
2462
|
+
* Define if label is displayed on top
|
|
2463
|
+
*/
|
|
2464
|
+
this.labelOnTop = false;
|
|
2389
2465
|
/**
|
|
2390
2466
|
* Define if label is visible
|
|
2391
2467
|
*/
|
|
@@ -2436,7 +2512,7 @@ const MgInputNumeric = class {
|
|
|
2436
2512
|
/**
|
|
2437
2513
|
* Component classes
|
|
2438
2514
|
*/
|
|
2439
|
-
this.classCollection = new
|
|
2515
|
+
this.classCollection = new kt(['mg-c-input--numeric']);
|
|
2440
2516
|
/**
|
|
2441
2517
|
* Handle input event
|
|
2442
2518
|
*/
|
|
@@ -2479,7 +2555,7 @@ const MgInputNumeric = class {
|
|
|
2479
2555
|
* @param value - value to format
|
|
2480
2556
|
* @returns formatted value according to locale
|
|
2481
2557
|
*/
|
|
2482
|
-
this.formatErrorValue = (value) =>
|
|
2558
|
+
this.formatErrorValue = (value) => Gt(value, this.locale, !Number.isInteger(value) && this.type === 'decimal' ? this.decimalLength : 0);
|
|
2483
2559
|
/**
|
|
2484
2560
|
* Set input error message
|
|
2485
2561
|
* @param errorMessage - errorMessage override
|
|
@@ -2498,7 +2574,7 @@ const MgInputNumeric = class {
|
|
|
2498
2574
|
else {
|
|
2499
2575
|
const formattedMin = this.formatErrorValue(this.min);
|
|
2500
2576
|
const formattedMax = this.formatErrorValue(this.max);
|
|
2501
|
-
this.errorMessage = this.messages.
|
|
2577
|
+
this.errorMessage = this.messages.input.numeric.helpText[inputError].replace('{min}', formattedMin).replace('{max}', formattedMax);
|
|
2502
2578
|
}
|
|
2503
2579
|
}
|
|
2504
2580
|
};
|
|
@@ -2507,26 +2583,24 @@ const MgInputNumeric = class {
|
|
|
2507
2583
|
* @returns error code
|
|
2508
2584
|
*/
|
|
2509
2585
|
this.getInputError = () => {
|
|
2510
|
-
let inputError = null;
|
|
2511
2586
|
const hasNotEmptyValues = (toControl) => !toControl.some(value => [null, undefined].includes(value));
|
|
2512
2587
|
// required
|
|
2513
2588
|
if (!this.input.checkValidity() && this.input.validity.valueMissing) {
|
|
2514
|
-
|
|
2589
|
+
return 'required';
|
|
2515
2590
|
}
|
|
2516
|
-
//
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
inputError = 'min';
|
|
2591
|
+
// Only a min value is set
|
|
2592
|
+
if (hasNotEmptyValues([this.min, this.numericValue]) && this.numericValue < this.min && this.max === undefined) {
|
|
2593
|
+
return 'min';
|
|
2520
2594
|
}
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2595
|
+
// Only a max value is set
|
|
2596
|
+
if (hasNotEmptyValues([this.max, this.numericValue]) && this.numericValue > this.max && this.min === undefined) {
|
|
2597
|
+
return 'max';
|
|
2524
2598
|
}
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2599
|
+
// both min and max values are set
|
|
2600
|
+
if (hasNotEmptyValues([this.min, this.max, this.numericValue]) && (this.numericValue < this.min || this.numericValue > this.max)) {
|
|
2601
|
+
return 'minMax';
|
|
2528
2602
|
}
|
|
2529
|
-
return
|
|
2603
|
+
return null;
|
|
2530
2604
|
};
|
|
2531
2605
|
/**
|
|
2532
2606
|
* Format value based on type
|
|
@@ -2536,13 +2610,13 @@ const MgInputNumeric = class {
|
|
|
2536
2610
|
this.formatValue = (value) => {
|
|
2537
2611
|
switch (this.format) {
|
|
2538
2612
|
case 'number':
|
|
2539
|
-
return
|
|
2613
|
+
return Gt(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2540
2614
|
case 'currency':
|
|
2541
|
-
return
|
|
2615
|
+
return Pt(value, this.locale, this.currency);
|
|
2542
2616
|
case 'percent':
|
|
2543
|
-
return
|
|
2617
|
+
return Wt(value / 100, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2544
2618
|
case 'unit':
|
|
2545
|
-
return
|
|
2619
|
+
return Xt(value, this.locale, this.unit, this.unitDisplay, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2546
2620
|
case 'none':
|
|
2547
2621
|
return value.toString();
|
|
2548
2622
|
}
|
|
@@ -2562,6 +2636,41 @@ const MgInputNumeric = class {
|
|
|
2562
2636
|
}
|
|
2563
2637
|
}
|
|
2564
2638
|
};
|
|
2639
|
+
/**
|
|
2640
|
+
* Format help text to display
|
|
2641
|
+
* @param helpText - help text format
|
|
2642
|
+
* @returns formatted help text with range information if applicable
|
|
2643
|
+
*/
|
|
2644
|
+
this.formatHelpText = (helpText) => {
|
|
2645
|
+
// If the component is in readonly mode, return undefined because the message will not be rendered
|
|
2646
|
+
if (this.readonly) {
|
|
2647
|
+
return undefined;
|
|
2648
|
+
}
|
|
2649
|
+
// If a custom helpText is provided, store it but don't return it directly
|
|
2650
|
+
const text = Le(helpText) ? helpText : undefined;
|
|
2651
|
+
// If neither min nor max are defined, and there's no custom helpText,
|
|
2652
|
+
// we can return undefined as there's no message to display
|
|
2653
|
+
if (this.min === undefined && this.max === undefined && text === undefined) {
|
|
2654
|
+
return undefined;
|
|
2655
|
+
}
|
|
2656
|
+
// Generate range message based on available constraints
|
|
2657
|
+
let rangeMessage;
|
|
2658
|
+
if (this.min !== undefined && this.max !== undefined) {
|
|
2659
|
+
rangeMessage = this.messages.input.numeric.helpText.minMax.replace('{min}', this.formatErrorValue(this.min)).replace('{max}', this.formatErrorValue(this.max));
|
|
2660
|
+
}
|
|
2661
|
+
else if (this.min !== undefined) {
|
|
2662
|
+
rangeMessage = this.messages.input.numeric.helpText.min.replace('{min}', this.formatErrorValue(this.min));
|
|
2663
|
+
}
|
|
2664
|
+
else if (this.max !== undefined) {
|
|
2665
|
+
rangeMessage = this.messages.input.numeric.helpText.max.replace('{max}', this.formatErrorValue(this.max));
|
|
2666
|
+
}
|
|
2667
|
+
// Combine custom helpText with range message if both exist
|
|
2668
|
+
if (text !== undefined && rangeMessage !== undefined) {
|
|
2669
|
+
return `${text}<br>${rangeMessage}`;
|
|
2670
|
+
}
|
|
2671
|
+
// Return either custom helpText or range message
|
|
2672
|
+
return text || rangeMessage;
|
|
2673
|
+
};
|
|
2565
2674
|
/**
|
|
2566
2675
|
* Renders the readonly content of the input component.
|
|
2567
2676
|
* @returns The readonly content element.
|
|
@@ -2571,18 +2680,19 @@ const MgInputNumeric = class {
|
|
|
2571
2680
|
};
|
|
2572
2681
|
}
|
|
2573
2682
|
validateValue(newValue) {
|
|
2683
|
+
var _a;
|
|
2574
2684
|
// has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type
|
|
2575
2685
|
if (typeof newValue === 'string') {
|
|
2576
2686
|
// Split number and decimal
|
|
2577
2687
|
const [integer, decimal = ''] = newValue.replace('-', '').split(/[.,]/);
|
|
2578
2688
|
// Regex
|
|
2579
|
-
const regex = this.type === 'integer' ?
|
|
2689
|
+
const regex = this.type === 'integer' ? /^(?!-?0\d)-?\d+$/ : /^(?!-?0\d)-?\d+(?:[.,]\d*)?$/;
|
|
2580
2690
|
// Filter input
|
|
2581
2691
|
if (this.isValidValue(newValue, regex, integer, decimal)) {
|
|
2582
2692
|
this.storedValue = newValue;
|
|
2583
2693
|
}
|
|
2584
2694
|
else {
|
|
2585
|
-
newValue = this.
|
|
2695
|
+
newValue = (_a = this.storedValue) !== null && _a !== void 0 ? _a : null;
|
|
2586
2696
|
}
|
|
2587
2697
|
// Set value and input value
|
|
2588
2698
|
this.updateValues(newValue);
|
|
@@ -2621,22 +2731,22 @@ const MgInputNumeric = class {
|
|
|
2621
2731
|
}
|
|
2622
2732
|
validateType(newValue) {
|
|
2623
2733
|
if (!types.includes(newValue)) {
|
|
2624
|
-
throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${
|
|
2734
|
+
throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
2625
2735
|
}
|
|
2626
2736
|
}
|
|
2627
2737
|
watchFormat(newValue) {
|
|
2628
2738
|
if (!formats.includes(newValue)) {
|
|
2629
|
-
throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${
|
|
2739
|
+
throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
2630
2740
|
}
|
|
2631
2741
|
}
|
|
2632
2742
|
validateIntegerLength(newValue) {
|
|
2633
2743
|
if (newValue < 1) {
|
|
2634
|
-
throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${
|
|
2744
|
+
throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${zt(newValue)}.`);
|
|
2635
2745
|
}
|
|
2636
2746
|
}
|
|
2637
2747
|
validateDecimalLength(newValue) {
|
|
2638
2748
|
if (newValue < 1) {
|
|
2639
|
-
throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${
|
|
2749
|
+
throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${zt(newValue)}.`);
|
|
2640
2750
|
}
|
|
2641
2751
|
}
|
|
2642
2752
|
/**
|
|
@@ -2670,7 +2780,7 @@ const MgInputNumeric = class {
|
|
|
2670
2780
|
if (typeof valid !== 'boolean') {
|
|
2671
2781
|
throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean.');
|
|
2672
2782
|
}
|
|
2673
|
-
else if (!
|
|
2783
|
+
else if (!Le(errorMessage)) {
|
|
2674
2784
|
throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string.');
|
|
2675
2785
|
}
|
|
2676
2786
|
else {
|
|
@@ -2713,24 +2823,19 @@ const MgInputNumeric = class {
|
|
|
2713
2823
|
isValidValue(value, regex, integer, decimal) {
|
|
2714
2824
|
return (['', '-'].includes(value) || (regex.exec(value) !== null && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength)));
|
|
2715
2825
|
}
|
|
2716
|
-
/**
|
|
2717
|
-
* Handles invalid input values and returns a corrected value.
|
|
2718
|
-
* @returns The corrected value.
|
|
2719
|
-
*/
|
|
2720
|
-
handleInvalidValue() {
|
|
2721
|
-
var _a;
|
|
2722
|
-
return (_a = this.storedValue) !== null && _a !== void 0 ? _a : null;
|
|
2723
|
-
}
|
|
2724
2826
|
/**
|
|
2725
2827
|
* Updates the component values based on the validated input value.
|
|
2726
2828
|
* @param newValue - The validated input value.
|
|
2727
2829
|
*/
|
|
2728
2830
|
updateValues(newValue) {
|
|
2729
2831
|
this.value = newValue;
|
|
2730
|
-
if (this.input !== undefined)
|
|
2832
|
+
if (this.input !== undefined) {
|
|
2731
2833
|
this.input.value = this.value;
|
|
2732
|
-
|
|
2733
|
-
this.
|
|
2834
|
+
}
|
|
2835
|
+
this.numericValue = !['', null].includes(this.value) && !isNaN(parseFloat(this.value)) ? parseFloat(this.value.replace(',', '.')) : null;
|
|
2836
|
+
if (newValue === null || (newValue === this.storedValue && !Object.is(this.numericValue, -0))) {
|
|
2837
|
+
this.valueChange.emit(this.numericValue);
|
|
2838
|
+
}
|
|
2734
2839
|
this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
|
|
2735
2840
|
}
|
|
2736
2841
|
/**
|
|
@@ -2776,7 +2881,7 @@ const MgInputNumeric = class {
|
|
|
2776
2881
|
* @returns HTML Element
|
|
2777
2882
|
*/
|
|
2778
2883
|
render() {
|
|
2779
|
-
return (h("mg-input", { key: '
|
|
2884
|
+
return (h("mg-input", { key: '323e6dcdd6c2c416bfcbfa868f0fd685880f45be', 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
|
|
2780
2885
|
? this.readonlyValue && this.renderReadonly()
|
|
2781
2886
|
: [
|
|
2782
2887
|
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) => {
|
|
@@ -2801,16 +2906,15 @@ const MgInputNumeric = class {
|
|
|
2801
2906
|
"decimalLength": ["validateDecimalLength"]
|
|
2802
2907
|
}; }
|
|
2803
2908
|
};
|
|
2804
|
-
MgInputNumeric.style =
|
|
2909
|
+
MgInputNumeric.style = mgInputNumericCss;
|
|
2805
2910
|
|
|
2806
2911
|
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}";
|
|
2807
|
-
const MgInputPasswordStyle0 = mgInputPasswordCss;
|
|
2808
2912
|
|
|
2809
2913
|
const MgInputPassword = class {
|
|
2810
2914
|
constructor(hostRef) {
|
|
2811
2915
|
registerInstance(this, hostRef);
|
|
2812
|
-
this.valueChange = createEvent(this, "value-change"
|
|
2813
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
2916
|
+
this.valueChange = createEvent(this, "value-change");
|
|
2917
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
2814
2918
|
// hasDisplayedError (triggered by blur event)
|
|
2815
2919
|
this.hasDisplayedError = false;
|
|
2816
2920
|
/**
|
|
@@ -2818,6 +2922,10 @@ const MgInputPassword = class {
|
|
|
2818
2922
|
* If not set the value equals the identifier
|
|
2819
2923
|
*/
|
|
2820
2924
|
this.name = this.identifier;
|
|
2925
|
+
/**
|
|
2926
|
+
* Define if label is displayed on top
|
|
2927
|
+
*/
|
|
2928
|
+
this.labelOnTop = false;
|
|
2821
2929
|
/**
|
|
2822
2930
|
* Define if label is visible
|
|
2823
2931
|
*/
|
|
@@ -2845,7 +2953,7 @@ const MgInputPassword = class {
|
|
|
2845
2953
|
/**
|
|
2846
2954
|
* Component classes
|
|
2847
2955
|
*/
|
|
2848
|
-
this.classCollection = new
|
|
2956
|
+
this.classCollection = new kt(['mg-c-input--password']);
|
|
2849
2957
|
/**
|
|
2850
2958
|
* Indicates if password is displayed or not
|
|
2851
2959
|
*/
|
|
@@ -2965,7 +3073,7 @@ const MgInputPassword = class {
|
|
|
2965
3073
|
if (typeof valid !== 'boolean') {
|
|
2966
3074
|
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean.');
|
|
2967
3075
|
}
|
|
2968
|
-
else if (!
|
|
3076
|
+
else if (!Le(errorMessage)) {
|
|
2969
3077
|
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string.');
|
|
2970
3078
|
}
|
|
2971
3079
|
else {
|
|
@@ -3022,7 +3130,7 @@ const MgInputPassword = class {
|
|
|
3022
3130
|
* @returns HTML Element
|
|
3023
3131
|
*/
|
|
3024
3132
|
render() {
|
|
3025
|
-
return (h("mg-input", { key: '
|
|
3133
|
+
return (h("mg-input", { key: '7ee11e7f8788011f24bee13f379c6c07766ee37f', 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) => {
|
|
3026
3134
|
if (el !== null)
|
|
3027
3135
|
this.input = el;
|
|
3028
3136
|
} }), 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' }))))));
|
|
@@ -3036,10 +3144,9 @@ const MgInputPassword = class {
|
|
|
3036
3144
|
"mgWidth": ["watchMgWidth"]
|
|
3037
3145
|
}; }
|
|
3038
3146
|
};
|
|
3039
|
-
MgInputPassword.style =
|
|
3147
|
+
MgInputPassword.style = mgInputPasswordCss;
|
|
3040
3148
|
|
|
3041
3149
|
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}}";
|
|
3042
|
-
const MgInputRadioStyle0 = mgInputRadioCss;
|
|
3043
3150
|
|
|
3044
3151
|
/**
|
|
3045
3152
|
* type Option validation function
|
|
@@ -3050,8 +3157,8 @@ const isOption$3 = (option) => typeof option === 'object' && typeof option.title
|
|
|
3050
3157
|
const MgInputRadio = class {
|
|
3051
3158
|
constructor(hostRef) {
|
|
3052
3159
|
registerInstance(this, hostRef);
|
|
3053
|
-
this.valueChange = createEvent(this, "value-change"
|
|
3054
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
3160
|
+
this.valueChange = createEvent(this, "value-change");
|
|
3161
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
3055
3162
|
/************
|
|
3056
3163
|
* Internal *
|
|
3057
3164
|
************/
|
|
@@ -3097,7 +3204,7 @@ const MgInputRadio = class {
|
|
|
3097
3204
|
/**
|
|
3098
3205
|
* Component classes
|
|
3099
3206
|
*/
|
|
3100
|
-
this.classCollection = new
|
|
3207
|
+
this.classCollection = new kt(['mg-c-input--radio', classFieldset]);
|
|
3101
3208
|
/**
|
|
3102
3209
|
* Handle input event
|
|
3103
3210
|
* @param event - input event
|
|
@@ -3148,7 +3255,7 @@ const MgInputRadio = class {
|
|
|
3148
3255
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3149
3256
|
watchValue(newValue) {
|
|
3150
3257
|
var _a;
|
|
3151
|
-
if (
|
|
3258
|
+
if (At(this.items) && typeof newValue === 'string') {
|
|
3152
3259
|
this.readonlyValue = newValue;
|
|
3153
3260
|
}
|
|
3154
3261
|
else if (Array.isArray(this.items) && this.items.every(isOption$3)) {
|
|
@@ -3162,10 +3269,10 @@ const MgInputRadio = class {
|
|
|
3162
3269
|
validateItems(newValue) {
|
|
3163
3270
|
// Validate if items have required min length
|
|
3164
3271
|
if (typeof newValue === 'object' && newValue.length < 2) {
|
|
3165
|
-
throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${
|
|
3272
|
+
throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${zt(newValue)}.`);
|
|
3166
3273
|
}
|
|
3167
3274
|
// String array
|
|
3168
|
-
else if (
|
|
3275
|
+
else if (At(newValue)) {
|
|
3169
3276
|
this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
|
|
3170
3277
|
}
|
|
3171
3278
|
// Object array
|
|
@@ -3173,7 +3280,7 @@ const MgInputRadio = class {
|
|
|
3173
3280
|
this.options = newValue;
|
|
3174
3281
|
}
|
|
3175
3282
|
else {
|
|
3176
|
-
throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${
|
|
3283
|
+
throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${zt(newValue)}.`);
|
|
3177
3284
|
}
|
|
3178
3285
|
}
|
|
3179
3286
|
watchInputVerticalList(newValue) {
|
|
@@ -3235,7 +3342,7 @@ const MgInputRadio = class {
|
|
|
3235
3342
|
if (typeof valid !== 'boolean') {
|
|
3236
3343
|
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean.');
|
|
3237
3344
|
}
|
|
3238
|
-
else if (!
|
|
3345
|
+
else if (!Le(errorMessage)) {
|
|
3239
3346
|
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string.');
|
|
3240
3347
|
}
|
|
3241
3348
|
else {
|
|
@@ -3310,10 +3417,9 @@ const MgInputRadio = class {
|
|
|
3310
3417
|
"disabled": ["handleValidityChange", "watchDisabled"]
|
|
3311
3418
|
}; }
|
|
3312
3419
|
};
|
|
3313
|
-
MgInputRadio.style =
|
|
3420
|
+
MgInputRadio.style = mgInputRadioCss;
|
|
3314
3421
|
|
|
3315
3422
|
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%}}";
|
|
3316
|
-
const MgInputSelectStyle0 = mgInputSelectCss;
|
|
3317
3423
|
|
|
3318
3424
|
/**
|
|
3319
3425
|
* Check if item is a well configured option
|
|
@@ -3360,8 +3466,8 @@ const groupOptions = (acc, { group, title, value, disabled }) => {
|
|
|
3360
3466
|
const MgInputSelect = class {
|
|
3361
3467
|
constructor(hostRef) {
|
|
3362
3468
|
registerInstance(this, hostRef);
|
|
3363
|
-
this.valueChange = createEvent(this, "value-change"
|
|
3364
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
3469
|
+
this.valueChange = createEvent(this, "value-change");
|
|
3470
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
3365
3471
|
// hasDisplayedError (triggered by blur event)
|
|
3366
3472
|
this.hasDisplayedError = false;
|
|
3367
3473
|
/**
|
|
@@ -3369,6 +3475,10 @@ const MgInputSelect = class {
|
|
|
3369
3475
|
* If not set the value equals the identifier
|
|
3370
3476
|
*/
|
|
3371
3477
|
this.name = this.identifier;
|
|
3478
|
+
/**
|
|
3479
|
+
* Define if label is displayed on top
|
|
3480
|
+
*/
|
|
3481
|
+
this.labelOnTop = false;
|
|
3372
3482
|
/**
|
|
3373
3483
|
* Define if label is visible
|
|
3374
3484
|
*/
|
|
@@ -3400,7 +3510,7 @@ const MgInputSelect = class {
|
|
|
3400
3510
|
/**
|
|
3401
3511
|
* Component classes
|
|
3402
3512
|
*/
|
|
3403
|
-
this.classCollection = new
|
|
3513
|
+
this.classCollection = new kt(['mg-c-input--select']);
|
|
3404
3514
|
/**
|
|
3405
3515
|
* Handle input event
|
|
3406
3516
|
*/
|
|
@@ -3430,7 +3540,7 @@ const MgInputSelect = class {
|
|
|
3430
3540
|
if (this.input.value === '') {
|
|
3431
3541
|
this.setValue(null);
|
|
3432
3542
|
}
|
|
3433
|
-
else if (
|
|
3543
|
+
else if (At(this.items) && this.items.includes(this.input.value)) {
|
|
3434
3544
|
this.setValue(this.input.value);
|
|
3435
3545
|
}
|
|
3436
3546
|
else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
|
|
@@ -3488,7 +3598,7 @@ const MgInputSelect = class {
|
|
|
3488
3598
|
}
|
|
3489
3599
|
validateValue(newValue) {
|
|
3490
3600
|
var _a, _b;
|
|
3491
|
-
if (
|
|
3601
|
+
if (At(this.items) && typeof newValue === 'string') {
|
|
3492
3602
|
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== undefined ? this.input.value : newValue;
|
|
3493
3603
|
}
|
|
3494
3604
|
else if (allItemsAreOptions(this.items)) {
|
|
@@ -3505,7 +3615,7 @@ const MgInputSelect = class {
|
|
|
3505
3615
|
this.options = [];
|
|
3506
3616
|
}
|
|
3507
3617
|
// String array
|
|
3508
|
-
else if (
|
|
3618
|
+
else if (At(newValue)) {
|
|
3509
3619
|
if (typeof this.value === 'string')
|
|
3510
3620
|
this.valueExist = newValue.includes(this.value);
|
|
3511
3621
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
@@ -3523,7 +3633,7 @@ const MgInputSelect = class {
|
|
|
3523
3633
|
}
|
|
3524
3634
|
}
|
|
3525
3635
|
else {
|
|
3526
|
-
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: ${
|
|
3636
|
+
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: ${zt(newValue)}.`);
|
|
3527
3637
|
}
|
|
3528
3638
|
}
|
|
3529
3639
|
watchReadonly(newValue) {
|
|
@@ -3588,7 +3698,7 @@ const MgInputSelect = class {
|
|
|
3588
3698
|
if (typeof valid !== 'boolean') {
|
|
3589
3699
|
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean.');
|
|
3590
3700
|
}
|
|
3591
|
-
else if (!
|
|
3701
|
+
else if (!Le(errorMessage)) {
|
|
3592
3702
|
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string.');
|
|
3593
3703
|
}
|
|
3594
3704
|
else {
|
|
@@ -3652,7 +3762,7 @@ const MgInputSelect = class {
|
|
|
3652
3762
|
* @returns HTML Element
|
|
3653
3763
|
*/
|
|
3654
3764
|
render() {
|
|
3655
|
-
return (h("mg-input", { key: '
|
|
3765
|
+
return (h("mg-input", { key: '29773c7b59849212a3ab91b3ec1b7070e9c22a66', 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) => {
|
|
3656
3766
|
if (el !== null)
|
|
3657
3767
|
this.input = el;
|
|
3658
3768
|
} }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
@@ -3668,10 +3778,17 @@ const MgInputSelect = class {
|
|
|
3668
3778
|
"mgWidth": ["watchMgWidth"]
|
|
3669
3779
|
}; }
|
|
3670
3780
|
};
|
|
3671
|
-
MgInputSelect.style =
|
|
3781
|
+
MgInputSelect.style = mgInputSelectCss;
|
|
3782
|
+
|
|
3783
|
+
/**
|
|
3784
|
+
* TextType from text types
|
|
3785
|
+
*/
|
|
3786
|
+
// Define possible text types with help text
|
|
3787
|
+
const helpTextTypes = ['email', 'emails', 'url'];
|
|
3788
|
+
// Define possible text types
|
|
3789
|
+
const textTypes = ['text', 'search', 'tel', ...helpTextTypes];
|
|
3672
3790
|
|
|
3673
3791
|
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}.mg-c-input.mg-c-input--readonly b{min-height:var(--mg-b-font-size);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--has-icon .mg-c-input__with-character-left>mg-icon{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{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}";
|
|
3674
|
-
const MgInputTextStyle0 = mgInputTextCss;
|
|
3675
3792
|
|
|
3676
3793
|
/**
|
|
3677
3794
|
* Check if object is an option
|
|
@@ -3684,12 +3801,12 @@ const isOption$1 = (option) => typeof option === 'object' && typeof option.title
|
|
|
3684
3801
|
* @param options - Datalist options to check.
|
|
3685
3802
|
* @returns True if datalist is well structured.
|
|
3686
3803
|
*/
|
|
3687
|
-
const isDatalistOptions = (options) =>
|
|
3804
|
+
const isDatalistOptions = (options) => At(options) || (Array.isArray(options) && options.every(isOption$1));
|
|
3688
3805
|
const MgInputText = class {
|
|
3689
3806
|
constructor(hostRef) {
|
|
3690
3807
|
registerInstance(this, hostRef);
|
|
3691
|
-
this.valueChange = createEvent(this, "value-change"
|
|
3692
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
3808
|
+
this.valueChange = createEvent(this, "value-change");
|
|
3809
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
3693
3810
|
/************
|
|
3694
3811
|
* Internal *
|
|
3695
3812
|
************/
|
|
@@ -3707,13 +3824,17 @@ const MgInputText = class {
|
|
|
3707
3824
|
*/
|
|
3708
3825
|
this.name = this.identifier;
|
|
3709
3826
|
/**
|
|
3710
|
-
*
|
|
3827
|
+
* Define if label is displayed on top
|
|
3711
3828
|
*/
|
|
3712
|
-
this.
|
|
3829
|
+
this.labelOnTop = false;
|
|
3713
3830
|
/**
|
|
3714
3831
|
* Define if label is visible
|
|
3715
3832
|
*/
|
|
3716
3833
|
this.labelHide = false;
|
|
3834
|
+
/**
|
|
3835
|
+
* Input type
|
|
3836
|
+
*/
|
|
3837
|
+
this.type = 'text';
|
|
3717
3838
|
/**
|
|
3718
3839
|
* Input max length
|
|
3719
3840
|
*/
|
|
@@ -3745,7 +3866,17 @@ const MgInputText = class {
|
|
|
3745
3866
|
/**
|
|
3746
3867
|
* Component classes
|
|
3747
3868
|
*/
|
|
3748
|
-
this.classCollection = new
|
|
3869
|
+
this.classCollection = new kt(['mg-c-input--text']);
|
|
3870
|
+
/**
|
|
3871
|
+
* Validate pattern configuration
|
|
3872
|
+
*/
|
|
3873
|
+
this.validatePattern = () => {
|
|
3874
|
+
if ((this.pattern !== undefined || this.patternErrorMessage !== undefined) && // At least one is defined
|
|
3875
|
+
(!Le(this.pattern) || (!helpTextTypes.includes(this.type) && !Le(this.patternErrorMessage))) // Both must be defined
|
|
3876
|
+
) {
|
|
3877
|
+
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}'".`);
|
|
3878
|
+
}
|
|
3879
|
+
};
|
|
3749
3880
|
/**
|
|
3750
3881
|
* Handle input event
|
|
3751
3882
|
*/
|
|
@@ -3761,7 +3892,7 @@ const MgInputText = class {
|
|
|
3761
3892
|
*/
|
|
3762
3893
|
this.handleFocus = () => {
|
|
3763
3894
|
this.classCollection.add(this.classFocus);
|
|
3764
|
-
this.classCollection = new
|
|
3895
|
+
this.classCollection = new kt(this.classCollection.classes);
|
|
3765
3896
|
};
|
|
3766
3897
|
/**
|
|
3767
3898
|
* Handle blur event
|
|
@@ -3769,7 +3900,7 @@ const MgInputText = class {
|
|
|
3769
3900
|
this.handleBlur = () => {
|
|
3770
3901
|
// Manage focus
|
|
3771
3902
|
this.classCollection.delete(this.classFocus);
|
|
3772
|
-
this.classCollection = new
|
|
3903
|
+
this.classCollection = new kt(this.classCollection.classes);
|
|
3773
3904
|
// Display Error
|
|
3774
3905
|
this.handlerInProgress = 'blur';
|
|
3775
3906
|
this.displayError().finally(() => {
|
|
@@ -3788,15 +3919,20 @@ const MgInputText = class {
|
|
|
3788
3919
|
* @param errorMessage - errorMessage override
|
|
3789
3920
|
*/
|
|
3790
3921
|
this.setErrorMessage = (errorMessage) => {
|
|
3922
|
+
var _a;
|
|
3791
3923
|
// Set error message
|
|
3792
3924
|
this.errorMessage = undefined;
|
|
3793
3925
|
// Does have a custom error message
|
|
3794
3926
|
if (!this.valid && errorMessage !== undefined) {
|
|
3795
3927
|
this.errorMessage = errorMessage;
|
|
3796
3928
|
}
|
|
3929
|
+
// Does not match type (email, emails, tel, url, etc.)
|
|
3930
|
+
else if (!this.valid && this.input.validity.typeMismatch) {
|
|
3931
|
+
this.errorMessage = this.messages.input.text.errors.typeMismatch[this.type];
|
|
3932
|
+
}
|
|
3797
3933
|
// Does not match pattern
|
|
3798
3934
|
else if (!this.valid && this.input.validity.patternMismatch) {
|
|
3799
|
-
this.errorMessage = this.patternErrorMessage;
|
|
3935
|
+
this.errorMessage = (_a = this.patternErrorMessage) !== null && _a !== void 0 ? _a : this.messages.input.text.errors.typeMismatch[this.type];
|
|
3800
3936
|
}
|
|
3801
3937
|
// required
|
|
3802
3938
|
else if (!this.valid && this.input.validity.valueMissing) {
|
|
@@ -3844,6 +3980,11 @@ const MgInputText = class {
|
|
|
3844
3980
|
this.valueChange.emit(newValue);
|
|
3845
3981
|
}
|
|
3846
3982
|
}
|
|
3983
|
+
validateType(newValue) {
|
|
3984
|
+
if (!textTypes.includes(newValue)) {
|
|
3985
|
+
throw new Error(`<mg-input-text> prop "type" must be one of the following values: ${textTypes.join(', ')}. Passed value: ${newValue}.`);
|
|
3986
|
+
}
|
|
3987
|
+
}
|
|
3847
3988
|
validateIcon(newValue) {
|
|
3848
3989
|
if (newValue !== undefined) {
|
|
3849
3990
|
this.classCollection.add(this.classHasIcon);
|
|
@@ -3854,7 +3995,7 @@ const MgInputText = class {
|
|
|
3854
3995
|
}
|
|
3855
3996
|
validateDatalistoptions(newValue) {
|
|
3856
3997
|
if (Boolean(newValue) && !isDatalistOptions(newValue)) {
|
|
3857
|
-
throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${
|
|
3998
|
+
throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${zt(newValue)}.`);
|
|
3858
3999
|
}
|
|
3859
4000
|
}
|
|
3860
4001
|
watchReadonly(newValue) {
|
|
@@ -3888,9 +4029,12 @@ const MgInputText = class {
|
|
|
3888
4029
|
if (newValue !== undefined)
|
|
3889
4030
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3890
4031
|
}
|
|
3891
|
-
|
|
3892
|
-
|
|
3893
|
-
|
|
4032
|
+
watchPattern() {
|
|
4033
|
+
this.validatePattern();
|
|
4034
|
+
}
|
|
4035
|
+
watchHelpText(newValue) {
|
|
4036
|
+
if (!Le(newValue) && helpTextTypes.includes(this.type)) {
|
|
4037
|
+
this.helpText = this.messages.input.text.helpText[this.type];
|
|
3894
4038
|
}
|
|
3895
4039
|
}
|
|
3896
4040
|
/**
|
|
@@ -3930,7 +4074,7 @@ const MgInputText = class {
|
|
|
3930
4074
|
if (typeof valid !== 'boolean') {
|
|
3931
4075
|
throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean.');
|
|
3932
4076
|
}
|
|
3933
|
-
else if (!
|
|
4077
|
+
else if (!Le(errorMessage)) {
|
|
3934
4078
|
throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string.');
|
|
3935
4079
|
}
|
|
3936
4080
|
else {
|
|
@@ -3977,12 +4121,13 @@ const MgInputText = class {
|
|
|
3977
4121
|
// Validate
|
|
3978
4122
|
this.validateIcon(this.icon);
|
|
3979
4123
|
this.validateDatalistoptions(this.datalistoptions);
|
|
3980
|
-
this.
|
|
3981
|
-
this.validatePattern(this.patternErrorMessage);
|
|
4124
|
+
this.watchPattern();
|
|
3982
4125
|
this.validateAppendSlot();
|
|
3983
4126
|
this.watchMgWidth(this.mgWidth);
|
|
3984
4127
|
this.watchReadonly(this.readonly);
|
|
3985
4128
|
this.watchDisabled(this.disabled);
|
|
4129
|
+
this.validateType(this.type);
|
|
4130
|
+
this.watchHelpText(this.helpText);
|
|
3986
4131
|
// Check validity when component is ready
|
|
3987
4132
|
// return a promise to process action only in the FIRST render().
|
|
3988
4133
|
// https://stenciljs.com/docs/component-lifecycle#componentwillload
|
|
@@ -3995,12 +4140,12 @@ const MgInputText = class {
|
|
|
3995
4140
|
* @returns HTML Element
|
|
3996
4141
|
*/
|
|
3997
4142
|
render() {
|
|
3998
|
-
return (h("mg-input", { key: '
|
|
4143
|
+
return (h("mg-input", { key: 'ee11d031a4bb2be299f594fee631be8fd1ef33e5', 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
|
|
3999
4144
|
? this.value && this.renderReadonly()
|
|
4000
4145
|
: [
|
|
4001
4146
|
h("div", { key: "input", class: "mg-c-input__with-character-left", style: {
|
|
4002
4147
|
'--mg-c-character-left-message-length': (!this.characterLeftHide ? this.maxlength.toString().length * 2 + 1 : 0).toString(),
|
|
4003
|
-
} }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
4148
|
+
} }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type === 'emails' ? 'email' : this.type, multiple: this.type === 'emails', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
4004
4149
|
if (el !== null)
|
|
4005
4150
|
this.input = el;
|
|
4006
4151
|
} }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (h("option", { value: isOption$1(option) ? option.title : option, key: option }))))), !this.characterLeftHide && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))),
|
|
@@ -4010,26 +4155,27 @@ const MgInputText = class {
|
|
|
4010
4155
|
get element() { return getElement(this); }
|
|
4011
4156
|
static get watchers() { return {
|
|
4012
4157
|
"value": ["handleValue"],
|
|
4158
|
+
"type": ["validateType"],
|
|
4013
4159
|
"icon": ["validateIcon"],
|
|
4014
4160
|
"datalistoptions": ["validateDatalistoptions"],
|
|
4015
4161
|
"readonly": ["watchReadonly", "handleValidityChange"],
|
|
4016
4162
|
"required": ["handleValidityChange"],
|
|
4017
4163
|
"disabled": ["handleValidityChange", "watchDisabled"],
|
|
4018
4164
|
"mgWidth": ["watchMgWidth"],
|
|
4019
|
-
"pattern": ["
|
|
4020
|
-
"patternErrorMessage": ["
|
|
4165
|
+
"pattern": ["watchPattern"],
|
|
4166
|
+
"patternErrorMessage": ["watchPattern"],
|
|
4167
|
+
"helpText": ["watchHelpText"]
|
|
4021
4168
|
}; }
|
|
4022
4169
|
};
|
|
4023
|
-
MgInputText.style =
|
|
4170
|
+
MgInputText.style = mgInputTextCss;
|
|
4024
4171
|
|
|
4025
4172
|
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}}";
|
|
4026
|
-
const MgInputTextareaStyle0 = mgInputTextareaCss;
|
|
4027
4173
|
|
|
4028
4174
|
const MgInputTextarea = class {
|
|
4029
4175
|
constructor(hostRef) {
|
|
4030
4176
|
registerInstance(this, hostRef);
|
|
4031
|
-
this.valueChange = createEvent(this, "value-change"
|
|
4032
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
4177
|
+
this.valueChange = createEvent(this, "value-change");
|
|
4178
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
4033
4179
|
/************
|
|
4034
4180
|
* Internal *
|
|
4035
4181
|
************/
|
|
@@ -4043,6 +4189,10 @@ const MgInputTextarea = class {
|
|
|
4043
4189
|
* If not set the value equals the identifier
|
|
4044
4190
|
*/
|
|
4045
4191
|
this.name = this.identifier;
|
|
4192
|
+
/**
|
|
4193
|
+
* Define if label is displayed on top
|
|
4194
|
+
*/
|
|
4195
|
+
this.labelOnTop = false;
|
|
4046
4196
|
/**
|
|
4047
4197
|
* Define if label is visible
|
|
4048
4198
|
*/
|
|
@@ -4086,7 +4236,7 @@ const MgInputTextarea = class {
|
|
|
4086
4236
|
/**
|
|
4087
4237
|
* Component classes
|
|
4088
4238
|
*/
|
|
4089
|
-
this.classCollection = new
|
|
4239
|
+
this.classCollection = new kt(['mg-c-input--textarea']);
|
|
4090
4240
|
/**
|
|
4091
4241
|
* Handle input event
|
|
4092
4242
|
*/
|
|
@@ -4102,7 +4252,7 @@ const MgInputTextarea = class {
|
|
|
4102
4252
|
*/
|
|
4103
4253
|
this.handleFocus = () => {
|
|
4104
4254
|
this.classCollection.add(this.classFocus);
|
|
4105
|
-
this.classCollection = new
|
|
4255
|
+
this.classCollection = new kt(this.classCollection.classes);
|
|
4106
4256
|
};
|
|
4107
4257
|
/**
|
|
4108
4258
|
* Handle blur event
|
|
@@ -4110,7 +4260,7 @@ const MgInputTextarea = class {
|
|
|
4110
4260
|
this.handleBlur = () => {
|
|
4111
4261
|
// Manage focus
|
|
4112
4262
|
this.classCollection.delete(this.classFocus);
|
|
4113
|
-
this.classCollection = new
|
|
4263
|
+
this.classCollection = new kt(this.classCollection.classes);
|
|
4114
4264
|
// Display Error
|
|
4115
4265
|
this.handlerInProgress = 'blur';
|
|
4116
4266
|
this.displayError().finally(() => {
|
|
@@ -4188,8 +4338,8 @@ const MgInputTextarea = class {
|
|
|
4188
4338
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
4189
4339
|
}
|
|
4190
4340
|
validatePattern(newValue) {
|
|
4191
|
-
if (newValue !== undefined && !(
|
|
4192
|
-
throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${
|
|
4341
|
+
if (newValue !== undefined && !(Le(this.pattern) && Le(this.patternErrorMessage))) {
|
|
4342
|
+
throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${zt(this.pattern)}'" and "patternErrorMessage='${zt(this.patternErrorMessage)}'".`);
|
|
4193
4343
|
}
|
|
4194
4344
|
}
|
|
4195
4345
|
validatecharacterLeftHide(newValue) {
|
|
@@ -4231,7 +4381,7 @@ const MgInputTextarea = class {
|
|
|
4231
4381
|
if (typeof valid !== 'boolean') {
|
|
4232
4382
|
throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean.');
|
|
4233
4383
|
}
|
|
4234
|
-
else if (!
|
|
4384
|
+
else if (!Le(errorMessage)) {
|
|
4235
4385
|
throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string.');
|
|
4236
4386
|
}
|
|
4237
4387
|
else {
|
|
@@ -4293,7 +4443,7 @@ const MgInputTextarea = class {
|
|
|
4293
4443
|
* @returns HTML Element
|
|
4294
4444
|
*/
|
|
4295
4445
|
render() {
|
|
4296
|
-
return (h("mg-input", { key: '
|
|
4446
|
+
return (h("mg-input", { key: 'e7cc627386b7e46fdcb52758a525a729e55d572b', 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: {
|
|
4297
4447
|
'mg-c-input__box': true,
|
|
4298
4448
|
'mg-c-input__box--width': true,
|
|
4299
4449
|
'mg-c-input__box--resizable': this.resizable === 'both',
|
|
@@ -4316,10 +4466,9 @@ const MgInputTextarea = class {
|
|
|
4316
4466
|
"characterLeftHide": ["validatecharacterLeftHide"]
|
|
4317
4467
|
}; }
|
|
4318
4468
|
};
|
|
4319
|
-
MgInputTextarea.style =
|
|
4469
|
+
MgInputTextarea.style = mgInputTextareaCss;
|
|
4320
4470
|
|
|
4321
4471
|
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)}";
|
|
4322
|
-
const MgInputTitleStyle0 = mgInputTitleCss;
|
|
4323
4472
|
|
|
4324
4473
|
const MgInputTitle = class {
|
|
4325
4474
|
constructor(hostRef) {
|
|
@@ -4334,11 +4483,11 @@ const MgInputTitle = class {
|
|
|
4334
4483
|
this.tagName = 'label';
|
|
4335
4484
|
}
|
|
4336
4485
|
validateIdentifier(newValue) {
|
|
4337
|
-
if (!
|
|
4486
|
+
if (!Le(newValue)) {
|
|
4338
4487
|
throw new Error('<mg-input-title> prop "identifier" is required.');
|
|
4339
4488
|
}
|
|
4340
|
-
else if (!
|
|
4341
|
-
console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${
|
|
4489
|
+
else if (!Ot(newValue)) {
|
|
4490
|
+
console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
|
|
4342
4491
|
}
|
|
4343
4492
|
}
|
|
4344
4493
|
validateIsLegend(newValue) {
|
|
@@ -4368,10 +4517,9 @@ const MgInputTitle = class {
|
|
|
4368
4517
|
"isLegend": ["validateIsLegend"]
|
|
4369
4518
|
}; }
|
|
4370
4519
|
};
|
|
4371
|
-
MgInputTitle.style =
|
|
4520
|
+
MgInputTitle.style = mgInputTitleCss;
|
|
4372
4521
|
|
|
4373
4522
|
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}";
|
|
4374
|
-
const MgInputToggleStyle0 = mgInputToggleCss;
|
|
4375
4523
|
|
|
4376
4524
|
/**
|
|
4377
4525
|
* type Option validation function
|
|
@@ -4382,8 +4530,8 @@ const isOption = (option) => typeof option === 'object' && typeof option.title =
|
|
|
4382
4530
|
const MgInputToggle = class {
|
|
4383
4531
|
constructor(hostRef) {
|
|
4384
4532
|
registerInstance(this, hostRef);
|
|
4385
|
-
this.valueChange = createEvent(this, "value-change"
|
|
4386
|
-
this.inputValid = createEvent(this, "input-valid"
|
|
4533
|
+
this.valueChange = createEvent(this, "value-change");
|
|
4534
|
+
this.inputValid = createEvent(this, "input-valid");
|
|
4387
4535
|
/************
|
|
4388
4536
|
* Internal *
|
|
4389
4537
|
************/
|
|
@@ -4396,6 +4544,10 @@ const MgInputToggle = class {
|
|
|
4396
4544
|
* If not set the value equals the identifier
|
|
4397
4545
|
*/
|
|
4398
4546
|
this.name = this.identifier;
|
|
4547
|
+
/**
|
|
4548
|
+
* Define if label is displayed on top
|
|
4549
|
+
*/
|
|
4550
|
+
this.labelOnTop = false;
|
|
4399
4551
|
/**
|
|
4400
4552
|
* Define if label is visible
|
|
4401
4553
|
*/
|
|
@@ -4423,7 +4575,7 @@ const MgInputToggle = class {
|
|
|
4423
4575
|
/**
|
|
4424
4576
|
* Component classes
|
|
4425
4577
|
*/
|
|
4426
|
-
this.classCollection = new
|
|
4578
|
+
this.classCollection = new kt(['mg-c-input--toggle']);
|
|
4427
4579
|
/**
|
|
4428
4580
|
* Checked internal value
|
|
4429
4581
|
*/
|
|
@@ -4484,10 +4636,10 @@ const MgInputToggle = class {
|
|
|
4484
4636
|
}
|
|
4485
4637
|
validateItems(newValue) {
|
|
4486
4638
|
if (typeof newValue === 'object' && this.items.length !== 2) {
|
|
4487
|
-
throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${
|
|
4639
|
+
throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${zt(newValue)}.`);
|
|
4488
4640
|
}
|
|
4489
4641
|
// String array
|
|
4490
|
-
else if (
|
|
4642
|
+
else if (At(newValue)) {
|
|
4491
4643
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
4492
4644
|
}
|
|
4493
4645
|
// Object array
|
|
@@ -4495,7 +4647,7 @@ const MgInputToggle = class {
|
|
|
4495
4647
|
this.options = newValue;
|
|
4496
4648
|
}
|
|
4497
4649
|
else {
|
|
4498
|
-
throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${
|
|
4650
|
+
throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${zt(newValue)}.`);
|
|
4499
4651
|
}
|
|
4500
4652
|
}
|
|
4501
4653
|
watchIsOnOff(newValue) {
|
|
@@ -4543,7 +4695,7 @@ const MgInputToggle = class {
|
|
|
4543
4695
|
if (typeof valid !== 'boolean') {
|
|
4544
4696
|
throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');
|
|
4545
4697
|
}
|
|
4546
|
-
else if (!
|
|
4698
|
+
else if (!Le(errorMessage)) {
|
|
4547
4699
|
throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
|
|
4548
4700
|
}
|
|
4549
4701
|
else {
|
|
@@ -4610,7 +4762,7 @@ const MgInputToggle = class {
|
|
|
4610
4762
|
*/
|
|
4611
4763
|
render() {
|
|
4612
4764
|
const checkedItem = this.getCheckedItem(this.checked);
|
|
4613
|
-
return (h("mg-input", { key: '
|
|
4765
|
+
return (h("mg-input", { key: '24c8068a592b0c49a0080931793de9f161b39c26', 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" }))))));
|
|
4614
4766
|
}
|
|
4615
4767
|
get element() { return getElement(this); }
|
|
4616
4768
|
static get watchers() { return {
|
|
@@ -4623,7 +4775,7 @@ const MgInputToggle = class {
|
|
|
4623
4775
|
"checked": ["handleChecked"]
|
|
4624
4776
|
}; }
|
|
4625
4777
|
};
|
|
4626
|
-
MgInputToggle.style =
|
|
4778
|
+
MgInputToggle.style = mgInputToggleCss;
|
|
4627
4779
|
|
|
4628
4780
|
/**
|
|
4629
4781
|
*
|
|
@@ -4706,7 +4858,6 @@ class OverflowBehavior {
|
|
|
4706
4858
|
}
|
|
4707
4859
|
|
|
4708
4860
|
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}";
|
|
4709
|
-
const MgItemMoreStyle0 = mgItemMoreCss;
|
|
4710
4861
|
|
|
4711
4862
|
const MgItemMore = class {
|
|
4712
4863
|
constructor(hostRef) {
|
|
@@ -4726,17 +4877,17 @@ const MgItemMore = class {
|
|
|
4726
4877
|
}
|
|
4727
4878
|
validateIcon(newValue) {
|
|
4728
4879
|
if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
|
|
4729
|
-
throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${
|
|
4880
|
+
throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${zt(newValue)}.`);
|
|
4730
4881
|
}
|
|
4731
4882
|
validateSlotLabel(newValue) {
|
|
4732
4883
|
if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
|
|
4733
|
-
throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${
|
|
4884
|
+
throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${zt(newValue)}.`);
|
|
4734
4885
|
else if (typeof newValue.label !== 'string')
|
|
4735
4886
|
this.slotlabel.label = this.messages.menuLabel;
|
|
4736
4887
|
}
|
|
4737
4888
|
validateSize(newValue) {
|
|
4738
|
-
if (newValue && !sizes$
|
|
4739
|
-
throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${
|
|
4889
|
+
if (newValue && !sizes$5.includes(newValue))
|
|
4890
|
+
throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${zt(newValue)}.`);
|
|
4740
4891
|
}
|
|
4741
4892
|
/*************
|
|
4742
4893
|
* Lifecycle *
|
|
@@ -4783,7 +4934,7 @@ const MgItemMore = class {
|
|
|
4783
4934
|
*/
|
|
4784
4935
|
render() {
|
|
4785
4936
|
const menuItemIdentifier = 'mg-item-more';
|
|
4786
|
-
return (h(Host, { key: '
|
|
4937
|
+
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 => {
|
|
4787
4938
|
if (ref !== null)
|
|
4788
4939
|
this.itemMoreContainer = ref;
|
|
4789
4940
|
} })))));
|
|
@@ -4795,10 +4946,9 @@ const MgItemMore = class {
|
|
|
4795
4946
|
"size": ["validateSize"]
|
|
4796
4947
|
}; }
|
|
4797
4948
|
};
|
|
4798
|
-
MgItemMore.style =
|
|
4949
|
+
MgItemMore.style = mgItemMoreCss;
|
|
4799
4950
|
|
|
4800
4951
|
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}";
|
|
4801
|
-
const MgMenuStyle0 = mgMenuCss;
|
|
4802
4952
|
|
|
4803
4953
|
const MgMenu = class {
|
|
4804
4954
|
constructor(hostRef) {
|
|
@@ -4810,7 +4960,7 @@ const MgMenu = class {
|
|
|
4810
4960
|
/**
|
|
4811
4961
|
* Component display direction.
|
|
4812
4962
|
*/
|
|
4813
|
-
this.direction =
|
|
4963
|
+
this.direction = 'horizontal';
|
|
4814
4964
|
/**
|
|
4815
4965
|
* Define mg-menu size
|
|
4816
4966
|
*/
|
|
@@ -4870,12 +5020,12 @@ const MgMenu = class {
|
|
|
4870
5020
|
}
|
|
4871
5021
|
validateLabel(newValue) {
|
|
4872
5022
|
if (newValue === undefined && !this.element.hasAttribute('aria-label')) {
|
|
4873
|
-
throw new Error(`<${this.name}> prop "label" is required. Passed value: ${
|
|
5023
|
+
throw new Error(`<${this.name}> prop "label" is required. Passed value: ${zt(newValue)}.`);
|
|
4874
5024
|
}
|
|
4875
5025
|
}
|
|
4876
5026
|
validateDirection(newValue) {
|
|
4877
5027
|
if (![directions$1.VERTICAL, directions$1.HORIZONTAL].includes(newValue)) {
|
|
4878
|
-
throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$1.HORIZONTAL}, ${directions$1.VERTICAL}. Passed value: ${
|
|
5028
|
+
throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$1.HORIZONTAL}, ${directions$1.VERTICAL}. Passed value: ${zt(newValue)}.`);
|
|
4879
5029
|
}
|
|
4880
5030
|
else {
|
|
4881
5031
|
this.updateMenuItems();
|
|
@@ -4890,8 +5040,8 @@ const MgMenu = class {
|
|
|
4890
5040
|
}
|
|
4891
5041
|
}
|
|
4892
5042
|
validateSize(newValue) {
|
|
4893
|
-
if (!sizes$
|
|
4894
|
-
throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$
|
|
5043
|
+
if (!sizes$5.includes(newValue)) {
|
|
5044
|
+
throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$5.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
4895
5045
|
}
|
|
4896
5046
|
}
|
|
4897
5047
|
/**
|
|
@@ -4907,7 +5057,7 @@ const MgMenu = class {
|
|
|
4907
5057
|
if (focusedItem === itemToWatch)
|
|
4908
5058
|
return;
|
|
4909
5059
|
// reset expanded on previous active menu item
|
|
4910
|
-
if (focusedItem)
|
|
5060
|
+
if (focusedItem !== null)
|
|
4911
5061
|
focusedItem.removeAttribute('data-has-focus');
|
|
4912
5062
|
// update focusedMenuItem with new value
|
|
4913
5063
|
itemToWatch.setAttribute('data-has-focus', 'true');
|
|
@@ -4938,15 +5088,15 @@ const MgMenu = class {
|
|
|
4938
5088
|
const isElementChild = (element) => {
|
|
4939
5089
|
if (element === this.element)
|
|
4940
5090
|
return true;
|
|
4941
|
-
else if (
|
|
5091
|
+
else if (element.parentElement === null)
|
|
4942
5092
|
return false;
|
|
4943
5093
|
else
|
|
4944
5094
|
return isElementChild(element.parentElement);
|
|
4945
5095
|
};
|
|
4946
|
-
if (
|
|
5096
|
+
if (event.target.closest('mg-menu') === null || !isElementChild(event.target)) {
|
|
4947
5097
|
const focusedItem = this.element.querySelector('[data-has-focus]');
|
|
4948
5098
|
// reset expanded on previous active menu item
|
|
4949
|
-
if (focusedItem)
|
|
5099
|
+
if (focusedItem !== null)
|
|
4950
5100
|
focusedItem.removeAttribute('data-has-focus');
|
|
4951
5101
|
}
|
|
4952
5102
|
});
|
|
@@ -4959,7 +5109,7 @@ const MgMenu = class {
|
|
|
4959
5109
|
* @returns HTML Element
|
|
4960
5110
|
*/
|
|
4961
5111
|
render() {
|
|
4962
|
-
return (h(Host, { key: '
|
|
5112
|
+
return (h(Host, { key: 'b07fbc2127a17e22f41750c603a36c76924d97f3', role: "list", "aria-label": this.label }, h("slot", { key: '0f1070474d19411fc1e52b5151ad6c61c2f07627' })));
|
|
4963
5113
|
}
|
|
4964
5114
|
get element() { return getElement(this); }
|
|
4965
5115
|
static get watchers() { return {
|
|
@@ -4969,16 +5119,15 @@ const MgMenu = class {
|
|
|
4969
5119
|
"size": ["validateSize"]
|
|
4970
5120
|
}; }
|
|
4971
5121
|
};
|
|
4972
|
-
MgMenu.style =
|
|
5122
|
+
MgMenu.style = mgMenuCss;
|
|
4973
5123
|
|
|
4974
5124
|
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}";
|
|
4975
|
-
const MgMenuItemStyle0 = mgMenuItemCss;
|
|
4976
5125
|
|
|
4977
5126
|
const MgMenuItem = class {
|
|
4978
5127
|
constructor(hostRef) {
|
|
4979
5128
|
registerInstance(this, hostRef);
|
|
4980
|
-
this.itemLoaded = createEvent(this, "item-loaded"
|
|
4981
|
-
this.itemUpdated = createEvent(this, "item-updated"
|
|
5129
|
+
this.itemLoaded = createEvent(this, "item-loaded");
|
|
5130
|
+
this.itemUpdated = createEvent(this, "item-updated");
|
|
4982
5131
|
/************
|
|
4983
5132
|
* Internal *
|
|
4984
5133
|
************/
|
|
@@ -4990,11 +5139,11 @@ const MgMenuItem = class {
|
|
|
4990
5139
|
/**
|
|
4991
5140
|
* Identifier is used to control mg-popover
|
|
4992
5141
|
*/
|
|
4993
|
-
this.identifier =
|
|
5142
|
+
this.identifier = xt('mg-menu-item');
|
|
4994
5143
|
/**
|
|
4995
5144
|
* Define menu-item status.
|
|
4996
5145
|
*/
|
|
4997
|
-
this.status =
|
|
5146
|
+
this.status = 'visible';
|
|
4998
5147
|
/**
|
|
4999
5148
|
* Define menu-item content expanded.
|
|
5000
5149
|
*/
|
|
@@ -5009,7 +5158,7 @@ const MgMenuItem = class {
|
|
|
5009
5158
|
/**
|
|
5010
5159
|
* Component button classes
|
|
5011
5160
|
*/
|
|
5012
|
-
this.navigationButtonClassList = new
|
|
5161
|
+
this.navigationButtonClassList = new kt([this.navigationButton]);
|
|
5013
5162
|
/**
|
|
5014
5163
|
* Does component have children.
|
|
5015
5164
|
*/
|
|
@@ -5034,7 +5183,7 @@ const MgMenuItem = class {
|
|
|
5034
5183
|
* @returns truthy if component display popover
|
|
5035
5184
|
*/
|
|
5036
5185
|
this.hasPopover = () => this.isDirection(directions$1.HORIZONTAL) &&
|
|
5037
|
-
((this.isInMainMenu() && Array.from(this.element.children).some(element =>
|
|
5186
|
+
((this.isInMainMenu() && Array.from(this.element.children).some(element => element.querySelector('[slot]') === null)) || this.isItemMore) &&
|
|
5038
5187
|
this.href === undefined;
|
|
5039
5188
|
/**
|
|
5040
5189
|
* Method to control if one of component children have active status
|
|
@@ -5048,7 +5197,7 @@ const MgMenuItem = class {
|
|
|
5048
5197
|
* Is component an interactive item
|
|
5049
5198
|
* @returns truthy if element is clickable
|
|
5050
5199
|
*/
|
|
5051
|
-
this.isInteractiveItem = () => this.hasChildren || !
|
|
5200
|
+
this.isInteractiveItem = () => this.hasChildren || !Le(this.href);
|
|
5052
5201
|
/**
|
|
5053
5202
|
* Is component contextual direction match the given direction
|
|
5054
5203
|
* @param direction - in parent menu
|
|
@@ -5101,7 +5250,7 @@ const MgMenuItem = class {
|
|
|
5101
5250
|
}
|
|
5102
5251
|
['label', 'metadata'].forEach(slot => {
|
|
5103
5252
|
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
|
|
5104
|
-
if (!
|
|
5253
|
+
if (!Le(element.textContent))
|
|
5105
5254
|
throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
|
|
5106
5255
|
if ((guard && !element.hasAttribute('title')) || !guard)
|
|
5107
5256
|
element.setAttribute('title', element.textContent);
|
|
@@ -5168,8 +5317,8 @@ const MgMenuItem = class {
|
|
|
5168
5317
|
this.renderSlot = () => h("slot", null);
|
|
5169
5318
|
}
|
|
5170
5319
|
watchIdentifier(newValue) {
|
|
5171
|
-
if (!
|
|
5172
|
-
console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${
|
|
5320
|
+
if (!Ot(newValue)) {
|
|
5321
|
+
console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
|
|
5173
5322
|
}
|
|
5174
5323
|
else {
|
|
5175
5324
|
this.popoverIdentifier = `${this.identifier}-popover`;
|
|
@@ -5177,7 +5326,7 @@ const MgMenuItem = class {
|
|
|
5177
5326
|
}
|
|
5178
5327
|
watchTarget(newValue) {
|
|
5179
5328
|
if (newValue && !targets.includes(newValue)) {
|
|
5180
|
-
throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${
|
|
5329
|
+
throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
5181
5330
|
}
|
|
5182
5331
|
}
|
|
5183
5332
|
watchStatus(newValue, oldValue) {
|
|
@@ -5187,7 +5336,7 @@ const MgMenuItem = class {
|
|
|
5187
5336
|
}
|
|
5188
5337
|
watchExpanded(newValue) {
|
|
5189
5338
|
if (typeof newValue !== 'boolean') {
|
|
5190
|
-
throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${
|
|
5339
|
+
throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${zt(newValue)}.`);
|
|
5191
5340
|
}
|
|
5192
5341
|
else {
|
|
5193
5342
|
this.updateExpanded(newValue);
|
|
@@ -5244,7 +5393,7 @@ const MgMenuItem = class {
|
|
|
5244
5393
|
*/
|
|
5245
5394
|
updatePopoverGuard() {
|
|
5246
5395
|
const subItem = this.element.querySelector('*:not([slot])');
|
|
5247
|
-
if (
|
|
5396
|
+
if (subItem === null)
|
|
5248
5397
|
return;
|
|
5249
5398
|
if (this.hasPopover())
|
|
5250
5399
|
subItem.dataset.mgPopoverGuard = this.popoverIdentifier;
|
|
@@ -5302,7 +5451,7 @@ const MgMenuItem = class {
|
|
|
5302
5451
|
* @returns promise process wich emit the 'item-updated' event
|
|
5303
5452
|
*/
|
|
5304
5453
|
componentShouldUpdate() {
|
|
5305
|
-
return
|
|
5454
|
+
return Mt(() => {
|
|
5306
5455
|
this.itemUpdated.emit();
|
|
5307
5456
|
});
|
|
5308
5457
|
}
|
|
@@ -5329,7 +5478,7 @@ const MgMenuItem = class {
|
|
|
5329
5478
|
['mg-c-menu-item__collapse-container']: true,
|
|
5330
5479
|
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions$1.HORIZONTAL),
|
|
5331
5480
|
});
|
|
5332
|
-
return (h(Host, { key: '
|
|
5481
|
+
return (h(Host, { key: '6ef0374dfd3afdea0554df426c06e1fdc5549f82', 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
|
|
5333
5482
|
}, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
|
|
5334
5483
|
this.renderInteractiveElement(),
|
|
5335
5484
|
h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
|
|
@@ -5348,7 +5497,7 @@ const MgMenuItem = class {
|
|
|
5348
5497
|
"data-has-focus": ["watchDataHasFocus"]
|
|
5349
5498
|
}; }
|
|
5350
5499
|
};
|
|
5351
|
-
MgMenuItem.style =
|
|
5500
|
+
MgMenuItem.style = mgMenuItemCss;
|
|
5352
5501
|
|
|
5353
5502
|
/**
|
|
5354
5503
|
* List available variants
|
|
@@ -5360,7 +5509,6 @@ const variants$1 = ['info', 'warning', 'success', 'danger'];
|
|
|
5360
5509
|
const variantStyles = ['bar-left', 'background'];
|
|
5361
5510
|
|
|
5362
5511
|
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%}";
|
|
5363
|
-
const MgMessageStyle0 = mgMessageCss;
|
|
5364
5512
|
|
|
5365
5513
|
const MgMessage = class {
|
|
5366
5514
|
constructor(hostRef) {
|
|
@@ -5380,7 +5528,7 @@ const MgMessage = class {
|
|
|
5380
5528
|
/**
|
|
5381
5529
|
* Component classes
|
|
5382
5530
|
*/
|
|
5383
|
-
this.classCollection = new
|
|
5531
|
+
this.classCollection = new kt(['mg-c-message']);
|
|
5384
5532
|
/**
|
|
5385
5533
|
* Define if component is using actions slot
|
|
5386
5534
|
*/
|
|
@@ -5404,7 +5552,7 @@ const MgMessage = class {
|
|
|
5404
5552
|
}
|
|
5405
5553
|
watchVariant(newValue, oldValue) {
|
|
5406
5554
|
if (!variants$1.includes(newValue)) {
|
|
5407
|
-
throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${
|
|
5555
|
+
throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
5408
5556
|
}
|
|
5409
5557
|
else {
|
|
5410
5558
|
if (newValue !== undefined)
|
|
@@ -5415,7 +5563,7 @@ const MgMessage = class {
|
|
|
5415
5563
|
}
|
|
5416
5564
|
watchVariantStyle(newValue, oldValue) {
|
|
5417
5565
|
if (!variantStyles.includes(newValue)) {
|
|
5418
|
-
throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${
|
|
5566
|
+
throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
5419
5567
|
}
|
|
5420
5568
|
else {
|
|
5421
5569
|
if (newValue !== undefined)
|
|
@@ -5453,7 +5601,7 @@ const MgMessage = class {
|
|
|
5453
5601
|
"variantStyle": ["watchVariantStyle"]
|
|
5454
5602
|
}; }
|
|
5455
5603
|
};
|
|
5456
|
-
MgMessage.style =
|
|
5604
|
+
MgMessage.style = mgMessageCss;
|
|
5457
5605
|
|
|
5458
5606
|
/**
|
|
5459
5607
|
* List of all possibles dialog roles
|
|
@@ -5461,25 +5609,24 @@ MgMessage.style = MgMessageStyle0;
|
|
|
5461
5609
|
const dialogRoles = ['dialog', 'alertdialog'];
|
|
5462
5610
|
|
|
5463
5611
|
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}";
|
|
5464
|
-
const MgModalStyle0 = mgModalCss;
|
|
5465
5612
|
|
|
5466
5613
|
const MgModal = class {
|
|
5467
5614
|
constructor(hostRef) {
|
|
5468
5615
|
registerInstance(this, hostRef);
|
|
5469
|
-
this.componentShow = createEvent(this, "component-show"
|
|
5470
|
-
this.componentHide = createEvent(this, "component-hide"
|
|
5471
|
-
this.componentClose = createEvent(this, "component-close"
|
|
5616
|
+
this.componentShow = createEvent(this, "component-show");
|
|
5617
|
+
this.componentHide = createEvent(this, "component-hide");
|
|
5618
|
+
this.componentClose = createEvent(this, "component-close");
|
|
5472
5619
|
// IDs
|
|
5473
5620
|
this.titleId = '';
|
|
5474
5621
|
/**
|
|
5475
5622
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
5476
5623
|
* If not set, it will be created.
|
|
5477
5624
|
*/
|
|
5478
|
-
this.identifier =
|
|
5625
|
+
this.identifier = xt('mg-modal');
|
|
5479
5626
|
/**
|
|
5480
5627
|
* Modal dialog role.
|
|
5481
5628
|
*/
|
|
5482
|
-
this.dialogRole =
|
|
5629
|
+
this.dialogRole = 'dialog';
|
|
5483
5630
|
/**
|
|
5484
5631
|
* Define if modal has a cross button
|
|
5485
5632
|
*/
|
|
@@ -5495,7 +5642,7 @@ const MgModal = class {
|
|
|
5495
5642
|
/**
|
|
5496
5643
|
* Component classes
|
|
5497
5644
|
*/
|
|
5498
|
-
this.classCollection = new
|
|
5645
|
+
this.classCollection = new kt(['mg-c-modal']);
|
|
5499
5646
|
/***********
|
|
5500
5647
|
* Handles *
|
|
5501
5648
|
***********/
|
|
@@ -5508,17 +5655,17 @@ const MgModal = class {
|
|
|
5508
5655
|
};
|
|
5509
5656
|
}
|
|
5510
5657
|
watchIdentifier(newValue) {
|
|
5511
|
-
if (!
|
|
5512
|
-
throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${
|
|
5658
|
+
if (!Ot(newValue)) {
|
|
5659
|
+
throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
|
|
5513
5660
|
}
|
|
5514
5661
|
}
|
|
5515
5662
|
validateDialogRole(newValue) {
|
|
5516
5663
|
if (!dialogRoles.includes(newValue))
|
|
5517
|
-
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${
|
|
5664
|
+
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
5518
5665
|
}
|
|
5519
5666
|
validateModalTitle(newValue) {
|
|
5520
|
-
if (!
|
|
5521
|
-
throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${
|
|
5667
|
+
if (!Le(newValue)) {
|
|
5668
|
+
throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${zt(newValue)}.`);
|
|
5522
5669
|
}
|
|
5523
5670
|
}
|
|
5524
5671
|
watchOpen(newValue) {
|
|
@@ -5567,11 +5714,11 @@ const MgModal = class {
|
|
|
5567
5714
|
* @returns HTML Element
|
|
5568
5715
|
*/
|
|
5569
5716
|
render() {
|
|
5570
|
-
return (h("dialog", { key: '
|
|
5717
|
+
return (h("dialog", { key: 'fff52c253f0aeaceec427982c5fea96fc948a4f5', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
|
|
5571
5718
|
if (el !== null) {
|
|
5572
5719
|
this.dialog = el;
|
|
5573
5720
|
}
|
|
5574
|
-
} }, h("mg-card", { key: '
|
|
5721
|
+
} }, h("mg-card", { key: '597aee771927b73fc59c082075d74c76c9d8130c' }, h("div", { key: '75136546eefd38191ecf536e5c10cfbeb7172dc4', class: "mg-c-modal__dialog" }, h("header", { key: '09c79927ddffa0d461eabfa195849cdabe37a6ac', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'b37aabbf4a77ebaa4ca72e72f477aece9c9484de', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'a4ca599e0665489f2cba2d3e668c92baff0a3fdb', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: 'd77c434f5e2aa6d82772ab3af10a93c6f580c709', icon: "cross" })))), h("h1", { key: '6daf305683895d5cc50960b4ce86dd2ffebc3246', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '075ac4bfa9ab3e495b58a340719a8e0cefaac8c4', class: "mg-c-modal__content" }, h("slot", { key: '7013d03bfbd806671ad4cf081df9c7fe842f285c' })), this.hasActions && (h("footer", { key: '20ba80cc79e6d43cf2b820425ee0e4f75953da19', class: "mg-c-modal__footer" }, h("slot", { key: 'cfa6c3920891dfceecd0f01fbab2a1496db66f35', name: "actions" })))))));
|
|
5575
5722
|
}
|
|
5576
5723
|
get element() { return getElement(this); }
|
|
5577
5724
|
static get watchers() { return {
|
|
@@ -5581,7 +5728,7 @@ const MgModal = class {
|
|
|
5581
5728
|
"open": ["watchOpen"]
|
|
5582
5729
|
}; }
|
|
5583
5730
|
};
|
|
5584
|
-
MgModal.style =
|
|
5731
|
+
MgModal.style = mgModalCss;
|
|
5585
5732
|
|
|
5586
5733
|
const NavigationAction = {
|
|
5587
5734
|
NEXT: 'next',
|
|
@@ -5589,7 +5736,6 @@ const NavigationAction = {
|
|
|
5589
5736
|
};
|
|
5590
5737
|
|
|
5591
5738
|
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}";
|
|
5592
|
-
const MgPaginationStyle0 = mgPaginationCss;
|
|
5593
5739
|
|
|
5594
5740
|
/**
|
|
5595
5741
|
* Range generator
|
|
@@ -5616,12 +5762,20 @@ const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - st
|
|
|
5616
5762
|
const MgPagination = class {
|
|
5617
5763
|
constructor(hostRef) {
|
|
5618
5764
|
registerInstance(this, hostRef);
|
|
5619
|
-
this.currentPageChange = createEvent(this, "current-page-change"
|
|
5765
|
+
this.currentPageChange = createEvent(this, "current-page-change");
|
|
5620
5766
|
/**
|
|
5621
5767
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
5622
5768
|
* If not set, it will be created.
|
|
5623
5769
|
*/
|
|
5624
|
-
this.identifier =
|
|
5770
|
+
this.identifier = xt('mg-pagination');
|
|
5771
|
+
/**
|
|
5772
|
+
* Hide navigation label
|
|
5773
|
+
*/
|
|
5774
|
+
this.hideNavigationLabels = false;
|
|
5775
|
+
/**
|
|
5776
|
+
* Hide select input
|
|
5777
|
+
*/
|
|
5778
|
+
this.hidePageCount = false;
|
|
5625
5779
|
/**
|
|
5626
5780
|
* Component total pages
|
|
5627
5781
|
*/
|
|
@@ -5658,18 +5812,18 @@ const MgPagination = class {
|
|
|
5658
5812
|
};
|
|
5659
5813
|
}
|
|
5660
5814
|
watchIdentifier(newValue) {
|
|
5661
|
-
if (!
|
|
5662
|
-
console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${
|
|
5815
|
+
if (!Ot(newValue)) {
|
|
5816
|
+
console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
|
|
5663
5817
|
}
|
|
5664
5818
|
}
|
|
5665
5819
|
validateTotalPages(newValue) {
|
|
5666
5820
|
if (newValue < 1) {
|
|
5667
|
-
throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${
|
|
5821
|
+
throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${zt(newValue)}.`);
|
|
5668
5822
|
}
|
|
5669
5823
|
}
|
|
5670
5824
|
validateCurrentPage(newValue) {
|
|
5671
5825
|
if (newValue < 1) {
|
|
5672
|
-
throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${
|
|
5826
|
+
throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${zt(newValue)}.`);
|
|
5673
5827
|
}
|
|
5674
5828
|
else if (newValue > this.totalPages) {
|
|
5675
5829
|
throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
|
|
@@ -5699,10 +5853,10 @@ const MgPagination = class {
|
|
|
5699
5853
|
* @returns HTML Element
|
|
5700
5854
|
*/
|
|
5701
5855
|
render() {
|
|
5702
|
-
const navigationActionButton = (disabled, action) => (h("mg-button", { key: '
|
|
5856
|
+
const navigationActionButton = (disabled, action) => (h("mg-button", { key: '3c29dbe0db55d6eda6d53ee174e0e38c086beddf', label: this.messages.pagination[`${action}Page`],
|
|
5703
5857
|
// eslint-disable-next-line react/jsx-no-bind
|
|
5704
|
-
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '
|
|
5705
|
-
return (h(Host, { key: '
|
|
5858
|
+
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '677232241e8eb8beca9b9ce4a6f997dd69a5e3c1', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { key: '83f0db42841d81a3bc2cea5bec4106b1f102a6e5', icon: "chevron-right" })));
|
|
5859
|
+
return (h(Host, { key: '26dea8cd6c77188eddec2e1b35dcf01d8ee458eb', hidden: this.totalPages < 2 }, h("nav", { key: 'afe38df7e48edb84598774aad6ca72225ef074e8', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("div", { key: '1cfd5d883a640fc274fe5f6c8baec734e4479486', class: "mg-c-pagination__page-count" }, h("mg-input-select", { key: 'e58e285a97a1dedf7410a0240ea5607808d66db1', identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { key: 'd5d2cc3dc4324d1a3e2386eaf1da03024313fe24', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page)), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
|
|
5706
5860
|
}
|
|
5707
5861
|
get element() { return getElement(this); }
|
|
5708
5862
|
static get watchers() { return {
|
|
@@ -5711,7 +5865,7 @@ const MgPagination = class {
|
|
|
5711
5865
|
"currentPage": ["validateCurrentPage"]
|
|
5712
5866
|
}; }
|
|
5713
5867
|
};
|
|
5714
|
-
MgPagination.style =
|
|
5868
|
+
MgPagination.style = mgPaginationCss;
|
|
5715
5869
|
|
|
5716
5870
|
/**
|
|
5717
5871
|
* Available expand toggle display options
|
|
@@ -5723,18 +5877,17 @@ const expandToggleDisplays = ['text', 'icon'];
|
|
|
5723
5877
|
const titlePositions = ['left', 'right'];
|
|
5724
5878
|
|
|
5725
5879
|
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}";
|
|
5726
|
-
const MgPanelStyle0 = mgPanelCss;
|
|
5727
5880
|
|
|
5728
5881
|
const MgPanel = class {
|
|
5729
5882
|
constructor(hostRef) {
|
|
5730
5883
|
registerInstance(this, hostRef);
|
|
5731
|
-
this.titleChange = createEvent(this, "title-change"
|
|
5732
|
-
this.expandedChange = createEvent(this, "expanded-change"
|
|
5884
|
+
this.titleChange = createEvent(this, "title-change");
|
|
5885
|
+
this.expandedChange = createEvent(this, "expanded-change");
|
|
5733
5886
|
/**
|
|
5734
5887
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
5735
5888
|
* If not set, it will be created.
|
|
5736
5889
|
*/
|
|
5737
|
-
this.identifier =
|
|
5890
|
+
this.identifier = xt('mg-panel');
|
|
5738
5891
|
/**
|
|
5739
5892
|
* Define if panel title is editable
|
|
5740
5893
|
*/
|
|
@@ -5742,7 +5895,7 @@ const MgPanel = class {
|
|
|
5742
5895
|
/**
|
|
5743
5896
|
* Define title position
|
|
5744
5897
|
*/
|
|
5745
|
-
this.titlePosition =
|
|
5898
|
+
this.titlePosition = 'left';
|
|
5746
5899
|
/**
|
|
5747
5900
|
* Panel is opened
|
|
5748
5901
|
*/
|
|
@@ -5750,11 +5903,15 @@ const MgPanel = class {
|
|
|
5750
5903
|
/**
|
|
5751
5904
|
* Define expand toggle button display
|
|
5752
5905
|
*/
|
|
5753
|
-
this.expandToggleDisplay =
|
|
5906
|
+
this.expandToggleDisplay = 'text';
|
|
5907
|
+
/**
|
|
5908
|
+
* Disable possibility to toggle expand
|
|
5909
|
+
*/
|
|
5910
|
+
this.expandToggleDisabled = false;
|
|
5754
5911
|
/**
|
|
5755
5912
|
* Component classes
|
|
5756
5913
|
*/
|
|
5757
|
-
this.classCollection = new
|
|
5914
|
+
this.classCollection = new kt(['mg-c-panel']);
|
|
5758
5915
|
/**
|
|
5759
5916
|
* Title is in edition mode
|
|
5760
5917
|
*/
|
|
@@ -5853,13 +6010,13 @@ const MgPanel = class {
|
|
|
5853
6010
|
};
|
|
5854
6011
|
}
|
|
5855
6012
|
watchIdentifier(newValue) {
|
|
5856
|
-
if (!
|
|
5857
|
-
console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${
|
|
6013
|
+
if (!Ot(newValue)) {
|
|
6014
|
+
console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
|
|
5858
6015
|
}
|
|
5859
6016
|
}
|
|
5860
6017
|
validatePanelTitle(newValue) {
|
|
5861
|
-
if (!
|
|
5862
|
-
throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${
|
|
6018
|
+
if (!Le(newValue))
|
|
6019
|
+
throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${zt(newValue)}.`);
|
|
5863
6020
|
this.titleChange.emit(newValue);
|
|
5864
6021
|
}
|
|
5865
6022
|
validateTitlePattern(newValue) {
|
|
@@ -5868,14 +6025,14 @@ const MgPanel = class {
|
|
|
5868
6025
|
}
|
|
5869
6026
|
validateTitlePosition(newValue) {
|
|
5870
6027
|
if (!titlePositions.includes(newValue))
|
|
5871
|
-
throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${
|
|
6028
|
+
throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
5872
6029
|
}
|
|
5873
6030
|
handleExpanded(newValue) {
|
|
5874
6031
|
this.expandedChange.emit(newValue);
|
|
5875
6032
|
}
|
|
5876
6033
|
validateExpandToggleDisplay(newValue) {
|
|
5877
6034
|
if (!expandToggleDisplays.includes(newValue))
|
|
5878
|
-
throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${
|
|
6035
|
+
throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
5879
6036
|
if (newValue === 'icon' && this.titleEditable)
|
|
5880
6037
|
this.titleEditable = false;
|
|
5881
6038
|
}
|
|
@@ -5910,7 +6067,7 @@ const MgPanel = class {
|
|
|
5910
6067
|
*/
|
|
5911
6068
|
render() {
|
|
5912
6069
|
const headerId = `${this.identifier}-header`;
|
|
5913
|
-
return (h("section", { key: '
|
|
6070
|
+
return (h("section", { key: '82d79e85a6d6e376482b89fa9d03f5e381499dbc', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '6b1753575b2faece344d14d473ded961bc6ac7a1' }, h("header", { key: 'aae91889ab75aacfee1eb0b164fb60ee90d3be30', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'eb2cc533c8181e962c21666d67cf920b2e17cdd6', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '8a638a7194bd57a4b3f849401436e5a05160080a' })))));
|
|
5914
6071
|
}
|
|
5915
6072
|
get element() { return getElement(this); }
|
|
5916
6073
|
static get watchers() { return {
|
|
@@ -5923,16 +6080,13 @@ const MgPanel = class {
|
|
|
5923
6080
|
"expandToggleDisplay": ["validateExpandToggleDisplay"]
|
|
5924
6081
|
}; }
|
|
5925
6082
|
};
|
|
5926
|
-
MgPanel.style =
|
|
6083
|
+
MgPanel.style = mgPanelCss;
|
|
5927
6084
|
|
|
5928
6085
|
/**
|
|
5929
6086
|
* Custom positioning reference element.
|
|
5930
6087
|
* @see https://floating-ui.com/docs/virtual-elements
|
|
5931
6088
|
*/
|
|
5932
6089
|
|
|
5933
|
-
const sides$1 = ['top', 'right', 'bottom', 'left'];
|
|
5934
|
-
const alignments$1 = ['start', 'end'];
|
|
5935
|
-
const placements$1 = /*#__PURE__*/sides$1.reduce((acc, side) => acc.concat(side, side + "-" + alignments$1[0], side + "-" + alignments$1[1]), []);
|
|
5936
6090
|
const min = Math.min;
|
|
5937
6091
|
const max = Math.max;
|
|
5938
6092
|
const round = Math.round;
|
|
@@ -6356,109 +6510,6 @@ const arrow$1 = options => ({
|
|
|
6356
6510
|
}
|
|
6357
6511
|
});
|
|
6358
6512
|
|
|
6359
|
-
function getPlacementList(alignment, autoAlignment, allowedPlacements) {
|
|
6360
|
-
const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
|
|
6361
|
-
return allowedPlacementsSortedByAlignment.filter(placement => {
|
|
6362
|
-
if (alignment) {
|
|
6363
|
-
return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
|
|
6364
|
-
}
|
|
6365
|
-
return true;
|
|
6366
|
-
});
|
|
6367
|
-
}
|
|
6368
|
-
/**
|
|
6369
|
-
* Optimizes the visibility of the floating element by choosing the placement
|
|
6370
|
-
* that has the most space available automatically, without needing to specify a
|
|
6371
|
-
* preferred placement. Alternative to `flip`.
|
|
6372
|
-
* @see https://floating-ui.com/docs/autoPlacement
|
|
6373
|
-
*/
|
|
6374
|
-
const autoPlacement = function (options) {
|
|
6375
|
-
if (options === void 0) {
|
|
6376
|
-
options = {};
|
|
6377
|
-
}
|
|
6378
|
-
return {
|
|
6379
|
-
name: 'autoPlacement',
|
|
6380
|
-
options,
|
|
6381
|
-
async fn(state) {
|
|
6382
|
-
var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
|
|
6383
|
-
const {
|
|
6384
|
-
rects,
|
|
6385
|
-
middlewareData,
|
|
6386
|
-
placement,
|
|
6387
|
-
platform,
|
|
6388
|
-
elements
|
|
6389
|
-
} = state;
|
|
6390
|
-
const {
|
|
6391
|
-
crossAxis = false,
|
|
6392
|
-
alignment,
|
|
6393
|
-
allowedPlacements = placements$1,
|
|
6394
|
-
autoAlignment = true,
|
|
6395
|
-
...detectOverflowOptions
|
|
6396
|
-
} = evaluate(options, state);
|
|
6397
|
-
const placements$1$1 = alignment !== undefined || allowedPlacements === placements$1 ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
|
|
6398
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
6399
|
-
const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
|
|
6400
|
-
const currentPlacement = placements$1$1[currentIndex];
|
|
6401
|
-
if (currentPlacement == null) {
|
|
6402
|
-
return {};
|
|
6403
|
-
}
|
|
6404
|
-
const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
|
|
6405
|
-
|
|
6406
|
-
// Make `computeCoords` start from the right place.
|
|
6407
|
-
if (placement !== currentPlacement) {
|
|
6408
|
-
return {
|
|
6409
|
-
reset: {
|
|
6410
|
-
placement: placements$1$1[0]
|
|
6411
|
-
}
|
|
6412
|
-
};
|
|
6413
|
-
}
|
|
6414
|
-
const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
|
|
6415
|
-
const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
|
|
6416
|
-
placement: currentPlacement,
|
|
6417
|
-
overflows: currentOverflows
|
|
6418
|
-
}];
|
|
6419
|
-
const nextPlacement = placements$1$1[currentIndex + 1];
|
|
6420
|
-
|
|
6421
|
-
// There are more placements to check.
|
|
6422
|
-
if (nextPlacement) {
|
|
6423
|
-
return {
|
|
6424
|
-
data: {
|
|
6425
|
-
index: currentIndex + 1,
|
|
6426
|
-
overflows: allOverflows
|
|
6427
|
-
},
|
|
6428
|
-
reset: {
|
|
6429
|
-
placement: nextPlacement
|
|
6430
|
-
}
|
|
6431
|
-
};
|
|
6432
|
-
}
|
|
6433
|
-
const placementsSortedByMostSpace = allOverflows.map(d => {
|
|
6434
|
-
const alignment = getAlignment(d.placement);
|
|
6435
|
-
return [d.placement, alignment && crossAxis ?
|
|
6436
|
-
// Check along the mainAxis and main crossAxis side.
|
|
6437
|
-
d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
|
|
6438
|
-
// Check only the mainAxis.
|
|
6439
|
-
d.overflows[0], d.overflows];
|
|
6440
|
-
}).sort((a, b) => a[1] - b[1]);
|
|
6441
|
-
const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
|
|
6442
|
-
// Aligned placements should not check their opposite crossAxis
|
|
6443
|
-
// side.
|
|
6444
|
-
getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
|
|
6445
|
-
const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
|
|
6446
|
-
if (resetPlacement !== placement) {
|
|
6447
|
-
return {
|
|
6448
|
-
data: {
|
|
6449
|
-
index: currentIndex + 1,
|
|
6450
|
-
overflows: allOverflows
|
|
6451
|
-
},
|
|
6452
|
-
reset: {
|
|
6453
|
-
placement: resetPlacement
|
|
6454
|
-
}
|
|
6455
|
-
};
|
|
6456
|
-
}
|
|
6457
|
-
return {};
|
|
6458
|
-
}
|
|
6459
|
-
};
|
|
6460
|
-
};
|
|
6461
|
-
|
|
6462
6513
|
/**
|
|
6463
6514
|
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
6464
6515
|
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
@@ -6585,206 +6636,6 @@ const flip$1 = function (options) {
|
|
|
6585
6636
|
};
|
|
6586
6637
|
};
|
|
6587
6638
|
|
|
6588
|
-
function getSideOffsets(overflow, rect) {
|
|
6589
|
-
return {
|
|
6590
|
-
top: overflow.top - rect.height,
|
|
6591
|
-
right: overflow.right - rect.width,
|
|
6592
|
-
bottom: overflow.bottom - rect.height,
|
|
6593
|
-
left: overflow.left - rect.width
|
|
6594
|
-
};
|
|
6595
|
-
}
|
|
6596
|
-
function isAnySideFullyClipped(overflow) {
|
|
6597
|
-
return sides$1.some(side => overflow[side] >= 0);
|
|
6598
|
-
}
|
|
6599
|
-
/**
|
|
6600
|
-
* Provides data to hide the floating element in applicable situations, such as
|
|
6601
|
-
* when it is not in the same clipping context as the reference element.
|
|
6602
|
-
* @see https://floating-ui.com/docs/hide
|
|
6603
|
-
*/
|
|
6604
|
-
const hide = function (options) {
|
|
6605
|
-
if (options === void 0) {
|
|
6606
|
-
options = {};
|
|
6607
|
-
}
|
|
6608
|
-
return {
|
|
6609
|
-
name: 'hide',
|
|
6610
|
-
options,
|
|
6611
|
-
async fn(state) {
|
|
6612
|
-
const {
|
|
6613
|
-
rects
|
|
6614
|
-
} = state;
|
|
6615
|
-
const {
|
|
6616
|
-
strategy = 'referenceHidden',
|
|
6617
|
-
...detectOverflowOptions
|
|
6618
|
-
} = evaluate(options, state);
|
|
6619
|
-
switch (strategy) {
|
|
6620
|
-
case 'referenceHidden':
|
|
6621
|
-
{
|
|
6622
|
-
const overflow = await detectOverflow(state, {
|
|
6623
|
-
...detectOverflowOptions,
|
|
6624
|
-
elementContext: 'reference'
|
|
6625
|
-
});
|
|
6626
|
-
const offsets = getSideOffsets(overflow, rects.reference);
|
|
6627
|
-
return {
|
|
6628
|
-
data: {
|
|
6629
|
-
referenceHiddenOffsets: offsets,
|
|
6630
|
-
referenceHidden: isAnySideFullyClipped(offsets)
|
|
6631
|
-
}
|
|
6632
|
-
};
|
|
6633
|
-
}
|
|
6634
|
-
case 'escaped':
|
|
6635
|
-
{
|
|
6636
|
-
const overflow = await detectOverflow(state, {
|
|
6637
|
-
...detectOverflowOptions,
|
|
6638
|
-
altBoundary: true
|
|
6639
|
-
});
|
|
6640
|
-
const offsets = getSideOffsets(overflow, rects.floating);
|
|
6641
|
-
return {
|
|
6642
|
-
data: {
|
|
6643
|
-
escapedOffsets: offsets,
|
|
6644
|
-
escaped: isAnySideFullyClipped(offsets)
|
|
6645
|
-
}
|
|
6646
|
-
};
|
|
6647
|
-
}
|
|
6648
|
-
default:
|
|
6649
|
-
{
|
|
6650
|
-
return {};
|
|
6651
|
-
}
|
|
6652
|
-
}
|
|
6653
|
-
}
|
|
6654
|
-
};
|
|
6655
|
-
};
|
|
6656
|
-
|
|
6657
|
-
function getBoundingRect(rects) {
|
|
6658
|
-
const minX = min(...rects.map(rect => rect.left));
|
|
6659
|
-
const minY = min(...rects.map(rect => rect.top));
|
|
6660
|
-
const maxX = max(...rects.map(rect => rect.right));
|
|
6661
|
-
const maxY = max(...rects.map(rect => rect.bottom));
|
|
6662
|
-
return {
|
|
6663
|
-
x: minX,
|
|
6664
|
-
y: minY,
|
|
6665
|
-
width: maxX - minX,
|
|
6666
|
-
height: maxY - minY
|
|
6667
|
-
};
|
|
6668
|
-
}
|
|
6669
|
-
function getRectsByLine(rects) {
|
|
6670
|
-
const sortedRects = rects.slice().sort((a, b) => a.y - b.y);
|
|
6671
|
-
const groups = [];
|
|
6672
|
-
let prevRect = null;
|
|
6673
|
-
for (let i = 0; i < sortedRects.length; i++) {
|
|
6674
|
-
const rect = sortedRects[i];
|
|
6675
|
-
if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {
|
|
6676
|
-
groups.push([rect]);
|
|
6677
|
-
} else {
|
|
6678
|
-
groups[groups.length - 1].push(rect);
|
|
6679
|
-
}
|
|
6680
|
-
prevRect = rect;
|
|
6681
|
-
}
|
|
6682
|
-
return groups.map(rect => rectToClientRect(getBoundingRect(rect)));
|
|
6683
|
-
}
|
|
6684
|
-
/**
|
|
6685
|
-
* Provides improved positioning for inline reference elements that can span
|
|
6686
|
-
* over multiple lines, such as hyperlinks or range selections.
|
|
6687
|
-
* @see https://floating-ui.com/docs/inline
|
|
6688
|
-
*/
|
|
6689
|
-
const inline = function (options) {
|
|
6690
|
-
if (options === void 0) {
|
|
6691
|
-
options = {};
|
|
6692
|
-
}
|
|
6693
|
-
return {
|
|
6694
|
-
name: 'inline',
|
|
6695
|
-
options,
|
|
6696
|
-
async fn(state) {
|
|
6697
|
-
const {
|
|
6698
|
-
placement,
|
|
6699
|
-
elements,
|
|
6700
|
-
rects,
|
|
6701
|
-
platform,
|
|
6702
|
-
strategy
|
|
6703
|
-
} = state;
|
|
6704
|
-
// A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
|
|
6705
|
-
// ClientRect's bounds, despite the event listener being triggered. A
|
|
6706
|
-
// padding of 2 seems to handle this issue.
|
|
6707
|
-
const {
|
|
6708
|
-
padding = 2,
|
|
6709
|
-
x,
|
|
6710
|
-
y
|
|
6711
|
-
} = evaluate(options, state);
|
|
6712
|
-
const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);
|
|
6713
|
-
const clientRects = getRectsByLine(nativeClientRects);
|
|
6714
|
-
const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
|
|
6715
|
-
const paddingObject = getPaddingObject(padding);
|
|
6716
|
-
function getBoundingClientRect() {
|
|
6717
|
-
// There are two rects and they are disjoined.
|
|
6718
|
-
if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
|
|
6719
|
-
// Find the first rect in which the point is fully inside.
|
|
6720
|
-
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;
|
|
6721
|
-
}
|
|
6722
|
-
|
|
6723
|
-
// There are 2 or more connected rects.
|
|
6724
|
-
if (clientRects.length >= 2) {
|
|
6725
|
-
if (getSideAxis(placement) === 'y') {
|
|
6726
|
-
const firstRect = clientRects[0];
|
|
6727
|
-
const lastRect = clientRects[clientRects.length - 1];
|
|
6728
|
-
const isTop = getSide(placement) === 'top';
|
|
6729
|
-
const top = firstRect.top;
|
|
6730
|
-
const bottom = lastRect.bottom;
|
|
6731
|
-
const left = isTop ? firstRect.left : lastRect.left;
|
|
6732
|
-
const right = isTop ? firstRect.right : lastRect.right;
|
|
6733
|
-
const width = right - left;
|
|
6734
|
-
const height = bottom - top;
|
|
6735
|
-
return {
|
|
6736
|
-
top,
|
|
6737
|
-
bottom,
|
|
6738
|
-
left,
|
|
6739
|
-
right,
|
|
6740
|
-
width,
|
|
6741
|
-
height,
|
|
6742
|
-
x: left,
|
|
6743
|
-
y: top
|
|
6744
|
-
};
|
|
6745
|
-
}
|
|
6746
|
-
const isLeftSide = getSide(placement) === 'left';
|
|
6747
|
-
const maxRight = max(...clientRects.map(rect => rect.right));
|
|
6748
|
-
const minLeft = min(...clientRects.map(rect => rect.left));
|
|
6749
|
-
const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
|
|
6750
|
-
const top = measureRects[0].top;
|
|
6751
|
-
const bottom = measureRects[measureRects.length - 1].bottom;
|
|
6752
|
-
const left = minLeft;
|
|
6753
|
-
const right = maxRight;
|
|
6754
|
-
const width = right - left;
|
|
6755
|
-
const height = bottom - top;
|
|
6756
|
-
return {
|
|
6757
|
-
top,
|
|
6758
|
-
bottom,
|
|
6759
|
-
left,
|
|
6760
|
-
right,
|
|
6761
|
-
width,
|
|
6762
|
-
height,
|
|
6763
|
-
x: left,
|
|
6764
|
-
y: top
|
|
6765
|
-
};
|
|
6766
|
-
}
|
|
6767
|
-
return fallback;
|
|
6768
|
-
}
|
|
6769
|
-
const resetRects = await platform.getElementRects({
|
|
6770
|
-
reference: {
|
|
6771
|
-
getBoundingClientRect
|
|
6772
|
-
},
|
|
6773
|
-
floating: elements.floating,
|
|
6774
|
-
strategy
|
|
6775
|
-
});
|
|
6776
|
-
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) {
|
|
6777
|
-
return {
|
|
6778
|
-
reset: {
|
|
6779
|
-
rects: resetRects
|
|
6780
|
-
}
|
|
6781
|
-
};
|
|
6782
|
-
}
|
|
6783
|
-
return {};
|
|
6784
|
-
}
|
|
6785
|
-
};
|
|
6786
|
-
};
|
|
6787
|
-
|
|
6788
6639
|
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
6789
6640
|
// Derivable.
|
|
6790
6641
|
|
|
@@ -7015,90 +6866,6 @@ const limitShift$1 = function (options) {
|
|
|
7015
6866
|
};
|
|
7016
6867
|
};
|
|
7017
6868
|
|
|
7018
|
-
/**
|
|
7019
|
-
* Provides data that allows you to change the size of the floating element —
|
|
7020
|
-
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
7021
|
-
* width of the reference element.
|
|
7022
|
-
* @see https://floating-ui.com/docs/size
|
|
7023
|
-
*/
|
|
7024
|
-
const size = function (options) {
|
|
7025
|
-
if (options === void 0) {
|
|
7026
|
-
options = {};
|
|
7027
|
-
}
|
|
7028
|
-
return {
|
|
7029
|
-
name: 'size',
|
|
7030
|
-
options,
|
|
7031
|
-
async fn(state) {
|
|
7032
|
-
var _state$middlewareData, _state$middlewareData2;
|
|
7033
|
-
const {
|
|
7034
|
-
placement,
|
|
7035
|
-
rects,
|
|
7036
|
-
platform,
|
|
7037
|
-
elements
|
|
7038
|
-
} = state;
|
|
7039
|
-
const {
|
|
7040
|
-
apply = () => {},
|
|
7041
|
-
...detectOverflowOptions
|
|
7042
|
-
} = evaluate(options, state);
|
|
7043
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
7044
|
-
const side = getSide(placement);
|
|
7045
|
-
const alignment = getAlignment(placement);
|
|
7046
|
-
const isYAxis = getSideAxis(placement) === 'y';
|
|
7047
|
-
const {
|
|
7048
|
-
width,
|
|
7049
|
-
height
|
|
7050
|
-
} = rects.floating;
|
|
7051
|
-
let heightSide;
|
|
7052
|
-
let widthSide;
|
|
7053
|
-
if (side === 'top' || side === 'bottom') {
|
|
7054
|
-
heightSide = side;
|
|
7055
|
-
widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
|
|
7056
|
-
} else {
|
|
7057
|
-
widthSide = side;
|
|
7058
|
-
heightSide = alignment === 'end' ? 'top' : 'bottom';
|
|
7059
|
-
}
|
|
7060
|
-
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
7061
|
-
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
7062
|
-
const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
|
|
7063
|
-
const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
|
|
7064
|
-
const noShift = !state.middlewareData.shift;
|
|
7065
|
-
let availableHeight = overflowAvailableHeight;
|
|
7066
|
-
let availableWidth = overflowAvailableWidth;
|
|
7067
|
-
if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
|
|
7068
|
-
availableWidth = maximumClippingWidth;
|
|
7069
|
-
}
|
|
7070
|
-
if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
|
|
7071
|
-
availableHeight = maximumClippingHeight;
|
|
7072
|
-
}
|
|
7073
|
-
if (noShift && !alignment) {
|
|
7074
|
-
const xMin = max(overflow.left, 0);
|
|
7075
|
-
const xMax = max(overflow.right, 0);
|
|
7076
|
-
const yMin = max(overflow.top, 0);
|
|
7077
|
-
const yMax = max(overflow.bottom, 0);
|
|
7078
|
-
if (isYAxis) {
|
|
7079
|
-
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
|
|
7080
|
-
} else {
|
|
7081
|
-
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
|
|
7082
|
-
}
|
|
7083
|
-
}
|
|
7084
|
-
await apply({
|
|
7085
|
-
...state,
|
|
7086
|
-
availableWidth,
|
|
7087
|
-
availableHeight
|
|
7088
|
-
});
|
|
7089
|
-
const nextDimensions = await platform.getDimensions(elements.floating);
|
|
7090
|
-
if (width !== nextDimensions.width || height !== nextDimensions.height) {
|
|
7091
|
-
return {
|
|
7092
|
-
reset: {
|
|
7093
|
-
rects: true
|
|
7094
|
-
}
|
|
7095
|
-
};
|
|
7096
|
-
}
|
|
7097
|
-
return {};
|
|
7098
|
-
}
|
|
7099
|
-
};
|
|
7100
|
-
};
|
|
7101
|
-
|
|
7102
6869
|
function hasWindow() {
|
|
7103
6870
|
return typeof window !== 'undefined';
|
|
7104
6871
|
}
|
|
@@ -7908,14 +7675,6 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
7908
7675
|
*/
|
|
7909
7676
|
const offset = offset$1;
|
|
7910
7677
|
|
|
7911
|
-
/**
|
|
7912
|
-
* Optimizes the visibility of the floating element by choosing the placement
|
|
7913
|
-
* that has the most space available automatically, without needing to specify a
|
|
7914
|
-
* preferred placement. Alternative to `flip`.
|
|
7915
|
-
* @see https://floating-ui.com/docs/autoPlacement
|
|
7916
|
-
*/
|
|
7917
|
-
autoPlacement;
|
|
7918
|
-
|
|
7919
7678
|
/**
|
|
7920
7679
|
* Optimizes the visibility of the floating element by shifting it in order to
|
|
7921
7680
|
* keep it in view when it will overflow the clipping boundary.
|
|
@@ -7931,21 +7690,6 @@ const shift = shift$1;
|
|
|
7931
7690
|
*/
|
|
7932
7691
|
const flip = flip$1;
|
|
7933
7692
|
|
|
7934
|
-
/**
|
|
7935
|
-
* Provides data that allows you to change the size of the floating element —
|
|
7936
|
-
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
7937
|
-
* width of the reference element.
|
|
7938
|
-
* @see https://floating-ui.com/docs/size
|
|
7939
|
-
*/
|
|
7940
|
-
size;
|
|
7941
|
-
|
|
7942
|
-
/**
|
|
7943
|
-
* Provides data to hide the floating element in applicable situations, such as
|
|
7944
|
-
* when it is not in the same clipping context as the reference element.
|
|
7945
|
-
* @see https://floating-ui.com/docs/hide
|
|
7946
|
-
*/
|
|
7947
|
-
hide;
|
|
7948
|
-
|
|
7949
7693
|
/**
|
|
7950
7694
|
* Provides data to position an inner element of the floating element so that it
|
|
7951
7695
|
* appears centered to the reference element.
|
|
@@ -7953,13 +7697,6 @@ hide;
|
|
|
7953
7697
|
*/
|
|
7954
7698
|
const arrow = arrow$1;
|
|
7955
7699
|
|
|
7956
|
-
/**
|
|
7957
|
-
* Provides improved positioning for inline reference elements that can span
|
|
7958
|
-
* over multiple lines, such as hyperlinks or range selections.
|
|
7959
|
-
* @see https://floating-ui.com/docs/inline
|
|
7960
|
-
*/
|
|
7961
|
-
inline;
|
|
7962
|
-
|
|
7963
7700
|
/**
|
|
7964
7701
|
* Built-in `limiter` that will stop `shift()` at a certain point.
|
|
7965
7702
|
*/
|
|
@@ -8019,18 +7756,17 @@ const isFloatingUIPlacement = (placement) => placements.filter(p => !p.includes(
|
|
|
8019
7756
|
const alignments = ['start', null, 'end'];
|
|
8020
7757
|
|
|
8021
7758
|
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}";
|
|
8022
|
-
const MgPopoverStyle0 = mgPopoverCss;
|
|
8023
7759
|
|
|
8024
7760
|
const MgPopover = class {
|
|
8025
7761
|
constructor(hostRef) {
|
|
8026
7762
|
registerInstance(this, hostRef);
|
|
8027
|
-
this.displayChange = createEvent(this, "display-change"
|
|
8028
|
-
this.componentClose = createEvent(this, "component-close"
|
|
7763
|
+
this.displayChange = createEvent(this, "display-change");
|
|
7764
|
+
this.componentClose = createEvent(this, "component-close");
|
|
8029
7765
|
/**
|
|
8030
7766
|
* Sets an `id` attribute.
|
|
8031
7767
|
* Needed by the input for accessibility `aria-decribedby`.
|
|
8032
7768
|
*/
|
|
8033
|
-
this.identifier =
|
|
7769
|
+
this.identifier = xt('mg-popover');
|
|
8034
7770
|
/**
|
|
8035
7771
|
* Popover placement
|
|
8036
7772
|
*/
|
|
@@ -8225,8 +7961,8 @@ const MgPopover = class {
|
|
|
8225
7961
|
};
|
|
8226
7962
|
}
|
|
8227
7963
|
validateIdentifier(newValue) {
|
|
8228
|
-
if (!
|
|
8229
|
-
throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${
|
|
7964
|
+
if (!Ot(newValue)) {
|
|
7965
|
+
throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
|
|
8230
7966
|
}
|
|
8231
7967
|
// use renderPopoverContent to update popover-content id
|
|
8232
7968
|
this.renderPopoverContent();
|
|
@@ -8267,7 +8003,7 @@ const MgPopover = class {
|
|
|
8267
8003
|
*/
|
|
8268
8004
|
componentWillLoad() {
|
|
8269
8005
|
// Get windows to attach events
|
|
8270
|
-
this.windows =
|
|
8006
|
+
this.windows = Rt(window);
|
|
8271
8007
|
// render mg-popover-content slot
|
|
8272
8008
|
this.renderPopoverContent();
|
|
8273
8009
|
this.validateCloseButton(this.closeButton);
|
|
@@ -8332,7 +8068,7 @@ const MgPopover = class {
|
|
|
8332
8068
|
* @returns HTML Element
|
|
8333
8069
|
*/
|
|
8334
8070
|
render() {
|
|
8335
|
-
return (h(Host, { key: '
|
|
8071
|
+
return (h(Host, { key: 'a2c883c6f1458bfc76d77d944afe99210d0ecdb3' }, h("slot", { key: 'c3d2e25f47c5761be6594cb6cd487e4960e5d30b' }), h("slot", { key: '93bb53d3eac2c2b966eacb00b772faa403b5a86c', name: "content" })));
|
|
8336
8072
|
}
|
|
8337
8073
|
get element() { return getElement(this); }
|
|
8338
8074
|
static get watchers() { return {
|
|
@@ -8343,15 +8079,14 @@ const MgPopover = class {
|
|
|
8343
8079
|
"display": ["handleDisplay"]
|
|
8344
8080
|
}; }
|
|
8345
8081
|
};
|
|
8346
|
-
MgPopover.style =
|
|
8082
|
+
MgPopover.style = mgPopoverCss;
|
|
8347
8083
|
|
|
8348
8084
|
const mgPopoverContentCss = ":host{position:relative;z-index:2000;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)}";
|
|
8349
|
-
const MgPopoverContentStyle0 = mgPopoverContentCss;
|
|
8350
8085
|
|
|
8351
8086
|
const MgPopoverContent = class {
|
|
8352
8087
|
constructor(hostRef) {
|
|
8353
8088
|
registerInstance(this, hostRef);
|
|
8354
|
-
this.hideContent = createEvent(this, "hide-content"
|
|
8089
|
+
this.hideContent = createEvent(this, "hide-content");
|
|
8355
8090
|
/**
|
|
8356
8091
|
* Define if popover has a cross button
|
|
8357
8092
|
*/
|
|
@@ -8359,7 +8094,7 @@ const MgPopoverContent = class {
|
|
|
8359
8094
|
/**
|
|
8360
8095
|
* Component classes
|
|
8361
8096
|
*/
|
|
8362
|
-
this.classCollection = new
|
|
8097
|
+
this.classCollection = new kt(['mg-c-popover-content']);
|
|
8363
8098
|
/**
|
|
8364
8099
|
* Handle action for close button
|
|
8365
8100
|
*/
|
|
@@ -8383,7 +8118,7 @@ const MgPopoverContent = class {
|
|
|
8383
8118
|
componentDidLoad() {
|
|
8384
8119
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
8385
8120
|
const slottedTitleElement = this.element.querySelector('[slot="title"]');
|
|
8386
|
-
if (slottedTitleElement && !
|
|
8121
|
+
if (slottedTitleElement && !Tt(slottedTitleElement, headingTags)) {
|
|
8387
8122
|
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);
|
|
8388
8123
|
}
|
|
8389
8124
|
}
|
|
@@ -8396,15 +8131,14 @@ const MgPopoverContent = class {
|
|
|
8396
8131
|
}
|
|
8397
8132
|
get element() { return getElement(this); }
|
|
8398
8133
|
};
|
|
8399
|
-
MgPopoverContent.style =
|
|
8134
|
+
MgPopoverContent.style = mgPopoverContentCss;
|
|
8400
8135
|
|
|
8401
8136
|
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%)}";
|
|
8402
|
-
const MgSkipLinksStyle0 = mgSkipLinksCss;
|
|
8403
8137
|
|
|
8404
8138
|
const MgSkipLinks = class {
|
|
8405
8139
|
constructor(hostRef) {
|
|
8406
8140
|
registerInstance(this, hostRef);
|
|
8407
|
-
this.goToAnchor = createEvent(this, "go-to-anchor"
|
|
8141
|
+
this.goToAnchor = createEvent(this, "go-to-anchor");
|
|
8408
8142
|
/***********
|
|
8409
8143
|
* Methods *
|
|
8410
8144
|
**********/
|
|
@@ -8418,7 +8152,7 @@ const MgSkipLinks = class {
|
|
|
8418
8152
|
};
|
|
8419
8153
|
}
|
|
8420
8154
|
validateLinks(links) {
|
|
8421
|
-
if (links === undefined || links.length === 0 || links.some(link => !
|
|
8155
|
+
if (links === undefined || links.length === 0 || links.some(link => !Le(link.href) || !link.href.startsWith('#') || !Le(link.label))) {
|
|
8422
8156
|
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.`);
|
|
8423
8157
|
}
|
|
8424
8158
|
}
|
|
@@ -8444,7 +8178,285 @@ const MgSkipLinks = class {
|
|
|
8444
8178
|
"links": ["validateLinks"]
|
|
8445
8179
|
}; }
|
|
8446
8180
|
};
|
|
8447
|
-
MgSkipLinks.style =
|
|
8181
|
+
MgSkipLinks.style = mgSkipLinksCss;
|
|
8182
|
+
|
|
8183
|
+
/**
|
|
8184
|
+
* Sizes
|
|
8185
|
+
*/
|
|
8186
|
+
// Define possible sizes
|
|
8187
|
+
const sizes$1 = ['small', 'medium', 'large', 'xlarge'];
|
|
8188
|
+
/**
|
|
8189
|
+
* Columns
|
|
8190
|
+
*/
|
|
8191
|
+
// Define possible text alignments
|
|
8192
|
+
const textAlignments = ['left', 'center', 'right'];
|
|
8193
|
+
// Define possible data types
|
|
8194
|
+
const dataTypes = ['string', 'numeric', 'date'];
|
|
8195
|
+
|
|
8196
|
+
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%)}";
|
|
8197
|
+
|
|
8198
|
+
/**
|
|
8199
|
+
* Check if value is a valid align object
|
|
8200
|
+
* @param newValue - New value
|
|
8201
|
+
* @returns True if value is a valid align object
|
|
8202
|
+
*/
|
|
8203
|
+
const isValidColumnsObject = (newValue) =>
|
|
8204
|
+
// ensure newValue is an object
|
|
8205
|
+
typeof newValue === 'object' &&
|
|
8206
|
+
!Array.isArray(newValue) &&
|
|
8207
|
+
// Ensure every property is well formatted
|
|
8208
|
+
Object.entries(newValue).every(([key, value]) =>
|
|
8209
|
+
// ensure key is a number
|
|
8210
|
+
!isNaN(parseInt(key)) &&
|
|
8211
|
+
// ensure value is an object
|
|
8212
|
+
typeof value === 'object' &&
|
|
8213
|
+
!Array.isArray(value) &&
|
|
8214
|
+
// ensure value has at least one of the following properties
|
|
8215
|
+
((value.align !== undefined && textAlignments.includes(value.align)) ||
|
|
8216
|
+
(value.sortable !== undefined && typeof value.sortable === 'boolean') ||
|
|
8217
|
+
(value.datatype !== undefined && dataTypes.includes(value.datatype))) &&
|
|
8218
|
+
// ensure no extra properties are present
|
|
8219
|
+
Object.keys(value).every(key => ['align', 'sortable', 'datatype'].includes(key)));
|
|
8220
|
+
/**
|
|
8221
|
+
* Compare values
|
|
8222
|
+
* @param firstValue - First value
|
|
8223
|
+
* @param secondValue - Second value
|
|
8224
|
+
* @param descending - Define descending order
|
|
8225
|
+
* @param datatype - Data type
|
|
8226
|
+
* @returns Comparison result
|
|
8227
|
+
* @example
|
|
8228
|
+
* compareValues('a', 'b', false, 'string'); // -1
|
|
8229
|
+
*/
|
|
8230
|
+
const compareValues = (firstValue, secondValue, descending, datatype) => {
|
|
8231
|
+
if (descending) {
|
|
8232
|
+
const temp = firstValue;
|
|
8233
|
+
firstValue = secondValue;
|
|
8234
|
+
secondValue = temp;
|
|
8235
|
+
}
|
|
8236
|
+
if (datatype === 'date') {
|
|
8237
|
+
return new Date(firstValue).getTime() - new Date(secondValue).getTime();
|
|
8238
|
+
}
|
|
8239
|
+
return firstValue.localeCompare(secondValue, undefined, { numeric: datatype === 'numeric' });
|
|
8240
|
+
};
|
|
8241
|
+
const MgTable = class {
|
|
8242
|
+
constructor(hostRef) {
|
|
8243
|
+
registerInstance(this, hostRef);
|
|
8244
|
+
// Classes
|
|
8245
|
+
this.componentClass = 'mg-c-table';
|
|
8246
|
+
this.componentWrapperClass = 'mg-c-table-wrapper';
|
|
8247
|
+
this.classFullWidth = 'mg-c-table--full-width';
|
|
8248
|
+
// Alignment stylesheet
|
|
8249
|
+
this.alignmentStylesheet = new CSSStyleSheet();
|
|
8250
|
+
/**
|
|
8251
|
+
* Define table size
|
|
8252
|
+
*/
|
|
8253
|
+
this.size = 'medium';
|
|
8254
|
+
/**
|
|
8255
|
+
* Define if table fits its parent element
|
|
8256
|
+
*/
|
|
8257
|
+
this.fullWidth = false;
|
|
8258
|
+
/**
|
|
8259
|
+
* Class collection
|
|
8260
|
+
*/
|
|
8261
|
+
this.classCollection = new kt([this.componentClass]);
|
|
8262
|
+
}
|
|
8263
|
+
watchSize(newValue, oldValue) {
|
|
8264
|
+
if (!sizes$1.includes(newValue)) {
|
|
8265
|
+
throw new Error(`<mg-table> prop "size" must be one of: ${sizes$1.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
8266
|
+
}
|
|
8267
|
+
else {
|
|
8268
|
+
if (oldValue !== undefined) {
|
|
8269
|
+
this.classCollection.delete(`mg-c-table--size-${oldValue}`);
|
|
8270
|
+
}
|
|
8271
|
+
this.classCollection.add(`mg-c-table--size-${newValue}`);
|
|
8272
|
+
}
|
|
8273
|
+
}
|
|
8274
|
+
watchFullWidth(newValue) {
|
|
8275
|
+
if (newValue) {
|
|
8276
|
+
this.classCollection.add(this.classFullWidth);
|
|
8277
|
+
}
|
|
8278
|
+
else {
|
|
8279
|
+
this.classCollection.delete(this.classFullWidth);
|
|
8280
|
+
}
|
|
8281
|
+
}
|
|
8282
|
+
watchColumns(newValue) {
|
|
8283
|
+
if (newValue !== undefined && !isValidColumnsObject(newValue)) {
|
|
8284
|
+
throw new Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${zt(newValue)}.`);
|
|
8285
|
+
}
|
|
8286
|
+
}
|
|
8287
|
+
/**
|
|
8288
|
+
* Render Table
|
|
8289
|
+
* @param table - Table element
|
|
8290
|
+
*/
|
|
8291
|
+
renderTable(table) {
|
|
8292
|
+
let isSortable = false;
|
|
8293
|
+
// Remove table classes
|
|
8294
|
+
table.className = '';
|
|
8295
|
+
// Add table classes
|
|
8296
|
+
table.classList.add(...this.classCollection.classes);
|
|
8297
|
+
// Set columns based on columns prop
|
|
8298
|
+
if (this.columns !== undefined) {
|
|
8299
|
+
// Store original rows
|
|
8300
|
+
const rowsDefault = Array.from(table.querySelectorAll('tbody tr'));
|
|
8301
|
+
// Apply columns settings
|
|
8302
|
+
Object.entries(this.columns).forEach(([key, value]) => {
|
|
8303
|
+
// Add alignment to stylesheet
|
|
8304
|
+
if (value.align !== undefined) {
|
|
8305
|
+
this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:${value.align}}}`);
|
|
8306
|
+
}
|
|
8307
|
+
// if align is not defined and datatype is number, align right
|
|
8308
|
+
else if (value.datatype === 'numeric') {
|
|
8309
|
+
this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:right}}`);
|
|
8310
|
+
}
|
|
8311
|
+
// Define if column is sortable
|
|
8312
|
+
if (value.sortable) {
|
|
8313
|
+
isSortable = true;
|
|
8314
|
+
// Add sortable class to table header
|
|
8315
|
+
const sortableHeader = table.querySelector(`thead td:nth-child(${key}),thead th:nth-child(${key})`);
|
|
8316
|
+
// Create button
|
|
8317
|
+
const button = document.createElement('button');
|
|
8318
|
+
button.classList.add('mg-c-table__sort-button');
|
|
8319
|
+
// Append button to header
|
|
8320
|
+
const sortableHeaderContent = sortableHeader.innerHTML;
|
|
8321
|
+
sortableHeader.innerHTML = '';
|
|
8322
|
+
button.innerHTML = sortableHeaderContent;
|
|
8323
|
+
// Set icon
|
|
8324
|
+
const icon = document.createElement('mg-icon');
|
|
8325
|
+
icon.setAttribute('icon', 'arrows-up-down');
|
|
8326
|
+
// Append icon to button
|
|
8327
|
+
button.append(icon);
|
|
8328
|
+
sortableHeader.append(button);
|
|
8329
|
+
// Add event listener
|
|
8330
|
+
button.addEventListener('click', () => {
|
|
8331
|
+
// Reset aria pressed
|
|
8332
|
+
table.querySelectorAll(`thead td:not(:nth-child(${key})) [aria-pressed],thead th:not(:nth-child(${key})) [aria-pressed]`).forEach(ariaPressed => {
|
|
8333
|
+
ariaPressed.removeAttribute('aria-pressed');
|
|
8334
|
+
ariaPressed.querySelector('mg-icon').setAttribute('icon', 'arrows-up-down');
|
|
8335
|
+
});
|
|
8336
|
+
// Reset aria sort
|
|
8337
|
+
table.querySelectorAll(`thead td:not(:nth-child(${key}))[aria-sort],thead th:not(:nth-child(${key}))[aria-sort]`).forEach(ariaSort => {
|
|
8338
|
+
ariaSort.removeAttribute('aria-sort');
|
|
8339
|
+
});
|
|
8340
|
+
// Set aria pressed
|
|
8341
|
+
button.setAttribute('aria-pressed', 'true');
|
|
8342
|
+
// Manage sort order
|
|
8343
|
+
// Get sort order
|
|
8344
|
+
let sortOrder = sortableHeader.getAttribute('aria-sort');
|
|
8345
|
+
// First click sort asc
|
|
8346
|
+
if ([null, 'none'].includes(sortOrder)) {
|
|
8347
|
+
sortableHeader.setAttribute('aria-sort', 'ascending');
|
|
8348
|
+
}
|
|
8349
|
+
// Second click sort desc
|
|
8350
|
+
else if (sortOrder === 'ascending') {
|
|
8351
|
+
sortableHeader.setAttribute('aria-sort', 'descending');
|
|
8352
|
+
}
|
|
8353
|
+
// Third click remove sort
|
|
8354
|
+
else {
|
|
8355
|
+
sortableHeader.setAttribute('aria-sort', 'none');
|
|
8356
|
+
}
|
|
8357
|
+
// Update sort order
|
|
8358
|
+
sortOrder = sortableHeader.getAttribute('aria-sort');
|
|
8359
|
+
// Update button icon
|
|
8360
|
+
const icon = button.querySelector('mg-icon');
|
|
8361
|
+
let iconType = 'arrows-up-down';
|
|
8362
|
+
if (sortOrder === 'ascending') {
|
|
8363
|
+
iconType = 'arrow-up';
|
|
8364
|
+
}
|
|
8365
|
+
else if (sortOrder === 'descending') {
|
|
8366
|
+
iconType = 'arrow-down';
|
|
8367
|
+
}
|
|
8368
|
+
icon.setAttribute('icon', iconType);
|
|
8369
|
+
// If sort order is none, return to original order
|
|
8370
|
+
if (sortOrder === 'none') {
|
|
8371
|
+
// Append rows to table
|
|
8372
|
+
rowsDefault.forEach(row => table.querySelector('tbody').append(row));
|
|
8373
|
+
return;
|
|
8374
|
+
}
|
|
8375
|
+
// Set a copy of rows
|
|
8376
|
+
const rows = Array.from(table.querySelectorAll('tbody tr'));
|
|
8377
|
+
// Sort rows
|
|
8378
|
+
rows.sort((a, b) => {
|
|
8379
|
+
var _a, _b;
|
|
8380
|
+
// Get cells
|
|
8381
|
+
const cellA = a.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);
|
|
8382
|
+
const cellB = b.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);
|
|
8383
|
+
// Get cell values
|
|
8384
|
+
const cellValueA = (_a = cellA.dataset.sort) !== null && _a !== void 0 ? _a : cellA.textContent;
|
|
8385
|
+
const cellValueB = (_b = cellB.dataset.sort) !== null && _b !== void 0 ? _b : cellB.textContent;
|
|
8386
|
+
// Sort cells based on sort order
|
|
8387
|
+
return compareValues(cellValueA, cellValueB, sortOrder === 'descending', value.datatype);
|
|
8388
|
+
});
|
|
8389
|
+
// Append rows to table
|
|
8390
|
+
rows.forEach(row => table.querySelector('tbody').append(row));
|
|
8391
|
+
});
|
|
8392
|
+
}
|
|
8393
|
+
});
|
|
8394
|
+
}
|
|
8395
|
+
// Add alignment to columns
|
|
8396
|
+
this.element.shadowRoot.adoptedStyleSheets = [...this.element.shadowRoot.adoptedStyleSheets, this.alignmentStylesheet];
|
|
8397
|
+
// Create div wrapper for responsive behavior
|
|
8398
|
+
const divWrapper = document.createElement('div');
|
|
8399
|
+
divWrapper.setAttribute('class', this.componentWrapperClass);
|
|
8400
|
+
divWrapper.setAttribute('tabindex', '0');
|
|
8401
|
+
divWrapper.setAttribute('role', 'region');
|
|
8402
|
+
// Get table title
|
|
8403
|
+
let captionTable = table.querySelector('caption');
|
|
8404
|
+
// If table is sortable we must add a caption
|
|
8405
|
+
if (captionTable === null && isSortable) {
|
|
8406
|
+
captionTable = document.createElement('caption');
|
|
8407
|
+
table.prepend(captionTable);
|
|
8408
|
+
}
|
|
8409
|
+
if (captionTable !== null) {
|
|
8410
|
+
// Ensure caption is not visible (otherwhise the table does not have rounded corners)
|
|
8411
|
+
captionTable.className = 'mg-u-visually-hidden';
|
|
8412
|
+
// Link caption to div
|
|
8413
|
+
if (!Le(captionTable.id)) {
|
|
8414
|
+
captionTable.setAttribute('id', xt(`${this.componentClass}-caption`));
|
|
8415
|
+
}
|
|
8416
|
+
divWrapper.setAttribute('aria-labelledby', captionTable.id);
|
|
8417
|
+
// Add sortable caption if neeeded
|
|
8418
|
+
if (isSortable) {
|
|
8419
|
+
captionTable.innerHTML = `${captionTable.innerHTML} ${this.messages.table.sortableCaption}`.trim();
|
|
8420
|
+
}
|
|
8421
|
+
}
|
|
8422
|
+
divWrapper.append(table);
|
|
8423
|
+
// Remove existing table from shadow root
|
|
8424
|
+
const existingTable = this.element.shadowRoot.querySelector(`.${this.componentWrapperClass}`);
|
|
8425
|
+
if (existingTable !== null) {
|
|
8426
|
+
existingTable.remove();
|
|
8427
|
+
}
|
|
8428
|
+
// Append table
|
|
8429
|
+
this.element.shadowRoot.append(divWrapper);
|
|
8430
|
+
}
|
|
8431
|
+
/*************
|
|
8432
|
+
* Lifecycle *
|
|
8433
|
+
*************/
|
|
8434
|
+
componentWillLoad() {
|
|
8435
|
+
this.messages = initLocales(this.element).messages;
|
|
8436
|
+
}
|
|
8437
|
+
/**
|
|
8438
|
+
* Set variables and validate props
|
|
8439
|
+
*/
|
|
8440
|
+
componentDidLoad() {
|
|
8441
|
+
this.watchSize(this.size);
|
|
8442
|
+
this.watchFullWidth(this.fullWidth);
|
|
8443
|
+
this.watchColumns(this.columns);
|
|
8444
|
+
this.renderTable(this.element.querySelector('table'));
|
|
8445
|
+
}
|
|
8446
|
+
/**
|
|
8447
|
+
* Update table
|
|
8448
|
+
*/
|
|
8449
|
+
componentWillUpdate() {
|
|
8450
|
+
this.renderTable(this.element.shadowRoot.querySelector('table'));
|
|
8451
|
+
}
|
|
8452
|
+
get element() { return getElement(this); }
|
|
8453
|
+
static get watchers() { return {
|
|
8454
|
+
"size": ["watchSize"],
|
|
8455
|
+
"fullWidth": ["watchFullWidth"],
|
|
8456
|
+
"columns": ["watchColumns"]
|
|
8457
|
+
}; }
|
|
8458
|
+
};
|
|
8459
|
+
MgTable.style = mgTableCss;
|
|
8448
8460
|
|
|
8449
8461
|
/**
|
|
8450
8462
|
* Available tabs items status
|
|
@@ -8461,7 +8473,6 @@ const Status = {
|
|
|
8461
8473
|
const sizes = ['medium', 'large'];
|
|
8462
8474
|
|
|
8463
8475
|
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}";
|
|
8464
|
-
const MgTabsStyle0 = mgTabsCss;
|
|
8465
8476
|
|
|
8466
8477
|
/**
|
|
8467
8478
|
* type TabItem validation function
|
|
@@ -8472,7 +8483,7 @@ const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'stri
|
|
|
8472
8483
|
const MgTabs = class {
|
|
8473
8484
|
constructor(hostRef) {
|
|
8474
8485
|
registerInstance(this, hostRef);
|
|
8475
|
-
this.activeTabChange = createEvent(this, "active-tab-change"
|
|
8486
|
+
this.activeTabChange = createEvent(this, "active-tab-change");
|
|
8476
8487
|
/************
|
|
8477
8488
|
* Internal *
|
|
8478
8489
|
************/
|
|
@@ -8484,7 +8495,7 @@ const MgTabs = class {
|
|
|
8484
8495
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
8485
8496
|
* If not set, it will be created.
|
|
8486
8497
|
*/
|
|
8487
|
-
this.identifier =
|
|
8498
|
+
this.identifier = xt('mg-tabs');
|
|
8488
8499
|
/**
|
|
8489
8500
|
* Define tabs size
|
|
8490
8501
|
*/
|
|
@@ -8496,7 +8507,7 @@ const MgTabs = class {
|
|
|
8496
8507
|
/**
|
|
8497
8508
|
* Component classes
|
|
8498
8509
|
*/
|
|
8499
|
-
this.classCollection = new
|
|
8510
|
+
this.classCollection = new kt(['mg-c-tabs']);
|
|
8500
8511
|
/**
|
|
8501
8512
|
* Validate that new tab status can be `Status.ACTIVE`
|
|
8502
8513
|
* @param tab - tab item
|
|
@@ -8594,7 +8605,7 @@ const MgTabs = class {
|
|
|
8594
8605
|
*/
|
|
8595
8606
|
this.resetFocus = () => {
|
|
8596
8607
|
// update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
|
|
8597
|
-
|
|
8608
|
+
Mt(() => {
|
|
8598
8609
|
this.tabFocus = undefined;
|
|
8599
8610
|
Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
|
|
8600
8611
|
tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
|
|
@@ -8611,30 +8622,30 @@ const MgTabs = class {
|
|
|
8611
8622
|
};
|
|
8612
8623
|
}
|
|
8613
8624
|
watchIdentifier(newValue) {
|
|
8614
|
-
if (!
|
|
8615
|
-
console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${
|
|
8625
|
+
if (!Ot(newValue)) {
|
|
8626
|
+
console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
|
|
8616
8627
|
}
|
|
8617
8628
|
}
|
|
8618
8629
|
validateLabel(newValue) {
|
|
8619
|
-
if (!
|
|
8620
|
-
throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${
|
|
8630
|
+
if (!Le(newValue)) {
|
|
8631
|
+
throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${zt(newValue)}.`);
|
|
8621
8632
|
}
|
|
8622
8633
|
}
|
|
8623
8634
|
validateSize(newValue) {
|
|
8624
8635
|
if (!sizes.includes(newValue)) {
|
|
8625
|
-
throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${
|
|
8636
|
+
throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
8626
8637
|
}
|
|
8627
8638
|
this.classCollection.add(`mg-c-tabs--size-${this.size}`);
|
|
8628
8639
|
}
|
|
8629
8640
|
validateItems(newValue) {
|
|
8630
8641
|
// String array
|
|
8631
|
-
if (
|
|
8642
|
+
if (At(newValue))
|
|
8632
8643
|
this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
|
|
8633
8644
|
// Object array
|
|
8634
8645
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
8635
8646
|
this.tabs = newValue;
|
|
8636
8647
|
else
|
|
8637
|
-
throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${
|
|
8648
|
+
throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${zt(newValue)}.`);
|
|
8638
8649
|
}
|
|
8639
8650
|
validateActiveTab(newValue) {
|
|
8640
8651
|
// when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
|
|
@@ -8659,7 +8670,7 @@ const MgTabs = class {
|
|
|
8659
8670
|
this.activeTabChange.emit(newValue);
|
|
8660
8671
|
}
|
|
8661
8672
|
else {
|
|
8662
|
-
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: ${
|
|
8673
|
+
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: ${zt(newValue)}.`);
|
|
8663
8674
|
}
|
|
8664
8675
|
}
|
|
8665
8676
|
/*************
|
|
@@ -8711,7 +8722,7 @@ const MgTabs = class {
|
|
|
8711
8722
|
"activeTab": ["validateActiveTab"]
|
|
8712
8723
|
}; }
|
|
8713
8724
|
};
|
|
8714
|
-
MgTabs.style =
|
|
8725
|
+
MgTabs.style = mgTabsCss;
|
|
8715
8726
|
|
|
8716
8727
|
/**
|
|
8717
8728
|
* List of all possibles variants
|
|
@@ -8719,7 +8730,6 @@ MgTabs.style = MgTabsStyle0;
|
|
|
8719
8730
|
const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
|
|
8720
8731
|
|
|
8721
8732
|
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}";
|
|
8722
|
-
const MgTagStyle0 = mgTagCss;
|
|
8723
8733
|
|
|
8724
8734
|
const MgTag = class {
|
|
8725
8735
|
constructor(hostRef) {
|
|
@@ -8733,15 +8743,23 @@ const MgTag = class {
|
|
|
8733
8743
|
/**
|
|
8734
8744
|
* Define tag variant
|
|
8735
8745
|
*/
|
|
8736
|
-
this.variant =
|
|
8746
|
+
this.variant = 'primary';
|
|
8747
|
+
/**
|
|
8748
|
+
* Define if tag is using outline style
|
|
8749
|
+
*/
|
|
8750
|
+
this.outline = false;
|
|
8751
|
+
/**
|
|
8752
|
+
* Define if tag is using soft style
|
|
8753
|
+
*/
|
|
8754
|
+
this.soft = false;
|
|
8737
8755
|
/**
|
|
8738
8756
|
* Component classes
|
|
8739
8757
|
*/
|
|
8740
|
-
this.classCollection = new
|
|
8758
|
+
this.classCollection = new kt(['mg-c-tag']);
|
|
8741
8759
|
}
|
|
8742
8760
|
validateVariant(newValue, oldValue) {
|
|
8743
8761
|
if (!variants.includes(newValue)) {
|
|
8744
|
-
throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${
|
|
8762
|
+
throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${zt(newValue)}.`);
|
|
8745
8763
|
}
|
|
8746
8764
|
else {
|
|
8747
8765
|
if (oldValue !== undefined) {
|
|
@@ -8774,7 +8792,7 @@ const MgTag = class {
|
|
|
8774
8792
|
* @param textContent - html element textContent property
|
|
8775
8793
|
*/
|
|
8776
8794
|
validateTextContent(textContent) {
|
|
8777
|
-
if (!
|
|
8795
|
+
if (!Le(textContent))
|
|
8778
8796
|
throw new Error('<mg-tag> slot must contain a text content.');
|
|
8779
8797
|
}
|
|
8780
8798
|
/*************
|
|
@@ -8794,7 +8812,7 @@ const MgTag = class {
|
|
|
8794
8812
|
* @returns HTML Element
|
|
8795
8813
|
*/
|
|
8796
8814
|
render() {
|
|
8797
|
-
return (h("span", { key: '
|
|
8815
|
+
return (h("span", { key: '2517dd6020afcf91017c9cfb6a1f3037c0b6a7c4', class: this.classCollection.join() }, h("slot", { key: '0f0f0f82274342a87d98125631174f40060105af' })));
|
|
8798
8816
|
}
|
|
8799
8817
|
get element() { return getElement(this); }
|
|
8800
8818
|
static get watchers() { return {
|
|
@@ -8803,7 +8821,7 @@ const MgTag = class {
|
|
|
8803
8821
|
"soft": ["validateSoft"]
|
|
8804
8822
|
}; }
|
|
8805
8823
|
};
|
|
8806
|
-
MgTag.style =
|
|
8824
|
+
MgTag.style = mgTagCss;
|
|
8807
8825
|
|
|
8808
8826
|
const Guard = {
|
|
8809
8827
|
FOCUS: 'focus',
|
|
@@ -8813,7 +8831,6 @@ const Guard = {
|
|
|
8813
8831
|
};
|
|
8814
8832
|
|
|
8815
8833
|
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}";
|
|
8816
|
-
const MgTooltipStyle0 = mgTooltipCss;
|
|
8817
8834
|
|
|
8818
8835
|
/**
|
|
8819
8836
|
* HTMLMgButtonElement type guard
|
|
@@ -8828,7 +8845,7 @@ const MgTooltip = class {
|
|
|
8828
8845
|
* Sets an `id` attribute.
|
|
8829
8846
|
* Needed by the input for accessibility `aria-decribedby`.
|
|
8830
8847
|
*/
|
|
8831
|
-
this.identifier =
|
|
8848
|
+
this.identifier = xt('mg-tooltip');
|
|
8832
8849
|
/**
|
|
8833
8850
|
* Tooltip placement
|
|
8834
8851
|
*/
|
|
@@ -8848,7 +8865,7 @@ const MgTooltip = class {
|
|
|
8848
8865
|
// Make the tooltip visible
|
|
8849
8866
|
this.mgTooltipContent.dataset.show = '';
|
|
8850
8867
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
8851
|
-
|
|
8868
|
+
Mt(() => {
|
|
8852
8869
|
this.windows.forEach((localWindow) => {
|
|
8853
8870
|
localWindow.addEventListener('click', this.handleClickOutside, false);
|
|
8854
8871
|
localWindow.addEventListener('keydown', this.handlePressEscape, false);
|
|
@@ -9067,15 +9084,15 @@ const MgTooltip = class {
|
|
|
9067
9084
|
};
|
|
9068
9085
|
}
|
|
9069
9086
|
watchIdentifier(newValue) {
|
|
9070
|
-
if (!
|
|
9071
|
-
throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${
|
|
9087
|
+
if (!Ot(newValue)) {
|
|
9088
|
+
throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
|
|
9072
9089
|
}
|
|
9073
9090
|
// use renderTooltipContent to update tooltip-content id
|
|
9074
9091
|
this.renderTooltipContent();
|
|
9075
9092
|
}
|
|
9076
9093
|
watchMessage(newValue) {
|
|
9077
|
-
if (!
|
|
9078
|
-
throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${
|
|
9094
|
+
if (!Le(newValue)) {
|
|
9095
|
+
throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${zt(newValue)}.`);
|
|
9079
9096
|
}
|
|
9080
9097
|
if (this.mgTooltipContent !== undefined)
|
|
9081
9098
|
this.mgTooltipContent.message = newValue;
|
|
@@ -9134,7 +9151,7 @@ const MgTooltip = class {
|
|
|
9134
9151
|
*/
|
|
9135
9152
|
componentWillLoad() {
|
|
9136
9153
|
// Get windows to attach events
|
|
9137
|
-
this.windows =
|
|
9154
|
+
this.windows = Rt(window);
|
|
9138
9155
|
// Get tooltip element
|
|
9139
9156
|
this.renderTooltipContent();
|
|
9140
9157
|
//validate properties
|
|
@@ -9153,7 +9170,7 @@ const MgTooltip = class {
|
|
|
9153
9170
|
// get slotted element wich is not the tooltip
|
|
9154
9171
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
9155
9172
|
// Get interactive element
|
|
9156
|
-
const interactiveElement = slotElement.matches(
|
|
9173
|
+
const interactiveElement = slotElement.matches(jt) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(jt);
|
|
9157
9174
|
this.setTooltipedElement(interactiveElement || slotElement);
|
|
9158
9175
|
// Check if slotted element is a disabled mg-button
|
|
9159
9176
|
// In this case we wrap the mg-button into a div to enable the tooltip
|
|
@@ -9202,7 +9219,7 @@ const MgTooltip = class {
|
|
|
9202
9219
|
* @returns HTML Element
|
|
9203
9220
|
*/
|
|
9204
9221
|
render() {
|
|
9205
|
-
return (h(Host, { key: '
|
|
9222
|
+
return (h(Host, { key: '31d97272cfd3448abf9ed9cda62fdec0a356d422' }, h("slot", { key: '8fbf8343471f53591caacc3ff4c4b8aaf4577c4f' }), h("slot", { key: '6f4eab4c33e9ec07e0fe7ffa63de4921f4b27e0c', name: "content" })));
|
|
9206
9223
|
}
|
|
9207
9224
|
get element() { return getElement(this); }
|
|
9208
9225
|
static get watchers() { return {
|
|
@@ -9213,10 +9230,9 @@ const MgTooltip = class {
|
|
|
9213
9230
|
"disabled": ["watchDisabled"]
|
|
9214
9231
|
}; }
|
|
9215
9232
|
};
|
|
9216
|
-
MgTooltip.style =
|
|
9233
|
+
MgTooltip.style = mgTooltipCss;
|
|
9217
9234
|
|
|
9218
9235
|
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))}";
|
|
9219
|
-
const MgTooltipContentStyle0 = mgTooltipContentCss;
|
|
9220
9236
|
|
|
9221
9237
|
const MgTooltipContent = class {
|
|
9222
9238
|
constructor(hostRef) {
|
|
@@ -9233,8 +9249,9 @@ const MgTooltipContent = class {
|
|
|
9233
9249
|
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" })));
|
|
9234
9250
|
}
|
|
9235
9251
|
};
|
|
9236
|
-
MgTooltipContent.style =
|
|
9252
|
+
MgTooltipContent.style = mgTooltipContentCss;
|
|
9237
9253
|
|
|
9238
|
-
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, MgTabs as mg_tabs, MgTag as mg_tag, MgTooltip as mg_tooltip, MgTooltipContent as mg_tooltip_content };
|
|
9254
|
+
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 };
|
|
9255
|
+
//# 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
|
|
9239
9256
|
|
|
9240
|
-
//# sourceMappingURL=mg-action-
|
|
9257
|
+
//# sourceMappingURL=mg-action-more_37.entry.js.map
|