@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.
Files changed (85) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/{mg-action-more_32.cjs.entry.js → mg-action-more_34.cjs.entry.js} +342 -115
  3. package/dist/cjs/mg-components.cjs.js +1 -1
  4. package/dist/cjs/mg-item-more.cjs.entry.js +4 -2
  5. package/dist/collection/assets/icons/index.js +179 -0
  6. package/dist/collection/collection-manifest.json +2 -0
  7. package/dist/collection/components/atoms/mg-icon/mg-icon.js +1 -1
  8. package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.css +43 -0
  9. package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js +49 -0
  10. package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.css +0 -43
  11. package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +57 -12
  12. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.css +2 -2
  13. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +1 -1
  14. package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +1 -1
  15. package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +35 -15
  16. package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +1 -1
  17. package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +1 -1
  18. package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +1 -1
  19. package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +1 -1
  20. package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +1 -1
  21. package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +2 -2
  22. package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +9 -2
  23. package/dist/collection/components/molecules/mg-details/mg-details.js +1 -1
  24. package/dist/collection/components/molecules/mg-form/mg-form.js +21 -8
  25. package/dist/collection/components/molecules/mg-item-more/mg-item-more.js +4 -2
  26. package/dist/collection/components/molecules/mg-modal/mg-modal.conf.js +4 -0
  27. package/dist/collection/components/molecules/mg-modal/mg-modal.js +37 -5
  28. package/dist/collection/components/molecules/mg-panel/mg-panel.js +1 -1
  29. package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.css +135 -0
  30. package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js +100 -0
  31. package/dist/collection/components/molecules/mg-popover/mg-popover.css +0 -111
  32. package/dist/collection/components/molecules/mg-popover/mg-popover.js +42 -43
  33. package/dist/collection/utils/components.utils.js +8 -7
  34. package/dist/collection/utils/unit.test.utils.js +6 -5
  35. package/dist/components/components.utils.js +8 -7
  36. package/dist/components/index.d.ts +2 -0
  37. package/dist/components/index.js +2 -0
  38. package/dist/components/mg-action-more.js +29 -16
  39. package/dist/components/mg-details.js +1 -1
  40. package/dist/components/mg-form.js +21 -8
  41. package/dist/components/mg-icon2.js +77 -17
  42. package/dist/components/mg-input-checkbox-paginated2.js +18 -12
  43. package/dist/components/mg-input-checkbox.js +36 -24
  44. package/dist/components/mg-input-date.js +13 -7
  45. package/dist/components/mg-input-numeric.js +47 -21
  46. package/dist/components/mg-input-password.js +13 -7
  47. package/dist/components/mg-input-radio.js +13 -7
  48. package/dist/components/mg-input-select2.js +13 -7
  49. package/dist/components/mg-input-text2.js +15 -9
  50. package/dist/components/mg-input-textarea.js +15 -9
  51. package/dist/components/mg-input-toggle.js +12 -6
  52. package/dist/components/mg-item-more.js +24 -16
  53. package/dist/components/mg-menu-item2.js +18 -12
  54. package/dist/components/mg-modal.js +16 -3
  55. package/dist/components/mg-pagination2.js +16 -10
  56. package/dist/components/mg-panel.js +21 -15
  57. package/dist/components/mg-popover-content.d.ts +11 -0
  58. package/dist/components/mg-popover-content.js +6 -0
  59. package/dist/components/mg-popover-content2.js +88 -0
  60. package/dist/components/mg-popover2.js +54 -47
  61. package/dist/components/mg-tooltip-content.d.ts +11 -0
  62. package/dist/components/mg-tooltip-content.js +6 -0
  63. package/dist/components/mg-tooltip-content2.js +41 -0
  64. package/dist/components/mg-tooltip2.js +64 -15
  65. package/dist/esm/loader.js +1 -1
  66. package/dist/esm/{mg-action-more_32.entry.js → mg-action-more_34.entry.js} +341 -116
  67. package/dist/esm/mg-components.js +1 -1
  68. package/dist/esm/mg-item-more.entry.js +4 -2
  69. package/dist/mg-components/mg-components.css +1 -1
  70. package/dist/mg-components/mg-components.esm.js +1 -1
  71. package/dist/mg-components/p-3286bc46.entry.js +1 -0
  72. package/dist/mg-components/p-91f4a30d.entry.js +1 -0
  73. package/dist/types/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.d.ts +14 -0
  74. package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts +7 -1
  75. package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +19 -0
  76. package/dist/types/components/molecules/mg-action-more/mg-action-more.d.ts +6 -1
  77. package/dist/types/components/molecules/mg-form/mg-form.d.ts +8 -0
  78. package/dist/types/components/molecules/mg-modal/mg-modal.conf.d.ts +8 -0
  79. package/dist/types/components/molecules/mg-modal/mg-modal.d.ts +8 -2
  80. package/dist/types/components/molecules/mg-popover/mg-popover-content/mg-popover-content.d.ts +47 -0
  81. package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +8 -11
  82. package/dist/types/components.d.ts +59 -0
  83. package/package.json +18 -18
  84. package/dist/mg-components/p-4ae1130f.entry.js +0 -1
  85. package/dist/mg-components/p-aa298e17.entry.js +0 -1
@@ -31,11 +31,15 @@ var Status$1;
31
31
  * @returns ID
32
32
  */
