@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
package/dist/ui/date.js CHANGED
@@ -1,737 +1,8 @@
1
- import { d as buildSizeStyle } from "../mono-ui-kvLVIf1V.js";
2
1
  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";
5
- import { t as MonoFormControlCore } from "../form-control-core-CRZPZ1ru.js";
6
- import { t as FieldTooltipController } from "../field-tooltip-Csk4s2ve.js";
7
- import { t as FieldValidationController } from "../field-validation-CFmUmuDx.js";
8
- import { LitElement, html, isServer, nothing } from "lit";
9
- import { property, query, state } from "lit/decorators.js";
10
- import { ifDefined } from "lit/directives/if-defined.js";
11
- import { styleMap } from "lit/directives/style-map.js";
2
+ import { t as __decorate } from "../decorate-DbYFpi8R.js";
3
+ import { t as MonoDateCore } from "../date-core-CyuSyvvG.js";
4
+ import { LitElement } from "lit";
12
5
 
13
- //#region src/components/date/date-core.ts
14
- const numberStringConverter = {
15
- fromAttribute(value) {
16
- if (value === null || value === "") return void 0;
17
- const parsed = Number(value);
18
- return Number.isFinite(parsed) ? parsed : void 0;
19
- },
20
- toAttribute(value) {
21
- return value === void 0 || value === null ? null : String(value);
22
- }
23
- };
24
- let _uid = 0;
25
- /**
26
- * `MonoDateCore` — render-mode-agnostic logic for `mono-date` (props, hybrid
27
- * aliases, flatpickr instance lifecycle, validation/state, and the full
28
- * `render()`). SSR-safe: all DOM/`window` access (flatpickr init in
29
- * `firstUpdated`, the accent read in `_onReady`) is `isServer`-guarded, so the
30
- * server emits only the field markup and flatpickr is created on the client after
31
- * hydration. Each build supplies `createRenderRoot()` + `static styles`. Mirrors
32
- * `textarea-core`/`switch-core`.
33
- *
34
- * `mono-date` has no named slots — all content comes from props — so there is no
35
- * slot capture/scan machinery here. The calendar popup is owned by flatpickr
36
- * (appended to `<body>`, client-only, styled by the global bundle), so this needs
37
- * no `PopupPortalController`/`popup-stack`.
38
- */
39
- const MonoDateCore = (superClass) => {
40
- class MonoDateCoreClass extends MonoFormControlCore(superClass) {
41
- constructor(...args) {
42
- super(...args);
43
- this.type = "date";
44
- this.modelValue = "";
45
- this.size = "md";
46
- this.color = "primary";
47
- this.variant = "outlined";
48
- this.labelPosition = "top";
49
- this.validationPosition = "bottom";
50
- this.tooltip = null;
51
- this._tooltip = new FieldTooltipController(this, () => this.tooltip);
52
- this._validation = new FieldValidationController(this, () => ({
53
- position: this.validationPosition,
54
- ...this._validationNotice ?? {
55
- state: void 0,
56
- text: void 0
57
- },
58
- suppressed: !!this._fp?.isOpen
59
- }), () => this.renderRoot?.querySelector?.("[mono-date] > [mono-field]"));
60
- this.error = false;
61
- this.success = false;
62
- this.disabled = false;
63
- this.readonly = false;
64
- this.required = false;
65
- this.clearable = false;
66
- this.cssClass = {};
67
- this.cssClassName = "";
68
- this._hasValue = false;
69
- this._fp = null;
70
- this._buildToken = 0;
71
- this._id = `mono-date-${++_uid}`;
72
- this._onTyping = (event) => {
73
- if (!this._fp || !this._typeable || this.disabled || this.readonly) return;
74
- if (this.mode === "range" || this.mode === "multiple") return;
75
- const raw = event.target.value;
76
- if (!raw.trim()) return;
77
- const fmt = this._fp.config.dateFormat;
78
- const parsed = this._fp.parseDate(raw, fmt);
79
- if (!parsed) return;
80
- this._fp.jumpToDate(parsed);
81
- if (this._fp.formatDate(parsed, fmt) === raw) this._fp.setDate(parsed, true);
82
- };
83
- defineHybridPropAliases(this, [
84
- "labelPosition",
85
- "validationPosition",
86
- "modelValue",
87
- "helperText",
88
- "validationState",
89
- "validationMessage",
90
- "errorMessage",
91
- "successMessage",
92
- "ariaLabelText",
93
- "cssClass",
94
- "dateFormat",
95
- "altInput",
96
- "altFormat",
97
- "clickOpens",
98
- "defaultDate",
99
- "minDate",
100
- "maxDate",
101
- "enableSeconds",
102
- "hourIncrement",
103
- "minuteIncrement",
104
- "defaultHour",
105
- "defaultMinute",
106
- "weekNumbers",
107
- "monthSelectorType",
108
- "shorthandCurrentMonth",
109
- "ariaDateFormat",
110
- "minWidth",
111
- "maxWidth",
112
- "minHeight",
113
- "maxHeight"
114
- ]);
115
- Object.defineProperty(this, "css-class", {
116
- get: () => this.cssClass,
117
- set: (value) => this._setCssClass(value),
118
- configurable: true,
119
- enumerable: false
120
- });
121
- Object.defineProperty(this, "cssclass", {
122
- get: () => this.cssClass,
123
- set: (value) => this._setCssClass(value),
124
- configurable: true,
125
- enumerable: false
126
- });
127
- }
128
- static get observedAttributes() {
129
- return [
130
- ...super.observedAttributes ?? [],
131
- "modelvalue",
132
- "css-class",
133
- "cssclass"
134
- ];
135
- }
136
- attributeChangedCallback(name, oldValue, newValue) {
137
- super.attributeChangedCallback(name, oldValue, newValue);
138
- if (oldValue === newValue) return;
139
- if (name === "modelvalue") {
140
- this.modelValue = newValue ?? "";
141
- return;
142
- }
143
- if (name === "css-class" || name === "cssclass") this._setCssClass(newValue);
144
- }
145
- /**
146
- * Normalized `typeable` flag. Frameworks (e.g. Vue) set a bare boolean
147
- * attribute as the *property* `''` — which bypasses `booleanStringConverter`
148
- * and is falsy. Treat presence (`''`/`true`/`'true'`) as enabled so typing
149
- * actually works.
150
- */
151
- get _typeable() {
152
- const v = this.typeable;
153
- return v === true || v === "" || v === "true";
154
- }
155
- static {
156
- this._configKeys = [
157
- "type",
158
- "options",
159
- "mode",
160
- "inline",
161
- "locale",
162
- "dateFormat",
163
- "altInput",
164
- "altFormat",
165
- "typeable",
166
- "clickOpens",
167
- "defaultDate",
168
- "minDate",
169
- "maxDate",
170
- "disable",
171
- "enable",
172
- "enableSeconds",
173
- "time24hr",
174
- "hourIncrement",
175
- "minuteIncrement",
176
- "defaultHour",
177
- "defaultMinute",
178
- "weekNumbers",
179
- "monthSelectorType",
180
- "shorthandCurrentMonth",
181
- "position",
182
- "ariaDateFormat",
183
- "disabled",
184
- "readonly"
185
- ];
186
- }
187
- willUpdate(changed) {
188
- super.willUpdate?.(changed);
189
- for (const key of [
190
- "error",
191
- "success",
192
- "disabled",
193
- "readonly",
194
- "required",
195
- "clearable"
196
- ]) {
197
- const v = this[key];
198
- if (typeof v !== "boolean") this[key] = this._toBoolean(v);
199
- }
200
- }
201
- _toBoolean(value) {
202
- if (typeof value === "boolean") return value;
203
- if (typeof value === "string") {
204
- const normalized = value.toLowerCase().trim();
205
- return normalized === "" || normalized === "true";
206
- }
207
- return Boolean(value);
208
- }
209
- async firstUpdated() {
210
- await this._ensurePicker();
211
- }
212
- /**
213
- * Build the picker if there isn't one — idempotent, and safe to call from every
214
- * update.
215
- *
216
- * Creation used to live only in `firstUpdated`, which Lit runs exactly once. After
217
- * a disconnect (`v-if`, `<KeepAlive>`, a Vue node move) `disconnectedCallback`
218
- * destroyed the instance and nothing ever rebuilt it, so the field rendered but had
219
- * no picker at all — every `open`/`close`/`toggle` was a silent `this._fp?.` no-op.
220
- * `chart-core` self-heals the same way.
221
- *
222
- * The `isConnected` re-check after the await matters just as much: without it, an
223
- * element disconnected *during* the dynamic import would construct a flatpickr on a
224
- * detached input that nothing would ever destroy — leaking its calendar DOM and the
225
- * four document/window listeners flatpickr binds.
226
- */
227
- async _ensurePicker() {
228
- if (isServer || this._fp || !this._nativeEl) return;
229
- const token = ++this._buildToken;
230
- const { default: flatpickr } = await import("../esm-D0We7ndD.js");
231
- if (token !== this._buildToken || !this.isConnected || !this._nativeEl || this._fp) return;
232
- this._fp = flatpickr(this._nativeEl, this._buildConfig());
233
- this._hasValue = Boolean(this.modelValue);
234
- }
235
- updated(changed) {
236
- super.updated?.(changed);
237
- if (!this._fp) {
238
- this._ensurePicker();
239
- return;
240
- }
241
- if (MonoDateCoreClass._configKeys.some((k) => changed.has(k))) {
242
- this._rebuild();
243
- return;
244
- }
245
- if (changed.has("modelValue")) this._applyModelValue();
246
- }
247
- connectedCallback() {
248
- super.connectedCallback();
249
- if (!isServer) this._ensurePicker();
250
- }
251
- disconnectedCallback() {
252
- this._buildToken++;
253
- this._fp?.destroy();
254
- this._fp = null;
255
- super.disconnectedCallback();
256
- }
257
- _buildConfig() {
258
- const typeDefaults = this.type === "time" ? {
259
- enableTime: true,
260
- noCalendar: true
261
- } : this.type === "datetime" ? { enableTime: true } : {};
262
- const named = {};
263
- const str = (k, v) => {
264
- if (v !== void 0 && v !== "") named[k] = v;
265
- };
266
- const any = (k, v) => {
267
- if (v !== void 0) named[k] = v;
268
- };
269
- str("dateFormat", this.dateFormat);
270
- any("altInput", this.altInput);
271
- str("altFormat", this.altFormat);
272
- any("allowInput", this._typeable);
273
- any("clickOpens", this.clickOpens);
274
- any("defaultDate", this.defaultDate);
275
- any("minDate", this.minDate);
276
- any("maxDate", this.maxDate);
277
- any("disable", this.disable);
278
- any("enable", this.enable);
279
- str("mode", this.mode);
280
- any("enableSeconds", this.enableSeconds);
281
- any("time_24hr", this.time24hr);
282
- any("hourIncrement", this.hourIncrement);
283
- any("minuteIncrement", this.minuteIncrement);
284
- any("defaultHour", this.defaultHour);
285
- any("defaultMinute", this.defaultMinute);
286
- any("inline", this.inline);
287
- any("weekNumbers", this.weekNumbers);
288
- str("monthSelectorType", this.monthSelectorType);
289
- any("shorthandCurrentMonth", this.shorthandCurrentMonth);
290
- str("position", this.position);
291
- str("ariaDateFormat", this.ariaDateFormat);
292
- any("locale", this.locale);
293
- const config = {
294
- ...typeDefaults,
295
- ...this.options ?? {},
296
- ...named,
297
- onReady: [(_d, _s, instance) => this._onReady(instance)],
298
- onChange: [(dates, dateStr, instance) => this._onChange(dates, dateStr, instance)],
299
- onOpen: [(dates, _s, instance) => {
300
- this._emitOpenClose("open", dates, instance);
301
- this._validation.refresh();
302
- }],
303
- onClose: [(dates, _s, instance) => {
304
- this._emitOpenClose("close", dates, instance);
305
- this._validation.refresh();
306
- }]
307
- };
308
- if (this.modelValue) config.defaultDate = this.modelValue;
309
- if (this.disabled || this.readonly) config.clickOpens = false;
310
- return config;
311
- }
312
- /**
313
- * Open / close the calendar. flatpickr owns the popup, so these just forward
314
- * to the instance — but they give `mono-date` the same `open()`/`close()`/
315
- * `toggle()` surface as `mono-select` and `mono-dropdown-table`, which lets
316
- * anything driving an editor generically (e.g. the data grid opening the
317
- * focused inline editor on `Enter`) treat all of them the same.
318
- */
319
- /** Whether the calendar is currently open. */
320
- get isOpen() {
321
- return !!this._fp?.isOpen;
322
- }
323
- open() {
324
- if (this.disabled || this.readonly) return;
325
- this._fp?.open();
326
- }
327
- close() {
328
- this._fp?.close();
329
- }
330
- toggle() {
331
- if (this._fp?.isOpen) this.close();
332
- else this.open();
333
- }
334
- _rebuild() {
335
- if (!this._nativeEl) return;
336
- const open = this._fp?.isOpen;
337
- this._fp?.destroy();
338
- this._fp = null;
339
- const token = ++this._buildToken;
340
- import("../esm-D0We7ndD.js").then(({ default: flatpickr }) => {
341
- if (token !== this._buildToken || !this.isConnected || !this._nativeEl) return;
342
- this._fp = flatpickr(this._nativeEl, this._buildConfig());
343
- if (open) this._fp.open();
344
- });
345
- }
346
- _applyModelValue() {
347
- this._fp?.setDate(this.modelValue || "", false);
348
- this._hasValue = Boolean(this.modelValue);
349
- }
350
- /**
351
- * Tag the calendar so our CSS only targets our pickers, and copy the host's
352
- * resolved accent onto it (the calendar lives in <body> and can't inherit the
353
- * field's `--date-primary`, so it follows the `color` prop via `--cal-accent`).
354
- *
355
- * The accent variable is declared on the `.mono-date` element (the inner
356
- * wrapper), which in the shadow build lives inside the shadow root — reading
357
- * from the host (`this`) would return empty. Read from that wrapper instead;
358
- * in the light build `renderRoot === this` and `.mono-date` is the child, so
359
- * this resolves correctly for both.
360
- */
361
- _onReady(instance) {
362
- if (isServer) return;
363
- const cal = instance.calendarContainer;
364
- if (!cal) return;
365
- cal.classList.add("mono-flatpickr");
366
- const scope = this.renderRoot.querySelector?.("[mono-date]") ?? this;
367
- const cs = getComputedStyle(scope);
368
- const accent = cs.getPropertyValue("--_mono-date-calendar-accent").trim();
369
- const accentFg = cs.getPropertyValue("--_mono-date-primary-foreground").trim();
370
- if (accent) cal.style.setProperty("--cal-accent", accent);
371
- if (accentFg) cal.style.setProperty("--cal-accent-foreground", accentFg);
372
- }
373
- _onChange(dates, dateStr, instance) {
374
- this.modelValue = dateStr;
375
- this._hasValue = Boolean(dateStr);
376
- const detail = {
377
- value: dateStr,
378
- modelValue: dateStr,
379
- dates,
380
- instance
381
- };
382
- const native = this._nativeEl;
383
- let done = false;
384
- const onNative = (event) => {
385
- done = true;
386
- dispatchMonoEvent(this, "change", detail, { sourceEvent: event });
387
- };
388
- native?.addEventListener("change", onNative, {
389
- once: true,
390
- capture: true
391
- });
392
- queueMicrotask(() => {
393
- if (done) return;
394
- done = true;
395
- native?.removeEventListener("change", onNative, { capture: true });
396
- dispatchMonoEvent(this, "change", detail);
397
- });
398
- }
399
- _emitOpenClose(kind, dates, instance) {
400
- dispatchMonoEvent(this, kind, {
401
- dates,
402
- instance
403
- });
404
- }
405
- _clear() {
406
- this._fp?.clear();
407
- this.modelValue = "";
408
- this._hasValue = false;
409
- const detail = {
410
- value: "",
411
- modelValue: "",
412
- dates: [],
413
- instance: this._fp
414
- };
415
- dispatchMonoEvent(this, "change", detail);
416
- }
417
- _setCssClass(value) {
418
- if (value == null) {
419
- this.cssClass = {};
420
- this.cssClassName = "";
421
- return;
422
- }
423
- if (typeof value === "object") {
424
- this.cssClass = value;
425
- return;
426
- }
427
- if (typeof value === "string") {
428
- const trimmed = value.trim();
429
- if (!trimmed) {
430
- this.cssClass = {};
431
- this.cssClassName = "";
432
- return;
433
- }
434
- if (trimmed.startsWith("{") && trimmed.endsWith("}")) try {
435
- this.cssClass = JSON.parse(trimmed);
436
- return;
437
- } catch {}
438
- this.cssClassName = trimmed;
439
- }
440
- }
441
- _cls(base, key) {
442
- const extra = this.cssClass?.[key];
443
- return extra ? `${base} ${extra}` : base;
444
- }
445
- get _resolvedState() {
446
- if (this.error) return "error";
447
- if (this.success) return "success";
448
- const state = this.validationState;
449
- if (state === "invalid") return "error";
450
- if (state === "valid") return "success";
451
- return state ?? "default";
452
- }
453
- get _message() {
454
- if (this._resolvedState === "error") return this.errorMessage || this.validationMessage || void 0;
455
- if (this._resolvedState === "success") return this.successMessage || this.validationMessage || void 0;
456
- return this.helperText || void 0;
457
- }
458
- get _wrapperClasses() {
459
- return [
460
- "mono-date",
461
- this.size,
462
- this.color,
463
- this.variant,
464
- this.disabled ? "disabled" : "",
465
- this.readonly ? "readonly" : "",
466
- this.required ? "required" : "",
467
- this._hasValue ? "has-value" : "",
468
- this._resolvedState !== "default" ? `is-${this._resolvedState}` : "",
469
- this.cssClassName || "",
470
- this.cssClass?.root || ""
471
- ].filter(Boolean).join(" ");
472
- }
473
- get _fieldClasses() {
474
- return [
475
- this._cls("mono-date-field", "field"),
476
- this.size,
477
- this.color,
478
- this.variant,
479
- this._resolvedState !== "default" ? `is-${this._resolvedState}` : ""
480
- ].filter(Boolean).join(" ");
481
- }
482
- _icon() {
483
- return this.renderIcon(this.type === "time" ? "clock" : "calendar");
484
- }
485
- /**
486
- * Icon hook. Light build (default): the global `.mono-icon` / `i-mdi-*` UnoCSS
487
- * icon. Shadow overrides with inline SVG (UnoCSS mask rules can't reach a
488
- * shadow root — they'd render as a solid "black cube").
489
- */
490
- renderIcon(name) {
491
- return html`<span class=${`mono-icon ${name === "calendar" ? "i-mdi-calendar-outline" : name === "clock" ? "i-mdi-clock-outline" : "i-mdi-close"}`} mono-icon aria-hidden="true"></span>`;
492
- }
493
- /**
494
- * The wrapper renders unconditionally, like input / select / tag-input. The
495
- * wrapper is a grid child, so returning `nothing` when there is no message left
496
- * date's block exactly one row-gap shorter than its siblings' — visible as soon
497
- * as a labelled date sits beside a labelled input in the same row.
498
- */
499
- /** The validation message and its state — the same precedence `_message` uses. */
500
- get _validationNotice() {
501
- const state = this._resolvedState;
502
- const text = state === "error" ? this.errorMessage || this.validationMessage : state === "success" ? this.successMessage || this.validationMessage : "";
503
- return text ? {
504
- state,
505
- text
506
- } : null;
507
- }
508
- _renderMessage() {
509
- if (this._validation.moved) {
510
- const notice = this._validationNotice;
511
- return html`
512
- <div class=${this._cls("mono-date-message-wrap", "messageWrap")} mono-message-wrap>
513
- ${this.helperText ? html`<div class=${`${this._cls("mono-date-message", "message")} default`} mono-message="helper">${this.helperText}</div>` : nothing}
514
- <div
515
- class=${`${this._cls("mono-date-message", "message")} ${notice.state}`}
516
- mono-message=${notice.state}
517
- mono-sr-only
518
- role=${notice.state === "error" ? "alert" : nothing}
519
- >${notice.text}</div>
520
- </div>
521
- `;
522
- }
523
- const msg = this._message;
524
- return html`
525
- <div class=${this._cls("mono-date-message-wrap", "messageWrap")} mono-message-wrap>
526
- ${msg ? html`<div
527
- class=${`${this._cls("mono-date-message", "message")} ${this._resolvedState}`}
528
- mono-message=${this._resolvedState === "default" ? "helper" : this._resolvedState}
529
- role=${this._resolvedState === "error" ? "alert" : nothing}
530
- >${msg}</div>` : nothing}
531
- </div>
532
- `;
533
- }
534
- render() {
535
- const state = this._resolvedState;
536
- return html`
537
- <div
538
- class=${this._wrapperClasses}
539
- style=${styleMap(buildSizeStyle(this))}
540
- mono-date
541
- mono-size=${this.size === "md" ? nothing : this.size}
542
- mono-color=${this.color === "primary" ? nothing : this.color}
543
- mono-variant=${this.variant === "outlined" ? nothing : this.variant}
544
- mono-label-position=${this.labelPosition === "top" ? nothing : this.labelPosition}
545
- mono-validation-position=${this.validationPosition === "bottom" ? nothing : this.validationPosition}
546
- mono-validation-state=${state === "default" ? nothing : state}
547
- ?mono-disabled=${this.disabled}
548
- ?mono-readonly=${this.readonly}
549
- ?mono-required=${this.required}
550
- ?mono-clearable=${this.clearable}
551
- >
552
- ${this.label ? html`<label class=${this._cls("mono-date-label", "label")} mono-label for=${this._id}>
553
- ${this.label}${this.required ? html`<span class=${this._cls("mono-date-required", "required")} mono-required-mark>*</span>` : nothing}${this._tooltip.render()}
554
- </label>` : nothing}
555
-
556
- <div class=${this._fieldClasses} mono-field>
557
- <span class=${this._cls("mono-date-icon", "icon")} mono-prefix aria-hidden="true">${this._icon()}</span>
558
- <input
559
- class=${this._cls("mono-date-native", "native")}
560
- mono-native
561
- id=${this._id}
562
- type="text"
563
- placeholder=${ifDefined(this.placeholder)}
564
- ?disabled=${this.disabled}
565
- ?readonly=${this.readonly && !this._typeable}
566
- aria-label=${ifDefined(this.ariaLabelText || this.label || void 0)}
567
- @input=${this._onTyping}
568
- />
569
- ${this._validation.renderIcon()}
570
- ${this.clearable && this._hasValue && !this.disabled && !this.readonly ? html`<button
571
- type="button"
572
- class=${this._cls("mono-date-clear", "clear")}
573
- mono-clear
574
- aria-label="Clear"
575
- @click=${this._clear}
576
- >
577
- ${this.renderIcon("close")}
578
- </button>` : nothing}
579
- </div>
580
-
581
- ${this._renderMessage()}
582
- ${this._validation.renderFloat()}
583
- </div>
584
- `;
585
- }
586
- }
587
- __decorate([property({ type: String })], MonoDateCoreClass.prototype, "type", void 0);
588
- __decorate([property({
589
- attribute: "model-value",
590
- reflect: true
591
- })], MonoDateCoreClass.prototype, "modelValue", void 0);
592
- __decorate([property({ type: String })], MonoDateCoreClass.prototype, "size", void 0);
593
- __decorate([property({ type: String })], MonoDateCoreClass.prototype, "color", void 0);
594
- __decorate([property({ type: String })], MonoDateCoreClass.prototype, "variant", void 0);
595
- __decorate([property({
596
- type: String,
597
- attribute: "label-position"
598
- })], MonoDateCoreClass.prototype, "labelPosition", void 0);
599
- __decorate([property({
600
- type: String,
601
- attribute: "validation-position"
602
- })], MonoDateCoreClass.prototype, "validationPosition", void 0);
603
- __decorate([property({ type: String })], MonoDateCoreClass.prototype, "label", void 0);
604
- __decorate([property({ type: String })], MonoDateCoreClass.prototype, "placeholder", void 0);
605
- __decorate([property({
606
- type: String,
607
- attribute: "helper-text"
608
- })], MonoDateCoreClass.prototype, "helperText", void 0);
609
- __decorate([property()], MonoDateCoreClass.prototype, "tooltip", void 0);
610
- __decorate([property({
611
- type: String,
612
- attribute: "validation-state"
613
- })], MonoDateCoreClass.prototype, "validationState", void 0);
614
- __decorate([property({
615
- type: String,
616
- attribute: "validation-message"
617
- })], MonoDateCoreClass.prototype, "validationMessage", void 0);
618
- __decorate([property({ converter: booleanStringConverter })], MonoDateCoreClass.prototype, "error", void 0);
619
- __decorate([property({
620
- type: String,
621
- attribute: "error-message"
622
- })], MonoDateCoreClass.prototype, "errorMessage", void 0);
623
- __decorate([property({ converter: booleanStringConverter })], MonoDateCoreClass.prototype, "success", void 0);
624
- __decorate([property({
625
- type: String,
626
- attribute: "success-message"
627
- })], MonoDateCoreClass.prototype, "successMessage", void 0);
628
- __decorate([property({
629
- reflect: true,
630
- converter: booleanStringConverter
631
- })], MonoDateCoreClass.prototype, "disabled", void 0);
632
- __decorate([property({
633
- reflect: true,
634
- converter: booleanStringConverter
635
- })], MonoDateCoreClass.prototype, "readonly", void 0);
636
- __decorate([property({
637
- reflect: true,
638
- converter: booleanStringConverter
639
- })], MonoDateCoreClass.prototype, "required", void 0);
640
- __decorate([property({ converter: booleanStringConverter })], MonoDateCoreClass.prototype, "clearable", void 0);
641
- __decorate([property({
642
- type: String,
643
- attribute: "aria-label-text"
644
- })], MonoDateCoreClass.prototype, "ariaLabelText", void 0);
645
- __decorate([property({
646
- type: String,
647
- attribute: "date-format"
648
- })], MonoDateCoreClass.prototype, "dateFormat", void 0);
649
- __decorate([property({
650
- attribute: "alt-input",
651
- converter: booleanStringConverter
652
- })], MonoDateCoreClass.prototype, "altInput", void 0);
653
- __decorate([property({
654
- type: String,
655
- attribute: "alt-format"
656
- })], MonoDateCoreClass.prototype, "altFormat", void 0);
657
- __decorate([property({ converter: booleanStringConverter })], MonoDateCoreClass.prototype, "typeable", void 0);
658
- __decorate([property({
659
- attribute: "click-opens",
660
- converter: booleanStringConverter
661
- })], MonoDateCoreClass.prototype, "clickOpens", void 0);
662
- __decorate([property({ attribute: "default-date" })], MonoDateCoreClass.prototype, "defaultDate", void 0);
663
- __decorate([property({ attribute: "min-date" })], MonoDateCoreClass.prototype, "minDate", void 0);
664
- __decorate([property({ attribute: "max-date" })], MonoDateCoreClass.prototype, "maxDate", void 0);
665
- __decorate([property({ attribute: false })], MonoDateCoreClass.prototype, "disable", void 0);
666
- __decorate([property({ attribute: false })], MonoDateCoreClass.prototype, "enable", void 0);
667
- __decorate([property({ type: String })], MonoDateCoreClass.prototype, "mode", void 0);
668
- __decorate([property({
669
- attribute: "enable-seconds",
670
- converter: booleanStringConverter
671
- })], MonoDateCoreClass.prototype, "enableSeconds", void 0);
672
- __decorate([property({
673
- attribute: "time-24hr",
674
- converter: booleanStringConverter
675
- })], MonoDateCoreClass.prototype, "time24hr", void 0);
676
- __decorate([property({
677
- attribute: "hour-increment",
678
- converter: numberStringConverter
679
- })], MonoDateCoreClass.prototype, "hourIncrement", void 0);
680
- __decorate([property({
681
- attribute: "minute-increment",
682
- converter: numberStringConverter
683
- })], MonoDateCoreClass.prototype, "minuteIncrement", void 0);
684
- __decorate([property({
685
- attribute: "default-hour",
686
- converter: numberStringConverter
687
- })], MonoDateCoreClass.prototype, "defaultHour", void 0);
688
- __decorate([property({
689
- attribute: "default-minute",
690
- converter: numberStringConverter
691
- })], MonoDateCoreClass.prototype, "defaultMinute", void 0);
692
- __decorate([property({ converter: booleanStringConverter })], MonoDateCoreClass.prototype, "inline", void 0);
693
- __decorate([property({
694
- attribute: "week-numbers",
695
- converter: booleanStringConverter
696
- })], MonoDateCoreClass.prototype, "weekNumbers", void 0);
697
- __decorate([property({ attribute: "month-selector-type" })], MonoDateCoreClass.prototype, "monthSelectorType", void 0);
698
- __decorate([property({
699
- attribute: "shorthand-current-month",
700
- converter: booleanStringConverter
701
- })], MonoDateCoreClass.prototype, "shorthandCurrentMonth", void 0);
702
- __decorate([property({ type: String })], MonoDateCoreClass.prototype, "position", void 0);
703
- __decorate([property({
704
- type: String,
705
- attribute: "aria-date-format"
706
- })], MonoDateCoreClass.prototype, "ariaDateFormat", void 0);
707
- __decorate([property({ attribute: false })], MonoDateCoreClass.prototype, "locale", void 0);
708
- __decorate([property({ attribute: false })], MonoDateCoreClass.prototype, "options", void 0);
709
- __decorate([property({ type: String })], MonoDateCoreClass.prototype, "width", void 0);
710
- __decorate([property({ type: String })], MonoDateCoreClass.prototype, "height", void 0);
711
- __decorate([property({
712
- type: String,
713
- attribute: "min-width"
714
- })], MonoDateCoreClass.prototype, "minWidth", void 0);
715
- __decorate([property({
716
- type: String,
717
- attribute: "max-width"
718
- })], MonoDateCoreClass.prototype, "maxWidth", void 0);
719
- __decorate([property({
720
- type: String,
721
- attribute: "min-height"
722
- })], MonoDateCoreClass.prototype, "minHeight", void 0);
723
- __decorate([property({
724
- type: String,
725
- attribute: "max-height"
726
- })], MonoDateCoreClass.prototype, "maxHeight", void 0);
727
- __decorate([property({ attribute: false })], MonoDateCoreClass.prototype, "cssClass", void 0);
728
- __decorate([property({ attribute: false })], MonoDateCoreClass.prototype, "cssClassName", void 0);
729
- __decorate([state()], MonoDateCoreClass.prototype, "_hasValue", void 0);
730
- __decorate([query(".mono-date-native")], MonoDateCoreClass.prototype, "_nativeEl", void 0);
731
- return MonoDateCoreClass;
732
- };
733
-
734
- //#endregion
735
6
  //#region src/components/date/mono-date.ts
736
7
  let MonoDate = class MonoDate extends MonoDateCore(LitElement) {
737
8
  createRenderRoot() {