@deepfuture/dui-components 0.0.12 → 0.0.13

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 (89) hide show
  1. package/_deprecated/center/center.js +2 -2
  2. package/_deprecated/hstack/hstack.js +79 -33
  3. package/_deprecated/page-inset/page-inset.js +104 -56
  4. package/_deprecated/vstack/vstack.js +61 -19
  5. package/accordion/accordion-item.js +217 -147
  6. package/accordion/accordion.js +214 -149
  7. package/alert-dialog/alert-dialog-close.js +2 -2
  8. package/alert-dialog/alert-dialog-popup.js +230 -166
  9. package/alert-dialog/alert-dialog-trigger.js +2 -2
  10. package/alert-dialog/alert-dialog.js +128 -73
  11. package/avatar/avatar.js +175 -115
  12. package/badge/badge.js +2 -2
  13. package/breadcrumb/breadcrumb-ellipsis.js +2 -2
  14. package/breadcrumb/breadcrumb-item.js +2 -2
  15. package/breadcrumb/breadcrumb-link.js +2 -2
  16. package/breadcrumb/breadcrumb-page.js +2 -2
  17. package/breadcrumb/breadcrumb-separator.js +2 -2
  18. package/breadcrumb/breadcrumb.js +2 -2
  19. package/button/button.js +109 -65
  20. package/calendar/calendar.js +368 -290
  21. package/checkbox/checkbox-group.js +146 -87
  22. package/checkbox/checkbox.js +232 -167
  23. package/collapsible/collapsible.js +210 -132
  24. package/combobox/combobox.js +318 -252
  25. package/command/command-empty.js +67 -25
  26. package/command/command-group.js +87 -47
  27. package/command/command-input.js +84 -44
  28. package/command/command-item.js +168 -124
  29. package/command/command-list.js +60 -18
  30. package/command/command-separator.js +2 -2
  31. package/command/command-shortcut.js +2 -2
  32. package/command/command.js +297 -232
  33. package/data-table/data-table.js +225 -153
  34. package/dialog/dialog-close.js +2 -2
  35. package/dialog/dialog-popup.js +247 -181
  36. package/dialog/dialog-trigger.js +2 -2
  37. package/dialog/dialog.js +128 -73
  38. package/dropzone/dropzone.js +310 -249
  39. package/icon/icon.js +2 -2
  40. package/input/input.js +204 -143
  41. package/link/link.js +62 -24
  42. package/menu/menu-item.js +66 -24
  43. package/menu/menu.js +189 -136
  44. package/menubar/menubar.js +142 -91
  45. package/number-field/number-field.js +277 -204
  46. package/package.json +2 -2
  47. package/popover/popover-close.js +2 -2
  48. package/popover/popover-popup.js +126 -76
  49. package/popover/popover-trigger.js +2 -2
  50. package/popover/popover.js +181 -120
  51. package/portal/portal.js +128 -86
  52. package/preview-card/preview-card-popup.js +114 -66
  53. package/preview-card/preview-card-trigger.js +2 -2
  54. package/preview-card/preview-card.js +211 -142
  55. package/progress/progress.js +91 -45
  56. package/radio/radio-group.js +153 -90
  57. package/radio/radio.js +137 -94
  58. package/scroll-area/scroll-area.js +382 -283
  59. package/select/select.js +260 -203
  60. package/separator/separator.js +60 -18
  61. package/sidebar/sidebar-content.js +2 -2
  62. package/sidebar/sidebar-footer.js +2 -2
  63. package/sidebar/sidebar-group-label.js +2 -2
  64. package/sidebar/sidebar-group.js +2 -2
  65. package/sidebar/sidebar-header.js +2 -2
  66. package/sidebar/sidebar-inset.js +2 -2
  67. package/sidebar/sidebar-menu-button.js +118 -74
  68. package/sidebar/sidebar-menu-item.js +2 -2
  69. package/sidebar/sidebar-menu.js +2 -2
  70. package/sidebar/sidebar-provider.js +202 -129
  71. package/sidebar/sidebar-separator.js +2 -2
  72. package/sidebar/sidebar-trigger.js +2 -2
  73. package/sidebar/sidebar.js +150 -85
  74. package/slider/slider.js +217 -159
  75. package/spinner/spinner.js +70 -28
  76. package/switch/switch.js +174 -111
  77. package/tabs/tab.js +89 -47
  78. package/tabs/tabs-indicator.js +2 -2
  79. package/tabs/tabs-list.js +92 -54
  80. package/tabs/tabs-panel.js +90 -44
  81. package/tabs/tabs.js +130 -71
  82. package/textarea/textarea.js +153 -95
  83. package/toggle/toggle-group.js +184 -125
  84. package/toggle/toggle.js +131 -76
  85. package/toolbar/toolbar.js +79 -33
  86. package/tooltip/tooltip-popup.js +108 -60
  87. package/tooltip/tooltip-trigger.js +93 -55
  88. package/tooltip/tooltip.js +225 -154
  89. package/trunc/trunc.js +78 -34
