@mgdis/mg-components 3.3.0 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-bead7dbd.js → index-88560a66.js} +47 -48
- package/dist/cjs/{index-369388eb.js → index-a39c5567.js} +97 -10
- package/dist/cjs/loader.cjs.js +3 -17
- package/dist/cjs/mg-badge_21.cjs.entry.js +461 -281
- package/dist/cjs/mg-components.cjs.js +3 -7
- package/dist/cjs/mg-modal.cjs.entry.js +12 -6
- package/dist/cjs/mg-popover.cjs.entry.js +15 -6
- package/dist/cjs/{popper-0c3964e7.js → popper-71bf3058.js} +6 -2
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/atoms/mg-badge/{mg-badge.stories.js → doc/mg-badge.stories.js} +1 -1
- package/dist/collection/components/atoms/mg-badge/mg-badge.css +0 -2
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +15 -3
- package/dist/collection/components/atoms/mg-button/{mg-button.stories.js → doc/mg-button.stories.js} +2 -2
- package/dist/collection/components/atoms/mg-button/mg-button.css +6 -30
- package/dist/collection/components/atoms/mg-button/mg-button.js +7 -2
- package/dist/collection/components/atoms/mg-character-left/{mg-character-left.stories.js → doc/mg-character-left.stories.js} +1 -1
- package/dist/collection/components/atoms/mg-character-left/mg-character-left.js +10 -47
- package/dist/collection/components/atoms/mg-icon/{mg-icon.stories.js → doc/mg-icon.stories.js} +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.conf.js +86 -10
- package/dist/collection/components/atoms/mg-icon/mg-icon.css +4 -0
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +22 -6
- package/dist/collection/components/atoms/mg-input-title/{mg-input-title.stories.js → doc/mg-input-title.stories.js} +0 -0
- package/dist/collection/components/atoms/mg-tag/{mg-tag.stories.js → doc/mg-tag.stories.js} +1 -1
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +19 -4
- package/dist/collection/components/atoms/mg-tooltip/{mg-tooltip.stories.js → doc/mg-tooltip.stories.js} +14 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.conf.js +20 -0
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +7 -2
- package/dist/collection/components/molecules/inputs/MgInput.conf.js +1 -7
- package/dist/collection/components/molecules/inputs/MgInput.js +5 -15
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/{mg-input-checkbox.stories.js → doc/mg-input-checkbox.stories.js} +0 -0
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.css +19 -13
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +8 -21
- package/dist/collection/components/molecules/inputs/mg-input-date/{mg-input-date.stories.js → doc/mg-input-date.stories.js} +0 -0
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.css +19 -18
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +19 -18
- package/dist/collection/components/molecules/inputs/mg-input-numeric/{mg-input-numeric.stories.js → doc/mg-input-numeric.stories.js} +9 -2
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.css +20 -19
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +43 -19
- package/dist/collection/components/molecules/inputs/mg-input-password/{mg-input-password.stories.js → doc/mg-input-password.stories.js} +10 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.css +19 -18
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +17 -22
- package/dist/collection/components/molecules/inputs/mg-input-radio/{mg-input-radio.stories.js → doc/mg-input-radio.stories.js} +0 -0
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.css +19 -13
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +8 -15
- package/dist/collection/components/molecules/inputs/mg-input-select/{mg-input-select.stories.js → doc/mg-input-select.stories.js} +10 -3
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.css +20 -18
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +24 -31
- package/dist/collection/components/molecules/inputs/mg-input-text/{mg-input-text.stories.js → doc/mg-input-text.stories.js} +11 -7
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.css +51 -28
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +42 -43
- package/dist/collection/components/molecules/inputs/mg-input-textarea/{mg-input-textarea.stories.js → doc/mg-input-textarea.stories.js} +10 -4
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.css +51 -22
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +64 -37
- package/dist/collection/components/molecules/inputs/mg-input-toggle/{mg-input-toggle.stories.js → doc/mg-input-toggle.stories.js} +0 -0
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.css +18 -9
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +9 -3
- package/dist/collection/components/molecules/mg-form/{mg-form.stories.js → doc/mg-form.stories.js} +0 -0
- package/dist/collection/components/molecules/mg-form/mg-form.css +4 -0
- package/dist/collection/components/molecules/mg-form/mg-form.js +5 -3
- package/dist/collection/components/molecules/mg-message/{mg-message.stories.js → doc/mg-message.stories.js} +1 -1
- package/dist/collection/components/molecules/mg-message/mg-message.js +15 -7
- package/dist/collection/components/molecules/mg-modal/{mg-modal.stories.js → doc/mg-modal.stories.js} +0 -0
- package/dist/collection/components/molecules/mg-modal/mg-modal.css +5 -7
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +10 -4
- package/dist/collection/components/molecules/mg-pagination/{mg-pagination.stories.js → doc/mg-pagination.stories.js} +0 -0
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +17 -18
- package/dist/collection/components/molecules/mg-panel/{mg-panel.stories.js → doc/mg-panel.stories.js} +0 -0
- package/dist/collection/components/molecules/mg-panel/mg-panel.css +5 -1
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +10 -9
- package/dist/collection/components/molecules/mg-popover/{mg-popover.stories.js → doc/mg-popover.stories.js} +10 -0
- package/dist/collection/components/molecules/mg-popover/mg-popover.conf.js +20 -0
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +19 -5
- package/dist/collection/components/molecules/mg-tabs/{mg-tabs.stories.js → doc/mg-tabs.stories.js} +11 -5
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.conf.js +7 -0
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.css +3 -0
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +72 -26
- package/dist/collection/locales/index.js +33 -4
- package/dist/collection/stories/helpers.stories.js +33 -0
- package/dist/collection/utils/locale.utils.js +7 -4
- package/dist/collection/variables.css +10 -5
- package/dist/collection/variables.scss +10 -5
- package/dist/components/MgInput.js +6 -23
- package/dist/components/index.d.ts +23 -5
- package/dist/components/index.js +23 -0
- package/dist/components/index2.js +97 -8
- package/dist/components/locale.utils.js +7 -5
- package/dist/components/mg-badge2.js +16 -4
- package/dist/components/mg-button2.js +8 -3
- package/dist/components/mg-character-left2.js +4 -27
- package/dist/components/mg-form.js +6 -4
- package/dist/components/mg-icon2.js +109 -17
- package/dist/components/mg-input-checkbox.js +11 -27
- package/dist/components/mg-input-date.js +21 -25
- package/dist/components/mg-input-numeric.js +28 -26
- package/dist/components/mg-input-password.js +18 -28
- package/dist/components/mg-input-radio.js +10 -22
- package/dist/components/mg-input-select2.js +24 -35
- package/dist/components/mg-input-text2.js +38 -26
- package/dist/components/mg-input-textarea.js +43 -20
- package/dist/components/mg-input-toggle.js +11 -11
- package/dist/components/mg-message.js +16 -8
- package/dist/components/mg-modal.js +11 -5
- package/dist/components/mg-pagination.js +16 -22
- package/dist/components/mg-panel.js +8 -7
- package/dist/components/mg-popover.js +13 -4
- package/dist/components/mg-tabs.js +75 -21
- package/dist/components/mg-tag.js +20 -5
- package/dist/components/mg-tooltip2.js +1 -1
- package/dist/components/popper.js +6 -2
- package/dist/esm/{index-9e877561.js → index-bca81100.js} +48 -46
- package/dist/esm/{index-c346f52d.js → index-e51ae032.js} +97 -8
- package/dist/esm/loader.js +3 -17
- package/dist/esm/mg-badge_21.entry.js +458 -278
- package/dist/esm/mg-components.js +3 -7
- package/dist/esm/mg-modal.entry.js +12 -6
- package/dist/esm/mg-popover.entry.js +15 -6
- package/dist/esm/{popper-8874fd6c.js → popper-93ecb064.js} +6 -2
- package/dist/index.js +1 -1
- package/dist/mg-components/mg-components.css +1 -1
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/p-003a1344.entry.js +1 -0
- package/dist/mg-components/p-462d648a.entry.js +1 -0
- package/dist/mg-components/p-4c66f794.js +1 -0
- package/dist/mg-components/p-5126ab10.entry.js +1 -0
- package/dist/mg-components/p-780bd52d.js +1 -0
- package/dist/mg-components/p-b14a3443.js +2 -0
- package/dist/mg-components/variables.css +10 -5
- package/dist/mg-components/variables.scss +10 -5
- package/dist/types/components/atoms/mg-badge/{mg-badge.stories.d.ts → doc/mg-badge.stories.d.ts} +0 -0
- package/dist/types/components/atoms/mg-badge/mg-badge.d.ts +8 -1
- package/dist/types/components/atoms/mg-button/{mg-button.stories.d.ts → doc/mg-button.stories.d.ts} +0 -0
- package/dist/types/components/atoms/mg-button/mg-button.d.ts +1 -1
- package/dist/types/components/atoms/mg-character-left/{mg-character-left.stories.d.ts → doc/mg-character-left.stories.d.ts} +0 -0
- package/dist/types/components/atoms/mg-character-left/mg-character-left.d.ts +5 -13
- package/dist/types/components/atoms/mg-icon/{mg-icon.stories.d.ts → doc/mg-icon.stories.d.ts} +0 -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.stories.d.ts → doc/mg-input-title.stories.d.ts} +0 -0
- package/dist/types/components/atoms/mg-tag/{mg-tag.stories.d.ts → doc/mg-tag.stories.d.ts} +0 -0
- package/dist/types/components/atoms/mg-tag/mg-tag.d.ts +8 -1
- package/dist/types/components/atoms/mg-tooltip/doc/mg-tooltip.stories.d.ts +29 -0
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.conf.d.ts +8 -0
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts +2 -1
- package/dist/types/components/molecules/inputs/MgInput.conf.d.ts +0 -6
- package/dist/types/components/molecules/inputs/MgInput.d.ts +2 -4
- package/dist/types/components/molecules/inputs/mg-input-checkbox/{mg-input-checkbox.stories.d.ts → doc/mg-input-checkbox.stories.d.ts} +0 -0
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +5 -2
- package/dist/types/components/molecules/inputs/mg-input-date/{mg-input-date.stories.d.ts → doc/mg-input-date.stories.d.ts} +0 -0
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts +7 -1
- package/dist/types/components/molecules/inputs/mg-input-numeric/{mg-input-numeric.stories.d.ts → doc/mg-input-numeric.stories.d.ts} +6 -0
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +8 -2
- package/dist/types/components/molecules/inputs/mg-input-password/{mg-input-password.stories.d.ts → doc/mg-input-password.stories.d.ts} +8 -0
- package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts +7 -2
- package/dist/types/components/molecules/inputs/mg-input-radio/{mg-input-radio.stories.d.ts → doc/mg-input-radio.stories.d.ts} +0 -0
- package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts +5 -1
- package/dist/types/components/molecules/inputs/mg-input-select/{mg-input-select.stories.d.ts → doc/mg-input-select.stories.d.ts} +11 -5
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +7 -2
- package/dist/types/components/molecules/inputs/mg-input-text/{mg-input-text.stories.d.ts → doc/mg-input-text.stories.d.ts} +8 -0
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +7 -7
- package/dist/types/components/molecules/inputs/mg-input-textarea/{mg-input-textarea.stories.d.ts → doc/mg-input-textarea.stories.d.ts} +8 -0
- package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +14 -6
- package/dist/types/components/molecules/inputs/mg-input-toggle/{mg-input-toggle.stories.d.ts → doc/mg-input-toggle.stories.d.ts} +0 -0
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +2 -0
- package/dist/types/components/molecules/mg-form/{mg-form.stories.d.ts → doc/mg-form.stories.d.ts} +0 -0
- package/dist/types/components/molecules/mg-form/mg-form.d.ts +1 -0
- package/dist/types/components/molecules/mg-message/{mg-message.stories.d.ts → doc/mg-message.stories.d.ts} +0 -0
- package/dist/types/components/molecules/mg-message/mg-message.d.ts +2 -0
- package/dist/types/components/molecules/mg-modal/{mg-modal.stories.d.ts → doc/mg-modal.stories.d.ts} +0 -0
- package/dist/types/components/molecules/mg-modal/mg-modal.d.ts +2 -0
- package/dist/types/components/molecules/mg-pagination/{mg-pagination.stories.d.ts → doc/mg-pagination.stories.d.ts} +0 -0
- package/dist/types/components/molecules/mg-pagination/mg-pagination.d.ts +8 -0
- package/dist/types/components/molecules/mg-panel/{mg-panel.stories.d.ts → doc/mg-panel.stories.d.ts} +0 -0
- package/dist/types/components/molecules/mg-panel/mg-panel.d.ts +5 -0
- package/dist/types/components/molecules/mg-popover/doc/mg-popover.stories.d.ts +25 -0
- package/dist/types/components/molecules/mg-popover/mg-popover.conf.d.ts +8 -0
- package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +9 -1
- package/dist/types/components/molecules/mg-tabs/{mg-tabs.stories.d.ts → doc/mg-tabs.stories.d.ts} +0 -0
- package/dist/types/components/molecules/mg-tabs/mg-tabs.conf.d.ts +7 -1
- package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts +44 -0
- package/dist/types/components.d.ts +149 -151
- package/dist/types/locales/index.d.ts +109 -46
- package/dist/types/stories/{buttons.stories.d.ts → helpers.stories.d.ts} +1 -1
- package/dist/types/utils/locale.utils.d.ts +7 -3
- package/loader/index.js +1 -1
- package/package.json +41 -14
- package/readme.md +6 -35
- package/dist/cjs/css-shim-629916b0.js +0 -6
- package/dist/cjs/shadow-css-546083ef.js +0 -390
- package/dist/collection/stories/buttons.stories.js +0 -43
- package/dist/collection/stories/messages.stories.js +0 -44
- package/dist/collection/stories/tags.stories.js +0 -13
- package/dist/esm/css-shim-0993aa3b.js +0 -4
- package/dist/esm/shadow-css-dfa0587f.js +0 -388
- package/dist/esm-es5/css-shim-0993aa3b.js +0 -1
- package/dist/esm-es5/index-9e877561.js +0 -1
- package/dist/esm-es5/index-c346f52d.js +0 -1
- package/dist/esm-es5/index.js +0 -0
- package/dist/esm-es5/loader.js +0 -1
- package/dist/esm-es5/mg-badge_21.entry.js +0 -2
- package/dist/esm-es5/mg-components.js +0 -1
- package/dist/esm-es5/mg-modal.entry.js +0 -1
- package/dist/esm-es5/mg-popover.entry.js +0 -1
- package/dist/esm-es5/popper-8874fd6c.js +0 -1
- package/dist/esm-es5/shadow-css-dfa0587f.js +0 -12
- package/dist/mg-components/mg-components.js +0 -132
- package/dist/mg-components/p-136c8d6f.system.entry.js +0 -2
- package/dist/mg-components/p-3c14153d.js +0 -1
- package/dist/mg-components/p-50ea2036.system.js +0 -1
- package/dist/mg-components/p-55a22b35.system.js +0 -1
- package/dist/mg-components/p-5e796581.js +0 -12
- package/dist/mg-components/p-656b5efb.system.js +0 -1
- package/dist/mg-components/p-68d6f104.js +0 -1
- package/dist/mg-components/p-6d49ed95.js +0 -1
- package/dist/mg-components/p-6f173f62.system.entry.js +0 -1
- package/dist/mg-components/p-70177194.entry.js +0 -1
- package/dist/mg-components/p-8b2d8a2a.system.js +0 -13
- package/dist/mg-components/p-8cb61c3f.system.js +0 -1
- package/dist/mg-components/p-ace173b1.js +0 -1
- package/dist/mg-components/p-b7488a4c.entry.js +0 -1
- package/dist/mg-components/p-c1ffb2e1.entry.js +0 -1
- package/dist/mg-components/p-c90cc4bf.system.js +0 -1
- package/dist/mg-components/p-de1164fa.system.entry.js +0 -1
- package/dist/mg-components/p-e4a502b5.system.js +0 -1
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.stories.d.ts +0 -11
- package/dist/types/components/molecules/mg-popover/mg-popover.stories.d.ts +0 -12
- package/dist/types/stories/messages.stories.d.ts +0 -13
- package/dist/types/stories/tags.stories.d.ts +0 -5
|
@@ -1,17 +1,22 @@
|
|
|
1
|
-
import { r as registerInstance, h, g as getElement, c as createEvent, H as Host } from './index-
|
|
2
|
-
import { C as ClassList, c as createID,
|
|
3
|
-
import { c as createPopper } from './popper-
|
|
1
|
+
import { r as registerInstance, h, g as getElement, c as createEvent, H as Host } from './index-bca81100.js';
|
|
2
|
+
import { C as ClassList, c as createID, i as initLocales, a as allItemsAreString } from './index-e51ae032.js';
|
|
3
|
+
import { c as createPopper } from './popper-93ecb064.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* List of all possibles variants
|
|
7
7
|
*/
|
|
8
8
|
const variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger'];
|
|
9
9
|
|
|
10
|
-
const mgBadgeCss = ".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}.mg-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size)
|
|
10
|
+
const mgBadgeCss = ".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}.mg-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size);box-sizing:border-box;border:0.1rem solid;border-radius:calc(var(--mg-badge-size) / 2);font-size:var(--mg-badge-font-size);font-weight:600;text-align:center;line-height:var(--mg-badge-size)}.mg-badge.mg-badge--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-badge.mg-badge--primary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-badge.mg-badge--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-badge.mg-badge--success.mg-badge--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-badge.mg-badge--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-badge.mg-badge--warning.mg-badge--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-badge.mg-badge--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-badge.mg-badge--danger.mg-badge--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-badge.mg-badge--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-badge.mg-badge--info.mg-badge--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
|
|
11
11
|
|
|
12
12
|
const MgBadge = class {
|
|
13
13
|
constructor(hostRef) {
|
|
14
14
|
registerInstance(this, hostRef);
|
|
15
|
+
/************
|
|
16
|
+
* Internal *
|
|
17
|
+
************/
|
|
18
|
+
// classes
|
|
19
|
+
this.classOutline = `mg-badge--outline`;
|
|
15
20
|
/**
|
|
16
21
|
* Define button variant
|
|
17
22
|
*/
|
|
@@ -26,15 +31,22 @@ const MgBadge = class {
|
|
|
26
31
|
throw new Error('<mg-badge> prop "value" must be interger or ponctuation character.');
|
|
27
32
|
}
|
|
28
33
|
}
|
|
29
|
-
validateVariant(newValue) {
|
|
34
|
+
validateVariant(newValue, oldValue) {
|
|
30
35
|
if (!variants$4.includes(newValue)) {
|
|
31
36
|
throw new Error(`<mg-badge> prop "variant" must be one of : ${variants$4.join(', ')}.`);
|
|
32
37
|
}
|
|
33
|
-
|
|
38
|
+
else {
|
|
39
|
+
if (oldValue !== undefined) {
|
|
40
|
+
this.classList.delete(`mg-badge--${oldValue}`);
|
|
41
|
+
}
|
|
42
|
+
this.classList.add(`mg-badge--${newValue}`);
|
|
43
|
+
}
|
|
34
44
|
}
|
|
35
45
|
validateOutline(newValue) {
|
|
36
46
|
if (newValue)
|
|
37
|
-
this.classList.add(
|
|
47
|
+
this.classList.add(this.classOutline);
|
|
48
|
+
else
|
|
49
|
+
this.classList.delete(this.classOutline);
|
|
38
50
|
}
|
|
39
51
|
/**
|
|
40
52
|
* Check if props are well configured on init
|
|
@@ -67,7 +79,7 @@ MgBadge.style = mgBadgeCss;
|
|
|
67
79
|
*/
|
|
68
80
|
const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success'];
|
|
69
81
|
|
|
70
|
-
const mgButtonCss = ".mg-button.sc-mg-button{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:0.6rem;-moz-column-gap:0.6rem;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);-webkit-box-sizing:border-box;box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;font-family:inherit;text-decoration:none;font-weight:normal;text-align:left;-ms-touch-action:manipulation;touch-action:manipulation}.mg-button[disabled].sc-mg-button,.mg-button[aria-disabled=true].sc-mg-button,.mg-button.disabled.sc-mg-button{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon.sc-mg-button{padding:0;-ms-flex-pack:center;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--primary.sc-mg-button{border-color:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));border-color:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - 10%));color:hsl(var(--mg-button-primary-font-color));background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))), to(hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--primary.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary.sc-mg-button{border-color:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));border-color:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - 10%));color:hsl(var(--mg-button-secondary-font-color));background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))), to(hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--secondary.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger.sc-mg-button{border-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));border-color:hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - 10%));color:hsl(var(--color-neutral));background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))), to(hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt.sc-mg-button{border-color:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));border-color:hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - 10%));color:hsl(var(--color-danger));background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))), to(hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger-alt.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info.sc-mg-button{border-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));border-color:hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - 10%));color:hsl(var(--color-neutral));background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))), to(hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--info.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success.sc-mg-button{border-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));border-color:hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - 10%));color:hsl(var(--color-dark));background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))), to(hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--success.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--success.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--success.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button.mg-button--flat.sc-mg-button{background:none;border:none}.mg-button.mg-button--flat.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsla(var(--color-dark), 0.1)}.mg-button.sc-mg-button mg-icon.sc-mg-button:only-child,.mg-button .sc-mg-button-s>mg-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;line-height:1;margin:auto 0}.mg-button.mg-button--loading.sc-mg-button>mg-icon.sc-mg-button{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.mg-button.mg-button--loading.sc-mg-button .mg-button__content.sc-mg-button{opacity:0}.mg-button__content.sc-mg-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:0.6rem;-moz-column-gap:0.6rem;column-gap:0.6rem}mg-button.sc-mg-button{display:inline-block}.mg-button.sc-mg-button,mg-button.sc-mg-button{vertical-align:middle;max-width:100%}";
|
|
82
|
+
const mgButtonCss = ".mg-button.sc-mg-button{position:relative;display:inline-flex;align-items:center;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;font-family:inherit;text-decoration:none;font-weight:normal;text-align:left;touch-action:manipulation}.mg-button[disabled].sc-mg-button,.mg-button[aria-disabled=true].sc-mg-button,.mg-button.disabled.sc-mg-button{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon.sc-mg-button{padding:0;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--primary.sc-mg-button{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-primary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--primary.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary.sc-mg-button{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-secondary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--secondary.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger.sc-mg-button{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt.sc-mg-button{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-danger));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger-alt.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info.sc-mg-button{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--info.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success.sc-mg-button{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-dark));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--success.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--success.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--success.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button.mg-button--flat.sc-mg-button{background:none;border:none}.mg-button.mg-button--flat.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsla(var(--color-dark), 0.1)}.mg-button.sc-mg-button mg-icon.sc-mg-button:only-child,.mg-button .sc-mg-button-s>mg-icon{display:inline-flex;flex-shrink:0;line-height:1;margin:auto 0}.mg-button.mg-button--loading.sc-mg-button>mg-icon.sc-mg-button{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.mg-button.mg-button--loading.sc-mg-button .mg-button__content.sc-mg-button{opacity:0}.mg-button__content.sc-mg-button{display:flex;align-items:center;column-gap:0.6rem}mg-button.sc-mg-button{display:inline-block}.mg-button.sc-mg-button,mg-button.sc-mg-button{vertical-align:middle;max-width:100%}";
|
|
71
83
|
|
|
72
84
|
const MgButton = class {
|
|
73
85
|
constructor(hostRef) {
|
|
@@ -134,11 +146,16 @@ const MgButton = class {
|
|
|
134
146
|
}
|
|
135
147
|
};
|
|
136
148
|
}
|
|
137
|
-
validateVariant(newValue) {
|
|
149
|
+
validateVariant(newValue, oldValue) {
|
|
138
150
|
if (!variants$3.includes(newValue)) {
|
|
139
151
|
throw new Error(`<mg-button> prop "variant" must be one of : ${variants$3.join(', ')}`);
|
|
140
152
|
}
|
|
141
|
-
|
|
153
|
+
else {
|
|
154
|
+
if (oldValue !== undefined) {
|
|
155
|
+
this.classList.delete(`mg-button--${oldValue}`);
|
|
156
|
+
}
|
|
157
|
+
this.classList.add(`mg-button--${newValue}`);
|
|
158
|
+
}
|
|
142
159
|
}
|
|
143
160
|
disabledHandler(isDisabled) {
|
|
144
161
|
// Remove loading when enable
|
|
@@ -197,32 +214,10 @@ const mgCharacterLeftCss = "mg-character-left.sc-mg-character-left{display:block
|
|
|
197
214
|
const MgCharacterLeft = class {
|
|
198
215
|
constructor(hostRef) {
|
|
199
216
|
registerInstance(this, hostRef);
|
|
200
|
-
/************
|
|
201
|
-
* Internal *
|
|
202
|
-
************/
|
|
203
|
-
this.mustacheCounter = '{counter}';
|
|
204
|
-
/**
|
|
205
|
-
* Template to display remaining characters.
|
|
206
|
-
* Must have {counter} inside
|
|
207
|
-
*/
|
|
208
|
-
this.template = messages.nbCharLeft;
|
|
209
217
|
/**
|
|
210
218
|
* Sets the characters to count
|
|
211
219
|
*/
|
|
212
220
|
this.characters = '';
|
|
213
|
-
/**
|
|
214
|
-
* Calculate number character left
|
|
215
|
-
*
|
|
216
|
-
* @returns {string} message
|
|
217
|
-
*/
|
|
218
|
-
this.getMessage = () => {
|
|
219
|
-
return this.template.replace(this.mustacheCounter, `<strong>${this.maxlength - this.characters.length}</strong>`);
|
|
220
|
-
};
|
|
221
|
-
}
|
|
222
|
-
validateTemplate(newValue) {
|
|
223
|
-
if (typeof newValue !== 'string' || newValue === '' || newValue.indexOf(this.mustacheCounter) === -1) {
|
|
224
|
-
throw new Error(`<mg-character-left> prop "template" must contain "${this.mustacheCounter}".`);
|
|
225
|
-
}
|
|
226
221
|
}
|
|
227
222
|
validateMaxlength(newValue) {
|
|
228
223
|
if (typeof newValue !== 'number') {
|
|
@@ -238,8 +233,8 @@ const MgCharacterLeft = class {
|
|
|
238
233
|
* @returns {void}
|
|
239
234
|
*/
|
|
240
235
|
componentWillLoad() {
|
|
241
|
-
this.validateTemplate(this.template);
|
|
242
236
|
this.validateMaxlength(this.maxlength);
|
|
237
|
+
this.messages = initLocales(this.element).messages;
|
|
243
238
|
}
|
|
244
239
|
/**
|
|
245
240
|
* Render component
|
|
@@ -247,16 +242,16 @@ const MgCharacterLeft = class {
|
|
|
247
242
|
* @returns {HTMLElement} HTML Element
|
|
248
243
|
*/
|
|
249
244
|
render() {
|
|
250
|
-
return h("span", { id: this.identifier,
|
|
245
|
+
return (h("span", { id: this.identifier, "aria-live": "polite" }, h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { class: "sr-only" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
|
|
251
246
|
}
|
|
247
|
+
get element() { return getElement(this); }
|
|
252
248
|
static get watchers() { return {
|
|
253
|
-
"template": ["validateTemplate"],
|
|
254
249
|
"maxlength": ["validateMaxlength"]
|
|
255
250
|
}; }
|
|
256
251
|
};
|
|
257
252
|
MgCharacterLeft.style = mgCharacterLeftCss;
|
|
258
253
|
|
|
259
|
-
const mgFormCss = ".is-asterisk{color:hsl(var(--color-danger))}.mg-form,.mg-form-group{--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem;--mg-inputs-title-width:15rem;--mg-inputs-shrink:0}.mg-form.mg-form--all-required,.mg-form-group.mg-form--all-required{--mg-input-title-display:none}";
|
|
254
|
+
const mgFormCss = ".is-asterisk{color:hsl(var(--color-danger))}.mg-form,.mg-form-group{--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem;--mg-inputs-title-width:15rem;--mg-inputs-shrink:0}.mg-form.mg-form--all-required,.mg-form-group.mg-form--all-required{--mg-input-title-display:none}.mg-form>p,.mg-form-group>p{font-size:1.2rem}";
|
|
260
255
|
|
|
261
256
|
const MgForm = class {
|
|
262
257
|
constructor(hostRef) {
|
|
@@ -296,12 +291,12 @@ const MgForm = class {
|
|
|
296
291
|
// All fields are required
|
|
297
292
|
// mg-input-toggle can not be required
|
|
298
293
|
if (requiredInputs.length > 0 && requiredInputs.length === this.mgInputs.filter(input => input.nodeName !== 'MG-INPUT-TOGGLE').length) {
|
|
299
|
-
this.requiredMessage = messages.form.allRequired;
|
|
294
|
+
this.requiredMessage = this.messages.form.allRequired;
|
|
300
295
|
this.classList.add('mg-form--all-required');
|
|
301
296
|
}
|
|
302
297
|
// Some fields are required
|
|
303
298
|
else if (requiredInputs.length > 0) {
|
|
304
|
-
this.requiredMessage = messages.form.required;
|
|
299
|
+
this.requiredMessage = this.messages.form.required;
|
|
305
300
|
}
|
|
306
301
|
};
|
|
307
302
|
/**
|
|
@@ -338,6 +333,8 @@ const MgForm = class {
|
|
|
338
333
|
* @returns {void}
|
|
339
334
|
*/
|
|
340
335
|
componentWillLoad() {
|
|
336
|
+
// Get locales
|
|
337
|
+
this.messages = initLocales(this.element).messages;
|
|
341
338
|
// Get slotted mgIputs
|
|
342
339
|
this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT-'));
|
|
343
340
|
// Define required message
|
|
@@ -373,76 +370,152 @@ MgForm.style = mgFormCss;
|
|
|
373
370
|
* Icon SVG paths
|
|
374
371
|
*/
|
|
375
372
|
const icons = {
|
|
373
|
+
'address-card': () => (h("path", { fill: "currentColor", d: "M14.21 2.67H1.79c-.63 0-1.14.51-1.14 1.14v8.38c0 .63.51 1.14 1.14 1.14h12.42c.63 0 1.14-.51 1.14-1.14V3.81c0-.63-.51-1.14-1.14-1.14ZM5.35 5c.84 0 1.53.69 1.53 1.53 0 .84-.69 1.53-1.53 1.53-.84 0-1.53-.69-1.53-1.53v-.05c.02-.83.7-1.49 1.53-1.48ZM8 10.59a.5.5 0 0 1-.53.46H3.21a.5.5 0 0 1-.53-.46v-.46c.07-.81.78-1.42 1.6-1.37h.12c.61.26 1.29.26 1.9 0h.12c.81-.04 1.51.56 1.58 1.37v.46Zm5.34-1.26c0 .1-.09.19-.19.19H9.73c-.1 0-.18-.07-.19-.17V9c0-.1.09-.19.19-.19h3.43c.1 0 .18.09.19.19v.33Zm0-1.52c0 .1-.09.18-.19.19H9.73c-.1 0-.19-.09-.19-.19v-.38c0-.1.07-.18.17-.19h3.45c.1 0 .19.09.19.19v.38Zm0-1.52c0 .1-.09.18-.19.19H9.73c-.1 0-.19-.09-.19-.19V5.9c0-.1.09-.19.19-.19h3.43c.11 0 .19.09.19.2v.38Z" })),
|
|
374
|
+
'align-center': () => (h("path", { fill: "currentColor", d: "M13.88 5.29H2.12c-.25 0-.45.2-.45.45v.9c0 .25.2.45.45.45h11.76c.25 0 .45-.2.45-.45v-.9c0-.25-.2-.45-.45-.45Zm0 7.24H2.12c-.25 0-.45.2-.45.45v.9c0 .25.2.45.45.45h11.76c.25 0 .45-.2.45-.45v-.9c0-.25-.2-.45-.45-.45ZM4.72 3.48h6.55c.19 0 .34-.15.34-.34V2.01c0-.19-.15-.34-.34-.34H4.72c-.19 0-.34.15-.34.34v1.13c0 .19.15.34.34.34Zm6.55 7.24c.19 0 .34-.15.34-.34V9.25c0-.19-.15-.34-.34-.34H4.72c-.19 0-.34.15-.34.34v1.13c0 .19.15.34.34.34h6.55Z" })),
|
|
375
|
+
'align-justify': () => (h("path", { fill: "currentColor", d: "M13.88 12.52H2.12c-.25 0-.45.21-.45.46v.9c0 .25.2.45.45.45h11.76c.25 0 .45-.2.45-.45V13a.466.466 0 0 0-.44-.48h-.01Zm0-3.62H2.12c-.25 0-.45.21-.45.46v.9c0 .25.2.45.45.45h11.76c.25 0 .45-.2.45-.45v-.9c0-.25-.2-.45-.45-.46Zm0-3.61H2.12c-.25 0-.45.2-.45.45v.9c0 .25.2.45.45.46h11.76c.25 0 .45-.21.45-.46v-.9c0-.25-.2-.45-.45-.45Zm0-3.62H2.12c-.25 0-.45.2-.45.45V3c0 .25.2.45.45.46h11.76c.25 0 .45-.21.45-.46v-.9a.45.45 0 0 0-.45-.43Z" })),
|
|
376
|
+
'align-left': () => (h("path", { fill: "currentColor", d: "M2 10.71h7.45c.2 0 .36-.16.36-.36V9.27c0-.2-.16-.36-.36-.37H2c-.2 0-.36.17-.36.37v1.08c0 .2.16.36.36.36Zm0-7.23h7.45c.2 0 .36-.17.36-.37V2c0-.2-.16-.36-.36-.36H2a.36.36 0 0 0-.33.36v1.11c0 .19.14.35.33.37Zm11.88 1.81H2.12c-.25 0-.45.2-.45.45v.9c0 .25.2.45.45.46h11.76c.25 0 .45-.21.45-.46v-.9c0-.25-.2-.45-.45-.45Zm0 7.23H2.12c-.25 0-.45.21-.45.46v.9c0 .25.2.45.45.45h11.76c.25 0 .45-.2.45-.45V13c0-.25-.2-.45-.45-.46v-.02Z" })),
|
|
377
|
+
'align-right': () => (h("path", { fill: "currentColor", d: "M2.12 7.1h11.76c.25 0 .45-.21.45-.46v-.9c0-.25-.2-.45-.45-.45H2.12c-.25 0-.45.2-.45.45v.9c0 .25.2.45.45.46Zm11.76 5.42H2.12c-.25 0-.45.21-.45.46v.9c0 .25.2.45.45.45h11.76c.25 0 .45-.2.45-.45V13a.466.466 0 0 0-.44-.48h-.01ZM14 1.67H6.55a.36.36 0 0 0-.36.33v1.11c0 .2.16.36.36.37H14c.2 0 .36-.17.36-.37V2a.36.36 0 0 0-.36-.33Zm0 7.23H6.55c-.2 0-.36.17-.36.37v1.08c0 .2.16.36.36.36H14c.2 0 .36-.16.36-.36V9.27c0-.2-.16-.36-.36-.37Z" })),
|
|
378
|
+
'api': () => (h("path", { fill: "currentColor", d: "M14.44 11.47h-.02l-.66-.1-.02-.08c-.03-.11-.08-.21-.13-.31l-.04-.07.4-.54v-.02l-.52-.52h-.02l-.54.41-.07-.04c-.1-.05-.2-.09-.31-.13l-.08-.02-.1-.67v-.01h-.73v.02l-.1.66-.08.02c-.11.03-.21.08-.31.13l-.07.04-.55-.41-.52.52v.02l.41.54-.04.07c-.05.1-.09.2-.13.31l-.02.08-.67.1h-.01v.73h.02l.66.1.02.08c.03.1.08.21.13.3l.04.07-.41.55.52.52h.02l.54-.41.07.04c.1.05.2.09.31.13l.08.02.1.67v.01h.73v-.02l.1-.66.08-.02c.11-.03.21-.08.31-.13l.07-.04.55.41.52-.52v-.02l-.4-.54.04-.07c.05-.1.09-.2.13-.31l.02-.08.67-.1h.01v-.73Zm-2.46 1.38c-.56 0-1.01-.45-1.01-1.01s.45-1.01 1.01-1.01 1.01.45 1.01 1.01-.45 1.01-1.01 1.01ZM8.51 5.81c-.11-.09-.27-.14-.5-.14h-.38v1.17h.27c.26 0 .45-.05.58-.15.13-.1.19-.25.19-.44s-.05-.34-.16-.43Zm1.57 5.13-.3-.4c-.1-.1-.09-.27 0-.37l.52-.52c.1-.1.26-.1.37 0l.4.29c.06-.03.13-.06.2-.08l.07-.49c0-.14.12-.25.26-.25h.45a5.44 5.44 0 1 0-10.5-1.99 5.44 5.44 0 0 0 5.44 5.44c.78 0 1.54-.17 2.25-.49v-.6c0-.14.11-.26.26-.26l.49-.07c.02-.07.05-.13.08-.2Zm.18-5.96h.84v3.94h-.84V4.98ZM5.4 8.92l-.29-.94H3.67l-.29.94h-.9l1.39-3.96h1.02l1.4 3.96h-.9Zm3.72-1.74c-.26.23-.64.34-1.13.34h-.36v1.4h-.84V4.98h1.26c.48 0 .84.1 1.09.31.25.21.37.51.37.92 0 .42-.13.75-.4.97ZM4.4 5.57c-.06.23-.23.8-.51 1.71h1.03c-.26-.85-.41-1.33-.45-1.44-.03-.11-.06-.2-.07-.26Z" })),
|
|
376
379
|
'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" })),
|
|
377
380
|
'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" })),
|
|
378
381
|
'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" })),
|
|
382
|
+
'arrow-rotate': () => (h("path", { fill: "currentColor", d: "M8.02 1.67c-1.6 0-3.15.59-4.33 1.67a6.316 6.316 0 0 0-.38 8.94 6.324 6.324 0 0 0 8.94.37.29.29 0 0 0 0-.42l-1-1a.296.296 0 0 0-.41 0 4.302 4.302 0 0 1-5.76-.09 4.276 4.276 0 0 1-.21-6.06 4.276 4.276 0 0 1 6.06-.21L9.86 5.95c-.11.12-.18.27-.18.43 0 .34.28.62.62.62h3.44c.34-.01.6-.29.59-.63V2.94a.62.62 0 0 0-.18-.44.61.61 0 0 0-.85 0l-.91.91a6.37 6.37 0 0 0-4.38-1.75h.02Z" })),
|
|
383
|
+
'arrow-rotate-backward': () => (h("path", { fill: "currentColor", d: "M8 1.67c-1.63 0-3.2.63-4.38 1.75l-.91-.91a.6.6 0 0 0-.85-.01h-.01a.62.62 0 0 0-.18.44v3.43c-.01.34.25.62.59.63H5.7c.34 0 .62-.28.62-.62 0-.16-.07-.31-.18-.43L5.07 4.87a4.276 4.276 0 0 1 6.06.21 4.276 4.276 0 0 1-.21 6.06 4.302 4.302 0 0 1-5.76.09.296.296 0 0 0-.41 0l-1 1a.29.29 0 0 0 0 .42 6.324 6.324 0 0 0 8.94-.37 6.316 6.316 0 0 0-.38-8.94 6.365 6.365 0 0 0-4.33-1.67Z" })),
|
|
379
384
|
'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" })),
|
|
380
385
|
'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" })),
|
|
381
|
-
'arrows-
|
|
386
|
+
'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" })),
|
|
387
|
+
'arrows-rotate': () => (h("path", { fill: "currentColor", d: "M14.3 6.37V2.94c0-.16-.06-.32-.18-.43a.6.6 0 0 0-.85 0l-.91.91a6.354 6.354 0 0 0-3.31-1.65 6.365 6.365 0 0 0-7.33 5.22h2.14c.16-.72.5-1.38 1-1.92v-.02a4.281 4.281 0 0 1 6.05-.18L9.84 6c-.1.1-.16.24-.18.38 0 .34.28.62.62.62h3.44c.33-.02.59-.3.58-.63ZM1.71 9.63v3.43c0 .16.06.32.18.43a.6.6 0 0 0 .85 0l.91-.91c.92.88 2.09 1.46 3.35 1.66 3.47.57 6.74-1.77 7.31-5.24h-2.14c-.17.74-.54 1.42-1.06 1.97a4.254 4.254 0 0 1-6.02.16l1.07-1.08c.11-.11.17-.27.17-.42A.63.63 0 0 0 5.72 9H2.28c-.33.03-.58.3-.57.63Z" })),
|
|
388
|
+
'arrows-rotate-backward': () => (h("path", { fill: "currentColor", d: "M2.3,7h3.4c0.3,0,0.6-0.3,0.6-0.6c0-0.1-0.1-0.3-0.2-0.4L5.1,4.9c1.7-1.6,4.4-1.5,6,0.2c0,0,0,0,0,0 c0.5,0.5,0.8,1.2,1,1.9h2.1C13.7,3.5,10.4,1.2,7,1.8C5.7,2,4.6,2.6,3.6,3.4L2.7,2.5c-0.2-0.2-0.6-0.2-0.8,0c0,0,0,0,0,0l0,0 C1.8,2.6,1.7,2.8,1.7,2.9v3.4C1.7,6.7,1.9,7,2.3,7z M13.7,9h-3.4C9.9,9,9.7,9.3,9.7,9.6c0,0.2,0.1,0.3,0.2,0.4l1.1,1.1 c-1.7,1.6-4.4,1.5-6-0.2C4.4,10.4,4,9.7,3.8,9H1.7c0.6,3.5,3.9,5.8,7.3,5.2c1.3-0.2,2.4-0.8,3.3-1.7l0.9,0.9c0.2,0.2,0.6,0.2,0.8,0 c0,0,0,0,0,0l0,0c0.1-0.1,0.2-0.3,0.2-0.4V9.6C14.3,9.3,14.1,9,13.7,9z" })),
|
|
382
389
|
'ban': () => (h("path", { fill: "currentColor", d: "M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Zm3.85 3.48a5.46 5.46 0 0 1 .61 7L4.88 3.54a5.46 5.46 0 0 1 6.97.61Zm-7.7 7.7a5.45 5.45 0 0 1-.61-7l7.58 7.58a5.46 5.46 0 0 1-7-.61Z" })),
|
|
390
|
+
'bell': () => (h("path", { fill: "currentColor", d: "M8 15.33a1.7 1.7 0 0 0 1.52-1.83h-3A1.7 1.7 0 0 0 8 15.33ZM13.13 11c-.46-.59-1.32-1.48-1.32-4.42a4.4 4.4 0 0 0-3.05-4.4v-.6A.85.85 0 0 0 8 .67a.85.85 0 0 0-.76.91v.6a4.4 4.4 0 0 0-3 4.44c0 2.94-.86 3.83-1.32 4.42a1 1 0 0 0-.2.63.85.85 0 0 0 .76.91h9.14a.85.85 0 0 0 .76-.91 1.05 1.05 0 0 0-.25-.67Z" })),
|
|
391
|
+
'briefcase': () => (h("path", { fill: "currentColor", d: "M13.93 4.33H11V2.07c0-.22-.18-.4-.4-.4H5.4c-.22 0-.4.18-.4.4v2.26H2.07c-.22 0-.4.18-.4.4v8.2c0 .22.18.4.4.4h11.86c.22 0 .4-.18.4-.4v-8.2c0-.22-.18-.4-.4-.4Zm-7.6 0V3h3.34v1.33H6.33Z" })),
|
|
383
392
|
'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" })),
|
|
384
|
-
'
|
|
393
|
+
'calendar': () => (h("path", { fill: "currentColor", d: "M14.52 4.43h-13V2.92a1.28 1.28 0 0 1 1.25-1.28h10.36A1.39 1.39 0 0 1 14.52 3Zm0 .93v7.91a1.41 1.41 0 0 1-1.4 1.4H2.88a1.41 1.41 0 0 1-1.4-1.4V5.36Zm-3.73 3.37a.35.35 0 0 0 .35.35h1.16a.34.34 0 0 0 .35-.35V7.57a.35.35 0 0 0-.35-.35h-1.16a.35.35 0 0 0-.35.35Zm-5.58 2.56a.35.35 0 0 0-.35-.35H3.7a.35.35 0 0 0-.35.35v1.17a.35.35 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Zm0-3.72a.35.35 0 0 0-.35-.35H3.7a.35.35 0 0 0-.35.35v1.16a.34.34 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Zm3.72 3.72a.35.35 0 0 0-.35-.35H7.42a.35.35 0 0 0-.35.35v1.17a.35.35 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Zm0-3.72a.35.35 0 0 0-.35-.35H7.42a.35.35 0 0 0-.35.35v1.16a.35.35 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Z" })),
|
|
394
|
+
'calendar-euro': () => (h("path", { fill: "currentColor", d: "M11.06 3.51h-1.04v.62a.2.2 0 0 1-.2.2H9.4c-.11 0-.21-.09-.21-.2v-.62H4.23v.62c0 .11-.09.2-.21.2h-.41c-.11 0-.21-.09-.21-.2v-.62H2.37c-.57 0-1.03.47-1.03 1.03v7.03c0 .57.47 1.03 1.03 1.03h5.3c-.25-.25-.46-.52-.63-.83H2.68a.53.53 0 0 1-.52-.52V6.61c0-.11.09-.21.21-.21h5.29a4.4 4.4 0 0 1 3.19-1.36c.43 0 .85.06 1.24.18v-.69c0-.57-.46-1.03-1.03-1.03Zm-6.83-.62c0-.11-.09-.21-.21-.21h-.41c-.11 0-.21.09-.21.21v.62h.83v-.62Zm5.79 0c0-.11-.09-.21-.21-.21H9.4c-.11 0-.21.09-.21.21v.62h.83v-.62Zm2.07 3c-.39-.13-.81-.21-1.24-.21-.83 0-1.6.26-2.23.73-.96.69-1.59 1.82-1.59 3.09 0 .86.28 1.65.77 2.29.23.32.52.6.85.83.62.45 1.38.71 2.2.71 2.11 0 3.82-1.72 3.82-3.82 0-1.67-1.08-3.09-2.58-3.61Zm.12 6.18c.01.07-.04.15-.11.16-.09.03-.2.04-.3.05-.14.03-.28.04-.43.04-.61.02-1.18-.18-1.63-.54-.41-.32-.73-.77-.88-1.29h-.37c-.08 0-.15-.06-.15-.15V10c0-.08.07-.14.15-.14h.26v-.5h-.26c-.08 0-.15-.06-.15-.14v-.37c0-.08.07-.14.15-.14h.4a2.576 2.576 0 0 1 2.37-1.7h.1c.22 0 .44.02.64.06.04.01.07.03.08.06.02.03.03.07.02.11l-.02.07-.13.46a.14.14 0 0 1-.17.1c-.15-.03-.3-.04-.45-.05h-.08c-.58.01-1.1.35-1.34.88h1.71c.08.02.12.09.11.17l-.08.36a.15.15 0 0 1-.15.11H9.73c-.01.16-.01.33 0 .5h1.66c.08.02.13.09.11.17l-.07.33c-.02.06-.08.11-.14.11H9.91c.21.56.72.94 1.3 1 .05 0 .1.01.15.01.19 0 .37-.03.55-.06.07-.02.14.03.16.09v.02l.11.52Z" })),
|
|
395
|
+
'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" })),
|
|
385
396
|
'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" })),
|
|
386
397
|
'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" })),
|
|
398
|
+
'chevron-down-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 8ZM8.5 11.37l4-4a.7.7 0 0 0 0-1l-.5-.52a.72.72 0 0 0-1 0l-3 3-3-3a.72.72 0 0 0-1 0l-.5.51a.7.7 0 0 0 0 1l4 4a.7.7 0 0 0 1 0Z" })),
|
|
387
399
|
'chevron-left': () => (h("path", { fill: "currentColor", d: "M3.79,7.43,10.31.9a.81.81,0,0,1,1.14,0h0l.77.76a.81.81,0,0,1,0,1.14L7,8l5.18,5.2a.81.81,0,0,1,0,1.14l-.77.76a.8.8,0,0,1-1.13,0h0L3.79,8.57a.79.79,0,0,1,0-1.13Z" })),
|
|
400
|
+
'chevron-left-circle': () => (h("path", { fill: "currentColor", d: "M8 15.33C3.95 15.33.67 12.05.67 8S3.95.67 8 .67 15.33 3.95 15.33 8c0 4.05-3.28 7.33-7.33 7.33ZM4.63 8.5l4 4c.27.28.71.28.99.01h.01l.52-.51c.27-.28.27-.72 0-1l-3-3 3-3c.27-.28.27-.72 0-1l-.51-.5a.697.697 0 0 0-.99-.01h-.01l-4 4.01c-.28.27-.28.71-.01.99Z" })),
|
|
388
401
|
'chevron-right': () => (h("path", { fill: "currentColor", d: "M12.21,8.57,5.69,15.1a.81.81,0,0,1-1.14,0h0l-.77-.76a.81.81,0,0,1,0-1.14L9,8,3.78,2.8a.81.81,0,0,1,0-1.14L4.55.9A.8.8,0,0,1,5.68.9h0l6.53,6.53a.79.79,0,0,1,0,1.13Z" })),
|
|
402
|
+
'chevron-right-circle': () => (h("path", { fill: "currentColor", d: "M8 .67c4.05 0 7.33 3.28 7.33 7.33S12.05 15.33 8 15.33.67 12.05.67 8C.67 3.95 3.95.67 8 .67Zm3.37 6.83-4-4a.697.697 0 0 0-.99-.01h-.01L5.85 4c-.27.28-.27.72 0 1l3 3-3 3c-.27.28-.27.72 0 1l.51.5c.27.28.71.28.99.01h.01l4-4.01c.28-.27.28-.71.01-.99Z" })),
|
|
389
403
|
'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" })),
|
|
404
|
+
'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" })),
|
|
390
405
|
'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" })),
|
|
391
406
|
'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" })),
|
|
407
|
+
'cog': () => (h("path", { fill: "currentColor", d: "M14.82 9.76 13.56 9a5.54 5.54 0 0 0 0-2.07l1.26-.72a.36.36 0 0 0 .18-.38A7.5 7.5 0 0 0 13.37 3a.35.35 0 0 0-.44 0l-1.26.72a5.51 5.51 0 0 0-1.79-1V1.21a.34.34 0 0 0-.27-.34 7.29 7.29 0 0 0-3.22 0 .34.34 0 0 0-.28.34v1.45a5.83 5.83 0 0 0-1.79 1L3.06 3a.35.35 0 0 0-.43 0A7.24 7.24 0 0 0 1 5.83a.34.34 0 0 0 .16.41L2.44 7a5.49 5.49 0 0 0 0 2l-1.26.73a.35.35 0 0 0-.16.41A7.24 7.24 0 0 0 2.63 13a.35.35 0 0 0 .43.07l1.26-.73a5.56 5.56 0 0 0 1.79 1v1.45a.35.35 0 0 0 .28.34 7.29 7.29 0 0 0 3.22 0 .35.35 0 0 0 .28-.34v-1.45a6 6 0 0 0 1.79-1l1.26.73a.35.35 0 0 0 .43-.07A7.39 7.39 0 0 0 15 10.17a.37.37 0 0 0-.17-.41Zm-6.82.6A2.36 2.36 0 1 1 10.35 8 2.36 2.36 0 0 1 8 10.36Z" })),
|
|
408
|
+
'comment': () => (h("path", { fill: "currentColor", d: "M8 1.67c-3.37-.12-6.21 2.51-6.33 5.88 0 1.36.5 2.68 1.41 3.69-.26 1-.72 1.94-1.36 2.76-.04.08-.04.17 0 .25.03.08.1.13.18.13 1.3-.03 2.54-.55 3.48-1.45.83.34 1.72.51 2.62.5 3.37.12 6.21-2.51 6.33-5.88-.12-3.37-2.96-6-6.33-5.88Zm2.53 8.43c0 .14-.11.25-.25.25H5.73c-.14 0-.25-.1-.26-.24V9.2c0-.17.13-.3.3-.31h4.5c.14 0 .26.12.26.26v.95Zm.92-3.29c0 .17-.13.3-.3.3h-6.3c-.17 0-.3-.13-.3-.3V6c0-.16.12-.29.28-.3H11.15c.16 0 .29.12.3.28V6.81Z" })),
|
|
409
|
+
'credit-card': () => (h("path", { fill: "currentColor", d: "M14 2.67H2A1.33 1.33 0 0 0 .67 4v8A1.32 1.32 0 0 0 2 13.33h12A1.32 1.32 0 0 0 15.33 12V4A1.32 1.32 0 0 0 14 2.67M14 12H2V8h12Zm0-6.67H2V4h12Z" })),
|
|
392
410
|
'cross': () => (h("path", { fill: "currentColor", d: "M14.26 12.74 9.52 8l4.7-4.7a.29.29 0 0 0 0-.41l-1.1-1.1a.29.29 0 0 0-.41 0L8 6.48 3.26 1.74a.24.24 0 0 0-.34 0L1.74 2.91a.24.24 0 0 0 0 .34L6.48 8l-4.7 4.7a.29.29 0 0 0 0 .41l1.1 1.1a.29.29 0 0 0 .41 0L8 9.52l4.74 4.74a.24.24 0 0 0 .34 0l1.17-1.17a.24.24 0 0 0 0-.34Z" })),
|
|
393
411
|
'cross-circle': () => (h("path", { fill: "currentColor", d: "M8.06.67H8A7.33 7.33 0 0 0 .68 8v.1a7.42 7.42 0 0 0 7.23 7.23A7.33 7.33 0 1 0 8.06.67Zm3.6 9.57a.28.28 0 0 1 0 .4l-.19.2-.61.61-.2.19a.27.27 0 0 1-.39 0L8 9.41l-2.23 2.24a.27.27 0 0 1-.39 0l-.2-.2-.6-.6-.19-.2a.28.28 0 0 1 0-.4L6.6 8 4.36 5.76a.28.28 0 0 1 0-.4l1-1a.28.28 0 0 1 .4 0L8 6.59l2.24-2.24a.28.28 0 0 1 .4 0l.2.2.6.6.2.2a.28.28 0 0 1 0 .4L9.42 8Z" })),
|
|
394
|
-
'download': () => (h("path", { fill: "currentColor", d: "M6.
|
|
395
|
-
'
|
|
396
|
-
'exclamation-
|
|
412
|
+
'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" })),
|
|
413
|
+
'euro': () => (h("path", { fill: "currentColor", d: "M13 13.14a.4.4 0 0 0-.47-.31A7.79 7.79 0 0 1 11 13a4.31 4.31 0 0 1-4-2.79h3.8a.41.41 0 0 0 .39-.31l.19-.9a.39.39 0 0 0-.3-.47H6.51a7.07 7.07 0 0 1 0-1.38h4.89a.4.4 0 0 0 .39-.31l.22-1a.4.4 0 0 0-.3-.47H7a4.2 4.2 0 0 1 3.92-2.45 6.57 6.57 0 0 1 1.26.14.41.41 0 0 0 .47-.29l.4-1.45a.4.4 0 0 0-.28-.48A9.43 9.43 0 0 0 11 .67a7.12 7.12 0 0 0-6.83 4.7h-1.1a.4.4 0 0 0-.4.39v1a.4.4 0 0 0 .4.39h.72a9.08 9.08 0 0 0 0 1.38h-.72a.39.39 0 0 0-.4.39v.93a.4.4 0 0 0 .4.39h1A7 7 0 0 0 11 15.3a8.7 8.7 0 0 0 2-.25.39.39 0 0 0 .3-.46l-.3-1.45Z" })),
|
|
414
|
+
'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" })),
|
|
415
|
+
'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" })),
|
|
416
|
+
'eye': () => [
|
|
417
|
+
h("circle", { fill: "currentColor", cx: "8.01", cy: "7.96", r: "2.44" }),
|
|
418
|
+
h("path", { fill: "currentColor", d: "M15.24 7.59A8.12 8.12 0 0 0 8 2.67 8.12 8.12 0 0 0 .76 7.59a1 1 0 0 0 0 .82A8.12 8.12 0 0 0 8 13.33a8.12 8.12 0 0 0 7.24-4.92 1 1 0 0 0 0-.82ZM8 11.62A3.66 3.66 0 1 1 11.67 8 3.66 3.66 0 0 1 8 11.62Z" }),
|
|
419
|
+
],
|
|
420
|
+
'eye-slash': () => [
|
|
421
|
+
h("path", { fill: "currentColor", d: "M10.25 7a2.43 2.43 0 0 0-2.08-1.46ZM6.45 6.1a2.43 2.43 0 1 0 3.85 2.69Z" }),
|
|
422
|
+
h("path", { fill: "currentColor", d: "M15.24 7.59A8.13 8.13 0 0 0 8 2.67a8.06 8.06 0 0 0-2.89.64l1.72 1.2A3.58 3.58 0 0 1 8 4.3a3.65 3.65 0 0 1 3.64 3.6l2.77 1.93a7.91 7.91 0 0 0 .81-1.42 1 1 0 0 0 .02-.82ZM.81 3.84 2.51 5A8.16 8.16 0 0 0 .76 7.59a1 1 0 0 0 0 .82A8.13 8.13 0 0 0 8 13.33a8 8 0 0 0 4.32-1.4l2 1.38.81-1.17-13.5-9.47ZM8 11.62A3.66 3.66 0 0 1 4.35 8a3.75 3.75 0 0 1 .29-1.42l5.85 4.11a3.65 3.65 0 0 1-2.49.93Z" }),
|
|
423
|
+
],
|
|
424
|
+
'file': () => [
|
|
425
|
+
h("path", { fill: "currentColor", d: "M8.89 4.56V.67H3.35a.66.66 0 0 0-.66.68v13.3a.67.67 0 0 0 .66.68h9.3a.66.66 0 0 0 .66-.68v-9.4H9.55a.67.67 0 0 1-.66-.69Z" }),
|
|
426
|
+
h("path", { fill: "currentColor", d: "M13.12 3.67 10.41.87a.63.63 0 0 0-.47-.2h-.17v3.66h3.54v-.17a.69.69 0 0 0-.19-.49Z" }),
|
|
427
|
+
],
|
|
397
428
|
'file-cog': () => (h("path", { fill: "currentColor", d: "M9,10.1C9,10.6,8.5,11,8,11l0,0c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1C8.6,9,9,9.4,9,10.1C9,10,9,10,9,10.1z M13.2,3.7l-2.8-2.8c-0.1-0.1-0.3-0.2-0.5-0.2H9.8v3.7h3.5V4.2C13.3,4,13.2,3.8,13.2,3.7L13.2,3.7z M9.6,5.3h3.8v9.4 c0,0.4-0.3,0.6-0.7,0.7H3.3c-0.4,0-0.7-0.3-0.7-0.7c0,0,0,0,0,0V1.3C2.7,1,3,0.7,3.3,0.7h5.5v3.9l0,0C8.9,4.9,9.2,5.2,9.6,5.3 C9.5,5.2,9.5,5.2,9.6,5.3z M10,8L9.5,8.3C9.3,8.1,9,8,8.8,7.9V7.3c0-0.1,0-0.1-0.1-0.1c-0.4-0.1-0.9-0.1-1.3,0 c-0.1,0-0.1,0.1-0.1,0.1v0.6C7,8,6.7,8.1,6.5,8.3L6,8C5.9,8,5.9,8,5.8,8C5.5,8.3,5.3,8.7,5.2,9.1c0,0.1,0,0.1,0.1,0.2l0.5,0.3 c-0.1,0.3-0.1,0.6,0,0.8l-0.5,0.3c-0.1,0-0.1,0.1-0.1,0.2c0.1,0.4,0.4,0.8,0.7,1.1c0.1,0,0.1,0,0.2,0l0.5-0.3 C6.7,11.9,7,12,7.2,12.1v0.6c0,0.1,0,0.1,0.1,0.1c0.4,0.1,0.9,0.1,1.3,0c0.1,0,0.1-0.1,0.1-0.1v-0.5C9,12.1,9.3,12,9.5,11.8l0.5,0.3 c0.1,0,0.1,0,0.2,0c0.3-0.3,0.5-0.7,0.6-1.1c0-0.1,0-0.1-0.1-0.2l0,0l-0.5-0.3c0-0.3,0-0.6,0-0.8l0.5-0.3c0.1,0,0.1-0.1,0.1-0.2 c-0.1-0.4-0.4-0.8-0.6-1.1C10.1,8,10.1,8,10,8z" })),
|
|
398
|
-
'file-
|
|
429
|
+
'file-download': () => [
|
|
430
|
+
h("path", { fill: "currentColor", d: "M13.12 3.67 10.41.87a.63.63 0 0 0-.47-.2h-.17v3.66h3.54v-.17a.69.69 0 0 0-.19-.49Z" }),
|
|
431
|
+
h("path", { fill: "currentColor", d: "M13.31 14.65v-9.4H9.55a.67.67 0 0 1-.66-.68V.67H3.35a.67.67 0 0 0-.66.66v13.32a.67.67 0 0 0 .66.68h9.3a.67.67 0 0 0 .66-.66Zm-2.91-4.24-2.54 2.53a.18.18 0 0 1-.26 0l-2.54-2.53a.2.2 0 0 1-.06-.15.18.18 0 0 1 .19-.18h1.34a.2.2 0 0 0 .2-.2V7.27a.19.19 0 0 1 .19-.18h1.63a.18.18 0 0 1 .18.19v2.6a.2.2 0 0 0 .2.2h1.34a.16.16 0 0 1 .14.06.19.19 0 0 1-.01.27Z" }),
|
|
432
|
+
],
|
|
433
|
+
'file-excel': () => (h("path", { fill: "currentColor", d: "M8.89 4.43V.67H3.35a.65.65 0 0 0-.66.66v13.34a.65.65 0 0 0 .66.66h9.3a.65.65 0 0 0 .66-.66V5.09H9.55a.65.65 0 0 1-.66-.66Zm1.66 3.2-1.66 2.58 1.66 2.59a.34.34 0 0 1-.1.46.31.31 0 0 1-.18.05h-1a.32.32 0 0 1-.27-.17c-.54-1-1-1.9-1-1.9-.18.41-.28.55-1 1.9a.33.33 0 0 1-.29.18h-1A.34.34 0 0 1 5.4 13a.41.41 0 0 1 0-.18l1.67-2.58-1.62-2.61a.34.34 0 0 1 .1-.46.37.37 0 0 1 .18 0h1a.33.33 0 0 1 .3.17c.72 1.35.55.93 1 1.9 0 0 .17-.33 1-1.9a.33.33 0 0 1 .3-.17h1a.33.33 0 0 1 .33.33.41.41 0 0 1-.11.13ZM13.31 4v.17H9.77V.67h.17a.67.67 0 0 1 .47.19l2.71 2.71a.66.66 0 0 1 .19.43Z" })),
|
|
434
|
+
'file-pdf': () => (h("path", { fill: "currentColor", d: "M7.74 8a2.68 2.68 0 0 1-.06-1.3c.24 0 .21 1.02.06 1.3Zm0 1.31a12.5 12.5 0 0 1-.79 1.75 9.8 9.8 0 0 1 1.75-.61 3.63 3.63 0 0 1-1.01-1.14Zm-2.66 3.47s.36-.15 1-1.12a3.71 3.71 0 0 0-1 1.12Zm4.49-7.67h3.78v9.56a.65.65 0 0 1-.66.66H3.31a.66.66 0 0 1-.66-.66V1.33a.65.65 0 0 1 .7-.66h5.56v3.77a.67.67 0 0 0 .66.67Zm-.22 5a2.78 2.78 0 0 1-1.18-1.5 4 4 0 0 0 .17-1.78.7.7 0 0 0-.78-.6.69.69 0 0 0-.56.41 4.58 4.58 0 0 0 .23 2.14 26 26 0 0 1-1.13 2.38c-.76.39-2 1.24-1.52 1.89a.87.87 0 0 0 .6.28c.5 0 1-.5 1.7-1.72A15.24 15.24 0 0 1 9.07 11a4.34 4.34 0 0 0 1.78.54.72.72 0 0 0 .74-.7.78.78 0 0 0-.19-.51c-.4-.4-1.51-.33-2.05-.23Zm3.81-6.53L10.44.86A.71.71 0 0 0 10 .67h-.2v3.55h3.55v-.17a.7.7 0 0 0-.19-.47ZM11.1 10.9c.11-.08-.07-.33-1.19-.25 1.03.44 1.19.25 1.19.25Z" })),
|
|
435
|
+
'file-text': () => (h("path", { fill: "currentColor", d: "M8.89 4.56V.67H3.35c-.36 0-.66.3-.66.66v13.32c0 .37.29.67.66.68h9.3c.36 0 .66-.3.66-.66V5.25H9.55c-.37 0-.67-.31-.66-.68Zm1.77 6.75c0 .19-.15.34-.34.35H5.68c-.19 0-.34-.16-.34-.35v-.23c0-.19.15-.34.34-.34h4.64c.19 0 .34.15.34.34v.23Zm0-1.83c0 .19-.15.34-.34.34H5.68c-.19 0-.34-.15-.34-.34v-.23c0-.19.15-.34.34-.34h4.64c.19 0 .34.15.34.34v.23Zm0-2.06v.23c0 .19-.15.34-.34.34H5.68c-.19 0-.34-.15-.34-.34v-.23c0-.19.15-.34.34-.35h4.64c.19 0 .34.16.34.35Zm2.65-3.27v.17H9.77V.67h.17c.18 0 .35.07.47.2l2.71 2.8c.13.13.19.31.19.49Z" })),
|
|
436
|
+
'file-text-outline': () => (h("path", { fill: "currentColor", d: "M10.31 10.74H5.69c-.2 0-.36.16-.36.35v.22c0 .19.16.35.36.35h4.62c.2 0 .36-.16.36-.35v-.22c0-.19-.16-.35-.36-.35Zm0-1.84H5.69c-.2 0-.36.16-.36.36v.21c0 .2.16.35.36.35h4.62c.2 0 .36-.15.36-.35v-.21c0-.2-.16-.36-.36-.36Zm0-1.83H5.69c-.2 0-.36.16-.36.35v.22c0 .19.16.35.36.35h4.62c.2 0 .36-.16.36-.35v-.22c0-.19-.16-.35-.36-.35Zm0 3.67H5.69c-.2 0-.36.16-.36.35v.22c0 .19.16.35.36.35h4.62c.2 0 .36-.16.36-.35v-.22c0-.19-.16-.35-.36-.35Zm0-1.84H5.69c-.2 0-.36.16-.36.36v.21c0 .2.16.35.36.35h4.62c.2 0 .36-.15.36-.35v-.21c0-.2-.16-.36-.36-.36Zm0-1.83H5.69c-.2 0-.36.16-.36.35v.22c0 .19.16.35.36.35h4.62c.2 0 .36-.16.36-.35v-.22c0-.19-.16-.35-.36-.35Zm2.76-2.64L9.69.92A.8.8 0 0 0 9.1.67H3.35c-.36 0-.66.3-.66.66v13.32c0 .37.29.67.66.68h9.3c.36 0 .66-.3.66-.66V5.05c0-.23-.07-.45-.24-.62Zm-.76 9.9H3.69V1.67h5.2v2.75c0 .46.37.83.83.83h2.59v9.08Z" })),
|
|
399
437
|
'file-upload': () => [
|
|
400
438
|
h("path", { fill: "currentColor", d: "M13.1 3.7 10.4.9c-.1-.1-.3-.2-.5-.2h-.1v3.7h3.5v-.2c0-.2-.1-.4-.2-.5z" }),
|
|
401
439
|
h("path", { fill: "currentColor", d: "M13.3 14.6V5.3H9.6c-.4 0-.7-.3-.7-.7V.7H3.3c-.3 0-.6.3-.6.6v13.3c0 .4.3.7.7.7h9.3c.3 0 .6-.3.6-.7zm-3-4.6H8.9c-.1 0-.2.1-.2.2v2.6c0 .1-.1.2-.2.2H6.9c-.1 0-.2-.1-.2-.2v-2.6c0-.1-.1-.2-.2-.2H5.1C5 9.9 5 9.8 5 9.7l2.5-2.6c.1-.1.2-.1.3 0l2.5 2.5.1.1c.1.2 0 .3-.1.3z" }),
|
|
402
440
|
],
|
|
403
|
-
'
|
|
441
|
+
'filter': () => (h("path", { fill: "currentColor", d: "M13.74 1.66H2.26a.6.6 0 0 0-.59.6.59.59 0 0 0 .17.42l4.58 4.58v5.1a.58.58 0 0 0 .25.48l2 1.39a.6.6 0 0 0 .83-.15.59.59 0 0 0 .1-.34V7.26l4.58-4.58a.6.6 0 0 0 0-.84.64.64 0 0 0-.44-.18Z" })),
|
|
442
|
+
'floppy-disk': () => (h("path", { fill: "currentColor", d: "m13.93 4.44-2.37-2.37c-.25-.25-.6-.4-.96-.4H3.03c-.75 0-1.36.61-1.36 1.36v9.94c0 .75.61 1.36 1.36 1.36h9.94c.75 0 1.36-.61 1.36-1.36V5.4c0-.36-.14-.7-.4-.96ZM8 12.52A1.81 1.81 0 1 1 8 8.9a1.81 1.81 0 0 1 0 3.62Zm2.71-5.77c0 .09-.04.18-.1.24a.35.35 0 0 1-.24.1H3.82c-.19 0-.34-.15-.34-.34V3.82c0-.19.15-.34.34-.34h6.55c.19 0 .34.15.34.34v2.93Z" })),
|
|
443
|
+
'folder': () => (h("path", { fill: "currentColor", d: "M14 4.44H8.46L6.62 2.67H2C1.27 2.67.68 3.27.67 4v8c0 .73.6 1.32 1.33 1.33h12c.73 0 1.32-.6 1.33-1.33V5.78c0-.73-.6-1.33-1.33-1.34Z" })),
|
|
444
|
+
'folder-lines': () => (h("path", { fill: "currentColor", d: "M14 4.44H8.46L6.62 2.67H2A1.35 1.35 0 0 0 .67 4v8A1.35 1.35 0 0 0 2 13.33h12A1.35 1.35 0 0 0 15.33 12V5.78A1.36 1.36 0 0 0 14 4.44Zm-4.57 6.38a.2.2 0 0 1-.2.2H3.41a.2.2 0 0 1-.2-.2v-.9a.2.2 0 0 1 .2-.2h5.82a.2.2 0 0 1 .2.2Zm3.36-2.95a.2.2 0 0 1-.2.2H3.42a.2.2 0 0 1-.2-.2V7a.2.2 0 0 1 .2-.2h9.17a.2.2 0 0 1 .2.2Z" })),
|
|
445
|
+
'folder-link': () => (h("path", { fill: "currentColor", d: "M14 4.44H8.46L6.62 2.67H2C1.27 2.67.68 3.27.67 4v8c0 .73.6 1.32 1.33 1.33h12c.73 0 1.32-.6 1.33-1.33V5.78c0-.73-.6-1.33-1.33-1.34Zm-6.82 6.88H5.65c-1.34 0-2.42-1.08-2.42-2.42 0-1.34 1.08-2.42 2.42-2.42h.84c.14 0 .25.11.25.25 0 .06-.02.13-.06.17-.2.21-.36.45-.49.71-.04.07-.11.13-.19.14h-.33c-.62-.15-1.24.22-1.39.84-.15.62.22 1.24.84 1.39.15.04.31.04.47.02h1.58c.62 0 1.12-.48 1.15-1.1v-.22c-.02-.08 0-.16.06-.22.12-.13.29-.2.47-.2h.45c.12 0 .23.09.25.21.02.14.02.29 0 .43 0 1.32-1.05 2.39-2.37 2.42Zm3.17 0h-.84c-.06 0-.13-.02-.17-.07-.1-.1-.1-.25 0-.35.2-.21.36-.45.49-.71.02-.09.08-.16.17-.19h.36c.63.04 1.18-.43 1.23-1.07.04-.63-.43-1.18-1.07-1.23H8.83c-.64 0-1.15.51-1.15 1.15v.25c.02.08 0 .16-.06.22-.12.13-.29.21-.47.21H6.7c-.13 0-.24-.09-.26-.22-.01-.14-.01-.27 0-.41a2.41 2.41 0 0 1 2.38-2.43h1.52c1.34 0 2.42 1.07 2.43 2.41 0 1.34-1.09 2.42-2.42 2.43Z" })),
|
|
446
|
+
'folder-star': () => (h("path", { fill: "currentColor", d: "M14 4.44H8.46L6.62 2.67H2A1.35 1.35 0 0 0 .67 4v8A1.35 1.35 0 0 0 2 13.33h12A1.35 1.35 0 0 0 15.33 12V5.78A1.36 1.36 0 0 0 14 4.44Zm-.2 3.89L12 9.66l.69 2a.22.22 0 0 1-.08.27.26.26 0 0 1-.13.06.39.39 0 0 1-.15-.06l-1.77-1.26L8.75 12a.34.34 0 0 1-.15 0 .31.31 0 0 1-.13 0 .23.23 0 0 1-.08-.27l.69-2-1.81-1.35a.23.23 0 0 1-.1-.17.24.24 0 0 1 .24-.24h2.21l.67-2a.26.26 0 0 1 .15-.14.24.24 0 0 1 .31.14l.67 2h2.2a.26.26 0 0 1 .26.24.3.3 0 0 1-.08.12Z" })),
|
|
447
|
+
'graduation-cap': () => (h("path", { fill: "currentColor", d: "M14.93 5.14 8.54 2.76c-.35-.13-.73-.13-1.08 0L1.07 5.14c-.31.13-.48.47-.39.8.04.22.19.39.39.47l1.12.42c-.26.38-.4.84-.41 1.3-.35.28-.47.75-.3 1.16.06.12.14.23.24.31l-.59 3.19c-.06.22.07.45.28.53h1.37c.22-.02.38-.22.36-.44v-.1L2.55 9.6c.32-.31.4-.79.2-1.18a.814.814 0 0 0-.24-.28c0-.38.18-.75.47-1l4.48 1.65c.35.13.73.13 1.08 0l6.39-2.38c.31-.13.48-.47.39-.8a.625.625 0 0 0-.39-.47Zm-6.18 4.5c-.48.18-1.02.18-1.5 0L3.93 8.4l-.33 3.15c0 1 2 1.78 4.4 1.78s4.4-.79 4.4-1.78l-.33-3.15-3.32 1.24Z" })),
|
|
404
448
|
'history': () => [
|
|
405
449
|
h("path", { fill: "currentColor", d: "M8,1.67A6.37,6.37,0,0,0,3.6,3.42l-.91-.91a.6.6,0,0,0-.85,0h0a.58.58,0,0,0-.18.43V6.37A.61.61,0,0,0,2.24,7H5.68a.62.62,0,0,0,.62-.62A.69.69,0,0,0,6.12,6L5.05,4.87a4.29,4.29,0,1,1,.1,6.36.3.3,0,0,0-.41,0l-1,1a.3.3,0,0,0,0,.42h0A6.33,6.33,0,1,0,8,1.67Z" }),
|
|
406
450
|
h("path", { fill: "currentColor", d: "M9.85,9.3l-.36.36a.3.3,0,0,1-.43,0L7.45,8V5.15a.3.3,0,0,1,.3-.3h.5a.3.3,0,0,1,.3.3V7.58l1.3,1.3A.31.31,0,0,1,9.85,9.3Z" }),
|
|
407
451
|
],
|
|
452
|
+
'home': () => h("path", { fill: "currentColor", d: "M6.75 14.33V9.86h2.5v4.47h3.13v-6h1.88L8 1.67l-6.26 6.7h1.88v6Z" }),
|
|
408
453
|
'info-circle': () => (h("path", { fill: "currentColor", d: "M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67ZM9 12a.29.29 0 0 1-.3.3H7.35a.29.29 0 0 1-.3-.3V7.32A.29.29 0 0 1 7.33 7h1.32a.29.29 0 0 1 .35.3Zm0-6.74a.29.29 0 0 1-.3.3H7.35a.29.29 0 0 1-.3-.3V4a.29.29 0 0 1 .28-.3h1.32a.29.29 0 0 1 .3.28V4Z" })),
|
|
454
|
+
'key': () => (h("path", { fill: "currentColor", d: "M8.44 6.67a3.994 3.994 0 0 0-5.1-2.44A3.986 3.986 0 0 0 .9 9.33 3.994 3.994 0 0 0 6 11.77c1.14-.4 2.04-1.3 2.44-2.44h2.89V12H14V9.33h1.33V6.67H8.44ZM4.67 9.33c-.73 0-1.33-.6-1.33-1.33s.6-1.33 1.33-1.33C5.4 6.67 6 7.27 6 8c0 .73-.58 1.32-1.31 1.33h-.02Z" })),
|
|
455
|
+
'laptop': () => (h("path", { fill: "currentColor", d: "M12.89 12.08c.68-.02 1.23-.58 1.22-1.26v-6.9c0-.68-.54-1.24-1.22-1.25H3.11c-.68.01-1.23.57-1.22 1.25v6.9c-.01.68.53 1.25 1.22 1.26H.67c-.01.68.53 1.24 1.21 1.25h12.23c.68 0 1.23-.56 1.22-1.24h-2.44ZM3.11 3.92h9.78v6.9H3.11v-6.9ZM8 12.71c-.34 0-.62-.29-.61-.63 0-.34.27-.61.61-.61.34 0 .61.27.61.61 0 .34-.27.63-.61.63Z" })),
|
|
409
456
|
'lines-rectangle': () => (h("path", { fill: "currentColor", d: "M12.32.67H3.68c-.56 0-1.01.45-1.01 1.01v12.64c0 .56.45 1.01 1.01 1.01h8.64c.56 0 1.01-.45 1.01-1.01V1.68c0-.56-.45-1.01-1.01-1.01ZM9 11.25H4.67v-2H9v2Zm2.33-4.49H4.67v-2h6.67v2Z" })),
|
|
457
|
+
'life-ring': () => (h("path", { fill: "currentColor", d: "M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Zm5.14 3.53-1.88 1.88a3.91 3.91 0 0 0-1.34-1.34l1.88-1.88a6.55 6.55 0 0 1 1.34 1.34ZM8 10.84A2.84 2.84 0 1 1 10.84 8 2.84 2.84 0 0 1 8 10.84Zm-3.8-8 1.88 1.9a3.91 3.91 0 0 0-1.34 1.34L2.86 4.2A6.55 6.55 0 0 1 4.2 2.86ZM2.86 11.8l1.88-1.88a3.91 3.91 0 0 0 1.34 1.34L4.2 13.14a6.55 6.55 0 0 1-1.34-1.34Zm8.94 1.34-1.88-1.88a3.91 3.91 0 0 0 1.34-1.34l1.88 1.88a6.55 6.55 0 0 1-1.34 1.34Z" })),
|
|
458
|
+
'link': () => (h("path", { fill: "currentColor", d: "M9.75 6.25a3.748 3.748 0 0 1 0 5.31l-1.66 1.67a3.76 3.76 0 0 1-5.32 0 3.76 3.76 0 0 1 0-5.32l.92-.92c.15-.15.4-.16.56 0 .07.07.11.16.12.26.02.44.1.88.24 1.3.05.14.01.3-.09.41l-.32.32c-.72.67-.76 1.8-.09 2.52s1.8.76 2.52.09c.03-.02.05-.05.07-.07l1.66-1.66c.7-.7.7-1.82 0-2.52-.08-.08-.16-.15-.26-.21a.394.394 0 0 1-.17-.31.98.98 0 0 1 .29-.74l.52-.52c.14-.14.35-.15.51-.04.18.13.35.27.51.43Zm3.49-3.48a3.76 3.76 0 0 0-5.32 0L6.26 4.43a3.772 3.772 0 0 0 .52 5.75c.16.11.37.09.51-.04l.52-.52c.2-.19.3-.46.29-.74a.38.38 0 0 0-.17-.31 1.775 1.775 0 0 1-.26-2.73l1.66-1.66c.68-.71 1.81-.74 2.52-.06.71.68.74 1.81.06 2.52-.02.03-.05.05-.07.07l-.32.32c-.11.11-.14.27-.09.41.14.42.22.86.24 1.3 0 .22.19.39.41.38.1 0 .19-.05.26-.12l.92-.92a3.76 3.76 0 0 0 0-5.32Z" })),
|
|
410
459
|
'list': () => (h("path", { fill: "currentColor", d: "M1.9 2.68c-.67 0-1.22.56-1.21 1.23 0 .67.56 1.22 1.23 1.21.67 0 1.22-.56 1.21-1.23 0-.32-.13-.63-.36-.86-.23-.23-.54-.36-.87-.35Zm0 4.09a1.23 1.23 0 1 0 0 2.46 1.23 1.23 0 1 0 0-2.46Zm0 4.09a1.23 1.23 0 1 0 0 2.46 1.23 1.23 0 1 0 0-2.46Zm13 .41H5.18c-.23 0-.41.18-.41.41v.82c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41v-.82c0-.23-.18-.41-.41-.41h-.03Zm0-8.18H5.18c-.23 0-.41.18-.41.41v.81c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41V3.5c0-.23-.18-.41-.41-.41h-.03Zm0 4.09H5.18c-.23 0-.41.18-.41.41v.82c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41v-.82c0-.23-.18-.41-.41-.41h-.03Z" })),
|
|
411
460
|
'loader': () => [
|
|
412
461
|
h("path", { fill: "currentColor", class: "loader__full-circle", d: "M8 2.67A5.33 5.33 0 1 1 2.67 8 5.33 5.33 0 0 1 8 2.67m0-2A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Z" }),
|
|
413
462
|
h("path", { fill: "currentColor", d: "M8 2.67v-2A7.33 7.33 0 0 0 .67 8h2A5.33 5.33 0 0 1 8 2.67Z" }),
|
|
414
463
|
],
|
|
415
464
|
'lock': () => (h("path", { fill: "currentColor", d: "M12 5.56h-.67v-1.4C11.37 2.28 9.88.71 8 .67 6.12.71 4.63 2.28 4.67 4.16v1.4H4c-.75.02-1.35.64-1.33 1.39V14c.02.73.6 1.31 1.33 1.33h8c.75-.02 1.35-.64 1.33-1.39V7a1.37 1.37 0 0 0-1.28-1.44H12Zm-4 6.28c-.77.04-1.43-.56-1.47-1.33-.04-.77.56-1.43 1.33-1.47.77-.04 1.43.56 1.47 1.33v.07c.02.75-.57 1.38-1.32 1.4H8Zm2.07-6.28H5.93v-1.4A2.12 2.12 0 0 1 8 2c1.17.03 2.1 1 2.07 2.17v1.39Z" })),
|
|
465
|
+
'location': () => (h("path", { fill: "currentColor", d: "M8 .67A5.1 5.1 0 0 0 2.67 5.5c0 3.06 3.51 7.88 4.83 9.59a.64.64 0 0 0 1 0c1.32-1.71 4.83-6.53 4.83-9.59A5.1 5.1 0 0 0 8 .67Zm0 6.94a1.74 1.74 0 1 1 1.74-1.73A1.73 1.73 0 0 1 8 7.61Z" })),
|
|
416
466
|
'log-in': () => (h("path", { fill: "currentColor", d: "M10.97,7.78h0L6.97,3.78c-.12-.12-.31-.12-.42,0h0c-.07,.06-.12,.15-.13,.24v2.07c0,.17-.13,.3-.3,.32H1.97c-.16,0-.29,.12-.3,.28h0v2.58c0,.16,.12,.29,.28,.3H6.11c.17,0,.3,.14,.3,.31v2.14c0,.16,.12,.29,.28,.3h0c.11,.01,.21-.03,.28-.11l4-4c.11-.12,.11-.3,0-.42Zm3.37,5.26h0v1c0,.16-.13,.28-.28,.28h-4.77c-.16,0-.28-.13-.28-.28v-1c0-.16,.13-.28,.28-.28h3.43V3.3h-3.42c-.16,0-.29-.13-.29-.29V1.97c0-.16,.13-.29,.29-.29h4.76c.16,0,.29,.13,.29,.29v.68h0V13.04Z" })),
|
|
417
467
|
'log-out': () => [
|
|
418
468
|
h("path", { fill: "currentColor", d: "M14.25,7.77h0l-4-4a.31.31,0,0,0-.43,0A.34.34,0,0,0,9.7,4V6.07a.32.32,0,0,1-.3.32H5.23a.3.3,0,0,0-.3.3V9.25a.3.3,0,0,0,.3.3H9.4a.31.31,0,0,1,.3.31V12a.3.3,0,0,0,.3.3.33.33,0,0,0,.23-.09l4-4A.29.29,0,0,0,14.25,7.77Z" }),
|
|
419
469
|
h("path", { fill: "currentColor", d: "M6.71,12.72H3.27V3.26H6.69A.31.31,0,0,0,7,3V2a.3.3,0,0,0-.31-.3H2A.29.29,0,0,0,1.67,2h0V3h0V14a.27.27,0,0,0,.1.24h0a.32.32,0,0,0,.14.08H6.71A.3.3,0,0,0,7,14V13A.3.3,0,0,0,6.71,12.72Z" }),
|
|
420
470
|
],
|
|
421
|
-
'magnifying-glass': () => (h("path", { fill: "currentColor", d: "M11.24
|
|
471
|
+
'magnifying-glass': () => (h("path", { fill: "currentColor", d: "M11.24 9.5c1.48-2.44.71-5.62-1.73-7.1-.05-.03-.11-.07-.17-.1A5.232 5.232 0 0 0 2.52 4C.94 6.38 1.6 9.59 3.98 11.17a5.142 5.142 0 0 0 5.54.1L12.3 14c.39.39 1.02.39 1.41 0l.33-.33a.996.996 0 0 0 0-1.41l-2.8-2.76Zm-4.4.5c-1.76.02-3.2-1.4-3.22-3.16-.02-1.76 1.4-3.2 3.16-3.22 1.76-.02 3.2 1.4 3.22 3.16v.06A3.193 3.193 0 0 1 6.84 10Z" })),
|
|
472
|
+
'mail': () => (h("path", { fill: "currentColor", d: "M13.87 2.67H2.13C1.36 2.64.71 3.23.67 4v8c.03.77.68 1.36 1.45 1.33h11.75c.77.04 1.42-.55 1.46-1.32V4c-.03-.77-.68-1.36-1.45-1.33h-.01Zm0 2.66L8 8.67 2.13 5.33V4L8 7.33 13.87 4v1.33Z" })),
|
|
473
|
+
'notes-outline': () => (h("path", { fill: "currentColor", d: "M13.11 4.74v5.38h-3v3H4.73V4.74h8.38m0-1.2H4.73a1.2 1.2 0 0 0-1.2 1.2v8.38a1.2 1.2 0 0 0 1.2 1.19h6l3.59-3.59v-6a1.2 1.2 0 0 0-1.21-1.18Zm-4.19 6.58h-3V8.93h3Zm3-2.39h-6v-1.2h6ZM3.8 11.19h-1V2.81h8.38v1h1.2v-1a1.2 1.2 0 0 0-1.2-1.2H2.81a1.2 1.2 0 0 0-1.2 1.2v8.38a1.2 1.2 0 0 0 1.2 1.2h1Z" })),
|
|
422
474
|
'paper-plane': () => (h("path", { fill: "currentColor", d: "M14 1.69 1.84 7a.28.28 0 0 0-.15.36.29.29 0 0 0 .16.15l3.27 1.82a.57.57 0 0 0 .61-.06l6.45-5.57c.05 0 .15-.1.19-.06s0 .14-.06.18l-5.59 6.29a.52.52 0 0 0 0 .63l2.09 3.44a.28.28 0 0 0 .37.12.3.3 0 0 0 .13-.12l5-12.11a.3.3 0 0 0-.14-.37.28.28 0 0 0-.17-.01Z" })),
|
|
423
475
|
'paper-plane-slash': () => (h("path", { fill: "currentColor", d: "M2.67,1.69,14.26,13.28l-1,1-2.79-2.8-1.1,2.67a.3.3,0,0,1-.13.12.28.28,0,0,1-.37-.12L6.75,10.74a.52.52,0,0,1,0-.63L7.82,8.9l-.76-.76L5.76,9.27a.57.57,0,0,1-.61.06L1.88,7.51a.29.29,0,0,1-.16-.15A.28.28,0,0,1,1.87,7L4.68,5.76l-3-3Zm11.53,0a.28.28,0,0,0-.22,0L7.53,4.51,9.26,6.24l3-2.54s.15-.1.19-.06,0,.14-.06.18L9.75,6.73l1.88,1.88,2.71-6.54A.3.3,0,0,0,14.2,1.7Z" })),
|
|
424
476
|
'pen': () => (h("path", { fill: "currentColor", d: "M1.67,11.69v2.64h2.64l7.78-7.78-2.64-2.64L1.67,11.69ZM14.13,4.51c.27-.28,.27-.72,0-1h0l-1.65-1.64c-.28-.27-.72-.27-1,0h0l-1.28,1.29,2.64,2.64,1.29-1.29Z" })),
|
|
425
477
|
'pen-fancy': () => (h("path", { fill: "currentColor", d: "M3.63,8.65c-.24,.07-.43,.26-.5,.5l-1.46,4.37,.11,.12,2.3-2.3c0-.06,0-.13,0-.19,0-.44,.35-.8,.79-.81,.44,0,.8,.35,.81,.79,0,.44-.35,.8-.79,.81,0,0-.01,0-.02,0h-.19l-2.3,2.3,.12,.11,4.37-1.46c.24-.07,.43-.26,.5-.5l.82-2.08-2.49-2.48-2.07,.82ZM10.8,2.35L6.27,7.28l2.42,2.42,4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83Z" })),
|
|
478
|
+
'picture': () => (h("path", { fill: "currentColor", d: "M14.33 12.93V3.07a1.4 1.4 0 0 0-1.4-1.4H3.07a1.4 1.4 0 0 0-1.4 1.4v9.86a1.4 1.4 0 0 0 1.4 1.4h9.86a1.4 1.4 0 0 0 1.4-1.4ZM5.54 9.06l1.76 2.11L9.76 8l3.17 4.22H3.07Z" })),
|
|
479
|
+
'play-circle': () => (h("path", { fill: "currentColor", d: "M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Zm3.42 8-5.2 3a.72.72 0 0 1-1-.28.73.73 0 0 1-.09-.35V4.92a.71.71 0 0 1 .71-.71 1.06 1.06 0 0 1 .35.09l5.2 3.17a.71.71 0 0 1 .27 1 .64.64 0 0 1-.24.24Z" })),
|
|
480
|
+
'plus': () => (h("path", { fill: "currentColor", d: "M9.41 6.59V1.92a.24.24 0 0 0-.24-.25H6.84a.24.24 0 0 0-.25.24v4.68H1.92a.24.24 0 0 0-.25.24v2.33a.24.24 0 0 0 .24.25h4.68v4.67a.24.24 0 0 0 .24.25h2.33a.24.24 0 0 0 .25-.24V9.41h4.67a.24.24 0 0 0 .25-.24V6.84a.24.24 0 0 0-.24-.25H9.41Z" })),
|
|
426
481
|
'plus-circle': () => (h("path", { fill: "currentColor", d: "M8,0.7C4,0.7,0.7,4,0.7,8S4,15.3,8,15.3S15.3,12,15.3,8l0,0C15.3,4,12,0.7,8,0.7 C8,0.7,8,0.7,8,0.7z M12.3,8.8c0,0.2-0.2,0.4-0.4,0.4H9.2v2.7c0,0.2-0.2,0.4-0.4,0.4H7.2c-0.2,0-0.4-0.2-0.3-0.4V9.2H4.1 C3.9,9.2,3.7,9,3.7,8.8V7.2c0-0.2,0.2-0.4,0.4-0.3h2.7V4.1c0-0.2,0.2-0.4,0.3-0.4h1.7c0.2,0,0.4,0.2,0.4,0.4v2.7h2.7 c0.2,0,0.4,0.2,0.4,0.3L12.3,8.8z" })),
|
|
482
|
+
'question-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 8ZM8.2 3.09A3.83 3.83 0 0 0 4.75 5a.35.35 0 0 0 .08.48l1 .78a.36.36 0 0 0 .49-.07c.55-.69.92-1.08 1.68-1.08.61 0 1.35.39 1.35 1s-.36.67-1 1S6.82 8 6.82 9.18v.12a.35.35 0 0 0 .35.35h1.66a.35.35 0 0 0 .35-.35c0-.84 2.46-.88 2.46-3.15A3.37 3.37 0 0 0 8.2 3.09ZM8 10.42a1.37 1.37 0 1 0 1.36 1.37A1.36 1.36 0 0 0 8 10.42Z" })),
|
|
427
483
|
'share': () => (h("path", { fill: "currentColor", d: "M13.43,10.67a2,2,0,0,0-2.42.18L5.64,8.28a2.11,2.11,0,0,0,0-.56L11,5.15a2,2,0,0,0,2.42.18,2,2,0,1,0-3.08-1.57L4.83,6.4l-.11-.09a2,2,0,1,0,.12,3.3l5.51,2.63a2,2,0,1,0,3.08-1.57Z" })),
|
|
484
|
+
'shuffle': () => (h("path", { fill: "currentColor", d: "M15.13 10.45a.51.51 0 0 1 0 .81l-2.29 1.91c-.29.24-.71.24-1 0-.12-.1-.2-.24-.2-.4v-.95H10c-.09 0-.18-.03-.25-.09l-2-1.8 1.49-1.37 1.51 1.35h.92V9c.04-.35.34-.6.69-.57.18 0 .35.06.48.17l2.29 1.9v-.05ZM1 6.09h2.42l1.51 1.35 1.53-1.36-2-1.8a.41.41 0 0 0-.26-.09H1a.328.328 0 0 0-.34.29v1.33c.02.17.17.3.34.28Zm10.66 0v1c.04.35.34.6.69.57.18 0 .35-.06.48-.17l2.29-1.9a.51.51 0 0 0 0-.81l-2.28-1.95a.81.81 0 0 0-1 0c-.12.1-.2.25-.2.41v1H10c-.09 0-.18.03-.25.09L3.42 9.91H1a.313.313 0 0 0-.34.28v1.33c.02.17.17.3.34.29h3.18c.09 0 .19-.03.26-.09l6.31-5.62h.91Z" })),
|
|
485
|
+
'sitemap': () => (h("path", { fill: "currentColor", d: "M3.33 10h-2c-.37 0-.66.3-.66.67v2c0 .36.3.65.66.66h2c.37 0 .66-.29.67-.66v-2c0-.37-.3-.67-.67-.67Zm-.5-1.67H7.5v1h1v-1h4.67v1h1v-1.2c0-.44-.36-.8-.8-.8H8.5V6h.83c.37 0 .67-.3.67-.67v-2c0-.37-.3-.66-.67-.66H6.67c-.37 0-.66.29-.67.66v2c0 .37.3.67.67.67h.83v1.33H2.63c-.44 0-.8.36-.8.8v1.2h1v-1ZM9 10H7c-.37 0-.67.3-.67.67v2c0 .37.3.66.67.66h2c.37 0 .66-.29.67-.66v-2c0-.37-.3-.67-.67-.67Zm5.67 0h-2c-.37 0-.67.3-.67.67v2c0 .37.3.66.67.66h2c.36 0 .65-.3.66-.66v-2c0-.37-.29-.66-.66-.67Z" })),
|
|
486
|
+
'squares': () => (h("path", { fill: "currentColor", d: "M2.27 1.67h4.47c.33 0 .6.27.6.6v4.47c0 .33-.27.6-.6.6H2.27c-.33 0-.6-.27-.6-.6V2.27c0-.33.27-.6.6-.6Zm7 0h4.47c.33 0 .6.27.6.6v4.47c0 .33-.27.6-.6.6H9.27c-.33 0-.6-.27-.6-.6V2.27c0-.33.27-.6.6-.6Zm0 7h4.47c.33 0 .6.27.6.6v4.47c0 .33-.27.6-.6.6H9.27c-.33 0-.6-.27-.6-.6V9.27c0-.33.27-.6.6-.6Zm-7 0h4.47c.33 0 .6.27.6.6v4.47c0 .33-.27.6-.6.6H2.27c-.33 0-.6-.27-.6-.6V9.27c0-.33.27-.6.6-.6Z" })),
|
|
487
|
+
'table': () => (h("path", { fill: "currentColor", d: "M14.19 2.68H1.81A1.14 1.14 0 0 0 .67 3.82v8.36a1.14 1.14 0 0 0 1.14 1.14h12.38a1.14 1.14 0 0 0 1.14-1.14V3.82a1.14 1.14 0 0 0-1.14-1.14ZM7.24 11.8H2.19V9.52h5.05Zm0-3.8H2.19V5.72h5.05Zm6.57 3.8H8.76V9.52h5.05Zm0-3.8H8.76V5.72h5.05Z" })),
|
|
488
|
+
'tag': () => (h("path", { fill: "currentColor", d: "M1.67 7.9V2.85a1.18 1.18 0 0 1 1.18-1.18H7.9a1.18 1.18 0 0 1 .84.33L14 7.26a1.2 1.2 0 0 1 0 1.68L8.94 14a1.2 1.2 0 0 1-1.68 0L2 8.74a1.18 1.18 0 0 1-.33-.84Zm2.77-4.65a1.19 1.19 0 1 0 1.18 1.19 1.19 1.19 0 0 0-1.18-1.19Z" })),
|
|
489
|
+
'tags': () => [
|
|
490
|
+
h("path", { fill: "currentColor", d: "M12.08 7.37 7.22 3a1.12 1.12 0 0 0-.78-.29H1.77a1 1 0 0 0-1.1 1v4.21a1 1 0 0 0 .33.71L5.85 13a1.17 1.17 0 0 0 1.55 0l4.68-4.25a.94.94 0 0 0 0-1.38ZM3.23 6.13A1.13 1.13 0 1 1 4.36 5a1.13 1.13 0 0 1-1.13 1.13Z" }),
|
|
491
|
+
h("path", { fill: "currentColor", d: "M15 7.37 10.15 3a1.12 1.12 0 0 0-.77-.29H8.26l4.5 4.09a1.76 1.76 0 0 1 0 2.65L8.77 13a1.17 1.17 0 0 0 1.55 0L15 8.79a.94.94 0 0 0 0-1.42Z" }),
|
|
492
|
+
],
|
|
493
|
+
'thumb-up': () => (h("path", { fill: "currentColor", d: "M2.11 14.36h1a.45.45 0 0 0 .45-.44V7.17a.45.45 0 0 0-.45-.44h-1a.44.44 0 0 0-.44.44v6.75a.44.44 0 0 0 .44.44Zm12.22-7a1.27 1.27 0 0 0-1.27-1.27H9.71l.61-2.91v-.2a1.07 1.07 0 0 0-.28-.68l-.68-.66-4.17 4.19a1.26 1.26 0 0 0-.37.9v6.36a1.27 1.27 0 0 0 1.27 1.27h5.06a1.24 1.24 0 0 0 1.17-.77l1.92-4.49a1.22 1.22 0 0 0 .09-.46V7.42Z" })),
|
|
428
494
|
'trash': () => [
|
|
429
|
-
h("path", { fill: "currentColor", d: "
|
|
495
|
+
h("path", { fill: "currentColor", d: "M3.27 14.17c0 .66.54 1.19 1.2 1.2h7l-.05-.02h.08c.64-.02 1.14-.56 1.12-1.2V4.32H3.27v9.85Zm5.97-7.12c0-.33.27-.6.6-.6s.6.27.6.6v5.3c0 .33-.27.6-.6.6s-.6-.27-.6-.6v-5.3Zm-3.5 0c0-.33.27-.59.6-.6.32.02.58.28.6.6v5.3c-.02.32-.28.58-.6.6a.645.645 0 0 1-.6-.6v-5.3Zm7.28-5.39h-2.6V.95a.28.28 0 0 0-.28-.28H5.87a.28.28 0 0 0-.28.28v.72H2.91a.28.28 0 0 0-.28.28V3.1c0 .15.12.28.28.28h10.11c.15 0 .28-.12.28-.28V1.94a.28.28 0 0 0-.28-.28Z" }),
|
|
430
496
|
h("path", { fill: "currentColor", d: "M13,2h-2.9L9.9,1.6 C9.8,1.4,9.6,1.2,9.4,1.2H6.6c-0.2,0-0.4,0.1-0.5,0.3L5.8,2H2.9C2.7,2,2.5,2.2,2.5,2.4c0,0,0,0,0,0v0.8c0,0.2,0.2,0.4,0.4,0.4H13 c0.2,0,0.4-0.2,0.4-0.4V2.4C13.4,2.2,13.2,2,13,2z" }),
|
|
431
497
|
],
|
|
498
|
+
'universal-access': () => (h("path", { fill: "currentColor", d: "M8 15.33A7.33 7.33 0 1 1 15.33 8 7.34 7.34 0 0 1 8 15.33ZM8 1.71A6.29 6.29 0 1 0 14.29 8 6.29 6.29 0 0 0 8 1.71ZM13.74 8A5.74 5.74 0 1 1 8 2.25 5.75 5.75 0 0 1 13.74 8ZM8 3.77a1.07 1.07 0 1 0 1.07 1.07A1.07 1.07 0 0 0 8 3.77ZM4.67 5.63c-.6-.14-.87.86-.32 1s1.79.43 2.57.55a11.25 11.25 0 0 1-.72 4.47.54.54 0 0 0 .85.65 6.94 6.94 0 0 0 .78-2.42c0-.07.31-.11.33 0a8.73 8.73 0 0 0 .63 2.23c.3.65 1.31.26 1-.38a11.54 11.54 0 0 1-.76-4.58 21.34 21.34 0 0 0 2.41-.45.55.55 0 1 0-.2-1.08 11.47 11.47 0 0 1-6.57.01Z" })),
|
|
499
|
+
'unlink': () => (h("path", { fill: "currentColor", d: "M9.74 6.25c-.16-.17-.32-.3-.5-.43-.14-.09-.31-.1-.44 0l1.81 1.81c-.17-.5-.47-.98-.87-1.38Zm-1.1 3.51c-.07.15-.17.28-.29.4l-1.66 1.66s-.04.05-.07.07c-.72.67-1.85.63-2.52-.09-.67-.72-.63-1.85.09-2.52l.32-.32c.1-.11.14-.27.09-.41-.14-.42-.22-.86-.24-1.3a.42.42 0 0 0-.12-.26.395.395 0 0 0-.56 0l-.92.92a3.76 3.76 0 0 0 0 5.32 3.76 3.76 0 0 0 5.32 0l1.66-1.67c.12-.12.23-.25.32-.38L8.64 9.76Zm4.61-7h-.02a3.778 3.778 0 0 0-5.32 0L6.83 3.84l1.41 1.41 1.08-1.08c.68-.71 1.81-.74 2.52-.06.71.68.74 1.81.06 2.52-.02.03-.05.05-.07.07l-.32.32c-.11.11-.14.27-.09.41.13.4.21.81.23 1.23l.44.44c.09 0 .18-.05.24-.11l.92-.92a3.76 3.76 0 0 0 0-5.32Zm.97 10.52-1.03 1.03-5.14-5.14c-.04.17-.12.33-.25.45l-.52.52c-.14.13-.35.15-.51.04-.18-.13-.35-.27-.5-.42-.74-.74-1.11-1.7-1.11-2.67 0-.24.02-.49.08-.73l-3.6-3.6 1.03-1.03 11.55 11.55Z" })),
|
|
432
500
|
'unlock': () => (h("path", { fill: "currentColor", d: "M13.33 13.94V7a1.37 1.37 0 0 0-1.28-1.44h-.72v-1.4A3.422 3.422 0 0 0 8 .67 3.4 3.4 0 0 0 4.68 4h1.26C6 2.9 6.9 2.03 8 2c1.17.03 2.1 1 2.07 2.17v1.39H4c-.75.02-1.35.64-1.33 1.39V14c.02.73.6 1.31 1.33 1.33h8c.75-.02 1.35-.64 1.33-1.39ZM8 11.84c-.77.04-1.43-.56-1.47-1.33-.04-.77.56-1.43 1.33-1.47.77-.04 1.43.56 1.47 1.33v.07c.02.75-.57 1.38-1.32 1.4H8Z" })),
|
|
501
|
+
'upload': () => (h("path", { fill: "currentColor", d: "M9.58 10.74V6.59a.31.31 0 0 1 .31-.3H12a.3.3 0 0 0 .21-.52l-4-4a.29.29 0 0 0-.42 0l-4 4a.3.3 0 0 0 .21.52h2.11a.31.31 0 0 1 .31.3v4.15a.3.3 0 0 0 .3.3h2.56a.3.3 0 0 0 .3-.3ZM14.33 14v-1a.29.29 0 0 0-.29-.3H2a.29.29 0 0 0-.29.3v1a.29.29 0 0 0 .29.29h12a.29.29 0 0 0 .33-.29Z" })),
|
|
502
|
+
'user': () => (h("path", { fill: "currentColor", d: "M8 8.79a3.56 3.56 0 1 0-3.56-3.56A3.56 3.56 0 0 0 8 8.79Zm3.17.79H9.8a4.27 4.27 0 0 1-3.6 0H4.83a3.16 3.16 0 0 0-3.16 3.17v.4a1.18 1.18 0 0 0 1.18 1.18h10.3a1.18 1.18 0 0 0 1.18-1.18v-.4a3.16 3.16 0 0 0-3.16-3.17Z" })),
|
|
503
|
+
'user-circle': () => (h("path", { fill: "currentColor", d: "M8 .62C3.95.61.66 3.9.65 7.95c0 4.05 3.28 7.34 7.33 7.35 4.04 0 7.33-3.26 7.35-7.3.02-4.05-3.25-7.36-7.3-7.38H8Zm0 .75c3.64 0 6.59 2.96 6.58 6.6V8c0 1.35-.41 2.66-1.19 3.76a2.713 2.713 0 0 0-2.66-2.37H9.54c-.98.46-2.1.46-3.08 0H5.28c-1.36 0-2.5 1.02-2.67 2.37A6.483 6.483 0 0 1 1.42 8a6.59 6.59 0 0 1 6.55-6.63H8ZM5 5.63c0-1.68 1.37-3.05 3.05-3.05 1.68 0 3.05 1.37 3.05 3.05 0 1.68-1.37 3.05-3.05 3.05H8c-1.66-.03-3-1.39-3-3.05Z" })),
|
|
504
|
+
'user-group': () => (h("path", { fill: "currentColor", d: "M13.15 4.12c-.81-.01-1.47.65-1.48 1.46 0 .82.65 1.47 1.46 1.48s1.47-.65 1.48-1.46-.65-1.47-1.46-1.48Zm-10.04.01a1.47 1.47 0 0 0-1.58 1.59c.06.71.62 1.28 1.34 1.34.81.07 1.52-.53 1.59-1.34.06-.81-.54-1.52-1.35-1.59Zm7.36.39c-.22-.84-.87-1.51-1.71-1.75-1.36-.41-2.8.36-3.22 1.72-.18.61-.13 1.27.14 1.85.41.9 1.33 1.48 2.32 1.45 1.41.01 2.56-1.14 2.57-2.55 0-.24-.03-.49-.1-.72Zm-.71 4h-.19c-.99.49-2.14.49-3.13 0h-.19c-1.46 0-2.64 1.18-2.64 2.64v2.69c1.23.93 2.74 1.47 4.39 1.47s3.17-.55 4.4-1.48v-2.68c0-1.46-1.18-2.64-2.64-2.64Zm5.52.25a7.282 7.282 0 0 1-1.65 3.91c-.08.1-.16.19-.25.28-.08.09-.17.18-.25.27v-.55h.03v-.72s.01-.07 0-.1v-.66c.01-1.25-.66-2.4-1.76-3 .27-.26.63-.41 1-.41h1.51c.63.01 1.17.41 1.37.98ZM2.86 11.16v1.52h.01v.55l-.28-.31c-.08-.08-.15-.16-.22-.24A7.238 7.238 0 0 1 .74 8.86c.16-.62.72-1.07 1.4-1.07h1.47c.37-.01.73.12 1.01.37-1.1.6-1.77 1.75-1.76 3Z" })),
|
|
433
505
|
'user-plus': () => (h("path", { fill: "currentColor", d: "M14,3.33H12.65V2a.36.36,0,0,0-.35-.33h-.65A.36.36,0,0,0,11.3,2V3.33H10a.34.34,0,0,0-.33.34v.66a.34.34,0,0,0,.33.34H11.3V6a.37.37,0,0,0,.35.33h.65A.37.37,0,0,0,12.65,6V4.67H14a.34.34,0,0,0,.32-.34V3.67A.34.34,0,0,0,14,3.33ZM9.28,9.77h-.2a5.19,5.19,0,0,1-3.91,0H5A3,3,0,0,0,1.7,12.46h0v.72A1.27,1.27,0,0,0,3,14.33h8.25a1.26,1.26,0,0,0,1.36-1.14v-.68A3,3,0,0,0,9.37,9.76H9.28ZM7.13,3.7A2.64,2.64,0,1,1,4.5,6.34h0A2.64,2.64,0,0,1,7.13,3.7Z" })),
|
|
434
506
|
'users': () => (h("path", { fill: "currentColor", d: "M12,8.76h-.2a5.24,5.24,0,0,1-3.93,0H7.61a3.05,3.05,0,0,0-3.3,2.75v.69a1.28,1.28,0,0,0,1.38,1.14H14a1.27,1.27,0,0,0,1.37-1.14v-.69A3.07,3.07,0,0,0,12,8.75Zm-6.4-.32A2,2,0,0,0,4.31,8H2.48A1.69,1.69,0,0,0,.65,9.53v.76a.85.85,0,0,0,.91.76H3.45A3.58,3.58,0,0,1,5.61,8.44ZM9.81,2.66A2.65,2.65,0,1,1,7.16,5.31h0A2.65,2.65,0,0,1,9.81,2.66ZM3.31,4.18A1.51,1.51,0,1,1,1.8,5.69,1.51,1.51,0,0,1,3.31,4.18Z" })),
|
|
507
|
+
'wallet': () => (h("path", { fill: "currentColor", d: "M13.88 5H3a.43.43 0 0 1-.46-.38.43.43 0 0 1 .46-.43h11a.43.43 0 0 0 .46-.38A1.28 1.28 0 0 0 13 2.67H2.5A1.7 1.7 0 0 0 .67 4.19v7.62a1.7 1.7 0 0 0 1.83 1.52h11.38a1.32 1.32 0 0 0 1.45-1.14V6.1A1.33 1.33 0 0 0 13.88 5Zm-1.21 5.29a1.1 1.1 0 1 1 1.1-1.1 1.1 1.1 0 0 1-1.1 1.05Z" })),
|
|
435
508
|
};
|
|
436
509
|
/**
|
|
437
510
|
* List of all possibles sizes
|
|
438
511
|
*/
|
|
439
|
-
const sizes$1 = ['regular', 'large', 'extra-large'];
|
|
512
|
+
const sizes$1 = ['small', 'regular', 'large', 'extra-large'];
|
|
440
513
|
/**
|
|
441
514
|
* List of all possibles variants
|
|
442
515
|
*/
|
|
443
516
|
const variants$2 = ['success', 'warning', 'danger', 'info'];
|
|
444
517
|
|
|
445
|
-
const mgIconCss = ":host{display
|
|
518
|
+
const mgIconCss = ":host{display:inline-flex;vertical-align:middle}.mg-icon[size=small],.mg-icon.mg-icon--size-small{width:var(--mg-icon-small-size);height:var(--mg-icon-small-size)}.mg-icon[size=regular],.mg-icon.mg-icon--size-regular{width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size)}.mg-icon[size=large],.mg-icon.mg-icon--size-large{width:var(--mg-icon-large-size);height:var(--mg-icon-large-size)}.mg-icon[size=extra-large],.mg-icon.mg-icon--size-extra-large{width:var(--mg-icon-extra-large-size);height:var(--mg-icon-extra-large-size)}.mg-icon[class*=mg-icon--variant-]{border-radius:var(--mg-message-border-radius);padding:0.3rem}.mg-icon.mg-icon--variant-success{background-color:hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) + 20%))}.mg-icon.mg-icon--variant-warning{background-color:hsl(var(--color-warning-h), var(--color-warning-s), calc(var(--color-warning-l) + 20%))}.mg-icon.mg-icon--variant-danger{background-color:hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) + 20%))}.mg-icon.mg-icon--variant-info{background-color:hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) + 20%))}.loader__full-circle{opacity:0.2}.mg-icon--spin{animation-name:rotate;animation-duration:0.75s;animation-iteration-count:infinite}@keyframes rotate{to{transform:rotate(360deg)}}";
|
|
446
519
|
|
|
447
520
|
const MgIcon = class {
|
|
448
521
|
constructor(hostRef) {
|
|
@@ -466,30 +539,46 @@ const MgIcon = class {
|
|
|
466
539
|
*/
|
|
467
540
|
this.getIcon = () => icons[this.icon]();
|
|
468
541
|
}
|
|
469
|
-
validateIcon(newValue) {
|
|
542
|
+
validateIcon(newValue, oldValue) {
|
|
470
543
|
if (!Object.keys(icons).includes(newValue)) {
|
|
471
544
|
throw new Error(`<mg-icon> prop "icon" must be one of : ${Object.keys(icons).join(', ')}`);
|
|
472
545
|
}
|
|
473
|
-
|
|
546
|
+
else {
|
|
547
|
+
if (oldValue !== undefined) {
|
|
548
|
+
this.classList.delete(`mg-icon--${oldValue}`);
|
|
549
|
+
}
|
|
550
|
+
this.classList.add(`mg-icon--${newValue}`);
|
|
551
|
+
}
|
|
474
552
|
}
|
|
475
|
-
validateSize(newValue) {
|
|
553
|
+
validateSize(newValue, oldValue) {
|
|
476
554
|
if (!sizes$1.includes(newValue)) {
|
|
477
555
|
throw new Error(`<mg-icon> prop "size" must be one of : ${sizes$1.join(', ')}`);
|
|
478
556
|
}
|
|
479
|
-
|
|
557
|
+
else {
|
|
558
|
+
if (oldValue !== undefined) {
|
|
559
|
+
this.classList.delete(`mg-icon--size-${oldValue}`);
|
|
560
|
+
}
|
|
561
|
+
this.classList.add(`mg-icon--size-${newValue}`);
|
|
562
|
+
}
|
|
480
563
|
}
|
|
481
|
-
validateVariant(newValue) {
|
|
564
|
+
validateVariant(newValue, oldValue) {
|
|
482
565
|
if (newValue !== undefined && !variants$2.includes(newValue)) {
|
|
483
566
|
throw new Error(`<mg-icon> prop "variant" must be one of : ${variants$2.join(', ')}`);
|
|
484
567
|
}
|
|
485
568
|
else if (newValue !== undefined) {
|
|
486
|
-
|
|
569
|
+
if (oldValue !== undefined) {
|
|
570
|
+
this.classList.delete(`mg-icon--variant-${oldValue}`);
|
|
571
|
+
}
|
|
572
|
+
this.classList.add(`mg-icon--variant-${newValue}`);
|
|
487
573
|
}
|
|
488
574
|
}
|
|
489
575
|
handleSpin(newValue) {
|
|
490
576
|
if (newValue) {
|
|
491
577
|
this.classList.add('mg-icon--spin');
|
|
492
578
|
}
|
|
579
|
+
else {
|
|
580
|
+
this.classList.delete('mg-icon--spin');
|
|
581
|
+
}
|
|
493
582
|
}
|
|
494
583
|
/**
|
|
495
584
|
* Check if props are well configured on init
|
|
@@ -519,14 +608,6 @@ const MgIcon = class {
|
|
|
519
608
|
};
|
|
520
609
|
MgIcon.style = mgIconCss;
|
|
521
610
|
|
|
522
|
-
/**
|
|
523
|
-
* Possible input classes
|
|
524
|
-
*/
|
|
525
|
-
var InputClass;
|
|
526
|
-
(function (InputClass) {
|
|
527
|
-
InputClass["ERROR"] = "is-not-valid";
|
|
528
|
-
})(InputClass || (InputClass = {}));
|
|
529
|
-
|
|
530
611
|
/**
|
|
531
612
|
* Apply in all input child node the aria-describedby attribute
|
|
532
613
|
*
|
|
@@ -555,11 +636,8 @@ const manageClasses = (props) => {
|
|
|
555
636
|
props.classList.add('mg-input--label-on-top');
|
|
556
637
|
if (props.readonly)
|
|
557
638
|
props.classList.add('mg-input--readonly');
|
|
558
|
-
if (props.
|
|
559
|
-
props.classList.add(`mg-input--width-${props.
|
|
560
|
-
if (props.readonly || props.disabled) {
|
|
561
|
-
props.classList.delete(InputClass.ERROR);
|
|
562
|
-
}
|
|
639
|
+
if (props.mgWidth !== undefined)
|
|
640
|
+
props.classList.add(`mg-input--width-${props.mgWidth}`);
|
|
563
641
|
};
|
|
564
642
|
/**
|
|
565
643
|
* Get tagname
|
|
@@ -593,12 +671,7 @@ const MgInput = (props, children, utils) => {
|
|
|
593
671
|
/**
|
|
594
672
|
* a11y IDs
|
|
595
673
|
*/
|
|
596
|
-
const ariaDescribedbyIDs = new Set();
|
|
597
|
-
// Character Left
|
|
598
|
-
const characterLeftId = `${props.identifier}-character-left`;
|
|
599
|
-
if (props.classList.has('is-focused') && props.displayCharacterLeft) {
|
|
600
|
-
ariaDescribedbyIDs.add(characterLeftId);
|
|
601
|
-
}
|
|
674
|
+
const ariaDescribedbyIDs = new Set(props.ariaDescribedbyIDs);
|
|
602
675
|
// Help text
|
|
603
676
|
const helpTextId = `${props.identifier}-help-text`;
|
|
604
677
|
if (typeof props.helpText === 'string' && props.helpText !== '') {
|
|
@@ -654,15 +727,14 @@ const MgInput = (props, children, utils) => {
|
|
|
654
727
|
props.readonly ? (h("div", { class: "mg-input__input-container" },
|
|
655
728
|
h("strong", null, props.readonlyValue || props.value),
|
|
656
729
|
children)) : (h("div", { class: "mg-input__input-container" },
|
|
657
|
-
h("div", { class:
|
|
730
|
+
h("div", { class: { 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined } },
|
|
658
731
|
children,
|
|
659
732
|
!props.labelOnTop && props.tooltip && getTooltip()),
|
|
660
|
-
props.displayCharacterLeft && props.maxlength && props.classList.has('is-focused') && (h("mg-character-left", { identifier: characterLeftId, characters: props.value, maxlength: props.maxlength, template: props.characterLeftTemplate })),
|
|
661
733
|
props.helpText && h("div", { id: helpTextId, class: "mg-input__help-text", innerHTML: props.helpText }),
|
|
662
|
-
props.errorMessage && h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" })))));
|
|
734
|
+
props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
|
|
663
735
|
};
|
|
664
736
|
|
|
665
|
-
const mgInputCheckboxCss = ":host{display:block}.mg-input{display
|
|
737
|
+
const mgInputCheckboxCss = ":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-icon{display:flex}.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))}fieldset.mg-input{border:0;margin-left:0;margin-right:0;padding:0}fieldset.mg-input input[type=radio],fieldset.mg-input input[type=checkbox]{flex-shrink:0;width:var(--mg-input-check-size);height:var(--mg-input-check-size);margin-top:calc((var(--font-size) * var(--line-height) - var(--mg-input-check-size)) / 2);margin-right:0.6rem;margin-bottom:0;margin-left:0}fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container{margin-top:0.7rem}.mg-input__input-container mg-tooltip{margin-left:3rem}.mg-input__input-group-container{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;column-gap:2.3rem;row-gap:1rem;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2)}.mg-input__input-group-container--vertical{flex-direction:column}.mg-input__input-group{display:flex;align-items:top}.mg-input__input-group.mg-input__input-group--disabled label{opacity:0.3}.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}";
|
|
666
738
|
|
|
667
739
|
/**
|
|
668
740
|
* type CheckboxItem validation function
|
|
@@ -679,8 +751,6 @@ const MgInputCheckbox = class {
|
|
|
679
751
|
/************
|
|
680
752
|
* Internal *
|
|
681
753
|
************/
|
|
682
|
-
// classes
|
|
683
|
-
this.classError = InputClass.ERROR;
|
|
684
754
|
// HTML selector
|
|
685
755
|
this.inputs = [];
|
|
686
756
|
/**
|
|
@@ -765,14 +835,7 @@ const MgInputCheckbox = class {
|
|
|
765
835
|
// Set error message
|
|
766
836
|
this.errorMessage = undefined;
|
|
767
837
|
if (!this.valid && invalidElement.validity.valueMissing) {
|
|
768
|
-
this.errorMessage = messages.errors.required;
|
|
769
|
-
}
|
|
770
|
-
// Update class
|
|
771
|
-
if (this.valid) {
|
|
772
|
-
this.classList.delete(this.classError);
|
|
773
|
-
}
|
|
774
|
-
else {
|
|
775
|
-
this.classList.add(this.classError);
|
|
838
|
+
this.errorMessage = this.messages.errors.required;
|
|
776
839
|
}
|
|
777
840
|
};
|
|
778
841
|
/**
|
|
@@ -796,9 +859,6 @@ const MgInputCheckbox = class {
|
|
|
796
859
|
throw new Error('<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem.');
|
|
797
860
|
}
|
|
798
861
|
}
|
|
799
|
-
handleReadOnly() {
|
|
800
|
-
this.classList.delete(this.classError);
|
|
801
|
-
}
|
|
802
862
|
/**
|
|
803
863
|
* Public method to display errors
|
|
804
864
|
*
|
|
@@ -817,7 +877,9 @@ const MgInputCheckbox = class {
|
|
|
817
877
|
* @returns {ReturnType<typeof setTimeout>} timeout
|
|
818
878
|
*/
|
|
819
879
|
componentWillLoad() {
|
|
820
|
-
//
|
|
880
|
+
// Get locales
|
|
881
|
+
this.messages = initLocales(this.element).messages;
|
|
882
|
+
// Validate
|
|
821
883
|
this.validateValue(this.value);
|
|
822
884
|
// Check validity when component is ready
|
|
823
885
|
// return a promise to process action only in the FIRST render().
|
|
@@ -832,15 +894,15 @@ const MgInputCheckbox = class {
|
|
|
832
894
|
* @returns {HTMLElement} HTML Element
|
|
833
895
|
*/
|
|
834
896
|
render() {
|
|
835
|
-
return (h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: undefined,
|
|
897
|
+
return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList } }, this.checkboxItems
|
|
836
898
|
.filter(item => {
|
|
837
899
|
return !this.readonly || item.value;
|
|
838
900
|
})
|
|
839
901
|
.map(input => (h("li", { class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "checkbox", id: input.id, name: this.identifier, value: input.value && input.value.toString(), checked: Boolean(input.value), disabled: this.readonly || this.disabled || input.disabled, required: this.required, indeterminate: input.value === null, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => this.inputs.push(el) }), h("label", { htmlFor: input.id }, input.title)))))));
|
|
840
902
|
}
|
|
903
|
+
get element() { return getElement(this); }
|
|
841
904
|
static get watchers() { return {
|
|
842
|
-
"value": ["validateValue"]
|
|
843
|
-
"readonly": ["handleReadOnly"]
|
|
905
|
+
"value": ["validateValue"]
|
|
844
906
|
}; }
|
|
845
907
|
};
|
|
846
908
|
MgInputCheckbox.style = mgInputCheckboxCss;
|
|
@@ -857,18 +919,21 @@ var InputError$1;
|
|
|
857
919
|
* Format number to the locale currency
|
|
858
920
|
*
|
|
859
921
|
* @param {number} number number to format
|
|
922
|
+
* @param {string} locale locale to apply
|
|
923
|
+
* @param {string} currency currency to apply
|
|
860
924
|
* @returns {string} formatted currency
|
|
861
925
|
*/
|
|
862
|
-
function localeCurrency(number) {
|
|
926
|
+
function localeCurrency(number, locale, currency) {
|
|
863
927
|
return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
|
|
864
928
|
}
|
|
865
929
|
/**
|
|
866
930
|
* Format number to locale
|
|
867
931
|
*
|
|
868
932
|
* @param {number} number number to format
|
|
933
|
+
* @param {string} locale locale to apply
|
|
869
934
|
* @returns {string} formatted number
|
|
870
935
|
*/
|
|
871
|
-
function localeNumber(number) {
|
|
936
|
+
function localeNumber(number, locale) {
|
|
872
937
|
return new Intl.NumberFormat(locale).format(number);
|
|
873
938
|
}
|
|
874
939
|
/**
|
|
@@ -879,27 +944,25 @@ const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
|
|
|
879
944
|
* Locale date format
|
|
880
945
|
*
|
|
881
946
|
* @param {string} date date to format
|
|
947
|
+
* @param {string} locale locale to apply
|
|
882
948
|
* @returns {string} formatted date
|
|
883
949
|
*/
|
|
884
|
-
function localeDate(date) {
|
|
950
|
+
function localeDate(date, locale) {
|
|
885
951
|
if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
|
|
886
952
|
return '';
|
|
887
953
|
}
|
|
888
954
|
return new Intl.DateTimeFormat(locale).format(new Date(date));
|
|
889
955
|
}
|
|
890
956
|
|
|
891
|
-
const mgInputDateCss = ":host{display:block}.mg-input{display
|
|
957
|
+
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-icon{display:flex}.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__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 hsla(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}";
|
|
892
958
|
|
|
893
959
|
const MgInputDate = class {
|
|
894
960
|
constructor(hostRef) {
|
|
895
961
|
registerInstance(this, hostRef);
|
|
896
962
|
this.valueChange = createEvent(this, "value-change", 7);
|
|
897
963
|
this.inputValid = createEvent(this, "input-valid", 7);
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
************/
|
|
901
|
-
// classes
|
|
902
|
-
this.classError = InputClass.ERROR;
|
|
964
|
+
// hasError (triggered by blur event)
|
|
965
|
+
this.hasError = false;
|
|
903
966
|
/**
|
|
904
967
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
905
968
|
* If not set, it will be created.
|
|
@@ -935,14 +998,16 @@ const MgInputDate = class {
|
|
|
935
998
|
*/
|
|
936
999
|
this.handleInput = () => {
|
|
937
1000
|
this.checkValidity();
|
|
1001
|
+
if (this.hasError) {
|
|
1002
|
+
this.checkError();
|
|
1003
|
+
}
|
|
938
1004
|
this.value = this.input.value;
|
|
939
1005
|
};
|
|
940
1006
|
/**
|
|
941
1007
|
* Handle blur event
|
|
942
1008
|
*/
|
|
943
1009
|
this.handleBlur = () => {
|
|
944
|
-
this.
|
|
945
|
-
this.checkError();
|
|
1010
|
+
this.displayError();
|
|
946
1011
|
};
|
|
947
1012
|
/**
|
|
948
1013
|
* Check if input is valid
|
|
@@ -993,16 +1058,16 @@ const MgInputDate = class {
|
|
|
993
1058
|
const inputError = this.getInputError();
|
|
994
1059
|
// required
|
|
995
1060
|
if (inputError === InputError$1.REQUIRED) {
|
|
996
|
-
this.errorMessage = messages.errors[inputError];
|
|
1061
|
+
this.errorMessage = this.messages.errors[inputError];
|
|
997
1062
|
}
|
|
998
1063
|
// min, max & minMax
|
|
999
1064
|
else if ([InputError$1.MIN, InputError$1.MAX, InputError$1.MINMAX].includes(inputError)) {
|
|
1000
|
-
this.errorMessage = messages.errors.date[inputError].replace('{min}', localeDate(this.min)).replace('{max}', localeDate(this.max));
|
|
1065
|
+
this.errorMessage = this.messages.errors.date[inputError].replace('{min}', localeDate(this.min, this.locale)).replace('{max}', localeDate(this.max, this.locale));
|
|
1001
1066
|
}
|
|
1002
1067
|
// wrong date format
|
|
1003
1068
|
// element.validity.badInput is default error message
|
|
1004
1069
|
else {
|
|
1005
|
-
this.errorMessage = messages.errors.date.badInput.replace('{min}', ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 ? localeDate(this.min) : localeDate('1900-01-01'));
|
|
1070
|
+
this.errorMessage = this.messages.errors.date.badInput.replace('{min}', ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 ? localeDate(this.min, this.locale) : localeDate('1900-01-01', this.locale));
|
|
1006
1071
|
}
|
|
1007
1072
|
};
|
|
1008
1073
|
/**
|
|
@@ -1015,10 +1080,6 @@ const MgInputDate = class {
|
|
|
1015
1080
|
this.errorMessage = undefined;
|
|
1016
1081
|
if (!this.valid) {
|
|
1017
1082
|
this.setErrorMessage();
|
|
1018
|
-
this.classList.add(this.classError);
|
|
1019
|
-
}
|
|
1020
|
-
else {
|
|
1021
|
-
this.classList.delete(this.classError);
|
|
1022
1083
|
}
|
|
1023
1084
|
};
|
|
1024
1085
|
}
|
|
@@ -1044,6 +1105,7 @@ const MgInputDate = class {
|
|
|
1044
1105
|
async displayError() {
|
|
1045
1106
|
this.checkValidity();
|
|
1046
1107
|
this.checkError();
|
|
1108
|
+
this.hasError = this.invalid;
|
|
1047
1109
|
}
|
|
1048
1110
|
/**
|
|
1049
1111
|
* Date format validation
|
|
@@ -1065,6 +1127,11 @@ const MgInputDate = class {
|
|
|
1065
1127
|
* @returns {ReturnType<typeof setTimeout>} timeout
|
|
1066
1128
|
*/
|
|
1067
1129
|
componentWillLoad() {
|
|
1130
|
+
// Get locales
|
|
1131
|
+
const locales = initLocales(this.element);
|
|
1132
|
+
this.locale = locales.locale;
|
|
1133
|
+
this.messages = locales.messages;
|
|
1134
|
+
// Validate
|
|
1068
1135
|
this.validateValue(this.value);
|
|
1069
1136
|
this.validateMin(this.min);
|
|
1070
1137
|
this.validateMax(this.max);
|
|
@@ -1081,8 +1148,9 @@ const MgInputDate = class {
|
|
|
1081
1148
|
* @returns {HTMLElement} HTML Element
|
|
1082
1149
|
*/
|
|
1083
1150
|
render() {
|
|
1084
|
-
return (h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly,
|
|
1151
|
+
return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, pattern: "[0-9]{4}-[0-9]{2}-[0-9]{2}", ref: el => (this.input = el) })));
|
|
1085
1152
|
}
|
|
1153
|
+
get element() { return getElement(this); }
|
|
1086
1154
|
static get watchers() { return {
|
|
1087
1155
|
"value": ["validateValue"],
|
|
1088
1156
|
"min": ["validateMin"],
|
|
@@ -1103,15 +1171,15 @@ var InputError;
|
|
|
1103
1171
|
InputError["REQUIRED"] = "required";
|
|
1104
1172
|
})(InputError || (InputError = {}));
|
|
1105
1173
|
|
|
1106
|
-
const mgInputNumericCss = ":host{display:block}.mg-input{display
|
|
1174
|
+
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-icon{display:flex}.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__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 hsla(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__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{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}.mg-input .mg-input__box{text-align:var(--mg-inputs-text-align, right)}";
|
|
1107
1175
|
|
|
1108
1176
|
const MgInputNumeric = class {
|
|
1109
1177
|
constructor(hostRef) {
|
|
1110
1178
|
registerInstance(this, hostRef);
|
|
1111
1179
|
this.valueChange = createEvent(this, "value-change", 7);
|
|
1112
1180
|
this.inputValid = createEvent(this, "input-valid", 7);
|
|
1113
|
-
//
|
|
1114
|
-
this.
|
|
1181
|
+
// hasError (triggered by blur event)
|
|
1182
|
+
this.hasError = false;
|
|
1115
1183
|
/**
|
|
1116
1184
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
1117
1185
|
* If not set, it will be created.
|
|
@@ -1142,6 +1210,10 @@ const MgInputNumeric = class {
|
|
|
1142
1210
|
* Define numeric type
|
|
1143
1211
|
*/
|
|
1144
1212
|
this.type = types[0];
|
|
1213
|
+
/**
|
|
1214
|
+
* Define currency
|
|
1215
|
+
*/
|
|
1216
|
+
this.currency = 'USD';
|
|
1145
1217
|
/**
|
|
1146
1218
|
* Override integer length
|
|
1147
1219
|
* integer is the number before the decimal point
|
|
@@ -1168,6 +1240,9 @@ const MgInputNumeric = class {
|
|
|
1168
1240
|
this.handleInput = () => {
|
|
1169
1241
|
// Check validity
|
|
1170
1242
|
this.checkValidity();
|
|
1243
|
+
if (this.hasError) {
|
|
1244
|
+
this.checkError();
|
|
1245
|
+
}
|
|
1171
1246
|
this.value = this.input.value;
|
|
1172
1247
|
};
|
|
1173
1248
|
/**
|
|
@@ -1184,9 +1259,8 @@ const MgInputNumeric = class {
|
|
|
1184
1259
|
* @returns {void}
|
|
1185
1260
|
*/
|
|
1186
1261
|
this.handleBlur = () => {
|
|
1187
|
-
//
|
|
1188
|
-
this.
|
|
1189
|
-
this.checkError();
|
|
1262
|
+
// Display Error
|
|
1263
|
+
this.displayError();
|
|
1190
1264
|
this.hasFocus = false;
|
|
1191
1265
|
};
|
|
1192
1266
|
/**
|
|
@@ -1212,10 +1286,10 @@ const MgInputNumeric = class {
|
|
|
1212
1286
|
this.setErrorMessage = () => {
|
|
1213
1287
|
const inputError = this.getInputError();
|
|
1214
1288
|
if (inputError === InputError.REQUIRED) {
|
|
1215
|
-
this.errorMessage = messages.errors[inputError];
|
|
1289
|
+
this.errorMessage = this.messages.errors[inputError];
|
|
1216
1290
|
}
|
|
1217
1291
|
else {
|
|
1218
|
-
this.errorMessage = messages.errors.numeric[inputError].replace('{min}', `${this.formatValue(this.min)}`).replace('{max}', `${this.formatValue(this.max)}`);
|
|
1292
|
+
this.errorMessage = this.messages.errors.numeric[inputError].replace('{min}', `${this.formatValue(this.min)}`).replace('{max}', `${this.formatValue(this.max)}`);
|
|
1219
1293
|
}
|
|
1220
1294
|
};
|
|
1221
1295
|
/**
|
|
@@ -1229,10 +1303,6 @@ const MgInputNumeric = class {
|
|
|
1229
1303
|
// Update class
|
|
1230
1304
|
if (!this.valid) {
|
|
1231
1305
|
this.setErrorMessage();
|
|
1232
|
-
this.classList.add(this.classError);
|
|
1233
|
-
}
|
|
1234
|
-
else {
|
|
1235
|
-
this.classList.delete(this.classError);
|
|
1236
1306
|
}
|
|
1237
1307
|
};
|
|
1238
1308
|
/**
|
|
@@ -1269,7 +1339,7 @@ const MgInputNumeric = class {
|
|
|
1269
1339
|
* @param {number} value value to format
|
|
1270
1340
|
* @returns {string} formated local value
|
|
1271
1341
|
*/
|
|
1272
|
-
this.formatValue = (value) => (this.type === 'currency' ? localeCurrency(value) : localeNumber(value));
|
|
1342
|
+
this.formatValue = (value) => (this.type === 'currency' ? localeCurrency(value, this.locale, this.currency) : localeNumber(value, this.locale));
|
|
1273
1343
|
/**
|
|
1274
1344
|
* Validate append slot
|
|
1275
1345
|
*
|
|
@@ -1305,7 +1375,7 @@ const MgInputNumeric = class {
|
|
|
1305
1375
|
// emit numeric value
|
|
1306
1376
|
this.numericValue = this.value !== '' && this.value !== null ? parseFloat(this.value.replace(',', '.')) : null;
|
|
1307
1377
|
this.valueChange.emit(this.numericValue);
|
|
1308
|
-
// Set
|
|
1378
|
+
// Set readonlyValue
|
|
1309
1379
|
this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
|
|
1310
1380
|
}
|
|
1311
1381
|
}
|
|
@@ -1313,7 +1383,6 @@ const MgInputNumeric = class {
|
|
|
1313
1383
|
if (!types.includes(newValue)) {
|
|
1314
1384
|
throw new Error(`<mg-input-numeric> prop "type" must be one of : ${types.join(', ')}`);
|
|
1315
1385
|
}
|
|
1316
|
-
this.classList.add(`mg-input--numeric--${this.type}`);
|
|
1317
1386
|
}
|
|
1318
1387
|
validateIntegerLength(newValue) {
|
|
1319
1388
|
if (newValue < 1) {
|
|
@@ -1333,6 +1402,7 @@ const MgInputNumeric = class {
|
|
|
1333
1402
|
async displayError() {
|
|
1334
1403
|
this.checkValidity();
|
|
1335
1404
|
this.checkError();
|
|
1405
|
+
this.hasError = this.invalid;
|
|
1336
1406
|
}
|
|
1337
1407
|
/**
|
|
1338
1408
|
* Displayed value in input
|
|
@@ -1352,6 +1422,11 @@ const MgInputNumeric = class {
|
|
|
1352
1422
|
* @returns {ReturnType<typeof setTimeout>} timeout
|
|
1353
1423
|
*/
|
|
1354
1424
|
componentWillLoad() {
|
|
1425
|
+
// Get locales
|
|
1426
|
+
const locales = initLocales(this.element);
|
|
1427
|
+
this.locale = locales.locale;
|
|
1428
|
+
this.messages = locales.messages;
|
|
1429
|
+
// Validate
|
|
1355
1430
|
this.validateValue(this.value);
|
|
1356
1431
|
this.validateType(this.type);
|
|
1357
1432
|
this.validateIntegerLength(this.integerLength);
|
|
@@ -1370,7 +1445,7 @@ const MgInputNumeric = class {
|
|
|
1370
1445
|
* @returns {HTMLElement} HTML Element
|
|
1371
1446
|
*/
|
|
1372
1447
|
render() {
|
|
1373
|
-
return (h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly,
|
|
1448
|
+
return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "text", class: "mg-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), h("slot", { name: "append-input" })));
|
|
1374
1449
|
}
|
|
1375
1450
|
get element() { return getElement(this); }
|
|
1376
1451
|
static get watchers() { return {
|
|
@@ -1382,18 +1457,15 @@ const MgInputNumeric = class {
|
|
|
1382
1457
|
};
|
|
1383
1458
|
MgInputNumeric.style = mgInputNumericCss;
|
|
1384
1459
|
|
|
1385
|
-
const mgInputPasswordCss = ":host{display:block}.mg-input{display
|
|
1460
|
+
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-icon{display:flex}.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__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 hsla(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__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{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}";
|
|
1386
1461
|
|
|
1387
1462
|
const MgInputPassword = class {
|
|
1388
1463
|
constructor(hostRef) {
|
|
1389
1464
|
registerInstance(this, hostRef);
|
|
1390
1465
|
this.valueChange = createEvent(this, "value-change", 7);
|
|
1391
1466
|
this.inputValid = createEvent(this, "input-valid", 7);
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
************/
|
|
1395
|
-
// classes
|
|
1396
|
-
this.classError = InputClass.ERROR;
|
|
1467
|
+
// hasError (triggered by blur event)
|
|
1468
|
+
this.hasError = false;
|
|
1397
1469
|
/**
|
|
1398
1470
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
1399
1471
|
* If not set, it will be created.
|
|
@@ -1423,7 +1495,7 @@ const MgInputPassword = class {
|
|
|
1423
1495
|
/**
|
|
1424
1496
|
* Define input width
|
|
1425
1497
|
*/
|
|
1426
|
-
this.
|
|
1498
|
+
this.mgWidth = 'full';
|
|
1427
1499
|
/**
|
|
1428
1500
|
* Component classes
|
|
1429
1501
|
*/
|
|
@@ -1433,14 +1505,16 @@ const MgInputPassword = class {
|
|
|
1433
1505
|
*/
|
|
1434
1506
|
this.handleInput = () => {
|
|
1435
1507
|
this.checkValidity();
|
|
1508
|
+
if (this.hasError) {
|
|
1509
|
+
this.checkError();
|
|
1510
|
+
}
|
|
1436
1511
|
this.value = this.input.value;
|
|
1437
1512
|
};
|
|
1438
1513
|
/**
|
|
1439
1514
|
* Handle blur event
|
|
1440
1515
|
*/
|
|
1441
1516
|
this.handleBlur = () => {
|
|
1442
|
-
this.
|
|
1443
|
-
this.checkError();
|
|
1517
|
+
this.displayError();
|
|
1444
1518
|
};
|
|
1445
1519
|
/**
|
|
1446
1520
|
* Check if input is valid
|
|
@@ -1463,14 +1537,7 @@ const MgInputPassword = class {
|
|
|
1463
1537
|
this.errorMessage = undefined;
|
|
1464
1538
|
// required
|
|
1465
1539
|
if (!this.valid && this.input.validity.valueMissing) {
|
|
1466
|
-
this.errorMessage = messages.errors.required;
|
|
1467
|
-
}
|
|
1468
|
-
// Update class
|
|
1469
|
-
if (this.valid) {
|
|
1470
|
-
this.classList.delete(this.classError);
|
|
1471
|
-
}
|
|
1472
|
-
else {
|
|
1473
|
-
this.classList.add(this.classError);
|
|
1540
|
+
this.errorMessage = this.messages.errors.required;
|
|
1474
1541
|
}
|
|
1475
1542
|
};
|
|
1476
1543
|
}
|
|
@@ -1485,6 +1552,7 @@ const MgInputPassword = class {
|
|
|
1485
1552
|
async displayError() {
|
|
1486
1553
|
this.checkValidity();
|
|
1487
1554
|
this.checkError();
|
|
1555
|
+
this.hasError = this.invalid;
|
|
1488
1556
|
}
|
|
1489
1557
|
/*************
|
|
1490
1558
|
* Lifecycle *
|
|
@@ -1495,6 +1563,8 @@ const MgInputPassword = class {
|
|
|
1495
1563
|
* @returns {ReturnType<typeof setTimeout>} timeout
|
|
1496
1564
|
*/
|
|
1497
1565
|
componentWillLoad() {
|
|
1566
|
+
// Get locales
|
|
1567
|
+
this.messages = initLocales(this.element).messages;
|
|
1498
1568
|
// Check validity when component is ready
|
|
1499
1569
|
// return a promise to process action only in the FIRST render().
|
|
1500
1570
|
// https://stenciljs.com/docs/component-lifecycle#componentwillload
|
|
@@ -1508,15 +1578,16 @@ const MgInputPassword = class {
|
|
|
1508
1578
|
* @returns {HTMLElement} HTML Element
|
|
1509
1579
|
*/
|
|
1510
1580
|
render() {
|
|
1511
|
-
return (h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly,
|
|
1581
|
+
return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "password", class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => (this.input = el) })));
|
|
1512
1582
|
}
|
|
1583
|
+
get element() { return getElement(this); }
|
|
1513
1584
|
static get watchers() { return {
|
|
1514
1585
|
"value": ["handleValue"]
|
|
1515
1586
|
}; }
|
|
1516
1587
|
};
|
|
1517
1588
|
MgInputPassword.style = mgInputPasswordCss;
|
|
1518
1589
|
|
|
1519
|
-
const mgInputRadioCss = ":host{display:block}.mg-input{display
|
|
1590
|
+
const mgInputRadioCss = ":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-icon{display:flex}.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))}fieldset.mg-input{border:0;margin-left:0;margin-right:0;padding:0}fieldset.mg-input input[type=radio],fieldset.mg-input input[type=checkbox]{flex-shrink:0;width:var(--mg-input-check-size);height:var(--mg-input-check-size);margin-top:calc((var(--font-size) * var(--line-height) - var(--mg-input-check-size)) / 2);margin-right:0.6rem;margin-bottom:0;margin-left:0}fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container{margin-top:0.7rem}.mg-input__input-container mg-tooltip{margin-left:3rem}.mg-input__input-group-container{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;column-gap:2.3rem;row-gap:1rem;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2)}.mg-input__input-group-container--vertical{flex-direction:column}.mg-input__input-group{display:flex;align-items:top}.mg-input__input-group.mg-input__input-group--disabled label{opacity:0.3}.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}";
|
|
1520
1591
|
|
|
1521
1592
|
/**
|
|
1522
1593
|
* type Option validation function
|
|
@@ -1533,8 +1604,6 @@ const MgInputRadio = class {
|
|
|
1533
1604
|
/************
|
|
1534
1605
|
* Internal *
|
|
1535
1606
|
************/
|
|
1536
|
-
// classes
|
|
1537
|
-
this.classError = InputClass.ERROR;
|
|
1538
1607
|
// HTML selector
|
|
1539
1608
|
this.inputs = [];
|
|
1540
1609
|
/**
|
|
@@ -1619,14 +1688,7 @@ const MgInputRadio = class {
|
|
|
1619
1688
|
// Set error message
|
|
1620
1689
|
this.errorMessage = undefined;
|
|
1621
1690
|
if (!this.valid && invalidElement.validity.valueMissing) {
|
|
1622
|
-
this.errorMessage = messages.errors.required;
|
|
1623
|
-
}
|
|
1624
|
-
// Update class
|
|
1625
|
-
if (this.valid) {
|
|
1626
|
-
this.classList.delete(this.classError);
|
|
1627
|
-
}
|
|
1628
|
-
else {
|
|
1629
|
-
this.classList.add(this.classError);
|
|
1691
|
+
this.errorMessage = this.messages.errors.required;
|
|
1630
1692
|
}
|
|
1631
1693
|
};
|
|
1632
1694
|
/**
|
|
@@ -1674,7 +1736,9 @@ const MgInputRadio = class {
|
|
|
1674
1736
|
* @returns {ReturnType<typeof setTimeout>} timeout
|
|
1675
1737
|
*/
|
|
1676
1738
|
componentWillLoad() {
|
|
1677
|
-
//
|
|
1739
|
+
// Get locales
|
|
1740
|
+
this.messages = initLocales(this.element).messages;
|
|
1741
|
+
// Validate
|
|
1678
1742
|
this.validateItems(this.items);
|
|
1679
1743
|
// Check validity when component is ready
|
|
1680
1744
|
// return a promise to process action only in the FIRST render().
|
|
@@ -1689,8 +1753,9 @@ const MgInputRadio = class {
|
|
|
1689
1753
|
* @returns {HTMLElement} HTML Element
|
|
1690
1754
|
*/
|
|
1691
1755
|
render() {
|
|
1692
|
-
return (h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly,
|
|
1756
|
+
return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList } }, this.options.map((input, index) => (h("li", { class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => this.inputs.push(el) }), h("label", { htmlFor: this.identifier + '_' + index }, input.title)))))));
|
|
1693
1757
|
}
|
|
1758
|
+
get element() { return getElement(this); }
|
|
1694
1759
|
static get watchers() { return {
|
|
1695
1760
|
"value": ["handleValue"],
|
|
1696
1761
|
"items": ["validateItems"]
|
|
@@ -1698,7 +1763,7 @@ const MgInputRadio = class {
|
|
|
1698
1763
|
};
|
|
1699
1764
|
MgInputRadio.style = mgInputRadioCss;
|
|
1700
1765
|
|
|
1701
|
-
const mgInputSelectCss = ":host{display:block}.mg-input{display
|
|
1766
|
+
const mgInputSelectCss = ":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-icon{display:flex}.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__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 hsla(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__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{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}.mg-input__box{width:100%;padding-top:0;padding-bottom:0;padding-right:1rem}";
|
|
1702
1767
|
|
|
1703
1768
|
/**
|
|
1704
1769
|
* Check if item is a well configured option
|
|
@@ -1706,7 +1771,7 @@ const mgInputSelectCss = ":host{display:block}.mg-input{display:-ms-flexbox;disp
|
|
|
1706
1771
|
* @param {SelectOption} option select option
|
|
1707
1772
|
* @returns {boolean} select option type is valid
|
|
1708
1773
|
*/
|
|
1709
|
-
const isOption$1 = (option) => typeof option === 'object' && typeof option.title === 'string'
|
|
1774
|
+
const isOption$1 = (option) => typeof option === 'object' && typeof option.title === 'string';
|
|
1710
1775
|
/**
|
|
1711
1776
|
* Group options
|
|
1712
1777
|
*
|
|
@@ -1741,11 +1806,8 @@ const MgInputSelect = class {
|
|
|
1741
1806
|
registerInstance(this, hostRef);
|
|
1742
1807
|
this.valueChange = createEvent(this, "value-change", 7);
|
|
1743
1808
|
this.inputValid = createEvent(this, "input-valid", 7);
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
************/
|
|
1747
|
-
// classes
|
|
1748
|
-
this.classError = InputClass.ERROR;
|
|
1809
|
+
// hasError (triggered by blur event)
|
|
1810
|
+
this.hasError = false;
|
|
1749
1811
|
/**
|
|
1750
1812
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
1751
1813
|
* If not set, it will be created.
|
|
@@ -1760,11 +1822,6 @@ const MgInputSelect = class {
|
|
|
1760
1822
|
* Define if label is visible
|
|
1761
1823
|
*/
|
|
1762
1824
|
this.labelHide = false;
|
|
1763
|
-
/**
|
|
1764
|
-
* Input placeholder.
|
|
1765
|
-
* It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.
|
|
1766
|
-
*/
|
|
1767
|
-
this.placeholder = messages.input.select.placeholder;
|
|
1768
1825
|
/**
|
|
1769
1826
|
* Option to remove placeholder
|
|
1770
1827
|
*/
|
|
@@ -1794,6 +1851,9 @@ const MgInputSelect = class {
|
|
|
1794
1851
|
*/
|
|
1795
1852
|
this.handleInput = () => {
|
|
1796
1853
|
this.checkValidity();
|
|
1854
|
+
if (this.hasError) {
|
|
1855
|
+
this.checkError();
|
|
1856
|
+
}
|
|
1797
1857
|
if (this.input.value !== '') {
|
|
1798
1858
|
this.value = allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.title === this.input.value).value;
|
|
1799
1859
|
}
|
|
@@ -1805,8 +1865,7 @@ const MgInputSelect = class {
|
|
|
1805
1865
|
* Handle blur event
|
|
1806
1866
|
*/
|
|
1807
1867
|
this.handleBlur = () => {
|
|
1808
|
-
this.
|
|
1809
|
-
this.checkError();
|
|
1868
|
+
this.displayError();
|
|
1810
1869
|
};
|
|
1811
1870
|
/**
|
|
1812
1871
|
* Check if input is valid
|
|
@@ -1828,14 +1887,7 @@ const MgInputSelect = class {
|
|
|
1828
1887
|
// Set error message
|
|
1829
1888
|
this.errorMessage = undefined;
|
|
1830
1889
|
if (!this.valid && this.input.validity.valueMissing) {
|
|
1831
|
-
this.errorMessage = messages.errors.required;
|
|
1832
|
-
}
|
|
1833
|
-
// Update class
|
|
1834
|
-
if (this.valid) {
|
|
1835
|
-
this.classList.delete(this.classError);
|
|
1836
|
-
}
|
|
1837
|
-
else {
|
|
1838
|
-
this.classList.add(this.classError);
|
|
1890
|
+
this.errorMessage = this.messages.errors.required;
|
|
1839
1891
|
}
|
|
1840
1892
|
};
|
|
1841
1893
|
}
|
|
@@ -1878,6 +1930,7 @@ const MgInputSelect = class {
|
|
|
1878
1930
|
async displayError() {
|
|
1879
1931
|
this.checkValidity();
|
|
1880
1932
|
this.checkError();
|
|
1933
|
+
this.hasError = this.invalid;
|
|
1881
1934
|
}
|
|
1882
1935
|
/*************
|
|
1883
1936
|
* Lifecycle *
|
|
@@ -1888,8 +1941,14 @@ const MgInputSelect = class {
|
|
|
1888
1941
|
* @returns {ReturnType<typeof setTimeout>} timeout
|
|
1889
1942
|
*/
|
|
1890
1943
|
componentWillLoad() {
|
|
1891
|
-
//
|
|
1944
|
+
// Get locales
|
|
1945
|
+
this.messages = initLocales(this.element).messages;
|
|
1946
|
+
// Validate
|
|
1892
1947
|
this.validateItems(this.items);
|
|
1948
|
+
// Set default placeholder
|
|
1949
|
+
if (this.placeholder === undefined || this.placeholder === '') {
|
|
1950
|
+
this.placeholder = this.messages.input.select.placeholder;
|
|
1951
|
+
}
|
|
1893
1952
|
// Check validity when component is ready
|
|
1894
1953
|
// return a promise to process action only in the FIRST render().
|
|
1895
1954
|
// https://stenciljs.com/docs/component-lifecycle#componentwillload
|
|
@@ -1903,9 +1962,10 @@ const MgInputSelect = class {
|
|
|
1903
1962
|
* @returns {HTMLElement} HTML Element
|
|
1904
1963
|
*/
|
|
1905
1964
|
render() {
|
|
1906
|
-
return (h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly,
|
|
1965
|
+
return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => (this.input = el) }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
1907
1966
|
h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => option.group !== undefined ? (h("optgroup", { label: option.group }, option.options.map(optgroup => (h("option", { value: optgroup.title, selected: JSON.stringify(this.value) === JSON.stringify(optgroup.value), disabled: optgroup.disabled }, optgroup.title))))) : (h("option", { value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title))))));
|
|
1908
1967
|
}
|
|
1968
|
+
get element() { return getElement(this); }
|
|
1909
1969
|
static get watchers() { return {
|
|
1910
1970
|
"value": ["handleValue"],
|
|
1911
1971
|
"items": ["validateItems"]
|
|
@@ -1913,7 +1973,7 @@ const MgInputSelect = class {
|
|
|
1913
1973
|
};
|
|
1914
1974
|
MgInputSelect.style = mgInputSelectCss;
|
|
1915
1975
|
|
|
1916
|
-
const mgInputTextCss = ":host{display:block}.mg-input{display
|
|
1976
|
+
const mgInputTextCss = ":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-icon{display:flex}.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__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 hsla(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__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.mg-input mg-character-left{opacity:0.6;font-size:1.1rem}.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__help-text,.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__error{margin-top:0}.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}.mg-input.mg-input--has-icon .mg-input__with-character-left>mg-icon{position:absolute;top:50%;left:var(--mg-inputs-spacer);color:var(--mg-inputs-color);transform:translateY(-50%)}.mg-input.mg-input--has-icon .mg-input__with-character-left .mg-input__box{padding-left:calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer) * 2)}.mg-input__with-character-left{position:relative;display:inline-flex;width:100%}.mg-input.is-focused .mg-input__with-character-left .mg-input__box{padding-right:calc(var(--mg-character-left-message-length) * 1ch + 0.8rem)}.mg-input__with-character-left mg-character-left{position:absolute;display:none;top:50%;right:1rem;opacity:0.6;transform:translateY(-50%);font-size:1.1rem}.mg-input.is-focused .mg-input__with-character-left mg-character-left{display:block}";
|
|
1917
1977
|
|
|
1918
1978
|
const MgInputText = class {
|
|
1919
1979
|
constructor(hostRef) {
|
|
@@ -1925,8 +1985,10 @@ const MgInputText = class {
|
|
|
1925
1985
|
************/
|
|
1926
1986
|
// classes
|
|
1927
1987
|
this.classFocus = 'is-focused';
|
|
1928
|
-
this.
|
|
1929
|
-
this.
|
|
1988
|
+
this.classIsInputGroupAppend = 'mg-input--is-input-group-append';
|
|
1989
|
+
this.classHasIcon = 'mg-input--has-icon';
|
|
1990
|
+
// hasError (triggered by blur event)
|
|
1991
|
+
this.hasError = false;
|
|
1930
1992
|
/**
|
|
1931
1993
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
1932
1994
|
* If not set, it will be created.
|
|
@@ -1964,7 +2026,7 @@ const MgInputText = class {
|
|
|
1964
2026
|
/**
|
|
1965
2027
|
* Define input width
|
|
1966
2028
|
*/
|
|
1967
|
-
this.
|
|
2029
|
+
this.mgWidth = 'full';
|
|
1968
2030
|
/**
|
|
1969
2031
|
* Define if component should display character left
|
|
1970
2032
|
*/
|
|
@@ -1980,6 +2042,9 @@ const MgInputText = class {
|
|
|
1980
2042
|
*/
|
|
1981
2043
|
this.handleInput = () => {
|
|
1982
2044
|
this.checkValidity();
|
|
2045
|
+
if (this.hasError) {
|
|
2046
|
+
this.checkError();
|
|
2047
|
+
}
|
|
1983
2048
|
this.value = this.input.value;
|
|
1984
2049
|
};
|
|
1985
2050
|
/**
|
|
@@ -2000,9 +2065,8 @@ const MgInputText = class {
|
|
|
2000
2065
|
// Manage focus
|
|
2001
2066
|
this.classList.delete(this.classFocus);
|
|
2002
2067
|
this.classList = new ClassList(this.classList.classes);
|
|
2003
|
-
//
|
|
2004
|
-
this.
|
|
2005
|
-
this.checkError();
|
|
2068
|
+
// Display Error
|
|
2069
|
+
this.displayError();
|
|
2006
2070
|
};
|
|
2007
2071
|
/**
|
|
2008
2072
|
* Check if input is valid
|
|
@@ -2033,14 +2097,7 @@ const MgInputText = class {
|
|
|
2033
2097
|
}
|
|
2034
2098
|
// required
|
|
2035
2099
|
else if (!this.valid && this.input.validity.valueMissing) {
|
|
2036
|
-
this.errorMessage = messages.errors.required;
|
|
2037
|
-
}
|
|
2038
|
-
// Update class
|
|
2039
|
-
if (this.valid) {
|
|
2040
|
-
this.classList.delete(this.classError);
|
|
2041
|
-
}
|
|
2042
|
-
else {
|
|
2043
|
-
this.classList.add(this.classError);
|
|
2100
|
+
this.errorMessage = this.messages.errors.required;
|
|
2044
2101
|
}
|
|
2045
2102
|
};
|
|
2046
2103
|
/**
|
|
@@ -2064,10 +2121,10 @@ const MgInputText = class {
|
|
|
2064
2121
|
this.validateAppendSlot = () => {
|
|
2065
2122
|
const slotAppendInput = Array.from(this.element.querySelectorAll('[slot="append-input"]'));
|
|
2066
2123
|
if (slotAppendInput.length === 1) {
|
|
2067
|
-
this.classList.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.
|
|
2124
|
+
this.classList.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-input--is-append-input-slot-content');
|
|
2068
2125
|
}
|
|
2069
2126
|
else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
|
|
2070
|
-
this.classList.add(this.
|
|
2127
|
+
this.classList.add(this.classIsInputGroupAppend);
|
|
2071
2128
|
this.classList.add('mg-input--has-buttons-group-append');
|
|
2072
2129
|
}
|
|
2073
2130
|
};
|
|
@@ -2075,6 +2132,14 @@ const MgInputText = class {
|
|
|
2075
2132
|
handleValue(newValue) {
|
|
2076
2133
|
this.valueChange.emit(newValue);
|
|
2077
2134
|
}
|
|
2135
|
+
validateIcon(newValue) {
|
|
2136
|
+
if (newValue !== undefined) {
|
|
2137
|
+
this.classList.add(this.classHasIcon);
|
|
2138
|
+
}
|
|
2139
|
+
else {
|
|
2140
|
+
this.classList.delete(this.classHasIcon);
|
|
2141
|
+
}
|
|
2142
|
+
}
|
|
2078
2143
|
/**
|
|
2079
2144
|
* Public method to play input focus
|
|
2080
2145
|
*
|
|
@@ -2091,6 +2156,7 @@ const MgInputText = class {
|
|
|
2091
2156
|
async displayError() {
|
|
2092
2157
|
this.checkValidity();
|
|
2093
2158
|
this.checkError();
|
|
2159
|
+
this.hasError = this.invalid;
|
|
2094
2160
|
}
|
|
2095
2161
|
/*************
|
|
2096
2162
|
* Lifecycle *
|
|
@@ -2101,9 +2167,11 @@ const MgInputText = class {
|
|
|
2101
2167
|
* @returns {ReturnType<typeof setTimeout>} timeout
|
|
2102
2168
|
*/
|
|
2103
2169
|
componentWillLoad() {
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
}
|
|
2170
|
+
// Get locales
|
|
2171
|
+
this.messages = initLocales(this.element).messages;
|
|
2172
|
+
this.characterLeftId = `${this.identifier}-character-left`;
|
|
2173
|
+
// Validate
|
|
2174
|
+
this.validateIcon(this.icon);
|
|
2107
2175
|
this.validatePattern();
|
|
2108
2176
|
this.validateAppendSlot();
|
|
2109
2177
|
// Check validity when component is ready
|
|
@@ -2119,16 +2187,21 @@ const MgInputText = class {
|
|
|
2119
2187
|
* @returns {HTMLElement} HTML Element
|
|
2120
2188
|
*/
|
|
2121
2189
|
render() {
|
|
2122
|
-
return (h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly,
|
|
2190
|
+
return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-input__with-character-left", style: {
|
|
2191
|
+
'--mg-character-left-message-length': (this.displayCharacterLeft
|
|
2192
|
+
? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
|
|
2193
|
+
: 0).toString(),
|
|
2194
|
+
} }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), this.displayCharacterLeft && this.maxlength && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
|
|
2123
2195
|
}
|
|
2124
2196
|
get element() { return getElement(this); }
|
|
2125
2197
|
static get watchers() { return {
|
|
2126
|
-
"value": ["handleValue"]
|
|
2198
|
+
"value": ["handleValue"],
|
|
2199
|
+
"icon": ["validateIcon"]
|
|
2127
2200
|
}; }
|
|
2128
2201
|
};
|
|
2129
2202
|
MgInputText.style = mgInputTextCss;
|
|
2130
2203
|
|
|
2131
|
-
const mgInputTextareaCss = ":host{display:block}.mg-input{display
|
|
2204
|
+
const mgInputTextareaCss = ":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-icon{display:flex}.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__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 hsla(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__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.mg-input mg-character-left{opacity:0.6;font-size:1.1rem}.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__help-text,.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__error{margin-top:0}.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}.mg-input .mg-input__box{display:block;height:auto;resize:none}.mg-input .mg-input__box.mg-input__box--resizable{resize:both}.mg-input .mg-input__box.mg-input__box--resizable-horizontal{resize:horizontal}.mg-input .mg-input__box.mg-input__box--resizable-vertical{resize:vertical}.mg-input__with-character-left{width:100%}.mg-input__with-character-left mg-character-left{display:block;visibility:hidden;margin-top:0.2rem;text-align:end}.mg-input.is-focused .mg-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-input__box{overflow-x:hidden}}";
|
|
2132
2205
|
|
|
2133
2206
|
const MgInputTextarea = class {
|
|
2134
2207
|
constructor(hostRef) {
|
|
@@ -2140,7 +2213,9 @@ const MgInputTextarea = class {
|
|
|
2140
2213
|
************/
|
|
2141
2214
|
// classes
|
|
2142
2215
|
this.classFocus = 'is-focused';
|
|
2143
|
-
this.
|
|
2216
|
+
this.classHasDisplayCharacterLeft = 'mg-input--has-display-character-left';
|
|
2217
|
+
// hasError (triggered by blur event)
|
|
2218
|
+
this.hasError = false;
|
|
2144
2219
|
/**
|
|
2145
2220
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
2146
2221
|
* If not set, it will be created.
|
|
@@ -2174,7 +2249,7 @@ const MgInputTextarea = class {
|
|
|
2174
2249
|
/**
|
|
2175
2250
|
* Define input width
|
|
2176
2251
|
*/
|
|
2177
|
-
this.
|
|
2252
|
+
this.mgWidth = 'full';
|
|
2178
2253
|
/**
|
|
2179
2254
|
* Define the number of visible text lines for the control
|
|
2180
2255
|
*/
|
|
@@ -2183,6 +2258,10 @@ const MgInputTextarea = class {
|
|
|
2183
2258
|
* Define if component should display character left
|
|
2184
2259
|
*/
|
|
2185
2260
|
this.displayCharacterLeft = true;
|
|
2261
|
+
/**
|
|
2262
|
+
* Define if input is resizable
|
|
2263
|
+
*/
|
|
2264
|
+
this.resizable = 'none';
|
|
2186
2265
|
/**
|
|
2187
2266
|
* Component classes
|
|
2188
2267
|
*/
|
|
@@ -2191,6 +2270,10 @@ const MgInputTextarea = class {
|
|
|
2191
2270
|
* Handle input event
|
|
2192
2271
|
*/
|
|
2193
2272
|
this.handleInput = () => {
|
|
2273
|
+
if (this.hasError) {
|
|
2274
|
+
this.checkValidity();
|
|
2275
|
+
this.checkError();
|
|
2276
|
+
}
|
|
2194
2277
|
this.value = this.input.value;
|
|
2195
2278
|
};
|
|
2196
2279
|
/**
|
|
@@ -2207,9 +2290,8 @@ const MgInputTextarea = class {
|
|
|
2207
2290
|
// Manage focus
|
|
2208
2291
|
this.classList.delete(this.classFocus);
|
|
2209
2292
|
this.classList = new ClassList(this.classList.classes);
|
|
2210
|
-
//
|
|
2211
|
-
this.
|
|
2212
|
-
this.checkError();
|
|
2293
|
+
// Display Error
|
|
2294
|
+
this.displayError();
|
|
2213
2295
|
};
|
|
2214
2296
|
/**
|
|
2215
2297
|
* Get pattern validity
|
|
@@ -2243,14 +2325,7 @@ const MgInputTextarea = class {
|
|
|
2243
2325
|
}
|
|
2244
2326
|
// required
|
|
2245
2327
|
else if (!this.valid && this.input.validity.valueMissing) {
|
|
2246
|
-
this.errorMessage = messages.errors.required;
|
|
2247
|
-
}
|
|
2248
|
-
// Update class
|
|
2249
|
-
if (this.valid) {
|
|
2250
|
-
this.classList.delete(this.classError);
|
|
2251
|
-
}
|
|
2252
|
-
else {
|
|
2253
|
-
this.classList.add(this.classError);
|
|
2328
|
+
this.errorMessage = this.messages.errors.required;
|
|
2254
2329
|
}
|
|
2255
2330
|
};
|
|
2256
2331
|
/**
|
|
@@ -2269,6 +2344,14 @@ const MgInputTextarea = class {
|
|
|
2269
2344
|
this.checkValidity();
|
|
2270
2345
|
this.valueChange.emit(newValue);
|
|
2271
2346
|
}
|
|
2347
|
+
validateDisplayCharacterLeft(newValue) {
|
|
2348
|
+
if (newValue) {
|
|
2349
|
+
this.classList.add(this.classHasDisplayCharacterLeft);
|
|
2350
|
+
}
|
|
2351
|
+
else {
|
|
2352
|
+
this.classList.delete(this.classHasDisplayCharacterLeft);
|
|
2353
|
+
}
|
|
2354
|
+
}
|
|
2272
2355
|
/**
|
|
2273
2356
|
* Public method to display errors
|
|
2274
2357
|
*
|
|
@@ -2277,6 +2360,7 @@ const MgInputTextarea = class {
|
|
|
2277
2360
|
async displayError() {
|
|
2278
2361
|
this.checkValidity();
|
|
2279
2362
|
this.checkError();
|
|
2363
|
+
this.hasError = this.invalid;
|
|
2280
2364
|
}
|
|
2281
2365
|
/*************
|
|
2282
2366
|
* Lifecycle *
|
|
@@ -2287,6 +2371,11 @@ const MgInputTextarea = class {
|
|
|
2287
2371
|
* @returns {ReturnType<typeof setTimeout>} timeout
|
|
2288
2372
|
*/
|
|
2289
2373
|
componentWillLoad() {
|
|
2374
|
+
// Get locales
|
|
2375
|
+
this.messages = initLocales(this.element).messages;
|
|
2376
|
+
this.characterLeftId = `${this.identifier}-character-left`;
|
|
2377
|
+
// Validate
|
|
2378
|
+
this.validateDisplayCharacterLeft(this.displayCharacterLeft);
|
|
2290
2379
|
this.validatePattern();
|
|
2291
2380
|
// Check validity when component is ready
|
|
2292
2381
|
// return a promise to process action only in the FIRST render().
|
|
@@ -2301,10 +2390,17 @@ const MgInputTextarea = class {
|
|
|
2301
2390
|
* @returns {HTMLElement} HTML Element
|
|
2302
2391
|
*/
|
|
2303
2392
|
render() {
|
|
2304
|
-
return (h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly,
|
|
2393
|
+
return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-input__with-character-left" }, h("textarea", { class: {
|
|
2394
|
+
'mg-input__box': true,
|
|
2395
|
+
'mg-input__box--resizable': this.resizable === 'both',
|
|
2396
|
+
'mg-input__box--resizable-horizontal': this.resizable === 'horizontal',
|
|
2397
|
+
'mg-input__box--resizable-vertical': this.resizable === 'vertical',
|
|
2398
|
+
}, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), this.displayCharacterLeft && this.maxlength && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
|
|
2305
2399
|
}
|
|
2400
|
+
get element() { return getElement(this); }
|
|
2306
2401
|
static get watchers() { return {
|
|
2307
|
-
"value": ["handleValue"]
|
|
2402
|
+
"value": ["handleValue"],
|
|
2403
|
+
"displayCharacterLeft": ["validateDisplayCharacterLeft"]
|
|
2308
2404
|
}; }
|
|
2309
2405
|
};
|
|
2310
2406
|
MgInputTextarea.style = mgInputTextareaCss;
|
|
@@ -2350,7 +2446,7 @@ const MgInputTitle = class {
|
|
|
2350
2446
|
};
|
|
2351
2447
|
MgInputTitle.style = mgInputTitleCss;
|
|
2352
2448
|
|
|
2353
|
-
const mgInputToggleCss = ":host{display:block}.mg-input{display
|
|
2449
|
+
const mgInputToggleCss = ":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-icon{display:flex}.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))}.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}.mg-input.mg-input.mg-input--toggle .mg-input__input-container{flex:auto;min-width:0}.mg-input__button-toggle{display:flex;padding:0.2rem;min-width:0;background-color:hsl(var(--color-light));border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size) * var(--line-height) + 2 * (0.7rem + var(--mg-inputs-border-width))) / var(--mg-input-toggle-border-radius-ratio));font-size:inherit;line-height:inherit;cursor:pointer}.mg-input__button-toggle:disabled{cursor:default}.mg-input__toggle-item-container{padding:0.5rem 0.9rem;border:0;box-sizing:border-box;border-radius:calc((var(--font-size) * var(--line-height) + 1rem) / var(--mg-input-toggle-border-radius-ratio));background-color:unset;font-weight:unset;color:hsl(var(--color-dark));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mg-input__toggle-item-container:first-of-type{font-weight:600;color:hsl(var(--color-info));background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%))}.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{background-color:unset;font-weight:unset;color:hsl(var(--color-dark))}.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{font-weight:600;color:hsl(var(--color-info));background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%))}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container{display:flex;justify-content:center;align-items:center;width:calc(var(--font-size) * var(--line-height) + 1rem);height:calc(var(--font-size) * var(--line-height) + 1rem);padding:0;visibility:hidden}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container:first-of-type{visibility:visible}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{visibility:hidden}.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{visibility:visible}.mg-input.mg-input--toggle-on-off .mg-input__toggle-item-container:first-of-type{font-weight:600;color:hsl(var(--color-dark));background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%))}.mg-input.mg-input--toggle-on-off.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{background-color:unset;font-weight:unset;color:hsl(var(--color-dark))}.mg-input.mg-input--toggle-readonly .mg-input__button-toggle{border-color:transparent;background-color:transparent;cursor:initial}.mg-input.mg-input--toggle-readonly .mg-input__toggle-item-container:last-of-type{display:none}.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{display:none}.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{display:flex}.mg-input.mg-input--toggle-disabled .mg-input__button-toggle{opacity:0.3}";
|
|
2354
2450
|
|
|
2355
2451
|
/**
|
|
2356
2452
|
* type Option validation function
|
|
@@ -2371,6 +2467,8 @@ const MgInputToggle = class {
|
|
|
2371
2467
|
this.classReadonly = 'mg-input--toggle-readonly';
|
|
2372
2468
|
this.classDisabled = 'mg-input--toggle-disabled';
|
|
2373
2469
|
this.classIsActive = 'mg-input--toggle-is-active';
|
|
2470
|
+
this.classOnOff = 'mg-input--toggle-on-off';
|
|
2471
|
+
this.classIcon = 'mg-input--toggle-icon';
|
|
2374
2472
|
/**
|
|
2375
2473
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
2376
2474
|
* If not set, it will be created.
|
|
@@ -2458,11 +2556,15 @@ const MgInputToggle = class {
|
|
|
2458
2556
|
}
|
|
2459
2557
|
handleIsOnOff(newValue) {
|
|
2460
2558
|
if (newValue)
|
|
2461
|
-
this.classList.add(
|
|
2559
|
+
this.classList.add(this.classOnOff);
|
|
2560
|
+
else
|
|
2561
|
+
this.classList.delete(this.classOnOff);
|
|
2462
2562
|
}
|
|
2463
2563
|
handleIsIcon(newValue) {
|
|
2464
2564
|
if (newValue)
|
|
2465
|
-
this.classList.add(
|
|
2565
|
+
this.classList.add(this.classIcon);
|
|
2566
|
+
else
|
|
2567
|
+
this.classList.delete(this.classIcon);
|
|
2466
2568
|
}
|
|
2467
2569
|
handleReadonly(newValue) {
|
|
2468
2570
|
if (newValue)
|
|
@@ -2525,7 +2627,7 @@ const MgInputToggle = class {
|
|
|
2525
2627
|
* @returns {HTMLElement} HTML Element
|
|
2526
2628
|
*/
|
|
2527
2629
|
render() {
|
|
2528
|
-
return (h(MgInput, { identifier: this.identifier, classList: this.classList, label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined,
|
|
2630
|
+
return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: undefined, isFieldset: false }, h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
|
|
2529
2631
|
}
|
|
2530
2632
|
get element() { return getElement(this); }
|
|
2531
2633
|
static get watchers() { return {
|
|
@@ -2545,7 +2647,7 @@ MgInputToggle.style = mgInputToggleCss;
|
|
|
2545
2647
|
*/
|
|
2546
2648
|
const variants$1 = ['info', 'warning', 'success', 'danger'];
|
|
2547
2649
|
|
|
2548
|
-
const mgMessageCss = ".mg-message{display:inline-block;position:relative
|
|
2650
|
+
const mgMessageCss = ".mg-message{display:inline-block;position:relative;box-sizing:border-box;min-height:var(--default-size);overflow:hidden;background-color:white;border-radius:var(--mg-message-border-radius);box-shadow:var(--box-shadow)}.mg-message::before{content:\"\";position:absolute;top:0;left:0;width:0.3rem;height:100%}.mg-message.mg-message--info::before{background-color:hsl(var(--color-info))}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning::before{background-color:hsl(var(--color-warning))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success::before{background-color:hsl(var(--color-success))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger::before{background-color:hsl(var(--color-danger))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{padding-right:3.4rem}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-message,mg-message{max-width:100%}";
|
|
2549
2651
|
|
|
2550
2652
|
const MgMessage = class {
|
|
2551
2653
|
constructor(hostRef) {
|
|
@@ -2555,6 +2657,9 @@ const MgMessage = class {
|
|
|
2555
2657
|
/************
|
|
2556
2658
|
* Internal *
|
|
2557
2659
|
************/
|
|
2660
|
+
// classes
|
|
2661
|
+
this.classHide = 'mg-message--hide';
|
|
2662
|
+
// IDs
|
|
2558
2663
|
this.closeButtonId = '';
|
|
2559
2664
|
// Stored timer setted when hide action is run from setTimeOut
|
|
2560
2665
|
this.storedTimer = null;
|
|
@@ -2628,10 +2733,12 @@ const MgMessage = class {
|
|
|
2628
2733
|
if (!variants$1.includes(newValue)) {
|
|
2629
2734
|
throw new Error(`<mg-message> prop "variant" must be one of : ${variants$1.join(', ')}`);
|
|
2630
2735
|
}
|
|
2631
|
-
|
|
2632
|
-
|
|
2736
|
+
else {
|
|
2737
|
+
if (oldValue !== undefined) {
|
|
2738
|
+
this.classList.delete(`mg-message--${oldValue}`);
|
|
2739
|
+
}
|
|
2740
|
+
this.classList.add(`mg-message--${newValue}`);
|
|
2633
2741
|
}
|
|
2634
|
-
this.classList.add(`mg-message--${this.variant}`);
|
|
2635
2742
|
}
|
|
2636
2743
|
validateCloseButton(newValue) {
|
|
2637
2744
|
if (newValue && this.hasActions) {
|
|
@@ -2642,11 +2749,11 @@ const MgMessage = class {
|
|
|
2642
2749
|
validateHide(newValue) {
|
|
2643
2750
|
if (newValue) {
|
|
2644
2751
|
this.componentHide.emit();
|
|
2645
|
-
this.classList.add(
|
|
2752
|
+
this.classList.add(this.classHide);
|
|
2646
2753
|
}
|
|
2647
2754
|
else {
|
|
2648
2755
|
this.componentShow.emit();
|
|
2649
|
-
this.classList.delete(
|
|
2756
|
+
this.classList.delete(this.classHide);
|
|
2650
2757
|
}
|
|
2651
2758
|
this.hideWithDelay();
|
|
2652
2759
|
}
|
|
@@ -2657,6 +2764,9 @@ const MgMessage = class {
|
|
|
2657
2764
|
* Check if component props are well configured on init
|
|
2658
2765
|
*/
|
|
2659
2766
|
componentWillLoad() {
|
|
2767
|
+
// Get locales
|
|
2768
|
+
this.messages = initLocales(this.element).messages;
|
|
2769
|
+
// Validate
|
|
2660
2770
|
this.validateVariant(this.variant);
|
|
2661
2771
|
// Check if close button is an can be activated
|
|
2662
2772
|
this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
|
|
@@ -2674,7 +2784,7 @@ const MgMessage = class {
|
|
|
2674
2784
|
* @returns {HTMLElement} HTML Element
|
|
2675
2785
|
*/
|
|
2676
2786
|
render() {
|
|
2677
|
-
return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
|
|
2787
|
+
return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
|
|
2678
2788
|
}
|
|
2679
2789
|
get element() { return getElement(this); }
|
|
2680
2790
|
static get watchers() { return {
|
|
@@ -2692,7 +2802,7 @@ var NavigationAction;
|
|
|
2692
2802
|
NavigationAction["PREVIOUS"] = "previous";
|
|
2693
2803
|
})(NavigationAction || (NavigationAction = {}));
|
|
2694
2804
|
|
|
2695
|
-
const mgPaginationCss = ".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}.mg-pagination__nav{display
|
|
2805
|
+
const mgPaginationCss = ".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}.mg-pagination__nav{display:flex;align-items:center;flex-direction:row}.mg-pagination__nav mg-input-select{margin-right:0.5rem}.mg-pagination__button{display:flex}.mg-pagination__button:first-of-type{margin-right:1rem}.mg-pagination__button:last-of-type{margin-left:1rem}";
|
|
2696
2806
|
|
|
2697
2807
|
/**
|
|
2698
2808
|
* Range generator
|
|
@@ -2719,19 +2829,11 @@ const MgPagination = class {
|
|
|
2719
2829
|
constructor(hostRef) {
|
|
2720
2830
|
registerInstance(this, hostRef);
|
|
2721
2831
|
this.currentPageChange = createEvent(this, "current-page-change", 7);
|
|
2722
|
-
/**************
|
|
2723
|
-
* Decorators *
|
|
2724
|
-
**************/
|
|
2725
2832
|
/**
|
|
2726
2833
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
2727
2834
|
* If not set, it will be created.
|
|
2728
2835
|
*/
|
|
2729
2836
|
this.identifier = createID('mg-pagination');
|
|
2730
|
-
/**
|
|
2731
|
-
* Panignation label. Is a short description.
|
|
2732
|
-
* Customize default value can be usefull to improve accessibility
|
|
2733
|
-
*/
|
|
2734
|
-
this.label = 'pagination';
|
|
2735
2837
|
/**
|
|
2736
2838
|
* Component total pages
|
|
2737
2839
|
*/
|
|
@@ -2795,8 +2897,15 @@ const MgPagination = class {
|
|
|
2795
2897
|
* @returns {void}
|
|
2796
2898
|
*/
|
|
2797
2899
|
componentWillLoad() {
|
|
2900
|
+
// Get locales
|
|
2901
|
+
this.messages = initLocales(this.element).messages;
|
|
2902
|
+
// Validate
|
|
2798
2903
|
this.validateTotalPages(this.totalPages);
|
|
2799
2904
|
this.validateCurrentPage(this.currentPage);
|
|
2905
|
+
// Set default label
|
|
2906
|
+
if (this.label === undefined || this.label === '') {
|
|
2907
|
+
this.label = this.messages.pagination.label;
|
|
2908
|
+
}
|
|
2800
2909
|
}
|
|
2801
2910
|
/**
|
|
2802
2911
|
* Render
|
|
@@ -2804,11 +2913,12 @@ const MgPagination = class {
|
|
|
2804
2913
|
* @returns {HTMLElement} HTML Element
|
|
2805
2914
|
*/
|
|
2806
2915
|
render() {
|
|
2807
|
-
const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, class: "mg-pagination__button", label: messages.pagination[`${action}Page`],
|
|
2916
|
+
const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, class: "mg-pagination__button", label: this.messages.pagination[`${action}Page`],
|
|
2808
2917
|
// eslint-disable-next-line react/jsx-no-bind
|
|
2809
|
-
onClick: () => this.handleGoToPage(action), disabled: disabled, variant: "flat" }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
|
|
2810
|
-
return (h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination__nav" }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { class: "sr-only" }, messages.pagination.page, " ", this.currentPage), h("span", null, "/ ", this.totalPages, " ", this.totalPages > 1 ? messages.pagination.pages : messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
|
|
2918
|
+
onClick: () => this.handleGoToPage(action), disabled: disabled, variant: "flat" }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
|
|
2919
|
+
return (h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination__nav" }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { class: "sr-only" }, this.messages.pagination.page, " ", this.currentPage), h("span", null, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
|
|
2811
2920
|
}
|
|
2921
|
+
get element() { return getElement(this); }
|
|
2812
2922
|
static get watchers() { return {
|
|
2813
2923
|
"totalPages": ["validateTotalPages"],
|
|
2814
2924
|
"currentPage": ["validateCurrentPage"]
|
|
@@ -2816,16 +2926,13 @@ const MgPagination = class {
|
|
|
2816
2926
|
};
|
|
2817
2927
|
MgPagination.style = mgPaginationCss;
|
|
2818
2928
|
|
|
2819
|
-
const mgPanelCss = ".mg-panel{background-color:hsl(var(--mg-panel-background));border-radius:var(--mg-panel-border-radius)
|
|
2929
|
+
const mgPanelCss = ".mg-panel{background-color:hsl(var(--mg-panel-background));border-radius:var(--mg-panel-border-radius);box-shadow:var(--box-shadow)}.mg-panel__header{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 1rem 0 0.3rem;align-items:flex-start}.mg-panel__header-left,.mg-panel__header-right{display:flex;margin:0.3rem 0}.mg-panel__header-left--full{flex:1 1 auto}.mg-panel__header-right{flex:1 auto}.mg-panel__header-left mg-input-text{flex-grow:1}.mg-panel__collapse-button .mg-button{font-family:var(--font-family-heading);font-size:1.4rem;font-weight:500}.mg-panel__collapse-button,.mg-panel__edit-button{margin:0 0.3rem 0 0}.mg-panel__content{padding:1.5rem}.mg-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;gap:1rem;margin-left:auto}";
|
|
2820
2930
|
|
|
2821
2931
|
const MgPanel = class {
|
|
2822
2932
|
constructor(hostRef) {
|
|
2823
2933
|
registerInstance(this, hostRef);
|
|
2824
2934
|
this.titleChange = createEvent(this, "title-change", 7);
|
|
2825
2935
|
this.expandedChange = createEvent(this, "expanded-change", 7);
|
|
2826
|
-
/**************
|
|
2827
|
-
* Decorators *
|
|
2828
|
-
**************/
|
|
2829
2936
|
/**
|
|
2830
2937
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
2831
2938
|
* If not set, it will be created.
|
|
@@ -2924,13 +3031,13 @@ const MgPanel = class {
|
|
|
2924
3031
|
if (this.titleEditable && !this.isEditing) {
|
|
2925
3032
|
return [
|
|
2926
3033
|
collapseButton(),
|
|
2927
|
-
h("mg-button", { "is-icon": true, variant: "flat", label: messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, h("mg-icon", { icon: "pen" })),
|
|
3034
|
+
h("mg-button", { "is-icon": true, variant: "flat", class: "mg-panel__edit-button", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, h("mg-icon", { icon: "pen" })),
|
|
2928
3035
|
];
|
|
2929
3036
|
}
|
|
2930
3037
|
if (this.titleEditable && this.isEditing) {
|
|
2931
3038
|
return [
|
|
2932
3039
|
collapseButton(),
|
|
2933
|
-
h("mg-input-text", { label: messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: messages.general.
|
|
3040
|
+
h("mg-input-text", { label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))),
|
|
2934
3041
|
];
|
|
2935
3042
|
}
|
|
2936
3043
|
return collapseButton();
|
|
@@ -2959,6 +3066,9 @@ const MgPanel = class {
|
|
|
2959
3066
|
* @returns {void}
|
|
2960
3067
|
*/
|
|
2961
3068
|
componentWillLoad() {
|
|
3069
|
+
// Get locales
|
|
3070
|
+
this.messages = initLocales(this.element).messages;
|
|
3071
|
+
// Validate
|
|
2962
3072
|
this.validatetitlePattern(this.titlePattern);
|
|
2963
3073
|
}
|
|
2964
3074
|
/**
|
|
@@ -2980,6 +3090,7 @@ const MgPanel = class {
|
|
|
2980
3090
|
render() {
|
|
2981
3091
|
return (h("section", { class: this.classList.join(), id: this.identifier }, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, h("slot", null))));
|
|
2982
3092
|
}
|
|
3093
|
+
get element() { return getElement(this); }
|
|
2983
3094
|
static get watchers() { return {
|
|
2984
3095
|
"panelTitle": ["handelTileChange"],
|
|
2985
3096
|
"titlePattern": ["validatetitlePattern"],
|
|
@@ -2988,12 +3099,19 @@ const MgPanel = class {
|
|
|
2988
3099
|
};
|
|
2989
3100
|
MgPanel.style = mgPanelCss;
|
|
2990
3101
|
|
|
3102
|
+
var Status;
|
|
3103
|
+
(function (Status) {
|
|
3104
|
+
Status["VISIBLE"] = "visible";
|
|
3105
|
+
Status["HIDDEN"] = "hidden";
|
|
3106
|
+
Status["DISABLED"] = "disabled";
|
|
3107
|
+
Status["ACTIVE"] = "active";
|
|
3108
|
+
})(Status || (Status = {}));
|
|
2991
3109
|
/**
|
|
2992
3110
|
* List of all possibles sizes
|
|
2993
3111
|
*/
|
|
2994
3112
|
const sizes = ['regular', 'large'];
|
|
2995
3113
|
|
|
2996
|
-
const mgTabsCss = ".mg-tabs.mg-tabs--size-regular
|
|
3114
|
+
const mgTabsCss = ".mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button{padding:calc(1rem + 0.3rem) calc(1rem * 1.3) 1rem}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button{padding:calc(1.8rem + 0.3rem) calc(1.8rem * 1.3) 1.8rem}.mg-tabs__header{display:flex;flex-direction:row;flex-wrap:wrap}.mg-tabs__navigation-button{display:flex;align-items:center;column-gap:0.5rem;background:none;border:none;border-bottom:0.3rem solid transparent;color:hsl(var(--color-dark));line-height:var(--line-height);cursor:pointer}.mg-tabs__navigation-button:disabled,.mg-tabs__navigation-button--disabled{cursor:default;opacity:30%}.mg-tabs__navigation-button:hover:not(:disabled),.mg-tabs__navigation-button:focus:not(:disabled){background-color:hsla(var(--color-info-h), var(--color-info-s), var(--color-info-l), 10%)}.mg-tabs__navigation-button.mg-tabs__navigation-button--active{color:hsl(var(--color-info));border-bottom-color:hsl(var(--color-info));font-weight:700}.mg-tabs__navigation-button.mg-tabs__navigation-button--hidden{display:none}.mg-tabs__content-container:focus-visible{outline:none}";
|
|
2997
3115
|
|
|
2998
3116
|
/**
|
|
2999
3117
|
* type TabItem validation function
|
|
@@ -3006,6 +3124,12 @@ const MgTabs = class {
|
|
|
3006
3124
|
constructor(hostRef) {
|
|
3007
3125
|
registerInstance(this, hostRef);
|
|
3008
3126
|
this.activeTabChange = createEvent(this, "active-tab-change", 7);
|
|
3127
|
+
/************
|
|
3128
|
+
* Internal *
|
|
3129
|
+
************/
|
|
3130
|
+
this.tabPanel = 'panel';
|
|
3131
|
+
this.startIndex = 1;
|
|
3132
|
+
this.buttonTabBaseClass = 'mg-tabs__navigation-button';
|
|
3009
3133
|
/**
|
|
3010
3134
|
* Identifier is used for the element ID (id is a reserved prop in Stencil.js)
|
|
3011
3135
|
* If not set, it will be created.
|
|
@@ -3028,6 +3152,46 @@ const MgTabs = class {
|
|
|
3028
3152
|
* Component classes
|
|
3029
3153
|
*/
|
|
3030
3154
|
this.classList = new ClassList(['mg-tabs']);
|
|
3155
|
+
/**
|
|
3156
|
+
* Method to set active tab
|
|
3157
|
+
*
|
|
3158
|
+
* @param {number} tabKey item tab key to set to ACTIVE status
|
|
3159
|
+
* @returns {void}
|
|
3160
|
+
*/
|
|
3161
|
+
this.setActiveTab = (tabKey) => {
|
|
3162
|
+
// reset active tabs
|
|
3163
|
+
this.tabs.forEach(tab => {
|
|
3164
|
+
if (this.tabHasGivenStatus(tab, Status.ACTIVE))
|
|
3165
|
+
tab.status = Status.VISIBLE;
|
|
3166
|
+
});
|
|
3167
|
+
// set active tab from given tab key
|
|
3168
|
+
this.tabs[tabKey - this.startIndex].status = Status.ACTIVE;
|
|
3169
|
+
// emit change active tab key event
|
|
3170
|
+
this.activeTabChange.emit(tabKey);
|
|
3171
|
+
};
|
|
3172
|
+
/**
|
|
3173
|
+
* Method to know if given tab has the given status
|
|
3174
|
+
*
|
|
3175
|
+
* @param {TabItem} tab item tab key to set to ACTIVE status
|
|
3176
|
+
* @param {Status} status status to valide
|
|
3177
|
+
* @returns {boolean} status comparaison
|
|
3178
|
+
*/
|
|
3179
|
+
this.tabHasGivenStatus = (tab, status) => tab.status === status;
|
|
3180
|
+
/**
|
|
3181
|
+
* Method to get element id from index
|
|
3182
|
+
*
|
|
3183
|
+
* @param {string} element to get id
|
|
3184
|
+
* @param {number} index to generate id
|
|
3185
|
+
* @returns {string} generated element id
|
|
3186
|
+
*/
|
|
3187
|
+
this.getElementId = (element, index) => `${element}-${this.getTabIndex(index)}`;
|
|
3188
|
+
/**
|
|
3189
|
+
* Method to get tab index
|
|
3190
|
+
*
|
|
3191
|
+
* @param {number} index to get
|
|
3192
|
+
* @returns {number} index
|
|
3193
|
+
*/
|
|
3194
|
+
this.getTabIndex = (index) => index + this.startIndex;
|
|
3031
3195
|
/**
|
|
3032
3196
|
* Handle click events on tabs
|
|
3033
3197
|
*
|
|
@@ -3037,6 +3201,14 @@ const MgTabs = class {
|
|
|
3037
3201
|
const tabId = event.currentTarget.getAttribute('data-index');
|
|
3038
3202
|
this.activeTab = Number(tabId);
|
|
3039
3203
|
};
|
|
3204
|
+
/**
|
|
3205
|
+
* get navigation button class from given status
|
|
3206
|
+
*
|
|
3207
|
+
* @param {Status} status button tab status
|
|
3208
|
+
* @param {boolean} isSelector set if we need a CSS selector with the dot '.' at the begin. default value = false.
|
|
3209
|
+
* @returns {string} button class/selector variant
|
|
3210
|
+
*/
|
|
3211
|
+
this.getNavigationButtonClass = (status, isSelector = false) => `${isSelector ? '.' : ''}${this.buttonTabBaseClass}--${status}`;
|
|
3040
3212
|
/**
|
|
3041
3213
|
* Handle keyboard event on tabs
|
|
3042
3214
|
*
|
|
@@ -3047,16 +3219,14 @@ const MgTabs = class {
|
|
|
3047
3219
|
let tabId = Number(event.target.getAttribute('data-index'));
|
|
3048
3220
|
const parent = event.target.parentElement;
|
|
3049
3221
|
// change selected id from key code
|
|
3050
|
-
|
|
3051
|
-
if (['ArrowRight', 'Right'].includes(event.key)) {
|
|
3222
|
+
if (event.key === 'ArrowRight') {
|
|
3052
3223
|
tabId++;
|
|
3053
|
-
// /* IE FIX */ delete 'Left'
|
|
3054
3224
|
}
|
|
3055
|
-
else if (
|
|
3225
|
+
else if (event.key === 'ArrowLeft') {
|
|
3056
3226
|
tabId--;
|
|
3057
3227
|
}
|
|
3058
|
-
// get selected tab
|
|
3059
|
-
const selectedTab = parent.querySelector(`[data-index="${tabId}"]`);
|
|
3228
|
+
// get selected tab if NOT hidden, disabled
|
|
3229
|
+
const selectedTab = parent.querySelector(`[data-index="${tabId}"]:not(${[this.getNavigationButtonClass(Status.HIDDEN, true), this.getNavigationButtonClass(Status.DISABLED, true)].join()})`);
|
|
3060
3230
|
// apply selected tab if exist
|
|
3061
3231
|
if (selectedTab !== null) {
|
|
3062
3232
|
selectedTab.focus();
|
|
@@ -3082,7 +3252,7 @@ const MgTabs = class {
|
|
|
3082
3252
|
validateItems(newValue) {
|
|
3083
3253
|
// String array
|
|
3084
3254
|
if (allItemsAreString(newValue)) {
|
|
3085
|
-
this.tabs = newValue.map(item => ({ label: item,
|
|
3255
|
+
this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
|
|
3086
3256
|
}
|
|
3087
3257
|
// Object array
|
|
3088
3258
|
else if (newValue && newValue.every(item => isTabItem(item))) {
|
|
@@ -3097,7 +3267,7 @@ const MgTabs = class {
|
|
|
3097
3267
|
throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
|
|
3098
3268
|
}
|
|
3099
3269
|
else {
|
|
3100
|
-
this.
|
|
3270
|
+
this.setActiveTab(newValue);
|
|
3101
3271
|
}
|
|
3102
3272
|
}
|
|
3103
3273
|
/*************
|
|
@@ -3121,17 +3291,12 @@ const MgTabs = class {
|
|
|
3121
3291
|
* @returns {HTMLElement} HTML Element
|
|
3122
3292
|
*/
|
|
3123
3293
|
render() {
|
|
3124
|
-
return (h(Host, null, h("div", { class: this.classList.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => {
|
|
3125
|
-
|
|
3126
|
-
|
|
3127
|
-
|
|
3128
|
-
|
|
3129
|
-
|
|
3130
|
-
}, tabindex: tabIndex === this.activeTab ? 0 : -1, "aria-selected": (tabIndex === this.activeTab).toString(), "aria-controls": `pannel-${tabIndex}`, onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": tabIndex, disabled: tab.disabled }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label })));
|
|
3131
|
-
})), this.tabs.map((_tab, index) => {
|
|
3132
|
-
const tabIndex = index + 1;
|
|
3133
|
-
return (h("article", { role: "tabpanel", id: `pannel-${tabIndex}`, hidden: tabIndex !== this.activeTab, "aria-labelledby": `${this.identifier}-${this.activeTab}`, tabindex: tabIndex === this.activeTab ? 0 : -1, class: "mg-tabs__content-container" }, h("slot", { name: `tab_content-${tabIndex}` })));
|
|
3134
|
-
}))));
|
|
3294
|
+
return (h(Host, null, h("div", { class: this.classList.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { role: "tab", id: this.getElementId(this.identifier, index), class: {
|
|
3295
|
+
[`${this.buttonTabBaseClass}`]: true,
|
|
3296
|
+
[`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasGivenStatus(tab, Status.ACTIVE),
|
|
3297
|
+
[`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasGivenStatus(tab, Status.DISABLED),
|
|
3298
|
+
[`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasGivenStatus(tab, Status.HIDDEN),
|
|
3299
|
+
}, tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasGivenStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabIndex(index), disabled: this.tabHasGivenStatus(tab, Status.DISABLED) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label }))))), this.tabs.map((tab, index) => (h("article", { role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasGivenStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) })))))));
|
|
3135
3300
|
}
|
|
3136
3301
|
get element() { return getElement(this); }
|
|
3137
3302
|
static get watchers() { return {
|
|
@@ -3147,29 +3312,44 @@ MgTabs.style = mgTabsCss;
|
|
|
3147
3312
|
*/
|
|
3148
3313
|
const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
|
|
3149
3314
|
|
|
3150
|
-
const mgTagCss = ".mg-tag{padding:calc((var(--mg-tag-height) - 0.2rem - var(--mg-tag-font-size) * var(--line-height)) / 2) 0.6rem;min-height:var(--mg-tag-height)
|
|
3315
|
+
const mgTagCss = ".mg-tag{padding:calc((var(--mg-tag-height) - 0.2rem - var(--mg-tag-font-size) * var(--line-height)) / 2) 0.6rem;min-height:var(--mg-tag-height);box-sizing:border-box;border-radius:var(--mg-tag-border-radius);border:0.1rem solid;font-size:var(--mg-tag-font-size);font-weight:600;text-align:center}.mg-tag.mg-tag--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-tag.mg-tag--primary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-tag.mg-tag--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-tag.mg-tag--success.mg-tag--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-tag.mg-tag--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-tag.mg-tag--warning.mg-tag--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-tag.mg-tag--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-tag.mg-tag--danger.mg-tag--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-tag.mg-tag--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-tag.mg-tag--info.mg-tag--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-tag,mg-tag{display:inline-block;vertical-align:middle}";
|
|
3151
3316
|
|
|
3152
3317
|
const MgTag = class {
|
|
3153
3318
|
constructor(hostRef) {
|
|
3154
3319
|
registerInstance(this, hostRef);
|
|
3320
|
+
/************
|
|
3321
|
+
* Internal *
|
|
3322
|
+
************/
|
|
3323
|
+
// classes
|
|
3324
|
+
this.classOutline = `mg-tag--outline`;
|
|
3325
|
+
/**************
|
|
3326
|
+
* Decorators *
|
|
3327
|
+
**************/
|
|
3155
3328
|
/**
|
|
3156
3329
|
* Define button variant
|
|
3157
3330
|
*/
|
|
3158
|
-
this.variant = variants[0]; //
|
|
3331
|
+
this.variant = variants[0]; // primary
|
|
3159
3332
|
/**
|
|
3160
3333
|
* Component classes
|
|
3161
3334
|
*/
|
|
3162
3335
|
this.classList = new ClassList(['mg-tag']);
|
|
3163
3336
|
}
|
|
3164
|
-
validateVariant(newValue) {
|
|
3337
|
+
validateVariant(newValue, oldValue) {
|
|
3165
3338
|
if (!variants.includes(newValue)) {
|
|
3166
3339
|
throw new Error(`<mg-tag> prop "variant" must be one of : ${variants.join(', ')}.`);
|
|
3167
3340
|
}
|
|
3168
|
-
|
|
3341
|
+
else {
|
|
3342
|
+
if (oldValue !== undefined) {
|
|
3343
|
+
this.classList.delete(`mg-tag--${oldValue}`);
|
|
3344
|
+
}
|
|
3345
|
+
this.classList.add(`mg-tag--${newValue}`);
|
|
3346
|
+
}
|
|
3169
3347
|
}
|
|
3170
3348
|
validateOutline(newValue) {
|
|
3171
3349
|
if (newValue)
|
|
3172
|
-
this.classList.add(
|
|
3350
|
+
this.classList.add(this.classOutline);
|
|
3351
|
+
else
|
|
3352
|
+
this.classList.delete(this.classOutline);
|
|
3173
3353
|
}
|
|
3174
3354
|
/*************
|
|
3175
3355
|
* Lifecycle *
|
|
@@ -3198,7 +3378,7 @@ const MgTag = class {
|
|
|
3198
3378
|
};
|
|
3199
3379
|
MgTag.style = mgTagCss;
|
|
3200
3380
|
|
|
3201
|
-
const mgTooltipCss = ".sc-mg-tooltip-h{display:inline-block}.mg-tooltip.sc-mg-tooltip{display:none;padding:0.5rem 0.8rem;z-index:9999;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start}.mg-tooltip[data-show].sc-mg-tooltip{display:block}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip,.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background:inherit}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip{visibility:hidden}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{visibility:visible;content:\"\"
|
|
3381
|
+
const mgTooltipCss = ".sc-mg-tooltip-h{display:inline-block}.mg-tooltip.sc-mg-tooltip{display:none;padding:0.5rem 0.8rem;z-index:9999;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start}.mg-tooltip[data-show].sc-mg-tooltip{display:block}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip,.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background:inherit}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip{visibility:hidden}.mg-tooltip.sc-mg-tooltip .mg-tooltip__arrow.sc-mg-tooltip::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-tooltip[data-popper-placement^=top].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{bottom:-4px}.mg-tooltip[data-popper-placement^=bottom].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{top:-4px}.mg-tooltip[data-popper-placement^=left].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{right:-4px}.mg-tooltip[data-popper-placement^=right].sc-mg-tooltip>.mg-tooltip__arrow.sc-mg-tooltip{left:-4px}";
|
|
3202
3382
|
|
|
3203
3383
|
const MgTooltip = class {
|
|
3204
3384
|
constructor(hostRef) {
|