@material/web 1.0.0-pre.11 → 1.0.0-pre.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -1
- package/button/lib/_icon.scss +9 -9
- package/button/lib/_outlined-button.scss +4 -0
- package/button/lib/button.d.ts +0 -6
- package/button/lib/button.js +2 -14
- package/button/lib/button.js.map +1 -1
- package/button/lib/elevated-styles.css.js +1 -1
- package/button/lib/elevated-styles.css.js.map +1 -1
- package/button/lib/filled-styles.css.js +1 -1
- package/button/lib/filled-styles.css.js.map +1 -1
- package/button/lib/outlined-styles.css.js +1 -1
- package/button/lib/outlined-styles.css.js.map +1 -1
- package/button/lib/shared-styles.css.js +1 -1
- package/button/lib/shared-styles.css.js.map +1 -1
- package/button/lib/text-styles.css.js +1 -1
- package/button/lib/text-styles.css.js.map +1 -1
- package/button/lib/tonal-styles.css.js +1 -1
- package/button/lib/tonal-styles.css.js.map +1 -1
- package/chips/assist-chip.js +2 -1
- package/chips/assist-chip.js.map +1 -1
- package/chips/filter-chip.js +3 -1
- package/chips/filter-chip.js.map +1 -1
- package/chips/harness.d.ts +2 -5
- package/chips/harness.js +9 -6
- package/chips/harness.js.map +1 -1
- package/chips/input-chip.js +5 -1
- package/chips/input-chip.js.map +1 -1
- package/chips/lib/_elevated.scss +14 -0
- package/chips/lib/_selectable.scss +8 -0
- package/chips/lib/_shared.scss +1 -0
- package/chips/lib/_trailing-icon.scss +1 -1
- package/chips/lib/assist-chip.d.ts +1 -0
- package/chips/lib/assist-chip.js +1 -0
- package/chips/lib/assist-chip.js.map +1 -1
- package/chips/lib/assist-forced-colors-styles.css.d.ts +1 -0
- package/chips/lib/assist-forced-colors-styles.css.js +9 -0
- package/chips/lib/assist-forced-colors-styles.css.js.map +1 -0
- package/chips/lib/assist-forced-colors-styles.scss +27 -0
- package/chips/lib/chip-set.js +4 -4
- package/chips/lib/chip-set.js.map +1 -1
- package/chips/lib/elevated-styles.css.js +1 -1
- package/chips/lib/elevated-styles.css.js.map +1 -1
- package/chips/lib/filter-chip.d.ts +1 -0
- package/chips/lib/filter-chip.js +2 -1
- package/chips/lib/filter-chip.js.map +1 -1
- package/chips/lib/filter-forced-colors-styles.css.d.ts +1 -0
- package/chips/lib/filter-forced-colors-styles.css.js +9 -0
- package/chips/lib/filter-forced-colors-styles.css.js.map +1 -0
- package/chips/lib/filter-forced-colors-styles.scss +34 -0
- package/chips/lib/input-chip.d.ts +2 -0
- package/chips/lib/input-chip.js +4 -2
- package/chips/lib/input-chip.js.map +1 -1
- package/chips/lib/input-forced-colors-styles.css.d.ts +1 -0
- package/chips/lib/input-forced-colors-styles.css.js +9 -0
- package/chips/lib/input-forced-colors-styles.css.js.map +1 -0
- package/chips/lib/input-forced-colors-styles.scss +39 -0
- package/chips/lib/input-styles.css.js +1 -1
- package/chips/lib/input-styles.css.js.map +1 -1
- package/chips/lib/selectable-styles.css.js +1 -1
- package/chips/lib/selectable-styles.css.js.map +1 -1
- package/chips/lib/shared-styles.css.js +1 -1
- package/chips/lib/shared-styles.css.js.map +1 -1
- package/chips/lib/suggestion-forced-colors-styles.css.d.ts +1 -0
- package/chips/lib/suggestion-forced-colors-styles.css.js +9 -0
- package/chips/lib/suggestion-forced-colors-styles.css.js.map +1 -0
- package/chips/lib/suggestion-forced-colors-styles.scss +27 -0
- package/chips/lib/trailing-icon-styles.css.js +1 -1
- package/chips/lib/trailing-icon-styles.css.js.map +1 -1
- package/chips/suggestion-chip.js +2 -1
- package/chips/suggestion-chip.js.map +1 -1
- package/dialog/lib/_dialog.scss +2 -2
- package/dialog/lib/_tokens.scss +5 -22
- package/dialog/lib/dialog-styles.css.js +1 -1
- package/dialog/lib/dialog-styles.css.js.map +1 -1
- package/dialog/lib/dialog.d.ts +9 -3
- package/dialog/lib/dialog.js +24 -16
- package/dialog/lib/dialog.js.map +1 -1
- package/fab/branded-fab.d.ts +1 -0
- package/fab/lib/_fab.scss +12 -0
- package/fab/lib/fab-styles.css.js +1 -1
- package/fab/lib/fab-styles.css.js.map +1 -1
- package/fab/lib/fab.d.ts +1 -0
- package/fab/lib/shared.d.ts +9 -0
- package/fab/lib/shared.js +23 -2
- package/fab/lib/shared.js.map +1 -1
- package/field/lib/_supporting-text.scss +6 -16
- package/field/lib/field.d.ts +26 -2
- package/field/lib/field.js +100 -15
- package/field/lib/field.js.map +1 -1
- package/field/lib/outlined-field.d.ts +1 -2
- package/field/lib/outlined-field.js.map +1 -1
- package/field/lib/shared-styles.css.js +1 -1
- package/field/lib/shared-styles.css.js.map +1 -1
- package/iconbutton/lib/icon-button.js +1 -1
- package/iconbutton/lib/icon-button.js.map +1 -1
- package/labs/navigationbar/lib/navigation-bar.js +2 -2
- package/labs/navigationbar/lib/navigation-bar.js.map +1 -1
- package/labs/navigationtab/lib/navigation-tab.js +3 -3
- package/labs/navigationtab/lib/navigation-tab.js.map +1 -1
- package/labs/segmentedbutton/lib/_shared.scss +7 -7
- package/labs/segmentedbutton/lib/outlined-styles.css.js +1 -1
- package/labs/segmentedbutton/lib/outlined-styles.css.js.map +1 -1
- package/labs/segmentedbutton/lib/segmented-button.js +2 -2
- package/labs/segmentedbutton/lib/segmented-button.js.map +1 -1
- package/labs/segmentedbutton/lib/shared-styles.css.js +1 -1
- package/labs/segmentedbutton/lib/shared-styles.css.js.map +1 -1
- package/labs/segmentedbuttonset/lib/outlined-styles.css.js +1 -1
- package/labs/segmentedbuttonset/lib/outlined-styles.css.js.map +1 -1
- package/list/harness.d.ts +24 -0
- package/list/harness.js +25 -0
- package/list/harness.js.map +1 -1
- package/list/lib/list.d.ts +28 -10
- package/list/lib/list.js +57 -19
- package/list/lib/list.js.map +1 -1
- package/list/lib/listitem/harness.d.ts +21 -1
- package/list/lib/listitem/harness.js +16 -2
- package/list/lib/listitem/harness.js.map +1 -1
- package/list/lib/listitem/list-item.js +4 -4
- package/list/lib/listitem/list-item.js.map +1 -1
- package/list/lib/listitemlink/list-item-link-only.d.ts +1 -0
- package/list/lib/listitemlink/list-item-link-only.js +4 -1
- package/list/lib/listitemlink/list-item-link-only.js.map +1 -1
- package/menu/harness.js.map +1 -1
- package/menu/lib/menu.d.ts +15 -1
- package/menu/lib/menu.js +29 -6
- package/menu/lib/menu.js.map +1 -1
- package/package.json +5 -4
- package/radio/lib/single-selection-controller.js +2 -3
- package/radio/lib/single-selection-controller.js.map +1 -1
- package/select/harness.js +1 -1
- package/select/harness.js.map +1 -1
- package/select/lib/_shared.scss +2 -1
- package/select/lib/select.d.ts +1 -11
- package/select/lib/select.js +15 -51
- package/select/lib/select.js.map +1 -1
- package/select/lib/shared-styles.css.js +1 -1
- package/select/lib/shared-styles.css.js.map +1 -1
- package/slider/lib/slider.d.ts +3 -3
- package/slider/lib/slider.js +10 -10
- package/slider/lib/slider.js.map +1 -1
- package/switch/lib/switch.js +1 -1
- package/switch/lib/switch.js.map +1 -1
- package/tabs/lib/tab.js +4 -2
- package/tabs/lib/tab.js.map +1 -1
- package/tabs/lib/tabs.js +3 -1
- package/tabs/lib/tabs.js.map +1 -1
- package/textfield/lib/_shared.scss +0 -4
- package/textfield/lib/shared-styles.css.js +1 -1
- package/textfield/lib/shared-styles.css.js.map +1 -1
- package/textfield/lib/text-field.d.ts +2 -13
- package/textfield/lib/text-field.js +44 -98
- package/textfield/lib/text-field.js.map +1 -1
- package/tokens/_md-comp-dialog.scss +48 -6
- package/tokens/_md-comp-elevated-button.scss +17 -7
- package/tokens/_md-comp-elevation.scss +11 -2
- package/tokens/_md-comp-filled-button.scss +17 -7
- package/tokens/_md-comp-filled-tonal-button.scss +17 -7
- package/tokens/_md-comp-input-chip.scss +7 -0
- package/tokens/_md-comp-list-item.scss +5 -0
- package/tokens/_md-comp-menu-item.scss +1 -0
- package/tokens/_md-comp-outlined-button.scss +19 -9
- package/tokens/_md-comp-outlined-segmented-button.scss +19 -13
- package/tokens/_md-comp-slider.scss +48 -2
- package/tokens/_md-comp-suggestion-chip.scss +1 -0
- package/tokens/_md-comp-text-button.scss +17 -7
- package/tokens/_values.scss +1 -1
package/select/lib/select.d.ts
CHANGED
|
@@ -60,7 +60,7 @@ export declare abstract class Select extends LitElement {
|
|
|
60
60
|
* The max time between the keystrokes of the typeahead select / menu behavior
|
|
61
61
|
* before it clears the typeahead buffer.
|
|
62
62
|
*/
|
|
63
|
-
|
|
63
|
+
typeaheadDelay: number;
|
|
64
64
|
/**
|
|
65
65
|
* Whether or not the text field has a leading icon. Used for SSR.
|
|
66
66
|
*/
|
|
@@ -73,12 +73,6 @@ export declare abstract class Select extends LitElement {
|
|
|
73
73
|
* Text to display in the field. Only set for SSR.
|
|
74
74
|
*/
|
|
75
75
|
displayText: string;
|
|
76
|
-
/**
|
|
77
|
-
* When set to true, the error text's `role="alert"` will be removed, then
|
|
78
|
-
* re-added after an animation frame. This will re-announce an error message
|
|
79
|
-
* to screen readers.
|
|
80
|
-
*/
|
|
81
|
-
private refreshErrorAlert;
|
|
82
76
|
private focused;
|
|
83
77
|
private open;
|
|
84
78
|
private readonly field;
|
|
@@ -132,9 +126,6 @@ export declare abstract class Select extends LitElement {
|
|
|
132
126
|
private renderLeadingIcon;
|
|
133
127
|
private renderTrailingIcon;
|
|
134
128
|
private renderLabel;
|
|
135
|
-
private renderSupportingText;
|
|
136
|
-
private getSupportingText;
|
|
137
|
-
private shouldErrorAnnounce;
|
|
138
129
|
private renderMenu;
|
|
139
130
|
private renderMenuContent;
|
|
140
131
|
/**
|
|
@@ -165,7 +156,6 @@ export declare abstract class Select extends LitElement {
|
|
|
165
156
|
private updateValueAndDisplayText;
|
|
166
157
|
protected update(changed: PropertyValues<this>): void;
|
|
167
158
|
protected firstUpdated(changed: PropertyValues<this>): Promise<void>;
|
|
168
|
-
protected updated(changedProperties: PropertyValues): void;
|
|
169
159
|
/**
|
|
170
160
|
* Focuses and activates the last selected item upon opening, and resets other
|
|
171
161
|
* active items.
|
package/select/lib/select.js
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
var _a;
|
|
7
7
|
import { __decorate } from "tslib";
|
|
8
8
|
import '../../menu/menu.js';
|
|
9
|
-
import { html, LitElement
|
|
9
|
+
import { html, LitElement } from 'lit';
|
|
10
10
|
import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
|
|
11
11
|
import { classMap } from 'lit/directives/class-map.js';
|
|
12
12
|
import { html as staticHtml } from 'lit/static-html.js';
|
|
@@ -70,7 +70,7 @@ export class Select extends LitElement {
|
|
|
70
70
|
* The max time between the keystrokes of the typeahead select / menu behavior
|
|
71
71
|
* before it clears the typeahead buffer.
|
|
72
72
|
*/
|
|
73
|
-
this.
|
|
73
|
+
this.typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;
|
|
74
74
|
/**
|
|
75
75
|
* Whether or not the text field has a leading icon. Used for SSR.
|
|
76
76
|
*/
|
|
@@ -83,12 +83,6 @@ export class Select extends LitElement {
|
|
|
83
83
|
* Text to display in the field. Only set for SSR.
|
|
84
84
|
*/
|
|
85
85
|
this.displayText = '';
|
|
86
|
-
/**
|
|
87
|
-
* When set to true, the error text's `role="alert"` will be removed, then
|
|
88
|
-
* re-added after an animation frame. This will re-announce an error message
|
|
89
|
-
* to screen readers.
|
|
90
|
-
*/
|
|
91
|
-
this.refreshErrorAlert = false;
|
|
92
86
|
this.focused = false;
|
|
93
87
|
this.open = false;
|
|
94
88
|
this[_a] = '';
|
|
@@ -166,6 +160,7 @@ export class Select extends LitElement {
|
|
|
166
160
|
};
|
|
167
161
|
}
|
|
168
162
|
renderField() {
|
|
163
|
+
// TODO(b/290078041): add aria-label/describedby
|
|
169
164
|
return staticHtml `
|
|
170
165
|
<${this.fieldTag}
|
|
171
166
|
aria-haspopup="listbox"
|
|
@@ -181,6 +176,8 @@ export class Select extends LitElement {
|
|
|
181
176
|
.error=${this.error}
|
|
182
177
|
.hasStart=${this.hasLeadingIcon}
|
|
183
178
|
.hasEnd=${this.hasTrailingIcon}
|
|
179
|
+
supporting-text=${this.supportingText}
|
|
180
|
+
error-text=${this.errorText}
|
|
184
181
|
@keydown =${this.handleKeydown}
|
|
185
182
|
@click=${this.handleClick}
|
|
186
183
|
@focus=${this.handleFocus}
|
|
@@ -193,7 +190,6 @@ export class Select extends LitElement {
|
|
|
193
190
|
this.renderLeadingIcon(),
|
|
194
191
|
this.renderLabel(),
|
|
195
192
|
this.renderTrailingIcon(),
|
|
196
|
-
this.renderSupportingText(),
|
|
197
193
|
];
|
|
198
194
|
}
|
|
199
195
|
renderLeadingIcon() {
|
|
@@ -217,25 +213,6 @@ export class Select extends LitElement {
|
|
|
217
213
|
id="label"
|
|
218
214
|
class="label">${this.displayText || html ` `}</div>`;
|
|
219
215
|
}
|
|
220
|
-
renderSupportingText() {
|
|
221
|
-
const text = this.getSupportingText();
|
|
222
|
-
if (!text) {
|
|
223
|
-
return nothing;
|
|
224
|
-
}
|
|
225
|
-
return html `<span id="support"
|
|
226
|
-
slot="supporting-text"
|
|
227
|
-
role=${this.shouldErrorAnnounce() ? 'alert' : nothing}>${text}</span>`;
|
|
228
|
-
}
|
|
229
|
-
getSupportingText() {
|
|
230
|
-
return this.error && this.errorText ? this.errorText : this.supportingText;
|
|
231
|
-
}
|
|
232
|
-
shouldErrorAnnounce() {
|
|
233
|
-
// Announce if there is an error and error text visible.
|
|
234
|
-
// If refreshErrorAlert is true, do not announce. This will remove the
|
|
235
|
-
// role="alert" attribute. Another render cycle will happen after an
|
|
236
|
-
// animation frame to re-add the role.
|
|
237
|
-
return this.error && !!this.errorText && !this.refreshErrorAlert;
|
|
238
|
-
}
|
|
239
216
|
renderMenu() {
|
|
240
217
|
return html `
|
|
241
218
|
<md-menu
|
|
@@ -248,7 +225,7 @@ export class Select extends LitElement {
|
|
|
248
225
|
.open=${this.open}
|
|
249
226
|
.quick=${this.quick}
|
|
250
227
|
.fixed=${this.menuFixed}
|
|
251
|
-
.
|
|
228
|
+
.typeaheadDelay=${this.typeaheadDelay}
|
|
252
229
|
@opening=${this.handleOpening}
|
|
253
230
|
@closing=${this.handleClosing}
|
|
254
231
|
@close-menu=${this.handleCloseMenu}
|
|
@@ -375,16 +352,6 @@ export class Select extends LitElement {
|
|
|
375
352
|
}
|
|
376
353
|
super.firstUpdated(changed);
|
|
377
354
|
}
|
|
378
|
-
updated(changedProperties) {
|
|
379
|
-
// Keep changedProperties arg so that subclasses may call it
|
|
380
|
-
if (this.refreshErrorAlert) {
|
|
381
|
-
// The past render cycle removed the role="alert" from the error message.
|
|
382
|
-
// Re-add it after an animation frame to re-announce the error.
|
|
383
|
-
requestAnimationFrame(() => {
|
|
384
|
-
this.refreshErrorAlert = false;
|
|
385
|
-
});
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
355
|
/**
|
|
389
356
|
* Focuses and activates the last selected item upon opening, and resets other
|
|
390
357
|
* active items.
|
|
@@ -533,35 +500,32 @@ __decorate([
|
|
|
533
500
|
property({ type: Boolean, reflect: true })
|
|
534
501
|
], Select.prototype, "disabled", void 0);
|
|
535
502
|
__decorate([
|
|
536
|
-
property({ type: String })
|
|
503
|
+
property({ type: String, attribute: 'error-text' })
|
|
537
504
|
], Select.prototype, "errorText", void 0);
|
|
538
505
|
__decorate([
|
|
539
506
|
property()
|
|
540
507
|
], Select.prototype, "label", void 0);
|
|
541
508
|
__decorate([
|
|
542
|
-
property({ type: String })
|
|
509
|
+
property({ type: String, attribute: 'supporting-text' })
|
|
543
510
|
], Select.prototype, "supportingText", void 0);
|
|
544
511
|
__decorate([
|
|
545
512
|
property({ type: Boolean, reflect: true })
|
|
546
513
|
], Select.prototype, "error", void 0);
|
|
547
514
|
__decorate([
|
|
548
|
-
property({ type: Boolean })
|
|
515
|
+
property({ type: Boolean, attribute: 'menu-fixed' })
|
|
549
516
|
], Select.prototype, "menuFixed", void 0);
|
|
550
517
|
__decorate([
|
|
551
|
-
property({ type: Number })
|
|
552
|
-
], Select.prototype, "
|
|
518
|
+
property({ type: Number, attribute: 'typeahead-delay' })
|
|
519
|
+
], Select.prototype, "typeaheadDelay", void 0);
|
|
553
520
|
__decorate([
|
|
554
|
-
property({ type: Boolean })
|
|
521
|
+
property({ type: Boolean, attribute: 'has-leading-icon' })
|
|
555
522
|
], Select.prototype, "hasLeadingIcon", void 0);
|
|
556
523
|
__decorate([
|
|
557
|
-
property({ type: Boolean })
|
|
524
|
+
property({ type: Boolean, attribute: 'has-trailing-icon' })
|
|
558
525
|
], Select.prototype, "hasTrailingIcon", void 0);
|
|
559
526
|
__decorate([
|
|
560
|
-
property()
|
|
527
|
+
property({ attribute: 'display-text' })
|
|
561
528
|
], Select.prototype, "displayText", void 0);
|
|
562
|
-
__decorate([
|
|
563
|
-
state()
|
|
564
|
-
], Select.prototype, "refreshErrorAlert", void 0);
|
|
565
529
|
__decorate([
|
|
566
530
|
state()
|
|
567
531
|
], Select.prototype, "focused", void 0);
|
|
@@ -584,6 +548,6 @@ __decorate([
|
|
|
584
548
|
property()
|
|
585
549
|
], Select.prototype, "value", null);
|
|
586
550
|
__decorate([
|
|
587
|
-
property({ type: Number })
|
|
551
|
+
property({ type: Number, attribute: 'selected-index' })
|
|
588
552
|
], Select.prototype, "selectedIndex", null);
|
|
589
553
|
//# sourceMappingURL=select.js.map
|
package/select/lib/select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sourceRoot":"","sources":["select.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../menu/menu.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {html as staticHtml, StaticValue} from 'lit/static-html.js';\n\nimport {Field} from '../../field/lib/field.js';\nimport {List} from '../../list/lib/list.js';\nimport {DEFAULT_TYPEAHEAD_BUFFER_TIME, Menu} from '../../menu/lib/menu.js';\nimport {DefaultCloseMenuEvent, isElementInSubtree, isSelectableKey} from '../../menu/lib/shared.js';\nimport {TYPEAHEAD_RECORD} from '../../menu/lib/typeaheadController.js';\n\nimport {getSelectedItems, RequestDeselectionEvent, RequestSelectionEvent, SelectOption, SelectOptionRecord} from './shared.js';\n\nconst VALUE = Symbol('value');\n\n/**\n * @fires input Fired when a selection is made by the user via mouse or keyboard\n * interaction.\n * @fires change Fired when a selection is made by the user via mouse or\n * keyboard interaction.\n */\nexport abstract class Select extends LitElement {\n /**\n * Opens the menu synchronously with no animation.\n */\n @property({type: Boolean}) quick = false;\n /**\n * Whether or not the select is required.\n */\n @property({type: Boolean}) required = false;\n /**\n * Disables the select.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\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 * Calling `reportValidity()` will automatically update `errorText` to the\n * native `validationMessage`.\n */\n @property({type: String}) errorText = '';\n /**\n * The floating label for the field.\n */\n @property() label = '';\n /**\n * Conveys additional information below the text field, such as how it should\n * be used.\n */\n @property({type: String}) supportingText = '';\n /**\n * Gets or sets whether or not the text field is in a visually invalid state.\n *\n * Calling `reportValidity()` will automatically update `error`.\n */\n @property({type: Boolean, reflect: true}) error = false;\n /**\n * Whether or not the underlying md-menu should be position: fixed to display\n * in a top-level manner.\n */\n @property({type: Boolean}) menuFixed = false;\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}) typeaheadBufferTime = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n /**\n * Whether or not the text field has a leading icon. Used for SSR.\n */\n @property({type: Boolean}) hasLeadingIcon = false;\n /**\n * Whether or not the text field has a trailing icon. Used for SSR.\n */\n @property({type: Boolean}) hasTrailingIcon = false;\n /**\n * Text to display in the field. Only set for SSR.\n */\n @property() displayText = '';\n /**\n * When set to true, the error text's `role=\"alert\"` will be removed, then\n * re-added after an animation frame. This will re-announce an error message\n * to screen readers.\n */\n @state() private refreshErrorAlert = false;\n @state() private focused = false;\n @state() private open = false;\n @query('.field') private readonly field!: Field|null;\n @query('md-menu') private readonly menu!: Menu|null;\n @queryAssignedElements({slot: 'leadingicon', flatten: true})\n private readonly leadingIcons!: Element[];\n @queryAssignedElements({slot: 'trailingicon', flatten: true})\n private readonly trailingIcons!: Element[];\n\n /**\n * The value of the currently selected option.\n *\n * Note: For SSR, set `[selected]` on the requested option and `displayText`\n * rather than setting `value` setting `value` will incur a DOM query.\n */\n @property()\n get value(): string {\n return this[VALUE];\n }\n\n set value(value: string) {\n this.lastUserSetValue = value;\n this.select(value);\n }\n\n [VALUE] = '';\n\n get options() {\n // NOTE: this does a DOM query.\n return (this.menu?.items ?? []) as SelectOption[];\n }\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})\n get selectedIndex(): number {\n // tslint:disable-next-line:enforce-name-casing\n const [_option, index] = (this.getSelectedOptions() ?? [])[0] ?? [];\n return index ?? -1;\n }\n\n set selectedIndex(index: number) {\n this.lastUserSetSelectedIndex = index;\n this.selectIndex(index);\n }\n\n /**\n * Returns an array of selected options.\n *\n * NOTE: md-select only suppoprts single selection.\n */\n get selectedOptions() {\n return (this.getSelectedOptions() ?? []).map(([option]) => option);\n }\n\n protected abstract readonly fieldTag: StaticValue;\n\n /**\n * Used for initializing select when the user sets the `value` directly.\n */\n private lastUserSetValue: string|null = null;\n\n /**\n * Used for initializing select when the user sets the `selectedIndex`\n * directly.\n */\n private lastUserSetSelectedIndex: number|null = null;\n\n /**\n * Used for `input` and `change` event change detection.\n */\n private lastSelectedOption: SelectOption|null = null;\n\n // tslint:disable-next-line:enforce-name-casing\n private lastSelectedOptionRecords: SelectOptionRecord[] = [];\n\n protected override render() {\n return html`\n <span\n class=\"select ${classMap(this.getRenderClasses())}\"\n @focusout=${this.handleFocusout}>\n ${this.renderField()}\n ${this.renderMenu()}\n </span>\n `;\n }\n\n private getRenderClasses() {\n return {\n 'disabled': this.disabled,\n 'error': this.error,\n };\n }\n\n private renderField() {\n return staticHtml`\n <${this.fieldTag}\n aria-haspopup=\"listbox\"\n role=\"combobox\"\n tabindex=${this.disabled ? '-1' : '0'}\n aria-expanded=${this.open ? 'true' : 'false'}\n class=\"field\"\n label=${this.label}\n .focused=${this.focused || this.open}\n .populated=${!!this.displayText}\n .disabled=${this.disabled}\n .required=${this.required}\n .error=${this.error}\n .hasStart=${this.hasLeadingIcon}\n .hasEnd=${this.hasTrailingIcon}\n @keydown =${this.handleKeydown}\n @click=${this.handleClick}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}>\n ${this.renderFieldContent()}\n </${this.fieldTag}>`;\n }\n\n private renderFieldContent() {\n return [\n this.renderLeadingIcon(),\n this.renderLabel(),\n this.renderTrailingIcon(),\n this.renderSupportingText(),\n ];\n }\n\n private renderLeadingIcon() {\n return html`\n <span class=\"icon leading\" slot=\"start\">\n <slot name=\"leadingicon\" @slotchange=${this.handleIconChange}></slot>\n </span>\n `;\n }\n\n private renderTrailingIcon() {\n return html`\n <span class=\"icon trailing\" slot=\"end\">\n <slot name=\"trailingicon\" @slotchange=${this.handleIconChange}></slot>\n </span>\n `;\n }\n\n private renderLabel() {\n // need to render so that line-height can apply and give it a\n // non-zero height\n return html`<div\n id=\"label\"\n class=\"label\">${this.displayText || html` `}</div>`;\n }\n\n private renderSupportingText() {\n const text = this.getSupportingText();\n if (!text) {\n return nothing;\n }\n\n return html`<span id=\"support\"\n slot=\"supporting-text\"\n role=${this.shouldErrorAnnounce() ? 'alert' : nothing}>${text}</span>`;\n }\n\n private getSupportingText() {\n return this.error && this.errorText ? this.errorText : this.supportingText;\n }\n\n private shouldErrorAnnounce() {\n // Announce if there is an error and error text visible.\n // If refreshErrorAlert is true, do not announce. This will remove the\n // role=\"alert\" attribute. Another render cycle will happen after an\n // animation frame to re-add the role.\n return this.error && !!this.errorText && !this.refreshErrorAlert;\n }\n\n private renderMenu() {\n return html`\n <md-menu\n id=\"listbox\"\n default-focus=\"NONE\"\n listTabIndex=\"-1\"\n type=\"listbox\"\n stay-open-on-focusout\n .anchor=${this.field}\n .open=${this.open}\n .quick=${this.quick}\n .fixed=${this.menuFixed}\n .typeaheadBufferTime=${this.typeaheadBufferTime}\n @opening=${this.handleOpening}\n @closing=${this.handleClosing}\n @close-menu=${this.handleCloseMenu}\n @request-selection=${this.handleRequestSelection}\n @request-deselection=${this.handleRequestDeselection}>\n ${this.renderMenuContent()}\n </md-menu>`;\n }\n\n private renderMenuContent() {\n return html`<slot></slot>`;\n }\n\n /**\n * Handles opening the select on keydown and typahead selection when the menu\n * is closed.\n */\n private handleKeydown(e: KeyboardEvent) {\n if (this.open || this.disabled || !this.menu) {\n return;\n }\n\n const typeaheadController = this.menu.typeaheadController;\n const isOpenKey =\n e.code === 'Space' || e.code === 'ArrowDown' || e.code === 'Enter';\n\n // Do not open if currently typing ahead because the user may be typing the\n // spacebar to match a word with a space\n if (!typeaheadController.isTypingAhead && isOpenKey) {\n e.preventDefault();\n this.open = true;\n return;\n }\n\n const isPrintableKey = e.key.length === 1;\n\n // Handles typing ahead when the menu is closed by delegating the event to\n // the underlying menu's typeaheadController\n if (isPrintableKey) {\n typeaheadController.onKeydown(e);\n e.preventDefault();\n\n const {lastActiveRecord} = typeaheadController;\n\n if (!lastActiveRecord) {\n return;\n }\n\n const hasChanged = this.selectItem(\n lastActiveRecord[TYPEAHEAD_RECORD.ITEM] as SelectOption);\n\n if (hasChanged) {\n this.dispatchInteractionEvents();\n }\n }\n }\n\n private handleClick() {\n this.open = true;\n }\n\n private handleFocus() {\n this.focused = true;\n }\n\n private handleBlur() {\n this.focused = false;\n }\n\n /**\n * Handles closing the menu when the focus leaves the select's subtree.\n */\n private handleFocusout(e: FocusEvent) {\n // Don't close the menu if we are switching focus between menu,\n // select-option, and field\n if (e.relatedTarget && isElementInSubtree(e.relatedTarget, this)) {\n return;\n }\n\n this.open = false;\n }\n\n /**\n * Gets a list of all selected select options as a list item record array.\n *\n * @return An array of selected list option records.\n */\n private getSelectedOptions() {\n if (!this.menu) {\n this.lastSelectedOptionRecords = [];\n return null;\n }\n\n const items = this.menu.items as SelectOption[];\n this.lastSelectedOptionRecords = getSelectedItems(items);\n return this.lastSelectedOptionRecords;\n }\n\n override async getUpdateComplete() {\n await this.menu?.updateComplete;\n return super.getUpdateComplete();\n }\n\n /**\n * Gets the selected options from the DOM, and updates the value and display\n * text to the first selected option's value and headline respectively.\n *\n * @return Whether or not the selected option has changed since last update.\n */\n private updateValueAndDisplayText() {\n const selectedOptions = this.getSelectedOptions() ?? [];\n // Used to determine whether or not we need to fire an input / change event\n // which fire whenever the option element changes (value or selectedIndex)\n // on user interaction.\n let hasSelectedOptionChanged = false;\n\n if (selectedOptions.length) {\n const [firstSelectedOption] = selectedOptions[0];\n hasSelectedOptionChanged =\n this.lastSelectedOption !== firstSelectedOption;\n this.lastSelectedOption = firstSelectedOption;\n this[VALUE] = firstSelectedOption.value;\n this.displayText = firstSelectedOption.headline;\n\n } else {\n hasSelectedOptionChanged = this.lastSelectedOption !== null;\n this.lastSelectedOption = null;\n this[VALUE] = '';\n this.displayText = '';\n }\n\n return hasSelectedOptionChanged;\n }\n\n protected override update(changed: PropertyValues<this>) {\n // In SSR the options will be ready to query, so try to figure out what\n // the value and display text should be.\n if (!this.hasUpdated) {\n this.initUserSelection();\n }\n\n super.update(changed);\n }\n\n protected override async firstUpdated(changed: PropertyValues<this>) {\n await this.menu?.updateComplete;\n // If this has been handled on update already due to SSR, try again.\n if (!this.lastSelectedOptionRecords.length) {\n this.initUserSelection();\n }\n\n super.firstUpdated(changed);\n }\n\n protected override updated(changedProperties: PropertyValues) {\n // Keep changedProperties arg so that subclasses may call it\n\n if (this.refreshErrorAlert) {\n // The past render cycle removed the role=\"alert\" from the error message.\n // Re-add it after an animation frame to re-announce the error.\n requestAnimationFrame(() => {\n this.refreshErrorAlert = false;\n });\n }\n }\n\n /**\n * Focuses and activates the last selected item upon opening, and resets other\n * active items.\n */\n private async handleOpening() {\n const items = this.menu!.items;\n const activeItem = List.getActiveItem(items)?.item;\n const [selectedItem] = this.lastSelectedOptionRecords[0] ?? [null];\n\n // This is true if the user keys through the list but clicks out of the menu\n // thus no close-menu event is fired by an item and we can't clean up in\n // handleCloseMenu.\n if (activeItem && activeItem !== selectedItem) {\n activeItem.active = false;\n }\n\n if (selectedItem) {\n selectedItem.active = true;\n selectedItem.focus();\n }\n }\n\n private handleClosing() {\n this.open = false;\n }\n\n /**\n * Determines the reason for closing, and updates the UI accordingly.\n */\n private handleCloseMenu(e: InstanceType<typeof DefaultCloseMenuEvent>) {\n const reason = e.reason;\n const item = e.itemPath[0] as SelectOption;\n this.open = false;\n let hasChanged = false;\n\n if (reason.kind === 'CLICK_SELECTION') {\n hasChanged = this.selectItem(item);\n } else if (reason.kind === 'KEYDOWN' && isSelectableKey(reason.key)) {\n hasChanged = this.selectItem(item);\n } else {\n // This can happen on ESC being pressed\n item.active = false;\n item.blur();\n }\n\n // Dispatch interaction events since selection has been made via keyboard\n // or mouse.\n if (hasChanged) {\n this.dispatchInteractionEvents();\n }\n }\n\n /**\n * Selects a given option, deselects other options, and updates the UI.\n *\n * @return Whether the last selected option has changed.\n */\n private selectItem(item: SelectOption) {\n this.lastSelectedOptionRecords.forEach(([option]) => {\n if (item !== option) {\n option.selected = false;\n }\n });\n item.selected = true;\n\n return this.updateValueAndDisplayText();\n }\n\n /**\n * Handles updating selection when an option element requests selection via\n * property / attribute change.\n */\n private handleRequestSelection(e: RequestSelectionEvent) {\n const requestingOptionEl = e.target as SelectOption & HTMLElement;\n\n // No-op if this item is already selected.\n if (this.lastSelectedOptionRecords.some(\n ([option]) => option === requestingOptionEl)) {\n return;\n }\n\n this.selectItem(requestingOptionEl);\n }\n\n /**\n * Handles updating selection when an option element requests deselection via\n * property / attribute change.\n */\n private handleRequestDeselection(e: RequestDeselectionEvent) {\n const requestingOptionEl = e.target as SelectOption & HTMLElement;\n\n // No-op if this item is not even in the list of tracked selected items.\n if (!this.lastSelectedOptionRecords.some(\n ([option]) => option === requestingOptionEl)) {\n return;\n }\n\n this.updateValueAndDisplayText();\n }\n\n /**\n * Selects an option given the value of the option, and updates MdSelect's\n * value.\n */\n select(value: string) {\n const optionToSelect = this.options.find(option => option.value === value);\n if (optionToSelect) {\n this.selectItem(optionToSelect);\n }\n }\n\n /**\n * Selects an option given the index of the option, and updates MdSelect's\n * value.\n */\n selectIndex(index: number) {\n const optionToSelect = this.options[index];\n if (optionToSelect) {\n this.selectItem(optionToSelect);\n }\n }\n\n /**\n * Attempts to initialize the selected option from user-settable values like\n * SSR, setting `value`, or `selectedIndex` at startup.\n */\n private initUserSelection() {\n // User has set `.value` directly, but internals have not yet booted up.\n if (this.lastUserSetValue && !this.lastSelectedOptionRecords.length) {\n this.select(this.lastUserSetValue);\n\n // User has set `.selectedIndex` directly, but internals have not yet\n // booted up.\n } else if (\n this.lastUserSetSelectedIndex !== null &&\n !this.lastSelectedOptionRecords.length) {\n this.selectIndex(this.lastUserSetSelectedIndex);\n\n // Regular boot up!\n } else {\n this.updateValueAndDisplayText();\n }\n }\n\n private handleIconChange() {\n this.hasLeadingIcon = this.leadingIcons.length > 0;\n this.hasTrailingIcon = this.trailingIcons.length > 0;\n }\n\n /**\n * Dispatches the `input` and `change` events.\n */\n private dispatchInteractionEvents() {\n this.dispatchEvent(new Event('input', {bubbles: true, composed: true}));\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["select.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../menu/menu.js';\n\nimport {html, LitElement, PropertyValues} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {html as staticHtml, StaticValue} from 'lit/static-html.js';\n\nimport {Field} from '../../field/lib/field.js';\nimport {List} from '../../list/lib/list.js';\nimport {DEFAULT_TYPEAHEAD_BUFFER_TIME, Menu} from '../../menu/lib/menu.js';\nimport {DefaultCloseMenuEvent, isElementInSubtree, isSelectableKey} from '../../menu/lib/shared.js';\nimport {TYPEAHEAD_RECORD} from '../../menu/lib/typeaheadController.js';\n\nimport {getSelectedItems, RequestDeselectionEvent, RequestSelectionEvent, SelectOption, SelectOptionRecord} from './shared.js';\n\nconst VALUE = Symbol('value');\n\n/**\n * @fires input Fired when a selection is made by the user via mouse or keyboard\n * interaction.\n * @fires change Fired when a selection is made by the user via mouse or\n * keyboard interaction.\n */\nexport abstract class Select extends LitElement {\n /**\n * Opens the menu synchronously with no animation.\n */\n @property({type: Boolean}) quick = false;\n /**\n * Whether or not the select is required.\n */\n @property({type: Boolean}) required = false;\n /**\n * Disables the select.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\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 * Calling `reportValidity()` will automatically update `errorText` to the\n * native `validationMessage`.\n */\n @property({type: String, attribute: 'error-text'}) errorText = '';\n /**\n * The floating label for the field.\n */\n @property() label = '';\n /**\n * Conveys additional information below the text field, such as how it should\n * be used.\n */\n @property({type: String, attribute: 'supporting-text'}) supportingText = '';\n /**\n * Gets or sets whether or not the text field is in a visually invalid state.\n *\n * Calling `reportValidity()` will automatically update `error`.\n */\n @property({type: Boolean, reflect: true}) error = false;\n /**\n * Whether or not the underlying md-menu should be position: fixed to display\n * in a top-level manner.\n */\n @property({type: Boolean, attribute: 'menu-fixed'}) menuFixed = false;\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 * Whether or not the text field has a leading icon. Used for SSR.\n */\n @property({type: Boolean, attribute: 'has-leading-icon'})\n hasLeadingIcon = false;\n /**\n * Whether or not the text field has a trailing icon. Used for SSR.\n */\n @property({type: Boolean, attribute: 'has-trailing-icon'})\n hasTrailingIcon = false;\n /**\n * Text to display in the field. Only set for SSR.\n */\n @property({attribute: 'display-text'}) displayText = '';\n\n @state() private focused = false;\n @state() private open = false;\n @query('.field') private readonly field!: Field|null;\n @query('md-menu') private readonly menu!: Menu|null;\n @queryAssignedElements({slot: 'leadingicon', flatten: true})\n private readonly leadingIcons!: Element[];\n @queryAssignedElements({slot: 'trailingicon', flatten: true})\n private readonly trailingIcons!: Element[];\n\n /**\n * The value of the currently selected option.\n *\n * Note: For SSR, set `[selected]` on the requested option and `displayText`\n * rather than setting `value` setting `value` will incur a DOM query.\n */\n @property()\n get value(): string {\n return this[VALUE];\n }\n\n set value(value: string) {\n this.lastUserSetValue = value;\n this.select(value);\n }\n\n [VALUE] = '';\n\n get options() {\n // NOTE: this does a DOM query.\n return (this.menu?.items ?? []) as SelectOption[];\n }\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 get selectedIndex(): number {\n // tslint:disable-next-line:enforce-name-casing\n const [_option, index] = (this.getSelectedOptions() ?? [])[0] ?? [];\n return index ?? -1;\n }\n\n set selectedIndex(index: number) {\n this.lastUserSetSelectedIndex = index;\n this.selectIndex(index);\n }\n\n /**\n * Returns an array of selected options.\n *\n * NOTE: md-select only suppoprts single selection.\n */\n get selectedOptions() {\n return (this.getSelectedOptions() ?? []).map(([option]) => option);\n }\n\n protected abstract readonly fieldTag: StaticValue;\n\n /**\n * Used for initializing select when the user sets the `value` directly.\n */\n private lastUserSetValue: string|null = null;\n\n /**\n * Used for initializing select when the user sets the `selectedIndex`\n * directly.\n */\n private lastUserSetSelectedIndex: number|null = null;\n\n /**\n * Used for `input` and `change` event change detection.\n */\n private lastSelectedOption: SelectOption|null = null;\n\n // tslint:disable-next-line:enforce-name-casing\n private lastSelectedOptionRecords: SelectOptionRecord[] = [];\n\n protected override render() {\n return html`\n <span\n class=\"select ${classMap(this.getRenderClasses())}\"\n @focusout=${this.handleFocusout}>\n ${this.renderField()}\n ${this.renderMenu()}\n </span>\n `;\n }\n\n private getRenderClasses() {\n return {\n 'disabled': this.disabled,\n 'error': this.error,\n };\n }\n\n private renderField() {\n // TODO(b/290078041): add aria-label/describedby\n return staticHtml`\n <${this.fieldTag}\n aria-haspopup=\"listbox\"\n role=\"combobox\"\n tabindex=${this.disabled ? '-1' : '0'}\n aria-expanded=${this.open ? 'true' : 'false'}\n class=\"field\"\n label=${this.label}\n .focused=${this.focused || this.open}\n .populated=${!!this.displayText}\n .disabled=${this.disabled}\n .required=${this.required}\n .error=${this.error}\n .hasStart=${this.hasLeadingIcon}\n .hasEnd=${this.hasTrailingIcon}\n supporting-text=${this.supportingText}\n error-text=${this.errorText}\n @keydown =${this.handleKeydown}\n @click=${this.handleClick}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}>\n ${this.renderFieldContent()}\n </${this.fieldTag}>`;\n }\n\n private renderFieldContent() {\n return [\n this.renderLeadingIcon(),\n this.renderLabel(),\n this.renderTrailingIcon(),\n ];\n }\n\n private renderLeadingIcon() {\n return html`\n <span class=\"icon leading\" slot=\"start\">\n <slot name=\"leadingicon\" @slotchange=${this.handleIconChange}></slot>\n </span>\n `;\n }\n\n private renderTrailingIcon() {\n return html`\n <span class=\"icon trailing\" slot=\"end\">\n <slot name=\"trailingicon\" @slotchange=${this.handleIconChange}></slot>\n </span>\n `;\n }\n\n private renderLabel() {\n // need to render so that line-height can apply and give it a\n // non-zero height\n return html`<div\n id=\"label\"\n class=\"label\">${this.displayText || html` `}</div>`;\n }\n\n private renderMenu() {\n return html`\n <md-menu\n id=\"listbox\"\n default-focus=\"NONE\"\n listTabIndex=\"-1\"\n type=\"listbox\"\n stay-open-on-focusout\n .anchor=${this.field}\n .open=${this.open}\n .quick=${this.quick}\n .fixed=${this.menuFixed}\n .typeaheadDelay=${this.typeaheadDelay}\n @opening=${this.handleOpening}\n @closing=${this.handleClosing}\n @close-menu=${this.handleCloseMenu}\n @request-selection=${this.handleRequestSelection}\n @request-deselection=${this.handleRequestDeselection}>\n ${this.renderMenuContent()}\n </md-menu>`;\n }\n\n private renderMenuContent() {\n return html`<slot></slot>`;\n }\n\n /**\n * Handles opening the select on keydown and typahead selection when the menu\n * is closed.\n */\n private handleKeydown(e: KeyboardEvent) {\n if (this.open || this.disabled || !this.menu) {\n return;\n }\n\n const typeaheadController = this.menu.typeaheadController;\n const isOpenKey =\n e.code === 'Space' || e.code === 'ArrowDown' || e.code === 'Enter';\n\n // Do not open if currently typing ahead because the user may be typing the\n // spacebar to match a word with a space\n if (!typeaheadController.isTypingAhead && isOpenKey) {\n e.preventDefault();\n this.open = true;\n return;\n }\n\n const isPrintableKey = e.key.length === 1;\n\n // Handles typing ahead when the menu is closed by delegating the event to\n // the underlying menu's typeaheadController\n if (isPrintableKey) {\n typeaheadController.onKeydown(e);\n e.preventDefault();\n\n const {lastActiveRecord} = typeaheadController;\n\n if (!lastActiveRecord) {\n return;\n }\n\n const hasChanged = this.selectItem(\n lastActiveRecord[TYPEAHEAD_RECORD.ITEM] as SelectOption);\n\n if (hasChanged) {\n this.dispatchInteractionEvents();\n }\n }\n }\n\n private handleClick() {\n this.open = true;\n }\n\n private handleFocus() {\n this.focused = true;\n }\n\n private handleBlur() {\n this.focused = false;\n }\n\n /**\n * Handles closing the menu when the focus leaves the select's subtree.\n */\n private handleFocusout(e: FocusEvent) {\n // Don't close the menu if we are switching focus between menu,\n // select-option, and field\n if (e.relatedTarget && isElementInSubtree(e.relatedTarget, this)) {\n return;\n }\n\n this.open = false;\n }\n\n /**\n * Gets a list of all selected select options as a list item record array.\n *\n * @return An array of selected list option records.\n */\n private getSelectedOptions() {\n if (!this.menu) {\n this.lastSelectedOptionRecords = [];\n return null;\n }\n\n const items = this.menu.items as SelectOption[];\n this.lastSelectedOptionRecords = getSelectedItems(items);\n return this.lastSelectedOptionRecords;\n }\n\n override async getUpdateComplete() {\n await this.menu?.updateComplete;\n return super.getUpdateComplete();\n }\n\n /**\n * Gets the selected options from the DOM, and updates the value and display\n * text to the first selected option's value and headline respectively.\n *\n * @return Whether or not the selected option has changed since last update.\n */\n private updateValueAndDisplayText() {\n const selectedOptions = this.getSelectedOptions() ?? [];\n // Used to determine whether or not we need to fire an input / change event\n // which fire whenever the option element changes (value or selectedIndex)\n // on user interaction.\n let hasSelectedOptionChanged = false;\n\n if (selectedOptions.length) {\n const [firstSelectedOption] = selectedOptions[0];\n hasSelectedOptionChanged =\n this.lastSelectedOption !== firstSelectedOption;\n this.lastSelectedOption = firstSelectedOption;\n this[VALUE] = firstSelectedOption.value;\n this.displayText = firstSelectedOption.headline;\n\n } else {\n hasSelectedOptionChanged = this.lastSelectedOption !== null;\n this.lastSelectedOption = null;\n this[VALUE] = '';\n this.displayText = '';\n }\n\n return hasSelectedOptionChanged;\n }\n\n protected override update(changed: PropertyValues<this>) {\n // In SSR the options will be ready to query, so try to figure out what\n // the value and display text should be.\n if (!this.hasUpdated) {\n this.initUserSelection();\n }\n\n super.update(changed);\n }\n\n protected override async firstUpdated(changed: PropertyValues<this>) {\n await this.menu?.updateComplete;\n // If this has been handled on update already due to SSR, try again.\n if (!this.lastSelectedOptionRecords.length) {\n this.initUserSelection();\n }\n\n super.firstUpdated(changed);\n }\n\n /**\n * Focuses and activates the last selected item upon opening, and resets other\n * active items.\n */\n private async handleOpening() {\n const items = this.menu!.items;\n const activeItem = List.getActiveItem(items)?.item;\n const [selectedItem] = this.lastSelectedOptionRecords[0] ?? [null];\n\n // This is true if the user keys through the list but clicks out of the menu\n // thus no close-menu event is fired by an item and we can't clean up in\n // handleCloseMenu.\n if (activeItem && activeItem !== selectedItem) {\n activeItem.active = false;\n }\n\n if (selectedItem) {\n selectedItem.active = true;\n selectedItem.focus();\n }\n }\n\n private handleClosing() {\n this.open = false;\n }\n\n /**\n * Determines the reason for closing, and updates the UI accordingly.\n */\n private handleCloseMenu(e: InstanceType<typeof DefaultCloseMenuEvent>) {\n const reason = e.reason;\n const item = e.itemPath[0] as SelectOption;\n this.open = false;\n let hasChanged = false;\n\n if (reason.kind === 'CLICK_SELECTION') {\n hasChanged = this.selectItem(item);\n } else if (reason.kind === 'KEYDOWN' && isSelectableKey(reason.key)) {\n hasChanged = this.selectItem(item);\n } else {\n // This can happen on ESC being pressed\n item.active = false;\n item.blur();\n }\n\n // Dispatch interaction events since selection has been made via keyboard\n // or mouse.\n if (hasChanged) {\n this.dispatchInteractionEvents();\n }\n }\n\n /**\n * Selects a given option, deselects other options, and updates the UI.\n *\n * @return Whether the last selected option has changed.\n */\n private selectItem(item: SelectOption) {\n this.lastSelectedOptionRecords.forEach(([option]) => {\n if (item !== option) {\n option.selected = false;\n }\n });\n item.selected = true;\n\n return this.updateValueAndDisplayText();\n }\n\n /**\n * Handles updating selection when an option element requests selection via\n * property / attribute change.\n */\n private handleRequestSelection(e: RequestSelectionEvent) {\n const requestingOptionEl = e.target as SelectOption & HTMLElement;\n\n // No-op if this item is already selected.\n if (this.lastSelectedOptionRecords.some(\n ([option]) => option === requestingOptionEl)) {\n return;\n }\n\n this.selectItem(requestingOptionEl);\n }\n\n /**\n * Handles updating selection when an option element requests deselection via\n * property / attribute change.\n */\n private handleRequestDeselection(e: RequestDeselectionEvent) {\n const requestingOptionEl = e.target as SelectOption & HTMLElement;\n\n // No-op if this item is not even in the list of tracked selected items.\n if (!this.lastSelectedOptionRecords.some(\n ([option]) => option === requestingOptionEl)) {\n return;\n }\n\n this.updateValueAndDisplayText();\n }\n\n /**\n * Selects an option given the value of the option, and updates MdSelect's\n * value.\n */\n select(value: string) {\n const optionToSelect = this.options.find(option => option.value === value);\n if (optionToSelect) {\n this.selectItem(optionToSelect);\n }\n }\n\n /**\n * Selects an option given the index of the option, and updates MdSelect's\n * value.\n */\n selectIndex(index: number) {\n const optionToSelect = this.options[index];\n if (optionToSelect) {\n this.selectItem(optionToSelect);\n }\n }\n\n /**\n * Attempts to initialize the selected option from user-settable values like\n * SSR, setting `value`, or `selectedIndex` at startup.\n */\n private initUserSelection() {\n // User has set `.value` directly, but internals have not yet booted up.\n if (this.lastUserSetValue && !this.lastSelectedOptionRecords.length) {\n this.select(this.lastUserSetValue);\n\n // User has set `.selectedIndex` directly, but internals have not yet\n // booted up.\n } else if (\n this.lastUserSetSelectedIndex !== null &&\n !this.lastSelectedOptionRecords.length) {\n this.selectIndex(this.lastUserSetSelectedIndex);\n\n // Regular boot up!\n } else {\n this.updateValueAndDisplayText();\n }\n }\n\n private handleIconChange() {\n this.hasLeadingIcon = this.leadingIcons.length > 0;\n this.hasTrailingIcon = this.trailingIcons.length > 0;\n }\n\n /**\n * Dispatches the `input` and `change` events.\n */\n private dispatchInteractionEvents() {\n this.dispatchEvent(new Event('input', {bubbles: true, composed: true}));\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n}\n"]}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{color:unset;min-width:210px}.field{cursor:default;outline:none}.select{position:relative}.field,.select,md-menu{min-width:
|
|
7
|
+
export const styles = css `:host{color:unset;min-width:210px}.field{cursor:default;outline:none}.select{position:relative}.field,.select,md-menu{min-width:inherit;width:inherit;max-width:inherit}.field,.select{width:100%}:host{display:inline-flex}.label{width:100%}:host([disabled]){pointer-events:none}/*# sourceMappingURL=shared-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=shared-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{color:unset;min-width:210px}.field{cursor:default;outline:none}.select{position:relative}.field,.select,md-menu{min-width:
|
|
1
|
+
{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{color:unset;min-width:210px}.field{cursor:default;outline:none}.select{position:relative}.field,.select,md-menu{min-width:inherit;width:inherit;max-width:inherit}.field,.select{width:100%}:host{display:inline-flex}.label{width:100%}:host([disabled]){pointer-events:none}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
|
package/slider/lib/slider.d.ts
CHANGED
|
@@ -48,12 +48,12 @@ export declare class Slider extends LitElement {
|
|
|
48
48
|
* An optional label for the slider's start value displayed when
|
|
49
49
|
* range is true; if not set, the label is the valueStart itself.
|
|
50
50
|
*/
|
|
51
|
-
|
|
51
|
+
valueLabelStart?: string;
|
|
52
52
|
/**
|
|
53
53
|
* An optional label for the slider's end value displayed when
|
|
54
54
|
* range is true; if not set, the label is the valueEnd itself.
|
|
55
55
|
*/
|
|
56
|
-
|
|
56
|
+
valueLabelEnd?: string;
|
|
57
57
|
/**
|
|
58
58
|
* Aria label for the slider's start value displayed when
|
|
59
59
|
* range is true.
|
|
@@ -71,7 +71,7 @@ export declare class Slider extends LitElement {
|
|
|
71
71
|
/**
|
|
72
72
|
* Whether or not to show tick marks.
|
|
73
73
|
*/
|
|
74
|
-
|
|
74
|
+
ticks: boolean;
|
|
75
75
|
/**
|
|
76
76
|
* Whether or not to show a value label when activated.
|
|
77
77
|
*/
|
package/slider/lib/slider.js
CHANGED
|
@@ -85,7 +85,7 @@ export class Slider extends LitElement {
|
|
|
85
85
|
/**
|
|
86
86
|
* Whether or not to show tick marks.
|
|
87
87
|
*/
|
|
88
|
-
this.
|
|
88
|
+
this.ticks = false;
|
|
89
89
|
/**
|
|
90
90
|
* Whether or not to show a value label when activated.
|
|
91
91
|
*/
|
|
@@ -207,8 +207,8 @@ export class Slider extends LitElement {
|
|
|
207
207
|
};
|
|
208
208
|
const containerClasses = { ranged: this.range };
|
|
209
209
|
// optional label values to show in place of the value.
|
|
210
|
-
const labelStart = this.
|
|
211
|
-
const labelEnd = (this.range ? this.
|
|
210
|
+
const labelStart = this.valueLabelStart ?? String(this.renderValueStart);
|
|
211
|
+
const labelEnd = (this.range ? this.valueLabelEnd : this.valueLabel) ??
|
|
212
212
|
String(this.renderValueEnd);
|
|
213
213
|
const inputStartProps = {
|
|
214
214
|
start: true,
|
|
@@ -252,7 +252,7 @@ export class Slider extends LitElement {
|
|
|
252
252
|
</div>`;
|
|
253
253
|
}
|
|
254
254
|
renderTrack() {
|
|
255
|
-
const trackClasses = { 'tickmarks': this.
|
|
255
|
+
const trackClasses = { 'tickmarks': this.ticks };
|
|
256
256
|
return html `<div class="track ${classMap(trackClasses)}"></div>`;
|
|
257
257
|
}
|
|
258
258
|
renderLabel(value) {
|
|
@@ -542,14 +542,14 @@ __decorate([
|
|
|
542
542
|
property({ type: Number, attribute: 'value-end' })
|
|
543
543
|
], Slider.prototype, "valueEnd", void 0);
|
|
544
544
|
__decorate([
|
|
545
|
-
property()
|
|
545
|
+
property({ attribute: 'value-label' })
|
|
546
546
|
], Slider.prototype, "valueLabel", void 0);
|
|
547
547
|
__decorate([
|
|
548
|
-
property()
|
|
549
|
-
], Slider.prototype, "
|
|
548
|
+
property({ attribute: 'value-label-start' })
|
|
549
|
+
], Slider.prototype, "valueLabelStart", void 0);
|
|
550
550
|
__decorate([
|
|
551
|
-
property()
|
|
552
|
-
], Slider.prototype, "
|
|
551
|
+
property({ attribute: 'value-label-end' })
|
|
552
|
+
], Slider.prototype, "valueLabelEnd", void 0);
|
|
553
553
|
__decorate([
|
|
554
554
|
property({ attribute: 'aria-label-start' })
|
|
555
555
|
], Slider.prototype, "ariaLabelStart", void 0);
|
|
@@ -561,7 +561,7 @@ __decorate([
|
|
|
561
561
|
], Slider.prototype, "step", void 0);
|
|
562
562
|
__decorate([
|
|
563
563
|
property({ type: Boolean })
|
|
564
|
-
], Slider.prototype, "
|
|
564
|
+
], Slider.prototype, "ticks", void 0);
|
|
565
565
|
__decorate([
|
|
566
566
|
property({ type: Boolean })
|
|
567
567
|
], Slider.prototype, "labeled", void 0);
|