@digital-realty/ix-select 1.0.7 → 1.0.8

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 (4) hide show
  1. package/dist/IxSelect.d.ts +75 -12
  2. package/dist/IxSelect.js +164 -98
  3. package/dist/IxSelect.js.map +1 -1
  4. package/package.json +6 -2
package/dist/IxSelect.d.ts CHANGED
@@ -2,23 +2,68 @@ import { LitElement, PropertyValues } from 'lit';
2
2
  import { Select } from '@material/web/select/internal/select.js';
3
3
  import '@material/web/select/filled-select.js';
4
4
  import '@material/web/select/outlined-select.js';
5
+ import '@digital-realty/ix-icon/ix-icon.js';
5
6
  import './selectoption/ix-select-option.js';
6
- export declare const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;
7
+ declare const VALUE: unique symbol;
7
8
  export declare class IxSelect extends LitElement {
9
+ /** @nocollapse */
10
+ static shadowRootOptions: ShadowRootInit;
8
11
  /** @nocollapse */
9
12
  static readonly formAssociated = true;
10
- private readonly field;
11
- slotEl: HTMLSlotElement;
12
- default: Select;
13
- appearance: 'filled' | 'outlined';
14
- label: String;
13
+ component: Select;
14
+ /**
15
+ * The switch between filled and outlined.
16
+ */
17
+ filled: boolean;
18
+ /**
19
+ * The floating label for the field.
20
+ */
21
+ label: string;
22
+ /**
23
+ * Opens the menu synchronously with no animation.
24
+ */
15
25
  quick: boolean;
26
+ /**
27
+ * Whether or not the select is required.
28
+ */
16
29
  required: boolean;
30
+ /**
31
+ * Disables the select.
32
+ */
17
33
  disabled: boolean;
34
+ /**
35
+ * The error message that replaces supporting text when `error` is true. If
36
+ * `errorText` is an empty string, then the supporting text will continue to
37
+ * show.
38
+ *
39
+ * This error message overrides the error message displayed by
40
+ * `reportValidity()`.
41
+ */
18
42
  errorText: string;
43
+ /**
44
+ * Conveys additional information below the select, such as how it should
45
+ * be used.
46
+ */
19
47
  supportingText: string;
48
+ /**
49
+ * Gets or sets whether or not the select is in a visually invalid state.
50
+ *
51
+ * This error state overrides the error state controlled by
52
+ * `reportValidity()`.
53
+ */
20
54
  error: boolean;
55
+ /**
56
+ * Text to display in the field. Only set for SSR.
57
+ */
21
58
  displayText: string;
59
+ /**
60
+ * Name of icon. It is always a string.
61
+ */
62
+ leadingIcon: string;
63
+ /**
64
+ * Name of icon. It is always a string.
65
+ */
66
+ trailingIcon: string;
22
67
  /**
23
68
  * Whether or not the underlying md-menu should be position: fixed to display
24
69
  * in a top-level manner, or position: absolute.
@@ -32,6 +77,14 @@ export declare class IxSelect extends LitElement {
32
77
  * before it clears the typeahead buffer.
33
78
  */
34
79
  typeaheadDelay: number;
80
+ /**
81
+ * The index of the currently selected option.
82
+ *
83
+ * Note: For SSR, set `[selected]` on the requested option and `displayText`
84
+ * rather than setting `selectedIndex` setting `selectedIndex` will incur a
85
+ * DOM query.
86
+ */
87
+ selectedIndex: number;
35
88
  private nativeError;
36
89
  private nativeErrorText;
37
90
  private get hasError();
@@ -43,16 +96,26 @@ export declare class IxSelect extends LitElement {
43
96
  set name(name: string);
44
97
  get validity(): ValidityState;
45
98
  get value(): string;
99
+ set value(value: string);
100
+ [VALUE]: string;
46
101
  get validationMessage(): string;
47
- get materialRoot(): Select;
48
- changeHandler: () => void;
49
- firstUpdated(): void;
102
+ private handleSelection;
103
+ getUpdateComplete(): Promise<boolean>;
50
104
  protected updated(changed: PropertyValues<Select>): void;
51
- render(): import("lit-html").TemplateResult<1> | undefined;
52
105
  private getErrorText;
106
+ private syncValidity;
107
+ private getRequiredValidationMessage;
53
108
  checkValidity(): boolean;
54
109
  reportValidity(): boolean;
55
110
  setCustomValidity(error: string): void;
56
- private syncValidity;
57
- private getRequiredValidationMessage;
111
+ /**
112
+ * Reset the select to its default value.
113
+ */
114
+ reset(): void;
115
+ /** @private */
116
+ formResetCallback(): void;
117
+ /** @private */
118
+ formStateRestoreCallback(newState: string): void;
119
+ render(): import("lit-html").TemplateResult<2 | 1>;
58
120
  }
121
+ export {};
package/dist/IxSelect.js CHANGED
@@ -1,22 +1,72 @@
1
+ var _a;
1
2
  import { __decorate } from "tslib";
2
- import { html, LitElement, nothing } from 'lit';
3
+ import { html, LitElement, nothing, isServer } from 'lit';
4
+ import { html as staticHtml, literal } from 'lit/static-html.js';
3
5
  import { property, query, state } from 'lit/decorators.js';
6
+ import { ifDefined } from 'lit/directives/if-defined.js';
7
+ import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
8
+ import { DEFAULT_TYPEAHEAD_BUFFER_TIME } from '@material/web/menu/internal/menu.js';
4
9
  import '@material/web/select/filled-select.js';
5
10
  import '@material/web/select/outlined-select.js';
11
+ import '@digital-realty/ix-icon/ix-icon.js';
6
12
  import './selectoption/ix-select-option.js';
7
- export const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;
13
+ const VALUE = Symbol('value');
8
14
  export class IxSelect extends LitElement {
9
15
  constructor() {
10
16
  super(...arguments);
11
- this.appearance = 'outlined';
17
+ /**
18
+ * The switch between filled and outlined.
19
+ */
20
+ this.filled = false;
21
+ /**
22
+ * The floating label for the field.
23
+ */
12
24
  this.label = '';
25
+ /**
26
+ * Opens the menu synchronously with no animation.
27
+ */
13
28
  this.quick = false;
29
+ /**
30
+ * Whether or not the select is required.
31
+ */
14
32
  this.required = false;
33
+ /**
34
+ * Disables the select.
35
+ */
15
36
  this.disabled = false;
37
+ /**
38
+ * The error message that replaces supporting text when `error` is true. If
39
+ * `errorText` is an empty string, then the supporting text will continue to
40
+ * show.
41
+ *
42
+ * This error message overrides the error message displayed by
43
+ * `reportValidity()`.
44
+ */
16
45
  this.errorText = '';
46
+ /**
47
+ * Conveys additional information below the select, such as how it should
48
+ * be used.
49
+ */
17
50
  this.supportingText = '';
51
+ /**
52
+ * Gets or sets whether or not the select is in a visually invalid state.
53
+ *
54
+ * This error state overrides the error state controlled by
55
+ * `reportValidity()`.
56
+ */
18
57
  this.error = false;
58
+ /**
59
+ * Text to display in the field. Only set for SSR.
60
+ */
19
61
  this.displayText = '';
62
+ /**
63
+ * Name of icon. It is always a string.
64
+ */
65
+ this.leadingIcon = '';
66
+ /**
67
+ * Name of icon. It is always a string.
68
+ */
69
+ this.trailingIcon = '';
20
70
  /**
21
71
  * Whether or not the underlying md-menu should be position: fixed to display
22
72
  * in a top-level manner, or position: absolute.
@@ -30,16 +80,20 @@ export class IxSelect extends LitElement {
30
80
  * before it clears the typeahead buffer.
31
81
  */
32
82
  this.typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;
83
+ /**
84
+ * The index of the currently selected option.
85
+ *
86
+ * Note: For SSR, set `[selected]` on the requested option and `displayText`
87
+ * rather than setting `selectedIndex` setting `selectedIndex` will incur a
88
+ * DOM query.
89
+ */
90
+ this.selectedIndex = -1;
33
91
  this.nativeError = false;
34
92
  this.nativeErrorText = '';
35
93
  this.internals = this /* needed for closure */
36
94
  .attachInternals();
37
95
  this.customValidationMessage = '';
38
- this.changeHandler = () => {
39
- this.materialRoot.setAttribute('value', this.materialRoot.selectedOptions[0].value);
40
- this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
41
- this.dispatchEvent(new Event('change', { bubbles: true }));
42
- };
96
+ this[_a] = '';
43
97
  }
44
98
  get hasError() {
45
99
  return this.error || this.nativeError;
@@ -51,8 +105,8 @@ export class IxSelect extends LitElement {
51
105
  return this.internals.labels;
52
106
  }
53
107
  get name() {
54
- var _a;
55
- return (_a = this.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
108
+ var _b;
109
+ return (_b = this.getAttribute('name')) !== null && _b !== void 0 ? _b : '';
56
110
  }
57
111
  set name(name) {
58
112
  this.setAttribute('name', name);
@@ -62,126 +116,129 @@ export class IxSelect extends LitElement {
62
116
  return this.internals.validity;
63
117
  }
64
118
  get value() {
65
- return this.materialRoot.value;
119
+ this[VALUE] = this.component.value;
120
+ return this[VALUE];
121
+ }
122
+ set value(value) {
123
+ if (isServer)
124
+ return;
125
+ this.component.value = value;
66
126
  }
67
127
  get validationMessage() {
68
128
  this.syncValidity();
69
129
  return this.internals.validationMessage;
70
130
  }
71
- get materialRoot() {
72
- var _a, _b;
73
- return (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('md-filled-select')) !== null && _b !== void 0 ? _b : this.default;
131
+ handleSelection() {
132
+ this.internals.setFormValue(this.component.value);
133
+ this.syncValidity();
74
134
  }
75
- firstUpdated() {
76
- this.addEventListener('request-selection', () => {
77
- this.internals.setFormValue(this.materialRoot.value);
78
- });
135
+ async getUpdateComplete() {
136
+ await super.getUpdateComplete();
137
+ await this.component.updateComplete;
138
+ this.internals.setFormValue(this.component.value);
139
+ return true;
79
140
  }
80
141
  updated(changed) {
81
142
  if (changed.has('required')) {
82
143
  this.syncValidity();
83
144
  }
84
145
  }
85
- // eslint-disable-next-line consistent-return
86
- render() {
87
- if (this.appearance === 'outlined') {
88
- return html ` <md-outlined-select
89
- .aria-label=${this.ariaLabel || nothing}
90
- .tabindex=${this.disabled ? '-1' : '0'}
91
- .label=${this.label}
92
- .populated=${!!this.displayText}
93
- .disabled=${this.disabled}
94
- .quick=${this.quick}
95
- .menu-positioning=${this.menuPositioning}
96
- .typeaheadDelay=${this.typeaheadDelay}
97
- .error=${this.hasError}
98
- .name=${this.name}
99
- .required=${this.required}
100
- supporting-text=${this.supportingText}
101
- error-text=${this.getErrorText()}
102
- @change=${this.changeHandler}
103
- >
104
- <slot></slot>
105
- </md-outlined-select>`;
106
- }
107
- if (this.appearance === 'filled') {
108
- return html ` <md-filled-select
109
- .aria-label=${this.ariaLabel || nothing}
110
- .tabindex=${this.disabled ? '-1' : '0'}
111
- .label=${this.label}
112
- .populated=${!!this.displayText}
113
- .disabled=${this.disabled}
114
- .quick=${this.quick}
115
- .positioning=${this.menuPositioning}
116
- .typeaheadDelay=${this.typeaheadDelay}
117
- .required=${this.required}
118
- .error=${this.hasError}
119
- supporting-text=${this.supportingText}
120
- error-text=${this.getErrorText()}
121
- @change=${this.changeHandler}
122
- >
123
- <slot></slot>
124
- </md-filled-select>`;
125
- }
126
- }
127
146
  getErrorText() {
128
147
  return this.error ? this.errorText : this.nativeErrorText;
129
148
  }
149
+ async syncValidity() {
150
+ const valueMissing = this.required && !this.component.value;
151
+ const customError = !!this.customValidationMessage;
152
+ const validationMessage = this.customValidationMessage ||
153
+ (valueMissing && this.getRequiredValidationMessage()) ||
154
+ '';
155
+ this.internals.setValidity({ valueMissing, customError }, validationMessage, this.component);
156
+ }
157
+ // Returns the platform `<select>` validation message for i18n.
158
+ // eslint-disable-next-line class-methods-use-this
159
+ getRequiredValidationMessage() {
160
+ const select = document.createElement('select');
161
+ select.required = true;
162
+ return select.validationMessage;
163
+ }
130
164
  checkValidity() {
131
165
  this.syncValidity();
132
166
  return this.internals.checkValidity();
133
167
  }
134
168
  reportValidity() {
135
- var _a;
136
- let invalidEvent;
137
- this.addEventListener('invalid', event => {
138
- invalidEvent = event;
139
- }, { once: true });
140
- const valid = this.checkValidity();
141
- if (invalidEvent === null || invalidEvent === void 0 ? void 0 : invalidEvent.defaultPrevented) {
142
- return valid;
143
- }
144
- const prevMessage = this.getErrorText();
145
- this.nativeError = !valid;
146
- this.nativeErrorText = this.validationMessage;
147
- if (prevMessage === this.getErrorText()) {
148
- (_a = this.field) === null || _a === void 0 ? void 0 : _a.reannounceError();
149
- }
150
- return valid;
169
+ return this.component.reportValidity();
151
170
  }
152
171
  setCustomValidity(error) {
153
172
  this.customValidationMessage = error;
154
173
  this.syncValidity();
155
174
  }
156
- syncValidity() {
157
- const valueMissing = this.required && !this.materialRoot.value;
158
- const customError = !!this.customValidationMessage;
159
- const validationMessage = this.customValidationMessage ||
160
- (valueMissing && this.getRequiredValidationMessage()) ||
161
- '';
162
- this.internals.setValidity({ valueMissing, customError }, validationMessage);
175
+ /**
176
+ * Reset the select to its default value.
177
+ */
178
+ reset() {
179
+ this.component.reset();
163
180
  }
164
- // eslint-disable-next-line class-methods-use-this
165
- getRequiredValidationMessage() {
166
- const select = document.createElement('select');
167
- select.required = true;
168
- return select.validationMessage;
181
+ /** @private */
182
+ formResetCallback() {
183
+ this.reset();
184
+ }
185
+ /** @private */
186
+ formStateRestoreCallback(newState) {
187
+ this.value = newState;
188
+ }
189
+ render() {
190
+ const tag = this.filled
191
+ ? literal `md-filled-select`
192
+ : literal `md-outlined-select`;
193
+ const ariaLabel = this.label || this.ariaLabel;
194
+ return staticHtml `<${tag}
195
+ ?disabled=${this.disabled}
196
+ ?quick=${this.quick}
197
+ ?error=${this.hasError}
198
+ ?required=${this.required}
199
+ ?has-leading-icon=${this.leadingIcon.length > 0}
200
+ aria-label=${ariaLabel || nothing}
201
+ tabindex=${ifDefined(this.disabled ? undefined : '0')}
202
+ menu-positioning=${this.menuPositioning}
203
+ typeahead-delay=${this.typeaheadDelay}
204
+ supporting-text=${this.supportingText}
205
+ error-text=${this.getErrorText()}
206
+ selected-index=${this.selectedIndex}
207
+ display-text=${this.displayText}
208
+ label=${this.label}
209
+ name=${this.name}
210
+ @request-selection=${this.handleSelection}
211
+ class="select"
212
+ >
213
+ <slot></slot>
214
+ ${this.leadingIcon
215
+ ? html `<ix-icon slot="leading-icon">${this.leadingIcon}</ix-icon>`
216
+ : nothing}
217
+ ${this.trailingIcon
218
+ ? html `<ix-icon slot="trailing-icon"
219
+ >${this.trailingIcon}</ix-icon
220
+ >`
221
+ : nothing}
222
+ </${tag}>`;
169
223
  }
170
224
  }
225
+ _a = VALUE;
226
+ (() => {
227
+ requestUpdateOnAriaChange(IxSelect);
228
+ })();
229
+ /** @nocollapse */
230
+ IxSelect.shadowRootOptions = {
231
+ ...LitElement.shadowRootOptions,
232
+ delegatesFocus: true,
233
+ };
171
234
  /** @nocollapse */
172
235
  IxSelect.formAssociated = true;
173
236
  __decorate([
174
- query('.field')
175
- ], IxSelect.prototype, "field", void 0);
176
- __decorate([
177
- query('slot')
178
- ], IxSelect.prototype, "slotEl", void 0);
237
+ query('.select')
238
+ ], IxSelect.prototype, "component", void 0);
179
239
  __decorate([
180
- query('md-outlined-select')
181
- ], IxSelect.prototype, "default", void 0);
182
- __decorate([
183
- property()
184
- ], IxSelect.prototype, "appearance", void 0);
240
+ property({ type: Boolean, reflect: true })
241
+ ], IxSelect.prototype, "filled", void 0);
185
242
  __decorate([
186
243
  property()
187
244
  ], IxSelect.prototype, "label", void 0);
@@ -206,12 +263,21 @@ __decorate([
206
263
  __decorate([
207
264
  property({ type: String, attribute: 'display-text' })
208
265
  ], IxSelect.prototype, "displayText", void 0);
266
+ __decorate([
267
+ property({ attribute: 'leading-icon', reflect: true })
268
+ ], IxSelect.prototype, "leadingIcon", void 0);
269
+ __decorate([
270
+ property({ attribute: 'trailing-icon', reflect: true })
271
+ ], IxSelect.prototype, "trailingIcon", void 0);
209
272
  __decorate([
210
273
  property({ attribute: 'menu-positioning' })
211
274
  ], IxSelect.prototype, "menuPositioning", void 0);
212
275
  __decorate([
213
276
  property({ type: Number, attribute: 'typeahead-delay' })
214
277
  ], IxSelect.prototype, "typeaheadDelay", void 0);
278
+ __decorate([
279
+ property({ type: Number, attribute: 'selected-index' })
280
+ ], IxSelect.prototype, "selectedIndex", void 0);
215
281
  __decorate([
216
282
  state()
217
283
  ], IxSelect.prototype, "nativeError", void 0);
package/dist/IxSelect.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IxSelect.js","sourceRoot":"","sources":["../src/IxSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { Select } from '@material/web/select/internal/select.js';\nimport { Field } from '@material/web/field/internal/field';\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport '@material/web/select/filled-select.js';\nimport '@material/web/select/outlined-select.js';\nimport './selectoption/ix-select-option.js';\n\nexport const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;\n\nexport class IxSelect extends LitElement {\n /** @nocollapse */\n static readonly formAssociated = true;\n\n @query('.field') private readonly field!: Field | null;\n\n @query('slot') slotEl!: HTMLSlotElement;\n\n @query('md-outlined-select') default!: Select;\n\n @property() appearance: 'filled' | 'outlined' = 'outlined';\n\n @property() label: String = '';\n\n @property({ type: Boolean }) quick = false;\n\n @property({ type: Boolean }) required = false;\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n @property({ type: String, attribute: 'error-text' }) errorText = '';\n\n @property({ type: String, attribute: 'supporting-text' }) supportingText = '';\n\n @property({ type: Boolean, reflect: true }) error = false;\n\n @property({ type: String, attribute: 'display-text' }) displayText = '';\n\n /**\n * Whether or not the underlying md-menu should be position: fixed to display\n * in a top-level manner, or position: absolute.\n *\n * position:fixed is useful for cases where select is inside of another\n * element with stacking context and hidden overflows such as `md-dialog`.\n */\n @property({ attribute: 'menu-positioning' })\n menuPositioning: 'absolute' | 'fixed' = 'absolute';\n\n /**\n * The max time between the keystrokes of the typeahead select / menu behavior\n * before it clears the typeahead buffer.\n */\n @property({ type: Number, attribute: 'typeahead-delay' })\n typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n\n @state() private nativeError = false;\n\n @state() private nativeErrorText = '';\n\n private get hasError() {\n return this.error || this.nativeError;\n }\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n private customValidationMessage = '';\n\n get form() {\n return this.internals.form;\n }\n\n get labels() {\n return this.internals.labels;\n }\n\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n get validity() {\n this.syncValidity();\n return this.internals.validity;\n }\n\n get value() {\n return this.materialRoot.value;\n }\n\n get validationMessage() {\n this.syncValidity();\n return this.internals.validationMessage;\n }\n\n get materialRoot(): Select {\n return this.shadowRoot?.querySelector('md-filled-select') ?? this.default;\n }\n\n changeHandler = () => {\n this.materialRoot.setAttribute(\n 'value',\n this.materialRoot.selectedOptions[0].value\n );\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true }));\n };\n\n firstUpdated() {\n this.addEventListener('request-selection', () => {\n this.internals.setFormValue(this.materialRoot.value);\n });\n }\n\n protected override updated(changed: PropertyValues<Select>) {\n if (changed.has('required')) {\n this.syncValidity();\n }\n }\n\n // eslint-disable-next-line consistent-return\n render() {\n if (this.appearance === 'outlined') {\n return html` <md-outlined-select\n .aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n .tabindex=${this.disabled ? '-1' : '0'}\n .label=${this.label}\n .populated=${!!this.displayText}\n .disabled=${this.disabled}\n .quick=${this.quick}\n .menu-positioning=${this.menuPositioning}\n .typeaheadDelay=${this.typeaheadDelay}\n .error=${this.hasError}\n .name=${this.name}\n .required=${this.required}\n supporting-text=${this.supportingText}\n error-text=${this.getErrorText()}\n @change=${this.changeHandler}\n >\n <slot></slot>\n </md-outlined-select>`;\n }\n if (this.appearance === 'filled') {\n return html` <md-filled-select\n .aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n .tabindex=${this.disabled ? '-1' : '0'}\n .label=${this.label}\n .populated=${!!this.displayText}\n .disabled=${this.disabled}\n .quick=${this.quick}\n .positioning=${this.menuPositioning}\n .typeaheadDelay=${this.typeaheadDelay}\n .required=${this.required}\n .error=${this.hasError}\n supporting-text=${this.supportingText}\n error-text=${this.getErrorText()}\n @change=${this.changeHandler}\n >\n <slot></slot>\n </md-filled-select>`;\n }\n }\n\n private getErrorText() {\n return this.error ? this.errorText : this.nativeErrorText;\n }\n\n checkValidity() {\n this.syncValidity();\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n let invalidEvent: Event | undefined;\n this.addEventListener(\n 'invalid',\n event => {\n invalidEvent = event;\n },\n { once: true }\n );\n\n const valid = this.checkValidity();\n if (invalidEvent?.defaultPrevented) {\n return valid;\n }\n\n const prevMessage = this.getErrorText();\n this.nativeError = !valid;\n this.nativeErrorText = this.validationMessage;\n\n if (prevMessage === this.getErrorText()) {\n this.field?.reannounceError();\n }\n\n return valid;\n }\n\n setCustomValidity(error: string) {\n this.customValidationMessage = error;\n this.syncValidity();\n }\n\n private syncValidity() {\n const valueMissing = this.required && !this.materialRoot.value;\n const customError = !!this.customValidationMessage;\n const validationMessage =\n this.customValidationMessage ||\n (valueMissing && this.getRequiredValidationMessage()) ||\n '';\n\n this.internals.setValidity(\n { valueMissing, customError },\n validationMessage\n );\n }\n\n // eslint-disable-next-line class-methods-use-this\n private getRequiredValidationMessage() {\n const select = document.createElement('select');\n select.required = true;\n return select.validationMessage;\n }\n}\n"]}
1
+ {"version":3,"file":"IxSelect.js","sourceRoot":"","sources":["../src/IxSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues, isServer } from 'lit';\nimport { html as staticHtml, StaticValue, literal } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { Select } from '@material/web/select/internal/select.js';\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport { DEFAULT_TYPEAHEAD_BUFFER_TIME } from '@material/web/menu/internal/menu.js';\nimport '@material/web/select/filled-select.js';\nimport '@material/web/select/outlined-select.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './selectoption/ix-select-option.js';\n\nconst VALUE = Symbol('value');\n\nexport class IxSelect extends LitElement {\n static {\n requestUpdateOnAriaChange(IxSelect);\n }\n\n /** @nocollapse */\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n @query('.select') component!: Select;\n\n /**\n * The switch between filled and outlined.\n */\n @property({ type: Boolean, reflect: true }) filled = false;\n\n /**\n * The floating label for the field.\n */\n @property() label: string = '';\n\n /**\n * Opens the menu synchronously with no animation.\n */\n @property({ type: Boolean }) quick = false;\n\n /**\n * Whether or not the select is required.\n */\n @property({ type: Boolean }) required = false;\n\n /**\n * Disables the select.\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * The error message that replaces supporting text when `error` is true. If\n * `errorText` is an empty string, then the supporting text will continue to\n * show.\n *\n * This error message overrides the error message displayed by\n * `reportValidity()`.\n */\n @property({ type: String, attribute: 'error-text' }) errorText = '';\n\n /**\n * Conveys additional information below the select, such as how it should\n * be used.\n */\n @property({ type: String, attribute: 'supporting-text' }) supportingText = '';\n\n /**\n * Gets or sets whether or not the select 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 /**\n * Text to display in the field. Only set for SSR.\n */\n @property({ type: String, attribute: 'display-text' }) displayText = '';\n\n /**\n * Name of icon. It is always a string.\n */\n @property({ attribute: 'leading-icon', reflect: true })\n leadingIcon = '';\n\n /**\n * Name of icon. It is always a string.\n */\n @property({ attribute: 'trailing-icon', reflect: true })\n trailingIcon = '';\n\n /**\n * Whether or not the underlying md-menu should be position: fixed to display\n * in a top-level manner, or position: absolute.\n *\n * position:fixed is useful for cases where select is inside of another\n * element with stacking context and hidden overflows such as `md-dialog`.\n */\n @property({ attribute: 'menu-positioning' })\n menuPositioning: 'absolute' | 'fixed' = 'absolute';\n\n /**\n * The max time between the keystrokes of the typeahead select / menu behavior\n * before it clears the typeahead buffer.\n */\n @property({ type: Number, attribute: 'typeahead-delay' })\n typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n\n /**\n * The index of the currently selected option.\n *\n * Note: For SSR, set `[selected]` on the requested option and `displayText`\n * rather than setting `selectedIndex` setting `selectedIndex` will incur a\n * DOM query.\n */\n @property({ type: Number, attribute: 'selected-index' })\n selectedIndex = -1;\n\n @state() private nativeError = false;\n\n @state() private nativeErrorText = '';\n\n private get hasError() {\n return this.error || this.nativeError;\n }\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n private customValidationMessage = '';\n\n get form() {\n return this.internals.form;\n }\n\n get labels() {\n return this.internals.labels;\n }\n\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n get validity() {\n this.syncValidity();\n return this.internals.validity;\n }\n\n get value() {\n this[VALUE] = this.component.value;\n return this[VALUE];\n }\n\n set value(value: string) {\n if (isServer) return;\n this.component.value = value;\n }\n\n [VALUE] = '';\n\n get validationMessage() {\n this.syncValidity();\n return this.internals.validationMessage;\n }\n\n private handleSelection() {\n this.internals.setFormValue(this.component.value);\n this.syncValidity();\n }\n\n async getUpdateComplete(): Promise<boolean> {\n await super.getUpdateComplete();\n await this.component.updateComplete;\n this.internals.setFormValue(this.component.value);\n return true;\n }\n\n protected override updated(changed: PropertyValues<Select>) {\n if (changed.has('required')) {\n this.syncValidity();\n }\n }\n\n private getErrorText() {\n return this.error ? this.errorText : this.nativeErrorText;\n }\n\n private async syncValidity() {\n const valueMissing = this.required && !this.component.value;\n const customError = !!this.customValidationMessage;\n const validationMessage =\n this.customValidationMessage ||\n (valueMissing && this.getRequiredValidationMessage()) ||\n '';\n\n this.internals.setValidity(\n { valueMissing, customError },\n validationMessage,\n this.component\n );\n }\n\n // Returns the platform `<select>` validation message for i18n.\n // eslint-disable-next-line class-methods-use-this\n private getRequiredValidationMessage() {\n const select = document.createElement('select');\n select.required = true;\n return select.validationMessage;\n }\n\n checkValidity() {\n this.syncValidity();\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n return this.component.reportValidity();\n }\n\n setCustomValidity(error: string) {\n this.customValidationMessage = error;\n this.syncValidity();\n }\n\n /**\n * Reset the select to its default value.\n */\n reset() {\n this.component.reset();\n }\n\n /** @private */\n formResetCallback() {\n this.reset();\n }\n\n /** @private */\n formStateRestoreCallback(newState: string) {\n this.value = newState;\n }\n\n override render() {\n const tag: StaticValue = this.filled\n ? literal`md-filled-select`\n : literal`md-outlined-select`;\n\n const ariaLabel = this.label || (this as ARIAMixinStrict).ariaLabel;\n\n return staticHtml`<${tag}\n ?disabled=${this.disabled}\n ?quick=${this.quick}\n ?error=${this.hasError}\n ?required=${this.required}\n ?has-leading-icon=${this.leadingIcon.length > 0}\n aria-label=${ariaLabel || nothing}\n tabindex=${ifDefined(this.disabled ? undefined : '0')}\n menu-positioning=${this.menuPositioning}\n typeahead-delay=${this.typeaheadDelay}\n supporting-text=${this.supportingText}\n error-text=${this.getErrorText()}\n selected-index=${this.selectedIndex}\n display-text=${this.displayText}\n label=${this.label}\n name=${this.name}\n @request-selection=${this.handleSelection}\n class=\"select\"\n >\n <slot></slot>\n ${\n this.leadingIcon\n ? html`<ix-icon slot=\"leading-icon\">${this.leadingIcon}</ix-icon>`\n : nothing\n }\n ${\n this.trailingIcon\n ? html`<ix-icon slot=\"trailing-icon\"\n >${this.trailingIcon}</ix-icon\n >`\n : nothing\n }\n </${tag}>`;\n }\n}\n"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent ix-select following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "interxion",
6
- "version": "1.0.7",
6
+ "version": "1.0.8",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -30,6 +30,7 @@
30
30
  "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
31
31
  },
32
32
  "dependencies": {
33
+ "@digital-realty/ix-icon": "*",
33
34
  "@lit-labs/react": "^2.0.3",
34
35
  "@material/web": "^1.0.0",
35
36
  "lit": "^2.0.2",
@@ -76,6 +77,9 @@
76
77
  "ignorePackages": true
77
78
  }
78
79
  ]
80
+ },
81
+ "globals": {
82
+ "ShadowRootInit": true
79
83
  }
80
84
  },
81
85
  "prettier": {
@@ -100,5 +104,5 @@
100
104
  "README.md",
101
105
  "LICENSE"
102
106
  ],
103
- "gitHead": "c4a9f3abe2ba82b4fd192ce53abc4d2bcbc66b7f"
107
+ "gitHead": "dfeb7c40d2849123ee4443ef78df6972ea3aa4cf"
104
108
  }