@digital-realty/ix-select 1.0.6 → 1.0.8
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/dist/IxSelect.d.ts +75 -12
- package/dist/IxSelect.js +164 -98
- package/dist/IxSelect.js.map +1 -1
- package/dist/selectoption/IxSelectOption.d.ts +1 -0
- package/dist/selectoption/IxSelectOption.js +1 -0
- package/dist/selectoption/IxSelectOption.js.map +1 -1
- package/dist/selectoption/selectOptionController.d.ts +3 -1
- package/dist/selectoption/selectOptionController.js.map +1 -1
- package/package.json +6 -2
package/dist/IxSelect.d.ts
CHANGED
|
@@ -2,23 +2,68 @@ import { LitElement, PropertyValues } from 'lit';
|
|
|
2
2
|
import { Select } from '@material/web/select/internal/select.js';
|
|
3
3
|
import '@material/web/select/filled-select.js';
|
|
4
4
|
import '@material/web/select/outlined-select.js';
|
|
5
|
+
import '@digital-realty/ix-icon/ix-icon.js';
|
|
5
6
|
import './selectoption/ix-select-option.js';
|
|
6
|
-
|
|
7
|
+
declare const VALUE: unique symbol;
|
|
7
8
|
export declare class IxSelect extends LitElement {
|
|
9
|
+
/** @nocollapse */
|
|
10
|
+
static shadowRootOptions: ShadowRootInit;
|
|
8
11
|
/** @nocollapse */
|
|
9
12
|
static readonly formAssociated = true;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
component: Select;
|
|
14
|
+
/**
|
|
15
|
+
* The switch between filled and outlined.
|
|
16
|
+
*/
|
|
17
|
+
filled: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* The floating label for the field.
|
|
20
|
+
*/
|
|
21
|
+
label: string;
|
|
22
|
+
/**
|
|
23
|
+
* Opens the menu synchronously with no animation.
|
|
24
|
+
*/
|
|
15
25
|
quick: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Whether or not the select is required.
|
|
28
|
+
*/
|
|
16
29
|
required: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Disables the select.
|
|
32
|
+
*/
|
|
17
33
|
disabled: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* The error message that replaces supporting text when `error` is true. If
|
|
36
|
+
* `errorText` is an empty string, then the supporting text will continue to
|
|
37
|
+
* show.
|
|
38
|
+
*
|
|
39
|
+
* This error message overrides the error message displayed by
|
|
40
|
+
* `reportValidity()`.
|
|
41
|
+
*/
|
|
18
42
|
errorText: string;
|
|
43
|
+
/**
|
|
44
|
+
* Conveys additional information below the select, such as how it should
|
|
45
|
+
* be used.
|
|
46
|
+
*/
|
|
19
47
|
supportingText: string;
|
|
48
|
+
/**
|
|
49
|
+
* Gets or sets whether or not the select is in a visually invalid state.
|
|
50
|
+
*
|
|
51
|
+
* This error state overrides the error state controlled by
|
|
52
|
+
* `reportValidity()`.
|
|
53
|
+
*/
|
|
20
54
|
error: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* Text to display in the field. Only set for SSR.
|
|
57
|
+
*/
|
|
21
58
|
displayText: string;
|
|
59
|
+
/**
|
|
60
|
+
* Name of icon. It is always a string.
|
|
61
|
+
*/
|
|
62
|
+
leadingIcon: string;
|
|
63
|
+
/**
|
|
64
|
+
* Name of icon. It is always a string.
|
|
65
|
+
*/
|
|
66
|
+
trailingIcon: string;
|
|
22
67
|
/**
|
|
23
68
|
* Whether or not the underlying md-menu should be position: fixed to display
|
|
24
69
|
* in a top-level manner, or position: absolute.
|
|
@@ -32,6 +77,14 @@ export declare class IxSelect extends LitElement {
|
|
|
32
77
|
* before it clears the typeahead buffer.
|
|
33
78
|
*/
|
|
34
79
|
typeaheadDelay: number;
|
|
80
|
+
/**
|
|
81
|
+
* The index of the currently selected option.
|
|
82
|
+
*
|
|
83
|
+
* Note: For SSR, set `[selected]` on the requested option and `displayText`
|
|
84
|
+
* rather than setting `selectedIndex` setting `selectedIndex` will incur a
|
|
85
|
+
* DOM query.
|
|
86
|
+
*/
|
|
87
|
+
selectedIndex: number;
|
|
35
88
|
private nativeError;
|
|
36
89
|
private nativeErrorText;
|
|
37
90
|
private get hasError();
|
|
@@ -43,16 +96,26 @@ export declare class IxSelect extends LitElement {
|
|
|
43
96
|
set name(name: string);
|
|
44
97
|
get validity(): ValidityState;
|
|
45
98
|
get value(): string;
|
|
99
|
+
set value(value: string);
|
|
100
|
+
[VALUE]: string;
|
|
46
101
|
get validationMessage(): string;
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
firstUpdated(): void;
|
|
102
|
+
private handleSelection;
|
|
103
|
+
getUpdateComplete(): Promise<boolean>;
|
|
50
104
|
protected updated(changed: PropertyValues<Select>): void;
|
|
51
|
-
render(): import("lit-html").TemplateResult<1> | undefined;
|
|
52
105
|
private getErrorText;
|
|
106
|
+
private syncValidity;
|
|
107
|
+
private getRequiredValidationMessage;
|
|
53
108
|
checkValidity(): boolean;
|
|
54
109
|
reportValidity(): boolean;
|
|
55
110
|
setCustomValidity(error: string): void;
|
|
56
|
-
|
|
57
|
-
|
|
111
|
+
/**
|
|
112
|
+
* Reset the select to its default value.
|
|
113
|
+
*/
|
|
114
|
+
reset(): void;
|
|
115
|
+
/** @private */
|
|
116
|
+
formResetCallback(): void;
|
|
117
|
+
/** @private */
|
|
118
|
+
formStateRestoreCallback(newState: string): void;
|
|
119
|
+
render(): import("lit-html").TemplateResult<2 | 1>;
|
|
58
120
|
}
|
|
121
|
+
export {};
|
package/dist/IxSelect.js
CHANGED
|
@@ -1,22 +1,72 @@
|
|
|
1
|
+
var _a;
|
|
1
2
|
import { __decorate } from "tslib";
|
|
2
|
-
import { html, LitElement, nothing } from 'lit';
|
|
3
|
+
import { html, LitElement, nothing, isServer } from 'lit';
|
|
4
|
+
import { html as staticHtml, literal } from 'lit/static-html.js';
|
|
3
5
|
import { property, query, state } from 'lit/decorators.js';
|
|
6
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
7
|
+
import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
|
|
8
|
+
import { DEFAULT_TYPEAHEAD_BUFFER_TIME } from '@material/web/menu/internal/menu.js';
|
|
4
9
|
import '@material/web/select/filled-select.js';
|
|
5
10
|
import '@material/web/select/outlined-select.js';
|
|
11
|
+
import '@digital-realty/ix-icon/ix-icon.js';
|
|
6
12
|
import './selectoption/ix-select-option.js';
|
|
7
|
-
|
|
13
|
+
const VALUE = Symbol('value');
|
|
8
14
|
export class IxSelect extends LitElement {
|
|
9
15
|
constructor() {
|
|
10
16
|
super(...arguments);
|
|
11
|
-
|
|
17
|
+
/**
|
|
18
|
+
* The switch between filled and outlined.
|
|
19
|
+
*/
|
|
20
|
+
this.filled = false;
|
|
21
|
+
/**
|
|
22
|
+
* The floating label for the field.
|
|
23
|
+
*/
|
|
12
24
|
this.label = '';
|
|
25
|
+
/**
|
|
26
|
+
* Opens the menu synchronously with no animation.
|
|
27
|
+
*/
|
|
13
28
|
this.quick = false;
|
|
29
|
+
/**
|
|
30
|
+
* Whether or not the select is required.
|
|
31
|
+
*/
|
|
14
32
|
this.required = false;
|
|
33
|
+
/**
|
|
34
|
+
* Disables the select.
|
|
35
|
+
*/
|
|
15
36
|
this.disabled = false;
|
|
37
|
+
/**
|
|
38
|
+
* The error message that replaces supporting text when `error` is true. If
|
|
39
|
+
* `errorText` is an empty string, then the supporting text will continue to
|
|
40
|
+
* show.
|
|
41
|
+
*
|
|
42
|
+
* This error message overrides the error message displayed by
|
|
43
|
+
* `reportValidity()`.
|
|
44
|
+
*/
|
|
16
45
|
this.errorText = '';
|
|
46
|
+
/**
|
|
47
|
+
* Conveys additional information below the select, such as how it should
|
|
48
|
+
* be used.
|
|
49
|
+
*/
|
|
17
50
|
this.supportingText = '';
|
|
51
|
+
/**
|
|
52
|
+
* Gets or sets whether or not the select is in a visually invalid state.
|
|
53
|
+
*
|
|
54
|
+
* This error state overrides the error state controlled by
|
|
55
|
+
* `reportValidity()`.
|
|
56
|
+
*/
|
|
18
57
|
this.error = false;
|
|
58
|
+
/**
|
|
59
|
+
* Text to display in the field. Only set for SSR.
|
|
60
|
+
*/
|
|
19
61
|
this.displayText = '';
|
|
62
|
+
/**
|
|
63
|
+
* Name of icon. It is always a string.
|
|
64
|
+
*/
|
|
65
|
+
this.leadingIcon = '';
|
|
66
|
+
/**
|
|
67
|
+
* Name of icon. It is always a string.
|
|
68
|
+
*/
|
|
69
|
+
this.trailingIcon = '';
|
|
20
70
|
/**
|
|
21
71
|
* Whether or not the underlying md-menu should be position: fixed to display
|
|
22
72
|
* in a top-level manner, or position: absolute.
|
|
@@ -30,16 +80,20 @@ export class IxSelect extends LitElement {
|
|
|
30
80
|
* before it clears the typeahead buffer.
|
|
31
81
|
*/
|
|
32
82
|
this.typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;
|
|
83
|
+
/**
|
|
84
|
+
* The index of the currently selected option.
|
|
85
|
+
*
|
|
86
|
+
* Note: For SSR, set `[selected]` on the requested option and `displayText`
|
|
87
|
+
* rather than setting `selectedIndex` setting `selectedIndex` will incur a
|
|
88
|
+
* DOM query.
|
|
89
|
+
*/
|
|
90
|
+
this.selectedIndex = -1;
|
|
33
91
|
this.nativeError = false;
|
|
34
92
|
this.nativeErrorText = '';
|
|
35
93
|
this.internals = this /* needed for closure */
|
|
36
94
|
.attachInternals();
|
|
37
95
|
this.customValidationMessage = '';
|
|
38
|
-
this
|
|
39
|
-
this.materialRoot.setAttribute('value', this.materialRoot.selectedOptions[0].value);
|
|
40
|
-
this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
|
|
41
|
-
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
42
|
-
};
|
|
96
|
+
this[_a] = '';
|
|
43
97
|
}
|
|
44
98
|
get hasError() {
|
|
45
99
|
return this.error || this.nativeError;
|
|
@@ -51,8 +105,8 @@ export class IxSelect extends LitElement {
|
|
|
51
105
|
return this.internals.labels;
|
|
52
106
|
}
|
|
53
107
|
get name() {
|
|
54
|
-
var
|
|
55
|
-
return (
|
|
108
|
+
var _b;
|
|
109
|
+
return (_b = this.getAttribute('name')) !== null && _b !== void 0 ? _b : '';
|
|
56
110
|
}
|
|
57
111
|
set name(name) {
|
|
58
112
|
this.setAttribute('name', name);
|
|
@@ -62,126 +116,129 @@ export class IxSelect extends LitElement {
|
|
|
62
116
|
return this.internals.validity;
|
|
63
117
|
}
|
|
64
118
|
get value() {
|
|
65
|
-
|
|
119
|
+
this[VALUE] = this.component.value;
|
|
120
|
+
return this[VALUE];
|
|
121
|
+
}
|
|
122
|
+
set value(value) {
|
|
123
|
+
if (isServer)
|
|
124
|
+
return;
|
|
125
|
+
this.component.value = value;
|
|
66
126
|
}
|
|
67
127
|
get validationMessage() {
|
|
68
128
|
this.syncValidity();
|
|
69
129
|
return this.internals.validationMessage;
|
|
70
130
|
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
131
|
+
handleSelection() {
|
|
132
|
+
this.internals.setFormValue(this.component.value);
|
|
133
|
+
this.syncValidity();
|
|
74
134
|
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
135
|
+
async getUpdateComplete() {
|
|
136
|
+
await super.getUpdateComplete();
|
|
137
|
+
await this.component.updateComplete;
|
|
138
|
+
this.internals.setFormValue(this.component.value);
|
|
139
|
+
return true;
|
|
79
140
|
}
|
|
80
141
|
updated(changed) {
|
|
81
142
|
if (changed.has('required')) {
|
|
82
143
|
this.syncValidity();
|
|
83
144
|
}
|
|
84
145
|
}
|
|
85
|
-
// eslint-disable-next-line consistent-return
|
|
86
|
-
render() {
|
|
87
|
-
if (this.appearance === 'outlined') {
|
|
88
|
-
return html ` <md-outlined-select
|
|
89
|
-
.aria-label=${this.ariaLabel || nothing}
|
|
90
|
-
.tabindex=${this.disabled ? '-1' : '0'}
|
|
91
|
-
.label=${this.label}
|
|
92
|
-
.populated=${!!this.displayText}
|
|
93
|
-
.disabled=${this.disabled}
|
|
94
|
-
.quick=${this.quick}
|
|
95
|
-
.menu-positioning=${this.menuPositioning}
|
|
96
|
-
.typeaheadDelay=${this.typeaheadDelay}
|
|
97
|
-
.error=${this.hasError}
|
|
98
|
-
.name=${this.name}
|
|
99
|
-
.required=${this.required}
|
|
100
|
-
supporting-text=${this.supportingText}
|
|
101
|
-
error-text=${this.getErrorText()}
|
|
102
|
-
@change=${this.changeHandler}
|
|
103
|
-
>
|
|
104
|
-
<slot></slot>
|
|
105
|
-
</md-outlined-select>`;
|
|
106
|
-
}
|
|
107
|
-
if (this.appearance === 'filled') {
|
|
108
|
-
return html ` <md-filled-select
|
|
109
|
-
.aria-label=${this.ariaLabel || nothing}
|
|
110
|
-
.tabindex=${this.disabled ? '-1' : '0'}
|
|
111
|
-
.label=${this.label}
|
|
112
|
-
.populated=${!!this.displayText}
|
|
113
|
-
.disabled=${this.disabled}
|
|
114
|
-
.quick=${this.quick}
|
|
115
|
-
.positioning=${this.menuPositioning}
|
|
116
|
-
.typeaheadDelay=${this.typeaheadDelay}
|
|
117
|
-
.required=${this.required}
|
|
118
|
-
.error=${this.hasError}
|
|
119
|
-
supporting-text=${this.supportingText}
|
|
120
|
-
error-text=${this.getErrorText()}
|
|
121
|
-
@change=${this.changeHandler}
|
|
122
|
-
>
|
|
123
|
-
<slot></slot>
|
|
124
|
-
</md-filled-select>`;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
146
|
getErrorText() {
|
|
128
147
|
return this.error ? this.errorText : this.nativeErrorText;
|
|
129
148
|
}
|
|
149
|
+
async syncValidity() {
|
|
150
|
+
const valueMissing = this.required && !this.component.value;
|
|
151
|
+
const customError = !!this.customValidationMessage;
|
|
152
|
+
const validationMessage = this.customValidationMessage ||
|
|
153
|
+
(valueMissing && this.getRequiredValidationMessage()) ||
|
|
154
|
+
'';
|
|
155
|
+
this.internals.setValidity({ valueMissing, customError }, validationMessage, this.component);
|
|
156
|
+
}
|
|
157
|
+
// Returns the platform `<select>` validation message for i18n.
|
|
158
|
+
// eslint-disable-next-line class-methods-use-this
|
|
159
|
+
getRequiredValidationMessage() {
|
|
160
|
+
const select = document.createElement('select');
|
|
161
|
+
select.required = true;
|
|
162
|
+
return select.validationMessage;
|
|
163
|
+
}
|
|
130
164
|
checkValidity() {
|
|
131
165
|
this.syncValidity();
|
|
132
166
|
return this.internals.checkValidity();
|
|
133
167
|
}
|
|
134
168
|
reportValidity() {
|
|
135
|
-
|
|
136
|
-
let invalidEvent;
|
|
137
|
-
this.addEventListener('invalid', event => {
|
|
138
|
-
invalidEvent = event;
|
|
139
|
-
}, { once: true });
|
|
140
|
-
const valid = this.checkValidity();
|
|
141
|
-
if (invalidEvent === null || invalidEvent === void 0 ? void 0 : invalidEvent.defaultPrevented) {
|
|
142
|
-
return valid;
|
|
143
|
-
}
|
|
144
|
-
const prevMessage = this.getErrorText();
|
|
145
|
-
this.nativeError = !valid;
|
|
146
|
-
this.nativeErrorText = this.validationMessage;
|
|
147
|
-
if (prevMessage === this.getErrorText()) {
|
|
148
|
-
(_a = this.field) === null || _a === void 0 ? void 0 : _a.reannounceError();
|
|
149
|
-
}
|
|
150
|
-
return valid;
|
|
169
|
+
return this.component.reportValidity();
|
|
151
170
|
}
|
|
152
171
|
setCustomValidity(error) {
|
|
153
172
|
this.customValidationMessage = error;
|
|
154
173
|
this.syncValidity();
|
|
155
174
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
'';
|
|
162
|
-
this.internals.setValidity({ valueMissing, customError }, validationMessage);
|
|
175
|
+
/**
|
|
176
|
+
* Reset the select to its default value.
|
|
177
|
+
*/
|
|
178
|
+
reset() {
|
|
179
|
+
this.component.reset();
|
|
163
180
|
}
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
181
|
+
/** @private */
|
|
182
|
+
formResetCallback() {
|
|
183
|
+
this.reset();
|
|
184
|
+
}
|
|
185
|
+
/** @private */
|
|
186
|
+
formStateRestoreCallback(newState) {
|
|
187
|
+
this.value = newState;
|
|
188
|
+
}
|
|
189
|
+
render() {
|
|
190
|
+
const tag = this.filled
|
|
191
|
+
? literal `md-filled-select`
|
|
192
|
+
: literal `md-outlined-select`;
|
|
193
|
+
const ariaLabel = this.label || this.ariaLabel;
|
|
194
|
+
return staticHtml `<${tag}
|
|
195
|
+
?disabled=${this.disabled}
|
|
196
|
+
?quick=${this.quick}
|
|
197
|
+
?error=${this.hasError}
|
|
198
|
+
?required=${this.required}
|
|
199
|
+
?has-leading-icon=${this.leadingIcon.length > 0}
|
|
200
|
+
aria-label=${ariaLabel || nothing}
|
|
201
|
+
tabindex=${ifDefined(this.disabled ? undefined : '0')}
|
|
202
|
+
menu-positioning=${this.menuPositioning}
|
|
203
|
+
typeahead-delay=${this.typeaheadDelay}
|
|
204
|
+
supporting-text=${this.supportingText}
|
|
205
|
+
error-text=${this.getErrorText()}
|
|
206
|
+
selected-index=${this.selectedIndex}
|
|
207
|
+
display-text=${this.displayText}
|
|
208
|
+
label=${this.label}
|
|
209
|
+
name=${this.name}
|
|
210
|
+
@request-selection=${this.handleSelection}
|
|
211
|
+
class="select"
|
|
212
|
+
>
|
|
213
|
+
<slot></slot>
|
|
214
|
+
${this.leadingIcon
|
|
215
|
+
? html `<ix-icon slot="leading-icon">${this.leadingIcon}</ix-icon>`
|
|
216
|
+
: nothing}
|
|
217
|
+
${this.trailingIcon
|
|
218
|
+
? html `<ix-icon slot="trailing-icon"
|
|
219
|
+
>${this.trailingIcon}</ix-icon
|
|
220
|
+
>`
|
|
221
|
+
: nothing}
|
|
222
|
+
</${tag}>`;
|
|
169
223
|
}
|
|
170
224
|
}
|
|
225
|
+
_a = VALUE;
|
|
226
|
+
(() => {
|
|
227
|
+
requestUpdateOnAriaChange(IxSelect);
|
|
228
|
+
})();
|
|
229
|
+
/** @nocollapse */
|
|
230
|
+
IxSelect.shadowRootOptions = {
|
|
231
|
+
...LitElement.shadowRootOptions,
|
|
232
|
+
delegatesFocus: true,
|
|
233
|
+
};
|
|
171
234
|
/** @nocollapse */
|
|
172
235
|
IxSelect.formAssociated = true;
|
|
173
236
|
__decorate([
|
|
174
|
-
query('.
|
|
175
|
-
], IxSelect.prototype, "
|
|
176
|
-
__decorate([
|
|
177
|
-
query('slot')
|
|
178
|
-
], IxSelect.prototype, "slotEl", void 0);
|
|
237
|
+
query('.select')
|
|
238
|
+
], IxSelect.prototype, "component", void 0);
|
|
179
239
|
__decorate([
|
|
180
|
-
|
|
181
|
-
], IxSelect.prototype, "
|
|
182
|
-
__decorate([
|
|
183
|
-
property()
|
|
184
|
-
], IxSelect.prototype, "appearance", void 0);
|
|
240
|
+
property({ type: Boolean, reflect: true })
|
|
241
|
+
], IxSelect.prototype, "filled", void 0);
|
|
185
242
|
__decorate([
|
|
186
243
|
property()
|
|
187
244
|
], IxSelect.prototype, "label", void 0);
|
|
@@ -206,12 +263,21 @@ __decorate([
|
|
|
206
263
|
__decorate([
|
|
207
264
|
property({ type: String, attribute: 'display-text' })
|
|
208
265
|
], IxSelect.prototype, "displayText", void 0);
|
|
266
|
+
__decorate([
|
|
267
|
+
property({ attribute: 'leading-icon', reflect: true })
|
|
268
|
+
], IxSelect.prototype, "leadingIcon", void 0);
|
|
269
|
+
__decorate([
|
|
270
|
+
property({ attribute: 'trailing-icon', reflect: true })
|
|
271
|
+
], IxSelect.prototype, "trailingIcon", void 0);
|
|
209
272
|
__decorate([
|
|
210
273
|
property({ attribute: 'menu-positioning' })
|
|
211
274
|
], IxSelect.prototype, "menuPositioning", void 0);
|
|
212
275
|
__decorate([
|
|
213
276
|
property({ type: Number, attribute: 'typeahead-delay' })
|
|
214
277
|
], IxSelect.prototype, "typeaheadDelay", void 0);
|
|
278
|
+
__decorate([
|
|
279
|
+
property({ type: Number, attribute: 'selected-index' })
|
|
280
|
+
], IxSelect.prototype, "selectedIndex", void 0);
|
|
215
281
|
__decorate([
|
|
216
282
|
state()
|
|
217
283
|
], IxSelect.prototype, "nativeError", void 0);
|
package/dist/IxSelect.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxSelect.js","sourceRoot":"","sources":["../src/IxSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { Select } from '@material/web/select/internal/select.js';\nimport { Field } from '@material/web/field/internal/field';\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport '@material/web/select/filled-select.js';\nimport '@material/web/select/outlined-select.js';\nimport './selectoption/ix-select-option.js';\n\nexport const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;\n\nexport class IxSelect extends LitElement {\n /** @nocollapse */\n static readonly formAssociated = true;\n\n @query('.field') private readonly field!: Field | null;\n\n @query('slot') slotEl!: HTMLSlotElement;\n\n @query('md-outlined-select') default!: Select;\n\n @property() appearance: 'filled' | 'outlined' = 'outlined';\n\n @property() label: String = '';\n\n @property({ type: Boolean }) quick = false;\n\n @property({ type: Boolean }) required = false;\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n @property({ type: String, attribute: 'error-text' }) errorText = '';\n\n @property({ type: String, attribute: 'supporting-text' }) supportingText = '';\n\n @property({ type: Boolean, reflect: true }) error = false;\n\n @property({ type: String, attribute: 'display-text' }) displayText = '';\n\n /**\n * Whether or not the underlying md-menu should be position: fixed to display\n * in a top-level manner, or position: absolute.\n *\n * position:fixed is useful for cases where select is inside of another\n * element with stacking context and hidden overflows such as `md-dialog`.\n */\n @property({ attribute: 'menu-positioning' })\n menuPositioning: 'absolute' | 'fixed' = 'absolute';\n\n /**\n * The max time between the keystrokes of the typeahead select / menu behavior\n * before it clears the typeahead buffer.\n */\n @property({ type: Number, attribute: 'typeahead-delay' })\n typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n\n @state() private nativeError = false;\n\n @state() private nativeErrorText = '';\n\n private get hasError() {\n return this.error || this.nativeError;\n }\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n private customValidationMessage = '';\n\n get form() {\n return this.internals.form;\n }\n\n get labels() {\n return this.internals.labels;\n }\n\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n get validity() {\n this.syncValidity();\n return this.internals.validity;\n }\n\n get value() {\n return this.materialRoot.value;\n }\n\n get validationMessage() {\n this.syncValidity();\n return this.internals.validationMessage;\n }\n\n get materialRoot(): Select {\n return this.shadowRoot?.querySelector('md-filled-select') ?? this.default;\n }\n\n changeHandler = () => {\n this.materialRoot.setAttribute(\n 'value',\n this.materialRoot.selectedOptions[0].value\n );\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true }));\n };\n\n firstUpdated() {\n this.addEventListener('request-selection', () => {\n this.internals.setFormValue(this.materialRoot.value);\n });\n }\n\n protected override updated(changed: PropertyValues<Select>) {\n if (changed.has('required')) {\n this.syncValidity();\n }\n }\n\n // eslint-disable-next-line consistent-return\n render() {\n if (this.appearance === 'outlined') {\n return html` <md-outlined-select\n .aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n .tabindex=${this.disabled ? '-1' : '0'}\n .label=${this.label}\n .populated=${!!this.displayText}\n .disabled=${this.disabled}\n .quick=${this.quick}\n .menu-positioning=${this.menuPositioning}\n .typeaheadDelay=${this.typeaheadDelay}\n .error=${this.hasError}\n .name=${this.name}\n .required=${this.required}\n supporting-text=${this.supportingText}\n error-text=${this.getErrorText()}\n @change=${this.changeHandler}\n >\n <slot></slot>\n </md-outlined-select>`;\n }\n if (this.appearance === 'filled') {\n return html` <md-filled-select\n .aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n .tabindex=${this.disabled ? '-1' : '0'}\n .label=${this.label}\n .populated=${!!this.displayText}\n .disabled=${this.disabled}\n .quick=${this.quick}\n .positioning=${this.menuPositioning}\n .typeaheadDelay=${this.typeaheadDelay}\n .required=${this.required}\n .error=${this.hasError}\n supporting-text=${this.supportingText}\n error-text=${this.getErrorText()}\n @change=${this.changeHandler}\n >\n <slot></slot>\n </md-filled-select>`;\n }\n }\n\n private getErrorText() {\n return this.error ? this.errorText : this.nativeErrorText;\n }\n\n checkValidity() {\n this.syncValidity();\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n let invalidEvent: Event | undefined;\n this.addEventListener(\n 'invalid',\n event => {\n invalidEvent = event;\n },\n { once: true }\n );\n\n const valid = this.checkValidity();\n if (invalidEvent?.defaultPrevented) {\n return valid;\n }\n\n const prevMessage = this.getErrorText();\n this.nativeError = !valid;\n this.nativeErrorText = this.validationMessage;\n\n if (prevMessage === this.getErrorText()) {\n this.field?.reannounceError();\n }\n\n return valid;\n }\n\n setCustomValidity(error: string) {\n this.customValidationMessage = error;\n this.syncValidity();\n }\n\n private syncValidity() {\n const valueMissing = this.required && !this.materialRoot.value;\n const customError = !!this.customValidationMessage;\n const validationMessage =\n this.customValidationMessage ||\n (valueMissing && this.getRequiredValidationMessage()) ||\n '';\n\n this.internals.setValidity(\n { valueMissing, customError },\n validationMessage\n );\n }\n\n // eslint-disable-next-line class-methods-use-this\n private getRequiredValidationMessage() {\n const select = document.createElement('select');\n select.required = true;\n return select.validationMessage;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IxSelect.js","sourceRoot":"","sources":["../src/IxSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues, isServer } from 'lit';\nimport { html as staticHtml, StaticValue, literal } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { Select } from '@material/web/select/internal/select.js';\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport { DEFAULT_TYPEAHEAD_BUFFER_TIME } from '@material/web/menu/internal/menu.js';\nimport '@material/web/select/filled-select.js';\nimport '@material/web/select/outlined-select.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './selectoption/ix-select-option.js';\n\nconst VALUE = Symbol('value');\n\nexport class IxSelect extends LitElement {\n static {\n requestUpdateOnAriaChange(IxSelect);\n }\n\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n @query('.select') component!: Select;\n\n /**\n * The switch between filled and outlined.\n */\n @property({ type: Boolean, reflect: true }) filled = false;\n\n /**\n * The floating label for the field.\n */\n @property() label: string = '';\n\n /**\n * Opens the menu synchronously with no animation.\n */\n @property({ type: Boolean }) quick = false;\n\n /**\n * Whether or not the select is required.\n */\n @property({ type: Boolean }) required = false;\n\n /**\n * Disables the select.\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * The error message that replaces supporting text when `error` is true. If\n * `errorText` is an empty string, then the supporting text will continue to\n * show.\n *\n * This error message overrides the error message displayed by\n * `reportValidity()`.\n */\n @property({ type: String, attribute: 'error-text' }) errorText = '';\n\n /**\n * Conveys additional information below the select, such as how it should\n * be used.\n */\n @property({ type: String, attribute: 'supporting-text' }) supportingText = '';\n\n /**\n * Gets or sets whether or not the select is in a visually invalid state.\n *\n * This error state overrides the error state controlled by\n * `reportValidity()`.\n */\n @property({ type: Boolean, reflect: true }) error = false;\n\n /**\n * Text to display in the field. Only set for SSR.\n */\n @property({ type: String, attribute: 'display-text' }) displayText = '';\n\n /**\n * Name of icon. It is always a string.\n */\n @property({ attribute: 'leading-icon', reflect: true })\n leadingIcon = '';\n\n /**\n * Name of icon. It is always a string.\n */\n @property({ attribute: 'trailing-icon', reflect: true })\n trailingIcon = '';\n\n /**\n * Whether or not the underlying md-menu should be position: fixed to display\n * in a top-level manner, or position: absolute.\n *\n * position:fixed is useful for cases where select is inside of another\n * element with stacking context and hidden overflows such as `md-dialog`.\n */\n @property({ attribute: 'menu-positioning' })\n menuPositioning: 'absolute' | 'fixed' = 'absolute';\n\n /**\n * The max time between the keystrokes of the typeahead select / menu behavior\n * before it clears the typeahead buffer.\n */\n @property({ type: Number, attribute: 'typeahead-delay' })\n typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n\n /**\n * The index of the currently selected option.\n *\n * Note: For SSR, set `[selected]` on the requested option and `displayText`\n * rather than setting `selectedIndex` setting `selectedIndex` will incur a\n * DOM query.\n */\n @property({ type: Number, attribute: 'selected-index' })\n selectedIndex = -1;\n\n @state() private nativeError = false;\n\n @state() private nativeErrorText = '';\n\n private get hasError() {\n return this.error || this.nativeError;\n }\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n private customValidationMessage = '';\n\n get form() {\n return this.internals.form;\n }\n\n get labels() {\n return this.internals.labels;\n }\n\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n get validity() {\n this.syncValidity();\n return this.internals.validity;\n }\n\n get value() {\n this[VALUE] = this.component.value;\n return this[VALUE];\n }\n\n set value(value: string) {\n if (isServer) return;\n this.component.value = value;\n }\n\n [VALUE] = '';\n\n get validationMessage() {\n this.syncValidity();\n return this.internals.validationMessage;\n }\n\n private handleSelection() {\n this.internals.setFormValue(this.component.value);\n this.syncValidity();\n }\n\n async getUpdateComplete(): Promise<boolean> {\n await super.getUpdateComplete();\n await this.component.updateComplete;\n this.internals.setFormValue(this.component.value);\n return true;\n }\n\n protected override updated(changed: PropertyValues<Select>) {\n if (changed.has('required')) {\n this.syncValidity();\n }\n }\n\n private getErrorText() {\n return this.error ? this.errorText : this.nativeErrorText;\n }\n\n private async syncValidity() {\n const valueMissing = this.required && !this.component.value;\n const customError = !!this.customValidationMessage;\n const validationMessage =\n this.customValidationMessage ||\n (valueMissing && this.getRequiredValidationMessage()) ||\n '';\n\n this.internals.setValidity(\n { valueMissing, customError },\n validationMessage,\n this.component\n );\n }\n\n // Returns the platform `<select>` validation message for i18n.\n // eslint-disable-next-line class-methods-use-this\n private getRequiredValidationMessage() {\n const select = document.createElement('select');\n select.required = true;\n return select.validationMessage;\n }\n\n checkValidity() {\n this.syncValidity();\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n return this.component.reportValidity();\n }\n\n setCustomValidity(error: string) {\n this.customValidationMessage = error;\n this.syncValidity();\n }\n\n /**\n * Reset the select to its default value.\n */\n reset() {\n this.component.reset();\n }\n\n /** @private */\n formResetCallback() {\n this.reset();\n }\n\n /** @private */\n formStateRestoreCallback(newState: string) {\n this.value = newState;\n }\n\n override render() {\n const tag: StaticValue = this.filled\n ? literal`md-filled-select`\n : literal`md-outlined-select`;\n\n const ariaLabel = this.label || (this as ARIAMixinStrict).ariaLabel;\n\n return staticHtml`<${tag}\n ?disabled=${this.disabled}\n ?quick=${this.quick}\n ?error=${this.hasError}\n ?required=${this.required}\n ?has-leading-icon=${this.leadingIcon.length > 0}\n aria-label=${ariaLabel || nothing}\n tabindex=${ifDefined(this.disabled ? undefined : '0')}\n menu-positioning=${this.menuPositioning}\n typeahead-delay=${this.typeaheadDelay}\n supporting-text=${this.supportingText}\n error-text=${this.getErrorText()}\n selected-index=${this.selectedIndex}\n display-text=${this.displayText}\n label=${this.label}\n name=${this.name}\n @request-selection=${this.handleSelection}\n class=\"select\"\n >\n <slot></slot>\n ${\n this.leadingIcon\n ? html`<ix-icon slot=\"leading-icon\">${this.leadingIcon}</ix-icon>`\n : nothing\n }\n ${\n this.trailingIcon\n ? html`<ix-icon slot=\"trailing-icon\"\n >${this.trailingIcon}</ix-icon\n >`\n : nothing\n }\n </${tag}>`;\n }\n}\n"]}
|
|
@@ -23,6 +23,7 @@ export declare class IxSelectOption extends LitElement implements SelectOption {
|
|
|
23
23
|
mode: ShadowRootMode;
|
|
24
24
|
slotAssignment?: SlotAssignmentMode | undefined;
|
|
25
25
|
customElements?: CustomElementRegistry | undefined;
|
|
26
|
+
registry?: CustomElementRegistry | undefined;
|
|
26
27
|
};
|
|
27
28
|
/**
|
|
28
29
|
* Disables the item and makes it non-selectable and non-interactive.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxSelectOption.js","sourceRoot":"","sources":["../../src/selectoption/IxSelectOption.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGlE,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAEpF,OAAO,EAEL,sBAAsB,GACvB,MAAM,6BAA6B,CAAC;AAErC;;;;;;GAMG;AACH,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QAWE;;WAEG;QACyC,aAAQ,GAAG,KAAK,CAAC;QAE7D;;WAEG;QAEH,eAAU,GAAG,IAAI,CAAC;QAElB;;WAEG;QAC0B,aAAQ,GAAG,KAAK,CAAC;QAE9C;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;QAOvB,SAAI,GAAG,QAAiB,CAAC;QA4BR,2BAAsB,GAAG,IAAI,sBAAsB,CAAC,IAAI,EAAE;YACzE,mBAAmB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB;
|
|
1
|
+
{"version":3,"file":"IxSelectOption.js","sourceRoot":"","sources":["../../src/selectoption/IxSelectOption.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/ripple/ripple.js';\nimport '@material/web/focus/md-focus-ring.js';\nimport '@material/web/labs/item/item.js';\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\n\nimport {\n SelectOption,\n SelectOptionController,\n} from './selectOptionController.js';\n\n/**\n * @fires close-menu Closes the encapsulating menu on\n * @fires request-selection Requests the parent md-select to select this element\n * (and deselect others if single-selection) when `selected` changed to `true`.\n * @fires request-deselection Requests the parent md-select to deselect this\n * element when `selected` changed to `false`.\n */\nexport class IxSelectOption extends LitElement implements SelectOption {\n static {\n requestUpdateOnAriaChange(IxSelectOption);\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Disables the item and makes it non-selectable and non-interactive.\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * READONLY: self-identifies as a menu item and sets its identifying attribute\n */\n @property({ type: Boolean, attribute: 'md-menu-item', reflect: true })\n isMenuItem = true;\n\n /**\n * Sets the item in the selected visual state when a submenu is opened.\n */\n @property({ type: Boolean }) selected = false;\n\n /**\n * Form value of the option.\n */\n @property() value = '';\n\n @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;\n\n @queryAssignedElements({ slot: 'headline' })\n protected readonly headlineElements!: HTMLElement[];\n\n type = 'option' as const;\n\n /**\n * The text that is selectable via typeahead. If not set, defaults to the\n * innerText of the item slotted into the `\"headline\"` slot.\n */\n get typeaheadText() {\n return this.selectOptionController.typeaheadText;\n }\n\n @property({ attribute: 'typeahead-text' })\n set typeaheadText(text: string) {\n this.selectOptionController.setTypeaheadText(text);\n }\n\n /**\n * The text that is displayed in the select field when selected. If not set,\n * defaults to the textContent of the item slotted into the `\"headline\"` slot.\n */\n get displayText() {\n return this.selectOptionController.displayText;\n }\n\n @property({ attribute: 'display-text' })\n set displayText(text: string) {\n this.selectOptionController.setDisplayText(text);\n }\n\n private readonly selectOptionController = new SelectOptionController(this, {\n getHeadlineElements: () => this.headlineElements,\n getInteractiveElement: () => null,\n });\n\n protected override render() {\n return this.renderListItem(html`\n <md-item>\n <div slot=\"container\">\n ${this.renderRipple()} ${this.renderFocusRing()}\n </div>\n <slot name=\"start\" slot=\"start\"></slot>\n <slot name=\"end\" slot=\"end\"></slot>\n ${this.renderBody()}\n </md-item>\n `);\n }\n\n /**\n * Renders the root list item.\n *\n * @param content the child content of the list item.\n */\n protected renderListItem(content: unknown) {\n return html`\n <li\n id=\"item\"\n tabindex=${this.disabled ? -1 : 0}\n role=${this.selectOptionController.role}\n aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}\n aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n class=\"list-item ${classMap(this.getRenderClasses())}\"\n @click=${this.selectOptionController.onClick}\n @keydown=${this.selectOptionController.onKeydown}\n >\n ${content}\n </li>\n `;\n }\n\n /**\n * Handles rendering of the ripple element.\n */\n protected renderRipple() {\n return html` <md-ripple\n part=\"ripple\"\n for=\"item\"\n ?disabled=${this.disabled}\n ></md-ripple>`;\n }\n\n /**\n * Handles rendering of the focus ring.\n */\n // eslint-disable-next-line class-methods-use-this\n protected renderFocusRing() {\n return html` <md-focus-ring\n part=\"focus-ring\"\n for=\"item\"\n inward\n ></md-focus-ring>`;\n }\n\n /**\n * Classes applied to the list item root.\n */\n protected getRenderClasses(): ClassInfo {\n return {\n disabled: this.disabled,\n selected: this.selected,\n };\n }\n\n /**\n * Handles rendering the headline and supporting text.\n */\n // eslint-disable-next-line class-methods-use-this\n protected renderBody() {\n return html`\n <slot></slot>\n <slot name=\"overline\" slot=\"overline\"></slot>\n <slot name=\"headline\" slot=\"headline\"></slot>\n <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n <slot\n name=\"trailing-supporting-text\"\n slot=\"trailing-supporting-text\"\n ></slot>\n `;\n }\n\n override focus() {\n // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n // work programmatically like in FF and select-option\n this.listItemRoot?.focus();\n }\n}\n"]}
|
|
@@ -42,7 +42,9 @@ export declare function createRequestDeselectionEvent(): Event;
|
|
|
42
42
|
/**
|
|
43
43
|
* The options used to inialize SelectOptionController.
|
|
44
44
|
*/
|
|
45
|
-
export
|
|
45
|
+
export interface SelectOptionConfig extends MenuItemControllerConfig {
|
|
46
|
+
getInteractiveElement(): HTMLElement | null;
|
|
47
|
+
}
|
|
46
48
|
/**
|
|
47
49
|
* A controller that provides most functionality and md-select compatibility for
|
|
48
50
|
* an element that implements the SelectOption interface.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selectOptionController.js","sourceRoot":"","sources":["../../src/selectoption/selectOptionController.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAEL,kBAAkB,GAEnB,MAAM,+DAA+D,CAAC;AA4BvE;;;GAGG;AACH,MAAM,UAAU,2BAA2B;IACzC,OAAO,IAAI,KAAK,CAAC,mBAAmB,EAAE;QACpC,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;AACL,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,6BAA6B;IAC3C,OAAO,IAAI,KAAK,CAAC,qBAAqB,EAAE;QACtC,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;AACL,CAAC;
|
|
1
|
+
{"version":3,"file":"selectOptionController.js","sourceRoot":"","sources":["../../src/selectoption/selectOptionController.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { ReactiveController, ReactiveControllerHost } from 'lit';\n\nimport {\n MenuItem,\n MenuItemController,\n MenuItemControllerConfig,\n} from '@material/web/menu/internal/controllers/menuItemController.js';\n\n/**\n * The interface specific to a Select Option\n */\ninterface SelectOptionSelf {\n /**\n * The form value associated with the Select Option. (Note: the visual portion\n * of the SelectOption is the headline defined in ListItem)\n */\n value: string;\n /**\n * Whether or not the SelectOption is selected.\n */\n selected: boolean;\n /**\n * The text to display in the select when selected. Defaults to the\n * textContent of the Element slotted into the headline.\n */\n displayText: string;\n}\n\n/**\n * The interface to implement for a select option. Additionally, the element\n * must have `md-list-item` and `md-menu-item` attributes on the host.\n */\nexport type SelectOption = SelectOptionSelf & MenuItem;\n\n/**\n * Creates an event fired by a SelectOption to request selection from md-select.\n * Typically fired after `selected` changes from `false` to `true`.\n */\nexport function createRequestSelectionEvent() {\n return new Event('request-selection', {\n bubbles: true,\n composed: true,\n });\n}\n\n/**\n * Creates an event fired by a SelectOption to request deselection from\n * md-select. Typically fired after `selected` changes from `true` to `false`.\n */\nexport function createRequestDeselectionEvent() {\n return new Event('request-deselection', {\n bubbles: true,\n composed: true,\n });\n}\n\n/**\n * The options used to inialize SelectOptionController.\n */\nexport interface SelectOptionConfig extends MenuItemControllerConfig {\n getInteractiveElement(): HTMLElement | null;\n}\n\n/**\n * A controller that provides most functionality and md-select compatibility for\n * an element that implements the SelectOption interface.\n */\nexport class SelectOptionController implements ReactiveController {\n private readonly menuItemController: MenuItemController;\n\n private readonly getHeadlineElements: SelectOptionConfig['getHeadlineElements'];\n\n private internalDisplayText: string | null = null;\n\n private lastSelected = this.host.selected;\n\n private firstUpdate = true;\n\n /**\n * The recommended role of the select option.\n */\n get role() {\n return this.menuItemController.role;\n }\n\n /**\n * The text that is selectable via typeahead. If not set, defaults to the\n * innerText of the item slotted into the `\"headline\"` slot.\n */\n get typeaheadText() {\n return this.menuItemController.typeaheadText;\n }\n\n setTypeaheadText(text: string) {\n this.menuItemController.setTypeaheadText(text);\n }\n\n /**\n * The text that is displayed in the select field when selected. If not set,\n * defaults to the textContent of the item slotted into the `\"headline\"` slot.\n */\n get displayText() {\n if (this.internalDisplayText !== null) {\n return this.internalDisplayText;\n }\n\n const headlineElements = this.getHeadlineElements();\n\n const textParts: string[] = [];\n headlineElements.forEach(headlineElement => {\n if (headlineElement.textContent && headlineElement.textContent.trim()) {\n textParts.push(headlineElement.textContent.trim());\n }\n });\n\n return textParts.join(' ');\n }\n\n setDisplayText(text: string) {\n this.internalDisplayText = text;\n }\n\n /**\n * @param host The SelectOption in which to attach this controller to.\n * @param config The object that configures this controller's behavior.\n */\n constructor(\n private readonly host: ReactiveControllerHost & SelectOption,\n config: SelectOptionConfig\n ) {\n this.menuItemController = new MenuItemController(host, config);\n this.getHeadlineElements = config.getHeadlineElements;\n host.addController(this);\n }\n\n hostUpdate() {\n if (this.lastSelected !== this.host.selected) {\n this.host.ariaSelected = this.host.selected ? 'true' : 'false';\n }\n }\n\n hostUpdated() {\n // Do not dispatch event on first update / boot-up.\n if (this.lastSelected !== this.host.selected && !this.firstUpdate) {\n // This section is really useful for when the user sets selected on the\n // option programmatically. Most other cases (click and keyboard) are\n // handled by md-select because it needs to coordinate the\n // single-selection behavior.\n if (this.host.selected) {\n this.host.dispatchEvent(createRequestSelectionEvent());\n } else {\n this.host.dispatchEvent(createRequestDeselectionEvent());\n }\n }\n\n this.lastSelected = this.host.selected;\n this.firstUpdate = false;\n }\n\n /**\n * Bind this click listener to the interactive element. Handles closing the\n * menu.\n */\n onClick = () => {\n this.menuItemController.onClick();\n };\n\n /**\n * Bind this click listener to the interactive element. Handles closing the\n * menu.\n */\n onKeydown = (e: KeyboardEvent) => {\n this.menuItemController.onKeydown(e);\n };\n}\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-select following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "interxion",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.8",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
+
"@digital-realty/ix-icon": "*",
|
|
33
34
|
"@lit-labs/react": "^2.0.3",
|
|
34
35
|
"@material/web": "^1.0.0",
|
|
35
36
|
"lit": "^2.0.2",
|
|
@@ -76,6 +77,9 @@
|
|
|
76
77
|
"ignorePackages": true
|
|
77
78
|
}
|
|
78
79
|
]
|
|
80
|
+
},
|
|
81
|
+
"globals": {
|
|
82
|
+
"ShadowRootInit": true
|
|
79
83
|
}
|
|
80
84
|
},
|
|
81
85
|
"prettier": {
|
|
@@ -100,5 +104,5 @@
|
|
|
100
104
|
"README.md",
|
|
101
105
|
"LICENSE"
|
|
102
106
|
],
|
|
103
|
-
"gitHead": "
|
|
107
|
+
"gitHead": "dfeb7c40d2849123ee4443ef78df6972ea3aa4cf"
|
|
104
108
|
}
|