@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
|
@@ -2,46 +2,36 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
6
|
-
const index$1 = require('./index-
|
|
5
|
+
const index = require('./index-08ee93bf.js');
|
|
6
|
+
const index$1 = require('./index-d57c96a9.js');
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
|
-
* Available menu
|
|
9
|
+
* Available menu item status values
|
|
10
10
|
*/
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
* Available menu item status
|
|
18
|
-
*/
|
|
19
|
-
var Status$1;
|
|
20
|
-
(function (Status) {
|
|
21
|
-
Status["VISIBLE"] = "visible";
|
|
22
|
-
Status["HIDDEN"] = "hidden";
|
|
23
|
-
Status["DISABLED"] = "disabled";
|
|
24
|
-
Status["ACTIVE"] = "active";
|
|
25
|
-
})(Status$1 || (Status$1 = {}));
|
|
11
|
+
const Status$1 = {
|
|
12
|
+
VISIBLE: 'visible',
|
|
13
|
+
HIDDEN: 'hidden',
|
|
14
|
+
DISABLED: 'disabled',
|
|
15
|
+
ACTIVE: 'active',
|
|
16
|
+
};
|
|
26
17
|
/**
|
|
27
18
|
* List of all possibles target
|
|
28
19
|
*/
|
|
29
20
|
const targets = ['_blank', '_self', '_parent', '_top'];
|
|
30
21
|
|
|
31
22
|
/**
|
|
32
|
-
* Menu direction
|
|
23
|
+
* Menu direction values
|
|
33
24
|
*/
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
})(Direction || (Direction = {}));
|
|
25
|
+
const Direction = {
|
|
26
|
+
VERTICAL: 'vertical',
|
|
27
|
+
HORIZONTAL: 'horizontal',
|
|
28
|
+
};
|
|
39
29
|
/**
|
|
40
30
|
* List of all possibles sizes
|
|
41
31
|
*/
|
|
42
|
-
const sizes$2 = ['
|
|
32
|
+
const sizes$2 = ['medium', 'large', 'xlarge'];
|
|
43
33
|
|
|
44
|
-
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:
|
|
34
|
+
const mgActionMoreCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{--mg-c-popover-padding-vertical:var(--mg-b-size-8);--mg-c-popover-padding-horizontal:0;--mg-c-popover-max-width:unset}.mg-c-action-more__divider{--mg-c-divider-spacing-vertical:var(--mg-b-size-4)}.mg-c-action-more__chevron{transition:200ms}.mg-c-action-more__chevron--rotate.mg-c-action-more__chevron{transform:rotate(180deg)}";
|
|
45
35
|
const MgActionMoreStyle0 = mgActionMoreCss;
|
|
46
36
|
|
|
47
37
|
/**
|
|
@@ -51,8 +41,15 @@ const MgActionMoreStyle0 = mgActionMoreCss;
|
|
|
51
41
|
*/
|
|
52
42
|
const isMgActionMoreItems = (prop) => {
|
|
53
43
|
const items = prop;
|
|
54
|
-
return typeof items === 'object' &&
|
|
44
|
+
return (typeof items === 'object' &&
|
|
45
|
+
items.every(item => (typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function') || isMgActionMoreDivider(item)));
|
|
55
46
|
};
|
|
47
|
+
/**
|
|
48
|
+
* MgActionMoreDividerType type guard
|
|
49
|
+
* @param item - component item
|
|
50
|
+
* @returns return true if type is valid
|
|
51
|
+
*/
|
|
52
|
+
const isMgActionMoreDivider = (item) => typeof item === 'object' && item.isDivider;
|
|
56
53
|
/**
|
|
57
54
|
* MgActionMore['button'] type guard
|
|
58
55
|
* @param prop - commponent button prop
|
|
@@ -119,20 +116,23 @@ const MgActionMore = class {
|
|
|
119
116
|
}
|
|
120
117
|
validateItems(newValue) {
|
|
121
118
|
if (!isMgActionMoreItems(newValue)) {
|
|
122
|
-
throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType.`);
|
|
119
|
+
throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${index$1.Ze(newValue)}.`);
|
|
120
|
+
}
|
|
121
|
+
else if (isMgActionMoreItems(newValue) && newValue.length > 0 && (isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {
|
|
122
|
+
throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${index$1.Ze(newValue)}.`);
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
125
|
validateIcon(newValue) {
|
|
126
126
|
if (newValue && !isMgActionMoreIcon(newValue)) {
|
|
127
|
-
throw new Error(`<${this.name}> prop icon must match MgActionMoreIconType.`);
|
|
127
|
+
throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${index$1.Ze(newValue)}.`);
|
|
128
128
|
}
|
|
129
|
-
else if (
|
|
129
|
+
else if ((newValue === null || newValue === void 0 ? void 0 : newValue.icon) === undefined && Boolean(this.button.isIcon)) {
|
|
130
130
|
this.icon = { icon: 'ellipsis' };
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
133
|
validateButton(newValue) {
|
|
134
134
|
if (newValue && !isMgActionMoreButton(newValue)) {
|
|
135
|
-
throw new Error(`<${this.name}> prop button must match MgActionMoreButtonType.`);
|
|
135
|
+
throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${index$1.Ze(newValue)}.`);
|
|
136
136
|
}
|
|
137
137
|
}
|
|
138
138
|
validateDisplayChevron(newValue) {
|
|
@@ -166,11 +166,11 @@ const MgActionMore = class {
|
|
|
166
166
|
[`${this.classBase}__chevron--rotate`]: this.expanded === true,
|
|
167
167
|
} }, index.h("mg-icon", { icon: "chevron-down", size: "small" })));
|
|
168
168
|
}
|
|
169
|
-
return (index.h(index.Host, { key: '
|
|
170
|
-
var _a;
|
|
171
|
-
return (
|
|
172
|
-
|
|
173
|
-
|
|
169
|
+
return (index.h(index.Host, { key: 'ad081e085753770cfdf1d922d7a2dd574e31a632', "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { key: 'abb29bf36c86f205dd3893709473523f6263506c', class: this.classBase }, index.h("mg-popover", { key: '5604deaf66f1316aaccf40b90945982f840081d2', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, index.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 && index.h("mg-icon", Object.assign({ key: '18f31a4008af5dc74d1306dc9ebbbe566aefa0b7' }, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { key: 'a3b9d6de82629fbb1253eb0338e3186f43bc7583', slot: "content" }, index.h("mg-menu", { key: '67793ea91ade7c31ed4aa55a507c86bf221bd094', direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
|
|
170
|
+
var _a, _b;
|
|
171
|
+
return isMgActionMoreDivider(item) ? (index.h("mg-divider", { class: "mg-c-action-more__divider", key: "divider" })) : (index.h("mg-menu-item", { key: item.label, status: item.status || Status$1.VISIBLE, target: item.target, href: item.href,
|
|
172
|
+
// eslint-disable-next-line react/jsx-no-bind
|
|
173
|
+
onClick: e => this.handleItemClick(e, item.mouseEventHandler) }, ((_a = item.icon) === null || _a === void 0 ? void 0 : _a.icon) && index.h("mg-icon", { icon: item.icon.icon, variant: item.icon.variant, variantStyle: item.icon.variantStyle, slot: "image" }), index.h("span", { slot: "label" }, item.label), ((_b = item.badge) === null || _b === void 0 ? void 0 : _b.label) && index.h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" })));
|
|
174
174
|
})))))));
|
|
175
175
|
}
|
|
176
176
|
get element() { return index.getElement(this); }
|
|
@@ -186,9 +186,9 @@ MgActionMore.style = MgActionMoreStyle0;
|
|
|
186
186
|
/**
|
|
187
187
|
* List of all possibles variants
|
|
188
188
|
*/
|
|
189
|
-
const variants$
|
|
189
|
+
const variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
|
|
190
190
|
|
|
191
|
-
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
|
|
191
|
+
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}";
|
|
192
192
|
const MgBadgeStyle0 = mgBadgeCss;
|
|
193
193
|
|
|
194
194
|
const MgBadge = class {
|
|
@@ -201,23 +201,23 @@ const MgBadge = class {
|
|
|
201
201
|
this.classOutline = `mg-c-badge--outline`;
|
|
202
202
|
this.value = undefined;
|
|
203
203
|
this.label = undefined;
|
|
204
|
-
this.variant = variants$
|
|
204
|
+
this.variant = variants$4[0];
|
|
205
205
|
this.outline = undefined;
|
|
206
206
|
this.classCollection = new index$1.Ie(['mg-c-badge']);
|
|
207
207
|
}
|
|
208
208
|
validateValue(newValue) {
|
|
209
|
-
if (/^
|
|
210
|
-
throw new Error(
|
|
209
|
+
if (/^[^A-Z]+$/i.exec(`${newValue}`) === null) {
|
|
210
|
+
throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${index$1.Ze(newValue)}.`);
|
|
211
211
|
}
|
|
212
212
|
}
|
|
213
213
|
validateLabel(newValue) {
|
|
214
|
-
if (!index$1.
|
|
215
|
-
throw new Error(
|
|
214
|
+
if (!index$1.Qe(newValue)) {
|
|
215
|
+
throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${index$1.Ze(newValue)}.`);
|
|
216
216
|
}
|
|
217
217
|
}
|
|
218
218
|
validateVariant(newValue, oldValue) {
|
|
219
|
-
if (!variants$
|
|
220
|
-
throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$
|
|
219
|
+
if (!variants$4.includes(newValue)) {
|
|
220
|
+
throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
221
221
|
}
|
|
222
222
|
else {
|
|
223
223
|
if (oldValue !== undefined) {
|
|
@@ -246,7 +246,7 @@ const MgBadge = class {
|
|
|
246
246
|
* @returns HTML Element
|
|
247
247
|
*/
|
|
248
248
|
render() {
|
|
249
|
-
return (index.h("span", { key: '
|
|
249
|
+
return (index.h("span", { key: 'db20118c3cfbc79ca65bcbbda1029857211615b2', class: this.classCollection.join() }, index.h("span", { key: '1898f1b56935c4acdab79f8c794025009f2d943c', class: "mg-c-badge__value" }, this.value), index.h("span", { key: '2ca8814b685441f11c8a1804c1e98d3e58f26d84', class: "mg-u-visually-hidden" }, this.label)));
|
|
250
250
|
}
|
|
251
251
|
static get watchers() { return {
|
|
252
252
|
"value": ["validateValue"],
|
|
@@ -260,9 +260,9 @@ MgBadge.style = MgBadgeStyle0;
|
|
|
260
260
|
/**
|
|
261
261
|
* List of all possibles variants
|
|
262
262
|
*/
|
|
263
|
-
const variants$
|
|
263
|
+
const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
|
|
264
264
|
|
|
265
|
-
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}";
|
|
265
|
+
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}";
|
|
266
266
|
const MgButtonStyle0 = mgButtonCss;
|
|
267
267
|
|
|
268
268
|
const MgButton = class {
|
|
@@ -312,8 +312,7 @@ const MgButton = class {
|
|
|
312
312
|
this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
|
|
313
313
|
}
|
|
314
314
|
};
|
|
315
|
-
this.variant = variants$
|
|
316
|
-
this.identifier = undefined;
|
|
315
|
+
this.variant = variants$3[0];
|
|
317
316
|
this.label = undefined;
|
|
318
317
|
this.type = undefined;
|
|
319
318
|
this.fullWidth = false;
|
|
@@ -325,8 +324,8 @@ const MgButton = class {
|
|
|
325
324
|
this.classCollection = new index$1.Ie(['mg-c-button']);
|
|
326
325
|
}
|
|
327
326
|
validateVariant(newValue, oldValue) {
|
|
328
|
-
if (!variants$
|
|
329
|
-
throw new Error(`<mg-button> prop "variant" must be one of: ${variants$
|
|
327
|
+
if (!variants$3.includes(newValue)) {
|
|
328
|
+
throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
330
329
|
}
|
|
331
330
|
else {
|
|
332
331
|
if (oldValue !== undefined) {
|
|
@@ -381,7 +380,7 @@ const MgButton = class {
|
|
|
381
380
|
this.validateFullWidth(this.fullWidth);
|
|
382
381
|
if (this.isIcon) {
|
|
383
382
|
this.classCollection.add(`mg-c-button--icon`);
|
|
384
|
-
if (!index$1.
|
|
383
|
+
if (!index$1.Qe(this.label)) {
|
|
385
384
|
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
386
385
|
}
|
|
387
386
|
}
|
|
@@ -393,11 +392,11 @@ const MgButton = class {
|
|
|
393
392
|
* Add listners
|
|
394
393
|
*/
|
|
395
394
|
componentDidLoad() {
|
|
396
|
-
index$1.
|
|
395
|
+
index$1.Ve(() => {
|
|
397
396
|
var _a;
|
|
398
397
|
const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
|
|
399
398
|
// submit buttons should trigger form submition;
|
|
400
|
-
if (
|
|
399
|
+
if (closestForm && ['submit', undefined].includes(this.type)) {
|
|
401
400
|
this.element.addEventListener('click', () => {
|
|
402
401
|
closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
|
|
403
402
|
});
|
|
@@ -410,7 +409,7 @@ const MgButton = class {
|
|
|
410
409
|
*/
|
|
411
410
|
render() {
|
|
412
411
|
var _a;
|
|
413
|
-
return (index.h(index.Host, { key: '
|
|
412
|
+
return (index.h(index.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 }, index.h("div", { key: '464d14800685dd56d7dfc1ca2928274daf5118c6', class: this.classCollection.join() }, this.loading && index.h("mg-icon", { key: 'af20cf2a34003698058cc1e26e24b20d9444835c', icon: "loader", spin: true }), index.h("div", { key: '50378b929ad1357c9d03d957dc8eeaac24f7c589', class: "mg-c-button__content" }, index.h("slot", { key: '41b511009e31064a911b7855a5c71a1104442525' })))));
|
|
414
413
|
}
|
|
415
414
|
get element() { return index.getElement(this); }
|
|
416
415
|
static get watchers() { return {
|
|
@@ -422,84 +421,27 @@ const MgButton = class {
|
|
|
422
421
|
};
|
|
423
422
|
MgButton.style = MgButtonStyle0;
|
|
424
423
|
|
|
425
|
-
|
|
426
|
-
* List available variants
|
|
427
|
-
*/
|
|
428
|
-
const variants$3 = ['info', 'warning', 'success', 'danger', 'app'];
|
|
429
|
-
/**
|
|
430
|
-
* List available variant styles
|
|
431
|
-
*/
|
|
432
|
-
const variantStyles$1 = ['bar-left', 'fill'];
|
|
433
|
-
|
|
434
|
-
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%}";
|
|
424
|
+
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}";
|
|
435
425
|
const MgCardStyle0 = mgCardCss;
|
|
436
426
|
|
|
437
427
|
const MgCard = class {
|
|
438
428
|
constructor(hostRef) {
|
|
439
429
|
index.registerInstance(this, hostRef);
|
|
440
|
-
/*************
|
|
441
|
-
* Private *
|
|
442
|
-
*************/
|
|
443
|
-
this.name = 'mg-card';
|
|
444
|
-
this.classBase = 'mg-c-card';
|
|
445
|
-
/**
|
|
446
|
-
* Method to set default varianStyle props
|
|
447
|
-
* needeed has stencil doesn't know that props is mutated when updated in prop watcher
|
|
448
|
-
*/
|
|
449
|
-
this.setDefaultVariantStyle = () => {
|
|
450
|
-
if (this.variantStyle === undefined)
|
|
451
|
-
this.variantStyle = 'bar-left';
|
|
452
|
-
};
|
|
453
|
-
this.variant = undefined;
|
|
454
|
-
this.variantStyle = undefined;
|
|
455
|
-
this.classCollection = new index$1.Ie([this.classBase]);
|
|
456
|
-
}
|
|
457
|
-
validateVariant(newValue, oldValue) {
|
|
458
|
-
if (newValue && !variants$3.includes(newValue))
|
|
459
|
-
throw new Error(`<${this.name}> prop "variant" must match VariantType type.`);
|
|
460
|
-
if (newValue) {
|
|
461
|
-
this.setDefaultVariantStyle();
|
|
462
|
-
this.classCollection.add(`${this.classBase}--${newValue}`);
|
|
463
|
-
}
|
|
464
|
-
if (oldValue)
|
|
465
|
-
this.classCollection.delete(`${this.classBase}--${oldValue}`);
|
|
466
|
-
}
|
|
467
|
-
validateVariantStyle(newValue, oldValue) {
|
|
468
|
-
if (newValue && !variantStyles$1.includes(newValue))
|
|
469
|
-
throw new Error(`<${this.name}> prop "variantStyle" must match VariantStyleType type.`);
|
|
470
|
-
else if (Boolean(newValue) && !variants$3.includes(this.variant))
|
|
471
|
-
throw new Error(`<${this.name}> prop "variantStyle" must be paired with ${JSON.stringify(variants$3)} "variant" prop.`);
|
|
472
|
-
if (newValue)
|
|
473
|
-
this.classCollection.add(`${this.classBase}--${newValue}`);
|
|
474
|
-
if (oldValue)
|
|
475
|
-
this.classCollection.delete(`${this.classBase}--${oldValue}`);
|
|
476
430
|
}
|
|
477
431
|
/*************
|
|
478
432
|
* Lifecycle *
|
|
479
433
|
*************/
|
|
480
|
-
/**
|
|
481
|
-
* Check if props are well configured on init
|
|
482
|
-
*/
|
|
483
|
-
componentWillLoad() {
|
|
484
|
-
this.validateVariant(this.variant);
|
|
485
|
-
this.validateVariantStyle(this.variantStyle);
|
|
486
|
-
}
|
|
487
434
|
/**
|
|
488
435
|
* Render
|
|
489
436
|
* @returns HTML Element
|
|
490
437
|
*/
|
|
491
438
|
render() {
|
|
492
|
-
|
|
493
|
-
return (index.h("div", { key: 'b786a9ff3b706dcb24f6b3218feef97e284e2b9a', class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && index.h("span", { key: '11a3b421c49864667832919e6d2cbe9ea19f9344', class: "mg-c-card__bar" }), index.h("slot", { key: '7421932644500c619d34cbe003a0f0bb50b612a7' })));
|
|
439
|
+
return (index.h("div", { key: 'b8de627bd3018342b2e33f62e1779de8c53fa61e', class: "mg-c-card" }, index.h("slot", { key: '210e9b12485a345ab50d4ddb85d091cde58551a8' })));
|
|
494
440
|
}
|
|
495
|
-
static get watchers() { return {
|
|
496
|
-
"variant": ["validateVariant"],
|
|
497
|
-
"variantStyle": ["validateVariantStyle"]
|
|
498
|
-
}; }
|
|
499
441
|
};
|
|
500
442
|
MgCard.style = MgCardStyle0;
|
|
501
443
|
|
|
502
|
-
const mgCharacterLeftCss = "mg-character-left.sc-mg-character-left{display:block}";
|
|
444
|
+
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}";
|
|
503
445
|
const MgCharacterLeftStyle0 = mgCharacterLeftCss;
|
|
504
446
|
|
|
505
447
|
const MgCharacterLeft = class {
|
|
@@ -511,7 +453,7 @@ const MgCharacterLeft = class {
|
|
|
511
453
|
}
|
|
512
454
|
validateMaxlength(newValue) {
|
|
513
455
|
if (typeof newValue !== 'number') {
|
|
514
|
-
throw new Error(
|
|
456
|
+
throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${index$1.Ze(newValue)}.`);
|
|
515
457
|
}
|
|
516
458
|
}
|
|
517
459
|
/*************
|
|
@@ -529,7 +471,7 @@ const MgCharacterLeft = class {
|
|
|
529
471
|
* @returns HTML Element
|
|
530
472
|
*/
|
|
531
473
|
render() {
|
|
532
|
-
return (index.h("span", { key: '
|
|
474
|
+
return (index.h("span", { key: '8702ae39ff70f27de2ffc6988f13836a4b43f169', id: this.identifier, "aria-live": "polite" }, index.h("span", { key: '0e75b76afb2cf700fa5fff1d565b4236c3d664a1', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), index.h("span", { key: 'f4c4a7b46c0d0879d7ee046f2ea33a686cd91adb', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
|
|
533
475
|
}
|
|
534
476
|
get element() { return index.getElement(this); }
|
|
535
477
|
static get watchers() { return {
|
|
@@ -538,7 +480,7 @@ const MgCharacterLeft = class {
|
|
|
538
480
|
};
|
|
539
481
|
MgCharacterLeft.style = MgCharacterLeftStyle0;
|
|
540
482
|
|
|
541
|
-
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:
|
|
483
|
+
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}}";
|
|
542
484
|
const MgDetailsStyle0 = mgDetailsCss;
|
|
543
485
|
|
|
544
486
|
const MgDetails = class {
|
|
@@ -557,8 +499,8 @@ const MgDetails = class {
|
|
|
557
499
|
this.expanded = false;
|
|
558
500
|
}
|
|
559
501
|
validateTitles(newValue) {
|
|
560
|
-
if (!index$1.
|
|
561
|
-
throw new Error(
|
|
502
|
+
if (!index$1.Qe(newValue)) {
|
|
503
|
+
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}'".`);
|
|
562
504
|
}
|
|
563
505
|
}
|
|
564
506
|
handleExpanded(newValue) {
|
|
@@ -579,7 +521,7 @@ const MgDetails = class {
|
|
|
579
521
|
* @returns HTML Element
|
|
580
522
|
*/
|
|
581
523
|
render() {
|
|
582
|
-
return (index.h("details", { key: '
|
|
524
|
+
return (index.h("details", { key: 'd9bd05ca12f405dd25dda244ec0260691d340223', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, index.h("summary", { key: '2b7893cc0c54d94981d6500776eb22723e1fb5f2' }, index.h("slot", { key: '714054624ffc1b6b7261edd166bfd16a256e06ce', name: "summary" }), index.h("span", { key: 'a257d98ed1e8243eae76d259b09bf7fabbfa66e0', class: "mg-c-details__toggle" }, index.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 } }), index.h("span", { key: 'bc0760888996b7cdf92efe7d7db9efc80acc5d61', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { key: '9a8974cc18e8d9d0f7a26d9ddd168e4c2ca08bcb', class: "mg-c-details__details" }, index.h("slot", { key: 'daed5ab23c0394f3342fb7f15e9a631840a19a75', name: "details" }))));
|
|
583
525
|
}
|
|
584
526
|
static get watchers() { return {
|
|
585
527
|
"toggleClosed": ["validateTitles"],
|
|
@@ -589,22 +531,22 @@ const MgDetails = class {
|
|
|
589
531
|
};
|
|
590
532
|
MgDetails.style = MgDetailsStyle0;
|
|
591
533
|
|
|
592
|
-
const mgDividerCss = ".mg-c-divider{width:
|
|
534
|
+
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%}";
|
|
593
535
|
const MgDividerStyle0 = mgDividerCss;
|
|
594
536
|
|
|
595
537
|
const MgDivider = class {
|
|
596
538
|
constructor(hostRef) {
|
|
597
539
|
index.registerInstance(this, hostRef);
|
|
598
|
-
this.
|
|
540
|
+
this.fullWidth = false;
|
|
599
541
|
}
|
|
600
542
|
/**
|
|
601
543
|
* Render
|
|
602
544
|
* @returns HTML Element
|
|
603
545
|
*/
|
|
604
546
|
render() {
|
|
605
|
-
return (index.h("div", { key: '
|
|
547
|
+
return (index.h("div", { key: 'b7d74c11f15700cbffa553bf4d688ad291473087', class: {
|
|
606
548
|
'mg-c-divider': true,
|
|
607
|
-
'mg-c-divider--full': this.
|
|
549
|
+
'mg-c-divider--full-width': this.fullWidth,
|
|
608
550
|
} }));
|
|
609
551
|
}
|
|
610
552
|
};
|
|
@@ -619,7 +561,7 @@ const roles = ['form', 'search', 'none', 'presentation'];
|
|
|
619
561
|
*/
|
|
620
562
|
const requiredMessageStatus = ['default', 'hide'];
|
|
621
563
|
|
|
622
|
-
const mgFormCss = ".mg-u-form-legacy{--mg-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:
|
|
564
|
+
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)}";
|
|
623
565
|
const MgFormStyle0 = mgFormCss;
|
|
624
566
|
|
|
625
567
|
const MgForm = class {
|
|
@@ -729,12 +671,12 @@ const MgForm = class {
|
|
|
729
671
|
}
|
|
730
672
|
validateRequiredMessage(newValue) {
|
|
731
673
|
if (newValue && !requiredMessageStatus.includes(newValue)) {
|
|
732
|
-
throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}.`);
|
|
674
|
+
throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
733
675
|
}
|
|
734
676
|
}
|
|
735
677
|
validateAriaRole(newValue) {
|
|
736
678
|
if (newValue && !roles.includes(newValue)) {
|
|
737
|
-
throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}.`);
|
|
679
|
+
throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
738
680
|
}
|
|
739
681
|
}
|
|
740
682
|
handlelabelOnTop(newValue) {
|
|
@@ -806,7 +748,7 @@ const MgForm = class {
|
|
|
806
748
|
* @returns HTML Element
|
|
807
749
|
*/
|
|
808
750
|
render() {
|
|
809
|
-
return (index.h("form", { key: '
|
|
751
|
+
return (index.h("form", { key: '6c3071735d3ec06f215600c682455a8927f19cab', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && index.h("p", { key: 'e8914a58d0b9c10d3510fe8f3001b3f84afbd732', innerHTML: this.requiredMessageText }), index.h("slot", { key: 'abf559e3999042712b7fa5cbe1c9d8143cd21e70' }), !this.readonly && !this.disabled && index.h("slot", { key: '0a83d6babfa0252a1ffed634737ce012d8304f2d', name: "actions" })));
|
|
810
752
|
}
|
|
811
753
|
get element() { return index.getElement(this); }
|
|
812
754
|
static get watchers() { return {
|
|
@@ -822,7 +764,7 @@ MgForm.style = MgFormStyle0;
|
|
|
822
764
|
/**
|
|
823
765
|
* List of all possibles sizes
|
|
824
766
|
*/
|
|
825
|
-
const sizes$1 = ['small', '
|
|
767
|
+
const sizes$1 = ['small', 'medium', 'large', 'xlarge', 'xxlarge'];
|
|
826
768
|
/**
|
|
827
769
|
* List of all possibles variants
|
|
828
770
|
*/
|
|
@@ -830,11 +772,11 @@ const variants$2 = ['success', 'warning', 'danger', 'info', 'app'];
|
|
|
830
772
|
/**
|
|
831
773
|
* List of all possibles variants styles
|
|
832
774
|
*/
|
|
833
|
-
const variantStyles = ['icon', 'background', 'full'];
|
|
775
|
+
const variantStyles$1 = ['icon', 'background', 'full'];
|
|
834
776
|
|
|
835
|
-
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>' };
|
|
777
|
+
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>' };
|
|
836
778
|
|
|
837
|
-
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-
|
|
779
|
+
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)}}";
|
|
838
780
|
const MgIconStyle0 = mgIconCss;
|
|
839
781
|
|
|
840
782
|
const MgIcon = class {
|
|
@@ -861,7 +803,7 @@ const MgIcon = class {
|
|
|
861
803
|
this.svg.setAttribute('class', this.classCollection.join());
|
|
862
804
|
};
|
|
863
805
|
this.icon = undefined;
|
|
864
|
-
this.size = '
|
|
806
|
+
this.size = 'medium';
|
|
865
807
|
this.variant = undefined;
|
|
866
808
|
this.variantStyle = undefined;
|
|
867
809
|
this.spin = false;
|
|
@@ -869,7 +811,7 @@ const MgIcon = class {
|
|
|
869
811
|
}
|
|
870
812
|
validateIcon(newValue, oldValue) {
|
|
871
813
|
if (!Object.keys(icons).includes(newValue))
|
|
872
|
-
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}
|
|
814
|
+
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
873
815
|
else {
|
|
874
816
|
if (oldValue !== undefined)
|
|
875
817
|
this.classCollection.delete(`mg-c-icon--${oldValue}`);
|
|
@@ -879,7 +821,7 @@ const MgIcon = class {
|
|
|
879
821
|
}
|
|
880
822
|
validateSize(newValue, oldValue) {
|
|
881
823
|
if (!sizes$1.includes(newValue))
|
|
882
|
-
throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$1.join(', ')}
|
|
824
|
+
throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$1.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
883
825
|
else {
|
|
884
826
|
if (oldValue !== undefined)
|
|
885
827
|
this.classCollection.delete(`mg-c-icon--size-${oldValue}`);
|
|
@@ -887,9 +829,9 @@ const MgIcon = class {
|
|
|
887
829
|
}
|
|
888
830
|
}
|
|
889
831
|
validateVariant(newValue, oldValue) {
|
|
890
|
-
if (newValue) {
|
|
832
|
+
if (newValue !== undefined) {
|
|
891
833
|
if (!variants$2.includes(newValue))
|
|
892
|
-
throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}
|
|
834
|
+
throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
893
835
|
else {
|
|
894
836
|
this.setDefaultVariantStyle();
|
|
895
837
|
if (oldValue !== undefined)
|
|
@@ -899,9 +841,9 @@ const MgIcon = class {
|
|
|
899
841
|
}
|
|
900
842
|
}
|
|
901
843
|
validateVariantStyle(newValue, oldValue) {
|
|
902
|
-
if (newValue) {
|
|
903
|
-
if (!variantStyles.includes(newValue))
|
|
904
|
-
throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}
|
|
844
|
+
if (newValue !== undefined) {
|
|
845
|
+
if (!variantStyles$1.includes(newValue))
|
|
846
|
+
throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
905
847
|
else {
|
|
906
848
|
if (oldValue !== undefined)
|
|
907
849
|
this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
|
|
@@ -946,13 +888,13 @@ const MgIcon = class {
|
|
|
946
888
|
};
|
|
947
889
|
MgIcon.style = MgIconStyle0;
|
|
948
890
|
|
|
949
|
-
const mgIllustratedMessageCss = ".mg-c-illustrated-message{display:flex;max-width:
|
|
891
|
+
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}";
|
|
950
892
|
const MgIllustratedMessageStyle0 = mgIllustratedMessageCss;
|
|
951
893
|
|
|
952
894
|
const MgIllustratedMessage = class {
|
|
953
895
|
constructor(hostRef) {
|
|
954
896
|
index.registerInstance(this, hostRef);
|
|
955
|
-
this.size = '
|
|
897
|
+
this.size = 'medium';
|
|
956
898
|
this.direction = 'vertical';
|
|
957
899
|
}
|
|
958
900
|
/*************
|
|
@@ -965,7 +907,7 @@ const MgIllustratedMessage = class {
|
|
|
965
907
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
966
908
|
const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
|
|
967
909
|
if (!index$1.Xe(this.element.querySelector('[slot="title"]'), headingTags)) {
|
|
968
|
-
throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}
|
|
910
|
+
throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}.`);
|
|
969
911
|
}
|
|
970
912
|
else if (slottedIllustrations.length !== 1) {
|
|
971
913
|
throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');
|
|
@@ -977,13 +919,13 @@ const MgIllustratedMessage = class {
|
|
|
977
919
|
* @returns HTML Element
|
|
978
920
|
*/
|
|
979
921
|
render() {
|
|
980
|
-
return (index.h("div", { key: '
|
|
922
|
+
return (index.h("div", { key: '475cdb177405fc41e5dde86d9a3884de5fb88bef', class: {
|
|
981
923
|
'mg-c-illustrated-message': true,
|
|
982
924
|
'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',
|
|
983
|
-
} }, index.h("div", { key: '
|
|
925
|
+
} }, index.h("div", { key: '0e007f09bcdcd85d50bd16ed37f9f4d399c14e28', class: {
|
|
984
926
|
'mg-c-illustrated-message__illustration': true,
|
|
985
927
|
'mg-c-illustrated-message__illustration--small': this.size === 'small',
|
|
986
|
-
} }, index.h("slot", { key: '
|
|
928
|
+
} }, index.h("slot", { key: '41190bb4bc5d13cecbf7b847c58af7975ffc0255', name: "illustration" })), index.h("div", { key: 'c338cba5ecac003b1642800441139e497f3c3769', class: "mg-c-illustrated-message__slots" }, index.h("div", { key: '804f5fc5a96d87d4e533d64eb80d275377dec0cf', class: "mg-c-illustrated-message__title" }, index.h("slot", { key: 'c5db8d1c61b0b85bc94905dc4b4bfe3ce44d48d1', name: "title" })), index.h("div", { key: 'e5be01c4e24a60a039a072946d12275bf46b681d', class: "mg-c-illustrated-message__details" }, index.h("slot", { key: '76eaf55622ed37c42f40ec832ec48ca6ab66e42c', name: "details" })))));
|
|
987
929
|
}
|
|
988
930
|
get element() { return index.getElement(this); }
|
|
989
931
|
};
|
|
@@ -997,21 +939,12 @@ const widths = [2, 4, 16, 'full'];
|
|
|
997
939
|
* Possible tootltip postions
|
|
998
940
|
*/
|
|
999
941
|
const tooltipPositions = ['input', 'label'];
|
|
1000
|
-
/**
|
|
1001
|
-
* Available handlers
|
|
1002
|
-
*/
|
|
1003
|
-
var Handler;
|
|
1004
|
-
(function (Handler) {
|
|
1005
|
-
Handler["BLUR"] = "blur";
|
|
1006
|
-
Handler["FOCUS"] = "focus";
|
|
1007
|
-
Handler["MOUSEENTER"] = "mouseenter";
|
|
1008
|
-
})(Handler || (Handler = {}));
|
|
1009
942
|
const classFieldset = 'mg-c-input--fieldset';
|
|
1010
943
|
const classDisabled = 'mg-c-input--disabled';
|
|
1011
944
|
const classReadonly = 'mg-c-input--readonly';
|
|
1012
945
|
const classVerticalList = 'mg-c-input--vertical-list';
|
|
1013
946
|
|
|
1014
|
-
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}}
|
|
947
|
+
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}}";
|
|
1015
948
|
const MgInputStyle0 = mgInputCss;
|
|
1016
949
|
|
|
1017
950
|
const MgInput = class {
|
|
@@ -1024,25 +957,6 @@ const MgInput = class {
|
|
|
1024
957
|
this.classInput = 'mg-c-input';
|
|
1025
958
|
this.classHasError = 'mg-c-input--has-error';
|
|
1026
959
|
this.classLabelOnTop = 'mg-c-input--label-on-top';
|
|
1027
|
-
/**
|
|
1028
|
-
* Get readonly values
|
|
1029
|
-
* @returns formated readonly value
|
|
1030
|
-
*/
|
|
1031
|
-
this.getReadonlyValues = () => {
|
|
1032
|
-
var _a;
|
|
1033
|
-
if (Array.isArray(this.readonlyValue) && !this.isVerticalList) {
|
|
1034
|
-
return this.readonlyValue.join(', ');
|
|
1035
|
-
}
|
|
1036
|
-
else if (Array.isArray(this.readonlyValue) && this.readonlyValue.length > 1) {
|
|
1037
|
-
return this.readonlyValue;
|
|
1038
|
-
}
|
|
1039
|
-
else if (Array.isArray(this.readonlyValue) && this.readonlyValue.length === 1) {
|
|
1040
|
-
return this.readonlyValue[0];
|
|
1041
|
-
}
|
|
1042
|
-
else {
|
|
1043
|
-
return ((_a = this.readonlyValue) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.readonlyValue : '';
|
|
1044
|
-
}
|
|
1045
|
-
};
|
|
1046
960
|
/**
|
|
1047
961
|
* Get tooltip node
|
|
1048
962
|
* @returns mg-tooltip
|
|
@@ -1055,7 +969,6 @@ const MgInput = class {
|
|
|
1055
969
|
this.tooltip = undefined;
|
|
1056
970
|
this.tooltipPosition = 'input';
|
|
1057
971
|
this.required = false;
|
|
1058
|
-
this.readonlyValue = undefined;
|
|
1059
972
|
this.errorMessage = undefined;
|
|
1060
973
|
this.helpText = undefined;
|
|
1061
974
|
this.ariaDescribedbyIDs = undefined;
|
|
@@ -1065,8 +978,8 @@ const MgInput = class {
|
|
|
1065
978
|
this.isVerticalList = false;
|
|
1066
979
|
}
|
|
1067
980
|
watchIdentifier(newValue) {
|
|
1068
|
-
if (!index$1.
|
|
1069
|
-
throw new Error(
|
|
981
|
+
if (!index$1.Qe(newValue)) {
|
|
982
|
+
throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${index$1.Ze(newValue)}.`);
|
|
1070
983
|
}
|
|
1071
984
|
else {
|
|
1072
985
|
this.helpTextId = `${this.identifier}-help-text`;
|
|
@@ -1088,12 +1001,12 @@ const MgInput = class {
|
|
|
1088
1001
|
}
|
|
1089
1002
|
watchTooltipPosition(newValue) {
|
|
1090
1003
|
if (!tooltipPositions.includes(newValue)) {
|
|
1091
|
-
throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}
|
|
1004
|
+
throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
1092
1005
|
}
|
|
1093
1006
|
}
|
|
1094
1007
|
watchErrorMessage(newValue) {
|
|
1095
1008
|
var _a;
|
|
1096
|
-
if (newValue) {
|
|
1009
|
+
if (newValue !== undefined) {
|
|
1097
1010
|
this.element.classList.add(this.classHasError);
|
|
1098
1011
|
this.renderErrorMessage();
|
|
1099
1012
|
}
|
|
@@ -1105,7 +1018,7 @@ const MgInput = class {
|
|
|
1105
1018
|
}
|
|
1106
1019
|
watchHelpText(newValue) {
|
|
1107
1020
|
var _a;
|
|
1108
|
-
if (newValue) {
|
|
1021
|
+
if (newValue && !this.isReadonly) {
|
|
1109
1022
|
this.renderHelpText();
|
|
1110
1023
|
}
|
|
1111
1024
|
else {
|
|
@@ -1114,16 +1027,18 @@ const MgInput = class {
|
|
|
1114
1027
|
}
|
|
1115
1028
|
}
|
|
1116
1029
|
watchAriaDescribedbyIDs() {
|
|
1030
|
+
if (this.isReadonly)
|
|
1031
|
+
return;
|
|
1117
1032
|
// a11y IDs
|
|
1118
1033
|
const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);
|
|
1119
1034
|
// Help text
|
|
1120
|
-
if (this.helpText) {
|
|
1035
|
+
if (this.helpText !== undefined) {
|
|
1121
1036
|
this.renderHelpText();
|
|
1122
1037
|
if (!ariaDescribedbyIDs.has(this.helpTextId))
|
|
1123
1038
|
ariaDescribedbyIDs.add(this.helpTextId);
|
|
1124
1039
|
}
|
|
1125
1040
|
// Error Message
|
|
1126
|
-
if (this.errorMessage) {
|
|
1041
|
+
if (this.errorMessage !== undefined) {
|
|
1127
1042
|
this.renderErrorMessage();
|
|
1128
1043
|
if (!ariaDescribedbyIDs.has(this.helpTextErrorId))
|
|
1129
1044
|
ariaDescribedbyIDs.add(this.helpTextErrorId);
|
|
@@ -1150,8 +1065,8 @@ const MgInput = class {
|
|
|
1150
1065
|
*/
|
|
1151
1066
|
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1152
1067
|
watchLabel() {
|
|
1153
|
-
if (!index$1.
|
|
1154
|
-
throw new Error(
|
|
1068
|
+
if (!index$1.Qe(this.label)) {
|
|
1069
|
+
throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${index$1.Ze(this.label)}.`);
|
|
1155
1070
|
}
|
|
1156
1071
|
else {
|
|
1157
1072
|
this.watchAriaDescribedbyIDs();
|
|
@@ -1191,7 +1106,7 @@ const MgInput = class {
|
|
|
1191
1106
|
*/
|
|
1192
1107
|
renderErrorMessage() {
|
|
1193
1108
|
this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);
|
|
1194
|
-
if (
|
|
1109
|
+
if (this.errorMessageSlotElement === null) {
|
|
1195
1110
|
this.errorMessageSlotElement = document.createElement('div');
|
|
1196
1111
|
this.errorMessageSlotElement.setAttribute('slot', this.slotError);
|
|
1197
1112
|
this.element.appendChild(this.errorMessageSlotElement);
|
|
@@ -1204,7 +1119,7 @@ const MgInput = class {
|
|
|
1204
1119
|
*/
|
|
1205
1120
|
renderHelpText() {
|
|
1206
1121
|
this.helptextMessageSlotElement = this.element.querySelector(`[slot=${this.slotHelpText}]`);
|
|
1207
|
-
if (
|
|
1122
|
+
if (this.helptextMessageSlotElement === null) {
|
|
1208
1123
|
this.helptextMessageSlotElement = document.createElement('div');
|
|
1209
1124
|
this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);
|
|
1210
1125
|
this.element.appendChild(this.helptextMessageSlotElement);
|
|
@@ -1221,19 +1136,19 @@ const MgInput = class {
|
|
|
1221
1136
|
componentWillLoad() {
|
|
1222
1137
|
this.watchIdentifier(this.identifier);
|
|
1223
1138
|
this.watchLabel();
|
|
1139
|
+
this.watchClass();
|
|
1224
1140
|
this.watchLabelOnTop(this.labelOnTop);
|
|
1225
1141
|
this.watchLabelConfig();
|
|
1226
1142
|
this.watchTooltipPosition(this.tooltipPosition);
|
|
1227
1143
|
this.watchHelpText(this.helpText);
|
|
1228
1144
|
this.watchErrorMessage(this.errorMessage);
|
|
1229
|
-
this.watchClass();
|
|
1230
1145
|
}
|
|
1231
1146
|
/**
|
|
1232
1147
|
* Validate slots
|
|
1233
1148
|
*/
|
|
1234
1149
|
componentDidLoad() {
|
|
1235
1150
|
this.watchAriaDescribedbyIDs();
|
|
1236
|
-
if (!this.isReadonly && !this.isFieldset &&
|
|
1151
|
+
if (!this.isReadonly && !this.isFieldset && this.element.querySelector(`#${this.identifier}`) === null) {
|
|
1237
1152
|
throw new Error(`<mg-input> "identifier" prop has no target for id: ${this.identifier}. Add an id to the targeted input.`);
|
|
1238
1153
|
}
|
|
1239
1154
|
}
|
|
@@ -1242,18 +1157,8 @@ const MgInput = class {
|
|
|
1242
1157
|
* @returns HTML Element
|
|
1243
1158
|
*/
|
|
1244
1159
|
render() {
|
|
1245
|
-
const readonlyValue = this.getReadonlyValues();
|
|
1246
1160
|
const isGroup = this.isFieldset && !this.isReadonly;
|
|
1247
|
-
return (index.h(index.Host, { key: '
|
|
1248
|
-
? [
|
|
1249
|
-
Array.isArray(readonlyValue) ? (index.h("ul", { key: "readonly-value-list" }, readonlyValue.map(value => (index.h("li", { key: value }, index.h("strong", null, value)))))) : (index.h("strong", { key: "readonly-value" }, readonlyValue)),
|
|
1250
|
-
index.h("slot", { key: "default-slot" }),
|
|
1251
|
-
]
|
|
1252
|
-
: [
|
|
1253
|
-
index.h("div", { class: "mg-c-input__input", key: "tooltip" }, index.h("slot", null), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()),
|
|
1254
|
-
this.helpText && (index.h("div", { class: "mg-c-input__help-text", key: "help-text" }, index.h("slot", { name: this.slotHelpText }))),
|
|
1255
|
-
!this.isDisabled && this.errorMessage && (index.h("div", { class: "mg-c-input__error", "aria-live": "assertive", key: "error-message" }, index.h("slot", { name: this.slotError }))),
|
|
1256
|
-
])));
|
|
1161
|
+
return (index.h(index.Host, { key: 'de2441ca25015a07653e09f5cda0d9588062840d', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, index.h("div", { key: '39cfcc83a6965e55310220f05334d3f364c502c1', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, index.h("slot", { key: '6413efe7254806a84e283cd15365dc0d78c18afe', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), index.h("div", { key: '7047fbaff93f273d134745e4d991eb91c28ef7f5', class: "mg-c-input__input-container" }, index.h("div", { key: '3cb904222def3d4f68cf000ae292e0dc221a954c', class: "mg-c-input__input" }, index.h("slot", { key: '552f670ef98a4ce43dbbf6bb54038152c87b6472' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (index.h("div", { key: '945232348ed6d14f6f018dcb8003ef46c68c6b44', class: "mg-c-input__help-text" }, index.h("slot", { key: '782770bebf5600f75f59930b5d9665ef93a0404b', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (index.h("div", { key: '96398b6849c7c26474037c1f783dc02d70f1ad65', class: "mg-c-input__error", "aria-live": "assertive" }, index.h("slot", { key: 'dc7cf70f5145e790f246b9ac0955f24105927adc', name: this.slotError }))))));
|
|
1257
1162
|
}
|
|
1258
1163
|
get element() { return index.getElement(this); }
|
|
1259
1164
|
static get watchers() { return {
|
|
@@ -1275,30 +1180,12 @@ MgInput.style = MgInputStyle0;
|
|
|
1275
1180
|
*/
|
|
1276
1181
|
const checkboxTypes = ['checkbox', 'multi'];
|
|
1277
1182
|
/**
|
|
1278
|
-
* mg-input-checkbox-paginated section kind
|
|
1279
|
-
*/
|
|
1280
|
-
var SectionKind;
|
|
1281
|
-
(function (SectionKind) {
|
|
1282
|
-
SectionKind["SELECTED"] = "selected";
|
|
1283
|
-
SectionKind["NOT_SELECTED"] = "not-selected";
|
|
1284
|
-
})(SectionKind || (SectionKind = {}));
|
|
1285
|
-
/**
|
|
1286
|
-
* mg-input-checkbox-paginated section title kind
|
|
1287
|
-
*/
|
|
1288
|
-
var SectionTitleKind;
|
|
1289
|
-
(function (SectionTitleKind) {
|
|
1290
|
-
SectionTitleKind["BUTTON"] = "button";
|
|
1291
|
-
SectionTitleKind["TEXT"] = "text";
|
|
1292
|
-
})(SectionTitleKind || (SectionTitleKind = {}));
|
|
1293
|
-
/**
|
|
1294
|
-
* Define select values button key
|
|
1183
|
+
* mg-input-checkbox-paginated section kind value
|
|
1295
1184
|
*/
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
SelectValuesButtonKey["SELECT"] = "selectButton";
|
|
1301
|
-
})(SelectValuesButtonKey || (SelectValuesButtonKey = {}));
|
|
1185
|
+
const SectionKind = {
|
|
1186
|
+
SELECTED: 'selected',
|
|
1187
|
+
NOT_SELECTED: 'not-selected',
|
|
1188
|
+
};
|
|
1302
1189
|
|
|
1303
1190
|
/**
|
|
1304
1191
|
* Get checkboxes list template
|
|
@@ -1312,7 +1199,7 @@ const MgInputCheckboxList = (props) => (index.h("ul", { class: "mg-c-input__inpu
|
|
|
1312
1199
|
index.h("label", { htmlFor: input._id, onMouseEnter: input._handleMouseEnter, onMouseLeave: input._handleMouseLeave }, input.title)));
|
|
1313
1200
|
})));
|
|
1314
1201
|
|
|
1315
|
-
const mgInputCheckboxCss = ".mg-
|
|
1202
|
+
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)}";
|
|
1316
1203
|
const MgInputCheckboxStyle0 = mgInputCheckboxCss;
|
|
1317
1204
|
|
|
1318
1205
|
/**
|
|
@@ -1363,11 +1250,11 @@ const MgInputCheckbox = class {
|
|
|
1363
1250
|
return;
|
|
1364
1251
|
}
|
|
1365
1252
|
const enableInputs = Array.from(this.element.shadowRoot.querySelectorAll('input'))
|
|
1366
|
-
.filter(input => !input.
|
|
1253
|
+
.filter(input => !input.hasAttribute('disabled'))
|
|
1367
1254
|
.map(({ id }) => id);
|
|
1368
1255
|
const originInputIndex = enableInputs.findIndex(id => id === event.target.id);
|
|
1369
1256
|
// close popover when tab trigger focus outside its DOM
|
|
1370
|
-
if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) || (originInputIndex === 0 && event.shiftKey &&
|
|
1257
|
+
if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) || (originInputIndex === 0 && event.shiftKey && this.searchInput === undefined))
|
|
1371
1258
|
this.mgPopover.display = false;
|
|
1372
1259
|
}
|
|
1373
1260
|
};
|
|
@@ -1375,12 +1262,12 @@ const MgInputCheckbox = class {
|
|
|
1375
1262
|
* Handle blur event
|
|
1376
1263
|
*/
|
|
1377
1264
|
this.handleBlur = (event) => {
|
|
1378
|
-
if (this.handlerInProgress ===
|
|
1265
|
+
if (this.handlerInProgress === 'mouseenter') {
|
|
1379
1266
|
event.preventDefault();
|
|
1380
1267
|
return;
|
|
1381
1268
|
}
|
|
1382
1269
|
// set guard
|
|
1383
|
-
this.handlerInProgress =
|
|
1270
|
+
this.handlerInProgress = 'blur';
|
|
1384
1271
|
// Check validity
|
|
1385
1272
|
this.checkValidity();
|
|
1386
1273
|
this.setErrorMessage();
|
|
@@ -1403,7 +1290,7 @@ const MgInputCheckbox = class {
|
|
|
1403
1290
|
// 1. update hasOpenedPopover guard with event value
|
|
1404
1291
|
this.hasOpenedPopover = event.detail;
|
|
1405
1292
|
// 2. update selected valued button text
|
|
1406
|
-
this.
|
|
1293
|
+
this.setButtonTextKey();
|
|
1407
1294
|
// 3. when popover display change to hide, update reset needeed props and run checkValidity
|
|
1408
1295
|
if (!event.detail) {
|
|
1409
1296
|
// reset search value
|
|
@@ -1423,7 +1310,7 @@ const MgInputCheckbox = class {
|
|
|
1423
1310
|
const displayItems = this.getDisplayItems();
|
|
1424
1311
|
// update only displayed items
|
|
1425
1312
|
displayItems.forEach(item => {
|
|
1426
|
-
item.value = event.detail !==
|
|
1313
|
+
item.value = event.detail !== SectionKind.SELECTED;
|
|
1427
1314
|
});
|
|
1428
1315
|
this.updateValues();
|
|
1429
1316
|
};
|
|
@@ -1431,7 +1318,7 @@ const MgInputCheckbox = class {
|
|
|
1431
1318
|
* Handle input label mouseenter event
|
|
1432
1319
|
*/
|
|
1433
1320
|
this.handleMouseEnter = () => {
|
|
1434
|
-
this.handlerInProgress =
|
|
1321
|
+
this.handlerInProgress = 'mouseenter';
|
|
1435
1322
|
};
|
|
1436
1323
|
/**
|
|
1437
1324
|
* Handle input label leave event
|
|
@@ -1462,7 +1349,7 @@ const MgInputCheckbox = class {
|
|
|
1462
1349
|
* Method to update searchResults
|
|
1463
1350
|
*/
|
|
1464
1351
|
this.updateSearchResults = () => {
|
|
1465
|
-
this.searchResults = this.checkboxItems.filter(item => index$1.
|
|
1352
|
+
this.searchResults = this.checkboxItems.filter(item => index$1.Ye(item.title).includes(index$1.Ye(this.searchValue)));
|
|
1466
1353
|
};
|
|
1467
1354
|
/**
|
|
1468
1355
|
* Method to validate if one of inputs value is checked id required
|
|
@@ -1478,17 +1365,35 @@ const MgInputCheckbox = class {
|
|
|
1478
1365
|
/**
|
|
1479
1366
|
* Set button text locale key
|
|
1480
1367
|
*/
|
|
1481
|
-
this.
|
|
1368
|
+
this.setButtonTextKey = () => {
|
|
1482
1369
|
// prevent key update while popover is openned
|
|
1483
1370
|
if (this.hasOpenedPopover)
|
|
1484
1371
|
return;
|
|
1485
|
-
let messageKey =
|
|
1372
|
+
let messageKey = 'editButton';
|
|
1486
1373
|
if (this.disabled)
|
|
1487
|
-
messageKey =
|
|
1374
|
+
messageKey = 'showButton';
|
|
1488
1375
|
else if (this.getSelectedItems().length < 1)
|
|
1489
|
-
messageKey =
|
|
1376
|
+
messageKey = 'selectButton';
|
|
1490
1377
|
this.selectValuesButtonKey = messageKey;
|
|
1491
1378
|
};
|
|
1379
|
+
/**
|
|
1380
|
+
* Get select values button message
|
|
1381
|
+
* @returns message to display
|
|
1382
|
+
*/
|
|
1383
|
+
this.getSelectValuesButtonMessage = () => {
|
|
1384
|
+
if (this.selectValuesButtonKey === 'editButton' && index$1.Qe(this.editButtonMessage)) {
|
|
1385
|
+
return this.editButtonMessage;
|
|
1386
|
+
}
|
|
1387
|
+
else if (this.selectValuesButtonKey === 'showButton' && index$1.Qe(this.showButtonMessage)) {
|
|
1388
|
+
return this.showButtonMessage;
|
|
1389
|
+
}
|
|
1390
|
+
else if (this.selectValuesButtonKey === 'selectButton' && index$1.Qe(this.selectButtonMessage)) {
|
|
1391
|
+
return this.selectButtonMessage;
|
|
1392
|
+
}
|
|
1393
|
+
else {
|
|
1394
|
+
return this.messages.input.checkbox[this.selectValuesButtonKey];
|
|
1395
|
+
}
|
|
1396
|
+
};
|
|
1492
1397
|
/**
|
|
1493
1398
|
* Set input error message
|
|
1494
1399
|
* @param displayError - dispay error condition
|
|
@@ -1519,6 +1424,18 @@ const MgInputCheckbox = class {
|
|
|
1519
1424
|
* @returns selected checkboxItems
|
|
1520
1425
|
*/
|
|
1521
1426
|
this.getSelectedItems = () => this.checkboxItems.filter(({ value }) => value);
|
|
1427
|
+
/**
|
|
1428
|
+
* Renders the readonly value of the input.
|
|
1429
|
+
* @returns The rendered readonly value.
|
|
1430
|
+
*/
|
|
1431
|
+
this.renderReadonly = (readonlyValue) => {
|
|
1432
|
+
return this.inputVerticalList ? (index.h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map(value => (index.h("li", { key: value }, index.h("b", null, value)))))) : (index.h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
|
|
1433
|
+
};
|
|
1434
|
+
/**
|
|
1435
|
+
* Renders the MgInputCheckboxList component.
|
|
1436
|
+
* @returns The rendered MgInputCheckboxList component.
|
|
1437
|
+
*/
|
|
1438
|
+
this.renderMgInputCheckboxList = () => (index.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 }));
|
|
1522
1439
|
this.value = undefined;
|
|
1523
1440
|
this.type = undefined;
|
|
1524
1441
|
this.identifier = undefined;
|
|
@@ -1536,13 +1453,16 @@ const MgInputCheckbox = class {
|
|
|
1536
1453
|
this.helpText = undefined;
|
|
1537
1454
|
this.valid = undefined;
|
|
1538
1455
|
this.invalid = undefined;
|
|
1456
|
+
this.editButtonMessage = undefined;
|
|
1457
|
+
this.showButtonMessage = undefined;
|
|
1458
|
+
this.selectButtonMessage = undefined;
|
|
1539
1459
|
this.classCollection = new index$1.Ie([this.baseClassName, classFieldset]);
|
|
1540
1460
|
this.errorMessage = undefined;
|
|
1541
1461
|
this.checkboxItems = [];
|
|
1542
1462
|
this.displaySearchInput = undefined;
|
|
1543
1463
|
this.searchValue = '';
|
|
1544
1464
|
this.searchResults = [];
|
|
1545
|
-
this.selectValuesButtonKey =
|
|
1465
|
+
this.selectValuesButtonKey = 'editButton';
|
|
1546
1466
|
}
|
|
1547
1467
|
validateValue(newValue) {
|
|
1548
1468
|
if (isCheckboxItems(newValue)) {
|
|
@@ -1550,12 +1470,12 @@ const MgInputCheckbox = class {
|
|
|
1550
1470
|
this.valueChange.emit(newValue);
|
|
1551
1471
|
}
|
|
1552
1472
|
else {
|
|
1553
|
-
throw new Error(
|
|
1473
|
+
throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${index$1.Ze(newValue)}.`);
|
|
1554
1474
|
}
|
|
1555
1475
|
}
|
|
1556
1476
|
validateType(newValue) {
|
|
1557
1477
|
if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
|
|
1558
|
-
throw new Error(
|
|
1478
|
+
throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${index$1.Ze(newValue)}.`);
|
|
1559
1479
|
}
|
|
1560
1480
|
else if (newValue === undefined) {
|
|
1561
1481
|
this.mode = 'auto';
|
|
@@ -1595,7 +1515,7 @@ const MgInputCheckbox = class {
|
|
|
1595
1515
|
this.hasDisplayedError = prop !== 'required';
|
|
1596
1516
|
this.setErrorMessage(this.hasDisplayedError);
|
|
1597
1517
|
}
|
|
1598
|
-
this.
|
|
1518
|
+
this.setButtonTextKey();
|
|
1599
1519
|
}
|
|
1600
1520
|
validateDisabled(newValue) {
|
|
1601
1521
|
if (newValue)
|
|
@@ -1612,7 +1532,7 @@ const MgInputCheckbox = class {
|
|
|
1612
1532
|
// refresh search values
|
|
1613
1533
|
if (this.displaySearchInput)
|
|
1614
1534
|
this.updateSearchResults();
|
|
1615
|
-
this.
|
|
1535
|
+
this.setButtonTextKey();
|
|
1616
1536
|
}
|
|
1617
1537
|
watchDisplaySearchInput(newValue) {
|
|
1618
1538
|
if (newValue)
|
|
@@ -1642,10 +1562,10 @@ const MgInputCheckbox = class {
|
|
|
1642
1562
|
*/
|
|
1643
1563
|
async setError(valid, errorMessage) {
|
|
1644
1564
|
if (typeof valid !== 'boolean') {
|
|
1645
|
-
throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
|
|
1565
|
+
throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean.');
|
|
1646
1566
|
}
|
|
1647
|
-
else if (!index$1.
|
|
1648
|
-
throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
|
|
1567
|
+
else if (!index$1.Qe(errorMessage)) {
|
|
1568
|
+
throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string.');
|
|
1649
1569
|
}
|
|
1650
1570
|
else {
|
|
1651
1571
|
this.setValidity(valid);
|
|
@@ -1662,7 +1582,7 @@ const MgInputCheckbox = class {
|
|
|
1662
1582
|
this.valid = newValue;
|
|
1663
1583
|
this.invalid = !this.valid;
|
|
1664
1584
|
// We need to send valid event even if it is the same value
|
|
1665
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
1585
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
1666
1586
|
this.inputValid.emit(this.valid);
|
|
1667
1587
|
}
|
|
1668
1588
|
/**
|
|
@@ -1731,10 +1651,12 @@ const MgInputCheckbox = class {
|
|
|
1731
1651
|
identifier: this.identifier,
|
|
1732
1652
|
};
|
|
1733
1653
|
const sections = [
|
|
1734
|
-
Object.assign(Object.assign({}, baseSection), {
|
|
1735
|
-
Object.assign(Object.assign({}, baseSection), {
|
|
1654
|
+
Object.assign(Object.assign({}, baseSection), { checkboxes: checkedValues, messages: this.messages.input.checkbox.sections.selected }),
|
|
1655
|
+
Object.assign(Object.assign({}, baseSection), { checkboxes: notCheckedValues, messages: this.messages.input.checkbox.sections.notSelected }),
|
|
1736
1656
|
];
|
|
1737
|
-
return sections
|
|
1657
|
+
return sections
|
|
1658
|
+
.filter(section => section.checkboxes.length)
|
|
1659
|
+
.map(section => index.h("mg-input-checkbox-paginated", Object.assign({}, section, { "onMass-action": this.handleMassAction, key: section.messages })));
|
|
1738
1660
|
}
|
|
1739
1661
|
/**
|
|
1740
1662
|
* render checkbox multi element
|
|
@@ -1744,20 +1666,31 @@ const MgInputCheckbox = class {
|
|
|
1744
1666
|
const selectedValuesNb = this.getSelectedItems().length;
|
|
1745
1667
|
const checkboxes = this.getDisplayItems();
|
|
1746
1668
|
return (index.h("div", { class: "mg-c-input__input-container" }, index.h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), display: this.hasOpenedPopover, "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
|
|
1747
|
-
if (el)
|
|
1669
|
+
if (el !== null)
|
|
1748
1670
|
this.mgPopover = el;
|
|
1749
|
-
} }, index.h("mg-button", { variant: "secondary", "aria-describedby": `${this.identifier}-title` }, index.h("mg-icon", { icon: "list" }), this.
|
|
1750
|
-
index.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,
|
|
1671
|
+
} }, index.h("mg-button", { variant: "secondary", "aria-describedby": `${this.identifier}-title` }, index.h("mg-icon", { icon: "list" }), this.getSelectValuesButtonMessage()), index.h("div", { slot: "content", class: "mg-c-input__content" }, this.displaySearchInput ? ([
|
|
1672
|
+
index.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" }),
|
|
1751
1673
|
index.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']}`),
|
|
1752
1674
|
index.h("div", { key: "sections-container", class: "mg-c-input__sections" }, this.renderCheckboxBySection(checkboxes)),
|
|
1753
|
-
]) : (index.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 && index.h("p", { class: "mg-c-input__input-no-result" }, this.messages.input.checkbox.noResult))), this.displaySelectedValues ? (selectedValuesNb > 0 && (index.h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (index.h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (index.h("
|
|
1675
|
+
]) : (index.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 && index.h("p", { class: "mg-c-input__input-no-result" }, this.messages.input.checkbox.noResult))), this.displaySelectedValues ? (selectedValuesNb > 0 && (index.h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (index.h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (index.h("b", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
|
|
1754
1676
|
}
|
|
1755
1677
|
/**
|
|
1756
1678
|
* Render
|
|
1757
1679
|
* @returns HTML Element
|
|
1758
1680
|
*/
|
|
1759
1681
|
render() {
|
|
1760
|
-
|
|
1682
|
+
let inputContent;
|
|
1683
|
+
const readonlyValue = this.value.filter(({ value }) => value).map(({ title }) => title);
|
|
1684
|
+
if (this.readonly) {
|
|
1685
|
+
inputContent = this.renderReadonly(readonlyValue);
|
|
1686
|
+
}
|
|
1687
|
+
else if (this.type === 'checkbox') {
|
|
1688
|
+
inputContent = this.renderMgInputCheckboxList();
|
|
1689
|
+
}
|
|
1690
|
+
else {
|
|
1691
|
+
inputContent = this.renderCheckboxMulti();
|
|
1692
|
+
}
|
|
1693
|
+
return (index.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));
|
|
1761
1694
|
}
|
|
1762
1695
|
get element() { return index.getElement(this); }
|
|
1763
1696
|
static get watchers() { return {
|
|
@@ -1810,7 +1743,7 @@ const MgInputCheckboxPaginated = class {
|
|
|
1810
1743
|
* @param items - items to count
|
|
1811
1744
|
* @returns page count from items
|
|
1812
1745
|
*/
|
|
1813
|
-
this.getPageCount = (
|
|
1746
|
+
this.getPageCount = (items) => ((items === null || items === void 0 ? void 0 : items.length) > 0 ? Math.ceil(items.length / this.offset) : 0);
|
|
1814
1747
|
/**
|
|
1815
1748
|
* Handle mg-pagination current page change event
|
|
1816
1749
|
* @param event - pagination current page change event
|
|
@@ -1824,12 +1757,10 @@ const MgInputCheckboxPaginated = class {
|
|
|
1824
1757
|
this.invalid = undefined;
|
|
1825
1758
|
this.currentPage = 1;
|
|
1826
1759
|
this.checkboxes = [];
|
|
1827
|
-
this.sectionKind = undefined;
|
|
1828
1760
|
this.messages = undefined;
|
|
1829
|
-
this.titleKind = undefined;
|
|
1830
1761
|
this.expanded = true;
|
|
1831
1762
|
}
|
|
1832
|
-
|
|
1763
|
+
watchCheckboxes(newValue, oldValue) {
|
|
1833
1764
|
const pageCountNewValue = this.getPageCount(newValue);
|
|
1834
1765
|
const pageCountOldValue = this.getPageCount(oldValue);
|
|
1835
1766
|
// after each array.length update we reset pagination
|
|
@@ -1841,12 +1772,7 @@ const MgInputCheckboxPaginated = class {
|
|
|
1841
1772
|
else if (pageCountOldValue === this.currentPage && pageCountNewValue < this.currentPage) {
|
|
1842
1773
|
this.currentPage--;
|
|
1843
1774
|
}
|
|
1844
|
-
|
|
1845
|
-
validateSectionKind(newValue) {
|
|
1846
|
-
if (newValue === SectionKind.SELECTED)
|
|
1847
|
-
this.titleKind = SectionTitleKind.BUTTON;
|
|
1848
|
-
else
|
|
1849
|
-
this.titleKind = SectionTitleKind.TEXT;
|
|
1775
|
+
this.sectionKind = newValue[0].value ? SectionKind.SELECTED : SectionKind.NOT_SELECTED;
|
|
1850
1776
|
}
|
|
1851
1777
|
/**
|
|
1852
1778
|
* Get from and to index
|
|
@@ -1862,37 +1788,27 @@ const MgInputCheckboxPaginated = class {
|
|
|
1862
1788
|
* Lifecycle *
|
|
1863
1789
|
*************/
|
|
1864
1790
|
/**
|
|
1865
|
-
*
|
|
1791
|
+
* Validate props
|
|
1866
1792
|
*/
|
|
1867
1793
|
componentWillLoad() {
|
|
1868
|
-
this.
|
|
1794
|
+
this.watchCheckboxes(this.checkboxes);
|
|
1869
1795
|
}
|
|
1870
1796
|
/**
|
|
1871
1797
|
* Render
|
|
1872
1798
|
* @returns HTML Element
|
|
1873
1799
|
*/
|
|
1874
1800
|
render() {
|
|
1875
|
-
const getText = (checkboxes) => (index.h("em", { key: '
|
|
1801
|
+
const getText = (checkboxes) => (index.h("em", { key: '05d577bded8e2602d1dedf9a36f695904d491242', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`));
|
|
1876
1802
|
const [from, to] = this.getFromToIndexes();
|
|
1877
1803
|
const itemsContainerId = `items-${this.sectionKind}-container`;
|
|
1878
|
-
return (index.h(index.Host, { key: '
|
|
1804
|
+
return (index.h(index.Host, { key: '49b95a0882cc475aab4a810ccd8f292d83b59a9a', hidden: this.checkboxes.length < 1 }, index.h("div", { key: '2db5103f9784add1effb7a5dcafa8f8196601d14', class: "mg-c-input__section-header" }, this.sectionKind === SectionKind.SELECTED ? (index.h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, index.h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), index.h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (index.h("p", { class: "mg-c-input__section-header-title mg-c-input__section-header-title--static" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (index.h("mg-tooltip", { key: '1bf161092691a606697a543de71e78c574b0dea0', class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip }, index.h("mg-button", { key: '3f9090d137c2ea967e098b06a4ed2bd36da34267', variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (index.h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), index.h("div", { key: '6b405d35f0ffba82352dbf1a9a1e9abed274b5f2', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, index.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 }))));
|
|
1879
1805
|
}
|
|
1880
1806
|
static get watchers() { return {
|
|
1881
|
-
"checkboxes": ["
|
|
1882
|
-
"sectionKind": ["validateSectionKind"]
|
|
1807
|
+
"checkboxes": ["watchCheckboxes"]
|
|
1883
1808
|
}; }
|
|
1884
1809
|
};
|
|
1885
1810
|
|
|
1886
|
-
var
|
|
1887
|
-
(function (InputError) {
|
|
1888
|
-
InputError["MIN"] = "min";
|
|
1889
|
-
InputError["MAX"] = "max";
|
|
1890
|
-
InputError["MINMAX"] = "minMax";
|
|
1891
|
-
InputError["REQUIRED"] = "required";
|
|
1892
|
-
InputError["PATTERN"] = "badInput";
|
|
1893
|
-
})(InputError$1 || (InputError$1 = {}));
|
|
1894
|
-
|
|
1895
|
-
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}}";
|
|
1811
|
+
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}}";
|
|
1896
1812
|
const MgInputDateStyle0 = mgInputDateCss;
|
|
1897
1813
|
|
|
1898
1814
|
const MgInputDate = class {
|
|
@@ -1907,7 +1823,7 @@ const MgInputDate = class {
|
|
|
1907
1823
|
* @param value - value to test
|
|
1908
1824
|
* @returns truthy when value match the pattern
|
|
1909
1825
|
*/
|
|
1910
|
-
this.isValidPattern = (value) => index$1.
|
|
1826
|
+
this.isValidPattern = (value) => index$1.Qe(value) && index$1.We.test(value);
|
|
1911
1827
|
/**
|
|
1912
1828
|
* Format help text to display
|
|
1913
1829
|
* @param helpText - help text format
|
|
@@ -1915,10 +1831,10 @@ const MgInputDate = class {
|
|
|
1915
1831
|
*/
|
|
1916
1832
|
this.formatHelpText = (helpText) => {
|
|
1917
1833
|
const defaultHelpTextVariable = '{defaultHelpText}';
|
|
1918
|
-
let text = index$1.
|
|
1834
|
+
let text = index$1.Qe(helpText) ? helpText : this.messages.input.date.helpText;
|
|
1919
1835
|
if (text.includes(defaultHelpTextVariable))
|
|
1920
1836
|
text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));
|
|
1921
|
-
return text.replace('{pattern}', this.renderPattern()).replace('{date}', index$1.He(index$1.
|
|
1837
|
+
return text.replace('{pattern}', this.renderPattern()).replace('{date}', index$1.He(index$1.at(new Date('2023-12-24')), this.systemLocale));
|
|
1922
1838
|
};
|
|
1923
1839
|
/**
|
|
1924
1840
|
* Handle input event
|
|
@@ -1934,7 +1850,7 @@ const MgInputDate = class {
|
|
|
1934
1850
|
* Handle blur event
|
|
1935
1851
|
*/
|
|
1936
1852
|
this.handleBlur = () => {
|
|
1937
|
-
this.handlerInProgress =
|
|
1853
|
+
this.handlerInProgress = 'blur';
|
|
1938
1854
|
this.displayError().finally(() => {
|
|
1939
1855
|
// reset guard
|
|
1940
1856
|
this.handlerInProgress = undefined;
|
|
@@ -1960,7 +1876,7 @@ const MgInputDate = class {
|
|
|
1960
1876
|
* Check if input is valid
|
|
1961
1877
|
*/
|
|
1962
1878
|
this.checkValidity = () => {
|
|
1963
|
-
this.setValidity(this.readonly || this.disabled || (this.input.checkValidity() && (
|
|
1879
|
+
this.setValidity(this.readonly || this.disabled || (this.input.checkValidity() && (['', undefined].includes(this.value) || this.isValidPattern(this.value))));
|
|
1964
1880
|
};
|
|
1965
1881
|
/**
|
|
1966
1882
|
* get input error code
|
|
@@ -1971,23 +1887,23 @@ const MgInputDate = class {
|
|
|
1971
1887
|
let inputError = null;
|
|
1972
1888
|
// required
|
|
1973
1889
|
if (this.input.validity.valueMissing) {
|
|
1974
|
-
inputError =
|
|
1890
|
+
inputError = 'required';
|
|
1975
1891
|
}
|
|
1976
1892
|
// pattern
|
|
1977
1893
|
else if (this.value && !this.isValidPattern(this.value)) {
|
|
1978
|
-
inputError =
|
|
1894
|
+
inputError = 'badInput';
|
|
1979
1895
|
}
|
|
1980
1896
|
// min & max
|
|
1981
1897
|
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') {
|
|
1982
|
-
inputError =
|
|
1898
|
+
inputError = 'minMax';
|
|
1983
1899
|
}
|
|
1984
1900
|
// min
|
|
1985
1901
|
else if (this.input.validity.rangeUnderflow) {
|
|
1986
|
-
inputError =
|
|
1902
|
+
inputError = 'min';
|
|
1987
1903
|
}
|
|
1988
1904
|
// max
|
|
1989
1905
|
else if (this.input.validity.rangeOverflow) {
|
|
1990
|
-
inputError =
|
|
1906
|
+
inputError = 'max';
|
|
1991
1907
|
}
|
|
1992
1908
|
return inputError;
|
|
1993
1909
|
};
|
|
@@ -2004,11 +1920,11 @@ const MgInputDate = class {
|
|
|
2004
1920
|
this.errorMessage = errorMessage;
|
|
2005
1921
|
}
|
|
2006
1922
|
// required
|
|
2007
|
-
else if (inputError ===
|
|
1923
|
+
else if (inputError === 'required') {
|
|
2008
1924
|
this.errorMessage = this.messages.errors[inputError];
|
|
2009
1925
|
}
|
|
2010
1926
|
// min, max & minMax
|
|
2011
|
-
else if ([
|
|
1927
|
+
else if (['min', 'max', 'minMax'].includes(inputError)) {
|
|
2012
1928
|
this.errorMessage = this.messages.errors.date[inputError]
|
|
2013
1929
|
.replace('{min}', index$1.He(this.min, this.systemLocale))
|
|
2014
1930
|
.replace('{max}', index$1.He(this.max, this.systemLocale));
|
|
@@ -2025,7 +1941,7 @@ const MgInputDate = class {
|
|
|
2025
1941
|
* @returns translated html pattern
|
|
2026
1942
|
*/
|
|
2027
1943
|
this.renderPattern = () => {
|
|
2028
|
-
let patternLocal = index$1.
|
|
1944
|
+
let patternLocal = index$1.it(this.systemLocale);
|
|
2029
1945
|
for (const key in this.messages.input.date.pattern) {
|
|
2030
1946
|
patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
|
|
2031
1947
|
}
|
|
@@ -2055,14 +1971,14 @@ const MgInputDate = class {
|
|
|
2055
1971
|
if (newValue === '')
|
|
2056
1972
|
newValue = null;
|
|
2057
1973
|
// check value validity
|
|
2058
|
-
if (newValue && !index$1.
|
|
2059
|
-
throw new Error(
|
|
1974
|
+
if (newValue && !index$1.Qe(newValue)) {
|
|
1975
|
+
throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${index$1.Ze(newValue)}.`);
|
|
2060
1976
|
}
|
|
2061
|
-
else if (
|
|
1977
|
+
else if ([null, undefined].includes(newValue) || this.isValidPattern(newValue)) {
|
|
2062
1978
|
this.valueChange.emit(newValue);
|
|
2063
1979
|
}
|
|
2064
1980
|
else {
|
|
2065
|
-
console.error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
|
|
1981
|
+
console.error("<mg-input-date> props 'value' doesn't match pattern: 'yyyy-mm-dd'.");
|
|
2066
1982
|
}
|
|
2067
1983
|
}
|
|
2068
1984
|
watchReadonly(newValue) {
|
|
@@ -2073,7 +1989,7 @@ const MgInputDate = class {
|
|
|
2073
1989
|
}
|
|
2074
1990
|
validateMinMax(newValue) {
|
|
2075
1991
|
if (newValue && !this.isValidPattern(newValue)) {
|
|
2076
|
-
throw new Error(
|
|
1992
|
+
throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${index$1.Ze(newValue)}.`);
|
|
2077
1993
|
}
|
|
2078
1994
|
}
|
|
2079
1995
|
handleValidityChange(newValue, _oldValue, prop) {
|
|
@@ -2110,10 +2026,10 @@ const MgInputDate = class {
|
|
|
2110
2026
|
*/
|
|
2111
2027
|
async setError(valid, errorMessage) {
|
|
2112
2028
|
if (typeof valid !== 'boolean') {
|
|
2113
|
-
throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean');
|
|
2029
|
+
throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean.');
|
|
2114
2030
|
}
|
|
2115
|
-
else if (!index$1.
|
|
2116
|
-
throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
|
|
2031
|
+
else if (!index$1.Qe(errorMessage)) {
|
|
2032
|
+
throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string.');
|
|
2117
2033
|
}
|
|
2118
2034
|
else {
|
|
2119
2035
|
this.setValidity(valid);
|
|
@@ -2130,7 +2046,7 @@ const MgInputDate = class {
|
|
|
2130
2046
|
this.valid = newValue;
|
|
2131
2047
|
this.invalid = !this.valid;
|
|
2132
2048
|
// We need to send valid event even if it is the same value
|
|
2133
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
2049
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
2134
2050
|
this.inputValid.emit(this.valid);
|
|
2135
2051
|
}
|
|
2136
2052
|
/*************
|
|
@@ -2166,10 +2082,10 @@ const MgInputDate = class {
|
|
|
2166
2082
|
* @returns HTML Element
|
|
2167
2083
|
*/
|
|
2168
2084
|
render() {
|
|
2169
|
-
return (index.h("mg-input", { key: '
|
|
2085
|
+
return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, index$1.He(this.value, this.locale))) : (index.h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
|
|
2170
2086
|
if (el !== null)
|
|
2171
2087
|
this.input = el;
|
|
2172
|
-
} })));
|
|
2088
|
+
} }))));
|
|
2173
2089
|
}
|
|
2174
2090
|
get element() { return index.getElement(this); }
|
|
2175
2091
|
static get watchers() { return {
|
|
@@ -2186,17 +2102,10 @@ MgInputDate.style = MgInputDateStyle0;
|
|
|
2186
2102
|
/**
|
|
2187
2103
|
* List of all possibles types
|
|
2188
2104
|
*/
|
|
2189
|
-
const types = ['decimal', 'integer'
|
|
2105
|
+
const types = ['decimal', 'integer'];
|
|
2190
2106
|
const formats = ['none', 'number', 'currency'];
|
|
2191
|
-
|
|
2192
|
-
(
|
|
2193
|
-
InputError["MIN"] = "min";
|
|
2194
|
-
InputError["MAX"] = "max";
|
|
2195
|
-
InputError["MINMAX"] = "minMax";
|
|
2196
|
-
InputError["REQUIRED"] = "required";
|
|
2197
|
-
})(InputError || (InputError = {}));
|
|
2198
|
-
|
|
2199
|
-
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)}";
|
|
2107
|
+
|
|
2108
|
+
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)}";
|
|
2200
2109
|
const MgInputNumericStyle0 = mgInputNumericCss;
|
|
2201
2110
|
|
|
2202
2111
|
const MgInputNumeric = class {
|
|
@@ -2230,7 +2139,7 @@ const MgInputNumeric = class {
|
|
|
2230
2139
|
if (this.value === '-')
|
|
2231
2140
|
this.value = '';
|
|
2232
2141
|
// Display Error
|
|
2233
|
-
this.handlerInProgress =
|
|
2142
|
+
this.handlerInProgress = 'blur';
|
|
2234
2143
|
this.displayError().finally(() => {
|
|
2235
2144
|
// reset guard
|
|
2236
2145
|
this.handlerInProgress = undefined;
|
|
@@ -2255,7 +2164,7 @@ const MgInputNumeric = class {
|
|
|
2255
2164
|
if (errorMessage !== undefined) {
|
|
2256
2165
|
this.errorMessage = errorMessage;
|
|
2257
2166
|
}
|
|
2258
|
-
else if (inputError ===
|
|
2167
|
+
else if (inputError === 'required') {
|
|
2259
2168
|
this.errorMessage = this.messages.errors[inputError];
|
|
2260
2169
|
}
|
|
2261
2170
|
else {
|
|
@@ -2272,20 +2181,20 @@ const MgInputNumeric = class {
|
|
|
2272
2181
|
const hasNotEmptyValues = (toControl) => !toControl.some(value => [null, undefined].includes(value));
|
|
2273
2182
|
// required
|
|
2274
2183
|
if (!this.input.checkValidity() && this.input.validity.valueMissing) {
|
|
2275
|
-
inputError =
|
|
2184
|
+
inputError = 'required';
|
|
2276
2185
|
}
|
|
2277
2186
|
// Min & Max
|
|
2278
2187
|
else if (hasNotEmptyValues([this.min, this.numericValue]) && this.numericValue < this.min && this.max === undefined) {
|
|
2279
2188
|
// Only a min value is set
|
|
2280
|
-
inputError =
|
|
2189
|
+
inputError = 'min';
|
|
2281
2190
|
}
|
|
2282
2191
|
else if (hasNotEmptyValues([this.max, this.numericValue]) && this.numericValue > this.max && this.min === undefined) {
|
|
2283
2192
|
// Only a max value is set
|
|
2284
|
-
inputError =
|
|
2193
|
+
inputError = 'max';
|
|
2285
2194
|
}
|
|
2286
2195
|
else if (hasNotEmptyValues([this.min, this.max, this.numericValue]) && (this.numericValue < this.min || this.numericValue > this.max)) {
|
|
2287
2196
|
// both min and max values are set
|
|
2288
|
-
inputError =
|
|
2197
|
+
inputError = 'minMax';
|
|
2289
2198
|
}
|
|
2290
2199
|
return inputError;
|
|
2291
2200
|
};
|
|
@@ -2297,9 +2206,9 @@ const MgInputNumeric = class {
|
|
|
2297
2206
|
this.formatValue = (value) => {
|
|
2298
2207
|
switch (this.format) {
|
|
2299
2208
|
case 'number':
|
|
2300
|
-
return index$1.
|
|
2209
|
+
return index$1.ft(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2301
2210
|
case 'currency':
|
|
2302
|
-
return index$1.
|
|
2211
|
+
return index$1.ct(value, this.locale, this.currency);
|
|
2303
2212
|
case 'none':
|
|
2304
2213
|
return value.toString();
|
|
2305
2214
|
}
|
|
@@ -2310,9 +2219,22 @@ const MgInputNumeric = class {
|
|
|
2310
2219
|
this.validateAppendSlot = () => {
|
|
2311
2220
|
const slotAppendInput = this.element.querySelector('[slot="append-input"]');
|
|
2312
2221
|
if (slotAppendInput !== null) {
|
|
2313
|
-
|
|
2222
|
+
if (slotAppendInput.nodeName === 'MG-BUTTON') {
|
|
2223
|
+
this.classCollection.add('mg-c-input--is-input-group-append');
|
|
2224
|
+
}
|
|
2225
|
+
else {
|
|
2226
|
+
this.classCollection.add('mg-c-input--is-append-input-slot-content');
|
|
2227
|
+
this.slotContent = slotAppendInput.textContent;
|
|
2228
|
+
}
|
|
2314
2229
|
}
|
|
2315
2230
|
};
|
|
2231
|
+
/**
|
|
2232
|
+
* Renders the readonly content of the input component.
|
|
2233
|
+
* @returns The readonly content element.
|
|
2234
|
+
*/
|
|
2235
|
+
this.renderReadonly = () => {
|
|
2236
|
+
return this.slotContent !== undefined ? (index.h("span", { class: "mg-c-input__readonly-value" }, index.h("b", null, this.readonlyValue), this.slotContent)) : (index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue));
|
|
2237
|
+
};
|
|
2316
2238
|
this.value = undefined;
|
|
2317
2239
|
this.identifier = undefined;
|
|
2318
2240
|
this.name = this.identifier;
|
|
@@ -2331,7 +2253,7 @@ const MgInputNumeric = class {
|
|
|
2331
2253
|
this.helpText = undefined;
|
|
2332
2254
|
this.type = 'decimal';
|
|
2333
2255
|
this.format = 'number';
|
|
2334
|
-
this.currency = '
|
|
2256
|
+
this.currency = 'EUR';
|
|
2335
2257
|
this.integerLength = 13;
|
|
2336
2258
|
this.decimalLength = 2;
|
|
2337
2259
|
this.valid = undefined;
|
|
@@ -2386,30 +2308,27 @@ const MgInputNumeric = class {
|
|
|
2386
2308
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
2387
2309
|
});
|
|
2388
2310
|
// apply new width
|
|
2389
|
-
if (newValue)
|
|
2311
|
+
if (newValue !== undefined)
|
|
2390
2312
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
2391
2313
|
}
|
|
2392
2314
|
validateType(newValue) {
|
|
2393
2315
|
if (!types.includes(newValue)) {
|
|
2394
|
-
throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}
|
|
2395
|
-
}
|
|
2396
|
-
else if (newValue === 'currency') {
|
|
2397
|
-
this.format = 'currency';
|
|
2316
|
+
throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
2398
2317
|
}
|
|
2399
2318
|
}
|
|
2400
2319
|
watchFormat(newValue) {
|
|
2401
2320
|
if (!formats.includes(newValue)) {
|
|
2402
|
-
throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}
|
|
2321
|
+
throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
2403
2322
|
}
|
|
2404
2323
|
}
|
|
2405
2324
|
validateIntegerLength(newValue) {
|
|
2406
2325
|
if (newValue < 1) {
|
|
2407
|
-
throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number.`);
|
|
2326
|
+
throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${index$1.Ze(newValue)}.`);
|
|
2408
2327
|
}
|
|
2409
2328
|
}
|
|
2410
2329
|
validateDecimalLength(newValue) {
|
|
2411
2330
|
if (newValue < 1) {
|
|
2412
|
-
throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead.`);
|
|
2331
|
+
throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${index$1.Ze(newValue)}.`);
|
|
2413
2332
|
}
|
|
2414
2333
|
}
|
|
2415
2334
|
/**
|
|
@@ -2430,10 +2349,10 @@ const MgInputNumeric = class {
|
|
|
2430
2349
|
*/
|
|
2431
2350
|
async setError(valid, errorMessage) {
|
|
2432
2351
|
if (typeof valid !== 'boolean') {
|
|
2433
|
-
throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
|
|
2352
|
+
throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean.');
|
|
2434
2353
|
}
|
|
2435
|
-
else if (!index$1.
|
|
2436
|
-
throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
|
|
2354
|
+
else if (!index$1.Qe(errorMessage)) {
|
|
2355
|
+
throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string.');
|
|
2437
2356
|
}
|
|
2438
2357
|
else {
|
|
2439
2358
|
this.setValidity(valid);
|
|
@@ -2450,7 +2369,7 @@ const MgInputNumeric = class {
|
|
|
2450
2369
|
this.valid = newValue;
|
|
2451
2370
|
this.invalid = !this.valid;
|
|
2452
2371
|
// We need to send valid event even if it is the same value
|
|
2453
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
2372
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
2454
2373
|
this.inputValid.emit(this.valid);
|
|
2455
2374
|
}
|
|
2456
2375
|
/**
|
|
@@ -2527,10 +2446,15 @@ const MgInputNumeric = class {
|
|
|
2527
2446
|
* @returns HTML Element
|
|
2528
2447
|
*/
|
|
2529
2448
|
render() {
|
|
2530
|
-
return (index.h("mg-input", { key: '
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2449
|
+
return (index.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
|
|
2450
|
+
? this.readonlyValue && this.renderReadonly()
|
|
2451
|
+
: [
|
|
2452
|
+
index.h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
2453
|
+
if (el !== null)
|
|
2454
|
+
this.input = el;
|
|
2455
|
+
} }),
|
|
2456
|
+
index.h("slot", { key: "slot", name: "append-input" }),
|
|
2457
|
+
]));
|
|
2534
2458
|
}
|
|
2535
2459
|
get element() { return index.getElement(this); }
|
|
2536
2460
|
static get watchers() { return {
|
|
@@ -2549,7 +2473,7 @@ const MgInputNumeric = class {
|
|
|
2549
2473
|
};
|
|
2550
2474
|
MgInputNumeric.style = MgInputNumericStyle0;
|
|
2551
2475
|
|
|
2552
|
-
const mgInputPasswordCss = ".mg-
|
|
2476
|
+
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))}";
|
|
2553
2477
|
const MgInputPasswordStyle0 = mgInputPasswordCss;
|
|
2554
2478
|
|
|
2555
2479
|
const MgInputPassword = class {
|
|
@@ -2573,7 +2497,7 @@ const MgInputPassword = class {
|
|
|
2573
2497
|
* Handle blur event
|
|
2574
2498
|
*/
|
|
2575
2499
|
this.handleBlur = () => {
|
|
2576
|
-
this.handlerInProgress =
|
|
2500
|
+
this.handlerInProgress = 'blur';
|
|
2577
2501
|
this.displayError().finally(() => {
|
|
2578
2502
|
// reset guard
|
|
2579
2503
|
this.handlerInProgress = undefined;
|
|
@@ -2660,7 +2584,7 @@ const MgInputPassword = class {
|
|
|
2660
2584
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
2661
2585
|
});
|
|
2662
2586
|
// apply new width
|
|
2663
|
-
if (newValue)
|
|
2587
|
+
if (newValue !== undefined)
|
|
2664
2588
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
2665
2589
|
}
|
|
2666
2590
|
/**
|
|
@@ -2681,10 +2605,10 @@ const MgInputPassword = class {
|
|
|
2681
2605
|
*/
|
|
2682
2606
|
async setError(valid, errorMessage) {
|
|
2683
2607
|
if (typeof valid !== 'boolean') {
|
|
2684
|
-
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean');
|
|
2608
|
+
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean.');
|
|
2685
2609
|
}
|
|
2686
|
-
else if (!index$1.
|
|
2687
|
-
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
|
|
2610
|
+
else if (!index$1.Qe(errorMessage)) {
|
|
2611
|
+
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string.');
|
|
2688
2612
|
}
|
|
2689
2613
|
else {
|
|
2690
2614
|
this.setValidity(valid);
|
|
@@ -2701,7 +2625,7 @@ const MgInputPassword = class {
|
|
|
2701
2625
|
this.valid = newValue;
|
|
2702
2626
|
this.invalid = !this.valid;
|
|
2703
2627
|
// We need to send valid event even if it is the same value
|
|
2704
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
2628
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
2705
2629
|
this.inputValid.emit(this.valid);
|
|
2706
2630
|
}
|
|
2707
2631
|
/*************
|
|
@@ -2729,10 +2653,10 @@ const MgInputPassword = class {
|
|
|
2729
2653
|
* @returns HTML Element
|
|
2730
2654
|
*/
|
|
2731
2655
|
render() {
|
|
2732
|
-
return (index.h("mg-input", { key: '
|
|
2656
|
+
return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (index.h("span", { class: "mg-c-input__input-group" }, index.h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
2733
2657
|
if (el !== null)
|
|
2734
2658
|
this.input = el;
|
|
2735
|
-
} }), index.h("mg-button", {
|
|
2659
|
+
} }), index.h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, index.h("mg-icon", { class: "mg-c-input__input-icon", icon: this.displayPassword ? 'eye-slash' : 'eye' }))))));
|
|
2736
2660
|
}
|
|
2737
2661
|
get element() { return index.getElement(this); }
|
|
2738
2662
|
static get watchers() { return {
|
|
@@ -2745,7 +2669,7 @@ const MgInputPassword = class {
|
|
|
2745
2669
|
};
|
|
2746
2670
|
MgInputPassword.style = MgInputPasswordStyle0;
|
|
2747
2671
|
|
|
2748
|
-
const mgInputRadioCss = ".mg-
|
|
2672
|
+
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}}";
|
|
2749
2673
|
const MgInputRadioStyle0 = mgInputRadioCss;
|
|
2750
2674
|
|
|
2751
2675
|
/**
|
|
@@ -2753,7 +2677,7 @@ const MgInputRadioStyle0 = mgInputRadioCss;
|
|
|
2753
2677
|
* @param option - radio option
|
|
2754
2678
|
* @returns radio option type is valid
|
|
2755
2679
|
*/
|
|
2756
|
-
const isOption$
|
|
2680
|
+
const isOption$3 = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
|
|
2757
2681
|
const MgInputRadio = class {
|
|
2758
2682
|
constructor(hostRef) {
|
|
2759
2683
|
index.registerInstance(this, hostRef);
|
|
@@ -2780,7 +2704,7 @@ const MgInputRadio = class {
|
|
|
2780
2704
|
* Handle blur event
|
|
2781
2705
|
*/
|
|
2782
2706
|
this.handleBlur = () => {
|
|
2783
|
-
this.handlerInProgress =
|
|
2707
|
+
this.handlerInProgress = 'blur';
|
|
2784
2708
|
this.checkValidity();
|
|
2785
2709
|
this.setErrorMessage();
|
|
2786
2710
|
// reset guard
|
|
@@ -2840,7 +2764,7 @@ const MgInputRadio = class {
|
|
|
2840
2764
|
if (index$1.Ge(this.items) && typeof newValue === 'string') {
|
|
2841
2765
|
this.readonlyValue = newValue;
|
|
2842
2766
|
}
|
|
2843
|
-
else if (this.items.every(isOption$
|
|
2767
|
+
else if (this.items.every(isOption$3)) {
|
|
2844
2768
|
this.readonlyValue = (_a = this.items.find(item => item.value === newValue)) === null || _a === void 0 ? void 0 : _a.title;
|
|
2845
2769
|
}
|
|
2846
2770
|
else {
|
|
@@ -2851,18 +2775,18 @@ const MgInputRadio = class {
|
|
|
2851
2775
|
validateItems(newValue) {
|
|
2852
2776
|
// Validate if items have required min length
|
|
2853
2777
|
if (typeof newValue === 'object' && newValue.length < 2) {
|
|
2854
|
-
throw new Error(
|
|
2778
|
+
throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${index$1.Ze(newValue)}.`);
|
|
2855
2779
|
}
|
|
2856
2780
|
// String array
|
|
2857
2781
|
else if (index$1.Ge(newValue)) {
|
|
2858
2782
|
this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
|
|
2859
2783
|
}
|
|
2860
2784
|
// Object array
|
|
2861
|
-
else if (newValue && newValue.every(item => isOption$
|
|
2785
|
+
else if (newValue && newValue.every(item => isOption$3(item))) {
|
|
2862
2786
|
this.options = newValue;
|
|
2863
2787
|
}
|
|
2864
2788
|
else {
|
|
2865
|
-
throw new Error(
|
|
2789
|
+
throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${index$1.Ze(newValue)}.`);
|
|
2866
2790
|
}
|
|
2867
2791
|
}
|
|
2868
2792
|
watchInputVerticalList(newValue) {
|
|
@@ -2911,10 +2835,10 @@ const MgInputRadio = class {
|
|
|
2911
2835
|
*/
|
|
2912
2836
|
async setError(valid, errorMessage) {
|
|
2913
2837
|
if (typeof valid !== 'boolean') {
|
|
2914
|
-
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean');
|
|
2838
|
+
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean.');
|
|
2915
2839
|
}
|
|
2916
|
-
else if (!index$1.
|
|
2917
|
-
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
|
|
2840
|
+
else if (!index$1.Qe(errorMessage)) {
|
|
2841
|
+
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string.');
|
|
2918
2842
|
}
|
|
2919
2843
|
else {
|
|
2920
2844
|
this.setValidity(valid);
|
|
@@ -2931,7 +2855,7 @@ const MgInputRadio = class {
|
|
|
2931
2855
|
this.valid = newValue;
|
|
2932
2856
|
this.invalid = !this.valid;
|
|
2933
2857
|
// We need to send valid event even if it is the same value
|
|
2934
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
2858
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
2935
2859
|
this.inputValid.emit(this.valid);
|
|
2936
2860
|
}
|
|
2937
2861
|
/*************
|
|
@@ -2962,10 +2886,10 @@ const MgInputRadio = class {
|
|
|
2962
2886
|
* @returns HTML Element
|
|
2963
2887
|
*/
|
|
2964
2888
|
render() {
|
|
2965
|
-
return (index.h("mg-input", { key: '
|
|
2889
|
+
return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index$1) => (index.h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
|
|
2966
2890
|
if (el !== null)
|
|
2967
2891
|
this.inputs[index$1] = el;
|
|
2968
|
-
} }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title)))))));
|
|
2892
|
+
} }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title))))))));
|
|
2969
2893
|
}
|
|
2970
2894
|
get element() { return index.getElement(this); }
|
|
2971
2895
|
static get watchers() { return {
|
|
@@ -2979,7 +2903,7 @@ const MgInputRadio = class {
|
|
|
2979
2903
|
};
|
|
2980
2904
|
MgInputRadio.style = MgInputRadioStyle0;
|
|
2981
2905
|
|
|
2982
|
-
const mgInputSelectCss = ".mg-
|
|
2906
|
+
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%}}";
|
|
2983
2907
|
const MgInputSelectStyle0 = mgInputSelectCss;
|
|
2984
2908
|
|
|
2985
2909
|
/**
|
|
@@ -2987,13 +2911,13 @@ const MgInputSelectStyle0 = mgInputSelectCss;
|
|
|
2987
2911
|
* @param option - select option
|
|
2988
2912
|
* @returns select option type is valid
|
|
2989
2913
|
*/
|
|
2990
|
-
const isOption$
|
|
2914
|
+
const isOption$2 = (option) => typeof option === 'object' && typeof option.title === 'string';
|
|
2991
2915
|
/**
|
|
2992
2916
|
* Check if items[] is SelectOption
|
|
2993
2917
|
* @param items - select option
|
|
2994
2918
|
* @returns select option array type is valid
|
|
2995
2919
|
*/
|
|
2996
|
-
const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption$
|
|
2920
|
+
const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption$2(item));
|
|
2997
2921
|
/**
|
|
2998
2922
|
* Check if item is a well configured optgroup
|
|
2999
2923
|
* @param optgroup - select option
|
|
@@ -3044,7 +2968,7 @@ const MgInputSelect = class {
|
|
|
3044
2968
|
* @param item - item to compare with
|
|
3045
2969
|
* @returns truthy if input.value is an item
|
|
3046
2970
|
*/
|
|
3047
|
-
this.isInputValue = (item) => item.title === this.input.value;
|
|
2971
|
+
this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
|
|
3048
2972
|
/**
|
|
3049
2973
|
* value props setter
|
|
3050
2974
|
* @param newValue - value to update with
|
|
@@ -3076,7 +3000,7 @@ const MgInputSelect = class {
|
|
|
3076
3000
|
* Handle blur event
|
|
3077
3001
|
*/
|
|
3078
3002
|
this.handleBlur = () => {
|
|
3079
|
-
this.handlerInProgress =
|
|
3003
|
+
this.handlerInProgress = 'blur';
|
|
3080
3004
|
this.displayError().finally(() => {
|
|
3081
3005
|
// reset guard
|
|
3082
3006
|
this.handlerInProgress = undefined;
|
|
@@ -3143,7 +3067,7 @@ const MgInputSelect = class {
|
|
|
3143
3067
|
validateValue(newValue) {
|
|
3144
3068
|
var _a, _b;
|
|
3145
3069
|
if (index$1.Ge(this.items) && typeof newValue === 'string') {
|
|
3146
|
-
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
|
|
3070
|
+
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== undefined ? this.input.value : newValue;
|
|
3147
3071
|
}
|
|
3148
3072
|
else if (allItemsAreOptions(this.items)) {
|
|
3149
3073
|
this.readonlyValue = (_b = this.items.find(item => item.value === newValue)) === null || _b === void 0 ? void 0 : _b.title;
|
|
@@ -3177,7 +3101,7 @@ const MgInputSelect = class {
|
|
|
3177
3101
|
}
|
|
3178
3102
|
}
|
|
3179
3103
|
else {
|
|
3180
|
-
throw new Error(
|
|
3104
|
+
throw new Error(`<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option. Passed value: ${index$1.Ze(newValue)}.`);
|
|
3181
3105
|
}
|
|
3182
3106
|
}
|
|
3183
3107
|
watchReadonly(newValue) {
|
|
@@ -3208,7 +3132,7 @@ const MgInputSelect = class {
|
|
|
3208
3132
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
3209
3133
|
});
|
|
3210
3134
|
// apply new width
|
|
3211
|
-
if (newValue)
|
|
3135
|
+
if (newValue !== undefined)
|
|
3212
3136
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3213
3137
|
}
|
|
3214
3138
|
/**
|
|
@@ -3229,10 +3153,10 @@ const MgInputSelect = class {
|
|
|
3229
3153
|
*/
|
|
3230
3154
|
async setError(valid, errorMessage) {
|
|
3231
3155
|
if (typeof valid !== 'boolean') {
|
|
3232
|
-
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
|
|
3156
|
+
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean.');
|
|
3233
3157
|
}
|
|
3234
|
-
else if (!index$1.
|
|
3235
|
-
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
|
|
3158
|
+
else if (!index$1.Qe(errorMessage)) {
|
|
3159
|
+
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string.');
|
|
3236
3160
|
}
|
|
3237
3161
|
else {
|
|
3238
3162
|
this.setValidity(valid);
|
|
@@ -3249,7 +3173,7 @@ const MgInputSelect = class {
|
|
|
3249
3173
|
this.valid = newValue;
|
|
3250
3174
|
this.invalid = !this.valid;
|
|
3251
3175
|
// We need to send valid event even if it is the same value
|
|
3252
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
3176
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
3253
3177
|
this.inputValid.emit(this.valid);
|
|
3254
3178
|
}
|
|
3255
3179
|
/*************
|
|
@@ -3284,11 +3208,11 @@ const MgInputSelect = class {
|
|
|
3284
3208
|
* @returns HTML Element
|
|
3285
3209
|
*/
|
|
3286
3210
|
render() {
|
|
3287
|
-
return (index.h("mg-input", { key: '
|
|
3211
|
+
return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
3288
3212
|
if (el !== null)
|
|
3289
3213
|
this.input = el;
|
|
3290
3214
|
} }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
3291
|
-
index.h("option", {
|
|
3215
|
+
index.h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (index.h("optgroup", { label: option.group, key: option.group }, option.options.map(this.renderOption))) : (isOption$2(option) && this.renderOption(option)))))));
|
|
3292
3216
|
}
|
|
3293
3217
|
get element() { return index.getElement(this); }
|
|
3294
3218
|
static get watchers() { return {
|
|
@@ -3302,16 +3226,21 @@ const MgInputSelect = class {
|
|
|
3302
3226
|
};
|
|
3303
3227
|
MgInputSelect.style = MgInputSelectStyle0;
|
|
3304
3228
|
|
|
3305
|
-
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)}";
|
|
3229
|
+
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)}";
|
|
3306
3230
|
const MgInputTextStyle0 = mgInputTextCss;
|
|
3307
3231
|
|
|
3232
|
+
/**
|
|
3233
|
+
* Check if object is an option
|
|
3234
|
+
* @param option - object to validate
|
|
3235
|
+
* @returns true id object is an option
|
|
3236
|
+
*/
|
|
3237
|
+
const isOption$1 = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
|
|
3308
3238
|
/**
|
|
3309
3239
|
* Check if datalist options are well structured.
|
|
3310
|
-
*
|
|
3311
3240
|
* @param options - Datalist options to check.
|
|
3312
3241
|
* @returns True if datalist is well structured.
|
|
3313
3242
|
*/
|
|
3314
|
-
const
|
|
3243
|
+
const isDatalistOptions = (options) => index$1.Ge(options) || (Array.isArray(options) && options.every(isOption$1));
|
|
3315
3244
|
const MgInputText = class {
|
|
3316
3245
|
constructor(hostRef) {
|
|
3317
3246
|
index.registerInstance(this, hostRef);
|
|
@@ -3353,7 +3282,7 @@ const MgInputText = class {
|
|
|
3353
3282
|
this.classCollection.delete(this.classFocus);
|
|
3354
3283
|
this.classCollection = new index$1.Ie(this.classCollection.classes);
|
|
3355
3284
|
// Display Error
|
|
3356
|
-
this.handlerInProgress =
|
|
3285
|
+
this.handlerInProgress = 'blur';
|
|
3357
3286
|
this.displayError().finally(() => {
|
|
3358
3287
|
// reset guard
|
|
3359
3288
|
this.handlerInProgress = undefined;
|
|
@@ -3391,7 +3320,13 @@ const MgInputText = class {
|
|
|
3391
3320
|
this.validateAppendSlot = () => {
|
|
3392
3321
|
const slotAppendInput = Array.from(this.element.querySelectorAll('[slot="append-input"]'));
|
|
3393
3322
|
if (slotAppendInput.length === 1) {
|
|
3394
|
-
|
|
3323
|
+
if (slotAppendInput[0].nodeName === 'MG-BUTTON') {
|
|
3324
|
+
this.classCollection.add(this.classIsInputGroupAppend);
|
|
3325
|
+
}
|
|
3326
|
+
else {
|
|
3327
|
+
this.classCollection.add(this.classIsAppendInputSlotContent);
|
|
3328
|
+
this.slotContent = slotAppendInput[0].textContent;
|
|
3329
|
+
}
|
|
3395
3330
|
}
|
|
3396
3331
|
else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
|
|
3397
3332
|
this.classCollection.add(this.classIsInputGroupAppend);
|
|
@@ -3402,7 +3337,14 @@ const MgInputText = class {
|
|
|
3402
3337
|
* Method to control datalist display condition
|
|
3403
3338
|
* @returns true if display condition success
|
|
3404
3339
|
*/
|
|
3405
|
-
this.hasDatalist = () =>
|
|
3340
|
+
this.hasDatalist = () => isDatalistOptions(this.datalistoptions) && this.datalistoptions.length > 0;
|
|
3341
|
+
/**
|
|
3342
|
+
* Renders the readonly content of the input component.
|
|
3343
|
+
* @returns The readonly content element.
|
|
3344
|
+
*/
|
|
3345
|
+
this.renderReadonly = () => {
|
|
3346
|
+
return this.slotContent !== undefined ? (index.h("span", { class: "mg-c-input__readonly-value" }, index.h("b", null, this.value), this.slotContent)) : (index.h("b", { class: "mg-c-input__readonly-value" }, this.value));
|
|
3347
|
+
};
|
|
3406
3348
|
this.value = undefined;
|
|
3407
3349
|
this.identifier = undefined;
|
|
3408
3350
|
this.name = this.identifier;
|
|
@@ -3422,7 +3364,7 @@ const MgInputText = class {
|
|
|
3422
3364
|
this.patternErrorMessage = undefined;
|
|
3423
3365
|
this.tooltip = undefined;
|
|
3424
3366
|
this.tooltipPosition = 'input';
|
|
3425
|
-
this.
|
|
3367
|
+
this.characterLeftHide = false;
|
|
3426
3368
|
this.helpText = undefined;
|
|
3427
3369
|
this.valid = undefined;
|
|
3428
3370
|
this.invalid = undefined;
|
|
@@ -3430,7 +3372,13 @@ const MgInputText = class {
|
|
|
3430
3372
|
this.errorMessage = undefined;
|
|
3431
3373
|
}
|
|
3432
3374
|
handleValue(newValue) {
|
|
3433
|
-
|
|
3375
|
+
var _a, _b;
|
|
3376
|
+
if ((_a = this.datalistoptions) === null || _a === void 0 ? void 0 : _a.every(isOption$1)) {
|
|
3377
|
+
this.valueChange.emit(((_b = this.datalistoptions.find(option => option.title === newValue)) === null || _b === void 0 ? void 0 : _b.value) || newValue);
|
|
3378
|
+
}
|
|
3379
|
+
else {
|
|
3380
|
+
this.valueChange.emit(newValue);
|
|
3381
|
+
}
|
|
3434
3382
|
}
|
|
3435
3383
|
validateIcon(newValue) {
|
|
3436
3384
|
if (newValue !== undefined) {
|
|
@@ -3441,8 +3389,8 @@ const MgInputText = class {
|
|
|
3441
3389
|
}
|
|
3442
3390
|
}
|
|
3443
3391
|
validateDatalistoptions(newValue) {
|
|
3444
|
-
if (Boolean(newValue) && !
|
|
3445
|
-
throw new Error(
|
|
3392
|
+
if (Boolean(newValue) && !isDatalistOptions(newValue)) {
|
|
3393
|
+
throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${index$1.Ze(newValue)}.`);
|
|
3446
3394
|
}
|
|
3447
3395
|
}
|
|
3448
3396
|
watchReadonly(newValue) {
|
|
@@ -3473,12 +3421,12 @@ const MgInputText = class {
|
|
|
3473
3421
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
3474
3422
|
});
|
|
3475
3423
|
// apply new width
|
|
3476
|
-
if (newValue)
|
|
3424
|
+
if (newValue !== undefined)
|
|
3477
3425
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3478
3426
|
}
|
|
3479
3427
|
validatePattern(newValue) {
|
|
3480
|
-
if (newValue !== undefined && !(index$1.
|
|
3481
|
-
throw new Error(
|
|
3428
|
+
if (newValue !== undefined && !(index$1.Qe(this.pattern) && index$1.Qe(this.patternErrorMessage))) {
|
|
3429
|
+
throw new Error(`<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${index$1.Ze(this.pattern)}'" and "patternErrorMessage='${index$1.Ze(this.patternErrorMessage)}'".`);
|
|
3482
3430
|
}
|
|
3483
3431
|
}
|
|
3484
3432
|
/**
|
|
@@ -3505,10 +3453,10 @@ const MgInputText = class {
|
|
|
3505
3453
|
*/
|
|
3506
3454
|
async setError(valid, errorMessage) {
|
|
3507
3455
|
if (typeof valid !== 'boolean') {
|
|
3508
|
-
throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean');
|
|
3456
|
+
throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean.');
|
|
3509
3457
|
}
|
|
3510
|
-
else if (!index$1.
|
|
3511
|
-
throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
|
|
3458
|
+
else if (!index$1.Qe(errorMessage)) {
|
|
3459
|
+
throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string.');
|
|
3512
3460
|
}
|
|
3513
3461
|
else {
|
|
3514
3462
|
this.setValidity(valid);
|
|
@@ -3525,7 +3473,7 @@ const MgInputText = class {
|
|
|
3525
3473
|
this.valid = newValue;
|
|
3526
3474
|
this.invalid = !this.valid;
|
|
3527
3475
|
// We need to send valid event even if it is the same value
|
|
3528
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
3476
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
3529
3477
|
this.inputValid.emit(this.valid);
|
|
3530
3478
|
}
|
|
3531
3479
|
/*************
|
|
@@ -3561,14 +3509,19 @@ const MgInputText = class {
|
|
|
3561
3509
|
* @returns HTML Element
|
|
3562
3510
|
*/
|
|
3563
3511
|
render() {
|
|
3564
|
-
return (index.h("mg-input", { key: '
|
|
3565
|
-
|
|
3566
|
-
|
|
3567
|
-
|
|
3568
|
-
|
|
3569
|
-
|
|
3570
|
-
|
|
3571
|
-
|
|
3512
|
+
return (index.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
|
|
3513
|
+
? this.value && this.renderReadonly()
|
|
3514
|
+
: [
|
|
3515
|
+
index.h("div", { key: "input", class: "mg-c-input__with-character-left", style: {
|
|
3516
|
+
'--mg-c-character-left-message-length': (!this.characterLeftHide
|
|
3517
|
+
? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
|
|
3518
|
+
: 0).toString(),
|
|
3519
|
+
} }, this.icon !== undefined && index.h("mg-icon", { icon: this.icon }), index.h("input", { type: this.type, class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
3520
|
+
if (el !== null)
|
|
3521
|
+
this.input = el;
|
|
3522
|
+
} }), this.hasDatalist() && (index.h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (index.h("option", { value: isOption$1(option) ? option.title : option, key: option }))))), !this.characterLeftHide && this.maxlength > 0 && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))),
|
|
3523
|
+
index.h("slot", { key: "slot", name: "append-input" }),
|
|
3524
|
+
]));
|
|
3572
3525
|
}
|
|
3573
3526
|
get element() { return index.getElement(this); }
|
|
3574
3527
|
static get watchers() { return {
|
|
@@ -3585,7 +3538,7 @@ const MgInputText = class {
|
|
|
3585
3538
|
};
|
|
3586
3539
|
MgInputText.style = MgInputTextStyle0;
|
|
3587
3540
|
|
|
3588
|
-
const mgInputTextareaCss = ".mg-
|
|
3541
|
+
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}}";
|
|
3589
3542
|
const MgInputTextareaStyle0 = mgInputTextareaCss;
|
|
3590
3543
|
|
|
3591
3544
|
const MgInputTextarea = class {
|
|
@@ -3598,7 +3551,7 @@ const MgInputTextarea = class {
|
|
|
3598
3551
|
************/
|
|
3599
3552
|
// Classes
|
|
3600
3553
|
this.classFocus = 'mg-u-is-focused';
|
|
3601
|
-
this.
|
|
3554
|
+
this.classDisplayCharacterLeft = 'mg-c-input--display-character-left';
|
|
3602
3555
|
// hasDisplayedError (triggered by blur event)
|
|
3603
3556
|
this.hasDisplayedError = false;
|
|
3604
3557
|
/**
|
|
@@ -3626,7 +3579,7 @@ const MgInputTextarea = class {
|
|
|
3626
3579
|
this.classCollection.delete(this.classFocus);
|
|
3627
3580
|
this.classCollection = new index$1.Ie(this.classCollection.classes);
|
|
3628
3581
|
// Display Error
|
|
3629
|
-
this.handlerInProgress =
|
|
3582
|
+
this.handlerInProgress = 'blur';
|
|
3630
3583
|
this.displayError().finally(() => {
|
|
3631
3584
|
// reset guard
|
|
3632
3585
|
this.handlerInProgress = undefined;
|
|
@@ -3682,7 +3635,7 @@ const MgInputTextarea = class {
|
|
|
3682
3635
|
this.rows = 3;
|
|
3683
3636
|
this.tooltip = undefined;
|
|
3684
3637
|
this.tooltipPosition = 'input';
|
|
3685
|
-
this.
|
|
3638
|
+
this.characterLeftHide = false;
|
|
3686
3639
|
this.helpText = undefined;
|
|
3687
3640
|
this.valid = undefined;
|
|
3688
3641
|
this.invalid = undefined;
|
|
@@ -3722,20 +3675,20 @@ const MgInputTextarea = class {
|
|
|
3722
3675
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
3723
3676
|
});
|
|
3724
3677
|
// apply new width
|
|
3725
|
-
if (newValue)
|
|
3678
|
+
if (newValue !== undefined)
|
|
3726
3679
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3727
3680
|
}
|
|
3728
3681
|
validatePattern(newValue) {
|
|
3729
|
-
if (newValue !== undefined && !(index$1.
|
|
3730
|
-
throw new Error(
|
|
3682
|
+
if (newValue !== undefined && !(index$1.Qe(this.pattern) && index$1.Qe(this.patternErrorMessage))) {
|
|
3683
|
+
throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${index$1.Ze(this.pattern)}'" and "patternErrorMessage='${index$1.Ze(this.patternErrorMessage)}'".`);
|
|
3731
3684
|
}
|
|
3732
3685
|
}
|
|
3733
|
-
|
|
3686
|
+
validatecharacterLeftHide(newValue) {
|
|
3734
3687
|
if (newValue) {
|
|
3735
|
-
this.classCollection.
|
|
3688
|
+
this.classCollection.delete(this.classDisplayCharacterLeft);
|
|
3736
3689
|
}
|
|
3737
3690
|
else {
|
|
3738
|
-
this.classCollection.
|
|
3691
|
+
this.classCollection.add(this.classDisplayCharacterLeft);
|
|
3739
3692
|
}
|
|
3740
3693
|
}
|
|
3741
3694
|
/**
|
|
@@ -3756,10 +3709,10 @@ const MgInputTextarea = class {
|
|
|
3756
3709
|
*/
|
|
3757
3710
|
async setError(valid, errorMessage) {
|
|
3758
3711
|
if (typeof valid !== 'boolean') {
|
|
3759
|
-
throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean');
|
|
3712
|
+
throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean.');
|
|
3760
3713
|
}
|
|
3761
|
-
else if (!index$1.
|
|
3762
|
-
throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
|
|
3714
|
+
else if (!index$1.Qe(errorMessage)) {
|
|
3715
|
+
throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string.');
|
|
3763
3716
|
}
|
|
3764
3717
|
else {
|
|
3765
3718
|
this.setValidity(valid);
|
|
@@ -3776,7 +3729,7 @@ const MgInputTextarea = class {
|
|
|
3776
3729
|
this.valid = newValue;
|
|
3777
3730
|
this.invalid = !this.valid;
|
|
3778
3731
|
// We need to send valid event even if it is the same value
|
|
3779
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
3732
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
3780
3733
|
this.inputValid.emit(this.valid);
|
|
3781
3734
|
}
|
|
3782
3735
|
/*************
|
|
@@ -3791,7 +3744,7 @@ const MgInputTextarea = class {
|
|
|
3791
3744
|
this.messages = index$1.initLocales(this.element).messages;
|
|
3792
3745
|
this.characterLeftId = `${this.identifier}-character-left`;
|
|
3793
3746
|
// Validate
|
|
3794
|
-
this.
|
|
3747
|
+
this.validatecharacterLeftHide(this.characterLeftHide);
|
|
3795
3748
|
this.validatePattern(this.pattern);
|
|
3796
3749
|
this.validatePattern(this.patternErrorMessage);
|
|
3797
3750
|
this.watchMgWidth(this.mgWidth);
|
|
@@ -3809,7 +3762,7 @@ const MgInputTextarea = class {
|
|
|
3809
3762
|
* @returns HTML Element
|
|
3810
3763
|
*/
|
|
3811
3764
|
render() {
|
|
3812
|
-
return (index.h("mg-input", { key: '
|
|
3765
|
+
return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (index.h("div", { class: "mg-c-input__with-character-left" }, index.h("textarea", { class: {
|
|
3813
3766
|
'mg-c-input__box': true,
|
|
3814
3767
|
'mg-c-input__box--width': true,
|
|
3815
3768
|
'mg-c-input__box--resizable': this.resizable === 'both',
|
|
@@ -3818,7 +3771,7 @@ const MgInputTextarea = class {
|
|
|
3818
3771
|
}, 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) => {
|
|
3819
3772
|
if (el !== null)
|
|
3820
3773
|
this.input = el;
|
|
3821
|
-
} }), this.
|
|
3774
|
+
} }), !this.characterLeftHide && this.maxlength > 0 && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))))));
|
|
3822
3775
|
}
|
|
3823
3776
|
get element() { return index.getElement(this); }
|
|
3824
3777
|
static get watchers() { return {
|
|
@@ -3829,12 +3782,12 @@ const MgInputTextarea = class {
|
|
|
3829
3782
|
"mgWidth": ["watchMgWidth"],
|
|
3830
3783
|
"pattern": ["validatePattern"],
|
|
3831
3784
|
"patternErrorMessage": ["validatePattern"],
|
|
3832
|
-
"
|
|
3785
|
+
"characterLeftHide": ["validatecharacterLeftHide"]
|
|
3833
3786
|
}; }
|
|
3834
3787
|
};
|
|
3835
3788
|
MgInputTextarea.style = MgInputTextareaStyle0;
|
|
3836
3789
|
|
|
3837
|
-
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:
|
|
3790
|
+
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)}";
|
|
3838
3791
|
const MgInputTitleStyle0 = mgInputTitleCss;
|
|
3839
3792
|
|
|
3840
3793
|
const MgInputTitle = class {
|
|
@@ -3847,7 +3800,7 @@ const MgInputTitle = class {
|
|
|
3847
3800
|
this.tagName = 'label';
|
|
3848
3801
|
}
|
|
3849
3802
|
validateIdentifier(newValue) {
|
|
3850
|
-
if (!index$1.
|
|
3803
|
+
if (!index$1.Qe(newValue)) {
|
|
3851
3804
|
throw new Error('<mg-input-title> prop "identifier" is required.');
|
|
3852
3805
|
}
|
|
3853
3806
|
}
|
|
@@ -3871,7 +3824,7 @@ const MgInputTitle = class {
|
|
|
3871
3824
|
render() {
|
|
3872
3825
|
const TagName = this.readonly ? 'span' : this.tagName;
|
|
3873
3826
|
// \u00A0 represent a
|
|
3874
|
-
return (index.h(TagName, { key: '
|
|
3827
|
+
return (index.h(TagName, { key: '2b9a091bea26abed3179e0af163c4622f5d5bdc3', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, index.h("slot", { key: 'a167a4309b176c4a896f50764a8d3df53ad6f0b6' }), this.required && !this.readonly && (index.h("span", { key: 'c2b32a0101b2f43fdb45d8f074297c5f9250c628', class: "mg-c-input-title__required" }, "\u00A0", index.h("span", { key: 'f9932b7ba646b5e904f33a88d8dfce0e471141dc', class: "mg-u-is-asterisk" }, "*")))));
|
|
3875
3828
|
}
|
|
3876
3829
|
static get watchers() { return {
|
|
3877
3830
|
"identifier": ["validateIdentifier"],
|
|
@@ -3880,7 +3833,7 @@ const MgInputTitle = class {
|
|
|
3880
3833
|
};
|
|
3881
3834
|
MgInputTitle.style = MgInputTitleStyle0;
|
|
3882
3835
|
|
|
3883
|
-
const mgInputToggleCss = ".mg-
|
|
3836
|
+
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}";
|
|
3884
3837
|
const MgInputToggleStyle0 = mgInputToggleCss;
|
|
3885
3838
|
|
|
3886
3839
|
/**
|
|
@@ -3975,7 +3928,7 @@ const MgInputToggle = class {
|
|
|
3975
3928
|
}
|
|
3976
3929
|
validateItems(newValue) {
|
|
3977
3930
|
if (typeof newValue === 'object' && this.items.length !== 2) {
|
|
3978
|
-
throw new Error(
|
|
3931
|
+
throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${index$1.Ze(newValue)}.`);
|
|
3979
3932
|
}
|
|
3980
3933
|
// String array
|
|
3981
3934
|
else if (index$1.Ge(newValue)) {
|
|
@@ -3986,7 +3939,7 @@ const MgInputToggle = class {
|
|
|
3986
3939
|
this.options = newValue;
|
|
3987
3940
|
}
|
|
3988
3941
|
else {
|
|
3989
|
-
throw new Error(
|
|
3942
|
+
throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${index$1.Ze(newValue)}.`);
|
|
3990
3943
|
}
|
|
3991
3944
|
}
|
|
3992
3945
|
watchIsOnOff(newValue) {
|
|
@@ -4032,10 +3985,10 @@ const MgInputToggle = class {
|
|
|
4032
3985
|
*/
|
|
4033
3986
|
async setError(valid, errorMessage) {
|
|
4034
3987
|
if (typeof valid !== 'boolean') {
|
|
4035
|
-
throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
|
|
3988
|
+
throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');
|
|
4036
3989
|
}
|
|
4037
|
-
else if (!index$1.
|
|
4038
|
-
throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
|
|
3990
|
+
else if (!index$1.Qe(errorMessage)) {
|
|
3991
|
+
throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
|
|
4039
3992
|
}
|
|
4040
3993
|
else {
|
|
4041
3994
|
this.valid = valid;
|
|
@@ -4089,8 +4042,8 @@ const MgInputToggle = class {
|
|
|
4089
4042
|
* @returns HTML Element
|
|
4090
4043
|
*/
|
|
4091
4044
|
render() {
|
|
4092
|
-
|
|
4093
|
-
return (index.h("mg-input", { key: '
|
|
4045
|
+
const checkedItem = this.getCheckedItem(this.checked);
|
|
4046
|
+
return (index.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 && index.h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (index.h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-1" })), index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-2" }))))));
|
|
4094
4047
|
}
|
|
4095
4048
|
get element() { return index.getElement(this); }
|
|
4096
4049
|
static get watchers() { return {
|
|
@@ -4111,11 +4064,10 @@ MgInputToggle.style = MgInputToggleStyle0;
|
|
|
4111
4064
|
* @returns truthy if element is mg-item-more
|
|
4112
4065
|
*/
|
|
4113
4066
|
const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
|
|
4114
|
-
|
|
4115
|
-
|
|
4116
|
-
|
|
4117
|
-
|
|
4118
|
-
})(OverflowBehaviorElements || (OverflowBehaviorElements = {}));
|
|
4067
|
+
const OverflowBehaviorElements = {
|
|
4068
|
+
BASE_INDEX: 'data-overflow-base-index',
|
|
4069
|
+
PROXY_INDEX: 'data-overflow-proxy-index',
|
|
4070
|
+
};
|
|
4119
4071
|
class OverflowBehavior {
|
|
4120
4072
|
constructor(element, render) {
|
|
4121
4073
|
this.element = element;
|
|
@@ -4171,9 +4123,9 @@ class OverflowBehavior {
|
|
|
4171
4123
|
[...this._baseChildren, this._moreElement].forEach((child) => {
|
|
4172
4124
|
acc.accWidth += child.offsetWidth;
|
|
4173
4125
|
const hasPreviuosItem = acc.previousItem !== null;
|
|
4174
|
-
const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.
|
|
4175
|
-
// if previous item is hidden AND is NOT more element we
|
|
4176
|
-
// OR if item has an overflow we
|
|
4126
|
+
const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.hasAttribute('hidden');
|
|
4127
|
+
// if previous item is hidden AND is NOT more element we hide current
|
|
4128
|
+
// OR if item has an overflow we hide current
|
|
4177
4129
|
// OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item
|
|
4178
4130
|
// ELSE current is a display item
|
|
4179
4131
|
this.toggleItem(child, (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden));
|
|
@@ -4217,7 +4169,7 @@ class OverflowBehavior {
|
|
|
4217
4169
|
}
|
|
4218
4170
|
};
|
|
4219
4171
|
/**
|
|
4220
|
-
* Toggle element's
|
|
4172
|
+
* Toggle element's hide attribute
|
|
4221
4173
|
* @param element - element to toggle
|
|
4222
4174
|
* @param isHidden - element is hidden
|
|
4223
4175
|
*/
|
|
@@ -4262,10 +4214,10 @@ const MgItemMore = class {
|
|
|
4262
4214
|
*/
|
|
4263
4215
|
this.setProxyElement = (proxified) => {
|
|
4264
4216
|
const proxy = this.moreElementMenuItem.querySelector(`[identifier="${proxified.identifier}"]`);
|
|
4265
|
-
if (
|
|
4217
|
+
if (proxy === null)
|
|
4266
4218
|
return;
|
|
4267
4219
|
// remove proxy id to prevent duplicate key. default html id is: '';
|
|
4268
|
-
if (index$1.
|
|
4220
|
+
if (index$1.Qe(proxy.id))
|
|
4269
4221
|
proxy.id = '';
|
|
4270
4222
|
const proxyClickHandler = () => {
|
|
4271
4223
|
this.parentMenu
|
|
@@ -4309,8 +4261,8 @@ const MgItemMore = class {
|
|
|
4309
4261
|
// create item-more menu items element from main menu-items clones
|
|
4310
4262
|
this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
|
|
4311
4263
|
// we need to get all `mg-menu-item` linked to the cloned one to set mirror process
|
|
4312
|
-
index$1.
|
|
4313
|
-
if (child.querySelector('mg-menu')) {
|
|
4264
|
+
index$1.Ve(() => {
|
|
4265
|
+
if (child.querySelector('mg-menu') !== null) {
|
|
4314
4266
|
child.querySelectorAll('mg-menu-item').forEach(this.setProxyElement);
|
|
4315
4267
|
}
|
|
4316
4268
|
else {
|
|
@@ -4327,17 +4279,17 @@ const MgItemMore = class {
|
|
|
4327
4279
|
}
|
|
4328
4280
|
validateIcon(newValue) {
|
|
4329
4281
|
if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
|
|
4330
|
-
throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`);
|
|
4282
|
+
throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${index$1.Ze(newValue)}.`);
|
|
4331
4283
|
}
|
|
4332
4284
|
validateSlotLabel(newValue) {
|
|
4333
4285
|
if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
|
|
4334
|
-
throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);
|
|
4286
|
+
throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${index$1.Ze(newValue)}.`);
|
|
4335
4287
|
else if (typeof newValue.label !== 'string')
|
|
4336
4288
|
this.slotlabel.label = this.messages.menuLabel;
|
|
4337
4289
|
}
|
|
4338
4290
|
validateSize(newValue) {
|
|
4339
4291
|
if (newValue && !sizes$2.includes(newValue))
|
|
4340
|
-
throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
|
|
4292
|
+
throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${index$1.Ze(newValue)}.`);
|
|
4341
4293
|
}
|
|
4342
4294
|
/*************
|
|
4343
4295
|
* Lifecycle *
|
|
@@ -4367,7 +4319,7 @@ const MgItemMore = class {
|
|
|
4367
4319
|
* Set OverflowBehavior when parentMenu state is upate AND defined
|
|
4368
4320
|
*/
|
|
4369
4321
|
componentDidUpdate() {
|
|
4370
|
-
if (this.parentMenu &&
|
|
4322
|
+
if (this.parentMenu && this.overflowBehavior === undefined) {
|
|
4371
4323
|
this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM');
|
|
4372
4324
|
this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
|
|
4373
4325
|
}
|
|
@@ -4384,10 +4336,11 @@ const MgItemMore = class {
|
|
|
4384
4336
|
* @returns HTML Element
|
|
4385
4337
|
*/
|
|
4386
4338
|
render() {
|
|
4387
|
-
return (index.h(index.Host, { key: '
|
|
4388
|
-
if (el)
|
|
4339
|
+
return (index.h(index.Host, { key: '57dda64ff7dcb6dbf50bcd1e887fd6fb7733d533', role: "listitem" }, this.parentMenu && (index.h("mg-menu-item", { key: 'b975001df7dfeae4ea14b3e208245240e9868ae4', "data-overflow-more": true, "data-size": this.parentMenu.size, identifier: "mg-item-more", ref: el => {
|
|
4340
|
+
if (el !== null) {
|
|
4389
4341
|
this.moreElementMenuItem = el;
|
|
4390
|
-
|
|
4342
|
+
}
|
|
4343
|
+
} }, index.h("mg-icon", { key: 'f0837050757fe920e71c6060e4fb873c8bab43b7', icon: this.icon.icon, size: this.size, slot: "image" }), index.h("span", { key: '7155b47f84cc2193dec65bcccbbaa93776e5daa1', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { key: '9295f68e1799a313cc93cdbf6bd75cea3aa1ecd0', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
|
|
4391
4344
|
}
|
|
4392
4345
|
get element() { return index.getElement(this); }
|
|
4393
4346
|
static get watchers() { return {
|
|
@@ -4398,7 +4351,7 @@ const MgItemMore = class {
|
|
|
4398
4351
|
};
|
|
4399
4352
|
MgItemMore.style = MgItemMoreStyle0;
|
|
4400
4353
|
|
|
4401
|
-
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:
|
|
4354
|
+
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}";
|
|
4402
4355
|
const MgMenuStyle0 = mgMenuCss;
|
|
4403
4356
|
|
|
4404
4357
|
const MgMenu = class {
|
|
@@ -4438,7 +4391,8 @@ const MgMenu = class {
|
|
|
4438
4391
|
item.shadowRoot.querySelector('button,a').addEventListener(trigger, () => {
|
|
4439
4392
|
this.focusedMenuItem = index;
|
|
4440
4393
|
// reset expanded on previous active menu item
|
|
4441
|
-
|
|
4394
|
+
const itemMoreMenuItem = this.getItemMoreMenuItem();
|
|
4395
|
+
(![null, undefined].includes(itemMoreMenuItem) ? [...this.menuItems, itemMoreMenuItem] : this.menuItems).forEach((item, index) => {
|
|
4442
4396
|
this.closeMenuItem(item, index !== this.focusedMenuItem);
|
|
4443
4397
|
});
|
|
4444
4398
|
});
|
|
@@ -4463,11 +4417,12 @@ const MgMenu = class {
|
|
|
4463
4417
|
* render mg-item-more
|
|
4464
4418
|
*/
|
|
4465
4419
|
this.renderMgItemMore = () => {
|
|
4420
|
+
var _a;
|
|
4466
4421
|
if (this.direction !== Direction.HORIZONTAL || this.isChildMenu || this.element.children.length <= 1) {
|
|
4467
4422
|
return;
|
|
4468
4423
|
}
|
|
4469
4424
|
// Insert mg-item-more outside the mg-menu shadowdom
|
|
4470
|
-
if (
|
|
4425
|
+
if (this.itemMoreElement === undefined) {
|
|
4471
4426
|
this.itemMoreElement = document.createElement('mg-item-more');
|
|
4472
4427
|
this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);
|
|
4473
4428
|
this.element.appendChild(this.itemMoreElement);
|
|
@@ -4483,34 +4438,36 @@ const MgMenu = class {
|
|
|
4483
4438
|
this.itemMoreElement[attribute] = newValue;
|
|
4484
4439
|
}
|
|
4485
4440
|
}
|
|
4441
|
+
if (((_a = this.itemmore) === null || _a === void 0 ? void 0 : _a.size) === undefined)
|
|
4442
|
+
this.itemMoreElement.size = this.size;
|
|
4486
4443
|
};
|
|
4487
4444
|
this.label = undefined;
|
|
4488
4445
|
this.direction = Direction.HORIZONTAL;
|
|
4489
4446
|
this.itemmore = undefined;
|
|
4490
|
-
this.size = '
|
|
4447
|
+
this.size = 'medium';
|
|
4491
4448
|
this.isChildMenu = undefined;
|
|
4492
4449
|
}
|
|
4493
4450
|
validateLabel(newValue) {
|
|
4494
|
-
if (newValue === undefined && !this.element.
|
|
4495
|
-
throw new Error(`<${this.name}> prop "label" is required.`);
|
|
4451
|
+
if (newValue === undefined && !this.element.hasAttribute('aria-label')) {
|
|
4452
|
+
throw new Error(`<${this.name}> prop "label" is required. Passed value: ${index$1.Ze(newValue)}.`);
|
|
4496
4453
|
}
|
|
4497
4454
|
}
|
|
4498
4455
|
validateDirection(newValue) {
|
|
4499
4456
|
if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {
|
|
4500
|
-
throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
|
|
4457
|
+
throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
4501
4458
|
}
|
|
4502
4459
|
}
|
|
4503
4460
|
validateItemMore(newValue) {
|
|
4504
4461
|
if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
|
|
4505
4462
|
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
|
|
4506
4463
|
}
|
|
4507
|
-
else if (newValue) {
|
|
4464
|
+
else if (newValue !== undefined) {
|
|
4508
4465
|
this.renderMgItemMore();
|
|
4509
4466
|
}
|
|
4510
4467
|
}
|
|
4511
4468
|
validateSize(newValue) {
|
|
4512
4469
|
if (!sizes$2.includes(newValue)) {
|
|
4513
|
-
throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$2.join(', ')}.`);
|
|
4470
|
+
throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$2.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
4514
4471
|
}
|
|
4515
4472
|
}
|
|
4516
4473
|
/*************
|
|
@@ -4557,7 +4514,7 @@ const MgMenu = class {
|
|
|
4557
4514
|
* @returns HTML Element
|
|
4558
4515
|
*/
|
|
4559
4516
|
render() {
|
|
4560
|
-
return (index.h(index.Host, { key: '
|
|
4517
|
+
return (index.h(index.Host, { key: '550624e40ec66eeb90f8bc4ac1590adcbaa20dfd', role: "list", "aria-label": this.label }, index.h("slot", { key: 'bf6f5ac748fd45e250c02d93cc7cf72e4580de3b' })));
|
|
4561
4518
|
}
|
|
4562
4519
|
get element() { return index.getElement(this); }
|
|
4563
4520
|
static get watchers() { return {
|
|
@@ -4569,7 +4526,7 @@ const MgMenu = class {
|
|
|
4569
4526
|
};
|
|
4570
4527
|
MgMenu.style = MgMenuStyle0;
|
|
4571
4528
|
|
|
4572
|
-
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}";
|
|
4529
|
+
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}";
|
|
4573
4530
|
const MgMenuItemStyle0 = mgMenuItemCss;
|
|
4574
4531
|
|
|
4575
4532
|
const MgMenuItem = class {
|
|
@@ -4613,8 +4570,7 @@ const MgMenuItem = class {
|
|
|
4613
4570
|
this.updateDisplayNotificationBadge = () => {
|
|
4614
4571
|
const childMenu = this.element.querySelector('mg-menu');
|
|
4615
4572
|
this.displayNotificationBadge =
|
|
4616
|
-
childMenu !== null &&
|
|
4617
|
-
Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);
|
|
4573
|
+
childMenu !== null && Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && !subItem.hasAttribute('hidden'));
|
|
4618
4574
|
};
|
|
4619
4575
|
/**
|
|
4620
4576
|
* Method to control if one of component children have active status
|
|
@@ -4622,7 +4578,7 @@ const MgMenuItem = class {
|
|
|
4622
4578
|
*/
|
|
4623
4579
|
this.hasActiveChild = () => {
|
|
4624
4580
|
var _a;
|
|
4625
|
-
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.
|
|
4581
|
+
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'));
|
|
4626
4582
|
};
|
|
4627
4583
|
/**
|
|
4628
4584
|
* Validate slots
|
|
@@ -4635,9 +4591,9 @@ const MgMenuItem = class {
|
|
|
4635
4591
|
throw new Error(`<${this.name}> slot "label" is required.`);
|
|
4636
4592
|
['label', 'metadata'].forEach(slot => {
|
|
4637
4593
|
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
|
|
4638
|
-
if (!index$1.
|
|
4594
|
+
if (!index$1.Qe(element.textContent))
|
|
4639
4595
|
throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
|
|
4640
|
-
if ((guard && element.
|
|
4596
|
+
if ((guard && !element.hasAttribute('title')) || !guard)
|
|
4641
4597
|
element.setAttribute('title', element.textContent);
|
|
4642
4598
|
});
|
|
4643
4599
|
});
|
|
@@ -4709,7 +4665,7 @@ const MgMenuItem = class {
|
|
|
4709
4665
|
this.target = undefined;
|
|
4710
4666
|
this.status = Status$1.VISIBLE;
|
|
4711
4667
|
this.expanded = false;
|
|
4712
|
-
this.size = '
|
|
4668
|
+
this.size = 'medium';
|
|
4713
4669
|
this.navigationButtonClassList = new index$1.Ie([this.navigationButton]);
|
|
4714
4670
|
this.direction = undefined;
|
|
4715
4671
|
this.isInMainMenu = undefined;
|
|
@@ -4719,7 +4675,7 @@ const MgMenuItem = class {
|
|
|
4719
4675
|
}
|
|
4720
4676
|
watchTarget(newValue) {
|
|
4721
4677
|
if (newValue && !targets.includes(newValue)) {
|
|
4722
|
-
throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}
|
|
4678
|
+
throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
4723
4679
|
}
|
|
4724
4680
|
}
|
|
4725
4681
|
validateStatus(newValue, oldValue) {
|
|
@@ -4731,7 +4687,7 @@ const MgMenuItem = class {
|
|
|
4731
4687
|
}
|
|
4732
4688
|
validateExpanded(newValue) {
|
|
4733
4689
|
if (typeof newValue !== 'boolean')
|
|
4734
|
-
throw new Error(`<${this.name}> prop "expanded" must be a boolean.`);
|
|
4690
|
+
throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${index$1.Ze(newValue)}.`);
|
|
4735
4691
|
// if menu-item has sub-menu we have to apply some updates:
|
|
4736
4692
|
if (this.hasChildren) {
|
|
4737
4693
|
const subItems = Array.from(this.element.querySelectorAll(this.name));
|
|
@@ -4777,7 +4733,7 @@ const MgMenuItem = class {
|
|
|
4777
4733
|
updatePopoverGuard() {
|
|
4778
4734
|
if (this.displayPopover())
|
|
4779
4735
|
Array.from(this.element.children)
|
|
4780
|
-
.filter((child) => child.
|
|
4736
|
+
.filter((child) => !child.hasAttribute('slot') && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))
|
|
4781
4737
|
.forEach((slot) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));
|
|
4782
4738
|
}
|
|
4783
4739
|
/*************
|
|
@@ -4845,19 +4801,20 @@ const MgMenuItem = class {
|
|
|
4845
4801
|
*/
|
|
4846
4802
|
renderInteractiveElement() {
|
|
4847
4803
|
const TagName = this.href !== undefined ? 'a' : 'button';
|
|
4848
|
-
return (index.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 }, index.h("slot", { name: "image" }), index.h("div", { class: `${this.navigationButton}-center` }, index.h("div", { class: `${this.navigationButton}-text-content` }, index.h("slot", { name: "label" }), !this.displayNotificationBadge && index.h("slot", { name: "information" }), this.displayNotificationBadge && (index.h("span", { class: `${this.navigationButton}-text-content-notification` }, index.h("mg-badge", { label: this.messages.badgeLabel, value: "!", variant: "text-color", slot: "information" }))), this.target === '_blank' && [
|
|
4804
|
+
return (index.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 }, index.h("slot", { name: "image" }), index.h("div", { class: `${this.navigationButton}-center` }, index.h("div", { class: `${this.navigationButton}-text-content` }, index.h("slot", { name: "label" }), !this.displayNotificationBadge && index.h("slot", { name: "information" }), this.displayNotificationBadge && (index.h("span", { class: `${this.navigationButton}-text-content-notification` }, index.h("mg-badge", { label: this.messages.badgeLabel, value: "!", variant: "text-color", slot: "information" }))), this.target === '_blank' && [
|
|
4849
4805
|
index.h("mg-icon", { key: "icon-new-tab", class: `${this.navigationButton}-new-tab`, icon: "arrow-up-right-square" }),
|
|
4850
4806
|
index.h("span", { key: "a11y-new-tab", class: "mg-u-visually-hidden" }, this.messages.openNewTab),
|
|
4851
|
-
]), this.size !== '
|
|
4807
|
+
]), this.size !== 'medium' && index.h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (index.h("span", { class: {
|
|
4852
4808
|
[`${this.navigationButton}-chevron`]: true,
|
|
4853
4809
|
[`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
|
|
4854
4810
|
} }, index.h("mg-icon", { icon: "chevron-down", size: "small" })))));
|
|
4855
4811
|
}
|
|
4856
4812
|
/**
|
|
4857
4813
|
* Emit event when component is updated
|
|
4814
|
+
* @returns promise process wich emit the 'item-updated' event
|
|
4858
4815
|
*/
|
|
4859
4816
|
componentShouldUpdate() {
|
|
4860
|
-
return index$1.
|
|
4817
|
+
return index$1.Ve(() => {
|
|
4861
4818
|
this.itemUpdated.emit();
|
|
4862
4819
|
});
|
|
4863
4820
|
}
|
|
@@ -4870,7 +4827,7 @@ const MgMenuItem = class {
|
|
|
4870
4827
|
['mg-c-menu-item__collapse-container']: true,
|
|
4871
4828
|
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
|
|
4872
4829
|
});
|
|
4873
|
-
return (index.h(index.Host, { key: '
|
|
4830
|
+
return (index.h(index.Host, { key: 'be4538374c9b944ee6492805817d58b1dbb18e4b', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (index.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
|
|
4874
4831
|
}, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
|
|
4875
4832
|
this.renderInteractiveElement(),
|
|
4876
4833
|
index.h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
|
|
@@ -4889,65 +4846,24 @@ const MgMenuItem = class {
|
|
|
4889
4846
|
MgMenuItem.style = MgMenuItemStyle0;
|
|
4890
4847
|
|
|
4891
4848
|
/**
|
|
4892
|
-
* List
|
|
4849
|
+
* List available variants
|
|
4893
4850
|
*/
|
|
4894
4851
|
const variants$1 = ['info', 'warning', 'success', 'danger'];
|
|
4852
|
+
/**
|
|
4853
|
+
* List available variant styles
|
|
4854
|
+
*/
|
|
4855
|
+
const variantStyles = ['bar-left', 'background'];
|
|
4895
4856
|
|
|
4896
|
-
const mgMessageCss = ":host{--mg-card-
|
|
4857
|
+
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%}";
|
|
4897
4858
|
const MgMessageStyle0 = mgMessageCss;
|
|
4898
4859
|
|
|
4899
4860
|
const MgMessage = class {
|
|
4900
4861
|
constructor(hostRef) {
|
|
4901
4862
|
index.registerInstance(this, hostRef);
|
|
4902
|
-
this.componentShow = index.createEvent(this, "component-show", 7);
|
|
4903
|
-
this.componentHide = index.createEvent(this, "component-hide", 7);
|
|
4904
4863
|
/************
|
|
4905
4864
|
* Internal *
|
|
4906
4865
|
************/
|
|
4907
|
-
|
|
4908
|
-
this.classHide = 'mg-c-message--hide';
|
|
4909
|
-
// IDs
|
|
4910
|
-
this.closeButtonId = '';
|
|
4911
|
-
// Stored timer setted when hide action is run from setTimeOut
|
|
4912
|
-
this.storedTimer = null;
|
|
4913
|
-
// Manage hover
|
|
4914
|
-
this.isFocused = false;
|
|
4915
|
-
this.isHovered = false;
|
|
4916
|
-
/**
|
|
4917
|
-
* Set timer
|
|
4918
|
-
*/
|
|
4919
|
-
this.setTimer = () => {
|
|
4920
|
-
this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
|
|
4921
|
-
};
|
|
4922
|
-
/**
|
|
4923
|
-
* Clear timer
|
|
4924
|
-
*/
|
|
4925
|
-
this.clearTimer = () => {
|
|
4926
|
-
clearTimeout(this.storedTimer);
|
|
4927
|
-
};
|
|
4928
|
-
/**
|
|
4929
|
-
* Event to add on element
|
|
4930
|
-
* @param event - event
|
|
4931
|
-
*/
|
|
4932
|
-
this.timerEvents = (event) => {
|
|
4933
|
-
this.clearTimer();
|
|
4934
|
-
const isMouseEvent = event.type === 'mouseenter';
|
|
4935
|
-
// Needed to ensure we don't start the timer
|
|
4936
|
-
this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;
|
|
4937
|
-
// Restart timer when loose focus AND mouse leave
|
|
4938
|
-
this.element.addEventListener(isMouseEvent ? 'mouseleave' : 'focusout', eventOut => {
|
|
4939
|
-
this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;
|
|
4940
|
-
// Start timer if needed
|
|
4941
|
-
if (!this.isFocused && !this.isHovered)
|
|
4942
|
-
this.setTimer();
|
|
4943
|
-
}, { once: true });
|
|
4944
|
-
};
|
|
4945
|
-
/**
|
|
4946
|
-
* Handle close button
|
|
4947
|
-
*/
|
|
4948
|
-
this.handleClose = () => {
|
|
4949
|
-
this.hide = true;
|
|
4950
|
-
};
|
|
4866
|
+
this.classBase = 'mg-c-message';
|
|
4951
4867
|
/**
|
|
4952
4868
|
* Get icon corresponding to variant
|
|
4953
4869
|
* @returns icon
|
|
@@ -4964,60 +4880,31 @@ const MgMessage = class {
|
|
|
4964
4880
|
return 'exclamation-circle';
|
|
4965
4881
|
}
|
|
4966
4882
|
};
|
|
4967
|
-
this.
|
|
4968
|
-
this.
|
|
4969
|
-
this.variant = variants$1[0];
|
|
4970
|
-
this.closeButton = false;
|
|
4971
|
-
this.hide = false;
|
|
4972
|
-
this.noAriaRole = undefined;
|
|
4883
|
+
this.variant = 'info';
|
|
4884
|
+
this.variantStyle = 'bar-left';
|
|
4973
4885
|
this.classCollection = new index$1.Ie(['mg-c-message']);
|
|
4974
4886
|
this.hasActions = false;
|
|
4975
4887
|
}
|
|
4976
|
-
|
|
4977
|
-
if (newValue !== undefined && newValue < 2) {
|
|
4978
|
-
throw new Error(`<mg-message> prop "delay" must be greater than 2 seconds.`);
|
|
4979
|
-
}
|
|
4980
|
-
}
|
|
4981
|
-
validateVariant(newValue, oldValue) {
|
|
4888
|
+
watchVariant(newValue, oldValue) {
|
|
4982
4889
|
if (!variants$1.includes(newValue)) {
|
|
4983
|
-
throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}
|
|
4890
|
+
throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
4984
4891
|
}
|
|
4985
4892
|
else {
|
|
4986
|
-
if (
|
|
4987
|
-
this.classCollection.
|
|
4988
|
-
|
|
4989
|
-
|
|
4990
|
-
}
|
|
4991
|
-
}
|
|
4992
|
-
validateCloseButton(newValue) {
|
|
4993
|
-
if (newValue && this.hasActions) {
|
|
4994
|
-
this.closeButton = false;
|
|
4995
|
-
throw new Error('<mg-message> prop "close-button" can\'t be used with the actions slot.');
|
|
4893
|
+
if (newValue !== undefined)
|
|
4894
|
+
this.classCollection.add(`${this.classBase}--${newValue}`);
|
|
4895
|
+
if (oldValue !== undefined)
|
|
4896
|
+
this.classCollection.delete(`${this.classBase}--${oldValue}`);
|
|
4996
4897
|
}
|
|
4997
4898
|
}
|
|
4998
|
-
|
|
4999
|
-
if (newValue) {
|
|
5000
|
-
|
|
5001
|
-
this.classCollection.add(this.classHide);
|
|
5002
|
-
// Remove event Listener
|
|
5003
|
-
['focusin', 'mouseenter'].forEach(event => {
|
|
5004
|
-
this.element.removeEventListener(event, this.timerEvents);
|
|
5005
|
-
});
|
|
5006
|
-
// Clear Timer
|
|
5007
|
-
this.clearTimer();
|
|
4899
|
+
watchVariantStyle(newValue, oldValue) {
|
|
4900
|
+
if (!variantStyles.includes(newValue)) {
|
|
4901
|
+
throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
5008
4902
|
}
|
|
5009
4903
|
else {
|
|
5010
|
-
|
|
5011
|
-
|
|
5012
|
-
|
|
5013
|
-
|
|
5014
|
-
// Start timer
|
|
5015
|
-
this.setTimer();
|
|
5016
|
-
// Stop timer when get focus or mouse enter
|
|
5017
|
-
['focusin', 'mouseenter'].forEach(event => {
|
|
5018
|
-
this.element.addEventListener(event, this.timerEvents);
|
|
5019
|
-
});
|
|
5020
|
-
}
|
|
4904
|
+
if (newValue !== undefined)
|
|
4905
|
+
this.classCollection.add(`${this.classBase}--${newValue}`);
|
|
4906
|
+
if (oldValue !== undefined)
|
|
4907
|
+
this.classCollection.delete(`${this.classBase}--${oldValue}`);
|
|
5021
4908
|
}
|
|
5022
4909
|
}
|
|
5023
4910
|
/*************
|
|
@@ -5027,36 +4914,26 @@ const MgMessage = class {
|
|
|
5027
4914
|
* Check if component props are well configured on init
|
|
5028
4915
|
*/
|
|
5029
4916
|
componentWillLoad() {
|
|
5030
|
-
// Get locales
|
|
5031
|
-
this.messages = index$1.initLocales(this.element).messages;
|
|
5032
4917
|
// Validate
|
|
5033
|
-
this.
|
|
5034
|
-
|
|
4918
|
+
this.watchVariant(this.variant);
|
|
4919
|
+
this.watchVariantStyle(this.variantStyle);
|
|
4920
|
+
// Check if component has actions slot
|
|
5035
4921
|
this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
|
|
5036
|
-
this.validateCloseButton(this.closeButton);
|
|
5037
|
-
if (this.closeButton) {
|
|
5038
|
-
this.classCollection.add('mg-c-message--close-button');
|
|
5039
|
-
this.closeButtonId = `${this.identifier}-close-button`;
|
|
5040
|
-
}
|
|
5041
|
-
this.validateDelay(this.delay);
|
|
5042
|
-
this.validateHide(this.hide);
|
|
5043
4922
|
}
|
|
5044
4923
|
/**
|
|
5045
4924
|
* Render
|
|
5046
4925
|
* @returns HTML Element
|
|
5047
4926
|
*/
|
|
5048
4927
|
render() {
|
|
5049
|
-
|
|
5050
|
-
|
|
5051
|
-
|
|
5052
|
-
|
|
4928
|
+
return (index.h("div", { key: '9ce1d7b25bf12d974a7b0b296d9d71b9b2c984e1', class: this.classCollection.join() }, index.h("mg-card", { key: '7c7c1d5891d988adc7c5090b02d809aab32565f8' }, this.variantStyle === 'bar-left' && index.h("span", { key: 'd6c291fcf93ab6e84ba0288a1a0c4ec405b57e78', class: "mg-c-message__bar" }), index.h("span", { key: 'afc3dcf95dbf4ee96ca1041c54c0d4c37d435601', class: "mg-c-message__icon" }, index.h("mg-icon", { key: 'd9b79cb3be22fedee6a04cf43c72641202cc80f7', icon: this.getIcon() })), index.h("div", { key: 'f70d488459d28a464a3714b122b7a708c3562741', class: "mg-c-message__content" }, index.h("span", { key: 'd24b0ed1c326cb04bc7944f0c4f1fe19efa3fc9c', class: "mg-c-message__content-slot" }, index.h("slot", { key: 'bb491533bc09600c04699d561c7af608ee1567e5' })), this.hasActions && [
|
|
4929
|
+
index.h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
|
|
4930
|
+
index.h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, index.h("slot", { key: '43547919e1ec8b34f23ea1ad5e75d5b0da23c831', name: "actions" })),
|
|
4931
|
+
]))));
|
|
5053
4932
|
}
|
|
5054
4933
|
get element() { return index.getElement(this); }
|
|
5055
4934
|
static get watchers() { return {
|
|
5056
|
-
"
|
|
5057
|
-
"
|
|
5058
|
-
"closeButton": ["validateCloseButton"],
|
|
5059
|
-
"hide": ["validateHide"]
|
|
4935
|
+
"variant": ["watchVariant"],
|
|
4936
|
+
"variantStyle": ["watchVariantStyle"]
|
|
5060
4937
|
}; }
|
|
5061
4938
|
};
|
|
5062
4939
|
MgMessage.style = MgMessageStyle0;
|
|
@@ -5066,7 +4943,7 @@ MgMessage.style = MgMessageStyle0;
|
|
|
5066
4943
|
*/
|
|
5067
4944
|
const dialogRoles = ['dialog', 'alertdialog'];
|
|
5068
4945
|
|
|
5069
|
-
const mgModalCss = ":host{--mg-card-border-radius:var(--mg-modal-border-radius);--mg-card-
|
|
4946
|
+
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}";
|
|
5070
4947
|
const MgModalStyle0 = mgModalCss;
|
|
5071
4948
|
|
|
5072
4949
|
const MgModal = class {
|
|
@@ -5074,116 +4951,44 @@ const MgModal = class {
|
|
|
5074
4951
|
index.registerInstance(this, hostRef);
|
|
5075
4952
|
this.componentShow = index.createEvent(this, "component-show", 7);
|
|
5076
4953
|
this.componentHide = index.createEvent(this, "component-hide", 7);
|
|
5077
|
-
/************
|
|
5078
|
-
* Internal *
|
|
5079
|
-
************/
|
|
5080
|
-
// Modal focusable elements
|
|
5081
|
-
this.modalFocusableElements = [];
|
|
5082
|
-
// Classes
|
|
5083
|
-
this.classHide = 'mg-c-modal--hide';
|
|
5084
4954
|
// IDs
|
|
5085
4955
|
this.titleId = '';
|
|
4956
|
+
/***********
|
|
4957
|
+
* Handles *
|
|
4958
|
+
***********/
|
|
5086
4959
|
/**
|
|
5087
|
-
*
|
|
5088
|
-
* @param event - keyboard event
|
|
5089
|
-
*/
|
|
5090
|
-
this.handleLastFocusableElement = (event) => {
|
|
5091
|
-
if (event.key === 'Tab' && !event.shiftKey) {
|
|
5092
|
-
event.preventDefault();
|
|
5093
|
-
this.modalFocusableElements[0].focus();
|
|
5094
|
-
}
|
|
5095
|
-
};
|
|
5096
|
-
/**
|
|
5097
|
-
* Handle first focusable element
|
|
5098
|
-
* @param event - keyboard event
|
|
5099
|
-
*/
|
|
5100
|
-
this.handleFirstFocusableElement = (event) => {
|
|
5101
|
-
if (event.key === 'Tab' && event.shiftKey) {
|
|
5102
|
-
event.preventDefault();
|
|
5103
|
-
this.getLastFocusableElement().focus();
|
|
5104
|
-
}
|
|
5105
|
-
};
|
|
5106
|
-
/**
|
|
5107
|
-
* Get last focusablmeElement
|
|
5108
|
-
* @returns last modal focusable element
|
|
5109
|
-
*/
|
|
5110
|
-
this.getLastFocusableElement = () => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);
|
|
5111
|
-
/**
|
|
5112
|
-
* Method to manage focus on modal focusable elements
|
|
5113
|
-
*/
|
|
5114
|
-
this.setFocus = () => {
|
|
5115
|
-
// Get all focusable elements
|
|
5116
|
-
const slottedFocusableElements = Array.from(this.element.querySelectorAll(index$1.Ke));
|
|
5117
|
-
// If close button is enabled or at least one of the slotted element is focusable
|
|
5118
|
-
if (this.closeButton || slottedFocusableElements.length > 0) {
|
|
5119
|
-
// Check if slotted focusable elements have shadowDom with focusable elements
|
|
5120
|
-
this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
|
|
5121
|
-
acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(index$1.Ke) || focusableElement : focusableElement);
|
|
5122
|
-
return acc;
|
|
5123
|
-
}, []);
|
|
5124
|
-
// When close button is enabled it's the first focusable element.
|
|
5125
|
-
if (this.closeButton && this.closeButtonElement !== undefined) {
|
|
5126
|
-
this.modalFocusableElements.unshift(this.closeButtonElement);
|
|
5127
|
-
}
|
|
5128
|
-
// Add event listener on last element
|
|
5129
|
-
this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);
|
|
5130
|
-
// Add event listener on first element (case shift + tab)
|
|
5131
|
-
this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);
|
|
5132
|
-
}
|
|
5133
|
-
};
|
|
5134
|
-
/*************
|
|
5135
|
-
* Handlers *
|
|
5136
|
-
*************/
|
|
5137
|
-
/**
|
|
5138
|
-
* Handle close button
|
|
4960
|
+
* Closes the modal.
|
|
5139
4961
|
*/
|
|
5140
4962
|
this.handleClose = () => {
|
|
5141
|
-
this.
|
|
4963
|
+
this.open = false;
|
|
5142
4964
|
};
|
|
5143
4965
|
this.identifier = index$1.ze('mg-modal');
|
|
5144
4966
|
this.dialogRole = dialogRoles[0];
|
|
5145
4967
|
this.modalTitle = undefined;
|
|
5146
4968
|
this.closeButton = false;
|
|
5147
|
-
this.
|
|
4969
|
+
this.open = false;
|
|
5148
4970
|
this.hasActions = false;
|
|
5149
|
-
this.hasContent = false;
|
|
5150
4971
|
this.classCollection = new index$1.Ie(['mg-c-modal']);
|
|
5151
4972
|
}
|
|
5152
4973
|
validateDialogRole(newValue) {
|
|
5153
4974
|
if (!dialogRoles.includes(newValue))
|
|
5154
|
-
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
|
|
4975
|
+
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
5155
4976
|
}
|
|
5156
4977
|
validateModalTitle(newValue) {
|
|
5157
|
-
if (!index$1.
|
|
5158
|
-
throw new Error(
|
|
4978
|
+
if (!index$1.Qe(newValue)) {
|
|
4979
|
+
throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${index$1.Ze(newValue)}.`);
|
|
5159
4980
|
}
|
|
5160
4981
|
}
|
|
5161
|
-
|
|
5162
|
-
var _a;
|
|
4982
|
+
watchOpen(newValue) {
|
|
5163
4983
|
if (newValue) {
|
|
5164
|
-
this.
|
|
5165
|
-
this.classCollection.add(this.classHide);
|
|
5166
|
-
document.body.style.overflow = this.bodyOverflow;
|
|
5167
|
-
// reset focus handlers
|
|
5168
|
-
(_a = this.getLastFocusableElement()) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleLastFocusableElement);
|
|
5169
|
-
if (this.modalFocusableElements.length > 0)
|
|
5170
|
-
this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);
|
|
5171
|
-
}
|
|
5172
|
-
else if (newValue === false) {
|
|
4984
|
+
this.dialog.showModal();
|
|
5173
4985
|
this.componentShow.emit();
|
|
5174
|
-
this.classCollection.delete(this.classHide);
|
|
5175
4986
|
document.body.style.overflow = 'hidden';
|
|
5176
|
-
this.setFocus();
|
|
5177
4987
|
}
|
|
5178
|
-
|
|
5179
|
-
|
|
5180
|
-
|
|
5181
|
-
|
|
5182
|
-
*/
|
|
5183
|
-
handleKeyDown(event) {
|
|
5184
|
-
// we can use 'Escape button" when this not a blocking modal, induced by closeButton value.
|
|
5185
|
-
if (this.closeButton && event.key === 'Escape') {
|
|
5186
|
-
this.hide = true;
|
|
4988
|
+
else {
|
|
4989
|
+
this.dialog.close();
|
|
4990
|
+
this.componentHide.emit();
|
|
4991
|
+
document.body.style.overflow = this.bodyOverflow;
|
|
5187
4992
|
}
|
|
5188
4993
|
}
|
|
5189
4994
|
/*************
|
|
@@ -5199,54 +5004,48 @@ const MgModal = class {
|
|
|
5199
5004
|
this.messages = index$1.initLocales(this.element).messages;
|
|
5200
5005
|
// Validate
|
|
5201
5006
|
this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
|
|
5202
|
-
this.hasContent = this.element.querySelector('[slot="content"]') !== null;
|
|
5203
5007
|
this.titleId = `${this.identifier}-title`;
|
|
5204
5008
|
this.validateModalTitle(this.modalTitle);
|
|
5205
|
-
this.validateHide(this.hide);
|
|
5206
5009
|
this.validateDialogRole(this.dialogRole);
|
|
5207
5010
|
}
|
|
5208
5011
|
/**
|
|
5209
|
-
*
|
|
5012
|
+
* Define open state on component load
|
|
5210
5013
|
*/
|
|
5211
5014
|
componentDidLoad() {
|
|
5212
|
-
|
|
5213
|
-
|
|
5214
|
-
|
|
5215
|
-
|
|
5216
|
-
|
|
5217
|
-
}
|
|
5218
|
-
}).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });
|
|
5015
|
+
this.watchOpen(this.open);
|
|
5016
|
+
// update open prop when use escape key
|
|
5017
|
+
this.dialog.addEventListener('close', () => {
|
|
5018
|
+
this.open = false;
|
|
5019
|
+
});
|
|
5219
5020
|
}
|
|
5220
5021
|
/**
|
|
5221
5022
|
* Render
|
|
5222
5023
|
* @returns HTML Element
|
|
5223
5024
|
*/
|
|
5224
5025
|
render() {
|
|
5225
|
-
return (index.h("
|
|
5026
|
+
return (index.h("dialog", { key: '1b3de14b6dddfc77dc5906353a93689d3af9d8c8', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
|
|
5226
5027
|
if (el !== null) {
|
|
5227
|
-
|
|
5228
|
-
this.closeButtonElement = el;
|
|
5229
|
-
// add close button element to modalFocusableElements when it is render
|
|
5230
|
-
this.modalFocusableElements.unshift(this.closeButtonElement);
|
|
5028
|
+
this.dialog = el;
|
|
5231
5029
|
}
|
|
5232
|
-
} }, index.h("mg-
|
|
5030
|
+
} }, index.h("mg-card", { key: 'e3d8e671d49f39a0173663fbae37f93c50c0a028' }, index.h("div", { key: '249b985c471aca4b06548b7e89f68f94a7ee2976', class: "mg-c-modal__dialog" }, index.h("header", { key: '1c5a329670e1b789c55806a044fa73330582313e', class: "mg-c-modal__header" }, this.closeButton && (index.h("span", { key: 'a0d0b831d05ef09e78b31dc579df2c204a38b41a', class: "mg-c-modal__close-button" }, index.h("mg-button", { key: '26d93a8bc8a3fc7578ad4127acad645da28a035c', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton,
|
|
5031
|
+
// eslint-disable-next-line react/jsx-no-bind
|
|
5032
|
+
onClick: this.handleClose }, index.h("mg-icon", { key: 'adbbd878cf4967f02d636bbf815a79a8fe4c08b1', icon: "cross" })))), index.h("h1", { key: '274ad2b5d4f030725d6bf6201945d668b9ba056e', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), index.h("article", { key: 'd0bf1bee2472a49da0826a8013fc7f84262d2b4b', class: "mg-c-modal__content" }, index.h("slot", { key: '83901bde6eeab22c14873e5b8d714826d194cff0' })), this.hasActions && (index.h("footer", { key: '16ea5be07e639f12373b79be575f9bd142b4c426', class: "mg-c-modal__footer" }, index.h("slot", { key: 'ca1204b8f12322795a28cadece382be9001b4684', name: "actions" })))))));
|
|
5233
5033
|
}
|
|
5234
5034
|
get element() { return index.getElement(this); }
|
|
5235
5035
|
static get watchers() { return {
|
|
5236
5036
|
"dialogRole": ["validateDialogRole"],
|
|
5237
5037
|
"modalTitle": ["validateModalTitle"],
|
|
5238
|
-
"
|
|
5038
|
+
"open": ["watchOpen"]
|
|
5239
5039
|
}; }
|
|
5240
5040
|
};
|
|
5241
5041
|
MgModal.style = MgModalStyle0;
|
|
5242
5042
|
|
|
5243
|
-
|
|
5244
|
-
|
|
5245
|
-
|
|
5246
|
-
|
|
5247
|
-
})(NavigationAction || (NavigationAction = {}));
|
|
5043
|
+
const NavigationAction = {
|
|
5044
|
+
NEXT: 'next',
|
|
5045
|
+
PREVIOUS: 'previous',
|
|
5046
|
+
};
|
|
5248
5047
|
|
|
5249
|
-
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;
|
|
5048
|
+
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}";
|
|
5250
5049
|
const MgPaginationStyle0 = mgPaginationCss;
|
|
5251
5050
|
|
|
5252
5051
|
/**
|
|
@@ -5310,15 +5109,15 @@ const MgPagination = class {
|
|
|
5310
5109
|
}
|
|
5311
5110
|
validateTotalPages(newValue) {
|
|
5312
5111
|
if (newValue < 1) {
|
|
5313
|
-
throw new Error(
|
|
5112
|
+
throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${index$1.Ze(newValue)}.`);
|
|
5314
5113
|
}
|
|
5315
5114
|
}
|
|
5316
5115
|
validateCurrentPage(newValue) {
|
|
5317
5116
|
if (newValue < 1) {
|
|
5318
|
-
throw new Error(
|
|
5117
|
+
throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${index$1.Ze(newValue)}.`);
|
|
5319
5118
|
}
|
|
5320
5119
|
else if (newValue > this.totalPages) {
|
|
5321
|
-
throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page');
|
|
5120
|
+
throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
|
|
5322
5121
|
}
|
|
5323
5122
|
this.currentPageChange.emit(newValue);
|
|
5324
5123
|
}
|
|
@@ -5344,10 +5143,10 @@ const MgPagination = class {
|
|
|
5344
5143
|
* @returns HTML Element
|
|
5345
5144
|
*/
|
|
5346
5145
|
render() {
|
|
5347
|
-
const navigationActionButton = (disabled, action) => (index.h("mg-button", { key: '
|
|
5146
|
+
const navigationActionButton = (disabled, action) => (index.h("mg-button", { key: '76bdc93c328042ef6d6d8dafce5a701629f59903', label: this.messages.pagination[`${action}Page`],
|
|
5348
5147
|
// eslint-disable-next-line react/jsx-no-bind
|
|
5349
|
-
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && index.h("mg-icon", { key: '
|
|
5350
|
-
return (index.h(index.Host, { key: '
|
|
5148
|
+
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && index.h("mg-icon", { key: '336f048488682bfbdd7510d52519ed495ff5f1b6', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && index.h("mg-icon", { key: '454f119cb4a20e794be2f708e4f4f5df198da114', icon: "chevron-right" })));
|
|
5149
|
+
return (index.h(index.Host, { key: 'b260a359ad34cc05ed6304f6d3312dcecc940f1c', hidden: this.totalPages < 2 }, index.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 && (index.h("div", { key: '9cea1e9d1e65f15a1e96bb36e924c99f0b383348', class: "mg-c-pagination__page-count" }, index.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 }), index.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))));
|
|
5351
5150
|
}
|
|
5352
5151
|
get element() { return index.getElement(this); }
|
|
5353
5152
|
static get watchers() { return {
|
|
@@ -5366,7 +5165,7 @@ const expandToggleDisplays = ['text', 'icon'];
|
|
|
5366
5165
|
*/
|
|
5367
5166
|
const titlePositions = ['left', 'right'];
|
|
5368
5167
|
|
|
5369
|
-
const mgPanelCss = ":host{--mg-card-border:none;--mg-card-
|
|
5168
|
+
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}";
|
|
5370
5169
|
const MgPanelStyle0 = mgPanelCss;
|
|
5371
5170
|
|
|
5372
5171
|
const MgPanel = class {
|
|
@@ -5430,17 +5229,17 @@ const MgPanel = class {
|
|
|
5430
5229
|
* Render collapse button
|
|
5431
5230
|
* @returns collpase button
|
|
5432
5231
|
*/
|
|
5433
|
-
this.renderCollapseButton = () => (index.h("mg-button", { onClick: this.handleCollapseButton, variant: "flat",
|
|
5232
|
+
this.renderCollapseButton = () => (index.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 }, index.h("span", { class: "mg-c-panel__collapse-button-content" }, index.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)));
|
|
5434
5233
|
/**
|
|
5435
5234
|
* Render edit button
|
|
5436
5235
|
* @returns edit Button
|
|
5437
5236
|
*/
|
|
5438
|
-
this.renderEditButton = () => (index.h("mg-button", { key: "edit-button", "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton
|
|
5237
|
+
this.renderEditButton = () => (index.h("mg-button", { key: "edit-button", "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton }, index.h("mg-icon", { icon: "pen" })));
|
|
5439
5238
|
/**
|
|
5440
5239
|
* Render input button
|
|
5441
5240
|
* @returns edit title input
|
|
5442
5241
|
*/
|
|
5443
|
-
this.renderEditInput = () => (index.h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle,
|
|
5242
|
+
this.renderEditInput = () => (index.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) }, index.h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton }, index.h("mg-icon", { icon: "cross" })), index.h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton }, index.h("mg-icon", { icon: "check" }))));
|
|
5444
5243
|
/**
|
|
5445
5244
|
* Render title
|
|
5446
5245
|
* @returns title element
|
|
@@ -5480,8 +5279,8 @@ const MgPanel = class {
|
|
|
5480
5279
|
this.updatedPanelTitle = undefined;
|
|
5481
5280
|
}
|
|
5482
5281
|
validatePanelTitle(newValue) {
|
|
5483
|
-
if (!index$1.
|
|
5484
|
-
throw new Error(
|
|
5282
|
+
if (!index$1.Qe(newValue))
|
|
5283
|
+
throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${index$1.Ze(newValue)}.`);
|
|
5485
5284
|
this.titleChange.emit(newValue);
|
|
5486
5285
|
}
|
|
5487
5286
|
validateTitlePattern(newValue) {
|
|
@@ -5490,14 +5289,14 @@ const MgPanel = class {
|
|
|
5490
5289
|
}
|
|
5491
5290
|
validateTitlePosition(newValue) {
|
|
5492
5291
|
if (!titlePositions.includes(newValue))
|
|
5493
|
-
throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}.`);
|
|
5292
|
+
throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
5494
5293
|
}
|
|
5495
5294
|
handleExpanded(newValue) {
|
|
5496
5295
|
this.expandedChange.emit(newValue);
|
|
5497
5296
|
}
|
|
5498
5297
|
validateExpandToggleDisplay(newValue) {
|
|
5499
5298
|
if (!expandToggleDisplays.includes(newValue))
|
|
5500
|
-
throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}.`);
|
|
5299
|
+
throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
5501
5300
|
if (newValue === 'icon' && this.titleEditable)
|
|
5502
5301
|
this.titleEditable = false;
|
|
5503
5302
|
}
|
|
@@ -5531,7 +5330,7 @@ const MgPanel = class {
|
|
|
5531
5330
|
*/
|
|
5532
5331
|
render() {
|
|
5533
5332
|
const headerId = `${this.identifier}-header`;
|
|
5534
|
-
return (index.h("section", { key: '
|
|
5333
|
+
return (index.h("section", { key: '3999a8ed86a5b7eb4329e4c2aa9064535f6fad99', class: this.classCollection.join(), id: this.identifier }, index.h("mg-card", { key: 'bc777219b2e11f08975d6daa911b237a5a71f0b1' }, index.h("header", { key: '8e740323476aaa2f7c4f10c52b2107f05e156f1a', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), index.h("article", { key: '9afe2db9371628027e8c2feff6b11235432f98d2', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, index.h("slot", { key: '3a6592a91938b6dee66e7b59f7a7e490256582eb' })))));
|
|
5535
5334
|
}
|
|
5536
5335
|
get element() { return index.getElement(this); }
|
|
5537
5336
|
static get watchers() { return {
|
|
@@ -7336,7 +7135,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
|
|
|
7336
7135
|
defaultModifiers: defaultModifiers
|
|
7337
7136
|
}); // eslint-disable-next-line import/no-unused-modules
|
|
7338
7137
|
|
|
7339
|
-
const mgPopoverCss = ":host{--mg-card-
|
|
7138
|
+
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}";
|
|
7340
7139
|
const MgPopoverStyle0 = mgPopoverCss;
|
|
7341
7140
|
|
|
7342
7141
|
const MgPopover = class {
|
|
@@ -7348,8 +7147,9 @@ const MgPopover = class {
|
|
|
7348
7147
|
* @param event - mouse event
|
|
7349
7148
|
*/
|
|
7350
7149
|
this.clickOutside = (event) => {
|
|
7351
|
-
if (!this.disabled && event.target.closest('mg-popover') !== this.element &&
|
|
7150
|
+
if (!this.disabled && event.target.closest('mg-popover') !== this.element && event.target.closest(`[data-mg-popover-guard="${this.identifier}"]`) === null) {
|
|
7352
7151
|
this.display = false;
|
|
7152
|
+
}
|
|
7353
7153
|
};
|
|
7354
7154
|
/**
|
|
7355
7155
|
* Show popover
|
|
@@ -7474,7 +7274,7 @@ const MgPopover = class {
|
|
|
7474
7274
|
*/
|
|
7475
7275
|
componentWillLoad() {
|
|
7476
7276
|
// Get windows to attach events
|
|
7477
|
-
this.windows = index$1.
|
|
7277
|
+
this.windows = index$1.Ke(window);
|
|
7478
7278
|
// render mg-popover-content slot
|
|
7479
7279
|
this.renderPopoverContent();
|
|
7480
7280
|
this.validateCloseButton(this.closeButton);
|
|
@@ -7493,7 +7293,7 @@ const MgPopover = class {
|
|
|
7493
7293
|
interactiveElement.setAttribute('aria-controls', this.identifier);
|
|
7494
7294
|
interactiveElement.setAttribute('aria-expanded', `${this.display}`);
|
|
7495
7295
|
const fallbackPlacements = [];
|
|
7496
|
-
if (this.element.dataset.fallbackPlacement) {
|
|
7296
|
+
if (this.element.dataset.fallbackPlacement !== undefined) {
|
|
7497
7297
|
fallbackPlacements.push(this.element.dataset.fallbackPlacement);
|
|
7498
7298
|
}
|
|
7499
7299
|
// Create popperjs popover
|
|
@@ -7540,7 +7340,7 @@ const MgPopover = class {
|
|
|
7540
7340
|
* @returns HTML Element
|
|
7541
7341
|
*/
|
|
7542
7342
|
render() {
|
|
7543
|
-
return (index.h(index.Host, { key: '
|
|
7343
|
+
return (index.h(index.Host, { key: '15fa5513044a120adeb819495d416812bb4ffcbd' }, index.h("slot", { key: '12494b7755e17c52358b520fca56fdf9d73916a0' }), index.h("slot", { key: '75476669b6b75c9325e0142dac613bdb8140ff17', name: "content" })));
|
|
7544
7344
|
}
|
|
7545
7345
|
get element() { return index.getElement(this); }
|
|
7546
7346
|
static get watchers() { return {
|
|
@@ -7552,7 +7352,7 @@ const MgPopover = class {
|
|
|
7552
7352
|
};
|
|
7553
7353
|
MgPopover.style = MgPopoverStyle0;
|
|
7554
7354
|
|
|
7555
|
-
const mgPopoverContentCss = ":host{position:relative;z-index:2000;display:none;padding:
|
|
7355
|
+
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)}";
|
|
7556
7356
|
const MgPopoverContentStyle0 = mgPopoverContentCss;
|
|
7557
7357
|
|
|
7558
7358
|
const MgPopoverContent = class {
|
|
@@ -7585,7 +7385,7 @@ const MgPopoverContent = class {
|
|
|
7585
7385
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
7586
7386
|
const slottedTitleElement = this.element.querySelector('[slot="title"]');
|
|
7587
7387
|
if (slottedTitleElement && !index$1.Xe(slottedTitleElement, headingTags)) {
|
|
7588
|
-
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}
|
|
7388
|
+
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);
|
|
7589
7389
|
}
|
|
7590
7390
|
}
|
|
7591
7391
|
/**
|
|
@@ -7593,13 +7393,13 @@ const MgPopoverContent = class {
|
|
|
7593
7393
|
* @returns HTML Element
|
|
7594
7394
|
*/
|
|
7595
7395
|
render() {
|
|
7596
|
-
return (index.h(index.Host, { key: '
|
|
7396
|
+
return (index.h(index.Host, { key: '8d2dd7d21518de744c18f0280b7b418f3a76acca' }, index.h("mg-card", { key: '8beab7c9fb692c1983515709a1ee888dc7e5157a', class: this.classCollection.join() }, this.closeButton && (index.h("mg-button", { key: 'e636569be26b0c741e0b03e806787d91b47ded5c', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { key: '3edc717cbe542494d892566c182883e20b1ca4cb', icon: "cross" }))), index.h("div", { key: 'd18525218972d92b6932984edb50844658e12970', class: "mg-c-popover-content__title" }, index.h("slot", { key: '2cceb41fd4ebb00b889e71cab211431e5894d04c', name: "title" })), index.h("slot", { key: 'a6615d9d7c85b32fb63d3d89db02fae2f8d5c1b2', name: "content" })), index.h("slot", { key: '0ff4bf72de19a3d56aafb64391cfc276d70e2f18', name: "arrow" })));
|
|
7597
7397
|
}
|
|
7598
7398
|
get element() { return index.getElement(this); }
|
|
7599
7399
|
};
|
|
7600
7400
|
MgPopoverContent.style = MgPopoverContentStyle0;
|
|
7601
7401
|
|
|
7602
|
-
const mgSkipLinksCss = ".mg-c-skip-links{position:absolute;background:
|
|
7402
|
+
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%)}";
|
|
7603
7403
|
const MgSkipLinksStyle0 = mgSkipLinksCss;
|
|
7604
7404
|
|
|
7605
7405
|
const MgSkipLinks = class {
|
|
@@ -7620,7 +7420,7 @@ const MgSkipLinks = class {
|
|
|
7620
7420
|
this.links = undefined;
|
|
7621
7421
|
}
|
|
7622
7422
|
validateLinks(links) {
|
|
7623
|
-
if (links === undefined || links.length === 0 || links.some(link => !index$1.
|
|
7423
|
+
if (links === undefined || links.length === 0 || links.some(link => !index$1.Qe(link.href) || !link.href.startsWith('#') || !index$1.Qe(link.label))) {
|
|
7624
7424
|
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.`);
|
|
7625
7425
|
}
|
|
7626
7426
|
}
|
|
@@ -7639,7 +7439,7 @@ const MgSkipLinks = class {
|
|
|
7639
7439
|
* @returns HTML Element
|
|
7640
7440
|
*/
|
|
7641
7441
|
render() {
|
|
7642
|
-
return (index.h("nav", { key: '
|
|
7442
|
+
return (index.h("nav", { key: 'dc5eeedabd3189f40a246bd5fe6da930928e3f22', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, index.h("ul", { key: '178d8c46d62d8db10d43d6609efb15cbf429c207', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (index.h("li", { key: link.href }, index.h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
|
|
7643
7443
|
}
|
|
7644
7444
|
get element() { return index.getElement(this); }
|
|
7645
7445
|
static get watchers() { return {
|
|
@@ -7651,19 +7451,18 @@ MgSkipLinks.style = MgSkipLinksStyle0;
|
|
|
7651
7451
|
/**
|
|
7652
7452
|
* Available tabs items status
|
|
7653
7453
|
*/
|
|
7654
|
-
|
|
7655
|
-
|
|
7656
|
-
|
|
7657
|
-
|
|
7658
|
-
|
|
7659
|
-
|
|
7660
|
-
})(Status || (Status = {}));
|
|
7454
|
+
const Status = {
|
|
7455
|
+
VISIBLE: 'visible',
|
|
7456
|
+
HIDDEN: 'hidden',
|
|
7457
|
+
DISABLED: 'disabled',
|
|
7458
|
+
ACTIVE: 'active',
|
|
7459
|
+
};
|
|
7661
7460
|
/**
|
|
7662
7461
|
* List of all possibles sizes
|
|
7663
7462
|
*/
|
|
7664
|
-
const sizes = ['
|
|
7463
|
+
const sizes = ['medium', 'large'];
|
|
7665
7464
|
|
|
7666
|
-
const mgTabsCss = ".mg-c-tabs.mg-c-tabs--size-
|
|
7465
|
+
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}";
|
|
7667
7466
|
const MgTabsStyle0 = mgTabsCss;
|
|
7668
7467
|
|
|
7669
7468
|
/**
|
|
@@ -7767,12 +7566,20 @@ const MgTabs = class {
|
|
|
7767
7566
|
this.resetFocus();
|
|
7768
7567
|
}
|
|
7769
7568
|
};
|
|
7569
|
+
/**
|
|
7570
|
+
* Reset focus on document click
|
|
7571
|
+
* @param event - mouse event
|
|
7572
|
+
*/
|
|
7573
|
+
this.handleDocumentClick = (event) => {
|
|
7574
|
+
if (event.target.closest('mg-tabs') !== this.element)
|
|
7575
|
+
this.resetFocus();
|
|
7576
|
+
};
|
|
7770
7577
|
/**
|
|
7771
7578
|
* Method to reset focus behavior
|
|
7772
7579
|
*/
|
|
7773
7580
|
this.resetFocus = () => {
|
|
7774
7581
|
// update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
|
|
7775
|
-
index$1.
|
|
7582
|
+
index$1.Ve(() => {
|
|
7776
7583
|
this.tabFocus = undefined;
|
|
7777
7584
|
Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
|
|
7778
7585
|
tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
|
|
@@ -7789,20 +7596,20 @@ const MgTabs = class {
|
|
|
7789
7596
|
};
|
|
7790
7597
|
this.identifier = index$1.ze('mg-tabs');
|
|
7791
7598
|
this.label = undefined;
|
|
7792
|
-
this.size = '
|
|
7599
|
+
this.size = 'medium';
|
|
7793
7600
|
this.items = undefined;
|
|
7794
7601
|
this.activeTab = undefined;
|
|
7795
7602
|
this.tabs = [];
|
|
7796
7603
|
this.classCollection = new index$1.Ie(['mg-c-tabs']);
|
|
7797
7604
|
}
|
|
7798
7605
|
validateLabel(newValue) {
|
|
7799
|
-
if (!index$1.
|
|
7800
|
-
throw new Error(
|
|
7606
|
+
if (!index$1.Qe(newValue)) {
|
|
7607
|
+
throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${index$1.Ze(newValue)}.`);
|
|
7801
7608
|
}
|
|
7802
7609
|
}
|
|
7803
7610
|
validateSize(newValue) {
|
|
7804
7611
|
if (!sizes.includes(newValue)) {
|
|
7805
|
-
throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}
|
|
7612
|
+
throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
7806
7613
|
}
|
|
7807
7614
|
this.classCollection.add(`mg-c-tabs--size-${this.size}`);
|
|
7808
7615
|
}
|
|
@@ -7814,7 +7621,7 @@ const MgTabs = class {
|
|
|
7814
7621
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
7815
7622
|
this.tabs = newValue;
|
|
7816
7623
|
else
|
|
7817
|
-
throw new Error(
|
|
7624
|
+
throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${index$1.Ze(newValue)}.`);
|
|
7818
7625
|
}
|
|
7819
7626
|
validateActiveTab(newValue) {
|
|
7820
7627
|
// when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
|
|
@@ -7839,7 +7646,7 @@ const MgTabs = class {
|
|
|
7839
7646
|
this.activeTabChange.emit(newValue);
|
|
7840
7647
|
}
|
|
7841
7648
|
else {
|
|
7842
|
-
throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable".`);
|
|
7649
|
+
throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${index$1.Ze(newValue)}.`);
|
|
7843
7650
|
}
|
|
7844
7651
|
}
|
|
7845
7652
|
/*************
|
|
@@ -7860,17 +7667,20 @@ const MgTabs = class {
|
|
|
7860
7667
|
* add listners
|
|
7861
7668
|
*/
|
|
7862
7669
|
componentDidLoad() {
|
|
7863
|
-
document.addEventListener('click',
|
|
7864
|
-
|
|
7865
|
-
|
|
7866
|
-
|
|
7670
|
+
document.addEventListener('click', this.handleDocumentClick, false);
|
|
7671
|
+
}
|
|
7672
|
+
/**
|
|
7673
|
+
* remove listeners
|
|
7674
|
+
*/
|
|
7675
|
+
disconnectedCallback() {
|
|
7676
|
+
document.removeEventListener('keydown', this.handleDocumentClick);
|
|
7867
7677
|
}
|
|
7868
7678
|
/**
|
|
7869
7679
|
* Render
|
|
7870
7680
|
* @returns HTML Element
|
|
7871
7681
|
*/
|
|
7872
7682
|
render() {
|
|
7873
|
-
return (index.h("div", { key: '
|
|
7683
|
+
return (index.h("div", { key: '921ed990aa94ee26f04e8877bf7f5b88cef84516', class: this.classCollection.join() }, index.h("header", { key: '00cd0666617678f005459c2aa3005d0c6319429b', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index$1) => (index.h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index$1), class: {
|
|
7874
7684
|
[`${this.buttonTabBaseClass}`]: true,
|
|
7875
7685
|
[`${this.buttonTabBaseClass}--horizontal`]: true,
|
|
7876
7686
|
[`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
|
|
@@ -7893,7 +7703,7 @@ MgTabs.style = MgTabsStyle0;
|
|
|
7893
7703
|
*/
|
|
7894
7704
|
const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
|
|
7895
7705
|
|
|
7896
|
-
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) -
|
|
7706
|
+
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}";
|
|
7897
7707
|
const MgTagStyle0 = mgTagCss;
|
|
7898
7708
|
|
|
7899
7709
|
const MgTag = class {
|
|
@@ -7912,7 +7722,7 @@ const MgTag = class {
|
|
|
7912
7722
|
}
|
|
7913
7723
|
validateVariant(newValue, oldValue) {
|
|
7914
7724
|
if (!variants.includes(newValue)) {
|
|
7915
|
-
throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}.`);
|
|
7725
|
+
throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${index$1.Ze(newValue)}.`);
|
|
7916
7726
|
}
|
|
7917
7727
|
else {
|
|
7918
7728
|
if (oldValue !== undefined) {
|
|
@@ -7945,7 +7755,7 @@ const MgTag = class {
|
|
|
7945
7755
|
* @param textContent - html element textContent property
|
|
7946
7756
|
*/
|
|
7947
7757
|
validateTextContent(textContent) {
|
|
7948
|
-
if (!index$1.
|
|
7758
|
+
if (!index$1.Qe(textContent))
|
|
7949
7759
|
throw new Error('<mg-tag> slot must contain a text content.');
|
|
7950
7760
|
}
|
|
7951
7761
|
/*************
|
|
@@ -7965,7 +7775,7 @@ const MgTag = class {
|
|
|
7965
7775
|
* @returns HTML Element
|
|
7966
7776
|
*/
|
|
7967
7777
|
render() {
|
|
7968
|
-
return (index.h("span", { key: '
|
|
7778
|
+
return (index.h("span", { key: 'bb99306c07ea9ef4ee193a6e52c2c211378d34df', class: this.classCollection.join() }, index.h("slot", { key: '0e427b1189217e5d863daf9ed15d35de4832d8dd' })));
|
|
7969
7779
|
}
|
|
7970
7780
|
get element() { return index.getElement(this); }
|
|
7971
7781
|
static get watchers() { return {
|
|
@@ -7976,15 +7786,14 @@ const MgTag = class {
|
|
|
7976
7786
|
};
|
|
7977
7787
|
MgTag.style = MgTagStyle0;
|
|
7978
7788
|
|
|
7979
|
-
|
|
7980
|
-
|
|
7981
|
-
|
|
7982
|
-
|
|
7983
|
-
|
|
7984
|
-
|
|
7985
|
-
})(Guard || (Guard = {}));
|
|
7789
|
+
const Guard = {
|
|
7790
|
+
FOCUS: 'focus',
|
|
7791
|
+
HOVER_TOOLTIP_ELEMENT: 'hoverTooltip',
|
|
7792
|
+
HOVER_TOOLTIPED_ELEMENT: 'hoverTooltiped',
|
|
7793
|
+
DISABLE_ON_CLICK: 'disableOnClick',
|
|
7794
|
+
};
|
|
7986
7795
|
|
|
7987
|
-
const mgTooltipCss = ":
|
|
7796
|
+
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}";
|
|
7988
7797
|
const MgTooltipStyle0 = mgTooltipCss;
|
|
7989
7798
|
|
|
7990
7799
|
/**
|
|
@@ -8005,7 +7814,7 @@ const MgTooltip = class {
|
|
|
8005
7814
|
// Enable the event listeners
|
|
8006
7815
|
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
8007
7816
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
8008
|
-
index$1.
|
|
7817
|
+
index$1.Ve(() => {
|
|
8009
7818
|
this.windows.forEach((localWindow) => {
|
|
8010
7819
|
localWindow.addEventListener('click', this.handleClickOutside, false);
|
|
8011
7820
|
localWindow.addEventListener('keydown', this.handlePressEscape, false);
|
|
@@ -8027,7 +7836,7 @@ const MgTooltip = class {
|
|
|
8027
7836
|
});
|
|
8028
7837
|
};
|
|
8029
7838
|
/**
|
|
8030
|
-
* Check if clicked outside of component and
|
|
7839
|
+
* Check if clicked outside of component and hide tooltip
|
|
8031
7840
|
* @param event - mouse event
|
|
8032
7841
|
*/
|
|
8033
7842
|
this.handleClickOutside = (event) => {
|
|
@@ -8035,7 +7844,7 @@ const MgTooltip = class {
|
|
|
8035
7844
|
this.setDisplay(false);
|
|
8036
7845
|
};
|
|
8037
7846
|
/**
|
|
8038
|
-
* Check if 'Escape' key is pressed of component and
|
|
7847
|
+
* Check if 'Escape' key is pressed of component and hide tooltip
|
|
8039
7848
|
* @param event - keyboard event
|
|
8040
7849
|
*/
|
|
8041
7850
|
this.handlePressEscape = (event) => {
|
|
@@ -8088,24 +7897,31 @@ const MgTooltip = class {
|
|
|
8088
7897
|
* @param mgButton - slotted mg-button
|
|
8089
7898
|
*/
|
|
8090
7899
|
this.setMgButtonWrapper = (mgButton) => {
|
|
8091
|
-
|
|
7900
|
+
const buttonWrapperClass = 'mg-c-tooltip__mg-button-wrapper';
|
|
7901
|
+
const hasButtonWrapper = mgButton.parentElement.classList.contains(buttonWrapperClass);
|
|
7902
|
+
// For disabled mg-button, we need to wrap it in a new element
|
|
7903
|
+
// We bind handlers to this new element to keep listener features as workaround to disabled mg-button `pointer-events: none`
|
|
7904
|
+
// AND to prevent multiple nested wrappers from rendering when a new render is called with a disabled mg-button
|
|
7905
|
+
if (mgButton.disabled && !hasButtonWrapper) {
|
|
7906
|
+
// wrap mg-button in a div
|
|
8092
7907
|
const div = document.createElement('div');
|
|
8093
|
-
div.classList.add(
|
|
7908
|
+
div.classList.add(buttonWrapperClass);
|
|
8094
7909
|
mgButton.parentNode.insertBefore(div, mgButton);
|
|
8095
7910
|
div.appendChild(mgButton);
|
|
8096
|
-
|
|
7911
|
+
// update tooltipElement
|
|
7912
|
+
this.setTooltipedElement(div);
|
|
8097
7913
|
}
|
|
8098
|
-
else if (mgButton.
|
|
7914
|
+
else if (!mgButton.disabled && hasButtonWrapper) {
|
|
8099
7915
|
this.element.firstElementChild.replaceWith(mgButton);
|
|
8100
|
-
|
|
7916
|
+
// update tooltipElement
|
|
7917
|
+
this.setTooltipedElement(mgButton);
|
|
8101
7918
|
}
|
|
8102
7919
|
};
|
|
8103
7920
|
/**
|
|
8104
7921
|
* Set popper instance
|
|
7922
|
+
* @param strategy - popper strategy to apply on instance
|
|
8105
7923
|
*/
|
|
8106
|
-
this.setPopper = () => {
|
|
8107
|
-
// use element data attribute: `data-popper-strategy`, in order to get popper strategy configuration
|
|
8108
|
-
const strategy = (this.element.dataset.popperStrategy || 'fixed');
|
|
7924
|
+
this.setPopper = (strategy) => {
|
|
8109
7925
|
// Create popperjs tooltip
|
|
8110
7926
|
this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {
|
|
8111
7927
|
placement: this.placement,
|
|
@@ -8186,13 +8002,12 @@ const MgTooltip = class {
|
|
|
8186
8002
|
*/
|
|
8187
8003
|
this.setAriaDescribedby = (element) => {
|
|
8188
8004
|
// Set aria-describedby
|
|
8189
|
-
|
|
8190
|
-
if (ariaDescribedby === null) {
|
|
8005
|
+
if (!element.hasAttribute('aria-describedby')) {
|
|
8191
8006
|
this.tooltipedElement.setAttribute('aria-describedby', this.identifier);
|
|
8192
8007
|
}
|
|
8193
8008
|
else {
|
|
8194
8009
|
// We ensure to have uniq ids
|
|
8195
|
-
element.setAttribute('aria-describedby', `${[...new Set([...
|
|
8010
|
+
element.setAttribute('aria-describedby', `${[...new Set([...element.getAttribute('aria-describedby').split(' '), this.identifier])].join(' ')}`);
|
|
8196
8011
|
}
|
|
8197
8012
|
};
|
|
8198
8013
|
this.identifier = index$1.ze('mg-tooltip');
|
|
@@ -8206,8 +8021,8 @@ const MgTooltip = class {
|
|
|
8206
8021
|
this.renderTooltipContent();
|
|
8207
8022
|
}
|
|
8208
8023
|
watchMessage(newValue) {
|
|
8209
|
-
if (!index$1.
|
|
8210
|
-
throw new Error(
|
|
8024
|
+
if (!index$1.Qe(newValue)) {
|
|
8025
|
+
throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${index$1.Ze(newValue)}.`);
|
|
8211
8026
|
}
|
|
8212
8027
|
this.mgTooltipContent.message = newValue;
|
|
8213
8028
|
}
|
|
@@ -8223,7 +8038,7 @@ const MgTooltip = class {
|
|
|
8223
8038
|
if (this.hasCustomTabIndex) {
|
|
8224
8039
|
if (newValue)
|
|
8225
8040
|
this.tooltipedElement.removeAttribute('tabindex');
|
|
8226
|
-
else if (this.tooltipedElement.
|
|
8041
|
+
else if (!this.tooltipedElement.hasAttribute('tabindex'))
|
|
8227
8042
|
this.tooltipedElement.setAttribute('tabindex', '0');
|
|
8228
8043
|
}
|
|
8229
8044
|
}
|
|
@@ -8231,7 +8046,7 @@ const MgTooltip = class {
|
|
|
8231
8046
|
* Render tooltip content element and init listeners
|
|
8232
8047
|
*/
|
|
8233
8048
|
renderTooltipContent() {
|
|
8234
|
-
if (this.mgTooltipContent) {
|
|
8049
|
+
if (this.mgTooltipContent !== undefined) {
|
|
8235
8050
|
this.mgTooltipContent.setAttribute('id', this.identifier);
|
|
8236
8051
|
}
|
|
8237
8052
|
else {
|
|
@@ -8261,7 +8076,7 @@ const MgTooltip = class {
|
|
|
8261
8076
|
*/
|
|
8262
8077
|
componentWillLoad() {
|
|
8263
8078
|
// Get windows to attach events
|
|
8264
|
-
this.windows = index$1.
|
|
8079
|
+
this.windows = index$1.Ke(window);
|
|
8265
8080
|
// Get tooltip element
|
|
8266
8081
|
this.renderTooltipContent();
|
|
8267
8082
|
//validate properties
|
|
@@ -8279,7 +8094,7 @@ const MgTooltip = class {
|
|
|
8279
8094
|
// get slotted element wich is not the tooltip
|
|
8280
8095
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
8281
8096
|
// Get interactive element
|
|
8282
|
-
const interactiveElement = slotElement.matches(index$1.
|
|
8097
|
+
const interactiveElement = slotElement.matches(index$1.Je) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index$1.Je);
|
|
8283
8098
|
this.setTooltipedElement(interactiveElement || slotElement);
|
|
8284
8099
|
// Check if slotted element is a disabled mg-button
|
|
8285
8100
|
// In this case we wrap the mg-button into a div to enable the tooltip
|
|
@@ -8288,7 +8103,7 @@ const MgTooltip = class {
|
|
|
8288
8103
|
this.setMgButtonWrapper(slotElement);
|
|
8289
8104
|
}
|
|
8290
8105
|
// Add tabindex to slotted element if we can't find any interactive element
|
|
8291
|
-
if (!this.disabled &&
|
|
8106
|
+
if (!this.disabled && [undefined, null].includes(interactiveElement)) {
|
|
8292
8107
|
this.hasCustomTabIndex = true;
|
|
8293
8108
|
slotElement.tabIndex = 0;
|
|
8294
8109
|
// Add role on non-interactive element to work with "aria-describedby" for screen readers
|
|
@@ -8297,7 +8112,7 @@ const MgTooltip = class {
|
|
|
8297
8112
|
// apply a11y aria
|
|
8298
8113
|
this.setAriaDescribedby(slotElement);
|
|
8299
8114
|
// set Tooltip
|
|
8300
|
-
this.setPopper();
|
|
8115
|
+
this.setPopper(this.element.closest('mg-popover') ? 'absolute' : 'fixed');
|
|
8301
8116
|
// add document keyboard handler
|
|
8302
8117
|
document.addEventListener('keydown', this.handlePressEscape);
|
|
8303
8118
|
// check props
|
|
@@ -8309,12 +8124,22 @@ const MgTooltip = class {
|
|
|
8309
8124
|
componentDidUpdate() {
|
|
8310
8125
|
this.popper.update();
|
|
8311
8126
|
}
|
|
8127
|
+
/**
|
|
8128
|
+
* remove listeners
|
|
8129
|
+
*/
|
|
8130
|
+
disconnectedCallback() {
|
|
8131
|
+
document.removeEventListener('keydown', this.handlePressEscape);
|
|
8132
|
+
this.windows.forEach((localWindow) => {
|
|
8133
|
+
localWindow.removeEventListener('click', this.handleClickOutside, false);
|
|
8134
|
+
localWindow.removeEventListener('keydown', this.handlePressEscape, false);
|
|
8135
|
+
});
|
|
8136
|
+
}
|
|
8312
8137
|
/**
|
|
8313
8138
|
* Render
|
|
8314
8139
|
* @returns HTML Element
|
|
8315
8140
|
*/
|
|
8316
8141
|
render() {
|
|
8317
|
-
return (index.h(index.Host, { key: '
|
|
8142
|
+
return (index.h(index.Host, { key: '0a3444cfd3b00efaf216995c39775620e5aeb2fe' }, index.h("slot", { key: '7c34a4814e2705d5470e61866514450f6238008c' }), index.h("slot", { key: '0df1ade290b5e84d617b9b628d733e823e2c34de', name: "content" })));
|
|
8318
8143
|
}
|
|
8319
8144
|
get element() { return index.getElement(this); }
|
|
8320
8145
|
static get watchers() { return {
|
|
@@ -8326,7 +8151,7 @@ const MgTooltip = class {
|
|
|
8326
8151
|
};
|
|
8327
8152
|
MgTooltip.style = MgTooltipStyle0;
|
|
8328
8153
|
|
|
8329
|
-
const mgTooltipContentCss = ":host{z-index:1000;display:none;max-width:
|
|
8154
|
+
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))}";
|
|
8330
8155
|
const MgTooltipContentStyle0 = mgTooltipContentCss;
|
|
8331
8156
|
|
|
8332
8157
|
const MgTooltipContent = class {
|
|
@@ -8342,7 +8167,7 @@ const MgTooltipContent = class {
|
|
|
8342
8167
|
* @returns HTML Element
|
|
8343
8168
|
*/
|
|
8344
8169
|
render() {
|
|
8345
|
-
return (index.h(index.Host, { key: '
|
|
8170
|
+
return (index.h(index.Host, { key: '2f94fdb8d48e172cc1d1f069ce12d1508e5e7896', role: "tooltip" }, index.h("span", { key: 'f075e8392eba2cd1256df7e89b7f20c832dc02e8', innerHTML: this.message, class: "mg-tooltip-content__message" }), index.h("slot", { key: '5f840ac9a4c9c422dc6e012dd8fbb0637232bd5f', name: "arrow" })));
|
|
8346
8171
|
}
|
|
8347
8172
|
};
|
|
8348
8173
|
MgTooltipContent.style = MgTooltipContentStyle0;
|