@mono-lit/helper 0.0.9 → 0.0.10

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 (161) hide show
  1. package/dist/accordion-core-DaNyPWRr.js +277 -0
  2. package/dist/alert-core-DWtHbX_-.js +134 -0
  3. package/dist/breadcrumb-list-core-Dh68T8Cf.js +747 -0
  4. package/dist/{mono-button-CLkHg3WW.js → button-core-DerXg84Q.js} +3 -276
  5. package/dist/button-dropdown-core-DKYEOyjy.js +654 -0
  6. package/dist/button-utils-D5-66M02.js +63 -0
  7. package/dist/card-utils-l80qAmrN.js +312 -0
  8. package/dist/chart-core-DV7hD3ZY.js +801 -0
  9. package/dist/checkbox-utils-DKdrhAzF.js +337 -0
  10. package/dist/chip-utils-DpRrd7Zj.js +403 -0
  11. package/dist/{data-source-controller-C6C4ej_M.js → data-source-controller-DS_JLrmS.js} +1 -1
  12. package/dist/{data-source-options-fxT5QIX4.js → data-source-options-DJUNU26C.js} +6 -6
  13. package/dist/{data-source-read-BL266IW0.js → data-source-read-uKJpRAzx.js} +2 -2
  14. package/dist/date-core-CyuSyvvG.js +734 -0
  15. package/dist/drawer-core-DbFWvNln.js +759 -0
  16. package/dist/dropdown-core-BCH1pK14.js +511 -0
  17. package/dist/dropdown-table-core-SfHUJVFq.js +1342 -0
  18. package/dist/export.js +1 -1
  19. package/dist/{field-path-BabiMrrA.js → field-path-DK2VBWHl.js} +1 -1
  20. package/dist/field-tooltip.css_raw-DVblekCl.js +5 -0
  21. package/dist/{field-validation.css_raw-Cx6SGrfP.js → field-validation.css_raw-BU7C6173.js} +1 -170
  22. package/dist/file-upload-core-Cz_dBQMx.js +624 -0
  23. package/dist/filter-builder-core-DyWjbBP7.js +381 -0
  24. package/dist/{filter-builder-B6Y2mmbM.js → filter-builder-vbqIuPhX.js} +1 -1
  25. package/dist/{filter-eval-ChDSaAUH.js → filter-eval-CqeBnMYh.js} +1 -1
  26. package/dist/{filter-odata-Bi27XUpQ.js → filter-odata-GsczYKNC.js} +1 -1
  27. package/dist/{hydration-flush-BaE9gN3C.js → hydration-flush-Volt9X7Q.js} +2 -1071
  28. package/dist/index.js +11 -11
  29. package/dist/{index.node-DTqDBca7.js → index.node-Csy9zrr1.js} +4 -4
  30. package/dist/index.node.js +11 -11
  31. package/dist/input-utils-BglY-k0H.js +1145 -0
  32. package/dist/menu-core-DkAYuCZ2.js +831 -0
  33. package/dist/modal-core-CSBSPN_m.js +844 -0
  34. package/dist/mono-button-DVvZ03P-.js +280 -0
  35. package/dist/{mono-button.shadow-DqZMpcqY.js → mono-button.shadow-BANxMGln.js} +6 -594
  36. package/dist/{mono-data-chart-NKPdAgVq.js → mono-data-chart-ChF4J9RT.js} +6 -6
  37. package/dist/{mono-data-dropdown-B2iRpJuI.js → mono-data-dropdown-Bgj2PDfm.js} +1 -1
  38. package/dist/{mono-data-grid-llJCX9MC.js → mono-data-grid-DJkp96N-.js} +144 -46
  39. package/dist/{mono-event-BPku9HpS.js → mono-event-CAZf0F_k.js} +14 -9
  40. package/dist/{mono-form-controller-BrA10erm.js → mono-form-controller-DxZLvyg6.js} +2 -1
  41. package/dist/mono-table-checkbox-core-BKOMx8R5.js +5288 -0
  42. package/dist/nav-core-B5qU2dzn.js +225 -0
  43. package/dist/{normalize-error-D93O4q8g.js → normalize-error-BEcd1tmS.js} +2 -2
  44. package/dist/otp-core-DXg3vFLh.js +758 -0
  45. package/dist/radio-utils-Dk9Tl1jz.js +319 -0
  46. package/dist/rich-text-editor-core-Ddd_QaLn.js +1280 -0
  47. package/dist/select-utils-BgArYHk8.js +2140 -0
  48. package/dist/sidebar-core-CD6txDo3.js +583 -0
  49. package/dist/slider-core-vcWr321-.js +1014 -0
  50. package/dist/src/components/dropdown-table/dropdown-table-core.d.ts +2 -2
  51. package/dist/src/components/dropdown-table/dropdown-table-types.d.ts +1 -1
  52. package/dist/src/components/dropdown-table/index.d.ts +1 -1
  53. package/dist/src/components/dropdown-table/index.shadow.d.ts +1 -1
  54. package/dist/src/components/dropdown-table/mono-data-dropdown.d.ts +1 -1
  55. package/dist/src/components/form/form-types.d.ts +9 -3
  56. package/dist/src/components/input/input-core.d.ts +1 -1
  57. package/dist/src/components/input/input-types.d.ts +1 -1
  58. package/dist/src/components/otp/otp-core.d.ts +1 -1
  59. package/dist/src/components/select/select-core.d.ts +1 -1
  60. package/dist/src/components/select/select-types.d.ts +1 -1
  61. package/dist/src/components/slider/slider-core.d.ts +1 -1
  62. package/dist/src/components/slider/slider-types.d.ts +1 -1
  63. package/dist/src/components/table/filter-suggestion.d.ts +171 -0
  64. package/dist/src/components/table/index.d.ts +5 -4
  65. package/dist/src/components/table/index.shadow.d.ts +5 -4
  66. package/dist/src/components/table/mono-data-grid.d.ts +22 -3
  67. package/dist/src/components/table/mono-table-empty-core.d.ts +37 -0
  68. package/dist/src/components/table/mono-table-search-core.d.ts +22 -3
  69. package/dist/src/components/table/table-types.d.ts +74 -4
  70. package/dist/src/components/tag-input/tag-input-core.d.ts +1 -1
  71. package/dist/src/components/tag-input/tag-input-types.d.ts +1 -1
  72. package/dist/src/components/textarea/textarea-core.d.ts +1 -1
  73. package/dist/src/composables/mono-event.d.ts +7 -1
  74. package/dist/src/entries/index.d.ts +8 -6
  75. package/dist/src/entries/index.node.d.ts +8 -6
  76. package/dist/src/search/index.d.ts +1 -1
  77. package/dist/src/utils/group-count.d.ts +36 -0
  78. package/dist/switch-utils-CTZ4id2V.js +338 -0
  79. package/dist/tabs-core-r5-B8k_N.js +317 -0
  80. package/dist/tag-input-utils-D2JA90DQ.js +3060 -0
  81. package/dist/textarea-utils-VU1KeXm8.js +821 -0
  82. package/dist/ui/accordion.js +2 -274
  83. package/dist/ui/alert.js +2 -131
  84. package/dist/ui/breadcrumb.js +4 -745
  85. package/dist/ui/button-dropdown.js +4 -652
  86. package/dist/ui/button.js +2 -63
  87. package/dist/ui/card.js +2 -310
  88. package/dist/ui/chart.js +4 -800
  89. package/dist/ui/checkbox.js +4 -335
  90. package/dist/ui/chip.js +4 -402
  91. package/dist/ui/date.js +3 -732
  92. package/dist/ui/drawer.js +3 -757
  93. package/dist/ui/dropdown-table.js +5 -1341
  94. package/dist/ui/dropdown.js +4 -509
  95. package/dist/ui/file-upload.js +3 -622
  96. package/dist/ui/filter.js +5 -380
  97. package/dist/ui/form.js +1 -1
  98. package/dist/ui/index.css +118 -1
  99. package/dist/ui/input.js +3 -1141
  100. package/dist/ui/menu.js +4 -828
  101. package/dist/ui/modal.js +4 -843
  102. package/dist/ui/nav.js +4 -223
  103. package/dist/ui/otp.js +4 -756
  104. package/dist/ui/radio.js +4 -317
  105. package/dist/ui/rich-text-editor.js +4 -1278
  106. package/dist/ui/select.js +5 -2138
  107. package/dist/ui/shadow/accordion.js +4 -273
  108. package/dist/ui/shadow/alert.js +4 -130
  109. package/dist/ui/shadow/breadcrumb.js +5 -744
  110. package/dist/ui/shadow/button-dropdown.js +6 -652
  111. package/dist/ui/shadow/button.js +3 -63
  112. package/dist/ui/shadow/card.js +4 -309
  113. package/dist/ui/shadow/chart.js +6 -1576
  114. package/dist/ui/shadow/checkbox.js +4 -334
  115. package/dist/ui/shadow/chip.js +4 -396
  116. package/dist/ui/shadow/date.js +7 -731
  117. package/dist/ui/shadow/drawer.js +4 -756
  118. package/dist/ui/shadow/dropdown-table.js +8 -1762
  119. package/dist/ui/shadow/dropdown.js +4 -508
  120. package/dist/ui/shadow/file-upload.js +4 -620
  121. package/dist/ui/shadow/filter.js +7 -379
  122. package/dist/ui/shadow/input.js +6 -1140
  123. package/dist/ui/shadow/menu.js +5 -828
  124. package/dist/ui/shadow/modal.js +6 -1063
  125. package/dist/ui/shadow/nav.js +5 -223
  126. package/dist/ui/shadow/otp.js +6 -754
  127. package/dist/ui/shadow/radio.js +4 -316
  128. package/dist/ui/shadow/rich-text-editor.js +4 -1276
  129. package/dist/ui/shadow/select.js +6 -2136
  130. package/dist/ui/shadow/sidebar.js +5 -581
  131. package/dist/ui/shadow/slider.js +5 -1010
  132. package/dist/ui/shadow/switch.js +4 -335
  133. package/dist/ui/shadow/table.js +10 -4501
  134. package/dist/ui/shadow/tabs.js +6 -315
  135. package/dist/ui/shadow/tag-input.js +7 -3057
  136. package/dist/ui/shadow/textarea.js +6 -817
  137. package/dist/ui/sidebar.js +3 -581
  138. package/dist/ui/slider.js +4 -1012
  139. package/dist/ui/switch.js +4 -336
  140. package/dist/ui/table.js +9 -4502
  141. package/dist/ui/tabs.js +4 -315
  142. package/dist/ui/tag-input.js +5 -3058
  143. package/dist/ui/textarea.js +4 -819
  144. package/dist/vue.d.ts +3 -2
  145. package/package.json +3 -3
  146. package/dist/chip-strip-bNfLn52Z.js +0 -215
  147. package/dist/data-source-controller-Dx6IQ2CN.js +0 -243
  148. package/dist/data-source-options-BM4r4PRw.js +0 -558
  149. package/dist/data-source-read-HyBCRg1t.js +0 -242
  150. package/dist/excel-BXzr3uI1.js +0 -784
  151. package/dist/export-ixRdCS2y.js +0 -2388
  152. package/dist/field-tooltip-addon-CWCp19mJ.js +0 -702
  153. package/dist/field-tooltip.css_raw-U5UeTa2d.js +0 -269
  154. package/dist/filter-builder-C0T3pMx2.js +0 -208
  155. package/dist/form-control-core-BbiACMtL.js +0 -226
  156. package/dist/icon-ClxnYhBG.js +0 -19
  157. package/dist/import-Dc4eXC02.js +0 -612
  158. package/dist/light-slots-_no0r2Z-.js +0 -246
  159. package/dist/markdown-uGlE_OfJ.js +0 -20191
  160. package/dist/mono-data-grid-e9ZVBlNN.js +0 -4240
  161. package/dist/normalize-error-BmLbgANw.js +0 -1048