33
33
  const createID = (prefix = '', length = 10) => {
34
- let ID = '';
35
34
  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
36
35
  const charsLength = chars.length;
37
- for (let i = 0; i < length; i++) {
38
- ID += chars.charAt(Math.floor(Math.random() * charsLength));
36
+ let ID = '';
37
+ let now = Date.now();
38
+ while (length > 0) {
39
+ now += Math.pow(10, 6); // Add 1 millisecond to the timestamp
40
+ const index = now % charsLength;
41
+ ID += chars.charAt(index);
42
+ length--;
39
43
  }
40
44
  return (prefix !== '' ? `${prefix}-` : '') + ID;
41
45
  };
@@ -141,10 +145,7 @@ const getParentWindows = (localWindow, windows = []) => {
141
145
  */
142
146
  const getChildWindows = (localWindow, windows = []) => {
143
147
  if (localWindow.frames.length > 0) {
144
- // Window.frames is an array-like object, needs a classic for loop
145
- // https://developer.mozilla.org/en-US/docs/Web/API/Window/frames
146
- for (let i = 0; i < localWindow.frames.length; i++) {
147
- const childWindow = localWindow.frames[i];
148
+ for (const childWindow of Array.from(localWindow.frames)) {
148
149
  windows.push(childWindow);
149
150
  getChildWindows(childWindow, windows);
150
151
  }
@@ -190,7 +191,7 @@ const MgActionMore = class {
190
191
  this.name = 'mg-action-more';
191
192
  this.mgPopoverIdentifier = createID(this.name);
192
193
  /************
193
- * Merthods *
194
+ * Methods *
194
195
  ***********/
195
196
  /**
196
197
  * Toogle expanded props
@@ -198,6 +199,13 @@ const MgActionMore = class {
198
199
  this.toggleExpanded = () => {
199
200
  this.expanded = !this.expanded;
200
201
  };
202
+ /**
203
+ * Handle popover display change value
204
+ * @param event - display change updated value
205
+ */
206
+ this.handleDisplayChange = (event) => {
207
+ this.expanded = event.detail;
208
+ };
201
209
  /**
202
210
  * Button click handler
203
211
  */
@@ -266,7 +274,7 @@ const MgActionMore = class {
266
274
  'mg-a11y-animation': true,
267
275
  } }, index.h("mg-icon", { icon: "chevron-down", size: "small" })));
268
276
  }
269
- return (index.h(index.Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { class: "mg-action-more" }, index.h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded }, index.h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, index.h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { slot: "content" }, index.h("mg-menu", { direction: mgMenu_conf.Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
277
+ return (index.h(index.Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { class: "mg-action-more" }, index.h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, index.h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, index.h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { slot: "content" }, index.h("mg-menu", { direction: mgMenu_conf.Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
270
278
  var _a;
271
279
  return (
272
280
  // eslint-disable-next-line react/jsx-no-bind
@@ -658,7 +666,7 @@ const MgDetails = class {
658
666
  * @returns HTML Element
659
667
  */
660
668
  render() {
661
- return (index.h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, index.h("summary", null, index.h("slot", { name: "summary" }), index.h("span", { class: "mg-details__toggle" }, index.h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { class: "mg-details__details" }, index.h("slot", { name: "details" }))));
669
+ return (index.h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, index.h("summary", null, index.h("slot", { name: "summary" }), index.h("span", { class: "mg-details__toggle" }, index.h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { class: "mg-details__details" }, index.h("slot", { name: "details" }))));
662
670
  }
663
671
  static get watchers() { return {
664
672
  "toggleClosed": ["validateTitles"],
@@ -706,21 +714,34 @@ const MgForm = class {
706
714
  this.classCollection.delete(this.classAllRequired);
707
715
  // If the form is disabled or readonly none of them are required
708
716
  // Check if all fields are not editable (readonly or disabled)
709
- if (!this.disabled && !this.readonly && !this.mgInputs.every(input => input.disabled || input.readonly)) {
710
- // Get required fields
711
- const requiredInputs = this.mgInputs.filter(input => input.required && !input.disabled && !input.readonly);
712
- // All fields are required
717
+ const isEditable = input => !(input.disabled || input.readonly);
718
+ const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';
719
+ if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {
720
+ // Get editable inputs
721
+ const editableInputs = this.mgInputs.filter(isEditable);
722
+ // Get required inputs
713
723
  // mg-input-toggle can not be required
714
- if (requiredInputs.length > 0 && requiredInputs.length === this.mgInputs.filter(input => input.nodeName !== 'MG-INPUT-TOGGLE').length) {
715
- this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.allRequiredSingle : this.messages.form.allRequired;
724
+ const requiredInputs = editableInputs.filter(input => !isMgInputToggle(input) && input.required);
725
+ // All inputs are required
726
+ if ([requiredInputs.length, editableInputs.length].every(length => length === 1) ||
727
+ (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)) {
728
+ this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
716
729
  this.classCollection.add(this.classAllRequired);
717
730
  }
718
731
  // Some fields are required
719
732
  else if (requiredInputs.length > 0) {
720
- this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.requiredSingle : this.messages.form.required;
733
+ this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');
721
734
  }
722
735
  }
723
736
  };
737
+ /**
738
+ * Returns a required message based on the count of required inputs.
739
+ * @param requiredInputs - An array of required input elements.
740
+ * @param keySingle - The key for the singular message format.
741
+ * @param keyPlural - The key for the plural message format.
742
+ * @returns The appropriate required message based on the count of required inputs.
743
+ */
744
+ this.getRequiredMessageBasedOnCount = (requiredInputs, keySingle, keyPlural) => this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];
724
745
  /**
725
746
  * Check if form is valid
726
747
  */
@@ -832,7 +853,7 @@ const MgForm = class {
832
853
  * @returns HTML Element
833
854
  */
834
855
  render() {
835
- return (index.h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: el => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && index.h("p", { innerHTML: this.requiredMessage }), index.h("slot", null), !this.readonly && !this.disabled && index.h("slot", { name: "actions" })));
856
+ return (index.h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: (el) => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && index.h("p", { innerHTML: this.requiredMessage }), index.h("slot", null), !this.readonly && !this.disabled && index.h("slot", { name: "actions" })));
836
857
  }
837
858
  get element() { return index.getElement(this); }
838
859
  static get watchers() { return {
@@ -864,6 +885,7 @@ const iconList = [
864
885
  "api",
865
886
  "archive",
866
887
  "archive-outline",
888
+ "arrow-clock",
867
889
  "arrow-down",
868
890
  "arrow-down-a-z",
869
891
  "arrow-down-right",
@@ -882,6 +904,9 @@ const iconList = [
882
904
  "arrows-rotate-backward",
883
905
  "ban",
884
906
  "bell",
907
+ "bell-outline",
908
+ "book",
909
+ "book-outline",
885
910
  "briefcase",
886
911
  "briefcase-outline",
887
912
  "building-outline",
@@ -905,6 +930,7 @@ const iconList = [
905
930
  "code-square-outline",
906
931
  "cog",
907
932
  "comment",
933
+ "comment-outline",
908
934
  "comment-sms",
909
935
  "conversation",
910
936
  "conversation-outline",
@@ -915,6 +941,8 @@ const iconList = [
915
941
  "dashboard",
916
942
  "dashboard-outline",
917
943
  "download",
944
+ "earth",
945
+ "earth-outline",
918
946
  "ellipsis",
919
947
  "ellipsis-vertical",
920
948
  "euro",
@@ -923,13 +951,17 @@ const iconList = [
923
951
  "exclamation-circle-outline",
924
952
  "exclamation-stamp",
925
953
  "exclamation-triangle",
954
+ "exclamation-triangle-outline",
926
955
  "eye",
927
956
  "eye-slash",
957
+ "fax",
958
+ "fax-outline",
928
959
  "file",
929
960
  "file-cog",
930
961
  "file-download",
931
962
  "file-excel",
932
963
  "file-excel-outline",
964
+ "file-outline",
933
965
  "file-pdf",
934
966
  "file-pdf-outline",
935
967
  "file-text",
@@ -940,17 +972,26 @@ const iconList = [
940
972
  "filter",
941
973
  "floppy-disk",
942
974
  "folder",
975
+ "folder-check",
976
+ "folder-check-outline",
943
977
  "folder-lines",
944
978
  "folder-lines-outline",
945
979
  "folder-link",
946
980
  "folder-outline",
947
981
  "folder-star",
982
+ "folders",
983
+ "folders-outline",
984
+ "gavel",
985
+ "gavel-outline",
948
986
  "graduation-cap",
949
987
  "hand-up",
950
988
  "history",
951
989
  "home",
952
990
  "home-outline",
953
991
  "info-circle",
992
+ "info-circle-outline",
993
+ "interrogation-circle",
994
+ "interrogation-circle-outline",
954
995
  "key",
955
996
  "laptop",
956
997
  "life-ring",
@@ -964,6 +1005,9 @@ const iconList = [
964
1005
  "log-out",
965
1006
  "magnifying-glass",
966
1007
  "mail",
1008
+ "mail-outline",
1009
+ "messages-square",
1010
+ "messages-square-outline",
967
1011
  "notes",
968
1012
  "notes-outline",
969
1013
  "paper-plane",
@@ -973,6 +1017,7 @@ const iconList = [
973
1017
  "pen-fancy",
974
1018
  "pen-fancy-files-outline",
975
1019
  "pen-fancy-outline",
1020
+ "pen-outline",
976
1021
  "phone",
977
1022
  "picture",
978
1023
  "play-circle",
@@ -987,9 +1032,11 @@ const iconList = [
987
1032
  "tag",
988
1033
  "tags",
989
1034
  "thumb-up",
1035
+ "thumb-up-outline",
990
1036
  "thumbtack",
991
1037
  "thumbtack-outline",
992
1038
  "trash",
1039
+ "trash-outline",
993
1040
  "universal-access",
994
1041
  "unlink",
995
1042
  "unlock",
@@ -997,12 +1044,16 @@ const iconList = [
997
1044
  "user",
998
1045
  "user-circle",
999
1046
  "user-group",
1047
+ "user-lock",
1048
+ "user-outline",
1000
1049
  "user-pen-fancy-outline",
1001
1050
  "user-plus",
1002
1051
  "user-question-outline",
1003
1052
  "user-shield-outline",
1004
1053
  "users",
1005
- "wallet"
1054
+ "users-outline",
1055
+ "wallet",
1056
+ "wallet-outline"
1006
1057
  ];
1007
1058
 
1008
1059
  const icons = {
@@ -1014,6 +1065,7 @@ const icons = {
1014
1065
  '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>',
1015
1066
  '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>',
1016
1067
  '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>',
1068
+ '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>',
1017
1069
  '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>',
1018
1070
  '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>',
1019
1071
  '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>',
@@ -1031,7 +1083,10 @@ const icons = {
1031
1083
  '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>',
1032
1084
  '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>',
1033
1085
  '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>',
1034
- 'bell': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 15.33a1.7 1.7 0 0 0 1.52-1.83h-3A1.7 1.7 0 0 0 8 15.33ZM13.13 11c-.46-.59-1.32-1.48-1.32-4.42a4.4 4.4 0 0 0-3.05-4.4v-.6A.85.85 0 0 0 8 .67a.85.85 0 0 0-.76.91v.6a4.4 4.4 0 0 0-3 4.44c0 2.94-.86 3.83-1.32 4.42a1 1 0 0 0-.2.63.85.85 0 0 0 .76.91h9.14a.85.85 0 0 0 .76-.91 1.05 1.05 0 0 0-.25-.67Z"/></svg>',
1086
+ '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>',
1087
+ '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>',
1088
+ '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>',
1089
+ '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>',
1035
1090
  '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>',
1036
1091
  '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>',
1037
1092
  '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>',
@@ -1054,7 +1109,8 @@ const icons = {
1054
1109
  '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>',
1055
1110
  '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>',
1056
1111
  '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>',
1057
- 'comment': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1.67c-3.37-.12-6.21 2.51-6.33 5.88 0 1.36.5 2.68 1.41 3.69-.26 1-.72 1.94-1.36 2.76-.04.08-.04.17 0 .25.03.08.1.13.18.13 1.3-.03 2.54-.55 3.48-1.45.83.34 1.72.51 2.62.5 3.37.12 6.21-2.51 6.33-5.88-.12-3.37-2.96-6-6.33-5.88Zm2.53 8.43c0 .14-.11.25-.25.25H5.73c-.14 0-.25-.1-.26-.24V9.2c0-.17.13-.3.3-.31h4.5c.14 0 .26.12.26.26v.95Zm.92-3.29c0 .17-.13.3-.3.3h-6.3c-.17 0-.3-.13-.3-.3V6c0-.16.12-.29.28-.3h6.32c.16 0 .29.12.3.28v.83Z"/></svg>',
1112
+ '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>',
1113
+ '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>',
1058
1114
  '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>',
1059
1115
  '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>',
1060
1116
  '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>',
@@ -1065,6 +1121,8 @@ const icons = {
1065
1121
  '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>',
1066
1122
  '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>',
1067
1123
  '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>',
1124
+ '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>',
1125
+ '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>',
1068
1126
  '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>',
1069
1127
  '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>',
1070
1128
  '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>',
@@ -1072,14 +1130,18 @@ const icons = {
1072
1130
  '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>',
1073
1131
  '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>',
1074
1132
  '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>',
1075
- 'exclamation-triangle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m14.3 13.88-6-12a.32.32 0 0 0-.41-.15.31.31 0 0 0-.15.15l-6 12a.31.31 0 0 0 .14.42.32.32 0 0 0 .14 0H14a.31.31 0 0 0 .33-.29.23.23 0 0 0-.03-.13ZM7 6a.28.28 0 0 1 .28-.28h1.46A.28.28 0 0 1 9 6v4a.29.29 0 0 1-.28.29H7.3A.29.29 0 0 1 7 10Zm2 7a.31.31 0 0 1-.31.32H7.34A.32.32 0 0 1 7 13v-1.37a.31.31 0 0 1 .32-.31h1.39a.31.31 0 0 1 .31.31Z"/></svg>',
1133
+ '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>',
1134
+ '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>',
1076
1135
  '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>',
1077
1136
  '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>',
1078
- 'file': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8.89 4.56V.67H3.35a.66.66 0 0 0-.66.68v13.3a.67.67 0 0 0 .66.68h9.3a.66.66 0 0 0 .66-.68v-9.4H9.55a.67.67 0 0 1-.66-.69Z"/><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"/></svg>',
1137
+ '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>',
1138
+ '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>',
1139
+ '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>',
1079
1140
  '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>',
1080
1141
  '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>',
1081
1142
  '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>',
1082
1143
  '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>',
1144
+ '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>',
1083
1145
  '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>',
1084
1146
  '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>',
1085
1147
  '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>',
@@ -1089,18 +1151,27 @@ const icons = {
1089
1151
  '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>',
1090
1152
  '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>',
1091
1153
  '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>',
1092
- 'folder': '<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.34Z"/></svg>',
1154
+ '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>',
1155
+ '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>',
1156
+ '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>',
1093
1157
  '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>',
1094
1158
  '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>',
1095
1159
  '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>',
1096
- 'folder-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m6.22 3.67 1.55 1.49.29.28h5.93c.19 0 .34.16.34.34v6.21c0 .18-.15.34-.33.34H2.01c-.18 0-.34-.15-.34-.33V4.01c0-.18.15-.34.33-.34h4.22m.4-1H2C1.27 2.67.68 3.27.67 4v8c0 .73.6 1.32 1.33 1.33h12c.73 0 1.32-.6 1.33-1.33V5.78c0-.73-.6-1.33-1.33-1.34H8.46L6.62 2.67Z"/></svg>',
1160
+ '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>',
1097
1161
  '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>',
1162
+ '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>',
1163
+ '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>',
1164
+ '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>',
1165
+ '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>',
1098
1166
  '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>',
1099
1167
  '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>',
1100
1168
  '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>',
1101
1169
  '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>',
1102
1170
  '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>',
1103
- 'info-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 .67ZM9 12a.29.29 0 0 1-.3.3H7.35a.29.29 0 0 1-.3-.3V7.32A.29.29 0 0 1 7.33 7h1.32a.29.29 0 0 1 .35.3Zm0-6.74a.29.29 0 0 1-.3.3H7.35a.29.29 0 0 1-.3-.3V4a.29.29 0 0 1 .28-.3h1.32a.29.29 0 0 1 .3.28V4Z"/></svg>',
1171
+ '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>',
1172
+ '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>',
1173
+ '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>',
1174
+ '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>',
1104
1175
  '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>',
1105
1176
  '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>',
1106
1177
  '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>',
@@ -1112,17 +1183,21 @@ const icons = {
1112
1183
  '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>',
1113
1184
  '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>',
1114
1185
  '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>',
1115
- 'magnifying-glass': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M11.24 9.5c1.48-2.44.71-5.62-1.73-7.1-.05-.03-.11-.07-.17-.1A5.232 5.232 0 0 0 2.52 4C.94 6.38 1.6 9.59 3.98 11.17a5.142 5.142 0 0 0 5.54.1L12.3 14c.39.39 1.02.39 1.41 0l.33-.33a.996.996 0 0 0 0-1.41l-2.8-2.76Zm-4.4.5c-1.76.02-3.2-1.4-3.22-3.16-.02-1.76 1.4-3.2 3.16-3.22 1.76-.02 3.2 1.4 3.22 3.16v.06A3.193 3.193 0 0 1 6.84 10Z"/></svg>',
1116
- 'mail': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13.87 2.67H2.13C1.36 2.64.71 3.23.67 4v8c.03.77.68 1.36 1.45 1.33h11.75c.77.04 1.42-.55 1.46-1.32V4c-.03-.77-.68-1.36-1.45-1.33h-.01Zm0 2.66L8 8.67 2.13 5.33V4L8 7.33 13.87 4v1.33Z"/></svg>',
1186
+ '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>',
1187
+ '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>',
1188
+ '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>',
1189
+ '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>',
1190
+ '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>',
1117
1191
  '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>',
1118
1192
  '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>',
1119
1193
  '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>',
1120
1194
  '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>',
1121
- 'pen': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M1.67 11.69v2.64h2.64l7.78-7.78-2.64-2.64-7.78 7.78Zm12.46-7.18c.27-.28.27-.72 0-1l-1.65-1.64a.719.719 0 0 0-1 0L10.2 3.16l2.64 2.64 1.29-1.29Z"/></svg>',
1195
+ '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>',
1122
1196
  '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>',
1123
1197
  '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>',
1124
1198
  '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>',
1125
1199
  '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>',
1200
+ '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>',
1126
1201
  '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>',
1127
1202
  '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>',
1128
1203
  '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>',
@@ -1133,26 +1208,32 @@ const icons = {
1133
1208
  '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>',
1134
1209
  '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>',
1135
1210
  '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>',
1136
- 'table': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14.19 2.68H1.81A1.14 1.14 0 0 0 .67 3.82v8.36a1.14 1.14 0 0 0 1.14 1.14h12.38a1.14 1.14 0 0 0 1.14-1.14V3.82a1.14 1.14 0 0 0-1.14-1.14ZM7.24 11.8H2.19V9.52h5.05Zm0-3.8H2.19V5.72h5.05Zm6.57 3.8H8.76V9.52h5.05Zm0-3.8H8.76V5.72h5.05Z"/></svg>',
1211
+ '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>',
1137
1212
  '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>',
1138
1213
  '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>',
1139
- 'thumb-up': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M2.11 14.36h1a.45.45 0 0 0 .45-.44V7.17a.45.45 0 0 0-.45-.44h-1a.44.44 0 0 0-.44.44v6.75a.44.44 0 0 0 .44.44Zm12.22-7a1.27 1.27 0 0 0-1.27-1.27H9.71l.61-2.91v-.2a1.07 1.07 0 0 0-.28-.68l-.68-.66-4.17 4.19a1.26 1.26 0 0 0-.37.9v6.36a1.27 1.27 0 0 0 1.27 1.27h5.06a1.24 1.24 0 0 0 1.17-.77l1.92-4.49a1.22 1.22 0 0 0 .09-.46V7.42Z"/></svg>',
1214
+ '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>',
1215
+ '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>',
1140
1216
  '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>',
1141
1217
  '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>',
1142
- 'trash': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M3.27 14.17c0 .66.54 1.19 1.2 1.2h7l-.05-.02h.08c.64-.02 1.14-.56 1.12-1.2V4.32H3.27v9.85Zm5.97-7.12c0-.33.27-.6.6-.6s.6.27.6.6v5.3c0 .33-.27.6-.6.6s-.6-.27-.6-.6v-5.3Zm-3.5 0c0-.33.27-.59.6-.6.32.02.58.28.6.6v5.3c-.02.32-.28.58-.6.6a.645.645 0 0 1-.6-.6v-5.3Zm7.28-5.39h-2.6V.95a.28.28 0 0 0-.28-.28H5.87a.28.28 0 0 0-.28.28v.72H2.91a.28.28 0 0 0-.28.28V3.1c0 .15.12.28.28.28h10.11c.15 0 .28-.12.28-.28V1.94a.28.28 0 0 0-.28-.28Z"/><path fill="currentColor" d="M13 2h-2.9l-.2-.4c-.1-.2-.3-.4-.5-.4H6.6c-.2 0-.4.1-.5.3l-.3.5H2.9c-.2 0-.4.2-.4.4v.8c0 .2.2.4.4.4H13c.2 0 .4-.2.4-.4v-.8c0-.2-.2-.4-.4-.4z"/></svg>',
1218
+ '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>',
1219
+ '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>',
1143
1220
  '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>',
1144
1221
  '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>',
1145
1222
  '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>',
1146
1223
  '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>',
1147
- 'user': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 8.79a3.56 3.56 0 1 0-3.56-3.56A3.56 3.56 0 0 0 8 8.79Zm3.17.79H9.8a4.27 4.27 0 0 1-3.6 0H4.83a3.16 3.16 0 0 0-3.16 3.17v.4a1.18 1.18 0 0 0 1.18 1.18h10.3a1.18 1.18 0 0 0 1.18-1.18v-.4a3.16 3.16 0 0 0-3.16-3.17Z"/></svg>',
1224
+ '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>',
1148
1225
  '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>',
1149
1226
  '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>',
1227
+ '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>',
1228
+ '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>',
1150
1229
  '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>',
1151
1230
  '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>',
1152
1231
  '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>',
1153
1232
  '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>',
1154
- 'users': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12 8.76h-.2a5.24 5.24 0 0 1-3.93 0h-.26a3.05 3.05 0 0 0-3.3 2.75v.69a1.28 1.28 0 0 0 1.38 1.14H14a1.27 1.27 0 0 0 1.37-1.14v-.69A3.07 3.07 0 0 0 12 8.75Zm-6.4-.32A2 2 0 0 0 4.31 8H2.48A1.69 1.69 0 0 0 .65 9.53v.76a.85.85 0 0 0 .91.76h1.89a3.58 3.58 0 0 1 2.16-2.61Zm4.21-5.78a2.65 2.65 0 1 1-2.65 2.65 2.65 2.65 0 0 1 2.65-2.65Zm-6.5 1.52A1.51 1.51 0 1 1 1.8 5.69a1.51 1.51 0 0 1 1.51-1.51Z"/></svg>',
1155
- 'wallet': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13.88 5H3a.43.43 0 0 1-.46-.38.43.43 0 0 1 .46-.43h11a.43.43 0 0 0 .46-.38A1.28 1.28 0 0 0 13 2.67H2.5A1.7 1.7 0 0 0 .67 4.19v7.62a1.7 1.7 0 0 0 1.83 1.52h11.38a1.32 1.32 0 0 0 1.45-1.14V6.1A1.33 1.33 0 0 0 13.88 5Zm-1.21 5.29a1.1 1.1 0 1 1 1.1-1.1 1.1 1.1 0 0 1-1.1 1.05Z"/></svg>'
1233
+ '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>',
1234
+ '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>',
1235
+ '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>',
1236
+ '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>'
1156
1237
  };
1157
1238
 
1158
1239
  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)}}";
@@ -1480,7 +1561,7 @@ index.h("ul", { class: {
1480
1561
  index.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 }),
1481
1562
  index.h("label", { htmlFor: input.id }, input.title))))));
1482
1563
 
1483
- 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}";
1564
+ 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}";
1484
1565
 
1485
1566
  /**
1486
1567
  * type CheckboxItem validation function
@@ -1815,7 +1896,7 @@ const MgInputCheckbox = class {
1815
1896
  renderCheckboxMulti() {
1816
1897
  const selectedValuesNb = this.checkboxItems.filter(({ value }) => value).length;
1817
1898
  const checkboxes = this.getDisplayItems();
1818
- return (index.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), index.h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), "onDisplay-change": this.handleMgPopoverDisplayChange, ref: el => {
1899
+ return (index.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), index.h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
1819
1900
  if (Boolean(el))
1820
1901
  this.mgPopover = el;
1821
1902
  } }, index.h("mg-button", { variant: "secondary" }, index.h("mg-icon", { icon: "list" }), this.renderButtonText(selectedValuesNb)), index.h("div", { slot: "content" }, this.displaySearchInput && [
@@ -2119,7 +2200,7 @@ const MgInputDate = class {
2119
2200
  * @returns HTML Element
2120
2201
  */
2121
2202
  render() {
2122
- return (index.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: mgMenu_conf.localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.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 => {
2203
+ return (index.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: mgMenu_conf.localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.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) => {
2123
2204
  if (el !== null)
2124
2205
  this.input = el;
2125
2206
  } })));
@@ -2283,28 +2364,48 @@ const MgInputNumeric = class {
2283
2364
  // Split number and decimal
2284
2365
  const [integer, decimal = ''] = newValue.replace('-', '').split(/[\.,]/);
2285
2366
  // Regex
2286
- const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+[.,]?\d*$/;
2367
+ const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+(?:[.,]\d*)?$/;
2287
2368
  // Filter input
2288
- if (['', '-'].includes(newValue) || (newValue.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength))) {
2369
+ if (this.isValidValue(newValue, regex, integer, decimal)) {
2289
2370
  this.storedValue = newValue;
2290
2371
  }
2291
- else if (this.storedValue !== undefined) {
2292
- newValue = this.storedValue;
2293
- }
2294
2372
  else {
2295
- newValue = null;
2373
+ newValue = this.handleInvalidValue();
2296
2374
  }
2297
2375
  // Set value and input value
2298
- this.value = newValue;
2299
- if (this.input !== undefined)
2300
- this.input.value = this.value;
2301
- // emit numeric value
2302
- this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
2303
- this.valueChange.emit(this.numericValue);
2304
- // Set readonlyValue
2305
- this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
2376
+ this.updateValues(newValue);
2306
2377
  }
2307
2378
  }
2379
+ /**
2380
+ * Checks if the given value is valid according to the defined rules.
2381
+ * @param value - The input value to validate.
2382
+ * @param regex - The regular expression for validation.
2383
+ * @param integer - The integer part of the value.
2384
+ * @param decimal - The decimal part of the value.
2385
+ * @returns Returns true if the value is valid, otherwise false.
2386
+ */
2387
+ isValidValue(value, regex, integer, decimal) {
2388
+ return ['', '-'].includes(value) || (value.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength));
2389
+ }
2390
+ /**
2391
+ * Handles invalid input values and returns a corrected value.
2392
+ * @returns The corrected value.
2393
+ */
2394
+ handleInvalidValue() {
2395
+ return this.storedValue !== undefined ? this.storedValue : null;
2396
+ }
2397
+ /**
2398
+ * Updates the component values based on the validated input value.
2399
+ * @param newValue - The validated input value.
2400
+ */
2401
+ updateValues(newValue) {
2402
+ this.value = newValue;
2403
+ if (this.input !== undefined)
2404
+ this.input.value = this.value;
2405
+ this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
2406
+ this.valueChange.emit(this.numericValue);
2407
+ this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
2408
+ }
2308
2409
  handleValidityChange(newValue, _oldValue, prop) {
2309
2410
  if (this.input !== undefined) {
2310
2411
  this.input[prop] = newValue;
@@ -2377,7 +2478,7 @@ const MgInputNumeric = class {
2377
2478
  * @returns HTML Element
2378
2479
  */
2379
2480
  render() {
2380
- return (index.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 }, index.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 => {
2481
+ return (index.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 }, index.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) => {
2381
2482
  if (el !== null)
2382
2483
  this.input = el;
2383
2484
  } }), index.h("slot", { name: "append-input" })));
@@ -2502,7 +2603,7 @@ const MgInputPassword = class {
2502
2603
  * @returns HTML Element
2503
2604
  */
2504
2605
  render() {
2505
- return (index.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 }, index.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 => {
2606
+ return (index.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 }, index.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) => {
2506
2607
  if (el !== null)
2507
2608
  this.input = el;
2508
2609
  } })));
@@ -2658,7 +2759,7 @@ const MgInputRadio = class {
2658
2759
  * @returns HTML Element
2659
2760
  */
2660
2761
  render() {
2661
- return (index.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 }, index.h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index$1) => (index.h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => {
2762
+ return (index.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 }, index.h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index$1) => (index.h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
2662
2763
  if (el !== null)
2663
2764
  this.inputs[index$1] = el;
2664
2765
  } }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title)))))));
@@ -2914,7 +3015,7 @@ const MgInputSelect = class {
2914
3015
  * @returns HTML Element
2915
3016
  */
2916
3017
  render() {
2917
- return (index.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 }, index.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 => {
3018
+ return (index.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 }, index.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) => {
2918
3019
  if (el !== null)
2919
3020
  this.input = el;
2920
3021
  } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
@@ -3113,7 +3214,7 @@ const MgInputText = class {
3113
3214
  '--mg-character-left-message-length': (this.displayCharacterLeft
3114
3215
  ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
3115
3216
  : 0).toString(),
3116
- } }, this.icon !== undefined && index.h("mg-icon", { icon: this.icon }), index.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 => {
3217
+ } }, this.icon !== undefined && index.h("mg-icon", { icon: this.icon }), index.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) => {
3117
3218
  if (el !== null)
3118
3219
  this.input = el;
3119
3220
  } }), this.displayCharacterLeft && this.maxlength > 0 && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), index.h("slot", { name: "append-input" })));
@@ -3298,7 +3399,7 @@ const MgInputTextarea = class {
3298
3399
  'mg-input__box--resizable': this.resizable === 'both',
3299
3400
  'mg-input__box--resizable-horizontal': this.resizable === 'horizontal',
3300
3401
  'mg-input__box--resizable-vertical': this.resizable === 'vertical',
3301
- }, 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 => {
3402
+ }, 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) => {
3302
3403
  if (el !== null)
3303
3404
  this.input = el;
3304
3405
  } }), this.displayCharacterLeft && this.maxlength > 0 && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
@@ -3967,7 +4068,7 @@ const MgMenuItem = class {
3967
4068
  */
3968
4069
  renderInteractiveElement() {
3969
4070
  const TagName = this.href !== undefined ? 'a' : 'button';
3970
- return (index.h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status$1.DISABLED, Status$1.HIDDEN].includes(this.status) ? -1 : 0, 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 }, index.h("slot", { name: "image" }), index.h("div", { class: `${this.navigationButton}-center` }, index.h("div", { class: `${this.navigationButton}-text-content` }, index.h("slot", { name: "label" }), !this.displayNotificationBadge && index.h("slot", { name: "information" }), this.displayNotificationBadge && (index.h("span", { class: "mg-menu-item__navigation-button-text-content-notification" }, index.h("mg-badge", { label: this.badgeLabel, value: "!", variant: "text-color", slot: "information" })))), this.size !== 'regular' && index.h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (index.h("span", { class: {
4071
+ return (index.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 }, index.h("slot", { name: "image" }), index.h("div", { class: `${this.navigationButton}-center` }, index.h("div", { class: `${this.navigationButton}-text-content` }, index.h("slot", { name: "label" }), !this.displayNotificationBadge && index.h("slot", { name: "information" }), this.displayNotificationBadge && (index.h("span", { class: "mg-menu-item__navigation-button-text-content-notification" }, index.h("mg-badge", { label: this.badgeLabel, value: "!", variant: "text-color", slot: "information" })))), this.size !== 'regular' && index.h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (index.h("span", { class: {
3971
4072
  [`${this.navigationButton}-chevron`]: true,
3972
4073
  [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
3973
4074
  'mg-a11y-animation': true,
@@ -3982,7 +4083,7 @@ const MgMenuItem = class {
3982
4083
  [`${this.name}__collapse-container`]: true,
3983
4084
  [`${this.name}__collapse-container--first-level`]: (this.isInMainMenu || this.isItemMore) && this.isDirection(mgMenu_conf.Direction.HORIZONTAL),
3984
4085
  });
3985
- return (index.h(index.Host, { role: "listitem" }, this.displayPopover() ? (index.h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
4086
+ return (index.h(index.Host, { role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (index.h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
3986
4087
  this.renderInteractiveElement(),
3987
4088
  index.h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
3988
4089
  ])));
@@ -4166,6 +4267,11 @@ const MgMessage = class {
4166
4267
  };
4167
4268
  MgMessage.style = mgMessageCss;
4168
4269
 
4270
+ /**
4271
+ * List of all possibles dialog roles
4272
+ */
4273
+ const dialogRoles = ['dialog', 'alertdialog'];
4274
+
4169
4275
  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}";
4170
4276
 
4171
4277
  const MgModal = class {
@@ -4239,13 +4345,18 @@ const MgModal = class {
4239
4345
  this.hide = true;
4240
4346
  };
4241
4347
  this.identifier = createID('mg-modal');
4348
+ this.dialogRole = dialogRoles[0];
4242
4349
  this.modalTitle = undefined;
4243
4350
  this.closeButton = false;
4244
- this.hide = false;
4351
+ this.hide = undefined;
4245
4352
  this.hasActions = false;
4246
4353
  this.hasContent = false;
4247
4354
  this.classCollection = new ClassList(['mg-modal']);
4248
4355
  }
4356
+ validateDialogRole(newValue) {
4357
+ if (!dialogRoles.includes(newValue))
4358
+ throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
4359
+ }
4249
4360
  validateModalTitle(newValue) {
4250
4361
  if (typeof newValue !== 'string' || newValue.trim() === '') {
4251
4362
  throw new Error('<mg-modal> prop "modalTitle" is required.');
@@ -4262,7 +4373,7 @@ const MgModal = class {
4262
4373
  if (this.modalFocusableElements.length > 0)
4263
4374
  this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);
4264
4375
  }
4265
- else {
4376
+ else if (newValue === false) {
4266
4377
  this.componentShow.emit();
4267
4378
  this.classCollection.delete(this.classHide);
4268
4379
  document.body.style.overflow = 'hidden';
@@ -4296,6 +4407,7 @@ const MgModal = class {
4296
4407
  this.titleId = `${this.identifier}-title`;
4297
4408
  this.validateModalTitle(this.modalTitle);
4298
4409
  this.validateHide(this.hide);
4410
+ this.validateDialogRole(this.dialogRole);
4299
4411
  }
4300
4412
  /**
4301
4413
  * Add observer on component to set focus when displayed
@@ -4314,7 +4426,7 @@ const MgModal = class {
4314
4426
  * @returns HTML Element
4315
4427
  */
4316
4428
  render() {
4317
- return (index.h("div", { role: "alertdialog", id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, index.h("mg-card", null, index.h("div", { class: "mg-modal__dialog" }, index.h("header", { class: "mg-modal__header" }, this.closeButton && (index.h("span", { class: "mg-modal__close-button" }, index.h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: el => {
4429
+ return (index.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 }, index.h("mg-card", null, index.h("div", { class: "mg-modal__dialog" }, index.h("header", { class: "mg-modal__header" }, this.closeButton && (index.h("span", { class: "mg-modal__close-button" }, index.h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
4318
4430
  if (el !== null) {
4319
4431
  // store closeButton Element
4320
4432
  this.closeButtonElement = el;
@@ -4325,6 +4437,7 @@ const MgModal = class {
4325
4437
  }
4326
4438
  get element() { return index.getElement(this); }
4327
4439
  static get watchers() { return {
4440
+ "dialogRole": ["validateDialogRole"],
4328
4441
  "modalTitle": ["validateModalTitle"],
4329
4442
  "hide": ["validateHide"]
4330
4443
  }; }
@@ -4529,7 +4642,7 @@ const MgPanel = class {
4529
4642
  * Render input button
4530
4643
  * @returns edit title input
4531
4644
  */
4532
- this.renderEditInput = () => (index.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) }, index.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` }, index.h("mg-icon", { icon: "cross" })), index.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` }, index.h("mg-icon", { icon: "check" }))));
4645
+ this.renderEditInput = () => (index.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) }, index.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` }, index.h("mg-icon", { icon: "cross" })), index.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` }, index.h("mg-icon", { icon: "check" }))));
4533
4646
  /**
4534
4647
  * Render title
4535
4648
  * @returns title element
@@ -6431,24 +6544,19 @@ var createPopper = /*#__PURE__*/popperGenerator({
6431
6544
  defaultModifiers: defaultModifiers
6432
6545
  }); // eslint-disable-next-line import/no-unused-modules
6433
6546
 
6434
- 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}.mg-popover{display:none;padding:1rem;z-index:2000;color:hsl(var(--mg-popover-font-color))}.mg-popover mg-card{--mg-card-max-width:var(--mg-popover-max-width);--mg-card-min-width:var(--mg-popover-min-width);position:relative}.mg-popover[data-show]{display:block}.mg-popover 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__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)}.mg-popover__arrow:before{visibility:visible;content:\"\";position:absolute}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow,.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow{height:1rem}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow:before{left:calc(var(--mg-card-border-radius) + 1rem);border-right:calc(3rem / 2) solid transparent;border-left:calc(3rem / 2) solid transparent}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow{bottom:0.1rem;filter:drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow:before{border-top:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow{top:0.1rem;filter:drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow:before{border-bottom:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow,.mg-popover[data-popper-placement^=right]>.mg-popover__arrow{width:1rem}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=right]>.mg-popover__arrow:before{top:calc(var(--mg-card-border-radius) + 1rem);border-top:calc(3rem / 2) solid transparent;border-bottom:calc(3rem / 2) solid transparent}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow{right:0.1rem;filter:drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow:before{border-left:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=right]>.mg-popover__arrow{left:0.1rem;filter:drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=right]>.mg-popover__arrow:before{border-right:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=left-start],.mg-popover[data-popper-placement^=left-end],.mg-popover[data-popper-placement^=right-start],.mg-popover[data-popper-placement^=right-end]{padding:0 1rem}.mg-popover[data-popper-placement^=left-start]>.mg-popover__arrow,.mg-popover[data-popper-placement^=left-end]>.mg-popover__arrow,.mg-popover[data-popper-placement^=right-start]>.mg-popover__arrow,.mg-popover[data-popper-placement^=right-end]>.mg-popover__arrow{height:calc(3rem + 2 * var(--mg-card-border-radius))}.mg-popover[data-popper-placement^=left-start]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=left-end]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=right-start]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=right-end]>.mg-popover__arrow:before{top:var(--mg-card-border-radius)}.mg-popover__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600}.mg-popover--arrow-hide.mg-popover[data-popper-placement^=top]{padding-bottom:0}.mg-popover--arrow-hide.mg-popover[data-popper-placement^=bottom]{padding-top:0}.mg-popover--arrow-hide.mg-popover[data-popper-placement$=end],.mg-popover--arrow-hide.mg-popover[data-popper-placement^=left]{padding-right:0}.mg-popover--arrow-hide.mg-popover[data-popper-placement$=start],.mg-popover--arrow-hide.mg-popover[data-popper-placement^=right]{padding-left:0}.mg-popover ::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}";
6547
+ 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}";
6435
6548
 
6436
6549
  const MgPopover = class {
6437
6550
  constructor(hostRef) {
6438
6551
  index.registerInstance(this, hostRef);
6439
6552
  this.displayChange = index.createEvent(this, "display-change", 7);
6440
- this.closeButtonId = '';
6441
- // Classes
6442
- this.classArrowHide = `mg-popover--arrow-hide`;
6443
6553
  /**
6444
6554
  * Check if clicked outside of component
6445
6555
  * @param event - mouse event
6446
6556
  */
6447
6557
  this.clickOutside = (event) => {
6448
- var _a;
6449
- if (!this.disabled &&
6450
- event.target.closest('mg-popover') !== this.element &&
6451
- !(((_a = event.target.closest(`[data-mg-popover-guard]`)) === null || _a === void 0 ? void 0 : _a.dataset.mgPopoverGuard) === this.identifier)) {
6558
+ const closestElement = event.target.closest(`[data-mg-popover-guard]`);
6559
+ if (!this.disabled && event.target.closest('mg-popover') !== this.element && (closestElement === null || closestElement === void 0 ? void 0 : closestElement.dataset.mgPopoverGuard) !== this.identifier) {
6452
6560
  this.display = false;
6453
6561
  }
6454
6562
  };
@@ -6482,24 +6590,46 @@ const MgPopover = class {
6482
6590
  });
6483
6591
  };
6484
6592
  /**
6485
- * Handle action for close button
6593
+ * Handle content hide event
6486
6594
  */
6487
- this.handleCloseButton = () => {
6595
+ this.handleHideContent = () => {
6488
6596
  this.display = false;
6489
6597
  };
6598
+ /**
6599
+ * Render popover content element
6600
+ */
6601
+ this.renderPopoverContent = () => {
6602
+ this.mgPopoverContent = document.createElement('mg-popover-content');
6603
+ this.mgPopoverContent.setAttribute('slot', 'content');
6604
+ this.mgPopoverContent.setAttribute('id', this.identifier);
6605
+ this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
6606
+ const arrow = document.createElement('div');
6607
+ arrow.setAttribute('slot', 'arrow');
6608
+ arrow.dataset.popperArrow = '';
6609
+ this.mgPopoverContent.appendChild(arrow);
6610
+ // insert elements in DOM
6611
+ ['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
6612
+ Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
6613
+ this.mgPopoverContent.appendChild(slot);
6614
+ });
6615
+ });
6616
+ this.element.appendChild(this.mgPopoverContent);
6617
+ };
6490
6618
  this.identifier = createID('mg-popover');
6491
6619
  this.placement = 'bottom';
6492
6620
  this.arrowHide = false;
6493
6621
  this.closeButton = false;
6494
6622
  this.display = false;
6495
6623
  this.disabled = false;
6496
- this.classCollection = new ClassList(['mg-popover']);
6497
6624
  }
6498
6625
  validateArrowHide(newValue) {
6499
6626
  if (newValue)
6500
- this.classCollection.add(this.classArrowHide);
6627
+ this.mgPopoverContent.dataset.arrowHide = '';
6501
6628
  else
6502
- this.classCollection.delete(this.classArrowHide);
6629
+ delete this.mgPopoverContent.dataset.arrowHide;
6630
+ }
6631
+ validateCloseButton(newValue) {
6632
+ this.mgPopoverContent.closeButton = newValue;
6503
6633
  }
6504
6634
  handleDisplay(newValue) {
6505
6635
  if (newValue) {
@@ -6525,25 +6655,17 @@ const MgPopover = class {
6525
6655
  componentWillLoad() {
6526
6656
  // Get windows to attach events
6527
6657
  this.windows = getWindows(window);
6528
- // Get locales
6529
- this.messages = mgMenu_conf.initLocales(this.element).messages;
6658
+ // render mg-popover-content slot
6659
+ this.renderPopoverContent();
6660
+ this.validateCloseButton(this.closeButton);
6530
6661
  this.validateArrowHide(this.arrowHide);
6531
6662
  }
6532
6663
  /**
6533
6664
  * Check if component props are well configured on init
6534
6665
  */
6535
6666
  componentDidLoad() {
6536
- const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
6537
- const slottedTitleElement = this.element.querySelector('[slot="title"]');
6538
- if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {
6539
- throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
6540
- }
6541
- // Set close button id
6542
- if (this.closeButton) {
6543
- this.closeButtonId = `${this.identifier}-close-button`;
6544
- }
6545
6667
  // Get popover content
6546
- this.mgPopover = this.element.shadowRoot.getElementById(this.identifier);
6668
+ this.mgPopover = this.element.querySelector(`#${this.identifier}`);
6547
6669
  //Get interactive element (first element without slot attribute)
6548
6670
  const interactiveElement = this.element.querySelector(':not([slot])');
6549
6671
  // Add aria attributes
@@ -6562,17 +6684,10 @@ const MgPopover = class {
6562
6684
  },
6563
6685
  ],
6564
6686
  });
6565
- if (this.resizeObserver === undefined) {
6566
- // add resize observer
6567
- this.resizeObserver = new ResizeObserver(entries => {
6568
- if (entries.some(entrie => entrie.target.getAttribute('slot') !== null)) {
6569
- this.popper.update();
6570
- }
6571
- });
6572
- Array.from(this.element.querySelectorAll('[slot]')).forEach(element => {
6573
- this.resizeObserver.observe(element);
6574
- });
6575
- }
6687
+ // add resize observer
6688
+ new ResizeObserver(() => {
6689
+ this.popper.update();
6690
+ }).observe(this.element.querySelector('mg-popover-content'));
6576
6691
  // Add events to toggle display
6577
6692
  interactiveElement.addEventListener('click', () => {
6578
6693
  if (!this.disabled)
@@ -6592,16 +6707,63 @@ const MgPopover = class {
6592
6707
  * @returns HTML Element
6593
6708
  */
6594
6709
  render() {
6595
- return (index.h(index.Host, null, index.h("slot", null), index.h("div", { id: this.identifier, class: this.classCollection.join() }, index.h("mg-card", null, this.closeButton && (index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { icon: "cross" }))), index.h("div", { class: "mg-popover__title" }, index.h("slot", { name: "title" })), index.h("slot", { name: "content" })), !this.arrowHide && index.h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
6710
+ return (index.h(index.Host, null, index.h("slot", null), index.h("slot", { name: "content" })));
6596
6711
  }
6597
6712
  get element() { return index.getElement(this); }
6598
6713
  static get watchers() { return {
6599
6714
  "arrowHide": ["validateArrowHide"],
6715
+ "closeButton": ["validateCloseButton"],
6600
6716
  "display": ["handleDisplay"]
6601
6717
  }; }
6602
6718
  };
6603
6719
  MgPopover.style = mgPopoverCss;
6604
6720
 
6721
+ 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)}";
6722
+
6723
+ const MgPopoverContent = class {
6724
+ constructor(hostRef) {
6725
+ index.registerInstance(this, hostRef);
6726
+ this.hideContent = index.createEvent(this, "hide-content", 7);
6727
+ /**
6728
+ * Handle action for close button
6729
+ */
6730
+ this.handleCloseButton = () => {
6731
+ this.hideContent.emit();
6732
+ };
6733
+ this.closeButton = false;
6734
+ this.classCollection = new ClassList(['mg-popover-content']);
6735
+ }
6736
+ /*************
6737
+ * Lifecycle *
6738
+ *************/
6739
+ /**
6740
+ * Check if component props are valide
6741
+ */
6742
+ componentWillLoad() {
6743
+ // Get locales
6744
+ this.messages = mgMenu_conf.initLocales(this.element).messages;
6745
+ }
6746
+ /**
6747
+ * Check if component slots are valide
6748
+ */
6749
+ componentDidLoad() {
6750
+ const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
6751
+ const slottedTitleElement = this.element.querySelector('[slot="title"]');
6752
+ if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {
6753
+ throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
6754
+ }
6755
+ }
6756
+ /**
6757
+ * Render
6758
+ * @returns HTML Element
6759
+ */
6760
+ render() {
6761
+ return (index.h(index.Host, null, index.h("mg-card", { class: this.classCollection.join() }, this.closeButton && (index.h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { icon: "cross" }))), index.h("div", { class: "mg-popover-content__title" }, index.h("slot", { name: "title" })), index.h("slot", { name: "content" })), index.h("slot", { name: "arrow" })));
6762
+ }
6763
+ get element() { return index.getElement(this); }
6764
+ };
6765
+ MgPopoverContent.style = mgPopoverContentCss;
6766
+
6605
6767
  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)}";
6606
6768
 
6607
6769
  const MgSkipLinks = class {
@@ -6985,8 +7147,14 @@ var Guard;
6985
7147
  Guard["HOVER_TOOLTIPED_ELEMENT"] = "hoverTooltipedGuard";
6986
7148
  })(Guard || (Guard = {}));
6987
7149
 
6988
- const mgTooltipCss = ":host{display:inline-block}.mg-tooltip{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}.mg-tooltip[data-show]{display:block}.mg-tooltip .mg-tooltip__arrow,.mg-tooltip .mg-tooltip__arrow::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background:inherit}.mg-tooltip .mg-tooltip__arrow{visibility:hidden}.mg-tooltip .mg-tooltip__arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-tooltip[data-popper-placement^=top]>.mg-tooltip__arrow{bottom:-4px}.mg-tooltip[data-popper-placement^=bottom]>.mg-tooltip__arrow{top:-4px}.mg-tooltip[data-popper-placement^=left]>.mg-tooltip__arrow{right:-4px}.mg-tooltip[data-popper-placement^=right]>.mg-tooltip__arrow{left:-4px}";
7150
+ const mgTooltipCss = ":host{display:inline-block}";
6989
7151
 
7152
+ /**
7153
+ * HTMLMgButtonElement type guard
7154
+ * @param element - element to check
7155
+ * @returns return true if type is HTMLMgButtonElement
7156
+ */
7157
+ const isButton = (element) => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes(element.tagName);
6990
7158
  const MgTooltip = class {
6991
7159
  constructor(hostRef) {
6992
7160
  index.registerInstance(this, hostRef);
@@ -6995,7 +7163,7 @@ const MgTooltip = class {
6995
7163
  */
6996
7164
  this.show = () => {
6997
7165
  // Make the tooltip visible
6998
- this.tooltip.dataset.show = '';
7166
+ this.mgTooltipContent.dataset.show = '';
6999
7167
  // Enable the event listeners
7000
7168
  this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
7001
7169
  // hide when click outside
@@ -7012,7 +7180,7 @@ const MgTooltip = class {
7012
7180
  */
7013
7181
  this.hide = () => {
7014
7182
  // Hide the tooltip
7015
- this.tooltip.removeAttribute('data-show');
7183
+ this.mgTooltipContent.removeAttribute('data-show');
7016
7184
  // Disable the event listeners
7017
7185
  this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
7018
7186
  // Remove event listener
@@ -7099,8 +7267,12 @@ const MgTooltip = class {
7099
7267
  */
7100
7268
  this.initTooltip = (slotElement, interactiveElement) => {
7101
7269
  // Add tabindex to slotted element if we can't find any interactive element
7102
- if (interactiveElement === null || interactiveElement === undefined)
7270
+ if (!this.disabled && !Boolean(interactiveElement)) {
7271
+ this.hasCustomTabIndex = true;
7103
7272
  slotElement.tabIndex = 0;
7273
+ // Add role on non-interactive element to work with "aria-describedby" for screen readers
7274
+ slotElement.setAttribute('role', 'button');
7275
+ }
7104
7276
  // Set aria-describedby
7105
7277
  const ariaDescribedby = slotElement.getAttribute('aria-describedby');
7106
7278
  if (ariaDescribedby === null) {
@@ -7111,7 +7283,7 @@ const MgTooltip = class {
7111
7283
  slotElement.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);
7112
7284
  }
7113
7285
  // Create popperjs tooltip
7114
- this.popper = createPopper(this.tooltipedElement, this.tooltip, {
7286
+ this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {
7115
7287
  placement: this.placement,
7116
7288
  strategy: 'fixed',
7117
7289
  modifiers: [
@@ -7128,6 +7300,12 @@ const MgTooltip = class {
7128
7300
  this.guard = Guard.FOCUS;
7129
7301
  this.setDisplay(true);
7130
7302
  });
7303
+ // as `click` event is the composition of `mousedown` and `mouseup` event,
7304
+ // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`
7305
+ // we reset the guard on `mouseup` event to unlock tooltip
7306
+ this.tooltipedElement.addEventListener('mouseup', () => {
7307
+ this.resetGuard();
7308
+ });
7131
7309
  this.tooltipedElement.addEventListener('blur', () => {
7132
7310
  this.resetGuard();
7133
7311
  this.setDisplay(false);
@@ -7137,7 +7315,7 @@ const MgTooltip = class {
7137
7315
  ['mouseenter', 'mouseleave'].forEach(eventType => {
7138
7316
  const isMouseenter = eventType === 'mouseenter';
7139
7317
  [
7140
- { element: this.tooltip, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
7318
+ { element: this.mgTooltipContent, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
7141
7319
  { element: this.tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },
7142
7320
  ].forEach(({ element, action }) => {
7143
7321
  element.addEventListener(eventType, () => {
@@ -7156,6 +7334,7 @@ const MgTooltip = class {
7156
7334
  if (typeof newValue !== 'string' || newValue.trim() === '') {
7157
7335
  throw new Error('<mg-tooltip> prop "message" is required.');
7158
7336
  }
7337
+ this.mgTooltipContent.message = newValue;
7159
7338
  }
7160
7339
  handleDisplay(newValue) {
7161
7340
  if (newValue) {
@@ -7165,6 +7344,28 @@ const MgTooltip = class {
7165
7344
  this.hide();
7166
7345
  }
7167
7346
  }
7347
+ validateDisabled(newValue) {
7348
+ if (this.hasCustomTabIndex) {
7349
+ if (newValue)
7350
+ this.tooltipedElement.removeAttribute('tabindex');
7351
+ else if (this.tooltipedElement.getAttribute('tabindex') === null)
7352
+ this.tooltipedElement.setAttribute('tabindex', '0');
7353
+ }
7354
+ }
7355
+ /**
7356
+ * Render tooltip content element
7357
+ */
7358
+ renderTooltip() {
7359
+ const mgTooltipContent = document.createElement('mg-tooltip-content');
7360
+ mgTooltipContent.setAttribute('slot', 'content');
7361
+ mgTooltipContent.setAttribute('id', this.identifier);
7362
+ const arrow = document.createElement('div');
7363
+ arrow.setAttribute('slot', 'arrow');
7364
+ arrow.dataset.popperArrow = '';
7365
+ mgTooltipContent.appendChild(arrow);
7366
+ // append tooltip element to component
7367
+ this.element.appendChild(mgTooltipContent);
7368
+ }
7168
7369
  /*************
7169
7370
  * Lifecycle *
7170
7371
  *************/
@@ -7174,6 +7375,12 @@ const MgTooltip = class {
7174
7375
  componentWillLoad() {
7175
7376
  // Get windows to attach events
7176
7377
  this.windows = getWindows(window);
7378
+ // Get tooltip element
7379
+ this.renderTooltip();
7380
+ this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
7381
+ //validate properties
7382
+ this.validateDisabled(this.disabled);
7383
+ this.validateMessage(this.message);
7177
7384
  }
7178
7385
  /**
7179
7386
  * Get slotted element
@@ -7182,17 +7389,15 @@ const MgTooltip = class {
7182
7389
  */
7183
7390
  componentDidLoad() {
7184
7391
  var _a;
7185
- // Get tooltip element
7186
- this.tooltip = this.element.shadowRoot.querySelector(`#${this.identifier}`);
7187
- // get slotted element
7188
- const slotElement = this.element.firstElementChild;
7392
+ // get slotted element wich is not the tooltip
7393
+ const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
7189
7394
  // Get interactive element
7190
7395
  const interactiveElement = slotElement.matches(focusableElements) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(focusableElements);
7191
7396
  // define selected element to become tooltip selector
7192
7397
  this.tooltipedElement = interactiveElement || slotElement;
7193
7398
  // Check if slotted element is a disabled mg-button
7194
7399
  // In this case we wrap the mg-button into a div to enable the tooltip
7195
- if (['MG-BUTTON', 'BUTTON'].includes(slotElement.tagName)) {
7400
+ if (isButton(slotElement)) {
7196
7401
  new MutationObserver(mutationList => {
7197
7402
  if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) {
7198
7403
  this.setMgButtonWrapper(slotElement);
@@ -7207,7 +7412,6 @@ const MgTooltip = class {
7207
7412
  // Init Tooltip
7208
7413
  this.initTooltip(slotElement, interactiveElement);
7209
7414
  this.handleDisplay(this.display);
7210
- this.validateMessage(this.message);
7211
7415
  }
7212
7416
  /**
7213
7417
  * update popper position after props change on component did update hook to benefit from render ended
@@ -7220,16 +7424,37 @@ const MgTooltip = class {
7220
7424
  * @returns HTML Element
7221
7425
  */
7222
7426
  render() {
7223
- return (index.h(index.Host, null, index.h("slot", null), index.h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip" }, index.h("span", { innerHTML: this.message }), index.h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
7427
+ return (index.h(index.Host, null, index.h("slot", null), index.h("slot", { name: "content" })));
7224
7428
  }
7225
7429
  get element() { return index.getElement(this); }
7226
7430
  static get watchers() { return {
7227
7431
  "message": ["validateMessage"],
7228
- "display": ["handleDisplay"]
7432
+ "display": ["handleDisplay"],
7433
+ "disabled": ["validateDisabled"]
7229
7434
  }; }
7230
7435
  };
7231
7436
  MgTooltip.style = mgTooltipCss;
7232
7437
 
7438
+ 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}";
7439
+
7440
+ const MgTooltipContent = class {
7441
+ constructor(hostRef) {
7442
+ index.registerInstance(this, hostRef);
7443
+ this.message = undefined;
7444
+ }
7445
+ /*************
7446
+ * Lifecycle *
7447
+ *************/
7448
+ /**
7449
+ * Render
7450
+ * @returns HTML Element
7451
+ */
7452
+ render() {
7453
+ return (index.h(index.Host, { role: "tooltip" }, index.h("span", { innerHTML: this.message, class: "mg-tooltip-content__message" }), index.h("slot", { name: "arrow" })));
7454
+ }
7455
+ };
7456
+ MgTooltipContent.style = mgTooltipContentCss;
7457
+
7233
7458
  exports.mg_action_more = MgActionMore;
7234
7459
  exports.mg_badge = MgBadge;
7235
7460
  exports.mg_button = MgButton;
@@ -7258,7 +7483,9 @@ exports.mg_modal = MgModal;
7258
7483
  exports.mg_pagination = MgPagination;
7259
7484
  exports.mg_panel = MgPanel;
7260
7485
  exports.mg_popover = MgPopover;
7486
+ exports.mg_popover_content = MgPopoverContent;
7261
7487
  exports.mg_skip_links = MgSkipLinks;
7262
7488
  exports.mg_tabs = MgTabs;
7263
7489
  exports.mg_tag = MgTag;
7264
7490
  exports.mg_tooltip = MgTooltip;
7491
+ exports.mg_tooltip_content = MgTooltipContent;