@mgdis/mg-components 6.24.0 → 6.26.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 +452 -261
- 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 +40 -23
- package/dist/cjs/mg-input-file.cjs.entry.js +12 -11
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +2565 -4013
- 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/assets/jodit/jodit.css +5821 -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 +84 -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 +69 -25
- 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 +9 -8
- 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/custom-properties.css +50 -0
- 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 +262 -9
- 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.conf.js +4 -0
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +51 -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 +24 -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 +294 -284
- 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 +197 -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 +449 -258
- 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 +40 -23
- package/dist/esm/mg-input-file.entry.js +12 -11
- package/dist/esm/mg-input-rich-text-editor.entry.js +2550 -3998
- 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-206505b5.entry.js +1667 -0
- 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-5dff879a.entry.js +1 -0
- package/dist/mg-components/{p-08d3d957.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-bf2252c9.entry.js +1 -0
- package/dist/mg-components/p-d0d12800.entry.js +1 -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 +19 -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-illustrated-message/mg-illustrated-message.conf.d.ts +8 -0
- package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.d.ts +9 -1
- 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 +158 -42
- package/ide/intellij/web-types.json +145 -65
- package/ide/vscode/css-custom-data.json +6 -2
- package/ide/vscode/html-custom-data.json +216 -33
- package/package.json +22 -22
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/custom-properties.scss +0 -212
- package/dist/mg-components/p-13feb37a.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-9953b835.entry.js +0 -1
- package/dist/mg-components/p-9c0a9fc7.entry.js +0 -1657
- package/dist/mg-components/p-DshvCiTL.js +0 -2
- package/dist/mg-components/p-a338088e.entry.js +0 -1
- /package/dist/mg-components/{p-C7xjtdiw.js → p-91BOpzAB.js} +0 -0
- /package/dist/mg-components/{p-DSEloqPn.js → p-BfblyCaJ.js} +0 -0
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
4
|
-
var index$1 = require('./index-
|
|
5
|
-
var index$2 = require('./index-
|
|
3
|
+
var index = require('./index-BmFwLEZT.js');
|
|
4
|
+
var index$1 = require('./index-DrZECzp6.js');
|
|
5
|
+
var index$2 = require('./index-B6J2EllP.js');
|
|
6
6
|
var mgInput_conf = require('./mg-input.conf-wgTh7iBb.js');
|
|
7
7
|
var events_utils = require('./events.utils-D5SAtkpQ.js');
|
|
8
|
+
var index$3 = require('./index-Acmyl4hv.js');
|
|
8
9
|
|
|
9
10
|
/**
|
|
10
11
|
* Available menu item status values
|
|
@@ -23,12 +24,12 @@ const targets = ['_blank', '_self', '_parent', '_top'];
|
|
|
23
24
|
/**
|
|
24
25
|
* Menu direction values
|
|
25
26
|
*/
|
|
26
|
-
const directions$
|
|
27
|
+
const directions$2 = {
|
|
27
28
|
VERTICAL: 'vertical',
|
|
28
29
|
HORIZONTAL: 'horizontal',
|
|
29
30
|
};
|
|
30
31
|
|
|
31
|
-
const mgActionMoreCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
32
|
+
const mgActionMoreCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{--mg-c-popover-spacing-vertical:var(--mg-b-size-4);--mg-c-popover-spacing-horizontal:0;--mg-c-popover-max-width:unset;--mg-c-popover-overflow:hidden}.mg-c-action-more__divider{--mg-c-divider-spacing-vertical:var(--mg-b-size-2)}.mg-c-action-more__chevron{transition:200ms}.mg-c-action-more__chevron--rotate.mg-c-action-more__chevron{transform:rotate(180deg)}.mg-c-action-more mg-menu-item{--mg-c-menu-item-button-margin-horizontal:var(--mg-b-size-4)}`;
|
|
32
33
|
|
|
33
34
|
/**
|
|
34
35
|
* MgActionMore['items'] type guard
|
|
@@ -38,7 +39,8 @@ const mgActionMoreCss = () => `.mg-u-visually-hidden{position:absolute !importan
|
|
|
38
39
|
const isMgActionMoreItems = (prop) => {
|
|
39
40
|
const items = prop;
|
|
40
41
|
return (typeof items === 'object' &&
|
|
41
|
-
items.every(item => (typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function') ||
|
|
42
|
+
items.every((item) => (typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function') ||
|
|
43
|
+
isMgActionMoreDivider(item)));
|
|
42
44
|
};
|
|
43
45
|
/**
|
|
44
46
|
* MgActionMoreDividerType type guard
|
|
@@ -121,7 +123,9 @@ const MgActionMore = class {
|
|
|
121
123
|
if (!isMgActionMoreItems(newValue)) {
|
|
122
124
|
throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${index$1.toString(newValue)}.`);
|
|
123
125
|
}
|
|
124
|
-
else if (isMgActionMoreItems(newValue) &&
|
|
126
|
+
else if (isMgActionMoreItems(newValue) &&
|
|
127
|
+
newValue.length > 0 &&
|
|
128
|
+
(isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {
|
|
125
129
|
throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${index$1.toString(newValue)}.`);
|
|
126
130
|
}
|
|
127
131
|
}
|
|
@@ -169,11 +173,11 @@ const MgActionMore = class {
|
|
|
169
173
|
[`${this.classBase}__chevron--rotate`]: this.expanded === true,
|
|
170
174
|
} }, index.h("mg-icon", { icon: "chevron-down" })));
|
|
171
175
|
}
|
|
172
|
-
return (index.h(index.Host, { key: '
|
|
176
|
+
return (index.h(index.Host, { key: 'c72c7ee9bdb39f2361fdcb9f670cc679efdd3589', "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { key: 'dd88d690d4600868bc485770b657b46afeccc727', class: this.classBase }, index.h("mg-popover", { key: 'eaecf2ec0fca98c0233240711ff7fed17374cd81', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange, "data-fallback-placement": "bottom-end" }, index.h("mg-button", { key: 'edb2e8556cbfe06aef62caea435205208722dd04', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && index.h("mg-icon", Object.assign({ key: 'a7a5c5bbc906da8dee937312fe373e97d9d74346' }, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { key: '83cda3d619de43ab8a75605d20082b31230cd7e2', slot: "content" }, index.h("mg-menu", { key: '37d0fd99fcafb3eb6f2a56a7a805523348146419', direction: directions$2.VERTICAL, label: this.messages.label }, this.items.map((item) => {
|
|
173
177
|
var _a, _b;
|
|
174
178
|
return isMgActionMoreDivider(item) ? (index.h("mg-divider", { class: "mg-c-action-more__divider", key: "divider", "full-width": true })) : (index.h("mg-menu-item", { key: item.label, status: item.status || Status$1.VISIBLE, target: item.target, href: item.href,
|
|
175
179
|
// eslint-disable-next-line react/jsx-no-bind
|
|
176
|
-
onClick: e => this.handleItemClick(e, item.mouseEventHandler) }, ((_a = item.icon) === null || _a === void 0 ? void 0 : _a.icon) && index.h("mg-icon", { icon: item.icon.icon, variant: item.icon.variant, variantStyle: item.icon.variantStyle, slot: "image" }), index.h("span", { slot: "label" }, item.label), ((_b = item.badge) === null || _b === void 0 ? void 0 : _b.label) && index.h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" })));
|
|
180
|
+
onClick: (e) => this.handleItemClick(e, item.mouseEventHandler) }, ((_a = item.icon) === null || _a === void 0 ? void 0 : _a.icon) && (index.h("mg-icon", { icon: item.icon.icon, variant: item.icon.variant, variantStyle: item.icon.variantStyle, slot: "image" })), index.h("span", { slot: "label" }, item.label), ((_b = item.badge) === null || _b === void 0 ? void 0 : _b.label) && (index.h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" }))));
|
|
177
181
|
})))))));
|
|
178
182
|
}
|
|
179
183
|
get element() { return index.getElement(this); }
|
|
@@ -199,7 +203,7 @@ MgActionMore.style = mgActionMoreCss();
|
|
|
199
203
|
*/
|
|
200
204
|
const variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
|
|
201
205
|
|
|
202
|
-
const mgBadgeCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
206
|
+
const mgBadgeCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-badge{min-width:var(--mg-c-badge-size);height:var(--mg-c-badge-size);box-sizing:border-box;padding:0 var(--mg-b-size-4);border:var(--mg-b-size-border) solid;border-radius:calc(var(--mg-c-badge-size)/2);font-size:var(--mg-c-badge-font-size);font-weight:600;line-height:var(--mg-c-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:var(--mg-b-color-primary);background-color:var(--mg-b-color-primary);color:var(--mg-b-color-text-on-primary)}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-primary)}.mg-c-badge.mg-c-badge--secondary{border-color:var(--mg-b-color-secondary);background-color:var(--mg-b-color-secondary);color:var(--mg-b-color-text-on-secondary)}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-secondary)}.mg-c-badge.mg-c-badge--danger{border-color:var(--mg-b-color-danger);background-color:var(--mg-b-color-danger);color:var(--mg-b-color-text-on-danger)}.mg-c-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-danger)}.mg-c-badge.mg-c-badge--info{border-color:var(--mg-b-color-info);background-color:var(--mg-b-color-info);color:var(--mg-b-color-text-on-info)}.mg-c-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-info)}.mg-c-badge.mg-c-badge--success{border-color:var(--mg-b-color-success);background-color:var(--mg-b-color-success);color:var(--mg-b-color-text-on-success)}.mg-c-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-success)}.mg-c-badge.mg-c-badge--warning{border-color:var(--mg-b-color-warning);background-color:var(--mg-b-color-warning);color:var(--mg-b-color-text-on-warning)}.mg-c-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-warning)}.mg-c-badge.mg-c-badge--text-color{border-color:currentcolor;background-color:currentcolor}.mg-c-badge.mg-c-badge--text-color .mg-c-badge__value{color:var(--mg-c-badge-color-text, var(--mg-b-color-light))}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline{background-color:rgba(0,0,0,0)}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline .mg-c-badge__value{color:currentcolor}.mg-c-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}`;
|
|
203
207
|
|
|
204
208
|
const MgBadge = class {
|
|
205
209
|
constructor(hostRef) {
|
|
@@ -269,7 +273,7 @@ const MgBadge = class {
|
|
|
269
273
|
* @returns HTML Element
|
|
270
274
|
*/
|
|
271
275
|
render() {
|
|
272
|
-
return (index.h("span", { key: '
|
|
276
|
+
return (index.h("span", { key: 'af4f655ca8a11422a34cdce3e8febf46269ca574', class: this.classCollection.join() }, index.h("span", { key: 'bcc8c0a863615ba503f135f562bd970216599df0', class: "mg-c-badge__value" }, this.value), index.h("span", { key: '136d338c9a7b7791178dec1dae3898f4a7b099ea', class: "mg-u-visually-hidden" }, this.label)));
|
|
273
277
|
}
|
|
274
278
|
get element() { return index.getElement(this); }
|
|
275
279
|
static get watchers() { return {
|
|
@@ -298,7 +302,7 @@ const sizes$3 = ['medium', 'large'];
|
|
|
298
302
|
*/
|
|
299
303
|
const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
|
|
300
304
|
|
|
301
|
-
const mgButtonCss = () => `:host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--primary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--secondary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--info:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--success:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--warning:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger-alt:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled,.mg-c-button[aria-disabled=true],.mg-c-button:disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;width:100%;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible),:host([data-focus-visible]){outline:0}:host(:focus-visible) .mg-c-button,:host([data-focus-visible]) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width
|
|
305
|
+
const mgButtonCss = () => `:host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][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([data-mg-popover-trigger][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([data-mg-popover-trigger][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([data-mg-popover-trigger][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([data-mg-popover-trigger][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([data-mg-popover-trigger][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([data-mg-popover-trigger][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([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger-alt:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled,.mg-c-button[aria-disabled=true],.mg-c-button:disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;width:100%;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible),:host([data-focus-visible]){outline:0}:host(:focus-visible) .mg-c-button,:host([data-focus-visible]) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:var(--mg-b-size-2)}`;
|
|
302
306
|
|
|
303
307
|
const MgButton = class {
|
|
304
308
|
constructor(hostRef) {
|
|
@@ -458,6 +462,9 @@ const MgButton = class {
|
|
|
458
462
|
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
459
463
|
}
|
|
460
464
|
}
|
|
465
|
+
else {
|
|
466
|
+
this.classCollection.delete(`mg-c-button--icon`);
|
|
467
|
+
}
|
|
461
468
|
this.setIconSize();
|
|
462
469
|
}
|
|
463
470
|
loadingHandler(newValue) {
|
|
@@ -503,7 +510,7 @@ const MgButton = class {
|
|
|
503
510
|
*/
|
|
504
511
|
render() {
|
|
505
512
|
var _a;
|
|
506
|
-
return (index.h(index.Host, { key: '
|
|
513
|
+
return (index.h(index.Host, { key: '9efa9dbbcdb2965cb8fd301c86988d0b0d97b474', role: "button", tabIndex: this.element.getAttribute('tabindex') || 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, index.h("div", { key: '36918b5b208a9e0a9650107f4418cac35ade1ed2', class: this.classCollection.join() }, this.loading && index.h("mg-icon", { key: '8ad3e911d273f69441f2a405f8040cc685a0a486', icon: "loader", spin: true }), index.h("div", { key: 'a6b199c669ef6b15bfc345c98192290ce11e65cb', class: "mg-c-button__content" }, index.h("slot", { key: 'b13d317001dbf66c945cdf9e97c06338ce073c12' })))));
|
|
507
514
|
}
|
|
508
515
|
get element() { return index.getElement(this); }
|
|
509
516
|
static get watchers() { return {
|
|
@@ -534,7 +541,7 @@ MgButton.style = mgButtonCss();
|
|
|
534
541
|
*/
|
|
535
542
|
const radiusSizes = ['xsmall', 'small', 'medium'];
|
|
536
543
|
|
|
537
|
-
const mgCardCss = () => `.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);max-height:var(--mg-c-card-max-height);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}.mg-c-card.mg-c-card--shadow{--mg-c-card-border:var(--mg-b-color-neutral-20);box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card.mg-c-card--radius-xsmall{--mg-c-card-border-radius:var(--mg-b-size-
|
|
544
|
+
const mgCardCss = () => `.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);max-height:var(--mg-c-card-max-height);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}.mg-c-card.mg-c-card--shadow{--mg-c-card-border:var(--mg-b-color-neutral-20);box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card.mg-c-card--radius-xsmall{--mg-c-card-border-radius:var(--mg-b-size-radius-medium)}.mg-c-card.mg-c-card--radius-small{--mg-c-card-border-radius:var(--mg-b-size-radius-large)}::slotted(:first-child){margin-block-start:0 !important}::slotted(:last-child){margin-block-end:0 !important}`;
|
|
538
545
|
|
|
539
546
|
const MgCard = class {
|
|
540
547
|
constructor(hostRef) {
|
|
@@ -591,7 +598,7 @@ const MgCard = class {
|
|
|
591
598
|
* @returns HTML Element
|
|
592
599
|
*/
|
|
593
600
|
render() {
|
|
594
|
-
return (index.h("div", { key: '
|
|
601
|
+
return (index.h("div", { key: '8fb6d9aa655b838e219a077670ce6296640d0854', class: this.classCollection.join() }, index.h("slot", { key: '9413035054408e44b8c8bb3f2033ff970931c347' })));
|
|
595
602
|
}
|
|
596
603
|
static get watchers() { return {
|
|
597
604
|
"shadow": [{
|
|
@@ -604,7 +611,7 @@ const MgCard = class {
|
|
|
604
611
|
};
|
|
605
612
|
MgCard.style = mgCardCss();
|
|
606
613
|
|
|
607
|
-
const mgCharacterLeftCss = () => `.mg-u-visually-hidden.sc-mg-character-left{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
614
|
+
const mgCharacterLeftCss = () => `.mg-u-visually-hidden.sc-mg-character-left{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden.sc-mg-character-left *.sc-mg-character-left{overflow:hidden !important}*.sc-mg-character-left:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*.sc-mg-character-left{animation:none !important;transition:none !important}}mg-character-left.sc-mg-character-left{display:block}`;
|
|
608
615
|
|
|
609
616
|
const MgCharacterLeft = class {
|
|
610
617
|
constructor(hostRef) {
|
|
@@ -640,7 +647,7 @@ const MgCharacterLeft = class {
|
|
|
640
647
|
* @returns HTML Element
|
|
641
648
|
*/
|
|
642
649
|
render() {
|
|
643
|
-
return (index.h("span", { key: '
|
|
650
|
+
return (index.h("span", { key: '45b074ad1ffaa1041e5c4d62417ed44ea76aa218', id: this.identifier, "aria-live": "polite" }, index.h("span", { key: 'ed5f631cb268f888287e5ffafbd5ce22b07c71d5', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), index.h("span", { key: 'd9cda093c2ece7c3e39ea1bbd9499318c964b7f6', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
|
|
644
651
|
}
|
|
645
652
|
get element() { return index.getElement(this); }
|
|
646
653
|
static get watchers() { return {
|
|
@@ -654,7 +661,7 @@ const MgCharacterLeft = class {
|
|
|
654
661
|
};
|
|
655
662
|
MgCharacterLeft.style = mgCharacterLeftCss();
|
|
656
663
|
|
|
657
|
-
const mgDetailsCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
664
|
+
const mgDetailsCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span *{overflow:hidden !important}}`;
|
|
658
665
|
|
|
659
666
|
const MgDetails = class {
|
|
660
667
|
constructor(hostRef) {
|
|
@@ -708,7 +715,7 @@ const MgDetails = class {
|
|
|
708
715
|
* @returns HTML Element
|
|
709
716
|
*/
|
|
710
717
|
render() {
|
|
711
|
-
return (index.h("details", { key: '
|
|
718
|
+
return (index.h("details", { key: '78dbeab3b3e6c245bda8fad5900b70727fd47595', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, index.h("summary", { key: '766e4756a66a1f8e6bc2159f30133a0702353f32' }, index.h("slot", { key: '3473dd0c0fc7de78c1d7ae6f9ee4a4d2fc7835ee', name: "summary" }), index.h("span", { key: '7c8d3da4df69d2802f104caaf568ac513f9f03b6', class: "mg-c-details__toggle" }, index.h("mg-icon", { key: '44da384780ab768bde20acb58885280e193de921', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { key: '387de0caa5ae819c89449e5063e0b6e05b3df8fe', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { key: '48c1fe8df990a250f098594d9b50df947613955c', class: "mg-c-details__details" }, index.h("slot", { key: '95554b4d890750cc3b3008965be3e5954d49d810', name: "details" }))));
|
|
712
719
|
}
|
|
713
720
|
get element() { return index.getElement(this); }
|
|
714
721
|
static get watchers() { return {
|
|
@@ -725,7 +732,12 @@ const MgDetails = class {
|
|
|
725
732
|
};
|
|
726
733
|
MgDetails.style = mgDetailsCss();
|
|
727
734
|
|
|
728
|
-
|
|
735
|
+
/**
|
|
736
|
+
* List of all possibles directions
|
|
737
|
+
*/
|
|
738
|
+
const directions$1 = ['horizontal', 'vertical'];
|
|
739
|
+
|
|
740
|
+
const mgDividerCss = () => `.mg-c-divider{width:var(--mg-b-size-120);height:0;margin:var(--mg-c-divider-spacing-vertical) auto;border-block-start:var(--mg-c-divider-thickness) solid var(--mg-c-divider-color-background)}.mg-c-divider.mg-c-divider--full-width{width:100%}.mg-c-divider.mg-c-divider--direction-vertical{width:0;height:var(--mg-b-size-120);margin:auto var(--mg-c-divider-spacing-vertical);border-block-start:none;border-inline-start:var(--mg-c-divider-thickness) solid var(--mg-c-divider-color-background)}.mg-c-divider.mg-c-divider--direction-vertical.mg-c-divider--full-width{width:0;height:100%}:host([aria-orientation=vertical]){display:inline-flex}`;
|
|
729
741
|
|
|
730
742
|
const MgDivider = class {
|
|
731
743
|
constructor(hostRef) {
|
|
@@ -737,17 +749,46 @@ const MgDivider = class {
|
|
|
737
749
|
* Define component size
|
|
738
750
|
*/
|
|
739
751
|
this.fullWidth = false;
|
|
752
|
+
/**
|
|
753
|
+
* Define component direction
|
|
754
|
+
*/
|
|
755
|
+
this.direction = 'horizontal';
|
|
756
|
+
}
|
|
757
|
+
validateDirection(newValue) {
|
|
758
|
+
if (newValue === '') {
|
|
759
|
+
// Reactive frameworks (ex. Vue) can pass "" instead of undefined.
|
|
760
|
+
// Treat it as "use the default", do not throw.
|
|
761
|
+
this.direction = directions$1[0];
|
|
762
|
+
}
|
|
763
|
+
else if (!directions$1.includes(newValue)) {
|
|
764
|
+
throw new Error(`<mg-divider> prop "direction" must be one of: ${directions$1.join(', ')}. Passed value: ${index$1.toString(newValue)}.`);
|
|
765
|
+
}
|
|
766
|
+
}
|
|
767
|
+
/*************
|
|
768
|
+
* Lifecycle *
|
|
769
|
+
*************/
|
|
770
|
+
/**
|
|
771
|
+
* Check if component props are well configured on init
|
|
772
|
+
*/
|
|
773
|
+
componentWillLoad() {
|
|
774
|
+
this.validateDirection(this.direction);
|
|
740
775
|
}
|
|
741
776
|
/**
|
|
742
777
|
* Render
|
|
743
778
|
* @returns HTML Element
|
|
744
779
|
*/
|
|
745
780
|
render() {
|
|
746
|
-
return (index.h("div", { key: '
|
|
781
|
+
return (index.h(index.Host, { key: '33f0896876d43052fd99a20ebf943d3ee30dfc7a', role: "separator", "aria-orientation": this.direction }, index.h("div", { key: 'a9e87c1d097177b5995649485da427ca25436f8c', class: {
|
|
747
782
|
'mg-c-divider': true,
|
|
748
783
|
'mg-c-divider--full-width': this.fullWidth,
|
|
749
|
-
|
|
784
|
+
'mg-c-divider--direction-vertical': this.direction === 'vertical',
|
|
785
|
+
} })));
|
|
750
786
|
}
|
|
787
|
+
static get watchers() { return {
|
|
788
|
+
"direction": [{
|
|
789
|
+
"validateDirection": 0
|
|
790
|
+
}]
|
|
791
|
+
}; }
|
|
751
792
|
};
|
|
752
793
|
MgDivider.style = mgDividerCss();
|
|
753
794
|
|
|
@@ -812,17 +853,20 @@ const MgForm = class {
|
|
|
812
853
|
}
|
|
813
854
|
// If the form is disabled or readonly none of them are required
|
|
814
855
|
// Check if all fields are not editable (readonly or disabled)
|
|
815
|
-
const isEditable = input => !(input.disabled || input.readonly);
|
|
816
|
-
const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';
|
|
817
|
-
if (!this.disabled &&
|
|
856
|
+
const isEditable = (input) => !(input.disabled || input.readonly);
|
|
857
|
+
const isMgInputToggle = (input) => input.nodeName === 'MG-INPUT-TOGGLE';
|
|
858
|
+
if (!this.disabled &&
|
|
859
|
+
!this.readonly &&
|
|
860
|
+
this.mgInputs.some((input) => isEditable(input) && !isMgInputToggle(input))) {
|
|
818
861
|
// Get editable inputs
|
|
819
862
|
const editableInputs = this.mgInputs.filter(isEditable);
|
|
820
863
|
// Get required inputs
|
|
821
864
|
// mg-input-toggle can not be required
|
|
822
|
-
const requiredInputs = editableInputs.filter(input => !isMgInputToggle(input) && input.required);
|
|
865
|
+
const requiredInputs = editableInputs.filter((input) => !isMgInputToggle(input) && input.required);
|
|
823
866
|
// All inputs are required
|
|
824
|
-
if ([requiredInputs.length, editableInputs.length].every(length => length === 1) ||
|
|
825
|
-
(requiredInputs.length > 1 &&
|
|
867
|
+
if ([requiredInputs.length, editableInputs.length].every((length) => length === 1) ||
|
|
868
|
+
(requiredInputs.length > 1 &&
|
|
869
|
+
requiredInputs.length === editableInputs.filter((input) => !isMgInputToggle(input)).length)) {
|
|
826
870
|
this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
|
|
827
871
|
this.classCollection.add(this.classAllRequired);
|
|
828
872
|
}
|
|
@@ -846,7 +890,7 @@ const MgForm = class {
|
|
|
846
890
|
this.checkValidity = () => {
|
|
847
891
|
// Update required on input event
|
|
848
892
|
this.setRequiredMessage();
|
|
849
|
-
this.valid = !this.mgInputs.some(input => input.invalid);
|
|
893
|
+
this.valid = !this.mgInputs.some((input) => input.invalid);
|
|
850
894
|
this.invalid = !this.valid;
|
|
851
895
|
// We need to send valid event if it is the same value
|
|
852
896
|
this.formValid.emit(this.valid);
|
|
@@ -867,7 +911,7 @@ const MgForm = class {
|
|
|
867
911
|
this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT'));
|
|
868
912
|
// Set inputs readonly or disabled based on form configuration
|
|
869
913
|
// Othewise listen to events
|
|
870
|
-
this.mgInputs.forEach(input => {
|
|
914
|
+
this.mgInputs.forEach((input) => {
|
|
871
915
|
if (this.labelOnTop) {
|
|
872
916
|
input.labelOnTop = true;
|
|
873
917
|
}
|
|
@@ -925,7 +969,7 @@ const MgForm = class {
|
|
|
925
969
|
async displayError() {
|
|
926
970
|
if (!this.readonly) {
|
|
927
971
|
const mgFieldsets = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-FIELDSET'));
|
|
928
|
-
[...mgFieldsets, ...this.mgInputs].forEach(input => {
|
|
972
|
+
[...mgFieldsets, ...this.mgInputs].forEach((input) => {
|
|
929
973
|
var _a;
|
|
930
974
|
(_a = input.displayError) === null || _a === void 0 ? void 0 : _a.call(input);
|
|
931
975
|
});
|
|
@@ -963,7 +1007,7 @@ const MgForm = class {
|
|
|
963
1007
|
// Get slotted mgButtons
|
|
964
1008
|
this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));
|
|
965
1009
|
// Set button form identifier
|
|
966
|
-
this.mgButtons.forEach(mgButton => {
|
|
1010
|
+
this.mgButtons.forEach((mgButton) => {
|
|
967
1011
|
mgButton.setAttribute('form', this.identifier);
|
|
968
1012
|
if (mgButton.type === 'reset') {
|
|
969
1013
|
mgButton.addEventListener('click', () => {
|
|
@@ -990,8 +1034,8 @@ const MgForm = class {
|
|
|
990
1034
|
componentDidLoad() {
|
|
991
1035
|
// Update mgInputs when mgForm content change
|
|
992
1036
|
const observerOptions = { childList: true, subtree: true };
|
|
993
|
-
new MutationObserver(mutations => {
|
|
994
|
-
if (mutations.some(mutation => Object.keys(observerOptions).includes(mutation.type))) {
|
|
1037
|
+
new MutationObserver((mutations) => {
|
|
1038
|
+
if (mutations.some((mutation) => Object.keys(observerOptions).includes(mutation.type))) {
|
|
995
1039
|
this.setMgInputs();
|
|
996
1040
|
this.checkValidity();
|
|
997
1041
|
}
|
|
@@ -1002,7 +1046,7 @@ const MgForm = class {
|
|
|
1002
1046
|
* @returns HTML Element
|
|
1003
1047
|
*/
|
|
1004
1048
|
render() {
|
|
1005
|
-
return (index.h("form", { key: '
|
|
1049
|
+
return (index.h("form", { key: '65d3e11931386af2dedd953f58505e2c71cd99ff', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && index.h("p", { key: '7546db3b8a4259fd7d092cc7b912b6593fab9d84', innerHTML: this.requiredMessageText }), index.h("slot", { key: '0023ed360230ea97395a249b230e02bb7a4bdbda' }), !this.readonly && !this.disabled && index.h("slot", { key: 'de84e088ff029eff487be1ed8b4766425c558c29', name: "actions" })));
|
|
1006
1050
|
}
|
|
1007
1051
|
get element() { return index.getElement(this); }
|
|
1008
1052
|
static get watchers() { return {
|
|
@@ -1043,9 +1087,7 @@ const variants$2 = ['success', 'warning', 'danger', 'info', 'app', 'neutral'];
|
|
|
1043
1087
|
*/
|
|
1044
1088
|
const variantStyles$1 = ['icon', 'background', 'full'];
|
|
1045
1089
|
|
|
1046
|
-
const icons = { 'address-card': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm11 3h-3v1h3zm-3 2h3v1h-3zM8 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-5 5.4A2.4 2.4 0 0 1 5.4 9h1.2A2.4 2.4 0 0 1 9 11.4a.6.6 0 0 1-.6.6H3.6a.6.6 0 0 1-.6-.6" clip-rule="evenodd"/></svg>', 'address-card-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 6.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" d="M13 5h-3v1h3zm-3 2h3v1h-3z"/><path fill="currentColor" fill-rule="evenodd" d="M5.4 9A2.4 2.4 0 0 0 3 11.4a.6.6 0 0 0 .6.6h4.8a.6.6 0 0 0 .6-.6A2.4 2.4 0 0 0 6.6 9zm0 1a1.4 1.4 0 0 0-1.342 1h3.884A1.4 1.4 0 0 0 6.6 10z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm12 1H2v10h12z" clip-rule="evenodd"/></svg>', 'align-center': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 3h8v1H4zm-2 9h12v1H2zm12-6H2v1h12zM4 9h8v1H4z"/></svg>', 'align-justify': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 3h12v1H2zm0 9h12v1H2zm12-6H2v1h12zM2 9h12v1H2z"/></svg>', 'align-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 3h8v1H2zm0 9h12v1H2zm12-6H2v1h12zM2 9h8v1H2z"/></svg>', 'align-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6 3h8v1H6zm-4 9h12v1H2zm12-6H2v1h12zM6 9h8v1H6z"/></svg>', 'api': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.44 11.47h-.02l-.66-.1-.02-.08c-.03-.11-.08-.21-.13-.31l-.04-.07.4-.54v-.02l-.52-.52h-.02l-.54.41-.07-.04c-.1-.05-.2-.09-.31-.13l-.08-.02-.1-.67v-.01h-.73v.02l-.1.66-.08.02c-.11.03-.21.08-.31.13l-.07.04-.55-.41-.52.52v.02l.41.54-.04.07c-.05.1-.09.2-.13.31l-.02.08-.67.1h-.01v.73h.02l.66.1.02.08c.03.1.08.21.13.3l.04.07-.41.55.52.52h.02l.54-.41.07.04c.1.05.2.09.31.13l.08.02.1.67v.01h.73v-.02l.1-.66.08-.02c.11-.03.21-.08.31-.13l.07-.04.55.41.52-.52v-.02l-.4-.54.04-.07c.05-.1.09-.2.13-.31l.02-.08.67-.1h.01v-.73zm-2.46 1.38c-.56 0-1.01-.45-1.01-1.01s.45-1.01 1.01-1.01 1.01.45 1.01 1.01-.45 1.01-1.01 1.01M8.51 5.81c-.11-.09-.27-.14-.5-.14h-.38v1.17h.27c.26 0 .45-.05.58-.15s.19-.25.19-.44-.05-.34-.16-.43zm1.57 5.13-.3-.4c-.1-.1-.09-.27 0-.37l.52-.52c.1-.1.26-.1.37 0l.4.29c.06-.03.13-.06.2-.08l.07-.49c0-.14.12-.25.26-.25h.45a5.44 5.44 0 1 0-10.5-1.99 5.44 5.44 0 0 0 5.44 5.44c.78 0 1.54-.17 2.25-.49v-.6c0-.14.11-.26.26-.26l.49-.07c.02-.07.05-.13.08-.2zm.18-5.96h.84v3.94h-.84zM5.4 8.92l-.29-.94H3.67l-.29.94h-.9l1.39-3.96h1.02l1.4 3.96h-.9zm3.72-1.74c-.26.23-.64.34-1.13.34h-.36v1.4h-.84V4.98h1.26c.48 0 .84.1 1.09.31s.37.51.37.92c0 .42-.13.75-.4.97zM4.4 5.57q-.09.345-.51 1.71h1.03q-.39-1.275-.45-1.44c-.03-.11-.06-.2-.07-.26z"/></svg>', 'archive': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3 6v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6zm7 2H6V7h4zm3-3H3c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1"/></svg>', 'archive-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13 2H3c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1m-1 11H4.04S4 12.98 4 12.96V6h8zm1-8H3V3h10zm-3 3H6V7h4z"/></svg>', 'arrow-clock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m3.025 3.82-.002-.001.083-.09.063-.066.009-.01q.132-.15.273-.292a4 4 0 0 1 .215-.196q.136-.124.279-.24.108-.086.22-.166l.024-.018q.143-.105.293-.203a7 7 0 0 1 1.198-.607l.029-.01q.126-.05.257-.094a6 6 0 0 1 .375-.108l.067-.019q.105-.029.21-.053c.146-.032.294-.054.442-.075l.092-.015q.072-.013.146-.022A6.47 6.47 0 0 1 13 3.847V1.996h1v4h-4v-1h2.594a5.48 5.48 0 0 0-5.189-2.467l-.124.019-.077.012q-.188.025-.373.064a3 3 0 0 0-.173.044l-.063.017a6 6 0 0 0-.317.09 6 6 0 0 0-.227.084l-.016.006a6 6 0 0 0-.523.232 5.4 5.4 0 0 0-.736.452l-.028.021q-.092.065-.18.135-.12.098-.235.204l-.05.044q-.068.06-.133.122-.117.117-.226.241l-.013.014A5.496 5.496 0 1 0 13.5 7.996h1A6.5 6.5 0 1 1 3.025 3.82"/><path fill="currentColor" d="M9.795 11.746 7 8.95V4.246h1v4.29l2.5 2.505z"/></svg>', 'arrow-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.295 8.295 8.5 12.085V2h-1v10.085l-3.795-3.79L3 9l5 5 5-5z"/></svg>', 'arrow-down-a-z': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m6.53 10.9-1.41 1.41-.71.71-2.12-2.12.71-.71.88.88V3.02h1v8.12l.95-.95.71.71zM12.29 6H10.5l-.36 1H9.08l1.79-5h1.05l1.79 5h-1.06zm-.36-1.02-.53-1.49-.53 1.49zm1.79 5.18V9H9.09v1h3.29l-3.29 2.84V14h4.63v-1h-3.29z"/></svg>', 'arrow-down-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.999 12.292V3.999h1v10h-10v-1h8.292L2 2.707 2.707 2z"/></svg>', 'arrow-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m7 13 .705-.705L3.915 8.5H14v-1H3.915l3.79-3.795L7 3 2 8z"/></svg>', 'arrow-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m9 3-.715.696 3.79 3.804H2v1h10.075l-3.79 3.787L9 13l5-5z"/></svg>', 'arrow-rotate': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m3.025 3.82-.002-.001c.046-.055.098-.103.146-.156q.137-.155.282-.302c.069-.068.142-.13.215-.195q.136-.124.279-.241.12-.095.244-.184.143-.105.293-.203a7 7 0 0 1 1.198-.607q.142-.055.286-.104a6 6 0 0 1 .375-.108c.092-.025.184-.052.278-.072a6 6 0 0 1 .441-.075c.08-.012.157-.028.238-.037A6.47 6.47 0 0 1 13 3.847V1.996h1v4h-4v-1h2.594a5.48 5.48 0 0 0-5.188-2.467q-.102.014-.202.031-.188.025-.373.064c-.08.017-.157.04-.236.06a6 6 0 0 0-.317.092q-.122.042-.243.089a6 6 0 0 0-.523.232 5.4 5.4 0 0 0-.736.452q-.106.076-.208.156-.12.098-.235.204-.093.08-.183.166c-.083.081-.16.169-.239.255A5.496 5.496 0 1 0 13.5 7.996h1A6.5 6.5 0 1 1 3.025 3.82"/></svg>', 'arrow-rotate-backward': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.975 3.82.002-.001c-.046-.055-.098-.103-.146-.156-.092-.103-.183-.205-.282-.302-.069-.068-.142-.13-.215-.195q-.135-.124-.279-.241-.12-.095-.244-.184a7 7 0 0 0-.293-.203 7 7 0 0 0-.859-.467 7 7 0 0 0-.339-.14q-.142-.055-.286-.104a6 6 0 0 0-.375-.108c-.092-.025-.184-.052-.278-.072a6 6 0 0 0-.441-.075c-.08-.012-.157-.028-.238-.037A6.47 6.47 0 0 0 3 3.847V1.996H2v4h4v-1H3.406a5.48 5.48 0 0 1 5.189-2.467q.101.014.2.031.19.025.374.064c.08.017.157.04.236.06q.16.042.317.092.122.042.243.089a6 6 0 0 1 .523.232 5.3 5.3 0 0 1 .736.452q.105.076.208.156.12.098.235.204.093.08.183.166c.083.081.16.169.239.255A5.496 5.496 0 1 1 2.5 7.996h-1A6.5 6.5 0 1 0 12.975 3.82"/></svg>', 'arrow-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2 3 7l.705.705L7.5 3.915V14h1V3.915l3.795 3.79L13 7z"/></svg>', 'arrow-up-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.292 3H3.999V2h10v10h-1V3.707L2.707 14 2 13.29z"/></svg>', 'arrow-up-right-square': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.33 3v10c0 .73-.6 1.32-1.33 1.33H3c-.73 0-1.32-.6-1.33-1.33V3c0-.73.6-1.32 1.33-1.33h10c.73 0 1.32.6 1.33 1.33m-2.48.46H8.68c-.37 0-.67.29-.68.66v.04c0 .18.07.35.2.47l.91.91-5.53 5.53c-.13.13-.14.33-.01.47h.01l.87.88c.13.13.33.14.47.01h.01l5.53-5.53.91.9c.26.28.7.29.98.02l.02-.02c.12-.13.19-.3.19-.48V4.15c0-.37-.3-.67-.67-.67z"/></svg>', 'arrow-up-z-a': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m5.82 5.85-.94-.94v8.11h-1V4.96l-.89.89-.71-.71 1.41-1.41.71-.71.71.71 1.41 1.41-.71.71zM12.29 13H10.5l-.36 1H9.08l1.79-5h1.05l1.79 5h-1.06zm-.36-1.02-.53-1.49-.53 1.49zm1.79-8.82V2H9.09v1h3.29L9.09 5.84V7h4.63V6h-3.29z"/></svg>', 'arrows-compare': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.705 8.295 9.915 6.5H15v-1H9.915l1.79-1.795L11 3 8 6l3 3zM8 10 5 7l-.705.705L6.085 9.5H1v1h5.085l-1.79 1.795L5 13z"/></svg>', 'arrows-right-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.085 4.499-1.79-1.795.705-.705 3 3-3 3-.705-.705 1.79-1.795H9v-1zM8 6.514h.003v5.572l1.795-1.79.705.705-3 3-3-3 .705-.705 1.795 1.79V5.499H2v-1h6z"/></svg>', 'arrows-right-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m11 2 3 3-3 3-.705-.705 1.79-1.795H2v-1h10.085l-1.79-1.795zm-7.085 9.5 1.79 1.795L5 14l-3-3 3-3 .705.705-1.79 1.795H14v1z" clip-rule="evenodd"/></svg>', 'arrows-rotate': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10 4.997h2.61a5.5 5.5 0 0 0-6.175-2.271A5.5 5.5 0 0 0 2.5 7.993h-1a6.49 6.49 0 0 1 4.289-6.112A6.51 6.51 0 0 1 13 3.838V2h1v3.996h-4zM6 10.99H3.39a5.5 5.5 0 0 0 6.175 2.271A5.5 5.5 0 0 0 13.5 7.993h1a6.49 6.49 0 0 1-4.289 6.113A6.51 6.51 0 0 1 3 12.15v1.838H2V9.991h4z"/></svg>', 'arrows-rotate-backward': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6 4.997H3.39a5.5 5.5 0 0 1 6.175-2.271A5.5 5.5 0 0 1 13.5 7.993h1a6.49 6.49 0 0 0-4.289-6.112A6.51 6.51 0 0 0 3 3.838V2H2v3.996h4zm4 5.993h2.61a5.5 5.5 0 0 1-6.175 2.271A5.5 5.5 0 0 1 2.5 7.993h-1a6.49 6.49 0 0 0 4.289 6.113A6.51 6.51 0 0 0 13 12.15v1.838h1V9.991h-4z"/></svg>', 'arrows-up-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1.5 5 3-3 3 3-.7.7L5 3.9V14H4V3.9L2.2 5.7zM12 12.1l1.8-1.8.7.7-3 3-3-3 .7-.7 1.8 1.8V2h1z" clip-rule="evenodd"/></svg>', 'ban': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-3.126 4.582a6 6 0 0 1-8.456-8.456zm.707-.708L4.127 3.418a6 6 0 0 1 8.456 8.456" clip-rule="evenodd"/></svg>', 'bell': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.97 6a4 4 0 0 1 8 0v2.3l1.507.822c.91.496.558 1.878-.478 1.878H3.002c-1.027 0-1.387-1.362-.494-1.87l1.461-.83zm2.027 6a2 2 0 1 0 4 0z"/></svg>', 'bell-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9.997 12a2 2 0 0 1-4 0z"/><path fill="currentColor" fill-rule="evenodd" d="M7.969 2a4 4 0 0 1 4 4v2.3l1.508.822c.91.496.558 1.878-.478 1.878H3.002l-.095-.004c-.922-.078-1.243-1.292-.48-1.815l.08-.05L3.97 8.3V6a4 4 0 0 1 4-4m0 1a3 3 0 0 0-3 3v2.882L3.002 10h9.997l-1.508-.822-.522-.284V6a3 3 0 0 0-3-3" clip-rule="evenodd"/></svg>', 'book': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2H1.5a.5.5 0 0 1 0-1H3V9H1.5a.5.5 0 0 1 0-1H3V7H1.5a.5.5 0 0 1 0-1H3zm8 0H9v4h2z" clip-rule="evenodd"/></svg>', 'book-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4 2a1 1 0 0 0-1 1v3H1.5a.5.5 0 0 0 0 1H3v1H1.5a.5.5 0 0 0 0 1H3v1H1.5a.5.5 0 0 0 0 1H3v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm5 1H4v3h.5a.5.5 0 0 1 0 1H4v1h.5a.5.5 0 0 1 0 1H4v1h.5a.5.5 0 0 1 0 1H4v2h8V3h-1v4H9z" clip-rule="evenodd"/></svg>', 'briefcase': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 4v1H2a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-3V4a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1m5 1V4H6v1z" clip-rule="evenodd"/></svg>', 'briefcase-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 5V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1-1h4v1H6zM2 6v7h12V6z" clip-rule="evenodd"/></svg>', 'building': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H9v-2a1 1 0 1 0-2 0v2H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm-7 9h2V8H5zm4 0h2V8H9zM5 4v2h2V4zm4 2h2V4H9z"/></svg>', 'building-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4 2h8v12H9v-1a1 1 0 1 0-2 0v1H4zm4 13h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1zM7 4H5v2h2zm2 0h2v2H9zm2 4H9v2h2zM5 8h2v2H5z" clip-rule="evenodd"/></svg>', 'calculator': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm2 1h8v3H4zm2 5H4v2h2zm1 0h2v2H7zm5 0h-2v5h2zm-8 3h2v2H4zm5 0H7v2h2z" clip-rule="evenodd"/></svg>', 'calculator-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 3h8v3H4zm2 5H4v2h2zm3 0H7v2h2zm3 0h-2v5h2zm-6 3H4v2h2zm3 0H7v2h2z"/><path fill="currentColor" fill-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm1 0h10v12H3z" clip-rule="evenodd"/></svg>', 'calendar': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 1h1v1h4V1h1v1h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h2zm8 5H3v7h10z" clip-rule="evenodd"/></svg>', 'calendar-euro': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 2.5h1c.6 0 1 .4 1 1v10c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1v-10c0-.6.4-1 1-1h1v-1h1v1h6v-1h1zm-9 3v8h10v-8zm7.5 6.24-.71-.71c-.35.3-.8.49-1.29.49-.74 0-1.4-.41-1.74-1.02h1.77v-.75H6.51c-.01-.07-.01-.15-.01-.23 0-.09.01-.18.02-.27h2.01V8.5H6.78c.35-.59.99-.98 1.72-.98.49 0 .94.19 1.29.49l.71-.71a2.974 2.974 0 0 0-4.81 1.2H4.5v.75h1.02c-.02.09-.02.18-.02.27 0 .08 0 .16.02.23H4.5v.75h1.17c.4 1.17 1.52 2.02 2.83 2.02.77 0 1.47-.3 2-.78" clip-rule="evenodd"/></svg>', 'calendar-euro-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m9.79 11.02.71.71a2.976 2.976 0 0 1-4.83-1.24H4.5v-.75h1.01c-.01-.08-.01-.15-.01-.23 0-.09 0-.18.02-.27H4.5v-.75h1.19a2.974 2.974 0 0 1 4.81-1.2L9.79 8c-.35-.3-.8-.49-1.29-.49-.73 0-1.37.39-1.72.98h1.75v.75H6.52c-.01.09-.02.18-.02.27 0 .08 0 .16.01.23h2.02v.75H6.76c.34.61 1 1.02 1.74 1.02.49 0 .94-.19 1.29-.49M13 3.5v1H3v-1zm-1-2h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10c0-.55-.45-1-1-1h-1zm-9 12v-8h10v8z"/></svg>', 'calendar-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13 2h-2V1h-1v1H6V1H5v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1m0 11H3V6h10zm0-8H3V3h2v1h1V3h4v1h1V3h2z"/></svg>', 'check': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.77 12.113 15 3.883l-.707-.707-8.23 8.23-4.355-4.355L1 7.76l4.355 4.355-.004.004.707.706.004-.004.003.004.708-.707z"/></svg>', 'check-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1m-1 9.795-2.5-2.5.795-.795L7 9.205 10.705 5.5l.798.793z"/></svg>', 'check-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m4.5 8.207 2.5 2.5 4.5-4.5-.707-.707L7 9.293 5.207 7.5z"/><path fill="currentColor" fill-rule="evenodd" d="M4.111 2.18a7 7 0 1 1 7.778 11.64A7 7 0 0 1 4.111 2.18m.556 10.809a6 6 0 1 0 6.666-9.978 6 6 0 0 0-6.666 9.978" clip-rule="evenodd"/></svg>', 'chevron-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8 11.708 6-6L13.293 5 8 10.293 2.708 5 2 5.708z"/></svg>', 'chevron-down-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14M3.706 6 8 10.294 12.294 6l.706.706-5 5-5-5z" clip-rule="evenodd"/></svg>', 'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m4 8 6 6 .708-.708L5.415 8l5.293-5.292L10 2z"/></svg>', 'chevron-left-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m9-4.294L5.706 8 10 12.294 9.294 13l-5-5 5-5z" clip-rule="evenodd"/></svg>', 'chevron-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m11.708 8-6-6L5 2.708 10.293 8 5 13.293l.708.707z"/></svg>', 'chevron-right-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 0 1 8a7 7 0 0 0 14 0m-9 4.294L10.294 8 6 3.706 6.706 3l5 5-5 5z" clip-rule="evenodd"/></svg>', 'chevron-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8 4.5-6 6 .708.707L8 5.916l5.293 5.293L14 10.5z"/></svg>', 'chevron-up-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1m4.294 9L8 5.706 3.706 10 3 9.294l5-5 5 5z" clip-rule="evenodd"/></svg>', 'circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8"/></svg>', 'clock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m-.5-6.795L10.295 11l.705-.705L8.5 7.79V3.5h-1z" clip-rule="evenodd"/></svg>', 'clock-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m10.95 10.04-.71.71L7.5 8.01v-4h1V7.6l2.45 2.45zM8 2C4.69 2 2 4.69 2 8s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6m0-1c3.87 0 7 3.13 7 7s-3.13 7-7 7-7-3.13-7-7 3.13-7 7-7"/></svg>', 'code-square-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m6.32 10.28.73-.73L5.5 8l1.53-1.53-.73-.73-2.27 2.27 2.28 2.28zm3.37 0L11.97 8 9.69 5.72l-.73.73L10.51 8 8.96 9.55zM3.01 14c-.27 0-.5-.1-.7-.3s-.3-.43-.3-.7V3c0-.27.1-.5.3-.7s.43-.3.7-.3h10c.27 0 .5.1.7.3s.3.43.3.7v10c0 .27-.1.5-.3.7s-.43.3-.7.3H3zm0-1h10V3H3v10z"/></svg>', 'cog': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.062 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.416c.345.15.67.34.97.56l1.226-.708a1 1 0 0 1 1.366.366l1 1.732a1 1 0 0 1-.366 1.366l-1.227.709a5 5 0 0 1 0 1.119l1.227.708a1 1 0 0 1 .366 1.366l-1 1.732a1 1 0 0 1-1.366.366l-1.227-.708c-.3.22-.624.41-.969.56V14a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1.416a5 5 0 0 1-.969-.56l-1.227.708a1 1 0 0 1-1.366-.366l-1-1.732a1 1 0 0 1 .366-1.366l1.227-.709a5 5 0 0 1 0-1.118l-1.227-.709A1 1 0 0 1 1.5 5.366l1-1.732a1 1 0 0 1 1.366-.366l1.227.709q.45-.334.97-.561zm2 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4" clip-rule="evenodd"/></svg>', 'cog-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.438 8a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0m2.5-1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M10 3.416V2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v1.416c-.345.15-.67.34-.969.56l-1.227-.708a1 1 0 0 0-1.366.366l-1 1.732a1 1 0 0 0 .366 1.366l1.227.709a5 5 0 0 0 0 1.118l-1.227.709a1 1 0 0 0-.366 1.366l1 1.732a1 1 0 0 0 1.366.366l1.227-.708a5 5 0 0 0 .969.56V14a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1.416c.345-.15.67-.34.969-.56l1.227.708a1 1 0 0 0 1.366-.366l1-1.732a1 1 0 0 0-.366-1.366l-1.227-.709a5 5 0 0 0 0-1.118l1.227-.709a1 1 0 0 0 .366-1.366l-1-1.732a1 1 0 0 0-1.366-.366l-1.227.708c-.3-.22-.624-.41-.97-.56M7 4.07l-.6.262q-.414.182-.775.449l-.527.39-1.794-1.037-1 1.732 1.793 1.035-.072.65a4 4 0 0 0 0 .898l.072.65-1.793 1.035 1 1.732 1.794-1.036.527.39q.361.265.775.448l.6.262V14h2v-2.07l.6-.262q.414-.182.774-.449l.527-.39 1.795 1.037 1-1.732-1.793-1.035.072-.65a4 4 0 0 0 0-.898l-.072-.65 1.793-1.035-1-1.732-1.795 1.036-.527-.39q-.36-.265-.774-.448L9 4.07V2H7z" clip-rule="evenodd"/></svg>', 'comment': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.5 2A5.5 5.5 0 0 0 4 11.743V14l3.5-1h1a5.5 5.5 0 1 0 0-11zM5 6h6v1H5zm3 2H5v1h3z" clip-rule="evenodd"/></svg>', 'comment-exclamation': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8.5 2a5.5 5.5 0 1 1 0 11h-1L4 14v-2.258A5.5 5.5 0 0 1 7.5 2zm-1 8.001V11h1v-.999zm0-1.007h1V4h-1z" clip-rule="evenodd"/></svg>', 'comment-exclamation-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.5 11.008h-1v-1h1zm0-1.991h-1V4h1z"/><path fill="currentColor" fill-rule="evenodd" d="M8.5 2a5.5 5.5 0 1 1 0 11h-1L4 14v-2.258A5.5 5.5 0 0 1 7.5 2zm-1 1a4.5 4.5 0 0 0-2.863 7.97l.363.301v1.403l2.226-.636L7.36 12H8.5a4.5 4.5 0 1 0 0-9z" clip-rule="evenodd"/></svg>', 'comment-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5 6h6v1H5zm0 2h3v1H5z"/><path fill="currentColor" fill-rule="evenodd" d="m4 14 3.5-1h1a5.5 5.5 0 1 0 0-11h-1A5.5 5.5 0 0 0 4 11.743zm1-2.728-.363-.3A4.5 4.5 0 0 1 7.5 3h1a4.5 4.5 0 1 1 0 9H7.36L5 12.674z" clip-rule="evenodd"/></svg>', 'comment-question': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8.5 2a5.5 5.5 0 1 1 0 11h-1L4 14v-2.258A5.5 5.5 0 0 1 7.5 2zm-.996 8.001V11h1v-.999zM8 4a2 2 0 0 0-2 1.997h1a1 1 0 0 1 2 .001 1 1 0 0 1-1 .997v.002h-.496v1.997h1V7.93a2 2 0 0 0 1.485-1.727L10 5.998A2 2 0 0 0 8 4" clip-rule="evenodd"/></svg>', 'comment-question-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8.5 2a5.5 5.5 0 1 1 0 11h-1L4 14v-2.258A5.5 5.5 0 0 1 7.5 2zm-1 1a4.5 4.5 0 0 0-2.863 7.97l.363.301v1.403l2.226-.636L7.36 12H8.5a4.5 4.5 0 1 0 0-9z" clip-rule="evenodd"/><path fill="currentColor" d="M7.504 10.001h1V11h-1zM8 4a2 2 0 0 1 2 1.998l-.01.204A2 2 0 0 1 8.503 7.93v1.065h-1V6.997H8v-.002a1 1 0 0 0 1-.997 1 1 0 0 0-2 0H6A2 2 0 0 1 8 4"/></svg>', 'comment-sms': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.495 2a5.5 5.5 0 1 1 0 11h-1l-3.5 1v-2.257A5.5 5.5 0 0 1 7.495 2zm-3 5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1m2.5 0a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1m2.5 0a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1"/></svg>', 'comment-sms-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.5 2a5.5 5.5 0 1 1 0 11h-1L4 14v-2.257A5.5 5.5 0 0 1 7.5 2zm-1 1a4.5 4.5 0 0 0-2.863 7.972l.363.3v1.402L7.36 12H8.5a4.5 4.5 0 1 0 0-9zm-2 4a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1M8 7a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1m2.5 0a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1"/></svg>', 'conversation': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M1.01 6.51c0-1.93 2.23-3.5 4.99-3.5s4.99 1.57 4.99 3.5-2.23 3.5-4.99 3.5c-.36 0-.71-.03-1.05-.08l-2.26 1.05c-.06.03-.11.03-.17.03-.27 0-.5-.21-.5-.5V8.6c-.62-.58-1.01-1.3-1.01-2.09"/><path fill="currentColor" d="M11.49 6.5c0-.5-.13-.97-.36-1.41h.01c2.22.36 3.88 1.75 3.88 3.41 0 .79-.39 1.5-1.02 2.09v1.91a.5.5 0 0 1-.67.47l-2.26-1.05c-.34.05-.69.08-1.05.08-1.69 0-3.19-.59-4.09-1.5h.12c3.03 0 5.44-1.81 5.44-4"/></svg>', 'conversation-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.95 5.28c.25.08.5.17.73.27a5.4 5.4 0 0 1 .65.35c.11.07.2.13.3.2.48.35.86.78 1.1 1.26a2.3 2.3 0 0 1 .17.45c.03.11.06.22.07.33q.03.18.03.36c0 .79-.39 1.51-1.01 2.09v1.91a.508.508 0 0 1-.68.47l-2.26-1.05c-.34.05-.69.08-1.05.08-.23 0-.47-.01-.69-.04-.18 0-.35-.03-.52-.07-.02 0-.03 0-.05-.01-.16-.02-.31-.06-.46-.1-.42-.1-.82-.25-1.18-.43l-.42-.24c-.06-.04-.12-.08-.18-.13.58-.03 1.13-.12 1.64-.27.56.19 1.19.29 1.86.29.29 0 .6-.02.91-.07l.29-.04.28.12 1.5.7v-1.12l.01-.43.31-.3c.32-.29.7-.77.7-1.36 0-.91-.82-1.72-2.01-2.15-.01-.39-.09-.77-.23-1.13.06.02.12.04.19.06"/><path fill="currentColor" fill-rule="evenodd" d="M5.985 3.01c2.758.002 4.995 1.571 4.995 3.5s-2.24 3.5-5 3.5c-.36 0-.71-.03-1.05-.08l-2.26 1.05c-.06.03-.11.03-.17.03-.26 0-.5-.21-.5-.5V8.6C1.38 8.02.99 7.3.99 6.51c0-1.929 2.237-3.498 4.995-3.5m.005 1c-2.17 0-4 1.14-4 2.5 0 .59.38 1.06.7 1.36l.32.3v1.55l1.51-.7.27-.13.3.04c.31.05.62.07.91.07 2.17 0 4-1.14 4-2.5 0-1.275-1.609-2.357-3.598-2.487z" clip-rule="evenodd"/></svg>', 'copy': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 2h6V1H4a1 1 0 0 0-1 1v9h1z"/><path fill="currentColor" d="M5 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z"/></svg>', 'copy-file': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 2h6V1H4a1 1 0 0 0-1 1v9h1z"/><path fill="currentColor" d="M6 3h3v4h4v7a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1"/><path fill="currentColor" d="m13 6-3-3v3z"/></svg>', 'copy-file-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m10 3 3 3v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm0 1.414V6h1.586zM12 7H9V4H6v10h6z" clip-rule="evenodd"/><path fill="currentColor" d="M4 2h6V1H4a1 1 0 0 0-1 1v9h1z"/></svg>', 'copy-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10 2H4v9H3V2a1 1 0 0 1 1-1h6z"/><path fill="currentColor" fill-rule="evenodd" d="M5 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1zm1 0h6v10H6z" clip-rule="evenodd"/></svg>', 'credit-card': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3 9h3v2H3z"/><path fill="currentColor" fill-rule="evenodd" d="M2 13a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm0-9h12v1H2zm12 3v5H2V7z" clip-rule="evenodd"/></svg>', 'cross': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 2.707 2.707 2l11.29 11.289-.708.707z"/><path fill="currentColor" d="M2.707 14 2 13.293 13.293 2l.707.708z"/></svg>', 'cross-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7m2.7 10.5L8 8.8l-2.7 2.7-.8-.8L7.2 8 4.5 5.3l.8-.8L8 7.2l2.7-2.7.8.8L8.8 8l2.7 2.7z"/></svg>', 'cross-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8 8.8 2.7 2.7.8-.8L8.8 8l2.7-2.7-.8-.8L8 7.2 5.3 4.5l-.8.8L7.2 8l-2.7 2.7.8.8z"/><path fill="currentColor" fill-rule="evenodd" d="M1 8c0-3.9 3.1-7 7-7s7 3.1 7 7-3.1 7-7 7-7-3.1-7-7m1 0c0 3.3 2.7 6 6 6s6-2.7 6-6-2.7-6-6-6-6 2.7-6 6" clip-rule="evenodd"/></svg>', 'dashboard': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 2h6v7H2zm0 8h6v4H2zm7-8h5v4H9zm0 5h5v7H9z"/></svg>', 'dashboard-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 2H2v7h6zM7 3H3v5h4zm1 7H2v4h6zm-1 1H3v2h4zm2-9v4h5V2zm4 1h-3v2h3zm1 4H9v7h5zm-1 1h-3v5h3z" clip-rule="evenodd"/></svg>', 'download': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.295 6.295 13 7l-5 5-5-5 .705-.705 3.795 3.79V1h1v9.085zM13 14v-2h1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2h1v2z" clip-rule="evenodd"/></svg>', 'earth': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m-1.224-2.553-.63 1.261A6.003 6.003 0 0 1 4.501 3.126l1.6.4a1 1 0 0 1 .742 1.14L6.41 7.19a1 1 0 0 1-.986.83H4.47a1 1 0 0 0-.77.362l-.185.223A1 1 0 0 0 3.5 9.862l.273.348a1 1 0 0 0 .59.362l1.658.332a1 1 0 0 1 .699.533l.057.116a1 1 0 0 1 0 .894m3.543-9.983V4.53a1 1 0 0 0 1 1h1.234a1 1 0 0 0 .664-.252l.09-.08a6.02 6.02 0 0 0-2.988-2.733m3.612 4.622-.012-.075h-3.05a1 1 0 0 0-.884.535l-.773 1.469a1 1 0 0 0-.115.465v.964a1 1 0 0 0 .408.806l.353.259a1 1 0 0 1 .408.806v1.242a6 6 0 0 0 3.665-6.47" clip-rule="evenodd"/></svg>', 'earth-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m0-1a6 6 0 0 0 1.766-.264v-1.421a.5.5 0 0 0-.204-.403l-.353-.26a1.5 1.5 0 0 1-.612-1.208V9.48c0-.243.06-.483.173-.698l.772-1.469a1.5 1.5 0 0 1 1.328-.802h2.944a6 6 0 0 0-.284-.844 1.5 1.5 0 0 1-.977.362h-1.235a1.5 1.5 0 0 1-1.5-1.5V2.28A6 6 0 0 0 8 2a6 6 0 0 0-2.918.756l1.14.286A1.5 1.5 0 0 1 7.336 4.75l-.433 2.525a1.5 1.5 0 0 1-1.479 1.247H4.47a.5.5 0 0 0-.385.18l-.185.223a.5.5 0 0 0-.008.628l.273.348a.5.5 0 0 0 .295.181l1.658.332a1.5 1.5 0 0 1 1.048.8l.058.115a1.5 1.5 0 0 1 0 1.342l-.587 1.174A6 6 0 0 0 8 14m6-6q0-.247-.02-.489h-3.11a.5.5 0 0 0-.443.268l-.772 1.468a.5.5 0 0 0-.058.233v.964a.5.5 0 0 0 .204.403l.353.259a1.5 1.5 0 0 1 .612 1.209v1.01A6 6 0 0 0 14 8m-8.402 5.5h.093l.638-1.276a.5.5 0 0 0 0-.448l-.057-.115a.5.5 0 0 0-.35-.267l-1.658-.331a1.5 1.5 0 0 1-.885-.545l-.273-.347a1.5 1.5 0 0 1 .025-1.884l.184-.223a1.5 1.5 0 0 1 1.155-.542h.954a.5.5 0 0 0 .493-.416l.433-2.525a.5.5 0 0 0-.37-.57l-1.95-.487-.046.018A6.002 6.002 0 0 0 5.598 13.5m7.287-8.597.164-.146a6 6 0 0 0-1.458-1.564 6 6 0 0 0-.772-.457V4.53a.5.5 0 0 0 .5.5h1.234a.5.5 0 0 0 .332-.126" clip-rule="evenodd"/></svg>', 'ellipsis': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0m4 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0m4 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0"/></svg>', 'ellipsis-vertical': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/></svg>', 'euro': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 6.489h7v1H2zm0 2.513h7v1H2z"/><path fill="currentColor" d="M9.246 2.008c1.466.078 2.786.738 3.756 1.764l-.71.707C11.433 3.561 10.244 3 8.953 3 6.404 3 4.247 5.188 4.247 8s2.157 5 4.707 5c1.29 0 2.48-.562 3.34-1.48l.71.707C11.969 13.323 10.536 14 8.953 14l-.294-.008C5.642 13.832 3.243 11.21 3.243 8c0-3.314 2.557-6 5.71-6z"/></svg>', 'euro-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill="currentColor" d="M8 .67C3.95.67.67 3.95.67 8S3.95 15.33 8 15.33s7.33-3.28 7.33-7.33S12.05.67 8 .67m2.27 11.4c-.38.09-.76.14-1.15.14a4.04 4.04 0 0 1-3.99-2.92h-.58c-.12 0-.23-.09-.23-.22v-.54c0-.12.11-.22.23-.22h.41a5 5 0 0 1 0-.8h-.41c-.12 0-.23-.09-.23-.22v-.58c0-.12.1-.22.23-.22h.63c.6-1.65 2.18-2.74 3.94-2.71.34 0 .68.03 1.02.1.12.03.19.16.16.28l-.23.84c-.03.12-.15.19-.27.17-.24-.05-.48-.08-.73-.08A2.42 2.42 0 0 0 6.81 6.5h2.71c.12.03.2.15.17.27l-.13.58c-.02.1-.11.18-.22.18H6.52c-.03.27-.03.53 0 .8h2.63c.12.03.2.15.17.27l-.11.52c-.03.1-.12.17-.22.18H6.8c.36.96 1.28 1.6 2.31 1.61.3 0 .59-.04.88-.1.12-.02.24.06.27.18l.17.84c.02.12-.05.24-.17.27v-.03z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h16v16H0z"/></clipPath></defs></svg>', 'exclamation-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8m7.75-4v5h-1.5V4zm0 8v-1.5h-1.5V12z" clip-rule="evenodd"/></svg>', 'exclamation-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.75 4v5h-1.5V4zm0 8v-1.5h-1.5V12z"/><path fill="currentColor" fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1M2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8" clip-rule="evenodd"/></svg>', 'exclamation-stamp': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m15 8-1.55-1.86.22-2.46-2.3-.55L10.17 1 8 1.98 5.84 1 4.63 3.13l-2.29.54.22 2.46L1.01 8l1.55 1.86-.22 2.47 2.3.55 1.2 2.13L8 14.03l2.17.98 1.2-2.13 2.3-.55-.22-2.46L15 8.01zm-6.36 3.35H7.36v-1.34h1.28zm0-2.67H7.36V4.67h1.28z"/></svg>', 'exclamation-triangle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m8 2 7 12H1zm-.75 4.5h1.5V10h-1.5zm1.5 6V11h-1.5v1.5z" clip-rule="evenodd"/></svg>', 'exclamation-triangle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.75 6.5V10h-1.5V6.5zm0 6V11h-1.5v1.5z"/><path fill="currentColor" fill-rule="evenodd" d="M8 2 1 14h14zm0 1.985L2.741 13h10.518z" clip-rule="evenodd"/></svg>', 'eye': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/><path fill="currentColor" fill-rule="evenodd" d="M15 8s-3.134 5-7 5-7-5-7-5 3.134-5 7-5 7 5 7 5m-7 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6" clip-rule="evenodd"/></svg>', 'eye-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6m0-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M1 8s3.134 5 7 5 7-5 7-5-3.134-5-7-5-7 5-7 5m1.215 0 .133.178a15 15 0 0 0 1.405 1.61C4.974 10.994 6.478 12 8 12s3.026-1.006 4.247-2.212A15 15 0 0 0 13.785 8l-.133-.178a15 15 0 0 0-1.405-1.61C11.026 5.006 9.522 4 8 4S4.974 5.006 3.753 6.212A15 15 0 0 0 2.215 8" clip-rule="evenodd"/></svg>', 'eye-slash': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1 1.7.7-.7L15 14.302l-.7.7-3.084-3.085c-.963.63-2.057 1.08-3.216 1.08-3.866 0-7-5-7-5S2.174 6.124 3.97 4.67zm4.556 4.557A3 3 0 0 0 9.74 10.44l-.722-.722a2 2 0 0 1-2.74-2.74z" clip-rule="evenodd"/><path fill="currentColor" d="m5.67 3.572 1.532 1.532a3.003 3.003 0 0 1 3.69 3.691l1.877 1.877C14.142 9.366 15 7.997 15 7.997s-3.134-5-7-5c-.817 0-1.6.223-2.33.575"/><path fill="currentColor" d="M9.998 7.9 8.097 6a2 2 0 0 1 1.9 1.901"/></svg>', 'eye-slash-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1 1.7.7-.7L15 14.302l-.7.7-3.084-3.085c-.963.63-2.057 1.08-3.216 1.08-3.866 0-7-5-7-5S2.174 6.124 3.97 4.67zm3.682 3.683c-.324.256-.635.535-.93.826a15 15 0 0 0-1.537 1.788l.133.178c.334.442.815 1.028 1.405 1.61C4.974 10.99 6.478 11.997 8 11.997c.852 0 1.698-.315 2.492-.804l-.752-.752a3 3 0 0 1-4.184-4.184zm1.596 1.596a2 2 0 0 0 2.74 2.74z" clip-rule="evenodd"/><path fill="currentColor" d="m5.67 3.572.757.757A4.2 4.2 0 0 1 8 3.997c1.522 0 3.026 1.006 4.247 2.212a15 15 0 0 1 1.538 1.788q-.061.085-.133.178a15 15 0 0 1-1.531 1.733l-.06.057.708.707C14.142 9.366 15 7.997 15 7.997s-3.134-5-7-5c-.817 0-1.6.223-2.33.575"/><path fill="currentColor" d="m8.097 6-.895-.896a3.003 3.003 0 0 1 3.69 3.691L9.999 7.9A2 2 0 0 0 8.097 6"/></svg>', 'fax': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13 14H6V2h7v3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1M7 3h5v2H7zm0 4h5v1H7zm1 2H7v1h1zm-1 2h1v1H7zm3-2H9v1h1zm-1 2h1v1H9zm3-2h-1v1h1zm-1 2h1v1h-1z" clip-rule="evenodd"/><path fill="currentColor" d="M2 5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/></svg>', 'fax-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 3H7v2h5zM6 3v2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1V2H6zm6 3h1v7H6V6zM3 5h2v8H3zm9 2H7v1h5zM7 9h1v1H7zm1 2H7v1h1zm1-2h1v1H9zm1 2H9v1h1zm1-2h1v1h-1zm1 2h-1v1h1z" clip-rule="evenodd"/></svg>', 'file': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zm1-1V1l3 3z" clip-rule="evenodd"/></svg>', 'file-cog': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 8.704c.709 0 1.286.577 1.286 1.286S8.709 11.276 8 11.276A1.29 1.29 0 0 1 6.714 9.99c0-.709.577-1.286 1.286-1.286"/><path fill="currentColor" fill-rule="evenodd" d="M9 4.99h4v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-12a1 1 0 0 1 1-1h5zm-1.429 2v.9a2.1 2.1 0 0 0-.75.314l-.64-.638-.605.606.638.638a2.1 2.1 0 0 0-.314.751H5v.858h.9c.056.273.165.526.314.75l-.638.64.606.605.638-.638c.225.149.478.258.751.314v.9h.858v-.9a2.1 2.1 0 0 0 .75-.314l.64.638.605-.606-.638-.638c.149-.225.258-.478.314-.751h.9V9.56h-.9a2.1 2.1 0 0 0-.314-.75l.638-.64-.606-.605-.638.638a2.1 2.1 0 0 0-.751-.314v-.9z" clip-rule="evenodd"/><path fill="currentColor" d="M13 3.99h-3v-3z"/></svg>', 'file-cog-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m10 .99 3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-12a1 1 0 0 1 1-1zm0 1.415V3.99h1.584zm2 2.585H9v-3H4v12h8z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M10.1 9.561h.9v.858h-.9a2.1 2.1 0 0 1-.314.75l.638.64-.606.605-.638-.638a2.1 2.1 0 0 1-.752.313v.901h-.857v-.9a2.1 2.1 0 0 1-.75-.314l-.64.638-.605-.606.638-.638a2.1 2.1 0 0 1-.314-.751H5V9.56h.9c.056-.273.165-.526.314-.75l-.638-.64.606-.605.638.638a2.1 2.1 0 0 1 .751-.314v-.9h.857v.9c.274.056.527.165.752.314l.638-.638.606.606-.638.638c.149.225.258.478.313.751m-3.386.429a1.287 1.287 0 0 0 2.571 0 1.287 1.287 0 0 0-2.571 0" clip-rule="evenodd"/></svg>', 'file-download': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13 14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5v4h4zM9.793 9.793 8.5 11.086V7h-1v4.086L6.207 9.793 5.5 10.5 8 13l2.5-2.5z" clip-rule="evenodd"/><path fill="currentColor" d="M10 4V1l3 3z"/></svg>', 'file-download-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m10.5 10.5-.707-.707L8.5 11.086V7h-1v4.086L6.207 9.793 5.5 10.5 8 13z"/><path fill="currentColor" fill-rule="evenodd" d="m10 1 3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 1.415V4h1.585zM12 5H9V2H4v12h8z" clip-rule="evenodd"/></svg>', 'file-excel': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zm-.018 7h1.335L8.776 9.48l1.5-2.48H9.02l-.795 1.485a5 5 0 0 0-.157.436h-.014a2.6 2.6 0 0 0-.15-.422L7.19 7H5.82l1.457 2.5L5.683 12h1.342l.865-1.614q.09-.234.115-.349h.014q.053.244.101.335z" clip-rule="evenodd"/><path fill="currentColor" d="M10 4V1l3 3z"/></svg>', 'file-excel-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.982 12h1.335L8.776 9.48l1.5-2.48H9.02l-.795 1.485a5 5 0 0 0-.157.436h-.014a2.6 2.6 0 0 0-.15-.422L7.19 7H5.82l1.457 2.5L5.683 12h1.342l.865-1.614q.09-.234.115-.349h.014q.053.244.101.335z"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4l-3-3zm6 3V2.537L11.254 4zm2 1v9H4V2h5v3z" clip-rule="evenodd"/></svg>', 'file-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m10 1 3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 1.415V4h1.585zM12 5H9V2H4v12h8z" clip-rule="evenodd"/></svg>', 'file-pdf': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.464 11.274a4 4 0 0 0-.393.207c-.223.137-.37.27-.444.387-.072.11-.073.19-.03.273l.019.034.027-.01c.103-.042.268-.177.48-.433q.18-.22.34-.458m1.243-1.007q.378-.09.764-.146a9 9 0 0 1-.386-.65 16 16 0 0 1-.378.796m1.873.363a3 3 0 0 0 .341.314c.164.123.28.165.344.168a.1.1 0 0 0 .053-.012.23.23 0 0 0 .07-.094.3.3 0 0 0 .045-.152.07.07 0 0 0-.02-.047c-.039-.047-.15-.116-.391-.159a3 3 0 0 0-.463-.04zM8.051 7.952q.096-.308.151-.626.035-.213.029-.352a.5.5 0 0 0-.024-.15.4.4 0 0 0-.11.03c-.066.027-.12.08-.148.215l-.01.057q-.029.213.044.565.027.126.068.26"/><path fill="currentColor" fill-rule="evenodd" d="M9 1v4h4v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM5.42 12.713a.6.6 0 0 1-.332-.318c-.147-.294-.098-.588.06-.834.15-.233.4-.43.68-.596a6 6 0 0 1 1.122-.489q.454-.817.804-1.686a5.6 5.6 0 0 1-.326-.98c-.065-.303-.09-.603-.034-.86.056-.268.207-.509.492-.623l.055-.02a.75.75 0 0 1 .4-.038.53.53 0 0 1 .362.276c.066.124.09.27.096.407.005.142-.01.3-.036.465-.063.386-.204.859-.394 1.358q.316.672.742 1.277a4.5 4.5 0 0 1 1.01.038c.276.049.556.147.727.352a.64.64 0 0 1 .151.392.9.9 0 0 1-.104.426.8.8 0 0 1-.312.341.65.65 0 0 1-.342.078c-.25-.01-.495-.148-.706-.315l-.095-.081a4.3 4.3 0 0 1-.595-.638 9 9 0 0 0-1.512.307 8.6 8.6 0 0 1-.773 1.143c-.22.265-.46.496-.701.596a.6.6 0 0 1-.44.022" clip-rule="evenodd"/><path fill="currentColor" d="M10 1v3h3z"/></svg>', 'file-pdf-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.42 12.713a.6.6 0 0 1-.332-.318c-.147-.294-.098-.588.06-.834.15-.233.4-.43.68-.596a6 6 0 0 1 1.122-.489q.454-.817.804-1.686a5.5 5.5 0 0 1-.326-.98c-.065-.303-.09-.603-.034-.86.056-.268.207-.509.492-.623.145-.058.303-.09.455-.058a.53.53 0 0 1 .362.276c.066.124.09.27.096.407.005.142-.01.3-.036.465-.063.386-.204.859-.394 1.358q.316.672.742 1.277a4.4 4.4 0 0 1 1.01.038c.276.049.556.147.727.352a.64.64 0 0 1 .151.392.9.9 0 0 1-.104.426.8.8 0 0 1-.268.315.65.65 0 0 1-.386.104c-.25-.01-.495-.148-.706-.315a4.3 4.3 0 0 1-.69-.72 9 9 0 0 0-1.512.308 8.6 8.6 0 0 1-.773 1.143c-.22.265-.46.496-.701.596a.6.6 0 0 1-.44.022m1.044-1.44a4 4 0 0 0-.348.18c-.248.148-.41.29-.49.415-.07.11-.072.19-.03.273l.02.034.027-.01c.103-.042.268-.177.48-.433q.18-.22.34-.458m1.242-1.006q.378-.09.764-.146a9 9 0 0 1-.386-.65 16 16 0 0 1-.378.796m2.18.65a3 3 0 0 1-.328-.309q.233.002.463.04c.24.043.352.112.392.159q.019.02.02.047a.3.3 0 0 1-.045.152.23.23 0 0 1-.071.094.1.1 0 0 1-.053.012c-.07-.003-.196-.05-.377-.194m-1.684-3.59q-.056.316-.15.625a3 3 0 0 1-.069-.26c-.057-.268-.065-.478-.034-.623.028-.134.082-.188.148-.214a.4.4 0 0 1 .11-.03.5.5 0 0 1 .024.15q.006.138-.029.351" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 1 1-1h6l3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm7 .537V4h1.254zM12 14V5H9V2H4v12z" clip-rule="evenodd"/></svg>', 'file-text': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zm2 2H5v1h6zM5 9h6v1H5zm6 2H5v1h6z" clip-rule="evenodd"/><path fill="currentColor" d="M10 4V1l3 3z"/></svg>', 'file-text-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11 7H5v1h6zM5 9h6v1H5zm6 2H5v1h6z"/><path fill="currentColor" fill-rule="evenodd" d="m13 4-3-3H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1zm-3 0V2.415L11.585 4zM9 5h3v9H4V2h5z" clip-rule="evenodd"/></svg>', 'file-upload': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5h4v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5zM5.5 9.5l.707.707L7.5 8.914V13h1V8.914l1.293 1.293.707-.707L8 7z" clip-rule="evenodd"/><path fill="currentColor" d="M13 4h-3V1z"/></svg>', 'file-upload-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9.793 10.207 8.5 8.914V13h-1V8.914l-1.293 1.293L5.5 9.5 8 7l2.5 2.5z"/><path fill="currentColor" fill-rule="evenodd" d="M13 4v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM4 14h8V5H9V2H4zm6-10h1.585L10 2.415z" clip-rule="evenodd"/></svg>', 'file-word': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5zM5 7l1.091 5h1.002L8 8.262 8.91 12h.98L11 7h-.93l-.701 3.492L8.568 7H7.47l-.836 3.435L5.944 7z" clip-rule="evenodd"/><path fill="currentColor" d="M10 4V1l3 3z"/></svg>', 'file-word-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m5 7 1.091 5h1.002L8 8.262 8.91 12h.98L11 7h-.93l-.701 3.492L8.568 7H7.47l-.836 3.435L5.944 7z"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4l-3-3zm6 3V2.537L11.254 4zm2 1v9H4V2h5v3z" clip-rule="evenodd"/></svg>', 'filter': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 0-1 1v1.586a1 1 0 0 0 .293.707L6 9v2.5a1 1 0 0 0 .4.8l2 1.5A1 1 0 0 0 10 13V9l3.707-3.707A1 1 0 0 0 14 4.586V3a1 1 0 0 0-1-1z" clip-rule="evenodd"/></svg>', 'filter-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 3h10v1.586l-4 4V13l-2-1.5V8.586l-4-4zm3 7V9L2.293 5.293A1 1 0 0 1 2 4.586V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1.586a1 1 0 0 1-.293.707L10 9v4a1 1 0 0 1-1.6.8l-2-1.5a1 1 0 0 1-.4-.8z" clip-rule="evenodd"/></svg>', 'floppy-disk': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 3a1 1 0 0 1 1-1h7.586a1 1 0 0 1 .707.293l2.414 2.414a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm2 0h6v3H4zm4 5a2 2 0 1 0 0 4 2 2 0 0 0 0-4" clip-rule="evenodd"/></svg>', 'floppy-disk-checked': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 3a1 1 0 0 1 1-1h7.586a1 1 0 0 1 .707.293l2.414 2.414a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm2 0h6v3H4zm6.828 5-3.535 3.535-2.12-2.12.706-.708 1.415 1.414 2.828-2.828z" clip-rule="evenodd"/></svg>', 'floppy-disk-checked-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11.293 2.293A1 1 0 0 0 10.586 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5.414a1 1 0 0 0-.293-.707zM3 13V3h1v3h6V3h.586L13 5.414V13zM9 3H5v2h4zm1.828 5.12L8 10.948v.001l-.707.707-.707-.706-1.414-1.415.707-.707 1.415 1.414 2.828-2.828z" clip-rule="evenodd"/></svg>', 'floppy-disk-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6 10a2 2 0 1 1 4 0 2 2 0 0 1-4 0m2 1a1 1 0 1 1 0-2 1 1 0 0 1 0 2" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M10.586 2a1 1 0 0 1 .707.293l2.414 2.414a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zM3 3v10h10V5.414L10.586 3H10v3H4V3zm2 0h4v2H5z" clip-rule="evenodd"/></svg>', 'folder': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 4h7c.55 0 1 .45 1 1v7c0 .55-.45 1-1 1H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h4z"/></svg>', 'folder-check': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14 4H7L6 3H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1M5.705 8.185 7 9.48l3.295-3.295.705.705-4 4-2-2z" clip-rule="evenodd"/></svg>', 'folder-check-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.705 8.185 7 9.48l3.295-3.295.705.705-4 4-2-2z"/><path fill="currentColor" fill-rule="evenodd" d="m6 3 1 1.001h7c.55 0 1 .45 1 1.001v6.997c0 .55-.45 1.001-1 1.001H2c-.55 0-1-.45-1-1.001V4.001C1 3.451 1.45 3 2 3zm-.41 1.001H2v8.008h12V5.002H6.59z" clip-rule="evenodd"/></svg>', 'folder-lines': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4H7L6 3H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1m-5 6H4V9h5zm3-2H4V7h8z"/></svg>', 'folder-lines-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12 8.005H4V7.004h8zM9 9.006H4v1.001h5zM5.59 4.001H2v8.008h12V5.002H6.59l-.29-.29zM6 3l1 1.001h7c.55 0 1 .45 1 1.001v6.997c0 .55-.45 1.001-1 1.001H2c-.55 0-1-.45-1-1.001V4.001C1 3.451 1.45 3 2 3z"/></svg>', 'folder-link': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 4h7c.55 0 1 .45 1 1v4.052A3.5 3.5 0 0 0 12.498 8H9.502a3.502 3.502 0 0 0-3.166 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h4z"/><path fill="currentColor" d="M10.5 10h-1a1.5 1.5 0 0 0 0 3h1v1h-1a2.5 2.5 0 0 1 0-5h1zm2-1a2.5 2.5 0 0 1 0 5h-1v-1h1a1.5 1.5 0 0 0 0-3h-1V9z"/><path fill="currentColor" d="M10 11h2v1h-2z"/></svg>', 'folder-link-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 4.001h7c.55 0 1 .45 1 1v4.05a3.5 3.5 0 0 0-1-.713V5.002H6.59L5.59 4H2v8.008h4.037c.05.35.153.683.299.991H2c-.55 0-1-.45-1-1.001V4.001C1 3.451 1.45 3 2 3h4z"/><path fill="currentColor" d="M10.5 10h-1a1.5 1.5 0 0 0 0 3h1v1h-1a2.5 2.5 0 0 1 0-5h1zm2-1a2.5 2.5 0 0 1 0 5h-1v-1h1a1.5 1.5 0 0 0 0-3h-1V9z"/><path fill="currentColor" d="M10 11h2v1h-2z"/></svg>', 'folder-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7 4.001 6 3H2c-.55 0-1 .45-1 1.001v7.998C1 12.549 1.45 13 2 13h12c.55 0 1-.45 1-1.001V5.002c0-.55-.45-1.001-1-1.001zm-5 0h3.59l1 1.001H14v7.007H2z" clip-rule="evenodd"/></svg>', 'folder-star': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7 4h7c.55 0 1 .45 1 1v7c0 .55-.45 1-1 1H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h4zm2.728 3.646L8 7.91l1.25 1.281L8.955 11l1.545-.854 1.545.854-.295-1.809L13 7.911l-1.727-.265L10.5 6z" clip-rule="evenodd"/></svg>', 'folder-star-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.273 7.646 13 7.91l-1.25 1.281.295 1.809-1.545-.854L8.955 11l.295-1.809L8 7.911l1.728-.265L10.5 6z"/><path fill="currentColor" fill-rule="evenodd" d="M7 4h7c.55 0 1 .45 1 1v7c0 .55-.45 1-1 1H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h4zm-5 8h12V5H6.586l-1-1H2z" clip-rule="evenodd"/></svg>', 'folders': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 3h4c.55 0 1 .45 1 1v5c0 .55-.45 1-1 1h-1V8a2 2 0 0 0-2-2H6.414l-1-1H5V3c0-.55.45-1 1-1h2z"/><path fill="currentColor" d="M10 7a1 1 0 0 1 1 1v5c0 .55-.45 1-1 1H3c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h2l1 1z"/></svg>', 'folders-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 3 8 2H6c-.55 0-1 .45-1 1v2h1V3h1.59l1 1H13v5.01h-1V10h1c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1z"/><path fill="currentColor" fill-rule="evenodd" d="m5 6 1 1h4c.55 0 1 .45 1 1v5c0 .55-.45 1-1 1H3c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1zm-.41 1H3v6.01h7V8H5.59z" clip-rule="evenodd"/></svg>', 'gavel': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.908 5.012a.59.59 0 0 0 .59 1.02l.138-.08.59 1.02-5.892 3.402a.59.59 0 0 0 .589 1.02l5.892-3.4.589 1.02-.14.08a.59.59 0 0 0 .59 1.02l3.31-1.91a.59.59 0 0 0-.59-1.02l-.139.08-1.768-3.062.14-.08a.59.59 0 0 0-.59-1.021zm3.631 7.01a.5.5 0 1 0 0 1h5a.5.5 0 0 0 0-1z"/></svg>', 'gavel-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.869 4.99a.59.59 0 0 0 .59 1.02l.138-.08.59 1.02-5.892 3.402a.59.59 0 1 0 .589 1.02l5.892-3.4.59 1.02-.14.08a.59.59 0 0 0 .589 1.02l3.31-1.91a.59.59 0 0 0-.59-1.02l-.139.08L9.628 4.18l.14-.08a.59.59 0 0 0-.59-1.021zm1.594.44 1.3-.75 1.767 3.062-1.299.75z" clip-rule="evenodd"/><path fill="currentColor" d="M9.5 12a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1z"/></svg>', 'glitters': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.675 2.868A4 4 0 0 0 9.02 5.251L11 6l-1.889.663a4 4 0 0 0-2.448 2.448L6 11l-.749-1.979a4 4 0 0 0-2.383-2.346L1 6l1.799-.553A4 4 0 0 0 5.447 2.8L6 1zm5.479 5.561a4 4 0 0 0 2.347 2.383L15 11l-.408.144a4 4 0 0 0-2.448 2.448L12 14l-.188-.499a4 4 0 0 0-2.383-2.347L9 11l.269-.083a4 4 0 0 0 2.648-2.648L12 8zM4.5 12a2.5 2.5 0 0 0 1.464 1.486L6 13.5A2.45 2.45 0 0 0 4.5 15l-.013-.036A2.5 2.5 0 0 0 3 13.5 2.27 2.27 0 0 0 4.5 12"/></svg>', 'glitters-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4.5 12a2.5 2.5 0 0 0 1.464 1.486L6 13.5A2.45 2.45 0 0 0 4.5 15l-.014-.036A2.5 2.5 0 0 0 3 13.5 2.27 2.27 0 0 0 4.5 12"/><path fill="currentColor" fill-rule="evenodd" d="M12.166 8.459a3.93 3.93 0 0 0 2.305 2.34L15 11l-.44.154a3.93 3.93 0 0 0-2.406 2.406L12 14l-.2-.53a3.93 3.93 0 0 0-2.341-2.304L9 11l.305-.094a3.93 3.93 0 0 0 2.601-2.601L12 8zm-.15 1.748q-.358.451-.809.809.438.352.785.793.36-.457.817-.817a5 5 0 0 1-.793-.785M6.674 2.868A4 4 0 0 0 9.02 5.251L11 6l-1.889.664a4 4 0 0 0-2.447 2.447L6 11l-.748-1.979a4 4 0 0 0-2.384-2.346L1 6l1.798-.553A4 4 0 0 0 5.448 2.8L6 1zM6.06 3.927A5 5 0 0 1 3.927 6.06a5 5 0 0 1 2.047 2.126 5 5 0 0 1 2.213-2.212A5 5 0 0 1 6.06 3.927" clip-rule="evenodd"/></svg>', 'graduation-cap': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m1 6 7-3 7 3v5h-1V6.429L8 9z"/><path fill="currentColor" d="M3 7.945V11l5 2 5-2V7.945l-5 2.143z"/></svg>', 'graduation-cap-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m1 6 2 .857V11l5 2 5-2V6.857l1-.428V11h1V6L8 3zm3 4.323V7.286L8 9l4-1.714v3.037l-4 1.6zM3.539 6 8 7.912 12.461 6 8 4.088z" clip-rule="evenodd"/></svg>', 'hand-euro': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.91 7.11c-.581.55-1.362.89-2.213.89h-.01c-1.357 0-2.527-.86-3.043-2.09H8v-1h1.385a4 4 0 0 1-.02-.554l.002-.043q.005-.113.017-.223H8v-1h1.642C10.156 1.86 11.322 1 12.687 1c.901 0 1.712.37 2.313.98l-.711.71c-.42-.43-.991-.69-1.602-.69-.774 0-1.492.422-1.92 1.09h1.239v1h-1.612a2.7 2.7 0 0 0 0 .82h1.612v1h-1.241C11.19 6.578 11.907 7 12.687 7c.57 0 1.101-.22 1.512-.6zM3 7H1v7h2zm9.81 4.5h-2.06c-.09.18-.2.34-.35.49-.37.37-.87.58-1.39.58s-1.02-.2-1.39-.58l-1.04-1.04c-.2-.2-.2-.51 0-.71s.51-.2.71 0l1.04 1.04c.36.36 1 .37 1.36 0 .18-.18.28-.42.28-.68s-.1-.5-.28-.68L8.44 8.67c-.2-.2-.44-.36-.71-.48-.3-.12-.62-.18-.94-.18h-2.8v4.8h.02l.29-.02 1.94 1.63c.45.38 1.02.58 1.6.58h5.81c.74 0 1.33-.6 1.33-1.33 0-1.2-.97-2.17-2.17-2.17"/></svg>', 'hand-euro-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.91 7.11c-.581.55-1.362.89-2.213.89h-.01c-1.357 0-2.527-.86-3.043-2.09H8v-1h1.385a3.7 3.7 0 0 1 0-.82H8v-1h1.642C10.156 1.86 11.322 1 12.687 1c.901 0 1.712.37 2.313.98l-.711.71c-.42-.43-.991-.69-1.602-.69-.774 0-1.492.422-1.92 1.09h1.239v1h-1.612a2.7 2.7 0 0 0 0 .82h1.612v1h-1.241C11.19 6.578 11.907 7 12.687 7c.57 0 1.101-.22 1.512-.6z"/><path fill="currentColor" fill-rule="evenodd" d="M1 7h3v1h2.798a2.5 2.5 0 0 1 1.77.731L9.73 9.896a1.56 1.56 0 0 1 .376 1.603h2.726c1.197 0 2.167.971 2.167 2.167 0 .737-.599 1.333-1.334 1.333H7.852a2.5 2.5 0 0 1-1.599-.578L4 12.566V14H1zm1 1h1v5H2zm2 1v2.27l2.892 2.382c.27.224.61.347.96.347h5.814c.185 0 .334-.15.334-.333 0-.644-.522-1.167-1.167-1.167h-3.77a1.56 1.56 0 0 1-1.539-.395l-.75-.75a.5.5 0 1 1 .707-.707l.75.75a.56.56 0 0 0 .397.164h.021a.56.56 0 0 0 .375-.957L7.861 9.439A1.5 1.5 0 0 0 6.799 9z" clip-rule="evenodd"/></svg>', 'hand-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.75 3.5c-.41 0-.75.34-.75.75v3.5c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-4c0-.41-.34-.75-.75-.75s-.75.34-.75.75v4c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-5c0-.41-.34-.75-.75-.75S8 2.34 8 2.75v5c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-4c0-.41-.34-.75-.75-.75S6 3.34 6 3.75V11L3.97 9.54a.845.845 0 0 0-1.21 0c-.33.34-.34.88 0 1.21l2.22 2.22c.66.66 1.55 1.03 2.47 1.03H11a2.5 2.5 0 0 0 2.5-2.5V4.25c0-.41-.34-.75-.75-.75"/></svg>', 'history': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.975 3.82.002-.001-.083-.09-.063-.066-.009-.01-.001-.002a6 6 0 0 0-.272-.29q-.076-.074-.157-.144l-.058-.052-.004-.003a6 6 0 0 0-.275-.237 6 6 0 0 0-.22-.166l-.024-.018a7 7 0 0 0-.293-.203 7 7 0 0 0-.859-.467 7 7 0 0 0-.339-.14l-.03-.011a6 6 0 0 0-.255-.093 7 7 0 0 0-.376-.108L9.592 1.7a4 4 0 0 0-.652-.128l-.092-.015q-.072-.013-.146-.022A6.47 6.47 0 0 0 3 3.847V1.996H2v4h4v-1H3.406a5.48 5.48 0 0 1 5.189-2.467q.061.008.124.019l.077.012q.188.025.373.064.088.02.173.044l.063.017q.16.041.317.09.115.04.227.084l.016.006a6 6 0 0 1 .523.232 5.4 5.4 0 0 1 .736.452l.03.022q.09.066.178.134.12.098.235.204l.05.044a4 4 0 0 1 .36.364l.012.013A5.496 5.496 0 1 1 2.5 7.996h-1A6.5 6.5 0 1 0 12.975 3.82"/><path fill="currentColor" d="M10.088 11.746 7.293 8.95V4.246h1v4.29l2.5 2.505z"/></svg>', 'home': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m13.55 5.5-5-3.33C8.38 2.06 8.19 2 7.99 2s-.39.06-.56.17L2.45 5.5c-.28.19-.45.5-.45.83v6.66c0 .55.45 1 1 1h4V12c0-.56.45-1.01 1-1.01s1 .45 1 1.01v1.99h4c.55 0 1-.45 1-1V6.33c0-.33-.17-.65-.45-.83"/></svg>', 'home-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m13.55 5.5-5-3.33C8.38 2.06 8.19 2 7.99 2s-.39.06-.56.17L2.45 5.5c-.28.19-.45.5-.45.83v6.66c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V6.33c0-.33-.17-.65-.45-.83m-.56 7.5h-4v-1c0-.55-.45-1-1-1s-1 .45-1 1v1H3V6.33L8 3l5 3.33V13z"/></svg>', 'info-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-7.75 4V7h1.5v5zm0-8v1.5h1.5V4z" clip-rule="evenodd"/></svg>', 'info-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.25 12V7h1.5v5zm0-8v1.5h1.5V4z"/><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m6-7A6 6 0 1 0 2 8a6 6 0 0 0 12 0" clip-rule="evenodd"/></svg>', 'interrogation-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15.039 8.146a7 7 0 1 1-14 0 7 7 0 0 1 14 0m-6.974-.5a1 1 0 1 0-.942-1.335l-1.43-.458A2.501 2.501 0 1 1 8.79 9.04v.606h-1.5v-2zm-.026 3a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5" clip-rule="evenodd"/></svg>', 'interrogation-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.824 7.646a1 1 0 1 0-.943-1.335l-1.429-.458A2.501 2.501 0 1 1 8.548 9.04v.606h-1.5v-2zm-.776 3.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0"/><path fill="currentColor" fill-rule="evenodd" d="M7.798 15.146a7 7 0 1 0 0-14 7 7 0 0 0 0 14m0-1a6 6 0 1 0 0-12 6 6 0 0 0 0 12" clip-rule="evenodd"/></svg>', 'key': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.44 6.67a3.994 3.994 0 0 0-5.1-2.44A3.986 3.986 0 0 0 .9 9.33 3.994 3.994 0 0 0 6 11.77c1.14-.4 2.04-1.3 2.44-2.44h2.89V12H14V9.33h1.33V6.67zM4.67 9.33c-.73 0-1.33-.6-1.33-1.33s.6-1.33 1.33-1.33S6 7.27 6 8s-.58 1.32-1.31 1.33z"/></svg>', 'laptop': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.5 5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z"/><path fill="currentColor" fill-rule="evenodd" d="M3 3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1H1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1h-2a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm10 1H3v7h10z" clip-rule="evenodd"/></svg>', 'layers': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.763 8.94a.5.5 0 0 0 .474 0l6.5-3.5a.5.5 0 0 0 0-.88l-6.5-3.5a.5.5 0 0 0-.474 0l-6.5 3.5a.5.5 0 0 0 0 .88zM8 7.932 2.555 5 8 2.068 13.445 5z" clip-rule="evenodd"/><path fill="currentColor" d="M8 12a.5.5 0 0 1-.237-.06l-6.5-3.5.474-.88L8 10.932l6.263-3.372.474.88-6.5 3.5A.5.5 0 0 1 8 12"/><path fill="currentColor" d="M8 15a.5.5 0 0 1-.237-.06l-6.5-3.5.474-.88L8 13.932l6.263-3.372.474.88-6.5 3.5A.5.5 0 0 1 8 15"/></svg>', 'life-ring': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15a6.97 6.97 0 0 0 4.192-1.394 7 7 0 0 0 1.315-1.284A6.97 6.97 0 0 0 15 8a6.97 6.97 0 0 0-1.394-4.192 7 7 0 0 0-1.414-1.414A6.97 6.97 0 0 0 8 1a6.97 6.97 0 0 0-4.192 1.394 7 7 0 0 0-1.414 1.414A6.97 6.97 0 0 0 1 8a6.97 6.97 0 0 0 1.394 4.192c.368.493.8.935 1.284 1.315A6.97 6.97 0 0 0 8 15m3.446-4.968 1.445 1.444a6 6 0 0 1-1.415 1.415l-1.444-1.445a4 4 0 0 0 1.414-1.414m-6.892 0a4 4 0 0 0 1.414 1.414l-1.445 1.445a6 6 0 0 1-1.414-1.415zm1.414-5.478a4 4 0 0 0-1.414 1.414L3.109 4.523A6 6 0 0 1 4.523 3.11zm5.509-1.445-1.445 1.445a4 4 0 0 1 1.414 1.414l1.445-1.445a6 6 0 0 0-1.415-1.414M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6" clip-rule="evenodd"/></svg>', 'lines-rectangle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm2 4h6v1H5zm4 3H5v1h4z" clip-rule="evenodd"/></svg>', 'lines-rectangle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5 6h6v1H5zm4 3H5v1h4z"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm8 1H4v12h8z" clip-rule="evenodd"/></svg>', 'link': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.65 2.727a3 3 0 0 1 .975.653 3 3 0 0 1 .01 4.24l-4 4a3 3 0 0 1-2.135.88 3 3 0 0 1-2.125-.865 3 3 0 0 1 0-4.25l.71-.71.705.71-.705.71a2.003 2.003 0 1 0 2.835 2.83l4-4a2.006 2.006 0 0 0-.65-3.27 2.005 2.005 0 0 0-2.185.435l-.71-.71a3 3 0 0 1 3.275-.653"/><path fill="currentColor" d="M1.659 11.76a2 2 0 0 0 .436.65 2 2 0 0 0 2.835 0l.71.71A3.04 3.04 0 0 1 3.5 14a3 3 0 0 1-2.13-.85 3 3 0 0 1 0-4.255l4-4A3.009 3.009 0 0 1 9.625 9.15l-1.06 1.06-.71-.71 1.06-1.075A2 2 0 0 0 9.5 7a1.97 1.97 0 0 0-1.22-1.86 2 2 0 0 0-2.185.435l-4 4a2 2 0 0 0-.436 2.185"/></svg>', 'list': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 3h9v1H5zm0 9h9v1H5zm9-4.5H5v1h9zm-12 0h1v1H2zM3 3H2v1h1zm-1 9h1v1H2z" clip-rule="evenodd"/></svg>', 'loader': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-opacity=".2" d="M13.657 8A5.657 5.657 0 1 1 2.343 8a5.657 5.657 0 0 1 11.314 0M3.475 8a4.526 4.526 0 1 0 9.05 0 4.526 4.526 0 0 0-9.05 0"/><path fill="currentColor" d="M2.343 8A5.657 5.657 0 0 1 8 2.343v1.132A4.525 4.525 0 0 0 3.475 8z"/></svg>', 'location': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 14.997c2.5-2.5 5-6.236 5-8.997A5 5 0 0 0 3 6c0 2.761 2.5 6.496 5 8.997m0-7.499a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'location-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 6.002a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M13 6.002c0 2.506-2.06 5.814-4.309 8.273q-.344.376-.691.723a23 23 0 0 1-.691-.723C5.059 11.816 3 8.508 3 6.002a5 5 0 0 1 10 0m-1 0c0 1.116-.52 2.554-1.424 4.088A21.5 21.5 0 0 1 8 13.55a21.5 21.5 0 0 1-2.576-3.459C4.52 8.556 4 7.118 4 6.002a4 4 0 1 1 8 0" clip-rule="evenodd"/></svg>', 'lock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5 4v3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-6 0m5 3V4a2 2 0 1 0-4 0v3zm-2 3a1 1 0 1 0 0 2 1 1 0 0 0 0-2" clip-rule="evenodd"/></svg>', 'lock-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/><path fill="currentColor" fill-rule="evenodd" d="M5 4v3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-6 0m5 3V4a2 2 0 1 0-4 0v3zm2 1v6H4V8z" clip-rule="evenodd"/></svg>', 'log-in': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 13v1h5a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H8v1h5v10z"/><path fill="currentColor" d="m9.086 8.5-1.793 1.793L8 11l3-3-3-3-.707.707L9.086 7.5H2v1z"/></svg>', 'log-out': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m12.086 8.5-1.793 1.793L11 11l3-3-3-3-.707.707L12.086 7.5H5v1z"/><path fill="currentColor" d="M8 3V2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5v-1H3V3z"/></svg>', 'magnifying-glass': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7a5 5 0 1 1 8.872 3.164l3.127 3.128-.707.707-3.128-3.128A5 5 0 0 1 2 7m5 4a4 4 0 1 1 0-8 4 4 0 0 1 0 8" clip-rule="evenodd"/></svg>', 'mail': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M1.007 4.002v8.011a1 1 0 0 0 1 1h11.997a1 1 0 0 0 1-1V4l-7 5z"/><path fill="currentColor" d="m1.52 3.14 6.484 4.63 6.485-4.632a1 1 0 0 0-.486-.126H2.008a1 1 0 0 0-.487.127"/></svg>', 'mail-open': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.604 2.082a1 1 0 0 1 .792 0l6 2.59c.366.158.604.52.604.919v7.408a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V5.591c0-.4.237-.76.604-.92zM2.27 5.48 8 7.955l5.728-2.475L8 3.007z" clip-rule="evenodd"/></svg>', 'mail-open-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.604 2.082a1 1 0 0 1 .792 0l6 2.59a1 1 0 0 1 .604.919V13a1 1 0 0 1-.898.995L14 14H2a1 1 0 0 1-1-1V5.59a1 1 0 0 1 .473-.849l.13-.068zm.792 6.71a1 1 0 0 1-.792 0L2 6.372V13h12V6.372zM2.261 5.477 8 7.955l5.738-2.478L8 3z" clip-rule="evenodd"/></svg>', 'mail-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 3.999v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8A1 1 0 0 0 14.001 3H2a1 1 0 0 0-1 .999m13 .713-6 4.28-6-4.28V12h12zM2.724 4 8 7.764 13.276 4z" clip-rule="evenodd"/></svg>', 'messages-square': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 10v1.017a1 1 0 0 1-1.006 1L8 12l-4 2v-1.978H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm1-6H5v1h6a1 1 0 0 1 1 1v3h1zm-3 3H4v1h6zM4 9h3v1H4z" clip-rule="evenodd"/></svg>', 'messages-square-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M4 7h6v1H4zm0 2h3v1H4z"/><path fill="currentColor" fill-rule="evenodd" d="M12 10v1.017a1 1 0 0 1-1.006 1L8 12l-4 2v-1.978H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm1-6H5v1h6a1 1 0 0 1 1 1v3h1zm-5.233 6.999L5 12.382v-1.36H3V6h8v5.017z" clip-rule="evenodd"/></svg>', 'mobile': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 10a1 1 0 1 1 2 0 1 1 0 0 1-2 0M6 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5" clip-rule="evenodd"/></svg>', 'mobile-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M6 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm8 1H4v12h8z" clip-rule="evenodd"/></svg>', 'notes': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13 4h-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1v1a1 1 0 0 0 1 1h5v-4h4V5a1 1 0 0 0-1-1M3 3h8v1H5a1 1 0 0 0-1 1v6H3zm9 4H6v1h6zM6 9h3v1H6z" clip-rule="evenodd"/><path fill="currentColor" d="m11 14 3-3h-3z"/></svg>', 'notes-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12 7H6v1h6zM9 9H6v1h3z"/><path fill="currentColor" fill-rule="evenodd" d="M13 4h-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1v1a1 1 0 0 0 1 1h6l3-3V5a1 1 0 0 0-1-1M3 3h8v1H5a1 1 0 0 0-1 1v6H3zm10 2H5v8h5v-3h3zm-.414 6L11 12.586V11z" clip-rule="evenodd"/></svg>', 'paper-plane': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.855 2.145a.5.5 0 0 0-.525-.115l-11 4a.5.5 0 0 0 0 .935L6.625 8.68l3.17-3.18.705.705L7.315 9.39l1.72 4.295A.5.5 0 0 0 9.5 14a.5.5 0 0 0 .46-.33l4-11a.5.5 0 0 0-.105-.525"/></svg>', 'paper-plane-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.855 2.145a.5.5 0 0 0-.525-.115l-11 4a.5.5 0 0 0 0 .935l4.8 1.92 1.92 4.8A.5.5 0 0 0 9.5 14a.5.5 0 0 0 .46-.33l4-11a.5.5 0 0 0-.105-.525M9.5 12.1 8.105 8.6 10.5 6.205 9.795 5.5 7.38 7.915 3.9 6.5l8.765-3.165z"/></svg>', 'paper-plane-slash': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.705 1 15 14.295l-.7.705-4-4-1.34 3.67a.5.5 0 0 1-.46.33.5.5 0 0 1-.465-.315l-1.72-4.295L8 8.705 7.295 8l-1.67 1.68L1.33 7.965a.5.5 0 0 1 0-.935L5 5.705l-4-4zM12.97 3.67l-1.725 4.745-3.66-3.66L12.33 3.03a.5.5 0 0 1 .64.64" clip-rule="evenodd"/></svg>', 'paper-plane-slash-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.705 1 15 14.295l-.7.705-4-4-1.34 3.67a.5.5 0 0 1-.46.33.5.5 0 0 1-.45-.315l-1.92-4.8-4.8-1.92a.5.5 0 0 1 0-.935L5 5.705l-4-4zM5.77 6.5l-2.87 1 3.48 1.415L7.295 8zm1.335 3.1L8.5 13.1l1-2.87L8 8.705zm4.56-5.265-3.82 1.39-.78-.78L12.33 3.03a.5.5 0 0 1 .64.64l-1.915 5.265-.78-.78z" clip-rule="evenodd"/></svg>', 'paperclip': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m6.57 12.358 6.09-6.09a1.035 1.035 0 1 0-1.465-1.463l-5.32 5.32-.733-.731 5.321-5.321A2.07 2.07 0 1 1 13.391 7l-5.339 5.34-.006.006-.744.744A3.106 3.106 0 0 1 2.91 8.698L9.608 2l.732.732L3.642 9.43a2.07 2.07 0 1 0 2.928 2.928"/></svg>', 'pause': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm5 0a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/></svg>', 'pause-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM4 4v8h2V4zm8-1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm-2 1v8h2V4z" clip-rule="evenodd"/></svg>', 'pen': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M10.88 2.293a1 1 0 0 1 1.415 0l1.414 1.414a1 1 0 0 1 0 1.414l-1.414 1.415-2.828-2.829zm.705 4.953L8.756 4.417 2 11.174l.003 2.825 2.825.003z"/></svg>', 'pen-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m-3.692-3.307v-1.54l4.538-4.539 1.54 1.54-4.538 4.539zm7.268-6.312a.42.42 0 0 1 0 .583l-.753.753-1.54-1.54.747-.753a.42.42 0 0 1 .583 0z" clip-rule="evenodd"/></svg>', 'pen-fancy': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.63 8.65c-.24.07-.43.26-.5.5l-1.46 4.37.11.12 2.3-2.3v-.19c0-.44.35-.8.79-.81.44 0 .8.35.81.79 0 .44-.35.8-.79.81h-.21l-2.3 2.3.12.11 4.37-1.46c.24-.07.43-.26.5-.5l.82-2.08L5.7 7.83zm7.17-6.3L6.27 7.28 8.69 9.7l4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83"/></svg>', 'pen-fancy-files-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 2H6v10h6V8.946l.023-.058.085-.078.892-.813V12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v.112a2.3 2.3 0 0 0-.974.66L12 2.8zm1 4.643-1 .913-.566.515-1.528-1.524L12 4.275l.767-.832q.113-.127.233-.215c1.167-.857 2.797.9 1.555 1.997zM4 3H3v11.5a.5.5 0 0 0 .5.5H11v-1H4zm4.238 4.41a.47.47 0 0 0-.316.315L7 10.477l.07.076 1.452-1.449v-.12a.51.51 0 0 1 .5-.51.51.51 0 0 1 .511.498.51.51 0 0 1-.499.51h-.133L7.45 10.931l.075.069 2.76-.92a.47.47 0 0 0 .317-.314l.518-1.31-1.573-1.562z" clip-rule="evenodd"/></svg>', 'pen-fancy-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.24 1.67c-.49 0-1 .21-1.44.7L6.27 7.3l2.42 2.42 4.94-4.52c1.6-1.42.19-3.53-1.39-3.53M8.72 8.34 7.66 7.28l3.9-4.24c.22-.24.44-.36.69-.36.41 0 .87.34 1.03.78.14.37.04.7-.32 1.02L8.73 8.36zM5.7 7.86l-2.08.82c-.24.08-.42.26-.5.5l-1.46 4.37.12.12.56.56.12.12 4.37-1.46c.24-.08.42-.26.5-.5l.81-2.08L5.7 7.87zm-2.57 4.46L4 9.72c.03-.08.09-.15.17-.18l1.29-.51 1.52 1.52-.5 1.29c-.03.08-.1.15-.19.18l-2.6.87.95-.95c.06.02.12.04.19.04.44 0 .79-.35.79-.79s-.35-.79-.79-.79-.79.35-.79.79c0 .07.02.13.04.19l-.95.95z"/></svg>', 'pen-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.295 2.293a1 1 0 0 0-1.414 0L9.467 3.707l2.828 2.829 1.414-1.415a1 1 0 0 0 0-1.414z"/><path fill="currentColor" fill-rule="evenodd" d="m2.003 13.999 2.825.003 6.757-6.756-2.829-2.829L2 11.174zM3 11.587l5.756-5.755 1.414 1.414-5.755 5.756L3.002 13z" clip-rule="evenodd"/></svg>', 'phone': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m10 10.53 1.034-1.035a1.01 1.01 0 0 1 1.08-.221l1.259.503A1.01 1.01 0 0 1 14 10.7v2.308a1 1 0 0 1-1.052.992C4.124 13.45 2.343 5.974 2.006 3.112A1.002 1.002 0 0 1 3.007 2h2.228a1 1 0 0 1 .923.628l.503 1.26a1 1 0 0 1-.217 1.08L5.41 6.002s.595 4.029 4.59 4.527"/></svg>', 'phone-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.62 14h-.079C3.472 13.479 2.184 5.826 2.004 3.49A1.384 1.384 0 0 1 3.278 2h2.543a.92.92 0 0 1 .859.582l.701 1.726a.92.92 0 0 1-.203.997l-.983.992a4.325 4.325 0 0 0 3.499 3.508l1.001-.993a.92.92 0 0 1 1.002-.189l1.74.697a.92.92 0 0 1 .567.858v2.437A1.385 1.385 0 0 1 12.62 14M3.389 2.923a.46.46 0 0 0-.462.462v.037c.213 2.732 1.574 9.193 9.665 9.655a.46.46 0 0 0 .49-.434v-2.465l-1.74-.696-1.325 1.315-.222-.028c-4.015-.503-4.56-4.518-4.56-4.56l-.028-.221 1.311-1.325-.692-1.74z"/></svg>', 'picture': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M14 3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1zM4 5a1 1 0 1 0 2 0 1 1 0 0 0-2 0m7.134 2.514L13 10.023V13H3v-2.494l.896-1.064c.203-.242.305-.362.425-.408a.5.5 0 0 1 .358 0c.12.046.222.166.425.408l1.767 2.098 2.995-4.026c.21-.282.316-.423.444-.476a.5.5 0 0 1 .38 0c.129.053.234.194.444.476" clip-rule="evenodd"/></svg>', 'picture-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/><path fill="currentColor" fill-rule="evenodd" d="M14 13a1 1 0 0 1-1 1H2h.994A1 1 0 0 1 2 13V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zM3 3h10v5.315l-1.069-1.43a6 6 0 0 0-.29-.368 1.5 1.5 0 0 0-.555-.41 1.5 1.5 0 0 0-1.14-.001c-.27.11-.448.288-.556.408-.098.11-.2.246-.291.366L6.822 9.911l-.974-1.14a5 5 0 0 0-.283-.314 1.5 1.5 0 0 0-.53-.353 1.5 1.5 0 0 0-1.064 0c-.248.094-.42.245-.529.352a5 5 0 0 0-.283.314L3 8.956zm0 10v-2.506l.903-1.055c.202-.237.303-.355.423-.4a.5.5 0 0 1 .355 0c.12.045.22.164.422.4l1.769 2.07 3.01-4.006c.21-.28.315-.42.443-.472a.5.5 0 0 1 .38 0c.127.053.232.193.441.474L13 9.985V13z" clip-rule="evenodd"/></svg>', 'play-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1m3.724 7.447-6 3A.5.5 0 0 1 5 11V5a.5.5 0 0 1 .724-.447l6 3a.5.5 0 0 1 0 .894"/></svg>', 'plus': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 2H7v5H2v2h5v5h2V9h5V7H9z"/></svg>', 'plus-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14M7 7V4h2v3h3v2H9v3H7V9H4V7z" clip-rule="evenodd"/></svg>', 'plus-circle-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M9 7h3v2H9v3H7V9H4V7h3V4h2z"/><path fill="currentColor" fill-rule="evenodd" d="M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1m0 1a6 6 0 1 0 0 12A6 6 0 0 0 8 2" clip-rule="evenodd"/></svg>', 'share': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4.5a2.5 2.5 0 0 1-4.467 1.543L6.915 7.35a2.5 2.5 0 0 1 0 1.298l2.618 1.308a2.5 2.5 0 1 1-.448.894L6.467 9.544a2.5 2.5 0 1 1 0-3.085l2.618-1.31A2.503 2.503 0 0 1 11.5 2 2.5 2.5 0 0 1 14 4.5"/></svg>', 'share-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m1 0a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0M6 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.623 1.32a2.5 2.5 0 1 1-.156-2.863L9.085 5.15c.088.33.243.633.448.894L6.915 7.35a2.5 2.5 0 0 1 0 1.298l2.618 1.308a2.5 2.5 0 1 1-.448.894L6.467 9.544q.084-.107.156-.223M11.5 13a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'shuffle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m11.295 9.705 1.79 1.795h-3.31L7.59 8l2.185-3.5h3.31l-1.79 1.795L12 7l3-3-3-3-.705.705 1.79 1.795h-3.31a1 1 0 0 0-.845.47L7 7.055 5.07 3.97a1 1 0 0 0-.845-.47H1v1h3.225L6.41 8l-2.185 3.5H1v1h3.225a1 1 0 0 0 .845-.47L7 8.945l1.93 3.085a1 1 0 0 0 .845.47h3.31l-1.79 1.795L12 15l3-3-3-3z"/></svg>', 'sidebar-arrow-left': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 2H2c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1M5 13H2V3h3zm9-5.5H8.9l1.8-1.8L10 5 7 8l3 3 .7-.7-1.8-1.8H14V13H6V3h8z"/></svg>', 'sidebar-arrow-right': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 2H2c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1M5 13H2V3h3zm9 0H6V8.5h5.1l-1.8 1.8.7.7 3-3-3-3-.7.7 1.8 1.8H6V3h8z"/></svg>', 'sitemap': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M3.33 10h-2c-.37 0-.66.3-.66.67v2c0 .36.3.65.66.66h2c.37 0 .66-.29.67-.66v-2c0-.37-.3-.67-.67-.67m-.5-1.67H7.5v1h1v-1h4.67v1h1v-1.2c0-.44-.36-.8-.8-.8H8.5V6h.83c.37 0 .67-.3.67-.67v-2c0-.37-.3-.66-.67-.66H6.67c-.37 0-.66.29-.67.66v2c0 .37.3.67.67.67h.83v1.33H2.63c-.44 0-.8.36-.8.8v1.2h1zM9 10H7c-.37 0-.67.3-.67.67v2c0 .37.3.66.67.66h2c.37 0 .66-.29.67-.66v-2c0-.37-.3-.67-.67-.67m5.67 0h-2c-.37 0-.67.3-.67.67v2c0 .37.3.66.67.66h2c.36 0 .65-.3.66-.66v-2c0-.37-.29-.66-.66-.67"/></svg>', 'sliders': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M12.95 4H15v1h-2.05v.002a2.5 2.5 0 0 1-2.672 1.988A2.52 2.52 0 0 1 8.05 5.002V5H1V4h7.05v-.002a2.5 2.5 0 0 1 2.672-1.988 2.52 2.52 0 0 1 2.228 1.988zm-9.9 8H1v-1h2.05v-.002A2.52 2.52 0 0 1 5.5 9a2.5 2.5 0 0 1 2.45 1.999V11H15v1H7.95v.002A2.52 2.52 0 0 1 5.5 14a2.5 2.5 0 0 1-2.45-1.998z"/></svg>', 'sliders-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.95 4H15v1h-2.05c-.25 1.15-1.25 2-2.45 2s-2.2-.85-2.45-2H1V4h7.05C8.3 2.85 9.3 2 10.5 2s2.2.85 2.45 2M9 4.5c0 .85.65 1.5 1.5 1.5S12 5.35 12 4.5 11.35 3 10.5 3 9 3.65 9 4.5M3.05 12H1v-1h2.05C3.3 9.85 4.3 9 5.5 9s2.2.85 2.45 2H15v1H7.95c-.25 1.15-1.25 2-2.45 2s-2.2-.85-2.45-2M7 11.5c0-.85-.65-1.5-1.5-1.5S4 10.65 4 11.5 4.65 13 5.5 13 7 12.35 7 11.5" clip-rule="evenodd"/></svg>', 'squares': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M2 3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm7 0a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1zm0 7a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1zm-7 0a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/></svg>', 'star': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8 1.343 2.163 4.382L15 6.428 11.5 9.84l.826 4.817L8 12.383l-4.326 2.274L4.5 9.84 1 6.428l4.837-.703z"/></svg>', 'star-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="currentColor" d="m9.715 5.947.116.235.26.038 3.834.557-2.774 2.705-.188.184.044.259.654 3.818-3.429-1.803L8 11.818l-.232.122-3.43 1.803.655-3.818.044-.26-.188-.183-2.775-2.705L5.91 6.22l.26-.038.116-.235L8 2.472z"/></svg>', 'table': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 13a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1zm1-3v3h3v-3zm4 0v3h6v-3zm6-1H7V6h6zM6 9H3V6h3zM3 5V3h10v2z" clip-rule="evenodd"/></svg>', 'tag': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7.43c0 .275.11.538.303.732l5.535 5.535c.404.404 1.06.404 1.464 0l4.395-4.395a1.036 1.036 0 0 0 0-1.464L8.162 2.303A1.04 1.04 0 0 0 7.43 2H3.036C2.464 2 2 2.464 2 3.036zM5.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'tag-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0-1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2 7.43c0 .275.11.538.303.732l5.535 5.535c.404.404 1.06.404 1.464 0l4.395-4.395a1.036 1.036 0 0 0 0-1.464L8.162 2.303A1.04 1.04 0 0 0 7.43 2H3.036C2.464 2 2 2.464 2 3.036zm1 0q0 .016.01.025l5.535 5.534a.036.036 0 0 0 .05 0l4.394-4.394a.036.036 0 0 0 0-.05L7.456 3.01A.04.04 0 0 0 7.43 3H3.036A.036.036 0 0 0 3 3.036z" clip-rule="evenodd"/></svg>', 'tags': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.855 6.645 8.5 1.295A1 1 0 0 0 7.795 1H4a1 1 0 0 0-1 1v1h1V2h3.795l5 5-.65.645.71.71 1-1a.5.5 0 0 0 0-.71"/><path fill="currentColor" fill-rule="evenodd" d="M2 8.978c0 .251.1.493.278.67l5.073 5.074a.95.95 0 0 0 1.343 0l4.028-4.028a.95.95 0 0 0 0-1.343L7.649 4.278A.95.95 0 0 0 6.978 4H2.949A.95.95 0 0 0 2 4.95zM5.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>', 'tags-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m8.5 1.295 5.355 5.35a.5.5 0 0 1 0 .71l-1 1-.71-.71.65-.645-5-5H4v1H3V2a1 1 0 0 1 1-1h3.795a1 1 0 0 1 .705.295"/><path fill="currentColor" fill-rule="evenodd" d="M5.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0-1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2.278 9.649A.95.95 0 0 1 2 8.978V4.949A.95.95 0 0 1 2.95 4h4.028c.251 0 .493.1.67.278l5.074 5.073a.95.95 0 0 1 0 1.343l-4.028 4.028a.95.95 0 0 1-1.343 0zm5.744 4.33L3 8.957V5h3.957l5.022 5.022z" clip-rule="evenodd"/></svg>', 'thumb-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.202 11.934a1.506 1.506 0 0 1-2.438 1.651L5.5 10.461v-8.46h4.922c1.081 0 2.058.714 2.484 1.817l.944 3.394c.51 1.32-.362 2.788-1.656 2.788h-1.772zM4.5 10H2V2h2.5z"/></svg>', 'thumb-down-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11.204 11.934 10.424 10h1.772c1.294 0 2.166-1.468 1.656-2.788l-.944-3.394C12.484 2.715 11.507 2 10.426 2H5v.003H2v8h3.023l3.744 3.582a1.506 1.506 0 0 0 2.437-1.651m.755-7.797C11.657 3.4 11.033 3 10.425 3H6.002l.017 6.572 3.439 3.29a.506.506 0 0 0 .819-.554L8.943 9h3.253c.24 0 .48-.131.645-.41.167-.28.218-.657.079-1.018l-.018-.045zM3 9.003h2v-6H3z" clip-rule="evenodd"/></svg>', 'thumb-up': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11.202 4.069a1.506 1.506 0 0 0-2.438-1.651L5.5 5.542v8.46h4.922c1.081 0 2.058-.714 2.484-1.817l.944-3.394c.51-1.32-.362-2.788-1.656-2.788h-1.772zM4.5 6.003H2v8h2.5z"/></svg>', 'thumb-up-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m11.204 4.069-.78 1.934h1.772c1.294 0 2.166 1.468 1.656 2.788l-.944 3.394c-.425 1.103-1.402 1.818-2.483 1.818H5V14H2V6h3.023l3.744-3.582a1.506 1.506 0 0 1 2.437 1.65m.755 7.797c-.302.738-.926 1.137-1.534 1.137H6.002L6.02 6.43l3.439-3.29a.506.506 0 0 1 .819.554L8.943 7.003h3.253c.24 0 .48.13.645.41.167.28.218.657.079 1.018l-.018.045zM3 7h2v6H3z" clip-rule="evenodd"/></svg>', 'thumbtack': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m8.91 2-1.2 3.594L2.364 7.09 5.274 10l-.707.706-1.687 1.687-.264.264-.09.09-.209.498L2 14l.755-.317.498-.21.09-.089.264-.264 1.687-1.687.706-.706 2.91 2.908 1.496-5.347L14 7.09z" clip-rule="evenodd"/></svg>', 'thumbtack-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m5.273 10-2.91 2.91L2 14l1.09-.364L6 10.727l2.91 2.91 1.496-5.348L14 7.09 8.91 2l-1.2 3.594L2.364 7.09zm3.241-3.563-4.18 1.17 4.059 4.059 1.17-4.18 2.533-.845-2.737-2.737z" clip-rule="evenodd"/></svg>', 'trash': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11 2v1h3v1h-1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4H2V3h3V2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1M6 3V2h4v1zm1 3H6v6h1zm2 0h1v6H9z" clip-rule="evenodd"/></svg>', 'trash-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7 6H6v6h1zm2 0h1v6H9z"/><path fill="currentColor" fill-rule="evenodd" d="M11 3V2a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v1H2v1h1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4h1V3zM6 2v1h4V2zm6 2v10H4V4z" clip-rule="evenodd"/></svg>', 'universal-access': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-3.5-1V6h-7v1H7v1.367l-1.934 3.385.868.496L7.79 9h.42l1.856 3.248.868-.496L9 8.367V7zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/></svg>', 'universal-access-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M4.111 13.82A7 7 0 0 0 8 15a7.01 7.01 0 0 0 7-7 7 7 0 1 0-10.889 5.82m.556-10.809A6 6 0 0 1 8 2a6.007 6.007 0 0 1 6 6 6 6 0 1 1-9.333-4.989M8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2M11.5 7V6h-7v1H7v1.367l-1.934 3.385.868.496L7.79 9h.42l1.856 3.248.868-.496L9 8.367V7z" clip-rule="evenodd"/></svg>', 'unlink': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.5 1h-1v2h1zM1.792 2.501l.707-.707L4.207 3.5l-.707.707zm9.998 9.995.708-.707 1.707 1.708-.707.707zM1 5.5h2v1H1zm14 4h-2v1h2zM9.5 13h1v2h-1zm-1.21-2.465-1.855 1.86a2.002 2.002 0 0 1-2.83-2.83l1.86-1.86L4.755 7 2.9 8.86a3 3 0 0 0-.03 4.27A3 3 0 0 0 5 14a3.04 3.04 0 0 0 2.16-.9L9 11.245zm1.275-6.93-1.86 1.86L7 4.755 8.84 2.9A3.04 3.04 0 0 1 11 2a3 3 0 0 1 2.13.87 3 3 0 0 1-.03 4.27L11.245 9l-.71-.705 1.86-1.86a2.002 2.002 0 0 0-2.83-2.83"/></svg>', 'unlock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 7V4a2 2 0 1 0-4 0v1H5V4a3 3 0 0 1 6 0v3h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm-3 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0" clip-rule="evenodd"/></svg>', 'unlock-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/><path fill="currentColor" fill-rule="evenodd" d="M10 4v3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-6 0v1h1V4a2 2 0 1 1 4 0m2 4v6H4V8z" clip-rule="evenodd"/></svg>', 'upload': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3.706 6.703 3 6l5-5 5 5-.704.702L8.5 2.912V12h-1V2.913zM13 14v-2h1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-.996-1.002L2 14v-2h1v2z" clip-rule="evenodd"/></svg>', 'user': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6M6 9a4 4 0 0 0-4 4 1 1 0 0 0 1 1h10a1 1 0 0 0 1-1 4 4 0 0 0-4-4z" clip-rule="evenodd"/></svg>', 'user-circle': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8.01 1C4.146.99 1.01 4.128 1 7.99c0 3.863 3.128 7 6.99 7.01 3.853 0 6.99-3.109 7.01-6.962C15.019 4.176 11.9 1.02 8.038 1zm0 .715a6.28 6.28 0 0 1 6.275 6.295v.028a6.2 6.2 0 0 1-1.135 3.586 2.59 2.59 0 0 0-2.537-2.26H9.478a3.44 3.44 0 0 1-2.937 0H5.415a2.573 2.573 0 0 0-2.546 2.26 6.2 6.2 0 0 1-1.135-3.586 6.284 6.284 0 0 1 6.247-6.323zM5.147 5.778a2.914 2.914 0 0 1 2.91-2.909 2.914 2.914 0 0 1 2.908 2.909 2.914 2.914 0 0 1-2.909 2.909H8.01a2.917 2.917 0 0 1-2.86-2.91"/></svg>', 'user-group': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m-4 4c0-.972.347-1.863.923-2.556A2.5 2.5 0 0 0 1 10.5V12a1 1 0 0 0 1 1h2.268A2 2 0 0 1 4 12zm10 2h-2.268A2 2 0 0 0 12 12v-1c0-.972-.347-1.863-.923-2.556A2.5 2.5 0 0 1 15 10.5V12a1 1 0 0 1-1 1m-9-2a3 3 0 0 1 6 0v1a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1zm9-5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0M3.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/></svg>', 'user-group-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0M9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" d="M2 10.5V12h2c0 .364.097.706.268 1H2a1 1 0 0 1-1-1v-1.5a2.5 2.5 0 0 1 3.923-2.056q-.321.386-.54.844A1.5 1.5 0 0 0 2 10.5M14 13h-2.268A2 2 0 0 0 12 12h2v-1.5a1.5 1.5 0 0 0-2.384-1.212 4 4 0 0 0-.539-.844A2.5 2.5 0 0 1 15 10.5V12a1 1 0 0 1-1 1"/><path fill="currentColor" fill-rule="evenodd" d="M8 8a3 3 0 0 0-3 3v1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1a3 3 0 0 0-3-3m2 4v-1a2 2 0 1 0-4 0v1zm2.5-5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0-1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1M5 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0" clip-rule="evenodd"/></svg>', 'user-lock': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M6.5 7a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M5 8a4 4 0 0 0-4 4 1 1 0 0 0 1 1h7v-1.5a1.5 1.5 0 0 1 1.036-1.427c.109-.63.452-1.178.938-1.553A4 4 0 0 0 9 8z"/><path fill="currentColor" fill-rule="evenodd" d="M10.5 11h.5v-.5a1.5 1.5 0 0 1 3 0v.5h.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5m2.75-.5v.5h-1.5v-.5a.75.75 0 0 1 1.5 0" clip-rule="evenodd"/></svg>', 'user-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0m-1 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-8 8a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4 1 1 0 0 1-1 1H3a1 1 0 0 1-1-1m1 0a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3z" clip-rule="evenodd"/></svg>', 'user-pen-fancy-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.5 7a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5m0-4C6.67 3 6 3.67 6 4.5S6.67 6 7.5 6 9 5.33 9 4.5 8.33 3 7.5 3m3.62 8.46-.22.54-.3.77s-.04.09-.06.13c-.03.04-.06.07-.1.1-.05.04-.1.07-.16.08L7.52 14l-.07-.07 1.45-1.45h.13c.15 0 .27-.06.36-.16a.6.6 0 0 0 .1-.15c.01-.02.02-.04.03-.07v-.02s.01-.05.01-.08v-.03c0-.28-.23-.5-.51-.5-.28.01-.5.24-.5.51v.14l-.76.75-.14.13-.55.55-.07-.07.16-.48.1-.29.24-.71.42-1.27c.05-.16.17-.28.32-.32l1.31-.52zm3.44-3.24-2.05 1.87-.7.64-.06.05-.32.29-1.52-1.52.28-.31.06-.06.64-.7 1.88-2.04c1.16-1.31 3.11.61 1.79 1.78"/><path fill="currentColor" fill-rule="evenodd" d="M9 8H6c-2.21 0-4 1.79-4 4 0 .55.45 1 1 1h3.11l.33-1H3c0-1.66 1.34-3 3-3h3.05l.83-.9C9.6 8.03 9.3 8 9 8" clip-rule="evenodd"/></svg>', 'user-plus': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14 3.33h-1.35V2c-.02-.18-.17-.33-.35-.33h-.65c-.18 0-.33.15-.35.33v1.33H10c-.18 0-.33.16-.33.34v.66c0 .18.15.33.33.34h1.3V6c.02.18.17.32.35.33h.65c.18 0 .33-.15.35-.33V4.67H14a.34.34 0 0 0 .32-.34v-.66a.34.34 0 0 0-.32-.34M9.28 9.77h-.2c-1.25.51-2.66.51-3.91 0H5a3.006 3.006 0 0 0-3.3 2.67v.74c.06.67.63 1.17 1.3 1.15h8.25c.69.06 1.3-.45 1.36-1.14v-.68a3 3 0 0 0-3.23-2.75h-.1zM7.13 3.7c1.46 0 2.64 1.17 2.65 2.63 0 1.46-1.17 2.64-2.63 2.65-1.46 0-2.64-1.17-2.65-2.63A2.65 2.65 0 0 1 7.13 3.7"/></svg>', 'user-question-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M5.23 11.14c.86-.66 1.01-1.9.35-2.75s-1.9-1.01-2.75-.35a1.96 1.96 0 0 0 0 3.1c-.72.42-1.16 1.2-1.16 2.03v.8c0 .2.17.37.37.37h3.98c.2 0 .37-.17.37-.37v-.8c0-.83-.44-1.61-1.16-2.03M2.81 9.59c0-.67.55-1.22 1.22-1.22s1.22.55 1.22 1.22-.55 1.22-1.22 1.22-1.22-.55-1.22-1.22m2.83 4H2.41v-.42c0-.89.72-1.62 1.62-1.62s1.62.72 1.62 1.62v.42zm7.13-11.93H8c-.86 0-1.56.7-1.56 1.56v7.16c0 .21.17.37.37.37.08 0 .16-.03.22-.07l1.49-1.12h4.25c.86 0 1.56-.7 1.56-1.56V3.22c0-.86-.7-1.56-1.56-1.56m.82 6.33c0 .45-.37.82-.82.82H8.4a.4.4 0 0 0-.22.07l-1 .75V3.22c0-.45.37-.82.82-.82h4.77c.45 0 .82.37.82.82zm-2.8-.42c0 .23-.18.41-.41.41s-.41-.18-.41-.41.18-.41.41-.41.41.18.41.41m-.41-4.34c-.83 0-1.5.67-1.5 1.5 0 .23.18.41.41.41s.41-.18.41-.41c0-.38.31-.68.69-.68s.68.31.68.69-.31.68-.68.68c-.23 0-.41.18-.41.41v.44c0 .23.18.41.41.41s.41-.18.41-.41v-.09c.8-.23 1.26-1.06 1.04-1.85-.18-.65-.77-1.09-1.44-1.09z"/></svg>', 'user-shield': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2.676 2.768A1 1 0 0 0 2 3.714v4.799a3 3 0 0 0 .154.949l.06.177A7 7 0 0 0 5.1 13.334l2.373 1.508a1 1 0 0 0 1.074-.001l2.361-1.507a7 7 0 0 0 2.875-3.687l.062-.185c.102-.306.154-.627.154-.949V3.714a1 1 0 0 0-.676-.946l-5-1.712a1 1 0 0 0-.648 0zM8 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4m-4.22 2.627a6 6 0 0 0 1.857 1.863l2.373 1.508 2.361-1.507a6 6 0 0 0 1.85-1.862A4 4 0 0 0 9 8.999H7c-1.32 0-2.492.641-3.22 1.628" clip-rule="evenodd"/></svg>', 'user-shield-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 5.998a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2 3.712a1 1 0 0 1 .676-.946l5-1.712a1 1 0 0 1 .648 0l5 1.712a1 1 0 0 1 .676.946v4.799c0 .322-.052.643-.154.949l-.062.185a7 7 0 0 1-2.875 3.687l-2.36 1.507a1 1 0 0 1-1.075 0l-2.373-1.507a7 7 0 0 1-2.888-3.695l-.06-.177A3 3 0 0 1 2 8.51zm11 0v4.799q0 .324-.103.632l-.061.186a6 6 0 0 1-.614 1.298A4 4 0 0 0 9 8.997H7c-1.32 0-2.492.64-3.22 1.628a6 6 0 0 1-.618-1.304l-.06-.178A2 2 0 0 1 3 8.511V3.712L8 2zM9 9.998a3 3 0 0 1 2.582 1.47c-.355.39-.76.734-1.21 1.021L8.01 13.996l-2.373-1.508a6 6 0 0 1-1.217-1.022A3 3 0 0 1 7 9.998z" clip-rule="evenodd"/></svg>', 'users': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M7.25 3.335a2.5 2.5 0 1 0 0 4.33A3.5 3.5 0 0 1 6.5 5.5c0-.818.28-1.57.75-2.165M10 3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m-5 9.2A3.2 3.2 0 0 1 8.2 9h3.6a3.2 3.2 0 0 1 3.2 3.2.8.8 0 0 1-.8.8H5.8a.8.8 0 0 1-.8-.8M5.48 9H4.2A3.2 3.2 0 0 0 1 12.2a.8.8 0 0 0 .8.8h2.387A1.8 1.8 0 0 1 4 12.2 4.19 4.19 0 0 1 5.48 9"/></svg>', 'users-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.5 5.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0M10 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" clip-rule="evenodd"/><path fill="currentColor" d="M4.2 9h1.28a4.2 4.2 0 0 0-.858 1H4.2a2.2 2.2 0 0 0-2.191 2h1.996a4 4 0 0 0-.005.2c0 .287.067.559.187.8H1.8a.8.8 0 0 1-.8-.8A3.2 3.2 0 0 1 4.2 9"/><path fill="currentColor" fill-rule="evenodd" d="M5 12.2A3.2 3.2 0 0 1 8.2 9h3.6a3.2 3.2 0 0 1 3.2 3.2.8.8 0 0 1-.8.8H5.8a.8.8 0 0 1-.8-.8m6.8-2.2a2.2 2.2 0 0 1 2.191 2H6.009A2.2 2.2 0 0 1 8.2 10z" clip-rule="evenodd"/><path fill="currentColor" d="M6 3c.455 0 .882.122 1.25.335a3.5 3.5 0 0 0-.5.865 1.5 1.5 0 1 0 0 2.6c.125.313.294.604.5.865A2.5 2.5 0 1 1 6 3"/></svg>', 'wallet': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm1 0h11v1H2zm9 5a1 1 0 1 1 2 0 1 1 0 0 1-2 0" clip-rule="evenodd"/></svg>', 'wallet-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M11 9a1 1 0 1 1 2 0 1 1 0 0 1-2 0"/><path fill="currentColor" fill-rule="evenodd" d="M2 13a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm0-9h11v1H2zm12 2H2v6h12z" clip-rule="evenodd"/></svg>' };
|
|
1047
|
-
|
|
1048
|
-
const mgIconCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:inline-flex;vertical-align:middle}.mg-c-icon{color:currentcolor}.mg-c-icon[size=small],.mg-c-icon.mg-c-icon--size-small{width:var(--mg-b-size-12);height:var(--mg-b-size-12)}.mg-c-icon[size=small][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-small[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-16) - var(--mg-b-size-12))/2)}.mg-c-icon[size=medium],.mg-c-icon.mg-c-icon--size-medium{width:var(--mg-b-size-16);height:var(--mg-b-size-16)}.mg-c-icon[size=medium][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-medium[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-24) - var(--mg-b-size-16))/2)}.mg-c-icon[size=large],.mg-c-icon.mg-c-icon--size-large{width:var(--mg-b-size-20);height:var(--mg-b-size-20)}.mg-c-icon[size=large][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-large[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-32) - var(--mg-b-size-20))/2)}.mg-c-icon[size=xlarge],.mg-c-icon.mg-c-icon--size-xlarge{width:var(--mg-b-size-24);height:var(--mg-b-size-24)}.mg-c-icon[size=xlarge][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-xlarge[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-40) - var(--mg-b-size-24))/2)}.mg-c-icon[size=xxlarge],.mg-c-icon.mg-c-icon--size-xxlarge{width:var(--mg-b-size-32);height:var(--mg-b-size-32)}.mg-c-icon[size=xxlarge][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-xxlarge[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-48) - var(--mg-b-size-32))/2)}.mg-c-icon.mg-c-icon--variant-dark.mg-c-icon--variant-style-icon{color:var(--mg-b-color-dark)}.mg-c-icon.mg-c-icon--variant-light.mg-c-icon--variant-style-icon{color:var(--mg-b-color-light)}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-icon{color:var(--mg-b-color-app)}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-icon{color:var(--mg-b-color-blue)}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-icon{color:var(--mg-b-color-80)}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-icon{color:var(--mg-b-color-danger)}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-icon{color:var(--mg-b-color-info)}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-icon{color:var(--mg-b-color-success)}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-icon{color:var(--mg-b-color-warning)}.mg-c-icon.mg-c-icon--variant-dark.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-110-20, color-mix(in srgb, var(--mg-b-color-dark), white 80%))}.mg-c-icon.mg-c-icon--variant-light.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-0-20, color-mix(in srgb, var(--mg-b-color-light), white 80%))}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-app), white 80%))}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-blue), white 80%))}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-80), white 80%))}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-icon.mg-c-icon--variant-dark.mg-c-icon--variant-style-full{color:var(--mg-b-color-dark);background-color:var(--mg-b-color-110-20, color-mix(in srgb, var(--mg-b-color-dark), white 80%))}.mg-c-icon.mg-c-icon--variant-light.mg-c-icon--variant-style-full{color:var(--mg-b-color-light);background-color:var(--mg-b-color-0-20, color-mix(in srgb, var(--mg-b-color-light), white 80%))}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-full{color:var(--mg-b-color-app);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-app), white 80%))}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-full{color:var(--mg-b-color-blue);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-blue), white 80%))}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-full{color:var(--mg-b-color-80);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-80), white 80%))}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-full{color:var(--mg-b-color-danger);background-color:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-full{color:var(--mg-b-color-info);background-color:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-full{color:var(--mg-b-color-success);background-color:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-full{color:var(--mg-b-color-warning);background-color:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-icon[class*=mg-c-icon--variant-]{overflow:visible;border-radius:var(--mg-c-icon-border-radius)}.mg-c-icon--spin{animation-duration:.75s;animation-iteration-count:infinite;animation-name:rotate}@keyframes rotate{to{transform:rotate(360deg)}}`;
|
|
1090
|
+
const mgIconCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:inline-flex;vertical-align:middle}.mg-c-icon{color:currentcolor}.mg-c-icon[size=small],.mg-c-icon.mg-c-icon--size-small{width:var(--mg-b-size-12);height:var(--mg-b-size-12)}.mg-c-icon[size=small][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-small[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-16) - var(--mg-b-size-12))/2)}.mg-c-icon[size=medium],.mg-c-icon.mg-c-icon--size-medium{width:var(--mg-b-size-16);height:var(--mg-b-size-16)}.mg-c-icon[size=medium][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-medium[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-24) - var(--mg-b-size-16))/2)}.mg-c-icon[size=large],.mg-c-icon.mg-c-icon--size-large{width:var(--mg-b-size-20);height:var(--mg-b-size-20)}.mg-c-icon[size=large][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-large[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-32) - var(--mg-b-size-20))/2)}.mg-c-icon[size=xlarge],.mg-c-icon.mg-c-icon--size-xlarge{width:var(--mg-b-size-24);height:var(--mg-b-size-24)}.mg-c-icon[size=xlarge][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-xlarge[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-40) - var(--mg-b-size-24))/2)}.mg-c-icon[size=xxlarge],.mg-c-icon.mg-c-icon--size-xxlarge{width:var(--mg-b-size-32);height:var(--mg-b-size-32)}.mg-c-icon[size=xxlarge][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-xxlarge[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc((var(--mg-b-size-48) - var(--mg-b-size-32))/2)}.mg-c-icon.mg-c-icon--variant-dark.mg-c-icon--variant-style-icon{color:var(--mg-b-color-dark)}.mg-c-icon.mg-c-icon--variant-light.mg-c-icon--variant-style-icon{color:var(--mg-b-color-light)}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-icon{color:var(--mg-b-color-app)}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-icon{color:var(--mg-b-color-blue)}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-icon{color:var(--mg-b-color-80)}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-icon{color:var(--mg-b-color-danger)}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-icon{color:var(--mg-b-color-info)}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-icon{color:var(--mg-b-color-success)}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-icon{color:var(--mg-b-color-warning)}.mg-c-icon.mg-c-icon--variant-dark.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-110-20, color-mix(in srgb, var(--mg-b-color-dark), white 80%))}.mg-c-icon.mg-c-icon--variant-light.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-0-20, color-mix(in srgb, var(--mg-b-color-light), white 80%))}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-app), white 80%))}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-blue), white 80%))}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-background{background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-80), white 80%))}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-background{background-color:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-icon.mg-c-icon--variant-dark.mg-c-icon--variant-style-full{color:var(--mg-b-color-dark);background-color:var(--mg-b-color-110-20, color-mix(in srgb, var(--mg-b-color-dark), white 80%))}.mg-c-icon.mg-c-icon--variant-light.mg-c-icon--variant-style-full{color:var(--mg-b-color-light);background-color:var(--mg-b-color-0-20, color-mix(in srgb, var(--mg-b-color-light), white 80%))}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-full{color:var(--mg-b-color-app);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-app), white 80%))}.mg-c-icon.mg-c-icon--variant-blue.mg-c-icon--variant-style-full{color:var(--mg-b-color-blue);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-blue), white 80%))}.mg-c-icon.mg-c-icon--variant-80.mg-c-icon--variant-style-full{color:var(--mg-b-color-80);background-color:var(--mg-b-color--20, color-mix(in srgb, var(--mg-b-color-80), white 80%))}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-full{color:var(--mg-b-color-danger);background-color:var(--mg-b-color-red-20, color-mix(in srgb, var(--mg-b-color-danger), white 80%))}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-full{color:var(--mg-b-color-info);background-color:var(--mg-b-color-blue-20, color-mix(in srgb, var(--mg-b-color-info), white 80%))}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-full{color:var(--mg-b-color-success);background-color:var(--mg-b-color-green-20, color-mix(in srgb, var(--mg-b-color-success), white 80%))}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-full{color:var(--mg-b-color-warning);background-color:var(--mg-b-color-yellow-20, color-mix(in srgb, var(--mg-b-color-warning), white 80%))}.mg-c-icon[class*=mg-c-icon--variant-]{overflow:visible;border-radius:var(--mg-c-icon-border-radius)}.mg-c-icon--spin{animation-duration:.75s;animation-iteration-count:infinite;animation-name:rotate}@keyframes rotate{to{transform:rotate(360deg)}}`;
|
|
1049
1091
|
|
|
1050
1092
|
const MgIcon = class {
|
|
1051
1093
|
constructor(hostRef) {
|
|
@@ -1072,7 +1114,7 @@ const MgIcon = class {
|
|
|
1072
1114
|
(_a = this.element.shadowRoot.querySelector('svg')) === null || _a === void 0 ? void 0 : _a.remove();
|
|
1073
1115
|
// Append new SVG to ShadowRoot
|
|
1074
1116
|
const svgContainer = document.createElement('div');
|
|
1075
|
-
svgContainer.innerHTML = icons[icon];
|
|
1117
|
+
svgContainer.innerHTML = index$3.icons[icon];
|
|
1076
1118
|
this.element.shadowRoot.append(svgContainer.firstChild);
|
|
1077
1119
|
svgContainer.remove();
|
|
1078
1120
|
// Update svg attributes
|
|
@@ -1083,8 +1125,8 @@ const MgIcon = class {
|
|
|
1083
1125
|
};
|
|
1084
1126
|
}
|
|
1085
1127
|
validateIcon(newValue, oldValue) {
|
|
1086
|
-
if (!Object.keys(icons).includes(newValue)) {
|
|
1087
|
-
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${index$1.toString(newValue)}.`);
|
|
1128
|
+
if (!Object.keys(index$3.icons).includes(newValue)) {
|
|
1129
|
+
throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(index$3.icons).join(', ')}. Passed value: ${index$1.toString(newValue)}.`);
|
|
1088
1130
|
}
|
|
1089
1131
|
else {
|
|
1090
1132
|
if (oldValue !== undefined) {
|
|
@@ -1204,8 +1246,12 @@ const sizes$1 = ['small', 'medium', 'large'];
|
|
|
1204
1246
|
* List of all possibles directions
|
|
1205
1247
|
*/
|
|
1206
1248
|
const directions = ['vertical', 'horizontal'];
|
|
1249
|
+
/**
|
|
1250
|
+
* List of all possibles horizontal alignments
|
|
1251
|
+
*/
|
|
1252
|
+
const aligns = ['left', 'center', 'right'];
|
|
1207
1253
|
|
|
1208
|
-
const mgIllustratedMessageCss = () => `.mg-c-illustrated-message{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);
|
|
1254
|
+
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);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{inline-size:fit-content;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))}.mg-c-illustrated-message.mg-c-illustrated-message--align-left{margin-inline:0 auto}.mg-c-illustrated-message.mg-c-illustrated-message--align-center{margin-inline:auto}.mg-c-illustrated-message.mg-c-illustrated-message--align-right{margin-inline:auto 0}@container (width > 52.8rem){.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{flex-direction:row;align-items:center;column-gap:var(--mg-b-size-48);text-align:left}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots{max-inline-size:unset}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration{flex:1 0 auto;max-inline-size:fit-content}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-small{column-gap:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-large{column-gap:var(--mg-b-size-64)}}:host{display:block;container-type:inline-size;inline-size:100%}`;
|
|
1209
1255
|
|
|
1210
1256
|
const MgIllustratedMessage = class {
|
|
1211
1257
|
constructor(hostRef) {
|
|
@@ -1218,6 +1264,13 @@ const MgIllustratedMessage = class {
|
|
|
1218
1264
|
* Define component orientation
|
|
1219
1265
|
*/
|
|
1220
1266
|
this.direction = 'vertical';
|
|
1267
|
+
/**
|
|
1268
|
+
* Define the horizontal alignment of the message inside its container.
|
|
1269
|
+
* The message is sized to its content, so `align` positions it in both the vertical and
|
|
1270
|
+
* horizontal directions. When the content is wide enough to fill the container there is
|
|
1271
|
+
* no room left, so `align` has no visible effect.
|
|
1272
|
+
*/
|
|
1273
|
+
this.align = 'center';
|
|
1221
1274
|
/**
|
|
1222
1275
|
* Component classes
|
|
1223
1276
|
*/
|
|
@@ -1245,6 +1298,17 @@ const MgIllustratedMessage = class {
|
|
|
1245
1298
|
this.classCollection.delete('mg-c-illustrated-message--direction-horizontal');
|
|
1246
1299
|
}
|
|
1247
1300
|
}
|
|
1301
|
+
watchAlign(newValue, oldValue) {
|
|
1302
|
+
if (!aligns.includes(newValue)) {
|
|
1303
|
+
throw new Error(`<mg-illustrated-message> prop "align" must be one of: ${aligns.join(', ')}. Passed value: ${index$1.toString(newValue)}.`);
|
|
1304
|
+
}
|
|
1305
|
+
else {
|
|
1306
|
+
if (oldValue !== undefined) {
|
|
1307
|
+
this.classCollection.delete(`mg-c-illustrated-message--align-${oldValue}`);
|
|
1308
|
+
}
|
|
1309
|
+
this.classCollection.add(`mg-c-illustrated-message--align-${newValue}`);
|
|
1310
|
+
}
|
|
1311
|
+
}
|
|
1248
1312
|
/***********
|
|
1249
1313
|
* Methods *
|
|
1250
1314
|
***********/
|
|
@@ -1276,6 +1340,7 @@ const MgIllustratedMessage = class {
|
|
|
1276
1340
|
componentWillLoad() {
|
|
1277
1341
|
this.watchDirection(this.direction);
|
|
1278
1342
|
this.watchSize(this.size);
|
|
1343
|
+
this.watchAlign(this.align);
|
|
1279
1344
|
this.validateSlots();
|
|
1280
1345
|
}
|
|
1281
1346
|
/**
|
|
@@ -1283,7 +1348,7 @@ const MgIllustratedMessage = class {
|
|
|
1283
1348
|
* @returns HTML Element
|
|
1284
1349
|
*/
|
|
1285
1350
|
render() {
|
|
1286
|
-
return (index.h("div", { key: '
|
|
1351
|
+
return (index.h("div", { key: 'daffbfe09d4ccae7b2380d2dcd0f6157acf7a849', class: this.classCollection.join() }, index.h("div", { key: '503631e106a43186d1031ebfd8bb5fa9e7aaa568', class: "mg-c-illustrated-message__illustration" }, index.h("slot", { key: '6291af5e6155e38e3cfb63acf3ca774e22d385f6', name: "illustration" })), index.h("div", { key: '7c7518be3413c7e9cadb149a255505d20525b6c7', class: "mg-c-illustrated-message__slots" }, index.h("slot", { key: '742dc8a06f3f7ab06e4e67b370a750100585c384', name: "title" }), index.h("slot", { key: '3da2b7d35d1076d4cb87337f9a21e149c72f9141', name: "details" }))));
|
|
1287
1352
|
}
|
|
1288
1353
|
get element() { return index.getElement(this); }
|
|
1289
1354
|
static get watchers() { return {
|
|
@@ -1292,12 +1357,15 @@ const MgIllustratedMessage = class {
|
|
|
1292
1357
|
}],
|
|
1293
1358
|
"direction": [{
|
|
1294
1359
|
"watchDirection": 0
|
|
1360
|
+
}],
|
|
1361
|
+
"align": [{
|
|
1362
|
+
"watchAlign": 0
|
|
1295
1363
|
}]
|
|
1296
1364
|
}; }
|
|
1297
1365
|
};
|
|
1298
1366
|
MgIllustratedMessage.style = mgIllustratedMessageCss();
|
|
1299
1367
|
|
|
1300
|
-
const mgInputCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
1368
|
+
const mgInputCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){margin:0;font-size:var(--mg-b-font-size-small);text-align:start}:host .mg-c-input__input+.mg-c-input__error,:host .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--toggle) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--fieldset) ::slotted(.mg-c-input__input-group){min-width:0;flex-grow:1}:host(.mg-c-input.mg-c-input--toggle) .mg-c-input__input-container{min-width:0;flex:1}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}:host(.mg-c-input.mg-c-input--inputs-on-bottom) .mg-c-input__help-text{margin-top:var(--mg-b-size-4);margin-bottom:var(--mg-b-size-12)}:host(.mg-c-input.mg-c-input--inputs-on-bottom) .mg-c-input__error{margin-bottom:var(--mg-b-size-20)}:host(.mg-c-input.mg-c-input--inputs-on-bottom.mg-c-input--fieldset){--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-title-horizontal-space:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--inputs-on-bottom.mg-c-input--fieldset) ::slotted(*){--mg-c-input-margin-bottom:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--label-border-display) .mg-c-input__title{border-bottom:var(--mg-b-size-border) solid var(--mg-c-divider-color-background)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__title{margin-bottom:0}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input-title__text{margin-top:var(--mg-b-size-8);margin-bottom:var(--mg-b-size-8)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text,:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__error{margin-top:0;margin-bottom:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text+.mg-c-input__input,:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__error+.mg-c-input__input{margin-top:var(--mg-b-size-12)}:host(.mg-c-input.mg-c-input--has-heading) .mg-c-input__help-text+.mg-c-input__error{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__title{margin-bottom:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text,:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__error{margin-bottom:0}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text+.mg-c-input__input,:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__error+.mg-c-input__input{margin-top:var(--mg-b-size-16)}:host(.mg-c-input.mg-c-input--has-heading.mg-c-input--label-border-display) .mg-c-input__help-text+.mg-c-input__error{margin-top:var(--mg-b-size-8)}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}`;
|
|
1301
1369
|
|
|
1302
1370
|
const MgInput = class {
|
|
1303
1371
|
constructor(hostRef) {
|
|
@@ -1305,6 +1373,42 @@ const MgInput = class {
|
|
|
1305
1373
|
this.slotLabel = 'label';
|
|
1306
1374
|
this.slotError = 'error';
|
|
1307
1375
|
this.slotHelpText = 'help-text';
|
|
1376
|
+
// Block-level elements that cannot be nested inside a <p>.
|
|
1377
|
+
// helpText/errorMessage are injected via innerHTML and may contain HTML: when block content
|
|
1378
|
+
// is detected we fall back to <div> to keep the markup valid (RGAA 8.2), otherwise we use a
|
|
1379
|
+
// semantic <p> for the (textual) message (RGAA 8.9).
|
|
1380
|
+
this.blockLevelTags = new Set([
|
|
1381
|
+
'address',
|
|
1382
|
+
'article',
|
|
1383
|
+
'aside',
|
|
1384
|
+
'blockquote',
|
|
1385
|
+
'details',
|
|
1386
|
+
'dialog',
|
|
1387
|
+
'div',
|
|
1388
|
+
'dl',
|
|
1389
|
+
'fieldset',
|
|
1390
|
+
'figure',
|
|
1391
|
+
'figcaption',
|
|
1392
|
+
'footer',
|
|
1393
|
+
'form',
|
|
1394
|
+
'h1',
|
|
1395
|
+
'h2',
|
|
1396
|
+
'h3',
|
|
1397
|
+
'h4',
|
|
1398
|
+
'h5',
|
|
1399
|
+
'h6',
|
|
1400
|
+
'header',
|
|
1401
|
+
'hr',
|
|
1402
|
+
'main',
|
|
1403
|
+
'nav',
|
|
1404
|
+
'ol',
|
|
1405
|
+
'p',
|
|
1406
|
+
'pre',
|
|
1407
|
+
'section',
|
|
1408
|
+
'table',
|
|
1409
|
+
'ul',
|
|
1410
|
+
]);
|
|
1411
|
+
this.openingTagRegExp = /<([a-z1-6]+)[\s/>]/gi;
|
|
1308
1412
|
// style
|
|
1309
1413
|
this.classInput = 'mg-c-input';
|
|
1310
1414
|
this.classHasError = 'mg-c-input--has-error';
|
|
@@ -1377,7 +1481,7 @@ const MgInput = class {
|
|
|
1377
1481
|
* Get tooltip node
|
|
1378
1482
|
* @returns mg-tooltip
|
|
1379
1483
|
*/
|
|
1380
|
-
this.renderTooltip = () => (index.h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, index.h("mg-icon", { icon: "info-circle" })));
|
|
1484
|
+
this.renderTooltip = () => (index.h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, index.h("mg-icon", { icon: "info-circle-outline" })));
|
|
1381
1485
|
/**
|
|
1382
1486
|
* Get input container element
|
|
1383
1487
|
* @returns ordered elements
|
|
@@ -1387,7 +1491,10 @@ const MgInput = class {
|
|
|
1387
1491
|
this.helptextMessageSlotElement && (index.h("div", { class: "mg-c-input__help-text" }, index.h("slot", { name: this.slotHelpText }))),
|
|
1388
1492
|
!this.isDisabled && this.errorMessage && (index.h("div", { class: "mg-c-input__error", "aria-live": "assertive" }, index.h("slot", { name: this.slotError }))),
|
|
1389
1493
|
];
|
|
1390
|
-
const inputSlot = (index.h("div", { class: "mg-c-input__input" }, index.h("slot", null), this.tooltip &&
|
|
1494
|
+
const inputSlot = (index.h("div", { class: "mg-c-input__input" }, index.h("slot", null), this.tooltip &&
|
|
1495
|
+
!this.labelOnTop &&
|
|
1496
|
+
(this.tooltipPosition === 'input' || this.labelHide) &&
|
|
1497
|
+
this.renderTooltip()));
|
|
1391
1498
|
if (this.inputsOnBottom) {
|
|
1392
1499
|
return [...elements, inputSlot];
|
|
1393
1500
|
}
|
|
@@ -1484,7 +1591,7 @@ const MgInput = class {
|
|
|
1484
1591
|
this.ariaDescribedbyIDs = this.ariaDescribedbyIDs.split(' ');
|
|
1485
1592
|
return;
|
|
1486
1593
|
}
|
|
1487
|
-
else if (!(Array.isArray(this.ariaDescribedbyIDs) && this.ariaDescribedbyIDs.every(entry => typeof entry === 'string'))) {
|
|
1594
|
+
else if (!(Array.isArray(this.ariaDescribedbyIDs) && this.ariaDescribedbyIDs.every((entry) => typeof entry === 'string'))) {
|
|
1488
1595
|
this.ariaDescribedbyIDs = [];
|
|
1489
1596
|
return;
|
|
1490
1597
|
}
|
|
@@ -1517,7 +1624,6 @@ const MgInput = class {
|
|
|
1517
1624
|
/**
|
|
1518
1625
|
* Component classes
|
|
1519
1626
|
*/
|
|
1520
|
-
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1521
1627
|
watchClass() {
|
|
1522
1628
|
if (!this.element.classList.contains(this.classInput)) {
|
|
1523
1629
|
this.element.classList.add(this.classInput);
|
|
@@ -1530,7 +1636,6 @@ const MgInput = class {
|
|
|
1530
1636
|
/**
|
|
1531
1637
|
* Trigger label update
|
|
1532
1638
|
*/
|
|
1533
|
-
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1534
1639
|
watchLabel() {
|
|
1535
1640
|
if (!index$1.isValidString(this.label)) {
|
|
1536
1641
|
throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${index$1.toString(this.label)}.`);
|
|
@@ -1573,16 +1678,46 @@ const MgInput = class {
|
|
|
1573
1678
|
// update aria-describedby
|
|
1574
1679
|
this.watchAriaDescribedbyIDs();
|
|
1575
1680
|
}
|
|
1681
|
+
/**
|
|
1682
|
+
* Get the semantic tag name for a slotted message.
|
|
1683
|
+
* Phrasing (textual/inline) content uses <p> (RGAA 8.9); block-level content falls back to
|
|
1684
|
+
* <div> to avoid invalid nesting such as <p><p>…</p></p> (RGAA 8.2).
|
|
1685
|
+
* @param content - the HTML content that will be injected in the slot
|
|
1686
|
+
* @returns the tag name to use
|
|
1687
|
+
*/
|
|
1688
|
+
getSlotMessageTagName(content) {
|
|
1689
|
+
for (const [, tagName] of content.matchAll(this.openingTagRegExp)) {
|
|
1690
|
+
if (this.blockLevelTags.has(tagName.toLowerCase()))
|
|
1691
|
+
return 'div';
|
|
1692
|
+
}
|
|
1693
|
+
return 'p';
|
|
1694
|
+
}
|
|
1695
|
+
/**
|
|
1696
|
+
* Get the existing slotted element or (re)create it with the expected tag.
|
|
1697
|
+
* The element is recreated when its current tag no longer matches the expected one
|
|
1698
|
+
* (e.g. the content switched from text to block HTML), keeping the slot id and position.
|
|
1699
|
+
* @param slot - the slot name
|
|
1700
|
+
* @param tagName - the expected tag name
|
|
1701
|
+
* @returns the slotted element
|
|
1702
|
+
*/
|
|
1703
|
+
getSlotMessageElement(slot, tagName) {
|
|
1704
|
+
let slotElement = this.element.querySelector(`[slot=${slot}]`);
|
|
1705
|
+
if (slotElement !== null && slotElement.tagName.toLowerCase() !== tagName) {
|
|
1706
|
+
slotElement.remove();
|
|
1707
|
+
slotElement = null;
|
|
1708
|
+
}
|
|
1709
|
+
if (slotElement === null) {
|
|
1710
|
+
slotElement = document.createElement(tagName);
|
|
1711
|
+
slotElement.setAttribute('slot', slot);
|
|
1712
|
+
this.element.appendChild(slotElement);
|
|
1713
|
+
}
|
|
1714
|
+
return slotElement;
|
|
1715
|
+
}
|
|
1576
1716
|
/**
|
|
1577
1717
|
* Render error message
|
|
1578
1718
|
*/
|
|
1579
1719
|
renderErrorMessage() {
|
|
1580
|
-
this.errorMessageSlotElement = this.
|
|
1581
|
-
if (this.errorMessageSlotElement === null) {
|
|
1582
|
-
this.errorMessageSlotElement = document.createElement('div');
|
|
1583
|
-
this.errorMessageSlotElement.setAttribute('slot', this.slotError);
|
|
1584
|
-
this.element.appendChild(this.errorMessageSlotElement);
|
|
1585
|
-
}
|
|
1720
|
+
this.errorMessageSlotElement = this.getSlotMessageElement(this.slotError, this.getSlotMessageTagName(this.errorMessage));
|
|
1586
1721
|
this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);
|
|
1587
1722
|
this.errorMessageSlotElement.innerHTML = this.errorMessage;
|
|
1588
1723
|
}
|
|
@@ -1590,12 +1725,7 @@ const MgInput = class {
|
|
|
1590
1725
|
* Render help text message
|
|
1591
1726
|
*/
|
|
1592
1727
|
renderHelpText() {
|
|
1593
|
-
this.helptextMessageSlotElement = this.
|
|
1594
|
-
if (this.helptextMessageSlotElement === null) {
|
|
1595
|
-
this.helptextMessageSlotElement = document.createElement('div');
|
|
1596
|
-
this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);
|
|
1597
|
-
this.element.appendChild(this.helptextMessageSlotElement);
|
|
1598
|
-
}
|
|
1728
|
+
this.helptextMessageSlotElement = this.getSlotMessageElement(this.slotHelpText, this.getSlotMessageTagName(this.helpText));
|
|
1599
1729
|
this.helptextMessageSlotElement.setAttribute('id', this.helpTextId);
|
|
1600
1730
|
this.helptextMessageSlotElement.innerHTML = this.helpText;
|
|
1601
1731
|
}
|
|
@@ -1634,7 +1764,10 @@ const MgInput = class {
|
|
|
1634
1764
|
*/
|
|
1635
1765
|
render() {
|
|
1636
1766
|
const isGroup = this.isFieldset && !this.isReadonly;
|
|
1637
|
-
return (index.h(index.Host, { key: '
|
|
1767
|
+
return (index.h(index.Host, { key: '5a321d04d50aa63f86237a1dd72d2ac508b8d4cf', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, index.h("div", { key: '5d247500c19370d6ee1de79e14ef0c016fe38f7a', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, index.h("slot", { key: 'cf56e42a0b56ab855a1b6089fbbd573ef5676b3d', name: this.slotLabel }), this.tooltip &&
|
|
1768
|
+
(this.tooltipPosition === 'label' || this.labelOnTop) &&
|
|
1769
|
+
!this.labelHide &&
|
|
1770
|
+
this.renderTooltip()), index.h("div", { key: 'dfc9112bb933c1c536bdb4e9ef462e0f921a0b82', class: "mg-c-input__input-container" }, this.inputContainerElements())));
|
|
1638
1771
|
}
|
|
1639
1772
|
get element() { return index.getElement(this); }
|
|
1640
1773
|
static get watchers() { return {
|
|
@@ -1715,9 +1848,12 @@ const SectionKind = {
|
|
|
1715
1848
|
* @param props - MgInputCheckboxList Interface Props
|
|
1716
1849
|
* @returns input template
|
|
1717
1850
|
*/
|
|
1718
|
-
const MgInputCheckboxList = (props) => (index.h("div", { class: "mg-c-input__input-group-container", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map(input => {
|
|
1851
|
+
const MgInputCheckboxList = (props) => (index.h("div", { class: "mg-c-input__input-group-container", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map((input) => {
|
|
1719
1852
|
var _a, _b;
|
|
1720
|
-
return (index.h("div", { key: input._id, class: {
|
|
1853
|
+
return (index.h("div", { key: input._id, class: {
|
|
1854
|
+
'mg-c-input__input-group': true,
|
|
1855
|
+
'mg-c-input__input-group--disabled': props.disabled || input.disabled,
|
|
1856
|
+
} }, index.h("input", { type: "checkbox", id: input._id, name: props.name, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a.toString(), checked: Boolean(input.value), required: input.required, "aria-invalid": ((_b = props.invalid) === null || _b === void 0 ? void 0 : _b.toString()) || 'false', disabled: props.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }), index.h("label", { htmlFor: input._id }, input.title)));
|
|
1721
1857
|
})));
|
|
1722
1858
|
|
|
1723
1859
|
/**
|
|
@@ -1763,10 +1899,14 @@ const MgInputCheckboxPaginated = (props) => {
|
|
|
1763
1899
|
};
|
|
1764
1900
|
return (index.h("div", { class: "mg-input-checkbox-paginated mg-c-input__tab", slot: `tab_content-${props.key + 1}` },
|
|
1765
1901
|
// Mass action depends on all checkboxes list, not only displayed items
|
|
1766
|
-
typeof props.handleMassAction === 'function' &&
|
|
1902
|
+
typeof props.handleMassAction === 'function' &&
|
|
1903
|
+
props.checkboxes.length > 0 &&
|
|
1904
|
+
props.checkboxes.some((checkbox) => checkbox.disabled !== true) && (index.h("mg-tooltip", { slot: "header-action", class: "mg-c-input__tabs-action", message: props.messages.tooltip }, index.h("mg-button", { variant: "link", onClick: props.handleMassAction }, props.messages.action))), index.h("div", { class: "mg-c-input__tabs-content" }, index.h("p", { id: tabId, class: { 'mg-c-input__popover-info': true, 'mg-u-visually-hidden': items.length !== 0 }, "aria-live": items.length !== 0 ? 'polite' : undefined }, items.length === 0
|
|
1905
|
+
? props.messages.noValue
|
|
1906
|
+
: props.messages.values.replace('{count}', items.length.toString())), items.length > 0 && (index.h(MgInputCheckboxList, { checkboxes: items, labelledby: tabId, id: listId, disabled: props.disabled, name: props.name, invalid: props.invalid })), hasNext(props.checkboxes, props.limit) && (index.h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: handleLoadMoreClick, "aria-controls": listId }, index.h("mg-icon", { icon: "chevron-down" }), props.messages.showMore)))));
|
|
1767
1907
|
};
|
|
1768
1908
|
|
|
1769
|
-
const mgInputCheckboxCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
1909
|
+
const mgInputCheckboxCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-group-container{padding:var(--mg-b-size-4) var(--mg-b-size-8);margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container{display:flex;width:unset;flex:unset;flex-wrap:wrap;column-gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container-list{display:flex;flex-flow:row wrap;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tab{display:block;min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs{min-height:0;flex-shrink:1}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-action{padding-top:var(--mg-b-size-16);padding-bottom:var(--mg-b-size-12)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-content{height:calc(24*var(--mg-b-size-8) - 2*var(--mg-b-size-8));overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-value{display:inline-flex;min-width:var(--mg-b-size-min-height);min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-radius:var(--mg-b-size-4);background-color:var(--mg-b-color-neutral-20);font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi b{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container b{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--with-values .mg-c-input__input-container{gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content{display:flex;width:calc(var(--mg-b-size-floating-element-max-width) - var(--mg-b-size-16));flex-direction:column;gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content .mg-c-input__tabs-content{min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__section-header-tootlip){margin-left:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-c-card-spacing:var(--mg-b-size-8)}.mg-c-input.mg-c-input--readonly ul{display:flex;min-height:var(--mg-b-font-size);flex-flow:column wrap;padding:0;margin:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) 0 0;list-style:none;row-gap:var(--mg-b-size-8)}`;
|
|
1770
1910
|
|
|
1771
1911
|
/**
|
|
1772
1912
|
* type ICheckboxItem validation function
|
|
@@ -1774,7 +1914,10 @@ const mgInputCheckboxCss = () => `.mg-c-input__readonly-value{min-height:var(--m
|
|
|
1774
1914
|
* @returns match item type
|
|
1775
1915
|
*/
|
|
1776
1916
|
const isCheckboxItems = (items) => Array.isArray(items) &&
|
|
1777
|
-
items.every(item => typeof item === 'object' &&
|
|
1917
|
+
items.every((item) => typeof item === 'object' &&
|
|
1918
|
+
typeof item.title === 'string' &&
|
|
1919
|
+
(item.value === null || typeof item.value === 'boolean') &&
|
|
1920
|
+
item.value !== undefined);
|
|
1778
1921
|
const MgInputCheckbox = class {
|
|
1779
1922
|
constructor(hostRef) {
|
|
1780
1923
|
index.registerInstance(this, hostRef);
|
|
@@ -1867,7 +2010,7 @@ const MgInputCheckbox = class {
|
|
|
1867
2010
|
* @param event - input event
|
|
1868
2011
|
*/
|
|
1869
2012
|
this.handleInput = (event) => {
|
|
1870
|
-
this.updateCheckboxItems('value', Boolean(event.target.checked), item => item._id === event.target.id);
|
|
2013
|
+
this.updateCheckboxItems('value', Boolean(event.target.checked), (item) => item._id === event.target.id);
|
|
1871
2014
|
this.updateValues();
|
|
1872
2015
|
this.checkValidity();
|
|
1873
2016
|
this.setErrorMessage();
|
|
@@ -1886,11 +2029,12 @@ const MgInputCheckbox = class {
|
|
|
1886
2029
|
return;
|
|
1887
2030
|
}
|
|
1888
2031
|
const enableInputs = Array.from(this.element.shadowRoot.querySelectorAll('input'))
|
|
1889
|
-
.filter(input => !input.hasAttribute('disabled'))
|
|
2032
|
+
.filter((input) => !input.hasAttribute('disabled'))
|
|
1890
2033
|
.map(({ id }) => id);
|
|
1891
|
-
const originInputIndex = enableInputs.findIndex(id => id === event.target.id);
|
|
2034
|
+
const originInputIndex = enableInputs.findIndex((id) => id === event.target.id);
|
|
1892
2035
|
// close popover when tab trigger focus outside its DOM
|
|
1893
|
-
if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) ||
|
|
2036
|
+
if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) ||
|
|
2037
|
+
(originInputIndex === 0 && event.shiftKey && this.searchInput === undefined))
|
|
1894
2038
|
this.mgPopover.display = false;
|
|
1895
2039
|
}
|
|
1896
2040
|
};
|
|
@@ -1936,13 +2080,13 @@ const MgInputCheckbox = class {
|
|
|
1936
2080
|
this.checkValidity();
|
|
1937
2081
|
}
|
|
1938
2082
|
// init active tab to selected if some values are checked
|
|
1939
|
-
this.activeTab = this.checkboxItems.some(items => items.value) ? 2 : 1;
|
|
2083
|
+
this.activeTab = this.checkboxItems.some((items) => items.value) ? 2 : 1;
|
|
1940
2084
|
};
|
|
1941
2085
|
/**
|
|
1942
2086
|
* Update values
|
|
1943
2087
|
*/
|
|
1944
2088
|
this.updateValues = () => {
|
|
1945
|
-
this.value = this.checkboxItems.map(o => {
|
|
2089
|
+
this.value = this.checkboxItems.map((o) => {
|
|
1946
2090
|
delete o._handleBlur;
|
|
1947
2091
|
delete o._handleInput;
|
|
1948
2092
|
delete o._handleKeydown;
|
|
@@ -1959,7 +2103,7 @@ const MgInputCheckbox = class {
|
|
|
1959
2103
|
* Method to update searchResults
|
|
1960
2104
|
*/
|
|
1961
2105
|
this.updateSearchResults = () => {
|
|
1962
|
-
this.searchResults = this.checkboxItems.filter(item => index$1.cleanString(item.title).includes(index$1.cleanString(this.searchValue)));
|
|
2106
|
+
this.searchResults = this.checkboxItems.filter((item) => index$1.cleanString(item.title).includes(index$1.cleanString(this.searchValue)));
|
|
1963
2107
|
};
|
|
1964
2108
|
/**
|
|
1965
2109
|
* Method to validate if one of inputs value is checked id required
|
|
@@ -2031,7 +2175,7 @@ const MgInputCheckbox = class {
|
|
|
2031
2175
|
* Manage items to display depending on the search state
|
|
2032
2176
|
* @returns items to display
|
|
2033
2177
|
*/
|
|
2034
|
-
this.getDisplayItems = () =>
|
|
2178
|
+
this.getDisplayItems = () => this.searchValue.length > 0 ? this.searchResults : this.checkboxItems;
|
|
2035
2179
|
/**
|
|
2036
2180
|
* get list of selected checkboxItems
|
|
2037
2181
|
* @returns selected checkboxItems
|
|
@@ -2056,7 +2200,7 @@ const MgInputCheckbox = class {
|
|
|
2056
2200
|
* @returns The rendered readonly value.
|
|
2057
2201
|
*/
|
|
2058
2202
|
this.renderReadonly = (readonlyValue) => {
|
|
2059
|
-
return this.inputVerticalList ? (index.h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map(value => (index.h("li", { key: value }, index.h("b", null, value)))))) : (index.h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
|
|
2203
|
+
return this.inputVerticalList ? (index.h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map((value) => (index.h("li", { key: value }, index.h("b", null, value)))))) : (index.h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
|
|
2060
2204
|
};
|
|
2061
2205
|
/**
|
|
2062
2206
|
* Renders the MgInputCheckboxList component.
|
|
@@ -2167,7 +2311,7 @@ const MgInputCheckbox = class {
|
|
|
2167
2311
|
// - Async operations are completed
|
|
2168
2312
|
// - No timing issues with Stencil's render cycle
|
|
2169
2313
|
// - Keep everything in sync both inside and outside the component
|
|
2170
|
-
return new Promise(resolve => {
|
|
2314
|
+
return new Promise((resolve) => {
|
|
2171
2315
|
requestAnimationFrame(() => {
|
|
2172
2316
|
this.checkValidity();
|
|
2173
2317
|
this.setErrorMessage();
|
|
@@ -2207,14 +2351,14 @@ const MgInputCheckbox = class {
|
|
|
2207
2351
|
*/
|
|
2208
2352
|
async reset() {
|
|
2209
2353
|
if (!this.readonly) {
|
|
2210
|
-
this.value = this.value.map(item => (Object.assign(Object.assign({}, item), { value: false })));
|
|
2354
|
+
this.value = this.value.map((item) => (Object.assign(Object.assign({}, item), { value: false })));
|
|
2211
2355
|
// Use `Promise` as requested for stencil method
|
|
2212
2356
|
// Use `requestAnimationFrame` to ensure:
|
|
2213
2357
|
// - DOM is fully updated before validation
|
|
2214
2358
|
// - Async operations are completed
|
|
2215
2359
|
// - No timing issues with Stencil's render cycle
|
|
2216
2360
|
// - Keep everything in sync both inside and outside the component
|
|
2217
|
-
return new Promise(resolve => {
|
|
2361
|
+
return new Promise((resolve) => {
|
|
2218
2362
|
requestAnimationFrame(() => {
|
|
2219
2363
|
// unlock validity check by reseting customErrorMessage
|
|
2220
2364
|
this.customErrorMessage = { lock: false };
|
|
@@ -2247,7 +2391,7 @@ const MgInputCheckbox = class {
|
|
|
2247
2391
|
* @param condition - condtion to applu change on item
|
|
2248
2392
|
*/
|
|
2249
2393
|
updateCheckboxItems(key, newValue, condition) {
|
|
2250
|
-
this.checkboxItems = this.checkboxItems.map(item => {
|
|
2394
|
+
this.checkboxItems = this.checkboxItems.map((item) => {
|
|
2251
2395
|
if ((typeof condition === 'function' && condition(item)) || condition === undefined)
|
|
2252
2396
|
item[key] = newValue;
|
|
2253
2397
|
return item;
|
|
@@ -2300,7 +2444,7 @@ const MgInputCheckbox = class {
|
|
|
2300
2444
|
const handleMassAction = (kind) => () => {
|
|
2301
2445
|
const displayItems = this.getDisplayItems();
|
|
2302
2446
|
// update only displayed items
|
|
2303
|
-
displayItems.forEach(item => {
|
|
2447
|
+
displayItems.forEach((item) => {
|
|
2304
2448
|
if (!item.disabled) {
|
|
2305
2449
|
item.value = kind !== SectionKind.SELECTED;
|
|
2306
2450
|
}
|
|
@@ -2317,9 +2461,13 @@ const MgInputCheckbox = class {
|
|
|
2317
2461
|
];
|
|
2318
2462
|
return (index.h("mg-tabs", { identifier: `${this.identifier}-tabs`, class: "mg-c-input__tabs", label: this.messages.input.checkbox.sections.label, items: sections.map((section, key) => ({
|
|
2319
2463
|
label: section.messages.title,
|
|
2320
|
-
badge: {
|
|
2464
|
+
badge: {
|
|
2465
|
+
value: section.checkboxes.length,
|
|
2466
|
+
label: this.messages.input.checkbox.sections.badge.label,
|
|
2467
|
+
role: 'information',
|
|
2468
|
+
},
|
|
2321
2469
|
status: key + 1 === this.activeTab ? Status.ACTIVE : Status.VISIBLE,
|
|
2322
|
-
})), activeTab: this.activeTab, "onActive-tab-change": this.handleActiveTabChange }, sections.map(section => {
|
|
2470
|
+
})), activeTab: this.activeTab, "onActive-tab-change": this.handleActiveTabChange }, sections.map((section) => {
|
|
2323
2471
|
var _a;
|
|
2324
2472
|
return (index.h(MgInputCheckboxPaginated, Object.assign({}, section, { limit: (_a = this.paginatedLimits[section.key]) !== null && _a !== void 0 ? _a : this.paginatedStep, handleLoadMore: () => this.handlePaginatedLoadMore(section.key) })));
|
|
2325
2473
|
})));
|
|
@@ -2337,12 +2485,12 @@ const MgInputCheckbox = class {
|
|
|
2337
2485
|
checkboxes: this.getDisplayItems(),
|
|
2338
2486
|
};
|
|
2339
2487
|
const checkboxesPaginatedSearchProps = Object.assign(Object.assign({}, props), { messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.search), { showMore: this.messages.input.showMore }), key: SectionKind.SEARCH, limit: (_a = this.paginatedLimits[SectionKind.SEARCH]) !== null && _a !== void 0 ? _a : this.paginatedStep, handleLoadMore: () => this.handlePaginatedLoadMore(SectionKind.SEARCH) });
|
|
2340
|
-
return (index.h("div", { class: "mg-c-input__input-container" }, index.h("mg-popover", {
|
|
2488
|
+
return (index.h("div", { class: "mg-c-input__input-container" }, index.h("mg-popover", { identifier: this.getMgPopoverIdentifier(), display: this.hasOpenedPopover, "onDisplay-change": this.handleMgPopoverDisplayChange, "data-fallback-placement": "bottom-end", ref: (el) => {
|
|
2341
2489
|
if (el !== null)
|
|
2342
2490
|
this.mgPopover = el;
|
|
2343
2491
|
} }, index.h("mg-button", { variant: "secondary", "aria-describedby": `${this.identifier}-title` }, index.h("mg-icon", { icon: "list" }), this.getSelectValuesButtonMessage()), index.h("div", { slot: "content", class: "mg-c-input__content" }, this.displaySearchInput ? ([
|
|
2344
2492
|
index.h("mg-input-text", { key: "input-search", identifier: `${this.identifier}-input-search`, icon: "magnifying-glass", type: "search", placeholder: this.messages.input.checkbox.sections.search.label, label: this.messages.input.checkbox.sections.search.label, mgWidth: "full", value: this.searchValue, labelHide: true, characterLeftHide: true, name: "q", "onValue-change": this.handleSearchChange }),
|
|
2345
|
-
this.searchValue.length > 0 ? index.h(MgInputCheckboxPaginated, Object.assign({}, checkboxesPaginatedSearchProps)) : this.renderCheckboxTabs(props),
|
|
2493
|
+
this.searchValue.length > 0 ? (index.h(MgInputCheckboxPaginated, Object.assign({}, checkboxesPaginatedSearchProps))) : (this.renderCheckboxTabs(props)),
|
|
2346
2494
|
]) : (index.h(MgInputCheckboxList, Object.assign({}, props, { id: this.checkboxesId, name: this.name, invalid: this.invalid }))))), this.displaySelectedValues ? (selectedValuesNb > 0 && (index.h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (index.h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (index.h("b", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
|
|
2347
2495
|
}
|
|
2348
2496
|
/**
|
|
@@ -2361,7 +2509,7 @@ const MgInputCheckbox = class {
|
|
|
2361
2509
|
else {
|
|
2362
2510
|
inputContent = this.renderCheckboxMulti();
|
|
2363
2511
|
}
|
|
2364
|
-
return (index.h("mg-input", { key: '
|
|
2512
|
+
return (index.h("mg-input", { key: '8e403fd79ca8a9bb2db5545e946a3763eb156551', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
|
|
2365
2513
|
}
|
|
2366
2514
|
get element() { return index.getElement(this); }
|
|
2367
2515
|
static get watchers() { return {
|
|
@@ -2405,7 +2553,7 @@ MgInputCheckbox.style = mgInputCheckboxCss();
|
|
|
2405
2553
|
|
|
2406
2554
|
const DEFAULT_MAX_DATE = '9999-12-31';
|
|
2407
2555
|
|
|
2408
|
-
const mgInputDateCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset
|
|
2556
|
+
const mgInputDateCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}`;
|
|
2409
2557
|
|
|
2410
2558
|
const MgInputDate = class {
|
|
2411
2559
|
constructor(hostRef) {
|
|
@@ -2477,7 +2625,9 @@ const MgInputDate = class {
|
|
|
2477
2625
|
text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText.expectedFormat));
|
|
2478
2626
|
}
|
|
2479
2627
|
// Replace pattern and date variables
|
|
2480
|
-
return text
|
|
2628
|
+
return text
|
|
2629
|
+
.replace('{pattern}', this.renderPattern())
|
|
2630
|
+
.replace('{date}', index$2.localeDate(index$1.dateToString(new Date('2025-12-24')), this.systemLocale));
|
|
2481
2631
|
};
|
|
2482
2632
|
/**
|
|
2483
2633
|
* Handle input event
|
|
@@ -2519,7 +2669,9 @@ const MgInputDate = class {
|
|
|
2519
2669
|
* Check if input is valid
|
|
2520
2670
|
*/
|
|
2521
2671
|
this.checkValidity = () => {
|
|
2522
|
-
this.setValidity(this.readonly ||
|
|
2672
|
+
this.setValidity(this.readonly ||
|
|
2673
|
+
this.disabled ||
|
|
2674
|
+
(this.input.checkValidity() && (this.value === null || this.isValidPattern(this.value))));
|
|
2523
2675
|
};
|
|
2524
2676
|
/**
|
|
2525
2677
|
* get input error code
|
|
@@ -2537,7 +2689,9 @@ const MgInputDate = class {
|
|
|
2537
2689
|
error = 'required';
|
|
2538
2690
|
}
|
|
2539
2691
|
// min & max
|
|
2540
|
-
else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) &&
|
|
2692
|
+
else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) &&
|
|
2693
|
+
((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
2694
|
+
this.max !== DEFAULT_MAX_DATE) {
|
|
2541
2695
|
error = 'minMax';
|
|
2542
2696
|
}
|
|
2543
2697
|
// min
|
|
@@ -2657,7 +2811,7 @@ const MgInputDate = class {
|
|
|
2657
2811
|
// - Async operations are completed
|
|
2658
2812
|
// - No timing issues with Stencil's render cycle
|
|
2659
2813
|
// - Keep everything in sync both inside and outside the component
|
|
2660
|
-
return new Promise(resolve => {
|
|
2814
|
+
return new Promise((resolve) => {
|
|
2661
2815
|
requestAnimationFrame(() => {
|
|
2662
2816
|
this.checkValidity();
|
|
2663
2817
|
this.setErrorMessage();
|
|
@@ -2704,7 +2858,7 @@ const MgInputDate = class {
|
|
|
2704
2858
|
// - Async operations are completed
|
|
2705
2859
|
// - No timing issues with Stencil's render cycle
|
|
2706
2860
|
// - Keep everything in sync both inside and outside the component
|
|
2707
|
-
return new Promise(resolve => {
|
|
2861
|
+
return new Promise((resolve) => {
|
|
2708
2862
|
requestAnimationFrame(() => {
|
|
2709
2863
|
// unlock validity check by reseting customErrorMessage
|
|
2710
2864
|
this.customErrorMessage = { lock: false };
|
|
@@ -2764,7 +2918,7 @@ const MgInputDate = class {
|
|
|
2764
2918
|
* @returns HTML Element
|
|
2765
2919
|
*/
|
|
2766
2920
|
render() {
|
|
2767
|
-
return (index.h("mg-input", { key: '
|
|
2921
|
+
return (index.h("mg-input", { key: 'c13dd54974bd7c8381bcefbe847fe79f2270506c', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && index.h("b", { class: "mg-c-input__readonly-value" }, index$2.localeDate(this.value, this.locale))) : (index.h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
|
|
2768
2922
|
if (el !== null)
|
|
2769
2923
|
this.input = el;
|
|
2770
2924
|
} }))));
|
|
@@ -2807,7 +2961,7 @@ MgInputDate.style = mgInputDateCss();
|
|
|
2807
2961
|
const types = ['decimal', 'integer'];
|
|
2808
2962
|
const formats = ['none', 'number', 'currency', 'percent', 'unit'];
|
|
2809
2963
|
|
|
2810
|
-
const mgInputNumericCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset
|
|
2964
|
+
const mgInputNumericCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input .mg-c-input__box{width:auto;text-align:var(--mg-c-input-text-align, right)}`;
|
|
2811
2965
|
|
|
2812
2966
|
const MgInputNumeric = class {
|
|
2813
2967
|
constructor(hostRef) {
|
|
@@ -2941,7 +3095,9 @@ const MgInputNumeric = class {
|
|
|
2941
3095
|
else {
|
|
2942
3096
|
const formattedMin = this.formatErrorValue(this.min);
|
|
2943
3097
|
const formattedMax = this.formatErrorValue(this.max);
|
|
2944
|
-
this.errorMessage = this.messages.input.numeric.error[inputError]
|
|
3098
|
+
this.errorMessage = this.messages.input.numeric.error[inputError]
|
|
3099
|
+
.replace('{min}', formattedMin)
|
|
3100
|
+
.replace('{max}', formattedMax);
|
|
2945
3101
|
}
|
|
2946
3102
|
}
|
|
2947
3103
|
};
|
|
@@ -2950,7 +3106,7 @@ const MgInputNumeric = class {
|
|
|
2950
3106
|
* @returns error code
|
|
2951
3107
|
*/
|
|
2952
3108
|
this.getInputError = () => {
|
|
2953
|
-
const hasNotEmptyValues = (toControl) => !toControl.some(value => [null, undefined].includes(value));
|
|
3109
|
+
const hasNotEmptyValues = (toControl) => !toControl.some((value) => [null, undefined].includes(value));
|
|
2954
3110
|
// required
|
|
2955
3111
|
if (!this.input.checkValidity() && this.input.validity.valueMissing) {
|
|
2956
3112
|
return 'required';
|
|
@@ -2964,7 +3120,8 @@ const MgInputNumeric = class {
|
|
|
2964
3120
|
return 'max';
|
|
2965
3121
|
}
|
|
2966
3122
|
// both min and max values are set
|
|
2967
|
-
if (hasNotEmptyValues([this.min, this.max, this.numericValue]) &&
|
|
3123
|
+
if (hasNotEmptyValues([this.min, this.max, this.numericValue]) &&
|
|
3124
|
+
(this.numericValue < this.min || this.numericValue > this.max)) {
|
|
2968
3125
|
return 'minMax';
|
|
2969
3126
|
}
|
|
2970
3127
|
return null;
|
|
@@ -3079,7 +3236,7 @@ const MgInputNumeric = class {
|
|
|
3079
3236
|
}
|
|
3080
3237
|
watchMgWidth(newValue) {
|
|
3081
3238
|
// reset width class
|
|
3082
|
-
mgInput_conf.widths.forEach(width => {
|
|
3239
|
+
mgInput_conf.widths.forEach((width) => {
|
|
3083
3240
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
3084
3241
|
});
|
|
3085
3242
|
// apply new width
|
|
@@ -3123,7 +3280,7 @@ const MgInputNumeric = class {
|
|
|
3123
3280
|
// - Async operations are completed
|
|
3124
3281
|
// - No timing issues with Stencil's render cycle
|
|
3125
3282
|
// - Keep everything in sync both inside and outside the component
|
|
3126
|
-
return new Promise(resolve => {
|
|
3283
|
+
return new Promise((resolve) => {
|
|
3127
3284
|
requestAnimationFrame(() => {
|
|
3128
3285
|
this.checkValidity();
|
|
3129
3286
|
this.setErrorMessage();
|
|
@@ -3170,7 +3327,7 @@ const MgInputNumeric = class {
|
|
|
3170
3327
|
// - Async operations are completed
|
|
3171
3328
|
// - No timing issues with Stencil's render cycle
|
|
3172
3329
|
// - Keep everything in sync both inside and outside the component
|
|
3173
|
-
return new Promise(resolve => {
|
|
3330
|
+
return new Promise((resolve) => {
|
|
3174
3331
|
requestAnimationFrame(() => {
|
|
3175
3332
|
// unlock validity check by reseting customErrorMessage
|
|
3176
3333
|
this.customErrorMessage = { lock: false };
|
|
@@ -3205,7 +3362,10 @@ const MgInputNumeric = class {
|
|
|
3205
3362
|
* @returns Returns true if the value is valid, otherwise false.
|
|
3206
3363
|
*/
|
|
3207
3364
|
isValidValue(value, regex, integer, decimal) {
|
|
3208
|
-
return (['', '-'].includes(value) ||
|
|
3365
|
+
return (['', '-'].includes(value) ||
|
|
3366
|
+
(regex.exec(value) !== null &&
|
|
3367
|
+
integer.length <= this.integerLength &&
|
|
3368
|
+
decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength)));
|
|
3209
3369
|
}
|
|
3210
3370
|
/**
|
|
3211
3371
|
* Updates the component values based on the validated input value.
|
|
@@ -3216,7 +3376,10 @@ const MgInputNumeric = class {
|
|
|
3216
3376
|
if (this.input !== undefined) {
|
|
3217
3377
|
this.input.value = this.value;
|
|
3218
3378
|
}
|
|
3219
|
-
this.numericValue =
|
|
3379
|
+
this.numericValue =
|
|
3380
|
+
!['', null].includes(this.value) && !isNaN(parseFloat(this.value))
|
|
3381
|
+
? parseFloat(this.value.replace(',', '.'))
|
|
3382
|
+
: null;
|
|
3220
3383
|
if (newValue === null || (newValue === this.storedValue && !Object.is(this.numericValue, -0))) {
|
|
3221
3384
|
this.valueChange.emit(this.numericValue);
|
|
3222
3385
|
}
|
|
@@ -3266,7 +3429,7 @@ const MgInputNumeric = class {
|
|
|
3266
3429
|
* @returns HTML Element
|
|
3267
3430
|
*/
|
|
3268
3431
|
render() {
|
|
3269
|
-
return (index.h("mg-input", { key: '
|
|
3432
|
+
return (index.h("mg-input", { key: 'dbf435211890922742cbead9ab3a738b5219df44', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
|
|
3270
3433
|
? this.readonlyValue && this.renderReadonly()
|
|
3271
3434
|
: [
|
|
3272
3435
|
index.h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
@@ -3319,7 +3482,7 @@ const MgInputNumeric = class {
|
|
|
3319
3482
|
};
|
|
3320
3483
|
MgInputNumeric.style = mgInputNumericCss();
|
|
3321
3484
|
|
|
3322
|
-
const mgInputPasswordCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset
|
|
3485
|
+
const mgInputPasswordCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--password .mg-c-input__input-icon{color:var(--mg-b-color-dark)}.mg-c-input.mg-c-input--password .mg-c-input__input-group{position:relative;flex-grow:1}.mg-c-input.mg-c-input--password .mg-c-input__append-button{position:absolute;right:0}.mg-c-input.mg-c-input--password .mg-c-input__box{padding-right:calc(var(--mg-b-size-min-height) + var(--mg-b-size-8))}.mg-c-input.mg-c-input--password .mg-c-input__box::-ms-reveal{display:none}`;
|
|
3323
3486
|
|
|
3324
3487
|
const MgInputPassword = class {
|
|
3325
3488
|
constructor(hostRef) {
|
|
@@ -3448,7 +3611,7 @@ const MgInputPassword = class {
|
|
|
3448
3611
|
}
|
|
3449
3612
|
watchMgWidth(newValue) {
|
|
3450
3613
|
// reset width class
|
|
3451
|
-
mgInput_conf.widths.forEach(width => {
|
|
3614
|
+
mgInput_conf.widths.forEach((width) => {
|
|
3452
3615
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
3453
3616
|
});
|
|
3454
3617
|
// apply new width
|
|
@@ -3472,7 +3635,7 @@ const MgInputPassword = class {
|
|
|
3472
3635
|
// - Async operations are completed
|
|
3473
3636
|
// - No timing issues with Stencil's render cycle
|
|
3474
3637
|
// - Keep everything in sync both inside and outside the component
|
|
3475
|
-
return new Promise(resolve => {
|
|
3638
|
+
return new Promise((resolve) => {
|
|
3476
3639
|
requestAnimationFrame(() => {
|
|
3477
3640
|
this.checkValidity();
|
|
3478
3641
|
this.setErrorMessage();
|
|
@@ -3519,7 +3682,7 @@ const MgInputPassword = class {
|
|
|
3519
3682
|
// - Async operations are completed
|
|
3520
3683
|
// - No timing issues with Stencil's render cycle
|
|
3521
3684
|
// - Keep everything in sync both inside and outside the component
|
|
3522
|
-
return new Promise(resolve => {
|
|
3685
|
+
return new Promise((resolve) => {
|
|
3523
3686
|
requestAnimationFrame(() => {
|
|
3524
3687
|
// unlock validity check by reseting customErrorMessage
|
|
3525
3688
|
this.customErrorMessage = { lock: false };
|
|
@@ -3571,10 +3734,11 @@ const MgInputPassword = class {
|
|
|
3571
3734
|
* @returns HTML Element
|
|
3572
3735
|
*/
|
|
3573
3736
|
render() {
|
|
3574
|
-
|
|
3737
|
+
const displayPasswordIcon = this.displayPassword ? 'eye-slash' : 'eye';
|
|
3738
|
+
return (index.h("mg-input", { key: '913d0653faad21f56cb930dfdc0947a0747f17ad', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && index.h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (index.h("span", { class: "mg-c-input__input-group" }, index.h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
3575
3739
|
if (el !== null)
|
|
3576
3740
|
this.input = el;
|
|
3577
|
-
} }), index.h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, index.h("mg-icon", { class: "mg-c-input__input-icon", icon:
|
|
3741
|
+
} }), index.h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, index.h("mg-icon", { class: "mg-c-input__input-icon", icon: displayPasswordIcon }))))));
|
|
3578
3742
|
}
|
|
3579
3743
|
get element() { return index.getElement(this); }
|
|
3580
3744
|
static get watchers() { return {
|
|
@@ -3601,14 +3765,16 @@ const MgInputPassword = class {
|
|
|
3601
3765
|
};
|
|
3602
3766
|
MgInputPassword.style = mgInputPasswordCss();
|
|
3603
3767
|
|
|
3604
|
-
const mgInputRadioCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
3768
|
+
const mgInputRadioCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}`;
|
|
3605
3769
|
|
|
3606
3770
|
/**
|
|
3607
3771
|
* type Option validation function
|
|
3608
3772
|
* @param option - radio option
|
|
3609
3773
|
* @returns radio option type is valid
|
|
3610
3774
|
*/
|
|
3611
|
-
const isOption$3 = (option) => typeof option === 'object' &&
|
|
3775
|
+
const isOption$3 = (option) => typeof option === 'object' &&
|
|
3776
|
+
typeof option.title === 'string' &&
|
|
3777
|
+
option.value !== undefined;
|
|
3612
3778
|
const MgInputRadio = class {
|
|
3613
3779
|
constructor(hostRef) {
|
|
3614
3780
|
index.registerInstance(this, hostRef);
|
|
@@ -3717,7 +3883,7 @@ const MgInputRadio = class {
|
|
|
3717
3883
|
this.readonlyValue = newValue;
|
|
3718
3884
|
}
|
|
3719
3885
|
else if (Array.isArray(this.items) && this.items.every(isOption$3)) {
|
|
3720
|
-
this.readonlyValue = (_a = this.items.find(item => item.value === newValue)) === null || _a === void 0 ? void 0 : _a.title;
|
|
3886
|
+
this.readonlyValue = (_a = this.items.find((item) => item.value === newValue)) === null || _a === void 0 ? void 0 : _a.title;
|
|
3721
3887
|
}
|
|
3722
3888
|
else {
|
|
3723
3889
|
this.readonlyValue = null;
|
|
@@ -3731,10 +3897,10 @@ const MgInputRadio = class {
|
|
|
3731
3897
|
}
|
|
3732
3898
|
// String array
|
|
3733
3899
|
else if (index$1.allItemsAreString(newValue)) {
|
|
3734
|
-
this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
|
|
3900
|
+
this.options = newValue.map((item) => ({ title: item, value: item, disabled: this.disabled }));
|
|
3735
3901
|
}
|
|
3736
3902
|
// Object array
|
|
3737
|
-
else if (newValue && newValue.every(item => isOption$3(item))) {
|
|
3903
|
+
else if (newValue && newValue.every((item) => isOption$3(item))) {
|
|
3738
3904
|
this.options = newValue;
|
|
3739
3905
|
}
|
|
3740
3906
|
else {
|
|
@@ -3754,7 +3920,7 @@ const MgInputRadio = class {
|
|
|
3754
3920
|
this.classCollection.delete(mgInput_conf.classReadonly);
|
|
3755
3921
|
}
|
|
3756
3922
|
handleValidityChange(newValue, _oldValue, prop) {
|
|
3757
|
-
this.inputs.forEach(input => {
|
|
3923
|
+
this.inputs.forEach((input) => {
|
|
3758
3924
|
input[prop] = newValue;
|
|
3759
3925
|
});
|
|
3760
3926
|
this.checkValidity();
|
|
@@ -3787,7 +3953,7 @@ const MgInputRadio = class {
|
|
|
3787
3953
|
// - Async operations are completed
|
|
3788
3954
|
// - No timing issues with Stencil's render cycle
|
|
3789
3955
|
// - Keep everything in sync both inside and outside the component
|
|
3790
|
-
return new Promise(resolve => {
|
|
3956
|
+
return new Promise((resolve) => {
|
|
3791
3957
|
requestAnimationFrame(() => {
|
|
3792
3958
|
this.checkValidity();
|
|
3793
3959
|
this.setErrorMessage();
|
|
@@ -3834,7 +4000,7 @@ const MgInputRadio = class {
|
|
|
3834
4000
|
// - Async operations are completed
|
|
3835
4001
|
// - No timing issues with Stencil's render cycle
|
|
3836
4002
|
// - Keep everything in sync both inside and outside the component
|
|
3837
|
-
return new Promise(resolve => {
|
|
4003
|
+
return new Promise((resolve) => {
|
|
3838
4004
|
requestAnimationFrame(() => {
|
|
3839
4005
|
// unlock validity check by reseting customErrorMessage
|
|
3840
4006
|
this.customErrorMessage = { lock: false };
|
|
@@ -3889,7 +4055,10 @@ const MgInputRadio = class {
|
|
|
3889
4055
|
* @returns HTML Element
|
|
3890
4056
|
*/
|
|
3891
4057
|
render() {
|
|
3892
|
-
return (index.h("mg-input", { key: '
|
|
4058
|
+
return (index.h("mg-input", { key: '763e021cdda0735dcbd62700f09cbc32c0de7377', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.h("div", { class: "mg-c-input__input-group-container" }, this.options.map((input, index$1) => (index.h("div", { key: input.title, class: {
|
|
4059
|
+
'mg-c-input__input-group': true,
|
|
4060
|
+
'mg-c-input__input-group--disabled': this.disabled || input.disabled,
|
|
4061
|
+
} }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
|
|
3893
4062
|
if (el !== null)
|
|
3894
4063
|
this.inputs[index$1] = el;
|
|
3895
4064
|
} }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title))))))));
|
|
@@ -3922,7 +4091,7 @@ const MgInputRadio = class {
|
|
|
3922
4091
|
};
|
|
3923
4092
|
MgInputRadio.style = mgInputRadioCss();
|
|
3924
4093
|
|
|
3925
|
-
const mgInputSelectCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset
|
|
4094
|
+
const mgInputSelectCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__box{max-width:100%;padding-top:0;padding-right:var(--mg-b-size-8);padding-bottom:0}@media screen and (max-width: 767px){.mg-c-input__box{width:100%}}`;
|
|
3926
4095
|
|
|
3927
4096
|
/**
|
|
3928
4097
|
* Check if item is a well configured option
|
|
@@ -3935,13 +4104,15 @@ const isOption$2 = (option) => typeof option === 'object' && typeof option.title
|
|
|
3935
4104
|
* @param items - select option
|
|
3936
4105
|
* @returns select option array type is valid
|
|
3937
4106
|
*/
|
|
3938
|
-
const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption$2(item));
|
|
4107
|
+
const allItemsAreOptions = (items) => Array.isArray(items) && items.every((item) => isOption$2(item));
|
|
3939
4108
|
/**
|
|
3940
4109
|
* Check if item is a well configured optgroup
|
|
3941
4110
|
* @param optgroup - select option
|
|
3942
4111
|
* @returns select optgroup type is valid
|
|
3943
4112
|
*/
|
|
3944
|
-
const isOptGroup = (optgroup) => typeof optgroup === 'object' &&
|
|
4113
|
+
const isOptGroup = (optgroup) => typeof optgroup === 'object' &&
|
|
4114
|
+
typeof optgroup.group === 'string' &&
|
|
4115
|
+
allItemsAreOptions(optgroup.options);
|
|
3945
4116
|
/**
|
|
3946
4117
|
* Ensure options can be unambiguously differentiated by their title
|
|
3947
4118
|
* Two options can share the same title only when they belong to different groups
|
|
@@ -3970,7 +4141,7 @@ const validateUniqueTitles = (items) => {
|
|
|
3970
4141
|
const groupOptions = (acc, { group, title, value, disabled }) => {
|
|
3971
4142
|
if (group !== undefined) {
|
|
3972
4143
|
// Check if group is already created
|
|
3973
|
-
const optGroup = acc.find(grp => grp.group === group);
|
|
4144
|
+
const optGroup = acc.find((grp) => grp.group === group);
|
|
3974
4145
|
// Add to group
|
|
3975
4146
|
if (optGroup !== undefined) {
|
|
3976
4147
|
optGroup.options.push({ title, value, disabled });
|
|
@@ -4041,10 +4212,10 @@ const MgInputSelect = class {
|
|
|
4041
4212
|
this.getReadonlyValue = () => {
|
|
4042
4213
|
var _a;
|
|
4043
4214
|
if (index$1.allItemsAreString(this.items) && typeof this.value === 'string') {
|
|
4044
|
-
return this.items.find(item => item === this.value);
|
|
4215
|
+
return this.items.find((item) => item === this.value);
|
|
4045
4216
|
}
|
|
4046
4217
|
else if (allItemsAreOptions(this.items)) {
|
|
4047
|
-
return (_a = this.items.find(item => item.value === this.value)) === null || _a === void 0 ? void 0 : _a.title;
|
|
4218
|
+
return (_a = this.items.find((item) => item.value === this.value)) === null || _a === void 0 ? void 0 : _a.title;
|
|
4048
4219
|
}
|
|
4049
4220
|
else {
|
|
4050
4221
|
return null;
|
|
@@ -4055,7 +4226,7 @@ const MgInputSelect = class {
|
|
|
4055
4226
|
* The select value is the position of an option in this list, so it uniquely identifies an option even when several share the same title
|
|
4056
4227
|
* @returns flat select options
|
|
4057
4228
|
*/
|
|
4058
|
-
this.getOptions = () => this.options.flatMap(option => (isOptGroup(option) ? option.options : [option]));
|
|
4229
|
+
this.getOptions = () => this.options.flatMap((option) => (isOptGroup(option) ? option.options : [option]));
|
|
4059
4230
|
/**
|
|
4060
4231
|
* Get the option matching the current select value
|
|
4061
4232
|
* @returns matching option or undefined
|
|
@@ -4069,7 +4240,7 @@ const MgInputSelect = class {
|
|
|
4069
4240
|
// The select value is normally the render index of the selected option
|
|
4070
4241
|
const optionByIndex = options[Number(this.input.value)];
|
|
4071
4242
|
// Fallback for an unknown value injected programmatically (stored as a disabled option keyed by its own value)
|
|
4072
|
-
return optionByIndex !== null && optionByIndex !== void 0 ? optionByIndex : options.find(option => option.value === this.input.value);
|
|
4243
|
+
return optionByIndex !== null && optionByIndex !== void 0 ? optionByIndex : options.find((option) => option.value === this.input.value);
|
|
4073
4244
|
};
|
|
4074
4245
|
/**
|
|
4075
4246
|
* Handle input event
|
|
@@ -4154,18 +4325,18 @@ const MgInputSelect = class {
|
|
|
4154
4325
|
}
|
|
4155
4326
|
// String array
|
|
4156
4327
|
else if (index$1.allItemsAreString(newValue)) {
|
|
4157
|
-
validateUniqueTitles(newValue.map(item => ({ title: item })));
|
|
4328
|
+
validateUniqueTitles(newValue.map((item) => ({ title: item })));
|
|
4158
4329
|
if (typeof this.value === 'string') {
|
|
4159
4330
|
this.valueExist = newValue.includes(this.value);
|
|
4160
4331
|
}
|
|
4161
|
-
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
4332
|
+
this.options = newValue.map((item) => ({ title: item, value: item }));
|
|
4162
4333
|
}
|
|
4163
4334
|
// Object array
|
|
4164
4335
|
else if (allItemsAreOptions(newValue)) {
|
|
4165
4336
|
validateUniqueTitles(newValue);
|
|
4166
|
-
this.valueExist = newValue.map(item => item.value).includes(this.value);
|
|
4337
|
+
this.valueExist = newValue.map((item) => item.value).includes(this.value);
|
|
4167
4338
|
// Grouped object options
|
|
4168
|
-
if (newValue.some(item => Boolean(item.group))) {
|
|
4339
|
+
if (newValue.some((item) => Boolean(item.group))) {
|
|
4169
4340
|
this.options = newValue.reduce(groupOptions, []);
|
|
4170
4341
|
}
|
|
4171
4342
|
// Standart object options
|
|
@@ -4201,7 +4372,7 @@ const MgInputSelect = class {
|
|
|
4201
4372
|
}
|
|
4202
4373
|
watchMgWidth(newValue) {
|
|
4203
4374
|
// reset width class
|
|
4204
|
-
mgInput_conf.widths.forEach(width => {
|
|
4375
|
+
mgInput_conf.widths.forEach((width) => {
|
|
4205
4376
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
4206
4377
|
});
|
|
4207
4378
|
// apply new width
|
|
@@ -4225,7 +4396,7 @@ const MgInputSelect = class {
|
|
|
4225
4396
|
// - Async operations are completed
|
|
4226
4397
|
// - No timing issues with Stencil's render cycle
|
|
4227
4398
|
// - Keep everything in sync both inside and outside the component
|
|
4228
|
-
return new Promise(resolve => {
|
|
4399
|
+
return new Promise((resolve) => {
|
|
4229
4400
|
requestAnimationFrame(() => {
|
|
4230
4401
|
this.checkValidity();
|
|
4231
4402
|
this.setErrorMessage();
|
|
@@ -4272,7 +4443,7 @@ const MgInputSelect = class {
|
|
|
4272
4443
|
// - Async operations are completed
|
|
4273
4444
|
// - No timing issues with Stencil's render cycle
|
|
4274
4445
|
// - Keep everything in sync both inside and outside the component
|
|
4275
|
-
return new Promise(resolve => {
|
|
4446
|
+
return new Promise((resolve) => {
|
|
4276
4447
|
requestAnimationFrame(() => {
|
|
4277
4448
|
// unlock validity check by reseting customErrorMessage
|
|
4278
4449
|
this.customErrorMessage = { lock: false };
|
|
@@ -4335,11 +4506,11 @@ const MgInputSelect = class {
|
|
|
4335
4506
|
const readonlyValue = this.getReadonlyValue();
|
|
4336
4507
|
// Running index shared across groups, so each option gets a unique value matching its position in getOptions()
|
|
4337
4508
|
let optionIndex = 0;
|
|
4338
|
-
return (index.h("mg-input", { key: '
|
|
4509
|
+
return (index.h("mg-input", { key: 'aab8c17ced01c0afbec9114f280ee2b7fa73cdfc', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && index.h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (index.h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
4339
4510
|
if (el !== null)
|
|
4340
4511
|
this.input = el;
|
|
4341
4512
|
} }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
4342
|
-
index.h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (index.h("optgroup", { label: option.group, key: option.group }, option.options.map(groupedOption => this.renderOption(groupedOption, optionIndex++)))) : (isOption$2(option) && this.renderOption(option, optionIndex++)))))));
|
|
4513
|
+
index.h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map((option) => isOptGroup(option) ? (index.h("optgroup", { label: option.group, key: option.group }, option.options.map((groupedOption) => this.renderOption(groupedOption, optionIndex++)))) : (isOption$2(option) && this.renderOption(option, optionIndex++)))))));
|
|
4343
4514
|
}
|
|
4344
4515
|
get element() { return index.getElement(this); }
|
|
4345
4516
|
static get watchers() { return {
|
|
@@ -4377,14 +4548,16 @@ const helpTextTypes = ['email', 'emails', 'url'];
|
|
|
4377
4548
|
// Define possible text types
|
|
4378
4549
|
const textTypes = ['text', 'search', 'tel', ...helpTextTypes];
|
|
4379
4550
|
|
|
4380
|
-
const mgInputTextCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset
|
|
4551
|
+
const mgInputTextCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--display-character-left mg-character-left{position:absolute;display:none}.mg-c-input.mg-c-input--display-character-left mg-character-left>span{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--display-character-left input:focus~mg-character-left,.mg-c-input.mg-c-input--display-character-left textarea:focus~mg-character-left{display:block}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--display-character-left mg-character-left{top:50%;right:var(--mg-b-size-8);font-size:var(--mg-b-font-size-small);transform:translateY(-50%)}.mg-c-input.mg-c-input--display-character-left .mg-c-input__box:focus{padding-right:max(var(--mg-c-character-left-message-length)*(.35ch + .3rem) + var(--mg-b-size-16)*clamp(0,var(--mg-c-character-left-message-length),1),var(--mg-b-size-8))}`;
|
|
4381
4552
|
|
|
4382
4553
|
/**
|
|
4383
4554
|
* Check if object is an option
|
|
4384
4555
|
* @param option - object to validate
|
|
4385
4556
|
* @returns true id object is an option
|
|
4386
4557
|
*/
|
|
4387
|
-
const isOption$1 = (option) => typeof option === 'object' &&
|
|
4558
|
+
const isOption$1 = (option) => typeof option === 'object' &&
|
|
4559
|
+
typeof option.title === 'string' &&
|
|
4560
|
+
option.value !== undefined;
|
|
4388
4561
|
/**
|
|
4389
4562
|
* Check if datalist options are well structured.
|
|
4390
4563
|
* @param options - Datalist options to check.
|
|
@@ -4461,7 +4634,8 @@ const MgInputText = class {
|
|
|
4461
4634
|
*/
|
|
4462
4635
|
this.validatePattern = () => {
|
|
4463
4636
|
if ((this.pattern !== undefined || this.patternErrorMessage !== undefined) && // At least one is defined
|
|
4464
|
-
(!index$1.isValidString(this.pattern) ||
|
|
4637
|
+
(!index$1.isValidString(this.pattern) ||
|
|
4638
|
+
(!helpTextTypes.includes(this.type) && !index$1.isValidString(this.patternErrorMessage))) // Both must be defined
|
|
4465
4639
|
) {
|
|
4466
4640
|
throw new Error(`<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${this.pattern}'" and "patternErrorMessage='${this.patternErrorMessage}'".`);
|
|
4467
4641
|
}
|
|
@@ -4534,7 +4708,7 @@ const MgInputText = class {
|
|
|
4534
4708
|
this.slotContent = slotAppendInput[0].textContent;
|
|
4535
4709
|
}
|
|
4536
4710
|
}
|
|
4537
|
-
else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
|
|
4711
|
+
else if (slotAppendInput.filter((slot) => slot.nodeName === 'MG-BUTTON').length > 1) {
|
|
4538
4712
|
this.classCollection.add(this.classIsInputGroupAppend);
|
|
4539
4713
|
this.classCollection.add(this.classHasButtonsGroupAppend);
|
|
4540
4714
|
}
|
|
@@ -4555,7 +4729,7 @@ const MgInputText = class {
|
|
|
4555
4729
|
handleValue(newValue) {
|
|
4556
4730
|
var _a, _b;
|
|
4557
4731
|
if ((_a = this.datalistoptions) === null || _a === void 0 ? void 0 : _a.every(isOption$1)) {
|
|
4558
|
-
this.valueChange.emit(((_b = this.datalistoptions.find(option => option.title === newValue)) === null || _b === void 0 ? void 0 : _b.value) || newValue);
|
|
4732
|
+
this.valueChange.emit(((_b = this.datalistoptions.find((option) => option.title === newValue)) === null || _b === void 0 ? void 0 : _b.value) || newValue);
|
|
4559
4733
|
}
|
|
4560
4734
|
else {
|
|
4561
4735
|
this.valueChange.emit(newValue);
|
|
@@ -4603,7 +4777,7 @@ const MgInputText = class {
|
|
|
4603
4777
|
}
|
|
4604
4778
|
watchMgWidth(newValue) {
|
|
4605
4779
|
// reset width class
|
|
4606
|
-
mgInput_conf.widths.forEach(width => {
|
|
4780
|
+
mgInput_conf.widths.forEach((width) => {
|
|
4607
4781
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
4608
4782
|
});
|
|
4609
4783
|
// apply new width
|
|
@@ -4643,7 +4817,7 @@ const MgInputText = class {
|
|
|
4643
4817
|
// - Async operations are completed
|
|
4644
4818
|
// - No timing issues with Stencil's render cycle
|
|
4645
4819
|
// - Keep everything in sync both inside and outside the component
|
|
4646
|
-
return new Promise(resolve => {
|
|
4820
|
+
return new Promise((resolve) => {
|
|
4647
4821
|
requestAnimationFrame(() => {
|
|
4648
4822
|
this.checkValidity();
|
|
4649
4823
|
this.setErrorMessage();
|
|
@@ -4690,7 +4864,7 @@ const MgInputText = class {
|
|
|
4690
4864
|
// - Async operations are completed
|
|
4691
4865
|
// - No timing issues with Stencil's render cycle
|
|
4692
4866
|
// - Keep everything in sync both inside and outside the component
|
|
4693
|
-
return new Promise(resolve => {
|
|
4867
|
+
return new Promise((resolve) => {
|
|
4694
4868
|
requestAnimationFrame(() => {
|
|
4695
4869
|
// unlock validity check by reseting customErrorMessage
|
|
4696
4870
|
this.customErrorMessage = { lock: false };
|
|
@@ -4752,15 +4926,17 @@ const MgInputText = class {
|
|
|
4752
4926
|
* @returns HTML Element
|
|
4753
4927
|
*/
|
|
4754
4928
|
render() {
|
|
4755
|
-
return (index.h("mg-input", { key: '
|
|
4929
|
+
return (index.h("mg-input", { key: '3454b5f94af7b47a2c94b1416f59f840552ef70a', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
|
|
4756
4930
|
? this.value && this.renderReadonly()
|
|
4757
4931
|
: [
|
|
4758
4932
|
index.h("div", { key: "input", class: "mg-c-input__input-group-container", style: {
|
|
4759
|
-
'--mg-c-character-left-message-length': (!this.characterLeftHide
|
|
4933
|
+
'--mg-c-character-left-message-length': (!this.characterLeftHide
|
|
4934
|
+
? this.maxlength.toString().length * 2 + 1
|
|
4935
|
+
: 0).toString(),
|
|
4760
4936
|
} }, this.icon !== undefined && index.h("mg-icon", { icon: this.icon }), index.h("input", { type: this.type === 'emails' ? 'email' : this.type, multiple: this.type === 'emails', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
4761
4937
|
if (el !== null)
|
|
4762
4938
|
this.input = el;
|
|
4763
|
-
} }), this.hasDatalist() && (index.h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (index.h("option", { value: isOption$1(option) ? option.title : option, key: option }))))), !this.characterLeftHide && this.maxlength > 0 && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))),
|
|
4939
|
+
} }), this.hasDatalist() && (index.h("datalist", { id: this.datalistId }, this.datalistoptions.map((option) => (index.h("option", { value: isOption$1(option) ? option.title : option, key: option }))))), !this.characterLeftHide && this.maxlength > 0 && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))),
|
|
4764
4940
|
index.h("slot", { key: "slot", name: "append-input" }),
|
|
4765
4941
|
]));
|
|
4766
4942
|
}
|
|
@@ -4810,7 +4986,7 @@ const MgInputText = class {
|
|
|
4810
4986
|
};
|
|
4811
4987
|
MgInputText.style = mgInputTextCss();
|
|
4812
4988
|
|
|
4813
|
-
const mgInputTextareaCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset
|
|
4989
|
+
const mgInputTextareaCss = () => `.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--display-character-left mg-character-left{position:absolute;display:none}.mg-c-input.mg-c-input--display-character-left mg-character-left>span{font-size:var(--mg-b-font-size-small);opacity:.6}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-c-input.mg-c-input--display-character-left .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--display-character-left input:focus~mg-character-left,.mg-c-input.mg-c-input--display-character-left textarea:focus~mg-character-left{display:block}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__input{align-items:start}.mg-c-input__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input.mg-c-input--readonly .mg-c-input__readonly-value{white-space:pre-line}.mg-c-input.mg-c-input--display-character-left .mg-c-input__box{padding-bottom:var(--mg-b-size-24)}.mg-c-input.mg-c-input--display-character-left mg-character-left{bottom:calc(var(--mg-c-input-border-width) + .1rem);left:calc(var(--mg-c-input-border-width) + .1rem);padding:calc(var(--mg-b-size-2) - var(--mg-c-input-border-width)) calc(var(--mg-b-size-4) - var(--mg-c-input-border-width));border:var(--mg-c-input-border-width) solid var(--mg-c-input-color-border);border-bottom-width:0;border-left-width:0;background:var(--mg-b-color-neutral-0);border-bottom-left-radius:var(--mg-c-input-border-radius);border-top-right-radius:var(--mg-c-input-border-radius)}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}`;
|
|
4814
4990
|
|
|
4815
4991
|
const MgInputTextarea = class {
|
|
4816
4992
|
constructor(hostRef) {
|
|
@@ -4957,7 +5133,7 @@ const MgInputTextarea = class {
|
|
|
4957
5133
|
}
|
|
4958
5134
|
watchMgWidth(newValue) {
|
|
4959
5135
|
// reset width class
|
|
4960
|
-
mgInput_conf.widths.forEach(width => {
|
|
5136
|
+
mgInput_conf.widths.forEach((width) => {
|
|
4961
5137
|
this.classCollection.delete(`mg-c-input--width-${width}`);
|
|
4962
5138
|
});
|
|
4963
5139
|
// apply new width
|
|
@@ -4994,7 +5170,7 @@ const MgInputTextarea = class {
|
|
|
4994
5170
|
// - Async operations are completed
|
|
4995
5171
|
// - No timing issues with Stencil's render cycle
|
|
4996
5172
|
// - Keep everything in sync both inside and outside the component
|
|
4997
|
-
return new Promise(resolve => {
|
|
5173
|
+
return new Promise((resolve) => {
|
|
4998
5174
|
requestAnimationFrame(() => {
|
|
4999
5175
|
this.checkValidity();
|
|
5000
5176
|
this.setErrorMessage();
|
|
@@ -5041,7 +5217,7 @@ const MgInputTextarea = class {
|
|
|
5041
5217
|
// - Async operations are completed
|
|
5042
5218
|
// - No timing issues with Stencil's render cycle
|
|
5043
5219
|
// - Keep everything in sync both inside and outside the component
|
|
5044
|
-
return new Promise(resolve => {
|
|
5220
|
+
return new Promise((resolve) => {
|
|
5045
5221
|
requestAnimationFrame(() => {
|
|
5046
5222
|
// unlock validity check by reseting customErrorMessage
|
|
5047
5223
|
this.customErrorMessage = { lock: false };
|
|
@@ -5098,7 +5274,7 @@ const MgInputTextarea = class {
|
|
|
5098
5274
|
* @returns HTML Element
|
|
5099
5275
|
*/
|
|
5100
5276
|
render() {
|
|
5101
|
-
return (index.h("mg-input", { key: '
|
|
5277
|
+
return (index.h("mg-input", { key: '36575f026a23722bb6d224aaeacf0e80d3e1bbfd', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && index.h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (index.h("div", { class: "mg-c-input__input-group-container" }, index.h("textarea", { class: {
|
|
5102
5278
|
'mg-c-input__box': true,
|
|
5103
5279
|
'mg-c-input__box--width': true,
|
|
5104
5280
|
'mg-c-input__box--resizable': this.resizable === 'both',
|
|
@@ -5186,7 +5362,7 @@ const MgInputTitle = class {
|
|
|
5186
5362
|
render() {
|
|
5187
5363
|
const TagName = this.readonly ? 'span' : this.tagName;
|
|
5188
5364
|
// \u00A0 represent a
|
|
5189
|
-
return (index.h(TagName, { key: '
|
|
5365
|
+
return (index.h(TagName, { key: 'a3b4b081eb6612ae8f94e687d6ee55e0a4fc8747', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, index.h("slot", { key: '849858a8fca06a38cb33da241c52d29ad2af559b' }), this.required && !this.readonly && (index.h("span", { key: '4b6a62fbe70f027a8123e512cfdaad5c37c8e94a', class: "mg-c-input-title__required" }, "\u00A0", index.h("span", { key: '520b037e53779a58bc013f40d16ab724da734315', class: "mg-u-is-asterisk" }, "*")))));
|
|
5190
5366
|
}
|
|
5191
5367
|
get element() { return index.getElement(this); }
|
|
5192
5368
|
static get watchers() { return {
|
|
@@ -5200,7 +5376,7 @@ const MgInputTitle = class {
|
|
|
5200
5376
|
};
|
|
5201
5377
|
MgInputTitle.style = mgInputTitleCss();
|
|
5202
5378
|
|
|
5203
|
-
const mgInputToggleCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
5379
|
+
const mgInputToggleCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.1rem var(--mg-b-size-8);border-width:var(--mg-b-size-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));color:var(--mg-b-color-neutral-110);font-weight:unset;line-height:var(--mg-b-size-16);text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{border-style:solid;border-color:var(--mg-b-color-neutral-80);background-color:var(--mg-b-color-light);font-weight:600}.mg-c-input__button-toggle{display:flex;overflow:hidden;min-width:0;align-items:center;padding:.1rem;border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-b-color-neutral-80);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-neutral-20);cursor:pointer;font-family:var(--mg-b-font-family);font-size:var(--mg-b-small-font-size);line-height:var(--mg-b-size-12)}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input__button-toggle:focus{outline-offset:var(--mg-b-size-4)}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__button-toggle{border-color:var(--mg-b-color-neutral-110);background-color:var(--mg-b-color-neutral-110)}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{border:unset;background-color:unset;color:var(--mg-b-color-light);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{border-style:solid;border-color:var(--mg-b-color-light);background-color:var(--mg-b-color-light);font-weight:600}.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly) .mg-c-input__button-toggle,.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly).mg-c-input--label-on-top .mg-c-input__button-toggle{margin-top:var(--mg-b-size-4)}@media screen and (min-width: 768px){.mg-c-input.mg-c-input--toggle:not(.mg-c-input--readonly) .mg-c-input__button-toggle{margin-top:calc((var(--mg-b-size-min-height) - (var(--mg-b-size-20) + var(--mg-b-size-4)) + .1rem)/2)}}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__button-toggle{width:100%;min-width:calc(var(--mg-b-size-20)*2);max-width:calc(var(--mg-b-size-20)*2)}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;overflow:unset;min-width:var(--mg-b-size-20);max-width:var(--mg-b-size-20);height:var(--mg-b-size-20);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:last-of-type{width:unset}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{min-width:unset;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{margin-left:auto;visibility:visible}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type ::slotted(*){display:none}`;
|
|
5204
5380
|
|
|
5205
5381
|
/**
|
|
5206
5382
|
* type Option validation function
|
|
@@ -5296,10 +5472,10 @@ const MgInputToggle = class {
|
|
|
5296
5472
|
if (!this.isIcon) {
|
|
5297
5473
|
// Due to text-overflow set to ellipsis
|
|
5298
5474
|
// we need to ensure that slot element have title to display value on mouse over
|
|
5299
|
-
slots.forEach(slot => slot.setAttribute('title', slot.textContent));
|
|
5475
|
+
slots.forEach((slot) => slot.setAttribute('title', slot.textContent));
|
|
5300
5476
|
}
|
|
5301
5477
|
else {
|
|
5302
|
-
slots.forEach(slot => {
|
|
5478
|
+
slots.forEach((slot) => {
|
|
5303
5479
|
if (slot.nodeName === 'MG-ICON') {
|
|
5304
5480
|
slot.size = 'small';
|
|
5305
5481
|
}
|
|
@@ -5312,7 +5488,7 @@ const MgInputToggle = class {
|
|
|
5312
5488
|
* @returns toggle value
|
|
5313
5489
|
*/
|
|
5314
5490
|
this.getCurrentOptionIndex = (value) => {
|
|
5315
|
-
return this.options.findIndex(option => index$1.toString(option.value) === index$1.toString(value)) === 1 ? 1 : 0;
|
|
5491
|
+
return this.options.findIndex((option) => index$1.toString(option.value) === index$1.toString(value)) === 1 ? 1 : 0;
|
|
5316
5492
|
};
|
|
5317
5493
|
/**
|
|
5318
5494
|
* Check if value is checked
|
|
@@ -5336,7 +5512,8 @@ const MgInputToggle = class {
|
|
|
5336
5512
|
// However, depending on the integration context (e.g., Vue.js), they may also be interpreted as string attributes.
|
|
5337
5513
|
// To avoid incorrect type interpretation when a boolean is received as a string,
|
|
5338
5514
|
// we normalize the value and convert it to a proper boolean before internal use.
|
|
5339
|
-
else if (['true', 'false'].includes(newValue) &&
|
|
5515
|
+
else if (['true', 'false'].includes(newValue) &&
|
|
5516
|
+
this.options.every((option) => typeof option.value === 'boolean')) {
|
|
5340
5517
|
this.value = newValue === 'true';
|
|
5341
5518
|
// Return early to prevent infinite loop
|
|
5342
5519
|
return;
|
|
@@ -5361,7 +5538,7 @@ const MgInputToggle = class {
|
|
|
5361
5538
|
}
|
|
5362
5539
|
// String array
|
|
5363
5540
|
else if (index$1.allItemsAreString(newValue)) {
|
|
5364
|
-
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
5541
|
+
this.options = newValue.map((item) => ({ title: item, value: item }));
|
|
5365
5542
|
}
|
|
5366
5543
|
// Object array
|
|
5367
5544
|
else if (Array.isArray(newValue) && newValue.every(isOption)) {
|
|
@@ -5441,7 +5618,7 @@ const MgInputToggle = class {
|
|
|
5441
5618
|
// - Async operations are completed
|
|
5442
5619
|
// - No timing issues with Stencil's render cycle
|
|
5443
5620
|
// - Keep everything in sync both inside and outside the component
|
|
5444
|
-
return new Promise(resolve => {
|
|
5621
|
+
return new Promise((resolve) => {
|
|
5445
5622
|
requestAnimationFrame(() => {
|
|
5446
5623
|
this.errorMessage = undefined;
|
|
5447
5624
|
resolve();
|
|
@@ -5471,7 +5648,7 @@ const MgInputToggle = class {
|
|
|
5471
5648
|
*/
|
|
5472
5649
|
render() {
|
|
5473
5650
|
const currentOption = this.options[this.getCurrentOptionIndex(this.value)];
|
|
5474
|
-
return (index.h("mg-input", { key: '
|
|
5651
|
+
return (index.h("mg-input", { key: '5402a263042d7c4265d0dae810df6be6ae8d3f2a', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (currentOption && index.h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (index.h("button", { type: "button", role: "switch", "aria-checked": this.isChecked(this.value).toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.handleSwitchButton, ref: (el) => {
|
|
5475
5652
|
if (el !== null)
|
|
5476
5653
|
this.button = el;
|
|
5477
5654
|
} }, index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-1" })), index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-2" }))))));
|
|
@@ -5562,13 +5739,13 @@ class OverflowBehavior {
|
|
|
5562
5739
|
throw new Error('OverflowBehavior - all constructor params are required');
|
|
5563
5740
|
}
|
|
5564
5741
|
const items = Array.from(this.parentElement.children);
|
|
5565
|
-
this._resizeObserver = new ResizeObserver(entries => {
|
|
5742
|
+
this._resizeObserver = new ResizeObserver((entries) => {
|
|
5566
5743
|
this._availableWidth = entries
|
|
5567
|
-
.map(entry => entry.contentRect.width)
|
|
5744
|
+
.map((entry) => entry.contentRect.width)
|
|
5568
5745
|
.sort((a, b) => a - b)
|
|
5569
5746
|
.shift();
|
|
5570
5747
|
// reset items
|
|
5571
|
-
items.forEach(item => this.toggleItem(item, false));
|
|
5748
|
+
items.forEach((item) => this.toggleItem(item, false));
|
|
5572
5749
|
let accWidth = 0;
|
|
5573
5750
|
items.forEach((item, index) => {
|
|
5574
5751
|
accWidth += item.offsetWidth;
|
|
@@ -5580,7 +5757,7 @@ class OverflowBehavior {
|
|
|
5580
5757
|
}
|
|
5581
5758
|
}
|
|
5582
5759
|
|
|
5583
|
-
const mgItemMoreCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
5760
|
+
const mgItemMoreCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host:not([hidden]){display:flex}`;
|
|
5584
5761
|
|
|
5585
5762
|
const MgItemMore = class {
|
|
5586
5763
|
constructor(hostRef) {
|
|
@@ -5652,7 +5829,7 @@ const MgItemMore = class {
|
|
|
5652
5829
|
*/
|
|
5653
5830
|
render() {
|
|
5654
5831
|
const menuItemIdentifier = 'mg-item-more';
|
|
5655
|
-
return (index.h(index.Host, { key: '
|
|
5832
|
+
return (index.h(index.Host, { key: '54d11a95e5edc3a45e98541ffc827264e40bc5ec', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (index.h("mg-menu-item", { key: '636e1c03e907071e72766b7ee359f3f93d3df6ae', "data-overflow-more": true, "data-style-direction": directions$2.HORIZONTAL, identifier: menuItemIdentifier, isIcon: !this.slotlabel.display }, index.h("mg-icon", { key: 'e751b58f50a3625f6e23b5993a50f8d0c2fb4660', icon: this.icon.icon, slot: "image" }), index.h("span", { key: 'bc429c525afced68fb5a7668cad3741699216b97', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { key: '05760816f84ef6b6c5d18d058a110b6ec2d182e3', direction: directions$2.VERTICAL, label: this.messages.menuLabel, ref: (ref) => {
|
|
5656
5833
|
if (ref !== null)
|
|
5657
5834
|
this.itemMoreContainer = ref;
|
|
5658
5835
|
} })))));
|
|
@@ -5669,7 +5846,7 @@ const MgItemMore = class {
|
|
|
5669
5846
|
};
|
|
5670
5847
|
MgItemMore.style = mgItemMoreCss();
|
|
5671
5848
|
|
|
5672
|
-
const mgMenuCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
5849
|
+
const mgMenuCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:inline-flex;width:100%;min-width:0;background-color:var(--mg-c-menu-color-background, var(--mg-b-color-light))}:host([direction=vertical]){display:flex;height:100%;flex-direction:column;gap:var(--mg-b-size-2);overflow-y:auto}`;
|
|
5673
5850
|
|
|
5674
5851
|
const MgMenu = class {
|
|
5675
5852
|
constructor(hostRef) {
|
|
@@ -5696,7 +5873,7 @@ const MgMenu = class {
|
|
|
5696
5873
|
*/
|
|
5697
5874
|
this.getMenuItems = (menu = this.element) => {
|
|
5698
5875
|
var _a, _b;
|
|
5699
|
-
const menuItems = Array.from(menu.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
|
|
5876
|
+
const menuItems = Array.from(menu.children).filter((child) => child.nodeName === 'MG-MENU-ITEM');
|
|
5700
5877
|
const itemMoreMenuItem = (_b = (_a = menu.querySelector('mg-item-more')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item');
|
|
5701
5878
|
if (itemMoreMenuItem !== null && itemMoreMenuItem !== undefined) {
|
|
5702
5879
|
menuItems.push(itemMoreMenuItem);
|
|
@@ -5707,7 +5884,7 @@ const MgMenu = class {
|
|
|
5707
5884
|
* Update menu items
|
|
5708
5885
|
*/
|
|
5709
5886
|
this.updateMenuItems = () => {
|
|
5710
|
-
this.getMenuItems().forEach(item => {
|
|
5887
|
+
this.getMenuItems().forEach((item) => {
|
|
5711
5888
|
item.dataset.styleDirection = this.direction;
|
|
5712
5889
|
});
|
|
5713
5890
|
// render mg-item-more to manage OverflowBehavior
|
|
@@ -5717,7 +5894,9 @@ const MgMenu = class {
|
|
|
5717
5894
|
* render mg-item-more
|
|
5718
5895
|
*/
|
|
5719
5896
|
this.renderMgItemMore = () => {
|
|
5720
|
-
if (this.direction === directions$
|
|
5897
|
+
if (this.direction === directions$2.VERTICAL ||
|
|
5898
|
+
(this.direction === directions$2.HORIZONTAL && this.isChildMenu()) ||
|
|
5899
|
+
this.element.children.length <= 1) {
|
|
5721
5900
|
return;
|
|
5722
5901
|
}
|
|
5723
5902
|
// Insert mg-item-more outside the mg-menu shadowdom
|
|
@@ -5738,16 +5917,16 @@ const MgMenu = class {
|
|
|
5738
5917
|
}
|
|
5739
5918
|
}
|
|
5740
5919
|
validateDirection(newValue) {
|
|
5741
|
-
if (![directions$
|
|
5742
|
-
throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$
|
|
5920
|
+
if (![directions$2.VERTICAL, directions$2.HORIZONTAL].includes(newValue)) {
|
|
5921
|
+
throw new Error(`<${this.name}> prop "direction" must be one of: ${directions$2.HORIZONTAL}, ${directions$2.VERTICAL}. Passed value: ${index$1.toString(newValue)}.`);
|
|
5743
5922
|
}
|
|
5744
5923
|
else {
|
|
5745
5924
|
this.updateMenuItems();
|
|
5746
5925
|
}
|
|
5747
5926
|
}
|
|
5748
5927
|
validateItemMore(newValue) {
|
|
5749
|
-
if (newValue !== undefined && this.direction !== directions$
|
|
5750
|
-
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${directions$
|
|
5928
|
+
if (newValue !== undefined && this.direction !== directions$2.HORIZONTAL) {
|
|
5929
|
+
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${directions$2.HORIZONTAL}.`);
|
|
5751
5930
|
}
|
|
5752
5931
|
else if (newValue !== undefined) {
|
|
5753
5932
|
this.renderMgItemMore();
|
|
@@ -5763,7 +5942,7 @@ const MgMenu = class {
|
|
|
5763
5942
|
return;
|
|
5764
5943
|
}
|
|
5765
5944
|
const itemToWatch = event.target.nodeName === 'MG-ITEM-MORE' ? event.target.shadowRoot.querySelector('mg-menu-item') : event.target;
|
|
5766
|
-
['click', 'focus'].forEach(trigger => {
|
|
5945
|
+
['click', 'focus'].forEach((trigger) => {
|
|
5767
5946
|
itemToWatch.addEventListener(trigger, () => {
|
|
5768
5947
|
const focusedItem = event.target.closest('mg-menu').querySelector('[data-has-focus]');
|
|
5769
5948
|
// exit process if new focused item in the current menu children
|
|
@@ -5795,7 +5974,7 @@ const MgMenu = class {
|
|
|
5795
5974
|
// set menu-items
|
|
5796
5975
|
this.updateMenuItems();
|
|
5797
5976
|
// add listener to close main menu when focus leave it
|
|
5798
|
-
if (!this.isChildMenu() && this.direction === directions$
|
|
5977
|
+
if (!this.isChildMenu() && this.direction === directions$2.HORIZONTAL) {
|
|
5799
5978
|
document.addEventListener('focusin', (event) => {
|
|
5800
5979
|
const isElementChild = (element) => {
|
|
5801
5980
|
if (element === this.element)
|
|
@@ -5821,7 +6000,7 @@ const MgMenu = class {
|
|
|
5821
6000
|
* @returns HTML Element
|
|
5822
6001
|
*/
|
|
5823
6002
|
render() {
|
|
5824
|
-
return (index.h(index.Host, { key: '
|
|
6003
|
+
return (index.h(index.Host, { key: '967fc6e01207c5831b7821ccb17db8406cabc262', role: "list", "aria-label": this.label }, index.h("slot", { key: '9699944cbe1b25434c3ddc6235dae7676b7acb6b' })));
|
|
5825
6004
|
}
|
|
5826
6005
|
get element() { return index.getElement(this); }
|
|
5827
6006
|
static get watchers() { return {
|
|
@@ -5838,7 +6017,7 @@ const MgMenu = class {
|
|
|
5838
6017
|
};
|
|
5839
6018
|
MgMenu.style = mgMenuCss();
|
|
5840
6019
|
|
|
5841
|
-
const mgMenuItemCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
6020
|
+
const mgMenuItemCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host([data-style-direction=vertical][data-level="1"]) .mg-c-menu-item__navigation-button{padding-left:calc(1*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="1"]) .mg-c-menu-item__collapse-container{z-index:10}:host([data-style-direction=vertical][data-level="2"]) .mg-c-menu-item__navigation-button{padding-left:calc(2*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="2"]) .mg-c-menu-item__collapse-container{z-index:20}:host([data-style-direction=vertical][data-level="3"]) .mg-c-menu-item__navigation-button{padding-left:calc(3*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="3"]) .mg-c-menu-item__collapse-container{z-index:30}:host([data-style-direction=vertical][data-level="4"]) .mg-c-menu-item__navigation-button{padding-left:calc(4*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="4"]) .mg-c-menu-item__collapse-container{z-index:40}:host([data-style-direction=vertical][data-level="5"]) .mg-c-menu-item__navigation-button{padding-left:calc(5*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="5"]) .mg-c-menu-item__collapse-container{z-index:50}:host([data-style-direction=vertical][data-level="6"]) .mg-c-menu-item__navigation-button{padding-left:calc(6*var(--mg-c-menu-item-button-padding-horizontal) + var(--mg-c-menu-item-button-margin-horizontal))}:host([data-level="6"]) .mg-c-menu-item__collapse-container{z-index:60}.mg-c-menu-item__navigation-button{position:relative;display:flex;height:calc(var(--mg-c-menu-item-button-spacing-vertical)*2 + var(--mg-c-menu-item-height));box-sizing:border-box;align-items:center;padding:var(--mg-c-menu-item-button-spacing-vertical) calc(var(--mg-c-menu-item-button-margin-horizontal) + var(--mg-c-menu-item-button-padding-horizontal)) var(--mg-c-menu-item-button-spacing-vertical) calc(var(--mg-c-menu-item-button-margin-horizontal) + var(--mg-c-menu-item-button-padding-horizontal));border:none;border-radius:var(--mg-b-size-8);background-color:unset;color:var(--mg-c-menu-item-color-text, var(--mg-b-color-dark));column-gap:var(--mg-b-size-8);cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button::after{position:absolute;background-color:var(--mg-c-menu-item-color);content:""}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-menu-item__navigation-button:hover,.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled)::before,.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled)::before{position:absolute;z-index:-1;top:0;left:0;width:stretch;height:var(--mg-c-menu-item-height);box-sizing:border-box;border-radius:var(--mg-b-size-8);margin-right:var(--mg-c-menu-item-button-margin-horizontal);margin-left:var(--mg-c-menu-item-button-margin-horizontal);background-color:color-mix(in srgb, var(--mg-c-menu-item-color-text, var(--mg-b-color-dark)), transparent 90%);content:""}.mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item__navigation-button ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-menu-item__navigation-button:not(.mg-c-menu-item__navigation-button--disabled).mg-c-menu-item__navigation-button--horizontal::before{margin:var(--mg-c-menu-item-button-spacing-vertical) var(--mg-c-menu-item-button-margin-horizontal)}.mg-c-menu-item__navigation-button:not(.mg-c-menu-item__navigation-button--disabled).mg-c-menu-item__navigation-button--vertical::before{height:100%;margin:0 var(--mg-c-menu-item-button-margin-horizontal)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:var(--mg-c-menu-item-color);font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal::after{bottom:0;left:50%;width:calc(100% - var(--mg-b-size-12)*2);height:var(--mg-b-size-4);border-top-left-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateX(-50%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical::after{top:50%;left:0;width:var(--mg-b-size-4);height:calc(100% - var(--mg-b-size-8)*2);border-bottom-right-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateY(-50%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item{max-width:var(--mg-c-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-new-tab{margin-left:var(--mg-b-size-4)}.mg-c-menu-item__navigation-button-chevron{display:var(--mg-c-menu-item-chevron-display);margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:var(--mg-b-size-8);font-size:var(--mg-b-font-size)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--is-icon{min-width:calc(var(--mg-c-menu-item-height) + var(--mg-c-menu-item-button-margin-horizontal)*2);justify-content:center;padding:var(--mg-b-size-2);gap:var(--mg-b-size-4)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--is-icon::before{min-width:var(--mg-c-menu-item-height)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--is-icon .mg-c-menu-item__navigation-button-text-content-notification{margin-left:0}:host{position:relative;display:flex;--mg-c-popover-spacing-vertical:0;--mg-c-popover-spacing-horizontal:0;--mg-c-popover-max-width:unset;--mg-c-menu-item-height:var(--mg-b-size-40)}:host mg-popover{--mg-c-popover-overflow:hidden}:host mg-popover-content[data-popper-placement^=bottom][data-arrow-hide]{margin-top:var(--mg-b-size-2) !important}:host([data-style-direction=vertical]){--mg-c-menu-item-height:var(--mg-b-size-24);--mg-c-menu-item-button-margin-horizontal:var(--mg-b-size-8);--mg-c-menu-item-button-padding-horizontal:var(--mg-b-size-12);--mg-c-menu-item-button-spacing-vertical:var(--mg-b-size-8);flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction=vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-style-direction=horizontal]){--mg-c-menu-item-button-margin-horizontal:var(--mg-b-size-4);--mg-c-menu-item-button-padding-horizontal:var(--mg-b-size-12);--mg-c-menu-item-button-spacing-vertical:var(--mg-b-size-12)}:host([data-style-direction=horizontal]) ::slotted(mg-menu),.mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:var(--mg-b-size-8) 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted([slot=metadata]){color:var(--mg-b-color-neutral-90)}::slotted(*){display:flex;flex-direction:column}::slotted([slot=image]){width:auto !important;max-width:calc(var(--mg-c-menu-item-height) - var(--mg-b-size-8)) !important;height:auto !important;max-height:calc(var(--mg-c-menu-item-height) - var(--mg-b-size-8)) !important}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}`;
|
|
5842
6021
|
|
|
5843
6022
|
const MgMenuItem = class {
|
|
5844
6023
|
constructor(hostRef) {
|
|
@@ -5899,8 +6078,10 @@ const MgMenuItem = class {
|
|
|
5899
6078
|
* Condition to know if component should display a mg-popover
|
|
5900
6079
|
* @returns truthy if component display popover
|
|
5901
6080
|
*/
|
|
5902
|
-
this.hasPopover = () => this.isDirection(directions$
|
|
5903
|
-
((this.isInMainMenu() &&
|
|
6081
|
+
this.hasPopover = () => this.isDirection(directions$2.HORIZONTAL) &&
|
|
6082
|
+
((this.isInMainMenu() &&
|
|
6083
|
+
Array.from(this.element.children).some((element) => element.querySelector('[slot]') === null)) ||
|
|
6084
|
+
this.isItemMore) &&
|
|
5904
6085
|
this.href === undefined;
|
|
5905
6086
|
/**
|
|
5906
6087
|
* Method to control if one of component children have active status
|
|
@@ -5934,7 +6115,8 @@ const MgMenuItem = class {
|
|
|
5934
6115
|
this.updateDisplayNotificationBadge = () => {
|
|
5935
6116
|
const childMenu = this.element.querySelector('mg-menu');
|
|
5936
6117
|
this.displayNotificationBadge =
|
|
5937
|
-
childMenu !== null &&
|
|
6118
|
+
childMenu !== null &&
|
|
6119
|
+
Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && !subItem.hasAttribute('hidden'));
|
|
5938
6120
|
};
|
|
5939
6121
|
/**
|
|
5940
6122
|
* Update expanded prop
|
|
@@ -5943,7 +6125,7 @@ const MgMenuItem = class {
|
|
|
5943
6125
|
this.updateExpanded = (newValue) => {
|
|
5944
6126
|
if (this.isInteractiveItem()) {
|
|
5945
6127
|
// item is always expanded in vertical menu when has active child
|
|
5946
|
-
this.expanded = (this.isDirection(directions$
|
|
6128
|
+
this.expanded = (this.isDirection(directions$2.VERTICAL) && this.hasActiveChild()) || newValue;
|
|
5947
6129
|
}
|
|
5948
6130
|
};
|
|
5949
6131
|
/**
|
|
@@ -5962,11 +6144,11 @@ const MgMenuItem = class {
|
|
|
5962
6144
|
this.updateSlot = (guard = false) => {
|
|
5963
6145
|
// slot title AND metadata validation
|
|
5964
6146
|
// add title on label AND metada slots due to text-overflow on these element
|
|
5965
|
-
if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) {
|
|
6147
|
+
if (Array.from(this.element.children).find((child) => child.getAttribute('slot') === 'label') === undefined) {
|
|
5966
6148
|
throw new Error(`<${this.name}> slot "label" is required.`);
|
|
5967
6149
|
}
|
|
5968
|
-
['label', 'metadata'].forEach(slot => {
|
|
5969
|
-
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
|
|
6150
|
+
['label', 'metadata'].forEach((slot) => {
|
|
6151
|
+
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach((element) => {
|
|
5970
6152
|
if (!index$1.isValidString(element.textContent))
|
|
5971
6153
|
throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
|
|
5972
6154
|
if ((guard && !element.hasAttribute('title')) || !guard)
|
|
@@ -6064,7 +6246,7 @@ const MgMenuItem = class {
|
|
|
6064
6246
|
else {
|
|
6065
6247
|
this.updateExpanded(newValue);
|
|
6066
6248
|
// when expanded all actives sub-items need to be expanded and non active closed
|
|
6067
|
-
Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
|
|
6249
|
+
Array.from(this.element.querySelectorAll('mg-menu-item')).forEach((item) => {
|
|
6068
6250
|
if (item !== this.element)
|
|
6069
6251
|
item.expanded = newValue ? this.hasStatus(item, Status$1.ACTIVE) : false;
|
|
6070
6252
|
});
|
|
@@ -6075,8 +6257,8 @@ const MgMenuItem = class {
|
|
|
6075
6257
|
this.classNavigationButtonClassList.delete(`${this.classNavigationButton}--${oldValue}`);
|
|
6076
6258
|
this.classNavigationButtonClassList.add(`${this.classNavigationButton}--${newValue}`);
|
|
6077
6259
|
// manage all sub levels child menu-items level with data-level attribut
|
|
6078
|
-
Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
|
|
6079
|
-
if (this.isDirection(directions$
|
|
6260
|
+
Array.from(this.element.querySelectorAll('mg-menu-item')).forEach((item) => {
|
|
6261
|
+
if (this.isDirection(directions$2.VERTICAL, newValue)) {
|
|
6080
6262
|
item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
|
|
6081
6263
|
}
|
|
6082
6264
|
else {
|
|
@@ -6093,7 +6275,6 @@ const MgMenuItem = class {
|
|
|
6093
6275
|
* direction value in dataset
|
|
6094
6276
|
* @param newValue - new direction value
|
|
6095
6277
|
*/
|
|
6096
|
-
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
6097
6278
|
watchDataStyleDirection(newValue) {
|
|
6098
6279
|
this.direction = newValue;
|
|
6099
6280
|
this.watchIsIcon(this.isIcon);
|
|
@@ -6102,7 +6283,6 @@ const MgMenuItem = class {
|
|
|
6102
6283
|
* has focus value in dataset
|
|
6103
6284
|
* @param newValue - new direction value
|
|
6104
6285
|
*/
|
|
6105
|
-
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
6106
6286
|
watchDataHasFocus(newValue) {
|
|
6107
6287
|
if (!index$1.isValidString(newValue))
|
|
6108
6288
|
this.updateExpanded(Boolean(newValue));
|
|
@@ -6129,7 +6309,7 @@ const MgMenuItem = class {
|
|
|
6129
6309
|
mgInput_conf.normalizeBooleanAttributes(this);
|
|
6130
6310
|
// has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
|
|
6131
6311
|
// we store only matching elements
|
|
6132
|
-
this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
|
|
6312
|
+
this.hasChildren = Array.from(this.element.children).some((child) => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
|
|
6133
6313
|
this.messages = index$2.initLocales(this.element).messages.menuItem;
|
|
6134
6314
|
this.isItemMore = this.element.dataset.overflowMore !== undefined;
|
|
6135
6315
|
// watchers
|
|
@@ -6154,12 +6334,12 @@ const MgMenuItem = class {
|
|
|
6154
6334
|
this.updateItem([Status$1.ACTIVE]);
|
|
6155
6335
|
// emit loaded event when component is fully loaded
|
|
6156
6336
|
this.itemLoaded.emit();
|
|
6157
|
-
new MutationObserver(mutationsList => {
|
|
6158
|
-
if (mutationsList.some(mutation => ['hidden', 'status'].includes(mutation.attributeName)))
|
|
6337
|
+
new MutationObserver((mutationsList) => {
|
|
6338
|
+
if (mutationsList.some((mutation) => ['hidden', 'status'].includes(mutation.attributeName)))
|
|
6159
6339
|
this.updateStatus(this.hasChildren ? undefined : [Status$1.ACTIVE]);
|
|
6160
|
-
if (mutationsList.some(mutation => mutation.type === 'characterData'))
|
|
6340
|
+
if (mutationsList.some((mutation) => mutation.type === 'characterData'))
|
|
6161
6341
|
this.updateSlot();
|
|
6162
|
-
if (mutationsList.some(mutation => mutation.type === 'childList'))
|
|
6342
|
+
if (mutationsList.some((mutation) => mutation.type === 'childList'))
|
|
6163
6343
|
this.updateItem();
|
|
6164
6344
|
this.itemUpdated.emit();
|
|
6165
6345
|
}).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
|
|
@@ -6202,9 +6382,9 @@ const MgMenuItem = class {
|
|
|
6202
6382
|
render() {
|
|
6203
6383
|
const getContainerClasses = () => ({
|
|
6204
6384
|
['mg-c-menu-item__collapse-container']: true,
|
|
6205
|
-
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions$
|
|
6385
|
+
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions$2.HORIZONTAL),
|
|
6206
6386
|
});
|
|
6207
|
-
return (index.h(index.Host, { key: '
|
|
6387
|
+
return (index.h(index.Host, { key: '68705299d83c64af9e915a6e4d471e78ed6d92ab', role: this.isItemMore ? 'presentation' : 'listitem' }, this.hasPopover() ? (index.h("mg-popover", { display: this.expanded, placement: "bottom-start", "onDisplay-change": this.handlePopoverDisplay, identifier: this.popoverIdentifier, "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
|
|
6208
6388
|
}, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
|
|
6209
6389
|
this.renderInteractiveElement(),
|
|
6210
6390
|
index.h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
|
|
@@ -6252,7 +6432,7 @@ const variants$1 = ['info', 'warning', 'success', 'danger'];
|
|
|
6252
6432
|
*/
|
|
6253
6433
|
const variantStyles = ['bar-left', 'background'];
|
|
6254
6434
|
|
|
6255
|
-
const mgMessageCss = () => `:host{--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-message-border-radius);--mg-c-card-border:none;--mg-c-card-overflow:hidden}.mg-c-message{display:inline-block;min-block-size:var(--mg-b-size-min-height)}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:var(--mg-b-color-danger)}.mg-c-message.mg-c-message--danger.mg-c-message--bar-left .mg-c-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%}`;
|
|
6435
|
+
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;min-block-size:var(--mg-b-size-min-height);padding-block:0;padding-inline:calc(var(--mg-b-size-8) + var(--mg-b-size-16) + var(--mg-b-size-8)) var(--mg-b-size-8);place-content:stretch flex-end}.mg-c-message__content-slot{flex-grow:1;margin:var(--mg-b-size-8) 0}.mg-c-message__content-separator{display:inline-block;block-size:0;inline-size:var(--mg-b-size-40)}.mg-c-message__content-actions-slot{padding:var(--mg-b-size-8) 0;text-align:end}.mg-c-message ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}.mg-c-message,.mg-c-message mg-message{max-inline-size:100%}.mg-c-message.mg-c-message--full-width{display:block;inline-size:100%}`;
|
|
6256
6436
|
|
|
6257
6437
|
const MgMessage = class {
|
|
6258
6438
|
constructor(hostRef) {
|
|
@@ -6348,9 +6528,9 @@ const MgMessage = class {
|
|
|
6348
6528
|
* @returns HTML Element
|
|
6349
6529
|
*/
|
|
6350
6530
|
render() {
|
|
6351
|
-
return (index.h("div", { key: '
|
|
6531
|
+
return (index.h("div", { key: 'a182451917bfe33de32c893d9eeedd52b11f8b15', class: this.classCollection.join() }, index.h("mg-card", { key: '9dd0da031d97f669e885a1681b72e5a086e79c0b', shadow: this.variantStyle !== 'background' }, index.h("span", { key: '158c2470a10ab9d677e2031c28ad0d43c09e4cf2', class: "mg-c-message__icon" }, index.h("mg-icon", { key: 'f7d0cb02781d2bf5a71fbd7f9498ebf4dca31edf', icon: this.getIcon() })), index.h("div", { key: '56a7299983c30ea4527bb19a46ac0677b6e8c40e', class: "mg-c-message__content" }, index.h("span", { key: '744ad763177f92bdbac37d43a5a58f221ff97e69', class: "mg-c-message__content-slot" }, index.h("slot", { key: '14b7f22e206bd074336287809574b2a5abfe5bf5' })), this.hasActions && [
|
|
6352
6532
|
index.h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
|
|
6353
|
-
index.h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, index.h("slot", { key: '
|
|
6533
|
+
index.h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, index.h("slot", { key: '104be326f73ded002cba9a471491ca614227e3d5', name: "actions" })),
|
|
6354
6534
|
]))));
|
|
6355
6535
|
}
|
|
6356
6536
|
get element() { return index.getElement(this); }
|
|
@@ -6479,11 +6659,11 @@ const MgModal = class {
|
|
|
6479
6659
|
* @returns HTML Element
|
|
6480
6660
|
*/
|
|
6481
6661
|
render() {
|
|
6482
|
-
return (index.h("dialog", { key: '
|
|
6662
|
+
return (index.h("dialog", { key: '3b802b99d96be80d8071c89be6537269866e6fff', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
|
|
6483
6663
|
if (el !== null) {
|
|
6484
6664
|
this.dialog = el;
|
|
6485
6665
|
}
|
|
6486
|
-
} }, index.h("mg-card", { key: '
|
|
6666
|
+
} }, index.h("mg-card", { key: '4985b4af69968577ffd36a6a2b1f96274703d146', shadow: true }, index.h("div", { key: 'c4aed6d29dc5ee00f323dcbaecff9532f370ec98', class: "mg-c-modal__dialog" }, index.h("header", { key: '3bfeb66d59144c0cba3fd82c1fb4dee2ed62cea7', class: "mg-c-modal__header" }, this.closeButton && (index.h("span", { key: '55205da6c8991444ff53da7224b28c7475b0e173', class: "mg-c-modal__close-button" }, index.h("mg-button", { key: 'da7fdea3a124a559cb637beea9d5565c1f777eea', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, index.h("mg-icon", { key: '77c2ab2bcacdda9fa179b480651507a1d6584686', icon: "cross" })))), index.h("h1", { key: 'cedb5efc709de2d18e81409139da790349a48bb8', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), index.h("article", { key: '7f24e65244836c08dbf7465f8c80970080003bcd', class: "mg-c-modal__content" }, index.h("slot", { key: '36d7c2a0ef1bb1024887da08298391962285bbf8' })), this.hasActions && (index.h("footer", { key: '5967d650e4e58726641a3c960d82aa7ee588e38f', class: "mg-c-modal__footer" }, index.h("slot", { key: 'c275b8235acb658ded3db7c69b931000a5ff14d2', name: "actions" })))))));
|
|
6487
6667
|
}
|
|
6488
6668
|
get element() { return index.getElement(this); }
|
|
6489
6669
|
static get watchers() { return {
|
|
@@ -6508,7 +6688,7 @@ const NavigationAction = {
|
|
|
6508
6688
|
PREVIOUS: 'previous',
|
|
6509
6689
|
};
|
|
6510
6690
|
|
|
6511
|
-
const mgPaginationCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip
|
|
6691
|
+
const mgPaginationCss = () => `.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-pagination{display:flex;align-items:center;gap:var(--mg-b-spacing-actions)}.mg-c-pagination__page-count{display:flex;align-items:center;gap:var(--mg-b-size-4)}.mg-c-pagination__page-count-text{margin:0}.mg-c-pagination.mg-c-pagination--hide-page-count{gap:0}`;
|
|
6512
6692
|
|
|
6513
6693
|
/**
|
|
6514
6694
|
* Range generator
|
|
@@ -6531,7 +6711,7 @@ const mgPaginationCss = () => `.mg-u-visually-hidden{position:absolute !importan
|
|
|
6531
6711
|
* @param step - step size
|
|
6532
6712
|
* @returns range numbers
|
|
6533
6713
|
*/
|
|
6534
|
-
const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
|
|
6714
|
+
const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map((x) => start + x * step);
|
|
6535
6715
|
const MgPagination = class {
|
|
6536
6716
|
constructor(hostRef) {
|
|
6537
6717
|
index.registerInstance(this, hostRef);
|
|
@@ -6581,7 +6761,9 @@ const MgPagination = class {
|
|
|
6581
6761
|
* @param disabled - button disable state
|
|
6582
6762
|
*/
|
|
6583
6763
|
this.handleGoToPage = (action, disabled) => {
|
|
6584
|
-
!disabled
|
|
6764
|
+
if (!disabled) {
|
|
6765
|
+
this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
|
|
6766
|
+
}
|
|
6585
6767
|
};
|
|
6586
6768
|
}
|
|
6587
6769
|
watchIdentifier(newValue) {
|
|
@@ -6604,7 +6786,9 @@ const MgPagination = class {
|
|
|
6604
6786
|
this.currentPageChange.emit(newValue);
|
|
6605
6787
|
}
|
|
6606
6788
|
watchPaginationMessages(newValue) {
|
|
6607
|
-
if (Boolean(newValue) &&
|
|
6789
|
+
if (Boolean(newValue) &&
|
|
6790
|
+
(typeof newValue !== 'object' ||
|
|
6791
|
+
!['next', 'previous', 'nextLabel', 'previousLabel'].every((key) => index$1.isValidString(newValue[key])))) {
|
|
6608
6792
|
throw new Error('<mg-pagination> prop "messages" must be a valid "PaginationMessagesType".');
|
|
6609
6793
|
}
|
|
6610
6794
|
}
|
|
@@ -6644,7 +6828,7 @@ const MgPagination = class {
|
|
|
6644
6828
|
// eslint-disable-next-line react/jsx-no-bind
|
|
6645
6829
|
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && index.h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && navigationMessages[action], action === NavigationAction.NEXT && index.h("mg-icon", { icon: "chevron-right" })));
|
|
6646
6830
|
};
|
|
6647
|
-
return (index.h(index.Host, { hidden: this.totalPages < 2 }, index.h("nav", { role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (index.h("div", { class: "mg-c-pagination__page-count" }, index.h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.localesMessages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), index.h("span", { class: "mg-u-visually-hidden" }, this.localesMessages.pagination.page, " ", this.currentPage), "/ ", this.totalPages,
|
|
6831
|
+
return (index.h(index.Host, { hidden: this.totalPages < 2 }, index.h("nav", { role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (index.h("div", { class: "mg-c-pagination__page-count" }, index.h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map((page) => page.toString()), label: this.localesMessages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), index.h("p", { class: "mg-c-pagination__page-count-text" }, index.h("span", { class: "mg-u-visually-hidden" }, this.localesMessages.pagination.page, " ", this.currentPage), "/ ", this.totalPages, ' ', this.totalPages > 1 ? this.localesMessages.pagination.pages : this.localesMessages.pagination.page))), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
|
|
6648
6832
|
}
|
|
6649
6833
|
get element() { return index.getElement(this); }
|
|
6650
6834
|
static get watchers() { return {
|
|
@@ -6780,7 +6964,12 @@ const MgPanel = class {
|
|
|
6780
6964
|
* Render collapse button
|
|
6781
6965
|
* @returns collpase button
|
|
6782
6966
|
*/
|
|
6783
|
-
this.renderCollapseButton = () => (index.h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.expandToggleDisplay === 'icon' ? this.panelTitle : undefined }, index.h("span", { class: "mg-c-panel__collapse-button-content" }, index.h("mg-icon", { icon: "chevron-up", class: {
|
|
6967
|
+
this.renderCollapseButton = () => (index.h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.expandToggleDisplay === 'icon' ? this.panelTitle : undefined }, index.h("span", { class: "mg-c-panel__collapse-button-content" }, index.h("mg-icon", { icon: "chevron-up", class: {
|
|
6968
|
+
'mg-c-panel__collapse-button-icon': true,
|
|
6969
|
+
'mg-c-panel__collapse-button-icon--reverse': !this.expanded,
|
|
6970
|
+
} }), !this.isEditing &&
|
|
6971
|
+
this.expandToggleDisplay !== 'icon' &&
|
|
6972
|
+
(this.hasPanelTitleSlot() ? index.h("slot", { name: "panel-title" }) : this.panelTitle))));
|
|
6784
6973
|
/**
|
|
6785
6974
|
* Render edit button
|
|
6786
6975
|
* @returns edit Button
|
|
@@ -6812,7 +7001,11 @@ const MgPanel = class {
|
|
|
6812
7001
|
*/
|
|
6813
7002
|
this.renderHeaderChildren = () => {
|
|
6814
7003
|
const children = [
|
|
6815
|
-
index.h("div", { class: {
|
|
7004
|
+
index.h("div", { class: {
|
|
7005
|
+
'mg-c-panel__header-title': true,
|
|
7006
|
+
'mg-c-panel__header-title--full': this.isEditing,
|
|
7007
|
+
'mg-c-panel__header-title--reverse': this.titlePosition === 'right',
|
|
7008
|
+
}, key: this.panelTitle }, this.renderTitle()),
|
|
6816
7009
|
index.h("div", { class: "mg-c-panel__header-content", key: "slot-header" }, index.h("slot", { name: "header-right" })),
|
|
6817
7010
|
];
|
|
6818
7011
|
return this.titlePosition === 'right' ? children.reverse() : children;
|
|
@@ -6906,7 +7099,7 @@ const MgPanel = class {
|
|
|
6906
7099
|
*/
|
|
6907
7100
|
render() {
|
|
6908
7101
|
const headerId = `${this.identifier}-header`;
|
|
6909
|
-
return (index.h("section", { key: '
|
|
7102
|
+
return (index.h("section", { key: '33e6da36cbb92f19bcd957de7758c1a13ced5e83', class: this.classCollection.join(), id: this.identifier }, index.h("mg-card", { key: 'df278e46b4604d8c5dce2abeffb2e979b02f34e9', shadow: this.shadow }, index.h("header", { key: 'b68012115af4bb5b62b6357fc07cbf50876ac08f', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), index.h("article", { key: '3dfec67e6531fc0dff866e102ac36bd6c6a48834', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, index.h("slot", { key: '56c63dd0b0e98968594ff713c2c6ee2a3269b74b' })))));
|
|
6910
7103
|
}
|
|
6911
7104
|
get element() { return index.getElement(this); }
|
|
6912
7105
|
static get watchers() { return {
|
|
@@ -8742,11 +8935,7 @@ const MgPopover = class {
|
|
|
8742
8935
|
/**
|
|
8743
8936
|
* Popover placement
|
|
8744
8937
|
*/
|
|
8745
|
-
this.placement = 'bottom';
|
|
8746
|
-
/**
|
|
8747
|
-
* Hide popover arrow
|
|
8748
|
-
*/
|
|
8749
|
-
this.arrowHide = false;
|
|
8938
|
+
this.placement = 'bottom-start';
|
|
8750
8939
|
/**
|
|
8751
8940
|
* Define if popover has a cross button
|
|
8752
8941
|
*/
|
|
@@ -8771,7 +8960,8 @@ const MgPopover = class {
|
|
|
8771
8960
|
// retargeted to the outer shadow host and `closest()` cannot reach the popover
|
|
8772
8961
|
// nor the `data-mg-popover-guard` element.
|
|
8773
8962
|
const path = event.composedPath();
|
|
8774
|
-
const isInside = path.includes(this.element) ||
|
|
8963
|
+
const isInside = path.includes(this.element) ||
|
|
8964
|
+
path.some((node) => node instanceof HTMLElement && node.dataset.mgPopoverGuard === this.identifier);
|
|
8775
8965
|
if (!this.disabled && !isInside) {
|
|
8776
8966
|
this.display = false;
|
|
8777
8967
|
}
|
|
@@ -8810,7 +9000,7 @@ const MgPopover = class {
|
|
|
8810
9000
|
* @param newValue - if true enable popper listners
|
|
8811
9001
|
*/
|
|
8812
9002
|
this.setPopperListeners = (newValue) => {
|
|
8813
|
-
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: newValue }] })));
|
|
9003
|
+
this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: newValue }] })));
|
|
8814
9004
|
};
|
|
8815
9005
|
/**
|
|
8816
9006
|
* Manage all clickOustside listeners
|
|
@@ -8847,13 +9037,9 @@ const MgPopover = class {
|
|
|
8847
9037
|
this.mgPopoverContent.setAttribute('slot', 'content');
|
|
8848
9038
|
this.mgPopoverContent.setAttribute('id', this.identifier);
|
|
8849
9039
|
this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
|
|
8850
|
-
const arrow = document.createElement('div');
|
|
8851
|
-
arrow.setAttribute('slot', 'arrow');
|
|
8852
|
-
arrow.dataset.popperArrow = '';
|
|
8853
|
-
this.mgPopoverContent.appendChild(arrow);
|
|
8854
9040
|
// insert elements in DOM
|
|
8855
|
-
['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
|
|
8856
|
-
Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
|
|
9041
|
+
['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach((slotType) => {
|
|
9042
|
+
Array.from(this.element.querySelectorAll(slotType)).forEach((slot) => {
|
|
8857
9043
|
this.mgPopoverContent.appendChild(slot);
|
|
8858
9044
|
});
|
|
8859
9045
|
});
|
|
@@ -8871,12 +9057,6 @@ const MgPopover = class {
|
|
|
8871
9057
|
// use renderPopoverContent to update popover-content id
|
|
8872
9058
|
this.renderPopoverContent();
|
|
8873
9059
|
}
|
|
8874
|
-
validateArrowHide(newValue) {
|
|
8875
|
-
if (newValue)
|
|
8876
|
-
this.mgPopoverContent.dataset.arrowHide = '';
|
|
8877
|
-
else
|
|
8878
|
-
delete this.mgPopoverContent.dataset.arrowHide;
|
|
8879
|
-
}
|
|
8880
9060
|
validateCloseButton(newValue) {
|
|
8881
9061
|
this.mgPopoverContent.closeButton = newValue;
|
|
8882
9062
|
}
|
|
@@ -8908,7 +9088,6 @@ const MgPopover = class {
|
|
|
8908
9088
|
this.renderPopoverContent();
|
|
8909
9089
|
this.validateCloseButton(this.closeButton);
|
|
8910
9090
|
this.validateIdentifier(this.identifier);
|
|
8911
|
-
this.validateArrowHide(this.arrowHide);
|
|
8912
9091
|
}
|
|
8913
9092
|
/**
|
|
8914
9093
|
* Check if component props are well configured on init
|
|
@@ -8921,6 +9100,9 @@ const MgPopover = class {
|
|
|
8921
9100
|
// Add aria attributes
|
|
8922
9101
|
this.interactiveElement.setAttribute('aria-controls', this.identifier);
|
|
8923
9102
|
this.interactiveElement.setAttribute('aria-expanded', `${this.display}`);
|
|
9103
|
+
// Mark the trigger so the button stays visually active while the popover is open,
|
|
9104
|
+
// without styling every generic aria-expanded (e.g. mg-panel disclosure toggle)
|
|
9105
|
+
this.interactiveElement.setAttribute('data-mg-popover-trigger', '');
|
|
8924
9106
|
const fallbackPlacements = [];
|
|
8925
9107
|
if (this.element.dataset.fallbackPlacement !== undefined) {
|
|
8926
9108
|
fallbackPlacements.push(this.element.dataset.fallbackPlacement);
|
|
@@ -8933,7 +9115,8 @@ const MgPopover = class {
|
|
|
8933
9115
|
{
|
|
8934
9116
|
name: 'offset',
|
|
8935
9117
|
options: {
|
|
8936
|
-
|
|
9118
|
+
// 2px gap with the trigger element, applied on the main axis only (no cross-axis shift so `-start`/`-end` stay aligned)
|
|
9119
|
+
offset: [0, 2],
|
|
8937
9120
|
},
|
|
8938
9121
|
},
|
|
8939
9122
|
{
|
|
@@ -8945,7 +9128,7 @@ const MgPopover = class {
|
|
|
8945
9128
|
],
|
|
8946
9129
|
});
|
|
8947
9130
|
// add resize observer
|
|
8948
|
-
[this.interactiveElement, this.element.querySelector('mg-popover-content')].forEach(element => {
|
|
9131
|
+
[this.interactiveElement, this.element.querySelector('mg-popover-content')].forEach((element) => {
|
|
8949
9132
|
new ResizeObserver(() => {
|
|
8950
9133
|
this.popper.update();
|
|
8951
9134
|
}).observe(element);
|
|
@@ -8962,7 +9145,7 @@ const MgPopover = class {
|
|
|
8962
9145
|
}
|
|
8963
9146
|
});
|
|
8964
9147
|
// Add events to hide popover
|
|
8965
|
-
this.element.addEventListener('keydown', e => {
|
|
9148
|
+
this.element.addEventListener('keydown', (e) => {
|
|
8966
9149
|
if (!this.disabled && e.code === 'Escape') {
|
|
8967
9150
|
this.display = false;
|
|
8968
9151
|
this.componentClose.emit();
|
|
@@ -8976,16 +9159,13 @@ const MgPopover = class {
|
|
|
8976
9159
|
* @returns HTML Element
|
|
8977
9160
|
*/
|
|
8978
9161
|
render() {
|
|
8979
|
-
return (index.h(index.Host, { key: '
|
|
9162
|
+
return (index.h(index.Host, { key: '431539cd450da49af5587372a12cbe33956ec5b1' }, index.h("slot", { key: '30e66567cc00667665b70306b3c9ba2fa541fa1e' }), index.h("slot", { key: '7fcfcd55904128ef4f7a66e16a31a957e5b7af75', name: "content" })));
|
|
8980
9163
|
}
|
|
8981
9164
|
get element() { return index.getElement(this); }
|
|
8982
9165
|
static get watchers() { return {
|
|
8983
9166
|
"identifier": [{
|
|
8984
9167
|
"validateIdentifier": 0
|
|
8985
9168
|
}],
|
|
8986
|
-
"arrowHide": [{
|
|
8987
|
-
"validateArrowHide": 0
|
|
8988
|
-
}],
|
|
8989
9169
|
"closeButton": [{
|
|
8990
9170
|
"validateCloseButton": 0
|
|
8991
9171
|
}],
|
|
@@ -8996,7 +9176,7 @@ const MgPopover = class {
|
|
|
8996
9176
|
};
|
|
8997
9177
|
MgPopover.style = mgPopoverCss();
|
|
8998
9178
|
|
|
8999
|
-
const mgPopoverContentCss = () => `:host{position:relative;z-index:2000;display:none;
|
|
9179
|
+
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)}`;
|
|
9000
9180
|
|
|
9001
9181
|
const MgPopoverContent = class {
|
|
9002
9182
|
constructor(hostRef) {
|
|
@@ -9042,7 +9222,7 @@ const MgPopoverContent = class {
|
|
|
9042
9222
|
* @returns HTML Element
|
|
9043
9223
|
*/
|
|
9044
9224
|
render() {
|
|
9045
|
-
return (index.h(index.Host, { key: '
|
|
9225
|
+
return (index.h(index.Host, { key: '7035d8f560b811596c9c641abc7fe28ee9fdf3a2' }, index.h("mg-card", { key: 'badc81425100283dac69cad111514d8c3edfba45', class: this.classCollection.join(), shadow: true }, this.closeButton && (index.h("mg-button", { key: 'cb20d8c7db741051b532c3b1653d578df859f0d0', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { key: '389dc26f4cfdbb899b2b9eb4b27ceb6369209b2f', icon: "cross" }))), index.h("div", { key: '29b6721af3b6e06760affd6565e740bbc667f457', class: "mg-c-popover-content__title" }, index.h("slot", { key: '5834364d298a4e65a9170f003d0ec1f5e8868c4a', name: "title" })), index.h("slot", { key: '8398f497064fe097151ca263225349a9d84d4f36', name: "content" }))));
|
|
9046
9226
|
}
|
|
9047
9227
|
get element() { return index.getElement(this); }
|
|
9048
9228
|
};
|
|
@@ -9068,7 +9248,9 @@ const MgSkipLinks = class {
|
|
|
9068
9248
|
};
|
|
9069
9249
|
}
|
|
9070
9250
|
validateLinks(links) {
|
|
9071
|
-
if (links === undefined ||
|
|
9251
|
+
if (links === undefined ||
|
|
9252
|
+
links.length === 0 ||
|
|
9253
|
+
links.some((link) => !index$1.isValidString(link.href) || !link.href.startsWith('#') || !index$1.isValidString(link.label))) {
|
|
9072
9254
|
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.`);
|
|
9073
9255
|
}
|
|
9074
9256
|
}
|
|
@@ -9087,7 +9269,7 @@ const MgSkipLinks = class {
|
|
|
9087
9269
|
* @returns HTML Element
|
|
9088
9270
|
*/
|
|
9089
9271
|
render() {
|
|
9090
|
-
return (index.h("nav", { key: '
|
|
9272
|
+
return (index.h("nav", { key: '9208da538e001be23c8cc78e8a34498cd072cdc6', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, index.h("ul", { key: 'fcd69f398fad6964d5c017bb652ad7b8de34dee6', class: "mg-c-skip-links__list", role: "list" }, this.links.map((link) => (index.h("li", { key: link.href }, index.h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
|
|
9091
9273
|
}
|
|
9092
9274
|
get element() { return index.getElement(this); }
|
|
9093
9275
|
static get watchers() { return {
|
|
@@ -9111,7 +9293,7 @@ const textAlignments = ['left', 'center', 'right'];
|
|
|
9111
9293
|
// Define possible data types
|
|
9112
9294
|
const dataTypes = ['string', 'numeric', 'date'];
|
|
9113
9295
|
|
|
9114
|
-
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
|
|
9296
|
+
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)}`;
|
|
9115
9297
|
|
|
9116
9298
|
/**
|
|
9117
9299
|
* Check if value is a valid align object
|
|
@@ -9134,7 +9316,7 @@ typeof newValue === 'object' &&
|
|
|
9134
9316
|
(value.sortable !== undefined && typeof value.sortable === 'boolean') ||
|
|
9135
9317
|
(value.datatype !== undefined && dataTypes.includes(value.datatype))) &&
|
|
9136
9318
|
// ensure no extra properties are present
|
|
9137
|
-
Object.keys(value).every(key => ['align', 'sortable', 'datatype'].includes(key)));
|
|
9319
|
+
Object.keys(value).every((key) => ['align', 'sortable', 'datatype'].includes(key)));
|
|
9138
9320
|
/**
|
|
9139
9321
|
* Compare values
|
|
9140
9322
|
* @param firstValue - First value
|
|
@@ -9260,12 +9442,16 @@ const MgTable = class {
|
|
|
9260
9442
|
// Add event listener
|
|
9261
9443
|
button.addEventListener('click', () => {
|
|
9262
9444
|
// Reset aria pressed
|
|
9263
|
-
table
|
|
9445
|
+
table
|
|
9446
|
+
.querySelectorAll(`thead td:not(:nth-child(${key})) [aria-pressed],thead th:not(:nth-child(${key})) [aria-pressed]`)
|
|
9447
|
+
.forEach((ariaPressed) => {
|
|
9264
9448
|
ariaPressed.removeAttribute('aria-pressed');
|
|
9265
9449
|
ariaPressed.querySelector('mg-icon').setAttribute('icon', 'arrows-up-down');
|
|
9266
9450
|
});
|
|
9267
9451
|
// Reset aria sort
|
|
9268
|
-
table
|
|
9452
|
+
table
|
|
9453
|
+
.querySelectorAll(`thead td:not(:nth-child(${key}))[aria-sort],thead th:not(:nth-child(${key}))[aria-sort]`)
|
|
9454
|
+
.forEach((ariaSort) => {
|
|
9269
9455
|
ariaSort.removeAttribute('aria-sort');
|
|
9270
9456
|
});
|
|
9271
9457
|
// Set aria pressed
|
|
@@ -9300,7 +9486,7 @@ const MgTable = class {
|
|
|
9300
9486
|
// If sort order is none, return to original order
|
|
9301
9487
|
if (sortOrder === 'none') {
|
|
9302
9488
|
// Append rows to table
|
|
9303
|
-
rowsDefault.forEach(row => table.querySelector('tbody').append(row));
|
|
9489
|
+
rowsDefault.forEach((row) => table.querySelector('tbody').append(row));
|
|
9304
9490
|
return;
|
|
9305
9491
|
}
|
|
9306
9492
|
// Set a copy of rows
|
|
@@ -9318,7 +9504,7 @@ const MgTable = class {
|
|
|
9318
9504
|
return compareValues(cellValueA, cellValueB, sortOrder === 'descending', value.datatype);
|
|
9319
9505
|
});
|
|
9320
9506
|
// Append rows to table
|
|
9321
|
-
rows.forEach(row => table.querySelector('tbody').append(row));
|
|
9507
|
+
rows.forEach((row) => table.querySelector('tbody').append(row));
|
|
9322
9508
|
});
|
|
9323
9509
|
}
|
|
9324
9510
|
});
|
|
@@ -9539,7 +9725,7 @@ const MgTabs = class {
|
|
|
9539
9725
|
* Validate slots setting
|
|
9540
9726
|
*/
|
|
9541
9727
|
this.validateSlots = () => {
|
|
9542
|
-
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-'); });
|
|
9728
|
+
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-'); });
|
|
9543
9729
|
if (slots.length !== this.tabs.length)
|
|
9544
9730
|
throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
|
|
9545
9731
|
};
|
|
@@ -9557,7 +9743,7 @@ const MgTabs = class {
|
|
|
9557
9743
|
validateItems(newValue) {
|
|
9558
9744
|
// String array
|
|
9559
9745
|
if (index$1.allItemsAreString(newValue))
|
|
9560
|
-
this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
|
|
9746
|
+
this.tabs = newValue.map((item) => ({ label: item, status: Status.VISIBLE }));
|
|
9561
9747
|
// Object array
|
|
9562
9748
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
9563
9749
|
this.tabs = newValue;
|
|
@@ -9568,11 +9754,14 @@ const MgTabs = class {
|
|
|
9568
9754
|
// when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
|
|
9569
9755
|
// after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update
|
|
9570
9756
|
if (newValue === undefined) {
|
|
9571
|
-
this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))
|
|
9572
|
-
? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))
|
|
9757
|
+
this.activeTab = this.tabs.some((tab) => this.tabHasStatus(tab, Status.ACTIVE))
|
|
9758
|
+
? this.getTabItemIndex(this.tabs.findIndex((tab) => this.tabHasStatus(tab, Status.ACTIVE)))
|
|
9573
9759
|
: this.startIndex;
|
|
9574
9760
|
}
|
|
9575
|
-
else if (typeof newValue === 'number' &&
|
|
9761
|
+
else if (typeof newValue === 'number' &&
|
|
9762
|
+
newValue >= this.startIndex &&
|
|
9763
|
+
newValue <= this.tabs.length &&
|
|
9764
|
+
this.isActivableTab(this.tabs[newValue - this.startIndex])) {
|
|
9576
9765
|
// if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE
|
|
9577
9766
|
this.tabs.forEach((tab, index) => {
|
|
9578
9767
|
const isNewActiveTab = index === newValue - this.startIndex;
|
|
@@ -9621,13 +9810,13 @@ const MgTabs = class {
|
|
|
9621
9810
|
* @returns HTML Element
|
|
9622
9811
|
*/
|
|
9623
9812
|
render() {
|
|
9624
|
-
return (index.h("div", { key: '
|
|
9813
|
+
return (index.h("div", { key: '37be8d325dfea3a7b828236f3cc21da57be28154', class: this.classCollection.join() }, index.h("header", { key: 'd88f10c0331984a759f8abc311f11d913fb25206', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index$1) => (index.h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index$1), class: {
|
|
9625
9814
|
[`${this.buttonTabBaseClass}`]: true,
|
|
9626
9815
|
[`${this.buttonTabBaseClass}--horizontal`]: true,
|
|
9627
9816
|
[`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
|
|
9628
9817
|
[`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),
|
|
9629
9818
|
[`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),
|
|
9630
|
-
}, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index$1), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index$1) }, tab.icon !== undefined && index.h("mg-icon", { icon: tab.icon, size: "small" }), tab.label, tab.badge !== undefined && index.h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index$1) => (index.h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index$1), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index$1), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-c-tabs__content-container" }, index.h("slot", { name: this.getElementId('tab_content', index$1) }))))));
|
|
9819
|
+
}, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index$1), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index$1) }, tab.icon !== undefined && index.h("mg-icon", { icon: tab.icon, size: "small" }), tab.label, tab.badge !== undefined && (index.h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' })))))), this.tabs.map((tab, index$1) => (index.h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index$1), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index$1), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-c-tabs__content-container" }, index.h("slot", { name: this.getElementId('tab_content', index$1) }))))));
|
|
9631
9820
|
}
|
|
9632
9821
|
get element() { return index.getElement(this); }
|
|
9633
9822
|
static get watchers() { return {
|
|
@@ -9735,7 +9924,7 @@ const MgTag = class {
|
|
|
9735
9924
|
* @returns HTML Element
|
|
9736
9925
|
*/
|
|
9737
9926
|
render() {
|
|
9738
|
-
return (index.h("span", { key: '
|
|
9927
|
+
return (index.h("span", { key: 'd0a9551f29695cd9c49751c4950db3c13065490e', class: this.classCollection.join() }, index.h("slot", { key: '51f2a2e1c9578f6449bb9c124335ad707d5ebeb1' })));
|
|
9739
9928
|
}
|
|
9740
9929
|
get element() { return index.getElement(this); }
|
|
9741
9930
|
static get watchers() { return {
|
|
@@ -9794,7 +9983,7 @@ const MgTooltip = class {
|
|
|
9794
9983
|
// Make the tooltip visible
|
|
9795
9984
|
this.mgTooltipContent.dataset.show = '';
|
|
9796
9985
|
// Enable the event listeners
|
|
9797
|
-
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
9986
|
+
this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
9798
9987
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
9799
9988
|
index$1.nextTick(() => {
|
|
9800
9989
|
this.windows.forEach((localWindow) => {
|
|
@@ -9810,7 +9999,7 @@ const MgTooltip = class {
|
|
|
9810
9999
|
// Hide the tooltip
|
|
9811
10000
|
this.mgTooltipContent.removeAttribute('data-show');
|
|
9812
10001
|
// Disable the event listeners
|
|
9813
|
-
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
|
|
10002
|
+
this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
|
|
9814
10003
|
// Remove event listener
|
|
9815
10004
|
this.windows.forEach((localWindow) => {
|
|
9816
10005
|
localWindow.removeEventListener('click', this.handleClickOutside, false);
|
|
@@ -9958,9 +10147,9 @@ const MgTooltip = class {
|
|
|
9958
10147
|
* @param mgButton - mg-button to observe
|
|
9959
10148
|
*/
|
|
9960
10149
|
this.setMgButtonMutationObserver = (mgButton) => {
|
|
9961
|
-
new MutationObserver(mutationList => {
|
|
10150
|
+
new MutationObserver((mutationList) => {
|
|
9962
10151
|
// stop process when none of mutations attributed is disabled
|
|
9963
|
-
if (!mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName)))
|
|
10152
|
+
if (!mutationList.some((mutation) => ['aria-disabled', 'disabled'].includes(mutation.attributeName)))
|
|
9964
10153
|
return;
|
|
9965
10154
|
// set guard when one of mutations is for a disabled with disabled-on-click
|
|
9966
10155
|
if (mutationList.some((mutation) => mutation.target.disabled && mutation.target.disableOnClick)) {
|
|
@@ -10075,7 +10264,9 @@ const MgTooltip = class {
|
|
|
10075
10264
|
// get slotted element wich is not the tooltip
|
|
10076
10265
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
10077
10266
|
// Get interactive element
|
|
10078
|
-
const interactiveElement = slotElement.matches(index$1.focusableElements)
|
|
10267
|
+
const interactiveElement = slotElement.matches(index$1.focusableElements)
|
|
10268
|
+
? slotElement
|
|
10269
|
+
: (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index$1.focusableElements);
|
|
10079
10270
|
this.setTooltipedElement(interactiveElement || slotElement);
|
|
10080
10271
|
// Check if slotted element is a disabled mg-button
|
|
10081
10272
|
// In this case we wrap the mg-button into a div to enable the tooltip
|
|
@@ -10126,7 +10317,7 @@ const MgTooltip = class {
|
|
|
10126
10317
|
* @returns HTML Element
|
|
10127
10318
|
*/
|
|
10128
10319
|
render() {
|
|
10129
|
-
return (index.h(index.Host, { key: '
|
|
10320
|
+
return (index.h(index.Host, { key: '5cd926147c1b6723065c5334699764f32a8a06c9' }, index.h("slot", { key: 'a1b208798c79e34a207f3bedb2ad9662e02e83e2' }), index.h("slot", { key: '4f332961968fd3541caf47c2fd9072720fa2ee71', name: "content" })));
|
|
10130
10321
|
}
|
|
10131
10322
|
get element() { return index.getElement(this); }
|
|
10132
10323
|
static get watchers() { return {
|
|
@@ -10160,7 +10351,7 @@ const MgTooltipContent = class {
|
|
|
10160
10351
|
* @returns HTML Element
|
|
10161
10352
|
*/
|
|
10162
10353
|
render() {
|
|
10163
|
-
return (index.h(index.Host, { key: '
|
|
10354
|
+
return (index.h(index.Host, { key: '49dc32a8c7191fb291d2c47fc1e903d16e0774ab', role: "tooltip" }, index.h("span", { key: '913adc1f23eec27eb4b83cc4f4d9b4c1d6f9b2c2', innerHTML: this.message, class: "mg-tooltip-content__message" }), index.h("slot", { key: '44da4832c535df385cbde0fd32791d901c538e84', name: "arrow" })));
|
|
10164
10355
|
}
|
|
10165
10356
|
};
|
|
10166
10357
|
MgTooltipContent.style = mgTooltipContentCss();
|