@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,11 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const index$1 = require('./index-b7923724.js');
|
|
8
|
-
const mgInput_conf = require('./mg-input.conf-5bbcea79.js');
|
|
3
|
+
var index = require('./index-CATFkm3O.js');
|
|
4
|
+
var index_es = require('./index.es-jXqiN1uw.js');
|
|
5
|
+
var index$1 = require('./index-CTU2m-sy.js');
|
|
6
|
+
var mgInput_conf = require('./mg-input.conf-WTsvDfpC.js');
|
|
9
7
|
|
|
10
8
|
/**
|
|
11
9
|
* Available menu item status values
|
|
@@ -31,10 +29,9 @@ const directions$1 = {
|
|
|
31
29
|
/**
|
|
32
30
|
* List of all possibles sizes
|
|
33
31
|
*/
|
|
34
|
-
const sizes$
|
|
32
|
+
const sizes$5 = ['medium', 'large', 'xlarge'];
|
|
35
33
|
|
|
36
34
|
const mgActionMoreCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{--mg-c-popover-padding-vertical:var(--mg-b-size-8);--mg-c-popover-padding-horizontal:0;--mg-c-popover-max-width:unset}.mg-c-action-more__divider{--mg-c-divider-spacing-vertical:var(--mg-b-size-4)}.mg-c-action-more__chevron{transition:200ms}.mg-c-action-more__chevron--rotate.mg-c-action-more__chevron{transform:rotate(180deg)}";
|
|
37
|
-
const MgActionMoreStyle0 = mgActionMoreCss;
|
|
38
35
|
|
|
39
36
|
/**
|
|
40
37
|
* MgActionMore['items'] type guard
|
|
@@ -78,11 +75,15 @@ const MgActionMore = class {
|
|
|
78
75
|
************/
|
|
79
76
|
this.name = 'mg-action-more';
|
|
80
77
|
this.classBase = 'mg-c-action-more';
|
|
81
|
-
this.mgPopoverIdentifier = index_es.
|
|
78
|
+
this.mgPopoverIdentifier = index_es.xt(this.name);
|
|
82
79
|
/**
|
|
83
80
|
* Define button properties
|
|
84
81
|
*/
|
|
85
82
|
this.button = { variant: 'flat', isIcon: true };
|
|
83
|
+
/**
|
|
84
|
+
* Define if chevron is display
|
|
85
|
+
*/
|
|
86
|
+
this.displayChevron = false;
|
|
86
87
|
/**
|
|
87
88
|
* Menu expanded state
|
|
88
89
|
*/
|
|
@@ -121,15 +122,15 @@ const MgActionMore = class {
|
|
|
121
122
|
}
|
|
122
123
|
validateItems(newValue) {
|
|
123
124
|
if (!isMgActionMoreItems(newValue)) {
|
|
124
|
-
throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${index_es.
|
|
125
|
+
throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${index_es.zt(newValue)}.`);
|
|
125
126
|
}
|
|
126
127
|
else if (isMgActionMoreItems(newValue) && newValue.length > 0 && (isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {
|
|
127
|
-
throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${index_es.
|
|
128
|
+
throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${index_es.zt(newValue)}.`);
|
|
128
129
|
}
|
|
129
130
|
}
|
|
130
131
|
validateIcon(newValue) {
|
|
131
132
|
if (newValue && !isMgActionMoreIcon(newValue)) {
|
|
132
|
-
throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${index_es.
|
|
133
|
+
throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${index_es.zt(newValue)}.`);
|
|
133
134
|
}
|
|
134
135
|
else if ((newValue === null || newValue === void 0 ? void 0 : newValue.icon) === undefined && Boolean(this.button.isIcon)) {
|
|
135
136
|
this.icon = { icon: 'ellipsis' };
|
|
@@ -137,7 +138,7 @@ const MgActionMore = class {
|
|
|
137
138
|
}
|
|
138
139
|
validateButton(newValue) {
|
|
139
140
|
if (newValue && !isMgActionMoreButton(newValue)) {
|
|
140
|
-
throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${index_es.
|
|
141
|
+
throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${index_es.zt(newValue)}.`);
|
|
141
142
|
}
|
|
142
143
|
}
|
|
143
144
|
validateDisplayChevron(newValue) {
|
|
@@ -186,7 +187,7 @@ const MgActionMore = class {
|
|
|
186
187
|
"displayChevron": ["validateDisplayChevron"]
|
|
187
188
|
}; }
|
|
188
189
|
};
|
|
189
|
-
MgActionMore.style =
|
|
190
|
+
MgActionMore.style = mgActionMoreCss;
|
|
190
191
|
|
|
191
192
|
/**
|
|
192
193
|
* List of all possibles variants
|
|
@@ -194,7 +195,6 @@ MgActionMore.style = MgActionMoreStyle0;
|
|
|
194
195
|
const variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
|
|
195
196
|
|
|
196
197
|
const mgBadgeCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-badge-size: Defines the height and minimum width of the badge. The default value is `--mg-b-size-16`.\n * @prop --mg-c-badge-font-size: Defines the font size of the badge. The default value is `--mg-b-font-size-small`.\n * @prop --mg-c-badge-color-text: Defines the font color of the badge when used with the `text-color` variant and without `outline`. The default value is `--mg-b-color-light`.\n */.mg-c-badge{min-width:var(--mg-c-badge-size);height:var(--mg-c-badge-size);box-sizing:border-box;padding:0 var(--mg-b-size-4);border:var(--mg-b-size-border) solid;border-radius:calc(var(--mg-c-badge-size)/2);font-size:var(--mg-c-badge-font-size);font-weight:600;line-height:var(--mg-c-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:var(--mg-b-color-primary);background-color:var(--mg-b-color-primary);color:var(--mg-b-color-text-on-primary)}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-primary)}.mg-c-badge.mg-c-badge--secondary{border-color:var(--mg-b-color-secondary);background-color:var(--mg-b-color-secondary);color:var(--mg-b-color-text-on-secondary)}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-secondary)}.mg-c-badge.mg-c-badge--danger{border-color:var(--mg-b-color-danger);background-color:var(--mg-b-color-danger);color:var(--mg-b-color-text-on-danger)}.mg-c-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-danger)}.mg-c-badge.mg-c-badge--info{border-color:var(--mg-b-color-info);background-color:var(--mg-b-color-info);color:var(--mg-b-color-text-on-info)}.mg-c-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-info)}.mg-c-badge.mg-c-badge--success{border-color:var(--mg-b-color-success);background-color:var(--mg-b-color-success);color:var(--mg-b-color-text-on-success)}.mg-c-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-success)}.mg-c-badge.mg-c-badge--warning{border-color:var(--mg-b-color-warning);background-color:var(--mg-b-color-warning);color:var(--mg-b-color-text-on-warning)}.mg-c-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-warning)}.mg-c-badge.mg-c-badge--text-color{border-color:currentcolor;background-color:currentcolor}.mg-c-badge.mg-c-badge--text-color .mg-c-badge__value{color:var(--mg-c-badge-color-text, var(--mg-b-color-light))}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline{background-color:rgba(0,0,0,0)}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline .mg-c-badge__value{color:currentcolor}.mg-c-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
|
|
197
|
-
const MgBadgeStyle0 = mgBadgeCss;
|
|
198
198
|
|
|
199
199
|
const MgBadge = class {
|
|
200
200
|
constructor(hostRef) {
|
|
@@ -207,25 +207,29 @@ const MgBadge = class {
|
|
|
207
207
|
/**
|
|
208
208
|
* Define badge variant
|
|
209
209
|
*/
|
|
210
|
-
this.variant =
|
|
210
|
+
this.variant = 'info';
|
|
211
|
+
/**
|
|
212
|
+
* Define if button is using outline style
|
|
213
|
+
*/
|
|
214
|
+
this.outline = false;
|
|
211
215
|
/**
|
|
212
216
|
* Component classes
|
|
213
217
|
*/
|
|
214
|
-
this.classCollection = new index_es.
|
|
218
|
+
this.classCollection = new index_es.kt(['mg-c-badge']);
|
|
215
219
|
}
|
|
216
220
|
validateValue(newValue) {
|
|
217
221
|
if (/^[^A-Z]+$/i.exec(`${newValue}`) === null) {
|
|
218
|
-
throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${index_es.
|
|
222
|
+
throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${index_es.zt(newValue)}.`);
|
|
219
223
|
}
|
|
220
224
|
}
|
|
221
225
|
validateLabel(newValue) {
|
|
222
|
-
if (!index_es.
|
|
223
|
-
throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${index_es.
|
|
226
|
+
if (!index_es.Le(newValue)) {
|
|
227
|
+
throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${index_es.zt(newValue)}.`);
|
|
224
228
|
}
|
|
225
229
|
}
|
|
226
230
|
validateVariant(newValue, oldValue) {
|
|
227
231
|
if (!variants$4.includes(newValue)) {
|
|
228
|
-
throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${index_es.
|
|
232
|
+
throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
229
233
|
}
|
|
230
234
|
else {
|
|
231
235
|
if (oldValue !== undefined) {
|
|
@@ -254,7 +258,7 @@ const MgBadge = class {
|
|
|
254
258
|
* @returns HTML Element
|
|
255
259
|
*/
|
|
256
260
|
render() {
|
|
257
|
-
return (index.h("span", { key: '
|
|
261
|
+
return (index.h("span", { key: 'b5d63ec3facd86cae8b8612a5318fcc8c63287a9', class: this.classCollection.join() }, index.h("span", { key: '350de0e420b7a7d432cd8179b4c353375d8bf185', class: "mg-c-badge__value" }, this.value), index.h("span", { key: '279602e43db9644f673ddbbd79970f07439c6aad', class: "mg-u-visually-hidden" }, this.label)));
|
|
258
262
|
}
|
|
259
263
|
static get watchers() { return {
|
|
260
264
|
"value": ["validateValue"],
|
|
@@ -263,24 +267,23 @@ const MgBadge = class {
|
|
|
263
267
|
"outline": ["validateOutline"]
|
|
264
268
|
}; }
|
|
265
269
|
};
|
|
266
|
-
MgBadge.style =
|
|
270
|
+
MgBadge.style = mgBadgeCss;
|
|
267
271
|
|
|
268
272
|
/**
|
|
269
273
|
* List of all possibles sizes
|
|
270
274
|
*/
|
|
271
|
-
const sizes$
|
|
275
|
+
const sizes$4 = ['medium', 'large'];
|
|
272
276
|
/**
|
|
273
277
|
* List of all possibles variants
|
|
274
278
|
*/
|
|
275
279
|
const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
|
|
276
280
|
|
|
277
281
|
const mgButtonCss = "/*!\n * @prop --mg-c-button-border-radius: Defines the border radius of the button. The default value is `--mg-b-size-radius`.\n * @prop --mg-c-button-border-top-width: Defines the top border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-right-width: Defines the right border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-bottom-width: Defines the bottom border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-left-width: Defines the left border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-radius-top-left: Defines the top left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-top-right: Defines the top right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-right: Defines the bottom right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-left: Defines the bottom left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-font-weight: Defines the font weight of the button. Unset by default, fallback on `normal`.\n * @prop --mg-c-button-icon-border-radius: Defines the border radius of the button in icon mode. The default value is `--mg-b-size-min-height`.\n */:host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{/*!\n * @prop --mg-c-button-color-background-primary: Defines the background color for the primary variant button.\n * @prop --mg-c-button-color-border-primary: Defines the border color for the primary variant button.\n * @prop --mg-c-button-color-gradient-primary: Defines the gradient color for the primary variant button.\n * @prop --mg-c-button-color-text-primary: Defines the font color for the primary variant button.\n */border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{/*!\n * @prop --mg-c-button-color-background-secondary: Defines the background color for the secondary variant button.\n * @prop --mg-c-button-color-border-secondary: Defines the border color for the secondary variant button.\n * @prop --mg-c-button-color-gradient-secondary: Defines the gradient color for the secondary variant button.\n * @prop --mg-c-button-color-text-secondary: Defines the font color for the secondary variant button.\n */border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{/*!\n * @prop --mg-c-button-color-background-danger: Defines the background color for the danger variant button.\n * @prop --mg-c-button-color-border-danger: Defines the border color for the danger variant button.\n * @prop --mg-c-button-color-gradient-danger: Defines the gradient color for the danger variant button.\n * @prop --mg-c-button-color-text-danger: Defines the font color for the danger variant button.\n */border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{/*!\n * @prop --mg-c-button-color-background-info: Defines the background color for the info variant button.\n * @prop --mg-c-button-color-border-info: Defines the border color for the info variant button.\n * @prop --mg-c-button-color-gradient-info: Defines the gradient color for the info variant button.\n * @prop --mg-c-button-color-text-info: Defines the font color for the info variant button.\n */border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{/*!\n * @prop --mg-c-button-color-background-success: Defines the background color for the success variant button.\n * @prop --mg-c-button-color-border-success: Defines the border color for the success variant button.\n * @prop --mg-c-button-color-gradient-success: Defines the gradient color for the success variant button.\n * @prop --mg-c-button-color-text-success: Defines the font color for the success variant button.\n */border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{/*!\n * @prop --mg-c-button-color-background-warning: Defines the background color for the warning variant button.\n * @prop --mg-c-button-color-border-warning: Defines the border color for the warning variant button.\n * @prop --mg-c-button-color-gradient-warning: Defines the gradient color for the warning variant button.\n * @prop --mg-c-button-color-text-warning: Defines the font color for the warning variant button.\n */border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{/*!\n * @prop --mg-c-button-color-background-danger-alt: Defines the background color for the danger-alt variant button.\n * @prop --mg-c-button-color-border-danger-alt: Defines the border color for the danger-alt variant button.\n * @prop --mg-c-button-color-gradient-danger-alt: Defines the gradient color for the danger-alt variant button.\n * @prop --mg-c-button-color-text-danger-alt: Defines the font color for the danger-alt variant button.\n */border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}";
|
|
278
|
-
const MgButtonStyle0 = mgButtonCss;
|
|
279
282
|
|
|
280
283
|
const MgButton = class {
|
|
281
284
|
constructor(hostRef) {
|
|
282
285
|
index.registerInstance(this, hostRef);
|
|
283
|
-
this.disabledChange = index.createEvent(this, "disabled-change"
|
|
286
|
+
this.disabledChange = index.createEvent(this, "disabled-change");
|
|
284
287
|
/************
|
|
285
288
|
* Internal *
|
|
286
289
|
************/
|
|
@@ -291,11 +294,11 @@ const MgButton = class {
|
|
|
291
294
|
/**
|
|
292
295
|
* Define button variant
|
|
293
296
|
*/
|
|
294
|
-
this.variant =
|
|
297
|
+
this.variant = 'primary';
|
|
295
298
|
/**
|
|
296
299
|
* Define button size
|
|
297
300
|
*/
|
|
298
|
-
this.size =
|
|
301
|
+
this.size = 'medium';
|
|
299
302
|
/**
|
|
300
303
|
* Set button to full-width
|
|
301
304
|
*/
|
|
@@ -319,7 +322,7 @@ const MgButton = class {
|
|
|
319
322
|
/**
|
|
320
323
|
* Component classes
|
|
321
324
|
*/
|
|
322
|
-
this.classCollection = new index_es.
|
|
325
|
+
this.classCollection = new index_es.kt(['mg-c-button']);
|
|
323
326
|
/**
|
|
324
327
|
* Trigger actions onClick event
|
|
325
328
|
* @param event - click event
|
|
@@ -362,7 +365,7 @@ const MgButton = class {
|
|
|
362
365
|
this.setIconSize = () => {
|
|
363
366
|
var _a, _b;
|
|
364
367
|
if (this.size === 'medium') {
|
|
365
|
-
(_a = this.element.querySelector('mg-icon')) === null || _a === void 0 ? void 0 : _a.removeAttribute('size');
|
|
368
|
+
(_a = this.element.querySelector('mg-icon[size]')) === null || _a === void 0 ? void 0 : _a.removeAttribute('size');
|
|
366
369
|
}
|
|
367
370
|
else if (this.isIcon) {
|
|
368
371
|
(_b = this.element.querySelector('mg-icon')) === null || _b === void 0 ? void 0 : _b.setAttribute('size', this.size);
|
|
@@ -377,7 +380,7 @@ const MgButton = class {
|
|
|
377
380
|
this.variant = variants$3[0];
|
|
378
381
|
return;
|
|
379
382
|
}
|
|
380
|
-
throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${index_es.
|
|
383
|
+
throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
381
384
|
}
|
|
382
385
|
else {
|
|
383
386
|
if (oldValue !== undefined) {
|
|
@@ -388,8 +391,8 @@ const MgButton = class {
|
|
|
388
391
|
}
|
|
389
392
|
validateSize(newValue, oldValue) {
|
|
390
393
|
// validate new value
|
|
391
|
-
if (!sizes$
|
|
392
|
-
throw new Error(`<mg-button> prop "size" must be one of: ${sizes$
|
|
394
|
+
if (!sizes$4.includes(newValue)) {
|
|
395
|
+
throw new Error(`<mg-button> prop "size" must be one of: ${sizes$4.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
393
396
|
}
|
|
394
397
|
else {
|
|
395
398
|
if (oldValue !== undefined) {
|
|
@@ -428,7 +431,13 @@ const MgButton = class {
|
|
|
428
431
|
// emit value update
|
|
429
432
|
this.disabledChange.emit(isDisabled);
|
|
430
433
|
}
|
|
431
|
-
watchIsIcon() {
|
|
434
|
+
watchIsIcon(newValue) {
|
|
435
|
+
if (newValue) {
|
|
436
|
+
this.classCollection.add(`mg-c-button--icon`);
|
|
437
|
+
if (!index_es.Le(this.label)) {
|
|
438
|
+
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
439
|
+
}
|
|
440
|
+
}
|
|
432
441
|
this.setIconSize();
|
|
433
442
|
}
|
|
434
443
|
loadingHandler(newValue) {
|
|
@@ -447,13 +456,7 @@ const MgButton = class {
|
|
|
447
456
|
this.validateVariant(this.variant);
|
|
448
457
|
this.validateFullWidth(this.fullWidth);
|
|
449
458
|
this.validateSize(this.size);
|
|
450
|
-
this.watchIsIcon();
|
|
451
|
-
if (this.isIcon) {
|
|
452
|
-
this.classCollection.add(`mg-c-button--icon`);
|
|
453
|
-
if (!index_es.me(this.label)) {
|
|
454
|
-
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
455
|
-
}
|
|
456
|
-
}
|
|
459
|
+
this.watchIsIcon(this.isIcon);
|
|
457
460
|
// Store the onclick fn
|
|
458
461
|
this.onClickElementFn = this.element.onclick;
|
|
459
462
|
this.disabledHandler(this.disabled);
|
|
@@ -462,7 +465,7 @@ const MgButton = class {
|
|
|
462
465
|
* Add listners
|
|
463
466
|
*/
|
|
464
467
|
componentDidLoad() {
|
|
465
|
-
index_es.
|
|
468
|
+
index_es.Mt(() => {
|
|
466
469
|
var _a;
|
|
467
470
|
const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
|
|
468
471
|
// submit buttons should trigger form submition;
|
|
@@ -479,7 +482,7 @@ const MgButton = class {
|
|
|
479
482
|
*/
|
|
480
483
|
render() {
|
|
481
484
|
var _a;
|
|
482
|
-
return (index.h(index.Host, { key: '
|
|
485
|
+
return (index.h(index.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 }, index.h("div", { key: 'c8ce88a3d9d67ce40cc9687b4ea192681d826896', class: this.classCollection.join() }, this.loading && index.h("mg-icon", { key: '5e8949fa49487deda3fdeb1fbb85b62d799e33c6', icon: "loader", spin: true }), index.h("div", { key: 'fc733614c9fb3e30c30c520e9ca3d8a4efd59efe', class: "mg-c-button__content" }, index.h("slot", { key: '1c2c5a91c44c8983d317a4f475ffe89fc21a36e5' })))));
|
|
483
486
|
}
|
|
484
487
|
get element() { return index.getElement(this); }
|
|
485
488
|
static get watchers() { return {
|
|
@@ -491,10 +494,9 @@ const MgButton = class {
|
|
|
491
494
|
"loading": ["loadingHandler"]
|
|
492
495
|
}; }
|
|
493
496
|
};
|
|
494
|
-
MgButton.style =
|
|
497
|
+
MgButton.style = mgButtonCss;
|
|
495
498
|
|
|
496
499
|
const mgCardCss = "/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-min-width: Defines the min-width property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default));box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
|
|
497
|
-
const MgCardStyle0 = mgCardCss;
|
|
498
500
|
|
|
499
501
|
const MgCard = class {
|
|
500
502
|
constructor(hostRef) {
|
|
@@ -511,10 +513,9 @@ const MgCard = class {
|
|
|
511
513
|
return (index.h("div", { key: 'e59cabb09dbc28c148770b57de98f130c4479b75', class: "mg-c-card" }, index.h("slot", { key: 'b6e679317bddd23e73443c601992b7b344d6dc72' })));
|
|
512
514
|
}
|
|
513
515
|
};
|
|
514
|
-
MgCard.style =
|
|
516
|
+
MgCard.style = mgCardCss;
|
|
515
517
|
|
|
516
518
|
const mgCharacterLeftCss = ".mg-u-visually-hidden.sc-mg-character-left{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*.sc-mg-character-left:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*.sc-mg-character-left{animation:none !important;transition:none !important}}mg-character-left.sc-mg-character-left{display:block}";
|
|
517
|
-
const MgCharacterLeftStyle0 = mgCharacterLeftCss;
|
|
518
519
|
|
|
519
520
|
const MgCharacterLeft = class {
|
|
520
521
|
constructor(hostRef) {
|
|
@@ -525,13 +526,13 @@ const MgCharacterLeft = class {
|
|
|
525
526
|
this.characters = '';
|
|
526
527
|
}
|
|
527
528
|
watchIdentifier(newValue) {
|
|
528
|
-
if (newValue !== undefined && !index_es.
|
|
529
|
-
console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
529
|
+
if (newValue !== undefined && !index_es.Ot(newValue)) {
|
|
530
|
+
console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${index_es.zt(newValue)}.`);
|
|
530
531
|
}
|
|
531
532
|
}
|
|
532
533
|
validateMaxlength(newValue) {
|
|
533
534
|
if (typeof newValue !== 'number') {
|
|
534
|
-
throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${index_es.
|
|
535
|
+
throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${index_es.zt(newValue)}.`);
|
|
535
536
|
}
|
|
536
537
|
}
|
|
537
538
|
/*************
|
|
@@ -558,15 +559,14 @@ const MgCharacterLeft = class {
|
|
|
558
559
|
"maxlength": ["validateMaxlength"]
|
|
559
560
|
}; }
|
|
560
561
|
};
|
|
561
|
-
MgCharacterLeft.style =
|
|
562
|
+
MgCharacterLeft.style = mgCharacterLeftCss;
|
|
562
563
|
|
|
563
564
|
const mgDetailsCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}";
|
|
564
|
-
const MgDetailsStyle0 = mgDetailsCss;
|
|
565
565
|
|
|
566
566
|
const MgDetails = class {
|
|
567
567
|
constructor(hostRef) {
|
|
568
568
|
index.registerInstance(this, hostRef);
|
|
569
|
-
this.expandedChange = index.createEvent(this, "expanded-change"
|
|
569
|
+
this.expandedChange = index.createEvent(this, "expanded-change");
|
|
570
570
|
/**
|
|
571
571
|
* Hide summary element
|
|
572
572
|
*/
|
|
@@ -583,7 +583,7 @@ const MgDetails = class {
|
|
|
583
583
|
};
|
|
584
584
|
}
|
|
585
585
|
validateTitles(newValue) {
|
|
586
|
-
if (!index_es.
|
|
586
|
+
if (!index_es.Le(newValue)) {
|
|
587
587
|
throw new Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`);
|
|
588
588
|
}
|
|
589
589
|
}
|
|
@@ -600,8 +600,9 @@ const MgDetails = class {
|
|
|
600
600
|
this.validateTitles(this.toggleClosed);
|
|
601
601
|
this.validateTitles(this.toggleOpened);
|
|
602
602
|
this.element.addEventListener('click', (event) => {
|
|
603
|
-
if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]'))
|
|
603
|
+
if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]') !== null) {
|
|
604
604
|
event.preventDefault();
|
|
605
|
+
}
|
|
605
606
|
});
|
|
606
607
|
}
|
|
607
608
|
/**
|
|
@@ -609,7 +610,7 @@ const MgDetails = class {
|
|
|
609
610
|
* @returns HTML Element
|
|
610
611
|
*/
|
|
611
612
|
render() {
|
|
612
|
-
return (index.h("details", { key: '
|
|
613
|
+
return (index.h("details", { key: '3f773b6c0d10c12049d62a9bbe3b24ce95329077', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, index.h("summary", { key: 'c6378c290a253098a26e832dbc43c58182e1d90c' }, index.h("slot", { key: '033334926172ca422a1346085cfe5fb1adf33e9b', name: "summary" }), index.h("span", { key: '105cd284d2cf7363cd0ea85279c057471f2113c9', class: "mg-c-details__toggle" }, index.h("mg-icon", { key: 'c17df4c2813a346a4ced9be2f872dcdc688baa2e', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { key: '5dc2078f2ba8808dbad0b75f2857173d2bd8d3e5', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { key: 'bf9883ad6dbf0c1014ad6559cb5d08b157d80d9b', class: "mg-c-details__details" }, index.h("slot", { key: '244092eb1aceb39143e53b63faf36ab2a5c4c205', name: "details" }))));
|
|
613
614
|
}
|
|
614
615
|
get element() { return index.getElement(this); }
|
|
615
616
|
static get watchers() { return {
|
|
@@ -618,10 +619,9 @@ const MgDetails = class {
|
|
|
618
619
|
"expanded": ["handleExpanded"]
|
|
619
620
|
}; }
|
|
620
621
|
};
|
|
621
|
-
MgDetails.style =
|
|
622
|
+
MgDetails.style = mgDetailsCss;
|
|
622
623
|
|
|
623
624
|
const mgDividerCss = "/*!\n * @prop --mg-c-divider-color-background: Defines the background color of the divider. The default value is `color-mix(in srgb, var(--mg-b-color-dark), transparent 85%)`.\n * @prop --mg-c-divider-thickness: Defines the thickness of the divider. The default value is `--mg-b-size-border`.\n * @prop --mg-c-divider-spacing-vertical: Defines the vertical spacing of the divider. The default value is `--mg-b-size-40`.\n */.mg-c-divider{width:var(--mg-b-size-120);height:var(--mg-c-divider-thickness);margin:var(--mg-c-divider-spacing-vertical) auto;background-color:var(--mg-c-divider-color-background)}.mg-c-divider.mg-c-divider--full-width{width:100%}";
|
|
624
|
-
const MgDividerStyle0 = mgDividerCss;
|
|
625
625
|
|
|
626
626
|
const MgDivider = class {
|
|
627
627
|
constructor(hostRef) {
|
|
@@ -645,7 +645,7 @@ const MgDivider = class {
|
|
|
645
645
|
} }));
|
|
646
646
|
}
|
|
647
647
|
};
|
|
648
|
-
MgDivider.style =
|
|
648
|
+
MgDivider.style = mgDividerCss;
|
|
649
649
|
|
|
650
650
|
/**
|
|
651
651
|
* List of all possibles roles
|
|
@@ -657,13 +657,12 @@ const roles = ['form', 'search', 'none', 'presentation'];
|
|
|
657
657
|
const requiredMessageStatus = ['default', 'hide'];
|
|
658
658
|
|
|
659
659
|
const mgFormCss = ".mg-u-form-legacy{--mg-c-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:var(--mg-b-color-danger)}/*!\n * @prop --mg-c-form-inputs-title-width: Defines the width of the input title. Fallback on `calc(28 * var(--mg-b-size-8))`.\n */.mg-c-form{--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-margin-bottom:var(--mg-b-size-16);--mg-c-input-title-horizontal-space:var(--mg-b-size-32)}.mg-c-form.mg-c-form--all-required{--mg-c-input-title-display:none}.mg-c-form.mg-c-form--label-on-top{--mg-c-input-margin-bottom:var(--mg-b-size-24)}.mg-c-form>p{font-size:var(--mg-b-font-size-small)}";
|
|
660
|
-
const MgFormStyle0 = mgFormCss;
|
|
661
660
|
|
|
662
661
|
const MgForm = class {
|
|
663
662
|
constructor(hostRef) {
|
|
664
663
|
index.registerInstance(this, hostRef);
|
|
665
|
-
this.formValid = index.createEvent(this, "form-valid"
|
|
666
|
-
this.formSubmit = index.createEvent(this, "form-submit"
|
|
664
|
+
this.formValid = index.createEvent(this, "form-valid");
|
|
665
|
+
this.formSubmit = index.createEvent(this, "form-submit");
|
|
667
666
|
// Classes
|
|
668
667
|
this.classAllRequired = 'mg-c-form--all-required';
|
|
669
668
|
this.classLabelOnTop = 'mg-c-form--label-on-top';
|
|
@@ -671,7 +670,7 @@ const MgForm = class {
|
|
|
671
670
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
672
671
|
* If not set, it will be created.
|
|
673
672
|
*/
|
|
674
|
-
this.identifier = index_es.
|
|
673
|
+
this.identifier = index_es.xt('mg-form');
|
|
675
674
|
/**
|
|
676
675
|
* Input name
|
|
677
676
|
* If not set the value equals the identifier
|
|
@@ -681,6 +680,10 @@ const MgForm = class {
|
|
|
681
680
|
* Define if form is readonly
|
|
682
681
|
*/
|
|
683
682
|
this.readonly = false;
|
|
683
|
+
/**
|
|
684
|
+
* Define if slotted mg-component's label are displayed on top
|
|
685
|
+
*/
|
|
686
|
+
this.labelOnTop = false;
|
|
684
687
|
/**
|
|
685
688
|
* Define if form is disabled
|
|
686
689
|
*/
|
|
@@ -688,7 +691,7 @@ const MgForm = class {
|
|
|
688
691
|
/**
|
|
689
692
|
* Component classes
|
|
690
693
|
*/
|
|
691
|
-
this.classCollection = new index_es.
|
|
694
|
+
this.classCollection = new index_es.kt(['mg-c-form']);
|
|
692
695
|
/**
|
|
693
696
|
* Define required message based on mg-inputs required elements
|
|
694
697
|
*/
|
|
@@ -776,18 +779,18 @@ const MgForm = class {
|
|
|
776
779
|
};
|
|
777
780
|
}
|
|
778
781
|
watchIdentifier(newValue) {
|
|
779
|
-
if (!index_es.
|
|
780
|
-
console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
782
|
+
if (!index_es.Ot(newValue)) {
|
|
783
|
+
console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${index_es.zt(newValue)}.`);
|
|
781
784
|
}
|
|
782
785
|
}
|
|
783
786
|
validateRequiredMessage(newValue) {
|
|
784
787
|
if (newValue && !requiredMessageStatus.includes(newValue)) {
|
|
785
|
-
throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${index_es.
|
|
788
|
+
throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
786
789
|
}
|
|
787
790
|
}
|
|
788
791
|
validateAriaRole(newValue) {
|
|
789
792
|
if (newValue && !roles.includes(newValue)) {
|
|
790
|
-
throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${index_es.
|
|
793
|
+
throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
791
794
|
}
|
|
792
795
|
}
|
|
793
796
|
handlelabelOnTop(newValue) {
|
|
@@ -876,7 +879,7 @@ const MgForm = class {
|
|
|
876
879
|
* @returns HTML Element
|
|
877
880
|
*/
|
|
878
881
|
render() {
|
|
879
|
-
return (index.h("form", { key: '
|
|
882
|
+
return (index.h("form", { key: '43c060c027330a9db84c469228536db8d2329c86', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && index.h("p", { key: '42cba44f2075371ae73b097b84012fdbd1b473d8', innerHTML: this.requiredMessageText }), index.h("slot", { key: '0797165b78e980ab2680f7a3a1c68b13c5140820' }), !this.readonly && !this.disabled && index.h("slot", { key: 'a13f2ac1e784b0e03408ed811b1c3bec4b730479', name: "actions" })));
|
|
880
883
|
}
|
|
881
884
|
get element() { return index.getElement(this); }
|
|
882
885
|
static get watchers() { return {
|
|
@@ -888,12 +891,12 @@ const MgForm = class {
|
|
|
888
891
|
"disabled": ["handleAttributeChange"]
|
|
889
892
|
}; }
|
|
890
893
|
};
|
|
891
|
-
MgForm.style =
|
|
894
|
+
MgForm.style = mgFormCss;
|
|
892
895
|
|
|
893
896
|
/**
|
|
894
897
|
* List of all possibles sizes
|
|
895
898
|
*/
|
|
896
|
-
const sizes$
|
|
899
|
+
const sizes$3 = ['small', 'medium', 'large', 'xlarge', 'xxlarge'];
|
|
897
900
|
/**
|
|
898
901
|
* List of all possibles variants
|
|
899
902
|
*/
|
|
@@ -906,7 +909,6 @@ const variantStyles$1 = ['icon', 'background', 'full'];
|
|
|
906
909
|
const icons = { 'address-card': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm11 3h-3v1h3zm-3 2h3v1h-3zM8 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-5 5.4A2.4 2.4 0 0 1 5.4 9h1.2A2.4 2.4 0 0 1 9 11.4a.6.6 0 0 1-.6.6H3.6a.6.6 0 0 1-.6-.6" clip-rule="evenodd"/></svg>', 'address-card-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 6.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" d="M13 5h-3v1h3zm-3 2h3v1h-3z"/><path fill="currentColor" fill-rule="evenodd" d="M5.4 9A2.4 2.4 0 0 0 3 11.4a.6.6 0 0 0 .6.6h4.8a.6.6 0 0 0 .6-.6A2.4 2.4 0 0 0 6.6 9zm0 1a1.4 1.4 0 0 0-1.342 1h3.884A1.4 1.4 0 0 0 6.6 10z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm12 1H2v10h12z" clip-rule="evenodd"/></svg>', 'align-center': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 3h8v1H4zm-2 9h12v1H2zm12-6H2v1h12zM4 9h8v1H4z"/></svg>', 'align-justify': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 3h12v1H2zm0 9h12v1H2zm12-6H2v1h12zM2 9h12v1H2z"/></svg>', 'align-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 3h8v1H2zm0 9h12v1H2zm12-6H2v1h12zM2 9h8v1H2z"/></svg>', 'align-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6 3h8v1H6zm-4 9h12v1H2zm12-6H2v1h12zM6 9h8v1H6z"/></svg>', 'api': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.44 11.47h-.02l-.66-.1-.02-.08c-.03-.11-.08-.21-.13-.31l-.04-.07.4-.54v-.02l-.52-.52h-.02l-.54.41-.07-.04c-.1-.05-.2-.09-.31-.13l-.08-.02-.1-.67v-.01h-.73v.02l-.1.66-.08.02c-.11.03-.21.08-.31.13l-.07.04-.55-.41-.52.52v.02l.41.54-.04.07c-.05.1-.09.2-.13.31l-.02.08-.67.1h-.01v.73h.02l.66.1.02.08c.03.1.08.21.13.3l.04.07-.41.55.52.52h.02l.54-.41.07.04c.1.05.2.09.31.13l.08.02.1.67v.01h.73v-.02l.1-.66.08-.02c.11-.03.21-.08.31-.13l.07-.04.55.41.52-.52v-.02l-.4-.54.04-.07c.05-.1.09-.2.13-.31l.02-.08.67-.1h.01v-.73zm-2.46 1.38c-.56 0-1.01-.45-1.01-1.01s.45-1.01 1.01-1.01 1.01.45 1.01 1.01-.45 1.01-1.01 1.01M8.51 5.81c-.11-.09-.27-.14-.5-.14h-.38v1.17h.27c.26 0 .45-.05.58-.15s.19-.25.19-.44-.05-.34-.16-.43zm1.57 5.13-.3-.4c-.1-.1-.09-.27 0-.37l.52-.52c.1-.1.26-.1.37 0l.4.29c.06-.03.13-.06.2-.08l.07-.49c0-.14.12-.25.26-.25h.45a5.44 5.44 0 1 0-10.5-1.99 5.44 5.44 0 0 0 5.44 5.44c.78 0 1.54-.17 2.25-.49v-.6c0-.14.11-.26.26-.26l.49-.07c.02-.07.05-.13.08-.2zm.18-5.96h.84v3.94h-.84zM5.4 8.92l-.29-.94H3.67l-.29.94h-.9l1.39-3.96h1.02l1.4 3.96h-.9zm3.72-1.74c-.26.23-.64.34-1.13.34h-.36v1.4h-.84V4.98h1.26c.48 0 .84.1 1.09.31s.37.51.37.92c0 .42-.13.75-.4.97zM4.4 5.57q-.09.345-.51 1.71h1.03q-.39-1.275-.45-1.44c-.03-.11-.06-.2-.07-.26z"/></svg>', 'archive': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3 6v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6zm7 2H6V7h4zm3-3H3c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1"/></svg>', 'archive-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13 2H3c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1m-1 11H4.04S4 12.98 4 12.96V6h8zm1-8H3V3h10zm-3 3H6V7h4z"/></svg>', 'arrow-clock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m3.025 3.82-.002-.001.083-.09.063-.066.009-.01q.132-.15.273-.292a4 4 0 0 1 .215-.196q.136-.124.279-.24.108-.086.22-.166l.024-.018q.143-.105.293-.203a7 7 0 0 1 1.198-.607l.029-.01q.126-.05.257-.094a6 6 0 0 1 .375-.108l.067-.019q.105-.029.21-.053c.146-.032.294-.054.442-.075l.092-.015q.072-.013.146-.022A6.47 6.47 0 0 1 13 3.847V1.996h1v4h-4v-1h2.594a5.48 5.48 0 0 0-5.189-2.467l-.124.019-.077.012q-.188.025-.373.064a3 3 0 0 0-.173.044l-.063.017a6 6 0 0 0-.317.09 6 6 0 0 0-.227.084l-.016.006a6 6 0 0 0-.523.232 5.4 5.4 0 0 0-.736.452l-.028.021q-.092.065-.18.135-.12.098-.235.204l-.05.044q-.068.06-.133.122-.117.117-.226.241l-.013.014A5.496 5.496 0 1 0 13.5 7.996h1A6.5 6.5 0 1 1 3.025 3.82"/><path fill="currentColor" d="M9.795 11.746 7 8.95V4.246h1v4.29l2.5 2.505z"/></svg>', 'arrow-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.295 8.295 8.5 12.085V2h-1v10.085l-3.795-3.79L3 9l5 5 5-5z"/></svg>', 'arrow-down-a-z': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m6.53 10.9-1.41 1.41-.71.71-2.12-2.12.71-.71.88.88V3.02h1v8.12l.95-.95.71.71zM12.29 6H10.5l-.36 1H9.08l1.79-5h1.05l1.79 5h-1.06zm-.36-1.02-.53-1.49-.53 1.49zm1.79 5.18V9H9.09v1h3.29l-3.29 2.84V14h4.63v-1h-3.29z"/></svg>', 'arrow-down-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.999 12.292V3.999h1v10h-10v-1h8.292L2 2.707 2.707 2z"/></svg>', 'arrow-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m7 13 .705-.705L3.915 8.5H14v-1H3.915l3.79-3.795L7 3 2 8z"/></svg>', 'arrow-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m9 3-.715.696 3.79 3.804H2v1h10.075l-3.79 3.787L9 13l5-5z"/></svg>', 'arrow-rotate': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m3.025 3.82-.002-.001c.046-.055.098-.103.146-.156q.137-.155.282-.302c.069-.068.142-.13.215-.195q.136-.124.279-.241.12-.095.244-.184.143-.105.293-.203a7 7 0 0 1 1.198-.607q.142-.055.286-.104a6 6 0 0 1 .375-.108c.092-.025.184-.052.278-.072a6 6 0 0 1 .441-.075c.08-.012.157-.028.238-.037A6.47 6.47 0 0 1 13 3.847V1.996h1v4h-4v-1h2.594a5.48 5.48 0 0 0-5.188-2.467q-.102.014-.202.031-.188.025-.373.064c-.08.017-.157.04-.236.06a6 6 0 0 0-.317.092q-.122.042-.243.089a6 6 0 0 0-.523.232 5.4 5.4 0 0 0-.736.452q-.106.076-.208.156-.12.098-.235.204-.093.08-.183.166c-.083.081-.16.169-.239.255A5.496 5.496 0 1 0 13.5 7.996h1A6.5 6.5 0 1 1 3.025 3.82"/></svg>', 'arrow-rotate-backward': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.975 3.82.002-.001c-.046-.055-.098-.103-.146-.156-.092-.103-.183-.205-.282-.302-.069-.068-.142-.13-.215-.195q-.135-.124-.279-.241-.12-.095-.244-.184a7 7 0 0 0-.293-.203 7 7 0 0 0-.859-.467 7 7 0 0 0-.339-.14q-.142-.055-.286-.104a6 6 0 0 0-.375-.108c-.092-.025-.184-.052-.278-.072a6 6 0 0 0-.441-.075c-.08-.012-.157-.028-.238-.037A6.47 6.47 0 0 0 3 3.847V1.996H2v4h4v-1H3.406a5.48 5.48 0 0 1 5.189-2.467q.101.014.2.031.19.025.374.064c.08.017.157.04.236.06q.16.042.317.092.122.042.243.089a6 6 0 0 1 .523.232 5.3 5.3 0 0 1 .736.452q.105.076.208.156.12.098.235.204.093.08.183.166c.083.081.16.169.239.255A5.496 5.496 0 1 1 2.5 7.996h-1A6.5 6.5 0 1 0 12.975 3.82"/></svg>', 'arrow-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2 3 7l.705.705L7.5 3.915V14h1V3.915l3.795 3.79L13 7z"/></svg>', 'arrow-up-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.292 3H3.999V2h10v10h-1V3.707L2.707 14 2 13.29z"/></svg>', 'arrow-up-right-square': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.33 3v10c0 .73-.6 1.32-1.33 1.33H3c-.73 0-1.32-.6-1.33-1.33V3c0-.73.6-1.32 1.33-1.33h10c.73 0 1.32.6 1.33 1.33m-2.48.46H8.68c-.37 0-.67.29-.68.66v.04c0 .18.07.35.2.47l.91.91-5.53 5.53c-.13.13-.14.33-.01.47h.01l.87.88c.13.13.33.14.47.01h.01l5.53-5.53.91.9c.26.28.7.29.98.02l.02-.02c.12-.13.19-.3.19-.48V4.15c0-.37-.3-.67-.67-.67z"/></svg>', 'arrow-up-z-a': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m5.82 5.85-.94-.94v8.11h-1V4.96l-.89.89-.71-.71 1.41-1.41.71-.71.71.71 1.41 1.41-.71.71zM12.29 13H10.5l-.36 1H9.08l1.79-5h1.05l1.79 5h-1.06zm-.36-1.02-.53-1.49-.53 1.49zm1.79-8.82V2H9.09v1h3.29L9.09 5.84V7h4.63V6h-3.29z"/></svg>', 'arrows-compare': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.705 8.295 9.915 6.5H15v-1H9.915l1.79-1.795L11 3 8 6l3 3zM8 10 5 7l-.705.705L6.085 9.5H1v1h5.085l-1.79 1.795L5 13z"/></svg>', 'arrows-right-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.085 4.499-1.79-1.795.705-.705 3 3-3 3-.705-.705 1.79-1.795H9v-1zM8 6.514h.003v5.572l1.795-1.79.705.705-3 3-3-3 .705-.705 1.795 1.79V5.499H2v-1h6z"/></svg>', 'arrows-right-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m11 2 3 3-3 3-.705-.705 1.79-1.795H2v-1h10.085l-1.79-1.795zm-7.085 9.5 1.79 1.795L5 14l-3-3 3-3 .705.705-1.79 1.795H14v1z" clip-rule="evenodd"/></svg>', 'arrows-rotate': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10 4.997h2.61a5.5 5.5 0 0 0-6.175-2.271A5.5 5.5 0 0 0 2.5 7.993h-1a6.49 6.49 0 0 1 4.289-6.112A6.51 6.51 0 0 1 13 3.838V2h1v3.996h-4zM6 10.99H3.39a5.5 5.5 0 0 0 6.175 2.271A5.5 5.5 0 0 0 13.5 7.993h1a6.49 6.49 0 0 1-4.289 6.113A6.51 6.51 0 0 1 3 12.15v1.838H2V9.991h4z"/></svg>', 'arrows-rotate-backward': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6 4.997H3.39a5.5 5.5 0 0 1 6.175-2.271A5.5 5.5 0 0 1 13.5 7.993h1a6.49 6.49 0 0 0-4.289-6.112A6.51 6.51 0 0 0 3 3.838V2H2v3.996h4zm4 5.993h2.61a5.5 5.5 0 0 1-6.175 2.271A5.5 5.5 0 0 1 2.5 7.993h-1a6.49 6.49 0 0 0 4.289 6.113A6.51 6.51 0 0 0 13 12.15v1.838h1V9.991h-4z"/></svg>', 'arrows-up-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1.5 5 3-3 3 3-.7.7L5 3.9V14H4V3.9L2.2 5.7zM12 12.1l1.8-1.8.7.7-3 3-3-3 .7-.7 1.8 1.8V2h1z" clip-rule="evenodd"/></svg>', 'ban': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-3.126 4.582a6 6 0 0 1-8.456-8.456zm.707-.708L4.127 3.418a6 6 0 0 1 8.456 8.456" clip-rule="evenodd"/></svg>', 'bell': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.97 6a4 4 0 0 1 8 0v2.3l1.507.822c.91.496.558 1.878-.478 1.878H3.002c-1.027 0-1.387-1.362-.494-1.87l1.461-.83zm2.027 6a2 2 0 1 0 4 0z"/></svg>', 'bell-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="currentColor" d="m11.47 8.597 1.768.964c.455.248.28.939-.239.939H3.002c-.514 0-.694-.681-.247-.935l1.714-.974V6a3.5 3.5 0 0 1 7 0zM7.996 13.5a1.5 1.5 0 0 1-1.415-1h2.83a1.5 1.5 0 0 1-1.415 1Z"/></svg>', 'book': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2H1.5a.5.5 0 0 1 0-1H3V9H1.5a.5.5 0 0 1 0-1H3V7H1.5a.5.5 0 0 1 0-1H3zm8 0H9v4h2z" clip-rule="evenodd"/></svg>', 'book-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4 2a1 1 0 0 0-1 1v3H1.5a.5.5 0 0 0 0 1H3v1H1.5a.5.5 0 0 0 0 1H3v1H1.5a.5.5 0 0 0 0 1H3v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm5 1H4v3h.5a.5.5 0 0 1 0 1H4v1h.5a.5.5 0 0 1 0 1H4v1h.5a.5.5 0 0 1 0 1H4v2h8V3h-1v4H9z" clip-rule="evenodd"/></svg>', 'briefcase': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 4v1H2a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-3V4a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1m5 1V4H6v1z" clip-rule="evenodd"/></svg>', 'briefcase-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 5V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1-1h4v1H6zM2 6v7h12V6z" clip-rule="evenodd"/></svg>', 'building-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4 2h8v12H9v-1a1 1 0 1 0-2 0v1H4zm4 13h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1zM7 4H5v2h2zm2 0h2v2H9zm2 4H9v2h2zM5 8h2v2H5z" clip-rule="evenodd"/></svg>', 'calculator': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm2 1h8v3H4zm2 5H4v2h2zm1 0h2v2H7zm5 0h-2v5h2zm-8 3h2v2H4zm5 0H7v2h2z" clip-rule="evenodd"/></svg>', 'calculator-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 3h8v3H4zm2 5H4v2h2zm3 0H7v2h2zm3 0h-2v5h2zm-6 3H4v2h2zm3 0H7v2h2z"/><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm1 0h10v12H3z" clip-rule="evenodd"/></svg>', 'calendar': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 1h1v1h4V1h1v1h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h2zm8 5H3v7h10z" clip-rule="evenodd"/></svg>', 'calendar-euro': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 2.5h1c.6 0 1 .4 1 1v10c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1v-10c0-.6.4-1 1-1h1v-1h1v1h6v-1h1zm-9 3v8h10v-8zm7.5 6.24-.71-.71c-.35.3-.8.49-1.29.49-.74 0-1.4-.41-1.74-1.02h1.77v-.75H6.51c-.01-.07-.01-.15-.01-.23 0-.09.01-.18.02-.27h2.01V8.5H6.78c.35-.59.99-.98 1.72-.98.49 0 .94.19 1.29.49l.71-.71a2.974 2.974 0 0 0-4.81 1.2H4.5v.75h1.02c-.02.09-.02.18-.02.27 0 .08 0 .16.02.23H4.5v.75h1.17c.4 1.17 1.52 2.02 2.83 2.02.77 0 1.47-.3 2-.78" clip-rule="evenodd"/></svg>', 'calendar-euro-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m9.79 11.02.71.71a2.976 2.976 0 0 1-4.83-1.24H4.5v-.75h1.01c-.01-.08-.01-.15-.01-.23 0-.09 0-.18.02-.27H4.5v-.75h1.19a2.974 2.974 0 0 1 4.81-1.2L9.79 8c-.35-.3-.8-.49-1.29-.49-.73 0-1.37.39-1.72.98h1.75v.75H6.52c-.01.09-.02.18-.02.27 0 .08 0 .16.01.23h2.02v.75H6.76c.34.61 1 1.02 1.74 1.02.49 0 .94-.19 1.29-.49M13 3.5v1H3v-1zm-1-2h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10c0-.55-.45-1-1-1h-1zm-9 12v-8h10v8z"/></svg>', 'calendar-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13 2h-2V1h-1v1H6V1H5v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1m0 11H3V6h10zm0-8H3V3h2v1h1V3h4v1h1V3h2z"/></svg>', 'check': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.77 12.113 15 3.883l-.707-.707-8.23 8.23-4.355-4.355L1 7.76l4.355 4.355-.004.004.707.706.004-.004.003.004.708-.707z"/></svg>', 'check-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1m-1 9.795-2.5-2.5.795-.795L7 9.205 10.705 5.5l.798.793z"/></svg>', 'check-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m4.5 8.207 2.5 2.5 4.5-4.5-.707-.707L7 9.293 5.207 7.5z"/><path fill="currentColor" fill-rule="evenodd" d="M4.111 2.18a7 7 0 1 1 7.778 11.64A7 7 0 0 1 4.111 2.18m.556 10.809a6 6 0 1 0 6.666-9.978 6 6 0 0 0-6.666 9.978" clip-rule="evenodd"/></svg>', 'chevron-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8 11.708 6-6L13.293 5 8 10.293 2.708 5 2 5.708z"/></svg>', 'chevron-down-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14M3.706 6 8 10.294 12.294 6l.706.706-5 5-5-5z" clip-rule="evenodd"/></svg>', 'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m4 8 6 6 .708-.708L5.415 8l5.293-5.292L10 2z"/></svg>', 'chevron-left-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m9-4.294L5.706 8 10 12.294 9.294 13l-5-5 5-5z" clip-rule="evenodd"/></svg>', 'chevron-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m11.708 8-6-6L5 2.708 10.293 8 5 13.293l.708.707z"/></svg>', 'chevron-right-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 0 1 8a7 7 0 0 0 14 0m-9 4.294L10.294 8 6 3.706 6.706 3l5 5-5 5z" clip-rule="evenodd"/></svg>', 'chevron-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8 4.5-6 6 .708.707L8 5.916l5.293 5.293L14 10.5z"/></svg>', 'chevron-up-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1m4.294 9L8 5.706 3.706 10 3 9.294l5-5 5 5z" clip-rule="evenodd"/></svg>', 'circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8"/></svg>', 'clock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m-.5-6.795L10.295 11l.705-.705L8.5 7.79V3.5h-1z" clip-rule="evenodd"/></svg>', 'clock-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m10.95 10.04-.71.71L7.5 8.01v-4h1V7.6l2.45 2.45zM8 2C4.69 2 2 4.69 2 8s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6m0-1c3.87 0 7 3.13 7 7s-3.13 7-7 7-7-3.13-7-7 3.13-7 7-7"/></svg>', 'code-square-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m6.32 10.28.73-.73L5.5 8l1.53-1.53-.73-.73-2.27 2.27 2.28 2.28zm3.37 0L11.97 8 9.69 5.72l-.73.73L10.51 8 8.96 9.55zM3.01 14c-.27 0-.5-.1-.7-.3s-.3-.43-.3-.7V3c0-.27.1-.5.3-.7s.43-.3.7-.3h10c.27 0 .5.1.7.3s.3.43.3.7v10c0 .27-.1.5-.3.7s-.43.3-.7.3H3zm0-1h10V3H3v10z"/></svg>', 'cog': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.062 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.416c.345.15.67.34.97.56l1.226-.708a1 1 0 0 1 1.366.366l1 1.732a1 1 0 0 1-.366 1.366l-1.227.709a5 5 0 0 1 0 1.119l1.227.708a1 1 0 0 1 .366 1.366l-1 1.732a1 1 0 0 1-1.366.366l-1.227-.708c-.3.22-.624.41-.969.56V14a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1.416a5 5 0 0 1-.969-.56l-1.227.708a1 1 0 0 1-1.366-.366l-1-1.732a1 1 0 0 1 .366-1.366l1.227-.709a5 5 0 0 1 0-1.118l-1.227-.709A1 1 0 0 1 1.5 5.366l1-1.732a1 1 0 0 1 1.366-.366l1.227.709q.45-.334.97-.561zm2 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4" clip-rule="evenodd"/></svg>', 'cog-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.438 8a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0m2.5-1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M10 3.416V2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v1.416c-.345.15-.67.34-.969.56l-1.227-.708a1 1 0 0 0-1.366.366l-1 1.732a1 1 0 0 0 .366 1.366l1.227.709a5 5 0 0 0 0 1.118l-1.227.709a1 1 0 0 0-.366 1.366l1 1.732a1 1 0 0 0 1.366.366l1.227-.708a5 5 0 0 0 .969.56V14a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1.416c.345-.15.67-.34.969-.56l1.227.708a1 1 0 0 0 1.366-.366l1-1.732a1 1 0 0 0-.366-1.366l-1.227-.709a5 5 0 0 0 0-1.118l1.227-.709a1 1 0 0 0 .366-1.366l-1-1.732a1 1 0 0 0-1.366-.366l-1.227.708c-.3-.22-.624-.41-.97-.56M7 4.07l-.6.262q-.414.182-.775.449l-.527.39-1.794-1.037-1 1.732 1.793 1.035-.072.65a4 4 0 0 0 0 .898l.072.65-1.793 1.035 1 1.732 1.794-1.036.527.39q.361.265.775.448l.6.262V14h2v-2.07l.6-.262q.414-.182.774-.449l.527-.39 1.795 1.037 1-1.732-1.793-1.035.072-.65a4 4 0 0 0 0-.898l-.072-.65 1.793-1.035-1-1.732-1.795 1.036-.527-.39q-.36-.265-.774-.448L9 4.07V2H7z" clip-rule="evenodd"/></svg>', 'comment': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.5 2A5.5 5.5 0 0 0 4 11.743V14l3.5-1h1a5.5 5.5 0 1 0 0-11zM5 6h6v1H5zm3 2H5v1h3z" clip-rule="evenodd"/></svg>', 'comment-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5 6h6v1H5zm0 2h3v1H5z"/><path fill="currentColor" fill-rule="evenodd" d="m4 14 3.5-1h1a5.5 5.5 0 1 0 0-11h-1A5.5 5.5 0 0 0 4 11.743zm1-2.728-.363-.3A4.5 4.5 0 0 1 7.5 3h1a4.5 4.5 0 1 1 0 9H7.36L5 12.674z" clip-rule="evenodd"/></svg>', 'comment-sms': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2.67c-3.37 0-6.1 2.21-6.1 4.95.02 1.18.51 2.3 1.36 3.11-.26.85-.71 1.62-1.3 2.28a.2.2 0 0 0-.04.21c.03.07.1.11.17.11 1.22-.02 2.4-.45 3.34-1.22.82.31 1.68.46 2.56.46 3.37 0 6.1-2.22 6.1-4.95S11.37 2.67 8 2.67M4.95 8.39a.76.76 0 1 1 0-1.52.76.76 0 0 1 0 1.52m3.05 0a.76.76 0 1 1 0-1.52.76.76 0 0 1 0 1.52m3.05 0a.76.76 0 1 1-.02-1.52c.42 0 .77.33.77.75v.01c0 .42-.34.76-.76.76"/></svg>', 'conversation': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.01 6.51c0-1.93 2.23-3.5 4.99-3.5s4.99 1.57 4.99 3.5-2.23 3.5-4.99 3.5c-.36 0-.71-.03-1.05-.08l-2.26 1.05c-.06.03-.11.03-.17.03-.27 0-.5-.21-.5-.5V8.6c-.62-.58-1.01-1.3-1.01-2.09m10.48-.01c0-.5-.13-.97-.36-1.41h.01c2.22.36 3.88 1.75 3.88 3.41 0 .79-.39 1.5-1.02 2.09v1.91a.5.5 0 0 1-.67.47l-2.26-1.05c-.34.05-.69.08-1.05.08-1.69 0-3.19-.59-4.09-1.5h.12c3.03 0 5.44-1.81 5.44-4" clip-rule="evenodd"/></svg>', 'conversation-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 6.5C10 5.14 8.17 4 6 4l-.01.01c-2.17 0-4 1.14-4 2.5 0 .59.38 1.06.7 1.36l.32.3v1.55l1.51-.7.27-.13.3.04c.31.05.62.07.91.07 2.17 0 4-1.14 4-2.5m-9.01.01c0-1.929 2.237-3.498 4.995-3.5 2.758.002 4.995 1.571 4.995 3.5s-2.24 3.5-5 3.5c-.36 0-.71-.03-1.05-.08l-2.26 1.05c-.06.03-.11.03-.17.03-.26 0-.5-.21-.5-.5V8.6C1.38 8.02.99 7.3.99 6.51m4.995-3.5h.005-.01zm8.005 7.58c.62-.58 1.01-1.3 1.01-2.09q0-.18-.03-.36c-.01-.11-.04-.22-.07-.33a2.3 2.3 0 0 0-.17-.45 3.55 3.55 0 0 0-1.1-1.26c-.1-.07-.19-.13-.3-.2a5 5 0 0 0-.65-.35c-.23-.1-.48-.19-.73-.27a4 4 0 0 1-.19-.06c.14.36.22.74.23 1.13C13.18 6.78 14 7.59 14 8.5c0 .59-.38 1.07-.7 1.36l-.31.3-.01.43v1.12l-1.5-.7-.28-.12-.29.04c-.31.05-.62.07-.91.07-.67 0-1.3-.1-1.86-.29-.51.15-1.06.24-1.64.27.06.05.12.09.18.13l.42.24c.36.18.76.33 1.18.43.15.04.3.08.46.1.02.01.03.01.05.01.17.04.34.07.52.07.22.03.46.04.69.04.36 0 .71-.03 1.05-.08l2.26 1.05q.09.03.18.03c.26 0 .49-.21.5-.5z" clip-rule="evenodd"/></svg>', 'copy': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 2h6V1H4a1 1 0 0 0-1 1v9h1z"/><path fill="currentColor" d="M5 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z"/></svg>', 'copy-file': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 2h6V1H4a1 1 0 0 0-1 1v9h1z"/><path fill="currentColor" d="M6 3h3v4h4v7a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1"/><path fill="currentColor" d="m13 6-3-3v3z"/></svg>', 'copy-file-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m10 3 3 3v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm0 1.414V6h1.586zM12 7H9V4H6v10h6z" clip-rule="evenodd"/><path fill="currentColor" d="M4 2h6V1H4a1 1 0 0 0-1 1v9h1z"/></svg>', 'copy-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10 2H4v9H3V2a1 1 0 0 1 1-1h6z"/><path fill="currentColor" fill-rule="evenodd" d="M5 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1zm1 0h6v10H6z" clip-rule="evenodd"/></svg>', 'credit-card': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3 9h3v2H3z"/><path fill="currentColor" fill-rule="evenodd" d="M2 13a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm0-9h12v1H2zm12 3v5H2V7z" clip-rule="evenodd"/></svg>', 'cross': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 2.707 2.707 2l11.29 11.289-.708.707z"/><path fill="currentColor" d="M2.707 14 2 13.293 13.293 2l.707.708z"/></svg>', 'cross-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7m2.7 10.5L8 8.8l-2.7 2.7-.8-.8L7.2 8 4.5 5.3l.8-.8L8 7.2l2.7-2.7.8.8L8.8 8l2.7 2.7z"/></svg>', 'cross-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 8c0-3.9 3.1-7 7-7s7 3.1 7 7-3.1 7-7 7-7-3.1-7-7m1 0c0 3.3 2.7 6 6 6s6-2.7 6-6-2.7-6-6-6-6 2.7-6 6m6 .8 2.7 2.7.8-.8L8.8 8l2.7-2.7-.8-.8L8 7.2 5.3 4.5l-.8.8L7.2 8l-2.7 2.7.8.8z" clip-rule="evenodd"/></svg>', 'dashboard': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 2h6v7H2zm0 8h6v4H2zm7-8h5v4H9zm0 5h5v7H9z"/></svg>', 'dashboard-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 2H2v7h6zM7 3H3v5h4zm1 7H2v4h6zm-1 1H3v2h4zm2-9v4h5V2zm4 1h-3v2h3zm1 4H9v7h5zm-1 1h-3v5h3z" clip-rule="evenodd"/></svg>', 'download': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.295 6.295 13 7l-5 5-5-5 .705-.705 3.795 3.79V1h1v9.085zM13 14v-2h1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2h1v2z" clip-rule="evenodd"/></svg>', 'earth': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m-1.224-2.553-.63 1.261A6.003 6.003 0 0 1 4.501 3.126l1.6.4a1 1 0 0 1 .742 1.14L6.41 7.19a1 1 0 0 1-.986.83H4.47a1 1 0 0 0-.77.362l-.185.223A1 1 0 0 0 3.5 9.862l.273.348a1 1 0 0 0 .59.362l1.658.332a1 1 0 0 1 .699.533l.057.116a1 1 0 0 1 0 .894m3.543-9.983V4.53a1 1 0 0 0 1 1h1.234a1 1 0 0 0 .664-.252l.09-.08a6.02 6.02 0 0 0-2.988-2.733m3.612 4.622-.012-.075h-3.05a1 1 0 0 0-.884.535l-.773 1.469a1 1 0 0 0-.115.465v.964a1 1 0 0 0 .408.806l.353.259a1 1 0 0 1 .408.806v1.242a6 6 0 0 0 3.665-6.47" clip-rule="evenodd"/></svg>', 'earth-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m0-1a6 6 0 0 0 1.766-.264v-1.421a.5.5 0 0 0-.204-.403l-.353-.26a1.5 1.5 0 0 1-.612-1.208V9.48c0-.243.06-.483.173-.698l.772-1.469a1.5 1.5 0 0 1 1.328-.802h2.944a6 6 0 0 0-.284-.844 1.5 1.5 0 0 1-.977.362h-1.235a1.5 1.5 0 0 1-1.5-1.5V2.28A6 6 0 0 0 8 2a6 6 0 0 0-2.918.756l1.14.286A1.5 1.5 0 0 1 7.336 4.75l-.433 2.525a1.5 1.5 0 0 1-1.479 1.247H4.47a.5.5 0 0 0-.385.18l-.185.223a.5.5 0 0 0-.008.628l.273.348a.5.5 0 0 0 .295.181l1.658.332a1.5 1.5 0 0 1 1.048.8l.058.115a1.5 1.5 0 0 1 0 1.342l-.587 1.174A6 6 0 0 0 8 14m6-6q0-.247-.02-.489h-3.11a.5.5 0 0 0-.443.268l-.772 1.468a.5.5 0 0 0-.058.233v.964a.5.5 0 0 0 .204.403l.353.259a1.5 1.5 0 0 1 .612 1.209v1.01A6 6 0 0 0 14 8m-8.402 5.5h.093l.638-1.276a.5.5 0 0 0 0-.448l-.057-.115a.5.5 0 0 0-.35-.267l-1.658-.331a1.5 1.5 0 0 1-.885-.545l-.273-.347a1.5 1.5 0 0 1 .025-1.884l.184-.223a1.5 1.5 0 0 1 1.155-.542h.954a.5.5 0 0 0 .493-.416l.433-2.525a.5.5 0 0 0-.37-.57l-1.95-.487-.046.018A6.002 6.002 0 0 0 5.598 13.5m7.287-8.597.164-.146a6 6 0 0 0-1.458-1.564 6 6 0 0 0-.772-.457V4.53a.5.5 0 0 0 .5.5h1.234a.5.5 0 0 0 .332-.126" clip-rule="evenodd"/></svg>', 'ellipsis': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0m4 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0m4 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0"/></svg>', 'ellipsis-vertical': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/></svg>', 'euro': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.08 11.02 1.42 1.42a5.95 5.95 0 0 1-4 1.56c-2.6 0-4.8-1.64-5.62-3.94H1.5v-1.5h2.04C3.5 8.38 3.5 8.18 3.5 8c0-.16 0-.34.04-.5H1.5V6h2.36c.8-2.34 3.02-4 5.64-4 1.54 0 2.94.6 4 1.56l-1.42 1.42c-.7-.6-1.6-.98-2.58-.98-1.48 0-2.76.8-3.46 2h3.52v1.5H5.54c-.02.16-.04.32-.04.5 0 .2.02.38.04.56h4.02v1.5H6.08C6.78 11.22 8.06 12 9.5 12c.98 0 1.88-.38 2.58-.98"/></svg>', 'euro-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill="currentColor" d="M8 .67C3.95.67.67 3.95.67 8S3.95 15.33 8 15.33s7.33-3.28 7.33-7.33S12.05.67 8 .67m2.27 11.4c-.38.09-.76.14-1.15.14a4.04 4.04 0 0 1-3.99-2.92h-.58c-.12 0-.23-.09-.23-.22v-.54c0-.12.11-.22.23-.22h.41a5 5 0 0 1 0-.8h-.41c-.12 0-.23-.09-.23-.22v-.58c0-.12.1-.22.23-.22h.63c.6-1.65 2.18-2.74 3.94-2.71.34 0 .68.03 1.02.1.12.03.19.16.16.28l-.23.84c-.03.12-.15.19-.27.17-.24-.05-.48-.08-.73-.08A2.42 2.42 0 0 0 6.81 6.5h2.71c.12.03.2.15.17.27l-.13.58c-.02.1-.11.18-.22.18H6.52c-.03.27-.03.53 0 .8h2.63c.12.03.2.15.17.27l-.11.52c-.03.1-.12.17-.22.18H6.8c.36.96 1.28 1.6 2.31 1.61.3 0 .59-.04.88-.1.12-.02.24.06.27.18l.17.84c.02.12-.05.24-.17.27v-.03z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></svg>', 'exclamation-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8m7.75-4v5h-1.5V4zm0 8v-1.5h-1.5V12z" clip-rule="evenodd"/></svg>', 'exclamation-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.75 4v5h-1.5V4zm0 8v-1.5h-1.5V12z"/><path fill="currentColor" fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1M2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8" clip-rule="evenodd"/></svg>', 'exclamation-stamp': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m15 8-1.55-1.86.22-2.46-2.3-.55L10.17 1 8 1.98 5.84 1 4.63 3.13l-2.29.54.22 2.46L1.01 8l1.55 1.86-.22 2.47 2.3.55 1.2 2.13L8 14.03l2.17.98 1.2-2.13 2.3-.55-.22-2.46L15 8.01zm-6.36 3.35H7.36v-1.34h1.28zm0-2.67H7.36V4.67h1.28z"/></svg>', 'exclamation-triangle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m8 2 7 12H1zm-.75 4.5h1.5V10h-1.5zm1.5 6V11h-1.5v1.5z" clip-rule="evenodd"/></svg>', 'exclamation-triangle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.75 6.5V10h-1.5V6.5zm0 6V11h-1.5v1.5z"/><path fill="currentColor" fill-rule="evenodd" d="M8 2 1 14h14zm0 1.985L2.741 13h10.518z" clip-rule="evenodd"/></svg>', 'eye': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/><path fill="currentColor" fill-rule="evenodd" d="M15 8s-3.134 5-7 5-7-5-7-5 3.134-5 7-5 7 5 7 5m-7 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6" clip-rule="evenodd"/></svg>', 'eye-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6m0-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M1 8s3.134 5 7 5 7-5 7-5-3.134-5-7-5-7 5-7 5m1.215 0 .133.178a15 15 0 0 0 1.405 1.61C4.974 10.994 6.478 12 8 12s3.026-1.006 4.247-2.212A15 15 0 0 0 13.785 8l-.133-.178a15 15 0 0 0-1.405-1.61C11.026 5.006 9.522 4 8 4S4.974 5.006 3.753 6.212A15 15 0 0 0 2.215 8" clip-rule="evenodd"/></svg>', 'eye-slash': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1 1.7.7-.7L15 14.302l-.7.7-3.084-3.085c-.963.63-2.057 1.08-3.216 1.08-3.866 0-7-5-7-5S2.174 6.124 3.97 4.67zm4.556 4.557A3 3 0 0 0 9.74 10.44l-.722-.722a2 2 0 0 1-2.74-2.74z" clip-rule="evenodd"/><path fill="currentColor" d="m5.67 3.572 1.532 1.532a3.003 3.003 0 0 1 3.69 3.691l1.877 1.877C14.142 9.366 15 7.997 15 7.997s-3.134-5-7-5c-.817 0-1.6.223-2.33.575"/><path fill="currentColor" d="M9.998 7.9 8.097 6a2 2 0 0 1 1.9 1.901"/></svg>', 'eye-slash-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1 1.7.7-.7L15 14.302l-.7.7-3.084-3.085c-.963.63-2.057 1.08-3.216 1.08-3.866 0-7-5-7-5S2.174 6.124 3.97 4.67zm3.682 3.683c-.324.256-.635.535-.93.826a15 15 0 0 0-1.537 1.788l.133.178c.334.442.815 1.028 1.405 1.61C4.974 10.99 6.478 11.997 8 11.997c.852 0 1.698-.315 2.492-.804l-.752-.752a3 3 0 0 1-4.184-4.184zm1.596 1.596a2 2 0 0 0 2.74 2.74z" clip-rule="evenodd"/><path fill="currentColor" d="m5.67 3.572.757.757A4.2 4.2 0 0 1 8 3.997c1.522 0 3.026 1.006 4.247 2.212a15 15 0 0 1 1.538 1.788q-.061.085-.133.178a15 15 0 0 1-1.531 1.733l-.06.057.708.707C14.142 9.366 15 7.997 15 7.997s-3.134-5-7-5c-.817 0-1.6.223-2.33.575"/><path fill="currentColor" d="m8.097 6-.895-.896a3.003 3.003 0 0 1 3.69 3.691L9.999 7.9A2 2 0 0 0 8.097 6"/></svg>', 'fax': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13 14H6V2h7v3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1M7 3h5v2H7zm0 4h5v1H7zm1 2H7v1h1zm-1 2h1v1H7zm3-2H9v1h1zm-1 2h1v1H9zm3-2h-1v1h1zm-1 2h1v1h-1z" clip-rule="evenodd"/><path fill="currentColor" d="M2 5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/></svg>', 'fax-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 3H7v2h5zM6 3v2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1V2H6zm6 3h1v7H6V6zM3 5h2v8H3zm9 2H7v1h5zM7 9h1v1H7zm1 2H7v1h1zm1-2h1v1H9zm1 2H9v1h1zm1-2h1v1h-1zm1 2h-1v1h1z" clip-rule="evenodd"/></svg>', 'file': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zm1-1V1l3 3z" clip-rule="evenodd"/></svg>', 'file-cog': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 10.06c-.03.53-.47.94-1 .94-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1zm.55-4.81h3.76v9.4a.68.68 0 0 1-.66.66h-9.3c-.37 0-.67-.31-.66-.68V1.33c.01-.36.3-.65.66-.66h5.54v3.89c-.01.37.28.68.65.69zM10 8l-.51.29c-.21-.18-.46-.32-.72-.41v-.57c0-.06-.05-.12-.11-.14-.43-.09-.87-.09-1.3 0a.14.14 0 0 0-.12.14v.59q-.405.135-.72.42L6 8a.135.135 0 0 0-.17 0c-.3.32-.52.71-.65 1.13-.02.06 0 .13.06.16l.51.29q-.075.42 0 .84l-.51.29c-.05.03-.08.1-.06.16.13.42.35.81.65 1.13.05.04.12.04.17 0l.51-.29c.22.18.46.32.73.41v.59c0 .07.04.13.11.14.43.09.87.09 1.3 0 .07-.01.12-.07.11-.14v-.51c.27-.09.51-.23.73-.41l.51.29c.05.04.12.04.17 0 .3-.32.52-.71.65-1.13.02-.06 0-.13-.06-.16l-.5-.3c.05-.27.05-.56 0-.83l.5-.3c.06-.03.09-.1.07-.16a2.9 2.9 0 0 0-.65-1.13A.16.16 0 0 0 10 8m3.12-4.33L10.41.87a.63.63 0 0 0-.47-.2h-.17v3.66h3.54v-.17c0-.18-.06-.36-.19-.49"/></svg>', 'file-download': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m10.41.87 2.71 2.8a.7.7 0 0 1 .19.49v.17H9.77V.67h.17a.63.63 0 0 1 .47.2m2.9 4.38v9.42a.67.67 0 0 1-.66.66h-9.3a.67.67 0 0 1-.66-.68V1.33a.67.67 0 0 1 .66-.66h5.54v3.9a.67.67 0 0 0 .66.68zm-5.45 7.69 2.54-2.53a.19.19 0 0 0 .01-.27.16.16 0 0 0-.14-.06H8.93a.2.2 0 0 1-.2-.2v-2.6a.18.18 0 0 0-.18-.19H6.92a.19.19 0 0 0-.19.18v2.61a.2.2 0 0 1-.2.2H5.19a.18.18 0 0 0-.19.18.2.2 0 0 0 .06.15l2.54 2.53a.18.18 0 0 0 .26 0" clip-rule="evenodd"/></svg>', 'file-excel': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zm-.018 7h1.335L8.776 9.48l1.5-2.48H9.02l-.795 1.485a5 5 0 0 0-.157.436h-.014a2.6 2.6 0 0 0-.15-.422L7.19 7H5.82l1.457 2.5L5.683 12h1.342l.865-1.614q.09-.234.115-.349h.014q.053.244.101.335z" clip-rule="evenodd"/><path fill="currentColor" d="M10 4V1l3 3z"/></svg>', 'file-excel-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.982 12h1.335L8.776 9.48l1.5-2.48H9.02l-.795 1.485a5 5 0 0 0-.157.436h-.014a2.6 2.6 0 0 0-.15-.422L7.19 7H5.82l1.457 2.5L5.683 12h1.342l.865-1.614q.09-.234.115-.349h.014q.053.244.101.335z"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4l-3-3zm6 3V2.537L11.254 4zm2 1v9H4V2h5v3z" clip-rule="evenodd"/></svg>', 'file-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m10 1 3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 1.415V4h1.585zM12 5H9V2H4v12h8z" clip-rule="evenodd"/></svg>', 'file-pdf': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.464 11.274a4 4 0 0 0-.393.207c-.223.137-.37.27-.444.387-.072.11-.073.19-.03.273l.019.034.027-.01c.103-.042.268-.177.48-.433q.18-.22.34-.458m1.243-1.007q.378-.09.764-.146a9 9 0 0 1-.386-.65 16 16 0 0 1-.378.796m1.873.363a3 3 0 0 0 .341.314c.164.123.28.165.344.168a.1.1 0 0 0 .053-.012.23.23 0 0 0 .07-.094.3.3 0 0 0 .045-.152.07.07 0 0 0-.02-.047c-.039-.047-.15-.116-.391-.159a3 3 0 0 0-.463-.04zM8.051 7.952q.096-.308.151-.626.035-.213.029-.352a.5.5 0 0 0-.024-.15.4.4 0 0 0-.11.03c-.066.027-.12.08-.148.215l-.01.057q-.029.213.044.565.027.126.068.26"/><path fill="currentColor" fill-rule="evenodd" d="M9 1v4h4v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM5.42 12.713a.6.6 0 0 1-.332-.318c-.147-.294-.098-.588.06-.834.15-.233.4-.43.68-.596a6 6 0 0 1 1.122-.489q.454-.817.804-1.686a5.6 5.6 0 0 1-.326-.98c-.065-.303-.09-.603-.034-.86.056-.268.207-.509.492-.623l.055-.02a.75.75 0 0 1 .4-.038.53.53 0 0 1 .362.276c.066.124.09.27.096.407.005.142-.01.3-.036.465-.063.386-.204.859-.394 1.358q.316.672.742 1.277a4.5 4.5 0 0 1 1.01.038c.276.049.556.147.727.352a.64.64 0 0 1 .151.392.9.9 0 0 1-.104.426.8.8 0 0 1-.312.341.65.65 0 0 1-.342.078c-.25-.01-.495-.148-.706-.315l-.095-.081a4.3 4.3 0 0 1-.595-.638 9 9 0 0 0-1.512.307 8.6 8.6 0 0 1-.773 1.143c-.22.265-.46.496-.701.596a.6.6 0 0 1-.44.022" clip-rule="evenodd"/><path fill="currentColor" d="M10 1v3h3z"/></svg>', 'file-pdf-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.42 12.713a.6.6 0 0 1-.332-.318c-.147-.294-.098-.588.06-.834.15-.233.4-.43.68-.596a6 6 0 0 1 1.122-.489q.454-.817.804-1.686a5.5 5.5 0 0 1-.326-.98c-.065-.303-.09-.603-.034-.86.056-.268.207-.509.492-.623.145-.058.303-.09.455-.058a.53.53 0 0 1 .362.276c.066.124.09.27.096.407.005.142-.01.3-.036.465-.063.386-.204.859-.394 1.358q.316.672.742 1.277a4.4 4.4 0 0 1 1.01.038c.276.049.556.147.727.352a.64.64 0 0 1 .151.392.9.9 0 0 1-.104.426.8.8 0 0 1-.268.315.65.65 0 0 1-.386.104c-.25-.01-.495-.148-.706-.315a4.3 4.3 0 0 1-.69-.72 9 9 0 0 0-1.512.308 8.6 8.6 0 0 1-.773 1.143c-.22.265-.46.496-.701.596a.6.6 0 0 1-.44.022m1.044-1.44a4 4 0 0 0-.348.18c-.248.148-.41.29-.49.415-.07.11-.072.19-.03.273l.02.034.027-.01c.103-.042.268-.177.48-.433q.18-.22.34-.458m1.242-1.006q.378-.09.764-.146a9 9 0 0 1-.386-.65 16 16 0 0 1-.378.796m2.18.65a3 3 0 0 1-.328-.309q.233.002.463.04c.24.043.352.112.392.159q.019.02.02.047a.3.3 0 0 1-.045.152.23.23 0 0 1-.071.094.1.1 0 0 1-.053.012c-.07-.003-.196-.05-.377-.194m-1.684-3.59q-.056.316-.15.625a3 3 0 0 1-.069-.26c-.057-.268-.065-.478-.034-.623.028-.134.082-.188.148-.214a.4.4 0 0 1 .11-.03.5.5 0 0 1 .024.15q.006.138-.029.351" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 1 1-1h6l3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm7 .537V4h1.254zM12 14V5H9V2H4v12z" clip-rule="evenodd"/></svg>', 'file-text': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zm2 2H5v1h6zM5 9h6v1H5zm6 2H5v1h6z" clip-rule="evenodd"/><path fill="currentColor" d="M10 4V1l3 3z"/></svg>', 'file-text-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11 7H5v1h6zM5 9h6v1H5zm6 2H5v1h6z"/><path fill="currentColor" fill-rule="evenodd" d="m13 4-3-3H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1zm-3 0V2.415L11.585 4zM9 5h3v9H4V2h5z" clip-rule="evenodd"/></svg>', 'file-upload': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.12 3.67 10.41.87a.63.63 0 0 0-.47-.2h-.17v3.66h3.54v-.17c0-.18-.06-.36-.19-.49m.19 11V5.25H9.55c-.37 0-.67-.31-.66-.68V.67H3.35a.68.68 0 0 0-.66.66v13.32c0 .37.29.67.66.68h9.3c.36-.01.65-.3.66-.66m-3-4.64H8.93c-.1 0-.19.07-.2.18v2.61c0 .1-.09.18-.19.18H6.91a.18.18 0 0 1-.18-.18V10.2c0-.1-.07-.19-.18-.2H5.19s-.09.01-.14 0a.19.19 0 0 1 0-.27L7.6 7.14c.07-.07.19-.07.26 0l2.54 2.54s.06.09.06.14c0 .1-.09.18-.19.18z"/></svg>', 'file-word': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zM5 7l1.091 5h1.002L8 8.262 8.91 12h.98L11 7h-.93l-.701 3.492L8.568 7H7.47l-.836 3.435L5.944 7z" clip-rule="evenodd"/><path fill="currentColor" d="M10 4V1l3 3z"/></svg>', 'file-word-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m5 7 1.091 5h1.002L8 8.262 8.91 12h.98L11 7h-.93l-.701 3.492L8.568 7H7.47l-.836 3.435L5.944 7z"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4l-3-3zm6 3V2.537L11.254 4zm2 1v9H4V2h5v3z" clip-rule="evenodd"/></svg>', 'filter': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 0-1 1v1.586a1 1 0 0 0 .293.707L6 9v2.5a1 1 0 0 0 .4.8l2 1.5A1 1 0 0 0 10 13V9l3.707-3.707A1 1 0 0 0 14 4.586V3a1 1 0 0 0-1-1z" clip-rule="evenodd"/></svg>', 'filter-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 3h10v1.586l-4 4V13l-2-1.5V8.586l-4-4zm3 7V9L2.293 5.293A1 1 0 0 1 2 4.586V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1.586a1 1 0 0 1-.293.707L10 9v4a1 1 0 0 1-1.6.8l-2-1.5a1 1 0 0 1-.4-.8z" clip-rule="evenodd"/></svg>', 'floppy-disk': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 3a1 1 0 0 1 1-1h7.586a1 1 0 0 1 .707.293l2.414 2.414a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm2 0h6v3H4zm4 5a2 2 0 1 0 0 4 2 2 0 0 0 0-4" clip-rule="evenodd"/></svg>', 'floppy-disk-checked': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 3a1 1 0 0 1 1-1h7.586a1 1 0 0 1 .707.293l2.414 2.414a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm2 0h6v3H4zm6.828 5-3.535 3.535-2.12-2.12.706-.708 1.415 1.414 2.828-2.828z" clip-rule="evenodd"/></svg>', 'floppy-disk-checked-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11.293 2.293A1 1 0 0 0 10.586 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5.414a1 1 0 0 0-.293-.707zM3 13V3h1v3h6V3h.586L13 5.414V13zM9 3H5v2h4zm1.828 5.12L8 10.948v.001l-.707.707-.707-.706-1.414-1.415.707-.707 1.415 1.414 2.828-2.828z" clip-rule="evenodd"/></svg>', 'floppy-disk-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6 10a2 2 0 1 1 4 0 2 2 0 0 1-4 0m2 1a1 1 0 1 1 0-2 1 1 0 0 1 0 2" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M10.586 2a1 1 0 0 1 .707.293l2.414 2.414a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zM3 3v10h10V5.414L10.586 3H10v3H4V3zm2 0h4v2H5z" clip-rule="evenodd"/></svg>', 'folder': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 4h7c.55 0 1 .45 1 1v7c0 .55-.45 1-1 1H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h4z"/></svg>', 'folder-check': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14 4H7L6 3H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1M5.705 8.185 7 9.48l3.295-3.295.705.705-4 4-2-2z" clip-rule="evenodd"/></svg>', 'folder-check-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.705 8.185 7 9.48l3.295-3.295.705.705-4 4-2-2z"/><path fill="currentColor" fill-rule="evenodd" d="m6 3 1 1.001h7c.55 0 1 .45 1 1.001v6.997c0 .55-.45 1.001-1 1.001H2c-.55 0-1-.45-1-1.001V4.001C1 3.451 1.45 3 2 3zm-.41 1.001H2v8.008h12V5.002H6.59z" clip-rule="evenodd"/></svg>', 'folder-lines': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4H7L6 3H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1m-5 6H4V9h5zm3-2H4V7h8z"/></svg>', 'folder-lines-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12 8.005H4V7.004h8zM9 9.006H4v1.001h5zM5.59 4.001H2v8.008h12V5.002H6.59l-.29-.29zM6 3l1 1.001h7c.55 0 1 .45 1 1.001v6.997c0 .55-.45 1.001-1 1.001H2c-.55 0-1-.45-1-1.001V4.001C1 3.451 1.45 3 2 3z"/></svg>', 'folder-link': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4.44H8.46L6.62 2.67H2C1.27 2.67.68 3.27.67 4v8c0 .73.6 1.32 1.33 1.33h12c.73 0 1.32-.6 1.33-1.33V5.78c0-.73-.6-1.33-1.33-1.34m-6.82 6.88H5.65c-1.34 0-2.42-1.08-2.42-2.42s1.08-2.42 2.42-2.42h.84c.14 0 .25.11.25.25 0 .06-.02.13-.06.17-.2.21-.36.45-.49.71-.04.07-.11.13-.19.14h-.33c-.62-.15-1.24.22-1.39.84s.22 1.24.84 1.39c.15.04.31.04.47.02h1.58c.62 0 1.12-.48 1.15-1.1v-.22c-.02-.08 0-.16.06-.22.12-.13.29-.2.47-.2h.45c.12 0 .23.09.25.21.02.14.02.29 0 .43 0 1.32-1.05 2.39-2.37 2.42m3.17 0h-.84c-.06 0-.13-.02-.17-.07-.1-.1-.1-.25 0-.35.2-.21.36-.45.49-.71.02-.09.08-.16.17-.19h.36c.63.04 1.18-.43 1.23-1.07.04-.63-.43-1.18-1.07-1.23H8.83c-.64 0-1.15.51-1.15 1.15v.25c.02.08 0 .16-.06.22-.12.13-.29.21-.47.21H6.7c-.13 0-.24-.09-.26-.22-.01-.14-.01-.27 0-.41a2.41 2.41 0 0 1 2.38-2.43h1.52c1.34 0 2.42 1.07 2.43 2.41 0 1.34-1.09 2.42-2.42 2.43z"/></svg>', 'folder-link-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m6.22 3.67 1.55 1.49.29.28h5.93c.19 0 .34.16.34.34v6.21c0 .18-.15.34-.33.34H2.01c-.18 0-.34-.15-.34-.33V4.01c0-.18.15-.34.33-.34zm.4-1H2C1.27 2.67.68 3.27.67 4v8c0 .73.6 1.32 1.33 1.33h12c.73 0 1.32-.6 1.33-1.33V5.78c0-.73-.6-1.33-1.33-1.34H8.46z"/><path fill="currentColor" d="M9.555 8.848a2.37 2.37 0 0 1-2.372 2.372l-1.486.006a2.366 2.366 0 0 1-2.37-2.37 2.38 2.38 0 0 1 2.376-2.377h.82c.135 0 .25.106.25.249q-.001.094-.062.17a3 3 0 0 0-.474.687.26.26 0 0 1-.223.143h-.286a1.13 1.13 0 0 0-1.165 1.086 1.123 1.123 0 0 0 1.082 1.163c.023.005.045 0 .063 0l1.481-.002A1.123 1.123 0 0 0 8.292 8.64a.25.25 0 0 1 .063-.214.62.62 0 0 1 .46-.201l.464-.001c.125 0 .223.089.245.21q.034.206.035.419zm3.11.001a2.365 2.365 0 0 0-2.371-2.37l-1.481.001a2.387 2.387 0 0 0-2.337 2.8c.022.12.125.205.245.21l.464-.001a.6.6 0 0 0 .46-.201.24.24 0 0 0 .063-.214 1.123 1.123 0 0 1 1.104-1.335l1.48-.002a1.12 1.12 0 0 1 1.15 1.096 1.13 1.13 0 0 1-1.099 1.152c-.022.004-.045 0-.062 0h-.286a.25.25 0 0 0-.223.143c-.125.25-.286.482-.474.688a.244.244 0 0 0 .013.352.24.24 0 0 0 .17.063l.82-.001a2.38 2.38 0 0 0 2.377-2.376z"/></svg>', 'folder-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7 4.001 6 3H2c-.55 0-1 .45-1 1.001v7.998C1 12.549 1.45 13 2 13h12c.55 0 1-.45 1-1.001V5.002c0-.55-.45-1.001-1-1.001zm-5 0h3.59l1 1.001H14v7.007H2z" clip-rule="evenodd"/></svg>', 'folder-star': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4.44H8.46L6.62 2.67H2A1.35 1.35 0 0 0 .67 4v8A1.35 1.35 0 0 0 2 13.33h12A1.35 1.35 0 0 0 15.33 12V5.78A1.36 1.36 0 0 0 14 4.44m-.2 3.89L12 9.66l.69 2a.22.22 0 0 1-.08.27.26.26 0 0 1-.13.06.4.4 0 0 1-.15-.06l-1.77-1.26L8.75 12a.34.34 0 0 1-.15 0 .3.3 0 0 1-.13 0 .23.23 0 0 1-.08-.27l.69-2-1.81-1.35a.23.23 0 0 1-.1-.17.24.24 0 0 1 .24-.24h2.21l.67-2a.26.26 0 0 1 .243-.156.24.24 0 0 1 .217.156l.67 2h2.2a.26.26 0 0 1 .26.24.3.3 0 0 1-.08.12"/></svg>', 'folders': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 3h4c.55 0 1 .45 1 1v5c0 .55-.45 1-1 1h-1V8a2 2 0 0 0-2-2H6.414l-1-1H5V3c0-.55.45-1 1-1h2z"/><path fill="currentColor" d="M10 7a1 1 0 0 1 1 1v5c0 .55-.45 1-1 1H3c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h2l1 1z"/></svg>', 'folders-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 3 8 2H6c-.55 0-1 .45-1 1v2h1V3h1.59l1 1H13v5.01h-1V10h1c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1z"/><path fill="currentColor" fill-rule="evenodd" d="m5 6 1 1h4c.55 0 1 .45 1 1v5c0 .55-.45 1-1 1H3c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1zm-.41 1H3v6.01h7V8H5.59z" clip-rule="evenodd"/></svg>', 'gavel': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.908 5.012a.59.59 0 0 0 .59 1.02l.138-.08.59 1.02-5.892 3.402a.59.59 0 0 0 .589 1.02l5.892-3.4.589 1.02-.14.08a.59.59 0 0 0 .59 1.02l3.31-1.91a.59.59 0 0 0-.59-1.02l-.139.08-1.768-3.062.14-.08a.59.59 0 0 0-.59-1.021zm3.631 7.01a.5.5 0 1 0 0 1h5a.5.5 0 0 0 0-1z"/></svg>', 'gavel-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.869 4.99a.59.59 0 0 0 .59 1.02l.138-.08.59 1.02-5.892 3.402a.59.59 0 1 0 .589 1.02l5.892-3.4.59 1.02-.14.08a.59.59 0 0 0 .589 1.02l3.31-1.91a.59.59 0 0 0-.59-1.02l-.139.08L9.628 4.18l.14-.08a.59.59 0 0 0-.59-1.021zm1.594.44 1.3-.75 1.767 3.062-1.299.75z" clip-rule="evenodd"/><path fill="currentColor" d="M9.5 12a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1z"/></svg>', 'graduation-cap': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m1 6 7-3 7 3v5h-1V6.429L8 9z"/><path fill="currentColor" d="M3 7.945V11l5 2 5-2V7.945l-5 2.143z"/></svg>', 'graduation-cap-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1 6 2 .857V11l5 2 5-2V6.857l1-.428V11h1V6L8 3zm3 4.323V7.286L8 9l4-1.714v3.037l-4 1.6zM3.539 6 8 7.912 12.461 6 8 4.088z" clip-rule="evenodd"/></svg>', 'hand-euro': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.91 7.11c-.581.55-1.362.89-2.213.89h-.01c-1.357 0-2.527-.86-3.043-2.09H8v-1h1.385a4 4 0 0 1-.02-.554l.002-.043q.005-.113.017-.223H8v-1h1.642C10.156 1.86 11.322 1 12.687 1c.901 0 1.712.37 2.313.98l-.711.71c-.42-.43-.991-.69-1.602-.69-.774 0-1.492.422-1.92 1.09h1.239v1h-1.612a2.7 2.7 0 0 0 0 .82h1.612v1h-1.241C11.19 6.578 11.907 7 12.687 7c.57 0 1.101-.22 1.512-.6zM3 7H1v7h2zm9.81 4.5h-2.06c-.09.18-.2.34-.35.49-.37.37-.87.58-1.39.58s-1.02-.2-1.39-.58l-1.04-1.04c-.2-.2-.2-.51 0-.71s.51-.2.71 0l1.04 1.04c.36.36 1 .37 1.36 0 .18-.18.28-.42.28-.68s-.1-.5-.28-.68L8.44 8.67c-.2-.2-.44-.36-.71-.48-.3-.12-.62-.18-.94-.18h-2.8v4.8h.02l.29-.02 1.94 1.63c.45.38 1.02.58 1.6.58h5.81c.74 0 1.33-.6 1.33-1.33 0-1.2-.97-2.17-2.17-2.17"/></svg>', 'hand-euro-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.91 7.11c-.581.55-1.362.89-2.213.89h-.01c-1.357 0-2.527-.86-3.043-2.09H8v-1h1.385a3.7 3.7 0 0 1 0-.82H8v-1h1.642C10.156 1.86 11.322 1 12.687 1c.901 0 1.712.37 2.313.98l-.711.71c-.42-.43-.991-.69-1.602-.69-.774 0-1.492.422-1.92 1.09h1.239v1h-1.612a2.7 2.7 0 0 0 0 .82h1.612v1h-1.241C11.19 6.578 11.907 7 12.687 7c.57 0 1.101-.22 1.512-.6z"/><path fill="currentColor" fill-rule="evenodd" d="M1 7h3v1h2.798a2.5 2.5 0 0 1 1.77.731L9.73 9.896a1.56 1.56 0 0 1 .376 1.603h2.726c1.197 0 2.167.971 2.167 2.167 0 .737-.599 1.333-1.334 1.333H7.852a2.5 2.5 0 0 1-1.599-.578L4 12.566V14H1zm1 1h1v5H2zm2 1v2.27l2.892 2.382c.27.224.61.347.96.347h5.814c.185 0 .334-.15.334-.333 0-.644-.522-1.167-1.167-1.167h-3.77a1.56 1.56 0 0 1-1.539-.395l-.75-.75a.5.5 0 1 1 .707-.707l.75.75a.56.56 0 0 0 .397.164h.021a.56.56 0 0 0 .375-.957L7.861 9.439A1.5 1.5 0 0 0 6.799 9z" clip-rule="evenodd"/></svg>', 'hand-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.75 3.5c-.41 0-.75.34-.75.75v3.5c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-4c0-.41-.34-.75-.75-.75s-.75.34-.75.75v4c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-5c0-.41-.34-.75-.75-.75S8 2.34 8 2.75v5c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-4c0-.41-.34-.75-.75-.75S6 3.34 6 3.75V11L3.97 9.54a.845.845 0 0 0-1.21 0c-.33.34-.34.88 0 1.21l2.22 2.22c.66.66 1.55 1.03 2.47 1.03H11a2.5 2.5 0 0 0 2.5-2.5V4.25c0-.41-.34-.75-.75-.75"/></svg>', 'history': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.975 3.82.002-.001-.083-.09-.063-.066-.009-.01-.001-.002a6 6 0 0 0-.272-.29q-.076-.074-.157-.144l-.058-.052-.004-.003a6 6 0 0 0-.275-.237 6 6 0 0 0-.22-.166l-.024-.018a7 7 0 0 0-.293-.203 7 7 0 0 0-.859-.467 7 7 0 0 0-.339-.14l-.03-.011a6 6 0 0 0-.255-.093 7 7 0 0 0-.376-.108L9.592 1.7a4 4 0 0 0-.652-.128l-.092-.015q-.072-.013-.146-.022A6.47 6.47 0 0 0 3 3.847V1.996H2v4h4v-1H3.406a5.48 5.48 0 0 1 5.189-2.467q.061.008.124.019l.077.012q.188.025.373.064.088.02.173.044l.063.017q.16.041.317.09.115.04.227.084l.016.006a6 6 0 0 1 .523.232 5.4 5.4 0 0 1 .736.452l.03.022q.09.066.178.134.12.098.235.204l.05.044a4 4 0 0 1 .36.364l.012.013A5.496 5.496 0 1 1 2.5 7.996h-1A6.5 6.5 0 1 0 12.975 3.82"/><path fill="currentColor" d="M10.088 11.746 7.293 8.95V4.246h1v4.29l2.5 2.505z"/></svg>', 'home': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m13.55 5.5-5-3.33C8.38 2.06 8.19 2 7.99 2s-.39.06-.56.17L2.45 5.5c-.28.19-.45.5-.45.83v6.66c0 .55.45 1 1 1h4V12c0-.56.45-1.01 1-1.01s1 .45 1 1.01v1.99h4c.55 0 1-.45 1-1V6.33c0-.33-.17-.65-.45-.83"/></svg>', 'home-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m13.55 5.5-5-3.33C8.38 2.06 8.19 2 7.99 2s-.39.06-.56.17L2.45 5.5c-.28.19-.45.5-.45.83v6.66c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V6.33c0-.33-.17-.65-.45-.83m-.56 7.5h-4v-1c0-.55-.45-1-1-1s-1 .45-1 1v1H3V6.33L8 3l5 3.33V13z"/></svg>', 'info-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-7.75 4V7h1.5v5zm0-8v1.5h1.5V4z" clip-rule="evenodd"/></svg>', 'info-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.25 12V7h1.5v5zm0-8v1.5h1.5V4z"/><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m6-7A6 6 0 1 0 2 8a6 6 0 0 0 12 0" clip-rule="evenodd"/></svg>', 'interrogation-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15.039 8.146a7 7 0 1 1-14 0 7 7 0 0 1 14 0m-6.974-.5a1 1 0 1 0-.942-1.335l-1.43-.458A2.501 2.501 0 1 1 8.79 9.04v.606h-1.5v-2zm-.026 3a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5" clip-rule="evenodd"/></svg>', 'interrogation-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.824 7.646a1 1 0 1 0-.943-1.335l-1.429-.458A2.501 2.501 0 1 1 8.548 9.04v.606h-1.5v-2zm-.776 3.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0"/><path fill="currentColor" fill-rule="evenodd" d="M7.798 15.146a7 7 0 1 0 0-14 7 7 0 0 0 0 14m0-1a6 6 0 1 0 0-12 6 6 0 0 0 0 12" clip-rule="evenodd"/></svg>', 'key': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.44 6.67a3.994 3.994 0 0 0-5.1-2.44A3.986 3.986 0 0 0 .9 9.33 3.994 3.994 0 0 0 6 11.77c1.14-.4 2.04-1.3 2.44-2.44h2.89V12H14V9.33h1.33V6.67zM4.67 9.33c-.73 0-1.33-.6-1.33-1.33s.6-1.33 1.33-1.33S6 7.27 6 8s-.58 1.32-1.31 1.33z"/></svg>', 'laptop': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.5 5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z"/><path fill="currentColor" fill-rule="evenodd" d="M3 3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1H1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1h-2a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm10 1H3v7h10z" clip-rule="evenodd"/></svg>', 'layers': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.763 8.94a.5.5 0 0 0 .474 0l6.5-3.5a.5.5 0 0 0 0-.88l-6.5-3.5a.5.5 0 0 0-.474 0l-6.5 3.5a.5.5 0 0 0 0 .88zM8 7.932 2.555 5 8 2.068 13.445 5zM8 12a.5.5 0 0 1-.237-.06l-6.5-3.5.474-.88L8 10.932l6.263-3.372.474.88-6.5 3.5A.5.5 0 0 1 8 12m0 3a.5.5 0 0 1-.237-.06l-6.5-3.5.474-.88L8 13.932l6.263-3.372.474.88-6.5 3.5A.5.5 0 0 1 8 15" clip-rule="evenodd"/></svg>', 'life-ring': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15a6.97 6.97 0 0 0 4.192-1.394 7 7 0 0 0 1.315-1.284A6.97 6.97 0 0 0 15 8a6.97 6.97 0 0 0-1.394-4.192 7 7 0 0 0-1.414-1.414A6.97 6.97 0 0 0 8 1a6.97 6.97 0 0 0-4.192 1.394 7 7 0 0 0-1.414 1.414A6.97 6.97 0 0 0 1 8a6.97 6.97 0 0 0 1.394 4.192c.368.493.8.935 1.284 1.315A6.97 6.97 0 0 0 8 15m3.446-4.968 1.445 1.444a6 6 0 0 1-1.415 1.415l-1.444-1.445a4 4 0 0 0 1.414-1.414m-6.892 0a4 4 0 0 0 1.414 1.414l-1.445 1.445a6 6 0 0 1-1.414-1.415zm1.414-5.478a4 4 0 0 0-1.414 1.414L3.109 4.523A6 6 0 0 1 4.523 3.11zm5.509-1.445-1.445 1.445a4 4 0 0 1 1.414 1.414l1.445-1.445a6 6 0 0 0-1.415-1.414M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6" clip-rule="evenodd"/></svg>', 'lines-rectangle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm2 4h6v1H5zm4 3H5v1h4z" clip-rule="evenodd"/></svg>', 'lines-rectangle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5 6h6v1H5zm4 3H5v1h4z"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm8 1H4v12h8z" clip-rule="evenodd"/></svg>', 'link': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13.65 2.727a3 3 0 0 1 .975.653 3 3 0 0 1 .01 4.24l-4 4a3 3 0 0 1-2.135.88 3 3 0 0 1-2.125-.865 3 3 0 0 1 0-4.25l.71-.71.705.71-.705.71a2.003 2.003 0 1 0 2.835 2.83l4-4a2.006 2.006 0 0 0-.65-3.27 2.005 2.005 0 0 0-2.185.435l-.71-.71a3 3 0 0 1 3.275-.653M1.66 11.76a2 2 0 0 0 .435.65 2 2 0 0 0 2.835 0l.71.71A3.04 3.04 0 0 1 3.5 14a3 3 0 0 1-2.13-.85 3 3 0 0 1 0-4.255l4-4A3.009 3.009 0 0 1 9.625 9.15l-1.06 1.06-.71-.71 1.06-1.075A2 2 0 0 0 9.5 7a1.97 1.97 0 0 0-1.22-1.86 2 2 0 0 0-2.185.435l-4 4a2 2 0 0 0-.436 2.185" clip-rule="evenodd"/></svg>', 'list': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 3h9v1H5zm0 9h9v1H5zm9-4.5H5v1h9zm-12 0h1v1H2zM3 3H2v1h1zm-1 9h1v1H2z" clip-rule="evenodd"/></svg>', 'loader': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-opacity=".2" d="M13.657 8A5.657 5.657 0 1 1 2.343 8a5.657 5.657 0 0 1 11.314 0M3.475 8a4.526 4.526 0 1 0 9.05 0 4.526 4.526 0 0 0-9.05 0"/><path fill="currentColor" d="M2.343 8A5.657 5.657 0 0 1 8 2.343v1.132A4.525 4.525 0 0 0 3.475 8z"/></svg>', 'location': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 14.997c2.5-2.5 5-6.236 5-8.997A5 5 0 0 0 3 6c0 2.761 2.5 6.496 5 8.997m0-7.499a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'location-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 6.002a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M13 6.002c0 2.506-2.06 5.814-4.309 8.273q-.344.376-.691.723a23 23 0 0 1-.691-.723C5.059 11.816 3 8.508 3 6.002a5 5 0 0 1 10 0m-1 0c0 1.116-.52 2.554-1.424 4.088A21.5 21.5 0 0 1 8 13.55a21.5 21.5 0 0 1-2.576-3.459C4.52 8.556 4 7.118 4 6.002a4 4 0 1 1 8 0" clip-rule="evenodd"/></svg>', 'lock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 4v3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-6 0m5 3V4a2 2 0 1 0-4 0v3zm-2 3a1 1 0 1 0 0 2 1 1 0 0 0 0-2" clip-rule="evenodd"/></svg>', 'lock-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/><path fill="currentColor" fill-rule="evenodd" d="M5 4v3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-6 0m5 3V4a2 2 0 1 0-4 0v3zm2 1v6H4V8z" clip-rule="evenodd"/></svg>', 'log-in': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 13v1h5a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H8v1h5v10z"/><path fill="currentColor" d="m9.086 8.5-1.793 1.793L8 11l3-3-3-3-.707.707L9.086 7.5H2v1z"/></svg>', 'log-out': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.086 8.5-1.793 1.793L11 11l3-3-3-3-.707.707L12.086 7.5H5v1z"/><path fill="currentColor" d="M8 3V2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5v-1H3V3z"/></svg>', 'magnifying-glass': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7a5 5 0 1 1 8.872 3.164l3.127 3.128-.707.707-3.128-3.128A5 5 0 0 1 2 7m5 4a4 4 0 1 1 0-8 4 4 0 0 1 0 8" clip-rule="evenodd"/></svg>', 'mail': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M1.007 4.002v8.011a1 1 0 0 0 1 1h11.997a1 1 0 0 0 1-1V4l-7 5z"/><path fill="currentColor" d="m1.52 3.14 6.484 4.63 6.485-4.632a1 1 0 0 0-.486-.126H2.008a1 1 0 0 0-.487.127"/></svg>', 'mail-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 3.999v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8A1 1 0 0 0 14.001 3H2a1 1 0 0 0-1 .999m13 .713-6 4.28-6-4.28V12h12zM2.724 4 8 7.764 13.276 4z" clip-rule="evenodd"/></svg>', 'messages-square': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 10v1.017a1 1 0 0 1-1.006 1L8 12l-4 2v-1.978H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm1-6H5v1h6a1 1 0 0 1 1 1v3h1zm-3 3H4v1h6zM4 9h3v1H4z" clip-rule="evenodd"/></svg>', 'messages-square-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 7h6v1H4zm0 2h3v1H4z"/><path fill="currentColor" fill-rule="evenodd" d="M12 10v1.017a1 1 0 0 1-1.006 1L8 12l-4 2v-1.978H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm1-6H5v1h6a1 1 0 0 1 1 1v3h1zm-5.233 6.999L5 12.382v-1.36H3V6h8v5.017z" clip-rule="evenodd"/></svg>', 'mobile': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 10a1 1 0 1 1 2 0 1 1 0 0 1-2 0M6 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5" clip-rule="evenodd"/></svg>', 'mobile-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M6 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm8 1H4v12h8z" clip-rule="evenodd"/></svg>', 'notes': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13 4h-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1v1a1 1 0 0 0 1 1h5v-4h4V5a1 1 0 0 0-1-1M3 3h8v1H5a1 1 0 0 0-1 1v6H3zm9 4H6v1h6zM6 9h3v1H6z" clip-rule="evenodd"/><path fill="currentColor" d="m11 14 3-3h-3z"/></svg>', 'notes-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12 7H6v1h6zM9 9H6v1h3z"/><path fill="currentColor" fill-rule="evenodd" d="M13 4h-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1v1a1 1 0 0 0 1 1h6l3-3V5a1 1 0 0 0-1-1M3 3h8v1H5a1 1 0 0 0-1 1v6H3zm10 2H5v8h5v-3h3zm-.414 6L11 12.586V11z" clip-rule="evenodd"/></svg>', 'paper-plane': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.855 2.145a.5.5 0 0 0-.525-.115l-11 4a.5.5 0 0 0 0 .935L6.625 8.68l3.17-3.18.705.705L7.315 9.39l1.72 4.295A.5.5 0 0 0 9.5 14a.5.5 0 0 0 .46-.33l4-11a.5.5 0 0 0-.105-.525"/></svg>', 'paper-plane-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.855 2.145a.5.5 0 0 0-.525-.115l-11 4a.5.5 0 0 0 0 .935l4.8 1.92 1.92 4.8A.5.5 0 0 0 9.5 14a.5.5 0 0 0 .46-.33l4-11a.5.5 0 0 0-.105-.525M9.5 12.1 8.105 8.6 10.5 6.205 9.795 5.5 7.38 7.915 3.9 6.5l8.765-3.165z"/></svg>', 'paper-plane-slash': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.705 1 15 14.295l-.7.705-4-4-1.34 3.67a.5.5 0 0 1-.46.33.5.5 0 0 1-.465-.315l-1.72-4.295L8 8.705 7.295 8l-1.67 1.68L1.33 7.965a.5.5 0 0 1 0-.935L5 5.705l-4-4zM12.97 3.67l-1.725 4.745-3.66-3.66L12.33 3.03a.5.5 0 0 1 .64.64" clip-rule="evenodd"/></svg>', 'paper-plane-slash-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.705 1 15 14.295l-.7.705-4-4-1.34 3.67a.5.5 0 0 1-.46.33.5.5 0 0 1-.45-.315l-1.92-4.8-4.8-1.92a.5.5 0 0 1 0-.935L5 5.705l-4-4zM5.77 6.5l-2.87 1 3.48 1.415L7.295 8zm1.335 3.1L8.5 13.1l1-2.87L8 8.705zm4.56-5.265-3.82 1.39-.78-.78L12.33 3.03a.5.5 0 0 1 .64.64l-1.915 5.265-.78-.78z" clip-rule="evenodd"/></svg>', 'paperclip': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m6.57 12.358 6.09-6.09a1.035 1.035 0 1 0-1.465-1.463l-5.32 5.32-.733-.731 5.321-5.321A2.07 2.07 0 1 1 13.391 7l-5.339 5.34-.006.006-.744.744A3.106 3.106 0 0 1 2.91 8.698L9.608 2l.732.732L3.642 9.43a2.07 2.07 0 1 0 2.928 2.928"/></svg>', 'pen': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10.88 2.293a1 1 0 0 1 1.415 0l1.414 1.414a1 1 0 0 1 0 1.414l-1.414 1.415-2.828-2.829zm.705 4.953L8.756 4.417 2 11.174l.003 2.825 2.825.003z"/></svg>', 'pen-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m-3.692-3.307v-1.54l4.538-4.539 1.54 1.54-4.538 4.539zm7.268-6.312a.42.42 0 0 1 0 .583l-.753.753-1.54-1.54.747-.753a.42.42 0 0 1 .583 0z" clip-rule="evenodd"/></svg>', 'pen-fancy': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.63 8.65c-.24.07-.43.26-.5.5l-1.46 4.37.11.12 2.3-2.3v-.19c0-.44.35-.8.79-.81.44 0 .8.35.81.79 0 .44-.35.8-.79.81h-.21l-2.3 2.3.12.11 4.37-1.46c.24-.07.43-.26.5-.5l.82-2.08L5.7 7.83zm7.17-6.3L6.27 7.28 8.69 9.7l4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83"/></svg>', 'pen-fancy-files-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 2H6v10h6V8.946l.023-.058.085-.078.892-.813V12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v.112a2.3 2.3 0 0 0-.974.66L12 2.8zm1 4.643-1 .913-.566.515-1.528-1.524L12 4.275l.767-.832q.113-.127.233-.215c1.167-.857 2.797.9 1.555 1.997zM4 3H3v11.5a.5.5 0 0 0 .5.5H11v-1H4zm4.238 4.41a.47.47 0 0 0-.316.315L7 10.477l.07.076 1.452-1.449v-.12a.51.51 0 0 1 .5-.51.51.51 0 0 1 .511.498.51.51 0 0 1-.499.51h-.133L7.45 10.931l.075.069 2.76-.92a.47.47 0 0 0 .317-.314l.518-1.31-1.573-1.562z" clip-rule="evenodd"/></svg>', 'pen-fancy-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.24 1.67c-.49 0-1 .21-1.44.7L6.27 7.3l2.42 2.42 4.94-4.52c1.6-1.42.19-3.53-1.39-3.53M8.72 8.34 7.66 7.28l3.9-4.24c.22-.24.44-.36.69-.36.41 0 .87.34 1.03.78.14.37.04.7-.32 1.02L8.73 8.36zM5.7 7.86l-2.08.82c-.24.08-.42.26-.5.5l-1.46 4.37.12.12.56.56.12.12 4.37-1.46c.24-.08.42-.26.5-.5l.81-2.08L5.7 7.87zm-2.57 4.46L4 9.72c.03-.08.09-.15.17-.18l1.29-.51 1.52 1.52-.5 1.29c-.03.08-.1.15-.19.18l-2.6.87.95-.95c.06.02.12.04.19.04.44 0 .79-.35.79-.79s-.35-.79-.79-.79-.79.35-.79.79c0 .07.02.13.04.19l-.95.95z"/></svg>', 'pen-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.295 2.293a1 1 0 0 0-1.414 0L9.467 3.707l2.828 2.829 1.414-1.415a1 1 0 0 0 0-1.414z"/><path fill="currentColor" fill-rule="evenodd" d="m2.003 13.999 2.825.003 6.757-6.756-2.829-2.829L2 11.174zM3 11.587l5.756-5.755 1.414 1.414-5.755 5.756L3.002 13z" clip-rule="evenodd"/></svg>', 'phone': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m10 10.53 1.034-1.035a1.01 1.01 0 0 1 1.08-.221l1.259.503A1.01 1.01 0 0 1 14 10.7v2.308a1 1 0 0 1-1.052.992C4.124 13.45 2.343 5.974 2.006 3.112A1.002 1.002 0 0 1 3.007 2h2.228a1 1 0 0 1 .923.628l.503 1.26a1 1 0 0 1-.217 1.08L5.41 6.002s.595 4.029 4.59 4.527"/></svg>', 'phone-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.62 14h-.079C3.472 13.479 2.184 5.826 2.004 3.49A1.384 1.384 0 0 1 3.278 2h2.543a.92.92 0 0 1 .859.582l.701 1.726a.92.92 0 0 1-.203.997l-.983.992a4.325 4.325 0 0 0 3.499 3.508l1.001-.993a.92.92 0 0 1 1.002-.189l1.74.697a.92.92 0 0 1 .567.858v2.437A1.385 1.385 0 0 1 12.62 14M3.389 2.923a.46.46 0 0 0-.462.462v.037c.213 2.732 1.574 9.193 9.665 9.655a.46.46 0 0 0 .49-.434v-2.465l-1.74-.696-1.325 1.315-.222-.028c-4.015-.503-4.56-4.518-4.56-4.56l-.028-.221 1.311-1.325-.692-1.74z"/></svg>', 'picture': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14 3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1zM4 5a1 1 0 1 0 2 0 1 1 0 0 0-2 0m7.134 2.514L13 10.023V13H3v-2.494l.896-1.064c.203-.242.305-.362.425-.408a.5.5 0 0 1 .358 0c.12.046.222.166.425.408l1.767 2.098 2.995-4.026c.21-.282.316-.423.444-.476a.5.5 0 0 1 .38 0c.129.053.234.194.444.476" clip-rule="evenodd"/></svg>', 'picture-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/><path fill="currentColor" fill-rule="evenodd" d="M14 13a1 1 0 0 1-1 1H2h.994A1 1 0 0 1 2 13V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zM3 3h10v5.315l-1.069-1.43a6 6 0 0 0-.29-.368 1.5 1.5 0 0 0-.555-.41 1.5 1.5 0 0 0-1.14-.001c-.27.11-.448.288-.556.408-.098.11-.2.246-.291.366L6.822 9.911l-.974-1.14a5 5 0 0 0-.283-.314 1.5 1.5 0 0 0-.53-.353 1.5 1.5 0 0 0-1.064 0c-.248.094-.42.245-.529.352a5 5 0 0 0-.283.314L3 8.956zm0 10v-2.506l.903-1.055c.202-.237.303-.355.423-.4a.5.5 0 0 1 .355 0c.12.045.22.164.422.4l1.769 2.07 3.01-4.006c.21-.28.315-.42.443-.472a.5.5 0 0 1 .38 0c.127.053.232.193.441.474L13 9.985V13z" clip-rule="evenodd"/></svg>', 'play-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1m3.724 7.447-6 3A.5.5 0 0 1 5 11V5a.5.5 0 0 1 .724-.447l6 3a.5.5 0 0 1 0 .894"/></svg>', 'plus': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 2H7v5H2v2h5v5h2V9h5V7H9z"/></svg>', 'plus-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14M7 7V4h2v3h3v2H9v3H7V9H4V7z" clip-rule="evenodd"/></svg>', 'share': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4.5a2.5 2.5 0 0 1-4.467 1.543L6.915 7.35a2.5 2.5 0 0 1 0 1.298l2.618 1.308a2.5 2.5 0 1 1-.448.894L6.467 9.544a2.5 2.5 0 1 1 0-3.085l2.618-1.31A2.503 2.503 0 0 1 11.5 2 2.5 2.5 0 0 1 14 4.5"/></svg>', 'share-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m1 0a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0M6 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.623 1.32a2.5 2.5 0 1 1-.156-2.863L9.085 5.15c.088.33.243.633.448.894L6.915 7.35a2.5 2.5 0 0 1 0 1.298l2.618 1.308a2.5 2.5 0 1 1-.448.894L6.467 9.544q.084-.107.156-.223M11.5 13a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'shuffle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m11.295 9.705 1.79 1.795h-3.31L7.59 8l2.185-3.5h3.31l-1.79 1.795L12 7l3-3-3-3-.705.705 1.79 1.795h-3.31a1 1 0 0 0-.845.47L7 7.055 5.07 3.97a1 1 0 0 0-.845-.47H1v1h3.225L6.41 8l-2.185 3.5H1v1h3.225a1 1 0 0 0 .845-.47L7 8.945l1.93 3.085a1 1 0 0 0 .845.47h3.31l-1.79 1.795L12 15l3-3-3-3z"/></svg>', 'sitemap': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.33 10h-2c-.37 0-.66.3-.66.67v2c0 .36.3.65.66.66h2c.37 0 .66-.29.67-.66v-2c0-.37-.3-.67-.67-.67m-.5-1.67H7.5v1h1v-1h4.67v1h1v-1.2c0-.44-.36-.8-.8-.8H8.5V6h.83c.37 0 .67-.3.67-.67v-2c0-.37-.3-.66-.67-.66H6.67c-.37 0-.66.29-.67.66v2c0 .37.3.67.67.67h.83v1.33H2.63c-.44 0-.8.36-.8.8v1.2h1zM9 10H7c-.37 0-.67.3-.67.67v2c0 .37.3.66.67.66h2c.37 0 .66-.29.67-.66v-2c0-.37-.3-.67-.67-.67m5.67 0h-2c-.37 0-.67.3-.67.67v2c0 .37.3.66.67.66h2c.36 0 .65-.3.66-.66v-2c0-.37-.29-.66-.66-.67"/></svg>', 'sliders': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.95 4H15v1h-2.05v.002a2.5 2.5 0 0 1-2.672 1.988A2.52 2.52 0 0 1 8.05 5.002V5H1V4h7.05v-.002a2.5 2.5 0 0 1 2.672-1.988 2.52 2.52 0 0 1 2.228 1.988zm-9.9 8H1v-1h2.05v-.002A2.52 2.52 0 0 1 5.5 9a2.5 2.5 0 0 1 2.45 1.999V11H15v1H7.95v.002A2.52 2.52 0 0 1 5.5 14a2.5 2.5 0 0 1-2.45-1.998z"/></svg>', 'sliders-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.95 4H15v1h-2.05c-.25 1.15-1.25 2-2.45 2s-2.2-.85-2.45-2H1V4h7.05C8.3 2.85 9.3 2 10.5 2s2.2.85 2.45 2M9 4.5c0 .85.65 1.5 1.5 1.5S12 5.35 12 4.5 11.35 3 10.5 3 9 3.65 9 4.5M3.05 12H1v-1h2.05C3.3 9.85 4.3 9 5.5 9s2.2.85 2.45 2H15v1H7.95c-.25 1.15-1.25 2-2.45 2s-2.2-.85-2.45-2M7 11.5c0-.85-.65-1.5-1.5-1.5S4 10.65 4 11.5 4.65 13 5.5 13 7 12.35 7 11.5" clip-rule="evenodd"/></svg>', 'squares': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm7 0a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1zm0 7a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1zm-7 0a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/></svg>', 'star': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" stroke="currentColor" d="m8 2.472 1.715 3.475.116.235.26.038 3.835.557-2.775 2.705-.188.183.044.26.655 3.818-3.43-1.803L8 11.818l-.233.122-3.43 1.803.656-3.818.044-.26-.188-.183-2.775-2.705L5.91 6.22l.26-.038.116-.235z"/></svg>', 'star-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="currentColor" d="m8 2.472 1.715 3.475.116.235.26.038 3.835.557-2.775 2.705-.188.183.044.26.655 3.818-3.43-1.803L8 11.818l-.233.122-3.43 1.803.656-3.818.044-.26-.188-.183-2.775-2.705L5.91 6.22l.26-.038.116-.235z"/></svg>', 'table': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 13a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1zm1-3v3h3v-3zm4 0v3h6v-3zm6-1H7V6h6zM6 9H3V6h3zM3 5V3h10v2z" clip-rule="evenodd"/></svg>', 'tag': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7.43c0 .275.11.538.303.732l5.535 5.535c.404.404 1.06.404 1.464 0l4.395-4.395a1.036 1.036 0 0 0 0-1.464L8.162 2.303A1.04 1.04 0 0 0 7.43 2H3.036C2.464 2 2 2.464 2 3.036zM5.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'tag-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0-1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2 7.43c0 .275.11.538.303.732l5.535 5.535c.404.404 1.06.404 1.464 0l4.395-4.395a1.036 1.036 0 0 0 0-1.464L8.162 2.303A1.04 1.04 0 0 0 7.43 2H3.036C2.464 2 2 2.464 2 3.036zm1 0q0 .016.01.025l5.535 5.534a.036.036 0 0 0 .05 0l4.394-4.394a.036.036 0 0 0 0-.05L7.456 3.01A.04.04 0 0 0 7.43 3H3.036A.036.036 0 0 0 3 3.036z" clip-rule="evenodd"/></svg>', 'tags': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.855 6.645 8.5 1.295A1 1 0 0 0 7.795 1H4a1 1 0 0 0-1 1v1h1V2h3.795l5 5-.65.645.71.71 1-1a.5.5 0 0 0 0-.71"/><path fill="currentColor" fill-rule="evenodd" d="M2 8.978c0 .251.1.493.278.67l5.073 5.074a.95.95 0 0 0 1.343 0l4.028-4.028a.95.95 0 0 0 0-1.343L7.649 4.278A.95.95 0 0 0 6.978 4H2.949A.95.95 0 0 0 2 4.95zM5.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'tags-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8.5 1.295 5.355 5.35a.5.5 0 0 1 0 .71l-1 1-.71-.71.65-.645-5-5H4v1H3V2a1 1 0 0 1 1-1h3.795a1 1 0 0 1 .705.295"/><path fill="currentColor" fill-rule="evenodd" d="M5.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0-1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2.278 9.649A.95.95 0 0 1 2 8.978V4.949A.95.95 0 0 1 2.95 4h4.028c.251 0 .493.1.67.278l5.074 5.073a.95.95 0 0 1 0 1.343l-4.028 4.028a.95.95 0 0 1-1.343 0zm5.744 4.33L3 8.957V5h3.957l5.022 5.022z" clip-rule="evenodd"/></svg>', 'thumb-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.202 11.934a1.506 1.506 0 0 1-2.438 1.651L5.5 10.461v-8.46h4.922c1.081 0 2.058.714 2.484 1.817l.944 3.394c.51 1.32-.362 2.788-1.656 2.788h-1.772zM4.5 10H2V2h2.5z"/></svg>', 'thumb-down-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11.204 11.934 10.424 10h1.772c1.294 0 2.166-1.468 1.656-2.788l-.944-3.394C12.484 2.715 11.507 2 10.426 2H5v.003H2v8h3.023l3.744 3.582a1.506 1.506 0 0 0 2.437-1.651m.755-7.797C11.657 3.4 11.033 3 10.425 3H6.002l.017 6.572 3.439 3.29a.506.506 0 0 0 .819-.554L8.943 9h3.253c.24 0 .48-.131.645-.41.167-.28.218-.657.079-1.018l-.018-.045zM3 9.003h2v-6H3z" clip-rule="evenodd"/></svg>', 'thumb-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.202 4.069a1.506 1.506 0 0 0-2.438-1.651L5.5 5.542v8.46h4.922c1.081 0 2.058-.714 2.484-1.817l.944-3.394c.51-1.32-.362-2.788-1.656-2.788h-1.772zM4.5 6.003H2v8h2.5z"/></svg>', 'thumb-up-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m11.204 4.069-.78 1.934h1.772c1.294 0 2.166 1.468 1.656 2.788l-.944 3.394c-.425 1.103-1.402 1.818-2.483 1.818H5V14H2V6h3.023l3.744-3.582a1.506 1.506 0 0 1 2.437 1.65m.755 7.797c-.302.738-.926 1.137-1.534 1.137H6.002L6.02 6.43l3.439-3.29a.506.506 0 0 1 .819.554L8.943 7.003h3.253c.24 0 .48.13.645.41.167.28.218.657.079 1.018l-.018.045zM3 7h2v6H3z" clip-rule="evenodd"/></svg>', 'thumbtack': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m8.91 2-1.2 3.594L2.364 7.09 5.274 10l-.707.706-1.687 1.687-.264.264-.09.09-.209.498L2 14l.755-.317.498-.21.09-.089.264-.264 1.687-1.687.706-.706 2.91 2.908 1.496-5.347L14 7.09z" clip-rule="evenodd"/></svg>', 'thumbtack-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m5.273 10-2.91 2.91L2 14l1.09-.364L6 10.727l2.91 2.91 1.496-5.348L14 7.09 8.91 2l-1.2 3.594L2.364 7.09zm3.241-3.563-4.18 1.17 4.059 4.059 1.17-4.18 2.533-.845-2.737-2.737z" clip-rule="evenodd"/></svg>', 'trash': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11 2v1h3v1h-1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4H2V3h3V2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1M6 3V2h4v1zm1 3H6v6h1zm2 0h1v6H9z" clip-rule="evenodd"/></svg>', 'trash-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 6H6v6h1zm2 0h1v6H9z"/><path fill="currentColor" fill-rule="evenodd" d="M11 3V2a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v1H2v1h1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4h1V3zM6 2v1h4V2zm6 2v10H4V4z" clip-rule="evenodd"/></svg>', 'universal-access': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-3.5-1V6h-7v1H7v1.367l-1.934 3.385.868.496L7.79 9h.42l1.856 3.248.868-.496L9 8.367V7zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/></svg>', 'universal-access-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4.111 13.82A7 7 0 0 0 8 15a7.01 7.01 0 0 0 7-7 7 7 0 1 0-10.889 5.82m.556-10.809A6 6 0 0 1 8 2a6.007 6.007 0 0 1 6 6 6 6 0 1 1-9.333-4.989M8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2M11.5 7V6h-7v1H7v1.367l-1.934 3.385.868.496L7.79 9h.42l1.856 3.248.868-.496L9 8.367V7z" clip-rule="evenodd"/></svg>', 'unlink': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.5 1h-1v2h1zM1.792 2.501l.707-.707L4.207 3.5l-.707.707zm9.998 9.995.708-.707 1.707 1.708-.707.707zM1 5.5h2v1H1zm14 4h-2v1h2zM9.5 13h1v2h-1zm-1.21-2.465-1.855 1.86a2.002 2.002 0 0 1-2.83-2.83l1.86-1.86L4.755 7 2.9 8.86a3 3 0 0 0-.03 4.27A3 3 0 0 0 5 14a3.04 3.04 0 0 0 2.16-.9L9 11.245zm1.275-6.93-1.86 1.86L7 4.755 8.84 2.9A3.04 3.04 0 0 1 11 2a3 3 0 0 1 2.13.87 3 3 0 0 1-.03 4.27L11.245 9l-.71-.705 1.86-1.86a2.002 2.002 0 0 0-2.83-2.83"/></svg>', 'unlock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 7V4a2 2 0 1 0-4 0v1H5V4a3 3 0 0 1 6 0v3h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm-3 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0" clip-rule="evenodd"/></svg>', 'unlock-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/><path fill="currentColor" fill-rule="evenodd" d="M10 4v3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-6 0v1h1V4a2 2 0 1 1 4 0m2 4v6H4V8z" clip-rule="evenodd"/></svg>', 'upload': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3.706 6.703 3 6l5-5 5 5-.704.702L8.5 2.912V12h-1V2.913zM13 14v-2h1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-.996-1.002L2 14v-2h1v2z" clip-rule="evenodd"/></svg>', 'user': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6M6 9a4 4 0 0 0-4 4 1 1 0 0 0 1 1h10a1 1 0 0 0 1-1 4 4 0 0 0-4-4z" clip-rule="evenodd"/></svg>', 'user-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.01 1C4.146.99 1.01 4.128 1 7.99c0 3.863 3.128 7 6.99 7.01 3.853 0 6.99-3.109 7.01-6.962C15.019 4.176 11.9 1.02 8.038 1zm0 .715a6.28 6.28 0 0 1 6.275 6.295v.028a6.2 6.2 0 0 1-1.135 3.586 2.59 2.59 0 0 0-2.537-2.26H9.478a3.44 3.44 0 0 1-2.937 0H5.415a2.573 2.573 0 0 0-2.546 2.26 6.2 6.2 0 0 1-1.135-3.586 6.284 6.284 0 0 1 6.247-6.323zM5.147 5.778a2.914 2.914 0 0 1 2.91-2.909 2.914 2.914 0 0 1 2.908 2.909 2.914 2.914 0 0 1-2.909 2.909H8.01a2.917 2.917 0 0 1-2.86-2.91"/></svg>', 'user-group': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m-4 4c0-.972.347-1.863.923-2.556A2.5 2.5 0 0 0 1 10.5V12a1 1 0 0 0 1 1h2.268A2 2 0 0 1 4 12zm10 2h-2.268A2 2 0 0 0 12 12v-1c0-.972-.347-1.863-.923-2.556A2.5 2.5 0 0 1 15 10.5V12a1 1 0 0 1-1 1m-9-2a3 3 0 0 1 6 0v1a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1zm9-5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0M3.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/></svg>', 'user-group-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0M9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" d="M2 10.5V12h2c0 .364.097.706.268 1H2a1 1 0 0 1-1-1v-1.5a2.5 2.5 0 0 1 3.923-2.056q-.321.386-.54.844A1.5 1.5 0 0 0 2 10.5M14 13h-2.268A2 2 0 0 0 12 12h2v-1.5a1.5 1.5 0 0 0-2.384-1.212 4 4 0 0 0-.539-.844A2.5 2.5 0 0 1 15 10.5V12a1 1 0 0 1-1 1"/><path fill="currentColor" fill-rule="evenodd" d="M8 8a3 3 0 0 0-3 3v1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1a3 3 0 0 0-3-3m2 4v-1a2 2 0 1 0-4 0v1zm2.5-5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0-1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1M5 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0" clip-rule="evenodd"/></svg>', 'user-lock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.5 7a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M5 8a4 4 0 0 0-4 4 1 1 0 0 0 1 1h7v-1.5a1.5 1.5 0 0 1 1.036-1.427c.109-.63.452-1.178.938-1.553A4 4 0 0 0 9 8z"/><path fill="currentColor" fill-rule="evenodd" d="M10.5 11h.5v-.5a1.5 1.5 0 0 1 3 0v.5h.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5m2.75-.5v.5h-1.5v-.5a.75.75 0 0 1 1.5 0" clip-rule="evenodd"/></svg>', 'user-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0m-1 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-8 8a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4 1 1 0 0 1-1 1H3a1 1 0 0 1-1-1m1 0a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3z" clip-rule="evenodd"/></svg>', 'user-pen-fancy-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.5 7a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5m0-4C6.67 3 6 3.67 6 4.5S6.67 6 7.5 6 9 5.33 9 4.5 8.33 3 7.5 3m3.62 8.46-.22.54-.3.77s-.04.09-.06.13c-.03.04-.06.07-.1.1-.05.04-.1.07-.16.08L7.52 14l-.07-.07 1.45-1.45h.13c.15 0 .27-.06.36-.16a.6.6 0 0 0 .1-.15c.01-.02.02-.04.03-.07v-.02s.01-.05.01-.08v-.03c0-.28-.23-.5-.51-.5-.28.01-.5.24-.5.51v.14l-.76.75-.14.13-.55.55-.07-.07.16-.48.1-.29.24-.71.42-1.27c.05-.16.17-.28.32-.32l1.31-.52zm3.44-3.24-2.05 1.87-.7.64-.06.05-.32.29-1.52-1.52.28-.31.06-.06.64-.7 1.88-2.04c1.16-1.31 3.11.61 1.79 1.78"/><path fill="currentColor" fill-rule="evenodd" d="M9 8H6c-2.21 0-4 1.79-4 4 0 .55.45 1 1 1h3.11l.33-1H3c0-1.66 1.34-3 3-3h3.05l.83-.9C9.6 8.03 9.3 8 9 8" clip-rule="evenodd"/></svg>', 'user-plus': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 3.33h-1.35V2c-.02-.18-.17-.33-.35-.33h-.65c-.18 0-.33.15-.35.33v1.33H10c-.18 0-.33.16-.33.34v.66c0 .18.15.33.33.34h1.3V6c.02.18.17.32.35.33h.65c.18 0 .33-.15.35-.33V4.67H14a.34.34 0 0 0 .32-.34v-.66a.34.34 0 0 0-.32-.34M9.28 9.77h-.2c-1.25.51-2.66.51-3.91 0H5a3.006 3.006 0 0 0-3.3 2.67v.74c.06.67.63 1.17 1.3 1.15h8.25c.69.06 1.3-.45 1.36-1.14v-.68a3 3 0 0 0-3.23-2.75h-.1zM7.13 3.7c1.46 0 2.64 1.17 2.65 2.63 0 1.46-1.17 2.64-2.63 2.65-1.46 0-2.64-1.17-2.65-2.63A2.65 2.65 0 0 1 7.13 3.7"/></svg>', 'user-question-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.23 11.14c.86-.66 1.01-1.9.35-2.75s-1.9-1.01-2.75-.35a1.96 1.96 0 0 0 0 3.1c-.72.42-1.16 1.2-1.16 2.03v.8c0 .2.17.37.37.37h3.98c.2 0 .37-.17.37-.37v-.8c0-.83-.44-1.61-1.16-2.03M2.81 9.59c0-.67.55-1.22 1.22-1.22s1.22.55 1.22 1.22-.55 1.22-1.22 1.22-1.22-.55-1.22-1.22m2.83 4H2.41v-.42c0-.89.72-1.62 1.62-1.62s1.62.72 1.62 1.62v.42zm7.13-11.93H8c-.86 0-1.56.7-1.56 1.56v7.16c0 .21.17.37.37.37.08 0 .16-.03.22-.07l1.49-1.12h4.25c.86 0 1.56-.7 1.56-1.56V3.22c0-.86-.7-1.56-1.56-1.56m.82 6.33c0 .45-.37.82-.82.82H8.4a.4.4 0 0 0-.22.07l-1 .75V3.22c0-.45.37-.82.82-.82h4.77c.45 0 .82.37.82.82zm-2.8-.42c0 .23-.18.41-.41.41s-.41-.18-.41-.41.18-.41.41-.41.41.18.41.41m-.41-4.34c-.83 0-1.5.67-1.5 1.5 0 .23.18.41.41.41s.41-.18.41-.41c0-.38.31-.68.69-.68s.68.31.68.69-.31.68-.68.68c-.23 0-.41.18-.41.41v.44c0 .23.18.41.41.41s.41-.18.41-.41v-.09c.8-.23 1.26-1.06 1.04-1.85-.18-.65-.77-1.09-1.44-1.09z"/></svg>', 'user-shield': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2.676 2.768A1 1 0 0 0 2 3.714v4.799a3 3 0 0 0 .154.949l.06.177A7 7 0 0 0 5.1 13.334l2.373 1.508a1 1 0 0 0 1.074-.001l2.361-1.507a7 7 0 0 0 2.875-3.687l.062-.185c.102-.306.154-.627.154-.949V3.714a1 1 0 0 0-.676-.946l-5-1.712a1 1 0 0 0-.648 0zM8 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4m-4.22 2.627a6 6 0 0 0 1.857 1.863l2.373 1.508 2.361-1.507a6 6 0 0 0 1.85-1.862A4 4 0 0 0 9 8.999H7c-1.32 0-2.492.641-3.22 1.628" clip-rule="evenodd"/></svg>', 'user-shield-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 5.998a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2 3.712a1 1 0 0 1 .676-.946l5-1.712a1 1 0 0 1 .648 0l5 1.712a1 1 0 0 1 .676.946v4.799c0 .322-.052.643-.154.949l-.062.185a7 7 0 0 1-2.875 3.687l-2.36 1.507a1 1 0 0 1-1.075 0l-2.373-1.507a7 7 0 0 1-2.888-3.695l-.06-.177A3 3 0 0 1 2 8.51zm11 0v4.799q0 .324-.103.632l-.061.186a6 6 0 0 1-.614 1.298A4 4 0 0 0 9 8.997H7c-1.32 0-2.492.64-3.22 1.628a6 6 0 0 1-.618-1.304l-.06-.178A2 2 0 0 1 3 8.511V3.712L8 2zM9 9.998a3 3 0 0 1 2.582 1.47c-.355.39-.76.734-1.21 1.021L8.01 13.996l-2.373-1.508a6 6 0 0 1-1.217-1.022A3 3 0 0 1 7 9.998z" clip-rule="evenodd"/></svg>', 'users': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.25 3.335a2.5 2.5 0 1 0 0 4.33A3.5 3.5 0 0 1 6.5 5.5c0-.818.28-1.57.75-2.165M10 3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m-5 9.2A3.2 3.2 0 0 1 8.2 9h3.6a3.2 3.2 0 0 1 3.2 3.2.8.8 0 0 1-.8.8H5.8a.8.8 0 0 1-.8-.8M5.48 9H4.2A3.2 3.2 0 0 0 1 12.2a.8.8 0 0 0 .8.8h2.387A1.8 1.8 0 0 1 4 12.2 4.19 4.19 0 0 1 5.48 9"/></svg>', 'users-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.5 5.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0M10 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" clip-rule="evenodd"/><path fill="currentColor" d="M4.2 9h1.28a4.2 4.2 0 0 0-.858 1H4.2a2.2 2.2 0 0 0-2.191 2h1.996a4 4 0 0 0-.005.2c0 .287.067.559.187.8H1.8a.8.8 0 0 1-.8-.8A3.2 3.2 0 0 1 4.2 9"/><path fill="currentColor" fill-rule="evenodd" d="M5 12.2A3.2 3.2 0 0 1 8.2 9h3.6a3.2 3.2 0 0 1 3.2 3.2.8.8 0 0 1-.8.8H5.8a.8.8 0 0 1-.8-.8m6.8-2.2a2.2 2.2 0 0 1 2.191 2H6.009A2.2 2.2 0 0 1 8.2 10z" clip-rule="evenodd"/><path fill="currentColor" d="M6 3c.455 0 .882.122 1.25.335a3.5 3.5 0 0 0-.5.865 1.5 1.5 0 1 0 0 2.6c.125.313.294.604.5.865A2.5 2.5 0 1 1 6 3"/></svg>', 'wallet': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm1 0h11v1H2zm9 5a1 1 0 1 1 2 0 1 1 0 0 1-2 0" clip-rule="evenodd"/></svg>', 'wallet-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11 9a1 1 0 1 1 2 0 1 1 0 0 1-2 0"/><path fill="currentColor" fill-rule="evenodd" d="M2 13a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm0-9h11v1H2zm12 2H2v6h12z" clip-rule="evenodd"/></svg>' };
|
|
907
910
|
|
|
908
911
|
const mgIconCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-icon-border-radius: Defines the border radius of icons. Default value is `50%`.\n */:host{display:inline-flex;vertical-align:middle}.mg-c-icon{color:currentcolor}.mg-c-icon[size=small],.mg-c-icon.mg-c-icon--size-small{width:var(--mg-b-size-12);height:var(--mg-b-size-12)}.mg-c-icon[size=small][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-small[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-16) - var(--mg-b-size-12))/2)}.mg-c-icon[size=medium],.mg-c-icon.mg-c-icon--size-medium{width:var(--mg-b-size-16);height:var(--mg-b-size-16)}.mg-c-icon[size=medium][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-medium[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-24) - var(--mg-b-size-16))/2)}.mg-c-icon[size=large],.mg-c-icon.mg-c-icon--size-large{width:var(--mg-b-size-20);height:var(--mg-b-size-20)}.mg-c-icon[size=large][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-large[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-32) - var(--mg-b-size-20))/2)}.mg-c-icon[size=xlarge],.mg-c-icon.mg-c-icon--size-xlarge{width:var(--mg-b-size-24);height:var(--mg-b-size-24)}.mg-c-icon[size=xlarge][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-xlarge[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-40) - var(--mg-b-size-24))/2)}.mg-c-icon[size=xxlarge],.mg-c-icon.mg-c-icon--size-xxlarge{width:var(--mg-b-size-32);height:var(--mg-b-size-32)}.mg-c-icon[size=xxlarge][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-xxlarge[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-48) - var(--mg-b-size-32))/2)}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-icon{color:var(--mg-b-color-app)}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-icon{color:var(--mg-b-color-blue)}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-icon{color:var(--mg-b-color-80)}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-icon{color:var(--mg-b-color-danger)}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-icon{color:var(--mg-b-color-info)}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-icon{color:var(--mg-b-color-success)}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-icon{color:var(--mg-b-color-warning)}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-app), white 80%))}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-blue), white 80%))}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-80), white 80%))}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-full{color:var(--mg-b-color-app);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-app), white 80%))}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-full{color:var(--mg-b-color-blue);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-blue), white 80%))}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-full{color:var(--mg-b-color-80);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-80), white 80%))}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-full{color:var(--mg-b-color-danger);background-color:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-full{color:var(--mg-b-color-info);background-color:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-full{color:var(--mg-b-color-success);background-color:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-full{color:var(--mg-b-color-warning);background-color:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-icon[class*=mg-c-icon--variant-]{overflow:visible;border-radius:var(--mg-c-icon-border-radius)}.mg-c-icon--spin{animation-duration:.75s;animation-iteration-count:infinite;animation-name:rotate}@keyframes rotate{to{transform:rotate(360deg)}}";
|
|
909
|
-
const MgIconStyle0 = mgIconCss;
|
|
910
912
|
|
|
911
913
|
const MgIcon = class {
|
|
912
914
|
constructor(hostRef) {
|
|
@@ -922,7 +924,7 @@ const MgIcon = class {
|
|
|
922
924
|
/**
|
|
923
925
|
* Component classes
|
|
924
926
|
*/
|
|
925
|
-
this.classCollection = new index_es.
|
|
927
|
+
this.classCollection = new index_es.kt(['mg-c-icon']);
|
|
926
928
|
/**
|
|
927
929
|
* Method to set default varianStyle props
|
|
928
930
|
* needeed has stencil doesn't know that props is mutated when updated in prop watcher
|
|
@@ -936,37 +938,52 @@ const MgIcon = class {
|
|
|
936
938
|
* @param icon - icon to render
|
|
937
939
|
*/
|
|
938
940
|
this.renderIcon = (icon) => {
|
|
939
|
-
|
|
940
|
-
|
|
941
|
+
var _a;
|
|
942
|
+
// Remove existing SVG from ShadowRoot
|
|
943
|
+
(_a = this.element.shadowRoot.querySelector('svg')) === null || _a === void 0 ? void 0 : _a.remove();
|
|
944
|
+
// Append new SVG to ShadowRoot
|
|
945
|
+
const svgContainer = document.createElement('div');
|
|
946
|
+
svgContainer.innerHTML = icons[icon];
|
|
947
|
+
this.element.shadowRoot.append(svgContainer.firstChild);
|
|
948
|
+
svgContainer.remove();
|
|
941
949
|
// update svg attributes
|
|
950
|
+
this.svg = this.element.shadowRoot.querySelector('svg');
|
|
942
951
|
this.svg.setAttribute('aria-hidden', 'true');
|
|
943
952
|
this.svg.setAttribute('focusable', 'false');
|
|
944
953
|
this.svg.setAttribute('class', this.classCollection.join());
|
|
945
954
|
};
|
|
946
955
|
}
|
|
947
956
|
validateIcon(newValue, oldValue) {
|
|
948
|
-
if (!Object.keys(icons).includes(newValue))
|
|
949
|
-
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${index_es.
|
|
957
|
+
if (!Object.keys(icons).includes(newValue)) {
|
|
958
|
+
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
959
|
+
}
|
|
950
960
|
else {
|
|
951
|
-
if (oldValue !== undefined)
|
|
961
|
+
if (oldValue !== undefined) {
|
|
952
962
|
this.classCollection.delete(`mg-c-icon--${oldValue}`);
|
|
963
|
+
}
|
|
953
964
|
this.classCollection.add(`mg-c-icon--${newValue}`);
|
|
954
965
|
this.renderIcon(newValue);
|
|
955
966
|
}
|
|
956
967
|
}
|
|
957
968
|
validateSize(newValue, oldValue) {
|
|
958
|
-
|
|
959
|
-
|
|
969
|
+
// When removing size attribute, it is set to null
|
|
970
|
+
if (newValue === null) {
|
|
971
|
+
newValue = 'medium';
|
|
972
|
+
}
|
|
973
|
+
if (!sizes$3.includes(newValue)) {
|
|
974
|
+
throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$3.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
975
|
+
}
|
|
960
976
|
else {
|
|
961
|
-
if (oldValue !== undefined)
|
|
977
|
+
if (oldValue !== undefined) {
|
|
962
978
|
this.classCollection.delete(`mg-c-icon--size-${oldValue}`);
|
|
979
|
+
}
|
|
963
980
|
this.classCollection.add(`mg-c-icon--size-${newValue}`);
|
|
964
981
|
}
|
|
965
982
|
}
|
|
966
983
|
validateVariant(newValue, oldValue) {
|
|
967
984
|
if (newValue !== undefined) {
|
|
968
985
|
if (!variants$2.includes(newValue))
|
|
969
|
-
throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${index_es.
|
|
986
|
+
throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
970
987
|
else {
|
|
971
988
|
this.setDefaultVariantStyle();
|
|
972
989
|
if (oldValue !== undefined)
|
|
@@ -978,7 +995,7 @@ const MgIcon = class {
|
|
|
978
995
|
validateVariantStyle(newValue, oldValue) {
|
|
979
996
|
if (newValue !== undefined) {
|
|
980
997
|
if (!variantStyles$1.includes(newValue))
|
|
981
|
-
throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${index_es.
|
|
998
|
+
throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
982
999
|
else {
|
|
983
1000
|
if (oldValue !== undefined)
|
|
984
1001
|
this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
|
|
@@ -1021,19 +1038,18 @@ const MgIcon = class {
|
|
|
1021
1038
|
"spin": ["handleSpin"]
|
|
1022
1039
|
}; }
|
|
1023
1040
|
};
|
|
1024
|
-
MgIcon.style =
|
|
1041
|
+
MgIcon.style = mgIconCss;
|
|
1025
1042
|
|
|
1026
1043
|
/**
|
|
1027
1044
|
* List of all possibles sizes
|
|
1028
1045
|
*/
|
|
1029
|
-
const sizes$
|
|
1046
|
+
const sizes$2 = ['small', 'medium', 'large'];
|
|
1030
1047
|
/**
|
|
1031
1048
|
* List of all possibles directions
|
|
1032
1049
|
*/
|
|
1033
1050
|
const directions = ['vertical', 'horizontal'];
|
|
1034
1051
|
|
|
1035
1052
|
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))}";
|
|
1036
|
-
const MgIllustratedMessageStyle0 = mgIllustratedMessageCss;
|
|
1037
1053
|
|
|
1038
1054
|
const MgIllustratedMessage = class {
|
|
1039
1055
|
constructor(hostRef) {
|
|
@@ -1049,11 +1065,11 @@ const MgIllustratedMessage = class {
|
|
|
1049
1065
|
/**
|
|
1050
1066
|
* Component classes
|
|
1051
1067
|
*/
|
|
1052
|
-
this.classCollection = new index_es.
|
|
1068
|
+
this.classCollection = new index_es.kt(['mg-c-illustrated-message']);
|
|
1053
1069
|
}
|
|
1054
1070
|
watchSize(newValue, oldValue) {
|
|
1055
|
-
if (!sizes$
|
|
1056
|
-
throw new Error(`<mg-illustrated-message> prop "size" must be one of: ${sizes$
|
|
1071
|
+
if (!sizes$2.includes(newValue)) {
|
|
1072
|
+
throw new Error(`<mg-illustrated-message> prop "size" must be one of: ${sizes$2.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
1057
1073
|
}
|
|
1058
1074
|
else {
|
|
1059
1075
|
if (oldValue !== undefined) {
|
|
@@ -1064,7 +1080,7 @@ const MgIllustratedMessage = class {
|
|
|
1064
1080
|
}
|
|
1065
1081
|
watchDirection(newValue, oldValue) {
|
|
1066
1082
|
if (newValue !== undefined && !directions.includes(newValue)) {
|
|
1067
|
-
throw new Error(`<mg-illustrated-message> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${index_es.
|
|
1083
|
+
throw new Error(`<mg-illustrated-message> prop "direction" must be one of: ${directions.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
1068
1084
|
}
|
|
1069
1085
|
else if (newValue === 'horizontal') {
|
|
1070
1086
|
this.classCollection.add('mg-c-illustrated-message--direction-horizontal');
|
|
@@ -1087,7 +1103,7 @@ const MgIllustratedMessage = class {
|
|
|
1087
1103
|
if (slottedDetails.length === 0 && slottedTitle === null) {
|
|
1088
1104
|
throw new Error('<mg-illustrated-message> Slot "title" or "details" must be present.');
|
|
1089
1105
|
}
|
|
1090
|
-
else if (slottedTitle !== null && !index_es.
|
|
1106
|
+
else if (slottedTitle !== null && !index_es.Tt(slottedTitle, headingTags)) {
|
|
1091
1107
|
throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}.`);
|
|
1092
1108
|
}
|
|
1093
1109
|
else if (slottedIllustrations.length !== 1) {
|
|
@@ -1119,10 +1135,9 @@ const MgIllustratedMessage = class {
|
|
|
1119
1135
|
"direction": ["watchDirection"]
|
|
1120
1136
|
}; }
|
|
1121
1137
|
};
|
|
1122
|
-
MgIllustratedMessage.style =
|
|
1138
|
+
MgIllustratedMessage.style = mgIllustratedMessageCss;
|
|
1123
1139
|
|
|
1124
1140
|
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}}";
|
|
1125
|
-
const MgInputStyle0 = mgInputCss;
|
|
1126
1141
|
|
|
1127
1142
|
const MgInput = class {
|
|
1128
1143
|
constructor(hostRef) {
|
|
@@ -1134,6 +1149,10 @@ const MgInput = class {
|
|
|
1134
1149
|
this.classInput = 'mg-c-input';
|
|
1135
1150
|
this.classHasError = 'mg-c-input--has-error';
|
|
1136
1151
|
this.classLabelOnTop = 'mg-c-input--label-on-top';
|
|
1152
|
+
/**
|
|
1153
|
+
* Define if label is displayed on top
|
|
1154
|
+
*/
|
|
1155
|
+
this.labelOnTop = false;
|
|
1137
1156
|
/**
|
|
1138
1157
|
* Define if label is visible
|
|
1139
1158
|
*/
|
|
@@ -1169,11 +1188,11 @@ const MgInput = class {
|
|
|
1169
1188
|
this.renderTooltip = () => (index.h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, index.h("mg-icon", { icon: "info-circle" })));
|
|
1170
1189
|
}
|
|
1171
1190
|
watchIdentifier(newValue) {
|
|
1172
|
-
if (!index_es.
|
|
1173
|
-
throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${index_es.
|
|
1191
|
+
if (!index_es.Le(newValue)) {
|
|
1192
|
+
throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${index_es.zt(newValue)}.`);
|
|
1174
1193
|
}
|
|
1175
|
-
else if (!index_es.
|
|
1176
|
-
console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
1194
|
+
else if (!index_es.Ot(newValue)) {
|
|
1195
|
+
console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${index_es.zt(newValue)}.`);
|
|
1177
1196
|
}
|
|
1178
1197
|
else {
|
|
1179
1198
|
this.helpTextId = `${this.identifier}-help-text`;
|
|
@@ -1195,7 +1214,7 @@ const MgInput = class {
|
|
|
1195
1214
|
}
|
|
1196
1215
|
watchTooltipPosition(newValue) {
|
|
1197
1216
|
if (!mgInput_conf.tooltipPositions.includes(newValue)) {
|
|
1198
|
-
throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${mgInput_conf.tooltipPositions.join(', ')}. Passed value: ${index_es.
|
|
1217
|
+
throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${mgInput_conf.tooltipPositions.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
1199
1218
|
}
|
|
1200
1219
|
}
|
|
1201
1220
|
watchErrorMessage(newValue) {
|
|
@@ -1238,10 +1257,12 @@ const MgInput = class {
|
|
|
1238
1257
|
ariaDescribedbyIDs.add(this.helpTextErrorId);
|
|
1239
1258
|
}
|
|
1240
1259
|
this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach(element => {
|
|
1241
|
-
if (ariaDescribedbyIDs.size)
|
|
1260
|
+
if (ariaDescribedbyIDs.size > 0) {
|
|
1242
1261
|
element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
|
|
1243
|
-
|
|
1262
|
+
}
|
|
1263
|
+
else {
|
|
1244
1264
|
element.removeAttribute('aria-describedby');
|
|
1265
|
+
}
|
|
1245
1266
|
});
|
|
1246
1267
|
}
|
|
1247
1268
|
/**
|
|
@@ -1262,8 +1283,8 @@ const MgInput = class {
|
|
|
1262
1283
|
*/
|
|
1263
1284
|
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1264
1285
|
watchLabel() {
|
|
1265
|
-
if (!index_es.
|
|
1266
|
-
throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${index_es.
|
|
1286
|
+
if (!index_es.Le(this.label)) {
|
|
1287
|
+
throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${index_es.zt(this.label)}.`);
|
|
1267
1288
|
}
|
|
1268
1289
|
else {
|
|
1269
1290
|
this.watchAriaDescribedbyIDs();
|
|
@@ -1355,7 +1376,7 @@ const MgInput = class {
|
|
|
1355
1376
|
*/
|
|
1356
1377
|
render() {
|
|
1357
1378
|
const isGroup = this.isFieldset && !this.isReadonly;
|
|
1358
|
-
return (index.h(index.Host, { key: '
|
|
1379
|
+
return (index.h(index.Host, { key: '052fc371413e939c23d1881633ed8d9f2e70ad90', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, index.h("div", { key: 'f12463ab540800f45a8d52beb2ac57a3733d3958', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, index.h("slot", { key: 'bb4d18b8faf540c26451aabcc35c8f8bc05e75b4', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), index.h("div", { key: 'e46cd50480c677ff9bde03e78335ad838775577c', class: "mg-c-input__input-container" }, index.h("div", { key: '8a9106982a4b53669b62897aacc5fae13c482e50', class: "mg-c-input__input" }, index.h("slot", { key: 'd2df2fcae71b45b96d8cdb86f5e7fec2487641c6' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (index.h("div", { key: 'd85f5b8c268f842e99137d10b5b852b49ac7d395', class: "mg-c-input__help-text" }, index.h("slot", { key: '7f50c07fd312859efd88dc5a1b9d61552547f7d0', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (index.h("div", { key: '9f2c02102f3464fe38acc70dab745901320c1eb3', class: "mg-c-input__error", "aria-live": "assertive" }, index.h("slot", { key: '2861117e844fa887ff8231a6e0903e36b5d3d005', name: this.slotError }))))));
|
|
1359
1380
|
}
|
|
1360
1381
|
get element() { return index.getElement(this); }
|
|
1361
1382
|
static get watchers() { return {
|
|
@@ -1373,7 +1394,7 @@ const MgInput = class {
|
|
|
1373
1394
|
"isFieldset": ["watchLabel"]
|
|
1374
1395
|
}; }
|
|
1375
1396
|
};
|
|
1376
|
-
MgInput.style =
|
|
1397
|
+
MgInput.style = mgInputCss;
|
|
1377
1398
|
|
|
1378
1399
|
/**
|
|
1379
1400
|
* List of all availables checkbox type
|
|
@@ -1400,7 +1421,6 @@ const MgInputCheckboxList = (props) => (index.h("ul", { class: "mg-c-input__inpu
|
|
|
1400
1421
|
})));
|
|
1401
1422
|
|
|
1402
1423
|
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)}";
|
|
1403
|
-
const MgInputCheckboxStyle0 = mgInputCheckboxCss;
|
|
1404
1424
|
|
|
1405
1425
|
/**
|
|
1406
1426
|
* type CheckboxItem validation function
|
|
@@ -1412,8 +1432,8 @@ const isCheckboxItems = (items) => Array.isArray(items) &&
|
|
|
1412
1432
|
const MgInputCheckbox = class {
|
|
1413
1433
|
constructor(hostRef) {
|
|
1414
1434
|
index.registerInstance(this, hostRef);
|
|
1415
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
1416
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
1435
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
1436
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
1417
1437
|
// hasDisplayedError (triggered by blur event)
|
|
1418
1438
|
this.hasDisplayedError = false;
|
|
1419
1439
|
this.mode = 'custom';
|
|
@@ -1432,6 +1452,10 @@ const MgInputCheckbox = class {
|
|
|
1432
1452
|
* If not set the value equals the identifier
|
|
1433
1453
|
*/
|
|
1434
1454
|
this.name = this.identifier;
|
|
1455
|
+
/**
|
|
1456
|
+
* Define if label is displayed on top
|
|
1457
|
+
*/
|
|
1458
|
+
this.labelOnTop = false;
|
|
1435
1459
|
/**
|
|
1436
1460
|
* Define if label is visible
|
|
1437
1461
|
*/
|
|
@@ -1448,6 +1472,11 @@ const MgInputCheckbox = class {
|
|
|
1448
1472
|
* Define if mg-input-checkbox is readonly
|
|
1449
1473
|
*/
|
|
1450
1474
|
this.readonly = false;
|
|
1475
|
+
/**
|
|
1476
|
+
* Display selected values list in "multi" type
|
|
1477
|
+
* This prop is only applied with prop type "multi" or when an "unset" mode render a "multi" type.
|
|
1478
|
+
*/
|
|
1479
|
+
this.displaySelectedValues = false;
|
|
1451
1480
|
/**
|
|
1452
1481
|
* Define if input is disabled
|
|
1453
1482
|
*/
|
|
@@ -1459,7 +1488,7 @@ const MgInputCheckbox = class {
|
|
|
1459
1488
|
/**
|
|
1460
1489
|
* Component classes
|
|
1461
1490
|
*/
|
|
1462
|
-
this.classCollection = new index_es.
|
|
1491
|
+
this.classCollection = new index_es.kt([this.baseClassName, mgInput_conf.classFieldset]);
|
|
1463
1492
|
/**
|
|
1464
1493
|
* Formated value to display in list
|
|
1465
1494
|
*/
|
|
@@ -1577,7 +1606,7 @@ const MgInputCheckbox = class {
|
|
|
1577
1606
|
* Method to update searchResults
|
|
1578
1607
|
*/
|
|
1579
1608
|
this.updateSearchResults = () => {
|
|
1580
|
-
this.searchResults = this.checkboxItems.filter(item => index_es.
|
|
1609
|
+
this.searchResults = this.checkboxItems.filter(item => index_es.Lt(item.title).includes(index_es.Lt(this.searchValue)));
|
|
1581
1610
|
};
|
|
1582
1611
|
/**
|
|
1583
1612
|
* Method to validate if one of inputs value is checked id required
|
|
@@ -1609,13 +1638,13 @@ const MgInputCheckbox = class {
|
|
|
1609
1638
|
* @returns message to display
|
|
1610
1639
|
*/
|
|
1611
1640
|
this.getSelectValuesButtonMessage = () => {
|
|
1612
|
-
if (this.selectValuesButtonKey === 'editButton' && index_es.
|
|
1641
|
+
if (this.selectValuesButtonKey === 'editButton' && index_es.Le(this.editButtonMessage)) {
|
|
1613
1642
|
return this.editButtonMessage;
|
|
1614
1643
|
}
|
|
1615
|
-
else if (this.selectValuesButtonKey === 'showButton' && index_es.
|
|
1644
|
+
else if (this.selectValuesButtonKey === 'showButton' && index_es.Le(this.showButtonMessage)) {
|
|
1616
1645
|
return this.showButtonMessage;
|
|
1617
1646
|
}
|
|
1618
|
-
else if (this.selectValuesButtonKey === 'selectButton' && index_es.
|
|
1647
|
+
else if (this.selectValuesButtonKey === 'selectButton' && index_es.Le(this.selectButtonMessage)) {
|
|
1619
1648
|
return this.selectButtonMessage;
|
|
1620
1649
|
}
|
|
1621
1650
|
else {
|
|
@@ -1671,12 +1700,12 @@ const MgInputCheckbox = class {
|
|
|
1671
1700
|
this.valueChange.emit(newValue);
|
|
1672
1701
|
}
|
|
1673
1702
|
else {
|
|
1674
|
-
throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${index_es.
|
|
1703
|
+
throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${index_es.zt(newValue)}.`);
|
|
1675
1704
|
}
|
|
1676
1705
|
}
|
|
1677
1706
|
validateType(newValue) {
|
|
1678
1707
|
if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
|
|
1679
|
-
throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${index_es.
|
|
1708
|
+
throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${index_es.zt(newValue)}.`);
|
|
1680
1709
|
}
|
|
1681
1710
|
else if (newValue === undefined) {
|
|
1682
1711
|
this.mode = 'auto';
|
|
@@ -1776,7 +1805,7 @@ const MgInputCheckbox = class {
|
|
|
1776
1805
|
if (typeof valid !== 'boolean') {
|
|
1777
1806
|
throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean.');
|
|
1778
1807
|
}
|
|
1779
|
-
else if (!index_es.
|
|
1808
|
+
else if (!index_es.Le(errorMessage)) {
|
|
1780
1809
|
throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string.');
|
|
1781
1810
|
}
|
|
1782
1811
|
else {
|
|
@@ -1913,7 +1942,7 @@ const MgInputCheckbox = class {
|
|
|
1913
1942
|
else {
|
|
1914
1943
|
inputContent = this.renderCheckboxMulti();
|
|
1915
1944
|
}
|
|
1916
|
-
return (index.h("mg-input", { key: '
|
|
1945
|
+
return (index.h("mg-input", { key: 'acc005b56c767a84c6b4bcc5b29769da82d12c1e', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
|
|
1917
1946
|
}
|
|
1918
1947
|
get element() { return index.getElement(this); }
|
|
1919
1948
|
static get watchers() { return {
|
|
@@ -1929,16 +1958,27 @@ const MgInputCheckbox = class {
|
|
|
1929
1958
|
"searchValue": ["validateSearchValue"]
|
|
1930
1959
|
}; }
|
|
1931
1960
|
};
|
|
1932
|
-
MgInputCheckbox.style =
|
|
1961
|
+
MgInputCheckbox.style = mgInputCheckboxCss;
|
|
1933
1962
|
|
|
1934
1963
|
const MgInputCheckboxPaginated = class {
|
|
1935
1964
|
constructor(hostRef) {
|
|
1936
1965
|
index.registerInstance(this, hostRef);
|
|
1937
|
-
this.massAction = index.createEvent(this, "mass-action"
|
|
1966
|
+
this.massAction = index.createEvent(this, "mass-action");
|
|
1938
1967
|
/*************
|
|
1939
1968
|
* Constantes *
|
|
1940
1969
|
*************/
|
|
1941
1970
|
this.offset = 10;
|
|
1971
|
+
/*************
|
|
1972
|
+
* Decorators *
|
|
1973
|
+
*************/
|
|
1974
|
+
/**
|
|
1975
|
+
* Define if mg-input-checkbox-list is readonly
|
|
1976
|
+
*/
|
|
1977
|
+
this.readonly = false;
|
|
1978
|
+
/**
|
|
1979
|
+
* Define if mg-input-checkbox-list is disabled
|
|
1980
|
+
*/
|
|
1981
|
+
this.disabled = false;
|
|
1942
1982
|
/**
|
|
1943
1983
|
* Current page
|
|
1944
1984
|
*/
|
|
@@ -2025,24 +2065,25 @@ const MgInputCheckboxPaginated = class {
|
|
|
2025
2065
|
* @returns HTML Element
|
|
2026
2066
|
*/
|
|
2027
2067
|
render() {
|
|
2028
|
-
const getText = (checkboxes) => (index.h("em", { key: '
|
|
2068
|
+
const getText = (checkboxes) => (index.h("em", { key: '0bf489a95090b519c85a4649d6c3b9a0e97bf0d8', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlural' : 'title']} (${checkboxes.length})`));
|
|
2029
2069
|
const [from, to] = this.getFromToIndexes();
|
|
2030
2070
|
const itemsContainerId = `items-${this.sectionKind}-container`;
|
|
2031
|
-
return (index.h(index.Host, { key: '
|
|
2071
|
+
return (index.h(index.Host, { key: 'ee67aa1705efa2b88010748b6978e0c1dec6e4de', hidden: this.checkboxes.length < 1 }, index.h("div", { key: 'b713e2a0e21f57d3b238b72163f3d7a4781b7026', class: "mg-c-input__section-header" }, this.sectionKind === SectionKind.SELECTED ? (index.h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, index.h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), index.h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (index.h("p", { class: "mg-c-input__section-header-title mg-c-input__section-header-title--static" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (index.h("mg-tooltip", { key: 'ef75381dab8028c3da4cbcefba644770322c2e7e', class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip }, index.h("mg-button", { key: '6e33b32300e7932f09ce1152462a3cf19e452df8', variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (index.h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), index.h("div", { key: '727ef2955d5866131e421c0809244ccc42c75dd0', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, index.h(MgInputCheckboxList, { key: 'd26de7f05b85142df7218ad9941e4b201cfb2e01', checkboxes: this.getArrayRange(this.checkboxes, from, to), displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
|
|
2032
2072
|
}
|
|
2033
2073
|
static get watchers() { return {
|
|
2034
2074
|
"checkboxes": ["watchCheckboxes"]
|
|
2035
2075
|
}; }
|
|
2036
2076
|
};
|
|
2037
2077
|
|
|
2078
|
+
const DEFAULT_MAX_DATE = '9999-12-31';
|
|
2079
|
+
|
|
2038
2080
|
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}}";
|
|
2039
|
-
const MgInputDateStyle0 = mgInputDateCss;
|
|
2040
2081
|
|
|
2041
2082
|
const MgInputDate = class {
|
|
2042
2083
|
constructor(hostRef) {
|
|
2043
2084
|
index.registerInstance(this, hostRef);
|
|
2044
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
2045
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
2085
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
2086
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
2046
2087
|
// hasDisplayedError (triggered by blur event)
|
|
2047
2088
|
this.hasDisplayedError = false;
|
|
2048
2089
|
/**
|
|
@@ -2050,6 +2091,10 @@ const MgInputDate = class {
|
|
|
2050
2091
|
* If not set the value equals the identifier
|
|
2051
2092
|
*/
|
|
2052
2093
|
this.name = this.identifier;
|
|
2094
|
+
/**
|
|
2095
|
+
* Define if label is displayed on top
|
|
2096
|
+
*/
|
|
2097
|
+
this.labelOnTop = false;
|
|
2053
2098
|
/**
|
|
2054
2099
|
* Define if label is visible
|
|
2055
2100
|
*/
|
|
@@ -2066,7 +2111,7 @@ const MgInputDate = class {
|
|
|
2066
2111
|
* Define input maximum date
|
|
2067
2112
|
* format: yyyy-mm-dd
|
|
2068
2113
|
*/
|
|
2069
|
-
this.max = '9999-12-31';
|
|
2114
|
+
this.max = '9999-12-31'; // Hardcoded value matching DEFAULT_MAX_DATE for documentation
|
|
2070
2115
|
/**
|
|
2071
2116
|
* Define if input is disabled
|
|
2072
2117
|
*/
|
|
@@ -2078,24 +2123,49 @@ const MgInputDate = class {
|
|
|
2078
2123
|
/**
|
|
2079
2124
|
* Component classes
|
|
2080
2125
|
*/
|
|
2081
|
-
this.classCollection = new index_es.
|
|
2126
|
+
this.classCollection = new index_es.kt(['mg-c-input--date']);
|
|
2082
2127
|
/**
|
|
2083
2128
|
* Method to validate date pattern string
|
|
2084
2129
|
* @param value - value to test
|
|
2085
2130
|
* @returns truthy when value match the pattern
|
|
2086
2131
|
*/
|
|
2087
|
-
this.isValidPattern = (value) => index_es.
|
|
2132
|
+
this.isValidPattern = (value) => index_es.Le(value) && index_es.wt.test(value);
|
|
2088
2133
|
/**
|
|
2089
2134
|
* Format help text to display
|
|
2090
2135
|
* @param helpText - help text format
|
|
2091
2136
|
* @returns formated pattern help text. Ex: Format attendu : jj/mm/aaaa (ex : 20/12/2020)
|
|
2092
2137
|
*/
|
|
2093
2138
|
this.formatHelpText = (helpText) => {
|
|
2139
|
+
var _a, _b;
|
|
2140
|
+
// If the component is in readonly mode, return directly because the message will not be rendered
|
|
2141
|
+
if (this.readonly) {
|
|
2142
|
+
return undefined;
|
|
2143
|
+
}
|
|
2094
2144
|
const defaultHelpTextVariable = '{defaultHelpText}';
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2145
|
+
// If a custom helpText is provided, store it but don't return it directly
|
|
2146
|
+
let text = index_es.Le(helpText) ? helpText : this.messages.input.date.helpText.expectedFormat;
|
|
2147
|
+
// Handle defaultHelpText
|
|
2148
|
+
if (text.includes(defaultHelpTextVariable)) {
|
|
2149
|
+
text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText.expectedFormat));
|
|
2150
|
+
}
|
|
2151
|
+
// Replace pattern and date variables
|
|
2152
|
+
text = text.replace('{pattern}', this.renderPattern()).replace('{date}', index_es.Et(index_es.Ht(new Date('2025-12-24')), this.systemLocale));
|
|
2153
|
+
// Add additional message for min/max if necessary
|
|
2154
|
+
let rangeMessage;
|
|
2155
|
+
if (((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
|
|
2156
|
+
rangeMessage = this.messages.input.date.helpText.minMax.replace('{min}', index_es.Et(this.min, this.systemLocale)).replace('{max}', index_es.Et(this.max, this.systemLocale));
|
|
2157
|
+
}
|
|
2158
|
+
else if (((_b = this.min) === null || _b === void 0 ? void 0 : _b.length) > 0) {
|
|
2159
|
+
rangeMessage = this.messages.input.date.helpText.min.replace('{min}', index_es.Et(this.min, this.systemLocale));
|
|
2160
|
+
}
|
|
2161
|
+
else if (this.max !== DEFAULT_MAX_DATE) {
|
|
2162
|
+
rangeMessage = this.messages.input.date.helpText.max.replace('{max}', index_es.Et(this.max, this.systemLocale));
|
|
2163
|
+
}
|
|
2164
|
+
// Combine custom helpText with range message if both exist
|
|
2165
|
+
if (text !== undefined && rangeMessage !== undefined) {
|
|
2166
|
+
return `${text}<br>${rangeMessage}`;
|
|
2167
|
+
}
|
|
2168
|
+
return text;
|
|
2099
2169
|
};
|
|
2100
2170
|
/**
|
|
2101
2171
|
* Handle input event
|
|
@@ -2145,28 +2215,27 @@ const MgInputDate = class {
|
|
|
2145
2215
|
*/
|
|
2146
2216
|
this.getInputError = () => {
|
|
2147
2217
|
var _a;
|
|
2148
|
-
let inputError = null;
|
|
2149
2218
|
// bad input or pattern
|
|
2150
2219
|
if (this.input.validity.badInput || (this.value && !this.isValidPattern(this.value))) {
|
|
2151
|
-
|
|
2220
|
+
return 'badInput';
|
|
2152
2221
|
}
|
|
2153
2222
|
// required
|
|
2154
|
-
|
|
2155
|
-
|
|
2223
|
+
if (this.input.validity.valueMissing) {
|
|
2224
|
+
return 'required';
|
|
2156
2225
|
}
|
|
2157
2226
|
// min & max
|
|
2158
|
-
|
|
2159
|
-
|
|
2227
|
+
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) {
|
|
2228
|
+
return 'minMax';
|
|
2160
2229
|
}
|
|
2161
2230
|
// min
|
|
2162
|
-
|
|
2163
|
-
|
|
2231
|
+
if (this.input.validity.rangeUnderflow) {
|
|
2232
|
+
return 'min';
|
|
2164
2233
|
}
|
|
2165
2234
|
// max
|
|
2166
|
-
|
|
2167
|
-
|
|
2235
|
+
if (this.input.validity.rangeOverflow) {
|
|
2236
|
+
return 'max';
|
|
2168
2237
|
}
|
|
2169
|
-
return
|
|
2238
|
+
return null;
|
|
2170
2239
|
};
|
|
2171
2240
|
/**
|
|
2172
2241
|
* Check input errors
|
|
@@ -2186,14 +2255,16 @@ const MgInputDate = class {
|
|
|
2186
2255
|
}
|
|
2187
2256
|
// min, max & minMax
|
|
2188
2257
|
else if (['min', 'max', 'minMax'].includes(inputError)) {
|
|
2189
|
-
this.errorMessage = this.messages.
|
|
2190
|
-
.replace('{min}', index_es.
|
|
2191
|
-
.replace('{max}', index_es.
|
|
2258
|
+
this.errorMessage = this.messages.input.date.helpText[inputError]
|
|
2259
|
+
.replace('{min}', index_es.Et(this.min, this.systemLocale))
|
|
2260
|
+
.replace('{max}', index_es.Et(this.max, this.systemLocale));
|
|
2192
2261
|
}
|
|
2193
2262
|
// wrong date format
|
|
2194
2263
|
// element.validity.badInput is default error message
|
|
2195
2264
|
else {
|
|
2196
|
-
this.errorMessage = this.messages.
|
|
2265
|
+
this.errorMessage = this.messages.input.date.error.badInput
|
|
2266
|
+
.replace('{pattern}', this.renderPattern())
|
|
2267
|
+
.replace('{date}', index_es.Et(index_es.Ht(new Date('2025-12-24')), this.systemLocale));
|
|
2197
2268
|
}
|
|
2198
2269
|
}
|
|
2199
2270
|
};
|
|
@@ -2202,7 +2273,7 @@ const MgInputDate = class {
|
|
|
2202
2273
|
* @returns translated html pattern
|
|
2203
2274
|
*/
|
|
2204
2275
|
this.renderPattern = () => {
|
|
2205
|
-
let patternLocal = index_es.
|
|
2276
|
+
let patternLocal = index_es.Bt(this.systemLocale);
|
|
2206
2277
|
for (const key in this.messages.input.date.pattern) {
|
|
2207
2278
|
patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
|
|
2208
2279
|
}
|
|
@@ -2217,9 +2288,9 @@ const MgInputDate = class {
|
|
|
2217
2288
|
// - `undefined` is not allowed in CustomEvent['detail']
|
|
2218
2289
|
this.value = null;
|
|
2219
2290
|
}
|
|
2220
|
-
else if (newValue && !index_es.
|
|
2291
|
+
else if (newValue && !index_es.Le(newValue)) {
|
|
2221
2292
|
// check value validity
|
|
2222
|
-
throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${index_es.
|
|
2293
|
+
throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${index_es.zt(newValue)}.`);
|
|
2223
2294
|
}
|
|
2224
2295
|
else if (newValue === null || this.isValidPattern(newValue)) {
|
|
2225
2296
|
this.valueChange.emit(newValue);
|
|
@@ -2236,7 +2307,7 @@ const MgInputDate = class {
|
|
|
2236
2307
|
}
|
|
2237
2308
|
validateMinMax(newValue) {
|
|
2238
2309
|
if (newValue && !this.isValidPattern(newValue)) {
|
|
2239
|
-
throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${index_es.
|
|
2310
|
+
throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${index_es.zt(newValue)}.`);
|
|
2240
2311
|
}
|
|
2241
2312
|
}
|
|
2242
2313
|
handleValidityChange(newValue, _oldValue, prop) {
|
|
@@ -2286,7 +2357,7 @@ const MgInputDate = class {
|
|
|
2286
2357
|
if (typeof valid !== 'boolean') {
|
|
2287
2358
|
throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean.');
|
|
2288
2359
|
}
|
|
2289
|
-
else if (!index_es.
|
|
2360
|
+
else if (!index_es.Le(errorMessage)) {
|
|
2290
2361
|
throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string.');
|
|
2291
2362
|
}
|
|
2292
2363
|
else {
|
|
@@ -2352,7 +2423,7 @@ const MgInputDate = class {
|
|
|
2352
2423
|
* @returns HTML Element
|
|
2353
2424
|
*/
|
|
2354
2425
|
render() {
|
|
2355
|
-
return (index.h("mg-input", { key: '
|
|
2426
|
+
return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, index_es.Et(this.value, this.locale))) : (index.h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
|
|
2356
2427
|
if (el !== null)
|
|
2357
2428
|
this.input = el;
|
|
2358
2429
|
} }))));
|
|
@@ -2367,7 +2438,7 @@ const MgInputDate = class {
|
|
|
2367
2438
|
"disabled": ["handleValidityChange", "watchDisabled"]
|
|
2368
2439
|
}; }
|
|
2369
2440
|
};
|
|
2370
|
-
MgInputDate.style =
|
|
2441
|
+
MgInputDate.style = mgInputDateCss;
|
|
2371
2442
|
|
|
2372
2443
|
/**
|
|
2373
2444
|
* List of all possibles types
|
|
@@ -2376,13 +2447,12 @@ const types = ['decimal', 'integer'];
|
|
|
2376
2447
|
const formats = ['none', 'number', 'currency', 'percent', 'unit'];
|
|
2377
2448
|
|
|
2378
2449
|
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)}";
|
|
2379
|
-
const MgInputNumericStyle0 = mgInputNumericCss;
|
|
2380
2450
|
|
|
2381
2451
|
const MgInputNumeric = class {
|
|
2382
2452
|
constructor(hostRef) {
|
|
2383
2453
|
index.registerInstance(this, hostRef);
|
|
2384
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
2385
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
2454
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
2455
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
2386
2456
|
// hasDisplayedError (triggered by blur event)
|
|
2387
2457
|
this.hasDisplayedError = false;
|
|
2388
2458
|
/**
|
|
@@ -2390,6 +2460,10 @@ const MgInputNumeric = class {
|
|
|
2390
2460
|
* If not set the value equals the identifier
|
|
2391
2461
|
*/
|
|
2392
2462
|
this.name = this.identifier;
|
|
2463
|
+
/**
|
|
2464
|
+
* Define if label is displayed on top
|
|
2465
|
+
*/
|
|
2466
|
+
this.labelOnTop = false;
|
|
2393
2467
|
/**
|
|
2394
2468
|
* Define if label is visible
|
|
2395
2469
|
*/
|
|
@@ -2440,7 +2514,7 @@ const MgInputNumeric = class {
|
|
|
2440
2514
|
/**
|
|
2441
2515
|
* Component classes
|
|
2442
2516
|
*/
|
|
2443
|
-
this.classCollection = new index_es.
|
|
2517
|
+
this.classCollection = new index_es.kt(['mg-c-input--numeric']);
|
|
2444
2518
|
/**
|
|
2445
2519
|
* Handle input event
|
|
2446
2520
|
*/
|
|
@@ -2483,7 +2557,7 @@ const MgInputNumeric = class {
|
|
|
2483
2557
|
* @param value - value to format
|
|
2484
2558
|
* @returns formatted value according to locale
|
|
2485
2559
|
*/
|
|
2486
|
-
this.formatErrorValue = (value) => index_es.
|
|
2560
|
+
this.formatErrorValue = (value) => index_es.Gt(value, this.locale, !Number.isInteger(value) && this.type === 'decimal' ? this.decimalLength : 0);
|
|
2487
2561
|
/**
|
|
2488
2562
|
* Set input error message
|
|
2489
2563
|
* @param errorMessage - errorMessage override
|
|
@@ -2502,7 +2576,7 @@ const MgInputNumeric = class {
|
|
|
2502
2576
|
else {
|
|
2503
2577
|
const formattedMin = this.formatErrorValue(this.min);
|
|
2504
2578
|
const formattedMax = this.formatErrorValue(this.max);
|
|
2505
|
-
this.errorMessage = this.messages.
|
|
2579
|
+
this.errorMessage = this.messages.input.numeric.helpText[inputError].replace('{min}', formattedMin).replace('{max}', formattedMax);
|
|
2506
2580
|
}
|
|
2507
2581
|
}
|
|
2508
2582
|
};
|
|
@@ -2511,26 +2585,24 @@ const MgInputNumeric = class {
|
|
|
2511
2585
|
* @returns error code
|
|
2512
2586
|
*/
|
|
2513
2587
|
this.getInputError = () => {
|
|
2514
|
-
let inputError = null;
|
|
2515
2588
|
const hasNotEmptyValues = (toControl) => !toControl.some(value => [null, undefined].includes(value));
|
|
2516
2589
|
// required
|
|
2517
2590
|
if (!this.input.checkValidity() && this.input.validity.valueMissing) {
|
|
2518
|
-
|
|
2591
|
+
return 'required';
|
|
2519
2592
|
}
|
|
2520
|
-
//
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
inputError = 'min';
|
|
2593
|
+
// Only a min value is set
|
|
2594
|
+
if (hasNotEmptyValues([this.min, this.numericValue]) && this.numericValue < this.min && this.max === undefined) {
|
|
2595
|
+
return 'min';
|
|
2524
2596
|
}
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2597
|
+
// Only a max value is set
|
|
2598
|
+
if (hasNotEmptyValues([this.max, this.numericValue]) && this.numericValue > this.max && this.min === undefined) {
|
|
2599
|
+
return 'max';
|
|
2528
2600
|
}
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2601
|
+
// both min and max values are set
|
|
2602
|
+
if (hasNotEmptyValues([this.min, this.max, this.numericValue]) && (this.numericValue < this.min || this.numericValue > this.max)) {
|
|
2603
|
+
return 'minMax';
|
|
2532
2604
|
}
|
|
2533
|
-
return
|
|
2605
|
+
return null;
|
|
2534
2606
|
};
|
|
2535
2607
|
/**
|
|
2536
2608
|
* Format value based on type
|
|
@@ -2540,13 +2612,13 @@ const MgInputNumeric = class {
|
|
|
2540
2612
|
this.formatValue = (value) => {
|
|
2541
2613
|
switch (this.format) {
|
|
2542
2614
|
case 'number':
|
|
2543
|
-
return index_es.
|
|
2615
|
+
return index_es.Gt(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2544
2616
|
case 'currency':
|
|
2545
|
-
return index_es.
|
|
2617
|
+
return index_es.Pt(value, this.locale, this.currency);
|
|
2546
2618
|
case 'percent':
|
|
2547
|
-
return index_es.
|
|
2619
|
+
return index_es.Wt(value / 100, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2548
2620
|
case 'unit':
|
|
2549
|
-
return index_es.
|
|
2621
|
+
return index_es.Xt(value, this.locale, this.unit, this.unitDisplay, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2550
2622
|
case 'none':
|
|
2551
2623
|
return value.toString();
|
|
2552
2624
|
}
|
|
@@ -2566,6 +2638,41 @@ const MgInputNumeric = class {
|
|
|
2566
2638
|
}
|
|
2567
2639
|
}
|
|
2568
2640
|
};
|
|
2641
|
+
/**
|
|
2642
|
+
* Format help text to display
|
|
2643
|
+
* @param helpText - help text format
|
|
2644
|
+
* @returns formatted help text with range information if applicable
|
|
2645
|
+
*/
|
|
2646
|
+
this.formatHelpText = (helpText) => {
|
|
2647
|
+
// If the component is in readonly mode, return undefined because the message will not be rendered
|
|
2648
|
+
if (this.readonly) {
|
|
2649
|
+
return undefined;
|
|
2650
|
+
}
|
|
2651
|
+
// If a custom helpText is provided, store it but don't return it directly
|
|
2652
|
+
const text = index_es.Le(helpText) ? helpText : undefined;
|
|
2653
|
+
// If neither min nor max are defined, and there's no custom helpText,
|
|
2654
|
+
// we can return undefined as there's no message to display
|
|
2655
|
+
if (this.min === undefined && this.max === undefined && text === undefined) {
|
|
2656
|
+
return undefined;
|
|
2657
|
+
}
|
|
2658
|
+
// Generate range message based on available constraints
|
|
2659
|
+
let rangeMessage;
|
|
2660
|
+
if (this.min !== undefined && this.max !== undefined) {
|
|
2661
|
+
rangeMessage = this.messages.input.numeric.helpText.minMax.replace('{min}', this.formatErrorValue(this.min)).replace('{max}', this.formatErrorValue(this.max));
|
|
2662
|
+
}
|
|
2663
|
+
else if (this.min !== undefined) {
|
|
2664
|
+
rangeMessage = this.messages.input.numeric.helpText.min.replace('{min}', this.formatErrorValue(this.min));
|
|
2665
|
+
}
|
|
2666
|
+
else if (this.max !== undefined) {
|
|
2667
|
+
rangeMessage = this.messages.input.numeric.helpText.max.replace('{max}', this.formatErrorValue(this.max));
|
|
2668
|
+
}
|
|
2669
|
+
// Combine custom helpText with range message if both exist
|
|
2670
|
+
if (text !== undefined && rangeMessage !== undefined) {
|
|
2671
|
+
return `${text}<br>${rangeMessage}`;
|
|
2672
|
+
}
|
|
2673
|
+
// Return either custom helpText or range message
|
|
2674
|
+
return text || rangeMessage;
|
|
2675
|
+
};
|
|
2569
2676
|
/**
|
|
2570
2677
|
* Renders the readonly content of the input component.
|
|
2571
2678
|
* @returns The readonly content element.
|
|
@@ -2575,18 +2682,19 @@ const MgInputNumeric = class {
|
|
|
2575
2682
|
};
|
|
2576
2683
|
}
|
|
2577
2684
|
validateValue(newValue) {
|
|
2685
|
+
var _a;
|
|
2578
2686
|
// has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type
|
|
2579
2687
|
if (typeof newValue === 'string') {
|
|
2580
2688
|
// Split number and decimal
|
|
2581
2689
|
const [integer, decimal = ''] = newValue.replace('-', '').split(/[.,]/);
|
|
2582
2690
|
// Regex
|
|
2583
|
-
const regex = this.type === 'integer' ?
|
|
2691
|
+
const regex = this.type === 'integer' ? /^(?!-?0\d)-?\d+$/ : /^(?!-?0\d)-?\d+(?:[.,]\d*)?$/;
|
|
2584
2692
|
// Filter input
|
|
2585
2693
|
if (this.isValidValue(newValue, regex, integer, decimal)) {
|
|
2586
2694
|
this.storedValue = newValue;
|
|
2587
2695
|
}
|
|
2588
2696
|
else {
|
|
2589
|
-
newValue = this.
|
|
2697
|
+
newValue = (_a = this.storedValue) !== null && _a !== void 0 ? _a : null;
|
|
2590
2698
|
}
|
|
2591
2699
|
// Set value and input value
|
|
2592
2700
|
this.updateValues(newValue);
|
|
@@ -2625,22 +2733,22 @@ const MgInputNumeric = class {
|
|
|
2625
2733
|
}
|
|
2626
2734
|
validateType(newValue) {
|
|
2627
2735
|
if (!types.includes(newValue)) {
|
|
2628
|
-
throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${index_es.
|
|
2736
|
+
throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
2629
2737
|
}
|
|
2630
2738
|
}
|
|
2631
2739
|
watchFormat(newValue) {
|
|
2632
2740
|
if (!formats.includes(newValue)) {
|
|
2633
|
-
throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${index_es.
|
|
2741
|
+
throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
2634
2742
|
}
|
|
2635
2743
|
}
|
|
2636
2744
|
validateIntegerLength(newValue) {
|
|
2637
2745
|
if (newValue < 1) {
|
|
2638
|
-
throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${index_es.
|
|
2746
|
+
throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${index_es.zt(newValue)}.`);
|
|
2639
2747
|
}
|
|
2640
2748
|
}
|
|
2641
2749
|
validateDecimalLength(newValue) {
|
|
2642
2750
|
if (newValue < 1) {
|
|
2643
|
-
throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${index_es.
|
|
2751
|
+
throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${index_es.zt(newValue)}.`);
|
|
2644
2752
|
}
|
|
2645
2753
|
}
|
|
2646
2754
|
/**
|
|
@@ -2674,7 +2782,7 @@ const MgInputNumeric = class {
|
|
|
2674
2782
|
if (typeof valid !== 'boolean') {
|
|
2675
2783
|
throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean.');
|
|
2676
2784
|
}
|
|
2677
|
-
else if (!index_es.
|
|
2785
|
+
else if (!index_es.Le(errorMessage)) {
|
|
2678
2786
|
throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string.');
|
|
2679
2787
|
}
|
|
2680
2788
|
else {
|
|
@@ -2717,24 +2825,19 @@ const MgInputNumeric = class {
|
|
|
2717
2825
|
isValidValue(value, regex, integer, decimal) {
|
|
2718
2826
|
return (['', '-'].includes(value) || (regex.exec(value) !== null && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength)));
|
|
2719
2827
|
}
|
|
2720
|
-
/**
|
|
2721
|
-
* Handles invalid input values and returns a corrected value.
|
|
2722
|
-
* @returns The corrected value.
|
|
2723
|
-
*/
|
|
2724
|
-
handleInvalidValue() {
|
|
2725
|
-
var _a;
|
|
2726
|
-
return (_a = this.storedValue) !== null && _a !== void 0 ? _a : null;
|
|
2727
|
-
}
|
|
2728
2828
|
/**
|
|
2729
2829
|
* Updates the component values based on the validated input value.
|
|
2730
2830
|
* @param newValue - The validated input value.
|
|
2731
2831
|
*/
|
|
2732
2832
|
updateValues(newValue) {
|
|
2733
2833
|
this.value = newValue;
|
|
2734
|
-
if (this.input !== undefined)
|
|
2834
|
+
if (this.input !== undefined) {
|
|
2735
2835
|
this.input.value = this.value;
|
|
2736
|
-
|
|
2737
|
-
this.
|
|
2836
|
+
}
|
|
2837
|
+
this.numericValue = !['', null].includes(this.value) && !isNaN(parseFloat(this.value)) ? parseFloat(this.value.replace(',', '.')) : null;
|
|
2838
|
+
if (newValue === null || (newValue === this.storedValue && !Object.is(this.numericValue, -0))) {
|
|
2839
|
+
this.valueChange.emit(this.numericValue);
|
|
2840
|
+
}
|
|
2738
2841
|
this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
|
|
2739
2842
|
}
|
|
2740
2843
|
/**
|
|
@@ -2780,7 +2883,7 @@ const MgInputNumeric = class {
|
|
|
2780
2883
|
* @returns HTML Element
|
|
2781
2884
|
*/
|
|
2782
2885
|
render() {
|
|
2783
|
-
return (index.h("mg-input", { key: '
|
|
2886
|
+
return (index.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
|
|
2784
2887
|
? this.readonlyValue && this.renderReadonly()
|
|
2785
2888
|
: [
|
|
2786
2889
|
index.h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
@@ -2805,16 +2908,15 @@ const MgInputNumeric = class {
|
|
|
2805
2908
|
"decimalLength": ["validateDecimalLength"]
|
|
2806
2909
|
}; }
|
|
2807
2910
|
};
|
|
2808
|
-
MgInputNumeric.style =
|
|
2911
|
+
MgInputNumeric.style = mgInputNumericCss;
|
|
2809
2912
|
|
|
2810
2913
|
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}";
|
|
2811
|
-
const MgInputPasswordStyle0 = mgInputPasswordCss;
|
|
2812
2914
|
|
|
2813
2915
|
const MgInputPassword = class {
|
|
2814
2916
|
constructor(hostRef) {
|
|
2815
2917
|
index.registerInstance(this, hostRef);
|
|
2816
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
2817
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
2918
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
2919
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
2818
2920
|
// hasDisplayedError (triggered by blur event)
|
|
2819
2921
|
this.hasDisplayedError = false;
|
|
2820
2922
|
/**
|
|
@@ -2822,6 +2924,10 @@ const MgInputPassword = class {
|
|
|
2822
2924
|
* If not set the value equals the identifier
|
|
2823
2925
|
*/
|
|
2824
2926
|
this.name = this.identifier;
|
|
2927
|
+
/**
|
|
2928
|
+
* Define if label is displayed on top
|
|
2929
|
+
*/
|
|
2930
|
+
this.labelOnTop = false;
|
|
2825
2931
|
/**
|
|
2826
2932
|
* Define if label is visible
|
|
2827
2933
|
*/
|
|
@@ -2849,7 +2955,7 @@ const MgInputPassword = class {
|
|
|
2849
2955
|
/**
|
|
2850
2956
|
* Component classes
|
|
2851
2957
|
*/
|
|
2852
|
-
this.classCollection = new index_es.
|
|
2958
|
+
this.classCollection = new index_es.kt(['mg-c-input--password']);
|
|
2853
2959
|
/**
|
|
2854
2960
|
* Indicates if password is displayed or not
|
|
2855
2961
|
*/
|
|
@@ -2969,7 +3075,7 @@ const MgInputPassword = class {
|
|
|
2969
3075
|
if (typeof valid !== 'boolean') {
|
|
2970
3076
|
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean.');
|
|
2971
3077
|
}
|
|
2972
|
-
else if (!index_es.
|
|
3078
|
+
else if (!index_es.Le(errorMessage)) {
|
|
2973
3079
|
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string.');
|
|
2974
3080
|
}
|
|
2975
3081
|
else {
|
|
@@ -3026,7 +3132,7 @@ const MgInputPassword = class {
|
|
|
3026
3132
|
* @returns HTML Element
|
|
3027
3133
|
*/
|
|
3028
3134
|
render() {
|
|
3029
|
-
return (index.h("mg-input", { key: '
|
|
3135
|
+
return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (index.h("span", { class: "mg-c-input__input-group" }, index.h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
3030
3136
|
if (el !== null)
|
|
3031
3137
|
this.input = el;
|
|
3032
3138
|
} }), index.h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, index.h("mg-icon", { class: "mg-c-input__input-icon", icon: this.displayPassword ? 'eye-slash' : 'eye' }))))));
|
|
@@ -3040,10 +3146,9 @@ const MgInputPassword = class {
|
|
|
3040
3146
|
"mgWidth": ["watchMgWidth"]
|
|
3041
3147
|
}; }
|
|
3042
3148
|
};
|
|
3043
|
-
MgInputPassword.style =
|
|
3149
|
+
MgInputPassword.style = mgInputPasswordCss;
|
|
3044
3150
|
|
|
3045
3151
|
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}}";
|
|
3046
|
-
const MgInputRadioStyle0 = mgInputRadioCss;
|
|
3047
3152
|
|
|
3048
3153
|
/**
|
|
3049
3154
|
* type Option validation function
|
|
@@ -3054,8 +3159,8 @@ const isOption$3 = (option) => typeof option === 'object' && typeof option.title
|
|
|
3054
3159
|
const MgInputRadio = class {
|
|
3055
3160
|
constructor(hostRef) {
|
|
3056
3161
|
index.registerInstance(this, hostRef);
|
|
3057
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
3058
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
3162
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
3163
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
3059
3164
|
/************
|
|
3060
3165
|
* Internal *
|
|
3061
3166
|
************/
|
|
@@ -3101,7 +3206,7 @@ const MgInputRadio = class {
|
|
|
3101
3206
|
/**
|
|
3102
3207
|
* Component classes
|
|
3103
3208
|
*/
|
|
3104
|
-
this.classCollection = new index_es.
|
|
3209
|
+
this.classCollection = new index_es.kt(['mg-c-input--radio', mgInput_conf.classFieldset]);
|
|
3105
3210
|
/**
|
|
3106
3211
|
* Handle input event
|
|
3107
3212
|
* @param event - input event
|
|
@@ -3152,7 +3257,7 @@ const MgInputRadio = class {
|
|
|
3152
3257
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3153
3258
|
watchValue(newValue) {
|
|
3154
3259
|
var _a;
|
|
3155
|
-
if (index_es.
|
|
3260
|
+
if (index_es.At(this.items) && typeof newValue === 'string') {
|
|
3156
3261
|
this.readonlyValue = newValue;
|
|
3157
3262
|
}
|
|
3158
3263
|
else if (Array.isArray(this.items) && this.items.every(isOption$3)) {
|
|
@@ -3166,10 +3271,10 @@ const MgInputRadio = class {
|
|
|
3166
3271
|
validateItems(newValue) {
|
|
3167
3272
|
// Validate if items have required min length
|
|
3168
3273
|
if (typeof newValue === 'object' && newValue.length < 2) {
|
|
3169
|
-
throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${index_es.
|
|
3274
|
+
throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${index_es.zt(newValue)}.`);
|
|
3170
3275
|
}
|
|
3171
3276
|
// String array
|
|
3172
|
-
else if (index_es.
|
|
3277
|
+
else if (index_es.At(newValue)) {
|
|
3173
3278
|
this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
|
|
3174
3279
|
}
|
|
3175
3280
|
// Object array
|
|
@@ -3177,7 +3282,7 @@ const MgInputRadio = class {
|
|
|
3177
3282
|
this.options = newValue;
|
|
3178
3283
|
}
|
|
3179
3284
|
else {
|
|
3180
|
-
throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${index_es.
|
|
3285
|
+
throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${index_es.zt(newValue)}.`);
|
|
3181
3286
|
}
|
|
3182
3287
|
}
|
|
3183
3288
|
watchInputVerticalList(newValue) {
|
|
@@ -3239,7 +3344,7 @@ const MgInputRadio = class {
|
|
|
3239
3344
|
if (typeof valid !== 'boolean') {
|
|
3240
3345
|
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean.');
|
|
3241
3346
|
}
|
|
3242
|
-
else if (!index_es.
|
|
3347
|
+
else if (!index_es.Le(errorMessage)) {
|
|
3243
3348
|
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string.');
|
|
3244
3349
|
}
|
|
3245
3350
|
else {
|
|
@@ -3314,10 +3419,9 @@ const MgInputRadio = class {
|
|
|
3314
3419
|
"disabled": ["handleValidityChange", "watchDisabled"]
|
|
3315
3420
|
}; }
|
|
3316
3421
|
};
|
|
3317
|
-
MgInputRadio.style =
|
|
3422
|
+
MgInputRadio.style = mgInputRadioCss;
|
|
3318
3423
|
|
|
3319
3424
|
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%}}";
|
|
3320
|
-
const MgInputSelectStyle0 = mgInputSelectCss;
|
|
3321
3425
|
|
|
3322
3426
|
/**
|
|
3323
3427
|
* Check if item is a well configured option
|
|
@@ -3364,8 +3468,8 @@ const groupOptions = (acc, { group, title, value, disabled }) => {
|
|
|
3364
3468
|
const MgInputSelect = class {
|
|
3365
3469
|
constructor(hostRef) {
|
|
3366
3470
|
index.registerInstance(this, hostRef);
|
|
3367
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
3368
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
3471
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
3472
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
3369
3473
|
// hasDisplayedError (triggered by blur event)
|
|
3370
3474
|
this.hasDisplayedError = false;
|
|
3371
3475
|
/**
|
|
@@ -3373,6 +3477,10 @@ const MgInputSelect = class {
|
|
|
3373
3477
|
* If not set the value equals the identifier
|
|
3374
3478
|
*/
|
|
3375
3479
|
this.name = this.identifier;
|
|
3480
|
+
/**
|
|
3481
|
+
* Define if label is displayed on top
|
|
3482
|
+
*/
|
|
3483
|
+
this.labelOnTop = false;
|
|
3376
3484
|
/**
|
|
3377
3485
|
* Define if label is visible
|
|
3378
3486
|
*/
|
|
@@ -3404,7 +3512,7 @@ const MgInputSelect = class {
|
|
|
3404
3512
|
/**
|
|
3405
3513
|
* Component classes
|
|
3406
3514
|
*/
|
|
3407
|
-
this.classCollection = new index_es.
|
|
3515
|
+
this.classCollection = new index_es.kt(['mg-c-input--select']);
|
|
3408
3516
|
/**
|
|
3409
3517
|
* Handle input event
|
|
3410
3518
|
*/
|
|
@@ -3434,7 +3542,7 @@ const MgInputSelect = class {
|
|
|
3434
3542
|
if (this.input.value === '') {
|
|
3435
3543
|
this.setValue(null);
|
|
3436
3544
|
}
|
|
3437
|
-
else if (index_es.
|
|
3545
|
+
else if (index_es.At(this.items) && this.items.includes(this.input.value)) {
|
|
3438
3546
|
this.setValue(this.input.value);
|
|
3439
3547
|
}
|
|
3440
3548
|
else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
|
|
@@ -3492,7 +3600,7 @@ const MgInputSelect = class {
|
|
|
3492
3600
|
}
|
|
3493
3601
|
validateValue(newValue) {
|
|
3494
3602
|
var _a, _b;
|
|
3495
|
-
if (index_es.
|
|
3603
|
+
if (index_es.At(this.items) && typeof newValue === 'string') {
|
|
3496
3604
|
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== undefined ? this.input.value : newValue;
|
|
3497
3605
|
}
|
|
3498
3606
|
else if (allItemsAreOptions(this.items)) {
|
|
@@ -3509,7 +3617,7 @@ const MgInputSelect = class {
|
|
|
3509
3617
|
this.options = [];
|
|
3510
3618
|
}
|
|
3511
3619
|
// String array
|
|
3512
|
-
else if (index_es.
|
|
3620
|
+
else if (index_es.At(newValue)) {
|
|
3513
3621
|
if (typeof this.value === 'string')
|
|
3514
3622
|
this.valueExist = newValue.includes(this.value);
|
|
3515
3623
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
@@ -3527,7 +3635,7 @@ const MgInputSelect = class {
|
|
|
3527
3635
|
}
|
|
3528
3636
|
}
|
|
3529
3637
|
else {
|
|
3530
|
-
throw new Error(`<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option. Passed value: ${index_es.
|
|
3638
|
+
throw new Error(`<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option. Passed value: ${index_es.zt(newValue)}.`);
|
|
3531
3639
|
}
|
|
3532
3640
|
}
|
|
3533
3641
|
watchReadonly(newValue) {
|
|
@@ -3592,7 +3700,7 @@ const MgInputSelect = class {
|
|
|
3592
3700
|
if (typeof valid !== 'boolean') {
|
|
3593
3701
|
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean.');
|
|
3594
3702
|
}
|
|
3595
|
-
else if (!index_es.
|
|
3703
|
+
else if (!index_es.Le(errorMessage)) {
|
|
3596
3704
|
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string.');
|
|
3597
3705
|
}
|
|
3598
3706
|
else {
|
|
@@ -3656,7 +3764,7 @@ const MgInputSelect = class {
|
|
|
3656
3764
|
* @returns HTML Element
|
|
3657
3765
|
*/
|
|
3658
3766
|
render() {
|
|
3659
|
-
return (index.h("mg-input", { key: '
|
|
3767
|
+
return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
3660
3768
|
if (el !== null)
|
|
3661
3769
|
this.input = el;
|
|
3662
3770
|
} }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
@@ -3672,10 +3780,17 @@ const MgInputSelect = class {
|
|
|
3672
3780
|
"mgWidth": ["watchMgWidth"]
|
|
3673
3781
|
}; }
|
|
3674
3782
|
};
|
|
3675
|
-
MgInputSelect.style =
|
|
3783
|
+
MgInputSelect.style = mgInputSelectCss;
|
|
3784
|
+
|
|
3785
|
+
/**
|
|
3786
|
+
* TextType from text types
|
|
3787
|
+
*/
|
|
3788
|
+
// Define possible text types with help text
|
|
3789
|
+
const helpTextTypes = ['email', 'emails', 'url'];
|
|
3790
|
+
// Define possible text types
|
|
3791
|
+
const textTypes = ['text', 'search', 'tel', ...helpTextTypes];
|
|
3676
3792
|
|
|
3677
3793
|
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)}";
|
|
3678
|
-
const MgInputTextStyle0 = mgInputTextCss;
|
|
3679
3794
|
|
|
3680
3795
|
/**
|
|
3681
3796
|
* Check if object is an option
|
|
@@ -3688,12 +3803,12 @@ const isOption$1 = (option) => typeof option === 'object' && typeof option.title
|
|
|
3688
3803
|
* @param options - Datalist options to check.
|
|
3689
3804
|
* @returns True if datalist is well structured.
|
|
3690
3805
|
*/
|
|
3691
|
-
const isDatalistOptions = (options) => index_es.
|
|
3806
|
+
const isDatalistOptions = (options) => index_es.At(options) || (Array.isArray(options) && options.every(isOption$1));
|
|
3692
3807
|
const MgInputText = class {
|
|
3693
3808
|
constructor(hostRef) {
|
|
3694
3809
|
index.registerInstance(this, hostRef);
|
|
3695
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
3696
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
3810
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
3811
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
3697
3812
|
/************
|
|
3698
3813
|
* Internal *
|
|
3699
3814
|
************/
|
|
@@ -3711,13 +3826,17 @@ const MgInputText = class {
|
|
|
3711
3826
|
*/
|
|
3712
3827
|
this.name = this.identifier;
|
|
3713
3828
|
/**
|
|
3714
|
-
*
|
|
3829
|
+
* Define if label is displayed on top
|
|
3715
3830
|
*/
|
|
3716
|
-
this.
|
|
3831
|
+
this.labelOnTop = false;
|
|
3717
3832
|
/**
|
|
3718
3833
|
* Define if label is visible
|
|
3719
3834
|
*/
|
|
3720
3835
|
this.labelHide = false;
|
|
3836
|
+
/**
|
|
3837
|
+
* Input type
|
|
3838
|
+
*/
|
|
3839
|
+
this.type = 'text';
|
|
3721
3840
|
/**
|
|
3722
3841
|
* Input max length
|
|
3723
3842
|
*/
|
|
@@ -3749,7 +3868,17 @@ const MgInputText = class {
|
|
|
3749
3868
|
/**
|
|
3750
3869
|
* Component classes
|
|
3751
3870
|
*/
|
|
3752
|
-
this.classCollection = new index_es.
|
|
3871
|
+
this.classCollection = new index_es.kt(['mg-c-input--text']);
|
|
3872
|
+
/**
|
|
3873
|
+
* Validate pattern configuration
|
|
3874
|
+
*/
|
|
3875
|
+
this.validatePattern = () => {
|
|
3876
|
+
if ((this.pattern !== undefined || this.patternErrorMessage !== undefined) && // At least one is defined
|
|
3877
|
+
(!index_es.Le(this.pattern) || (!helpTextTypes.includes(this.type) && !index_es.Le(this.patternErrorMessage))) // Both must be defined
|
|
3878
|
+
) {
|
|
3879
|
+
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}'".`);
|
|
3880
|
+
}
|
|
3881
|
+
};
|
|
3753
3882
|
/**
|
|
3754
3883
|
* Handle input event
|
|
3755
3884
|
*/
|
|
@@ -3765,7 +3894,7 @@ const MgInputText = class {
|
|
|
3765
3894
|
*/
|
|
3766
3895
|
this.handleFocus = () => {
|
|
3767
3896
|
this.classCollection.add(this.classFocus);
|
|
3768
|
-
this.classCollection = new index_es.
|
|
3897
|
+
this.classCollection = new index_es.kt(this.classCollection.classes);
|
|
3769
3898
|
};
|
|
3770
3899
|
/**
|
|
3771
3900
|
* Handle blur event
|
|
@@ -3773,7 +3902,7 @@ const MgInputText = class {
|
|
|
3773
3902
|
this.handleBlur = () => {
|
|
3774
3903
|
// Manage focus
|
|
3775
3904
|
this.classCollection.delete(this.classFocus);
|
|
3776
|
-
this.classCollection = new index_es.
|
|
3905
|
+
this.classCollection = new index_es.kt(this.classCollection.classes);
|
|
3777
3906
|
// Display Error
|
|
3778
3907
|
this.handlerInProgress = 'blur';
|
|
3779
3908
|
this.displayError().finally(() => {
|
|
@@ -3792,15 +3921,20 @@ const MgInputText = class {
|
|
|
3792
3921
|
* @param errorMessage - errorMessage override
|
|
3793
3922
|
*/
|
|
3794
3923
|
this.setErrorMessage = (errorMessage) => {
|
|
3924
|
+
var _a;
|
|
3795
3925
|
// Set error message
|
|
3796
3926
|
this.errorMessage = undefined;
|
|
3797
3927
|
// Does have a custom error message
|
|
3798
3928
|
if (!this.valid && errorMessage !== undefined) {
|
|
3799
3929
|
this.errorMessage = errorMessage;
|
|
3800
3930
|
}
|
|
3931
|
+
// Does not match type (email, emails, tel, url, etc.)
|
|
3932
|
+
else if (!this.valid && this.input.validity.typeMismatch) {
|
|
3933
|
+
this.errorMessage = this.messages.input.text.errors.typeMismatch[this.type];
|
|
3934
|
+
}
|
|
3801
3935
|
// Does not match pattern
|
|
3802
3936
|
else if (!this.valid && this.input.validity.patternMismatch) {
|
|
3803
|
-
this.errorMessage = this.patternErrorMessage;
|
|
3937
|
+
this.errorMessage = (_a = this.patternErrorMessage) !== null && _a !== void 0 ? _a : this.messages.input.text.errors.typeMismatch[this.type];
|
|
3804
3938
|
}
|
|
3805
3939
|
// required
|
|
3806
3940
|
else if (!this.valid && this.input.validity.valueMissing) {
|
|
@@ -3848,6 +3982,11 @@ const MgInputText = class {
|
|
|
3848
3982
|
this.valueChange.emit(newValue);
|
|
3849
3983
|
}
|
|
3850
3984
|
}
|
|
3985
|
+
validateType(newValue) {
|
|
3986
|
+
if (!textTypes.includes(newValue)) {
|
|
3987
|
+
throw new Error(`<mg-input-text> prop "type" must be one of the following values: ${textTypes.join(', ')}. Passed value: ${newValue}.`);
|
|
3988
|
+
}
|
|
3989
|
+
}
|
|
3851
3990
|
validateIcon(newValue) {
|
|
3852
3991
|
if (newValue !== undefined) {
|
|
3853
3992
|
this.classCollection.add(this.classHasIcon);
|
|
@@ -3858,7 +3997,7 @@ const MgInputText = class {
|
|
|
3858
3997
|
}
|
|
3859
3998
|
validateDatalistoptions(newValue) {
|
|
3860
3999
|
if (Boolean(newValue) && !isDatalistOptions(newValue)) {
|
|
3861
|
-
throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${index_es.
|
|
4000
|
+
throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${index_es.zt(newValue)}.`);
|
|
3862
4001
|
}
|
|
3863
4002
|
}
|
|
3864
4003
|
watchReadonly(newValue) {
|
|
@@ -3892,9 +4031,12 @@ const MgInputText = class {
|
|
|
3892
4031
|
if (newValue !== undefined)
|
|
3893
4032
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3894
4033
|
}
|
|
3895
|
-
|
|
3896
|
-
|
|
3897
|
-
|
|
4034
|
+
watchPattern() {
|
|
4035
|
+
this.validatePattern();
|
|
4036
|
+
}
|
|
4037
|
+
watchHelpText(newValue) {
|
|
4038
|
+
if (!index_es.Le(newValue) && helpTextTypes.includes(this.type)) {
|
|
4039
|
+
this.helpText = this.messages.input.text.helpText[this.type];
|
|
3898
4040
|
}
|
|
3899
4041
|
}
|
|
3900
4042
|
/**
|
|
@@ -3934,7 +4076,7 @@ const MgInputText = class {
|
|
|
3934
4076
|
if (typeof valid !== 'boolean') {
|
|
3935
4077
|
throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean.');
|
|
3936
4078
|
}
|
|
3937
|
-
else if (!index_es.
|
|
4079
|
+
else if (!index_es.Le(errorMessage)) {
|
|
3938
4080
|
throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string.');
|
|
3939
4081
|
}
|
|
3940
4082
|
else {
|
|
@@ -3981,12 +4123,13 @@ const MgInputText = class {
|
|
|
3981
4123
|
// Validate
|
|
3982
4124
|
this.validateIcon(this.icon);
|
|
3983
4125
|
this.validateDatalistoptions(this.datalistoptions);
|
|
3984
|
-
this.
|
|
3985
|
-
this.validatePattern(this.patternErrorMessage);
|
|
4126
|
+
this.watchPattern();
|
|
3986
4127
|
this.validateAppendSlot();
|
|
3987
4128
|
this.watchMgWidth(this.mgWidth);
|
|
3988
4129
|
this.watchReadonly(this.readonly);
|
|
3989
4130
|
this.watchDisabled(this.disabled);
|
|
4131
|
+
this.validateType(this.type);
|
|
4132
|
+
this.watchHelpText(this.helpText);
|
|
3990
4133
|
// Check validity when component is ready
|
|
3991
4134
|
// return a promise to process action only in the FIRST render().
|
|
3992
4135
|
// https://stenciljs.com/docs/component-lifecycle#componentwillload
|
|
@@ -3999,12 +4142,12 @@ const MgInputText = class {
|
|
|
3999
4142
|
* @returns HTML Element
|
|
4000
4143
|
*/
|
|
4001
4144
|
render() {
|
|
4002
|
-
return (index.h("mg-input", { key: '
|
|
4145
|
+
return (index.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
|
|
4003
4146
|
? this.value && this.renderReadonly()
|
|
4004
4147
|
: [
|
|
4005
4148
|
index.h("div", { key: "input", class: "mg-c-input__with-character-left", style: {
|
|
4006
4149
|
'--mg-c-character-left-message-length': (!this.characterLeftHide ? this.maxlength.toString().length * 2 + 1 : 0).toString(),
|
|
4007
|
-
} }, this.icon !== undefined && index.h("mg-icon", { icon: this.icon }), index.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) => {
|
|
4150
|
+
} }, this.icon !== undefined && index.h("mg-icon", { icon: this.icon }), index.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) => {
|
|
4008
4151
|
if (el !== null)
|
|
4009
4152
|
this.input = el;
|
|
4010
4153
|
} }), this.hasDatalist() && (index.h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (index.h("option", { value: isOption$1(option) ? option.title : option, key: option }))))), !this.characterLeftHide && this.maxlength > 0 && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))),
|
|
@@ -4014,26 +4157,27 @@ const MgInputText = class {
|
|
|
4014
4157
|
get element() { return index.getElement(this); }
|
|
4015
4158
|
static get watchers() { return {
|
|
4016
4159
|
"value": ["handleValue"],
|
|
4160
|
+
"type": ["validateType"],
|
|
4017
4161
|
"icon": ["validateIcon"],
|
|
4018
4162
|
"datalistoptions": ["validateDatalistoptions"],
|
|
4019
4163
|
"readonly": ["watchReadonly", "handleValidityChange"],
|
|
4020
4164
|
"required": ["handleValidityChange"],
|
|
4021
4165
|
"disabled": ["handleValidityChange", "watchDisabled"],
|
|
4022
4166
|
"mgWidth": ["watchMgWidth"],
|
|
4023
|
-
"pattern": ["
|
|
4024
|
-
"patternErrorMessage": ["
|
|
4167
|
+
"pattern": ["watchPattern"],
|
|
4168
|
+
"patternErrorMessage": ["watchPattern"],
|
|
4169
|
+
"helpText": ["watchHelpText"]
|
|
4025
4170
|
}; }
|
|
4026
4171
|
};
|
|
4027
|
-
MgInputText.style =
|
|
4172
|
+
MgInputText.style = mgInputTextCss;
|
|
4028
4173
|
|
|
4029
4174
|
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}}";
|
|
4030
|
-
const MgInputTextareaStyle0 = mgInputTextareaCss;
|
|
4031
4175
|
|
|
4032
4176
|
const MgInputTextarea = class {
|
|
4033
4177
|
constructor(hostRef) {
|
|
4034
4178
|
index.registerInstance(this, hostRef);
|
|
4035
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
4036
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
4179
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
4180
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
4037
4181
|
/************
|
|
4038
4182
|
* Internal *
|
|
4039
4183
|
************/
|
|
@@ -4047,6 +4191,10 @@ const MgInputTextarea = class {
|
|
|
4047
4191
|
* If not set the value equals the identifier
|
|
4048
4192
|
*/
|
|
4049
4193
|
this.name = this.identifier;
|
|
4194
|
+
/**
|
|
4195
|
+
* Define if label is displayed on top
|
|
4196
|
+
*/
|
|
4197
|
+
this.labelOnTop = false;
|
|
4050
4198
|
/**
|
|
4051
4199
|
* Define if label is visible
|
|
4052
4200
|
*/
|
|
@@ -4090,7 +4238,7 @@ const MgInputTextarea = class {
|
|
|
4090
4238
|
/**
|
|
4091
4239
|
* Component classes
|
|
4092
4240
|
*/
|
|
4093
|
-
this.classCollection = new index_es.
|
|
4241
|
+
this.classCollection = new index_es.kt(['mg-c-input--textarea']);
|
|
4094
4242
|
/**
|
|
4095
4243
|
* Handle input event
|
|
4096
4244
|
*/
|
|
@@ -4106,7 +4254,7 @@ const MgInputTextarea = class {
|
|
|
4106
4254
|
*/
|
|
4107
4255
|
this.handleFocus = () => {
|
|
4108
4256
|
this.classCollection.add(this.classFocus);
|
|
4109
|
-
this.classCollection = new index_es.
|
|
4257
|
+
this.classCollection = new index_es.kt(this.classCollection.classes);
|
|
4110
4258
|
};
|
|
4111
4259
|
/**
|
|
4112
4260
|
* Handle blur event
|
|
@@ -4114,7 +4262,7 @@ const MgInputTextarea = class {
|
|
|
4114
4262
|
this.handleBlur = () => {
|
|
4115
4263
|
// Manage focus
|
|
4116
4264
|
this.classCollection.delete(this.classFocus);
|
|
4117
|
-
this.classCollection = new index_es.
|
|
4265
|
+
this.classCollection = new index_es.kt(this.classCollection.classes);
|
|
4118
4266
|
// Display Error
|
|
4119
4267
|
this.handlerInProgress = 'blur';
|
|
4120
4268
|
this.displayError().finally(() => {
|
|
@@ -4192,8 +4340,8 @@ const MgInputTextarea = class {
|
|
|
4192
4340
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
4193
4341
|
}
|
|
4194
4342
|
validatePattern(newValue) {
|
|
4195
|
-
if (newValue !== undefined && !(index_es.
|
|
4196
|
-
throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${index_es.
|
|
4343
|
+
if (newValue !== undefined && !(index_es.Le(this.pattern) && index_es.Le(this.patternErrorMessage))) {
|
|
4344
|
+
throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${index_es.zt(this.pattern)}'" and "patternErrorMessage='${index_es.zt(this.patternErrorMessage)}'".`);
|
|
4197
4345
|
}
|
|
4198
4346
|
}
|
|
4199
4347
|
validatecharacterLeftHide(newValue) {
|
|
@@ -4235,7 +4383,7 @@ const MgInputTextarea = class {
|
|
|
4235
4383
|
if (typeof valid !== 'boolean') {
|
|
4236
4384
|
throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean.');
|
|
4237
4385
|
}
|
|
4238
|
-
else if (!index_es.
|
|
4386
|
+
else if (!index_es.Le(errorMessage)) {
|
|
4239
4387
|
throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string.');
|
|
4240
4388
|
}
|
|
4241
4389
|
else {
|
|
@@ -4297,7 +4445,7 @@ const MgInputTextarea = class {
|
|
|
4297
4445
|
* @returns HTML Element
|
|
4298
4446
|
*/
|
|
4299
4447
|
render() {
|
|
4300
|
-
return (index.h("mg-input", { key: '
|
|
4448
|
+
return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (index.h("div", { class: "mg-c-input__with-character-left" }, index.h("textarea", { class: {
|
|
4301
4449
|
'mg-c-input__box': true,
|
|
4302
4450
|
'mg-c-input__box--width': true,
|
|
4303
4451
|
'mg-c-input__box--resizable': this.resizable === 'both',
|
|
@@ -4320,10 +4468,9 @@ const MgInputTextarea = class {
|
|
|
4320
4468
|
"characterLeftHide": ["validatecharacterLeftHide"]
|
|
4321
4469
|
}; }
|
|
4322
4470
|
};
|
|
4323
|
-
MgInputTextarea.style =
|
|
4471
|
+
MgInputTextarea.style = mgInputTextareaCss;
|
|
4324
4472
|
|
|
4325
4473
|
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)}";
|
|
4326
|
-
const MgInputTitleStyle0 = mgInputTitleCss;
|
|
4327
4474
|
|
|
4328
4475
|
const MgInputTitle = class {
|
|
4329
4476
|
constructor(hostRef) {
|
|
@@ -4338,11 +4485,11 @@ const MgInputTitle = class {
|
|
|
4338
4485
|
this.tagName = 'label';
|
|
4339
4486
|
}
|
|
4340
4487
|
validateIdentifier(newValue) {
|
|
4341
|
-
if (!index_es.
|
|
4488
|
+
if (!index_es.Le(newValue)) {
|
|
4342
4489
|
throw new Error('<mg-input-title> prop "identifier" is required.');
|
|
4343
4490
|
}
|
|
4344
|
-
else if (!index_es.
|
|
4345
|
-
console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
4491
|
+
else if (!index_es.Ot(newValue)) {
|
|
4492
|
+
console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${index_es.zt(newValue)}.`);
|
|
4346
4493
|
}
|
|
4347
4494
|
}
|
|
4348
4495
|
validateIsLegend(newValue) {
|
|
@@ -4372,10 +4519,9 @@ const MgInputTitle = class {
|
|
|
4372
4519
|
"isLegend": ["validateIsLegend"]
|
|
4373
4520
|
}; }
|
|
4374
4521
|
};
|
|
4375
|
-
MgInputTitle.style =
|
|
4522
|
+
MgInputTitle.style = mgInputTitleCss;
|
|
4376
4523
|
|
|
4377
4524
|
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}";
|
|
4378
|
-
const MgInputToggleStyle0 = mgInputToggleCss;
|
|
4379
4525
|
|
|
4380
4526
|
/**
|
|
4381
4527
|
* type Option validation function
|
|
@@ -4386,8 +4532,8 @@ const isOption = (option) => typeof option === 'object' && typeof option.title =
|
|
|
4386
4532
|
const MgInputToggle = class {
|
|
4387
4533
|
constructor(hostRef) {
|
|
4388
4534
|
index.registerInstance(this, hostRef);
|
|
4389
|
-
this.valueChange = index.createEvent(this, "value-change"
|
|
4390
|
-
this.inputValid = index.createEvent(this, "input-valid"
|
|
4535
|
+
this.valueChange = index.createEvent(this, "value-change");
|
|
4536
|
+
this.inputValid = index.createEvent(this, "input-valid");
|
|
4391
4537
|
/************
|
|
4392
4538
|
* Internal *
|
|
4393
4539
|
************/
|
|
@@ -4400,6 +4546,10 @@ const MgInputToggle = class {
|
|
|
4400
4546
|
* If not set the value equals the identifier
|
|
4401
4547
|
*/
|
|
4402
4548
|
this.name = this.identifier;
|
|
4549
|
+
/**
|
|
4550
|
+
* Define if label is displayed on top
|
|
4551
|
+
*/
|
|
4552
|
+
this.labelOnTop = false;
|
|
4403
4553
|
/**
|
|
4404
4554
|
* Define if label is visible
|
|
4405
4555
|
*/
|
|
@@ -4427,7 +4577,7 @@ const MgInputToggle = class {
|
|
|
4427
4577
|
/**
|
|
4428
4578
|
* Component classes
|
|
4429
4579
|
*/
|
|
4430
|
-
this.classCollection = new index_es.
|
|
4580
|
+
this.classCollection = new index_es.kt(['mg-c-input--toggle']);
|
|
4431
4581
|
/**
|
|
4432
4582
|
* Checked internal value
|
|
4433
4583
|
*/
|
|
@@ -4488,10 +4638,10 @@ const MgInputToggle = class {
|
|
|
4488
4638
|
}
|
|
4489
4639
|
validateItems(newValue) {
|
|
4490
4640
|
if (typeof newValue === 'object' && this.items.length !== 2) {
|
|
4491
|
-
throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${index_es.
|
|
4641
|
+
throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${index_es.zt(newValue)}.`);
|
|
4492
4642
|
}
|
|
4493
4643
|
// String array
|
|
4494
|
-
else if (index_es.
|
|
4644
|
+
else if (index_es.At(newValue)) {
|
|
4495
4645
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
4496
4646
|
}
|
|
4497
4647
|
// Object array
|
|
@@ -4499,7 +4649,7 @@ const MgInputToggle = class {
|
|
|
4499
4649
|
this.options = newValue;
|
|
4500
4650
|
}
|
|
4501
4651
|
else {
|
|
4502
|
-
throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${index_es.
|
|
4652
|
+
throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${index_es.zt(newValue)}.`);
|
|
4503
4653
|
}
|
|
4504
4654
|
}
|
|
4505
4655
|
watchIsOnOff(newValue) {
|
|
@@ -4547,7 +4697,7 @@ const MgInputToggle = class {
|
|
|
4547
4697
|
if (typeof valid !== 'boolean') {
|
|
4548
4698
|
throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');
|
|
4549
4699
|
}
|
|
4550
|
-
else if (!index_es.
|
|
4700
|
+
else if (!index_es.Le(errorMessage)) {
|
|
4551
4701
|
throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
|
|
4552
4702
|
}
|
|
4553
4703
|
else {
|
|
@@ -4614,7 +4764,7 @@ const MgInputToggle = class {
|
|
|
4614
4764
|
*/
|
|
4615
4765
|
render() {
|
|
4616
4766
|
const checkedItem = this.getCheckedItem(this.checked);
|
|
4617
|
-
return (index.h("mg-input", { key: '
|
|
4767
|
+
return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (index.h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-1" })), index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-2" }))))));
|
|
4618
4768
|
}
|
|
4619
4769
|
get element() { return index.getElement(this); }
|
|
4620
4770
|
static get watchers() { return {
|
|
@@ -4627,7 +4777,7 @@ const MgInputToggle = class {
|
|
|
4627
4777
|
"checked": ["handleChecked"]
|
|
4628
4778
|
}; }
|
|
4629
4779
|
};
|
|
4630
|
-
MgInputToggle.style =
|
|
4780
|
+
MgInputToggle.style = mgInputToggleCss;
|
|
4631
4781
|
|
|
4632
4782
|
/**
|
|
4633
4783
|
*
|
|
@@ -4710,7 +4860,6 @@ class OverflowBehavior {
|
|
|
4710
4860
|
}
|
|
4711
4861
|
|
|
4712
4862
|
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}";
|
|
4713
|
-
const MgItemMoreStyle0 = mgItemMoreCss;
|
|
4714
4863
|
|
|
4715
4864
|
const MgItemMore = class {
|
|
4716
4865
|
constructor(hostRef) {
|
|
@@ -4730,17 +4879,17 @@ const MgItemMore = class {
|
|
|
4730
4879
|
}
|
|
4731
4880
|
validateIcon(newValue) {
|
|
4732
4881
|
if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
|
|
4733
|
-
throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${index_es.
|
|
4882
|
+
throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${index_es.zt(newValue)}.`);
|
|
4734
4883
|
}
|
|
4735
4884
|
validateSlotLabel(newValue) {
|
|
4736
4885
|
if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
|
|
4737
|
-
throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${index_es.
|
|
4886
|
+
throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${index_es.zt(newValue)}.`);
|
|
4738
4887
|
else if (typeof newValue.label !== 'string')
|
|
4739
4888
|
this.slotlabel.label = this.messages.menuLabel;
|
|
4740
4889
|
}
|
|
4741
4890
|
validateSize(newValue) {
|
|
4742
|
-
if (newValue && !sizes$
|
|
4743
|
-
throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${index_es.
|
|
4891
|
+
if (newValue && !sizes$5.includes(newValue))
|
|
4892
|
+
throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${index_es.zt(newValue)}.`);
|
|
4744
4893
|
}
|
|
4745
4894
|
/*************
|
|
4746
4895
|
* Lifecycle *
|
|
@@ -4787,7 +4936,7 @@ const MgItemMore = class {
|
|
|
4787
4936
|
*/
|
|
4788
4937
|
render() {
|
|
4789
4938
|
const menuItemIdentifier = 'mg-item-more';
|
|
4790
|
-
return (index.h(index.Host, { key: '
|
|
4939
|
+
return (index.h(index.Host, { key: 'd7811bdedea2159c351185958976bda08c21ba20', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (index.h("mg-menu-item", { key: '66f7fe8056bf40a034c49ea1b2f97b3eff8cedc5', "data-overflow-more": true, "data-size": this.parentMenu.size, "data-style-direction": directions$1.HORIZONTAL, identifier: menuItemIdentifier }, index.h("mg-icon", { key: '06c7e052299f37d913605c2d0e938eaee6b820ba', icon: this.icon.icon, size: this.size, slot: "image" }), index.h("span", { key: '9b8e2da9edb472f6822e8ed1878d1540e459c96a', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { key: '5b8f0a9b0208bf881b5f5348d296a80dd2e60f0b', direction: directions$1.VERTICAL, label: this.messages.menuLabel, size: this.size, ref: ref => {
|
|
4791
4940
|
if (ref !== null)
|
|
4792
4941
|
this.itemMoreContainer = ref;
|
|
4793
4942
|
} })))));
|
|
@@ -4799,10 +4948,9 @@ const MgItemMore = class {
|
|
|
4799
4948
|
"size": ["validateSize"]
|
|
4800
4949
|
}; }
|
|
4801
4950
|
};
|
|
4802
|
-
MgItemMore.style =
|
|
4951
|
+
MgItemMore.style = mgItemMoreCss;
|
|
4803
4952
|
|
|
4804
4953
|
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}";
|
|
4805
|
-
const MgMenuStyle0 = mgMenuCss;
|
|
4806
4954
|
|
|
4807
4955
|
const MgMenu = class {
|
|
4808
4956
|
constructor(hostRef) {
|
|
@@ -4814,7 +4962,7 @@ const MgMenu = class {
|
|
|
4814
4962
|
/**
|
|
4815
4963
|
* Component display direction.
|
|
4816
4964
|
*/
|
|
4817
|
-
this.direction =
|
|
4965
|
+
this.direction = 'horizontal';
|
|
4818
4966
|
/**
|
|
4819
4967
|
* Define mg-menu size
|
|
4820
4968
|
*/
|
|
@@ -4874,12 +5022,12 @@ const MgMenu = class {
|
|
|
4874
5022
|
}
|
|
4875
5023
|
validateLabel(newValue) {
|
|
4876
5024
|
if (newValue === undefined && !this.element.hasAttribute('aria-label')) {
|
|
4877
|
-
throw new Error(`<${this.name}> prop "label" is required. Passed value: ${index_es.
|
|
5025
|
+
throw new Error(`<${this.name}> prop "label" is required. Passed value: ${index_es.zt(newValue)}.`);
|
|
4878
5026
|
}
|
|
4879
5027
|
}
|
|
4880
5028
|
validateDirection(newValue) {
|
|
4881
5029
|
if (![directions$1.VERTICAL, directions$1.HORIZONTAL].includes(newValue)) {
|
|
4882
|
-
throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$1.HORIZONTAL}, ${directions$1.VERTICAL}. Passed value: ${index_es.
|
|
5030
|
+
throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$1.HORIZONTAL}, ${directions$1.VERTICAL}. Passed value: ${index_es.zt(newValue)}.`);
|
|
4883
5031
|
}
|
|
4884
5032
|
else {
|
|
4885
5033
|
this.updateMenuItems();
|
|
@@ -4894,8 +5042,8 @@ const MgMenu = class {
|
|
|
4894
5042
|
}
|
|
4895
5043
|
}
|
|
4896
5044
|
validateSize(newValue) {
|
|
4897
|
-
if (!sizes$
|
|
4898
|
-
throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$
|
|
5045
|
+
if (!sizes$5.includes(newValue)) {
|
|
5046
|
+
throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$5.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
4899
5047
|
}
|
|
4900
5048
|
}
|
|
4901
5049
|
/**
|
|
@@ -4911,7 +5059,7 @@ const MgMenu = class {
|
|
|
4911
5059
|
if (focusedItem === itemToWatch)
|
|
4912
5060
|
return;
|
|
4913
5061
|
// reset expanded on previous active menu item
|
|
4914
|
-
if (focusedItem)
|
|
5062
|
+
if (focusedItem !== null)
|
|
4915
5063
|
focusedItem.removeAttribute('data-has-focus');
|
|
4916
5064
|
// update focusedMenuItem with new value
|
|
4917
5065
|
itemToWatch.setAttribute('data-has-focus', 'true');
|
|
@@ -4942,15 +5090,15 @@ const MgMenu = class {
|
|
|
4942
5090
|
const isElementChild = (element) => {
|
|
4943
5091
|
if (element === this.element)
|
|
4944
5092
|
return true;
|
|
4945
|
-
else if (
|
|
5093
|
+
else if (element.parentElement === null)
|
|
4946
5094
|
return false;
|
|
4947
5095
|
else
|
|
4948
5096
|
return isElementChild(element.parentElement);
|
|
4949
5097
|
};
|
|
4950
|
-
if (
|
|
5098
|
+
if (event.target.closest('mg-menu') === null || !isElementChild(event.target)) {
|
|
4951
5099
|
const focusedItem = this.element.querySelector('[data-has-focus]');
|
|
4952
5100
|
// reset expanded on previous active menu item
|
|
4953
|
-
if (focusedItem)
|
|
5101
|
+
if (focusedItem !== null)
|
|
4954
5102
|
focusedItem.removeAttribute('data-has-focus');
|
|
4955
5103
|
}
|
|
4956
5104
|
});
|
|
@@ -4963,7 +5111,7 @@ const MgMenu = class {
|
|
|
4963
5111
|
* @returns HTML Element
|
|
4964
5112
|
*/
|
|
4965
5113
|
render() {
|
|
4966
|
-
return (index.h(index.Host, { key: '
|
|
5114
|
+
return (index.h(index.Host, { key: 'b07fbc2127a17e22f41750c603a36c76924d97f3', role: "list", "aria-label": this.label }, index.h("slot", { key: '0f1070474d19411fc1e52b5151ad6c61c2f07627' })));
|
|
4967
5115
|
}
|
|
4968
5116
|
get element() { return index.getElement(this); }
|
|
4969
5117
|
static get watchers() { return {
|
|
@@ -4973,16 +5121,15 @@ const MgMenu = class {
|
|
|
4973
5121
|
"size": ["validateSize"]
|
|
4974
5122
|
}; }
|
|
4975
5123
|
};
|
|
4976
|
-
MgMenu.style =
|
|
5124
|
+
MgMenu.style = mgMenuCss;
|
|
4977
5125
|
|
|
4978
5126
|
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}";
|
|
4979
|
-
const MgMenuItemStyle0 = mgMenuItemCss;
|
|
4980
5127
|
|
|
4981
5128
|
const MgMenuItem = class {
|
|
4982
5129
|
constructor(hostRef) {
|
|
4983
5130
|
index.registerInstance(this, hostRef);
|
|
4984
|
-
this.itemLoaded = index.createEvent(this, "item-loaded"
|
|
4985
|
-
this.itemUpdated = index.createEvent(this, "item-updated"
|
|
5131
|
+
this.itemLoaded = index.createEvent(this, "item-loaded");
|
|
5132
|
+
this.itemUpdated = index.createEvent(this, "item-updated");
|
|
4986
5133
|
/************
|
|
4987
5134
|
* Internal *
|
|
4988
5135
|
************/
|
|
@@ -4994,11 +5141,11 @@ const MgMenuItem = class {
|
|
|
4994
5141
|
/**
|
|
4995
5142
|
* Identifier is used to control mg-popover
|
|
4996
5143
|
*/
|
|
4997
|
-
this.identifier = index_es.
|
|
5144
|
+
this.identifier = index_es.xt('mg-menu-item');
|
|
4998
5145
|
/**
|
|
4999
5146
|
* Define menu-item status.
|
|
5000
5147
|
*/
|
|
5001
|
-
this.status =
|
|
5148
|
+
this.status = 'visible';
|
|
5002
5149
|
/**
|
|
5003
5150
|
* Define menu-item content expanded.
|
|
5004
5151
|
*/
|
|
@@ -5013,7 +5160,7 @@ const MgMenuItem = class {
|
|
|
5013
5160
|
/**
|
|
5014
5161
|
* Component button classes
|
|
5015
5162
|
*/
|
|
5016
|
-
this.navigationButtonClassList = new index_es.
|
|
5163
|
+
this.navigationButtonClassList = new index_es.kt([this.navigationButton]);
|
|
5017
5164
|
/**
|
|
5018
5165
|
* Does component have children.
|
|
5019
5166
|
*/
|
|
@@ -5038,7 +5185,7 @@ const MgMenuItem = class {
|
|
|
5038
5185
|
* @returns truthy if component display popover
|
|
5039
5186
|
*/
|
|
5040
5187
|
this.hasPopover = () => this.isDirection(directions$1.HORIZONTAL) &&
|
|
5041
|
-
((this.isInMainMenu() && Array.from(this.element.children).some(element =>
|
|
5188
|
+
((this.isInMainMenu() && Array.from(this.element.children).some(element => element.querySelector('[slot]') === null)) || this.isItemMore) &&
|
|
5042
5189
|
this.href === undefined;
|
|
5043
5190
|
/**
|
|
5044
5191
|
* Method to control if one of component children have active status
|
|
@@ -5052,7 +5199,7 @@ const MgMenuItem = class {
|
|
|
5052
5199
|
* Is component an interactive item
|
|
5053
5200
|
* @returns truthy if element is clickable
|
|
5054
5201
|
*/
|
|
5055
|
-
this.isInteractiveItem = () => this.hasChildren || !index_es.
|
|
5202
|
+
this.isInteractiveItem = () => this.hasChildren || !index_es.Le(this.href);
|
|
5056
5203
|
/**
|
|
5057
5204
|
* Is component contextual direction match the given direction
|
|
5058
5205
|
* @param direction - in parent menu
|
|
@@ -5105,7 +5252,7 @@ const MgMenuItem = class {
|
|
|
5105
5252
|
}
|
|
5106
5253
|
['label', 'metadata'].forEach(slot => {
|
|
5107
5254
|
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
|
|
5108
|
-
if (!index_es.
|
|
5255
|
+
if (!index_es.Le(element.textContent))
|
|
5109
5256
|
throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
|
|
5110
5257
|
if ((guard && !element.hasAttribute('title')) || !guard)
|
|
5111
5258
|
element.setAttribute('title', element.textContent);
|
|
@@ -5172,8 +5319,8 @@ const MgMenuItem = class {
|
|
|
5172
5319
|
this.renderSlot = () => index.h("slot", null);
|
|
5173
5320
|
}
|
|
5174
5321
|
watchIdentifier(newValue) {
|
|
5175
|
-
if (!index_es.
|
|
5176
|
-
console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
5322
|
+
if (!index_es.Ot(newValue)) {
|
|
5323
|
+
console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${index_es.zt(newValue)}.`);
|
|
5177
5324
|
}
|
|
5178
5325
|
else {
|
|
5179
5326
|
this.popoverIdentifier = `${this.identifier}-popover`;
|
|
@@ -5181,7 +5328,7 @@ const MgMenuItem = class {
|
|
|
5181
5328
|
}
|
|
5182
5329
|
watchTarget(newValue) {
|
|
5183
5330
|
if (newValue && !targets.includes(newValue)) {
|
|
5184
|
-
throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${index_es.
|
|
5331
|
+
throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
5185
5332
|
}
|
|
5186
5333
|
}
|
|
5187
5334
|
watchStatus(newValue, oldValue) {
|
|
@@ -5191,7 +5338,7 @@ const MgMenuItem = class {
|
|
|
5191
5338
|
}
|
|
5192
5339
|
watchExpanded(newValue) {
|
|
5193
5340
|
if (typeof newValue !== 'boolean') {
|
|
5194
|
-
throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${index_es.
|
|
5341
|
+
throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${index_es.zt(newValue)}.`);
|
|
5195
5342
|
}
|
|
5196
5343
|
else {
|
|
5197
5344
|
this.updateExpanded(newValue);
|
|
@@ -5248,7 +5395,7 @@ const MgMenuItem = class {
|
|
|
5248
5395
|
*/
|
|
5249
5396
|
updatePopoverGuard() {
|
|
5250
5397
|
const subItem = this.element.querySelector('*:not([slot])');
|
|
5251
|
-
if (
|
|
5398
|
+
if (subItem === null)
|
|
5252
5399
|
return;
|
|
5253
5400
|
if (this.hasPopover())
|
|
5254
5401
|
subItem.dataset.mgPopoverGuard = this.popoverIdentifier;
|
|
@@ -5306,7 +5453,7 @@ const MgMenuItem = class {
|
|
|
5306
5453
|
* @returns promise process wich emit the 'item-updated' event
|
|
5307
5454
|
*/
|
|
5308
5455
|
componentShouldUpdate() {
|
|
5309
|
-
return index_es.
|
|
5456
|
+
return index_es.Mt(() => {
|
|
5310
5457
|
this.itemUpdated.emit();
|
|
5311
5458
|
});
|
|
5312
5459
|
}
|
|
@@ -5333,7 +5480,7 @@ const MgMenuItem = class {
|
|
|
5333
5480
|
['mg-c-menu-item__collapse-container']: true,
|
|
5334
5481
|
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions$1.HORIZONTAL),
|
|
5335
5482
|
});
|
|
5336
|
-
return (index.h(index.Host, { key: '
|
|
5483
|
+
return (index.h(index.Host, { key: '6ef0374dfd3afdea0554df426c06e1fdc5549f82', role: this.isItemMore ? 'presentation' : 'listitem' }, this.hasPopover() ? (index.h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.popoverIdentifier, "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
|
|
5337
5484
|
}, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
|
|
5338
5485
|
this.renderInteractiveElement(),
|
|
5339
5486
|
index.h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
|
|
@@ -5352,7 +5499,7 @@ const MgMenuItem = class {
|
|
|
5352
5499
|
"data-has-focus": ["watchDataHasFocus"]
|
|
5353
5500
|
}; }
|
|
5354
5501
|
};
|
|
5355
|
-
MgMenuItem.style =
|
|
5502
|
+
MgMenuItem.style = mgMenuItemCss;
|
|
5356
5503
|
|
|
5357
5504
|
/**
|
|
5358
5505
|
* List available variants
|
|
@@ -5364,7 +5511,6 @@ const variants$1 = ['info', 'warning', 'success', 'danger'];
|
|
|
5364
5511
|
const variantStyles = ['bar-left', 'background'];
|
|
5365
5512
|
|
|
5366
5513
|
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%}";
|
|
5367
|
-
const MgMessageStyle0 = mgMessageCss;
|
|
5368
5514
|
|
|
5369
5515
|
const MgMessage = class {
|
|
5370
5516
|
constructor(hostRef) {
|
|
@@ -5384,7 +5530,7 @@ const MgMessage = class {
|
|
|
5384
5530
|
/**
|
|
5385
5531
|
* Component classes
|
|
5386
5532
|
*/
|
|
5387
|
-
this.classCollection = new index_es.
|
|
5533
|
+
this.classCollection = new index_es.kt(['mg-c-message']);
|
|
5388
5534
|
/**
|
|
5389
5535
|
* Define if component is using actions slot
|
|
5390
5536
|
*/
|
|
@@ -5408,7 +5554,7 @@ const MgMessage = class {
|
|
|
5408
5554
|
}
|
|
5409
5555
|
watchVariant(newValue, oldValue) {
|
|
5410
5556
|
if (!variants$1.includes(newValue)) {
|
|
5411
|
-
throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${index_es.
|
|
5557
|
+
throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
5412
5558
|
}
|
|
5413
5559
|
else {
|
|
5414
5560
|
if (newValue !== undefined)
|
|
@@ -5419,7 +5565,7 @@ const MgMessage = class {
|
|
|
5419
5565
|
}
|
|
5420
5566
|
watchVariantStyle(newValue, oldValue) {
|
|
5421
5567
|
if (!variantStyles.includes(newValue)) {
|
|
5422
|
-
throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${index_es.
|
|
5568
|
+
throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
5423
5569
|
}
|
|
5424
5570
|
else {
|
|
5425
5571
|
if (newValue !== undefined)
|
|
@@ -5457,7 +5603,7 @@ const MgMessage = class {
|
|
|
5457
5603
|
"variantStyle": ["watchVariantStyle"]
|
|
5458
5604
|
}; }
|
|
5459
5605
|
};
|
|
5460
|
-
MgMessage.style =
|
|
5606
|
+
MgMessage.style = mgMessageCss;
|
|
5461
5607
|
|
|
5462
5608
|
/**
|
|
5463
5609
|
* List of all possibles dialog roles
|
|
@@ -5465,25 +5611,24 @@ MgMessage.style = MgMessageStyle0;
|
|
|
5465
5611
|
const dialogRoles = ['dialog', 'alertdialog'];
|
|
5466
5612
|
|
|
5467
5613
|
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}";
|
|
5468
|
-
const MgModalStyle0 = mgModalCss;
|
|
5469
5614
|
|
|
5470
5615
|
const MgModal = class {
|
|
5471
5616
|
constructor(hostRef) {
|
|
5472
5617
|
index.registerInstance(this, hostRef);
|
|
5473
|
-
this.componentShow = index.createEvent(this, "component-show"
|
|
5474
|
-
this.componentHide = index.createEvent(this, "component-hide"
|
|
5475
|
-
this.componentClose = index.createEvent(this, "component-close"
|
|
5618
|
+
this.componentShow = index.createEvent(this, "component-show");
|
|
5619
|
+
this.componentHide = index.createEvent(this, "component-hide");
|
|
5620
|
+
this.componentClose = index.createEvent(this, "component-close");
|
|
5476
5621
|
// IDs
|
|
5477
5622
|
this.titleId = '';
|
|
5478
5623
|
/**
|
|
5479
5624
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
5480
5625
|
* If not set, it will be created.
|
|
5481
5626
|
*/
|
|
5482
|
-
this.identifier = index_es.
|
|
5627
|
+
this.identifier = index_es.xt('mg-modal');
|
|
5483
5628
|
/**
|
|
5484
5629
|
* Modal dialog role.
|
|
5485
5630
|
*/
|
|
5486
|
-
this.dialogRole =
|
|
5631
|
+
this.dialogRole = 'dialog';
|
|
5487
5632
|
/**
|
|
5488
5633
|
* Define if modal has a cross button
|
|
5489
5634
|
*/
|
|
@@ -5499,7 +5644,7 @@ const MgModal = class {
|
|
|
5499
5644
|
/**
|
|
5500
5645
|
* Component classes
|
|
5501
5646
|
*/
|
|
5502
|
-
this.classCollection = new index_es.
|
|
5647
|
+
this.classCollection = new index_es.kt(['mg-c-modal']);
|
|
5503
5648
|
/***********
|
|
5504
5649
|
* Handles *
|
|
5505
5650
|
***********/
|
|
@@ -5512,17 +5657,17 @@ const MgModal = class {
|
|
|
5512
5657
|
};
|
|
5513
5658
|
}
|
|
5514
5659
|
watchIdentifier(newValue) {
|
|
5515
|
-
if (!index_es.
|
|
5516
|
-
throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
5660
|
+
if (!index_es.Ot(newValue)) {
|
|
5661
|
+
throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${index_es.zt(newValue)}.`);
|
|
5517
5662
|
}
|
|
5518
5663
|
}
|
|
5519
5664
|
validateDialogRole(newValue) {
|
|
5520
5665
|
if (!dialogRoles.includes(newValue))
|
|
5521
|
-
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${index_es.
|
|
5666
|
+
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
5522
5667
|
}
|
|
5523
5668
|
validateModalTitle(newValue) {
|
|
5524
|
-
if (!index_es.
|
|
5525
|
-
throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${index_es.
|
|
5669
|
+
if (!index_es.Le(newValue)) {
|
|
5670
|
+
throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${index_es.zt(newValue)}.`);
|
|
5526
5671
|
}
|
|
5527
5672
|
}
|
|
5528
5673
|
watchOpen(newValue) {
|
|
@@ -5571,11 +5716,11 @@ const MgModal = class {
|
|
|
5571
5716
|
* @returns HTML Element
|
|
5572
5717
|
*/
|
|
5573
5718
|
render() {
|
|
5574
|
-
return (index.h("dialog", { key: '
|
|
5719
|
+
return (index.h("dialog", { key: 'fff52c253f0aeaceec427982c5fea96fc948a4f5', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
|
|
5575
5720
|
if (el !== null) {
|
|
5576
5721
|
this.dialog = el;
|
|
5577
5722
|
}
|
|
5578
|
-
} }, index.h("mg-card", { key: '
|
|
5723
|
+
} }, index.h("mg-card", { key: '597aee771927b73fc59c082075d74c76c9d8130c' }, index.h("div", { key: '75136546eefd38191ecf536e5c10cfbeb7172dc4', class: "mg-c-modal__dialog" }, index.h("header", { key: '09c79927ddffa0d461eabfa195849cdabe37a6ac', class: "mg-c-modal__header" }, this.closeButton && (index.h("span", { key: 'b37aabbf4a77ebaa4ca72e72f477aece9c9484de', class: "mg-c-modal__close-button" }, index.h("mg-button", { key: 'a4ca599e0665489f2cba2d3e668c92baff0a3fdb', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, index.h("mg-icon", { key: 'd77c434f5e2aa6d82772ab3af10a93c6f580c709', icon: "cross" })))), index.h("h1", { key: '6daf305683895d5cc50960b4ce86dd2ffebc3246', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), index.h("article", { key: '075ac4bfa9ab3e495b58a340719a8e0cefaac8c4', class: "mg-c-modal__content" }, index.h("slot", { key: '7013d03bfbd806671ad4cf081df9c7fe842f285c' })), this.hasActions && (index.h("footer", { key: '20ba80cc79e6d43cf2b820425ee0e4f75953da19', class: "mg-c-modal__footer" }, index.h("slot", { key: 'cfa6c3920891dfceecd0f01fbab2a1496db66f35', name: "actions" })))))));
|
|
5579
5724
|
}
|
|
5580
5725
|
get element() { return index.getElement(this); }
|
|
5581
5726
|
static get watchers() { return {
|
|
@@ -5585,7 +5730,7 @@ const MgModal = class {
|
|
|
5585
5730
|
"open": ["watchOpen"]
|
|
5586
5731
|
}; }
|
|
5587
5732
|
};
|
|
5588
|
-
MgModal.style =
|
|
5733
|
+
MgModal.style = mgModalCss;
|
|
5589
5734
|
|
|
5590
5735
|
const NavigationAction = {
|
|
5591
5736
|
NEXT: 'next',
|
|
@@ -5593,7 +5738,6 @@ const NavigationAction = {
|
|
|
5593
5738
|
};
|
|
5594
5739
|
|
|
5595
5740
|
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}";
|
|
5596
|
-
const MgPaginationStyle0 = mgPaginationCss;
|
|
5597
5741
|
|
|
5598
5742
|
/**
|
|
5599
5743
|
* Range generator
|
|
@@ -5620,12 +5764,20 @@ const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - st
|
|
|
5620
5764
|
const MgPagination = class {
|
|
5621
5765
|
constructor(hostRef) {
|
|
5622
5766
|
index.registerInstance(this, hostRef);
|
|
5623
|
-
this.currentPageChange = index.createEvent(this, "current-page-change"
|
|
5767
|
+
this.currentPageChange = index.createEvent(this, "current-page-change");
|
|
5624
5768
|
/**
|
|
5625
5769
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
5626
5770
|
* If not set, it will be created.
|
|
5627
5771
|
*/
|
|
5628
|
-
this.identifier = index_es.
|
|
5772
|
+
this.identifier = index_es.xt('mg-pagination');
|
|
5773
|
+
/**
|
|
5774
|
+
* Hide navigation label
|
|
5775
|
+
*/
|
|
5776
|
+
this.hideNavigationLabels = false;
|
|
5777
|
+
/**
|
|
5778
|
+
* Hide select input
|
|
5779
|
+
*/
|
|
5780
|
+
this.hidePageCount = false;
|
|
5629
5781
|
/**
|
|
5630
5782
|
* Component total pages
|
|
5631
5783
|
*/
|
|
@@ -5662,18 +5814,18 @@ const MgPagination = class {
|
|
|
5662
5814
|
};
|
|
5663
5815
|
}
|
|
5664
5816
|
watchIdentifier(newValue) {
|
|
5665
|
-
if (!index_es.
|
|
5666
|
-
console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
5817
|
+
if (!index_es.Ot(newValue)) {
|
|
5818
|
+
console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${index_es.zt(newValue)}.`);
|
|
5667
5819
|
}
|
|
5668
5820
|
}
|
|
5669
5821
|
validateTotalPages(newValue) {
|
|
5670
5822
|
if (newValue < 1) {
|
|
5671
|
-
throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${index_es.
|
|
5823
|
+
throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${index_es.zt(newValue)}.`);
|
|
5672
5824
|
}
|
|
5673
5825
|
}
|
|
5674
5826
|
validateCurrentPage(newValue) {
|
|
5675
5827
|
if (newValue < 1) {
|
|
5676
|
-
throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${index_es.
|
|
5828
|
+
throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${index_es.zt(newValue)}.`);
|
|
5677
5829
|
}
|
|
5678
5830
|
else if (newValue > this.totalPages) {
|
|
5679
5831
|
throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
|
|
@@ -5703,10 +5855,10 @@ const MgPagination = class {
|
|
|
5703
5855
|
* @returns HTML Element
|
|
5704
5856
|
*/
|
|
5705
5857
|
render() {
|
|
5706
|
-
const navigationActionButton = (disabled, action) => (index.h("mg-button", { key: '
|
|
5858
|
+
const navigationActionButton = (disabled, action) => (index.h("mg-button", { key: '3c29dbe0db55d6eda6d53ee174e0e38c086beddf', label: this.messages.pagination[`${action}Page`],
|
|
5707
5859
|
// eslint-disable-next-line react/jsx-no-bind
|
|
5708
|
-
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && index.h("mg-icon", { key: '
|
|
5709
|
-
return (index.h(index.Host, { key: '
|
|
5860
|
+
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && index.h("mg-icon", { key: '677232241e8eb8beca9b9ce4a6f997dd69a5e3c1', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && index.h("mg-icon", { key: '83f0db42841d81a3bc2cea5bec4106b1f102a6e5', icon: "chevron-right" })));
|
|
5861
|
+
return (index.h(index.Host, { key: '26dea8cd6c77188eddec2e1b35dcf01d8ee458eb', hidden: this.totalPages < 2 }, index.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 && (index.h("div", { key: '1cfd5d883a640fc274fe5f6c8baec734e4479486', class: "mg-c-pagination__page-count" }, index.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 }), index.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))));
|
|
5710
5862
|
}
|
|
5711
5863
|
get element() { return index.getElement(this); }
|
|
5712
5864
|
static get watchers() { return {
|
|
@@ -5715,7 +5867,7 @@ const MgPagination = class {
|
|
|
5715
5867
|
"currentPage": ["validateCurrentPage"]
|
|
5716
5868
|
}; }
|
|
5717
5869
|
};
|
|
5718
|
-
MgPagination.style =
|
|
5870
|
+
MgPagination.style = mgPaginationCss;
|
|
5719
5871
|
|
|
5720
5872
|
/**
|
|
5721
5873
|
* Available expand toggle display options
|
|
@@ -5727,18 +5879,17 @@ const expandToggleDisplays = ['text', 'icon'];
|
|
|
5727
5879
|
const titlePositions = ['left', 'right'];
|
|
5728
5880
|
|
|
5729
5881
|
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}";
|
|
5730
|
-
const MgPanelStyle0 = mgPanelCss;
|
|
5731
5882
|
|
|
5732
5883
|
const MgPanel = class {
|
|
5733
5884
|
constructor(hostRef) {
|
|
5734
5885
|
index.registerInstance(this, hostRef);
|
|
5735
|
-
this.titleChange = index.createEvent(this, "title-change"
|
|
5736
|
-
this.expandedChange = index.createEvent(this, "expanded-change"
|
|
5886
|
+
this.titleChange = index.createEvent(this, "title-change");
|
|
5887
|
+
this.expandedChange = index.createEvent(this, "expanded-change");
|
|
5737
5888
|
/**
|
|
5738
5889
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
5739
5890
|
* If not set, it will be created.
|
|
5740
5891
|
*/
|
|
5741
|
-
this.identifier = index_es.
|
|
5892
|
+
this.identifier = index_es.xt('mg-panel');
|
|
5742
5893
|
/**
|
|
5743
5894
|
* Define if panel title is editable
|
|
5744
5895
|
*/
|
|
@@ -5746,7 +5897,7 @@ const MgPanel = class {
|
|
|
5746
5897
|
/**
|
|
5747
5898
|
* Define title position
|
|
5748
5899
|
*/
|
|
5749
|
-
this.titlePosition =
|
|
5900
|
+
this.titlePosition = 'left';
|
|
5750
5901
|
/**
|
|
5751
5902
|
* Panel is opened
|
|
5752
5903
|
*/
|
|
@@ -5754,11 +5905,15 @@ const MgPanel = class {
|
|
|
5754
5905
|
/**
|
|
5755
5906
|
* Define expand toggle button display
|
|
5756
5907
|
*/
|
|
5757
|
-
this.expandToggleDisplay =
|
|
5908
|
+
this.expandToggleDisplay = 'text';
|
|
5909
|
+
/**
|
|
5910
|
+
* Disable possibility to toggle expand
|
|
5911
|
+
*/
|
|
5912
|
+
this.expandToggleDisabled = false;
|
|
5758
5913
|
/**
|
|
5759
5914
|
* Component classes
|
|
5760
5915
|
*/
|
|
5761
|
-
this.classCollection = new index_es.
|
|
5916
|
+
this.classCollection = new index_es.kt(['mg-c-panel']);
|
|
5762
5917
|
/**
|
|
5763
5918
|
* Title is in edition mode
|
|
5764
5919
|
*/
|
|
@@ -5857,13 +6012,13 @@ const MgPanel = class {
|
|
|
5857
6012
|
};
|
|
5858
6013
|
}
|
|
5859
6014
|
watchIdentifier(newValue) {
|
|
5860
|
-
if (!index_es.
|
|
5861
|
-
console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
6015
|
+
if (!index_es.Ot(newValue)) {
|
|
6016
|
+
console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${index_es.zt(newValue)}.`);
|
|
5862
6017
|
}
|
|
5863
6018
|
}
|
|
5864
6019
|
validatePanelTitle(newValue) {
|
|
5865
|
-
if (!index_es.
|
|
5866
|
-
throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${index_es.
|
|
6020
|
+
if (!index_es.Le(newValue))
|
|
6021
|
+
throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${index_es.zt(newValue)}.`);
|
|
5867
6022
|
this.titleChange.emit(newValue);
|
|
5868
6023
|
}
|
|
5869
6024
|
validateTitlePattern(newValue) {
|
|
@@ -5872,14 +6027,14 @@ const MgPanel = class {
|
|
|
5872
6027
|
}
|
|
5873
6028
|
validateTitlePosition(newValue) {
|
|
5874
6029
|
if (!titlePositions.includes(newValue))
|
|
5875
|
-
throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${index_es.
|
|
6030
|
+
throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
5876
6031
|
}
|
|
5877
6032
|
handleExpanded(newValue) {
|
|
5878
6033
|
this.expandedChange.emit(newValue);
|
|
5879
6034
|
}
|
|
5880
6035
|
validateExpandToggleDisplay(newValue) {
|
|
5881
6036
|
if (!expandToggleDisplays.includes(newValue))
|
|
5882
|
-
throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${index_es.
|
|
6037
|
+
throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
5883
6038
|
if (newValue === 'icon' && this.titleEditable)
|
|
5884
6039
|
this.titleEditable = false;
|
|
5885
6040
|
}
|
|
@@ -5914,7 +6069,7 @@ const MgPanel = class {
|
|
|
5914
6069
|
*/
|
|
5915
6070
|
render() {
|
|
5916
6071
|
const headerId = `${this.identifier}-header`;
|
|
5917
|
-
return (index.h("section", { key: '
|
|
6072
|
+
return (index.h("section", { key: '82d79e85a6d6e376482b89fa9d03f5e381499dbc', class: this.classCollection.join(), id: this.identifier }, index.h("mg-card", { key: '6b1753575b2faece344d14d473ded961bc6ac7a1' }, index.h("header", { key: 'aae91889ab75aacfee1eb0b164fb60ee90d3be30', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), index.h("article", { key: 'eb2cc533c8181e962c21666d67cf920b2e17cdd6', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, index.h("slot", { key: '8a638a7194bd57a4b3f849401436e5a05160080a' })))));
|
|
5918
6073
|
}
|
|
5919
6074
|
get element() { return index.getElement(this); }
|
|
5920
6075
|
static get watchers() { return {
|
|
@@ -5927,16 +6082,13 @@ const MgPanel = class {
|
|
|
5927
6082
|
"expandToggleDisplay": ["validateExpandToggleDisplay"]
|
|
5928
6083
|
}; }
|
|
5929
6084
|
};
|
|
5930
|
-
MgPanel.style =
|
|
6085
|
+
MgPanel.style = mgPanelCss;
|
|
5931
6086
|
|
|
5932
6087
|
/**
|
|
5933
6088
|
* Custom positioning reference element.
|
|
5934
6089
|
* @see https://floating-ui.com/docs/virtual-elements
|
|
5935
6090
|
*/
|
|
5936
6091
|
|
|
5937
|
-
const sides$1 = ['top', 'right', 'bottom', 'left'];
|
|
5938
|
-
const alignments$1 = ['start', 'end'];
|
|
5939
|
-
const placements$1 = /*#__PURE__*/sides$1.reduce((acc, side) => acc.concat(side, side + "-" + alignments$1[0], side + "-" + alignments$1[1]), []);
|
|
5940
6092
|
const min = Math.min;
|
|
5941
6093
|
const max = Math.max;
|
|
5942
6094
|
const round = Math.round;
|
|
@@ -6360,109 +6512,6 @@ const arrow$1 = options => ({
|
|
|
6360
6512
|
}
|
|
6361
6513
|
});
|
|
6362
6514
|
|
|
6363
|
-
function getPlacementList(alignment, autoAlignment, allowedPlacements) {
|
|
6364
|
-
const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
|
|
6365
|
-
return allowedPlacementsSortedByAlignment.filter(placement => {
|
|
6366
|
-
if (alignment) {
|
|
6367
|
-
return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
|
|
6368
|
-
}
|
|
6369
|
-
return true;
|
|
6370
|
-
});
|
|
6371
|
-
}
|
|
6372
|
-
/**
|
|
6373
|
-
* Optimizes the visibility of the floating element by choosing the placement
|
|
6374
|
-
* that has the most space available automatically, without needing to specify a
|
|
6375
|
-
* preferred placement. Alternative to `flip`.
|
|
6376
|
-
* @see https://floating-ui.com/docs/autoPlacement
|
|
6377
|
-
*/
|
|
6378
|
-
const autoPlacement = function (options) {
|
|
6379
|
-
if (options === void 0) {
|
|
6380
|
-
options = {};
|
|
6381
|
-
}
|
|
6382
|
-
return {
|
|
6383
|
-
name: 'autoPlacement',
|
|
6384
|
-
options,
|
|
6385
|
-
async fn(state) {
|
|
6386
|
-
var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
|
|
6387
|
-
const {
|
|
6388
|
-
rects,
|
|
6389
|
-
middlewareData,
|
|
6390
|
-
placement,
|
|
6391
|
-
platform,
|
|
6392
|
-
elements
|
|
6393
|
-
} = state;
|
|
6394
|
-
const {
|
|
6395
|
-
crossAxis = false,
|
|
6396
|
-
alignment,
|
|
6397
|
-
allowedPlacements = placements$1,
|
|
6398
|
-
autoAlignment = true,
|
|
6399
|
-
...detectOverflowOptions
|
|
6400
|
-
} = evaluate(options, state);
|
|
6401
|
-
const placements$1$1 = alignment !== undefined || allowedPlacements === placements$1 ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
|
|
6402
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
6403
|
-
const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
|
|
6404
|
-
const currentPlacement = placements$1$1[currentIndex];
|
|
6405
|
-
if (currentPlacement == null) {
|
|
6406
|
-
return {};
|
|
6407
|
-
}
|
|
6408
|
-
const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
|
|
6409
|
-
|
|
6410
|
-
// Make `computeCoords` start from the right place.
|
|
6411
|
-
if (placement !== currentPlacement) {
|
|
6412
|
-
return {
|
|
6413
|
-
reset: {
|
|
6414
|
-
placement: placements$1$1[0]
|
|
6415
|
-
}
|
|
6416
|
-
};
|
|
6417
|
-
}
|
|
6418
|
-
const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
|
|
6419
|
-
const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
|
|
6420
|
-
placement: currentPlacement,
|
|
6421
|
-
overflows: currentOverflows
|
|
6422
|
-
}];
|
|
6423
|
-
const nextPlacement = placements$1$1[currentIndex + 1];
|
|
6424
|
-
|
|
6425
|
-
// There are more placements to check.
|
|
6426
|
-
if (nextPlacement) {
|
|
6427
|
-
return {
|
|
6428
|
-
data: {
|
|
6429
|
-
index: currentIndex + 1,
|
|
6430
|
-
overflows: allOverflows
|
|
6431
|
-
},
|
|
6432
|
-
reset: {
|
|
6433
|
-
placement: nextPlacement
|
|
6434
|
-
}
|
|
6435
|
-
};
|
|
6436
|
-
}
|
|
6437
|
-
const placementsSortedByMostSpace = allOverflows.map(d => {
|
|
6438
|
-
const alignment = getAlignment(d.placement);
|
|
6439
|
-
return [d.placement, alignment && crossAxis ?
|
|
6440
|
-
// Check along the mainAxis and main crossAxis side.
|
|
6441
|
-
d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
|
|
6442
|
-
// Check only the mainAxis.
|
|
6443
|
-
d.overflows[0], d.overflows];
|
|
6444
|
-
}).sort((a, b) => a[1] - b[1]);
|
|
6445
|
-
const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
|
|
6446
|
-
// Aligned placements should not check their opposite crossAxis
|
|
6447
|
-
// side.
|
|
6448
|
-
getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
|
|
6449
|
-
const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
|
|
6450
|
-
if (resetPlacement !== placement) {
|
|
6451
|
-
return {
|
|
6452
|
-
data: {
|
|
6453
|
-
index: currentIndex + 1,
|
|
6454
|
-
overflows: allOverflows
|
|
6455
|
-
},
|
|
6456
|
-
reset: {
|
|
6457
|
-
placement: resetPlacement
|
|
6458
|
-
}
|
|
6459
|
-
};
|
|
6460
|
-
}
|
|
6461
|
-
return {};
|
|
6462
|
-
}
|
|
6463
|
-
};
|
|
6464
|
-
};
|
|
6465
|
-
|
|
6466
6515
|
/**
|
|
6467
6516
|
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
6468
6517
|
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
@@ -6589,206 +6638,6 @@ const flip$1 = function (options) {
|
|
|
6589
6638
|
};
|
|
6590
6639
|
};
|
|
6591
6640
|
|
|
6592
|
-
function getSideOffsets(overflow, rect) {
|
|
6593
|
-
return {
|
|
6594
|
-
top: overflow.top - rect.height,
|
|
6595
|
-
right: overflow.right - rect.width,
|
|
6596
|
-
bottom: overflow.bottom - rect.height,
|
|
6597
|
-
left: overflow.left - rect.width
|
|
6598
|
-
};
|
|
6599
|
-
}
|
|
6600
|
-
function isAnySideFullyClipped(overflow) {
|
|
6601
|
-
return sides$1.some(side => overflow[side] >= 0);
|
|
6602
|
-
}
|
|
6603
|
-
/**
|
|
6604
|
-
* Provides data to hide the floating element in applicable situations, such as
|
|
6605
|
-
* when it is not in the same clipping context as the reference element.
|
|
6606
|
-
* @see https://floating-ui.com/docs/hide
|
|
6607
|
-
*/
|
|
6608
|
-
const hide = function (options) {
|
|
6609
|
-
if (options === void 0) {
|
|
6610
|
-
options = {};
|
|
6611
|
-
}
|
|
6612
|
-
return {
|
|
6613
|
-
name: 'hide',
|
|
6614
|
-
options,
|
|
6615
|
-
async fn(state) {
|
|
6616
|
-
const {
|
|
6617
|
-
rects
|
|
6618
|
-
} = state;
|
|
6619
|
-
const {
|
|
6620
|
-
strategy = 'referenceHidden',
|
|
6621
|
-
...detectOverflowOptions
|
|
6622
|
-
} = evaluate(options, state);
|
|
6623
|
-
switch (strategy) {
|
|
6624
|
-
case 'referenceHidden':
|
|
6625
|
-
{
|
|
6626
|
-
const overflow = await detectOverflow(state, {
|
|
6627
|
-
...detectOverflowOptions,
|
|
6628
|
-
elementContext: 'reference'
|
|
6629
|
-
});
|
|
6630
|
-
const offsets = getSideOffsets(overflow, rects.reference);
|
|
6631
|
-
return {
|
|
6632
|
-
data: {
|
|
6633
|
-
referenceHiddenOffsets: offsets,
|
|
6634
|
-
referenceHidden: isAnySideFullyClipped(offsets)
|
|
6635
|
-
}
|
|
6636
|
-
};
|
|
6637
|
-
}
|
|
6638
|
-
case 'escaped':
|
|
6639
|
-
{
|
|
6640
|
-
const overflow = await detectOverflow(state, {
|
|
6641
|
-
...detectOverflowOptions,
|
|
6642
|
-
altBoundary: true
|
|
6643
|
-
});
|
|
6644
|
-
const offsets = getSideOffsets(overflow, rects.floating);
|
|
6645
|
-
return {
|
|
6646
|
-
data: {
|
|
6647
|
-
escapedOffsets: offsets,
|
|
6648
|
-
escaped: isAnySideFullyClipped(offsets)
|
|
6649
|
-
}
|
|
6650
|
-
};
|
|
6651
|
-
}
|
|
6652
|
-
default:
|
|
6653
|
-
{
|
|
6654
|
-
return {};
|
|
6655
|
-
}
|
|
6656
|
-
}
|
|
6657
|
-
}
|
|
6658
|
-
};
|
|
6659
|
-
};
|
|
6660
|
-
|
|
6661
|
-
function getBoundingRect(rects) {
|
|
6662
|
-
const minX = min(...rects.map(rect => rect.left));
|
|
6663
|
-
const minY = min(...rects.map(rect => rect.top));
|
|
6664
|
-
const maxX = max(...rects.map(rect => rect.right));
|
|
6665
|
-
const maxY = max(...rects.map(rect => rect.bottom));
|
|
6666
|
-
return {
|
|
6667
|
-
x: minX,
|
|
6668
|
-
y: minY,
|
|
6669
|
-
width: maxX - minX,
|
|
6670
|
-
height: maxY - minY
|
|
6671
|
-
};
|
|
6672
|
-
}
|
|
6673
|
-
function getRectsByLine(rects) {
|
|
6674
|
-
const sortedRects = rects.slice().sort((a, b) => a.y - b.y);
|
|
6675
|
-
const groups = [];
|
|
6676
|
-
let prevRect = null;
|
|
6677
|
-
for (let i = 0; i < sortedRects.length; i++) {
|
|
6678
|
-
const rect = sortedRects[i];
|
|
6679
|
-
if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {
|
|
6680
|
-
groups.push([rect]);
|
|
6681
|
-
} else {
|
|
6682
|
-
groups[groups.length - 1].push(rect);
|
|
6683
|
-
}
|
|
6684
|
-
prevRect = rect;
|
|
6685
|
-
}
|
|
6686
|
-
return groups.map(rect => rectToClientRect(getBoundingRect(rect)));
|
|
6687
|
-
}
|
|
6688
|
-
/**
|
|
6689
|
-
* Provides improved positioning for inline reference elements that can span
|
|
6690
|
-
* over multiple lines, such as hyperlinks or range selections.
|
|
6691
|
-
* @see https://floating-ui.com/docs/inline
|
|
6692
|
-
*/
|
|
6693
|
-
const inline = function (options) {
|
|
6694
|
-
if (options === void 0) {
|
|
6695
|
-
options = {};
|
|
6696
|
-
}
|
|
6697
|
-
return {
|
|
6698
|
-
name: 'inline',
|
|
6699
|
-
options,
|
|
6700
|
-
async fn(state) {
|
|
6701
|
-
const {
|
|
6702
|
-
placement,
|
|
6703
|
-
elements,
|
|
6704
|
-
rects,
|
|
6705
|
-
platform,
|
|
6706
|
-
strategy
|
|
6707
|
-
} = state;
|
|
6708
|
-
// A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
|
|
6709
|
-
// ClientRect's bounds, despite the event listener being triggered. A
|
|
6710
|
-
// padding of 2 seems to handle this issue.
|
|
6711
|
-
const {
|
|
6712
|
-
padding = 2,
|
|
6713
|
-
x,
|
|
6714
|
-
y
|
|
6715
|
-
} = evaluate(options, state);
|
|
6716
|
-
const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);
|
|
6717
|
-
const clientRects = getRectsByLine(nativeClientRects);
|
|
6718
|
-
const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
|
|
6719
|
-
const paddingObject = getPaddingObject(padding);
|
|
6720
|
-
function getBoundingClientRect() {
|
|
6721
|
-
// There are two rects and they are disjoined.
|
|
6722
|
-
if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
|
|
6723
|
-
// Find the first rect in which the point is fully inside.
|
|
6724
|
-
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;
|
|
6725
|
-
}
|
|
6726
|
-
|
|
6727
|
-
// There are 2 or more connected rects.
|
|
6728
|
-
if (clientRects.length >= 2) {
|
|
6729
|
-
if (getSideAxis(placement) === 'y') {
|
|
6730
|
-
const firstRect = clientRects[0];
|
|
6731
|
-
const lastRect = clientRects[clientRects.length - 1];
|
|
6732
|
-
const isTop = getSide(placement) === 'top';
|
|
6733
|
-
const top = firstRect.top;
|
|
6734
|
-
const bottom = lastRect.bottom;
|
|
6735
|
-
const left = isTop ? firstRect.left : lastRect.left;
|
|
6736
|
-
const right = isTop ? firstRect.right : lastRect.right;
|
|
6737
|
-
const width = right - left;
|
|
6738
|
-
const height = bottom - top;
|
|
6739
|
-
return {
|
|
6740
|
-
top,
|
|
6741
|
-
bottom,
|
|
6742
|
-
left,
|
|
6743
|
-
right,
|
|
6744
|
-
width,
|
|
6745
|
-
height,
|
|
6746
|
-
x: left,
|
|
6747
|
-
y: top
|
|
6748
|
-
};
|
|
6749
|
-
}
|
|
6750
|
-
const isLeftSide = getSide(placement) === 'left';
|
|
6751
|
-
const maxRight = max(...clientRects.map(rect => rect.right));
|
|
6752
|
-
const minLeft = min(...clientRects.map(rect => rect.left));
|
|
6753
|
-
const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
|
|
6754
|
-
const top = measureRects[0].top;
|
|
6755
|
-
const bottom = measureRects[measureRects.length - 1].bottom;
|
|
6756
|
-
const left = minLeft;
|
|
6757
|
-
const right = maxRight;
|
|
6758
|
-
const width = right - left;
|
|
6759
|
-
const height = bottom - top;
|
|
6760
|
-
return {
|
|
6761
|
-
top,
|
|
6762
|
-
bottom,
|
|
6763
|
-
left,
|
|
6764
|
-
right,
|
|
6765
|
-
width,
|
|
6766
|
-
height,
|
|
6767
|
-
x: left,
|
|
6768
|
-
y: top
|
|
6769
|
-
};
|
|
6770
|
-
}
|
|
6771
|
-
return fallback;
|
|
6772
|
-
}
|
|
6773
|
-
const resetRects = await platform.getElementRects({
|
|
6774
|
-
reference: {
|
|
6775
|
-
getBoundingClientRect
|
|
6776
|
-
},
|
|
6777
|
-
floating: elements.floating,
|
|
6778
|
-
strategy
|
|
6779
|
-
});
|
|
6780
|
-
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) {
|
|
6781
|
-
return {
|
|
6782
|
-
reset: {
|
|
6783
|
-
rects: resetRects
|
|
6784
|
-
}
|
|
6785
|
-
};
|
|
6786
|
-
}
|
|
6787
|
-
return {};
|
|
6788
|
-
}
|
|
6789
|
-
};
|
|
6790
|
-
};
|
|
6791
|
-
|
|
6792
6641
|
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
6793
6642
|
// Derivable.
|
|
6794
6643
|
|
|
@@ -7019,90 +6868,6 @@ const limitShift$1 = function (options) {
|
|
|
7019
6868
|
};
|
|
7020
6869
|
};
|
|
7021
6870
|
|
|
7022
|
-
/**
|
|
7023
|
-
* Provides data that allows you to change the size of the floating element —
|
|
7024
|
-
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
7025
|
-
* width of the reference element.
|
|
7026
|
-
* @see https://floating-ui.com/docs/size
|
|
7027
|
-
*/
|
|
7028
|
-
const size = function (options) {
|
|
7029
|
-
if (options === void 0) {
|
|
7030
|
-
options = {};
|
|
7031
|
-
}
|
|
7032
|
-
return {
|
|
7033
|
-
name: 'size',
|
|
7034
|
-
options,
|
|
7035
|
-
async fn(state) {
|
|
7036
|
-
var _state$middlewareData, _state$middlewareData2;
|
|
7037
|
-
const {
|
|
7038
|
-
placement,
|
|
7039
|
-
rects,
|
|
7040
|
-
platform,
|
|
7041
|
-
elements
|
|
7042
|
-
} = state;
|
|
7043
|
-
const {
|
|
7044
|
-
apply = () => {},
|
|
7045
|
-
...detectOverflowOptions
|
|
7046
|
-
} = evaluate(options, state);
|
|
7047
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
7048
|
-
const side = getSide(placement);
|
|
7049
|
-
const alignment = getAlignment(placement);
|
|
7050
|
-
const isYAxis = getSideAxis(placement) === 'y';
|
|
7051
|
-
const {
|
|
7052
|
-
width,
|
|
7053
|
-
height
|
|
7054
|
-
} = rects.floating;
|
|
7055
|
-
let heightSide;
|
|
7056
|
-
let widthSide;
|
|
7057
|
-
if (side === 'top' || side === 'bottom') {
|
|
7058
|
-
heightSide = side;
|
|
7059
|
-
widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
|
|
7060
|
-
} else {
|
|
7061
|
-
widthSide = side;
|
|
7062
|
-
heightSide = alignment === 'end' ? 'top' : 'bottom';
|
|
7063
|
-
}
|
|
7064
|
-
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
7065
|
-
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
7066
|
-
const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
|
|
7067
|
-
const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
|
|
7068
|
-
const noShift = !state.middlewareData.shift;
|
|
7069
|
-
let availableHeight = overflowAvailableHeight;
|
|
7070
|
-
let availableWidth = overflowAvailableWidth;
|
|
7071
|
-
if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
|
|
7072
|
-
availableWidth = maximumClippingWidth;
|
|
7073
|
-
}
|
|
7074
|
-
if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
|
|
7075
|
-
availableHeight = maximumClippingHeight;
|
|
7076
|
-
}
|
|
7077
|
-
if (noShift && !alignment) {
|
|
7078
|
-
const xMin = max(overflow.left, 0);
|
|
7079
|
-
const xMax = max(overflow.right, 0);
|
|
7080
|
-
const yMin = max(overflow.top, 0);
|
|
7081
|
-
const yMax = max(overflow.bottom, 0);
|
|
7082
|
-
if (isYAxis) {
|
|
7083
|
-
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
|
|
7084
|
-
} else {
|
|
7085
|
-
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
|
|
7086
|
-
}
|
|
7087
|
-
}
|
|
7088
|
-
await apply({
|
|
7089
|
-
...state,
|
|
7090
|
-
availableWidth,
|
|
7091
|
-
availableHeight
|
|
7092
|
-
});
|
|
7093
|
-
const nextDimensions = await platform.getDimensions(elements.floating);
|
|
7094
|
-
if (width !== nextDimensions.width || height !== nextDimensions.height) {
|
|
7095
|
-
return {
|
|
7096
|
-
reset: {
|
|
7097
|
-
rects: true
|
|
7098
|
-
}
|
|
7099
|
-
};
|
|
7100
|
-
}
|
|
7101
|
-
return {};
|
|
7102
|
-
}
|
|
7103
|
-
};
|
|
7104
|
-
};
|
|
7105
|
-
|
|
7106
6871
|
function hasWindow() {
|
|
7107
6872
|
return typeof window !== 'undefined';
|
|
7108
6873
|
}
|
|
@@ -7912,14 +7677,6 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
7912
7677
|
*/
|
|
7913
7678
|
const offset = offset$1;
|
|
7914
7679
|
|
|
7915
|
-
/**
|
|
7916
|
-
* Optimizes the visibility of the floating element by choosing the placement
|
|
7917
|
-
* that has the most space available automatically, without needing to specify a
|
|
7918
|
-
* preferred placement. Alternative to `flip`.
|
|
7919
|
-
* @see https://floating-ui.com/docs/autoPlacement
|
|
7920
|
-
*/
|
|
7921
|
-
autoPlacement;
|
|
7922
|
-
|
|
7923
7680
|
/**
|
|
7924
7681
|
* Optimizes the visibility of the floating element by shifting it in order to
|
|
7925
7682
|
* keep it in view when it will overflow the clipping boundary.
|
|
@@ -7935,21 +7692,6 @@ const shift = shift$1;
|
|
|
7935
7692
|
*/
|
|
7936
7693
|
const flip = flip$1;
|
|
7937
7694
|
|
|
7938
|
-
/**
|
|
7939
|
-
* Provides data that allows you to change the size of the floating element —
|
|
7940
|
-
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
7941
|
-
* width of the reference element.
|
|
7942
|
-
* @see https://floating-ui.com/docs/size
|
|
7943
|
-
*/
|
|
7944
|
-
size;
|
|
7945
|
-
|
|
7946
|
-
/**
|
|
7947
|
-
* Provides data to hide the floating element in applicable situations, such as
|
|
7948
|
-
* when it is not in the same clipping context as the reference element.
|
|
7949
|
-
* @see https://floating-ui.com/docs/hide
|
|
7950
|
-
*/
|
|
7951
|
-
hide;
|
|
7952
|
-
|
|
7953
7695
|
/**
|
|
7954
7696
|
* Provides data to position an inner element of the floating element so that it
|
|
7955
7697
|
* appears centered to the reference element.
|
|
@@ -7957,13 +7699,6 @@ hide;
|
|
|
7957
7699
|
*/
|
|
7958
7700
|
const arrow = arrow$1;
|
|
7959
7701
|
|
|
7960
|
-
/**
|
|
7961
|
-
* Provides improved positioning for inline reference elements that can span
|
|
7962
|
-
* over multiple lines, such as hyperlinks or range selections.
|
|
7963
|
-
* @see https://floating-ui.com/docs/inline
|
|
7964
|
-
*/
|
|
7965
|
-
inline;
|
|
7966
|
-
|
|
7967
7702
|
/**
|
|
7968
7703
|
* Built-in `limiter` that will stop `shift()` at a certain point.
|
|
7969
7704
|
*/
|
|
@@ -8023,18 +7758,17 @@ const isFloatingUIPlacement = (placement) => placements.filter(p => !p.includes(
|
|
|
8023
7758
|
const alignments = ['start', null, 'end'];
|
|
8024
7759
|
|
|
8025
7760
|
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}";
|
|
8026
|
-
const MgPopoverStyle0 = mgPopoverCss;
|
|
8027
7761
|
|
|
8028
7762
|
const MgPopover = class {
|
|
8029
7763
|
constructor(hostRef) {
|
|
8030
7764
|
index.registerInstance(this, hostRef);
|
|
8031
|
-
this.displayChange = index.createEvent(this, "display-change"
|
|
8032
|
-
this.componentClose = index.createEvent(this, "component-close"
|
|
7765
|
+
this.displayChange = index.createEvent(this, "display-change");
|
|
7766
|
+
this.componentClose = index.createEvent(this, "component-close");
|
|
8033
7767
|
/**
|
|
8034
7768
|
* Sets an `id` attribute.
|
|
8035
7769
|
* Needed by the input for accessibility `aria-decribedby`.
|
|
8036
7770
|
*/
|
|
8037
|
-
this.identifier = index_es.
|
|
7771
|
+
this.identifier = index_es.xt('mg-popover');
|
|
8038
7772
|
/**
|
|
8039
7773
|
* Popover placement
|
|
8040
7774
|
*/
|
|
@@ -8229,8 +7963,8 @@ const MgPopover = class {
|
|
|
8229
7963
|
};
|
|
8230
7964
|
}
|
|
8231
7965
|
validateIdentifier(newValue) {
|
|
8232
|
-
if (!index_es.
|
|
8233
|
-
throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
7966
|
+
if (!index_es.Ot(newValue)) {
|
|
7967
|
+
throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${index_es.zt(newValue)}.`);
|
|
8234
7968
|
}
|
|
8235
7969
|
// use renderPopoverContent to update popover-content id
|
|
8236
7970
|
this.renderPopoverContent();
|
|
@@ -8271,7 +8005,7 @@ const MgPopover = class {
|
|
|
8271
8005
|
*/
|
|
8272
8006
|
componentWillLoad() {
|
|
8273
8007
|
// Get windows to attach events
|
|
8274
|
-
this.windows = index_es.
|
|
8008
|
+
this.windows = index_es.Rt(window);
|
|
8275
8009
|
// render mg-popover-content slot
|
|
8276
8010
|
this.renderPopoverContent();
|
|
8277
8011
|
this.validateCloseButton(this.closeButton);
|
|
@@ -8336,7 +8070,7 @@ const MgPopover = class {
|
|
|
8336
8070
|
* @returns HTML Element
|
|
8337
8071
|
*/
|
|
8338
8072
|
render() {
|
|
8339
|
-
return (index.h(index.Host, { key: '
|
|
8073
|
+
return (index.h(index.Host, { key: 'a2c883c6f1458bfc76d77d944afe99210d0ecdb3' }, index.h("slot", { key: 'c3d2e25f47c5761be6594cb6cd487e4960e5d30b' }), index.h("slot", { key: '93bb53d3eac2c2b966eacb00b772faa403b5a86c', name: "content" })));
|
|
8340
8074
|
}
|
|
8341
8075
|
get element() { return index.getElement(this); }
|
|
8342
8076
|
static get watchers() { return {
|
|
@@ -8347,15 +8081,14 @@ const MgPopover = class {
|
|
|
8347
8081
|
"display": ["handleDisplay"]
|
|
8348
8082
|
}; }
|
|
8349
8083
|
};
|
|
8350
|
-
MgPopover.style =
|
|
8084
|
+
MgPopover.style = mgPopoverCss;
|
|
8351
8085
|
|
|
8352
8086
|
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)}";
|
|
8353
|
-
const MgPopoverContentStyle0 = mgPopoverContentCss;
|
|
8354
8087
|
|
|
8355
8088
|
const MgPopoverContent = class {
|
|
8356
8089
|
constructor(hostRef) {
|
|
8357
8090
|
index.registerInstance(this, hostRef);
|
|
8358
|
-
this.hideContent = index.createEvent(this, "hide-content"
|
|
8091
|
+
this.hideContent = index.createEvent(this, "hide-content");
|
|
8359
8092
|
/**
|
|
8360
8093
|
* Define if popover has a cross button
|
|
8361
8094
|
*/
|
|
@@ -8363,7 +8096,7 @@ const MgPopoverContent = class {
|
|
|
8363
8096
|
/**
|
|
8364
8097
|
* Component classes
|
|
8365
8098
|
*/
|
|
8366
|
-
this.classCollection = new index_es.
|
|
8099
|
+
this.classCollection = new index_es.kt(['mg-c-popover-content']);
|
|
8367
8100
|
/**
|
|
8368
8101
|
* Handle action for close button
|
|
8369
8102
|
*/
|
|
@@ -8387,7 +8120,7 @@ const MgPopoverContent = class {
|
|
|
8387
8120
|
componentDidLoad() {
|
|
8388
8121
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
8389
8122
|
const slottedTitleElement = this.element.querySelector('[slot="title"]');
|
|
8390
|
-
if (slottedTitleElement && !index_es.
|
|
8123
|
+
if (slottedTitleElement && !index_es.Tt(slottedTitleElement, headingTags)) {
|
|
8391
8124
|
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);
|
|
8392
8125
|
}
|
|
8393
8126
|
}
|
|
@@ -8400,15 +8133,14 @@ const MgPopoverContent = class {
|
|
|
8400
8133
|
}
|
|
8401
8134
|
get element() { return index.getElement(this); }
|
|
8402
8135
|
};
|
|
8403
|
-
MgPopoverContent.style =
|
|
8136
|
+
MgPopoverContent.style = mgPopoverContentCss;
|
|
8404
8137
|
|
|
8405
8138
|
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%)}";
|
|
8406
|
-
const MgSkipLinksStyle0 = mgSkipLinksCss;
|
|
8407
8139
|
|
|
8408
8140
|
const MgSkipLinks = class {
|
|
8409
8141
|
constructor(hostRef) {
|
|
8410
8142
|
index.registerInstance(this, hostRef);
|
|
8411
|
-
this.goToAnchor = index.createEvent(this, "go-to-anchor"
|
|
8143
|
+
this.goToAnchor = index.createEvent(this, "go-to-anchor");
|
|
8412
8144
|
/***********
|
|
8413
8145
|
* Methods *
|
|
8414
8146
|
**********/
|
|
@@ -8422,7 +8154,7 @@ const MgSkipLinks = class {
|
|
|
8422
8154
|
};
|
|
8423
8155
|
}
|
|
8424
8156
|
validateLinks(links) {
|
|
8425
|
-
if (links === undefined || links.length === 0 || links.some(link => !index_es.
|
|
8157
|
+
if (links === undefined || links.length === 0 || links.some(link => !index_es.Le(link.href) || !link.href.startsWith('#') || !index_es.Le(link.label))) {
|
|
8426
8158
|
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.`);
|
|
8427
8159
|
}
|
|
8428
8160
|
}
|
|
@@ -8448,7 +8180,285 @@ const MgSkipLinks = class {
|
|
|
8448
8180
|
"links": ["validateLinks"]
|
|
8449
8181
|
}; }
|
|
8450
8182
|
};
|
|
8451
|
-
MgSkipLinks.style =
|
|
8183
|
+
MgSkipLinks.style = mgSkipLinksCss;
|
|
8184
|
+
|
|
8185
|
+
/**
|
|
8186
|
+
* Sizes
|
|
8187
|
+
*/
|
|
8188
|
+
// Define possible sizes
|
|
8189
|
+
const sizes$1 = ['small', 'medium', 'large', 'xlarge'];
|
|
8190
|
+
/**
|
|
8191
|
+
* Columns
|
|
8192
|
+
*/
|
|
8193
|
+
// Define possible text alignments
|
|
8194
|
+
const textAlignments = ['left', 'center', 'right'];
|
|
8195
|
+
// Define possible data types
|
|
8196
|
+
const dataTypes = ['string', 'numeric', 'date'];
|
|
8197
|
+
|
|
8198
|
+
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%)}";
|
|
8199
|
+
|
|
8200
|
+
/**
|
|
8201
|
+
* Check if value is a valid align object
|
|
8202
|
+
* @param newValue - New value
|
|
8203
|
+
* @returns True if value is a valid align object
|
|
8204
|
+
*/
|
|
8205
|
+
const isValidColumnsObject = (newValue) =>
|
|
8206
|
+
// ensure newValue is an object
|
|
8207
|
+
typeof newValue === 'object' &&
|
|
8208
|
+
!Array.isArray(newValue) &&
|
|
8209
|
+
// Ensure every property is well formatted
|
|
8210
|
+
Object.entries(newValue).every(([key, value]) =>
|
|
8211
|
+
// ensure key is a number
|
|
8212
|
+
!isNaN(parseInt(key)) &&
|
|
8213
|
+
// ensure value is an object
|
|
8214
|
+
typeof value === 'object' &&
|
|
8215
|
+
!Array.isArray(value) &&
|
|
8216
|
+
// ensure value has at least one of the following properties
|
|
8217
|
+
((value.align !== undefined && textAlignments.includes(value.align)) ||
|
|
8218
|
+
(value.sortable !== undefined && typeof value.sortable === 'boolean') ||
|
|
8219
|
+
(value.datatype !== undefined && dataTypes.includes(value.datatype))) &&
|
|
8220
|
+
// ensure no extra properties are present
|
|
8221
|
+
Object.keys(value).every(key => ['align', 'sortable', 'datatype'].includes(key)));
|
|
8222
|
+
/**
|
|
8223
|
+
* Compare values
|
|
8224
|
+
* @param firstValue - First value
|
|
8225
|
+
* @param secondValue - Second value
|
|
8226
|
+
* @param descending - Define descending order
|
|
8227
|
+
* @param datatype - Data type
|
|
8228
|
+
* @returns Comparison result
|
|
8229
|
+
* @example
|
|
8230
|
+
* compareValues('a', 'b', false, 'string'); // -1
|
|
8231
|
+
*/
|
|
8232
|
+
const compareValues = (firstValue, secondValue, descending, datatype) => {
|
|
8233
|
+
if (descending) {
|
|
8234
|
+
const temp = firstValue;
|
|
8235
|
+
firstValue = secondValue;
|
|
8236
|
+
secondValue = temp;
|
|
8237
|
+
}
|
|
8238
|
+
if (datatype === 'date') {
|
|
8239
|
+
return new Date(firstValue).getTime() - new Date(secondValue).getTime();
|
|
8240
|
+
}
|
|
8241
|
+
return firstValue.localeCompare(secondValue, undefined, { numeric: datatype === 'numeric' });
|
|
8242
|
+
};
|
|
8243
|
+
const MgTable = class {
|
|
8244
|
+
constructor(hostRef) {
|
|
8245
|
+
index.registerInstance(this, hostRef);
|
|
8246
|
+
// Classes
|
|
8247
|
+
this.componentClass = 'mg-c-table';
|
|
8248
|
+
this.componentWrapperClass = 'mg-c-table-wrapper';
|
|
8249
|
+
this.classFullWidth = 'mg-c-table--full-width';
|
|
8250
|
+
// Alignment stylesheet
|
|
8251
|
+
this.alignmentStylesheet = new CSSStyleSheet();
|
|
8252
|
+
/**
|
|
8253
|
+
* Define table size
|
|
8254
|
+
*/
|
|
8255
|
+
this.size = 'medium';
|
|
8256
|
+
/**
|
|
8257
|
+
* Define if table fits its parent element
|
|
8258
|
+
*/
|
|
8259
|
+
this.fullWidth = false;
|
|
8260
|
+
/**
|
|
8261
|
+
* Class collection
|
|
8262
|
+
*/
|
|
8263
|
+
this.classCollection = new index_es.kt([this.componentClass]);
|
|
8264
|
+
}
|
|
8265
|
+
watchSize(newValue, oldValue) {
|
|
8266
|
+
if (!sizes$1.includes(newValue)) {
|
|
8267
|
+
throw new Error(`<mg-table> prop "size" must be one of: ${sizes$1.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
8268
|
+
}
|
|
8269
|
+
else {
|
|
8270
|
+
if (oldValue !== undefined) {
|
|
8271
|
+
this.classCollection.delete(`mg-c-table--size-${oldValue}`);
|
|
8272
|
+
}
|
|
8273
|
+
this.classCollection.add(`mg-c-table--size-${newValue}`);
|
|
8274
|
+
}
|
|
8275
|
+
}
|
|
8276
|
+
watchFullWidth(newValue) {
|
|
8277
|
+
if (newValue) {
|
|
8278
|
+
this.classCollection.add(this.classFullWidth);
|
|
8279
|
+
}
|
|
8280
|
+
else {
|
|
8281
|
+
this.classCollection.delete(this.classFullWidth);
|
|
8282
|
+
}
|
|
8283
|
+
}
|
|
8284
|
+
watchColumns(newValue) {
|
|
8285
|
+
if (newValue !== undefined && !isValidColumnsObject(newValue)) {
|
|
8286
|
+
throw new Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${index_es.zt(newValue)}.`);
|
|
8287
|
+
}
|
|
8288
|
+
}
|
|
8289
|
+
/**
|
|
8290
|
+
* Render Table
|
|
8291
|
+
* @param table - Table element
|
|
8292
|
+
*/
|
|
8293
|
+
renderTable(table) {
|
|
8294
|
+
let isSortable = false;
|
|
8295
|
+
// Remove table classes
|
|
8296
|
+
table.className = '';
|
|
8297
|
+
// Add table classes
|
|
8298
|
+
table.classList.add(...this.classCollection.classes);
|
|
8299
|
+
// Set columns based on columns prop
|
|
8300
|
+
if (this.columns !== undefined) {
|
|
8301
|
+
// Store original rows
|
|
8302
|
+
const rowsDefault = Array.from(table.querySelectorAll('tbody tr'));
|
|
8303
|
+
// Apply columns settings
|
|
8304
|
+
Object.entries(this.columns).forEach(([key, value]) => {
|
|
8305
|
+
// Add alignment to stylesheet
|
|
8306
|
+
if (value.align !== undefined) {
|
|
8307
|
+
this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:${value.align}}}`);
|
|
8308
|
+
}
|
|
8309
|
+
// if align is not defined and datatype is number, align right
|
|
8310
|
+
else if (value.datatype === 'numeric') {
|
|
8311
|
+
this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:right}}`);
|
|
8312
|
+
}
|
|
8313
|
+
// Define if column is sortable
|
|
8314
|
+
if (value.sortable) {
|
|
8315
|
+
isSortable = true;
|
|
8316
|
+
// Add sortable class to table header
|
|
8317
|
+
const sortableHeader = table.querySelector(`thead td:nth-child(${key}),thead th:nth-child(${key})`);
|
|
8318
|
+
// Create button
|
|
8319
|
+
const button = document.createElement('button');
|
|
8320
|
+
button.classList.add('mg-c-table__sort-button');
|
|
8321
|
+
// Append button to header
|
|
8322
|
+
const sortableHeaderContent = sortableHeader.innerHTML;
|
|
8323
|
+
sortableHeader.innerHTML = '';
|
|
8324
|
+
button.innerHTML = sortableHeaderContent;
|
|
8325
|
+
// Set icon
|
|
8326
|
+
const icon = document.createElement('mg-icon');
|
|
8327
|
+
icon.setAttribute('icon', 'arrows-up-down');
|
|
8328
|
+
// Append icon to button
|
|
8329
|
+
button.append(icon);
|
|
8330
|
+
sortableHeader.append(button);
|
|
8331
|
+
// Add event listener
|
|
8332
|
+
button.addEventListener('click', () => {
|
|
8333
|
+
// Reset aria pressed
|
|
8334
|
+
table.querySelectorAll(`thead td:not(:nth-child(${key})) [aria-pressed],thead th:not(:nth-child(${key})) [aria-pressed]`).forEach(ariaPressed => {
|
|
8335
|
+
ariaPressed.removeAttribute('aria-pressed');
|
|
8336
|
+
ariaPressed.querySelector('mg-icon').setAttribute('icon', 'arrows-up-down');
|
|
8337
|
+
});
|
|
8338
|
+
// Reset aria sort
|
|
8339
|
+
table.querySelectorAll(`thead td:not(:nth-child(${key}))[aria-sort],thead th:not(:nth-child(${key}))[aria-sort]`).forEach(ariaSort => {
|
|
8340
|
+
ariaSort.removeAttribute('aria-sort');
|
|
8341
|
+
});
|
|
8342
|
+
// Set aria pressed
|
|
8343
|
+
button.setAttribute('aria-pressed', 'true');
|
|
8344
|
+
// Manage sort order
|
|
8345
|
+
// Get sort order
|
|
8346
|
+
let sortOrder = sortableHeader.getAttribute('aria-sort');
|
|
8347
|
+
// First click sort asc
|
|
8348
|
+
if ([null, 'none'].includes(sortOrder)) {
|
|
8349
|
+
sortableHeader.setAttribute('aria-sort', 'ascending');
|
|
8350
|
+
}
|
|
8351
|
+
// Second click sort desc
|
|
8352
|
+
else if (sortOrder === 'ascending') {
|
|
8353
|
+
sortableHeader.setAttribute('aria-sort', 'descending');
|
|
8354
|
+
}
|
|
8355
|
+
// Third click remove sort
|
|
8356
|
+
else {
|
|
8357
|
+
sortableHeader.setAttribute('aria-sort', 'none');
|
|
8358
|
+
}
|
|
8359
|
+
// Update sort order
|
|
8360
|
+
sortOrder = sortableHeader.getAttribute('aria-sort');
|
|
8361
|
+
// Update button icon
|
|
8362
|
+
const icon = button.querySelector('mg-icon');
|
|
8363
|
+
let iconType = 'arrows-up-down';
|
|
8364
|
+
if (sortOrder === 'ascending') {
|
|
8365
|
+
iconType = 'arrow-up';
|
|
8366
|
+
}
|
|
8367
|
+
else if (sortOrder === 'descending') {
|
|
8368
|
+
iconType = 'arrow-down';
|
|
8369
|
+
}
|
|
8370
|
+
icon.setAttribute('icon', iconType);
|
|
8371
|
+
// If sort order is none, return to original order
|
|
8372
|
+
if (sortOrder === 'none') {
|
|
8373
|
+
// Append rows to table
|
|
8374
|
+
rowsDefault.forEach(row => table.querySelector('tbody').append(row));
|
|
8375
|
+
return;
|
|
8376
|
+
}
|
|
8377
|
+
// Set a copy of rows
|
|
8378
|
+
const rows = Array.from(table.querySelectorAll('tbody tr'));
|
|
8379
|
+
// Sort rows
|
|
8380
|
+
rows.sort((a, b) => {
|
|
8381
|
+
var _a, _b;
|
|
8382
|
+
// Get cells
|
|
8383
|
+
const cellA = a.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);
|
|
8384
|
+
const cellB = b.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);
|
|
8385
|
+
// Get cell values
|
|
8386
|
+
const cellValueA = (_a = cellA.dataset.sort) !== null && _a !== void 0 ? _a : cellA.textContent;
|
|
8387
|
+
const cellValueB = (_b = cellB.dataset.sort) !== null && _b !== void 0 ? _b : cellB.textContent;
|
|
8388
|
+
// Sort cells based on sort order
|
|
8389
|
+
return compareValues(cellValueA, cellValueB, sortOrder === 'descending', value.datatype);
|
|
8390
|
+
});
|
|
8391
|
+
// Append rows to table
|
|
8392
|
+
rows.forEach(row => table.querySelector('tbody').append(row));
|
|
8393
|
+
});
|
|
8394
|
+
}
|
|
8395
|
+
});
|
|
8396
|
+
}
|
|
8397
|
+
// Add alignment to columns
|
|
8398
|
+
this.element.shadowRoot.adoptedStyleSheets = [...this.element.shadowRoot.adoptedStyleSheets, this.alignmentStylesheet];
|
|
8399
|
+
// Create div wrapper for responsive behavior
|
|
8400
|
+
const divWrapper = document.createElement('div');
|
|
8401
|
+
divWrapper.setAttribute('class', this.componentWrapperClass);
|
|
8402
|
+
divWrapper.setAttribute('tabindex', '0');
|
|
8403
|
+
divWrapper.setAttribute('role', 'region');
|
|
8404
|
+
// Get table title
|
|
8405
|
+
let captionTable = table.querySelector('caption');
|
|
8406
|
+
// If table is sortable we must add a caption
|
|
8407
|
+
if (captionTable === null && isSortable) {
|
|
8408
|
+
captionTable = document.createElement('caption');
|
|
8409
|
+
table.prepend(captionTable);
|
|
8410
|
+
}
|
|
8411
|
+
if (captionTable !== null) {
|
|
8412
|
+
// Ensure caption is not visible (otherwhise the table does not have rounded corners)
|
|
8413
|
+
captionTable.className = 'mg-u-visually-hidden';
|
|
8414
|
+
// Link caption to div
|
|
8415
|
+
if (!index_es.Le(captionTable.id)) {
|
|
8416
|
+
captionTable.setAttribute('id', index_es.xt(`${this.componentClass}-caption`));
|
|
8417
|
+
}
|
|
8418
|
+
divWrapper.setAttribute('aria-labelledby', captionTable.id);
|
|
8419
|
+
// Add sortable caption if neeeded
|
|
8420
|
+
if (isSortable) {
|
|
8421
|
+
captionTable.innerHTML = `${captionTable.innerHTML} ${this.messages.table.sortableCaption}`.trim();
|
|
8422
|
+
}
|
|
8423
|
+
}
|
|
8424
|
+
divWrapper.append(table);
|
|
8425
|
+
// Remove existing table from shadow root
|
|
8426
|
+
const existingTable = this.element.shadowRoot.querySelector(`.${this.componentWrapperClass}`);
|
|
8427
|
+
if (existingTable !== null) {
|
|
8428
|
+
existingTable.remove();
|
|
8429
|
+
}
|
|
8430
|
+
// Append table
|
|
8431
|
+
this.element.shadowRoot.append(divWrapper);
|
|
8432
|
+
}
|
|
8433
|
+
/*************
|
|
8434
|
+
* Lifecycle *
|
|
8435
|
+
*************/
|
|
8436
|
+
componentWillLoad() {
|
|
8437
|
+
this.messages = index$1.initLocales(this.element).messages;
|
|
8438
|
+
}
|
|
8439
|
+
/**
|
|
8440
|
+
* Set variables and validate props
|
|
8441
|
+
*/
|
|
8442
|
+
componentDidLoad() {
|
|
8443
|
+
this.watchSize(this.size);
|
|
8444
|
+
this.watchFullWidth(this.fullWidth);
|
|
8445
|
+
this.watchColumns(this.columns);
|
|
8446
|
+
this.renderTable(this.element.querySelector('table'));
|
|
8447
|
+
}
|
|
8448
|
+
/**
|
|
8449
|
+
* Update table
|
|
8450
|
+
*/
|
|
8451
|
+
componentWillUpdate() {
|
|
8452
|
+
this.renderTable(this.element.shadowRoot.querySelector('table'));
|
|
8453
|
+
}
|
|
8454
|
+
get element() { return index.getElement(this); }
|
|
8455
|
+
static get watchers() { return {
|
|
8456
|
+
"size": ["watchSize"],
|
|
8457
|
+
"fullWidth": ["watchFullWidth"],
|
|
8458
|
+
"columns": ["watchColumns"]
|
|
8459
|
+
}; }
|
|
8460
|
+
};
|
|
8461
|
+
MgTable.style = mgTableCss;
|
|
8452
8462
|
|
|
8453
8463
|
/**
|
|
8454
8464
|
* Available tabs items status
|
|
@@ -8465,7 +8475,6 @@ const Status = {
|
|
|
8465
8475
|
const sizes = ['medium', 'large'];
|
|
8466
8476
|
|
|
8467
8477
|
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}";
|
|
8468
|
-
const MgTabsStyle0 = mgTabsCss;
|
|
8469
8478
|
|
|
8470
8479
|
/**
|
|
8471
8480
|
* type TabItem validation function
|
|
@@ -8476,7 +8485,7 @@ const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'stri
|
|
|
8476
8485
|
const MgTabs = class {
|
|
8477
8486
|
constructor(hostRef) {
|
|
8478
8487
|
index.registerInstance(this, hostRef);
|
|
8479
|
-
this.activeTabChange = index.createEvent(this, "active-tab-change"
|
|
8488
|
+
this.activeTabChange = index.createEvent(this, "active-tab-change");
|
|
8480
8489
|
/************
|
|
8481
8490
|
* Internal *
|
|
8482
8491
|
************/
|
|
@@ -8488,7 +8497,7 @@ const MgTabs = class {
|
|
|
8488
8497
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
8489
8498
|
* If not set, it will be created.
|
|
8490
8499
|
*/
|
|
8491
|
-
this.identifier = index_es.
|
|
8500
|
+
this.identifier = index_es.xt('mg-tabs');
|
|
8492
8501
|
/**
|
|
8493
8502
|
* Define tabs size
|
|
8494
8503
|
*/
|
|
@@ -8500,7 +8509,7 @@ const MgTabs = class {
|
|
|
8500
8509
|
/**
|
|
8501
8510
|
* Component classes
|
|
8502
8511
|
*/
|
|
8503
|
-
this.classCollection = new index_es.
|
|
8512
|
+
this.classCollection = new index_es.kt(['mg-c-tabs']);
|
|
8504
8513
|
/**
|
|
8505
8514
|
* Validate that new tab status can be `Status.ACTIVE`
|
|
8506
8515
|
* @param tab - tab item
|
|
@@ -8598,7 +8607,7 @@ const MgTabs = class {
|
|
|
8598
8607
|
*/
|
|
8599
8608
|
this.resetFocus = () => {
|
|
8600
8609
|
// update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
|
|
8601
|
-
index_es.
|
|
8610
|
+
index_es.Mt(() => {
|
|
8602
8611
|
this.tabFocus = undefined;
|
|
8603
8612
|
Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
|
|
8604
8613
|
tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
|
|
@@ -8615,30 +8624,30 @@ const MgTabs = class {
|
|
|
8615
8624
|
};
|
|
8616
8625
|
}
|
|
8617
8626
|
watchIdentifier(newValue) {
|
|
8618
|
-
if (!index_es.
|
|
8619
|
-
console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
8627
|
+
if (!index_es.Ot(newValue)) {
|
|
8628
|
+
console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${index_es.zt(newValue)}.`);
|
|
8620
8629
|
}
|
|
8621
8630
|
}
|
|
8622
8631
|
validateLabel(newValue) {
|
|
8623
|
-
if (!index_es.
|
|
8624
|
-
throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${index_es.
|
|
8632
|
+
if (!index_es.Le(newValue)) {
|
|
8633
|
+
throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${index_es.zt(newValue)}.`);
|
|
8625
8634
|
}
|
|
8626
8635
|
}
|
|
8627
8636
|
validateSize(newValue) {
|
|
8628
8637
|
if (!sizes.includes(newValue)) {
|
|
8629
|
-
throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${index_es.
|
|
8638
|
+
throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
8630
8639
|
}
|
|
8631
8640
|
this.classCollection.add(`mg-c-tabs--size-${this.size}`);
|
|
8632
8641
|
}
|
|
8633
8642
|
validateItems(newValue) {
|
|
8634
8643
|
// String array
|
|
8635
|
-
if (index_es.
|
|
8644
|
+
if (index_es.At(newValue))
|
|
8636
8645
|
this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
|
|
8637
8646
|
// Object array
|
|
8638
8647
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
8639
8648
|
this.tabs = newValue;
|
|
8640
8649
|
else
|
|
8641
|
-
throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${index_es.
|
|
8650
|
+
throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${index_es.zt(newValue)}.`);
|
|
8642
8651
|
}
|
|
8643
8652
|
validateActiveTab(newValue) {
|
|
8644
8653
|
// when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
|
|
@@ -8663,7 +8672,7 @@ const MgTabs = class {
|
|
|
8663
8672
|
this.activeTabChange.emit(newValue);
|
|
8664
8673
|
}
|
|
8665
8674
|
else {
|
|
8666
|
-
throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${index_es.
|
|
8675
|
+
throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${index_es.zt(newValue)}.`);
|
|
8667
8676
|
}
|
|
8668
8677
|
}
|
|
8669
8678
|
/*************
|
|
@@ -8715,7 +8724,7 @@ const MgTabs = class {
|
|
|
8715
8724
|
"activeTab": ["validateActiveTab"]
|
|
8716
8725
|
}; }
|
|
8717
8726
|
};
|
|
8718
|
-
MgTabs.style =
|
|
8727
|
+
MgTabs.style = mgTabsCss;
|
|
8719
8728
|
|
|
8720
8729
|
/**
|
|
8721
8730
|
* List of all possibles variants
|
|
@@ -8723,7 +8732,6 @@ MgTabs.style = MgTabsStyle0;
|
|
|
8723
8732
|
const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
|
|
8724
8733
|
|
|
8725
8734
|
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}";
|
|
8726
|
-
const MgTagStyle0 = mgTagCss;
|
|
8727
8735
|
|
|
8728
8736
|
const MgTag = class {
|
|
8729
8737
|
constructor(hostRef) {
|
|
@@ -8737,15 +8745,23 @@ const MgTag = class {
|
|
|
8737
8745
|
/**
|
|
8738
8746
|
* Define tag variant
|
|
8739
8747
|
*/
|
|
8740
|
-
this.variant =
|
|
8748
|
+
this.variant = 'primary';
|
|
8749
|
+
/**
|
|
8750
|
+
* Define if tag is using outline style
|
|
8751
|
+
*/
|
|
8752
|
+
this.outline = false;
|
|
8753
|
+
/**
|
|
8754
|
+
* Define if tag is using soft style
|
|
8755
|
+
*/
|
|
8756
|
+
this.soft = false;
|
|
8741
8757
|
/**
|
|
8742
8758
|
* Component classes
|
|
8743
8759
|
*/
|
|
8744
|
-
this.classCollection = new index_es.
|
|
8760
|
+
this.classCollection = new index_es.kt(['mg-c-tag']);
|
|
8745
8761
|
}
|
|
8746
8762
|
validateVariant(newValue, oldValue) {
|
|
8747
8763
|
if (!variants.includes(newValue)) {
|
|
8748
|
-
throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${index_es.
|
|
8764
|
+
throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${index_es.zt(newValue)}.`);
|
|
8749
8765
|
}
|
|
8750
8766
|
else {
|
|
8751
8767
|
if (oldValue !== undefined) {
|
|
@@ -8778,7 +8794,7 @@ const MgTag = class {
|
|
|
8778
8794
|
* @param textContent - html element textContent property
|
|
8779
8795
|
*/
|
|
8780
8796
|
validateTextContent(textContent) {
|
|
8781
|
-
if (!index_es.
|
|
8797
|
+
if (!index_es.Le(textContent))
|
|
8782
8798
|
throw new Error('<mg-tag> slot must contain a text content.');
|
|
8783
8799
|
}
|
|
8784
8800
|
/*************
|
|
@@ -8798,7 +8814,7 @@ const MgTag = class {
|
|
|
8798
8814
|
* @returns HTML Element
|
|
8799
8815
|
*/
|
|
8800
8816
|
render() {
|
|
8801
|
-
return (index.h("span", { key: '
|
|
8817
|
+
return (index.h("span", { key: '2517dd6020afcf91017c9cfb6a1f3037c0b6a7c4', class: this.classCollection.join() }, index.h("slot", { key: '0f0f0f82274342a87d98125631174f40060105af' })));
|
|
8802
8818
|
}
|
|
8803
8819
|
get element() { return index.getElement(this); }
|
|
8804
8820
|
static get watchers() { return {
|
|
@@ -8807,7 +8823,7 @@ const MgTag = class {
|
|
|
8807
8823
|
"soft": ["validateSoft"]
|
|
8808
8824
|
}; }
|
|
8809
8825
|
};
|
|
8810
|
-
MgTag.style =
|
|
8826
|
+
MgTag.style = mgTagCss;
|
|
8811
8827
|
|
|
8812
8828
|
const Guard = {
|
|
8813
8829
|
FOCUS: 'focus',
|
|
@@ -8817,7 +8833,6 @@ const Guard = {
|
|
|
8817
8833
|
};
|
|
8818
8834
|
|
|
8819
8835
|
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}";
|
|
8820
|
-
const MgTooltipStyle0 = mgTooltipCss;
|
|
8821
8836
|
|
|
8822
8837
|
/**
|
|
8823
8838
|
* HTMLMgButtonElement type guard
|
|
@@ -8832,7 +8847,7 @@ const MgTooltip = class {
|
|
|
8832
8847
|
* Sets an `id` attribute.
|
|
8833
8848
|
* Needed by the input for accessibility `aria-decribedby`.
|
|
8834
8849
|
*/
|
|
8835
|
-
this.identifier = index_es.
|
|
8850
|
+
this.identifier = index_es.xt('mg-tooltip');
|
|
8836
8851
|
/**
|
|
8837
8852
|
* Tooltip placement
|
|
8838
8853
|
*/
|
|
@@ -8852,7 +8867,7 @@ const MgTooltip = class {
|
|
|
8852
8867
|
// Make the tooltip visible
|
|
8853
8868
|
this.mgTooltipContent.dataset.show = '';
|
|
8854
8869
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
8855
|
-
index_es.
|
|
8870
|
+
index_es.Mt(() => {
|
|
8856
8871
|
this.windows.forEach((localWindow) => {
|
|
8857
8872
|
localWindow.addEventListener('click', this.handleClickOutside, false);
|
|
8858
8873
|
localWindow.addEventListener('keydown', this.handlePressEscape, false);
|
|
@@ -9071,15 +9086,15 @@ const MgTooltip = class {
|
|
|
9071
9086
|
};
|
|
9072
9087
|
}
|
|
9073
9088
|
watchIdentifier(newValue) {
|
|
9074
|
-
if (!index_es.
|
|
9075
|
-
throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${index_es.
|
|
9089
|
+
if (!index_es.Ot(newValue)) {
|
|
9090
|
+
throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${index_es.zt(newValue)}.`);
|
|
9076
9091
|
}
|
|
9077
9092
|
// use renderTooltipContent to update tooltip-content id
|
|
9078
9093
|
this.renderTooltipContent();
|
|
9079
9094
|
}
|
|
9080
9095
|
watchMessage(newValue) {
|
|
9081
|
-
if (!index_es.
|
|
9082
|
-
throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${index_es.
|
|
9096
|
+
if (!index_es.Le(newValue)) {
|
|
9097
|
+
throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${index_es.zt(newValue)}.`);
|
|
9083
9098
|
}
|
|
9084
9099
|
if (this.mgTooltipContent !== undefined)
|
|
9085
9100
|
this.mgTooltipContent.message = newValue;
|
|
@@ -9138,7 +9153,7 @@ const MgTooltip = class {
|
|
|
9138
9153
|
*/
|
|
9139
9154
|
componentWillLoad() {
|
|
9140
9155
|
// Get windows to attach events
|
|
9141
|
-
this.windows = index_es.
|
|
9156
|
+
this.windows = index_es.Rt(window);
|
|
9142
9157
|
// Get tooltip element
|
|
9143
9158
|
this.renderTooltipContent();
|
|
9144
9159
|
//validate properties
|
|
@@ -9157,7 +9172,7 @@ const MgTooltip = class {
|
|
|
9157
9172
|
// get slotted element wich is not the tooltip
|
|
9158
9173
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
9159
9174
|
// Get interactive element
|
|
9160
|
-
const interactiveElement = slotElement.matches(index_es.
|
|
9175
|
+
const interactiveElement = slotElement.matches(index_es.jt) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index_es.jt);
|
|
9161
9176
|
this.setTooltipedElement(interactiveElement || slotElement);
|
|
9162
9177
|
// Check if slotted element is a disabled mg-button
|
|
9163
9178
|
// In this case we wrap the mg-button into a div to enable the tooltip
|
|
@@ -9206,7 +9221,7 @@ const MgTooltip = class {
|
|
|
9206
9221
|
* @returns HTML Element
|
|
9207
9222
|
*/
|
|
9208
9223
|
render() {
|
|
9209
|
-
return (index.h(index.Host, { key: '
|
|
9224
|
+
return (index.h(index.Host, { key: '31d97272cfd3448abf9ed9cda62fdec0a356d422' }, index.h("slot", { key: '8fbf8343471f53591caacc3ff4c4b8aaf4577c4f' }), index.h("slot", { key: '6f4eab4c33e9ec07e0fe7ffa63de4921f4b27e0c', name: "content" })));
|
|
9210
9225
|
}
|
|
9211
9226
|
get element() { return index.getElement(this); }
|
|
9212
9227
|
static get watchers() { return {
|
|
@@ -9217,10 +9232,9 @@ const MgTooltip = class {
|
|
|
9217
9232
|
"disabled": ["watchDisabled"]
|
|
9218
9233
|
}; }
|
|
9219
9234
|
};
|
|
9220
|
-
MgTooltip.style =
|
|
9235
|
+
MgTooltip.style = mgTooltipCss;
|
|
9221
9236
|
|
|
9222
9237
|
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))}";
|
|
9223
|
-
const MgTooltipContentStyle0 = mgTooltipContentCss;
|
|
9224
9238
|
|
|
9225
9239
|
const MgTooltipContent = class {
|
|
9226
9240
|
constructor(hostRef) {
|
|
@@ -9237,7 +9251,7 @@ const MgTooltipContent = class {
|
|
|
9237
9251
|
return (index.h(index.Host, { key: '2221de3ca0ef7c9d6e46e24b19c69007fababf81', role: "tooltip" }, index.h("span", { key: '9e14f7f5b3f5e5060ed9f42e8d7259b17575168e', innerHTML: this.message, class: "mg-tooltip-content__message" }), index.h("slot", { key: 'bc083567d77e8f4ffccee98b96036ba8ac494fb6', name: "arrow" })));
|
|
9238
9252
|
}
|
|
9239
9253
|
};
|
|
9240
|
-
MgTooltipContent.style =
|
|
9254
|
+
MgTooltipContent.style = mgTooltipContentCss;
|
|
9241
9255
|
|
|
9242
9256
|
exports.mg_action_more = MgActionMore;
|
|
9243
9257
|
exports.mg_badge = MgBadge;
|
|
@@ -9271,9 +9285,11 @@ exports.mg_panel = MgPanel;
|
|
|
9271
9285
|
exports.mg_popover = MgPopover;
|
|
9272
9286
|
exports.mg_popover_content = MgPopoverContent;
|
|
9273
9287
|
exports.mg_skip_links = MgSkipLinks;
|
|
9288
|
+
exports.mg_table = MgTable;
|
|
9274
9289
|
exports.mg_tabs = MgTabs;
|
|
9275
9290
|
exports.mg_tag = MgTag;
|
|
9276
9291
|
exports.mg_tooltip = MgTooltip;
|
|
9277
9292
|
exports.mg_tooltip_content = MgTooltipContent;
|
|
9293
|
+
//# sourceMappingURL=mg-action-more.mg-badge.mg-button.mg-card.mg-character-left.mg-details.mg-divider.mg-form.mg-icon.mg-illustrated-message.mg-input.mg-input-checkbox.mg-input-checkbox-paginated.mg-input-date.mg-input-numeric.mg-input-password.mg-input-radio.mg-input-select.mg-input-text.mg-input-textarea.mg-input-title.mg-input-toggle.mg-item-more.mg-menu.mg-menu-item.mg-message.mg-modal.mg-pagination.mg-panel.mg-popover.mg-popover-content.mg-skip-links.mg-table.mg-tabs.mg-tag.mg-tooltip.mg-tooltip-content.entry.cjs.js.map
|
|
9278
9294
|
|
|
9279
|
-
//# sourceMappingURL=mg-action-
|
|
9295
|
+
//# sourceMappingURL=mg-action-more_37.cjs.entry.js.map
|