@mgdis/mg-components 5.14.0 → 5.16.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/loader.cjs.js +1 -1
- package/dist/cjs/{mg-action-more_32.cjs.entry.js → mg-action-more_34.cjs.entry.js} +342 -115
- package/dist/cjs/mg-components.cjs.js +1 -1
- package/dist/cjs/mg-item-more.cjs.entry.js +4 -2
- package/dist/collection/assets/icons/index.js +179 -0
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.css +43 -0
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js +49 -0
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.css +0 -43
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +57 -12
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.css +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +35 -15
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +1 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +2 -2
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +9 -2
- package/dist/collection/components/molecules/mg-details/mg-details.js +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js +21 -8
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.js +4 -2
- package/dist/collection/components/molecules/mg-modal/mg-modal.conf.js +4 -0
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +37 -5
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.css +135 -0
- package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js +100 -0
- package/dist/collection/components/molecules/mg-popover/mg-popover.css +0 -111
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +42 -43
- package/dist/collection/utils/components.utils.js +8 -7
- package/dist/collection/utils/unit.test.utils.js +6 -5
- package/dist/components/components.utils.js +8 -7
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +2 -0
- package/dist/components/mg-action-more.js +29 -16
- package/dist/components/mg-details.js +1 -1
- package/dist/components/mg-form.js +21 -8
- package/dist/components/mg-icon2.js +77 -17
- package/dist/components/mg-input-checkbox-paginated2.js +18 -12
- package/dist/components/mg-input-checkbox.js +36 -24
- package/dist/components/mg-input-date.js +13 -7
- package/dist/components/mg-input-numeric.js +47 -21
- package/dist/components/mg-input-password.js +13 -7
- package/dist/components/mg-input-radio.js +13 -7
- package/dist/components/mg-input-select2.js +13 -7
- package/dist/components/mg-input-text2.js +15 -9
- package/dist/components/mg-input-textarea.js +15 -9
- package/dist/components/mg-input-toggle.js +12 -6
- package/dist/components/mg-item-more.js +24 -16
- package/dist/components/mg-menu-item2.js +18 -12
- package/dist/components/mg-modal.js +16 -3
- package/dist/components/mg-pagination2.js +16 -10
- package/dist/components/mg-panel.js +21 -15
- package/dist/components/mg-popover-content.d.ts +11 -0
- package/dist/components/mg-popover-content.js +6 -0
- package/dist/components/mg-popover-content2.js +88 -0
- package/dist/components/mg-popover2.js +54 -47
- package/dist/components/mg-tooltip-content.d.ts +11 -0
- package/dist/components/mg-tooltip-content.js +6 -0
- package/dist/components/mg-tooltip-content2.js +41 -0
- package/dist/components/mg-tooltip2.js +64 -15
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{mg-action-more_32.entry.js → mg-action-more_34.entry.js} +341 -116
- package/dist/esm/mg-components.js +1 -1
- package/dist/esm/mg-item-more.entry.js +4 -2
- package/dist/mg-components/mg-components.css +1 -1
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/p-3286bc46.entry.js +1 -0
- package/dist/mg-components/p-91f4a30d.entry.js +1 -0
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.d.ts +14 -0
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts +7 -1
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +19 -0
- package/dist/types/components/molecules/mg-action-more/mg-action-more.d.ts +6 -1
- package/dist/types/components/molecules/mg-form/mg-form.d.ts +8 -0
- package/dist/types/components/molecules/mg-modal/mg-modal.conf.d.ts +8 -0
- package/dist/types/components/molecules/mg-modal/mg-modal.d.ts +8 -2
- package/dist/types/components/molecules/mg-popover/mg-popover-content/mg-popover-content.d.ts +47 -0
- package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +8 -11
- package/dist/types/components.d.ts +59 -0
- package/package.json +18 -18
- package/dist/mg-components/p-4ae1130f.entry.js +0 -1
- package/dist/mg-components/p-aa298e17.entry.js +0 -1
|
@@ -27,11 +27,15 @@ var Status$1;
|
|
|
27
27
|
* @returns ID
|
|
28
28
|
*/
|
|
29
29
|
const createID = (prefix = '', length = 10) => {
|
|
30
|
-
let ID = '';
|
|
31
30
|
const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
|
|
32
31
|
const charsLength = chars.length;
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
let ID = '';
|
|
33
|
+
let now = Date.now();
|
|
34
|
+
while (length > 0) {
|
|
35
|
+
now += Math.pow(10, 6); // Add 1 millisecond to the timestamp
|
|
36
|
+
const index = now % charsLength;
|
|
37
|
+
ID += chars.charAt(index);
|
|
38
|
+
length--;
|
|
35
39
|
}
|
|
36
40
|
return (prefix !== '' ? `${prefix}-` : '') + ID;
|
|
37
41
|
};
|
|
@@ -137,10 +141,7 @@ const getParentWindows = (localWindow, windows = []) => {
|
|
|
137
141
|
*/
|
|
138
142
|
const getChildWindows = (localWindow, windows = []) => {
|
|
139
143
|
if (localWindow.frames.length > 0) {
|
|
140
|
-
|
|
141
|
-
// https://developer.mozilla.org/en-US/docs/Web/API/Window/frames
|
|
142
|
-
for (let i = 0; i < localWindow.frames.length; i++) {
|
|
143
|
-
const childWindow = localWindow.frames[i];
|
|
144
|
+
for (const childWindow of Array.from(localWindow.frames)) {
|
|
144
145
|
windows.push(childWindow);
|
|
145
146
|
getChildWindows(childWindow, windows);
|
|
146
147
|
}
|
|
@@ -186,7 +187,7 @@ const MgActionMore = class {
|
|
|
186
187
|
this.name = 'mg-action-more';
|
|
187
188
|
this.mgPopoverIdentifier = createID(this.name);
|
|
188
189
|
/************
|
|
189
|
-
*
|
|
190
|
+
* Methods *
|
|
190
191
|
***********/
|
|
191
192
|
/**
|
|
192
193
|
* Toogle expanded props
|
|
@@ -194,6 +195,13 @@ const MgActionMore = class {
|
|
|
194
195
|
this.toggleExpanded = () => {
|
|
195
196
|
this.expanded = !this.expanded;
|
|
196
197
|
};
|
|
198
|
+
/**
|
|
199
|
+
* Handle popover display change value
|
|
200
|
+
* @param event - display change updated value
|
|
201
|
+
*/
|
|
202
|
+
this.handleDisplayChange = (event) => {
|
|
203
|
+
this.expanded = event.detail;
|
|
204
|
+
};
|
|
197
205
|
/**
|
|
198
206
|
* Button click handler
|
|
199
207
|
*/
|
|
@@ -262,7 +270,7 @@ const MgActionMore = class {
|
|
|
262
270
|
'mg-a11y-animation': true,
|
|
263
271
|
} }, h("mg-icon", { icon: "chevron-down", size: "small" })));
|
|
264
272
|
}
|
|
265
|
-
return (h(Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { class: "mg-action-more" }, h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded }, h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), h("div", { slot: "content" }, h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
|
|
273
|
+
return (h(Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { class: "mg-action-more" }, h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), h("div", { slot: "content" }, h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
|
|
266
274
|
var _a;
|
|
267
275
|
return (
|
|
268
276
|
// eslint-disable-next-line react/jsx-no-bind
|
|
@@ -654,7 +662,7 @@ const MgDetails = class {
|
|
|
654
662
|
* @returns HTML Element
|
|
655
663
|
*/
|
|
656
664
|
render() {
|
|
657
|
-
return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
|
|
665
|
+
return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
|
|
658
666
|
}
|
|
659
667
|
static get watchers() { return {
|
|
660
668
|
"toggleClosed": ["validateTitles"],
|
|
@@ -702,21 +710,34 @@ const MgForm = class {
|
|
|
702
710
|
this.classCollection.delete(this.classAllRequired);
|
|
703
711
|
// If the form is disabled or readonly none of them are required
|
|
704
712
|
// Check if all fields are not editable (readonly or disabled)
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
//
|
|
713
|
+
const isEditable = input => !(input.disabled || input.readonly);
|
|
714
|
+
const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';
|
|
715
|
+
if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {
|
|
716
|
+
// Get editable inputs
|
|
717
|
+
const editableInputs = this.mgInputs.filter(isEditable);
|
|
718
|
+
// Get required inputs
|
|
709
719
|
// mg-input-toggle can not be required
|
|
710
|
-
|
|
711
|
-
|
|
720
|
+
const requiredInputs = editableInputs.filter(input => !isMgInputToggle(input) && input.required);
|
|
721
|
+
// All inputs are required
|
|
722
|
+
if ([requiredInputs.length, editableInputs.length].every(length => length === 1) ||
|
|
723
|
+
(requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)) {
|
|
724
|
+
this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
|
|
712
725
|
this.classCollection.add(this.classAllRequired);
|
|
713
726
|
}
|
|
714
727
|
// Some fields are required
|
|
715
728
|
else if (requiredInputs.length > 0) {
|
|
716
|
-
this.requiredMessage = requiredInputs
|
|
729
|
+
this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');
|
|
717
730
|
}
|
|
718
731
|
}
|
|
719
732
|
};
|
|
733
|
+
/**
|
|
734
|
+
* Returns a required message based on the count of required inputs.
|
|
735
|
+
* @param requiredInputs - An array of required input elements.
|
|
736
|
+
* @param keySingle - The key for the singular message format.
|
|
737
|
+
* @param keyPlural - The key for the plural message format.
|
|
738
|
+
* @returns The appropriate required message based on the count of required inputs.
|
|
739
|
+
*/
|
|
740
|
+
this.getRequiredMessageBasedOnCount = (requiredInputs, keySingle, keyPlural) => this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];
|
|
720
741
|
/**
|
|
721
742
|
* Check if form is valid
|
|
722
743
|
*/
|
|
@@ -828,7 +849,7 @@ const MgForm = class {
|
|
|
828
849
|
* @returns HTML Element
|
|
829
850
|
*/
|
|
830
851
|
render() {
|
|
831
|
-
return (h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: el => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
|
|
852
|
+
return (h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: (el) => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
|
|
832
853
|
}
|
|
833
854
|
get element() { return getElement(this); }
|
|
834
855
|
static get watchers() { return {
|
|
@@ -860,6 +881,7 @@ const iconList = [
|
|
|
860
881
|
"api",
|
|
861
882
|
"archive",
|
|
862
883
|
"archive-outline",
|
|
884
|
+
"arrow-clock",
|
|
863
885
|
"arrow-down",
|
|
864
886
|
"arrow-down-a-z",
|
|
865
887
|
"arrow-down-right",
|
|
@@ -878,6 +900,9 @@ const iconList = [
|
|
|
878
900
|
"arrows-rotate-backward",
|
|
879
901
|
"ban",
|
|
880
902
|
"bell",
|
|
903
|
+
"bell-outline",
|
|
904
|
+
"book",
|
|
905
|
+
"book-outline",
|
|
881
906
|
"briefcase",
|
|
882
907
|
"briefcase-outline",
|
|
883
908
|
"building-outline",
|
|
@@ -901,6 +926,7 @@ const iconList = [
|
|
|
901
926
|
"code-square-outline",
|
|
902
927
|
"cog",
|
|
903
928
|
"comment",
|
|
929
|
+
"comment-outline",
|
|
904
930
|
"comment-sms",
|
|
905
931
|
"conversation",
|
|
906
932
|
"conversation-outline",
|
|
@@ -911,6 +937,8 @@ const iconList = [
|
|
|
911
937
|
"dashboard",
|
|
912
938
|
"dashboard-outline",
|
|
913
939
|
"download",
|
|
940
|
+
"earth",
|
|
941
|
+
"earth-outline",
|
|
914
942
|
"ellipsis",
|
|
915
943
|
"ellipsis-vertical",
|
|
916
944
|
"euro",
|
|
@@ -919,13 +947,17 @@ const iconList = [
|
|
|
919
947
|
"exclamation-circle-outline",
|
|
920
948
|
"exclamation-stamp",
|
|
921
949
|
"exclamation-triangle",
|
|
950
|
+
"exclamation-triangle-outline",
|
|
922
951
|
"eye",
|
|
923
952
|
"eye-slash",
|
|
953
|
+
"fax",
|
|
954
|
+
"fax-outline",
|
|
924
955
|
"file",
|
|
925
956
|
"file-cog",
|
|
926
957
|
"file-download",
|
|
927
958
|
"file-excel",
|
|
928
959
|
"file-excel-outline",
|
|
960
|
+
"file-outline",
|
|
929
961
|
"file-pdf",
|
|
930
962
|
"file-pdf-outline",
|
|
931
963
|
"file-text",
|
|
@@ -936,17 +968,26 @@ const iconList = [
|
|
|
936
968
|
"filter",
|
|
937
969
|
"floppy-disk",
|
|
938
970
|
"folder",
|
|
971
|
+
"folder-check",
|
|
972
|
+
"folder-check-outline",
|
|
939
973
|
"folder-lines",
|
|
940
974
|
"folder-lines-outline",
|
|
941
975
|
"folder-link",
|
|
942
976
|
"folder-outline",
|
|
943
977
|
"folder-star",
|
|
978
|
+
"folders",
|
|
979
|
+
"folders-outline",
|
|
980
|
+
"gavel",
|
|
981
|
+
"gavel-outline",
|
|
944
982
|
"graduation-cap",
|
|
945
983
|
"hand-up",
|
|
946
984
|
"history",
|
|
947
985
|
"home",
|
|
948
986
|
"home-outline",
|
|
949
987
|
"info-circle",
|
|
988
|
+
"info-circle-outline",
|
|
989
|
+
"interrogation-circle",
|
|
990
|
+
"interrogation-circle-outline",
|
|
950
991
|
"key",
|
|
951
992
|
"laptop",
|
|
952
993
|
"life-ring",
|
|
@@ -960,6 +1001,9 @@ const iconList = [
|
|
|
960
1001
|
"log-out",
|
|
961
1002
|
"magnifying-glass",
|
|
962
1003
|
"mail",
|
|
1004
|
+
"mail-outline",
|
|
1005
|
+
"messages-square",
|
|
1006
|
+
"messages-square-outline",
|
|
963
1007
|
"notes",
|
|
964
1008
|
"notes-outline",
|
|
965
1009
|
"paper-plane",
|
|
@@ -969,6 +1013,7 @@ const iconList = [
|
|
|
969
1013
|
"pen-fancy",
|
|
970
1014
|
"pen-fancy-files-outline",
|
|
971
1015
|
"pen-fancy-outline",
|
|
1016
|
+
"pen-outline",
|
|
972
1017
|
"phone",
|
|
973
1018
|
"picture",
|
|
974
1019
|
"play-circle",
|
|
@@ -983,9 +1028,11 @@ const iconList = [
|
|
|
983
1028
|
"tag",
|
|
984
1029
|
"tags",
|
|
985
1030
|
"thumb-up",
|
|
1031
|
+
"thumb-up-outline",
|
|
986
1032
|
"thumbtack",
|
|
987
1033
|
"thumbtack-outline",
|
|
988
1034
|
"trash",
|
|
1035
|
+
"trash-outline",
|
|
989
1036
|
"universal-access",
|
|
990
1037
|
"unlink",
|
|
991
1038
|
"unlock",
|
|
@@ -993,12 +1040,16 @@ const iconList = [
|
|
|
993
1040
|
"user",
|
|
994
1041
|
"user-circle",
|
|
995
1042
|
"user-group",
|
|
1043
|
+
"user-lock",
|
|
1044
|
+
"user-outline",
|
|
996
1045
|
"user-pen-fancy-outline",
|
|
997
1046
|
"user-plus",
|
|
998
1047
|
"user-question-outline",
|
|
999
1048
|
"user-shield-outline",
|
|
1000
1049
|
"users",
|
|
1001
|
-
"
|
|
1050
|
+
"users-outline",
|
|
1051
|
+
"wallet",
|
|
1052
|
+
"wallet-outline"
|
|
1002
1053
|
];
|
|
1003
1054
|
|
|
1004
1055
|
const icons = {
|
|
@@ -1010,6 +1061,7 @@ const icons = {
|
|
|
1010
1061
|
'api': '<svg aria-hidden="true" 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.01ZM8.51 5.81c-.11-.09-.27-.14-.5-.14h-.38v1.17h.27c.26 0 .45-.05.58-.15.13-.1.19-.25.19-.44s-.05-.34-.16-.43Zm1.57 5.13-.3-.4c-.1-.1-.09-.27 0-.37l.52-.52c.1-.1.26-.1.37 0l.4.29c.06-.03.13-.06.2-.08l.07-.49c0-.14.12-.25.26-.25h.45a5.44 5.44 0 1 0-10.5-1.99 5.44 5.44 0 0 0 5.44 5.44c.78 0 1.54-.17 2.25-.49v-.6c0-.14.11-.26.26-.26l.49-.07c.02-.07.05-.13.08-.2Zm.18-5.96h.84v3.94h-.84V4.98ZM5.4 8.92l-.29-.94H3.67l-.29.94h-.9l1.39-3.96h1.02l1.4 3.96h-.9Zm3.72-1.74c-.26.23-.64.34-1.13.34h-.36v1.4h-.84V4.98h1.26c.48 0 .84.1 1.09.31.25.21.37.51.37.92 0 .42-.13.75-.4.97ZM4.4 5.57c-.06.23-.23.8-.51 1.71h1.03c-.26-.85-.41-1.33-.45-1.44-.03-.11-.06-.2-.07-.26Z"/></svg>',
|
|
1011
1062
|
'archive': '<svg aria-hidden="true" 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-1V6H3Zm7 2H6V7h4v1Zm3-3H3c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1Z"/></svg>',
|
|
1012
1063
|
'archive-outline': '<svg aria-hidden="true" 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-1Zm-1 11H4.04S4 12.98 4 12.96V6h8v7Zm1-8H3V3h10v2Zm-3 3H6V7h4v1Z"/></svg>',
|
|
1064
|
+
'arrow-clock': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.26 12.225a6 6 0 1 1 .863-7.348L12 6h3V3l-1.152 1.152a7 7 0 1 0-.88 8.78l-.707-.707Z"/><path fill="currentColor" d="m10.351 10.321.005-.005v.01l-.005-.005Zm-.705.705.705-.705-2.445-2.445v-3.59h-1v4l2.74 2.74Z"/></svg>',
|
|
1013
1065
|
'arrow-down': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13 10.1h-2.77a.31.31 0 0 1-.32-.28V.94a.3.3 0 0 0-.32-.29H6.37A.32.32 0 0 0 6 .94v8.87a.29.29 0 0 1-.31.29H3a.3.3 0 0 0-.31.29.27.27 0 0 0 .08.22l5.06 4.58a.36.36 0 0 0 .46 0l5-4.58a.29.29 0 0 0 0-.42c-.07-.09-.17-.09-.29-.09Z"/></svg>',
|
|
1014
1066
|
'arrow-down-a-z': '<svg aria-hidden="true" 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.06l-.36-1Zm-.36-1.02-.53-1.49-.53 1.49h1.06Zm1.79 5.18V9H9.09v1h3.29l-3.29 2.84V14h4.63v-1h-3.29l3.29-2.84Z"/></svg>',
|
|
1015
1067
|
'arrow-down-right': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m1.98 3.47 8.75 8.75H6.94c-.58 0-1.05.47-1.05 1.06s.47 1.05 1.05 1.05h6.33c.58 0 1.05-.47 1.05-1.05V6.94a1.05 1.05 0 1 0-2.1 0v3.79L3.47 1.98c-.41-.41-1.08-.41-1.49 0-.41.41-.41 1.08 0 1.49Z"/></svg>',
|
|
@@ -1027,7 +1079,10 @@ const icons = {
|
|
|
1027
1079
|
'arrows-rotate': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14.3 6.37V2.94c0-.16-.06-.32-.18-.43a.6.6 0 0 0-.85 0l-.91.91a6.354 6.354 0 0 0-3.31-1.65 6.365 6.365 0 0 0-7.33 5.22h2.14c.16-.72.5-1.38 1-1.92v-.02a4.281 4.281 0 0 1 6.05-.18L9.84 6c-.1.1-.16.24-.18.38 0 .34.28.62.62.62h3.44c.33-.02.59-.3.58-.63ZM1.71 9.63v3.43c0 .16.06.32.18.43a.6.6 0 0 0 .85 0l.91-.91c.92.88 2.09 1.46 3.35 1.66 3.47.57 6.74-1.77 7.31-5.24h-2.14c-.17.74-.54 1.42-1.06 1.97a4.254 4.254 0 0 1-6.02.16l1.07-1.08c.11-.11.17-.27.17-.42A.63.63 0 0 0 5.72 9H2.28c-.33.03-.58.3-.57.63Z"/></svg>',
|
|
1028
1080
|
'arrows-rotate-backward': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M2.3 7h3.4c.3 0 .6-.3.6-.6 0-.1-.1-.3-.2-.4l-1-1.1c1.7-1.6 4.4-1.5 6 .2.5.5.8 1.2 1 1.9h2.1c-.5-3.5-3.8-5.8-7.2-5.2-1.3.2-2.4.8-3.4 1.6l-.9-.9c-.2-.2-.6-.2-.8 0-.1.1-.2.3-.2.4v3.4c0 .4.2.7.6.7zm11.4 2h-3.4c-.4 0-.6.3-.6.6 0 .2.1.3.2.4l1.1 1.1c-1.7 1.6-4.4 1.5-6-.2-.6-.5-1-1.2-1.2-1.9H1.7c.6 3.5 3.9 5.8 7.3 5.2 1.3-.2 2.4-.8 3.3-1.7l.9.9c.2.2.6.2.8 0 .1-.1.2-.3.2-.4V9.6c.1-.3-.1-.6-.5-.6z"/></svg>',
|
|
1029
1081
|
'ban': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Zm3.85 3.48a5.46 5.46 0 0 1 .61 7L4.88 3.54a5.46 5.46 0 0 1 6.97.61Zm-7.7 7.7a5.45 5.45 0 0 1-.61-7l7.58 7.58a5.46 5.46 0 0 1-7-.61Z"/></svg>',
|
|
1030
|
-
'bell': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="
|
|
1082
|
+
'bell': '<svg aria-hidden="true" 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-.83V6Zm2.027 6a2 2 0 1 0 4 0h-4Z"/></svg>',
|
|
1083
|
+
'bell-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" d="M11.47 8.3v.297l.26.142 1.508.822c.455.248.28.939-.239.939H3.002c-.514 0-.694-.681-.247-.935l1.461-.83.253-.144V6a3.5 3.5 0 0 1 7 0v2.3Zm-3.473 5.2a1.5 1.5 0 0 1-1.415-1h2.83a1.5 1.5 0 0 1-1.415 1Z"/></svg>',
|
|
1084
|
+
'book': '<svg aria-hidden="true" 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-1H3V3Zm8 0H9v4h2V3Z" clip-rule="evenodd"/></svg>',
|
|
1085
|
+
'book-outline': '<svg aria-hidden="true" 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-1H4Zm5 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-1v4H9V3Z" clip-rule="evenodd"/></svg>',
|
|
1031
1086
|
'briefcase': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Z"/></svg>',
|
|
1032
1087
|
'briefcase-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Zm8 9H2v-7h12v7Z"/></svg>',
|
|
1033
1088
|
'building-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M4 2h8v12H9v-1a1 1 0 1 0-2 0v1H4V2Zm4 13h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h4ZM7 4H5v2h2V4Zm2 0h2v2H9V4Zm2 4H9v2h2V8ZM5 8h2v2H5V8Z"/></svg>',
|
|
@@ -1050,7 +1105,8 @@ const icons = {
|
|
|
1050
1105
|
'clock-outline': '<svg aria-hidden="true" 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-7Z"/></svg>',
|
|
1051
1106
|
'code-square-outline': '<svg aria-hidden="true" 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.55l.73.73ZM3.01 14c-.27 0-.5-.1-.7-.3-.2-.2-.3-.43-.3-.7V3c0-.27.1-.5.3-.7.2-.2.43-.3.7-.3h10c.27 0 .5.1.7.3.2.2.3.43.3.7v10c0 .27-.1.5-.3.7-.2.2-.43.3-.7.3H3Zm0-1h10V3H3v10Zm0-10v10V3Z"/></svg>',
|
|
1052
1107
|
'cog': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14.82 9.76 13.56 9a5.54 5.54 0 0 0 0-2.07l1.26-.72a.36.36 0 0 0 .18-.38A7.5 7.5 0 0 0 13.37 3a.35.35 0 0 0-.44 0l-1.26.72a5.51 5.51 0 0 0-1.79-1V1.21a.34.34 0 0 0-.27-.34 7.29 7.29 0 0 0-3.22 0 .34.34 0 0 0-.28.34v1.45a5.83 5.83 0 0 0-1.79 1L3.06 3a.35.35 0 0 0-.43 0A7.24 7.24 0 0 0 1 5.83a.34.34 0 0 0 .16.41L2.44 7a5.49 5.49 0 0 0 0 2l-1.26.73a.35.35 0 0 0-.16.41A7.24 7.24 0 0 0 2.63 13a.35.35 0 0 0 .43.07l1.26-.73a5.56 5.56 0 0 0 1.79 1v1.45a.35.35 0 0 0 .28.34 7.29 7.29 0 0 0 3.22 0 .35.35 0 0 0 .28-.34v-1.45a6 6 0 0 0 1.79-1l1.26.73a.35.35 0 0 0 .43-.07A7.39 7.39 0 0 0 15 10.17a.37.37 0 0 0-.17-.41Zm-6.82.6A2.36 2.36 0 1 1 10.35 8 2.36 2.36 0 0 1 8 10.36Z"/></svg>',
|
|
1053
|
-
'comment': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="
|
|
1108
|
+
'comment': '<svg aria-hidden="true" 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-11h-1ZM5 6h6v1H5V6Zm3 2H5v1h3V8Z" clip-rule="evenodd"/></svg>',
|
|
1109
|
+
'comment-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M5 6h6v1H5V6Zm0 2h3v1H5V8Z"/><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.743V14Zm1-2.728-.363-.3A4.5 4.5 0 0 1 7.5 3h1a4.5 4.5 0 1 1 0 9H7.36L5 12.674v-1.402Z" clip-rule="evenodd"/></svg>',
|
|
1054
1110
|
'comment-sms': '<svg aria-hidden="true" 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 .76-.76c0 .42-.34.76-.76.76m3.05 0a.76.76 0 1 1 .76-.76c0 .42-.34.76-.76.76m3.05 0a.76.76 0 1 1-.02-1.52c.42 0 .77.33.77.75v.01c0 .42-.34.76-.76.76"/></svg>',
|
|
1055
1111
|
'conversation': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M11.22 6.48c0-2.11-2.36-3.81-5.28-3.81S.67 4.37.67 6.48a3.15 3.15 0 0 0 1 2.19A5.17 5.17 0 0 1 .72 10a.2.2 0 0 0 0 .21.23.23 0 0 0 .19.12 4.79 4.79 0 0 0 2.25-.6 6.84 6.84 0 0 0 2.82.6c2.88-.04 5.24-1.75 5.24-3.85Zm3.1 5.23a3.08 3.08 0 0 0 1-2.19C15.28 7.93 14 6.57 12 6a3.84 3.84 0 0 1 0 .48c0 2.52-2.7 4.57-6 4.57a7.16 7.16 0 0 1-.8-.05 5.6 5.6 0 0 0 4.8 2.33 6.7 6.7 0 0 0 2.82-.59 4.66 4.66 0 0 0 2.25.59.21.21 0 0 0 .19-.11.2.2 0 0 0 0-.21 5.15 5.15 0 0 1-.91-1.3Z"/></svg>',
|
|
1056
1112
|
'conversation-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M15 8.5c0 .79-.39 1.51-1.01 2.09v1.91a.508.508 0 0 1-.68.47l-2.26-1.05c-.34.05-.69.08-1.05.08-.23 0-.47-.01-.69-.04-.18 0-.35-.03-.52-.07-.02 0-.03 0-.05-.01-.16-.02-.31-.06-.46-.1-.42-.1-.82-.25-1.18-.43l-.42-.24c-.06-.04-.12-.08-.18-.13.58-.03 1.13-.12 1.64-.27.56.19 1.19.29 1.86.29.29 0 .6-.02.91-.07l.29-.04.28.12 1.5.7v-1.12l.01-.43.31-.3c.32-.29.7-.77.7-1.36 0-.91-.82-1.72-2.01-2.15-.01-.39-.09-.77-.23-1.13.06.02.12.04.19.06.25.08.5.17.73.27.11.05.23.11.34.17.11.06.21.12.31.18.11.07.2.13.3.2.48.35.86.78 1.1 1.26a2.288 2.288 0 0 1 .17.45c.03.11.06.22.07.33.02.12.03.24.03.36Z"/><path fill="currentColor" d="M6 4c2.17 0 4 1.14 4 2.5S8.17 9 6 9c-.29 0-.6-.02-.91-.07l-.3-.04-.27.13-1.51.7V8.17l-.32-.3c-.32-.3-.7-.77-.7-1.36 0-1.36 1.83-2.5 4-2.5m0-1c-2.76 0-5 1.57-5 3.5 0 .79.39 1.51 1.01 2.09v1.91c0 .29.24.5.5.5.06 0 .11 0 .17-.03l2.26-1.05c.34.05.69.08 1.05.08 2.76 0 5-1.57 5-3.5s-2.24-3.5-5-3.5Z"/></svg>',
|
|
@@ -1061,6 +1117,8 @@ const icons = {
|
|
|
1061
1117
|
'dashboard': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M1.67 8.7H7.3V1.67H1.67v7.04Zm0 5.63H7.3v-4.22H1.67v4.22Zm7.04 0h5.63V7.3H8.71v7.04Zm0-12.67v4.23h5.63V1.67H8.71Z"/></svg>',
|
|
1062
1118
|
'dashboard-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13.33 2.67v2.22H9.7V2.67h3.63m-7.04 0V7.7H2.67V2.67H6.3m7.04 5.63v5.04H9.71V8.3h3.63M6.3 11.11v2.22H2.67v-2.22H6.3m8.03-9.44H8.7v4.22h5.63V1.67Zm-7.04 0H1.67v7.04H7.3V1.67Zm7.04 5.63H8.7v7.04h5.63V7.3Zm-7.04 2.81H1.67v4.22H7.3v-4.22Z"/></svg>',
|
|
1063
1119
|
'download': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M6.4 2v4.1c0 .2-.1.3-.3.3H4c-.2 0-.3.1-.3.3 0 .1 0 .2.1.2l4 4c.1.1.3.1.4 0l4-4c.1-.1.1-.3 0-.4-.1-.1-.1-.1-.2-.1H9.9c-.2 0-.3-.1-.3-.3V2c0-.2-.1-.3-.3-.3H6.7c-.1 0-.3.1-.3.3zm7.9 11v1c0 .2-.1.3-.3.3H2c-.2 0-.3-.1-.3-.3v-1c0-.2.1-.3.3-.3h12c.2 0 .3.1.3.3z"/></svg>',
|
|
1120
|
+
'earth': '<svg aria-hidden="true" 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 14Zm-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 .894Zm3.543-9.983V4.53a1 1 0 0 0 1 1h1.234a1 1 0 0 0 .664-.252l.09-.08a6.023 6.023 0 0 0-2.988-2.733Zm3.612 4.622a6.153 6.153 0 0 0-.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.002 6.002 0 0 0 3.665-6.47Z" clip-rule="evenodd"/></svg>',
|
|
1121
|
+
'earth-outline': '<svg aria-hidden="true" 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 14Zm0-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.944a5.955 5.955 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.28A5.997 5.997 0 0 0 8 2a5.973 5.973 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.02 6.02 0 0 0 8 14Zm6-6c0-.165-.007-.327-.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 8Zm-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.5Zm7.287-8.597.164-.146a6.032 6.032 0 0 0-1.458-1.564 6.067 6.067 0 0 0-.772-.457V4.53a.5.5 0 0 0 .5.5h1.234a.5.5 0 0 0 .332-.126Z" clip-rule="evenodd"/></svg>',
|
|
1064
1122
|
'ellipsis': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M2.5 6.17A1.83 1.83 0 1 0 4.33 8c0-1.01-.82-1.83-1.83-1.83Zm11 0A1.83 1.83 0 1 0 15.33 8c0-1.01-.82-1.83-1.83-1.83Zm-5.5 0A1.83 1.83 0 1 0 9.83 8c0-1.01-.82-1.83-1.83-1.83Z"/></svg>',
|
|
1065
1123
|
'ellipsis-vertical': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M6.17 13.5A1.83 1.83 0 1 0 8 11.67c-1.01 0-1.83.82-1.83 1.83Zm0-11A1.83 1.83 0 1 0 8 .67c-1.01 0-1.83.82-1.83 1.83Zm0 5.5A1.83 1.83 0 1 0 8 6.17c-1.01 0-1.83.82-1.83 1.83Z"/></svg>',
|
|
1066
1124
|
'euro': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m12.1 11.02 1.4 1.42a5.948 5.948 0 0 1-4 1.56c-2.64 0-4.86-1.68-5.66-4.04H1.5v-1.5h2.02C3.5 8.3 3.5 8.16 3.5 8c0-.18 0-.36.04-.54H1.5v-1.5h2.38C4.7 3.66 6.9 2 9.5 2c1.54 0 2.94.6 4 1.56l-1.4 1.42c-.7-.6-1.6-.98-2.6-.98-1.46 0-2.74.78-3.44 1.96h3.5v1.5H5.54c-.02.18-.04.36-.04.54 0 .16 0 .32.02.46h4.04v1.5H6.02C6.7 11.18 8.02 12 9.5 12c1 0 1.9-.38 2.6-.98Z"/></svg>',
|
|
@@ -1068,14 +1126,18 @@ const icons = {
|
|
|
1068
1126
|
'exclamation-circle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" stroke="currentColor" d="M8.75 9.5h.5v-6h-2.5v6h2Zm.5 1V10h-2.5v2.5h2.5v-2ZM1.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z"/></svg>',
|
|
1069
1127
|
'exclamation-circle-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8.75 4v5h-1.5V4h1.5Zm0 8v-1.5h-1.5V12h1.5Z"/><path fill="currentColor" fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8Z"/></svg>',
|
|
1070
1128
|
'exclamation-stamp': '<svg aria-hidden="true" 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.28v1.34Zm0-2.67H7.36V4.67h1.28v4.01Z"/></svg>',
|
|
1071
|
-
'exclamation-triangle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="
|
|
1129
|
+
'exclamation-triangle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="m8 2 7 12H1L8 2Zm-.75 4.5h1.5V10h-1.5V6.5Zm1.5 6V11h-1.5v1.5h1.5Z" clip-rule="evenodd"/></svg>',
|
|
1130
|
+
'exclamation-triangle-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8.75 6.5V10h-1.5V6.5h1.5Zm0 6V11h-1.5v1.5h1.5Z"/><path fill="currentColor" fill-rule="evenodd" d="M8 2 1 14h14L8 2Zm0 1.985L2.741 13h10.518L8 3.985Z" clip-rule="evenodd"/></svg>',
|
|
1072
1131
|
'eye': '<svg aria-hidden="true" viewBox="0 0 16 16"><circle cx="8.01" cy="7.96" r="2.44" fill="currentColor"/><path fill="currentColor" d="M15.24 7.59A8.12 8.12 0 0 0 8 2.67 8.12 8.12 0 0 0 .76 7.59a1 1 0 0 0 0 .82A8.12 8.12 0 0 0 8 13.33a8.12 8.12 0 0 0 7.24-4.92 1 1 0 0 0 0-.82ZM8 11.62A3.66 3.66 0 1 1 11.67 8 3.66 3.66 0 0 1 8 11.62Z"/></svg>',
|
|
1073
1132
|
'eye-slash': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M10.25 7a2.43 2.43 0 0 0-2.08-1.46Zm-3.8-.9a2.43 2.43 0 1 0 3.85 2.69Z"/><path fill="currentColor" d="M15.24 7.59A8.13 8.13 0 0 0 8 2.67a8.06 8.06 0 0 0-2.89.64l1.72 1.2A3.58 3.58 0 0 1 8 4.3a3.65 3.65 0 0 1 3.64 3.6l2.77 1.93a7.91 7.91 0 0 0 .81-1.42 1 1 0 0 0 .02-.82ZM.81 3.84 2.51 5A8.16 8.16 0 0 0 .76 7.59a1 1 0 0 0 0 .82A8.13 8.13 0 0 0 8 13.33a8 8 0 0 0 4.32-1.4l2 1.38.81-1.17-13.5-9.47ZM8 11.62A3.66 3.66 0 0 1 4.35 8a3.75 3.75 0 0 1 .29-1.42l5.85 4.11a3.65 3.65 0 0 1-2.49.93Z"/></svg>',
|
|
1074
|
-
'
|
|
1133
|
+
'fax': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6 14h7a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1V2H6v12Zm6-11H7v2h5V3Zm0 4H7v1h5V7ZM7 9h1v1H7V9Zm1 2H7v1h1v-1Zm1-2h1v1H9V9Zm1 2H9v1h1v-1Zm1-2h1v1h-1V9Zm1 2h-1v1h1v-1Z" clip-rule="evenodd"/><path fill="currentColor" d="M3 4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H3Z"/></svg>',
|
|
1134
|
+
'fax-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 3H7v2h5V3ZM6 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-1V2H6v1Zm6 3h1v7H6V6h6ZM3 5h2v8H3V5Zm9 2H7v1h5V7ZM7 9h1v1H7V9Zm1 2H7v1h1v-1Zm1-2h1v1H9V9Zm1 2H9v1h1v-1Zm1-2h1v1h-1V9Zm1 2h-1v1h1v-1Z" clip-rule="evenodd"/></svg>',
|
|
1135
|
+
'file': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M9 1v4h4v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5Z"/><path fill="currentColor" d="M10 1v3h3l-3-3Z"/></svg>',
|
|
1075
1136
|
'file-cog': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M9 10.1c0 .5-.5.9-1 .9-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1.1c0-.1 0-.1 0 0zm4.2-6.4L10.4.9c-.1-.1-.3-.2-.5-.2h-.1v3.7h3.5v-.2c0-.2-.1-.4-.1-.5zM9.6 5.3h3.8v9.4c0 .4-.3.6-.7.7H3.3c-.4 0-.7-.3-.7-.7V1.3c.1-.3.4-.6.7-.6h5.5v3.9c.1.3.4.6.8.7-.1-.1-.1-.1 0 0zM10 8l-.5.3c-.2-.2-.5-.3-.7-.4v-.6c0-.1 0-.1-.1-.1-.4-.1-.9-.1-1.3 0-.1 0-.1.1-.1.1v.6c-.3.1-.6.2-.8.4L6 8h-.2c-.3.3-.5.7-.6 1.1 0 .1 0 .1.1.2l.5.3c-.1.3-.1.6 0 .8l-.5.3c-.1 0-.1.1-.1.2.1.4.4.8.7 1.1h.2l.5-.3c.1.2.4.3.6.4v.6c0 .1 0 .1.1.1.4.1.9.1 1.3 0 .1 0 .1-.1.1-.1v-.5c.3-.1.6-.2.8-.4l.5.3h.2c.3-.3.5-.7.6-1.1 0-.1 0-.1-.1-.2l-.5-.3v-.8l.5-.3c.1 0 .1-.1.1-.2-.1-.4-.4-.8-.6-1.1-.1-.1-.1-.1-.2-.1z"/></svg>',
|
|
1076
1137
|
'file-download': '<svg aria-hidden="true" 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-.17a.69.69 0 0 0-.19-.49Z"/><path fill="currentColor" d="M13.31 14.65v-9.4H9.55a.67.67 0 0 1-.66-.68V.67H3.35a.67.67 0 0 0-.66.66v13.32a.67.67 0 0 0 .66.68h9.3a.67.67 0 0 0 .66-.66Zm-2.91-4.24-2.54 2.53a.18.18 0 0 1-.26 0l-2.54-2.53a.2.2 0 0 1-.06-.15.18.18 0 0 1 .19-.18h1.34a.2.2 0 0 0 .2-.2V7.27a.19.19 0 0 1 .19-.18h1.63a.18.18 0 0 1 .18.19v2.6a.2.2 0 0 0 .2.2h1.34a.16.16 0 0 1 .14.06.19.19 0 0 1-.01.27Z"/></svg>',
|
|
1077
1138
|
'file-excel': '<svg aria-hidden="true" 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-1V5H9Zm-.018 7h1.335L8.776 9.48l1.5-2.48H9.02l-.795 1.485a5.09 5.09 0 0 0-.157.436h-.014a2.59 2.59 0 0 0-.15-.422L7.19 7H5.82l1.457 2.5L5.683 12h1.342l.865-1.614c.06-.156.099-.272.115-.349h.014c.035.163.069.274.101.335L8.982 12Z"/><path fill="currentColor" d="M10 4V1l3 3h-3Z"/></svg>',
|
|
1078
1139
|
'file-excel-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8.982 12h1.335L8.776 9.48l1.5-2.48H9.02l-.795 1.485a5.09 5.09 0 0 0-.157.436h-.014a2.59 2.59 0 0 0-.15-.422L7.19 7H5.82l1.457 2.5L5.683 12h1.342l.865-1.614c.06-.156.099-.272.115-.349h.014c.035.163.069.274.101.335L8.982 12Z"/><path fill="currentColor" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4l-3-3H4Zm6 3V2.537L11.254 4H10Zm2 1v9H4V2h5v3h3Z"/></svg>',
|
|
1140
|
+
'file-outline': '<svg aria-hidden="true" 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-1h6Zm0 1.415V4h1.585L10 2.415ZM12 5H9V2H4v12h8V5Z" clip-rule="evenodd"/></svg>',
|
|
1079
1141
|
'file-pdf': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M6.464 11.274a3.81 3.81 0 0 0-.393.207c-.223.137-.37.27-.444.387-.072.11-.073.19-.03.273a.175.175 0 0 0 .019.034.223.223 0 0 0 .027-.01c.103-.042.268-.177.48-.433.12-.147.234-.3.34-.458Zm1.242-1.007c.252-.06.507-.108.764-.146a8.824 8.824 0 0 1-.386-.65 15.7 15.7 0 0 1-.378.796Zm1.873.363a2.916 2.916 0 0 0 .341.314c.164.123.28.165.344.168a.082.082 0 0 0 .053-.012.232.232 0 0 0 .07-.094.33.33 0 0 0 .045-.152.072.072 0 0 0-.02-.047c-.039-.047-.15-.116-.391-.159a2.926 2.926 0 0 0-.463-.04l.02.022ZM8.051 7.952c.064-.205.114-.414.151-.626a1.73 1.73 0 0 0 .029-.352.464.464 0 0 0-.024-.15.391.391 0 0 0-.11.03c-.066.027-.12.08-.148.215a.744.744 0 0 0-.01.057c-.018.142-.006.331.044.565.018.084.041.171.068.26Z"/><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-1h5ZM5.42 12.713a.613.613 0 0 1-.332-.318c-.147-.294-.098-.588.06-.834.15-.233.4-.43.68-.596a5.816 5.816 0 0 1 1.122-.489c.303-.544.571-1.107.804-1.686a5.554 5.554 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.358.21.447.458.874.742 1.277a4.457 4.457 0 0 1 1.01.038c.276.049.556.147.727.352a.64.64 0 0 1 .151.392.88.88 0 0 1-.104.426.788.788 0 0 1-.312.341.647.647 0 0 1-.342.078c-.25-.01-.495-.148-.706-.315a4.327 4.327 0 0 1-.69-.72 8.812 8.812 0 0 0-1.512.308 8.57 8.57 0 0 1-.773 1.143c-.22.265-.46.496-.701.596a.6.6 0 0 1-.44.022Z"/><path fill="currentColor" d="M10 1v3h3l-3-3Z"/></svg>',
|
|
1080
1142
|
'file-pdf-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M5.42 12.713a.613.613 0 0 1-.332-.318c-.147-.294-.098-.588.06-.834.15-.233.4-.43.68-.596a5.816 5.816 0 0 1 1.122-.489c.303-.544.571-1.107.804-1.686a5.503 5.503 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.358.21.447.458.874.742 1.277a4.354 4.354 0 0 1 1.01.038c.276.049.556.147.727.352a.64.64 0 0 1 .151.392.88.88 0 0 1-.104.426.788.788 0 0 1-.268.315.648.648 0 0 1-.386.104c-.25-.01-.495-.148-.706-.315a4.324 4.324 0 0 1-.69-.72 8.812 8.812 0 0 0-1.512.308 8.57 8.57 0 0 1-.773 1.143c-.22.265-.46.496-.701.596a.6.6 0 0 1-.44.022Zm1.044-1.44a3.81 3.81 0 0 0-.348.18c-.248.148-.41.29-.49.415-.07.11-.072.19-.03.273a.175.175 0 0 0 .02.034.223.223 0 0 0 .027-.01c.103-.042.268-.177.48-.433.12-.147.234-.3.34-.458Zm1.242-1.006c.252-.06.507-.108.764-.146a8.824 8.824 0 0 1-.386-.65 15.7 15.7 0 0 1-.378.796Zm2.18.65a2.971 2.971 0 0 1-.328-.309c.155.001.31.015.463.04.24.043.352.112.392.159a.07.07 0 0 1 .02.047.33.33 0 0 1-.045.152.232.232 0 0 1-.071.094.082.082 0 0 1-.053.012c-.07-.003-.196-.05-.377-.194Zm-1.684-3.59c-.037.21-.087.42-.15.625a3.355 3.355 0 0 1-.069-.26c-.057-.268-.065-.478-.034-.623.028-.134.082-.188.148-.214a.391.391 0 0 1 .11-.03.464.464 0 0 1 .024.15c.004.092-.005.209-.029.351Z"/><path fill="currentColor" d="M3 2a1 1 0 0 1 1-1h6l3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2Zm7 .537V4h1.254L10 2.537ZM12 14V5H9V2H4v12h8Z"/></svg>',
|
|
1081
1143
|
'file-text': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8.89 4.56V.67H3.35c-.36 0-.66.3-.66.66v13.32c0 .37.29.67.66.68h9.3c.36 0 .66-.3.66-.66V5.25H9.55c-.37 0-.67-.31-.66-.68Zm1.77 6.75c0 .19-.15.34-.34.35H5.68c-.19 0-.34-.16-.34-.35v-.23c0-.19.15-.34.34-.34h4.64c.19 0 .34.15.34.34v.23Zm0-1.83c0 .19-.15.34-.34.34H5.68c-.19 0-.34-.15-.34-.34v-.23c0-.19.15-.34.34-.34h4.64c.19 0 .34.15.34.34v.23Zm0-2.06v.23c0 .19-.15.34-.34.34H5.68c-.19 0-.34-.15-.34-.34v-.23c0-.19.15-.34.34-.35h4.64c.19 0 .34.16.34.35Zm2.65-3.27v.17H9.77V.67h.17c.18 0 .35.07.47.2l2.71 2.8c.13.13.19.31.19.49Z"/></svg>',
|
|
@@ -1085,18 +1147,27 @@ const icons = {
|
|
|
1085
1147
|
'file-word-outline': '<svg aria-hidden="true" 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.434L5.944 7H5Z"/><path fill="currentColor" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4l-3-3H4Zm6 3V2.537L11.254 4H10Zm2 1v9H4V2h5v3h3Z"/></svg>',
|
|
1086
1148
|
'filter': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13.74 1.66H2.26a.6.6 0 0 0-.59.6.59.59 0 0 0 .17.42l4.58 4.58v5.1a.58.58 0 0 0 .25.48l2 1.39a.6.6 0 0 0 .83-.15.59.59 0 0 0 .1-.34V7.26l4.58-4.58a.6.6 0 0 0 0-.84.64.64 0 0 0-.44-.18Z"/></svg>',
|
|
1087
1149
|
'floppy-disk': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m13.93 4.44-2.37-2.37c-.25-.25-.6-.4-.96-.4H3.03c-.75 0-1.36.61-1.36 1.36v9.94c0 .75.61 1.36 1.36 1.36h9.94c.75 0 1.36-.61 1.36-1.36V5.4c0-.36-.14-.7-.4-.96ZM8 12.52A1.81 1.81 0 1 1 8 8.9a1.81 1.81 0 0 1 0 3.62Zm2.71-5.77c0 .09-.04.18-.1.24a.35.35 0 0 1-.24.1H3.82c-.19 0-.34-.15-.34-.34V3.82c0-.19.15-.34.34-.34h6.55c.19 0 .34.15.34.34v2.93Z"/></svg>',
|
|
1088
|
-
'folder': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="
|
|
1150
|
+
'folder': '<svg aria-hidden="true" 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-1h4l1 1Z"/></svg>',
|
|
1151
|
+
'folder-check': '<svg aria-hidden="true" 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-1ZM5.705 8.185 7 9.48l3.295-3.295.705.705-4 4-2-2 .705-.705Z" clip-rule="evenodd"/></svg>',
|
|
1152
|
+
'folder-check-outline': '<svg aria-hidden="true" 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.001H7Zm-5 0h3.59l1 1.001H14v7.007H2V4.001Z" clip-rule="evenodd"/><path fill="currentColor" d="M7 9.48 5.705 8.185 5 8.89l2 2 4-4-.705-.705L7 9.48Z"/></svg>',
|
|
1089
1153
|
'folder-lines': '<svg aria-hidden="true" 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-1Zm-5 6H4V9h5v1Zm3-2H4V7h8v1Z"/></svg>',
|
|
1090
1154
|
'folder-lines-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12 8H4V7h8v1ZM9 9H4v1h5V9ZM5.59 4H2v8h12V5H6.59l-.29-.29L5.59 4M6 3l1 1h7c.55 0 1 .45 1 1v6.99c0 .55-.45 1-1 1H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h4Z"/></svg>',
|
|
1091
1155
|
'folder-link': '<svg aria-hidden="true" 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.34Zm-6.82 6.88H5.65c-1.34 0-2.42-1.08-2.42-2.42 0-1.34 1.08-2.42 2.42-2.42h.84c.14 0 .25.11.25.25 0 .06-.02.13-.06.17-.2.21-.36.45-.49.71-.04.07-.11.13-.19.14h-.33c-.62-.15-1.24.22-1.39.84-.15.62.22 1.24.84 1.39.15.04.31.04.47.02h1.58c.62 0 1.12-.48 1.15-1.1v-.22c-.02-.08 0-.16.06-.22.12-.13.29-.2.47-.2h.45c.12 0 .23.09.25.21.02.14.02.29 0 .43 0 1.32-1.05 2.39-2.37 2.42Zm3.17 0h-.84c-.06 0-.13-.02-.17-.07-.1-.1-.1-.25 0-.35.2-.21.36-.44.49-.7.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.41v.01c0 1.33-1.09 2.41-2.42 2.42Z"/></svg>',
|
|
1092
|
-
'folder-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="
|
|
1156
|
+
'folder-outline': '<svg aria-hidden="true" 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.001H7Zm-5 0h3.59l1 1.001H14v7.007H2V4.001Z" clip-rule="evenodd"/></svg>',
|
|
1093
1157
|
'folder-star': '<svg aria-hidden="true" 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.44Zm-.2 3.89L12 9.66l.69 2a.22.22 0 0 1-.08.27.26.26 0 0 1-.13.06.39.39 0 0 1-.15-.06l-1.77-1.26L8.75 12a.34.34 0 0 1-.15 0 .31.31 0 0 1-.13 0 .23.23 0 0 1-.08-.27l.69-2-1.81-1.35a.23.23 0 0 1-.1-.17.24.24 0 0 1 .24-.24h2.21l.67-2a.26.26 0 0 1 .15-.14.24.24 0 0 1 .31.14l.67 2h2.2a.26.26 0 0 1 .26.24.3.3 0 0 1-.08.12Z"/></svg>',
|
|
1158
|
+
'folders': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13 3H9L8 2H6c-.55 0-1 .45-1 1v2h.414l1 1H10a2 2 0 0 1 2 2v2h1c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1Z"/><path fill="currentColor" d="M11 8a1 1 0 0 0-1-1H6L5 6H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V8Z"/></svg>',
|
|
1159
|
+
'folders-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6 7 5 6H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V8c0-.55-.45-1-1-1H6ZM3 7h1.59l1 1H10v5.01H3V7Z" clip-rule="evenodd"/><path fill="currentColor" d="m8 2 1 1h4c.55 0 1 .45 1 1v5c0 .55-.45 1-1 1h-1v-.99h1V4H8.59l-1-1H6v2H5V3c0-.55.45-1 1-1h2Z"/></svg>',
|
|
1160
|
+
'gavel': '<svg aria-hidden="true" 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 1 0-.59-1.02l-3.31 1.91Zm3.631 7.01a.5.5 0 1 0 0 1h5a.5.5 0 0 0 0-1h-5Z"/></svg>',
|
|
1161
|
+
'gavel-outline': '<svg aria-hidden="true" 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.021l-3.31 1.91Zm1.594.44 1.3-.75 1.767 3.062-1.299.75L7.463 5.43Z" clip-rule="evenodd"/><path fill="currentColor" d="M9.5 12a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5Z"/></svg>',
|
|
1094
1162
|
'graduation-cap': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14.93 5.14 8.54 2.76c-.35-.13-.73-.13-1.08 0L1.07 5.14c-.31.13-.48.47-.39.8.04.22.19.39.39.47l1.12.42c-.26.38-.4.84-.41 1.3-.35.28-.47.75-.3 1.16.06.12.14.23.24.31l-.59 3.19c-.06.22.07.45.28.53h1.37c.22-.02.38-.22.36-.44v-.1L2.55 9.6c.32-.31.4-.79.2-1.18a.814.814 0 0 0-.24-.28c0-.38.18-.75.47-1l4.48 1.65c.35.13.73.13 1.08 0l6.39-2.38c.31-.13.48-.47.39-.8a.625.625 0 0 0-.39-.47Zm-6.18 4.5c-.48.18-1.02.18-1.5 0L3.93 8.4l-.33 3.15c0 1 2 1.78 4.4 1.78s4.4-.79 4.4-1.78l-.33-3.15-3.32 1.24Z"/></svg>',
|
|
1095
1163
|
'hand-up': '<svg aria-hidden="true" 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.54c-.34-.34-.88-.34-1.21 0s-.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-.75Z"/></svg>',
|
|
1096
1164
|
'history': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1.67a6.37 6.37 0 0 0-4.4 1.75l-.91-.91a.6.6 0 0 0-.85 0 .58.58 0 0 0-.18.43v3.43a.61.61 0 0 0 .58.63h3.44a.62.62 0 0 0 .62-.62.69.69 0 0 0-.18-.38L5.05 4.87a4.29 4.29 0 1 1 .1 6.36.3.3 0 0 0-.41 0l-1 1a.3.3 0 0 0 0 .42A6.33 6.33 0 1 0 8 1.67Z"/><path fill="currentColor" d="m9.85 9.3-.36.36a.3.3 0 0 1-.43 0L7.45 8V5.15a.3.3 0 0 1 .3-.3h.5a.3.3 0 0 1 .3.3v2.43l1.3 1.3a.31.31 0 0 1 0 .42Z"/></svg>',
|
|
1097
1165
|
'home': '<svg aria-hidden="true" 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-.83Z"/></svg>',
|
|
1098
1166
|
'home-outline': '<svg aria-hidden="true" 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-.83Zm-.56 7.5h-4v-1c0-.55-.45-1-1-1s-1 .45-1 1v1H3V6.33L8 3l5 3.33V13Z"/></svg>',
|
|
1099
|
-
'info-circle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="
|
|
1167
|
+
'info-circle': '<svg aria-hidden="true" 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 0Zm-7.75 4V7h1.5v5h-1.5Zm0-8v1.5h1.5V4h-1.5Z" clip-rule="evenodd"/></svg>',
|
|
1168
|
+
'info-circle-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M7.25 12V7h1.5v5h-1.5Zm0-8v1.5h1.5V4h-1.5Z"/><path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm6-7A6 6 0 1 0 2 8a6 6 0 0 0 12 0Z" clip-rule="evenodd"/></svg>',
|
|
1169
|
+
'interrogation-circle': '<svg aria-hidden="true" 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 0Zm-6.974-.5a1 1 0 1 0-.942-1.335l-1.43-.458A2.501 2.501 0 1 1 8.79 9.04v.607h-1.5v-2h.776Zm-.026 3a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" clip-rule="evenodd"/></svg>',
|
|
1170
|
+
'interrogation-circle-outline': '<svg aria-hidden="true" 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.607h-1.5v-2h.776Zm-.776 3.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"/><path fill="currentColor" fill-rule="evenodd" d="M14.797 8.146a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1 0a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z" clip-rule="evenodd"/></svg>',
|
|
1100
1171
|
'key': '<svg aria-hidden="true" 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.67H8.44ZM4.67 9.33c-.73 0-1.33-.6-1.33-1.33s.6-1.33 1.33-1.33C5.4 6.67 6 7.27 6 8c0 .73-.58 1.32-1.31 1.33h-.02Z"/></svg>',
|
|
1101
1172
|
'laptop': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.89 12.08c.68-.02 1.23-.58 1.22-1.26v-6.9c0-.68-.54-1.24-1.22-1.25H3.11c-.68.01-1.23.57-1.22 1.25v6.9c-.01.68.53 1.25 1.22 1.26H.67c-.01.68.53 1.24 1.21 1.25h12.23c.68 0 1.23-.56 1.22-1.24h-2.44ZM3.11 3.92h9.78v6.9H3.11v-6.9ZM8 12.71c-.34 0-.62-.29-.61-.63 0-.34.27-.61.61-.61.34 0 .61.27.61.61 0 .34-.27.63-.61.63Z"/></svg>',
|
|
1102
1173
|
'life-ring': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Zm5.14 3.53-1.88 1.88a3.91 3.91 0 0 0-1.34-1.34l1.88-1.88a6.55 6.55 0 0 1 1.34 1.34ZM8 10.84A2.84 2.84 0 1 1 10.84 8 2.84 2.84 0 0 1 8 10.84Zm-3.8-8 1.88 1.9a3.91 3.91 0 0 0-1.34 1.34L2.86 4.2A6.55 6.55 0 0 1 4.2 2.86ZM2.86 11.8l1.88-1.88a3.91 3.91 0 0 0 1.34 1.34L4.2 13.14a6.55 6.55 0 0 1-1.34-1.34Zm8.94 1.34-1.88-1.88a3.91 3.91 0 0 0 1.34-1.34l1.88 1.88a6.55 6.55 0 0 1-1.34 1.34Z"/></svg>',
|
|
@@ -1108,17 +1179,21 @@ const icons = {
|
|
|
1108
1179
|
'lock': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12 5.56h-.67v-1.4C11.37 2.28 9.88.71 8 .67 6.12.71 4.63 2.28 4.67 4.16v1.4H4c-.75.02-1.35.64-1.33 1.39V14c.02.73.6 1.31 1.33 1.33h8c.75-.02 1.35-.64 1.33-1.39V7a1.37 1.37 0 0 0-1.28-1.44H12Zm-4 6.28c-.77.04-1.43-.56-1.47-1.33-.04-.77.56-1.43 1.33-1.47.77-.04 1.43.56 1.47 1.33v.07c.02.75-.57 1.38-1.32 1.4H8Zm2.07-6.28H5.93v-1.4A2.12 2.12 0 0 1 8 2c1.17.03 2.1 1 2.07 2.17v1.39Z"/></svg>',
|
|
1109
1180
|
'log-in': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m10.97 7.78-4-4a.29.29 0 0 0-.42 0c-.07.06-.12.15-.13.24v2.07c0 .17-.13.3-.3.32H1.97c-.16 0-.29.12-.3.28v2.58c0 .16.12.29.28.3h4.16c.17 0 .3.14.3.31v2.14c0 .16.12.29.28.3.11.01.21-.03.28-.11l4-4c.11-.12.11-.3 0-.42Zm3.37 5.26v1c0 .16-.13.28-.28.28H9.29a.28.28 0 0 1-.28-.28v-1c0-.16.13-.28.28-.28h3.43V3.3H9.3a.29.29 0 0 1-.29-.29V1.97c0-.16.13-.29.29-.29h4.76c.16 0 .29.13.29.29v11.07Z"/></svg>',
|
|
1110
1181
|
'log-out': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m14.25 7.77-4-4a.31.31 0 0 0-.43 0A.34.34 0 0 0 9.7 4v2.07a.32.32 0 0 1-.3.32H5.23a.3.3 0 0 0-.3.3v2.56a.3.3 0 0 0 .3.3H9.4a.31.31 0 0 1 .3.31V12a.3.3 0 0 0 .3.3.33.33 0 0 0 .23-.09l4-4a.29.29 0 0 0 .02-.44Z"/><path fill="currentColor" d="M6.71 12.72H3.27V3.26h3.42A.31.31 0 0 0 7 3V2a.3.3 0 0 0-.31-.3H2a.29.29 0 0 0-.33.3v12a.27.27 0 0 0 .1.24.32.32 0 0 0 .14.08h4.8A.3.3 0 0 0 7 14v-1a.3.3 0 0 0-.29-.28Z"/></svg>',
|
|
1111
|
-
'magnifying-glass': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="
|
|
1112
|
-
'mail': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="
|
|
1182
|
+
'magnifying-glass': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7a5 5 0 1 1 8.871 3.164L14 13.292l-.707.707-3.128-3.128A5 5 0 0 1 2 7Zm5 4a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z" clip-rule="evenodd"/></svg>',
|
|
1183
|
+
'mail': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M1.007 4.003v8.01a1 1 0 0 0 1 1h11.997a1 1 0 0 0 1-1V4l-7 5-6.997-4.997Z"/><path fill="currentColor" d="m1.52 3.14 6.484 4.63 6.485-4.632a.996.996 0 0 0-.486-.126H2.008a.996.996 0 0 0-.487.127Z"/></svg>',
|
|
1184
|
+
'mail-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 3.999V12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3.999A.999.999 0 0 0 14.001 3H2a.999.999 0 0 0-1 .999Zm13 .713-6 4.28-6-4.28V12h12V4.712ZM2.724 4 8 7.764 13.276 4H2.724Z" clip-rule="evenodd"/></svg>',
|
|
1185
|
+
'messages-square': '<svg aria-hidden="true" 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 1h-1Zm1-6H5v1h6a1 1 0 0 1 1 1v3h1V4Zm-3 3H4v1h6V7ZM4 9h3v1H4V9Z" clip-rule="evenodd"/></svg>',
|
|
1186
|
+
'messages-square-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M4 7h6v1H4V7Zm0 2h3v1H4V9Z"/><path fill="currentColor" fill-rule="evenodd" d="M12 11.017V10h1a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v1H3a1 1 0 0 0-1 1v5.022a1 1 0 0 0 1 1h1V14l4-2 2.994.017a1 1 0 0 0 1.006-1ZM5 4h8v5h-1V6a1 1 0 0 0-1-1H5V4Zm0 8.382 2.767-1.383 3.233.018V6H3v5.022h2v1.36Z" clip-rule="evenodd"/></svg>',
|
|
1113
1187
|
'notes': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.6 2.76v-.43c0-.75-.53-1.28-1.28-1.28H2.33c-.75 0-1.28.53-1.28 1.28v8.99c0 .75.53 1.28 1.28 1.28h.39V4.05c0-.75.53-1.28 1.28-1.28h8.6Z"/><path fill="currentColor" d="M13.67 3.4H4.68c-.75 0-1.28.53-1.28 1.28v8.99c0 .75.53 1.28 1.28 1.28h6.42V11.1h3.85V4.68c0-.75-.53-1.28-1.28-1.28Zm-4.49 7.06H5.97V9.18h3.21v1.28Zm3.21-2.57H5.97V6.61h6.42v1.28Z"/><path fill="currentColor" d="m11.74 14.42 2.68-2.68h-2.68v2.68z"/></svg>',
|
|
1114
1188
|
'notes-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13.11 4.74v5.38h-3v3H4.73V4.74h8.38m0-1.2H4.73a1.2 1.2 0 0 0-1.2 1.2v8.38a1.2 1.2 0 0 0 1.2 1.19h6l3.59-3.59v-6a1.2 1.2 0 0 0-1.21-1.18Zm-4.19 6.58h-3V8.93h3Zm3-2.39h-6v-1.2h6ZM3.8 11.19h-1V2.81h8.38v1h1.2v-1a1.2 1.2 0 0 0-1.2-1.2H2.81a1.2 1.2 0 0 0-1.2 1.2v8.38a1.2 1.2 0 0 0 1.2 1.2h1Z"/></svg>',
|
|
1115
1189
|
'paper-plane': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14 1.69 1.84 7a.28.28 0 0 0-.15.36.29.29 0 0 0 .16.15l3.27 1.82a.57.57 0 0 0 .61-.06l6.45-5.57c.05 0 .15-.1.19-.06s0 .14-.06.18l-5.59 6.29a.52.52 0 0 0 0 .63l2.09 3.44a.28.28 0 0 0 .37.12.3.3 0 0 0 .13-.12l5-12.11a.3.3 0 0 0-.14-.37.28.28 0 0 0-.17-.01Z"/></svg>',
|
|
1116
1190
|
'paper-plane-slash': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m2.67 1.69 11.59 11.59-1 1-2.79-2.8-1.1 2.67a.3.3 0 0 1-.13.12.28.28 0 0 1-.37-.12l-2.12-3.41a.52.52 0 0 1 0-.63L7.82 8.9l-.76-.76-1.3 1.13a.57.57 0 0 1-.61.06L1.88 7.51a.29.29 0 0 1-.16-.15.28.28 0 0 1 .15-.36l2.81-1.24-3-3Zm11.53 0a.28.28 0 0 0-.22 0L7.53 4.51l1.73 1.73 3-2.54s.15-.1.19-.06 0 .14-.06.18L9.75 6.73l1.88 1.88 2.71-6.54a.3.3 0 0 0-.14-.37Z"/></svg>',
|
|
1117
|
-
'pen': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="
|
|
1191
|
+
'pen': '<svg aria-hidden="true" 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.414l-1.414-1.414ZM8.756 4.417l2.829 2.829-6.757 6.756L2.003 14 2 11.174l6.756-6.757Z"/></svg>',
|
|
1118
1192
|
'pen-circle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 .44C3.82.44.44 3.82.44 8S3.83 15.56 8 15.56s7.56-3.39 7.56-7.56C15.56 3.82 12.18.44 8 .44M5.47 12.19H3.62v-1.85l5.46-5.45 1.85 1.86-5.45 5.45Zm6.88-6.89-.9.9-1.86-1.85.9-.9c.19-.19.51-.19.7 0l1.16 1.15c.19.19.19.51 0 .7"/></svg>',
|
|
1119
1193
|
'pen-fancy': '<svg aria-hidden="true" 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.83l-2.07.82Zm7.17-6.3L6.27 7.28 8.69 9.7l4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83Z"/></svg>',
|
|
1120
1194
|
'pen-fancy-files-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" 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.298 2.298 0 0 0-.974.66L12 2.8V2Zm1 4.643-1 .913-.566.515-1.528-1.524L12 4.275l.767-.832c.075-.085.153-.156.233-.215 1.167-.857 2.796.9 1.555 1.997L13 6.643ZM4 3H3v11.5a.5.5 0 0 0 .5.5H11v-1H4V3Zm4.238 4.41a.466.466 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.466.466 0 0 0 .317-.314l.518-1.31-1.573-1.562-1.308.516Z"/></svg>',
|
|
1121
1195
|
'pen-fancy-outline': '<svg aria-hidden="true" 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.53ZM8.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>',
|
|
1196
|
+
'pen-outline': '<svg aria-hidden="true" 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.414l-1.414-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.174l.003 2.825ZM3 11.587l5.756-5.755 1.414 1.414-5.755 5.756L3.002 13 3 11.587Z" clip-rule="evenodd"/></svg>',
|
|
1122
1197
|
'phone': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13.97 10.62 11.2 9.43a.6.6 0 0 0-.69.17l-1.23 1.5A9.137 9.137 0 0 1 4.9 6.72l1.5-1.23c.21-.17.28-.45.17-.69L5.38 2.03a.589.589 0 0 0-.68-.34l-2.57.59a.59.59 0 0 0-.46.58c0 6.34 5.14 11.48 11.48 11.48.28 0 .52-.19.58-.46l.59-2.57a.595.595 0 0 0-.35-.68Z"/></svg>',
|
|
1123
1198
|
'picture': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14.33 12.93V3.07a1.4 1.4 0 0 0-1.4-1.4H3.07a1.4 1.4 0 0 0-1.4 1.4v9.86a1.4 1.4 0 0 0 1.4 1.4h9.86a1.4 1.4 0 0 0 1.4-1.4ZM5.54 9.06l1.76 2.11L9.76 8l3.17 4.22H3.07Z"/></svg>',
|
|
1124
1199
|
'play-circle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Zm3.42 8-5.2 3a.72.72 0 0 1-1-.28.73.73 0 0 1-.09-.35V4.92a.71.71 0 0 1 .71-.71 1.06 1.06 0 0 1 .35.09l5.2 3.17a.71.71 0 0 1 .27 1 .64.64 0 0 1-.24.24Z"/></svg>',
|
|
@@ -1129,26 +1204,32 @@ const icons = {
|
|
|
1129
1204
|
'shuffle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M15.13 10.45a.51.51 0 0 1 0 .81l-2.29 1.91c-.29.24-.71.24-1 0-.12-.1-.2-.24-.2-.4v-.95H10c-.09 0-.18-.03-.25-.09l-2-1.8 1.49-1.37 1.51 1.35h.92V9c.04-.35.34-.6.69-.57.18 0 .35.06.48.17l2.29 1.9v-.05ZM1 6.09h2.42l1.51 1.35 1.53-1.36-2-1.8a.41.41 0 0 0-.26-.09H1a.328.328 0 0 0-.34.29v1.33c.02.17.17.3.34.28Zm10.66 0v1c.04.35.34.6.69.57.18 0 .35-.06.48-.17l2.29-1.9a.51.51 0 0 0 0-.81l-2.28-1.95a.81.81 0 0 0-1 0c-.12.1-.2.25-.2.41v1H10c-.09 0-.18.03-.25.09L3.42 9.91H1a.313.313 0 0 0-.34.28v1.33c.02.17.17.3.34.29h3.18c.09 0 .19-.03.26-.09l6.31-5.62h.91Z"/></svg>',
|
|
1130
1205
|
'sitemap': '<svg aria-hidden="true" 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-.67Zm-.5-1.67H7.5v1h1v-1h4.67v1h1v-1.2c0-.44-.36-.8-.8-.8H8.5V6h.83c.37 0 .67-.3.67-.67v-2c0-.37-.3-.66-.67-.66H6.67c-.37 0-.66.29-.67.66v2c0 .37.3.67.67.67h.83v1.33H2.63c-.44 0-.8.36-.8.8v1.2h1v-1ZM9 10H7c-.37 0-.67.3-.67.67v2c0 .37.3.66.67.66h2c.37 0 .66-.29.67-.66v-2c0-.37-.3-.67-.67-.67Zm5.67 0h-2c-.37 0-.67.3-.67.67v2c0 .37.3.66.67.66h2c.36 0 .65-.3.66-.66v-2c0-.37-.29-.66-.66-.67Z"/></svg>',
|
|
1131
1206
|
'squares': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M2.27 1.67h4.47c.33 0 .6.27.6.6v4.47c0 .33-.27.6-.6.6H2.27c-.33 0-.6-.27-.6-.6V2.27c0-.33.27-.6.6-.6Zm7 0h4.47c.33 0 .6.27.6.6v4.47c0 .33-.27.6-.6.6H9.27c-.33 0-.6-.27-.6-.6V2.27c0-.33.27-.6.6-.6Zm0 7h4.47c.33 0 .6.27.6.6v4.47c0 .33-.27.6-.6.6H9.27c-.33 0-.6-.27-.6-.6V9.27c0-.33.27-.6.6-.6Zm-7 0h4.47c.33 0 .6.27.6.6v4.47c0 .33-.27.6-.6.6H2.27c-.33 0-.6-.27-.6-.6V9.27c0-.33.27-.6.6-.6Z"/></svg>',
|
|
1132
|
-
'table': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="
|
|
1207
|
+
'table': '<svg aria-hidden="true" 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 1v10Zm1-3v3h3v-3H3Zm4 0v3h6v-3H7Zm6-1H7V6h6v3ZM6 9H3V6h3v3ZM3 5V3h10v2H3Z" clip-rule="evenodd"/></svg>',
|
|
1133
1208
|
'tag': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M1.67 7.9V2.85a1.18 1.18 0 0 1 1.18-1.18H7.9a1.18 1.18 0 0 1 .84.33L14 7.26a1.2 1.2 0 0 1 0 1.68L8.94 14a1.2 1.2 0 0 1-1.68 0L2 8.74a1.18 1.18 0 0 1-.33-.84Zm2.77-4.65a1.19 1.19 0 1 0 1.18 1.19 1.19 1.19 0 0 0-1.18-1.19Z"/></svg>',
|
|
1134
1209
|
'tags': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.08 7.37 7.22 3a1.12 1.12 0 0 0-.78-.29H1.77a1 1 0 0 0-1.1 1v4.21a1 1 0 0 0 .33.71L5.85 13a1.17 1.17 0 0 0 1.55 0l4.68-4.25a.94.94 0 0 0 0-1.38ZM3.23 6.13A1.13 1.13 0 1 1 4.36 5a1.13 1.13 0 0 1-1.13 1.13Z"/><path fill="currentColor" d="M15 7.37 10.15 3a1.12 1.12 0 0 0-.77-.29H8.26l4.5 4.09a1.76 1.76 0 0 1 0 2.65L8.77 13a1.17 1.17 0 0 0 1.55 0L15 8.79a.94.94 0 0 0 0-1.42Z"/></svg>',
|
|
1135
|
-
'thumb-up': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="
|
|
1210
|
+
'thumb-up': '<svg aria-hidden="true" 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.772l.78-1.934ZM4.5 6.003H2v8h2.5v-8Z"/></svg>',
|
|
1211
|
+
'thumb-up-outline': '<svg aria-hidden="true" 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.65Zm.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.045-.943 3.39ZM3 7h2v6H3V7Z" clip-rule="evenodd"/></svg>',
|
|
1136
1212
|
'thumbtack': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" 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.09 8.91 2Z"/></svg>',
|
|
1137
1213
|
'thumbtack-outline': '<svg aria-hidden="true" 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.09 5.273 10Zm3.241-3.563-4.18 1.17 4.059 4.059 1.17-4.18 2.533-.845-2.737-2.737-.845 2.533Z"/></svg>',
|
|
1138
|
-
'trash': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="
|
|
1214
|
+
'trash': '<svg aria-hidden="true" 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 1ZM6 3V2h4v1H6Zm1 3H6v6h1V6Zm2 0h1v6H9V6Z" clip-rule="evenodd"/></svg>',
|
|
1215
|
+
'trash-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M7 6H6v6h1V6Zm2 0h1v6H9V6Z"/><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-1V4h1V3h-3ZM6 2v1h4V2H6Zm6 2v10H4V4h8Z" clip-rule="evenodd"/></svg>',
|
|
1139
1216
|
'universal-access': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 15.33A7.33 7.33 0 1 1 15.33 8 7.34 7.34 0 0 1 8 15.33ZM8 1.71A6.29 6.29 0 1 0 14.29 8 6.29 6.29 0 0 0 8 1.71ZM13.74 8A5.74 5.74 0 1 1 8 2.25 5.75 5.75 0 0 1 13.74 8ZM8 3.77a1.07 1.07 0 1 0 1.07 1.07A1.07 1.07 0 0 0 8 3.77ZM4.67 5.63c-.6-.14-.87.86-.32 1s1.79.43 2.57.55a11.25 11.25 0 0 1-.72 4.47.54.54 0 0 0 .85.65 6.94 6.94 0 0 0 .78-2.42c0-.07.31-.11.33 0a8.73 8.73 0 0 0 .63 2.23c.3.65 1.31.26 1-.38a11.54 11.54 0 0 1-.76-4.58 21.34 21.34 0 0 0 2.41-.45.55.55 0 1 0-.2-1.08 11.47 11.47 0 0 1-6.57.01Z"/></svg>',
|
|
1140
1217
|
'unlink': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M9.74 6.25c-.16-.17-.32-.3-.5-.43-.14-.09-.31-.1-.44 0l1.81 1.81c-.17-.5-.47-.98-.87-1.38Zm-1.1 3.51c-.07.15-.17.28-.29.4l-1.66 1.66s-.04.05-.07.07c-.72.67-1.85.63-2.52-.09-.67-.72-.63-1.85.09-2.52l.32-.32c.1-.11.14-.27.09-.41-.14-.42-.22-.86-.24-1.3a.42.42 0 0 0-.12-.26.395.395 0 0 0-.56 0l-.92.92a3.76 3.76 0 0 0 0 5.32 3.76 3.76 0 0 0 5.32 0l1.66-1.67c.12-.12.23-.25.32-.38L8.64 9.76Zm4.61-7h-.02a3.778 3.778 0 0 0-5.32 0L6.83 3.84l1.41 1.41 1.08-1.08c.68-.71 1.81-.74 2.52-.06.71.68.74 1.81.06 2.52-.02.03-.05.05-.07.07l-.32.32c-.11.11-.14.27-.09.41.13.4.21.81.23 1.23l.44.44c.09 0 .18-.05.24-.11l.92-.92a3.76 3.76 0 0 0 0-5.32Zm.97 10.52-1.03 1.03-5.14-5.14c-.04.17-.12.33-.25.45l-.52.52c-.14.13-.35.15-.51.04-.18-.13-.35-.27-.5-.42-.74-.74-1.11-1.7-1.11-2.67 0-.24.02-.49.08-.73l-3.6-3.6 1.03-1.03 11.55 11.55Z"/></svg>',
|
|
1141
1218
|
'unlock': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13.33 13.94V7a1.37 1.37 0 0 0-1.28-1.44h-.72v-1.4A3.422 3.422 0 0 0 8 .67 3.4 3.4 0 0 0 4.68 4h1.26C6 2.9 6.9 2.03 8 2c1.17.03 2.1 1 2.07 2.17v1.39H4c-.75.02-1.35.64-1.33 1.39V14c.02.73.6 1.31 1.33 1.33h8c.75-.02 1.35-.64 1.33-1.39ZM8 11.84c-.77.04-1.43-.56-1.47-1.33-.04-.77.56-1.43 1.33-1.47.77-.04 1.43.56 1.47 1.33v.07c.02.75-.57 1.38-1.32 1.4H8Z"/></svg>',
|
|
1142
1219
|
'upload': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M9.58 10.74V6.59a.31.31 0 0 1 .31-.3H12a.3.3 0 0 0 .21-.52l-4-4a.29.29 0 0 0-.42 0l-4 4a.3.3 0 0 0 .21.52h2.11a.31.31 0 0 1 .31.3v4.15a.3.3 0 0 0 .3.3h2.56a.3.3 0 0 0 .3-.3ZM14.33 14v-1a.29.29 0 0 0-.29-.3H2a.29.29 0 0 0-.29.3v1a.29.29 0 0 0 .29.29h12a.29.29 0 0 0 .33-.29Z"/></svg>',
|
|
1143
|
-
'user': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8
|
|
1220
|
+
'user': '<svg aria-hidden="true" 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 6ZM6 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-4H6Z" clip-rule="evenodd"/></svg>',
|
|
1144
1221
|
'user-circle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 .62C3.95.61.66 3.9.65 7.95c0 4.05 3.28 7.34 7.33 7.35 4.04 0 7.33-3.26 7.35-7.3.02-4.05-3.25-7.36-7.3-7.38H8Zm0 .75c3.64 0 6.59 2.96 6.58 6.6V8c0 1.35-.41 2.66-1.19 3.76a2.713 2.713 0 0 0-2.66-2.37H9.54c-.98.46-2.1.46-3.08 0H5.28c-1.36 0-2.5 1.02-2.67 2.37A6.483 6.483 0 0 1 1.42 8a6.59 6.59 0 0 1 6.55-6.63H8ZM5 5.63c0-1.68 1.37-3.05 3.05-3.05 1.68 0 3.05 1.37 3.05 3.05 0 1.68-1.37 3.05-3.05 3.05H8c-1.66-.03-3-1.39-3-3.05Z"/></svg>',
|
|
1145
1222
|
'user-group': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13.15 4.12c-.81-.01-1.47.65-1.48 1.46 0 .82.65 1.47 1.46 1.48s1.47-.65 1.48-1.46-.65-1.47-1.46-1.48Zm-10.04.01a1.47 1.47 0 0 0-1.58 1.59c.06.71.62 1.28 1.34 1.34.81.07 1.52-.53 1.59-1.34.06-.81-.54-1.52-1.35-1.59Zm7.36.39c-.22-.84-.87-1.51-1.71-1.75-1.36-.41-2.8.36-3.22 1.72-.18.61-.13 1.27.14 1.85.41.9 1.33 1.48 2.32 1.45 1.41.01 2.56-1.14 2.57-2.55 0-.24-.03-.49-.1-.72Zm-.71 4h-.19c-.99.49-2.14.49-3.13 0h-.19c-1.46 0-2.64 1.18-2.64 2.64v2.69c1.23.93 2.74 1.47 4.39 1.47s3.17-.55 4.4-1.48v-2.68c0-1.46-1.18-2.64-2.64-2.64Zm5.52.25a7.282 7.282 0 0 1-1.65 3.91c-.08.1-.16.19-.25.28-.08.09-.17.18-.25.27v-.55h.03v-.72s.01-.07 0-.1v-.66c.01-1.25-.66-2.4-1.76-3 .27-.26.63-.41 1-.41h1.51c.63.01 1.17.41 1.37.98ZM2.86 11.16v1.52h.01v.55l-.28-.31c-.08-.08-.15-.16-.22-.24A7.238 7.238 0 0 1 .74 8.86c.16-.62.72-1.07 1.4-1.07h1.47c.37-.01.73.12 1.01.37-1.1.6-1.77 1.75-1.76 3Z"/></svg>',
|
|
1223
|
+
'user-lock': '<svg aria-hidden="true" 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 5ZM5 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.553A3.982 3.982 0 0 0 9 8H5Z"/><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-.5Zm2.75-.5v.5h-1.5v-.5a.75.75 0 0 1 1.5 0Z" clip-rule="evenodd"/></svg>',
|
|
1224
|
+
'user-outline': '<svg aria-hidden="true" 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 0Zm1 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-8 8a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3H3Zm-1 0a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4 1 1 0 0 1-1 1H3a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>',
|
|
1146
1225
|
'user-pen-fancy-outline': '<svg aria-hidden="true" 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 5Zm0-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 3Zm3.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.56.56 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-.52 1.57 1.57Zm3.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.78ZM9 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.12-.13.71-.77C9.6 8.03 9.3 8 9 8Z"/></svg>',
|
|
1147
1226
|
'user-plus': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14 3.33h-1.35V2a.36.36 0 0 0-.35-.33h-.65a.36.36 0 0 0-.35.33v1.33H10a.34.34 0 0 0-.33.34v.66a.34.34 0 0 0 .33.34h1.3V6a.37.37 0 0 0 .35.33h.65a.37.37 0 0 0 .35-.33V4.67H14a.34.34 0 0 0 .32-.34v-.66a.34.34 0 0 0-.32-.34ZM9.28 9.77h-.2a5.19 5.19 0 0 1-3.91 0H5a3 3 0 0 0-3.3 2.69v.72A1.27 1.27 0 0 0 3 14.33h8.25a1.26 1.26 0 0 0 1.36-1.14v-.68a3 3 0 0 0-3.24-2.75h-.09ZM7.13 3.7A2.64 2.64 0 1 1 4.5 6.34 2.64 2.64 0 0 1 7.13 3.7Z"/></svg>',
|
|
1148
1227
|
'user-question-outline': '<svg aria-hidden="true" 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.03ZM2.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.22Zm2.83 4H2.41v-.42c0-.89.72-1.62 1.62-1.62s1.62.72 1.62 1.62v.42h-.01Zm7.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.56Zm.82 6.33c0 .45-.37.82-.82.82H8.4a.41.41 0 0 0-.22.07l-1 .75V3.22c0-.45.37-.82.82-.82h4.77c.45 0 .82.37.82.82v4.77Zm-2.8-.42c0 .23-.18.41-.41.41s-.41-.18-.41-.41.18-.41.41-.41c.23 0 .41.18.41.41Zm-.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-.68.38 0 .68.31.68.69 0 .38-.31.68-.68.68-.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>',
|
|
1149
1228
|
'user-shield-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 8.92c-1.5 0-2.72-1.22-2.72-2.72S6.5 3.48 8 3.48s2.72 1.22 2.72 2.72S9.5 8.92 8 8.92Zm0-4.64a1.92 1.92 0 1 0 .001 3.841A1.92 1.92 0 0 0 8 4.28Zm4.97-1.84L8.56.78C8.2.65 7.81.65 7.45.78L3.03 2.43C2.41 2.66 2 3.26 2 3.92V8c0 3.82 4.23 6.47 5.52 7.2.15.08.31.13.48.13s.33-.04.48-.13C9.78 14.48 14 11.82 14 8V3.92c0-.66-.41-1.25-1.03-1.48ZM8.08 14.5c-.05.03-.12.03-.17 0-.49-.28-2.12-1.24-3.4-2.68.62-.82 1.94-1.39 3.47-1.39s2.84.61 3.49 1.4c-1.29 1.43-2.9 2.39-3.39 2.67ZM13.19 8c0 1.2-.51 2.28-1.22 3.22-.83-.91-2.34-1.59-4-1.59s-3.16.64-3.98 1.58c-.7-.93-1.2-2.01-1.2-3.2V3.93c0-.33.21-.62.51-.74l4.43-1.66c.09-.03.18-.05.27-.05s.19.02.27.05l4.42 1.66c.3.11.51.41.51.73V8Z"/></svg>',
|
|
1150
|
-
'users': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="
|
|
1151
|
-
'
|
|
1229
|
+
'users': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M7.25 3.335a2.5 2.5 0 1 0 0 4.33A3.485 3.485 0 0 1 6.5 5.5c0-.818.28-1.57.75-2.165ZM10 3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm-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-.8ZM5.48 9H4.2A3.2 3.2 0 0 0 1 12.2a.8.8 0 0 0 .8.8h2.387A1.793 1.793 0 0 1 4 12.2 4.19 4.19 0 0 1 5.48 9Z"/></svg>',
|
|
1230
|
+
'users-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM8.5 5.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0Z" clip-rule="evenodd"/><path fill="currentColor" d="M5.48 9H4.2A3.2 3.2 0 0 0 1 12.2a.8.8 0 0 0 .8.8h2.387A1.793 1.793 0 0 1 4 12.2c0-.067.002-.134.005-.2H2.009A2.2 2.2 0 0 1 4.2 10h.422c.232-.377.522-.714.858-1Z"/><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-.8Zm6.8-2.2a2.2 2.2 0 0 1 2.191 2H6.009A2.2 2.2 0 0 1 8.2 10h3.6Z" clip-rule="evenodd"/><path fill="currentColor" d="M7.25 3.335a2.5 2.5 0 1 0 0 4.33 3.496 3.496 0 0 1-.5-.865 1.5 1.5 0 1 1 0-2.6c.125-.313.294-.604.5-.865Z"/></svg>',
|
|
1231
|
+
'wallet': '<svg aria-hidden="true" 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-1V4Zm1 0h11v1H2V4Zm9 5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z" clip-rule="evenodd"/></svg>',
|
|
1232
|
+
'wallet-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"/><path fill="currentColor" fill-rule="evenodd" d="M1 12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8Zm12-8H2v1h11V4ZM2 6h12v6H2V6Z" clip-rule="evenodd"/></svg>'
|
|
1152
1233
|
};
|
|
1153
1234
|
|
|
1154
1235
|
const mgIconCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}:host{display:inline-flex;vertical-align:middle}.mg-icon{color:currentColor}.mg-icon[size=small],.mg-icon.mg-icon--size-small{width:var(--mg-icon-small-size);height:var(--mg-icon-small-size)}.mg-icon[size=small][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon),.mg-icon.mg-icon--size-small[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon){padding:calc(var(--mg-icon-small-size) / 2)}.mg-icon[size=regular],.mg-icon.mg-icon--size-regular{width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size)}.mg-icon[size=regular][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon),.mg-icon.mg-icon--size-regular[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon){padding:calc(var(--mg-icon-regular-size) / 2)}.mg-icon[size=medium],.mg-icon.mg-icon--size-medium{width:var(--mg-icon-medium-size);height:var(--mg-icon-medium-size)}.mg-icon[size=medium][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon),.mg-icon.mg-icon--size-medium[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon){padding:calc(var(--mg-icon-medium-size) / 2)}.mg-icon[size=large],.mg-icon.mg-icon--size-large{width:var(--mg-icon-large-size);height:var(--mg-icon-large-size)}.mg-icon[size=large][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon),.mg-icon.mg-icon--size-large[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon){padding:calc(var(--mg-icon-large-size) / 2)}.mg-icon[size=extra-large],.mg-icon.mg-icon--size-extra-large{width:var(--mg-icon-extra-large-size);height:var(--mg-icon-extra-large-size)}.mg-icon[size=extra-large][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon),.mg-icon.mg-icon--size-extra-large[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon){padding:calc(var(--mg-icon-extra-large-size) / 2)}.mg-icon.mg-icon--variant-success.mg-icon--variant-style-icon{color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-icon{color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-icon{color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-icon.mg-icon--variant-info.mg-icon--variant-style-icon{color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-icon.mg-icon--variant-app.mg-icon--variant-style-icon{color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-icon.mg-icon--variant-success.mg-icon--variant-style-background{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-background{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-background{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-info.mg-icon--variant-style-background{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-app.mg-icon--variant-style-background{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-success.mg-icon--variant-style-full{color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-full{color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-full{color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-info.mg-icon--variant-style-full{color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-app.mg-icon--variant-style-full{color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l));background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-icon[class*=mg-icon--variant-]{border-radius:var(--mg-icon-border-radius)}.mg-icon--spin{animation-name:rotate;animation-duration:0.75s;animation-iteration-count:infinite}@keyframes rotate{to{transform:rotate(360deg)}}";
|
|
@@ -1476,7 +1557,7 @@ h("ul", { class: {
|
|
|
1476
1557
|
h("input", { type: "checkbox", id: input.id, name: props.name, value: input.value && input.value.toString(), checked: Boolean(input.value), required: input.required, disabled: props.readonly || props.disabled || input.disabled, indeterminate: input.value === null, onInput: input.handleInput, onBlur: input.handleBlur, onKeyDown: input.handleKeydown }),
|
|
1477
1558
|
h("label", { htmlFor: input.id }, input.title))))));
|
|
1478
1559
|
|
|
1479
|
-
const mgInputCheckboxCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle,.mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}fieldset.mg-input{border:0;margin-left:0;margin-right:0;padding:0}fieldset.mg-input input[type=radio],fieldset.mg-input input[type=checkbox]{flex-shrink:0;width:var(--mg-input-check-size);height:var(--mg-input-check-size);margin-top:calc((var(--font-size) * var(--line-height) - var(--mg-input-check-size)) / 2);margin-right:0.6rem;margin-bottom:0;margin-left:0}fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container{margin-top:0.7rem}.mg-input__input-container mg-tooltip{margin-left:3rem}.mg-input__input-group-container{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;column-gap:2.3rem;row-gap:1rem;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2)}.mg-input__input-group-container--vertical{flex-direction:column}.mg-input__input-group{display:flex;align-items:top}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi{display:flex;flex-wrap:wrap;gap:calc(var(--mg-inputs-spacer) * 1.2)}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi--with-values.mg-input__input-checkbox-multi{gap:0.4rem}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-values-container{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 1);flex-direction:row;margin:0;padding:0;list-style:none}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-value{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-height:var(--default-size);min-width:var(--default-size);padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;background-color:hsl(var(--mg-color-dark-5-hsl));border-radius:0.3rem;font-size:var(--font-size)}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-no-result{text-align:center}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-text,.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-title{display:inline;margin:0;color:hsl(var(--mg-color-dark-40-hsl))}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-title{margin:0 1.1rem}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-sections{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 1);flex-direction:column}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-sections-container{display:flex;flex-wrap:nowrap;gap:calc(0.4rem * 0);flex-direction:column;max-height:80vh;padding-right:1rem;overflow-y:auto}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-section-header{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 2);flex-direction:row;align-items:center;min-height:var(--default-size)}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-inputs{margin:0;padding:0.4rem calc(0.4rem * 2) 0.4rem calc(0.4rem / 2)}.mg-input.mg-input--checkbox-multi:not(.mg-input--label-on-top) mg-tooltip{margin-left:var(--mg-inputs-spacer)}.mg-input.mg-input--checkbox-multi mg-popover{--mg-popover-min-width:7rem;--mg-card-padding:calc(0.4rem * 2)}.mg-input.mg-input--checkbox-multi mg-popover [slot=content]{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 2);flex-direction:column}.mg-input.mg-input--checkbox-multi mg-popover [slot=content] .mg-input__input-group{margin-left:calc(0.4rem * 2)}.mg-input.mg-input--checkbox-multi mg-input-text{--mg-inputs-margin-bottom:0}";
|
|
1560
|
+
const mgInputCheckboxCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle,.mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}fieldset.mg-input{border:0;margin-left:0;margin-right:0;padding:0}fieldset.mg-input input[type=radio],fieldset.mg-input input[type=checkbox]{flex-shrink:0;width:var(--mg-input-check-size);height:var(--mg-input-check-size);margin-top:calc((var(--font-size) * var(--line-height) - var(--mg-input-check-size)) / 2);margin-right:0.6rem;margin-bottom:0;margin-left:0}fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container{margin-top:0.7rem}.mg-input__input-container mg-tooltip{margin-left:3rem}.mg-input__input-group-container{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;column-gap:2.3rem;row-gap:1rem;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2)}.mg-input__input-group-container--vertical{flex-direction:column}.mg-input__input-group{display:flex;align-items:top}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi{display:flex;flex-wrap:wrap;gap:calc(var(--mg-inputs-spacer) * 1.2)}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi--with-values.mg-input__input-checkbox-multi{gap:0.4rem}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-values-container{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 1);flex-direction:row;margin:0;padding:0;list-style:none}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-value{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-height:var(--default-size);min-width:var(--default-size);padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;background-color:hsl(var(--mg-color-dark-5-hsl));border-radius:0.3rem;font-size:var(--font-size)}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-no-result{text-align:center}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-text,.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-title{display:inline;margin:0;color:hsl(var(--mg-color-dark-40-hsl))}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-title{margin:0 1.1rem}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-sections{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 1);flex-direction:column}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-sections-container{display:flex;flex-wrap:nowrap;gap:calc(0.4rem * 0);flex-direction:column;max-height:80vh;padding-right:1rem;overflow-y:auto}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-section-header{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 2);flex-direction:row;align-items:center;min-height:var(--default-size)}.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-inputs{margin:0;padding:0.4rem calc(0.4rem * 2) 0.4rem calc(0.4rem / 2)}.mg-input.mg-input--checkbox-multi:not(.mg-input--label-on-top) mg-tooltip{margin-left:var(--mg-inputs-spacer)}.mg-input.mg-input--checkbox-multi mg-popover{--mg-popover-min-width:7rem;--mg-card-padding:calc(0.4rem * 2)}.mg-input.mg-input--checkbox-multi mg-popover-content [slot=content]{display:flex;flex-wrap:wrap;gap:calc(0.4rem * 2);flex-direction:column}.mg-input.mg-input--checkbox-multi mg-popover-content [slot=content] .mg-input__input-group{margin-left:calc(0.4rem * 2)}.mg-input.mg-input--checkbox-multi mg-input-text{--mg-inputs-margin-bottom:0}";
|
|
1480
1561
|
|
|
1481
1562
|
/**
|
|
1482
1563
|
* type CheckboxItem validation function
|
|
@@ -1811,7 +1892,7 @@ const MgInputCheckbox = class {
|
|
|
1811
1892
|
renderCheckboxMulti() {
|
|
1812
1893
|
const selectedValuesNb = this.checkboxItems.filter(({ value }) => value).length;
|
|
1813
1894
|
const checkboxes = this.getDisplayItems();
|
|
1814
|
-
return (h("div", { class: { 'mg-input__input-container': true, 'mg-input__input-checkbox-multi': true, 'mg-input__input-checkbox-multi--with-values': this.displaySelectedValues } }, this.renderCheckboxMultiDisplaySelectedValues(selectedValuesNb), h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), "onDisplay-change": this.handleMgPopoverDisplayChange, ref: el => {
|
|
1895
|
+
return (h("div", { class: { 'mg-input__input-container': true, 'mg-input__input-checkbox-multi': true, 'mg-input__input-checkbox-multi--with-values': this.displaySelectedValues } }, this.renderCheckboxMultiDisplaySelectedValues(selectedValuesNb), h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
|
|
1815
1896
|
if (Boolean(el))
|
|
1816
1897
|
this.mgPopover = el;
|
|
1817
1898
|
} }, h("mg-button", { variant: "secondary" }, h("mg-icon", { icon: "list" }), this.renderButtonText(selectedValuesNb)), h("div", { slot: "content" }, this.displaySearchInput && [
|
|
@@ -2115,7 +2196,7 @@ const MgInputDate = class {
|
|
|
2115
2196
|
* @returns HTML Element
|
|
2116
2197
|
*/
|
|
2117
2198
|
render() {
|
|
2118
|
-
return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
|
|
2199
|
+
return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
2119
2200
|
if (el !== null)
|
|
2120
2201
|
this.input = el;
|
|
2121
2202
|
} })));
|
|
@@ -2279,28 +2360,48 @@ const MgInputNumeric = class {
|
|
|
2279
2360
|
// Split number and decimal
|
|
2280
2361
|
const [integer, decimal = ''] = newValue.replace('-', '').split(/[\.,]/);
|
|
2281
2362
|
// Regex
|
|
2282
|
-
const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+[.,]
|
|
2363
|
+
const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+(?:[.,]\d*)?$/;
|
|
2283
2364
|
// Filter input
|
|
2284
|
-
if (
|
|
2365
|
+
if (this.isValidValue(newValue, regex, integer, decimal)) {
|
|
2285
2366
|
this.storedValue = newValue;
|
|
2286
2367
|
}
|
|
2287
|
-
else if (this.storedValue !== undefined) {
|
|
2288
|
-
newValue = this.storedValue;
|
|
2289
|
-
}
|
|
2290
2368
|
else {
|
|
2291
|
-
newValue =
|
|
2369
|
+
newValue = this.handleInvalidValue();
|
|
2292
2370
|
}
|
|
2293
2371
|
// Set value and input value
|
|
2294
|
-
this.
|
|
2295
|
-
if (this.input !== undefined)
|
|
2296
|
-
this.input.value = this.value;
|
|
2297
|
-
// emit numeric value
|
|
2298
|
-
this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
|
|
2299
|
-
this.valueChange.emit(this.numericValue);
|
|
2300
|
-
// Set readonlyValue
|
|
2301
|
-
this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
|
|
2372
|
+
this.updateValues(newValue);
|
|
2302
2373
|
}
|
|
2303
2374
|
}
|
|
2375
|
+
/**
|
|
2376
|
+
* Checks if the given value is valid according to the defined rules.
|
|
2377
|
+
* @param value - The input value to validate.
|
|
2378
|
+
* @param regex - The regular expression for validation.
|
|
2379
|
+
* @param integer - The integer part of the value.
|
|
2380
|
+
* @param decimal - The decimal part of the value.
|
|
2381
|
+
* @returns Returns true if the value is valid, otherwise false.
|
|
2382
|
+
*/
|
|
2383
|
+
isValidValue(value, regex, integer, decimal) {
|
|
2384
|
+
return ['', '-'].includes(value) || (value.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength));
|
|
2385
|
+
}
|
|
2386
|
+
/**
|
|
2387
|
+
* Handles invalid input values and returns a corrected value.
|
|
2388
|
+
* @returns The corrected value.
|
|
2389
|
+
*/
|
|
2390
|
+
handleInvalidValue() {
|
|
2391
|
+
return this.storedValue !== undefined ? this.storedValue : null;
|
|
2392
|
+
}
|
|
2393
|
+
/**
|
|
2394
|
+
* Updates the component values based on the validated input value.
|
|
2395
|
+
* @param newValue - The validated input value.
|
|
2396
|
+
*/
|
|
2397
|
+
updateValues(newValue) {
|
|
2398
|
+
this.value = newValue;
|
|
2399
|
+
if (this.input !== undefined)
|
|
2400
|
+
this.input.value = this.value;
|
|
2401
|
+
this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
|
|
2402
|
+
this.valueChange.emit(this.numericValue);
|
|
2403
|
+
this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
|
|
2404
|
+
}
|
|
2304
2405
|
handleValidityChange(newValue, _oldValue, prop) {
|
|
2305
2406
|
if (this.input !== undefined) {
|
|
2306
2407
|
this.input[prop] = newValue;
|
|
@@ -2373,7 +2474,7 @@ const MgInputNumeric = class {
|
|
|
2373
2474
|
* @returns HTML Element
|
|
2374
2475
|
*/
|
|
2375
2476
|
render() {
|
|
2376
|
-
return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "text", class: "mg-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
|
|
2477
|
+
return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "text", class: "mg-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
2377
2478
|
if (el !== null)
|
|
2378
2479
|
this.input = el;
|
|
2379
2480
|
} }), h("slot", { name: "append-input" })));
|
|
@@ -2498,7 +2599,7 @@ const MgInputPassword = class {
|
|
|
2498
2599
|
* @returns HTML Element
|
|
2499
2600
|
*/
|
|
2500
2601
|
render() {
|
|
2501
|
-
return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "password", class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
|
|
2602
|
+
return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "password", class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
2502
2603
|
if (el !== null)
|
|
2503
2604
|
this.input = el;
|
|
2504
2605
|
} })));
|
|
@@ -2654,7 +2755,7 @@ const MgInputRadio = class {
|
|
|
2654
2755
|
* @returns HTML Element
|
|
2655
2756
|
*/
|
|
2656
2757
|
render() {
|
|
2657
|
-
return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => {
|
|
2758
|
+
return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
|
|
2658
2759
|
if (el !== null)
|
|
2659
2760
|
this.inputs[index] = el;
|
|
2660
2761
|
} }), h("label", { htmlFor: this.identifier + '_' + index }, input.title)))))));
|
|
@@ -2910,7 +3011,7 @@ const MgInputSelect = class {
|
|
|
2910
3011
|
* @returns HTML Element
|
|
2911
3012
|
*/
|
|
2912
3013
|
render() {
|
|
2913
|
-
return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: undefined, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
|
|
3014
|
+
return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: undefined, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
2914
3015
|
if (el !== null)
|
|
2915
3016
|
this.input = el;
|
|
2916
3017
|
} }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
@@ -3109,7 +3210,7 @@ const MgInputText = class {
|
|
|
3109
3210
|
'--mg-character-left-message-length': (this.displayCharacterLeft
|
|
3110
3211
|
? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
|
|
3111
3212
|
: 0).toString(),
|
|
3112
|
-
} }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
|
|
3213
|
+
} }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
3113
3214
|
if (el !== null)
|
|
3114
3215
|
this.input = el;
|
|
3115
3216
|
} }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
|
|
@@ -3294,7 +3395,7 @@ const MgInputTextarea = class {
|
|
|
3294
3395
|
'mg-input__box--resizable': this.resizable === 'both',
|
|
3295
3396
|
'mg-input__box--resizable-horizontal': this.resizable === 'horizontal',
|
|
3296
3397
|
'mg-input__box--resizable-vertical': this.resizable === 'vertical',
|
|
3297
|
-
}, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
|
|
3398
|
+
}, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
3298
3399
|
if (el !== null)
|
|
3299
3400
|
this.input = el;
|
|
3300
3401
|
} }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
|
|
@@ -3963,7 +4064,7 @@ const MgMenuItem = class {
|
|
|
3963
4064
|
*/
|
|
3964
4065
|
renderInteractiveElement() {
|
|
3965
4066
|
const TagName = this.href !== undefined ? 'a' : 'button';
|
|
3966
|
-
return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status$1.DISABLED, Status$1.HIDDEN].includes(this.status) ? -1 :
|
|
4067
|
+
return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status$1.DISABLED, Status$1.HIDDEN].includes(this.status) ? -1 : undefined, disabled: this.status === Status$1.DISABLED, hidden: this.status === Status$1.HIDDEN, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status$1.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "image" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), !this.displayNotificationBadge && h("slot", { name: "information" }), this.displayNotificationBadge && (h("span", { class: "mg-menu-item__navigation-button-text-content-notification" }, h("mg-badge", { label: this.badgeLabel, value: "!", variant: "text-color", slot: "information" })))), this.size !== 'regular' && h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
|
|
3967
4068
|
[`${this.navigationButton}-chevron`]: true,
|
|
3968
4069
|
[`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
|
|
3969
4070
|
'mg-a11y-animation': true,
|
|
@@ -3978,7 +4079,7 @@ const MgMenuItem = class {
|
|
|
3978
4079
|
[`${this.name}__collapse-container`]: true,
|
|
3979
4080
|
[`${this.name}__collapse-container--first-level`]: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
|
|
3980
4081
|
});
|
|
3981
|
-
return (h(Host, { role:
|
|
4082
|
+
return (h(Host, { role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
|
|
3982
4083
|
this.renderInteractiveElement(),
|
|
3983
4084
|
h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
|
|
3984
4085
|
])));
|
|
@@ -4162,6 +4263,11 @@ const MgMessage = class {
|
|
|
4162
4263
|
};
|
|
4163
4264
|
MgMessage.style = mgMessageCss;
|
|
4164
4265
|
|
|
4266
|
+
/**
|
|
4267
|
+
* List of all possibles dialog roles
|
|
4268
|
+
*/
|
|
4269
|
+
const dialogRoles = ['dialog', 'alertdialog'];
|
|
4270
|
+
|
|
4165
4271
|
const mgModalCss = ":host{--mg-card-border-radius:var(--mg-modal-border-radius);--mg-card-padding:1.5rem 2.5rem;--mg-card-border:none}.mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;padding:2rem 0;background-color:hsl(var(--color-light), 0.85)}.mg-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-modal__dialog{display:flex;position:relative;flex-direction:column;align-self:center;row-gap:3rem;height:fit-content;max-height:100%}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal__content{overflow-y:auto}.mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}.mg-modal ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}";
|
|
4166
4272
|
|
|
4167
4273
|
const MgModal = class {
|
|
@@ -4235,13 +4341,18 @@ const MgModal = class {
|
|
|
4235
4341
|
this.hide = true;
|
|
4236
4342
|
};
|
|
4237
4343
|
this.identifier = createID('mg-modal');
|
|
4344
|
+
this.dialogRole = dialogRoles[0];
|
|
4238
4345
|
this.modalTitle = undefined;
|
|
4239
4346
|
this.closeButton = false;
|
|
4240
|
-
this.hide =
|
|
4347
|
+
this.hide = undefined;
|
|
4241
4348
|
this.hasActions = false;
|
|
4242
4349
|
this.hasContent = false;
|
|
4243
4350
|
this.classCollection = new ClassList(['mg-modal']);
|
|
4244
4351
|
}
|
|
4352
|
+
validateDialogRole(newValue) {
|
|
4353
|
+
if (!dialogRoles.includes(newValue))
|
|
4354
|
+
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
|
|
4355
|
+
}
|
|
4245
4356
|
validateModalTitle(newValue) {
|
|
4246
4357
|
if (typeof newValue !== 'string' || newValue.trim() === '') {
|
|
4247
4358
|
throw new Error('<mg-modal> prop "modalTitle" is required.');
|
|
@@ -4258,7 +4369,7 @@ const MgModal = class {
|
|
|
4258
4369
|
if (this.modalFocusableElements.length > 0)
|
|
4259
4370
|
this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);
|
|
4260
4371
|
}
|
|
4261
|
-
else {
|
|
4372
|
+
else if (newValue === false) {
|
|
4262
4373
|
this.componentShow.emit();
|
|
4263
4374
|
this.classCollection.delete(this.classHide);
|
|
4264
4375
|
document.body.style.overflow = 'hidden';
|
|
@@ -4292,6 +4403,7 @@ const MgModal = class {
|
|
|
4292
4403
|
this.titleId = `${this.identifier}-title`;
|
|
4293
4404
|
this.validateModalTitle(this.modalTitle);
|
|
4294
4405
|
this.validateHide(this.hide);
|
|
4406
|
+
this.validateDialogRole(this.dialogRole);
|
|
4295
4407
|
}
|
|
4296
4408
|
/**
|
|
4297
4409
|
* Add observer on component to set focus when displayed
|
|
@@ -4310,7 +4422,7 @@ const MgModal = class {
|
|
|
4310
4422
|
* @returns HTML Element
|
|
4311
4423
|
*/
|
|
4312
4424
|
render() {
|
|
4313
|
-
return (h("div", { role:
|
|
4425
|
+
return (h("div", { role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
|
|
4314
4426
|
if (el !== null) {
|
|
4315
4427
|
// store closeButton Element
|
|
4316
4428
|
this.closeButtonElement = el;
|
|
@@ -4321,6 +4433,7 @@ const MgModal = class {
|
|
|
4321
4433
|
}
|
|
4322
4434
|
get element() { return getElement(this); }
|
|
4323
4435
|
static get watchers() { return {
|
|
4436
|
+
"dialogRole": ["validateDialogRole"],
|
|
4324
4437
|
"modalTitle": ["validateModalTitle"],
|
|
4325
4438
|
"hide": ["validateHide"]
|
|
4326
4439
|
}; }
|
|
@@ -4525,7 +4638,7 @@ const MgPanel = class {
|
|
|
4525
4638
|
* Render input button
|
|
4526
4639
|
* @returns edit title input
|
|
4527
4640
|
*/
|
|
4528
|
-
this.renderEditInput = () => (h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))));
|
|
4641
|
+
this.renderEditInput = () => (h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: (el) => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))));
|
|
4529
4642
|
/**
|
|
4530
4643
|
* Render title
|
|
4531
4644
|
* @returns title element
|
|
@@ -6427,24 +6540,19 @@ var createPopper = /*#__PURE__*/popperGenerator({
|
|
|
6427
6540
|
defaultModifiers: defaultModifiers
|
|
6428
6541
|
}); // eslint-disable-next-line import/no-unused-modules
|
|
6429
6542
|
|
|
6430
|
-
const mgPopoverCss = ":host{--mg-card-padding:var(--mg-popover-padding-vertical, 1.5rem) var(--mg-popover-padding-horizontal, var(--mg-popover-padding-vertical, 1.5rem));--mg-card-border:none;--mg-card-border-radius:0.5rem;--mg-card-background:hsl(var(--mg-popover-background-color));position:relative;display:contents}:host::slotted(*){display:inline-block}
|
|
6543
|
+
const mgPopoverCss = ":host{--mg-card-padding:var(--mg-popover-padding-vertical, 1.5rem) var(--mg-popover-padding-horizontal, var(--mg-popover-padding-vertical, 1.5rem));--mg-card-border:none;--mg-card-border-radius:0.5rem;--mg-card-background:hsl(var(--mg-popover-background-color));position:relative;display:contents}:host::slotted(*){display:inline-block}";
|
|
6431
6544
|
|
|
6432
6545
|
const MgPopover = class {
|
|
6433
6546
|
constructor(hostRef) {
|
|
6434
6547
|
registerInstance(this, hostRef);
|
|
6435
6548
|
this.displayChange = createEvent(this, "display-change", 7);
|
|
6436
|
-
this.closeButtonId = '';
|
|
6437
|
-
// Classes
|
|
6438
|
-
this.classArrowHide = `mg-popover--arrow-hide`;
|
|
6439
6549
|
/**
|
|
6440
6550
|
* Check if clicked outside of component
|
|
6441
6551
|
* @param event - mouse event
|
|
6442
6552
|
*/
|
|
6443
6553
|
this.clickOutside = (event) => {
|
|
6444
|
-
|
|
6445
|
-
if (!this.disabled &&
|
|
6446
|
-
event.target.closest('mg-popover') !== this.element &&
|
|
6447
|
-
!(((_a = event.target.closest(`[data-mg-popover-guard]`)) === null || _a === void 0 ? void 0 : _a.dataset.mgPopoverGuard) === this.identifier)) {
|
|
6554
|
+
const closestElement = event.target.closest(`[data-mg-popover-guard]`);
|
|
6555
|
+
if (!this.disabled && event.target.closest('mg-popover') !== this.element && (closestElement === null || closestElement === void 0 ? void 0 : closestElement.dataset.mgPopoverGuard) !== this.identifier) {
|
|
6448
6556
|
this.display = false;
|
|
6449
6557
|
}
|
|
6450
6558
|
};
|
|
@@ -6478,24 +6586,46 @@ const MgPopover = class {
|
|
|
6478
6586
|
});
|
|
6479
6587
|
};
|
|
6480
6588
|
/**
|
|
6481
|
-
* Handle
|
|
6589
|
+
* Handle content hide event
|
|
6482
6590
|
*/
|
|
6483
|
-
this.
|
|
6591
|
+
this.handleHideContent = () => {
|
|
6484
6592
|
this.display = false;
|
|
6485
6593
|
};
|
|
6594
|
+
/**
|
|
6595
|
+
* Render popover content element
|
|
6596
|
+
*/
|
|
6597
|
+
this.renderPopoverContent = () => {
|
|
6598
|
+
this.mgPopoverContent = document.createElement('mg-popover-content');
|
|
6599
|
+
this.mgPopoverContent.setAttribute('slot', 'content');
|
|
6600
|
+
this.mgPopoverContent.setAttribute('id', this.identifier);
|
|
6601
|
+
this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
|
|
6602
|
+
const arrow = document.createElement('div');
|
|
6603
|
+
arrow.setAttribute('slot', 'arrow');
|
|
6604
|
+
arrow.dataset.popperArrow = '';
|
|
6605
|
+
this.mgPopoverContent.appendChild(arrow);
|
|
6606
|
+
// insert elements in DOM
|
|
6607
|
+
['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
|
|
6608
|
+
Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
|
|
6609
|
+
this.mgPopoverContent.appendChild(slot);
|
|
6610
|
+
});
|
|
6611
|
+
});
|
|
6612
|
+
this.element.appendChild(this.mgPopoverContent);
|
|
6613
|
+
};
|
|
6486
6614
|
this.identifier = createID('mg-popover');
|
|
6487
6615
|
this.placement = 'bottom';
|
|
6488
6616
|
this.arrowHide = false;
|
|
6489
6617
|
this.closeButton = false;
|
|
6490
6618
|
this.display = false;
|
|
6491
6619
|
this.disabled = false;
|
|
6492
|
-
this.classCollection = new ClassList(['mg-popover']);
|
|
6493
6620
|
}
|
|
6494
6621
|
validateArrowHide(newValue) {
|
|
6495
6622
|
if (newValue)
|
|
6496
|
-
this.
|
|
6623
|
+
this.mgPopoverContent.dataset.arrowHide = '';
|
|
6497
6624
|
else
|
|
6498
|
-
this.
|
|
6625
|
+
delete this.mgPopoverContent.dataset.arrowHide;
|
|
6626
|
+
}
|
|
6627
|
+
validateCloseButton(newValue) {
|
|
6628
|
+
this.mgPopoverContent.closeButton = newValue;
|
|
6499
6629
|
}
|
|
6500
6630
|
handleDisplay(newValue) {
|
|
6501
6631
|
if (newValue) {
|
|
@@ -6521,25 +6651,17 @@ const MgPopover = class {
|
|
|
6521
6651
|
componentWillLoad() {
|
|
6522
6652
|
// Get windows to attach events
|
|
6523
6653
|
this.windows = getWindows(window);
|
|
6524
|
-
//
|
|
6525
|
-
this.
|
|
6654
|
+
// render mg-popover-content slot
|
|
6655
|
+
this.renderPopoverContent();
|
|
6656
|
+
this.validateCloseButton(this.closeButton);
|
|
6526
6657
|
this.validateArrowHide(this.arrowHide);
|
|
6527
6658
|
}
|
|
6528
6659
|
/**
|
|
6529
6660
|
* Check if component props are well configured on init
|
|
6530
6661
|
*/
|
|
6531
6662
|
componentDidLoad() {
|
|
6532
|
-
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
6533
|
-
const slottedTitleElement = this.element.querySelector('[slot="title"]');
|
|
6534
|
-
if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {
|
|
6535
|
-
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
|
|
6536
|
-
}
|
|
6537
|
-
// Set close button id
|
|
6538
|
-
if (this.closeButton) {
|
|
6539
|
-
this.closeButtonId = `${this.identifier}-close-button`;
|
|
6540
|
-
}
|
|
6541
6663
|
// Get popover content
|
|
6542
|
-
this.mgPopover = this.element.
|
|
6664
|
+
this.mgPopover = this.element.querySelector(`#${this.identifier}`);
|
|
6543
6665
|
//Get interactive element (first element without slot attribute)
|
|
6544
6666
|
const interactiveElement = this.element.querySelector(':not([slot])');
|
|
6545
6667
|
// Add aria attributes
|
|
@@ -6558,17 +6680,10 @@ const MgPopover = class {
|
|
|
6558
6680
|
},
|
|
6559
6681
|
],
|
|
6560
6682
|
});
|
|
6561
|
-
|
|
6562
|
-
|
|
6563
|
-
this.
|
|
6564
|
-
|
|
6565
|
-
this.popper.update();
|
|
6566
|
-
}
|
|
6567
|
-
});
|
|
6568
|
-
Array.from(this.element.querySelectorAll('[slot]')).forEach(element => {
|
|
6569
|
-
this.resizeObserver.observe(element);
|
|
6570
|
-
});
|
|
6571
|
-
}
|
|
6683
|
+
// add resize observer
|
|
6684
|
+
new ResizeObserver(() => {
|
|
6685
|
+
this.popper.update();
|
|
6686
|
+
}).observe(this.element.querySelector('mg-popover-content'));
|
|
6572
6687
|
// Add events to toggle display
|
|
6573
6688
|
interactiveElement.addEventListener('click', () => {
|
|
6574
6689
|
if (!this.disabled)
|
|
@@ -6588,16 +6703,63 @@ const MgPopover = class {
|
|
|
6588
6703
|
* @returns HTML Element
|
|
6589
6704
|
*/
|
|
6590
6705
|
render() {
|
|
6591
|
-
return (h(Host, null, h("slot", null), h("
|
|
6706
|
+
return (h(Host, null, h("slot", null), h("slot", { name: "content" })));
|
|
6592
6707
|
}
|
|
6593
6708
|
get element() { return getElement(this); }
|
|
6594
6709
|
static get watchers() { return {
|
|
6595
6710
|
"arrowHide": ["validateArrowHide"],
|
|
6711
|
+
"closeButton": ["validateCloseButton"],
|
|
6596
6712
|
"display": ["handleDisplay"]
|
|
6597
6713
|
}; }
|
|
6598
6714
|
};
|
|
6599
6715
|
MgPopover.style = mgPopoverCss;
|
|
6600
6716
|
|
|
6717
|
+
const mgPopoverContentCss = ":host{display:none;padding:1rem;z-index:2000;color:hsl(var(--mg-popover-font-color));position:relative}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 1rem}.mg-popover-content{--mg-card-max-width:var(--mg-popover-max-width);--mg-card-min-width:var(--mg-popover-min-width)}.mg-popover-content mg-button{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover-content__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600}.mg-popover-content ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;visibility:hidden;width:calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);height:calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);}::slotted([slot=arrow]):before{visibility:visible;content:\"\";position:absolute}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:1rem}:host([data-popper-placement^=top]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]):before{left:calc(var(--mg-card-border-radius) + 1rem);border-right:calc(3rem / 2) solid transparent;border-left:calc(3rem / 2) solid transparent}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:0.1rem;filter:drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=top]) ::slotted([slot=arrow]):before{border-top:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:0.1rem;filter:drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]):before{border-bottom:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:1rem}:host([data-popper-placement^=left]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=right]) ::slotted([slot=arrow]):before{top:calc(var(--mg-card-border-radius) + 1rem);border-top:calc(3rem / 2) solid transparent;border-bottom:calc(3rem / 2) solid transparent}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:0.1rem;filter:drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=left]) ::slotted([slot=arrow]):before{border-left:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:0.1rem;filter:drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}:host([data-popper-placement^=right]) ::slotted([slot=arrow]):before{border-right:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(3rem + 2 * var(--mg-card-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]):before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]):before{top:var(--mg-card-border-radius)}";
|
|
6718
|
+
|
|
6719
|
+
const MgPopoverContent = class {
|
|
6720
|
+
constructor(hostRef) {
|
|
6721
|
+
registerInstance(this, hostRef);
|
|
6722
|
+
this.hideContent = createEvent(this, "hide-content", 7);
|
|
6723
|
+
/**
|
|
6724
|
+
* Handle action for close button
|
|
6725
|
+
*/
|
|
6726
|
+
this.handleCloseButton = () => {
|
|
6727
|
+
this.hideContent.emit();
|
|
6728
|
+
};
|
|
6729
|
+
this.closeButton = false;
|
|
6730
|
+
this.classCollection = new ClassList(['mg-popover-content']);
|
|
6731
|
+
}
|
|
6732
|
+
/*************
|
|
6733
|
+
* Lifecycle *
|
|
6734
|
+
*************/
|
|
6735
|
+
/**
|
|
6736
|
+
* Check if component props are valide
|
|
6737
|
+
*/
|
|
6738
|
+
componentWillLoad() {
|
|
6739
|
+
// Get locales
|
|
6740
|
+
this.messages = initLocales(this.element).messages;
|
|
6741
|
+
}
|
|
6742
|
+
/**
|
|
6743
|
+
* Check if component slots are valide
|
|
6744
|
+
*/
|
|
6745
|
+
componentDidLoad() {
|
|
6746
|
+
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
6747
|
+
const slottedTitleElement = this.element.querySelector('[slot="title"]');
|
|
6748
|
+
if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {
|
|
6749
|
+
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
|
|
6750
|
+
}
|
|
6751
|
+
}
|
|
6752
|
+
/**
|
|
6753
|
+
* Render
|
|
6754
|
+
* @returns HTML Element
|
|
6755
|
+
*/
|
|
6756
|
+
render() {
|
|
6757
|
+
return (h(Host, null, h("mg-card", { class: this.classCollection.join() }, this.closeButton && (h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover-content__title" }, h("slot", { name: "title" })), h("slot", { name: "content" })), h("slot", { name: "arrow" })));
|
|
6758
|
+
}
|
|
6759
|
+
get element() { return getElement(this); }
|
|
6760
|
+
};
|
|
6761
|
+
MgPopoverContent.style = mgPopoverContentCss;
|
|
6762
|
+
|
|
6601
6763
|
const mgSkipLinksCss = ".mg-skip-links{position:absolute;transform:translateY(-100%);opacity:0;background:hsl(var(--color-light))}.mg-skip-links:focus-within{position:relative;transform:translateY(0);opacity:1}.mg-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem;margin:0;padding:0.64rem 1.8rem;list-style:none}.mg-skip-links__link{display:inline-block;padding:1.2rem;color:hsl(var(--color-dark))}.mg-skip-links__link:hover{background:hsl(var(--color-dark), 0.1)}";
|
|
6602
6764
|
|
|
6603
6765
|
const MgSkipLinks = class {
|
|
@@ -6981,8 +7143,14 @@ var Guard;
|
|
|
6981
7143
|
Guard["HOVER_TOOLTIPED_ELEMENT"] = "hoverTooltipedGuard";
|
|
6982
7144
|
})(Guard || (Guard = {}));
|
|
6983
7145
|
|
|
6984
|
-
const mgTooltipCss = ":host{display:inline-block}
|
|
7146
|
+
const mgTooltipCss = ":host{display:inline-block}";
|
|
6985
7147
|
|
|
7148
|
+
/**
|
|
7149
|
+
* HTMLMgButtonElement type guard
|
|
7150
|
+
* @param element - element to check
|
|
7151
|
+
* @returns return true if type is HTMLMgButtonElement
|
|
7152
|
+
*/
|
|
7153
|
+
const isButton = (element) => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes(element.tagName);
|
|
6986
7154
|
const MgTooltip = class {
|
|
6987
7155
|
constructor(hostRef) {
|
|
6988
7156
|
registerInstance(this, hostRef);
|
|
@@ -6991,7 +7159,7 @@ const MgTooltip = class {
|
|
|
6991
7159
|
*/
|
|
6992
7160
|
this.show = () => {
|
|
6993
7161
|
// Make the tooltip visible
|
|
6994
|
-
this.
|
|
7162
|
+
this.mgTooltipContent.dataset.show = '';
|
|
6995
7163
|
// Enable the event listeners
|
|
6996
7164
|
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
6997
7165
|
// hide when click outside
|
|
@@ -7008,7 +7176,7 @@ const MgTooltip = class {
|
|
|
7008
7176
|
*/
|
|
7009
7177
|
this.hide = () => {
|
|
7010
7178
|
// Hide the tooltip
|
|
7011
|
-
this.
|
|
7179
|
+
this.mgTooltipContent.removeAttribute('data-show');
|
|
7012
7180
|
// Disable the event listeners
|
|
7013
7181
|
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
|
|
7014
7182
|
// Remove event listener
|
|
@@ -7095,8 +7263,12 @@ const MgTooltip = class {
|
|
|
7095
7263
|
*/
|
|
7096
7264
|
this.initTooltip = (slotElement, interactiveElement) => {
|
|
7097
7265
|
// Add tabindex to slotted element if we can't find any interactive element
|
|
7098
|
-
if (
|
|
7266
|
+
if (!this.disabled && !Boolean(interactiveElement)) {
|
|
7267
|
+
this.hasCustomTabIndex = true;
|
|
7099
7268
|
slotElement.tabIndex = 0;
|
|
7269
|
+
// Add role on non-interactive element to work with "aria-describedby" for screen readers
|
|
7270
|
+
slotElement.setAttribute('role', 'button');
|
|
7271
|
+
}
|
|
7100
7272
|
// Set aria-describedby
|
|
7101
7273
|
const ariaDescribedby = slotElement.getAttribute('aria-describedby');
|
|
7102
7274
|
if (ariaDescribedby === null) {
|
|
@@ -7107,7 +7279,7 @@ const MgTooltip = class {
|
|
|
7107
7279
|
slotElement.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);
|
|
7108
7280
|
}
|
|
7109
7281
|
// Create popperjs tooltip
|
|
7110
|
-
this.popper = createPopper(this.tooltipedElement, this.
|
|
7282
|
+
this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {
|
|
7111
7283
|
placement: this.placement,
|
|
7112
7284
|
strategy: 'fixed',
|
|
7113
7285
|
modifiers: [
|
|
@@ -7124,6 +7296,12 @@ const MgTooltip = class {
|
|
|
7124
7296
|
this.guard = Guard.FOCUS;
|
|
7125
7297
|
this.setDisplay(true);
|
|
7126
7298
|
});
|
|
7299
|
+
// as `click` event is the composition of `mousedown` and `mouseup` event,
|
|
7300
|
+
// and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`
|
|
7301
|
+
// we reset the guard on `mouseup` event to unlock tooltip
|
|
7302
|
+
this.tooltipedElement.addEventListener('mouseup', () => {
|
|
7303
|
+
this.resetGuard();
|
|
7304
|
+
});
|
|
7127
7305
|
this.tooltipedElement.addEventListener('blur', () => {
|
|
7128
7306
|
this.resetGuard();
|
|
7129
7307
|
this.setDisplay(false);
|
|
@@ -7133,7 +7311,7 @@ const MgTooltip = class {
|
|
|
7133
7311
|
['mouseenter', 'mouseleave'].forEach(eventType => {
|
|
7134
7312
|
const isMouseenter = eventType === 'mouseenter';
|
|
7135
7313
|
[
|
|
7136
|
-
{ element: this.
|
|
7314
|
+
{ element: this.mgTooltipContent, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
|
|
7137
7315
|
{ element: this.tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },
|
|
7138
7316
|
].forEach(({ element, action }) => {
|
|
7139
7317
|
element.addEventListener(eventType, () => {
|
|
@@ -7152,6 +7330,7 @@ const MgTooltip = class {
|
|
|
7152
7330
|
if (typeof newValue !== 'string' || newValue.trim() === '') {
|
|
7153
7331
|
throw new Error('<mg-tooltip> prop "message" is required.');
|
|
7154
7332
|
}
|
|
7333
|
+
this.mgTooltipContent.message = newValue;
|
|
7155
7334
|
}
|
|
7156
7335
|
handleDisplay(newValue) {
|
|
7157
7336
|
if (newValue) {
|
|
@@ -7161,6 +7340,28 @@ const MgTooltip = class {
|
|
|
7161
7340
|
this.hide();
|
|
7162
7341
|
}
|
|
7163
7342
|
}
|
|
7343
|
+
validateDisabled(newValue) {
|
|
7344
|
+
if (this.hasCustomTabIndex) {
|
|
7345
|
+
if (newValue)
|
|
7346
|
+
this.tooltipedElement.removeAttribute('tabindex');
|
|
7347
|
+
else if (this.tooltipedElement.getAttribute('tabindex') === null)
|
|
7348
|
+
this.tooltipedElement.setAttribute('tabindex', '0');
|
|
7349
|
+
}
|
|
7350
|
+
}
|
|
7351
|
+
/**
|
|
7352
|
+
* Render tooltip content element
|
|
7353
|
+
*/
|
|
7354
|
+
renderTooltip() {
|
|
7355
|
+
const mgTooltipContent = document.createElement('mg-tooltip-content');
|
|
7356
|
+
mgTooltipContent.setAttribute('slot', 'content');
|
|
7357
|
+
mgTooltipContent.setAttribute('id', this.identifier);
|
|
7358
|
+
const arrow = document.createElement('div');
|
|
7359
|
+
arrow.setAttribute('slot', 'arrow');
|
|
7360
|
+
arrow.dataset.popperArrow = '';
|
|
7361
|
+
mgTooltipContent.appendChild(arrow);
|
|
7362
|
+
// append tooltip element to component
|
|
7363
|
+
this.element.appendChild(mgTooltipContent);
|
|
7364
|
+
}
|
|
7164
7365
|
/*************
|
|
7165
7366
|
* Lifecycle *
|
|
7166
7367
|
*************/
|
|
@@ -7170,6 +7371,12 @@ const MgTooltip = class {
|
|
|
7170
7371
|
componentWillLoad() {
|
|
7171
7372
|
// Get windows to attach events
|
|
7172
7373
|
this.windows = getWindows(window);
|
|
7374
|
+
// Get tooltip element
|
|
7375
|
+
this.renderTooltip();
|
|
7376
|
+
this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
|
|
7377
|
+
//validate properties
|
|
7378
|
+
this.validateDisabled(this.disabled);
|
|
7379
|
+
this.validateMessage(this.message);
|
|
7173
7380
|
}
|
|
7174
7381
|
/**
|
|
7175
7382
|
* Get slotted element
|
|
@@ -7178,17 +7385,15 @@ const MgTooltip = class {
|
|
|
7178
7385
|
*/
|
|
7179
7386
|
componentDidLoad() {
|
|
7180
7387
|
var _a;
|
|
7181
|
-
//
|
|
7182
|
-
|
|
7183
|
-
// get slotted element
|
|
7184
|
-
const slotElement = this.element.firstElementChild;
|
|
7388
|
+
// get slotted element wich is not the tooltip
|
|
7389
|
+
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
7185
7390
|
// Get interactive element
|
|
7186
7391
|
const interactiveElement = slotElement.matches(focusableElements) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(focusableElements);
|
|
7187
7392
|
// define selected element to become tooltip selector
|
|
7188
7393
|
this.tooltipedElement = interactiveElement || slotElement;
|
|
7189
7394
|
// Check if slotted element is a disabled mg-button
|
|
7190
7395
|
// In this case we wrap the mg-button into a div to enable the tooltip
|
|
7191
|
-
if (
|
|
7396
|
+
if (isButton(slotElement)) {
|
|
7192
7397
|
new MutationObserver(mutationList => {
|
|
7193
7398
|
if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) {
|
|
7194
7399
|
this.setMgButtonWrapper(slotElement);
|
|
@@ -7203,7 +7408,6 @@ const MgTooltip = class {
|
|
|
7203
7408
|
// Init Tooltip
|
|
7204
7409
|
this.initTooltip(slotElement, interactiveElement);
|
|
7205
7410
|
this.handleDisplay(this.display);
|
|
7206
|
-
this.validateMessage(this.message);
|
|
7207
7411
|
}
|
|
7208
7412
|
/**
|
|
7209
7413
|
* update popper position after props change on component did update hook to benefit from render ended
|
|
@@ -7216,14 +7420,35 @@ const MgTooltip = class {
|
|
|
7216
7420
|
* @returns HTML Element
|
|
7217
7421
|
*/
|
|
7218
7422
|
render() {
|
|
7219
|
-
return (h(Host, null, h("slot", null), h("
|
|
7423
|
+
return (h(Host, null, h("slot", null), h("slot", { name: "content" })));
|
|
7220
7424
|
}
|
|
7221
7425
|
get element() { return getElement(this); }
|
|
7222
7426
|
static get watchers() { return {
|
|
7223
7427
|
"message": ["validateMessage"],
|
|
7224
|
-
"display": ["handleDisplay"]
|
|
7428
|
+
"display": ["handleDisplay"],
|
|
7429
|
+
"disabled": ["validateDisabled"]
|
|
7225
7430
|
}; }
|
|
7226
7431
|
};
|
|
7227
7432
|
MgTooltip.style = mgTooltipCss;
|
|
7228
7433
|
|
|
7229
|
-
|
|
7434
|
+
const mgTooltipContentCss = ":host{display:none;padding:0.5rem 0.8rem;z-index:1000;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start;max-width:40rem;box-sizing:border-box}:host([data-show]){display:block}::slotted([slot=arrow]){visibility:hidden}::slotted([slot=arrow])::before{visibility:visible;content:\"\";transform:rotate(45deg)}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background-color:hsl(var(--mg-tooltip-background-color))}:host([data-popper-placement^=top])>::slotted([slot=arrow]){bottom:-4px}:host([data-popper-placement^=bottom])>::slotted([slot=arrow]){top:-4px}:host([data-popper-placement^=left])>::slotted([slot=arrow]){right:-4px}:host([data-popper-placement^=right])>::slotted([slot=arrow]){left:-4px}";
|
|
7435
|
+
|
|
7436
|
+
const MgTooltipContent = class {
|
|
7437
|
+
constructor(hostRef) {
|
|
7438
|
+
registerInstance(this, hostRef);
|
|
7439
|
+
this.message = undefined;
|
|
7440
|
+
}
|
|
7441
|
+
/*************
|
|
7442
|
+
* Lifecycle *
|
|
7443
|
+
*************/
|
|
7444
|
+
/**
|
|
7445
|
+
* Render
|
|
7446
|
+
* @returns HTML Element
|
|
7447
|
+
*/
|
|
7448
|
+
render() {
|
|
7449
|
+
return (h(Host, { role: "tooltip" }, h("span", { innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { name: "arrow" })));
|
|
7450
|
+
}
|
|
7451
|
+
};
|
|
7452
|
+
MgTooltipContent.style = mgTooltipContentCss;
|
|
7453
|
+
|
|
7454
|
+
export { MgActionMore as mg_action_more, MgBadge as mg_badge, MgButton as mg_button, MgCard as mg_card, MgCharacterLeft as mg_character_left, MgDetails as mg_details, MgDivider as mg_divider, MgForm as mg_form, MgIcon as mg_icon, MgIllustratedMessage as mg_illustrated_message, MgInputCheckbox as mg_input_checkbox, MgInputCheckboxPaginated as mg_input_checkbox_paginated, MgInputDate as mg_input_date, MgInputNumeric as mg_input_numeric, MgInputPassword as mg_input_password, MgInputRadio as mg_input_radio, MgInputSelect as mg_input_select, MgInputText as mg_input_text, MgInputTextarea as mg_input_textarea, MgInputTitle as mg_input_title, MgInputToggle as mg_input_toggle, MgMenu as mg_menu, MgMenuItem as mg_menu_item, MgMessage as mg_message, MgModal as mg_modal, MgPagination as mg_pagination, MgPanel as mg_panel, MgPopover as mg_popover, MgPopoverContent as mg_popover_content, MgSkipLinks as mg_skip_links, MgTabs as mg_tabs, MgTag as mg_tag, MgTooltip as mg_tooltip, MgTooltipContent as mg_tooltip_content };
|