@universal-material/web 3.0.75 → 3.0.76
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/button/button.d.ts +1 -1
- package/button/button.js.map +1 -1
- package/chip-field/chip-field.d.ts +18 -1
- package/chip-field/chip-field.d.ts.map +1 -1
- package/chip-field/chip-field.js +20 -7
- package/chip-field/chip-field.js.map +1 -1
- package/custom-elements.json +6458 -6379
- package/field/field-base.d.ts +18 -2
- package/field/field-base.d.ts.map +1 -1
- package/field/field-base.js +14 -8
- package/field/field-base.js.map +1 -1
- package/navigation/drawer.d.ts.map +1 -1
- package/navigation/drawer.js +5 -1
- package/navigation/drawer.js.map +1 -1
- package/navigation/drawer.styles.d.ts.map +1 -1
- package/navigation/drawer.styles.js +6 -1
- package/navigation/drawer.styles.js.map +1 -1
- package/package.json +1 -1
- package/select/option.js +2 -2
- package/select/option.js.map +1 -1
- package/select/select-navigation-controller.js +8 -8
- package/select/select-navigation-controller.js.map +1 -1
- package/select/select.d.ts +15 -7
- package/select/select.d.ts.map +1 -1
- package/select/select.js +50 -42
- package/select/select.js.map +1 -1
- package/shared/button-wrapper.js +1 -1
- package/shared/button-wrapper.js.map +1 -1
- package/shared/menu-field/menu-field-navigation-controller.js +7 -7
- package/shared/menu-field/menu-field-navigation-controller.js.map +1 -1
- package/shared/menu-field/menu-field.d.ts +2 -2
- package/shared/menu-field/menu-field.d.ts.map +1 -1
- package/shared/menu-field/menu-field.js.map +1 -1
- package/shared/text-field-base/text-field-base.d.ts +3 -0
- package/shared/text-field-base/text-field-base.d.ts.map +1 -1
- package/shared/text-field-base/text-field-base.js +3 -0
- package/shared/text-field-base/text-field-base.js.map +1 -1
- package/typeahead/typeahead.d.ts +45 -3
- package/typeahead/typeahead.d.ts.map +1 -1
- package/typeahead/typeahead.js +37 -6
- package/typeahead/typeahead.js.map +1 -1
- package/shared/redispatch-event.d.ts +0 -2
- package/shared/redispatch-event.d.ts.map +0 -1
- package/shared/redispatch-event.js +0 -14
- package/shared/redispatch-event.js.map +0 -1
package/select/select.js
CHANGED
|
@@ -17,36 +17,44 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
|
|
|
17
17
|
#navigationController;
|
|
18
18
|
#mutationObserver;
|
|
19
19
|
#connected;
|
|
20
|
+
/**
|
|
21
|
+
* The `value` of the selected option
|
|
22
|
+
*/
|
|
20
23
|
get value() {
|
|
21
|
-
return this.
|
|
24
|
+
return this._nativeSelect.value;
|
|
22
25
|
}
|
|
23
26
|
set value(value) {
|
|
24
|
-
this.
|
|
27
|
+
this._nativeSelect.value = value;
|
|
25
28
|
if (!this.#connected) {
|
|
26
29
|
return;
|
|
27
30
|
}
|
|
28
31
|
this.elementInternals.setFormValue(value);
|
|
29
32
|
}
|
|
33
|
+
/**
|
|
34
|
+
* The index of the selected option. When there's no selected option the value is `-1`.
|
|
35
|
+
*/
|
|
30
36
|
get selectedIndex() {
|
|
31
|
-
return this.
|
|
37
|
+
return this._nativeSelect.selectedIndex;
|
|
32
38
|
}
|
|
33
39
|
set selectedIndex(index) {
|
|
34
|
-
this.
|
|
40
|
+
this._nativeSelect.selectedIndex = index;
|
|
35
41
|
}
|
|
42
|
+
/**
|
|
43
|
+
* An `Array` containing the selected `UmOption` or empty if there's no selected option. Multiple selection is not supported.
|
|
44
|
+
*/
|
|
36
45
|
get selectedOptions() {
|
|
37
|
-
return this.
|
|
38
|
-
? [this.
|
|
46
|
+
return this._nativeSelect.selectedOptions.length
|
|
47
|
+
? [this._nativeSelect.selectedOptions[0]._parent]
|
|
39
48
|
: [];
|
|
40
49
|
}
|
|
41
|
-
get
|
|
50
|
+
get _options() {
|
|
42
51
|
const options = Array.from(this.querySelectorAll('u-option'));
|
|
43
52
|
return options
|
|
44
53
|
.filter(o => o.constructor.name === 'UmOption');
|
|
45
54
|
}
|
|
46
55
|
constructor() {
|
|
47
56
|
super();
|
|
48
|
-
this.
|
|
49
|
-
this.nativeSelect = (() => {
|
|
57
|
+
this._nativeSelect = (() => {
|
|
50
58
|
const select = document.createElement('select');
|
|
51
59
|
select.setAttribute('tabindex', '-1');
|
|
52
60
|
select.setAttribute('part', 'select');
|
|
@@ -62,14 +70,14 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
|
|
|
62
70
|
this.#navigationController = new SelectNavigationController(this);
|
|
63
71
|
this.#connected = false;
|
|
64
72
|
this.#handleClick = (e) => {
|
|
65
|
-
this.
|
|
66
|
-
if (!this.
|
|
73
|
+
this._menu.toggle();
|
|
74
|
+
if (!this._menu.open || !this.selectedOptions.length) {
|
|
67
75
|
return;
|
|
68
76
|
}
|
|
69
77
|
this.#navigationController.focusMenu(this.selectedOptions[0], e.detail === 0, false);
|
|
70
78
|
};
|
|
71
79
|
this.#handleMenuOpen = () => {
|
|
72
|
-
this.
|
|
80
|
+
this._button.setAttribute('aria-expanded', 'true');
|
|
73
81
|
this.#setSelectedOption();
|
|
74
82
|
};
|
|
75
83
|
this.#handleMenuOpened = () => {
|
|
@@ -80,14 +88,14 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
|
|
|
80
88
|
option.scrollIntoView({ block: 'nearest' });
|
|
81
89
|
};
|
|
82
90
|
this.#handleMenuClose = () => {
|
|
83
|
-
this.
|
|
91
|
+
this._button.setAttribute('aria-expanded', 'false');
|
|
84
92
|
this.#navigationController.blurMenu();
|
|
85
93
|
};
|
|
86
94
|
this.#mutationObserver = new MutationObserver(() => this._updateOptions());
|
|
87
95
|
this.#mutationObserver.observe(this, { characterData: true, childList: true, subtree: true });
|
|
88
96
|
}
|
|
89
97
|
_updateOptions() {
|
|
90
|
-
const options = this.
|
|
98
|
+
const options = this._options;
|
|
91
99
|
for (const option of options) {
|
|
92
100
|
option._select = this;
|
|
93
101
|
}
|
|
@@ -100,19 +108,19 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
|
|
|
100
108
|
// eslint-disable-next-line no-self-assign
|
|
101
109
|
selectedOption.selected = selectedOption.selected;
|
|
102
110
|
this.empty = !selectedOption.textContent?.trim();
|
|
103
|
-
this.
|
|
111
|
+
this._button.setAttribute('aria-labelledby', selectedOption._listItem.id);
|
|
104
112
|
}
|
|
105
113
|
#updateOptions(options) {
|
|
106
|
-
const maxLength = Math.max(options.length, this.
|
|
114
|
+
const maxLength = Math.max(options.length, this._nativeSelect.children.length);
|
|
107
115
|
for (let i = 0; i < maxLength; i++) {
|
|
108
116
|
const option = options[i];
|
|
109
|
-
const nativeOption = this.
|
|
117
|
+
const nativeOption = this._nativeSelect.children[i];
|
|
110
118
|
if (!option) {
|
|
111
119
|
nativeOption.remove();
|
|
112
120
|
continue;
|
|
113
121
|
}
|
|
114
122
|
if (!nativeOption) {
|
|
115
|
-
this.
|
|
123
|
+
this._nativeSelect.appendChild(option._nativeOption);
|
|
116
124
|
continue;
|
|
117
125
|
}
|
|
118
126
|
nativeOption.insertAdjacentElement('beforebegin', option._nativeOption);
|
|
@@ -136,7 +144,7 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
|
|
|
136
144
|
}
|
|
137
145
|
}
|
|
138
146
|
#setSelectedOption() {
|
|
139
|
-
const options = this.
|
|
147
|
+
const options = this._options;
|
|
140
148
|
const selectedClassOptions = options.filter(o => o.classList.contains('selected'));
|
|
141
149
|
let found = false;
|
|
142
150
|
for (const option of selectedClassOptions) {
|
|
@@ -180,14 +188,14 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
|
|
|
180
188
|
updated(changedProperties) {
|
|
181
189
|
super.updated(changedProperties);
|
|
182
190
|
this.empty = !this.selectedOptions[0]?.textContent?.trim();
|
|
183
|
-
this.elementInternals.setFormValue(this.
|
|
191
|
+
this.elementInternals.setFormValue(this._nativeSelect.value || null);
|
|
184
192
|
}
|
|
185
193
|
attributeChangedCallback(name, _old, value) {
|
|
186
194
|
super.attributeChangedCallback(name, _old, value);
|
|
187
195
|
if (name !== 'disabled') {
|
|
188
196
|
return;
|
|
189
197
|
}
|
|
190
|
-
this.
|
|
198
|
+
this._nativeSelect.disabled = value === null;
|
|
191
199
|
}
|
|
192
200
|
connectedCallback() {
|
|
193
201
|
super.connectedCallback();
|
|
@@ -198,12 +206,12 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
|
|
|
198
206
|
super.disconnectedCallback();
|
|
199
207
|
this.#navigationController.detach();
|
|
200
208
|
this.#connected = false;
|
|
201
|
-
this.
|
|
202
|
-
this.
|
|
203
|
-
this.
|
|
204
|
-
this.
|
|
205
|
-
this.
|
|
206
|
-
this.
|
|
209
|
+
this._nativeSelect.remove();
|
|
210
|
+
this._button.removeEventListener('click', this.#handleClick);
|
|
211
|
+
this._menu.removeEventListener('click', this.#handleMenuClick);
|
|
212
|
+
this._menu.removeEventListener('open', this.#handleMenuOpen);
|
|
213
|
+
this._menu.removeEventListener('opened', this.#handleMenuOpened);
|
|
214
|
+
this._menu.removeEventListener('close', this.#handleMenuClose);
|
|
207
215
|
}
|
|
208
216
|
#handleClick;
|
|
209
217
|
#handleMenuClick(e) {
|
|
@@ -214,20 +222,20 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
|
|
|
214
222
|
#handleMenuClose;
|
|
215
223
|
async #attach() {
|
|
216
224
|
await this.updateComplete;
|
|
217
|
-
this.
|
|
225
|
+
this._nativeSelect.disabled = this.hasAttribute('disabled');
|
|
218
226
|
this.#navigationController.attach(this);
|
|
219
227
|
this._updateOptions();
|
|
220
|
-
this.
|
|
221
|
-
this.
|
|
222
|
-
this.
|
|
223
|
-
this.
|
|
224
|
-
this.
|
|
225
|
-
this.
|
|
226
|
-
this.
|
|
227
|
-
this.
|
|
228
|
-
}
|
|
229
|
-
get
|
|
230
|
-
return this.
|
|
228
|
+
this._input.appendChild(this._nativeSelect);
|
|
229
|
+
this._input.appendChild(this.#list);
|
|
230
|
+
this._button.addEventListener('click', this.#handleClick);
|
|
231
|
+
this._menu.anchorElement = this._container;
|
|
232
|
+
this._menu.addEventListener('click', this.#handleMenuClick);
|
|
233
|
+
this._menu.addEventListener('open', this.#handleMenuOpen);
|
|
234
|
+
this._menu.addEventListener('opened', this.#handleMenuOpened);
|
|
235
|
+
this._menu.addEventListener('close', this.#handleMenuClose);
|
|
236
|
+
}
|
|
237
|
+
get _menuItems() {
|
|
238
|
+
return this._options;
|
|
231
239
|
}
|
|
232
240
|
};
|
|
233
241
|
__decorate([
|
|
@@ -235,13 +243,13 @@ __decorate([
|
|
|
235
243
|
], UmSelect.prototype, "value", null);
|
|
236
244
|
__decorate([
|
|
237
245
|
query('u-menu')
|
|
238
|
-
], UmSelect.prototype, "
|
|
246
|
+
], UmSelect.prototype, "_menu", void 0);
|
|
239
247
|
__decorate([
|
|
240
248
|
query('.button')
|
|
241
|
-
], UmSelect.prototype, "
|
|
249
|
+
], UmSelect.prototype, "_button", void 0);
|
|
242
250
|
__decorate([
|
|
243
251
|
query('.input')
|
|
244
|
-
], UmSelect.prototype, "
|
|
252
|
+
], UmSelect.prototype, "_input", void 0);
|
|
245
253
|
__decorate([
|
|
246
254
|
state()
|
|
247
255
|
], UmSelect.prototype, "selectedIndex", null);
|
package/select/select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, svg, TemplateResult } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { html as staticHtml } from 'lit/static-html.js';\n\nimport { styles } from './select.styles.js';\n\nimport { UmMenu } from '../menu/menu.js';\nimport { UmMenuField } from '../shared/menu-field/menu-field.js';\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\nimport { ExtendedSelect } from './extended-select.js';\nimport { UmOption } from './option.js';\nimport { SelectNavigationController } from './select-navigation-controller.js';\n\nimport './option.js';\n\n@customElement('u-select')\nexport class UmSelect extends UmTextFieldBase implements UmMenuField {\n currentOptionIndex = 1;\n\n static override styles = [UmTextFieldBase.styles, styles];\n\n nativeSelect: ExtendedSelect = (() => {\n const select = <ExtendedSelect>document.createElement('select');\n select.setAttribute('tabindex', '-1');\n select.setAttribute('part', 'select');\n\n return select;\n })();\n\n #list: HTMLElement = (() => {\n const list = document.createElement('div');\n list.role = 'listbox';\n list.id = 'list';\n list.className = 'list';\n\n return list;\n })();\n\n #navigationController = new SelectNavigationController(this);\n readonly #mutationObserver: MutationObserver;\n #connected = false;\n\n @state()\n get value(): string {\n return this.nativeSelect.value;\n }\n set value(value: string) {\n this.nativeSelect.value = value;\n\n if (!this.#connected) {\n return;\n }\n\n this.elementInternals.setFormValue(value);\n }\n\n @query('u-menu') menu!: UmMenu;\n @query('.button') button!: HTMLButtonElement;\n @query('.input') input!: HTMLElement;\n\n @state()\n get selectedIndex(): number {\n return this.nativeSelect.selectedIndex;\n }\n set selectedIndex(index: number) {\n this.nativeSelect.selectedIndex = index;\n }\n\n get selectedOptions(): UmOption[] {\n return this.nativeSelect.selectedOptions.length\n ? [this.nativeSelect.selectedOptions[0]._parent]\n : [];\n }\n\n get options(): UmOption[] {\n const options = Array.from(this.querySelectorAll<UmOption>('u-option'));\n\n return options\n .filter(o => o.constructor.name === 'UmOption');\n }\n\n constructor() {\n super();\n\n this.#mutationObserver = new MutationObserver(() => this._updateOptions())\n this.#mutationObserver.observe(this, {characterData: true, childList: true, subtree: true});\n }\n\n _updateOptions() {\n\n const options = this.options;\n\n for (const option of options) {\n option._select = this;\n }\n\n this.#updateOptions(options);\n this.#updateAccessibilityList(options);\n\n const selectedOption = this.selectedOptions[0];\n\n if (!selectedOption) {\n return;\n }\n\n // eslint-disable-next-line no-self-assign\n selectedOption.selected = selectedOption.selected;\n this.empty = !selectedOption.textContent?.trim();\n this.button.setAttribute('aria-labelledby', selectedOption._listItem.id)\n }\n\n #updateOptions(options: UmOption[]) {\n const maxLength = Math.max(options.length, this.nativeSelect.children.length);\n\n for (let i = 0; i < maxLength; i++) {\n const option = options[i];\n const nativeOption = this.nativeSelect.children[i];\n\n if (!option) {\n nativeOption.remove();\n continue;\n }\n\n if (!nativeOption) {\n this.nativeSelect.appendChild(option._nativeOption);\n continue;\n }\n\n nativeOption.insertAdjacentElement('beforebegin', option._nativeOption);\n }\n }\n\n #updateAccessibilityList(options: UmOption[]) {\n\n const maxLength = Math.max(options.length, this.#list.children.length);\n\n for (let i = 0; i < maxLength; i++) {\n const option = options[i];\n const item = this.#list.children[i];\n\n if (!option) {\n item.remove();\n continue;\n }\n\n option._listItem.id = `item-${i + 1}`;\n\n if (!item) {\n this.#list.appendChild(option._listItem);\n continue;\n }\n\n item.insertAdjacentElement('beforebegin', option._listItem);\n }\n }\n\n #setSelectedOption() {\n const options = this.options;\n\n const selectedClassOptions = options.filter(o => o.classList.contains('selected'));\n\n let found = false;\n\n for (const option of selectedClassOptions) {\n if (option.selected) {\n found = true;\n continue;\n }\n \n option.classList.remove('selected');\n }\n\n if (found) {\n return;\n }\n\n const selectedOption = this.selectedOptions[0];\n\n if (selectedOption) {\n selectedOption.classList.add('selected');\n }\n }\n\n protected override renderControl(): TemplateResult {\n return staticHtml`\n <button \n class=\"button\"\n role=\"combobox\"\n aria-expanded=\"false\"\n aria-owns=\"select\"\n ?disabled=${this.disabled}></button>\n <div class=\"input\"></div>`;\n }\n\n protected override renderAfterContent(): TemplateResult {\n return html`\n <u-menu>\n <slot></slot>\n </u-menu>\n `;\n }\n\n protected override renderDefaultTrailingIcon(): TemplateResult {\n return svg`\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\"/>\n </svg>`;\n }\n\n protected override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n this.empty = !this.selectedOptions[0]?.textContent?.trim();\n this.elementInternals.setFormValue(this.nativeSelect.value || null);\n }\n\n override attributeChangedCallback(name: string, _old: string | null, value: string | null) {\n super.attributeChangedCallback(name, _old, value);\n\n if (name !== 'disabled') {\n return;\n }\n\n this.nativeSelect.disabled = value === null;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#connected = true;\n this.#attach();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.#navigationController.detach();\n this.#connected = false;\n this.nativeSelect.remove();\n this.button.removeEventListener('click', this.#handleClick);\n this.menu.removeEventListener('click', this.#handleMenuClick);\n this.menu.removeEventListener('open', this.#handleMenuOpen);\n this.menu.removeEventListener('opened', this.#handleMenuOpened);\n this.menu.removeEventListener('close', this.#handleMenuClose);\n }\n\n #handleClick = (e: MouseEvent) => {\n this.menu.toggle();\n\n if (!this.menu.open || !this.selectedOptions.length) {\n return;\n }\n\n this.#navigationController.focusMenu(this.selectedOptions[0], e.detail === 0, false);\n };\n\n #handleMenuClick(e: Event) {\n e.stopPropagation();\n }\n\n #handleMenuOpen = () => {\n this.button.setAttribute('aria-expanded', 'true');\n this.#setSelectedOption();\n };\n\n #handleMenuOpened = () => {\n if (!this.selectedOptions.length) {\n return;\n }\n\n const option = this.selectedOptions[0];\n option.scrollIntoView({block: 'nearest'});\n };\n\n #handleMenuClose = () => {\n this.button.setAttribute('aria-expanded', 'false');\n this.#navigationController.blurMenu();\n };\n\n async #attach(): Promise<void> {\n await this.updateComplete;\n\n this.nativeSelect.disabled = this.hasAttribute('disabled');\n\n this.#navigationController.attach(this);\n this._updateOptions();\n\n this.input.appendChild(this.nativeSelect);\n this.input.appendChild(this.#list);\n this.button.addEventListener('click', this.#handleClick);\n\n this.menu.anchorElement = this.container;\n this.menu.addEventListener('click', this.#handleMenuClick);\n this.menu.addEventListener('open', this.#handleMenuOpen);\n this.menu.addEventListener('opened', this.#handleMenuOpened);\n this.menu.addEventListener('close', this.#handleMenuClose);\n }\n\n get menuItems(): UmOption[] {\n return this.options;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-select': UmSelect;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, svg, TemplateResult } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { html as staticHtml } from 'lit/static-html.js';\n\nimport { styles } from './select.styles.js';\n\nimport { UmMenu } from '../menu/menu.js';\nimport { UmMenuField } from '../shared/menu-field/menu-field.js';\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\nimport { ExtendedSelect } from './extended-select.js';\nimport { UmOption } from './option.js';\nimport { SelectNavigationController } from './select-navigation-controller.js';\n\nimport './option.js';\n\n@customElement('u-select')\nexport class UmSelect extends UmTextFieldBase implements UmMenuField {\n\n static override styles = [UmTextFieldBase.styles, styles];\n\n _nativeSelect: ExtendedSelect = (() => {\n const select = <ExtendedSelect>document.createElement('select');\n select.setAttribute('tabindex', '-1');\n select.setAttribute('part', 'select');\n\n return select;\n })();\n\n #list: HTMLElement = (() => {\n const list = document.createElement('div');\n list.role = 'listbox';\n list.id = 'list';\n list.className = 'list';\n\n return list;\n })();\n\n #navigationController = new SelectNavigationController(this);\n readonly #mutationObserver: MutationObserver;\n #connected = false;\n\n /**\n * The `value` of the selected option\n */\n @state()\n get value(): string {\n return this._nativeSelect.value;\n }\n set value(value: string) {\n this._nativeSelect.value = value;\n\n if (!this.#connected) {\n return;\n }\n\n this.elementInternals.setFormValue(value);\n }\n\n @query('u-menu') _menu!: UmMenu;\n @query('.button') _button!: HTMLButtonElement;\n @query('.input') _input!: HTMLElement;\n\n /**\n * The index of the selected option. When there's no selected option the value is `-1`.\n */\n @state()\n get selectedIndex(): number {\n return this._nativeSelect.selectedIndex;\n }\n set selectedIndex(index: number) {\n this._nativeSelect.selectedIndex = index;\n }\n\n /**\n * An `Array` containing the selected `UmOption` or empty if there's no selected option. Multiple selection is not supported.\n */\n get selectedOptions(): UmOption[] {\n return this._nativeSelect.selectedOptions.length\n ? [this._nativeSelect.selectedOptions[0]._parent]\n : [];\n }\n\n get _options(): UmOption[] {\n const options = Array.from(this.querySelectorAll<UmOption>('u-option'));\n\n return options\n .filter(o => o.constructor.name === 'UmOption');\n }\n\n constructor() {\n super();\n\n this.#mutationObserver = new MutationObserver(() => this._updateOptions())\n this.#mutationObserver.observe(this, {characterData: true, childList: true, subtree: true});\n }\n\n _updateOptions() {\n\n const options = this._options;\n\n for (const option of options) {\n option._select = this;\n }\n\n this.#updateOptions(options);\n this.#updateAccessibilityList(options);\n\n const selectedOption = this.selectedOptions[0];\n\n if (!selectedOption) {\n return;\n }\n\n // eslint-disable-next-line no-self-assign\n selectedOption.selected = selectedOption.selected;\n this.empty = !selectedOption.textContent?.trim();\n this._button.setAttribute('aria-labelledby', selectedOption._listItem.id)\n }\n\n #updateOptions(options: UmOption[]) {\n const maxLength = Math.max(options.length, this._nativeSelect.children.length);\n\n for (let i = 0; i < maxLength; i++) {\n const option = options[i];\n const nativeOption = this._nativeSelect.children[i];\n\n if (!option) {\n nativeOption.remove();\n continue;\n }\n\n if (!nativeOption) {\n this._nativeSelect.appendChild(option._nativeOption);\n continue;\n }\n\n nativeOption.insertAdjacentElement('beforebegin', option._nativeOption);\n }\n }\n\n #updateAccessibilityList(options: UmOption[]) {\n\n const maxLength = Math.max(options.length, this.#list.children.length);\n\n for (let i = 0; i < maxLength; i++) {\n const option = options[i];\n const item = this.#list.children[i];\n\n if (!option) {\n item.remove();\n continue;\n }\n\n option._listItem.id = `item-${i + 1}`;\n\n if (!item) {\n this.#list.appendChild(option._listItem);\n continue;\n }\n\n item.insertAdjacentElement('beforebegin', option._listItem);\n }\n }\n\n #setSelectedOption() {\n const options = this._options;\n\n const selectedClassOptions = options.filter(o => o.classList.contains('selected'));\n\n let found = false;\n\n for (const option of selectedClassOptions) {\n if (option.selected) {\n found = true;\n continue;\n }\n \n option.classList.remove('selected');\n }\n\n if (found) {\n return;\n }\n\n const selectedOption = this.selectedOptions[0];\n\n if (selectedOption) {\n selectedOption.classList.add('selected');\n }\n }\n\n protected override renderControl(): TemplateResult {\n return staticHtml`\n <button \n class=\"button\"\n role=\"combobox\"\n aria-expanded=\"false\"\n aria-owns=\"select\"\n ?disabled=${this.disabled}></button>\n <div class=\"input\"></div>`;\n }\n\n protected override renderAfterContent(): TemplateResult {\n return html`\n <u-menu>\n <slot></slot>\n </u-menu>\n `;\n }\n\n protected override renderDefaultTrailingIcon(): TemplateResult {\n return svg`\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\"/>\n </svg>`;\n }\n\n protected override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n this.empty = !this.selectedOptions[0]?.textContent?.trim();\n this.elementInternals.setFormValue(this._nativeSelect.value || null);\n }\n\n override attributeChangedCallback(name: string, _old: string | null, value: string | null) {\n super.attributeChangedCallback(name, _old, value);\n\n if (name !== 'disabled') {\n return;\n }\n\n this._nativeSelect.disabled = value === null;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#connected = true;\n this.#attach();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.#navigationController.detach();\n this.#connected = false;\n this._nativeSelect.remove();\n this._button.removeEventListener('click', this.#handleClick);\n this._menu.removeEventListener('click', this.#handleMenuClick);\n this._menu.removeEventListener('open', this.#handleMenuOpen);\n this._menu.removeEventListener('opened', this.#handleMenuOpened);\n this._menu.removeEventListener('close', this.#handleMenuClose);\n }\n\n #handleClick = (e: MouseEvent) => {\n this._menu.toggle();\n\n if (!this._menu.open || !this.selectedOptions.length) {\n return;\n }\n\n this.#navigationController.focusMenu(this.selectedOptions[0], e.detail === 0, false);\n };\n\n #handleMenuClick(e: Event) {\n e.stopPropagation();\n }\n\n #handleMenuOpen = () => {\n this._button.setAttribute('aria-expanded', 'true');\n this.#setSelectedOption();\n };\n\n #handleMenuOpened = () => {\n if (!this.selectedOptions.length) {\n return;\n }\n\n const option = this.selectedOptions[0];\n option.scrollIntoView({block: 'nearest'});\n };\n\n #handleMenuClose = () => {\n this._button.setAttribute('aria-expanded', 'false');\n this.#navigationController.blurMenu();\n };\n\n async #attach(): Promise<void> {\n await this.updateComplete;\n\n this._nativeSelect.disabled = this.hasAttribute('disabled');\n\n this.#navigationController.attach(this);\n this._updateOptions();\n\n this._input.appendChild(this._nativeSelect);\n this._input.appendChild(this.#list);\n this._button.addEventListener('click', this.#handleClick);\n\n this._menu.anchorElement = this._container;\n this._menu.addEventListener('click', this.#handleMenuClick);\n this._menu.addEventListener('open', this.#handleMenuOpen);\n this._menu.addEventListener('opened', this.#handleMenuOpened);\n this._menu.addEventListener('close', this.#handleMenuClose);\n }\n\n get _menuItems(): UmOption[] {\n return this._options;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-select': UmSelect;\n }\n}\n"]}
|
package/shared/button-wrapper.js
CHANGED
|
@@ -8,7 +8,7 @@ import { html, LitElement, nothing } from 'lit';
|
|
|
8
8
|
import { property, query, state } from 'lit/decorators.js';
|
|
9
9
|
import { styles as baseStyles } from './base.styles.js';
|
|
10
10
|
import { styles } from './button-wrapper.styles';
|
|
11
|
-
import { redispatchEvent } from './redispatch-event.js';
|
|
11
|
+
import { redispatchEvent } from './events/redispatch-event.js';
|
|
12
12
|
import '../elevation/elevation.js';
|
|
13
13
|
import '../ripple/ripple.js';
|
|
14
14
|
export class UmButtonWrapper extends LitElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-wrapper.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGxD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"button-wrapper.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from './base.styles.js';\n\nimport { UmRipple } from '../ripple/ripple.js';\nimport { styles } from './button-wrapper.styles';\nimport { redispatchEvent } from './events/redispatch-event.js';\n\nimport '../elevation/elevation.js';\nimport '../ripple/ripple.js';\n\nexport abstract class UmButtonWrapper extends LitElement {\n\n static override styles: CSSResultGroup = [baseStyles, styles];\n\n /**\n * Whether the button is disabled or not.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n @state() renderRipple = true;\n\n /**\n * The URL that the link button points to.\n */\n @property() href: string | undefined;\n\n /**\n * Where to display the linked `href` URL for a link button. Common options\n * include `_blank` to open in a new tab.\n */\n @property() target: string | undefined;\n\n @property() name: string | undefined;\n\n @query('.button') readonly buttonElement!: HTMLElement;\n @query('u-ripple') private readonly ripple!: UmRipple;\n\n protected innerRole: string | null = null;\n\n get pathname(): string {\n return (<HTMLAnchorElement>this.buttonElement)?.pathname\n }\n\n protected override render(): HTMLTemplateResult {\n return typeof this.href === 'string'\n ? this.renderLink()\n : this.renderButton();\n }\n\n private renderButton() {\n return html`\n <button\n id=\"button\"\n class=\"button focus-ring\"\n ?disabled=${this.disabled}\n aria-label=${this.getAriaLabel() || nothing}\n aria-labelledby=\"${this.getAriaLabel() ? nothing : 'text'}\"\n .role=${this.innerRole}\n type=\"button\"\n @click=${this.#innerClickHandler}>\n <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>\n <u-elevation></u-elevation>\n </button>\n <div class=\"content\">${this.renderContent()}</div>`;\n }\n\n private renderLink() {\n return html`<a\n id=\"link\"\n class=\"button\"\n href=${this.disabled ? nothing : this.href}\n aria-disabled=${this.disabled || nothing}\n aria-label=${this.ariaLabel || nothing}\n aria-labelledby=\"${this.ariaLabel ? nothing : 'text'}\"\n .role=${this.innerRole}\n target=${this.target || nothing}\n @click=${this.#innerClickHandler}>\n <u-elevation></u-elevation>\n <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>\n </a>\n <div class=\"content\">${this.renderContent()}</div>`;\n }\n\n protected abstract renderContent(): HTMLTemplateResult;\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('focus', this.innerFocusHandler)\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener('focus', this.innerFocusHandler);\n }\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n\n this.buttonElement?.blur();\n }\n\n protected getAriaLabel(): string | null {\n return this.ariaLabel;\n }\n\n private innerFocusHandler(): void {\n const tabIndexAttributeValue = this.getAttribute('tabindex');\n\n if (tabIndexAttributeValue !== \"0\") {\n return;\n }\n \n this.removeAttribute('tabindex');\n setTimeout(() => this.buttonElement?.focus());\n }\n\n #innerClickHandler(event: MouseEvent): void {\n \n if (this.disabled) {\n return;\n }\n\n const preventDefault = !redispatchEvent(this, event);\n\n if (preventDefault) {\n return;\n }\n\n if (!(<PointerEvent>event).pointerType) {\n this.ripple.createRipple();\n }\n\n this.handleClick(event);\n }\n\n protected handleClick(_: UIEvent): void {\n\n }\n}\n"]}
|
|
@@ -10,29 +10,29 @@ export class MenuFieldNavigationController {
|
|
|
10
10
|
attach(element) {
|
|
11
11
|
this.detach();
|
|
12
12
|
element?.addEventListener('keydown', this.bindHandleKeyDown, { capture: true });
|
|
13
|
-
this.host.
|
|
13
|
+
this.host._menu?.addEventListener('close', this.#handleMenuClose);
|
|
14
14
|
this.#element = element;
|
|
15
15
|
}
|
|
16
16
|
detach() {
|
|
17
17
|
this.#element?.removeEventListener('keydown', this.bindHandleKeyDown);
|
|
18
|
-
this.host.
|
|
18
|
+
this.host._menu?.removeEventListener('close', this.#handleMenuClose);
|
|
19
19
|
this.#element = null;
|
|
20
20
|
}
|
|
21
21
|
#handleMenuClose;
|
|
22
22
|
handleKeyDown(event) {
|
|
23
|
-
if (!this.host.
|
|
23
|
+
if (!this.host._menu.open) {
|
|
24
24
|
return false;
|
|
25
25
|
}
|
|
26
26
|
const isEscape = event.key === 'Escape';
|
|
27
27
|
if (isEscape) {
|
|
28
|
-
this.host.
|
|
28
|
+
this.host._menu.close();
|
|
29
29
|
}
|
|
30
30
|
if (event.key === 'Home') {
|
|
31
|
-
this.navigateTo(event, this.host.
|
|
31
|
+
this.navigateTo(event, this.host._menuItems[0]);
|
|
32
32
|
return true;
|
|
33
33
|
}
|
|
34
34
|
if (event.key === 'End') {
|
|
35
|
-
this.navigateTo(event, this.host.
|
|
35
|
+
this.navigateTo(event, this.host._menuItems[this.host._menuItems.length - 1]);
|
|
36
36
|
return true;
|
|
37
37
|
}
|
|
38
38
|
const isDown = event.key === 'ArrowDown';
|
|
@@ -50,7 +50,7 @@ export class MenuFieldNavigationController {
|
|
|
50
50
|
return false;
|
|
51
51
|
}
|
|
52
52
|
navigate(event, forwards) {
|
|
53
|
-
const menuItems = this.host.
|
|
53
|
+
const menuItems = this.host._menuItems;
|
|
54
54
|
if (!menuItems.length) {
|
|
55
55
|
return;
|
|
56
56
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-field-navigation-controller.js","sourceRoot":"","sources":["../../../src/shared/menu-field/menu-field-navigation-controller.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,6BAA6B;IACxC,QAAQ,CAA4B;IAMpC,YAAY,IAAY;QANxB,aAAQ,GAAuB,IAAI,CAAC;QAC1B,gBAAW,GAAqB,IAAI,CAAC;QAwB/C,qBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAlBvC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzD,CAAC;IAED,MAAM,CAAC,OAAoB;QACzB,IAAI,CAAC,MAAM,EAAE,CAAC;QAEd,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QAC9E,IAAI,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"menu-field-navigation-controller.js","sourceRoot":"","sources":["../../../src/shared/menu-field/menu-field-navigation-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { UmMenuItem } from '../../menu/menu-item.js';\nimport { UmMenuField } from './menu-field.js';\n\nexport class MenuFieldNavigationController<TField extends UmMenuField, TMenuItem extends UmMenuItem> {\n #element: HTMLElement | null = null;\n protected focusedMenu: TMenuItem | null = null;\n protected readonly host: TField;\n\n private readonly bindHandleKeyDown: (event: KeyboardEvent) => void;\n\n constructor(host: TField) {\n this.host = host;\n this.bindHandleKeyDown = this.handleKeyDown.bind(this);\n }\n\n attach(element: HTMLElement) {\n this.detach();\n\n element?.addEventListener('keydown', this.bindHandleKeyDown, {capture: true});\n this.host._menu?.addEventListener('close', this.#handleMenuClose);\n this.#element = element;\n }\n\n detach() {\n this.#element?.removeEventListener('keydown', this.bindHandleKeyDown);\n this.host._menu?.removeEventListener('close', this.#handleMenuClose);\n this.#element = null;\n }\n\n #handleMenuClose = () => this.blurMenu();\n\n protected handleKeyDown(event: KeyboardEvent): boolean {\n if (!this.host._menu.open) {\n return false;\n }\n\n const isEscape = event.key === 'Escape';\n\n if (isEscape) {\n this.host._menu.close();\n }\n\n if (event.key === 'Home') {\n this.navigateTo(event, <TMenuItem>this.host._menuItems[0]);\n return true;\n }\n\n if (event.key === 'End') {\n this.navigateTo(event, <TMenuItem>this.host._menuItems[this.host._menuItems.length - 1]);\n return true;\n }\n\n const isDown = event.key === 'ArrowDown';\n const isUp = event.key === 'ArrowUp';\n\n if (isDown || isUp) {\n this.navigate(event, isDown);\n return true;\n }\n\n const isEnter = event.key === 'Enter';\n const isTab = event.key === 'Tab';\n\n if (isEnter || isTab) {\n this.selectActiveItem(event);\n return true;\n }\n\n return false;\n }\n\n private navigate(event: KeyboardEvent, forwards: boolean) {\n const menuItems = this.host._menuItems;\n\n if (!menuItems.length) {\n return;\n }\n\n event.preventDefault();\n\n const activeMenu = this.focusedMenu;\n\n const nextMenu = forwards\n ? (<TMenuItem>activeMenu?.nextElementSibling) ?? menuItems[0]\n : (<TMenuItem>activeMenu?.previousElementSibling) ?? menuItems[menuItems.length - 1];\n\n if (!nextMenu) {\n return;\n }\n\n this.navigateTo(event, nextMenu);\n }\n\n protected navigateTo(event: KeyboardEvent, menu: TMenuItem | undefined) {\n event.preventDefault();\n\n this.blurMenu();\n\n if (!menu) {\n return;\n }\n\n this.focusMenu(menu);\n }\n\n focusMenu(menu: TMenuItem, active = true, scroll = true) {\n this.focusedMenu = menu;\n menu.active = active;\n\n if (scroll) {\n menu.scrollIntoView({block: 'nearest'});\n }\n\n this.afterFocus(menu);\n }\n\n blurMenu() {\n if (!this.focusedMenu) {\n return;\n }\n\n this.focusedMenu.active = false;\n this.focusedMenu = null;\n this.afterBlur();\n }\n\n private selectActiveItem(event: KeyboardEvent) {\n if (!this.focusedMenu) {\n return;\n }\n\n event.preventDefault();\n this.focusedMenu.click();\n }\n\n protected afterFocus(_: TMenuItem) {\n\n }\n\n protected afterBlur() {\n\n }\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { UmMenuItem } from '../../menu/menu-item.js';
|
|
2
2
|
import { UmMenu } from '../../menu/menu.js';
|
|
3
3
|
export interface UmMenuField {
|
|
4
|
-
|
|
5
|
-
get
|
|
4
|
+
_menu: UmMenu;
|
|
5
|
+
get _menuItems(): UmMenuItem[];
|
|
6
6
|
}
|
|
7
7
|
//# sourceMappingURL=menu-field.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-field.d.ts","sourceRoot":"","sources":["../../../src/shared/menu-field/menu-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,
|
|
1
|
+
{"version":3,"file":"menu-field.d.ts","sourceRoot":"","sources":["../../../src/shared/menu-field/menu-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,UAAU,IAAI,UAAU,EAAE,CAAC;CAChC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-field.js","sourceRoot":"","sources":["../../../src/shared/menu-field/menu-field.ts"],"names":[],"mappings":"","sourcesContent":["import { UmMenuItem } from '../../menu/menu-item.js';\nimport { UmMenu } from '../../menu/menu.js';\n\nexport interface UmMenuField {\n
|
|
1
|
+
{"version":3,"file":"menu-field.js","sourceRoot":"","sources":["../../../src/shared/menu-field/menu-field.ts"],"names":[],"mappings":"","sourcesContent":["import { UmMenuItem } from '../../menu/menu-item.js';\nimport { UmMenu } from '../../menu/menu.js';\n\nexport interface UmMenuField {\n _menu: UmMenu;\n get _menuItems(): UmMenuItem[];\n}\n"]}
|
|
@@ -4,6 +4,9 @@ export declare abstract class UmTextFieldBase extends UmFieldBase {
|
|
|
4
4
|
static readonly formAssociated = true;
|
|
5
5
|
static styles: CSSResultGroup;
|
|
6
6
|
static shadowRootOptions: ShadowRootInit;
|
|
7
|
+
/**
|
|
8
|
+
* Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.
|
|
9
|
+
*/
|
|
7
10
|
empty: boolean;
|
|
8
11
|
placeholder: string | undefined;
|
|
9
12
|
get form(): HTMLFormElement | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field-base.d.ts","sourceRoot":"","sources":["../../../src/shared/text-field-base/text-field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAM/D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,8BAAsB,eAAgB,SAAQ,WAAW;IACvD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,OAAgB,MAAM,EAAE,cAAc,CAAgC;IAEtE,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;
|
|
1
|
+
{"version":3,"file":"text-field-base.d.ts","sourceRoot":"","sources":["../../../src/shared/text-field-base/text-field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAM/D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,8BAAsB,eAAgB,SAAQ,WAAW;IACvD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,OAAgB,MAAM,EAAE,cAAc,CAAgC;IAEtE,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF;;OAEG;IACM,KAAK,UAAQ;IAEK,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3D,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;;CAMvD"}
|
|
@@ -20,6 +20,9 @@ export class UmTextFieldBase extends UmFieldBase {
|
|
|
20
20
|
}
|
|
21
21
|
constructor() {
|
|
22
22
|
super();
|
|
23
|
+
/**
|
|
24
|
+
* Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.
|
|
25
|
+
*/
|
|
23
26
|
this.empty = true;
|
|
24
27
|
this.elementInternals = this.attachInternals();
|
|
25
28
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field-base.js","sourceRoot":"","sources":["../../../src/shared/text-field-base/text-field-base.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,OAAgB,eAAgB,SAAQ,WAAW;aACvC,mBAAc,GAAG,IAAI,AAAP,CAAQ;aAEtB,WAAM,GAAmB,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/C,CAAgD;aAEtD,sBAAiB,GAAmB;QAClD,GAAG,UAAU,CAAC,iBAAiB;QAC/B,cAAc,EAAE,IAAI;KACrB,AAHgC,CAG/B;
|
|
1
|
+
{"version":3,"file":"text-field-base.js","sourceRoot":"","sources":["../../../src/shared/text-field-base/text-field-base.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,OAAgB,eAAgB,SAAQ,WAAW;aACvC,mBAAc,GAAG,IAAI,AAAP,CAAQ;aAEtB,WAAM,GAAmB,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/C,CAAgD;aAEtD,sBAAiB,GAAmB;QAClD,GAAG,UAAU,CAAC,iBAAiB;QAC/B,cAAc,EAAE,IAAI;KACrB,AAHgC,CAG/B;IASF,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpC,CAAC;IAID;QACE,KAAK,EAAE,CAAC;QAdV;;WAEG;QACM,UAAK,GAAG,IAAI,CAAC;QAYpB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC;;AAX0B;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;oDAAiC","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { styles } from './text-field-base.styles.js';\n\nimport { UmFieldBase } from '../../field/field-base.js';\n\nexport abstract class UmTextFieldBase extends UmFieldBase {\n static readonly formAssociated = true;\n\n static override styles: CSSResultGroup = [UmFieldBase.styles, styles];\n\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.\n */\n override empty = true;\n\n @property({reflect: true}) placeholder: string | undefined;\n\n get form(): HTMLFormElement | null {\n return this.elementInternals.form;\n }\n\n protected readonly elementInternals: ElementInternals;\n\n constructor() {\n super();\n this.elementInternals = this.attachInternals();\n }\n}\n"]}
|
package/typeahead/typeahead.d.ts
CHANGED
|
@@ -11,26 +11,68 @@ export declare class UmTypeahead extends LitElement {
|
|
|
11
11
|
static readonly formAssociated = true;
|
|
12
12
|
static styles: import("lit").CSSResult;
|
|
13
13
|
private target;
|
|
14
|
-
results
|
|
14
|
+
private results;
|
|
15
|
+
/**
|
|
16
|
+
* The datasource of the typeahead. Accepts an `Array` or a `Promise<[]>`.
|
|
17
|
+
*/
|
|
15
18
|
source: (any[] | ((term: string) => Promise<any[]>)) | undefined;
|
|
19
|
+
/**
|
|
20
|
+
* A function return a string based on a result from the `source`. Useful when the source results are objects.
|
|
21
|
+
*/
|
|
16
22
|
formatter: ((value: any) => string) | undefined;
|
|
23
|
+
/**
|
|
24
|
+
* A string representing an HTML to be rendered inside the menu item. If set, it will replace the `u-highlight`.
|
|
25
|
+
*
|
|
26
|
+
* _Note:_ Subject to signature change
|
|
27
|
+
*/
|
|
17
28
|
template: ((term: string, value: any) => string) | undefined;
|
|
29
|
+
/**
|
|
30
|
+
* The time in milliseconds before triggering an update in the results.
|
|
31
|
+
*/
|
|
18
32
|
debounce: number;
|
|
33
|
+
/**
|
|
34
|
+
* The number of suggestions to show
|
|
35
|
+
*/
|
|
19
36
|
limit: number;
|
|
37
|
+
/**
|
|
38
|
+
* How many characters must be typed before show suggestions
|
|
39
|
+
*
|
|
40
|
+
* _Note:_ Not used when the source is a `Promise`
|
|
41
|
+
*/
|
|
20
42
|
minLength: number;
|
|
43
|
+
/**
|
|
44
|
+
* Whether the menu will be show when the target get focus.
|
|
45
|
+
*
|
|
46
|
+
* _Note:_ The `minLength` will still be applied
|
|
47
|
+
*/
|
|
21
48
|
openOnFocus: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* If `true`, model values will not be restricted only to items selected from the menu.
|
|
51
|
+
*/
|
|
22
52
|
editable: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* The value for the `autocomplete` attribute for the target element.
|
|
55
|
+
*/
|
|
23
56
|
autocomplete: 'on' | 'off' | string;
|
|
57
|
+
/**
|
|
58
|
+
* The value for the `spellcheck` attribute for the target element.
|
|
59
|
+
*/
|
|
24
60
|
spellcheck: boolean;
|
|
25
61
|
get form(): HTMLFormElement | null;
|
|
62
|
+
/**
|
|
63
|
+
* Gets or sets the current value of the typeahead.
|
|
64
|
+
*/
|
|
26
65
|
get value(): any;
|
|
27
66
|
set value(value: any);
|
|
28
67
|
focus(): void;
|
|
29
68
|
clear(): void;
|
|
69
|
+
/**
|
|
70
|
+
* The id of the target element to attach the typeahead.
|
|
71
|
+
*/
|
|
30
72
|
get targetId(): string | undefined;
|
|
31
73
|
set targetId(value: string | undefined);
|
|
32
|
-
|
|
33
|
-
|
|
74
|
+
_menu: UmMenu;
|
|
75
|
+
_menuItems: UmMenuItem[];
|
|
34
76
|
constructor();
|
|
35
77
|
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
|
|
36
78
|
connectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typeahead.d.ts","sourceRoot":"","sources":["../../src/typeahead/typeahead.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAM3D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAIzC,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,qBACa,WAAY,SAAQ,UAAU;;IACzC,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,OAAgB,MAAM,0BAAU;IAKhC,OAAO,CAAC,MAAM,CAA6I;IASlJ,OAAO,
|
|
1
|
+
{"version":3,"file":"typeahead.d.ts","sourceRoot":"","sources":["../../src/typeahead/typeahead.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAM3D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAIzC,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,qBACa,WAAY,SAAQ,UAAU;;IACzC,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,OAAgB,MAAM,0BAAU;IAKhC,OAAO,CAAC,MAAM,CAA6I;IASlJ,OAAO,CAAC,OAAO,CAAS;IAEjC;;OAEG;IACM,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAE1E;;OAEG;IACH,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAEhD;;;;OAIG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAE7D;;OAEG;IACsC,QAAQ,SAAO;IAExD;;OAEG;IACsC,KAAK,SAAM;IAEpD;;;;OAIG;IACsC,SAAS,SAAK;IAEvD;;;;OAIG;IACmE,WAAW,UAAS;IAE1F;;OAEG;IACuC,QAAQ,UAAS;IAE3D;;OAEG;IACwB,YAAY,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAS;IAEvE;;OAEG;IACiC,UAAU,UAAS;IAEvD,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,GAAG,CAEf;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,GAAG,EAOnB;IAEQ,KAAK;IAId,KAAK;IASL;;OAEG;IACH,IACI,QAAQ,IAAI,MAAM,GAAG,SAAS,CAEjC;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAMrC;IAEgB,KAAK,EAAG,MAAM,CAAC;IACP,UAAU,EAAG,UAAU,EAAE,CAAC;;IAO1C,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAYhF,iBAAiB;IAQjB,oBAAoB;cAiGV,MAAM,IAAI,kBAAkB;IAuG/C,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,YAAY;CAarB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,WAAW,CAAC;KAC5B;CACF"}
|