@mustib/web-components 0.0.0-alpha.0 → 0.0.0-alpha.2
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/components/mu-element.d.ts +2 -2
- package/components/mu-element.js +1 -2
- package/components/mu-icon.d.ts +6 -0
- package/components/mu-icon.js +15 -10
- package/components/mu-range-fill.d.ts +7 -0
- package/components/mu-range-fill.js +6 -4
- package/components/mu-range-thumb-value.d.ts +7 -0
- package/components/mu-range-thumb-value.js +11 -9
- package/components/mu-range-thumb.d.ts +14 -0
- package/components/mu-range-thumb.js +30 -19
- package/components/mu-range.d.ts +13 -1
- package/components/mu-range.js +124 -55
- package/components/mu-select-item.d.ts +11 -2
- package/components/mu-select-item.js +15 -10
- package/components/mu-select-items.d.ts +25 -13
- package/components/mu-select-items.js +121 -59
- package/components/mu-select-label-content.d.ts +8 -1
- package/components/mu-select-label-content.js +15 -10
- package/components/mu-select-label.d.ts +10 -1
- package/components/mu-select-label.js +39 -25
- package/components/mu-select.d.ts +14 -6
- package/components/mu-select.js +65 -33
- package/components/mu-transparent.d.ts +9 -3
- package/components/mu-transparent.js +3 -5
- package/components/mu-trigger.d.ts +19 -3
- package/components/mu-trigger.js +57 -21
- package/index.d.ts +1 -1
- package/index.js +1 -2
- package/{mu-element-CZDI_RCY.js → mu-element-BTuCCJpo.js} +22 -14
- package/package.json +2 -1
- package/decorators.d.ts +0 -34
- package/decorators.js +0 -50
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import { M as MUElement, _ as __decorate } from '../mu-element-
|
|
1
|
+
import { M as MUElement, _ as __decorate } from '../mu-element-BTuCCJpo.js';
|
|
2
2
|
import { css, html, nothing } from 'lit';
|
|
3
3
|
import './mu-trigger.js';
|
|
4
4
|
import { property, state } from 'lit/decorators.js';
|
|
5
|
-
import { MuSelectLabelContent } from './mu-select-label-content.js';
|
|
6
5
|
import { MuTransparent } from './mu-transparent.js';
|
|
6
|
+
import { MuSelectLabelContent } from './mu-select-label-content.js';
|
|
7
7
|
import './mu-icon.js';
|
|
8
|
-
import { staticProperty } from '../decorators.js';
|
|
9
8
|
import 'lit/directives/repeat.js';
|
|
10
9
|
|
|
11
10
|
class MuSelectLabel extends MUElement {
|
|
@@ -42,9 +41,12 @@ class MuSelectLabel extends MUElement {
|
|
|
42
41
|
}
|
|
43
42
|
}
|
|
44
43
|
};
|
|
45
|
-
this.shadowRoot
|
|
44
|
+
this.shadowRoot
|
|
45
|
+
?.querySelector('slot')
|
|
46
|
+
?.assignedElements({ flatten: true })
|
|
47
|
+
.forEach((el) => {
|
|
46
48
|
if (el instanceof MuTransparent) {
|
|
47
|
-
el.contents.forEach(
|
|
49
|
+
el.contents.forEach(addElement);
|
|
48
50
|
}
|
|
49
51
|
else {
|
|
50
52
|
addElement(el);
|
|
@@ -56,7 +58,8 @@ class MuSelectLabel extends MUElement {
|
|
|
56
58
|
else {
|
|
57
59
|
this.comboboxElement?.setAttribute('role', 'combobox');
|
|
58
60
|
this.comboboxElement?.setAttribute('aria-label', this.label);
|
|
59
|
-
this.hasAutocomplete &&
|
|
61
|
+
this.hasAutocomplete &&
|
|
62
|
+
this.comboboxElement?.setAttribute('aria-autocomplete', 'list');
|
|
60
63
|
this.setListboxId(this._listboxId);
|
|
61
64
|
this.setActiveDescendantId(this._activeDescendantId);
|
|
62
65
|
}
|
|
@@ -79,11 +82,15 @@ class MuSelectLabel extends MUElement {
|
|
|
79
82
|
}
|
|
80
83
|
setListboxId(id) {
|
|
81
84
|
this._listboxId = id;
|
|
82
|
-
id
|
|
85
|
+
id
|
|
86
|
+
? this.comboboxElement?.setAttribute('aria-controls', id)
|
|
87
|
+
: this.comboboxElement?.removeAttribute('aria-controls');
|
|
83
88
|
}
|
|
84
89
|
setActiveDescendantId(id) {
|
|
85
90
|
this._activeDescendantId = id;
|
|
86
|
-
id
|
|
91
|
+
id
|
|
92
|
+
? this.comboboxElement?.setAttribute('aria-activedescendant', id)
|
|
93
|
+
: this.comboboxElement?.removeAttribute('aria-activedescendant');
|
|
87
94
|
}
|
|
88
95
|
connectedCallback() {
|
|
89
96
|
super.connectedCallback();
|
|
@@ -123,7 +130,9 @@ class MuSelectLabel extends MUElement {
|
|
|
123
130
|
}
|
|
124
131
|
}
|
|
125
132
|
get comboboxElement() {
|
|
126
|
-
return this.hasAutocomplete
|
|
133
|
+
return this.hasAutocomplete
|
|
134
|
+
? this.labelElement?.contentEl
|
|
135
|
+
: this.labelElement;
|
|
127
136
|
}
|
|
128
137
|
focus(options) {
|
|
129
138
|
const el = this.hasAutocomplete ? this.labelElement?.contentEl : this;
|
|
@@ -197,7 +206,7 @@ class MuSelectLabel extends MUElement {
|
|
|
197
206
|
}
|
|
198
207
|
get _autocompleteInput() {
|
|
199
208
|
if (this._labelType !== 'autocomplete')
|
|
200
|
-
return;
|
|
209
|
+
return undefined;
|
|
201
210
|
const input = this.labelElement?.contentEl;
|
|
202
211
|
return input instanceof HTMLInputElement ? input : undefined;
|
|
203
212
|
}
|
|
@@ -213,28 +222,30 @@ class MuSelectLabel extends MUElement {
|
|
|
213
222
|
}
|
|
214
223
|
get activeTemplateValue() {
|
|
215
224
|
if (this._valueType !== 'template')
|
|
216
|
-
return;
|
|
225
|
+
return undefined;
|
|
217
226
|
return this.valueElement?.activeTemplateValue;
|
|
218
227
|
}
|
|
219
228
|
render() {
|
|
220
|
-
const label = this.hasAutocomplete
|
|
221
|
-
html `
|
|
229
|
+
const label = this.hasAutocomplete
|
|
230
|
+
? html `
|
|
222
231
|
<mu-select-label-content part='autocomplete' type='autocomplete'>
|
|
223
232
|
<input autocomplete='off' type='text' placeholder=${this.label} id='autocomplete-input' data-is='content'></input>
|
|
224
233
|
</mu-select-label-content>
|
|
225
|
-
`
|
|
226
|
-
html `
|
|
234
|
+
`
|
|
235
|
+
: html `
|
|
227
236
|
<mu-select-label-content type='label'>
|
|
228
237
|
${this.label}
|
|
229
238
|
</mu-select-label-content>
|
|
230
239
|
`;
|
|
231
|
-
const value = this._valueType === 'value'
|
|
232
|
-
html `
|
|
240
|
+
const value = this._valueType === 'value'
|
|
241
|
+
? html `
|
|
233
242
|
<mu-select-label-content part='value' type='value'></mu-select-label-content>
|
|
234
|
-
`
|
|
235
|
-
|
|
243
|
+
`
|
|
244
|
+
: this._valueType === 'template'
|
|
245
|
+
? html `
|
|
236
246
|
<mu-select-label-content part='template' type='template'></mu-select-label-content>
|
|
237
|
-
`
|
|
247
|
+
`
|
|
248
|
+
: nothing;
|
|
238
249
|
return html `
|
|
239
250
|
<fieldset id='container' part='container' class='autocomplete'>
|
|
240
251
|
<slot>
|
|
@@ -251,7 +262,9 @@ class MuSelectLabel extends MUElement {
|
|
|
251
262
|
`;
|
|
252
263
|
}
|
|
253
264
|
}
|
|
254
|
-
MuSelectLabel.styles = [
|
|
265
|
+
MuSelectLabel.styles = [
|
|
266
|
+
MUElement.cssBase,
|
|
267
|
+
css `
|
|
255
268
|
:host(:focus-within) #container,
|
|
256
269
|
:host([opened]) #container {
|
|
257
270
|
--select-label-border-color: var(--mu-select-label-border-color, var(--mu-color-500));
|
|
@@ -331,18 +344,19 @@ MuSelectLabel.styles = [MUElement.cssBase, css `
|
|
|
331
344
|
#autocomplete-input::placeholder {
|
|
332
345
|
all: unset;
|
|
333
346
|
}
|
|
334
|
-
|
|
347
|
+
`,
|
|
348
|
+
];
|
|
335
349
|
__decorate([
|
|
336
350
|
property({ reflect: true, type: Boolean })
|
|
337
351
|
], MuSelectLabel.prototype, "opened", void 0);
|
|
338
352
|
__decorate([
|
|
339
|
-
|
|
353
|
+
property()
|
|
340
354
|
], MuSelectLabel.prototype, "label", void 0);
|
|
341
355
|
__decorate([
|
|
342
|
-
|
|
356
|
+
property()
|
|
343
357
|
], MuSelectLabel.prototype, "legend", void 0);
|
|
344
358
|
__decorate([
|
|
345
|
-
|
|
359
|
+
property()
|
|
346
360
|
], MuSelectLabel.prototype, "type", void 0);
|
|
347
361
|
__decorate([
|
|
348
362
|
state()
|
|
@@ -1,15 +1,23 @@
|
|
|
1
|
+
import { EventAction, GenerateData } from '@mustib/utils/browser';
|
|
1
2
|
import { CSSResultGroup, PropertyValues } from 'lit';
|
|
2
3
|
import { MUElement } from './mu-element.js';
|
|
3
|
-
import { MuSelectItems,
|
|
4
|
+
import { MuSelectItems, MuSelectItemsComponent } from './mu-select-items.js';
|
|
4
5
|
import { MuSelectLabel } from './mu-select-label.js';
|
|
5
|
-
import { EventAction, GenerateData } from '@mustib/utils/browser';
|
|
6
6
|
import './mu-select-item.js';
|
|
7
7
|
import './mu-trigger.js';
|
|
8
8
|
import './mu-transparent.js';
|
|
9
9
|
import './mu-select-label-content.js';
|
|
10
10
|
import './mu-icon.js';
|
|
11
11
|
|
|
12
|
-
type
|
|
12
|
+
type MuSelectComponent = {
|
|
13
|
+
attributes: {
|
|
14
|
+
opened: MuSelect['opened'];
|
|
15
|
+
'no-close-after-select': MuSelect['noCloseAfterSelect'];
|
|
16
|
+
'no-close-after-blur': MuSelect['noCloseAfterBlur'];
|
|
17
|
+
};
|
|
18
|
+
events: Events;
|
|
19
|
+
};
|
|
20
|
+
type Events = {
|
|
13
21
|
'mu-select-opened': CustomEvent;
|
|
14
22
|
'mu-select-closed': CustomEvent;
|
|
15
23
|
};
|
|
@@ -42,7 +50,7 @@ declare class MuSelect extends MUElement {
|
|
|
42
50
|
protected _addEventActionAttributes(): void;
|
|
43
51
|
focus(): void;
|
|
44
52
|
connectedCallback(): void;
|
|
45
|
-
itemsChangeHandler: (e:
|
|
53
|
+
itemsChangeHandler: (e: MuSelectItemsComponent["events"]["mu-select-items-change"]) => void;
|
|
46
54
|
protected _valueChanged(value: string | string[] | undefined): void;
|
|
47
55
|
protected _slotChangeHandler: () => void;
|
|
48
56
|
protected _handleOpenChange(): void;
|
|
@@ -55,9 +63,9 @@ declare global {
|
|
|
55
63
|
interface HTMLElementTagNameMap {
|
|
56
64
|
'mu-select': MuSelect;
|
|
57
65
|
}
|
|
58
|
-
interface GlobalEventHandlersEventMap extends
|
|
66
|
+
interface GlobalEventHandlersEventMap extends Events {
|
|
59
67
|
}
|
|
60
68
|
}
|
|
61
69
|
|
|
62
70
|
export { MuSelect };
|
|
63
|
-
export type {
|
|
71
|
+
export type { MuSelectComponent };
|
package/components/mu-select.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { M as MUElement, E as EventAction, _ as __decorate } from '../mu-element-
|
|
1
|
+
import { M as MUElement, E as EventAction, _ as __decorate } from '../mu-element-BTuCCJpo.js';
|
|
2
2
|
import { css, html } from 'lit';
|
|
3
3
|
import { property, queryAssignedElements } from 'lit/decorators.js';
|
|
4
|
+
import { MuTransparent } from './mu-transparent.js';
|
|
4
5
|
import { MuSelectItems } from './mu-select-items.js';
|
|
5
6
|
import { MuSelectLabel } from './mu-select-label.js';
|
|
6
|
-
import { MuTransparent } from './mu-transparent.js';
|
|
7
|
-
import { staticProperty } from '../decorators.js';
|
|
8
7
|
import './mu-select-item.js';
|
|
9
8
|
import './mu-trigger.js';
|
|
10
9
|
import './mu-select-label-content.js';
|
|
@@ -27,7 +26,7 @@ class MuSelect extends MUElement {
|
|
|
27
26
|
this._isReady = this.generateIsReadyPromise();
|
|
28
27
|
this.eventActionData = {
|
|
29
28
|
eventAction: MuSelect.eventAction,
|
|
30
|
-
events: ['click', 'pointerdown', 'pointerup', 'keydown', 'input']
|
|
29
|
+
events: ['click', 'pointerdown', 'pointerup', 'keydown', 'input'],
|
|
31
30
|
};
|
|
32
31
|
this.itemsChangeHandler = (e) => {
|
|
33
32
|
e.detail.isCurrentSelection && this._valueChanged(e.detail.values);
|
|
@@ -50,9 +49,9 @@ class MuSelect extends MUElement {
|
|
|
50
49
|
this._labelElement = element;
|
|
51
50
|
}
|
|
52
51
|
};
|
|
53
|
-
this._assignedElements.forEach(element => {
|
|
52
|
+
this._assignedElements.forEach((element) => {
|
|
54
53
|
if (element instanceof MuTransparent) {
|
|
55
|
-
element.contents.forEach(
|
|
54
|
+
element.contents.forEach(assignElement);
|
|
56
55
|
}
|
|
57
56
|
else {
|
|
58
57
|
assignElement(element);
|
|
@@ -124,7 +123,7 @@ class MuSelect extends MUElement {
|
|
|
124
123
|
}
|
|
125
124
|
connectedCallback() {
|
|
126
125
|
super.connectedCallback();
|
|
127
|
-
this.addEventListener('focusout', (
|
|
126
|
+
this.addEventListener('focusout', (_e) => {
|
|
128
127
|
if (!this.noCloseAfterBlur)
|
|
129
128
|
this.opened = false;
|
|
130
129
|
});
|
|
@@ -135,15 +134,17 @@ class MuSelect extends MUElement {
|
|
|
135
134
|
this.addEventListener('mu-select-items-change', this.itemsChangeHandler);
|
|
136
135
|
}
|
|
137
136
|
_valueChanged(value) {
|
|
138
|
-
const valueArr = Array.isArray(value) ? value : value?.split(',') ?? [];
|
|
137
|
+
const valueArr = Array.isArray(value) ? value : (value?.split(',') ?? []);
|
|
139
138
|
this._value = valueArr;
|
|
140
139
|
if (this._labelElement) {
|
|
141
140
|
this._labelElement.value = valueArr;
|
|
142
141
|
}
|
|
143
142
|
}
|
|
144
143
|
_handleOpenChange() {
|
|
145
|
-
|
|
146
|
-
|
|
144
|
+
if (this._itemsElement)
|
|
145
|
+
this._itemsElement.opened = this.opened;
|
|
146
|
+
if (this._labelElement)
|
|
147
|
+
this._labelElement.opened = this.opened;
|
|
147
148
|
if (this.opened) {
|
|
148
149
|
this.focus();
|
|
149
150
|
this.dispatchEvent(new CustomEvent('mu-select-opened', { bubbles: true, composed: true }));
|
|
@@ -164,8 +165,10 @@ class MuSelect extends MUElement {
|
|
|
164
165
|
this._handleOpenChange();
|
|
165
166
|
}
|
|
166
167
|
if (_changedProperties.has('disabled')) {
|
|
167
|
-
|
|
168
|
-
|
|
168
|
+
if (this._itemsElement)
|
|
169
|
+
this._itemsElement.disabled = this.disabled;
|
|
170
|
+
if (this._labelElement)
|
|
171
|
+
this._labelElement.disabled = this.disabled;
|
|
169
172
|
}
|
|
170
173
|
}
|
|
171
174
|
async firstUpdated(_changedProperties) {
|
|
@@ -184,7 +187,9 @@ class MuSelect extends MUElement {
|
|
|
184
187
|
`;
|
|
185
188
|
}
|
|
186
189
|
}
|
|
187
|
-
MuSelect.styles = [
|
|
190
|
+
MuSelect.styles = [
|
|
191
|
+
MUElement.cssBase,
|
|
192
|
+
css `
|
|
188
193
|
:host([opened]) #container {
|
|
189
194
|
z-index: 100;
|
|
190
195
|
}
|
|
@@ -195,7 +200,8 @@ MuSelect.styles = [MUElement.cssBase, css `
|
|
|
195
200
|
max-width: 100%;
|
|
196
201
|
margin: auto;
|
|
197
202
|
}
|
|
198
|
-
|
|
203
|
+
`,
|
|
204
|
+
];
|
|
199
205
|
MuSelect.eventAction = new EventAction({
|
|
200
206
|
getEventAttributeName(eventName) {
|
|
201
207
|
return `data-select-${eventName}`;
|
|
@@ -228,7 +234,7 @@ MuSelect.eventAction = new EventAction({
|
|
|
228
234
|
select._canCloseAfterChange = false;
|
|
229
235
|
select._itemsElement?.unselect([value]);
|
|
230
236
|
},
|
|
231
|
-
|
|
237
|
+
'remove-last-value'(data) {
|
|
232
238
|
const select = data.event.currentTarget;
|
|
233
239
|
if (!select.interactable)
|
|
234
240
|
return;
|
|
@@ -239,7 +245,9 @@ MuSelect.eventAction = new EventAction({
|
|
|
239
245
|
else if (data.actionParam === 'item')
|
|
240
246
|
type = 'item';
|
|
241
247
|
else {
|
|
242
|
-
type = select._labelElement?.activeTemplateValue
|
|
248
|
+
type = select._labelElement?.activeTemplateValue
|
|
249
|
+
? 'template'
|
|
250
|
+
: 'item';
|
|
243
251
|
}
|
|
244
252
|
if (type === 'template') {
|
|
245
253
|
const value = select._labelElement?.activeTemplateValue;
|
|
@@ -260,9 +268,13 @@ MuSelect.eventAction = new EventAction({
|
|
|
260
268
|
return;
|
|
261
269
|
const [dir, switchBack] = actionParam.split('-');
|
|
262
270
|
if (dir === 'next')
|
|
263
|
-
event.currentTarget._itemsElement?.switchActiveItem('next', {
|
|
271
|
+
event.currentTarget._itemsElement?.switchActiveItem('next', {
|
|
272
|
+
switchBack: switchBack === 'true',
|
|
273
|
+
});
|
|
264
274
|
else if (dir === 'prev')
|
|
265
|
-
event.currentTarget._itemsElement?.switchActiveItem('prev', {
|
|
275
|
+
event.currentTarget._itemsElement?.switchActiveItem('prev', {
|
|
276
|
+
switchBack: switchBack === 'true',
|
|
277
|
+
});
|
|
266
278
|
},
|
|
267
279
|
'toggle-active-select'(data) {
|
|
268
280
|
data.event.currentTarget._itemsElement?.toggleActiveItemSelect();
|
|
@@ -277,10 +289,15 @@ MuSelect.eventAction = new EventAction({
|
|
|
277
289
|
const select = data.event.currentTarget;
|
|
278
290
|
if (!select.interactable)
|
|
279
291
|
return;
|
|
292
|
+
// biome-ignore lint/suspicious/noExplicitAny: <>
|
|
280
293
|
const hasValue = (el) => typeof el?.value === 'string';
|
|
281
|
-
const value = typeof data.actionParam === 'string' && data.actionParam
|
|
294
|
+
const value = typeof data.actionParam === 'string' && data.actionParam
|
|
295
|
+
? data.actionParam
|
|
296
|
+
: hasValue(data.matchedTarget)
|
|
297
|
+
? data.matchedTarget.value
|
|
298
|
+
: '';
|
|
282
299
|
select._itemsElement?.filterOutItems(value);
|
|
283
|
-
}
|
|
300
|
+
},
|
|
284
301
|
},
|
|
285
302
|
switches: {
|
|
286
303
|
opened(data) {
|
|
@@ -296,22 +313,28 @@ MuSelect.eventAction = new EventAction({
|
|
|
296
313
|
return data.event.currentTarget._value.length > 0;
|
|
297
314
|
},
|
|
298
315
|
'has-active-item'(data) {
|
|
299
|
-
return data.event.currentTarget._itemsElement?.activeValue !==
|
|
316
|
+
return (data.event.currentTarget._itemsElement?.activeValue !==
|
|
317
|
+
undefined);
|
|
300
318
|
},
|
|
301
319
|
'no-active-item'(data) {
|
|
302
|
-
return data.event.currentTarget._itemsElement?.activeValue ===
|
|
320
|
+
return (data.event.currentTarget._itemsElement?.activeValue ===
|
|
321
|
+
undefined);
|
|
303
322
|
},
|
|
304
323
|
template(data) {
|
|
305
|
-
return data.event.currentTarget._labelElement?.hasTemplate ===
|
|
324
|
+
return (data.event.currentTarget._labelElement?.hasTemplate ===
|
|
325
|
+
true);
|
|
306
326
|
},
|
|
307
327
|
'no-template'(data) {
|
|
308
|
-
return data.event.currentTarget._labelElement?.hasTemplate !==
|
|
328
|
+
return (data.event.currentTarget._labelElement?.hasTemplate !==
|
|
329
|
+
true);
|
|
309
330
|
},
|
|
310
331
|
'has-active-template'(data) {
|
|
311
|
-
return !!data.event.currentTarget._labelElement
|
|
332
|
+
return !!data.event.currentTarget._labelElement
|
|
333
|
+
?.activeTemplateValue;
|
|
312
334
|
},
|
|
313
335
|
'no-active-template'(data) {
|
|
314
|
-
return !data.event.currentTarget._labelElement
|
|
336
|
+
return !data.event.currentTarget._labelElement
|
|
337
|
+
?.activeTemplateValue;
|
|
315
338
|
},
|
|
316
339
|
autocomplete(data) {
|
|
317
340
|
const select = data.event.currentTarget;
|
|
@@ -320,24 +343,33 @@ MuSelect.eventAction = new EventAction({
|
|
|
320
343
|
return select._labelElement?.hasAutocomplete === true;
|
|
321
344
|
},
|
|
322
345
|
'no-autocomplete'(data) {
|
|
323
|
-
return data.event.currentTarget._labelElement
|
|
346
|
+
return (data.event.currentTarget._labelElement
|
|
347
|
+
?.hasAutocomplete !== true);
|
|
324
348
|
},
|
|
325
349
|
'has-autocomplete-value'(data) {
|
|
326
|
-
return !!data.event.currentTarget._labelElement
|
|
350
|
+
return !!data.event.currentTarget._labelElement
|
|
351
|
+
?.autocompleteValue;
|
|
327
352
|
},
|
|
328
353
|
'no-autocomplete-value'(data) {
|
|
329
|
-
return !data.event.currentTarget._labelElement
|
|
330
|
-
|
|
331
|
-
|
|
354
|
+
return !data.event.currentTarget._labelElement
|
|
355
|
+
?.autocompleteValue;
|
|
356
|
+
},
|
|
357
|
+
},
|
|
332
358
|
});
|
|
333
359
|
__decorate([
|
|
334
360
|
property({ reflect: true, type: Boolean })
|
|
335
361
|
], MuSelect.prototype, "opened", void 0);
|
|
336
362
|
__decorate([
|
|
337
|
-
|
|
363
|
+
property({
|
|
364
|
+
type: Boolean,
|
|
365
|
+
attribute: 'no-close-after-select',
|
|
366
|
+
})
|
|
338
367
|
], MuSelect.prototype, "noCloseAfterSelect", void 0);
|
|
339
368
|
__decorate([
|
|
340
|
-
|
|
369
|
+
property({
|
|
370
|
+
type: Boolean,
|
|
371
|
+
attribute: 'no-close-after-blur',
|
|
372
|
+
})
|
|
341
373
|
], MuSelect.prototype, "noCloseAfterBlur", void 0);
|
|
342
374
|
__decorate([
|
|
343
375
|
queryAssignedElements({ flatten: true })
|
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
import { MUElement } from './mu-element.js';
|
|
2
1
|
import { CSSResultGroup } from 'lit';
|
|
2
|
+
import { MUElement } from './mu-element.js';
|
|
3
3
|
import '@mustib/utils/browser';
|
|
4
4
|
|
|
5
|
+
type MuTransparentComponent = {
|
|
6
|
+
attributes: {
|
|
7
|
+
'content-selector': MuTransparent['contentSelector'];
|
|
8
|
+
};
|
|
9
|
+
events: Events;
|
|
10
|
+
};
|
|
5
11
|
type Events = {
|
|
6
12
|
'mu-transparent-slotchange': CustomEvent<{
|
|
7
13
|
source: MuTransparent;
|
|
@@ -46,11 +52,11 @@ declare class MuTransparent extends MUElement {
|
|
|
46
52
|
}
|
|
47
53
|
declare global {
|
|
48
54
|
interface HTMLElementTagNameMap {
|
|
49
|
-
|
|
55
|
+
'mu-transparent': MuTransparent;
|
|
50
56
|
}
|
|
51
57
|
interface GlobalEventHandlersEventMap extends Events {
|
|
52
58
|
}
|
|
53
59
|
}
|
|
54
60
|
|
|
55
61
|
export { MuTransparent };
|
|
56
|
-
export type {
|
|
62
|
+
export type { MuTransparentComponent };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { _ as __decorate, M as MUElement } from '../mu-element-
|
|
2
|
-
import { property } from 'lit/decorators.js';
|
|
1
|
+
import { _ as __decorate, M as MUElement } from '../mu-element-BTuCCJpo.js';
|
|
3
2
|
import { css, html } from 'lit';
|
|
4
|
-
import '
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
5
4
|
|
|
6
5
|
/**
|
|
7
6
|
* A base class for "transparent" wrapper components.
|
|
@@ -32,7 +31,6 @@ class MuTransparent extends MUElement {
|
|
|
32
31
|
throw new Error(`No contents found for ${this.tagName}`);
|
|
33
32
|
return Array.from(contents);
|
|
34
33
|
}
|
|
35
|
-
;
|
|
36
34
|
constructor() {
|
|
37
35
|
super();
|
|
38
36
|
this.eventActionData = undefined;
|
|
@@ -70,6 +68,6 @@ MuTransparent.styles = css `
|
|
|
70
68
|
__decorate([
|
|
71
69
|
property({ attribute: 'content-selector' })
|
|
72
70
|
], MuTransparent.prototype, "contentSelector", void 0);
|
|
73
|
-
MuTransparent.register(
|
|
71
|
+
MuTransparent.register('mu-transparent');
|
|
74
72
|
|
|
75
73
|
export { MuTransparent };
|
|
@@ -1,8 +1,23 @@
|
|
|
1
1
|
import { MuTransparent } from './mu-transparent.js';
|
|
2
|
-
import './mu-element.js';
|
|
3
2
|
import 'lit';
|
|
3
|
+
import './mu-element.js';
|
|
4
4
|
import '@mustib/utils/browser';
|
|
5
5
|
|
|
6
|
+
type MuTriggerComponent = {
|
|
7
|
+
attributes: {
|
|
8
|
+
'listen-to': MuTrigger['listenTo'];
|
|
9
|
+
detail: MuTrigger['detail'];
|
|
10
|
+
'stop-propagation': MuTrigger['stopPropagation'];
|
|
11
|
+
'stop-immediate-propagation': MuTrigger['stopImmediatePropagation'];
|
|
12
|
+
dispatch: MuTrigger['dispatch'];
|
|
13
|
+
'no-cancelable': MuTrigger['noCancelable'];
|
|
14
|
+
'no-bubble': MuTrigger['noBubble'];
|
|
15
|
+
'no-capture': MuTrigger['noCapture'];
|
|
16
|
+
'current-target-selector': MuTrigger['currentTargetSelector'];
|
|
17
|
+
'no-prevent-default': MuTrigger['noPreventDefault'];
|
|
18
|
+
'dispatch-to-selector': MuTrigger['dispatchToSelector'];
|
|
19
|
+
};
|
|
20
|
+
};
|
|
6
21
|
/**
|
|
7
22
|
* `<mu-trigger>` is a helper element that listens for a specified event
|
|
8
23
|
* (e.g., `click`) and dispatches a custom event (e.g., `mu-trigger-toggle`)
|
|
@@ -27,7 +42,7 @@ declare class MuTrigger<T extends Event = Event> extends MuTransparent {
|
|
|
27
42
|
* A JSON string representing the detail to pass to the custom event.
|
|
28
43
|
* @default undefined
|
|
29
44
|
*/
|
|
30
|
-
detail:
|
|
45
|
+
detail: unknown;
|
|
31
46
|
/**
|
|
32
47
|
* A boolean value indicates if the event should call `stopPropagation`.
|
|
33
48
|
* @default false
|
|
@@ -105,7 +120,7 @@ declare class MuTrigger<T extends Event = Event> extends MuTransparent {
|
|
|
105
120
|
* @param e The original event that was fired.
|
|
106
121
|
* @returns {Object} An object with the properties above.
|
|
107
122
|
*/
|
|
108
|
-
protected _createDispatchEvent(
|
|
123
|
+
protected _createDispatchEvent(_e: T): {
|
|
109
124
|
shouldDispatch: boolean;
|
|
110
125
|
eventName: string;
|
|
111
126
|
dispatchElement: Element;
|
|
@@ -127,3 +142,4 @@ declare global {
|
|
|
127
142
|
}
|
|
128
143
|
|
|
129
144
|
export { MuTrigger };
|
|
145
|
+
export type { MuTriggerComponent };
|
package/components/mu-trigger.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { _ as __decorate, p as parseJson } from '../mu-element-
|
|
1
|
+
import { _ as __decorate, p as parseJson } from '../mu-element-BTuCCJpo.js';
|
|
2
|
+
import { property } from 'lit/decorators.js';
|
|
2
3
|
import { MuTransparent } from './mu-transparent.js';
|
|
3
|
-
import { staticProperty } from '../decorators.js';
|
|
4
4
|
import 'lit';
|
|
5
|
-
import 'lit/decorators.js';
|
|
6
5
|
|
|
7
6
|
/**
|
|
8
7
|
* `<mu-trigger>` is a helper element that listens for a specified event
|
|
@@ -79,14 +78,21 @@ class MuTrigger extends MuTransparent {
|
|
|
79
78
|
const { dispatchElement, eventName, shouldDispatch } = this._createDispatchEvent(e);
|
|
80
79
|
if (!shouldDispatch)
|
|
81
80
|
return;
|
|
82
|
-
dispatchElement.dispatchEvent(new CustomEvent(eventName, {
|
|
81
|
+
dispatchElement.dispatchEvent(new CustomEvent(eventName, {
|
|
82
|
+
bubbles: !this.noBubble,
|
|
83
|
+
composed: true,
|
|
84
|
+
cancelable: !this.noCancelable,
|
|
85
|
+
detail: this.detail,
|
|
86
|
+
}));
|
|
83
87
|
};
|
|
84
88
|
}
|
|
85
89
|
/**
|
|
86
90
|
* The current target of the event.
|
|
87
91
|
*/
|
|
88
92
|
get _currentTarget() {
|
|
89
|
-
const currTarget = this.currentTargetSelector
|
|
93
|
+
const currTarget = this.currentTargetSelector
|
|
94
|
+
? this.closestPierce(this.currentTargetSelector)
|
|
95
|
+
: this;
|
|
90
96
|
if (!currTarget) {
|
|
91
97
|
console.warn(`no element found with selector (${this.currentTargetSelector}) as the current target to listen to (${this.listenTo}) events.\nFalling back to the current element`, this);
|
|
92
98
|
}
|
|
@@ -97,7 +103,9 @@ class MuTrigger extends MuTransparent {
|
|
|
97
103
|
* If not provided, the trigger dispatches the event on itself.
|
|
98
104
|
*/
|
|
99
105
|
_getDispatchElement() {
|
|
100
|
-
const element = this.dispatchToSelector
|
|
106
|
+
const element = this.dispatchToSelector
|
|
107
|
+
? this.closestPierce(this.dispatchToSelector)
|
|
108
|
+
: this;
|
|
101
109
|
if (!element)
|
|
102
110
|
console.warn(`no element found with selector ${this.dispatchToSelector} to dispatch ${this.dispatch} to.\nFalling back to the current element`, this);
|
|
103
111
|
return element || this;
|
|
@@ -114,11 +122,11 @@ class MuTrigger extends MuTransparent {
|
|
|
114
122
|
* @param e The original event that was fired.
|
|
115
123
|
* @returns {Object} An object with the properties above.
|
|
116
124
|
*/
|
|
117
|
-
_createDispatchEvent(
|
|
125
|
+
_createDispatchEvent(_e) {
|
|
118
126
|
return {
|
|
119
127
|
shouldDispatch: true,
|
|
120
128
|
eventName: this.dispatch,
|
|
121
|
-
dispatchElement: this._getDispatchElement()
|
|
129
|
+
dispatchElement: this._getDispatchElement(),
|
|
122
130
|
};
|
|
123
131
|
}
|
|
124
132
|
/**
|
|
@@ -126,49 +134,77 @@ class MuTrigger extends MuTransparent {
|
|
|
126
134
|
*/
|
|
127
135
|
connectedCallback() {
|
|
128
136
|
super.connectedCallback();
|
|
129
|
-
this._currentTarget.addEventListener(this.listenTo, this._listener, {
|
|
137
|
+
this._currentTarget.addEventListener(this.listenTo, this._listener, {
|
|
138
|
+
capture: !this.noCapture,
|
|
139
|
+
});
|
|
130
140
|
}
|
|
131
141
|
disconnectedCallback() {
|
|
132
142
|
super.disconnectedCallback();
|
|
133
|
-
this._currentTarget.removeEventListener(this.listenTo, this._listener, {
|
|
143
|
+
this._currentTarget.removeEventListener(this.listenTo, this._listener, {
|
|
144
|
+
capture: !this.noCapture,
|
|
145
|
+
});
|
|
134
146
|
}
|
|
135
147
|
}
|
|
136
148
|
__decorate([
|
|
137
|
-
|
|
149
|
+
property({
|
|
150
|
+
attribute: 'listen-to',
|
|
151
|
+
})
|
|
138
152
|
], MuTrigger.prototype, "listenTo", void 0);
|
|
139
153
|
__decorate([
|
|
140
|
-
|
|
154
|
+
property({
|
|
141
155
|
converter(value) {
|
|
142
156
|
return value ? parseJson(value) : undefined;
|
|
143
157
|
},
|
|
144
158
|
})
|
|
145
159
|
], MuTrigger.prototype, "detail", void 0);
|
|
146
160
|
__decorate([
|
|
147
|
-
|
|
161
|
+
property({
|
|
162
|
+
type: Boolean,
|
|
163
|
+
attribute: 'stop-propagation',
|
|
164
|
+
})
|
|
148
165
|
], MuTrigger.prototype, "stopPropagation", void 0);
|
|
149
166
|
__decorate([
|
|
150
|
-
|
|
167
|
+
property({
|
|
168
|
+
type: Boolean,
|
|
169
|
+
attribute: 'stop-immediate-propagation',
|
|
170
|
+
})
|
|
151
171
|
], MuTrigger.prototype, "stopImmediatePropagation", void 0);
|
|
152
172
|
__decorate([
|
|
153
|
-
|
|
173
|
+
property()
|
|
154
174
|
], MuTrigger.prototype, "dispatch", void 0);
|
|
155
175
|
__decorate([
|
|
156
|
-
|
|
176
|
+
property({
|
|
177
|
+
type: Boolean,
|
|
178
|
+
attribute: 'no-cancelable',
|
|
179
|
+
})
|
|
157
180
|
], MuTrigger.prototype, "noCancelable", void 0);
|
|
158
181
|
__decorate([
|
|
159
|
-
|
|
182
|
+
property({
|
|
183
|
+
type: Boolean,
|
|
184
|
+
attribute: 'no-bubble',
|
|
185
|
+
})
|
|
160
186
|
], MuTrigger.prototype, "noBubble", void 0);
|
|
161
187
|
__decorate([
|
|
162
|
-
|
|
188
|
+
property({
|
|
189
|
+
type: Boolean,
|
|
190
|
+
attribute: 'no-capture',
|
|
191
|
+
})
|
|
163
192
|
], MuTrigger.prototype, "noCapture", void 0);
|
|
164
193
|
__decorate([
|
|
165
|
-
|
|
194
|
+
property({
|
|
195
|
+
attribute: 'current-target-selector',
|
|
196
|
+
})
|
|
166
197
|
], MuTrigger.prototype, "currentTargetSelector", void 0);
|
|
167
198
|
__decorate([
|
|
168
|
-
|
|
199
|
+
property({
|
|
200
|
+
type: Boolean,
|
|
201
|
+
attribute: 'no-prevent-default',
|
|
202
|
+
})
|
|
169
203
|
], MuTrigger.prototype, "noPreventDefault", void 0);
|
|
170
204
|
__decorate([
|
|
171
|
-
|
|
205
|
+
property({
|
|
206
|
+
attribute: 'dispatch-to-selector',
|
|
207
|
+
})
|
|
172
208
|
], MuTrigger.prototype, "dispatchToSelector", void 0);
|
|
173
209
|
MuTrigger.register('mu-trigger');
|
|
174
210
|
|