@@ -1,784 +1,10 @@
1
- import { d as buildSizeStyle, g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
1
+ import { g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
2
2
  import { t as customElement } from "../mono-element-CKcT0rwv.js";
3
- import { a as defineHybridPropAliases, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
4
- import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
3
+ import { t as __decorate } from "../decorate-DbYFpi8R.js";
5
4
  import { s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
6
- import { t as MonoFormControlCore } from "../form-control-core-CRZPZ1ru.js";
7
- import { t as FieldTooltipController } from "../field-tooltip-Csk4s2ve.js";
8
- import { t as FieldValidationController } from "../field-validation-CFmUmuDx.js";
9
- import { LitElement, html, isServer, nothing } from "lit";
10
- import { property, query, state } from "lit/decorators.js";
11
- import { ifDefined } from "lit/directives/if-defined.js";
12
- import { styleMap } from "lit/directives/style-map.js";
5
+ import { n as MonoTextareaCore, t as validateTextareaProps } from "../textarea-utils-VU1KeXm8.js";
6
+ import { LitElement } from "lit";
13
7
 
14
- //#region src/components/textarea/textarea-core.ts
15
- const numberStringConverter = {
16
- fromAttribute(value) {
17
- if (value === null || value === "") return void 0;
18
- const parsed = Number(value);
19
- return Number.isFinite(parsed) ? parsed : void 0;
20
- },
21
- toAttribute(value) {
22
- if (value === void 0 || value === null) return null;
23
- return String(value);
24
- }
25
- };
26
- /**
27
- * `MonoTextareaCore` — render-mode-agnostic logic for `mono-textarea` (props,
28
- * hybrid aliases, value/model sync, validation, char counter, auto-resize, and
29
- * the full `render()`). SSR-safe: the only DOM/`window` access (`_syncAutoResize`)
30
- * is `isServer`-guarded. Each build supplies `createRenderRoot()` + `static styles`
31
- * and the slot strategy via the `_slotOutlet` hook (light: `data-mono-slot`
32
- * placeholders; shadow: native `<slot>`). Mirrors `switch-core`/`select-core`.
33
- */
34
- const MonoTextareaCore = (superClass) => {
35
- class MonoTextareaCoreClass extends MonoFormControlCore(superClass) {
36
- constructor(...args) {
37
- super(...args);
38
- this.size = "md";
39
- this.color = "primary";
40
- this.variant = "outlined";
41
- this.labelPosition = "top";
42
- this.validationPosition = "bottom";
43
- this.modelValue = "";
44
- this.value = "";
45
- this.name = "";
46
- this.placeholder = "";
47
- this.label = "";
48
- this.helperText = "";
49
- this.tooltip = null;
50
- this._tooltip = new FieldTooltipController(this, () => this.tooltip);
51
- this._validation = new FieldValidationController(this, () => ({
52
- position: this.validationPosition,
53
- ...this._validationNotice ?? {
54
- state: void 0,
55
- text: void 0
56
- },
57
- suppressed: false
58
- }), () => this.renderRoot?.querySelector?.("[mono-textarea] > textarea[mono-native]"));
59
- this.validationState = "default";
60
- this.validationMessage = "";
61
- this.errorMessage = "";
62
- this.successMessage = "";
63
- this.disabled = false;
64
- this.readonly = false;
65
- this.required = false;
66
- this.autofocus = false;
67
- this.autoResize = false;
68
- this.showCounter = false;
69
- this.cssClass = {};
70
- this.cssClassName = "";
71
- this._hasLabelSlotState = false;
72
- this._hasHelperSlotState = false;
73
- this._textareaId = `mono-textarea-${Math.random().toString(36).slice(2)}`;
74
- this._messageId = `${this._textareaId}-message`;
75
- this._lastAutoResizeWidth = -1;
76
- defineHybridPropAliases(this, [
77
- "labelPosition",
78
- "validationPosition",
79
- "modelValue",
80
- "helperText",
81
- "validationState",
82
- "validationMessage",
83
- "errorMessage",
84
- "successMessage",
85
- "autoResize",
86
- "minRows",
87
- "maxRows",
88
- "minLength",
89
- "maxLength",
90
- "showCounter",
91
- "ariaLabelText",
92
- "cssClass",
93
- "minWidth",
94
- "maxWidth",
95
- "minHeight",
96
- "maxHeight"
97
- ]);
98
- /**
99
- * Vue support:
100
- *
101
- * <mono-textarea :cssClass="{}" />
102
- * <mono-textarea :css-class="{}" />
103
- * <mono-textarea :cssclass="{}" />
104
- */
105
- Object.defineProperty(this, "css-class", {
106
- get: () => this.cssClass,
107
- set: (value) => {
108
- this._setCssClass(value);
109
- },
110
- configurable: true,
111
- enumerable: false
112
- });
113
- Object.defineProperty(this, "cssclass", {
114
- get: () => this.cssClass,
115
- set: (value) => {
116
- this._setCssClass(value);
117
- },
118
- configurable: true,
119
- enumerable: false
120
- });
121
- Object.defineProperty(this, "ariaLabel", {
122
- get: () => this.ariaLabelText,
123
- set: (value) => {
124
- this.ariaLabelText = value == null ? void 0 : String(value);
125
- },
126
- configurable: true,
127
- enumerable: false
128
- });
129
- Object.defineProperty(this, "aria-label", {
130
- get: () => this.ariaLabelText,
131
- set: (value) => {
132
- this.ariaLabelText = value == null ? void 0 : String(value);
133
- },
134
- configurable: true,
135
- enumerable: false
136
- });
137
- Object.defineProperty(this, "arialabel", {
138
- get: () => this.ariaLabelText,
139
- set: (value) => {
140
- this.ariaLabelText = value == null ? void 0 : String(value);
141
- },
142
- configurable: true,
143
- enumerable: false
144
- });
145
- Object.defineProperty(this, "maxlength", {
146
- get: () => this.maxLength,
147
- set: (value) => {
148
- this.maxLength = this._toOptionalNumber(value);
149
- },
150
- configurable: true,
151
- enumerable: false
152
- });
153
- Object.defineProperty(this, "minlength", {
154
- get: () => this.minLength,
155
- set: (value) => {
156
- this.minLength = this._toOptionalNumber(value);
157
- },
158
- configurable: true,
159
- enumerable: false
160
- });
161
- }
162
- static get observedAttributes() {
163
- return [
164
- ...super.observedAttributes ?? [],
165
- "modelvalue",
166
- "helpertext",
167
- "validationstate",
168
- "validationmessage",
169
- "errormessage",
170
- "successmessage",
171
- "autoresize",
172
- "minrows",
173
- "maxrows",
174
- "minlength",
175
- "maxlength",
176
- "showcounter",
177
- "arialabeltext",
178
- "arialabel",
179
- "css-class",
180
- "cssclass"
181
- ];
182
- }
183
- attributeChangedCallback(name, oldValue, newValue) {
184
- super.attributeChangedCallback(name, oldValue, newValue);
185
- if (oldValue === newValue) return;
186
- if (name === "modelvalue") {
187
- this.modelValue = newValue ?? "";
188
- return;
189
- }
190
- if (name === "helpertext") {
191
- this.helperText = newValue ?? "";
192
- return;
193
- }
194
- if (name === "validationstate") {
195
- this.validationState = newValue ?? "default";
196
- return;
197
- }
198
- if (name === "validationmessage") {
199
- this.validationMessage = newValue ?? "";
200
- return;
201
- }
202
- if (name === "errormessage") {
203
- this.errorMessage = newValue ?? "";
204
- return;
205
- }
206
- if (name === "successmessage") {
207
- this.successMessage = newValue ?? "";
208
- return;
209
- }
210
- if (name === "autoresize") {
211
- this.autoResize = this._toBoolean(newValue);
212
- return;
213
- }
214
- if (name === "minrows") {
215
- this.minRows = this._toOptionalNumber(newValue);
216
- return;
217
- }
218
- if (name === "maxrows") {
219
- this.maxRows = this._toOptionalNumber(newValue);
220
- return;
221
- }
222
- if (name === "minlength") {
223
- this.minLength = this._toOptionalNumber(newValue);
224
- return;
225
- }
226
- if (name === "maxlength") {
227
- this.maxLength = this._toOptionalNumber(newValue);
228
- return;
229
- }
230
- if (name === "showcounter") {
231
- this.showCounter = this._toBoolean(newValue);
232
- return;
233
- }
234
- if (name === "arialabeltext" || name === "arialabel") {
235
- this.ariaLabelText = newValue ?? void 0;
236
- return;
237
- }
238
- if (name === "css-class" || name === "cssclass") this._setCssClass(newValue);
239
- }
240
- /** The validation message and its state — the same precedence the message row uses. */
241
- get _validationNotice() {
242
- if (this.validationMessage) return {
243
- state: this._resolvedValidationState,
244
- text: this.validationMessage
245
- };
246
- if (this.errorMessage) return {
247
- state: "invalid",
248
- text: this.errorMessage
249
- };
250
- if (this.successMessage) return {
251
- state: "valid",
252
- text: this.successMessage
253
- };
254
- return null;
255
- }
256
- /** The message that moved to the icon / float bubble, kept for assistive tech only. */
257
- _renderMovedMessage() {
258
- const notice = this._validationNotice;
259
- return html`<div
260
- class=${`${this._cls("mono-textarea-message", "message")} ${notice.state}`}
261
- mono-message=${notice.state}
262
- mono-sr-only
263
- role=${notice.state === "invalid" ? "alert" : nothing}
264
- >${notice.text}</div>`;
265
- }
266
- willUpdate(changed) {
267
- for (const key of [
268
- "disabled",
269
- "readonly",
270
- "required",
271
- "autofocus",
272
- "autoResize",
273
- "showCounter"
274
- ]) {
275
- const v = this[key];
276
- if (typeof v !== "boolean") this[key] = this._toBoolean(v);
277
- }
278
- if (changed.has("modelValue") && this.value !== this.modelValue) this.value = this.modelValue ?? "";
279
- if (changed.has("value") && this.modelValue !== this.value) this.modelValue = String(this.value ?? "");
280
- }
281
- connectedCallback() {
282
- super.connectedCallback();
283
- if (isServer) return;
284
- this._setupAutoResizeObserver();
285
- this._syncAutoResize();
286
- }
287
- disconnectedCallback() {
288
- this._teardownAutoResizeObserver();
289
- super.disconnectedCallback();
290
- }
291
- firstUpdated() {
292
- if (isServer) return;
293
- if (this.autofocus) this.focus();
294
- this._syncAutoResize();
295
- }
296
- /**
297
- * Recompute the height when the element's WIDTH changes.
298
- *
299
- * The reconnect hook above only covers being moved; the same staleness happens on a
300
- * window resize, a sidebar opening, or any layout shift that renarrows the column.
301
- * Width is the real input to the height calculation, so watch it directly.
302
- */
303
- _setupAutoResizeObserver() {
304
- if (isServer || this._autoResizeRo) return;
305
- if (typeof ResizeObserver === "undefined") return;
306
- this._autoResizeRo = new ResizeObserver(() => {
307
- if (!this.autoResize) return;
308
- const width = this.getBoundingClientRect().width;
309
- if (width === this._lastAutoResizeWidth) return;
310
- this._lastAutoResizeWidth = width;
311
- this._syncAutoResize();
312
- });
313
- this._autoResizeRo.observe(this);
314
- }
315
- _teardownAutoResizeObserver() {
316
- this._autoResizeRo?.disconnect();
317
- this._autoResizeRo = void 0;
318
- this._lastAutoResizeWidth = -1;
319
- }
320
- updated(changed) {
321
- super.updated(changed);
322
- if (isServer) return;
323
- if (changed.has("value") || changed.has("modelValue") || changed.has("autoResize") || changed.has("minRows") || changed.has("maxRows")) this._syncAutoResize();
324
- }
325
- _setCssClass(value) {
326
- if (value == null) {
327
- this.cssClass = {};
328
- this.cssClassName = "";
329
- return;
330
- }
331
- if (typeof value === "object") {
332
- this.cssClass = value;
333
- return;
334
- }
335
- if (typeof value === "string") {
336
- const trimmed = value.trim();
337
- if (!trimmed) {
338
- this.cssClass = {};
339
- this.cssClassName = "";
340
- return;
341
- }
342
- /**
343
- * Optional HTML object support:
344
- *
345
- * <mono-textarea css-class='{"root":"...", "field":"..."}'></mono-textarea>
346
- */
347
- if (trimmed.startsWith("{") && trimmed.endsWith("}")) try {
348
- this.cssClass = JSON.parse(trimmed);
349
- return;
350
- } catch {}
351
- this.cssClassName = trimmed;
352
- }
353
- }
354
- _toBoolean(value) {
355
- if (typeof value === "boolean") return value;
356
- if (typeof value === "string") {
357
- const normalized = value.toLowerCase().trim();
358
- return normalized === "" || normalized === "true";
359
- }
360
- return Boolean(value);
361
- }
362
- _toOptionalNumber(value) {
363
- if (value === void 0 || value === null || value === "") return void 0;
364
- const parsed = Number(value);
365
- return Number.isFinite(parsed) ? parsed : void 0;
366
- }
367
- _cls(base, key) {
368
- const extra = this.cssClass?.[key];
369
- return extra ? `${base} ${extra}` : base;
370
- }
371
- get _hasLabelSlot() {
372
- return this._hasLabelSlotState;
373
- }
374
- get _hasHelperSlot() {
375
- return this._hasHelperSlotState;
376
- }
377
- get _resolvedValidationState() {
378
- if (this.validationState && this.validationState !== "default") return this.validationState;
379
- if (this.errorMessage) return "invalid";
380
- if (this.successMessage) return "valid";
381
- return "default";
382
- }
383
- get _wrapperClasses() {
384
- return [
385
- "mono-textarea",
386
- this.size,
387
- this.color,
388
- this.variant,
389
- this.disabled ? "disabled" : "",
390
- this.readonly ? "readonly" : "",
391
- this._resolvedValidationState !== "default" ? `is-${this._resolvedValidationState}` : "",
392
- this.value ? "has-value" : "",
393
- this.autoResize ? "auto-resize" : "",
394
- this.cssClassName,
395
- this.cssClass?.root
396
- ].filter(Boolean).join(" ");
397
- }
398
- get _fieldClasses() {
399
- return [
400
- this._cls("mono-textarea-field", "field"),
401
- this.size,
402
- this.color,
403
- this.variant
404
- ].filter(Boolean).join(" ");
405
- }
406
- /** `near` at 85% of the cap, `over` past it — the attribute twin of the class. */
407
- get _counterState() {
408
- const max = this.maxLength;
409
- if (max === void 0) return "default";
410
- const length = this.value.length;
411
- if (length > max) return "over";
412
- if (length >= Math.floor(max * .85)) return "near";
413
- return "default";
414
- }
415
- get _counterClass() {
416
- const length = this.value.length;
417
- const max = this.maxLength;
418
- if (max !== void 0 && length > max) return `${this._cls("mono-textarea-counter", "counter")} over`;
419
- if (max !== void 0 && length >= Math.floor(max * .85)) return `${this._cls("mono-textarea-counter", "counter")} near`;
420
- return this._cls("mono-textarea-counter", "counter");
421
- }
422
- get _shouldShowFooter() {
423
- return Boolean(this.validationMessage || this.errorMessage || this.successMessage || this.helperText || this._hasHelperSlot || this.showCounter);
424
- }
425
- _createModelDetail(args) {
426
- return {
427
- modelValue: args.modelValue,
428
- currentValue: args.modelValue,
429
- oldValue: args.oldValue,
430
- value: args.modelValue,
431
- name: this.name,
432
- sourceEvent: args.sourceEvent
433
- };
434
- }
435
- _emitInput(detail) {
436
- dispatchMonoEvent(this, "input", detail);
437
- }
438
- _emitChange(detail) {
439
- dispatchMonoEvent(this, "change", detail);
440
- }
441
- _handleInput(event) {
442
- if (this.disabled || this.readonly) return;
443
- const textarea = event.currentTarget;
444
- const oldValue = this.modelValue;
445
- const nextValue = textarea.value;
446
- this.value = nextValue;
447
- this.modelValue = nextValue;
448
- const detail = this._createModelDetail({
449
- modelValue: nextValue,
450
- oldValue,
451
- sourceEvent: event
452
- });
453
- this._emitInput(detail);
454
- this._syncAutoResize();
455
- }
456
- _handleChange(event) {
457
- if (this.disabled || this.readonly) return;
458
- const textarea = event.currentTarget;
459
- const oldValue = this.modelValue;
460
- const nextValue = textarea.value;
461
- this.value = nextValue;
462
- this.modelValue = nextValue;
463
- const detail = this._createModelDetail({
464
- modelValue: nextValue,
465
- oldValue,
466
- sourceEvent: event
467
- });
468
- this._emitChange(detail);
469
- }
470
- _syncAutoResize() {
471
- if (isServer) return;
472
- if (!this.autoResize || !this._textareaEl) return;
473
- const textarea = this._textareaEl;
474
- const computed = window.getComputedStyle(textarea);
475
- const lineHeight = Number.parseFloat(computed.lineHeight) || 20;
476
- const paddingTop = Number.parseFloat(computed.paddingTop) || 0;
477
- const paddingBottom = Number.parseFloat(computed.paddingBottom) || 0;
478
- const borderTop = Number.parseFloat(computed.borderTopWidth) || 0;
479
- const borderBottom = Number.parseFloat(computed.borderBottomWidth) || 0;
480
- const minRows = this.minRows ?? this.rows;
481
- const maxRows = this.maxRows;
482
- const minHeight = minRows !== void 0 ? lineHeight * minRows + paddingTop + paddingBottom + borderTop + borderBottom : void 0;
483
- const maxHeight = maxRows !== void 0 ? lineHeight * maxRows + paddingTop + paddingBottom + borderTop + borderBottom : void 0;
484
- textarea.style.height = "auto";
485
- let nextHeight = textarea.scrollHeight;
486
- if (minHeight !== void 0) nextHeight = Math.max(nextHeight, minHeight);
487
- if (maxHeight !== void 0) {
488
- nextHeight = Math.min(nextHeight, maxHeight);
489
- textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
490
- } else textarea.style.overflowY = "hidden";
491
- textarea.style.height = `${nextHeight}px`;
492
- }
493
- _renderLabel() {
494
- const hasContent = !!this.label || this._hasLabelSlotState;
495
- if (!hasContent && !this._slotsAlwaysRender) return nothing;
496
- return html`
497
- <label
498
- class=${this._cls("mono-textarea-label", "label")}
499
- mono-label
500
- for=${this._textareaId}
501
- ?mono-empty=${!hasContent}
502
- >
503
- ${this._slotOutlet("label", this.label)}
504
-
505
- ${this.required ? html`
506
- <span class=${this._cls("mono-textarea-required", "required")} mono-required-mark>
507
- *
508
- </span>
509
- ` : nothing}
510
- ${this._tooltip.render()}
511
- </label>
512
- `;
513
- }
514
- _renderMessage() {
515
- if (this._validation.moved) return html`${this._renderHelperText()}${this._renderMovedMessage()}`;
516
- if (this.validationMessage) return html`
517
- <div
518
- class=${`${this._cls("mono-textarea-message", "message")} ${this._resolvedValidationState}`}
519
- mono-message=${this._resolvedValidationState}
520
- >
521
- ${this.validationMessage}
522
- </div>
523
- `;
524
- if (this.errorMessage) return html`
525
- <div class=${`${this._cls("mono-textarea-message", "message")} invalid`} mono-message="invalid">
526
- ${this.errorMessage}
527
- </div>
528
- `;
529
- if (this.successMessage) return html`
530
- <div class=${`${this._cls("mono-textarea-message", "message")} valid`} mono-message="valid">
531
- ${this.successMessage}
532
- </div>
533
- `;
534
- return this._renderHelperText();
535
- }
536
- _renderHelperText() {
537
- if (this.helperText || this._hasHelperSlot || this._slotsAlwaysRender) return html`
538
- <div
539
- class=${`${this._cls("mono-textarea-message", "message")} helper`}
540
- mono-message="helper"
541
- ?mono-empty=${!this.helperText && !this._hasHelperSlot}
542
- >
543
- ${this._slotOutlet("helper", this.helperText)}
544
- </div>
545
- `;
546
- return nothing;
547
- }
548
- _renderCounter() {
549
- if (!this.showCounter) return nothing;
550
- const max = this.maxLength;
551
- const length = this.value.length;
552
- return html`
553
- <div
554
- class=${this._counterClass}
555
- mono-counter
556
- ?mono-near=${this._counterState === "near"}
557
- ?mono-over=${this._counterState === "over"}
558
- >
559
- ${max !== void 0 ? `${length}/${max}` : length}
560
- </div>
561
- `;
562
- }
563
- _renderFooter() {
564
- if (!this._shouldShowFooter && !this._slotsAlwaysRender) return nothing;
565
- return html`
566
- <div
567
- class=${this._cls("mono-textarea-footer", "footer")}
568
- mono-footer
569
- ?mono-empty=${!this._shouldShowFooter}
570
- >
571
- <div class=${this.cssClass?.messageWrap ?? ""} mono-message-wrap>
572
- ${this._renderMessage()}
573
- </div>
574
-
575
- ${this._renderCounter()}
576
- </div>
577
- `;
578
- }
579
- /** Inline sizing applied to the root wrapper. */
580
- _sizeStyle() {
581
- return buildSizeStyle(this);
582
- }
583
- render() {
584
- const describedBy = this._shouldShowFooter ? this._messageId : void 0;
585
- const ariaLabel = this.ariaLabelText || this.label || this.placeholder || void 0;
586
- return html`
587
- <div
588
- class=${this._wrapperClasses}
589
- style=${styleMap(this._sizeStyle())}
590
- mono-textarea
591
- mono-size=${this.size === "md" ? nothing : this.size}
592
- mono-color=${this.color === "primary" ? nothing : this.color}
593
- mono-variant=${this.variant === "outlined" ? nothing : this.variant}
594
- mono-label-position=${this.labelPosition === "top" ? nothing : this.labelPosition}
595
- mono-validation-position=${this.validationPosition === "bottom" ? nothing : this.validationPosition}
596
- mono-validation-state=${this._resolvedValidationState === "default" ? nothing : this._resolvedValidationState}
597
- ?mono-disabled=${this.disabled}
598
- ?mono-readonly=${this.readonly}
599
- ?mono-required=${this.required}
600
- ?mono-auto-resize=${this.autoResize}
601
- >
602
- ${this._renderLabel()}
603
-
604
- ${this._validation.renderIcon({ anchored: true })}
605
- <textarea
606
- id=${this._textareaId}
607
- class=${this._fieldClasses}
608
- mono-native
609
- .value=${this.value}
610
- name=${ifDefined(this.name || void 0)}
611
- placeholder=${ifDefined(this.placeholder || void 0)}
612
- rows=${ifDefined(this.rows)}
613
- minlength=${ifDefined(this.minLength)}
614
- maxlength=${ifDefined(this.maxLength)}
615
- ?disabled=${this.disabled}
616
- ?readonly=${this.readonly}
617
- ?required=${this.required}
618
- aria-label=${ifDefined(ariaLabel)}
619
- aria-invalid=${this._resolvedValidationState === "invalid" ? "true" : "false"}
620
- aria-describedby=${ifDefined(describedBy)}
621
- @input=${this._handleInput}
622
- @change=${this._handleChange}
623
- ></textarea>
624
-
625
- <div id=${this._messageId} mono-message-outlet>
626
- ${this._renderFooter()}
627
- </div>
628
-
629
- ${this._validation.renderFloat()}
630
- </div>
631
- `;
632
- }
633
- focus(options) {
634
- this._textareaEl?.focus(options);
635
- }
636
- blur() {
637
- this._textareaEl?.blur();
638
- }
639
- select() {
640
- this._textareaEl?.select();
641
- }
642
- setSelectionRange(start, end, direction) {
643
- this._textareaEl?.setSelectionRange(start, end, direction);
644
- }
645
- /** Whether the slot regions render even when empty. Light: no. Shadow: yes —
646
- * the native `<slot>`s must exist to project DSD content + be scanned
647
- * (hidden via `[data-empty]` when empty). */
648
- get _slotsAlwaysRender() {
649
- return false;
650
- }
651
- _hasSlot(name) {
652
- return name === "label" ? this._hasLabelSlotState : this._hasHelperSlotState;
653
- }
654
- _setSlotState(name, has) {
655
- if (name === "label") this._hasLabelSlotState = has;
656
- else this._hasHelperSlotState = has;
657
- }
658
- /**
659
- * Slot outlet. Light build (default): a `data-mono-slot` placeholder the
660
- * captured light-DOM nodes are re-parented into when present, else the prop
661
- * `fallback`. Shadow build overrides this with a native `<slot name>`.
662
- */
663
- _slotOutlet(name, fallback = nothing) {
664
- return this._hasSlot(name) ? html`<span data-mono-slot=${name}></span>` : html`${fallback}`;
665
- }
666
- }
667
- __decorate([property({ type: String })], MonoTextareaCoreClass.prototype, "size", void 0);
668
- __decorate([property({ type: String })], MonoTextareaCoreClass.prototype, "color", void 0);
669
- __decorate([property({ type: String })], MonoTextareaCoreClass.prototype, "variant", void 0);
670
- __decorate([property({
671
- type: String,
672
- attribute: "label-position"
673
- })], MonoTextareaCoreClass.prototype, "labelPosition", void 0);
674
- __decorate([property({
675
- type: String,
676
- attribute: "validation-position"
677
- })], MonoTextareaCoreClass.prototype, "validationPosition", void 0);
678
- __decorate([property({
679
- type: String,
680
- attribute: "model-value",
681
- reflect: true
682
- })], MonoTextareaCoreClass.prototype, "modelValue", void 0);
683
- __decorate([property({ type: String })], MonoTextareaCoreClass.prototype, "value", void 0);
684
- __decorate([property({ type: String })], MonoTextareaCoreClass.prototype, "name", void 0);
685
- __decorate([property({ type: String })], MonoTextareaCoreClass.prototype, "placeholder", void 0);
686
- __decorate([property({ type: String })], MonoTextareaCoreClass.prototype, "label", void 0);
687
- __decorate([property({
688
- type: String,
689
- attribute: "helper-text"
690
- })], MonoTextareaCoreClass.prototype, "helperText", void 0);
691
- __decorate([property()], MonoTextareaCoreClass.prototype, "tooltip", void 0);
692
- __decorate([property({
693
- type: String,
694
- attribute: "validation-state"
695
- })], MonoTextareaCoreClass.prototype, "validationState", void 0);
696
- __decorate([property({
697
- type: String,
698
- attribute: "validation-message"
699
- })], MonoTextareaCoreClass.prototype, "validationMessage", void 0);
700
- __decorate([property({
701
- type: String,
702
- attribute: "error-message"
703
- })], MonoTextareaCoreClass.prototype, "errorMessage", void 0);
704
- __decorate([property({
705
- type: String,
706
- attribute: "success-message"
707
- })], MonoTextareaCoreClass.prototype, "successMessage", void 0);
708
- __decorate([property({
709
- type: String,
710
- attribute: "aria-label"
711
- })], MonoTextareaCoreClass.prototype, "ariaLabelText", void 0);
712
- __decorate([property({
713
- reflect: true,
714
- converter: booleanStringConverter
715
- })], MonoTextareaCoreClass.prototype, "disabled", void 0);
716
- __decorate([property({
717
- reflect: true,
718
- converter: booleanStringConverter
719
- })], MonoTextareaCoreClass.prototype, "readonly", void 0);
720
- __decorate([property({
721
- reflect: true,
722
- converter: booleanStringConverter
723
- })], MonoTextareaCoreClass.prototype, "required", void 0);
724
- __decorate([property({
725
- reflect: true,
726
- converter: booleanStringConverter
727
- })], MonoTextareaCoreClass.prototype, "autofocus", void 0);
728
- __decorate([property({
729
- attribute: "auto-resize",
730
- reflect: true,
731
- converter: booleanStringConverter
732
- })], MonoTextareaCoreClass.prototype, "autoResize", void 0);
733
- __decorate([property({
734
- attribute: "show-counter",
735
- reflect: true,
736
- converter: booleanStringConverter
737
- })], MonoTextareaCoreClass.prototype, "showCounter", void 0);
738
- __decorate([property({ converter: numberStringConverter })], MonoTextareaCoreClass.prototype, "rows", void 0);
739
- __decorate([property({
740
- attribute: "min-rows",
741
- converter: numberStringConverter
742
- })], MonoTextareaCoreClass.prototype, "minRows", void 0);
743
- __decorate([property({
744
- attribute: "max-rows",
745
- converter: numberStringConverter
746
- })], MonoTextareaCoreClass.prototype, "maxRows", void 0);
747
- __decorate([property({
748
- attribute: "min-length",
749
- converter: numberStringConverter
750
- })], MonoTextareaCoreClass.prototype, "minLength", void 0);
751
- __decorate([property({
752
- attribute: "max-length",
753
- converter: numberStringConverter
754
- })], MonoTextareaCoreClass.prototype, "maxLength", void 0);
755
- __decorate([property({ attribute: false })], MonoTextareaCoreClass.prototype, "cssClass", void 0);
756
- __decorate([property({ attribute: false })], MonoTextareaCoreClass.prototype, "cssClassName", void 0);
757
- __decorate([state()], MonoTextareaCoreClass.prototype, "_hasLabelSlotState", void 0);
758
- __decorate([state()], MonoTextareaCoreClass.prototype, "_hasHelperSlotState", void 0);
759
- __decorate([query(".mono-textarea-field")], MonoTextareaCoreClass.prototype, "_textareaEl", void 0);
760
- __decorate([property({ type: String })], MonoTextareaCoreClass.prototype, "width", void 0);
761
- __decorate([property({ type: String })], MonoTextareaCoreClass.prototype, "height", void 0);
762
- __decorate([property({
763
- type: String,
764
- attribute: "min-width"
765
- })], MonoTextareaCoreClass.prototype, "minWidth", void 0);
766
- __decorate([property({
767
- type: String,
768
- attribute: "max-width"
769
- })], MonoTextareaCoreClass.prototype, "maxWidth", void 0);
770
- __decorate([property({
771
- type: String,
772
- attribute: "min-height"
773
- })], MonoTextareaCoreClass.prototype, "minHeight", void 0);
774
- __decorate([property({
775
- type: String,
776
- attribute: "max-height"
777
- })], MonoTextareaCoreClass.prototype, "maxHeight", void 0);
778
- return MonoTextareaCoreClass;
779
- };
780
-
781
- //#endregion
782
8
  //#region src/components/textarea/mono-textarea.ts
783
9
  let MonoTextarea = class MonoTextarea extends MonoTextareaCore(LitElement) {
784
10
  constructor(..._args) {
@@ -832,46 +58,5 @@ let MonoTextarea = class MonoTextarea extends MonoTextareaCore(LitElement) {
832
58
  };
833
59
  MonoTextarea = __decorate([customElement("mono-textarea")], MonoTextarea);
834
60
 
835
- //#endregion
836
- //#region src/components/textarea/textarea-utils.ts
837
- function validateTextareaProps(props) {
838
- const validSizes = [
839
- "xs",
840
- "sm",
841
- "md",
842
- "lg",
843
- "xl",
844
- "xxl"
845
- ];
846
- const validColors = [
847
- "primary",
848
- "secondary",
849
- "success",
850
- "danger",
851
- "warning",
852
- "info",
853
- "teal",
854
- "purple",
855
- "neutral",
856
- "dark"
857
- ];
858
- const validVariants = [
859
- "outlined",
860
- "filled",
861
- "underlined"
862
- ];
863
- const validStates = [
864
- "default",
865
- "valid",
866
- "invalid",
867
- "warning"
868
- ];
869
- if (props.size && !validSizes.includes(props.size)) return false;
870
- if (props.color && !validColors.includes(props.color)) return false;
871
- if (props.variant && !validVariants.includes(props.variant)) return false;
872
- if (props.validationState && !validStates.includes(props.validationState)) return false;
873
- return true;
874
- }
875
-
876
61
  //#endregion
877
62
  export { MonoTextarea, validateTextareaProps };