@mgdis/mg-components 6.20.0 → 6.22.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 (205) hide show
  1. package/dist/cjs/{index-TUElr4Wv.js → index-BxB20_Vw.js} +54 -0
  2. package/dist/cjs/{index-Bp6wZzau.js → index-C2viYwrR.js} +1761 -80
  3. package/dist/cjs/loader.cjs.js +2 -2
  4. package/dist/cjs/mg-action-more_37.cjs.entry.js +761 -371
  5. package/dist/cjs/mg-alert.cjs.entry.js +17 -9
  6. package/dist/cjs/mg-breadcrumb.cjs.entry.js +63 -0
  7. package/dist/cjs/mg-components.cjs.js +3 -3
  8. package/dist/cjs/mg-fieldset.cjs.entry.js +24 -7
  9. package/dist/cjs/mg-input-combobox.cjs.entry.js +49 -19
  10. package/dist/cjs/mg-input-file.cjs.entry.js +384 -0
  11. package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +40096 -15821
  12. package/dist/cjs/{mg-input.conf-D7jmj_lh.js → mg-input.conf-BNpeATnq.js} +7 -0
  13. package/dist/cjs/mg-loader.cjs.entry.js +8 -6
  14. package/dist/cjs/mg-progress.cjs.entry.js +19 -9
  15. package/dist/collection/assets/icons/index.js +1 -1
  16. package/dist/collection/collection-manifest.json +5 -3
  17. package/dist/collection/components/atoms/internals/mg-character-left/mg-character-left.js +1 -1
  18. package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js +1 -1
  19. package/dist/collection/components/atoms/mg-card/mg-card.js +1 -1
  20. package/dist/collection/components/atoms/mg-divider/mg-divider.js +1 -1
  21. package/dist/collection/components/atoms/mg-icon/mg-icon.js +2 -2
  22. package/dist/collection/components/atoms/mg-tag/mg-tag.js +1 -1
  23. package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js +1 -1
  24. package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +1 -1
  25. package/dist/collection/components/molecules/inputs/mg-input/mg-input.conf.js +6 -0
  26. package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +1 -1
  27. package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js +2 -2
  28. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js +2 -2
  29. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +1 -1
  30. package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js +1 -1
  31. package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +1 -1
  32. package/dist/collection/components/molecules/inputs/mg-input-file/mg-input-file.js +877 -0
  33. package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +1 -1
  34. package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +2 -2
  35. package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +1 -1
  36. package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/custom-properties.scss +212 -0
  37. package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.conf.js +1 -0
  38. package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/index.js +300 -94
  39. package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.conf.js +29 -0
  40. package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +163 -53
  41. package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +1 -1
  42. package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +2 -2
  43. package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +1 -1
  44. package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +1 -1
  45. package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js +3 -36
  46. package/dist/collection/components/molecules/menus/mg-menu/mg-menu.conf.js +0 -4
  47. package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js +21 -43
  48. package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js +65 -38
  49. package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +2 -2
  50. package/dist/collection/components/molecules/mg-alert/mg-alert.js +1 -1
  51. package/dist/collection/components/molecules/mg-breadcrumb/mg-breadcrumb.conf.js +1 -0
  52. package/dist/collection/components/molecules/mg-breadcrumb/mg-breadcrumb.js +92 -0
  53. package/dist/collection/components/molecules/mg-details/mg-details.js +1 -1
  54. package/dist/collection/components/molecules/mg-fieldset/mg-fieldset.js +12 -3
  55. package/dist/collection/components/molecules/mg-form/mg-form.js +12 -2
  56. package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +1 -1
  57. package/dist/collection/components/molecules/mg-loader/mg-loader.js +1 -1
  58. package/dist/collection/components/molecules/mg-message/mg-message.js +2 -2
  59. package/dist/collection/components/molecules/mg-modal/mg-modal.js +2 -2
  60. package/dist/collection/components/molecules/mg-panel/mg-panel.js +1 -1
  61. package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js +1 -1
  62. package/dist/collection/components/molecules/mg-popover/mg-popover.js +1 -1
  63. package/dist/collection/components/molecules/mg-progress/mg-progress.js +1 -1
  64. package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -1
  65. package/dist/collection/components/molecules/mg-table/mg-table.js +37 -0
  66. package/dist/collection/components/molecules/mg-tabs/mg-tabs.conf.js +0 -4
  67. package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +13 -33
  68. package/dist/collection/locales/en/messages.json +14 -0
  69. package/dist/collection/locales/fr/messages.json +14 -0
  70. package/dist/components/events.utils.js +1 -23
  71. package/dist/components/index.d.ts +2 -0
  72. package/dist/components/index.js +1 -1
  73. package/dist/components/index2.js +1 -408
  74. package/dist/components/index3.js +1 -476
  75. package/dist/components/mg-action-more.js +1 -254
  76. package/dist/components/mg-alert.js +1 -224
  77. package/dist/components/mg-badge.js +1 -6
  78. package/dist/components/mg-badge2.js +1 -113
  79. package/dist/components/mg-breadcrumb.d.ts +11 -0
  80. package/dist/components/mg-breadcrumb.js +1 -0
  81. package/dist/components/mg-button.js +1 -6
  82. package/dist/components/mg-button2.js +1 -275
  83. package/dist/components/mg-card.js +1 -6
  84. package/dist/components/mg-card2.js +1 -92
  85. package/dist/components/mg-character-left.js +1 -6
  86. package/dist/components/mg-character-left2.js +1 -75
  87. package/dist/components/mg-details.js +1 -104
  88. package/dist/components/mg-divider.js +1 -6
  89. package/dist/components/mg-divider2.js +1 -49
  90. package/dist/components/mg-fieldset.js +1 -209
  91. package/dist/components/mg-form.js +1 -302
  92. package/dist/components/mg-icon.js +1 -6
  93. package/dist/components/mg-icon2.js +1 -188
  94. package/dist/components/mg-illustrated-message.js +1 -129
  95. package/dist/components/mg-input-checkbox-paginated.js +1 -6
  96. package/dist/components/mg-input-checkbox-paginated2.js +1 -135
  97. package/dist/components/mg-input-checkbox.js +1 -762
  98. package/dist/components/mg-input-combobox.js +1 -940
  99. package/dist/components/mg-input-date.js +1 -463
  100. package/dist/components/mg-input-file.d.ts +11 -0
  101. package/dist/components/mg-input-file.js +1 -0
  102. package/dist/components/mg-input-numeric.js +1 -592
  103. package/dist/components/mg-input-password.js +1 -360
  104. package/dist/components/mg-input-radio.js +1 -392
  105. package/dist/components/mg-input-rich-text-editor.js +1663 -16797
  106. package/dist/components/mg-input-select.js +1 -6
  107. package/dist/components/mg-input-select2.js +1 -481
  108. package/dist/components/mg-input-text.js +1 -6
  109. package/dist/components/mg-input-text2.js +1 -514
  110. package/dist/components/mg-input-textarea.js +1 -412
  111. package/dist/components/mg-input-title.js +1 -6
  112. package/dist/components/mg-input-title2.js +1 -81
  113. package/dist/components/mg-input-toggle.js +1 -371
  114. package/dist/components/mg-input.conf.js +1 -0
  115. package/dist/components/mg-input.js +1 -6
  116. package/dist/components/mg-input2.js +1 -459
  117. package/dist/components/mg-item-more.js +1 -6
  118. package/dist/components/mg-item-more2.js +1 -505
  119. package/dist/components/mg-loader.js +1 -6
  120. package/dist/components/mg-loader2.js +1 -74
  121. package/dist/components/mg-menu-item.js +1 -6
  122. package/dist/components/mg-menu-item2.js +1 -485
  123. package/dist/components/mg-menu.js +1 -6
  124. package/dist/components/mg-message.js +1 -6
  125. package/dist/components/mg-message2.js +1 -146
  126. package/dist/components/mg-modal.js +1 -184
  127. package/dist/components/mg-pagination.js +1 -234
  128. package/dist/components/mg-panel.js +1 -350
  129. package/dist/components/mg-popover-content.js +1 -6
  130. package/dist/components/mg-popover-content2.js +1 -96
  131. package/dist/components/mg-popover.js +1 -6
  132. package/dist/components/mg-popover2.js +1 -312
  133. package/dist/components/mg-progress.js +1 -123
  134. package/dist/components/mg-skip-links.js +1 -78
  135. package/dist/components/mg-table.js +1 -319
  136. package/dist/components/mg-tabs.js +1 -6
  137. package/dist/components/mg-tabs2.js +1 -315
  138. package/dist/components/mg-tag.js +1 -133
  139. package/dist/components/mg-tooltip-content.js +1 -6
  140. package/dist/components/mg-tooltip-content2.js +1 -42
  141. package/dist/components/mg-tooltip.js +1 -6
  142. package/dist/components/mg-tooltip2.js +1 -421
  143. package/dist/components/popper.js +1 -1790
  144. package/dist/esm/{index-BluNKQ3L.js → index-DFwaH2hS.js} +1761 -80
  145. package/dist/esm/{index-CNX6lq0x.js → index-DSEloqPn.js} +54 -1
  146. package/dist/esm/loader.js +3 -3
  147. package/dist/esm/mg-action-more_37.entry.js +761 -371
  148. package/dist/esm/mg-alert.entry.js +17 -9
  149. package/dist/esm/mg-breadcrumb.entry.js +61 -0
  150. package/dist/esm/mg-components.js +4 -4
  151. package/dist/esm/mg-fieldset.entry.js +24 -7
  152. package/dist/esm/mg-input-combobox.entry.js +49 -19
  153. package/dist/esm/mg-input-file.entry.js +382 -0
  154. package/dist/esm/mg-input-rich-text-editor.entry.js +40083 -15808
  155. package/dist/esm/{mg-input.conf-DDnrE1hD.js → mg-input.conf-C9rmNQIL.js} +7 -1
  156. package/dist/esm/mg-loader.entry.js +8 -6
  157. package/dist/esm/mg-progress.entry.js +19 -9
  158. package/dist/mg-components/locales/en/messages.json +14 -0
  159. package/dist/mg-components/locales/fr/messages.json +14 -0
  160. package/dist/mg-components/mg-components.esm.js +1 -1
  161. package/dist/mg-components/p-0482eb9f.entry.js +1 -0
  162. package/dist/mg-components/{p-7132bca1.entry.js → p-2ee92f38.entry.js} +1 -1
  163. package/dist/mg-components/{p-916dfb6d.entry.js → p-3b653226.entry.js} +1 -1
  164. package/dist/mg-components/p-5745fbea.entry.js +1 -0
  165. package/dist/mg-components/p-C9rmNQIL.js +1 -0
  166. package/dist/mg-components/p-DFwaH2hS.js +2 -0
  167. package/dist/mg-components/p-DSEloqPn.js +1 -0
  168. package/dist/mg-components/p-adec7fcc.entry.js +1 -0
  169. package/dist/mg-components/p-c63f97f0.entry.js +1658 -0
  170. package/dist/mg-components/p-c8c8cfc1.entry.js +1 -0
  171. package/dist/mg-components/p-cc793586.entry.js +1 -0
  172. package/dist/mg-components/p-d5e69c95.entry.js +1 -0
  173. package/dist/types/assets/icons/index.d.ts +2 -0
  174. package/dist/types/components/molecules/inputs/mg-input/mg-input.conf.d.ts +7 -1
  175. package/dist/types/components/molecules/inputs/mg-input-file/mg-input-file.d.ts +210 -0
  176. package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.conf.d.ts +17 -0
  177. package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/editor/index.d.ts +27 -19
  178. package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.conf.d.ts +3 -0
  179. package/dist/types/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.d.ts +50 -16
  180. package/dist/types/components/molecules/internals/mg-item-more/mg-item-more.conf.d.ts +0 -5
  181. package/dist/types/components/molecules/internals/mg-item-more/mg-item-more.d.ts +1 -6
  182. package/dist/types/components/molecules/menus/mg-menu/mg-menu.conf.d.ts +2 -10
  183. package/dist/types/components/molecules/menus/mg-menu/mg-menu.d.ts +7 -7
  184. package/dist/types/components/molecules/menus/mg-menu-item/mg-menu-item.d.ts +12 -8
  185. package/dist/types/components/molecules/mg-breadcrumb/mg-breadcrumb.conf.d.ts +18 -0
  186. package/dist/types/components/molecules/mg-breadcrumb/mg-breadcrumb.d.ts +34 -0
  187. package/dist/types/components/molecules/mg-table/mg-table.d.ts +6 -0
  188. package/dist/types/components/molecules/mg-tabs/mg-tabs.conf.d.ts +1 -9
  189. package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts +4 -4
  190. package/dist/types/components.d.ts +302 -46
  191. package/dist/types/stencil-public-runtime.d.ts +76 -12
  192. package/ide/intellij/web-types.json +483 -51
  193. package/ide/vscode/css-custom-data.json +10 -2
  194. package/ide/vscode/html-custom-data.json +445 -104
  195. package/package.json +24 -23
  196. package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.scss +0 -1
  197. package/dist/mg-components/p-016bd291.entry.js +0 -1
  198. package/dist/mg-components/p-186a6139.entry.js +0 -1
  199. package/dist/mg-components/p-BluNKQ3L.js +0 -2
  200. package/dist/mg-components/p-CNX6lq0x.js +0 -1
  201. package/dist/mg-components/p-DDnrE1hD.js +0 -1
  202. package/dist/mg-components/p-cd061b38.entry.js +0 -1
  203. package/dist/mg-components/p-d2c72f09.entry.js +0 -1
  204. package/dist/mg-components/p-d5a276eb.entry.js +0 -1
  205. package/ide/vscode/custom.css-data.json +0 -425
