@digital-realty/ix-multi-select 1.1.3 → 1.1.4-alpha-224908-t51.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/IxMultiSelect.d.ts +109 -109
- package/dist/IxMultiSelect.js +314 -314
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/ix-multi-select-styles.d.ts +1 -1
- package/dist/ix-multi-select-styles.js +2 -2
- package/dist/ix-multi-select.d.ts +1 -1
- package/dist/ix-multi-select.js +2 -2
- package/package.json +6 -6
package/dist/IxMultiSelect.d.ts
CHANGED
|
@@ -1,109 +1,109 @@
|
|
|
1
|
-
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
-
import '@digital-realty/ix-chip/ix-chip-set.js';
|
|
3
|
-
import '@digital-realty/ix-chip/ix-chip.js';
|
|
4
|
-
import '@digital-realty/ix-field/ix-field.js';
|
|
5
|
-
import '@digital-realty/ix-menu/ix-menu.js';
|
|
6
|
-
import '@digital-realty/ix-menu/ix-menu-item.js';
|
|
7
|
-
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
8
|
-
import { IxMenu } from '@digital-realty/ix-menu';
|
|
9
|
-
import { IxChipSet } from '@digital-realty/ix-chip';
|
|
10
|
-
interface MultiSelectItem {
|
|
11
|
-
label: string;
|
|
12
|
-
selected: boolean;
|
|
13
|
-
filtered: boolean;
|
|
14
|
-
}
|
|
15
|
-
export declare class IxMultiSelect extends LitElement {
|
|
16
|
-
static get styles(): import("lit").CSSResult[];
|
|
17
|
-
/** @nocollapse */
|
|
18
|
-
static shadowRootOptions: {
|
|
19
|
-
delegatesFocus: boolean;
|
|
20
|
-
mode: ShadowRootMode;
|
|
21
|
-
slotAssignment?: SlotAssignmentMode | undefined;
|
|
22
|
-
customElements?: CustomElementRegistry | undefined;
|
|
23
|
-
registry?: CustomElementRegistry | undefined;
|
|
24
|
-
};
|
|
25
|
-
/** @nocollapse */
|
|
26
|
-
static readonly formAssociated = true;
|
|
27
|
-
private readonly internals;
|
|
28
|
-
/**
|
|
29
|
-
* The associated form element with which this element's value will submit.
|
|
30
|
-
*/
|
|
31
|
-
get form(): HTMLFormElement | null;
|
|
32
|
-
/**
|
|
33
|
-
* The labels this element is associated with.
|
|
34
|
-
*/
|
|
35
|
-
get labels(): NodeList;
|
|
36
|
-
/**
|
|
37
|
-
* The HTML name to use in form submission.
|
|
38
|
-
*/
|
|
39
|
-
get name(): string;
|
|
40
|
-
/**
|
|
41
|
-
* Returns the text field's validation error message.
|
|
42
|
-
*
|
|
43
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
|
|
44
|
-
*/
|
|
45
|
-
get validationMessage(): string;
|
|
46
|
-
/**
|
|
47
|
-
* Returns a `ValidityState` object that represents the validity states of the
|
|
48
|
-
* text field.
|
|
49
|
-
*
|
|
50
|
-
* https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
|
|
51
|
-
*/
|
|
52
|
-
get validity(): ValidityState;
|
|
53
|
-
/**
|
|
54
|
-
* Returns whether an element will successfully validate based on forms
|
|
55
|
-
* validation rules and constraints.
|
|
56
|
-
*
|
|
57
|
-
* https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate
|
|
58
|
-
*/
|
|
59
|
-
get willValidate(): boolean;
|
|
60
|
-
checkValidity(): boolean;
|
|
61
|
-
reportValidity(): boolean;
|
|
62
|
-
menu: IxMenu;
|
|
63
|
-
chips: IxChipSet;
|
|
64
|
-
inputFilter: HTMLInputElement;
|
|
65
|
-
items: MultiSelectItem[];
|
|
66
|
-
label: string;
|
|
67
|
-
errorText: string;
|
|
68
|
-
disabled: boolean;
|
|
69
|
-
tabIndex: number;
|
|
70
|
-
/**
|
|
71
|
-
* Gets or sets whether or not the text field is in a visually invalid state.
|
|
72
|
-
*
|
|
73
|
-
* This error state overrides the error state controlled by
|
|
74
|
-
* `reportValidity()`.
|
|
75
|
-
*/
|
|
76
|
-
error: boolean;
|
|
77
|
-
required: boolean;
|
|
78
|
-
private _items;
|
|
79
|
-
private filterValue;
|
|
80
|
-
private menuOpen;
|
|
81
|
-
private menuOpening;
|
|
82
|
-
private focused;
|
|
83
|
-
private noFilteredOptions;
|
|
84
|
-
get value(): string;
|
|
85
|
-
set value(selected: string);
|
|
86
|
-
get selectedItems(): MultiSelectItem[];
|
|
87
|
-
connectedCallback(): void;
|
|
88
|
-
protected updated(changedProperties: PropertyValues): void;
|
|
89
|
-
private optionSelect;
|
|
90
|
-
private chipRemove;
|
|
91
|
-
private filterOptions;
|
|
92
|
-
focusin: () => void;
|
|
93
|
-
handleFocusin: (e: Event) => void;
|
|
94
|
-
handleFocusout: () => void;
|
|
95
|
-
handleMenuOpening: () => void;
|
|
96
|
-
menuOpened: () => void;
|
|
97
|
-
setMenuPosition: () => void;
|
|
98
|
-
handleMenuClosed: () => void;
|
|
99
|
-
toggleOpen: (e: Event) => void;
|
|
100
|
-
clear: (e: Event) => void;
|
|
101
|
-
/** @private */
|
|
102
|
-
formResetCallback(): void;
|
|
103
|
-
/**
|
|
104
|
-
* Reset the text field to its default value.
|
|
105
|
-
*/
|
|
106
|
-
reset(): void;
|
|
107
|
-
render(): import("lit").TemplateResult<1>;
|
|
108
|
-
}
|
|
109
|
-
export {};
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
+
import '@digital-realty/ix-chip/ix-chip-set.js';
|
|
3
|
+
import '@digital-realty/ix-chip/ix-chip.js';
|
|
4
|
+
import '@digital-realty/ix-field/ix-field.js';
|
|
5
|
+
import '@digital-realty/ix-menu/ix-menu.js';
|
|
6
|
+
import '@digital-realty/ix-menu/ix-menu-item.js';
|
|
7
|
+
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
8
|
+
import { IxMenu } from '@digital-realty/ix-menu';
|
|
9
|
+
import { IxChipSet } from '@digital-realty/ix-chip';
|
|
10
|
+
interface MultiSelectItem {
|
|
11
|
+
label: string;
|
|
12
|
+
selected: boolean;
|
|
13
|
+
filtered: boolean;
|
|
14
|
+
}
|
|
15
|
+
export declare class IxMultiSelect extends LitElement {
|
|
16
|
+
static get styles(): import("lit").CSSResult[];
|
|
17
|
+
/** @nocollapse */
|
|
18
|
+
static shadowRootOptions: {
|
|
19
|
+
delegatesFocus: boolean;
|
|
20
|
+
mode: ShadowRootMode;
|
|
21
|
+
slotAssignment?: SlotAssignmentMode | undefined;
|
|
22
|
+
customElements?: CustomElementRegistry | undefined;
|
|
23
|
+
registry?: CustomElementRegistry | undefined;
|
|
24
|
+
};
|
|
25
|
+
/** @nocollapse */
|
|
26
|
+
static readonly formAssociated = true;
|
|
27
|
+
private readonly internals;
|
|
28
|
+
/**
|
|
29
|
+
* The associated form element with which this element's value will submit.
|
|
30
|
+
*/
|
|
31
|
+
get form(): HTMLFormElement | null;
|
|
32
|
+
/**
|
|
33
|
+
* The labels this element is associated with.
|
|
34
|
+
*/
|
|
35
|
+
get labels(): NodeList;
|
|
36
|
+
/**
|
|
37
|
+
* The HTML name to use in form submission.
|
|
38
|
+
*/
|
|
39
|
+
get name(): string;
|
|
40
|
+
/**
|
|
41
|
+
* Returns the text field's validation error message.
|
|
42
|
+
*
|
|
43
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
|
|
44
|
+
*/
|
|
45
|
+
get validationMessage(): string;
|
|
46
|
+
/**
|
|
47
|
+
* Returns a `ValidityState` object that represents the validity states of the
|
|
48
|
+
* text field.
|
|
49
|
+
*
|
|
50
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
|
|
51
|
+
*/
|
|
52
|
+
get validity(): ValidityState;
|
|
53
|
+
/**
|
|
54
|
+
* Returns whether an element will successfully validate based on forms
|
|
55
|
+
* validation rules and constraints.
|
|
56
|
+
*
|
|
57
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate
|
|
58
|
+
*/
|
|
59
|
+
get willValidate(): boolean;
|
|
60
|
+
checkValidity(): boolean;
|
|
61
|
+
reportValidity(): boolean;
|
|
62
|
+
menu: IxMenu;
|
|
63
|
+
chips: IxChipSet;
|
|
64
|
+
inputFilter: HTMLInputElement;
|
|
65
|
+
items: MultiSelectItem[];
|
|
66
|
+
label: string;
|
|
67
|
+
errorText: string;
|
|
68
|
+
disabled: boolean;
|
|
69
|
+
tabIndex: number;
|
|
70
|
+
/**
|
|
71
|
+
* Gets or sets whether or not the text field is in a visually invalid state.
|
|
72
|
+
*
|
|
73
|
+
* This error state overrides the error state controlled by
|
|
74
|
+
* `reportValidity()`.
|
|
75
|
+
*/
|
|
76
|
+
error: boolean;
|
|
77
|
+
required: boolean;
|
|
78
|
+
private _items;
|
|
79
|
+
private filterValue;
|
|
80
|
+
private menuOpen;
|
|
81
|
+
private menuOpening;
|
|
82
|
+
private focused;
|
|
83
|
+
private noFilteredOptions;
|
|
84
|
+
get value(): string;
|
|
85
|
+
set value(selected: string);
|
|
86
|
+
get selectedItems(): MultiSelectItem[];
|
|
87
|
+
connectedCallback(): void;
|
|
88
|
+
protected updated(changedProperties: PropertyValues): void;
|
|
89
|
+
private optionSelect;
|
|
90
|
+
private chipRemove;
|
|
91
|
+
private filterOptions;
|
|
92
|
+
focusin: () => void;
|
|
93
|
+
handleFocusin: (e: Event) => void;
|
|
94
|
+
handleFocusout: () => void;
|
|
95
|
+
handleMenuOpening: () => void;
|
|
96
|
+
menuOpened: () => void;
|
|
97
|
+
setMenuPosition: () => void;
|
|
98
|
+
handleMenuClosed: () => void;
|
|
99
|
+
toggleOpen: (e: Event) => void;
|
|
100
|
+
clear: (e: Event) => void;
|
|
101
|
+
/** @private */
|
|
102
|
+
formResetCallback(): void;
|
|
103
|
+
/**
|
|
104
|
+
* Reset the text field to its default value.
|
|
105
|
+
*/
|
|
106
|
+
reset(): void;
|
|
107
|
+
render(): import("lit").TemplateResult<1>;
|
|
108
|
+
}
|
|
109
|
+
export {};
|
package/dist/IxMultiSelect.js
CHANGED
|
@@ -1,240 +1,240 @@
|
|
|
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-chip/ix-chip-set.js';
|
|
7
|
-
import '@digital-realty/ix-chip/ix-chip.js';
|
|
8
|
-
import '@digital-realty/ix-field/ix-field.js';
|
|
9
|
-
import '@digital-realty/ix-menu/ix-menu.js';
|
|
10
|
-
import '@digital-realty/ix-menu/ix-menu-item.js';
|
|
11
|
-
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
12
|
-
import { IxMultiSelectStyles } from './ix-multi-select-styles.js';
|
|
13
|
-
export class IxMultiSelect extends LitElement {
|
|
14
|
-
constructor() {
|
|
15
|
-
super(...arguments);
|
|
16
|
-
this.internals = this /* needed for closure */
|
|
17
|
-
.attachInternals();
|
|
18
|
-
this.items = [];
|
|
19
|
-
this.label = '';
|
|
20
|
-
this.errorText = 'Invalid error text';
|
|
21
|
-
this.disabled = false;
|
|
22
|
-
this.tabIndex = 0;
|
|
23
|
-
/**
|
|
24
|
-
* Gets or sets whether or not the text field is in a visually invalid state.
|
|
25
|
-
*
|
|
26
|
-
* This error state overrides the error state controlled by
|
|
27
|
-
* `reportValidity()`.
|
|
28
|
-
*/
|
|
29
|
-
this.error = false;
|
|
30
|
-
this.required = false;
|
|
31
|
-
this._items = [];
|
|
32
|
-
this.filterValue = '';
|
|
33
|
-
this.menuOpen = false;
|
|
34
|
-
this.menuOpening = false;
|
|
35
|
-
this.focused = false;
|
|
36
|
-
this.noFilteredOptions = 'No options';
|
|
37
|
-
this.optionSelect = (e, id) => {
|
|
38
|
-
let ischecked;
|
|
39
|
-
if (e instanceof KeyboardEvent) {
|
|
40
|
-
e.preventDefault();
|
|
41
|
-
ischecked = !this._items[id].selected;
|
|
42
|
-
}
|
|
43
|
-
else {
|
|
44
|
-
ischecked = e.target.checked;
|
|
45
|
-
}
|
|
46
|
-
this._items = this._items.map((item, i) => id === i
|
|
47
|
-
? { ...item, selected: ischecked, filtered: false }
|
|
48
|
-
: { ...item, filtered: false });
|
|
49
|
-
this.dispatchEvent(new CustomEvent('toggle-multi-select-item', {
|
|
50
|
-
detail: { label: this._items[id].label, selected: ischecked },
|
|
51
|
-
bubbles: true,
|
|
52
|
-
composed: true,
|
|
53
|
-
}));
|
|
54
|
-
this.filterValue = '';
|
|
55
|
-
};
|
|
56
|
-
this.chipRemove = (id) => {
|
|
57
|
-
this._items = this._items.map((item, i) => id === i ? { ...item, selected: false } : { ...item });
|
|
58
|
-
this.dispatchEvent(new CustomEvent('remove-multi-select-item', {
|
|
59
|
-
detail: this._items[id].label,
|
|
60
|
-
bubbles: true,
|
|
61
|
-
composed: true,
|
|
62
|
-
}));
|
|
63
|
-
};
|
|
64
|
-
this.filterOptions = (e) => {
|
|
65
|
-
const filterValue = e.target.value.toLocaleLowerCase();
|
|
66
|
-
this.filterValue = filterValue;
|
|
67
|
-
this._items = this._items.map(item => {
|
|
68
|
-
const filtered = item.label.toLowerCase().indexOf(filterValue) === -1;
|
|
69
|
-
return { ...item, filtered };
|
|
70
|
-
});
|
|
71
|
-
};
|
|
72
|
-
this.focusin = () => {
|
|
73
|
-
this.focused = true;
|
|
74
|
-
this.menu.show();
|
|
75
|
-
this.setMenuPosition();
|
|
76
|
-
this.internals.setFormValue(this.value);
|
|
77
|
-
};
|
|
78
|
-
this.handleFocusin = (e) => {
|
|
79
|
-
const target = e.target;
|
|
80
|
-
if (target.id !== 'filter' || this.disabled)
|
|
81
|
-
return;
|
|
82
|
-
if (this.menuOpen || this.menuOpening)
|
|
83
|
-
return;
|
|
84
|
-
this.focusin();
|
|
85
|
-
};
|
|
86
|
-
this.handleFocusout = () => {
|
|
87
|
-
this.focused = false;
|
|
88
|
-
};
|
|
89
|
-
this.handleMenuOpening = () => {
|
|
90
|
-
this.menuOpening = true;
|
|
91
|
-
this.menuOpen = true;
|
|
92
|
-
this.setMenuPosition();
|
|
93
|
-
this.internals.setFormValue(this.value);
|
|
94
|
-
};
|
|
95
|
-
this.menuOpened = () => {
|
|
96
|
-
this.setMenuPosition();
|
|
97
|
-
this.menuOpening = false;
|
|
98
|
-
this.focused = true;
|
|
99
|
-
};
|
|
100
|
-
this.setMenuPosition = () => {
|
|
101
|
-
var _a, _b;
|
|
102
|
-
const innerMenu = (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.menu');
|
|
103
|
-
if (innerMenu) {
|
|
104
|
-
innerMenu.style.width = '100%';
|
|
105
|
-
innerMenu.style.insetBlockStart = '0';
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
|
-
this.handleMenuClosed = () => {
|
|
109
|
-
this.menuOpen = false;
|
|
110
|
-
this.menuOpening = false;
|
|
111
|
-
this.focused = this.selectedItems.length > 0;
|
|
112
|
-
};
|
|
113
|
-
this.toggleOpen = (e) => {
|
|
114
|
-
e.stopPropagation();
|
|
115
|
-
if (!this.menu.open) {
|
|
116
|
-
this.menu.show();
|
|
117
|
-
this.menuOpening = true;
|
|
118
|
-
this.menuOpen = true;
|
|
119
|
-
this.setMenuPosition();
|
|
120
|
-
}
|
|
121
|
-
else {
|
|
122
|
-
if (this.menuOpening)
|
|
123
|
-
return;
|
|
124
|
-
this.menu.close();
|
|
125
|
-
}
|
|
126
|
-
};
|
|
127
|
-
this.clear = (e) => {
|
|
128
|
-
e.stopPropagation();
|
|
129
|
-
this._items = this._items.map(item => ({ ...item, selected: false }));
|
|
130
|
-
this.filterValue = '';
|
|
131
|
-
this.focused = false;
|
|
132
|
-
this.menuOpen = false;
|
|
133
|
-
this.menuOpening = false;
|
|
134
|
-
this.menu.close();
|
|
135
|
-
this.dispatchEvent(new CustomEvent('clear-multi-select', {
|
|
136
|
-
bubbles: true,
|
|
137
|
-
composed: true,
|
|
138
|
-
}));
|
|
139
|
-
};
|
|
140
|
-
}
|
|
141
|
-
static get styles() {
|
|
142
|
-
return [IxMultiSelectStyles];
|
|
143
|
-
}
|
|
144
|
-
/**
|
|
145
|
-
* The associated form element with which this element's value will submit.
|
|
146
|
-
*/
|
|
147
|
-
get form() {
|
|
148
|
-
return this.internals.form;
|
|
149
|
-
}
|
|
150
|
-
/**
|
|
151
|
-
* The labels this element is associated with.
|
|
152
|
-
*/
|
|
153
|
-
get labels() {
|
|
154
|
-
return this.internals.labels;
|
|
155
|
-
}
|
|
156
|
-
/**
|
|
157
|
-
* The HTML name to use in form submission.
|
|
158
|
-
*/
|
|
159
|
-
get name() {
|
|
160
|
-
var _a;
|
|
161
|
-
return (_a = this.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
|
|
162
|
-
}
|
|
163
|
-
/**
|
|
164
|
-
* Returns the text field's validation error message.
|
|
165
|
-
*
|
|
166
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
|
|
167
|
-
*/
|
|
168
|
-
get validationMessage() {
|
|
169
|
-
return this.internals.validationMessage;
|
|
170
|
-
}
|
|
171
|
-
/**
|
|
172
|
-
* Returns a `ValidityState` object that represents the validity states of the
|
|
173
|
-
* text field.
|
|
174
|
-
*
|
|
175
|
-
* https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
|
|
176
|
-
*/
|
|
177
|
-
get validity() {
|
|
178
|
-
return this.internals.validity;
|
|
179
|
-
}
|
|
180
|
-
/**
|
|
181
|
-
* Returns whether an element will successfully validate based on forms
|
|
182
|
-
* validation rules and constraints.
|
|
183
|
-
*
|
|
184
|
-
* https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate
|
|
185
|
-
*/
|
|
186
|
-
get willValidate() {
|
|
187
|
-
return this.internals.willValidate;
|
|
188
|
-
}
|
|
189
|
-
checkValidity() {
|
|
190
|
-
return this.internals.checkValidity();
|
|
191
|
-
}
|
|
192
|
-
reportValidity() {
|
|
193
|
-
return this.internals.reportValidity();
|
|
194
|
-
}
|
|
195
|
-
get value() {
|
|
196
|
-
return this._items
|
|
197
|
-
.filter(item => item.selected)
|
|
198
|
-
.map(item => item.label)
|
|
199
|
-
.join(', ');
|
|
200
|
-
}
|
|
201
|
-
set value(selected) {
|
|
202
|
-
const vals = selected.split(',').map(item => item.trim());
|
|
203
|
-
this._items = this._items.map(item => ({
|
|
204
|
-
...item,
|
|
205
|
-
selected: vals.includes(item.label),
|
|
206
|
-
}));
|
|
207
|
-
}
|
|
208
|
-
get selectedItems() {
|
|
209
|
-
return this._items.filter(item => item.selected);
|
|
210
|
-
}
|
|
211
|
-
connectedCallback() {
|
|
212
|
-
super.connectedCallback();
|
|
213
|
-
this._items = [...this.items];
|
|
214
|
-
this.internals.setFormValue(this.value);
|
|
215
|
-
}
|
|
216
|
-
updated(changedProperties) {
|
|
217
|
-
if (changedProperties.has('disabled')) {
|
|
218
|
-
this.tabIndex = this.disabled ? -1 : 0;
|
|
219
|
-
}
|
|
220
|
-
this.setMenuPosition();
|
|
221
|
-
this.internals.setFormValue(this.value);
|
|
222
|
-
}
|
|
223
|
-
/** @private */
|
|
224
|
-
formResetCallback() {
|
|
225
|
-
this.reset();
|
|
226
|
-
}
|
|
227
|
-
/**
|
|
228
|
-
* Reset the text field to its default value.
|
|
229
|
-
*/
|
|
230
|
-
reset() {
|
|
231
|
-
this._items = this._items.map(item => ({ ...item, selected: false }));
|
|
232
|
-
}
|
|
233
|
-
render() {
|
|
234
|
-
const classes = {
|
|
235
|
-
disabled: this.disabled,
|
|
236
|
-
error: !this.disabled && this.error,
|
|
237
|
-
};
|
|
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-chip/ix-chip-set.js';
|
|
7
|
+
import '@digital-realty/ix-chip/ix-chip.js';
|
|
8
|
+
import '@digital-realty/ix-field/ix-field.js';
|
|
9
|
+
import '@digital-realty/ix-menu/ix-menu.js';
|
|
10
|
+
import '@digital-realty/ix-menu/ix-menu-item.js';
|
|
11
|
+
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
12
|
+
import { IxMultiSelectStyles } from './ix-multi-select-styles.js';
|
|
13
|
+
export class IxMultiSelect extends LitElement {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments);
|
|
16
|
+
this.internals = this /* needed for closure */
|
|
17
|
+
.attachInternals();
|
|
18
|
+
this.items = [];
|
|
19
|
+
this.label = '';
|
|
20
|
+
this.errorText = 'Invalid error text';
|
|
21
|
+
this.disabled = false;
|
|
22
|
+
this.tabIndex = 0;
|
|
23
|
+
/**
|
|
24
|
+
* Gets or sets whether or not the text field is in a visually invalid state.
|
|
25
|
+
*
|
|
26
|
+
* This error state overrides the error state controlled by
|
|
27
|
+
* `reportValidity()`.
|
|
28
|
+
*/
|
|
29
|
+
this.error = false;
|
|
30
|
+
this.required = false;
|
|
31
|
+
this._items = [];
|
|
32
|
+
this.filterValue = '';
|
|
33
|
+
this.menuOpen = false;
|
|
34
|
+
this.menuOpening = false;
|
|
35
|
+
this.focused = false;
|
|
36
|
+
this.noFilteredOptions = 'No options';
|
|
37
|
+
this.optionSelect = (e, id) => {
|
|
38
|
+
let ischecked;
|
|
39
|
+
if (e instanceof KeyboardEvent) {
|
|
40
|
+
e.preventDefault();
|
|
41
|
+
ischecked = !this._items[id].selected;
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
ischecked = e.target.checked;
|
|
45
|
+
}
|
|
46
|
+
this._items = this._items.map((item, i) => id === i
|
|
47
|
+
? { ...item, selected: ischecked, filtered: false }
|
|
48
|
+
: { ...item, filtered: false });
|
|
49
|
+
this.dispatchEvent(new CustomEvent('toggle-multi-select-item', {
|
|
50
|
+
detail: { label: this._items[id].label, selected: ischecked },
|
|
51
|
+
bubbles: true,
|
|
52
|
+
composed: true,
|
|
53
|
+
}));
|
|
54
|
+
this.filterValue = '';
|
|
55
|
+
};
|
|
56
|
+
this.chipRemove = (id) => {
|
|
57
|
+
this._items = this._items.map((item, i) => id === i ? { ...item, selected: false } : { ...item });
|
|
58
|
+
this.dispatchEvent(new CustomEvent('remove-multi-select-item', {
|
|
59
|
+
detail: this._items[id].label,
|
|
60
|
+
bubbles: true,
|
|
61
|
+
composed: true,
|
|
62
|
+
}));
|
|
63
|
+
};
|
|
64
|
+
this.filterOptions = (e) => {
|
|
65
|
+
const filterValue = e.target.value.toLocaleLowerCase();
|
|
66
|
+
this.filterValue = filterValue;
|
|
67
|
+
this._items = this._items.map(item => {
|
|
68
|
+
const filtered = item.label.toLowerCase().indexOf(filterValue) === -1;
|
|
69
|
+
return { ...item, filtered };
|
|
70
|
+
});
|
|
71
|
+
};
|
|
72
|
+
this.focusin = () => {
|
|
73
|
+
this.focused = true;
|
|
74
|
+
this.menu.show();
|
|
75
|
+
this.setMenuPosition();
|
|
76
|
+
this.internals.setFormValue(this.value);
|
|
77
|
+
};
|
|
78
|
+
this.handleFocusin = (e) => {
|
|
79
|
+
const target = e.target;
|
|
80
|
+
if (target.id !== 'filter' || this.disabled)
|
|
81
|
+
return;
|
|
82
|
+
if (this.menuOpen || this.menuOpening)
|
|
83
|
+
return;
|
|
84
|
+
this.focusin();
|
|
85
|
+
};
|
|
86
|
+
this.handleFocusout = () => {
|
|
87
|
+
this.focused = false;
|
|
88
|
+
};
|
|
89
|
+
this.handleMenuOpening = () => {
|
|
90
|
+
this.menuOpening = true;
|
|
91
|
+
this.menuOpen = true;
|
|
92
|
+
this.setMenuPosition();
|
|
93
|
+
this.internals.setFormValue(this.value);
|
|
94
|
+
};
|
|
95
|
+
this.menuOpened = () => {
|
|
96
|
+
this.setMenuPosition();
|
|
97
|
+
this.menuOpening = false;
|
|
98
|
+
this.focused = true;
|
|
99
|
+
};
|
|
100
|
+
this.setMenuPosition = () => {
|
|
101
|
+
var _a, _b;
|
|
102
|
+
const innerMenu = (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.menu');
|
|
103
|
+
if (innerMenu) {
|
|
104
|
+
innerMenu.style.width = '100%';
|
|
105
|
+
innerMenu.style.insetBlockStart = '0';
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
this.handleMenuClosed = () => {
|
|
109
|
+
this.menuOpen = false;
|
|
110
|
+
this.menuOpening = false;
|
|
111
|
+
this.focused = this.selectedItems.length > 0;
|
|
112
|
+
};
|
|
113
|
+
this.toggleOpen = (e) => {
|
|
114
|
+
e.stopPropagation();
|
|
115
|
+
if (!this.menu.open) {
|
|
116
|
+
this.menu.show();
|
|
117
|
+
this.menuOpening = true;
|
|
118
|
+
this.menuOpen = true;
|
|
119
|
+
this.setMenuPosition();
|
|
120
|
+
}
|
|
121
|
+
else {
|
|
122
|
+
if (this.menuOpening)
|
|
123
|
+
return;
|
|
124
|
+
this.menu.close();
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
this.clear = (e) => {
|
|
128
|
+
e.stopPropagation();
|
|
129
|
+
this._items = this._items.map(item => ({ ...item, selected: false }));
|
|
130
|
+
this.filterValue = '';
|
|
131
|
+
this.focused = false;
|
|
132
|
+
this.menuOpen = false;
|
|
133
|
+
this.menuOpening = false;
|
|
134
|
+
this.menu.close();
|
|
135
|
+
this.dispatchEvent(new CustomEvent('clear-multi-select', {
|
|
136
|
+
bubbles: true,
|
|
137
|
+
composed: true,
|
|
138
|
+
}));
|
|
139
|
+
};
|
|
140
|
+
}
|
|
141
|
+
static get styles() {
|
|
142
|
+
return [IxMultiSelectStyles];
|
|
143
|
+
}
|
|
144
|
+
/**
|
|
145
|
+
* The associated form element with which this element's value will submit.
|
|
146
|
+
*/
|
|
147
|
+
get form() {
|
|
148
|
+
return this.internals.form;
|
|
149
|
+
}
|
|
150
|
+
/**
|
|
151
|
+
* The labels this element is associated with.
|
|
152
|
+
*/
|
|
153
|
+
get labels() {
|
|
154
|
+
return this.internals.labels;
|
|
155
|
+
}
|
|
156
|
+
/**
|
|
157
|
+
* The HTML name to use in form submission.
|
|
158
|
+
*/
|
|
159
|
+
get name() {
|
|
160
|
+
var _a;
|
|
161
|
+
return (_a = this.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
|
|
162
|
+
}
|
|
163
|
+
/**
|
|
164
|
+
* Returns the text field's validation error message.
|
|
165
|
+
*
|
|
166
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
|
|
167
|
+
*/
|
|
168
|
+
get validationMessage() {
|
|
169
|
+
return this.internals.validationMessage;
|
|
170
|
+
}
|
|
171
|
+
/**
|
|
172
|
+
* Returns a `ValidityState` object that represents the validity states of the
|
|
173
|
+
* text field.
|
|
174
|
+
*
|
|
175
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
|
|
176
|
+
*/
|
|
177
|
+
get validity() {
|
|
178
|
+
return this.internals.validity;
|
|
179
|
+
}
|
|
180
|
+
/**
|
|
181
|
+
* Returns whether an element will successfully validate based on forms
|
|
182
|
+
* validation rules and constraints.
|
|
183
|
+
*
|
|
184
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate
|
|
185
|
+
*/
|
|
186
|
+
get willValidate() {
|
|
187
|
+
return this.internals.willValidate;
|
|
188
|
+
}
|
|
189
|
+
checkValidity() {
|
|
190
|
+
return this.internals.checkValidity();
|
|
191
|
+
}
|
|
192
|
+
reportValidity() {
|
|
193
|
+
return this.internals.reportValidity();
|
|
194
|
+
}
|
|
195
|
+
get value() {
|
|
196
|
+
return this._items
|
|
197
|
+
.filter(item => item.selected)
|
|
198
|
+
.map(item => item.label)
|
|
199
|
+
.join(', ');
|
|
200
|
+
}
|
|
201
|
+
set value(selected) {
|
|
202
|
+
const vals = selected.split(',').map(item => item.trim());
|
|
203
|
+
this._items = this._items.map(item => ({
|
|
204
|
+
...item,
|
|
205
|
+
selected: vals.includes(item.label),
|
|
206
|
+
}));
|
|
207
|
+
}
|
|
208
|
+
get selectedItems() {
|
|
209
|
+
return this._items.filter(item => item.selected);
|
|
210
|
+
}
|
|
211
|
+
connectedCallback() {
|
|
212
|
+
super.connectedCallback();
|
|
213
|
+
this._items = [...this.items];
|
|
214
|
+
this.internals.setFormValue(this.value);
|
|
215
|
+
}
|
|
216
|
+
updated(changedProperties) {
|
|
217
|
+
if (changedProperties.has('disabled')) {
|
|
218
|
+
this.tabIndex = this.disabled ? -1 : 0;
|
|
219
|
+
}
|
|
220
|
+
this.setMenuPosition();
|
|
221
|
+
this.internals.setFormValue(this.value);
|
|
222
|
+
}
|
|
223
|
+
/** @private */
|
|
224
|
+
formResetCallback() {
|
|
225
|
+
this.reset();
|
|
226
|
+
}
|
|
227
|
+
/**
|
|
228
|
+
* Reset the text field to its default value.
|
|
229
|
+
*/
|
|
230
|
+
reset() {
|
|
231
|
+
this._items = this._items.map(item => ({ ...item, selected: false }));
|
|
232
|
+
}
|
|
233
|
+
render() {
|
|
234
|
+
const classes = {
|
|
235
|
+
disabled: this.disabled,
|
|
236
|
+
error: !this.disabled && this.error,
|
|
237
|
+
};
|
|
238
238
|
return html `
|
|
239
239
|
<div class="multi-select">
|
|
240
240
|
<ix-field
|
|
@@ -244,21 +244,21 @@ export class IxMultiSelect extends LitElement {
|
|
|
244
244
|
?disabled=${this.disabled}
|
|
245
245
|
?required=${this.required}
|
|
246
246
|
?error=${this.error}
|
|
247
|
-
error-text=${!this.menuOpen && !this.menuOpening
|
|
248
|
-
? this.errorText
|
|
247
|
+
error-text=${!this.menuOpen && !this.menuOpening
|
|
248
|
+
? this.errorText
|
|
249
249
|
: nothing}
|
|
250
250
|
label=${this.label}
|
|
251
251
|
@click=${this.handleFocusin}
|
|
252
252
|
@focusin=${this.handleFocusin}
|
|
253
253
|
@focusout=${this.handleFocusout}
|
|
254
|
-
?populated=${this._items.find(item => item.selected) ||
|
|
255
|
-
this.filterValue.length ||
|
|
254
|
+
?populated=${this._items.find(item => item.selected) ||
|
|
255
|
+
this.filterValue.length ||
|
|
256
256
|
this.menuOpen}
|
|
257
257
|
>
|
|
258
258
|
<div class="field-content">
|
|
259
|
-
${this._items.filter(item => item.selected).length
|
|
259
|
+
${this._items.filter(item => item.selected).length
|
|
260
260
|
? html `<ix-chip-set>
|
|
261
|
-
${this._items.map((item, id) => item.selected
|
|
261
|
+
${this._items.map((item, id) => item.selected
|
|
262
262
|
? html `<span
|
|
263
263
|
><ix-chip
|
|
264
264
|
@remove=${() => this.chipRemove(id)}
|
|
@@ -267,9 +267,9 @@ export class IxMultiSelect extends LitElement {
|
|
|
267
267
|
removable
|
|
268
268
|
remove-only
|
|
269
269
|
></ix-chip
|
|
270
|
-
></span>`
|
|
270
|
+
></span>`
|
|
271
271
|
: nothing)}
|
|
272
|
-
</ix-chip-set>`
|
|
272
|
+
</ix-chip-set>`
|
|
273
273
|
: nothing}
|
|
274
274
|
<input
|
|
275
275
|
id="filter"
|
|
@@ -280,12 +280,12 @@ export class IxMultiSelect extends LitElement {
|
|
|
280
280
|
/>
|
|
281
281
|
</div>
|
|
282
282
|
<slot name="end" slot="end">
|
|
283
|
-
${this.value.length
|
|
283
|
+
${this.value.length
|
|
284
284
|
? html `<ix-icon-button
|
|
285
285
|
@click=${this.clear}
|
|
286
286
|
icon="close"
|
|
287
287
|
aria-label="clear"
|
|
288
|
-
></ix-icon-button>`
|
|
288
|
+
></ix-icon-button>`
|
|
289
289
|
: nothing}
|
|
290
290
|
<ix-icon-button
|
|
291
291
|
@click=${this.toggleOpen}
|
|
@@ -303,16 +303,16 @@ export class IxMultiSelect extends LitElement {
|
|
|
303
303
|
@opened=${this.menuOpened}
|
|
304
304
|
@opening=${this.handleMenuOpening}
|
|
305
305
|
>
|
|
306
|
-
${this._items.filter(item => !item.filtered).length
|
|
307
|
-
? this._items.map((item, id) => html `${!item.filtered
|
|
306
|
+
${this._items.filter(item => !item.filtered).length
|
|
307
|
+
? this._items.map((item, id) => html `${!item.filtered
|
|
308
308
|
? html `<ix-menu-item
|
|
309
309
|
keep-open
|
|
310
310
|
class=${item.selected ? 'selected' : ''}
|
|
311
|
-
@keydown=${(e) => {
|
|
312
|
-
const selectionKeys = [' ', 'Enter'];
|
|
313
|
-
if (selectionKeys.includes(e.key)) {
|
|
314
|
-
this.optionSelect(e, id);
|
|
315
|
-
}
|
|
311
|
+
@keydown=${(e) => {
|
|
312
|
+
const selectionKeys = [' ', 'Enter'];
|
|
313
|
+
if (selectionKeys.includes(e.key)) {
|
|
314
|
+
this.optionSelect(e, id);
|
|
315
|
+
}
|
|
316
316
|
}}
|
|
317
317
|
>
|
|
318
318
|
<div slot="headline">
|
|
@@ -325,68 +325,68 @@ export class IxMultiSelect extends LitElement {
|
|
|
325
325
|
${item.label}
|
|
326
326
|
</label>
|
|
327
327
|
</div>
|
|
328
|
-
</ix-menu-item>`
|
|
329
|
-
: nothing}`)
|
|
328
|
+
</ix-menu-item>`
|
|
329
|
+
: nothing}`)
|
|
330
330
|
: html `<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}
|
|
331
331
|
</ix-menu>
|
|
332
332
|
</div>
|
|
333
333
|
</div>
|
|
334
|
-
`;
|
|
335
|
-
}
|
|
336
|
-
}
|
|
337
|
-
(() => {
|
|
338
|
-
requestUpdateOnAriaChange(IxMultiSelect);
|
|
339
|
-
})();
|
|
340
|
-
/** @nocollapse */
|
|
341
|
-
IxMultiSelect.shadowRootOptions = {
|
|
342
|
-
...LitElement.shadowRootOptions,
|
|
343
|
-
delegatesFocus: true,
|
|
344
|
-
};
|
|
345
|
-
/** @nocollapse */
|
|
346
|
-
IxMultiSelect.formAssociated = true;
|
|
347
|
-
__decorate([
|
|
348
|
-
query('ix-menu')
|
|
349
|
-
], IxMultiSelect.prototype, "menu", void 0);
|
|
350
|
-
__decorate([
|
|
351
|
-
query('ix-chip-set')
|
|
352
|
-
], IxMultiSelect.prototype, "chips", void 0);
|
|
353
|
-
__decorate([
|
|
354
|
-
query('#filter')
|
|
355
|
-
], IxMultiSelect.prototype, "inputFilter", void 0);
|
|
356
|
-
__decorate([
|
|
357
|
-
property({ type: Array })
|
|
358
|
-
], IxMultiSelect.prototype, "items", void 0);
|
|
359
|
-
__decorate([
|
|
360
|
-
property({ type: String })
|
|
361
|
-
], IxMultiSelect.prototype, "label", void 0);
|
|
362
|
-
__decorate([
|
|
363
|
-
property({ type: String, attribute: 'error-text' })
|
|
364
|
-
], IxMultiSelect.prototype, "errorText", void 0);
|
|
365
|
-
__decorate([
|
|
366
|
-
property({ type: Boolean, reflect: true })
|
|
367
|
-
], IxMultiSelect.prototype, "disabled", void 0);
|
|
368
|
-
__decorate([
|
|
369
|
-
property({ type: Number, reflect: true })
|
|
370
|
-
], IxMultiSelect.prototype, "tabIndex", void 0);
|
|
371
|
-
__decorate([
|
|
372
|
-
property({ type: Boolean, reflect: true })
|
|
373
|
-
], IxMultiSelect.prototype, "error", void 0);
|
|
374
|
-
__decorate([
|
|
375
|
-
property({ type: Boolean, reflect: true })
|
|
376
|
-
], IxMultiSelect.prototype, "required", void 0);
|
|
377
|
-
__decorate([
|
|
378
|
-
state()
|
|
379
|
-
], IxMultiSelect.prototype, "_items", void 0);
|
|
380
|
-
__decorate([
|
|
381
|
-
state()
|
|
382
|
-
], IxMultiSelect.prototype, "filterValue", void 0);
|
|
383
|
-
__decorate([
|
|
384
|
-
state()
|
|
385
|
-
], IxMultiSelect.prototype, "menuOpen", void 0);
|
|
386
|
-
__decorate([
|
|
387
|
-
state()
|
|
388
|
-
], IxMultiSelect.prototype, "menuOpening", void 0);
|
|
389
|
-
__decorate([
|
|
390
|
-
state()
|
|
391
|
-
], IxMultiSelect.prototype, "focused", void 0);
|
|
334
|
+
`;
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
(() => {
|
|
338
|
+
requestUpdateOnAriaChange(IxMultiSelect);
|
|
339
|
+
})();
|
|
340
|
+
/** @nocollapse */
|
|
341
|
+
IxMultiSelect.shadowRootOptions = {
|
|
342
|
+
...LitElement.shadowRootOptions,
|
|
343
|
+
delegatesFocus: true,
|
|
344
|
+
};
|
|
345
|
+
/** @nocollapse */
|
|
346
|
+
IxMultiSelect.formAssociated = true;
|
|
347
|
+
__decorate([
|
|
348
|
+
query('ix-menu')
|
|
349
|
+
], IxMultiSelect.prototype, "menu", void 0);
|
|
350
|
+
__decorate([
|
|
351
|
+
query('ix-chip-set')
|
|
352
|
+
], IxMultiSelect.prototype, "chips", void 0);
|
|
353
|
+
__decorate([
|
|
354
|
+
query('#filter')
|
|
355
|
+
], IxMultiSelect.prototype, "inputFilter", void 0);
|
|
356
|
+
__decorate([
|
|
357
|
+
property({ type: Array })
|
|
358
|
+
], IxMultiSelect.prototype, "items", void 0);
|
|
359
|
+
__decorate([
|
|
360
|
+
property({ type: String })
|
|
361
|
+
], IxMultiSelect.prototype, "label", void 0);
|
|
362
|
+
__decorate([
|
|
363
|
+
property({ type: String, attribute: 'error-text' })
|
|
364
|
+
], IxMultiSelect.prototype, "errorText", void 0);
|
|
365
|
+
__decorate([
|
|
366
|
+
property({ type: Boolean, reflect: true })
|
|
367
|
+
], IxMultiSelect.prototype, "disabled", void 0);
|
|
368
|
+
__decorate([
|
|
369
|
+
property({ type: Number, reflect: true })
|
|
370
|
+
], IxMultiSelect.prototype, "tabIndex", void 0);
|
|
371
|
+
__decorate([
|
|
372
|
+
property({ type: Boolean, reflect: true })
|
|
373
|
+
], IxMultiSelect.prototype, "error", void 0);
|
|
374
|
+
__decorate([
|
|
375
|
+
property({ type: Boolean, reflect: true })
|
|
376
|
+
], IxMultiSelect.prototype, "required", void 0);
|
|
377
|
+
__decorate([
|
|
378
|
+
state()
|
|
379
|
+
], IxMultiSelect.prototype, "_items", void 0);
|
|
380
|
+
__decorate([
|
|
381
|
+
state()
|
|
382
|
+
], IxMultiSelect.prototype, "filterValue", void 0);
|
|
383
|
+
__decorate([
|
|
384
|
+
state()
|
|
385
|
+
], IxMultiSelect.prototype, "menuOpen", void 0);
|
|
386
|
+
__decorate([
|
|
387
|
+
state()
|
|
388
|
+
], IxMultiSelect.prototype, "menuOpening", void 0);
|
|
389
|
+
__decorate([
|
|
390
|
+
state()
|
|
391
|
+
], IxMultiSelect.prototype, "focused", void 0);
|
|
392
392
|
//# sourceMappingURL=IxMultiSelect.js.map
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { IxMultiSelect } from './IxMultiSelect.js';
|
|
1
|
+
export { IxMultiSelect } from './IxMultiSelect.js';
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { IxMultiSelect } from './IxMultiSelect.js';
|
|
1
|
+
export { IxMultiSelect } from './IxMultiSelect.js';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const IxMultiSelectStyles: import("lit").CSSResult;
|
|
1
|
+
export declare const IxMultiSelectStyles: import("lit").CSSResult;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
1
|
+
import { css } from 'lit';
|
|
2
2
|
export const IxMultiSelectStyles = css `
|
|
3
3
|
:host {
|
|
4
4
|
display: block;
|
|
@@ -84,5 +84,5 @@ export const IxMultiSelectStyles = css `
|
|
|
84
84
|
.multi-select {
|
|
85
85
|
position: relative;
|
|
86
86
|
}
|
|
87
|
-
`;
|
|
87
|
+
`;
|
|
88
88
|
//# sourceMappingURL=ix-multi-select-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
package/dist/ix-multi-select.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { IxMultiSelect } from './IxMultiSelect.js';
|
|
2
|
-
window.customElements.define('ix-multi-select', IxMultiSelect);
|
|
1
|
+
import { IxMultiSelect } from './IxMultiSelect.js';
|
|
2
|
+
window.customElements.define('ix-multi-select', IxMultiSelect);
|
|
3
3
|
//# sourceMappingURL=ix-multi-select.js.map
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-multi-select following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.1.
|
|
6
|
+
"version": "1.1.4-alpha-224908-t51.0",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@digital-realty/ix-chip": "^1.1.
|
|
30
|
-
"@digital-realty/ix-field": "^1.1.
|
|
31
|
-
"@digital-realty/ix-icon-button": "^1.1.
|
|
32
|
-
"@digital-realty/ix-menu": "^1.1.
|
|
29
|
+
"@digital-realty/ix-chip": "^1.1.4-alpha-224908-t51.0",
|
|
30
|
+
"@digital-realty/ix-field": "^1.1.4-alpha-224908-t51.0",
|
|
31
|
+
"@digital-realty/ix-icon-button": "^1.1.4-alpha-224908-t51.0",
|
|
32
|
+
"@digital-realty/ix-menu": "^1.1.4-alpha-224908-t51.0",
|
|
33
33
|
"@material/web": "1.2.0",
|
|
34
34
|
"lit": "^2.8.0 || ^3.0.0"
|
|
35
35
|
},
|
|
@@ -101,5 +101,5 @@
|
|
|
101
101
|
"README.md",
|
|
102
102
|
"LICENSE"
|
|
103
103
|
],
|
|
104
|
-
"gitHead": "
|
|
104
|
+
"gitHead": "21f49bb36f86ff54ce1b457fe2c1ba664a253ea8"
|
|
105
105
|
}
|