@mgdis/mg-components 6.23.0 → 6.25.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-Acmyl4hv.js +5 -0
- package/dist/cjs/{index-BxB20_Vw.js → index-B6J2EllP.js} +3 -1
- package/dist/cjs/{index-BEF-cqV9.js → index-BmFwLEZT.js} +5 -1
- package/dist/cjs/{index-CpENFzEo.js → index-DrZECzp6.js} +14 -6
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mg-action-more_36.cjs.entry.js +394 -260
- package/dist/cjs/mg-alert.cjs.entry.js +7 -8
- package/dist/cjs/mg-breadcrumb.cjs.entry.js +27 -10
- package/dist/cjs/mg-components.cjs.js +2 -2
- package/dist/cjs/mg-fieldset.cjs.entry.js +8 -8
- package/dist/cjs/mg-illustration.cjs.entry.js +57 -0
- package/dist/cjs/mg-input-combobox.cjs.entry.js +46 -28
- package/dist/cjs/mg-input-file.cjs.entry.js +12 -11
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +3367 -4140
- package/dist/cjs/mg-loader.cjs.entry.js +5 -5
- package/dist/cjs/mg-progress.cjs.entry.js +3 -3
- package/dist/collection/assets/illustrations/index.js +1 -0
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/atoms/internals/mg-character-left/mg-character-left.js +1 -1
- package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js +1 -1
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +1 -1
- package/dist/collection/components/atoms/mg-button/mg-button.js +4 -1
- package/dist/collection/components/atoms/mg-card/mg-card.js +1 -1
- package/dist/collection/components/atoms/mg-divider/mg-divider.conf.js +4 -0
- package/dist/collection/components/atoms/mg-divider/mg-divider.js +62 -3
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +1 -1
- package/dist/collection/components/atoms/mg-illustration/mg-illustration.conf.js +1 -0
- package/dist/collection/components/atoms/mg-illustration/mg-illustration.js +95 -0
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +9 -7
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +49 -19
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js +5 -2
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxPaginated.js +5 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +30 -22
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js +75 -30
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +14 -8
- package/dist/collection/components/molecules/inputs/mg-input-file/mg-input-file.js +8 -7
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +21 -12
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +7 -7
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +15 -10
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/index.js +29 -3
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +260 -7
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +21 -19
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +18 -13
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +7 -7
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +10 -9
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js +1 -1
- package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js +7 -5
- package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js +18 -17
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +7 -4
- package/dist/collection/components/molecules/mg-alert/mg-alert.js +6 -7
- package/dist/collection/components/molecules/mg-breadcrumb/mg-breadcrumb.js +49 -6
- package/dist/collection/components/molecules/mg-details/mg-details.js +1 -1
- package/dist/collection/components/molecules/mg-fieldset/mg-fieldset.js +6 -6
- package/dist/collection/components/molecules/mg-form/mg-form.js +16 -13
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +2 -2
- package/dist/collection/components/molecules/mg-loader/mg-loader.js +1 -1
- package/dist/collection/components/molecules/mg-message/mg-message.js +2 -2
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +2 -2
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +8 -4
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +13 -4
- package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js +2 -2
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +29 -37
- package/dist/collection/components/molecules/mg-progress/mg-progress.js +1 -1
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +5 -3
- package/dist/collection/components/molecules/mg-table/mg-table.js +10 -6
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +12 -9
- package/dist/collection/utils/behaviors.utils.js +3 -3
- package/dist/collection/utils/playwright.fixture.js +7 -2
- package/dist/components/mg-action-more.js +1 -1
- package/dist/components/mg-alert.js +1 -1
- package/dist/components/mg-badge2.js +1 -1
- package/dist/components/mg-breadcrumb.js +1 -1
- package/dist/components/mg-button2.js +1 -1
- package/dist/components/mg-card2.js +1 -1
- package/dist/components/mg-character-left2.js +1 -1
- package/dist/components/mg-details.js +1 -1
- package/dist/components/mg-divider2.js +1 -1
- package/dist/components/mg-fieldset.js +1 -1
- package/dist/components/mg-form.js +1 -1
- package/dist/components/mg-icon2.js +1 -1
- package/dist/components/mg-illustrated-message.js +1 -1
- package/dist/components/mg-illustration.d.ts +11 -0
- package/dist/components/mg-illustration.js +1 -0
- package/dist/components/mg-input-checkbox.js +1 -1
- package/dist/components/mg-input-combobox.js +1 -1
- package/dist/components/mg-input-date.js +1 -1
- package/dist/components/mg-input-file.js +1 -1
- package/dist/components/mg-input-numeric.js +1 -1
- package/dist/components/mg-input-password.js +1 -1
- package/dist/components/mg-input-radio.js +1 -1
- package/dist/components/mg-input-rich-text-editor.js +298 -289
- package/dist/components/mg-input-select2.js +1 -1
- package/dist/components/mg-input-text2.js +1 -1
- package/dist/components/mg-input-textarea.js +1 -1
- package/dist/components/mg-input-title2.js +1 -1
- package/dist/components/mg-input-toggle.js +1 -1
- package/dist/components/mg-input2.js +1 -1
- package/dist/components/mg-item-more2.js +1 -1
- package/dist/components/mg-loader2.js +1 -1
- package/dist/components/mg-menu-item2.js +1 -1
- package/dist/components/mg-message2.js +1 -1
- package/dist/components/mg-modal.js +1 -1
- package/dist/components/mg-pagination.js +1 -1
- package/dist/components/mg-panel.js +1 -1
- package/dist/components/mg-popover-content2.js +1 -1
- package/dist/components/mg-popover2.js +1 -1
- package/dist/components/mg-progress.js +1 -1
- package/dist/components/mg-skip-links.js +1 -1
- package/dist/components/mg-table.js +1 -1
- package/dist/components/mg-tabs2.js +1 -1
- package/dist/components/mg-tag.js +1 -1
- package/dist/components/mg-tooltip-content2.js +1 -1
- package/dist/components/mg-tooltip2.js +1 -1
- package/dist/custom-elements.json +178 -48
- package/dist/esm/{index-C7xjtdiw.js → index-91BOpzAB.js} +14 -6
- package/dist/esm/{index-DSEloqPn.js → index-BfblyCaJ.js} +3 -1
- package/dist/esm/index-Ci9Hv7DG.js +3 -0
- package/dist/esm/{index-DshvCiTL.js → index-D4bO_UCn.js} +5 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mg-action-more_36.entry.js +391 -257
- package/dist/esm/mg-alert.entry.js +7 -8
- package/dist/esm/mg-breadcrumb.entry.js +27 -10
- package/dist/esm/mg-components.js +3 -3
- package/dist/esm/mg-fieldset.entry.js +8 -8
- package/dist/esm/mg-illustration.entry.js +55 -0
- package/dist/esm/mg-input-combobox.entry.js +46 -28
- package/dist/esm/mg-input-file.entry.js +12 -11
- package/dist/esm/mg-input-rich-text-editor.entry.js +3352 -4125
- package/dist/esm/mg-loader.entry.js +5 -5
- package/dist/esm/mg-progress.entry.js +3 -3
- package/dist/mg-components/mg-components.css +1 -1
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/{p-cdb01923.entry.js → p-3ad7441c.entry.js} +1 -1
- package/dist/mg-components/p-413b4536.entry.js +1 -0
- package/dist/mg-components/p-4693077a.entry.js +1 -0
- package/dist/mg-components/p-5dff879a.entry.js +1 -0
- package/dist/mg-components/{p-236bb1d2.entry.js → p-96fc508e.entry.js} +1 -1
- package/dist/mg-components/p-Ci9Hv7DG.js +1 -0
- package/dist/mg-components/p-D4bO_UCn.js +2 -0
- package/dist/mg-components/{p-d0b6d8f5.entry.js → p-ad533d08.entry.js} +1 -1
- package/dist/mg-components/p-b20f3698.entry.js +1 -0
- package/dist/mg-components/p-d0d12800.entry.js +1 -0
- package/dist/mg-components/p-ec4bd337.entry.js +1667 -0
- package/dist/mg-components/p-f8e58181.entry.js +1 -0
- package/dist/types/assets/illustrations/index.d.ts +21 -0
- package/dist/types/components/atoms/mg-divider/mg-divider.conf.d.ts +9 -0
- package/dist/types/components/atoms/mg-divider/mg-divider.d.ts +13 -0
- package/dist/types/components/atoms/mg-illustration/mg-illustration.conf.d.ts +5 -0
- package/dist/types/components/atoms/mg-illustration/mg-illustration.d.ts +24 -0
- package/dist/types/components/molecules/inputs/mg-input/mg-input.d.ts +18 -0
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-combobox/mg-input-combobox.d.ts +10 -5
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.conf.d.ts +4 -0
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.conf.d.ts +25 -0
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.d.ts +61 -2
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +2 -2
- package/dist/types/components/molecules/menus/mg-menu-item/mg-menu-item.d.ts +2 -2
- package/dist/types/components/molecules/mg-alert/mg-alert.d.ts +2 -2
- package/dist/types/components/molecules/mg-breadcrumb/mg-breadcrumb.d.ts +11 -0
- package/dist/types/components/molecules/mg-popover/mg-popover-content/mg-popover-content.d.ts +1 -1
- package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +3 -3
- package/dist/types/components/molecules/mg-skip-links/mg-skip-links.d.ts +1 -1
- package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts +1 -1
- package/dist/types/components.d.ts +145 -40
- package/ide/intellij/web-types.json +134 -64
- package/ide/vscode/css-custom-data.json +6 -2
- package/ide/vscode/html-custom-data.json +190 -32
- package/package.json +22 -22
- package/dist/mg-components/p-13feb37a.entry.js +0 -1
- package/dist/mg-components/p-79265ad3.entry.js +0 -1
- package/dist/mg-components/p-7c63e469.entry.js +0 -1
- package/dist/mg-components/p-7fd3e519.entry.js +0 -1
- package/dist/mg-components/p-DshvCiTL.js +0 -2
- package/dist/mg-components/p-a0e2c886.entry.js +0 -1
- package/dist/mg-components/p-d698fa67.entry.js +0 -1658
- /package/dist/mg-components/{p-C7xjtdiw.js → p-91BOpzAB.js} +0 -0
- /package/dist/mg-components/{p-DSEloqPn.js → p-BfblyCaJ.js} +0 -0
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
4
|
-
var index$1 = require('./index-
|
|
5
|
-
var index$2 = require('./index-
|
|
3
|
+
var index = require('./index-BmFwLEZT.js');
|
|
4
|
+
var index$1 = require('./index-DrZECzp6.js');
|
|
5
|
+
var index$2 = require('./index-B6J2EllP.js');
|
|
6
6
|
var mgInput_conf = require('./mg-input.conf-wgTh7iBb.js');
|
|
7
7
|
var events_utils = require('./events.utils-D5SAtkpQ.js');
|
|
8
|
+
var index$3 = require('./index-Acmyl4hv.js');
|
|
8
9
|
|
|
9
10
|
/**
|
|
10
11
|
* Available menu item status values
|
|
@@ -23,12 +24,12 @@ const targets = ['_blank', '_self', '_parent', '_top'];
|
|
|
23
24
|
/**
|
|
24
25
|
* Menu direction values
|
|
25
26
|
*/
|
|
26
|
-
const directions$
|
|
27
|
+
const directions$2 = {
|
|
27
28
|
VERTICAL: 'vertical',
|
|
28
29
|
HORIZONTAL: 'horizontal',
|
|
29
30
|
};
|
|
30
31
|
|
|
31
|
-
const mgActionMoreCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
32
|
+
const mgActionMoreCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{--mg-c-popover-spacing-vertical:var(--mg-b-size-4);--mg-c-popover-spacing-horizontal:0;--mg-c-popover-max-width:unset;--mg-c-popover-overflow:hidden}.mg-c-action-more__divider{--mg-c-divider-spacing-vertical:var(--mg-b-size-2)}.mg-c-action-more__chevron{transition:200ms}.mg-c-action-more__chevron--rotate.mg-c-action-more__chevron{transform:rotate(180deg)}.mg-c-action-more mg-menu-item{--mg-c-menu-item-button-margin-horizontal:var(--mg-b-size-4)}`;
|
|
32
33
|
|
|
33
34
|
/**
|
|
34
35
|
* MgActionMore['items'] type guard
|
|
@@ -38,7 +39,8 @@ const mgActionMoreCss = () => `.mg-u-visually-hidden{position:absolute !importan
|
|
|
38
39
|
const isMgActionMoreItems = (prop) => {
|
|
39
40
|
const items = prop;
|
|
40
41
|
return (typeof items === 'object' &&
|
|
41
|
-
items.every(item => (typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function') ||
|
|
42
|
+
items.every((item) => (typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function') ||
|
|
43
|
+
isMgActionMoreDivider(item)));
|
|
42
44
|
};
|
|
43
45
|
/**
|
|
44
46
|
* MgActionMoreDividerType type guard
|
|
@@ -121,7 +123,9 @@ const MgActionMore = class {
|
|
|
121
123
|
if (!isMgActionMoreItems(newValue)) {
|
|
122
124
|
throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${index$1.toString(newValue)}.`);
|
|
123
125
|
}
|
|
124
|
-
else if (isMgActionMoreItems(newValue) &&
|
|
126
|
+
else if (isMgActionMoreItems(newValue) &&
|
|
127
|
+
newValue.length > 0 &&
|
|
128
|
+
(isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {
|
|
125
129
|
throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${index$1.toString(newValue)}.`);
|
|
126
130
|
}
|
|
127
131
|
}
|
|
@@ -169,11 +173,11 @@ const MgActionMore = class {
|
|
|
169
173
|
[`${this.classBase}__chevron--rotate`]: this.expanded === true,
|
|
170
174
|
} }, index.h("mg-icon", { icon: "chevron-down" })));
|
|
171
175
|
}
|
|
172
|
-
return (index.h(index.Host, { key: '
|
|
176
|
+
return (index.h(index.Host, { key: 'c72c7ee9bdb39f2361fdcb9f670cc679efdd3589', "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { key: 'dd88d690d4600868bc485770b657b46afeccc727', class: this.classBase }, index.h("mg-popover", { key: 'eaecf2ec0fca98c0233240711ff7fed17374cd81', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange, "data-fallback-placement": "bottom-end" }, index.h("mg-button", { key: 'edb2e8556cbfe06aef62caea435205208722dd04', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && index.h("mg-icon", Object.assign({ key: 'a7a5c5bbc906da8dee937312fe373e97d9d74346' }, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { key: '83cda3d619de43ab8a75605d20082b31230cd7e2', slot: "content" }, index.h("mg-menu", { key: '37d0fd99fcafb3eb6f2a56a7a805523348146419', direction: directions$2.VERTICAL, label: this.messages.label }, this.items.map((item) => {
|
|
173
177
|
var _a, _b;
|
|
174
178
|
return isMgActionMoreDivider(item) ? (index.h("mg-divider", { class: "mg-c-action-more__divider", key: "divider", "full-width": true })) : (index.h("mg-menu-item", { key: item.label, status: item.status || Status$1.VISIBLE, target: item.target, href: item.href,
|
|
175
179
|
// eslint-disable-next-line react/jsx-no-bind
|
|
176
|
-
onClick: e => this.handleItemClick(e, item.mouseEventHandler) }, ((_a = item.icon) === null || _a === void 0 ? void 0 : _a.icon) && index.h("mg-icon", { icon: item.icon.icon, variant: item.icon.variant, variantStyle: item.icon.variantStyle, slot: "image" }), index.h("span", { slot: "label" }, item.label), ((_b = item.badge) === null || _b === void 0 ? void 0 : _b.label) && index.h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" })));
|
|
180
|
+
onClick: (e) => this.handleItemClick(e, item.mouseEventHandler) }, ((_a = item.icon) === null || _a === void 0 ? void 0 : _a.icon) && (index.h("mg-icon", { icon: item.icon.icon, variant: item.icon.variant, variantStyle: item.icon.variantStyle, slot: "image" })), index.h("span", { slot: "label" }, item.label), ((_b = item.badge) === null || _b === void 0 ? void 0 : _b.label) && (index.h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" }))));
|
|
177
181
|
})))))));
|
|
178
182
|
}
|
|
179
183
|
get element() { return index.getElement(this); }
|
|
@@ -199,7 +203,7 @@ MgActionMore.style = mgActionMoreCss();
|
|
|
199
203
|
*/
|
|
200
204
|
const variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
|
|
201
205
|
|
|
202
|
-
const mgBadgeCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
206
|
+
const mgBadgeCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-badge{min-width:var(--mg-c-badge-size);height:var(--mg-c-badge-size);box-sizing:border-box;padding:0 var(--mg-b-size-4);border:var(--mg-b-size-border) solid;border-radius:calc(var(--mg-c-badge-size)/2);font-size:var(--mg-c-badge-font-size);font-weight:600;line-height:var(--mg-c-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:var(--mg-b-color-primary);background-color:var(--mg-b-color-primary);color:var(--mg-b-color-text-on-primary)}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-primary)}.mg-c-badge.mg-c-badge--secondary{border-color:var(--mg-b-color-secondary);background-color:var(--mg-b-color-secondary);color:var(--mg-b-color-text-on-secondary)}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-secondary)}.mg-c-badge.mg-c-badge--danger{border-color:var(--mg-b-color-danger);background-color:var(--mg-b-color-danger);color:var(--mg-b-color-text-on-danger)}.mg-c-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-danger)}.mg-c-badge.mg-c-badge--info{border-color:var(--mg-b-color-info);background-color:var(--mg-b-color-info);color:var(--mg-b-color-text-on-info)}.mg-c-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-info)}.mg-c-badge.mg-c-badge--success{border-color:var(--mg-b-color-success);background-color:var(--mg-b-color-success);color:var(--mg-b-color-text-on-success)}.mg-c-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-success)}.mg-c-badge.mg-c-badge--warning{border-color:var(--mg-b-color-warning);background-color:var(--mg-b-color-warning);color:var(--mg-b-color-text-on-warning)}.mg-c-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-warning)}.mg-c-badge.mg-c-badge--text-color{border-color:currentcolor;background-color:currentcolor}.mg-c-badge.mg-c-badge--text-color .mg-c-badge__value{color:var(--mg-c-badge-color-text, var(--mg-b-color-light))}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline{background-color:rgba(0,0,0,0)}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline .mg-c-badge__value{color:currentcolor}.mg-c-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}`;
|
|
203
207
|
|
|
204
208
|
const MgBadge = class {
|
|
205
209
|
constructor(hostRef) {
|
|
@@ -269,7 +273,7 @@ const MgBadge = class {
|
|
|
269
273
|
* @returns HTML Element
|
|
270
274
|
*/
|
|
271
275
|
render() {
|
|
272
|
-
return (index.h("span", { key: '
|
|
276
|
+
return (index.h("span", { key: 'af4f655ca8a11422a34cdce3e8febf46269ca574', class: this.classCollection.join() }, index.h("span", { key: 'bcc8c0a863615ba503f135f562bd970216599df0', class: "mg-c-badge__value" }, this.value), index.h("span", { key: '136d338c9a7b7791178dec1dae3898f4a7b099ea', class: "mg-u-visually-hidden" }, this.label)));
|
|
273
277
|
}
|
|
274
278
|
get element() { return index.getElement(this); }
|
|
275
279
|
static get watchers() { return {
|
|
@@ -298,7 +302,7 @@ const sizes$3 = ['medium', 'large'];
|
|
|
298
302
|
*/
|
|
299
303
|
const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
|
|
300
304
|
|
|
301
|
-
const mgButtonCss = () => `:host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--primary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--secondary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--info:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--success:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--warning:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger-alt:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled,.mg-c-button[aria-disabled=true],.mg-c-button:disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;width:100%;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible),:host([data-focus-visible]){outline:0}:host(:focus-visible) .mg-c-button,:host([data-focus-visible]) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width
|
|
305
|
+
const mgButtonCss = () => `:host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--primary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--secondary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--info:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--success:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--warning:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger-alt:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled,.mg-c-button[aria-disabled=true],.mg-c-button:disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;width:100%;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible),:host([data-focus-visible]){outline:0}:host(:focus-visible) .mg-c-button,:host([data-focus-visible]) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:var(--mg-b-size-2)}`;
|
|
302
306
|
|
|
303
307
|
const MgButton = class {
|
|
304
308
|
constructor(hostRef) {
|
|
@@ -458,6 +462,9 @@ const MgButton = class {
|
|
|
458
462
|
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
459
463
|
}
|
|
460
464
|
}
|
|
465
|
+
else {
|
|
466
|
+
this.classCollection.delete(`mg-c-button--icon`);
|
|
467
|
+
}
|
|
461
468
|
this.setIconSize();
|
|
462
469
|
}
|
|
463
470
|
loadingHandler(newValue) {
|
|
@@ -503,7 +510,7 @@ const MgButton = class {
|
|
|
503
510
|
*/
|
|
504
511
|
render() {
|
|
505
512
|
var _a;
|
|
506
|
-
return (index.h(index.Host, { key: '
|
|
513
|
+
return (index.h(index.Host, { key: '9efa9dbbcdb2965cb8fd301c86988d0b0d97b474', role: "button", tabIndex: this.element.getAttribute('tabindex') || 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, index.h("div", { key: '36918b5b208a9e0a9650107f4418cac35ade1ed2', class: this.classCollection.join() }, this.loading && index.h("mg-icon", { key: '8ad3e911d273f69441f2a405f8040cc685a0a486', icon: "loader", spin: true }), index.h("div", { key: 'a6b199c669ef6b15bfc345c98192290ce11e65cb', class: "mg-c-button__content" }, index.h("slot", { key: 'b13d317001dbf66c945cdf9e97c06338ce073c12' })))));
|
|
507
514
|
}
|
|
508
515
|
get element() { return index.getElement(this); }
|
|
509
516
|
static get watchers() { return {
|
|
@@ -534,7 +541,7 @@ MgButton.style = mgButtonCss();
|
|
|
534
541
|
*/
|
|
535
542
|
const radiusSizes = ['xsmall', 'small', 'medium'];
|
|
536
543
|
|
|
537
|
-
const mgCardCss = () => `.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);max-height:var(--mg-c-card-max-height);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}.mg-c-card.mg-c-card--shadow{--mg-c-card-border:var(--mg-b-color-neutral-20);box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card.mg-c-card--radius-xsmall{--mg-c-card-border-radius:var(--mg-b-size-
|
|
544
|
+
const mgCardCss = () => `.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);max-height:var(--mg-c-card-max-height);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}.mg-c-card.mg-c-card--shadow{--mg-c-card-border:var(--mg-b-color-neutral-20);box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card.mg-c-card--radius-xsmall{--mg-c-card-border-radius:var(--mg-b-size-radius-medium)}.mg-c-card.mg-c-card--radius-small{--mg-c-card-border-radius:var(--mg-b-size-radius-large)}::slotted(h2){margin:0 0 var(--mg-b-size-16)}`;
|
|
538
545
|
|
|
539
546
|
const MgCard = class {
|
|
540
547
|
constructor(hostRef) {
|
|
@@ -591,7 +598,7 @@ const MgCard = class {
|
|
|
591
598
|
* @returns HTML Element
|
|
592
599
|
*/
|
|
593
600
|
render() {
|
|
594
|
-
return (index.h("div", { key: '
|
|
601
|
+
return (index.h("div", { key: '8fb6d9aa655b838e219a077670ce6296640d0854', class: this.classCollection.join() }, index.h("slot", { key: '9413035054408e44b8c8bb3f2033ff970931c347' })));
|
|
595
602
|
}
|
|
596
603
|
static get watchers() { return {
|
|
597
604
|
"shadow": [{
|
|
@@ -604,7 +611,7 @@ const MgCard = class {
|
|
|
604
611
|
};
|
|
605
612
|
MgCard.style = mgCardCss();
|
|
606
613
|
|
|
607
|
-
const mgCharacterLeftCss = () => `.mg-u-visually-hidden.sc-mg-character-left{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
614
|
+
const mgCharacterLeftCss = () => `.mg-u-visually-hidden.sc-mg-character-left{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden.sc-mg-character-left *.sc-mg-character-left{overflow:hidden !important}*.sc-mg-character-left:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*.sc-mg-character-left{animation:none !important;transition:none !important}}mg-character-left.sc-mg-character-left{display:block}`;
|
|
608
615
|
|
|
609
616
|
const MgCharacterLeft = class {
|
|
610
617
|
constructor(hostRef) {
|
|
@@ -640,7 +647,7 @@ const MgCharacterLeft = class {
|
|
|
640
647
|
* @returns HTML Element
|
|
641
648
|
*/
|
|
642
649
|
render() {
|
|
643
|
-
return (index.h("span", { key: '
|
|
650
|
+
return (index.h("span", { key: '45b074ad1ffaa1041e5c4d62417ed44ea76aa218', id: this.identifier, "aria-live": "polite" }, index.h("span", { key: 'ed5f631cb268f888287e5ffafbd5ce22b07c71d5', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), index.h("span", { key: 'd9cda093c2ece7c3e39ea1bbd9499318c964b7f6', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
|
|
644
651
|
}
|
|
645
652
|
get element() { return index.getElement(this); }
|
|
646
653
|
static get watchers() { return {
|
|
@@ -654,7 +661,7 @@ const MgCharacterLeft = class {
|
|
|
654
661
|
};
|
|
655
662
|
MgCharacterLeft.style = mgCharacterLeftCss();
|
|
656
663
|
|
|
657
|
-
const mgDetailsCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
664
|
+
const mgDetailsCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span *{overflow:hidden !important}}`;
|
|
658
665
|
|
|
659
666
|
const MgDetails = class {
|
|
660
667
|
constructor(hostRef) {
|
|
@@ -708,7 +715,7 @@ const MgDetails = class {
|
|
|
708
715
|
* @returns HTML Element
|
|
709
716
|
*/
|
|
710
717
|
render() {
|
|
711
|
-
return (index.h("details", { key: '
|
|
718
|
+
return (index.h("details", { key: '78dbeab3b3e6c245bda8fad5900b70727fd47595', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, index.h("summary", { key: '766e4756a66a1f8e6bc2159f30133a0702353f32' }, index.h("slot", { key: '3473dd0c0fc7de78c1d7ae6f9ee4a4d2fc7835ee', name: "summary" }), index.h("span", { key: '7c8d3da4df69d2802f104caaf568ac513f9f03b6', class: "mg-c-details__toggle" }, index.h("mg-icon", { key: '44da384780ab768bde20acb58885280e193de921', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { key: '387de0caa5ae819c89449e5063e0b6e05b3df8fe', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { key: '48c1fe8df990a250f098594d9b50df947613955c', class: "mg-c-details__details" }, index.h("slot", { key: '95554b4d890750cc3b3008965be3e5954d49d810', name: "details" }))));
|
|
712
719
|
}
|
|
713
720
|
get element() { return index.getElement(this); }
|
|
714
721
|
static get watchers() { return {
|
|
@@ -725,7 +732,12 @@ const MgDetails = class {
|
|
|
725
732
|
};
|
|
726
733
|
MgDetails.style = mgDetailsCss();
|
|
727
734
|
|
|
728
|
-
|
|
735
|
+
/**
|
|
736
|
+
* List of all possibles directions
|
|
737
|
+
*/
|
|
738
|
+
const directions$1 = ['horizontal', 'vertical'];
|
|
739
|
+
|
|
740
|
+
const mgDividerCss = () => `.mg-c-divider{width:var(--mg-b-size-120);height:0;margin:var(--mg-c-divider-spacing-vertical) auto;border-block-start:var(--mg-c-divider-thickness) solid var(--mg-c-divider-color-background)}.mg-c-divider.mg-c-divider--full-width{width:100%}.mg-c-divider.mg-c-divider--direction-vertical{width:0;height:var(--mg-b-size-120);margin:auto var(--mg-c-divider-spacing-vertical);border-block-start:none;border-inline-start:var(--mg-c-divider-thickness) solid var(--mg-c-divider-color-background)}.mg-c-divider.mg-c-divider--direction-vertical.mg-c-divider--full-width{width:0;height:100%}:host([aria-orientation=vertical]){display:inline-flex}`;
|
|
729
741
|
|
|
730
742
|
const MgDivider = class {
|
|
731
743
|
constructor(hostRef) {
|
|
@@ -737,17 +749,46 @@ const MgDivider = class {
|
|
|
737
749
|
* Define component size
|
|
738
750
|
*/
|
|
739
751
|
this.fullWidth = false;
|
|
752
|
+
/**
|
|
753
|
+
* Define component direction
|
|
754
|
+
*/
|
|
755
|
+
this.direction = 'horizontal';
|
|
756
|
+
}
|
|
757
|
+
validateDirection(newValue) {
|
|
758
|
+
if (newValue === '') {
|
|
759
|
+
// Reactive frameworks (ex. Vue) can pass "" instead of undefined.
|
|
760
|
+
// Treat it as "use the default", do not throw.
|
|
761
|
+
this.direction = directions$1[0];
|
|
762
|
+
}
|
|
763
|
+
else if (!directions$1.includes(newValue)) {
|
|
764
|
+
throw new Error(`<mg-divider> prop "direction" must be one of: ${directions$1.join(', ')}. Passed value: ${index$1.toString(newValue)}.`);
|
|
765
|
+
}
|
|
766
|
+
}
|
|
767
|
+
/*************
|
|
768
|
+
* Lifecycle *
|
|
769
|
+
*************/
|
|
770
|
+
/**
|
|
771
|
+
* Check if component props are well configured on init
|
|
772
|
+
*/
|
|
773
|
+
componentWillLoad() {
|
|
774
|
+
this.validateDirection(this.direction);
|
|
740
775
|
}
|
|
741
776
|
/**
|
|
742
777
|
* Render
|
|
743
778
|
* @returns HTML Element
|
|
744
779
|
*/
|
|
745
780
|
render() {
|
|
746
|
-
return (index.h("div", { key: '
|
|
781
|
+
return (index.h(index.Host, { key: '33f0896876d43052fd99a20ebf943d3ee30dfc7a', role: "separator", "aria-orientation": this.direction }, index.h("div", { key: 'a9e87c1d097177b5995649485da427ca25436f8c', class: {
|
|
747
782
|
'mg-c-divider': true,
|
|
748
783
|
'mg-c-divider--full-width': this.fullWidth,
|
|
749
|
-
|
|
784
|
+
'mg-c-divider--direction-vertical': this.direction === 'vertical',
|
|
785
|
+
} })));
|
|
750
786
|
}
|
|
787
|
+
static get watchers() { return {
|
|
788
|
+
"direction": [{
|
|
789
|
+
"validateDirection": 0
|
|
790
|
+
}]
|
|
791
|
+
}; }
|
|
751
792
|
};
|
|
752
793
|
MgDivider.style = mgDividerCss();
|
|
753
794
|
|
|
@@ -812,17 +853,20 @@ const MgForm = class {
|
|
|
812
853
|
}
|
|
813
854
|
// If the form is disabled or readonly none of them are required
|
|
814
855
|
// Check if all fields are not editable (readonly or disabled)
|
|
815
|
-
const isEditable = input => !(input.disabled || input.readonly);
|
|
816
|
-
const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';
|
|
817
|
-
if (!this.disabled &&
|
|
856
|
+
const isEditable = (input) => !(input.disabled || input.readonly);
|
|
857
|
+
const isMgInputToggle = (input) => input.nodeName === 'MG-INPUT-TOGGLE';
|
|
858
|
+
if (!this.disabled &&
|
|
859
|
+
!this.readonly &&
|
|
860
|
+
this.mgInputs.some((input) => isEditable(input) && !isMgInputToggle(input))) {
|
|
818
861
|
// Get editable inputs
|
|
819
862
|
const editableInputs = this.mgInputs.filter(isEditable);
|
|
820
863
|
// Get required inputs
|
|
821
864
|
// mg-input-toggle can not be required
|
|
822
|
-
const requiredInputs = editableInputs.filter(input => !isMgInputToggle(input) && input.required);
|
|
865
|
+
const requiredInputs = editableInputs.filter((input) => !isMgInputToggle(input) && input.required);
|
|
823
866
|
// All inputs are required
|
|
824
|
-
if ([requiredInputs.length, editableInputs.length].every(length => length === 1) ||
|
|
825
|
-
(requiredInputs.length > 1 &&
|
|
867
|
+
if ([requiredInputs.length, editableInputs.length].every((length) => length === 1) ||
|
|
868
|
+
(requiredInputs.length > 1 &&
|
|
869
|
+
requiredInputs.length === editableInputs.filter((input) => !isMgInputToggle(input)).length)) {
|
|
826
870
|
this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
|
|
827
871
|
this.classCollection.add(this.classAllRequired);
|
|
828
872
|
}
|
|
@@ -846,7 +890,7 @@ const MgForm = class {
|
|
|
846
890
|
this.checkValidity = () => {
|
|
847
891
|
// Update required on input event
|
|
848
892
|
this.setRequiredMessage();
|
|
849
|
-
this.valid = !this.mgInputs.some(input => input.invalid);
|
|
893
|
+
this.valid = !this.mgInputs.some((input) => input.invalid);
|
|
850
894
|
this.invalid = !this.valid;
|
|
851
895
|
// We need to send valid event if it is the same value
|
|
852
896
|
this.formValid.emit(this.valid);
|
|
@@ -867,7 +911,7 @@ const MgForm = class {
|
|
|
867
911
|
this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT'));
|
|
868
912
|
// Set inputs readonly or disabled based on form configuration
|
|
869
913
|
// Othewise listen to events
|
|
870
|
-
this.mgInputs.forEach(input => {
|
|
914
|
+
this.mgInputs.forEach((input) => {
|
|
871
915
|
if (this.labelOnTop) {
|
|
872
916
|
input.labelOnTop = true;
|
|
873
917
|
}
|
|
@@ -925,7 +969,7 @@ const MgForm = class {
|
|
|
925
969
|
async displayError() {
|
|
926
970
|
if (!this.readonly) {
|
|
927
971
|
const mgFieldsets = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-FIELDSET'));
|
|
928
|
-
[...mgFieldsets, ...this.mgInputs].forEach(input => {
|
|
972
|
+
[...mgFieldsets, ...this.mgInputs].forEach((input) => {
|
|
929
973
|
var _a;
|
|
930
974
|
(_a = input.displayError) === null || _a === void 0 ? void 0 : _a.call(input);
|
|
931
975
|
});
|
|
@@ -963,7 +1007,7 @@ const MgForm = class {
|
|
|
963
1007
|
// Get slotted mgButtons
|
|
964
1008
|
this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));
|
|
965
1009
|
// Set button form identifier
|
|
966
|
-
this.mgButtons.forEach(mgButton => {
|
|
1010
|
+
this.mgButtons.forEach((mgButton) => {
|
|
967
1011
|
mgButton.setAttribute('form', this.identifier);
|
|
968
1012
|
if (mgButton.type === 'reset') {
|
|
969
1013
|
mgButton.addEventListener('click', () => {
|
|
@@ -990,8 +1034,8 @@ const MgForm = class {
|
|
|
990
1034
|
componentDidLoad() {
|
|
991
1035
|
// Update mgInputs when mgForm content change
|
|
992
1036
|
const observerOptions = { childList: true, subtree: true };
|
|
993
|
-
new MutationObserver(mutations => {
|
|
994
|
-
if (mutations.some(mutation => Object.keys(observerOptions).includes(mutation.type))) {
|
|
1037
|
+
new MutationObserver((mutations) => {
|
|
1038
|
+
if (mutations.some((mutation) => Object.keys(observerOptions).includes(mutation.type))) {
|
|
995
1039
|
this.setMgInputs();
|
|
996
1040
|
this.checkValidity();
|
|
997
1041
|
}
|
|
@@ -1002,7 +1046,7 @@ const MgForm = class {
|
|
|
1002
1046
|
* @returns HTML Element
|
|
1003
1047
|
*/
|
|
1004
1048
|
render() {
|
|
1005
|
-
return (index.h("form", { key: '
|
|
1049
|
+
return (index.h("form", { key: '65d3e11931386af2dedd953f58505e2c71cd99ff', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && index.h("p", { key: '7546db3b8a4259fd7d092cc7b912b6593fab9d84', innerHTML: this.requiredMessageText }), index.h("slot", { key: '0023ed360230ea97395a249b230e02bb7a4bdbda' }), !this.readonly && !this.disabled && index.h("slot", { key: 'de84e088ff029eff487be1ed8b4766425c558c29', name: "actions" })));
|
|
1006
1050
|
}
|
|
1007
1051
|
get element() { return index.getElement(this); }
|
|
1008
1052
|
static get watchers() { return {
|
|
@@ -1043,9 +1087,7 @@ const variants$2 = ['success', 'warning', 'danger', 'info', 'app', 'neutral'];
|
|
|
1043
1087
|
*/
|
|
1044
1088
|
const variantStyles$1 = ['icon', 'background', 'full'];
|
|
1045
1089
|
|
|
1046
|
-
const icons = { 'address-card': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm11 3h-3v1h3zm-3 2h3v1h-3zM8 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-5 5.4A2.4 2.4 0 0 1 5.4 9h1.2A2.4 2.4 0 0 1 9 11.4a.6.6 0 0 1-.6.6H3.6a.6.6 0 0 1-.6-.6" clip-rule="evenodd"/></svg>', 'address-card-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 6.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" d="M13 5h-3v1h3zm-3 2h3v1h-3z"/><path fill="currentColor" fill-rule="evenodd" d="M5.4 9A2.4 2.4 0 0 0 3 11.4a.6.6 0 0 0 .6.6h4.8a.6.6 0 0 0 .6-.6A2.4 2.4 0 0 0 6.6 9zm0 1a1.4 1.4 0 0 0-1.342 1h3.884A1.4 1.4 0 0 0 6.6 10z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm12 1H2v10h12z" clip-rule="evenodd"/></svg>', 'align-center': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 3h8v1H4zm-2 9h12v1H2zm12-6H2v1h12zM4 9h8v1H4z"/></svg>', 'align-justify': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 3h12v1H2zm0 9h12v1H2zm12-6H2v1h12zM2 9h12v1H2z"/></svg>', 'align-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 3h8v1H2zm0 9h12v1H2zm12-6H2v1h12zM2 9h8v1H2z"/></svg>', 'align-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6 3h8v1H6zm-4 9h12v1H2zm12-6H2v1h12zM6 9h8v1H6z"/></svg>', 'api': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.44 11.47h-.02l-.66-.1-.02-.08c-.03-.11-.08-.21-.13-.31l-.04-.07.4-.54v-.02l-.52-.52h-.02l-.54.41-.07-.04c-.1-.05-.2-.09-.31-.13l-.08-.02-.1-.67v-.01h-.73v.02l-.1.66-.08.02c-.11.03-.21.08-.31.13l-.07.04-.55-.41-.52.52v.02l.41.54-.04.07c-.05.1-.09.2-.13.31l-.02.08-.67.1h-.01v.73h.02l.66.1.02.08c.03.1.08.21.13.3l.04.07-.41.55.52.52h.02l.54-.41.07.04c.1.05.2.09.31.13l.08.02.1.67v.01h.73v-.02l.1-.66.08-.02c.11-.03.21-.08.31-.13l.07-.04.55.41.52-.52v-.02l-.4-.54.04-.07c.05-.1.09-.2.13-.31l.02-.08.67-.1h.01v-.73zm-2.46 1.38c-.56 0-1.01-.45-1.01-1.01s.45-1.01 1.01-1.01 1.01.45 1.01 1.01-.45 1.01-1.01 1.01M8.51 5.81c-.11-.09-.27-.14-.5-.14h-.38v1.17h.27c.26 0 .45-.05.58-.15s.19-.25.19-.44-.05-.34-.16-.43zm1.57 5.13-.3-.4c-.1-.1-.09-.27 0-.37l.52-.52c.1-.1.26-.1.37 0l.4.29c.06-.03.13-.06.2-.08l.07-.49c0-.14.12-.25.26-.25h.45a5.44 5.44 0 1 0-10.5-1.99 5.44 5.44 0 0 0 5.44 5.44c.78 0 1.54-.17 2.25-.49v-.6c0-.14.11-.26.26-.26l.49-.07c.02-.07.05-.13.08-.2zm.18-5.96h.84v3.94h-.84zM5.4 8.92l-.29-.94H3.67l-.29.94h-.9l1.39-3.96h1.02l1.4 3.96h-.9zm3.72-1.74c-.26.23-.64.34-1.13.34h-.36v1.4h-.84V4.98h1.26c.48 0 .84.1 1.09.31s.37.51.37.92c0 .42-.13.75-.4.97zM4.4 5.57q-.09.345-.51 1.71h1.03q-.39-1.275-.45-1.44c-.03-.11-.06-.2-.07-.26z"/></svg>', 'archive': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3 6v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6zm7 2H6V7h4zm3-3H3c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1"/></svg>', 'archive-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13 2H3c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1m-1 11H4.04S4 12.98 4 12.96V6h8zm1-8H3V3h10zm-3 3H6V7h4z"/></svg>', 'arrow-clock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m3.025 3.82-.002-.001.083-.09.063-.066.009-.01q.132-.15.273-.292a4 4 0 0 1 .215-.196q.136-.124.279-.24.108-.086.22-.166l.024-.018q.143-.105.293-.203a7 7 0 0 1 1.198-.607l.029-.01q.126-.05.257-.094a6 6 0 0 1 .375-.108l.067-.019q.105-.029.21-.053c.146-.032.294-.054.442-.075l.092-.015q.072-.013.146-.022A6.47 6.47 0 0 1 13 3.847V1.996h1v4h-4v-1h2.594a5.48 5.48 0 0 0-5.189-2.467l-.124.019-.077.012q-.188.025-.373.064a3 3 0 0 0-.173.044l-.063.017a6 6 0 0 0-.317.09 6 6 0 0 0-.227.084l-.016.006a6 6 0 0 0-.523.232 5.4 5.4 0 0 0-.736.452l-.028.021q-.092.065-.18.135-.12.098-.235.204l-.05.044q-.068.06-.133.122-.117.117-.226.241l-.013.014A5.496 5.496 0 1 0 13.5 7.996h1A6.5 6.5 0 1 1 3.025 3.82"/><path fill="currentColor" d="M9.795 11.746 7 8.95V4.246h1v4.29l2.5 2.505z"/></svg>', 'arrow-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.295 8.295 8.5 12.085V2h-1v10.085l-3.795-3.79L3 9l5 5 5-5z"/></svg>', 'arrow-down-a-z': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m6.53 10.9-1.41 1.41-.71.71-2.12-2.12.71-.71.88.88V3.02h1v8.12l.95-.95.71.71zM12.29 6H10.5l-.36 1H9.08l1.79-5h1.05l1.79 5h-1.06zm-.36-1.02-.53-1.49-.53 1.49zm1.79 5.18V9H9.09v1h3.29l-3.29 2.84V14h4.63v-1h-3.29z"/></svg>', 'arrow-down-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.999 12.292V3.999h1v10h-10v-1h8.292L2 2.707 2.707 2z"/></svg>', 'arrow-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m7 13 .705-.705L3.915 8.5H14v-1H3.915l3.79-3.795L7 3 2 8z"/></svg>', 'arrow-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m9 3-.715.696 3.79 3.804H2v1h10.075l-3.79 3.787L9 13l5-5z"/></svg>', 'arrow-rotate': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m3.025 3.82-.002-.001c.046-.055.098-.103.146-.156q.137-.155.282-.302c.069-.068.142-.13.215-.195q.136-.124.279-.241.12-.095.244-.184.143-.105.293-.203a7 7 0 0 1 1.198-.607q.142-.055.286-.104a6 6 0 0 1 .375-.108c.092-.025.184-.052.278-.072a6 6 0 0 1 .441-.075c.08-.012.157-.028.238-.037A6.47 6.47 0 0 1 13 3.847V1.996h1v4h-4v-1h2.594a5.48 5.48 0 0 0-5.188-2.467q-.102.014-.202.031-.188.025-.373.064c-.08.017-.157.04-.236.06a6 6 0 0 0-.317.092q-.122.042-.243.089a6 6 0 0 0-.523.232 5.4 5.4 0 0 0-.736.452q-.106.076-.208.156-.12.098-.235.204-.093.08-.183.166c-.083.081-.16.169-.239.255A5.496 5.496 0 1 0 13.5 7.996h1A6.5 6.5 0 1 1 3.025 3.82"/></svg>', 'arrow-rotate-backward': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.975 3.82.002-.001c-.046-.055-.098-.103-.146-.156-.092-.103-.183-.205-.282-.302-.069-.068-.142-.13-.215-.195q-.135-.124-.279-.241-.12-.095-.244-.184a7 7 0 0 0-.293-.203 7 7 0 0 0-.859-.467 7 7 0 0 0-.339-.14q-.142-.055-.286-.104a6 6 0 0 0-.375-.108c-.092-.025-.184-.052-.278-.072a6 6 0 0 0-.441-.075c-.08-.012-.157-.028-.238-.037A6.47 6.47 0 0 0 3 3.847V1.996H2v4h4v-1H3.406a5.48 5.48 0 0 1 5.189-2.467q.101.014.2.031.19.025.374.064c.08.017.157.04.236.06q.16.042.317.092.122.042.243.089a6 6 0 0 1 .523.232 5.3 5.3 0 0 1 .736.452q.105.076.208.156.12.098.235.204.093.08.183.166c.083.081.16.169.239.255A5.496 5.496 0 1 1 2.5 7.996h-1A6.5 6.5 0 1 0 12.975 3.82"/></svg>', 'arrow-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2 3 7l.705.705L7.5 3.915V14h1V3.915l3.795 3.79L13 7z"/></svg>', 'arrow-up-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.292 3H3.999V2h10v10h-1V3.707L2.707 14 2 13.29z"/></svg>', 'arrow-up-right-square': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.33 3v10c0 .73-.6 1.32-1.33 1.33H3c-.73 0-1.32-.6-1.33-1.33V3c0-.73.6-1.32 1.33-1.33h10c.73 0 1.32.6 1.33 1.33m-2.48.46H8.68c-.37 0-.67.29-.68.66v.04c0 .18.07.35.2.47l.91.91-5.53 5.53c-.13.13-.14.33-.01.47h.01l.87.88c.13.13.33.14.47.01h.01l5.53-5.53.91.9c.26.28.7.29.98.02l.02-.02c.12-.13.19-.3.19-.48V4.15c0-.37-.3-.67-.67-.67z"/></svg>', 'arrow-up-z-a': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m5.82 5.85-.94-.94v8.11h-1V4.96l-.89.89-.71-.71 1.41-1.41.71-.71.71.71 1.41 1.41-.71.71zM12.29 13H10.5l-.36 1H9.08l1.79-5h1.05l1.79 5h-1.06zm-.36-1.02-.53-1.49-.53 1.49zm1.79-8.82V2H9.09v1h3.29L9.09 5.84V7h4.63V6h-3.29z"/></svg>', 'arrows-compare': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.705 8.295 9.915 6.5H15v-1H9.915l1.79-1.795L11 3 8 6l3 3zM8 10 5 7l-.705.705L6.085 9.5H1v1h5.085l-1.79 1.795L5 13z"/></svg>', 'arrows-right-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.085 4.499-1.79-1.795.705-.705 3 3-3 3-.705-.705 1.79-1.795H9v-1zM8 6.514h.003v5.572l1.795-1.79.705.705-3 3-3-3 .705-.705 1.795 1.79V5.499H2v-1h6z"/></svg>', 'arrows-right-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m11 2 3 3-3 3-.705-.705 1.79-1.795H2v-1h10.085l-1.79-1.795zm-7.085 9.5 1.79 1.795L5 14l-3-3 3-3 .705.705-1.79 1.795H14v1z" clip-rule="evenodd"/></svg>', 'arrows-rotate': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10 4.997h2.61a5.5 5.5 0 0 0-6.175-2.271A5.5 5.5 0 0 0 2.5 7.993h-1a6.49 6.49 0 0 1 4.289-6.112A6.51 6.51 0 0 1 13 3.838V2h1v3.996h-4zM6 10.99H3.39a5.5 5.5 0 0 0 6.175 2.271A5.5 5.5 0 0 0 13.5 7.993h1a6.49 6.49 0 0 1-4.289 6.113A6.51 6.51 0 0 1 3 12.15v1.838H2V9.991h4z"/></svg>', 'arrows-rotate-backward': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6 4.997H3.39a5.5 5.5 0 0 1 6.175-2.271A5.5 5.5 0 0 1 13.5 7.993h1a6.49 6.49 0 0 0-4.289-6.112A6.51 6.51 0 0 0 3 3.838V2H2v3.996h4zm4 5.993h2.61a5.5 5.5 0 0 1-6.175 2.271A5.5 5.5 0 0 1 2.5 7.993h-1a6.49 6.49 0 0 0 4.289 6.113A6.51 6.51 0 0 0 13 12.15v1.838h1V9.991h-4z"/></svg>', 'arrows-up-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1.5 5 3-3 3 3-.7.7L5 3.9V14H4V3.9L2.2 5.7zM12 12.1l1.8-1.8.7.7-3 3-3-3 .7-.7 1.8 1.8V2h1z" clip-rule="evenodd"/></svg>', 'ban': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-3.126 4.582a6 6 0 0 1-8.456-8.456zm.707-.708L4.127 3.418a6 6 0 0 1 8.456 8.456" clip-rule="evenodd"/></svg>', 'bell': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.97 6a4 4 0 0 1 8 0v2.3l1.507.822c.91.496.558 1.878-.478 1.878H3.002c-1.027 0-1.387-1.362-.494-1.87l1.461-.83zm2.027 6a2 2 0 1 0 4 0z"/></svg>', 'bell-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9.997 12a2 2 0 0 1-4 0z"/><path fill="currentColor" fill-rule="evenodd" d="M7.969 2a4 4 0 0 1 4 4v2.3l1.508.822c.91.496.558 1.878-.478 1.878H3.002l-.095-.004c-.922-.078-1.243-1.292-.48-1.815l.08-.05L3.97 8.3V6a4 4 0 0 1 4-4m0 1a3 3 0 0 0-3 3v2.882L3.002 10h9.997l-1.508-.822-.522-.284V6a3 3 0 0 0-3-3" clip-rule="evenodd"/></svg>', 'book': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2H1.5a.5.5 0 0 1 0-1H3V9H1.5a.5.5 0 0 1 0-1H3V7H1.5a.5.5 0 0 1 0-1H3zm8 0H9v4h2z" clip-rule="evenodd"/></svg>', 'book-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4 2a1 1 0 0 0-1 1v3H1.5a.5.5 0 0 0 0 1H3v1H1.5a.5.5 0 0 0 0 1H3v1H1.5a.5.5 0 0 0 0 1H3v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm5 1H4v3h.5a.5.5 0 0 1 0 1H4v1h.5a.5.5 0 0 1 0 1H4v1h.5a.5.5 0 0 1 0 1H4v2h8V3h-1v4H9z" clip-rule="evenodd"/></svg>', 'briefcase': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 4v1H2a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-3V4a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1m5 1V4H6v1z" clip-rule="evenodd"/></svg>', 'briefcase-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 5V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1-1h4v1H6zM2 6v7h12V6z" clip-rule="evenodd"/></svg>', 'building': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H9v-2a1 1 0 1 0-2 0v2H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm-7 9h2V8H5zm4 0h2V8H9zM5 4v2h2V4zm4 2h2V4H9z"/></svg>', 'building-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4 2h8v12H9v-1a1 1 0 1 0-2 0v1H4zm4 13h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1zM7 4H5v2h2zm2 0h2v2H9zm2 4H9v2h2zM5 8h2v2H5z" clip-rule="evenodd"/></svg>', 'calculator': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm2 1h8v3H4zm2 5H4v2h2zm1 0h2v2H7zm5 0h-2v5h2zm-8 3h2v2H4zm5 0H7v2h2z" clip-rule="evenodd"/></svg>', 'calculator-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 3h8v3H4zm2 5H4v2h2zm3 0H7v2h2zm3 0h-2v5h2zm-6 3H4v2h2zm3 0H7v2h2z"/><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm1 0h10v12H3z" clip-rule="evenodd"/></svg>', 'calendar': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 1h1v1h4V1h1v1h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h2zm8 5H3v7h10z" clip-rule="evenodd"/></svg>', 'calendar-euro': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 2.5h1c.6 0 1 .4 1 1v10c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1v-10c0-.6.4-1 1-1h1v-1h1v1h6v-1h1zm-9 3v8h10v-8zm7.5 6.24-.71-.71c-.35.3-.8.49-1.29.49-.74 0-1.4-.41-1.74-1.02h1.77v-.75H6.51c-.01-.07-.01-.15-.01-.23 0-.09.01-.18.02-.27h2.01V8.5H6.78c.35-.59.99-.98 1.72-.98.49 0 .94.19 1.29.49l.71-.71a2.974 2.974 0 0 0-4.81 1.2H4.5v.75h1.02c-.02.09-.02.18-.02.27 0 .08 0 .16.02.23H4.5v.75h1.17c.4 1.17 1.52 2.02 2.83 2.02.77 0 1.47-.3 2-.78" clip-rule="evenodd"/></svg>', 'calendar-euro-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m9.79 11.02.71.71a2.976 2.976 0 0 1-4.83-1.24H4.5v-.75h1.01c-.01-.08-.01-.15-.01-.23 0-.09 0-.18.02-.27H4.5v-.75h1.19a2.974 2.974 0 0 1 4.81-1.2L9.79 8c-.35-.3-.8-.49-1.29-.49-.73 0-1.37.39-1.72.98h1.75v.75H6.52c-.01.09-.02.18-.02.27 0 .08 0 .16.01.23h2.02v.75H6.76c.34.61 1 1.02 1.74 1.02.49 0 .94-.19 1.29-.49M13 3.5v1H3v-1zm-1-2h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10c0-.55-.45-1-1-1h-1zm-9 12v-8h10v8z"/></svg>', 'calendar-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13 2h-2V1h-1v1H6V1H5v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1m0 11H3V6h10zm0-8H3V3h2v1h1V3h4v1h1V3h2z"/></svg>', 'check': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.77 12.113 15 3.883l-.707-.707-8.23 8.23-4.355-4.355L1 7.76l4.355 4.355-.004.004.707.706.004-.004.003.004.708-.707z"/></svg>', 'check-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1m-1 9.795-2.5-2.5.795-.795L7 9.205 10.705 5.5l.798.793z"/></svg>', 'check-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m4.5 8.207 2.5 2.5 4.5-4.5-.707-.707L7 9.293 5.207 7.5z"/><path fill="currentColor" fill-rule="evenodd" d="M4.111 2.18a7 7 0 1 1 7.778 11.64A7 7 0 0 1 4.111 2.18m.556 10.809a6 6 0 1 0 6.666-9.978 6 6 0 0 0-6.666 9.978" clip-rule="evenodd"/></svg>', 'chevron-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8 11.708 6-6L13.293 5 8 10.293 2.708 5 2 5.708z"/></svg>', 'chevron-down-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14M3.706 6 8 10.294 12.294 6l.706.706-5 5-5-5z" clip-rule="evenodd"/></svg>', 'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m4 8 6 6 .708-.708L5.415 8l5.293-5.292L10 2z"/></svg>', 'chevron-left-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m9-4.294L5.706 8 10 12.294 9.294 13l-5-5 5-5z" clip-rule="evenodd"/></svg>', 'chevron-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m11.708 8-6-6L5 2.708 10.293 8 5 13.293l.708.707z"/></svg>', 'chevron-right-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 0 1 8a7 7 0 0 0 14 0m-9 4.294L10.294 8 6 3.706 6.706 3l5 5-5 5z" clip-rule="evenodd"/></svg>', 'chevron-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8 4.5-6 6 .708.707L8 5.916l5.293 5.293L14 10.5z"/></svg>', 'chevron-up-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1m4.294 9L8 5.706 3.706 10 3 9.294l5-5 5 5z" clip-rule="evenodd"/></svg>', 'circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8"/></svg>', 'clock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m-.5-6.795L10.295 11l.705-.705L8.5 7.79V3.5h-1z" clip-rule="evenodd"/></svg>', 'clock-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m10.95 10.04-.71.71L7.5 8.01v-4h1V7.6l2.45 2.45zM8 2C4.69 2 2 4.69 2 8s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6m0-1c3.87 0 7 3.13 7 7s-3.13 7-7 7-7-3.13-7-7 3.13-7 7-7"/></svg>', 'code-square-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m6.32 10.28.73-.73L5.5 8l1.53-1.53-.73-.73-2.27 2.27 2.28 2.28zm3.37 0L11.97 8 9.69 5.72l-.73.73L10.51 8 8.96 9.55zM3.01 14c-.27 0-.5-.1-.7-.3s-.3-.43-.3-.7V3c0-.27.1-.5.3-.7s.43-.3.7-.3h10c.27 0 .5.1.7.3s.3.43.3.7v10c0 .27-.1.5-.3.7s-.43.3-.7.3H3zm0-1h10V3H3v10z"/></svg>', 'cog': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.062 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.416c.345.15.67.34.97.56l1.226-.708a1 1 0 0 1 1.366.366l1 1.732a1 1 0 0 1-.366 1.366l-1.227.709a5 5 0 0 1 0 1.119l1.227.708a1 1 0 0 1 .366 1.366l-1 1.732a1 1 0 0 1-1.366.366l-1.227-.708c-.3.22-.624.41-.969.56V14a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1.416a5 5 0 0 1-.969-.56l-1.227.708a1 1 0 0 1-1.366-.366l-1-1.732a1 1 0 0 1 .366-1.366l1.227-.709a5 5 0 0 1 0-1.118l-1.227-.709A1 1 0 0 1 1.5 5.366l1-1.732a1 1 0 0 1 1.366-.366l1.227.709q.45-.334.97-.561zm2 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4" clip-rule="evenodd"/></svg>', 'cog-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.438 8a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0m2.5-1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M10 3.416V2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v1.416c-.345.15-.67.34-.969.56l-1.227-.708a1 1 0 0 0-1.366.366l-1 1.732a1 1 0 0 0 .366 1.366l1.227.709a5 5 0 0 0 0 1.118l-1.227.709a1 1 0 0 0-.366 1.366l1 1.732a1 1 0 0 0 1.366.366l1.227-.708a5 5 0 0 0 .969.56V14a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1.416c.345-.15.67-.34.969-.56l1.227.708a1 1 0 0 0 1.366-.366l1-1.732a1 1 0 0 0-.366-1.366l-1.227-.709a5 5 0 0 0 0-1.118l1.227-.709a1 1 0 0 0 .366-1.366l-1-1.732a1 1 0 0 0-1.366-.366l-1.227.708c-.3-.22-.624-.41-.97-.56M7 4.07l-.6.262q-.414.182-.775.449l-.527.39-1.794-1.037-1 1.732 1.793 1.035-.072.65a4 4 0 0 0 0 .898l.072.65-1.793 1.035 1 1.732 1.794-1.036.527.39q.361.265.775.448l.6.262V14h2v-2.07l.6-.262q.414-.182.774-.449l.527-.39 1.795 1.037 1-1.732-1.793-1.035.072-.65a4 4 0 0 0 0-.898l-.072-.65 1.793-1.035-1-1.732-1.795 1.036-.527-.39q-.36-.265-.774-.448L9 4.07V2H7z" clip-rule="evenodd"/></svg>', 'comment': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.5 2A5.5 5.5 0 0 0 4 11.743V14l3.5-1h1a5.5 5.5 0 1 0 0-11zM5 6h6v1H5zm3 2H5v1h3z" clip-rule="evenodd"/></svg>', 'comment-exclamation': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8.5 2a5.5 5.5 0 1 1 0 11h-1L4 14v-2.258A5.5 5.5 0 0 1 7.5 2zm-1 8.001V11h1v-.999zm0-1.007h1V4h-1z" clip-rule="evenodd"/></svg>', 'comment-exclamation-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.5 11.008h-1v-1h1zm0-1.991h-1V4h1z"/><path fill="currentColor" fill-rule="evenodd" d="M8.5 2a5.5 5.5 0 1 1 0 11h-1L4 14v-2.258A5.5 5.5 0 0 1 7.5 2zm-1 1a4.5 4.5 0 0 0-2.863 7.97l.363.301v1.403l2.226-.636L7.36 12H8.5a4.5 4.5 0 1 0 0-9z" clip-rule="evenodd"/></svg>', 'comment-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5 6h6v1H5zm0 2h3v1H5z"/><path fill="currentColor" fill-rule="evenodd" d="m4 14 3.5-1h1a5.5 5.5 0 1 0 0-11h-1A5.5 5.5 0 0 0 4 11.743zm1-2.728-.363-.3A4.5 4.5 0 0 1 7.5 3h1a4.5 4.5 0 1 1 0 9H7.36L5 12.674z" clip-rule="evenodd"/></svg>', 'comment-question': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8.5 2a5.5 5.5 0 1 1 0 11h-1L4 14v-2.258A5.5 5.5 0 0 1 7.5 2zm-.996 8.001V11h1v-.999zM8 4a2 2 0 0 0-2 1.997h1a1 1 0 0 1 2 .001 1 1 0 0 1-1 .997v.002h-.496v1.997h1V7.93a2 2 0 0 0 1.485-1.727L10 5.998A2 2 0 0 0 8 4" clip-rule="evenodd"/></svg>', 'comment-question-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8.5 2a5.5 5.5 0 1 1 0 11h-1L4 14v-2.258A5.5 5.5 0 0 1 7.5 2zm-1 1a4.5 4.5 0 0 0-2.863 7.97l.363.301v1.403l2.226-.636L7.36 12H8.5a4.5 4.5 0 1 0 0-9z" clip-rule="evenodd"/><path fill="currentColor" d="M7.504 10.001h1V11h-1zM8 4a2 2 0 0 1 2 1.998l-.01.204A2 2 0 0 1 8.503 7.93v1.065h-1V6.997H8v-.002a1 1 0 0 0 1-.997 1 1 0 0 0-2 0H6A2 2 0 0 1 8 4"/></svg>', 'comment-sms': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.495 2a5.5 5.5 0 1 1 0 11h-1l-3.5 1v-2.257A5.5 5.5 0 0 1 7.495 2zm-3 5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1m2.5 0a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1m2.5 0a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1"/></svg>', 'comment-sms-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.5 2a5.5 5.5 0 1 1 0 11h-1L4 14v-2.257A5.5 5.5 0 0 1 7.5 2zm-1 1a4.5 4.5 0 0 0-2.863 7.972l.363.3v1.402L7.36 12H8.5a4.5 4.5 0 1 0 0-9zm-2 4a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1M8 7a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1m2.5 0a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1"/></svg>', 'conversation': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M1.01 6.51c0-1.93 2.23-3.5 4.99-3.5s4.99 1.57 4.99 3.5-2.23 3.5-4.99 3.5c-.36 0-.71-.03-1.05-.08l-2.26 1.05c-.06.03-.11.03-.17.03-.27 0-.5-.21-.5-.5V8.6c-.62-.58-1.01-1.3-1.01-2.09"/><path fill="currentColor" d="M11.49 6.5c0-.5-.13-.97-.36-1.41h.01c2.22.36 3.88 1.75 3.88 3.41 0 .79-.39 1.5-1.02 2.09v1.91a.5.5 0 0 1-.67.47l-2.26-1.05c-.34.05-.69.08-1.05.08-1.69 0-3.19-.59-4.09-1.5h.12c3.03 0 5.44-1.81 5.44-4"/></svg>', 'conversation-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.95 5.28c.25.08.5.17.73.27a5.4 5.4 0 0 1 .65.35c.11.07.2.13.3.2.48.35.86.78 1.1 1.26a2.3 2.3 0 0 1 .17.45c.03.11.06.22.07.33q.03.18.03.36c0 .79-.39 1.51-1.01 2.09v1.91a.508.508 0 0 1-.68.47l-2.26-1.05c-.34.05-.69.08-1.05.08-.23 0-.47-.01-.69-.04-.18 0-.35-.03-.52-.07-.02 0-.03 0-.05-.01-.16-.02-.31-.06-.46-.1-.42-.1-.82-.25-1.18-.43l-.42-.24c-.06-.04-.12-.08-.18-.13.58-.03 1.13-.12 1.64-.27.56.19 1.19.29 1.86.29.29 0 .6-.02.91-.07l.29-.04.28.12 1.5.7v-1.12l.01-.43.31-.3c.32-.29.7-.77.7-1.36 0-.91-.82-1.72-2.01-2.15-.01-.39-.09-.77-.23-1.13.06.02.12.04.19.06"/><path fill="currentColor" fill-rule="evenodd" d="M5.985 3.01c2.758.002 4.995 1.571 4.995 3.5s-2.24 3.5-5 3.5c-.36 0-.71-.03-1.05-.08l-2.26 1.05c-.06.03-.11.03-.17.03-.26 0-.5-.21-.5-.5V8.6C1.38 8.02.99 7.3.99 6.51c0-1.929 2.237-3.498 4.995-3.5m.005 1c-2.17 0-4 1.14-4 2.5 0 .59.38 1.06.7 1.36l.32.3v1.55l1.51-.7.27-.13.3.04c.31.05.62.07.91.07 2.17 0 4-1.14 4-2.5 0-1.275-1.609-2.357-3.598-2.487z" clip-rule="evenodd"/></svg>', 'copy': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 2h6V1H4a1 1 0 0 0-1 1v9h1z"/><path fill="currentColor" d="M5 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z"/></svg>', 'copy-file': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 2h6V1H4a1 1 0 0 0-1 1v9h1z"/><path fill="currentColor" d="M6 3h3v4h4v7a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1"/><path fill="currentColor" d="m13 6-3-3v3z"/></svg>', 'copy-file-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m10 3 3 3v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm0 1.414V6h1.586zM12 7H9V4H6v10h6z" clip-rule="evenodd"/><path fill="currentColor" d="M4 2h6V1H4a1 1 0 0 0-1 1v9h1z"/></svg>', 'copy-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10 2H4v9H3V2a1 1 0 0 1 1-1h6z"/><path fill="currentColor" fill-rule="evenodd" d="M5 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1zm1 0h6v10H6z" clip-rule="evenodd"/></svg>', 'credit-card': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3 9h3v2H3z"/><path fill="currentColor" fill-rule="evenodd" d="M2 13a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm0-9h12v1H2zm12 3v5H2V7z" clip-rule="evenodd"/></svg>', 'cross': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 2.707 2.707 2l11.29 11.289-.708.707z"/><path fill="currentColor" d="M2.707 14 2 13.293 13.293 2l.707.708z"/></svg>', 'cross-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7m2.7 10.5L8 8.8l-2.7 2.7-.8-.8L7.2 8 4.5 5.3l.8-.8L8 7.2l2.7-2.7.8.8L8.8 8l2.7 2.7z"/></svg>', 'cross-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8 8.8 2.7 2.7.8-.8L8.8 8l2.7-2.7-.8-.8L8 7.2 5.3 4.5l-.8.8L7.2 8l-2.7 2.7.8.8z"/><path fill="currentColor" fill-rule="evenodd" d="M1 8c0-3.9 3.1-7 7-7s7 3.1 7 7-3.1 7-7 7-7-3.1-7-7m1 0c0 3.3 2.7 6 6 6s6-2.7 6-6-2.7-6-6-6-6 2.7-6 6" clip-rule="evenodd"/></svg>', 'dashboard': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 2h6v7H2zm0 8h6v4H2zm7-8h5v4H9zm0 5h5v7H9z"/></svg>', 'dashboard-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 2H2v7h6zM7 3H3v5h4zm1 7H2v4h6zm-1 1H3v2h4zm2-9v4h5V2zm4 1h-3v2h3zm1 4H9v7h5zm-1 1h-3v5h3z" clip-rule="evenodd"/></svg>', 'download': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.295 6.295 13 7l-5 5-5-5 .705-.705 3.795 3.79V1h1v9.085zM13 14v-2h1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2h1v2z" clip-rule="evenodd"/></svg>', 'earth': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m-1.224-2.553-.63 1.261A6.003 6.003 0 0 1 4.501 3.126l1.6.4a1 1 0 0 1 .742 1.14L6.41 7.19a1 1 0 0 1-.986.83H4.47a1 1 0 0 0-.77.362l-.185.223A1 1 0 0 0 3.5 9.862l.273.348a1 1 0 0 0 .59.362l1.658.332a1 1 0 0 1 .699.533l.057.116a1 1 0 0 1 0 .894m3.543-9.983V4.53a1 1 0 0 0 1 1h1.234a1 1 0 0 0 .664-.252l.09-.08a6.02 6.02 0 0 0-2.988-2.733m3.612 4.622-.012-.075h-3.05a1 1 0 0 0-.884.535l-.773 1.469a1 1 0 0 0-.115.465v.964a1 1 0 0 0 .408.806l.353.259a1 1 0 0 1 .408.806v1.242a6 6 0 0 0 3.665-6.47" clip-rule="evenodd"/></svg>', 'earth-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m0-1a6 6 0 0 0 1.766-.264v-1.421a.5.5 0 0 0-.204-.403l-.353-.26a1.5 1.5 0 0 1-.612-1.208V9.48c0-.243.06-.483.173-.698l.772-1.469a1.5 1.5 0 0 1 1.328-.802h2.944a6 6 0 0 0-.284-.844 1.5 1.5 0 0 1-.977.362h-1.235a1.5 1.5 0 0 1-1.5-1.5V2.28A6 6 0 0 0 8 2a6 6 0 0 0-2.918.756l1.14.286A1.5 1.5 0 0 1 7.336 4.75l-.433 2.525a1.5 1.5 0 0 1-1.479 1.247H4.47a.5.5 0 0 0-.385.18l-.185.223a.5.5 0 0 0-.008.628l.273.348a.5.5 0 0 0 .295.181l1.658.332a1.5 1.5 0 0 1 1.048.8l.058.115a1.5 1.5 0 0 1 0 1.342l-.587 1.174A6 6 0 0 0 8 14m6-6q0-.247-.02-.489h-3.11a.5.5 0 0 0-.443.268l-.772 1.468a.5.5 0 0 0-.058.233v.964a.5.5 0 0 0 .204.403l.353.259a1.5 1.5 0 0 1 .612 1.209v1.01A6 6 0 0 0 14 8m-8.402 5.5h.093l.638-1.276a.5.5 0 0 0 0-.448l-.057-.115a.5.5 0 0 0-.35-.267l-1.658-.331a1.5 1.5 0 0 1-.885-.545l-.273-.347a1.5 1.5 0 0 1 .025-1.884l.184-.223a1.5 1.5 0 0 1 1.155-.542h.954a.5.5 0 0 0 .493-.416l.433-2.525a.5.5 0 0 0-.37-.57l-1.95-.487-.046.018A6.002 6.002 0 0 0 5.598 13.5m7.287-8.597.164-.146a6 6 0 0 0-1.458-1.564 6 6 0 0 0-.772-.457V4.53a.5.5 0 0 0 .5.5h1.234a.5.5 0 0 0 .332-.126" clip-rule="evenodd"/></svg>', 'ellipsis': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0m4 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0m4 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0"/></svg>', 'ellipsis-vertical': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/></svg>', 'euro': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 6.489h7v1H2zm0 2.513h7v1H2z"/><path fill="currentColor" d="M9.246 2.008c1.466.078 2.786.738 3.756 1.764l-.71.707C11.433 3.561 10.244 3 8.953 3 6.404 3 4.247 5.188 4.247 8s2.157 5 4.707 5c1.29 0 2.48-.562 3.34-1.48l.71.707C11.969 13.323 10.536 14 8.953 14l-.294-.008C5.642 13.832 3.243 11.21 3.243 8c0-3.314 2.557-6 5.71-6z"/></svg>', 'euro-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill="currentColor" d="M8 .67C3.95.67.67 3.95.67 8S3.95 15.33 8 15.33s7.33-3.28 7.33-7.33S12.05.67 8 .67m2.27 11.4c-.38.09-.76.14-1.15.14a4.04 4.04 0 0 1-3.99-2.92h-.58c-.12 0-.23-.09-.23-.22v-.54c0-.12.11-.22.23-.22h.41a5 5 0 0 1 0-.8h-.41c-.12 0-.23-.09-.23-.22v-.58c0-.12.1-.22.23-.22h.63c.6-1.65 2.18-2.74 3.94-2.71.34 0 .68.03 1.02.1.12.03.19.16.16.28l-.23.84c-.03.12-.15.19-.27.17-.24-.05-.48-.08-.73-.08A2.42 2.42 0 0 0 6.81 6.5h2.71c.12.03.2.15.17.27l-.13.58c-.02.1-.11.18-.22.18H6.52c-.03.27-.03.53 0 .8h2.63c.12.03.2.15.17.27l-.11.52c-.03.1-.12.17-.22.18H6.8c.36.96 1.28 1.6 2.31 1.61.3 0 .59-.04.88-.1.12-.02.24.06.27.18l.17.84c.02.12-.05.24-.17.27v-.03z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></svg>', 'exclamation-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8m7.75-4v5h-1.5V4zm0 8v-1.5h-1.5V12z" clip-rule="evenodd"/></svg>', 'exclamation-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.75 4v5h-1.5V4zm0 8v-1.5h-1.5V12z"/><path fill="currentColor" fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1M2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8" clip-rule="evenodd"/></svg>', 'exclamation-stamp': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m15 8-1.55-1.86.22-2.46-2.3-.55L10.17 1 8 1.98 5.84 1 4.63 3.13l-2.29.54.22 2.46L1.01 8l1.55 1.86-.22 2.47 2.3.55 1.2 2.13L8 14.03l2.17.98 1.2-2.13 2.3-.55-.22-2.46L15 8.01zm-6.36 3.35H7.36v-1.34h1.28zm0-2.67H7.36V4.67h1.28z"/></svg>', 'exclamation-triangle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m8 2 7 12H1zm-.75 4.5h1.5V10h-1.5zm1.5 6V11h-1.5v1.5z" clip-rule="evenodd"/></svg>', 'exclamation-triangle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.75 6.5V10h-1.5V6.5zm0 6V11h-1.5v1.5z"/><path fill="currentColor" fill-rule="evenodd" d="M8 2 1 14h14zm0 1.985L2.741 13h10.518z" clip-rule="evenodd"/></svg>', 'eye': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/><path fill="currentColor" fill-rule="evenodd" d="M15 8s-3.134 5-7 5-7-5-7-5 3.134-5 7-5 7 5 7 5m-7 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6" clip-rule="evenodd"/></svg>', 'eye-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6m0-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M1 8s3.134 5 7 5 7-5 7-5-3.134-5-7-5-7 5-7 5m1.215 0 .133.178a15 15 0 0 0 1.405 1.61C4.974 10.994 6.478 12 8 12s3.026-1.006 4.247-2.212A15 15 0 0 0 13.785 8l-.133-.178a15 15 0 0 0-1.405-1.61C11.026 5.006 9.522 4 8 4S4.974 5.006 3.753 6.212A15 15 0 0 0 2.215 8" clip-rule="evenodd"/></svg>', 'eye-slash': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1 1.7.7-.7L15 14.302l-.7.7-3.084-3.085c-.963.63-2.057 1.08-3.216 1.08-3.866 0-7-5-7-5S2.174 6.124 3.97 4.67zm4.556 4.557A3 3 0 0 0 9.74 10.44l-.722-.722a2 2 0 0 1-2.74-2.74z" clip-rule="evenodd"/><path fill="currentColor" d="m5.67 3.572 1.532 1.532a3.003 3.003 0 0 1 3.69 3.691l1.877 1.877C14.142 9.366 15 7.997 15 7.997s-3.134-5-7-5c-.817 0-1.6.223-2.33.575"/><path fill="currentColor" d="M9.998 7.9 8.097 6a2 2 0 0 1 1.9 1.901"/></svg>', 'eye-slash-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1 1.7.7-.7L15 14.302l-.7.7-3.084-3.085c-.963.63-2.057 1.08-3.216 1.08-3.866 0-7-5-7-5S2.174 6.124 3.97 4.67zm3.682 3.683c-.324.256-.635.535-.93.826a15 15 0 0 0-1.537 1.788l.133.178c.334.442.815 1.028 1.405 1.61C4.974 10.99 6.478 11.997 8 11.997c.852 0 1.698-.315 2.492-.804l-.752-.752a3 3 0 0 1-4.184-4.184zm1.596 1.596a2 2 0 0 0 2.74 2.74z" clip-rule="evenodd"/><path fill="currentColor" d="m5.67 3.572.757.757A4.2 4.2 0 0 1 8 3.997c1.522 0 3.026 1.006 4.247 2.212a15 15 0 0 1 1.538 1.788q-.061.085-.133.178a15 15 0 0 1-1.531 1.733l-.06.057.708.707C14.142 9.366 15 7.997 15 7.997s-3.134-5-7-5c-.817 0-1.6.223-2.33.575"/><path fill="currentColor" d="m8.097 6-.895-.896a3.003 3.003 0 0 1 3.69 3.691L9.999 7.9A2 2 0 0 0 8.097 6"/></svg>', 'fax': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13 14H6V2h7v3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1M7 3h5v2H7zm0 4h5v1H7zm1 2H7v1h1zm-1 2h1v1H7zm3-2H9v1h1zm-1 2h1v1H9zm3-2h-1v1h1zm-1 2h1v1h-1z" clip-rule="evenodd"/><path fill="currentColor" d="M2 5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/></svg>', 'fax-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 3H7v2h5zM6 3v2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1V2H6zm6 3h1v7H6V6zM3 5h2v8H3zm9 2H7v1h5zM7 9h1v1H7zm1 2H7v1h1zm1-2h1v1H9zm1 2H9v1h1zm1-2h1v1h-1zm1 2h-1v1h1z" clip-rule="evenodd"/></svg>', 'file': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zm1-1V1l3 3z" clip-rule="evenodd"/></svg>', 'file-cog': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 8.704c.709 0 1.286.577 1.286 1.286S8.709 11.276 8 11.276A1.29 1.29 0 0 1 6.714 9.99c0-.709.577-1.286 1.286-1.286"/><path fill="currentColor" fill-rule="evenodd" d="M9 4.99h4v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-12a1 1 0 0 1 1-1h5zm-1.429 2v.9a2.1 2.1 0 0 0-.75.314l-.64-.638-.605.606.638.638a2.1 2.1 0 0 0-.314.751H5v.858h.9c.056.273.165.526.314.75l-.638.64.606.605.638-.638c.225.149.478.258.751.314v.9h.858v-.9a2.1 2.1 0 0 0 .75-.314l.64.638.605-.606-.638-.638c.149-.225.258-.478.314-.751h.9V9.56h-.9a2.1 2.1 0 0 0-.314-.75l.638-.64-.606-.605-.638.638a2.1 2.1 0 0 0-.751-.314v-.9z" clip-rule="evenodd"/><path fill="currentColor" d="M13 3.99h-3v-3z"/></svg>', 'file-cog-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m10 .99 3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-12a1 1 0 0 1 1-1zm0 1.415V3.99h1.584zm2 2.585H9v-3H4v12h8z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M10.1 9.561h.9v.858h-.9a2.1 2.1 0 0 1-.314.75l.638.64-.606.605-.638-.638a2.1 2.1 0 0 1-.752.313v.901h-.857v-.9a2.1 2.1 0 0 1-.75-.314l-.64.638-.605-.606.638-.638a2.1 2.1 0 0 1-.314-.751H5V9.56h.9c.056-.273.165-.526.314-.75l-.638-.64.606-.605.638.638a2.1 2.1 0 0 1 .751-.314v-.9h.857v.9c.274.056.527.165.752.314l.638-.638.606.606-.638.638c.149.225.258.478.313.751m-3.386.429a1.287 1.287 0 0 0 2.571 0 1.287 1.287 0 0 0-2.571 0" clip-rule="evenodd"/></svg>', 'file-download': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13 14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5v4h4zM9.793 9.793 8.5 11.086V7h-1v4.086L6.207 9.793 5.5 10.5 8 13l2.5-2.5z" clip-rule="evenodd"/><path fill="currentColor" d="M10 4V1l3 3z"/></svg>', 'file-download-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m10.5 10.5-.707-.707L8.5 11.086V7h-1v4.086L6.207 9.793 5.5 10.5 8 13z"/><path fill="currentColor" fill-rule="evenodd" d="m10 1 3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 1.415V4h1.585zM12 5H9V2H4v12h8z" clip-rule="evenodd"/></svg>', 'file-excel': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zm-.018 7h1.335L8.776 9.48l1.5-2.48H9.02l-.795 1.485a5 5 0 0 0-.157.436h-.014a2.6 2.6 0 0 0-.15-.422L7.19 7H5.82l1.457 2.5L5.683 12h1.342l.865-1.614q.09-.234.115-.349h.014q.053.244.101.335z" clip-rule="evenodd"/><path fill="currentColor" d="M10 4V1l3 3z"/></svg>', 'file-excel-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.982 12h1.335L8.776 9.48l1.5-2.48H9.02l-.795 1.485a5 5 0 0 0-.157.436h-.014a2.6 2.6 0 0 0-.15-.422L7.19 7H5.82l1.457 2.5L5.683 12h1.342l.865-1.614q.09-.234.115-.349h.014q.053.244.101.335z"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4l-3-3zm6 3V2.537L11.254 4zm2 1v9H4V2h5v3z" clip-rule="evenodd"/></svg>', 'file-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m10 1 3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 1.415V4h1.585zM12 5H9V2H4v12h8z" clip-rule="evenodd"/></svg>', 'file-pdf': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.464 11.274a4 4 0 0 0-.393.207c-.223.137-.37.27-.444.387-.072.11-.073.19-.03.273l.019.034.027-.01c.103-.042.268-.177.48-.433q.18-.22.34-.458m1.243-1.007q.378-.09.764-.146a9 9 0 0 1-.386-.65 16 16 0 0 1-.378.796m1.873.363a3 3 0 0 0 .341.314c.164.123.28.165.344.168a.1.1 0 0 0 .053-.012.23.23 0 0 0 .07-.094.3.3 0 0 0 .045-.152.07.07 0 0 0-.02-.047c-.039-.047-.15-.116-.391-.159a3 3 0 0 0-.463-.04zM8.051 7.952q.096-.308.151-.626.035-.213.029-.352a.5.5 0 0 0-.024-.15.4.4 0 0 0-.11.03c-.066.027-.12.08-.148.215l-.01.057q-.029.213.044.565.027.126.068.26"/><path fill="currentColor" fill-rule="evenodd" d="M9 1v4h4v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM5.42 12.713a.6.6 0 0 1-.332-.318c-.147-.294-.098-.588.06-.834.15-.233.4-.43.68-.596a6 6 0 0 1 1.122-.489q.454-.817.804-1.686a5.6 5.6 0 0 1-.326-.98c-.065-.303-.09-.603-.034-.86.056-.268.207-.509.492-.623l.055-.02a.75.75 0 0 1 .4-.038.53.53 0 0 1 .362.276c.066.124.09.27.096.407.005.142-.01.3-.036.465-.063.386-.204.859-.394 1.358q.316.672.742 1.277a4.5 4.5 0 0 1 1.01.038c.276.049.556.147.727.352a.64.64 0 0 1 .151.392.9.9 0 0 1-.104.426.8.8 0 0 1-.312.341.65.65 0 0 1-.342.078c-.25-.01-.495-.148-.706-.315l-.095-.081a4.3 4.3 0 0 1-.595-.638 9 9 0 0 0-1.512.307 8.6 8.6 0 0 1-.773 1.143c-.22.265-.46.496-.701.596a.6.6 0 0 1-.44.022" clip-rule="evenodd"/><path fill="currentColor" d="M10 1v3h3z"/></svg>', 'file-pdf-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.42 12.713a.6.6 0 0 1-.332-.318c-.147-.294-.098-.588.06-.834.15-.233.4-.43.68-.596a6 6 0 0 1 1.122-.489q.454-.817.804-1.686a5.5 5.5 0 0 1-.326-.98c-.065-.303-.09-.603-.034-.86.056-.268.207-.509.492-.623.145-.058.303-.09.455-.058a.53.53 0 0 1 .362.276c.066.124.09.27.096.407.005.142-.01.3-.036.465-.063.386-.204.859-.394 1.358q.316.672.742 1.277a4.4 4.4 0 0 1 1.01.038c.276.049.556.147.727.352a.64.64 0 0 1 .151.392.9.9 0 0 1-.104.426.8.8 0 0 1-.268.315.65.65 0 0 1-.386.104c-.25-.01-.495-.148-.706-.315a4.3 4.3 0 0 1-.69-.72 9 9 0 0 0-1.512.308 8.6 8.6 0 0 1-.773 1.143c-.22.265-.46.496-.701.596a.6.6 0 0 1-.44.022m1.044-1.44a4 4 0 0 0-.348.18c-.248.148-.41.29-.49.415-.07.11-.072.19-.03.273l.02.034.027-.01c.103-.042.268-.177.48-.433q.18-.22.34-.458m1.242-1.006q.378-.09.764-.146a9 9 0 0 1-.386-.65 16 16 0 0 1-.378.796m2.18.65a3 3 0 0 1-.328-.309q.233.002.463.04c.24.043.352.112.392.159q.019.02.02.047a.3.3 0 0 1-.045.152.23.23 0 0 1-.071.094.1.1 0 0 1-.053.012c-.07-.003-.196-.05-.377-.194m-1.684-3.59q-.056.316-.15.625a3 3 0 0 1-.069-.26c-.057-.268-.065-.478-.034-.623.028-.134.082-.188.148-.214a.4.4 0 0 1 .11-.03.5.5 0 0 1 .024.15q.006.138-.029.351" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 1 1-1h6l3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm7 .537V4h1.254zM12 14V5H9V2H4v12z" clip-rule="evenodd"/></svg>', 'file-text': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zm2 2H5v1h6zM5 9h6v1H5zm6 2H5v1h6z" clip-rule="evenodd"/><path fill="currentColor" d="M10 4V1l3 3z"/></svg>', 'file-text-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11 7H5v1h6zM5 9h6v1H5zm6 2H5v1h6z"/><path fill="currentColor" fill-rule="evenodd" d="m13 4-3-3H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1zm-3 0V2.415L11.585 4zM9 5h3v9H4V2h5z" clip-rule="evenodd"/></svg>', 'file-upload': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5h4v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5zM5.5 9.5l.707.707L7.5 8.914V13h1V8.914l1.293 1.293.707-.707L8 7z" clip-rule="evenodd"/><path fill="currentColor" d="M13 4h-3V1z"/></svg>', 'file-upload-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9.793 10.207 8.5 8.914V13h-1V8.914l-1.293 1.293L5.5 9.5 8 7l2.5 2.5z"/><path fill="currentColor" fill-rule="evenodd" d="M13 4v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM4 14h8V5H9V2H4zm6-10h1.585L10 2.415z" clip-rule="evenodd"/></svg>', 'file-word': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zM5 7l1.091 5h1.002L8 8.262 8.91 12h.98L11 7h-.93l-.701 3.492L8.568 7H7.47l-.836 3.435L5.944 7z" clip-rule="evenodd"/><path fill="currentColor" d="M10 4V1l3 3z"/></svg>', 'file-word-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m5 7 1.091 5h1.002L8 8.262 8.91 12h.98L11 7h-.93l-.701 3.492L8.568 7H7.47l-.836 3.435L5.944 7z"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4l-3-3zm6 3V2.537L11.254 4zm2 1v9H4V2h5v3z" clip-rule="evenodd"/></svg>', 'filter': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 0-1 1v1.586a1 1 0 0 0 .293.707L6 9v2.5a1 1 0 0 0 .4.8l2 1.5A1 1 0 0 0 10 13V9l3.707-3.707A1 1 0 0 0 14 4.586V3a1 1 0 0 0-1-1z" clip-rule="evenodd"/></svg>', 'filter-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 3h10v1.586l-4 4V13l-2-1.5V8.586l-4-4zm3 7V9L2.293 5.293A1 1 0 0 1 2 4.586V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1.586a1 1 0 0 1-.293.707L10 9v4a1 1 0 0 1-1.6.8l-2-1.5a1 1 0 0 1-.4-.8z" clip-rule="evenodd"/></svg>', 'floppy-disk': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 3a1 1 0 0 1 1-1h7.586a1 1 0 0 1 .707.293l2.414 2.414a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm2 0h6v3H4zm4 5a2 2 0 1 0 0 4 2 2 0 0 0 0-4" clip-rule="evenodd"/></svg>', 'floppy-disk-checked': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 3a1 1 0 0 1 1-1h7.586a1 1 0 0 1 .707.293l2.414 2.414a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm2 0h6v3H4zm6.828 5-3.535 3.535-2.12-2.12.706-.708 1.415 1.414 2.828-2.828z" clip-rule="evenodd"/></svg>', 'floppy-disk-checked-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11.293 2.293A1 1 0 0 0 10.586 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5.414a1 1 0 0 0-.293-.707zM3 13V3h1v3h6V3h.586L13 5.414V13zM9 3H5v2h4zm1.828 5.12L8 10.948v.001l-.707.707-.707-.706-1.414-1.415.707-.707 1.415 1.414 2.828-2.828z" clip-rule="evenodd"/></svg>', 'floppy-disk-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6 10a2 2 0 1 1 4 0 2 2 0 0 1-4 0m2 1a1 1 0 1 1 0-2 1 1 0 0 1 0 2" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M10.586 2a1 1 0 0 1 .707.293l2.414 2.414a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zM3 3v10h10V5.414L10.586 3H10v3H4V3zm2 0h4v2H5z" clip-rule="evenodd"/></svg>', 'folder': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 4h7c.55 0 1 .45 1 1v7c0 .55-.45 1-1 1H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h4z"/></svg>', 'folder-check': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14 4H7L6 3H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1M5.705 8.185 7 9.48l3.295-3.295.705.705-4 4-2-2z" clip-rule="evenodd"/></svg>', 'folder-check-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.705 8.185 7 9.48l3.295-3.295.705.705-4 4-2-2z"/><path fill="currentColor" fill-rule="evenodd" d="m6 3 1 1.001h7c.55 0 1 .45 1 1.001v6.997c0 .55-.45 1.001-1 1.001H2c-.55 0-1-.45-1-1.001V4.001C1 3.451 1.45 3 2 3zm-.41 1.001H2v8.008h12V5.002H6.59z" clip-rule="evenodd"/></svg>', 'folder-lines': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4H7L6 3H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1m-5 6H4V9h5zm3-2H4V7h8z"/></svg>', 'folder-lines-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12 8.005H4V7.004h8zM9 9.006H4v1.001h5zM5.59 4.001H2v8.008h12V5.002H6.59l-.29-.29zM6 3l1 1.001h7c.55 0 1 .45 1 1.001v6.997c0 .55-.45 1.001-1 1.001H2c-.55 0-1-.45-1-1.001V4.001C1 3.451 1.45 3 2 3z"/></svg>', 'folder-link': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 4h7c.55 0 1 .45 1 1v4.052A3.5 3.5 0 0 0 12.498 8H9.502a3.502 3.502 0 0 0-3.166 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h4z"/><path fill="currentColor" d="M10.5 10h-1a1.5 1.5 0 0 0 0 3h1v1h-1a2.5 2.5 0 0 1 0-5h1zm2-1a2.5 2.5 0 0 1 0 5h-1v-1h1a1.5 1.5 0 0 0 0-3h-1V9z"/><path fill="currentColor" d="M10 11h2v1h-2z"/></svg>', 'folder-link-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 4.001h7c.55 0 1 .45 1 1v4.05a3.5 3.5 0 0 0-1-.713V5.002H6.59L5.59 4H2v8.008h4.037c.05.35.153.683.299.991H2c-.55 0-1-.45-1-1.001V4.001C1 3.451 1.45 3 2 3h4z"/><path fill="currentColor" d="M10.5 10h-1a1.5 1.5 0 0 0 0 3h1v1h-1a2.5 2.5 0 0 1 0-5h1zm2-1a2.5 2.5 0 0 1 0 5h-1v-1h1a1.5 1.5 0 0 0 0-3h-1V9z"/><path fill="currentColor" d="M10 11h2v1h-2z"/></svg>', 'folder-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7 4.001 6 3H2c-.55 0-1 .45-1 1.001v7.998C1 12.549 1.45 13 2 13h12c.55 0 1-.45 1-1.001V5.002c0-.55-.45-1.001-1-1.001zm-5 0h3.59l1 1.001H14v7.007H2z" clip-rule="evenodd"/></svg>', 'folder-star': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7 4h7c.55 0 1 .45 1 1v7c0 .55-.45 1-1 1H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h4zm2.728 3.646L8 7.91l1.25 1.281L8.955 11l1.545-.854 1.545.854-.295-1.809L13 7.911l-1.727-.265L10.5 6z" clip-rule="evenodd"/></svg>', 'folder-star-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.273 7.646 13 7.91l-1.25 1.281.295 1.809-1.545-.854L8.955 11l.295-1.809L8 7.911l1.728-.265L10.5 6z"/><path fill="currentColor" fill-rule="evenodd" d="M7 4h7c.55 0 1 .45 1 1v7c0 .55-.45 1-1 1H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h4zm-5 8h12V5H6.586l-1-1H2z" clip-rule="evenodd"/></svg>', 'folders': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 3h4c.55 0 1 .45 1 1v5c0 .55-.45 1-1 1h-1V8a2 2 0 0 0-2-2H6.414l-1-1H5V3c0-.55.45-1 1-1h2z"/><path fill="currentColor" d="M10 7a1 1 0 0 1 1 1v5c0 .55-.45 1-1 1H3c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h2l1 1z"/></svg>', 'folders-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 3 8 2H6c-.55 0-1 .45-1 1v2h1V3h1.59l1 1H13v5.01h-1V10h1c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1z"/><path fill="currentColor" fill-rule="evenodd" d="m5 6 1 1h4c.55 0 1 .45 1 1v5c0 .55-.45 1-1 1H3c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1zm-.41 1H3v6.01h7V8H5.59z" clip-rule="evenodd"/></svg>', 'gavel': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.908 5.012a.59.59 0 0 0 .59 1.02l.138-.08.59 1.02-5.892 3.402a.59.59 0 0 0 .589 1.02l5.892-3.4.589 1.02-.14.08a.59.59 0 0 0 .59 1.02l3.31-1.91a.59.59 0 0 0-.59-1.02l-.139.08-1.768-3.062.14-.08a.59.59 0 0 0-.59-1.021zm3.631 7.01a.5.5 0 1 0 0 1h5a.5.5 0 0 0 0-1z"/></svg>', 'gavel-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.869 4.99a.59.59 0 0 0 .59 1.02l.138-.08.59 1.02-5.892 3.402a.59.59 0 1 0 .589 1.02l5.892-3.4.59 1.02-.14.08a.59.59 0 0 0 .589 1.02l3.31-1.91a.59.59 0 0 0-.59-1.02l-.139.08L9.628 4.18l.14-.08a.59.59 0 0 0-.59-1.021zm1.594.44 1.3-.75 1.767 3.062-1.299.75z" clip-rule="evenodd"/><path fill="currentColor" d="M9.5 12a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1z"/></svg>', 'glitters': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.675 2.868A4 4 0 0 0 9.02 5.251L11 6l-1.889.663a4 4 0 0 0-2.448 2.448L6 11l-.749-1.979a4 4 0 0 0-2.383-2.346L1 6l1.799-.553A4 4 0 0 0 5.447 2.8L6 1zm5.479 5.561a4 4 0 0 0 2.347 2.383L15 11l-.408.144a4 4 0 0 0-2.448 2.448L12 14l-.188-.499a4 4 0 0 0-2.383-2.347L9 11l.269-.083a4 4 0 0 0 2.648-2.648L12 8zM4.5 12a2.5 2.5 0 0 0 1.464 1.486L6 13.5A2.45 2.45 0 0 0 4.5 15l-.013-.036A2.5 2.5 0 0 0 3 13.5 2.27 2.27 0 0 0 4.5 12"/></svg>', 'glitters-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4.5 12a2.5 2.5 0 0 0 1.464 1.486L6 13.5A2.45 2.45 0 0 0 4.5 15l-.014-.036A2.5 2.5 0 0 0 3 13.5 2.27 2.27 0 0 0 4.5 12"/><path fill="currentColor" fill-rule="evenodd" d="M12.166 8.459a3.93 3.93 0 0 0 2.305 2.34L15 11l-.44.154a3.93 3.93 0 0 0-2.406 2.406L12 14l-.2-.53a3.93 3.93 0 0 0-2.341-2.304L9 11l.305-.094a3.93 3.93 0 0 0 2.601-2.601L12 8zm-.15 1.748q-.358.451-.809.809.438.352.785.793.36-.457.817-.817a5 5 0 0 1-.793-.785M6.674 2.868A4 4 0 0 0 9.02 5.251L11 6l-1.889.664a4 4 0 0 0-2.447 2.447L6 11l-.748-1.979a4 4 0 0 0-2.384-2.346L1 6l1.798-.553A4 4 0 0 0 5.448 2.8L6 1zM6.06 3.927A5 5 0 0 1 3.927 6.06a5 5 0 0 1 2.047 2.126 5 5 0 0 1 2.213-2.212A5 5 0 0 1 6.06 3.927" clip-rule="evenodd"/></svg>', 'graduation-cap': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m1 6 7-3 7 3v5h-1V6.429L8 9z"/><path fill="currentColor" d="M3 7.945V11l5 2 5-2V7.945l-5 2.143z"/></svg>', 'graduation-cap-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1 6 2 .857V11l5 2 5-2V6.857l1-.428V11h1V6L8 3zm3 4.323V7.286L8 9l4-1.714v3.037l-4 1.6zM3.539 6 8 7.912 12.461 6 8 4.088z" clip-rule="evenodd"/></svg>', 'hand-euro': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.91 7.11c-.581.55-1.362.89-2.213.89h-.01c-1.357 0-2.527-.86-3.043-2.09H8v-1h1.385a4 4 0 0 1-.02-.554l.002-.043q.005-.113.017-.223H8v-1h1.642C10.156 1.86 11.322 1 12.687 1c.901 0 1.712.37 2.313.98l-.711.71c-.42-.43-.991-.69-1.602-.69-.774 0-1.492.422-1.92 1.09h1.239v1h-1.612a2.7 2.7 0 0 0 0 .82h1.612v1h-1.241C11.19 6.578 11.907 7 12.687 7c.57 0 1.101-.22 1.512-.6zM3 7H1v7h2zm9.81 4.5h-2.06c-.09.18-.2.34-.35.49-.37.37-.87.58-1.39.58s-1.02-.2-1.39-.58l-1.04-1.04c-.2-.2-.2-.51 0-.71s.51-.2.71 0l1.04 1.04c.36.36 1 .37 1.36 0 .18-.18.28-.42.28-.68s-.1-.5-.28-.68L8.44 8.67c-.2-.2-.44-.36-.71-.48-.3-.12-.62-.18-.94-.18h-2.8v4.8h.02l.29-.02 1.94 1.63c.45.38 1.02.58 1.6.58h5.81c.74 0 1.33-.6 1.33-1.33 0-1.2-.97-2.17-2.17-2.17"/></svg>', 'hand-euro-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.91 7.11c-.581.55-1.362.89-2.213.89h-.01c-1.357 0-2.527-.86-3.043-2.09H8v-1h1.385a3.7 3.7 0 0 1 0-.82H8v-1h1.642C10.156 1.86 11.322 1 12.687 1c.901 0 1.712.37 2.313.98l-.711.71c-.42-.43-.991-.69-1.602-.69-.774 0-1.492.422-1.92 1.09h1.239v1h-1.612a2.7 2.7 0 0 0 0 .82h1.612v1h-1.241C11.19 6.578 11.907 7 12.687 7c.57 0 1.101-.22 1.512-.6z"/><path fill="currentColor" fill-rule="evenodd" d="M1 7h3v1h2.798a2.5 2.5 0 0 1 1.77.731L9.73 9.896a1.56 1.56 0 0 1 .376 1.603h2.726c1.197 0 2.167.971 2.167 2.167 0 .737-.599 1.333-1.334 1.333H7.852a2.5 2.5 0 0 1-1.599-.578L4 12.566V14H1zm1 1h1v5H2zm2 1v2.27l2.892 2.382c.27.224.61.347.96.347h5.814c.185 0 .334-.15.334-.333 0-.644-.522-1.167-1.167-1.167h-3.77a1.56 1.56 0 0 1-1.539-.395l-.75-.75a.5.5 0 1 1 .707-.707l.75.75a.56.56 0 0 0 .397.164h.021a.56.56 0 0 0 .375-.957L7.861 9.439A1.5 1.5 0 0 0 6.799 9z" clip-rule="evenodd"/></svg>', 'hand-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.75 3.5c-.41 0-.75.34-.75.75v3.5c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-4c0-.41-.34-.75-.75-.75s-.75.34-.75.75v4c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-5c0-.41-.34-.75-.75-.75S8 2.34 8 2.75v5c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-4c0-.41-.34-.75-.75-.75S6 3.34 6 3.75V11L3.97 9.54a.845.845 0 0 0-1.21 0c-.33.34-.34.88 0 1.21l2.22 2.22c.66.66 1.55 1.03 2.47 1.03H11a2.5 2.5 0 0 0 2.5-2.5V4.25c0-.41-.34-.75-.75-.75"/></svg>', 'history': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.975 3.82.002-.001-.083-.09-.063-.066-.009-.01-.001-.002a6 6 0 0 0-.272-.29q-.076-.074-.157-.144l-.058-.052-.004-.003a6 6 0 0 0-.275-.237 6 6 0 0 0-.22-.166l-.024-.018a7 7 0 0 0-.293-.203 7 7 0 0 0-.859-.467 7 7 0 0 0-.339-.14l-.03-.011a6 6 0 0 0-.255-.093 7 7 0 0 0-.376-.108L9.592 1.7a4 4 0 0 0-.652-.128l-.092-.015q-.072-.013-.146-.022A6.47 6.47 0 0 0 3 3.847V1.996H2v4h4v-1H3.406a5.48 5.48 0 0 1 5.189-2.467q.061.008.124.019l.077.012q.188.025.373.064.088.02.173.044l.063.017q.16.041.317.09.115.04.227.084l.016.006a6 6 0 0 1 .523.232 5.4 5.4 0 0 1 .736.452l.03.022q.09.066.178.134.12.098.235.204l.05.044a4 4 0 0 1 .36.364l.012.013A5.496 5.496 0 1 1 2.5 7.996h-1A6.5 6.5 0 1 0 12.975 3.82"/><path fill="currentColor" d="M10.088 11.746 7.293 8.95V4.246h1v4.29l2.5 2.505z"/></svg>', 'home': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m13.55 5.5-5-3.33C8.38 2.06 8.19 2 7.99 2s-.39.06-.56.17L2.45 5.5c-.28.19-.45.5-.45.83v6.66c0 .55.45 1 1 1h4V12c0-.56.45-1.01 1-1.01s1 .45 1 1.01v1.99h4c.55 0 1-.45 1-1V6.33c0-.33-.17-.65-.45-.83"/></svg>', 'home-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m13.55 5.5-5-3.33C8.38 2.06 8.19 2 7.99 2s-.39.06-.56.17L2.45 5.5c-.28.19-.45.5-.45.83v6.66c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V6.33c0-.33-.17-.65-.45-.83m-.56 7.5h-4v-1c0-.55-.45-1-1-1s-1 .45-1 1v1H3V6.33L8 3l5 3.33V13z"/></svg>', 'info-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-7.75 4V7h1.5v5zm0-8v1.5h1.5V4z" clip-rule="evenodd"/></svg>', 'info-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.25 12V7h1.5v5zm0-8v1.5h1.5V4z"/><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m6-7A6 6 0 1 0 2 8a6 6 0 0 0 12 0" clip-rule="evenodd"/></svg>', 'interrogation-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15.039 8.146a7 7 0 1 1-14 0 7 7 0 0 1 14 0m-6.974-.5a1 1 0 1 0-.942-1.335l-1.43-.458A2.501 2.501 0 1 1 8.79 9.04v.606h-1.5v-2zm-.026 3a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5" clip-rule="evenodd"/></svg>', 'interrogation-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.824 7.646a1 1 0 1 0-.943-1.335l-1.429-.458A2.501 2.501 0 1 1 8.548 9.04v.606h-1.5v-2zm-.776 3.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0"/><path fill="currentColor" fill-rule="evenodd" d="M7.798 15.146a7 7 0 1 0 0-14 7 7 0 0 0 0 14m0-1a6 6 0 1 0 0-12 6 6 0 0 0 0 12" clip-rule="evenodd"/></svg>', 'key': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.44 6.67a3.994 3.994 0 0 0-5.1-2.44A3.986 3.986 0 0 0 .9 9.33 3.994 3.994 0 0 0 6 11.77c1.14-.4 2.04-1.3 2.44-2.44h2.89V12H14V9.33h1.33V6.67zM4.67 9.33c-.73 0-1.33-.6-1.33-1.33s.6-1.33 1.33-1.33S6 7.27 6 8s-.58 1.32-1.31 1.33z"/></svg>', 'laptop': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.5 5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z"/><path fill="currentColor" fill-rule="evenodd" d="M3 3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1H1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1h-2a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm10 1H3v7h10z" clip-rule="evenodd"/></svg>', 'layers': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.763 8.94a.5.5 0 0 0 .474 0l6.5-3.5a.5.5 0 0 0 0-.88l-6.5-3.5a.5.5 0 0 0-.474 0l-6.5 3.5a.5.5 0 0 0 0 .88zM8 7.932 2.555 5 8 2.068 13.445 5z" clip-rule="evenodd"/><path fill="currentColor" d="M8 12a.5.5 0 0 1-.237-.06l-6.5-3.5.474-.88L8 10.932l6.263-3.372.474.88-6.5 3.5A.5.5 0 0 1 8 12"/><path fill="currentColor" d="M8 15a.5.5 0 0 1-.237-.06l-6.5-3.5.474-.88L8 13.932l6.263-3.372.474.88-6.5 3.5A.5.5 0 0 1 8 15"/></svg>', 'life-ring': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15a6.97 6.97 0 0 0 4.192-1.394 7 7 0 0 0 1.315-1.284A6.97 6.97 0 0 0 15 8a6.97 6.97 0 0 0-1.394-4.192 7 7 0 0 0-1.414-1.414A6.97 6.97 0 0 0 8 1a6.97 6.97 0 0 0-4.192 1.394 7 7 0 0 0-1.414 1.414A6.97 6.97 0 0 0 1 8a6.97 6.97 0 0 0 1.394 4.192c.368.493.8.935 1.284 1.315A6.97 6.97 0 0 0 8 15m3.446-4.968 1.445 1.444a6 6 0 0 1-1.415 1.415l-1.444-1.445a4 4 0 0 0 1.414-1.414m-6.892 0a4 4 0 0 0 1.414 1.414l-1.445 1.445a6 6 0 0 1-1.414-1.415zm1.414-5.478a4 4 0 0 0-1.414 1.414L3.109 4.523A6 6 0 0 1 4.523 3.11zm5.509-1.445-1.445 1.445a4 4 0 0 1 1.414 1.414l1.445-1.445a6 6 0 0 0-1.415-1.414M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6" clip-rule="evenodd"/></svg>', 'lines-rectangle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm2 4h6v1H5zm4 3H5v1h4z" clip-rule="evenodd"/></svg>', 'lines-rectangle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5 6h6v1H5zm4 3H5v1h4z"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm8 1H4v12h8z" clip-rule="evenodd"/></svg>', 'link': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.65 2.727a3 3 0 0 1 .975.653 3 3 0 0 1 .01 4.24l-4 4a3 3 0 0 1-2.135.88 3 3 0 0 1-2.125-.865 3 3 0 0 1 0-4.25l.71-.71.705.71-.705.71a2.003 2.003 0 1 0 2.835 2.83l4-4a2.006 2.006 0 0 0-.65-3.27 2.005 2.005 0 0 0-2.185.435l-.71-.71a3 3 0 0 1 3.275-.653"/><path fill="currentColor" d="M1.659 11.76a2 2 0 0 0 .436.65 2 2 0 0 0 2.835 0l.71.71A3.04 3.04 0 0 1 3.5 14a3 3 0 0 1-2.13-.85 3 3 0 0 1 0-4.255l4-4A3.009 3.009 0 0 1 9.625 9.15l-1.06 1.06-.71-.71 1.06-1.075A2 2 0 0 0 9.5 7a1.97 1.97 0 0 0-1.22-1.86 2 2 0 0 0-2.185.435l-4 4a2 2 0 0 0-.436 2.185"/></svg>', 'list': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 3h9v1H5zm0 9h9v1H5zm9-4.5H5v1h9zm-12 0h1v1H2zM3 3H2v1h1zm-1 9h1v1H2z" clip-rule="evenodd"/></svg>', 'loader': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-opacity=".2" d="M13.657 8A5.657 5.657 0 1 1 2.343 8a5.657 5.657 0 0 1 11.314 0M3.475 8a4.526 4.526 0 1 0 9.05 0 4.526 4.526 0 0 0-9.05 0"/><path fill="currentColor" d="M2.343 8A5.657 5.657 0 0 1 8 2.343v1.132A4.525 4.525 0 0 0 3.475 8z"/></svg>', 'location': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 14.997c2.5-2.5 5-6.236 5-8.997A5 5 0 0 0 3 6c0 2.761 2.5 6.496 5 8.997m0-7.499a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'location-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 6.002a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M13 6.002c0 2.506-2.06 5.814-4.309 8.273q-.344.376-.691.723a23 23 0 0 1-.691-.723C5.059 11.816 3 8.508 3 6.002a5 5 0 0 1 10 0m-1 0c0 1.116-.52 2.554-1.424 4.088A21.5 21.5 0 0 1 8 13.55a21.5 21.5 0 0 1-2.576-3.459C4.52 8.556 4 7.118 4 6.002a4 4 0 1 1 8 0" clip-rule="evenodd"/></svg>', 'lock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 4v3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-6 0m5 3V4a2 2 0 1 0-4 0v3zm-2 3a1 1 0 1 0 0 2 1 1 0 0 0 0-2" clip-rule="evenodd"/></svg>', 'lock-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/><path fill="currentColor" fill-rule="evenodd" d="M5 4v3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-6 0m5 3V4a2 2 0 1 0-4 0v3zm2 1v6H4V8z" clip-rule="evenodd"/></svg>', 'log-in': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 13v1h5a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H8v1h5v10z"/><path fill="currentColor" d="m9.086 8.5-1.793 1.793L8 11l3-3-3-3-.707.707L9.086 7.5H2v1z"/></svg>', 'log-out': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.086 8.5-1.793 1.793L11 11l3-3-3-3-.707.707L12.086 7.5H5v1z"/><path fill="currentColor" d="M8 3V2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5v-1H3V3z"/></svg>', 'magnifying-glass': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7a5 5 0 1 1 8.872 3.164l3.127 3.128-.707.707-3.128-3.128A5 5 0 0 1 2 7m5 4a4 4 0 1 1 0-8 4 4 0 0 1 0 8" clip-rule="evenodd"/></svg>', 'mail': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M1.007 4.002v8.011a1 1 0 0 0 1 1h11.997a1 1 0 0 0 1-1V4l-7 5z"/><path fill="currentColor" d="m1.52 3.14 6.484 4.63 6.485-4.632a1 1 0 0 0-.486-.126H2.008a1 1 0 0 0-.487.127"/></svg>', 'mail-open': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.604 2.082a1 1 0 0 1 .792 0l6 2.59c.366.158.604.52.604.919v7.408a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V5.591c0-.4.237-.76.604-.92zM2.27 5.48 8 7.955l5.728-2.475L8 3.007z" clip-rule="evenodd"/></svg>', 'mail-open-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.604 2.082a1 1 0 0 1 .792 0l6 2.59a1 1 0 0 1 .604.919V13a1 1 0 0 1-.898.995L14 14H2a1 1 0 0 1-1-1V5.59a1 1 0 0 1 .473-.849l.13-.068zm.792 6.71a1 1 0 0 1-.792 0L2 6.372V13h12V6.372zM2.261 5.477 8 7.955l5.738-2.478L8 3z" clip-rule="evenodd"/></svg>', 'mail-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 3.999v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8A1 1 0 0 0 14.001 3H2a1 1 0 0 0-1 .999m13 .713-6 4.28-6-4.28V12h12zM2.724 4 8 7.764 13.276 4z" clip-rule="evenodd"/></svg>', 'messages-square': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 10v1.017a1 1 0 0 1-1.006 1L8 12l-4 2v-1.978H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm1-6H5v1h6a1 1 0 0 1 1 1v3h1zm-3 3H4v1h6zM4 9h3v1H4z" clip-rule="evenodd"/></svg>', 'messages-square-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 7h6v1H4zm0 2h3v1H4z"/><path fill="currentColor" fill-rule="evenodd" d="M12 10v1.017a1 1 0 0 1-1.006 1L8 12l-4 2v-1.978H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm1-6H5v1h6a1 1 0 0 1 1 1v3h1zm-5.233 6.999L5 12.382v-1.36H3V6h8v5.017z" clip-rule="evenodd"/></svg>', 'mobile': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 10a1 1 0 1 1 2 0 1 1 0 0 1-2 0M6 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5" clip-rule="evenodd"/></svg>', 'mobile-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M6 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm8 1H4v12h8z" clip-rule="evenodd"/></svg>', 'notes': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13 4h-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1v1a1 1 0 0 0 1 1h5v-4h4V5a1 1 0 0 0-1-1M3 3h8v1H5a1 1 0 0 0-1 1v6H3zm9 4H6v1h6zM6 9h3v1H6z" clip-rule="evenodd"/><path fill="currentColor" d="m11 14 3-3h-3z"/></svg>', 'notes-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12 7H6v1h6zM9 9H6v1h3z"/><path fill="currentColor" fill-rule="evenodd" d="M13 4h-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1v1a1 1 0 0 0 1 1h6l3-3V5a1 1 0 0 0-1-1M3 3h8v1H5a1 1 0 0 0-1 1v6H3zm10 2H5v8h5v-3h3zm-.414 6L11 12.586V11z" clip-rule="evenodd"/></svg>', 'paper-plane': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.855 2.145a.5.5 0 0 0-.525-.115l-11 4a.5.5 0 0 0 0 .935L6.625 8.68l3.17-3.18.705.705L7.315 9.39l1.72 4.295A.5.5 0 0 0 9.5 14a.5.5 0 0 0 .46-.33l4-11a.5.5 0 0 0-.105-.525"/></svg>', 'paper-plane-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.855 2.145a.5.5 0 0 0-.525-.115l-11 4a.5.5 0 0 0 0 .935l4.8 1.92 1.92 4.8A.5.5 0 0 0 9.5 14a.5.5 0 0 0 .46-.33l4-11a.5.5 0 0 0-.105-.525M9.5 12.1 8.105 8.6 10.5 6.205 9.795 5.5 7.38 7.915 3.9 6.5l8.765-3.165z"/></svg>', 'paper-plane-slash': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.705 1 15 14.295l-.7.705-4-4-1.34 3.67a.5.5 0 0 1-.46.33.5.5 0 0 1-.465-.315l-1.72-4.295L8 8.705 7.295 8l-1.67 1.68L1.33 7.965a.5.5 0 0 1 0-.935L5 5.705l-4-4zM12.97 3.67l-1.725 4.745-3.66-3.66L12.33 3.03a.5.5 0 0 1 .64.64" clip-rule="evenodd"/></svg>', 'paper-plane-slash-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.705 1 15 14.295l-.7.705-4-4-1.34 3.67a.5.5 0 0 1-.46.33.5.5 0 0 1-.45-.315l-1.92-4.8-4.8-1.92a.5.5 0 0 1 0-.935L5 5.705l-4-4zM5.77 6.5l-2.87 1 3.48 1.415L7.295 8zm1.335 3.1L8.5 13.1l1-2.87L8 8.705zm4.56-5.265-3.82 1.39-.78-.78L12.33 3.03a.5.5 0 0 1 .64.64l-1.915 5.265-.78-.78z" clip-rule="evenodd"/></svg>', 'paperclip': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m6.57 12.358 6.09-6.09a1.035 1.035 0 1 0-1.465-1.463l-5.32 5.32-.733-.731 5.321-5.321A2.07 2.07 0 1 1 13.391 7l-5.339 5.34-.006.006-.744.744A3.106 3.106 0 0 1 2.91 8.698L9.608 2l.732.732L3.642 9.43a2.07 2.07 0 1 0 2.928 2.928"/></svg>', 'pause': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm5 0a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/></svg>', 'pause-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM4 4v8h2V4zm8-1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm-2 1v8h2V4z" clip-rule="evenodd"/></svg>', 'pen': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10.88 2.293a1 1 0 0 1 1.415 0l1.414 1.414a1 1 0 0 1 0 1.414l-1.414 1.415-2.828-2.829zm.705 4.953L8.756 4.417 2 11.174l.003 2.825 2.825.003z"/></svg>', 'pen-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m-3.692-3.307v-1.54l4.538-4.539 1.54 1.54-4.538 4.539zm7.268-6.312a.42.42 0 0 1 0 .583l-.753.753-1.54-1.54.747-.753a.42.42 0 0 1 .583 0z" clip-rule="evenodd"/></svg>', 'pen-fancy': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.63 8.65c-.24.07-.43.26-.5.5l-1.46 4.37.11.12 2.3-2.3v-.19c0-.44.35-.8.79-.81.44 0 .8.35.81.79 0 .44-.35.8-.79.81h-.21l-2.3 2.3.12.11 4.37-1.46c.24-.07.43-.26.5-.5l.82-2.08L5.7 7.83zm7.17-6.3L6.27 7.28 8.69 9.7l4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83"/></svg>', 'pen-fancy-files-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 2H6v10h6V8.946l.023-.058.085-.078.892-.813V12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v.112a2.3 2.3 0 0 0-.974.66L12 2.8zm1 4.643-1 .913-.566.515-1.528-1.524L12 4.275l.767-.832q.113-.127.233-.215c1.167-.857 2.797.9 1.555 1.997zM4 3H3v11.5a.5.5 0 0 0 .5.5H11v-1H4zm4.238 4.41a.47.47 0 0 0-.316.315L7 10.477l.07.076 1.452-1.449v-.12a.51.51 0 0 1 .5-.51.51.51 0 0 1 .511.498.51.51 0 0 1-.499.51h-.133L7.45 10.931l.075.069 2.76-.92a.47.47 0 0 0 .317-.314l.518-1.31-1.573-1.562z" clip-rule="evenodd"/></svg>', 'pen-fancy-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.24 1.67c-.49 0-1 .21-1.44.7L6.27 7.3l2.42 2.42 4.94-4.52c1.6-1.42.19-3.53-1.39-3.53M8.72 8.34 7.66 7.28l3.9-4.24c.22-.24.44-.36.69-.36.41 0 .87.34 1.03.78.14.37.04.7-.32 1.02L8.73 8.36zM5.7 7.86l-2.08.82c-.24.08-.42.26-.5.5l-1.46 4.37.12.12.56.56.12.12 4.37-1.46c.24-.08.42-.26.5-.5l.81-2.08L5.7 7.87zm-2.57 4.46L4 9.72c.03-.08.09-.15.17-.18l1.29-.51 1.52 1.52-.5 1.29c-.03.08-.1.15-.19.18l-2.6.87.95-.95c.06.02.12.04.19.04.44 0 .79-.35.79-.79s-.35-.79-.79-.79-.79.35-.79.79c0 .07.02.13.04.19l-.95.95z"/></svg>', 'pen-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.295 2.293a1 1 0 0 0-1.414 0L9.467 3.707l2.828 2.829 1.414-1.415a1 1 0 0 0 0-1.414z"/><path fill="currentColor" fill-rule="evenodd" d="m2.003 13.999 2.825.003 6.757-6.756-2.829-2.829L2 11.174zM3 11.587l5.756-5.755 1.414 1.414-5.755 5.756L3.002 13z" clip-rule="evenodd"/></svg>', 'phone': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m10 10.53 1.034-1.035a1.01 1.01 0 0 1 1.08-.221l1.259.503A1.01 1.01 0 0 1 14 10.7v2.308a1 1 0 0 1-1.052.992C4.124 13.45 2.343 5.974 2.006 3.112A1.002 1.002 0 0 1 3.007 2h2.228a1 1 0 0 1 .923.628l.503 1.26a1 1 0 0 1-.217 1.08L5.41 6.002s.595 4.029 4.59 4.527"/></svg>', 'phone-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.62 14h-.079C3.472 13.479 2.184 5.826 2.004 3.49A1.384 1.384 0 0 1 3.278 2h2.543a.92.92 0 0 1 .859.582l.701 1.726a.92.92 0 0 1-.203.997l-.983.992a4.325 4.325 0 0 0 3.499 3.508l1.001-.993a.92.92 0 0 1 1.002-.189l1.74.697a.92.92 0 0 1 .567.858v2.437A1.385 1.385 0 0 1 12.62 14M3.389 2.923a.46.46 0 0 0-.462.462v.037c.213 2.732 1.574 9.193 9.665 9.655a.46.46 0 0 0 .49-.434v-2.465l-1.74-.696-1.325 1.315-.222-.028c-4.015-.503-4.56-4.518-4.56-4.56l-.028-.221 1.311-1.325-.692-1.74z"/></svg>', 'picture': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14 3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1zM4 5a1 1 0 1 0 2 0 1 1 0 0 0-2 0m7.134 2.514L13 10.023V13H3v-2.494l.896-1.064c.203-.242.305-.362.425-.408a.5.5 0 0 1 .358 0c.12.046.222.166.425.408l1.767 2.098 2.995-4.026c.21-.282.316-.423.444-.476a.5.5 0 0 1 .38 0c.129.053.234.194.444.476" clip-rule="evenodd"/></svg>', 'picture-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/><path fill="currentColor" fill-rule="evenodd" d="M14 13a1 1 0 0 1-1 1H2h.994A1 1 0 0 1 2 13V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zM3 3h10v5.315l-1.069-1.43a6 6 0 0 0-.29-.368 1.5 1.5 0 0 0-.555-.41 1.5 1.5 0 0 0-1.14-.001c-.27.11-.448.288-.556.408-.098.11-.2.246-.291.366L6.822 9.911l-.974-1.14a5 5 0 0 0-.283-.314 1.5 1.5 0 0 0-.53-.353 1.5 1.5 0 0 0-1.064 0c-.248.094-.42.245-.529.352a5 5 0 0 0-.283.314L3 8.956zm0 10v-2.506l.903-1.055c.202-.237.303-.355.423-.4a.5.5 0 0 1 .355 0c.12.045.22.164.422.4l1.769 2.07 3.01-4.006c.21-.28.315-.42.443-.472a.5.5 0 0 1 .38 0c.127.053.232.193.441.474L13 9.985V13z" clip-rule="evenodd"/></svg>', 'play-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1m3.724 7.447-6 3A.5.5 0 0 1 5 11V5a.5.5 0 0 1 .724-.447l6 3a.5.5 0 0 1 0 .894"/></svg>', 'plus': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 2H7v5H2v2h5v5h2V9h5V7H9z"/></svg>', 'plus-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14M7 7V4h2v3h3v2H9v3H7V9H4V7z" clip-rule="evenodd"/></svg>', 'plus-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 7h3v2H9v3H7V9H4V7h3V4h2z"/><path fill="currentColor" fill-rule="evenodd" d="M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1m0 1a6 6 0 1 0 0 12A6 6 0 0 0 8 2" clip-rule="evenodd"/></svg>', 'share': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4.5a2.5 2.5 0 0 1-4.467 1.543L6.915 7.35a2.5 2.5 0 0 1 0 1.298l2.618 1.308a2.5 2.5 0 1 1-.448.894L6.467 9.544a2.5 2.5 0 1 1 0-3.085l2.618-1.31A2.503 2.503 0 0 1 11.5 2 2.5 2.5 0 0 1 14 4.5"/></svg>', 'share-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m1 0a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0M6 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.623 1.32a2.5 2.5 0 1 1-.156-2.863L9.085 5.15c.088.33.243.633.448.894L6.915 7.35a2.5 2.5 0 0 1 0 1.298l2.618 1.308a2.5 2.5 0 1 1-.448.894L6.467 9.544q.084-.107.156-.223M11.5 13a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'shuffle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m11.295 9.705 1.79 1.795h-3.31L7.59 8l2.185-3.5h3.31l-1.79 1.795L12 7l3-3-3-3-.705.705 1.79 1.795h-3.31a1 1 0 0 0-.845.47L7 7.055 5.07 3.97a1 1 0 0 0-.845-.47H1v1h3.225L6.41 8l-2.185 3.5H1v1h3.225a1 1 0 0 0 .845-.47L7 8.945l1.93 3.085a1 1 0 0 0 .845.47h3.31l-1.79 1.795L12 15l3-3-3-3z"/></svg>', 'sidebar-arrow-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 2H2c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1M5 13H2V3h3zm9-5.5H8.9l1.8-1.8L10 5 7 8l3 3 .7-.7-1.8-1.8H14V13H6V3h8z"/></svg>', 'sidebar-arrow-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 2H2c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1M5 13H2V3h3zm9 0H6V8.5h5.1l-1.8 1.8.7.7 3-3-3-3-.7.7 1.8 1.8H6V3h8z"/></svg>', 'sitemap': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.33 10h-2c-.37 0-.66.3-.66.67v2c0 .36.3.65.66.66h2c.37 0 .66-.29.67-.66v-2c0-.37-.3-.67-.67-.67m-.5-1.67H7.5v1h1v-1h4.67v1h1v-1.2c0-.44-.36-.8-.8-.8H8.5V6h.83c.37 0 .67-.3.67-.67v-2c0-.37-.3-.66-.67-.66H6.67c-.37 0-.66.29-.67.66v2c0 .37.3.67.67.67h.83v1.33H2.63c-.44 0-.8.36-.8.8v1.2h1zM9 10H7c-.37 0-.67.3-.67.67v2c0 .37.3.66.67.66h2c.37 0 .66-.29.67-.66v-2c0-.37-.3-.67-.67-.67m5.67 0h-2c-.37 0-.67.3-.67.67v2c0 .37.3.66.67.66h2c.36 0 .65-.3.66-.66v-2c0-.37-.29-.66-.66-.67"/></svg>', 'sliders': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.95 4H15v1h-2.05v.002a2.5 2.5 0 0 1-2.672 1.988A2.52 2.52 0 0 1 8.05 5.002V5H1V4h7.05v-.002a2.5 2.5 0 0 1 2.672-1.988 2.52 2.52 0 0 1 2.228 1.988zm-9.9 8H1v-1h2.05v-.002A2.52 2.52 0 0 1 5.5 9a2.5 2.5 0 0 1 2.45 1.999V11H15v1H7.95v.002A2.52 2.52 0 0 1 5.5 14a2.5 2.5 0 0 1-2.45-1.998z"/></svg>', 'sliders-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.95 4H15v1h-2.05c-.25 1.15-1.25 2-2.45 2s-2.2-.85-2.45-2H1V4h7.05C8.3 2.85 9.3 2 10.5 2s2.2.85 2.45 2M9 4.5c0 .85.65 1.5 1.5 1.5S12 5.35 12 4.5 11.35 3 10.5 3 9 3.65 9 4.5M3.05 12H1v-1h2.05C3.3 9.85 4.3 9 5.5 9s2.2.85 2.45 2H15v1H7.95c-.25 1.15-1.25 2-2.45 2s-2.2-.85-2.45-2M7 11.5c0-.85-.65-1.5-1.5-1.5S4 10.65 4 11.5 4.65 13 5.5 13 7 12.35 7 11.5" clip-rule="evenodd"/></svg>', 'squares': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm7 0a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1zm0 7a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1zm-7 0a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/></svg>', 'star': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8 1.343 2.163 4.382L15 6.428 11.5 9.84l.826 4.817L8 12.383l-4.326 2.274L4.5 9.84 1 6.428l4.837-.703z"/></svg>', 'star-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="currentColor" d="m9.715 5.947.116.235.26.038 3.834.557-2.774 2.705-.188.184.044.259.654 3.818-3.429-1.803L8 11.818l-.232.122-3.43 1.803.655-3.818.044-.26-.188-.183-2.775-2.705L5.91 6.22l.26-.038.116-.235L8 2.472z"/></svg>', 'table': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 13a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1zm1-3v3h3v-3zm4 0v3h6v-3zm6-1H7V6h6zM6 9H3V6h3zM3 5V3h10v2z" clip-rule="evenodd"/></svg>', 'tag': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7.43c0 .275.11.538.303.732l5.535 5.535c.404.404 1.06.404 1.464 0l4.395-4.395a1.036 1.036 0 0 0 0-1.464L8.162 2.303A1.04 1.04 0 0 0 7.43 2H3.036C2.464 2 2 2.464 2 3.036zM5.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'tag-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0-1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2 7.43c0 .275.11.538.303.732l5.535 5.535c.404.404 1.06.404 1.464 0l4.395-4.395a1.036 1.036 0 0 0 0-1.464L8.162 2.303A1.04 1.04 0 0 0 7.43 2H3.036C2.464 2 2 2.464 2 3.036zm1 0q0 .016.01.025l5.535 5.534a.036.036 0 0 0 .05 0l4.394-4.394a.036.036 0 0 0 0-.05L7.456 3.01A.04.04 0 0 0 7.43 3H3.036A.036.036 0 0 0 3 3.036z" clip-rule="evenodd"/></svg>', 'tags': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.855 6.645 8.5 1.295A1 1 0 0 0 7.795 1H4a1 1 0 0 0-1 1v1h1V2h3.795l5 5-.65.645.71.71 1-1a.5.5 0 0 0 0-.71"/><path fill="currentColor" fill-rule="evenodd" d="M2 8.978c0 .251.1.493.278.67l5.073 5.074a.95.95 0 0 0 1.343 0l4.028-4.028a.95.95 0 0 0 0-1.343L7.649 4.278A.95.95 0 0 0 6.978 4H2.949A.95.95 0 0 0 2 4.95zM5.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'tags-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8.5 1.295 5.355 5.35a.5.5 0 0 1 0 .71l-1 1-.71-.71.65-.645-5-5H4v1H3V2a1 1 0 0 1 1-1h3.795a1 1 0 0 1 .705.295"/><path fill="currentColor" fill-rule="evenodd" d="M5.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0-1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2.278 9.649A.95.95 0 0 1 2 8.978V4.949A.95.95 0 0 1 2.95 4h4.028c.251 0 .493.1.67.278l5.074 5.073a.95.95 0 0 1 0 1.343l-4.028 4.028a.95.95 0 0 1-1.343 0zm5.744 4.33L3 8.957V5h3.957l5.022 5.022z" clip-rule="evenodd"/></svg>', 'thumb-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.202 11.934a1.506 1.506 0 0 1-2.438 1.651L5.5 10.461v-8.46h4.922c1.081 0 2.058.714 2.484 1.817l.944 3.394c.51 1.32-.362 2.788-1.656 2.788h-1.772zM4.5 10H2V2h2.5z"/></svg>', 'thumb-down-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11.204 11.934 10.424 10h1.772c1.294 0 2.166-1.468 1.656-2.788l-.944-3.394C12.484 2.715 11.507 2 10.426 2H5v.003H2v8h3.023l3.744 3.582a1.506 1.506 0 0 0 2.437-1.651m.755-7.797C11.657 3.4 11.033 3 10.425 3H6.002l.017 6.572 3.439 3.29a.506.506 0 0 0 .819-.554L8.943 9h3.253c.24 0 .48-.131.645-.41.167-.28.218-.657.079-1.018l-.018-.045zM3 9.003h2v-6H3z" clip-rule="evenodd"/></svg>', 'thumb-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.202 4.069a1.506 1.506 0 0 0-2.438-1.651L5.5 5.542v8.46h4.922c1.081 0 2.058-.714 2.484-1.817l.944-3.394c.51-1.32-.362-2.788-1.656-2.788h-1.772zM4.5 6.003H2v8h2.5z"/></svg>', 'thumb-up-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m11.204 4.069-.78 1.934h1.772c1.294 0 2.166 1.468 1.656 2.788l-.944 3.394c-.425 1.103-1.402 1.818-2.483 1.818H5V14H2V6h3.023l3.744-3.582a1.506 1.506 0 0 1 2.437 1.65m.755 7.797c-.302.738-.926 1.137-1.534 1.137H6.002L6.02 6.43l3.439-3.29a.506.506 0 0 1 .819.554L8.943 7.003h3.253c.24 0 .48.13.645.41.167.28.218.657.079 1.018l-.018.045zM3 7h2v6H3z" clip-rule="evenodd"/></svg>', 'thumbtack': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m8.91 2-1.2 3.594L2.364 7.09 5.274 10l-.707.706-1.687 1.687-.264.264-.09.09-.209.498L2 14l.755-.317.498-.21.09-.089.264-.264 1.687-1.687.706-.706 2.91 2.908 1.496-5.347L14 7.09z" clip-rule="evenodd"/></svg>', 'thumbtack-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m5.273 10-2.91 2.91L2 14l1.09-.364L6 10.727l2.91 2.91 1.496-5.348L14 7.09 8.91 2l-1.2 3.594L2.364 7.09zm3.241-3.563-4.18 1.17 4.059 4.059 1.17-4.18 2.533-.845-2.737-2.737z" clip-rule="evenodd"/></svg>', 'trash': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11 2v1h3v1h-1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4H2V3h3V2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1M6 3V2h4v1zm1 3H6v6h1zm2 0h1v6H9z" clip-rule="evenodd"/></svg>', 'trash-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 6H6v6h1zm2 0h1v6H9z"/><path fill="currentColor" fill-rule="evenodd" d="M11 3V2a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v1H2v1h1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4h1V3zM6 2v1h4V2zm6 2v10H4V4z" clip-rule="evenodd"/></svg>', 'universal-access': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-3.5-1V6h-7v1H7v1.367l-1.934 3.385.868.496L7.79 9h.42l1.856 3.248.868-.496L9 8.367V7zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/></svg>', 'universal-access-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4.111 13.82A7 7 0 0 0 8 15a7.01 7.01 0 0 0 7-7 7 7 0 1 0-10.889 5.82m.556-10.809A6 6 0 0 1 8 2a6.007 6.007 0 0 1 6 6 6 6 0 1 1-9.333-4.989M8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2M11.5 7V6h-7v1H7v1.367l-1.934 3.385.868.496L7.79 9h.42l1.856 3.248.868-.496L9 8.367V7z" clip-rule="evenodd"/></svg>', 'unlink': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.5 1h-1v2h1zM1.792 2.501l.707-.707L4.207 3.5l-.707.707zm9.998 9.995.708-.707 1.707 1.708-.707.707zM1 5.5h2v1H1zm14 4h-2v1h2zM9.5 13h1v2h-1zm-1.21-2.465-1.855 1.86a2.002 2.002 0 0 1-2.83-2.83l1.86-1.86L4.755 7 2.9 8.86a3 3 0 0 0-.03 4.27A3 3 0 0 0 5 14a3.04 3.04 0 0 0 2.16-.9L9 11.245zm1.275-6.93-1.86 1.86L7 4.755 8.84 2.9A3.04 3.04 0 0 1 11 2a3 3 0 0 1 2.13.87 3 3 0 0 1-.03 4.27L11.245 9l-.71-.705 1.86-1.86a2.002 2.002 0 0 0-2.83-2.83"/></svg>', 'unlock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 7V4a2 2 0 1 0-4 0v1H5V4a3 3 0 0 1 6 0v3h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm-3 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0" clip-rule="evenodd"/></svg>', 'unlock-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/><path fill="currentColor" fill-rule="evenodd" d="M10 4v3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-6 0v1h1V4a2 2 0 1 1 4 0m2 4v6H4V8z" clip-rule="evenodd"/></svg>', 'upload': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3.706 6.703 3 6l5-5 5 5-.704.702L8.5 2.912V12h-1V2.913zM13 14v-2h1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-.996-1.002L2 14v-2h1v2z" clip-rule="evenodd"/></svg>', 'user': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6M6 9a4 4 0 0 0-4 4 1 1 0 0 0 1 1h10a1 1 0 0 0 1-1 4 4 0 0 0-4-4z" clip-rule="evenodd"/></svg>', 'user-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.01 1C4.146.99 1.01 4.128 1 7.99c0 3.863 3.128 7 6.99 7.01 3.853 0 6.99-3.109 7.01-6.962C15.019 4.176 11.9 1.02 8.038 1zm0 .715a6.28 6.28 0 0 1 6.275 6.295v.028a6.2 6.2 0 0 1-1.135 3.586 2.59 2.59 0 0 0-2.537-2.26H9.478a3.44 3.44 0 0 1-2.937 0H5.415a2.573 2.573 0 0 0-2.546 2.26 6.2 6.2 0 0 1-1.135-3.586 6.284 6.284 0 0 1 6.247-6.323zM5.147 5.778a2.914 2.914 0 0 1 2.91-2.909 2.914 2.914 0 0 1 2.908 2.909 2.914 2.914 0 0 1-2.909 2.909H8.01a2.917 2.917 0 0 1-2.86-2.91"/></svg>', 'user-group': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m-4 4c0-.972.347-1.863.923-2.556A2.5 2.5 0 0 0 1 10.5V12a1 1 0 0 0 1 1h2.268A2 2 0 0 1 4 12zm10 2h-2.268A2 2 0 0 0 12 12v-1c0-.972-.347-1.863-.923-2.556A2.5 2.5 0 0 1 15 10.5V12a1 1 0 0 1-1 1m-9-2a3 3 0 0 1 6 0v1a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1zm9-5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0M3.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/></svg>', 'user-group-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0M9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" d="M2 10.5V12h2c0 .364.097.706.268 1H2a1 1 0 0 1-1-1v-1.5a2.5 2.5 0 0 1 3.923-2.056q-.321.386-.54.844A1.5 1.5 0 0 0 2 10.5M14 13h-2.268A2 2 0 0 0 12 12h2v-1.5a1.5 1.5 0 0 0-2.384-1.212 4 4 0 0 0-.539-.844A2.5 2.5 0 0 1 15 10.5V12a1 1 0 0 1-1 1"/><path fill="currentColor" fill-rule="evenodd" d="M8 8a3 3 0 0 0-3 3v1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1a3 3 0 0 0-3-3m2 4v-1a2 2 0 1 0-4 0v1zm2.5-5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0-1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1M5 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0" clip-rule="evenodd"/></svg>', 'user-lock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.5 7a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M5 8a4 4 0 0 0-4 4 1 1 0 0 0 1 1h7v-1.5a1.5 1.5 0 0 1 1.036-1.427c.109-.63.452-1.178.938-1.553A4 4 0 0 0 9 8z"/><path fill="currentColor" fill-rule="evenodd" d="M10.5 11h.5v-.5a1.5 1.5 0 0 1 3 0v.5h.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5m2.75-.5v.5h-1.5v-.5a.75.75 0 0 1 1.5 0" clip-rule="evenodd"/></svg>', 'user-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0m-1 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-8 8a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4 1 1 0 0 1-1 1H3a1 1 0 0 1-1-1m1 0a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3z" clip-rule="evenodd"/></svg>', 'user-pen-fancy-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.5 7a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5m0-4C6.67 3 6 3.67 6 4.5S6.67 6 7.5 6 9 5.33 9 4.5 8.33 3 7.5 3m3.62 8.46-.22.54-.3.77s-.04.09-.06.13c-.03.04-.06.07-.1.1-.05.04-.1.07-.16.08L7.52 14l-.07-.07 1.45-1.45h.13c.15 0 .27-.06.36-.16a.6.6 0 0 0 .1-.15c.01-.02.02-.04.03-.07v-.02s.01-.05.01-.08v-.03c0-.28-.23-.5-.51-.5-.28.01-.5.24-.5.51v.14l-.76.75-.14.13-.55.55-.07-.07.16-.48.1-.29.24-.71.42-1.27c.05-.16.17-.28.32-.32l1.31-.52zm3.44-3.24-2.05 1.87-.7.64-.06.05-.32.29-1.52-1.52.28-.31.06-.06.64-.7 1.88-2.04c1.16-1.31 3.11.61 1.79 1.78"/><path fill="currentColor" fill-rule="evenodd" d="M9 8H6c-2.21 0-4 1.79-4 4 0 .55.45 1 1 1h3.11l.33-1H3c0-1.66 1.34-3 3-3h3.05l.83-.9C9.6 8.03 9.3 8 9 8" clip-rule="evenodd"/></svg>', 'user-plus': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 3.33h-1.35V2c-.02-.18-.17-.33-.35-.33h-.65c-.18 0-.33.15-.35.33v1.33H10c-.18 0-.33.16-.33.34v.66c0 .18.15.33.33.34h1.3V6c.02.18.17.32.35.33h.65c.18 0 .33-.15.35-.33V4.67H14a.34.34 0 0 0 .32-.34v-.66a.34.34 0 0 0-.32-.34M9.28 9.77h-.2c-1.25.51-2.66.51-3.91 0H5a3.006 3.006 0 0 0-3.3 2.67v.74c.06.67.63 1.17 1.3 1.15h8.25c.69.06 1.3-.45 1.36-1.14v-.68a3 3 0 0 0-3.23-2.75h-.1zM7.13 3.7c1.46 0 2.64 1.17 2.65 2.63 0 1.46-1.17 2.64-2.63 2.65-1.46 0-2.64-1.17-2.65-2.63A2.65 2.65 0 0 1 7.13 3.7"/></svg>', 'user-question-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.23 11.14c.86-.66 1.01-1.9.35-2.75s-1.9-1.01-2.75-.35a1.96 1.96 0 0 0 0 3.1c-.72.42-1.16 1.2-1.16 2.03v.8c0 .2.17.37.37.37h3.98c.2 0 .37-.17.37-.37v-.8c0-.83-.44-1.61-1.16-2.03M2.81 9.59c0-.67.55-1.22 1.22-1.22s1.22.55 1.22 1.22-.55 1.22-1.22 1.22-1.22-.55-1.22-1.22m2.83 4H2.41v-.42c0-.89.72-1.62 1.62-1.62s1.62.72 1.62 1.62v.42zm7.13-11.93H8c-.86 0-1.56.7-1.56 1.56v7.16c0 .21.17.37.37.37.08 0 .16-.03.22-.07l1.49-1.12h4.25c.86 0 1.56-.7 1.56-1.56V3.22c0-.86-.7-1.56-1.56-1.56m.82 6.33c0 .45-.37.82-.82.82H8.4a.4.4 0 0 0-.22.07l-1 .75V3.22c0-.45.37-.82.82-.82h4.77c.45 0 .82.37.82.82zm-2.8-.42c0 .23-.18.41-.41.41s-.41-.18-.41-.41.18-.41.41-.41.41.18.41.41m-.41-4.34c-.83 0-1.5.67-1.5 1.5 0 .23.18.41.41.41s.41-.18.41-.41c0-.38.31-.68.69-.68s.68.31.68.69-.31.68-.68.68c-.23 0-.41.18-.41.41v.44c0 .23.18.41.41.41s.41-.18.41-.41v-.09c.8-.23 1.26-1.06 1.04-1.85-.18-.65-.77-1.09-1.44-1.09z"/></svg>', 'user-shield': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2.676 2.768A1 1 0 0 0 2 3.714v4.799a3 3 0 0 0 .154.949l.06.177A7 7 0 0 0 5.1 13.334l2.373 1.508a1 1 0 0 0 1.074-.001l2.361-1.507a7 7 0 0 0 2.875-3.687l.062-.185c.102-.306.154-.627.154-.949V3.714a1 1 0 0 0-.676-.946l-5-1.712a1 1 0 0 0-.648 0zM8 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4m-4.22 2.627a6 6 0 0 0 1.857 1.863l2.373 1.508 2.361-1.507a6 6 0 0 0 1.85-1.862A4 4 0 0 0 9 8.999H7c-1.32 0-2.492.641-3.22 1.628" clip-rule="evenodd"/></svg>', 'user-shield-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 5.998a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2 3.712a1 1 0 0 1 .676-.946l5-1.712a1 1 0 0 1 .648 0l5 1.712a1 1 0 0 1 .676.946v4.799c0 .322-.052.643-.154.949l-.062.185a7 7 0 0 1-2.875 3.687l-2.36 1.507a1 1 0 0 1-1.075 0l-2.373-1.507a7 7 0 0 1-2.888-3.695l-.06-.177A3 3 0 0 1 2 8.51zm11 0v4.799q0 .324-.103.632l-.061.186a6 6 0 0 1-.614 1.298A4 4 0 0 0 9 8.997H7c-1.32 0-2.492.64-3.22 1.628a6 6 0 0 1-.618-1.304l-.06-.178A2 2 0 0 1 3 8.511V3.712L8 2zM9 9.998a3 3 0 0 1 2.582 1.47c-.355.39-.76.734-1.21 1.021L8.01 13.996l-2.373-1.508a6 6 0 0 1-1.217-1.022A3 3 0 0 1 7 9.998z" clip-rule="evenodd"/></svg>', 'users': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.25 3.335a2.5 2.5 0 1 0 0 4.33A3.5 3.5 0 0 1 6.5 5.5c0-.818.28-1.57.75-2.165M10 3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m-5 9.2A3.2 3.2 0 0 1 8.2 9h3.6a3.2 3.2 0 0 1 3.2 3.2.8.8 0 0 1-.8.8H5.8a.8.8 0 0 1-.8-.8M5.48 9H4.2A3.2 3.2 0 0 0 1 12.2a.8.8 0 0 0 .8.8h2.387A1.8 1.8 0 0 1 4 12.2 4.19 4.19 0 0 1 5.48 9"/></svg>', 'users-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.5 5.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0M10 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" clip-rule="evenodd"/><path fill="currentColor" d="M4.2 9h1.28a4.2 4.2 0 0 0-.858 1H4.2a2.2 2.2 0 0 0-2.191 2h1.996a4 4 0 0 0-.005.2c0 .287.067.559.187.8H1.8a.8.8 0 0 1-.8-.8A3.2 3.2 0 0 1 4.2 9"/><path fill="currentColor" fill-rule="evenodd" d="M5 12.2A3.2 3.2 0 0 1 8.2 9h3.6a3.2 3.2 0 0 1 3.2 3.2.8.8 0 0 1-.8.8H5.8a.8.8 0 0 1-.8-.8m6.8-2.2a2.2 2.2 0 0 1 2.191 2H6.009A2.2 2.2 0 0 1 8.2 10z" clip-rule="evenodd"/><path fill="currentColor" d="M6 3c.455 0 .882.122 1.25.335a3.5 3.5 0 0 0-.5.865 1.5 1.5 0 1 0 0 2.6c.125.313.294.604.5.865A2.5 2.5 0 1 1 6 3"/></svg>', 'wallet': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm1 0h11v1H2zm9 5a1 1 0 1 1 2 0 1 1 0 0 1-2 0" clip-rule="evenodd"/></svg>', 'wallet-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11 9a1 1 0 1 1 2 0 1 1 0 0 1-2 0"/><path fill="currentColor" fill-rule="evenodd" d="M2 13a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm0-9h11v1H2zm12 2H2v6h12z" clip-rule="evenodd"/></svg>' };
|
|
1047
|
-
|
|
1048
|
-
const mgIconCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:inline-flex;vertical-align:middle}.mg-c-icon{color:currentcolor}.mg-c-icon[size=small],.mg-c-icon.mg-c-icon--size-small{width:var(--mg-b-size-12);height:var(--mg-b-size-12)}.mg-c-icon[size=small][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-small[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-16) - var(--mg-b-size-12))/2)}.mg-c-icon[size=medium],.mg-c-icon.mg-c-icon--size-medium{width:var(--mg-b-size-16);height:var(--mg-b-size-16)}.mg-c-icon[size=medium][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-medium[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-24) - var(--mg-b-size-16))/2)}.mg-c-icon[size=large],.mg-c-icon.mg-c-icon--size-large{width:var(--mg-b-size-20);height:var(--mg-b-size-20)}.mg-c-icon[size=large][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-large[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-32) - var(--mg-b-size-20))/2)}.mg-c-icon[size=xlarge],.mg-c-icon.mg-c-icon--size-xlarge{width:var(--mg-b-size-24);height:var(--mg-b-size-24)}.mg-c-icon[size=xlarge][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-xlarge[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-40) - var(--mg-b-size-24))/2)}.mg-c-icon[size=xxlarge],.mg-c-icon.mg-c-icon--size-xxlarge{width:var(--mg-b-size-32);height:var(--mg-b-size-32)}.mg-c-icon[size=xxlarge][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-xxlarge[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-48) - var(--mg-b-size-32))/2)}.mg-c-icon.mg-c-icon--variant-dark.mg-c-icon--variant-style-icon{color:var(--mg-b-color-dark)}.mg-c-icon.mg-c-icon--variant-light.mg-c-icon--variant-style-icon{color:var(--mg-b-color-light)}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-icon{color:var(--mg-b-color-app)}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-icon{color:var(--mg-b-color-blue)}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-icon{color:var(--mg-b-color-80)}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-icon{color:var(--mg-b-color-danger)}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-icon{color:var(--mg-b-color-info)}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-icon{color:var(--mg-b-color-success)}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-icon{color:var(--mg-b-color-warning)}.mg-c-icon.mg-c-icon--variant-dark.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-110-20, color-mix(in srgb, var(--mg-b-color-dark), white 80%))}.mg-c-icon.mg-c-icon--variant-light.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-0-20, color-mix(in srgb, var(--mg-b-color-light), white 80%))}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-app), white 80%))}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-blue), white 80%))}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-80), white 80%))}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-icon.mg-c-icon--variant-dark.mg-c-icon--variant-style-full{color:var(--mg-b-color-dark);background-color:var(--mg-b-color-110-20, color-mix(in srgb, var(--mg-b-color-dark), white 80%))}.mg-c-icon.mg-c-icon--variant-light.mg-c-icon--variant-style-full{color:var(--mg-b-color-light);background-color:var(--mg-b-color-0-20, color-mix(in srgb, var(--mg-b-color-light), white 80%))}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-full{color:var(--mg-b-color-app);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-app), white 80%))}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-full{color:var(--mg-b-color-blue);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-blue), white 80%))}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-full{color:var(--mg-b-color-80);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-80), white 80%))}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-full{color:var(--mg-b-color-danger);background-color:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-full{color:var(--mg-b-color-info);background-color:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-full{color:var(--mg-b-color-success);background-color:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-full{color:var(--mg-b-color-warning);background-color:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-icon[class*=mg-c-icon--variant-]{overflow:visible;border-radius:var(--mg-c-icon-border-radius)}.mg-c-icon--spin{animation-duration:.75s;animation-iteration-count:infinite;animation-name:rotate}@keyframes rotate{to{transform:rotate(360deg)}}`;
|
|
1090
|
+
const mgIconCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:inline-flex;vertical-align:middle}.mg-c-icon{color:currentcolor}.mg-c-icon[size=small],.mg-c-icon.mg-c-icon--size-small{width:var(--mg-b-size-12);height:var(--mg-b-size-12)}.mg-c-icon[size=small][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-small[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-16) - var(--mg-b-size-12))/2)}.mg-c-icon[size=medium],.mg-c-icon.mg-c-icon--size-medium{width:var(--mg-b-size-16);height:var(--mg-b-size-16)}.mg-c-icon[size=medium][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-medium[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-24) - var(--mg-b-size-16))/2)}.mg-c-icon[size=large],.mg-c-icon.mg-c-icon--size-large{width:var(--mg-b-size-20);height:var(--mg-b-size-20)}.mg-c-icon[size=large][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-large[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-32) - var(--mg-b-size-20))/2)}.mg-c-icon[size=xlarge],.mg-c-icon.mg-c-icon--size-xlarge{width:var(--mg-b-size-24);height:var(--mg-b-size-24)}.mg-c-icon[size=xlarge][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-xlarge[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-40) - var(--mg-b-size-24))/2)}.mg-c-icon[size=xxlarge],.mg-c-icon.mg-c-icon--size-xxlarge{width:var(--mg-b-size-32);height:var(--mg-b-size-32)}.mg-c-icon[size=xxlarge][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-xxlarge[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-48) - var(--mg-b-size-32))/2)}.mg-c-icon.mg-c-icon--variant-dark.mg-c-icon--variant-style-icon{color:var(--mg-b-color-dark)}.mg-c-icon.mg-c-icon--variant-light.mg-c-icon--variant-style-icon{color:var(--mg-b-color-light)}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-icon{color:var(--mg-b-color-app)}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-icon{color:var(--mg-b-color-blue)}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-icon{color:var(--mg-b-color-80)}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-icon{color:var(--mg-b-color-danger)}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-icon{color:var(--mg-b-color-info)}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-icon{color:var(--mg-b-color-success)}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-icon{color:var(--mg-b-color-warning)}.mg-c-icon.mg-c-icon--variant-dark.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-110-20, color-mix(in srgb, var(--mg-b-color-dark), white 80%))}.mg-c-icon.mg-c-icon--variant-light.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-0-20, color-mix(in srgb, var(--mg-b-color-light), white 80%))}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-app), white 80%))}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-blue), white 80%))}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-80), white 80%))}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-icon.mg-c-icon--variant-dark.mg-c-icon--variant-style-full{color:var(--mg-b-color-dark);background-color:var(--mg-b-color-110-20, color-mix(in srgb, var(--mg-b-color-dark), white 80%))}.mg-c-icon.mg-c-icon--variant-light.mg-c-icon--variant-style-full{color:var(--mg-b-color-light);background-color:var(--mg-b-color-0-20, color-mix(in srgb, var(--mg-b-color-light), white 80%))}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-full{color:var(--mg-b-color-app);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-app), white 80%))}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-full{color:var(--mg-b-color-blue);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-blue), white 80%))}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-full{color:var(--mg-b-color-80);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-80), white 80%))}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-full{color:var(--mg-b-color-danger);background-color:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-full{color:var(--mg-b-color-info);background-color:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-full{color:var(--mg-b-color-success);background-color:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-full{color:var(--mg-b-color-warning);background-color:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-icon[class*=mg-c-icon--variant-]{overflow:visible;border-radius:var(--mg-c-icon-border-radius)}.mg-c-icon--spin{animation-duration:.75s;animation-iteration-count:infinite;animation-name:rotate}@keyframes rotate{to{transform:rotate(360deg)}}`;
|
|
1049
1091
|
|
|
1050
1092
|
const MgIcon = class {
|
|
1051
1093
|
constructor(hostRef) {
|
|
@@ -1072,7 +1114,7 @@ const MgIcon = class {
|
|
|
1072
1114
|
(_a = this.element.shadowRoot.querySelector('svg')) === null || _a === void 0 ? void 0 : _a.remove();
|
|
1073
1115
|
// Append new SVG to ShadowRoot
|
|
1074
1116
|
const svgContainer = document.createElement('div');
|
|
1075
|
-
svgContainer.innerHTML = icons[icon];
|
|
1117
|
+
svgContainer.innerHTML = index$3.icons[icon];
|
|
1076
1118
|
this.element.shadowRoot.append(svgContainer.firstChild);
|
|
1077
1119
|
svgContainer.remove();
|
|
1078
1120
|
// Update svg attributes
|
|
@@ -1083,8 +1125,8 @@ const MgIcon = class {
|
|
|
1083
1125
|
};
|
|
1084
1126
|
}
|
|
1085
1127
|
validateIcon(newValue, oldValue) {
|
|
1086
|
-
if (!Object.keys(icons).includes(newValue)) {
|
|
1087
|
-
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${index$1.toString(newValue)}.`);
|
|
1128
|
+
if (!Object.keys(index$3.icons).includes(newValue)) {
|
|
1129
|
+
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(index$3.icons).join(', ')}. Passed value: ${index$1.toString(newValue)}.`);
|
|
1088
1130
|
}
|
|
1089
1131
|
else {
|
|
1090
1132
|
if (oldValue !== undefined) {
|
|
@@ -1205,7 +1247,7 @@ const sizes$1 = ['small', 'medium', 'large'];
|
|
|
1205
1247
|
*/
|
|
1206
1248
|
const directions = ['vertical', 'horizontal'];
|
|
1207
1249
|
|
|
1208
|
-
const mgIllustratedMessageCss = () => `.mg-c-illustrated-message{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);margin:auto;gap:var(--mg-b-size-16) var(--mg-b-size-64);max-inline-size:calc(60*var(--mg-b-size-8));text-align:center}.mg-c-illustrated-message__illustration{max-block-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){block-size:auto;inline-size:100%;max-block-size:calc(15*var(--mg-b-size-8));max-inline-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__slots{display:flex;flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-illustrated-message__slots ::slotted([slot=title]){margin:0;font-family:var(--mg-b-font-family-heading) !important;font-size:var(--mg-b-font-size-h2) !important}.mg-c-illustrated-message__slots ::slotted([slot=details]){margin:0}.mg-c-illustrated-message.mg-c-illustrated-message--size-small{--mg-c-illustrated-message-spacing-vertical:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__slots{gap:
|
|
1250
|
+
const mgIllustratedMessageCss = () => `.mg-c-illustrated-message{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);margin:auto;gap:var(--mg-b-size-16) var(--mg-b-size-64);max-inline-size:calc(60*var(--mg-b-size-8));text-align:center}.mg-c-illustrated-message__illustration{max-block-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){block-size:auto;inline-size:100%;margin-inline:auto;max-block-size:calc(15*var(--mg-b-size-8));max-inline-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__slots{display:flex;flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-illustrated-message__slots ::slotted([slot=title]){margin:0;font-family:var(--mg-b-font-family-heading) !important;font-size:var(--mg-b-font-size-h2) !important}.mg-c-illustrated-message__slots ::slotted([slot=details]){margin:0}.mg-c-illustrated-message.mg-c-illustrated-message--size-small{--mg-c-illustrated-message-spacing-vertical:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__slots{gap:var(--mg-b-size-2)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration{max-block-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-block-size:var(--mg-b-size-64);max-inline-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration{max-block-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-block-size:calc(23*var(--mg-b-size-8));max-inline-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{max-inline-size:unset}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots{max-inline-size:calc(60*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:calc(15*var(--mg-b-size-8));inline-size:auto}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:calc(23*var(--mg-b-size-8))}@container (width > 52.8rem){.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{flex-direction:row;align-items:center;column-gap:var(--mg-b-size-48);text-align:left}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots{max-inline-size:unset}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration{flex:1 0 auto;max-inline-size:fit-content}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-small{column-gap:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-large{column-gap:var(--mg-b-size-64)}}:host{display:block;container-type:inline-size;inline-size:100%}`;
|
|
1209
1251
|
|
|
1210
1252
|
const MgIllustratedMessage = class {
|
|
1211
1253
|
constructor(hostRef) {
|
|
@@ -1283,7 +1325,7 @@ const MgIllustratedMessage = class {
|
|
|
1283
1325
|
* @returns HTML Element
|
|
1284
1326
|
*/
|
|
1285
1327
|
render() {
|
|
1286
|
-
return (index.h("div", { key: '
|
|
1328
|
+
return (index.h("div", { key: '87fb97f2eff23d0793e1829a2ac533be7c670f59', class: this.classCollection.join() }, index.h("div", { key: 'c3395aefc56c00f625a7510ce73204097abbfc06', class: "mg-c-illustrated-message__illustration" }, index.h("slot", { key: '2505490d95166f2490e75cac403a90c693507502', name: "illustration" })), index.h("div", { key: '12b89745d353f0a31575f48c15d864459eb2d77e', class: "mg-c-illustrated-message__slots" }, index.h("slot", { key: 'c56b865f24c818ef40e3e0adb7efb698e509fba9', name: "title" }), index.h("slot", { key: '018faf36cfd88e1ac38b13636e7c7da7b44c9b40', name: "details" }))));
|
|
1287
1329
|
}
|
|
1288
1330
|
get element() { return index.getElement(this); }
|
|
1289
1331
|
static get watchers() { return {
|
|
@@ -1297,7 +1339,7 @@ const MgIllustratedMessage = class {
|
|
|
1297
1339
|
};
|
|
1298
1340
|
MgIllustratedMessage.style = mgIllustratedMessageCss();
|
|
1299
1341
|
|
|
1300
|
-
const mgInputCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
1342
|
+
const mgInputCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){margin:0;font-size:var(--mg-b-font-size-small);text-align:start}:host .mg-c-input__input+.mg-c-input__error,:host .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--toggle) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--fieldset) ::slotted(.mg-c-input__input-group){min-width:0;flex-grow:1}:host(.mg-c-input.mg-c-input--toggle) .mg-c-input__input-container{min-width:0;flex:1}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}:host(.mg-c-input.mg-c-input--inputs-on-bottom) .mg-c-input__help-text{margin-top:var(--mg-b-size-4);margin-bottom:var(--mg-b-size-12)}:host(.mg-c-input.mg-c-input--inputs-on-bottom) .mg-c-input__error{margin-bottom:var(--mg-b-size-20)}:host(.mg-c-input.mg-c-input--inputs-on-bottom.mg-c-input--fieldset){--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-title-horizontal-space:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--inputs-on-bottom.mg-c-input--fieldset) ::slotted(*){--mg-c-input-margin-bottom:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--label-border-display) .mg-c-input__title{border-bottom:var(--mg-b-size-border) solid var(--mg-c-divider-color-background)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__title{margin-bottom:0}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input-title__text{margin-top:var(--mg-b-size-8);margin-bottom:var(--mg-b-size-8)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text,:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__error{margin-top:0;margin-bottom:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text+.mg-c-input__input,:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__error+.mg-c-input__input{margin-top:var(--mg-b-size-12)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text+.mg-c-input__error{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__title{margin-bottom:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text,:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__error{margin-bottom:0}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text+.mg-c-input__input,:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__error+.mg-c-input__input{margin-top:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text+.mg-c-input__error{margin-top:var(--mg-b-size-8)}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}`;
|
|
1301
1343
|
|
|
1302
1344
|
const MgInput = class {
|
|
1303
1345
|
constructor(hostRef) {
|
|
@@ -1305,6 +1347,11 @@ const MgInput = class {
|
|
|
1305
1347
|
this.slotLabel = 'label';
|
|
1306
1348
|
this.slotError = 'error';
|
|
1307
1349
|
this.slotHelpText = 'help-text';
|
|
1350
|
+
// Block-level elements that cannot be nested inside a <p>.
|
|
1351
|
+
// helpText/errorMessage are injected via innerHTML and may contain HTML: when block content
|
|
1352
|
+
// is detected we fall back to <div> to keep the markup valid (RGAA 8.2), otherwise we use a
|
|
1353
|
+
// semantic <p> for the (textual) message (RGAA 8.9).
|
|
1354
|
+
this.blockLevelContentRegExp = /<(address|article|aside|blockquote|details|dialog|div|dl|fieldset|figure|figcaption|footer|form|h[1-6]|header|hr|main|nav|ol|p|pre|section|table|ul)[\s/>]/i;
|
|
1308
1355
|
// style
|
|
1309
1356
|
this.classInput = 'mg-c-input';
|
|
1310
1357
|
this.classHasError = 'mg-c-input--has-error';
|
|
@@ -1377,7 +1424,7 @@ const MgInput = class {
|
|
|
1377
1424
|
* Get tooltip node
|
|
1378
1425
|
* @returns mg-tooltip
|
|
1379
1426
|
*/
|
|
1380
|
-
this.renderTooltip = () => (index.h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, index.h("mg-icon", { icon: "info-circle" })));
|
|
1427
|
+
this.renderTooltip = () => (index.h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, index.h("mg-icon", { icon: "info-circle-outline" })));
|
|
1381
1428
|
/**
|
|
1382
1429
|
* Get input container element
|
|
1383
1430
|
* @returns ordered elements
|
|
@@ -1387,7 +1434,10 @@ const MgInput = class {
|
|
|
1387
1434
|
this.helptextMessageSlotElement && (index.h("div", { class: "mg-c-input__help-text" }, index.h("slot", { name: this.slotHelpText }))),
|
|
1388
1435
|
!this.isDisabled && this.errorMessage && (index.h("div", { class: "mg-c-input__error", "aria-live": "assertive" }, index.h("slot", { name: this.slotError }))),
|
|
1389
1436
|
];
|
|
1390
|
-
const inputSlot = (index.h("div", { class: "mg-c-input__input" }, index.h("slot", null), this.tooltip &&
|
|
1437
|
+
const inputSlot = (index.h("div", { class: "mg-c-input__input" }, index.h("slot", null), this.tooltip &&
|
|
1438
|
+
!this.labelOnTop &&
|
|
1439
|
+
(this.tooltipPosition === 'input' || this.labelHide) &&
|
|
1440
|
+
this.renderTooltip()));
|
|
1391
1441
|
if (this.inputsOnBottom) {
|
|
1392
1442
|
return [...elements, inputSlot];
|
|
1393
1443
|
}
|
|
@@ -1484,7 +1534,7 @@ const MgInput = class {
|
|
|
1484
1534
|
this.ariaDescribedbyIDs = this.ariaDescribedbyIDs.split(' ');
|
|
1485
1535
|
return;
|
|
1486
1536
|
}
|
|
1487
|
-
else if (!(Array.isArray(this.ariaDescribedbyIDs) && this.ariaDescribedbyIDs.every(entry => typeof entry === 'string'))) {
|
|
1537
|
+
else if (!(Array.isArray(this.ariaDescribedbyIDs) && this.ariaDescribedbyIDs.every((entry) => typeof entry === 'string'))) {
|
|
1488
1538
|
this.ariaDescribedbyIDs = [];
|
|
1489
1539
|
return;
|
|
1490
1540
|
}
|
|
@@ -1517,7 +1567,6 @@ const MgInput = class {
|
|
|
1517
1567
|
/**
|
|
1518
1568
|
* Component classes
|
|
1519
1569
|
*/
|
|
1520
|
-
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1521
1570
|
watchClass() {
|
|
1522
1571
|
if (!this.element.classList.contains(this.classInput)) {
|
|
1523
1572
|
this.element.classList.add(this.classInput);
|
|
@@ -1530,7 +1579,6 @@ const MgInput = class {
|
|
|
1530
1579
|
/**
|
|
1531
1580
|
* Trigger label update
|
|
1532
1581
|
*/
|
|
1533
|
-
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1534
1582
|
watchLabel() {
|
|
1535
1583
|
if (!index$1.isValidString(this.label)) {
|
|
1536
1584
|
throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${index$1.toString(this.label)}.`);
|
|
@@ -1573,16 +1621,42 @@ const MgInput = class {
|
|
|
1573
1621
|
// update aria-describedby
|
|
1574
1622
|
this.watchAriaDescribedbyIDs();
|
|
1575
1623
|
}
|
|
1624
|
+
/**
|
|
1625
|
+
* Get the semantic tag name for a slotted message.
|
|
1626
|
+
* Phrasing (textual/inline) content uses <p> (RGAA 8.9); block-level content falls back to
|
|
1627
|
+
* <div> to avoid invalid nesting such as <p><p>…</p></p> (RGAA 8.2).
|
|
1628
|
+
* @param content - the HTML content that will be injected in the slot
|
|
1629
|
+
* @returns the tag name to use
|
|
1630
|
+
*/
|
|
1631
|
+
getSlotMessageTagName(content) {
|
|
1632
|
+
return this.blockLevelContentRegExp.test(content) ? 'div' : 'p';
|
|
1633
|
+
}
|
|
1634
|
+
/**
|
|
1635
|
+
* Get the existing slotted element or (re)create it with the expected tag.
|
|
1636
|
+
* The element is recreated when its current tag no longer matches the expected one
|
|
1637
|
+
* (e.g. the content switched from text to block HTML), keeping the slot id and position.
|
|
1638
|
+
* @param slot - the slot name
|
|
1639
|
+
* @param tagName - the expected tag name
|
|
1640
|
+
* @returns the slotted element
|
|
1641
|
+
*/
|
|
1642
|
+
getSlotMessageElement(slot, tagName) {
|
|
1643
|
+
let slotElement = this.element.querySelector(`[slot=${slot}]`);
|
|
1644
|
+
if (slotElement !== null && slotElement.tagName.toLowerCase() !== tagName) {
|
|
1645
|
+
slotElement.remove();
|
|
1646
|
+
slotElement = null;
|
|
1647
|
+
}
|
|
1648
|
+
if (slotElement === null) {
|
|
1649
|
+
slotElement = document.createElement(tagName);
|
|
1650
|
+
slotElement.setAttribute('slot', slot);
|
|
1651
|
+
this.element.appendChild(slotElement);
|
|
1652
|
+
}
|
|
1653
|
+
return slotElement;
|
|
1654
|
+
}
|
|
1576
1655
|
/**
|
|
1577
1656
|
* Render error message
|
|
1578
1657
|
*/
|
|
1579
1658
|
renderErrorMessage() {
|
|
1580
|
-
this.errorMessageSlotElement = this.
|
|
1581
|
-
if (this.errorMessageSlotElement === null) {
|
|
1582
|
-
this.errorMessageSlotElement = document.createElement('div');
|
|
1583
|
-
this.errorMessageSlotElement.setAttribute('slot', this.slotError);
|
|
1584
|
-
this.element.appendChild(this.errorMessageSlotElement);
|
|
1585
|
-
}
|
|
1659
|
+
this.errorMessageSlotElement = this.getSlotMessageElement(this.slotError, this.getSlotMessageTagName(this.errorMessage));
|
|
1586
1660
|
this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);
|
|
1587
1661
|
this.errorMessageSlotElement.innerHTML = this.errorMessage;
|
|
1588
1662
|
}
|
|
@@ -1590,12 +1664,7 @@ const MgInput = class {
|
|
|
1590
1664
|
* Render help text message
|
|
1591
1665
|
*/
|
|
1592
1666
|
renderHelpText() {
|
|
1593
|
-
this.helptextMessageSlotElement = this.
|
|
1594
|
-
if (this.helptextMessageSlotElement === null) {
|
|
1595
|
-
this.helptextMessageSlotElement = document.createElement('div');
|
|
1596
|
-
this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);
|
|
1597
|
-
this.element.appendChild(this.helptextMessageSlotElement);
|
|
1598
|
-
}
|
|
1667
|
+
this.helptextMessageSlotElement = this.getSlotMessageElement(this.slotHelpText, this.getSlotMessageTagName(this.helpText));
|
|
1599
1668
|
this.helptextMessageSlotElement.setAttribute('id', this.helpTextId);
|
|
1600
1669
|
this.helptextMessageSlotElement.innerHTML = this.helpText;
|
|
1601
1670
|
}
|
|
@@ -1634,7 +1703,10 @@ const MgInput = class {
|
|
|
1634
1703
|
*/
|
|
1635
1704
|
render() {
|
|
1636
1705
|
const isGroup = this.isFieldset && !this.isReadonly;
|
|
1637
|
-
return (index.h(index.Host, { key: '
|
|
1706
|
+
return (index.h(index.Host, { key: 'e5803717999bac5e4a08910008176baeb426f634', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, index.h("div", { key: '32b04b05e8a4352536965fcd792f3c206dad9270', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, index.h("slot", { key: '2bb360ff8b4a86facb0b7f97fdf7dbbb49b5f6c0', name: this.slotLabel }), this.tooltip &&
|
|
1707
|
+
(this.tooltipPosition === 'label' || this.labelOnTop) &&
|
|
1708
|
+
!this.labelHide &&
|
|
1709
|
+
this.renderTooltip()), index.h("div", { key: '0c6751757d182029e1ac6ea4f8a4fcc7aeffb85e', class: "mg-c-input__input-container" }, this.inputContainerElements())));
|
|
1638
1710
|
}
|
|
1639
1711
|
get element() { return index.getElement(this); }
|
|
1640
1712
|
static get watchers() { return {
|
|
@@ -1715,9 +1787,12 @@ const SectionKind = {
|
|
|
1715
1787
|
* @param props - MgInputCheckboxList Interface Props
|
|
1716
1788
|
* @returns input template
|
|
1717
1789
|
*/
|
|
1718
|
-
const MgInputCheckboxList = (props) => (index.h("div", { class: "mg-c-input__input-group-container", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map(input => {
|
|
1790
|
+
const MgInputCheckboxList = (props) => (index.h("div", { class: "mg-c-input__input-group-container", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map((input) => {
|
|
1719
1791
|
var _a, _b;
|
|
1720
|
-
return (index.h("div", { key: input._id, class: {
|
|
1792
|
+
return (index.h("div", { key: input._id, class: {
|
|
1793
|
+
'mg-c-input__input-group': true,
|
|
1794
|
+
'mg-c-input__input-group--disabled': props.disabled || input.disabled,
|
|
1795
|
+
} }, index.h("input", { type: "checkbox", id: input._id, name: props.name, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a.toString(), checked: Boolean(input.value), required: input.required, "aria-invalid": ((_b = props.invalid) === null || _b === void 0 ? void 0 : _b.toString()) || 'false', disabled: props.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }), index.h("label", { htmlFor: input._id }, input.title)));
|
|
1721
1796
|
})));
|
|
1722
1797
|
|
|
1723
1798
|
/**
|
|
@@ -1763,10 +1838,14 @@ const MgInputCheckboxPaginated = (props) => {
|
|
|
1763
1838
|
};
|
|
1764
1839
|
return (index.h("div", { class: "mg-input-checkbox-paginated mg-c-input__tab", slot: `tab_content-${props.key + 1}` },
|
|
1765
1840
|
// Mass action depends on all checkboxes list, not only displayed items
|
|
1766
|
-
typeof props.handleMassAction === 'function' &&
|
|
1841
|
+
typeof props.handleMassAction === 'function' &&
|
|
1842
|
+
props.checkboxes.length > 0 &&
|
|
1843
|
+
props.checkboxes.some((checkbox) => checkbox.disabled !== true) && (index.h("mg-tooltip", { slot: "header-action", class: "mg-c-input__tabs-action", message: props.messages.tooltip }, index.h("mg-button", { variant: "link", onClick: props.handleMassAction }, props.messages.action))), index.h("div", { class: "mg-c-input__tabs-content" }, index.h("p", { id: tabId, class: { 'mg-c-input__popover-info': true, 'mg-u-visually-hidden': items.length !== 0 }, "aria-live": items.length !== 0 ? 'polite' : undefined }, items.length === 0
|
|
1844
|
+
? props.messages.noValue
|
|
1845
|
+
: props.messages.values.replace('{count}', items.length.toString())), items.length > 0 && (index.h(MgInputCheckboxList, { checkboxes: items, labelledby: tabId, id: listId, disabled: props.disabled, name: props.name, invalid: props.invalid })), hasNext(props.checkboxes, props.limit) && (index.h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: handleLoadMoreClick, "aria-controls": listId }, index.h("mg-icon", { icon: "chevron-down" }), props.messages.showMore)))));
|
|
1767
1846
|
};
|
|
1768
1847
|
|
|
1769
|
-
const mgInputCheckboxCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
1848
|
+
const mgInputCheckboxCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-group-container{padding:var(--mg-b-size-4) var(--mg-b-size-8);margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container{display:flex;width:unset;flex:unset;flex-wrap:wrap;column-gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container-list{display:flex;flex-flow:row wrap;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tab{display:block;min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs{min-height:0;flex-shrink:1}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-action{padding-top:var(--mg-b-size-16);padding-bottom:var(--mg-b-size-12)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-content{height:calc(24*var(--mg-b-size-8) - 2*var(--mg-b-size-8));overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-value{display:inline-flex;min-width:var(--mg-b-size-min-height);min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-radius:var(--mg-b-size-4);background-color:var(--mg-b-color-neutral-20);font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi b{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container b{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--with-values .mg-c-input__input-container{gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content{display:flex;width:calc(var(--mg-b-size-floating-element-max-width) - var(--mg-b-size-16));flex-direction:column;gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content .mg-c-input__tabs-content{min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__section-header-tootlip){margin-left:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-c-card-spacing:var(--mg-b-size-8)}.mg-c-input.mg-c-input--readonly ul{display:flex;min-height:var(--mg-b-font-size);flex-flow:column wrap;padding:0;margin:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) 0 0;list-style:none;row-gap:var(--mg-b-size-8)}`;
|
|
1770
1849
|
|
|
1771
1850
|
/**
|
|
1772
1851
|
* type ICheckboxItem validation function
|
|
@@ -1774,7 +1853,10 @@ const mgInputCheckboxCss = () => `.mg-c-input__readonly-value{min-height:var(--m
|
|
|
1774
1853
|
* @returns match item type
|
|
1775
1854
|
*/
|
|
1776
1855
|
const isCheckboxItems = (items) => Array.isArray(items) &&
|
|
1777
|
-
items.every(item => typeof item === 'object' &&
|
|
1856
|
+
items.every((item) => typeof item === 'object' &&
|
|
1857
|
+
typeof item.title === 'string' &&
|
|
1858
|
+
(item.value === null || typeof item.value === 'boolean') &&
|
|
1859
|
+
item.value !== undefined);
|
|
1778
1860
|
const MgInputCheckbox = class {
|
|
1779
1861
|
constructor(hostRef) {
|
|
1780
1862
|
index.registerInstance(this, hostRef);
|
|
@@ -1867,7 +1949,7 @@ const MgInputCheckbox = class {
|
|
|
1867
1949
|
* @param event - input event
|
|
1868
1950
|
*/
|
|
1869
1951
|
this.handleInput = (event) => {
|
|
1870
|
-
this.updateCheckboxItems('value', Boolean(event.target.checked), item => item._id === event.target.id);
|
|
1952
|
+
this.updateCheckboxItems('value', Boolean(event.target.checked), (item) => item._id === event.target.id);
|
|
1871
1953
|
this.updateValues();
|
|
1872
1954
|
this.checkValidity();
|
|
1873
1955
|
this.setErrorMessage();
|
|
@@ -1886,11 +1968,12 @@ const MgInputCheckbox = class {
|
|
|
1886
1968
|
return;
|
|
1887
1969
|
}
|
|
1888
1970
|
const enableInputs = Array.from(this.element.shadowRoot.querySelectorAll('input'))
|
|
1889
|
-
.filter(input => !input.hasAttribute('disabled'))
|
|
1971
|
+
.filter((input) => !input.hasAttribute('disabled'))
|
|
1890
1972
|
.map(({ id }) => id);
|
|
1891
|
-
const originInputIndex = enableInputs.findIndex(id => id === event.target.id);
|
|
1973
|
+
const originInputIndex = enableInputs.findIndex((id) => id === event.target.id);
|
|
1892
1974
|
// close popover when tab trigger focus outside its DOM
|
|
1893
|
-
if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) ||
|
|
1975
|
+
if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) ||
|
|
1976
|
+
(originInputIndex === 0 && event.shiftKey && this.searchInput === undefined))
|
|
1894
1977
|
this.mgPopover.display = false;
|
|
1895
1978
|
}
|
|
1896
1979
|
};
|
|
@@ -1936,13 +2019,13 @@ const MgInputCheckbox = class {
|
|
|
1936
2019
|
this.checkValidity();
|
|
1937
2020
|
}
|
|
1938
2021
|
// init active tab to selected if some values are checked
|
|
1939
|
-
this.activeTab = this.checkboxItems.some(items => items.value) ? 2 : 1;
|
|
2022
|
+
this.activeTab = this.checkboxItems.some((items) => items.value) ? 2 : 1;
|
|
1940
2023
|
};
|
|
1941
2024
|
/**
|
|
1942
2025
|
* Update values
|
|
1943
2026
|
*/
|
|
1944
2027
|
this.updateValues = () => {
|
|
1945
|
-
this.value = this.checkboxItems.map(o => {
|
|
2028
|
+
this.value = this.checkboxItems.map((o) => {
|
|
1946
2029
|
delete o._handleBlur;
|
|
1947
2030
|
delete o._handleInput;
|
|
1948
2031
|
delete o._handleKeydown;
|
|
@@ -1959,7 +2042,7 @@ const MgInputCheckbox = class {
|
|
|
1959
2042
|
* Method to update searchResults
|
|
1960
2043
|
*/
|
|
1961
2044
|
this.updateSearchResults = () => {
|
|
1962
|
-
this.searchResults = this.checkboxItems.filter(item => index$1.cleanString(item.title).includes(index$1.cleanString(this.searchValue)));
|
|
2045
|
+
this.searchResults = this.checkboxItems.filter((item) => index$1.cleanString(item.title).includes(index$1.cleanString(this.searchValue)));
|
|
1963
2046
|
};
|
|
1964
2047
|
/**
|
|
1965
2048
|
* Method to validate if one of inputs value is checked id required
|
|
@@ -2031,7 +2114,7 @@ const MgInputCheckbox = class {
|
|
|
2031
2114
|
* Manage items to display depending on the search state
|
|
2032
2115
|
* @returns items to display
|
|
2033
2116
|
*/
|
|
2034
|
-
this.getDisplayItems = () =>
|
|
2117
|
+
this.getDisplayItems = () => this.searchValue.length > 0 ? this.searchResults : this.checkboxItems;
|
|
2035
2118
|
/**
|
|
2036
2119
|
* get list of selected checkboxItems
|
|
2037
2120
|
* @returns selected checkboxItems
|
|
@@ -2056,7 +2139,7 @@ const MgInputCheckbox = class {
|
|
|
2056
2139
|
* @returns The rendered readonly value.
|
|
2057
2140
|
*/
|
|
2058
2141
|
this.renderReadonly = (readonlyValue) => {
|
|
2059
|
-
return this.inputVerticalList ? (index.h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map(value => (index.h("li", { key: value }, index.h("b", null, value)))))) : (index.h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
|
|
2142
|
+
return this.inputVerticalList ? (index.h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map((value) => (index.h("li", { key: value }, index.h("b", null, value)))))) : (index.h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
|
|
2060
2143
|
};
|
|
2061
2144
|
/**
|
|
2062
2145
|
* Renders the MgInputCheckboxList component.
|
|
@@ -2167,7 +2250,7 @@ const MgInputCheckbox = class {
|
|
|
2167
2250
|
// - Async operations are completed
|
|
2168
2251
|
// - No timing issues with Stencil's render cycle
|
|
2169
2252
|
// - Keep everything in sync both inside and outside the component
|
|
2170
|
-
return new Promise(resolve => {
|
|
2253
|
+
return new Promise((resolve) => {
|
|
2171
2254
|
requestAnimationFrame(() => {
|
|
2172
2255
|
this.checkValidity();
|
|
2173
2256
|
this.setErrorMessage();
|
|
@@ -2207,14 +2290,14 @@ const MgInputCheckbox = class {
|
|
|
2207
2290
|
*/
|
|
2208
2291
|
async reset() {
|
|
2209
2292
|
if (!this.readonly) {
|
|
2210
|
-
this.value = this.value.map(item => (Object.assign(Object.assign({}, item), { value: false })));
|
|
2293
|
+
this.value = this.value.map((item) => (Object.assign(Object.assign({}, item), { value: false })));
|
|
2211
2294
|
// Use `Promise` as requested for stencil method
|
|
2212
2295
|
// Use `requestAnimationFrame` to ensure:
|
|
2213
2296
|
// - DOM is fully updated before validation
|
|
2214
2297
|
// - Async operations are completed
|
|
2215
2298
|
// - No timing issues with Stencil's render cycle
|
|
2216
2299
|
// - Keep everything in sync both inside and outside the component
|
|
2217
|
-
return new Promise(resolve => {
|
|
2300
|
+
return new Promise((resolve) => {
|
|
2218
2301
|
requestAnimationFrame(() => {
|
|
2219
2302
|
// unlock validity check by reseting customErrorMessage
|
|
2220
2303
|
this.customErrorMessage = { lock: false };
|
|
@@ -2247,7 +2330,7 @@ const MgInputCheckbox = class {
|
|
|
2247
2330
|
* @param condition - condtion to applu change on item
|
|
2248
2331
|
*/
|
|
2249
2332
|
updateCheckboxItems(key, newValue, condition) {
|
|
2250
|
-
this.checkboxItems = this.checkboxItems.map(item => {
|
|
2333
|
+
this.checkboxItems = this.checkboxItems.map((item) => {
|
|
2251
2334
|
if ((typeof condition === 'function' && condition(item)) || condition === undefined)
|
|
2252
2335
|
item[key] = newValue;
|
|
2253
2336
|
return item;
|
|
@@ -2300,7 +2383,7 @@ const MgInputCheckbox = class {
|
|
|
2300
2383
|
const handleMassAction = (kind) => () => {
|
|
2301
2384
|
const displayItems = this.getDisplayItems();
|
|
2302
2385
|
// update only displayed items
|
|
2303
|
-
displayItems.forEach(item => {
|
|
2386
|
+
displayItems.forEach((item) => {
|
|
2304
2387
|
if (!item.disabled) {
|
|
2305
2388
|
item.value = kind !== SectionKind.SELECTED;
|
|
2306
2389
|
}
|
|
@@ -2317,9 +2400,13 @@ const MgInputCheckbox = class {
|
|
|
2317
2400
|
];
|
|
2318
2401
|
return (index.h("mg-tabs", { identifier: `${this.identifier}-tabs`, class: "mg-c-input__tabs", label: this.messages.input.checkbox.sections.label, items: sections.map((section, key) => ({
|
|
2319
2402
|
label: section.messages.title,
|
|
2320
|
-
badge: {
|
|
2403
|
+
badge: {
|
|
2404
|
+
value: section.checkboxes.length,
|
|
2405
|
+
label: this.messages.input.checkbox.sections.badge.label,
|
|
2406
|
+
role: 'information',
|
|
2407
|
+
},
|
|
2321
2408
|
status: key + 1 === this.activeTab ? Status.ACTIVE : Status.VISIBLE,
|
|
2322
|
-
})), activeTab: this.activeTab, "onActive-tab-change": this.handleActiveTabChange }, sections.map(section => {
|
|
2409
|
+
})), activeTab: this.activeTab, "onActive-tab-change": this.handleActiveTabChange }, sections.map((section) => {
|
|
2323
2410
|
var _a;
|
|
2324
2411
|
return (index.h(MgInputCheckboxPaginated, Object.assign({}, section, { limit: (_a = this.paginatedLimits[section.key]) !== null && _a !== void 0 ? _a : this.paginatedStep, handleLoadMore: () => this.handlePaginatedLoadMore(section.key) })));
|
|
2325
2412
|
})));
|
|
@@ -2337,12 +2424,12 @@ const MgInputCheckbox = class {
|
|
|
2337
2424
|
checkboxes: this.getDisplayItems(),
|
|
2338
2425
|
};
|
|
2339
2426
|
const checkboxesPaginatedSearchProps = Object.assign(Object.assign({}, props), { messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.search), { showMore: this.messages.input.showMore }), key: SectionKind.SEARCH, limit: (_a = this.paginatedLimits[SectionKind.SEARCH]) !== null && _a !== void 0 ? _a : this.paginatedStep, handleLoadMore: () => this.handlePaginatedLoadMore(SectionKind.SEARCH) });
|
|
2340
|
-
return (index.h("div", { class: "mg-c-input__input-container" }, index.h("mg-popover", {
|
|
2427
|
+
return (index.h("div", { class: "mg-c-input__input-container" }, index.h("mg-popover", { identifier: this.getMgPopoverIdentifier(), display: this.hasOpenedPopover, "onDisplay-change": this.handleMgPopoverDisplayChange, "data-fallback-placement": "bottom-end", ref: (el) => {
|
|
2341
2428
|
if (el !== null)
|
|
2342
2429
|
this.mgPopover = el;
|
|
2343
2430
|
} }, index.h("mg-button", { variant: "secondary", "aria-describedby": `${this.identifier}-title` }, index.h("mg-icon", { icon: "list" }), this.getSelectValuesButtonMessage()), index.h("div", { slot: "content", class: "mg-c-input__content" }, this.displaySearchInput ? ([
|
|
2344
2431
|
index.h("mg-input-text", { key: "input-search", identifier: `${this.identifier}-input-search`, icon: "magnifying-glass", type: "search", placeholder: this.messages.input.checkbox.sections.search.label, label: this.messages.input.checkbox.sections.search.label, mgWidth: "full", value: this.searchValue, labelHide: true, characterLeftHide: true, name: "q", "onValue-change": this.handleSearchChange }),
|
|
2345
|
-
this.searchValue.length > 0 ? index.h(MgInputCheckboxPaginated, Object.assign({}, checkboxesPaginatedSearchProps)) : this.renderCheckboxTabs(props),
|
|
2432
|
+
this.searchValue.length > 0 ? (index.h(MgInputCheckboxPaginated, Object.assign({}, checkboxesPaginatedSearchProps))) : (this.renderCheckboxTabs(props)),
|
|
2346
2433
|
]) : (index.h(MgInputCheckboxList, Object.assign({}, props, { id: this.checkboxesId, name: this.name, invalid: this.invalid }))))), this.displaySelectedValues ? (selectedValuesNb > 0 && (index.h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (index.h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (index.h("b", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
|
|
2347
2434
|
}
|
|
2348
2435
|
/**
|
|
@@ -2361,7 +2448,7 @@ const MgInputCheckbox = class {
|
|
|
2361
2448
|
else {
|
|
2362
2449
|
inputContent = this.renderCheckboxMulti();
|
|
2363
2450
|
}
|
|
2364
|
-
return (index.h("mg-input", { key: '
|
|
2451
|
+
return (index.h("mg-input", { key: '8e403fd79ca8a9bb2db5545e946a3763eb156551', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
|
|
2365
2452
|
}
|
|
2366
2453
|
get element() { return index.getElement(this); }
|
|
2367
2454
|
static get watchers() { return {
|
|
@@ -2405,7 +2492,7 @@ MgInputCheckbox.style = mgInputCheckboxCss();
|
|
|
2405
2492
|
|
|
2406
2493
|
const DEFAULT_MAX_DATE = '9999-12-31';
|
|
2407
2494
|
|
|
2408
|
-
const mgInputDateCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset
|
|
2495
|
+
const mgInputDateCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}`;
|
|
2409
2496
|
|
|
2410
2497
|
const MgInputDate = class {
|
|
2411
2498
|
constructor(hostRef) {
|
|
@@ -2477,7 +2564,9 @@ const MgInputDate = class {
|
|
|
2477
2564
|
text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText.expectedFormat));
|
|
2478
2565
|
}
|
|
2479
2566
|
// Replace pattern and date variables
|
|
2480
|
-
return text
|
|
2567
|
+
return text
|
|
2568
|
+
.replace('{pattern}', this.renderPattern())
|
|
2569
|
+
.replace('{date}', index$2.localeDate(index$1.dateToString(new Date('2025-12-24')), this.systemLocale));
|
|
2481
2570
|
};
|
|
2482
2571
|
/**
|
|
2483
2572
|
* Handle input event
|
|
@@ -2519,7 +2608,9 @@ const MgInputDate = class {
|
|
|
2519
2608
|
* Check if input is valid
|
|
2520
2609
|
*/
|
|
2521
2610
|
this.checkValidity = () => {
|
|
2522
|
-
this.setValidity(this.readonly ||
|
|
2611
|
+
this.setValidity(this.readonly ||
|
|
2612
|
+
this.disabled ||
|
|
2613
|
+
(this.input.checkValidity() && (this.value === null || this.isValidPattern(this.value))));
|
|
2523
2614
|
};
|
|
2524
2615
|
/**
|
|
2525
2616
|
* get input error code
|
|
@@ -2537,7 +2628,9 @@ const MgInputDate = class {
|
|
|
2537
2628
|
error = 'required';
|
|
2538
2629
|
}
|
|
2539
2630
|
// min & max
|
|
2540
|
-
else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) &&
|
|
2631
|
+
else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) &&
|
|
2632
|
+
((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
2633
|
+
this.max !== DEFAULT_MAX_DATE) {
|
|
2541
2634
|
error = 'minMax';
|
|
2542
2635
|
}
|
|
2543
2636
|
// min
|
|
@@ -2657,7 +2750,7 @@ const MgInputDate = class {
|
|
|
2657
2750
|
// - Async operations are completed
|
|
2658
2751
|
// - No timing issues with Stencil's render cycle
|
|
2659
2752
|
// - Keep everything in sync both inside and outside the component
|
|
2660
|
-
return new Promise(resolve => {
|
|
2753
|
+
return new Promise((resolve) => {
|
|
2661
2754
|
requestAnimationFrame(() => {
|
|
2662
2755
|
this.checkValidity();
|
|
2663
2756
|
this.setErrorMessage();
|
|
@@ -2704,7 +2797,7 @@ const MgInputDate = class {
|
|
|
2704
2797
|
// - Async operations are completed
|
|
2705
2798
|
// - No timing issues with Stencil's render cycle
|
|
2706
2799
|
// - Keep everything in sync both inside and outside the component
|
|
2707
|
-
return new Promise(resolve => {
|
|
2800
|
+
return new Promise((resolve) => {
|
|
2708
2801
|
requestAnimationFrame(() => {
|
|
2709
2802
|
// unlock validity check by reseting customErrorMessage
|
|
2710
2803
|
this.customErrorMessage = { lock: false };
|
|
@@ -2764,7 +2857,7 @@ const MgInputDate = class {
|
|
|
2764
2857
|
* @returns HTML Element
|
|
2765
2858
|
*/
|
|
2766
2859
|
render() {
|
|
2767
|
-
return (index.h("mg-input", { key: '
|
|
2860
|
+
return (index.h("mg-input", { key: 'c13dd54974bd7c8381bcefbe847fe79f2270506c', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && index.h("b", { class: "mg-c-input__readonly-value" }, index$2.localeDate(this.value, this.locale))) : (index.h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
|
|
2768
2861
|
if (el !== null)
|
|
2769
2862
|
this.input = el;
|
|
2770
2863
|
} }))));
|
|
@@ -2807,7 +2900,7 @@ MgInputDate.style = mgInputDateCss();
|
|
|
2807
2900
|
const types = ['decimal', 'integer'];
|
|
2808
2901
|
const formats = ['none', 'number', 'currency', 'percent', 'unit'];
|
|
2809
2902
|
|
|
2810
|
-
const mgInputNumericCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset
|
|
2903
|
+
const mgInputNumericCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input .mg-c-input__box{width:auto;text-align:var(--mg-c-input-text-align, right)}`;
|
|
2811
2904
|
|
|
2812
2905
|
const MgInputNumeric = class {
|
|
2813
2906
|
constructor(hostRef) {
|
|
@@ -2941,7 +3034,9 @@ const MgInputNumeric = class {
|
|
|
2941
3034
|
else {
|
|
2942
3035
|
const formattedMin = this.formatErrorValue(this.min);
|
|
2943
3036
|
const formattedMax = this.formatErrorValue(this.max);
|
|
2944
|
-
this.errorMessage = this.messages.input.numeric.error[inputError]
|
|
3037
|
+
this.errorMessage = this.messages.input.numeric.error[inputError]
|
|
3038
|
+
.replace('{min}', formattedMin)
|
|
3039
|
+
.replace('{max}', formattedMax);
|
|
2945
3040
|
}
|
|
2946
3041
|
}
|
|
2947
3042
|
};
|
|
@@ -2950,7 +3045,7 @@ const MgInputNumeric = class {
|
|
|
2950
3045
|
* @returns error code
|
|
2951
3046
|
*/
|
|
2952
3047
|
this.getInputError = () => {
|
|
2953
|
-
const hasNotEmptyValues = (toControl) => !toControl.some(value => [null, undefined].includes(value));
|
|
3048
|
+
const hasNotEmptyValues = (toControl) => !toControl.some((value) => [null, undefined].includes(value));
|
|
2954
3049
|
// required
|
|
2955
3050
|
if (!this.input.checkValidity() && this.input.validity.valueMissing) {
|
|
2956
3051
|
return 'required';
|
|
@@ -2964,7 +3059,8 @@ const MgInputNumeric = class {
|
|
|
2964
3059
|
return 'max';
|
|
2965
3060
|
}
|
|
2966
3061
|
// both min and max values are set
|
|
2967
|
-
if (hasNotEmptyValues([this.min, this.max, this.numericValue]) &&
|
|
3062
|
+
if (hasNotEmptyValues([this.min, this.max, this.numericValue]) &&
|
|
3063
|
+
(this.numericValue < this.min || this.numericValue > this.max)) {
|
|
2968
3064
|
return 'minMax';
|
|
2969
3065
|
}
|
|
2970
3066
|
return null;
|
|
@@ -3079,7 +3175,7 @@ const MgInputNumeric = class {
|
|
|
3079
3175
|
}
|
|
3080
3176
|
watchMgWidth(newValue) {
|
|
3081
3177
|
// reset width class
|
|
3082
|
-
mgInput_conf.widths.forEach(width => {
|
|
3178
|
+
mgInput_conf.widths.forEach((width) => {
|
|
3083
3179
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
3084
3180
|
});
|
|
3085
3181
|
// apply new width
|
|
@@ -3123,7 +3219,7 @@ const MgInputNumeric = class {
|
|
|
3123
3219
|
// - Async operations are completed
|
|
3124
3220
|
// - No timing issues with Stencil's render cycle
|
|
3125
3221
|
// - Keep everything in sync both inside and outside the component
|
|
3126
|
-
return new Promise(resolve => {
|
|
3222
|
+
return new Promise((resolve) => {
|
|
3127
3223
|
requestAnimationFrame(() => {
|
|
3128
3224
|
this.checkValidity();
|
|
3129
3225
|
this.setErrorMessage();
|
|
@@ -3170,7 +3266,7 @@ const MgInputNumeric = class {
|
|
|
3170
3266
|
// - Async operations are completed
|
|
3171
3267
|
// - No timing issues with Stencil's render cycle
|
|
3172
3268
|
// - Keep everything in sync both inside and outside the component
|
|
3173
|
-
return new Promise(resolve => {
|
|
3269
|
+
return new Promise((resolve) => {
|
|
3174
3270
|
requestAnimationFrame(() => {
|
|
3175
3271
|
// unlock validity check by reseting customErrorMessage
|
|
3176
3272
|
this.customErrorMessage = { lock: false };
|
|
@@ -3205,7 +3301,10 @@ const MgInputNumeric = class {
|
|
|
3205
3301
|
* @returns Returns true if the value is valid, otherwise false.
|
|
3206
3302
|
*/
|
|
3207
3303
|
isValidValue(value, regex, integer, decimal) {
|
|
3208
|
-
return (['', '-'].includes(value) ||
|
|
3304
|
+
return (['', '-'].includes(value) ||
|
|
3305
|
+
(regex.exec(value) !== null &&
|
|
3306
|
+
integer.length <= this.integerLength &&
|
|
3307
|
+
decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength)));
|
|
3209
3308
|
}
|
|
3210
3309
|
/**
|
|
3211
3310
|
* Updates the component values based on the validated input value.
|
|
@@ -3216,7 +3315,10 @@ const MgInputNumeric = class {
|
|
|
3216
3315
|
if (this.input !== undefined) {
|
|
3217
3316
|
this.input.value = this.value;
|
|
3218
3317
|
}
|
|
3219
|
-
this.numericValue =
|
|
3318
|
+
this.numericValue =
|
|
3319
|
+
!['', null].includes(this.value) && !isNaN(parseFloat(this.value))
|
|
3320
|
+
? parseFloat(this.value.replace(',', '.'))
|
|
3321
|
+
: null;
|
|
3220
3322
|
if (newValue === null || (newValue === this.storedValue && !Object.is(this.numericValue, -0))) {
|
|
3221
3323
|
this.valueChange.emit(this.numericValue);
|
|
3222
3324
|
}
|
|
@@ -3266,7 +3368,7 @@ const MgInputNumeric = class {
|
|
|
3266
3368
|
* @returns HTML Element
|
|
3267
3369
|
*/
|
|
3268
3370
|
render() {
|
|
3269
|
-
return (index.h("mg-input", { key: '
|
|
3371
|
+
return (index.h("mg-input", { key: 'dbf435211890922742cbead9ab3a738b5219df44', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
|
|
3270
3372
|
? this.readonlyValue && this.renderReadonly()
|
|
3271
3373
|
: [
|
|
3272
3374
|
index.h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
@@ -3319,7 +3421,7 @@ const MgInputNumeric = class {
|
|
|
3319
3421
|
};
|
|
3320
3422
|
MgInputNumeric.style = mgInputNumericCss();
|
|
3321
3423
|
|
|
3322
|
-
const mgInputPasswordCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset
|
|
3424
|
+
const mgInputPasswordCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--password .mg-c-input__input-icon{color:var(--mg-b-color-dark)}.mg-c-input.mg-c-input--password .mg-c-input__input-group{position:relative;flex-grow:1}.mg-c-input.mg-c-input--password .mg-c-input__append-button{position:absolute;right:0}.mg-c-input.mg-c-input--password .mg-c-input__box{padding-right:calc(var(--mg-b-size-min-height) + var(--mg-b-size-8))}.mg-c-input.mg-c-input--password .mg-c-input__box::-ms-reveal{display:none}`;
|
|
3323
3425
|
|
|
3324
3426
|
const MgInputPassword = class {
|
|
3325
3427
|
constructor(hostRef) {
|
|
@@ -3448,7 +3550,7 @@ const MgInputPassword = class {
|
|
|
3448
3550
|
}
|
|
3449
3551
|
watchMgWidth(newValue) {
|
|
3450
3552
|
// reset width class
|
|
3451
|
-
mgInput_conf.widths.forEach(width => {
|
|
3553
|
+
mgInput_conf.widths.forEach((width) => {
|
|
3452
3554
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
3453
3555
|
});
|
|
3454
3556
|
// apply new width
|
|
@@ -3472,7 +3574,7 @@ const MgInputPassword = class {
|
|
|
3472
3574
|
// - Async operations are completed
|
|
3473
3575
|
// - No timing issues with Stencil's render cycle
|
|
3474
3576
|
// - Keep everything in sync both inside and outside the component
|
|
3475
|
-
return new Promise(resolve => {
|
|
3577
|
+
return new Promise((resolve) => {
|
|
3476
3578
|
requestAnimationFrame(() => {
|
|
3477
3579
|
this.checkValidity();
|
|
3478
3580
|
this.setErrorMessage();
|
|
@@ -3519,7 +3621,7 @@ const MgInputPassword = class {
|
|
|
3519
3621
|
// - Async operations are completed
|
|
3520
3622
|
// - No timing issues with Stencil's render cycle
|
|
3521
3623
|
// - Keep everything in sync both inside and outside the component
|
|
3522
|
-
return new Promise(resolve => {
|
|
3624
|
+
return new Promise((resolve) => {
|
|
3523
3625
|
requestAnimationFrame(() => {
|
|
3524
3626
|
// unlock validity check by reseting customErrorMessage
|
|
3525
3627
|
this.customErrorMessage = { lock: false };
|
|
@@ -3571,7 +3673,7 @@ const MgInputPassword = class {
|
|
|
3571
3673
|
* @returns HTML Element
|
|
3572
3674
|
*/
|
|
3573
3675
|
render() {
|
|
3574
|
-
return (index.h("mg-input", { key: '
|
|
3676
|
+
return (index.h("mg-input", { key: '0a59c7177c65ccb255164e4ef45945b1ade5ad70', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && index.h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (index.h("span", { class: "mg-c-input__input-group" }, index.h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
3575
3677
|
if (el !== null)
|
|
3576
3678
|
this.input = el;
|
|
3577
3679
|
} }), index.h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, index.h("mg-icon", { class: "mg-c-input__input-icon", icon: (this.displayPassword ? 'eye-slash' : 'eye') }))))));
|
|
@@ -3601,14 +3703,16 @@ const MgInputPassword = class {
|
|
|
3601
3703
|
};
|
|
3602
3704
|
MgInputPassword.style = mgInputPasswordCss();
|
|
3603
3705
|
|
|
3604
|
-
const mgInputRadioCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
3706
|
+
const mgInputRadioCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}`;
|
|
3605
3707
|
|
|
3606
3708
|
/**
|
|
3607
3709
|
* type Option validation function
|
|
3608
3710
|
* @param option - radio option
|
|
3609
3711
|
* @returns radio option type is valid
|
|
3610
3712
|
*/
|
|
3611
|
-
const isOption$3 = (option) => typeof option === 'object' &&
|
|
3713
|
+
const isOption$3 = (option) => typeof option === 'object' &&
|
|
3714
|
+
typeof option.title === 'string' &&
|
|
3715
|
+
option.value !== undefined;
|
|
3612
3716
|
const MgInputRadio = class {
|
|
3613
3717
|
constructor(hostRef) {
|
|
3614
3718
|
index.registerInstance(this, hostRef);
|
|
@@ -3717,7 +3821,7 @@ const MgInputRadio = class {
|
|
|
3717
3821
|
this.readonlyValue = newValue;
|
|
3718
3822
|
}
|
|
3719
3823
|
else if (Array.isArray(this.items) && this.items.every(isOption$3)) {
|
|
3720
|
-
this.readonlyValue = (_a = this.items.find(item => item.value === newValue)) === null || _a === void 0 ? void 0 : _a.title;
|
|
3824
|
+
this.readonlyValue = (_a = this.items.find((item) => item.value === newValue)) === null || _a === void 0 ? void 0 : _a.title;
|
|
3721
3825
|
}
|
|
3722
3826
|
else {
|
|
3723
3827
|
this.readonlyValue = null;
|
|
@@ -3731,10 +3835,10 @@ const MgInputRadio = class {
|
|
|
3731
3835
|
}
|
|
3732
3836
|
// String array
|
|
3733
3837
|
else if (index$1.allItemsAreString(newValue)) {
|
|
3734
|
-
this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
|
|
3838
|
+
this.options = newValue.map((item) => ({ title: item, value: item, disabled: this.disabled }));
|
|
3735
3839
|
}
|
|
3736
3840
|
// Object array
|
|
3737
|
-
else if (newValue && newValue.every(item => isOption$3(item))) {
|
|
3841
|
+
else if (newValue && newValue.every((item) => isOption$3(item))) {
|
|
3738
3842
|
this.options = newValue;
|
|
3739
3843
|
}
|
|
3740
3844
|
else {
|
|
@@ -3754,7 +3858,7 @@ const MgInputRadio = class {
|
|
|
3754
3858
|
this.classCollection.delete(mgInput_conf.classReadonly);
|
|
3755
3859
|
}
|
|
3756
3860
|
handleValidityChange(newValue, _oldValue, prop) {
|
|
3757
|
-
this.inputs.forEach(input => {
|
|
3861
|
+
this.inputs.forEach((input) => {
|
|
3758
3862
|
input[prop] = newValue;
|
|
3759
3863
|
});
|
|
3760
3864
|
this.checkValidity();
|
|
@@ -3787,7 +3891,7 @@ const MgInputRadio = class {
|
|
|
3787
3891
|
// - Async operations are completed
|
|
3788
3892
|
// - No timing issues with Stencil's render cycle
|
|
3789
3893
|
// - Keep everything in sync both inside and outside the component
|
|
3790
|
-
return new Promise(resolve => {
|
|
3894
|
+
return new Promise((resolve) => {
|
|
3791
3895
|
requestAnimationFrame(() => {
|
|
3792
3896
|
this.checkValidity();
|
|
3793
3897
|
this.setErrorMessage();
|
|
@@ -3834,7 +3938,7 @@ const MgInputRadio = class {
|
|
|
3834
3938
|
// - Async operations are completed
|
|
3835
3939
|
// - No timing issues with Stencil's render cycle
|
|
3836
3940
|
// - Keep everything in sync both inside and outside the component
|
|
3837
|
-
return new Promise(resolve => {
|
|
3941
|
+
return new Promise((resolve) => {
|
|
3838
3942
|
requestAnimationFrame(() => {
|
|
3839
3943
|
// unlock validity check by reseting customErrorMessage
|
|
3840
3944
|
this.customErrorMessage = { lock: false };
|
|
@@ -3889,7 +3993,10 @@ const MgInputRadio = class {
|
|
|
3889
3993
|
* @returns HTML Element
|
|
3890
3994
|
*/
|
|
3891
3995
|
render() {
|
|
3892
|
-
return (index.h("mg-input", { key: '
|
|
3996
|
+
return (index.h("mg-input", { key: '763e021cdda0735dcbd62700f09cbc32c0de7377', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.h("div", { class: "mg-c-input__input-group-container" }, this.options.map((input, index$1) => (index.h("div", { key: input.title, class: {
|
|
3997
|
+
'mg-c-input__input-group': true,
|
|
3998
|
+
'mg-c-input__input-group--disabled': this.disabled || input.disabled,
|
|
3999
|
+
} }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
|
|
3893
4000
|
if (el !== null)
|
|
3894
4001
|
this.inputs[index$1] = el;
|
|
3895
4002
|
} }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title))))))));
|
|
@@ -3922,7 +4029,7 @@ const MgInputRadio = class {
|
|
|
3922
4029
|
};
|
|
3923
4030
|
MgInputRadio.style = mgInputRadioCss();
|
|
3924
4031
|
|
|
3925
|
-
const mgInputSelectCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset
|
|
4032
|
+
const mgInputSelectCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__box{max-width:100%;padding-top:0;padding-right:var(--mg-b-size-8);padding-bottom:0}@media screen and (max-width: 767px){.mg-c-input__box{width:100%}}`;
|
|
3926
4033
|
|
|
3927
4034
|
/**
|
|
3928
4035
|
* Check if item is a well configured option
|
|
@@ -3935,13 +4042,15 @@ const isOption$2 = (option) => typeof option === 'object' && typeof option.title
|
|
|
3935
4042
|
* @param items - select option
|
|
3936
4043
|
* @returns select option array type is valid
|
|
3937
4044
|
*/
|
|
3938
|
-
const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption$2(item));
|
|
4045
|
+
const allItemsAreOptions = (items) => Array.isArray(items) && items.every((item) => isOption$2(item));
|
|
3939
4046
|
/**
|
|
3940
4047
|
* Check if item is a well configured optgroup
|
|
3941
4048
|
* @param optgroup - select option
|
|
3942
4049
|
* @returns select optgroup type is valid
|
|
3943
4050
|
*/
|
|
3944
|
-
const isOptGroup = (optgroup) => typeof optgroup === 'object' &&
|
|
4051
|
+
const isOptGroup = (optgroup) => typeof optgroup === 'object' &&
|
|
4052
|
+
typeof optgroup.group === 'string' &&
|
|
4053
|
+
allItemsAreOptions(optgroup.options);
|
|
3945
4054
|
/**
|
|
3946
4055
|
* Ensure options can be unambiguously differentiated by their title
|
|
3947
4056
|
* Two options can share the same title only when they belong to different groups
|
|
@@ -3970,7 +4079,7 @@ const validateUniqueTitles = (items) => {
|
|
|
3970
4079
|
const groupOptions = (acc, { group, title, value, disabled }) => {
|
|
3971
4080
|
if (group !== undefined) {
|
|
3972
4081
|
// Check if group is already created
|
|
3973
|
-
const optGroup = acc.find(grp => grp.group === group);
|
|
4082
|
+
const optGroup = acc.find((grp) => grp.group === group);
|
|
3974
4083
|
// Add to group
|
|
3975
4084
|
if (optGroup !== undefined) {
|
|
3976
4085
|
optGroup.options.push({ title, value, disabled });
|
|
@@ -4041,10 +4150,10 @@ const MgInputSelect = class {
|
|
|
4041
4150
|
this.getReadonlyValue = () => {
|
|
4042
4151
|
var _a;
|
|
4043
4152
|
if (index$1.allItemsAreString(this.items) && typeof this.value === 'string') {
|
|
4044
|
-
return this.items.find(item => item === this.value);
|
|
4153
|
+
return this.items.find((item) => item === this.value);
|
|
4045
4154
|
}
|
|
4046
4155
|
else if (allItemsAreOptions(this.items)) {
|
|
4047
|
-
return (_a = this.items.find(item => item.value === this.value)) === null || _a === void 0 ? void 0 : _a.title;
|
|
4156
|
+
return (_a = this.items.find((item) => item.value === this.value)) === null || _a === void 0 ? void 0 : _a.title;
|
|
4048
4157
|
}
|
|
4049
4158
|
else {
|
|
4050
4159
|
return null;
|
|
@@ -4055,7 +4164,7 @@ const MgInputSelect = class {
|
|
|
4055
4164
|
* The select value is the position of an option in this list, so it uniquely identifies an option even when several share the same title
|
|
4056
4165
|
* @returns flat select options
|
|
4057
4166
|
*/
|
|
4058
|
-
this.getOptions = () => this.options.flatMap(option => (isOptGroup(option) ? option.options : [option]));
|
|
4167
|
+
this.getOptions = () => this.options.flatMap((option) => (isOptGroup(option) ? option.options : [option]));
|
|
4059
4168
|
/**
|
|
4060
4169
|
* Get the option matching the current select value
|
|
4061
4170
|
* @returns matching option or undefined
|
|
@@ -4069,7 +4178,7 @@ const MgInputSelect = class {
|
|
|
4069
4178
|
// The select value is normally the render index of the selected option
|
|
4070
4179
|
const optionByIndex = options[Number(this.input.value)];
|
|
4071
4180
|
// Fallback for an unknown value injected programmatically (stored as a disabled option keyed by its own value)
|
|
4072
|
-
return optionByIndex !== null && optionByIndex !== void 0 ? optionByIndex : options.find(option => option.value === this.input.value);
|
|
4181
|
+
return optionByIndex !== null && optionByIndex !== void 0 ? optionByIndex : options.find((option) => option.value === this.input.value);
|
|
4073
4182
|
};
|
|
4074
4183
|
/**
|
|
4075
4184
|
* Handle input event
|
|
@@ -4154,18 +4263,18 @@ const MgInputSelect = class {
|
|
|
4154
4263
|
}
|
|
4155
4264
|
// String array
|
|
4156
4265
|
else if (index$1.allItemsAreString(newValue)) {
|
|
4157
|
-
validateUniqueTitles(newValue.map(item => ({ title: item })));
|
|
4266
|
+
validateUniqueTitles(newValue.map((item) => ({ title: item })));
|
|
4158
4267
|
if (typeof this.value === 'string') {
|
|
4159
4268
|
this.valueExist = newValue.includes(this.value);
|
|
4160
4269
|
}
|
|
4161
|
-
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
4270
|
+
this.options = newValue.map((item) => ({ title: item, value: item }));
|
|
4162
4271
|
}
|
|
4163
4272
|
// Object array
|
|
4164
4273
|
else if (allItemsAreOptions(newValue)) {
|
|
4165
4274
|
validateUniqueTitles(newValue);
|
|
4166
|
-
this.valueExist = newValue.map(item => item.value).includes(this.value);
|
|
4275
|
+
this.valueExist = newValue.map((item) => item.value).includes(this.value);
|
|
4167
4276
|
// Grouped object options
|
|
4168
|
-
if (newValue.some(item => Boolean(item.group))) {
|
|
4277
|
+
if (newValue.some((item) => Boolean(item.group))) {
|
|
4169
4278
|
this.options = newValue.reduce(groupOptions, []);
|
|
4170
4279
|
}
|
|
4171
4280
|
// Standart object options
|
|
@@ -4201,7 +4310,7 @@ const MgInputSelect = class {
|
|
|
4201
4310
|
}
|
|
4202
4311
|
watchMgWidth(newValue) {
|
|
4203
4312
|
// reset width class
|
|
4204
|
-
mgInput_conf.widths.forEach(width => {
|
|
4313
|
+
mgInput_conf.widths.forEach((width) => {
|
|
4205
4314
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
4206
4315
|
});
|
|
4207
4316
|
// apply new width
|
|
@@ -4225,7 +4334,7 @@ const MgInputSelect = class {
|
|
|
4225
4334
|
// - Async operations are completed
|
|
4226
4335
|
// - No timing issues with Stencil's render cycle
|
|
4227
4336
|
// - Keep everything in sync both inside and outside the component
|
|
4228
|
-
return new Promise(resolve => {
|
|
4337
|
+
return new Promise((resolve) => {
|
|
4229
4338
|
requestAnimationFrame(() => {
|
|
4230
4339
|
this.checkValidity();
|
|
4231
4340
|
this.setErrorMessage();
|
|
@@ -4272,7 +4381,7 @@ const MgInputSelect = class {
|
|
|
4272
4381
|
// - Async operations are completed
|
|
4273
4382
|
// - No timing issues with Stencil's render cycle
|
|
4274
4383
|
// - Keep everything in sync both inside and outside the component
|
|
4275
|
-
return new Promise(resolve => {
|
|
4384
|
+
return new Promise((resolve) => {
|
|
4276
4385
|
requestAnimationFrame(() => {
|
|
4277
4386
|
// unlock validity check by reseting customErrorMessage
|
|
4278
4387
|
this.customErrorMessage = { lock: false };
|
|
@@ -4335,11 +4444,11 @@ const MgInputSelect = class {
|
|
|
4335
4444
|
const readonlyValue = this.getReadonlyValue();
|
|
4336
4445
|
// Running index shared across groups, so each option gets a unique value matching its position in getOptions()
|
|
4337
4446
|
let optionIndex = 0;
|
|
4338
|
-
return (index.h("mg-input", { key: '
|
|
4447
|
+
return (index.h("mg-input", { key: 'aab8c17ced01c0afbec9114f280ee2b7fa73cdfc', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && index.h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (index.h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
4339
4448
|
if (el !== null)
|
|
4340
4449
|
this.input = el;
|
|
4341
4450
|
} }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
4342
|
-
index.h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (index.h("optgroup", { label: option.group, key: option.group }, option.options.map(groupedOption => this.renderOption(groupedOption, optionIndex++)))) : (isOption$2(option) && this.renderOption(option, optionIndex++)))))));
|
|
4451
|
+
index.h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map((option) => isOptGroup(option) ? (index.h("optgroup", { label: option.group, key: option.group }, option.options.map((groupedOption) => this.renderOption(groupedOption, optionIndex++)))) : (isOption$2(option) && this.renderOption(option, optionIndex++)))))));
|
|
4343
4452
|
}
|
|
4344
4453
|
get element() { return index.getElement(this); }
|
|
4345
4454
|
static get watchers() { return {
|
|
@@ -4377,14 +4486,16 @@ const helpTextTypes = ['email', 'emails', 'url'];
|
|
|
4377
4486
|
// Define possible text types
|
|
4378
4487
|
const textTypes = ['text', 'search', 'tel', ...helpTextTypes];
|
|
4379
4488
|
|
|
4380
|
-
const mgInputTextCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset
|
|
4489
|
+
const mgInputTextCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--display-character-left mg-character-left{position:absolute;display:none}.mg-c-input.mg-c-input--display-character-left mg-character-left>span{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--display-character-left input:focus~mg-character-left,.mg-c-input.mg-c-input--display-character-left textarea:focus~mg-character-left{display:block}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--display-character-left mg-character-left{top:50%;right:var(--mg-b-size-8);font-size:var(--mg-b-font-size-small);transform:translateY(-50%)}.mg-c-input.mg-c-input--display-character-left .mg-c-input__box:focus{padding-right:max(var(--mg-c-character-left-message-length)*(.35ch + .3rem) + var(--mg-b-size-16)*clamp(0,var(--mg-c-character-left-message-length),1),var(--mg-b-size-8))}`;
|
|
4381
4490
|
|
|
4382
4491
|
/**
|
|
4383
4492
|
* Check if object is an option
|
|
4384
4493
|
* @param option - object to validate
|
|
4385
4494
|
* @returns true id object is an option
|
|
4386
4495
|
*/
|
|
4387
|
-
const isOption$1 = (option) => typeof option === 'object' &&
|
|
4496
|
+
const isOption$1 = (option) => typeof option === 'object' &&
|
|
4497
|
+
typeof option.title === 'string' &&
|
|
4498
|
+
option.value !== undefined;
|
|
4388
4499
|
/**
|
|
4389
4500
|
* Check if datalist options are well structured.
|
|
4390
4501
|
* @param options - Datalist options to check.
|
|
@@ -4461,7 +4572,8 @@ const MgInputText = class {
|
|
|
4461
4572
|
*/
|
|
4462
4573
|
this.validatePattern = () => {
|
|
4463
4574
|
if ((this.pattern !== undefined || this.patternErrorMessage !== undefined) && // At least one is defined
|
|
4464
|
-
(!index$1.isValidString(this.pattern) ||
|
|
4575
|
+
(!index$1.isValidString(this.pattern) ||
|
|
4576
|
+
(!helpTextTypes.includes(this.type) && !index$1.isValidString(this.patternErrorMessage))) // Both must be defined
|
|
4465
4577
|
) {
|
|
4466
4578
|
throw new Error(`<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${this.pattern}'" and "patternErrorMessage='${this.patternErrorMessage}'".`);
|
|
4467
4579
|
}
|
|
@@ -4534,7 +4646,7 @@ const MgInputText = class {
|
|
|
4534
4646
|
this.slotContent = slotAppendInput[0].textContent;
|
|
4535
4647
|
}
|
|
4536
4648
|
}
|
|
4537
|
-
else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
|
|
4649
|
+
else if (slotAppendInput.filter((slot) => slot.nodeName === 'MG-BUTTON').length > 1) {
|
|
4538
4650
|
this.classCollection.add(this.classIsInputGroupAppend);
|
|
4539
4651
|
this.classCollection.add(this.classHasButtonsGroupAppend);
|
|
4540
4652
|
}
|
|
@@ -4555,7 +4667,7 @@ const MgInputText = class {
|
|
|
4555
4667
|
handleValue(newValue) {
|
|
4556
4668
|
var _a, _b;
|
|
4557
4669
|
if ((_a = this.datalistoptions) === null || _a === void 0 ? void 0 : _a.every(isOption$1)) {
|
|
4558
|
-
this.valueChange.emit(((_b = this.datalistoptions.find(option => option.title === newValue)) === null || _b === void 0 ? void 0 : _b.value) || newValue);
|
|
4670
|
+
this.valueChange.emit(((_b = this.datalistoptions.find((option) => option.title === newValue)) === null || _b === void 0 ? void 0 : _b.value) || newValue);
|
|
4559
4671
|
}
|
|
4560
4672
|
else {
|
|
4561
4673
|
this.valueChange.emit(newValue);
|
|
@@ -4603,7 +4715,7 @@ const MgInputText = class {
|
|
|
4603
4715
|
}
|
|
4604
4716
|
watchMgWidth(newValue) {
|
|
4605
4717
|
// reset width class
|
|
4606
|
-
mgInput_conf.widths.forEach(width => {
|
|
4718
|
+
mgInput_conf.widths.forEach((width) => {
|
|
4607
4719
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
4608
4720
|
});
|
|
4609
4721
|
// apply new width
|
|
@@ -4643,7 +4755,7 @@ const MgInputText = class {
|
|
|
4643
4755
|
// - Async operations are completed
|
|
4644
4756
|
// - No timing issues with Stencil's render cycle
|
|
4645
4757
|
// - Keep everything in sync both inside and outside the component
|
|
4646
|
-
return new Promise(resolve => {
|
|
4758
|
+
return new Promise((resolve) => {
|
|
4647
4759
|
requestAnimationFrame(() => {
|
|
4648
4760
|
this.checkValidity();
|
|
4649
4761
|
this.setErrorMessage();
|
|
@@ -4690,7 +4802,7 @@ const MgInputText = class {
|
|
|
4690
4802
|
// - Async operations are completed
|
|
4691
4803
|
// - No timing issues with Stencil's render cycle
|
|
4692
4804
|
// - Keep everything in sync both inside and outside the component
|
|
4693
|
-
return new Promise(resolve => {
|
|
4805
|
+
return new Promise((resolve) => {
|
|
4694
4806
|
requestAnimationFrame(() => {
|
|
4695
4807
|
// unlock validity check by reseting customErrorMessage
|
|
4696
4808
|
this.customErrorMessage = { lock: false };
|
|
@@ -4752,15 +4864,17 @@ const MgInputText = class {
|
|
|
4752
4864
|
* @returns HTML Element
|
|
4753
4865
|
*/
|
|
4754
4866
|
render() {
|
|
4755
|
-
return (index.h("mg-input", { key: '
|
|
4867
|
+
return (index.h("mg-input", { key: '3454b5f94af7b47a2c94b1416f59f840552ef70a', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
|
|
4756
4868
|
? this.value && this.renderReadonly()
|
|
4757
4869
|
: [
|
|
4758
4870
|
index.h("div", { key: "input", class: "mg-c-input__input-group-container", style: {
|
|
4759
|
-
'--mg-c-character-left-message-length': (!this.characterLeftHide
|
|
4871
|
+
'--mg-c-character-left-message-length': (!this.characterLeftHide
|
|
4872
|
+
? this.maxlength.toString().length * 2 + 1
|
|
4873
|
+
: 0).toString(),
|
|
4760
4874
|
} }, this.icon !== undefined && index.h("mg-icon", { icon: this.icon }), index.h("input", { type: this.type === 'emails' ? 'email' : this.type, multiple: this.type === 'emails', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
4761
4875
|
if (el !== null)
|
|
4762
4876
|
this.input = el;
|
|
4763
|
-
} }), this.hasDatalist() && (index.h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (index.h("option", { value: isOption$1(option) ? option.title : option, key: option }))))), !this.characterLeftHide && this.maxlength > 0 && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))),
|
|
4877
|
+
} }), this.hasDatalist() && (index.h("datalist", { id: this.datalistId }, this.datalistoptions.map((option) => (index.h("option", { value: isOption$1(option) ? option.title : option, key: option }))))), !this.characterLeftHide && this.maxlength > 0 && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))),
|
|
4764
4878
|
index.h("slot", { key: "slot", name: "append-input" }),
|
|
4765
4879
|
]));
|
|
4766
4880
|
}
|
|
@@ -4810,7 +4924,7 @@ const MgInputText = class {
|
|
|
4810
4924
|
};
|
|
4811
4925
|
MgInputText.style = mgInputTextCss();
|
|
4812
4926
|
|
|
4813
|
-
const mgInputTextareaCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset
|
|
4927
|
+
const mgInputTextareaCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--display-character-left mg-character-left{position:absolute;display:none}.mg-c-input.mg-c-input--display-character-left mg-character-left>span{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--display-character-left input:focus~mg-character-left,.mg-c-input.mg-c-input--display-character-left textarea:focus~mg-character-left{display:block}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__input{align-items:start}.mg-c-input__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input.mg-c-input--readonly .mg-c-input__readonly-value{white-space:pre-line}.mg-c-input.mg-c-input--display-character-left .mg-c-input__box{padding-bottom:var(--mg-b-size-24)}.mg-c-input.mg-c-input--display-character-left mg-character-left{bottom:calc(var(--mg-c-input-border-width) + .1rem);left:calc(var(--mg-c-input-border-width) + .1rem);padding:calc(var(--mg-b-size-2) - var(--mg-c-input-border-width)) calc(var(--mg-b-size-4) - var(--mg-c-input-border-width));border:var(--mg-c-input-border-width) solid var(--mg-c-input-color-border);border-bottom-width:0;border-left-width:0;background:var(--mg-b-color-neutral-0);border-bottom-left-radius:var(--mg-c-input-border-radius);border-top-right-radius:var(--mg-c-input-border-radius)}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}`;
|
|
4814
4928
|
|
|
4815
4929
|
const MgInputTextarea = class {
|
|
4816
4930
|
constructor(hostRef) {
|
|
@@ -4957,7 +5071,7 @@ const MgInputTextarea = class {
|
|
|
4957
5071
|
}
|
|
4958
5072
|
watchMgWidth(newValue) {
|
|
4959
5073
|
// reset width class
|
|
4960
|
-
mgInput_conf.widths.forEach(width => {
|
|
5074
|
+
mgInput_conf.widths.forEach((width) => {
|
|
4961
5075
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
4962
5076
|
});
|
|
4963
5077
|
// apply new width
|
|
@@ -4994,7 +5108,7 @@ const MgInputTextarea = class {
|
|
|
4994
5108
|
// - Async operations are completed
|
|
4995
5109
|
// - No timing issues with Stencil's render cycle
|
|
4996
5110
|
// - Keep everything in sync both inside and outside the component
|
|
4997
|
-
return new Promise(resolve => {
|
|
5111
|
+
return new Promise((resolve) => {
|
|
4998
5112
|
requestAnimationFrame(() => {
|
|
4999
5113
|
this.checkValidity();
|
|
5000
5114
|
this.setErrorMessage();
|
|
@@ -5041,7 +5155,7 @@ const MgInputTextarea = class {
|
|
|
5041
5155
|
// - Async operations are completed
|
|
5042
5156
|
// - No timing issues with Stencil's render cycle
|
|
5043
5157
|
// - Keep everything in sync both inside and outside the component
|
|
5044
|
-
return new Promise(resolve => {
|
|
5158
|
+
return new Promise((resolve) => {
|
|
5045
5159
|
requestAnimationFrame(() => {
|
|
5046
5160
|
// unlock validity check by reseting customErrorMessage
|
|
5047
5161
|
this.customErrorMessage = { lock: false };
|
|
@@ -5098,7 +5212,7 @@ const MgInputTextarea = class {
|
|
|
5098
5212
|
* @returns HTML Element
|
|
5099
5213
|
*/
|
|
5100
5214
|
render() {
|
|
5101
|
-
return (index.h("mg-input", { key: '
|
|
5215
|
+
return (index.h("mg-input", { key: '36575f026a23722bb6d224aaeacf0e80d3e1bbfd', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && index.h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (index.h("div", { class: "mg-c-input__input-group-container" }, index.h("textarea", { class: {
|
|
5102
5216
|
'mg-c-input__box': true,
|
|
5103
5217
|
'mg-c-input__box--width': true,
|
|
5104
5218
|
'mg-c-input__box--resizable': this.resizable === 'both',
|
|
@@ -5186,7 +5300,7 @@ const MgInputTitle = class {
|
|
|
5186
5300
|
render() {
|
|
5187
5301
|
const TagName = this.readonly ? 'span' : this.tagName;
|
|
5188
5302
|
// \u00A0 represent a
|
|
5189
|
-
return (index.h(TagName, { key: '
|
|
5303
|
+
return (index.h(TagName, { key: 'a3b4b081eb6612ae8f94e687d6ee55e0a4fc8747', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, index.h("slot", { key: '849858a8fca06a38cb33da241c52d29ad2af559b' }), this.required && !this.readonly && (index.h("span", { key: '4b6a62fbe70f027a8123e512cfdaad5c37c8e94a', class: "mg-c-input-title__required" }, "\u00A0", index.h("span", { key: '520b037e53779a58bc013f40d16ab724da734315', class: "mg-u-is-asterisk" }, "*")))));
|
|
5190
5304
|
}
|
|
5191
5305
|
get element() { return index.getElement(this); }
|
|
5192
5306
|
static get watchers() { return {
|
|
@@ -5200,7 +5314,7 @@ const MgInputTitle = class {
|
|
|
5200
5314
|
};
|
|
5201
5315
|
MgInputTitle.style = mgInputTitleCss();
|
|
5202
5316
|
|
|
5203
|
-
const mgInputToggleCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
5317
|
+
const mgInputToggleCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.1rem var(--mg-b-size-8);border-width:var(--mg-b-size-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));color:var(--mg-b-color-neutral-110);font-weight:unset;line-height:var(--mg-b-size-16);text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{border-style:solid;border-color:var(--mg-b-color-neutral-80);background-color:var(--mg-b-color-light);font-weight:600}.mg-c-input__button-toggle{display:flex;overflow:hidden;min-width:0;align-items:center;padding:.1rem;border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-b-color-neutral-80);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-neutral-20);cursor:pointer;font-family:var(--mg-b-font-family);font-size:var(--mg-b-small-font-size);line-height:var(--mg-b-size-12)}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input__button-toggle:focus{outline-offset:var(--mg-b-size-4)}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__button-toggle{border-color:var(--mg-b-color-neutral-110);background-color:var(--mg-b-color-neutral-110)}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{border:unset;background-color:unset;color:var(--mg-b-color-light);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{border-style:solid;border-color:var(--mg-b-color-light);background-color:var(--mg-b-color-light);font-weight:600}.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly) .mg-c-input__button-toggle,.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly).mg-c-input--label-on-top .mg-c-input__button-toggle{margin-top:var(--mg-b-size-4)}@media screen and (min-width: 768px){.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly) .mg-c-input__button-toggle{margin-top:calc((var(--mg-b-size-min-height) - (var(--mg-b-size-20) + var(--mg-b-size-4)) + .1rem)/2)}}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__button-toggle{width:100%;min-width:calc(var(--mg-b-size-20)*2);max-width:calc(var(--mg-b-size-20)*2)}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;overflow:unset;min-width:var(--mg-b-size-20);max-width:var(--mg-b-size-20);height:var(--mg-b-size-20);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:last-of-type{width:unset}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{min-width:unset;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{margin-left:auto;visibility:visible}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type ::slotted(*){display:none}`;
|
|
5204
5318
|
|
|
5205
5319
|
/**
|
|
5206
5320
|
* type Option validation function
|
|
@@ -5296,10 +5410,10 @@ const MgInputToggle = class {
|
|
|
5296
5410
|
if (!this.isIcon) {
|
|
5297
5411
|
// Due to text-overflow set to ellipsis
|
|
5298
5412
|
// we need to ensure that slot element have title to display value on mouse over
|
|
5299
|
-
slots.forEach(slot => slot.setAttribute('title', slot.textContent));
|
|
5413
|
+
slots.forEach((slot) => slot.setAttribute('title', slot.textContent));
|
|
5300
5414
|
}
|
|
5301
5415
|
else {
|
|
5302
|
-
slots.forEach(slot => {
|
|
5416
|
+
slots.forEach((slot) => {
|
|
5303
5417
|
if (slot.nodeName === 'MG-ICON') {
|
|
5304
5418
|
slot.size = 'small';
|
|
5305
5419
|
}
|
|
@@ -5312,7 +5426,7 @@ const MgInputToggle = class {
|
|
|
5312
5426
|
* @returns toggle value
|
|
5313
5427
|
*/
|
|
5314
5428
|
this.getCurrentOptionIndex = (value) => {
|
|
5315
|
-
return this.options.findIndex(option => index$1.toString(option.value) === index$1.toString(value)) === 1 ? 1 : 0;
|
|
5429
|
+
return this.options.findIndex((option) => index$1.toString(option.value) === index$1.toString(value)) === 1 ? 1 : 0;
|
|
5316
5430
|
};
|
|
5317
5431
|
/**
|
|
5318
5432
|
* Check if value is checked
|
|
@@ -5336,7 +5450,8 @@ const MgInputToggle = class {
|
|
|
5336
5450
|
// However, depending on the integration context (e.g., Vue.js), they may also be interpreted as string attributes.
|
|
5337
5451
|
// To avoid incorrect type interpretation when a boolean is received as a string,
|
|
5338
5452
|
// we normalize the value and convert it to a proper boolean before internal use.
|
|
5339
|
-
else if (['true', 'false'].includes(newValue) &&
|
|
5453
|
+
else if (['true', 'false'].includes(newValue) &&
|
|
5454
|
+
this.options.every((option) => typeof option.value === 'boolean')) {
|
|
5340
5455
|
this.value = newValue === 'true';
|
|
5341
5456
|
// Return early to prevent infinite loop
|
|
5342
5457
|
return;
|
|
@@ -5361,7 +5476,7 @@ const MgInputToggle = class {
|
|
|
5361
5476
|
}
|
|
5362
5477
|
// String array
|
|
5363
5478
|
else if (index$1.allItemsAreString(newValue)) {
|
|
5364
|
-
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
5479
|
+
this.options = newValue.map((item) => ({ title: item, value: item }));
|
|
5365
5480
|
}
|
|
5366
5481
|
// Object array
|
|
5367
5482
|
else if (Array.isArray(newValue) && newValue.every(isOption)) {
|
|
@@ -5441,7 +5556,7 @@ const MgInputToggle = class {
|
|
|
5441
5556
|
// - Async operations are completed
|
|
5442
5557
|
// - No timing issues with Stencil's render cycle
|
|
5443
5558
|
// - Keep everything in sync both inside and outside the component
|
|
5444
|
-
return new Promise(resolve => {
|
|
5559
|
+
return new Promise((resolve) => {
|
|
5445
5560
|
requestAnimationFrame(() => {
|
|
5446
5561
|
this.errorMessage = undefined;
|
|
5447
5562
|
resolve();
|
|
@@ -5471,7 +5586,7 @@ const MgInputToggle = class {
|
|
|
5471
5586
|
*/
|
|
5472
5587
|
render() {
|
|
5473
5588
|
const currentOption = this.options[this.getCurrentOptionIndex(this.value)];
|
|
5474
|
-
return (index.h("mg-input", { key: '
|
|
5589
|
+
return (index.h("mg-input", { key: '5402a263042d7c4265d0dae810df6be6ae8d3f2a', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (currentOption && index.h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (index.h("button", { type: "button", role: "switch", "aria-checked": this.isChecked(this.value).toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.handleSwitchButton, ref: (el) => {
|
|
5475
5590
|
if (el !== null)
|
|
5476
5591
|
this.button = el;
|
|
5477
5592
|
} }, index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-1" })), index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-2" }))))));
|
|
@@ -5562,13 +5677,13 @@ class OverflowBehavior {
|
|
|
5562
5677
|
throw new Error('OverflowBehavior - all constructor params are required');
|
|
5563
5678
|
}
|
|
5564
5679
|
const items = Array.from(this.parentElement.children);
|
|
5565
|
-
this._resizeObserver = new ResizeObserver(entries => {
|
|
5680
|
+
this._resizeObserver = new ResizeObserver((entries) => {
|
|
5566
5681
|
this._availableWidth = entries
|
|
5567
|
-
.map(entry => entry.contentRect.width)
|
|
5682
|
+
.map((entry) => entry.contentRect.width)
|
|
5568
5683
|
.sort((a, b) => a - b)
|
|
5569
5684
|
.shift();
|
|
5570
5685
|
// reset items
|
|
5571
|
-
items.forEach(item => this.toggleItem(item, false));
|
|
5686
|
+
items.forEach((item) => this.toggleItem(item, false));
|
|
5572
5687
|
let accWidth = 0;
|
|
5573
5688
|
items.forEach((item, index) => {
|
|
5574
5689
|
accWidth += item.offsetWidth;
|
|
@@ -5580,7 +5695,7 @@ class OverflowBehavior {
|
|
|
5580
5695
|
}
|
|
5581
5696
|
}
|
|
5582
5697
|
|
|
5583
|
-
const mgItemMoreCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
5698
|
+
const mgItemMoreCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host:not([hidden]){display:flex}`;
|
|
5584
5699
|
|
|
5585
5700
|
const MgItemMore = class {
|
|
5586
5701
|
constructor(hostRef) {
|
|
@@ -5652,7 +5767,7 @@ const MgItemMore = class {
|
|
|
5652
5767
|
*/
|
|
5653
5768
|
render() {
|
|
5654
5769
|
const menuItemIdentifier = 'mg-item-more';
|
|
5655
|
-
return (index.h(index.Host, { key: '
|
|
5770
|
+
return (index.h(index.Host, { key: '54d11a95e5edc3a45e98541ffc827264e40bc5ec', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (index.h("mg-menu-item", { key: '636e1c03e907071e72766b7ee359f3f93d3df6ae', "data-overflow-more": true, "data-style-direction": directions$2.HORIZONTAL, identifier: menuItemIdentifier, isIcon: !this.slotlabel.display }, index.h("mg-icon", { key: 'e751b58f50a3625f6e23b5993a50f8d0c2fb4660', icon: this.icon.icon, slot: "image" }), index.h("span", { key: 'bc429c525afced68fb5a7668cad3741699216b97', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { key: '05760816f84ef6b6c5d18d058a110b6ec2d182e3', direction: directions$2.VERTICAL, label: this.messages.menuLabel, ref: (ref) => {
|
|
5656
5771
|
if (ref !== null)
|
|
5657
5772
|
this.itemMoreContainer = ref;
|
|
5658
5773
|
} })))));
|
|
@@ -5669,7 +5784,7 @@ const MgItemMore = class {
|
|
|
5669
5784
|
};
|
|
5670
5785
|
MgItemMore.style = mgItemMoreCss();
|
|
5671
5786
|
|
|
5672
|
-
const mgMenuCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
5787
|
+
const mgMenuCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:inline-flex;width:100%;min-width:0;background-color:var(--mg-c-menu-color-background, var(--mg-b-color-light))}:host([direction=vertical]){display:flex;height:100%;flex-direction:column;gap:var(--mg-b-size-2);overflow-y:auto}`;
|
|
5673
5788
|
|
|
5674
5789
|
const MgMenu = class {
|
|
5675
5790
|
constructor(hostRef) {
|
|
@@ -5696,7 +5811,7 @@ const MgMenu = class {
|
|
|
5696
5811
|
*/
|
|
5697
5812
|
this.getMenuItems = (menu = this.element) => {
|
|
5698
5813
|
var _a, _b;
|
|
5699
|
-
const menuItems = Array.from(menu.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
|
|
5814
|
+
const menuItems = Array.from(menu.children).filter((child) => child.nodeName === 'MG-MENU-ITEM');
|
|
5700
5815
|
const itemMoreMenuItem = (_b = (_a = menu.querySelector('mg-item-more')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item');
|
|
5701
5816
|
if (itemMoreMenuItem !== null && itemMoreMenuItem !== undefined) {
|
|
5702
5817
|
menuItems.push(itemMoreMenuItem);
|
|
@@ -5707,7 +5822,7 @@ const MgMenu = class {
|
|
|
5707
5822
|
* Update menu items
|
|
5708
5823
|
*/
|
|
5709
5824
|
this.updateMenuItems = () => {
|
|
5710
|
-
this.getMenuItems().forEach(item => {
|
|
5825
|
+
this.getMenuItems().forEach((item) => {
|
|
5711
5826
|
item.dataset.styleDirection = this.direction;
|
|
5712
5827
|
});
|
|
5713
5828
|
// render mg-item-more to manage OverflowBehavior
|
|
@@ -5717,7 +5832,9 @@ const MgMenu = class {
|
|
|
5717
5832
|
* render mg-item-more
|
|
5718
5833
|
*/
|
|
5719
5834
|
this.renderMgItemMore = () => {
|
|
5720
|
-
if (this.direction === directions$
|
|
5835
|
+
if (this.direction === directions$2.VERTICAL ||
|
|
5836
|
+
(this.direction === directions$2.HORIZONTAL && this.isChildMenu()) ||
|
|
5837
|
+
this.element.children.length <= 1) {
|
|
5721
5838
|
return;
|
|
5722
5839
|
}
|
|
5723
5840
|
// Insert mg-item-more outside the mg-menu shadowdom
|
|
@@ -5738,16 +5855,16 @@ const MgMenu = class {
|
|
|
5738
5855
|
}
|
|
5739
5856
|
}
|
|
5740
5857
|
validateDirection(newValue) {
|
|
5741
|
-
if (![directions$
|
|
5742
|
-
throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$
|
|
5858
|
+
if (![directions$2.VERTICAL, directions$2.HORIZONTAL].includes(newValue)) {
|
|
5859
|
+
throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$2.HORIZONTAL}, ${directions$2.VERTICAL}. Passed value: ${index$1.toString(newValue)}.`);
|
|
5743
5860
|
}
|
|
5744
5861
|
else {
|
|
5745
5862
|
this.updateMenuItems();
|
|
5746
5863
|
}
|
|
5747
5864
|
}
|
|
5748
5865
|
validateItemMore(newValue) {
|
|
5749
|
-
if (newValue !== undefined && this.direction !== directions$
|
|
5750
|
-
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${directions$
|
|
5866
|
+
if (newValue !== undefined && this.direction !== directions$2.HORIZONTAL) {
|
|
5867
|
+
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${directions$2.HORIZONTAL}.`);
|
|
5751
5868
|
}
|
|
5752
5869
|
else if (newValue !== undefined) {
|
|
5753
5870
|
this.renderMgItemMore();
|
|
@@ -5763,7 +5880,7 @@ const MgMenu = class {
|
|
|
5763
5880
|
return;
|
|
5764
5881
|
}
|
|
5765
5882
|
const itemToWatch = event.target.nodeName === 'MG-ITEM-MORE' ? event.target.shadowRoot.querySelector('mg-menu-item') : event.target;
|
|
5766
|
-
['click', 'focus'].forEach(trigger => {
|
|
5883
|
+
['click', 'focus'].forEach((trigger) => {
|
|
5767
5884
|
itemToWatch.addEventListener(trigger, () => {
|
|
5768
5885
|
const focusedItem = event.target.closest('mg-menu').querySelector('[data-has-focus]');
|
|
5769
5886
|
// exit process if new focused item in the current menu children
|
|
@@ -5795,7 +5912,7 @@ const MgMenu = class {
|
|
|
5795
5912
|
// set menu-items
|
|
5796
5913
|
this.updateMenuItems();
|
|
5797
5914
|
// add listener to close main menu when focus leave it
|
|
5798
|
-
if (!this.isChildMenu() && this.direction === directions$
|
|
5915
|
+
if (!this.isChildMenu() && this.direction === directions$2.HORIZONTAL) {
|
|
5799
5916
|
document.addEventListener('focusin', (event) => {
|
|
5800
5917
|
const isElementChild = (element) => {
|
|
5801
5918
|
if (element === this.element)
|
|
@@ -5821,7 +5938,7 @@ const MgMenu = class {
|
|
|
5821
5938
|
* @returns HTML Element
|
|
5822
5939
|
*/
|
|
5823
5940
|
render() {
|
|
5824
|
-
return (index.h(index.Host, { key: '
|
|
5941
|
+
return (index.h(index.Host, { key: '967fc6e01207c5831b7821ccb17db8406cabc262', role: "list", "aria-label": this.label }, index.h("slot", { key: '9699944cbe1b25434c3ddc6235dae7676b7acb6b' })));
|
|
5825
5942
|
}
|
|
5826
5943
|
get element() { return index.getElement(this); }
|
|
5827
5944
|
static get watchers() { return {
|
|
@@ -5838,7 +5955,7 @@ const MgMenu = class {
|
|
|
5838
5955
|
};
|
|
5839
5956
|
MgMenu.style = mgMenuCss();
|
|
5840
5957
|
|
|
5841
|
-
const mgMenuItemCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
5958
|
+
const mgMenuItemCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host([data-style-direction=vertical][data-level="1"]) .mg-c-menu-item__navigation-button{padding-left:calc(1*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="1"]) .mg-c-menu-item__collapse-container{z-index:10}:host([data-style-direction=vertical][data-level="2"]) .mg-c-menu-item__navigation-button{padding-left:calc(2*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="2"]) .mg-c-menu-item__collapse-container{z-index:20}:host([data-style-direction=vertical][data-level="3"]) .mg-c-menu-item__navigation-button{padding-left:calc(3*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="3"]) .mg-c-menu-item__collapse-container{z-index:30}:host([data-style-direction=vertical][data-level="4"]) .mg-c-menu-item__navigation-button{padding-left:calc(4*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="4"]) .mg-c-menu-item__collapse-container{z-index:40}:host([data-style-direction=vertical][data-level="5"]) .mg-c-menu-item__navigation-button{padding-left:calc(5*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="5"]) .mg-c-menu-item__collapse-container{z-index:50}:host([data-style-direction=vertical][data-level="6"]) .mg-c-menu-item__navigation-button{padding-left:calc(6*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="6"]) .mg-c-menu-item__collapse-container{z-index:60}.mg-c-menu-item__navigation-button{position:relative;display:flex;height:calc(var(--mg-c-menu-item-button-spacing-vertical)*2 + var(--mg-c-menu-item-height));box-sizing:border-box;align-items:center;padding:var(--mg-c-menu-item-button-spacing-vertical) calc(var(--mg-c-menu-item-button-margin-horizontal) + var(--mg-c-menu-item-button-padding-horizontal)) var(--mg-c-menu-item-button-spacing-vertical) calc(var(--mg-c-menu-item-button-margin-horizontal) + var(--mg-c-menu-item-button-padding-horizontal));border:none;border-radius:var(--mg-b-size-8);background-color:unset;color:var(--mg-c-menu-item-color-text, var(--mg-b-color-dark));column-gap:var(--mg-b-size-8);cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button::after{position:absolute;background-color:var(--mg-c-menu-item-color);content:""}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-menu-item__navigation-button:hover,.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled)::before,.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled)::before{position:absolute;z-index:-1;top:0;left:0;width:stretch;height:var(--mg-c-menu-item-height);box-sizing:border-box;border-radius:var(--mg-b-size-8);margin-right:var(--mg-c-menu-item-button-margin-horizontal);margin-left:var(--mg-c-menu-item-button-margin-horizontal);background-color:color-mix(in srgb, var(--mg-c-menu-item-color-text, var(--mg-b-color-dark)), transparent 90%);content:""}.mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item__navigation-button ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-menu-item__navigation-button:not(.mg-c-menu-item__navigation-button--disabled).mg-c-menu-item__navigation-button--horizontal::before{margin:var(--mg-c-menu-item-button-spacing-vertical) var(--mg-c-menu-item-button-margin-horizontal)}.mg-c-menu-item__navigation-button:not(.mg-c-menu-item__navigation-button--disabled).mg-c-menu-item__navigation-button--vertical::before{height:100%;margin:0 var(--mg-c-menu-item-button-margin-horizontal)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:var(--mg-c-menu-item-color);font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal::after{bottom:0;left:50%;width:calc(100% - var(--mg-b-size-12)*2);height:var(--mg-b-size-4);border-top-left-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateX(-50%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical::after{top:50%;left:0;width:var(--mg-b-size-4);height:calc(100% - var(--mg-b-size-8)*2);border-bottom-right-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateY(-50%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item{max-width:var(--mg-c-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-new-tab{margin-left:var(--mg-b-size-4)}.mg-c-menu-item__navigation-button-chevron{display:var(--mg-c-menu-item-chevron-display);margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:var(--mg-b-size-8);font-size:var(--mg-b-font-size)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--is-icon{min-width:calc(var(--mg-c-menu-item-height) + var(--mg-c-menu-item-button-margin-horizontal)*2);justify-content:center;padding:var(--mg-b-size-2);gap:var(--mg-b-size-4)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--is-icon::before{min-width:var(--mg-c-menu-item-height)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--is-icon .mg-c-menu-item__navigation-button-text-content-notification{margin-left:0}:host{position:relative;display:flex;--mg-c-popover-spacing-vertical:0;--mg-c-popover-spacing-horizontal:0;--mg-c-popover-max-width:unset;--mg-c-menu-item-height:var(--mg-b-size-40)}:host mg-popover{--mg-c-popover-overflow:hidden}:host mg-popover-content[data-popper-placement^=bottom][data-arrow-hide]{margin-top:var(--mg-b-size-2) !important}:host([data-style-direction=vertical]){--mg-c-menu-item-height:var(--mg-b-size-24);--mg-c-menu-item-button-margin-horizontal:var(--mg-b-size-8);--mg-c-menu-item-button-padding-horizontal:var(--mg-b-size-12);--mg-c-menu-item-button-spacing-vertical:var(--mg-b-size-8);flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction=vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-style-direction=horizontal]){--mg-c-menu-item-button-margin-horizontal:var(--mg-b-size-4);--mg-c-menu-item-button-padding-horizontal:var(--mg-b-size-12);--mg-c-menu-item-button-spacing-vertical:var(--mg-b-size-12)}:host([data-style-direction=horizontal]) ::slotted(mg-menu),.mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:var(--mg-b-size-8) 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted([slot=metadata]){color:var(--mg-b-color-neutral-90)}::slotted(*){display:flex;flex-direction:column}::slotted([slot=image]){width:auto !important;max-width:calc(var(--mg-c-menu-item-height) - var(--mg-b-size-8)) !important;height:auto !important;max-height:calc(var(--mg-c-menu-item-height) - var(--mg-b-size-8)) !important}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}`;
|
|
5842
5959
|
|
|
5843
5960
|
const MgMenuItem = class {
|
|
5844
5961
|
constructor(hostRef) {
|
|
@@ -5899,8 +6016,10 @@ const MgMenuItem = class {
|
|
|
5899
6016
|
* Condition to know if component should display a mg-popover
|
|
5900
6017
|
* @returns truthy if component display popover
|
|
5901
6018
|
*/
|
|
5902
|
-
this.hasPopover = () => this.isDirection(directions$
|
|
5903
|
-
((this.isInMainMenu() &&
|
|
6019
|
+
this.hasPopover = () => this.isDirection(directions$2.HORIZONTAL) &&
|
|
6020
|
+
((this.isInMainMenu() &&
|
|
6021
|
+
Array.from(this.element.children).some((element) => element.querySelector('[slot]') === null)) ||
|
|
6022
|
+
this.isItemMore) &&
|
|
5904
6023
|
this.href === undefined;
|
|
5905
6024
|
/**
|
|
5906
6025
|
* Method to control if one of component children have active status
|
|
@@ -5934,7 +6053,8 @@ const MgMenuItem = class {
|
|
|
5934
6053
|
this.updateDisplayNotificationBadge = () => {
|
|
5935
6054
|
const childMenu = this.element.querySelector('mg-menu');
|
|
5936
6055
|
this.displayNotificationBadge =
|
|
5937
|
-
childMenu !== null &&
|
|
6056
|
+
childMenu !== null &&
|
|
6057
|
+
Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && !subItem.hasAttribute('hidden'));
|
|
5938
6058
|
};
|
|
5939
6059
|
/**
|
|
5940
6060
|
* Update expanded prop
|
|
@@ -5943,7 +6063,7 @@ const MgMenuItem = class {
|
|
|
5943
6063
|
this.updateExpanded = (newValue) => {
|
|
5944
6064
|
if (this.isInteractiveItem()) {
|
|
5945
6065
|
// item is always expanded in vertical menu when has active child
|
|
5946
|
-
this.expanded = (this.isDirection(directions$
|
|
6066
|
+
this.expanded = (this.isDirection(directions$2.VERTICAL) && this.hasActiveChild()) || newValue;
|
|
5947
6067
|
}
|
|
5948
6068
|
};
|
|
5949
6069
|
/**
|
|
@@ -5962,11 +6082,11 @@ const MgMenuItem = class {
|
|
|
5962
6082
|
this.updateSlot = (guard = false) => {
|
|
5963
6083
|
// slot title AND metadata validation
|
|
5964
6084
|
// add title on label AND metada slots due to text-overflow on these element
|
|
5965
|
-
if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) {
|
|
6085
|
+
if (Array.from(this.element.children).find((child) => child.getAttribute('slot') === 'label') === undefined) {
|
|
5966
6086
|
throw new Error(`<${this.name}> slot "label" is required.`);
|
|
5967
6087
|
}
|
|
5968
|
-
['label', 'metadata'].forEach(slot => {
|
|
5969
|
-
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
|
|
6088
|
+
['label', 'metadata'].forEach((slot) => {
|
|
6089
|
+
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach((element) => {
|
|
5970
6090
|
if (!index$1.isValidString(element.textContent))
|
|
5971
6091
|
throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
|
|
5972
6092
|
if ((guard && !element.hasAttribute('title')) || !guard)
|
|
@@ -6064,7 +6184,7 @@ const MgMenuItem = class {
|
|
|
6064
6184
|
else {
|
|
6065
6185
|
this.updateExpanded(newValue);
|
|
6066
6186
|
// when expanded all actives sub-items need to be expanded and non active closed
|
|
6067
|
-
Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
|
|
6187
|
+
Array.from(this.element.querySelectorAll('mg-menu-item')).forEach((item) => {
|
|
6068
6188
|
if (item !== this.element)
|
|
6069
6189
|
item.expanded = newValue ? this.hasStatus(item, Status$1.ACTIVE) : false;
|
|
6070
6190
|
});
|
|
@@ -6075,8 +6195,8 @@ const MgMenuItem = class {
|
|
|
6075
6195
|
this.classNavigationButtonClassList.delete(`${this.classNavigationButton}--${oldValue}`);
|
|
6076
6196
|
this.classNavigationButtonClassList.add(`${this.classNavigationButton}--${newValue}`);
|
|
6077
6197
|
// manage all sub levels child menu-items level with data-level attribut
|
|
6078
|
-
Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
|
|
6079
|
-
if (this.isDirection(directions$
|
|
6198
|
+
Array.from(this.element.querySelectorAll('mg-menu-item')).forEach((item) => {
|
|
6199
|
+
if (this.isDirection(directions$2.VERTICAL, newValue)) {
|
|
6080
6200
|
item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
|
|
6081
6201
|
}
|
|
6082
6202
|
else {
|
|
@@ -6093,7 +6213,6 @@ const MgMenuItem = class {
|
|
|
6093
6213
|
* direction value in dataset
|
|
6094
6214
|
* @param newValue - new direction value
|
|
6095
6215
|
*/
|
|
6096
|
-
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
6097
6216
|
watchDataStyleDirection(newValue) {
|
|
6098
6217
|
this.direction = newValue;
|
|
6099
6218
|
this.watchIsIcon(this.isIcon);
|
|
@@ -6102,7 +6221,6 @@ const MgMenuItem = class {
|
|
|
6102
6221
|
* has focus value in dataset
|
|
6103
6222
|
* @param newValue - new direction value
|
|
6104
6223
|
*/
|
|
6105
|
-
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
6106
6224
|
watchDataHasFocus(newValue) {
|
|
6107
6225
|
if (!index$1.isValidString(newValue))
|
|
6108
6226
|
this.updateExpanded(Boolean(newValue));
|
|
@@ -6129,7 +6247,7 @@ const MgMenuItem = class {
|
|
|
6129
6247
|
mgInput_conf.normalizeBooleanAttributes(this);
|
|
6130
6248
|
// has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
|
|
6131
6249
|
// we store only matching elements
|
|
6132
|
-
this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
|
|
6250
|
+
this.hasChildren = Array.from(this.element.children).some((child) => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
|
|
6133
6251
|
this.messages = index$2.initLocales(this.element).messages.menuItem;
|
|
6134
6252
|
this.isItemMore = this.element.dataset.overflowMore !== undefined;
|
|
6135
6253
|
// watchers
|
|
@@ -6154,12 +6272,12 @@ const MgMenuItem = class {
|
|
|
6154
6272
|
this.updateItem([Status$1.ACTIVE]);
|
|
6155
6273
|
// emit loaded event when component is fully loaded
|
|
6156
6274
|
this.itemLoaded.emit();
|
|
6157
|
-
new MutationObserver(mutationsList => {
|
|
6158
|
-
if (mutationsList.some(mutation => ['hidden', 'status'].includes(mutation.attributeName)))
|
|
6275
|
+
new MutationObserver((mutationsList) => {
|
|
6276
|
+
if (mutationsList.some((mutation) => ['hidden', 'status'].includes(mutation.attributeName)))
|
|
6159
6277
|
this.updateStatus(this.hasChildren ? undefined : [Status$1.ACTIVE]);
|
|
6160
|
-
if (mutationsList.some(mutation => mutation.type === 'characterData'))
|
|
6278
|
+
if (mutationsList.some((mutation) => mutation.type === 'characterData'))
|
|
6161
6279
|
this.updateSlot();
|
|
6162
|
-
if (mutationsList.some(mutation => mutation.type === 'childList'))
|
|
6280
|
+
if (mutationsList.some((mutation) => mutation.type === 'childList'))
|
|
6163
6281
|
this.updateItem();
|
|
6164
6282
|
this.itemUpdated.emit();
|
|
6165
6283
|
}).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
|
|
@@ -6202,9 +6320,9 @@ const MgMenuItem = class {
|
|
|
6202
6320
|
render() {
|
|
6203
6321
|
const getContainerClasses = () => ({
|
|
6204
6322
|
['mg-c-menu-item__collapse-container']: true,
|
|
6205
|
-
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions$
|
|
6323
|
+
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions$2.HORIZONTAL),
|
|
6206
6324
|
});
|
|
6207
|
-
return (index.h(index.Host, { key: '
|
|
6325
|
+
return (index.h(index.Host, { key: '68705299d83c64af9e915a6e4d471e78ed6d92ab', role: this.isItemMore ? 'presentation' : 'listitem' }, this.hasPopover() ? (index.h("mg-popover", { display: this.expanded, placement: "bottom-start", "onDisplay-change": this.handlePopoverDisplay, identifier: this.popoverIdentifier, "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
|
|
6208
6326
|
}, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
|
|
6209
6327
|
this.renderInteractiveElement(),
|
|
6210
6328
|
index.h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
|
|
@@ -6252,7 +6370,7 @@ const variants$1 = ['info', 'warning', 'success', 'danger'];
|
|
|
6252
6370
|
*/
|
|
6253
6371
|
const variantStyles = ['bar-left', 'background'];
|
|
6254
6372
|
|
|
6255
|
-
const mgMessageCss = () => `:host{--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-message-border-radius);--mg-c-card-border:none;--mg-c-card-overflow:hidden}.mg-c-message{display:inline-block;min-block-size:var(--mg-b-size-min-height)}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--bar-left .mg-c-
|
|
6373
|
+
const mgMessageCss = () => `:host{--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-message-border-radius);--mg-c-card-border:none;--mg-c-card-overflow:hidden}.mg-c-message{display:inline-block;min-block-size:var(--mg-b-size-min-height)}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--bar-left .mg-c-message__content{border-inline-start:var(--mg-b-size-4) solid var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-message.mg-c-message--info .mg-c-message__icon{color:var(--mg-b-color-info)}.mg-c-message.mg-c-message--info.mg-c-message--bar-left .mg-c-message__content{border-inline-start:var(--mg-b-size-4) solid var(--mg-b-color-info)}.mg-c-message.mg-c-message--info.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-message.mg-c-message--success .mg-c-message__icon{color:var(--mg-b-color-success)}.mg-c-message.mg-c-message--success.mg-c-message--bar-left .mg-c-message__content{border-inline-start:var(--mg-b-size-4) solid var(--mg-b-color-success)}.mg-c-message.mg-c-message--success.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-message.mg-c-message--warning .mg-c-message__icon{color:var(--mg-b-color-warning)}.mg-c-message.mg-c-message--warning.mg-c-message--bar-left .mg-c-message__content{border-inline-start:var(--mg-b-size-4) solid var(--mg-b-color-warning)}.mg-c-message.mg-c-message--warning.mg-c-message--background{--mg-c-card-color-background:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-message.mg-c-message--background{--mg-c-card-border-radius:var(--mg-b-size-8)}.mg-c-message ::slotted(*){padding:0;margin:0}.mg-c-message__icon{position:absolute;inset-block-start:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);inset-inline-start:var(--mg-b-size-8);line-height:1}.mg-c-message.mg-c-message--bar-left .mg-c-message__icon{inset-inline-start:calc(var(--mg-b-size-4) + var(--mg-b-size-8))}.mg-c-message__content{display:flex;box-sizing:border-box;flex-wrap:wrap;padding-block:0;padding-inline:calc(var(--mg-b-size-8) + var(--mg-b-size-16) + var(--mg-b-size-8)) var(--mg-b-size-8);place-content:stretch flex-end}.mg-c-message__content-slot{flex-grow:1;margin:var(--mg-b-size-8) 0}.mg-c-message__content-separator{display:inline-block;block-size:0;inline-size:var(--mg-b-size-40)}.mg-c-message__content-actions-slot{padding:var(--mg-b-size-8) 0;text-align:end}.mg-c-message ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}.mg-c-message,.mg-c-message mg-message{max-inline-size:100%}.mg-c-message.mg-c-message--full-width{display:block;inline-size:100%}`;
|
|
6256
6374
|
|
|
6257
6375
|
const MgMessage = class {
|
|
6258
6376
|
constructor(hostRef) {
|
|
@@ -6348,9 +6466,9 @@ const MgMessage = class {
|
|
|
6348
6466
|
* @returns HTML Element
|
|
6349
6467
|
*/
|
|
6350
6468
|
render() {
|
|
6351
|
-
return (index.h("div", { key: '
|
|
6469
|
+
return (index.h("div", { key: 'a182451917bfe33de32c893d9eeedd52b11f8b15', class: this.classCollection.join() }, index.h("mg-card", { key: '9dd0da031d97f669e885a1681b72e5a086e79c0b', shadow: this.variantStyle !== 'background' }, index.h("span", { key: '158c2470a10ab9d677e2031c28ad0d43c09e4cf2', class: "mg-c-message__icon" }, index.h("mg-icon", { key: 'f7d0cb02781d2bf5a71fbd7f9498ebf4dca31edf', icon: this.getIcon() })), index.h("div", { key: '56a7299983c30ea4527bb19a46ac0677b6e8c40e', class: "mg-c-message__content" }, index.h("span", { key: '744ad763177f92bdbac37d43a5a58f221ff97e69', class: "mg-c-message__content-slot" }, index.h("slot", { key: '14b7f22e206bd074336287809574b2a5abfe5bf5' })), this.hasActions && [
|
|
6352
6470
|
index.h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
|
|
6353
|
-
index.h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, index.h("slot", { key: '
|
|
6471
|
+
index.h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, index.h("slot", { key: '104be326f73ded002cba9a471491ca614227e3d5', name: "actions" })),
|
|
6354
6472
|
]))));
|
|
6355
6473
|
}
|
|
6356
6474
|
get element() { return index.getElement(this); }
|
|
@@ -6479,11 +6597,11 @@ const MgModal = class {
|
|
|
6479
6597
|
* @returns HTML Element
|
|
6480
6598
|
*/
|
|
6481
6599
|
render() {
|
|
6482
|
-
return (index.h("dialog", { key: '
|
|
6600
|
+
return (index.h("dialog", { key: '3b802b99d96be80d8071c89be6537269866e6fff', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
|
|
6483
6601
|
if (el !== null) {
|
|
6484
6602
|
this.dialog = el;
|
|
6485
6603
|
}
|
|
6486
|
-
} }, index.h("mg-card", { key: '
|
|
6604
|
+
} }, index.h("mg-card", { key: '4985b4af69968577ffd36a6a2b1f96274703d146', shadow: true }, index.h("div", { key: 'c4aed6d29dc5ee00f323dcbaecff9532f370ec98', class: "mg-c-modal__dialog" }, index.h("header", { key: '3bfeb66d59144c0cba3fd82c1fb4dee2ed62cea7', class: "mg-c-modal__header" }, this.closeButton && (index.h("span", { key: '55205da6c8991444ff53da7224b28c7475b0e173', class: "mg-c-modal__close-button" }, index.h("mg-button", { key: 'da7fdea3a124a559cb637beea9d5565c1f777eea', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, index.h("mg-icon", { key: '77c2ab2bcacdda9fa179b480651507a1d6584686', icon: "cross" })))), index.h("h1", { key: 'cedb5efc709de2d18e81409139da790349a48bb8', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), index.h("article", { key: '7f24e65244836c08dbf7465f8c80970080003bcd', class: "mg-c-modal__content" }, index.h("slot", { key: '36d7c2a0ef1bb1024887da08298391962285bbf8' })), this.hasActions && (index.h("footer", { key: '5967d650e4e58726641a3c960d82aa7ee588e38f', class: "mg-c-modal__footer" }, index.h("slot", { key: 'c275b8235acb658ded3db7c69b931000a5ff14d2', name: "actions" })))))));
|
|
6487
6605
|
}
|
|
6488
6606
|
get element() { return index.getElement(this); }
|
|
6489
6607
|
static get watchers() { return {
|
|
@@ -6508,7 +6626,7 @@ const NavigationAction = {
|
|
|
6508
6626
|
PREVIOUS: 'previous',
|
|
6509
6627
|
};
|
|
6510
6628
|
|
|
6511
|
-
const mgPaginationCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
6629
|
+
const mgPaginationCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-pagination{display:flex;align-items:center;gap:var(--mg-b-spacing-actions)}.mg-c-pagination__page-count{display:flex;align-items:center;gap:var(--mg-b-size-4)}.mg-c-pagination__page-count-text{margin:0}.mg-c-pagination.mg-c-pagination--hide-page-count{gap:0}`;
|
|
6512
6630
|
|
|
6513
6631
|
/**
|
|
6514
6632
|
* Range generator
|
|
@@ -6531,7 +6649,7 @@ const mgPaginationCss = () => `.mg-u-visually-hidden{position:absolute !importan
|
|
|
6531
6649
|
* @param step - step size
|
|
6532
6650
|
* @returns range numbers
|
|
6533
6651
|
*/
|
|
6534
|
-
const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
|
|
6652
|
+
const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map((x) => start + x * step);
|
|
6535
6653
|
const MgPagination = class {
|
|
6536
6654
|
constructor(hostRef) {
|
|
6537
6655
|
index.registerInstance(this, hostRef);
|
|
@@ -6581,7 +6699,9 @@ const MgPagination = class {
|
|
|
6581
6699
|
* @param disabled - button disable state
|
|
6582
6700
|
*/
|
|
6583
6701
|
this.handleGoToPage = (action, disabled) => {
|
|
6584
|
-
!disabled
|
|
6702
|
+
if (!disabled) {
|
|
6703
|
+
this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
|
|
6704
|
+
}
|
|
6585
6705
|
};
|
|
6586
6706
|
}
|
|
6587
6707
|
watchIdentifier(newValue) {
|
|
@@ -6604,7 +6724,9 @@ const MgPagination = class {
|
|
|
6604
6724
|
this.currentPageChange.emit(newValue);
|
|
6605
6725
|
}
|
|
6606
6726
|
watchPaginationMessages(newValue) {
|
|
6607
|
-
if (Boolean(newValue) &&
|
|
6727
|
+
if (Boolean(newValue) &&
|
|
6728
|
+
(typeof newValue !== 'object' ||
|
|
6729
|
+
!['next', 'previous', 'nextLabel', 'previousLabel'].every((key) => index$1.isValidString(newValue[key])))) {
|
|
6608
6730
|
throw new Error('<mg-pagination> prop "messages" must be a valid "PaginationMessagesType".');
|
|
6609
6731
|
}
|
|
6610
6732
|
}
|
|
@@ -6644,7 +6766,7 @@ const MgPagination = class {
|
|
|
6644
6766
|
// eslint-disable-next-line react/jsx-no-bind
|
|
6645
6767
|
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && index.h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && navigationMessages[action], action === NavigationAction.NEXT && index.h("mg-icon", { icon: "chevron-right" })));
|
|
6646
6768
|
};
|
|
6647
|
-
return (index.h(index.Host, { hidden: this.totalPages < 2 }, index.h("nav", { role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (index.h("div", { class: "mg-c-pagination__page-count" }, index.h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.localesMessages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), index.h("span", { class: "mg-u-visually-hidden" }, this.localesMessages.pagination.page, " ", this.currentPage), "/ ", this.totalPages,
|
|
6769
|
+
return (index.h(index.Host, { hidden: this.totalPages < 2 }, index.h("nav", { role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (index.h("div", { class: "mg-c-pagination__page-count" }, index.h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map((page) => page.toString()), label: this.localesMessages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), index.h("p", { class: "mg-c-pagination__page-count-text" }, index.h("span", { class: "mg-u-visually-hidden" }, this.localesMessages.pagination.page, " ", this.currentPage), "/ ", this.totalPages, ' ', this.totalPages > 1 ? this.localesMessages.pagination.pages : this.localesMessages.pagination.page))), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
|
|
6648
6770
|
}
|
|
6649
6771
|
get element() { return index.getElement(this); }
|
|
6650
6772
|
static get watchers() { return {
|
|
@@ -6780,7 +6902,12 @@ const MgPanel = class {
|
|
|
6780
6902
|
* Render collapse button
|
|
6781
6903
|
* @returns collpase button
|
|
6782
6904
|
*/
|
|
6783
|
-
this.renderCollapseButton = () => (index.h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.expandToggleDisplay === 'icon' ? this.panelTitle : undefined }, index.h("span", { class: "mg-c-panel__collapse-button-content" }, index.h("mg-icon", { icon: "chevron-up", class: {
|
|
6905
|
+
this.renderCollapseButton = () => (index.h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.expandToggleDisplay === 'icon' ? this.panelTitle : undefined }, index.h("span", { class: "mg-c-panel__collapse-button-content" }, index.h("mg-icon", { icon: "chevron-up", class: {
|
|
6906
|
+
'mg-c-panel__collapse-button-icon': true,
|
|
6907
|
+
'mg-c-panel__collapse-button-icon--reverse': !this.expanded,
|
|
6908
|
+
} }), !this.isEditing &&
|
|
6909
|
+
this.expandToggleDisplay !== 'icon' &&
|
|
6910
|
+
(this.hasPanelTitleSlot() ? index.h("slot", { name: "panel-title" }) : this.panelTitle))));
|
|
6784
6911
|
/**
|
|
6785
6912
|
* Render edit button
|
|
6786
6913
|
* @returns edit Button
|
|
@@ -6812,7 +6939,11 @@ const MgPanel = class {
|
|
|
6812
6939
|
*/
|
|
6813
6940
|
this.renderHeaderChildren = () => {
|
|
6814
6941
|
const children = [
|
|
6815
|
-
index.h("div", { class: {
|
|
6942
|
+
index.h("div", { class: {
|
|
6943
|
+
'mg-c-panel__header-title': true,
|
|
6944
|
+
'mg-c-panel__header-title--full': this.isEditing,
|
|
6945
|
+
'mg-c-panel__header-title--reverse': this.titlePosition === 'right',
|
|
6946
|
+
}, key: this.panelTitle }, this.renderTitle()),
|
|
6816
6947
|
index.h("div", { class: "mg-c-panel__header-content", key: "slot-header" }, index.h("slot", { name: "header-right" })),
|
|
6817
6948
|
];
|
|
6818
6949
|
return this.titlePosition === 'right' ? children.reverse() : children;
|
|
@@ -6906,7 +7037,7 @@ const MgPanel = class {
|
|
|
6906
7037
|
*/
|
|
6907
7038
|
render() {
|
|
6908
7039
|
const headerId = `${this.identifier}-header`;
|
|
6909
|
-
return (index.h("section", { key: '
|
|
7040
|
+
return (index.h("section", { key: '33e6da36cbb92f19bcd957de7758c1a13ced5e83', class: this.classCollection.join(), id: this.identifier }, index.h("mg-card", { key: 'df278e46b4604d8c5dce2abeffb2e979b02f34e9', shadow: this.shadow }, index.h("header", { key: 'b68012115af4bb5b62b6357fc07cbf50876ac08f', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), index.h("article", { key: '3dfec67e6531fc0dff866e102ac36bd6c6a48834', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, index.h("slot", { key: '56c63dd0b0e98968594ff713c2c6ee2a3269b74b' })))));
|
|
6910
7041
|
}
|
|
6911
7042
|
get element() { return index.getElement(this); }
|
|
6912
7043
|
static get watchers() { return {
|
|
@@ -8742,11 +8873,7 @@ const MgPopover = class {
|
|
|
8742
8873
|
/**
|
|
8743
8874
|
* Popover placement
|
|
8744
8875
|
*/
|
|
8745
|
-
this.placement = 'bottom';
|
|
8746
|
-
/**
|
|
8747
|
-
* Hide popover arrow
|
|
8748
|
-
*/
|
|
8749
|
-
this.arrowHide = false;
|
|
8876
|
+
this.placement = 'bottom-start';
|
|
8750
8877
|
/**
|
|
8751
8878
|
* Define if popover has a cross button
|
|
8752
8879
|
*/
|
|
@@ -8764,7 +8891,16 @@ const MgPopover = class {
|
|
|
8764
8891
|
* @param event - mouse event
|
|
8765
8892
|
*/
|
|
8766
8893
|
this.clickOutside = (event) => {
|
|
8767
|
-
|
|
8894
|
+
// `click` is a composed event, so `composedPath()` lists every node it travels
|
|
8895
|
+
// through, including across shadow boundaries. Relying on it instead of
|
|
8896
|
+
// `event.target` keeps the popover open when it (or its guarded trigger) is
|
|
8897
|
+
// nested inside another component's shadow DOM: there `event.target` is
|
|
8898
|
+
// retargeted to the outer shadow host and `closest()` cannot reach the popover
|
|
8899
|
+
// nor the `data-mg-popover-guard` element.
|
|
8900
|
+
const path = event.composedPath();
|
|
8901
|
+
const isInside = path.includes(this.element) ||
|
|
8902
|
+
path.some((node) => node instanceof HTMLElement && node.dataset.mgPopoverGuard === this.identifier);
|
|
8903
|
+
if (!this.disabled && !isInside) {
|
|
8768
8904
|
this.display = false;
|
|
8769
8905
|
}
|
|
8770
8906
|
};
|
|
@@ -8802,7 +8938,7 @@ const MgPopover = class {
|
|
|
8802
8938
|
* @param newValue - if true enable popper listners
|
|
8803
8939
|
*/
|
|
8804
8940
|
this.setPopperListeners = (newValue) => {
|
|
8805
|
-
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: newValue }] })));
|
|
8941
|
+
this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: newValue }] })));
|
|
8806
8942
|
};
|
|
8807
8943
|
/**
|
|
8808
8944
|
* Manage all clickOustside listeners
|
|
@@ -8839,13 +8975,9 @@ const MgPopover = class {
|
|
|
8839
8975
|
this.mgPopoverContent.setAttribute('slot', 'content');
|
|
8840
8976
|
this.mgPopoverContent.setAttribute('id', this.identifier);
|
|
8841
8977
|
this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
|
|
8842
|
-
const arrow = document.createElement('div');
|
|
8843
|
-
arrow.setAttribute('slot', 'arrow');
|
|
8844
|
-
arrow.dataset.popperArrow = '';
|
|
8845
|
-
this.mgPopoverContent.appendChild(arrow);
|
|
8846
8978
|
// insert elements in DOM
|
|
8847
|
-
['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
|
|
8848
|
-
Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
|
|
8979
|
+
['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach((slotType) => {
|
|
8980
|
+
Array.from(this.element.querySelectorAll(slotType)).forEach((slot) => {
|
|
8849
8981
|
this.mgPopoverContent.appendChild(slot);
|
|
8850
8982
|
});
|
|
8851
8983
|
});
|
|
@@ -8863,12 +8995,6 @@ const MgPopover = class {
|
|
|
8863
8995
|
// use renderPopoverContent to update popover-content id
|
|
8864
8996
|
this.renderPopoverContent();
|
|
8865
8997
|
}
|
|
8866
|
-
validateArrowHide(newValue) {
|
|
8867
|
-
if (newValue)
|
|
8868
|
-
this.mgPopoverContent.dataset.arrowHide = '';
|
|
8869
|
-
else
|
|
8870
|
-
delete this.mgPopoverContent.dataset.arrowHide;
|
|
8871
|
-
}
|
|
8872
8998
|
validateCloseButton(newValue) {
|
|
8873
8999
|
this.mgPopoverContent.closeButton = newValue;
|
|
8874
9000
|
}
|
|
@@ -8900,7 +9026,6 @@ const MgPopover = class {
|
|
|
8900
9026
|
this.renderPopoverContent();
|
|
8901
9027
|
this.validateCloseButton(this.closeButton);
|
|
8902
9028
|
this.validateIdentifier(this.identifier);
|
|
8903
|
-
this.validateArrowHide(this.arrowHide);
|
|
8904
9029
|
}
|
|
8905
9030
|
/**
|
|
8906
9031
|
* Check if component props are well configured on init
|
|
@@ -8925,7 +9050,8 @@ const MgPopover = class {
|
|
|
8925
9050
|
{
|
|
8926
9051
|
name: 'offset',
|
|
8927
9052
|
options: {
|
|
8928
|
-
|
|
9053
|
+
// 2px gap with the trigger element, applied on the main axis only (no cross-axis shift so `-start`/`-end` stay aligned)
|
|
9054
|
+
offset: [0, 2],
|
|
8929
9055
|
},
|
|
8930
9056
|
},
|
|
8931
9057
|
{
|
|
@@ -8937,7 +9063,7 @@ const MgPopover = class {
|
|
|
8937
9063
|
],
|
|
8938
9064
|
});
|
|
8939
9065
|
// add resize observer
|
|
8940
|
-
[this.interactiveElement, this.element.querySelector('mg-popover-content')].forEach(element => {
|
|
9066
|
+
[this.interactiveElement, this.element.querySelector('mg-popover-content')].forEach((element) => {
|
|
8941
9067
|
new ResizeObserver(() => {
|
|
8942
9068
|
this.popper.update();
|
|
8943
9069
|
}).observe(element);
|
|
@@ -8954,7 +9080,7 @@ const MgPopover = class {
|
|
|
8954
9080
|
}
|
|
8955
9081
|
});
|
|
8956
9082
|
// Add events to hide popover
|
|
8957
|
-
this.element.addEventListener('keydown', e => {
|
|
9083
|
+
this.element.addEventListener('keydown', (e) => {
|
|
8958
9084
|
if (!this.disabled && e.code === 'Escape') {
|
|
8959
9085
|
this.display = false;
|
|
8960
9086
|
this.componentClose.emit();
|
|
@@ -8968,16 +9094,13 @@ const MgPopover = class {
|
|
|
8968
9094
|
* @returns HTML Element
|
|
8969
9095
|
*/
|
|
8970
9096
|
render() {
|
|
8971
|
-
return (index.h(index.Host, { key: '
|
|
9097
|
+
return (index.h(index.Host, { key: '9e62e60ba76045222b9c69b34245c3825004f8d6' }, index.h("slot", { key: '4be1a5c1221e1985cd0c0b4f7b19435d097bee4e' }), index.h("slot", { key: '07c2003dc3ad0bb7059e75e95e0de2862a64fd22', name: "content" })));
|
|
8972
9098
|
}
|
|
8973
9099
|
get element() { return index.getElement(this); }
|
|
8974
9100
|
static get watchers() { return {
|
|
8975
9101
|
"identifier": [{
|
|
8976
9102
|
"validateIdentifier": 0
|
|
8977
9103
|
}],
|
|
8978
|
-
"arrowHide": [{
|
|
8979
|
-
"validateArrowHide": 0
|
|
8980
|
-
}],
|
|
8981
9104
|
"closeButton": [{
|
|
8982
9105
|
"validateCloseButton": 0
|
|
8983
9106
|
}],
|
|
@@ -8988,7 +9111,7 @@ const MgPopover = class {
|
|
|
8988
9111
|
};
|
|
8989
9112
|
MgPopover.style = mgPopoverCss();
|
|
8990
9113
|
|
|
8991
|
-
const mgPopoverContentCss = () => `:host{position:relative;z-index:2000;display:none;
|
|
9114
|
+
const mgPopoverContentCss = () => `:host{position:relative;z-index:2000;display:none;color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}.mg-c-popover-content{--mg-c-card-max-width:var(--mg-c-popover-max-width);--mg-c-card-min-width:var(--mg-c-popover-min-width);--mg-c-card-max-height:min( var(--mg-c-popover-max-height), 100vh - calc(var(--mg-b-size-min-height) + var(--mg-b-size-32)) );--mg-c-card-overflow:var(--mg-c-popover-overflow)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-12) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}`;
|
|
8992
9115
|
|
|
8993
9116
|
const MgPopoverContent = class {
|
|
8994
9117
|
constructor(hostRef) {
|
|
@@ -9034,7 +9157,7 @@ const MgPopoverContent = class {
|
|
|
9034
9157
|
* @returns HTML Element
|
|
9035
9158
|
*/
|
|
9036
9159
|
render() {
|
|
9037
|
-
return (index.h(index.Host, { key: '
|
|
9160
|
+
return (index.h(index.Host, { key: '7035d8f560b811596c9c641abc7fe28ee9fdf3a2' }, index.h("mg-card", { key: 'badc81425100283dac69cad111514d8c3edfba45', class: this.classCollection.join(), shadow: true }, this.closeButton && (index.h("mg-button", { key: 'cb20d8c7db741051b532c3b1653d578df859f0d0', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { key: '389dc26f4cfdbb899b2b9eb4b27ceb6369209b2f', icon: "cross" }))), index.h("div", { key: '29b6721af3b6e06760affd6565e740bbc667f457', class: "mg-c-popover-content__title" }, index.h("slot", { key: '5834364d298a4e65a9170f003d0ec1f5e8868c4a', name: "title" })), index.h("slot", { key: '8398f497064fe097151ca263225349a9d84d4f36', name: "content" }))));
|
|
9038
9161
|
}
|
|
9039
9162
|
get element() { return index.getElement(this); }
|
|
9040
9163
|
};
|
|
@@ -9060,7 +9183,9 @@ const MgSkipLinks = class {
|
|
|
9060
9183
|
};
|
|
9061
9184
|
}
|
|
9062
9185
|
validateLinks(links) {
|
|
9063
|
-
if (links === undefined ||
|
|
9186
|
+
if (links === undefined ||
|
|
9187
|
+
links.length === 0 ||
|
|
9188
|
+
links.some((link) => !index$1.isValidString(link.href) || !link.href.startsWith('#') || !index$1.isValidString(link.label))) {
|
|
9064
9189
|
throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
|
|
9065
9190
|
}
|
|
9066
9191
|
}
|
|
@@ -9079,7 +9204,7 @@ const MgSkipLinks = class {
|
|
|
9079
9204
|
* @returns HTML Element
|
|
9080
9205
|
*/
|
|
9081
9206
|
render() {
|
|
9082
|
-
return (index.h("nav", { key: '
|
|
9207
|
+
return (index.h("nav", { key: '9208da538e001be23c8cc78e8a34498cd072cdc6', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, index.h("ul", { key: 'fcd69f398fad6964d5c017bb652ad7b8de34dee6', class: "mg-c-skip-links__list", role: "list" }, this.links.map((link) => (index.h("li", { key: link.href }, index.h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
|
|
9083
9208
|
}
|
|
9084
9209
|
get element() { return index.getElement(this); }
|
|
9085
9210
|
static get watchers() { return {
|
|
@@ -9103,7 +9228,7 @@ const textAlignments = ['left', 'center', 'right'];
|
|
|
9103
9228
|
// Define possible data types
|
|
9104
9229
|
const dataTypes = ['string', 'numeric', 'date'];
|
|
9105
9230
|
|
|
9106
|
-
const mgTableCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
9231
|
+
const mgTableCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}@font-face{font-family:"Open Sans";src:url("fonts/OpenSans-Regular.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-weight:600;src:url("fonts/OpenSans-SemiBold.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-weight:700;src:url("fonts/OpenSans-Bold.ttf") format("truetype")}p{margin:0}p+p{margin-top:var(--mg-b-size-8)}h1,.mg-u-h1{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h1);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h2);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h3);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h4);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h5);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h6);font-weight:bold}hgroup{display:flex;flex-direction:column;gap:var(--mg-b-size-4)}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6{margin:0}hgroup p{color:var(--mg-b-color-neutral-90)}small{font-size:var(--mg-b-small-font-size)}.mg-u-text-left{text-align:left !important}.mg-u-text-center{text-align:center !important}.mg-u-text-right{text-align:right !important}.mg-c-table{--mg-c-table-cell-spacing:var(--mg-b-size-8) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-40);overflow:hidden;border:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-12);background:var(--mg-b-color-light);border-spacing:0;color:var(--mg-b-color-dark)}.mg-c-table td,.mg-c-table th{height:var(--mg-c-table-cell-height);box-sizing:border-box;padding:var(--mg-c-table-cell-spacing);text-align:start}.mg-c-table thead{height:var(--mg-c-table-header-cell-height)}.mg-c-table thead,.mg-c-table tfoot{background-color:var(--mg-c-table-color-head-foot-background, var(--mg-b-color-neutral-10));color:var(--mg-b-color-neutral-90)}.mg-c-table tfoot tr:first-of-type :where(th,td){border-block-start:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-table thead td,.mg-c-table tfoot td,.mg-c-table th{font-weight:600}.mg-c-table tr :where(th,td){border-block-end:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-table tbody:last-of-type tr:last-of-type :where(th,td),.mg-c-table tfoot tr:last-of-type :where(th,td){border-block-end:none}.mg-c-table tfoot :where(th,td)[rowspan][scope=rowgroup],.mg-c-table tbody:last-of-type :where(th,td)[rowspan][scope=rowgroup]{border-block-end:none}.mg-c-table.mg-c-table--size-small{--mg-c-table-cell-spacing:var(--mg-b-size-4) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-32)}.mg-c-table.mg-c-table--size-large{--mg-c-table-cell-height:calc(var(--mg-b-size-min-height) + 2 * var(--mg-b-size-8))}.mg-c-table.mg-c-table--size-xlarge{--mg-c-table-cell-spacing:var(--mg-b-size-12) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-64)}.mg-c-table.mg-c-table--full-width{width:100%}.mg-c-table.mg-c-table--border-hide{border:unset;border-radius:unset}.mg-c-table-wrapper{overflow:auto}.mg-c-table thead td,.mg-c-table thead th{position:relative}.mg-c-table thead td .mg-c-table__sort-button,.mg-c-table thead th .mg-c-table__sort-button{display:inline-flex;align-items:center;padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600;gap:var(--mg-b-size-4);text-align:left}.mg-c-table thead td .mg-c-table__sort-button::after,.mg-c-table thead th .mg-c-table__sort-button::after{position:absolute;content:"";inset:0}.mg-c-table thead td .mg-c-table__sort-button:hover,.mg-c-table thead th .mg-c-table__sort-button:hover{cursor:pointer}.mg-c-table thead td:has(.mg-c-table__sort-button):hover,.mg-c-table thead td[aria-sort=descending],.mg-c-table thead td[aria-sort=ascending],.mg-c-table thead th:has(.mg-c-table__sort-button):hover,.mg-c-table thead th[aria-sort=descending],.mg-c-table thead th[aria-sort=ascending]{background-color:var(--mg-b-color-neutral-20)}`;
|
|
9107
9232
|
|
|
9108
9233
|
/**
|
|
9109
9234
|
* Check if value is a valid align object
|
|
@@ -9126,7 +9251,7 @@ typeof newValue === 'object' &&
|
|
|
9126
9251
|
(value.sortable !== undefined && typeof value.sortable === 'boolean') ||
|
|
9127
9252
|
(value.datatype !== undefined && dataTypes.includes(value.datatype))) &&
|
|
9128
9253
|
// ensure no extra properties are present
|
|
9129
|
-
Object.keys(value).every(key => ['align', 'sortable', 'datatype'].includes(key)));
|
|
9254
|
+
Object.keys(value).every((key) => ['align', 'sortable', 'datatype'].includes(key)));
|
|
9130
9255
|
/**
|
|
9131
9256
|
* Compare values
|
|
9132
9257
|
* @param firstValue - First value
|
|
@@ -9252,12 +9377,16 @@ const MgTable = class {
|
|
|
9252
9377
|
// Add event listener
|
|
9253
9378
|
button.addEventListener('click', () => {
|
|
9254
9379
|
// Reset aria pressed
|
|
9255
|
-
table
|
|
9380
|
+
table
|
|
9381
|
+
.querySelectorAll(`thead td:not(:nth-child(${key})) [aria-pressed],thead th:not(:nth-child(${key})) [aria-pressed]`)
|
|
9382
|
+
.forEach((ariaPressed) => {
|
|
9256
9383
|
ariaPressed.removeAttribute('aria-pressed');
|
|
9257
9384
|
ariaPressed.querySelector('mg-icon').setAttribute('icon', 'arrows-up-down');
|
|
9258
9385
|
});
|
|
9259
9386
|
// Reset aria sort
|
|
9260
|
-
table
|
|
9387
|
+
table
|
|
9388
|
+
.querySelectorAll(`thead td:not(:nth-child(${key}))[aria-sort],thead th:not(:nth-child(${key}))[aria-sort]`)
|
|
9389
|
+
.forEach((ariaSort) => {
|
|
9261
9390
|
ariaSort.removeAttribute('aria-sort');
|
|
9262
9391
|
});
|
|
9263
9392
|
// Set aria pressed
|
|
@@ -9292,7 +9421,7 @@ const MgTable = class {
|
|
|
9292
9421
|
// If sort order is none, return to original order
|
|
9293
9422
|
if (sortOrder === 'none') {
|
|
9294
9423
|
// Append rows to table
|
|
9295
|
-
rowsDefault.forEach(row => table.querySelector('tbody').append(row));
|
|
9424
|
+
rowsDefault.forEach((row) => table.querySelector('tbody').append(row));
|
|
9296
9425
|
return;
|
|
9297
9426
|
}
|
|
9298
9427
|
// Set a copy of rows
|
|
@@ -9310,7 +9439,7 @@ const MgTable = class {
|
|
|
9310
9439
|
return compareValues(cellValueA, cellValueB, sortOrder === 'descending', value.datatype);
|
|
9311
9440
|
});
|
|
9312
9441
|
// Append rows to table
|
|
9313
|
-
rows.forEach(row => table.querySelector('tbody').append(row));
|
|
9442
|
+
rows.forEach((row) => table.querySelector('tbody').append(row));
|
|
9314
9443
|
});
|
|
9315
9444
|
}
|
|
9316
9445
|
});
|
|
@@ -9531,7 +9660,7 @@ const MgTabs = class {
|
|
|
9531
9660
|
* Validate slots setting
|
|
9532
9661
|
*/
|
|
9533
9662
|
this.validateSlots = () => {
|
|
9534
|
-
const slots = Array.from(this.element.children).filter(slot => { var _a; return (_a = slot.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.includes('tab_content-'); });
|
|
9663
|
+
const slots = Array.from(this.element.children).filter((slot) => { var _a; return (_a = slot.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.includes('tab_content-'); });
|
|
9535
9664
|
if (slots.length !== this.tabs.length)
|
|
9536
9665
|
throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
|
|
9537
9666
|
};
|
|
@@ -9549,7 +9678,7 @@ const MgTabs = class {
|
|
|
9549
9678
|
validateItems(newValue) {
|
|
9550
9679
|
// String array
|
|
9551
9680
|
if (index$1.allItemsAreString(newValue))
|
|
9552
|
-
this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
|
|
9681
|
+
this.tabs = newValue.map((item) => ({ label: item, status: Status.VISIBLE }));
|
|
9553
9682
|
// Object array
|
|
9554
9683
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
9555
9684
|
this.tabs = newValue;
|
|
@@ -9560,11 +9689,14 @@ const MgTabs = class {
|
|
|
9560
9689
|
// when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
|
|
9561
9690
|
// after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update
|
|
9562
9691
|
if (newValue === undefined) {
|
|
9563
|
-
this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))
|
|
9564
|
-
? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))
|
|
9692
|
+
this.activeTab = this.tabs.some((tab) => this.tabHasStatus(tab, Status.ACTIVE))
|
|
9693
|
+
? this.getTabItemIndex(this.tabs.findIndex((tab) => this.tabHasStatus(tab, Status.ACTIVE)))
|
|
9565
9694
|
: this.startIndex;
|
|
9566
9695
|
}
|
|
9567
|
-
else if (typeof newValue === 'number' &&
|
|
9696
|
+
else if (typeof newValue === 'number' &&
|
|
9697
|
+
newValue >= this.startIndex &&
|
|
9698
|
+
newValue <= this.tabs.length &&
|
|
9699
|
+
this.isActivableTab(this.tabs[newValue - this.startIndex])) {
|
|
9568
9700
|
// if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE
|
|
9569
9701
|
this.tabs.forEach((tab, index) => {
|
|
9570
9702
|
const isNewActiveTab = index === newValue - this.startIndex;
|
|
@@ -9613,13 +9745,13 @@ const MgTabs = class {
|
|
|
9613
9745
|
* @returns HTML Element
|
|
9614
9746
|
*/
|
|
9615
9747
|
render() {
|
|
9616
|
-
return (index.h("div", { key: '
|
|
9748
|
+
return (index.h("div", { key: '37be8d325dfea3a7b828236f3cc21da57be28154', class: this.classCollection.join() }, index.h("header", { key: 'd88f10c0331984a759f8abc311f11d913fb25206', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index$1) => (index.h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index$1), class: {
|
|
9617
9749
|
[`${this.buttonTabBaseClass}`]: true,
|
|
9618
9750
|
[`${this.buttonTabBaseClass}--horizontal`]: true,
|
|
9619
9751
|
[`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
|
|
9620
9752
|
[`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),
|
|
9621
9753
|
[`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),
|
|
9622
|
-
}, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index$1), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index$1) }, tab.icon !== undefined && index.h("mg-icon", { icon: tab.icon, size: "small" }), tab.label, tab.badge !== undefined && index.h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index$1) => (index.h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index$1), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index$1), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-c-tabs__content-container" }, index.h("slot", { name: this.getElementId('tab_content', index$1) }))))));
|
|
9754
|
+
}, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index$1), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index$1) }, tab.icon !== undefined && index.h("mg-icon", { icon: tab.icon, size: "small" }), tab.label, tab.badge !== undefined && (index.h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' })))))), this.tabs.map((tab, index$1) => (index.h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index$1), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index$1), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-c-tabs__content-container" }, index.h("slot", { name: this.getElementId('tab_content', index$1) }))))));
|
|
9623
9755
|
}
|
|
9624
9756
|
get element() { return index.getElement(this); }
|
|
9625
9757
|
static get watchers() { return {
|
|
@@ -9727,7 +9859,7 @@ const MgTag = class {
|
|
|
9727
9859
|
* @returns HTML Element
|
|
9728
9860
|
*/
|
|
9729
9861
|
render() {
|
|
9730
|
-
return (index.h("span", { key: '
|
|
9862
|
+
return (index.h("span", { key: 'd0a9551f29695cd9c49751c4950db3c13065490e', class: this.classCollection.join() }, index.h("slot", { key: '51f2a2e1c9578f6449bb9c124335ad707d5ebeb1' })));
|
|
9731
9863
|
}
|
|
9732
9864
|
get element() { return index.getElement(this); }
|
|
9733
9865
|
static get watchers() { return {
|
|
@@ -9786,7 +9918,7 @@ const MgTooltip = class {
|
|
|
9786
9918
|
// Make the tooltip visible
|
|
9787
9919
|
this.mgTooltipContent.dataset.show = '';
|
|
9788
9920
|
// Enable the event listeners
|
|
9789
|
-
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
9921
|
+
this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
9790
9922
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
9791
9923
|
index$1.nextTick(() => {
|
|
9792
9924
|
this.windows.forEach((localWindow) => {
|
|
@@ -9802,7 +9934,7 @@ const MgTooltip = class {
|
|
|
9802
9934
|
// Hide the tooltip
|
|
9803
9935
|
this.mgTooltipContent.removeAttribute('data-show');
|
|
9804
9936
|
// Disable the event listeners
|
|
9805
|
-
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
|
|
9937
|
+
this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
|
|
9806
9938
|
// Remove event listener
|
|
9807
9939
|
this.windows.forEach((localWindow) => {
|
|
9808
9940
|
localWindow.removeEventListener('click', this.handleClickOutside, false);
|
|
@@ -9950,9 +10082,9 @@ const MgTooltip = class {
|
|
|
9950
10082
|
* @param mgButton - mg-button to observe
|
|
9951
10083
|
*/
|
|
9952
10084
|
this.setMgButtonMutationObserver = (mgButton) => {
|
|
9953
|
-
new MutationObserver(mutationList => {
|
|
10085
|
+
new MutationObserver((mutationList) => {
|
|
9954
10086
|
// stop process when none of mutations attributed is disabled
|
|
9955
|
-
if (!mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName)))
|
|
10087
|
+
if (!mutationList.some((mutation) => ['aria-disabled', 'disabled'].includes(mutation.attributeName)))
|
|
9956
10088
|
return;
|
|
9957
10089
|
// set guard when one of mutations is for a disabled with disabled-on-click
|
|
9958
10090
|
if (mutationList.some((mutation) => mutation.target.disabled && mutation.target.disableOnClick)) {
|
|
@@ -10067,7 +10199,9 @@ const MgTooltip = class {
|
|
|
10067
10199
|
// get slotted element wich is not the tooltip
|
|
10068
10200
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
10069
10201
|
// Get interactive element
|
|
10070
|
-
const interactiveElement = slotElement.matches(index$1.focusableElements)
|
|
10202
|
+
const interactiveElement = slotElement.matches(index$1.focusableElements)
|
|
10203
|
+
? slotElement
|
|
10204
|
+
: (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index$1.focusableElements);
|
|
10071
10205
|
this.setTooltipedElement(interactiveElement || slotElement);
|
|
10072
10206
|
// Check if slotted element is a disabled mg-button
|
|
10073
10207
|
// In this case we wrap the mg-button into a div to enable the tooltip
|
|
@@ -10118,7 +10252,7 @@ const MgTooltip = class {
|
|
|
10118
10252
|
* @returns HTML Element
|
|
10119
10253
|
*/
|
|
10120
10254
|
render() {
|
|
10121
|
-
return (index.h(index.Host, { key: '
|
|
10255
|
+
return (index.h(index.Host, { key: '5cd926147c1b6723065c5334699764f32a8a06c9' }, index.h("slot", { key: 'a1b208798c79e34a207f3bedb2ad9662e02e83e2' }), index.h("slot", { key: '4f332961968fd3541caf47c2fd9072720fa2ee71', name: "content" })));
|
|
10122
10256
|
}
|
|
10123
10257
|
get element() { return index.getElement(this); }
|
|
10124
10258
|
static get watchers() { return {
|
|
@@ -10152,7 +10286,7 @@ const MgTooltipContent = class {
|
|
|
10152
10286
|
* @returns HTML Element
|
|
10153
10287
|
*/
|
|
10154
10288
|
render() {
|
|
10155
|
-
return (index.h(index.Host, { key: '
|
|
10289
|
+
return (index.h(index.Host, { key: '49dc32a8c7191fb291d2c47fc1e903d16e0774ab', role: "tooltip" }, index.h("span", { key: '913adc1f23eec27eb4b83cc4f4d9b4c1d6f9b2c2', innerHTML: this.message, class: "mg-tooltip-content__message" }), index.h("slot", { key: '44da4832c535df385cbde0fd32791d901c538e84', name: "arrow" })));
|
|
10156
10290
|
}
|
|
10157
10291
|
};
|
|
10158
10292
|
MgTooltipContent.style = mgTooltipContentCss();
|