@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,8 +1,9 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-
|
|
2
|
-
import { h as createID, t as toString, C as ClassList, i as isValidString, n as nextTick, j as isValideID, k as isTagName, f as formatID, l as cleanString, m as dateRegExp, o as dateToString, b as allItemsAreString, p as getWindows, q as focusableElements } from './index-
|
|
3
|
-
import { i as initLocales, a as localeDate, b as localeDatePattern, c as localeNumber, d as localeUnit, e as localePercent, f as localeCurrency } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-D4bO_UCn.js';
|
|
2
|
+
import { h as createID, t as toString, C as ClassList, i as isValidString, n as nextTick, j as isValideID, k as isTagName, f as formatID, l as cleanString, m as dateRegExp, o as dateToString, b as allItemsAreString, p as getWindows, q as focusableElements } from './index-91BOpzAB.js';
|
|
3
|
+
import { i as initLocales, a as localeDate, b as localeDatePattern, c as localeNumber, d as localeUnit, e as localePercent, f as localeCurrency } from './index-BfblyCaJ.js';
|
|
4
4
|
import { n as normalizeBooleanAttributes, i as isMgInputFile, l as labelHeadings, t as tooltipPositions, b as classFieldset, c as classReadonly, a as classDisabled, d as classVerticalList, w as widths, e as classDisplayCharacterLeft } from './mg-input.conf-DOi9lJXy.js';
|
|
5
5
|
import { K as Keys } from './events.utils-yMGqY8YG.js';
|
|
6
|
+
import { i as icons } from './index-Ci9Hv7DG.js';
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
9
|
* Available menu item status values
|
|
@@ -21,12 +22,12 @@ const targets = ['_blank', '_self', '_parent', '_top'];
|
|
|
21
22
|
/**
|
|
22
23
|
* Menu direction values
|
|
23
24
|
*/
|
|
24
|
-
const directions$
|
|
25
|
+
const directions$2 = {
|
|
25
26
|
VERTICAL: 'vertical',
|
|
26
27
|
HORIZONTAL: 'horizontal',
|
|
27
28
|
};
|
|
28
29
|
|
|
29
|
-
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
|
|
30
|
+
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)}`;
|
|
30
31
|
|
|
31
32
|
/**
|
|
32
33
|
* MgActionMore['items'] type guard
|
|
@@ -36,7 +37,8 @@ const mgActionMoreCss = () => `.mg-u-visually-hidden{position:absolute !importan
|
|
|
36
37
|
const isMgActionMoreItems = (prop) => {
|
|
37
38
|
const items = prop;
|
|
38
39
|
return (typeof items === 'object' &&
|
|
39
|
-
items.every(item => (typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function') ||
|
|
40
|
+
items.every((item) => (typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function') ||
|
|
41
|
+
isMgActionMoreDivider(item)));
|
|
40
42
|
};
|
|
41
43
|
/**
|
|
42
44
|
* MgActionMoreDividerType type guard
|
|
@@ -119,7 +121,9 @@ const MgActionMore = class {
|
|
|
119
121
|
if (!isMgActionMoreItems(newValue)) {
|
|
120
122
|
throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${toString(newValue)}.`);
|
|
121
123
|
}
|
|
122
|
-
else if (isMgActionMoreItems(newValue) &&
|
|
124
|
+
else if (isMgActionMoreItems(newValue) &&
|
|
125
|
+
newValue.length > 0 &&
|
|
126
|
+
(isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {
|
|
123
127
|
throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${toString(newValue)}.`);
|
|
124
128
|
}
|
|
125
129
|
}
|
|
@@ -167,11 +171,11 @@ const MgActionMore = class {
|
|
|
167
171
|
[`${this.classBase}__chevron--rotate`]: this.expanded === true,
|
|
168
172
|
} }, h("mg-icon", { icon: "chevron-down" })));
|
|
169
173
|
}
|
|
170
|
-
return (h(Host, { key: '
|
|
174
|
+
return (h(Host, { key: 'c72c7ee9bdb39f2361fdcb9f670cc679efdd3589', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: 'dd88d690d4600868bc485770b657b46afeccc727', class: this.classBase }, h("mg-popover", { key: 'eaecf2ec0fca98c0233240711ff7fed17374cd81', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange, "data-fallback-placement": "bottom-end" }, 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 && h("mg-icon", Object.assign({ key: 'a7a5c5bbc906da8dee937312fe373e97d9d74346' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: '83cda3d619de43ab8a75605d20082b31230cd7e2', slot: "content" }, h("mg-menu", { key: '37d0fd99fcafb3eb6f2a56a7a805523348146419', direction: directions$2.VERTICAL, label: this.messages.label }, this.items.map((item) => {
|
|
171
175
|
var _a, _b;
|
|
172
176
|
return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider", "full-width": true })) : (h("mg-menu-item", { key: item.label, status: item.status || Status$1.VISIBLE, target: item.target, href: item.href,
|
|
173
177
|
// eslint-disable-next-line react/jsx-no-bind
|
|
174
|
-
onClick: e => this.handleItemClick(e, item.mouseEventHandler) }, ((_a = item.icon) === null || _a === void 0 ? void 0 : _a.icon) && h("mg-icon", { icon: item.icon.icon, variant: item.icon.variant, variantStyle: item.icon.variantStyle, slot: "image" }), h("span", { slot: "label" }, item.label), ((_b = item.badge) === null || _b === void 0 ? void 0 : _b.label) && h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" })));
|
|
178
|
+
onClick: (e) => this.handleItemClick(e, item.mouseEventHandler) }, ((_a = item.icon) === null || _a === void 0 ? void 0 : _a.icon) && (h("mg-icon", { icon: item.icon.icon, variant: item.icon.variant, variantStyle: item.icon.variantStyle, slot: "image" })), h("span", { slot: "label" }, item.label), ((_b = item.badge) === null || _b === void 0 ? void 0 : _b.label) && (h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" }))));
|
|
175
179
|
})))))));
|
|
176
180
|
}
|
|
177
181
|
get element() { return getElement(this); }
|
|
@@ -197,7 +201,7 @@ MgActionMore.style = mgActionMoreCss();
|
|
|
197
201
|
*/
|
|
198
202
|
const variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
|
|
199
203
|
|
|
200
|
-
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
|
|
204
|
+
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}`;
|
|
201
205
|
|
|
202
206
|
const MgBadge = class {
|
|
203
207
|
constructor(hostRef) {
|
|
@@ -267,7 +271,7 @@ const MgBadge = class {
|
|
|
267
271
|
* @returns HTML Element
|
|
268
272
|
*/
|
|
269
273
|
render() {
|
|
270
|
-
return (h("span", { key: '
|
|
274
|
+
return (h("span", { key: 'af4f655ca8a11422a34cdce3e8febf46269ca574', class: this.classCollection.join() }, h("span", { key: 'bcc8c0a863615ba503f135f562bd970216599df0', class: "mg-c-badge__value" }, this.value), h("span", { key: '136d338c9a7b7791178dec1dae3898f4a7b099ea', class: "mg-u-visually-hidden" }, this.label)));
|
|
271
275
|
}
|
|
272
276
|
get element() { return getElement(this); }
|
|
273
277
|
static get watchers() { return {
|
|
@@ -296,7 +300,7 @@ const sizes$3 = ['medium', 'large'];
|
|
|
296
300
|
*/
|
|
297
301
|
const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
|
|
298
302
|
|
|
299
|
-
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
|
|
303
|
+
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)}`;
|
|
300
304
|
|
|
301
305
|
const MgButton = class {
|
|
302
306
|
constructor(hostRef) {
|
|
@@ -456,6 +460,9 @@ const MgButton = class {
|
|
|
456
460
|
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
457
461
|
}
|
|
458
462
|
}
|
|
463
|
+
else {
|
|
464
|
+
this.classCollection.delete(`mg-c-button--icon`);
|
|
465
|
+
}
|
|
459
466
|
this.setIconSize();
|
|
460
467
|
}
|
|
461
468
|
loadingHandler(newValue) {
|
|
@@ -501,7 +508,7 @@ const MgButton = class {
|
|
|
501
508
|
*/
|
|
502
509
|
render() {
|
|
503
510
|
var _a;
|
|
504
|
-
return (h(Host, { key: '
|
|
511
|
+
return (h(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 }, h("div", { key: '36918b5b208a9e0a9650107f4418cac35ade1ed2', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: '8ad3e911d273f69441f2a405f8040cc685a0a486', icon: "loader", spin: true }), h("div", { key: 'a6b199c669ef6b15bfc345c98192290ce11e65cb', class: "mg-c-button__content" }, h("slot", { key: 'b13d317001dbf66c945cdf9e97c06338ce073c12' })))));
|
|
505
512
|
}
|
|
506
513
|
get element() { return getElement(this); }
|
|
507
514
|
static get watchers() { return {
|
|
@@ -532,7 +539,7 @@ MgButton.style = mgButtonCss();
|
|
|
532
539
|
*/
|
|
533
540
|
const radiusSizes = ['xsmall', 'small', 'medium'];
|
|
534
541
|
|
|
535
|
-
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-
|
|
542
|
+
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)}`;
|
|
536
543
|
|
|
537
544
|
const MgCard = class {
|
|
538
545
|
constructor(hostRef) {
|
|
@@ -589,7 +596,7 @@ const MgCard = class {
|
|
|
589
596
|
* @returns HTML Element
|
|
590
597
|
*/
|
|
591
598
|
render() {
|
|
592
|
-
return (h("div", { key: '
|
|
599
|
+
return (h("div", { key: '8fb6d9aa655b838e219a077670ce6296640d0854', class: this.classCollection.join() }, h("slot", { key: '9413035054408e44b8c8bb3f2033ff970931c347' })));
|
|
593
600
|
}
|
|
594
601
|
static get watchers() { return {
|
|
595
602
|
"shadow": [{
|
|
@@ -602,7 +609,7 @@ const MgCard = class {
|
|
|
602
609
|
};
|
|
603
610
|
MgCard.style = mgCardCss();
|
|
604
611
|
|
|
605
|
-
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
|
|
612
|
+
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}`;
|
|
606
613
|
|
|
607
614
|
const MgCharacterLeft = class {
|
|
608
615
|
constructor(hostRef) {
|
|
@@ -638,7 +645,7 @@ const MgCharacterLeft = class {
|
|
|
638
645
|
* @returns HTML Element
|
|
639
646
|
*/
|
|
640
647
|
render() {
|
|
641
|
-
return (h("span", { key: '
|
|
648
|
+
return (h("span", { key: '45b074ad1ffaa1041e5c4d62417ed44ea76aa218', id: this.identifier, "aria-live": "polite" }, h("span", { key: 'ed5f631cb268f888287e5ffafbd5ce22b07c71d5', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: 'd9cda093c2ece7c3e39ea1bbd9499318c964b7f6', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
|
|
642
649
|
}
|
|
643
650
|
get element() { return getElement(this); }
|
|
644
651
|
static get watchers() { return {
|
|
@@ -652,7 +659,7 @@ const MgCharacterLeft = class {
|
|
|
652
659
|
};
|
|
653
660
|
MgCharacterLeft.style = mgCharacterLeftCss();
|
|
654
661
|
|
|
655
|
-
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
|
|
662
|
+
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}}`;
|
|
656
663
|
|
|
657
664
|
const MgDetails = class {
|
|
658
665
|
constructor(hostRef) {
|
|
@@ -706,7 +713,7 @@ const MgDetails = class {
|
|
|
706
713
|
* @returns HTML Element
|
|
707
714
|
*/
|
|
708
715
|
render() {
|
|
709
|
-
return (h("details", { key: '
|
|
716
|
+
return (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) }, h("summary", { key: '766e4756a66a1f8e6bc2159f30133a0702353f32' }, h("slot", { key: '3473dd0c0fc7de78c1d7ae6f9ee4a4d2fc7835ee', name: "summary" }), h("span", { key: '7c8d3da4df69d2802f104caaf568ac513f9f03b6', class: "mg-c-details__toggle" }, h("mg-icon", { key: '44da384780ab768bde20acb58885280e193de921', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '387de0caa5ae819c89449e5063e0b6e05b3df8fe', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '48c1fe8df990a250f098594d9b50df947613955c', class: "mg-c-details__details" }, h("slot", { key: '95554b4d890750cc3b3008965be3e5954d49d810', name: "details" }))));
|
|
710
717
|
}
|
|
711
718
|
get element() { return getElement(this); }
|
|
712
719
|
static get watchers() { return {
|
|
@@ -723,7 +730,12 @@ const MgDetails = class {
|
|
|
723
730
|
};
|
|
724
731
|
MgDetails.style = mgDetailsCss();
|
|
725
732
|
|
|
726
|
-
|
|
733
|
+
/**
|
|
734
|
+
* List of all possibles directions
|
|
735
|
+
*/
|
|
736
|
+
const directions$1 = ['horizontal', 'vertical'];
|
|
737
|
+
|
|
738
|
+
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}`;
|
|
727
739
|
|
|
728
740
|
const MgDivider = class {
|
|
729
741
|
constructor(hostRef) {
|
|
@@ -735,17 +747,46 @@ const MgDivider = class {
|
|
|
735
747
|
* Define component size
|
|
736
748
|
*/
|
|
737
749
|
this.fullWidth = false;
|
|
750
|
+
/**
|
|
751
|
+
* Define component direction
|
|
752
|
+
*/
|
|
753
|
+
this.direction = 'horizontal';
|
|
754
|
+
}
|
|
755
|
+
validateDirection(newValue) {
|
|
756
|
+
if (newValue === '') {
|
|
757
|
+
// Reactive frameworks (ex. Vue) can pass "" instead of undefined.
|
|
758
|
+
// Treat it as "use the default", do not throw.
|
|
759
|
+
this.direction = directions$1[0];
|
|
760
|
+
}
|
|
761
|
+
else if (!directions$1.includes(newValue)) {
|
|
762
|
+
throw new Error(`<mg-divider> prop "direction" must be one of: ${directions$1.join(', ')}. Passed value: ${toString(newValue)}.`);
|
|
763
|
+
}
|
|
764
|
+
}
|
|
765
|
+
/*************
|
|
766
|
+
* Lifecycle *
|
|
767
|
+
*************/
|
|
768
|
+
/**
|
|
769
|
+
* Check if component props are well configured on init
|
|
770
|
+
*/
|
|
771
|
+
componentWillLoad() {
|
|
772
|
+
this.validateDirection(this.direction);
|
|
738
773
|
}
|
|
739
774
|
/**
|
|
740
775
|
* Render
|
|
741
776
|
* @returns HTML Element
|
|
742
777
|
*/
|
|
743
778
|
render() {
|
|
744
|
-
return (h("div", { key: '
|
|
779
|
+
return (h(Host, { key: '33f0896876d43052fd99a20ebf943d3ee30dfc7a', role: "separator", "aria-orientation": this.direction }, h("div", { key: 'a9e87c1d097177b5995649485da427ca25436f8c', class: {
|
|
745
780
|
'mg-c-divider': true,
|
|
746
781
|
'mg-c-divider--full-width': this.fullWidth,
|
|
747
|
-
|
|
782
|
+
'mg-c-divider--direction-vertical': this.direction === 'vertical',
|
|
783
|
+
} })));
|
|
748
784
|
}
|
|
785
|
+
static get watchers() { return {
|
|
786
|
+
"direction": [{
|
|
787
|
+
"validateDirection": 0
|
|
788
|
+
}]
|
|
789
|
+
}; }
|
|
749
790
|
};
|
|
750
791
|
MgDivider.style = mgDividerCss();
|
|
751
792
|
|
|
@@ -810,17 +851,20 @@ const MgForm = class {
|
|
|
810
851
|
}
|
|
811
852
|
// If the form is disabled or readonly none of them are required
|
|
812
853
|
// Check if all fields are not editable (readonly or disabled)
|
|
813
|
-
const isEditable = input => !(input.disabled || input.readonly);
|
|
814
|
-
const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';
|
|
815
|
-
if (!this.disabled &&
|
|
854
|
+
const isEditable = (input) => !(input.disabled || input.readonly);
|
|
855
|
+
const isMgInputToggle = (input) => input.nodeName === 'MG-INPUT-TOGGLE';
|
|
856
|
+
if (!this.disabled &&
|
|
857
|
+
!this.readonly &&
|
|
858
|
+
this.mgInputs.some((input) => isEditable(input) && !isMgInputToggle(input))) {
|
|
816
859
|
// Get editable inputs
|
|
817
860
|
const editableInputs = this.mgInputs.filter(isEditable);
|
|
818
861
|
// Get required inputs
|
|
819
862
|
// mg-input-toggle can not be required
|
|
820
|
-
const requiredInputs = editableInputs.filter(input => !isMgInputToggle(input) && input.required);
|
|
863
|
+
const requiredInputs = editableInputs.filter((input) => !isMgInputToggle(input) && input.required);
|
|
821
864
|
// All inputs are required
|
|
822
|
-
if ([requiredInputs.length, editableInputs.length].every(length => length === 1) ||
|
|
823
|
-
(requiredInputs.length > 1 &&
|
|
865
|
+
if ([requiredInputs.length, editableInputs.length].every((length) => length === 1) ||
|
|
866
|
+
(requiredInputs.length > 1 &&
|
|
867
|
+
requiredInputs.length === editableInputs.filter((input) => !isMgInputToggle(input)).length)) {
|
|
824
868
|
this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
|
|
825
869
|
this.classCollection.add(this.classAllRequired);
|
|
826
870
|
}
|
|
@@ -844,7 +888,7 @@ const MgForm = class {
|
|
|
844
888
|
this.checkValidity = () => {
|
|
845
889
|
// Update required on input event
|
|
846
890
|
this.setRequiredMessage();
|
|
847
|
-
this.valid = !this.mgInputs.some(input => input.invalid);
|
|
891
|
+
this.valid = !this.mgInputs.some((input) => input.invalid);
|
|
848
892
|
this.invalid = !this.valid;
|
|
849
893
|
// We need to send valid event if it is the same value
|
|
850
894
|
this.formValid.emit(this.valid);
|
|
@@ -865,7 +909,7 @@ const MgForm = class {
|
|
|
865
909
|
this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT'));
|
|
866
910
|
// Set inputs readonly or disabled based on form configuration
|
|
867
911
|
// Othewise listen to events
|
|
868
|
-
this.mgInputs.forEach(input => {
|
|
912
|
+
this.mgInputs.forEach((input) => {
|
|
869
913
|
if (this.labelOnTop) {
|
|
870
914
|
input.labelOnTop = true;
|
|
871
915
|
}
|
|
@@ -923,7 +967,7 @@ const MgForm = class {
|
|
|
923
967
|
async displayError() {
|
|
924
968
|
if (!this.readonly) {
|
|
925
969
|
const mgFieldsets = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-FIELDSET'));
|
|
926
|
-
[...mgFieldsets, ...this.mgInputs].forEach(input => {
|
|
970
|
+
[...mgFieldsets, ...this.mgInputs].forEach((input) => {
|
|
927
971
|
var _a;
|
|
928
972
|
(_a = input.displayError) === null || _a === void 0 ? void 0 : _a.call(input);
|
|
929
973
|
});
|
|
@@ -961,7 +1005,7 @@ const MgForm = class {
|
|
|
961
1005
|
// Get slotted mgButtons
|
|
962
1006
|
this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));
|
|
963
1007
|
// Set button form identifier
|
|
964
|
-
this.mgButtons.forEach(mgButton => {
|
|
1008
|
+
this.mgButtons.forEach((mgButton) => {
|
|
965
1009
|
mgButton.setAttribute('form', this.identifier);
|
|
966
1010
|
if (mgButton.type === 'reset') {
|
|
967
1011
|
mgButton.addEventListener('click', () => {
|
|
@@ -988,8 +1032,8 @@ const MgForm = class {
|
|
|
988
1032
|
componentDidLoad() {
|
|
989
1033
|
// Update mgInputs when mgForm content change
|
|
990
1034
|
const observerOptions = { childList: true, subtree: true };
|
|
991
|
-
new MutationObserver(mutations => {
|
|
992
|
-
if (mutations.some(mutation => Object.keys(observerOptions).includes(mutation.type))) {
|
|
1035
|
+
new MutationObserver((mutations) => {
|
|
1036
|
+
if (mutations.some((mutation) => Object.keys(observerOptions).includes(mutation.type))) {
|
|
993
1037
|
this.setMgInputs();
|
|
994
1038
|
this.checkValidity();
|
|
995
1039
|
}
|
|
@@ -1000,7 +1044,7 @@ const MgForm = class {
|
|
|
1000
1044
|
* @returns HTML Element
|
|
1001
1045
|
*/
|
|
1002
1046
|
render() {
|
|
1003
|
-
return (h("form", { key: '
|
|
1047
|
+
return (h("form", { key: '65d3e11931386af2dedd953f58505e2c71cd99ff', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '7546db3b8a4259fd7d092cc7b912b6593fab9d84', innerHTML: this.requiredMessageText }), h("slot", { key: '0023ed360230ea97395a249b230e02bb7a4bdbda' }), !this.readonly && !this.disabled && h("slot", { key: 'de84e088ff029eff487be1ed8b4766425c558c29', name: "actions" })));
|
|
1004
1048
|
}
|
|
1005
1049
|
get element() { return getElement(this); }
|
|
1006
1050
|
static get watchers() { return {
|
|
@@ -1041,9 +1085,7 @@ const variants$2 = ['success', 'warning', 'danger', 'info', 'app', 'neutral'];
|
|
|
1041
1085
|
*/
|
|
1042
1086
|
const variantStyles$1 = ['icon', 'background', 'full'];
|
|
1043
1087
|
|
|
1044
|
-
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>' };
|
|
1045
|
-
|
|
1046
|
-
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)}}`;
|
|
1088
|
+
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)}}`;
|
|
1047
1089
|
|
|
1048
1090
|
const MgIcon = class {
|
|
1049
1091
|
constructor(hostRef) {
|
|
@@ -1203,7 +1245,7 @@ const sizes$1 = ['small', 'medium', 'large'];
|
|
|
1203
1245
|
*/
|
|
1204
1246
|
const directions = ['vertical', 'horizontal'];
|
|
1205
1247
|
|
|
1206
|
-
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:
|
|
1248
|
+
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%}`;
|
|
1207
1249
|
|
|
1208
1250
|
const MgIllustratedMessage = class {
|
|
1209
1251
|
constructor(hostRef) {
|
|
@@ -1281,7 +1323,7 @@ const MgIllustratedMessage = class {
|
|
|
1281
1323
|
* @returns HTML Element
|
|
1282
1324
|
*/
|
|
1283
1325
|
render() {
|
|
1284
|
-
return (h("div", { key: '
|
|
1326
|
+
return (h("div", { key: '87fb97f2eff23d0793e1829a2ac533be7c670f59', class: this.classCollection.join() }, h("div", { key: 'c3395aefc56c00f625a7510ce73204097abbfc06', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '2505490d95166f2490e75cac403a90c693507502', name: "illustration" })), h("div", { key: '12b89745d353f0a31575f48c15d864459eb2d77e', class: "mg-c-illustrated-message__slots" }, h("slot", { key: 'c56b865f24c818ef40e3e0adb7efb698e509fba9', name: "title" }), h("slot", { key: '018faf36cfd88e1ac38b13636e7c7da7b44c9b40', name: "details" }))));
|
|
1285
1327
|
}
|
|
1286
1328
|
get element() { return getElement(this); }
|
|
1287
1329
|
static get watchers() { return {
|
|
@@ -1295,7 +1337,7 @@ const MgIllustratedMessage = class {
|
|
|
1295
1337
|
};
|
|
1296
1338
|
MgIllustratedMessage.style = mgIllustratedMessageCss();
|
|
1297
1339
|
|
|
1298
|
-
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
|
|
1340
|
+
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}}`;
|
|
1299
1341
|
|
|
1300
1342
|
const MgInput = class {
|
|
1301
1343
|
constructor(hostRef) {
|
|
@@ -1303,6 +1345,11 @@ const MgInput = class {
|
|
|
1303
1345
|
this.slotLabel = 'label';
|
|
1304
1346
|
this.slotError = 'error';
|
|
1305
1347
|
this.slotHelpText = 'help-text';
|
|
1348
|
+
// Block-level elements that cannot be nested inside a <p>.
|
|
1349
|
+
// helpText/errorMessage are injected via innerHTML and may contain HTML: when block content
|
|
1350
|
+
// is detected we fall back to <div> to keep the markup valid (RGAA 8.2), otherwise we use a
|
|
1351
|
+
// semantic <p> for the (textual) message (RGAA 8.9).
|
|
1352
|
+
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;
|
|
1306
1353
|
// style
|
|
1307
1354
|
this.classInput = 'mg-c-input';
|
|
1308
1355
|
this.classHasError = 'mg-c-input--has-error';
|
|
@@ -1375,7 +1422,7 @@ const MgInput = class {
|
|
|
1375
1422
|
* Get tooltip node
|
|
1376
1423
|
* @returns mg-tooltip
|
|
1377
1424
|
*/
|
|
1378
|
-
this.renderTooltip = () => (h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, h("mg-icon", { icon: "info-circle" })));
|
|
1425
|
+
this.renderTooltip = () => (h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, h("mg-icon", { icon: "info-circle-outline" })));
|
|
1379
1426
|
/**
|
|
1380
1427
|
* Get input container element
|
|
1381
1428
|
* @returns ordered elements
|
|
@@ -1385,7 +1432,10 @@ const MgInput = class {
|
|
|
1385
1432
|
this.helptextMessageSlotElement && (h("div", { class: "mg-c-input__help-text" }, h("slot", { name: this.slotHelpText }))),
|
|
1386
1433
|
!this.isDisabled && this.errorMessage && (h("div", { class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { name: this.slotError }))),
|
|
1387
1434
|
];
|
|
1388
|
-
const inputSlot = (h("div", { class: "mg-c-input__input" }, h("slot", null), this.tooltip &&
|
|
1435
|
+
const inputSlot = (h("div", { class: "mg-c-input__input" }, h("slot", null), this.tooltip &&
|
|
1436
|
+
!this.labelOnTop &&
|
|
1437
|
+
(this.tooltipPosition === 'input' || this.labelHide) &&
|
|
1438
|
+
this.renderTooltip()));
|
|
1389
1439
|
if (this.inputsOnBottom) {
|
|
1390
1440
|
return [...elements, inputSlot];
|
|
1391
1441
|
}
|
|
@@ -1482,7 +1532,7 @@ const MgInput = class {
|
|
|
1482
1532
|
this.ariaDescribedbyIDs = this.ariaDescribedbyIDs.split(' ');
|
|
1483
1533
|
return;
|
|
1484
1534
|
}
|
|
1485
|
-
else if (!(Array.isArray(this.ariaDescribedbyIDs) && this.ariaDescribedbyIDs.every(entry => typeof entry === 'string'))) {
|
|
1535
|
+
else if (!(Array.isArray(this.ariaDescribedbyIDs) && this.ariaDescribedbyIDs.every((entry) => typeof entry === 'string'))) {
|
|
1486
1536
|
this.ariaDescribedbyIDs = [];
|
|
1487
1537
|
return;
|
|
1488
1538
|
}
|
|
@@ -1515,7 +1565,6 @@ const MgInput = class {
|
|
|
1515
1565
|
/**
|
|
1516
1566
|
* Component classes
|
|
1517
1567
|
*/
|
|
1518
|
-
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1519
1568
|
watchClass() {
|
|
1520
1569
|
if (!this.element.classList.contains(this.classInput)) {
|
|
1521
1570
|
this.element.classList.add(this.classInput);
|
|
@@ -1528,7 +1577,6 @@ const MgInput = class {
|
|
|
1528
1577
|
/**
|
|
1529
1578
|
* Trigger label update
|
|
1530
1579
|
*/
|
|
1531
|
-
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1532
1580
|
watchLabel() {
|
|
1533
1581
|
if (!isValidString(this.label)) {
|
|
1534
1582
|
throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${toString(this.label)}.`);
|
|
@@ -1571,16 +1619,42 @@ const MgInput = class {
|
|
|
1571
1619
|
// update aria-describedby
|
|
1572
1620
|
this.watchAriaDescribedbyIDs();
|
|
1573
1621
|
}
|
|
1622
|
+
/**
|
|
1623
|
+
* Get the semantic tag name for a slotted message.
|
|
1624
|
+
* Phrasing (textual/inline) content uses <p> (RGAA 8.9); block-level content falls back to
|
|
1625
|
+
* <div> to avoid invalid nesting such as <p><p>…</p></p> (RGAA 8.2).
|
|
1626
|
+
* @param content - the HTML content that will be injected in the slot
|
|
1627
|
+
* @returns the tag name to use
|
|
1628
|
+
*/
|
|
1629
|
+
getSlotMessageTagName(content) {
|
|
1630
|
+
return this.blockLevelContentRegExp.test(content) ? 'div' : 'p';
|
|
1631
|
+
}
|
|
1632
|
+
/**
|
|
1633
|
+
* Get the existing slotted element or (re)create it with the expected tag.
|
|
1634
|
+
* The element is recreated when its current tag no longer matches the expected one
|
|
1635
|
+
* (e.g. the content switched from text to block HTML), keeping the slot id and position.
|
|
1636
|
+
* @param slot - the slot name
|
|
1637
|
+
* @param tagName - the expected tag name
|
|
1638
|
+
* @returns the slotted element
|
|
1639
|
+
*/
|
|
1640
|
+
getSlotMessageElement(slot, tagName) {
|
|
1641
|
+
let slotElement = this.element.querySelector(`[slot=${slot}]`);
|
|
1642
|
+
if (slotElement !== null && slotElement.tagName.toLowerCase() !== tagName) {
|
|
1643
|
+
slotElement.remove();
|
|
1644
|
+
slotElement = null;
|
|
1645
|
+
}
|
|
1646
|
+
if (slotElement === null) {
|
|
1647
|
+
slotElement = document.createElement(tagName);
|
|
1648
|
+
slotElement.setAttribute('slot', slot);
|
|
1649
|
+
this.element.appendChild(slotElement);
|
|
1650
|
+
}
|
|
1651
|
+
return slotElement;
|
|
1652
|
+
}
|
|
1574
1653
|
/**
|
|
1575
1654
|
* Render error message
|
|
1576
1655
|
*/
|
|
1577
1656
|
renderErrorMessage() {
|
|
1578
|
-
this.errorMessageSlotElement = this.
|
|
1579
|
-
if (this.errorMessageSlotElement === null) {
|
|
1580
|
-
this.errorMessageSlotElement = document.createElement('div');
|
|
1581
|
-
this.errorMessageSlotElement.setAttribute('slot', this.slotError);
|
|
1582
|
-
this.element.appendChild(this.errorMessageSlotElement);
|
|
1583
|
-
}
|
|
1657
|
+
this.errorMessageSlotElement = this.getSlotMessageElement(this.slotError, this.getSlotMessageTagName(this.errorMessage));
|
|
1584
1658
|
this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);
|
|
1585
1659
|
this.errorMessageSlotElement.innerHTML = this.errorMessage;
|
|
1586
1660
|
}
|
|
@@ -1588,12 +1662,7 @@ const MgInput = class {
|
|
|
1588
1662
|
* Render help text message
|
|
1589
1663
|
*/
|
|
1590
1664
|
renderHelpText() {
|
|
1591
|
-
this.helptextMessageSlotElement = this.
|
|
1592
|
-
if (this.helptextMessageSlotElement === null) {
|
|
1593
|
-
this.helptextMessageSlotElement = document.createElement('div');
|
|
1594
|
-
this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);
|
|
1595
|
-
this.element.appendChild(this.helptextMessageSlotElement);
|
|
1596
|
-
}
|
|
1665
|
+
this.helptextMessageSlotElement = this.getSlotMessageElement(this.slotHelpText, this.getSlotMessageTagName(this.helpText));
|
|
1597
1666
|
this.helptextMessageSlotElement.setAttribute('id', this.helpTextId);
|
|
1598
1667
|
this.helptextMessageSlotElement.innerHTML = this.helpText;
|
|
1599
1668
|
}
|
|
@@ -1632,7 +1701,10 @@ const MgInput = class {
|
|
|
1632
1701
|
*/
|
|
1633
1702
|
render() {
|
|
1634
1703
|
const isGroup = this.isFieldset && !this.isReadonly;
|
|
1635
|
-
return (h(Host, { key: '
|
|
1704
|
+
return (h(Host, { key: 'e5803717999bac5e4a08910008176baeb426f634', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '32b04b05e8a4352536965fcd792f3c206dad9270', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: '2bb360ff8b4a86facb0b7f97fdf7dbbb49b5f6c0', name: this.slotLabel }), this.tooltip &&
|
|
1705
|
+
(this.tooltipPosition === 'label' || this.labelOnTop) &&
|
|
1706
|
+
!this.labelHide &&
|
|
1707
|
+
this.renderTooltip()), h("div", { key: '0c6751757d182029e1ac6ea4f8a4fcc7aeffb85e', class: "mg-c-input__input-container" }, this.inputContainerElements())));
|
|
1636
1708
|
}
|
|
1637
1709
|
get element() { return getElement(this); }
|
|
1638
1710
|
static get watchers() { return {
|
|
@@ -1713,9 +1785,12 @@ const SectionKind = {
|
|
|
1713
1785
|
* @param props - MgInputCheckboxList Interface Props
|
|
1714
1786
|
* @returns input template
|
|
1715
1787
|
*/
|
|
1716
|
-
const MgInputCheckboxList = (props) => (h("div", { class: "mg-c-input__input-group-container", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map(input => {
|
|
1788
|
+
const MgInputCheckboxList = (props) => (h("div", { class: "mg-c-input__input-group-container", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map((input) => {
|
|
1717
1789
|
var _a, _b;
|
|
1718
|
-
return (h("div", { key: input._id, class: {
|
|
1790
|
+
return (h("div", { key: input._id, class: {
|
|
1791
|
+
'mg-c-input__input-group': true,
|
|
1792
|
+
'mg-c-input__input-group--disabled': props.disabled || input.disabled,
|
|
1793
|
+
} }, 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 }), h("label", { htmlFor: input._id }, input.title)));
|
|
1719
1794
|
})));
|
|
1720
1795
|
|
|
1721
1796
|
/**
|
|
@@ -1761,10 +1836,14 @@ const MgInputCheckboxPaginated = (props) => {
|
|
|
1761
1836
|
};
|
|
1762
1837
|
return (h("div", { class: "mg-input-checkbox-paginated mg-c-input__tab", slot: `tab_content-${props.key + 1}` },
|
|
1763
1838
|
// Mass action depends on all checkboxes list, not only displayed items
|
|
1764
|
-
typeof props.handleMassAction === 'function' &&
|
|
1839
|
+
typeof props.handleMassAction === 'function' &&
|
|
1840
|
+
props.checkboxes.length > 0 &&
|
|
1841
|
+
props.checkboxes.some((checkbox) => checkbox.disabled !== true) && (h("mg-tooltip", { slot: "header-action", class: "mg-c-input__tabs-action", message: props.messages.tooltip }, h("mg-button", { variant: "link", onClick: props.handleMassAction }, props.messages.action))), h("div", { class: "mg-c-input__tabs-content" }, 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
|
|
1842
|
+
? props.messages.noValue
|
|
1843
|
+
: props.messages.values.replace('{count}', items.length.toString())), items.length > 0 && (h(MgInputCheckboxList, { checkboxes: items, labelledby: tabId, id: listId, disabled: props.disabled, name: props.name, invalid: props.invalid })), hasNext(props.checkboxes, props.limit) && (h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: handleLoadMoreClick, "aria-controls": listId }, h("mg-icon", { icon: "chevron-down" }), props.messages.showMore)))));
|
|
1765
1844
|
};
|
|
1766
1845
|
|
|
1767
|
-
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
|
|
1846
|
+
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)}`;
|
|
1768
1847
|
|
|
1769
1848
|
/**
|
|
1770
1849
|
* type ICheckboxItem validation function
|
|
@@ -1772,7 +1851,10 @@ const mgInputCheckboxCss = () => `.mg-c-input__readonly-value{min-height:var(--m
|
|
|
1772
1851
|
* @returns match item type
|
|
1773
1852
|
*/
|
|
1774
1853
|
const isCheckboxItems = (items) => Array.isArray(items) &&
|
|
1775
|
-
items.every(item => typeof item === 'object' &&
|
|
1854
|
+
items.every((item) => typeof item === 'object' &&
|
|
1855
|
+
typeof item.title === 'string' &&
|
|
1856
|
+
(item.value === null || typeof item.value === 'boolean') &&
|
|
1857
|
+
item.value !== undefined);
|
|
1776
1858
|
const MgInputCheckbox = class {
|
|
1777
1859
|
constructor(hostRef) {
|
|
1778
1860
|
registerInstance(this, hostRef);
|
|
@@ -1865,7 +1947,7 @@ const MgInputCheckbox = class {
|
|
|
1865
1947
|
* @param event - input event
|
|
1866
1948
|
*/
|
|
1867
1949
|
this.handleInput = (event) => {
|
|
1868
|
-
this.updateCheckboxItems('value', Boolean(event.target.checked), item => item._id === event.target.id);
|
|
1950
|
+
this.updateCheckboxItems('value', Boolean(event.target.checked), (item) => item._id === event.target.id);
|
|
1869
1951
|
this.updateValues();
|
|
1870
1952
|
this.checkValidity();
|
|
1871
1953
|
this.setErrorMessage();
|
|
@@ -1884,11 +1966,12 @@ const MgInputCheckbox = class {
|
|
|
1884
1966
|
return;
|
|
1885
1967
|
}
|
|
1886
1968
|
const enableInputs = Array.from(this.element.shadowRoot.querySelectorAll('input'))
|
|
1887
|
-
.filter(input => !input.hasAttribute('disabled'))
|
|
1969
|
+
.filter((input) => !input.hasAttribute('disabled'))
|
|
1888
1970
|
.map(({ id }) => id);
|
|
1889
|
-
const originInputIndex = enableInputs.findIndex(id => id === event.target.id);
|
|
1971
|
+
const originInputIndex = enableInputs.findIndex((id) => id === event.target.id);
|
|
1890
1972
|
// close popover when tab trigger focus outside its DOM
|
|
1891
|
-
if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) ||
|
|
1973
|
+
if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) ||
|
|
1974
|
+
(originInputIndex === 0 && event.shiftKey && this.searchInput === undefined))
|
|
1892
1975
|
this.mgPopover.display = false;
|
|
1893
1976
|
}
|
|
1894
1977
|
};
|
|
@@ -1934,13 +2017,13 @@ const MgInputCheckbox = class {
|
|
|
1934
2017
|
this.checkValidity();
|
|
1935
2018
|
}
|
|
1936
2019
|
// init active tab to selected if some values are checked
|
|
1937
|
-
this.activeTab = this.checkboxItems.some(items => items.value) ? 2 : 1;
|
|
2020
|
+
this.activeTab = this.checkboxItems.some((items) => items.value) ? 2 : 1;
|
|
1938
2021
|
};
|
|
1939
2022
|
/**
|
|
1940
2023
|
* Update values
|
|
1941
2024
|
*/
|
|
1942
2025
|
this.updateValues = () => {
|
|
1943
|
-
this.value = this.checkboxItems.map(o => {
|
|
2026
|
+
this.value = this.checkboxItems.map((o) => {
|
|
1944
2027
|
delete o._handleBlur;
|
|
1945
2028
|
delete o._handleInput;
|
|
1946
2029
|
delete o._handleKeydown;
|
|
@@ -1957,7 +2040,7 @@ const MgInputCheckbox = class {
|
|
|
1957
2040
|
* Method to update searchResults
|
|
1958
2041
|
*/
|
|
1959
2042
|
this.updateSearchResults = () => {
|
|
1960
|
-
this.searchResults = this.checkboxItems.filter(item => cleanString(item.title).includes(cleanString(this.searchValue)));
|
|
2043
|
+
this.searchResults = this.checkboxItems.filter((item) => cleanString(item.title).includes(cleanString(this.searchValue)));
|
|
1961
2044
|
};
|
|
1962
2045
|
/**
|
|
1963
2046
|
* Method to validate if one of inputs value is checked id required
|
|
@@ -2029,7 +2112,7 @@ const MgInputCheckbox = class {
|
|
|
2029
2112
|
* Manage items to display depending on the search state
|
|
2030
2113
|
* @returns items to display
|
|
2031
2114
|
*/
|
|
2032
|
-
this.getDisplayItems = () =>
|
|
2115
|
+
this.getDisplayItems = () => this.searchValue.length > 0 ? this.searchResults : this.checkboxItems;
|
|
2033
2116
|
/**
|
|
2034
2117
|
* get list of selected checkboxItems
|
|
2035
2118
|
* @returns selected checkboxItems
|
|
@@ -2054,7 +2137,7 @@ const MgInputCheckbox = class {
|
|
|
2054
2137
|
* @returns The rendered readonly value.
|
|
2055
2138
|
*/
|
|
2056
2139
|
this.renderReadonly = (readonlyValue) => {
|
|
2057
|
-
return this.inputVerticalList ? (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map(value => (h("li", { key: value }, h("b", null, value)))))) : (h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
|
|
2140
|
+
return this.inputVerticalList ? (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map((value) => (h("li", { key: value }, h("b", null, value)))))) : (h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
|
|
2058
2141
|
};
|
|
2059
2142
|
/**
|
|
2060
2143
|
* Renders the MgInputCheckboxList component.
|
|
@@ -2165,7 +2248,7 @@ const MgInputCheckbox = class {
|
|
|
2165
2248
|
// - Async operations are completed
|
|
2166
2249
|
// - No timing issues with Stencil's render cycle
|
|
2167
2250
|
// - Keep everything in sync both inside and outside the component
|
|
2168
|
-
return new Promise(resolve => {
|
|
2251
|
+
return new Promise((resolve) => {
|
|
2169
2252
|
requestAnimationFrame(() => {
|
|
2170
2253
|
this.checkValidity();
|
|
2171
2254
|
this.setErrorMessage();
|
|
@@ -2205,14 +2288,14 @@ const MgInputCheckbox = class {
|
|
|
2205
2288
|
*/
|
|
2206
2289
|
async reset() {
|
|
2207
2290
|
if (!this.readonly) {
|
|
2208
|
-
this.value = this.value.map(item => (Object.assign(Object.assign({}, item), { value: false })));
|
|
2291
|
+
this.value = this.value.map((item) => (Object.assign(Object.assign({}, item), { value: false })));
|
|
2209
2292
|
// Use `Promise` as requested for stencil method
|
|
2210
2293
|
// Use `requestAnimationFrame` to ensure:
|
|
2211
2294
|
// - DOM is fully updated before validation
|
|
2212
2295
|
// - Async operations are completed
|
|
2213
2296
|
// - No timing issues with Stencil's render cycle
|
|
2214
2297
|
// - Keep everything in sync both inside and outside the component
|
|
2215
|
-
return new Promise(resolve => {
|
|
2298
|
+
return new Promise((resolve) => {
|
|
2216
2299
|
requestAnimationFrame(() => {
|
|
2217
2300
|
// unlock validity check by reseting customErrorMessage
|
|
2218
2301
|
this.customErrorMessage = { lock: false };
|
|
@@ -2245,7 +2328,7 @@ const MgInputCheckbox = class {
|
|
|
2245
2328
|
* @param condition - condtion to applu change on item
|
|
2246
2329
|
*/
|
|
2247
2330
|
updateCheckboxItems(key, newValue, condition) {
|
|
2248
|
-
this.checkboxItems = this.checkboxItems.map(item => {
|
|
2331
|
+
this.checkboxItems = this.checkboxItems.map((item) => {
|
|
2249
2332
|
if ((typeof condition === 'function' && condition(item)) || condition === undefined)
|
|
2250
2333
|
item[key] = newValue;
|
|
2251
2334
|
return item;
|
|
@@ -2298,7 +2381,7 @@ const MgInputCheckbox = class {
|
|
|
2298
2381
|
const handleMassAction = (kind) => () => {
|
|
2299
2382
|
const displayItems = this.getDisplayItems();
|
|
2300
2383
|
// update only displayed items
|
|
2301
|
-
displayItems.forEach(item => {
|
|
2384
|
+
displayItems.forEach((item) => {
|
|
2302
2385
|
if (!item.disabled) {
|
|
2303
2386
|
item.value = kind !== SectionKind.SELECTED;
|
|
2304
2387
|
}
|
|
@@ -2315,9 +2398,13 @@ const MgInputCheckbox = class {
|
|
|
2315
2398
|
];
|
|
2316
2399
|
return (h("mg-tabs", { identifier: `${this.identifier}-tabs`, class: "mg-c-input__tabs", label: this.messages.input.checkbox.sections.label, items: sections.map((section, key) => ({
|
|
2317
2400
|
label: section.messages.title,
|
|
2318
|
-
badge: {
|
|
2401
|
+
badge: {
|
|
2402
|
+
value: section.checkboxes.length,
|
|
2403
|
+
label: this.messages.input.checkbox.sections.badge.label,
|
|
2404
|
+
role: 'information',
|
|
2405
|
+
},
|
|
2319
2406
|
status: key + 1 === this.activeTab ? Status.ACTIVE : Status.VISIBLE,
|
|
2320
|
-
})), activeTab: this.activeTab, "onActive-tab-change": this.handleActiveTabChange }, sections.map(section => {
|
|
2407
|
+
})), activeTab: this.activeTab, "onActive-tab-change": this.handleActiveTabChange }, sections.map((section) => {
|
|
2321
2408
|
var _a;
|
|
2322
2409
|
return (h(MgInputCheckboxPaginated, Object.assign({}, section, { limit: (_a = this.paginatedLimits[section.key]) !== null && _a !== void 0 ? _a : this.paginatedStep, handleLoadMore: () => this.handlePaginatedLoadMore(section.key) })));
|
|
2323
2410
|
})));
|
|
@@ -2335,12 +2422,12 @@ const MgInputCheckbox = class {
|
|
|
2335
2422
|
checkboxes: this.getDisplayItems(),
|
|
2336
2423
|
};
|
|
2337
2424
|
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) });
|
|
2338
|
-
return (h("div", { class: "mg-c-input__input-container" }, h("mg-popover", {
|
|
2425
|
+
return (h("div", { class: "mg-c-input__input-container" }, h("mg-popover", { identifier: this.getMgPopoverIdentifier(), display: this.hasOpenedPopover, "onDisplay-change": this.handleMgPopoverDisplayChange, "data-fallback-placement": "bottom-end", ref: (el) => {
|
|
2339
2426
|
if (el !== null)
|
|
2340
2427
|
this.mgPopover = el;
|
|
2341
2428
|
} }, h("mg-button", { variant: "secondary", "aria-describedby": `${this.identifier}-title` }, h("mg-icon", { icon: "list" }), this.getSelectValuesButtonMessage()), h("div", { slot: "content", class: "mg-c-input__content" }, this.displaySearchInput ? ([
|
|
2342
2429
|
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 }),
|
|
2343
|
-
this.searchValue.length > 0 ? h(MgInputCheckboxPaginated, Object.assign({}, checkboxesPaginatedSearchProps)) : this.renderCheckboxTabs(props),
|
|
2430
|
+
this.searchValue.length > 0 ? (h(MgInputCheckboxPaginated, Object.assign({}, checkboxesPaginatedSearchProps))) : (this.renderCheckboxTabs(props)),
|
|
2344
2431
|
]) : (h(MgInputCheckboxList, Object.assign({}, props, { id: this.checkboxesId, name: this.name, invalid: this.invalid }))))), this.displaySelectedValues ? (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (h("b", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
|
|
2345
2432
|
}
|
|
2346
2433
|
/**
|
|
@@ -2359,7 +2446,7 @@ const MgInputCheckbox = class {
|
|
|
2359
2446
|
else {
|
|
2360
2447
|
inputContent = this.renderCheckboxMulti();
|
|
2361
2448
|
}
|
|
2362
|
-
return (h("mg-input", { key: '
|
|
2449
|
+
return (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));
|
|
2363
2450
|
}
|
|
2364
2451
|
get element() { return getElement(this); }
|
|
2365
2452
|
static get watchers() { return {
|
|
@@ -2403,7 +2490,7 @@ MgInputCheckbox.style = mgInputCheckboxCss();
|
|
|
2403
2490
|
|
|
2404
2491
|
const DEFAULT_MAX_DATE = '9999-12-31';
|
|
2405
2492
|
|
|
2406
|
-
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
|
|
2493
|
+
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}`;
|
|
2407
2494
|
|
|
2408
2495
|
const MgInputDate = class {
|
|
2409
2496
|
constructor(hostRef) {
|
|
@@ -2475,7 +2562,9 @@ const MgInputDate = class {
|
|
|
2475
2562
|
text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText.expectedFormat));
|
|
2476
2563
|
}
|
|
2477
2564
|
// Replace pattern and date variables
|
|
2478
|
-
return text
|
|
2565
|
+
return text
|
|
2566
|
+
.replace('{pattern}', this.renderPattern())
|
|
2567
|
+
.replace('{date}', localeDate(dateToString(new Date('2025-12-24')), this.systemLocale));
|
|
2479
2568
|
};
|
|
2480
2569
|
/**
|
|
2481
2570
|
* Handle input event
|
|
@@ -2517,7 +2606,9 @@ const MgInputDate = class {
|
|
|
2517
2606
|
* Check if input is valid
|
|
2518
2607
|
*/
|
|
2519
2608
|
this.checkValidity = () => {
|
|
2520
|
-
this.setValidity(this.readonly ||
|
|
2609
|
+
this.setValidity(this.readonly ||
|
|
2610
|
+
this.disabled ||
|
|
2611
|
+
(this.input.checkValidity() && (this.value === null || this.isValidPattern(this.value))));
|
|
2521
2612
|
};
|
|
2522
2613
|
/**
|
|
2523
2614
|
* get input error code
|
|
@@ -2535,7 +2626,9 @@ const MgInputDate = class {
|
|
|
2535
2626
|
error = 'required';
|
|
2536
2627
|
}
|
|
2537
2628
|
// min & max
|
|
2538
|
-
else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) &&
|
|
2629
|
+
else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) &&
|
|
2630
|
+
((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
2631
|
+
this.max !== DEFAULT_MAX_DATE) {
|
|
2539
2632
|
error = 'minMax';
|
|
2540
2633
|
}
|
|
2541
2634
|
// min
|
|
@@ -2655,7 +2748,7 @@ const MgInputDate = class {
|
|
|
2655
2748
|
// - Async operations are completed
|
|
2656
2749
|
// - No timing issues with Stencil's render cycle
|
|
2657
2750
|
// - Keep everything in sync both inside and outside the component
|
|
2658
|
-
return new Promise(resolve => {
|
|
2751
|
+
return new Promise((resolve) => {
|
|
2659
2752
|
requestAnimationFrame(() => {
|
|
2660
2753
|
this.checkValidity();
|
|
2661
2754
|
this.setErrorMessage();
|
|
@@ -2702,7 +2795,7 @@ const MgInputDate = class {
|
|
|
2702
2795
|
// - Async operations are completed
|
|
2703
2796
|
// - No timing issues with Stencil's render cycle
|
|
2704
2797
|
// - Keep everything in sync both inside and outside the component
|
|
2705
|
-
return new Promise(resolve => {
|
|
2798
|
+
return new Promise((resolve) => {
|
|
2706
2799
|
requestAnimationFrame(() => {
|
|
2707
2800
|
// unlock validity check by reseting customErrorMessage
|
|
2708
2801
|
this.customErrorMessage = { lock: false };
|
|
@@ -2762,7 +2855,7 @@ const MgInputDate = class {
|
|
|
2762
2855
|
* @returns HTML Element
|
|
2763
2856
|
*/
|
|
2764
2857
|
render() {
|
|
2765
|
-
return (h("mg-input", { key: '
|
|
2858
|
+
return (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 && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (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) => {
|
|
2766
2859
|
if (el !== null)
|
|
2767
2860
|
this.input = el;
|
|
2768
2861
|
} }))));
|
|
@@ -2805,7 +2898,7 @@ MgInputDate.style = mgInputDateCss();
|
|
|
2805
2898
|
const types = ['decimal', 'integer'];
|
|
2806
2899
|
const formats = ['none', 'number', 'currency', 'percent', 'unit'];
|
|
2807
2900
|
|
|
2808
|
-
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
|
|
2901
|
+
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)}`;
|
|
2809
2902
|
|
|
2810
2903
|
const MgInputNumeric = class {
|
|
2811
2904
|
constructor(hostRef) {
|
|
@@ -2939,7 +3032,9 @@ const MgInputNumeric = class {
|
|
|
2939
3032
|
else {
|
|
2940
3033
|
const formattedMin = this.formatErrorValue(this.min);
|
|
2941
3034
|
const formattedMax = this.formatErrorValue(this.max);
|
|
2942
|
-
this.errorMessage = this.messages.input.numeric.error[inputError]
|
|
3035
|
+
this.errorMessage = this.messages.input.numeric.error[inputError]
|
|
3036
|
+
.replace('{min}', formattedMin)
|
|
3037
|
+
.replace('{max}', formattedMax);
|
|
2943
3038
|
}
|
|
2944
3039
|
}
|
|
2945
3040
|
};
|
|
@@ -2948,7 +3043,7 @@ const MgInputNumeric = class {
|
|
|
2948
3043
|
* @returns error code
|
|
2949
3044
|
*/
|
|
2950
3045
|
this.getInputError = () => {
|
|
2951
|
-
const hasNotEmptyValues = (toControl) => !toControl.some(value => [null, undefined].includes(value));
|
|
3046
|
+
const hasNotEmptyValues = (toControl) => !toControl.some((value) => [null, undefined].includes(value));
|
|
2952
3047
|
// required
|
|
2953
3048
|
if (!this.input.checkValidity() && this.input.validity.valueMissing) {
|
|
2954
3049
|
return 'required';
|
|
@@ -2962,7 +3057,8 @@ const MgInputNumeric = class {
|
|
|
2962
3057
|
return 'max';
|
|
2963
3058
|
}
|
|
2964
3059
|
// both min and max values are set
|
|
2965
|
-
if (hasNotEmptyValues([this.min, this.max, this.numericValue]) &&
|
|
3060
|
+
if (hasNotEmptyValues([this.min, this.max, this.numericValue]) &&
|
|
3061
|
+
(this.numericValue < this.min || this.numericValue > this.max)) {
|
|
2966
3062
|
return 'minMax';
|
|
2967
3063
|
}
|
|
2968
3064
|
return null;
|
|
@@ -3077,7 +3173,7 @@ const MgInputNumeric = class {
|
|
|
3077
3173
|
}
|
|
3078
3174
|
watchMgWidth(newValue) {
|
|
3079
3175
|
// reset width class
|
|
3080
|
-
widths.forEach(width => {
|
|
3176
|
+
widths.forEach((width) => {
|
|
3081
3177
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
3082
3178
|
});
|
|
3083
3179
|
// apply new width
|
|
@@ -3121,7 +3217,7 @@ const MgInputNumeric = class {
|
|
|
3121
3217
|
// - Async operations are completed
|
|
3122
3218
|
// - No timing issues with Stencil's render cycle
|
|
3123
3219
|
// - Keep everything in sync both inside and outside the component
|
|
3124
|
-
return new Promise(resolve => {
|
|
3220
|
+
return new Promise((resolve) => {
|
|
3125
3221
|
requestAnimationFrame(() => {
|
|
3126
3222
|
this.checkValidity();
|
|
3127
3223
|
this.setErrorMessage();
|
|
@@ -3168,7 +3264,7 @@ const MgInputNumeric = class {
|
|
|
3168
3264
|
// - Async operations are completed
|
|
3169
3265
|
// - No timing issues with Stencil's render cycle
|
|
3170
3266
|
// - Keep everything in sync both inside and outside the component
|
|
3171
|
-
return new Promise(resolve => {
|
|
3267
|
+
return new Promise((resolve) => {
|
|
3172
3268
|
requestAnimationFrame(() => {
|
|
3173
3269
|
// unlock validity check by reseting customErrorMessage
|
|
3174
3270
|
this.customErrorMessage = { lock: false };
|
|
@@ -3203,7 +3299,10 @@ const MgInputNumeric = class {
|
|
|
3203
3299
|
* @returns Returns true if the value is valid, otherwise false.
|
|
3204
3300
|
*/
|
|
3205
3301
|
isValidValue(value, regex, integer, decimal) {
|
|
3206
|
-
return (['', '-'].includes(value) ||
|
|
3302
|
+
return (['', '-'].includes(value) ||
|
|
3303
|
+
(regex.exec(value) !== null &&
|
|
3304
|
+
integer.length <= this.integerLength &&
|
|
3305
|
+
decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength)));
|
|
3207
3306
|
}
|
|
3208
3307
|
/**
|
|
3209
3308
|
* Updates the component values based on the validated input value.
|
|
@@ -3214,7 +3313,10 @@ const MgInputNumeric = class {
|
|
|
3214
3313
|
if (this.input !== undefined) {
|
|
3215
3314
|
this.input.value = this.value;
|
|
3216
3315
|
}
|
|
3217
|
-
this.numericValue =
|
|
3316
|
+
this.numericValue =
|
|
3317
|
+
!['', null].includes(this.value) && !isNaN(parseFloat(this.value))
|
|
3318
|
+
? parseFloat(this.value.replace(',', '.'))
|
|
3319
|
+
: null;
|
|
3218
3320
|
if (newValue === null || (newValue === this.storedValue && !Object.is(this.numericValue, -0))) {
|
|
3219
3321
|
this.valueChange.emit(this.numericValue);
|
|
3220
3322
|
}
|
|
@@ -3264,7 +3366,7 @@ const MgInputNumeric = class {
|
|
|
3264
3366
|
* @returns HTML Element
|
|
3265
3367
|
*/
|
|
3266
3368
|
render() {
|
|
3267
|
-
return (h("mg-input", { key: '
|
|
3369
|
+
return (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
|
|
3268
3370
|
? this.readonlyValue && this.renderReadonly()
|
|
3269
3371
|
: [
|
|
3270
3372
|
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) => {
|
|
@@ -3317,7 +3419,7 @@ const MgInputNumeric = class {
|
|
|
3317
3419
|
};
|
|
3318
3420
|
MgInputNumeric.style = mgInputNumericCss();
|
|
3319
3421
|
|
|
3320
|
-
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
|
|
3422
|
+
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}`;
|
|
3321
3423
|
|
|
3322
3424
|
const MgInputPassword = class {
|
|
3323
3425
|
constructor(hostRef) {
|
|
@@ -3446,7 +3548,7 @@ const MgInputPassword = class {
|
|
|
3446
3548
|
}
|
|
3447
3549
|
watchMgWidth(newValue) {
|
|
3448
3550
|
// reset width class
|
|
3449
|
-
widths.forEach(width => {
|
|
3551
|
+
widths.forEach((width) => {
|
|
3450
3552
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
3451
3553
|
});
|
|
3452
3554
|
// apply new width
|
|
@@ -3470,7 +3572,7 @@ const MgInputPassword = class {
|
|
|
3470
3572
|
// - Async operations are completed
|
|
3471
3573
|
// - No timing issues with Stencil's render cycle
|
|
3472
3574
|
// - Keep everything in sync both inside and outside the component
|
|
3473
|
-
return new Promise(resolve => {
|
|
3575
|
+
return new Promise((resolve) => {
|
|
3474
3576
|
requestAnimationFrame(() => {
|
|
3475
3577
|
this.checkValidity();
|
|
3476
3578
|
this.setErrorMessage();
|
|
@@ -3517,7 +3619,7 @@ const MgInputPassword = class {
|
|
|
3517
3619
|
// - Async operations are completed
|
|
3518
3620
|
// - No timing issues with Stencil's render cycle
|
|
3519
3621
|
// - Keep everything in sync both inside and outside the component
|
|
3520
|
-
return new Promise(resolve => {
|
|
3622
|
+
return new Promise((resolve) => {
|
|
3521
3623
|
requestAnimationFrame(() => {
|
|
3522
3624
|
// unlock validity check by reseting customErrorMessage
|
|
3523
3625
|
this.customErrorMessage = { lock: false };
|
|
@@ -3569,7 +3671,7 @@ const MgInputPassword = class {
|
|
|
3569
3671
|
* @returns HTML Element
|
|
3570
3672
|
*/
|
|
3571
3673
|
render() {
|
|
3572
|
-
return (h("mg-input", { key: '
|
|
3674
|
+
return (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 && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
3573
3675
|
if (el !== null)
|
|
3574
3676
|
this.input = el;
|
|
3575
3677
|
} }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: (this.displayPassword ? 'eye-slash' : 'eye') }))))));
|
|
@@ -3599,14 +3701,16 @@ const MgInputPassword = class {
|
|
|
3599
3701
|
};
|
|
3600
3702
|
MgInputPassword.style = mgInputPasswordCss();
|
|
3601
3703
|
|
|
3602
|
-
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
|
|
3704
|
+
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}`;
|
|
3603
3705
|
|
|
3604
3706
|
/**
|
|
3605
3707
|
* type Option validation function
|
|
3606
3708
|
* @param option - radio option
|
|
3607
3709
|
* @returns radio option type is valid
|
|
3608
3710
|
*/
|
|
3609
|
-
const isOption$3 = (option) => typeof option === 'object' &&
|
|
3711
|
+
const isOption$3 = (option) => typeof option === 'object' &&
|
|
3712
|
+
typeof option.title === 'string' &&
|
|
3713
|
+
option.value !== undefined;
|
|
3610
3714
|
const MgInputRadio = class {
|
|
3611
3715
|
constructor(hostRef) {
|
|
3612
3716
|
registerInstance(this, hostRef);
|
|
@@ -3715,7 +3819,7 @@ const MgInputRadio = class {
|
|
|
3715
3819
|
this.readonlyValue = newValue;
|
|
3716
3820
|
}
|
|
3717
3821
|
else if (Array.isArray(this.items) && this.items.every(isOption$3)) {
|
|
3718
|
-
this.readonlyValue = (_a = this.items.find(item => item.value === newValue)) === null || _a === void 0 ? void 0 : _a.title;
|
|
3822
|
+
this.readonlyValue = (_a = this.items.find((item) => item.value === newValue)) === null || _a === void 0 ? void 0 : _a.title;
|
|
3719
3823
|
}
|
|
3720
3824
|
else {
|
|
3721
3825
|
this.readonlyValue = null;
|
|
@@ -3729,10 +3833,10 @@ const MgInputRadio = class {
|
|
|
3729
3833
|
}
|
|
3730
3834
|
// String array
|
|
3731
3835
|
else if (allItemsAreString(newValue)) {
|
|
3732
|
-
this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
|
|
3836
|
+
this.options = newValue.map((item) => ({ title: item, value: item, disabled: this.disabled }));
|
|
3733
3837
|
}
|
|
3734
3838
|
// Object array
|
|
3735
|
-
else if (newValue && newValue.every(item => isOption$3(item))) {
|
|
3839
|
+
else if (newValue && newValue.every((item) => isOption$3(item))) {
|
|
3736
3840
|
this.options = newValue;
|
|
3737
3841
|
}
|
|
3738
3842
|
else {
|
|
@@ -3752,7 +3856,7 @@ const MgInputRadio = class {
|
|
|
3752
3856
|
this.classCollection.delete(classReadonly);
|
|
3753
3857
|
}
|
|
3754
3858
|
handleValidityChange(newValue, _oldValue, prop) {
|
|
3755
|
-
this.inputs.forEach(input => {
|
|
3859
|
+
this.inputs.forEach((input) => {
|
|
3756
3860
|
input[prop] = newValue;
|
|
3757
3861
|
});
|
|
3758
3862
|
this.checkValidity();
|
|
@@ -3785,7 +3889,7 @@ const MgInputRadio = class {
|
|
|
3785
3889
|
// - Async operations are completed
|
|
3786
3890
|
// - No timing issues with Stencil's render cycle
|
|
3787
3891
|
// - Keep everything in sync both inside and outside the component
|
|
3788
|
-
return new Promise(resolve => {
|
|
3892
|
+
return new Promise((resolve) => {
|
|
3789
3893
|
requestAnimationFrame(() => {
|
|
3790
3894
|
this.checkValidity();
|
|
3791
3895
|
this.setErrorMessage();
|
|
@@ -3832,7 +3936,7 @@ const MgInputRadio = class {
|
|
|
3832
3936
|
// - Async operations are completed
|
|
3833
3937
|
// - No timing issues with Stencil's render cycle
|
|
3834
3938
|
// - Keep everything in sync both inside and outside the component
|
|
3835
|
-
return new Promise(resolve => {
|
|
3939
|
+
return new Promise((resolve) => {
|
|
3836
3940
|
requestAnimationFrame(() => {
|
|
3837
3941
|
// unlock validity check by reseting customErrorMessage
|
|
3838
3942
|
this.customErrorMessage = { lock: false };
|
|
@@ -3887,7 +3991,10 @@ const MgInputRadio = class {
|
|
|
3887
3991
|
* @returns HTML Element
|
|
3888
3992
|
*/
|
|
3889
3993
|
render() {
|
|
3890
|
-
return (h("mg-input", { key: '
|
|
3994
|
+
return (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 && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("div", { class: "mg-c-input__input-group-container" }, this.options.map((input, index) => (h("div", { key: input.title, class: {
|
|
3995
|
+
'mg-c-input__input-group': true,
|
|
3996
|
+
'mg-c-input__input-group--disabled': this.disabled || input.disabled,
|
|
3997
|
+
} }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
|
|
3891
3998
|
if (el !== null)
|
|
3892
3999
|
this.inputs[index] = el;
|
|
3893
4000
|
} }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));
|
|
@@ -3920,7 +4027,7 @@ const MgInputRadio = class {
|
|
|
3920
4027
|
};
|
|
3921
4028
|
MgInputRadio.style = mgInputRadioCss();
|
|
3922
4029
|
|
|
3923
|
-
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
|
|
4030
|
+
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%}}`;
|
|
3924
4031
|
|
|
3925
4032
|
/**
|
|
3926
4033
|
* Check if item is a well configured option
|
|
@@ -3933,13 +4040,15 @@ const isOption$2 = (option) => typeof option === 'object' && typeof option.title
|
|
|
3933
4040
|
* @param items - select option
|
|
3934
4041
|
* @returns select option array type is valid
|
|
3935
4042
|
*/
|
|
3936
|
-
const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption$2(item));
|
|
4043
|
+
const allItemsAreOptions = (items) => Array.isArray(items) && items.every((item) => isOption$2(item));
|
|
3937
4044
|
/**
|
|
3938
4045
|
* Check if item is a well configured optgroup
|
|
3939
4046
|
* @param optgroup - select option
|
|
3940
4047
|
* @returns select optgroup type is valid
|
|
3941
4048
|
*/
|
|
3942
|
-
const isOptGroup = (optgroup) => typeof optgroup === 'object' &&
|
|
4049
|
+
const isOptGroup = (optgroup) => typeof optgroup === 'object' &&
|
|
4050
|
+
typeof optgroup.group === 'string' &&
|
|
4051
|
+
allItemsAreOptions(optgroup.options);
|
|
3943
4052
|
/**
|
|
3944
4053
|
* Ensure options can be unambiguously differentiated by their title
|
|
3945
4054
|
* Two options can share the same title only when they belong to different groups
|
|
@@ -3968,7 +4077,7 @@ const validateUniqueTitles = (items) => {
|
|
|
3968
4077
|
const groupOptions = (acc, { group, title, value, disabled }) => {
|
|
3969
4078
|
if (group !== undefined) {
|
|
3970
4079
|
// Check if group is already created
|
|
3971
|
-
const optGroup = acc.find(grp => grp.group === group);
|
|
4080
|
+
const optGroup = acc.find((grp) => grp.group === group);
|
|
3972
4081
|
// Add to group
|
|
3973
4082
|
if (optGroup !== undefined) {
|
|
3974
4083
|
optGroup.options.push({ title, value, disabled });
|
|
@@ -4039,10 +4148,10 @@ const MgInputSelect = class {
|
|
|
4039
4148
|
this.getReadonlyValue = () => {
|
|
4040
4149
|
var _a;
|
|
4041
4150
|
if (allItemsAreString(this.items) && typeof this.value === 'string') {
|
|
4042
|
-
return this.items.find(item => item === this.value);
|
|
4151
|
+
return this.items.find((item) => item === this.value);
|
|
4043
4152
|
}
|
|
4044
4153
|
else if (allItemsAreOptions(this.items)) {
|
|
4045
|
-
return (_a = this.items.find(item => item.value === this.value)) === null || _a === void 0 ? void 0 : _a.title;
|
|
4154
|
+
return (_a = this.items.find((item) => item.value === this.value)) === null || _a === void 0 ? void 0 : _a.title;
|
|
4046
4155
|
}
|
|
4047
4156
|
else {
|
|
4048
4157
|
return null;
|
|
@@ -4053,7 +4162,7 @@ const MgInputSelect = class {
|
|
|
4053
4162
|
* 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
|
|
4054
4163
|
* @returns flat select options
|
|
4055
4164
|
*/
|
|
4056
|
-
this.getOptions = () => this.options.flatMap(option => (isOptGroup(option) ? option.options : [option]));
|
|
4165
|
+
this.getOptions = () => this.options.flatMap((option) => (isOptGroup(option) ? option.options : [option]));
|
|
4057
4166
|
/**
|
|
4058
4167
|
* Get the option matching the current select value
|
|
4059
4168
|
* @returns matching option or undefined
|
|
@@ -4067,7 +4176,7 @@ const MgInputSelect = class {
|
|
|
4067
4176
|
// The select value is normally the render index of the selected option
|
|
4068
4177
|
const optionByIndex = options[Number(this.input.value)];
|
|
4069
4178
|
// Fallback for an unknown value injected programmatically (stored as a disabled option keyed by its own value)
|
|
4070
|
-
return optionByIndex !== null && optionByIndex !== void 0 ? optionByIndex : options.find(option => option.value === this.input.value);
|
|
4179
|
+
return optionByIndex !== null && optionByIndex !== void 0 ? optionByIndex : options.find((option) => option.value === this.input.value);
|
|
4071
4180
|
};
|
|
4072
4181
|
/**
|
|
4073
4182
|
* Handle input event
|
|
@@ -4152,18 +4261,18 @@ const MgInputSelect = class {
|
|
|
4152
4261
|
}
|
|
4153
4262
|
// String array
|
|
4154
4263
|
else if (allItemsAreString(newValue)) {
|
|
4155
|
-
validateUniqueTitles(newValue.map(item => ({ title: item })));
|
|
4264
|
+
validateUniqueTitles(newValue.map((item) => ({ title: item })));
|
|
4156
4265
|
if (typeof this.value === 'string') {
|
|
4157
4266
|
this.valueExist = newValue.includes(this.value);
|
|
4158
4267
|
}
|
|
4159
|
-
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
4268
|
+
this.options = newValue.map((item) => ({ title: item, value: item }));
|
|
4160
4269
|
}
|
|
4161
4270
|
// Object array
|
|
4162
4271
|
else if (allItemsAreOptions(newValue)) {
|
|
4163
4272
|
validateUniqueTitles(newValue);
|
|
4164
|
-
this.valueExist = newValue.map(item => item.value).includes(this.value);
|
|
4273
|
+
this.valueExist = newValue.map((item) => item.value).includes(this.value);
|
|
4165
4274
|
// Grouped object options
|
|
4166
|
-
if (newValue.some(item => Boolean(item.group))) {
|
|
4275
|
+
if (newValue.some((item) => Boolean(item.group))) {
|
|
4167
4276
|
this.options = newValue.reduce(groupOptions, []);
|
|
4168
4277
|
}
|
|
4169
4278
|
// Standart object options
|
|
@@ -4199,7 +4308,7 @@ const MgInputSelect = class {
|
|
|
4199
4308
|
}
|
|
4200
4309
|
watchMgWidth(newValue) {
|
|
4201
4310
|
// reset width class
|
|
4202
|
-
widths.forEach(width => {
|
|
4311
|
+
widths.forEach((width) => {
|
|
4203
4312
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
4204
4313
|
});
|
|
4205
4314
|
// apply new width
|
|
@@ -4223,7 +4332,7 @@ const MgInputSelect = class {
|
|
|
4223
4332
|
// - Async operations are completed
|
|
4224
4333
|
// - No timing issues with Stencil's render cycle
|
|
4225
4334
|
// - Keep everything in sync both inside and outside the component
|
|
4226
|
-
return new Promise(resolve => {
|
|
4335
|
+
return new Promise((resolve) => {
|
|
4227
4336
|
requestAnimationFrame(() => {
|
|
4228
4337
|
this.checkValidity();
|
|
4229
4338
|
this.setErrorMessage();
|
|
@@ -4270,7 +4379,7 @@ const MgInputSelect = class {
|
|
|
4270
4379
|
// - Async operations are completed
|
|
4271
4380
|
// - No timing issues with Stencil's render cycle
|
|
4272
4381
|
// - Keep everything in sync both inside and outside the component
|
|
4273
|
-
return new Promise(resolve => {
|
|
4382
|
+
return new Promise((resolve) => {
|
|
4274
4383
|
requestAnimationFrame(() => {
|
|
4275
4384
|
// unlock validity check by reseting customErrorMessage
|
|
4276
4385
|
this.customErrorMessage = { lock: false };
|
|
@@ -4333,11 +4442,11 @@ const MgInputSelect = class {
|
|
|
4333
4442
|
const readonlyValue = this.getReadonlyValue();
|
|
4334
4443
|
// Running index shared across groups, so each option gets a unique value matching its position in getOptions()
|
|
4335
4444
|
let optionIndex = 0;
|
|
4336
|
-
return (h("mg-input", { key: '
|
|
4445
|
+
return (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 && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
4337
4446
|
if (el !== null)
|
|
4338
4447
|
this.input = el;
|
|
4339
4448
|
} }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
4340
|
-
h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (h("optgroup", { label: option.group, key: option.group }, option.options.map(groupedOption => this.renderOption(groupedOption, optionIndex++)))) : (isOption$2(option) && this.renderOption(option, optionIndex++)))))));
|
|
4449
|
+
h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map((option) => isOptGroup(option) ? (h("optgroup", { label: option.group, key: option.group }, option.options.map((groupedOption) => this.renderOption(groupedOption, optionIndex++)))) : (isOption$2(option) && this.renderOption(option, optionIndex++)))))));
|
|
4341
4450
|
}
|
|
4342
4451
|
get element() { return getElement(this); }
|
|
4343
4452
|
static get watchers() { return {
|
|
@@ -4375,14 +4484,16 @@ const helpTextTypes = ['email', 'emails', 'url'];
|
|
|
4375
4484
|
// Define possible text types
|
|
4376
4485
|
const textTypes = ['text', 'search', 'tel', ...helpTextTypes];
|
|
4377
4486
|
|
|
4378
|
-
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
|
|
4487
|
+
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))}`;
|
|
4379
4488
|
|
|
4380
4489
|
/**
|
|
4381
4490
|
* Check if object is an option
|
|
4382
4491
|
* @param option - object to validate
|
|
4383
4492
|
* @returns true id object is an option
|
|
4384
4493
|
*/
|
|
4385
|
-
const isOption$1 = (option) => typeof option === 'object' &&
|
|
4494
|
+
const isOption$1 = (option) => typeof option === 'object' &&
|
|
4495
|
+
typeof option.title === 'string' &&
|
|
4496
|
+
option.value !== undefined;
|
|
4386
4497
|
/**
|
|
4387
4498
|
* Check if datalist options are well structured.
|
|
4388
4499
|
* @param options - Datalist options to check.
|
|
@@ -4459,7 +4570,8 @@ const MgInputText = class {
|
|
|
4459
4570
|
*/
|
|
4460
4571
|
this.validatePattern = () => {
|
|
4461
4572
|
if ((this.pattern !== undefined || this.patternErrorMessage !== undefined) && // At least one is defined
|
|
4462
|
-
(!isValidString(this.pattern) ||
|
|
4573
|
+
(!isValidString(this.pattern) ||
|
|
4574
|
+
(!helpTextTypes.includes(this.type) && !isValidString(this.patternErrorMessage))) // Both must be defined
|
|
4463
4575
|
) {
|
|
4464
4576
|
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}'".`);
|
|
4465
4577
|
}
|
|
@@ -4532,7 +4644,7 @@ const MgInputText = class {
|
|
|
4532
4644
|
this.slotContent = slotAppendInput[0].textContent;
|
|
4533
4645
|
}
|
|
4534
4646
|
}
|
|
4535
|
-
else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
|
|
4647
|
+
else if (slotAppendInput.filter((slot) => slot.nodeName === 'MG-BUTTON').length > 1) {
|
|
4536
4648
|
this.classCollection.add(this.classIsInputGroupAppend);
|
|
4537
4649
|
this.classCollection.add(this.classHasButtonsGroupAppend);
|
|
4538
4650
|
}
|
|
@@ -4553,7 +4665,7 @@ const MgInputText = class {
|
|
|
4553
4665
|
handleValue(newValue) {
|
|
4554
4666
|
var _a, _b;
|
|
4555
4667
|
if ((_a = this.datalistoptions) === null || _a === void 0 ? void 0 : _a.every(isOption$1)) {
|
|
4556
|
-
this.valueChange.emit(((_b = this.datalistoptions.find(option => option.title === newValue)) === null || _b === void 0 ? void 0 : _b.value) || newValue);
|
|
4668
|
+
this.valueChange.emit(((_b = this.datalistoptions.find((option) => option.title === newValue)) === null || _b === void 0 ? void 0 : _b.value) || newValue);
|
|
4557
4669
|
}
|
|
4558
4670
|
else {
|
|
4559
4671
|
this.valueChange.emit(newValue);
|
|
@@ -4601,7 +4713,7 @@ const MgInputText = class {
|
|
|
4601
4713
|
}
|
|
4602
4714
|
watchMgWidth(newValue) {
|
|
4603
4715
|
// reset width class
|
|
4604
|
-
widths.forEach(width => {
|
|
4716
|
+
widths.forEach((width) => {
|
|
4605
4717
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
4606
4718
|
});
|
|
4607
4719
|
// apply new width
|
|
@@ -4641,7 +4753,7 @@ const MgInputText = class {
|
|
|
4641
4753
|
// - Async operations are completed
|
|
4642
4754
|
// - No timing issues with Stencil's render cycle
|
|
4643
4755
|
// - Keep everything in sync both inside and outside the component
|
|
4644
|
-
return new Promise(resolve => {
|
|
4756
|
+
return new Promise((resolve) => {
|
|
4645
4757
|
requestAnimationFrame(() => {
|
|
4646
4758
|
this.checkValidity();
|
|
4647
4759
|
this.setErrorMessage();
|
|
@@ -4688,7 +4800,7 @@ const MgInputText = class {
|
|
|
4688
4800
|
// - Async operations are completed
|
|
4689
4801
|
// - No timing issues with Stencil's render cycle
|
|
4690
4802
|
// - Keep everything in sync both inside and outside the component
|
|
4691
|
-
return new Promise(resolve => {
|
|
4803
|
+
return new Promise((resolve) => {
|
|
4692
4804
|
requestAnimationFrame(() => {
|
|
4693
4805
|
// unlock validity check by reseting customErrorMessage
|
|
4694
4806
|
this.customErrorMessage = { lock: false };
|
|
@@ -4750,15 +4862,17 @@ const MgInputText = class {
|
|
|
4750
4862
|
* @returns HTML Element
|
|
4751
4863
|
*/
|
|
4752
4864
|
render() {
|
|
4753
|
-
return (h("mg-input", { key: '
|
|
4865
|
+
return (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
|
|
4754
4866
|
? this.value && this.renderReadonly()
|
|
4755
4867
|
: [
|
|
4756
4868
|
h("div", { key: "input", class: "mg-c-input__input-group-container", style: {
|
|
4757
|
-
'--mg-c-character-left-message-length': (!this.characterLeftHide
|
|
4869
|
+
'--mg-c-character-left-message-length': (!this.characterLeftHide
|
|
4870
|
+
? this.maxlength.toString().length * 2 + 1
|
|
4871
|
+
: 0).toString(),
|
|
4758
4872
|
} }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), 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) => {
|
|
4759
4873
|
if (el !== null)
|
|
4760
4874
|
this.input = el;
|
|
4761
|
-
} }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (h("option", { value: isOption$1(option) ? option.title : option, key: option }))))), !this.characterLeftHide && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))),
|
|
4875
|
+
} }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map((option) => (h("option", { value: isOption$1(option) ? option.title : option, key: option }))))), !this.characterLeftHide && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))),
|
|
4762
4876
|
h("slot", { key: "slot", name: "append-input" }),
|
|
4763
4877
|
]));
|
|
4764
4878
|
}
|
|
@@ -4808,7 +4922,7 @@ const MgInputText = class {
|
|
|
4808
4922
|
};
|
|
4809
4923
|
MgInputText.style = mgInputTextCss();
|
|
4810
4924
|
|
|
4811
|
-
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
|
|
4925
|
+
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}}`;
|
|
4812
4926
|
|
|
4813
4927
|
const MgInputTextarea = class {
|
|
4814
4928
|
constructor(hostRef) {
|
|
@@ -4955,7 +5069,7 @@ const MgInputTextarea = class {
|
|
|
4955
5069
|
}
|
|
4956
5070
|
watchMgWidth(newValue) {
|
|
4957
5071
|
// reset width class
|
|
4958
|
-
widths.forEach(width => {
|
|
5072
|
+
widths.forEach((width) => {
|
|
4959
5073
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
4960
5074
|
});
|
|
4961
5075
|
// apply new width
|
|
@@ -4992,7 +5106,7 @@ const MgInputTextarea = class {
|
|
|
4992
5106
|
// - Async operations are completed
|
|
4993
5107
|
// - No timing issues with Stencil's render cycle
|
|
4994
5108
|
// - Keep everything in sync both inside and outside the component
|
|
4995
|
-
return new Promise(resolve => {
|
|
5109
|
+
return new Promise((resolve) => {
|
|
4996
5110
|
requestAnimationFrame(() => {
|
|
4997
5111
|
this.checkValidity();
|
|
4998
5112
|
this.setErrorMessage();
|
|
@@ -5039,7 +5153,7 @@ const MgInputTextarea = class {
|
|
|
5039
5153
|
// - Async operations are completed
|
|
5040
5154
|
// - No timing issues with Stencil's render cycle
|
|
5041
5155
|
// - Keep everything in sync both inside and outside the component
|
|
5042
|
-
return new Promise(resolve => {
|
|
5156
|
+
return new Promise((resolve) => {
|
|
5043
5157
|
requestAnimationFrame(() => {
|
|
5044
5158
|
// unlock validity check by reseting customErrorMessage
|
|
5045
5159
|
this.customErrorMessage = { lock: false };
|
|
@@ -5096,7 +5210,7 @@ const MgInputTextarea = class {
|
|
|
5096
5210
|
* @returns HTML Element
|
|
5097
5211
|
*/
|
|
5098
5212
|
render() {
|
|
5099
|
-
return (h("mg-input", { key: '
|
|
5213
|
+
return (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 && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__input-group-container" }, h("textarea", { class: {
|
|
5100
5214
|
'mg-c-input__box': true,
|
|
5101
5215
|
'mg-c-input__box--width': true,
|
|
5102
5216
|
'mg-c-input__box--resizable': this.resizable === 'both',
|
|
@@ -5184,7 +5298,7 @@ const MgInputTitle = class {
|
|
|
5184
5298
|
render() {
|
|
5185
5299
|
const TagName = this.readonly ? 'span' : this.tagName;
|
|
5186
5300
|
// \u00A0 represent a
|
|
5187
|
-
return (h(TagName, { key: '
|
|
5301
|
+
return (h(TagName, { key: 'a3b4b081eb6612ae8f94e687d6ee55e0a4fc8747', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: '849858a8fca06a38cb33da241c52d29ad2af559b' }), this.required && !this.readonly && (h("span", { key: '4b6a62fbe70f027a8123e512cfdaad5c37c8e94a', class: "mg-c-input-title__required" }, "\u00A0", h("span", { key: '520b037e53779a58bc013f40d16ab724da734315', class: "mg-u-is-asterisk" }, "*")))));
|
|
5188
5302
|
}
|
|
5189
5303
|
get element() { return getElement(this); }
|
|
5190
5304
|
static get watchers() { return {
|
|
@@ -5198,7 +5312,7 @@ const MgInputTitle = class {
|
|
|
5198
5312
|
};
|
|
5199
5313
|
MgInputTitle.style = mgInputTitleCss();
|
|
5200
5314
|
|
|
5201
|
-
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
|
|
5315
|
+
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}`;
|
|
5202
5316
|
|
|
5203
5317
|
/**
|
|
5204
5318
|
* type Option validation function
|
|
@@ -5294,10 +5408,10 @@ const MgInputToggle = class {
|
|
|
5294
5408
|
if (!this.isIcon) {
|
|
5295
5409
|
// Due to text-overflow set to ellipsis
|
|
5296
5410
|
// we need to ensure that slot element have title to display value on mouse over
|
|
5297
|
-
slots.forEach(slot => slot.setAttribute('title', slot.textContent));
|
|
5411
|
+
slots.forEach((slot) => slot.setAttribute('title', slot.textContent));
|
|
5298
5412
|
}
|
|
5299
5413
|
else {
|
|
5300
|
-
slots.forEach(slot => {
|
|
5414
|
+
slots.forEach((slot) => {
|
|
5301
5415
|
if (slot.nodeName === 'MG-ICON') {
|
|
5302
5416
|
slot.size = 'small';
|
|
5303
5417
|
}
|
|
@@ -5310,7 +5424,7 @@ const MgInputToggle = class {
|
|
|
5310
5424
|
* @returns toggle value
|
|
5311
5425
|
*/
|
|
5312
5426
|
this.getCurrentOptionIndex = (value) => {
|
|
5313
|
-
return this.options.findIndex(option => toString(option.value) === toString(value)) === 1 ? 1 : 0;
|
|
5427
|
+
return this.options.findIndex((option) => toString(option.value) === toString(value)) === 1 ? 1 : 0;
|
|
5314
5428
|
};
|
|
5315
5429
|
/**
|
|
5316
5430
|
* Check if value is checked
|
|
@@ -5334,7 +5448,8 @@ const MgInputToggle = class {
|
|
|
5334
5448
|
// However, depending on the integration context (e.g., Vue.js), they may also be interpreted as string attributes.
|
|
5335
5449
|
// To avoid incorrect type interpretation when a boolean is received as a string,
|
|
5336
5450
|
// we normalize the value and convert it to a proper boolean before internal use.
|
|
5337
|
-
else if (['true', 'false'].includes(newValue) &&
|
|
5451
|
+
else if (['true', 'false'].includes(newValue) &&
|
|
5452
|
+
this.options.every((option) => typeof option.value === 'boolean')) {
|
|
5338
5453
|
this.value = newValue === 'true';
|
|
5339
5454
|
// Return early to prevent infinite loop
|
|
5340
5455
|
return;
|
|
@@ -5359,7 +5474,7 @@ const MgInputToggle = class {
|
|
|
5359
5474
|
}
|
|
5360
5475
|
// String array
|
|
5361
5476
|
else if (allItemsAreString(newValue)) {
|
|
5362
|
-
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
5477
|
+
this.options = newValue.map((item) => ({ title: item, value: item }));
|
|
5363
5478
|
}
|
|
5364
5479
|
// Object array
|
|
5365
5480
|
else if (Array.isArray(newValue) && newValue.every(isOption)) {
|
|
@@ -5439,7 +5554,7 @@ const MgInputToggle = class {
|
|
|
5439
5554
|
// - Async operations are completed
|
|
5440
5555
|
// - No timing issues with Stencil's render cycle
|
|
5441
5556
|
// - Keep everything in sync both inside and outside the component
|
|
5442
|
-
return new Promise(resolve => {
|
|
5557
|
+
return new Promise((resolve) => {
|
|
5443
5558
|
requestAnimationFrame(() => {
|
|
5444
5559
|
this.errorMessage = undefined;
|
|
5445
5560
|
resolve();
|
|
@@ -5469,7 +5584,7 @@ const MgInputToggle = class {
|
|
|
5469
5584
|
*/
|
|
5470
5585
|
render() {
|
|
5471
5586
|
const currentOption = this.options[this.getCurrentOptionIndex(this.value)];
|
|
5472
|
-
return (h("mg-input", { key: '
|
|
5587
|
+
return (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 && h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (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) => {
|
|
5473
5588
|
if (el !== null)
|
|
5474
5589
|
this.button = el;
|
|
5475
5590
|
} }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
|
|
@@ -5560,13 +5675,13 @@ class OverflowBehavior {
|
|
|
5560
5675
|
throw new Error('OverflowBehavior - all constructor params are required');
|
|
5561
5676
|
}
|
|
5562
5677
|
const items = Array.from(this.parentElement.children);
|
|
5563
|
-
this._resizeObserver = new ResizeObserver(entries => {
|
|
5678
|
+
this._resizeObserver = new ResizeObserver((entries) => {
|
|
5564
5679
|
this._availableWidth = entries
|
|
5565
|
-
.map(entry => entry.contentRect.width)
|
|
5680
|
+
.map((entry) => entry.contentRect.width)
|
|
5566
5681
|
.sort((a, b) => a - b)
|
|
5567
5682
|
.shift();
|
|
5568
5683
|
// reset items
|
|
5569
|
-
items.forEach(item => this.toggleItem(item, false));
|
|
5684
|
+
items.forEach((item) => this.toggleItem(item, false));
|
|
5570
5685
|
let accWidth = 0;
|
|
5571
5686
|
items.forEach((item, index) => {
|
|
5572
5687
|
accWidth += item.offsetWidth;
|
|
@@ -5578,7 +5693,7 @@ class OverflowBehavior {
|
|
|
5578
5693
|
}
|
|
5579
5694
|
}
|
|
5580
5695
|
|
|
5581
|
-
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
|
|
5696
|
+
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}`;
|
|
5582
5697
|
|
|
5583
5698
|
const MgItemMore = class {
|
|
5584
5699
|
constructor(hostRef) {
|
|
@@ -5650,7 +5765,7 @@ const MgItemMore = class {
|
|
|
5650
5765
|
*/
|
|
5651
5766
|
render() {
|
|
5652
5767
|
const menuItemIdentifier = 'mg-item-more';
|
|
5653
|
-
return (h(Host, { key: '
|
|
5768
|
+
return (h(Host, { key: '54d11a95e5edc3a45e98541ffc827264e40bc5ec', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (h("mg-menu-item", { key: '636e1c03e907071e72766b7ee359f3f93d3df6ae', "data-overflow-more": true, "data-style-direction": directions$2.HORIZONTAL, identifier: menuItemIdentifier, isIcon: !this.slotlabel.display }, h("mg-icon", { key: 'e751b58f50a3625f6e23b5993a50f8d0c2fb4660', icon: this.icon.icon, slot: "image" }), h("span", { key: 'bc429c525afced68fb5a7668cad3741699216b97', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '05760816f84ef6b6c5d18d058a110b6ec2d182e3', direction: directions$2.VERTICAL, label: this.messages.menuLabel, ref: (ref) => {
|
|
5654
5769
|
if (ref !== null)
|
|
5655
5770
|
this.itemMoreContainer = ref;
|
|
5656
5771
|
} })))));
|
|
@@ -5667,7 +5782,7 @@ const MgItemMore = class {
|
|
|
5667
5782
|
};
|
|
5668
5783
|
MgItemMore.style = mgItemMoreCss();
|
|
5669
5784
|
|
|
5670
|
-
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
|
|
5785
|
+
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}`;
|
|
5671
5786
|
|
|
5672
5787
|
const MgMenu = class {
|
|
5673
5788
|
constructor(hostRef) {
|
|
@@ -5694,7 +5809,7 @@ const MgMenu = class {
|
|
|
5694
5809
|
*/
|
|
5695
5810
|
this.getMenuItems = (menu = this.element) => {
|
|
5696
5811
|
var _a, _b;
|
|
5697
|
-
const menuItems = Array.from(menu.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
|
|
5812
|
+
const menuItems = Array.from(menu.children).filter((child) => child.nodeName === 'MG-MENU-ITEM');
|
|
5698
5813
|
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');
|
|
5699
5814
|
if (itemMoreMenuItem !== null && itemMoreMenuItem !== undefined) {
|
|
5700
5815
|
menuItems.push(itemMoreMenuItem);
|
|
@@ -5705,7 +5820,7 @@ const MgMenu = class {
|
|
|
5705
5820
|
* Update menu items
|
|
5706
5821
|
*/
|
|
5707
5822
|
this.updateMenuItems = () => {
|
|
5708
|
-
this.getMenuItems().forEach(item => {
|
|
5823
|
+
this.getMenuItems().forEach((item) => {
|
|
5709
5824
|
item.dataset.styleDirection = this.direction;
|
|
5710
5825
|
});
|
|
5711
5826
|
// render mg-item-more to manage OverflowBehavior
|
|
@@ -5715,7 +5830,9 @@ const MgMenu = class {
|
|
|
5715
5830
|
* render mg-item-more
|
|
5716
5831
|
*/
|
|
5717
5832
|
this.renderMgItemMore = () => {
|
|
5718
|
-
if (this.direction === directions$
|
|
5833
|
+
if (this.direction === directions$2.VERTICAL ||
|
|
5834
|
+
(this.direction === directions$2.HORIZONTAL && this.isChildMenu()) ||
|
|
5835
|
+
this.element.children.length <= 1) {
|
|
5719
5836
|
return;
|
|
5720
5837
|
}
|
|
5721
5838
|
// Insert mg-item-more outside the mg-menu shadowdom
|
|
@@ -5736,16 +5853,16 @@ const MgMenu = class {
|
|
|
5736
5853
|
}
|
|
5737
5854
|
}
|
|
5738
5855
|
validateDirection(newValue) {
|
|
5739
|
-
if (![directions$
|
|
5740
|
-
throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$
|
|
5856
|
+
if (![directions$2.VERTICAL, directions$2.HORIZONTAL].includes(newValue)) {
|
|
5857
|
+
throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$2.HORIZONTAL}, ${directions$2.VERTICAL}. Passed value: ${toString(newValue)}.`);
|
|
5741
5858
|
}
|
|
5742
5859
|
else {
|
|
5743
5860
|
this.updateMenuItems();
|
|
5744
5861
|
}
|
|
5745
5862
|
}
|
|
5746
5863
|
validateItemMore(newValue) {
|
|
5747
|
-
if (newValue !== undefined && this.direction !== directions$
|
|
5748
|
-
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${directions$
|
|
5864
|
+
if (newValue !== undefined && this.direction !== directions$2.HORIZONTAL) {
|
|
5865
|
+
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${directions$2.HORIZONTAL}.`);
|
|
5749
5866
|
}
|
|
5750
5867
|
else if (newValue !== undefined) {
|
|
5751
5868
|
this.renderMgItemMore();
|
|
@@ -5761,7 +5878,7 @@ const MgMenu = class {
|
|
|
5761
5878
|
return;
|
|
5762
5879
|
}
|
|
5763
5880
|
const itemToWatch = event.target.nodeName === 'MG-ITEM-MORE' ? event.target.shadowRoot.querySelector('mg-menu-item') : event.target;
|
|
5764
|
-
['click', 'focus'].forEach(trigger => {
|
|
5881
|
+
['click', 'focus'].forEach((trigger) => {
|
|
5765
5882
|
itemToWatch.addEventListener(trigger, () => {
|
|
5766
5883
|
const focusedItem = event.target.closest('mg-menu').querySelector('[data-has-focus]');
|
|
5767
5884
|
// exit process if new focused item in the current menu children
|
|
@@ -5793,7 +5910,7 @@ const MgMenu = class {
|
|
|
5793
5910
|
// set menu-items
|
|
5794
5911
|
this.updateMenuItems();
|
|
5795
5912
|
// add listener to close main menu when focus leave it
|
|
5796
|
-
if (!this.isChildMenu() && this.direction === directions$
|
|
5913
|
+
if (!this.isChildMenu() && this.direction === directions$2.HORIZONTAL) {
|
|
5797
5914
|
document.addEventListener('focusin', (event) => {
|
|
5798
5915
|
const isElementChild = (element) => {
|
|
5799
5916
|
if (element === this.element)
|
|
@@ -5819,7 +5936,7 @@ const MgMenu = class {
|
|
|
5819
5936
|
* @returns HTML Element
|
|
5820
5937
|
*/
|
|
5821
5938
|
render() {
|
|
5822
|
-
return (h(Host, { key: '
|
|
5939
|
+
return (h(Host, { key: '967fc6e01207c5831b7821ccb17db8406cabc262', role: "list", "aria-label": this.label }, h("slot", { key: '9699944cbe1b25434c3ddc6235dae7676b7acb6b' })));
|
|
5823
5940
|
}
|
|
5824
5941
|
get element() { return getElement(this); }
|
|
5825
5942
|
static get watchers() { return {
|
|
@@ -5836,7 +5953,7 @@ const MgMenu = class {
|
|
|
5836
5953
|
};
|
|
5837
5954
|
MgMenu.style = mgMenuCss();
|
|
5838
5955
|
|
|
5839
|
-
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
|
|
5956
|
+
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}`;
|
|
5840
5957
|
|
|
5841
5958
|
const MgMenuItem = class {
|
|
5842
5959
|
constructor(hostRef) {
|
|
@@ -5897,8 +6014,10 @@ const MgMenuItem = class {
|
|
|
5897
6014
|
* Condition to know if component should display a mg-popover
|
|
5898
6015
|
* @returns truthy if component display popover
|
|
5899
6016
|
*/
|
|
5900
|
-
this.hasPopover = () => this.isDirection(directions$
|
|
5901
|
-
((this.isInMainMenu() &&
|
|
6017
|
+
this.hasPopover = () => this.isDirection(directions$2.HORIZONTAL) &&
|
|
6018
|
+
((this.isInMainMenu() &&
|
|
6019
|
+
Array.from(this.element.children).some((element) => element.querySelector('[slot]') === null)) ||
|
|
6020
|
+
this.isItemMore) &&
|
|
5902
6021
|
this.href === undefined;
|
|
5903
6022
|
/**
|
|
5904
6023
|
* Method to control if one of component children have active status
|
|
@@ -5932,7 +6051,8 @@ const MgMenuItem = class {
|
|
|
5932
6051
|
this.updateDisplayNotificationBadge = () => {
|
|
5933
6052
|
const childMenu = this.element.querySelector('mg-menu');
|
|
5934
6053
|
this.displayNotificationBadge =
|
|
5935
|
-
childMenu !== null &&
|
|
6054
|
+
childMenu !== null &&
|
|
6055
|
+
Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && !subItem.hasAttribute('hidden'));
|
|
5936
6056
|
};
|
|
5937
6057
|
/**
|
|
5938
6058
|
* Update expanded prop
|
|
@@ -5941,7 +6061,7 @@ const MgMenuItem = class {
|
|
|
5941
6061
|
this.updateExpanded = (newValue) => {
|
|
5942
6062
|
if (this.isInteractiveItem()) {
|
|
5943
6063
|
// item is always expanded in vertical menu when has active child
|
|
5944
|
-
this.expanded = (this.isDirection(directions$
|
|
6064
|
+
this.expanded = (this.isDirection(directions$2.VERTICAL) && this.hasActiveChild()) || newValue;
|
|
5945
6065
|
}
|
|
5946
6066
|
};
|
|
5947
6067
|
/**
|
|
@@ -5960,11 +6080,11 @@ const MgMenuItem = class {
|
|
|
5960
6080
|
this.updateSlot = (guard = false) => {
|
|
5961
6081
|
// slot title AND metadata validation
|
|
5962
6082
|
// add title on label AND metada slots due to text-overflow on these element
|
|
5963
|
-
if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) {
|
|
6083
|
+
if (Array.from(this.element.children).find((child) => child.getAttribute('slot') === 'label') === undefined) {
|
|
5964
6084
|
throw new Error(`<${this.name}> slot "label" is required.`);
|
|
5965
6085
|
}
|
|
5966
|
-
['label', 'metadata'].forEach(slot => {
|
|
5967
|
-
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
|
|
6086
|
+
['label', 'metadata'].forEach((slot) => {
|
|
6087
|
+
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach((element) => {
|
|
5968
6088
|
if (!isValidString(element.textContent))
|
|
5969
6089
|
throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
|
|
5970
6090
|
if ((guard && !element.hasAttribute('title')) || !guard)
|
|
@@ -6062,7 +6182,7 @@ const MgMenuItem = class {
|
|
|
6062
6182
|
else {
|
|
6063
6183
|
this.updateExpanded(newValue);
|
|
6064
6184
|
// when expanded all actives sub-items need to be expanded and non active closed
|
|
6065
|
-
Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
|
|
6185
|
+
Array.from(this.element.querySelectorAll('mg-menu-item')).forEach((item) => {
|
|
6066
6186
|
if (item !== this.element)
|
|
6067
6187
|
item.expanded = newValue ? this.hasStatus(item, Status$1.ACTIVE) : false;
|
|
6068
6188
|
});
|
|
@@ -6073,8 +6193,8 @@ const MgMenuItem = class {
|
|
|
6073
6193
|
this.classNavigationButtonClassList.delete(`${this.classNavigationButton}--${oldValue}`);
|
|
6074
6194
|
this.classNavigationButtonClassList.add(`${this.classNavigationButton}--${newValue}`);
|
|
6075
6195
|
// manage all sub levels child menu-items level with data-level attribut
|
|
6076
|
-
Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
|
|
6077
|
-
if (this.isDirection(directions$
|
|
6196
|
+
Array.from(this.element.querySelectorAll('mg-menu-item')).forEach((item) => {
|
|
6197
|
+
if (this.isDirection(directions$2.VERTICAL, newValue)) {
|
|
6078
6198
|
item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
|
|
6079
6199
|
}
|
|
6080
6200
|
else {
|
|
@@ -6091,7 +6211,6 @@ const MgMenuItem = class {
|
|
|
6091
6211
|
* direction value in dataset
|
|
6092
6212
|
* @param newValue - new direction value
|
|
6093
6213
|
*/
|
|
6094
|
-
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
6095
6214
|
watchDataStyleDirection(newValue) {
|
|
6096
6215
|
this.direction = newValue;
|
|
6097
6216
|
this.watchIsIcon(this.isIcon);
|
|
@@ -6100,7 +6219,6 @@ const MgMenuItem = class {
|
|
|
6100
6219
|
* has focus value in dataset
|
|
6101
6220
|
* @param newValue - new direction value
|
|
6102
6221
|
*/
|
|
6103
|
-
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
6104
6222
|
watchDataHasFocus(newValue) {
|
|
6105
6223
|
if (!isValidString(newValue))
|
|
6106
6224
|
this.updateExpanded(Boolean(newValue));
|
|
@@ -6127,7 +6245,7 @@ const MgMenuItem = class {
|
|
|
6127
6245
|
normalizeBooleanAttributes(this);
|
|
6128
6246
|
// has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
|
|
6129
6247
|
// we store only matching elements
|
|
6130
|
-
this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
|
|
6248
|
+
this.hasChildren = Array.from(this.element.children).some((child) => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
|
|
6131
6249
|
this.messages = initLocales(this.element).messages.menuItem;
|
|
6132
6250
|
this.isItemMore = this.element.dataset.overflowMore !== undefined;
|
|
6133
6251
|
// watchers
|
|
@@ -6152,12 +6270,12 @@ const MgMenuItem = class {
|
|
|
6152
6270
|
this.updateItem([Status$1.ACTIVE]);
|
|
6153
6271
|
// emit loaded event when component is fully loaded
|
|
6154
6272
|
this.itemLoaded.emit();
|
|
6155
|
-
new MutationObserver(mutationsList => {
|
|
6156
|
-
if (mutationsList.some(mutation => ['hidden', 'status'].includes(mutation.attributeName)))
|
|
6273
|
+
new MutationObserver((mutationsList) => {
|
|
6274
|
+
if (mutationsList.some((mutation) => ['hidden', 'status'].includes(mutation.attributeName)))
|
|
6157
6275
|
this.updateStatus(this.hasChildren ? undefined : [Status$1.ACTIVE]);
|
|
6158
|
-
if (mutationsList.some(mutation => mutation.type === 'characterData'))
|
|
6276
|
+
if (mutationsList.some((mutation) => mutation.type === 'characterData'))
|
|
6159
6277
|
this.updateSlot();
|
|
6160
|
-
if (mutationsList.some(mutation => mutation.type === 'childList'))
|
|
6278
|
+
if (mutationsList.some((mutation) => mutation.type === 'childList'))
|
|
6161
6279
|
this.updateItem();
|
|
6162
6280
|
this.itemUpdated.emit();
|
|
6163
6281
|
}).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
|
|
@@ -6200,9 +6318,9 @@ const MgMenuItem = class {
|
|
|
6200
6318
|
render() {
|
|
6201
6319
|
const getContainerClasses = () => ({
|
|
6202
6320
|
['mg-c-menu-item__collapse-container']: true,
|
|
6203
|
-
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions$
|
|
6321
|
+
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions$2.HORIZONTAL),
|
|
6204
6322
|
});
|
|
6205
|
-
return (h(Host, { key: '
|
|
6323
|
+
return (h(Host, { key: '68705299d83c64af9e915a6e4d471e78ed6d92ab', role: this.isItemMore ? 'presentation' : 'listitem' }, this.hasPopover() ? (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
|
|
6206
6324
|
}, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
|
|
6207
6325
|
this.renderInteractiveElement(),
|
|
6208
6326
|
h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
|
|
@@ -6250,7 +6368,7 @@ const variants$1 = ['info', 'warning', 'success', 'danger'];
|
|
|
6250
6368
|
*/
|
|
6251
6369
|
const variantStyles = ['bar-left', 'background'];
|
|
6252
6370
|
|
|
6253
|
-
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-
|
|
6371
|
+
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%}`;
|
|
6254
6372
|
|
|
6255
6373
|
const MgMessage = class {
|
|
6256
6374
|
constructor(hostRef) {
|
|
@@ -6346,9 +6464,9 @@ const MgMessage = class {
|
|
|
6346
6464
|
* @returns HTML Element
|
|
6347
6465
|
*/
|
|
6348
6466
|
render() {
|
|
6349
|
-
return (h("div", { key: '
|
|
6467
|
+
return (h("div", { key: 'a182451917bfe33de32c893d9eeedd52b11f8b15', class: this.classCollection.join() }, h("mg-card", { key: '9dd0da031d97f669e885a1681b72e5a086e79c0b', shadow: this.variantStyle !== 'background' }, h("span", { key: '158c2470a10ab9d677e2031c28ad0d43c09e4cf2', class: "mg-c-message__icon" }, h("mg-icon", { key: 'f7d0cb02781d2bf5a71fbd7f9498ebf4dca31edf', icon: this.getIcon() })), h("div", { key: '56a7299983c30ea4527bb19a46ac0677b6e8c40e', class: "mg-c-message__content" }, h("span", { key: '744ad763177f92bdbac37d43a5a58f221ff97e69', class: "mg-c-message__content-slot" }, h("slot", { key: '14b7f22e206bd074336287809574b2a5abfe5bf5' })), this.hasActions && [
|
|
6350
6468
|
h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
|
|
6351
|
-
h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '
|
|
6469
|
+
h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '104be326f73ded002cba9a471491ca614227e3d5', name: "actions" })),
|
|
6352
6470
|
]))));
|
|
6353
6471
|
}
|
|
6354
6472
|
get element() { return getElement(this); }
|
|
@@ -6477,11 +6595,11 @@ const MgModal = class {
|
|
|
6477
6595
|
* @returns HTML Element
|
|
6478
6596
|
*/
|
|
6479
6597
|
render() {
|
|
6480
|
-
return (h("dialog", { key: '
|
|
6598
|
+
return (h("dialog", { key: '3b802b99d96be80d8071c89be6537269866e6fff', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
|
|
6481
6599
|
if (el !== null) {
|
|
6482
6600
|
this.dialog = el;
|
|
6483
6601
|
}
|
|
6484
|
-
} }, h("mg-card", { key: '
|
|
6602
|
+
} }, h("mg-card", { key: '4985b4af69968577ffd36a6a2b1f96274703d146', shadow: true }, h("div", { key: 'c4aed6d29dc5ee00f323dcbaecff9532f370ec98', class: "mg-c-modal__dialog" }, h("header", { key: '3bfeb66d59144c0cba3fd82c1fb4dee2ed62cea7', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: '55205da6c8991444ff53da7224b28c7475b0e173', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'da7fdea3a124a559cb637beea9d5565c1f777eea', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '77c2ab2bcacdda9fa179b480651507a1d6584686', icon: "cross" })))), h("h1", { key: 'cedb5efc709de2d18e81409139da790349a48bb8', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '7f24e65244836c08dbf7465f8c80970080003bcd', class: "mg-c-modal__content" }, h("slot", { key: '36d7c2a0ef1bb1024887da08298391962285bbf8' })), this.hasActions && (h("footer", { key: '5967d650e4e58726641a3c960d82aa7ee588e38f', class: "mg-c-modal__footer" }, h("slot", { key: 'c275b8235acb658ded3db7c69b931000a5ff14d2', name: "actions" })))))));
|
|
6485
6603
|
}
|
|
6486
6604
|
get element() { return getElement(this); }
|
|
6487
6605
|
static get watchers() { return {
|
|
@@ -6506,7 +6624,7 @@ const NavigationAction = {
|
|
|
6506
6624
|
PREVIOUS: 'previous',
|
|
6507
6625
|
};
|
|
6508
6626
|
|
|
6509
|
-
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
|
|
6627
|
+
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}`;
|
|
6510
6628
|
|
|
6511
6629
|
/**
|
|
6512
6630
|
* Range generator
|
|
@@ -6529,7 +6647,7 @@ const mgPaginationCss = () => `.mg-u-visually-hidden{position:absolute !importan
|
|
|
6529
6647
|
* @param step - step size
|
|
6530
6648
|
* @returns range numbers
|
|
6531
6649
|
*/
|
|
6532
|
-
const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
|
|
6650
|
+
const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map((x) => start + x * step);
|
|
6533
6651
|
const MgPagination = class {
|
|
6534
6652
|
constructor(hostRef) {
|
|
6535
6653
|
registerInstance(this, hostRef);
|
|
@@ -6579,7 +6697,9 @@ const MgPagination = class {
|
|
|
6579
6697
|
* @param disabled - button disable state
|
|
6580
6698
|
*/
|
|
6581
6699
|
this.handleGoToPage = (action, disabled) => {
|
|
6582
|
-
!disabled
|
|
6700
|
+
if (!disabled) {
|
|
6701
|
+
this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
|
|
6702
|
+
}
|
|
6583
6703
|
};
|
|
6584
6704
|
}
|
|
6585
6705
|
watchIdentifier(newValue) {
|
|
@@ -6602,7 +6722,9 @@ const MgPagination = class {
|
|
|
6602
6722
|
this.currentPageChange.emit(newValue);
|
|
6603
6723
|
}
|
|
6604
6724
|
watchPaginationMessages(newValue) {
|
|
6605
|
-
if (Boolean(newValue) &&
|
|
6725
|
+
if (Boolean(newValue) &&
|
|
6726
|
+
(typeof newValue !== 'object' ||
|
|
6727
|
+
!['next', 'previous', 'nextLabel', 'previousLabel'].every((key) => isValidString(newValue[key])))) {
|
|
6606
6728
|
throw new Error('<mg-pagination> prop "messages" must be a valid "PaginationMessagesType".');
|
|
6607
6729
|
}
|
|
6608
6730
|
}
|
|
@@ -6642,7 +6764,7 @@ const MgPagination = class {
|
|
|
6642
6764
|
// eslint-disable-next-line react/jsx-no-bind
|
|
6643
6765
|
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && navigationMessages[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
|
|
6644
6766
|
};
|
|
6645
|
-
return (h(Host, { hidden: this.totalPages < 2 }, 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 && (h("div", { class: "mg-c-pagination__page-count" }, 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 }), h("span", { class: "mg-u-visually-hidden" }, this.localesMessages.pagination.page, " ", this.currentPage), "/ ", this.totalPages,
|
|
6767
|
+
return (h(Host, { hidden: this.totalPages < 2 }, 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 && (h("div", { class: "mg-c-pagination__page-count" }, 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 }), h("p", { class: "mg-c-pagination__page-count-text" }, 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))));
|
|
6646
6768
|
}
|
|
6647
6769
|
get element() { return getElement(this); }
|
|
6648
6770
|
static get watchers() { return {
|
|
@@ -6778,7 +6900,12 @@ const MgPanel = class {
|
|
|
6778
6900
|
* Render collapse button
|
|
6779
6901
|
* @returns collpase button
|
|
6780
6902
|
*/
|
|
6781
|
-
this.renderCollapseButton = () => (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 }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: {
|
|
6903
|
+
this.renderCollapseButton = () => (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 }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: {
|
|
6904
|
+
'mg-c-panel__collapse-button-icon': true,
|
|
6905
|
+
'mg-c-panel__collapse-button-icon--reverse': !this.expanded,
|
|
6906
|
+
} }), !this.isEditing &&
|
|
6907
|
+
this.expandToggleDisplay !== 'icon' &&
|
|
6908
|
+
(this.hasPanelTitleSlot() ? h("slot", { name: "panel-title" }) : this.panelTitle))));
|
|
6782
6909
|
/**
|
|
6783
6910
|
* Render edit button
|
|
6784
6911
|
* @returns edit Button
|
|
@@ -6810,7 +6937,11 @@ const MgPanel = class {
|
|
|
6810
6937
|
*/
|
|
6811
6938
|
this.renderHeaderChildren = () => {
|
|
6812
6939
|
const children = [
|
|
6813
|
-
h("div", { class: {
|
|
6940
|
+
h("div", { class: {
|
|
6941
|
+
'mg-c-panel__header-title': true,
|
|
6942
|
+
'mg-c-panel__header-title--full': this.isEditing,
|
|
6943
|
+
'mg-c-panel__header-title--reverse': this.titlePosition === 'right',
|
|
6944
|
+
}, key: this.panelTitle }, this.renderTitle()),
|
|
6814
6945
|
h("div", { class: "mg-c-panel__header-content", key: "slot-header" }, h("slot", { name: "header-right" })),
|
|
6815
6946
|
];
|
|
6816
6947
|
return this.titlePosition === 'right' ? children.reverse() : children;
|
|
@@ -6904,7 +7035,7 @@ const MgPanel = class {
|
|
|
6904
7035
|
*/
|
|
6905
7036
|
render() {
|
|
6906
7037
|
const headerId = `${this.identifier}-header`;
|
|
6907
|
-
return (h("section", { key: '
|
|
7038
|
+
return (h("section", { key: '33e6da36cbb92f19bcd957de7758c1a13ced5e83', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: 'df278e46b4604d8c5dce2abeffb2e979b02f34e9', shadow: this.shadow }, h("header", { key: 'b68012115af4bb5b62b6357fc07cbf50876ac08f', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '3dfec67e6531fc0dff866e102ac36bd6c6a48834', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '56c63dd0b0e98968594ff713c2c6ee2a3269b74b' })))));
|
|
6908
7039
|
}
|
|
6909
7040
|
get element() { return getElement(this); }
|
|
6910
7041
|
static get watchers() { return {
|
|
@@ -8740,11 +8871,7 @@ const MgPopover = class {
|
|
|
8740
8871
|
/**
|
|
8741
8872
|
* Popover placement
|
|
8742
8873
|
*/
|
|
8743
|
-
this.placement = 'bottom';
|
|
8744
|
-
/**
|
|
8745
|
-
* Hide popover arrow
|
|
8746
|
-
*/
|
|
8747
|
-
this.arrowHide = false;
|
|
8874
|
+
this.placement = 'bottom-start';
|
|
8748
8875
|
/**
|
|
8749
8876
|
* Define if popover has a cross button
|
|
8750
8877
|
*/
|
|
@@ -8762,7 +8889,16 @@ const MgPopover = class {
|
|
|
8762
8889
|
* @param event - mouse event
|
|
8763
8890
|
*/
|
|
8764
8891
|
this.clickOutside = (event) => {
|
|
8765
|
-
|
|
8892
|
+
// `click` is a composed event, so `composedPath()` lists every node it travels
|
|
8893
|
+
// through, including across shadow boundaries. Relying on it instead of
|
|
8894
|
+
// `event.target` keeps the popover open when it (or its guarded trigger) is
|
|
8895
|
+
// nested inside another component's shadow DOM: there `event.target` is
|
|
8896
|
+
// retargeted to the outer shadow host and `closest()` cannot reach the popover
|
|
8897
|
+
// nor the `data-mg-popover-guard` element.
|
|
8898
|
+
const path = event.composedPath();
|
|
8899
|
+
const isInside = path.includes(this.element) ||
|
|
8900
|
+
path.some((node) => node instanceof HTMLElement && node.dataset.mgPopoverGuard === this.identifier);
|
|
8901
|
+
if (!this.disabled && !isInside) {
|
|
8766
8902
|
this.display = false;
|
|
8767
8903
|
}
|
|
8768
8904
|
};
|
|
@@ -8800,7 +8936,7 @@ const MgPopover = class {
|
|
|
8800
8936
|
* @param newValue - if true enable popper listners
|
|
8801
8937
|
*/
|
|
8802
8938
|
this.setPopperListeners = (newValue) => {
|
|
8803
|
-
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: newValue }] })));
|
|
8939
|
+
this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: newValue }] })));
|
|
8804
8940
|
};
|
|
8805
8941
|
/**
|
|
8806
8942
|
* Manage all clickOustside listeners
|
|
@@ -8837,13 +8973,9 @@ const MgPopover = class {
|
|
|
8837
8973
|
this.mgPopoverContent.setAttribute('slot', 'content');
|
|
8838
8974
|
this.mgPopoverContent.setAttribute('id', this.identifier);
|
|
8839
8975
|
this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
|
|
8840
|
-
const arrow = document.createElement('div');
|
|
8841
|
-
arrow.setAttribute('slot', 'arrow');
|
|
8842
|
-
arrow.dataset.popperArrow = '';
|
|
8843
|
-
this.mgPopoverContent.appendChild(arrow);
|
|
8844
8976
|
// insert elements in DOM
|
|
8845
|
-
['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
|
|
8846
|
-
Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
|
|
8977
|
+
['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach((slotType) => {
|
|
8978
|
+
Array.from(this.element.querySelectorAll(slotType)).forEach((slot) => {
|
|
8847
8979
|
this.mgPopoverContent.appendChild(slot);
|
|
8848
8980
|
});
|
|
8849
8981
|
});
|
|
@@ -8861,12 +8993,6 @@ const MgPopover = class {
|
|
|
8861
8993
|
// use renderPopoverContent to update popover-content id
|
|
8862
8994
|
this.renderPopoverContent();
|
|
8863
8995
|
}
|
|
8864
|
-
validateArrowHide(newValue) {
|
|
8865
|
-
if (newValue)
|
|
8866
|
-
this.mgPopoverContent.dataset.arrowHide = '';
|
|
8867
|
-
else
|
|
8868
|
-
delete this.mgPopoverContent.dataset.arrowHide;
|
|
8869
|
-
}
|
|
8870
8996
|
validateCloseButton(newValue) {
|
|
8871
8997
|
this.mgPopoverContent.closeButton = newValue;
|
|
8872
8998
|
}
|
|
@@ -8898,7 +9024,6 @@ const MgPopover = class {
|
|
|
8898
9024
|
this.renderPopoverContent();
|
|
8899
9025
|
this.validateCloseButton(this.closeButton);
|
|
8900
9026
|
this.validateIdentifier(this.identifier);
|
|
8901
|
-
this.validateArrowHide(this.arrowHide);
|
|
8902
9027
|
}
|
|
8903
9028
|
/**
|
|
8904
9029
|
* Check if component props are well configured on init
|
|
@@ -8923,7 +9048,8 @@ const MgPopover = class {
|
|
|
8923
9048
|
{
|
|
8924
9049
|
name: 'offset',
|
|
8925
9050
|
options: {
|
|
8926
|
-
|
|
9051
|
+
// 2px gap with the trigger element, applied on the main axis only (no cross-axis shift so `-start`/`-end` stay aligned)
|
|
9052
|
+
offset: [0, 2],
|
|
8927
9053
|
},
|
|
8928
9054
|
},
|
|
8929
9055
|
{
|
|
@@ -8935,7 +9061,7 @@ const MgPopover = class {
|
|
|
8935
9061
|
],
|
|
8936
9062
|
});
|
|
8937
9063
|
// add resize observer
|
|
8938
|
-
[this.interactiveElement, this.element.querySelector('mg-popover-content')].forEach(element => {
|
|
9064
|
+
[this.interactiveElement, this.element.querySelector('mg-popover-content')].forEach((element) => {
|
|
8939
9065
|
new ResizeObserver(() => {
|
|
8940
9066
|
this.popper.update();
|
|
8941
9067
|
}).observe(element);
|
|
@@ -8952,7 +9078,7 @@ const MgPopover = class {
|
|
|
8952
9078
|
}
|
|
8953
9079
|
});
|
|
8954
9080
|
// Add events to hide popover
|
|
8955
|
-
this.element.addEventListener('keydown', e => {
|
|
9081
|
+
this.element.addEventListener('keydown', (e) => {
|
|
8956
9082
|
if (!this.disabled && e.code === 'Escape') {
|
|
8957
9083
|
this.display = false;
|
|
8958
9084
|
this.componentClose.emit();
|
|
@@ -8966,16 +9092,13 @@ const MgPopover = class {
|
|
|
8966
9092
|
* @returns HTML Element
|
|
8967
9093
|
*/
|
|
8968
9094
|
render() {
|
|
8969
|
-
return (h(Host, { key: '
|
|
9095
|
+
return (h(Host, { key: '9e62e60ba76045222b9c69b34245c3825004f8d6' }, h("slot", { key: '4be1a5c1221e1985cd0c0b4f7b19435d097bee4e' }), h("slot", { key: '07c2003dc3ad0bb7059e75e95e0de2862a64fd22', name: "content" })));
|
|
8970
9096
|
}
|
|
8971
9097
|
get element() { return getElement(this); }
|
|
8972
9098
|
static get watchers() { return {
|
|
8973
9099
|
"identifier": [{
|
|
8974
9100
|
"validateIdentifier": 0
|
|
8975
9101
|
}],
|
|
8976
|
-
"arrowHide": [{
|
|
8977
|
-
"validateArrowHide": 0
|
|
8978
|
-
}],
|
|
8979
9102
|
"closeButton": [{
|
|
8980
9103
|
"validateCloseButton": 0
|
|
8981
9104
|
}],
|
|
@@ -8986,7 +9109,7 @@ const MgPopover = class {
|
|
|
8986
9109
|
};
|
|
8987
9110
|
MgPopover.style = mgPopoverCss();
|
|
8988
9111
|
|
|
8989
|
-
const mgPopoverContentCss = () => `:host{position:relative;z-index:2000;display:none;
|
|
9112
|
+
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)}`;
|
|
8990
9113
|
|
|
8991
9114
|
const MgPopoverContent = class {
|
|
8992
9115
|
constructor(hostRef) {
|
|
@@ -9032,7 +9155,7 @@ const MgPopoverContent = class {
|
|
|
9032
9155
|
* @returns HTML Element
|
|
9033
9156
|
*/
|
|
9034
9157
|
render() {
|
|
9035
|
-
return (h(Host, { key: '
|
|
9158
|
+
return (h(Host, { key: '7035d8f560b811596c9c641abc7fe28ee9fdf3a2' }, h("mg-card", { key: 'badc81425100283dac69cad111514d8c3edfba45', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'cb20d8c7db741051b532c3b1653d578df859f0d0', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '389dc26f4cfdbb899b2b9eb4b27ceb6369209b2f', icon: "cross" }))), h("div", { key: '29b6721af3b6e06760affd6565e740bbc667f457', class: "mg-c-popover-content__title" }, h("slot", { key: '5834364d298a4e65a9170f003d0ec1f5e8868c4a', name: "title" })), h("slot", { key: '8398f497064fe097151ca263225349a9d84d4f36', name: "content" }))));
|
|
9036
9159
|
}
|
|
9037
9160
|
get element() { return getElement(this); }
|
|
9038
9161
|
};
|
|
@@ -9058,7 +9181,9 @@ const MgSkipLinks = class {
|
|
|
9058
9181
|
};
|
|
9059
9182
|
}
|
|
9060
9183
|
validateLinks(links) {
|
|
9061
|
-
if (links === undefined ||
|
|
9184
|
+
if (links === undefined ||
|
|
9185
|
+
links.length === 0 ||
|
|
9186
|
+
links.some((link) => !isValidString(link.href) || !link.href.startsWith('#') || !isValidString(link.label))) {
|
|
9062
9187
|
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.`);
|
|
9063
9188
|
}
|
|
9064
9189
|
}
|
|
@@ -9077,7 +9202,7 @@ const MgSkipLinks = class {
|
|
|
9077
9202
|
* @returns HTML Element
|
|
9078
9203
|
*/
|
|
9079
9204
|
render() {
|
|
9080
|
-
return (h("nav", { key: '
|
|
9205
|
+
return (h("nav", { key: '9208da538e001be23c8cc78e8a34498cd072cdc6', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'fcd69f398fad6964d5c017bb652ad7b8de34dee6', class: "mg-c-skip-links__list", role: "list" }, this.links.map((link) => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
|
|
9081
9206
|
}
|
|
9082
9207
|
get element() { return getElement(this); }
|
|
9083
9208
|
static get watchers() { return {
|
|
@@ -9101,7 +9226,7 @@ const textAlignments = ['left', 'center', 'right'];
|
|
|
9101
9226
|
// Define possible data types
|
|
9102
9227
|
const dataTypes = ['string', 'numeric', 'date'];
|
|
9103
9228
|
|
|
9104
|
-
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
|
|
9229
|
+
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)}`;
|
|
9105
9230
|
|
|
9106
9231
|
/**
|
|
9107
9232
|
* Check if value is a valid align object
|
|
@@ -9124,7 +9249,7 @@ typeof newValue === 'object' &&
|
|
|
9124
9249
|
(value.sortable !== undefined && typeof value.sortable === 'boolean') ||
|
|
9125
9250
|
(value.datatype !== undefined && dataTypes.includes(value.datatype))) &&
|
|
9126
9251
|
// ensure no extra properties are present
|
|
9127
|
-
Object.keys(value).every(key => ['align', 'sortable', 'datatype'].includes(key)));
|
|
9252
|
+
Object.keys(value).every((key) => ['align', 'sortable', 'datatype'].includes(key)));
|
|
9128
9253
|
/**
|
|
9129
9254
|
* Compare values
|
|
9130
9255
|
* @param firstValue - First value
|
|
@@ -9250,12 +9375,16 @@ const MgTable = class {
|
|
|
9250
9375
|
// Add event listener
|
|
9251
9376
|
button.addEventListener('click', () => {
|
|
9252
9377
|
// Reset aria pressed
|
|
9253
|
-
table
|
|
9378
|
+
table
|
|
9379
|
+
.querySelectorAll(`thead td:not(:nth-child(${key})) [aria-pressed],thead th:not(:nth-child(${key})) [aria-pressed]`)
|
|
9380
|
+
.forEach((ariaPressed) => {
|
|
9254
9381
|
ariaPressed.removeAttribute('aria-pressed');
|
|
9255
9382
|
ariaPressed.querySelector('mg-icon').setAttribute('icon', 'arrows-up-down');
|
|
9256
9383
|
});
|
|
9257
9384
|
// Reset aria sort
|
|
9258
|
-
table
|
|
9385
|
+
table
|
|
9386
|
+
.querySelectorAll(`thead td:not(:nth-child(${key}))[aria-sort],thead th:not(:nth-child(${key}))[aria-sort]`)
|
|
9387
|
+
.forEach((ariaSort) => {
|
|
9259
9388
|
ariaSort.removeAttribute('aria-sort');
|
|
9260
9389
|
});
|
|
9261
9390
|
// Set aria pressed
|
|
@@ -9290,7 +9419,7 @@ const MgTable = class {
|
|
|
9290
9419
|
// If sort order is none, return to original order
|
|
9291
9420
|
if (sortOrder === 'none') {
|
|
9292
9421
|
// Append rows to table
|
|
9293
|
-
rowsDefault.forEach(row => table.querySelector('tbody').append(row));
|
|
9422
|
+
rowsDefault.forEach((row) => table.querySelector('tbody').append(row));
|
|
9294
9423
|
return;
|
|
9295
9424
|
}
|
|
9296
9425
|
// Set a copy of rows
|
|
@@ -9308,7 +9437,7 @@ const MgTable = class {
|
|
|
9308
9437
|
return compareValues(cellValueA, cellValueB, sortOrder === 'descending', value.datatype);
|
|
9309
9438
|
});
|
|
9310
9439
|
// Append rows to table
|
|
9311
|
-
rows.forEach(row => table.querySelector('tbody').append(row));
|
|
9440
|
+
rows.forEach((row) => table.querySelector('tbody').append(row));
|
|
9312
9441
|
});
|
|
9313
9442
|
}
|
|
9314
9443
|
});
|
|
@@ -9529,7 +9658,7 @@ const MgTabs = class {
|
|
|
9529
9658
|
* Validate slots setting
|
|
9530
9659
|
*/
|
|
9531
9660
|
this.validateSlots = () => {
|
|
9532
|
-
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-'); });
|
|
9661
|
+
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-'); });
|
|
9533
9662
|
if (slots.length !== this.tabs.length)
|
|
9534
9663
|
throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
|
|
9535
9664
|
};
|
|
@@ -9547,7 +9676,7 @@ const MgTabs = class {
|
|
|
9547
9676
|
validateItems(newValue) {
|
|
9548
9677
|
// String array
|
|
9549
9678
|
if (allItemsAreString(newValue))
|
|
9550
|
-
this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
|
|
9679
|
+
this.tabs = newValue.map((item) => ({ label: item, status: Status.VISIBLE }));
|
|
9551
9680
|
// Object array
|
|
9552
9681
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
9553
9682
|
this.tabs = newValue;
|
|
@@ -9558,11 +9687,14 @@ const MgTabs = class {
|
|
|
9558
9687
|
// when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
|
|
9559
9688
|
// after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update
|
|
9560
9689
|
if (newValue === undefined) {
|
|
9561
|
-
this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))
|
|
9562
|
-
? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))
|
|
9690
|
+
this.activeTab = this.tabs.some((tab) => this.tabHasStatus(tab, Status.ACTIVE))
|
|
9691
|
+
? this.getTabItemIndex(this.tabs.findIndex((tab) => this.tabHasStatus(tab, Status.ACTIVE)))
|
|
9563
9692
|
: this.startIndex;
|
|
9564
9693
|
}
|
|
9565
|
-
else if (typeof newValue === 'number' &&
|
|
9694
|
+
else if (typeof newValue === 'number' &&
|
|
9695
|
+
newValue >= this.startIndex &&
|
|
9696
|
+
newValue <= this.tabs.length &&
|
|
9697
|
+
this.isActivableTab(this.tabs[newValue - this.startIndex])) {
|
|
9566
9698
|
// if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE
|
|
9567
9699
|
this.tabs.forEach((tab, index) => {
|
|
9568
9700
|
const isNewActiveTab = index === newValue - this.startIndex;
|
|
@@ -9611,13 +9743,13 @@ const MgTabs = class {
|
|
|
9611
9743
|
* @returns HTML Element
|
|
9612
9744
|
*/
|
|
9613
9745
|
render() {
|
|
9614
|
-
return (h("div", { key: '
|
|
9746
|
+
return (h("div", { key: '37be8d325dfea3a7b828236f3cc21da57be28154', class: this.classCollection.join() }, h("header", { key: 'd88f10c0331984a759f8abc311f11d913fb25206', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
|
|
9615
9747
|
[`${this.buttonTabBaseClass}`]: true,
|
|
9616
9748
|
[`${this.buttonTabBaseClass}--horizontal`]: true,
|
|
9617
9749
|
[`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
|
|
9618
9750
|
[`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),
|
|
9619
9751
|
[`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),
|
|
9620
|
-
}, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon, size: "small" }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index) => (h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-c-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
|
|
9752
|
+
}, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon, size: "small" }), tab.label, tab.badge !== undefined && (h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' })))))), this.tabs.map((tab, index) => (h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-c-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
|
|
9621
9753
|
}
|
|
9622
9754
|
get element() { return getElement(this); }
|
|
9623
9755
|
static get watchers() { return {
|
|
@@ -9725,7 +9857,7 @@ const MgTag = class {
|
|
|
9725
9857
|
* @returns HTML Element
|
|
9726
9858
|
*/
|
|
9727
9859
|
render() {
|
|
9728
|
-
return (h("span", { key: '
|
|
9860
|
+
return (h("span", { key: 'd0a9551f29695cd9c49751c4950db3c13065490e', class: this.classCollection.join() }, h("slot", { key: '51f2a2e1c9578f6449bb9c124335ad707d5ebeb1' })));
|
|
9729
9861
|
}
|
|
9730
9862
|
get element() { return getElement(this); }
|
|
9731
9863
|
static get watchers() { return {
|
|
@@ -9784,7 +9916,7 @@ const MgTooltip = class {
|
|
|
9784
9916
|
// Make the tooltip visible
|
|
9785
9917
|
this.mgTooltipContent.dataset.show = '';
|
|
9786
9918
|
// Enable the event listeners
|
|
9787
|
-
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
9919
|
+
this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
9788
9920
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
9789
9921
|
nextTick(() => {
|
|
9790
9922
|
this.windows.forEach((localWindow) => {
|
|
@@ -9800,7 +9932,7 @@ const MgTooltip = class {
|
|
|
9800
9932
|
// Hide the tooltip
|
|
9801
9933
|
this.mgTooltipContent.removeAttribute('data-show');
|
|
9802
9934
|
// Disable the event listeners
|
|
9803
|
-
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
|
|
9935
|
+
this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
|
|
9804
9936
|
// Remove event listener
|
|
9805
9937
|
this.windows.forEach((localWindow) => {
|
|
9806
9938
|
localWindow.removeEventListener('click', this.handleClickOutside, false);
|
|
@@ -9948,9 +10080,9 @@ const MgTooltip = class {
|
|
|
9948
10080
|
* @param mgButton - mg-button to observe
|
|
9949
10081
|
*/
|
|
9950
10082
|
this.setMgButtonMutationObserver = (mgButton) => {
|
|
9951
|
-
new MutationObserver(mutationList => {
|
|
10083
|
+
new MutationObserver((mutationList) => {
|
|
9952
10084
|
// stop process when none of mutations attributed is disabled
|
|
9953
|
-
if (!mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName)))
|
|
10085
|
+
if (!mutationList.some((mutation) => ['aria-disabled', 'disabled'].includes(mutation.attributeName)))
|
|
9954
10086
|
return;
|
|
9955
10087
|
// set guard when one of mutations is for a disabled with disabled-on-click
|
|
9956
10088
|
if (mutationList.some((mutation) => mutation.target.disabled && mutation.target.disableOnClick)) {
|
|
@@ -10065,7 +10197,9 @@ const MgTooltip = class {
|
|
|
10065
10197
|
// get slotted element wich is not the tooltip
|
|
10066
10198
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
10067
10199
|
// Get interactive element
|
|
10068
|
-
const interactiveElement = slotElement.matches(focusableElements)
|
|
10200
|
+
const interactiveElement = slotElement.matches(focusableElements)
|
|
10201
|
+
? slotElement
|
|
10202
|
+
: (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(focusableElements);
|
|
10069
10203
|
this.setTooltipedElement(interactiveElement || slotElement);
|
|
10070
10204
|
// Check if slotted element is a disabled mg-button
|
|
10071
10205
|
// In this case we wrap the mg-button into a div to enable the tooltip
|
|
@@ -10116,7 +10250,7 @@ const MgTooltip = class {
|
|
|
10116
10250
|
* @returns HTML Element
|
|
10117
10251
|
*/
|
|
10118
10252
|
render() {
|
|
10119
|
-
return (h(Host, { key: '
|
|
10253
|
+
return (h(Host, { key: '5cd926147c1b6723065c5334699764f32a8a06c9' }, h("slot", { key: 'a1b208798c79e34a207f3bedb2ad9662e02e83e2' }), h("slot", { key: '4f332961968fd3541caf47c2fd9072720fa2ee71', name: "content" })));
|
|
10120
10254
|
}
|
|
10121
10255
|
get element() { return getElement(this); }
|
|
10122
10256
|
static get watchers() { return {
|
|
@@ -10150,7 +10284,7 @@ const MgTooltipContent = class {
|
|
|
10150
10284
|
* @returns HTML Element
|
|
10151
10285
|
*/
|
|
10152
10286
|
render() {
|
|
10153
|
-
return (h(Host, { key: '
|
|
10287
|
+
return (h(Host, { key: '49dc32a8c7191fb291d2c47fc1e903d16e0774ab', role: "tooltip" }, h("span", { key: '913adc1f23eec27eb4b83cc4f4d9b4c1d6f9b2c2', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: '44da4832c535df385cbde0fd32791d901c538e84', name: "arrow" })));
|
|
10154
10288
|
}
|
|
10155
10289
|
};
|
|
10156
10290
|
MgTooltipContent.style = mgTooltipContentCss();
|