@mgdis/mg-components 5.4.0 → 5.6.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/dist/cjs/{index-94497267.js → index-4dcc1812.js} +11 -1
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/cjs/{mg-badge_29.cjs.entry.js → mg-badge_30.cjs.entry.js} +1112 -859
- package/dist/cjs/mg-components.cjs.js +3 -3
- package/dist/collection/collection-manifest.json +5 -4
- package/dist/collection/components/atoms/mg-badge/doc/mg-badge.stories.js +0 -7
- package/dist/collection/components/atoms/mg-badge/mg-badge.conf.js +1 -1
- package/dist/collection/components/atoms/mg-badge/mg-badge.css +13 -0
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +7 -10
- package/dist/collection/components/atoms/mg-button/doc/mg-button.stories.js +0 -7
- package/dist/collection/components/atoms/mg-button/mg-button.conf.js +1 -1
- package/dist/collection/components/atoms/mg-button/mg-button.css +15 -1
- package/dist/collection/components/atoms/mg-button/mg-button.js +12 -29
- package/dist/collection/components/atoms/mg-card/mg-card.css +17 -5
- package/dist/collection/components/atoms/mg-character-left/mg-character-left.js +2 -3
- package/dist/collection/components/atoms/mg-divider/mg-divider.js +0 -6
- package/dist/collection/components/atoms/mg-icon/mg-icon.conf.js +13 -3
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +5 -12
- package/dist/collection/components/atoms/mg-input-title/mg-input-title.js +4 -8
- package/dist/collection/components/atoms/mg-tag/doc/mg-tag.stories.js +1 -9
- package/dist/collection/components/atoms/mg-tag/mg-tag.css +58 -0
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +61 -16
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.css +2 -0
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +9 -22
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +17 -33
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.css +3 -3
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +21 -26
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.css +3 -3
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +24 -47
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.css +3 -3
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +17 -29
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +18 -33
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.css +3 -3
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +30 -36
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.css +3 -3
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +23 -41
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.css +3 -3
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +23 -45
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +16 -33
- package/dist/collection/components/molecules/menu/mg-menu/doc/mg-menu.stories.js +43 -11
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.conf.js +17 -0
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.css +27 -0
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +145 -25
- package/dist/collection/components/molecules/menu/mg-menu-item/doc/mg-menu-item.stories.js +7 -5
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.conf.js +0 -4
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.css +51 -21
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +129 -92
- package/dist/collection/components/molecules/mg-details/mg-details.js +4 -8
- package/dist/collection/components/molecules/mg-form/mg-form.js +8 -22
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.css +2 -2
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +4 -9
- package/dist/collection/components/molecules/mg-message/mg-message.css +20 -19
- package/dist/collection/components/molecules/mg-message/mg-message.js +55 -33
- package/dist/collection/components/molecules/mg-modal/mg-modal.css +20 -8
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +8 -26
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +4 -13
- package/dist/collection/components/molecules/mg-panel/mg-panel.css +17 -5
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +11 -22
- package/dist/collection/components/molecules/mg-popover/mg-popover.css +82 -20
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +54 -26
- package/dist/collection/components/molecules/mg-skip-links/doc/mg-skip-links.stories.js +24 -0
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.conf.js +1 -0
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.css +28 -0
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +108 -0
- package/dist/collection/components/molecules/mg-tabs/doc/mg-tabs.stories.js +5 -3
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.css +11 -7
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +109 -75
- package/dist/collection/locales/en/messages.json +7 -0
- package/dist/collection/locales/fr/messages.json +7 -0
- package/dist/collection/locales/index.js +2 -25
- package/dist/collection/styles/a11y.scss +32 -0
- package/dist/collection/styles/components.scss +3 -0
- package/dist/collection/styles/fonts.scss +21 -0
- package/dist/collection/styles/form.scss +3 -0
- package/dist/collection/styles/global.scss +87 -0
- package/dist/collection/styles/layout.scss +29 -0
- package/dist/collection/styles/main.scss +23 -0
- package/dist/collection/styles/navigation-button.scss +76 -0
- package/dist/collection/styles/reset-mg-card-slotted-variables.scss +9 -0
- package/dist/collection/styles/typography.scss +75 -0
- package/dist/collection/styles/utilities.scss +21 -0
- package/dist/collection/utils/behaviors.utils.js +169 -0
- package/dist/collection/utils/components.utils.js +50 -0
- package/dist/collection/utils/locale.utils.js +22 -0
- package/dist/collection/utils/unit.test.utils.js +37 -32
- package/dist/collection/variables.css +9 -9
- package/dist/components/components.utils.js +51 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/index2.js +73 -18
- package/dist/components/mg-badge2.js +8 -11
- package/dist/components/mg-button2.js +13 -30
- package/dist/components/mg-card.js +1 -37
- package/dist/components/mg-card2.js +39 -0
- package/dist/components/mg-character-left2.js +2 -3
- package/dist/components/mg-details.js +4 -8
- package/dist/components/mg-divider.js +0 -6
- package/dist/components/mg-form.js +8 -22
- package/dist/components/mg-icon2.js +18 -15
- package/dist/components/mg-illustrated-message.js +5 -10
- package/dist/components/mg-input-checkbox.js +17 -33
- package/dist/components/mg-input-date.js +23 -29
- package/dist/components/mg-input-numeric.js +26 -50
- package/dist/components/mg-input-password.js +18 -30
- package/dist/components/mg-input-radio.js +18 -33
- package/dist/components/mg-input-select2.js +32 -38
- package/dist/components/mg-input-text2.js +24 -42
- package/dist/components/mg-input-textarea.js +24 -46
- package/dist/components/mg-input-title2.js +4 -8
- package/dist/components/mg-input-toggle.js +16 -33
- package/dist/components/mg-menu-item.js +1 -264
- package/dist/components/mg-menu-item2.js +517 -0
- package/dist/components/mg-menu.js +142 -28
- package/dist/components/mg-message.js +64 -36
- package/dist/components/mg-modal.js +18 -30
- package/dist/components/mg-pagination.js +4 -13
- package/dist/components/mg-panel.js +20 -25
- package/dist/components/mg-popover.js +1 -200
- package/dist/components/mg-popover2.js +212 -0
- package/dist/components/mg-skip-links.d.ts +11 -0
- package/dist/components/mg-skip-links.js +80 -0
- package/dist/components/mg-tabs.js +108 -73
- package/dist/components/mg-tag.js +35 -13
- package/dist/components/mg-tooltip2.js +10 -23
- package/dist/esm/{index-aad0184c.js → index-dc9a2348.js} +11 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{mg-badge_29.entry.js → mg-badge_30.entry.js} +1112 -860
- package/dist/esm/mg-components.js +3 -3
- package/dist/esm/polyfills/core-js.js +0 -0
- package/dist/esm/polyfills/css-shim.js +1 -1
- package/dist/esm/polyfills/dom.js +0 -0
- package/dist/esm/polyfills/es5-html-element.js +0 -0
- package/dist/esm/polyfills/index.js +0 -0
- package/dist/esm/polyfills/system.js +0 -0
- package/dist/mg-components/locales/en/messages.json +7 -0
- package/dist/mg-components/locales/fr/messages.json +7 -0
- package/dist/mg-components/mg-components.css +1 -1
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/{p-3899d5d2.js → p-182bd802.js} +2 -2
- package/dist/mg-components/p-f7da9dd2.entry.js +1 -0
- package/dist/mg-components/styles/a11y.scss +32 -0
- package/dist/mg-components/styles/components.scss +3 -0
- package/dist/mg-components/styles/fonts.scss +21 -0
- package/dist/mg-components/styles/form.scss +3 -0
- package/dist/mg-components/styles/global.scss +87 -0
- package/dist/mg-components/styles/layout.scss +29 -0
- package/dist/mg-components/styles/main.scss +23 -0
- package/dist/mg-components/styles/navigation-button.scss +76 -0
- package/dist/mg-components/styles/reset-mg-card-slotted-variables.scss +9 -0
- package/dist/mg-components/styles/typography.scss +75 -0
- package/dist/mg-components/styles/utilities.scss +21 -0
- package/dist/mg-components/variables.css +9 -9
- package/dist/types/components/atoms/mg-badge/doc/mg-badge.stories.d.ts +0 -11
- package/dist/types/components/atoms/mg-badge/mg-badge.conf.d.ts +2 -2
- package/dist/types/components/atoms/mg-badge/mg-badge.d.ts +1 -1
- package/dist/types/components/atoms/mg-button/doc/mg-button.stories.d.ts +0 -11
- package/dist/types/components/atoms/mg-button/mg-button.conf.d.ts +4 -4
- package/dist/types/components/atoms/mg-button/mg-button.d.ts +6 -6
- package/dist/types/components/atoms/mg-icon/mg-icon.conf.d.ts +2 -2
- package/dist/types/components/atoms/mg-tag/doc/mg-tag.stories.d.ts +0 -13
- package/dist/types/components/atoms/mg-tag/mg-tag.conf.d.ts +5 -1
- package/dist/types/components/atoms/mg-tag/mg-tag.d.ts +27 -6
- package/dist/types/components/molecules/inputs/MgInput.conf.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.conf.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.conf.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf.d.ts +1 -1
- package/dist/types/components/molecules/menu/mg-menu/doc/mg-menu.stories.d.ts +5 -0
- package/dist/types/components/molecules/menu/mg-menu/mg-menu.conf.d.ts +37 -0
- package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts +51 -3
- package/dist/types/components/molecules/menu/mg-menu-item/doc/mg-menu-item.stories.d.ts +1 -0
- package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.conf.d.ts +0 -8
- package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts +55 -15
- package/dist/types/components/molecules/mg-form/mg-form.d.ts +1 -1
- package/dist/types/components/molecules/mg-message/mg-message.d.ts +22 -5
- package/dist/types/components/molecules/mg-modal/mg-modal.d.ts +1 -1
- package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +12 -0
- package/dist/types/components/molecules/mg-skip-links/doc/mg-skip-links.stories.d.ts +11 -0
- package/dist/types/components/molecules/mg-skip-links/mg-skip-links.conf.d.ts +7 -0
- package/dist/types/components/molecules/mg-skip-links/mg-skip-links.d.ts +49 -0
- package/dist/types/components/molecules/mg-tabs/mg-tabs.conf.d.ts +5 -3
- package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts +24 -14
- package/dist/types/components.d.ts +81 -18
- package/dist/types/locales/index.d.ts +16 -9
- package/dist/types/stencil-public-runtime.d.ts +44 -3
- package/dist/types/utils/behaviors.utils.d.ts +83 -0
- package/dist/types/utils/components.utils.d.ts +14 -0
- package/dist/types/utils/locale.utils.d.ts +13 -0
- package/dist/types/utils/unit.test.utils.d.ts +78 -0
- package/package.json +51 -46
- package/readme.md +25 -14
- package/dist/components/locale.utils.js +0 -40
- package/dist/components/mg-menu.conf.js +0 -10
- package/dist/mg-components/p-059a9a59.entry.js +0 -1
|
@@ -14,6 +14,7 @@ const icons = {
|
|
|
14
14
|
'archive': () => (h("path", { fill: "currentColor", d: "M3 6v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6H3Zm7 2H6V7h4v1Zm3-3H3c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1Z" })),
|
|
15
15
|
'archive-outline': () => (h("path", { fill: "currentColor", d: "M13 2H3c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1Zm-1 11H4.04S4 12.98 4 12.96V6h8v7Zm1-8H3V3h10v2Zm-3 3H6V7h4v1Z" })),
|
|
16
16
|
'arrow-down': () => (h("path", { fill: "currentColor", d: "M13,10.1H10.23a.31.31,0,0,1-.32-.28h0V.94A.3.3,0,0,0,9.59.65H6.37A.32.32,0,0,0,6,.94H6V9.81a.29.29,0,0,1-.31.29H3a.3.3,0,0,0-.31.29.27.27,0,0,0,.08.22l5.06,4.58a.36.36,0,0,0,.46,0l5-4.58a.29.29,0,0,0,0-.42C13.22,10.1,13.12,10.1,13,10.1Z" })),
|
|
17
|
+
'arrow-down-a-z': () => (h("path", { fill: "currentColor", d: "m6.53 10.9-1.41 1.41-.71.71-2.12-2.12.71-.71.88.88V3.02h1v8.12l.95-.95.71.71ZM12.29 6H10.5l-.36 1H9.08l1.79-5h1.05l1.79 5h-1.06l-.36-1Zm-.36-1.02-.53-1.49-.53 1.49h1.06Zm1.79 5.18V9H9.09v1h3.29l-3.29 2.84V14h4.63v-1h-3.29l3.29-2.84Z" })),
|
|
17
18
|
'arrow-down-right': () => (h("path", { fill: "currentColor", d: "m1.98 3.47 8.75 8.75H6.94c-.58 0-1.05.47-1.05 1.06s.47 1.05 1.05 1.05h6.33c.58 0 1.05-.47 1.05-1.05V6.94a1.05 1.05 0 1 0-2.1 0v3.79L3.47 1.98c-.41-.41-1.08-.41-1.49 0-.41.41-.41 1.08 0 1.49Z" })),
|
|
18
19
|
'arrow-left': () => (h("path", { fill: "currentColor", d: "M5.88,12.93V10.18a.3.3,0,0,1,.28-.32H15a.31.31,0,0,0,.29-.33h0V6.32A.31.31,0,0,0,15,6H6.17a.32.32,0,0,1-.29-.31h0V2.93a.3.3,0,0,0-.28-.32.32.32,0,0,0-.23.09L.79,7.76a.36.36,0,0,0,0,.46l4.58,5a.31.31,0,0,0,.43,0A.4.4,0,0,0,5.88,12.93Z" })),
|
|
19
20
|
'arrow-right': () => (h("path", { fill: "currentColor", d: "M10.16,3V5.75a.3.3,0,0,1-.28.32H1a.31.31,0,0,0-.29.33h0V9.61A.31.31,0,0,0,1,9.94H9.87a.29.29,0,0,1,.29.31h0V13a.3.3,0,0,0,.28.32.32.32,0,0,0,.23-.09l4.58-5.06a.36.36,0,0,0,0-.46l-4.58-5a.3.3,0,0,0-.42,0C10.16,2.76,10.16,2.87,10.16,3Z" })),
|
|
@@ -22,6 +23,7 @@ const icons = {
|
|
|
22
23
|
'arrow-up': () => (h("path", { fill: "currentColor", d: "M3.06,5.82H5.81a.31.31,0,0,1,.32.28h0V15a.31.31,0,0,0,.33.29H9.67A.3.3,0,0,0,10,15h0V6.11a.3.3,0,0,1,.31-.29h2.75a.3.3,0,0,0,.23-.51L8.23.73a.36.36,0,0,0-.46,0l-5,4.58a.3.3,0,0,0,0,.43C2.82,5.83,2.92,5.82,3.06,5.82Z" })),
|
|
23
24
|
'arrow-up-right': () => (h("path", { fill: "currentColor", d: "m3.47 14.02 8.75-8.75v3.78c0 .58.47 1.05 1.06 1.05s1.05-.47 1.05-1.05V2.72c0-.58-.47-1.05-1.05-1.05H6.94a1.05 1.05 0 1 0 0 2.1h3.78l-8.74 8.76c-.41.41-.41 1.08 0 1.49s1.08.41 1.49 0Z" })),
|
|
24
25
|
'arrow-up-right-square': () => (h("path", { fill: "currentColor", d: "M14.33 3v10A1.34 1.34 0 0 1 13 14.33H3A1.34 1.34 0 0 1 1.67 13V3A1.34 1.34 0 0 1 3 1.67h10A1.34 1.34 0 0 1 14.33 3Zm-2.48.46H8.68a.67.67 0 0 0-.68.7.63.63 0 0 0 .2.47l.91.91-5.53 5.53a.33.33 0 0 0 0 .48l.87.87a.33.33 0 0 0 .48 0l5.53-5.52.91.9a.69.69 0 0 0 1 0 .71.71 0 0 0 .19-.48V4.15a.67.67 0 0 0-.67-.67Z" })),
|
|
26
|
+
'arrow-up-z-a': () => (h("path", { fill: "currentColor", d: "m5.82 5.85-.94-.94v8.11h-1V4.96l-.89.89-.71-.71 1.41-1.41.71-.71.71.71 1.41 1.41-.71.71ZM12.29 13H10.5l-.36 1H9.08l1.79-5h1.05l1.79 5h-1.06l-.36-1Zm-.36-1.02-.53-1.49-.53 1.49h1.06Zm1.79-8.82V2H9.09v1h3.29L9.09 5.84V7h4.63V6h-3.29l3.29-2.84Z" })),
|
|
25
27
|
'arrows-compare': () => h("path", { fill: "currentColor", d: "M5.81 9.47H.67v1.47h5.14v2.2l2.93-2.93-2.93-2.93v2.2Zm4.39-.73v-2.2h5.14V5.07H10.2v-2.2L7.27 5.8l2.93 2.93Z" }),
|
|
26
28
|
'arrows-right-down': () => (h("path", { fill: "currentColor", d: "M10.68 10.78c.16.17.16.45-.02.61l-2.8 2.78a.43.43 0 0 1-.31.12.42.42 0 0 1-.31-.12l-2.8-2.78a.44.44 0 0 1 0-.62.44.44 0 0 1 .62 0l2.06 2.05V5.38H2.11c-.24 0-.44-.19-.44-.44 0-.24.2-.44.44-.44H8v8.32l2.06-2.05a.44.44 0 0 1 .62 0Zm3.53-6.14-2.78-2.8a.438.438 0 0 0-.61-.02.44.44 0 0 0 0 .62l2.05 2.06H8.89v.88h3.98l-2.05 2.06a.44.44 0 0 0 0 .62c.17.17.45.17.62 0l2.78-2.8s.07-.09.09-.14c.02-.05.03-.11.03-.17 0-.11-.04-.23-.12-.31Z" })),
|
|
27
29
|
'arrows-right-left': () => (h("path", { fill: "currentColor", d: "M.73,5.65V5.23a.64.64,0,0,1,.64-.64H12V3.31a.64.64,0,0,1,.64-.64.63.63,0,0,1,.45.18L15.19,5a.63.63,0,0,1,0,.9L13.05,8A.65.65,0,0,1,12,7.57V6.29H1.37a.64.64,0,0,1-.64-.64Zm14,4.06H4.09V8.43A.64.64,0,0,0,3,8L.87,10.11a.63.63,0,0,0,0,.9L3,13.15a.64.64,0,0,0,.91,0,.61.61,0,0,0,.18-.45V11.41H14.73a.63.63,0,0,0,.64-.64h0v-.42a.63.63,0,0,0-.64-.64Z" })),
|
|
@@ -32,8 +34,13 @@ const icons = {
|
|
|
32
34
|
'briefcase': () => (h("path", { fill: "currentColor", d: "M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Z" })),
|
|
33
35
|
'briefcase-outline': () => (h("path", { fill: "currentColor", d: "M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Zm8 9H2v-7h12v7Z" })),
|
|
34
36
|
'calculator': () => (h("path", { fill: "currentColor", d: "M12.83.67H3.17a.5.5 0 0 0-.5.5v13.66a.5.5 0 0 0 .5.5h9.66a.5.5 0 0 0 .5-.5V1.17a.5.5 0 0 0-.5-.5ZM5.58 13.39a.29.29 0 0 1-.28.3H4.1a.29.29 0 0 1-.3-.28v-1.2a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm0-3.28a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V8.93a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm3.29 3.28a.29.29 0 0 1-.3.3H7.38a.29.29 0 0 1-.3-.3v-1.18a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm0-3.28a.32.32 0 0 1-.3.3H7.38a.32.32 0 0 1-.3-.3V8.93a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm3.33 3.28a.29.29 0 0 1-.28.3h-1.25a.29.29 0 0 1-.3-.28V8.93a.29.29 0 0 1 .28-.3h1.25a.29.29 0 0 1 .3.28v4.48Zm0-7.15a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V2.61a.29.29 0 0 1 .28-.3h7.82a.29.29 0 0 1 .3.28v3.65Z" })),
|
|
35
|
-
'calendar': () => (h("path", { fill: "currentColor", d: "M14
|
|
36
|
-
'calendar-
|
|
37
|
+
'calendar': () => (h("path", { fill: "currentColor", d: "M14 3.5c0-.55-.45-1-1-1h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v.98s0 .02.02.02H2v9c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-9h-.02s.02 0 .02-.02V3.5Zm-11 10v-8h10v8H3Z" })),
|
|
38
|
+
'calendar-outline': () => (h("path", { fill: "currentColor", d: "M13 2.5h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10c0-.55-.45-1-1-1Zm-10 11v-8h10v8H3Zm0-9v-1h10v1H3Z" })),
|
|
39
|
+
'calendar-euro': () => [
|
|
40
|
+
h("path", { d: "M13 2.5h-1v-1h-1v1H5v-1H4v1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-10c0-.6-.4-1-1-1Zm-10 11v-8h10v8H3Z" }),
|
|
41
|
+
h("path", { d: "m9.79 11.03.71.71c-.53.48-1.23.78-2 .78-1.31 0-2.43-.85-2.83-2.02H4.5v-.75h1.02c-.02-.07-.02-.15-.02-.23 0-.09 0-.18.02-.27H4.5V8.5h1.19a2.974 2.974 0 0 1 4.81-1.2l-.71.71c-.35-.3-.8-.49-1.29-.49-.73 0-1.37.39-1.72.98h1.75v.75H6.52c-.01.09-.02.18-.02.27 0 .08 0 .16.01.23h2.02v.75H6.76c.34.61 1 1.02 1.74 1.02.49 0 .94-.19 1.29-.49Z" }),
|
|
42
|
+
],
|
|
43
|
+
'calendar-euro-outline': () => (h("path", { d: "m9.79 11.02.71.71a2.976 2.976 0 0 1-4.83-1.24H4.5v-.75h1.01c-.01-.08-.01-.15-.01-.23 0-.09 0-.18.02-.27H4.5v-.75h1.19a2.974 2.974 0 0 1 4.81-1.2L9.79 8c-.35-.3-.8-.49-1.29-.49-.73 0-1.37.39-1.72.98h1.75v.75H6.52c-.01.09-.02.18-.02.27 0 .08 0 .16.01.23h2.02v.75H6.76c.34.61 1 1.02 1.74 1.02.49 0 .94-.19 1.29-.49ZM13 3.5v1H3v-1h10m-1-2h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10c0-.55-.45-1-1-1h-1v-1Zm-9 12v-8h10v8H3Z" })),
|
|
37
44
|
'check': () => (h("path", { fill: "currentColor", d: "m15.27 4.23-1.11-1.18c-.11-.1-.27-.1-.38 0L6 10.36l-3.76-4a.187.187 0 0 0-.26 0L.71 7.6c-.07.07-.07.19 0 .26l5.12 5.41c.07.07.18.07.25 0l1.3-1.23 7.87-7.45c.1-.1.11-.26.01-.37h.01Z" })),
|
|
38
45
|
'check-circle': () => (h("path", { fill: "currentColor", d: "M15.33 8A7.33 7.33 0 1 1 8 .67 7.33 7.33 0 0 1 15.33 8Zm-8.18 3.88 5.44-5.44a.46.46 0 0 0 0-.65l-.67-.67a.48.48 0 0 0-.67 0L6.82 9.54 4.75 7.47a.46.46 0 0 0-.65 0l-.67.67a.46.46 0 0 0 0 .65l3.07 3.07a.46.46 0 0 0 .65 0Z" })),
|
|
39
46
|
'chevron-down': () => (h("path", { fill: "currentColor", d: "M7.43,12.21.9,5.69a.81.81,0,0,1,0-1.14h0l.76-.77a.81.81,0,0,1,1.14,0L8,9l5.2-5.18a.81.81,0,0,1,1.14,0l.76.77a.8.8,0,0,1,0,1.13h0L8.57,12.21a.79.79,0,0,1-1.13,0Z" })),
|
|
@@ -45,6 +52,8 @@ const icons = {
|
|
|
45
52
|
'chevron-up': () => (h("path", { fill: "currentColor", d: "M8.57,3.79l6.53,6.52a.81.81,0,0,1,0,1.14h0l-.76.77a.81.81,0,0,1-1.14,0L8,7,2.8,12.22a.81.81,0,0,1-1.14,0L.9,11.45a.8.8,0,0,1,0-1.13h0L7.43,3.79a.79.79,0,0,1,1.13,0Z" })),
|
|
46
53
|
'chevron-up-circle': () => (h("path", { fill: "currentColor", d: "M.67 8C.67 3.95 3.95.67 8 .67S15.33 3.95 15.33 8 12.05 15.33 8 15.33C3.95 15.33.67 12.05.67 8ZM7.5 4.63l-4 4c-.28.27-.28.71-.01.99h.01l.5.53c.28.27.72.27 1 0l3-3 3 3c.28.27.72.27 1 0l.5-.51c.28-.27.28-.71.01-.99h-.01l-4-4.01a.697.697 0 0 0-.99-.01H7.5Z" })),
|
|
47
54
|
'clock': () => (h("path", { fill: "currentColor", d: "M8,.67C3.95,.67,.67,3.95,.67,8s3.28,7.33,7.33,7.33,7.33-3.28,7.33-7.33h0C15.33,3.95,12.05,.67,8,.67h0Zm1.69,10.33l-2.61-1.88c-.09-.07-.14-.17-.14-.28V3.84c0-.19,.16-.35,.35-.36h1.42c.2,0,.35,.16,.36,.36V7.93l1.87,1.37c.16,.1,.2,.32,.09,.47v.02h-.01l-.83,1.15c-.12,.15-.34,.18-.5,.06Z" })),
|
|
55
|
+
'clock-outline': () => (h("path", { fill: "currentColor", d: "m10.95 10.04-.71.71L7.5 8.01v-4h1V7.6l2.45 2.45ZM8 2C4.69 2 2 4.69 2 8s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6m0-1c3.87 0 7 3.13 7 7s-3.13 7-7 7-7-3.13-7-7 3.13-7 7-7Z" })),
|
|
56
|
+
'code-square-outline': () => (h("path", { fill: "currentColor", d: "m6.32 10.28.73-.73L5.5 8l1.53-1.53-.73-.73-2.27 2.27 2.28 2.28Zm3.37 0L11.97 8 9.69 5.72l-.73.73L10.51 8 8.96 9.55l.73.73ZM3.01 14c-.27 0-.5-.1-.7-.3-.2-.2-.3-.43-.3-.7V3c0-.27.1-.5.3-.7.2-.2.43-.3.7-.3h10c.27 0 .5.1.7.3.2.2.3.43.3.7v10c0 .27-.1.5-.3.7-.2.2-.43.3-.7.3H3Zm0-1h10V3H3v10Zm0-10v10V3Z" })),
|
|
48
57
|
'conversation': () => (h("path", { fill: "currentColor", d: "M11.22,6.48c0-2.11-2.36-3.81-5.28-3.81S.67,4.37.67,6.48a3.15,3.15,0,0,0,1,2.19A5.17,5.17,0,0,1,.72,10a.2.2,0,0,0,0,.21.23.23,0,0,0,.19.12,4.79,4.79,0,0,0,2.25-.6,6.84,6.84,0,0,0,2.82.6C8.86,10.29,11.22,8.58,11.22,6.48Zm3.1,5.23a3.08,3.08,0,0,0,1-2.19C15.28,7.93,14,6.57,12,6a3.84,3.84,0,0,1,0,.48C12,9,9.3,11.05,6,11.05a7.16,7.16,0,0,1-.8-.05A5.6,5.6,0,0,0,10,13.33a6.7,6.7,0,0,0,2.82-.59,4.66,4.66,0,0,0,2.25.59.21.21,0,0,0,.19-.11.2.2,0,0,0,0-.21,5.15,5.15,0,0,1-.91-1.3Z" })),
|
|
49
58
|
'conversation-outline': () => [
|
|
50
59
|
h("path", { fill: "currentColor", d: "M15 8.5c0 .79-.39 1.51-1.01 2.09v1.91a.508.508 0 0 1-.68.47l-2.26-1.05c-.34.05-.69.08-1.05.08-.23 0-.47-.01-.69-.04-.18 0-.35-.03-.52-.07-.02 0-.03 0-.05-.01-.16-.02-.31-.06-.46-.1-.42-.1-.82-.25-1.18-.43l-.42-.24c-.06-.04-.12-.08-.18-.13.58-.03 1.13-.12 1.64-.27.56.19 1.19.29 1.86.29.29 0 .6-.02.91-.07l.29-.04.28.12 1.5.7v-1.12l.01-.43.31-.3c.32-.29.7-.77.7-1.36 0-.91-.82-1.72-2.01-2.15-.01-.39-.09-.77-.23-1.13.06.02.12.04.19.06.25.08.5.17.73.27.11.05.23.11.34.17.11.06.21.12.31.18.11.07.2.13.3.2.48.35.86.78 1.1 1.26a2.288 2.288 0 0 1 .17.45c.03.11.06.22.07.33.02.12.03.24.03.36Z" }),
|
|
@@ -62,9 +71,10 @@ const icons = {
|
|
|
62
71
|
'download': () => (h("path", { fill: "currentColor", d: "M6.4 2v4.1c0 .2-.1.3-.3.3H4c-.2 0-.3.1-.3.3 0 .1 0 .2.1.2l4 4c.1.1.3.1.4 0l4-4c.1-.1.1-.3 0-.4-.1-.1-.1-.1-.2-.1H9.9c-.2 0-.3-.1-.3-.3V2c0-.2-.1-.3-.3-.3H6.7c-.1 0-.3.1-.3.3zm7.9 11v1c0 .2-.1.3-.3.3H2c-.2 0-.3-.1-.3-.3v-1c0-.2.1-.3.3-.3h12c.2 0 .3.1.3.3z" })),
|
|
63
72
|
'ellipsis': () => (h("path", { fill: "currentColor", d: "M2.5 6.17A1.83 1.83 0 1 0 4.33 8c0-1.01-.82-1.83-1.83-1.83Zm11 0A1.83 1.83 0 1 0 15.33 8c0-1.01-.82-1.83-1.83-1.83Zm-5.5 0A1.83 1.83 0 1 0 9.83 8c0-1.01-.82-1.83-1.83-1.83Z" })),
|
|
64
73
|
'ellipsis-vertical': () => (h("path", { fill: "currentColor", d: "M6.17 13.5A1.83 1.83 0 1 0 8 11.67c-1.01 0-1.83.82-1.83 1.83Zm0-11A1.83 1.83 0 1 0 8 .67c-1.01 0-1.83.82-1.83 1.83Zm0 5.5A1.83 1.83 0 1 0 8 6.17c-1.01 0-1.83.82-1.83 1.83Z" })),
|
|
65
|
-
'euro': () => (h("path", { fill: "currentColor", d: "
|
|
74
|
+
'euro': () => (h("path", { fill: "currentColor", d: "m12.1 11.02 1.4 1.42a5.948 5.948 0 0 1-4 1.56c-2.64 0-4.86-1.68-5.66-4.04H1.5v-1.5h2.02C3.5 8.3 3.5 8.16 3.5 8c0-.18 0-.36.04-.54H1.5v-1.5h2.38C4.7 3.66 6.9 2 9.5 2c1.54 0 2.94.6 4 1.56l-1.4 1.42c-.7-.6-1.6-.98-2.6-.98-1.46 0-2.74.78-3.44 1.96h3.5v1.5H5.54c-.02.18-.04.36-.04.54 0 .16 0 .32.02.46h4.04v1.5H6.02C6.7 11.18 8.02 12 9.5 12c1 0 1.9-.38 2.6-.98Z" })),
|
|
66
75
|
'euro-circle': () => (h("path", { fill: "currentColor", d: "M8 .67C3.95.67.67 3.95.67 8S3.95 15.33 8 15.33s7.33-3.28 7.33-7.33S12.05.67 8 .67Zm2.27 11.4c-.38.09-.76.14-1.15.14a4.038 4.038 0 0 1-3.99-2.92h-.58c-.13 0-.23-.1-.23-.22v-.54c0-.12.11-.22.23-.22h.41a5.34 5.34 0 0 1 0-.8h-.41c-.13 0-.23-.1-.23-.22v-.58c0-.13.11-.22.23-.22h.63c.6-1.65 2.18-2.74 3.94-2.71.34 0 .68.03 1.02.1.12.03.19.16.16.28l-.23.84c-.03.12-.15.19-.27.17-.24-.05-.48-.08-.73-.08A2.42 2.42 0 0 0 6.81 6.5h2.71c.12.03.2.15.17.27l-.13.58c-.02.1-.12.18-.22.18H6.52c-.03.26-.03.53 0 .8h2.63c.12.03.2.15.17.27l-.11.52c-.03.1-.12.18-.22.18H6.8c.36.96 1.28 1.6 2.31 1.61.3 0 .59-.04.88-.1.12-.02.24.05.27.18l.17.84c.02.12-.05.24-.17.27v-.03Z" })),
|
|
67
76
|
'exclamation-circle': () => (h("path", { fill: "currentColor", d: "M8 15.33c4.05 0 7.33-3.28 7.33-7.33S12.05.67 8 .67.67 3.95.67 8 3.95 15.33 8 15.33Zm.95-3.3c0 .15-.12.27-.28.27h-1.4c-.15 0-.28-.12-.28-.27v-1.31c0-.15.12-.28.28-.28h1.4c.15 0 .28.12.28.28v1.31ZM7 3.96c0-.14.11-.25.25-.25H8.7c.14 0 .25.11.25.25v4.8c0 .14-.11.25-.25.25H7.25c-.14 0-.25-.11-.25-.25V3.95Z" })),
|
|
77
|
+
'exclamation-stamp': () => (h("path", { fill: "currentColor", d: "m15 8-1.55-1.86.22-2.46-2.3-.55L10.17 1 8 1.98 5.84 1 4.63 3.13l-2.29.54.22 2.46L1.01 8l1.55 1.86-.22 2.47 2.3.55 1.2 2.13L8 14.03l2.17.98 1.2-2.13 2.3-.55-.22-2.46L15 8.01Zm-6.36 3.35H7.36v-1.34h1.28v1.34Zm0-2.67H7.36V4.67h1.28v4.01Z" })),
|
|
68
78
|
'exclamation-triangle': () => (h("path", { fill: "currentColor", d: "m14.3 13.88-6-12a.32.32 0 0 0-.41-.15.31.31 0 0 0-.15.15l-6 12a.31.31 0 0 0 .14.42.32.32 0 0 0 .14 0H14a.31.31 0 0 0 .33-.29.23.23 0 0 0-.03-.13ZM7 6a.28.28 0 0 1 .28-.28h1.46A.28.28 0 0 1 9 6v4a.29.29 0 0 1-.28.29H7.3A.29.29 0 0 1 7 10Zm2 7a.31.31 0 0 1-.31.32H7.34A.32.32 0 0 1 7 13v-1.37a.31.31 0 0 1 .32-.31h1.39a.31.31 0 0 1 .31.31Z" })),
|
|
69
79
|
'eye': () => [
|
|
70
80
|
h("circle", { fill: "currentColor", cx: "8.01", cy: "7.96", r: "2.44" }),
|
|
@@ -189,24 +199,17 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
189
199
|
super();
|
|
190
200
|
this.__registerHost();
|
|
191
201
|
this.__attachShadow();
|
|
192
|
-
/**
|
|
193
|
-
* Define icon size
|
|
194
|
-
*/
|
|
195
|
-
this.size = 'regular';
|
|
196
|
-
/**
|
|
197
|
-
* Make the icon spin
|
|
198
|
-
*/
|
|
199
|
-
this.spin = false;
|
|
200
|
-
/**
|
|
201
|
-
* Component classes
|
|
202
|
-
*/
|
|
203
|
-
this.classList = new ClassList(['mg-icon']);
|
|
204
202
|
/**
|
|
205
203
|
* getIcon
|
|
206
204
|
*
|
|
207
205
|
* @returns {HTMLElement} icon html
|
|
208
206
|
*/
|
|
209
207
|
this.getIcon = () => icons[this.icon]();
|
|
208
|
+
this.icon = undefined;
|
|
209
|
+
this.size = 'regular';
|
|
210
|
+
this.variant = undefined;
|
|
211
|
+
this.spin = false;
|
|
212
|
+
this.classList = new ClassList(['mg-icon']);
|
|
210
213
|
}
|
|
211
214
|
validateIcon(newValue, oldValue) {
|
|
212
215
|
if (!Object.keys(icons).includes(newValue)) {
|
|
@@ -1,20 +1,14 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { i as isTagName } from './components.utils.js';
|
|
3
3
|
|
|
4
|
-
const mgIllustratedMessageCss = ".mg-illustrated-message{display:flex;flex-direction:column;justify-content:center;gap:3em 7rem;margin:auto;padding:var(--mg-illustrated-message-padding-vertical) 1.5rem;max-width:47.5rem;box-sizing:border-box;text-align:center}.mg-illustrated-message.mg-illustrated-message--horizontal{flex-direction:row;flex-wrap:wrap;align-items:center;max-width:unset}.mg-illustrated-message.mg-illustrated-message--horizontal .mg-illustrated-message__slots,.mg-illustrated-message.mg-illustrated-message--horizontal .mg-illustrated-message__illustration{max-width:47.5rem}.mg-illustrated-message__illustration{max-height:
|
|
4
|
+
const mgIllustratedMessageCss = ".mg-illustrated-message{display:flex;flex-direction:column;justify-content:center;gap:3em 7rem;margin:auto;padding:var(--mg-illustrated-message-padding-vertical) 1.5rem;max-width:47.5rem;box-sizing:border-box;text-align:center}.mg-illustrated-message.mg-illustrated-message--horizontal{flex-direction:row;flex-wrap:wrap;align-items:center;max-width:unset}.mg-illustrated-message.mg-illustrated-message--horizontal .mg-illustrated-message__slots,.mg-illustrated-message.mg-illustrated-message--horizontal .mg-illustrated-message__illustration{max-width:47.5rem}.mg-illustrated-message__illustration{max-height:18.4rem}.mg-illustrated-message__illustration ::slotted([slot=illustration]){width:auto;height:auto;max-width:100%;max-height:18.4rem}.mg-illustrated-message__illustration.mg-illustrated-message__illustration--small{max-height:6rem}.mg-illustrated-message__illustration.mg-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:6rem}.mg-illustrated-message__title ::slotted([slot=title]){margin:0;font-size:2rem !important;font-family:var(--font-family) !important;font-weight:400}.mg-illustrated-message__details ::slotted([slot=details]){margin:2rem 0 0}";
|
|
5
5
|
|
|
6
6
|
const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
8
8
|
super();
|
|
9
9
|
this.__registerHost();
|
|
10
10
|
this.__attachShadow();
|
|
11
|
-
/**
|
|
12
|
-
* Define illustration size
|
|
13
|
-
*/
|
|
14
11
|
this.size = 'regular';
|
|
15
|
-
/**
|
|
16
|
-
* Define component orientation
|
|
17
|
-
*/
|
|
18
12
|
this.direction = 'vertical';
|
|
19
13
|
}
|
|
20
14
|
/*************
|
|
@@ -27,13 +21,14 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
|
|
|
27
21
|
*/
|
|
28
22
|
componentDidLoad() {
|
|
29
23
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
30
|
-
const
|
|
24
|
+
const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
|
|
31
25
|
if (!isTagName(this.element.querySelector('[slot="title"]'), headingTags)) {
|
|
32
26
|
throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
|
|
33
27
|
}
|
|
34
|
-
else if (
|
|
35
|
-
throw new Error(
|
|
28
|
+
else if (slottedIllustrations.length !== 1) {
|
|
29
|
+
throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');
|
|
36
30
|
}
|
|
31
|
+
slottedIllustrations[0].setAttribute('aria-hidden', 'true');
|
|
37
32
|
}
|
|
38
33
|
/**
|
|
39
34
|
* Render
|
|
@@ -29,39 +29,6 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
|
|
|
29
29
|
this.inputs = [];
|
|
30
30
|
// hasDisplayedError (triggered by blur event)
|
|
31
31
|
this.hasDisplayedError = false;
|
|
32
|
-
/**
|
|
33
|
-
* Input name
|
|
34
|
-
* If not set the value equals the identifier
|
|
35
|
-
*/
|
|
36
|
-
this.name = this.identifier;
|
|
37
|
-
/**
|
|
38
|
-
* Define if label is visible
|
|
39
|
-
*/
|
|
40
|
-
this.labelHide = false;
|
|
41
|
-
/**
|
|
42
|
-
* Define if inputs are display verticaly
|
|
43
|
-
*/
|
|
44
|
-
this.inputVerticalList = false;
|
|
45
|
-
/**
|
|
46
|
-
* Define if input is required
|
|
47
|
-
*/
|
|
48
|
-
this.required = false;
|
|
49
|
-
/**
|
|
50
|
-
* Define if input is readonly
|
|
51
|
-
*/
|
|
52
|
-
this.readonly = false;
|
|
53
|
-
/**
|
|
54
|
-
* Define if input is disabled
|
|
55
|
-
*/
|
|
56
|
-
this.disabled = false;
|
|
57
|
-
/**
|
|
58
|
-
* Component classes
|
|
59
|
-
*/
|
|
60
|
-
this.classList = new ClassList(['mg-input--checkbox']);
|
|
61
|
-
/**
|
|
62
|
-
* Formated value for display
|
|
63
|
-
*/
|
|
64
|
-
this.checkboxItems = [];
|
|
65
32
|
/**
|
|
66
33
|
* Handle input event
|
|
67
34
|
*
|
|
@@ -111,6 +78,23 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
|
|
|
111
78
|
this.errorMessage = this.messages.errors.required;
|
|
112
79
|
}
|
|
113
80
|
};
|
|
81
|
+
this.value = undefined;
|
|
82
|
+
this.identifier = undefined;
|
|
83
|
+
this.name = this.identifier;
|
|
84
|
+
this.label = undefined;
|
|
85
|
+
this.labelOnTop = undefined;
|
|
86
|
+
this.labelHide = false;
|
|
87
|
+
this.inputVerticalList = false;
|
|
88
|
+
this.required = false;
|
|
89
|
+
this.readonly = false;
|
|
90
|
+
this.disabled = false;
|
|
91
|
+
this.tooltip = undefined;
|
|
92
|
+
this.helpText = undefined;
|
|
93
|
+
this.valid = undefined;
|
|
94
|
+
this.invalid = undefined;
|
|
95
|
+
this.classList = new ClassList(['mg-input--checkbox']);
|
|
96
|
+
this.errorMessage = undefined;
|
|
97
|
+
this.checkboxItems = [];
|
|
114
98
|
}
|
|
115
99
|
validateValue(newValue) {
|
|
116
100
|
if (newValue && newValue.every(item => isCheckboxItem(item))) {
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { M as MgInput } from './MgInput.js';
|
|
3
3
|
import { C as ClassList } from './components.utils.js';
|
|
4
|
-
import { l as localeDate, d as dateRegExp } from './
|
|
5
|
-
import { i as initLocales } from './index2.js';
|
|
4
|
+
import { l as localeDate, d as dateRegExp, i as initLocales } from './index2.js';
|
|
6
5
|
import { d as defineCustomElement$4 } from './mg-icon2.js';
|
|
7
6
|
import { d as defineCustomElement$3 } from './mg-input-title2.js';
|
|
8
7
|
import { d as defineCustomElement$2 } from './mg-tooltip2.js';
|
|
@@ -15,7 +14,7 @@ var InputError;
|
|
|
15
14
|
InputError["REQUIRED"] = "required";
|
|
16
15
|
})(InputError || (InputError = {}));
|
|
17
16
|
|
|
18
|
-
const mgInputDateCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem
|
|
17
|
+
const mgInputDateCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}";
|
|
19
18
|
|
|
20
19
|
const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
21
20
|
constructor() {
|
|
@@ -26,31 +25,6 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
26
25
|
this.inputValid = createEvent(this, "input-valid", 7);
|
|
27
26
|
// hasDisplayedError (triggered by blur event)
|
|
28
27
|
this.hasDisplayedError = false;
|
|
29
|
-
/**
|
|
30
|
-
* Input name
|
|
31
|
-
* If not set the value equals the identifier
|
|
32
|
-
*/
|
|
33
|
-
this.name = this.identifier;
|
|
34
|
-
/**
|
|
35
|
-
* Define if label is visible
|
|
36
|
-
*/
|
|
37
|
-
this.labelHide = false;
|
|
38
|
-
/**
|
|
39
|
-
* Define if input is required
|
|
40
|
-
*/
|
|
41
|
-
this.required = false;
|
|
42
|
-
/**
|
|
43
|
-
* Define if input is readonly
|
|
44
|
-
*/
|
|
45
|
-
this.readonly = false;
|
|
46
|
-
/**
|
|
47
|
-
* Define if input is disabled
|
|
48
|
-
*/
|
|
49
|
-
this.disabled = false;
|
|
50
|
-
/**
|
|
51
|
-
* Component classes
|
|
52
|
-
*/
|
|
53
|
-
this.classList = new ClassList(['mg-input--date']);
|
|
54
28
|
/**
|
|
55
29
|
* Handle input event
|
|
56
30
|
*/
|
|
@@ -129,13 +103,33 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
129
103
|
}
|
|
130
104
|
}
|
|
131
105
|
};
|
|
106
|
+
this.value = undefined;
|
|
107
|
+
this.identifier = undefined;
|
|
108
|
+
this.name = this.identifier;
|
|
109
|
+
this.label = undefined;
|
|
110
|
+
this.labelOnTop = undefined;
|
|
111
|
+
this.labelHide = false;
|
|
112
|
+
this.required = false;
|
|
113
|
+
this.readonly = false;
|
|
114
|
+
this.disabled = false;
|
|
115
|
+
this.tooltip = undefined;
|
|
116
|
+
this.helpText = undefined;
|
|
117
|
+
this.valid = undefined;
|
|
118
|
+
this.invalid = undefined;
|
|
119
|
+
this.min = undefined;
|
|
120
|
+
this.max = undefined;
|
|
121
|
+
this.classList = new ClassList(['mg-input--date']);
|
|
122
|
+
this.errorMessage = undefined;
|
|
132
123
|
}
|
|
133
124
|
validateValue(newValue) {
|
|
125
|
+
// When the input is not fully completed or has been cleared, the value becomes an empty string.
|
|
126
|
+
if (newValue === '')
|
|
127
|
+
newValue = null;
|
|
134
128
|
if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' || !dateRegExp.test(newValue))) {
|
|
135
129
|
throw new Error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
|
|
136
130
|
}
|
|
137
131
|
else {
|
|
138
|
-
this.valueChange.emit(
|
|
132
|
+
this.valueChange.emit(newValue);
|
|
139
133
|
}
|
|
140
134
|
}
|
|
141
135
|
handleValidityChange(newValue, _oldValue, prop) {
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { M as MgInput } from './MgInput.js';
|
|
3
3
|
import { C as ClassList } from './components.utils.js';
|
|
4
|
-
import { i as initLocales } from './index2.js';
|
|
5
|
-
import { a as localeCurrency, b as localeNumber } from './locale.utils.js';
|
|
4
|
+
import { a as localeCurrency, b as localeNumber, i as initLocales } from './index2.js';
|
|
6
5
|
import { d as defineCustomElement$4 } from './mg-icon2.js';
|
|
7
6
|
import { d as defineCustomElement$3 } from './mg-input-title2.js';
|
|
8
7
|
import { d as defineCustomElement$2 } from './mg-tooltip2.js';
|
|
@@ -19,7 +18,7 @@ var InputError;
|
|
|
19
18
|
InputError["REQUIRED"] = "required";
|
|
20
19
|
})(InputError || (InputError = {}));
|
|
21
20
|
|
|
22
|
-
const mgInputNumericCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem
|
|
21
|
+
const mgInputNumericCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-input .mg-input__box{text-align:var(--mg-inputs-text-align, right)}";
|
|
23
22
|
|
|
24
23
|
const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
25
24
|
constructor() {
|
|
@@ -30,53 +29,6 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
30
29
|
this.inputValid = createEvent(this, "input-valid", 7);
|
|
31
30
|
// hasDisplayedError (triggered by blur event)
|
|
32
31
|
this.hasDisplayedError = false;
|
|
33
|
-
/**
|
|
34
|
-
* Input name
|
|
35
|
-
* If not set the value equals the identifier
|
|
36
|
-
*/
|
|
37
|
-
this.name = this.identifier;
|
|
38
|
-
/**
|
|
39
|
-
* Define if label is visible
|
|
40
|
-
*/
|
|
41
|
-
this.labelHide = false;
|
|
42
|
-
/**
|
|
43
|
-
* Define if input is required
|
|
44
|
-
*/
|
|
45
|
-
this.required = false;
|
|
46
|
-
/**
|
|
47
|
-
* Define if input is readonly
|
|
48
|
-
*/
|
|
49
|
-
this.readonly = false;
|
|
50
|
-
/**
|
|
51
|
-
* Define if input is disabled
|
|
52
|
-
*/
|
|
53
|
-
this.disabled = false;
|
|
54
|
-
/**
|
|
55
|
-
* Define numeric type
|
|
56
|
-
*/
|
|
57
|
-
this.type = types[0];
|
|
58
|
-
/**
|
|
59
|
-
* Define currency
|
|
60
|
-
*/
|
|
61
|
-
this.currency = 'USD';
|
|
62
|
-
/**
|
|
63
|
-
* Override integer length
|
|
64
|
-
* integer is the number before the decimal point
|
|
65
|
-
*/
|
|
66
|
-
this.integerLength = 13;
|
|
67
|
-
/**
|
|
68
|
-
* Override decimal length
|
|
69
|
-
* decimal is the number after the decimal point
|
|
70
|
-
*/
|
|
71
|
-
this.decimalLength = 2;
|
|
72
|
-
/**
|
|
73
|
-
* Component classes
|
|
74
|
-
*/
|
|
75
|
-
this.classList = new ClassList(['mg-input--numeric']);
|
|
76
|
-
/**
|
|
77
|
-
* Define if input has focus
|
|
78
|
-
*/
|
|
79
|
-
this.hasFocus = false;
|
|
80
32
|
/**
|
|
81
33
|
* Handle input event
|
|
82
34
|
*
|
|
@@ -183,6 +135,30 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
183
135
|
this.classList.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-input--is-input-group-append' : 'mg-input--is-append-input-slot-content');
|
|
184
136
|
}
|
|
185
137
|
};
|
|
138
|
+
this.value = undefined;
|
|
139
|
+
this.identifier = undefined;
|
|
140
|
+
this.name = this.identifier;
|
|
141
|
+
this.label = undefined;
|
|
142
|
+
this.labelOnTop = undefined;
|
|
143
|
+
this.labelHide = false;
|
|
144
|
+
this.placeholder = undefined;
|
|
145
|
+
this.required = false;
|
|
146
|
+
this.readonly = false;
|
|
147
|
+
this.disabled = false;
|
|
148
|
+
this.mgWidth = undefined;
|
|
149
|
+
this.tooltip = undefined;
|
|
150
|
+
this.helpText = undefined;
|
|
151
|
+
this.type = types[0];
|
|
152
|
+
this.currency = 'USD';
|
|
153
|
+
this.max = undefined;
|
|
154
|
+
this.min = undefined;
|
|
155
|
+
this.integerLength = 13;
|
|
156
|
+
this.decimalLength = 2;
|
|
157
|
+
this.valid = undefined;
|
|
158
|
+
this.invalid = undefined;
|
|
159
|
+
this.classList = new ClassList(['mg-input--numeric']);
|
|
160
|
+
this.errorMessage = undefined;
|
|
161
|
+
this.hasFocus = false;
|
|
186
162
|
}
|
|
187
163
|
validateValue(newValue) {
|
|
188
164
|
if (newValue !== undefined && newValue !== null) {
|
|
@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './mg-icon2.js';
|
|
|
6
6
|
import { d as defineCustomElement$3 } from './mg-input-title2.js';
|
|
7
7
|
import { d as defineCustomElement$2 } from './mg-tooltip2.js';
|
|
8
8
|
|
|
9
|
-
const mgInputPasswordCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem
|
|
9
|
+
const mgInputPasswordCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}";
|
|
10
10
|
|
|
11
11
|
const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
12
12
|
constructor() {
|
|
@@ -17,35 +17,6 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
|
|
|
17
17
|
this.inputValid = createEvent(this, "input-valid", 7);
|
|
18
18
|
// hasDisplayedError (triggered by blur event)
|
|
19
19
|
this.hasDisplayedError = false;
|
|
20
|
-
/**
|
|
21
|
-
* Input name
|
|
22
|
-
* If not set the value equals the identifier
|
|
23
|
-
*/
|
|
24
|
-
this.name = this.identifier;
|
|
25
|
-
/**
|
|
26
|
-
* Define if label is visible
|
|
27
|
-
*/
|
|
28
|
-
this.labelHide = false;
|
|
29
|
-
/**
|
|
30
|
-
* Define if input is required
|
|
31
|
-
*/
|
|
32
|
-
this.required = false;
|
|
33
|
-
/**
|
|
34
|
-
* Define if input is readonly
|
|
35
|
-
*/
|
|
36
|
-
this.readonly = false;
|
|
37
|
-
/**
|
|
38
|
-
* Define if input is disabled
|
|
39
|
-
*/
|
|
40
|
-
this.disabled = false;
|
|
41
|
-
/**
|
|
42
|
-
* Define input width
|
|
43
|
-
*/
|
|
44
|
-
this.mgWidth = 'full';
|
|
45
|
-
/**
|
|
46
|
-
* Component classes
|
|
47
|
-
*/
|
|
48
|
-
this.classList = new ClassList(['mg-input--password']);
|
|
49
20
|
/**
|
|
50
21
|
* Handle input event
|
|
51
22
|
*/
|
|
@@ -83,6 +54,23 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
|
|
|
83
54
|
this.errorMessage = this.messages.errors.required;
|
|
84
55
|
}
|
|
85
56
|
};
|
|
57
|
+
this.value = undefined;
|
|
58
|
+
this.identifier = undefined;
|
|
59
|
+
this.name = this.identifier;
|
|
60
|
+
this.label = undefined;
|
|
61
|
+
this.labelOnTop = undefined;
|
|
62
|
+
this.labelHide = false;
|
|
63
|
+
this.placeholder = undefined;
|
|
64
|
+
this.required = false;
|
|
65
|
+
this.readonly = false;
|
|
66
|
+
this.disabled = false;
|
|
67
|
+
this.mgWidth = 'full';
|
|
68
|
+
this.tooltip = undefined;
|
|
69
|
+
this.helpText = undefined;
|
|
70
|
+
this.valid = undefined;
|
|
71
|
+
this.invalid = undefined;
|
|
72
|
+
this.classList = new ClassList(['mg-input--password']);
|
|
73
|
+
this.errorMessage = undefined;
|
|
86
74
|
}
|
|
87
75
|
handleValue(newValue) {
|
|
88
76
|
this.valueChange.emit(newValue);
|
|
@@ -29,39 +29,6 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
|
|
|
29
29
|
this.inputs = [];
|
|
30
30
|
// hasDisplayedError (triggered by blur event)
|
|
31
31
|
this.hasDisplayedError = false;
|
|
32
|
-
/**
|
|
33
|
-
* Input name
|
|
34
|
-
* If not set the value equals the identifier
|
|
35
|
-
*/
|
|
36
|
-
this.name = this.identifier;
|
|
37
|
-
/**
|
|
38
|
-
* Define if label is displayed on top
|
|
39
|
-
*/
|
|
40
|
-
this.labelOnTop = false;
|
|
41
|
-
/**
|
|
42
|
-
* Define if label is visible
|
|
43
|
-
*/
|
|
44
|
-
this.labelHide = false;
|
|
45
|
-
/**
|
|
46
|
-
* Define if inputs are display verticaly
|
|
47
|
-
*/
|
|
48
|
-
this.inputVerticalList = false;
|
|
49
|
-
/**
|
|
50
|
-
* Define if input is required
|
|
51
|
-
*/
|
|
52
|
-
this.required = false;
|
|
53
|
-
/**
|
|
54
|
-
* Define if input is readonly
|
|
55
|
-
*/
|
|
56
|
-
this.readonly = false;
|
|
57
|
-
/**
|
|
58
|
-
* Define if input is disabled
|
|
59
|
-
*/
|
|
60
|
-
this.disabled = false;
|
|
61
|
-
/**
|
|
62
|
-
* Component classes
|
|
63
|
-
*/
|
|
64
|
-
this.classList = new ClassList(['mg-input--radio']);
|
|
65
32
|
/**
|
|
66
33
|
* Handle input event
|
|
67
34
|
*
|
|
@@ -111,6 +78,24 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
|
|
|
111
78
|
* @returns {HTMLInputElement} element
|
|
112
79
|
*/
|
|
113
80
|
this.getInvalidElement = () => this.inputs.find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
|
|
81
|
+
this.value = undefined;
|
|
82
|
+
this.items = undefined;
|
|
83
|
+
this.identifier = undefined;
|
|
84
|
+
this.name = this.identifier;
|
|
85
|
+
this.label = undefined;
|
|
86
|
+
this.labelOnTop = false;
|
|
87
|
+
this.labelHide = false;
|
|
88
|
+
this.inputVerticalList = false;
|
|
89
|
+
this.required = false;
|
|
90
|
+
this.readonly = false;
|
|
91
|
+
this.disabled = false;
|
|
92
|
+
this.tooltip = undefined;
|
|
93
|
+
this.helpText = undefined;
|
|
94
|
+
this.valid = undefined;
|
|
95
|
+
this.invalid = undefined;
|
|
96
|
+
this.classList = new ClassList(['mg-input--radio']);
|
|
97
|
+
this.errorMessage = undefined;
|
|
98
|
+
this.options = undefined;
|
|
114
99
|
}
|
|
115
100
|
handleValue(newValue) {
|
|
116
101
|
this.valueChange.emit(newValue);
|