@mgdis/mg-components 5.29.0 → 6.0.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 → README.md} +1 -1
- package/dist/cjs/{index-8a3adbd1.js → index-08ee93bf.js} +18 -70
- package/dist/cjs/index-08ee93bf.js.map +1 -0
- package/dist/cjs/{index-e1a25816.js → index-d57c96a9.js} +14 -13
- package/dist/cjs/index-d57c96a9.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mg-action-more_36.cjs.entry.js +606 -781
- package/dist/cjs/mg-action-more_36.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-alert.cjs.entry.js +161 -0
- package/dist/cjs/mg-alert.cjs.entry.js.map +1 -0
- package/dist/cjs/mg-components.cjs.js +2 -2
- package/dist/cjs/mg-loader.cjs.entry.js +6 -6
- package/dist/cjs/mg-loader.cjs.entry.js.map +1 -1
- package/dist/collection/assets/icons/index.js +1 -1
- package/dist/collection/assets/icons/index.js.map +1 -1
- package/dist/collection/collection-manifest.json +4 -3
- package/dist/collection/components/atoms/{mg-character-left → internals/mg-character-left}/mg-character-left.js +9 -5
- package/dist/collection/components/atoms/internals/mg-character-left/mg-character-left.js.map +1 -0
- package/dist/collection/components/atoms/{mg-input-title → internals/mg-input-title}/mg-input-title.js +4 -4
- package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js.map +1 -0
- package/dist/collection/components/atoms/mg-badge/mg-badge.conf.js.map +1 -1
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +6 -6
- package/dist/collection/components/atoms/mg-badge/mg-badge.js.map +1 -1
- package/dist/collection/components/atoms/mg-button/mg-button.conf.js.map +1 -1
- package/dist/collection/components/atoms/mg-button/mg-button.js +4 -22
- package/dist/collection/components/atoms/mg-button/mg-button.js.map +1 -1
- package/dist/collection/components/atoms/mg-card/mg-card.js +1 -113
- package/dist/collection/components/atoms/mg-card/mg-card.js.map +1 -1
- package/dist/collection/components/atoms/mg-divider/mg-divider.js +9 -9
- package/dist/collection/components/atoms/mg-divider/mg-divider.js.map +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.conf.js +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.conf.js.map +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +11 -11
- package/dist/collection/components/atoms/mg-icon/mg-icon.js.map +1 -1
- package/dist/collection/components/atoms/mg-tag/mg-tag.conf.js.map +1 -1
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +3 -3
- package/dist/collection/components/atoms/mg-tag/mg-tag.js.map +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.conf.js +6 -7
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.conf.js.map +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +36 -20
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.conf.js +0 -9
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.conf.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +15 -60
- 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 +16 -48
- 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.conf.js +5 -23
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +127 -30
- 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 -8
- 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 +20 -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.conf.js +1 -8
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +45 -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 +8 -8
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +10 -10
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.conf.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +12 -12
- 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.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +71 -35
- 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 +21 -21
- 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 +7 -7
- 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 -0
- package/dist/collection/components/molecules/{mg-item-more → internals/mg-item-more}/mg-item-more.js +24 -20
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js.map +1 -0
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.conf.js +6 -7
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.conf.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +21 -16
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.conf.js +7 -16
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.conf.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +17 -17
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js.map +1 -1
- 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 +30 -15
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js.map +1 -1
- package/dist/collection/components/molecules/mg-alert/mg-alert.conf.js +9 -0
- package/dist/collection/components/molecules/mg-alert/mg-alert.conf.js.map +1 -0
- package/dist/collection/components/molecules/mg-alert/mg-alert.js +270 -0
- package/dist/collection/components/molecules/mg-alert/mg-alert.js.map +1 -0
- package/dist/collection/components/molecules/mg-details/mg-details.js +3 -3
- package/dist/collection/components/molecules/mg-details/mg-details.js.map +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js +5 -5
- package/dist/collection/components/molecules/mg-form/mg-form.js.map +1 -1
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.conf.js +6 -0
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.conf.js.map +1 -0
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +16 -10
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js.map +1 -1
- package/dist/collection/components/molecules/mg-loader/mg-loader.js +3 -3
- package/dist/collection/components/molecules/mg-loader/mg-loader.js.map +1 -1
- package/dist/collection/components/molecules/mg-message/mg-message.conf.js +5 -1
- package/dist/collection/components/molecules/mg-message/mg-message.conf.js.map +1 -1
- package/dist/collection/components/molecules/mg-message/mg-message.js +46 -230
- package/dist/collection/components/molecules/mg-message/mg-message.js.map +1 -1
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +35 -121
- package/dist/collection/components/molecules/mg-modal/mg-modal.js.map +1 -1
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.conf.js +4 -5
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.conf.js.map +1 -1
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +7 -7
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js.map +1 -1
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +9 -9
- package/dist/collection/components/molecules/mg-panel/mg-panel.js.map +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js +2 -2
- package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js.map +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +4 -3
- package/dist/collection/components/molecules/mg-popover/mg-popover.js.map +1 -1
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -1
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.conf.js +7 -8
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.conf.js.map +1 -1
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +24 -13
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js.map +1 -1
- package/dist/collection/locales/en/messages.json +1 -1
- package/dist/collection/locales/fr/messages.json +1 -1
- package/dist/collection/types/index.js +2 -0
- package/dist/collection/types/index.js.map +1 -0
- package/dist/collection/utils/behaviors.utils.js +8 -9
- package/dist/collection/utils/behaviors.utils.js.map +1 -1
- package/dist/collection/utils/playwright.fixture.js +3 -3
- package/dist/collection/utils/playwright.fixture.js.map +1 -1
- package/dist/components/index.es.js +6 -6
- package/dist/components/index.es.js.map +1 -1
- package/dist/components/index2.js +6 -6
- package/dist/components/mg-action-more.js +34 -18
- package/dist/components/mg-action-more.js.map +1 -1
- package/dist/components/mg-alert.d.ts +11 -0
- package/dist/components/mg-alert.js +212 -0
- package/dist/components/mg-alert.js.map +1 -0
- package/dist/components/mg-badge2.js +8 -8
- package/dist/components/mg-badge2.js.map +1 -1
- package/dist/components/mg-button2.js +7 -9
- package/dist/components/mg-button2.js.map +1 -1
- package/dist/components/mg-card2.js +3 -68
- package/dist/components/mg-card2.js.map +1 -1
- package/dist/components/mg-character-left2.js +4 -3
- package/dist/components/mg-character-left2.js.map +1 -1
- package/dist/components/mg-details.js +5 -5
- package/dist/components/mg-details.js.map +1 -1
- package/dist/components/mg-divider.js +1 -40
- package/dist/components/mg-divider.js.map +1 -1
- package/dist/components/mg-divider2.js +44 -0
- package/dist/components/mg-divider2.js.map +1 -0
- package/dist/components/mg-form.js +5 -5
- package/dist/components/mg-form.js.map +1 -1
- package/dist/components/mg-icon2.js +11 -11
- package/dist/components/mg-icon2.js.map +1 -1
- package/dist/components/mg-illustrated-message.js +6 -6
- package/dist/components/mg-illustrated-message.js.map +1 -1
- package/dist/components/mg-input-checkbox-paginated.js +1 -1
- package/dist/components/mg-input-checkbox-paginated2.js +15 -44
- package/dist/components/mg-input-checkbox-paginated2.js.map +1 -1
- package/dist/components/mg-input-checkbox.js +82 -33
- package/dist/components/mg-input-checkbox.js.map +1 -1
- package/dist/components/mg-input-date.js +27 -36
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +46 -38
- package/dist/components/mg-input-numeric.js.map +1 -1
- package/dist/components/mg-input-password.js +11 -11
- package/dist/components/mg-input-password.js.map +1 -1
- package/dist/components/mg-input-radio.js +12 -12
- package/dist/components/mg-input-radio.js.map +1 -1
- package/dist/components/mg-input-select2.js +14 -14
- package/dist/components/mg-input-select2.js.map +1 -1
- package/dist/components/mg-input-text2.js +58 -29
- package/dist/components/mg-input-text2.js.map +1 -1
- package/dist/components/mg-input-textarea.js +22 -22
- package/dist/components/mg-input-textarea.js.map +1 -1
- package/dist/components/mg-input-title2.js +4 -4
- package/dist/components/mg-input-title2.js.map +1 -1
- package/dist/components/mg-input-toggle.js +9 -9
- package/dist/components/mg-input-toggle.js.map +1 -1
- package/dist/components/mg-input2.js +19 -57
- package/dist/components/mg-input2.js.map +1 -1
- package/dist/components/mg-item-more2.js +35 -31
- package/dist/components/mg-item-more2.js.map +1 -1
- package/dist/components/mg-loader.js +5 -5
- package/dist/components/mg-loader.js.map +1 -1
- package/dist/components/mg-menu-item2.js +28 -38
- package/dist/components/mg-menu-item2.js.map +1 -1
- package/dist/components/mg-message.js +1 -224
- package/dist/components/mg-message.js.map +1 -1
- package/dist/components/mg-message2.js +135 -0
- package/dist/components/mg-message2.js.map +1 -0
- package/dist/components/mg-modal.js +32 -110
- package/dist/components/mg-modal.js.map +1 -1
- package/dist/components/mg-pagination2.js +12 -13
- package/dist/components/mg-pagination2.js.map +1 -1
- package/dist/components/mg-panel.js +10 -10
- package/dist/components/mg-panel.js.map +1 -1
- package/dist/components/mg-popover-content2.js +3 -3
- package/dist/components/mg-popover-content2.js.map +1 -1
- package/dist/components/mg-popover2.js +7 -6
- package/dist/components/mg-popover2.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-tabs.js +32 -22
- package/dist/components/mg-tabs.js.map +1 -1
- package/dist/components/mg-tag.js +5 -5
- package/dist/components/mg-tag.js.map +1 -1
- package/dist/components/mg-tooltip-content2.js +2 -2
- package/dist/components/mg-tooltip-content2.js.map +1 -1
- package/dist/components/mg-tooltip2.js +47 -32
- package/dist/components/mg-tooltip2.js.map +1 -1
- package/dist/esm/{index-0df3b137.js → index-089d0323.js} +18 -71
- package/dist/esm/index-089d0323.js.map +1 -0
- package/dist/esm/{index-eed80cc2.js → index-cc97a562.js} +12 -12
- package/dist/esm/index-cc97a562.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mg-action-more_36.entry.js +606 -781
- package/dist/esm/mg-action-more_36.entry.js.map +1 -1
- package/dist/esm/mg-alert.entry.js +157 -0
- package/dist/esm/mg-alert.entry.js.map +1 -0
- package/dist/esm/mg-components.js +3 -3
- package/dist/esm/mg-loader.entry.js +6 -6
- package/dist/esm/mg-loader.entry.js.map +1 -1
- package/dist/mg-components/locales/en/messages.json +1 -1
- package/dist/mg-components/locales/fr/messages.json +1 -1
- package/dist/mg-components/mg-components.css +1 -1
- 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/p-26b67dfd.entry.js +2 -0
- package/dist/mg-components/p-26b67dfd.entry.js.map +1 -0
- package/dist/mg-components/p-2b89fe8b.entry.js +2 -0
- package/dist/mg-components/p-2b89fe8b.entry.js.map +1 -0
- package/dist/mg-components/p-48e033cf.js +3 -0
- package/dist/mg-components/p-48e033cf.js.map +1 -0
- package/dist/mg-components/p-6f5c7ec5.entry.js +2 -0
- package/dist/mg-components/p-6f5c7ec5.entry.js.map +1 -0
- package/dist/mg-components/p-898d194f.js +2 -0
- package/dist/mg-components/p-898d194f.js.map +1 -0
- package/dist/types/assets/icons/index.d.ts +0 -1
- package/dist/types/components/atoms/{mg-character-left → internals/mg-character-left}/mg-character-left.d.ts +3 -0
- package/dist/types/components/atoms/{mg-input-title → internals/mg-input-title}/mg-input-title.d.ts +1 -1
- package/dist/types/components/atoms/mg-badge/mg-badge.conf.d.ts +2 -1
- package/dist/types/components/atoms/mg-button/mg-button.conf.d.ts +2 -1
- package/dist/types/components/atoms/mg-button/mg-button.d.ts +0 -4
- package/dist/types/components/atoms/mg-card/mg-card.d.ts +0 -33
- package/dist/types/components/atoms/mg-divider/mg-divider.d.ts +1 -1
- package/dist/types/components/atoms/mg-icon/mg-icon.conf.d.ts +5 -4
- package/dist/types/components/atoms/mg-tag/mg-tag.conf.d.ts +2 -1
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.conf.d.ts +2 -6
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts +7 -2
- package/dist/types/components/molecules/inputs/mg-input/mg-input.conf.d.ts +2 -6
- package/dist/types/components/molecules/inputs/mg-input/mg-input.d.ts +0 -9
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.d.ts +6 -13
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.d.ts +4 -18
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +30 -3
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.conf.d.ts +2 -7
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.d.ts +3 -7
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +6 -1
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.conf.d.ts +2 -3
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.conf.d.ts +5 -0
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +10 -4
- package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +3 -3
- package/dist/types/components/molecules/{mg-item-more → internals/mg-item-more}/mg-item-more.conf.d.ts +2 -2
- package/dist/types/components/molecules/{mg-item-more → internals/mg-item-more}/mg-item-more.d.ts +3 -0
- package/dist/types/components/molecules/menu/mg-menu/mg-menu.conf.d.ts +9 -7
- package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts +2 -3
- package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.conf.d.ts +5 -17
- package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts +4 -4
- package/dist/types/components/molecules/mg-action-more/mg-action-more.conf.d.ts +7 -1
- package/dist/types/components/molecules/mg-action-more/mg-action-more.d.ts +2 -2
- package/dist/types/components/molecules/mg-alert/mg-alert.conf.d.ts +17 -0
- package/dist/types/components/molecules/mg-alert/mg-alert.d.ts +89 -0
- package/dist/types/components/molecules/mg-details/mg-details.d.ts +4 -0
- package/dist/types/components/molecules/mg-form/mg-form.d.ts +4 -0
- package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.conf.d.ts +10 -0
- package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.d.ts +7 -1
- package/dist/types/components/molecules/mg-message/mg-message.conf.d.ts +11 -2
- package/dist/types/components/molecules/mg-message/mg-message.d.ts +11 -62
- package/dist/types/components/molecules/mg-modal/mg-modal.d.ts +13 -39
- package/dist/types/components/molecules/mg-pagination/mg-pagination.conf.d.ts +4 -4
- package/dist/types/components/molecules/mg-panel/mg-panel.d.ts +4 -0
- package/dist/types/components/molecules/mg-tabs/mg-tabs.conf.d.ts +7 -11
- package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts +9 -0
- package/dist/types/components.d.ts +157 -166
- package/dist/types/locales/index.d.ts +1 -1
- package/dist/types/types/index.d.ts +27 -0
- package/dist/types/utils/behaviors.utils.d.ts +5 -5
- package/ide/intellij/web-types.json +791 -671
- package/ide/vscode/css-custom-data.json +389 -0
- package/ide/vscode/html-custom-data.json +217 -547
- package/package.json +8 -5
- package/dist/cjs/index-8a3adbd1.js.map +0 -1
- package/dist/cjs/index-e1a25816.js.map +0 -1
- package/dist/collection/components/atoms/mg-card/mg-card.conf.js +0 -9
- package/dist/collection/components/atoms/mg-card/mg-card.conf.js.map +0 -1
- package/dist/collection/components/atoms/mg-character-left/mg-character-left.js.map +0 -1
- package/dist/collection/components/atoms/mg-input-title/mg-input-title.js.map +0 -1
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.conf.js.map +0 -1
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.js.map +0 -1
- package/dist/collection/fonts/OpenSans-Bold.ttf +0 -0
- package/dist/collection/fonts/OpenSans-Regular.ttf +0 -0
- package/dist/collection/fonts/OpenSans-SemiBold.ttf +0 -0
- package/dist/collection/styles/fonts.css +0 -1
- package/dist/collection/styles/global.css +0 -1
- package/dist/collection/styles/main.css +0 -1
- package/dist/collection/styles/mg-components-utils.css +0 -1
- package/dist/collection/styles/variables.css +0 -1
- package/dist/collection/variables.css +0 -1
- package/dist/esm/index-0df3b137.js.map +0 -1
- package/dist/esm/index-eed80cc2.js.map +0 -1
- package/dist/mg-components/fonts/OpenSans-Bold.ttf +0 -0
- package/dist/mg-components/fonts/OpenSans-Regular.ttf +0 -0
- package/dist/mg-components/fonts/OpenSans-SemiBold.ttf +0 -0
- package/dist/mg-components/p-88f6c2f9.entry.js +0 -2
- package/dist/mg-components/p-88f6c2f9.entry.js.map +0 -1
- package/dist/mg-components/p-e5db08c5.entry.js +0 -2
- package/dist/mg-components/p-e5db08c5.entry.js.map +0 -1
- package/dist/mg-components/p-efce3d8c.js +0 -2
- package/dist/mg-components/p-efce3d8c.js.map +0 -1
- package/dist/mg-components/p-f95b4418.js +0 -3
- package/dist/mg-components/p-f95b4418.js.map +0 -1
- package/dist/mg-components/styles/fonts.css +0 -1
- package/dist/mg-components/styles/global.css +0 -1
- package/dist/mg-components/styles/main.css +0 -1
- package/dist/mg-components/styles/mg-components-utils.css +0 -1
- package/dist/mg-components/styles/variables.css +0 -1
- package/dist/mg-components/variables.css +0 -1
- package/dist/types/components/atoms/mg-card/mg-card.conf.d.ts +0 -16
- /package/dist/collection/components/molecules/{mg-item-more → internals/mg-item-more}/mg-item-more.conf.js +0 -0
|
@@ -1,43 +1,33 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-
|
|
2
|
-
import { z as ze, i as initLocales, I as Ie,
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-089d0323.js';
|
|
2
|
+
import { z as ze, Z as Ze, i as initLocales, I as Ie, Q as Qe, V as Ve, X as Xe, Y as Ye, W as We, H as He, a as at, b as it, c as ct, f as ft, G as Ge, K as Ke, J as Je } from './index-cc97a562.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
|
-
* Available menu
|
|
5
|
+
* Available menu item status values
|
|
6
6
|
*/
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
* Available menu item status
|
|
14
|
-
*/
|
|
15
|
-
var Status$1;
|
|
16
|
-
(function (Status) {
|
|
17
|
-
Status["VISIBLE"] = "visible";
|
|
18
|
-
Status["HIDDEN"] = "hidden";
|
|
19
|
-
Status["DISABLED"] = "disabled";
|
|
20
|
-
Status["ACTIVE"] = "active";
|
|
21
|
-
})(Status$1 || (Status$1 = {}));
|
|
7
|
+
const Status$1 = {
|
|
8
|
+
VISIBLE: 'visible',
|
|
9
|
+
HIDDEN: 'hidden',
|
|
10
|
+
DISABLED: 'disabled',
|
|
11
|
+
ACTIVE: 'active',
|
|
12
|
+
};
|
|
22
13
|
/**
|
|
23
14
|
* List of all possibles target
|
|
24
15
|
*/
|
|
25
16
|
const targets = ['_blank', '_self', '_parent', '_top'];
|
|
26
17
|
|
|
27
18
|
/**
|
|
28
|
-
* Menu direction
|
|
19
|
+
* Menu direction values
|
|
29
20
|
*/
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
})(Direction || (Direction = {}));
|
|
21
|
+
const Direction = {
|
|
22
|
+
VERTICAL: 'vertical',
|
|
23
|
+
HORIZONTAL: 'horizontal',
|
|
24
|
+
};
|
|
35
25
|
/**
|
|
36
26
|
* List of all possibles sizes
|
|
37
27
|
*/
|
|
38
|
-
const sizes$2 = ['
|
|
28
|
+
const sizes$2 = ['medium', 'large', 'xlarge'];
|
|
39
29
|
|
|
40
|
-
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-popover-padding-vertical:
|
|
30
|
+
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)}";
|
|
41
31
|
const MgActionMoreStyle0 = mgActionMoreCss;
|
|
42
32
|
|
|
43
33
|
/**
|
|
@@ -47,8 +37,15 @@ const MgActionMoreStyle0 = mgActionMoreCss;
|
|
|
47
37
|
*/
|
|
48
38
|
const isMgActionMoreItems = (prop) => {
|
|
49
39
|
const items = prop;
|
|
50
|
-
return typeof items === 'object' &&
|
|
40
|
+
return (typeof items === 'object' &&
|
|
41
|
+
items.every(item => (typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function') || isMgActionMoreDivider(item)));
|
|
51
42
|
};
|
|
43
|
+
/**
|
|
44
|
+
* MgActionMoreDividerType type guard
|
|
45
|
+
* @param item - component item
|
|
46
|
+
* @returns return true if type is valid
|
|
47
|
+
*/
|
|
48
|
+
const isMgActionMoreDivider = (item) => typeof item === 'object' && item.isDivider;
|
|
52
49
|
/**
|
|
53
50
|
* MgActionMore['button'] type guard
|
|
54
51
|
* @param prop - commponent button prop
|
|
@@ -115,20 +112,23 @@ const MgActionMore = class {
|
|
|
115
112
|
}
|
|
116
113
|
validateItems(newValue) {
|
|
117
114
|
if (!isMgActionMoreItems(newValue)) {
|
|
118
|
-
throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType.`);
|
|
115
|
+
throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${Ze(newValue)}.`);
|
|
116
|
+
}
|
|
117
|
+
else if (isMgActionMoreItems(newValue) && newValue.length > 0 && (isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {
|
|
118
|
+
throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${Ze(newValue)}.`);
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
121
|
validateIcon(newValue) {
|
|
122
122
|
if (newValue && !isMgActionMoreIcon(newValue)) {
|
|
123
|
-
throw new Error(`<${this.name}> prop icon must match MgActionMoreIconType.`);
|
|
123
|
+
throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${Ze(newValue)}.`);
|
|
124
124
|
}
|
|
125
|
-
else if (
|
|
125
|
+
else if ((newValue === null || newValue === void 0 ? void 0 : newValue.icon) === undefined && Boolean(this.button.isIcon)) {
|
|
126
126
|
this.icon = { icon: 'ellipsis' };
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
129
|
validateButton(newValue) {
|
|
130
130
|
if (newValue && !isMgActionMoreButton(newValue)) {
|
|
131
|
-
throw new Error(`<${this.name}> prop button must match MgActionMoreButtonType.`);
|
|
131
|
+
throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${Ze(newValue)}.`);
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
134
|
validateDisplayChevron(newValue) {
|
|
@@ -162,11 +162,11 @@ const MgActionMore = class {
|
|
|
162
162
|
[`${this.classBase}__chevron--rotate`]: this.expanded === true,
|
|
163
163
|
} }, h("mg-icon", { icon: "chevron-down", size: "small" })));
|
|
164
164
|
}
|
|
165
|
-
return (h(Host, { key: '
|
|
166
|
-
var _a;
|
|
167
|
-
return (
|
|
168
|
-
|
|
169
|
-
|
|
165
|
+
return (h(Host, { key: 'ad081e085753770cfdf1d922d7a2dd574e31a632', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: 'abb29bf36c86f205dd3893709473523f6263506c', class: this.classBase }, h("mg-popover", { key: '5604deaf66f1316aaccf40b90945982f840081d2', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: '22adde17802161738698deca40d94b9e12a8d406', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: '18f31a4008af5dc74d1306dc9ebbbe566aefa0b7' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: 'a3b9d6de82629fbb1253eb0338e3186f43bc7583', slot: "content" }, h("mg-menu", { key: '67793ea91ade7c31ed4aa55a507c86bf221bd094', direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
|
|
166
|
+
var _a, _b;
|
|
167
|
+
return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider" })) : (h("mg-menu-item", { key: item.label, status: item.status || Status$1.VISIBLE, target: item.target, href: item.href,
|
|
168
|
+
// eslint-disable-next-line react/jsx-no-bind
|
|
169
|
+
onClick: e => this.handleItemClick(e, item.mouseEventHandler) }, ((_a = item.icon) === null || _a === void 0 ? void 0 : _a.icon) && h("mg-icon", { icon: item.icon.icon, variant: item.icon.variant, variantStyle: item.icon.variantStyle, slot: "image" }), h("span", { slot: "label" }, item.label), ((_b = item.badge) === null || _b === void 0 ? void 0 : _b.label) && h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" })));
|
|
170
170
|
})))))));
|
|
171
171
|
}
|
|
172
172
|
get element() { return getElement(this); }
|
|
@@ -182,9 +182,9 @@ MgActionMore.style = MgActionMoreStyle0;
|
|
|
182
182
|
/**
|
|
183
183
|
* List of all possibles variants
|
|
184
184
|
*/
|
|
185
|
-
const variants$
|
|
185
|
+
const variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
|
|
186
186
|
|
|
187
|
-
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}}.mg-c-badge{min-width:var(--mg-badge-size);height:var(--mg-badge-size);box-sizing:border-box;padding:0
|
|
187
|
+
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}";
|
|
188
188
|
const MgBadgeStyle0 = mgBadgeCss;
|
|
189
189
|
|
|
190
190
|
const MgBadge = class {
|
|
@@ -197,23 +197,23 @@ const MgBadge = class {
|
|
|
197
197
|
this.classOutline = `mg-c-badge--outline`;
|
|
198
198
|
this.value = undefined;
|
|
199
199
|
this.label = undefined;
|
|
200
|
-
this.variant = variants$
|
|
200
|
+
this.variant = variants$4[0];
|
|
201
201
|
this.outline = undefined;
|
|
202
202
|
this.classCollection = new Ie(['mg-c-badge']);
|
|
203
203
|
}
|
|
204
204
|
validateValue(newValue) {
|
|
205
|
-
if (/^
|
|
206
|
-
throw new Error(
|
|
205
|
+
if (/^[^A-Z]+$/i.exec(`${newValue}`) === null) {
|
|
206
|
+
throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${Ze(newValue)}.`);
|
|
207
207
|
}
|
|
208
208
|
}
|
|
209
209
|
validateLabel(newValue) {
|
|
210
|
-
if (!
|
|
211
|
-
throw new Error(
|
|
210
|
+
if (!Qe(newValue)) {
|
|
211
|
+
throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${Ze(newValue)}.`);
|
|
212
212
|
}
|
|
213
213
|
}
|
|
214
214
|
validateVariant(newValue, oldValue) {
|
|
215
|
-
if (!variants$
|
|
216
|
-
throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$
|
|
215
|
+
if (!variants$4.includes(newValue)) {
|
|
216
|
+
throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
217
217
|
}
|
|
218
218
|
else {
|
|
219
219
|
if (oldValue !== undefined) {
|
|
@@ -242,7 +242,7 @@ const MgBadge = class {
|
|
|
242
242
|
* @returns HTML Element
|
|
243
243
|
*/
|
|
244
244
|
render() {
|
|
245
|
-
return (h("span", { key: '
|
|
245
|
+
return (h("span", { key: 'db20118c3cfbc79ca65bcbbda1029857211615b2', class: this.classCollection.join() }, h("span", { key: '1898f1b56935c4acdab79f8c794025009f2d943c', class: "mg-c-badge__value" }, this.value), h("span", { key: '2ca8814b685441f11c8a1804c1e98d3e58f26d84', class: "mg-u-visually-hidden" }, this.label)));
|
|
246
246
|
}
|
|
247
247
|
static get watchers() { return {
|
|
248
248
|
"value": ["validateValue"],
|
|
@@ -256,9 +256,9 @@ MgBadge.style = MgBadgeStyle0;
|
|
|
256
256
|
/**
|
|
257
257
|
* List of all possibles variants
|
|
258
258
|
*/
|
|
259
|
-
const variants$
|
|
259
|
+
const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
|
|
260
260
|
|
|
261
|
-
const mgButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:hsl(var(--color-dark)/10%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--mg-button-primary-font-color))}:host(:hover) .mg-c-button--primary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-c-button.mg-c-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--mg-button-secondary-font-color))}:host(:hover) .mg-c-button--secondary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-c-button.mg-c-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--danger:not(.mg-c-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-button.mg-c-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-danger))}:host(:hover) .mg-c-button--danger-alt:not(.mg-c-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-c-button.mg-c-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--info:not(.mg-c-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-button.mg-c-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-dark))}:host(:hover) .mg-c-button--success:not(.mg-c-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-button{position:relative;display:inline-flex;min-height:var(--default-size);box-sizing:border-box;align-items:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-width:var(--mg-button-border-top-width, 0.1rem) var(--mg-button-border-right-width, 0.1rem) var(--mg-button-border-bottom-width, 0.1rem) var(--mg-button-border-left-width, 0.1rem);border-style:solid;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));background-image:none;column-gap:.6rem;cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-button-disabled-opacity)}.mg-c-button.mg-c-button--icon{width:var(--default-size);height:var(--default-size);justify-content:center;padding:0;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:.6rem}.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--full-width{display:flex;justify-content:center}.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--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}";
|
|
261
|
+
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.mg-c-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.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--flat{border:none;background: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-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--full-width{display:flex;justify-content:center}.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--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}";
|
|
262
262
|
const MgButtonStyle0 = mgButtonCss;
|
|
263
263
|
|
|
264
264
|
const MgButton = class {
|
|
@@ -308,8 +308,7 @@ const MgButton = class {
|
|
|
308
308
|
this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
|
|
309
309
|
}
|
|
310
310
|
};
|
|
311
|
-
this.variant = variants$
|
|
312
|
-
this.identifier = undefined;
|
|
311
|
+
this.variant = variants$3[0];
|
|
313
312
|
this.label = undefined;
|
|
314
313
|
this.type = undefined;
|
|
315
314
|
this.fullWidth = false;
|
|
@@ -321,8 +320,8 @@ const MgButton = class {
|
|
|
321
320
|
this.classCollection = new Ie(['mg-c-button']);
|
|
322
321
|
}
|
|
323
322
|
validateVariant(newValue, oldValue) {
|
|
324
|
-
if (!variants$
|
|
325
|
-
throw new Error(`<mg-button> prop "variant" must be one of: ${variants$
|
|
323
|
+
if (!variants$3.includes(newValue)) {
|
|
324
|
+
throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
326
325
|
}
|
|
327
326
|
else {
|
|
328
327
|
if (oldValue !== undefined) {
|
|
@@ -377,7 +376,7 @@ const MgButton = class {
|
|
|
377
376
|
this.validateFullWidth(this.fullWidth);
|
|
378
377
|
if (this.isIcon) {
|
|
379
378
|
this.classCollection.add(`mg-c-button--icon`);
|
|
380
|
-
if (!
|
|
379
|
+
if (!Qe(this.label)) {
|
|
381
380
|
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
382
381
|
}
|
|
383
382
|
}
|
|
@@ -389,11 +388,11 @@ const MgButton = class {
|
|
|
389
388
|
* Add listners
|
|
390
389
|
*/
|
|
391
390
|
componentDidLoad() {
|
|
392
|
-
|
|
391
|
+
Ve(() => {
|
|
393
392
|
var _a;
|
|
394
393
|
const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
|
|
395
394
|
// submit buttons should trigger form submition;
|
|
396
|
-
if (
|
|
395
|
+
if (closestForm && ['submit', undefined].includes(this.type)) {
|
|
397
396
|
this.element.addEventListener('click', () => {
|
|
398
397
|
closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
|
|
399
398
|
});
|
|
@@ -406,7 +405,7 @@ const MgButton = class {
|
|
|
406
405
|
*/
|
|
407
406
|
render() {
|
|
408
407
|
var _a;
|
|
409
|
-
return (h(Host, { key: '
|
|
408
|
+
return (h(Host, { key: '59b7b2a977668ff6e653143cdbf86c0bea8414c4', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: '464d14800685dd56d7dfc1ca2928274daf5118c6', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: 'af20cf2a34003698058cc1e26e24b20d9444835c', icon: "loader", spin: true }), h("div", { key: '50378b929ad1357c9d03d957dc8eeaac24f7c589', class: "mg-c-button__content" }, h("slot", { key: '41b511009e31064a911b7855a5c71a1104442525' })))));
|
|
410
409
|
}
|
|
411
410
|
get element() { return getElement(this); }
|
|
412
411
|
static get watchers() { return {
|
|
@@ -418,84 +417,27 @@ const MgButton = class {
|
|
|
418
417
|
};
|
|
419
418
|
MgButton.style = MgButtonStyle0;
|
|
420
419
|
|
|
421
|
-
|
|
422
|
-
* List available variants
|
|
423
|
-
*/
|
|
424
|
-
const variants$3 = ['info', 'warning', 'success', 'danger', 'app'];
|
|
425
|
-
/**
|
|
426
|
-
* List available variant styles
|
|
427
|
-
*/
|
|
428
|
-
const variantStyles$1 = ['bar-left', 'fill'];
|
|
429
|
-
|
|
430
|
-
const mgCardCss = ".mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));width:100%;min-width:var(--mg-card-min-width);max-width:var(--mg-card-max-width);box-sizing:border-box;padding:var(--mg-card-padding, var(--mg-card-padding-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));background:var(--mg-card-background, var(--mg-card-background-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-c-card ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}.mg-c-card.mg-c-card--info{overflow:hidden}.mg-c-card.mg-c-card--info.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-card.mg-c-card--info.mg-c-card--fill{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--warning{overflow:hidden}.mg-c-card.mg-c-card--warning.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-c-card.mg-c-card--warning.mg-c-card--fill{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--success{overflow:hidden}.mg-c-card.mg-c-card--success.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-card.mg-c-card--success.mg-c-card--fill{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--danger{overflow:hidden}.mg-c-card.mg-c-card--danger.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-card.mg-c-card--danger.mg-c-card--fill{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--app{overflow:hidden}.mg-c-card.mg-c-card--app.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-c-card.mg-c-card--app.mg-c-card--fill{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-c-card__bar{position:absolute;top:0;left:0;width:.3rem;height:100%}";
|
|
420
|
+
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-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(*){--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}";
|
|
431
421
|
const MgCardStyle0 = mgCardCss;
|
|
432
422
|
|
|
433
423
|
const MgCard = class {
|
|
434
424
|
constructor(hostRef) {
|
|
435
425
|
registerInstance(this, hostRef);
|
|
436
|
-
/*************
|
|
437
|
-
* Private *
|
|
438
|
-
*************/
|
|
439
|
-
this.name = 'mg-card';
|
|
440
|
-
this.classBase = 'mg-c-card';
|
|
441
|
-
/**
|
|
442
|
-
* Method to set default varianStyle props
|
|
443
|
-
* needeed has stencil doesn't know that props is mutated when updated in prop watcher
|
|
444
|
-
*/
|
|
445
|
-
this.setDefaultVariantStyle = () => {
|
|
446
|
-
if (this.variantStyle === undefined)
|
|
447
|
-
this.variantStyle = 'bar-left';
|
|
448
|
-
};
|
|
449
|
-
this.variant = undefined;
|
|
450
|
-
this.variantStyle = undefined;
|
|
451
|
-
this.classCollection = new Ie([this.classBase]);
|
|
452
|
-
}
|
|
453
|
-
validateVariant(newValue, oldValue) {
|
|
454
|
-
if (newValue && !variants$3.includes(newValue))
|
|
455
|
-
throw new Error(`<${this.name}> prop "variant" must match VariantType type.`);
|
|
456
|
-
if (newValue) {
|
|
457
|
-
this.setDefaultVariantStyle();
|
|
458
|
-
this.classCollection.add(`${this.classBase}--${newValue}`);
|
|
459
|
-
}
|
|
460
|
-
if (oldValue)
|
|
461
|
-
this.classCollection.delete(`${this.classBase}--${oldValue}`);
|
|
462
|
-
}
|
|
463
|
-
validateVariantStyle(newValue, oldValue) {
|
|
464
|
-
if (newValue && !variantStyles$1.includes(newValue))
|
|
465
|
-
throw new Error(`<${this.name}> prop "variantStyle" must match VariantStyleType type.`);
|
|
466
|
-
else if (Boolean(newValue) && !variants$3.includes(this.variant))
|
|
467
|
-
throw new Error(`<${this.name}> prop "variantStyle" must be paired with ${JSON.stringify(variants$3)} "variant" prop.`);
|
|
468
|
-
if (newValue)
|
|
469
|
-
this.classCollection.add(`${this.classBase}--${newValue}`);
|
|
470
|
-
if (oldValue)
|
|
471
|
-
this.classCollection.delete(`${this.classBase}--${oldValue}`);
|
|
472
426
|
}
|
|
473
427
|
/*************
|
|
474
428
|
* Lifecycle *
|
|
475
429
|
*************/
|
|
476
|
-
/**
|
|
477
|
-
* Check if props are well configured on init
|
|
478
|
-
*/
|
|
479
|
-
componentWillLoad() {
|
|
480
|
-
this.validateVariant(this.variant);
|
|
481
|
-
this.validateVariantStyle(this.variantStyle);
|
|
482
|
-
}
|
|
483
430
|
/**
|
|
484
431
|
* Render
|
|
485
432
|
* @returns HTML Element
|
|
486
433
|
*/
|
|
487
434
|
render() {
|
|
488
|
-
|
|
489
|
-
return (h("div", { key: 'b786a9ff3b706dcb24f6b3218feef97e284e2b9a', class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { key: '11a3b421c49864667832919e6d2cbe9ea19f9344', class: "mg-c-card__bar" }), h("slot", { key: '7421932644500c619d34cbe003a0f0bb50b612a7' })));
|
|
435
|
+
return (h("div", { key: 'b8de627bd3018342b2e33f62e1779de8c53fa61e', class: "mg-c-card" }, h("slot", { key: '210e9b12485a345ab50d4ddb85d091cde58551a8' })));
|
|
490
436
|
}
|
|
491
|
-
static get watchers() { return {
|
|
492
|
-
"variant": ["validateVariant"],
|
|
493
|
-
"variantStyle": ["validateVariantStyle"]
|
|
494
|
-
}; }
|
|
495
437
|
};
|
|
496
438
|
MgCard.style = MgCardStyle0;
|
|
497
439
|
|
|
498
|
-
const mgCharacterLeftCss = "mg-character-left.sc-mg-character-left{display:block}";
|
|
440
|
+
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}";
|
|
499
441
|
const MgCharacterLeftStyle0 = mgCharacterLeftCss;
|
|
500
442
|
|
|
501
443
|
const MgCharacterLeft = class {
|
|
@@ -507,7 +449,7 @@ const MgCharacterLeft = class {
|
|
|
507
449
|
}
|
|
508
450
|
validateMaxlength(newValue) {
|
|
509
451
|
if (typeof newValue !== 'number') {
|
|
510
|
-
throw new Error(
|
|
452
|
+
throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${Ze(newValue)}.`);
|
|
511
453
|
}
|
|
512
454
|
}
|
|
513
455
|
/*************
|
|
@@ -525,7 +467,7 @@ const MgCharacterLeft = class {
|
|
|
525
467
|
* @returns HTML Element
|
|
526
468
|
*/
|
|
527
469
|
render() {
|
|
528
|
-
return (h("span", { key: '
|
|
470
|
+
return (h("span", { key: '8702ae39ff70f27de2ffc6988f13836a4b43f169', id: this.identifier, "aria-live": "polite" }, h("span", { key: '0e75b76afb2cf700fa5fff1d565b4236c3d664a1', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: 'f4c4a7b46c0d0879d7ee046f2ea33a686cd91adb', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
|
|
529
471
|
}
|
|
530
472
|
get element() { return getElement(this); }
|
|
531
473
|
static get watchers() { return {
|
|
@@ -534,7 +476,7 @@ const MgCharacterLeft = class {
|
|
|
534
476
|
};
|
|
535
477
|
MgCharacterLeft.style = MgCharacterLeftStyle0;
|
|
536
478
|
|
|
537
|
-
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}}.mg-c-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-c-details__toggle{display:flex;min-height:calc(var(--font-size)*var(--line-height));flex-shrink:0;align-items:center;align-self:flex-start;margin-left:
|
|
479
|
+
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}.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;margin-left:var(--mg-b-size-16);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}}";
|
|
538
480
|
const MgDetailsStyle0 = mgDetailsCss;
|
|
539
481
|
|
|
540
482
|
const MgDetails = class {
|
|
@@ -553,8 +495,8 @@ const MgDetails = class {
|
|
|
553
495
|
this.expanded = false;
|
|
554
496
|
}
|
|
555
497
|
validateTitles(newValue) {
|
|
556
|
-
if (!
|
|
557
|
-
throw new Error(
|
|
498
|
+
if (!Qe(newValue)) {
|
|
499
|
+
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}'".`);
|
|
558
500
|
}
|
|
559
501
|
}
|
|
560
502
|
handleExpanded(newValue) {
|
|
@@ -575,7 +517,7 @@ const MgDetails = class {
|
|
|
575
517
|
* @returns HTML Element
|
|
576
518
|
*/
|
|
577
519
|
render() {
|
|
578
|
-
return (h("details", { key: '
|
|
520
|
+
return (h("details", { key: 'd9bd05ca12f405dd25dda244ec0260691d340223', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '2b7893cc0c54d94981d6500776eb22723e1fb5f2' }, h("slot", { key: '714054624ffc1b6b7261edd166bfd16a256e06ce', name: "summary" }), h("span", { key: 'a257d98ed1e8243eae76d259b09bf7fabbfa66e0', class: "mg-c-details__toggle" }, h("mg-icon", { key: '3ebf16455d25acb3806d4c68e4a2947954f8ff87', icon: "chevron-up", size: "small", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'bc0760888996b7cdf92efe7d7db9efc80acc5d61', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '9a8974cc18e8d9d0f7a26d9ddd168e4c2ca08bcb', class: "mg-c-details__details" }, h("slot", { key: 'daed5ab23c0394f3342fb7f15e9a631840a19a75', name: "details" }))));
|
|
579
521
|
}
|
|
580
522
|
static get watchers() { return {
|
|
581
523
|
"toggleClosed": ["validateTitles"],
|
|
@@ -585,22 +527,22 @@ const MgDetails = class {
|
|
|
585
527
|
};
|
|
586
528
|
MgDetails.style = MgDetailsStyle0;
|
|
587
529
|
|
|
588
|
-
const mgDividerCss = ".mg-c-divider{width:
|
|
530
|
+
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%}";
|
|
589
531
|
const MgDividerStyle0 = mgDividerCss;
|
|
590
532
|
|
|
591
533
|
const MgDivider = class {
|
|
592
534
|
constructor(hostRef) {
|
|
593
535
|
registerInstance(this, hostRef);
|
|
594
|
-
this.
|
|
536
|
+
this.fullWidth = false;
|
|
595
537
|
}
|
|
596
538
|
/**
|
|
597
539
|
* Render
|
|
598
540
|
* @returns HTML Element
|
|
599
541
|
*/
|
|
600
542
|
render() {
|
|
601
|
-
return (h("div", { key: '
|
|
543
|
+
return (h("div", { key: 'b7d74c11f15700cbffa553bf4d688ad291473087', class: {
|
|
602
544
|
'mg-c-divider': true,
|
|
603
|
-
'mg-c-divider--full': this.
|
|
545
|
+
'mg-c-divider--full-width': this.fullWidth,
|
|
604
546
|
} }));
|
|
605
547
|
}
|
|
606
548
|
};
|
|
@@ -615,7 +557,7 @@ const roles = ['form', 'search', 'none', 'presentation'];
|
|
|
615
557
|
*/
|
|
616
558
|
const requiredMessageStatus = ['default', 'hide'];
|
|
617
559
|
|
|
618
|
-
const mgFormCss = ".mg-u-form-legacy{--mg-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:
|
|
560
|
+
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)}";
|
|
619
561
|
const MgFormStyle0 = mgFormCss;
|
|
620
562
|
|
|
621
563
|
const MgForm = class {
|
|
@@ -725,12 +667,12 @@ const MgForm = class {
|
|
|
725
667
|
}
|
|
726
668
|
validateRequiredMessage(newValue) {
|
|
727
669
|
if (newValue && !requiredMessageStatus.includes(newValue)) {
|
|
728
|
-
throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}.`);
|
|
670
|
+
throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
729
671
|
}
|
|
730
672
|
}
|
|
731
673
|
validateAriaRole(newValue) {
|
|
732
674
|
if (newValue && !roles.includes(newValue)) {
|
|
733
|
-
throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}.`);
|
|
675
|
+
throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
734
676
|
}
|
|
735
677
|
}
|
|
736
678
|
handlelabelOnTop(newValue) {
|
|
@@ -802,7 +744,7 @@ const MgForm = class {
|
|
|
802
744
|
* @returns HTML Element
|
|
803
745
|
*/
|
|
804
746
|
render() {
|
|
805
|
-
return (h("form", { key: '
|
|
747
|
+
return (h("form", { key: '6c3071735d3ec06f215600c682455a8927f19cab', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: 'e8914a58d0b9c10d3510fe8f3001b3f84afbd732', innerHTML: this.requiredMessageText }), h("slot", { key: 'abf559e3999042712b7fa5cbe1c9d8143cd21e70' }), !this.readonly && !this.disabled && h("slot", { key: '0a83d6babfa0252a1ffed634737ce012d8304f2d', name: "actions" })));
|
|
806
748
|
}
|
|
807
749
|
get element() { return getElement(this); }
|
|
808
750
|
static get watchers() { return {
|
|
@@ -818,7 +760,7 @@ MgForm.style = MgFormStyle0;
|
|
|
818
760
|
/**
|
|
819
761
|
* List of all possibles sizes
|
|
820
762
|
*/
|
|
821
|
-
const sizes$1 = ['small', '
|
|
763
|
+
const sizes$1 = ['small', 'medium', 'large', 'xlarge', 'xxlarge'];
|
|
822
764
|
/**
|
|
823
765
|
* List of all possibles variants
|
|
824
766
|
*/
|
|
@@ -826,11 +768,11 @@ const variants$2 = ['success', 'warning', 'danger', 'info', 'app'];
|
|
|
826
768
|
/**
|
|
827
769
|
* List of all possibles variants styles
|
|
828
770
|
*/
|
|
829
|
-
const variantStyles = ['icon', 'background', 'full'];
|
|
771
|
+
const variantStyles$1 = ['icon', 'background', 'full'];
|
|
830
772
|
|
|
831
|
-
const icons = { 'address-card': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.21 2.67H1.79c-.63 0-1.14.51-1.14 1.14v8.38c0 .63.51 1.14 1.14 1.14h12.42c.63 0 1.14-.51 1.14-1.14V3.81c0-.63-.51-1.14-1.14-1.14M5.35 5c.84 0 1.53.69 1.53 1.53s-.69 1.53-1.53 1.53-1.53-.69-1.53-1.53v-.05c.02-.83.7-1.49 1.53-1.48M8 10.59a.5.5 0 0 1-.53.46H3.21a.5.5 0 0 1-.53-.46v-.46c.07-.81.78-1.42 1.6-1.37h.12c.61.26 1.29.26 1.9 0h.12c.81-.04 1.51.56 1.58 1.37zm5.34-1.26c0 .1-.09.19-.19.19H9.73c-.1 0-.18-.07-.19-.17V9c0-.1.09-.19.19-.19h3.43c.1 0 .18.09.19.19v.33zm0-1.52c0 .1-.09.18-.19.19H9.73c-.1 0-.19-.09-.19-.19v-.38c0-.1.07-.18.17-.19h3.45c.1 0 .19.09.19.19v.38zm0-1.52c0 .1-.09.18-.19.19H9.73c-.1 0-.19-.09-.19-.19V5.9c0-.1.09-.19.19-.19h3.43c.11 0 .19.09.19.2v.38z"/></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="M12.26 12.225a6 6 0 1 1 .863-7.348L12 6h3V3l-1.152 1.152a7 7 0 1 0-.88 8.78z"/><path fill="currentColor" d="m10.351 10.321.005-.005v.01zm-.705.705.705-.705-2.445-2.445v-3.59h-1v4z"/></svg>', 'arrow-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13 10.1h-2.77c-.16 0-.3-.12-.32-.28V.94c0-.17-.14-.3-.31-.29H6.37A.325.325 0 0 0 6 .92v8.89c0 .16-.13.29-.29.29H3c-.17 0-.3.12-.31.29 0 .08.02.16.08.22l5.06 4.58c.13.11.33.11.46 0l5-4.58c.12-.11.12-.29.01-.41h-.01c-.07-.1-.17-.1-.29-.1"/></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="m1.98 3.47 8.75 8.75H6.94c-.58 0-1.05.47-1.05 1.06s.47 1.05 1.05 1.05h6.33c.58 0 1.05-.47 1.05-1.05V6.94a1.05 1.05 0 1 0-2.1 0v3.79L3.47 1.98c-.41-.41-1.08-.41-1.49 0s-.41 1.08 0 1.49"/></svg>', 'arrow-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.88 12.93v-2.75c-.01-.17.11-.31.28-.32H15c.17-.01.3-.16.29-.33V6.32A.31.31 0 0 0 15 6H6.17c-.16-.02-.29-.15-.29-.31V2.93a.295.295 0 0 0-.28-.32c-.09 0-.17.03-.23.09L.79 7.76c-.11.13-.11.33 0 .46l4.58 5c.12.12.31.12.43 0 .06-.08.09-.19.08-.29"/></svg>', 'arrow-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10.12 2.99v2.75c.01.17-.11.31-.28.32H1c-.17.01-.3.16-.29.33V9.6c0 .17.12.31.29.32h8.83c.16.02.29.15.29.31v2.76c-.01.17.11.31.28.32.09 0 .17-.03.23-.09l4.58-5.06c.11-.13.11-.33 0-.46l-4.58-5a.3.3 0 0 0-.43 0c-.06.08-.09.19-.08.29"/></svg>', 'arrow-rotate': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.02 1.67c-1.6 0-3.15.59-4.33 1.67a6.316 6.316 0 0 0-.38 8.94 6.324 6.324 0 0 0 8.94.37.29.29 0 0 0 0-.42l-1-1a.296.296 0 0 0-.41 0 4.3 4.3 0 0 1-5.76-.09 4.276 4.276 0 0 1-.21-6.06 4.276 4.276 0 0 1 6.06-.21L9.86 5.95c-.11.12-.18.27-.18.43 0 .34.28.62.62.62h3.44c.34-.01.6-.29.59-.63V2.94a.62.62 0 0 0-.18-.44.61.61 0 0 0-.85 0l-.91.91a6.37 6.37 0 0 0-4.38-1.75h.02z"/></svg>', 'arrow-rotate-backward': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1.67c-1.63 0-3.2.63-4.38 1.75l-.91-.91a.6.6 0 0 0-.85-.01h-.01a.62.62 0 0 0-.18.44v3.43c-.01.34.25.62.59.63H5.7c.34 0 .62-.28.62-.62 0-.16-.07-.31-.18-.43L5.07 4.87a4.276 4.276 0 0 1 6.06.21 4.276 4.276 0 0 1-.21 6.06 4.3 4.3 0 0 1-5.76.09.296.296 0 0 0-.41 0l-1 1a.29.29 0 0 0 0 .42 6.324 6.324 0 0 0 8.94-.37 6.316 6.316 0 0 0-.38-8.94 6.37 6.37 0 0 0-4.33-1.67z"/></svg>', 'arrow-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.06 5.82h2.75c.16 0 .3.12.32.28V15c.01.17.16.3.33.29h3.21c.16.02.31-.1.33-.27V6.11c0-.17.14-.3.31-.29h2.75c.17 0 .31-.12.32-.28 0-.08-.03-.17-.09-.23L8.23.73a.36.36 0 0 0-.46 0l-5 4.58a.29.29 0 0 0 0 .42c.05.1.15.09.29.09"/></svg>', 'arrow-up-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m3.47 14.02 8.75-8.75v3.78c0 .58.47 1.05 1.06 1.05s1.05-.47 1.05-1.05V2.72c0-.58-.47-1.05-1.05-1.05H6.94a1.05 1.05 0 1 0 0 2.1h3.78l-8.74 8.76c-.41.41-.41 1.08 0 1.49s1.08.41 1.49 0"/></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="M5.81 9.47H.67v1.47h5.14v2.2l2.93-2.93-2.93-2.93v2.2zm4.39-.73v-2.2h5.14V5.07H10.2v-2.2L7.27 5.8l2.93 2.93z"/></svg>', 'arrows-right-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10.68 10.78c.16.17.16.45-.02.61l-2.8 2.78a.43.43 0 0 1-.31.12.42.42 0 0 1-.31-.12l-2.8-2.78a.44.44 0 0 1 0-.62.44.44 0 0 1 .62 0l2.06 2.05V5.38H2.11c-.24 0-.44-.19-.44-.44 0-.24.2-.44.44-.44H8v8.32l2.06-2.05a.44.44 0 0 1 .62 0zm3.53-6.14-2.78-2.8a.44.44 0 0 0-.61-.02.44.44 0 0 0 0 .62l2.05 2.06H8.89v.88h3.98l-2.05 2.06a.44.44 0 0 0 0 .62c.17.17.45.17.62 0l2.78-2.8s.07-.09.09-.14.03-.11.03-.17c0-.11-.04-.23-.12-.31z"/></svg>', 'arrows-right-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M.73 5.65v-.42a.64.64 0 0 1 .64-.64H12V3.31a.64.64 0 0 1 .64-.64.63.63 0 0 1 .45.18L15.19 5a.63.63 0 0 1 0 .9L13.05 8A.65.65 0 0 1 12 7.57V6.29H1.37a.64.64 0 0 1-.64-.64m14 4.06H4.09V8.43A.64.64 0 0 0 3 8L.87 10.11a.63.63 0 0 0 0 .9L3 13.15a.64.64 0 0 0 1.047-.206.6.6 0 0 0 .043-.244v-1.29h10.64a.63.63 0 0 0 .64-.64v-.42a.63.63 0 0 0-.64-.64"/></svg>', 'arrows-rotate': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.7 7h-3.4c-.3 0-.6-.3-.6-.6 0-.1.1-.3.2-.4l1-1.1c-1.7-1.6-4.4-1.5-6 .2-.5.5-.8 1.2-1 1.9H1.8c.6-3.5 3.9-5.8 7.4-5.2 1.1.2 2.3.8 3.1 1.6l1-.9c.2-.2.6-.2.8 0 .1.1.2.3.2.4v3.4c0 .4-.3.7-.6.7M2.3 9h3.4c.3 0 .6.3.6.6 0 .2-.1.3-.2.4L5 11.1c1.7 1.6 4.4 1.5 6-.2.6-.5 1-1.2 1.2-1.9h2.1c-.6 3.5-3.8 5.8-7.3 5.2-1.3-.2-2.4-.8-3.4-1.7l-.9.9c-.2.2-.6.2-.9 0-.1-.1-.2-.3-.2-.4V9.6c.1-.3.3-.6.7-.6"/></svg>', 'arrows-rotate-backward': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2.3 7h3.4c.3 0 .6-.3.6-.6 0-.1-.1-.3-.2-.4l-1-1.1c1.7-1.6 4.4-1.5 6 .2.5.5.8 1.2 1 1.9h2.1c-.6-3.5-3.9-5.8-7.4-5.2-1.1.2-2.3.8-3.1 1.6l-1-.9c-.2-.2-.6-.2-.8 0-.1.1-.2.3-.2.4v3.4c0 .4.3.7.6.7m11.4 2h-3.4c-.3 0-.6.3-.6.6 0 .2.1.3.2.4l1.1 1.1c-1.7 1.6-4.4 1.5-6-.2-.6-.5-1-1.2-1.2-1.9H1.7c.6 3.5 3.8 5.8 7.3 5.2 1.3-.2 2.4-.8 3.4-1.7l.9.9c.2.2.6.2.9 0 .1-.1.2-.3.2-.4V9.6c-.1-.3-.3-.6-.7-.6"/></svg>', 'ban': '<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 .67a7.33 7.33 0 1 0 0 14.66A7.33 7.33 0 0 0 8 .67m3.85 3.48a5.46 5.46 0 0 1 .61 7L4.88 3.54a5.46 5.46 0 0 1 6.97.61m-7.7 7.7a5.45 5.45 0 0 1-.61-7l7.58 7.58a5.46 5.46 0 0 1-7-.61z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></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.3v.297l.26.142 1.508.822c.455.248.28.939-.239.939H3.002c-.514 0-.694-.681-.247-.935l1.461-.83.253-.144V6a3.5 3.5 0 0 1 7 0zm-3.473 5.2a1.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" d="M12.8.7H3.2c-.3 0-.5.2-.5.5v13.7c0 .3.2.5.5.5h9.7c.3 0 .5-.2.5-.5V1.2c-.1-.3-.3-.5-.6-.5M5.6 13.4q0 .3-.3.3H4.1q-.3 0-.3-.3v-1.2q0-.3.3-.3h1.2q.3 0 .3.3zm0-3.3q0 .3-.3.3H4.1q-.3 0-.3-.3V8.9q0-.3.3-.3h1.2q.3 0 .3.3zm3.3 3.3q0 .3-.3.3H7.4q-.3 0-.3-.3v-1.2q0-.3.3-.3h1.2q.3 0 .3.3zm0-3.3q0 .3-.3.3H7.4q-.3 0-.3-.3V8.9q0-.3.3-.3h1.2q.3 0 .3.3zm3.3 3.3q0 .3-.3.3h-1.2q-.3 0-.3-.3V8.9q0-.3.3-.3h1.2q.3 0 .3.3zm0-7.2q0 .3-.3.3H4.1q-.3 0-.3-.3V2.6q0-.3.3-.3h7.8q.3 0 .3.3z"/></svg>', 'calendar': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 3.5c0-.55-.45-1-1-1h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v.98s0 .02.02.02H2v9c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-9h-.02s.02 0 .02-.02zm-11 10v-8h10v8z"/></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 2.5h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10c0-.55-.45-1-1-1m-10 11v-8h10v8zm0-9v-1h10v1z"/></svg>', 'check': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m15.27 4.23-1.11-1.18c-.11-.1-.27-.1-.38 0L6 10.36l-3.76-4a.187.187 0 0 0-.26 0L.71 7.6c-.07.07-.07.19 0 .26l5.12 5.41c.07.07.18.07.25 0l1.3-1.23 7.87-7.45c.1-.1.11-.26.01-.37h.01z"/></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="M7.43 12.21.9 5.69a.81.81 0 0 1 0-1.14l.76-.77a.81.81 0 0 1 1.14 0L8 9l5.2-5.18a.81.81 0 0 1 1.14 0l.76.77a.8.8 0 0 1 0 1.13l-6.53 6.49a.79.79 0 0 1-1.13 0z"/></svg>', 'chevron-down-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="M15.33 8A7.33 7.33 0 1 1 .67 8a7.33 7.33 0 0 1 14.66 0M8.5 11.37l4-4a.7.7 0 0 0 0-1l-.5-.52a.72.72 0 0 0-1 0l-3 3-3-3a.72.72 0 0 0-1 0l-.5.51a.7.7 0 0 0 0 1l4 4a.7.7 0 0 0 1 0z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></svg>', 'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.79 7.43 10.31.9c.32-.31.82-.31 1.14 0l.77.76c.31.32.31.82 0 1.14L7 8l5.18 5.2c.31.32.31.82 0 1.14l-.77.76c-.31.31-.82.31-1.13 0L3.79 8.57a.79.79 0 0 1-.01-1.12h.01z"/></svg>', 'chevron-left-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 15.33C3.95 15.33.67 12.05.67 8S3.95.67 8 .67 15.33 3.95 15.33 8 12.05 15.33 8 15.33M4.63 8.5l4 4c.27.28.71.28.99.01h.01l.52-.51c.27-.28.27-.72 0-1l-3-3 3-3c.27-.28.27-.72 0-1l-.51-.5a.697.697 0 0 0-.99-.01h-.01l-4 4.01c-.28.27-.28.71-.01.99z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></svg>', 'chevron-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.21 8.57 5.69 15.1c-.32.31-.82.31-1.14 0l-.77-.76a.815.815 0 0 1 0-1.14L9 8 3.78 2.8a.815.815 0 0 1 0-1.14L4.55.9c.31-.31.82-.31 1.13 0l6.53 6.53c.31.3.32.81.01 1.12h-.01z"/></svg>', 'chevron-right-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 .67c4.05 0 7.33 3.28 7.33 7.33S12.05 15.33 8 15.33.67 12.05.67 8 3.95.67 8 .67m3.37 6.83-4-4a.697.697 0 0 0-.99-.01h-.01L5.85 4c-.27.28-.27.72 0 1l3 3-3 3c-.27.28-.27.72 0 1l.51.5c.27.28.71.28.99.01h.01l4-4.01c.28-.27.28-.71.01-.99z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></svg>', 'chevron-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8.57 3.79 6.53 6.52a.81.81 0 0 1 0 1.14l-.76.77a.81.81 0 0 1-1.14 0L8 7l-5.2 5.22a.81.81 0 0 1-1.14 0l-.76-.77a.8.8 0 0 1 0-1.13l6.53-6.53a.79.79 0 0 1 1.13 0z"/></svg>', 'chevron-up-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="M.67 8C.67 3.95 3.95.67 8 .67S15.33 3.95 15.33 8 12.05 15.33 8 15.33.67 12.05.67 8M7.5 4.63l-4 4c-.28.27-.28.71-.01.99h.01l.5.53c.28.27.72.27 1 0l3-3 3 3c.28.27.72.27 1 0l.5-.51c.28-.27.28-.71.01-.99h-.01l-4-4.01a.697.697 0 0 0-.99-.01z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></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="M14 3.05 12.95 2 8 6.95 3.05 2 2 3.05 6.95 8 2 12.95 3.05 14 8 9.05 12.95 14 14 12.95 9.05 8z"/></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="M1.67 8.7H7.3V1.67H1.67v7.04zm0 5.63H7.3v-4.22H1.67zm7.04 0h5.63V7.3H8.71v7.04zm0-12.67v4.23h5.63V1.67H8.71z"/></svg>', 'dashboard-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.33 2.67v2.22H9.7V2.67zm-7.04 0V7.7H2.67V2.67H6.3m7.04 5.63v5.04H9.71V8.3zM6.3 11.11v2.22H2.67v-2.22zm8.03-9.44H8.7v4.22h5.63zm-7.04 0H1.67v7.04H7.3V1.67zm7.04 5.63H8.7v7.04h5.63zm-7.04 2.81H1.67v4.22H7.3v-4.22z"/></svg>', 'download': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.4 2v4.1q0 .3-.3.3H4q-.3 0-.3.3c0 .1 0 .2.1.2l4 4c.1.1.3.1.4 0l4-4c.1-.1.1-.3 0-.4s-.1-.1-.2-.1H9.9q-.3 0-.3-.3V2q0-.3-.3-.3H6.7c-.1 0-.3.1-.3.3m7.9 11v1q0 .3-.3.3H2q-.3 0-.3-.3v-1q0-.3.3-.3h12q.3 0 .3.3"/></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" fill-rule="evenodd" d="M12.34 4.07a8.1 8.1 0 0 1 2.9 3.52 1 1 0 0 1 0 .82A8.12 8.12 0 0 1 8 13.33 8.12 8.12 0 0 1 .76 8.41a1 1 0 0 1 0-.82A8.12 8.12 0 0 1 8 2.67a8.1 8.1 0 0 1 4.34 1.4m-6.375 6.925a3.66 3.66 0 1 0 4.09-6.07 3.66 3.66 0 0 0-4.09 6.07M10.45 7.96a2.44 2.44 0 1 1-4.88 0 2.44 2.44 0 0 1 4.88 0" 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="M2.51 5 .81 3.84l.82-1.17 13.5 9.47-.81 1.17-2-1.38A8 8 0 0 1 8 13.33 8.13 8.13 0 0 1 .76 8.41a1 1 0 0 1 0-.82A8.2 8.2 0 0 1 2.51 5m2.922 5.559A3.66 3.66 0 0 0 8 11.619a3.65 3.65 0 0 0 2.49-.93l-1.068-.75a2.43 2.43 0 0 1-3.746-2.631L4.64 6.58A3.8 3.8 0 0 0 4.35 8c.01.962.4 1.881 1.082 2.559m9.808-2.97A8.13 8.13 0 0 0 8 2.67a8.1 8.1 0 0 0-2.89.64l1.72 1.2A3.6 3.6 0 0 1 8 4.3a3.65 3.65 0 0 1 3.64 3.6l2.77 1.93c.318-.443.59-.919.81-1.42a1 1 0 0 0 .02-.82M9.416 5.977c.367.258.656.612.834 1.024L8.17 5.54a2.43 2.43 0 0 1 1.246.436" clip-rule="evenodd"/></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-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 3v10h10V5.414l-1.207-1.207L10.586 3H10v3H4V3zm2 0h4v2H5zm4-1h1.586a1 1 0 0 1 .707.293L12.5 3.5l1.207 1.207a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm-1 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2m-2-1a2 2 0 1 1 4 0 2 2 0 0 1-4 0" 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-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="M8 1.67c-1.64 0-3.21.62-4.4 1.75l-.91-.91a.6.6 0 0 0-.85 0c-.12.11-.18.27-.18.43v3.43c0 .33.25.61.58.63h3.44c.34 0 .62-.28.62-.62A.7.7 0 0 0 6.12 6L5.05 4.87a4.276 4.276 0 0 1 6.06.21 4.276 4.276 0 0 1-.21 6.06 4.303 4.303 0 0 1-5.76.09.296.296 0 0 0-.41 0l-1 1c-.11.12-.11.3 0 .42a6.324 6.324 0 0 0 8.94-.36 6.324 6.324 0 0 0-.36-8.94 6.33 6.33 0 0 0-4.33-1.68zM9.85 9.3l-.36.36c-.12.11-.3.11-.42 0L7.45 8V5.15c0-.16.12-.29.28-.3h.52c.16 0 .29.12.3.28v2.45l1.3 1.3c.11.12.11.3 0 .42"/></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>', 'life-ring': '<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 .67a7.33 7.33 0 1 0 0 14.66A7.33 7.33 0 0 0 8 .67m5.14 3.53-1.88 1.88a3.9 3.9 0 0 0-1.34-1.34l1.88-1.88c.51.38.96.83 1.34 1.34M8 10.84a2.84 2.84 0 1 1 0-5.68 2.84 2.84 0 0 1 0 5.68m-3.8-8 1.88 1.9c-.55.33-1.01.79-1.34 1.34L2.86 4.2c.38-.51.83-.96 1.34-1.34zM2.86 11.8l1.88-1.88c.33.55.79 1.01 1.34 1.34L4.2 13.14c-.51-.38-.96-.83-1.34-1.34m8.94 1.34-1.88-1.88a3.9 3.9 0 0 0 1.34-1.34l1.88 1.88c-.38.51-.83.96-1.34 1.34"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></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" d="M9.75 6.25a3.75 3.75 0 0 1 0 5.31l-1.66 1.67a3.76 3.76 0 0 1-5.32 0 3.76 3.76 0 0 1 0-5.32l.92-.92c.15-.15.4-.16.56 0 .07.07.11.16.12.26.02.44.1.88.24 1.3.05.14.01.3-.09.41l-.32.32c-.72.67-.76 1.8-.09 2.52s1.8.76 2.52.09c.03-.02.05-.05.07-.07l1.66-1.66a1.775 1.775 0 0 0-.26-2.73.4.4 0 0 1-.17-.31.98.98 0 0 1 .29-.74l.52-.52c.14-.14.35-.15.51-.04.18.13.35.27.51.43zm3.49-3.48a3.76 3.76 0 0 0-5.32 0L6.26 4.43a3.772 3.772 0 0 0 .52 5.75c.16.11.37.09.51-.04l.52-.52c.2-.19.3-.46.29-.74a.38.38 0 0 0-.17-.31 1.775 1.775 0 0 1-.26-2.73l1.66-1.66c.68-.71 1.81-.74 2.52-.06s.74 1.81.06 2.52c-.02.03-.05.05-.07.07l-.32.32c-.11.11-.14.27-.09.41.14.42.22.86.24 1.3 0 .22.19.39.41.38.1 0 .19-.05.26-.12l.92-.92a3.76 3.76 0 0 0 0-5.32z"/></svg>', 'list': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M1.9 2.68c-.67 0-1.22.56-1.21 1.23 0 .67.56 1.22 1.23 1.21.67 0 1.22-.56 1.21-1.23 0-.32-.13-.63-.36-.86s-.54-.36-.87-.35m0 4.09a1.23 1.23 0 1 0 0 2.46 1.23 1.23 0 1 0 0-2.46m0 4.09a1.23 1.23 0 1 0 0 2.46 1.23 1.23 0 1 0 0-2.46m13 .41H5.18c-.23 0-.41.18-.41.41v.82c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41v-.82c0-.23-.18-.41-.41-.41zm0-8.18H5.18c-.23 0-.41.18-.41.41v.81c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41V3.5c0-.23-.18-.41-.41-.41zm0 4.09H5.18c-.23 0-.41.18-.41.41v.82c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41v-.82c0-.23-.18-.41-.41-.41z"/></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="m10.97 7.78-4-4a.29.29 0 0 0-.42 0c-.07.06-.12.15-.13.24v2.07c0 .17-.13.3-.3.32H1.97c-.16 0-.29.12-.3.28v2.58c0 .16.12.29.28.3h4.16c.17 0 .3.14.3.31v2.14c0 .16.12.29.28.3.11.01.21-.03.28-.11l4-4c.11-.12.11-.3 0-.42zm1.81 4.96V3.26H9.31a.3.3 0 0 1-.3-.3v-.97c0-.16.13-.3.3-.3h4.74c.16 0 .3.13.3.3v12.03a.3.3 0 0 1-.3.3H9.31a.3.3 0 0 1-.3-.3v-.97c0-.16.13-.3.3-.3h3.47z"/></svg>', 'log-out': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m14.23 7.79-4-4a.29.29 0 0 0-.42 0c-.07.06-.12.15-.13.24V6.1c0 .17-.13.3-.3.32H5.23c-.16 0-.29.12-.3.28v2.58c0 .16.12.29.28.3h4.16c.17 0 .3.14.3.31v2.14c0 .16.12.29.28.3.11.01.21-.03.28-.11l4-4c.11-.12.11-.3 0-.42zm-11-4.53v9.5H6.7c.16 0 .3.13.3.3v.97a.3.3 0 0 1-.3.3H1.97a.3.3 0 0 1-.3-.3V1.99c0-.16.13-.3.3-.3H6.7c.16 0 .3.13.3.3v.97a.3.3 0 0 1-.3.3z"/></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" d="M2.5 12.1c-.7 0-1.2-.5-1.2-1.2V2.5c0-.7.5-1.2 1.2-1.2h8.4c.7 0 1.2.5 1.2 1.2H3c-.3 0-.5.2-.5.5zm11.8-7.4v6h-3.6v3.6h-6c-.7 0-1.2-.5-1.2-1.2V4.7c0-.7.5-1.2 1.2-1.2h8.4c.7 0 1.2.5 1.2 1.2M8.9 8.9h-3v1.2h3zm3-2.4h-6v1.2h6zm-.7 7.3v-2.6h2.6"/></svg>', 'notes-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.11 4.74v5.38h-3v3H4.73V4.74zm0-1.2H4.73a1.2 1.2 0 0 0-1.2 1.2v8.38a1.2 1.2 0 0 0 1.2 1.19h6l3.59-3.59v-6a1.2 1.2 0 0 0-1.21-1.18m-4.19 6.58h-3V8.93h3zm3-2.39h-6v-1.2h6zM3.8 11.19h-1V2.81h8.38v1h1.2v-1a1.2 1.2 0 0 0-1.2-1.2H2.81a1.2 1.2 0 0 0-1.2 1.2v8.38a1.2 1.2 0 0 0 1.2 1.2h1z"/></svg>', 'paper-plane': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 1.69 1.84 7a.28.28 0 0 0-.15.36.3.3 0 0 0 .16.15l3.27 1.82a.57.57 0 0 0 .61-.06l6.45-5.57c.05 0 .15-.1.19-.06s0 .14-.06.18l-5.59 6.29a.52.52 0 0 0 0 .63l2.09 3.44a.28.28 0 0 0 .37.12.3.3 0 0 0 .13-.12l5-12.11a.3.3 0 0 0-.14-.37.3.3 0 0 0-.17-.01"/></svg>', 'paper-plane-slash': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m2.67 1.69 11.59 11.59-1 1-2.79-2.8-1.1 2.67c-.03.05-.08.09-.13.12-.14.07-.3.01-.37-.12l-2.12-3.41a.525.525 0 0 1 0-.63L7.82 8.9l-.76-.76-1.3 1.13c-.17.14-.41.16-.61.06L1.88 7.51a.3.3 0 0 1-.16-.15c-.06-.14.01-.3.15-.36l2.81-1.24-3-3zm11.53 0a.28.28 0 0 0-.22 0L7.53 4.51l1.73 1.73 3-2.54s.15-.1.19-.06 0 .14-.06.18L9.75 6.73l1.88 1.88 2.71-6.54c.05-.14 0-.3-.14-.37z"/></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.41 6.59V1.92a.24.24 0 0 0-.24-.25H6.84a.24.24 0 0 0-.25.24v4.68H1.92a.24.24 0 0 0-.25.24v2.33a.24.24 0 0 0 .24.25h4.68v4.67a.24.24 0 0 0 .24.25h2.33a.24.24 0 0 0 .25-.24V9.41h4.67a.24.24 0 0 0 .25-.24V6.84a.24.24 0 0 0-.24-.25z"/></svg>', 'plus-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 .67m4.26 8.16c0 .19-.17.35-.36.35H9.18v2.72c0 .19-.16.35-.35.36H7.17c-.19 0-.35-.17-.35-.36V9.18H4.1a.37.37 0 0 1-.36-.35V7.17c0-.19.17-.35.36-.35h2.72V4.1c0-.19.16-.35.35-.36h1.66c.19 0 .35.17.35.36v2.72h2.72c.19 0 .35.16.36.35z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></svg>', 'question-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>', '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="M15.13 10.45a.51.51 0 0 1 0 .81l-2.29 1.91c-.29.24-.71.24-1 0-.12-.1-.2-.24-.2-.4v-.95H10c-.09 0-.18-.03-.25-.09l-2-1.8 1.49-1.37 1.51 1.35h.92V9c.04-.35.34-.6.69-.57.18 0 .35.06.48.17l2.29 1.9zM1 6.09h2.42l1.51 1.35 1.53-1.36-2-1.8a.4.4 0 0 0-.26-.09H1a.33.33 0 0 0-.34.29v1.33c.02.17.17.3.34.28m10.66 0v1c.04.35.34.6.69.57.18 0 .35-.06.48-.17l2.29-1.9a.51.51 0 0 0 0-.81l-2.28-1.95a.81.81 0 0 0-1 0c-.12.1-.2.25-.2.41v1H10c-.09 0-.18.03-.25.09L3.42 9.91H1a.313.313 0 0 0-.34.28v1.33c.02.17.17.3.34.29h3.18c.09 0 .19-.03.26-.09l6.31-5.62h.91z"/></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" d="M1.67 7.9V2.85a1.18 1.18 0 0 1 1.18-1.18H7.9a1.18 1.18 0 0 1 .84.33L14 7.26a1.2 1.2 0 0 1 0 1.68L8.94 14a1.2 1.2 0 0 1-1.68 0L2 8.74a1.18 1.18 0 0 1-.33-.84m2.77-4.65a1.19 1.19 0 1 0-.02 2.38 1.19 1.19 0 0 0 .02-2.38"/></svg>', 'tags': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m7.22 3 4.86 4.37a.94.94 0 0 1 0 1.38L7.4 13a1.17 1.17 0 0 1-1.55 0L1 8.63a1 1 0 0 1-.33-.71V3.71a1 1 0 0 1 1.1-1h4.67a1.12 1.12 0 0 1 .78.29M2.602 5.94a1.13 1.13 0 1 0 1.256-1.88 1.13 1.13 0 0 0-1.256 1.88M10.15 3 15 7.37a.94.94 0 0 1 0 1.42L10.32 13a1.17 1.17 0 0 1-1.55 0l3.99-3.55a1.758 1.758 0 0 0 0-2.65l-4.5-4.09h1.12c.284-.005.56.1.77.29" 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.461V2h4.922c1.081 0 2.058.715 2.484 1.818l.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"><g clip-path="url(#a)"><path fill="currentColor" d="M8 15.33A7.33 7.33 0 1 1 15.33 8 7.34 7.34 0 0 1 8 15.33M8 1.71a6.29 6.29 0 1 0 0 12.58A6.29 6.29 0 0 0 8 1.71M13.74 8A5.74 5.74 0 1 1 8 2.25 5.75 5.75 0 0 1 13.74 8M8 3.77a1.07 1.07 0 1 0 0 2.14 1.07 1.07 0 0 0 0-2.14M4.67 5.63c-.6-.14-.87.86-.32 1s1.79.43 2.57.55a11.25 11.25 0 0 1-.72 4.47.54.54 0 0 0 .85.65 6.9 6.9 0 0 0 .78-2.42c0-.07.31-.11.33 0 .11.768.322 1.518.63 2.23.3.65 1.31.26 1-.38a11.5 11.5 0 0 1-.76-4.58 21 21 0 0 0 2.41-.45.55.55 0 1 0-.2-1.08 11.47 11.47 0 0 1-6.57.01"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></svg>', 'unlink': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9.74 6.25c-.16-.17-.32-.3-.5-.43-.14-.09-.31-.1-.44 0l1.81 1.81c-.17-.5-.47-.98-.87-1.38m-1.1 3.51c-.07.15-.17.28-.29.4l-1.66 1.66s-.04.05-.07.07c-.72.67-1.85.63-2.52-.09s-.63-1.85.09-2.52l.32-.32c.1-.11.14-.27.09-.41-.14-.42-.22-.86-.24-1.3a.42.42 0 0 0-.12-.26.395.395 0 0 0-.56 0l-.92.92a3.76 3.76 0 0 0 0 5.32 3.76 3.76 0 0 0 5.32 0l1.66-1.67c.12-.12.23-.25.32-.38zm4.61-7h-.02a3.78 3.78 0 0 0-5.32 0L6.83 3.84l1.41 1.41 1.08-1.08c.68-.71 1.81-.74 2.52-.06s.74 1.81.06 2.52c-.02.03-.05.05-.07.07l-.32.32c-.11.11-.14.27-.09.41.13.4.21.81.23 1.23l.44.44c.09 0 .18-.05.24-.11l.92-.92a3.76 3.76 0 0 0 0-5.32zm.97 10.52-1.03 1.03-5.14-5.14c-.04.17-.12.33-.25.45l-.52.52c-.14.13-.35.15-.51.04-.18-.13-.35-.27-.5-.42-.74-.74-1.11-1.7-1.11-2.67 0-.24.02-.49.08-.73l-3.6-3.6 1.03-1.03z"/></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" d="M9.58 10.74V6.59a.31.31 0 0 1 .31-.3H12a.3.3 0 0 0 .21-.52l-4-4a.29.29 0 0 0-.42 0l-4 4a.3.3 0 0 0 .21.52h2.11a.31.31 0 0 1 .31.3v4.15a.3.3 0 0 0 .3.3h2.56a.3.3 0 0 0 .3-.3M14.33 14v-1a.29.29 0 0 0-.29-.3H2a.29.29 0 0 0-.29.3v1a.29.29 0 0 0 .29.29h12a.29.29 0 0 0 .33-.29"/></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"><g clip-path="url(#a)"><path fill="currentColor" d="M8 .62C3.95.61.66 3.9.65 7.95c0 4.05 3.28 7.34 7.33 7.35 4.04 0 7.33-3.26 7.35-7.3.02-4.05-3.25-7.36-7.3-7.38zm0 .75c3.64 0 6.59 2.96 6.58 6.6V8c0 1.35-.41 2.66-1.19 3.76a2.71 2.71 0 0 0-2.66-2.37H9.54c-.98.46-2.1.46-3.08 0H5.28c-1.36 0-2.5 1.02-2.67 2.37A6.5 6.5 0 0 1 1.42 8a6.59 6.59 0 0 1 6.55-6.63zM5 5.63c0-1.68 1.37-3.05 3.05-3.05s3.05 1.37 3.05 3.05-1.37 3.05-3.05 3.05H8c-1.66-.03-3-1.39-3-3.05"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></svg>', 'user-group': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.15 4.12c-.81-.01-1.47.65-1.48 1.46 0 .82.65 1.47 1.46 1.48s1.47-.65 1.48-1.46-.65-1.47-1.46-1.48m-10.04.01a1.47 1.47 0 0 0-1.58 1.59c.06.71.62 1.28 1.34 1.34.81.07 1.52-.53 1.59-1.34.06-.81-.54-1.52-1.35-1.59m7.36.39c-.22-.84-.87-1.51-1.71-1.75-1.36-.41-2.8.36-3.22 1.72-.18.61-.13 1.27.14 1.85.41.9 1.33 1.48 2.32 1.45 1.41.01 2.56-1.14 2.57-2.55 0-.24-.03-.49-.1-.72m-.71 4h-.19c-.99.49-2.14.49-3.13 0h-.19c-1.46 0-2.64 1.18-2.64 2.64v2.69c1.23.93 2.74 1.47 4.39 1.47s3.17-.55 4.4-1.48v-2.68c0-1.46-1.18-2.64-2.64-2.64m5.52.25a7.3 7.3 0 0 1-1.65 3.91c-.08.1-.16.19-.25.28-.08.09-.17.18-.25.27v-.55h.03v-.72s.01-.07 0-.1v-.66c.01-1.25-.66-2.4-1.76-3 .27-.26.63-.41 1-.41h1.51c.63.01 1.17.41 1.37.98M2.86 11.16v1.52h.01v.55l-.28-.31c-.08-.08-.15-.16-.22-.24A7.24 7.24 0 0 1 .74 8.86c.16-.62.72-1.07 1.4-1.07h1.47c.37-.01.73.12 1.01.37-1.1.6-1.77 1.75-1.76 3"/></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="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0m1 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0m-8 8a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3zm-1 0a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4 1 1 0 0 1-1 1H3a1 1 0 0 1-1-1" 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-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 8.92c-1.5 0-2.72-1.22-2.72-2.72S6.5 3.48 8 3.48s2.72 1.22 2.72 2.72S9.5 8.92 8 8.92m0-4.64a1.92 1.92 0 1 0 .001 3.841A1.92 1.92 0 0 0 8 4.281m4.97-1.84L8.56.78C8.2.65 7.81.65 7.45.78L3.03 2.43C2.41 2.66 2 3.26 2 3.92V8c0 3.82 4.23 6.47 5.52 7.2.15.08.31.13.48.13s.33-.04.48-.13C9.78 14.48 14 11.82 14 8V3.92c0-.66-.41-1.25-1.03-1.48M8.08 14.5c-.05.03-.12.03-.17 0-.49-.28-2.12-1.24-3.4-2.68.62-.82 1.94-1.39 3.47-1.39s2.84.61 3.49 1.4c-1.29 1.43-2.9 2.39-3.39 2.67M13.19 8c0 1.2-.51 2.28-1.22 3.22-.83-.91-2.34-1.59-4-1.59s-3.16.64-3.98 1.58c-.7-.93-1.2-2.01-1.2-3.2V3.93c0-.33.21-.62.51-.74l4.43-1.66c.09-.03.18-.05.27-.05s.19.02.27.05l4.42 1.66c.3.11.51.41.51.73V8z"/></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>' };
|
|
773
|
+
const icons = { 'address-card': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.21 2.67H1.79c-.63 0-1.14.51-1.14 1.14v8.38c0 .63.51 1.14 1.14 1.14h12.42c.63 0 1.14-.51 1.14-1.14V3.81c0-.63-.51-1.14-1.14-1.14M5.35 5c.84 0 1.53.69 1.53 1.53s-.69 1.53-1.53 1.53-1.53-.69-1.53-1.53v-.05c.02-.83.7-1.49 1.53-1.48M8 10.59a.5.5 0 0 1-.53.46H3.21a.5.5 0 0 1-.53-.46v-.46c.07-.81.78-1.42 1.6-1.37h.12c.61.26 1.29.26 1.9 0h.12c.81-.04 1.51.56 1.58 1.37zm5.34-1.26c0 .1-.09.19-.19.19H9.73c-.1 0-.18-.07-.19-.17V9c0-.1.09-.19.19-.19h3.43c.1 0 .18.09.19.19v.33zm0-1.52c0 .1-.09.18-.19.19H9.73c-.1 0-.19-.09-.19-.19v-.38c0-.1.07-.18.17-.19h3.45c.1 0 .19.09.19.19v.38zm0-1.52c0 .1-.09.18-.19.19H9.73c-.1 0-.19-.09-.19-.19V5.9c0-.1.09-.19.19-.19h3.43c.11 0 .19.09.19.2v.38z"/></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="M12.26 12.225a6 6 0 1 1 .863-7.348L12 6h3V3l-1.152 1.152a7 7 0 1 0-.88 8.78z"/><path fill="currentColor" d="m10.351 10.321.005-.005v.01zm-.705.705.705-.705-2.445-2.445v-3.59h-1v4z"/></svg>', 'arrow-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13 10.1h-2.77c-.16 0-.3-.12-.32-.28V.94c0-.17-.14-.3-.31-.29H6.37A.325.325 0 0 0 6 .92v8.89c0 .16-.13.29-.29.29H3c-.17 0-.3.12-.31.29 0 .08.02.16.08.22l5.06 4.58c.13.11.33.11.46 0l5-4.58c.12-.11.12-.29.01-.41h-.01c-.07-.1-.17-.1-.29-.1"/></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="m1.98 3.47 8.75 8.75H6.94c-.58 0-1.05.47-1.05 1.06s.47 1.05 1.05 1.05h6.33c.58 0 1.05-.47 1.05-1.05V6.94a1.05 1.05 0 1 0-2.1 0v3.79L3.47 1.98c-.41-.41-1.08-.41-1.49 0s-.41 1.08 0 1.49"/></svg>', 'arrow-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.88 12.93v-2.75c-.01-.17.11-.31.28-.32H15c.17-.01.3-.16.29-.33V6.32A.31.31 0 0 0 15 6H6.17c-.16-.02-.29-.15-.29-.31V2.93a.295.295 0 0 0-.28-.32c-.09 0-.17.03-.23.09L.79 7.76c-.11.13-.11.33 0 .46l4.58 5c.12.12.31.12.43 0 .06-.08.09-.19.08-.29"/></svg>', 'arrow-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10.12 2.99v2.75c.01.17-.11.31-.28.32H1c-.17.01-.3.16-.29.33V9.6c0 .17.12.31.29.32h8.83c.16.02.29.15.29.31v2.76c-.01.17.11.31.28.32.09 0 .17-.03.23-.09l4.58-5.06c.11-.13.11-.33 0-.46l-4.58-5a.3.3 0 0 0-.43 0c-.06.08-.09.19-.08.29"/></svg>', 'arrow-rotate': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.02 1.67c-1.6 0-3.15.59-4.33 1.67a6.316 6.316 0 0 0-.38 8.94 6.324 6.324 0 0 0 8.94.37.29.29 0 0 0 0-.42l-1-1a.296.296 0 0 0-.41 0 4.3 4.3 0 0 1-5.76-.09 4.276 4.276 0 0 1-.21-6.06 4.276 4.276 0 0 1 6.06-.21L9.86 5.95c-.11.12-.18.27-.18.43 0 .34.28.62.62.62h3.44c.34-.01.6-.29.59-.63V2.94a.62.62 0 0 0-.18-.44.61.61 0 0 0-.85 0l-.91.91a6.37 6.37 0 0 0-4.38-1.75h.02z"/></svg>', 'arrow-rotate-backward': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1.67c-1.63 0-3.2.63-4.38 1.75l-.91-.91a.6.6 0 0 0-.85-.01h-.01a.62.62 0 0 0-.18.44v3.43c-.01.34.25.62.59.63H5.7c.34 0 .62-.28.62-.62 0-.16-.07-.31-.18-.43L5.07 4.87a4.276 4.276 0 0 1 6.06.21 4.276 4.276 0 0 1-.21 6.06 4.3 4.3 0 0 1-5.76.09.296.296 0 0 0-.41 0l-1 1a.29.29 0 0 0 0 .42 6.324 6.324 0 0 0 8.94-.37 6.316 6.316 0 0 0-.38-8.94 6.37 6.37 0 0 0-4.33-1.67z"/></svg>', 'arrow-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.06 5.82h2.75c.16 0 .3.12.32.28V15c.01.17.16.3.33.29h3.21c.16.02.31-.1.33-.27V6.11c0-.17.14-.3.31-.29h2.75c.17 0 .31-.12.32-.28 0-.08-.03-.17-.09-.23L8.23.73a.36.36 0 0 0-.46 0l-5 4.58a.29.29 0 0 0 0 .42c.05.1.15.09.29.09"/></svg>', 'arrow-up-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m3.47 14.02 8.75-8.75v3.78c0 .58.47 1.05 1.06 1.05s1.05-.47 1.05-1.05V2.72c0-.58-.47-1.05-1.05-1.05H6.94a1.05 1.05 0 1 0 0 2.1h3.78l-8.74 8.76c-.41.41-.41 1.08 0 1.49s1.08.41 1.49 0"/></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="M5.81 9.47H.67v1.47h5.14v2.2l2.93-2.93-2.93-2.93v2.2zm4.39-.73v-2.2h5.14V5.07H10.2v-2.2L7.27 5.8l2.93 2.93z"/></svg>', 'arrows-right-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10.68 10.78c.16.17.16.45-.02.61l-2.8 2.78a.43.43 0 0 1-.31.12.42.42 0 0 1-.31-.12l-2.8-2.78a.44.44 0 0 1 0-.62.44.44 0 0 1 .62 0l2.06 2.05V5.38H2.11c-.24 0-.44-.19-.44-.44 0-.24.2-.44.44-.44H8v8.32l2.06-2.05a.44.44 0 0 1 .62 0zm3.53-6.14-2.78-2.8a.44.44 0 0 0-.61-.02.44.44 0 0 0 0 .62l2.05 2.06H8.89v.88h3.98l-2.05 2.06a.44.44 0 0 0 0 .62c.17.17.45.17.62 0l2.78-2.8s.07-.09.09-.14.03-.11.03-.17c0-.11-.04-.23-.12-.31z"/></svg>', 'arrows-right-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M.73 5.65v-.42a.64.64 0 0 1 .64-.64H12V3.31a.64.64 0 0 1 .64-.64.63.63 0 0 1 .45.18L15.19 5a.63.63 0 0 1 0 .9L13.05 8A.65.65 0 0 1 12 7.57V6.29H1.37a.64.64 0 0 1-.64-.64m14 4.06H4.09V8.43A.64.64 0 0 0 3 8L.87 10.11a.63.63 0 0 0 0 .9L3 13.15a.64.64 0 0 0 1.047-.206.6.6 0 0 0 .043-.244v-1.29h10.64a.63.63 0 0 0 .64-.64v-.42a.63.63 0 0 0-.64-.64"/></svg>', 'arrows-rotate': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.7 7h-3.4c-.3 0-.6-.3-.6-.6 0-.1.1-.3.2-.4l1-1.1c-1.7-1.6-4.4-1.5-6 .2-.5.5-.8 1.2-1 1.9H1.8c.6-3.5 3.9-5.8 7.4-5.2 1.1.2 2.3.8 3.1 1.6l1-.9c.2-.2.6-.2.8 0 .1.1.2.3.2.4v3.4c0 .4-.3.7-.6.7M2.3 9h3.4c.3 0 .6.3.6.6 0 .2-.1.3-.2.4L5 11.1c1.7 1.6 4.4 1.5 6-.2.6-.5 1-1.2 1.2-1.9h2.1c-.6 3.5-3.8 5.8-7.3 5.2-1.3-.2-2.4-.8-3.4-1.7l-.9.9c-.2.2-.6.2-.9 0-.1-.1-.2-.3-.2-.4V9.6c.1-.3.3-.6.7-.6"/></svg>', 'arrows-rotate-backward': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2.3 7h3.4c.3 0 .6-.3.6-.6 0-.1-.1-.3-.2-.4l-1-1.1c1.7-1.6 4.4-1.5 6 .2.5.5.8 1.2 1 1.9h2.1c-.6-3.5-3.9-5.8-7.4-5.2-1.1.2-2.3.8-3.1 1.6l-1-.9c-.2-.2-.6-.2-.8 0-.1.1-.2.3-.2.4v3.4c0 .4.3.7.6.7m11.4 2h-3.4c-.3 0-.6.3-.6.6 0 .2.1.3.2.4l1.1 1.1c-1.7 1.6-4.4 1.5-6-.2-.6-.5-1-1.2-1.2-1.9H1.7c.6 3.5 3.8 5.8 7.3 5.2 1.3-.2 2.4-.8 3.4-1.7l.9.9c.2.2.6.2.9 0 .1-.1.2-.3.2-.4V9.6c-.1-.3-.3-.6-.7-.6"/></svg>', 'ban': '<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 .67a7.33 7.33 0 1 0 0 14.66A7.33 7.33 0 0 0 8 .67m3.85 3.48a5.46 5.46 0 0 1 .61 7L4.88 3.54a5.46 5.46 0 0 1 6.97.61m-7.7 7.7a5.45 5.45 0 0 1-.61-7l7.58 7.58a5.46 5.46 0 0 1-7-.61z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></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.3v.297l.26.142 1.508.822c.455.248.28.939-.239.939H3.002c-.514 0-.694-.681-.247-.935l1.461-.83.253-.144V6a3.5 3.5 0 0 1 7 0zm-3.473 5.2a1.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" d="M12.8.7H3.2c-.3 0-.5.2-.5.5v13.7c0 .3.2.5.5.5h9.7c.3 0 .5-.2.5-.5V1.2c-.1-.3-.3-.5-.6-.5M5.6 13.4q0 .3-.3.3H4.1q-.3 0-.3-.3v-1.2q0-.3.3-.3h1.2q.3 0 .3.3zm0-3.3q0 .3-.3.3H4.1q-.3 0-.3-.3V8.9q0-.3.3-.3h1.2q.3 0 .3.3zm3.3 3.3q0 .3-.3.3H7.4q-.3 0-.3-.3v-1.2q0-.3.3-.3h1.2q.3 0 .3.3zm0-3.3q0 .3-.3.3H7.4q-.3 0-.3-.3V8.9q0-.3.3-.3h1.2q.3 0 .3.3zm3.3 3.3q0 .3-.3.3h-1.2q-.3 0-.3-.3V8.9q0-.3.3-.3h1.2q.3 0 .3.3zm0-7.2q0 .3-.3.3H4.1q-.3 0-.3-.3V2.6q0-.3.3-.3h7.8q.3 0 .3.3z"/></svg>', 'calendar': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 3.5c0-.55-.45-1-1-1h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v.98s0 .02.02.02H2v9c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-9h-.02s.02 0 .02-.02zm-11 10v-8h10v8z"/></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 2.5h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10c0-.55-.45-1-1-1m-10 11v-8h10v8zm0-9v-1h10v1z"/></svg>', 'check': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m15.27 4.23-1.11-1.18c-.11-.1-.27-.1-.38 0L6 10.36l-3.76-4a.187.187 0 0 0-.26 0L.71 7.6c-.07.07-.07.19 0 .26l5.12 5.41c.07.07.18.07.25 0l1.3-1.23 7.87-7.45c.1-.1.11-.26.01-.37h.01z"/></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="M7.43 12.21.9 5.69a.81.81 0 0 1 0-1.14l.76-.77a.81.81 0 0 1 1.14 0L8 9l5.2-5.18a.81.81 0 0 1 1.14 0l.76.77a.8.8 0 0 1 0 1.13l-6.53 6.49a.79.79 0 0 1-1.13 0z"/></svg>', 'chevron-down-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="M15.33 8A7.33 7.33 0 1 1 .67 8a7.33 7.33 0 0 1 14.66 0M8.5 11.37l4-4a.7.7 0 0 0 0-1l-.5-.52a.72.72 0 0 0-1 0l-3 3-3-3a.72.72 0 0 0-1 0l-.5.51a.7.7 0 0 0 0 1l4 4a.7.7 0 0 0 1 0z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></svg>', 'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.79 7.43 10.31.9c.32-.31.82-.31 1.14 0l.77.76c.31.32.31.82 0 1.14L7 8l5.18 5.2c.31.32.31.82 0 1.14l-.77.76c-.31.31-.82.31-1.13 0L3.79 8.57a.79.79 0 0 1-.01-1.12h.01z"/></svg>', 'chevron-left-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 15.33C3.95 15.33.67 12.05.67 8S3.95.67 8 .67 15.33 3.95 15.33 8 12.05 15.33 8 15.33M4.63 8.5l4 4c.27.28.71.28.99.01h.01l.52-.51c.27-.28.27-.72 0-1l-3-3 3-3c.27-.28.27-.72 0-1l-.51-.5a.697.697 0 0 0-.99-.01h-.01l-4 4.01c-.28.27-.28.71-.01.99z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></svg>', 'chevron-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.21 8.57 5.69 15.1c-.32.31-.82.31-1.14 0l-.77-.76a.815.815 0 0 1 0-1.14L9 8 3.78 2.8a.815.815 0 0 1 0-1.14L4.55.9c.31-.31.82-.31 1.13 0l6.53 6.53c.31.3.32.81.01 1.12h-.01z"/></svg>', 'chevron-right-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 .67c4.05 0 7.33 3.28 7.33 7.33S12.05 15.33 8 15.33.67 12.05.67 8 3.95.67 8 .67m3.37 6.83-4-4a.697.697 0 0 0-.99-.01h-.01L5.85 4c-.27.28-.27.72 0 1l3 3-3 3c-.27.28-.27.72 0 1l.51.5c.27.28.71.28.99.01h.01l4-4.01c.28-.27.28-.71.01-.99z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></svg>', 'chevron-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8.57 3.79 6.53 6.52a.81.81 0 0 1 0 1.14l-.76.77a.81.81 0 0 1-1.14 0L8 7l-5.2 5.22a.81.81 0 0 1-1.14 0l-.76-.77a.8.8 0 0 1 0-1.13l6.53-6.53a.79.79 0 0 1 1.13 0z"/></svg>', 'chevron-up-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="M.67 8C.67 3.95 3.95.67 8 .67S15.33 3.95 15.33 8 12.05 15.33 8 15.33.67 12.05.67 8M7.5 4.63l-4 4c-.28.27-.28.71-.01.99h.01l.5.53c.28.27.72.27 1 0l3-3 3 3c.28.27.72.27 1 0l.5-.51c.28-.27.28-.71.01-.99h-.01l-4-4.01a.697.697 0 0 0-.99-.01z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></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="M14 3.05 12.95 2 8 6.95 3.05 2 2 3.05 6.95 8 2 12.95 3.05 14 8 9.05 12.95 14 14 12.95 9.05 8z"/></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="M1.67 8.7H7.3V1.67H1.67v7.04zm0 5.63H7.3v-4.22H1.67zm7.04 0h5.63V7.3H8.71v7.04zm0-12.67v4.23h5.63V1.67H8.71z"/></svg>', 'dashboard-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.33 2.67v2.22H9.7V2.67zm-7.04 0V7.7H2.67V2.67H6.3m7.04 5.63v5.04H9.71V8.3zM6.3 11.11v2.22H2.67v-2.22zm8.03-9.44H8.7v4.22h5.63zm-7.04 0H1.67v7.04H7.3V1.67zm7.04 5.63H8.7v7.04h5.63zm-7.04 2.81H1.67v4.22H7.3v-4.22z"/></svg>', 'download': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.4 2v4.1q0 .3-.3.3H4q-.3 0-.3.3c0 .1 0 .2.1.2l4 4c.1.1.3.1.4 0l4-4c.1-.1.1-.3 0-.4s-.1-.1-.2-.1H9.9q-.3 0-.3-.3V2q0-.3-.3-.3H6.7c-.1 0-.3.1-.3.3m7.9 11v1q0 .3-.3.3H2q-.3 0-.3-.3v-1q0-.3.3-.3h12q.3 0 .3.3"/></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" fill-rule="evenodd" d="M12.34 4.07a8.1 8.1 0 0 1 2.9 3.52 1 1 0 0 1 0 .82A8.12 8.12 0 0 1 8 13.33 8.12 8.12 0 0 1 .76 8.41a1 1 0 0 1 0-.82A8.12 8.12 0 0 1 8 2.67a8.1 8.1 0 0 1 4.34 1.4m-6.375 6.925a3.66 3.66 0 1 0 4.09-6.07 3.66 3.66 0 0 0-4.09 6.07M10.45 7.96a2.44 2.44 0 1 1-4.88 0 2.44 2.44 0 0 1 4.88 0" 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="M2.51 5 .81 3.84l.82-1.17 13.5 9.47-.81 1.17-2-1.38A8 8 0 0 1 8 13.33 8.13 8.13 0 0 1 .76 8.41a1 1 0 0 1 0-.82A8.2 8.2 0 0 1 2.51 5m2.922 5.559A3.66 3.66 0 0 0 8 11.619a3.65 3.65 0 0 0 2.49-.93l-1.068-.75a2.43 2.43 0 0 1-3.746-2.631L4.64 6.58A3.8 3.8 0 0 0 4.35 8c.01.962.4 1.881 1.082 2.559m9.808-2.97A8.13 8.13 0 0 0 8 2.67a8.1 8.1 0 0 0-2.89.64l1.72 1.2A3.6 3.6 0 0 1 8 4.3a3.65 3.65 0 0 1 3.64 3.6l2.77 1.93c.318-.443.59-.919.81-1.42a1 1 0 0 0 .02-.82M9.416 5.977c.367.258.656.612.834 1.024L8.17 5.54a2.43 2.43 0 0 1 1.246.436" clip-rule="evenodd"/></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-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 3v10h10V5.414l-1.207-1.207L10.586 3H10v3H4V3zm2 0h4v2H5zm4-1h1.586a1 1 0 0 1 .707.293L12.5 3.5l1.207 1.207a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm-1 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2m-2-1a2 2 0 1 1 4 0 2 2 0 0 1-4 0" 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-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="M8 1.67c-1.64 0-3.21.62-4.4 1.75l-.91-.91a.6.6 0 0 0-.85 0c-.12.11-.18.27-.18.43v3.43c0 .33.25.61.58.63h3.44c.34 0 .62-.28.62-.62A.7.7 0 0 0 6.12 6L5.05 4.87a4.276 4.276 0 0 1 6.06.21 4.276 4.276 0 0 1-.21 6.06 4.303 4.303 0 0 1-5.76.09.296.296 0 0 0-.41 0l-1 1c-.11.12-.11.3 0 .42a6.324 6.324 0 0 0 8.94-.36 6.324 6.324 0 0 0-.36-8.94 6.33 6.33 0 0 0-4.33-1.68zM9.85 9.3l-.36.36c-.12.11-.3.11-.42 0L7.45 8V5.15c0-.16.12-.29.28-.3h.52c.16 0 .29.12.3.28v2.45l1.3 1.3c.11.12.11.3 0 .42"/></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>', 'life-ring': '<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 .67a7.33 7.33 0 1 0 0 14.66A7.33 7.33 0 0 0 8 .67m5.14 3.53-1.88 1.88a3.9 3.9 0 0 0-1.34-1.34l1.88-1.88c.51.38.96.83 1.34 1.34M8 10.84a2.84 2.84 0 1 1 0-5.68 2.84 2.84 0 0 1 0 5.68m-3.8-8 1.88 1.9c-.55.33-1.01.79-1.34 1.34L2.86 4.2c.38-.51.83-.96 1.34-1.34zM2.86 11.8l1.88-1.88c.33.55.79 1.01 1.34 1.34L4.2 13.14c-.51-.38-.96-.83-1.34-1.34m8.94 1.34-1.88-1.88a3.9 3.9 0 0 0 1.34-1.34l1.88 1.88c-.38.51-.83.96-1.34 1.34"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></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" d="M9.75 6.25a3.75 3.75 0 0 1 0 5.31l-1.66 1.67a3.76 3.76 0 0 1-5.32 0 3.76 3.76 0 0 1 0-5.32l.92-.92c.15-.15.4-.16.56 0 .07.07.11.16.12.26.02.44.1.88.24 1.3.05.14.01.3-.09.41l-.32.32c-.72.67-.76 1.8-.09 2.52s1.8.76 2.52.09c.03-.02.05-.05.07-.07l1.66-1.66a1.775 1.775 0 0 0-.26-2.73.4.4 0 0 1-.17-.31.98.98 0 0 1 .29-.74l.52-.52c.14-.14.35-.15.51-.04.18.13.35.27.51.43zm3.49-3.48a3.76 3.76 0 0 0-5.32 0L6.26 4.43a3.772 3.772 0 0 0 .52 5.75c.16.11.37.09.51-.04l.52-.52c.2-.19.3-.46.29-.74a.38.38 0 0 0-.17-.31 1.775 1.775 0 0 1-.26-2.73l1.66-1.66c.68-.71 1.81-.74 2.52-.06s.74 1.81.06 2.52c-.02.03-.05.05-.07.07l-.32.32c-.11.11-.14.27-.09.41.14.42.22.86.24 1.3 0 .22.19.39.41.38.1 0 .19-.05.26-.12l.92-.92a3.76 3.76 0 0 0 0-5.32z"/></svg>', 'list': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M1.9 2.68c-.67 0-1.22.56-1.21 1.23 0 .67.56 1.22 1.23 1.21.67 0 1.22-.56 1.21-1.23 0-.32-.13-.63-.36-.86s-.54-.36-.87-.35m0 4.09a1.23 1.23 0 1 0 0 2.46 1.23 1.23 0 1 0 0-2.46m0 4.09a1.23 1.23 0 1 0 0 2.46 1.23 1.23 0 1 0 0-2.46m13 .41H5.18c-.23 0-.41.18-.41.41v.82c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41v-.82c0-.23-.18-.41-.41-.41zm0-8.18H5.18c-.23 0-.41.18-.41.41v.81c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41V3.5c0-.23-.18-.41-.41-.41zm0 4.09H5.18c-.23 0-.41.18-.41.41v.82c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41v-.82c0-.23-.18-.41-.41-.41z"/></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="m10.97 7.78-4-4a.29.29 0 0 0-.42 0c-.07.06-.12.15-.13.24v2.07c0 .17-.13.3-.3.32H1.97c-.16 0-.29.12-.3.28v2.58c0 .16.12.29.28.3h4.16c.17 0 .3.14.3.31v2.14c0 .16.12.29.28.3.11.01.21-.03.28-.11l4-4c.11-.12.11-.3 0-.42zm1.81 4.96V3.26H9.31a.3.3 0 0 1-.3-.3v-.97c0-.16.13-.3.3-.3h4.74c.16 0 .3.13.3.3v12.03a.3.3 0 0 1-.3.3H9.31a.3.3 0 0 1-.3-.3v-.97c0-.16.13-.3.3-.3h3.47z"/></svg>', 'log-out': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m14.23 7.79-4-4a.29.29 0 0 0-.42 0c-.07.06-.12.15-.13.24V6.1c0 .17-.13.3-.3.32H5.23c-.16 0-.29.12-.3.28v2.58c0 .16.12.29.28.3h4.16c.17 0 .3.14.3.31v2.14c0 .16.12.29.28.3.11.01.21-.03.28-.11l4-4c.11-.12.11-.3 0-.42zm-11-4.53v9.5H6.7c.16 0 .3.13.3.3v.97a.3.3 0 0 1-.3.3H1.97a.3.3 0 0 1-.3-.3V1.99c0-.16.13-.3.3-.3H6.7c.16 0 .3.13.3.3v.97a.3.3 0 0 1-.3.3z"/></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" d="M2.5 12.1c-.7 0-1.2-.5-1.2-1.2V2.5c0-.7.5-1.2 1.2-1.2h8.4c.7 0 1.2.5 1.2 1.2H3c-.3 0-.5.2-.5.5zm11.8-7.4v6h-3.6v3.6h-6c-.7 0-1.2-.5-1.2-1.2V4.7c0-.7.5-1.2 1.2-1.2h8.4c.7 0 1.2.5 1.2 1.2M8.9 8.9h-3v1.2h3zm3-2.4h-6v1.2h6zm-.7 7.3v-2.6h2.6"/></svg>', 'notes-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.11 4.74v5.38h-3v3H4.73V4.74zm0-1.2H4.73a1.2 1.2 0 0 0-1.2 1.2v8.38a1.2 1.2 0 0 0 1.2 1.19h6l3.59-3.59v-6a1.2 1.2 0 0 0-1.21-1.18m-4.19 6.58h-3V8.93h3zm3-2.39h-6v-1.2h6zM3.8 11.19h-1V2.81h8.38v1h1.2v-1a1.2 1.2 0 0 0-1.2-1.2H2.81a1.2 1.2 0 0 0-1.2 1.2v8.38a1.2 1.2 0 0 0 1.2 1.2h1z"/></svg>', 'paper-plane': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 1.69 1.84 7a.28.28 0 0 0-.15.36.3.3 0 0 0 .16.15l3.27 1.82a.57.57 0 0 0 .61-.06l6.45-5.57c.05 0 .15-.1.19-.06s0 .14-.06.18l-5.59 6.29a.52.52 0 0 0 0 .63l2.09 3.44a.28.28 0 0 0 .37.12.3.3 0 0 0 .13-.12l5-12.11a.3.3 0 0 0-.14-.37.3.3 0 0 0-.17-.01"/></svg>', 'paper-plane-slash': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m2.67 1.69 11.59 11.59-1 1-2.79-2.8-1.1 2.67c-.03.05-.08.09-.13.12-.14.07-.3.01-.37-.12l-2.12-3.41a.525.525 0 0 1 0-.63L7.82 8.9l-.76-.76-1.3 1.13c-.17.14-.41.16-.61.06L1.88 7.51a.3.3 0 0 1-.16-.15c-.06-.14.01-.3.15-.36l2.81-1.24-3-3zm11.53 0a.28.28 0 0 0-.22 0L7.53 4.51l1.73 1.73 3-2.54s.15-.1.19-.06 0 .14-.06.18L9.75 6.73l1.88 1.88 2.71-6.54c.05-.14 0-.3-.14-.37z"/></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.41 6.59V1.92a.24.24 0 0 0-.24-.25H6.84a.24.24 0 0 0-.25.24v4.68H1.92a.24.24 0 0 0-.25.24v2.33a.24.24 0 0 0 .24.25h4.68v4.67a.24.24 0 0 0 .24.25h2.33a.24.24 0 0 0 .25-.24V9.41h4.67a.24.24 0 0 0 .25-.24V6.84a.24.24 0 0 0-.24-.25z"/></svg>', 'plus-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 .67m4.26 8.16c0 .19-.17.35-.36.35H9.18v2.72c0 .19-.16.35-.35.36H7.17c-.19 0-.35-.17-.35-.36V9.18H4.1a.37.37 0 0 1-.36-.35V7.17c0-.19.17-.35.36-.35h2.72V4.1c0-.19.16-.35.35-.36h1.66c.19 0 .35.17.35.36v2.72h2.72c.19 0 .35.16.36.35z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></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="M15.13 10.45a.51.51 0 0 1 0 .81l-2.29 1.91c-.29.24-.71.24-1 0-.12-.1-.2-.24-.2-.4v-.95H10c-.09 0-.18-.03-.25-.09l-2-1.8 1.49-1.37 1.51 1.35h.92V9c.04-.35.34-.6.69-.57.18 0 .35.06.48.17l2.29 1.9zM1 6.09h2.42l1.51 1.35 1.53-1.36-2-1.8a.4.4 0 0 0-.26-.09H1a.33.33 0 0 0-.34.29v1.33c.02.17.17.3.34.28m10.66 0v1c.04.35.34.6.69.57.18 0 .35-.06.48-.17l2.29-1.9a.51.51 0 0 0 0-.81l-2.28-1.95a.81.81 0 0 0-1 0c-.12.1-.2.25-.2.41v1H10c-.09 0-.18.03-.25.09L3.42 9.91H1a.313.313 0 0 0-.34.28v1.33c.02.17.17.3.34.29h3.18c.09 0 .19-.03.26-.09l6.31-5.62h.91z"/></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" d="M1.67 7.9V2.85a1.18 1.18 0 0 1 1.18-1.18H7.9a1.18 1.18 0 0 1 .84.33L14 7.26a1.2 1.2 0 0 1 0 1.68L8.94 14a1.2 1.2 0 0 1-1.68 0L2 8.74a1.18 1.18 0 0 1-.33-.84m2.77-4.65a1.19 1.19 0 1 0-.02 2.38 1.19 1.19 0 0 0 .02-2.38"/></svg>', 'tags': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m7.22 3 4.86 4.37a.94.94 0 0 1 0 1.38L7.4 13a1.17 1.17 0 0 1-1.55 0L1 8.63a1 1 0 0 1-.33-.71V3.71a1 1 0 0 1 1.1-1h4.67a1.12 1.12 0 0 1 .78.29M2.602 5.94a1.13 1.13 0 1 0 1.256-1.88 1.13 1.13 0 0 0-1.256 1.88M10.15 3 15 7.37a.94.94 0 0 1 0 1.42L10.32 13a1.17 1.17 0 0 1-1.55 0l3.99-3.55a1.758 1.758 0 0 0 0-2.65l-4.5-4.09h1.12c.284-.005.56.1.77.29" 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.461V2h4.922c1.081 0 2.058.715 2.484 1.818l.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"><g clip-path="url(#a)"><path fill="currentColor" d="M8 15.33A7.33 7.33 0 1 1 15.33 8 7.34 7.34 0 0 1 8 15.33M8 1.71a6.29 6.29 0 1 0 0 12.58A6.29 6.29 0 0 0 8 1.71M13.74 8A5.74 5.74 0 1 1 8 2.25 5.75 5.75 0 0 1 13.74 8M8 3.77a1.07 1.07 0 1 0 0 2.14 1.07 1.07 0 0 0 0-2.14M4.67 5.63c-.6-.14-.87.86-.32 1s1.79.43 2.57.55a11.25 11.25 0 0 1-.72 4.47.54.54 0 0 0 .85.65 6.9 6.9 0 0 0 .78-2.42c0-.07.31-.11.33 0 .11.768.322 1.518.63 2.23.3.65 1.31.26 1-.38a11.5 11.5 0 0 1-.76-4.58 21 21 0 0 0 2.41-.45.55.55 0 1 0-.2-1.08 11.47 11.47 0 0 1-6.57.01"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></svg>', 'unlink': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9.74 6.25c-.16-.17-.32-.3-.5-.43-.14-.09-.31-.1-.44 0l1.81 1.81c-.17-.5-.47-.98-.87-1.38m-1.1 3.51c-.07.15-.17.28-.29.4l-1.66 1.66s-.04.05-.07.07c-.72.67-1.85.63-2.52-.09s-.63-1.85.09-2.52l.32-.32c.1-.11.14-.27.09-.41-.14-.42-.22-.86-.24-1.3a.42.42 0 0 0-.12-.26.395.395 0 0 0-.56 0l-.92.92a3.76 3.76 0 0 0 0 5.32 3.76 3.76 0 0 0 5.32 0l1.66-1.67c.12-.12.23-.25.32-.38zm4.61-7h-.02a3.78 3.78 0 0 0-5.32 0L6.83 3.84l1.41 1.41 1.08-1.08c.68-.71 1.81-.74 2.52-.06s.74 1.81.06 2.52c-.02.03-.05.05-.07.07l-.32.32c-.11.11-.14.27-.09.41.13.4.21.81.23 1.23l.44.44c.09 0 .18-.05.24-.11l.92-.92a3.76 3.76 0 0 0 0-5.32zm.97 10.52-1.03 1.03-5.14-5.14c-.04.17-.12.33-.25.45l-.52.52c-.14.13-.35.15-.51.04-.18-.13-.35-.27-.5-.42-.74-.74-1.11-1.7-1.11-2.67 0-.24.02-.49.08-.73l-3.6-3.6 1.03-1.03z"/></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" d="M9.58 10.74V6.59a.31.31 0 0 1 .31-.3H12a.3.3 0 0 0 .21-.52l-4-4a.29.29 0 0 0-.42 0l-4 4a.3.3 0 0 0 .21.52h2.11a.31.31 0 0 1 .31.3v4.15a.3.3 0 0 0 .3.3h2.56a.3.3 0 0 0 .3-.3M14.33 14v-1a.29.29 0 0 0-.29-.3H2a.29.29 0 0 0-.29.3v1a.29.29 0 0 0 .29.29h12a.29.29 0 0 0 .33-.29"/></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"><g clip-path="url(#a)"><path fill="currentColor" d="M8 .62C3.95.61.66 3.9.65 7.95c0 4.05 3.28 7.34 7.33 7.35 4.04 0 7.33-3.26 7.35-7.3.02-4.05-3.25-7.36-7.3-7.38zm0 .75c3.64 0 6.59 2.96 6.58 6.6V8c0 1.35-.41 2.66-1.19 3.76a2.71 2.71 0 0 0-2.66-2.37H9.54c-.98.46-2.1.46-3.08 0H5.28c-1.36 0-2.5 1.02-2.67 2.37A6.5 6.5 0 0 1 1.42 8a6.59 6.59 0 0 1 6.55-6.63zM5 5.63c0-1.68 1.37-3.05 3.05-3.05s3.05 1.37 3.05 3.05-1.37 3.05-3.05 3.05H8c-1.66-.03-3-1.39-3-3.05"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></svg>', 'user-group': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.15 4.12c-.81-.01-1.47.65-1.48 1.46 0 .82.65 1.47 1.46 1.48s1.47-.65 1.48-1.46-.65-1.47-1.46-1.48m-10.04.01a1.47 1.47 0 0 0-1.58 1.59c.06.71.62 1.28 1.34 1.34.81.07 1.52-.53 1.59-1.34.06-.81-.54-1.52-1.35-1.59m7.36.39c-.22-.84-.87-1.51-1.71-1.75-1.36-.41-2.8.36-3.22 1.72-.18.61-.13 1.27.14 1.85.41.9 1.33 1.48 2.32 1.45 1.41.01 2.56-1.14 2.57-2.55 0-.24-.03-.49-.1-.72m-.71 4h-.19c-.99.49-2.14.49-3.13 0h-.19c-1.46 0-2.64 1.18-2.64 2.64v2.69c1.23.93 2.74 1.47 4.39 1.47s3.17-.55 4.4-1.48v-2.68c0-1.46-1.18-2.64-2.64-2.64m5.52.25a7.3 7.3 0 0 1-1.65 3.91c-.08.1-.16.19-.25.28-.08.09-.17.18-.25.27v-.55h.03v-.72s.01-.07 0-.1v-.66c.01-1.25-.66-2.4-1.76-3 .27-.26.63-.41 1-.41h1.51c.63.01 1.17.41 1.37.98M2.86 11.16v1.52h.01v.55l-.28-.31c-.08-.08-.15-.16-.22-.24A7.24 7.24 0 0 1 .74 8.86c.16-.62.72-1.07 1.4-1.07h1.47c.37-.01.73.12 1.01.37-1.1.6-1.77 1.75-1.76 3"/></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="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0m1 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0m-8 8a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3zm-1 0a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4 1 1 0 0 1-1 1H3a1 1 0 0 1-1-1" 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-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 8.92c-1.5 0-2.72-1.22-2.72-2.72S6.5 3.48 8 3.48s2.72 1.22 2.72 2.72S9.5 8.92 8 8.92m0-4.64a1.92 1.92 0 1 0 .001 3.841A1.92 1.92 0 0 0 8 4.281m4.97-1.84L8.56.78C8.2.65 7.81.65 7.45.78L3.03 2.43C2.41 2.66 2 3.26 2 3.92V8c0 3.82 4.23 6.47 5.52 7.2.15.08.31.13.48.13s.33-.04.48-.13C9.78 14.48 14 11.82 14 8V3.92c0-.66-.41-1.25-1.03-1.48M8.08 14.5c-.05.03-.12.03-.17 0-.49-.28-2.12-1.24-3.4-2.68.62-.82 1.94-1.39 3.47-1.39s2.84.61 3.49 1.4c-1.29 1.43-2.9 2.39-3.39 2.67M13.19 8c0 1.2-.51 2.28-1.22 3.22-.83-.91-2.34-1.59-4-1.59s-3.16.64-3.98 1.58c-.7-.93-1.2-2.01-1.2-3.2V3.93c0-.33.21-.62.51-.74l4.43-1.66c.09-.03.18-.05.27-.05s.19.02.27.05l4.42 1.66c.3.11.51.41.51.73V8z"/></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>' };
|
|
832
774
|
|
|
833
|
-
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}}: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-
|
|
775
|
+
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)}}";
|
|
834
776
|
const MgIconStyle0 = mgIconCss;
|
|
835
777
|
|
|
836
778
|
const MgIcon = class {
|
|
@@ -857,7 +799,7 @@ const MgIcon = class {
|
|
|
857
799
|
this.svg.setAttribute('class', this.classCollection.join());
|
|
858
800
|
};
|
|
859
801
|
this.icon = undefined;
|
|
860
|
-
this.size = '
|
|
802
|
+
this.size = 'medium';
|
|
861
803
|
this.variant = undefined;
|
|
862
804
|
this.variantStyle = undefined;
|
|
863
805
|
this.spin = false;
|
|
@@ -865,7 +807,7 @@ const MgIcon = class {
|
|
|
865
807
|
}
|
|
866
808
|
validateIcon(newValue, oldValue) {
|
|
867
809
|
if (!Object.keys(icons).includes(newValue))
|
|
868
|
-
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}
|
|
810
|
+
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
869
811
|
else {
|
|
870
812
|
if (oldValue !== undefined)
|
|
871
813
|
this.classCollection.delete(`mg-c-icon--${oldValue}`);
|
|
@@ -875,7 +817,7 @@ const MgIcon = class {
|
|
|
875
817
|
}
|
|
876
818
|
validateSize(newValue, oldValue) {
|
|
877
819
|
if (!sizes$1.includes(newValue))
|
|
878
|
-
throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$1.join(', ')}
|
|
820
|
+
throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$1.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
879
821
|
else {
|
|
880
822
|
if (oldValue !== undefined)
|
|
881
823
|
this.classCollection.delete(`mg-c-icon--size-${oldValue}`);
|
|
@@ -883,9 +825,9 @@ const MgIcon = class {
|
|
|
883
825
|
}
|
|
884
826
|
}
|
|
885
827
|
validateVariant(newValue, oldValue) {
|
|
886
|
-
if (newValue) {
|
|
828
|
+
if (newValue !== undefined) {
|
|
887
829
|
if (!variants$2.includes(newValue))
|
|
888
|
-
throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}
|
|
830
|
+
throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
889
831
|
else {
|
|
890
832
|
this.setDefaultVariantStyle();
|
|
891
833
|
if (oldValue !== undefined)
|
|
@@ -895,9 +837,9 @@ const MgIcon = class {
|
|
|
895
837
|
}
|
|
896
838
|
}
|
|
897
839
|
validateVariantStyle(newValue, oldValue) {
|
|
898
|
-
if (newValue) {
|
|
899
|
-
if (!variantStyles.includes(newValue))
|
|
900
|
-
throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}
|
|
840
|
+
if (newValue !== undefined) {
|
|
841
|
+
if (!variantStyles$1.includes(newValue))
|
|
842
|
+
throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
901
843
|
else {
|
|
902
844
|
if (oldValue !== undefined)
|
|
903
845
|
this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
|
|
@@ -942,13 +884,13 @@ const MgIcon = class {
|
|
|
942
884
|
};
|
|
943
885
|
MgIcon.style = MgIconStyle0;
|
|
944
886
|
|
|
945
|
-
const mgIllustratedMessageCss = ".mg-c-illustrated-message{display:flex;max-width:
|
|
887
|
+
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-32) var(--mg-b-size-64);text-align:center}.mg-c-illustrated-message__illustration{max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:auto;max-width:100%;height:auto;max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small{max-height:var(--mg-b-size-64)}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal{max-width:unset;flex-flow:row wrap;align-items:center}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__slots,.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__illustration{max-width:calc(60*var(--mg-b-size-8))}.mg-c-illustrated-message__title ::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__details ::slotted([slot=details]){margin:var(--mg-b-size-16) 0 0}";
|
|
946
888
|
const MgIllustratedMessageStyle0 = mgIllustratedMessageCss;
|
|
947
889
|
|
|
948
890
|
const MgIllustratedMessage = class {
|
|
949
891
|
constructor(hostRef) {
|
|
950
892
|
registerInstance(this, hostRef);
|
|
951
|
-
this.size = '
|
|
893
|
+
this.size = 'medium';
|
|
952
894
|
this.direction = 'vertical';
|
|
953
895
|
}
|
|
954
896
|
/*************
|
|
@@ -961,7 +903,7 @@ const MgIllustratedMessage = class {
|
|
|
961
903
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
962
904
|
const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
|
|
963
905
|
if (!Xe(this.element.querySelector('[slot="title"]'), headingTags)) {
|
|
964
|
-
throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}
|
|
906
|
+
throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}.`);
|
|
965
907
|
}
|
|
966
908
|
else if (slottedIllustrations.length !== 1) {
|
|
967
909
|
throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');
|
|
@@ -973,13 +915,13 @@ const MgIllustratedMessage = class {
|
|
|
973
915
|
* @returns HTML Element
|
|
974
916
|
*/
|
|
975
917
|
render() {
|
|
976
|
-
return (h("div", { key: '
|
|
918
|
+
return (h("div", { key: '475cdb177405fc41e5dde86d9a3884de5fb88bef', class: {
|
|
977
919
|
'mg-c-illustrated-message': true,
|
|
978
920
|
'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',
|
|
979
|
-
} }, h("div", { key: '
|
|
921
|
+
} }, h("div", { key: '0e007f09bcdcd85d50bd16ed37f9f4d399c14e28', class: {
|
|
980
922
|
'mg-c-illustrated-message__illustration': true,
|
|
981
923
|
'mg-c-illustrated-message__illustration--small': this.size === 'small',
|
|
982
|
-
} }, h("slot", { key: '
|
|
924
|
+
} }, h("slot", { key: '41190bb4bc5d13cecbf7b847c58af7975ffc0255', name: "illustration" })), h("div", { key: 'c338cba5ecac003b1642800441139e497f3c3769', class: "mg-c-illustrated-message__slots" }, h("div", { key: '804f5fc5a96d87d4e533d64eb80d275377dec0cf', class: "mg-c-illustrated-message__title" }, h("slot", { key: 'c5db8d1c61b0b85bc94905dc4b4bfe3ce44d48d1', name: "title" })), h("div", { key: 'e5be01c4e24a60a039a072946d12275bf46b681d', class: "mg-c-illustrated-message__details" }, h("slot", { key: '76eaf55622ed37c42f40ec832ec48ca6ab66e42c', name: "details" })))));
|
|
983
925
|
}
|
|
984
926
|
get element() { return getElement(this); }
|
|
985
927
|
};
|
|
@@ -993,21 +935,12 @@ const widths = [2, 4, 16, 'full'];
|
|
|
993
935
|
* Possible tootltip postions
|
|
994
936
|
*/
|
|
995
937
|
const tooltipPositions = ['input', 'label'];
|
|
996
|
-
/**
|
|
997
|
-
* Available handlers
|
|
998
|
-
*/
|
|
999
|
-
var Handler;
|
|
1000
|
-
(function (Handler) {
|
|
1001
|
-
Handler["BLUR"] = "blur";
|
|
1002
|
-
Handler["FOCUS"] = "focus";
|
|
1003
|
-
Handler["MOUSEENTER"] = "mouseenter";
|
|
1004
|
-
})(Handler || (Handler = {}));
|
|
1005
938
|
const classFieldset = 'mg-c-input--fieldset';
|
|
1006
939
|
const classDisabled = 'mg-c-input--disabled';
|
|
1007
940
|
const classReadonly = 'mg-c-input--readonly';
|
|
1008
941
|
const classVerticalList = 'mg-c-input--vertical-list';
|
|
1009
942
|
|
|
1010
|
-
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}}
|
|
943
|
+
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}}";
|
|
1011
944
|
const MgInputStyle0 = mgInputCss;
|
|
1012
945
|
|
|
1013
946
|
const MgInput = class {
|
|
@@ -1020,25 +953,6 @@ const MgInput = class {
|
|
|
1020
953
|
this.classInput = 'mg-c-input';
|
|
1021
954
|
this.classHasError = 'mg-c-input--has-error';
|
|
1022
955
|
this.classLabelOnTop = 'mg-c-input--label-on-top';
|
|
1023
|
-
/**
|
|
1024
|
-
* Get readonly values
|
|
1025
|
-
* @returns formated readonly value
|
|
1026
|
-
*/
|
|
1027
|
-
this.getReadonlyValues = () => {
|
|
1028
|
-
var _a;
|
|
1029
|
-
if (Array.isArray(this.readonlyValue) && !this.isVerticalList) {
|
|
1030
|
-
return this.readonlyValue.join(', ');
|
|
1031
|
-
}
|
|
1032
|
-
else if (Array.isArray(this.readonlyValue) && this.readonlyValue.length > 1) {
|
|
1033
|
-
return this.readonlyValue;
|
|
1034
|
-
}
|
|
1035
|
-
else if (Array.isArray(this.readonlyValue) && this.readonlyValue.length === 1) {
|
|
1036
|
-
return this.readonlyValue[0];
|
|
1037
|
-
}
|
|
1038
|
-
else {
|
|
1039
|
-
return ((_a = this.readonlyValue) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.readonlyValue : '';
|
|
1040
|
-
}
|
|
1041
|
-
};
|
|
1042
956
|
/**
|
|
1043
957
|
* Get tooltip node
|
|
1044
958
|
* @returns mg-tooltip
|
|
@@ -1051,7 +965,6 @@ const MgInput = class {
|
|
|
1051
965
|
this.tooltip = undefined;
|
|
1052
966
|
this.tooltipPosition = 'input';
|
|
1053
967
|
this.required = false;
|
|
1054
|
-
this.readonlyValue = undefined;
|
|
1055
968
|
this.errorMessage = undefined;
|
|
1056
969
|
this.helpText = undefined;
|
|
1057
970
|
this.ariaDescribedbyIDs = undefined;
|
|
@@ -1061,8 +974,8 @@ const MgInput = class {
|
|
|
1061
974
|
this.isVerticalList = false;
|
|
1062
975
|
}
|
|
1063
976
|
watchIdentifier(newValue) {
|
|
1064
|
-
if (!
|
|
1065
|
-
throw new Error(
|
|
977
|
+
if (!Qe(newValue)) {
|
|
978
|
+
throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${Ze(newValue)}.`);
|
|
1066
979
|
}
|
|
1067
980
|
else {
|
|
1068
981
|
this.helpTextId = `${this.identifier}-help-text`;
|
|
@@ -1084,12 +997,12 @@ const MgInput = class {
|
|
|
1084
997
|
}
|
|
1085
998
|
watchTooltipPosition(newValue) {
|
|
1086
999
|
if (!tooltipPositions.includes(newValue)) {
|
|
1087
|
-
throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}
|
|
1000
|
+
throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
1088
1001
|
}
|
|
1089
1002
|
}
|
|
1090
1003
|
watchErrorMessage(newValue) {
|
|
1091
1004
|
var _a;
|
|
1092
|
-
if (newValue) {
|
|
1005
|
+
if (newValue !== undefined) {
|
|
1093
1006
|
this.element.classList.add(this.classHasError);
|
|
1094
1007
|
this.renderErrorMessage();
|
|
1095
1008
|
}
|
|
@@ -1101,7 +1014,7 @@ const MgInput = class {
|
|
|
1101
1014
|
}
|
|
1102
1015
|
watchHelpText(newValue) {
|
|
1103
1016
|
var _a;
|
|
1104
|
-
if (newValue) {
|
|
1017
|
+
if (newValue && !this.isReadonly) {
|
|
1105
1018
|
this.renderHelpText();
|
|
1106
1019
|
}
|
|
1107
1020
|
else {
|
|
@@ -1110,16 +1023,18 @@ const MgInput = class {
|
|
|
1110
1023
|
}
|
|
1111
1024
|
}
|
|
1112
1025
|
watchAriaDescribedbyIDs() {
|
|
1026
|
+
if (this.isReadonly)
|
|
1027
|
+
return;
|
|
1113
1028
|
// a11y IDs
|
|
1114
1029
|
const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);
|
|
1115
1030
|
// Help text
|
|
1116
|
-
if (this.helpText) {
|
|
1031
|
+
if (this.helpText !== undefined) {
|
|
1117
1032
|
this.renderHelpText();
|
|
1118
1033
|
if (!ariaDescribedbyIDs.has(this.helpTextId))
|
|
1119
1034
|
ariaDescribedbyIDs.add(this.helpTextId);
|
|
1120
1035
|
}
|
|
1121
1036
|
// Error Message
|
|
1122
|
-
if (this.errorMessage) {
|
|
1037
|
+
if (this.errorMessage !== undefined) {
|
|
1123
1038
|
this.renderErrorMessage();
|
|
1124
1039
|
if (!ariaDescribedbyIDs.has(this.helpTextErrorId))
|
|
1125
1040
|
ariaDescribedbyIDs.add(this.helpTextErrorId);
|
|
@@ -1146,8 +1061,8 @@ const MgInput = class {
|
|
|
1146
1061
|
*/
|
|
1147
1062
|
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1148
1063
|
watchLabel() {
|
|
1149
|
-
if (!
|
|
1150
|
-
throw new Error(
|
|
1064
|
+
if (!Qe(this.label)) {
|
|
1065
|
+
throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${Ze(this.label)}.`);
|
|
1151
1066
|
}
|
|
1152
1067
|
else {
|
|
1153
1068
|
this.watchAriaDescribedbyIDs();
|
|
@@ -1187,7 +1102,7 @@ const MgInput = class {
|
|
|
1187
1102
|
*/
|
|
1188
1103
|
renderErrorMessage() {
|
|
1189
1104
|
this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);
|
|
1190
|
-
if (
|
|
1105
|
+
if (this.errorMessageSlotElement === null) {
|
|
1191
1106
|
this.errorMessageSlotElement = document.createElement('div');
|
|
1192
1107
|
this.errorMessageSlotElement.setAttribute('slot', this.slotError);
|
|
1193
1108
|
this.element.appendChild(this.errorMessageSlotElement);
|
|
@@ -1200,7 +1115,7 @@ const MgInput = class {
|
|
|
1200
1115
|
*/
|
|
1201
1116
|
renderHelpText() {
|
|
1202
1117
|
this.helptextMessageSlotElement = this.element.querySelector(`[slot=${this.slotHelpText}]`);
|
|
1203
|
-
if (
|
|
1118
|
+
if (this.helptextMessageSlotElement === null) {
|
|
1204
1119
|
this.helptextMessageSlotElement = document.createElement('div');
|
|
1205
1120
|
this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);
|
|
1206
1121
|
this.element.appendChild(this.helptextMessageSlotElement);
|
|
@@ -1217,19 +1132,19 @@ const MgInput = class {
|
|
|
1217
1132
|
componentWillLoad() {
|
|
1218
1133
|
this.watchIdentifier(this.identifier);
|
|
1219
1134
|
this.watchLabel();
|
|
1135
|
+
this.watchClass();
|
|
1220
1136
|
this.watchLabelOnTop(this.labelOnTop);
|
|
1221
1137
|
this.watchLabelConfig();
|
|
1222
1138
|
this.watchTooltipPosition(this.tooltipPosition);
|
|
1223
1139
|
this.watchHelpText(this.helpText);
|
|
1224
1140
|
this.watchErrorMessage(this.errorMessage);
|
|
1225
|
-
this.watchClass();
|
|
1226
1141
|
}
|
|
1227
1142
|
/**
|
|
1228
1143
|
* Validate slots
|
|
1229
1144
|
*/
|
|
1230
1145
|
componentDidLoad() {
|
|
1231
1146
|
this.watchAriaDescribedbyIDs();
|
|
1232
|
-
if (!this.isReadonly && !this.isFieldset &&
|
|
1147
|
+
if (!this.isReadonly && !this.isFieldset && this.element.querySelector(`#${this.identifier}`) === null) {
|
|
1233
1148
|
throw new Error(`<mg-input> "identifier" prop has no target for id: ${this.identifier}. Add an id to the targeted input.`);
|
|
1234
1149
|
}
|
|
1235
1150
|
}
|
|
@@ -1238,18 +1153,8 @@ const MgInput = class {
|
|
|
1238
1153
|
* @returns HTML Element
|
|
1239
1154
|
*/
|
|
1240
1155
|
render() {
|
|
1241
|
-
const readonlyValue = this.getReadonlyValues();
|
|
1242
1156
|
const isGroup = this.isFieldset && !this.isReadonly;
|
|
1243
|
-
return (h(Host, { key: '
|
|
1244
|
-
? [
|
|
1245
|
-
Array.isArray(readonlyValue) ? (h("ul", { key: "readonly-value-list" }, readonlyValue.map(value => (h("li", { key: value }, h("strong", null, value)))))) : (h("strong", { key: "readonly-value" }, readonlyValue)),
|
|
1246
|
-
h("slot", { key: "default-slot" }),
|
|
1247
|
-
]
|
|
1248
|
-
: [
|
|
1249
|
-
h("div", { class: "mg-c-input__input", key: "tooltip" }, h("slot", null), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()),
|
|
1250
|
-
this.helpText && (h("div", { class: "mg-c-input__help-text", key: "help-text" }, h("slot", { name: this.slotHelpText }))),
|
|
1251
|
-
!this.isDisabled && this.errorMessage && (h("div", { class: "mg-c-input__error", "aria-live": "assertive", key: "error-message" }, h("slot", { name: this.slotError }))),
|
|
1252
|
-
])));
|
|
1157
|
+
return (h(Host, { key: 'de2441ca25015a07653e09f5cda0d9588062840d', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '39cfcc83a6965e55310220f05334d3f364c502c1', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: '6413efe7254806a84e283cd15365dc0d78c18afe', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '7047fbaff93f273d134745e4d991eb91c28ef7f5', class: "mg-c-input__input-container" }, h("div", { key: '3cb904222def3d4f68cf000ae292e0dc221a954c', class: "mg-c-input__input" }, h("slot", { key: '552f670ef98a4ce43dbbf6bb54038152c87b6472' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: '945232348ed6d14f6f018dcb8003ef46c68c6b44', class: "mg-c-input__help-text" }, h("slot", { key: '782770bebf5600f75f59930b5d9665ef93a0404b', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: '96398b6849c7c26474037c1f783dc02d70f1ad65', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: 'dc7cf70f5145e790f246b9ac0955f24105927adc', name: this.slotError }))))));
|
|
1253
1158
|
}
|
|
1254
1159
|
get element() { return getElement(this); }
|
|
1255
1160
|
static get watchers() { return {
|
|
@@ -1271,30 +1176,12 @@ MgInput.style = MgInputStyle0;
|
|
|
1271
1176
|
*/
|
|
1272
1177
|
const checkboxTypes = ['checkbox', 'multi'];
|
|
1273
1178
|
/**
|
|
1274
|
-
* mg-input-checkbox-paginated section kind
|
|
1275
|
-
*/
|
|
1276
|
-
var SectionKind;
|
|
1277
|
-
(function (SectionKind) {
|
|
1278
|
-
SectionKind["SELECTED"] = "selected";
|
|
1279
|
-
SectionKind["NOT_SELECTED"] = "not-selected";
|
|
1280
|
-
})(SectionKind || (SectionKind = {}));
|
|
1281
|
-
/**
|
|
1282
|
-
* mg-input-checkbox-paginated section title kind
|
|
1283
|
-
*/
|
|
1284
|
-
var SectionTitleKind;
|
|
1285
|
-
(function (SectionTitleKind) {
|
|
1286
|
-
SectionTitleKind["BUTTON"] = "button";
|
|
1287
|
-
SectionTitleKind["TEXT"] = "text";
|
|
1288
|
-
})(SectionTitleKind || (SectionTitleKind = {}));
|
|
1289
|
-
/**
|
|
1290
|
-
* Define select values button key
|
|
1179
|
+
* mg-input-checkbox-paginated section kind value
|
|
1291
1180
|
*/
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
SelectValuesButtonKey["SELECT"] = "selectButton";
|
|
1297
|
-
})(SelectValuesButtonKey || (SelectValuesButtonKey = {}));
|
|
1181
|
+
const SectionKind = {
|
|
1182
|
+
SELECTED: 'selected',
|
|
1183
|
+
NOT_SELECTED: 'not-selected',
|
|
1184
|
+
};
|
|
1298
1185
|
|
|
1299
1186
|
/**
|
|
1300
1187
|
* Get checkboxes list template
|
|
@@ -1308,7 +1195,7 @@ const MgInputCheckboxList = (props) => (h("ul", { class: "mg-c-input__input-grou
|
|
|
1308
1195
|
h("label", { htmlFor: input._id, onMouseEnter: input._handleMouseEnter, onMouseLeave: input._handleMouseLeave }, input.title)));
|
|
1309
1196
|
})));
|
|
1310
1197
|
|
|
1311
|
-
const mgInputCheckboxCss = ".mg-
|
|
1198
|
+
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:80vh;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));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)}";
|
|
1312
1199
|
const MgInputCheckboxStyle0 = mgInputCheckboxCss;
|
|
1313
1200
|
|
|
1314
1201
|
/**
|
|
@@ -1359,11 +1246,11 @@ const MgInputCheckbox = class {
|
|
|
1359
1246
|
return;
|
|
1360
1247
|
}
|
|
1361
1248
|
const enableInputs = Array.from(this.element.shadowRoot.querySelectorAll('input'))
|
|
1362
|
-
.filter(input => !input.
|
|
1249
|
+
.filter(input => !input.hasAttribute('disabled'))
|
|
1363
1250
|
.map(({ id }) => id);
|
|
1364
1251
|
const originInputIndex = enableInputs.findIndex(id => id === event.target.id);
|
|
1365
1252
|
// close popover when tab trigger focus outside its DOM
|
|
1366
|
-
if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) || (originInputIndex === 0 && event.shiftKey &&
|
|
1253
|
+
if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) || (originInputIndex === 0 && event.shiftKey && this.searchInput === undefined))
|
|
1367
1254
|
this.mgPopover.display = false;
|
|
1368
1255
|
}
|
|
1369
1256
|
};
|
|
@@ -1371,12 +1258,12 @@ const MgInputCheckbox = class {
|
|
|
1371
1258
|
* Handle blur event
|
|
1372
1259
|
*/
|
|
1373
1260
|
this.handleBlur = (event) => {
|
|
1374
|
-
if (this.handlerInProgress ===
|
|
1261
|
+
if (this.handlerInProgress === 'mouseenter') {
|
|
1375
1262
|
event.preventDefault();
|
|
1376
1263
|
return;
|
|
1377
1264
|
}
|
|
1378
1265
|
// set guard
|
|
1379
|
-
this.handlerInProgress =
|
|
1266
|
+
this.handlerInProgress = 'blur';
|
|
1380
1267
|
// Check validity
|
|
1381
1268
|
this.checkValidity();
|
|
1382
1269
|
this.setErrorMessage();
|
|
@@ -1399,7 +1286,7 @@ const MgInputCheckbox = class {
|
|
|
1399
1286
|
// 1. update hasOpenedPopover guard with event value
|
|
1400
1287
|
this.hasOpenedPopover = event.detail;
|
|
1401
1288
|
// 2. update selected valued button text
|
|
1402
|
-
this.
|
|
1289
|
+
this.setButtonTextKey();
|
|
1403
1290
|
// 3. when popover display change to hide, update reset needeed props and run checkValidity
|
|
1404
1291
|
if (!event.detail) {
|
|
1405
1292
|
// reset search value
|
|
@@ -1419,7 +1306,7 @@ const MgInputCheckbox = class {
|
|
|
1419
1306
|
const displayItems = this.getDisplayItems();
|
|
1420
1307
|
// update only displayed items
|
|
1421
1308
|
displayItems.forEach(item => {
|
|
1422
|
-
item.value = event.detail !==
|
|
1309
|
+
item.value = event.detail !== SectionKind.SELECTED;
|
|
1423
1310
|
});
|
|
1424
1311
|
this.updateValues();
|
|
1425
1312
|
};
|
|
@@ -1427,7 +1314,7 @@ const MgInputCheckbox = class {
|
|
|
1427
1314
|
* Handle input label mouseenter event
|
|
1428
1315
|
*/
|
|
1429
1316
|
this.handleMouseEnter = () => {
|
|
1430
|
-
this.handlerInProgress =
|
|
1317
|
+
this.handlerInProgress = 'mouseenter';
|
|
1431
1318
|
};
|
|
1432
1319
|
/**
|
|
1433
1320
|
* Handle input label leave event
|
|
@@ -1458,7 +1345,7 @@ const MgInputCheckbox = class {
|
|
|
1458
1345
|
* Method to update searchResults
|
|
1459
1346
|
*/
|
|
1460
1347
|
this.updateSearchResults = () => {
|
|
1461
|
-
this.searchResults = this.checkboxItems.filter(item =>
|
|
1348
|
+
this.searchResults = this.checkboxItems.filter(item => Ye(item.title).includes(Ye(this.searchValue)));
|
|
1462
1349
|
};
|
|
1463
1350
|
/**
|
|
1464
1351
|
* Method to validate if one of inputs value is checked id required
|
|
@@ -1474,17 +1361,35 @@ const MgInputCheckbox = class {
|
|
|
1474
1361
|
/**
|
|
1475
1362
|
* Set button text locale key
|
|
1476
1363
|
*/
|
|
1477
|
-
this.
|
|
1364
|
+
this.setButtonTextKey = () => {
|
|
1478
1365
|
// prevent key update while popover is openned
|
|
1479
1366
|
if (this.hasOpenedPopover)
|
|
1480
1367
|
return;
|
|
1481
|
-
let messageKey =
|
|
1368
|
+
let messageKey = 'editButton';
|
|
1482
1369
|
if (this.disabled)
|
|
1483
|
-
messageKey =
|
|
1370
|
+
messageKey = 'showButton';
|
|
1484
1371
|
else if (this.getSelectedItems().length < 1)
|
|
1485
|
-
messageKey =
|
|
1372
|
+
messageKey = 'selectButton';
|
|
1486
1373
|
this.selectValuesButtonKey = messageKey;
|
|
1487
1374
|
};
|
|
1375
|
+
/**
|
|
1376
|
+
* Get select values button message
|
|
1377
|
+
* @returns message to display
|
|
1378
|
+
*/
|
|
1379
|
+
this.getSelectValuesButtonMessage = () => {
|
|
1380
|
+
if (this.selectValuesButtonKey === 'editButton' && Qe(this.editButtonMessage)) {
|
|
1381
|
+
return this.editButtonMessage;
|
|
1382
|
+
}
|
|
1383
|
+
else if (this.selectValuesButtonKey === 'showButton' && Qe(this.showButtonMessage)) {
|
|
1384
|
+
return this.showButtonMessage;
|
|
1385
|
+
}
|
|
1386
|
+
else if (this.selectValuesButtonKey === 'selectButton' && Qe(this.selectButtonMessage)) {
|
|
1387
|
+
return this.selectButtonMessage;
|
|
1388
|
+
}
|
|
1389
|
+
else {
|
|
1390
|
+
return this.messages.input.checkbox[this.selectValuesButtonKey];
|
|
1391
|
+
}
|
|
1392
|
+
};
|
|
1488
1393
|
/**
|
|
1489
1394
|
* Set input error message
|
|
1490
1395
|
* @param displayError - dispay error condition
|
|
@@ -1515,6 +1420,18 @@ const MgInputCheckbox = class {
|
|
|
1515
1420
|
* @returns selected checkboxItems
|
|
1516
1421
|
*/
|
|
1517
1422
|
this.getSelectedItems = () => this.checkboxItems.filter(({ value }) => value);
|
|
1423
|
+
/**
|
|
1424
|
+
* Renders the readonly value of the input.
|
|
1425
|
+
* @returns The rendered readonly value.
|
|
1426
|
+
*/
|
|
1427
|
+
this.renderReadonly = (readonlyValue) => {
|
|
1428
|
+
return this.inputVerticalList ? (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map(value => (h("li", { key: value }, h("b", null, value)))))) : (h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
|
|
1429
|
+
};
|
|
1430
|
+
/**
|
|
1431
|
+
* Renders the MgInputCheckboxList component.
|
|
1432
|
+
* @returns The rendered MgInputCheckboxList component.
|
|
1433
|
+
*/
|
|
1434
|
+
this.renderMgInputCheckboxList = () => (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid }));
|
|
1518
1435
|
this.value = undefined;
|
|
1519
1436
|
this.type = undefined;
|
|
1520
1437
|
this.identifier = undefined;
|
|
@@ -1532,13 +1449,16 @@ const MgInputCheckbox = class {
|
|
|
1532
1449
|
this.helpText = undefined;
|
|
1533
1450
|
this.valid = undefined;
|
|
1534
1451
|
this.invalid = undefined;
|
|
1452
|
+
this.editButtonMessage = undefined;
|
|
1453
|
+
this.showButtonMessage = undefined;
|
|
1454
|
+
this.selectButtonMessage = undefined;
|
|
1535
1455
|
this.classCollection = new Ie([this.baseClassName, classFieldset]);
|
|
1536
1456
|
this.errorMessage = undefined;
|
|
1537
1457
|
this.checkboxItems = [];
|
|
1538
1458
|
this.displaySearchInput = undefined;
|
|
1539
1459
|
this.searchValue = '';
|
|
1540
1460
|
this.searchResults = [];
|
|
1541
|
-
this.selectValuesButtonKey =
|
|
1461
|
+
this.selectValuesButtonKey = 'editButton';
|
|
1542
1462
|
}
|
|
1543
1463
|
validateValue(newValue) {
|
|
1544
1464
|
if (isCheckboxItems(newValue)) {
|
|
@@ -1546,12 +1466,12 @@ const MgInputCheckbox = class {
|
|
|
1546
1466
|
this.valueChange.emit(newValue);
|
|
1547
1467
|
}
|
|
1548
1468
|
else {
|
|
1549
|
-
throw new Error(
|
|
1469
|
+
throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${Ze(newValue)}.`);
|
|
1550
1470
|
}
|
|
1551
1471
|
}
|
|
1552
1472
|
validateType(newValue) {
|
|
1553
1473
|
if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
|
|
1554
|
-
throw new Error(
|
|
1474
|
+
throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${Ze(newValue)}.`);
|
|
1555
1475
|
}
|
|
1556
1476
|
else if (newValue === undefined) {
|
|
1557
1477
|
this.mode = 'auto';
|
|
@@ -1591,7 +1511,7 @@ const MgInputCheckbox = class {
|
|
|
1591
1511
|
this.hasDisplayedError = prop !== 'required';
|
|
1592
1512
|
this.setErrorMessage(this.hasDisplayedError);
|
|
1593
1513
|
}
|
|
1594
|
-
this.
|
|
1514
|
+
this.setButtonTextKey();
|
|
1595
1515
|
}
|
|
1596
1516
|
validateDisabled(newValue) {
|
|
1597
1517
|
if (newValue)
|
|
@@ -1608,7 +1528,7 @@ const MgInputCheckbox = class {
|
|
|
1608
1528
|
// refresh search values
|
|
1609
1529
|
if (this.displaySearchInput)
|
|
1610
1530
|
this.updateSearchResults();
|
|
1611
|
-
this.
|
|
1531
|
+
this.setButtonTextKey();
|
|
1612
1532
|
}
|
|
1613
1533
|
watchDisplaySearchInput(newValue) {
|
|
1614
1534
|
if (newValue)
|
|
@@ -1638,10 +1558,10 @@ const MgInputCheckbox = class {
|
|
|
1638
1558
|
*/
|
|
1639
1559
|
async setError(valid, errorMessage) {
|
|
1640
1560
|
if (typeof valid !== 'boolean') {
|
|
1641
|
-
throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
|
|
1561
|
+
throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean.');
|
|
1642
1562
|
}
|
|
1643
|
-
else if (!
|
|
1644
|
-
throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
|
|
1563
|
+
else if (!Qe(errorMessage)) {
|
|
1564
|
+
throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string.');
|
|
1645
1565
|
}
|
|
1646
1566
|
else {
|
|
1647
1567
|
this.setValidity(valid);
|
|
@@ -1658,7 +1578,7 @@ const MgInputCheckbox = class {
|
|
|
1658
1578
|
this.valid = newValue;
|
|
1659
1579
|
this.invalid = !this.valid;
|
|
1660
1580
|
// We need to send valid event even if it is the same value
|
|
1661
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
1581
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
1662
1582
|
this.inputValid.emit(this.valid);
|
|
1663
1583
|
}
|
|
1664
1584
|
/**
|
|
@@ -1727,10 +1647,12 @@ const MgInputCheckbox = class {
|
|
|
1727
1647
|
identifier: this.identifier,
|
|
1728
1648
|
};
|
|
1729
1649
|
const sections = [
|
|
1730
|
-
Object.assign(Object.assign({}, baseSection), {
|
|
1731
|
-
Object.assign(Object.assign({}, baseSection), {
|
|
1650
|
+
Object.assign(Object.assign({}, baseSection), { checkboxes: checkedValues, messages: this.messages.input.checkbox.sections.selected }),
|
|
1651
|
+
Object.assign(Object.assign({}, baseSection), { checkboxes: notCheckedValues, messages: this.messages.input.checkbox.sections.notSelected }),
|
|
1732
1652
|
];
|
|
1733
|
-
return sections
|
|
1653
|
+
return sections
|
|
1654
|
+
.filter(section => section.checkboxes.length)
|
|
1655
|
+
.map(section => h("mg-input-checkbox-paginated", Object.assign({}, section, { "onMass-action": this.handleMassAction, key: section.messages })));
|
|
1734
1656
|
}
|
|
1735
1657
|
/**
|
|
1736
1658
|
* render checkbox multi element
|
|
@@ -1740,20 +1662,31 @@ const MgInputCheckbox = class {
|
|
|
1740
1662
|
const selectedValuesNb = this.getSelectedItems().length;
|
|
1741
1663
|
const checkboxes = this.getDisplayItems();
|
|
1742
1664
|
return (h("div", { class: "mg-c-input__input-container" }, h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), display: this.hasOpenedPopover, "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
|
|
1743
|
-
if (el)
|
|
1665
|
+
if (el !== null)
|
|
1744
1666
|
this.mgPopover = el;
|
|
1745
|
-
} }, h("mg-button", { variant: "secondary", "aria-describedby": `${this.identifier}-title` }, h("mg-icon", { icon: "list" }), this.
|
|
1746
|
-
h("mg-input-text", { key: "input-search", identifier: `${this.identifier}-input-search`, icon: "magnifying-glass", type: "search", placeholder: this.messages.input.checkbox.label, label: this.messages.input.checkbox.label, mgWidth: "full", value: this.searchValue, labelHide: true,
|
|
1667
|
+
} }, h("mg-button", { variant: "secondary", "aria-describedby": `${this.identifier}-title` }, h("mg-icon", { icon: "list" }), this.getSelectValuesButtonMessage()), h("div", { slot: "content", class: "mg-c-input__content" }, this.displaySearchInput ? ([
|
|
1668
|
+
h("mg-input-text", { key: "input-search", identifier: `${this.identifier}-input-search`, icon: "magnifying-glass", type: "search", placeholder: this.messages.input.checkbox.label, label: this.messages.input.checkbox.label, mgWidth: "full", value: this.searchValue, labelHide: true, characterLeftHide: true, name: "q", "onValue-change": this.handleSearchChange, "aria-controls": "search-results items-list" }),
|
|
1747
1669
|
h("p", { key: "search-results", role: "status", class: "mg-u-visually-hidden", id: "search-results" }, `${checkboxes.length} ${this.messages.input.checkbox[checkboxes.length > 0 ? 'results' : 'result']}`),
|
|
1748
1670
|
h("div", { key: "sections-container", class: "mg-c-input__sections" }, this.renderCheckboxBySection(checkboxes)),
|
|
1749
|
-
]) : (h(MgInputCheckboxList, { checkboxes: checkboxes, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })), this.displaySearchInput && checkboxes.length === 0 && h("p", { class: "mg-c-input__input-no-result" }, this.messages.input.checkbox.noResult))), this.displaySelectedValues ? (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (h("
|
|
1671
|
+
]) : (h(MgInputCheckboxList, { checkboxes: checkboxes, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })), this.displaySearchInput && checkboxes.length === 0 && h("p", { class: "mg-c-input__input-no-result" }, this.messages.input.checkbox.noResult))), this.displaySelectedValues ? (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (h("b", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
|
|
1750
1672
|
}
|
|
1751
1673
|
/**
|
|
1752
1674
|
* Render
|
|
1753
1675
|
* @returns HTML Element
|
|
1754
1676
|
*/
|
|
1755
1677
|
render() {
|
|
1756
|
-
|
|
1678
|
+
let inputContent;
|
|
1679
|
+
const readonlyValue = this.value.filter(({ value }) => value).map(({ title }) => title);
|
|
1680
|
+
if (this.readonly) {
|
|
1681
|
+
inputContent = this.renderReadonly(readonlyValue);
|
|
1682
|
+
}
|
|
1683
|
+
else if (this.type === 'checkbox') {
|
|
1684
|
+
inputContent = this.renderMgInputCheckboxList();
|
|
1685
|
+
}
|
|
1686
|
+
else {
|
|
1687
|
+
inputContent = this.renderCheckboxMulti();
|
|
1688
|
+
}
|
|
1689
|
+
return (h("mg-input", { key: '2fb4ad15854041720f0810f0bcb1897f8f441f07', 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));
|
|
1757
1690
|
}
|
|
1758
1691
|
get element() { return getElement(this); }
|
|
1759
1692
|
static get watchers() { return {
|
|
@@ -1806,7 +1739,7 @@ const MgInputCheckboxPaginated = class {
|
|
|
1806
1739
|
* @param items - items to count
|
|
1807
1740
|
* @returns page count from items
|
|
1808
1741
|
*/
|
|
1809
|
-
this.getPageCount = (
|
|
1742
|
+
this.getPageCount = (items) => ((items === null || items === void 0 ? void 0 : items.length) > 0 ? Math.ceil(items.length / this.offset) : 0);
|
|
1810
1743
|
/**
|
|
1811
1744
|
* Handle mg-pagination current page change event
|
|
1812
1745
|
* @param event - pagination current page change event
|
|
@@ -1820,12 +1753,10 @@ const MgInputCheckboxPaginated = class {
|
|
|
1820
1753
|
this.invalid = undefined;
|
|
1821
1754
|
this.currentPage = 1;
|
|
1822
1755
|
this.checkboxes = [];
|
|
1823
|
-
this.sectionKind = undefined;
|
|
1824
1756
|
this.messages = undefined;
|
|
1825
|
-
this.titleKind = undefined;
|
|
1826
1757
|
this.expanded = true;
|
|
1827
1758
|
}
|
|
1828
|
-
|
|
1759
|
+
watchCheckboxes(newValue, oldValue) {
|
|
1829
1760
|
const pageCountNewValue = this.getPageCount(newValue);
|
|
1830
1761
|
const pageCountOldValue = this.getPageCount(oldValue);
|
|
1831
1762
|
// after each array.length update we reset pagination
|
|
@@ -1837,12 +1768,7 @@ const MgInputCheckboxPaginated = class {
|
|
|
1837
1768
|
else if (pageCountOldValue === this.currentPage && pageCountNewValue < this.currentPage) {
|
|
1838
1769
|
this.currentPage--;
|
|
1839
1770
|
}
|
|
1840
|
-
|
|
1841
|
-
validateSectionKind(newValue) {
|
|
1842
|
-
if (newValue === SectionKind.SELECTED)
|
|
1843
|
-
this.titleKind = SectionTitleKind.BUTTON;
|
|
1844
|
-
else
|
|
1845
|
-
this.titleKind = SectionTitleKind.TEXT;
|
|
1771
|
+
this.sectionKind = newValue[0].value ? SectionKind.SELECTED : SectionKind.NOT_SELECTED;
|
|
1846
1772
|
}
|
|
1847
1773
|
/**
|
|
1848
1774
|
* Get from and to index
|
|
@@ -1858,37 +1784,27 @@ const MgInputCheckboxPaginated = class {
|
|
|
1858
1784
|
* Lifecycle *
|
|
1859
1785
|
*************/
|
|
1860
1786
|
/**
|
|
1861
|
-
*
|
|
1787
|
+
* Validate props
|
|
1862
1788
|
*/
|
|
1863
1789
|
componentWillLoad() {
|
|
1864
|
-
this.
|
|
1790
|
+
this.watchCheckboxes(this.checkboxes);
|
|
1865
1791
|
}
|
|
1866
1792
|
/**
|
|
1867
1793
|
* Render
|
|
1868
1794
|
* @returns HTML Element
|
|
1869
1795
|
*/
|
|
1870
1796
|
render() {
|
|
1871
|
-
const getText = (checkboxes) => (h("em", { key: '
|
|
1797
|
+
const getText = (checkboxes) => (h("em", { key: '05d577bded8e2602d1dedf9a36f695904d491242', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`));
|
|
1872
1798
|
const [from, to] = this.getFromToIndexes();
|
|
1873
1799
|
const itemsContainerId = `items-${this.sectionKind}-container`;
|
|
1874
|
-
return (h(Host, { key: '
|
|
1800
|
+
return (h(Host, { key: '49b95a0882cc475aab4a810ccd8f292d83b59a9a', hidden: this.checkboxes.length < 1 }, h("div", { key: '2db5103f9784add1effb7a5dcafa8f8196601d14', class: "mg-c-input__section-header" }, this.sectionKind === SectionKind.SELECTED ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__section-header-title mg-c-input__section-header-title--static" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-tooltip", { key: '1bf161092691a606697a543de71e78c574b0dea0', class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip }, h("mg-button", { key: '3f9090d137c2ea967e098b06a4ed2bd36da34267', variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { key: '6b405d35f0ffba82352dbf1a9a1e9abed274b5f2', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, h(MgInputCheckboxList, { key: 'd3ef36cc9431352bedff1de8fa5f1cfc8070bfa5', 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 }))));
|
|
1875
1801
|
}
|
|
1876
1802
|
static get watchers() { return {
|
|
1877
|
-
"checkboxes": ["
|
|
1878
|
-
"sectionKind": ["validateSectionKind"]
|
|
1803
|
+
"checkboxes": ["watchCheckboxes"]
|
|
1879
1804
|
}; }
|
|
1880
1805
|
};
|
|
1881
1806
|
|
|
1882
|
-
var
|
|
1883
|
-
(function (InputError) {
|
|
1884
|
-
InputError["MIN"] = "min";
|
|
1885
|
-
InputError["MAX"] = "max";
|
|
1886
|
-
InputError["MINMAX"] = "minMax";
|
|
1887
|
-
InputError["REQUIRED"] = "required";
|
|
1888
|
-
InputError["PATTERN"] = "badInput";
|
|
1889
|
-
})(InputError$1 || (InputError$1 = {}));
|
|
1890
|
-
|
|
1891
|
-
const mgInputDateCss = ".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-container{width:100%;flex:1 auto}.mg-c-input__box.mg-c-input__box--width{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.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.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-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 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(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.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:.7rem}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi)) .mg-c-input__input-container mg-tooltip{margin-left:3rem}: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{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input{display:flex;min-height:var(--default-size);align-items:center;justify-content:start}.mg-c-input__input-icon{color:hsl(var(--color-dark))}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled),.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:1.2rem;text-align:start}.mg-c-input__help-text+.mg-c-input__error{margin-top:.2rem}: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:.5rem}.mg-c-input.mg-c-input--readonly>*:not([slot=label],[name=append-input]),.mg-c-input.mg-c-input--readonly ::slotted(mg-button[slot=append-input]){display:none}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}:host(.mg-c-input){display:flex}:host(.mg-c-input.mg-c-input--textarea.mg-c-input--readonly) .mg-c-input__input-container{white-space:pre-line}: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--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:.3rem;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:.3rem;text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;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-button-border-radius-top-right:0;--mg-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-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-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(--default-size) - var(--mg-icon-regular-size))/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}}";
|
|
1807
|
+
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}}";
|
|
1892
1808
|
const MgInputDateStyle0 = mgInputDateCss;
|
|
1893
1809
|
|
|
1894
1810
|
const MgInputDate = class {
|
|
@@ -1903,7 +1819,7 @@ const MgInputDate = class {
|
|
|
1903
1819
|
* @param value - value to test
|
|
1904
1820
|
* @returns truthy when value match the pattern
|
|
1905
1821
|
*/
|
|
1906
|
-
this.isValidPattern = (value) =>
|
|
1822
|
+
this.isValidPattern = (value) => Qe(value) && We.test(value);
|
|
1907
1823
|
/**
|
|
1908
1824
|
* Format help text to display
|
|
1909
1825
|
* @param helpText - help text format
|
|
@@ -1911,10 +1827,10 @@ const MgInputDate = class {
|
|
|
1911
1827
|
*/
|
|
1912
1828
|
this.formatHelpText = (helpText) => {
|
|
1913
1829
|
const defaultHelpTextVariable = '{defaultHelpText}';
|
|
1914
|
-
let text =
|
|
1830
|
+
let text = Qe(helpText) ? helpText : this.messages.input.date.helpText;
|
|
1915
1831
|
if (text.includes(defaultHelpTextVariable))
|
|
1916
1832
|
text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));
|
|
1917
|
-
return text.replace('{pattern}', this.renderPattern()).replace('{date}', He(
|
|
1833
|
+
return text.replace('{pattern}', this.renderPattern()).replace('{date}', He(at(new Date('2023-12-24')), this.systemLocale));
|
|
1918
1834
|
};
|
|
1919
1835
|
/**
|
|
1920
1836
|
* Handle input event
|
|
@@ -1930,7 +1846,7 @@ const MgInputDate = class {
|
|
|
1930
1846
|
* Handle blur event
|
|
1931
1847
|
*/
|
|
1932
1848
|
this.handleBlur = () => {
|
|
1933
|
-
this.handlerInProgress =
|
|
1849
|
+
this.handlerInProgress = 'blur';
|
|
1934
1850
|
this.displayError().finally(() => {
|
|
1935
1851
|
// reset guard
|
|
1936
1852
|
this.handlerInProgress = undefined;
|
|
@@ -1956,7 +1872,7 @@ const MgInputDate = class {
|
|
|
1956
1872
|
* Check if input is valid
|
|
1957
1873
|
*/
|
|
1958
1874
|
this.checkValidity = () => {
|
|
1959
|
-
this.setValidity(this.readonly || this.disabled || (this.input.checkValidity() && (
|
|
1875
|
+
this.setValidity(this.readonly || this.disabled || (this.input.checkValidity() && (['', undefined].includes(this.value) || this.isValidPattern(this.value))));
|
|
1960
1876
|
};
|
|
1961
1877
|
/**
|
|
1962
1878
|
* get input error code
|
|
@@ -1967,23 +1883,23 @@ const MgInputDate = class {
|
|
|
1967
1883
|
let inputError = null;
|
|
1968
1884
|
// required
|
|
1969
1885
|
if (this.input.validity.valueMissing) {
|
|
1970
|
-
inputError =
|
|
1886
|
+
inputError = 'required';
|
|
1971
1887
|
}
|
|
1972
1888
|
// pattern
|
|
1973
1889
|
else if (this.value && !this.isValidPattern(this.value)) {
|
|
1974
|
-
inputError =
|
|
1890
|
+
inputError = 'badInput';
|
|
1975
1891
|
}
|
|
1976
1892
|
// min & max
|
|
1977
1893
|
else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== '9999-12-31') {
|
|
1978
|
-
inputError =
|
|
1894
|
+
inputError = 'minMax';
|
|
1979
1895
|
}
|
|
1980
1896
|
// min
|
|
1981
1897
|
else if (this.input.validity.rangeUnderflow) {
|
|
1982
|
-
inputError =
|
|
1898
|
+
inputError = 'min';
|
|
1983
1899
|
}
|
|
1984
1900
|
// max
|
|
1985
1901
|
else if (this.input.validity.rangeOverflow) {
|
|
1986
|
-
inputError =
|
|
1902
|
+
inputError = 'max';
|
|
1987
1903
|
}
|
|
1988
1904
|
return inputError;
|
|
1989
1905
|
};
|
|
@@ -2000,11 +1916,11 @@ const MgInputDate = class {
|
|
|
2000
1916
|
this.errorMessage = errorMessage;
|
|
2001
1917
|
}
|
|
2002
1918
|
// required
|
|
2003
|
-
else if (inputError ===
|
|
1919
|
+
else if (inputError === 'required') {
|
|
2004
1920
|
this.errorMessage = this.messages.errors[inputError];
|
|
2005
1921
|
}
|
|
2006
1922
|
// min, max & minMax
|
|
2007
|
-
else if ([
|
|
1923
|
+
else if (['min', 'max', 'minMax'].includes(inputError)) {
|
|
2008
1924
|
this.errorMessage = this.messages.errors.date[inputError]
|
|
2009
1925
|
.replace('{min}', He(this.min, this.systemLocale))
|
|
2010
1926
|
.replace('{max}', He(this.max, this.systemLocale));
|
|
@@ -2021,7 +1937,7 @@ const MgInputDate = class {
|
|
|
2021
1937
|
* @returns translated html pattern
|
|
2022
1938
|
*/
|
|
2023
1939
|
this.renderPattern = () => {
|
|
2024
|
-
let patternLocal =
|
|
1940
|
+
let patternLocal = it(this.systemLocale);
|
|
2025
1941
|
for (const key in this.messages.input.date.pattern) {
|
|
2026
1942
|
patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
|
|
2027
1943
|
}
|
|
@@ -2051,14 +1967,14 @@ const MgInputDate = class {
|
|
|
2051
1967
|
if (newValue === '')
|
|
2052
1968
|
newValue = null;
|
|
2053
1969
|
// check value validity
|
|
2054
|
-
if (newValue && !
|
|
2055
|
-
throw new Error(
|
|
1970
|
+
if (newValue && !Qe(newValue)) {
|
|
1971
|
+
throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${Ze(newValue)}.`);
|
|
2056
1972
|
}
|
|
2057
|
-
else if (
|
|
1973
|
+
else if ([null, undefined].includes(newValue) || this.isValidPattern(newValue)) {
|
|
2058
1974
|
this.valueChange.emit(newValue);
|
|
2059
1975
|
}
|
|
2060
1976
|
else {
|
|
2061
|
-
console.error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
|
|
1977
|
+
console.error("<mg-input-date> props 'value' doesn't match pattern: 'yyyy-mm-dd'.");
|
|
2062
1978
|
}
|
|
2063
1979
|
}
|
|
2064
1980
|
watchReadonly(newValue) {
|
|
@@ -2069,7 +1985,7 @@ const MgInputDate = class {
|
|
|
2069
1985
|
}
|
|
2070
1986
|
validateMinMax(newValue) {
|
|
2071
1987
|
if (newValue && !this.isValidPattern(newValue)) {
|
|
2072
|
-
throw new Error(
|
|
1988
|
+
throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${Ze(newValue)}.`);
|
|
2073
1989
|
}
|
|
2074
1990
|
}
|
|
2075
1991
|
handleValidityChange(newValue, _oldValue, prop) {
|
|
@@ -2106,10 +2022,10 @@ const MgInputDate = class {
|
|
|
2106
2022
|
*/
|
|
2107
2023
|
async setError(valid, errorMessage) {
|
|
2108
2024
|
if (typeof valid !== 'boolean') {
|
|
2109
|
-
throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean');
|
|
2025
|
+
throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean.');
|
|
2110
2026
|
}
|
|
2111
|
-
else if (!
|
|
2112
|
-
throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
|
|
2027
|
+
else if (!Qe(errorMessage)) {
|
|
2028
|
+
throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string.');
|
|
2113
2029
|
}
|
|
2114
2030
|
else {
|
|
2115
2031
|
this.setValidity(valid);
|
|
@@ -2126,7 +2042,7 @@ const MgInputDate = class {
|
|
|
2126
2042
|
this.valid = newValue;
|
|
2127
2043
|
this.invalid = !this.valid;
|
|
2128
2044
|
// We need to send valid event even if it is the same value
|
|
2129
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
2045
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
2130
2046
|
this.inputValid.emit(this.valid);
|
|
2131
2047
|
}
|
|
2132
2048
|
/*************
|
|
@@ -2162,10 +2078,10 @@ const MgInputDate = class {
|
|
|
2162
2078
|
* @returns HTML Element
|
|
2163
2079
|
*/
|
|
2164
2080
|
render() {
|
|
2165
|
-
return (h("mg-input", { key: '
|
|
2081
|
+
return (h("mg-input", { key: '38bcc2503040b03e17e49f3cb1ac27209aa50a1b', 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 && ['', undefined].includes(this.value) ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, He(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
|
|
2166
2082
|
if (el !== null)
|
|
2167
2083
|
this.input = el;
|
|
2168
|
-
} })));
|
|
2084
|
+
} }))));
|
|
2169
2085
|
}
|
|
2170
2086
|
get element() { return getElement(this); }
|
|
2171
2087
|
static get watchers() { return {
|
|
@@ -2182,17 +2098,10 @@ MgInputDate.style = MgInputDateStyle0;
|
|
|
2182
2098
|
/**
|
|
2183
2099
|
* List of all possibles types
|
|
2184
2100
|
*/
|
|
2185
|
-
const types = ['decimal', 'integer'
|
|
2101
|
+
const types = ['decimal', 'integer'];
|
|
2186
2102
|
const formats = ['none', 'number', 'currency'];
|
|
2187
|
-
|
|
2188
|
-
(
|
|
2189
|
-
InputError["MIN"] = "min";
|
|
2190
|
-
InputError["MAX"] = "max";
|
|
2191
|
-
InputError["MINMAX"] = "minMax";
|
|
2192
|
-
InputError["REQUIRED"] = "required";
|
|
2193
|
-
})(InputError || (InputError = {}));
|
|
2194
|
-
|
|
2195
|
-
const mgInputNumericCss = ".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-container{width:100%;flex:1 auto}.mg-c-input__box.mg-c-input__box--width{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.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.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-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 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(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.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:.7rem}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi)) .mg-c-input__input-container mg-tooltip{margin-left:3rem}: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{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input{display:flex;min-height:var(--default-size);align-items:center;justify-content:start}.mg-c-input__input-icon{color:hsl(var(--color-dark))}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled),.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:1.2rem;text-align:start}.mg-c-input__help-text+.mg-c-input__error{margin-top:.2rem}: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:.5rem}.mg-c-input.mg-c-input--readonly>*:not([slot=label],[name=append-input]),.mg-c-input.mg-c-input--readonly ::slotted(mg-button[slot=append-input]){display:none}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}:host(.mg-c-input){display:flex}:host(.mg-c-input.mg-c-input--textarea.mg-c-input--readonly) .mg-c-input__input-container{white-space:pre-line}: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--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:.3rem;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:.3rem;text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;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-button-border-radius-top-right:0;--mg-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-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-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(--default-size) - var(--mg-icon-regular-size))/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}}.mg-c-input .mg-c-input__box{text-align:var(--mg-inputs-text-align, right)}";
|
|
2103
|
+
|
|
2104
|
+
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-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.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)}";
|
|
2196
2105
|
const MgInputNumericStyle0 = mgInputNumericCss;
|
|
2197
2106
|
|
|
2198
2107
|
const MgInputNumeric = class {
|
|
@@ -2226,7 +2135,7 @@ const MgInputNumeric = class {
|
|
|
2226
2135
|
if (this.value === '-')
|
|
2227
2136
|
this.value = '';
|
|
2228
2137
|
// Display Error
|
|
2229
|
-
this.handlerInProgress =
|
|
2138
|
+
this.handlerInProgress = 'blur';
|
|
2230
2139
|
this.displayError().finally(() => {
|
|
2231
2140
|
// reset guard
|
|
2232
2141
|
this.handlerInProgress = undefined;
|
|
@@ -2251,7 +2160,7 @@ const MgInputNumeric = class {
|
|
|
2251
2160
|
if (errorMessage !== undefined) {
|
|
2252
2161
|
this.errorMessage = errorMessage;
|
|
2253
2162
|
}
|
|
2254
|
-
else if (inputError ===
|
|
2163
|
+
else if (inputError === 'required') {
|
|
2255
2164
|
this.errorMessage = this.messages.errors[inputError];
|
|
2256
2165
|
}
|
|
2257
2166
|
else {
|
|
@@ -2268,20 +2177,20 @@ const MgInputNumeric = class {
|
|
|
2268
2177
|
const hasNotEmptyValues = (toControl) => !toControl.some(value => [null, undefined].includes(value));
|
|
2269
2178
|
// required
|
|
2270
2179
|
if (!this.input.checkValidity() && this.input.validity.valueMissing) {
|
|
2271
|
-
inputError =
|
|
2180
|
+
inputError = 'required';
|
|
2272
2181
|
}
|
|
2273
2182
|
// Min & Max
|
|
2274
2183
|
else if (hasNotEmptyValues([this.min, this.numericValue]) && this.numericValue < this.min && this.max === undefined) {
|
|
2275
2184
|
// Only a min value is set
|
|
2276
|
-
inputError =
|
|
2185
|
+
inputError = 'min';
|
|
2277
2186
|
}
|
|
2278
2187
|
else if (hasNotEmptyValues([this.max, this.numericValue]) && this.numericValue > this.max && this.min === undefined) {
|
|
2279
2188
|
// Only a max value is set
|
|
2280
|
-
inputError =
|
|
2189
|
+
inputError = 'max';
|
|
2281
2190
|
}
|
|
2282
2191
|
else if (hasNotEmptyValues([this.min, this.max, this.numericValue]) && (this.numericValue < this.min || this.numericValue > this.max)) {
|
|
2283
2192
|
// both min and max values are set
|
|
2284
|
-
inputError =
|
|
2193
|
+
inputError = 'minMax';
|
|
2285
2194
|
}
|
|
2286
2195
|
return inputError;
|
|
2287
2196
|
};
|
|
@@ -2293,9 +2202,9 @@ const MgInputNumeric = class {
|
|
|
2293
2202
|
this.formatValue = (value) => {
|
|
2294
2203
|
switch (this.format) {
|
|
2295
2204
|
case 'number':
|
|
2296
|
-
return
|
|
2205
|
+
return ft(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2297
2206
|
case 'currency':
|
|
2298
|
-
return
|
|
2207
|
+
return ct(value, this.locale, this.currency);
|
|
2299
2208
|
case 'none':
|
|
2300
2209
|
return value.toString();
|
|
2301
2210
|
}
|
|
@@ -2306,9 +2215,22 @@ const MgInputNumeric = class {
|
|
|
2306
2215
|
this.validateAppendSlot = () => {
|
|
2307
2216
|
const slotAppendInput = this.element.querySelector('[slot="append-input"]');
|
|
2308
2217
|
if (slotAppendInput !== null) {
|
|
2309
|
-
|
|
2218
|
+
if (slotAppendInput.nodeName === 'MG-BUTTON') {
|
|
2219
|
+
this.classCollection.add('mg-c-input--is-input-group-append');
|
|
2220
|
+
}
|
|
2221
|
+
else {
|
|
2222
|
+
this.classCollection.add('mg-c-input--is-append-input-slot-content');
|
|
2223
|
+
this.slotContent = slotAppendInput.textContent;
|
|
2224
|
+
}
|
|
2310
2225
|
}
|
|
2311
2226
|
};
|
|
2227
|
+
/**
|
|
2228
|
+
* Renders the readonly content of the input component.
|
|
2229
|
+
* @returns The readonly content element.
|
|
2230
|
+
*/
|
|
2231
|
+
this.renderReadonly = () => {
|
|
2232
|
+
return this.slotContent !== undefined ? (h("span", { class: "mg-c-input__readonly-value" }, h("b", null, this.readonlyValue), this.slotContent)) : (h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue));
|
|
2233
|
+
};
|
|
2312
2234
|
this.value = undefined;
|
|
2313
2235
|
this.identifier = undefined;
|
|
2314
2236
|
this.name = this.identifier;
|
|
@@ -2327,7 +2249,7 @@ const MgInputNumeric = class {
|
|
|
2327
2249
|
this.helpText = undefined;
|
|
2328
2250
|
this.type = 'decimal';
|
|
2329
2251
|
this.format = 'number';
|
|
2330
|
-
this.currency = '
|
|
2252
|
+
this.currency = 'EUR';
|
|
2331
2253
|
this.integerLength = 13;
|
|
2332
2254
|
this.decimalLength = 2;
|
|
2333
2255
|
this.valid = undefined;
|
|
@@ -2382,30 +2304,27 @@ const MgInputNumeric = class {
|
|
|
2382
2304
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
2383
2305
|
});
|
|
2384
2306
|
// apply new width
|
|
2385
|
-
if (newValue)
|
|
2307
|
+
if (newValue !== undefined)
|
|
2386
2308
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
2387
2309
|
}
|
|
2388
2310
|
validateType(newValue) {
|
|
2389
2311
|
if (!types.includes(newValue)) {
|
|
2390
|
-
throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}
|
|
2391
|
-
}
|
|
2392
|
-
else if (newValue === 'currency') {
|
|
2393
|
-
this.format = 'currency';
|
|
2312
|
+
throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
2394
2313
|
}
|
|
2395
2314
|
}
|
|
2396
2315
|
watchFormat(newValue) {
|
|
2397
2316
|
if (!formats.includes(newValue)) {
|
|
2398
|
-
throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}
|
|
2317
|
+
throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
2399
2318
|
}
|
|
2400
2319
|
}
|
|
2401
2320
|
validateIntegerLength(newValue) {
|
|
2402
2321
|
if (newValue < 1) {
|
|
2403
|
-
throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number.`);
|
|
2322
|
+
throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${Ze(newValue)}.`);
|
|
2404
2323
|
}
|
|
2405
2324
|
}
|
|
2406
2325
|
validateDecimalLength(newValue) {
|
|
2407
2326
|
if (newValue < 1) {
|
|
2408
|
-
throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead.`);
|
|
2327
|
+
throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${Ze(newValue)}.`);
|
|
2409
2328
|
}
|
|
2410
2329
|
}
|
|
2411
2330
|
/**
|
|
@@ -2426,10 +2345,10 @@ const MgInputNumeric = class {
|
|
|
2426
2345
|
*/
|
|
2427
2346
|
async setError(valid, errorMessage) {
|
|
2428
2347
|
if (typeof valid !== 'boolean') {
|
|
2429
|
-
throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
|
|
2348
|
+
throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean.');
|
|
2430
2349
|
}
|
|
2431
|
-
else if (!
|
|
2432
|
-
throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
|
|
2350
|
+
else if (!Qe(errorMessage)) {
|
|
2351
|
+
throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string.');
|
|
2433
2352
|
}
|
|
2434
2353
|
else {
|
|
2435
2354
|
this.setValidity(valid);
|
|
@@ -2446,7 +2365,7 @@ const MgInputNumeric = class {
|
|
|
2446
2365
|
this.valid = newValue;
|
|
2447
2366
|
this.invalid = !this.valid;
|
|
2448
2367
|
// We need to send valid event even if it is the same value
|
|
2449
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
2368
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
2450
2369
|
this.inputValid.emit(this.valid);
|
|
2451
2370
|
}
|
|
2452
2371
|
/**
|
|
@@ -2523,10 +2442,15 @@ const MgInputNumeric = class {
|
|
|
2523
2442
|
* @returns HTML Element
|
|
2524
2443
|
*/
|
|
2525
2444
|
render() {
|
|
2526
|
-
return (h("mg-input", { key: '
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2445
|
+
return (h("mg-input", { key: '9b48fe7bf2a16f084ebddc050d90938c5d4e4b23', 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
|
|
2446
|
+
? this.readonlyValue && this.renderReadonly()
|
|
2447
|
+
: [
|
|
2448
|
+
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, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
2449
|
+
if (el !== null)
|
|
2450
|
+
this.input = el;
|
|
2451
|
+
} }),
|
|
2452
|
+
h("slot", { key: "slot", name: "append-input" }),
|
|
2453
|
+
]));
|
|
2530
2454
|
}
|
|
2531
2455
|
get element() { return getElement(this); }
|
|
2532
2456
|
static get watchers() { return {
|
|
@@ -2545,7 +2469,7 @@ const MgInputNumeric = class {
|
|
|
2545
2469
|
};
|
|
2546
2470
|
MgInputNumeric.style = MgInputNumericStyle0;
|
|
2547
2471
|
|
|
2548
|
-
const mgInputPasswordCss = ".mg-
|
|
2472
|
+
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-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.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))}";
|
|
2549
2473
|
const MgInputPasswordStyle0 = mgInputPasswordCss;
|
|
2550
2474
|
|
|
2551
2475
|
const MgInputPassword = class {
|
|
@@ -2569,7 +2493,7 @@ const MgInputPassword = class {
|
|
|
2569
2493
|
* Handle blur event
|
|
2570
2494
|
*/
|
|
2571
2495
|
this.handleBlur = () => {
|
|
2572
|
-
this.handlerInProgress =
|
|
2496
|
+
this.handlerInProgress = 'blur';
|
|
2573
2497
|
this.displayError().finally(() => {
|
|
2574
2498
|
// reset guard
|
|
2575
2499
|
this.handlerInProgress = undefined;
|
|
@@ -2656,7 +2580,7 @@ const MgInputPassword = class {
|
|
|
2656
2580
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
2657
2581
|
});
|
|
2658
2582
|
// apply new width
|
|
2659
|
-
if (newValue)
|
|
2583
|
+
if (newValue !== undefined)
|
|
2660
2584
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
2661
2585
|
}
|
|
2662
2586
|
/**
|
|
@@ -2677,10 +2601,10 @@ const MgInputPassword = class {
|
|
|
2677
2601
|
*/
|
|
2678
2602
|
async setError(valid, errorMessage) {
|
|
2679
2603
|
if (typeof valid !== 'boolean') {
|
|
2680
|
-
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean');
|
|
2604
|
+
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean.');
|
|
2681
2605
|
}
|
|
2682
|
-
else if (!
|
|
2683
|
-
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
|
|
2606
|
+
else if (!Qe(errorMessage)) {
|
|
2607
|
+
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string.');
|
|
2684
2608
|
}
|
|
2685
2609
|
else {
|
|
2686
2610
|
this.setValidity(valid);
|
|
@@ -2697,7 +2621,7 @@ const MgInputPassword = class {
|
|
|
2697
2621
|
this.valid = newValue;
|
|
2698
2622
|
this.invalid = !this.valid;
|
|
2699
2623
|
// We need to send valid event even if it is the same value
|
|
2700
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
2624
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
2701
2625
|
this.inputValid.emit(this.valid);
|
|
2702
2626
|
}
|
|
2703
2627
|
/*************
|
|
@@ -2725,10 +2649,10 @@ const MgInputPassword = class {
|
|
|
2725
2649
|
* @returns HTML Element
|
|
2726
2650
|
*/
|
|
2727
2651
|
render() {
|
|
2728
|
-
return (h("mg-input", { key: '
|
|
2652
|
+
return (h("mg-input", { key: '6459a70869ba217a29ad57b79aac2e5bf2aaddfb', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
2729
2653
|
if (el !== null)
|
|
2730
2654
|
this.input = el;
|
|
2731
|
-
} }), h("mg-button", {
|
|
2655
|
+
} }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: this.displayPassword ? 'eye-slash' : 'eye' }))))));
|
|
2732
2656
|
}
|
|
2733
2657
|
get element() { return getElement(this); }
|
|
2734
2658
|
static get watchers() { return {
|
|
@@ -2741,7 +2665,7 @@ const MgInputPassword = class {
|
|
|
2741
2665
|
};
|
|
2742
2666
|
MgInputPassword.style = MgInputPasswordStyle0;
|
|
2743
2667
|
|
|
2744
|
-
const mgInputRadioCss = ".mg-
|
|
2668
|
+
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}}";
|
|
2745
2669
|
const MgInputRadioStyle0 = mgInputRadioCss;
|
|
2746
2670
|
|
|
2747
2671
|
/**
|
|
@@ -2749,7 +2673,7 @@ const MgInputRadioStyle0 = mgInputRadioCss;
|
|
|
2749
2673
|
* @param option - radio option
|
|
2750
2674
|
* @returns radio option type is valid
|
|
2751
2675
|
*/
|
|
2752
|
-
const isOption$
|
|
2676
|
+
const isOption$3 = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
|
|
2753
2677
|
const MgInputRadio = class {
|
|
2754
2678
|
constructor(hostRef) {
|
|
2755
2679
|
registerInstance(this, hostRef);
|
|
@@ -2776,7 +2700,7 @@ const MgInputRadio = class {
|
|
|
2776
2700
|
* Handle blur event
|
|
2777
2701
|
*/
|
|
2778
2702
|
this.handleBlur = () => {
|
|
2779
|
-
this.handlerInProgress =
|
|
2703
|
+
this.handlerInProgress = 'blur';
|
|
2780
2704
|
this.checkValidity();
|
|
2781
2705
|
this.setErrorMessage();
|
|
2782
2706
|
// reset guard
|
|
@@ -2836,7 +2760,7 @@ const MgInputRadio = class {
|
|
|
2836
2760
|
if (Ge(this.items) && typeof newValue === 'string') {
|
|
2837
2761
|
this.readonlyValue = newValue;
|
|
2838
2762
|
}
|
|
2839
|
-
else if (this.items.every(isOption$
|
|
2763
|
+
else if (this.items.every(isOption$3)) {
|
|
2840
2764
|
this.readonlyValue = (_a = this.items.find(item => item.value === newValue)) === null || _a === void 0 ? void 0 : _a.title;
|
|
2841
2765
|
}
|
|
2842
2766
|
else {
|
|
@@ -2847,18 +2771,18 @@ const MgInputRadio = class {
|
|
|
2847
2771
|
validateItems(newValue) {
|
|
2848
2772
|
// Validate if items have required min length
|
|
2849
2773
|
if (typeof newValue === 'object' && newValue.length < 2) {
|
|
2850
|
-
throw new Error(
|
|
2774
|
+
throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${Ze(newValue)}.`);
|
|
2851
2775
|
}
|
|
2852
2776
|
// String array
|
|
2853
2777
|
else if (Ge(newValue)) {
|
|
2854
2778
|
this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
|
|
2855
2779
|
}
|
|
2856
2780
|
// Object array
|
|
2857
|
-
else if (newValue && newValue.every(item => isOption$
|
|
2781
|
+
else if (newValue && newValue.every(item => isOption$3(item))) {
|
|
2858
2782
|
this.options = newValue;
|
|
2859
2783
|
}
|
|
2860
2784
|
else {
|
|
2861
|
-
throw new Error(
|
|
2785
|
+
throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${Ze(newValue)}.`);
|
|
2862
2786
|
}
|
|
2863
2787
|
}
|
|
2864
2788
|
watchInputVerticalList(newValue) {
|
|
@@ -2907,10 +2831,10 @@ const MgInputRadio = class {
|
|
|
2907
2831
|
*/
|
|
2908
2832
|
async setError(valid, errorMessage) {
|
|
2909
2833
|
if (typeof valid !== 'boolean') {
|
|
2910
|
-
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean');
|
|
2834
|
+
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean.');
|
|
2911
2835
|
}
|
|
2912
|
-
else if (!
|
|
2913
|
-
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
|
|
2836
|
+
else if (!Qe(errorMessage)) {
|
|
2837
|
+
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string.');
|
|
2914
2838
|
}
|
|
2915
2839
|
else {
|
|
2916
2840
|
this.setValidity(valid);
|
|
@@ -2927,7 +2851,7 @@ const MgInputRadio = class {
|
|
|
2927
2851
|
this.valid = newValue;
|
|
2928
2852
|
this.invalid = !this.valid;
|
|
2929
2853
|
// We need to send valid event even if it is the same value
|
|
2930
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
2854
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
2931
2855
|
this.inputValid.emit(this.valid);
|
|
2932
2856
|
}
|
|
2933
2857
|
/*************
|
|
@@ -2958,10 +2882,10 @@ const MgInputRadio = class {
|
|
|
2958
2882
|
* @returns HTML Element
|
|
2959
2883
|
*/
|
|
2960
2884
|
render() {
|
|
2961
|
-
return (h("mg-input", { key: '
|
|
2885
|
+
return (h("mg-input", { key: '1a623fa76a9c4c3079ae5cd9da3d4396bc9bee30', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
|
|
2962
2886
|
if (el !== null)
|
|
2963
2887
|
this.inputs[index] = el;
|
|
2964
|
-
} }), h("label", { htmlFor: this.identifier + '_' + index }, input.title)))))));
|
|
2888
|
+
} }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));
|
|
2965
2889
|
}
|
|
2966
2890
|
get element() { return getElement(this); }
|
|
2967
2891
|
static get watchers() { return {
|
|
@@ -2975,7 +2899,7 @@ const MgInputRadio = class {
|
|
|
2975
2899
|
};
|
|
2976
2900
|
MgInputRadio.style = MgInputRadioStyle0;
|
|
2977
2901
|
|
|
2978
|
-
const mgInputSelectCss = ".mg-
|
|
2902
|
+
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-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.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%}}";
|
|
2979
2903
|
const MgInputSelectStyle0 = mgInputSelectCss;
|
|
2980
2904
|
|
|
2981
2905
|
/**
|
|
@@ -2983,13 +2907,13 @@ const MgInputSelectStyle0 = mgInputSelectCss;
|
|
|
2983
2907
|
* @param option - select option
|
|
2984
2908
|
* @returns select option type is valid
|
|
2985
2909
|
*/
|
|
2986
|
-
const isOption$
|
|
2910
|
+
const isOption$2 = (option) => typeof option === 'object' && typeof option.title === 'string';
|
|
2987
2911
|
/**
|
|
2988
2912
|
* Check if items[] is SelectOption
|
|
2989
2913
|
* @param items - select option
|
|
2990
2914
|
* @returns select option array type is valid
|
|
2991
2915
|
*/
|
|
2992
|
-
const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption$
|
|
2916
|
+
const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption$2(item));
|
|
2993
2917
|
/**
|
|
2994
2918
|
* Check if item is a well configured optgroup
|
|
2995
2919
|
* @param optgroup - select option
|
|
@@ -3040,7 +2964,7 @@ const MgInputSelect = class {
|
|
|
3040
2964
|
* @param item - item to compare with
|
|
3041
2965
|
* @returns truthy if input.value is an item
|
|
3042
2966
|
*/
|
|
3043
|
-
this.isInputValue = (item) => item.title === this.input.value;
|
|
2967
|
+
this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
|
|
3044
2968
|
/**
|
|
3045
2969
|
* value props setter
|
|
3046
2970
|
* @param newValue - value to update with
|
|
@@ -3072,7 +2996,7 @@ const MgInputSelect = class {
|
|
|
3072
2996
|
* Handle blur event
|
|
3073
2997
|
*/
|
|
3074
2998
|
this.handleBlur = () => {
|
|
3075
|
-
this.handlerInProgress =
|
|
2999
|
+
this.handlerInProgress = 'blur';
|
|
3076
3000
|
this.displayError().finally(() => {
|
|
3077
3001
|
// reset guard
|
|
3078
3002
|
this.handlerInProgress = undefined;
|
|
@@ -3139,7 +3063,7 @@ const MgInputSelect = class {
|
|
|
3139
3063
|
validateValue(newValue) {
|
|
3140
3064
|
var _a, _b;
|
|
3141
3065
|
if (Ge(this.items) && typeof newValue === 'string') {
|
|
3142
|
-
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
|
|
3066
|
+
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== undefined ? this.input.value : newValue;
|
|
3143
3067
|
}
|
|
3144
3068
|
else if (allItemsAreOptions(this.items)) {
|
|
3145
3069
|
this.readonlyValue = (_b = this.items.find(item => item.value === newValue)) === null || _b === void 0 ? void 0 : _b.title;
|
|
@@ -3173,7 +3097,7 @@ const MgInputSelect = class {
|
|
|
3173
3097
|
}
|
|
3174
3098
|
}
|
|
3175
3099
|
else {
|
|
3176
|
-
throw new Error(
|
|
3100
|
+
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: ${Ze(newValue)}.`);
|
|
3177
3101
|
}
|
|
3178
3102
|
}
|
|
3179
3103
|
watchReadonly(newValue) {
|
|
@@ -3204,7 +3128,7 @@ const MgInputSelect = class {
|
|
|
3204
3128
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
3205
3129
|
});
|
|
3206
3130
|
// apply new width
|
|
3207
|
-
if (newValue)
|
|
3131
|
+
if (newValue !== undefined)
|
|
3208
3132
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3209
3133
|
}
|
|
3210
3134
|
/**
|
|
@@ -3225,10 +3149,10 @@ const MgInputSelect = class {
|
|
|
3225
3149
|
*/
|
|
3226
3150
|
async setError(valid, errorMessage) {
|
|
3227
3151
|
if (typeof valid !== 'boolean') {
|
|
3228
|
-
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
|
|
3152
|
+
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean.');
|
|
3229
3153
|
}
|
|
3230
|
-
else if (!
|
|
3231
|
-
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
|
|
3154
|
+
else if (!Qe(errorMessage)) {
|
|
3155
|
+
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string.');
|
|
3232
3156
|
}
|
|
3233
3157
|
else {
|
|
3234
3158
|
this.setValidity(valid);
|
|
@@ -3245,7 +3169,7 @@ const MgInputSelect = class {
|
|
|
3245
3169
|
this.valid = newValue;
|
|
3246
3170
|
this.invalid = !this.valid;
|
|
3247
3171
|
// We need to send valid event even if it is the same value
|
|
3248
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
3172
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
3249
3173
|
this.inputValid.emit(this.valid);
|
|
3250
3174
|
}
|
|
3251
3175
|
/*************
|
|
@@ -3280,11 +3204,11 @@ const MgInputSelect = class {
|
|
|
3280
3204
|
* @returns HTML Element
|
|
3281
3205
|
*/
|
|
3282
3206
|
render() {
|
|
3283
|
-
return (h("mg-input", { key: '
|
|
3207
|
+
return (h("mg-input", { key: 'a8d381dbc10d8a2274be86c13bf570faacbeceda', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
3284
3208
|
if (el !== null)
|
|
3285
3209
|
this.input = el;
|
|
3286
3210
|
} }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
3287
|
-
h("option", {
|
|
3211
|
+
h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (h("optgroup", { label: option.group, key: option.group }, option.options.map(this.renderOption))) : (isOption$2(option) && this.renderOption(option)))))));
|
|
3288
3212
|
}
|
|
3289
3213
|
get element() { return getElement(this); }
|
|
3290
3214
|
static get watchers() { return {
|
|
@@ -3298,16 +3222,21 @@ const MgInputSelect = class {
|
|
|
3298
3222
|
};
|
|
3299
3223
|
MgInputSelect.style = MgInputSelectStyle0;
|
|
3300
3224
|
|
|
3301
|
-
const mgInputTextCss = ".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-container{width:100%;flex:1 auto}.mg-c-input__box.mg-c-input__box--width{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.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.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-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 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(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.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:.7rem}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi)) .mg-c-input__input-container mg-tooltip{margin-left:3rem}: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{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input{display:flex;min-height:var(--default-size);align-items:center;justify-content:start}.mg-c-input__input-icon{color:hsl(var(--color-dark))}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled),.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:1.2rem;text-align:start}.mg-c-input__help-text+.mg-c-input__error{margin-top:.2rem}: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:.5rem}.mg-c-input.mg-c-input--readonly>*:not([slot=label],[name=append-input]),.mg-c-input.mg-c-input--readonly ::slotted(mg-button[slot=append-input]){display:none}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}:host(.mg-c-input){display:flex}:host(.mg-c-input.mg-c-input--textarea.mg-c-input--readonly) .mg-c-input__input-container{white-space:pre-line}: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--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:.3rem;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:.3rem;text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;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-button-border-radius-top-right:0;--mg-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-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-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(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input.mg-c-input--has-display-character-left mg-character-left{font-size:1.1rem;opacity:.6}.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--has-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:calc(var(--mg-character-left-message-length)*1ch + .8rem)}.mg-c-input__with-character-left mg-character-left{position:absolute;top:50%;right:1rem;display:none;font-size:1.1rem;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--has-icon .mg-c-input__with-character-left>mg-icon{position:absolute;top:50%;left:var(--mg-inputs-spacer);color:var(--mg-inputs-color);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-icon-regular-size) + var(--mg-inputs-spacer)*2)}";
|
|
3225
|
+
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-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.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:calc(var(--mg-c-character-left-message-length)*1ch + 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)}";
|
|
3302
3226
|
const MgInputTextStyle0 = mgInputTextCss;
|
|
3303
3227
|
|
|
3228
|
+
/**
|
|
3229
|
+
* Check if object is an option
|
|
3230
|
+
* @param option - object to validate
|
|
3231
|
+
* @returns true id object is an option
|
|
3232
|
+
*/
|
|
3233
|
+
const isOption$1 = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
|
|
3304
3234
|
/**
|
|
3305
3235
|
* Check if datalist options are well structured.
|
|
3306
|
-
*
|
|
3307
3236
|
* @param options - Datalist options to check.
|
|
3308
3237
|
* @returns True if datalist is well structured.
|
|
3309
3238
|
*/
|
|
3310
|
-
const
|
|
3239
|
+
const isDatalistOptions = (options) => Ge(options) || (Array.isArray(options) && options.every(isOption$1));
|
|
3311
3240
|
const MgInputText = class {
|
|
3312
3241
|
constructor(hostRef) {
|
|
3313
3242
|
registerInstance(this, hostRef);
|
|
@@ -3349,7 +3278,7 @@ const MgInputText = class {
|
|
|
3349
3278
|
this.classCollection.delete(this.classFocus);
|
|
3350
3279
|
this.classCollection = new Ie(this.classCollection.classes);
|
|
3351
3280
|
// Display Error
|
|
3352
|
-
this.handlerInProgress =
|
|
3281
|
+
this.handlerInProgress = 'blur';
|
|
3353
3282
|
this.displayError().finally(() => {
|
|
3354
3283
|
// reset guard
|
|
3355
3284
|
this.handlerInProgress = undefined;
|
|
@@ -3387,7 +3316,13 @@ const MgInputText = class {
|
|
|
3387
3316
|
this.validateAppendSlot = () => {
|
|
3388
3317
|
const slotAppendInput = Array.from(this.element.querySelectorAll('[slot="append-input"]'));
|
|
3389
3318
|
if (slotAppendInput.length === 1) {
|
|
3390
|
-
|
|
3319
|
+
if (slotAppendInput[0].nodeName === 'MG-BUTTON') {
|
|
3320
|
+
this.classCollection.add(this.classIsInputGroupAppend);
|
|
3321
|
+
}
|
|
3322
|
+
else {
|
|
3323
|
+
this.classCollection.add(this.classIsAppendInputSlotContent);
|
|
3324
|
+
this.slotContent = slotAppendInput[0].textContent;
|
|
3325
|
+
}
|
|
3391
3326
|
}
|
|
3392
3327
|
else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
|
|
3393
3328
|
this.classCollection.add(this.classIsInputGroupAppend);
|
|
@@ -3398,7 +3333,14 @@ const MgInputText = class {
|
|
|
3398
3333
|
* Method to control datalist display condition
|
|
3399
3334
|
* @returns true if display condition success
|
|
3400
3335
|
*/
|
|
3401
|
-
this.hasDatalist = () =>
|
|
3336
|
+
this.hasDatalist = () => isDatalistOptions(this.datalistoptions) && this.datalistoptions.length > 0;
|
|
3337
|
+
/**
|
|
3338
|
+
* Renders the readonly content of the input component.
|
|
3339
|
+
* @returns The readonly content element.
|
|
3340
|
+
*/
|
|
3341
|
+
this.renderReadonly = () => {
|
|
3342
|
+
return this.slotContent !== undefined ? (h("span", { class: "mg-c-input__readonly-value" }, h("b", null, this.value), this.slotContent)) : (h("b", { class: "mg-c-input__readonly-value" }, this.value));
|
|
3343
|
+
};
|
|
3402
3344
|
this.value = undefined;
|
|
3403
3345
|
this.identifier = undefined;
|
|
3404
3346
|
this.name = this.identifier;
|
|
@@ -3418,7 +3360,7 @@ const MgInputText = class {
|
|
|
3418
3360
|
this.patternErrorMessage = undefined;
|
|
3419
3361
|
this.tooltip = undefined;
|
|
3420
3362
|
this.tooltipPosition = 'input';
|
|
3421
|
-
this.
|
|
3363
|
+
this.characterLeftHide = false;
|
|
3422
3364
|
this.helpText = undefined;
|
|
3423
3365
|
this.valid = undefined;
|
|
3424
3366
|
this.invalid = undefined;
|
|
@@ -3426,7 +3368,13 @@ const MgInputText = class {
|
|
|
3426
3368
|
this.errorMessage = undefined;
|
|
3427
3369
|
}
|
|
3428
3370
|
handleValue(newValue) {
|
|
3429
|
-
|
|
3371
|
+
var _a, _b;
|
|
3372
|
+
if ((_a = this.datalistoptions) === null || _a === void 0 ? void 0 : _a.every(isOption$1)) {
|
|
3373
|
+
this.valueChange.emit(((_b = this.datalistoptions.find(option => option.title === newValue)) === null || _b === void 0 ? void 0 : _b.value) || newValue);
|
|
3374
|
+
}
|
|
3375
|
+
else {
|
|
3376
|
+
this.valueChange.emit(newValue);
|
|
3377
|
+
}
|
|
3430
3378
|
}
|
|
3431
3379
|
validateIcon(newValue) {
|
|
3432
3380
|
if (newValue !== undefined) {
|
|
@@ -3437,8 +3385,8 @@ const MgInputText = class {
|
|
|
3437
3385
|
}
|
|
3438
3386
|
}
|
|
3439
3387
|
validateDatalistoptions(newValue) {
|
|
3440
|
-
if (Boolean(newValue) && !
|
|
3441
|
-
throw new Error(
|
|
3388
|
+
if (Boolean(newValue) && !isDatalistOptions(newValue)) {
|
|
3389
|
+
throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${Ze(newValue)}.`);
|
|
3442
3390
|
}
|
|
3443
3391
|
}
|
|
3444
3392
|
watchReadonly(newValue) {
|
|
@@ -3469,12 +3417,12 @@ const MgInputText = class {
|
|
|
3469
3417
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
3470
3418
|
});
|
|
3471
3419
|
// apply new width
|
|
3472
|
-
if (newValue)
|
|
3420
|
+
if (newValue !== undefined)
|
|
3473
3421
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3474
3422
|
}
|
|
3475
3423
|
validatePattern(newValue) {
|
|
3476
|
-
if (newValue !== undefined && !(
|
|
3477
|
-
throw new Error(
|
|
3424
|
+
if (newValue !== undefined && !(Qe(this.pattern) && Qe(this.patternErrorMessage))) {
|
|
3425
|
+
throw new Error(`<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${Ze(this.pattern)}'" and "patternErrorMessage='${Ze(this.patternErrorMessage)}'".`);
|
|
3478
3426
|
}
|
|
3479
3427
|
}
|
|
3480
3428
|
/**
|
|
@@ -3501,10 +3449,10 @@ const MgInputText = class {
|
|
|
3501
3449
|
*/
|
|
3502
3450
|
async setError(valid, errorMessage) {
|
|
3503
3451
|
if (typeof valid !== 'boolean') {
|
|
3504
|
-
throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean');
|
|
3452
|
+
throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean.');
|
|
3505
3453
|
}
|
|
3506
|
-
else if (!
|
|
3507
|
-
throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
|
|
3454
|
+
else if (!Qe(errorMessage)) {
|
|
3455
|
+
throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string.');
|
|
3508
3456
|
}
|
|
3509
3457
|
else {
|
|
3510
3458
|
this.setValidity(valid);
|
|
@@ -3521,7 +3469,7 @@ const MgInputText = class {
|
|
|
3521
3469
|
this.valid = newValue;
|
|
3522
3470
|
this.invalid = !this.valid;
|
|
3523
3471
|
// We need to send valid event even if it is the same value
|
|
3524
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
3472
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
3525
3473
|
this.inputValid.emit(this.valid);
|
|
3526
3474
|
}
|
|
3527
3475
|
/*************
|
|
@@ -3557,14 +3505,19 @@ const MgInputText = class {
|
|
|
3557
3505
|
* @returns HTML Element
|
|
3558
3506
|
*/
|
|
3559
3507
|
render() {
|
|
3560
|
-
return (h("mg-input", { key: '
|
|
3561
|
-
|
|
3562
|
-
|
|
3563
|
-
|
|
3564
|
-
|
|
3565
|
-
|
|
3566
|
-
|
|
3567
|
-
|
|
3508
|
+
return (h("mg-input", { key: '717239fc622bd6d122897031a2144bd3441947d5', 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
|
|
3509
|
+
? this.value && this.renderReadonly()
|
|
3510
|
+
: [
|
|
3511
|
+
h("div", { key: "input", class: "mg-c-input__with-character-left", style: {
|
|
3512
|
+
'--mg-c-character-left-message-length': (!this.characterLeftHide
|
|
3513
|
+
? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
|
|
3514
|
+
: 0).toString(),
|
|
3515
|
+
} }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
3516
|
+
if (el !== null)
|
|
3517
|
+
this.input = el;
|
|
3518
|
+
} }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (h("option", { value: isOption$1(option) ? option.title : option, key: option }))))), !this.characterLeftHide && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))),
|
|
3519
|
+
h("slot", { key: "slot", name: "append-input" }),
|
|
3520
|
+
]));
|
|
3568
3521
|
}
|
|
3569
3522
|
get element() { return getElement(this); }
|
|
3570
3523
|
static get watchers() { return {
|
|
@@ -3581,7 +3534,7 @@ const MgInputText = class {
|
|
|
3581
3534
|
};
|
|
3582
3535
|
MgInputText.style = MgInputTextStyle0;
|
|
3583
3536
|
|
|
3584
|
-
const mgInputTextareaCss = ".mg-
|
|
3537
|
+
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-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.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}}";
|
|
3585
3538
|
const MgInputTextareaStyle0 = mgInputTextareaCss;
|
|
3586
3539
|
|
|
3587
3540
|
const MgInputTextarea = class {
|
|
@@ -3594,7 +3547,7 @@ const MgInputTextarea = class {
|
|
|
3594
3547
|
************/
|
|
3595
3548
|
// Classes
|
|
3596
3549
|
this.classFocus = 'mg-u-is-focused';
|
|
3597
|
-
this.
|
|
3550
|
+
this.classDisplayCharacterLeft = 'mg-c-input--display-character-left';
|
|
3598
3551
|
// hasDisplayedError (triggered by blur event)
|
|
3599
3552
|
this.hasDisplayedError = false;
|
|
3600
3553
|
/**
|
|
@@ -3622,7 +3575,7 @@ const MgInputTextarea = class {
|
|
|
3622
3575
|
this.classCollection.delete(this.classFocus);
|
|
3623
3576
|
this.classCollection = new Ie(this.classCollection.classes);
|
|
3624
3577
|
// Display Error
|
|
3625
|
-
this.handlerInProgress =
|
|
3578
|
+
this.handlerInProgress = 'blur';
|
|
3626
3579
|
this.displayError().finally(() => {
|
|
3627
3580
|
// reset guard
|
|
3628
3581
|
this.handlerInProgress = undefined;
|
|
@@ -3678,7 +3631,7 @@ const MgInputTextarea = class {
|
|
|
3678
3631
|
this.rows = 3;
|
|
3679
3632
|
this.tooltip = undefined;
|
|
3680
3633
|
this.tooltipPosition = 'input';
|
|
3681
|
-
this.
|
|
3634
|
+
this.characterLeftHide = false;
|
|
3682
3635
|
this.helpText = undefined;
|
|
3683
3636
|
this.valid = undefined;
|
|
3684
3637
|
this.invalid = undefined;
|
|
@@ -3718,20 +3671,20 @@ const MgInputTextarea = class {
|
|
|
3718
3671
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
3719
3672
|
});
|
|
3720
3673
|
// apply new width
|
|
3721
|
-
if (newValue)
|
|
3674
|
+
if (newValue !== undefined)
|
|
3722
3675
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3723
3676
|
}
|
|
3724
3677
|
validatePattern(newValue) {
|
|
3725
|
-
if (newValue !== undefined && !(
|
|
3726
|
-
throw new Error(
|
|
3678
|
+
if (newValue !== undefined && !(Qe(this.pattern) && Qe(this.patternErrorMessage))) {
|
|
3679
|
+
throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${Ze(this.pattern)}'" and "patternErrorMessage='${Ze(this.patternErrorMessage)}'".`);
|
|
3727
3680
|
}
|
|
3728
3681
|
}
|
|
3729
|
-
|
|
3682
|
+
validatecharacterLeftHide(newValue) {
|
|
3730
3683
|
if (newValue) {
|
|
3731
|
-
this.classCollection.
|
|
3684
|
+
this.classCollection.delete(this.classDisplayCharacterLeft);
|
|
3732
3685
|
}
|
|
3733
3686
|
else {
|
|
3734
|
-
this.classCollection.
|
|
3687
|
+
this.classCollection.add(this.classDisplayCharacterLeft);
|
|
3735
3688
|
}
|
|
3736
3689
|
}
|
|
3737
3690
|
/**
|
|
@@ -3752,10 +3705,10 @@ const MgInputTextarea = class {
|
|
|
3752
3705
|
*/
|
|
3753
3706
|
async setError(valid, errorMessage) {
|
|
3754
3707
|
if (typeof valid !== 'boolean') {
|
|
3755
|
-
throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean');
|
|
3708
|
+
throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean.');
|
|
3756
3709
|
}
|
|
3757
|
-
else if (!
|
|
3758
|
-
throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
|
|
3710
|
+
else if (!Qe(errorMessage)) {
|
|
3711
|
+
throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string.');
|
|
3759
3712
|
}
|
|
3760
3713
|
else {
|
|
3761
3714
|
this.setValidity(valid);
|
|
@@ -3772,7 +3725,7 @@ const MgInputTextarea = class {
|
|
|
3772
3725
|
this.valid = newValue;
|
|
3773
3726
|
this.invalid = !this.valid;
|
|
3774
3727
|
// We need to send valid event even if it is the same value
|
|
3775
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
3728
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
3776
3729
|
this.inputValid.emit(this.valid);
|
|
3777
3730
|
}
|
|
3778
3731
|
/*************
|
|
@@ -3787,7 +3740,7 @@ const MgInputTextarea = class {
|
|
|
3787
3740
|
this.messages = initLocales(this.element).messages;
|
|
3788
3741
|
this.characterLeftId = `${this.identifier}-character-left`;
|
|
3789
3742
|
// Validate
|
|
3790
|
-
this.
|
|
3743
|
+
this.validatecharacterLeftHide(this.characterLeftHide);
|
|
3791
3744
|
this.validatePattern(this.pattern);
|
|
3792
3745
|
this.validatePattern(this.patternErrorMessage);
|
|
3793
3746
|
this.watchMgWidth(this.mgWidth);
|
|
@@ -3805,7 +3758,7 @@ const MgInputTextarea = class {
|
|
|
3805
3758
|
* @returns HTML Element
|
|
3806
3759
|
*/
|
|
3807
3760
|
render() {
|
|
3808
|
-
return (h("mg-input", { key: '
|
|
3761
|
+
return (h("mg-input", { key: '434d00b8d1b5f066b416f777572bfae84797e79d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__with-character-left" }, h("textarea", { class: {
|
|
3809
3762
|
'mg-c-input__box': true,
|
|
3810
3763
|
'mg-c-input__box--width': true,
|
|
3811
3764
|
'mg-c-input__box--resizable': this.resizable === 'both',
|
|
@@ -3814,7 +3767,7 @@ const MgInputTextarea = class {
|
|
|
3814
3767
|
}, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
3815
3768
|
if (el !== null)
|
|
3816
3769
|
this.input = el;
|
|
3817
|
-
} }), this.
|
|
3770
|
+
} }), !this.characterLeftHide && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))))));
|
|
3818
3771
|
}
|
|
3819
3772
|
get element() { return getElement(this); }
|
|
3820
3773
|
static get watchers() { return {
|
|
@@ -3825,12 +3778,12 @@ const MgInputTextarea = class {
|
|
|
3825
3778
|
"mgWidth": ["watchMgWidth"],
|
|
3826
3779
|
"pattern": ["validatePattern"],
|
|
3827
3780
|
"patternErrorMessage": ["validatePattern"],
|
|
3828
|
-
"
|
|
3781
|
+
"characterLeftHide": ["validatecharacterLeftHide"]
|
|
3829
3782
|
}; }
|
|
3830
3783
|
};
|
|
3831
3784
|
MgInputTextarea.style = MgInputTextareaStyle0;
|
|
3832
3785
|
|
|
3833
|
-
const mgInputTitleCss = ".mg-u-form-legacy.sc-mg-input-title{--mg-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk.sc-mg-input-title{color:
|
|
3786
|
+
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)}";
|
|
3834
3787
|
const MgInputTitleStyle0 = mgInputTitleCss;
|
|
3835
3788
|
|
|
3836
3789
|
const MgInputTitle = class {
|
|
@@ -3843,7 +3796,7 @@ const MgInputTitle = class {
|
|
|
3843
3796
|
this.tagName = 'label';
|
|
3844
3797
|
}
|
|
3845
3798
|
validateIdentifier(newValue) {
|
|
3846
|
-
if (!
|
|
3799
|
+
if (!Qe(newValue)) {
|
|
3847
3800
|
throw new Error('<mg-input-title> prop "identifier" is required.');
|
|
3848
3801
|
}
|
|
3849
3802
|
}
|
|
@@ -3867,7 +3820,7 @@ const MgInputTitle = class {
|
|
|
3867
3820
|
render() {
|
|
3868
3821
|
const TagName = this.readonly ? 'span' : this.tagName;
|
|
3869
3822
|
// \u00A0 represent a
|
|
3870
|
-
return (h(TagName, { key: '
|
|
3823
|
+
return (h(TagName, { key: '2b9a091bea26abed3179e0af163c4622f5d5bdc3', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: 'a167a4309b176c4a896f50764a8d3df53ad6f0b6' }), this.required && !this.readonly && (h("span", { key: 'c2b32a0101b2f43fdb45d8f074297c5f9250c628', class: "mg-c-input-title__required" }, "\u00A0", h("span", { key: 'f9932b7ba646b5e904f33a88d8dfce0e471141dc', class: "mg-u-is-asterisk" }, "*")))));
|
|
3871
3824
|
}
|
|
3872
3825
|
static get watchers() { return {
|
|
3873
3826
|
"identifier": ["validateIdentifier"],
|
|
@@ -3876,7 +3829,7 @@ const MgInputTitle = class {
|
|
|
3876
3829
|
};
|
|
3877
3830
|
MgInputTitle.style = MgInputTitleStyle0;
|
|
3878
3831
|
|
|
3879
|
-
const mgInputToggleCss = ".mg-
|
|
3832
|
+
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}";
|
|
3880
3833
|
const MgInputToggleStyle0 = mgInputToggleCss;
|
|
3881
3834
|
|
|
3882
3835
|
/**
|
|
@@ -3971,7 +3924,7 @@ const MgInputToggle = class {
|
|
|
3971
3924
|
}
|
|
3972
3925
|
validateItems(newValue) {
|
|
3973
3926
|
if (typeof newValue === 'object' && this.items.length !== 2) {
|
|
3974
|
-
throw new Error(
|
|
3927
|
+
throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${Ze(newValue)}.`);
|
|
3975
3928
|
}
|
|
3976
3929
|
// String array
|
|
3977
3930
|
else if (Ge(newValue)) {
|
|
@@ -3982,7 +3935,7 @@ const MgInputToggle = class {
|
|
|
3982
3935
|
this.options = newValue;
|
|
3983
3936
|
}
|
|
3984
3937
|
else {
|
|
3985
|
-
throw new Error(
|
|
3938
|
+
throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${Ze(newValue)}.`);
|
|
3986
3939
|
}
|
|
3987
3940
|
}
|
|
3988
3941
|
watchIsOnOff(newValue) {
|
|
@@ -4028,10 +3981,10 @@ const MgInputToggle = class {
|
|
|
4028
3981
|
*/
|
|
4029
3982
|
async setError(valid, errorMessage) {
|
|
4030
3983
|
if (typeof valid !== 'boolean') {
|
|
4031
|
-
throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
|
|
3984
|
+
throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');
|
|
4032
3985
|
}
|
|
4033
|
-
else if (!
|
|
4034
|
-
throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
|
|
3986
|
+
else if (!Qe(errorMessage)) {
|
|
3987
|
+
throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
|
|
4035
3988
|
}
|
|
4036
3989
|
else {
|
|
4037
3990
|
this.valid = valid;
|
|
@@ -4085,8 +4038,8 @@ const MgInputToggle = class {
|
|
|
4085
4038
|
* @returns HTML Element
|
|
4086
4039
|
*/
|
|
4087
4040
|
render() {
|
|
4088
|
-
|
|
4089
|
-
return (h("mg-input", { key: '
|
|
4041
|
+
const checkedItem = this.getCheckedItem(this.checked);
|
|
4042
|
+
return (h("mg-input", { key: '803566335b26e4cf70cbb4cb397db4c9688314de', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
|
|
4090
4043
|
}
|
|
4091
4044
|
get element() { return getElement(this); }
|
|
4092
4045
|
static get watchers() { return {
|
|
@@ -4107,11 +4060,10 @@ MgInputToggle.style = MgInputToggleStyle0;
|
|
|
4107
4060
|
* @returns truthy if element is mg-item-more
|
|
4108
4061
|
*/
|
|
4109
4062
|
const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
|
|
4110
|
-
|
|
4111
|
-
|
|
4112
|
-
|
|
4113
|
-
|
|
4114
|
-
})(OverflowBehaviorElements || (OverflowBehaviorElements = {}));
|
|
4063
|
+
const OverflowBehaviorElements = {
|
|
4064
|
+
BASE_INDEX: 'data-overflow-base-index',
|
|
4065
|
+
PROXY_INDEX: 'data-overflow-proxy-index',
|
|
4066
|
+
};
|
|
4115
4067
|
class OverflowBehavior {
|
|
4116
4068
|
constructor(element, render) {
|
|
4117
4069
|
this.element = element;
|
|
@@ -4167,9 +4119,9 @@ class OverflowBehavior {
|
|
|
4167
4119
|
[...this._baseChildren, this._moreElement].forEach((child) => {
|
|
4168
4120
|
acc.accWidth += child.offsetWidth;
|
|
4169
4121
|
const hasPreviuosItem = acc.previousItem !== null;
|
|
4170
|
-
const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.
|
|
4171
|
-
// if previous item is hidden AND is NOT more element we
|
|
4172
|
-
// OR if item has an overflow we
|
|
4122
|
+
const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.hasAttribute('hidden');
|
|
4123
|
+
// if previous item is hidden AND is NOT more element we hide current
|
|
4124
|
+
// OR if item has an overflow we hide current
|
|
4173
4125
|
// OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item
|
|
4174
4126
|
// ELSE current is a display item
|
|
4175
4127
|
this.toggleItem(child, (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden));
|
|
@@ -4213,7 +4165,7 @@ class OverflowBehavior {
|
|
|
4213
4165
|
}
|
|
4214
4166
|
};
|
|
4215
4167
|
/**
|
|
4216
|
-
* Toggle element's
|
|
4168
|
+
* Toggle element's hide attribute
|
|
4217
4169
|
* @param element - element to toggle
|
|
4218
4170
|
* @param isHidden - element is hidden
|
|
4219
4171
|
*/
|
|
@@ -4258,10 +4210,10 @@ const MgItemMore = class {
|
|
|
4258
4210
|
*/
|
|
4259
4211
|
this.setProxyElement = (proxified) => {
|
|
4260
4212
|
const proxy = this.moreElementMenuItem.querySelector(`[identifier="${proxified.identifier}"]`);
|
|
4261
|
-
if (
|
|
4213
|
+
if (proxy === null)
|
|
4262
4214
|
return;
|
|
4263
4215
|
// remove proxy id to prevent duplicate key. default html id is: '';
|
|
4264
|
-
if (
|
|
4216
|
+
if (Qe(proxy.id))
|
|
4265
4217
|
proxy.id = '';
|
|
4266
4218
|
const proxyClickHandler = () => {
|
|
4267
4219
|
this.parentMenu
|
|
@@ -4305,8 +4257,8 @@ const MgItemMore = class {
|
|
|
4305
4257
|
// create item-more menu items element from main menu-items clones
|
|
4306
4258
|
this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
|
|
4307
4259
|
// we need to get all `mg-menu-item` linked to the cloned one to set mirror process
|
|
4308
|
-
|
|
4309
|
-
if (child.querySelector('mg-menu')) {
|
|
4260
|
+
Ve(() => {
|
|
4261
|
+
if (child.querySelector('mg-menu') !== null) {
|
|
4310
4262
|
child.querySelectorAll('mg-menu-item').forEach(this.setProxyElement);
|
|
4311
4263
|
}
|
|
4312
4264
|
else {
|
|
@@ -4323,17 +4275,17 @@ const MgItemMore = class {
|
|
|
4323
4275
|
}
|
|
4324
4276
|
validateIcon(newValue) {
|
|
4325
4277
|
if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
|
|
4326
|
-
throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`);
|
|
4278
|
+
throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${Ze(newValue)}.`);
|
|
4327
4279
|
}
|
|
4328
4280
|
validateSlotLabel(newValue) {
|
|
4329
4281
|
if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
|
|
4330
|
-
throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);
|
|
4282
|
+
throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${Ze(newValue)}.`);
|
|
4331
4283
|
else if (typeof newValue.label !== 'string')
|
|
4332
4284
|
this.slotlabel.label = this.messages.menuLabel;
|
|
4333
4285
|
}
|
|
4334
4286
|
validateSize(newValue) {
|
|
4335
4287
|
if (newValue && !sizes$2.includes(newValue))
|
|
4336
|
-
throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
|
|
4288
|
+
throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${Ze(newValue)}.`);
|
|
4337
4289
|
}
|
|
4338
4290
|
/*************
|
|
4339
4291
|
* Lifecycle *
|
|
@@ -4363,7 +4315,7 @@ const MgItemMore = class {
|
|
|
4363
4315
|
* Set OverflowBehavior when parentMenu state is upate AND defined
|
|
4364
4316
|
*/
|
|
4365
4317
|
componentDidUpdate() {
|
|
4366
|
-
if (this.parentMenu &&
|
|
4318
|
+
if (this.parentMenu && this.overflowBehavior === undefined) {
|
|
4367
4319
|
this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM');
|
|
4368
4320
|
this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
|
|
4369
4321
|
}
|
|
@@ -4380,10 +4332,11 @@ const MgItemMore = class {
|
|
|
4380
4332
|
* @returns HTML Element
|
|
4381
4333
|
*/
|
|
4382
4334
|
render() {
|
|
4383
|
-
return (h(Host, { key: '
|
|
4384
|
-
if (el)
|
|
4335
|
+
return (h(Host, { key: '57dda64ff7dcb6dbf50bcd1e887fd6fb7733d533', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: 'b975001df7dfeae4ea14b3e208245240e9868ae4', "data-overflow-more": true, "data-size": this.parentMenu.size, identifier: "mg-item-more", ref: el => {
|
|
4336
|
+
if (el !== null) {
|
|
4385
4337
|
this.moreElementMenuItem = el;
|
|
4386
|
-
|
|
4338
|
+
}
|
|
4339
|
+
} }, h("mg-icon", { key: 'f0837050757fe920e71c6060e4fb873c8bab43b7', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: '7155b47f84cc2193dec65bcccbbaa93776e5daa1', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '9295f68e1799a313cc93cdbf6bd75cea3aa1ecd0', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
|
|
4387
4340
|
}
|
|
4388
4341
|
get element() { return getElement(this); }
|
|
4389
4342
|
static get watchers() { return {
|
|
@@ -4394,7 +4347,7 @@ const MgItemMore = class {
|
|
|
4394
4347
|
};
|
|
4395
4348
|
MgItemMore.style = MgItemMoreStyle0;
|
|
4396
4349
|
|
|
4397
|
-
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}}:host{display:flex;background-color:
|
|
4350
|
+
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:flex;background-color:var(--mg-c-menu-color-background, var(--mg-b-color-light))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}";
|
|
4398
4351
|
const MgMenuStyle0 = mgMenuCss;
|
|
4399
4352
|
|
|
4400
4353
|
const MgMenu = class {
|
|
@@ -4434,7 +4387,8 @@ const MgMenu = class {
|
|
|
4434
4387
|
item.shadowRoot.querySelector('button,a').addEventListener(trigger, () => {
|
|
4435
4388
|
this.focusedMenuItem = index;
|
|
4436
4389
|
// reset expanded on previous active menu item
|
|
4437
|
-
|
|
4390
|
+
const itemMoreMenuItem = this.getItemMoreMenuItem();
|
|
4391
|
+
(![null, undefined].includes(itemMoreMenuItem) ? [...this.menuItems, itemMoreMenuItem] : this.menuItems).forEach((item, index) => {
|
|
4438
4392
|
this.closeMenuItem(item, index !== this.focusedMenuItem);
|
|
4439
4393
|
});
|
|
4440
4394
|
});
|
|
@@ -4459,11 +4413,12 @@ const MgMenu = class {
|
|
|
4459
4413
|
* render mg-item-more
|
|
4460
4414
|
*/
|
|
4461
4415
|
this.renderMgItemMore = () => {
|
|
4416
|
+
var _a;
|
|
4462
4417
|
if (this.direction !== Direction.HORIZONTAL || this.isChildMenu || this.element.children.length <= 1) {
|
|
4463
4418
|
return;
|
|
4464
4419
|
}
|
|
4465
4420
|
// Insert mg-item-more outside the mg-menu shadowdom
|
|
4466
|
-
if (
|
|
4421
|
+
if (this.itemMoreElement === undefined) {
|
|
4467
4422
|
this.itemMoreElement = document.createElement('mg-item-more');
|
|
4468
4423
|
this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);
|
|
4469
4424
|
this.element.appendChild(this.itemMoreElement);
|
|
@@ -4479,34 +4434,36 @@ const MgMenu = class {
|
|
|
4479
4434
|
this.itemMoreElement[attribute] = newValue;
|
|
4480
4435
|
}
|
|
4481
4436
|
}
|
|
4437
|
+
if (((_a = this.itemmore) === null || _a === void 0 ? void 0 : _a.size) === undefined)
|
|
4438
|
+
this.itemMoreElement.size = this.size;
|
|
4482
4439
|
};
|
|
4483
4440
|
this.label = undefined;
|
|
4484
4441
|
this.direction = Direction.HORIZONTAL;
|
|
4485
4442
|
this.itemmore = undefined;
|
|
4486
|
-
this.size = '
|
|
4443
|
+
this.size = 'medium';
|
|
4487
4444
|
this.isChildMenu = undefined;
|
|
4488
4445
|
}
|
|
4489
4446
|
validateLabel(newValue) {
|
|
4490
|
-
if (newValue === undefined && !this.element.
|
|
4491
|
-
throw new Error(`<${this.name}> prop "label" is required.`);
|
|
4447
|
+
if (newValue === undefined && !this.element.hasAttribute('aria-label')) {
|
|
4448
|
+
throw new Error(`<${this.name}> prop "label" is required. Passed value: ${Ze(newValue)}.`);
|
|
4492
4449
|
}
|
|
4493
4450
|
}
|
|
4494
4451
|
validateDirection(newValue) {
|
|
4495
4452
|
if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {
|
|
4496
|
-
throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
|
|
4453
|
+
throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}. Passed value: ${Ze(newValue)}.`);
|
|
4497
4454
|
}
|
|
4498
4455
|
}
|
|
4499
4456
|
validateItemMore(newValue) {
|
|
4500
4457
|
if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
|
|
4501
4458
|
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
|
|
4502
4459
|
}
|
|
4503
|
-
else if (newValue) {
|
|
4460
|
+
else if (newValue !== undefined) {
|
|
4504
4461
|
this.renderMgItemMore();
|
|
4505
4462
|
}
|
|
4506
4463
|
}
|
|
4507
4464
|
validateSize(newValue) {
|
|
4508
4465
|
if (!sizes$2.includes(newValue)) {
|
|
4509
|
-
throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$2.join(', ')}.`);
|
|
4466
|
+
throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$2.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
4510
4467
|
}
|
|
4511
4468
|
}
|
|
4512
4469
|
/*************
|
|
@@ -4553,7 +4510,7 @@ const MgMenu = class {
|
|
|
4553
4510
|
* @returns HTML Element
|
|
4554
4511
|
*/
|
|
4555
4512
|
render() {
|
|
4556
|
-
return (h(Host, { key: '
|
|
4513
|
+
return (h(Host, { key: '550624e40ec66eeb90f8bc4ac1590adcbaa20dfd', role: "list", "aria-label": this.label }, h("slot", { key: 'bf6f5ac748fd45e250c02d93cc7cf72e4580de3b' })));
|
|
4557
4514
|
}
|
|
4558
4515
|
get element() { return getElement(this); }
|
|
4559
4516
|
static get watchers() { return {
|
|
@@ -4565,7 +4522,7 @@ const MgMenu = class {
|
|
|
4565
4522
|
};
|
|
4566
4523
|
MgMenu.style = MgMenuStyle0;
|
|
4567
4524
|
|
|
4568
|
-
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}}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{height:3.8rem;padding:1rem 2rem}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-menu-item.mg-c-menu-item--size-regular .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-regular.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-regular .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-regular.mg-c-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.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:5.1rem;padding:1rem 3rem}.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:calc(var(--font-size) + .2rem)}.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:calc(1rem - 0.3rem)}.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:calc(3rem - 0.3rem)}.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:7.1rem;padding:1rem 4rem}.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:calc(var(--font-size) + .2rem)}.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:calc(1rem - 0.3rem)}.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:calc(4rem - 0.3rem)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--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-disabled-opacity)}.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:hsl(var(--mg-menu-item-focused-background-color-hsl)/10%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(1*2rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(2*2rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(3*2rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(4*2rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(5*2rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(6*2rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}: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*3rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*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*3rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}: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*3rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}: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*3rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}: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*3rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}: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*3rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}: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*4rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*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*4rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}: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*4rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}: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*4rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}: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*4rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}: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*4rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}.mg-c-menu-item{max-width:var(--mg-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:1rem;font-size:var(--font-size)}.mg-c-menu-item__navigation-button-new-tab{margin-left:.6rem}.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-popover-padding-vertical:0;--mg-popover-padding-horizontal:0;--mg-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-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-menu-item-navigation-button-column-gap:1rem}: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:hsl(var(--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:1rem 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}";
|
|
4525
|
+
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}";
|
|
4569
4526
|
const MgMenuItemStyle0 = mgMenuItemCss;
|
|
4570
4527
|
|
|
4571
4528
|
const MgMenuItem = class {
|
|
@@ -4609,8 +4566,7 @@ const MgMenuItem = class {
|
|
|
4609
4566
|
this.updateDisplayNotificationBadge = () => {
|
|
4610
4567
|
const childMenu = this.element.querySelector('mg-menu');
|
|
4611
4568
|
this.displayNotificationBadge =
|
|
4612
|
-
childMenu !== null &&
|
|
4613
|
-
Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);
|
|
4569
|
+
childMenu !== null && Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && !subItem.hasAttribute('hidden'));
|
|
4614
4570
|
};
|
|
4615
4571
|
/**
|
|
4616
4572
|
* Method to control if one of component children have active status
|
|
@@ -4618,7 +4574,7 @@ const MgMenuItem = class {
|
|
|
4618
4574
|
*/
|
|
4619
4575
|
this.hasActiveChild = () => {
|
|
4620
4576
|
var _a;
|
|
4621
|
-
return Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).some((element) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status$1.ACTIVE) && element.
|
|
4577
|
+
return Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).some((element) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status$1.ACTIVE) && !element.hasAttribute('hidden'));
|
|
4622
4578
|
};
|
|
4623
4579
|
/**
|
|
4624
4580
|
* Validate slots
|
|
@@ -4631,9 +4587,9 @@ const MgMenuItem = class {
|
|
|
4631
4587
|
throw new Error(`<${this.name}> slot "label" is required.`);
|
|
4632
4588
|
['label', 'metadata'].forEach(slot => {
|
|
4633
4589
|
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
|
|
4634
|
-
if (!
|
|
4590
|
+
if (!Qe(element.textContent))
|
|
4635
4591
|
throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
|
|
4636
|
-
if ((guard && element.
|
|
4592
|
+
if ((guard && !element.hasAttribute('title')) || !guard)
|
|
4637
4593
|
element.setAttribute('title', element.textContent);
|
|
4638
4594
|
});
|
|
4639
4595
|
});
|
|
@@ -4705,7 +4661,7 @@ const MgMenuItem = class {
|
|
|
4705
4661
|
this.target = undefined;
|
|
4706
4662
|
this.status = Status$1.VISIBLE;
|
|
4707
4663
|
this.expanded = false;
|
|
4708
|
-
this.size = '
|
|
4664
|
+
this.size = 'medium';
|
|
4709
4665
|
this.navigationButtonClassList = new Ie([this.navigationButton]);
|
|
4710
4666
|
this.direction = undefined;
|
|
4711
4667
|
this.isInMainMenu = undefined;
|
|
@@ -4715,7 +4671,7 @@ const MgMenuItem = class {
|
|
|
4715
4671
|
}
|
|
4716
4672
|
watchTarget(newValue) {
|
|
4717
4673
|
if (newValue && !targets.includes(newValue)) {
|
|
4718
|
-
throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}
|
|
4674
|
+
throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
4719
4675
|
}
|
|
4720
4676
|
}
|
|
4721
4677
|
validateStatus(newValue, oldValue) {
|
|
@@ -4727,7 +4683,7 @@ const MgMenuItem = class {
|
|
|
4727
4683
|
}
|
|
4728
4684
|
validateExpanded(newValue) {
|
|
4729
4685
|
if (typeof newValue !== 'boolean')
|
|
4730
|
-
throw new Error(`<${this.name}> prop "expanded" must be a boolean.`);
|
|
4686
|
+
throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${Ze(newValue)}.`);
|
|
4731
4687
|
// if menu-item has sub-menu we have to apply some updates:
|
|
4732
4688
|
if (this.hasChildren) {
|
|
4733
4689
|
const subItems = Array.from(this.element.querySelectorAll(this.name));
|
|
@@ -4773,7 +4729,7 @@ const MgMenuItem = class {
|
|
|
4773
4729
|
updatePopoverGuard() {
|
|
4774
4730
|
if (this.displayPopover())
|
|
4775
4731
|
Array.from(this.element.children)
|
|
4776
|
-
.filter((child) => child.
|
|
4732
|
+
.filter((child) => !child.hasAttribute('slot') && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))
|
|
4777
4733
|
.forEach((slot) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));
|
|
4778
4734
|
}
|
|
4779
4735
|
/*************
|
|
@@ -4841,19 +4797,20 @@ const MgMenuItem = class {
|
|
|
4841
4797
|
*/
|
|
4842
4798
|
renderInteractiveElement() {
|
|
4843
4799
|
const TagName = this.href !== undefined ? 'a' : 'button';
|
|
4844
|
-
return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status$1.DISABLED, Status$1.HIDDEN].includes(this.status) ? -1 : undefined, disabled: this.status === Status$1.DISABLED, hidden: this.status === Status$1.HIDDEN, target: this.href && this.target ? this.target : undefined, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status$1.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "image" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), !this.displayNotificationBadge && h("slot", { name: "information" }), this.displayNotificationBadge && (h("span", { class: `${this.navigationButton}-text-content-notification` }, h("mg-badge", { label: this.messages.badgeLabel, value: "!", variant: "text-color", slot: "information" }))), this.target === '_blank' && [
|
|
4800
|
+
return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status$1.DISABLED, Status$1.HIDDEN].includes(this.status) ? -1 : undefined, disabled: this.status === Status$1.DISABLED, hidden: this.status === Status$1.HIDDEN, target: this.href !== undefined && this.target !== undefined ? this.target : undefined, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status$1.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "image" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), !this.displayNotificationBadge && h("slot", { name: "information" }), this.displayNotificationBadge && (h("span", { class: `${this.navigationButton}-text-content-notification` }, h("mg-badge", { label: this.messages.badgeLabel, value: "!", variant: "text-color", slot: "information" }))), this.target === '_blank' && [
|
|
4845
4801
|
h("mg-icon", { key: "icon-new-tab", class: `${this.navigationButton}-new-tab`, icon: "arrow-up-right-square" }),
|
|
4846
4802
|
h("span", { key: "a11y-new-tab", class: "mg-u-visually-hidden" }, this.messages.openNewTab),
|
|
4847
|
-
]), this.size !== '
|
|
4803
|
+
]), this.size !== 'medium' && h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
|
|
4848
4804
|
[`${this.navigationButton}-chevron`]: true,
|
|
4849
4805
|
[`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
|
|
4850
4806
|
} }, h("mg-icon", { icon: "chevron-down", size: "small" })))));
|
|
4851
4807
|
}
|
|
4852
4808
|
/**
|
|
4853
4809
|
* Emit event when component is updated
|
|
4810
|
+
* @returns promise process wich emit the 'item-updated' event
|
|
4854
4811
|
*/
|
|
4855
4812
|
componentShouldUpdate() {
|
|
4856
|
-
return
|
|
4813
|
+
return Ve(() => {
|
|
4857
4814
|
this.itemUpdated.emit();
|
|
4858
4815
|
});
|
|
4859
4816
|
}
|
|
@@ -4866,7 +4823,7 @@ const MgMenuItem = class {
|
|
|
4866
4823
|
['mg-c-menu-item__collapse-container']: true,
|
|
4867
4824
|
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
|
|
4868
4825
|
});
|
|
4869
|
-
return (h(Host, { key: '
|
|
4826
|
+
return (h(Host, { key: 'be4538374c9b944ee6492805817d58b1dbb18e4b', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier(), "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
|
|
4870
4827
|
}, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
|
|
4871
4828
|
this.renderInteractiveElement(),
|
|
4872
4829
|
h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
|
|
@@ -4885,65 +4842,24 @@ const MgMenuItem = class {
|
|
|
4885
4842
|
MgMenuItem.style = MgMenuItemStyle0;
|
|
4886
4843
|
|
|
4887
4844
|
/**
|
|
4888
|
-
* List
|
|
4845
|
+
* List available variants
|
|
4889
4846
|
*/
|
|
4890
4847
|
const variants$1 = ['info', 'warning', 'success', 'danger'];
|
|
4848
|
+
/**
|
|
4849
|
+
* List available variant styles
|
|
4850
|
+
*/
|
|
4851
|
+
const variantStyles = ['bar-left', 'background'];
|
|
4891
4852
|
|
|
4892
|
-
const mgMessageCss = ":host{--mg-card-
|
|
4853
|
+
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(*){--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%}";
|
|
4893
4854
|
const MgMessageStyle0 = mgMessageCss;
|
|
4894
4855
|
|
|
4895
4856
|
const MgMessage = class {
|
|
4896
4857
|
constructor(hostRef) {
|
|
4897
4858
|
registerInstance(this, hostRef);
|
|
4898
|
-
this.componentShow = createEvent(this, "component-show", 7);
|
|
4899
|
-
this.componentHide = createEvent(this, "component-hide", 7);
|
|
4900
4859
|
/************
|
|
4901
4860
|
* Internal *
|
|
4902
4861
|
************/
|
|
4903
|
-
|
|
4904
|
-
this.classHide = 'mg-c-message--hide';
|
|
4905
|
-
// IDs
|
|
4906
|
-
this.closeButtonId = '';
|
|
4907
|
-
// Stored timer setted when hide action is run from setTimeOut
|
|
4908
|
-
this.storedTimer = null;
|
|
4909
|
-
// Manage hover
|
|
4910
|
-
this.isFocused = false;
|
|
4911
|
-
this.isHovered = false;
|
|
4912
|
-
/**
|
|
4913
|
-
* Set timer
|
|
4914
|
-
*/
|
|
4915
|
-
this.setTimer = () => {
|
|
4916
|
-
this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
|
|
4917
|
-
};
|
|
4918
|
-
/**
|
|
4919
|
-
* Clear timer
|
|
4920
|
-
*/
|
|
4921
|
-
this.clearTimer = () => {
|
|
4922
|
-
clearTimeout(this.storedTimer);
|
|
4923
|
-
};
|
|
4924
|
-
/**
|
|
4925
|
-
* Event to add on element
|
|
4926
|
-
* @param event - event
|
|
4927
|
-
*/
|
|
4928
|
-
this.timerEvents = (event) => {
|
|
4929
|
-
this.clearTimer();
|
|
4930
|
-
const isMouseEvent = event.type === 'mouseenter';
|
|
4931
|
-
// Needed to ensure we don't start the timer
|
|
4932
|
-
this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;
|
|
4933
|
-
// Restart timer when loose focus AND mouse leave
|
|
4934
|
-
this.element.addEventListener(isMouseEvent ? 'mouseleave' : 'focusout', eventOut => {
|
|
4935
|
-
this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;
|
|
4936
|
-
// Start timer if needed
|
|
4937
|
-
if (!this.isFocused && !this.isHovered)
|
|
4938
|
-
this.setTimer();
|
|
4939
|
-
}, { once: true });
|
|
4940
|
-
};
|
|
4941
|
-
/**
|
|
4942
|
-
* Handle close button
|
|
4943
|
-
*/
|
|
4944
|
-
this.handleClose = () => {
|
|
4945
|
-
this.hide = true;
|
|
4946
|
-
};
|
|
4862
|
+
this.classBase = 'mg-c-message';
|
|
4947
4863
|
/**
|
|
4948
4864
|
* Get icon corresponding to variant
|
|
4949
4865
|
* @returns icon
|
|
@@ -4960,60 +4876,31 @@ const MgMessage = class {
|
|
|
4960
4876
|
return 'exclamation-circle';
|
|
4961
4877
|
}
|
|
4962
4878
|
};
|
|
4963
|
-
this.
|
|
4964
|
-
this.
|
|
4965
|
-
this.variant = variants$1[0];
|
|
4966
|
-
this.closeButton = false;
|
|
4967
|
-
this.hide = false;
|
|
4968
|
-
this.noAriaRole = undefined;
|
|
4879
|
+
this.variant = 'info';
|
|
4880
|
+
this.variantStyle = 'bar-left';
|
|
4969
4881
|
this.classCollection = new Ie(['mg-c-message']);
|
|
4970
4882
|
this.hasActions = false;
|
|
4971
4883
|
}
|
|
4972
|
-
|
|
4973
|
-
if (newValue !== undefined && newValue < 2) {
|
|
4974
|
-
throw new Error(`<mg-message> prop "delay" must be greater than 2 seconds.`);
|
|
4975
|
-
}
|
|
4976
|
-
}
|
|
4977
|
-
validateVariant(newValue, oldValue) {
|
|
4884
|
+
watchVariant(newValue, oldValue) {
|
|
4978
4885
|
if (!variants$1.includes(newValue)) {
|
|
4979
|
-
throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}
|
|
4886
|
+
throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
4980
4887
|
}
|
|
4981
4888
|
else {
|
|
4982
|
-
if (
|
|
4983
|
-
this.classCollection.
|
|
4984
|
-
|
|
4985
|
-
|
|
4986
|
-
}
|
|
4987
|
-
}
|
|
4988
|
-
validateCloseButton(newValue) {
|
|
4989
|
-
if (newValue && this.hasActions) {
|
|
4990
|
-
this.closeButton = false;
|
|
4991
|
-
throw new Error('<mg-message> prop "close-button" can\'t be used with the actions slot.');
|
|
4889
|
+
if (newValue !== undefined)
|
|
4890
|
+
this.classCollection.add(`${this.classBase}--${newValue}`);
|
|
4891
|
+
if (oldValue !== undefined)
|
|
4892
|
+
this.classCollection.delete(`${this.classBase}--${oldValue}`);
|
|
4992
4893
|
}
|
|
4993
4894
|
}
|
|
4994
|
-
|
|
4995
|
-
if (newValue) {
|
|
4996
|
-
|
|
4997
|
-
this.classCollection.add(this.classHide);
|
|
4998
|
-
// Remove event Listener
|
|
4999
|
-
['focusin', 'mouseenter'].forEach(event => {
|
|
5000
|
-
this.element.removeEventListener(event, this.timerEvents);
|
|
5001
|
-
});
|
|
5002
|
-
// Clear Timer
|
|
5003
|
-
this.clearTimer();
|
|
4895
|
+
watchVariantStyle(newValue, oldValue) {
|
|
4896
|
+
if (!variantStyles.includes(newValue)) {
|
|
4897
|
+
throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
5004
4898
|
}
|
|
5005
4899
|
else {
|
|
5006
|
-
|
|
5007
|
-
|
|
5008
|
-
|
|
5009
|
-
|
|
5010
|
-
// Start timer
|
|
5011
|
-
this.setTimer();
|
|
5012
|
-
// Stop timer when get focus or mouse enter
|
|
5013
|
-
['focusin', 'mouseenter'].forEach(event => {
|
|
5014
|
-
this.element.addEventListener(event, this.timerEvents);
|
|
5015
|
-
});
|
|
5016
|
-
}
|
|
4900
|
+
if (newValue !== undefined)
|
|
4901
|
+
this.classCollection.add(`${this.classBase}--${newValue}`);
|
|
4902
|
+
if (oldValue !== undefined)
|
|
4903
|
+
this.classCollection.delete(`${this.classBase}--${oldValue}`);
|
|
5017
4904
|
}
|
|
5018
4905
|
}
|
|
5019
4906
|
/*************
|
|
@@ -5023,36 +4910,26 @@ const MgMessage = class {
|
|
|
5023
4910
|
* Check if component props are well configured on init
|
|
5024
4911
|
*/
|
|
5025
4912
|
componentWillLoad() {
|
|
5026
|
-
// Get locales
|
|
5027
|
-
this.messages = initLocales(this.element).messages;
|
|
5028
4913
|
// Validate
|
|
5029
|
-
this.
|
|
5030
|
-
|
|
4914
|
+
this.watchVariant(this.variant);
|
|
4915
|
+
this.watchVariantStyle(this.variantStyle);
|
|
4916
|
+
// Check if component has actions slot
|
|
5031
4917
|
this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
|
|
5032
|
-
this.validateCloseButton(this.closeButton);
|
|
5033
|
-
if (this.closeButton) {
|
|
5034
|
-
this.classCollection.add('mg-c-message--close-button');
|
|
5035
|
-
this.closeButtonId = `${this.identifier}-close-button`;
|
|
5036
|
-
}
|
|
5037
|
-
this.validateDelay(this.delay);
|
|
5038
|
-
this.validateHide(this.hide);
|
|
5039
4918
|
}
|
|
5040
4919
|
/**
|
|
5041
4920
|
* Render
|
|
5042
4921
|
* @returns HTML Element
|
|
5043
4922
|
*/
|
|
5044
4923
|
render() {
|
|
5045
|
-
|
|
5046
|
-
|
|
5047
|
-
|
|
5048
|
-
|
|
4924
|
+
return (h("div", { key: '9ce1d7b25bf12d974a7b0b296d9d71b9b2c984e1', class: this.classCollection.join() }, h("mg-card", { key: '7c7c1d5891d988adc7c5090b02d809aab32565f8' }, this.variantStyle === 'bar-left' && h("span", { key: 'd6c291fcf93ab6e84ba0288a1a0c4ec405b57e78', class: "mg-c-message__bar" }), h("span", { key: 'afc3dcf95dbf4ee96ca1041c54c0d4c37d435601', class: "mg-c-message__icon" }, h("mg-icon", { key: 'd9b79cb3be22fedee6a04cf43c72641202cc80f7', icon: this.getIcon() })), h("div", { key: 'f70d488459d28a464a3714b122b7a708c3562741', class: "mg-c-message__content" }, h("span", { key: 'd24b0ed1c326cb04bc7944f0c4f1fe19efa3fc9c', class: "mg-c-message__content-slot" }, h("slot", { key: 'bb491533bc09600c04699d561c7af608ee1567e5' })), this.hasActions && [
|
|
4925
|
+
h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
|
|
4926
|
+
h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '43547919e1ec8b34f23ea1ad5e75d5b0da23c831', name: "actions" })),
|
|
4927
|
+
]))));
|
|
5049
4928
|
}
|
|
5050
4929
|
get element() { return getElement(this); }
|
|
5051
4930
|
static get watchers() { return {
|
|
5052
|
-
"
|
|
5053
|
-
"
|
|
5054
|
-
"closeButton": ["validateCloseButton"],
|
|
5055
|
-
"hide": ["validateHide"]
|
|
4931
|
+
"variant": ["watchVariant"],
|
|
4932
|
+
"variantStyle": ["watchVariantStyle"]
|
|
5056
4933
|
}; }
|
|
5057
4934
|
};
|
|
5058
4935
|
MgMessage.style = MgMessageStyle0;
|
|
@@ -5062,7 +4939,7 @@ MgMessage.style = MgMessageStyle0;
|
|
|
5062
4939
|
*/
|
|
5063
4940
|
const dialogRoles = ['dialog', 'alertdialog'];
|
|
5064
4941
|
|
|
5065
|
-
const mgModalCss = ":host{--mg-card-border-radius:var(--mg-modal-border-radius);--mg-card-
|
|
4942
|
+
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}.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(*){--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}";
|
|
5066
4943
|
const MgModalStyle0 = mgModalCss;
|
|
5067
4944
|
|
|
5068
4945
|
const MgModal = class {
|
|
@@ -5070,116 +4947,44 @@ const MgModal = class {
|
|
|
5070
4947
|
registerInstance(this, hostRef);
|
|
5071
4948
|
this.componentShow = createEvent(this, "component-show", 7);
|
|
5072
4949
|
this.componentHide = createEvent(this, "component-hide", 7);
|
|
5073
|
-
/************
|
|
5074
|
-
* Internal *
|
|
5075
|
-
************/
|
|
5076
|
-
// Modal focusable elements
|
|
5077
|
-
this.modalFocusableElements = [];
|
|
5078
|
-
// Classes
|
|
5079
|
-
this.classHide = 'mg-c-modal--hide';
|
|
5080
4950
|
// IDs
|
|
5081
4951
|
this.titleId = '';
|
|
4952
|
+
/***********
|
|
4953
|
+
* Handles *
|
|
4954
|
+
***********/
|
|
5082
4955
|
/**
|
|
5083
|
-
*
|
|
5084
|
-
* @param event - keyboard event
|
|
5085
|
-
*/
|
|
5086
|
-
this.handleLastFocusableElement = (event) => {
|
|
5087
|
-
if (event.key === 'Tab' && !event.shiftKey) {
|
|
5088
|
-
event.preventDefault();
|
|
5089
|
-
this.modalFocusableElements[0].focus();
|
|
5090
|
-
}
|
|
5091
|
-
};
|
|
5092
|
-
/**
|
|
5093
|
-
* Handle first focusable element
|
|
5094
|
-
* @param event - keyboard event
|
|
5095
|
-
*/
|
|
5096
|
-
this.handleFirstFocusableElement = (event) => {
|
|
5097
|
-
if (event.key === 'Tab' && event.shiftKey) {
|
|
5098
|
-
event.preventDefault();
|
|
5099
|
-
this.getLastFocusableElement().focus();
|
|
5100
|
-
}
|
|
5101
|
-
};
|
|
5102
|
-
/**
|
|
5103
|
-
* Get last focusablmeElement
|
|
5104
|
-
* @returns last modal focusable element
|
|
5105
|
-
*/
|
|
5106
|
-
this.getLastFocusableElement = () => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);
|
|
5107
|
-
/**
|
|
5108
|
-
* Method to manage focus on modal focusable elements
|
|
5109
|
-
*/
|
|
5110
|
-
this.setFocus = () => {
|
|
5111
|
-
// Get all focusable elements
|
|
5112
|
-
const slottedFocusableElements = Array.from(this.element.querySelectorAll(Ke));
|
|
5113
|
-
// If close button is enabled or at least one of the slotted element is focusable
|
|
5114
|
-
if (this.closeButton || slottedFocusableElements.length > 0) {
|
|
5115
|
-
// Check if slotted focusable elements have shadowDom with focusable elements
|
|
5116
|
-
this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
|
|
5117
|
-
acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(Ke) || focusableElement : focusableElement);
|
|
5118
|
-
return acc;
|
|
5119
|
-
}, []);
|
|
5120
|
-
// When close button is enabled it's the first focusable element.
|
|
5121
|
-
if (this.closeButton && this.closeButtonElement !== undefined) {
|
|
5122
|
-
this.modalFocusableElements.unshift(this.closeButtonElement);
|
|
5123
|
-
}
|
|
5124
|
-
// Add event listener on last element
|
|
5125
|
-
this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);
|
|
5126
|
-
// Add event listener on first element (case shift + tab)
|
|
5127
|
-
this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);
|
|
5128
|
-
}
|
|
5129
|
-
};
|
|
5130
|
-
/*************
|
|
5131
|
-
* Handlers *
|
|
5132
|
-
*************/
|
|
5133
|
-
/**
|
|
5134
|
-
* Handle close button
|
|
4956
|
+
* Closes the modal.
|
|
5135
4957
|
*/
|
|
5136
4958
|
this.handleClose = () => {
|
|
5137
|
-
this.
|
|
4959
|
+
this.open = false;
|
|
5138
4960
|
};
|
|
5139
4961
|
this.identifier = ze('mg-modal');
|
|
5140
4962
|
this.dialogRole = dialogRoles[0];
|
|
5141
4963
|
this.modalTitle = undefined;
|
|
5142
4964
|
this.closeButton = false;
|
|
5143
|
-
this.
|
|
4965
|
+
this.open = false;
|
|
5144
4966
|
this.hasActions = false;
|
|
5145
|
-
this.hasContent = false;
|
|
5146
4967
|
this.classCollection = new Ie(['mg-c-modal']);
|
|
5147
4968
|
}
|
|
5148
4969
|
validateDialogRole(newValue) {
|
|
5149
4970
|
if (!dialogRoles.includes(newValue))
|
|
5150
|
-
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
|
|
4971
|
+
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
5151
4972
|
}
|
|
5152
4973
|
validateModalTitle(newValue) {
|
|
5153
|
-
if (!
|
|
5154
|
-
throw new Error(
|
|
4974
|
+
if (!Qe(newValue)) {
|
|
4975
|
+
throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${Ze(newValue)}.`);
|
|
5155
4976
|
}
|
|
5156
4977
|
}
|
|
5157
|
-
|
|
5158
|
-
var _a;
|
|
4978
|
+
watchOpen(newValue) {
|
|
5159
4979
|
if (newValue) {
|
|
5160
|
-
this.
|
|
5161
|
-
this.classCollection.add(this.classHide);
|
|
5162
|
-
document.body.style.overflow = this.bodyOverflow;
|
|
5163
|
-
// reset focus handlers
|
|
5164
|
-
(_a = this.getLastFocusableElement()) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleLastFocusableElement);
|
|
5165
|
-
if (this.modalFocusableElements.length > 0)
|
|
5166
|
-
this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);
|
|
5167
|
-
}
|
|
5168
|
-
else if (newValue === false) {
|
|
4980
|
+
this.dialog.showModal();
|
|
5169
4981
|
this.componentShow.emit();
|
|
5170
|
-
this.classCollection.delete(this.classHide);
|
|
5171
4982
|
document.body.style.overflow = 'hidden';
|
|
5172
|
-
this.setFocus();
|
|
5173
4983
|
}
|
|
5174
|
-
|
|
5175
|
-
|
|
5176
|
-
|
|
5177
|
-
|
|
5178
|
-
*/
|
|
5179
|
-
handleKeyDown(event) {
|
|
5180
|
-
// we can use 'Escape button" when this not a blocking modal, induced by closeButton value.
|
|
5181
|
-
if (this.closeButton && event.key === 'Escape') {
|
|
5182
|
-
this.hide = true;
|
|
4984
|
+
else {
|
|
4985
|
+
this.dialog.close();
|
|
4986
|
+
this.componentHide.emit();
|
|
4987
|
+
document.body.style.overflow = this.bodyOverflow;
|
|
5183
4988
|
}
|
|
5184
4989
|
}
|
|
5185
4990
|
/*************
|
|
@@ -5195,54 +5000,48 @@ const MgModal = class {
|
|
|
5195
5000
|
this.messages = initLocales(this.element).messages;
|
|
5196
5001
|
// Validate
|
|
5197
5002
|
this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
|
|
5198
|
-
this.hasContent = this.element.querySelector('[slot="content"]') !== null;
|
|
5199
5003
|
this.titleId = `${this.identifier}-title`;
|
|
5200
5004
|
this.validateModalTitle(this.modalTitle);
|
|
5201
|
-
this.validateHide(this.hide);
|
|
5202
5005
|
this.validateDialogRole(this.dialogRole);
|
|
5203
5006
|
}
|
|
5204
5007
|
/**
|
|
5205
|
-
*
|
|
5008
|
+
* Define open state on component load
|
|
5206
5009
|
*/
|
|
5207
5010
|
componentDidLoad() {
|
|
5208
|
-
|
|
5209
|
-
|
|
5210
|
-
|
|
5211
|
-
|
|
5212
|
-
|
|
5213
|
-
}
|
|
5214
|
-
}).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });
|
|
5011
|
+
this.watchOpen(this.open);
|
|
5012
|
+
// update open prop when use escape key
|
|
5013
|
+
this.dialog.addEventListener('close', () => {
|
|
5014
|
+
this.open = false;
|
|
5015
|
+
});
|
|
5215
5016
|
}
|
|
5216
5017
|
/**
|
|
5217
5018
|
* Render
|
|
5218
5019
|
* @returns HTML Element
|
|
5219
5020
|
*/
|
|
5220
5021
|
render() {
|
|
5221
|
-
return (h("
|
|
5022
|
+
return (h("dialog", { key: '1b3de14b6dddfc77dc5906353a93689d3af9d8c8', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
|
|
5222
5023
|
if (el !== null) {
|
|
5223
|
-
|
|
5224
|
-
this.closeButtonElement = el;
|
|
5225
|
-
// add close button element to modalFocusableElements when it is render
|
|
5226
|
-
this.modalFocusableElements.unshift(this.closeButtonElement);
|
|
5024
|
+
this.dialog = el;
|
|
5227
5025
|
}
|
|
5228
|
-
} }, h("mg-
|
|
5026
|
+
} }, h("mg-card", { key: 'e3d8e671d49f39a0173663fbae37f93c50c0a028' }, h("div", { key: '249b985c471aca4b06548b7e89f68f94a7ee2976', class: "mg-c-modal__dialog" }, h("header", { key: '1c5a329670e1b789c55806a044fa73330582313e', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'a0d0b831d05ef09e78b31dc579df2c204a38b41a', class: "mg-c-modal__close-button" }, h("mg-button", { key: '26d93a8bc8a3fc7578ad4127acad645da28a035c', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton,
|
|
5027
|
+
// eslint-disable-next-line react/jsx-no-bind
|
|
5028
|
+
onClick: this.handleClose }, h("mg-icon", { key: 'adbbd878cf4967f02d636bbf815a79a8fe4c08b1', icon: "cross" })))), h("h1", { key: '274ad2b5d4f030725d6bf6201945d668b9ba056e', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: 'd0bf1bee2472a49da0826a8013fc7f84262d2b4b', class: "mg-c-modal__content" }, h("slot", { key: '83901bde6eeab22c14873e5b8d714826d194cff0' })), this.hasActions && (h("footer", { key: '16ea5be07e639f12373b79be575f9bd142b4c426', class: "mg-c-modal__footer" }, h("slot", { key: 'ca1204b8f12322795a28cadece382be9001b4684', name: "actions" })))))));
|
|
5229
5029
|
}
|
|
5230
5030
|
get element() { return getElement(this); }
|
|
5231
5031
|
static get watchers() { return {
|
|
5232
5032
|
"dialogRole": ["validateDialogRole"],
|
|
5233
5033
|
"modalTitle": ["validateModalTitle"],
|
|
5234
|
-
"
|
|
5034
|
+
"open": ["watchOpen"]
|
|
5235
5035
|
}; }
|
|
5236
5036
|
};
|
|
5237
5037
|
MgModal.style = MgModalStyle0;
|
|
5238
5038
|
|
|
5239
|
-
|
|
5240
|
-
|
|
5241
|
-
|
|
5242
|
-
|
|
5243
|
-
})(NavigationAction || (NavigationAction = {}));
|
|
5039
|
+
const NavigationAction = {
|
|
5040
|
+
NEXT: 'next',
|
|
5041
|
+
PREVIOUS: 'previous',
|
|
5042
|
+
};
|
|
5244
5043
|
|
|
5245
|
-
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;
|
|
5044
|
+
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}";
|
|
5246
5045
|
const MgPaginationStyle0 = mgPaginationCss;
|
|
5247
5046
|
|
|
5248
5047
|
/**
|
|
@@ -5306,15 +5105,15 @@ const MgPagination = class {
|
|
|
5306
5105
|
}
|
|
5307
5106
|
validateTotalPages(newValue) {
|
|
5308
5107
|
if (newValue < 1) {
|
|
5309
|
-
throw new Error(
|
|
5108
|
+
throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${Ze(newValue)}.`);
|
|
5310
5109
|
}
|
|
5311
5110
|
}
|
|
5312
5111
|
validateCurrentPage(newValue) {
|
|
5313
5112
|
if (newValue < 1) {
|
|
5314
|
-
throw new Error(
|
|
5113
|
+
throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${Ze(newValue)}.`);
|
|
5315
5114
|
}
|
|
5316
5115
|
else if (newValue > this.totalPages) {
|
|
5317
|
-
throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page');
|
|
5116
|
+
throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
|
|
5318
5117
|
}
|
|
5319
5118
|
this.currentPageChange.emit(newValue);
|
|
5320
5119
|
}
|
|
@@ -5340,10 +5139,10 @@ const MgPagination = class {
|
|
|
5340
5139
|
* @returns HTML Element
|
|
5341
5140
|
*/
|
|
5342
5141
|
render() {
|
|
5343
|
-
const navigationActionButton = (disabled, action) => (h("mg-button", { key: '
|
|
5142
|
+
const navigationActionButton = (disabled, action) => (h("mg-button", { key: '76bdc93c328042ef6d6d8dafce5a701629f59903', label: this.messages.pagination[`${action}Page`],
|
|
5344
5143
|
// eslint-disable-next-line react/jsx-no-bind
|
|
5345
|
-
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '
|
|
5346
|
-
return (h(Host, { key: '
|
|
5144
|
+
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '336f048488682bfbdd7510d52519ed495ff5f1b6', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { key: '454f119cb4a20e794be2f708e4f4f5df198da114', icon: "chevron-right" })));
|
|
5145
|
+
return (h(Host, { key: 'b260a359ad34cc05ed6304f6d3312dcecc940f1c', hidden: this.totalPages < 2 }, h("nav", { key: '66e2400d787d7decaabf8bb982842fdc07a7be56', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("div", { key: '9cea1e9d1e65f15a1e96bb36e924c99f0b383348', class: "mg-c-pagination__page-count" }, h("mg-input-select", { key: '8232db02df5ce94af250b00ccf000bead9897f88', identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { key: '449f4c3790d159a9703135dd0e9c3e2e09df44a7', 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))));
|
|
5347
5146
|
}
|
|
5348
5147
|
get element() { return getElement(this); }
|
|
5349
5148
|
static get watchers() { return {
|
|
@@ -5362,7 +5161,7 @@ const expandToggleDisplays = ['text', 'icon'];
|
|
|
5362
5161
|
*/
|
|
5363
5162
|
const titlePositions = ['left', 'right'];
|
|
5364
5163
|
|
|
5365
|
-
const mgPanelCss = ":host{--mg-card-border:none;--mg-card-
|
|
5164
|
+
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(*){--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}";
|
|
5366
5165
|
const MgPanelStyle0 = mgPanelCss;
|
|
5367
5166
|
|
|
5368
5167
|
const MgPanel = class {
|
|
@@ -5426,17 +5225,17 @@ const MgPanel = class {
|
|
|
5426
5225
|
* Render collapse button
|
|
5427
5226
|
* @returns collpase button
|
|
5428
5227
|
*/
|
|
5429
|
-
this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat",
|
|
5228
|
+
this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
|
|
5430
5229
|
/**
|
|
5431
5230
|
* Render edit button
|
|
5432
5231
|
* @returns edit Button
|
|
5433
5232
|
*/
|
|
5434
|
-
this.renderEditButton = () => (h("mg-button", { key: "edit-button", "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton
|
|
5233
|
+
this.renderEditButton = () => (h("mg-button", { key: "edit-button", "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton }, h("mg-icon", { icon: "pen" })));
|
|
5435
5234
|
/**
|
|
5436
5235
|
* Render input button
|
|
5437
5236
|
* @returns edit title input
|
|
5438
5237
|
*/
|
|
5439
|
-
this.renderEditInput = () => (h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle,
|
|
5238
|
+
this.renderEditInput = () => (h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, characterLeftHide: true, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: (el) => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton }, h("mg-icon", { icon: "check" }))));
|
|
5440
5239
|
/**
|
|
5441
5240
|
* Render title
|
|
5442
5241
|
* @returns title element
|
|
@@ -5476,8 +5275,8 @@ const MgPanel = class {
|
|
|
5476
5275
|
this.updatedPanelTitle = undefined;
|
|
5477
5276
|
}
|
|
5478
5277
|
validatePanelTitle(newValue) {
|
|
5479
|
-
if (!
|
|
5480
|
-
throw new Error(
|
|
5278
|
+
if (!Qe(newValue))
|
|
5279
|
+
throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${Ze(newValue)}.`);
|
|
5481
5280
|
this.titleChange.emit(newValue);
|
|
5482
5281
|
}
|
|
5483
5282
|
validateTitlePattern(newValue) {
|
|
@@ -5486,14 +5285,14 @@ const MgPanel = class {
|
|
|
5486
5285
|
}
|
|
5487
5286
|
validateTitlePosition(newValue) {
|
|
5488
5287
|
if (!titlePositions.includes(newValue))
|
|
5489
|
-
throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}.`);
|
|
5288
|
+
throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
5490
5289
|
}
|
|
5491
5290
|
handleExpanded(newValue) {
|
|
5492
5291
|
this.expandedChange.emit(newValue);
|
|
5493
5292
|
}
|
|
5494
5293
|
validateExpandToggleDisplay(newValue) {
|
|
5495
5294
|
if (!expandToggleDisplays.includes(newValue))
|
|
5496
|
-
throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}.`);
|
|
5295
|
+
throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
5497
5296
|
if (newValue === 'icon' && this.titleEditable)
|
|
5498
5297
|
this.titleEditable = false;
|
|
5499
5298
|
}
|
|
@@ -5527,7 +5326,7 @@ const MgPanel = class {
|
|
|
5527
5326
|
*/
|
|
5528
5327
|
render() {
|
|
5529
5328
|
const headerId = `${this.identifier}-header`;
|
|
5530
|
-
return (h("section", { key: '
|
|
5329
|
+
return (h("section", { key: '3999a8ed86a5b7eb4329e4c2aa9064535f6fad99', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: 'bc777219b2e11f08975d6daa911b237a5a71f0b1' }, h("header", { key: '8e740323476aaa2f7c4f10c52b2107f05e156f1a', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '9afe2db9371628027e8c2feff6b11235432f98d2', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '3a6592a91938b6dee66e7b59f7a7e490256582eb' })))));
|
|
5531
5330
|
}
|
|
5532
5331
|
get element() { return getElement(this); }
|
|
5533
5332
|
static get watchers() { return {
|
|
@@ -7332,7 +7131,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
|
|
|
7332
7131
|
defaultModifiers: defaultModifiers
|
|
7333
7132
|
}); // eslint-disable-next-line import/no-unused-modules
|
|
7334
7133
|
|
|
7335
|
-
const mgPopoverCss = ":host{--mg-card-
|
|
7134
|
+
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}";
|
|
7336
7135
|
const MgPopoverStyle0 = mgPopoverCss;
|
|
7337
7136
|
|
|
7338
7137
|
const MgPopover = class {
|
|
@@ -7344,8 +7143,9 @@ const MgPopover = class {
|
|
|
7344
7143
|
* @param event - mouse event
|
|
7345
7144
|
*/
|
|
7346
7145
|
this.clickOutside = (event) => {
|
|
7347
|
-
if (!this.disabled && event.target.closest('mg-popover') !== this.element &&
|
|
7146
|
+
if (!this.disabled && event.target.closest('mg-popover') !== this.element && event.target.closest(`[data-mg-popover-guard="${this.identifier}"]`) === null) {
|
|
7348
7147
|
this.display = false;
|
|
7148
|
+
}
|
|
7349
7149
|
};
|
|
7350
7150
|
/**
|
|
7351
7151
|
* Show popover
|
|
@@ -7470,7 +7270,7 @@ const MgPopover = class {
|
|
|
7470
7270
|
*/
|
|
7471
7271
|
componentWillLoad() {
|
|
7472
7272
|
// Get windows to attach events
|
|
7473
|
-
this.windows =
|
|
7273
|
+
this.windows = Ke(window);
|
|
7474
7274
|
// render mg-popover-content slot
|
|
7475
7275
|
this.renderPopoverContent();
|
|
7476
7276
|
this.validateCloseButton(this.closeButton);
|
|
@@ -7489,7 +7289,7 @@ const MgPopover = class {
|
|
|
7489
7289
|
interactiveElement.setAttribute('aria-controls', this.identifier);
|
|
7490
7290
|
interactiveElement.setAttribute('aria-expanded', `${this.display}`);
|
|
7491
7291
|
const fallbackPlacements = [];
|
|
7492
|
-
if (this.element.dataset.fallbackPlacement) {
|
|
7292
|
+
if (this.element.dataset.fallbackPlacement !== undefined) {
|
|
7493
7293
|
fallbackPlacements.push(this.element.dataset.fallbackPlacement);
|
|
7494
7294
|
}
|
|
7495
7295
|
// Create popperjs popover
|
|
@@ -7536,7 +7336,7 @@ const MgPopover = class {
|
|
|
7536
7336
|
* @returns HTML Element
|
|
7537
7337
|
*/
|
|
7538
7338
|
render() {
|
|
7539
|
-
return (h(Host, { key: '
|
|
7339
|
+
return (h(Host, { key: '15fa5513044a120adeb819495d416812bb4ffcbd' }, h("slot", { key: '12494b7755e17c52358b520fca56fdf9d73916a0' }), h("slot", { key: '75476669b6b75c9325e0142dac613bdb8140ff17', name: "content" })));
|
|
7540
7340
|
}
|
|
7541
7341
|
get element() { return getElement(this); }
|
|
7542
7342
|
static get watchers() { return {
|
|
@@ -7548,7 +7348,7 @@ const MgPopover = class {
|
|
|
7548
7348
|
};
|
|
7549
7349
|
MgPopover.style = MgPopoverStyle0;
|
|
7550
7350
|
|
|
7551
|
-
const mgPopoverContentCss = ":host{position:relative;z-index:2000;display:none;padding:
|
|
7351
|
+
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-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-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(*){--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-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-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-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before,:host([data-popper-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-popper-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-popper-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-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-popper-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before,:host([data-popper-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-popper-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-popper-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-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-popper-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-card-border-radius)}";
|
|
7552
7352
|
const MgPopoverContentStyle0 = mgPopoverContentCss;
|
|
7553
7353
|
|
|
7554
7354
|
const MgPopoverContent = class {
|
|
@@ -7581,7 +7381,7 @@ const MgPopoverContent = class {
|
|
|
7581
7381
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
7582
7382
|
const slottedTitleElement = this.element.querySelector('[slot="title"]');
|
|
7583
7383
|
if (slottedTitleElement && !Xe(slottedTitleElement, headingTags)) {
|
|
7584
|
-
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}
|
|
7384
|
+
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);
|
|
7585
7385
|
}
|
|
7586
7386
|
}
|
|
7587
7387
|
/**
|
|
@@ -7589,13 +7389,13 @@ const MgPopoverContent = class {
|
|
|
7589
7389
|
* @returns HTML Element
|
|
7590
7390
|
*/
|
|
7591
7391
|
render() {
|
|
7592
|
-
return (h(Host, { key: '
|
|
7392
|
+
return (h(Host, { key: '8d2dd7d21518de744c18f0280b7b418f3a76acca' }, h("mg-card", { key: '8beab7c9fb692c1983515709a1ee888dc7e5157a', class: this.classCollection.join() }, this.closeButton && (h("mg-button", { key: 'e636569be26b0c741e0b03e806787d91b47ded5c', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '3edc717cbe542494d892566c182883e20b1ca4cb', icon: "cross" }))), h("div", { key: 'd18525218972d92b6932984edb50844658e12970', class: "mg-c-popover-content__title" }, h("slot", { key: '2cceb41fd4ebb00b889e71cab211431e5894d04c', name: "title" })), h("slot", { key: 'a6615d9d7c85b32fb63d3d89db02fae2f8d5c1b2', name: "content" })), h("slot", { key: '0ff4bf72de19a3d56aafb64391cfc276d70e2f18', name: "arrow" })));
|
|
7593
7393
|
}
|
|
7594
7394
|
get element() { return getElement(this); }
|
|
7595
7395
|
};
|
|
7596
7396
|
MgPopoverContent.style = MgPopoverContentStyle0;
|
|
7597
7397
|
|
|
7598
|
-
const mgSkipLinksCss = ".mg-c-skip-links{position:absolute;background:
|
|
7398
|
+
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%)}";
|
|
7599
7399
|
const MgSkipLinksStyle0 = mgSkipLinksCss;
|
|
7600
7400
|
|
|
7601
7401
|
const MgSkipLinks = class {
|
|
@@ -7616,7 +7416,7 @@ const MgSkipLinks = class {
|
|
|
7616
7416
|
this.links = undefined;
|
|
7617
7417
|
}
|
|
7618
7418
|
validateLinks(links) {
|
|
7619
|
-
if (links === undefined || links.length === 0 || links.some(link => !
|
|
7419
|
+
if (links === undefined || links.length === 0 || links.some(link => !Qe(link.href) || !link.href.startsWith('#') || !Qe(link.label))) {
|
|
7620
7420
|
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.`);
|
|
7621
7421
|
}
|
|
7622
7422
|
}
|
|
@@ -7635,7 +7435,7 @@ const MgSkipLinks = class {
|
|
|
7635
7435
|
* @returns HTML Element
|
|
7636
7436
|
*/
|
|
7637
7437
|
render() {
|
|
7638
|
-
return (h("nav", { key: '
|
|
7438
|
+
return (h("nav", { key: 'dc5eeedabd3189f40a246bd5fe6da930928e3f22', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '178d8c46d62d8db10d43d6609efb15cbf429c207', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
|
|
7639
7439
|
}
|
|
7640
7440
|
get element() { return getElement(this); }
|
|
7641
7441
|
static get watchers() { return {
|
|
@@ -7647,19 +7447,18 @@ MgSkipLinks.style = MgSkipLinksStyle0;
|
|
|
7647
7447
|
/**
|
|
7648
7448
|
* Available tabs items status
|
|
7649
7449
|
*/
|
|
7650
|
-
|
|
7651
|
-
|
|
7652
|
-
|
|
7653
|
-
|
|
7654
|
-
|
|
7655
|
-
|
|
7656
|
-
})(Status || (Status = {}));
|
|
7450
|
+
const Status = {
|
|
7451
|
+
VISIBLE: 'visible',
|
|
7452
|
+
HIDDEN: 'hidden',
|
|
7453
|
+
DISABLED: 'disabled',
|
|
7454
|
+
ACTIVE: 'active',
|
|
7455
|
+
};
|
|
7657
7456
|
/**
|
|
7658
7457
|
* List of all possibles sizes
|
|
7659
7458
|
*/
|
|
7660
|
-
const sizes = ['
|
|
7459
|
+
const sizes = ['medium', 'large'];
|
|
7661
7460
|
|
|
7662
|
-
const mgTabsCss = ".mg-c-tabs.mg-c-tabs--size-
|
|
7461
|
+
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}";
|
|
7663
7462
|
const MgTabsStyle0 = mgTabsCss;
|
|
7664
7463
|
|
|
7665
7464
|
/**
|
|
@@ -7763,12 +7562,20 @@ const MgTabs = class {
|
|
|
7763
7562
|
this.resetFocus();
|
|
7764
7563
|
}
|
|
7765
7564
|
};
|
|
7565
|
+
/**
|
|
7566
|
+
* Reset focus on document click
|
|
7567
|
+
* @param event - mouse event
|
|
7568
|
+
*/
|
|
7569
|
+
this.handleDocumentClick = (event) => {
|
|
7570
|
+
if (event.target.closest('mg-tabs') !== this.element)
|
|
7571
|
+
this.resetFocus();
|
|
7572
|
+
};
|
|
7766
7573
|
/**
|
|
7767
7574
|
* Method to reset focus behavior
|
|
7768
7575
|
*/
|
|
7769
7576
|
this.resetFocus = () => {
|
|
7770
7577
|
// update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
|
|
7771
|
-
|
|
7578
|
+
Ve(() => {
|
|
7772
7579
|
this.tabFocus = undefined;
|
|
7773
7580
|
Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
|
|
7774
7581
|
tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
|
|
@@ -7785,20 +7592,20 @@ const MgTabs = class {
|
|
|
7785
7592
|
};
|
|
7786
7593
|
this.identifier = ze('mg-tabs');
|
|
7787
7594
|
this.label = undefined;
|
|
7788
|
-
this.size = '
|
|
7595
|
+
this.size = 'medium';
|
|
7789
7596
|
this.items = undefined;
|
|
7790
7597
|
this.activeTab = undefined;
|
|
7791
7598
|
this.tabs = [];
|
|
7792
7599
|
this.classCollection = new Ie(['mg-c-tabs']);
|
|
7793
7600
|
}
|
|
7794
7601
|
validateLabel(newValue) {
|
|
7795
|
-
if (!
|
|
7796
|
-
throw new Error(
|
|
7602
|
+
if (!Qe(newValue)) {
|
|
7603
|
+
throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${Ze(newValue)}.`);
|
|
7797
7604
|
}
|
|
7798
7605
|
}
|
|
7799
7606
|
validateSize(newValue) {
|
|
7800
7607
|
if (!sizes.includes(newValue)) {
|
|
7801
|
-
throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}
|
|
7608
|
+
throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
7802
7609
|
}
|
|
7803
7610
|
this.classCollection.add(`mg-c-tabs--size-${this.size}`);
|
|
7804
7611
|
}
|
|
@@ -7810,7 +7617,7 @@ const MgTabs = class {
|
|
|
7810
7617
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
7811
7618
|
this.tabs = newValue;
|
|
7812
7619
|
else
|
|
7813
|
-
throw new Error(
|
|
7620
|
+
throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${Ze(newValue)}.`);
|
|
7814
7621
|
}
|
|
7815
7622
|
validateActiveTab(newValue) {
|
|
7816
7623
|
// when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
|
|
@@ -7835,7 +7642,7 @@ const MgTabs = class {
|
|
|
7835
7642
|
this.activeTabChange.emit(newValue);
|
|
7836
7643
|
}
|
|
7837
7644
|
else {
|
|
7838
|
-
throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable".`);
|
|
7645
|
+
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: ${Ze(newValue)}.`);
|
|
7839
7646
|
}
|
|
7840
7647
|
}
|
|
7841
7648
|
/*************
|
|
@@ -7856,17 +7663,20 @@ const MgTabs = class {
|
|
|
7856
7663
|
* add listners
|
|
7857
7664
|
*/
|
|
7858
7665
|
componentDidLoad() {
|
|
7859
|
-
document.addEventListener('click',
|
|
7860
|
-
|
|
7861
|
-
|
|
7862
|
-
|
|
7666
|
+
document.addEventListener('click', this.handleDocumentClick, false);
|
|
7667
|
+
}
|
|
7668
|
+
/**
|
|
7669
|
+
* remove listeners
|
|
7670
|
+
*/
|
|
7671
|
+
disconnectedCallback() {
|
|
7672
|
+
document.removeEventListener('keydown', this.handleDocumentClick);
|
|
7863
7673
|
}
|
|
7864
7674
|
/**
|
|
7865
7675
|
* Render
|
|
7866
7676
|
* @returns HTML Element
|
|
7867
7677
|
*/
|
|
7868
7678
|
render() {
|
|
7869
|
-
return (h("div", { key: '
|
|
7679
|
+
return (h("div", { key: '921ed990aa94ee26f04e8877bf7f5b88cef84516', class: this.classCollection.join() }, h("header", { key: '00cd0666617678f005459c2aa3005d0c6319429b', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
|
|
7870
7680
|
[`${this.buttonTabBaseClass}`]: true,
|
|
7871
7681
|
[`${this.buttonTabBaseClass}--horizontal`]: true,
|
|
7872
7682
|
[`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
|
|
@@ -7889,7 +7699,7 @@ MgTabs.style = MgTabsStyle0;
|
|
|
7889
7699
|
*/
|
|
7890
7700
|
const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
|
|
7891
7701
|
|
|
7892
|
-
const mgTagCss = ":host{display:inline-block}.mg-c-tag{display:inline-flex;min-height:var(--mg-tag-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-tag-height) -
|
|
7702
|
+
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}";
|
|
7893
7703
|
const MgTagStyle0 = mgTagCss;
|
|
7894
7704
|
|
|
7895
7705
|
const MgTag = class {
|
|
@@ -7908,7 +7718,7 @@ const MgTag = class {
|
|
|
7908
7718
|
}
|
|
7909
7719
|
validateVariant(newValue, oldValue) {
|
|
7910
7720
|
if (!variants.includes(newValue)) {
|
|
7911
|
-
throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}.`);
|
|
7721
|
+
throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${Ze(newValue)}.`);
|
|
7912
7722
|
}
|
|
7913
7723
|
else {
|
|
7914
7724
|
if (oldValue !== undefined) {
|
|
@@ -7941,7 +7751,7 @@ const MgTag = class {
|
|
|
7941
7751
|
* @param textContent - html element textContent property
|
|
7942
7752
|
*/
|
|
7943
7753
|
validateTextContent(textContent) {
|
|
7944
|
-
if (!
|
|
7754
|
+
if (!Qe(textContent))
|
|
7945
7755
|
throw new Error('<mg-tag> slot must contain a text content.');
|
|
7946
7756
|
}
|
|
7947
7757
|
/*************
|
|
@@ -7961,7 +7771,7 @@ const MgTag = class {
|
|
|
7961
7771
|
* @returns HTML Element
|
|
7962
7772
|
*/
|
|
7963
7773
|
render() {
|
|
7964
|
-
return (h("span", { key: '
|
|
7774
|
+
return (h("span", { key: 'bb99306c07ea9ef4ee193a6e52c2c211378d34df', class: this.classCollection.join() }, h("slot", { key: '0e427b1189217e5d863daf9ed15d35de4832d8dd' })));
|
|
7965
7775
|
}
|
|
7966
7776
|
get element() { return getElement(this); }
|
|
7967
7777
|
static get watchers() { return {
|
|
@@ -7972,15 +7782,14 @@ const MgTag = class {
|
|
|
7972
7782
|
};
|
|
7973
7783
|
MgTag.style = MgTagStyle0;
|
|
7974
7784
|
|
|
7975
|
-
|
|
7976
|
-
|
|
7977
|
-
|
|
7978
|
-
|
|
7979
|
-
|
|
7980
|
-
|
|
7981
|
-
})(Guard || (Guard = {}));
|
|
7785
|
+
const Guard = {
|
|
7786
|
+
FOCUS: 'focus',
|
|
7787
|
+
HOVER_TOOLTIP_ELEMENT: 'hoverTooltip',
|
|
7788
|
+
HOVER_TOOLTIPED_ELEMENT: 'hoverTooltiped',
|
|
7789
|
+
DISABLE_ON_CLICK: 'disableOnClick',
|
|
7790
|
+
};
|
|
7982
7791
|
|
|
7983
|
-
const mgTooltipCss = ":
|
|
7792
|
+
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}";
|
|
7984
7793
|
const MgTooltipStyle0 = mgTooltipCss;
|
|
7985
7794
|
|
|
7986
7795
|
/**
|
|
@@ -8001,7 +7810,7 @@ const MgTooltip = class {
|
|
|
8001
7810
|
// Enable the event listeners
|
|
8002
7811
|
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
8003
7812
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
8004
|
-
|
|
7813
|
+
Ve(() => {
|
|
8005
7814
|
this.windows.forEach((localWindow) => {
|
|
8006
7815
|
localWindow.addEventListener('click', this.handleClickOutside, false);
|
|
8007
7816
|
localWindow.addEventListener('keydown', this.handlePressEscape, false);
|
|
@@ -8023,7 +7832,7 @@ const MgTooltip = class {
|
|
|
8023
7832
|
});
|
|
8024
7833
|
};
|
|
8025
7834
|
/**
|
|
8026
|
-
* Check if clicked outside of component and
|
|
7835
|
+
* Check if clicked outside of component and hide tooltip
|
|
8027
7836
|
* @param event - mouse event
|
|
8028
7837
|
*/
|
|
8029
7838
|
this.handleClickOutside = (event) => {
|
|
@@ -8031,7 +7840,7 @@ const MgTooltip = class {
|
|
|
8031
7840
|
this.setDisplay(false);
|
|
8032
7841
|
};
|
|
8033
7842
|
/**
|
|
8034
|
-
* Check if 'Escape' key is pressed of component and
|
|
7843
|
+
* Check if 'Escape' key is pressed of component and hide tooltip
|
|
8035
7844
|
* @param event - keyboard event
|
|
8036
7845
|
*/
|
|
8037
7846
|
this.handlePressEscape = (event) => {
|
|
@@ -8084,24 +7893,31 @@ const MgTooltip = class {
|
|
|
8084
7893
|
* @param mgButton - slotted mg-button
|
|
8085
7894
|
*/
|
|
8086
7895
|
this.setMgButtonWrapper = (mgButton) => {
|
|
8087
|
-
|
|
7896
|
+
const buttonWrapperClass = 'mg-c-tooltip__mg-button-wrapper';
|
|
7897
|
+
const hasButtonWrapper = mgButton.parentElement.classList.contains(buttonWrapperClass);
|
|
7898
|
+
// For disabled mg-button, we need to wrap it in a new element
|
|
7899
|
+
// We bind handlers to this new element to keep listener features as workaround to disabled mg-button `pointer-events: none`
|
|
7900
|
+
// AND to prevent multiple nested wrappers from rendering when a new render is called with a disabled mg-button
|
|
7901
|
+
if (mgButton.disabled && !hasButtonWrapper) {
|
|
7902
|
+
// wrap mg-button in a div
|
|
8088
7903
|
const div = document.createElement('div');
|
|
8089
|
-
div.classList.add(
|
|
7904
|
+
div.classList.add(buttonWrapperClass);
|
|
8090
7905
|
mgButton.parentNode.insertBefore(div, mgButton);
|
|
8091
7906
|
div.appendChild(mgButton);
|
|
8092
|
-
|
|
7907
|
+
// update tooltipElement
|
|
7908
|
+
this.setTooltipedElement(div);
|
|
8093
7909
|
}
|
|
8094
|
-
else if (mgButton.
|
|
7910
|
+
else if (!mgButton.disabled && hasButtonWrapper) {
|
|
8095
7911
|
this.element.firstElementChild.replaceWith(mgButton);
|
|
8096
|
-
|
|
7912
|
+
// update tooltipElement
|
|
7913
|
+
this.setTooltipedElement(mgButton);
|
|
8097
7914
|
}
|
|
8098
7915
|
};
|
|
8099
7916
|
/**
|
|
8100
7917
|
* Set popper instance
|
|
7918
|
+
* @param strategy - popper strategy to apply on instance
|
|
8101
7919
|
*/
|
|
8102
|
-
this.setPopper = () => {
|
|
8103
|
-
// use element data attribute: `data-popper-strategy`, in order to get popper strategy configuration
|
|
8104
|
-
const strategy = (this.element.dataset.popperStrategy || 'fixed');
|
|
7920
|
+
this.setPopper = (strategy) => {
|
|
8105
7921
|
// Create popperjs tooltip
|
|
8106
7922
|
this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {
|
|
8107
7923
|
placement: this.placement,
|
|
@@ -8182,13 +7998,12 @@ const MgTooltip = class {
|
|
|
8182
7998
|
*/
|
|
8183
7999
|
this.setAriaDescribedby = (element) => {
|
|
8184
8000
|
// Set aria-describedby
|
|
8185
|
-
|
|
8186
|
-
if (ariaDescribedby === null) {
|
|
8001
|
+
if (!element.hasAttribute('aria-describedby')) {
|
|
8187
8002
|
this.tooltipedElement.setAttribute('aria-describedby', this.identifier);
|
|
8188
8003
|
}
|
|
8189
8004
|
else {
|
|
8190
8005
|
// We ensure to have uniq ids
|
|
8191
|
-
element.setAttribute('aria-describedby', `${[...new Set([...
|
|
8006
|
+
element.setAttribute('aria-describedby', `${[...new Set([...element.getAttribute('aria-describedby').split(' '), this.identifier])].join(' ')}`);
|
|
8192
8007
|
}
|
|
8193
8008
|
};
|
|
8194
8009
|
this.identifier = ze('mg-tooltip');
|
|
@@ -8202,8 +8017,8 @@ const MgTooltip = class {
|
|
|
8202
8017
|
this.renderTooltipContent();
|
|
8203
8018
|
}
|
|
8204
8019
|
watchMessage(newValue) {
|
|
8205
|
-
if (!
|
|
8206
|
-
throw new Error(
|
|
8020
|
+
if (!Qe(newValue)) {
|
|
8021
|
+
throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${Ze(newValue)}.`);
|
|
8207
8022
|
}
|
|
8208
8023
|
this.mgTooltipContent.message = newValue;
|
|
8209
8024
|
}
|
|
@@ -8219,7 +8034,7 @@ const MgTooltip = class {
|
|
|
8219
8034
|
if (this.hasCustomTabIndex) {
|
|
8220
8035
|
if (newValue)
|
|
8221
8036
|
this.tooltipedElement.removeAttribute('tabindex');
|
|
8222
|
-
else if (this.tooltipedElement.
|
|
8037
|
+
else if (!this.tooltipedElement.hasAttribute('tabindex'))
|
|
8223
8038
|
this.tooltipedElement.setAttribute('tabindex', '0');
|
|
8224
8039
|
}
|
|
8225
8040
|
}
|
|
@@ -8227,7 +8042,7 @@ const MgTooltip = class {
|
|
|
8227
8042
|
* Render tooltip content element and init listeners
|
|
8228
8043
|
*/
|
|
8229
8044
|
renderTooltipContent() {
|
|
8230
|
-
if (this.mgTooltipContent) {
|
|
8045
|
+
if (this.mgTooltipContent !== undefined) {
|
|
8231
8046
|
this.mgTooltipContent.setAttribute('id', this.identifier);
|
|
8232
8047
|
}
|
|
8233
8048
|
else {
|
|
@@ -8257,7 +8072,7 @@ const MgTooltip = class {
|
|
|
8257
8072
|
*/
|
|
8258
8073
|
componentWillLoad() {
|
|
8259
8074
|
// Get windows to attach events
|
|
8260
|
-
this.windows =
|
|
8075
|
+
this.windows = Ke(window);
|
|
8261
8076
|
// Get tooltip element
|
|
8262
8077
|
this.renderTooltipContent();
|
|
8263
8078
|
//validate properties
|
|
@@ -8275,7 +8090,7 @@ const MgTooltip = class {
|
|
|
8275
8090
|
// get slotted element wich is not the tooltip
|
|
8276
8091
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
8277
8092
|
// Get interactive element
|
|
8278
|
-
const interactiveElement = slotElement.matches(
|
|
8093
|
+
const interactiveElement = slotElement.matches(Je) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(Je);
|
|
8279
8094
|
this.setTooltipedElement(interactiveElement || slotElement);
|
|
8280
8095
|
// Check if slotted element is a disabled mg-button
|
|
8281
8096
|
// In this case we wrap the mg-button into a div to enable the tooltip
|
|
@@ -8284,7 +8099,7 @@ const MgTooltip = class {
|
|
|
8284
8099
|
this.setMgButtonWrapper(slotElement);
|
|
8285
8100
|
}
|
|
8286
8101
|
// Add tabindex to slotted element if we can't find any interactive element
|
|
8287
|
-
if (!this.disabled &&
|
|
8102
|
+
if (!this.disabled && [undefined, null].includes(interactiveElement)) {
|
|
8288
8103
|
this.hasCustomTabIndex = true;
|
|
8289
8104
|
slotElement.tabIndex = 0;
|
|
8290
8105
|
// Add role on non-interactive element to work with "aria-describedby" for screen readers
|
|
@@ -8293,7 +8108,7 @@ const MgTooltip = class {
|
|
|
8293
8108
|
// apply a11y aria
|
|
8294
8109
|
this.setAriaDescribedby(slotElement);
|
|
8295
8110
|
// set Tooltip
|
|
8296
|
-
this.setPopper();
|
|
8111
|
+
this.setPopper(this.element.closest('mg-popover') ? 'absolute' : 'fixed');
|
|
8297
8112
|
// add document keyboard handler
|
|
8298
8113
|
document.addEventListener('keydown', this.handlePressEscape);
|
|
8299
8114
|
// check props
|
|
@@ -8305,12 +8120,22 @@ const MgTooltip = class {
|
|
|
8305
8120
|
componentDidUpdate() {
|
|
8306
8121
|
this.popper.update();
|
|
8307
8122
|
}
|
|
8123
|
+
/**
|
|
8124
|
+
* remove listeners
|
|
8125
|
+
*/
|
|
8126
|
+
disconnectedCallback() {
|
|
8127
|
+
document.removeEventListener('keydown', this.handlePressEscape);
|
|
8128
|
+
this.windows.forEach((localWindow) => {
|
|
8129
|
+
localWindow.removeEventListener('click', this.handleClickOutside, false);
|
|
8130
|
+
localWindow.removeEventListener('keydown', this.handlePressEscape, false);
|
|
8131
|
+
});
|
|
8132
|
+
}
|
|
8308
8133
|
/**
|
|
8309
8134
|
* Render
|
|
8310
8135
|
* @returns HTML Element
|
|
8311
8136
|
*/
|
|
8312
8137
|
render() {
|
|
8313
|
-
return (h(Host, { key: '
|
|
8138
|
+
return (h(Host, { key: '0a3444cfd3b00efaf216995c39775620e5aeb2fe' }, h("slot", { key: '7c34a4814e2705d5470e61866514450f6238008c' }), h("slot", { key: '0df1ade290b5e84d617b9b628d733e823e2c34de', name: "content" })));
|
|
8314
8139
|
}
|
|
8315
8140
|
get element() { return getElement(this); }
|
|
8316
8141
|
static get watchers() { return {
|
|
@@ -8322,7 +8147,7 @@ const MgTooltip = class {
|
|
|
8322
8147
|
};
|
|
8323
8148
|
MgTooltip.style = MgTooltipStyle0;
|
|
8324
8149
|
|
|
8325
|
-
const mgTooltipContentCss = ":host{z-index:1000;display:none;max-width:
|
|
8150
|
+
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-popper-placement^=top])>::slotted([slot=arrow]){bottom:calc(-1*var(--mg-b-size-4))}:host([data-popper-placement^=bottom])>::slotted([slot=arrow]){top:calc(-1*var(--mg-b-size-4))}:host([data-popper-placement^=left])>::slotted([slot=arrow]){right:calc(-1*var(--mg-b-size-4))}:host([data-popper-placement^=right])>::slotted([slot=arrow]){left:calc(-1*var(--mg-b-size-4))}";
|
|
8326
8151
|
const MgTooltipContentStyle0 = mgTooltipContentCss;
|
|
8327
8152
|
|
|
8328
8153
|
const MgTooltipContent = class {
|
|
@@ -8338,7 +8163,7 @@ const MgTooltipContent = class {
|
|
|
8338
8163
|
* @returns HTML Element
|
|
8339
8164
|
*/
|
|
8340
8165
|
render() {
|
|
8341
|
-
return (h(Host, { key: '
|
|
8166
|
+
return (h(Host, { key: '2f94fdb8d48e172cc1d1f069ce12d1508e5e7896', role: "tooltip" }, h("span", { key: 'f075e8392eba2cd1256df7e89b7f20c832dc02e8', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: '5f840ac9a4c9c422dc6e012dd8fbb0637232bd5f', name: "arrow" })));
|
|
8342
8167
|
}
|
|
8343
8168
|
};
|
|
8344
8169
|
MgTooltipContent.style = MgTooltipContentStyle0;
|