@mustib/web-components 0.0.0-alpha.1 → 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.
@@ -1,11 +1,10 @@
1
- import { M as MUElement, _ as __decorate } from '../mu-element-CZDI_RCY.js';
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?.querySelector('slot')?.assignedElements({ flatten: true }).forEach(el => {
44
+ this.shadowRoot
45
+ ?.querySelector('slot')
46
+ ?.assignedElements({ flatten: true })
47
+ .forEach((el) => {
46
48
  if (el instanceof MuTransparent) {
47
- el.contents.forEach(el => addElement(el));
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 && this.comboboxElement?.setAttribute('aria-autocomplete', 'list');
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 ? this.comboboxElement?.setAttribute('aria-controls', id) : this.comboboxElement?.removeAttribute('aria-controls');
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 ? this.comboboxElement?.setAttribute('aria-activedescendant', id) : this.comboboxElement?.removeAttribute('aria-activedescendant');
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 ? this.labelElement?.contentEl : this.labelElement;
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
- ` : this._valueType === 'template' ?
235
- html `
243
+ `
244
+ : this._valueType === 'template'
245
+ ? html `
236
246
  <mu-select-label-content part='template' type='template'></mu-select-label-content>
237
- ` : nothing;
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 = [MUElement.cssBase, css `
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
- staticProperty()
353
+ property()
340
354
  ], MuSelectLabel.prototype, "label", void 0);
341
355
  __decorate([
342
- staticProperty()
356
+ property()
343
357
  ], MuSelectLabel.prototype, "legend", void 0);
344
358
  __decorate([
345
- staticProperty()
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, MuSelectItemsEvents } from './mu-select-items.js';
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 MuSelectEvents = {
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: MuSelectItemsEvents["mu-select-items-change"]) => void;
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 MuSelectEvents {
66
+ interface GlobalEventHandlersEventMap extends Events {
59
67
  }
60
68
  }
61
69
 
62
70
  export { MuSelect };
63
- export type { MuSelectEvents };
71
+ export type { MuSelectComponent };
@@ -1,10 +1,9 @@
1
- import { M as MUElement, E as EventAction, _ as __decorate } from '../mu-element-CZDI_RCY.js';
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(el => assignElement(el));
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', (e) => {
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
- this._itemsElement && (this._itemsElement.opened = this.opened);
146
- this._labelElement && (this._labelElement.opened = this.opened);
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
- this._itemsElement && (this._itemsElement.disabled = this.disabled);
168
- this._labelElement && (this._labelElement.disabled = this.disabled);
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 = [MUElement.cssBase, css `
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
- "remove-last-value"(data) {
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 ? 'template' : 'item';
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', { switchBack: switchBack === 'true' });
271
+ event.currentTarget._itemsElement?.switchActiveItem('next', {
272
+ switchBack: switchBack === 'true',
273
+ });
264
274
  else if (dir === 'prev')
265
- event.currentTarget._itemsElement?.switchActiveItem('prev', { switchBack: switchBack === 'true' });
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 ? data.actionParam : hasValue(data.matchedTarget) ? data.matchedTarget.value : '';
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 !== undefined;
316
+ return (data.event.currentTarget._itemsElement?.activeValue !==
317
+ undefined);
300
318
  },
301
319
  'no-active-item'(data) {
302
- return data.event.currentTarget._itemsElement?.activeValue === undefined;
320
+ return (data.event.currentTarget._itemsElement?.activeValue ===
321
+ undefined);
303
322
  },
304
323
  template(data) {
305
- return data.event.currentTarget._labelElement?.hasTemplate === true;
324
+ return (data.event.currentTarget._labelElement?.hasTemplate ===
325
+ true);
306
326
  },
307
327
  'no-template'(data) {
308
- return data.event.currentTarget._labelElement?.hasTemplate !== true;
328
+ return (data.event.currentTarget._labelElement?.hasTemplate !==
329
+ true);
309
330
  },
310
331
  'has-active-template'(data) {
311
- return !!data.event.currentTarget._labelElement?.activeTemplateValue;
332
+ return !!data.event.currentTarget._labelElement
333
+ ?.activeTemplateValue;
312
334
  },
313
335
  'no-active-template'(data) {
314
- return !data.event.currentTarget._labelElement?.activeTemplateValue;
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?.hasAutocomplete !== true;
346
+ return (data.event.currentTarget._labelElement
347
+ ?.hasAutocomplete !== true);
324
348
  },
325
349
  'has-autocomplete-value'(data) {
326
- return !!data.event.currentTarget._labelElement?.autocompleteValue;
350
+ return !!data.event.currentTarget._labelElement
351
+ ?.autocompleteValue;
327
352
  },
328
353
  'no-autocomplete-value'(data) {
329
- return !data.event.currentTarget._labelElement?.autocompleteValue;
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
- staticProperty({ converter: Boolean })
363
+ property({
364
+ type: Boolean,
365
+ attribute: 'no-close-after-select',
366
+ })
338
367
  ], MuSelect.prototype, "noCloseAfterSelect", void 0);
339
368
  __decorate([
340
- staticProperty({ converter: Boolean })
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
- "mu-transparent": MuTransparent;
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 { Events };
62
+ export type { MuTransparentComponent };
@@ -1,7 +1,6 @@
1
- import { _ as __decorate, M as MUElement } from '../mu-element-CZDI_RCY.js';
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 '../decorators.js';
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("mu-transparent");
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: any;
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(e: T): {
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 };
@@ -1,8 +1,7 @@
1
- import { _ as __decorate, p as parseJson } from '../mu-element-CZDI_RCY.js';
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, { bubbles: !this.noBubble, composed: true, cancelable: !this.noCancelable, detail: this.detail }));
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 ? this.closestPierce(this.currentTargetSelector) : this;
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 ? this.closestPierce(this.dispatchToSelector) : this;
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(e) {
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, { capture: !this.noCapture });
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, { capture: !this.noCapture });
143
+ this._currentTarget.removeEventListener(this.listenTo, this._listener, {
144
+ capture: !this.noCapture,
145
+ });
134
146
  }
135
147
  }
136
148
  __decorate([
137
- staticProperty()
149
+ property({
150
+ attribute: 'listen-to',
151
+ })
138
152
  ], MuTrigger.prototype, "listenTo", void 0);
139
153
  __decorate([
140
- staticProperty({
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
- staticProperty({ converter: Boolean })
161
+ property({
162
+ type: Boolean,
163
+ attribute: 'stop-propagation',
164
+ })
148
165
  ], MuTrigger.prototype, "stopPropagation", void 0);
149
166
  __decorate([
150
- staticProperty({ converter: Boolean })
167
+ property({
168
+ type: Boolean,
169
+ attribute: 'stop-immediate-propagation',
170
+ })
151
171
  ], MuTrigger.prototype, "stopImmediatePropagation", void 0);
152
172
  __decorate([
153
- staticProperty()
173
+ property()
154
174
  ], MuTrigger.prototype, "dispatch", void 0);
155
175
  __decorate([
156
- staticProperty({ converter: Boolean })
176
+ property({
177
+ type: Boolean,
178
+ attribute: 'no-cancelable',
179
+ })
157
180
  ], MuTrigger.prototype, "noCancelable", void 0);
158
181
  __decorate([
159
- staticProperty({ converter: Boolean })
182
+ property({
183
+ type: Boolean,
184
+ attribute: 'no-bubble',
185
+ })
160
186
  ], MuTrigger.prototype, "noBubble", void 0);
161
187
  __decorate([
162
- staticProperty({ converter: Boolean })
188
+ property({
189
+ type: Boolean,
190
+ attribute: 'no-capture',
191
+ })
163
192
  ], MuTrigger.prototype, "noCapture", void 0);
164
193
  __decorate([
165
- staticProperty()
194
+ property({
195
+ attribute: 'current-target-selector',
196
+ })
166
197
  ], MuTrigger.prototype, "currentTargetSelector", void 0);
167
198
  __decorate([
168
- staticProperty({ converter: Boolean })
199
+ property({
200
+ type: Boolean,
201
+ attribute: 'no-prevent-default',
202
+ })
169
203
  ], MuTrigger.prototype, "noPreventDefault", void 0);
170
204
  __decorate([
171
- staticProperty()
205
+ property({
206
+ attribute: 'dispatch-to-selector',
207
+ })
172
208
  ], MuTrigger.prototype, "dispatchToSelector", void 0);
173
209
  MuTrigger.register('mu-trigger');
174
210