package/select/select.js CHANGED
@@ -1,9 +1,41 @@
1
1
  /** Ported from original DUI: deep-future-app/app/client/components/dui/select */
2
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6
- return c > 3 && r && Object.defineProperty(target, key, r), r;
2
+ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
3
+ function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
4
+ var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
5
+ var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
6
+ var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
7
+ var _, done = false;
8
+ for (var i = decorators.length - 1; i >= 0; i--) {
9
+ var context = {};
10
+ for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
11
+ for (var p in contextIn.access) context.access[p] = contextIn.access[p];
12
+ context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
13
+ var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
14
+ if (kind === "accessor") {
15
+ if (result === void 0) continue;
16
+ if (result === null || typeof result !== "object") throw new TypeError("Object expected");
17
+ if (_ = accept(result.get)) descriptor.get = _;
18
+ if (_ = accept(result.set)) descriptor.set = _;
19
+ if (_ = accept(result.init)) initializers.unshift(_);
20
+ }
21
+ else if (_ = accept(result)) {
22
+ if (kind === "field") initializers.unshift(_);
23
+ else descriptor[key] = _;
24
+ }
25
+ }
26
+ if (target) Object.defineProperty(target, contextIn.name, descriptor);
27
+ done = true;
28
+ };
29
+ var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
30
+ var useValue = arguments.length > 2;
31
+ for (var i = 0; i < initializers.length; i++) {
32
+ value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
33
+ }
34
+ return useValue ? value : void 0;
35
+ };
36
+ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
37
+ if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
38
+ return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
7
39
  };
8
40
  import { css, html, LitElement, nothing } from "lit";
9
41
  import { property, state } from "lit/decorators.js";
