@spectrum-web-components/picker 0.39.2 → 0.39.3
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/custom-elements.json +42 -0
- package/package.json +13 -13
- package/src/Picker.d.ts +3 -0
- package/src/Picker.dev.js +10 -1
- package/src/Picker.dev.js.map +2 -2
- package/src/Picker.js +19 -14
- package/src/Picker.js.map +2 -2
package/custom-elements.json
CHANGED
|
@@ -27,6 +27,14 @@
|
|
|
27
27
|
"kind": "javascript-module",
|
|
28
28
|
"path": "src/Picker.js",
|
|
29
29
|
"declarations": [
|
|
30
|
+
{
|
|
31
|
+
"kind": "variable",
|
|
32
|
+
"name": "DESCRIPTION_ID",
|
|
33
|
+
"type": {
|
|
34
|
+
"text": "string"
|
|
35
|
+
},
|
|
36
|
+
"default": "'option-picker'"
|
|
37
|
+
},
|
|
30
38
|
{
|
|
31
39
|
"kind": "class",
|
|
32
40
|
"description": "",
|
|
@@ -513,6 +521,15 @@
|
|
|
513
521
|
}
|
|
514
522
|
]
|
|
515
523
|
},
|
|
524
|
+
{
|
|
525
|
+
"kind": "field",
|
|
526
|
+
"name": "renderDescriptionSlot",
|
|
527
|
+
"type": {
|
|
528
|
+
"text": "TemplateResult"
|
|
529
|
+
},
|
|
530
|
+
"privacy": "protected",
|
|
531
|
+
"readonly": true
|
|
532
|
+
},
|
|
516
533
|
{
|
|
517
534
|
"kind": "method",
|
|
518
535
|
"name": "bindButtonKeydownListener",
|
|
@@ -772,6 +789,10 @@
|
|
|
772
789
|
"description": "The placeholder content for the Picker",
|
|
773
790
|
"name": "label"
|
|
774
791
|
},
|
|
792
|
+
{
|
|
793
|
+
"description": "The description content for the Picker",
|
|
794
|
+
"name": "description"
|
|
795
|
+
},
|
|
775
796
|
{
|
|
776
797
|
"description": "Tooltip to to be applied to the the Picker Button",
|
|
777
798
|
"name": "tooltip"
|
|
@@ -1439,6 +1460,19 @@
|
|
|
1439
1460
|
"module": "src/Picker.js"
|
|
1440
1461
|
}
|
|
1441
1462
|
},
|
|
1463
|
+
{
|
|
1464
|
+
"kind": "field",
|
|
1465
|
+
"name": "renderDescriptionSlot",
|
|
1466
|
+
"type": {
|
|
1467
|
+
"text": "TemplateResult"
|
|
1468
|
+
},
|
|
1469
|
+
"privacy": "protected",
|
|
1470
|
+
"readonly": true,
|
|
1471
|
+
"inheritedFrom": {
|
|
1472
|
+
"name": "PickerBase",
|
|
1473
|
+
"module": "src/Picker.js"
|
|
1474
|
+
}
|
|
1475
|
+
},
|
|
1442
1476
|
{
|
|
1443
1477
|
"kind": "method",
|
|
1444
1478
|
"name": "bindButtonKeydownListener",
|
|
@@ -1800,6 +1834,14 @@
|
|
|
1800
1834
|
}
|
|
1801
1835
|
],
|
|
1802
1836
|
"exports": [
|
|
1837
|
+
{
|
|
1838
|
+
"kind": "js",
|
|
1839
|
+
"name": "DESCRIPTION_ID",
|
|
1840
|
+
"declaration": {
|
|
1841
|
+
"name": "DESCRIPTION_ID",
|
|
1842
|
+
"module": "src/Picker.js"
|
|
1843
|
+
}
|
|
1844
|
+
},
|
|
1803
1845
|
{
|
|
1804
1846
|
"kind": "js",
|
|
1805
1847
|
"name": "PickerBase",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/picker",
|
|
3
|
-
"version": "0.39.
|
|
3
|
+
"version": "0.39.3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -65,17 +65,17 @@
|
|
|
65
65
|
"lit-html"
|
|
66
66
|
],
|
|
67
67
|
"dependencies": {
|
|
68
|
-
"@spectrum-web-components/base": "^0.39.
|
|
69
|
-
"@spectrum-web-components/button": "^0.39.
|
|
70
|
-
"@spectrum-web-components/icon": "^0.39.
|
|
71
|
-
"@spectrum-web-components/icons-ui": "^0.39.
|
|
72
|
-
"@spectrum-web-components/icons-workflow": "^0.39.
|
|
73
|
-
"@spectrum-web-components/menu": "^0.39.
|
|
74
|
-
"@spectrum-web-components/overlay": "^0.39.
|
|
75
|
-
"@spectrum-web-components/popover": "^0.39.
|
|
76
|
-
"@spectrum-web-components/reactive-controllers": "^0.39.
|
|
77
|
-
"@spectrum-web-components/shared": "^0.39.
|
|
78
|
-
"@spectrum-web-components/tray": "^0.39.
|
|
68
|
+
"@spectrum-web-components/base": "^0.39.3",
|
|
69
|
+
"@spectrum-web-components/button": "^0.39.3",
|
|
70
|
+
"@spectrum-web-components/icon": "^0.39.3",
|
|
71
|
+
"@spectrum-web-components/icons-ui": "^0.39.3",
|
|
72
|
+
"@spectrum-web-components/icons-workflow": "^0.39.3",
|
|
73
|
+
"@spectrum-web-components/menu": "^0.39.3",
|
|
74
|
+
"@spectrum-web-components/overlay": "^0.39.3",
|
|
75
|
+
"@spectrum-web-components/popover": "^0.39.3",
|
|
76
|
+
"@spectrum-web-components/reactive-controllers": "^0.39.3",
|
|
77
|
+
"@spectrum-web-components/shared": "^0.39.3",
|
|
78
|
+
"@spectrum-web-components/tray": "^0.39.3"
|
|
79
79
|
},
|
|
80
80
|
"devDependencies": {
|
|
81
81
|
"@spectrum-css/picker": "^7.0.8"
|
|
@@ -88,5 +88,5 @@
|
|
|
88
88
|
"./sync/index.js",
|
|
89
89
|
"./sync/sp-*.js"
|
|
90
90
|
],
|
|
91
|
-
"gitHead": "
|
|
91
|
+
"gitHead": "d7840b3a9b99db4de62c44e3fb91b69dec7319af"
|
|
92
92
|
}
|
package/src/Picker.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ import type { Menu, MenuItem, MenuItemChildren } from '@spectrum-web-components/
|
|
|
8
8
|
import { Placement } from '@spectrum-web-components/overlay';
|
|
9
9
|
import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
|
|
10
10
|
import type { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';
|
|
11
|
+
export declare const DESCRIPTION_ID = "option-picker";
|
|
11
12
|
declare const PickerBase_base: typeof Focusable & {
|
|
12
13
|
new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
|
|
13
14
|
prototype: import("@spectrum-web-components/base").SizedElementInterface;
|
|
@@ -63,6 +64,7 @@ export declare class PickerBase extends PickerBase_base {
|
|
|
63
64
|
protected get buttonContent(): TemplateResult[];
|
|
64
65
|
applyFocusElementLabel: (value?: string) => void;
|
|
65
66
|
protected renderOverlay(menu: TemplateResult): TemplateResult;
|
|
67
|
+
protected get renderDescriptionSlot(): TemplateResult;
|
|
66
68
|
protected render(): TemplateResult;
|
|
67
69
|
protected update(changes: PropertyValues<this>): void;
|
|
68
70
|
protected bindButtonKeydownListener(): void;
|
|
@@ -88,6 +90,7 @@ export declare class PickerBase extends PickerBase_base {
|
|
|
88
90
|
* @element sp-picker
|
|
89
91
|
*
|
|
90
92
|
* @slot label - The placeholder content for the Picker
|
|
93
|
+
* @slot description - The description content for the Picker
|
|
91
94
|
* @slot tooltip - Tooltip to to be applied to the the Picker Button
|
|
92
95
|
* @slot - menu items to be listed in the Picker
|
|
93
96
|
* @fires change - Announces that the `value` of the element has changed
|
package/src/Picker.dev.js
CHANGED
|
@@ -41,6 +41,7 @@ const chevronClass = {
|
|
|
41
41
|
l: "spectrum-UIIcon-ChevronDown200",
|
|
42
42
|
xl: "spectrum-UIIcon-ChevronDown300"
|
|
43
43
|
};
|
|
44
|
+
export const DESCRIPTION_ID = "option-picker";
|
|
44
45
|
export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
|
|
45
46
|
constructor() {
|
|
46
47
|
super(...arguments);
|
|
@@ -321,6 +322,13 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
|
|
|
321
322
|
</sp-overlay>
|
|
322
323
|
`;
|
|
323
324
|
}
|
|
325
|
+
get renderDescriptionSlot() {
|
|
326
|
+
return html`
|
|
327
|
+
<div id=${DESCRIPTION_ID}>
|
|
328
|
+
<slot name="description"></slot>
|
|
329
|
+
</div>
|
|
330
|
+
`;
|
|
331
|
+
}
|
|
324
332
|
// a helper to throw focus to the button is needed because Safari
|
|
325
333
|
// won't include buttons in the tab order even with tabindex="0"
|
|
326
334
|
render() {
|
|
@@ -329,6 +337,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
|
|
|
329
337
|
id="focus-helper"
|
|
330
338
|
tabindex="${this.focused || this.open ? "-1" : "0"}"
|
|
331
339
|
@focus=${this.handleHelperFocus}
|
|
340
|
+
aria-describedby=${DESCRIPTION_ID}
|
|
332
341
|
></span>
|
|
333
342
|
<button
|
|
334
343
|
aria-controls=${ifDefined(this.open ? "menu" : void 0)}
|
|
@@ -351,7 +360,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
|
|
|
351
360
|
>
|
|
352
361
|
${this.buttonContent}
|
|
353
362
|
</button>
|
|
354
|
-
${this.renderMenu}
|
|
363
|
+
${this.renderMenu} ${this.renderDescriptionSlot}
|
|
355
364
|
`;
|
|
356
365
|
}
|
|
357
366
|
update(changes) {
|
package/src/Picker.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Picker.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n ifDefined,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n Menu,\n MenuItem,\n MenuItemChildren,\n} from '@spectrum-web-components/menu';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport type { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\n\nconst chevronClass = {\n s: 'spectrum-UIIcon-ChevronDown75',\n m: 'spectrum-UIIcon-ChevronDown100',\n l: 'spectrum-UIIcon-ChevronDown200',\n xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {\n protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n @state()\n appliedLabel?: string;\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n private deprecatedMenu: Menu | null = null;\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String, reflect: true })\n public icons?: 'only' | 'none';\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n public selects: undefined | 'single' = 'single';\n\n protected get menuItems(): MenuItem[] {\n return this.optionsMenu.childItems;\n }\n\n @query('sp-menu')\n protected optionsMenu!: Menu;\n\n @query('sp-overlay')\n protected overlayElement!: Overlay;\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n\n @property()\n public placement: Placement = 'bottom-start';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public value = '';\n\n @property({ attribute: false })\n public get selectedItem(): MenuItem | undefined {\n return this._selectedItem;\n }\n\n public set selectedItem(selectedItem: MenuItem | undefined) {\n this.selectedItemContent = selectedItem\n ? selectedItem.itemChildren\n : undefined;\n\n if (selectedItem === this.selectedItem) return;\n const oldSelectedItem = this.selectedItem;\n this._selectedItem = selectedItem;\n this.requestUpdate('selectedItem', oldSelectedItem);\n }\n\n _selectedItem?: MenuItem;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public override get focusElement(): HTMLElement {\n if (this.open) {\n return this.optionsMenu;\n }\n return this.button;\n }\n\n public forceFocusVisible(): void {\n this.focused = true;\n }\n\n public handleButtonBlur(): void {\n this.focused = false;\n }\n\n protected preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';\n\n protected handleButtonPointerdown(): void {\n this.preventNextToggle = 'maybe';\n const cleanup = (): void => {\n document.removeEventListener('pointerup', cleanup);\n document.removeEventListener('pointercancel', cleanup);\n requestAnimationFrame(() => {\n // Complete cleanup on the animation frame so that `click` can go first.\n this.preventNextToggle = 'no';\n });\n };\n // Ensure that however the pointer goes up we do `cleanup()`.\n document.addEventListener('pointerup', cleanup);\n document.addEventListener('pointercancel', cleanup);\n }\n\n protected handleButtonFocus(event: FocusEvent): void {\n // When focus comes from a pointer event, and the related target is the Menu,\n // we don't want to reopen the Menu.\n if (\n this.preventNextToggle === 'maybe' &&\n event.relatedTarget === this.optionsMenu\n ) {\n this.preventNextToggle = 'yes';\n }\n }\n\n protected handleButtonClick(): void {\n if (this.enterKeydownOn && this.enterKeydownOn !== this.button) {\n return;\n }\n if (this.preventNextToggle === 'yes') {\n return;\n }\n this.toggle();\n }\n\n public override focus(options?: FocusOptions): void {\n super.focus(options);\n\n if (!this.disabled && this.focusElement) {\n this.focused = this.hasVisibleFocusInTree();\n }\n }\n\n public handleHelperFocus(): void {\n // set focused to true here instead of handleButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public handleChange(event: Event): void {\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n event.stopPropagation();\n if (event.cancelable) {\n this.setValueFromItem(selected, event);\n } else {\n // Non-cancelable \"change\" events announce a selection with no value\n // change that should close the Picker element.\n this.open = false;\n }\n }\n\n protected handleKeydown = (event: KeyboardEvent): void => {\n this.focused = true;\n if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n return;\n }\n event.preventDefault();\n this.toggle(true);\n };\n\n protected async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n // should always close when \"setting\" a value.\n this.open = false;\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n\n // Set a value.\n this.selectedItem = item;\n this.value = item.value;\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n // Allow it to be prevented.\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault && this.selects) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem as MenuItem, false);\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, true);\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n return;\n } else if (!this.selects) {\n // Unset the value if not carrying a selection\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n return;\n }\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, false);\n }\n this.setMenuItemSelected(item, !!this.selects);\n }\n\n protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n // matches null | undefined\n if (this.selects == null) return;\n item.selected = value;\n }\n\n public toggle(target?: boolean): void {\n if (this.readonly) {\n return;\n }\n this.open = typeof target !== 'undefined' ? target : !this.open;\n }\n\n public close(): void {\n if (this.readonly) {\n return;\n }\n this.open = false;\n }\n\n protected get containerStyles(): StyleInfo {\n // @todo: test in mobile\n /* c8 ignore next 5 */\n if (this.isMobile.matches) {\n return {\n '--swc-menu-width': '100%',\n };\n }\n return {};\n }\n\n @property({ attribute: false })\n protected get selectedItemContent(): MenuItemChildren {\n return this._selectedItemContent || { icon: [], content: [] };\n }\n\n protected set selectedItemContent(\n selectedItemContent: MenuItemChildren | undefined\n ) {\n if (selectedItemContent === this.selectedItemContent) return;\n\n const oldContent = this.selectedItemContent;\n this._selectedItemContent = selectedItemContent;\n this.requestUpdate('selectedItemContent', oldContent);\n }\n\n _selectedItemContent?: MenuItemChildren;\n\n protected renderLabelContent(content: Node[]): TemplateResult | Node[] {\n if (this.value && this.selectedItem) {\n return content;\n }\n return html`\n <slot name=\"label\">\n <span\n aria-hidden=${ifDefined(\n this.appliedLabel ? undefined : 'true'\n )}\n >\n ${this.label}\n </span>\n </slot>\n `;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const labelClasses = {\n 'visually-hidden': this.icons === 'only' && !!this.value,\n placeholder: !this.value,\n };\n const appliedLabel = this.appliedLabel || this.label;\n return [\n html`\n <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n ${this.selectedItemContent.icon}\n </span>\n <span id=\"label\" class=${classMap(labelClasses)}>\n ${this.renderLabelContent(this.selectedItemContent.content)}\n </span>\n ${this.value && this.selectedItem\n ? html`\n <span\n aria-hidden=\"true\"\n class=\"visually-hidden\"\n id=\"applied-label\"\n >\n ${appliedLabel}\n <slot name=\"label\"></slot>\n </span>\n `\n : html`\n <span hidden id=\"applied-label\">${appliedLabel}</span>\n `}\n ${this.invalid\n ? html`\n <sp-icon-alert\n class=\"validation-icon\"\n ></sp-icon-alert>\n `\n : nothing}\n <sp-icon-chevron100\n class=\"picker ${chevronClass[\n this.size as DefaultElementSize\n ]}\"\n ></sp-icon-chevron100>\n <slot aria-hidden=\"true\" name=\"tooltip\" id=\"tooltip\"></slot>\n `,\n ];\n }\n\n applyFocusElementLabel = (value?: string): void => {\n this.appliedLabel = value;\n };\n\n protected renderOverlay(menu: TemplateResult): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n return html`\n <sp-overlay\n .triggerElement=${this as HTMLElement}\n .offset=${0}\n ?open=${this.open}\n .placement=${this.isMobile.matches ? undefined : this.placement}\n type=\"auto\"\n .receivesFocus=${'true'}\n @beforetoggle=${(\n event: Event & {\n target: Overlay;\n newState: 'open' | 'closed';\n }\n ) => {\n if (event.composedPath()[0] !== event.target) {\n return;\n }\n if (event.newState === 'closed') {\n this.open = false;\n }\n if (!this.open) {\n this.optionsMenu.updateSelectedItemIndex();\n this.optionsMenu.closeDescendentOverlays();\n }\n }}\n >\n ${this.renderContainer(menu)}\n </sp-overlay>\n `;\n }\n\n // a helper to throw focus to the button is needed because Safari\n // won't include buttons in the tab order even with tabindex=\"0\"\n protected override render(): TemplateResult {\n return html`\n <span\n id=\"focus-helper\"\n tabindex=\"${this.focused || this.open ? '-1' : '0'}\"\n @focus=${this.handleHelperFocus}\n ></span>\n <button\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-describedby=\"tooltip\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"true\"\n aria-labelledby=\"icon label applied-label\"\n id=\"button\"\n class=\"button\"\n @blur=${this.handleButtonBlur}\n @pointerdown=${this.handleButtonPointerdown}\n @focus=${this.handleButtonFocus}\n @click=${this.handleButtonClick}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n tabindex=\"-1\"\n >\n ${this.buttonContent}\n </button>\n ${this.renderMenu}\n `;\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (this.selects) {\n // Always force `selects` to \"single\" when set.\n // TODO: Add support functionally and visually for \"multiple\"\n this.selects = 'single';\n }\n if (changes.has('disabled') && this.disabled) {\n this.open = false;\n }\n if (changes.has('value')) {\n // MenuItems update a frame late for <slot> management,\n // await the same here.\n this.shouldScheduleManageSelection();\n }\n // Maybe it's finally time to remove this support?\n if (!this.hasUpdated) {\n this.deprecatedMenu = this.querySelector(':scope > sp-menu');\n this.deprecatedMenu?.toggleAttribute('ignore', true);\n this.deprecatedMenu?.setAttribute('selects', 'inherit');\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) {\n const { localName } = this;\n window.__swc.warn(\n this,\n `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n { level: 'deprecation' }\n );\n }\n }\n super.update(changes);\n }\n\n protected bindButtonKeydownListener(): void {\n this.button.addEventListener('keydown', this.handleKeydown);\n }\n\n protected override firstUpdated(changes: PropertyValues<this>): void {\n super.firstUpdated(changes);\n this.bindButtonKeydownListener();\n }\n\n protected get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n aria-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected renderContainer(menu: TemplateResult): TemplateResult {\n const accessibleMenu = html`\n ${this.dismissHelper} ${menu} ${this.dismissHelper}\n `;\n // @todo: test in mobile\n /* c8 ignore next 11 */\n if (this.isMobile.matches) {\n import('@spectrum-web-components/tray/sp-tray.js');\n return html`\n <sp-tray\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n >\n ${accessibleMenu}\n </sp-tray>\n `;\n }\n import('@spectrum-web-components/popover/sp-popover.js');\n return html`\n <sp-popover\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n placement=${this.placement}\n >\n ${accessibleMenu}\n </sp-popover>\n `;\n }\n\n protected hasRenderedOverlay = false;\n\n protected get renderMenu(): TemplateResult {\n const menu = html`\n <sp-menu\n aria-labelledby=\"applied-label\"\n @change=${this.handleChange}\n id=\"menu\"\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n role=${this.listRole}\n .selects=${this.selects}\n .selected=${this.value ? [this.value] : []}\n size=${this.size}\n @sp-menu-item-added-or-updated=${this.shouldManageSelection}\n >\n <slot @slotchange=${this.shouldScheduleManageSelection}></slot>\n </sp-menu>\n `;\n this.hasRenderedOverlay =\n this.hasRenderedOverlay ||\n this.focused ||\n this.open ||\n !!this.deprecatedMenu;\n if (this.hasRenderedOverlay) {\n return this.renderOverlay(menu);\n }\n return menu;\n }\n\n private willManageSelection = false;\n\n protected shouldScheduleManageSelection(event?: Event): void {\n if (\n !this.willManageSelection &&\n (!event ||\n ((event.target as HTMLElement).getRootNode() as ShadowRoot)\n .host === this)\n ) {\n this.willManageSelection = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.manageSelection();\n });\n });\n }\n }\n\n protected shouldManageSelection(): void {\n if (this.willManageSelection) {\n return;\n }\n this.willManageSelection = true;\n this.manageSelection();\n }\n\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\n await this.optionsMenu.updateComplete;\n if (this.recentlyConnected) {\n // Work around for attach timing differences in Safari and Firefox.\n // Remove when refactoring to Menu passthrough wrapper.\n await new Promise((res) => requestAnimationFrame(() => res(true)));\n this.recentlyConnected = false;\n }\n this.menuItems.forEach((item) => {\n if (this.value === item.value && !item.disabled) {\n selectedItem = item;\n } else {\n item.selected = false;\n }\n });\n if (selectedItem) {\n selectedItem.selected = !!this.selects;\n this.selectedItem = selectedItem;\n } else {\n this.value = '';\n this.selectedItem = undefined;\n }\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.optionsMenu.updateSelectedItemIndex();\n }\n this.selectionResolver();\n this.willManageSelection = false;\n }\n\n private selectionPromise = Promise.resolve();\n private selectionResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.selectionPromise;\n if (this.overlayElement) {\n await this.overlayElement.updateComplete;\n }\n return complete;\n }\n\n private recentlyConnected = false;\n\n private enterKeydownOn: EventTarget | null = null;\n\n protected handleEnterKeydown = (event: KeyboardEvent): void => {\n if (event.code !== 'Enter') {\n return;\n }\n\n if (this.enterKeydownOn) {\n event.preventDefault();\n return;\n } else {\n this.addEventListener(\n 'keyup',\n (keyupEvent: KeyboardEvent) => {\n if (keyupEvent.code !== 'Enter') {\n return;\n }\n this.enterKeydownOn = null;\n },\n { once: true }\n );\n }\n this.enterKeydownOn = this.enterKeydownOn || event.target;\n };\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.recentlyConnected = this.hasUpdated;\n }\n\n public override disconnectedCallback(): void {\n this.close();\n\n super.disconnectedCallback();\n }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot tooltip - Tooltip to to be applied to the the Picker Button\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override get containerStyles(): StyleInfo {\n const styles = super.containerStyles;\n if (!this.quiet) {\n styles['min-width'] = `${this.offsetWidth}px`;\n }\n return styles;\n }\n\n protected override handleKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n this.focused = true;\n if (!code.startsWith('Arrow') || this.readonly) {\n return;\n }\n if (code === 'ArrowUp' || code === 'ArrowDown') {\n this.toggle(true);\n return;\n }\n event.preventDefault();\n const selectedIndex = this.selectedItem\n ? this.menuItems.indexOf(this.selectedItem)\n : -1;\n // use a positive offset to find the first non-disabled item when no selection is available.\n const nextOffset = selectedIndex < 0 || code === 'ArrowRight' ? 1 : -1;\n let nextIndex = selectedIndex + nextOffset;\n while (\n this.menuItems[nextIndex] &&\n this.menuItems[nextIndex].disabled\n ) {\n nextIndex += nextOffset;\n }\n if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {\n return;\n }\n if (!this.value || nextIndex !== selectedIndex) {\n this.setValueFromItem(this.menuItems[nextIndex]);\n }\n };\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n ifDefined,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n Menu,\n MenuItem,\n MenuItemChildren,\n} from '@spectrum-web-components/menu';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport type { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\n\nconst chevronClass = {\n s: 'spectrum-UIIcon-ChevronDown75',\n m: 'spectrum-UIIcon-ChevronDown100',\n l: 'spectrum-UIIcon-ChevronDown200',\n xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport const DESCRIPTION_ID = 'option-picker';\nexport class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {\n protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n @state()\n appliedLabel?: string;\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n private deprecatedMenu: Menu | null = null;\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String, reflect: true })\n public icons?: 'only' | 'none';\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n public selects: undefined | 'single' = 'single';\n\n protected get menuItems(): MenuItem[] {\n return this.optionsMenu.childItems;\n }\n\n @query('sp-menu')\n protected optionsMenu!: Menu;\n\n @query('sp-overlay')\n protected overlayElement!: Overlay;\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n\n @property()\n public placement: Placement = 'bottom-start';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public value = '';\n\n @property({ attribute: false })\n public get selectedItem(): MenuItem | undefined {\n return this._selectedItem;\n }\n\n public set selectedItem(selectedItem: MenuItem | undefined) {\n this.selectedItemContent = selectedItem\n ? selectedItem.itemChildren\n : undefined;\n\n if (selectedItem === this.selectedItem) return;\n const oldSelectedItem = this.selectedItem;\n this._selectedItem = selectedItem;\n this.requestUpdate('selectedItem', oldSelectedItem);\n }\n\n _selectedItem?: MenuItem;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public override get focusElement(): HTMLElement {\n if (this.open) {\n return this.optionsMenu;\n }\n return this.button;\n }\n\n public forceFocusVisible(): void {\n this.focused = true;\n }\n\n public handleButtonBlur(): void {\n this.focused = false;\n }\n\n protected preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';\n\n protected handleButtonPointerdown(): void {\n this.preventNextToggle = 'maybe';\n const cleanup = (): void => {\n document.removeEventListener('pointerup', cleanup);\n document.removeEventListener('pointercancel', cleanup);\n requestAnimationFrame(() => {\n // Complete cleanup on the animation frame so that `click` can go first.\n this.preventNextToggle = 'no';\n });\n };\n // Ensure that however the pointer goes up we do `cleanup()`.\n document.addEventListener('pointerup', cleanup);\n document.addEventListener('pointercancel', cleanup);\n }\n\n protected handleButtonFocus(event: FocusEvent): void {\n // When focus comes from a pointer event, and the related target is the Menu,\n // we don't want to reopen the Menu.\n if (\n this.preventNextToggle === 'maybe' &&\n event.relatedTarget === this.optionsMenu\n ) {\n this.preventNextToggle = 'yes';\n }\n }\n\n protected handleButtonClick(): void {\n if (this.enterKeydownOn && this.enterKeydownOn !== this.button) {\n return;\n }\n if (this.preventNextToggle === 'yes') {\n return;\n }\n this.toggle();\n }\n\n public override focus(options?: FocusOptions): void {\n super.focus(options);\n\n if (!this.disabled && this.focusElement) {\n this.focused = this.hasVisibleFocusInTree();\n }\n }\n\n public handleHelperFocus(): void {\n // set focused to true here instead of handleButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public handleChange(event: Event): void {\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n event.stopPropagation();\n if (event.cancelable) {\n this.setValueFromItem(selected, event);\n } else {\n // Non-cancelable \"change\" events announce a selection with no value\n // change that should close the Picker element.\n this.open = false;\n }\n }\n\n protected handleKeydown = (event: KeyboardEvent): void => {\n this.focused = true;\n if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n return;\n }\n event.preventDefault();\n this.toggle(true);\n };\n\n protected async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n // should always close when \"setting\" a value.\n this.open = false;\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n\n // Set a value.\n this.selectedItem = item;\n this.value = item.value;\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n // Allow it to be prevented.\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault && this.selects) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem as MenuItem, false);\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, true);\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n return;\n } else if (!this.selects) {\n // Unset the value if not carrying a selection\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n return;\n }\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, false);\n }\n this.setMenuItemSelected(item, !!this.selects);\n }\n\n protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n // matches null | undefined\n if (this.selects == null) return;\n item.selected = value;\n }\n\n public toggle(target?: boolean): void {\n if (this.readonly) {\n return;\n }\n this.open = typeof target !== 'undefined' ? target : !this.open;\n }\n\n public close(): void {\n if (this.readonly) {\n return;\n }\n this.open = false;\n }\n\n protected get containerStyles(): StyleInfo {\n // @todo: test in mobile\n /* c8 ignore next 5 */\n if (this.isMobile.matches) {\n return {\n '--swc-menu-width': '100%',\n };\n }\n return {};\n }\n\n @property({ attribute: false })\n protected get selectedItemContent(): MenuItemChildren {\n return this._selectedItemContent || { icon: [], content: [] };\n }\n\n protected set selectedItemContent(\n selectedItemContent: MenuItemChildren | undefined\n ) {\n if (selectedItemContent === this.selectedItemContent) return;\n\n const oldContent = this.selectedItemContent;\n this._selectedItemContent = selectedItemContent;\n this.requestUpdate('selectedItemContent', oldContent);\n }\n\n _selectedItemContent?: MenuItemChildren;\n\n protected renderLabelContent(content: Node[]): TemplateResult | Node[] {\n if (this.value && this.selectedItem) {\n return content;\n }\n return html`\n <slot name=\"label\">\n <span\n aria-hidden=${ifDefined(\n this.appliedLabel ? undefined : 'true'\n )}\n >\n ${this.label}\n </span>\n </slot>\n `;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const labelClasses = {\n 'visually-hidden': this.icons === 'only' && !!this.value,\n placeholder: !this.value,\n };\n const appliedLabel = this.appliedLabel || this.label;\n return [\n html`\n <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n ${this.selectedItemContent.icon}\n </span>\n <span id=\"label\" class=${classMap(labelClasses)}>\n ${this.renderLabelContent(this.selectedItemContent.content)}\n </span>\n ${this.value && this.selectedItem\n ? html`\n <span\n aria-hidden=\"true\"\n class=\"visually-hidden\"\n id=\"applied-label\"\n >\n ${appliedLabel}\n <slot name=\"label\"></slot>\n </span>\n `\n : html`\n <span hidden id=\"applied-label\">${appliedLabel}</span>\n `}\n ${this.invalid\n ? html`\n <sp-icon-alert\n class=\"validation-icon\"\n ></sp-icon-alert>\n `\n : nothing}\n <sp-icon-chevron100\n class=\"picker ${chevronClass[\n this.size as DefaultElementSize\n ]}\"\n ></sp-icon-chevron100>\n <slot aria-hidden=\"true\" name=\"tooltip\" id=\"tooltip\"></slot>\n `,\n ];\n }\n\n applyFocusElementLabel = (value?: string): void => {\n this.appliedLabel = value;\n };\n\n protected renderOverlay(menu: TemplateResult): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n return html`\n <sp-overlay\n .triggerElement=${this as HTMLElement}\n .offset=${0}\n ?open=${this.open}\n .placement=${this.isMobile.matches ? undefined : this.placement}\n type=\"auto\"\n .receivesFocus=${'true'}\n @beforetoggle=${(\n event: Event & {\n target: Overlay;\n newState: 'open' | 'closed';\n }\n ) => {\n if (event.composedPath()[0] !== event.target) {\n return;\n }\n if (event.newState === 'closed') {\n this.open = false;\n }\n if (!this.open) {\n this.optionsMenu.updateSelectedItemIndex();\n this.optionsMenu.closeDescendentOverlays();\n }\n }}\n >\n ${this.renderContainer(menu)}\n </sp-overlay>\n `;\n }\n\n protected get renderDescriptionSlot(): TemplateResult {\n return html`\n <div id=${DESCRIPTION_ID}>\n <slot name=\"description\"></slot>\n </div>\n `;\n }\n // a helper to throw focus to the button is needed because Safari\n // won't include buttons in the tab order even with tabindex=\"0\"\n protected override render(): TemplateResult {\n return html`\n <span\n id=\"focus-helper\"\n tabindex=\"${this.focused || this.open ? '-1' : '0'}\"\n @focus=${this.handleHelperFocus}\n aria-describedby=${DESCRIPTION_ID}\n ></span>\n <button\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-describedby=\"tooltip\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"true\"\n aria-labelledby=\"icon label applied-label\"\n id=\"button\"\n class=\"button\"\n @blur=${this.handleButtonBlur}\n @pointerdown=${this.handleButtonPointerdown}\n @focus=${this.handleButtonFocus}\n @click=${this.handleButtonClick}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n tabindex=\"-1\"\n >\n ${this.buttonContent}\n </button>\n ${this.renderMenu} ${this.renderDescriptionSlot}\n `;\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (this.selects) {\n // Always force `selects` to \"single\" when set.\n // TODO: Add support functionally and visually for \"multiple\"\n this.selects = 'single';\n }\n if (changes.has('disabled') && this.disabled) {\n this.open = false;\n }\n if (changes.has('value')) {\n // MenuItems update a frame late for <slot> management,\n // await the same here.\n this.shouldScheduleManageSelection();\n }\n // Maybe it's finally time to remove this support?\n if (!this.hasUpdated) {\n this.deprecatedMenu = this.querySelector(':scope > sp-menu');\n this.deprecatedMenu?.toggleAttribute('ignore', true);\n this.deprecatedMenu?.setAttribute('selects', 'inherit');\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) {\n const { localName } = this;\n window.__swc.warn(\n this,\n `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n { level: 'deprecation' }\n );\n }\n }\n super.update(changes);\n }\n\n protected bindButtonKeydownListener(): void {\n this.button.addEventListener('keydown', this.handleKeydown);\n }\n\n protected override firstUpdated(changes: PropertyValues<this>): void {\n super.firstUpdated(changes);\n this.bindButtonKeydownListener();\n }\n\n protected get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n aria-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected renderContainer(menu: TemplateResult): TemplateResult {\n const accessibleMenu = html`\n ${this.dismissHelper} ${menu} ${this.dismissHelper}\n `;\n // @todo: test in mobile\n /* c8 ignore next 11 */\n if (this.isMobile.matches) {\n import('@spectrum-web-components/tray/sp-tray.js');\n return html`\n <sp-tray\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n >\n ${accessibleMenu}\n </sp-tray>\n `;\n }\n import('@spectrum-web-components/popover/sp-popover.js');\n return html`\n <sp-popover\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n placement=${this.placement}\n >\n ${accessibleMenu}\n </sp-popover>\n `;\n }\n\n protected hasRenderedOverlay = false;\n\n protected get renderMenu(): TemplateResult {\n const menu = html`\n <sp-menu\n aria-labelledby=\"applied-label\"\n @change=${this.handleChange}\n id=\"menu\"\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n role=${this.listRole}\n .selects=${this.selects}\n .selected=${this.value ? [this.value] : []}\n size=${this.size}\n @sp-menu-item-added-or-updated=${this.shouldManageSelection}\n >\n <slot @slotchange=${this.shouldScheduleManageSelection}></slot>\n </sp-menu>\n `;\n this.hasRenderedOverlay =\n this.hasRenderedOverlay ||\n this.focused ||\n this.open ||\n !!this.deprecatedMenu;\n if (this.hasRenderedOverlay) {\n return this.renderOverlay(menu);\n }\n return menu;\n }\n\n private willManageSelection = false;\n\n protected shouldScheduleManageSelection(event?: Event): void {\n if (\n !this.willManageSelection &&\n (!event ||\n ((event.target as HTMLElement).getRootNode() as ShadowRoot)\n .host === this)\n ) {\n this.willManageSelection = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.manageSelection();\n });\n });\n }\n }\n\n protected shouldManageSelection(): void {\n if (this.willManageSelection) {\n return;\n }\n this.willManageSelection = true;\n this.manageSelection();\n }\n\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\n await this.optionsMenu.updateComplete;\n if (this.recentlyConnected) {\n // Work around for attach timing differences in Safari and Firefox.\n // Remove when refactoring to Menu passthrough wrapper.\n await new Promise((res) => requestAnimationFrame(() => res(true)));\n this.recentlyConnected = false;\n }\n this.menuItems.forEach((item) => {\n if (this.value === item.value && !item.disabled) {\n selectedItem = item;\n } else {\n item.selected = false;\n }\n });\n if (selectedItem) {\n selectedItem.selected = !!this.selects;\n this.selectedItem = selectedItem;\n } else {\n this.value = '';\n this.selectedItem = undefined;\n }\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.optionsMenu.updateSelectedItemIndex();\n }\n this.selectionResolver();\n this.willManageSelection = false;\n }\n\n private selectionPromise = Promise.resolve();\n private selectionResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.selectionPromise;\n if (this.overlayElement) {\n await this.overlayElement.updateComplete;\n }\n return complete;\n }\n\n private recentlyConnected = false;\n\n private enterKeydownOn: EventTarget | null = null;\n\n protected handleEnterKeydown = (event: KeyboardEvent): void => {\n if (event.code !== 'Enter') {\n return;\n }\n\n if (this.enterKeydownOn) {\n event.preventDefault();\n return;\n } else {\n this.addEventListener(\n 'keyup',\n (keyupEvent: KeyboardEvent) => {\n if (keyupEvent.code !== 'Enter') {\n return;\n }\n this.enterKeydownOn = null;\n },\n { once: true }\n );\n }\n this.enterKeydownOn = this.enterKeydownOn || event.target;\n };\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.recentlyConnected = this.hasUpdated;\n }\n\n public override disconnectedCallback(): void {\n this.close();\n\n super.disconnectedCallback();\n }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot description - The description content for the Picker\n * @slot tooltip - Tooltip to to be applied to the the Picker Button\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override get containerStyles(): StyleInfo {\n const styles = super.containerStyles;\n if (!this.quiet) {\n styles['min-width'] = `${this.offsetWidth}px`;\n }\n return styles;\n }\n\n protected override handleKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n this.focused = true;\n if (!code.startsWith('Arrow') || this.readonly) {\n return;\n }\n if (code === 'ArrowUp' || code === 'ArrowDown') {\n this.toggle(true);\n return;\n }\n event.preventDefault();\n const selectedIndex = this.selectedItem\n ? this.menuItems.indexOf(this.selectedItem)\n : -1;\n // use a positive offset to find the first non-disabled item when no selection is available.\n const nextOffset = selectedIndex < 0 || code === 'ArrowRight' ? 1 : -1;\n let nextIndex = selectedIndex + nextOffset;\n while (\n this.menuItems[nextIndex] &&\n this.menuItems[nextIndex].disabled\n ) {\n nextIndex += nextOffset;\n }\n if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {\n return;\n }\n if (!this.value || nextIndex !== selectedIndex) {\n this.setValueFromItem(this.menuItems[nextIndex]);\n }\n };\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Picker.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=(d,
|
|
1
|
+
"use strict";var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=(a,d,e,t)=>{for(var s=t>1?void 0:t?m(d,e):d,r=a.length-1,o;r>=0;r--)(o=a[r])&&(s=(t?o(d,e,s):o(s))||s);return t&&s&&h(d,e,s),s};import{html as i,nothing as f,SizedMixin as v}from"@spectrum-web-components/base";import{classMap as b,ifDefined as c,styleMap as p}from"@spectrum-web-components/base/src/directives.js";import{property as l,query as u,state as y}from"@spectrum-web-components/base/src/decorators.js";import I from"./picker.css.js";import g from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import{Focusable as w}from"@spectrum-web-components/shared/src/focusable.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import"@spectrum-web-components/menu/sp-menu.js";import{IS_MOBILE as M,MatchMediaController as S}from"@spectrum-web-components/reactive-controllers/src/MatchMedia.js";const $={s:"spectrum-UIIcon-ChevronDown75",m:"spectrum-UIIcon-ChevronDown100",l:"spectrum-UIIcon-ChevronDown200",xl:"spectrum-UIIcon-ChevronDown300"};export const DESCRIPTION_ID="option-picker";export class PickerBase extends v(w,{noDefaultSize:!0}){constructor(){super(...arguments);this.isMobile=new S(this,M);this.deprecatedMenu=null;this.disabled=!1;this.focused=!1;this.invalid=!1;this.open=!1;this.readonly=!1;this.selects="single";this.placement="bottom-start";this.quiet=!1;this.value="";this.listRole="listbox";this.itemRole="option";this.preventNextToggle="no";this.handleKeydown=e=>{this.focused=!0,!(e.code!=="ArrowDown"&&e.code!=="ArrowUp")&&(e.preventDefault(),this.toggle(!0))};this.applyFocusElementLabel=e=>{this.appliedLabel=e};this.hasRenderedOverlay=!1;this.willManageSelection=!1;this.selectionPromise=Promise.resolve();this.recentlyConnected=!1;this.enterKeydownOn=null;this.handleEnterKeydown=e=>{if(e.code==="Enter"){if(this.enterKeydownOn){e.preventDefault();return}else this.addEventListener("keyup",t=>{t.code==="Enter"&&(this.enterKeydownOn=null)},{once:!0});this.enterKeydownOn=this.enterKeydownOn||e.target}}}get menuItems(){return this.optionsMenu.childItems}get selectedItem(){return this._selectedItem}set selectedItem(e){if(this.selectedItemContent=e?e.itemChildren:void 0,e===this.selectedItem)return;const t=this.selectedItem;this._selectedItem=e,this.requestUpdate("selectedItem",t)}get focusElement(){return this.open?this.optionsMenu:this.button}forceFocusVisible(){this.focused=!0}handleButtonBlur(){this.focused=!1}handleButtonPointerdown(){this.preventNextToggle="maybe";const e=()=>{document.removeEventListener("pointerup",e),document.removeEventListener("pointercancel",e),requestAnimationFrame(()=>{this.preventNextToggle="no"})};document.addEventListener("pointerup",e),document.addEventListener("pointercancel",e)}handleButtonFocus(e){this.preventNextToggle==="maybe"&&e.relatedTarget===this.optionsMenu&&(this.preventNextToggle="yes")}handleButtonClick(){this.enterKeydownOn&&this.enterKeydownOn!==this.button||this.preventNextToggle!=="yes"&&this.toggle()}focus(e){super.focus(e),!this.disabled&&this.focusElement&&(this.focused=this.hasVisibleFocusInTree())}handleHelperFocus(){this.focused=!0,this.button.focus()}handleChange(e){const t=e.target,[s]=t.selectedItems;e.stopPropagation(),e.cancelable?this.setValueFromItem(s,e):this.open=!1}async setValueFromItem(e,t){this.open=!1;const s=this.selectedItem,r=this.value;if(this.selectedItem=e,this.value=e.value,await this.updateComplete,!this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))&&this.selects){t&&t.preventDefault(),this.setMenuItemSelected(this.selectedItem,!1),s&&this.setMenuItemSelected(s,!0),this.selectedItem=s,this.value=r,this.open=!0;return}else if(!this.selects){this.selectedItem=s,this.value=r;return}s&&this.setMenuItemSelected(s,!1),this.setMenuItemSelected(e,!!this.selects)}setMenuItemSelected(e,t){this.selects!=null&&(e.selected=t)}toggle(e){this.readonly||(this.open=typeof e!="undefined"?e:!this.open)}close(){this.readonly||(this.open=!1)}get containerStyles(){return this.isMobile.matches?{"--swc-menu-width":"100%"}:{}}get selectedItemContent(){return this._selectedItemContent||{icon:[],content:[]}}set selectedItemContent(e){if(e===this.selectedItemContent)return;const t=this.selectedItemContent;this._selectedItemContent=e,this.requestUpdate("selectedItemContent",t)}renderLabelContent(e){return this.value&&this.selectedItem?e:i`
|
|
2
2
|
<slot name="label">
|
|
3
3
|
<span
|
|
4
4
|
aria-hidden=${c(this.appliedLabel?void 0:"true")}
|
|
@@ -6,14 +6,14 @@
|
|
|
6
6
|
${this.label}
|
|
7
7
|
</span>
|
|
8
8
|
</slot>
|
|
9
|
-
`}get buttonContent(){const e={"visually-hidden":this.icons==="only"&&!!this.value,placeholder:!this.value},t=this.appliedLabel||this.label;return[
|
|
9
|
+
`}get buttonContent(){const e={"visually-hidden":this.icons==="only"&&!!this.value,placeholder:!this.value},t=this.appliedLabel||this.label;return[i`
|
|
10
10
|
<span id="icon" ?hidden=${this.icons==="none"}>
|
|
11
11
|
${this.selectedItemContent.icon}
|
|
12
12
|
</span>
|
|
13
13
|
<span id="label" class=${b(e)}>
|
|
14
14
|
${this.renderLabelContent(this.selectedItemContent.content)}
|
|
15
15
|
</span>
|
|
16
|
-
${this.value&&this.selectedItem?
|
|
16
|
+
${this.value&&this.selectedItem?i`
|
|
17
17
|
<span
|
|
18
18
|
aria-hidden="true"
|
|
19
19
|
class="visually-hidden"
|
|
@@ -22,10 +22,10 @@
|
|
|
22
22
|
${t}
|
|
23
23
|
<slot name="label"></slot>
|
|
24
24
|
</span>
|
|
25
|
-
`:
|
|
25
|
+
`:i`
|
|
26
26
|
<span hidden id="applied-label">${t}</span>
|
|
27
27
|
`}
|
|
28
|
-
${this.invalid?
|
|
28
|
+
${this.invalid?i`
|
|
29
29
|
<sp-icon-alert
|
|
30
30
|
class="validation-icon"
|
|
31
31
|
></sp-icon-alert>
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
class="picker ${$[this.size]}"
|
|
35
35
|
></sp-icon-chevron100>
|
|
36
36
|
<slot aria-hidden="true" name="tooltip" id="tooltip"></slot>
|
|
37
|
-
`]}renderOverlay(e){return import("@spectrum-web-components/overlay/sp-overlay.js"),
|
|
37
|
+
`]}renderOverlay(e){return import("@spectrum-web-components/overlay/sp-overlay.js"),i`
|
|
38
38
|
<sp-overlay
|
|
39
39
|
.triggerElement=${this}
|
|
40
40
|
.offset=${0}
|
|
@@ -46,11 +46,16 @@
|
|
|
46
46
|
>
|
|
47
47
|
${this.renderContainer(e)}
|
|
48
48
|
</sp-overlay>
|
|
49
|
-
`}
|
|
49
|
+
`}get renderDescriptionSlot(){return i`
|
|
50
|
+
<div id=${DESCRIPTION_ID}>
|
|
51
|
+
<slot name="description"></slot>
|
|
52
|
+
</div>
|
|
53
|
+
`}render(){return i`
|
|
50
54
|
<span
|
|
51
55
|
id="focus-helper"
|
|
52
56
|
tabindex="${this.focused||this.open?"-1":"0"}"
|
|
53
57
|
@focus=${this.handleHelperFocus}
|
|
58
|
+
aria-describedby=${DESCRIPTION_ID}
|
|
54
59
|
></span>
|
|
55
60
|
<button
|
|
56
61
|
aria-controls=${c(this.open?"menu":void 0)}
|
|
@@ -70,8 +75,8 @@
|
|
|
70
75
|
>
|
|
71
76
|
${this.buttonContent}
|
|
72
77
|
</button>
|
|
73
|
-
${this.renderMenu}
|
|
74
|
-
`}update(e){var t,s;this.selects&&(this.selects="single"),e.has("disabled")&&this.disabled&&(this.open=!1),e.has("value")&&this.shouldScheduleManageSelection(),this.hasUpdated||(this.deprecatedMenu=this.querySelector(":scope > sp-menu"),(t=this.deprecatedMenu)==null||t.toggleAttribute("ignore",!0),(s=this.deprecatedMenu)==null||s.setAttribute("selects","inherit")),super.update(e)}bindButtonKeydownListener(){this.button.addEventListener("keydown",this.handleKeydown)}firstUpdated(e){super.firstUpdated(e),this.bindButtonKeydownListener()}get dismissHelper(){return
|
|
78
|
+
${this.renderMenu} ${this.renderDescriptionSlot}
|
|
79
|
+
`}update(e){var t,s;this.selects&&(this.selects="single"),e.has("disabled")&&this.disabled&&(this.open=!1),e.has("value")&&this.shouldScheduleManageSelection(),this.hasUpdated||(this.deprecatedMenu=this.querySelector(":scope > sp-menu"),(t=this.deprecatedMenu)==null||t.toggleAttribute("ignore",!0),(s=this.deprecatedMenu)==null||s.setAttribute("selects","inherit")),super.update(e)}bindButtonKeydownListener(){this.button.addEventListener("keydown",this.handleKeydown)}firstUpdated(e){super.firstUpdated(e),this.bindButtonKeydownListener()}get dismissHelper(){return i`
|
|
75
80
|
<div class="visually-hidden">
|
|
76
81
|
<button
|
|
77
82
|
tabindex="-1"
|
|
@@ -79,9 +84,9 @@
|
|
|
79
84
|
@click=${this.close}
|
|
80
85
|
></button>
|
|
81
86
|
</div>
|
|
82
|
-
`}renderContainer(e){const t=
|
|
87
|
+
`}renderContainer(e){const t=i`
|
|
83
88
|
${this.dismissHelper} ${e} ${this.dismissHelper}
|
|
84
|
-
`;return this.isMobile.matches?(import("@spectrum-web-components/tray/sp-tray.js"),
|
|
89
|
+
`;return this.isMobile.matches?(import("@spectrum-web-components/tray/sp-tray.js"),i`
|
|
85
90
|
<sp-tray
|
|
86
91
|
id="popover"
|
|
87
92
|
role="presentation"
|
|
@@ -89,7 +94,7 @@
|
|
|
89
94
|
>
|
|
90
95
|
${t}
|
|
91
96
|
</sp-tray>
|
|
92
|
-
`):(import("@spectrum-web-components/popover/sp-popover.js"),
|
|
97
|
+
`):(import("@spectrum-web-components/popover/sp-popover.js"),i`
|
|
93
98
|
<sp-popover
|
|
94
99
|
id="popover"
|
|
95
100
|
role="presentation"
|
|
@@ -98,7 +103,7 @@
|
|
|
98
103
|
>
|
|
99
104
|
${t}
|
|
100
105
|
</sp-popover>
|
|
101
|
-
`)}get renderMenu(){const e=
|
|
106
|
+
`)}get renderMenu(){const e=i`
|
|
102
107
|
<sp-menu
|
|
103
108
|
aria-labelledby="applied-label"
|
|
104
109
|
@change=${this.handleChange}
|
|
@@ -112,5 +117,5 @@
|
|
|
112
117
|
>
|
|
113
118
|
<slot @slotchange=${this.shouldScheduleManageSelection}></slot>
|
|
114
119
|
</sp-menu>
|
|
115
|
-
`;return this.hasRenderedOverlay=this.hasRenderedOverlay||this.focused||this.open||!!this.deprecatedMenu,this.hasRenderedOverlay?this.renderOverlay(e):e}shouldScheduleManageSelection(e){!this.willManageSelection&&(!e||e.target.getRootNode().host===this)&&(this.willManageSelection=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.manageSelection()})}))}shouldManageSelection(){this.willManageSelection||(this.willManageSelection=!0,this.manageSelection())}async manageSelection(){if(this.selects==null)return;this.selectionPromise=new Promise(t=>this.selectionResolver=t);let e;await this.optionsMenu.updateComplete,this.recentlyConnected&&(await new Promise(t=>requestAnimationFrame(()=>t(!0))),this.recentlyConnected=!1),this.menuItems.forEach(t=>{this.value===t.value&&!t.disabled?e=t:t.selected=!1}),e?(e.selected=!!this.selects,this.selectedItem=e):(this.value="",this.selectedItem=void 0),this.open&&(await this.optionsMenu.updateComplete,this.optionsMenu.updateSelectedItemIndex()),this.selectionResolver(),this.willManageSelection=!1}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.selectionPromise,this.overlayElement&&await this.overlayElement.updateComplete,e}connectedCallback(){super.connectedCallback(),this.recentlyConnected=this.hasUpdated}disconnectedCallback(){this.close(),super.disconnectedCallback()}}n([y()],PickerBase.prototype,"appliedLabel",2),n([u("#button")],PickerBase.prototype,"button",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"disabled",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"focused",2),n([l({type:String,reflect:!0})],PickerBase.prototype,"icons",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"invalid",2),n([l()],PickerBase.prototype,"label",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"open",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"readonly",2),n([u("sp-menu")],PickerBase.prototype,"optionsMenu",2),n([u("sp-overlay")],PickerBase.prototype,"overlayElement",2),n([l()],PickerBase.prototype,"placement",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"quiet",2),n([l({type:String})],PickerBase.prototype,"value",2),n([l({attribute:!1})],PickerBase.prototype,"selectedItem",1),n([l({attribute:!1})],PickerBase.prototype,"selectedItemContent",1);export class Picker extends PickerBase{constructor(){super(...arguments);this.handleKeydown=e=>{const{code:t}=e;if(this.focused=!0,!t.startsWith("Arrow")||this.readonly)return;if(t==="ArrowUp"||t==="ArrowDown"){this.toggle(!0);return}e.preventDefault();const s=this.selectedItem?this.menuItems.indexOf(this.selectedItem):-1,r=s<0||t==="ArrowRight"?1:-1;let
|
|
120
|
+
`;return this.hasRenderedOverlay=this.hasRenderedOverlay||this.focused||this.open||!!this.deprecatedMenu,this.hasRenderedOverlay?this.renderOverlay(e):e}shouldScheduleManageSelection(e){!this.willManageSelection&&(!e||e.target.getRootNode().host===this)&&(this.willManageSelection=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.manageSelection()})}))}shouldManageSelection(){this.willManageSelection||(this.willManageSelection=!0,this.manageSelection())}async manageSelection(){if(this.selects==null)return;this.selectionPromise=new Promise(t=>this.selectionResolver=t);let e;await this.optionsMenu.updateComplete,this.recentlyConnected&&(await new Promise(t=>requestAnimationFrame(()=>t(!0))),this.recentlyConnected=!1),this.menuItems.forEach(t=>{this.value===t.value&&!t.disabled?e=t:t.selected=!1}),e?(e.selected=!!this.selects,this.selectedItem=e):(this.value="",this.selectedItem=void 0),this.open&&(await this.optionsMenu.updateComplete,this.optionsMenu.updateSelectedItemIndex()),this.selectionResolver(),this.willManageSelection=!1}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.selectionPromise,this.overlayElement&&await this.overlayElement.updateComplete,e}connectedCallback(){super.connectedCallback(),this.recentlyConnected=this.hasUpdated}disconnectedCallback(){this.close(),super.disconnectedCallback()}}n([y()],PickerBase.prototype,"appliedLabel",2),n([u("#button")],PickerBase.prototype,"button",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"disabled",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"focused",2),n([l({type:String,reflect:!0})],PickerBase.prototype,"icons",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"invalid",2),n([l()],PickerBase.prototype,"label",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"open",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"readonly",2),n([u("sp-menu")],PickerBase.prototype,"optionsMenu",2),n([u("sp-overlay")],PickerBase.prototype,"overlayElement",2),n([l()],PickerBase.prototype,"placement",2),n([l({type:Boolean,reflect:!0})],PickerBase.prototype,"quiet",2),n([l({type:String})],PickerBase.prototype,"value",2),n([l({attribute:!1})],PickerBase.prototype,"selectedItem",1),n([l({attribute:!1})],PickerBase.prototype,"selectedItemContent",1);export class Picker extends PickerBase{constructor(){super(...arguments);this.handleKeydown=e=>{const{code:t}=e;if(this.focused=!0,!t.startsWith("Arrow")||this.readonly)return;if(t==="ArrowUp"||t==="ArrowDown"){this.toggle(!0);return}e.preventDefault();const s=this.selectedItem?this.menuItems.indexOf(this.selectedItem):-1,r=s<0||t==="ArrowRight"?1:-1;let o=s+r;for(;this.menuItems[o]&&this.menuItems[o].disabled;)o+=r;!this.menuItems[o]||this.menuItems[o].disabled||(!this.value||o!==s)&&this.setValueFromItem(this.menuItems[o])}}static get styles(){return[I,g]}get containerStyles(){const e=super.containerStyles;return this.quiet||(e["min-width"]=`${this.offsetWidth}px`),e}}
|
|
116
121
|
//# sourceMappingURL=Picker.js.map
|
package/src/Picker.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Picker.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n ifDefined,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n Menu,\n MenuItem,\n MenuItemChildren,\n} from '@spectrum-web-components/menu';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport type { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\n\nconst chevronClass = {\n s: 'spectrum-UIIcon-ChevronDown75',\n m: 'spectrum-UIIcon-ChevronDown100',\n l: 'spectrum-UIIcon-ChevronDown200',\n xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {\n protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n @state()\n appliedLabel?: string;\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n private deprecatedMenu: Menu | null = null;\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String, reflect: true })\n public icons?: 'only' | 'none';\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n public selects: undefined | 'single' = 'single';\n\n protected get menuItems(): MenuItem[] {\n return this.optionsMenu.childItems;\n }\n\n @query('sp-menu')\n protected optionsMenu!: Menu;\n\n @query('sp-overlay')\n protected overlayElement!: Overlay;\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n\n @property()\n public placement: Placement = 'bottom-start';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public value = '';\n\n @property({ attribute: false })\n public get selectedItem(): MenuItem | undefined {\n return this._selectedItem;\n }\n\n public set selectedItem(selectedItem: MenuItem | undefined) {\n this.selectedItemContent = selectedItem\n ? selectedItem.itemChildren\n : undefined;\n\n if (selectedItem === this.selectedItem) return;\n const oldSelectedItem = this.selectedItem;\n this._selectedItem = selectedItem;\n this.requestUpdate('selectedItem', oldSelectedItem);\n }\n\n _selectedItem?: MenuItem;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public override get focusElement(): HTMLElement {\n if (this.open) {\n return this.optionsMenu;\n }\n return this.button;\n }\n\n public forceFocusVisible(): void {\n this.focused = true;\n }\n\n public handleButtonBlur(): void {\n this.focused = false;\n }\n\n protected preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';\n\n protected handleButtonPointerdown(): void {\n this.preventNextToggle = 'maybe';\n const cleanup = (): void => {\n document.removeEventListener('pointerup', cleanup);\n document.removeEventListener('pointercancel', cleanup);\n requestAnimationFrame(() => {\n // Complete cleanup on the animation frame so that `click` can go first.\n this.preventNextToggle = 'no';\n });\n };\n // Ensure that however the pointer goes up we do `cleanup()`.\n document.addEventListener('pointerup', cleanup);\n document.addEventListener('pointercancel', cleanup);\n }\n\n protected handleButtonFocus(event: FocusEvent): void {\n // When focus comes from a pointer event, and the related target is the Menu,\n // we don't want to reopen the Menu.\n if (\n this.preventNextToggle === 'maybe' &&\n event.relatedTarget === this.optionsMenu\n ) {\n this.preventNextToggle = 'yes';\n }\n }\n\n protected handleButtonClick(): void {\n if (this.enterKeydownOn && this.enterKeydownOn !== this.button) {\n return;\n }\n if (this.preventNextToggle === 'yes') {\n return;\n }\n this.toggle();\n }\n\n public override focus(options?: FocusOptions): void {\n super.focus(options);\n\n if (!this.disabled && this.focusElement) {\n this.focused = this.hasVisibleFocusInTree();\n }\n }\n\n public handleHelperFocus(): void {\n // set focused to true here instead of handleButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public handleChange(event: Event): void {\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n event.stopPropagation();\n if (event.cancelable) {\n this.setValueFromItem(selected, event);\n } else {\n // Non-cancelable \"change\" events announce a selection with no value\n // change that should close the Picker element.\n this.open = false;\n }\n }\n\n protected handleKeydown = (event: KeyboardEvent): void => {\n this.focused = true;\n if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n return;\n }\n event.preventDefault();\n this.toggle(true);\n };\n\n protected async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n // should always close when \"setting\" a value.\n this.open = false;\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n\n // Set a value.\n this.selectedItem = item;\n this.value = item.value;\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n // Allow it to be prevented.\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault && this.selects) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem as MenuItem, false);\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, true);\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n return;\n } else if (!this.selects) {\n // Unset the value if not carrying a selection\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n return;\n }\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, false);\n }\n this.setMenuItemSelected(item, !!this.selects);\n }\n\n protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n // matches null | undefined\n if (this.selects == null) return;\n item.selected = value;\n }\n\n public toggle(target?: boolean): void {\n if (this.readonly) {\n return;\n }\n this.open = typeof target !== 'undefined' ? target : !this.open;\n }\n\n public close(): void {\n if (this.readonly) {\n return;\n }\n this.open = false;\n }\n\n protected get containerStyles(): StyleInfo {\n // @todo: test in mobile\n /* c8 ignore next 5 */\n if (this.isMobile.matches) {\n return {\n '--swc-menu-width': '100%',\n };\n }\n return {};\n }\n\n @property({ attribute: false })\n protected get selectedItemContent(): MenuItemChildren {\n return this._selectedItemContent || { icon: [], content: [] };\n }\n\n protected set selectedItemContent(\n selectedItemContent: MenuItemChildren | undefined\n ) {\n if (selectedItemContent === this.selectedItemContent) return;\n\n const oldContent = this.selectedItemContent;\n this._selectedItemContent = selectedItemContent;\n this.requestUpdate('selectedItemContent', oldContent);\n }\n\n _selectedItemContent?: MenuItemChildren;\n\n protected renderLabelContent(content: Node[]): TemplateResult | Node[] {\n if (this.value && this.selectedItem) {\n return content;\n }\n return html`\n <slot name=\"label\">\n <span\n aria-hidden=${ifDefined(\n this.appliedLabel ? undefined : 'true'\n )}\n >\n ${this.label}\n </span>\n </slot>\n `;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const labelClasses = {\n 'visually-hidden': this.icons === 'only' && !!this.value,\n placeholder: !this.value,\n };\n const appliedLabel = this.appliedLabel || this.label;\n return [\n html`\n <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n ${this.selectedItemContent.icon}\n </span>\n <span id=\"label\" class=${classMap(labelClasses)}>\n ${this.renderLabelContent(this.selectedItemContent.content)}\n </span>\n ${this.value && this.selectedItem\n ? html`\n <span\n aria-hidden=\"true\"\n class=\"visually-hidden\"\n id=\"applied-label\"\n >\n ${appliedLabel}\n <slot name=\"label\"></slot>\n </span>\n `\n : html`\n <span hidden id=\"applied-label\">${appliedLabel}</span>\n `}\n ${this.invalid\n ? html`\n <sp-icon-alert\n class=\"validation-icon\"\n ></sp-icon-alert>\n `\n : nothing}\n <sp-icon-chevron100\n class=\"picker ${chevronClass[\n this.size as DefaultElementSize\n ]}\"\n ></sp-icon-chevron100>\n <slot aria-hidden=\"true\" name=\"tooltip\" id=\"tooltip\"></slot>\n `,\n ];\n }\n\n applyFocusElementLabel = (value?: string): void => {\n this.appliedLabel = value;\n };\n\n protected renderOverlay(menu: TemplateResult): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n return html`\n <sp-overlay\n .triggerElement=${this as HTMLElement}\n .offset=${0}\n ?open=${this.open}\n .placement=${this.isMobile.matches ? undefined : this.placement}\n type=\"auto\"\n .receivesFocus=${'true'}\n @beforetoggle=${(\n event: Event & {\n target: Overlay;\n newState: 'open' | 'closed';\n }\n ) => {\n if (event.composedPath()[0] !== event.target) {\n return;\n }\n if (event.newState === 'closed') {\n this.open = false;\n }\n if (!this.open) {\n this.optionsMenu.updateSelectedItemIndex();\n this.optionsMenu.closeDescendentOverlays();\n }\n }}\n >\n ${this.renderContainer(menu)}\n </sp-overlay>\n `;\n }\n\n // a helper to throw focus to the button is needed because Safari\n // won't include buttons in the tab order even with tabindex=\"0\"\n protected override render(): TemplateResult {\n return html`\n <span\n id=\"focus-helper\"\n tabindex=\"${this.focused || this.open ? '-1' : '0'}\"\n @focus=${this.handleHelperFocus}\n ></span>\n <button\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-describedby=\"tooltip\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"true\"\n aria-labelledby=\"icon label applied-label\"\n id=\"button\"\n class=\"button\"\n @blur=${this.handleButtonBlur}\n @pointerdown=${this.handleButtonPointerdown}\n @focus=${this.handleButtonFocus}\n @click=${this.handleButtonClick}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n tabindex=\"-1\"\n >\n ${this.buttonContent}\n </button>\n ${this.renderMenu}\n `;\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (this.selects) {\n // Always force `selects` to \"single\" when set.\n // TODO: Add support functionally and visually for \"multiple\"\n this.selects = 'single';\n }\n if (changes.has('disabled') && this.disabled) {\n this.open = false;\n }\n if (changes.has('value')) {\n // MenuItems update a frame late for <slot> management,\n // await the same here.\n this.shouldScheduleManageSelection();\n }\n // Maybe it's finally time to remove this support?\n if (!this.hasUpdated) {\n this.deprecatedMenu = this.querySelector(':scope > sp-menu');\n this.deprecatedMenu?.toggleAttribute('ignore', true);\n this.deprecatedMenu?.setAttribute('selects', 'inherit');\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) {\n const { localName } = this;\n window.__swc.warn(\n this,\n `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n { level: 'deprecation' }\n );\n }\n }\n super.update(changes);\n }\n\n protected bindButtonKeydownListener(): void {\n this.button.addEventListener('keydown', this.handleKeydown);\n }\n\n protected override firstUpdated(changes: PropertyValues<this>): void {\n super.firstUpdated(changes);\n this.bindButtonKeydownListener();\n }\n\n protected get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n aria-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected renderContainer(menu: TemplateResult): TemplateResult {\n const accessibleMenu = html`\n ${this.dismissHelper} ${menu} ${this.dismissHelper}\n `;\n // @todo: test in mobile\n /* c8 ignore next 11 */\n if (this.isMobile.matches) {\n import('@spectrum-web-components/tray/sp-tray.js');\n return html`\n <sp-tray\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n >\n ${accessibleMenu}\n </sp-tray>\n `;\n }\n import('@spectrum-web-components/popover/sp-popover.js');\n return html`\n <sp-popover\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n placement=${this.placement}\n >\n ${accessibleMenu}\n </sp-popover>\n `;\n }\n\n protected hasRenderedOverlay = false;\n\n protected get renderMenu(): TemplateResult {\n const menu = html`\n <sp-menu\n aria-labelledby=\"applied-label\"\n @change=${this.handleChange}\n id=\"menu\"\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n role=${this.listRole}\n .selects=${this.selects}\n .selected=${this.value ? [this.value] : []}\n size=${this.size}\n @sp-menu-item-added-or-updated=${this.shouldManageSelection}\n >\n <slot @slotchange=${this.shouldScheduleManageSelection}></slot>\n </sp-menu>\n `;\n this.hasRenderedOverlay =\n this.hasRenderedOverlay ||\n this.focused ||\n this.open ||\n !!this.deprecatedMenu;\n if (this.hasRenderedOverlay) {\n return this.renderOverlay(menu);\n }\n return menu;\n }\n\n private willManageSelection = false;\n\n protected shouldScheduleManageSelection(event?: Event): void {\n if (\n !this.willManageSelection &&\n (!event ||\n ((event.target as HTMLElement).getRootNode() as ShadowRoot)\n .host === this)\n ) {\n this.willManageSelection = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.manageSelection();\n });\n });\n }\n }\n\n protected shouldManageSelection(): void {\n if (this.willManageSelection) {\n return;\n }\n this.willManageSelection = true;\n this.manageSelection();\n }\n\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\n await this.optionsMenu.updateComplete;\n if (this.recentlyConnected) {\n // Work around for attach timing differences in Safari and Firefox.\n // Remove when refactoring to Menu passthrough wrapper.\n await new Promise((res) => requestAnimationFrame(() => res(true)));\n this.recentlyConnected = false;\n }\n this.menuItems.forEach((item) => {\n if (this.value === item.value && !item.disabled) {\n selectedItem = item;\n } else {\n item.selected = false;\n }\n });\n if (selectedItem) {\n selectedItem.selected = !!this.selects;\n this.selectedItem = selectedItem;\n } else {\n this.value = '';\n this.selectedItem = undefined;\n }\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.optionsMenu.updateSelectedItemIndex();\n }\n this.selectionResolver();\n this.willManageSelection = false;\n }\n\n private selectionPromise = Promise.resolve();\n private selectionResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.selectionPromise;\n if (this.overlayElement) {\n await this.overlayElement.updateComplete;\n }\n return complete;\n }\n\n private recentlyConnected = false;\n\n private enterKeydownOn: EventTarget | null = null;\n\n protected handleEnterKeydown = (event: KeyboardEvent): void => {\n if (event.code !== 'Enter') {\n return;\n }\n\n if (this.enterKeydownOn) {\n event.preventDefault();\n return;\n } else {\n this.addEventListener(\n 'keyup',\n (keyupEvent: KeyboardEvent) => {\n if (keyupEvent.code !== 'Enter') {\n return;\n }\n this.enterKeydownOn = null;\n },\n { once: true }\n );\n }\n this.enterKeydownOn = this.enterKeydownOn || event.target;\n };\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.recentlyConnected = this.hasUpdated;\n }\n\n public override disconnectedCallback(): void {\n this.close();\n\n super.disconnectedCallback();\n }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot tooltip - Tooltip to to be applied to the the Picker Button\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override get containerStyles(): StyleInfo {\n const styles = super.containerStyles;\n if (!this.quiet) {\n styles['min-width'] = `${this.offsetWidth}px`;\n }\n return styles;\n }\n\n protected override handleKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n this.focused = true;\n if (!code.startsWith('Arrow') || this.readonly) {\n return;\n }\n if (code === 'ArrowUp' || code === 'ArrowDown') {\n this.toggle(true);\n return;\n }\n event.preventDefault();\n const selectedIndex = this.selectedItem\n ? this.menuItems.indexOf(this.selectedItem)\n : -1;\n // use a positive offset to find the first non-disabled item when no selection is available.\n const nextOffset = selectedIndex < 0 || code === 'ArrowRight' ? 1 : -1;\n let nextIndex = selectedIndex + nextOffset;\n while (\n this.menuItems[nextIndex] &&\n this.menuItems[nextIndex].disabled\n ) {\n nextIndex += nextOffset;\n }\n if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {\n return;\n }\n if (!this.value || nextIndex !== selectedIndex) {\n this.setValueFromItem(this.menuItems[nextIndex]);\n }\n };\n}\n"],
|
|
5
|
-
"mappings": "qNAYA,OAGI,QAAAA,EACA,WAAAC,EAEA,cAAAC,MAEG,gCACP,OACI,YAAAC,EACA,aAAAC,EAEA,YAAAC,MACG,kDACP,OACI,YAAAC,EACA,SAAAC,EACA,SAAAC,MACG,kDAEP,OAAOC,MAAkB,kBACzB,OAAOC,MAAmB,iEAE1B,OAAS,aAAAC,MAAiB,mDAC1B,MAAO,gEACP,MAAO,iEACP,MAAO,2CAOP,OACI,aAAAC,EACA,wBAAAC,MACG,kEAGP,MAAMC,EAAe,CACjB,EAAG,gCACH,EAAG,iCACH,EAAG,iCACH,GAAI,gCACR,EAEO,aAAM,mBAAmBZ,EAAWS,EAAW,CAAE,cAAe,EAAK,CAAC,CAAE,CAAxE,kCACH,KAAU,SAAW,IAAIE,EAAqB,KAAMD,CAAS,EAQ7D,KAAQ,eAA8B,KAGtC,KAAgB,SAAW,GAG3B,KAAO,QAAU,GAMjB,KAAO,QAAU,GAMjB,KAAO,KAAO,GAGd,KAAO,SAAW,GAElB,KAAO,QAAgC,SAkBvC,KAAO,UAAuB,eAG9B,KAAO,MAAQ,GAGf,KAAO,MAAQ,GAoBf,KAAU,SAA+B,UACzC,KAAU,SAAW,SAiBrB,KAAU,kBAA4C,KAiEtD,KAAU,cAAiBG,GAA+B,CACtD,KAAK,QAAU,GACX,EAAAA,EAAM,OAAS,aAAeA,EAAM,OAAS,aAGjDA,EAAM,eAAe,EACrB,KAAK,OAAO,EAAI,EACpB,EA6JA,4BAA0BC,GAAyB,CAC/C,KAAK,aAAeA,CACxB,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n DefaultElementSize,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n ifDefined,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n Menu,\n MenuItem,\n MenuItemChildren,\n} from '@spectrum-web-components/menu';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport type { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\n\nconst chevronClass = {\n s: 'spectrum-UIIcon-ChevronDown75',\n m: 'spectrum-UIIcon-ChevronDown100',\n l: 'spectrum-UIIcon-ChevronDown200',\n xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport const DESCRIPTION_ID = 'option-picker';\nexport class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {\n protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n @state()\n appliedLabel?: string;\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n private deprecatedMenu: Menu | null = null;\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String, reflect: true })\n public icons?: 'only' | 'none';\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n public selects: undefined | 'single' = 'single';\n\n protected get menuItems(): MenuItem[] {\n return this.optionsMenu.childItems;\n }\n\n @query('sp-menu')\n protected optionsMenu!: Menu;\n\n @query('sp-overlay')\n protected overlayElement!: Overlay;\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n\n @property()\n public placement: Placement = 'bottom-start';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public value = '';\n\n @property({ attribute: false })\n public get selectedItem(): MenuItem | undefined {\n return this._selectedItem;\n }\n\n public set selectedItem(selectedItem: MenuItem | undefined) {\n this.selectedItemContent = selectedItem\n ? selectedItem.itemChildren\n : undefined;\n\n if (selectedItem === this.selectedItem) return;\n const oldSelectedItem = this.selectedItem;\n this._selectedItem = selectedItem;\n this.requestUpdate('selectedItem', oldSelectedItem);\n }\n\n _selectedItem?: MenuItem;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public override get focusElement(): HTMLElement {\n if (this.open) {\n return this.optionsMenu;\n }\n return this.button;\n }\n\n public forceFocusVisible(): void {\n this.focused = true;\n }\n\n public handleButtonBlur(): void {\n this.focused = false;\n }\n\n protected preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';\n\n protected handleButtonPointerdown(): void {\n this.preventNextToggle = 'maybe';\n const cleanup = (): void => {\n document.removeEventListener('pointerup', cleanup);\n document.removeEventListener('pointercancel', cleanup);\n requestAnimationFrame(() => {\n // Complete cleanup on the animation frame so that `click` can go first.\n this.preventNextToggle = 'no';\n });\n };\n // Ensure that however the pointer goes up we do `cleanup()`.\n document.addEventListener('pointerup', cleanup);\n document.addEventListener('pointercancel', cleanup);\n }\n\n protected handleButtonFocus(event: FocusEvent): void {\n // When focus comes from a pointer event, and the related target is the Menu,\n // we don't want to reopen the Menu.\n if (\n this.preventNextToggle === 'maybe' &&\n event.relatedTarget === this.optionsMenu\n ) {\n this.preventNextToggle = 'yes';\n }\n }\n\n protected handleButtonClick(): void {\n if (this.enterKeydownOn && this.enterKeydownOn !== this.button) {\n return;\n }\n if (this.preventNextToggle === 'yes') {\n return;\n }\n this.toggle();\n }\n\n public override focus(options?: FocusOptions): void {\n super.focus(options);\n\n if (!this.disabled && this.focusElement) {\n this.focused = this.hasVisibleFocusInTree();\n }\n }\n\n public handleHelperFocus(): void {\n // set focused to true here instead of handleButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public handleChange(event: Event): void {\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n event.stopPropagation();\n if (event.cancelable) {\n this.setValueFromItem(selected, event);\n } else {\n // Non-cancelable \"change\" events announce a selection with no value\n // change that should close the Picker element.\n this.open = false;\n }\n }\n\n protected handleKeydown = (event: KeyboardEvent): void => {\n this.focused = true;\n if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n return;\n }\n event.preventDefault();\n this.toggle(true);\n };\n\n protected async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n // should always close when \"setting\" a value.\n this.open = false;\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n\n // Set a value.\n this.selectedItem = item;\n this.value = item.value;\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n // Allow it to be prevented.\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault && this.selects) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem as MenuItem, false);\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, true);\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n return;\n } else if (!this.selects) {\n // Unset the value if not carrying a selection\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n return;\n }\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, false);\n }\n this.setMenuItemSelected(item, !!this.selects);\n }\n\n protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n // matches null | undefined\n if (this.selects == null) return;\n item.selected = value;\n }\n\n public toggle(target?: boolean): void {\n if (this.readonly) {\n return;\n }\n this.open = typeof target !== 'undefined' ? target : !this.open;\n }\n\n public close(): void {\n if (this.readonly) {\n return;\n }\n this.open = false;\n }\n\n protected get containerStyles(): StyleInfo {\n // @todo: test in mobile\n /* c8 ignore next 5 */\n if (this.isMobile.matches) {\n return {\n '--swc-menu-width': '100%',\n };\n }\n return {};\n }\n\n @property({ attribute: false })\n protected get selectedItemContent(): MenuItemChildren {\n return this._selectedItemContent || { icon: [], content: [] };\n }\n\n protected set selectedItemContent(\n selectedItemContent: MenuItemChildren | undefined\n ) {\n if (selectedItemContent === this.selectedItemContent) return;\n\n const oldContent = this.selectedItemContent;\n this._selectedItemContent = selectedItemContent;\n this.requestUpdate('selectedItemContent', oldContent);\n }\n\n _selectedItemContent?: MenuItemChildren;\n\n protected renderLabelContent(content: Node[]): TemplateResult | Node[] {\n if (this.value && this.selectedItem) {\n return content;\n }\n return html`\n <slot name=\"label\">\n <span\n aria-hidden=${ifDefined(\n this.appliedLabel ? undefined : 'true'\n )}\n >\n ${this.label}\n </span>\n </slot>\n `;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const labelClasses = {\n 'visually-hidden': this.icons === 'only' && !!this.value,\n placeholder: !this.value,\n };\n const appliedLabel = this.appliedLabel || this.label;\n return [\n html`\n <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n ${this.selectedItemContent.icon}\n </span>\n <span id=\"label\" class=${classMap(labelClasses)}>\n ${this.renderLabelContent(this.selectedItemContent.content)}\n </span>\n ${this.value && this.selectedItem\n ? html`\n <span\n aria-hidden=\"true\"\n class=\"visually-hidden\"\n id=\"applied-label\"\n >\n ${appliedLabel}\n <slot name=\"label\"></slot>\n </span>\n `\n : html`\n <span hidden id=\"applied-label\">${appliedLabel}</span>\n `}\n ${this.invalid\n ? html`\n <sp-icon-alert\n class=\"validation-icon\"\n ></sp-icon-alert>\n `\n : nothing}\n <sp-icon-chevron100\n class=\"picker ${chevronClass[\n this.size as DefaultElementSize\n ]}\"\n ></sp-icon-chevron100>\n <slot aria-hidden=\"true\" name=\"tooltip\" id=\"tooltip\"></slot>\n `,\n ];\n }\n\n applyFocusElementLabel = (value?: string): void => {\n this.appliedLabel = value;\n };\n\n protected renderOverlay(menu: TemplateResult): TemplateResult {\n import('@spectrum-web-components/overlay/sp-overlay.js');\n return html`\n <sp-overlay\n .triggerElement=${this as HTMLElement}\n .offset=${0}\n ?open=${this.open}\n .placement=${this.isMobile.matches ? undefined : this.placement}\n type=\"auto\"\n .receivesFocus=${'true'}\n @beforetoggle=${(\n event: Event & {\n target: Overlay;\n newState: 'open' | 'closed';\n }\n ) => {\n if (event.composedPath()[0] !== event.target) {\n return;\n }\n if (event.newState === 'closed') {\n this.open = false;\n }\n if (!this.open) {\n this.optionsMenu.updateSelectedItemIndex();\n this.optionsMenu.closeDescendentOverlays();\n }\n }}\n >\n ${this.renderContainer(menu)}\n </sp-overlay>\n `;\n }\n\n protected get renderDescriptionSlot(): TemplateResult {\n return html`\n <div id=${DESCRIPTION_ID}>\n <slot name=\"description\"></slot>\n </div>\n `;\n }\n // a helper to throw focus to the button is needed because Safari\n // won't include buttons in the tab order even with tabindex=\"0\"\n protected override render(): TemplateResult {\n return html`\n <span\n id=\"focus-helper\"\n tabindex=\"${this.focused || this.open ? '-1' : '0'}\"\n @focus=${this.handleHelperFocus}\n aria-describedby=${DESCRIPTION_ID}\n ></span>\n <button\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-describedby=\"tooltip\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"true\"\n aria-labelledby=\"icon label applied-label\"\n id=\"button\"\n class=\"button\"\n @blur=${this.handleButtonBlur}\n @pointerdown=${this.handleButtonPointerdown}\n @focus=${this.handleButtonFocus}\n @click=${this.handleButtonClick}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n tabindex=\"-1\"\n >\n ${this.buttonContent}\n </button>\n ${this.renderMenu} ${this.renderDescriptionSlot}\n `;\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (this.selects) {\n // Always force `selects` to \"single\" when set.\n // TODO: Add support functionally and visually for \"multiple\"\n this.selects = 'single';\n }\n if (changes.has('disabled') && this.disabled) {\n this.open = false;\n }\n if (changes.has('value')) {\n // MenuItems update a frame late for <slot> management,\n // await the same here.\n this.shouldScheduleManageSelection();\n }\n // Maybe it's finally time to remove this support?\n if (!this.hasUpdated) {\n this.deprecatedMenu = this.querySelector(':scope > sp-menu');\n this.deprecatedMenu?.toggleAttribute('ignore', true);\n this.deprecatedMenu?.setAttribute('selects', 'inherit');\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) {\n const { localName } = this;\n window.__swc.warn(\n this,\n `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n { level: 'deprecation' }\n );\n }\n }\n super.update(changes);\n }\n\n protected bindButtonKeydownListener(): void {\n this.button.addEventListener('keydown', this.handleKeydown);\n }\n\n protected override firstUpdated(changes: PropertyValues<this>): void {\n super.firstUpdated(changes);\n this.bindButtonKeydownListener();\n }\n\n protected get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n aria-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected renderContainer(menu: TemplateResult): TemplateResult {\n const accessibleMenu = html`\n ${this.dismissHelper} ${menu} ${this.dismissHelper}\n `;\n // @todo: test in mobile\n /* c8 ignore next 11 */\n if (this.isMobile.matches) {\n import('@spectrum-web-components/tray/sp-tray.js');\n return html`\n <sp-tray\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n >\n ${accessibleMenu}\n </sp-tray>\n `;\n }\n import('@spectrum-web-components/popover/sp-popover.js');\n return html`\n <sp-popover\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n placement=${this.placement}\n >\n ${accessibleMenu}\n </sp-popover>\n `;\n }\n\n protected hasRenderedOverlay = false;\n\n protected get renderMenu(): TemplateResult {\n const menu = html`\n <sp-menu\n aria-labelledby=\"applied-label\"\n @change=${this.handleChange}\n id=\"menu\"\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n role=${this.listRole}\n .selects=${this.selects}\n .selected=${this.value ? [this.value] : []}\n size=${this.size}\n @sp-menu-item-added-or-updated=${this.shouldManageSelection}\n >\n <slot @slotchange=${this.shouldScheduleManageSelection}></slot>\n </sp-menu>\n `;\n this.hasRenderedOverlay =\n this.hasRenderedOverlay ||\n this.focused ||\n this.open ||\n !!this.deprecatedMenu;\n if (this.hasRenderedOverlay) {\n return this.renderOverlay(menu);\n }\n return menu;\n }\n\n private willManageSelection = false;\n\n protected shouldScheduleManageSelection(event?: Event): void {\n if (\n !this.willManageSelection &&\n (!event ||\n ((event.target as HTMLElement).getRootNode() as ShadowRoot)\n .host === this)\n ) {\n this.willManageSelection = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.manageSelection();\n });\n });\n }\n }\n\n protected shouldManageSelection(): void {\n if (this.willManageSelection) {\n return;\n }\n this.willManageSelection = true;\n this.manageSelection();\n }\n\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\n await this.optionsMenu.updateComplete;\n if (this.recentlyConnected) {\n // Work around for attach timing differences in Safari and Firefox.\n // Remove when refactoring to Menu passthrough wrapper.\n await new Promise((res) => requestAnimationFrame(() => res(true)));\n this.recentlyConnected = false;\n }\n this.menuItems.forEach((item) => {\n if (this.value === item.value && !item.disabled) {\n selectedItem = item;\n } else {\n item.selected = false;\n }\n });\n if (selectedItem) {\n selectedItem.selected = !!this.selects;\n this.selectedItem = selectedItem;\n } else {\n this.value = '';\n this.selectedItem = undefined;\n }\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.optionsMenu.updateSelectedItemIndex();\n }\n this.selectionResolver();\n this.willManageSelection = false;\n }\n\n private selectionPromise = Promise.resolve();\n private selectionResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.selectionPromise;\n if (this.overlayElement) {\n await this.overlayElement.updateComplete;\n }\n return complete;\n }\n\n private recentlyConnected = false;\n\n private enterKeydownOn: EventTarget | null = null;\n\n protected handleEnterKeydown = (event: KeyboardEvent): void => {\n if (event.code !== 'Enter') {\n return;\n }\n\n if (this.enterKeydownOn) {\n event.preventDefault();\n return;\n } else {\n this.addEventListener(\n 'keyup',\n (keyupEvent: KeyboardEvent) => {\n if (keyupEvent.code !== 'Enter') {\n return;\n }\n this.enterKeydownOn = null;\n },\n { once: true }\n );\n }\n this.enterKeydownOn = this.enterKeydownOn || event.target;\n };\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.recentlyConnected = this.hasUpdated;\n }\n\n public override disconnectedCallback(): void {\n this.close();\n\n super.disconnectedCallback();\n }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot description - The description content for the Picker\n * @slot tooltip - Tooltip to to be applied to the the Picker Button\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override get containerStyles(): StyleInfo {\n const styles = super.containerStyles;\n if (!this.quiet) {\n styles['min-width'] = `${this.offsetWidth}px`;\n }\n return styles;\n }\n\n protected override handleKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n this.focused = true;\n if (!code.startsWith('Arrow') || this.readonly) {\n return;\n }\n if (code === 'ArrowUp' || code === 'ArrowDown') {\n this.toggle(true);\n return;\n }\n event.preventDefault();\n const selectedIndex = this.selectedItem\n ? this.menuItems.indexOf(this.selectedItem)\n : -1;\n // use a positive offset to find the first non-disabled item when no selection is available.\n const nextOffset = selectedIndex < 0 || code === 'ArrowRight' ? 1 : -1;\n let nextIndex = selectedIndex + nextOffset;\n while (\n this.menuItems[nextIndex] &&\n this.menuItems[nextIndex].disabled\n ) {\n nextIndex += nextOffset;\n }\n if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {\n return;\n }\n if (!this.value || nextIndex !== selectedIndex) {\n this.setValueFromItem(this.menuItems[nextIndex]);\n }\n };\n}\n"],
|
|
5
|
+
"mappings": "qNAYA,OAGI,QAAAA,EACA,WAAAC,EAEA,cAAAC,MAEG,gCACP,OACI,YAAAC,EACA,aAAAC,EAEA,YAAAC,MACG,kDACP,OACI,YAAAC,EACA,SAAAC,EACA,SAAAC,MACG,kDAEP,OAAOC,MAAkB,kBACzB,OAAOC,MAAmB,iEAE1B,OAAS,aAAAC,MAAiB,mDAC1B,MAAO,gEACP,MAAO,iEACP,MAAO,2CAOP,OACI,aAAAC,EACA,wBAAAC,MACG,kEAGP,MAAMC,EAAe,CACjB,EAAG,gCACH,EAAG,iCACH,EAAG,iCACH,GAAI,gCACR,EAEO,aAAM,eAAiB,gBACvB,aAAM,mBAAmBZ,EAAWS,EAAW,CAAE,cAAe,EAAK,CAAC,CAAE,CAAxE,kCACH,KAAU,SAAW,IAAIE,EAAqB,KAAMD,CAAS,EAQ7D,KAAQ,eAA8B,KAGtC,KAAgB,SAAW,GAG3B,KAAO,QAAU,GAMjB,KAAO,QAAU,GAMjB,KAAO,KAAO,GAGd,KAAO,SAAW,GAElB,KAAO,QAAgC,SAkBvC,KAAO,UAAuB,eAG9B,KAAO,MAAQ,GAGf,KAAO,MAAQ,GAoBf,KAAU,SAA+B,UACzC,KAAU,SAAW,SAiBrB,KAAU,kBAA4C,KAiEtD,KAAU,cAAiBG,GAA+B,CACtD,KAAK,QAAU,GACX,EAAAA,EAAM,OAAS,aAAeA,EAAM,OAAS,aAGjDA,EAAM,eAAe,EACrB,KAAK,OAAO,EAAI,EACpB,EA6JA,4BAA0BC,GAAyB,CAC/C,KAAK,aAAeA,CACxB,EAmKA,KAAU,mBAAqB,GAgC/B,KAAQ,oBAAsB,GA8D9B,KAAQ,iBAAmB,QAAQ,QAAQ,EAY3C,KAAQ,kBAAoB,GAE5B,KAAQ,eAAqC,KAE7C,KAAU,mBAAsBD,GAA+B,CAC3D,GAAIA,EAAM,OAAS,QAInB,IAAI,KAAK,eAAgB,CACrBA,EAAM,eAAe,EACrB,MACJ,MACI,KAAK,iBACD,QACCE,GAA8B,CACvBA,EAAW,OAAS,UAGxB,KAAK,eAAiB,KAC1B,EACA,CAAE,KAAM,EAAK,CACjB,EAEJ,KAAK,eAAiB,KAAK,gBAAkBF,EAAM,OACvD,EAzkBA,IAAc,WAAwB,CAClC,OAAO,KAAK,YAAY,UAC5B,CAuBA,IAAW,cAAqC,CAC5C,OAAO,KAAK,aAChB,CAEA,IAAW,aAAaG,EAAoC,CAKxD,GAJA,KAAK,oBAAsBA,EACrBA,EAAa,aACb,OAEFA,IAAiB,KAAK,aAAc,OACxC,MAAMC,EAAkB,KAAK,aAC7B,KAAK,cAAgBD,EACrB,KAAK,cAAc,eAAgBC,CAAe,CACtD,CAOA,IAAoB,cAA4B,CAC5C,OAAI,KAAK,KACE,KAAK,YAET,KAAK,MAChB,CAEO,mBAA0B,CAC7B,KAAK,QAAU,EACnB,CAEO,kBAAyB,CAC5B,KAAK,QAAU,EACnB,CAIU,yBAAgC,CACtC,KAAK,kBAAoB,QACzB,MAAMC,EAAU,IAAY,CACxB,SAAS,oBAAoB,YAAaA,CAAO,EACjD,SAAS,oBAAoB,gBAAiBA,CAAO,EACrD,sBAAsB,IAAM,CAExB,KAAK,kBAAoB,IAC7B,CAAC,CACL,EAEA,SAAS,iBAAiB,YAAaA,CAAO,EAC9C,SAAS,iBAAiB,gBAAiBA,CAAO,CACtD,CAEU,kBAAkBL,EAAyB,CAI7C,KAAK,oBAAsB,SAC3BA,EAAM,gBAAkB,KAAK,cAE7B,KAAK,kBAAoB,MAEjC,CAEU,mBAA0B,CAC5B,KAAK,gBAAkB,KAAK,iBAAmB,KAAK,QAGpD,KAAK,oBAAsB,OAG/B,KAAK,OAAO,CAChB,CAEgB,MAAMM,EAA8B,CAChD,MAAM,MAAMA,CAAO,EAEf,CAAC,KAAK,UAAY,KAAK,eACvB,KAAK,QAAU,KAAK,sBAAsB,EAElD,CAEO,mBAA0B,CAE7B,KAAK,QAAU,GACf,KAAK,OAAO,MAAM,CACtB,CAEO,aAAaN,EAAoB,CACpC,MAAMO,EAASP,EAAM,OACf,CAACQ,CAAQ,EAAID,EAAO,cAC1BP,EAAM,gBAAgB,EAClBA,EAAM,WACN,KAAK,iBAAiBQ,EAAUR,CAAK,EAIrC,KAAK,KAAO,EAEpB,CAWA,MAAgB,iBACZS,EACAC,EACa,CAEb,KAAK,KAAO,GACZ,MAAMN,EAAkB,KAAK,aACvBO,EAAW,KAAK,MActB,GAXA,KAAK,aAAeF,EACpB,KAAK,MAAQA,EAAK,MAClB,MAAM,KAAK,eASP,CARiB,KAAK,cACtB,IAAI,MAAM,SAAU,CAChB,QAAS,GAET,WAAY,GACZ,SAAU,EACd,CAAC,CACL,GACqB,KAAK,QAAS,CAC3BC,GACAA,EAAgB,eAAe,EAEnC,KAAK,oBAAoB,KAAK,aAA0B,EAAK,EACzDN,GACA,KAAK,oBAAoBA,EAAiB,EAAI,EAElD,KAAK,aAAeA,EACpB,KAAK,MAAQO,EACb,KAAK,KAAO,GACZ,MACJ,SAAW,CAAC,KAAK,QAAS,CAEtB,KAAK,aAAeP,EACpB,KAAK,MAAQO,EACb,MACJ,CACIP,GACA,KAAK,oBAAoBA,EAAiB,EAAK,EAEnD,KAAK,oBAAoBK,EAAM,CAAC,CAAC,KAAK,OAAO,CACjD,CAEU,oBAAoBA,EAAgBR,EAAsB,CAE5D,KAAK,SAAW,OACpBQ,EAAK,SAAWR,EACpB,CAEO,OAAOM,EAAwB,CAC9B,KAAK,WAGT,KAAK,KAAO,OAAOA,GAAW,YAAcA,EAAS,CAAC,KAAK,KAC/D,CAEO,OAAc,CACb,KAAK,WAGT,KAAK,KAAO,GAChB,CAEA,IAAc,iBAA6B,CAGvC,OAAI,KAAK,SAAS,QACP,CACH,mBAAoB,MACxB,EAEG,CAAC,CACZ,CAGA,IAAc,qBAAwC,CAClD,OAAO,KAAK,sBAAwB,CAAE,KAAM,CAAC,EAAG,QAAS,CAAC,CAAE,CAChE,CAEA,IAAc,oBACVK,EACF,CACE,GAAIA,IAAwB,KAAK,oBAAqB,OAEtD,MAAMC,EAAa,KAAK,oBACxB,KAAK,qBAAuBD,EAC5B,KAAK,cAAc,sBAAuBC,CAAU,CACxD,CAIU,mBAAmBC,EAA0C,CACnE,OAAI,KAAK,OAAS,KAAK,aACZA,EAEJ7B;AAAA;AAAA;AAAA,kCAGmBI,EACV,KAAK,aAAe,OAAY,MACpC,CAAC;AAAA;AAAA,sBAEC,KAAK,KAAK;AAAA;AAAA;AAAA,SAI5B,CAEA,IAAc,eAAkC,CAC5C,MAAM0B,EAAe,CACjB,kBAAmB,KAAK,QAAU,QAAU,CAAC,CAAC,KAAK,MACnD,YAAa,CAAC,KAAK,KACvB,EACMC,EAAe,KAAK,cAAgB,KAAK,MAC/C,MAAO,CACH/B;AAAA,0CAC8B,KAAK,QAAU,MAAM;AAAA,sBACzC,KAAK,oBAAoB,IAAI;AAAA;AAAA,yCAEVG,EAAS2B,CAAY,CAAC;AAAA,sBACzC,KAAK,mBAAmB,KAAK,oBAAoB,OAAO,CAAC;AAAA;AAAA,kBAE7D,KAAK,OAAS,KAAK,aACf9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAMU+B,CAAY;AAAA;AAAA;AAAA,wBAItB/B;AAAA,4DACsC+B,CAAY;AAAA,uBACjD;AAAA,kBACL,KAAK,QACD/B;AAAA;AAAA;AAAA;AAAA,wBAKAC,CAAO;AAAA;AAAA,oCAEOa,EACZ,KAAK,IACT,CAAC;AAAA;AAAA;AAAA,aAIb,CACJ,CAMU,cAAckB,EAAsC,CAC1D,cAAO,gDAAgD,EAChDhC;AAAA;AAAA,kCAEmB,IAAmB;AAAA,0BAC3B,CAAC;AAAA,wBACH,KAAK,IAAI;AAAA,6BACJ,KAAK,SAAS,QAAU,OAAY,KAAK,SAAS;AAAA;AAAA,iCAE9C,MAAM;AAAA,gCAEnBe,GAIC,CACGA,EAAM,aAAa,EAAE,CAAC,IAAMA,EAAM,SAGlCA,EAAM,WAAa,WACnB,KAAK,KAAO,IAEX,KAAK,OACN,KAAK,YAAY,wBAAwB,EACzC,KAAK,YAAY,wBAAwB,GAEjD,CAAC;AAAA;AAAA,kBAEC,KAAK,gBAAgBiB,CAAI,CAAC;AAAA;AAAA,SAGxC,CAEA,IAAc,uBAAwC,CAClD,OAAOhC;AAAA,sBACO,cAAc;AAAA;AAAA;AAAA,SAIhC,CAGmB,QAAyB,CACxC,OAAOA;AAAA;AAAA;AAAA,4BAGa,KAAK,SAAW,KAAK,KAAO,KAAO,GAAG;AAAA,yBACzC,KAAK,iBAAiB;AAAA,mCACZ,cAAc;AAAA;AAAA;AAAA,gCAGjBI,EAAU,KAAK,KAAO,OAAS,MAAS,CAAC;AAAA;AAAA,gCAEzC,KAAK,KAAO,OAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKpC,KAAK,gBAAgB;AAAA,+BACd,KAAK,uBAAuB;AAAA,yBAClC,KAAK,iBAAiB;AAAA,yBACtB,KAAK,iBAAiB;AAAA,2BACpB,CACP,YAAa,KAAK,mBAClB,QAAS,EACb,CAAC;AAAA,4BACW,KAAK,QAAQ;AAAA;AAAA;AAAA,kBAGvB,KAAK,aAAa;AAAA;AAAA,cAEtB,KAAK,UAAU,IAAI,KAAK,qBAAqB;AAAA,SAEvD,CAEmB,OAAO6B,EAAqC,CA9cnE,IAAAC,EAAAC,EA+cY,KAAK,UAGL,KAAK,QAAU,UAEfF,EAAQ,IAAI,UAAU,GAAK,KAAK,WAChC,KAAK,KAAO,IAEZA,EAAQ,IAAI,OAAO,GAGnB,KAAK,8BAA8B,EAGlC,KAAK,aACN,KAAK,eAAiB,KAAK,cAAc,kBAAkB,GAC3DC,EAAA,KAAK,iBAAL,MAAAA,EAAqB,gBAAgB,SAAU,KAC/CC,EAAA,KAAK,iBAAL,MAAAA,EAAqB,aAAa,UAAW,YAajD,MAAM,OAAOF,CAAO,CACxB,CAEU,2BAAkC,CACxC,KAAK,OAAO,iBAAiB,UAAW,KAAK,aAAa,CAC9D,CAEmB,aAAaA,EAAqC,CACjE,MAAM,aAAaA,CAAO,EAC1B,KAAK,0BAA0B,CACnC,CAEA,IAAc,eAAgC,CAC1C,OAAOjC;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKc,KAAK,KAAK;AAAA;AAAA;AAAA,SAInC,CAEU,gBAAgBgC,EAAsC,CAC5D,MAAMI,EAAiBpC;AAAA,cACjB,KAAK,aAAa,IAAIgC,CAAI,IAAI,KAAK,aAAa;AAAA,UAItD,OAAI,KAAK,SAAS,SACd,OAAO,0CAA0C,EAC1ChC;AAAA;AAAA;AAAA;AAAA,4BAISK,EAAS,KAAK,eAAe,CAAC;AAAA;AAAA,sBAEpC+B,CAAc;AAAA;AAAA,gBAI5B,OAAO,gDAAgD,EAChDpC;AAAA;AAAA;AAAA;AAAA,wBAISK,EAAS,KAAK,eAAe,CAAC;AAAA,4BAC1B,KAAK,SAAS;AAAA;AAAA,kBAExB+B,CAAc;AAAA;AAAA,UAG5B,CAIA,IAAc,YAA6B,CACvC,MAAMJ,EAAOhC;AAAA;AAAA;AAAA,0BAGK,KAAK,YAAY;AAAA;AAAA,2BAEhB,CACP,YAAa,KAAK,mBAClB,QAAS,EACb,CAAC;AAAA,uBACM,KAAK,QAAQ;AAAA,2BACT,KAAK,OAAO;AAAA,4BACX,KAAK,MAAQ,CAAC,KAAK,KAAK,EAAI,CAAC,CAAC;AAAA,uBACnC,KAAK,IAAI;AAAA,iDACiB,KAAK,qBAAqB;AAAA;AAAA,oCAEvC,KAAK,6BAA6B;AAAA;AAAA,UAQ9D,OALA,KAAK,mBACD,KAAK,oBACL,KAAK,SACL,KAAK,MACL,CAAC,CAAC,KAAK,eACP,KAAK,mBACE,KAAK,cAAcgC,CAAI,EAE3BA,CACX,CAIU,8BAA8BjB,EAAqB,CAErD,CAAC,KAAK,sBACL,CAACA,GACIA,EAAM,OAAuB,YAAY,EACtC,OAAS,QAElB,KAAK,oBAAsB,GAC3B,sBAAsB,IAAM,CACxB,sBAAsB,IAAM,CACxB,KAAK,gBAAgB,CACzB,CAAC,CACL,CAAC,EAET,CAEU,uBAA8B,CAChC,KAAK,sBAGT,KAAK,oBAAsB,GAC3B,KAAK,gBAAgB,EACzB,CAEA,MAAgB,iBAAiC,CAC7C,GAAI,KAAK,SAAW,KAAM,OAE1B,KAAK,iBAAmB,IAAI,QACvBsB,GAAS,KAAK,kBAAoBA,CACvC,EACA,IAAInB,EACJ,MAAM,KAAK,YAAY,eACnB,KAAK,oBAGL,MAAM,IAAI,QAASmB,GAAQ,sBAAsB,IAAMA,EAAI,EAAI,CAAC,CAAC,EACjE,KAAK,kBAAoB,IAE7B,KAAK,UAAU,QAASb,GAAS,CACzB,KAAK,QAAUA,EAAK,OAAS,CAACA,EAAK,SACnCN,EAAeM,EAEfA,EAAK,SAAW,EAExB,CAAC,EACGN,GACAA,EAAa,SAAW,CAAC,CAAC,KAAK,QAC/B,KAAK,aAAeA,IAEpB,KAAK,MAAQ,GACb,KAAK,aAAe,QAEpB,KAAK,OACL,MAAM,KAAK,YAAY,eACvB,KAAK,YAAY,wBAAwB,GAE7C,KAAK,kBAAkB,EACvB,KAAK,oBAAsB,EAC/B,CAKA,MAAyB,mBAAsC,CAC3D,MAAMoB,EAAY,MAAM,MAAM,kBAAkB,EAChD,aAAM,KAAK,iBACP,KAAK,gBACL,MAAM,KAAK,eAAe,eAEvBA,CACX,CA6BgB,mBAA0B,CACtC,MAAM,kBAAkB,EACxB,KAAK,kBAAoB,KAAK,UAClC,CAEgB,sBAA6B,CACzC,KAAK,MAAM,EAEX,MAAM,qBAAqB,CAC/B,CACJ,CAnnBIC,EAAA,CADC/B,EAAM,GAHE,WAIT,4BAGO+B,EAAA,CADNhC,EAAM,SAAS,GANP,WAOF,sBAKSgC,EAAA,CADfjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAXjC,WAYO,wBAGTiC,EAAA,CADNjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdjC,WAeF,uBAGAiC,EAAA,CADNjC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAjBhC,WAkBF,qBAGAiC,EAAA,CADNjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GApBjC,WAqBF,uBAGAiC,EAAA,CADNjC,EAAS,GAvBD,WAwBF,qBAGAiC,EAAA,CADNjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA1BjC,WA2BF,oBAGAiC,EAAA,CADNjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA7BjC,WA8BF,wBASGiC,EAAA,CADThC,EAAM,SAAS,GAtCP,WAuCC,2BAGAgC,EAAA,CADThC,EAAM,YAAY,GAzCV,WA0CC,8BAQHgC,EAAA,CADNjC,EAAS,GAjDD,WAkDF,yBAGAiC,EAAA,CADNjC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GApDjC,WAqDF,qBAGAiC,EAAA,CADNjC,EAAS,CAAE,KAAM,MAAO,CAAC,GAvDjB,WAwDF,qBAGIiC,EAAA,CADVjC,EAAS,CAAE,UAAW,EAAM,CAAC,GA1DrB,WA2DE,4BA0LGiC,EAAA,CADbjC,EAAS,CAAE,UAAW,EAAM,CAAC,GApPrB,WAqPK,mCA+YX,aAAM,eAAe,UAAW,CAAhC,kCAaH,KAAmB,cAAiBS,GAA+B,CAC/D,KAAM,CAAE,KAAAyB,CAAK,EAAIzB,EAEjB,GADA,KAAK,QAAU,GACX,CAACyB,EAAK,WAAW,OAAO,GAAK,KAAK,SAClC,OAEJ,GAAIA,IAAS,WAAaA,IAAS,YAAa,CAC5C,KAAK,OAAO,EAAI,EAChB,MACJ,CACAzB,EAAM,eAAe,EACrB,MAAM0B,EAAgB,KAAK,aACrB,KAAK,UAAU,QAAQ,KAAK,YAAY,EACxC,GAEAC,EAAaD,EAAgB,GAAKD,IAAS,aAAe,EAAI,GACpE,IAAIG,EAAYF,EAAgBC,EAChC,KACI,KAAK,UAAUC,CAAS,GACxB,KAAK,UAAUA,CAAS,EAAE,UAE1BA,GAAaD,EAEb,CAAC,KAAK,UAAUC,CAAS,GAAK,KAAK,UAAUA,CAAS,EAAE,WAGxD,CAAC,KAAK,OAASA,IAAcF,IAC7B,KAAK,iBAAiB,KAAK,UAAUE,CAAS,CAAC,CAEvD,EAzCA,WAA2B,QAAyB,CAChD,MAAO,CAAClC,EAAcC,CAAa,CACvC,CAEA,IAAuB,iBAA6B,CAChD,MAAMkC,EAAS,MAAM,gBACrB,OAAK,KAAK,QACNA,EAAO,WAAW,EAAI,GAAG,KAAK,WAAW,MAEtCA,CACX,CAgCJ",
|
|
6
6
|
"names": ["html", "nothing", "SizedMixin", "classMap", "ifDefined", "styleMap", "property", "query", "state", "pickerStyles", "chevronStyles", "Focusable", "IS_MOBILE", "MatchMediaController", "chevronClass", "event", "value", "keyupEvent", "selectedItem", "oldSelectedItem", "cleanup", "options", "target", "selected", "item", "menuChangeEvent", "oldValue", "selectedItemContent", "oldContent", "content", "labelClasses", "appliedLabel", "menu", "changes", "_a", "_b", "accessibleMenu", "res", "complete", "__decorateClass", "code", "selectedIndex", "nextOffset", "nextIndex", "styles"]
|
|
7
7
|
}
|