@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.
- package/_deprecated/center/center.js +2 -2
- package/_deprecated/hstack/hstack.js +79 -33
- package/_deprecated/page-inset/page-inset.js +104 -56
- package/_deprecated/vstack/vstack.js +61 -19
- package/accordion/accordion-item.js +217 -147
- package/accordion/accordion.js +214 -149
- package/alert-dialog/alert-dialog-close.js +2 -2
- package/alert-dialog/alert-dialog-popup.js +230 -166
- package/alert-dialog/alert-dialog-trigger.js +2 -2
- package/alert-dialog/alert-dialog.js +128 -73
- package/avatar/avatar.js +175 -115
- package/badge/badge.js +2 -2
- package/breadcrumb/breadcrumb-ellipsis.js +2 -2
- package/breadcrumb/breadcrumb-item.js +2 -2
- package/breadcrumb/breadcrumb-link.js +2 -2
- package/breadcrumb/breadcrumb-page.js +2 -2
- package/breadcrumb/breadcrumb-separator.js +2 -2
- package/breadcrumb/breadcrumb.js +2 -2
- package/button/button.js +109 -65
- package/calendar/calendar.js +368 -290
- package/checkbox/checkbox-group.js +146 -87
- package/checkbox/checkbox.js +232 -167
- package/collapsible/collapsible.js +210 -132
- package/combobox/combobox.js +318 -252
- package/command/command-empty.js +67 -25
- package/command/command-group.js +87 -47
- package/command/command-input.js +84 -44
- package/command/command-item.js +168 -124
- package/command/command-list.js +60 -18
- package/command/command-separator.js +2 -2
- package/command/command-shortcut.js +2 -2
- package/command/command.js +297 -232
- package/data-table/data-table.js +225 -153
- package/dialog/dialog-close.js +2 -2
- package/dialog/dialog-popup.js +247 -181
- package/dialog/dialog-trigger.js +2 -2
- package/dialog/dialog.js +128 -73
- package/dropzone/dropzone.js +310 -249
- package/icon/icon.js +2 -2
- package/input/input.js +204 -143
- package/link/link.js +62 -24
- package/menu/menu-item.js +66 -24
- package/menu/menu.js +189 -136
- package/menubar/menubar.js +142 -91
- package/number-field/number-field.js +277 -204
- package/package.json +2 -2
- package/popover/popover-close.js +2 -2
- package/popover/popover-popup.js +126 -76
- package/popover/popover-trigger.js +2 -2
- package/popover/popover.js +181 -120
- package/portal/portal.js +128 -86
- package/preview-card/preview-card-popup.js +114 -66
- package/preview-card/preview-card-trigger.js +2 -2
- package/preview-card/preview-card.js +211 -142
- package/progress/progress.js +91 -45
- package/radio/radio-group.js +153 -90
- package/radio/radio.js +137 -94
- package/scroll-area/scroll-area.js +382 -283
- package/select/select.js +260 -203
- package/separator/separator.js +60 -18
- package/sidebar/sidebar-content.js +2 -2
- package/sidebar/sidebar-footer.js +2 -2
- package/sidebar/sidebar-group-label.js +2 -2
- package/sidebar/sidebar-group.js +2 -2
- package/sidebar/sidebar-header.js +2 -2
- package/sidebar/sidebar-inset.js +2 -2
- package/sidebar/sidebar-menu-button.js +118 -74
- package/sidebar/sidebar-menu-item.js +2 -2
- package/sidebar/sidebar-menu.js +2 -2
- package/sidebar/sidebar-provider.js +202 -129
- package/sidebar/sidebar-separator.js +2 -2
- package/sidebar/sidebar-trigger.js +2 -2
- package/sidebar/sidebar.js +150 -85
- package/slider/slider.js +217 -159
- package/spinner/spinner.js +70 -28
- package/switch/switch.js +174 -111
- package/tabs/tab.js +89 -47
- package/tabs/tabs-indicator.js +2 -2
- package/tabs/tabs-list.js +92 -54
- package/tabs/tabs-panel.js +90 -44
- package/tabs/tabs.js +130 -71
- package/textarea/textarea.js +153 -95
- package/toggle/toggle-group.js +184 -125
- package/toggle/toggle.js +131 -76
- package/toolbar/toolbar.js +79 -33
- package/tooltip/tooltip-popup.js +108 -60
- package/tooltip/tooltip-trigger.js +93 -55
- package/tooltip/tooltip.js +225 -154
- package/trunc/trunc.js +78 -34
package/textarea/textarea.js
CHANGED
|
@@ -1,9 +1,37 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/textarea */
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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;
|
|
7
35
|
};
|
|
8
36
|
import { css, html, LitElement } from "lit";
|
|
9
37
|
import { property } from "lit/decorators.js";
|
|
@@ -53,62 +81,123 @@ const styles = css `
|
|
|
53
81
|
/**
|
|
54
82
|
* A multi-line text input with resize modes including auto-grow.
|
|
55
83
|
*/
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
84
|
+
let DuiTextarea = (() => {
|
|
85
|
+
let _classSuper = LitElement;
|
|
86
|
+
let _value_decorators;
|
|
87
|
+
let _value_initializers = [];
|
|
88
|
+
let _value_extraInitializers = [];
|
|
89
|
+
let _placeholder_decorators;
|
|
90
|
+
let _placeholder_initializers = [];
|
|
91
|
+
let _placeholder_extraInitializers = [];
|
|
92
|
+
let _disabled_decorators;
|
|
93
|
+
let _disabled_initializers = [];
|
|
94
|
+
let _disabled_extraInitializers = [];
|
|
95
|
+
let _required_decorators;
|
|
96
|
+
let _required_initializers = [];
|
|
97
|
+
let _required_extraInitializers = [];
|
|
98
|
+
let _readonly_decorators;
|
|
99
|
+
let _readonly_initializers = [];
|
|
100
|
+
let _readonly_extraInitializers = [];
|
|
101
|
+
let _rows_decorators;
|
|
102
|
+
let _rows_initializers = [];
|
|
103
|
+
let _rows_extraInitializers = [];
|
|
104
|
+
let _minLength_decorators;
|
|
105
|
+
let _minLength_initializers = [];
|
|
106
|
+
let _minLength_extraInitializers = [];
|
|
107
|
+
let _maxLength_decorators;
|
|
108
|
+
let _maxLength_initializers = [];
|
|
109
|
+
let _maxLength_extraInitializers = [];
|
|
110
|
+
let _name_decorators;
|
|
111
|
+
let _name_initializers = [];
|
|
112
|
+
let _name_extraInitializers = [];
|
|
113
|
+
let _resize_decorators;
|
|
114
|
+
let _resize_initializers = [];
|
|
115
|
+
let _resize_extraInitializers = [];
|
|
116
|
+
let _maxHeight_decorators;
|
|
117
|
+
let _maxHeight_initializers = [];
|
|
118
|
+
let _maxHeight_extraInitializers = [];
|
|
119
|
+
return class DuiTextarea extends _classSuper {
|
|
120
|
+
static {
|
|
121
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
122
|
+
_value_decorators = [property()];
|
|
123
|
+
_placeholder_decorators = [property()];
|
|
124
|
+
_disabled_decorators = [property({ type: Boolean, reflect: true })];
|
|
125
|
+
_required_decorators = [property({ type: Boolean })];
|
|
126
|
+
_readonly_decorators = [property({ type: Boolean })];
|
|
127
|
+
_rows_decorators = [property({ type: Number })];
|
|
128
|
+
_minLength_decorators = [property({ type: Number, attribute: "minlength" })];
|
|
129
|
+
_maxLength_decorators = [property({ type: Number, attribute: "maxlength" })];
|
|
130
|
+
_name_decorators = [property()];
|
|
131
|
+
_resize_decorators = [property()];
|
|
132
|
+
_maxHeight_decorators = [property({ attribute: "max-height" })];
|
|
133
|
+
__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);
|
|
134
|
+
__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);
|
|
135
|
+
__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);
|
|
136
|
+
__esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
|
|
137
|
+
__esDecorate(this, null, _readonly_decorators, { kind: "accessor", name: "readonly", static: false, private: false, access: { has: obj => "readonly" in obj, get: obj => obj.readonly, set: (obj, value) => { obj.readonly = value; } }, metadata: _metadata }, _readonly_initializers, _readonly_extraInitializers);
|
|
138
|
+
__esDecorate(this, null, _rows_decorators, { kind: "accessor", name: "rows", static: false, private: false, access: { has: obj => "rows" in obj, get: obj => obj.rows, set: (obj, value) => { obj.rows = value; } }, metadata: _metadata }, _rows_initializers, _rows_extraInitializers);
|
|
139
|
+
__esDecorate(this, null, _minLength_decorators, { kind: "accessor", name: "minLength", static: false, private: false, access: { has: obj => "minLength" in obj, get: obj => obj.minLength, set: (obj, value) => { obj.minLength = value; } }, metadata: _metadata }, _minLength_initializers, _minLength_extraInitializers);
|
|
140
|
+
__esDecorate(this, null, _maxLength_decorators, { kind: "accessor", name: "maxLength", static: false, private: false, access: { has: obj => "maxLength" in obj, get: obj => obj.maxLength, set: (obj, value) => { obj.maxLength = value; } }, metadata: _metadata }, _maxLength_initializers, _maxLength_extraInitializers);
|
|
141
|
+
__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);
|
|
142
|
+
__esDecorate(this, null, _resize_decorators, { kind: "accessor", name: "resize", static: false, private: false, access: { has: obj => "resize" in obj, get: obj => obj.resize, set: (obj, value) => { obj.resize = value; } }, metadata: _metadata }, _resize_initializers, _resize_extraInitializers);
|
|
143
|
+
__esDecorate(this, null, _maxHeight_decorators, { kind: "accessor", name: "maxHeight", static: false, private: false, access: { has: obj => "maxHeight" in obj, get: obj => obj.maxHeight, set: (obj, value) => { obj.maxHeight = value; } }, metadata: _metadata }, _maxHeight_initializers, _maxHeight_extraInitializers);
|
|
144
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
145
|
+
}
|
|
146
|
+
static tagName = "dui-textarea";
|
|
147
|
+
static shadowRootOptions = {
|
|
148
|
+
...LitElement.shadowRootOptions,
|
|
149
|
+
delegatesFocus: true,
|
|
150
|
+
};
|
|
151
|
+
static styles = [base, styles];
|
|
152
|
+
#value_accessor_storage = __runInitializers(this, _value_initializers, "");
|
|
153
|
+
/** Current textarea value. */
|
|
154
|
+
get value() { return this.#value_accessor_storage; }
|
|
155
|
+
set value(value) { this.#value_accessor_storage = value; }
|
|
156
|
+
#placeholder_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _placeholder_initializers, ""));
|
|
157
|
+
/** Placeholder text. */
|
|
158
|
+
get placeholder() { return this.#placeholder_accessor_storage; }
|
|
159
|
+
set placeholder(value) { this.#placeholder_accessor_storage = value; }
|
|
160
|
+
#disabled_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
161
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
162
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
163
|
+
#required_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _required_initializers, false));
|
|
164
|
+
get required() { return this.#required_accessor_storage; }
|
|
165
|
+
set required(value) { this.#required_accessor_storage = value; }
|
|
166
|
+
#readonly_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _readonly_initializers, false));
|
|
167
|
+
get readonly() { return this.#readonly_accessor_storage; }
|
|
168
|
+
set readonly(value) { this.#readonly_accessor_storage = value; }
|
|
169
|
+
#rows_accessor_storage = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _rows_initializers, undefined));
|
|
170
|
+
/** Number of visible text rows. */
|
|
171
|
+
get rows() { return this.#rows_accessor_storage; }
|
|
172
|
+
set rows(value) { this.#rows_accessor_storage = value; }
|
|
173
|
+
#minLength_accessor_storage = (__runInitializers(this, _rows_extraInitializers), __runInitializers(this, _minLength_initializers, undefined));
|
|
174
|
+
get minLength() { return this.#minLength_accessor_storage; }
|
|
175
|
+
set minLength(value) { this.#minLength_accessor_storage = value; }
|
|
176
|
+
#maxLength_accessor_storage = (__runInitializers(this, _minLength_extraInitializers), __runInitializers(this, _maxLength_initializers, undefined));
|
|
177
|
+
get maxLength() { return this.#maxLength_accessor_storage; }
|
|
178
|
+
set maxLength(value) { this.#maxLength_accessor_storage = value; }
|
|
179
|
+
#name_accessor_storage = (__runInitializers(this, _maxLength_extraInitializers), __runInitializers(this, _name_initializers, ""));
|
|
180
|
+
get name() { return this.#name_accessor_storage; }
|
|
181
|
+
set name(value) { this.#name_accessor_storage = value; }
|
|
182
|
+
#resize_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _resize_initializers, "vertical"));
|
|
183
|
+
/** Resize behavior: "none" | "vertical" | "horizontal" | "both" | "auto". */
|
|
184
|
+
get resize() { return this.#resize_accessor_storage; }
|
|
185
|
+
set resize(value) { this.#resize_accessor_storage = value; }
|
|
186
|
+
#maxHeight_accessor_storage = (__runInitializers(this, _resize_extraInitializers), __runInitializers(this, _maxHeight_initializers, undefined));
|
|
187
|
+
/** Maximum height (CSS value). Textarea scrolls when content exceeds this. */
|
|
188
|
+
get maxHeight() { return this.#maxHeight_accessor_storage; }
|
|
189
|
+
set maxHeight(value) { this.#maxHeight_accessor_storage = value; }
|
|
190
|
+
#onInput = (__runInitializers(this, _maxHeight_extraInitializers), (event) => {
|
|
191
|
+
const target = event.target;
|
|
192
|
+
this.value = target.value;
|
|
193
|
+
this.dispatchEvent(textareaChangeEvent({ value: this.value }));
|
|
110
194
|
});
|
|
111
|
-
|
|
195
|
+
render() {
|
|
196
|
+
const textAreaStyles = styleMap({
|
|
197
|
+
overflowY: this.maxHeight === undefined ? "auto" : "initial",
|
|
198
|
+
maxHeight: this.maxHeight ?? "initial",
|
|
199
|
+
});
|
|
200
|
+
return html `
|
|
112
201
|
<textarea
|
|
113
202
|
part="textarea"
|
|
114
203
|
style=${textAreaStyles}
|
|
@@ -125,38 +214,7 @@ export class DuiTextarea extends LitElement {
|
|
|
125
214
|
@input=${this.#onInput}
|
|
126
215
|
></textarea>
|
|
127
216
|
`;
|
|
128
|
-
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
], DuiTextarea.prototype, "value", null);
|
|
133
|
-
__decorate([
|
|
134
|
-
property()
|
|
135
|
-
], DuiTextarea.prototype, "placeholder", null);
|
|
136
|
-
__decorate([
|
|
137
|
-
property({ type: Boolean, reflect: true })
|
|
138
|
-
], DuiTextarea.prototype, "disabled", null);
|
|
139
|
-
__decorate([
|
|
140
|
-
property({ type: Boolean })
|
|
141
|
-
], DuiTextarea.prototype, "required", null);
|
|
142
|
-
__decorate([
|
|
143
|
-
property({ type: Boolean })
|
|
144
|
-
], DuiTextarea.prototype, "readonly", null);
|
|
145
|
-
__decorate([
|
|
146
|
-
property({ type: Number })
|
|
147
|
-
], DuiTextarea.prototype, "rows", null);
|
|
148
|
-
__decorate([
|
|
149
|
-
property({ type: Number, attribute: "minlength" })
|
|
150
|
-
], DuiTextarea.prototype, "minLength", null);
|
|
151
|
-
__decorate([
|
|
152
|
-
property({ type: Number, attribute: "maxlength" })
|
|
153
|
-
], DuiTextarea.prototype, "maxLength", null);
|
|
154
|
-
__decorate([
|
|
155
|
-
property()
|
|
156
|
-
], DuiTextarea.prototype, "name", null);
|
|
157
|
-
__decorate([
|
|
158
|
-
property()
|
|
159
|
-
], DuiTextarea.prototype, "resize", null);
|
|
160
|
-
__decorate([
|
|
161
|
-
property({ attribute: "max-height" })
|
|
162
|
-
], DuiTextarea.prototype, "maxHeight", null);
|
|
217
|
+
}
|
|
218
|
+
};
|
|
219
|
+
})();
|
|
220
|
+
export { DuiTextarea };
|
package/toggle/toggle-group.js
CHANGED
|
@@ -1,8 +1,40 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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;
|
|
34
|
+
};
|
|
35
|
+
var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
|
|
36
|
+
if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
|
|
37
|
+
return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
|
|
6
38
|
};
|
|
7
39
|
import { css, html, LitElement } from "lit";
|
|
8
40
|
import { property, state } from "lit/decorators.js";
|
|
@@ -32,108 +64,155 @@ const styles = css `
|
|
|
32
64
|
* @csspart root - The group container.
|
|
33
65
|
* @fires value-change - Fired when selection changes. Detail: { value: string[] }
|
|
34
66
|
*/
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
this
|
|
67
|
+
let DuiToggleGroup = (() => {
|
|
68
|
+
let _classSuper = LitElement;
|
|
69
|
+
let _value_decorators;
|
|
70
|
+
let _value_initializers = [];
|
|
71
|
+
let _value_extraInitializers = [];
|
|
72
|
+
let _defaultValue_decorators;
|
|
73
|
+
let _defaultValue_initializers = [];
|
|
74
|
+
let _defaultValue_extraInitializers = [];
|
|
75
|
+
let _type_decorators;
|
|
76
|
+
let _type_initializers = [];
|
|
77
|
+
let _type_extraInitializers = [];
|
|
78
|
+
let _orientation_decorators;
|
|
79
|
+
let _orientation_initializers = [];
|
|
80
|
+
let _orientation_extraInitializers = [];
|
|
81
|
+
let _disabled_decorators;
|
|
82
|
+
let _disabled_initializers = [];
|
|
83
|
+
let _disabled_extraInitializers = [];
|
|
84
|
+
let _loop_decorators;
|
|
85
|
+
let _loop_initializers = [];
|
|
86
|
+
let _loop_extraInitializers = [];
|
|
87
|
+
let _private_internalValue_decorators;
|
|
88
|
+
let _private_internalValue_initializers = [];
|
|
89
|
+
let _private_internalValue_extraInitializers = [];
|
|
90
|
+
let _private_internalValue_descriptor;
|
|
91
|
+
let __ctx_decorators;
|
|
92
|
+
let __ctx_initializers = [];
|
|
93
|
+
let __ctx_extraInitializers = [];
|
|
94
|
+
return class DuiToggleGroup extends _classSuper {
|
|
95
|
+
static {
|
|
96
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
97
|
+
_value_decorators = [property({ type: Array })];
|
|
98
|
+
_defaultValue_decorators = [property({ type: Array, attribute: "default-value" })];
|
|
99
|
+
_type_decorators = [property({ reflect: true })];
|
|
100
|
+
_orientation_decorators = [property({ reflect: true })];
|
|
101
|
+
_disabled_decorators = [property({ type: Boolean, reflect: true })];
|
|
102
|
+
_loop_decorators = [property({ type: Boolean })];
|
|
103
|
+
_private_internalValue_decorators = [state()];
|
|
104
|
+
__ctx_decorators = [provide({ context: toggleGroupContext }), state()];
|
|
105
|
+
__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);
|
|
106
|
+
__esDecorate(this, null, _defaultValue_decorators, { kind: "accessor", name: "defaultValue", static: false, private: false, access: { has: obj => "defaultValue" in obj, get: obj => obj.defaultValue, set: (obj, value) => { obj.defaultValue = value; } }, metadata: _metadata }, _defaultValue_initializers, _defaultValue_extraInitializers);
|
|
107
|
+
__esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
|
|
108
|
+
__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);
|
|
109
|
+
__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);
|
|
110
|
+
__esDecorate(this, null, _loop_decorators, { kind: "accessor", name: "loop", static: false, private: false, access: { has: obj => "loop" in obj, get: obj => obj.loop, set: (obj, value) => { obj.loop = value; } }, metadata: _metadata }, _loop_initializers, _loop_extraInitializers);
|
|
111
|
+
__esDecorate(this, _private_internalValue_descriptor = { get: __setFunctionName(function () { return this.#internalValue_accessor_storage; }, "#internalValue", "get"), set: __setFunctionName(function (value) { this.#internalValue_accessor_storage = value; }, "#internalValue", "set") }, _private_internalValue_decorators, { kind: "accessor", name: "#internalValue", static: false, private: true, access: { has: obj => #internalValue in obj, get: obj => obj.#internalValue, set: (obj, value) => { obj.#internalValue = value; } }, metadata: _metadata }, _private_internalValue_initializers, _private_internalValue_extraInitializers);
|
|
112
|
+
__esDecorate(this, null, __ctx_decorators, { kind: "accessor", name: "_ctx", static: false, private: false, access: { has: obj => "_ctx" in obj, get: obj => obj._ctx, set: (obj, value) => { obj._ctx = value; } }, metadata: _metadata }, __ctx_initializers, __ctx_extraInitializers);
|
|
113
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
77
114
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
return
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
115
|
+
static tagName = "dui-toggle-group";
|
|
116
|
+
static styles = [base, styles];
|
|
117
|
+
#value_accessor_storage = __runInitializers(this, _value_initializers, undefined);
|
|
118
|
+
get value() { return this.#value_accessor_storage; }
|
|
119
|
+
set value(value) { this.#value_accessor_storage = value; }
|
|
120
|
+
#defaultValue_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _defaultValue_initializers, []));
|
|
121
|
+
get defaultValue() { return this.#defaultValue_accessor_storage; }
|
|
122
|
+
set defaultValue(value) { this.#defaultValue_accessor_storage = value; }
|
|
123
|
+
#type_accessor_storage = (__runInitializers(this, _defaultValue_extraInitializers), __runInitializers(this, _type_initializers, "single"));
|
|
124
|
+
get type() { return this.#type_accessor_storage; }
|
|
125
|
+
set type(value) { this.#type_accessor_storage = value; }
|
|
126
|
+
#orientation_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _orientation_initializers, "horizontal"));
|
|
127
|
+
get orientation() { return this.#orientation_accessor_storage; }
|
|
128
|
+
set orientation(value) { this.#orientation_accessor_storage = value; }
|
|
129
|
+
#disabled_accessor_storage = (__runInitializers(this, _orientation_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
130
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
131
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
132
|
+
#loop_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _loop_initializers, true));
|
|
133
|
+
get loop() { return this.#loop_accessor_storage; }
|
|
134
|
+
set loop(value) { this.#loop_accessor_storage = value; }
|
|
135
|
+
#internalValue_accessor_storage = (__runInitializers(this, _loop_extraInitializers), __runInitializers(this, _private_internalValue_initializers, []));
|
|
136
|
+
get #internalValue() { return _private_internalValue_descriptor.get.call(this); }
|
|
137
|
+
set #internalValue(value) { return _private_internalValue_descriptor.set.call(this, value); }
|
|
138
|
+
get #currentValue() {
|
|
139
|
+
return this.value ?? this.#internalValue;
|
|
95
140
|
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
const toggles = [
|
|
109
|
-
...this.querySelectorAll("dui-toggle"),
|
|
110
|
-
];
|
|
111
|
-
const focusable = toggles.filter((t) => !t.hasAttribute("disabled"));
|
|
112
|
-
if (focusable.length === 0)
|
|
113
|
-
return;
|
|
114
|
-
const active = this.shadowRoot?.activeElement ??
|
|
115
|
-
document.activeElement;
|
|
116
|
-
const currentToggle = toggles.find((t) => t === active || t.shadowRoot?.activeElement === active || t.contains(active));
|
|
117
|
-
const currentIndex = currentToggle
|
|
118
|
-
? focusable.indexOf(currentToggle)
|
|
119
|
-
: -1;
|
|
120
|
-
let nextIndex;
|
|
121
|
-
if (e.key === nextKey) {
|
|
122
|
-
nextIndex = currentIndex + 1;
|
|
123
|
-
if (nextIndex >= focusable.length) {
|
|
124
|
-
nextIndex = this.loop ? 0 : focusable.length - 1;
|
|
141
|
+
#toggle = (__runInitializers(this, _private_internalValue_extraInitializers), (itemValue) => {
|
|
142
|
+
if (this.disabled)
|
|
143
|
+
return;
|
|
144
|
+
const current = this.#currentValue;
|
|
145
|
+
let next;
|
|
146
|
+
if (this.type === "single") {
|
|
147
|
+
next = current.includes(itemValue) ? [] : [itemValue];
|
|
148
|
+
}
|
|
149
|
+
else {
|
|
150
|
+
next = current.includes(itemValue)
|
|
151
|
+
? current.filter((v) => v !== itemValue)
|
|
152
|
+
: [...current, itemValue];
|
|
125
153
|
}
|
|
154
|
+
if (this.value === undefined) {
|
|
155
|
+
this.#internalValue = next;
|
|
156
|
+
}
|
|
157
|
+
this.dispatchEvent(valueChangeEvent({ value: next }));
|
|
158
|
+
});
|
|
159
|
+
#_ctx_accessor_storage = __runInitializers(this, __ctx_initializers, this.#buildContext());
|
|
160
|
+
get _ctx() { return this.#_ctx_accessor_storage; }
|
|
161
|
+
set _ctx(value) { this.#_ctx_accessor_storage = value; }
|
|
162
|
+
#buildContext() {
|
|
163
|
+
return {
|
|
164
|
+
value: this.#currentValue,
|
|
165
|
+
disabled: this.disabled,
|
|
166
|
+
type: this.type,
|
|
167
|
+
toggle: this.#toggle,
|
|
168
|
+
};
|
|
126
169
|
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
if (
|
|
130
|
-
|
|
170
|
+
connectedCallback() {
|
|
171
|
+
super.connectedCallback();
|
|
172
|
+
if (this.value === undefined && this.defaultValue.length > 0) {
|
|
173
|
+
this.#internalValue = [...this.defaultValue];
|
|
131
174
|
}
|
|
175
|
+
this._ctx = this.#buildContext();
|
|
132
176
|
}
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
177
|
+
willUpdate() {
|
|
178
|
+
this._ctx = this.#buildContext();
|
|
179
|
+
}
|
|
180
|
+
#onKeyDown = (__runInitializers(this, __ctx_extraInitializers), (e) => {
|
|
181
|
+
const isHorizontal = this.orientation === "horizontal";
|
|
182
|
+
const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
|
|
183
|
+
const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
|
|
184
|
+
if (e.key !== nextKey && e.key !== prevKey)
|
|
185
|
+
return;
|
|
186
|
+
e.preventDefault();
|
|
187
|
+
const toggles = [
|
|
188
|
+
...this.querySelectorAll("dui-toggle"),
|
|
189
|
+
];
|
|
190
|
+
const focusable = toggles.filter((t) => !t.hasAttribute("disabled"));
|
|
191
|
+
if (focusable.length === 0)
|
|
192
|
+
return;
|
|
193
|
+
const active = this.shadowRoot?.activeElement ??
|
|
194
|
+
document.activeElement;
|
|
195
|
+
const currentToggle = toggles.find((t) => t === active || t.shadowRoot?.activeElement === active || t.contains(active));
|
|
196
|
+
const currentIndex = currentToggle
|
|
197
|
+
? focusable.indexOf(currentToggle)
|
|
198
|
+
: -1;
|
|
199
|
+
let nextIndex;
|
|
200
|
+
if (e.key === nextKey) {
|
|
201
|
+
nextIndex = currentIndex + 1;
|
|
202
|
+
if (nextIndex >= focusable.length) {
|
|
203
|
+
nextIndex = this.loop ? 0 : focusable.length - 1;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
else {
|
|
207
|
+
nextIndex = currentIndex - 1;
|
|
208
|
+
if (nextIndex < 0) {
|
|
209
|
+
nextIndex = this.loop ? focusable.length - 1 : 0;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
focusable[nextIndex]?.focus();
|
|
213
|
+
});
|
|
214
|
+
render() {
|
|
215
|
+
return html `
|
|
137
216
|
<div
|
|
138
217
|
part="root"
|
|
139
218
|
role="group"
|
|
@@ -143,27 +222,7 @@ export class DuiToggleGroup extends LitElement {
|
|
|
143
222
|
<slot></slot>
|
|
144
223
|
</div>
|
|
145
224
|
`;
|
|
146
|
-
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
], DuiToggleGroup.prototype, "value", null);
|
|
151
|
-
__decorate([
|
|
152
|
-
property({ type: Array, attribute: "default-value" })
|
|
153
|
-
], DuiToggleGroup.prototype, "defaultValue", null);
|
|
154
|
-
__decorate([
|
|
155
|
-
property({ reflect: true })
|
|
156
|
-
], DuiToggleGroup.prototype, "type", null);
|
|
157
|
-
__decorate([
|
|
158
|
-
property({ reflect: true })
|
|
159
|
-
], DuiToggleGroup.prototype, "orientation", null);
|
|
160
|
-
__decorate([
|
|
161
|
-
property({ type: Boolean, reflect: true })
|
|
162
|
-
], DuiToggleGroup.prototype, "disabled", null);
|
|
163
|
-
__decorate([
|
|
164
|
-
property({ type: Boolean })
|
|
165
|
-
], DuiToggleGroup.prototype, "loop", null);
|
|
166
|
-
__decorate([
|
|
167
|
-
provide({ context: toggleGroupContext }),
|
|
168
|
-
state()
|
|
169
|
-
], DuiToggleGroup.prototype, "_ctx", null);
|
|
225
|
+
}
|
|
226
|
+
};
|
|
227
|
+
})();
|
|
228
|
+
export { DuiToggleGroup };
|