@mgdis/mg-components 6.16.0 → 6.18.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-T3-qWqFE.js → index-DCZEYvlH.js} +51 -28
- package/dist/cjs/{index-YM1EJx9X.js → index-TUElr4Wv.js} +10 -10
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mg-action-more_37.cjs.entry.js +443 -228
- package/dist/cjs/mg-alert.cjs.entry.js +3 -3
- package/dist/cjs/mg-components.cjs.js +3 -3
- package/dist/cjs/mg-fieldset.cjs.entry.js +141 -0
- package/dist/cjs/mg-input-combobox.cjs.entry.js +73 -57
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +36 -23
- package/dist/cjs/{mg-input.conf-WTsvDfpC.js → mg-input.conf-HYIzRsy7.js} +5 -0
- package/dist/cjs/mg-loader.cjs.entry.js +3 -3
- package/dist/cjs/mg-progress.cjs.entry.js +2 -2
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/atoms/internals/mg-character-left/mg-character-left.js +5 -5
- package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js +7 -7
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +6 -6
- package/dist/collection/components/atoms/mg-button/mg-button.js +13 -13
- package/dist/collection/components/atoms/mg-card/mg-card.js +2 -2
- package/dist/collection/components/atoms/mg-divider/mg-divider.js +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.conf.js +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +32 -26
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +3 -3
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js +2 -2
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +6 -6
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.conf.js +4 -0
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +193 -33
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js +7 -9
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +65 -46
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js +106 -86
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +67 -65
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +71 -66
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +56 -38
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +53 -35
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +66 -47
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +58 -40
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +77 -59
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +63 -45
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +54 -30
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js +2 -4
- package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js +9 -6
- package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js +7 -7
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +2 -5
- package/dist/collection/components/molecules/mg-alert/mg-alert.js +5 -5
- package/dist/collection/components/molecules/mg-details/mg-details.js +7 -7
- package/dist/collection/components/molecules/mg-fieldset/mg-fieldset.js +404 -0
- package/dist/collection/components/molecules/mg-form/mg-form.js +26 -17
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +3 -3
- package/dist/collection/components/molecules/mg-loader/mg-loader.js +4 -4
- package/dist/collection/components/molecules/mg-message/mg-message.js +4 -4
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +8 -8
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +7 -8
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +53 -22
- 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 +7 -7
- package/dist/collection/components/molecules/mg-progress/mg-progress.js +7 -7
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -2
- package/dist/collection/components/molecules/mg-table/mg-table.js +2 -3
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +7 -8
- package/dist/collection/locales/en/messages.json +5 -5
- package/dist/collection/locales/fr/messages.json +5 -5
- package/dist/components/index3.js +10 -10
- package/dist/components/mg-action-more.js +5 -3
- package/dist/components/mg-alert.js +5 -3
- package/dist/components/mg-badge2.js +4 -2
- package/dist/components/mg-button2.js +4 -2
- package/dist/components/mg-card2.js +4 -2
- package/dist/components/mg-character-left2.js +4 -2
- package/dist/components/mg-details.js +5 -3
- package/dist/components/mg-divider2.js +4 -2
- package/dist/components/mg-fieldset.d.ts +11 -0
- package/dist/components/mg-fieldset.js +209 -0
- package/dist/components/mg-form.js +8 -5
- package/dist/components/mg-icon2.js +29 -21
- package/dist/components/mg-illustrated-message.js +5 -3
- package/dist/components/mg-input-checkbox-paginated2.js +6 -6
- package/dist/components/mg-input-checkbox.js +32 -17
- package/dist/components/mg-input-combobox.js +75 -57
- package/dist/components/mg-input-date.js +39 -42
- package/dist/components/mg-input-numeric.js +30 -30
- package/dist/components/mg-input-password.js +26 -13
- package/dist/components/mg-input-radio.js +27 -13
- package/dist/components/mg-input-rich-text-editor.js +37 -22
- package/dist/components/mg-input-select2.js +28 -14
- package/dist/components/mg-input-text2.js +40 -26
- package/dist/components/mg-input-textarea.js +27 -14
- package/dist/components/mg-input-title2.js +4 -2
- package/dist/components/mg-input-toggle.js +39 -12
- package/dist/components/mg-input2.js +121 -20
- package/dist/components/mg-item-more2.js +13 -5
- package/dist/components/mg-loader2.js +5 -3
- package/dist/components/mg-menu-item2.js +4 -2
- package/dist/components/mg-message2.js +6 -4
- package/dist/components/mg-modal.js +6 -4
- package/dist/components/mg-pagination.js +4 -2
- package/dist/components/mg-panel.js +40 -9
- package/dist/components/mg-popover-content2.js +5 -3
- package/dist/components/mg-popover2.js +5 -3
- package/dist/components/mg-progress.js +5 -3
- package/dist/components/mg-skip-links.js +5 -3
- package/dist/components/mg-table.js +4 -2
- package/dist/components/mg-tabs2.js +5 -3
- package/dist/components/mg-tag.js +4 -2
- package/dist/components/mg-tooltip-content2.js +4 -2
- package/dist/components/mg-tooltip2.js +4 -2
- package/dist/esm/{index-WtiuOkLj.js → index-C7xjtdiw.js} +1 -1
- package/dist/esm/{index-Bab8_u8S.js → index-CNX6lq0x.js} +10 -10
- package/dist/esm/{index-JHj_9FSs.js → index-T6kOJXP1.js} +51 -28
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mg-action-more_37.entry.js +444 -229
- package/dist/esm/mg-alert.entry.js +4 -4
- package/dist/esm/mg-components.js +4 -4
- package/dist/esm/mg-fieldset.entry.js +139 -0
- package/dist/esm/mg-input-combobox.entry.js +74 -58
- package/dist/esm/mg-input-rich-text-editor.entry.js +37 -24
- package/dist/esm/{mg-input.conf-CNgv8hc5.js → mg-input.conf-D9V2v4n2.js} +5 -1
- package/dist/esm/mg-loader.entry.js +4 -4
- package/dist/esm/mg-progress.entry.js +3 -3
- package/dist/mg-components/locales/en/messages.json +5 -5
- package/dist/mg-components/locales/fr/messages.json +5 -5
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/p-2bab89c2.entry.js +1 -0
- package/dist/mg-components/{p-658f828c.entry.js → p-5abc77cd.entry.js} +1 -1
- package/dist/mg-components/p-7d2e43b2.entry.js +1 -0
- package/dist/mg-components/{p-c85b5d10.entry.js → p-92e5e5a6.entry.js} +1 -1
- package/dist/mg-components/{p-42a90251.entry.js → p-952288bd.entry.js} +1 -1
- package/dist/mg-components/{p-WtiuOkLj.js → p-C7xjtdiw.js} +1 -1
- package/dist/mg-components/p-CNX6lq0x.js +1 -0
- package/dist/mg-components/p-D9V2v4n2.js +1 -0
- package/dist/mg-components/p-T6kOJXP1.js +2 -0
- package/dist/mg-components/p-f2cddd52.entry.js +1 -0
- package/dist/mg-components/{p-82455ac7.entry.js → p-f6afaeb8.entry.js} +1 -1
- package/dist/types/components/atoms/mg-icon/mg-icon.conf.d.ts +1 -1
- package/dist/types/components/atoms/mg-icon/mg-icon.d.ts +0 -5
- package/dist/types/components/molecules/inputs/mg-input/mg-input.conf.d.ts +5 -0
- package/dist/types/components/molecules/inputs/mg-input/mg-input.d.ts +32 -1
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +4 -3
- package/dist/types/components/molecules/inputs/mg-input-combobox/mg-input-combobox.d.ts +4 -2
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts +4 -2
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +4 -2
- package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts +4 -2
- package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts +4 -2
- package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.d.ts +4 -2
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +4 -2
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +4 -2
- package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +4 -2
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +4 -2
- package/dist/types/components/molecules/mg-fieldset/mg-fieldset.d.ts +105 -0
- package/dist/types/components/molecules/mg-form/mg-form.d.ts +1 -1
- package/dist/types/components/molecules/mg-panel/mg-panel.d.ts +8 -1
- package/dist/types/components.d.ts +168 -18
- package/dist/types/stencil-public-runtime.d.ts +39 -2
- package/dist/types/types/index.d.ts +1 -1
- package/ide/intellij/web-types.json +289 -181
- package/ide/vscode/html-custom-data.json +259 -18
- package/package.json +23 -23
- package/dist/mg-components/p-54156253.entry.js +0 -1
- package/dist/mg-components/p-Bab8_u8S.js +0 -1
- package/dist/mg-components/p-CNgv8hc5.js +0 -1
- package/dist/mg-components/p-JHj_9FSs.js +0 -2
- package/dist/mg-components/p-abbd151c.entry.js +0 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-
|
|
2
|
-
import { h as createID, t as toString, C as ClassList,
|
|
3
|
-
import { i as initLocales, l as localeDate, a as localeDatePattern, b as localeNumber, c as localeUnit, d as localePercent, e as localeCurrency } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-T6kOJXP1.js';
|
|
2
|
+
import { h as createID, t as toString, C as ClassList, i as isValidString, n as nextTick, j as isValideID, k as isTagName, l as cleanString, f as formatID, m as dateRegExp, o as dateToString, b as allItemsAreString, p as getWindows, q as focusableElements } from './index-C7xjtdiw.js';
|
|
3
|
+
import { i as initLocales, l as localeDate, a as localeDatePattern, b as localeNumber, c as localeUnit, d as localePercent, e as localeCurrency } from './index-CNX6lq0x.js';
|
|
4
4
|
import { K as Keys } from './events.utils-yMGqY8YG.js';
|
|
5
|
-
import { t as tooltipPositions, b as classFieldset, c as classReadonly, a as classDisabled, d as classVerticalList, w as widths } from './mg-input.conf-
|
|
5
|
+
import { l as labelHeadings, t as tooltipPositions, b as classFieldset, c as classReadonly, a as classDisabled, d as classVerticalList, w as widths } from './mg-input.conf-D9V2v4n2.js';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Available menu item status values
|
|
@@ -171,7 +171,7 @@ const MgActionMore = class {
|
|
|
171
171
|
[`${this.classBase}__chevron--rotate`]: this.expanded === true,
|
|
172
172
|
} }, h("mg-icon", { icon: "chevron-down" })));
|
|
173
173
|
}
|
|
174
|
-
return (h(Host, { key: '
|
|
174
|
+
return (h(Host, { key: 'd75e1a5326ea3a1414f8048858e5ee3fee51760e', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: 'b671a6c35cb3a9fa6eb7b2329f0f595e78b573b5', class: this.classBase }, h("mg-popover", { key: '38a38123d34ca868d0587123c2ab6b11550da8f0', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: '030b9360917b79edfc8df325d5ca5cfa08356c81', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: 'a47ca6b078ca160d1cbb13c964df3abede5f373c' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: 'ac38c705625cb5716a7e8aabd25d596db3d5adef', slot: "content" }, h("mg-menu", { key: 'cd382a65f69ba3c303a74d6b7444fcf0ccf9d1c5', direction: directions$1.VERTICAL, label: this.messages.label }, this.items.map(item => {
|
|
175
175
|
var _a, _b;
|
|
176
176
|
return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider", "full-width": true })) : (h("mg-menu-item", { key: item.label, status: item.status || Status$1.VISIBLE, target: item.target, href: item.href,
|
|
177
177
|
// eslint-disable-next-line react/jsx-no-bind
|
|
@@ -657,7 +657,7 @@ const MgDetails = class {
|
|
|
657
657
|
* @returns HTML Element
|
|
658
658
|
*/
|
|
659
659
|
render() {
|
|
660
|
-
return (h("details", { key: '
|
|
660
|
+
return (h("details", { key: 'bbaac6909fa5f3fbd3236b2a8ace0f7c80b2580b', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '2ed8228b63403dd9b386bf3fa70c9094516b6f0e' }, h("slot", { key: '5461d77d2b2869b14737a5c7cfc40a1f9584ee03', name: "summary" }), h("span", { key: 'bb089365bdeaa7b934b97cff6f5f7c67587048e1', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'dc1a30338703ad4182d50f9953a903ae0f68ecb1', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'a32cbaf9e38b71540deeaa8980895c34a7288ecb', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'b9c2bc7d681da8ac8b4dec5ff25287bc68975fb6', class: "mg-c-details__details" }, h("slot", { key: '069f05b4c133ff13055681e0b05bb98744303137', name: "details" }))));
|
|
661
661
|
}
|
|
662
662
|
get element() { return getElement(this); }
|
|
663
663
|
static get watchers() { return {
|
|
@@ -854,11 +854,12 @@ const MgForm = class {
|
|
|
854
854
|
this.setRequiredMessage();
|
|
855
855
|
}
|
|
856
856
|
/**
|
|
857
|
-
* Display
|
|
857
|
+
* Display inputs/fieldsets errors if it exists.
|
|
858
858
|
*/
|
|
859
859
|
async displayError() {
|
|
860
860
|
if (!this.readonly) {
|
|
861
|
-
this.
|
|
861
|
+
const mgFieldsets = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-FIELDSET'));
|
|
862
|
+
[...mgFieldsets, ...this.mgInputs].forEach(input => {
|
|
862
863
|
var _a;
|
|
863
864
|
(_a = input.displayError) === null || _a === void 0 ? void 0 : _a.call(input);
|
|
864
865
|
});
|
|
@@ -934,7 +935,7 @@ const MgForm = class {
|
|
|
934
935
|
* @returns HTML Element
|
|
935
936
|
*/
|
|
936
937
|
render() {
|
|
937
|
-
return (h("form", { key: '
|
|
938
|
+
return (h("form", { key: '8b698b2a33af00e36691abab5adff5488b736218', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '2e1fb5c4030ecb99d1f18c57d5c3fe238db4d12e', innerHTML: this.requiredMessageText }), h("slot", { key: '568fb8ac9ab0e3521899c05472592ebd15cc91fa' }), !this.readonly && !this.disabled && h("slot", { key: 'd4f38320de58f3b1d491083a34d1b5366d22b935', name: "actions" })));
|
|
938
939
|
}
|
|
939
940
|
get element() { return getElement(this); }
|
|
940
941
|
static get watchers() { return {
|
|
@@ -955,7 +956,7 @@ const sizes$3 = ['small', 'medium', 'large', 'xlarge', 'xxlarge'];
|
|
|
955
956
|
/**
|
|
956
957
|
* List of all possibles variants
|
|
957
958
|
*/
|
|
958
|
-
const variants$2 = ['success', 'warning', 'danger', 'info', 'app'];
|
|
959
|
+
const variants$2 = ['success', 'warning', 'danger', 'info', 'app', 'neutral'];
|
|
959
960
|
/**
|
|
960
961
|
* List of all possibles variants styles
|
|
961
962
|
*/
|
|
@@ -963,7 +964,7 @@ const variantStyles$1 = ['icon', 'background', 'full'];
|
|
|
963
964
|
|
|
964
965
|
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 stroke="currentColor" d="m11.47 8.597 1.768.964c.455.248.28.939-.239.939H3.002c-.514 0-.694-.681-.247-.935l1.714-.974V6a3.5 3.5 0 0 1 7 0zM7.996 13.5a1.5 1.5 0 0 1-1.415-1h2.83a1.5 1.5 0 0 1-1.415 1Z"/></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-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 2.67c-3.37 0-6.1 2.21-6.1 4.95.02 1.18.51 2.3 1.36 3.11-.26.85-.71 1.62-1.3 2.28a.2.2 0 0 0-.04.21c.03.07.1.11.17.11 1.22-.02 2.4-.45 3.34-1.22.82.31 1.68.46 2.56.46 3.37 0 6.1-2.22 6.1-4.95S11.37 2.67 8 2.67M4.95 8.39a.76.76 0 1 1 0-1.52.76.76 0 0 1 0 1.52m3.05 0a.76.76 0 1 1 0-1.52.76.76 0 0 1 0 1.52m3.05 0a.76.76 0 1 1-.02-1.52c.42 0 .77.33.77.75v.01c0 .42-.34.76-.76.76"/></svg>', 'conversation': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" 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.09m10.48-.01c0-.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" clip-rule="evenodd"/></svg>', 'conversation-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.5C10 5.14 8.17 4 6 4l-.01.01c-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.5m-9.01.01c0-1.929 2.237-3.498 4.995-3.5 2.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.51m4.995-3.5h.005-.01zm8.005 7.58c.62-.58 1.01-1.3 1.01-2.09q0-.18-.03-.36c-.01-.11-.04-.22-.07-.33a2.3 2.3 0 0 0-.17-.45 3.55 3.55 0 0 0-1.1-1.26c-.1-.07-.19-.13-.3-.2a5 5 0 0 0-.65-.35c-.23-.1-.48-.19-.73-.27a4 4 0 0 1-.19-.06c.14.36.22.74.23 1.13C13.18 6.78 14 7.59 14 8.5c0 .59-.38 1.07-.7 1.36l-.31.3-.01.43v1.12l-1.5-.7-.28-.12-.29.04c-.31.05-.62.07-.91.07-.67 0-1.3-.1-1.86-.29-.51.15-1.06.24-1.64.27.06.05.12.09.18.13l.42.24c.36.18.76.33 1.18.43.15.04.3.08.46.1.02.01.03.01.05.01.17.04.34.07.52.07.22.03.46.04.69.04.36 0 .71-.03 1.05-.08l2.26 1.05q.09.03.18.03c.26 0 .49-.21.5-.5z" 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" 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 6m6 .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" 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="M9 10.06c-.03.53-.47.94-1 .94-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1zm.55-4.81h3.76v9.4a.68.68 0 0 1-.66.66h-9.3c-.37 0-.67-.31-.66-.68V1.33c.01-.36.3-.65.66-.66h5.54v3.89c-.01.37.28.68.65.69zM10 8l-.51.29c-.21-.18-.46-.32-.72-.41v-.57c0-.06-.05-.12-.11-.14-.43-.09-.87-.09-1.3 0a.14.14 0 0 0-.12.14v.59q-.405.135-.72.42L6 8a.135.135 0 0 0-.17 0c-.3.32-.52.71-.65 1.13-.02.06 0 .13.06.16l.51.29q-.075.42 0 .84l-.51.29c-.05.03-.08.1-.06.16.13.42.35.81.65 1.13.05.04.12.04.17 0l.51-.29c.22.18.46.32.73.41v.59c0 .07.04.13.11.14.43.09.87.09 1.3 0 .07-.01.12-.07.11-.14v-.51c.27-.09.51-.23.73-.41l.51.29c.05.04.12.04.17 0 .3-.32.52-.71.65-1.13.02-.06 0-.13-.06-.16l-.5-.3c.05-.27.05-.56 0-.83l.5-.3c.06-.03.09-.1.07-.16a2.9 2.9 0 0 0-.65-1.13A.16.16 0 0 0 10 8m3.12-4.33L10.41.87a.63.63 0 0 0-.47-.2h-.17v3.66h3.54v-.17c0-.18-.06-.36-.19-.49"/></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="m10.41.87 2.71 2.8a.7.7 0 0 1 .19.49v.17H9.77V.67h.17a.63.63 0 0 1 .47.2m2.9 4.38v9.42a.67.67 0 0 1-.66.66h-9.3a.67.67 0 0 1-.66-.68V1.33a.67.67 0 0 1 .66-.66h5.54v3.9a.67.67 0 0 0 .66.68zm-5.45 7.69 2.54-2.53a.19.19 0 0 0 .01-.27.16.16 0 0 0-.14-.06H8.93a.2.2 0 0 1-.2-.2v-2.6a.18.18 0 0 0-.18-.19H6.92a.19.19 0 0 0-.19.18v2.61a.2.2 0 0 1-.2.2H5.19a.18.18 0 0 0-.19.18.2.2 0 0 0 .06.15l2.54 2.53a.18.18 0 0 0 .26 0" 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" d="M13.12 3.67 10.41.87a.63.63 0 0 0-.47-.2h-.17v3.66h3.54v-.17c0-.18-.06-.36-.19-.49m.19 11V5.25H9.55c-.37 0-.67-.31-.66-.68V.67H3.35a.68.68 0 0 0-.66.66v13.32c0 .37.29.67.66.68h9.3c.36-.01.65-.3.66-.66m-3-4.64H8.93c-.1 0-.19.07-.2.18v2.61c0 .1-.09.18-.19.18H6.91a.18.18 0 0 1-.18-.18V10.2c0-.1-.07-.19-.18-.2H5.19s-.09.01-.14 0a.19.19 0 0 1 0-.27L7.6 7.14c.07-.07.19-.07.26 0l2.54 2.54s.06.09.06.14c0 .1-.09.18-.19.18z"/></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="M14 4.44H8.46L6.62 2.67H2C1.27 2.67.68 3.27.67 4v8c0 .73.6 1.32 1.33 1.33h12c.73 0 1.32-.6 1.33-1.33V5.78c0-.73-.6-1.33-1.33-1.34m-6.82 6.88H5.65c-1.34 0-2.42-1.08-2.42-2.42s1.08-2.42 2.42-2.42h.84c.14 0 .25.11.25.25 0 .06-.02.13-.06.17-.2.21-.36.45-.49.71-.04.07-.11.13-.19.14h-.33c-.62-.15-1.24.22-1.39.84s.22 1.24.84 1.39c.15.04.31.04.47.02h1.58c.62 0 1.12-.48 1.15-1.1v-.22c-.02-.08 0-.16.06-.22.12-.13.29-.2.47-.2h.45c.12 0 .23.09.25.21.02.14.02.29 0 .43 0 1.32-1.05 2.39-2.37 2.42m3.17 0h-.84c-.06 0-.13-.02-.17-.07-.1-.1-.1-.25 0-.35.2-.21.36-.45.49-.71.02-.09.08-.16.17-.19h.36c.63.04 1.18-.43 1.23-1.07.04-.63-.43-1.18-1.07-1.23H8.83c-.64 0-1.15.51-1.15 1.15v.25c.02.08 0 .16-.06.22-.12.13-.29.21-.47.21H6.7c-.13 0-.24-.09-.26-.22-.01-.14-.01-.27 0-.41a2.41 2.41 0 0 1 2.38-2.43h1.52c1.34 0 2.42 1.07 2.43 2.41 0 1.34-1.09 2.42-2.42 2.43z"/></svg>', 'folder-link-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="m6.22 3.67 1.55 1.49.29.28h5.93c.19 0 .34.16.34.34v6.21c0 .18-.15.34-.33.34H2.01c-.18 0-.34-.15-.34-.33V4.01c0-.18.15-.34.33-.34zm.4-1H2C1.27 2.67.68 3.27.67 4v8c0 .73.6 1.32 1.33 1.33h12c.73 0 1.32-.6 1.33-1.33V5.78c0-.73-.6-1.33-1.33-1.34H8.46z"/><path fill="currentColor" d="M9.555 8.848a2.37 2.37 0 0 1-2.372 2.372l-1.486.006a2.366 2.366 0 0 1-2.37-2.37 2.38 2.38 0 0 1 2.376-2.377h.82c.135 0 .25.106.25.249q-.001.094-.062.17a3 3 0 0 0-.474.687.26.26 0 0 1-.223.143h-.286a1.13 1.13 0 0 0-1.165 1.086 1.123 1.123 0 0 0 1.082 1.163c.023.005.045 0 .063 0l1.481-.002A1.123 1.123 0 0 0 8.292 8.64a.25.25 0 0 1 .063-.214.62.62 0 0 1 .46-.201l.464-.001c.125 0 .223.089.245.21q.034.206.035.419zm3.11.001a2.365 2.365 0 0 0-2.371-2.37l-1.481.001a2.387 2.387 0 0 0-2.337 2.8c.022.12.125.205.245.21l.464-.001a.6.6 0 0 0 .46-.201.24.24 0 0 0 .063-.214 1.123 1.123 0 0 1 1.104-1.335l1.48-.002a1.12 1.12 0 0 1 1.15 1.096 1.13 1.13 0 0 1-1.099 1.152c-.022.004-.045 0-.062 0h-.286a.25.25 0 0 0-.223.143c-.125.25-.286.482-.474.688a.244.244 0 0 0 .013.352.24.24 0 0 0 .17.063l.82-.001a2.38 2.38 0 0 0 2.377-2.376z"/></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" d="M14 4.44H8.46L6.62 2.67H2A1.35 1.35 0 0 0 .67 4v8A1.35 1.35 0 0 0 2 13.33h12A1.35 1.35 0 0 0 15.33 12V5.78A1.36 1.36 0 0 0 14 4.44m-.2 3.89L12 9.66l.69 2a.22.22 0 0 1-.08.27.26.26 0 0 1-.13.06.4.4 0 0 1-.15-.06l-1.77-1.26L8.75 12a.34.34 0 0 1-.15 0 .3.3 0 0 1-.13 0 .23.23 0 0 1-.08-.27l.69-2-1.81-1.35a.23.23 0 0 1-.1-.17.24.24 0 0 1 .24-.24h2.21l.67-2a.26.26 0 0 1 .243-.156.24.24 0 0 1 .217.156l.67 2h2.2a.26.26 0 0 1 .26.24.3.3 0 0 1-.08.12"/></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>', '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 5zM8 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 12m0 3a.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" clip-rule="evenodd"/></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" fill-rule="evenodd" 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-.653M1.66 11.76a2 2 0 0 0 .435.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" clip-rule="evenodd"/></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>', '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>', '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>', '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" 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>', '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>' };
|
|
965
966
|
|
|
966
|
-
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}}/*!\n * @prop --mg-c-icon-border-radius: Defines the border radius of icons. Default value is `50%`.\n */: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-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-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-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)}}";
|
|
967
|
+
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}}/*!\n * @prop --mg-c-icon-border-radius: Defines the border radius of icons. Default value is `50%`.\n */: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)}}";
|
|
967
968
|
|
|
968
969
|
const MgIcon = class {
|
|
969
970
|
constructor(hostRef) {
|
|
@@ -980,14 +981,6 @@ const MgIcon = class {
|
|
|
980
981
|
* Component classes
|
|
981
982
|
*/
|
|
982
983
|
this.classCollection = new ClassList(['mg-c-icon']);
|
|
983
|
-
/**
|
|
984
|
-
* Method to set default varianStyle props
|
|
985
|
-
* needeed has stencil doesn't know that props is mutated when updated in prop watcher
|
|
986
|
-
*/
|
|
987
|
-
this.setDefaultVariantStyle = () => {
|
|
988
|
-
if (this.variantStyle === undefined)
|
|
989
|
-
this.variantStyle = 'background';
|
|
990
|
-
};
|
|
991
984
|
/**
|
|
992
985
|
* Render icon in shadowroot
|
|
993
986
|
* @param icon - icon to render
|
|
@@ -1036,24 +1029,38 @@ const MgIcon = class {
|
|
|
1036
1029
|
}
|
|
1037
1030
|
}
|
|
1038
1031
|
validateVariant(newValue, oldValue) {
|
|
1039
|
-
|
|
1040
|
-
|
|
1032
|
+
var _a;
|
|
1033
|
+
// Remove old variant if exists
|
|
1034
|
+
if (oldValue !== undefined) {
|
|
1035
|
+
this.classCollection.delete(`mg-c-icon--variant-${oldValue}`);
|
|
1036
|
+
}
|
|
1037
|
+
// Set new variant
|
|
1038
|
+
const variant = newValue === 'neutral' ? 'dark' : newValue;
|
|
1039
|
+
if (variant !== undefined) {
|
|
1040
|
+
if (![...variants$2, 'dark'].includes(variant)) {
|
|
1041
1041
|
throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${toString(newValue)}.`);
|
|
1042
|
+
}
|
|
1042
1043
|
else {
|
|
1043
|
-
this.
|
|
1044
|
-
|
|
1045
|
-
this.classCollection.delete(`mg-c-icon--variant-${oldValue}`);
|
|
1046
|
-
this.classCollection.add(`mg-c-icon--variant-${newValue}`);
|
|
1044
|
+
(_a = this.variantStyle) !== null && _a !== void 0 ? _a : (this.variantStyle = 'background');
|
|
1045
|
+
this.classCollection.add(`mg-c-icon--variant-${variant}`);
|
|
1047
1046
|
}
|
|
1048
1047
|
}
|
|
1048
|
+
else {
|
|
1049
|
+
// remove variantStyle if variant is undefined
|
|
1050
|
+
this.variantStyle = undefined;
|
|
1051
|
+
}
|
|
1049
1052
|
}
|
|
1050
1053
|
validateVariantStyle(newValue, oldValue) {
|
|
1054
|
+
// Remove old variantStyle if exists
|
|
1055
|
+
if (oldValue !== undefined) {
|
|
1056
|
+
this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
|
|
1057
|
+
}
|
|
1058
|
+
// Set new variantStyle
|
|
1051
1059
|
if (newValue !== undefined) {
|
|
1052
|
-
if (!variantStyles$1.includes(newValue))
|
|
1060
|
+
if (!variantStyles$1.includes(newValue)) {
|
|
1053
1061
|
throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${toString(newValue)}.`);
|
|
1062
|
+
}
|
|
1054
1063
|
else {
|
|
1055
|
-
if (oldValue !== undefined)
|
|
1056
|
-
this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
|
|
1057
1064
|
this.classCollection.add(`mg-c-icon--variant-style-${newValue}`);
|
|
1058
1065
|
}
|
|
1059
1066
|
}
|
|
@@ -1182,7 +1189,7 @@ const MgIllustratedMessage = class {
|
|
|
1182
1189
|
* @returns HTML Element
|
|
1183
1190
|
*/
|
|
1184
1191
|
render() {
|
|
1185
|
-
return (h("div", { key: '
|
|
1192
|
+
return (h("div", { key: 'c9d8c8bfd2792b1cf5e78ab9d168d597b20e9a1e', class: this.classCollection.join() }, h("div", { key: 'cc8fa03147b9e59e6e8e015be9ed2b8dddd92ded', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '83a4ec2223c4e74511beb7c0abfa10e77cee425d', name: "illustration" })), h("div", { key: 'dbb4d13ca5324cab889fa2acc9b9b22522d7a8ec', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '9e74d84becf29539ec9c37e8ad1e317714f3c86c', name: "title" }), h("slot", { key: 'ae97d25c19b76ca092560d2555ebd6a87f542ffe', name: "details" }))));
|
|
1186
1193
|
}
|
|
1187
1194
|
get element() { return getElement(this); }
|
|
1188
1195
|
static get watchers() { return {
|
|
@@ -1192,7 +1199,7 @@ const MgIllustratedMessage = class {
|
|
|
1192
1199
|
};
|
|
1193
1200
|
MgIllustratedMessage.style = mgIllustratedMessageCss;
|
|
1194
1201
|
|
|
1195
|
-
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: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}}/*!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n */: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(*){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .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--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--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}@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}}";
|
|
1202
|
+
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: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}}/*!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n */: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(*){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .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--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-font-size-8);margin-bottom:var(--mg-b-font-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}}";
|
|
1196
1203
|
|
|
1197
1204
|
const MgInput = class {
|
|
1198
1205
|
constructor(hostRef) {
|
|
@@ -1204,6 +1211,9 @@ const MgInput = class {
|
|
|
1204
1211
|
this.classInput = 'mg-c-input';
|
|
1205
1212
|
this.classHasError = 'mg-c-input--has-error';
|
|
1206
1213
|
this.classLabelOnTop = 'mg-c-input--label-on-top';
|
|
1214
|
+
this.classHasHeading = 'mg-c-input--has-heading';
|
|
1215
|
+
this.classLabelBorderDisplay = 'mg-c-input--label-border-display';
|
|
1216
|
+
this.classInputsOnBottom = 'mg-c-input--inputs-on-bottom';
|
|
1207
1217
|
/**
|
|
1208
1218
|
* Define if label is displayed on top
|
|
1209
1219
|
*/
|
|
@@ -1212,6 +1222,11 @@ const MgInput = class {
|
|
|
1212
1222
|
* Define if label is visible
|
|
1213
1223
|
*/
|
|
1214
1224
|
this.labelHide = false;
|
|
1225
|
+
/**
|
|
1226
|
+
* Define if label border is visible
|
|
1227
|
+
* You must pair this mode with `labelOnTop`and `fieldset` class
|
|
1228
|
+
*/
|
|
1229
|
+
this.labelBorderDisplay = false;
|
|
1215
1230
|
/**
|
|
1216
1231
|
* Define tooltip position
|
|
1217
1232
|
*/
|
|
@@ -1220,6 +1235,10 @@ const MgInput = class {
|
|
|
1220
1235
|
* Define if input is required
|
|
1221
1236
|
*/
|
|
1222
1237
|
this.required = false;
|
|
1238
|
+
/**
|
|
1239
|
+
* Display inputs after help-text and error message
|
|
1240
|
+
*/
|
|
1241
|
+
this.inputsOnBottom = false;
|
|
1223
1242
|
/**
|
|
1224
1243
|
* Define aria-describedby ids to link with
|
|
1225
1244
|
*/
|
|
@@ -1240,11 +1259,44 @@ const MgInput = class {
|
|
|
1240
1259
|
* Element is disabled
|
|
1241
1260
|
*/
|
|
1242
1261
|
this.isVerticalList = false;
|
|
1262
|
+
/************
|
|
1263
|
+
* Methods *
|
|
1264
|
+
************/
|
|
1265
|
+
/**
|
|
1266
|
+
* Update element aria-describedby
|
|
1267
|
+
* @param element - element to update
|
|
1268
|
+
* @param ariaDescribedbyIDs - ariaDescribedbyIDs references
|
|
1269
|
+
*/
|
|
1270
|
+
this.updateElementAriaDescribedby = (element, ariaDescribedbyIDs) => {
|
|
1271
|
+
if (ariaDescribedbyIDs.size > 0) {
|
|
1272
|
+
element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
|
|
1273
|
+
}
|
|
1274
|
+
else {
|
|
1275
|
+
element.removeAttribute('aria-describedby');
|
|
1276
|
+
}
|
|
1277
|
+
};
|
|
1243
1278
|
/**
|
|
1244
1279
|
* Get tooltip node
|
|
1245
1280
|
* @returns mg-tooltip
|
|
1246
1281
|
*/
|
|
1247
1282
|
this.renderTooltip = () => (h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, h("mg-icon", { icon: "info-circle" })));
|
|
1283
|
+
/**
|
|
1284
|
+
* Get input container element
|
|
1285
|
+
* @returns ordered elements
|
|
1286
|
+
*/
|
|
1287
|
+
this.inputContainerElements = () => {
|
|
1288
|
+
const elements = [
|
|
1289
|
+
this.helptextMessageSlotElement && (h("div", { class: "mg-c-input__help-text" }, h("slot", { name: this.slotHelpText }))),
|
|
1290
|
+
!this.isDisabled && this.errorMessage && (h("div", { class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { name: this.slotError }))),
|
|
1291
|
+
];
|
|
1292
|
+
const inputSlot = (h("div", { class: "mg-c-input__input" }, h("slot", null), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()));
|
|
1293
|
+
if (this.inputsOnBottom) {
|
|
1294
|
+
return [...elements, inputSlot];
|
|
1295
|
+
}
|
|
1296
|
+
else {
|
|
1297
|
+
return [inputSlot, ...elements];
|
|
1298
|
+
}
|
|
1299
|
+
};
|
|
1248
1300
|
}
|
|
1249
1301
|
watchIdentifier(newValue) {
|
|
1250
1302
|
if (!isValidString(newValue)) {
|
|
@@ -1271,6 +1323,26 @@ const MgInput = class {
|
|
|
1271
1323
|
throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
|
|
1272
1324
|
}
|
|
1273
1325
|
}
|
|
1326
|
+
watchlabelHeading(newValue) {
|
|
1327
|
+
if (this.isFieldset && this.labelOnTop && labelHeadings.includes(newValue)) {
|
|
1328
|
+
this.element.classList.add(this.classHasHeading);
|
|
1329
|
+
}
|
|
1330
|
+
else {
|
|
1331
|
+
if ((!this.isFieldset && newValue !== undefined) || typeof newValue === 'string') {
|
|
1332
|
+
throw new Error(`<mg-input> prop "labelHeading" must be used with a fieldset and be one of: ${labelHeadings.join(', ')}. Passed value: ${toString(newValue)}.`);
|
|
1333
|
+
}
|
|
1334
|
+
this.labelHeading = undefined;
|
|
1335
|
+
this.element.classList.remove(this.classHasHeading);
|
|
1336
|
+
}
|
|
1337
|
+
}
|
|
1338
|
+
watchLabelBorderDisplay(newValue) {
|
|
1339
|
+
if (this.isFieldset && this.labelOnTop && newValue) {
|
|
1340
|
+
this.element.classList.add(this.classLabelBorderDisplay);
|
|
1341
|
+
}
|
|
1342
|
+
else {
|
|
1343
|
+
this.element.classList.remove(this.classLabelBorderDisplay);
|
|
1344
|
+
}
|
|
1345
|
+
}
|
|
1274
1346
|
watchTooltipPosition(newValue) {
|
|
1275
1347
|
if (!tooltipPositions.includes(newValue)) {
|
|
1276
1348
|
throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${toString(newValue)}.`);
|
|
@@ -1290,7 +1362,7 @@ const MgInput = class {
|
|
|
1290
1362
|
}
|
|
1291
1363
|
watchHelpText(newValue) {
|
|
1292
1364
|
var _a;
|
|
1293
|
-
if (newValue && !this.isReadonly) {
|
|
1365
|
+
if (isValidString(newValue) && !this.isReadonly) {
|
|
1294
1366
|
this.renderHelpText();
|
|
1295
1367
|
}
|
|
1296
1368
|
else {
|
|
@@ -1298,6 +1370,14 @@ const MgInput = class {
|
|
|
1298
1370
|
this.helptextMessageSlotElement = undefined;
|
|
1299
1371
|
}
|
|
1300
1372
|
}
|
|
1373
|
+
watchInputsOnBottom(newValue) {
|
|
1374
|
+
if (newValue) {
|
|
1375
|
+
this.element.classList.add(this.classInputsOnBottom);
|
|
1376
|
+
}
|
|
1377
|
+
else {
|
|
1378
|
+
this.element.classList.remove(this.classInputsOnBottom);
|
|
1379
|
+
}
|
|
1380
|
+
}
|
|
1301
1381
|
watchAriaDescribedbyIDs() {
|
|
1302
1382
|
if (this.isReadonly) {
|
|
1303
1383
|
return;
|
|
@@ -1313,23 +1393,26 @@ const MgInput = class {
|
|
|
1313
1393
|
// a11y IDs
|
|
1314
1394
|
const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);
|
|
1315
1395
|
// Help text
|
|
1316
|
-
if (this.helpText
|
|
1396
|
+
if (isValidString(this.helpText)) {
|
|
1317
1397
|
this.renderHelpText();
|
|
1318
1398
|
if (!ariaDescribedbyIDs.has(this.helpTextId))
|
|
1319
1399
|
ariaDescribedbyIDs.add(this.helpTextId);
|
|
1320
1400
|
}
|
|
1321
1401
|
// Error Message
|
|
1322
|
-
if (this.errorMessage
|
|
1402
|
+
if (isValidString(this.errorMessage)) {
|
|
1323
1403
|
this.renderErrorMessage();
|
|
1324
1404
|
if (!ariaDescribedbyIDs.has(this.helpTextErrorId))
|
|
1325
1405
|
ariaDescribedbyIDs.add(this.helpTextErrorId);
|
|
1326
1406
|
}
|
|
1327
|
-
this.element.querySelectorAll('input,select,textarea,[role="switch"]')
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1407
|
+
const inputs = this.element.querySelectorAll('input,select,textarea,[role="switch"]');
|
|
1408
|
+
inputs.forEach((element) => {
|
|
1409
|
+
this.updateElementAriaDescribedby(element, ariaDescribedbyIDs);
|
|
1410
|
+
});
|
|
1411
|
+
// use timeout to await for legend render for componentWillLoad hook
|
|
1412
|
+
setTimeout(() => {
|
|
1413
|
+
const legend = this.element.querySelector('legend');
|
|
1414
|
+
if (legend !== null) {
|
|
1415
|
+
this.updateElementAriaDescribedby(legend, ariaDescribedbyIDs);
|
|
1333
1416
|
}
|
|
1334
1417
|
});
|
|
1335
1418
|
}
|
|
@@ -1359,9 +1442,6 @@ const MgInput = class {
|
|
|
1359
1442
|
this.renderLabel();
|
|
1360
1443
|
}
|
|
1361
1444
|
}
|
|
1362
|
-
/************
|
|
1363
|
-
* Methods *
|
|
1364
|
-
************/
|
|
1365
1445
|
/**
|
|
1366
1446
|
* Render input label
|
|
1367
1447
|
*/
|
|
@@ -1381,11 +1461,21 @@ const MgInput = class {
|
|
|
1381
1461
|
labelSlotElement.setAttribute(attr, val);
|
|
1382
1462
|
});
|
|
1383
1463
|
// create label element
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1464
|
+
if (labelHeadings.includes(this.labelHeading)) {
|
|
1465
|
+
let label = this.element.shadowRoot.querySelector(this.labelHeading);
|
|
1466
|
+
if (label === null) {
|
|
1467
|
+
label = document.createElement(this.labelHeading);
|
|
1468
|
+
label.classList.add('mg-c-input-title__text');
|
|
1469
|
+
labelSlotElement.appendChild(label);
|
|
1470
|
+
}
|
|
1471
|
+
label.textContent = this.label;
|
|
1472
|
+
}
|
|
1473
|
+
else {
|
|
1474
|
+
labelSlotElement.textContent = this.label;
|
|
1475
|
+
}
|
|
1388
1476
|
this.element.appendChild(labelSlotElement);
|
|
1477
|
+
// update aria-describedby
|
|
1478
|
+
this.watchAriaDescribedbyIDs();
|
|
1389
1479
|
}
|
|
1390
1480
|
/**
|
|
1391
1481
|
* Render error message
|
|
@@ -1428,6 +1518,9 @@ const MgInput = class {
|
|
|
1428
1518
|
this.watchTooltipPosition(this.tooltipPosition);
|
|
1429
1519
|
this.watchHelpText(this.helpText);
|
|
1430
1520
|
this.watchErrorMessage(this.errorMessage);
|
|
1521
|
+
this.watchInputsOnBottom(this.inputsOnBottom);
|
|
1522
|
+
this.watchlabelHeading(this.labelHeading);
|
|
1523
|
+
this.watchLabelBorderDisplay(this.labelBorderDisplay);
|
|
1431
1524
|
}
|
|
1432
1525
|
/**
|
|
1433
1526
|
* Validate slots
|
|
@@ -1444,16 +1537,19 @@ const MgInput = class {
|
|
|
1444
1537
|
*/
|
|
1445
1538
|
render() {
|
|
1446
1539
|
const isGroup = this.isFieldset && !this.isReadonly;
|
|
1447
|
-
return (h(Host, { key: '
|
|
1540
|
+
return (h(Host, { key: 'fbab18280a709407c83f324127e8de6cbb05fe7c', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: 'ac0924c244b9fa87d02e659a5710ee93d12a202f', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'c825af33ba0a6c209d02d6487422347f7d8acfed', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '805e1eedfdea132f3ea4fd11da761810a3d7c939', class: "mg-c-input__input-container" }, this.inputContainerElements())));
|
|
1448
1541
|
}
|
|
1449
1542
|
get element() { return getElement(this); }
|
|
1450
1543
|
static get watchers() { return {
|
|
1451
1544
|
"identifier": ["watchIdentifier", "watchAriaDescribedbyIDs"],
|
|
1452
1545
|
"labelOnTop": ["watchLabelOnTop", "watchLabelConfig"],
|
|
1453
1546
|
"labelHide": ["watchLabelConfig"],
|
|
1547
|
+
"labelHeading": ["watchlabelHeading"],
|
|
1548
|
+
"labelBorderDisplay": ["watchLabelBorderDisplay"],
|
|
1454
1549
|
"tooltipPosition": ["watchTooltipPosition"],
|
|
1455
1550
|
"errorMessage": ["watchErrorMessage", "watchAriaDescribedbyIDs"],
|
|
1456
1551
|
"helpText": ["watchHelpText", "watchAriaDescribedbyIDs"],
|
|
1552
|
+
"inputsOnBottom": ["watchInputsOnBottom"],
|
|
1457
1553
|
"ariaDescribedbyIDs": ["watchAriaDescribedbyIDs"],
|
|
1458
1554
|
"class": ["watchClass", "watchLabel"],
|
|
1459
1555
|
"label": ["watchLabel"],
|
|
@@ -1483,9 +1579,7 @@ const SectionKind = {
|
|
|
1483
1579
|
*/
|
|
1484
1580
|
const MgInputCheckboxList = (props) => (h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map(input => {
|
|
1485
1581
|
var _a, _b;
|
|
1486
|
-
return (h("li", { key: input._id, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled } },
|
|
1487
|
-
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 }),
|
|
1488
|
-
h("label", { htmlFor: input._id }, input.title)));
|
|
1582
|
+
return (h("li", { key: input._id, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled } }, h("input", { type: "checkbox", id: input._id, name: props.name, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a.toString(), checked: Boolean(input.value), required: input.required, "aria-invalid": ((_b = props.invalid) === null || _b === void 0 ? void 0 : _b.toString()) || 'false', disabled: props.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }), h("label", { htmlFor: input._id }, input.title)));
|
|
1489
1583
|
})));
|
|
1490
1584
|
|
|
1491
1585
|
/**
|
|
@@ -1518,6 +1612,7 @@ const MgInputCheckbox = class {
|
|
|
1518
1612
|
this.inputValid = createEvent(this, "input-valid", 7);
|
|
1519
1613
|
// hasDisplayedError (triggered by blur event)
|
|
1520
1614
|
this.hasDisplayedError = false;
|
|
1615
|
+
this.customErrorMessage = { lock: false };
|
|
1521
1616
|
this.mode = 'custom';
|
|
1522
1617
|
// style
|
|
1523
1618
|
this.baseClassName = 'mg-c-input--checkbox';
|
|
@@ -1735,17 +1830,20 @@ const MgInputCheckbox = class {
|
|
|
1735
1830
|
};
|
|
1736
1831
|
/**
|
|
1737
1832
|
* Set input error message
|
|
1738
|
-
* @param
|
|
1739
|
-
* @param errorMessage - errorMessage override
|
|
1833
|
+
* @param fromSetErrorContext - context come from `setError` method
|
|
1740
1834
|
*/
|
|
1741
|
-
this.setErrorMessage = (
|
|
1835
|
+
this.setErrorMessage = (fromSetErrorContext = false) => {
|
|
1742
1836
|
// Set error message
|
|
1743
1837
|
this.errorMessage = undefined;
|
|
1744
|
-
if (
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
|
|
1838
|
+
if (!this.valid) {
|
|
1839
|
+
// Does have a new custom error message OR does have a custom error message locked
|
|
1840
|
+
if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
|
|
1841
|
+
this.errorMessage = this.customErrorMessage.message;
|
|
1842
|
+
}
|
|
1843
|
+
// required
|
|
1844
|
+
else if (!this.validateRequired()) {
|
|
1748
1845
|
this.errorMessage = this.messages.errors.required;
|
|
1846
|
+
}
|
|
1749
1847
|
}
|
|
1750
1848
|
};
|
|
1751
1849
|
/**
|
|
@@ -1839,7 +1937,7 @@ const MgInputCheckbox = class {
|
|
|
1839
1937
|
this.checkValidity();
|
|
1840
1938
|
if (this.hasDisplayedError) {
|
|
1841
1939
|
this.hasDisplayedError = prop !== 'required';
|
|
1842
|
-
this.setErrorMessage(
|
|
1940
|
+
this.setErrorMessage();
|
|
1843
1941
|
}
|
|
1844
1942
|
this.setButtonTextKey();
|
|
1845
1943
|
}
|
|
@@ -1903,17 +2001,22 @@ const MgInputCheckbox = class {
|
|
|
1903
2001
|
* When used to set validity to `false`, you should use this method again to reset the validity to `true`.
|
|
1904
2002
|
* @param valid - value indicating the validity
|
|
1905
2003
|
* @param errorMessage - the error message to display
|
|
2004
|
+
* @param errorMessageLock - lock the error message and validity state
|
|
1906
2005
|
*/
|
|
1907
|
-
async setError(valid, errorMessage) {
|
|
2006
|
+
async setError(valid, errorMessage, errorMessageLock = false) {
|
|
1908
2007
|
if (typeof valid !== 'boolean') {
|
|
1909
2008
|
throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean.');
|
|
1910
2009
|
}
|
|
1911
|
-
else if (!isValidString(errorMessage)) {
|
|
2010
|
+
else if (errorMessage !== undefined && !isValidString(errorMessage)) {
|
|
1912
2011
|
throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string.');
|
|
1913
2012
|
}
|
|
1914
2013
|
else {
|
|
2014
|
+
this.customErrorMessage = {
|
|
2015
|
+
lock: valid ? false : errorMessageLock,
|
|
2016
|
+
message: valid ? undefined : errorMessage,
|
|
2017
|
+
};
|
|
1915
2018
|
this.setValidity(valid);
|
|
1916
|
-
this.setErrorMessage(
|
|
2019
|
+
this.setErrorMessage(true);
|
|
1917
2020
|
this.hasDisplayedError = this.invalid;
|
|
1918
2021
|
}
|
|
1919
2022
|
}
|
|
@@ -1931,6 +2034,8 @@ const MgInputCheckbox = class {
|
|
|
1931
2034
|
// - Keep everything in sync both inside and outside the component
|
|
1932
2035
|
return new Promise(resolve => {
|
|
1933
2036
|
requestAnimationFrame(() => {
|
|
2037
|
+
// unlock validity check by reseting customErrorMessage
|
|
2038
|
+
this.customErrorMessage = { lock: false };
|
|
1934
2039
|
this.checkValidity();
|
|
1935
2040
|
this.errorMessage = undefined;
|
|
1936
2041
|
this.hasDisplayedError = false;
|
|
@@ -1944,11 +2049,13 @@ const MgInputCheckbox = class {
|
|
|
1944
2049
|
* @param newValue - valid new value
|
|
1945
2050
|
*/
|
|
1946
2051
|
setValidity(newValue) {
|
|
1947
|
-
const
|
|
1948
|
-
this.
|
|
2052
|
+
const oldValue = this.valid;
|
|
2053
|
+
if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
|
|
2054
|
+
this.valid = newValue;
|
|
2055
|
+
}
|
|
1949
2056
|
this.invalid = !this.valid;
|
|
1950
2057
|
// We need to send valid event even if it is the same value
|
|
1951
|
-
if (this.valid !==
|
|
2058
|
+
if (this.valid !== oldValue)
|
|
1952
2059
|
this.inputValid.emit(this.valid);
|
|
1953
2060
|
}
|
|
1954
2061
|
/**
|
|
@@ -2067,7 +2174,7 @@ const MgInputCheckbox = class {
|
|
|
2067
2174
|
else {
|
|
2068
2175
|
inputContent = this.renderCheckboxMulti();
|
|
2069
2176
|
}
|
|
2070
|
-
return (h("mg-input", { key: '
|
|
2177
|
+
return (h("mg-input", { key: '5addea288b5c87fec33a56449d14f861aefd465d', 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));
|
|
2071
2178
|
}
|
|
2072
2179
|
get element() { return getElement(this); }
|
|
2073
2180
|
static get watchers() { return {
|
|
@@ -2157,7 +2264,7 @@ const MgInputCheckboxPaginated = class {
|
|
|
2157
2264
|
render() {
|
|
2158
2265
|
const listId = formatID(this.messages.label);
|
|
2159
2266
|
const tabId = 'tab-info';
|
|
2160
|
-
return (h(Host, { key: '
|
|
2267
|
+
return (h(Host, { key: '233ab4fca3f4a3121bc60650ac2f8ae06d47e6e5' }, h("slot", { key: '7d1af8c712928c06953743fc5c182e51d9a6256b', name: "header-action" }), h("div", { key: '95641bd218e36422a6b5b4ead8dd5498e8ac5fa4', class: "mg-c-input__tabs-content" }, h("p", { key: '34814dd1afc9f871cd032500b931e692d63cbd25', id: tabId, class: { 'mg-c-input__popover-info': true, 'mg-u-visually-hidden': this.items.length !== 0 }, "aria-live": this.items.length !== 0 ? 'polite' : undefined }, this.items.length === 0 ? this.messages.noValue : this.messages.values.replace('{count}', this.items.length.toString())), this.items.length > 0 && (h(MgInputCheckboxList, { key: '621077f291a401737157ad0cd9b9348537ef8bdc', checkboxes: this.items, labelledby: tabId, id: listId, disabled: this.disabled, name: this.name, invalid: this.invalid })), this.hasNext() && (h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: this.handleLoadMore, "aria-controls": listId }, h("mg-icon", { key: 'cb00bbeb1575475b184cc9623db6c4cefc56c26a', icon: "chevron-down" }), this.messages.showMore)))));
|
|
2161
2268
|
}
|
|
2162
2269
|
static get watchers() { return {
|
|
2163
2270
|
"checkboxes": ["watchCheckboxes"],
|
|
@@ -2176,6 +2283,7 @@ const MgInputDate = class {
|
|
|
2176
2283
|
this.inputValid = createEvent(this, "input-valid", 7);
|
|
2177
2284
|
// hasDisplayedError (triggered by blur event)
|
|
2178
2285
|
this.hasDisplayedError = false;
|
|
2286
|
+
this.customErrorMessage = { lock: false };
|
|
2179
2287
|
/**
|
|
2180
2288
|
* Input name
|
|
2181
2289
|
* If not set the value equals the identifier
|
|
@@ -2226,7 +2334,6 @@ const MgInputDate = class {
|
|
|
2226
2334
|
* @returns formated pattern help text. Ex: Format attendu : jj/mm/aaaa (ex : 20/12/2020)
|
|
2227
2335
|
*/
|
|
2228
2336
|
this.formatHelpText = (helpText) => {
|
|
2229
|
-
var _a, _b;
|
|
2230
2337
|
// If the component is in readonly mode, return directly because the message will not be rendered
|
|
2231
2338
|
if (this.readonly) {
|
|
2232
2339
|
return undefined;
|
|
@@ -2239,23 +2346,7 @@ const MgInputDate = class {
|
|
|
2239
2346
|
text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText.expectedFormat));
|
|
2240
2347
|
}
|
|
2241
2348
|
// Replace pattern and date variables
|
|
2242
|
-
|
|
2243
|
-
// Add additional message for min/max if necessary
|
|
2244
|
-
let rangeMessage;
|
|
2245
|
-
if (((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
|
|
2246
|
-
rangeMessage = this.messages.input.date.helpText.minMax.replace('{min}', localeDate(this.min, this.systemLocale)).replace('{max}', localeDate(this.max, this.systemLocale));
|
|
2247
|
-
}
|
|
2248
|
-
else if (((_b = this.min) === null || _b === void 0 ? void 0 : _b.length) > 0) {
|
|
2249
|
-
rangeMessage = this.messages.input.date.helpText.min.replace('{min}', localeDate(this.min, this.systemLocale));
|
|
2250
|
-
}
|
|
2251
|
-
else if (this.max !== DEFAULT_MAX_DATE) {
|
|
2252
|
-
rangeMessage = this.messages.input.date.helpText.max.replace('{max}', localeDate(this.max, this.systemLocale));
|
|
2253
|
-
}
|
|
2254
|
-
// Combine custom helpText with range message if both exist
|
|
2255
|
-
if (text !== undefined && rangeMessage !== undefined) {
|
|
2256
|
-
return `${text}<br>${rangeMessage}`;
|
|
2257
|
-
}
|
|
2258
|
-
return text;
|
|
2349
|
+
return text.replace('{pattern}', this.renderPattern()).replace('{date}', localeDate(dateToString(new Date('2025-12-24')), this.systemLocale));
|
|
2259
2350
|
};
|
|
2260
2351
|
/**
|
|
2261
2352
|
* Handle input event
|
|
@@ -2305,39 +2396,41 @@ const MgInputDate = class {
|
|
|
2305
2396
|
*/
|
|
2306
2397
|
this.getInputError = () => {
|
|
2307
2398
|
var _a;
|
|
2399
|
+
let error;
|
|
2308
2400
|
// bad input or pattern
|
|
2309
2401
|
if (this.input.validity.badInput || (this.value && !this.isValidPattern(this.value))) {
|
|
2310
|
-
|
|
2402
|
+
error = 'badInput';
|
|
2311
2403
|
}
|
|
2312
2404
|
// required
|
|
2313
|
-
if (this.input.validity.valueMissing) {
|
|
2314
|
-
|
|
2405
|
+
else if (this.input.validity.valueMissing) {
|
|
2406
|
+
error = 'required';
|
|
2315
2407
|
}
|
|
2316
2408
|
// min & max
|
|
2317
|
-
if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
|
|
2318
|
-
|
|
2409
|
+
else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
|
|
2410
|
+
error = 'minMax';
|
|
2319
2411
|
}
|
|
2320
2412
|
// min
|
|
2321
|
-
if (this.input.validity.rangeUnderflow) {
|
|
2322
|
-
|
|
2413
|
+
else if (this.input.validity.rangeUnderflow) {
|
|
2414
|
+
error = 'min';
|
|
2323
2415
|
}
|
|
2324
2416
|
// max
|
|
2325
|
-
if (this.input.validity.rangeOverflow) {
|
|
2326
|
-
|
|
2417
|
+
else if (this.input.validity.rangeOverflow) {
|
|
2418
|
+
error = 'max';
|
|
2327
2419
|
}
|
|
2328
|
-
return
|
|
2420
|
+
return error;
|
|
2329
2421
|
};
|
|
2330
2422
|
/**
|
|
2331
2423
|
* Check input errors
|
|
2332
|
-
* @param
|
|
2424
|
+
* @param fromSetErrorContext - context come from `setError` method
|
|
2333
2425
|
*/
|
|
2334
|
-
this.setErrorMessage = (
|
|
2426
|
+
this.setErrorMessage = (fromSetErrorContext = false) => {
|
|
2335
2427
|
// Set error message
|
|
2336
2428
|
this.errorMessage = undefined;
|
|
2337
2429
|
if (!this.valid) {
|
|
2338
2430
|
const inputError = this.getInputError();
|
|
2339
|
-
|
|
2340
|
-
|
|
2431
|
+
// Does have a new custom error message OR does have a custom error message locked
|
|
2432
|
+
if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
|
|
2433
|
+
this.errorMessage = this.customErrorMessage.message;
|
|
2341
2434
|
}
|
|
2342
2435
|
// required
|
|
2343
2436
|
else if (inputError === 'required') {
|
|
@@ -2345,7 +2438,7 @@ const MgInputDate = class {
|
|
|
2345
2438
|
}
|
|
2346
2439
|
// min, max & minMax
|
|
2347
2440
|
else if (['min', 'max', 'minMax'].includes(inputError)) {
|
|
2348
|
-
this.errorMessage = this.messages.input.date.
|
|
2441
|
+
this.errorMessage = this.messages.input.date.error[inputError]
|
|
2349
2442
|
.replace('{min}', localeDate(this.min, this.systemLocale))
|
|
2350
2443
|
.replace('{max}', localeDate(this.max, this.systemLocale));
|
|
2351
2444
|
}
|
|
@@ -2449,17 +2542,22 @@ const MgInputDate = class {
|
|
|
2449
2542
|
* When used to set validity to `false`, you should use this method again to reset the validity to `true`.
|
|
2450
2543
|
* @param valid - value indicating the validity
|
|
2451
2544
|
* @param errorMessage - the error message to display
|
|
2545
|
+
* @param errorMessageLock - lock the error message and validity state
|
|
2452
2546
|
*/
|
|
2453
|
-
async setError(valid, errorMessage) {
|
|
2547
|
+
async setError(valid, errorMessage, errorMessageLock = false) {
|
|
2454
2548
|
if (typeof valid !== 'boolean') {
|
|
2455
2549
|
throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean.');
|
|
2456
2550
|
}
|
|
2457
|
-
else if (!isValidString(errorMessage)) {
|
|
2551
|
+
else if (errorMessage !== undefined && !isValidString(errorMessage)) {
|
|
2458
2552
|
throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string.');
|
|
2459
2553
|
}
|
|
2460
2554
|
else {
|
|
2555
|
+
this.customErrorMessage = {
|
|
2556
|
+
lock: valid ? false : errorMessageLock,
|
|
2557
|
+
message: valid ? undefined : errorMessage,
|
|
2558
|
+
};
|
|
2461
2559
|
this.setValidity(valid);
|
|
2462
|
-
this.setErrorMessage(
|
|
2560
|
+
this.setErrorMessage(true);
|
|
2463
2561
|
this.hasDisplayedError = this.invalid;
|
|
2464
2562
|
}
|
|
2465
2563
|
}
|
|
@@ -2477,6 +2575,8 @@ const MgInputDate = class {
|
|
|
2477
2575
|
// - Keep everything in sync both inside and outside the component
|
|
2478
2576
|
return new Promise(resolve => {
|
|
2479
2577
|
requestAnimationFrame(() => {
|
|
2578
|
+
// unlock validity check by reseting customErrorMessage
|
|
2579
|
+
this.customErrorMessage = { lock: false };
|
|
2480
2580
|
this.checkValidity();
|
|
2481
2581
|
this.errorMessage = undefined;
|
|
2482
2582
|
this.hasDisplayedError = false;
|
|
@@ -2490,11 +2590,13 @@ const MgInputDate = class {
|
|
|
2490
2590
|
* @param newValue - valid new value
|
|
2491
2591
|
*/
|
|
2492
2592
|
setValidity(newValue) {
|
|
2493
|
-
const
|
|
2494
|
-
this.
|
|
2593
|
+
const oldValue = this.valid;
|
|
2594
|
+
if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
|
|
2595
|
+
this.valid = newValue;
|
|
2596
|
+
}
|
|
2495
2597
|
this.invalid = !this.valid;
|
|
2496
2598
|
// We need to send valid event even if it is the same value
|
|
2497
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !==
|
|
2599
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue))
|
|
2498
2600
|
this.inputValid.emit(this.valid);
|
|
2499
2601
|
}
|
|
2500
2602
|
/*************
|
|
@@ -2530,7 +2632,7 @@ const MgInputDate = class {
|
|
|
2530
2632
|
* @returns HTML Element
|
|
2531
2633
|
*/
|
|
2532
2634
|
render() {
|
|
2533
|
-
return (h("mg-input", { key: '
|
|
2635
|
+
return (h("mg-input", { key: '1428f0f9f11d829ec8d3ed507c8690d63839ff17', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
|
|
2534
2636
|
if (el !== null)
|
|
2535
2637
|
this.input = el;
|
|
2536
2638
|
} }))));
|
|
@@ -2562,6 +2664,7 @@ const MgInputNumeric = class {
|
|
|
2562
2664
|
this.inputValid = createEvent(this, "input-valid", 7);
|
|
2563
2665
|
// hasDisplayedError (triggered by blur event)
|
|
2564
2666
|
this.hasDisplayedError = false;
|
|
2667
|
+
this.customErrorMessage = { lock: false };
|
|
2565
2668
|
/**
|
|
2566
2669
|
* Input name
|
|
2567
2670
|
* If not set the value equals the identifier
|
|
@@ -2667,23 +2770,26 @@ const MgInputNumeric = class {
|
|
|
2667
2770
|
this.formatErrorValue = (value) => localeNumber(value, this.locale, !Number.isInteger(value) && this.type === 'decimal' ? this.decimalLength : 0);
|
|
2668
2771
|
/**
|
|
2669
2772
|
* Set input error message
|
|
2670
|
-
* @param
|
|
2773
|
+
* @param fromSetErrorContext - context come from `setError` method
|
|
2671
2774
|
*/
|
|
2672
|
-
this.setErrorMessage = (
|
|
2775
|
+
this.setErrorMessage = (fromSetErrorContext = false) => {
|
|
2673
2776
|
// Set error message
|
|
2674
2777
|
this.errorMessage = undefined;
|
|
2675
2778
|
if (!this.valid) {
|
|
2676
2779
|
const inputError = this.getInputError();
|
|
2677
|
-
|
|
2678
|
-
|
|
2780
|
+
// Does have a new custom error message OR does have a custom error message locked
|
|
2781
|
+
if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
|
|
2782
|
+
this.errorMessage = this.customErrorMessage.message;
|
|
2679
2783
|
}
|
|
2784
|
+
// required
|
|
2680
2785
|
else if (inputError === 'required') {
|
|
2681
2786
|
this.errorMessage = this.messages.errors[inputError];
|
|
2682
2787
|
}
|
|
2788
|
+
// min/max
|
|
2683
2789
|
else {
|
|
2684
2790
|
const formattedMin = this.formatErrorValue(this.min);
|
|
2685
2791
|
const formattedMax = this.formatErrorValue(this.max);
|
|
2686
|
-
this.errorMessage = this.messages.input.numeric.
|
|
2792
|
+
this.errorMessage = this.messages.input.numeric.error[inputError].replace('{min}', formattedMin).replace('{max}', formattedMax);
|
|
2687
2793
|
}
|
|
2688
2794
|
}
|
|
2689
2795
|
};
|
|
@@ -2762,23 +2868,8 @@ const MgInputNumeric = class {
|
|
|
2762
2868
|
if (this.min === undefined && this.max === undefined && text === undefined) {
|
|
2763
2869
|
return undefined;
|
|
2764
2870
|
}
|
|
2765
|
-
// Generate range message based on available constraints
|
|
2766
|
-
let rangeMessage;
|
|
2767
|
-
if (this.min !== undefined && this.max !== undefined) {
|
|
2768
|
-
rangeMessage = this.messages.input.numeric.helpText.minMax.replace('{min}', this.formatErrorValue(this.min)).replace('{max}', this.formatErrorValue(this.max));
|
|
2769
|
-
}
|
|
2770
|
-
else if (this.min !== undefined) {
|
|
2771
|
-
rangeMessage = this.messages.input.numeric.helpText.min.replace('{min}', this.formatErrorValue(this.min));
|
|
2772
|
-
}
|
|
2773
|
-
else if (this.max !== undefined) {
|
|
2774
|
-
rangeMessage = this.messages.input.numeric.helpText.max.replace('{max}', this.formatErrorValue(this.max));
|
|
2775
|
-
}
|
|
2776
|
-
// Combine custom helpText with range message if both exist
|
|
2777
|
-
if (text !== undefined && rangeMessage !== undefined) {
|
|
2778
|
-
return `${text}<br>${rangeMessage}`;
|
|
2779
|
-
}
|
|
2780
2871
|
// Return either custom helpText or range message
|
|
2781
|
-
return text
|
|
2872
|
+
return text;
|
|
2782
2873
|
};
|
|
2783
2874
|
/**
|
|
2784
2875
|
* Renders the readonly content of the input component.
|
|
@@ -2896,17 +2987,22 @@ const MgInputNumeric = class {
|
|
|
2896
2987
|
* When used to set validity to `false`, you should use this method again to reset the validity to `true`.
|
|
2897
2988
|
* @param valid - value indicating the validity
|
|
2898
2989
|
* @param errorMessage - the error message to display
|
|
2990
|
+
* @param errorMessageLock - lock the error message and validity state
|
|
2899
2991
|
*/
|
|
2900
|
-
async setError(valid, errorMessage) {
|
|
2992
|
+
async setError(valid, errorMessage, errorMessageLock = false) {
|
|
2901
2993
|
if (typeof valid !== 'boolean') {
|
|
2902
2994
|
throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean.');
|
|
2903
2995
|
}
|
|
2904
|
-
else if (!isValidString(errorMessage)) {
|
|
2996
|
+
else if (errorMessage !== undefined && !isValidString(errorMessage)) {
|
|
2905
2997
|
throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string.');
|
|
2906
2998
|
}
|
|
2907
2999
|
else {
|
|
3000
|
+
this.customErrorMessage = {
|
|
3001
|
+
lock: valid ? false : errorMessageLock,
|
|
3002
|
+
message: valid ? undefined : errorMessage,
|
|
3003
|
+
};
|
|
2908
3004
|
this.setValidity(valid);
|
|
2909
|
-
this.setErrorMessage(
|
|
3005
|
+
this.setErrorMessage(true);
|
|
2910
3006
|
this.hasDisplayedError = this.invalid;
|
|
2911
3007
|
}
|
|
2912
3008
|
}
|
|
@@ -2924,6 +3020,8 @@ const MgInputNumeric = class {
|
|
|
2924
3020
|
// - Keep everything in sync both inside and outside the component
|
|
2925
3021
|
return new Promise(resolve => {
|
|
2926
3022
|
requestAnimationFrame(() => {
|
|
3023
|
+
// unlock validity check by reseting customErrorMessage
|
|
3024
|
+
this.customErrorMessage = { lock: false };
|
|
2927
3025
|
this.checkValidity();
|
|
2928
3026
|
this.errorMessage = undefined;
|
|
2929
3027
|
this.hasDisplayedError = false;
|
|
@@ -2937,11 +3035,13 @@ const MgInputNumeric = class {
|
|
|
2937
3035
|
* @param newValue - valid new value
|
|
2938
3036
|
*/
|
|
2939
3037
|
setValidity(newValue) {
|
|
2940
|
-
const
|
|
2941
|
-
this.
|
|
3038
|
+
const oldValue = this.valid;
|
|
3039
|
+
if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
|
|
3040
|
+
this.valid = newValue;
|
|
3041
|
+
}
|
|
2942
3042
|
this.invalid = !this.valid;
|
|
2943
3043
|
// We need to send valid event even if it is the same value
|
|
2944
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !==
|
|
3044
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue))
|
|
2945
3045
|
this.inputValid.emit(this.valid);
|
|
2946
3046
|
}
|
|
2947
3047
|
/**
|
|
@@ -3013,7 +3113,7 @@ const MgInputNumeric = class {
|
|
|
3013
3113
|
* @returns HTML Element
|
|
3014
3114
|
*/
|
|
3015
3115
|
render() {
|
|
3016
|
-
return (h("mg-input", { key: '
|
|
3116
|
+
return (h("mg-input", { key: 'c47f7c310587fc3bb4e7d5ffd07854a2297958df', 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
|
|
3017
3117
|
? this.readonlyValue && this.renderReadonly()
|
|
3018
3118
|
: [
|
|
3019
3119
|
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) => {
|
|
@@ -3049,6 +3149,7 @@ const MgInputPassword = class {
|
|
|
3049
3149
|
this.inputValid = createEvent(this, "input-valid", 7);
|
|
3050
3150
|
// hasDisplayedError (triggered by blur event)
|
|
3051
3151
|
this.hasDisplayedError = false;
|
|
3152
|
+
this.customErrorMessage = { lock: false };
|
|
3052
3153
|
/**
|
|
3053
3154
|
* Input name
|
|
3054
3155
|
* If not set the value equals the identifier
|
|
@@ -3124,14 +3225,15 @@ const MgInputPassword = class {
|
|
|
3124
3225
|
};
|
|
3125
3226
|
/**
|
|
3126
3227
|
* Set input error message
|
|
3127
|
-
* @param
|
|
3228
|
+
* @param fromSetErrorContext - context come from `setError` method
|
|
3128
3229
|
*/
|
|
3129
|
-
this.setErrorMessage = (
|
|
3230
|
+
this.setErrorMessage = (fromSetErrorContext = false) => {
|
|
3130
3231
|
// Set error message
|
|
3131
3232
|
this.errorMessage = undefined;
|
|
3132
3233
|
if (!this.valid) {
|
|
3133
|
-
|
|
3134
|
-
|
|
3234
|
+
// Does have a new custom error message OR does have a custom error message locked
|
|
3235
|
+
if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
|
|
3236
|
+
this.errorMessage = this.customErrorMessage.message;
|
|
3135
3237
|
}
|
|
3136
3238
|
// required
|
|
3137
3239
|
else if (this.input.validity.valueMissing) {
|
|
@@ -3207,17 +3309,22 @@ const MgInputPassword = class {
|
|
|
3207
3309
|
* When used to set validity to `false`, you should use this method again to reset the validity to `true`.
|
|
3208
3310
|
* @param valid - value indicating the validity
|
|
3209
3311
|
* @param errorMessage - the error message to display
|
|
3312
|
+
* @param errorMessageLock - lock the error message and validity state
|
|
3210
3313
|
*/
|
|
3211
|
-
async setError(valid, errorMessage) {
|
|
3314
|
+
async setError(valid, errorMessage, errorMessageLock = false) {
|
|
3212
3315
|
if (typeof valid !== 'boolean') {
|
|
3213
3316
|
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean.');
|
|
3214
3317
|
}
|
|
3215
|
-
else if (!isValidString(errorMessage)) {
|
|
3318
|
+
else if (errorMessage !== undefined && !isValidString(errorMessage)) {
|
|
3216
3319
|
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string.');
|
|
3217
3320
|
}
|
|
3218
3321
|
else {
|
|
3322
|
+
this.customErrorMessage = {
|
|
3323
|
+
lock: valid ? false : errorMessageLock,
|
|
3324
|
+
message: valid ? undefined : errorMessage,
|
|
3325
|
+
};
|
|
3219
3326
|
this.setValidity(valid);
|
|
3220
|
-
this.setErrorMessage(
|
|
3327
|
+
this.setErrorMessage(true);
|
|
3221
3328
|
this.hasDisplayedError = this.invalid;
|
|
3222
3329
|
}
|
|
3223
3330
|
}
|
|
@@ -3235,6 +3342,8 @@ const MgInputPassword = class {
|
|
|
3235
3342
|
// - Keep everything in sync both inside and outside the component
|
|
3236
3343
|
return new Promise(resolve => {
|
|
3237
3344
|
requestAnimationFrame(() => {
|
|
3345
|
+
// unlock validity check by reseting customErrorMessage
|
|
3346
|
+
this.customErrorMessage = { lock: false };
|
|
3238
3347
|
this.checkValidity();
|
|
3239
3348
|
this.errorMessage = undefined;
|
|
3240
3349
|
this.hasDisplayedError = false;
|
|
@@ -3248,11 +3357,13 @@ const MgInputPassword = class {
|
|
|
3248
3357
|
* @param newValue - valid new value
|
|
3249
3358
|
*/
|
|
3250
3359
|
setValidity(newValue) {
|
|
3251
|
-
const
|
|
3252
|
-
this.
|
|
3360
|
+
const oldValue = this.valid;
|
|
3361
|
+
if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
|
|
3362
|
+
this.valid = newValue;
|
|
3363
|
+
}
|
|
3253
3364
|
this.invalid = !this.valid;
|
|
3254
3365
|
// We need to send valid event even if it is the same value
|
|
3255
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !==
|
|
3366
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue))
|
|
3256
3367
|
this.inputValid.emit(this.valid);
|
|
3257
3368
|
}
|
|
3258
3369
|
/*************
|
|
@@ -3280,7 +3391,7 @@ const MgInputPassword = class {
|
|
|
3280
3391
|
* @returns HTML Element
|
|
3281
3392
|
*/
|
|
3282
3393
|
render() {
|
|
3283
|
-
return (h("mg-input", { key: '
|
|
3394
|
+
return (h("mg-input", { key: '845c075a44c50043776b7577642254d772629eef', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
3284
3395
|
if (el !== null)
|
|
3285
3396
|
this.input = el;
|
|
3286
3397
|
} }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: this.displayPassword ? 'eye-slash' : 'eye' }))))));
|
|
@@ -3318,6 +3429,7 @@ const MgInputRadio = class {
|
|
|
3318
3429
|
this.classVerticalList = 'mg-c-input--vertical-list';
|
|
3319
3430
|
// hasDisplayedError (triggered by blur event)
|
|
3320
3431
|
this.hasDisplayedError = false;
|
|
3432
|
+
this.customErrorMessage = { lock: false };
|
|
3321
3433
|
/**
|
|
3322
3434
|
* Input name
|
|
3323
3435
|
* If not set the value equals the identifier
|
|
@@ -3381,16 +3493,18 @@ const MgInputRadio = class {
|
|
|
3381
3493
|
};
|
|
3382
3494
|
/**
|
|
3383
3495
|
* Set input error message
|
|
3384
|
-
* @param
|
|
3496
|
+
* @param fromSetErrorContext - context come from `setError` method
|
|
3385
3497
|
*/
|
|
3386
|
-
this.setErrorMessage = (
|
|
3498
|
+
this.setErrorMessage = (fromSetErrorContext = false) => {
|
|
3387
3499
|
const invalidElement = this.getInvalidElement();
|
|
3388
3500
|
// Set error message
|
|
3389
3501
|
this.errorMessage = undefined;
|
|
3390
3502
|
if (!this.valid) {
|
|
3391
|
-
|
|
3392
|
-
|
|
3503
|
+
// Does have a new custom error message OR does have a custom error message locked
|
|
3504
|
+
if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
|
|
3505
|
+
this.errorMessage = this.customErrorMessage.message;
|
|
3393
3506
|
}
|
|
3507
|
+
// required
|
|
3394
3508
|
else if (invalidElement.validity.valueMissing) {
|
|
3395
3509
|
this.errorMessage = this.messages.errors.required;
|
|
3396
3510
|
}
|
|
@@ -3495,17 +3609,22 @@ const MgInputRadio = class {
|
|
|
3495
3609
|
* When used to set validity to `false`, you should use this method again to reset the validity to `true`.
|
|
3496
3610
|
* @param valid - value indicating the validity
|
|
3497
3611
|
* @param errorMessage - the error message to display
|
|
3612
|
+
* @param errorMessageLock - lock the error message and validity state
|
|
3498
3613
|
*/
|
|
3499
|
-
async setError(valid, errorMessage) {
|
|
3614
|
+
async setError(valid, errorMessage, errorMessageLock = false) {
|
|
3500
3615
|
if (typeof valid !== 'boolean') {
|
|
3501
3616
|
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean.');
|
|
3502
3617
|
}
|
|
3503
|
-
else if (!isValidString(errorMessage)) {
|
|
3618
|
+
else if (errorMessage !== undefined && !isValidString(errorMessage)) {
|
|
3504
3619
|
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string.');
|
|
3505
3620
|
}
|
|
3506
3621
|
else {
|
|
3622
|
+
this.customErrorMessage = {
|
|
3623
|
+
lock: valid ? false : errorMessageLock,
|
|
3624
|
+
message: valid ? undefined : errorMessage,
|
|
3625
|
+
};
|
|
3507
3626
|
this.setValidity(valid);
|
|
3508
|
-
this.setErrorMessage(
|
|
3627
|
+
this.setErrorMessage(true);
|
|
3509
3628
|
this.hasDisplayedError = this.invalid;
|
|
3510
3629
|
}
|
|
3511
3630
|
}
|
|
@@ -3523,6 +3642,8 @@ const MgInputRadio = class {
|
|
|
3523
3642
|
// - Keep everything in sync both inside and outside the component
|
|
3524
3643
|
return new Promise(resolve => {
|
|
3525
3644
|
requestAnimationFrame(() => {
|
|
3645
|
+
// unlock validity check by reseting customErrorMessage
|
|
3646
|
+
this.customErrorMessage = { lock: false };
|
|
3526
3647
|
this.checkValidity();
|
|
3527
3648
|
this.errorMessage = undefined;
|
|
3528
3649
|
this.hasDisplayedError = false;
|
|
@@ -3536,11 +3657,13 @@ const MgInputRadio = class {
|
|
|
3536
3657
|
* @param newValue - valid new value
|
|
3537
3658
|
*/
|
|
3538
3659
|
setValidity(newValue) {
|
|
3539
|
-
const
|
|
3540
|
-
this.
|
|
3660
|
+
const oldValue = this.valid;
|
|
3661
|
+
if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
|
|
3662
|
+
this.valid = newValue;
|
|
3663
|
+
}
|
|
3541
3664
|
this.invalid = !this.valid;
|
|
3542
3665
|
// We need to send valid event even if it is the same value
|
|
3543
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !==
|
|
3666
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue))
|
|
3544
3667
|
this.inputValid.emit(this.valid);
|
|
3545
3668
|
}
|
|
3546
3669
|
/*************
|
|
@@ -3571,7 +3694,7 @@ const MgInputRadio = class {
|
|
|
3571
3694
|
* @returns HTML Element
|
|
3572
3695
|
*/
|
|
3573
3696
|
render() {
|
|
3574
|
-
return (h("mg-input", { key: '
|
|
3697
|
+
return (h("mg-input", { key: '9290ab8e5048dd6806985ab55d13bd8b0dd93bd1', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
|
|
3575
3698
|
if (el !== null)
|
|
3576
3699
|
this.inputs[index] = el;
|
|
3577
3700
|
} }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));
|
|
@@ -3588,7 +3711,7 @@ const MgInputRadio = class {
|
|
|
3588
3711
|
};
|
|
3589
3712
|
MgInputRadio.style = mgInputRadioCss;
|
|
3590
3713
|
|
|
3591
|
-
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:-0.2rem;outline-style:solid;outline-width:.2rem}.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__with-character-left>mg-icon:first-of-type,.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__with-character-left .mg-c-input__box,.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-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.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__with-character-left:not(:has(textarea)) .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__with-character-left:not(:has(textarea)) .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__with-character-left:not(:has(textarea)) .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: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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__box{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%}}";
|
|
3714
|
+
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:-0.2rem;outline-style:solid;outline-width:.2rem}.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__with-character-left>mg-icon:first-of-type,.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__with-character-left .mg-c-input__box,.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-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.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__with-character-left:not(:has(textarea)) .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__with-character-left:not(:has(textarea)) .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__with-character-left:not(:has(textarea)) .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: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}}a{color:inherit;text-decoration:underline}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%}}";
|
|
3592
3715
|
|
|
3593
3716
|
/**
|
|
3594
3717
|
* Check if item is a well configured option
|
|
@@ -3639,6 +3762,7 @@ const MgInputSelect = class {
|
|
|
3639
3762
|
this.inputValid = createEvent(this, "input-valid", 7);
|
|
3640
3763
|
// hasDisplayedError (triggered by blur event)
|
|
3641
3764
|
this.hasDisplayedError = false;
|
|
3765
|
+
this.customErrorMessage = { lock: false };
|
|
3642
3766
|
/**
|
|
3643
3767
|
* Input name
|
|
3644
3768
|
* If not set the value equals the identifier
|
|
@@ -3747,15 +3871,17 @@ const MgInputSelect = class {
|
|
|
3747
3871
|
};
|
|
3748
3872
|
/**
|
|
3749
3873
|
* Set input error message
|
|
3750
|
-
* @param
|
|
3874
|
+
* @param fromSetErrorContext - context come from `setError` method
|
|
3751
3875
|
*/
|
|
3752
|
-
this.setErrorMessage = (
|
|
3876
|
+
this.setErrorMessage = (fromSetErrorContext = false) => {
|
|
3753
3877
|
// Set error message
|
|
3754
3878
|
this.errorMessage = undefined;
|
|
3755
3879
|
if (!this.valid) {
|
|
3756
|
-
|
|
3757
|
-
|
|
3880
|
+
// Does have a new custom error message OR does have a custom error message locked
|
|
3881
|
+
if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
|
|
3882
|
+
this.errorMessage = this.customErrorMessage.message;
|
|
3758
3883
|
}
|
|
3884
|
+
// required
|
|
3759
3885
|
else if (this.input.validity.valueMissing) {
|
|
3760
3886
|
this.errorMessage = this.messages.errors.required;
|
|
3761
3887
|
}
|
|
@@ -3869,17 +3995,22 @@ const MgInputSelect = class {
|
|
|
3869
3995
|
* When used to set validity to `false`, you should use this method again to reset the validity to `true`.
|
|
3870
3996
|
* @param valid - value indicating the validity
|
|
3871
3997
|
* @param errorMessage - the error message to display
|
|
3998
|
+
* @param errorMessageLock - lock the error message and validity state
|
|
3872
3999
|
*/
|
|
3873
|
-
async setError(valid, errorMessage) {
|
|
4000
|
+
async setError(valid, errorMessage, errorMessageLock = false) {
|
|
3874
4001
|
if (typeof valid !== 'boolean') {
|
|
3875
4002
|
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean.');
|
|
3876
4003
|
}
|
|
3877
|
-
else if (!isValidString(errorMessage)) {
|
|
4004
|
+
else if (errorMessage !== undefined && !isValidString(errorMessage)) {
|
|
3878
4005
|
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string.');
|
|
3879
4006
|
}
|
|
3880
4007
|
else {
|
|
4008
|
+
this.customErrorMessage = {
|
|
4009
|
+
lock: valid ? false : errorMessageLock,
|
|
4010
|
+
message: valid ? undefined : errorMessage,
|
|
4011
|
+
};
|
|
3881
4012
|
this.setValidity(valid);
|
|
3882
|
-
this.setErrorMessage(
|
|
4013
|
+
this.setErrorMessage(true);
|
|
3883
4014
|
this.hasDisplayedError = this.invalid;
|
|
3884
4015
|
}
|
|
3885
4016
|
}
|
|
@@ -3897,6 +4028,8 @@ const MgInputSelect = class {
|
|
|
3897
4028
|
// - Keep everything in sync both inside and outside the component
|
|
3898
4029
|
return new Promise(resolve => {
|
|
3899
4030
|
requestAnimationFrame(() => {
|
|
4031
|
+
// unlock validity check by reseting customErrorMessage
|
|
4032
|
+
this.customErrorMessage = { lock: false };
|
|
3900
4033
|
this.checkValidity();
|
|
3901
4034
|
this.errorMessage = undefined;
|
|
3902
4035
|
this.hasDisplayedError = false;
|
|
@@ -3910,11 +4043,13 @@ const MgInputSelect = class {
|
|
|
3910
4043
|
* @param newValue - valid new value
|
|
3911
4044
|
*/
|
|
3912
4045
|
setValidity(newValue) {
|
|
3913
|
-
const
|
|
3914
|
-
this.
|
|
4046
|
+
const oldValue = this.valid;
|
|
4047
|
+
if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
|
|
4048
|
+
this.valid = newValue;
|
|
4049
|
+
}
|
|
3915
4050
|
this.invalid = !this.valid;
|
|
3916
4051
|
// We need to send valid event even if it is the same value
|
|
3917
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !==
|
|
4052
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue)) {
|
|
3918
4053
|
this.inputValid.emit(this.valid);
|
|
3919
4054
|
}
|
|
3920
4055
|
}
|
|
@@ -3951,7 +4086,7 @@ const MgInputSelect = class {
|
|
|
3951
4086
|
*/
|
|
3952
4087
|
render() {
|
|
3953
4088
|
const readonlyValue = this.getReadonlyValue();
|
|
3954
|
-
return (h("mg-input", { key: '
|
|
4089
|
+
return (h("mg-input", { key: '928c7d4ebccfe38ae86630d2cb8c06f07ca09a8a', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
3955
4090
|
if (el !== null)
|
|
3956
4091
|
this.input = el;
|
|
3957
4092
|
} }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
@@ -4007,6 +4142,7 @@ const MgInputText = class {
|
|
|
4007
4142
|
this.classIsAppendInputSlotContent = 'mg-c-input--is-append-input-slot-content';
|
|
4008
4143
|
// hasDisplayedError (triggered by blur event)
|
|
4009
4144
|
this.hasDisplayedError = false;
|
|
4145
|
+
this.customErrorMessage = { lock: false };
|
|
4010
4146
|
/**
|
|
4011
4147
|
* Input name
|
|
4012
4148
|
* If not set the value equals the identifier
|
|
@@ -4105,27 +4241,29 @@ const MgInputText = class {
|
|
|
4105
4241
|
};
|
|
4106
4242
|
/**
|
|
4107
4243
|
* Set input error message
|
|
4108
|
-
* @param
|
|
4244
|
+
* @param fromSetErrorContext - context come from `setError` method
|
|
4109
4245
|
*/
|
|
4110
|
-
this.setErrorMessage = (
|
|
4246
|
+
this.setErrorMessage = (fromSetErrorContext = false) => {
|
|
4111
4247
|
var _a;
|
|
4112
4248
|
// Set error message
|
|
4113
4249
|
this.errorMessage = undefined;
|
|
4114
|
-
|
|
4115
|
-
|
|
4116
|
-
this.
|
|
4117
|
-
|
|
4118
|
-
|
|
4119
|
-
|
|
4120
|
-
|
|
4121
|
-
|
|
4122
|
-
|
|
4123
|
-
|
|
4124
|
-
|
|
4125
|
-
|
|
4126
|
-
|
|
4127
|
-
|
|
4128
|
-
|
|
4250
|
+
if (!this.valid) {
|
|
4251
|
+
// Does have a new custom error message OR does have a custom error message locked
|
|
4252
|
+
if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
|
|
4253
|
+
this.errorMessage = this.customErrorMessage.message;
|
|
4254
|
+
}
|
|
4255
|
+
// Does not match type (email, emails, tel, url, etc.)
|
|
4256
|
+
else if (this.input.validity.typeMismatch) {
|
|
4257
|
+
this.errorMessage = this.messages.input.text.errors.typeMismatch[this.type];
|
|
4258
|
+
}
|
|
4259
|
+
// Does not match pattern
|
|
4260
|
+
else if (this.input.validity.patternMismatch) {
|
|
4261
|
+
this.errorMessage = (_a = this.patternErrorMessage) !== null && _a !== void 0 ? _a : this.messages.input.text.errors.typeMismatch[this.type];
|
|
4262
|
+
}
|
|
4263
|
+
// required
|
|
4264
|
+
else if (this.input.validity.valueMissing) {
|
|
4265
|
+
this.errorMessage = this.messages.errors.required;
|
|
4266
|
+
}
|
|
4129
4267
|
}
|
|
4130
4268
|
};
|
|
4131
4269
|
/**
|
|
@@ -4259,17 +4397,22 @@ const MgInputText = class {
|
|
|
4259
4397
|
* When used to set validity to `false`, you should use this method again to reset the validity to `true`.
|
|
4260
4398
|
* @param valid - value indicating the validity
|
|
4261
4399
|
* @param errorMessage - the error message to display
|
|
4400
|
+
* @param errorMessageLock - lock the error message and validity state
|
|
4262
4401
|
*/
|
|
4263
|
-
async setError(valid, errorMessage) {
|
|
4402
|
+
async setError(valid, errorMessage, errorMessageLock = false) {
|
|
4264
4403
|
if (typeof valid !== 'boolean') {
|
|
4265
4404
|
throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean.');
|
|
4266
4405
|
}
|
|
4267
|
-
else if (!isValidString(errorMessage)) {
|
|
4406
|
+
else if (errorMessage !== undefined && !isValidString(errorMessage)) {
|
|
4268
4407
|
throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string.');
|
|
4269
4408
|
}
|
|
4270
4409
|
else {
|
|
4410
|
+
this.customErrorMessage = {
|
|
4411
|
+
lock: valid ? false : errorMessageLock,
|
|
4412
|
+
message: valid ? undefined : errorMessage,
|
|
4413
|
+
};
|
|
4271
4414
|
this.setValidity(valid);
|
|
4272
|
-
this.setErrorMessage(
|
|
4415
|
+
this.setErrorMessage(true);
|
|
4273
4416
|
this.hasDisplayedError = this.invalid;
|
|
4274
4417
|
}
|
|
4275
4418
|
}
|
|
@@ -4287,6 +4430,8 @@ const MgInputText = class {
|
|
|
4287
4430
|
// - Keep everything in sync both inside and outside the component
|
|
4288
4431
|
return new Promise(resolve => {
|
|
4289
4432
|
requestAnimationFrame(() => {
|
|
4433
|
+
// unlock validity check by reseting customErrorMessage
|
|
4434
|
+
this.customErrorMessage = { lock: false };
|
|
4290
4435
|
this.checkValidity();
|
|
4291
4436
|
this.errorMessage = undefined;
|
|
4292
4437
|
this.hasDisplayedError = false;
|
|
@@ -4300,11 +4445,13 @@ const MgInputText = class {
|
|
|
4300
4445
|
* @param newValue - valid new value
|
|
4301
4446
|
*/
|
|
4302
4447
|
setValidity(newValue) {
|
|
4303
|
-
const
|
|
4304
|
-
this.
|
|
4448
|
+
const oldValue = this.valid;
|
|
4449
|
+
if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
|
|
4450
|
+
this.valid = newValue;
|
|
4451
|
+
}
|
|
4305
4452
|
this.invalid = !this.valid;
|
|
4306
4453
|
// We need to send valid event even if it is the same value
|
|
4307
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !==
|
|
4454
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue))
|
|
4308
4455
|
this.inputValid.emit(this.valid);
|
|
4309
4456
|
}
|
|
4310
4457
|
/*************
|
|
@@ -4341,7 +4488,7 @@ const MgInputText = class {
|
|
|
4341
4488
|
* @returns HTML Element
|
|
4342
4489
|
*/
|
|
4343
4490
|
render() {
|
|
4344
|
-
return (h("mg-input", { key: '
|
|
4491
|
+
return (h("mg-input", { key: '69e40a90a6e4be8aa1eb3ac1b53acfe899c20453', 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
|
|
4345
4492
|
? this.value && this.renderReadonly()
|
|
4346
4493
|
: [
|
|
4347
4494
|
h("div", { key: "input", class: "mg-c-input__with-character-left", style: {
|
|
@@ -4385,6 +4532,7 @@ const MgInputTextarea = class {
|
|
|
4385
4532
|
this.classDisplayCharacterLeft = 'mg-c-input--display-character-left';
|
|
4386
4533
|
// hasDisplayedError (triggered by blur event)
|
|
4387
4534
|
this.hasDisplayedError = false;
|
|
4535
|
+
this.customErrorMessage = { lock: false };
|
|
4388
4536
|
/**
|
|
4389
4537
|
* Input name
|
|
4390
4538
|
* If not set the value equals the identifier
|
|
@@ -4483,15 +4631,16 @@ const MgInputTextarea = class {
|
|
|
4483
4631
|
};
|
|
4484
4632
|
/**
|
|
4485
4633
|
* Set input error message
|
|
4486
|
-
* @param
|
|
4634
|
+
* @param fromSetErrorContext - context come from `setError` method
|
|
4487
4635
|
*/
|
|
4488
|
-
this.setErrorMessage = (
|
|
4636
|
+
this.setErrorMessage = (fromSetErrorContext = false) => {
|
|
4489
4637
|
// Set error message
|
|
4490
4638
|
this.errorMessage = undefined;
|
|
4491
|
-
// Does
|
|
4639
|
+
// Does have a new custom error message
|
|
4492
4640
|
if (!this.valid) {
|
|
4493
|
-
|
|
4494
|
-
|
|
4641
|
+
// Does have a new custom error message OR does have a custom error message locked
|
|
4642
|
+
if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
|
|
4643
|
+
this.errorMessage = this.customErrorMessage.message;
|
|
4495
4644
|
}
|
|
4496
4645
|
else if (!this.getPatternValidity()) {
|
|
4497
4646
|
this.errorMessage = this.patternErrorMessage;
|
|
@@ -4584,17 +4733,22 @@ const MgInputTextarea = class {
|
|
|
4584
4733
|
* When used to set validity to `false`, you should use this method again to reset the validity to `true`.
|
|
4585
4734
|
* @param valid - value indicating the validity
|
|
4586
4735
|
* @param errorMessage - the error message to display
|
|
4736
|
+
* @param errorMessageLock - lock the error message and validity state
|
|
4587
4737
|
*/
|
|
4588
|
-
async setError(valid, errorMessage) {
|
|
4738
|
+
async setError(valid, errorMessage, errorMessageLock = false) {
|
|
4589
4739
|
if (typeof valid !== 'boolean') {
|
|
4590
4740
|
throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean.');
|
|
4591
4741
|
}
|
|
4592
|
-
else if (!isValidString(errorMessage)) {
|
|
4742
|
+
else if (errorMessage !== undefined && !isValidString(errorMessage)) {
|
|
4593
4743
|
throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string.');
|
|
4594
4744
|
}
|
|
4595
4745
|
else {
|
|
4746
|
+
this.customErrorMessage = {
|
|
4747
|
+
lock: valid ? false : errorMessageLock,
|
|
4748
|
+
message: valid ? undefined : errorMessage,
|
|
4749
|
+
};
|
|
4596
4750
|
this.setValidity(valid);
|
|
4597
|
-
this.setErrorMessage(
|
|
4751
|
+
this.setErrorMessage(true);
|
|
4598
4752
|
this.hasDisplayedError = this.invalid;
|
|
4599
4753
|
}
|
|
4600
4754
|
}
|
|
@@ -4612,6 +4766,8 @@ const MgInputTextarea = class {
|
|
|
4612
4766
|
// - Keep everything in sync both inside and outside the component
|
|
4613
4767
|
return new Promise(resolve => {
|
|
4614
4768
|
requestAnimationFrame(() => {
|
|
4769
|
+
// unlock validity check by reseting customErrorMessage
|
|
4770
|
+
this.customErrorMessage = { lock: false };
|
|
4615
4771
|
this.checkValidity();
|
|
4616
4772
|
this.errorMessage = undefined;
|
|
4617
4773
|
this.hasDisplayedError = false;
|
|
@@ -4625,11 +4781,13 @@ const MgInputTextarea = class {
|
|
|
4625
4781
|
* @param newValue - valid new value
|
|
4626
4782
|
*/
|
|
4627
4783
|
setValidity(newValue) {
|
|
4628
|
-
const
|
|
4629
|
-
this.
|
|
4784
|
+
const oldValue = this.valid;
|
|
4785
|
+
if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
|
|
4786
|
+
this.valid = newValue;
|
|
4787
|
+
}
|
|
4630
4788
|
this.invalid = !this.valid;
|
|
4631
4789
|
// We need to send valid event even if it is the same value
|
|
4632
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !==
|
|
4790
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue))
|
|
4633
4791
|
this.inputValid.emit(this.valid);
|
|
4634
4792
|
}
|
|
4635
4793
|
/*************
|
|
@@ -4662,7 +4820,7 @@ const MgInputTextarea = class {
|
|
|
4662
4820
|
* @returns HTML Element
|
|
4663
4821
|
*/
|
|
4664
4822
|
render() {
|
|
4665
|
-
return (h("mg-input", { key: '
|
|
4823
|
+
return (h("mg-input", { key: '9b58ccb9f0b150f5de8cc9f895f4cdea2bbbeecd', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__with-character-left" }, h("textarea", { class: {
|
|
4666
4824
|
'mg-c-input__box': true,
|
|
4667
4825
|
'mg-c-input__box--width': true,
|
|
4668
4826
|
'mg-c-input__box--resizable': this.resizable === 'both',
|
|
@@ -4738,7 +4896,7 @@ const MgInputTitle = class {
|
|
|
4738
4896
|
};
|
|
4739
4897
|
MgInputTitle.style = mgInputTitleCss;
|
|
4740
4898
|
|
|
4741
|
-
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: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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:
|
|
4899
|
+
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: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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) 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;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:not(.mg-c-input--readonly) .mg-c-input__button-toggle{margin-top:var(--mg-b-size-4)}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__button-toggle{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;background-color:var(--mg-b-color-neutral-20);font-weight:600}.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}";
|
|
4742
4900
|
|
|
4743
4901
|
/**
|
|
4744
4902
|
* type Option validation function
|
|
@@ -4769,7 +4927,9 @@ const MgInputToggle = class {
|
|
|
4769
4927
|
*/
|
|
4770
4928
|
this.labelHide = false;
|
|
4771
4929
|
/**
|
|
4772
|
-
* Define if toggle have on/off style
|
|
4930
|
+
* Define if toggle have on/off style,
|
|
4931
|
+
* the left icon is hidden.
|
|
4932
|
+
* Only available in combination with the "isIcon" prop.
|
|
4773
4933
|
*/
|
|
4774
4934
|
this.isOnOff = false;
|
|
4775
4935
|
/**
|
|
@@ -4804,7 +4964,7 @@ const MgInputToggle = class {
|
|
|
4804
4964
|
// Set error message
|
|
4805
4965
|
this.errorMessage = undefined;
|
|
4806
4966
|
// Does have a custom error message
|
|
4807
|
-
if (!this.valid && errorMessage
|
|
4967
|
+
if (!this.valid && typeof errorMessage === 'string') {
|
|
4808
4968
|
this.errorMessage = errorMessage;
|
|
4809
4969
|
}
|
|
4810
4970
|
};
|
|
@@ -4819,14 +4979,31 @@ const MgInputToggle = class {
|
|
|
4819
4979
|
*/
|
|
4820
4980
|
this.validateSlots = () => {
|
|
4821
4981
|
const slots = Array.from(this.element.children);
|
|
4982
|
+
// validate slots
|
|
4822
4983
|
if (slots.length !== 2) {
|
|
4823
|
-
|
|
4984
|
+
if (this.isOnOff && this.isIcon) {
|
|
4985
|
+
// ONLY slot="item-2" is required in with isOnOff && isIcon
|
|
4986
|
+
if (this.element.querySelector('[slot="item-2"]') === null) {
|
|
4987
|
+
throw new Error('<mg-input-toggle> an element with attribute slot="item-2" is required.');
|
|
4988
|
+
}
|
|
4989
|
+
}
|
|
4990
|
+
else {
|
|
4991
|
+
throw new Error('<mg-input-toggle> 2 slots are required.');
|
|
4992
|
+
}
|
|
4824
4993
|
}
|
|
4825
|
-
|
|
4994
|
+
// update slots
|
|
4995
|
+
if (!this.isIcon) {
|
|
4826
4996
|
// Due to text-overflow set to ellipsis
|
|
4827
4997
|
// we need to ensure that slot element have title to display value on mouse over
|
|
4828
4998
|
slots.forEach(slot => slot.setAttribute('title', slot.textContent));
|
|
4829
4999
|
}
|
|
5000
|
+
else {
|
|
5001
|
+
slots.forEach(slot => {
|
|
5002
|
+
if (slot.nodeName === 'MG-ICON') {
|
|
5003
|
+
slot.size = 'small';
|
|
5004
|
+
}
|
|
5005
|
+
});
|
|
5006
|
+
}
|
|
4830
5007
|
};
|
|
4831
5008
|
/**
|
|
4832
5009
|
* Get checked item
|
|
@@ -4867,10 +5044,16 @@ const MgInputToggle = class {
|
|
|
4867
5044
|
}
|
|
4868
5045
|
}
|
|
4869
5046
|
watchIsOnOff(newValue) {
|
|
4870
|
-
if (newValue)
|
|
5047
|
+
if (newValue) {
|
|
4871
5048
|
this.classCollection.add(this.classOnOff);
|
|
4872
|
-
|
|
5049
|
+
if (!this.isIcon) {
|
|
5050
|
+
this.isOnOff = false;
|
|
5051
|
+
console.warn('<mg-input-toggle> prop "isOnOff" must be used with "isIcon". Setting isOnOff to false.');
|
|
5052
|
+
}
|
|
5053
|
+
}
|
|
5054
|
+
else {
|
|
4873
5055
|
this.classCollection.delete(this.classOnOff);
|
|
5056
|
+
}
|
|
4874
5057
|
}
|
|
4875
5058
|
watchIsIcon(newValue) {
|
|
4876
5059
|
if (newValue)
|
|
@@ -4918,7 +5101,7 @@ const MgInputToggle = class {
|
|
|
4918
5101
|
if (typeof valid !== 'boolean') {
|
|
4919
5102
|
throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');
|
|
4920
5103
|
}
|
|
4921
|
-
else if (!isValidString(errorMessage)) {
|
|
5104
|
+
else if (errorMessage !== undefined && !isValidString(errorMessage)) {
|
|
4922
5105
|
throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
|
|
4923
5106
|
}
|
|
4924
5107
|
else {
|
|
@@ -4995,7 +5178,7 @@ const MgInputToggle = class {
|
|
|
4995
5178
|
*/
|
|
4996
5179
|
render() {
|
|
4997
5180
|
const checkedItem = this.getCheckedItem(this.checked);
|
|
4998
|
-
return (h("mg-input", { key: '
|
|
5181
|
+
return (h("mg-input", { key: '4d87ed13bbd3d3a54303c21001247e1251417326', 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 ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked, ref: el => {
|
|
4999
5182
|
if (el !== null)
|
|
5000
5183
|
this.button = el;
|
|
5001
5184
|
} }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
|
|
@@ -5285,6 +5468,10 @@ const MgMenu = class {
|
|
|
5285
5468
|
* @param event - mg-item-loaded "item-loaded" custom event
|
|
5286
5469
|
*/
|
|
5287
5470
|
updateItemListener(event) {
|
|
5471
|
+
// `<mg-action-more>` element doesn't need `data-has-focus` attribute
|
|
5472
|
+
if (event.target.nodeName === 'MG-ACTION-MORE') {
|
|
5473
|
+
return;
|
|
5474
|
+
}
|
|
5288
5475
|
const itemToWatch = event.target.nodeName === 'MG-ITEM-MORE' ? event.target.shadowRoot.querySelector('mg-menu-item') : event.target;
|
|
5289
5476
|
['click', 'focus'].forEach(trigger => {
|
|
5290
5477
|
itemToWatch.addEventListener(trigger, () => {
|
|
@@ -5345,7 +5532,7 @@ const MgMenu = class {
|
|
|
5345
5532
|
* @returns HTML Element
|
|
5346
5533
|
*/
|
|
5347
5534
|
render() {
|
|
5348
|
-
return (h(Host, { key: '
|
|
5535
|
+
return (h(Host, { key: '753833b01b86d6983f5d063f5598e2187b147a6e', role: "list", "aria-label": this.label }, h("slot", { key: '56702e49f5a97feddeb66e6271bd898061aa0d48' })));
|
|
5349
5536
|
}
|
|
5350
5537
|
get element() { return getElement(this); }
|
|
5351
5538
|
static get watchers() { return {
|
|
@@ -5826,9 +6013,9 @@ const MgMessage = class {
|
|
|
5826
6013
|
* @returns HTML Element
|
|
5827
6014
|
*/
|
|
5828
6015
|
render() {
|
|
5829
|
-
return (h("div", { key: '
|
|
6016
|
+
return (h("div", { key: 'f99bf527eb2c6005eeaec11f89aaa08f8865ea57', class: this.classCollection.join() }, h("mg-card", { key: 'beede3cd97b022d947c216b6bba454a104ba5790', shadow: true }, this.variantStyle === 'bar-left' && h("span", { key: '515828d725a996c9d57b39ad75e9373150a1b78a', class: "mg-c-message__bar" }), h("span", { key: '02ae41c66af25c2611b9b6cb8c87a1ad99346fa3', class: "mg-c-message__icon" }, h("mg-icon", { key: '3eadb40ed0dfa5ec51155608a67769c5fee3d402', icon: this.getIcon() })), h("div", { key: 'b832251e8f330d00b512bcd508ae9bf6e5f511cb', class: "mg-c-message__content" }, h("span", { key: 'c3520fc49bd5c3c187a83823050ceb9ca8c12d46', class: "mg-c-message__content-slot" }, h("slot", { key: 'f4064dff9536cbb76e45c5c4c1a89621da9531b2' })), this.hasActions && [
|
|
5830
6017
|
h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
|
|
5831
|
-
h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '
|
|
6018
|
+
h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '5585f7c14c2c3896cfdb5319414cd82f4d4b3a8b', name: "actions" })),
|
|
5832
6019
|
]))));
|
|
5833
6020
|
}
|
|
5834
6021
|
get element() { return getElement(this); }
|
|
@@ -5950,11 +6137,11 @@ const MgModal = class {
|
|
|
5950
6137
|
* @returns HTML Element
|
|
5951
6138
|
*/
|
|
5952
6139
|
render() {
|
|
5953
|
-
return (h("dialog", { key: '
|
|
6140
|
+
return (h("dialog", { key: '2d99322fd3c80b8cbfea70589cf579e0c1c6f06b', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
|
|
5954
6141
|
if (el !== null) {
|
|
5955
6142
|
this.dialog = el;
|
|
5956
6143
|
}
|
|
5957
|
-
} }, h("mg-card", { key: '
|
|
6144
|
+
} }, h("mg-card", { key: '32692a6d41ef30b3d3e61ddcfea47350d374ed09', shadow: true }, h("div", { key: 'c87bb43bb069671b65a9759ee293e77975707597', class: "mg-c-modal__dialog" }, h("header", { key: '1272a946878efcf8c69f3b09852ba6938cbe31b0', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: '0704656c7c5ac4c8d405f2cd673e91f72763ee8f', class: "mg-c-modal__close-button" }, h("mg-button", { key: '4402971c763ee34145de5bd69d367fde68f9d1a2', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '9e16add6a3e387971507a252671c895b6c94a586', icon: "cross" })))), h("h1", { key: '3e4fc2b4419398528565d382b728b8b752758ddd', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '170ff6bd9592687baa4c561615f540ad1c7400e4', class: "mg-c-modal__content" }, h("slot", { key: 'cb710e2a57e4c997deac367169b56047af1200b1' })), this.hasActions && (h("footer", { key: '1e08d67caeaaaf75eb97faa11528719ea537c24c', class: "mg-c-modal__footer" }, h("slot", { key: '461ec8e4117477aef08dc6d346ad0bf6007ec12d', name: "actions" })))))));
|
|
5958
6145
|
}
|
|
5959
6146
|
get element() { return getElement(this); }
|
|
5960
6147
|
static get watchers() { return {
|
|
@@ -6175,6 +6362,13 @@ const MgPanel = class {
|
|
|
6175
6362
|
/************
|
|
6176
6363
|
* Methods *
|
|
6177
6364
|
************/
|
|
6365
|
+
/**
|
|
6366
|
+
* Check if panel-title slot is used
|
|
6367
|
+
* @returns true if slot is used
|
|
6368
|
+
*/
|
|
6369
|
+
this.hasPanelTitleSlot = () => {
|
|
6370
|
+
return this.element.querySelector('[slot="panel-title"]') !== null;
|
|
6371
|
+
};
|
|
6178
6372
|
/**
|
|
6179
6373
|
* Toggle is editing state
|
|
6180
6374
|
*/
|
|
@@ -6228,7 +6422,7 @@ const MgPanel = class {
|
|
|
6228
6422
|
* Render collapse button
|
|
6229
6423
|
* @returns collpase button
|
|
6230
6424
|
*/
|
|
6231
|
-
this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
|
|
6425
|
+
this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.expandToggleDisplay === 'icon' ? this.panelTitle : undefined }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && (this.hasPanelTitleSlot() ? h("slot", { name: "panel-title" }) : this.panelTitle))));
|
|
6232
6426
|
/**
|
|
6233
6427
|
* Render edit button
|
|
6234
6428
|
* @returns edit Button
|
|
@@ -6245,7 +6439,8 @@ const MgPanel = class {
|
|
|
6245
6439
|
*/
|
|
6246
6440
|
this.renderTitle = () => {
|
|
6247
6441
|
const elementsToRender = [this.renderCollapseButton()];
|
|
6248
|
-
if
|
|
6442
|
+
// Add edit functionality only if not using slot and title is editable
|
|
6443
|
+
if (this.titleEditable && !this.hasPanelTitleSlot()) {
|
|
6249
6444
|
if (!this.isEditing)
|
|
6250
6445
|
elementsToRender.push(this.renderEditButton());
|
|
6251
6446
|
else
|
|
@@ -6271,14 +6466,24 @@ const MgPanel = class {
|
|
|
6271
6466
|
}
|
|
6272
6467
|
}
|
|
6273
6468
|
validatePanelTitle(newValue) {
|
|
6274
|
-
if (
|
|
6275
|
-
|
|
6276
|
-
|
|
6469
|
+
if (newValue !== undefined) {
|
|
6470
|
+
if (!isValidString(newValue)) {
|
|
6471
|
+
throw new Error(`<mg-panel> prop "panelTitle" must be a string. Passed value: ${toString(newValue)}.`);
|
|
6472
|
+
}
|
|
6473
|
+
else {
|
|
6474
|
+
this.titleChange.emit(newValue);
|
|
6475
|
+
}
|
|
6476
|
+
}
|
|
6277
6477
|
}
|
|
6278
6478
|
validateTitlePattern(newValue) {
|
|
6279
6479
|
if (newValue !== undefined && !this.titleEditable)
|
|
6280
6480
|
throw new Error(`<mg-panel> prop "titleEditable" must be set to "true".`);
|
|
6281
6481
|
}
|
|
6482
|
+
validateTitleEditable(newValue) {
|
|
6483
|
+
if (newValue && this.hasPanelTitleSlot()) {
|
|
6484
|
+
throw new Error(`<mg-panel> prop "titleEditable" cannot be used with panel-title slot.`);
|
|
6485
|
+
}
|
|
6486
|
+
}
|
|
6282
6487
|
validateTitlePosition(newValue) {
|
|
6283
6488
|
if (!titlePositions.includes(newValue))
|
|
6284
6489
|
throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${toString(newValue)}.`);
|
|
@@ -6291,6 +6496,9 @@ const MgPanel = class {
|
|
|
6291
6496
|
throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${toString(newValue)}.`);
|
|
6292
6497
|
if (newValue === 'icon' && this.titleEditable)
|
|
6293
6498
|
this.titleEditable = false;
|
|
6499
|
+
if (newValue === 'icon' && this.hasPanelTitleSlot()) {
|
|
6500
|
+
throw new Error(`<mg-panel> prop "expandToggleDisplay" cannot be "icon" when panel-title slot is used.`);
|
|
6501
|
+
}
|
|
6294
6502
|
}
|
|
6295
6503
|
/*************
|
|
6296
6504
|
* Lifecycle *
|
|
@@ -6305,9 +6513,15 @@ const MgPanel = class {
|
|
|
6305
6513
|
this.watchIdentifier(this.identifier);
|
|
6306
6514
|
this.validateTitlePattern(this.titlePattern);
|
|
6307
6515
|
this.validateTitlePattern(this.titlePatternErrorMessage);
|
|
6308
|
-
|
|
6516
|
+
// Only validate panelTitle if slot is not used
|
|
6517
|
+
if (!this.hasPanelTitleSlot()) {
|
|
6518
|
+
if (!isValidString(this.panelTitle))
|
|
6519
|
+
throw new Error(`<mg-panel> prop "panelTitle" is required when panel-title slot is not used.`);
|
|
6520
|
+
this.validatePanelTitle(this.panelTitle);
|
|
6521
|
+
}
|
|
6309
6522
|
this.validateExpandToggleDisplay(this.expandToggleDisplay);
|
|
6310
6523
|
this.validateTitlePosition(this.titlePosition);
|
|
6524
|
+
this.validateTitleEditable(this.titleEditable);
|
|
6311
6525
|
}
|
|
6312
6526
|
/**
|
|
6313
6527
|
* Edit DOM after render
|
|
@@ -6323,7 +6537,7 @@ const MgPanel = class {
|
|
|
6323
6537
|
*/
|
|
6324
6538
|
render() {
|
|
6325
6539
|
const headerId = `${this.identifier}-header`;
|
|
6326
|
-
return (h("section", { key: '
|
|
6540
|
+
return (h("section", { key: '3662204d763051c34ea13de4b7b3f7abc7914b81', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '46f113258172b1d040f65a4d312554b0c0551489', shadow: this.shadow }, h("header", { key: '1d7e7a48a5c4f89d141a5a7e46b220d4f9c082a5', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'ab0aec831cc79d982b7556d6e245c80ae2979083', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: 'e831573fe9d5ff783073d123b7e2a54baad73bfc' })))));
|
|
6327
6541
|
}
|
|
6328
6542
|
get element() { return getElement(this); }
|
|
6329
6543
|
static get watchers() { return {
|
|
@@ -6331,6 +6545,7 @@ const MgPanel = class {
|
|
|
6331
6545
|
"panelTitle": ["validatePanelTitle"],
|
|
6332
6546
|
"titlePattern": ["validateTitlePattern"],
|
|
6333
6547
|
"titlePatternErrorMessage": ["validateTitlePattern"],
|
|
6548
|
+
"titleEditable": ["validateTitleEditable"],
|
|
6334
6549
|
"titlePosition": ["validateTitlePosition"],
|
|
6335
6550
|
"expanded": ["handleExpanded"],
|
|
6336
6551
|
"expandToggleDisplay": ["validateExpandToggleDisplay"]
|
|
@@ -8368,7 +8583,7 @@ const MgPopover = class {
|
|
|
8368
8583
|
* @returns HTML Element
|
|
8369
8584
|
*/
|
|
8370
8585
|
render() {
|
|
8371
|
-
return (h(Host, { key: '
|
|
8586
|
+
return (h(Host, { key: '2c1506b8e2da100519aeeae75fc5c378a81c473c' }, h("slot", { key: 'f9aea885e8cbc168614c05761829f0a0740eba9e' }), h("slot", { key: 'fa6106a660a73b3761d4783f8d46d401c47b4eb6', name: "content" })));
|
|
8372
8587
|
}
|
|
8373
8588
|
get element() { return getElement(this); }
|
|
8374
8589
|
static get watchers() { return {
|
|
@@ -8426,7 +8641,7 @@ const MgPopoverContent = class {
|
|
|
8426
8641
|
* @returns HTML Element
|
|
8427
8642
|
*/
|
|
8428
8643
|
render() {
|
|
8429
|
-
return (h(Host, { key: '
|
|
8644
|
+
return (h(Host, { key: '054fc82954b39a488f7fe5cb391d89b5fa4a61fe' }, h("mg-card", { key: 'bb89bada37069b50295bd93d988667c3b85eada3', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'a59d6610574b964be1e2ce34ccd8e31c1395b6ff', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '5bcc9e4eb21396f4fc66a6f1e4d6c5cdf68ec1f4', icon: "cross" }))), h("div", { key: '57be2022f3b61220e1249faeaf2acee9960027fe', class: "mg-c-popover-content__title" }, h("slot", { key: 'c7870e86a9f105cf6b9d4520c77874bce9235d72', name: "title" })), h("slot", { key: '5af8462232625d9c7d694bab46351d5e646f62ca', name: "content" })), h("slot", { key: '599863410dd7d751e82c440cd6c4fb7f2c48d9f3', name: "arrow" })));
|
|
8430
8645
|
}
|
|
8431
8646
|
get element() { return getElement(this); }
|
|
8432
8647
|
};
|
|
@@ -8471,7 +8686,7 @@ const MgSkipLinks = class {
|
|
|
8471
8686
|
* @returns HTML Element
|
|
8472
8687
|
*/
|
|
8473
8688
|
render() {
|
|
8474
|
-
return (h("nav", { key: '
|
|
8689
|
+
return (h("nav", { key: '5bf4427662bdca6512969bee91aa03f43a126743', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '1d2b2a56b3960f70a3d37b333c77bf686643e0fd', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
|
|
8475
8690
|
}
|
|
8476
8691
|
get element() { return getElement(this); }
|
|
8477
8692
|
static get watchers() { return {
|
|
@@ -8991,7 +9206,7 @@ const MgTabs = class {
|
|
|
8991
9206
|
* @returns HTML Element
|
|
8992
9207
|
*/
|
|
8993
9208
|
render() {
|
|
8994
|
-
return (h("div", { key: '
|
|
9209
|
+
return (h("div", { key: 'ae71d21c9ce3acb07b3adf67bbe25f205d382abc', class: this.classCollection.join() }, h("header", { key: 'cf6cdae863602c956aa450a34e91a6d8b950d8f5', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
|
|
8995
9210
|
[`${this.buttonTabBaseClass}`]: true,
|
|
8996
9211
|
[`${this.buttonTabBaseClass}--horizontal`]: true,
|
|
8997
9212
|
[`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
|