@mgdis/mg-components 5.26.0 → 5.27.1
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/dist/cjs/{index-c585c382.js → index-4b43c17b.js} +97 -81
- package/dist/cjs/index-4b43c17b.js.map +1 -0
- package/dist/cjs/{index-0a2783ee.js → index-83102ab3.js} +23 -10
- package/dist/cjs/index-83102ab3.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/{mg-action-more_34.cjs.entry.js → mg-action-more_36.cjs.entry.js} +995 -742
- package/dist/cjs/mg-action-more_36.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 +3 -3
- package/dist/cjs/mg-loader.cjs.entry.js.map +1 -1
- package/dist/collection/assets/icons/index.js +1 -206
- package/dist/collection/assets/icons/index.js.map +1 -1
- package/dist/collection/collection-manifest.json +4 -3
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +2 -2
- package/dist/collection/components/atoms/mg-badge/mg-badge.js.map +1 -1
- package/dist/collection/components/atoms/mg-button/mg-button.js +9 -6
- package/dist/collection/components/atoms/mg-button/mg-button.js.map +1 -1
- package/dist/collection/components/atoms/mg-card/mg-card.js +5 -2
- package/dist/collection/components/atoms/mg-card/mg-card.js.map +1 -1
- package/dist/collection/components/atoms/mg-character-left/mg-character-left.js +2 -2
- package/dist/collection/components/atoms/mg-character-left/mg-character-left.js.map +1 -1
- package/dist/collection/components/atoms/mg-divider/mg-divider.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 +13 -8
- package/dist/collection/components/atoms/mg-icon/mg-icon.js.map +1 -1
- package/dist/collection/components/atoms/mg-input-title/mg-input-title.js +6 -3
- package/dist/collection/components/atoms/mg-input-title/mg-input-title.js.map +1 -1
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +6 -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 +4 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js.map +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.conf.js +1 -0
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.conf.js.map +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +13 -3
- 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 +21 -0
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.conf.js.map +1 -0
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +515 -0
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js.map +1 -0
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js +1 -5
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js +7 -7
- 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.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +67 -45
- 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 -0
- 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 +71 -22
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +52 -19
- 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 +54 -15
- 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 +40 -8
- 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.js +44 -13
- 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.js +72 -24
- 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 +47 -15
- 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 +34 -21
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +26 -24
- 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 +4 -0
- 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 +76 -9
- 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 +41 -41
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js.map +1 -1
- package/dist/collection/components/molecules/mg-details/mg-details.js +5 -1
- package/dist/collection/components/molecules/mg-details/mg-details.js.map +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js +8 -4
- package/dist/collection/components/molecules/mg-form/mg-form.js.map +1 -1
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +8 -3
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js.map +1 -1
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.conf.js.map +1 -1
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.js +20 -13
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.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.js +7 -3
- package/dist/collection/components/molecules/mg-message/mg-message.js.map +1 -1
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +6 -2
- package/dist/collection/components/molecules/mg-modal/mg-modal.js.map +1 -1
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +4 -4
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js.map +1 -1
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +8 -4
- 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 +4 -1
- 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 +6 -2
- 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.js +4 -1
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js.map +1 -1
- package/dist/collection/locales/en/messages.json +10 -3
- package/dist/collection/locales/fr/messages.json +10 -3
- package/dist/collection/locales/index.conf.js +2 -0
- package/dist/collection/locales/index.conf.js.map +1 -0
- package/dist/collection/utils/playwright.fixture.js +1 -1
- package/dist/collection/utils/playwright.fixture.js.map +1 -1
- package/dist/components/index.es.js +24 -24
- package/dist/components/index.es.js.map +1 -1
- package/dist/components/index2.js +24 -8
- package/dist/components/index2.js.map +1 -1
- package/dist/components/mg-action-more.js +29 -25
- package/dist/components/mg-action-more.js.map +1 -1
- package/dist/components/mg-badge2.js +1 -1
- package/dist/components/mg-badge2.js.map +1 -1
- package/dist/components/mg-button2.js +1 -1
- package/dist/components/mg-button2.js.map +1 -1
- package/dist/components/mg-card2.js +2 -2
- package/dist/components/mg-card2.js.map +1 -1
- package/dist/components/mg-character-left2.js +1 -1
- package/dist/components/mg-character-left2.js.map +1 -1
- package/dist/components/mg-details.js +1 -1
- package/dist/components/mg-details.js.map +1 -1
- package/dist/components/mg-divider.js +1 -1
- package/dist/components/mg-form.js +1 -1
- package/dist/components/mg-form.js.map +1 -1
- package/dist/components/mg-icon2.js +4 -416
- package/dist/components/mg-icon2.js.map +1 -1
- package/dist/components/mg-illustrated-message.js +3 -3
- package/dist/components/mg-illustrated-message.js.map +1 -1
- package/dist/components/mg-input-checkbox-paginated2.js +13 -11
- package/dist/components/mg-input-checkbox-paginated2.js.map +1 -1
- package/dist/components/mg-input-checkbox.js +71 -49
- package/dist/components/mg-input-checkbox.js.map +1 -1
- package/dist/components/mg-input-date.js +69 -20
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +42 -13
- package/dist/components/mg-input-numeric.js.map +1 -1
- package/dist/components/mg-input-password.js +56 -12
- package/dist/components/mg-input-password.js.map +1 -1
- package/dist/components/mg-input-radio.js +41 -10
- package/dist/components/mg-input-radio.js.map +1 -1
- package/dist/components/mg-input-select2.js +42 -12
- package/dist/components/mg-input-select2.js.map +1 -1
- package/dist/components/mg-input-text2.js +56 -18
- package/dist/components/mg-input-text2.js.map +1 -1
- package/dist/components/mg-input-textarea.js +44 -13
- package/dist/components/mg-input-textarea.js.map +1 -1
- package/dist/components/mg-input-title2.js +1 -1
- package/dist/components/mg-input-title2.js.map +1 -1
- package/dist/components/mg-input-toggle.js +35 -22
- package/dist/components/mg-input-toggle.js.map +1 -1
- package/dist/components/mg-input.d.ts +11 -0
- package/dist/components/mg-input.js +8 -0
- package/dist/components/mg-input.js.map +1 -0
- package/dist/components/mg-input2.js +352 -0
- package/dist/components/mg-input2.js.map +1 -0
- package/dist/components/mg-item-more.js +1 -338
- package/dist/components/mg-item-more.js.map +1 -1
- package/dist/components/mg-item-more2.js +592 -0
- package/dist/components/mg-item-more2.js.map +1 -0
- package/dist/components/mg-loader.js +1 -1
- package/dist/components/mg-loader.js.map +1 -1
- package/dist/components/mg-menu-item2.js +47 -8
- package/dist/components/mg-menu-item2.js.map +1 -1
- package/dist/components/mg-menu.js +1 -1
- package/dist/components/mg-message.js +1 -1
- package/dist/components/mg-message.js.map +1 -1
- package/dist/components/mg-modal.js +3 -3
- package/dist/components/mg-modal.js.map +1 -1
- package/dist/components/mg-pagination2.js +12 -6
- package/dist/components/mg-pagination2.js.map +1 -1
- package/dist/components/mg-panel.js +15 -9
- package/dist/components/mg-panel.js.map +1 -1
- package/dist/components/mg-popover-content2.js +1 -1
- package/dist/components/mg-popover-content2.js.map +1 -1
- package/dist/components/mg-popover2.js +2 -2
- package/dist/components/mg-popover2.js.map +1 -1
- package/dist/components/mg-skip-links.js +1 -1
- package/dist/components/mg-tabs.js +1 -1
- package/dist/components/mg-tabs.js.map +1 -1
- package/dist/components/mg-tag.js +1 -1
- package/dist/components/mg-tag.js.map +1 -1
- package/dist/components/mg-tooltip-content2.js +1 -1
- package/dist/components/mg-tooltip-content2.js.map +1 -1
- package/dist/components/mg-tooltip2.js +10 -3
- package/dist/components/mg-tooltip2.js.map +1 -1
- package/dist/esm/{index-bb17de92.js → index-c4ed16b2.js} +97 -81
- package/dist/esm/index-c4ed16b2.js.map +1 -0
- package/dist/esm/{index-ad78ece7.js → index-d43d1c5d.js} +23 -10
- package/dist/esm/index-d43d1c5d.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{mg-action-more_34.entry.js → mg-action-more_36.entry.js} +982 -731
- package/dist/esm/mg-action-more_36.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 +3 -3
- package/dist/esm/mg-loader.entry.js.map +1 -1
- package/dist/mg-components/locales/en/messages.json +10 -3
- package/dist/mg-components/locales/fr/messages.json +10 -3
- 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-350454b9.js +2 -0
- package/dist/mg-components/p-350454b9.js.map +1 -0
- package/dist/mg-components/p-9cdd1bc9.entry.js +2 -0
- package/dist/mg-components/p-9cdd1bc9.entry.js.map +1 -0
- package/dist/mg-components/p-cf0b0988.js +3 -0
- package/dist/mg-components/p-cf0b0988.js.map +1 -0
- package/dist/mg-components/{p-d80b844d.entry.js → p-d4084a15.entry.js} +2 -2
- package/dist/mg-components/{p-d80b844d.entry.js.map → p-d4084a15.entry.js.map} +1 -1
- package/dist/types/components/atoms/mg-badge/mg-badge.d.ts +1 -1
- package/dist/types/components/atoms/mg-button/mg-button.d.ts +8 -5
- package/dist/types/components/atoms/mg-card/mg-card.d.ts +4 -1
- package/dist/types/components/atoms/mg-character-left/mg-character-left.d.ts +1 -1
- package/dist/types/components/atoms/mg-icon/mg-icon.conf.d.ts +5 -0
- package/dist/types/components/atoms/mg-icon/mg-icon.d.ts +3 -3
- package/dist/types/components/atoms/mg-input-title/mg-input-title.d.ts +5 -2
- package/dist/types/components/atoms/mg-tag/mg-tag.d.ts +5 -2
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.d.ts +3 -0
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.conf.d.ts +2 -1
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts +4 -0
- package/dist/types/components/molecules/inputs/mg-input/mg-input.conf.d.ts +35 -0
- package/dist/types/components/molecules/inputs/mg-input/mg-input.d.ts +145 -0
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.d.ts +5 -5
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.d.ts +3 -5
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +13 -12
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.conf.d.ts +2 -1
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts +19 -6
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +15 -9
- package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts +16 -5
- package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts +7 -3
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +7 -4
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +21 -12
- package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +12 -9
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +16 -12
- package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts +4 -1
- package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.conf.d.ts +8 -0
- package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts +25 -5
- package/dist/types/components/molecules/mg-action-more/mg-action-more.conf.d.ts +7 -16
- package/dist/types/components/molecules/mg-action-more/mg-action-more.d.ts +9 -9
- package/dist/types/components/molecules/mg-form/mg-form.d.ts +3 -3
- package/dist/types/components/molecules/mg-item-more/mg-item-more.conf.d.ts +3 -12
- package/dist/types/components/molecules/mg-item-more/mg-item-more.d.ts +4 -3
- package/dist/types/components/molecules/mg-loader/mg-loader.d.ts +2 -2
- package/dist/types/components/molecules/mg-message/mg-message.d.ts +2 -2
- package/dist/types/components/molecules/mg-pagination/mg-pagination.d.ts +2 -2
- package/dist/types/components/molecules/mg-panel/mg-panel.d.ts +3 -3
- package/dist/types/components/molecules/mg-popover/mg-popover-content/mg-popover-content.d.ts +3 -0
- package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +5 -1
- package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts +3 -0
- package/dist/types/components.d.ts +208 -92
- package/dist/types/locales/index.conf.d.ts +4 -0
- package/ide/intellij/web-types.json +260 -96
- package/ide/vscode/html-custom-data.json +2596 -1222
- package/package.json +24 -28
- package/dist/cjs/index-0a2783ee.js.map +0 -1
- package/dist/cjs/index-c585c382.js.map +0 -1
- package/dist/cjs/mg-action-more_34.cjs.entry.js.map +0 -1
- package/dist/cjs/mg-item-more.cjs.entry.js +0 -272
- package/dist/cjs/mg-item-more.cjs.entry.js.map +0 -1
- package/dist/cjs/mg-menu.conf-c291eee6.js +0 -18
- package/dist/cjs/mg-menu.conf-c291eee6.js.map +0 -1
- package/dist/collection/components/molecules/inputs/MgInput.conf.js +0 -14
- package/dist/collection/components/molecules/inputs/MgInput.conf.js.map +0 -1
- package/dist/collection/components/molecules/inputs/MgInput.js +0 -125
- package/dist/collection/components/molecules/inputs/MgInput.js.map +0 -1
- package/dist/collection/utils/playwright.e2e.test.utils.js +0 -100
- package/dist/collection/utils/playwright.e2e.test.utils.js.map +0 -1
- package/dist/components/MgInput.js +0 -155
- package/dist/components/MgInput.js.map +0 -1
- package/dist/components/mg-menu.conf.js +0 -16
- package/dist/components/mg-menu.conf.js.map +0 -1
- package/dist/components/mg-menu2.js +0 -202
- package/dist/components/mg-menu2.js.map +0 -1
- package/dist/esm/index-ad78ece7.js.map +0 -1
- package/dist/esm/index-bb17de92.js.map +0 -1
- package/dist/esm/mg-action-more_34.entry.js.map +0 -1
- package/dist/esm/mg-item-more.entry.js +0 -268
- package/dist/esm/mg-item-more.entry.js.map +0 -1
- package/dist/esm/mg-menu.conf-9609bcb2.js +0 -16
- package/dist/esm/mg-menu.conf-9609bcb2.js.map +0 -1
- package/dist/mg-components/p-2db8355d.entry.js +0 -2
- package/dist/mg-components/p-2db8355d.entry.js.map +0 -1
- package/dist/mg-components/p-95653110.entry.js +0 -2
- package/dist/mg-components/p-95653110.entry.js.map +0 -1
- package/dist/mg-components/p-bc62d75e.js +0 -3
- package/dist/mg-components/p-bc62d75e.js.map +0 -1
- package/dist/mg-components/p-d41aa78b.js +0 -2
- package/dist/mg-components/p-d41aa78b.js.map +0 -1
- package/dist/mg-components/p-fe935e54.js +0 -2
- package/dist/mg-components/p-fe935e54.js.map +0 -1
- package/dist/types/components/molecules/inputs/MgInput.conf.d.ts +0 -46
- package/dist/types/components/molecules/inputs/MgInput.d.ts +0 -13
|
@@ -7,13 +7,14 @@
|
|
|
7
7
|
"components/molecules/mg-item-more/mg-item-more.js",
|
|
8
8
|
"components/molecules/mg-popover/mg-popover.js",
|
|
9
9
|
"components/molecules/menu/mg-menu-item/mg-menu-item.js",
|
|
10
|
-
"components/atoms/mg-input-title/mg-input-title.js",
|
|
11
10
|
"components/atoms/mg-card/mg-card.js",
|
|
12
11
|
"components/atoms/mg-character-left/mg-character-left.js",
|
|
13
12
|
"components/atoms/mg-divider/mg-divider.js",
|
|
13
|
+
"components/atoms/mg-input-title/mg-input-title.js",
|
|
14
14
|
"components/atoms/mg-tag/mg-tag.js",
|
|
15
15
|
"components/atoms/mg-tooltip/mg-tooltip.js",
|
|
16
16
|
"components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js",
|
|
17
|
+
"components/molecules/inputs/mg-input/mg-input.js",
|
|
17
18
|
"components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js",
|
|
18
19
|
"components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js",
|
|
19
20
|
"components/molecules/inputs/mg-input-date/mg-input-date.js",
|
|
@@ -39,8 +40,8 @@
|
|
|
39
40
|
],
|
|
40
41
|
"compiler": {
|
|
41
42
|
"name": "@stencil/core",
|
|
42
|
-
"version": "4.
|
|
43
|
-
"typescriptVersion": "5.
|
|
43
|
+
"version": "4.14.0",
|
|
44
|
+
"typescriptVersion": "5.4.3"
|
|
44
45
|
},
|
|
45
46
|
"collections": [],
|
|
46
47
|
"bundles": []
|
|
@@ -55,7 +55,7 @@ export class MgBadge {
|
|
|
55
55
|
* @returns HTML Element
|
|
56
56
|
*/
|
|
57
57
|
render() {
|
|
58
|
-
return (h("span", { key: '
|
|
58
|
+
return (h("span", { key: '570b40e6abb6c0da8b9b2b8825f862612531fe51', class: this.classCollection.join() }, h("span", { key: 'b2c9bb13d21cf985a02a8cb35d76014e4631a5e4', class: "mg-c-badge__value" }, this.value), h("span", { key: 'e8180432ca14df201d5ab94b13341795191452ce', class: "mg-u-visually-hidden" }, this.label)));
|
|
59
59
|
}
|
|
60
60
|
static get is() { return "mg-badge"; }
|
|
61
61
|
static get encapsulation() { return "shadow"; }
|
|
@@ -138,7 +138,7 @@ export class MgBadge {
|
|
|
138
138
|
"references": {}
|
|
139
139
|
},
|
|
140
140
|
"required": false,
|
|
141
|
-
"optional":
|
|
141
|
+
"optional": true,
|
|
142
142
|
"docs": {
|
|
143
143
|
"tags": [],
|
|
144
144
|
"text": "Define if button is using outline style"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-badge.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-badge/mg-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAoB,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAMlE,MAAM,OAAO,OAAO;;QAClB;;sBAEc;QAEd,UAAU;QACO,iBAAY,GAAG,qBAAqB,CAAC;;;uBAgCjB,QAAQ,CAAC,CAAC,CAAC;;+BA0BV,IAAI,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;;IA/CnE,aAAa,CAAC,QAA0B;QACtC,IAAI,sBAAsB,CAAC,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC;YACxD,MAAM,IAAI,KAAK,CAAC,mEAAmE,CAAC,CAAC;QACvF,CAAC;IACH,CAAC;IAQD,aAAa,CAAC,QAA0B;QACtC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA4B,EAAE,QAA6B;QACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,6CAA6C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACvF,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;YACzD,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA4B;QAC1C,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;YACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACtD,CAAC;IAOD;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;YACtC,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;YACnD,6DAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAQ,CACjD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { variants, BadgeVariantType } from './mg-badge.conf';\nimport { ClassList, isValidString } from '@mgdis/stencil-helpers';\n@Component({\n tag: 'mg-badge',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-badge.css',\n shadow: true,\n})\nexport class MgBadge {\n /************\n * Internal *\n ************/\n\n // Classes\n private readonly classOutline = `mg-c-badge--outline`;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Badge value\n */\n @Prop() value!: string | number;\n @Watch('value')\n validateValue(newValue: MgBadge['value']): void {\n if (/^(\\d+\\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {\n throw new Error('<mg-badge> prop \"value\" must be integer or ponctuation character.');\n }\n }\n\n /**\n * Badge label. Include short description.\n * Required for accessibility\n */\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgBadge['label']): void {\n if (!isValidString(newValue)) {\n throw new Error('<mg-badge> prop \"label\" is required.');\n }\n }\n\n /**\n * Define badge variant\n */\n @Prop() variant?: BadgeVariantType = variants[0]; // info\n @Watch('variant')\n validateVariant(newValue: MgBadge['variant'], oldValue?: MgBadge['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-badge> prop \"variant\" must be one of: ${variants.join(', ')}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-badge--${oldValue}`);\n }\n this.classCollection.add(`mg-c-badge--${newValue}`);\n }\n }\n\n /**\n * Define if button is using outline style\n */\n @Prop() outline
|
|
1
|
+
{"version":3,"file":"mg-badge.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-badge/mg-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAoB,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAMlE,MAAM,OAAO,OAAO;;QAClB;;sBAEc;QAEd,UAAU;QACO,iBAAY,GAAG,qBAAqB,CAAC;;;uBAgCjB,QAAQ,CAAC,CAAC,CAAC;;+BA0BV,IAAI,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;;IA/CnE,aAAa,CAAC,QAA0B;QACtC,IAAI,sBAAsB,CAAC,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC;YACxD,MAAM,IAAI,KAAK,CAAC,mEAAmE,CAAC,CAAC;QACvF,CAAC;IACH,CAAC;IAQD,aAAa,CAAC,QAA0B;QACtC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA4B,EAAE,QAA6B;QACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,6CAA6C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACvF,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;YACzD,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA4B;QAC1C,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;YACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACtD,CAAC;IAOD;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;YACtC,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;YACnD,6DAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAQ,CACjD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { variants, BadgeVariantType } from './mg-badge.conf';\nimport { ClassList, isValidString } from '@mgdis/stencil-helpers';\n@Component({\n tag: 'mg-badge',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-badge.css',\n shadow: true,\n})\nexport class MgBadge {\n /************\n * Internal *\n ************/\n\n // Classes\n private readonly classOutline = `mg-c-badge--outline`;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Badge value\n */\n @Prop() value!: string | number;\n @Watch('value')\n validateValue(newValue: MgBadge['value']): void {\n if (/^(\\d+\\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {\n throw new Error('<mg-badge> prop \"value\" must be integer or ponctuation character.');\n }\n }\n\n /**\n * Badge label. Include short description.\n * Required for accessibility\n */\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgBadge['label']): void {\n if (!isValidString(newValue)) {\n throw new Error('<mg-badge> prop \"label\" is required.');\n }\n }\n\n /**\n * Define badge variant\n */\n @Prop() variant?: BadgeVariantType = variants[0]; // info\n @Watch('variant')\n validateVariant(newValue: MgBadge['variant'], oldValue?: MgBadge['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-badge> prop \"variant\" must be one of: ${variants.join(', ')}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-badge--${oldValue}`);\n }\n this.classCollection.add(`mg-c-badge--${newValue}`);\n }\n }\n\n /**\n * Define if button is using outline style\n */\n @Prop() outline?: boolean;\n @Watch('outline')\n validateOutline(newValue: MgBadge['outline']): void {\n if (newValue) this.classCollection.add(this.classOutline);\n else this.classCollection.delete(this.classOutline);\n }\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-badge']);\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n this.validateValue(this.value);\n this.validateLabel(this.label);\n this.validateVariant(this.variant);\n this.validateOutline(this.outline);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <span class={this.classCollection.join()}>\n <span class=\"mg-c-badge__value\">{this.value}</span>\n <span class=\"mg-u-visually-hidden\">{this.label}</span>\n </span>\n );\n }\n}\n"]}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import { variants } from "./mg-button.conf";
|
|
3
3
|
import { ClassList, isValidString, nextTick } from "@mgdis/stencil-helpers";
|
|
4
|
+
/**
|
|
5
|
+
* @slot - Button content
|
|
6
|
+
*/
|
|
4
7
|
export class MgButton {
|
|
5
8
|
constructor() {
|
|
6
9
|
/************
|
|
@@ -144,7 +147,7 @@ export class MgButton {
|
|
|
144
147
|
*/
|
|
145
148
|
render() {
|
|
146
149
|
var _a;
|
|
147
|
-
return (h(Host, { key: '
|
|
150
|
+
return (h(Host, { key: '8aa45a51510eccbb021e452d540c77844f3f4792', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: '9743ead1b9fd1f70ef0690087806a1767c5825b0', class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { key: '7070995c17ecedb4223475cce662e115e8d72510', class: "mg-c-button__content" }, h("slot", { key: 'cb0ad8aa02d634f0a3dfa9b584ec8fb26da88271' })))));
|
|
148
151
|
}
|
|
149
152
|
static get is() { return "mg-button"; }
|
|
150
153
|
static get encapsulation() { return "shadow"; }
|
|
@@ -193,7 +196,7 @@ export class MgButton {
|
|
|
193
196
|
"references": {}
|
|
194
197
|
},
|
|
195
198
|
"required": false,
|
|
196
|
-
"optional":
|
|
199
|
+
"optional": true,
|
|
197
200
|
"docs": {
|
|
198
201
|
"tags": [],
|
|
199
202
|
"text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)"
|
|
@@ -210,7 +213,7 @@ export class MgButton {
|
|
|
210
213
|
"references": {}
|
|
211
214
|
},
|
|
212
215
|
"required": false,
|
|
213
|
-
"optional":
|
|
216
|
+
"optional": true,
|
|
214
217
|
"docs": {
|
|
215
218
|
"tags": [],
|
|
216
219
|
"text": "aria-label\nIn case button text is not explicit enough"
|
|
@@ -233,7 +236,7 @@ export class MgButton {
|
|
|
233
236
|
}
|
|
234
237
|
},
|
|
235
238
|
"required": false,
|
|
236
|
-
"optional":
|
|
239
|
+
"optional": true,
|
|
237
240
|
"docs": {
|
|
238
241
|
"tags": [],
|
|
239
242
|
"text": "Define button type"
|
|
@@ -268,7 +271,7 @@ export class MgButton {
|
|
|
268
271
|
"references": {}
|
|
269
272
|
},
|
|
270
273
|
"required": false,
|
|
271
|
-
"optional":
|
|
274
|
+
"optional": true,
|
|
272
275
|
"docs": {
|
|
273
276
|
"tags": [],
|
|
274
277
|
"text": "Define form id to attach button with.\nIf this attribute is not set, the <button> is associated with its ancestor <form> element."
|
|
@@ -285,7 +288,7 @@ export class MgButton {
|
|
|
285
288
|
"references": {}
|
|
286
289
|
},
|
|
287
290
|
"required": false,
|
|
288
|
-
"optional":
|
|
291
|
+
"optional": true,
|
|
289
292
|
"docs": {
|
|
290
293
|
"tags": [],
|
|
291
294
|
"text": "Disable button"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-button.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-button/mg-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType } from './mg-button.conf';\nimport { ClassList, isValidString, nextTick } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-button',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-button.css',\n shadow: true,\n})\nexport class MgButton {\n /************\n * Internal *\n ************/\n\n private onClickElementFn = null;\n private readonly classDisabled = 'mg-c-button--disabled';\n private readonly classLoading = 'mg-c-button--loading';\n private readonly classFullWidth = 'mg-c-button--full-width';\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgButtonElement;\n\n /**\n * Define button variant\n */\n @Prop() variant: VariantType = variants[0]; // Primary\n @Watch('variant')\n validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-button--${oldValue}`);\n }\n this.classCollection.add(`mg-c-button--${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 * aria-label\n * In case button text is not explicit enough\n */\n @Prop() label: string;\n\n /**\n * Define button type\n */\n @Prop() type: ButtonType;\n\n /**\n * Set button to full-width\n */\n @Prop() fullWidth = false;\n @Watch('fullWidth')\n validateFullWidth(newValue: MgButton['fullWidth']): void {\n if (newValue && this.isIcon) {\n throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n } else if (newValue) {\n this.classCollection.add(this.classFullWidth);\n } else {\n this.classCollection.delete(this.classFullWidth);\n }\n }\n\n /**\n * Define form id to attach button with.\n * If this attribute is not set, the <button> is associated with its ancestor <form> element.\n */\n @Prop() form: string;\n\n /**\n * Disable button\n */\n @Prop({ mutable: true }) disabled: boolean;\n @Watch('disabled')\n disabledHandler(isDisabled: MgButton['disabled']): void {\n // Remove loading when enable\n // Will be set back onclick\n if (!isDisabled && this.disableOnClick) {\n this.loading = false;\n }\n // Manage if onclick\n this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n // apply style\n if (isDisabled) {\n this.classCollection.add(this.classDisabled);\n } else {\n this.classCollection.delete(this.classDisabled);\n }\n\n // emit value update\n this.disabledChange.emit(isDisabled);\n }\n /**\n * Define if button is round.\n * Used for icon button.\n */\n @Prop() isIcon = false;\n\n /**\n * Option to set input disable on click, in order to prevent multi-click.\n * Parent component have to remove the attribute 'disabled' when the process ends.\n */\n @Prop() disableOnClick = false;\n\n /**\n * Define if button is loading, default to false.\n * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n * It's required to reset to false when action/promise in parent is done to stop the loading state\n */\n @State() loading = false;\n @Watch('loading')\n loadingHandler(newValue: MgButton['loading']): void {\n // we add loading style if it newvalue is true else we remove it\n if (newValue) {\n this.classCollection.add(this.classLoading);\n } else {\n this.classCollection.delete(this.classLoading);\n }\n }\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-button']);\n\n /**\n * Emmited event when disabled change\n */\n @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<HTMLMgButtonElement['disabled']>;\n\n /**\n * Trigger actions onClick event\n * @param event - click event\n */\n private handleClick = (event: MouseEvent): void => {\n if (this.disabled) event.stopPropagation();\n // Used to prevent multi-click.\n else if (this.disableOnClick) {\n this.loading = true;\n this.disabled = true;\n }\n };\n\n /**\n * Handle onKeydown event\n * @param event - keyboard event\n */\n private handleKeydown = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n } else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /**\n * Handle onKeyup event\n * @param event - keyboard event\n */\n private handleKeyup = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateFullWidth(this.fullWidth);\n if (this.isIcon) {\n this.classCollection.add(`mg-c-button--icon`);\n if (!isValidString(this.label)) {\n throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n }\n }\n // Store the onclick fn\n this.onClickElementFn = this.element.onclick;\n this.disabledHandler(this.disabled);\n }\n\n /**\n * Add listners\n */\n componentDidLoad(): void {\n nextTick(() => {\n const closestForm = this.element.closest('form') || this.element.closest('mg-form')?.shadowRoot.querySelector('form');\n // submit buttons should trigger form submition;\n if (!!closestForm && ['submit', undefined].includes(this.type)) {\n this.element.addEventListener('click', () => {\n closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n });\n }\n });\n }\n\n /**\n * Render component\n * @returns html element\n */\n render(): HTMLElement {\n return (\n <Host\n role=\"button\"\n tabIndex={0}\n type={this.type}\n form={this.form}\n full-width={this.fullWidth}\n aria-label={this.label}\n aria-disabled={this.disabled?.toString()}\n onClick={this.handleClick}\n onKeyup={this.handleKeyup}\n onKeydown={this.handleKeydown}\n >\n <div class={this.classCollection.join()} id={this.identifier}>\n {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n <div class=\"mg-c-button__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"mg-button.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-button/mg-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,QAAQ,EAA2B,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE5E;;GAEG;AAMH,MAAM,OAAO,QAAQ;;QACnB;;sBAEc;QAEN,qBAAgB,GAAG,IAAI,CAAC;QACf,kBAAa,GAAG,uBAAuB,CAAC;QACxC,iBAAY,GAAG,sBAAsB,CAAC;QACtC,mBAAc,GAAG,yBAAyB,CAAC;QA8H5D;;;WAGG;QACK,gBAAW,GAAG,CAAC,KAAiB,EAAQ,EAAE;YAChD,IAAI,IAAI,CAAC,QAAQ;gBAAE,KAAK,CAAC,eAAe,EAAE,CAAC;YAC3C,+BAA+B;iBAC1B,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBAC7B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QAEF;;;WAGG;QACK,kBAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;YACrD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACxC,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,CAAC;iBAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;gBACnF,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YACzE,CAAC;QACH,CAAC,CAAC;QAEF;;;WAGG;QACK,gBAAW,GAAG,CAAC,KAAoB,EAAQ,EAAE;YACnD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACxC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YACzE,CAAC;QACH,CAAC,CAAC;uBAnJ6B,QAAQ,CAAC,CAAC,CAAC;;;;yBAgCtB,KAAK;;;sBA8CR,KAAK;8BAMG,KAAK;uBAOX,KAAK;+BAcc,IAAI,SAAS,CAAC,CAAC,aAAa,CAAC,CAAC;;IAvGpE,eAAe,CAAC,QAAqB,EAAE,QAAsB;QAC3D,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,8CAA8C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACvF,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,gBAAgB,QAAQ,EAAE,CAAC,CAAC;YAC1D,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,gBAAgB,QAAQ,EAAE,CAAC,CAAC;QACvD,CAAC;IACH,CAAC;IAuBD,iBAAiB,CAAC,QAA+B;QAC/C,IAAI,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC,CAAC;QACrF,CAAC;aAAM,IAAI,QAAQ,EAAE,CAAC;YACpB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAChD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAaD,eAAe,CAAC,UAAgC;QAC9C,6BAA6B;QAC7B,2BAA2B;QAC3B,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACvC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;QACD,oBAAoB;QACpB,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;QAEtE,cAAc;QACd,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC/C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAClD,CAAC;QAED,oBAAoB;QACpB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACvC,CAAC;IAoBD,cAAc,CAAC,QAA6B;QAC1C,gEAAgE;QAChE,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IAiDD;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;YAC9C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC/B,MAAM,IAAI,KAAK,CAAC,0EAA0E,CAAC,CAAC;YAC9F,CAAC;QACH,CAAC;QACD,uBAAuB;QACvB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;QAC7C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,QAAQ,CAAC,GAAG,EAAE;;YACZ,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,KAAI,MAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,0CAAE,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA,CAAC;YACtH,gDAAgD;YAChD,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC/D,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;oBAC1C,WAAW,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;gBAC5F,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,gBACH,IAAI,CAAC,SAAS,gBACd,IAAI,CAAC,KAAK,mBACP,MAAA,IAAI,CAAC,QAAQ,0CAAE,QAAQ,EAAE,EACxC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa;YAE7B,4DAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU;gBACzD,IAAI,CAAC,OAAO,IAAI,eAAS,IAAI,EAAC,QAAQ,EAAC,IAAI,SAAW;gBACvD,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,8DAAa,CACT,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType } from './mg-button.conf';\nimport { ClassList, isValidString, nextTick } from '@mgdis/stencil-helpers';\n\n/**\n * @slot - Button content\n */\n@Component({\n tag: 'mg-button',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-button.css',\n shadow: true,\n})\nexport class MgButton {\n /************\n * Internal *\n ************/\n\n private onClickElementFn = null;\n private readonly classDisabled = 'mg-c-button--disabled';\n private readonly classLoading = 'mg-c-button--loading';\n private readonly classFullWidth = 'mg-c-button--full-width';\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgButtonElement;\n\n /**\n * Define button variant\n */\n @Prop() variant: VariantType = variants[0]; // Primary\n @Watch('variant')\n validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-button--${oldValue}`);\n }\n this.classCollection.add(`mg-c-button--${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 * aria-label\n * In case button text is not explicit enough\n */\n @Prop() label?: string;\n\n /**\n * Define button type\n */\n @Prop() type?: ButtonType;\n\n /**\n * Set button to full-width\n */\n @Prop() fullWidth = false;\n @Watch('fullWidth')\n validateFullWidth(newValue: MgButton['fullWidth']): void {\n if (newValue && this.isIcon) {\n throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n } else if (newValue) {\n this.classCollection.add(this.classFullWidth);\n } else {\n this.classCollection.delete(this.classFullWidth);\n }\n }\n\n /**\n * Define form id to attach button with.\n * If this attribute is not set, the <button> is associated with its ancestor <form> element.\n */\n @Prop() form?: string;\n\n /**\n * Disable button\n */\n @Prop({ mutable: true }) disabled?: boolean;\n @Watch('disabled')\n disabledHandler(isDisabled: MgButton['disabled']): void {\n // Remove loading when enable\n // Will be set back onclick\n if (!isDisabled && this.disableOnClick) {\n this.loading = false;\n }\n // Manage if onclick\n this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n // apply style\n if (isDisabled) {\n this.classCollection.add(this.classDisabled);\n } else {\n this.classCollection.delete(this.classDisabled);\n }\n\n // emit value update\n this.disabledChange.emit(isDisabled);\n }\n /**\n * Define if button is round.\n * Used for icon button.\n */\n @Prop() isIcon = false;\n\n /**\n * Option to set input disable on click, in order to prevent multi-click.\n * Parent component have to remove the attribute 'disabled' when the process ends.\n */\n @Prop() disableOnClick = false;\n\n /**\n * Define if button is loading, default to false.\n * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n * It's required to reset to false when action/promise in parent is done to stop the loading state\n */\n @State() loading = false;\n @Watch('loading')\n loadingHandler(newValue: MgButton['loading']): void {\n // we add loading style if it newvalue is true else we remove it\n if (newValue) {\n this.classCollection.add(this.classLoading);\n } else {\n this.classCollection.delete(this.classLoading);\n }\n }\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-button']);\n\n /**\n * Emmited event when disabled change\n */\n @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<HTMLMgButtonElement['disabled']>;\n\n /**\n * Trigger actions onClick event\n * @param event - click event\n */\n private handleClick = (event: MouseEvent): void => {\n if (this.disabled) event.stopPropagation();\n // Used to prevent multi-click.\n else if (this.disableOnClick) {\n this.loading = true;\n this.disabled = true;\n }\n };\n\n /**\n * Handle onKeydown event\n * @param event - keyboard event\n */\n private handleKeydown = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n } else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /**\n * Handle onKeyup event\n * @param event - keyboard event\n */\n private handleKeyup = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateFullWidth(this.fullWidth);\n if (this.isIcon) {\n this.classCollection.add(`mg-c-button--icon`);\n if (!isValidString(this.label)) {\n throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n }\n }\n // Store the onclick fn\n this.onClickElementFn = this.element.onclick;\n this.disabledHandler(this.disabled);\n }\n\n /**\n * Add listners\n */\n componentDidLoad(): void {\n nextTick(() => {\n const closestForm = this.element.closest('form') || this.element.closest('mg-form')?.shadowRoot.querySelector('form');\n // submit buttons should trigger form submition;\n if (!!closestForm && ['submit', undefined].includes(this.type)) {\n this.element.addEventListener('click', () => {\n closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n });\n }\n });\n }\n\n /**\n * Render component\n * @returns html element\n */\n render(): HTMLElement {\n return (\n <Host\n role=\"button\"\n tabIndex={0}\n type={this.type}\n form={this.form}\n full-width={this.fullWidth}\n aria-label={this.label}\n aria-disabled={this.disabled?.toString()}\n onClick={this.handleClick}\n onKeyup={this.handleKeyup}\n onKeydown={this.handleKeydown}\n >\n <div class={this.classCollection.join()} id={this.identifier}>\n {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n <div class=\"mg-c-button__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { ClassList } from "@mgdis/stencil-helpers";
|
|
3
3
|
import { variantStyles, variants } from "./mg-card.conf";
|
|
4
|
+
/**
|
|
5
|
+
* @slot - Card content
|
|
6
|
+
*/
|
|
4
7
|
export class MgCard {
|
|
5
8
|
constructor() {
|
|
6
9
|
/*************
|
|
@@ -9,7 +12,7 @@ export class MgCard {
|
|
|
9
12
|
this.name = 'mg-card';
|
|
10
13
|
this.classBase = 'mg-c-card';
|
|
11
14
|
/**
|
|
12
|
-
*
|
|
15
|
+
* Method to set default varianStyle props
|
|
13
16
|
* needeed has stencil doesn't know that props is mutated when updated in prop watcher
|
|
14
17
|
*/
|
|
15
18
|
this.setDefaultVariantStyle = () => {
|
|
@@ -56,7 +59,7 @@ export class MgCard {
|
|
|
56
59
|
*/
|
|
57
60
|
render() {
|
|
58
61
|
var _a;
|
|
59
|
-
return (h("div", { key: '
|
|
62
|
+
return (h("div", { key: '9e604fe7b06f19797c6841b1902b56684a4bdc69', class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-c-card__bar" }), h("slot", { key: '44d9092aaa6bbdf0b20a1fffe0edad15150cd8cb' })));
|
|
60
63
|
}
|
|
61
64
|
static get is() { return "mg-card"; }
|
|
62
65
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-card.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-card/mg-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAyB,aAAa,EAAoB,QAAQ,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"mg-card.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-card/mg-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAyB,aAAa,EAAoB,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAElG;;GAEG;AAMH,MAAM,OAAO,MAAM;;QACjB;;uBAEe;QAEE,SAAI,GAAG,SAAS,CAAC;QACjB,cAAS,GAAG,WAAW,CAAC;QAsCzC;;;WAGG;QACK,2BAAsB,GAAG,GAAS,EAAE;YAC1C,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;gBAAE,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;QACtE,CAAC,CAAC;;;+BARoC,IAAI,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;IAzBrE,eAAe,CAAC,QAA2B,EAAE,QAA4B;QACvE,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,+CAA+C,CAAC,CAAC;QAC5H,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC9B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;QAC7D,CAAC;QACD,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;IAC9E,CAAC;IAOD,oBAAoB,CAAC,QAAgC,EAAE,QAAiC;QACtF,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,yDAAyD,CAAC,CAAC;aACtI,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;YAC5D,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6CAA6C,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;QACxH,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;QACzE,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;IAC9E,CAAC;IAeD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC/C,CAAC;IAED;;;OAGG;IACH,MAAM;;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;YACpC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,UAAU,CAAC,MAAM,CAAC,KAAI,YAAM,KAAK,EAAC,gBAAgB,GAAQ;YAC9E,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { ClassList } from '@mgdis/stencil-helpers';\nimport { type VariantStyleType, variantStyles, type VariantType, variants } from './mg-card.conf';\n\n/**\n * @slot - Card content\n */\n@Component({\n tag: 'mg-card',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-card.css',\n shadow: true,\n})\nexport class MgCard {\n /*************\n * Private *\n *************/\n\n private readonly name = 'mg-card';\n private readonly classBase = 'mg-c-card';\n\n /*************\n * Decorators *\n *************/\n\n /**\n * Define variant prop\n */\n @Prop() variant: undefined | VariantType;\n @Watch('variant')\n validateVariant(newValue: MgCard['variant'], oldValue?: MgCard['variant']) {\n if (newValue && !variants.includes(newValue)) throw new Error(`<${this.name}> prop \"variant\" must match VariantType type.`);\n if (newValue) {\n this.setDefaultVariantStyle();\n this.classCollection.add(`${this.classBase}--${newValue}`);\n }\n if (oldValue) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n }\n\n /**\n * Define variantStyle prop\n */\n @Prop({ mutable: true }) variantStyle: undefined | VariantStyleType;\n @Watch('variantStyle')\n validateVariantStyle(newValue: MgCard['variantStyle'], oldValue?: MgCard['variantStyle']) {\n if (newValue && !variantStyles.includes(newValue)) throw new Error(`<${this.name}> prop \"variantStyle\" must match VariantStyleType type.`);\n else if (Boolean(newValue) && !variants.includes(this.variant))\n throw new Error(`<${this.name}> prop \"variantStyle\" must be paired with ${JSON.stringify(variants)} \"variant\" prop.`);\n if (newValue) this.classCollection.add(`${this.classBase}--${newValue}`);\n if (oldValue) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n }\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList([this.classBase]);\n\n /**\n * Method to set default varianStyle props\n * needeed has stencil doesn't know that props is mutated when updated in prop watcher\n */\n private setDefaultVariantStyle = (): void => {\n if (this.variantStyle === undefined) this.variantStyle = 'bar-left';\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateVariantStyle(this.variantStyle);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class={this.classCollection.join()}>\n {this.variantStyle?.startsWith('bar-') && <span class=\"mg-c-card__bar\"></span>}\n <slot></slot>\n </div>\n );\n }\n}\n"]}
|
|
@@ -26,7 +26,7 @@ export class MgCharacterLeft {
|
|
|
26
26
|
* @returns HTML Element
|
|
27
27
|
*/
|
|
28
28
|
render() {
|
|
29
|
-
return (h("span", { key: '
|
|
29
|
+
return (h("span", { key: 'fafe1f542f085f5f910a7b43cf6fa7e9fe9fd302', id: this.identifier, "aria-live": "polite" }, h("span", { key: '54b74d3a1161c583e47b0ad96845664e3ad9623d', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: '390ad6cd724c66230fb726a307391922ddfe7c2c', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
|
|
30
30
|
}
|
|
31
31
|
static get is() { return "mg-character-left"; }
|
|
32
32
|
static get encapsulation() { return "scoped"; }
|
|
@@ -51,7 +51,7 @@ export class MgCharacterLeft {
|
|
|
51
51
|
"references": {}
|
|
52
52
|
},
|
|
53
53
|
"required": false,
|
|
54
|
-
"optional":
|
|
54
|
+
"optional": true,
|
|
55
55
|
"docs": {
|
|
56
56
|
"tags": [],
|
|
57
57
|
"text": "Sets an `id` attribute.\nNeeded by the input for accessibility `aria-decribedby`."
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-character-left.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-character-left/mg-character-left.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,MAAM,OAAO,eAAe;;;0BAyBL,EAAE;;;IAOvB,iBAAiB,CAAC,QAAgB;QAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IAED;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IACrD,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,6DAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ;YAC3C,4EAAkB,MAAM;gBACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM;;gBAAG,IAAI,CAAC,SAAS,CACpD;YACP,6DAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,CAC7H,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\n\n@Component({\n tag: 'mg-character-left',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-character-left.css',\n scoped: true,\n})\nexport class MgCharacterLeft {\n /************\n * Internal *\n ************/\n\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgCharacterLeftElement;\n\n /**\n * Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n */\n @Prop() identifier
|
|
1
|
+
{"version":3,"file":"mg-character-left.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-character-left/mg-character-left.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,MAAM,OAAO,eAAe;;;0BAyBL,EAAE;;;IAOvB,iBAAiB,CAAC,QAAgB;QAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IAED;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IACrD,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,6DAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ;YAC3C,4EAAkB,MAAM;gBACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM;;gBAAG,IAAI,CAAC,SAAS,CACpD;YACP,6DAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,CAC7H,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\n\n@Component({\n tag: 'mg-character-left',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-character-left.css',\n scoped: true,\n})\nexport class MgCharacterLeft {\n /************\n * Internal *\n ************/\n\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgCharacterLeftElement;\n\n /**\n * Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n */\n @Prop() identifier?: string;\n\n /**\n * Sets the characters to count\n */\n @Prop() characters = '';\n\n /**\n * Add maximum length\n */\n @Prop() maxlength!: number;\n @Watch('maxlength')\n validateMaxlength(newValue: number): void {\n if (typeof newValue !== 'number') {\n throw new Error('<mg-character-left> prop \"maxlength\" is required.');\n }\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n this.validateMaxlength(this.maxlength);\n this.messages = initLocales(this.element).messages;\n }\n\n /**\n * Render component\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <span id={this.identifier} aria-live=\"polite\">\n <span aria-hidden=\"true\">\n {this.maxlength - this.characters.length}/{this.maxlength}\n </span>\n <span class=\"mg-u-visually-hidden\">{this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length)}</span>\n </span>\n );\n }\n}\n"]}
|
|
@@ -8,7 +8,7 @@ export class MgDivider {
|
|
|
8
8
|
* @returns HTML Element
|
|
9
9
|
*/
|
|
10
10
|
render() {
|
|
11
|
-
return (h("div", { key: '
|
|
11
|
+
return (h("div", { key: '7250dfa7ca66ea0831292a25ea7e76c29ca36500', class: {
|
|
12
12
|
'mg-c-divider': true,
|
|
13
13
|
'mg-c-divider--full': this.size === 'full',
|
|
14
14
|
} }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-icon.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-icon/mg-icon.conf.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"mg-icon.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-icon/mg-icon.conf.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAU,CAAC;AAOrF;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAU,CAAC;AAOjF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,YAAY,EAAE,MAAM,CAAU,CAAC","sourcesContent":["import { icons } from '../../../assets/icons';\n/**\n * List of all possibles icons\n */\nexport type IconType = keyof typeof icons;\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['small', 'regular', 'medium', 'large', 'extra-large'] as const;\n\n/**\n * Icon Size from sizes\n */\nexport type IconSizeType = (typeof sizes)[number];\n\n/**\n * List of all possibles variants\n */\nexport const variants = ['success', 'warning', 'danger', 'info', 'app'] as const;\n\n/**\n * Variant type from variants\n */\nexport type IconVariantType = (typeof variants)[number];\n\n/**\n * List of all possibles variants styles\n */\nexport const variantStyles = ['icon', 'background', 'full'] as const;\n\n/**\n * Variant style type from variant style\n */\nexport type IconVariantStyleType = (typeof variantStyles)[number];\n"]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { sizes, variants, variantStyles } from "./mg-icon.conf";
|
|
2
2
|
import { ClassList } from "@mgdis/stencil-helpers";
|
|
3
|
-
import iconList from "@mgdis/img/dist/icons/index.json";
|
|
4
3
|
import { icons } from "../../../assets/icons";
|
|
5
4
|
export class MgIcon {
|
|
6
5
|
constructor() {
|
|
@@ -16,7 +15,7 @@ export class MgIcon {
|
|
|
16
15
|
* Render icon in shadowroot
|
|
17
16
|
* @param icon - icon to render
|
|
18
17
|
*/
|
|
19
|
-
this.renderIcon = icon => {
|
|
18
|
+
this.renderIcon = (icon) => {
|
|
20
19
|
this.element.shadowRoot.innerHTML = icons[icon];
|
|
21
20
|
this.svg = this.element.shadowRoot.querySelector('svg');
|
|
22
21
|
// update svg attributes
|
|
@@ -32,8 +31,8 @@ export class MgIcon {
|
|
|
32
31
|
this.classCollection = new ClassList(['mg-c-icon']);
|
|
33
32
|
}
|
|
34
33
|
validateIcon(newValue, oldValue) {
|
|
35
|
-
if (!
|
|
36
|
-
throw new Error(`<mg-icon> prop "icon" must be one of: ${
|
|
34
|
+
if (!Object.keys(icons).includes(newValue))
|
|
35
|
+
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}`);
|
|
37
36
|
else {
|
|
38
37
|
if (oldValue !== undefined)
|
|
39
38
|
this.classCollection.delete(`mg-c-icon--${oldValue}`);
|
|
@@ -117,9 +116,15 @@ export class MgIcon {
|
|
|
117
116
|
"type": "string",
|
|
118
117
|
"mutable": false,
|
|
119
118
|
"complexType": {
|
|
120
|
-
"original": "
|
|
121
|
-
"resolved": "
|
|
122
|
-
"references": {
|
|
119
|
+
"original": "IconType",
|
|
120
|
+
"resolved": "\"filter\" | \"copy\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"history\" | \"location\" | \"key\" | \"loader\" | \"address-card\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building-outline\" | \"calculator\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-outline\" | \"comment-sms\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-slash\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-download\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"list\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-slash\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"question-circle\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tags\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
|
|
121
|
+
"references": {
|
|
122
|
+
"IconType": {
|
|
123
|
+
"location": "import",
|
|
124
|
+
"path": "./mg-icon.conf",
|
|
125
|
+
"id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconType"
|
|
126
|
+
}
|
|
127
|
+
}
|
|
123
128
|
},
|
|
124
129
|
"required": true,
|
|
125
130
|
"optional": false,
|
|
@@ -169,7 +174,7 @@ export class MgIcon {
|
|
|
169
174
|
}
|
|
170
175
|
},
|
|
171
176
|
"required": false,
|
|
172
|
-
"optional":
|
|
177
|
+
"optional": true,
|
|
173
178
|
"docs": {
|
|
174
179
|
"tags": [],
|
|
175
180
|
"text": "Define icon variant color"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-icon.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-icon/mg-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,
|
|
1
|
+
{"version":3,"file":"mg-icon.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-icon/mg-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Watch, State, Element } from '@stencil/core';\nimport { type IconType, sizes, type IconSizeType, variants, type IconVariantType, variantStyles, type IconVariantStyleType } from './mg-icon.conf';\nimport { ClassList } from '@mgdis/stencil-helpers';\nimport { icons } from '../../../assets/icons';\n\n@Component({\n tag: 'mg-icon',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-icon.css',\n shadow: true,\n})\nexport class MgIcon {\n private svg: SVGSVGElement;\n\n /**\n * Icon HTML Element\n */\n @Element() element: HTMLMgIconElement;\n\n /**\n * Icon to display.\n */\n @Prop() icon!: IconType;\n @Watch('icon')\n validateIcon(newValue: MgIcon['icon'], oldValue?: MgIcon['icon']): void {\n if (!Object.keys(icons).includes(newValue)) throw new Error(`<mg-icon> prop \"icon\" must be one of: ${Object.keys(icons).join(', ')}`);\n else {\n if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--${oldValue}`);\n this.classCollection.add(`mg-c-icon--${newValue}`);\n this.renderIcon(newValue);\n }\n }\n\n /**\n * Define icon size\n */\n @Prop() size: IconSizeType = 'regular';\n @Watch('size')\n validateSize(newValue: MgIcon['size'], oldValue?: MgIcon['size']): void {\n if (!sizes.includes(newValue)) throw new Error(`<mg-icon> prop \"size\" must be one of: ${sizes.join(', ')}`);\n else {\n if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--size-${oldValue}`);\n this.classCollection.add(`mg-c-icon--size-${newValue}`);\n }\n }\n\n /**\n * Define icon variant color\n */\n @Prop() variant?: IconVariantType;\n @Watch('variant')\n validateVariant(newValue: MgIcon['variant'], oldValue?: MgIcon['variant']): void {\n if (newValue) {\n if (!variants.includes(newValue)) throw new Error(`<mg-icon> prop \"variant\" must be one of: ${variants.join(', ')}`);\n else {\n this.setDefaultVariantStyle();\n if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--variant-${oldValue}`);\n this.classCollection.add(`mg-c-icon--variant-${newValue}`);\n }\n }\n }\n\n /**\n * Define icon color variant style\n * Add a color to the icon based on variant color with given style\n * 'full': Used to set a circular background with variant soft color and icon variant color\n * 'background': Used to set a circular background with variant soft color\n * 'icon': Used to set a color only to the icon\n */\n @Prop({ mutable: true }) variantStyle: IconVariantStyleType;\n @Watch('variantStyle')\n validateVariantStyle(newValue: MgIcon['variantStyle'], oldValue?: MgIcon['variantStyle']): void {\n if (newValue) {\n if (!variantStyles.includes(newValue)) throw new Error(`<mg-icon> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}`);\n else {\n if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);\n this.classCollection.add(`mg-c-icon--variant-style-${newValue}`);\n }\n }\n }\n\n /**\n * Make the icon spin\n */\n @Prop() spin = false;\n @Watch('spin')\n handleSpin(newValue: MgIcon['spin']): void {\n if (newValue) {\n this.classCollection.add('mg-c-icon--spin');\n } else {\n this.classCollection.delete('mg-c-icon--spin');\n }\n }\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-icon']);\n\n /**\n * Method to set default varianStyle props\n * needeed has stencil doesn't know that props is mutated when updated in prop watcher\n */\n private setDefaultVariantStyle = (): void => {\n if (this.variantStyle === undefined) this.variantStyle = 'background';\n };\n\n /**\n * Render icon in shadowroot\n * @param icon - icon to render\n */\n private renderIcon = (icon: IconType): void => {\n this.element.shadowRoot.innerHTML = icons[icon];\n this.svg = this.element.shadowRoot.querySelector('svg');\n // update svg attributes\n this.svg.setAttribute('aria-hidden', 'true');\n this.svg.setAttribute('focusable', 'false');\n this.svg.setAttribute('class', this.classCollection.join());\n };\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n this.validateIcon(this.icon);\n this.validateSize(this.size);\n this.validateVariant(this.variant);\n this.validateVariantStyle(this.variantStyle);\n this.handleSpin(this.spin);\n // render icon\n this.renderIcon(this.icon);\n }\n\n /**\n * update html when component trigger changes\n */\n componentWillUpdate() {\n this.svg.setAttribute('class', this.classCollection.join());\n }\n}\n"]}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { isValidString } from "@mgdis/stencil-helpers";
|
|
3
|
+
/**
|
|
4
|
+
* @slot - Title content
|
|
5
|
+
*/
|
|
3
6
|
export class MgInputTitle {
|
|
4
7
|
constructor() {
|
|
5
8
|
this.identifier = undefined;
|
|
@@ -33,7 +36,7 @@ export class MgInputTitle {
|
|
|
33
36
|
render() {
|
|
34
37
|
const TagName = this.readonly ? 'span' : this.tagName;
|
|
35
38
|
// \u00A0 represent a
|
|
36
|
-
return (h(TagName, { key: '
|
|
39
|
+
return (h(TagName, { key: '3042d844802f32bc180f7fa2a94b6d6b72e3fc85', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: 'b95a542c64ab1deddcae5d2cf5185a5748303926' }), this.required && !this.readonly && (h("span", { class: "mg-c-input-title__required" }, "\u00A0", h("span", { class: "mg-u-is-asterisk" }, "*")))));
|
|
37
40
|
}
|
|
38
41
|
static get is() { return "mg-input-title"; }
|
|
39
42
|
static get encapsulation() { return "scoped"; }
|
|
@@ -75,7 +78,7 @@ export class MgInputTitle {
|
|
|
75
78
|
"references": {}
|
|
76
79
|
},
|
|
77
80
|
"required": false,
|
|
78
|
-
"optional":
|
|
81
|
+
"optional": true,
|
|
79
82
|
"docs": {
|
|
80
83
|
"tags": [],
|
|
81
84
|
"text": "If input is required an asterisk is added at the end of the label"
|
|
@@ -92,7 +95,7 @@ export class MgInputTitle {
|
|
|
92
95
|
"references": {}
|
|
93
96
|
},
|
|
94
97
|
"required": false,
|
|
95
|
-
"optional":
|
|
98
|
+
"optional": true,
|
|
96
99
|
"docs": {
|
|
97
100
|
"tags": [],
|
|
98
101
|
"text": "If input is required an asterisk is added at the end of the label"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-input-title.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-input-title/mg-input-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"mg-input-title.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-input-title/mg-input-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD;;GAEG;AAMH,MAAM,OAAO,YAAY;;;;;wBAyBJ,KAAK;uBASL,OAAO;;IA5B1B,kBAAkB,CAAC,QAAoC;QACrD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;QACrE,CAAC;IACH,CAAC;IAiBD,gBAAgB,CAAC,QAAkC;QACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;IAC/C,CAAC;IAOD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;QACtD,4BAA4B;QAC5B,OAAO,CACL,EAAC,OAAO,qDAAC,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,QAAQ,CAAC,CAAC,CAAC,SAAS;YACtI,8DAAa;YACZ,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAClC,YAAM,KAAK,EAAC,4BAA4B;;gBAChC,YAAM,KAAK,EAAC,kBAAkB,QAAS,CACxC,CACR,CACO,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n/**\n * @slot - Title content\n */\n@Component({\n tag: 'mg-input-title',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css',\n scoped: true,\n})\nexport class MgInputTitle {\n /**\n * Label input id\n */\n @Prop() identifier!: string;\n @Watch('identifier')\n validateIdentifier(newValue: MgInputTitle['identifier']): void {\n if (!isValidString(newValue)) {\n throw new Error('<mg-input-title> prop \"identifier\" is required.');\n }\n }\n\n /**\n * If input is required an asterisk is added at the end of the label\n */\n @Prop() required?: boolean;\n\n /**\n * If input is required an asterisk is added at the end of the label\n */\n @Prop() readonly?: boolean;\n\n /**\n * Switch from label to fieldset sementic\n */\n @Prop() isLegend = false;\n @Watch('isLegend')\n validateIsLegend(newValue: MgInputTitle['isLegend']) {\n this.tagName = newValue ? 'legend' : 'label';\n }\n\n /**\n * Component parent tagname\n */\n @State() tagName = 'label';\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Init tag name\n */\n componentWillLoad(): void {\n this.validateIdentifier(this.identifier);\n this.validateIsLegend(this.isLegend);\n }\n\n /**\n * Render\n * @returns HTML element\n */\n render(): HTMLElement {\n const TagName = this.readonly ? 'span' : this.tagName;\n // \\u00A0 represent a \n return (\n <TagName class=\"mg-c-input-title\" htmlFor={!this.isLegend && this.identifier} id={this.isLegend ? `${this.identifier}-title` : undefined}>\n <slot></slot>\n {this.required && !this.readonly && (\n <span class=\"mg-c-input-title__required\">\n <span class=\"mg-u-is-asterisk\">*</span>\n </span>\n )}\n </TagName>\n );\n }\n}\n"]}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { variants } from "./mg-tag.conf";
|
|
3
3
|
import { ClassList, isValidString } from "@mgdis/stencil-helpers";
|
|
4
|
+
/**
|
|
5
|
+
* @slot - Tag content
|
|
6
|
+
*/
|
|
4
7
|
export class MgTag {
|
|
5
8
|
constructor() {
|
|
6
9
|
/************
|
|
@@ -69,7 +72,7 @@ export class MgTag {
|
|
|
69
72
|
* @returns HTML Element
|
|
70
73
|
*/
|
|
71
74
|
render() {
|
|
72
|
-
return (h("span", { key: '
|
|
75
|
+
return (h("span", { key: 'f107390f5fb47c34faac9de08a08739499d0e409', class: this.classCollection.join() }, h("slot", { key: '04b346f71dff32aa32f52b96553154434ba231eb' })));
|
|
73
76
|
}
|
|
74
77
|
static get is() { return "mg-tag"; }
|
|
75
78
|
static get encapsulation() { return "shadow"; }
|
|
@@ -118,7 +121,7 @@ export class MgTag {
|
|
|
118
121
|
"references": {}
|
|
119
122
|
},
|
|
120
123
|
"required": false,
|
|
121
|
-
"optional":
|
|
124
|
+
"optional": true,
|
|
122
125
|
"docs": {
|
|
123
126
|
"tags": [],
|
|
124
127
|
"text": "Define if tag is using outline style"
|
|
@@ -135,7 +138,7 @@ export class MgTag {
|
|
|
135
138
|
"references": {}
|
|
136
139
|
},
|
|
137
140
|
"required": false,
|
|
138
|
-
"optional":
|
|
141
|
+
"optional": true,
|
|
139
142
|
"docs": {
|
|
140
143
|
"tags": [],
|
|
141
144
|
"text": "Define if tag is using soft style"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-tag.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tag/mg-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAkB,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"mg-tag.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tag/mg-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAkB,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE;;GAEG;AAMH,MAAM,OAAO,KAAK;;QAChB;;sBAEc;QAEd,UAAU;QACO,iBAAY,GAAG,mBAAmB,CAAC;QACnC,cAAS,GAAG,gBAAgB,CAAC;uBAcZ,QAAQ,CAAC,CAAC,CAAC;;;+BAwCP,IAAI,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;;IAtCjE,eAAe,CAAC,QAA0B,EAAE,QAA2B;QACrE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,2CAA2C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACrF,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAC;YACvD,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA0B;QACxC,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;YACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACtD,CAAC;IAOD,YAAY,CAAC,QAAuB;QAClC,mBAAmB;QACnB,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO;YAAE,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAC;QAE3G,cAAc;QACd,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;YAClD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACnD,CAAC;IAOD;;mBAEe;IAEf;;;OAGG;IACK,mBAAmB,CAAC,WAAmB;QAC7C,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;IACjG,CAAC;IAED;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IACrD,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;YACtC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch, Element } from '@stencil/core';\nimport { TagVariantType, variants } from './mg-tag.conf';\nimport { ClassList, isValidString } from '@mgdis/stencil-helpers';\n/**\n * @slot - Tag content\n */\n@Component({\n tag: 'mg-tag',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tag.css',\n shadow: true,\n})\nexport class MgTag {\n /************\n * Internal *\n ************/\n\n // Classes\n private readonly classOutline = 'mg-c-tag--outline';\n private readonly classSoft = 'mg-c-tag--soft';\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgTagElement;\n\n /**\n * Define tag variant\n */\n @Prop() variant: TagVariantType = variants[0]; // primary\n @Watch('variant')\n validateVariant(newValue: MgTag['variant'], oldValue?: MgTag['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-tag> prop \"variant\" must be one of: ${variants.join(', ')}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-tag--${oldValue}`);\n }\n this.classCollection.add(`mg-c-tag--${newValue}`);\n }\n }\n\n /**\n * Define if tag is using outline style\n */\n @Prop() outline?: boolean;\n @Watch('outline')\n validateOutline(newValue: MgTag['outline']): void {\n if (newValue) this.classCollection.add(this.classOutline);\n else this.classCollection.delete(this.classOutline);\n }\n\n /**\n * Define if tag is using soft style\n */\n @Prop() soft?: boolean;\n @Watch('soft')\n validateSoft(newValue: MgTag['soft']): void {\n // usage validation\n if (newValue && this.outline) throw new Error('<mg-tag> prop \"soft\" can NOT be used with prop \"outline\".');\n\n // apply class\n if (newValue) this.classCollection.add(this.classSoft);\n else this.classCollection.delete(this.classSoft);\n }\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-tag']);\n\n /*************\n * Methods *\n *************/\n\n /**\n * Validate the given textContent\n * @param textContent - html element textContent property\n */\n private validateTextContent(textContent: string): void {\n if (!isValidString(textContent)) throw new Error('<mg-tag> slot must contain a text content.');\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateOutline(this.outline);\n this.validateSoft(this.soft);\n this.validateTextContent(this.element.textContent);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <span class={this.classCollection.join()}>\n <slot></slot>\n </span>\n );\n }\n}\n"]}
|
package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
|
+
/**
|
|
3
|
+
* @internal
|
|
4
|
+
*/
|
|
2
5
|
export class MgTooltipContent {
|
|
3
6
|
constructor() {
|
|
4
7
|
this.message = undefined;
|
|
@@ -11,7 +14,7 @@ export class MgTooltipContent {
|
|
|
11
14
|
* @returns HTML Element
|
|
12
15
|
*/
|
|
13
16
|
render() {
|
|
14
|
-
return (h(Host, { key: '
|
|
17
|
+
return (h(Host, { key: '81cff61f9230149078ace113a6661ae15ab6482e', role: "tooltip" }, h("span", { key: '11c2076354834ff3e51055197422726933154540', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: 'ce2da739d5ac72a4ae3927a0b528a760f3f6422e', name: "arrow" })));
|
|
15
18
|
}
|
|
16
19
|
static get is() { return "mg-tooltip-content"; }
|
|
17
20
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-tooltip-content.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"mg-tooltip-content.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,gBAAgB;;;;IAM3B;;mBAEe;IAEf;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,SAAS;YAClB,6DAAM,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,6BAA6B,GAAQ;YAC1E,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @internal\n */\n@Component({\n tag: 'mg-tooltip-content',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip-content.css',\n shadow: true,\n})\nexport class MgTooltipContent {\n /**\n * Displayed message in the tooltip\n */\n @Prop() message!: string;\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"tooltip\">\n <span innerHTML={this.message} class=\"mg-tooltip-content__message\"></span>\n <slot name=\"arrow\"></slot>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -3,5 +3,6 @@ export var Guard;
|
|
|
3
3
|
Guard["FOCUS"] = "focus";
|
|
4
4
|
Guard["HOVER_TOOLTIP_ELEMENT"] = "hoverTooltipGuard";
|
|
5
5
|
Guard["HOVER_TOOLTIPED_ELEMENT"] = "hoverTooltipedGuard";
|
|
6
|
+
Guard["DISABLE_ON_CLICK"] = "disableOnClick";
|
|
6
7
|
})(Guard || (Guard = {}));
|
|
7
8
|
//# sourceMappingURL=mg-tooltip.conf.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-tooltip.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,
|
|
1
|
+
{"version":3,"file":"mg-tooltip.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,KAKX;AALD,WAAY,KAAK;IACf,wBAAe,CAAA;IACf,oDAA2C,CAAA;IAC3C,wDAA+C,CAAA;IAC/C,4CAAmC,CAAA;AACrC,CAAC,EALW,KAAK,KAAL,KAAK,QAKhB","sourcesContent":["export enum Guard {\n FOCUS = 'focus',\n HOVER_TOOLTIP_ELEMENT = 'hoverTooltipGuard',\n HOVER_TOOLTIPED_ELEMENT = 'hoverTooltipedGuard',\n DISABLE_ON_CLICK = 'disableOnClick',\n}\n"]}
|