@mgdis/mg-components 5.29.0 → 6.1.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-e1a25816.js → index-0fe2670c.js} +31 -29
- package/dist/cjs/index-0fe2670c.js.map +1 -0
- package/dist/cjs/{index-8a3adbd1.js → index-e4a8bf81.js} +26 -73
- package/dist/cjs/index-e4a8bf81.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mg-action-more_36.cjs.entry.js +732 -839
- 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 +3 -3
- package/dist/cjs/mg-components.cjs.js.map +1 -1
- 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 +6 -5
- package/dist/collection/components/atoms/{mg-character-left → internals/mg-character-left}/mg-character-left.js +18 -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 +8 -5
- 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 +44 -23
- 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 +27 -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 +11 -11
- 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 +29 -25
- 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 +27 -18
- 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 +31 -16
- 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 +14 -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 +44 -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 +16 -7
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js.map +1 -1
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +18 -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 +13 -7
- 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 +33 -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 +20 -20
- package/dist/components/index.es.js.map +1 -1
- package/dist/components/index2.js +6 -6
- package/dist/components/mg-action-more.js +36 -20
- 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 +9 -9
- package/dist/components/mg-badge2.js.map +1 -1
- package/dist/components/mg-button2.js +8 -10
- 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 +12 -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 +15 -7
- package/dist/components/mg-form.js.map +1 -1
- package/dist/components/mg-icon2.js +12 -12
- package/dist/components/mg-icon2.js.map +1 -1
- package/dist/components/mg-illustrated-message.js +8 -8
- package/dist/components/mg-illustrated-message.js.map +1 -1
- package/dist/components/mg-input-checkbox-paginated.js +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 +83 -34
- package/dist/components/mg-input-checkbox.js.map +1 -1
- package/dist/components/mg-input-date.js +30 -39
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +47 -39
- package/dist/components/mg-input-numeric.js.map +1 -1
- package/dist/components/mg-input-password.js +12 -12
- package/dist/components/mg-input-password.js.map +1 -1
- package/dist/components/mg-input-radio.js +16 -16
- package/dist/components/mg-input-radio.js.map +1 -1
- package/dist/components/mg-input-select2.js +18 -18
- package/dist/components/mg-input-select2.js.map +1 -1
- package/dist/components/mg-input-text2.js +61 -32
- package/dist/components/mg-input-text2.js.map +1 -1
- package/dist/components/mg-input-textarea.js +25 -25
- package/dist/components/mg-input-textarea.js.map +1 -1
- package/dist/components/mg-input-title2.js +7 -4
- package/dist/components/mg-input-title2.js.map +1 -1
- package/dist/components/mg-input-toggle.js +11 -11
- package/dist/components/mg-input-toggle.js.map +1 -1
- package/dist/components/mg-input2.js +30 -59
- package/dist/components/mg-input2.js.map +1 -1
- package/dist/components/mg-item-more2.js +40 -36
- 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 +39 -41
- 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 +42 -112
- package/dist/components/mg-modal.js.map +1 -1
- package/dist/components/mg-pagination2.js +21 -14
- package/dist/components/mg-pagination2.js.map +1 -1
- package/dist/components/mg-panel.js +20 -12
- package/dist/components/mg-panel.js.map +1 -1
- package/dist/components/mg-popover-content2.js +6 -6
- package/dist/components/mg-popover-content2.js.map +1 -1
- package/dist/components/mg-popover2.js +16 -10
- 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 +43 -25
- package/dist/components/mg-tabs.js.map +1 -1
- package/dist/components/mg-tag.js +6 -6
- 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 +56 -36
- package/dist/components/mg-tooltip2.js.map +1 -1
- package/dist/esm/{index-eed80cc2.js → index-d8f69946.js} +26 -26
- package/dist/esm/index-d8f69946.js.map +1 -0
- package/dist/esm/{index-0df3b137.js → index-e26aede5.js} +26 -74
- package/dist/esm/index-e26aede5.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mg-action-more_36.entry.js +732 -839
- 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 +4 -4
- package/dist/esm/mg-components.js.map +1 -1
- 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-1fbb6ee7.js +3 -0
- package/dist/mg-components/p-1fbb6ee7.js.map +1 -0
- package/dist/mg-components/p-5c77f5dd.entry.js +2 -0
- package/dist/mg-components/p-5c77f5dd.entry.js.map +1 -0
- package/dist/mg-components/p-9beb09e5.entry.js +2 -0
- package/dist/mg-components/p-9beb09e5.entry.js.map +1 -0
- package/dist/mg-components/p-c9934e81.js +2 -0
- package/dist/mg-components/p-c9934e81.js.map +1 -0
- package/dist/mg-components/p-d7dde2ac.entry.js +2 -0
- package/dist/mg-components/p-d7dde2ac.entry.js.map +1 -0
- package/dist/types/assets/icons/index.d.ts +12 -1
- package/dist/types/components/atoms/{mg-character-left → internals/mg-character-left}/mg-character-left.d.ts +4 -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 +8 -3
- 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 +4 -13
- 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 +5 -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 +5 -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 +14 -39
- package/dist/types/components/molecules/mg-pagination/mg-pagination.conf.d.ts +4 -4
- package/dist/types/components/molecules/mg-pagination/mg-pagination.d.ts +1 -0
- package/dist/types/components/molecules/mg-panel/mg-panel.d.ts +5 -0
- package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +1 -1
- 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 +10 -0
- package/dist/types/components.d.ts +157 -166
- package/dist/types/locales/index.d.ts +1 -1
- package/dist/types/stencil-public-runtime.d.ts +4 -0
- 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 +293 -551
- package/package.json +32 -29
- package/dist/cjs/index-8a3adbd1.js.map +0 -1
- package/dist/cjs/index-e1a25816.js.map +0 -1
- package/dist/collection/components/atoms/mg-card/mg-card.conf.js +0 -9
- package/dist/collection/components/atoms/mg-card/mg-card.conf.js.map +0 -1
- package/dist/collection/components/atoms/mg-character-left/mg-character-left.js.map +0 -1
- package/dist/collection/components/atoms/mg-input-title/mg-input-title.js.map +0 -1
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.conf.js.map +0 -1
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.js.map +0 -1
- package/dist/collection/fonts/OpenSans-Bold.ttf +0 -0
- package/dist/collection/fonts/OpenSans-Regular.ttf +0 -0
- package/dist/collection/fonts/OpenSans-SemiBold.ttf +0 -0
- package/dist/collection/styles/fonts.css +0 -1
- package/dist/collection/styles/global.css +0 -1
- package/dist/collection/styles/main.css +0 -1
- package/dist/collection/styles/mg-components-utils.css +0 -1
- package/dist/collection/styles/variables.css +0 -1
- package/dist/collection/variables.css +0 -1
- package/dist/esm/index-0df3b137.js.map +0 -1
- package/dist/esm/index-eed80cc2.js.map +0 -1
- package/dist/mg-components/fonts/OpenSans-Bold.ttf +0 -0
- package/dist/mg-components/fonts/OpenSans-Regular.ttf +0 -0
- package/dist/mg-components/fonts/OpenSans-SemiBold.ttf +0 -0
- package/dist/mg-components/p-88f6c2f9.entry.js +0 -2
- package/dist/mg-components/p-88f6c2f9.entry.js.map +0 -1
- package/dist/mg-components/p-e5db08c5.entry.js +0 -2
- package/dist/mg-components/p-e5db08c5.entry.js.map +0 -1
- package/dist/mg-components/p-efce3d8c.js +0 -2
- package/dist/mg-components/p-efce3d8c.js.map +0 -1
- package/dist/mg-components/p-f95b4418.js +0 -3
- package/dist/mg-components/p-f95b4418.js.map +0 -1
- package/dist/mg-components/styles/fonts.css +0 -1
- package/dist/mg-components/styles/global.css +0 -1
- package/dist/mg-components/styles/main.css +0 -1
- package/dist/mg-components/styles/mg-components-utils.css +0 -1
- package/dist/mg-components/styles/variables.css +0 -1
- package/dist/mg-components/variables.css +0 -1
- package/dist/types/components/atoms/mg-card/mg-card.conf.d.ts +0 -16
- /package/dist/collection/components/molecules/{mg-item-more → internals/mg-item-more}/mg-item-more.conf.js +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { ClassList, isValidString } from "@mgdis/stencil-helpers";
|
|
3
|
-
import {
|
|
3
|
+
import { classReadonly, classDisabled, widths } from "../mg-input/mg-input.conf";
|
|
4
4
|
import { initLocales } from "../../../../locales";
|
|
5
5
|
export class MgInputPassword {
|
|
6
6
|
constructor() {
|
|
@@ -20,7 +20,7 @@ export class MgInputPassword {
|
|
|
20
20
|
* Handle blur event
|
|
21
21
|
*/
|
|
22
22
|
this.handleBlur = () => {
|
|
23
|
-
this.handlerInProgress =
|
|
23
|
+
this.handlerInProgress = 'blur';
|
|
24
24
|
this.displayError().finally(() => {
|
|
25
25
|
// reset guard
|
|
26
26
|
this.handlerInProgress = undefined;
|
|
@@ -107,7 +107,7 @@ export class MgInputPassword {
|
|
|
107
107
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
108
108
|
});
|
|
109
109
|
// apply new width
|
|
110
|
-
if (newValue)
|
|
110
|
+
if (newValue !== undefined)
|
|
111
111
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
112
112
|
}
|
|
113
113
|
/**
|
|
@@ -128,10 +128,10 @@ export class MgInputPassword {
|
|
|
128
128
|
*/
|
|
129
129
|
async setError(valid, errorMessage) {
|
|
130
130
|
if (typeof valid !== 'boolean') {
|
|
131
|
-
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean');
|
|
131
|
+
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean.');
|
|
132
132
|
}
|
|
133
133
|
else if (!isValidString(errorMessage)) {
|
|
134
|
-
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
|
|
134
|
+
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string.');
|
|
135
135
|
}
|
|
136
136
|
else {
|
|
137
137
|
this.setValidity(valid);
|
|
@@ -148,7 +148,7 @@ export class MgInputPassword {
|
|
|
148
148
|
this.valid = newValue;
|
|
149
149
|
this.invalid = !this.valid;
|
|
150
150
|
// We need to send valid event even if it is the same value
|
|
151
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
151
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
152
152
|
this.inputValid.emit(this.valid);
|
|
153
153
|
}
|
|
154
154
|
/*************
|
|
@@ -176,10 +176,10 @@ export class MgInputPassword {
|
|
|
176
176
|
* @returns HTML Element
|
|
177
177
|
*/
|
|
178
178
|
render() {
|
|
179
|
-
return (h("mg-input", { key: '
|
|
179
|
+
return (h("mg-input", { key: '6459a70869ba217a29ad57b79aac2e5bf2aaddfb', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
180
180
|
if (el !== null)
|
|
181
181
|
this.input = el;
|
|
182
|
-
} }), h("mg-button", {
|
|
182
|
+
} }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: this.displayPassword ? 'eye-slash' : 'eye' }))))));
|
|
183
183
|
}
|
|
184
184
|
static get is() { return "mg-input-password"; }
|
|
185
185
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-input-password.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-password/mg-input-password.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, h, Prop, EventEmitter, State, Method, Watch } from '@stencil/core';\nimport { ClassList, isValidString } from '@mgdis/stencil-helpers';\nimport { type TooltipPosition, type Width, Handler, classReadonly, classDisabled, widths } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n tag: 'mg-input-password',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-password.css',\n shadow: true,\n})\nexport class MgInputPassword {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private input: HTMLInputElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: Handler;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgInputPasswordElement;\n\n /**\n * Component value\n */\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n handleValue(newValue: string): void {\n this.valueChange.emit(newValue);\n }\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n */\n @Prop() identifier!: string;\n\n /**\n * Input name\n * If not set the value equals the identifier\n */\n @Prop() name: string = this.identifier;\n\n /**\n * Input label\n */\n @Prop() label!: string;\n\n /**\n * Define if label is displayed on top\n */\n @Prop() labelOnTop?: boolean;\n\n /**\n * Define if label is visible\n */\n @Prop() labelHide = false;\n\n /**\n * Input placeholder.\n * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n */\n @Prop() placeholder?: string;\n\n /**\n * Input max length\n */\n @Prop() maxlength;\n\n /**\n * Define if input is required\n */\n @Prop() required = false;\n\n /**\n * Define if input is readonly\n */\n @Prop() readonly = false;\n @Watch('readonly')\n watchReadonly(newValue: MgInputPassword['readonly']): void {\n if (newValue) this.classCollection.add(classReadonly);\n else this.classCollection.delete(classReadonly);\n }\n\n /**\n * Define if input is disabled\n */\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (this.input !== undefined) {\n this.input[prop] = newValue;\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n }\n\n @Watch('disabled')\n watchDisabled(newValue: MgInputPassword['disabled']): void {\n if (newValue) this.classCollection.add(classDisabled);\n else this.classCollection.delete(classDisabled);\n }\n\n /**\n * Define input width\n */\n @Prop() mgWidth: Width = 'full';\n @Watch('mgWidth')\n watchMgWidth(newValue: MgInputPassword['mgWidth']): void {\n // reset width class\n widths.forEach(width => {\n this.classCollection.delete(`mg-c-input--width-${width}`);\n });\n\n // apply new width\n if (newValue) this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);\n }\n\n /**\n * Add a tooltip message next to the input\n */\n @Prop() tooltip?: string;\n\n /**\n * Define tooltip position\n */\n @Prop() tooltipPosition: TooltipPosition = 'input';\n\n /**\n * Add a help text under the input, usually expected data format and example\n */\n @Prop() helpText?: string;\n\n /**\n * Define input valid state\n */\n @Prop({ mutable: true }) valid: boolean;\n\n /**\n * Define input invalid state\n */\n @Prop({ mutable: true }) invalid: boolean;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-input--password']);\n\n /**\n * Error message to display\n */\n @State() errorMessage: string;\n\n /**\n * Indicates if password is displayed or not\n */\n @State() displayPassword = false;\n\n /**\n * Emited event when value change\n */\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputPasswordElement['value']>;\n\n /**\n * Emited event when checking validity\n */\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputPasswordElement['valid']>;\n\n /**\n * Display input error if it exists.\n */\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /**\n * Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n */\n @Method()\n async setError(valid: MgInputPassword['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-password> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-password> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /**\n * Method to set validity values\n * @param newValue - valid new value\n */\n private setValidity(newValue: MgInputPassword['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined || (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n\n /**\n * Handle input event\n */\n private handleInput = (): void => {\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n }\n this.value = this.input.value;\n };\n\n /**\n * Handle blur event\n */\n private handleBlur = (): void => {\n this.handlerInProgress = Handler.BLUR;\n this.displayError().finally(() => {\n // reset guard\n this.handlerInProgress = undefined;\n });\n };\n\n /**\n * Toggle display-pasword value\n */\n private toggleDisplayPassword = (): void => {\n this.displayPassword = !this.displayPassword;\n };\n\n /**\n * Check if input is valid\n */\n private checkValidity = (): void => {\n this.setValidity(this.readonly || this.disabled || this.input.checkValidity());\n };\n\n /**\n * Set input error message\n * @param errorMessage - errorMessage override\n */\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n if (!this.valid) {\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n // required\n else if (this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n }\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n * @returns timeout\n */\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n this.messages = initLocales(this.element).messages;\n this.watchReadonly(this.readonly);\n this.watchDisabled(this.disabled);\n this.watchMgWidth(this.mgWidth);\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <mg-input\n label={this.label}\n identifier={this.identifier}\n class={this.classCollection.join()}\n ariaDescribedbyIDs={[]}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonlyValue={this.value !== undefined ? '•'.repeat(this.value.length) : undefined}\n tooltip={this.tooltip}\n tooltipPosition={this.tooltipPosition}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n >\n <span class=\"mg-c-input__input-group\">\n <input\n type={this.displayPassword ? 'text' : 'password'}\n class=\"mg-c-input__box mg-c-input__box--width\"\n value={this.value}\n id={this.identifier}\n name={this.name}\n placeholder={this.placeholder}\n title={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n maxlength={this.maxlength}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onBlur={this.handleBlur}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.input = el;\n }}\n />\n <mg-button\n label={this.messages.input.password[this.displayPassword ? 'hide' : 'display']}\n disabled={this.disabled}\n variant=\"flat\"\n class=\"mg-c-input__append-button\"\n is-icon\n onClick={this.toggleDisplayPassword}\n aria-controls={this.identifier}\n >\n <mg-icon class=\"mg-c-input__input-icon\" icon={this.displayPassword ? 'eye-slash' : 'eye'}></mg-icon>\n </mg-button>\n </span>\n </mg-input>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"mg-input-password.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-password/mg-input-password.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, h, Prop, EventEmitter, State, Method, Watch } from '@stencil/core';\nimport { ClassList, isValidString } from '@mgdis/stencil-helpers';\nimport { type TooltipPosition, type Width, type EventType, classReadonly, classDisabled, widths } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n tag: 'mg-input-password',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-password.css',\n shadow: true,\n})\nexport class MgInputPassword {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private input: HTMLInputElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: EventType;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgInputPasswordElement;\n\n /**\n * Component value\n */\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n handleValue(newValue: string): void {\n this.valueChange.emit(newValue);\n }\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n */\n @Prop() identifier!: string;\n\n /**\n * Input name\n * If not set the value equals the identifier\n */\n @Prop() name: string = this.identifier;\n\n /**\n * Input label\n */\n @Prop() label!: string;\n\n /**\n * Define if label is displayed on top\n */\n @Prop() labelOnTop?: boolean;\n\n /**\n * Define if label is visible\n */\n @Prop() labelHide = false;\n\n /**\n * Input placeholder.\n * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n */\n @Prop() placeholder?: string;\n\n /**\n * Input max length\n */\n @Prop() maxlength;\n\n /**\n * Define if input is required\n */\n @Prop() required = false;\n\n /**\n * Define if input is readonly\n */\n @Prop() readonly = false;\n @Watch('readonly')\n watchReadonly(newValue: MgInputPassword['readonly']): void {\n if (newValue) this.classCollection.add(classReadonly);\n else this.classCollection.delete(classReadonly);\n }\n\n /**\n * Define if input is disabled\n */\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (this.input !== undefined) {\n this.input[prop] = newValue;\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n }\n\n @Watch('disabled')\n watchDisabled(newValue: MgInputPassword['disabled']): void {\n if (newValue) this.classCollection.add(classDisabled);\n else this.classCollection.delete(classDisabled);\n }\n\n /**\n * Define input width\n */\n @Prop() mgWidth: Width = 'full';\n @Watch('mgWidth')\n watchMgWidth(newValue: MgInputPassword['mgWidth']): void {\n // reset width class\n widths.forEach(width => {\n this.classCollection.delete(`mg-c-input--width-${width}`);\n });\n\n // apply new width\n if (newValue !== undefined) this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);\n }\n\n /**\n * Add a tooltip message next to the input\n */\n @Prop() tooltip?: string;\n\n /**\n * Define tooltip position\n */\n @Prop() tooltipPosition: TooltipPosition = 'input';\n\n /**\n * Add a help text under the input, usually expected data format and example\n */\n @Prop() helpText?: string;\n\n /**\n * Define input valid state\n */\n @Prop({ mutable: true }) valid: boolean;\n\n /**\n * Define input invalid state\n */\n @Prop({ mutable: true }) invalid: boolean;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-input--password']);\n\n /**\n * Error message to display\n */\n @State() errorMessage: string;\n\n /**\n * Indicates if password is displayed or not\n */\n @State() displayPassword = false;\n\n /**\n * Emited event when value change\n */\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputPasswordElement['value']>;\n\n /**\n * Emited event when checking validity\n */\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputPasswordElement['valid']>;\n\n /**\n * Display input error if it exists.\n */\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /**\n * Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n */\n @Method()\n async setError(valid: MgInputPassword['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-password> method \"setError()\" param \"valid\" must be a boolean.');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-password> method \"setError()\" param \"errorMessage\" must be a string.');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /**\n * Method to set validity values\n * @param newValue - valid new value\n */\n private setValidity(newValue: MgInputPassword['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n\n /**\n * Handle input event\n */\n private handleInput = (): void => {\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n }\n this.value = this.input.value;\n };\n\n /**\n * Handle blur event\n */\n private handleBlur = (): void => {\n this.handlerInProgress = 'blur';\n this.displayError().finally(() => {\n // reset guard\n this.handlerInProgress = undefined;\n });\n };\n\n /**\n * Toggle display-pasword value\n */\n private toggleDisplayPassword = (): void => {\n this.displayPassword = !this.displayPassword;\n };\n\n /**\n * Check if input is valid\n */\n private checkValidity = (): void => {\n this.setValidity(this.readonly || this.disabled || this.input.checkValidity());\n };\n\n /**\n * Set input error message\n * @param errorMessage - errorMessage override\n */\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n if (!this.valid) {\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n // required\n else if (this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n }\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n * @returns timeout\n */\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n this.messages = initLocales(this.element).messages;\n this.watchReadonly(this.readonly);\n this.watchDisabled(this.disabled);\n this.watchMgWidth(this.mgWidth);\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <mg-input\n label={this.label}\n identifier={this.identifier}\n class={this.classCollection.join()}\n ariaDescribedbyIDs={[]}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n tooltip={this.tooltip}\n tooltipPosition={this.readonly && this.value === undefined ? 'label' : this.tooltipPosition}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n >\n {this.readonly ? (\n this.value !== undefined && <b class=\"mg-c-input__readonly-value\">{'•'.repeat(this.value.length)}</b>\n ) : (\n <span class=\"mg-c-input__input-group\">\n <input\n type={this.displayPassword ? 'text' : 'password'}\n class=\"mg-c-input__box mg-c-input__box--width\"\n value={this.value}\n id={this.identifier}\n name={this.name}\n placeholder={this.placeholder}\n title={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n maxlength={this.maxlength}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onBlur={this.handleBlur}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.input = el;\n }}\n />\n <mg-button\n label={this.messages.input.password[this.displayPassword ? 'hide' : 'display']}\n disabled={this.disabled}\n variant=\"flat\"\n class=\"mg-c-input__append-button\"\n is-icon\n onClick={this.toggleDisplayPassword}\n aria-controls={this.identifier}\n >\n <mg-icon class=\"mg-c-input__input-icon\" icon={this.displayPassword ? 'eye-slash' : 'eye'}></mg-icon>\n </mg-button>\n </span>\n )}\n </mg-input>\n );\n }\n}\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
|
|
2
2
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
3
3
|
import { h } from "@stencil/core";
|
|
4
|
-
import { ClassList, allItemsAreString, isValidString } from "@mgdis/stencil-helpers";
|
|
5
|
-
import {
|
|
4
|
+
import { ClassList, allItemsAreString, isValidString, toString } from "@mgdis/stencil-helpers";
|
|
5
|
+
import { classReadonly, classDisabled, classFieldset } from "../mg-input/mg-input.conf";
|
|
6
6
|
import { initLocales } from "../../../../locales";
|
|
7
7
|
/**
|
|
8
8
|
* type Option validation function
|
|
@@ -33,7 +33,7 @@ export class MgInputRadio {
|
|
|
33
33
|
* Handle blur event
|
|
34
34
|
*/
|
|
35
35
|
this.handleBlur = () => {
|
|
36
|
-
this.handlerInProgress =
|
|
36
|
+
this.handlerInProgress = 'blur';
|
|
37
37
|
this.checkValidity();
|
|
38
38
|
this.setErrorMessage();
|
|
39
39
|
// reset guard
|
|
@@ -93,7 +93,7 @@ export class MgInputRadio {
|
|
|
93
93
|
if (allItemsAreString(this.items) && typeof newValue === 'string') {
|
|
94
94
|
this.readonlyValue = newValue;
|
|
95
95
|
}
|
|
96
|
-
else if (this.items.every(isOption)) {
|
|
96
|
+
else if (Array.isArray(this.items) && this.items.every(isOption)) {
|
|
97
97
|
this.readonlyValue = (_a = this.items.find(item => item.value === newValue)) === null || _a === void 0 ? void 0 : _a.title;
|
|
98
98
|
}
|
|
99
99
|
else {
|
|
@@ -104,7 +104,7 @@ export class MgInputRadio {
|
|
|
104
104
|
validateItems(newValue) {
|
|
105
105
|
// Validate if items have required min length
|
|
106
106
|
if (typeof newValue === 'object' && newValue.length < 2) {
|
|
107
|
-
throw new Error(
|
|
107
|
+
throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${toString(newValue)}.`);
|
|
108
108
|
}
|
|
109
109
|
// String array
|
|
110
110
|
else if (allItemsAreString(newValue)) {
|
|
@@ -115,7 +115,7 @@ export class MgInputRadio {
|
|
|
115
115
|
this.options = newValue;
|
|
116
116
|
}
|
|
117
117
|
else {
|
|
118
|
-
throw new Error(
|
|
118
|
+
throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${toString(newValue)}.`);
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
121
|
watchInputVerticalList(newValue) {
|
|
@@ -164,10 +164,10 @@ export class MgInputRadio {
|
|
|
164
164
|
*/
|
|
165
165
|
async setError(valid, errorMessage) {
|
|
166
166
|
if (typeof valid !== 'boolean') {
|
|
167
|
-
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean');
|
|
167
|
+
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean.');
|
|
168
168
|
}
|
|
169
169
|
else if (!isValidString(errorMessage)) {
|
|
170
|
-
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
|
|
170
|
+
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string.');
|
|
171
171
|
}
|
|
172
172
|
else {
|
|
173
173
|
this.setValidity(valid);
|
|
@@ -184,7 +184,7 @@ export class MgInputRadio {
|
|
|
184
184
|
this.valid = newValue;
|
|
185
185
|
this.invalid = !this.valid;
|
|
186
186
|
// We need to send valid event even if it is the same value
|
|
187
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
187
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
188
188
|
this.inputValid.emit(this.valid);
|
|
189
189
|
}
|
|
190
190
|
/*************
|
|
@@ -215,10 +215,10 @@ export class MgInputRadio {
|
|
|
215
215
|
* @returns HTML Element
|
|
216
216
|
*/
|
|
217
217
|
render() {
|
|
218
|
-
return (h("mg-input", { key: '
|
|
218
|
+
return (h("mg-input", { key: '228bdfa7215bf39bbdd5ca97b46ca761a3f42779', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
|
|
219
219
|
if (el !== null)
|
|
220
220
|
this.inputs[index] = el;
|
|
221
|
-
} }), h("label", { htmlFor: this.identifier + '_' + index }, input.title)))))));
|
|
221
|
+
} }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));
|
|
222
222
|
}
|
|
223
223
|
static get is() { return "mg-input-radio"; }
|
|
224
224
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-input-radio.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-radio/mg-input-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, Event, h, Prop, EventEmitter, State, Watch, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { RadioOption } from './mg-input-radio.conf';\nimport { Handler, classReadonly, type TooltipPosition, classDisabled, classFieldset } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns radio option type is valid\n */\nconst isOption = (option: unknown): option is RadioOption =>\n typeof option === 'object' && typeof (option as RadioOption).title === 'string' && (option as RadioOption).value !== undefined;\n\n@Component({\n tag: 'mg-input-radio',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-radio.css',\n shadow: true,\n})\nexport class MgInputRadio {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private inputs: HTMLInputElement[] = [];\n\n // classes\n private readonly classVerticalList = 'mg-c-input--vertical-list';\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: Handler;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgInputRadioElement;\n\n /**\n * Component value\n */\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n watchValue(newValue: any): void {\n if (allItemsAreString(this.items) && typeof newValue === 'string') {\n this.readonlyValue = newValue;\n } else if (this.items.every(isOption)) {\n this.readonlyValue = this.items.find(item => item.value === newValue)?.title;\n } else {\n this.readonlyValue = null;\n }\n this.valueChange.emit(newValue);\n }\n\n /**\n * Items are the possible options to select\n */\n @Prop() items!: string[] | RadioOption[];\n @Watch('items')\n validateItems(newValue: string[] | RadioOption[]): void {\n // Validate if items have required min length\n if (typeof newValue === 'object' && newValue.length < 2) {\n throw new Error('<mg-input-radio> prop \"items\" require at least 2 items.');\n }\n // String array\n else if (allItemsAreString(newValue as string[])) {\n this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));\n }\n // Object array\n else if (newValue && (newValue as RadioOption[]).every(item => isOption(item))) {\n this.options = newValue as RadioOption[];\n } else {\n throw new Error('<mg-input-radio> prop \"items\" is required and all items must be the same type, string or RadioOption.');\n }\n }\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n */\n @Prop() identifier!: string;\n\n /**\n * Input name\n * If not set the value equals the identifier\n */\n @Prop() name: string = this.identifier;\n\n /**\n * Input label\n */\n @Prop() label!: string;\n\n /**\n * Define if label is displayed on top\n */\n @Prop() labelOnTop = false;\n\n /**\n * Define if label is visible\n */\n @Prop() labelHide = false;\n\n /**\n * Define if inputs are display verticaly\n */\n @Prop() inputVerticalList = false;\n @Watch('inputVerticalList')\n watchInputVerticalList(newValue: MgInputRadio['inputVerticalList']): void {\n if (newValue) this.classCollection.add(this.classVerticalList);\n else this.classCollection.delete(this.classVerticalList);\n }\n\n /**\n * Define if input is required\n */\n @Prop() required = false;\n\n /**\n * Define if input is readonly\n */\n @Prop() readonly = false;\n @Watch('readonly')\n watchReadonly(newValue: MgInputRadio['readonly']): void {\n if (newValue) this.classCollection.add(classReadonly);\n else this.classCollection.delete(classReadonly);\n }\n /**\n * Define if input is disabled\n */\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n this.inputs.forEach(input => {\n input[prop] = newValue;\n });\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n\n @Watch('disabled')\n watchDisabled(newValue: MgInputRadio['disabled']): void {\n if (newValue) this.classCollection.add(classDisabled);\n else this.classCollection.delete(classDisabled);\n }\n\n /**\n * Add a tooltip message next to the input\n */\n @Prop() tooltip?: string;\n\n /**\n * Define tooltip position\n */\n @Prop() tooltipPosition: TooltipPosition = 'input';\n\n /**\n * Add a help text under the input, usually expected data format and example\n */\n @Prop() helpText?: string;\n\n /**\n * Define input valid state\n */\n @Prop({ mutable: true }) valid: boolean;\n\n /**\n * Define input invalid state\n */\n @Prop({ mutable: true }) invalid: boolean;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-input--radio', classFieldset]);\n\n /**\n * Error message to display\n */\n @State() errorMessage: string;\n\n /**\n * Formated items for display\n */\n @State() options: RadioOption[];\n\n /**\n * Value to display in readonly mode\n */\n @State() readonlyValue: string;\n\n /**\n * Emitted event when value change\n */\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputRadioElement['value']>;\n\n /**\n * Emited event when checking validity\n */\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputRadioElement['valid']>;\n\n /**\n * Display input error if it exists.\n */\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /**\n * Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n */\n @Method()\n async setError(valid: MgInputRadio['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-radio> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-radio> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /**\n * Method to set validity values\n * @param newValue - valid new value\n */\n private setValidity(newValue: MgInputRadio['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined || (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n\n /**\n * Handle input event\n * @param event - input event\n */\n private handleInput = (event: InputEvent & { target: HTMLInputElement }) => {\n this.checkValidity();\n this.value = this.options[event.target.value].value;\n };\n\n /**\n * Handle blur event\n */\n private handleBlur = (): void => {\n this.handlerInProgress = Handler.BLUR;\n this.checkValidity();\n this.setErrorMessage();\n // reset guard\n this.handlerInProgress = undefined;\n };\n\n /**\n * Check if input is valid\n */\n private checkValidity = (): void => {\n this.setValidity(this.readonly || this.disabled || this.getInvalidElement() === undefined);\n };\n\n /**\n * Set input error message\n * @param errorMessage - errorMessage override\n */\n private setErrorMessage = (errorMessage?: string): void => {\n const invalidElement = this.getInvalidElement();\n\n // Set error message\n this.errorMessage = undefined;\n if (!this.valid) {\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n } else if (invalidElement.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n }\n };\n\n /**\n * get invalid element\n * @returns element\n */\n private getInvalidElement = (): HTMLInputElement => this.inputs.find((input: HTMLInputElement) => !input.disabled && !input.readOnly && !input.checkValidity());\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n * @returns timeout\n */\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateItems(this.items);\n this.watchInputVerticalList(this.inputVerticalList);\n this.watchReadonly(this.readonly);\n this.watchDisabled(this.disabled);\n this.watchValue(this.value);\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <mg-input\n label={this.label}\n identifier={this.identifier}\n class={this.classCollection.join()}\n ariaDescribedbyIDs={[]}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonlyValue={this.readonlyValue}\n tooltip={this.tooltip}\n tooltipPosition={this.tooltipPosition}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n >\n <ul class=\"mg-c-input__input-group-container\" role=\"list\">\n {this.options.map((input, index) => (\n <li key={input.title} class={{ 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled }}>\n <input\n type=\"radio\"\n id={this.identifier + '_' + index}\n name={this.identifier}\n value={index}\n checked={JSON.stringify(this.value) === JSON.stringify(this.options[index].value)}\n disabled={this.disabled || input.disabled}\n required={this.required}\n onBlur={this.handleBlur}\n onInput={this.handleInput}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.inputs[index] = el;\n }}\n />\n <label htmlFor={this.identifier + '_' + index}>{input.title}</label>\n </li>\n ))}\n </ul>\n </mg-input>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"mg-input-radio.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-radio/mg-input-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, Event, h, Prop, EventEmitter, State, Watch, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { RadioOption } from './mg-input-radio.conf';\nimport { type EventType, classReadonly, type TooltipPosition, classDisabled, classFieldset } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns radio option type is valid\n */\nconst isOption = (option: unknown): option is RadioOption =>\n typeof option === 'object' && typeof (option as RadioOption).title === 'string' && (option as RadioOption).value !== undefined;\n\n@Component({\n tag: 'mg-input-radio',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-radio.css',\n shadow: true,\n})\nexport class MgInputRadio {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private inputs: HTMLInputElement[] = [];\n\n // classes\n private readonly classVerticalList = 'mg-c-input--vertical-list';\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: EventType;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgInputRadioElement;\n\n /**\n * Component value\n */\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n watchValue(newValue: any): void {\n if (allItemsAreString(this.items) && typeof newValue === 'string') {\n this.readonlyValue = newValue;\n } else if (Array.isArray(this.items) && this.items.every(isOption)) {\n this.readonlyValue = this.items.find(item => item.value === newValue)?.title;\n } else {\n this.readonlyValue = null;\n }\n this.valueChange.emit(newValue);\n }\n\n /**\n * Items are the possible options to select\n */\n @Prop() items!: string[] | RadioOption[];\n @Watch('items')\n validateItems(newValue: string[] | RadioOption[]): void {\n // Validate if items have required min length\n if (typeof newValue === 'object' && newValue.length < 2) {\n throw new Error(`<mg-input-radio> prop \"items\" require at least 2 items. Passed value: ${toString(newValue)}.`);\n }\n // String array\n else if (allItemsAreString(newValue as string[])) {\n this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));\n }\n // Object array\n else if (newValue && (newValue as RadioOption[]).every(item => isOption(item))) {\n this.options = newValue as RadioOption[];\n } else {\n throw new Error(`<mg-input-radio> prop \"items\" is required and all items must be the same type, string or RadioOption. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n */\n @Prop() identifier!: string;\n\n /**\n * Input name\n * If not set the value equals the identifier\n */\n @Prop() name: string = this.identifier;\n\n /**\n * Input label\n */\n @Prop() label!: string;\n\n /**\n * Define if label is displayed on top\n */\n @Prop() labelOnTop = false;\n\n /**\n * Define if label is visible\n */\n @Prop() labelHide = false;\n\n /**\n * Define if inputs are display verticaly\n */\n @Prop() inputVerticalList = false;\n @Watch('inputVerticalList')\n watchInputVerticalList(newValue: MgInputRadio['inputVerticalList']): void {\n if (newValue) this.classCollection.add(this.classVerticalList);\n else this.classCollection.delete(this.classVerticalList);\n }\n\n /**\n * Define if input is required\n */\n @Prop() required = false;\n\n /**\n * Define if input is readonly\n */\n @Prop() readonly = false;\n @Watch('readonly')\n watchReadonly(newValue: MgInputRadio['readonly']): void {\n if (newValue) this.classCollection.add(classReadonly);\n else this.classCollection.delete(classReadonly);\n }\n /**\n * Define if input is disabled\n */\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n this.inputs.forEach(input => {\n input[prop] = newValue;\n });\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n\n @Watch('disabled')\n watchDisabled(newValue: MgInputRadio['disabled']): void {\n if (newValue) this.classCollection.add(classDisabled);\n else this.classCollection.delete(classDisabled);\n }\n\n /**\n * Add a tooltip message next to the input\n */\n @Prop() tooltip?: string;\n\n /**\n * Define tooltip position\n */\n @Prop() tooltipPosition: TooltipPosition = 'input';\n\n /**\n * Add a help text under the input, usually expected data format and example\n */\n @Prop() helpText?: string;\n\n /**\n * Define input valid state\n */\n @Prop({ mutable: true }) valid: boolean;\n\n /**\n * Define input invalid state\n */\n @Prop({ mutable: true }) invalid: boolean;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-input--radio', classFieldset]);\n\n /**\n * Error message to display\n */\n @State() errorMessage: string;\n\n /**\n * Formated items for display\n */\n @State() options: RadioOption[];\n\n /**\n * Value to display in readonly mode\n */\n @State() readonlyValue: string;\n\n /**\n * Emitted event when value change\n */\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputRadioElement['value']>;\n\n /**\n * Emited event when checking validity\n */\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputRadioElement['valid']>;\n\n /**\n * Display input error if it exists.\n */\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /**\n * Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n */\n @Method()\n async setError(valid: MgInputRadio['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-radio> method \"setError()\" param \"valid\" must be a boolean.');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-radio> method \"setError()\" param \"errorMessage\" must be a string.');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /**\n * Method to set validity values\n * @param newValue - valid new value\n */\n private setValidity(newValue: MgInputRadio['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n\n /**\n * Handle input event\n * @param event - input event\n */\n private handleInput = (event: InputEvent & { target: HTMLInputElement }) => {\n this.checkValidity();\n this.value = this.options[event.target.value].value;\n };\n\n /**\n * Handle blur event\n */\n private handleBlur = (): void => {\n this.handlerInProgress = 'blur';\n this.checkValidity();\n this.setErrorMessage();\n // reset guard\n this.handlerInProgress = undefined;\n };\n\n /**\n * Check if input is valid\n */\n private checkValidity = (): void => {\n this.setValidity(this.readonly || this.disabled || this.getInvalidElement() === undefined);\n };\n\n /**\n * Set input error message\n * @param errorMessage - errorMessage override\n */\n private setErrorMessage = (errorMessage?: string): void => {\n const invalidElement = this.getInvalidElement();\n\n // Set error message\n this.errorMessage = undefined;\n if (!this.valid) {\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n } else if (invalidElement.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n }\n };\n\n /**\n * get invalid element\n * @returns element\n */\n private getInvalidElement = (): HTMLInputElement => this.inputs.find((input: HTMLInputElement) => !input.disabled && !input.readOnly && !input.checkValidity());\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n * @returns timeout\n */\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateItems(this.items);\n this.watchInputVerticalList(this.inputVerticalList);\n this.watchReadonly(this.readonly);\n this.watchDisabled(this.disabled);\n this.watchValue(this.value);\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <mg-input\n label={this.label}\n identifier={this.identifier}\n class={this.classCollection.join()}\n ariaDescribedbyIDs={[]}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n tooltip={this.tooltip}\n tooltipPosition={this.readonly && !this.value ? 'label' : this.tooltipPosition}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n >\n {this.readonly ? (\n this.readonlyValue && <b class=\"mg-c-input__readonly-value\">{this.readonlyValue}</b>\n ) : (\n <ul class=\"mg-c-input__input-group-container\" role=\"list\">\n {this.options.map((input, index) => (\n <li key={input.title} class={{ 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled }}>\n <input\n type=\"radio\"\n id={this.identifier + '_' + index}\n name={this.identifier}\n value={index}\n checked={JSON.stringify(this.value) === JSON.stringify(this.options[index].value)}\n disabled={this.disabled || input.disabled}\n required={this.required}\n onBlur={this.handleBlur}\n onInput={this.handleInput}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.inputs[index] = el;\n }}\n />\n <label htmlFor={this.identifier + '_' + index}>{input.title}</label>\n </li>\n ))}\n </ul>\n )}\n </mg-input>\n );\n }\n}\n"]}
|
package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.conf.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-input-select.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-select/mg-input-select.conf.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * type SelectOption\n * use to match select \\> option attributes\n */\nexport type SelectOption = {\n
|
|
1
|
+
{"version":3,"file":"mg-input-select.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-select/mg-input-select.conf.ts"],"names":[],"mappings":"","sourcesContent":["import { Option } from '../../../../types';\n\n/**\n * type SelectOption\n * use to match select \\> option attributes\n */\nexport type SelectOption = Option & {\n disabled?: boolean;\n group?: string;\n};\n\n/**\n * type OptGroup\n * use to match select \\> optgroup attributes\n */\nexport type OptGroup = {\n group: string;\n options: SelectOption[];\n};\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
|
|
2
2
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
3
3
|
import { h } from "@stencil/core";
|
|
4
|
-
import { ClassList, allItemsAreString, isValidString } from "@mgdis/stencil-helpers";
|
|
5
|
-
import {
|
|
4
|
+
import { ClassList, allItemsAreString, isValidString, toString } from "@mgdis/stencil-helpers";
|
|
5
|
+
import { classReadonly, classDisabled, widths } from "../mg-input/mg-input.conf";
|
|
6
6
|
import { initLocales } from "../../../../locales";
|
|
7
7
|
/**
|
|
8
8
|
* Check if item is a well configured option
|
|
@@ -63,7 +63,7 @@ export class MgInputSelect {
|
|
|
63
63
|
* @param item - item to compare with
|
|
64
64
|
* @returns truthy if input.value is an item
|
|
65
65
|
*/
|
|
66
|
-
this.isInputValue = (item) => item.title === this.input.value;
|
|
66
|
+
this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
|
|
67
67
|
/**
|
|
68
68
|
* value props setter
|
|
69
69
|
* @param newValue - value to update with
|
|
@@ -95,7 +95,7 @@ export class MgInputSelect {
|
|
|
95
95
|
* Handle blur event
|
|
96
96
|
*/
|
|
97
97
|
this.handleBlur = () => {
|
|
98
|
-
this.handlerInProgress =
|
|
98
|
+
this.handlerInProgress = 'blur';
|
|
99
99
|
this.displayError().finally(() => {
|
|
100
100
|
// reset guard
|
|
101
101
|
this.handlerInProgress = undefined;
|
|
@@ -162,7 +162,7 @@ export class MgInputSelect {
|
|
|
162
162
|
validateValue(newValue) {
|
|
163
163
|
var _a, _b;
|
|
164
164
|
if (allItemsAreString(this.items) && typeof newValue === 'string') {
|
|
165
|
-
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
|
|
165
|
+
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== undefined ? this.input.value : newValue;
|
|
166
166
|
}
|
|
167
167
|
else if (allItemsAreOptions(this.items)) {
|
|
168
168
|
this.readonlyValue = (_b = this.items.find(item => item.value === newValue)) === null || _b === void 0 ? void 0 : _b.title;
|
|
@@ -196,7 +196,7 @@ export class MgInputSelect {
|
|
|
196
196
|
}
|
|
197
197
|
}
|
|
198
198
|
else {
|
|
199
|
-
throw new Error(
|
|
199
|
+
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: ${toString(newValue)}.`);
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
202
|
watchReadonly(newValue) {
|
|
@@ -227,7 +227,7 @@ export class MgInputSelect {
|
|
|
227
227
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
228
228
|
});
|
|
229
229
|
// apply new width
|
|
230
|
-
if (newValue)
|
|
230
|
+
if (newValue !== undefined)
|
|
231
231
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
232
232
|
}
|
|
233
233
|
/**
|
|
@@ -248,10 +248,10 @@ export class MgInputSelect {
|
|
|
248
248
|
*/
|
|
249
249
|
async setError(valid, errorMessage) {
|
|
250
250
|
if (typeof valid !== 'boolean') {
|
|
251
|
-
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
|
|
251
|
+
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean.');
|
|
252
252
|
}
|
|
253
253
|
else if (!isValidString(errorMessage)) {
|
|
254
|
-
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
|
|
254
|
+
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string.');
|
|
255
255
|
}
|
|
256
256
|
else {
|
|
257
257
|
this.setValidity(valid);
|
|
@@ -268,7 +268,7 @@ export class MgInputSelect {
|
|
|
268
268
|
this.valid = newValue;
|
|
269
269
|
this.invalid = !this.valid;
|
|
270
270
|
// We need to send valid event even if it is the same value
|
|
271
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress ===
|
|
271
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
272
272
|
this.inputValid.emit(this.valid);
|
|
273
273
|
}
|
|
274
274
|
/*************
|
|
@@ -303,11 +303,11 @@ export class MgInputSelect {
|
|
|
303
303
|
* @returns HTML Element
|
|
304
304
|
*/
|
|
305
305
|
render() {
|
|
306
|
-
return (h("mg-input", { key: '
|
|
306
|
+
return (h("mg-input", { key: 'a8d381dbc10d8a2274be86c13bf570faacbeceda', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
307
307
|
if (el !== null)
|
|
308
308
|
this.input = el;
|
|
309
309
|
} }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
310
|
-
h("option", {
|
|
310
|
+
h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (h("optgroup", { label: option.group, key: option.group }, option.options.map(this.renderOption))) : (isOption(option) && this.renderOption(option)))))));
|
|
311
311
|
}
|
|
312
312
|
static get is() { return "mg-input-select"; }
|
|
313
313
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-input-select.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-select/mg-input-select.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, Event, h, Prop, State, EventEmitter, Watch, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { SelectOption, OptGroup } from './mg-input-select.conf';\nimport { type TooltipPosition, type Width, Handler, classReadonly, classDisabled, widths } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n/**\n * Check if item is a well configured option\n * @param option - select option\n * @returns select option type is valid\n */\nconst isOption = (option: unknown): option is SelectOption => typeof option === 'object' && typeof (option as SelectOption).title === 'string';\n\n/**\n * Check if items[] is SelectOption\n * @param items - select option\n * @returns select option array type is valid\n */\nconst allItemsAreOptions = (items: unknown[]): items is SelectOption[] => Array.isArray(items) && items.every(item => isOption(item));\n\n/**\n * Check if item is a well configured optgroup\n * @param optgroup - select option\n * @returns select optgroup type is valid\n */\nconst isOptGroup = (optgroup: unknown): optgroup is OptGroup =>\n typeof optgroup === 'object' && typeof (optgroup as OptGroup).group === 'string' && allItemsAreOptions((optgroup as OptGroup).options);\n\n/**\n * Group options\n * @param acc - reduce accumulator\n * @param item - item to add\n * @returns grouped options\n */\nconst groupOptions = (acc: (SelectOption | OptGroup)[], { group, title, value, disabled }: SelectOption): (SelectOption | OptGroup)[] => {\n if (group !== undefined) {\n // Check if group is already created\n const optGroup: OptGroup = (acc as OptGroup[]).find(grp => grp.group === group);\n // Add to group\n if (optGroup !== undefined) {\n optGroup.options.push({ title, value, disabled });\n }\n // Create group\n else {\n acc.push({ group, options: [{ title, value, disabled }] });\n }\n } else {\n acc.push({ title, value, disabled });\n }\n return acc;\n};\n\n@Component({\n tag: 'mg-input-select',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-select.css',\n shadow: true,\n})\nexport class MgInputSelect {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private input: HTMLSelectElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: Handler;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgInputSelectElement;\n\n /**\n * Component value\n */\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n validateValue(newValue: MgInputSelect['value']): void {\n if (allItemsAreString(this.items) && typeof newValue === 'string') {\n this.readonlyValue = this.input?.value ? this.input.value : newValue;\n } else if (allItemsAreOptions(this.items)) {\n this.readonlyValue = this.items.find(item => item.value === newValue)?.title;\n } else {\n this.readonlyValue = null;\n }\n this.valueChange.emit(newValue);\n }\n\n /**\n * Items are the possible options to select\n */\n @Prop() items!: (string | SelectOption)[];\n @Watch('items')\n validateItems(newValue: MgInputSelect['items']): void {\n // Empty options\n if (newValue.length === 0) {\n this.options = [];\n }\n // String array\n else if (allItemsAreString(newValue)) {\n if (typeof this.value === 'string') this.valueExist = newValue.includes(this.value);\n this.options = newValue.map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (allItemsAreOptions(newValue)) {\n this.valueExist = newValue.map(item => item.value).includes(this.value);\n // Grouped object options\n if (newValue.some(item => Boolean(item.group))) {\n this.options = newValue.reduce(groupOptions, []);\n }\n // Standart object options\n else {\n this.options = newValue;\n }\n } else {\n 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.');\n }\n }\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n */\n @Prop() identifier!: string;\n\n /**\n * Input name\n * If not set the value equals the identifier\n */\n @Prop() name = this.identifier;\n\n /**\n * Input label\n */\n @Prop() label!: string;\n\n /**\n * Define if label is displayed on top\n */\n @Prop() labelOnTop?: boolean;\n\n /**\n * Define if label is visible\n */\n @Prop() labelHide = false;\n\n /**\n * Input placeholder.\n * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n */\n @Prop({ mutable: true }) placeholder: string;\n\n /**\n * Option to remove placeholder\n */\n @Prop() placeholderHide = false;\n\n /**\n * Option to disable placeholder\n */\n @Prop() placeholderDisabled = false;\n\n /**\n * Define if input is required\n */\n @Prop() required = false;\n\n /**\n * Define if input is readonly\n */\n @Prop() readonly = false;\n @Watch('readonly')\n watchReadonly(newValue: MgInputSelect['readonly']): void {\n if (newValue) this.classCollection.add(classReadonly);\n else this.classCollection.delete(classReadonly);\n }\n\n /**\n * Define if input is disabled\n */\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (this.input !== undefined) {\n this.input[prop] = newValue;\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n }\n\n @Watch('disabled')\n watchDisabled(newValue: MgInputSelect['disabled']): void {\n if (newValue) this.classCollection.add(classDisabled);\n else this.classCollection.delete(classDisabled);\n }\n\n /**\n * Define input width\n */\n @Prop({ reflect: true }) mgWidth: Width;\n @Watch('mgWidth')\n watchMgWidth(newValue: MgInputSelect['mgWidth']): void {\n // reset width class\n widths.forEach(width => {\n this.classCollection.delete(`mg-c-input--width-${width}`);\n });\n\n // apply new width\n if (newValue) this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);\n }\n\n /**\n * Add a tooltip message next to the input\n */\n @Prop() tooltip?: string;\n\n /**\n * Define tooltip position\n */\n @Prop() tooltipPosition: TooltipPosition = 'input';\n\n /**\n * Add a help text under the input, usually expected data format and example\n */\n @Prop() helpText?: string;\n\n /**\n * Define input valid state\n */\n @Prop({ mutable: true }) valid: boolean;\n\n /**\n * Define input invalid state\n */\n @Prop({ mutable: true }) invalid: boolean;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-input--select']);\n\n /**\n * Error message to display\n */\n @State() errorMessage: string;\n\n /**\n * Formated items for display\n */\n @State() options: (SelectOption | OptGroup)[];\n\n /**\n * Does value match any item option\n */\n @State() valueExist: boolean;\n\n /**\n * Value to display in readonly mode\n */\n @State() readonlyValue: string;\n\n /**\n * Emited event when value change\n */\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputCheckboxElement['value']>;\n\n /**\n * Emited event when checking validity\n */\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputCheckboxElement['valid']>;\n\n /**\n * Display input error if it exists.\n */\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /**\n * Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n */\n @Method()\n async setError(valid: MgInputSelect['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-select> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-select> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /**\n * Method to set validity values\n * @param newValue - valid new value\n */\n private setValidity(newValue: MgInputSelect['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined || (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n /**\n * Handle input event\n */\n private handleInput = (): void => {\n this.updateValue();\n if (this.hasDisplayedError) this.setErrorMessage();\n };\n\n /**\n * Method to compare item.title with input.value\n * @param item - item to compare with\n * @returns truthy if input.value is an item\n */\n private isInputValue = (item: SelectOption): boolean => item.title === this.input.value;\n\n /**\n * value props setter\n * @param newValue - value to update with\n */\n private setValue = (newValue: MgInputSelect['value']): void => {\n this.checkValidity();\n this.value = newValue;\n };\n\n /**\n * Update value from input.value\n */\n private updateValue = (): void => {\n if (this.input.value === '') {\n this.setValue(null);\n } else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {\n this.setValue(this.input.value);\n } else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {\n this.setValue(this.items.find(this.isInputValue).value);\n } else {\n // before set newValue with push to options[] the unknown input.value with a disable satus\n this.options.push({ title: this.input.value, value: this.input.value, disabled: true });\n this.setValue(this.input.value);\n }\n };\n\n /**\n * Handle blur event\n */\n private handleBlur = (): void => {\n this.handlerInProgress = Handler.BLUR;\n this.displayError().finally(() => {\n // reset guard\n this.handlerInProgress = undefined;\n });\n };\n\n /**\n * Input value is disabled\n * @returns truthy if input value is disabled\n */\n private isDisabledValue = (): boolean => allItemsAreOptions(this.options) && this.options.find(this.isInputValue)?.disabled === true;\n\n /**\n * Check if input is valid\n */\n private checkValidity = (): void => {\n this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || this.input.checkValidity()));\n };\n\n /**\n * Set input error message\n * @param errorMessage - errorMessage override\n */\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n if (!this.valid) {\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n } else if (this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n }\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n * @returns timeout\n */\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateItems(this.items);\n this.validateValue(this.value);\n this.watchMgWidth(this.mgWidth);\n this.watchReadonly(this.readonly);\n this.watchDisabled(this.disabled);\n // Set default placeholder\n if (this.placeholder === undefined || this.placeholder === '') {\n this.placeholder = this.messages.input.select.placeholder;\n }\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /**\n * Render option\n * @param option - to render\n * @returns render option\n */\n private renderOption = (option: SelectOption): HTMLElement => (\n <option key={option.title} value={option.title} selected={JSON.stringify(this.value) === JSON.stringify(option.value)} disabled={option.disabled}>\n {option.title}\n </option>\n );\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <mg-input\n label={this.label}\n identifier={this.identifier}\n class={this.classCollection.join()}\n ariaDescribedbyIDs={[]}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonlyValue={this.readonlyValue}\n tooltip={this.tooltip}\n tooltipPosition={this.tooltipPosition}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n >\n <select\n class=\"mg-c-input__box\"\n id={this.identifier}\n name={this.name}\n title={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onBlur={this.handleBlur}\n ref={(el: HTMLSelectElement) => {\n if (el !== null) this.input = el;\n }}\n >\n {(!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder\n <option value=\"\" disabled={this.placeholderDisabled && this.valueExist}>\n {this.placeholder}\n </option>\n )}\n {this.options.map(option =>\n isOptGroup(option) ? (\n <optgroup label={option.group} key={option.group}>\n {option.options.map(this.renderOption)}\n </optgroup>\n ) : (\n isOption(option) && this.renderOption(option)\n ),\n )}\n </select>\n </mg-input>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"mg-input-select.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-select/mg-input-select.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, Event, h, Prop, State, EventEmitter, Watch, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { SelectOption, OptGroup } from './mg-input-select.conf';\nimport { type TooltipPosition, type Width, type EventType, classReadonly, classDisabled, widths } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n/**\n * Check if item is a well configured option\n * @param option - select option\n * @returns select option type is valid\n */\nconst isOption = (option: unknown): option is SelectOption => typeof option === 'object' && typeof (option as SelectOption).title === 'string';\n\n/**\n * Check if items[] is SelectOption\n * @param items - select option\n * @returns select option array type is valid\n */\nconst allItemsAreOptions = (items: unknown[]): items is SelectOption[] => Array.isArray(items) && items.every(item => isOption(item));\n\n/**\n * Check if item is a well configured optgroup\n * @param optgroup - select option\n * @returns select optgroup type is valid\n */\nconst isOptGroup = (optgroup: unknown): optgroup is OptGroup =>\n typeof optgroup === 'object' && typeof (optgroup as OptGroup).group === 'string' && allItemsAreOptions((optgroup as OptGroup).options);\n\n/**\n * Group options\n * @param acc - reduce accumulator\n * @param item - item to add\n * @returns grouped options\n */\nconst groupOptions = (acc: (SelectOption | OptGroup)[], { group, title, value, disabled }: SelectOption): (SelectOption | OptGroup)[] => {\n if (group !== undefined) {\n // Check if group is already created\n const optGroup: OptGroup = (acc as OptGroup[]).find(grp => grp.group === group);\n // Add to group\n if (optGroup !== undefined) {\n optGroup.options.push({ title, value, disabled });\n }\n // Create group\n else {\n acc.push({ group, options: [{ title, value, disabled }] });\n }\n } else {\n acc.push({ title, value, disabled });\n }\n return acc;\n};\n\n@Component({\n tag: 'mg-input-select',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-select.css',\n shadow: true,\n})\nexport class MgInputSelect {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private input: HTMLSelectElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: EventType;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgInputSelectElement;\n\n /**\n * Component value\n */\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n validateValue(newValue: MgInputSelect['value']): void {\n if (allItemsAreString(this.items) && typeof newValue === 'string') {\n this.readonlyValue = this.input?.value !== undefined ? this.input.value : newValue;\n } else if (allItemsAreOptions(this.items)) {\n this.readonlyValue = this.items.find(item => item.value === newValue)?.title;\n } else {\n this.readonlyValue = null;\n }\n this.valueChange.emit(newValue);\n }\n\n /**\n * Items are the possible options to select\n */\n @Prop() items!: (string | SelectOption)[];\n @Watch('items')\n validateItems(newValue: MgInputSelect['items']): void {\n // Empty options\n if (newValue.length === 0) {\n this.options = [];\n }\n // String array\n else if (allItemsAreString(newValue)) {\n if (typeof this.value === 'string') this.valueExist = newValue.includes(this.value);\n this.options = newValue.map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (allItemsAreOptions(newValue)) {\n this.valueExist = newValue.map(item => item.value).includes(this.value);\n // Grouped object options\n if (newValue.some(item => Boolean(item.group))) {\n this.options = newValue.reduce(groupOptions, []);\n }\n // Standart object options\n else {\n this.options = newValue;\n }\n } else {\n throw new Error(\n `<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: ${toString(newValue)}.`,\n );\n }\n }\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n */\n @Prop() identifier!: string;\n\n /**\n * Input name\n * If not set the value equals the identifier\n */\n @Prop() name = this.identifier;\n\n /**\n * Input label\n */\n @Prop() label!: string;\n\n /**\n * Define if label is displayed on top\n */\n @Prop() labelOnTop?: boolean;\n\n /**\n * Define if label is visible\n */\n @Prop() labelHide = false;\n\n /**\n * Input placeholder.\n * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n */\n @Prop({ mutable: true }) placeholder: string;\n\n /**\n * Option to remove placeholder\n */\n @Prop() placeholderHide = false;\n\n /**\n * Option to disable placeholder\n */\n @Prop() placeholderDisabled = false;\n\n /**\n * Define if input is required\n */\n @Prop() required = false;\n\n /**\n * Define if input is readonly\n */\n @Prop() readonly = false;\n @Watch('readonly')\n watchReadonly(newValue: MgInputSelect['readonly']): void {\n if (newValue) this.classCollection.add(classReadonly);\n else this.classCollection.delete(classReadonly);\n }\n\n /**\n * Define if input is disabled\n */\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (this.input !== undefined) {\n this.input[prop] = newValue;\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n }\n\n @Watch('disabled')\n watchDisabled(newValue: MgInputSelect['disabled']): void {\n if (newValue) this.classCollection.add(classDisabled);\n else this.classCollection.delete(classDisabled);\n }\n\n /**\n * Define input width\n */\n @Prop({ reflect: true }) mgWidth: Width;\n @Watch('mgWidth')\n watchMgWidth(newValue: MgInputSelect['mgWidth']): void {\n // reset width class\n widths.forEach(width => {\n this.classCollection.delete(`mg-c-input--width-${width}`);\n });\n\n // apply new width\n if (newValue !== undefined) this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);\n }\n\n /**\n * Add a tooltip message next to the input\n */\n @Prop() tooltip?: string;\n\n /**\n * Define tooltip position\n */\n @Prop() tooltipPosition: TooltipPosition = 'input';\n\n /**\n * Add a help text under the input, usually expected data format and example\n */\n @Prop() helpText?: string;\n\n /**\n * Define input valid state\n */\n @Prop({ mutable: true }) valid: boolean;\n\n /**\n * Define input invalid state\n */\n @Prop({ mutable: true }) invalid: boolean;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-input--select']);\n\n /**\n * Error message to display\n */\n @State() errorMessage: string;\n\n /**\n * Formated items for display\n */\n @State() options: (SelectOption | OptGroup)[];\n\n /**\n * Does value match any item option\n */\n @State() valueExist: boolean;\n\n /**\n * Value to display in readonly mode\n */\n @State() readonlyValue: string;\n\n /**\n * Emited event when value change\n */\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputCheckboxElement['value']>;\n\n /**\n * Emited event when checking validity\n */\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputCheckboxElement['valid']>;\n\n /**\n * Display input error if it exists.\n */\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /**\n * Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n */\n @Method()\n async setError(valid: MgInputSelect['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-select> method \"setError()\" param \"valid\" must be a boolean.');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-select> method \"setError()\" param \"errorMessage\" must be a string.');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /**\n * Method to set validity values\n * @param newValue - valid new value\n */\n private setValidity(newValue: MgInputSelect['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n /**\n * Handle input event\n */\n private handleInput = (): void => {\n this.updateValue();\n if (this.hasDisplayedError) this.setErrorMessage();\n };\n\n /**\n * Method to compare item.title with input.value\n * @param item - item to compare with\n * @returns truthy if input.value is an item\n */\n private isInputValue = (item: SelectOption): boolean => item.title === this.input?.value;\n\n /**\n * value props setter\n * @param newValue - value to update with\n */\n private setValue = (newValue: MgInputSelect['value']): void => {\n this.checkValidity();\n this.value = newValue;\n };\n\n /**\n * Update value from input.value\n */\n private updateValue = (): void => {\n if (this.input.value === '') {\n this.setValue(null);\n } else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {\n this.setValue(this.input.value);\n } else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {\n this.setValue(this.items.find(this.isInputValue).value);\n } else {\n // before set newValue with push to options[] the unknown input.value with a disable satus\n this.options.push({ title: this.input.value, value: this.input.value, disabled: true });\n this.setValue(this.input.value);\n }\n };\n\n /**\n * Handle blur event\n */\n private handleBlur = (): void => {\n this.handlerInProgress = 'blur';\n this.displayError().finally(() => {\n // reset guard\n this.handlerInProgress = undefined;\n });\n };\n\n /**\n * Input value is disabled\n * @returns truthy if input value is disabled\n */\n private isDisabledValue = (): boolean => allItemsAreOptions(this.options) && this.options.find(this.isInputValue)?.disabled === true;\n\n /**\n * Check if input is valid\n */\n private checkValidity = (): void => {\n this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || this.input.checkValidity()));\n };\n\n /**\n * Set input error message\n * @param errorMessage - errorMessage override\n */\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n if (!this.valid) {\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n } else if (this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n }\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n * @returns timeout\n */\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateItems(this.items);\n this.validateValue(this.value);\n this.watchMgWidth(this.mgWidth);\n this.watchReadonly(this.readonly);\n this.watchDisabled(this.disabled);\n // Set default placeholder\n if (this.placeholder === undefined || this.placeholder === '') {\n this.placeholder = this.messages.input.select.placeholder;\n }\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /**\n * Render option\n * @param option - to render\n * @returns render option\n */\n private renderOption = (option: SelectOption): HTMLElement => (\n <option key={option.title} value={option.title} selected={JSON.stringify(this.value) === JSON.stringify(option.value)} disabled={option.disabled}>\n {option.title}\n </option>\n );\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <mg-input\n label={this.label}\n identifier={this.identifier}\n class={this.classCollection.join()}\n ariaDescribedbyIDs={[]}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n tooltip={this.tooltip}\n tooltipPosition={this.readonly && this.readonlyValue === null ? 'label' : this.tooltipPosition}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n >\n {this.readonly ? (\n this.readonlyValue && <b class=\"mg-c-input__readonly-value\">{this.readonlyValue}</b>\n ) : (\n <select\n class=\"mg-c-input__box\"\n id={this.identifier}\n name={this.name}\n title={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onBlur={this.handleBlur}\n ref={(el: HTMLSelectElement) => {\n if (el !== null) this.input = el;\n }}\n >\n {(!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder\n <option value=\"\" disabled={this.placeholderDisabled && this.valueExist}>\n {this.placeholder}\n </option>\n )}\n {this.options.map(option =>\n isOptGroup(option) ? (\n <optgroup label={option.group} key={option.group}>\n {option.options.map(this.renderOption)}\n </optgroup>\n ) : (\n isOption(option) && this.renderOption(option)\n ),\n )}\n </select>\n )}\n </mg-input>\n );\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-input-text.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-text/mg-input-text.conf.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * TextType from text types\n */\nexport type TextType = 'text' | 'search';\n"]}
|
|
1
|
+
{"version":3,"file":"mg-input-text.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-text/mg-input-text.conf.ts"],"names":[],"mappings":"","sourcesContent":["import { Option } from '../../../../types';\n\n/**\n * TextType from text types\n */\nexport type TextType = 'text' | 'search';\n\n/**\n * Option type\n */\nexport type OptionType = Option;\n"]}
|