@digital-realty/ix-multi-select 1.0.9 → 1.0.10

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.
Files changed (6) hide show
  1. package/dist/IxMultiSelect.d.ts +6 -4
  2. package/dist/IxMultiSelect.js +56 -27
  3. package/dist/IxMultiSelect.js.map +1 -1
  4. package/dist/ix-multi-select-styles.js +1 -0
  5. package/dist/ix-multi-select-styles.js.map +1 -1
  6. package/package.json +4 -4
package/dist/IxMultiSelect.d.ts CHANGED
@@ -77,19 +77,21 @@ export declare class IxMultiSelect extends LitElement {
77
77
  private _items;
78
78
  private filterValue;
79
79
  private menuOpen;
80
+ private menuOpening;
80
81
  private focused;
81
82
  private noFilteredOptions;
82
83
  get value(): string;
83
84
  set value(selected: string);
84
- firstUpdated(): void;
85
+ connectedCallback(): void;
85
86
  updated(changedProperties: PropertyValues): void;
86
- handleFocusin: () => void;
87
- handleFocusout: () => void;
88
87
  private optionSelect;
89
88
  private chipRemove;
90
89
  private filterOptions;
91
90
  focusin: () => void;
92
- handleMenuOpen: () => void;
91
+ handleFocusin: (e: Event) => void;
92
+ handleFocusout: () => void;
93
+ menuOpened: () => void;
94
+ setMenuPosition: () => void;
93
95
  handleMenuClose: () => void;
94
96
  toggleOpen: (e: Event) => void;
95
97
  clear: (e: Event) => void;
package/dist/IxMultiSelect.js CHANGED
@@ -30,21 +30,18 @@ export class IxMultiSelect extends LitElement {
30
30
  this._items = [];
31
31
  this.filterValue = '';
32
32
  this.menuOpen = false;
33
+ this.menuOpening = false;
33
34
  this.focused = false;
34
35
  this.noFilteredOptions = 'No options';
35
- this.handleFocusin = () => {
36
- this.focused = true;
37
- };
38
- this.handleFocusout = () => {
39
- if (this.value.length) {
40
- this.focused = true;
36
+ this.optionSelect = (e, id) => {
37
+ let ischecked;
38
+ if (e instanceof KeyboardEvent) {
39
+ e.preventDefault();
40
+ ischecked = !this._items[id].selected;
41
41
  }
42
42
  else {
43
- this.focused = false;
43
+ ischecked = e.target.checked;
44
44
  }
45
- };
46
- this.optionSelect = (e, id) => {
47
- const ischecked = e.target.checked;
48
45
  this._items = this._items.map((item, i) => id === i
49
46
  ? { ...item, selected: ischecked, filtered: false }
50
47
  : { ...item, filtered: false });
@@ -74,27 +71,51 @@ export class IxMultiSelect extends LitElement {
74
71
  this.focusin = () => {
75
72
  this.menu.show();
76
73
  this.focused = true;
74
+ this.menuOpening = true;
75
+ this.setMenuPosition();
76
+ this.internals.setFormValue(this.value);
77
77
  };
78
- this.handleMenuOpen = () => {
79
- var _a;
80
- this.focused = true;
81
- this.menuOpen = true;
82
- const innerMenu = (_a = this.menu.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu');
78
+ this.handleFocusin = (e) => {
79
+ const target = e.target;
80
+ if (target.tagName === 'MD-ICON-BUTTON' || this.disabled)
81
+ return;
82
+ this.focusin();
83
+ };
84
+ this.handleFocusout = () => {
85
+ if (this.value.length || this.menuOpening || this.menuOpen) {
86
+ this.focused = true;
87
+ }
88
+ else {
89
+ this.focused = false;
90
+ }
91
+ };
92
+ this.menuOpened = () => {
93
+ this.setMenuPosition();
94
+ this.internals.setFormValue(this.value);
95
+ this.inputFilter.focus();
96
+ this.menuOpening = false;
97
+ };
98
+ this.setMenuPosition = () => {
99
+ var _a, _b;
100
+ const innerMenu = (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.menu');
83
101
  if (innerMenu) {
84
102
  innerMenu.style.width = '100%';
85
103
  innerMenu.style.insetBlockStart = '0';
86
104
  }
87
105
  };
88
106
  this.handleMenuClose = () => {
89
- if (this.value.length === 0) {
107
+ if (this.value.length === 0 && this.filterValue.length === 0) {
90
108
  this.focused = false;
91
109
  }
92
110
  this.menuOpen = false;
93
111
  };
94
112
  this.toggleOpen = (e) => {
95
113
  e.stopPropagation();
96
- if (!this.menuOpen) {
97
- this.focusin();
114
+ if (!this.menu.open) {
115
+ this.menu.show();
116
+ this.menuOpening = true;
117
+ this.menuOpen = true;
118
+ this.setMenuPosition();
98
119
  }
99
120
  else {
100
121
  this.menu.close();
@@ -104,6 +125,7 @@ export class IxMultiSelect extends LitElement {
104
125
  e.stopPropagation();
105
126
  this._items = this._items.map(item => ({ ...item, selected: false }));
106
127
  this.focused = false;
128
+ this.menu.close();
107
129
  this.dispatchEvent(new CustomEvent('clear-multi-select', {
108
130
  bubbles: true,
109
131
  composed: true,
@@ -177,7 +199,8 @@ export class IxMultiSelect extends LitElement {
177
199
  selected: vals.includes(item.label),
178
200
  }));
179
201
  }
180
- firstUpdated() {
202
+ connectedCallback() {
203
+ super.connectedCallback();
181
204
  this._items = [...this.items];
182
205
  if (this._items.find(item => item.selected)) {
183
206
  this.focused = true;
@@ -185,21 +208,18 @@ export class IxMultiSelect extends LitElement {
185
208
  this.internals.setFormValue(this.value);
186
209
  }
187
210
  updated(changedProperties) {
188
- var _a, _b;
189
211
  if (changedProperties.has('_items') || changedProperties.has('disabled')) {
190
212
  this.internals.setFormValue(this.value);
191
- if (this._items.find(item => item.selected)) {
213
+ if (this._items.find(item => item.selected) ||
214
+ this.filterValue.length ||
215
+ this.menuOpen) {
192
216
  this.focused = true;
193
217
  }
194
218
  else {
195
219
  this.focused = false;
196
220
  }
197
221
  }
198
- const innerMenu = (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.menu');
199
- if (innerMenu) {
200
- innerMenu.style.width = '100%';
201
- innerMenu.style.insetBlockStart = '0';
202
- }
222
+ this.setMenuPosition();
203
223
  }
204
224
  /** @private */
205
225
  formResetCallback() {
@@ -274,14 +294,20 @@ export class IxMultiSelect extends LitElement {
274
294
  anchor="anchor"
275
295
  skip-restore-focus
276
296
  quick
277
- @opening=${this.handleMenuOpen}
278
297
  @closing=${this.handleMenuClose}
298
+ @opened=${this.menuOpened}
279
299
  >
280
300
  ${this._items.filter(item => !item.filtered).length
281
301
  ? this._items.map((item, id) => html `${!item.filtered
282
302
  ? html `<ix-menu-item
283
303
  keep-open
284
304
  class=${item.selected ? 'selected' : ''}
305
+ @keydown=${(e) => {
306
+ const selectionKeys = [' ', 'Enter'];
307
+ if (selectionKeys.includes(e.key)) {
308
+ this.optionSelect(e, id);
309
+ }
310
+ }}
285
311
  >
286
312
  <div slot="headline">
287
313
  <label>
@@ -348,6 +374,9 @@ __decorate([
348
374
  __decorate([
349
375
  state()
350
376
  ], IxMultiSelect.prototype, "menuOpen", void 0);
377
+ __decorate([
378
+ state()
379
+ ], IxMultiSelect.prototype, "menuOpening", void 0);
351
380
  __decorate([
352
381
  state()
353
382
  ], IxMultiSelect.prototype, "focused", void 0);
package/dist/IxMultiSelect.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IxMultiSelect.js","sourceRoot":"","sources":["../src/IxMultiSelect.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-chip/ix-chip-set.js';\nimport '@digital-realty/ix-chip/ix-chip.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 { IxChipSet } from '@digital-realty/ix-chip';\nimport { IxMultiSelectStyles } from './ix-multi-select-styles.js';\n\ninterface MultiSelectItem {\n label: string;\n selected: boolean;\n filtered: boolean;\n}\n\nexport class IxMultiSelect extends LitElement {\n static get styles() {\n return [IxMultiSelectStyles];\n }\n\n static {\n requestUpdateOnAriaChange(IxMultiSelect);\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('ix-chip-set') chips!: IxChipSet;\n\n @query('#filter') inputFilter!: HTMLInputElement;\n\n @property({ type: Array }) items: MultiSelectItem[] = [];\n\n @property({ type: String }) label = '';\n\n @property({ type: String, attribute: 'error-text' }) errorText =\n 'Invalid error text';\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: Boolean, reflect: true }) required = false;\n\n @state() private _items: MultiSelectItem[] = [];\n\n @state() private filterValue = '';\n\n @state() private menuOpen = false;\n\n @state() private focused = false;\n\n private noFilteredOptions = 'No options';\n\n get value() {\n return this._items\n .filter(item => item.selected)\n .map(item => item.label)\n .join(', ');\n }\n\n set value(selected: string) {\n const vals = selected.split(',').map(item => item.trim());\n this._items = this._items.map(item => ({\n ...item,\n selected: vals.includes(item.label),\n }));\n }\n\n firstUpdated() {\n this._items = [...this.items];\n if (this._items.find(item => item.selected)) {\n this.focused = true;\n }\n this.internals.setFormValue(this.value);\n }\n\n updated(changedProperties: PropertyValues) {\n if (changedProperties.has('_items') || changedProperties.has('disabled')) {\n this.internals.setFormValue(this.value);\n if (this._items.find(item => item.selected)) {\n this.focused = true;\n } else {\n this.focused = false;\n }\n }\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 handleFocusin = () => {\n this.focused = true;\n };\n\n handleFocusout = () => {\n if (this.value.length) {\n this.focused = true;\n } else {\n this.focused = false;\n }\n };\n\n private optionSelect = (e: InputEvent, id: number) => {\n const ischecked = (<HTMLInputElement>e.target).checked;\n this._items = this._items.map((item, i: number) =>\n id === i\n ? { ...item, selected: ischecked, filtered: false }\n : { ...item, filtered: false }\n );\n this.dispatchEvent(\n new CustomEvent('toggle-multi-select-item', {\n detail: { label: this._items[id].label, selected: ischecked },\n bubbles: true,\n composed: true,\n })\n );\n this.filterValue = '';\n };\n\n private chipRemove = (id: number) => {\n this._items = this._items.map((item, i: number) =>\n id === i ? { ...item, selected: false } : { ...item }\n );\n this.dispatchEvent(\n new CustomEvent('remove-multi-select-item', {\n detail: this._items[id].label,\n bubbles: true,\n composed: true,\n })\n );\n };\n\n private filterOptions = (e: InputEvent) => {\n const filterValue = (<HTMLInputElement>e.target).value.toLocaleLowerCase();\n this.filterValue = filterValue;\n this._items = this._items.map(item => {\n const filtered = item.label.toLowerCase().indexOf(filterValue) === -1;\n return { ...item, filtered };\n });\n };\n\n focusin = () => {\n this.menu.show();\n this.focused = true;\n };\n\n handleMenuOpen = () => {\n this.focused = true;\n this.menuOpen = true;\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 handleMenuClose = () => {\n if (this.value.length === 0) {\n this.focused = false;\n }\n this.menuOpen = false;\n };\n\n toggleOpen = (e: Event) => {\n e.stopPropagation();\n if (!this.menuOpen) {\n this.focusin();\n } else {\n this.menu.close();\n }\n };\n\n clear = (e: Event) => {\n e.stopPropagation();\n this._items = this._items.map(item => ({ ...item, selected: false }));\n this.focused = false;\n this.dispatchEvent(\n new CustomEvent('clear-multi-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._items = this._items.map(item => ({ ...item, selected: false }));\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=\"multi-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.errorText}\n label=${this.label}\n @click=${() => (!this.disabled ? this.inputFilter.focus() : null)}\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n ?populated=${this._items.find(item => item.selected)}\n >\n <ix-chip-set>\n ${this._items.map((item, id: number) =>\n item.selected\n ? html`<span\n ><ix-chip\n @remove=${() => this.chipRemove(id)}\n label=${item.label}\n appearance=\"input\"\n removable\n remove-only\n ></ix-chip\n ></span>`\n : nothing\n )}\n <input\n id=\"filter\"\n @input=${this.filterOptions}\n @focus=${this.focusin}\n .value=${this.filterValue}\n class=\"flex-fill\"\n type=\"text\"\n />\n </ix-chip-set>\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 skip-restore-focus\n quick\n @opening=${this.handleMenuOpen}\n @closing=${this.handleMenuClose}\n >\n ${this._items.filter(item => !item.filtered).length\n ? this._items.map(\n (item, id: number) =>\n html`${!item.filtered\n ? html`<ix-menu-item\n keep-open\n class=${item.selected ? 'selected' : ''}\n >\n <div slot=\"headline\">\n <label>\n <input\n type=\"checkbox\"\n @change=${(e: InputEvent) =>\n this.optionSelect(e, id)}\n .checked=${item.selected}\n />\n ${item.label}\n </label>\n </div>\n </ix-menu-item>`\n : nothing}`\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":"IxMultiSelect.js","sourceRoot":"","sources":["../src/IxMultiSelect.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-chip/ix-chip-set.js';\nimport '@digital-realty/ix-chip/ix-chip.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 { IxChipSet } from '@digital-realty/ix-chip';\nimport { IxMultiSelectStyles } from './ix-multi-select-styles.js';\n\ninterface MultiSelectItem {\n label: string;\n selected: boolean;\n filtered: boolean;\n}\n\nexport class IxMultiSelect extends LitElement {\n static get styles() {\n return [IxMultiSelectStyles];\n }\n\n static {\n requestUpdateOnAriaChange(IxMultiSelect);\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('ix-chip-set') chips!: IxChipSet;\n\n @query('#filter') inputFilter!: HTMLInputElement;\n\n @property({ type: Array }) items: MultiSelectItem[] = [];\n\n @property({ type: String }) label = '';\n\n @property({ type: String, attribute: 'error-text' }) errorText =\n 'Invalid error text';\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: Boolean, reflect: true }) required = false;\n\n @state() private _items: MultiSelectItem[] = [];\n\n @state() private filterValue = '';\n\n @state() private menuOpen = false;\n\n @state() private menuOpening = false;\n\n @state() private focused = false;\n\n private noFilteredOptions = 'No options';\n\n get value() {\n return this._items\n .filter(item => item.selected)\n .map(item => item.label)\n .join(', ');\n }\n\n set value(selected: string) {\n const vals = selected.split(',').map(item => item.trim());\n this._items = this._items.map(item => ({\n ...item,\n selected: vals.includes(item.label),\n }));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this._items = [...this.items];\n if (this._items.find(item => item.selected)) {\n this.focused = true;\n }\n this.internals.setFormValue(this.value);\n }\n\n updated(changedProperties: PropertyValues) {\n if (changedProperties.has('_items') || changedProperties.has('disabled')) {\n this.internals.setFormValue(this.value);\n if (\n this._items.find(item => item.selected) ||\n this.filterValue.length ||\n this.menuOpen\n ) {\n this.focused = true;\n } else {\n this.focused = false;\n }\n }\n this.setMenuPosition();\n }\n\n private optionSelect = (e: InputEvent | KeyboardEvent, id: number) => {\n let ischecked: boolean;\n if (e instanceof KeyboardEvent) {\n e.preventDefault();\n ischecked = !this._items[id].selected;\n } else {\n ischecked = (<HTMLInputElement>e.target).checked;\n }\n this._items = this._items.map((item, i: number) =>\n id === i\n ? { ...item, selected: ischecked, filtered: false }\n : { ...item, filtered: false }\n );\n this.dispatchEvent(\n new CustomEvent('toggle-multi-select-item', {\n detail: { label: this._items[id].label, selected: ischecked },\n bubbles: true,\n composed: true,\n })\n );\n this.filterValue = '';\n };\n\n private chipRemove = (id: number) => {\n this._items = this._items.map((item, i: number) =>\n id === i ? { ...item, selected: false } : { ...item }\n );\n this.dispatchEvent(\n new CustomEvent('remove-multi-select-item', {\n detail: this._items[id].label,\n bubbles: true,\n composed: true,\n })\n );\n };\n\n private filterOptions = (e: InputEvent) => {\n const filterValue = (<HTMLInputElement>e.target).value.toLocaleLowerCase();\n this.filterValue = filterValue;\n this._items = this._items.map(item => {\n const filtered = item.label.toLowerCase().indexOf(filterValue) === -1;\n return { ...item, filtered };\n });\n };\n\n focusin = () => {\n this.menu.show();\n this.focused = true;\n this.menuOpening = true;\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.tagName === 'MD-ICON-BUTTON' || this.disabled) return;\n this.focusin();\n };\n\n handleFocusout = () => {\n if (this.value.length || this.menuOpening || this.menuOpen) {\n this.focused = true;\n } else {\n this.focused = false;\n }\n };\n\n menuOpened = () => {\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n this.inputFilter.focus();\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 handleMenuClose = () => {\n if (this.value.length === 0 && this.filterValue.length === 0) {\n this.focused = false;\n }\n this.menuOpen = false;\n };\n\n toggleOpen = (e: Event) => {\n e.stopPropagation();\n if (!this.menu.open) {\n this.menu.show();\n this.menuOpening = true;\n this.menuOpen = true;\n this.setMenuPosition();\n } else {\n this.menu.close();\n }\n };\n\n clear = (e: Event) => {\n e.stopPropagation();\n this._items = this._items.map(item => ({ ...item, selected: false }));\n this.focused = false;\n this.menu.close();\n this.dispatchEvent(\n new CustomEvent('clear-multi-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._items = this._items.map(item => ({ ...item, selected: false }));\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=\"multi-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.errorText}\n label=${this.label}\n @click=${() => (!this.disabled ? this.inputFilter.focus() : null)}\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n ?populated=${this._items.find(item => item.selected)}\n >\n <ix-chip-set>\n ${this._items.map((item, id: number) =>\n item.selected\n ? html`<span\n ><ix-chip\n @remove=${() => this.chipRemove(id)}\n label=${item.label}\n appearance=\"input\"\n removable\n remove-only\n ></ix-chip\n ></span>`\n : nothing\n )}\n <input\n id=\"filter\"\n @input=${this.filterOptions}\n @focus=${this.focusin}\n .value=${this.filterValue}\n class=\"flex-fill\"\n type=\"text\"\n />\n </ix-chip-set>\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 skip-restore-focus\n quick\n @closing=${this.handleMenuClose}\n @opened=${this.menuOpened}\n >\n ${this._items.filter(item => !item.filtered).length\n ? this._items.map(\n (item, id: number) =>\n html`${!item.filtered\n ? html`<ix-menu-item\n keep-open\n class=${item.selected ? 'selected' : ''}\n @keydown=${(e: KeyboardEvent) => {\n const selectionKeys = [' ', 'Enter'];\n if (selectionKeys.includes(e.key)) {\n this.optionSelect(e, id);\n }\n }}\n >\n <div slot=\"headline\">\n <label>\n <input\n type=\"checkbox\"\n @change=${(e: InputEvent) =>\n this.optionSelect(e, id)}\n .checked=${item.selected}\n />\n ${item.label}\n </label>\n </div>\n </ix-menu-item>`\n : nothing}`\n )\n : html`<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}\n </ix-menu>\n </div>\n </div>\n `;\n }\n}\n"]}
package/dist/ix-multi-select-styles.js CHANGED
@@ -29,6 +29,7 @@ export const IxMultiSelectStyles = css `
29
29
  }
30
30
  ix-chip-set {
31
31
  min-height: var(--_content-line-height);
32
+ display: flex;
32
33
  }
33
34
  ix-menu {
34
35
  --md-menu-container-color: #fff;
package/dist/ix-multi-select-styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ix-multi-select-styles.js","sourceRoot":"","sources":["../src/ix-multi-select-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsErC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxMultiSelectStyles = css`\n :host {\n display: block;\n }\n ix-field {\n display: block;\n --md-outlined-field-label-text-color: var(--md-sys-text-color-primary);\n --md-outlined-field-outline-color: var(--md-outlined-field-outline-color);\n }\n ix-field label {\n display: none;\n }\n .flex-fill {\n flex: 1;\n }\n .menu {\n position: relative;\n }\n .menu label,\n .menu input {\n cursor: pointer;\n }\n input {\n border: none;\n background: transparent;\n outline: none;\n min-width: 3rem;\n }\n ix-chip-set {\n min-height: var(--_content-line-height);\n }\n ix-menu {\n --md-menu-container-color: #fff;\n max-height: 500px;\n }\n ix-menu-item {\n position: relative;\n }\n ix-menu-item label {\n display: flex;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n ix-menu-item label input[type='checkbox'] {\n margin: 0 1rem 2px;\n }\n ix-menu-item.selected {\n background: var(--md-sys-color-tertiary-container);\n }\n ix-icon-button {\n --md-icon-button-icon-color: var(--md-sys-text-color-secondary);\n --md-icon-button-hover-icon-color: var(--md-sys-text-color-secondary);\n --md-icon-button-hover-state-layer-color: var(\n --md-sys-text-color-secondary\n );\n --md-icon-button-pressed-icon-color: var(--md-sys-text-color-secondary);\n --md-icon-button-pressed-state-layer-color: var(\n --md-sys-text-color-secondary\n );\n }\n .open-icon {\n margin-right: 0.5rem;\n }\n .multi-select {\n position: relative;\n }\n`;\n"]}
1
+ {"version":3,"file":"ix-multi-select-styles.js","sourceRoot":"","sources":["../src/ix-multi-select-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuErC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxMultiSelectStyles = css`\n :host {\n display: block;\n }\n ix-field {\n display: block;\n --md-outlined-field-label-text-color: var(--md-sys-text-color-primary);\n --md-outlined-field-outline-color: var(--md-outlined-field-outline-color);\n }\n ix-field label {\n display: none;\n }\n .flex-fill {\n flex: 1;\n }\n .menu {\n position: relative;\n }\n .menu label,\n .menu input {\n cursor: pointer;\n }\n input {\n border: none;\n background: transparent;\n outline: none;\n min-width: 3rem;\n }\n ix-chip-set {\n min-height: var(--_content-line-height);\n display: flex;\n }\n ix-menu {\n --md-menu-container-color: #fff;\n max-height: 500px;\n }\n ix-menu-item {\n position: relative;\n }\n ix-menu-item label {\n display: flex;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n ix-menu-item label input[type='checkbox'] {\n margin: 0 1rem 2px;\n }\n ix-menu-item.selected {\n background: var(--md-sys-color-tertiary-container);\n }\n ix-icon-button {\n --md-icon-button-icon-color: var(--md-sys-text-color-secondary);\n --md-icon-button-hover-icon-color: var(--md-sys-text-color-secondary);\n --md-icon-button-hover-state-layer-color: var(\n --md-sys-text-color-secondary\n );\n --md-icon-button-pressed-icon-color: var(--md-sys-text-color-secondary);\n --md-icon-button-pressed-state-layer-color: var(\n --md-sys-text-color-secondary\n );\n }\n .open-icon {\n margin-right: 0.5rem;\n }\n .multi-select {\n position: relative;\n }\n`;\n"]}
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.0.9",
6
+ "version": "1.0.10",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -27,14 +27,14 @@
27
27
  "dependencies": {
28
28
  "@digital-realty/ix-chip": "^1.0.8",
29
29
  "@digital-realty/ix-field": "^1.0.4",
30
- "@digital-realty/ix-icon-button": "^1.0.21",
30
+ "@digital-realty/ix-icon-button": "^1.0.22",
31
31
  "@digital-realty/ix-menu": "^1.0.3",
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": "*",
37
+ "@digital-realty/theme": "^1.0.12",
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",
@@ -97,5 +97,5 @@
97
97
  "README.md",
98
98
  "LICENSE"
99
99
  ],
100
- "gitHead": "a93ad0076764dc26321faa51bc504ff6b534d836"
100
+ "gitHead": "5ff9e3f504660342e986801e86861d35b47930da"
101
101
  }