@digital-realty/ix-filter-select 1.0.30 → 1.0.32-alpha.0
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 +90 -90
- package/dist/IxFilterSelect.js +322 -322
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/ix-filter-select-styles.d.ts +1 -1
- package/dist/ix-filter-select-styles.js +2 -2
- package/dist/ix-filter-select.d.ts +1 -1
- package/dist/ix-filter-select.js +2 -2
- package/package.json +6 -6
package/dist/IxFilterSelect.d.ts
CHANGED
|
@@ -1,90 +1,90 @@
|
|
|
1
|
-
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
-
import '@digital-realty/ix-field/ix-field.js';
|
|
3
|
-
import '@digital-realty/ix-menu/ix-menu.js';
|
|
4
|
-
import '@digital-realty/ix-menu/ix-menu-item.js';
|
|
5
|
-
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
6
|
-
import { IxMenu } from '@digital-realty/ix-menu';
|
|
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 {
|
|
17
|
-
static get styles(): import("lit").CSSResult[];
|
|
18
|
-
/** @nocollapse */
|
|
19
|
-
static shadowRootOptions: {
|
|
20
|
-
delegatesFocus: boolean;
|
|
21
|
-
mode: ShadowRootMode;
|
|
22
|
-
slotAssignment?: SlotAssignmentMode | undefined;
|
|
23
|
-
customElements?: CustomElementRegistry | undefined;
|
|
24
|
-
registry?: CustomElementRegistry | undefined;
|
|
25
|
-
};
|
|
26
|
-
menu: IxMenu;
|
|
27
|
-
readonly input: HTMLInputElement;
|
|
28
|
-
private readonly field;
|
|
29
|
-
options: IFilterSelectOption[];
|
|
30
|
-
value: string;
|
|
31
|
-
label: string;
|
|
32
|
-
errorText: string;
|
|
33
|
-
noFilteredOptions: string;
|
|
34
|
-
supportingText: string;
|
|
35
|
-
error: boolean;
|
|
36
|
-
tabIndex: number;
|
|
37
|
-
required: boolean;
|
|
38
|
-
private filteredOptions;
|
|
39
|
-
selectedItem: IFilterSelectOption | undefined;
|
|
40
|
-
private filterValue;
|
|
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;
|
|
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;
|
|
57
|
-
private menuOpening;
|
|
58
|
-
private get hasError();
|
|
59
|
-
private getErrorText;
|
|
60
|
-
private getInput;
|
|
61
|
-
firstUpdated(): void;
|
|
62
|
-
protected updated(changedProperties: PropertyValues): void;
|
|
63
|
-
handleMenuOpening: () => void;
|
|
64
|
-
menuOpened: () => void;
|
|
65
|
-
setMenuPosition: () => void;
|
|
66
|
-
handleMenuClosed: () => void;
|
|
67
|
-
handleInput: (e: InputEvent) => void;
|
|
68
|
-
selectItem: (item: IFilterSelectOption | undefined) => void;
|
|
69
|
-
toggleOpen: (e: Event) => void;
|
|
70
|
-
filterOptions(): void;
|
|
71
|
-
clear(): void;
|
|
72
|
-
/** @private */
|
|
73
|
-
formResetCallback(): void;
|
|
74
|
-
/**
|
|
75
|
-
* Reset the text field to its default value.
|
|
76
|
-
*/
|
|
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;
|
|
88
|
-
render(): import("lit").TemplateResult<1>;
|
|
89
|
-
}
|
|
90
|
-
export {};
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
+
import '@digital-realty/ix-field/ix-field.js';
|
|
3
|
+
import '@digital-realty/ix-menu/ix-menu.js';
|
|
4
|
+
import '@digital-realty/ix-menu/ix-menu-item.js';
|
|
5
|
+
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
6
|
+
import { IxMenu } from '@digital-realty/ix-menu';
|
|
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 {
|
|
17
|
+
static get styles(): import("lit").CSSResult[];
|
|
18
|
+
/** @nocollapse */
|
|
19
|
+
static shadowRootOptions: {
|
|
20
|
+
delegatesFocus: boolean;
|
|
21
|
+
mode: ShadowRootMode;
|
|
22
|
+
slotAssignment?: SlotAssignmentMode | undefined;
|
|
23
|
+
customElements?: CustomElementRegistry | undefined;
|
|
24
|
+
registry?: CustomElementRegistry | undefined;
|
|
25
|
+
};
|
|
26
|
+
menu: IxMenu;
|
|
27
|
+
readonly input: HTMLInputElement;
|
|
28
|
+
private readonly field;
|
|
29
|
+
options: IFilterSelectOption[];
|
|
30
|
+
value: string;
|
|
31
|
+
label: string;
|
|
32
|
+
errorText: string;
|
|
33
|
+
noFilteredOptions: string;
|
|
34
|
+
supportingText: string;
|
|
35
|
+
error: boolean;
|
|
36
|
+
tabIndex: number;
|
|
37
|
+
required: boolean;
|
|
38
|
+
private filteredOptions;
|
|
39
|
+
selectedItem: IFilterSelectOption | undefined;
|
|
40
|
+
private filterValue;
|
|
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;
|
|
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;
|
|
57
|
+
private menuOpening;
|
|
58
|
+
private get hasError();
|
|
59
|
+
private getErrorText;
|
|
60
|
+
private getInput;
|
|
61
|
+
firstUpdated(): void;
|
|
62
|
+
protected updated(changedProperties: PropertyValues): void;
|
|
63
|
+
handleMenuOpening: () => void;
|
|
64
|
+
menuOpened: () => void;
|
|
65
|
+
setMenuPosition: () => void;
|
|
66
|
+
handleMenuClosed: () => void;
|
|
67
|
+
handleInput: (e: InputEvent) => void;
|
|
68
|
+
selectItem: (item: IFilterSelectOption | undefined) => void;
|
|
69
|
+
toggleOpen: (e: Event) => void;
|
|
70
|
+
filterOptions(): void;
|
|
71
|
+
clear(): void;
|
|
72
|
+
/** @private */
|
|
73
|
+
formResetCallback(): void;
|
|
74
|
+
/**
|
|
75
|
+
* Reset the text field to its default value.
|
|
76
|
+
*/
|
|
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;
|
|
88
|
+
render(): import("lit").TemplateResult<1>;
|
|
89
|
+
}
|
|
90
|
+
export {};
|
package/dist/IxFilterSelect.js
CHANGED
|
@@ -1,238 +1,238 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { html, LitElement, nothing } from 'lit';
|
|
3
|
-
import { property, query, state } from 'lit/decorators.js';
|
|
4
|
-
import { classMap } from 'lit/directives/class-map.js';
|
|
5
|
-
import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
|
|
6
|
-
import '@digital-realty/ix-field/ix-field.js';
|
|
7
|
-
import '@digital-realty/ix-menu/ix-menu.js';
|
|
8
|
-
import '@digital-realty/ix-menu/ix-menu-item.js';
|
|
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';
|
|
16
|
-
import { IxFilterSelectStyles } from './ix-filter-select-styles.js';
|
|
17
|
-
const filterSelectBaseClass = mixinOnReportValidity(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(LitElement))));
|
|
18
|
-
export class IxFilterSelect extends filterSelectBaseClass {
|
|
19
|
-
constructor() {
|
|
20
|
-
super(...arguments);
|
|
21
|
-
this.options = [];
|
|
22
|
-
this.value = '';
|
|
23
|
-
this.label = '';
|
|
24
|
-
this.errorText = 'Invalid error text';
|
|
25
|
-
this.noFilteredOptions = 'No options';
|
|
26
|
-
this.supportingText = '';
|
|
27
|
-
this.error = false;
|
|
28
|
-
this.tabIndex = 0;
|
|
29
|
-
this.required = false;
|
|
30
|
-
this.filteredOptions = [];
|
|
31
|
-
this.selectedItem = undefined;
|
|
32
|
-
this.filterValue = '';
|
|
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;
|
|
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 = '';
|
|
49
|
-
this.menuOpening = false;
|
|
50
|
-
this.handleMenuOpening = () => {
|
|
51
|
-
this.menuOpening = true;
|
|
52
|
-
this.menuOpen = true;
|
|
53
|
-
this.setMenuPosition();
|
|
54
|
-
};
|
|
55
|
-
this.menuOpened = () => {
|
|
56
|
-
this.setMenuPosition();
|
|
57
|
-
this.menuOpening = false;
|
|
58
|
-
};
|
|
59
|
-
this.setMenuPosition = () => {
|
|
60
|
-
var _a, _b;
|
|
61
|
-
const innerMenu = (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.menu');
|
|
62
|
-
if (innerMenu) {
|
|
63
|
-
innerMenu.style.width = '100%';
|
|
64
|
-
innerMenu.style.height = 'auto';
|
|
65
|
-
innerMenu.style.insetBlockStart = this.supportingText ? '-1rem' : '0';
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
this.handleMenuClosed = () => {
|
|
69
|
-
this.menuOpening = false;
|
|
70
|
-
this.menuOpen = false;
|
|
71
|
-
};
|
|
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();
|
|
87
|
-
}
|
|
88
|
-
this.dispatchEvent(new CustomEvent('select-filter-select', {
|
|
89
|
-
detail: { value: item.value, label: item.label },
|
|
90
|
-
bubbles: true,
|
|
91
|
-
composed: true,
|
|
92
|
-
}));
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
this.toggleOpen = (e) => {
|
|
96
|
-
e.stopPropagation();
|
|
97
|
-
if (!this.menu.open) {
|
|
98
|
-
this.filterOptions();
|
|
99
|
-
this.menu.show();
|
|
100
|
-
this.menuOpening = true;
|
|
101
|
-
this.setMenuPosition();
|
|
102
|
-
}
|
|
103
|
-
else {
|
|
104
|
-
this.menu.close();
|
|
105
|
-
}
|
|
106
|
-
};
|
|
107
|
-
}
|
|
108
|
-
static get styles() {
|
|
109
|
-
return [IxFilterSelectStyles];
|
|
110
|
-
}
|
|
111
|
-
get hasError() {
|
|
112
|
-
return !this.dirty && (this.error || this.nativeError);
|
|
113
|
-
}
|
|
114
|
-
getErrorText() {
|
|
115
|
-
return this.error ? this.errorText : this.nativeErrorText;
|
|
116
|
-
}
|
|
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;
|
|
134
|
-
}
|
|
135
|
-
firstUpdated() {
|
|
136
|
-
this.filterOptions();
|
|
137
|
-
}
|
|
138
|
-
updated(changedProperties) {
|
|
139
|
-
if (changedProperties.has('disabled')) {
|
|
140
|
-
this.tabIndex = this.disabled ? -1 : 0;
|
|
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
|
-
}
|
|
149
|
-
this.setMenuPosition();
|
|
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
|
-
}));
|
|
168
|
-
}
|
|
169
|
-
/** @private */
|
|
170
|
-
formResetCallback() {
|
|
171
|
-
this.reset();
|
|
172
|
-
}
|
|
173
|
-
/**
|
|
174
|
-
* Reset the text field to its default value.
|
|
175
|
-
*/
|
|
176
|
-
reset() {
|
|
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();
|
|
229
|
-
}
|
|
230
|
-
render() {
|
|
231
|
-
var _a;
|
|
232
|
-
const classes = {
|
|
233
|
-
disabled: this.disabled,
|
|
234
|
-
error: !this.disabled && this.hasError,
|
|
235
|
-
};
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html, LitElement, nothing } from 'lit';
|
|
3
|
+
import { property, query, state } from 'lit/decorators.js';
|
|
4
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
5
|
+
import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
|
|
6
|
+
import '@digital-realty/ix-field/ix-field.js';
|
|
7
|
+
import '@digital-realty/ix-menu/ix-menu.js';
|
|
8
|
+
import '@digital-realty/ix-menu/ix-menu-item.js';
|
|
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';
|
|
16
|
+
import { IxFilterSelectStyles } from './ix-filter-select-styles.js';
|
|
17
|
+
const filterSelectBaseClass = mixinOnReportValidity(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(LitElement))));
|
|
18
|
+
export class IxFilterSelect extends filterSelectBaseClass {
|
|
19
|
+
constructor() {
|
|
20
|
+
super(...arguments);
|
|
21
|
+
this.options = [];
|
|
22
|
+
this.value = '';
|
|
23
|
+
this.label = '';
|
|
24
|
+
this.errorText = 'Invalid error text';
|
|
25
|
+
this.noFilteredOptions = 'No options';
|
|
26
|
+
this.supportingText = '';
|
|
27
|
+
this.error = false;
|
|
28
|
+
this.tabIndex = 0;
|
|
29
|
+
this.required = false;
|
|
30
|
+
this.filteredOptions = [];
|
|
31
|
+
this.selectedItem = undefined;
|
|
32
|
+
this.filterValue = '';
|
|
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;
|
|
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 = '';
|
|
49
|
+
this.menuOpening = false;
|
|
50
|
+
this.handleMenuOpening = () => {
|
|
51
|
+
this.menuOpening = true;
|
|
52
|
+
this.menuOpen = true;
|
|
53
|
+
this.setMenuPosition();
|
|
54
|
+
};
|
|
55
|
+
this.menuOpened = () => {
|
|
56
|
+
this.setMenuPosition();
|
|
57
|
+
this.menuOpening = false;
|
|
58
|
+
};
|
|
59
|
+
this.setMenuPosition = () => {
|
|
60
|
+
var _a, _b;
|
|
61
|
+
const innerMenu = (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.menu');
|
|
62
|
+
if (innerMenu) {
|
|
63
|
+
innerMenu.style.width = '100%';
|
|
64
|
+
innerMenu.style.height = 'auto';
|
|
65
|
+
innerMenu.style.insetBlockStart = this.supportingText ? '-1rem' : '0';
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
this.handleMenuClosed = () => {
|
|
69
|
+
this.menuOpening = false;
|
|
70
|
+
this.menuOpen = false;
|
|
71
|
+
};
|
|
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();
|
|
87
|
+
}
|
|
88
|
+
this.dispatchEvent(new CustomEvent('select-filter-select', {
|
|
89
|
+
detail: { value: item.value, label: item.label },
|
|
90
|
+
bubbles: true,
|
|
91
|
+
composed: true,
|
|
92
|
+
}));
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
this.toggleOpen = (e) => {
|
|
96
|
+
e.stopPropagation();
|
|
97
|
+
if (!this.menu.open) {
|
|
98
|
+
this.filterOptions();
|
|
99
|
+
this.menu.show();
|
|
100
|
+
this.menuOpening = true;
|
|
101
|
+
this.setMenuPosition();
|
|
102
|
+
}
|
|
103
|
+
else {
|
|
104
|
+
this.menu.close();
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
static get styles() {
|
|
109
|
+
return [IxFilterSelectStyles];
|
|
110
|
+
}
|
|
111
|
+
get hasError() {
|
|
112
|
+
return !this.dirty && (this.error || this.nativeError);
|
|
113
|
+
}
|
|
114
|
+
getErrorText() {
|
|
115
|
+
return this.error ? this.errorText : this.nativeErrorText;
|
|
116
|
+
}
|
|
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;
|
|
134
|
+
}
|
|
135
|
+
firstUpdated() {
|
|
136
|
+
this.filterOptions();
|
|
137
|
+
}
|
|
138
|
+
updated(changedProperties) {
|
|
139
|
+
if (changedProperties.has('disabled')) {
|
|
140
|
+
this.tabIndex = this.disabled ? -1 : 0;
|
|
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
|
+
}
|
|
149
|
+
this.setMenuPosition();
|
|
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
|
+
}));
|
|
168
|
+
}
|
|
169
|
+
/** @private */
|
|
170
|
+
formResetCallback() {
|
|
171
|
+
this.reset();
|
|
172
|
+
}
|
|
173
|
+
/**
|
|
174
|
+
* Reset the text field to its default value.
|
|
175
|
+
*/
|
|
176
|
+
reset() {
|
|
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();
|
|
229
|
+
}
|
|
230
|
+
render() {
|
|
231
|
+
var _a;
|
|
232
|
+
const classes = {
|
|
233
|
+
disabled: this.disabled,
|
|
234
|
+
error: !this.disabled && this.hasError,
|
|
235
|
+
};
|
|
236
236
|
return html `
|
|
237
237
|
<div class="filter-select">
|
|
238
238
|
<ix-field
|
|
@@ -242,8 +242,8 @@ export class IxFilterSelect extends filterSelectBaseClass {
|
|
|
242
242
|
?disabled=${this.disabled}
|
|
243
243
|
?required=${this.required}
|
|
244
244
|
?error=${this.hasError}
|
|
245
|
-
error-text=${!this.menuOpen && !this.menuOpening
|
|
246
|
-
? this.getErrorText()
|
|
245
|
+
error-text=${!this.menuOpen && !this.menuOpening
|
|
246
|
+
? this.getErrorText()
|
|
247
247
|
: nothing}
|
|
248
248
|
label=${this.label}
|
|
249
249
|
@click=${() => (!this.disabled ? this.input.focus() : null)}
|
|
@@ -263,12 +263,12 @@ export class IxFilterSelect extends filterSelectBaseClass {
|
|
|
263
263
|
@blur=${this.handleFocusChange}
|
|
264
264
|
/>
|
|
265
265
|
<slot name="end" slot="end">
|
|
266
|
-
${this.value.length
|
|
266
|
+
${this.value.length
|
|
267
267
|
? html `<ix-icon-button
|
|
268
268
|
@click=${this.clear}
|
|
269
269
|
icon="close"
|
|
270
270
|
aria-label="clear"
|
|
271
|
-
></ix-icon-button>`
|
|
271
|
+
></ix-icon-button>`
|
|
272
272
|
: nothing}
|
|
273
273
|
<ix-icon-button
|
|
274
274
|
@click=${this.toggleOpen}
|
|
@@ -287,97 +287,97 @@ export class IxFilterSelect extends filterSelectBaseClass {
|
|
|
287
287
|
default-focus="none"
|
|
288
288
|
skip-restore-focus
|
|
289
289
|
>
|
|
290
|
-
${((_a = this.filteredOptions) === null || _a === void 0 ? void 0 : _a.length)
|
|
290
|
+
${((_a = this.filteredOptions) === null || _a === void 0 ? void 0 : _a.length)
|
|
291
291
|
? repeat(this.filteredOptions, (item, index) => `${item.value}-${index}`, item => html `<ix-menu-item
|
|
292
|
-
@click=${() => {
|
|
293
|
-
this.selectItem(item);
|
|
292
|
+
@click=${() => {
|
|
293
|
+
this.selectItem(item);
|
|
294
294
|
}}
|
|
295
|
-
@keydown=${(e) => {
|
|
296
|
-
const selectionKeys = ['Space', 'Enter'];
|
|
297
|
-
if (selectionKeys.includes(e.key)) {
|
|
298
|
-
this.selectItem(item);
|
|
299
|
-
}
|
|
295
|
+
@keydown=${(e) => {
|
|
296
|
+
const selectionKeys = ['Space', 'Enter'];
|
|
297
|
+
if (selectionKeys.includes(e.key)) {
|
|
298
|
+
this.selectItem(item);
|
|
299
|
+
}
|
|
300
300
|
}}
|
|
301
301
|
class=${this.value === item.value ? 'selected' : ''}
|
|
302
302
|
>
|
|
303
303
|
<div slot="headline">${item.label}</div>
|
|
304
|
-
</ix-menu-item>`)
|
|
304
|
+
</ix-menu-item>`)
|
|
305
305
|
: html `<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}
|
|
306
306
|
</ix-menu>
|
|
307
307
|
</div>
|
|
308
308
|
</div>
|
|
309
|
-
`;
|
|
310
|
-
}
|
|
311
|
-
}
|
|
312
|
-
(() => {
|
|
313
|
-
requestUpdateOnAriaChange(IxFilterSelect);
|
|
314
|
-
})();
|
|
315
|
-
/** @nocollapse */
|
|
316
|
-
IxFilterSelect.shadowRootOptions = {
|
|
317
|
-
...LitElement.shadowRootOptions,
|
|
318
|
-
delegatesFocus: true,
|
|
319
|
-
};
|
|
320
|
-
__decorate([
|
|
321
|
-
query('ix-menu')
|
|
322
|
-
], IxFilterSelect.prototype, "menu", void 0);
|
|
323
|
-
__decorate([
|
|
324
|
-
query('input')
|
|
325
|
-
], IxFilterSelect.prototype, "input", void 0);
|
|
326
|
-
__decorate([
|
|
327
|
-
query('.field')
|
|
328
|
-
], IxFilterSelect.prototype, "field", void 0);
|
|
329
|
-
__decorate([
|
|
330
|
-
property({ type: Array })
|
|
331
|
-
], IxFilterSelect.prototype, "options", void 0);
|
|
332
|
-
__decorate([
|
|
333
|
-
property({ type: String })
|
|
334
|
-
], IxFilterSelect.prototype, "value", void 0);
|
|
335
|
-
__decorate([
|
|
336
|
-
property({ type: String })
|
|
337
|
-
], IxFilterSelect.prototype, "label", void 0);
|
|
338
|
-
__decorate([
|
|
339
|
-
property({ type: String, attribute: 'error-text' })
|
|
340
|
-
], IxFilterSelect.prototype, "errorText", void 0);
|
|
341
|
-
__decorate([
|
|
342
|
-
property({ type: String, attribute: 'no-options-text' })
|
|
343
|
-
], IxFilterSelect.prototype, "noFilteredOptions", void 0);
|
|
344
|
-
__decorate([
|
|
345
|
-
property({ attribute: 'supporting-text' })
|
|
346
|
-
], IxFilterSelect.prototype, "supportingText", void 0);
|
|
347
|
-
__decorate([
|
|
348
|
-
property({ type: Boolean, reflect: true })
|
|
349
|
-
], IxFilterSelect.prototype, "error", void 0);
|
|
350
|
-
__decorate([
|
|
351
|
-
property({ type: Number, reflect: true })
|
|
352
|
-
], IxFilterSelect.prototype, "tabIndex", void 0);
|
|
353
|
-
__decorate([
|
|
354
|
-
property({ type: Boolean, reflect: true })
|
|
355
|
-
], IxFilterSelect.prototype, "required", void 0);
|
|
356
|
-
__decorate([
|
|
357
|
-
state()
|
|
358
|
-
], IxFilterSelect.prototype, "filteredOptions", void 0);
|
|
359
|
-
__decorate([
|
|
360
|
-
state()
|
|
361
|
-
], IxFilterSelect.prototype, "selectedItem", void 0);
|
|
362
|
-
__decorate([
|
|
363
|
-
state()
|
|
364
|
-
], IxFilterSelect.prototype, "filterValue", void 0);
|
|
365
|
-
__decorate([
|
|
366
|
-
state()
|
|
367
|
-
], IxFilterSelect.prototype, "menuOpen", void 0);
|
|
368
|
-
__decorate([
|
|
369
|
-
state()
|
|
370
|
-
], IxFilterSelect.prototype, "dirty", void 0);
|
|
371
|
-
__decorate([
|
|
372
|
-
state()
|
|
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);
|
|
380
|
-
__decorate([
|
|
381
|
-
state()
|
|
382
|
-
], IxFilterSelect.prototype, "menuOpening", void 0);
|
|
309
|
+
`;
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
(() => {
|
|
313
|
+
requestUpdateOnAriaChange(IxFilterSelect);
|
|
314
|
+
})();
|
|
315
|
+
/** @nocollapse */
|
|
316
|
+
IxFilterSelect.shadowRootOptions = {
|
|
317
|
+
...LitElement.shadowRootOptions,
|
|
318
|
+
delegatesFocus: true,
|
|
319
|
+
};
|
|
320
|
+
__decorate([
|
|
321
|
+
query('ix-menu')
|
|
322
|
+
], IxFilterSelect.prototype, "menu", void 0);
|
|
323
|
+
__decorate([
|
|
324
|
+
query('input')
|
|
325
|
+
], IxFilterSelect.prototype, "input", void 0);
|
|
326
|
+
__decorate([
|
|
327
|
+
query('.field')
|
|
328
|
+
], IxFilterSelect.prototype, "field", void 0);
|
|
329
|
+
__decorate([
|
|
330
|
+
property({ type: Array })
|
|
331
|
+
], IxFilterSelect.prototype, "options", void 0);
|
|
332
|
+
__decorate([
|
|
333
|
+
property({ type: String })
|
|
334
|
+
], IxFilterSelect.prototype, "value", void 0);
|
|
335
|
+
__decorate([
|
|
336
|
+
property({ type: String })
|
|
337
|
+
], IxFilterSelect.prototype, "label", void 0);
|
|
338
|
+
__decorate([
|
|
339
|
+
property({ type: String, attribute: 'error-text' })
|
|
340
|
+
], IxFilterSelect.prototype, "errorText", void 0);
|
|
341
|
+
__decorate([
|
|
342
|
+
property({ type: String, attribute: 'no-options-text' })
|
|
343
|
+
], IxFilterSelect.prototype, "noFilteredOptions", void 0);
|
|
344
|
+
__decorate([
|
|
345
|
+
property({ attribute: 'supporting-text' })
|
|
346
|
+
], IxFilterSelect.prototype, "supportingText", void 0);
|
|
347
|
+
__decorate([
|
|
348
|
+
property({ type: Boolean, reflect: true })
|
|
349
|
+
], IxFilterSelect.prototype, "error", void 0);
|
|
350
|
+
__decorate([
|
|
351
|
+
property({ type: Number, reflect: true })
|
|
352
|
+
], IxFilterSelect.prototype, "tabIndex", void 0);
|
|
353
|
+
__decorate([
|
|
354
|
+
property({ type: Boolean, reflect: true })
|
|
355
|
+
], IxFilterSelect.prototype, "required", void 0);
|
|
356
|
+
__decorate([
|
|
357
|
+
state()
|
|
358
|
+
], IxFilterSelect.prototype, "filteredOptions", void 0);
|
|
359
|
+
__decorate([
|
|
360
|
+
state()
|
|
361
|
+
], IxFilterSelect.prototype, "selectedItem", void 0);
|
|
362
|
+
__decorate([
|
|
363
|
+
state()
|
|
364
|
+
], IxFilterSelect.prototype, "filterValue", void 0);
|
|
365
|
+
__decorate([
|
|
366
|
+
state()
|
|
367
|
+
], IxFilterSelect.prototype, "menuOpen", void 0);
|
|
368
|
+
__decorate([
|
|
369
|
+
state()
|
|
370
|
+
], IxFilterSelect.prototype, "dirty", void 0);
|
|
371
|
+
__decorate([
|
|
372
|
+
state()
|
|
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);
|
|
380
|
+
__decorate([
|
|
381
|
+
state()
|
|
382
|
+
], IxFilterSelect.prototype, "menuOpening", void 0);
|
|
383
383
|
//# sourceMappingURL=IxFilterSelect.js.map
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { IxFilterSelect } from './IxFilterSelect.js';
|
|
1
|
+
export { IxFilterSelect } from './IxFilterSelect.js';
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { IxFilterSelect } from './IxFilterSelect.js';
|
|
1
|
+
export { IxFilterSelect } from './IxFilterSelect.js';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const IxFilterSelectStyles: import("lit").CSSResult;
|
|
1
|
+
export declare const IxFilterSelectStyles: import("lit").CSSResult;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
1
|
+
import { css } from 'lit';
|
|
2
2
|
export const IxFilterSelectStyles = css `
|
|
3
3
|
:host {
|
|
4
4
|
display: block;
|
|
@@ -73,5 +73,5 @@ export const IxFilterSelectStyles = css `
|
|
|
73
73
|
.filter-select {
|
|
74
74
|
position: relative;
|
|
75
75
|
}
|
|
76
|
-
`;
|
|
76
|
+
`;
|
|
77
77
|
//# sourceMappingURL=ix-filter-select-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
package/dist/ix-filter-select.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { IxFilterSelect } from './IxFilterSelect.js';
|
|
2
|
-
window.customElements.define('ix-filter-select', IxFilterSelect);
|
|
1
|
+
import { IxFilterSelect } from './IxFilterSelect.js';
|
|
2
|
+
window.customElements.define('ix-filter-select', IxFilterSelect);
|
|
3
3
|
//# sourceMappingURL=ix-filter-select.js.map
|
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.32-alpha.0",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -26,15 +26,15 @@
|
|
|
26
26
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@digital-realty/ix-field": "^1.0.
|
|
30
|
-
"@digital-realty/ix-icon-button": "^1.0.
|
|
31
|
-
"@digital-realty/ix-menu": "^1.0.
|
|
29
|
+
"@digital-realty/ix-field": "^1.0.7-alpha.0",
|
|
30
|
+
"@digital-realty/ix-icon-button": "^1.0.42-alpha.0",
|
|
31
|
+
"@digital-realty/ix-menu": "^1.0.6-alpha.0",
|
|
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.32-alpha.0",
|
|
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": "020de6dab25bbe6058e9a71b2c56681822403481"
|
|
104
104
|
}
|