@digital-realty/ix-filter-select 1.0.28 → 1.0.30
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/IxFilterSelect.d.ts +47 -57
- package/dist/IxFilterSelect.js +183 -137
- package/dist/IxFilterSelect.js.map +1 -1
- package/dist/ix-filter-select.min.js +2 -2
- package/package.json +4 -4
package/dist/IxFilterSelect.d.ts
CHANGED
|
@@ -4,7 +4,16 @@ import '@digital-realty/ix-menu/ix-menu.js';
|
|
|
4
4
|
import '@digital-realty/ix-menu/ix-menu-item.js';
|
|
5
5
|
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
6
6
|
import { IxMenu } from '@digital-realty/ix-menu';
|
|
7
|
-
|
|
7
|
+
import { onReportValidity } from '@material/web/labs/behaviors/on-report-validity.js';
|
|
8
|
+
import { createValidator, getValidityAnchor } from '@material/web/labs/behaviors/constraint-validation.js';
|
|
9
|
+
import { getFormValue } from '@material/web/labs/behaviors/form-associated.js';
|
|
10
|
+
import { Validator } from '@material/web/labs/behaviors/validators/validator.js';
|
|
11
|
+
export interface IFilterSelectOption {
|
|
12
|
+
value: string;
|
|
13
|
+
label: string;
|
|
14
|
+
}
|
|
15
|
+
declare const filterSelectBaseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("@material/web/labs/behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("@material/web/labs/behaviors/form-associated.js").FormAssociatedConstructor, import("@material/web/labs/behaviors/form-associated.js").FormAssociated>, import("@material/web/labs/behaviors/constraint-validation.js").ConstraintValidation>, import("@material/web/labs/behaviors/on-report-validity.js").OnReportValidity>;
|
|
16
|
+
export declare class IxFilterSelect extends filterSelectBaseClass {
|
|
8
17
|
static get styles(): import("lit").CSSResult[];
|
|
9
18
|
/** @nocollapse */
|
|
10
19
|
static shadowRootOptions: {
|
|
@@ -12,89 +21,70 @@ export declare class IxFilterSelect extends LitElement {
|
|
|
12
21
|
mode: ShadowRootMode;
|
|
13
22
|
slotAssignment?: SlotAssignmentMode | undefined;
|
|
14
23
|
customElements?: CustomElementRegistry | undefined;
|
|
15
|
-
/**
|
|
16
|
-
* Returns the text field's validation error message.
|
|
17
|
-
*
|
|
18
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
|
|
19
|
-
*/
|
|
20
24
|
registry?: CustomElementRegistry | undefined;
|
|
21
25
|
};
|
|
22
|
-
/** @nocollapse */
|
|
23
|
-
static readonly formAssociated = true;
|
|
24
|
-
private readonly internals;
|
|
25
|
-
/**
|
|
26
|
-
* The associated form element with which this element's value will submit.
|
|
27
|
-
*/
|
|
28
|
-
get form(): HTMLFormElement | null;
|
|
29
|
-
/**
|
|
30
|
-
* The labels this element is associated with.
|
|
31
|
-
*/
|
|
32
|
-
get labels(): NodeList;
|
|
33
|
-
/**
|
|
34
|
-
* The HTML name to use in form submission.
|
|
35
|
-
*/
|
|
36
|
-
get name(): string;
|
|
37
|
-
/**
|
|
38
|
-
* Returns the text field's validation error message.
|
|
39
|
-
*
|
|
40
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
|
|
41
|
-
*/
|
|
42
|
-
get validationMessage(): string;
|
|
43
|
-
/**
|
|
44
|
-
* Returns a `ValidityState` object that represents the validity states of the
|
|
45
|
-
* text field.
|
|
46
|
-
*
|
|
47
|
-
* https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
|
|
48
|
-
*/
|
|
49
|
-
get validity(): ValidityState;
|
|
50
|
-
/**
|
|
51
|
-
* Returns whether an element will successfully validate based on forms
|
|
52
|
-
* validation rules and constraints.
|
|
53
|
-
*
|
|
54
|
-
* https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate
|
|
55
|
-
*/
|
|
56
|
-
get willValidate(): boolean;
|
|
57
|
-
checkValidity(): boolean;
|
|
58
|
-
reportValidity(): boolean;
|
|
59
26
|
menu: IxMenu;
|
|
60
|
-
|
|
61
|
-
|
|
27
|
+
readonly input: HTMLInputElement;
|
|
28
|
+
private readonly field;
|
|
29
|
+
options: IFilterSelectOption[];
|
|
62
30
|
value: string;
|
|
63
31
|
label: string;
|
|
64
32
|
errorText: string;
|
|
65
33
|
noFilteredOptions: string;
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* Gets or sets whether or not the text field is in a visually invalid state.
|
|
69
|
-
*
|
|
70
|
-
* This error state overrides the error state controlled by
|
|
71
|
-
* `reportValidity()`.
|
|
72
|
-
*/
|
|
34
|
+
supportingText: string;
|
|
73
35
|
error: boolean;
|
|
74
36
|
tabIndex: number;
|
|
75
37
|
required: boolean;
|
|
76
38
|
private filteredOptions;
|
|
39
|
+
selectedItem: IFilterSelectOption | undefined;
|
|
77
40
|
private filterValue;
|
|
78
41
|
private menuOpen;
|
|
42
|
+
/**
|
|
43
|
+
* Returns true when the text field has been interacted with. Native
|
|
44
|
+
* validation errors only display in response to user interactions.
|
|
45
|
+
*/
|
|
46
|
+
private dirty;
|
|
79
47
|
private focused;
|
|
48
|
+
/**
|
|
49
|
+
* Whether or not a native error has been reported via `reportValidity()`.
|
|
50
|
+
*/
|
|
51
|
+
private nativeError;
|
|
52
|
+
/**
|
|
53
|
+
* The validation message displayed from a native error via
|
|
54
|
+
* `reportValidity()`.
|
|
55
|
+
*/
|
|
56
|
+
private nativeErrorText;
|
|
80
57
|
private menuOpening;
|
|
58
|
+
private get hasError();
|
|
59
|
+
private getErrorText;
|
|
60
|
+
private getInput;
|
|
81
61
|
firstUpdated(): void;
|
|
82
62
|
protected updated(changedProperties: PropertyValues): void;
|
|
83
|
-
handleFocusin: (e: Event) => void;
|
|
84
|
-
handleFocusout: () => void;
|
|
85
63
|
handleMenuOpening: () => void;
|
|
86
64
|
menuOpened: () => void;
|
|
87
65
|
setMenuPosition: () => void;
|
|
88
66
|
handleMenuClosed: () => void;
|
|
89
|
-
|
|
90
|
-
selectItem: (
|
|
67
|
+
handleInput: (e: InputEvent) => void;
|
|
68
|
+
selectItem: (item: IFilterSelectOption | undefined) => void;
|
|
91
69
|
toggleOpen: (e: Event) => void;
|
|
92
|
-
|
|
70
|
+
filterOptions(): void;
|
|
71
|
+
clear(): void;
|
|
93
72
|
/** @private */
|
|
94
73
|
formResetCallback(): void;
|
|
95
74
|
/**
|
|
96
75
|
* Reset the text field to its default value.
|
|
97
76
|
*/
|
|
98
77
|
reset(): void;
|
|
78
|
+
attributeChangedCallback(attribute: string, newValue: string | null, oldValue: string | null): void;
|
|
79
|
+
[createValidator](): Validator<unknown>;
|
|
80
|
+
[getValidityAnchor](): HTMLElement | null;
|
|
81
|
+
[onReportValidity](invalidEvent: Event | null): void;
|
|
82
|
+
disabled: boolean;
|
|
83
|
+
name: string;
|
|
84
|
+
[getFormValue](): string;
|
|
85
|
+
formStateRestoreCallback(formState: string): void;
|
|
86
|
+
private handleFocusChange;
|
|
87
|
+
focus(): void;
|
|
99
88
|
render(): import("lit").TemplateResult<1>;
|
|
100
89
|
}
|
|
90
|
+
export {};
|
package/dist/IxFilterSelect.js
CHANGED
|
@@ -7,53 +7,50 @@ import '@digital-realty/ix-field/ix-field.js';
|
|
|
7
7
|
import '@digital-realty/ix-menu/ix-menu.js';
|
|
8
8
|
import '@digital-realty/ix-menu/ix-menu-item.js';
|
|
9
9
|
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
10
|
+
import { repeat } from 'lit/directives/repeat.js';
|
|
11
|
+
import { mixinOnReportValidity, onReportValidity, } from '@material/web/labs/behaviors/on-report-validity.js';
|
|
12
|
+
import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '@material/web/labs/behaviors/constraint-validation.js';
|
|
13
|
+
import { getFormValue, mixinFormAssociated, } from '@material/web/labs/behaviors/form-associated.js';
|
|
14
|
+
import { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
|
|
15
|
+
import { TextFieldValidator } from '@material/web/labs/behaviors/validators/text-field-validator.js';
|
|
10
16
|
import { IxFilterSelectStyles } from './ix-filter-select-styles.js';
|
|
11
|
-
|
|
17
|
+
const filterSelectBaseClass = mixinOnReportValidity(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(LitElement))));
|
|
18
|
+
export class IxFilterSelect extends filterSelectBaseClass {
|
|
12
19
|
constructor() {
|
|
13
20
|
super(...arguments);
|
|
14
|
-
this.internals = this /* needed for closure */
|
|
15
|
-
.attachInternals();
|
|
16
21
|
this.options = [];
|
|
17
22
|
this.value = '';
|
|
18
23
|
this.label = '';
|
|
19
24
|
this.errorText = 'Invalid error text';
|
|
20
25
|
this.noFilteredOptions = 'No options';
|
|
21
|
-
this.
|
|
22
|
-
/**
|
|
23
|
-
* Gets or sets whether or not the text field is in a visually invalid state.
|
|
24
|
-
*
|
|
25
|
-
* This error state overrides the error state controlled by
|
|
26
|
-
* `reportValidity()`.
|
|
27
|
-
*/
|
|
26
|
+
this.supportingText = '';
|
|
28
27
|
this.error = false;
|
|
29
28
|
this.tabIndex = 0;
|
|
30
29
|
this.required = false;
|
|
31
30
|
this.filteredOptions = [];
|
|
31
|
+
this.selectedItem = undefined;
|
|
32
32
|
this.filterValue = '';
|
|
33
33
|
this.menuOpen = false;
|
|
34
|
+
/**
|
|
35
|
+
* Returns true when the text field has been interacted with. Native
|
|
36
|
+
* validation errors only display in response to user interactions.
|
|
37
|
+
*/
|
|
38
|
+
this.dirty = false;
|
|
34
39
|
this.focused = false;
|
|
40
|
+
/**
|
|
41
|
+
* Whether or not a native error has been reported via `reportValidity()`.
|
|
42
|
+
*/
|
|
43
|
+
this.nativeError = false;
|
|
44
|
+
/**
|
|
45
|
+
* The validation message displayed from a native error via
|
|
46
|
+
* `reportValidity()`.
|
|
47
|
+
*/
|
|
48
|
+
this.nativeErrorText = '';
|
|
35
49
|
this.menuOpening = false;
|
|
36
|
-
this.handleFocusin = (e) => {
|
|
37
|
-
const target = e.target;
|
|
38
|
-
if (target.id !== 'filter' || this.disabled)
|
|
39
|
-
return;
|
|
40
|
-
if (this.menuOpen || this.menuOpening)
|
|
41
|
-
return;
|
|
42
|
-
this.focused = true;
|
|
43
|
-
this.menu.show();
|
|
44
|
-
this.menuOpening = true;
|
|
45
|
-
this.setMenuPosition();
|
|
46
|
-
this.internals.setFormValue(this.value);
|
|
47
|
-
};
|
|
48
|
-
this.handleFocusout = () => {
|
|
49
|
-
this.focused = false;
|
|
50
|
-
};
|
|
51
50
|
this.handleMenuOpening = () => {
|
|
52
|
-
this.focused = true;
|
|
53
51
|
this.menuOpening = true;
|
|
54
52
|
this.menuOpen = true;
|
|
55
53
|
this.setMenuPosition();
|
|
56
|
-
this.internals.setFormValue(this.value);
|
|
57
54
|
};
|
|
58
55
|
this.menuOpened = () => {
|
|
59
56
|
this.setMenuPosition();
|
|
@@ -64,47 +61,42 @@ export class IxFilterSelect extends LitElement {
|
|
|
64
61
|
const innerMenu = (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.menu');
|
|
65
62
|
if (innerMenu) {
|
|
66
63
|
innerMenu.style.width = '100%';
|
|
67
|
-
innerMenu.style.
|
|
64
|
+
innerMenu.style.height = 'auto';
|
|
65
|
+
innerMenu.style.insetBlockStart = this.supportingText ? '-1rem' : '0';
|
|
68
66
|
}
|
|
69
67
|
};
|
|
70
68
|
this.handleMenuClosed = () => {
|
|
69
|
+
this.menuOpening = false;
|
|
71
70
|
this.menuOpen = false;
|
|
72
71
|
};
|
|
73
|
-
this.
|
|
74
|
-
|
|
75
|
-
this.
|
|
76
|
-
|
|
77
|
-
this.
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
72
|
+
this.handleInput = (e) => {
|
|
73
|
+
const { value } = e.target;
|
|
74
|
+
this.dirty = true;
|
|
75
|
+
this.filterValue = value;
|
|
76
|
+
this.value = value;
|
|
77
|
+
this.filterOptions();
|
|
78
|
+
};
|
|
79
|
+
this.selectItem = (item) => {
|
|
80
|
+
if (item) {
|
|
81
|
+
this.selectedItem = item;
|
|
82
|
+
this.value = item.value;
|
|
83
|
+
this.filterValue = item.label;
|
|
84
|
+
this.filteredOptions = this.options;
|
|
85
|
+
if (this.menuOpen || this.menuOpening) {
|
|
86
|
+
this.menu.close();
|
|
81
87
|
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
const menu = (_a = this.menu.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu');
|
|
88
|
-
if (menu) {
|
|
89
|
-
menu.style.height = 'auto';
|
|
88
|
+
this.dispatchEvent(new CustomEvent('select-filter-select', {
|
|
89
|
+
detail: { value: item.value, label: item.label },
|
|
90
|
+
bubbles: true,
|
|
91
|
+
composed: true,
|
|
92
|
+
}));
|
|
90
93
|
}
|
|
91
94
|
};
|
|
92
|
-
this.selectItem = (value) => {
|
|
93
|
-
this.value = value;
|
|
94
|
-
this.filterValue = value;
|
|
95
|
-
this.filteredOptions = this.options;
|
|
96
|
-
this.menu.close();
|
|
97
|
-
this.dispatchEvent(new CustomEvent('select-filter-select', {
|
|
98
|
-
detail: { value },
|
|
99
|
-
bubbles: true,
|
|
100
|
-
composed: true,
|
|
101
|
-
}));
|
|
102
|
-
};
|
|
103
95
|
this.toggleOpen = (e) => {
|
|
104
96
|
e.stopPropagation();
|
|
105
97
|
if (!this.menu.open) {
|
|
98
|
+
this.filterOptions();
|
|
106
99
|
this.menu.show();
|
|
107
|
-
this.focused = true;
|
|
108
100
|
this.menuOpening = true;
|
|
109
101
|
this.setMenuPosition();
|
|
110
102
|
}
|
|
@@ -112,82 +104,67 @@ export class IxFilterSelect extends LitElement {
|
|
|
112
104
|
this.menu.close();
|
|
113
105
|
}
|
|
114
106
|
};
|
|
115
|
-
this.clear = (e) => {
|
|
116
|
-
e.stopPropagation();
|
|
117
|
-
this.value = '';
|
|
118
|
-
this.filterValue = '';
|
|
119
|
-
this.focused = false;
|
|
120
|
-
this.dispatchEvent(new CustomEvent('clear-filter-select', {
|
|
121
|
-
bubbles: true,
|
|
122
|
-
composed: true,
|
|
123
|
-
}));
|
|
124
|
-
};
|
|
125
107
|
}
|
|
126
108
|
static get styles() {
|
|
127
109
|
return [IxFilterSelectStyles];
|
|
128
110
|
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
*/
|
|
132
|
-
get form() {
|
|
133
|
-
return this.internals.form;
|
|
134
|
-
}
|
|
135
|
-
/**
|
|
136
|
-
* The labels this element is associated with.
|
|
137
|
-
*/
|
|
138
|
-
get labels() {
|
|
139
|
-
return this.internals.labels;
|
|
140
|
-
}
|
|
141
|
-
/**
|
|
142
|
-
* The HTML name to use in form submission.
|
|
143
|
-
*/
|
|
144
|
-
get name() {
|
|
145
|
-
var _a;
|
|
146
|
-
return (_a = this.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
|
|
147
|
-
}
|
|
148
|
-
/**
|
|
149
|
-
* Returns the text field's validation error message.
|
|
150
|
-
*
|
|
151
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
|
|
152
|
-
*/
|
|
153
|
-
get validationMessage() {
|
|
154
|
-
return this.internals.validationMessage;
|
|
111
|
+
get hasError() {
|
|
112
|
+
return !this.dirty && (this.error || this.nativeError);
|
|
155
113
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
* text field.
|
|
159
|
-
*
|
|
160
|
-
* https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
|
|
161
|
-
*/
|
|
162
|
-
get validity() {
|
|
163
|
-
return this.internals.validity;
|
|
114
|
+
getErrorText() {
|
|
115
|
+
return this.error ? this.errorText : this.nativeErrorText;
|
|
164
116
|
}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
117
|
+
getInput() {
|
|
118
|
+
if (!this.input) {
|
|
119
|
+
// If the input is not yet defined, synchronously render.
|
|
120
|
+
// e.g.
|
|
121
|
+
// const textField = document.createElement('md-outlined-text-field');
|
|
122
|
+
// document.body.appendChild(textField);
|
|
123
|
+
// textField.focus(); // synchronously render
|
|
124
|
+
this.connectedCallback();
|
|
125
|
+
this.scheduleUpdate();
|
|
126
|
+
}
|
|
127
|
+
if (this.isUpdatePending) {
|
|
128
|
+
// If there are pending updates, synchronously perform them. This ensures
|
|
129
|
+
// that constraint validation properties (like `required`) are synced
|
|
130
|
+
// before interacting with input APIs that depend on them.
|
|
131
|
+
this.scheduleUpdate();
|
|
132
|
+
}
|
|
133
|
+
return this.input;
|
|
179
134
|
}
|
|
180
135
|
firstUpdated() {
|
|
181
|
-
this.
|
|
182
|
-
this.internals.setFormValue(this.value);
|
|
183
|
-
this.filterValue = this.value;
|
|
136
|
+
this.filterOptions();
|
|
184
137
|
}
|
|
185
138
|
updated(changedProperties) {
|
|
186
139
|
if (changedProperties.has('disabled')) {
|
|
187
140
|
this.tabIndex = this.disabled ? -1 : 0;
|
|
188
141
|
}
|
|
142
|
+
if (changedProperties.has('options')) {
|
|
143
|
+
this.filteredOptions = this.options;
|
|
144
|
+
if (!this.selectedItem) {
|
|
145
|
+
const item = this.options.find(({ value }) => value === this.value);
|
|
146
|
+
this.selectItem(item);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
189
149
|
this.setMenuPosition();
|
|
190
|
-
|
|
150
|
+
}
|
|
151
|
+
filterOptions() {
|
|
152
|
+
const filterValue = this.filterValue.trim().toLowerCase() ||
|
|
153
|
+
this.value.trim().toLocaleLowerCase();
|
|
154
|
+
if (!filterValue) {
|
|
155
|
+
this.filteredOptions = this.options;
|
|
156
|
+
}
|
|
157
|
+
this.filteredOptions = this.options.filter(item => item.label.toLowerCase().includes(filterValue));
|
|
158
|
+
}
|
|
159
|
+
clear() {
|
|
160
|
+
this.value = '';
|
|
161
|
+
this.filterValue = '';
|
|
162
|
+
this.selectedItem = undefined;
|
|
163
|
+
this.focus();
|
|
164
|
+
this.dispatchEvent(new CustomEvent('clear-filter-select', {
|
|
165
|
+
bubbles: true,
|
|
166
|
+
composed: true,
|
|
167
|
+
}));
|
|
191
168
|
}
|
|
192
169
|
/** @private */
|
|
193
170
|
formResetCallback() {
|
|
@@ -198,12 +175,63 @@ export class IxFilterSelect extends LitElement {
|
|
|
198
175
|
*/
|
|
199
176
|
reset() {
|
|
200
177
|
this.value = '';
|
|
178
|
+
const originalValue = this.getAttribute('value');
|
|
179
|
+
const item = this.options.find(({ value }) => value === originalValue);
|
|
180
|
+
this.selectItem(item);
|
|
181
|
+
this.dirty = false;
|
|
182
|
+
this.nativeError = false;
|
|
183
|
+
this.nativeErrorText = '';
|
|
184
|
+
}
|
|
185
|
+
attributeChangedCallback(attribute, newValue, oldValue) {
|
|
186
|
+
if (attribute === 'value' && this.dirty) {
|
|
187
|
+
// After user input, changing the value attribute no longer updates the
|
|
188
|
+
// text field's value (until reset). This matches native <input> behavior.
|
|
189
|
+
return;
|
|
190
|
+
}
|
|
191
|
+
super.attributeChangedCallback(attribute, newValue, oldValue);
|
|
192
|
+
}
|
|
193
|
+
[createValidator]() {
|
|
194
|
+
return new TextFieldValidator(() => ({
|
|
195
|
+
state: this,
|
|
196
|
+
renderedControl: this.input,
|
|
197
|
+
}));
|
|
198
|
+
}
|
|
199
|
+
[getValidityAnchor]() {
|
|
200
|
+
return this.input;
|
|
201
|
+
}
|
|
202
|
+
[onReportValidity](invalidEvent) {
|
|
203
|
+
// Prevent default pop-up behavior.
|
|
204
|
+
invalidEvent === null || invalidEvent === void 0 ? void 0 : invalidEvent.preventDefault();
|
|
205
|
+
this.nativeError = !!invalidEvent;
|
|
206
|
+
this.nativeErrorText = this.validationMessage;
|
|
207
|
+
}
|
|
208
|
+
[getFormValue]() {
|
|
209
|
+
return this.value;
|
|
210
|
+
}
|
|
211
|
+
formStateRestoreCallback(formState) {
|
|
212
|
+
this.value = formState;
|
|
213
|
+
}
|
|
214
|
+
handleFocusChange() {
|
|
215
|
+
var _a, _b;
|
|
216
|
+
this.focused = (_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.matches(':focus')) !== null && _b !== void 0 ? _b : false;
|
|
217
|
+
if (this.menuOpen || this.menuOpening)
|
|
218
|
+
return;
|
|
219
|
+
if (this.focused) {
|
|
220
|
+
this.menu.show();
|
|
221
|
+
this.menuOpening = true;
|
|
222
|
+
this.setMenuPosition();
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
focus() {
|
|
226
|
+
// Required for the case that the user slots a focusable element into the
|
|
227
|
+
// leading icon slot such as an iconbutton due to how delegatesFocus works.
|
|
228
|
+
this.getInput().focus();
|
|
201
229
|
}
|
|
202
230
|
render() {
|
|
203
231
|
var _a;
|
|
204
232
|
const classes = {
|
|
205
233
|
disabled: this.disabled,
|
|
206
|
-
error: !this.disabled && this.
|
|
234
|
+
error: !this.disabled && this.hasError,
|
|
207
235
|
};
|
|
208
236
|
return html `
|
|
209
237
|
<div class="filter-select">
|
|
@@ -213,22 +241,26 @@ export class IxFilterSelect extends LitElement {
|
|
|
213
241
|
?focused=${this.focused}
|
|
214
242
|
?disabled=${this.disabled}
|
|
215
243
|
?required=${this.required}
|
|
216
|
-
?error=${this.
|
|
244
|
+
?error=${this.hasError}
|
|
217
245
|
error-text=${!this.menuOpen && !this.menuOpening
|
|
218
|
-
? this.
|
|
246
|
+
? this.getErrorText()
|
|
219
247
|
: nothing}
|
|
220
248
|
label=${this.label}
|
|
221
|
-
@click=${() => (!this.disabled ? this.
|
|
222
|
-
|
|
223
|
-
@focusout=${this.handleFocusout}
|
|
249
|
+
@click=${() => (!this.disabled ? this.input.focus() : null)}
|
|
250
|
+
supporting-text=${this.supportingText}
|
|
224
251
|
?populated=${this.filterValue.length || this.value.length}
|
|
225
252
|
>
|
|
226
253
|
<input
|
|
227
254
|
id="filter"
|
|
228
|
-
|
|
255
|
+
aria-invalid=${this.hasError}
|
|
256
|
+
@input=${this.handleInput}
|
|
229
257
|
.value=${this.filterValue}
|
|
230
|
-
class="flex-fill"
|
|
258
|
+
class="flex-fill input"
|
|
231
259
|
type="text"
|
|
260
|
+
?disabled=${this.disabled}
|
|
261
|
+
?required=${this.required}
|
|
262
|
+
@focus=${this.handleFocusChange}
|
|
263
|
+
@blur=${this.handleFocusChange}
|
|
232
264
|
/>
|
|
233
265
|
<slot name="end" slot="end">
|
|
234
266
|
${this.value.length
|
|
@@ -252,22 +284,23 @@ export class IxFilterSelect extends LitElement {
|
|
|
252
284
|
@opening=${this.handleMenuOpening}
|
|
253
285
|
@opened=${this.menuOpened}
|
|
254
286
|
@closed=${this.handleMenuClosed}
|
|
287
|
+
default-focus="none"
|
|
288
|
+
skip-restore-focus
|
|
255
289
|
>
|
|
256
290
|
${((_a = this.filteredOptions) === null || _a === void 0 ? void 0 : _a.length)
|
|
257
|
-
? this.filteredOptions
|
|
258
|
-
id=${id}
|
|
291
|
+
? repeat(this.filteredOptions, (item, index) => `${item.value}-${index}`, item => html `<ix-menu-item
|
|
259
292
|
@click=${() => {
|
|
260
293
|
this.selectItem(item);
|
|
261
294
|
}}
|
|
262
295
|
@keydown=${(e) => {
|
|
263
|
-
const selectionKeys = ['
|
|
296
|
+
const selectionKeys = ['Space', 'Enter'];
|
|
264
297
|
if (selectionKeys.includes(e.key)) {
|
|
265
298
|
this.selectItem(item);
|
|
266
299
|
}
|
|
267
300
|
}}
|
|
268
|
-
class=${this.value === item ? 'selected' : ''}
|
|
301
|
+
class=${this.value === item.value ? 'selected' : ''}
|
|
269
302
|
>
|
|
270
|
-
<div slot="headline">${item}</div>
|
|
303
|
+
<div slot="headline">${item.label}</div>
|
|
271
304
|
</ix-menu-item>`)
|
|
272
305
|
: html `<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}
|
|
273
306
|
</ix-menu>
|
|
@@ -284,14 +317,15 @@ IxFilterSelect.shadowRootOptions = {
|
|
|
284
317
|
...LitElement.shadowRootOptions,
|
|
285
318
|
delegatesFocus: true,
|
|
286
319
|
};
|
|
287
|
-
/** @nocollapse */
|
|
288
|
-
IxFilterSelect.formAssociated = true;
|
|
289
320
|
__decorate([
|
|
290
321
|
query('ix-menu')
|
|
291
322
|
], IxFilterSelect.prototype, "menu", void 0);
|
|
292
323
|
__decorate([
|
|
293
|
-
query('
|
|
294
|
-
], IxFilterSelect.prototype, "
|
|
324
|
+
query('input')
|
|
325
|
+
], IxFilterSelect.prototype, "input", void 0);
|
|
326
|
+
__decorate([
|
|
327
|
+
query('.field')
|
|
328
|
+
], IxFilterSelect.prototype, "field", void 0);
|
|
295
329
|
__decorate([
|
|
296
330
|
property({ type: Array })
|
|
297
331
|
], IxFilterSelect.prototype, "options", void 0);
|
|
@@ -308,8 +342,8 @@ __decorate([
|
|
|
308
342
|
property({ type: String, attribute: 'no-options-text' })
|
|
309
343
|
], IxFilterSelect.prototype, "noFilteredOptions", void 0);
|
|
310
344
|
__decorate([
|
|
311
|
-
property({
|
|
312
|
-
], IxFilterSelect.prototype, "
|
|
345
|
+
property({ attribute: 'supporting-text' })
|
|
346
|
+
], IxFilterSelect.prototype, "supportingText", void 0);
|
|
313
347
|
__decorate([
|
|
314
348
|
property({ type: Boolean, reflect: true })
|
|
315
349
|
], IxFilterSelect.prototype, "error", void 0);
|
|
@@ -322,15 +356,27 @@ __decorate([
|
|
|
322
356
|
__decorate([
|
|
323
357
|
state()
|
|
324
358
|
], IxFilterSelect.prototype, "filteredOptions", void 0);
|
|
359
|
+
__decorate([
|
|
360
|
+
state()
|
|
361
|
+
], IxFilterSelect.prototype, "selectedItem", void 0);
|
|
325
362
|
__decorate([
|
|
326
363
|
state()
|
|
327
364
|
], IxFilterSelect.prototype, "filterValue", void 0);
|
|
328
365
|
__decorate([
|
|
329
366
|
state()
|
|
330
367
|
], IxFilterSelect.prototype, "menuOpen", void 0);
|
|
368
|
+
__decorate([
|
|
369
|
+
state()
|
|
370
|
+
], IxFilterSelect.prototype, "dirty", void 0);
|
|
331
371
|
__decorate([
|
|
332
372
|
state()
|
|
333
373
|
], IxFilterSelect.prototype, "focused", void 0);
|
|
374
|
+
__decorate([
|
|
375
|
+
state()
|
|
376
|
+
], IxFilterSelect.prototype, "nativeError", void 0);
|
|
377
|
+
__decorate([
|
|
378
|
+
state()
|
|
379
|
+
], IxFilterSelect.prototype, "nativeErrorText", void 0);
|
|
334
380
|
__decorate([
|
|
335
381
|
state()
|
|
336
382
|
], IxFilterSelect.prototype, "menuOpening", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxFilterSelect.js","sourceRoot":"","sources":["../src/IxFilterSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport '@digital-realty/ix-field/ix-field.js';\nimport '@digital-realty/ix-menu/ix-menu.js';\nimport '@digital-realty/ix-menu/ix-menu-item.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { IxMenu } from '@digital-realty/ix-menu';\nimport { IxFilterSelectStyles } from './ix-filter-select-styles.js';\n\nexport class IxFilterSelect extends LitElement {\n static get styles() {\n return [IxFilterSelectStyles];\n }\n\n static {\n requestUpdateOnAriaChange(IxFilterSelect);\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this.internals.labels;\n }\n\n /**\n * The HTML name to use in form submission.\n */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n /**\n * Returns the text field's validation error message.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n */\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /**\n * Returns a `ValidityState` object that represents the validity states of the\n * text field.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\n get validity() {\n return this.internals.validity;\n }\n\n /**\n * Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n */\n get willValidate() {\n return this.internals.willValidate;\n }\n\n checkValidity() {\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n return this.internals.reportValidity();\n }\n\n @query('ix-menu') menu!: IxMenu;\n\n @query('#filter') inputFilter!: HTMLInputElement;\n\n @property({ type: Array }) options: string[] = [];\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) label = '';\n\n @property({ type: String, attribute: 'error-text' }) errorText =\n 'Invalid error text';\n\n @property({ type: String, attribute: 'no-options-text' }) noFilteredOptions =\n 'No options';\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Gets or sets whether or not the text field 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 @property({ type: Number, reflect: true }) tabIndex = 0;\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n @state() private filteredOptions: string[] = [];\n\n @state() private filterValue = '';\n\n @state() private menuOpen = false;\n\n @state() private focused = false;\n\n @state() private menuOpening = false;\n\n firstUpdated() {\n this.filteredOptions = this.options;\n this.internals.setFormValue(this.value);\n this.filterValue = this.value;\n }\n\n protected override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('disabled')) {\n this.tabIndex = this.disabled ? -1 : 0;\n }\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n }\n\n handleFocusin = (e: Event) => {\n const target = e.target as HTMLElement;\n if (target.id !== 'filter' || this.disabled) return;\n if (this.menuOpen || this.menuOpening) return;\n this.focused = true;\n this.menu.show();\n this.menuOpening = true;\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n };\n\n handleFocusout = () => {\n this.focused = false;\n };\n\n handleMenuOpening = () => {\n this.focused = true;\n this.menuOpening = true;\n this.menuOpen = true;\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n };\n\n menuOpened = () => {\n this.setMenuPosition();\n this.menuOpening = false;\n };\n\n setMenuPosition = () => {\n const innerMenu = this.menu?.shadowRoot?.querySelector(\n '.menu'\n ) as HTMLElement;\n if (innerMenu) {\n innerMenu.style.width = '100%';\n innerMenu.style.insetBlockStart = '0';\n }\n };\n\n handleMenuClosed = () => {\n this.menuOpen = false;\n };\n\n filterInput = (e: InputEvent) => {\n this.filterValue = (e.target as HTMLInputElement).value;\n let value = '';\n this.filteredOptions = this.options.filter(item => {\n const filterValue = this.filterValue.trim().toLowerCase();\n if (item.toLowerCase() === filterValue) {\n value = item;\n }\n return item.toLowerCase().includes(filterValue);\n });\n if (value !== this.value) {\n this.value = value;\n }\n const menu = this.menu.shadowRoot?.querySelector('.menu') as HTMLElement;\n if (menu) {\n menu.style.height = 'auto';\n }\n };\n\n selectItem = (value: string) => {\n this.value = value;\n this.filterValue = value;\n this.filteredOptions = this.options;\n this.menu.close();\n this.dispatchEvent(\n new CustomEvent('select-filter-select', {\n detail: { value },\n bubbles: true,\n composed: true,\n })\n );\n };\n\n toggleOpen = (e: Event) => {\n e.stopPropagation();\n if (!this.menu.open) {\n this.menu.show();\n this.focused = true;\n this.menuOpening = true;\n this.setMenuPosition();\n } else {\n this.menu.close();\n }\n };\n\n clear = (e: Event) => {\n e.stopPropagation();\n this.value = '';\n this.filterValue = '';\n this.focused = false;\n this.dispatchEvent(\n new CustomEvent('clear-filter-select', {\n bubbles: true,\n composed: true,\n })\n );\n };\n\n /** @private */\n formResetCallback() {\n this.reset();\n }\n\n /**\n * Reset the text field to its default value.\n */\n reset() {\n this.value = '';\n }\n\n render() {\n const classes = {\n disabled: this.disabled,\n error: !this.disabled && this.error,\n };\n\n return html`\n <div class=\"filter-select\">\n <ix-field\n class=\"${classMap(classes)}\"\n id=\"anchor\"\n ?focused=${this.focused}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?error=${this.error}\n error-text=${!this.menuOpen && !this.menuOpening\n ? this.errorText\n : nothing}\n label=${this.label}\n @click=${() => (!this.disabled ? this.inputFilter.focus() : null)}\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n ?populated=${this.filterValue.length || this.value.length}\n >\n <input\n id=\"filter\"\n @input=${this.filterInput}\n .value=${this.filterValue}\n class=\"flex-fill\"\n type=\"text\"\n />\n <slot name=\"end\" slot=\"end\">\n ${this.value.length\n ? html`<ix-icon-button\n @click=${this.clear}\n icon=\"close\"\n aria-label=\"clear\"\n ></ix-icon-button>`\n : nothing}\n <ix-icon-button\n @click=${this.toggleOpen}\n class=\"open-icon\"\n icon=${`arrow_drop_${this.menuOpen ? 'up' : 'down'}`}\n aria-label=\"options\"\n ></ix-icon-button>\n </slot>\n </ix-field>\n <div class=\"menu\">\n <ix-menu\n anchor=\"anchor\"\n @opening=${this.handleMenuOpening}\n @opened=${this.menuOpened}\n @closed=${this.handleMenuClosed}\n >\n ${this.filteredOptions?.length\n ? this.filteredOptions.map(\n (item, id: number) =>\n html`<ix-menu-item\n id=${id}\n @click=${() => {\n this.selectItem(item);\n }}\n @keydown=${(e: KeyboardEvent) => {\n const selectionKeys = [' ', 'Tab', 'Enter'];\n if (selectionKeys.includes(e.key)) {\n this.selectItem(item);\n }\n }}\n class=${this.value === item ? 'selected' : ''}\n >\n <div slot=\"headline\">${item}</div>\n </ix-menu-item>`\n )\n : html`<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}\n </ix-menu>\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IxFilterSelect.js","sourceRoot":"","sources":["../src/IxFilterSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport '@digital-realty/ix-field/ix-field.js';\nimport '@digital-realty/ix-menu/ix-menu.js';\nimport '@digital-realty/ix-menu/ix-menu-item.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { IxMenu } from '@digital-realty/ix-menu';\nimport { IxField } from '@digital-realty/ix-field';\nimport { repeat } from 'lit/directives/repeat.js';\nimport {\n mixinOnReportValidity,\n onReportValidity,\n} from '@material/web/labs/behaviors/on-report-validity.js';\nimport {\n createValidator,\n getValidityAnchor,\n mixinConstraintValidation,\n} from '@material/web/labs/behaviors/constraint-validation.js';\nimport {\n getFormValue,\n mixinFormAssociated,\n} from '@material/web/labs/behaviors/form-associated.js';\nimport { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';\nimport { TextFieldValidator } from '@material/web/labs/behaviors/validators/text-field-validator.js';\nimport { Validator } from '@material/web/labs/behaviors/validators/validator.js';\nimport { IxFilterSelectStyles } from './ix-filter-select-styles.js';\n\nexport interface IFilterSelectOption {\n value: string;\n label: string;\n}\n\nconst filterSelectBaseClass = mixinOnReportValidity(\n mixinConstraintValidation(\n mixinFormAssociated(mixinElementInternals(LitElement))\n )\n);\n\nexport class IxFilterSelect extends filterSelectBaseClass {\n static get styles() {\n return [IxFilterSelectStyles];\n }\n\n static {\n requestUpdateOnAriaChange(IxFilterSelect);\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @query('ix-menu') menu!: IxMenu;\n\n @query('input')\n readonly input!: HTMLInputElement;\n\n @query('.field') private readonly field!: IxField | null;\n\n @property({ type: Array }) options: IFilterSelectOption[] = [];\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) label = '';\n\n @property({ type: String, attribute: 'error-text' }) errorText =\n 'Invalid error text';\n\n @property({ type: String, attribute: 'no-options-text' }) noFilteredOptions =\n 'No options';\n\n @property({ attribute: 'supporting-text' }) supportingText = '';\n\n @property({ type: Boolean, reflect: true }) error = false;\n\n @property({ type: Number, reflect: true }) tabIndex = 0;\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n @state() private filteredOptions: IFilterSelectOption[] = [];\n\n @state() public selectedItem: IFilterSelectOption | undefined = undefined;\n\n @state() private filterValue = '';\n\n @state() private menuOpen = false;\n\n /**\n * Returns true when the text field has been interacted with. Native\n * validation errors only display in response to user interactions.\n */\n @state() private dirty = false;\n\n @state() private focused = false;\n\n /**\n * Whether or not a native error has been reported via `reportValidity()`.\n */\n @state() private nativeError = false;\n\n /**\n * The validation message displayed from a native error via\n * `reportValidity()`.\n */\n @state() private nativeErrorText = '';\n\n @state() private menuOpening = false;\n\n private get hasError() {\n return !this.dirty && (this.error || this.nativeError);\n }\n\n private getErrorText() {\n return this.error ? this.errorText : this.nativeErrorText;\n }\n\n private getInput() {\n if (!this.input) {\n // If the input is not yet defined, synchronously render.\n // e.g.\n // const textField = document.createElement('md-outlined-text-field');\n // document.body.appendChild(textField);\n // textField.focus(); // synchronously render\n this.connectedCallback();\n this.scheduleUpdate();\n }\n\n if (this.isUpdatePending) {\n // If there are pending updates, synchronously perform them. This ensures\n // that constraint validation properties (like `required`) are synced\n // before interacting with input APIs that depend on them.\n this.scheduleUpdate();\n }\n\n return this.input!;\n }\n\n firstUpdated() {\n this.filterOptions();\n }\n\n protected override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('disabled')) {\n this.tabIndex = this.disabled ? -1 : 0;\n }\n\n if (changedProperties.has('options')) {\n this.filteredOptions = this.options;\n\n if (!this.selectedItem) {\n const item = this.options.find(({ value }) => value === this.value);\n this.selectItem(item);\n }\n }\n\n this.setMenuPosition();\n }\n\n handleMenuOpening = () => {\n this.menuOpening = true;\n this.menuOpen = true;\n this.setMenuPosition();\n };\n\n menuOpened = () => {\n this.setMenuPosition();\n this.menuOpening = false;\n };\n\n setMenuPosition = () => {\n const innerMenu = this.menu?.shadowRoot?.querySelector(\n '.menu'\n ) as HTMLElement;\n if (innerMenu) {\n innerMenu.style.width = '100%';\n innerMenu.style.height = 'auto';\n innerMenu.style.insetBlockStart = this.supportingText ? '-1rem' : '0';\n }\n };\n\n handleMenuClosed = () => {\n this.menuOpening = false;\n this.menuOpen = false;\n };\n\n handleInput = (e: InputEvent) => {\n const { value } = e.target as HTMLInputElement;\n this.dirty = true;\n this.filterValue = value;\n this.value = value;\n this.filterOptions();\n };\n\n selectItem = (item: IFilterSelectOption | undefined) => {\n if (item) {\n this.selectedItem = item;\n this.value = item.value;\n this.filterValue = item.label;\n this.filteredOptions = this.options;\n if (this.menuOpen || this.menuOpening) {\n this.menu.close();\n }\n this.dispatchEvent(\n new CustomEvent('select-filter-select', {\n detail: { value: item.value, label: item.label },\n bubbles: true,\n composed: true,\n })\n );\n }\n };\n\n toggleOpen = (e: Event) => {\n e.stopPropagation();\n if (!this.menu.open) {\n this.filterOptions();\n this.menu.show();\n this.menuOpening = true;\n this.setMenuPosition();\n } else {\n this.menu.close();\n }\n };\n\n filterOptions() {\n const filterValue =\n this.filterValue.trim().toLowerCase() ||\n this.value.trim().toLocaleLowerCase();\n\n if (!filterValue) {\n this.filteredOptions = this.options;\n }\n\n this.filteredOptions = this.options.filter(item =>\n item.label.toLowerCase().includes(filterValue)\n );\n }\n\n clear() {\n this.value = '';\n this.filterValue = '';\n this.selectedItem = undefined;\n this.focus();\n this.dispatchEvent(\n new CustomEvent('clear-filter-select', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /** @private */\n formResetCallback() {\n this.reset();\n }\n\n /**\n * Reset the text field to its default value.\n */\n reset() {\n this.value = '';\n const originalValue = this.getAttribute('value');\n const item = this.options.find(({ value }) => value === originalValue);\n this.selectItem(item);\n this.dirty = false;\n this.nativeError = false;\n this.nativeErrorText = '';\n }\n\n override attributeChangedCallback(\n attribute: string,\n newValue: string | null,\n oldValue: string | null\n ) {\n if (attribute === 'value' && this.dirty) {\n // After user input, changing the value attribute no longer updates the\n // text field's value (until reset). This matches native <input> behavior.\n return;\n }\n\n super.attributeChangedCallback(attribute, newValue, oldValue);\n }\n\n [createValidator](): Validator<unknown> {\n return new TextFieldValidator(() => ({\n state: this as any,\n renderedControl: this.input,\n }));\n }\n\n [getValidityAnchor](): HTMLElement | null {\n return this.input;\n }\n\n [onReportValidity](invalidEvent: Event | null) {\n // Prevent default pop-up behavior.\n invalidEvent?.preventDefault();\n\n this.nativeError = !!invalidEvent;\n this.nativeErrorText = this.validationMessage;\n }\n\n // Writable mixin properties for lit-html binding, needed for lit-analyzer\n declare disabled: boolean;\n\n declare name: string;\n\n override [getFormValue]() {\n return this.value;\n }\n\n override formStateRestoreCallback(formState: string) {\n this.value = formState;\n }\n\n private handleFocusChange() {\n this.focused = this.input?.matches(':focus') ?? false;\n\n if (this.menuOpen || this.menuOpening) return;\n\n if (this.focused) {\n this.menu.show();\n this.menuOpening = true;\n this.setMenuPosition();\n }\n }\n\n override focus() {\n // Required for the case that the user slots a focusable element into the\n // leading icon slot such as an iconbutton due to how delegatesFocus works.\n this.getInput().focus();\n }\n\n render() {\n const classes = {\n disabled: this.disabled,\n error: !this.disabled && this.hasError,\n };\n\n return html`\n <div class=\"filter-select\">\n <ix-field\n class=\"${classMap(classes)}\"\n id=\"anchor\"\n ?focused=${this.focused}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?error=${this.hasError}\n error-text=${!this.menuOpen && !this.menuOpening\n ? this.getErrorText()\n : nothing}\n label=${this.label}\n @click=${() => (!this.disabled ? this.input.focus() : null)}\n supporting-text=${this.supportingText}\n ?populated=${this.filterValue.length || this.value.length}\n >\n <input\n id=\"filter\"\n aria-invalid=${this.hasError}\n @input=${this.handleInput}\n .value=${this.filterValue}\n class=\"flex-fill input\"\n type=\"text\"\n ?disabled=${this.disabled}\n ?required=${this.required}\n @focus=${this.handleFocusChange}\n @blur=${this.handleFocusChange}\n />\n <slot name=\"end\" slot=\"end\">\n ${this.value.length\n ? html`<ix-icon-button\n @click=${this.clear}\n icon=\"close\"\n aria-label=\"clear\"\n ></ix-icon-button>`\n : nothing}\n <ix-icon-button\n @click=${this.toggleOpen}\n class=\"open-icon\"\n icon=${`arrow_drop_${this.menuOpen ? 'up' : 'down'}`}\n aria-label=\"options\"\n ></ix-icon-button>\n </slot>\n </ix-field>\n <div class=\"menu\">\n <ix-menu\n anchor=\"anchor\"\n @opening=${this.handleMenuOpening}\n @opened=${this.menuOpened}\n @closed=${this.handleMenuClosed}\n default-focus=\"none\"\n skip-restore-focus\n >\n ${this.filteredOptions?.length\n ? repeat(\n this.filteredOptions,\n (item, index) => `${item.value}-${index}`,\n item =>\n html`<ix-menu-item\n @click=${() => {\n this.selectItem(item);\n }}\n @keydown=${(e: KeyboardEvent) => {\n const selectionKeys = ['Space', 'Enter'];\n if (selectionKeys.includes(e.key)) {\n this.selectItem(item);\n }\n }}\n class=${this.value === item.value ? 'selected' : ''}\n >\n <div slot=\"headline\">${item.label}</div>\n </ix-menu-item>`\n )\n : html`<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}\n </ix-menu>\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{css,LitElement,html,nothing}from"lit";import{query,property,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";import"@digital-realty/ix-field/ix-field.js";import"@digital-realty/ix-menu/ix-menu.js";import"@digital-realty/ix-menu/ix-menu-item.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";
|
|
1
|
+
import{__decorate}from"tslib";import{css,LitElement,html,nothing}from"lit";import{query,property,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";import"@digital-realty/ix-field/ix-field.js";import"@digital-realty/ix-menu/ix-menu.js";import"@digital-realty/ix-menu/ix-menu-item.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import{repeat}from"lit/directives/repeat.js";import{mixinOnReportValidity,onReportValidity}from"@material/web/labs/behaviors/on-report-validity.js";import{mixinConstraintValidation,createValidator,getValidityAnchor}from"@material/web/labs/behaviors/constraint-validation.js";import{mixinFormAssociated,getFormValue}from"@material/web/labs/behaviors/form-associated.js";import{mixinElementInternals}from"@material/web/labs/behaviors/element-internals.js";import{TextFieldValidator}from"@material/web/labs/behaviors/validators/text-field-validator.js";let IxFilterSelectStyles=css`:host{display:block}:host([disabled]){pointer-events:none}ix-field{display:block}ix-field label{display:none}.flex-fill{flex:1}.menu{position:relative}.menu input,.menu label{cursor:pointer}input{border:none;background:0 0;outline:0;min-width:3rem}ix-chip-set{min-height:var(--_content-line-height)}ix-menu{--md-menu-container-color:#fff;max-height:500px}ix-menu-item{position:relative}ix-menu-item label{display:flex;align-items:center;position:absolute;top:0;left:0;right:0;bottom:0}ix-menu-item label input[type=checkbox]{margin:0 1rem 2px}ix-menu-item.selected{background:var(--md-menu-item-selected-container-color,--md-sys-color-tertiary-container)}ix-icon-button{--md-icon-button-icon-color:var(--md-sys-text-color-secondary);--md-icon-button-hover-icon-color:var(--md-sys-text-color-secondary);--md-icon-button-hover-state-layer-color:var(
|
|
2
2
|
--md-sys-text-color-secondary
|
|
3
3
|
);--md-icon-button-pressed-icon-color:var(--md-sys-text-color-secondary);--md-icon-button-pressed-state-layer-color:var(
|
|
4
4
|
--md-sys-text-color-secondary
|
|
5
|
-
)}.open-icon{margin-right:.5rem}.filter-select{position:relative}
|
|
5
|
+
)}.open-icon{margin-right:.5rem}.filter-select{position:relative}`,filterSelectBaseClass=mixinOnReportValidity(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(LitElement))));class IxFilterSelect extends filterSelectBaseClass{constructor(){super(...arguments),this.options=[],this.value="",this.label="",this.errorText="Invalid error text",this.noFilteredOptions="No options",this.supportingText="",this.error=!1,this.tabIndex=0,this.required=!1,this.filteredOptions=[],this.selectedItem=void 0,this.filterValue="",this.menuOpen=!1,this.dirty=!1,this.focused=!1,this.nativeError=!1,this.nativeErrorText="",this.menuOpening=!1,this.handleMenuOpening=()=>{this.menuOpening=!0,this.menuOpen=!0,this.setMenuPosition()},this.menuOpened=()=>{this.setMenuPosition(),this.menuOpening=!1},this.setMenuPosition=()=>{var e=null==(e=null==(e=this.menu)?void 0:e.shadowRoot)?void 0:e.querySelector(".menu");e&&(e.style.width="100%",e.style.height="auto",e.style.insetBlockStart=this.supportingText?"-1rem":"0")},this.handleMenuClosed=()=>{this.menuOpening=!1,this.menuOpen=!1},this.handleInput=e=>{e=e.target.value;this.dirty=!0,this.filterValue=e,this.value=e,this.filterOptions()},this.selectItem=e=>{e&&(this.selectedItem=e,this.value=e.value,this.filterValue=e.label,this.filteredOptions=this.options,(this.menuOpen||this.menuOpening)&&this.menu.close(),this.dispatchEvent(new CustomEvent("select-filter-select",{detail:{value:e.value,label:e.label},bubbles:!0,composed:!0})))},this.toggleOpen=e=>{e.stopPropagation(),this.menu.open?this.menu.close():(this.filterOptions(),this.menu.show(),this.menuOpening=!0,this.setMenuPosition())}}static get styles(){return[IxFilterSelectStyles]}get hasError(){return!this.dirty&&(this.error||this.nativeError)}getErrorText(){return this.error?this.errorText:this.nativeErrorText}getInput(){return this.input||(this.connectedCallback(),this.scheduleUpdate()),this.isUpdatePending&&this.scheduleUpdate(),this.input}firstUpdated(){this.filterOptions()}updated(e){e.has("disabled")&&(this.tabIndex=this.disabled?-1:0),e.has("options")&&(this.filteredOptions=this.options,this.selectedItem||(e=this.options.find(({value:e})=>e===this.value),this.selectItem(e))),this.setMenuPosition()}filterOptions(){let t=this.filterValue.trim().toLowerCase()||this.value.trim().toLocaleLowerCase();t||(this.filteredOptions=this.options),this.filteredOptions=this.options.filter(e=>e.label.toLowerCase().includes(t))}clear(){this.value="",this.filterValue="",this.selectedItem=void 0,this.focus(),this.dispatchEvent(new CustomEvent("clear-filter-select",{bubbles:!0,composed:!0}))}formResetCallback(){this.reset()}reset(){this.value="";let t=this.getAttribute("value");var e=this.options.find(({value:e})=>e===t);this.selectItem(e),this.dirty=!1,this.nativeError=!1,this.nativeErrorText=""}attributeChangedCallback(e,t,i){"value"===e&&this.dirty||super.attributeChangedCallback(e,t,i)}[createValidator](){return new TextFieldValidator(()=>({state:this,renderedControl:this.input}))}[getValidityAnchor](){return this.input}[onReportValidity](e){null!=e&&e.preventDefault(),this.nativeError=!!e,this.nativeErrorText=this.validationMessage}[getFormValue](){return this.value}formStateRestoreCallback(e){this.value=e}handleFocusChange(){var e;this.focused=null!=(e=null==(e=this.input)?void 0:e.matches(":focus"))&&e,this.menuOpen||this.menuOpening||this.focused&&(this.menu.show(),this.menuOpening=!0,this.setMenuPosition())}focus(){this.getInput().focus()}render(){var e={disabled:this.disabled,error:!this.disabled&&this.hasError};return html`<div class="filter-select"><ix-field class="${classMap(e)}" id="anchor" ?focused="${this.focused}" ?disabled="${this.disabled}" ?required="${this.required}" ?error="${this.hasError}" error-text="${this.menuOpen||this.menuOpening?nothing:this.getErrorText()}" label="${this.label}" @click="${()=>this.disabled?null:this.input.focus()}" supporting-text="${this.supportingText}" ?populated="${this.filterValue.length||this.value.length}"><input id="filter" aria-invalid="${this.hasError}" @input="${this.handleInput}" .value="${this.filterValue}" class="flex-fill input" type="text" ?disabled="${this.disabled}" ?required="${this.required}" @focus="${this.handleFocusChange}" @blur="${this.handleFocusChange}"><slot name="end" slot="end">${this.value.length?html`<ix-icon-button @click="${this.clear}" icon="close" aria-label="clear"></ix-icon-button>`:nothing}<ix-icon-button @click="${this.toggleOpen}" class="open-icon" icon="${"arrow_drop_"+(this.menuOpen?"up":"down")}" aria-label="options"></ix-icon-button></slot></ix-field><div class="menu"><ix-menu anchor="anchor" @opening="${this.handleMenuOpening}" @opened="${this.menuOpened}" @closed="${this.handleMenuClosed}" default-focus="none" skip-restore-focus>${null!=(e=this.filteredOptions)&&e.length?repeat(this.filteredOptions,(e,t)=>e.value+"-"+t,t=>html`<ix-menu-item @click="${()=>{this.selectItem(t)}}" @keydown="${e=>{["Space","Enter"].includes(e.key)&&this.selectItem(t)}}" class="${this.value===t.value?"selected":""}"><div slot="headline">${t.label}</div></ix-menu-item>`):html`<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}</ix-menu></div></div>`}}requestUpdateOnAriaChange(IxFilterSelect),IxFilterSelect.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},__decorate([query("ix-menu")],IxFilterSelect.prototype,"menu",void 0),__decorate([query("input")],IxFilterSelect.prototype,"input",void 0),__decorate([query(".field")],IxFilterSelect.prototype,"field",void 0),__decorate([property({type:Array})],IxFilterSelect.prototype,"options",void 0),__decorate([property({type:String})],IxFilterSelect.prototype,"value",void 0),__decorate([property({type:String})],IxFilterSelect.prototype,"label",void 0),__decorate([property({type:String,attribute:"error-text"})],IxFilterSelect.prototype,"errorText",void 0),__decorate([property({type:String,attribute:"no-options-text"})],IxFilterSelect.prototype,"noFilteredOptions",void 0),__decorate([property({attribute:"supporting-text"})],IxFilterSelect.prototype,"supportingText",void 0),__decorate([property({type:Boolean,reflect:!0})],IxFilterSelect.prototype,"error",void 0),__decorate([property({type:Number,reflect:!0})],IxFilterSelect.prototype,"tabIndex",void 0),__decorate([property({type:Boolean,reflect:!0})],IxFilterSelect.prototype,"required",void 0),__decorate([state()],IxFilterSelect.prototype,"filteredOptions",void 0),__decorate([state()],IxFilterSelect.prototype,"selectedItem",void 0),__decorate([state()],IxFilterSelect.prototype,"filterValue",void 0),__decorate([state()],IxFilterSelect.prototype,"menuOpen",void 0),__decorate([state()],IxFilterSelect.prototype,"dirty",void 0),__decorate([state()],IxFilterSelect.prototype,"focused",void 0),__decorate([state()],IxFilterSelect.prototype,"nativeError",void 0),__decorate([state()],IxFilterSelect.prototype,"nativeErrorText",void 0),__decorate([state()],IxFilterSelect.prototype,"menuOpening",void 0),window.customElements.define("ix-filter-select",IxFilterSelect);
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-filter-select following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.30",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -27,14 +27,14 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@digital-realty/ix-field": "^1.0.5",
|
|
30
|
-
"@digital-realty/ix-icon-button": "^1.0.
|
|
30
|
+
"@digital-realty/ix-icon-button": "^1.0.40",
|
|
31
31
|
"@digital-realty/ix-menu": "^1.0.4",
|
|
32
32
|
"@material/web": "1.2.0",
|
|
33
33
|
"lit": "^2.0.2"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@custom-elements-manifest/analyzer": "^0.4.17",
|
|
37
|
-
"@digital-realty/theme": "^1.0.
|
|
37
|
+
"@digital-realty/theme": "^1.0.30",
|
|
38
38
|
"@open-wc/eslint-config": "^9.2.1",
|
|
39
39
|
"@open-wc/testing": "^3.1.6",
|
|
40
40
|
"@typescript-eslint/eslint-plugin": "^5.48.0",
|
|
@@ -100,5 +100,5 @@
|
|
|
100
100
|
"README.md",
|
|
101
101
|
"LICENSE"
|
|
102
102
|
],
|
|
103
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "024e4b85148c7a248e9f283e35085f512e7c3b1e"
|
|
104
104
|
}
|