@@ -2,17 +2,25 @@ import { h } from "@stencil/core";
2
2
  import { ClassList, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
3
3
  import { classReadonly, classDisabled } from "../mg-input/mg-input.conf";
4
4
  import { initLocales } from "../../../../locales";
5
+ import { Sanitizer } from "@mgdis/sanitize-html";
5
6
  import { defineEditor } from "./editor";
7
+ import { DEFAULT_MODULES } from "./mg-input-rich-text-editor.conf";
6
8
  export class MgInputRichTextEditor {
7
9
  constructor() {
8
10
  // hasDisplayedError (triggered by blur event)
9
11
  this.hasDisplayedError = false;
12
+ // Custom error message
10
13
  this.customErrorMessage = { lock: false };
11
14
  /**
12
15
  * Define the value of the editor
13
16
  * Can be either HTML string or plain text
14
17
  */
15
18
  this.value = '';
19
+ /**
20
+ * Input name
21
+ * If not set the value equals the identifier
22
+ */
23
+ this.name = this.identifier;
16
24
  /**
17
25
  * Define if label is displayed on top
18
26
  */
@@ -22,7 +30,8 @@ export class MgInputRichTextEditor {
22
30
  */
23
31
  this.labelHide = false;
24
32
  /**
25
- * Define the number of visible text lines for the control
33
+ * Define the number of visible text lines for the editor.
34
+ * Impacts the editor height. Content can grow beyond this minimum.
26
35
  */
27
36
  this.rows = 5;
28
37
  /**
@@ -50,19 +59,19 @@ export class MgInputRichTextEditor {
50
59
  * @returns truthy is value is invalid
51
60
  */
52
61
  this.isEmpty = () => {
53
- const textContent = this.getTextContent();
62
+ const textContent = this.editor.editor.textContent.trim();
54
63
  return !(isValidString(textContent) && textContent !== '\n');
55
64
  };
56
- /**
57
- * Extract the text without HTML tags from value
58
- * @returns text content
59
- */
60
- this.getTextContent = () => this.value.replace(/<[^>]*>/g, '').trim();
61
65
  /**
62
66
  * Get pattern validity
63
67
  * @returns is pattern valid
64
68
  */
65
- this.getPatternValidity = () => this.pattern === undefined || new RegExp(`^${this.pattern}$`, 'u').test(this.getTextContent());
69
+ this.getPatternValidity = () => {
70
+ if (this.pattern === undefined)
71
+ return true;
72
+ const textContent = this.editor.editor.textContent.trim();
73
+ return new RegExp(`^${this.pattern}$`, 'u').test(textContent);
74
+ };
66
75
  /**
67
76
  * Check if input is valid
68
77
  */
@@ -115,17 +124,22 @@ export class MgInputRichTextEditor {
115
124
  * Handle `text-change` event
116
125
  */
117
126
  this.handleTextChange = () => {
118
- // Get HTML content
119
- const htmlContent = this.editor.getSemanticHTML();
120
- this.value = htmlContent;
121
- // Emit the HTML content for form compatibility
122
- this.valueChange.emit(htmlContent);
127
+ // Get HTML content and sanitize before storing and emitting
128
+ this.value = this.sanitizer.sanitize(this.editor.value);
129
+ // Emit the sanitized HTML content for form compatibility
130
+ this.valueChange.emit(this.value);
123
131
  // Check validity but do not display the error message if the error message is already displayed
124
132
  this.checkValidity();
125
133
  if (this.hasDisplayedError) {
126
134
  this.setErrorMessage();
127
135
  }
128
136
  };
137
+ /**
138
+ * Initialize sanitizer with current sanitizerOptions
139
+ */
140
+ this.initializeSanitizer = () => {
141
+ this.sanitizer = new Sanitizer(this.sanitizerOptions);
142
+ };
129
143
  }
130
144
  watchReadonly(newValue) {
131
145
  if (newValue)
@@ -134,14 +148,26 @@ export class MgInputRichTextEditor {
134
148
  this.classCollection.delete(classReadonly);
135
149
  }
136
150
  watchDisabled(newValue) {
137
- var _a, _b;
151
+ var _a, _b, _c;
138
152
  if (newValue) {
139
153
  this.classCollection.add(classDisabled);
140
- (_a = this.editor) === null || _a === void 0 ? void 0 : _a.disable();
154
+ (_a = this.editor) === null || _a === void 0 ? void 0 : _a.setReadOnly(true);
141
155
  }
142
156
  else {
143
157
  this.classCollection.delete(classDisabled);
144
- (_b = this.editor) === null || _b === void 0 ? void 0 : _b.enable();
158
+ (_b = this.editor) === null || _b === void 0 ? void 0 : _b.setReadOnly(false);
159
+ }
160
+ // Propagate aria-disabled and tabIndex to the WYSIWYG element
161
+ const wysiwygEl = (_c = this.editor) === null || _c === void 0 ? void 0 : _c.editor;
162
+ if (wysiwygEl !== undefined) {
163
+ if (newValue) {
164
+ wysiwygEl.setAttribute('aria-disabled', 'true');
165
+ }
166
+ else {
167
+ wysiwygEl.removeAttribute('aria-disabled');
168
+ }
169
+ // tabIndex -1 when disabled to exclude from Tab navigation
170
+ wysiwygEl.tabIndex = newValue ? -1 : 0;
145
171
  }
146
172
  }
147
173
  handleValidityChange() {
@@ -158,6 +184,19 @@ export class MgInputRichTextEditor {
158
184
  throw new Error(`<mg-input-rich-text-editor> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${toString(this.pattern)}'" and "patternErrorMessage='${toString(this.patternErrorMessage)}'".`);
159
185
  }
160
186
  }
187
+ watchModules(newValue) {
188
+ if (newValue !== undefined && (!Array.isArray(newValue) || newValue.length === 0 || !newValue.every(isValidString))) {
189
+ throw new Error(`<mg-input-rich-text-editor> prop "modules" must be a non-empty array of strings. Passed value: "${toString(newValue)}".`);
190
+ }
191
+ }
192
+ watchSanitizerOptions(newValue) {
193
+ if (newValue !== undefined && (typeof newValue !== 'object' || newValue === null || Array.isArray(newValue))) {
194
+ throw new Error(`<mg-input-rich-text-editor> prop "sanitizerOptions" must be an object. Passed value: "${toString(newValue)}".`);
195
+ }
196
+ if (this.sanitizer !== undefined) {
197
+ this.initializeSanitizer();
198
+ }
199
+ }
161
200
  /**
162
201
  * Set focus on input.
163
202
  */
@@ -167,25 +206,17 @@ export class MgInputRichTextEditor {
167
206
  }
168
207
  /**
169
208
  * Get editor content as HTML
170
- * @returns HTML content of the editor
209
+ * @returns HTML content of the editor (sanitized)
171
210
  */
172
- getHTML() {
173
- return new Promise(resolve => {
174
- requestAnimationFrame(() => {
175
- resolve(this.editor.getSemanticHTML());
176
- });
177
- });
211
+ async getEditorHTML() {
212
+ return this.sanitizer.sanitize(this.editor.value);
178
213
  }
179
214
  /**
180
- * Get editor content as plain text
215
+ * Get editor content in plain text format
181
216
  * @returns Plain text content of the editor
182
217
  */
183
- async getText() {
184
- return new Promise(resolve => {
185
- requestAnimationFrame(() => {
186
- resolve(this.editor.getText());
187
- });
188
- });
218
+ async getEditorText() {
219
+ return this.editor.editor.textContent.trim();
189
220
  }
190
221
  /**
191
222
  * Display input error if it exists.
@@ -238,7 +269,7 @@ export class MgInputRichTextEditor {
238
269
  async reset() {
239
270
  if (!this.readonly) {
240
271
  this.value = '';
241
- this.editor.setText('');
272
+ this.editor.value = '';
242
273
  // Use `Promise` as requested for stencil method
243
274
  // Use `requestAnimationFrame` to ensure:
244
275
  // - DOM is fully updated before validation
@@ -281,13 +312,16 @@ export class MgInputRichTextEditor {
281
312
  componentWillLoad() {
282
313
  // Get locales
283
314
  this.messages = initLocales(this.element).messages;
284
- this.element.style.setProperty('--mg-c-input-rich-text-editor-rows', this.rows.toString());
285
315
  // Validate
286
316
  this.validatePattern(this.pattern);
287
317
  this.validatePattern(this.patternErrorMessage);
288
318
  // Watch
289
319
  this.watchReadonly(this.readonly);
290
320
  this.watchDisabled(this.disabled);
321
+ this.watchModules(this.modules);
322
+ this.watchSanitizerOptions(this.sanitizerOptions);
323
+ // Initialize sanitizer with optional configuration
324
+ this.initializeSanitizer();
291
325
  // Check validity when component is ready
292
326
  // return a promise to process action only in the FIRST render().
293
327
  // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -296,20 +330,44 @@ export class MgInputRichTextEditor {
296
330
  }, 0);
297
331
  }
298
332
  /**
299
- * add listeners and render editor element
333
+ * Add listeners and render editor element
300
334
  */
301
335
  componentDidLoad() {
336
+ var _a;
302
337
  if (!this.readonly) {
303
- this.editor = defineEditor(this.wrapperElement, {
304
- theme: 'snow',
305
- modules: this.modules,
338
+ this.editor = defineEditor(this.element, this.editorElement, {
339
+ modules: (_a = this.modules) !== null && _a !== void 0 ? _a : DEFAULT_MODULES,
306
340
  readOnly: this.readonly || this.disabled,
341
+ disabled: this.disabled,
307
342
  placeholder: this.placeholder,
308
- value: this.value,
343
+ value: this.sanitizer.sanitize(this.value),
344
+ rows: this.rows,
309
345
  handleTextChange: this.handleTextChange,
310
346
  handleBlur: this.handleBlur,
311
347
  handleFocus: this.handleFocus,
312
348
  });
349
+ // Track the initial title element set up by defineEditor
350
+ this.currentTitleElement = this.element.shadowRoot.querySelector('mg-input-title');
351
+ }
352
+ }
353
+ /**
354
+ * Re-apply accessibility attributes after re-renders.
355
+ * When state changes (disabled, readonly, etc.) trigger a re-render,
356
+ * mg-input's renderLabel() may destroy and recreate mg-input-title,
357
+ * which loses the id and click handler needed for aria-labelledby.
358
+ */
359
+ componentDidRender() {
360
+ if (this.editor !== undefined && !this.readonly) {
361
+ const titleElement = this.element.shadowRoot.querySelector('mg-input-title');
362
+ if (titleElement !== null && titleElement !== this.currentTitleElement) {
363
+ const titleId = `${this.identifier}-title`;
364
+ titleElement.id = titleId;
365
+ titleElement.addEventListener('click', () => {
366
+ var _a;
367
+ (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
368
+ });
369
+ this.currentTitleElement = titleElement;
370
+ }
313
371
  }
314
372
  }
315
373
  /**
@@ -317,20 +375,21 @@ export class MgInputRichTextEditor {
317
375
  * @returns HTML mg-input Element
318
376
  */
319
377
  render() {
320
- return (h("mg-input", { key: '5e807e1059704a6624a1fda63ab56a6f9a51230f', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { ref: el => {
321
- this.wrapperElement = el;
322
- }, id: this.identifier, class: "mg-c-input__wrapper" }, h("div", null)))));
378
+ return (h("mg-input", { key: '3f7c51ee9114279bff924e698b66853b721a5907', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { id: this.identifier, class: "mg-c-input__wrapper" }, h("textarea", { name: this.name, ref: (el) => {
379
+ if (el !== null)
380
+ this.editorElement = el;
381
+ } })))));
323
382
  }
324
383
  static get is() { return "mg-input-rich-text-editor"; }
325
384
  static get encapsulation() { return "shadow"; }
326
385
  static get originalStyleUrls() {
327
386
  return {
328
- "$": ["./editor/editor.scss", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
387
+ "$": ["./editor/custom-properties.scss", "../../../../../node_modules/jodit/es2021/jodit.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
329
388
  };
330
389
  }
331
390
  static get styleUrls() {
332
391
  return {
333
- "$": ["editor/editor.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
392
+ "$": ["editor/custom-properties.css", "../../../../../node_modules/jodit/es2021/jodit.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
334
393
  };
335
394
  }
336
395
  static get properties() {
@@ -374,6 +433,26 @@ export class MgInputRichTextEditor {
374
433
  "reflect": false,
375
434
  "attribute": "identifier"
376
435
  },
436
+ "name": {
437
+ "type": "string",
438
+ "mutable": false,
439
+ "complexType": {
440
+ "original": "string",
441
+ "resolved": "string",
442
+ "references": {}
443
+ },
444
+ "required": false,
445
+ "optional": false,
446
+ "docs": {
447
+ "tags": [],
448
+ "text": "Input name\nIf not set the value equals the identifier"
449
+ },
450
+ "getter": false,
451
+ "setter": false,
452
+ "reflect": false,
453
+ "attribute": "name",
454
+ "defaultValue": "this.identifier"
455
+ },
377
456
  "label": {
378
457
  "type": "string",
379
458
  "mutable": false,
@@ -464,7 +543,7 @@ export class MgInputRichTextEditor {
464
543
  "optional": false,
465
544
  "docs": {
466
545
  "tags": [],
467
- "text": "Define the number of visible text lines for the control"
546
+ "text": "Define the number of visible text lines for the editor.\nImpacts the editor height. Content can grow beyond this minimum."
468
547
  },
469
548
  "getter": false,
470
549
  "setter": false,
@@ -635,16 +714,41 @@ export class MgInputRichTextEditor {
635
714
  "attribute": "help-text"
636
715
  },
637
716
  "modules": {
717
+ "type": "string",
718
+ "mutable": false,
719
+ "complexType": {
720
+ "original": "ButtonsOption",
721
+ "resolved": "(string | ButtonsGroup | IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton>)[] | string",
722
+ "references": {
723
+ "ButtonsOption": {
724
+ "location": "import",
725
+ "path": "./editor/editor.conf",
726
+ "id": "src/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.conf.ts::ButtonsOption"
727
+ }
728
+ }
729
+ },
730
+ "required": false,
731
+ "optional": true,
732
+ "docs": {
733
+ "tags": [],
734
+ "text": "Editor modules configuration.\nMust be passed as an array (e.g. modules=['bold', 'italic', '|', 'ul', 'ol']).\nUse `|` for a separator/divider in the toolbar.\nAvailable modules:\n- **Text formatting**: `bold`, `italic`, `underline`, `strikethrough`, `eraser`\n- **Lists**: `ul` (unordered list), `ol` (ordered list)\n- **Text positioning**: `superscript`, `subscript`\n- **Colors**: `brush` (text color/background)\n- **Media**: `link`, `image`, `file`\n- **Tables**: `table`\n- **History**: `undo`, `redo`\n- **Other**: `print`, `source` (HTML source editor)"
735
+ },
736
+ "getter": false,
737
+ "setter": false,
738
+ "reflect": false,
739
+ "attribute": "modules"
740
+ },
741
+ "sanitizerOptions": {
638
742
  "type": "unknown",
639
743
  "mutable": false,
640
744
  "complexType": {
641
- "original": "EditorOptionsType['modules']",
642
- "resolved": "{ [x: string]: unknown; }",
745
+ "original": "SanitizerOptions",
746
+ "resolved": "{ disallowAttributes?: Record<string, string[]>; disallowTags?: string[]; }",
643
747
  "references": {
644
- "EditorOptionsType": {
748
+ "SanitizerOptions": {
645
749
  "location": "import",
646
- "path": "./editor",
647
- "id": "src/components/molecules/inputs/mg-input-rich-text-editor/editor/index.ts::EditorOptionsType"
750
+ "path": "@mgdis/sanitize-html",
751
+ "id": "../sanitize-html/dist/index.d.ts::SanitizerOptions"
648
752
  }
649
753
  }
650
754
  },
@@ -652,7 +756,7 @@ export class MgInputRichTextEditor {
652
756
  "optional": true,
653
757
  "docs": {
654
758
  "tags": [],
655
- "text": "Editor modules configuration"
759
+ "text": "Sanitizer configuration in native format.\nUse disallowTags (array of tag names) and/or disallowAttributes (object mapping tag names to string arrays).\nUse \"*\" as tag key to disallow attributes on all tags."
656
760
  },
657
761
  "getter": false,
658
762
  "setter": false
@@ -755,7 +859,7 @@ export class MgInputRichTextEditor {
755
859
  "tags": []
756
860
  }
757
861
  },
758
- "getHTML": {
862
+ "getEditorHTML": {
759
863
  "complexType": {
760
864
  "signature": "() => Promise<string>",
761
865
  "parameters": [],
@@ -771,11 +875,11 @@ export class MgInputRichTextEditor {
771
875
  "text": "Get editor content as HTML",
772
876
  "tags": [{
773
877
  "name": "returns",
774
- "text": "HTML content of the editor"
878
+ "text": "HTML content of the editor (sanitized)"
775
879
  }]
776
880
  }
777
881
  },
778
- "getText": {
882
+ "getEditorText": {
779
883
  "complexType": {
780
884
  "signature": "() => Promise<string>",
781
885
  "parameters": [],
@@ -788,7 +892,7 @@ export class MgInputRichTextEditor {
788
892
  "return": "Promise<string>"
789
893
  },
790
894
  "docs": {
791
- "text": "Get editor content as plain text",
895
+ "text": "Get editor content in plain text format",
792
896
  "tags": [{
793
897
  "name": "returns",
794
898
  "text": "Plain text content of the editor"
@@ -896,6 +1000,12 @@ export class MgInputRichTextEditor {
896
1000
  }, {
897
1001
  "propName": "patternErrorMessage",
898
1002
  "methodName": "validatePattern"
1003
+ }, {
1004
+ "propName": "modules",
1005
+ "methodName": "watchModules"
1006
+ }, {
1007
+ "propName": "sanitizerOptions",
1008
+ "methodName": "watchSanitizerOptions"
899
1009
  }];
900
1010
  }
901
1011
  }
@@ -372,7 +372,7 @@ export class MgInputSelect {
372
372
  */
373
373
  render() {
374
374
  const readonlyValue = this.getReadonlyValue();
375
- return (h("mg-input", { key: '928c7d4ebccfe38ae86630d2cb8c06f07ca09a8a', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
375
+ return (h("mg-input", { key: 'ad948f6ed1a8e749ab7b62a198814a40ef99e884', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
376
376
  if (el !== null)
377
377
  this.input = el;
378
378
  } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
@@ -375,7 +375,7 @@ export class MgInputText {
375
375
  * @returns HTML Element
376
376
  */
377
377
  render() {
378
- return (h("mg-input", { key: 'b6360c95530daf744ae5c3eb5cc41d6c81c3e35c', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
378
+ return (h("mg-input", { key: 'aa227eef42e7cfcb1ad0c6c2664498674b5cdd47', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
379
379
  ? this.value && this.renderReadonly()
380
380
  : [
381
381
  h("div", { key: "input", class: "mg-c-input__input-group-container", style: {
@@ -549,7 +549,7 @@ export class MgInputText {
549
549
  "mutable": false,
550
550
  "complexType": {
551
551
  "original": "IconType",
552
- "resolved": "\"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"key\" | \"list\" | \"copy\" | \"history\" | \"location\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
552
+ "resolved": "\"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"download\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"history\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"key\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"link\" | \"list\" | \"loader\" | \"location\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pause\" | \"pause-outline\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"table\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
553
553
  "references": {
554
554
  "IconType": {
555
555
  "location": "import",
@@ -284,7 +284,7 @@ export class MgInputTextarea {
284
284
  * @returns HTML Element
285
285
  */
286
286
  render() {
287
- return (h("mg-input", { key: 'a43b8b1572249e31fb6ea5bd9244639698629218', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__input-group-container" }, h("textarea", { class: {
287
+ return (h("mg-input", { key: '68f259138df7207d7ba16a8f36f3b45e8fb143d0', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__input-group-container" }, h("textarea", { class: {
288
288
  'mg-c-input__box': true,
289
289
  'mg-c-input__box--width': true,
290
290
  'mg-c-input__box--resizable': this.resizable === 'both',
@@ -270,7 +270,7 @@ export class MgInputToggle {
270
270
  */
271
271
  render() {
272
272
  const currentOption = this.options[this.getCurrentOptionIndex(this.value)];
273
- return (h("mg-input", { key: '7e4a6a75069f6f3c0c49a5989f0b4e7a56954efc', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (currentOption && h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.isChecked(this.value).toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.handleSwitchButton, ref: el => {
273
+ return (h("mg-input", { key: '834a0b0713019490b91d799ac9688661f930de43', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (currentOption && h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.isChecked(this.value).toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.handleSwitchButton, ref: el => {
274
274
  if (el !== null)
275
275
  this.button = el;
276
276
  } }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
@@ -1,7 +1,7 @@
1
1
  import { h, Host } from "@stencil/core";
2
2
  import { toString } from "@mgdis/core-ui-helpers/dist/utils";
3
3
  import { OverflowBehavior } from "../../../../utils/behaviors.utils";
4
- import { directions, sizes } from "../../menus/mg-menu/mg-menu.conf";
4
+ import { directions } from "../../menus/mg-menu/mg-menu.conf";
5
5
  import { initLocales } from "../../../../locales";
6
6
  /**
7
7
  * @internal
@@ -31,10 +31,6 @@ export class MgItemMore {
31
31
  else if (typeof newValue.label !== 'string')
32
32
  this.slotlabel.label = this.messages.menuLabel;
33
33
  }
34
- validateSize(newValue) {
35
- if (newValue && !sizes.includes(newValue))
36
- throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${toString(newValue)}.`);
37
- }
38
34
  /*************
39
35
  * Lifecycle *
40
36
  *************/
@@ -47,7 +43,6 @@ export class MgItemMore {
47
43
  // validate props
48
44
  this.validateIcon(this.icon);
49
45
  this.validateSlotLabel(this.slotlabel);
50
- this.validateSize(this.size);
51
46
  }
52
47
  /**
53
48
  * Ensure parent DOM is fully rendered with timeout method before parse elements
@@ -80,7 +75,7 @@ export class MgItemMore {
80
75
  */
81
76
  render() {
82
77
  const menuItemIdentifier = 'mg-item-more';
83
- return (h(Host, { key: '18219f5c906bb2c42dca842de120d41338a31872', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (h("mg-menu-item", { key: '2efd90d30cc2f51c9f5bff8512c765876730ca25', "data-overflow-more": true, "data-size": this.parentMenu.size, "data-style-direction": directions.HORIZONTAL, identifier: menuItemIdentifier }, h("mg-icon", { key: '6d4be9284b63935d298dfe8bf1ba50c70d9b140d', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: '52cd9091b29710fb66d2c421ae64bd31996d3395', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: 'ea3152d9de22b209ed016e51e40c658dc6c58cd2', direction: directions.VERTICAL, label: this.messages.menuLabel, size: this.size, ref: ref => {
78
+ return (h(Host, { key: '85f8bf18855610a31c4afc0051886c5020d9a1b6', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (h("mg-menu-item", { key: '10d8d6ca20df0cba51f601bdafe0260e48842fa3', "data-overflow-more": true, "data-style-direction": directions.HORIZONTAL, identifier: menuItemIdentifier, isIcon: !this.slotlabel.display }, h("mg-icon", { key: 'f957f3179d07df707e871e44e26eddcb911521e4', icon: this.icon.icon, slot: "image" }), h("span", { key: 'af9d0b934313b28983b650d58baa5b83b937836a', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '181445f2ee43b78ce041225f2394618c8eacf5d1', direction: directions.VERTICAL, label: this.messages.menuLabel, ref: ref => {
84
79
  if (ref !== null)
85
80
  this.itemMoreContainer = ref;
86
81
  } })))));
@@ -104,7 +99,7 @@ export class MgItemMore {
104
99
  "mutable": false,
105
100
  "complexType": {
106
101
  "original": "IconType",
107
- "resolved": "{ icon: \"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"key\" | \"list\" | \"copy\" | \"history\" | \"location\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"; }",
102
+ "resolved": "{ icon: \"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"key\" | \"list\" | \"copy\" | \"history\" | \"location\" | \"pause\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pause-outline\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"; }",
108
103
  "references": {
109
104
  "IconType": {
110
105
  "location": "import",
@@ -146,31 +141,6 @@ export class MgItemMore {
146
141
  "getter": false,
147
142
  "setter": false,
148
143
  "defaultValue": "{ display: false }"
149
- },
150
- "size": {
151
- "type": "string",
152
- "mutable": false,
153
- "complexType": {
154
- "original": "SizeType",
155
- "resolved": "\"large\" | \"medium\" | \"xlarge\"",
156
- "references": {
157
- "SizeType": {
158
- "location": "import",
159
- "path": "./mg-item-more.conf",
160
- "id": "src/components/molecules/internals/mg-item-more/mg-item-more.conf.ts::SizeType"
161
- }
162
- }
163
- },
164
- "required": false,
165
- "optional": true,
166
- "docs": {
167
- "tags": [],
168
- "text": "Define component child menu size."
169
- },
170
- "getter": false,
171
- "setter": false,
172
- "reflect": false,
173
- "attribute": "size"
174
144
  }
175
145
  };
176
146
  }
@@ -187,9 +157,6 @@ export class MgItemMore {
187
157
  }, {
188
158
  "propName": "slotlabel",
189
159
  "methodName": "validateSlotLabel"
190
- }, {
191
- "propName": "size",
192
- "methodName": "validateSize"
193
160
  }];
194
161
  }
195
162
  }
@@ -5,7 +5,3 @@ export const directions = {
5
5
  VERTICAL: 'vertical',
6
6
  HORIZONTAL: 'horizontal',
7
7
  };
8
- /**
9
- * List of all possibles sizes
10
- */
11
- export const sizes = ['medium', 'large', 'xlarge'];