@@ -94,49 +126,91 @@ const portalPopupStyles = [
94
126
  * @fires value-change - Fired when the selected value changes.
95
127
  * Detail: { value: string, option: SelectOption }
96
128
  */
97
- export class DuiSelect extends LitElement {
98
- static { this.tagName = "dui-select"; }
99
- static { this.styles = [base, hostStyles, componentStyles]; }
100
- #options_accessor_storage = [];
101
- /** The available options. */
102
- get options() { return this.#options_accessor_storage; }
103
- set options(value) { this.#options_accessor_storage = value; }
104
- #value_accessor_storage = "";
105
- /** Currently selected value. */
106
- get value() { return this.#value_accessor_storage; }
107
- set value(value) { this.#value_accessor_storage = value; }
108
- #placeholder_accessor_storage = "Select...";
109
- /** Placeholder text shown when no value is selected. */
110
- get placeholder() { return this.#placeholder_accessor_storage; }
111
- set placeholder(value) { this.#placeholder_accessor_storage = value; }
112
- #disabled_accessor_storage = false;
113
- /** Whether the select is disabled. */
114
- get disabled() { return this.#disabled_accessor_storage; }
115
- set disabled(value) { this.#disabled_accessor_storage = value; }
116
- #name_accessor_storage = "";
117
- /** Name for form submission. */
118
- get name() { return this.#name_accessor_storage; }
119
- set name(value) { this.#name_accessor_storage = value; }
120
- #_fieldCtx_accessor_storage;
121
- get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
122
- set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
123
- #highlightedIndex_accessor_storage = -1;
124
- get #highlightedIndex() { return this.#highlightedIndex_accessor_storage; }
125
- set #highlightedIndex(value) { this.#highlightedIndex_accessor_storage = value; }
126
- #triggerId = `select-trigger-${crypto.randomUUID().slice(0, 8)}`;
127
- #listboxId = `select-listbox-${crypto.randomUUID().slice(0, 8)}`;
128
- #popup = new FloatingPortalController(this, {
129
- getAnchor: () => this.shadowRoot?.querySelector(".Trigger"),
130
- styles: portalPopupStyles,
131
- onOpen: () => {
132
- this.#highlightedIndex = this.#selectedIndex;
133
- },
134
- onClose: () => {
135
- this.#highlightedIndex = -1;
136
- this._fieldCtx?.markTouched();
137
- },
138
- renderPopup: (portal) => {
139
- return html `
129
+ let DuiSelect = (() => {
130
+ let _classSuper = LitElement;
131
+ let _options_decorators;
132
+ let _options_initializers = [];
133
+ let _options_extraInitializers = [];
134
+ let _value_decorators;
135
+ let _value_initializers = [];
136
+ let _value_extraInitializers = [];
137
+ let _placeholder_decorators;
138
+ let _placeholder_initializers = [];
139
+ let _placeholder_extraInitializers = [];
140
+ let _disabled_decorators;
141
+ let _disabled_initializers = [];
142
+ let _disabled_extraInitializers = [];
143
+ let _name_decorators;
144
+ let _name_initializers = [];
145
+ let _name_extraInitializers = [];
146
+ let __fieldCtx_decorators;
147
+ let __fieldCtx_initializers = [];
148
+ let __fieldCtx_extraInitializers = [];
149
+ let _private_highlightedIndex_decorators;
150
+ let _private_highlightedIndex_initializers = [];
151
+ let _private_highlightedIndex_extraInitializers = [];
152
+ let _private_highlightedIndex_descriptor;
153
+ return class DuiSelect extends _classSuper {
154
+ static {
155
+ const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
156
+ _options_decorators = [property({ attribute: false })];
157
+ _value_decorators = [property({ type: String })];
158
+ _placeholder_decorators = [property({ type: String })];
159
+ _disabled_decorators = [property({ type: Boolean, reflect: true })];
160
+ _name_decorators = [property({ type: String })];
161
+ __fieldCtx_decorators = [consume({ context: fieldContext, subscribe: true }), state()];
162
+ _private_highlightedIndex_decorators = [state()];
163
+ __esDecorate(this, null, _options_decorators, { kind: "accessor", name: "options", static: false, private: false, access: { has: obj => "options" in obj, get: obj => obj.options, set: (obj, value) => { obj.options = value; } }, metadata: _metadata }, _options_initializers, _options_extraInitializers);
164
+ __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
165
+ __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
166
+ __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
167
+ __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
168
+ __esDecorate(this, null, __fieldCtx_decorators, { kind: "accessor", name: "_fieldCtx", static: false, private: false, access: { has: obj => "_fieldCtx" in obj, get: obj => obj._fieldCtx, set: (obj, value) => { obj._fieldCtx = value; } }, metadata: _metadata }, __fieldCtx_initializers, __fieldCtx_extraInitializers);
169
+ __esDecorate(this, _private_highlightedIndex_descriptor = { get: __setFunctionName(function () { return this.#highlightedIndex_accessor_storage; }, "#highlightedIndex", "get"), set: __setFunctionName(function (value) { this.#highlightedIndex_accessor_storage = value; }, "#highlightedIndex", "set") }, _private_highlightedIndex_decorators, { kind: "accessor", name: "#highlightedIndex", static: false, private: true, access: { has: obj => #highlightedIndex in obj, get: obj => obj.#highlightedIndex, set: (obj, value) => { obj.#highlightedIndex = value; } }, metadata: _metadata }, _private_highlightedIndex_initializers, _private_highlightedIndex_extraInitializers);
170
+ if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
171
+ }
172
+ static tagName = "dui-select";
173
+ static styles = [base, hostStyles, componentStyles];
174
+ #options_accessor_storage = __runInitializers(this, _options_initializers, []);
175
+ /** The available options. */
176
+ get options() { return this.#options_accessor_storage; }
177
+ set options(value) { this.#options_accessor_storage = value; }
178
+ #value_accessor_storage = (__runInitializers(this, _options_extraInitializers), __runInitializers(this, _value_initializers, ""));
179
+ /** Currently selected value. */
180
+ get value() { return this.#value_accessor_storage; }
181
+ set value(value) { this.#value_accessor_storage = value; }
182
+ #placeholder_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _placeholder_initializers, "Select..."));
183
+ /** Placeholder text shown when no value is selected. */
184
+ get placeholder() { return this.#placeholder_accessor_storage; }
185
+ set placeholder(value) { this.#placeholder_accessor_storage = value; }
186
+ #disabled_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _disabled_initializers, false));
187
+ /** Whether the select is disabled. */
188
+ get disabled() { return this.#disabled_accessor_storage; }
189
+ set disabled(value) { this.#disabled_accessor_storage = value; }
190
+ #name_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _name_initializers, ""));
191
+ /** Name for form submission. */
192
+ get name() { return this.#name_accessor_storage; }
193
+ set name(value) { this.#name_accessor_storage = value; }
194
+ #_fieldCtx_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, __fieldCtx_initializers, void 0));
195
+ get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
196
+ set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
197
+ #highlightedIndex_accessor_storage = (__runInitializers(this, __fieldCtx_extraInitializers), __runInitializers(this, _private_highlightedIndex_initializers, -1));
198
+ get #highlightedIndex() { return _private_highlightedIndex_descriptor.get.call(this); }
199
+ set #highlightedIndex(value) { return _private_highlightedIndex_descriptor.set.call(this, value); }
200
+ #triggerId = (__runInitializers(this, _private_highlightedIndex_extraInitializers), `select-trigger-${crypto.randomUUID().slice(0, 8)}`);
201
+ #listboxId = `select-listbox-${crypto.randomUUID().slice(0, 8)}`;
202
+ #popup = new FloatingPortalController(this, {
203
+ getAnchor: () => this.shadowRoot?.querySelector(".Trigger"),
204
+ styles: portalPopupStyles,
205
+ onOpen: () => {
206
+ this.#highlightedIndex = this.#selectedIndex;
207
+ },
208
+ onClose: () => {
209
+ this.#highlightedIndex = -1;
210
+ this._fieldCtx?.markTouched();
211
+ },
212
+ renderPopup: (portal) => {
213
+ return html `
140
214
  <div
141
215
  class="Popup"
142
216
  ?data-starting-style="${portal.isStarting}"
@@ -153,145 +227,145 @@ export class DuiSelect extends LitElement {
153
227
  </div>
154
228
  </div>
155
229
  `;
156
- },
157
- });
158
- // ---- Computed ----
159
- get #isDisabled() {
160
- return this.disabled || (this._fieldCtx?.disabled ?? false);
161
- }
162
- get #isInvalid() {
163
- return this._fieldCtx?.invalid ?? false;
164
- }
165
- get #selectedOption() {
166
- return this.options.find((o) => o.value === this.value);
167
- }
168
- get #selectedIndex() {
169
- return this.options.findIndex((o) => o.value === this.value);
170
- }
171
- get #displayValue() {
172
- return this.#selectedOption?.label ?? "";
173
- }
174
- // ---- Event handlers ----
175
- #onTriggerClick = (event) => {
176
- event.stopPropagation();
177
- if (this.#isDisabled)
178
- return;
179
- if (this.#popup.isOpen) {
180
- this.#popup.close();
230
+ },
231
+ });
232
+ // ---- Computed ----
233
+ get #isDisabled() {
234
+ return this.disabled || (this._fieldCtx?.disabled ?? false);
181
235
  }
182
- else {
183
- this.#popup.open();
236
+ get #isInvalid() {
237
+ return this._fieldCtx?.invalid ?? false;
184
238
  }
185
- };
186
- #onTriggerKeyDown = (event) => {
187
- if (this.#isDisabled)
188
- return;
189
- switch (event.key) {
190
- case "Enter":
191
- case " ": {
192
- event.preventDefault();
193
- if (this.#popup.isOpen) {
194
- const option = this.options[this.#highlightedIndex];
195
- if (option && !option.disabled) {
196
- this.#selectOption(option);
197
- }
198
- }
199
- else {
200
- this.#popup.open();
201
- }
202
- break;
203
- }
204
- case "ArrowDown": {
205
- event.preventDefault();
206
- if (!this.#popup.isOpen) {
207
- this.#popup.open();
208
- }
209
- else {
210
- this.#highlightedIndex = this.#nextEnabledIndex(this.#highlightedIndex, 1);
211
- }
212
- break;
239
+ get #selectedOption() {
240
+ return this.options.find((o) => o.value === this.value);
241
+ }
242
+ get #selectedIndex() {
243
+ return this.options.findIndex((o) => o.value === this.value);
244
+ }
245
+ get #displayValue() {
246
+ return this.#selectedOption?.label ?? "";
247
+ }
248
+ // ---- Event handlers ----
249
+ #onTriggerClick = (event) => {
250
+ event.stopPropagation();
251
+ if (this.#isDisabled)
252
+ return;
253
+ if (this.#popup.isOpen) {
254
+ this.#popup.close();
213
255
  }
214
- case "ArrowUp": {
215
- event.preventDefault();
216
- if (!this.#popup.isOpen) {
217
- this.#popup.open();
218
- }
219
- else {
220
- this.#highlightedIndex = this.#nextEnabledIndex(this.#highlightedIndex, -1);
221
- }
222
- break;
256
+ else {
257
+ this.#popup.open();
223
258
  }
224
- case "Home": {
225
- if (this.#popup.isOpen) {
259
+ };
260
+ #onTriggerKeyDown = (event) => {
261
+ if (this.#isDisabled)
262
+ return;
263
+ switch (event.key) {
264
+ case "Enter":
265
+ case " ": {
226
266
  event.preventDefault();
227
- this.#highlightedIndex = this.#nextEnabledIndex(-1, 1);
267
+ if (this.#popup.isOpen) {
268
+ const option = this.options[this.#highlightedIndex];
269
+ if (option && !option.disabled) {
270
+ this.#selectOption(option);
271
+ }
272
+ }
273
+ else {
274
+ this.#popup.open();
275
+ }
276
+ break;
228
277
  }
229
- break;
230
- }
231
- case "End": {
232
- if (this.#popup.isOpen) {
278
+ case "ArrowDown": {
233
279
  event.preventDefault();
234
- this.#highlightedIndex = this.#nextEnabledIndex(this.options.length, -1);
280
+ if (!this.#popup.isOpen) {
281
+ this.#popup.open();
282
+ }
283
+ else {
284
+ this.#highlightedIndex = this.#nextEnabledIndex(this.#highlightedIndex, 1);
285
+ }
286
+ break;
235
287
  }
236
- break;
237
- }
238
- case "Escape": {
239
- if (this.#popup.isOpen) {
288
+ case "ArrowUp": {
240
289
  event.preventDefault();
241
- this.#popup.close();
242
- this.#focusTrigger();
290
+ if (!this.#popup.isOpen) {
291
+ this.#popup.open();
292
+ }
293
+ else {
294
+ this.#highlightedIndex = this.#nextEnabledIndex(this.#highlightedIndex, -1);
295
+ }
296
+ break;
243
297
  }
244
- break;
245
- }
246
- case "Tab": {
247
- if (this.#popup.isOpen) {
248
- this.#popup.close();
298
+ case "Home": {
299
+ if (this.#popup.isOpen) {
300
+ event.preventDefault();
301
+ this.#highlightedIndex = this.#nextEnabledIndex(-1, 1);
302
+ }
303
+ break;
249
304
  }
250
- break;
305
+ case "End": {
306
+ if (this.#popup.isOpen) {
307
+ event.preventDefault();
308
+ this.#highlightedIndex = this.#nextEnabledIndex(this.options.length, -1);
309
+ }
310
+ break;
311
+ }
312
+ case "Escape": {
313
+ if (this.#popup.isOpen) {
314
+ event.preventDefault();
315
+ this.#popup.close();
316
+ this.#focusTrigger();
317
+ }
318
+ break;
319
+ }
320
+ case "Tab": {
321
+ if (this.#popup.isOpen) {
322
+ this.#popup.close();
323
+ }
324
+ break;
325
+ }
326
+ }
327
+ };
328
+ #onListMouseDown = (event) => {
329
+ event.preventDefault();
330
+ };
331
+ #onItemClick = (option) => {
332
+ if (option.disabled)
333
+ return;
334
+ this.#selectOption(option);
335
+ };
336
+ #onItemMouseEnter = (index) => {
337
+ if (!this.options[index]?.disabled) {
338
+ this.#highlightedIndex = index;
251
339
  }
340
+ };
341
+ // ---- Selection ----
342
+ #selectOption(option) {
343
+ this.value = option.value;
344
+ this._fieldCtx?.markDirty();
345
+ this._fieldCtx?.setFilled(this.value.length > 0);
346
+ this.dispatchEvent(valueChangeEvent({ value: option.value, option }));
347
+ this.#popup.close();
348
+ this.#focusTrigger();
252
349
  }
253
- };
254
- #onListMouseDown = (event) => {
255
- event.preventDefault();
256
- };
257
- #onItemClick = (option) => {
258
- if (option.disabled)
259
- return;
260
- this.#selectOption(option);
261
- };
262
- #onItemMouseEnter = (index) => {
263
- if (!this.options[index]?.disabled) {
264
- this.#highlightedIndex = index;
350
+ #nextEnabledIndex(current, direction) {
351
+ const len = this.options.length;
352
+ let next = current + direction;
353
+ while (next >= 0 && next < len) {
354
+ if (!this.options[next].disabled)
355
+ return next;
356
+ next += direction;
357
+ }
358
+ return current;
265
359
  }
266
- };
267
- // ---- Selection ----
268
- #selectOption(option) {
269
- this.value = option.value;
270
- this._fieldCtx?.markDirty();
271
- this._fieldCtx?.setFilled(this.value.length > 0);
272
- this.dispatchEvent(valueChangeEvent({ value: option.value, option }));
273
- this.#popup.close();
274
- this.#focusTrigger();
275
- }
276
- #nextEnabledIndex(current, direction) {
277
- const len = this.options.length;
278
- let next = current + direction;
279
- while (next >= 0 && next < len) {
280
- if (!this.options[next].disabled)
281
- return next;
282
- next += direction;
360
+ #focusTrigger() {
361
+ const trigger = this.shadowRoot?.querySelector(".Trigger");
362
+ trigger?.focus();
283
363
  }
284
- return current;
285
- }
286
- #focusTrigger() {
287
- const trigger = this.shadowRoot?.querySelector(".Trigger");
288
- trigger?.focus();
289
- }
290
- // ---- Render ----
291
- #renderItem = (option, index) => {
292
- const isSelected = option.value === this.value;
293
- const isHighlighted = index === this.#highlightedIndex;
294
- return html `
364
+ // ---- Render ----
365
+ #renderItem = (option, index) => {
366
+ const isSelected = option.value === this.value;
367
+ const isHighlighted = index === this.#highlightedIndex;
368
+ return html `
295
369
  <div
296
370
  class="Item"
297
371
  role="option"
@@ -305,16 +379,16 @@ export class DuiSelect extends LitElement {
305
379
  >
306
380
  <span class="ItemIndicator">
307
381
  ${isSelected
308
- ? html `<dui-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></dui-icon>`
309
- : nothing}
382
+ ? html `<dui-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></dui-icon>`
383
+ : nothing}
310
384
  </span>
311
385
  <span class="ItemText">${option.label}</span>
312
386
  </div>
313
387
  `;
314
- };
315
- render() {
316
- const hasValue = this.value !== "" && this.#selectedOption != null;
317
- return html `
388
+ };
389
+ render() {
390
+ const hasValue = this.value !== "" && this.#selectedOption != null;
391
+ return html `
318
392
  <div
319
393
  class="Trigger"
320
394
  part="trigger"
@@ -325,8 +399,8 @@ export class DuiSelect extends LitElement {
325
399
  aria-expanded="${this.#popup.isOpen}"
326
400
  aria-controls="${this.#listboxId}"
327
401
  aria-activedescendant="${this.#highlightedIndex >= 0
328
- ? `${this.#listboxId}-option-${this.#highlightedIndex}`
329
- : nothing}"
402
+ ? `${this.#listboxId}-option-${this.#highlightedIndex}`
403
+ : nothing}"
330
404
  aria-labelledby="${this._fieldCtx?.labelId ?? ""}"
331
405
  aria-invalid="${this.#isInvalid}"
332
406
  ?data-disabled="${this.#isDisabled}"
@@ -350,27 +424,10 @@ export class DuiSelect extends LitElement {
350
424
  </div>
351
425
 
352
426
  ${this.name
353
- ? html `<input type="hidden" name="${this.name}" .value="${this.value}" />`
354
- : nothing}
427
+ ? html `<input type="hidden" name="${this.name}" .value="${this.value}" />`
428
+ : nothing}
355
429
  `;
356
- }
357
- }
358
- __decorate([
359
- property({ attribute: false })
360
- ], DuiSelect.prototype, "options", null);
361
- __decorate([
362
- property({ type: String })
363
- ], DuiSelect.prototype, "value", null);
364
- __decorate([
365
- property({ type: String })
366
- ], DuiSelect.prototype, "placeholder", null);
367
- __decorate([
368
- property({ type: Boolean, reflect: true })
369
- ], DuiSelect.prototype, "disabled", null);
370
- __decorate([
371
- property({ type: String })
372
- ], DuiSelect.prototype, "name", null);
373
- __decorate([
374
- consume({ context: fieldContext, subscribe: true }),
375
- state()
376
- ], DuiSelect.prototype, "_fieldCtx", null);
430
+ }
431
+ };
432
+ })();
433
+ export { DuiSelect };
@@ -1,8 +1,36 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
1
+ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
2
+ function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
3
+ var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
4
+ var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
5
+ var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
6
+ var _, done = false;
7
+ for (var i = decorators.length - 1; i >= 0; i--) {
8
+ var context = {};
9
+ for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
10
+ for (var p in contextIn.access) context.access[p] = contextIn.access[p];
11
+ context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
12
+ var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
13
+ if (kind === "accessor") {
14
+ if (result === void 0) continue;
15
+ if (result === null || typeof result !== "object") throw new TypeError("Object expected");
16
+ if (_ = accept(result.get)) descriptor.get = _;
17
+ if (_ = accept(result.set)) descriptor.set = _;
18
+ if (_ = accept(result.init)) initializers.unshift(_);
19
+ }
20
+ else if (_ = accept(result)) {
21
+ if (kind === "field") initializers.unshift(_);
22
+ else descriptor[key] = _;
23
+ }
24
+ }
25
+ if (target) Object.defineProperty(target, contextIn.name, descriptor);
26
+ done = true;
27
+ };
28
+ var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
29
+ var useValue = arguments.length > 2;
30
+ for (var i = 0; i < initializers.length; i++) {
31
+ value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
32
+ }
33
+ return useValue ? value : void 0;
6
34
  };
7
35
  import { css, html, LitElement } from "lit";
8
36
  import { property } from "lit/decorators.js";
@@ -29,22 +57,36 @@ const styles = css `
29
57
  *
30
58
  * @csspart root - The separator element.
31
59
  */
32
- export class DuiSeparator extends LitElement {
33
- static { this.tagName = "dui-separator"; }
34
- static { this.styles = [base, styles]; }
35
- #orientation_accessor_storage = "horizontal";
36
- get orientation() { return this.#orientation_accessor_storage; }
37
- set orientation(value) { this.#orientation_accessor_storage = value; }
38
- render() {
39
- return html `
60
+ let DuiSeparator = (() => {
61
+ let _classSuper = LitElement;
62
+ let _orientation_decorators;
63
+ let _orientation_initializers = [];
64
+ let _orientation_extraInitializers = [];
65
+ return class DuiSeparator extends _classSuper {
66
+ static {
67
+ const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
68
+ _orientation_decorators = [property({ reflect: true })];
69
+ __esDecorate(this, null, _orientation_decorators, { kind: "accessor", name: "orientation", static: false, private: false, access: { has: obj => "orientation" in obj, get: obj => obj.orientation, set: (obj, value) => { obj.orientation = value; } }, metadata: _metadata }, _orientation_initializers, _orientation_extraInitializers);
70
+ if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
71
+ }
72
+ static tagName = "dui-separator";
73
+ static styles = [base, styles];
74
+ #orientation_accessor_storage = __runInitializers(this, _orientation_initializers, "horizontal");
75
+ get orientation() { return this.#orientation_accessor_storage; }
76
+ set orientation(value) { this.#orientation_accessor_storage = value; }
77
+ render() {
78
+ return html `
40
79
  <div
41
80
  part="root"
42
81
  role="separator"
43
82
  aria-orientation="${this.orientation}"
44
83
  ></div>
45
84
  `;
46
- }
47
- }
48
- __decorate([
49
- property({ reflect: true })
50
- ], DuiSeparator.prototype, "orientation", null);
85
+ }
86
+ constructor() {
87
+ super(...arguments);
88
+ __runInitializers(this, _orientation_extraInitializers);
89
+ }
90
+ };
91
+ })();
92
+ export { DuiSeparator };
@@ -18,8 +18,8 @@ const styles = css `
18
18
  * @slot - Default slot for sidebar groups, menus, etc.
19
19
  */
20
20
  export class DuiSidebarContent extends LitElement {
21
- static { this.tagName = "dui-sidebar-content"; }
22
- static { this.styles = [base, styles]; }
21
+ static tagName = "dui-sidebar-content";
22
+ static styles = [base, styles];
23
23
  render() {
24
24
  return html `
25
25
  <dui-scroll-area>
@@ -13,8 +13,8 @@ const styles = css `
13
13
  * @slot - Default slot for footer content (user info, settings, etc.).
14
14
  */
15
15
  export class DuiSidebarFooter extends LitElement {
16
- static { this.tagName = "dui-sidebar-footer"; }
17
- static { this.styles = [base, styles]; }
16
+ static tagName = "dui-sidebar-footer";
17
+ static styles = [base, styles];
18
18
  render() {
19
19
  return html `<slot></slot>`;
20
20
  }