@digital-realty/ix-filter-select 1.0.13 → 1.0.24

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/IxFilterSelect.d.ts +10 -4
  2. package/dist/IxFilterSelect.js +24 -21
  3. package/dist/IxFilterSelect.js.map +1 -1
  4. package/dist/ix-filter-select-styles.js +7 -3
  5. package/dist/ix-filter-select-styles.js.map +1 -1
  6. package/package.json +4 -4
package/dist/IxFilterSelect.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { LitElement } from 'lit';
1
+ import { LitElement, PropertyValues } from 'lit';
2
2
  import '@digital-realty/ix-field/ix-field.js';
3
3
  import '@digital-realty/ix-menu/ix-menu.js';
4
4
  import '@digital-realty/ix-menu/ix-menu-item.js';
@@ -12,6 +12,11 @@ export declare class IxFilterSelect extends LitElement {
12
12
  mode: ShadowRootMode;
13
13
  slotAssignment?: SlotAssignmentMode | undefined;
14
14
  customElements?: CustomElementRegistry | undefined;
15
+ /**
16
+ * Returns the text field's validation error message.
17
+ *
18
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
19
+ */
15
20
  registry?: CustomElementRegistry | undefined;
16
21
  };
17
22
  /** @nocollapse */
@@ -66,6 +71,7 @@ export declare class IxFilterSelect extends LitElement {
66
71
  * `reportValidity()`.
67
72
  */
68
73
  error: boolean;
74
+ tabIndex: number;
69
75
  required: boolean;
70
76
  private filteredOptions;
71
77
  private filterValue;
@@ -73,13 +79,13 @@ export declare class IxFilterSelect extends LitElement {
73
79
  private focused;
74
80
  private menuOpening;
75
81
  firstUpdated(): void;
76
- updated(): void;
82
+ protected updated(changedProperties: PropertyValues): void;
77
83
  handleFocusin: (e: Event) => void;
78
84
  handleFocusout: () => void;
79
- handleMenuOpen: () => void;
85
+ handleMenuOpening: () => void;
80
86
  menuOpened: () => void;
81
87
  setMenuPosition: () => void;
82
- handleMenuClose: () => void;
88
+ handleMenuClosed: () => void;
83
89
  filterInput: (e: InputEvent) => void;
84
90
  selectItem: (value: string) => void;
85
91
  toggleOpen: (e: Event) => void;
package/dist/IxFilterSelect.js CHANGED
@@ -26,6 +26,7 @@ export class IxFilterSelect extends LitElement {
26
26
  * `reportValidity()`.
27
27
  */
28
28
  this.error = false;
29
+ this.tabIndex = 0;
29
30
  this.required = false;
30
31
  this.filteredOptions = [];
31
32
  this.filterValue = '';
@@ -34,32 +35,28 @@ export class IxFilterSelect extends LitElement {
34
35
  this.menuOpening = false;
35
36
  this.handleFocusin = (e) => {
36
37
  const target = e.target;
37
- if (target.tagName === 'MD-ICON-BUTTON' || this.disabled)
38
+ if (target.id !== 'filter' || this.disabled)
39
+ return;
40
+ if (this.menuOpen || this.menuOpening)
38
41
  return;
39
- this.menu.show();
40
42
  this.focused = true;
43
+ this.menu.show();
41
44
  this.menuOpening = true;
42
45
  this.setMenuPosition();
43
46
  this.internals.setFormValue(this.value);
44
47
  };
45
48
  this.handleFocusout = () => {
46
- if (this.value.length || this.filterValue.length || this.menuOpening) {
47
- this.focused = true;
48
- }
49
- else {
50
- this.focused = false;
51
- }
49
+ this.focused = false;
52
50
  };
53
- this.handleMenuOpen = () => {
51
+ this.handleMenuOpening = () => {
54
52
  this.focused = true;
53
+ this.menuOpening = true;
55
54
  this.menuOpen = true;
56
55
  this.setMenuPosition();
57
56
  this.internals.setFormValue(this.value);
58
57
  };
59
58
  this.menuOpened = () => {
60
59
  this.setMenuPosition();
61
- this.internals.setFormValue(this.value);
62
- this.inputFilter.focus();
63
60
  this.menuOpening = false;
64
61
  };
65
62
  this.setMenuPosition = () => {
@@ -70,10 +67,7 @@ export class IxFilterSelect extends LitElement {
70
67
  innerMenu.style.insetBlockStart = '0';
71
68
  }
72
69
  };
73
- this.handleMenuClose = () => {
74
- if (this.value.length === 0 && this.filterValue.length === 0) {
75
- this.focused = false;
76
- }
70
+ this.handleMenuClosed = () => {
77
71
  this.menuOpen = false;
78
72
  };
79
73
  this.filterInput = (e) => {
@@ -99,7 +93,6 @@ export class IxFilterSelect extends LitElement {
99
93
  this.value = value;
100
94
  this.filterValue = value;
101
95
  this.filteredOptions = this.options;
102
- this.focused = true;
103
96
  this.menu.close();
104
97
  this.dispatchEvent(new CustomEvent('select-filter-select', {
105
98
  detail: { value },
@@ -187,8 +180,12 @@ export class IxFilterSelect extends LitElement {
187
180
  firstUpdated() {
188
181
  this.filteredOptions = this.options;
189
182
  this.internals.setFormValue(this.value);
183
+ this.filterValue = this.value;
190
184
  }
191
- updated() {
185
+ updated(changedProperties) {
186
+ if (changedProperties.has('disabled')) {
187
+ this.tabIndex = this.disabled ? -1 : 0;
188
+ }
192
189
  this.setMenuPosition();
193
190
  this.internals.setFormValue(this.value);
194
191
  }
@@ -217,11 +214,14 @@ export class IxFilterSelect extends LitElement {
217
214
  ?disabled=${this.disabled}
218
215
  ?required=${this.required}
219
216
  ?error=${this.error}
220
- error-text=${this.errorText}
217
+ error-text=${!this.menuOpen && !this.menuOpening
218
+ ? this.errorText
219
+ : nothing}
221
220
  label=${this.label}
222
221
  @click=${() => (!this.disabled ? this.inputFilter.focus() : null)}
223
222
  @focusin=${this.handleFocusin}
224
223
  @focusout=${this.handleFocusout}
224
+ ?populated=${this.filterValue.length || this.value.length}
225
225
  >
226
226
  <input
227
227
  id="filter"
@@ -249,10 +249,9 @@ export class IxFilterSelect extends LitElement {
249
249
  <div class="menu">
250
250
  <ix-menu
251
251
  anchor="anchor"
252
- skip-restore-focus
253
- @opening=${this.handleMenuOpen}
254
- @closing=${this.handleMenuClose}
252
+ @opening=${this.handleMenuOpening}
255
253
  @opened=${this.menuOpened}
254
+ @closed=${this.handleMenuClosed}
256
255
  >
257
256
  ${((_a = this.filteredOptions) === null || _a === void 0 ? void 0 : _a.length)
258
257
  ? this.filteredOptions.map((item, id) => html `<ix-menu-item
@@ -266,6 +265,7 @@ export class IxFilterSelect extends LitElement {
266
265
  this.selectItem(item);
267
266
  }
268
267
  }}
268
+ class=${this.value === item ? 'selected' : ''}
269
269
  >
270
270
  <div slot="headline">${item}</div>
271
271
  </ix-menu-item>`)
@@ -313,6 +313,9 @@ __decorate([
313
313
  __decorate([
314
314
  property({ type: Boolean, reflect: true })
315
315
  ], IxFilterSelect.prototype, "error", void 0);
316
+ __decorate([
317
+ property({ type: Number, reflect: true })
318
+ ], IxFilterSelect.prototype, "tabIndex", void 0);
316
319
  __decorate([
317
320
  property({ type: Boolean, reflect: true })
318
321
  ], IxFilterSelect.prototype, "required", void 0);
package/dist/IxFilterSelect.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IxFilterSelect.js","sourceRoot":"","sources":["../src/IxFilterSelect.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,yCAAyC,CAAC;AACjD,OAAO,kDAAkD,CAAC;AAE1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAEpE,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QAkBmB,cAAS,GAAI,IAAoB,CAAC,wBAAwB;aACxE,eAAe,EAAE,CAAC;QAgEM,YAAO,GAAa,EAAE,CAAC;QAEtB,UAAK,GAAW,EAAE,CAAC;QAEnB,UAAK,GAAG,EAAE,CAAC;QAEc,cAAS,GAC5D,oBAAoB,CAAC;QAEmC,sBAAiB,GACzE,YAAY,CAAC;QAE6B,aAAQ,GAAG,KAAK,CAAC;QAE7D;;;;;WAKG;QACyC,UAAK,GAAG,KAAK,CAAC;QAEd,aAAQ,GAAG,KAAK,CAAC;QAE5C,oBAAe,GAAa,EAAE,CAAC;QAE/B,gBAAW,GAAG,EAAE,CAAC;QAEjB,aAAQ,GAAG,KAAK,CAAC;QAEjB,YAAO,GAAG,KAAK,CAAC;QAEhB,gBAAW,GAAG,KAAK,CAAC;QAYrC,kBAAa,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC3B,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAC;YACvC,IAAI,MAAM,CAAC,OAAO,KAAK,gBAAgB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YACjE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC,CAAC;QAEF,mBAAc,GAAG,GAAG,EAAE;YACpB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;gBACpE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;aACrB;iBAAM;gBACL,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;aACtB;QACH,CAAC,CAAC;QAEF,mBAAc,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC,CAAC;QAEF,eAAU,GAAG,GAAG,EAAE;YAChB,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,CAAC,CAAC;QAEF,oBAAe,GAAG,GAAG,EAAE;;YACrB,MAAM,SAAS,GAAG,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,0CAAE,aAAa,CACpD,OAAO,CACO,CAAC;YACjB,IAAI,SAAS,EAAE;gBACb,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;gBAC/B,SAAS,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,CAAC;aACvC;QACH,CAAC,CAAC;QAEF,oBAAe,GAAG,GAAG,EAAE;YACrB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC5D,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;aACtB;YACD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACxB,CAAC,CAAC;QAEF,gBAAW,GAAG,CAAC,CAAa,EAAE,EAAE;;YAC9B,IAAI,CAAC,WAAW,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;YACxD,IAAI,KAAK,GAAG,EAAE,CAAC;YACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;gBAChD,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;gBAC1D,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,WAAW,EAAE;oBACtC,KAAK,GAAG,IAAI,CAAC;iBACd;gBACD,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;YAClD,CAAC,CAAC,CAAC;YACH,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE;gBACxB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;aACpB;YACD,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAgB,CAAC;YACzE,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;aAC5B;QACH,CAAC,CAAC;QAEF,eAAU,GAAG,CAAC,KAAa,EAAE,EAAE;YAC7B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YACzB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;YACpC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,sBAAsB,EAAE;gBACtC,MAAM,EAAE,EAAE,KAAK,EAAE;gBACjB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;QAEF,eAAU,GAAG,CAAC,CAAQ,EAAE,EAAE;YACxB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBACnB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBACxB,IAAI,CAAC,eAAe,EAAE,CAAC;aACxB;iBAAM;gBACL,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;aACnB;QACH,CAAC,CAAC;QAEF,UAAK,GAAG,CAAC,CAAQ,EAAE,EAAE;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;YACtB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;gBACrC,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;IA0FJ,CAAC;IAlUC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAChC,CAAC;IAkBD;;OAEG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAED;;OAEG;IACH,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAC/B,CAAC;IAED;;OAEG;IACH,IAAI,IAAI;;QACN,OAAO,MAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,mCAAI,EAAE,CAAC;IACzC,CAAC;IAED;;;;OAIG;IACH,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACH,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;IACjC,CAAC;IAED;;;;;OAKG;IACH,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;IACrC,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAED,cAAc;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC;IACzC,CAAC;IAwCD,YAAY;QACV,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAED,OAAO;QACL,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IA8GD,eAAe;IACf,iBAAiB;QACf,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED;;OAEG;IACH,KAAK;QACH,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAClB,CAAC;IAED,MAAM;;QACJ,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK;SACpC,CAAC;QAEF,OAAO,IAAI,CAAA;;;mBAGI,QAAQ,CAAC,OAAO,CAAC;;qBAEf,IAAI,CAAC,OAAO;sBACX,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,KAAK;uBACN,IAAI,CAAC,SAAS;kBACnB,IAAI,CAAC,KAAK;mBACT,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;qBACtD,IAAI,CAAC,aAAa;sBACjB,IAAI,CAAC,cAAc;;;;qBAIpB,IAAI,CAAC,WAAW;qBAChB,IAAI,CAAC,WAAW;;;;;cAKvB,IAAI,CAAC,KAAK,CAAC,MAAM;YACjB,CAAC,CAAC,IAAI,CAAA;2BACO,IAAI,CAAC,KAAK;;;mCAGF;YACrB,CAAC,CAAC,OAAO;;uBAEA,IAAI,CAAC,UAAU;;qBAEjB,cAAc,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE;;;;;;;;;uBAS3C,IAAI,CAAC,cAAc;uBACnB,IAAI,CAAC,eAAe;sBACrB,IAAI,CAAC,UAAU;;cAEvB,CAAA,MAAA,IAAI,CAAC,eAAe,0CAAE,MAAM;YAC5B,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,CACtB,CAAC,IAAI,EAAE,EAAU,EAAE,EAAE,CACnB,IAAI,CAAA;2BACG,EAAE;+BACE,GAAG,EAAE;gBACZ,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;iCACU,CAAC,CAAgB,EAAE,EAAE;gBAC9B,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;gBAC5C,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;oBACjC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;iBACvB;YACH,CAAC;;6CAEsB,IAAI;oCACb,CACnB;YACH,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,iBAAiB,iBAAiB;;;;KAIvE,CAAC;IACJ,CAAC;;AA7TD;IACE,yBAAyB,CAAC,cAAc,CAAC,CAAC;AAC5C,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,gCAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,CAAC;AAEF,mBAAmB;AACH,6BAAc,GAAG,IAAI,CAAC;AA+DpB;IAAjB,KAAK,CAAC,SAAS,CAAC;4CAAe;AAEd;IAAjB,KAAK,CAAC,SAAS,CAAC;mDAAgC;AAEtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CAAwB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAY;AAEc;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;iDAC7B;AAEmC;IAAzD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;yDAC1C;AAE6B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AAQjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAe;AAEd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AAEpD;IAAR,KAAK,EAAE;uDAAwC;AAEvC;IAAR,KAAK,EAAE;mDAA0B;AAEzB;IAAR,KAAK,EAAE;gDAA0B;AAEzB;IAAR,KAAK,EAAE;+CAAyB;AAExB;IAAR,KAAK,EAAE;mDAA6B","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport '@digital-realty/ix-field/ix-field.js';\nimport '@digital-realty/ix-menu/ix-menu.js';\nimport '@digital-realty/ix-menu/ix-menu-item.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { IxMenu } from '@digital-realty/ix-menu';\nimport { IxFilterSelectStyles } from './ix-filter-select-styles.js';\n\nexport class IxFilterSelect extends LitElement {\n static get styles() {\n return [IxFilterSelectStyles];\n }\n\n static {\n requestUpdateOnAriaChange(IxFilterSelect);\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this.internals.labels;\n }\n\n /**\n * The HTML name to use in form submission.\n */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n /**\n * Returns the text field's validation error message.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n */\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /**\n * Returns a `ValidityState` object that represents the validity states of the\n * text field.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\n get validity() {\n return this.internals.validity;\n }\n\n /**\n * Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n */\n get willValidate() {\n return this.internals.willValidate;\n }\n\n checkValidity() {\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n return this.internals.reportValidity();\n }\n\n @query('ix-menu') menu!: IxMenu;\n\n @query('#filter') inputFilter!: HTMLInputElement;\n\n @property({ type: Array }) options: string[] = [];\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) label = '';\n\n @property({ type: String, attribute: 'error-text' }) errorText =\n 'Invalid error text';\n\n @property({ type: String, attribute: 'no-options-text' }) noFilteredOptions =\n 'No options';\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Gets or sets whether or not the text field is in a visually invalid state.\n *\n * This error state overrides the error state controlled by\n * `reportValidity()`.\n */\n @property({ type: Boolean, reflect: true }) error = false;\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n @state() private filteredOptions: string[] = [];\n\n @state() private filterValue = '';\n\n @state() private menuOpen = false;\n\n @state() private focused = false;\n\n @state() private menuOpening = false;\n\n firstUpdated() {\n this.filteredOptions = this.options;\n this.internals.setFormValue(this.value);\n }\n\n updated() {\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.menu.show();\n this.focused = true;\n this.menuOpening = true;\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n };\n\n handleFocusout = () => {\n if (this.value.length || this.filterValue.length || this.menuOpening) {\n this.focused = true;\n } else {\n this.focused = false;\n }\n };\n\n handleMenuOpen = () => {\n this.focused = true;\n this.menuOpen = true;\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\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 filterInput = (e: InputEvent) => {\n this.filterValue = (e.target as HTMLInputElement).value;\n let value = '';\n this.filteredOptions = this.options.filter(item => {\n const filterValue = this.filterValue.trim().toLowerCase();\n if (item.toLowerCase() === filterValue) {\n value = item;\n }\n return item.toLowerCase().includes(filterValue);\n });\n if (value !== this.value) {\n this.value = value;\n }\n const menu = this.menu.shadowRoot?.querySelector('.menu') as HTMLElement;\n if (menu) {\n menu.style.height = 'auto';\n }\n };\n\n selectItem = (value: string) => {\n this.value = value;\n this.filterValue = value;\n this.filteredOptions = this.options;\n this.focused = true;\n this.menu.close();\n this.dispatchEvent(\n new CustomEvent('select-filter-select', {\n detail: { value },\n bubbles: true,\n composed: true,\n })\n );\n };\n\n toggleOpen = (e: Event) => {\n e.stopPropagation();\n if (!this.menu.open) {\n this.menu.show();\n this.focused = true;\n this.menuOpening = true;\n this.setMenuPosition();\n } else {\n this.menu.close();\n }\n };\n\n clear = (e: Event) => {\n e.stopPropagation();\n this.value = '';\n this.filterValue = '';\n this.focused = false;\n this.dispatchEvent(\n new CustomEvent('clear-filter-select', {\n bubbles: true,\n composed: true,\n })\n );\n };\n\n /** @private */\n formResetCallback() {\n this.reset();\n }\n\n /**\n * Reset the text field to its default value.\n */\n reset() {\n this.value = '';\n }\n\n render() {\n const classes = {\n disabled: this.disabled,\n error: !this.disabled && this.error,\n };\n\n return html`\n <div class=\"filter-select\">\n <ix-field\n class=\"${classMap(classes)}\"\n id=\"anchor\"\n ?focused=${this.focused}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?error=${this.error}\n error-text=${this.errorText}\n label=${this.label}\n @click=${() => (!this.disabled ? this.inputFilter.focus() : null)}\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n >\n <input\n id=\"filter\"\n @input=${this.filterInput}\n .value=${this.filterValue}\n class=\"flex-fill\"\n type=\"text\"\n />\n <slot name=\"end\" slot=\"end\">\n ${this.value.length\n ? html`<ix-icon-button\n @click=${this.clear}\n icon=\"close\"\n aria-label=\"clear\"\n ></ix-icon-button>`\n : nothing}\n <ix-icon-button\n @click=${this.toggleOpen}\n class=\"open-icon\"\n icon=${`arrow_drop_${this.menuOpen ? 'up' : 'down'}`}\n aria-label=\"options\"\n ></ix-icon-button>\n </slot>\n </ix-field>\n <div class=\"menu\">\n <ix-menu\n anchor=\"anchor\"\n skip-restore-focus\n @opening=${this.handleMenuOpen}\n @closing=${this.handleMenuClose}\n @opened=${this.menuOpened}\n >\n ${this.filteredOptions?.length\n ? this.filteredOptions.map(\n (item, id: number) =>\n html`<ix-menu-item\n id=${id}\n @click=${() => {\n this.selectItem(item);\n }}\n @keydown=${(e: KeyboardEvent) => {\n const selectionKeys = [' ', 'Tab', 'Enter'];\n if (selectionKeys.includes(e.key)) {\n this.selectItem(item);\n }\n }}\n >\n <div slot=\"headline\">${item}</div>\n </ix-menu-item>`\n )\n : html`<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}\n </ix-menu>\n </div>\n </div>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"IxFilterSelect.js","sourceRoot":"","sources":["../src/IxFilterSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport '@digital-realty/ix-field/ix-field.js';\nimport '@digital-realty/ix-menu/ix-menu.js';\nimport '@digital-realty/ix-menu/ix-menu-item.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { IxMenu } from '@digital-realty/ix-menu';\nimport { IxFilterSelectStyles } from './ix-filter-select-styles.js';\n\nexport class IxFilterSelect extends LitElement {\n static get styles() {\n return [IxFilterSelectStyles];\n }\n\n static {\n requestUpdateOnAriaChange(IxFilterSelect);\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this.internals.labels;\n }\n\n /**\n * The HTML name to use in form submission.\n */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n /**\n * Returns the text field's validation error message.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n */\n get validationMessage() {\n return this.internals.validationMessage;\n }\n\n /**\n * Returns a `ValidityState` object that represents the validity states of the\n * text field.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\n get validity() {\n return this.internals.validity;\n }\n\n /**\n * Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n */\n get willValidate() {\n return this.internals.willValidate;\n }\n\n checkValidity() {\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n return this.internals.reportValidity();\n }\n\n @query('ix-menu') menu!: IxMenu;\n\n @query('#filter') inputFilter!: HTMLInputElement;\n\n @property({ type: Array }) options: string[] = [];\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) label = '';\n\n @property({ type: String, attribute: 'error-text' }) errorText =\n 'Invalid error text';\n\n @property({ type: String, attribute: 'no-options-text' }) noFilteredOptions =\n 'No options';\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Gets or sets whether or not the text field is in a visually invalid state.\n *\n * This error state overrides the error state controlled by\n * `reportValidity()`.\n */\n @property({ type: Boolean, reflect: true }) error = false;\n\n @property({ type: Number, reflect: true }) tabIndex = 0;\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n @state() private filteredOptions: string[] = [];\n\n @state() private filterValue = '';\n\n @state() private menuOpen = false;\n\n @state() private focused = false;\n\n @state() private menuOpening = false;\n\n firstUpdated() {\n this.filteredOptions = this.options;\n this.internals.setFormValue(this.value);\n this.filterValue = this.value;\n }\n\n protected override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('disabled')) {\n this.tabIndex = this.disabled ? -1 : 0;\n }\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n }\n\n handleFocusin = (e: Event) => {\n const target = e.target as HTMLElement;\n if (target.id !== 'filter' || this.disabled) return;\n if (this.menuOpen || this.menuOpening) return;\n this.focused = true;\n this.menu.show();\n this.menuOpening = true;\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n };\n\n handleFocusout = () => {\n this.focused = false;\n };\n\n handleMenuOpening = () => {\n this.focused = true;\n this.menuOpening = true;\n this.menuOpen = true;\n this.setMenuPosition();\n this.internals.setFormValue(this.value);\n };\n\n menuOpened = () => {\n this.setMenuPosition();\n this.menuOpening = false;\n };\n\n setMenuPosition = () => {\n const innerMenu = this.menu?.shadowRoot?.querySelector(\n '.menu'\n ) as HTMLElement;\n if (innerMenu) {\n innerMenu.style.width = '100%';\n innerMenu.style.insetBlockStart = '0';\n }\n };\n\n handleMenuClosed = () => {\n this.menuOpen = false;\n };\n\n filterInput = (e: InputEvent) => {\n this.filterValue = (e.target as HTMLInputElement).value;\n let value = '';\n this.filteredOptions = this.options.filter(item => {\n const filterValue = this.filterValue.trim().toLowerCase();\n if (item.toLowerCase() === filterValue) {\n value = item;\n }\n return item.toLowerCase().includes(filterValue);\n });\n if (value !== this.value) {\n this.value = value;\n }\n const menu = this.menu.shadowRoot?.querySelector('.menu') as HTMLElement;\n if (menu) {\n menu.style.height = 'auto';\n }\n };\n\n selectItem = (value: string) => {\n this.value = value;\n this.filterValue = value;\n this.filteredOptions = this.options;\n this.menu.close();\n this.dispatchEvent(\n new CustomEvent('select-filter-select', {\n detail: { value },\n bubbles: true,\n composed: true,\n })\n );\n };\n\n toggleOpen = (e: Event) => {\n e.stopPropagation();\n if (!this.menu.open) {\n this.menu.show();\n this.focused = true;\n this.menuOpening = true;\n this.setMenuPosition();\n } else {\n this.menu.close();\n }\n };\n\n clear = (e: Event) => {\n e.stopPropagation();\n this.value = '';\n this.filterValue = '';\n this.focused = false;\n this.dispatchEvent(\n new CustomEvent('clear-filter-select', {\n bubbles: true,\n composed: true,\n })\n );\n };\n\n /** @private */\n formResetCallback() {\n this.reset();\n }\n\n /**\n * Reset the text field to its default value.\n */\n reset() {\n this.value = '';\n }\n\n render() {\n const classes = {\n disabled: this.disabled,\n error: !this.disabled && this.error,\n };\n\n return html`\n <div class=\"filter-select\">\n <ix-field\n class=\"${classMap(classes)}\"\n id=\"anchor\"\n ?focused=${this.focused}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?error=${this.error}\n error-text=${!this.menuOpen && !this.menuOpening\n ? this.errorText\n : nothing}\n label=${this.label}\n @click=${() => (!this.disabled ? this.inputFilter.focus() : null)}\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n ?populated=${this.filterValue.length || this.value.length}\n >\n <input\n id=\"filter\"\n @input=${this.filterInput}\n .value=${this.filterValue}\n class=\"flex-fill\"\n type=\"text\"\n />\n <slot name=\"end\" slot=\"end\">\n ${this.value.length\n ? html`<ix-icon-button\n @click=${this.clear}\n icon=\"close\"\n aria-label=\"clear\"\n ></ix-icon-button>`\n : nothing}\n <ix-icon-button\n @click=${this.toggleOpen}\n class=\"open-icon\"\n icon=${`arrow_drop_${this.menuOpen ? 'up' : 'down'}`}\n aria-label=\"options\"\n ></ix-icon-button>\n </slot>\n </ix-field>\n <div class=\"menu\">\n <ix-menu\n anchor=\"anchor\"\n @opening=${this.handleMenuOpening}\n @opened=${this.menuOpened}\n @closed=${this.handleMenuClosed}\n >\n ${this.filteredOptions?.length\n ? this.filteredOptions.map(\n (item, id: number) =>\n html`<ix-menu-item\n id=${id}\n @click=${() => {\n this.selectItem(item);\n }}\n @keydown=${(e: KeyboardEvent) => {\n const selectionKeys = [' ', 'Tab', 'Enter'];\n if (selectionKeys.includes(e.key)) {\n this.selectItem(item);\n }\n }}\n class=${this.value === item ? 'selected' : ''}\n >\n <div slot=\"headline\">${item}</div>\n </ix-menu-item>`\n )\n : html`<ix-menu-item>${this.noFilteredOptions}</ix-menu-item>`}\n </ix-menu>\n </div>\n </div>\n `;\n }\n}\n"]}
package/dist/ix-filter-select-styles.js CHANGED
@@ -3,10 +3,11 @@ export const IxFilterSelectStyles = css `
3
3
  :host {
4
4
  display: block;
5
5
  }
6
+ :host([disabled]) {
7
+ pointer-events: none;
8
+ }
6
9
  ix-field {
7
10
  display: block;
8
- --md-outlined-field-label-text-color: var(--md-sys-text-color-primary);
9
- --md-outlined-field-outline-color: var(--md-outlined-field-outline-color);
10
11
  }
11
12
  ix-field label {
12
13
  display: none;
@@ -50,7 +51,10 @@ export const IxFilterSelectStyles = css `
50
51
  margin: 0 1rem 2px;
51
52
  }
52
53
  ix-menu-item.selected {
53
- background: var(--md-sys-color-tertiary-container);
54
+ background: var(
55
+ --md-menu-item-selected-container-color,
56
+ --md-sys-color-tertiary-container
57
+ );
54
58
  }
55
59
  ix-icon-button {
56
60
  --md-icon-button-icon-color: var(--md-sys-text-color-secondary);
package/dist/ix-filter-select-styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ix-filter-select-styles.js","sourceRoot":"","sources":["../src/ix-filter-select-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsEtC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxFilterSelectStyles = 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 .filter-select {\n position: relative;\n }\n`;\n"]}
1
+ {"version":3,"file":"ix-filter-select-styles.js","sourceRoot":"","sources":["../src/ix-filter-select-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EtC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxFilterSelectStyles = css`\n :host {\n display: block;\n }\n :host([disabled]) {\n pointer-events: none;\n }\n ix-field {\n display: block;\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(\n --md-menu-item-selected-container-color,\n --md-sys-color-tertiary-container\n );\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 .filter-select {\n position: relative;\n }\n`;\n"]}
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.13",
6
+ "version": "1.0.24",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -26,14 +26,14 @@
26
26
  },
27
27
  "dependencies": {
28
28
  "@digital-realty/ix-field": "^1.0.4",
29
- "@digital-realty/ix-icon-button": "^1.0.24",
29
+ "@digital-realty/ix-icon-button": "^1.0.35",
30
30
  "@digital-realty/ix-menu": "^1.0.3",
31
31
  "@material/web": "1.2.0",
32
32
  "lit": "^2.0.2"
33
33
  },
34
34
  "devDependencies": {
35
35
  "@custom-elements-manifest/analyzer": "^0.4.17",
36
- "@digital-realty/theme": "^1.0.13",
36
+ "@digital-realty/theme": "^1.0.26",
37
37
  "@open-wc/eslint-config": "^9.2.1",
38
38
  "@open-wc/testing": "^3.1.6",
39
39
  "@typescript-eslint/eslint-plugin": "^5.48.0",
@@ -96,5 +96,5 @@
96
96
  "README.md",
97
97
  "LICENSE"
98
98
  ],
99
- "gitHead": "43b0e609ef85f29e50a1872181cb8e685bcc13ec"
99
+ "gitHead": "dced04ebef5c8342344b1fd3df33b5e22a78725f"
100
100
  }