@spectrum-web-components/picker 0.13.4 → 0.13.6
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/package.json +12 -12
- package/src/Picker.dev.js +6 -2
- package/src/Picker.dev.js.map +2 -2
- package/src/Picker.js +9 -9
- package/src/Picker.js.map +2 -2
- package/src/picker.css.dev.js +1 -1
- package/src/picker.css.dev.js.map +1 -1
- package/src/picker.css.js +1 -1
- package/src/picker.css.js.map +1 -1
- package/test/picker-sizes.test-vrt.js.map +2 -2
- package/test/picker.test-vrt.js.map +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/picker",
|
|
3
|
-
"version": "0.13.
|
|
3
|
+
"version": "0.13.6",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -66,16 +66,16 @@
|
|
|
66
66
|
],
|
|
67
67
|
"dependencies": {
|
|
68
68
|
"@spectrum-web-components/base": "^0.7.0",
|
|
69
|
-
"@spectrum-web-components/button": "^0.19.
|
|
70
|
-
"@spectrum-web-components/icon": "^0.12.
|
|
71
|
-
"@spectrum-web-components/icons-ui": "^0.9.
|
|
72
|
-
"@spectrum-web-components/icons-workflow": "^0.9.
|
|
73
|
-
"@spectrum-web-components/menu": "^0.16.
|
|
74
|
-
"@spectrum-web-components/overlay": "^0.18.
|
|
75
|
-
"@spectrum-web-components/popover": "^0.12.
|
|
76
|
-
"@spectrum-web-components/reactive-controllers": "^0.3.
|
|
77
|
-
"@spectrum-web-components/shared": "^0.15.
|
|
78
|
-
"@spectrum-web-components/tray": "^0.4.
|
|
69
|
+
"@spectrum-web-components/button": "^0.19.5",
|
|
70
|
+
"@spectrum-web-components/icon": "^0.12.2",
|
|
71
|
+
"@spectrum-web-components/icons-ui": "^0.9.2",
|
|
72
|
+
"@spectrum-web-components/icons-workflow": "^0.9.2",
|
|
73
|
+
"@spectrum-web-components/menu": "^0.16.6",
|
|
74
|
+
"@spectrum-web-components/overlay": "^0.18.6",
|
|
75
|
+
"@spectrum-web-components/popover": "^0.12.6",
|
|
76
|
+
"@spectrum-web-components/reactive-controllers": "^0.3.2",
|
|
77
|
+
"@spectrum-web-components/shared": "^0.15.1",
|
|
78
|
+
"@spectrum-web-components/tray": "^0.4.4",
|
|
79
79
|
"tslib": "^2.0.0"
|
|
80
80
|
},
|
|
81
81
|
"devDependencies": {
|
|
@@ -89,5 +89,5 @@
|
|
|
89
89
|
"./sync/index.js",
|
|
90
90
|
"./sync/sp-*.js"
|
|
91
91
|
],
|
|
92
|
-
"gitHead": "
|
|
92
|
+
"gitHead": "31d083d1eb61a1382335030c190c85d85f41e15d"
|
|
93
93
|
}
|
package/src/Picker.dev.js
CHANGED
|
@@ -126,10 +126,14 @@ export class PickerBase extends SizedMixin(Focusable) {
|
|
|
126
126
|
);
|
|
127
127
|
}
|
|
128
128
|
handleChange(event) {
|
|
129
|
-
event.stopPropagation();
|
|
130
129
|
const target = event.target;
|
|
131
130
|
const [selected] = target.selectedItems;
|
|
132
|
-
|
|
131
|
+
if (event.cancelable) {
|
|
132
|
+
event.stopPropagation();
|
|
133
|
+
this.setValueFromItem(selected, event);
|
|
134
|
+
} else {
|
|
135
|
+
this.open = false;
|
|
136
|
+
}
|
|
133
137
|
}
|
|
134
138
|
async setValueFromItem(item, menuChangeEvent) {
|
|
135
139
|
const oldSelectedItem = this.selectedItem;
|
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 render,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\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 { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.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 MenuItemAddedOrUpdatedEvent,\n MenuItemChildren,\n MenuItemRemovedEvent,\n} from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/tray/sp-tray.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport type { Popover } from '@spectrum-web-components/popover';\nimport {\n openOverlay,\n OverlayOptions,\n Placement,\n TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.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\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\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 PickerBase extends SizedMixin(Focusable) {\n /**\n * @private\n */\n public static openOverlay = async (\n target: HTMLElement,\n interaction: TriggerInteractions,\n content: HTMLElement,\n options: OverlayOptions\n ): Promise<() => void> => {\n return await openOverlay(target, interaction, content, options);\n };\n\n protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n public get target(): HTMLButtonElement | this {\n return this.button;\n }\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 public menuItems: MenuItem[] = [];\n private restoreChildren?: () => void;\n\n public optionsMenu!: Menu;\n\n /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\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 selectedItem?: MenuItem;\n\n private closeOverlay?: Promise<() => void>;\n\n private popover!: Popover;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public constructor() {\n super();\n this.onKeydown = this.onKeydown.bind(this);\n }\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 onButtonBlur(): void {\n this.focused = false;\n (this.target as HTMLButtonElement).removeEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n protected onButtonClick(): void {\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 onHelperFocus(): void {\n // set focused to true here instead of onButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public onButtonFocus(): void {\n (this.target as HTMLButtonElement).addEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n public handleChange(event: Event): void {\n event.stopPropagation();\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n this.setValueFromItem(selected, event);\n }\n\n protected onKeydown = (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 public async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n this.selectedItem = item;\n this.value = item.value;\n this.open = false;\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem, 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 }\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 public overlayOpenCallback = async (): Promise<void> => {\n this.updateMenuItems();\n await this.itemsUpdated;\n await this.optionsMenu.updateComplete;\n requestAnimationFrame(() => this.menuStateResolver());\n };\n\n public overlayCloseCallback = async (): Promise<void> => {\n if (this.restoreChildren) {\n this.restoreChildren();\n this.restoreChildren = undefined;\n }\n this.close();\n requestAnimationFrame(() => this.menuStateResolver());\n };\n\n private popoverFragment!: DocumentFragment;\n\n private async generatePopover(): Promise<void> {\n if (!this.popoverFragment) {\n this.popoverFragment = document.createDocumentFragment();\n }\n render(this.renderPopover, this.popoverFragment, { host: this });\n this.popover = this.popoverFragment.children[0] as Popover;\n this.optionsMenu = this.popover.children[1] as Menu;\n }\n\n private async openMenu(): Promise<void> {\n /* c8 ignore next 9 */\n let reparentableChildren: Element[] = [];\n const deprecatedMenu = this.querySelector(':scope > sp-menu') as Menu;\n\n await this.generatePopover();\n if (deprecatedMenu) {\n reparentableChildren = Array.from(deprecatedMenu.children);\n } else {\n reparentableChildren = Array.from(this.children).filter(\n (element) => {\n return !element.hasAttribute('slot');\n }\n );\n }\n\n if (reparentableChildren.length === 0) {\n this.menuStateResolver();\n return;\n }\n\n this.restoreChildren = reparentChildren<\n Element & { focused?: boolean }\n >(reparentableChildren, this.optionsMenu, {\n position: 'beforeend',\n prepareCallback: (\n el: Element & {\n focused?: boolean | undefined;\n value?: string;\n selected?: boolean;\n }\n ) => {\n if (this.value === el.value) {\n this.setMenuItemSelected(el as MenuItem, true);\n }\n return (el) => {\n if (typeof el.focused !== 'undefined') {\n el.focused = false;\n }\n };\n },\n });\n\n this.sizePopover(this.popover);\n this.closeOverlay = Picker.openOverlay(this, 'modal', this.popover, {\n placement: this.isMobile.matches ? 'none' : this.placement,\n receivesFocus: 'auto',\n });\n }\n\n protected sizePopover(popover: HTMLElement): void {\n if (this.isMobile.matches) {\n popover.style.setProperty('--swc-menu-width', `100%`);\n return;\n }\n if (this.quiet) return;\n // only use `this.offsetWidth` when Standard variant\n popover.style.setProperty('min-width', `${this.offsetWidth}px`);\n }\n\n private async closeMenu(): Promise<void> {\n if (this.closeOverlay) {\n const closeOverlay = this.closeOverlay;\n delete this.closeOverlay;\n (await closeOverlay)();\n }\n }\n\n protected get selectedItemContent(): MenuItemChildren {\n if (this.selectedItem) {\n return this.selectedItem.itemChildren;\n }\n return { icon: [], content: [] };\n }\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\">${this.label}</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 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.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 `,\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 ? '-1' : '0'}\"\n @focus=${this.onHelperFocus}\n ></span>\n <button\n aria-haspopup=\"true\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-labelledby=\"button icon label\"\n id=\"button\"\n class=\"button\"\n @blur=${this.onButtonBlur}\n @click=${this.onButtonClick}\n @focus=${this.onButtonFocus}\n ?disabled=${this.disabled}\n tabindex=\"-1\"\n >\n ${this.buttonContent}\n </button>\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 (\n changes.has('open') &&\n (this.open || typeof changes.get('open') !== 'undefined')\n ) {\n this.menuStatePromise = new Promise(\n (res) => (this.menuStateResolver = res)\n );\n if (this.open) {\n this.openMenu();\n } else {\n this.closeMenu();\n }\n }\n if (changes.has('value') && !changes.has('selectedItem')) {\n this.updateMenuItems();\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector('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 get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n arial-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected get renderPopover(): TemplateResult {\n const content = html`\n ${this.dismissHelper}\n <sp-menu\n id=\"menu\"\n role=\"${this.listRole}\"\n @change=${this.handleChange}\n .selects=${this.selects}\n ></sp-menu>\n ${this.dismissHelper}\n `;\n if (this.isMobile.matches) {\n return html`\n <sp-tray\n id=\"popover\"\n role=\"dialog\"\n @sp-menu-item-added-or-updated=${this.updateMenuItems}\n .overlayOpenCallback=${this.overlayOpenCallback}\n .overlayCloseCallback=${this.overlayCloseCallback}\n >\n ${content}\n </sp-tray>\n `;\n }\n return html`\n <sp-popover\n id=\"popover\"\n role=\"dialog\"\n @sp-menu-item-added-or-updated=${this.updateMenuItems}\n .overlayOpenCallback=${this.overlayOpenCallback}\n .overlayCloseCallback=${this.overlayCloseCallback}\n >\n ${content}\n </sp-popover>\n `;\n }\n\n private _willUpdateItems = false;\n protected itemsUpdated: Promise<void> = Promise.resolve();\n\n /**\n * Acquire the available MenuItems in the Picker by\n * direct element query or by assuming the list managed\n * by the Menu within the open options overlay.\n */\n protected updateMenuItems(\n event?: MenuItemAddedOrUpdatedEvent | MenuItemRemovedEvent\n ): void {\n if (this.open && event?.type === 'sp-menu-item-removed') return;\n if (this._willUpdateItems) return;\n this._willUpdateItems = true;\n if (event?.item === this.selectedItem) {\n this.requestUpdate();\n }\n\n let resolve = (): void => {\n return;\n };\n this.itemsUpdated = new Promise((res) => (resolve = res));\n // Debounce the update so we only update once\n // if multiple items have changed\n window.requestAnimationFrame(async () => {\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.menuItems = this.optionsMenu.childItems;\n } else {\n this.menuItems = [\n ...this.querySelectorAll(\n 'sp-menu-item:not([slot=\"submenu\"] *)'\n ),\n ] as MenuItem[];\n }\n this.manageSelection();\n resolve();\n this._willUpdateItems = false;\n });\n }\n\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n await this.menuStatePromise;\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\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 }\n\n private menuStatePromise = Promise.resolve();\n private menuStateResolver!: () => void;\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.menuStatePromise;\n await this.itemsUpdated;\n await this.selectionPromise;\n return complete;\n }\n\n public override connectedCallback(): void {\n this.updateMenuItems();\n this.addEventListener(\n 'sp-menu-item-added-or-updated',\n this.updateMenuItems\n );\n this.addEventListener('sp-menu-item-removed', this.updateMenuItems);\n super.connectedCallback();\n }\n\n public override disconnectedCallback(): void {\n this.close();\n\n super.disconnectedCallback();\n }\n}\n\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override onKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n this.focused = true;\n if (!code.startsWith('Arrow') || this.readonly) {\n return;\n }\n event.preventDefault();\n if (code === 'ArrowUp' || code === 'ArrowDown') {\n this.toggle(true);\n return;\n }\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 = !this.value || 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": ";;;;;;;;;;;;AAYA;AAAA,EAGI;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,OAAO,kBAAkB;AACzB,OAAO,mBAAmB;AAE1B,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB;AACjC,OAAO;AACP,OAAO;AACP,OAAO;AAQP,OAAO;AACP,OAAO;AAEP;AAAA,EACI;AAAA,OAIG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,MAAM,eAAe;AAAA,EACjB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AACR;AAWO,aAAM,mBAAmB,WAAW,SAAS,EAAE;AAAA,EA0E3C,cAAc;AACjB,UAAM;AA9DV,SAAU,WAAW,IAAI,qBAAqB,MAAM,SAAS;AAU7D,SAAgB,WAAW;AAG3B,SAAO,UAAU;AAMjB,SAAO,UAAU;AAMjB,SAAO,OAAO;AAGd,SAAO,WAAW;AAElB,SAAO,UAAgC;AAEvC,SAAO,YAAwB,CAAC;AAWhC,SAAO,YAAuB;AAG9B,SAAO,QAAQ;AAGf,SAAO,QAAQ;AASf,SAAU,WAA+B;AACzC,SAAU,WAAW;
|
|
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 render,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\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 { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.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 MenuItemAddedOrUpdatedEvent,\n MenuItemChildren,\n MenuItemRemovedEvent,\n} from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/tray/sp-tray.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport type { Popover } from '@spectrum-web-components/popover';\nimport {\n openOverlay,\n OverlayOptions,\n Placement,\n TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.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\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\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 PickerBase extends SizedMixin(Focusable) {\n /**\n * @private\n */\n public static openOverlay = async (\n target: HTMLElement,\n interaction: TriggerInteractions,\n content: HTMLElement,\n options: OverlayOptions\n ): Promise<() => void> => {\n return await openOverlay(target, interaction, content, options);\n };\n\n protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n public get target(): HTMLButtonElement | this {\n return this.button;\n }\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 public menuItems: MenuItem[] = [];\n private restoreChildren?: () => void;\n\n public optionsMenu!: Menu;\n\n /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\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 selectedItem?: MenuItem;\n\n private closeOverlay?: Promise<() => void>;\n\n private popover!: Popover;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public constructor() {\n super();\n this.onKeydown = this.onKeydown.bind(this);\n }\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 onButtonBlur(): void {\n this.focused = false;\n (this.target as HTMLButtonElement).removeEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n protected onButtonClick(): void {\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 onHelperFocus(): void {\n // set focused to true here instead of onButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public onButtonFocus(): void {\n (this.target as HTMLButtonElement).addEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n public handleChange(event: Event): void {\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n if (event.cancelable) {\n event.stopPropagation();\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 onKeydown = (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 public async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n this.selectedItem = item;\n this.value = item.value;\n this.open = false;\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem, 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 }\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 public overlayOpenCallback = async (): Promise<void> => {\n this.updateMenuItems();\n await this.itemsUpdated;\n await this.optionsMenu.updateComplete;\n requestAnimationFrame(() => this.menuStateResolver());\n };\n\n public overlayCloseCallback = async (): Promise<void> => {\n if (this.restoreChildren) {\n this.restoreChildren();\n this.restoreChildren = undefined;\n }\n this.close();\n requestAnimationFrame(() => this.menuStateResolver());\n };\n\n private popoverFragment!: DocumentFragment;\n\n private async generatePopover(): Promise<void> {\n if (!this.popoverFragment) {\n this.popoverFragment = document.createDocumentFragment();\n }\n render(this.renderPopover, this.popoverFragment, { host: this });\n this.popover = this.popoverFragment.children[0] as Popover;\n this.optionsMenu = this.popover.children[1] as Menu;\n }\n\n private async openMenu(): Promise<void> {\n /* c8 ignore next 9 */\n let reparentableChildren: Element[] = [];\n const deprecatedMenu = this.querySelector(':scope > sp-menu') as Menu;\n\n await this.generatePopover();\n if (deprecatedMenu) {\n reparentableChildren = Array.from(deprecatedMenu.children);\n } else {\n reparentableChildren = Array.from(this.children).filter(\n (element) => {\n return !element.hasAttribute('slot');\n }\n );\n }\n\n if (reparentableChildren.length === 0) {\n this.menuStateResolver();\n return;\n }\n\n this.restoreChildren = reparentChildren<\n Element & { focused?: boolean }\n >(reparentableChildren, this.optionsMenu, {\n position: 'beforeend',\n prepareCallback: (\n el: Element & {\n focused?: boolean | undefined;\n value?: string;\n selected?: boolean;\n }\n ) => {\n if (this.value === el.value) {\n this.setMenuItemSelected(el as MenuItem, true);\n }\n return (el) => {\n if (typeof el.focused !== 'undefined') {\n el.focused = false;\n }\n };\n },\n });\n\n this.sizePopover(this.popover);\n this.closeOverlay = Picker.openOverlay(this, 'modal', this.popover, {\n placement: this.isMobile.matches ? 'none' : this.placement,\n receivesFocus: 'auto',\n });\n }\n\n protected sizePopover(popover: HTMLElement): void {\n if (this.isMobile.matches) {\n popover.style.setProperty('--swc-menu-width', `100%`);\n return;\n }\n if (this.quiet) return;\n // only use `this.offsetWidth` when Standard variant\n popover.style.setProperty('min-width', `${this.offsetWidth}px`);\n }\n\n private async closeMenu(): Promise<void> {\n if (this.closeOverlay) {\n const closeOverlay = this.closeOverlay;\n delete this.closeOverlay;\n (await closeOverlay)();\n }\n }\n\n protected get selectedItemContent(): MenuItemChildren {\n if (this.selectedItem) {\n return this.selectedItem.itemChildren;\n }\n return { icon: [], content: [] };\n }\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\">${this.label}</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 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.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 `,\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 ? '-1' : '0'}\"\n @focus=${this.onHelperFocus}\n ></span>\n <button\n aria-haspopup=\"true\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-labelledby=\"button icon label\"\n id=\"button\"\n class=\"button\"\n @blur=${this.onButtonBlur}\n @click=${this.onButtonClick}\n @focus=${this.onButtonFocus}\n ?disabled=${this.disabled}\n tabindex=\"-1\"\n >\n ${this.buttonContent}\n </button>\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 (\n changes.has('open') &&\n (this.open || typeof changes.get('open') !== 'undefined')\n ) {\n this.menuStatePromise = new Promise(\n (res) => (this.menuStateResolver = res)\n );\n if (this.open) {\n this.openMenu();\n } else {\n this.closeMenu();\n }\n }\n if (changes.has('value') && !changes.has('selectedItem')) {\n this.updateMenuItems();\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector('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 get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n arial-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected get renderPopover(): TemplateResult {\n const content = html`\n ${this.dismissHelper}\n <sp-menu\n id=\"menu\"\n role=\"${this.listRole}\"\n @change=${this.handleChange}\n .selects=${this.selects}\n ></sp-menu>\n ${this.dismissHelper}\n `;\n if (this.isMobile.matches) {\n return html`\n <sp-tray\n id=\"popover\"\n role=\"dialog\"\n @sp-menu-item-added-or-updated=${this.updateMenuItems}\n .overlayOpenCallback=${this.overlayOpenCallback}\n .overlayCloseCallback=${this.overlayCloseCallback}\n >\n ${content}\n </sp-tray>\n `;\n }\n return html`\n <sp-popover\n id=\"popover\"\n role=\"dialog\"\n @sp-menu-item-added-or-updated=${this.updateMenuItems}\n .overlayOpenCallback=${this.overlayOpenCallback}\n .overlayCloseCallback=${this.overlayCloseCallback}\n >\n ${content}\n </sp-popover>\n `;\n }\n\n private _willUpdateItems = false;\n protected itemsUpdated: Promise<void> = Promise.resolve();\n\n /**\n * Acquire the available MenuItems in the Picker by\n * direct element query or by assuming the list managed\n * by the Menu within the open options overlay.\n */\n protected updateMenuItems(\n event?: MenuItemAddedOrUpdatedEvent | MenuItemRemovedEvent\n ): void {\n if (this.open && event?.type === 'sp-menu-item-removed') return;\n if (this._willUpdateItems) return;\n this._willUpdateItems = true;\n if (event?.item === this.selectedItem) {\n this.requestUpdate();\n }\n\n let resolve = (): void => {\n return;\n };\n this.itemsUpdated = new Promise((res) => (resolve = res));\n // Debounce the update so we only update once\n // if multiple items have changed\n window.requestAnimationFrame(async () => {\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.menuItems = this.optionsMenu.childItems;\n } else {\n this.menuItems = [\n ...this.querySelectorAll(\n 'sp-menu-item:not([slot=\"submenu\"] *)'\n ),\n ] as MenuItem[];\n }\n this.manageSelection();\n resolve();\n this._willUpdateItems = false;\n });\n }\n\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n await this.menuStatePromise;\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\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 }\n\n private menuStatePromise = Promise.resolve();\n private menuStateResolver!: () => void;\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.menuStatePromise;\n await this.itemsUpdated;\n await this.selectionPromise;\n return complete;\n }\n\n public override connectedCallback(): void {\n this.updateMenuItems();\n this.addEventListener(\n 'sp-menu-item-added-or-updated',\n this.updateMenuItems\n );\n this.addEventListener('sp-menu-item-removed', this.updateMenuItems);\n super.connectedCallback();\n }\n\n public override disconnectedCallback(): void {\n this.close();\n\n super.disconnectedCallback();\n }\n}\n\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override onKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n this.focused = true;\n if (!code.startsWith('Arrow') || this.readonly) {\n return;\n }\n event.preventDefault();\n if (code === 'ArrowUp' || code === 'ArrowDown') {\n this.toggle(true);\n return;\n }\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 = !this.value || 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": ["el"]
|
|
7
7
|
}
|
package/src/Picker.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(u,a,e,t)=>{for(var s=t>1?void 0:t?p(a,e):a,i=u.length-1,n;i>=0;i--)(n=u[i])&&(s=(t?n(a,e,s):n(s))||s);return t&&s&&d(a,e,s),s};import{html as
|
|
1
|
+
"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(u,a,e,t)=>{for(var s=t>1?void 0:t?p(a,e):a,i=u.length-1,n;i>=0;i--)(n=u[i])&&(s=(t?n(a,e,s):n(s))||s);return t&&s&&d(a,e,s),s};import{html as r,nothing as c,render as m,SizedMixin as h}from"@spectrum-web-components/base";import{classMap as v}from"@spectrum-web-components/base/src/directives.js";import{property as l,query as f}from"@spectrum-web-components/base/src/decorators.js";import b from"./picker.css.js";import y from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import{Focusable as I}from"@spectrum-web-components/shared/src/focusable.js";import{reparentChildren as M}from"@spectrum-web-components/shared/src/reparent-children.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"@spectrum-web-components/tray/sp-tray.js";import"@spectrum-web-components/popover/sp-popover.js";import{openOverlay as w}from"@spectrum-web-components/overlay";import{IS_MOBILE as C,MatchMediaController as g}from"@spectrum-web-components/reactive-controllers/src/MatchMedia.js";const S={s:"spectrum-UIIcon-ChevronDown75",m:"spectrum-UIIcon-ChevronDown100",l:"spectrum-UIIcon-ChevronDown200",xl:"spectrum-UIIcon-ChevronDown300"};export class PickerBase extends h(I){constructor(){super();this.isMobile=new g(this,C);this.disabled=!1;this.focused=!1;this.invalid=!1;this.open=!1;this.readonly=!1;this.selects="single";this.menuItems=[];this.placement="bottom-start";this.quiet=!1;this.value="";this.listRole="listbox";this.itemRole="option";this.onKeydown=e=>{this.focused=!0,!(e.code!=="ArrowDown"&&e.code!=="ArrowUp")&&(e.preventDefault(),this.toggle(!0))};this.overlayOpenCallback=async()=>{this.updateMenuItems(),await this.itemsUpdated,await this.optionsMenu.updateComplete,requestAnimationFrame(()=>this.menuStateResolver())};this.overlayCloseCallback=async()=>{this.restoreChildren&&(this.restoreChildren(),this.restoreChildren=void 0),this.close(),requestAnimationFrame(()=>this.menuStateResolver())};this._willUpdateItems=!1;this.itemsUpdated=Promise.resolve();this.menuStatePromise=Promise.resolve();this.selectionPromise=Promise.resolve();this.onKeydown=this.onKeydown.bind(this)}get target(){return this.button}get focusElement(){return this.open?this.optionsMenu:this.button}forceFocusVisible(){this.focused=!0}onButtonBlur(){this.focused=!1,this.target.removeEventListener("keydown",this.onKeydown)}onButtonClick(){this.toggle()}focus(e){super.focus(e),!this.disabled&&this.focusElement&&(this.focused=this.hasVisibleFocusInTree())}onHelperFocus(){this.focused=!0,this.button.focus()}onButtonFocus(){this.target.addEventListener("keydown",this.onKeydown)}handleChange(e){const t=e.target,[s]=t.selectedItems;e.cancelable?(e.stopPropagation(),this.setValueFromItem(s,e)):this.open=!1}async setValueFromItem(e,t){const s=this.selectedItem,i=this.value;if(this.selectedItem=e,this.value=e.value,this.open=!1,await this.updateComplete,!this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))){t&&t.preventDefault(),this.setMenuItemSelected(this.selectedItem,!1),s&&this.setMenuItemSelected(s,!0),this.selectedItem=s,this.value=i,this.open=!0;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)}async generatePopover(){this.popoverFragment||(this.popoverFragment=document.createDocumentFragment()),m(this.renderPopover,this.popoverFragment,{host:this}),this.popover=this.popoverFragment.children[0],this.optionsMenu=this.popover.children[1]}async openMenu(){let e=[];const t=this.querySelector(":scope > sp-menu");if(await this.generatePopover(),t?e=Array.from(t.children):e=Array.from(this.children).filter(s=>!s.hasAttribute("slot")),e.length===0){this.menuStateResolver();return}this.restoreChildren=M(e,this.optionsMenu,{position:"beforeend",prepareCallback:s=>(this.value===s.value&&this.setMenuItemSelected(s,!0),i=>{typeof i.focused!="undefined"&&(i.focused=!1)})}),this.sizePopover(this.popover),this.closeOverlay=Picker.openOverlay(this,"modal",this.popover,{placement:this.isMobile.matches?"none":this.placement,receivesFocus:"auto"})}sizePopover(e){if(this.isMobile.matches){e.style.setProperty("--swc-menu-width","100%");return}this.quiet||e.style.setProperty("min-width",`${this.offsetWidth}px`)}async closeMenu(){if(this.closeOverlay){const e=this.closeOverlay;delete this.closeOverlay,(await e)()}}get selectedItemContent(){return this.selectedItem?this.selectedItem.itemChildren:{icon:[],content:[]}}renderLabelContent(e){return this.value&&this.selectedItem?e:r`
|
|
2
2
|
<slot name="label">${this.label}</slot>
|
|
3
|
-
`}get buttonContent(){const e={"visually-hidden":this.icons==="only"&&!!this.value,placeholder:!this.value};return[
|
|
3
|
+
`}get buttonContent(){const e={"visually-hidden":this.icons==="only"&&!!this.value,placeholder:!this.value};return[r`
|
|
4
4
|
<span id="icon" ?hidden=${this.icons==="none"}>
|
|
5
5
|
${this.selectedItemContent.icon}
|
|
6
6
|
</span>
|
|
7
7
|
<span id="label" class=${v(e)}>
|
|
8
8
|
${this.renderLabelContent(this.selectedItemContent.content)}
|
|
9
9
|
</span>
|
|
10
|
-
${this.invalid?
|
|
10
|
+
${this.invalid?r`
|
|
11
11
|
<sp-icon-alert
|
|
12
12
|
class="validation-icon"
|
|
13
13
|
></sp-icon-alert>
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
<sp-icon-chevron100
|
|
16
16
|
class="picker ${S[this.size]}"
|
|
17
17
|
></sp-icon-chevron100>
|
|
18
|
-
`]}render(){return
|
|
18
|
+
`]}render(){return r`
|
|
19
19
|
<span
|
|
20
20
|
id="focus-helper"
|
|
21
21
|
tabindex="${this.focused?"-1":"0"}"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
>
|
|
36
36
|
${this.buttonContent}
|
|
37
37
|
</button>
|
|
38
|
-
`}update(e){this.selects&&(this.selects="single"),e.has("disabled")&&this.disabled&&(this.open=!1),e.has("open")&&(this.open||typeof e.get("open")!="undefined")&&(this.menuStatePromise=new Promise(t=>this.menuStateResolver=t),this.open?this.openMenu():this.closeMenu()),e.has("value")&&!e.has("selectedItem")&&this.updateMenuItems(),super.update(e)}get dismissHelper(){return
|
|
38
|
+
`}update(e){this.selects&&(this.selects="single"),e.has("disabled")&&this.disabled&&(this.open=!1),e.has("open")&&(this.open||typeof e.get("open")!="undefined")&&(this.menuStatePromise=new Promise(t=>this.menuStateResolver=t),this.open?this.openMenu():this.closeMenu()),e.has("value")&&!e.has("selectedItem")&&this.updateMenuItems(),super.update(e)}get dismissHelper(){return r`
|
|
39
39
|
<div class="visually-hidden">
|
|
40
40
|
<button
|
|
41
41
|
tabindex="-1"
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
@click=${this.close}
|
|
44
44
|
></button>
|
|
45
45
|
</div>
|
|
46
|
-
`}get renderPopover(){const e=
|
|
46
|
+
`}get renderPopover(){const e=r`
|
|
47
47
|
${this.dismissHelper}
|
|
48
48
|
<sp-menu
|
|
49
49
|
id="menu"
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
.selects=${this.selects}
|
|
53
53
|
></sp-menu>
|
|
54
54
|
${this.dismissHelper}
|
|
55
|
-
`;return this.isMobile.matches?
|
|
55
|
+
`;return this.isMobile.matches?r`
|
|
56
56
|
<sp-tray
|
|
57
57
|
id="popover"
|
|
58
58
|
role="dialog"
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
>
|
|
63
63
|
${e}
|
|
64
64
|
</sp-tray>
|
|
65
|
-
`:
|
|
65
|
+
`:r`
|
|
66
66
|
<sp-popover
|
|
67
67
|
id="popover"
|
|
68
68
|
role="dialog"
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
>
|
|
73
73
|
${e}
|
|
74
74
|
</sp-popover>
|
|
75
|
-
`}updateMenuItems(e){if(this.open&&(e==null?void 0:e.type)==="sp-menu-item-removed"||this._willUpdateItems)return;this._willUpdateItems=!0,(e==null?void 0:e.item)===this.selectedItem&&this.requestUpdate();let t=()=>{};this.itemsUpdated=new Promise(s=>t=s),window.requestAnimationFrame(async()=>{this.open?(await this.optionsMenu.updateComplete,this.menuItems=this.optionsMenu.childItems):this.menuItems=[...this.querySelectorAll('sp-menu-item:not([slot="submenu"] *)')],this.manageSelection(),t(),this._willUpdateItems=!1})}async manageSelection(){if(this.selects==null)return;await this.menuStatePromise,this.selectionPromise=new Promise(t=>this.selectionResolver=t);let e;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()}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.menuStatePromise,await this.itemsUpdated,await this.selectionPromise,e}connectedCallback(){this.updateMenuItems(),this.addEventListener("sp-menu-item-added-or-updated",this.updateMenuItems),this.addEventListener("sp-menu-item-removed",this.updateMenuItems),super.connectedCallback()}disconnectedCallback(){this.close(),super.disconnectedCallback()}}PickerBase.openOverlay=async(e,t,s,i)=>await w(e,t,s,i),o([f("#button")],PickerBase.prototype,"button",2),o([
|
|
75
|
+
`}updateMenuItems(e){if(this.open&&(e==null?void 0:e.type)==="sp-menu-item-removed"||this._willUpdateItems)return;this._willUpdateItems=!0,(e==null?void 0:e.item)===this.selectedItem&&this.requestUpdate();let t=()=>{};this.itemsUpdated=new Promise(s=>t=s),window.requestAnimationFrame(async()=>{this.open?(await this.optionsMenu.updateComplete,this.menuItems=this.optionsMenu.childItems):this.menuItems=[...this.querySelectorAll('sp-menu-item:not([slot="submenu"] *)')],this.manageSelection(),t(),this._willUpdateItems=!1})}async manageSelection(){if(this.selects==null)return;await this.menuStatePromise,this.selectionPromise=new Promise(t=>this.selectionResolver=t);let e;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()}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.menuStatePromise,await this.itemsUpdated,await this.selectionPromise,e}connectedCallback(){this.updateMenuItems(),this.addEventListener("sp-menu-item-added-or-updated",this.updateMenuItems),this.addEventListener("sp-menu-item-removed",this.updateMenuItems),super.connectedCallback()}disconnectedCallback(){this.close(),super.disconnectedCallback()}}PickerBase.openOverlay=async(e,t,s,i)=>await w(e,t,s,i),o([f("#button")],PickerBase.prototype,"button",2),o([l({type:Boolean,reflect:!0})],PickerBase.prototype,"disabled",2),o([l({type:Boolean,reflect:!0})],PickerBase.prototype,"focused",2),o([l({type:String,reflect:!0})],PickerBase.prototype,"icons",2),o([l({type:Boolean,reflect:!0})],PickerBase.prototype,"invalid",2),o([l()],PickerBase.prototype,"label",2),o([l({type:Boolean,reflect:!0})],PickerBase.prototype,"open",2),o([l({type:Boolean,reflect:!0})],PickerBase.prototype,"readonly",2),o([l()],PickerBase.prototype,"placement",2),o([l({type:Boolean,reflect:!0})],PickerBase.prototype,"quiet",2),o([l({type:String})],PickerBase.prototype,"value",2),o([l({attribute:!1})],PickerBase.prototype,"selectedItem",2);export class Picker extends PickerBase{constructor(){super(...arguments);this.onKeydown=e=>{const{code:t}=e;if(this.focused=!0,!t.startsWith("Arrow")||this.readonly)return;if(e.preventDefault(),t==="ArrowUp"||t==="ArrowDown"){this.toggle(!0);return}const s=this.selectedItem?this.menuItems.indexOf(this.selectedItem):-1,i=!this.value||t==="ArrowRight"?1:-1;let n=s+i;for(;this.menuItems[n]&&this.menuItems[n].disabled;)n+=i;!this.menuItems[n]||this.menuItems[n].disabled||(!this.value||n!==s)&&this.setValueFromItem(this.menuItems[n])}}static get styles(){return[b,y]}}
|
|
76
76
|
//# 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 render,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\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 { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.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 MenuItemAddedOrUpdatedEvent,\n MenuItemChildren,\n MenuItemRemovedEvent,\n} from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/tray/sp-tray.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport type { Popover } from '@spectrum-web-components/popover';\nimport {\n openOverlay,\n OverlayOptions,\n Placement,\n TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.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\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\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 PickerBase extends SizedMixin(Focusable) {\n /**\n * @private\n */\n public static openOverlay = async (\n target: HTMLElement,\n interaction: TriggerInteractions,\n content: HTMLElement,\n options: OverlayOptions\n ): Promise<() => void> => {\n return await openOverlay(target, interaction, content, options);\n };\n\n protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n public get target(): HTMLButtonElement | this {\n return this.button;\n }\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 public menuItems: MenuItem[] = [];\n private restoreChildren?: () => void;\n\n public optionsMenu!: Menu;\n\n /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\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 selectedItem?: MenuItem;\n\n private closeOverlay?: Promise<() => void>;\n\n private popover!: Popover;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public constructor() {\n super();\n this.onKeydown = this.onKeydown.bind(this);\n }\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 onButtonBlur(): void {\n this.focused = false;\n (this.target as HTMLButtonElement).removeEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n protected onButtonClick(): void {\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 onHelperFocus(): void {\n // set focused to true here instead of onButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public onButtonFocus(): void {\n (this.target as HTMLButtonElement).addEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n public handleChange(event: Event): void {\n event.stopPropagation();\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n this.setValueFromItem(selected, event);\n }\n\n protected onKeydown = (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 public async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n this.selectedItem = item;\n this.value = item.value;\n this.open = false;\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem, 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 }\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 public overlayOpenCallback = async (): Promise<void> => {\n this.updateMenuItems();\n await this.itemsUpdated;\n await this.optionsMenu.updateComplete;\n requestAnimationFrame(() => this.menuStateResolver());\n };\n\n public overlayCloseCallback = async (): Promise<void> => {\n if (this.restoreChildren) {\n this.restoreChildren();\n this.restoreChildren = undefined;\n }\n this.close();\n requestAnimationFrame(() => this.menuStateResolver());\n };\n\n private popoverFragment!: DocumentFragment;\n\n private async generatePopover(): Promise<void> {\n if (!this.popoverFragment) {\n this.popoverFragment = document.createDocumentFragment();\n }\n render(this.renderPopover, this.popoverFragment, { host: this });\n this.popover = this.popoverFragment.children[0] as Popover;\n this.optionsMenu = this.popover.children[1] as Menu;\n }\n\n private async openMenu(): Promise<void> {\n /* c8 ignore next 9 */\n let reparentableChildren: Element[] = [];\n const deprecatedMenu = this.querySelector(':scope > sp-menu') as Menu;\n\n await this.generatePopover();\n if (deprecatedMenu) {\n reparentableChildren = Array.from(deprecatedMenu.children);\n } else {\n reparentableChildren = Array.from(this.children).filter(\n (element) => {\n return !element.hasAttribute('slot');\n }\n );\n }\n\n if (reparentableChildren.length === 0) {\n this.menuStateResolver();\n return;\n }\n\n this.restoreChildren = reparentChildren<\n Element & { focused?: boolean }\n >(reparentableChildren, this.optionsMenu, {\n position: 'beforeend',\n prepareCallback: (\n el: Element & {\n focused?: boolean | undefined;\n value?: string;\n selected?: boolean;\n }\n ) => {\n if (this.value === el.value) {\n this.setMenuItemSelected(el as MenuItem, true);\n }\n return (el) => {\n if (typeof el.focused !== 'undefined') {\n el.focused = false;\n }\n };\n },\n });\n\n this.sizePopover(this.popover);\n this.closeOverlay = Picker.openOverlay(this, 'modal', this.popover, {\n placement: this.isMobile.matches ? 'none' : this.placement,\n receivesFocus: 'auto',\n });\n }\n\n protected sizePopover(popover: HTMLElement): void {\n if (this.isMobile.matches) {\n popover.style.setProperty('--swc-menu-width', `100%`);\n return;\n }\n if (this.quiet) return;\n // only use `this.offsetWidth` when Standard variant\n popover.style.setProperty('min-width', `${this.offsetWidth}px`);\n }\n\n private async closeMenu(): Promise<void> {\n if (this.closeOverlay) {\n const closeOverlay = this.closeOverlay;\n delete this.closeOverlay;\n (await closeOverlay)();\n }\n }\n\n protected get selectedItemContent(): MenuItemChildren {\n if (this.selectedItem) {\n return this.selectedItem.itemChildren;\n }\n return { icon: [], content: [] };\n }\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\">${this.label}</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 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.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 `,\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 ? '-1' : '0'}\"\n @focus=${this.onHelperFocus}\n ></span>\n <button\n aria-haspopup=\"true\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-labelledby=\"button icon label\"\n id=\"button\"\n class=\"button\"\n @blur=${this.onButtonBlur}\n @click=${this.onButtonClick}\n @focus=${this.onButtonFocus}\n ?disabled=${this.disabled}\n tabindex=\"-1\"\n >\n ${this.buttonContent}\n </button>\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 (\n changes.has('open') &&\n (this.open || typeof changes.get('open') !== 'undefined')\n ) {\n this.menuStatePromise = new Promise(\n (res) => (this.menuStateResolver = res)\n );\n if (this.open) {\n this.openMenu();\n } else {\n this.closeMenu();\n }\n }\n if (changes.has('value') && !changes.has('selectedItem')) {\n this.updateMenuItems();\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector('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 get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n arial-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected get renderPopover(): TemplateResult {\n const content = html`\n ${this.dismissHelper}\n <sp-menu\n id=\"menu\"\n role=\"${this.listRole}\"\n @change=${this.handleChange}\n .selects=${this.selects}\n ></sp-menu>\n ${this.dismissHelper}\n `;\n if (this.isMobile.matches) {\n return html`\n <sp-tray\n id=\"popover\"\n role=\"dialog\"\n @sp-menu-item-added-or-updated=${this.updateMenuItems}\n .overlayOpenCallback=${this.overlayOpenCallback}\n .overlayCloseCallback=${this.overlayCloseCallback}\n >\n ${content}\n </sp-tray>\n `;\n }\n return html`\n <sp-popover\n id=\"popover\"\n role=\"dialog\"\n @sp-menu-item-added-or-updated=${this.updateMenuItems}\n .overlayOpenCallback=${this.overlayOpenCallback}\n .overlayCloseCallback=${this.overlayCloseCallback}\n >\n ${content}\n </sp-popover>\n `;\n }\n\n private _willUpdateItems = false;\n protected itemsUpdated: Promise<void> = Promise.resolve();\n\n /**\n * Acquire the available MenuItems in the Picker by\n * direct element query or by assuming the list managed\n * by the Menu within the open options overlay.\n */\n protected updateMenuItems(\n event?: MenuItemAddedOrUpdatedEvent | MenuItemRemovedEvent\n ): void {\n if (this.open && event?.type === 'sp-menu-item-removed') return;\n if (this._willUpdateItems) return;\n this._willUpdateItems = true;\n if (event?.item === this.selectedItem) {\n this.requestUpdate();\n }\n\n let resolve = (): void => {\n return;\n };\n this.itemsUpdated = new Promise((res) => (resolve = res));\n // Debounce the update so we only update once\n // if multiple items have changed\n window.requestAnimationFrame(async () => {\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.menuItems = this.optionsMenu.childItems;\n } else {\n this.menuItems = [\n ...this.querySelectorAll(\n 'sp-menu-item:not([slot=\"submenu\"] *)'\n ),\n ] as MenuItem[];\n }\n this.manageSelection();\n resolve();\n this._willUpdateItems = false;\n });\n }\n\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n await this.menuStatePromise;\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\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 }\n\n private menuStatePromise = Promise.resolve();\n private menuStateResolver!: () => void;\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.menuStatePromise;\n await this.itemsUpdated;\n await this.selectionPromise;\n return complete;\n }\n\n public override connectedCallback(): void {\n this.updateMenuItems();\n this.addEventListener(\n 'sp-menu-item-added-or-updated',\n this.updateMenuItems\n );\n this.addEventListener('sp-menu-item-removed', this.updateMenuItems);\n super.connectedCallback();\n }\n\n public override disconnectedCallback(): void {\n this.close();\n\n super.disconnectedCallback();\n }\n}\n\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override onKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n this.focused = true;\n if (!code.startsWith('Arrow') || this.readonly) {\n return;\n }\n event.preventDefault();\n if (code === 'ArrowUp' || code === 'ArrowDown') {\n this.toggle(true);\n return;\n }\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 = !this.value || 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,UAAAC,EACA,cAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OACI,YAAAC,EACA,SAAAC,MACG,kDAEP,OAAOC,MAAkB,kBACzB,OAAOC,MAAmB,iEAE1B,OAAS,aAAAC,MAAiB,mDAC1B,OAAS,oBAAAC,MAAwB,2DACjC,MAAO,gEACP,MAAO,iEACP,MAAO,2CAQP,MAAO,2CACP,MAAO,iDAEP,OACI,eAAAC,MAIG,mCACP,OACI,aAAAC,EACA,wBAAAC,MACG,kEAEP,MAAMC,EAAe,CACjB,EAAG,gCACH,EAAG,iCACH,EAAG,iCACH,GAAI,gCACR,EAWO,aAAM,mBAAmBX,EAAWM,CAAS,CAAE,CA0E3C,aAAc,CACjB,MAAM,EA9DV,KAAU,SAAW,IAAII,EAAqB,KAAMD,CAAS,EAU7D,KAAgB,SAAW,GAG3B,KAAO,QAAU,GAMjB,KAAO,QAAU,GAMjB,KAAO,KAAO,GAGd,KAAO,SAAW,GAElB,KAAO,QAAgC,SAEvC,KAAO,UAAwB,CAAC,EAWhC,KAAO,UAAuB,eAG9B,KAAO,MAAQ,GAGf,KAAO,MAAQ,GASf,KAAU,SAA+B,UACzC,KAAU,SAAW,
|
|
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 render,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { classMap } from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\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 { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.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 MenuItemAddedOrUpdatedEvent,\n MenuItemChildren,\n MenuItemRemovedEvent,\n} from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/tray/sp-tray.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport type { Popover } from '@spectrum-web-components/popover';\nimport {\n openOverlay,\n OverlayOptions,\n Placement,\n TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.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\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\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 PickerBase extends SizedMixin(Focusable) {\n /**\n * @private\n */\n public static openOverlay = async (\n target: HTMLElement,\n interaction: TriggerInteractions,\n content: HTMLElement,\n options: OverlayOptions\n ): Promise<() => void> => {\n return await openOverlay(target, interaction, content, options);\n };\n\n protected isMobile = new MatchMediaController(this, IS_MOBILE);\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n public get target(): HTMLButtonElement | this {\n return this.button;\n }\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 public menuItems: MenuItem[] = [];\n private restoreChildren?: () => void;\n\n public optionsMenu!: Menu;\n\n /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\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 selectedItem?: MenuItem;\n\n private closeOverlay?: Promise<() => void>;\n\n private popover!: Popover;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public constructor() {\n super();\n this.onKeydown = this.onKeydown.bind(this);\n }\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 onButtonBlur(): void {\n this.focused = false;\n (this.target as HTMLButtonElement).removeEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n protected onButtonClick(): void {\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 onHelperFocus(): void {\n // set focused to true here instead of onButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public onButtonFocus(): void {\n (this.target as HTMLButtonElement).addEventListener(\n 'keydown',\n this.onKeydown\n );\n }\n\n public handleChange(event: Event): void {\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n if (event.cancelable) {\n event.stopPropagation();\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 onKeydown = (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 public async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n this.selectedItem = item;\n this.value = item.value;\n this.open = false;\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem, 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 }\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 public overlayOpenCallback = async (): Promise<void> => {\n this.updateMenuItems();\n await this.itemsUpdated;\n await this.optionsMenu.updateComplete;\n requestAnimationFrame(() => this.menuStateResolver());\n };\n\n public overlayCloseCallback = async (): Promise<void> => {\n if (this.restoreChildren) {\n this.restoreChildren();\n this.restoreChildren = undefined;\n }\n this.close();\n requestAnimationFrame(() => this.menuStateResolver());\n };\n\n private popoverFragment!: DocumentFragment;\n\n private async generatePopover(): Promise<void> {\n if (!this.popoverFragment) {\n this.popoverFragment = document.createDocumentFragment();\n }\n render(this.renderPopover, this.popoverFragment, { host: this });\n this.popover = this.popoverFragment.children[0] as Popover;\n this.optionsMenu = this.popover.children[1] as Menu;\n }\n\n private async openMenu(): Promise<void> {\n /* c8 ignore next 9 */\n let reparentableChildren: Element[] = [];\n const deprecatedMenu = this.querySelector(':scope > sp-menu') as Menu;\n\n await this.generatePopover();\n if (deprecatedMenu) {\n reparentableChildren = Array.from(deprecatedMenu.children);\n } else {\n reparentableChildren = Array.from(this.children).filter(\n (element) => {\n return !element.hasAttribute('slot');\n }\n );\n }\n\n if (reparentableChildren.length === 0) {\n this.menuStateResolver();\n return;\n }\n\n this.restoreChildren = reparentChildren<\n Element & { focused?: boolean }\n >(reparentableChildren, this.optionsMenu, {\n position: 'beforeend',\n prepareCallback: (\n el: Element & {\n focused?: boolean | undefined;\n value?: string;\n selected?: boolean;\n }\n ) => {\n if (this.value === el.value) {\n this.setMenuItemSelected(el as MenuItem, true);\n }\n return (el) => {\n if (typeof el.focused !== 'undefined') {\n el.focused = false;\n }\n };\n },\n });\n\n this.sizePopover(this.popover);\n this.closeOverlay = Picker.openOverlay(this, 'modal', this.popover, {\n placement: this.isMobile.matches ? 'none' : this.placement,\n receivesFocus: 'auto',\n });\n }\n\n protected sizePopover(popover: HTMLElement): void {\n if (this.isMobile.matches) {\n popover.style.setProperty('--swc-menu-width', `100%`);\n return;\n }\n if (this.quiet) return;\n // only use `this.offsetWidth` when Standard variant\n popover.style.setProperty('min-width', `${this.offsetWidth}px`);\n }\n\n private async closeMenu(): Promise<void> {\n if (this.closeOverlay) {\n const closeOverlay = this.closeOverlay;\n delete this.closeOverlay;\n (await closeOverlay)();\n }\n }\n\n protected get selectedItemContent(): MenuItemChildren {\n if (this.selectedItem) {\n return this.selectedItem.itemChildren;\n }\n return { icon: [], content: [] };\n }\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\">${this.label}</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 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.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 `,\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 ? '-1' : '0'}\"\n @focus=${this.onHelperFocus}\n ></span>\n <button\n aria-haspopup=\"true\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-labelledby=\"button icon label\"\n id=\"button\"\n class=\"button\"\n @blur=${this.onButtonBlur}\n @click=${this.onButtonClick}\n @focus=${this.onButtonFocus}\n ?disabled=${this.disabled}\n tabindex=\"-1\"\n >\n ${this.buttonContent}\n </button>\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 (\n changes.has('open') &&\n (this.open || typeof changes.get('open') !== 'undefined')\n ) {\n this.menuStatePromise = new Promise(\n (res) => (this.menuStateResolver = res)\n );\n if (this.open) {\n this.openMenu();\n } else {\n this.closeMenu();\n }\n }\n if (changes.has('value') && !changes.has('selectedItem')) {\n this.updateMenuItems();\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector('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 get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n arial-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected get renderPopover(): TemplateResult {\n const content = html`\n ${this.dismissHelper}\n <sp-menu\n id=\"menu\"\n role=\"${this.listRole}\"\n @change=${this.handleChange}\n .selects=${this.selects}\n ></sp-menu>\n ${this.dismissHelper}\n `;\n if (this.isMobile.matches) {\n return html`\n <sp-tray\n id=\"popover\"\n role=\"dialog\"\n @sp-menu-item-added-or-updated=${this.updateMenuItems}\n .overlayOpenCallback=${this.overlayOpenCallback}\n .overlayCloseCallback=${this.overlayCloseCallback}\n >\n ${content}\n </sp-tray>\n `;\n }\n return html`\n <sp-popover\n id=\"popover\"\n role=\"dialog\"\n @sp-menu-item-added-or-updated=${this.updateMenuItems}\n .overlayOpenCallback=${this.overlayOpenCallback}\n .overlayCloseCallback=${this.overlayCloseCallback}\n >\n ${content}\n </sp-popover>\n `;\n }\n\n private _willUpdateItems = false;\n protected itemsUpdated: Promise<void> = Promise.resolve();\n\n /**\n * Acquire the available MenuItems in the Picker by\n * direct element query or by assuming the list managed\n * by the Menu within the open options overlay.\n */\n protected updateMenuItems(\n event?: MenuItemAddedOrUpdatedEvent | MenuItemRemovedEvent\n ): void {\n if (this.open && event?.type === 'sp-menu-item-removed') return;\n if (this._willUpdateItems) return;\n this._willUpdateItems = true;\n if (event?.item === this.selectedItem) {\n this.requestUpdate();\n }\n\n let resolve = (): void => {\n return;\n };\n this.itemsUpdated = new Promise((res) => (resolve = res));\n // Debounce the update so we only update once\n // if multiple items have changed\n window.requestAnimationFrame(async () => {\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.menuItems = this.optionsMenu.childItems;\n } else {\n this.menuItems = [\n ...this.querySelectorAll(\n 'sp-menu-item:not([slot=\"submenu\"] *)'\n ),\n ] as MenuItem[];\n }\n this.manageSelection();\n resolve();\n this._willUpdateItems = false;\n });\n }\n\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n await this.menuStatePromise;\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\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 }\n\n private menuStatePromise = Promise.resolve();\n private menuStateResolver!: () => void;\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.menuStatePromise;\n await this.itemsUpdated;\n await this.selectionPromise;\n return complete;\n }\n\n public override connectedCallback(): void {\n this.updateMenuItems();\n this.addEventListener(\n 'sp-menu-item-added-or-updated',\n this.updateMenuItems\n );\n this.addEventListener('sp-menu-item-removed', this.updateMenuItems);\n super.connectedCallback();\n }\n\n public override disconnectedCallback(): void {\n this.close();\n\n super.disconnectedCallback();\n }\n}\n\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles];\n }\n\n protected override onKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n this.focused = true;\n if (!code.startsWith('Arrow') || this.readonly) {\n return;\n }\n event.preventDefault();\n if (code === 'ArrowUp' || code === 'ArrowDown') {\n this.toggle(true);\n return;\n }\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 = !this.value || 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": ["html", "nothing", "render", "SizedMixin", "classMap", "property", "query", "pickerStyles", "chevronStyles", "Focusable", "reparentChildren", "openOverlay", "IS_MOBILE", "MatchMediaController", "chevronClass", "event", "options", "target", "selected", "item", "menuChangeEvent", "oldSelectedItem", "oldValue", "value", "reparentableChildren", "deprecatedMenu", "element", "el", "popover", "closeOverlay", "content", "labelClasses", "changes", "res", "resolve", "selectedItem", "complete", "interaction", "__decorateClass", "code", "selectedIndex", "nextOffset", "nextIndex"]
|
|
7
7
|
}
|
package/src/picker.css.dev.js
CHANGED
|
@@ -295,7 +295,7 @@ var(--spectrum-alias-border-size-thin)
|
|
|
295
295
|
--spectrum-picker-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-quiet-disabled)
|
|
296
296
|
);color:var(
|
|
297
297
|
--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)
|
|
298
|
-
)}@media (forced-colors:active){#button{--spectrum-picker-focus-ring-color:Highlight;--spectrum-picker-m-quiet-texticon-border-color-down:ButtonText;--spectrum-picker-m-quiet-texticon-border-color:ButtonText;--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-border-color-error-key-focus:Highlight;--spectrum-picker-m-texticon-placeholder-text-color-disabled:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-down:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-hover:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color:GrayText;--spectrum-picker-m-texticon-text-color-disabled:GrayText;--spectrum-picker-m-texticon-text-color-key-focus:ButtonText;--spectrum-picker-m-texticon-text-color:ButtonText;--spectrum-picker-m-textonly-focusring-border-color-key-focus:Highlight;--spectrum-picker-quiet-border-color-key-focus:Highlight}#button.focus-visible{outline:2px solid Highlight}#button:focus-visible{outline:2px solid Highlight}#button:disabled,:host([disabled]) #button{border-color:GrayText;border-width:var(--spectrum-picker-texticon-border-size)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}}:host{display:inline-flex;max-width:100%;min-width:var(--spectrum-picker-min-width);vertical-align:top;width:var(--spectrum-picker-width)}:host([quiet]){min-width:0;width:auto}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{max-width:100%;min-width:100%;width:100%}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}sp-popover{display:none}.picker,.validation-icon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(
|
|
298
|
+
)}@media (forced-colors:active){#button{--spectrum-picker-focus-ring-color:Highlight;--spectrum-picker-m-quiet-texticon-border-color-down:ButtonText;--spectrum-picker-m-quiet-texticon-border-color:ButtonText;--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-border-color-error-key-focus:Highlight;--spectrum-picker-m-texticon-placeholder-text-color-disabled:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-down:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-hover:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color:GrayText;--spectrum-picker-m-texticon-text-color-disabled:GrayText;--spectrum-picker-m-texticon-text-color-key-focus:ButtonText;--spectrum-picker-m-texticon-text-color:ButtonText;--spectrum-picker-m-textonly-focusring-border-color-key-focus:Highlight;--spectrum-picker-quiet-border-color-key-focus:Highlight}#button.focus-visible{outline:2px solid Highlight}#button:focus-visible{outline:2px solid Highlight}#button:disabled,:host([disabled]) #button{border-color:GrayText;border-width:var(--spectrum-picker-texticon-border-size)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}}:host{display:inline-flex;max-width:100%;min-width:var(--spectrum-picker-min-width);vertical-align:top;width:var(--spectrum-picker-width)}:host([quiet]){min-width:0;width:auto}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{max-width:100%;min-width:100%;width:100%}#icon:not([hidden]){display:inline-flex}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}sp-popover{display:none}.picker,.validation-icon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(
|
|
299
299
|
--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)
|
|
300
300
|
)}:host([focused]:not([quiet])) #button .picker{color:var(
|
|
301
301
|
--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["picker.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);overflow:visible;position:relative;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(\n--spectrum-picker-textonly-padding-left-adjusted\n);padding-right:var(--spectrum-picker-textonly-padding-right-adjusted)}:host([dir=rtl]) #button{padding-left:var(--spectrum-picker-textonly-padding-right-adjusted);padding-right:var(\n--spectrum-picker-textonly-padding-left-adjusted\n)}#button{align-items:center;border-radius:var(--spectrum-picker-texticon-border-radius);border-style:solid;border-width:var(--spectrum-picker-texticon-border-size);display:flex;height:var(--spectrum-picker-texticon-height);justify-content:center;margin:0;min-width:var(--spectrum-picker-texticon-min-width);padding-bottom:0;padding-top:0;transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);width:var(--spectrum-picker-texticon-width)}#button:disabled,:host([disabled]) #button{border-width:var(\n--spectrum-picker-texticon-disabled-border-size\n);cursor:default}:host([dir=ltr]) #button .icon{margin-right:var(\n--spectrum-picker-texticon-icon-gap\n)}:host([dir=rtl]) #button .icon{margin-left:var(\n--spectrum-picker-texticon-icon-gap\n)}.icon{flex-shrink:0}:host([dir=ltr]) #button #label+.icon{margin-left:calc((var(--spectrum-picker-textonly-padding-left-adjusted) - var(--spectrum-picker-padding-left-adjusted))*-1)}:host([dir=rtl]) #button #label+.icon{margin-right:calc((var(--spectrum-picker-textonly-padding-left-adjusted) - var(--spectrum-picker-padding-left-adjusted))*-1)}:host([size=s]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-s-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-s-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-s-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-s-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-s-texticon-popover-max-width,var(--spectrum-global-dimension-size-1800)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-s-texticon-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-s-texticon-min-width,var(--spectrum-global-dimension-size-450)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-s-texticon-width,var(--spectrum-global-dimension-size-2000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-s-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-s-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-s-textonly-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-s-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=m]){--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-m-texticon-padding-left\n);--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-m-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-m-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-m-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-m-texticon-popover-max-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-m-texticon-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-m-texticon-min-width,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-m-texticon-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-m-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-m-textonly-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-m-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=l]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-l-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-l-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-l-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-l-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-l-texticon-popover-max-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-l-texticon-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-l-texticon-min-width,var(--spectrum-global-dimension-size-750)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-l-texticon-width,var(--spectrum-global-dimension-size-2500)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-l-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-l-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-l-textonly-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-l-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=xl]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-xl-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-xl-texticon-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-xl-texticon-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-xl-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-xl-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-xl-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-xl-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-xl-texticon-popover-max-width,var(--spectrum-global-dimension-size-3600)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-xl-texticon-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-xl-texticon-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-xl-texticon-min-width,var(--spectrum-global-dimension-size-900)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-xl-texticon-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-xl-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-xl-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-xl-textonly-padding-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-xl-textonly-padding-right,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-xl-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host{--spectrum-picker-texticon-min-width:var(\n--spectrum-global-dimension-size-400\n);--spectrum-picker-texticon-disabled-border-size:0;--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-global-dimension-size-3000\n);--spectrum-picker-texticon-width:var(\n--spectrum-global-dimension-size-2400\n);--spectrum-picker-texticon-border-size-increase-focus:1px;--spectrum-picker-padding-left-adjusted:calc(var(--spectrum-picker-texticon-padding-left) - var(--spectrum-picker-texticon-border-size));--spectrum-picker-textonly-padding-left-adjusted:calc(var(--spectrum-picker-textonly-padding-left) - var(--spectrum-picker-textonly-border-size));--spectrum-picker-textonly-padding-right-adjusted:calc(var(--spectrum-picker-textonly-padding-right) - var(--spectrum-picker-textonly-border-size));--spectrum-picker-focus-ring-border-radius-adjusted:calc(var(--spectrum-picker-textonly-border-radius) + var(--spectrum-picker-focus-ring-gap))}:host{--spectrum-picker-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-picker-focus-ring-size:var(\n--spectrum-alias-component-focusring-size,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-picker-focus-ring-color:var(\n--spectrum-picker-m-textonly-focusring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}#button{transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button:after{border-radius:var(--spectrum-picker-focus-ring-border-radius-adjusted);bottom:0;content:\"\";left:0;margin:calc((var(--spectrum-picker-focus-ring-gap) + var(--spectrum-picker-textonly-border-size))*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button.focus-visible{box-shadow:none}#button:focus-visible{box-shadow:none}#button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-picker-focus-ring-size) var(--spectrum-picker-focus-ring-color)}#button:focus-visible:after{box-shadow:0 0 0 var(--spectrum-picker-focus-ring-size) var(--spectrum-picker-focus-ring-color)}:host([quiet]){--spectrum-picker-texticon-border-size:0;--spectrum-picker-texticon-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0;--spectrum-picker-quiet-background-color-key-focus:transparent;--spectrum-picker-quiet-border-color-key-focus:var(\n--spectrum-global-color-blue-400\n)}:host([quiet]) #button{min-width:0;width:auto}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{box-shadow:none}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;font-size:var(--spectrum-picker-texticon-text-size);height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);line-height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{font-style:var(--spectrum-picker-texticon-placeholder-font-style);font-weight:var(\n--spectrum-picker-texticon-placeholder-font-weight\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;flex-shrink:0;position:relative;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;vertical-align:top}:host([dir=ltr]) .validation-icon{margin-left:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=rtl]) .validation-icon{margin-right:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=ltr]) #label~.picker{margin-left:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}:host([dir=rtl]) #label~.picker{margin-right:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}#popover{max-width:var(\n--spectrum-picker-texticon-popover-max-width\n)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}#button{background-color:var(\n--spectrum-picker-m-texticon-background-color,var(--spectrum-alias-component-background-color-default)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color,var(--spectrum-alias-component-border-color-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:hover{background-color:var(\n--spectrum-picker-m-texticon-background-color-hover,var(--spectrum-alias-component-background-color-hover)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-hover,var(--spectrum-alias-component-border-color-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}#button:hover .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)\n)}#button:active,:host([open]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-down,var(--spectrum-alias-component-background-color-down)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-component-border-color-down)\n)}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down)\n)}#button.focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button:focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([invalid]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n)}:host([invalid]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-validation-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) #button:hover{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n)}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#button:disabled,:host([disabled]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon,:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)\n)}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}.picker{color:var(\n--spectrum-picker-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)\n)}#label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color,var(--spectrum-alias-placeholder-text-color)\n)}#label.placeholder:hover{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)\n)}#label.placeholder:active{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color-down)\n)}:host([quiet]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color,var(--spectrum-alias-component-background-color-quiet-default)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color,var(--spectrum-alias-component-border-color-quiet-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}:host([quiet]) #button:hover{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-hover,var(--spectrum-alias-component-background-color-quiet-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button.focus-visible:after,:host([quiet][focused]) #button:after{box-shadow:none}:host([quiet]) #button:focus-visible:after,:host([quiet][focused]) #button:after{box-shadow:none}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-down,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color-down,var(--spectrum-alias-component-border-color-quiet-down)\n)}:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-quiet-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}@media (forced-colors:active){#button{--spectrum-picker-focus-ring-color:Highlight;--spectrum-picker-m-quiet-texticon-border-color-down:ButtonText;--spectrum-picker-m-quiet-texticon-border-color:ButtonText;--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-border-color-error-key-focus:Highlight;--spectrum-picker-m-texticon-placeholder-text-color-disabled:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-down:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-hover:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color:GrayText;--spectrum-picker-m-texticon-text-color-disabled:GrayText;--spectrum-picker-m-texticon-text-color-key-focus:ButtonText;--spectrum-picker-m-texticon-text-color:ButtonText;--spectrum-picker-m-textonly-focusring-border-color-key-focus:Highlight;--spectrum-picker-quiet-border-color-key-focus:Highlight}#button.focus-visible{outline:2px solid Highlight}#button:focus-visible{outline:2px solid Highlight}#button:disabled,:host([disabled]) #button{border-color:GrayText;border-width:var(--spectrum-picker-texticon-border-size)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}}:host{display:inline-flex;max-width:100%;min-width:var(--spectrum-picker-min-width);vertical-align:top;width:var(--spectrum-picker-width)}:host([quiet]){min-width:0;width:auto}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{max-width:100%;min-width:100%;width:100%}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}sp-popover{display:none}.picker,.validation-icon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(\n--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([focused]:not([quiet])) #button .picker{color:var(\n--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}.visually-hidden{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([dir=ltr]) #label.visually-hidden+.picker{margin-left:auto}:host([dir=rtl]) #label.visually-hidden+.picker{margin-right:auto}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);overflow:visible;position:relative;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(\n--spectrum-picker-textonly-padding-left-adjusted\n);padding-right:var(--spectrum-picker-textonly-padding-right-adjusted)}:host([dir=rtl]) #button{padding-left:var(--spectrum-picker-textonly-padding-right-adjusted);padding-right:var(\n--spectrum-picker-textonly-padding-left-adjusted\n)}#button{align-items:center;border-radius:var(--spectrum-picker-texticon-border-radius);border-style:solid;border-width:var(--spectrum-picker-texticon-border-size);display:flex;height:var(--spectrum-picker-texticon-height);justify-content:center;margin:0;min-width:var(--spectrum-picker-texticon-min-width);padding-bottom:0;padding-top:0;transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);width:var(--spectrum-picker-texticon-width)}#button:disabled,:host([disabled]) #button{border-width:var(\n--spectrum-picker-texticon-disabled-border-size\n);cursor:default}:host([dir=ltr]) #button .icon{margin-right:var(\n--spectrum-picker-texticon-icon-gap\n)}:host([dir=rtl]) #button .icon{margin-left:var(\n--spectrum-picker-texticon-icon-gap\n)}.icon{flex-shrink:0}:host([dir=ltr]) #button #label+.icon{margin-left:calc((var(--spectrum-picker-textonly-padding-left-adjusted) - var(--spectrum-picker-padding-left-adjusted))*-1)}:host([dir=rtl]) #button #label+.icon{margin-right:calc((var(--spectrum-picker-textonly-padding-left-adjusted) - var(--spectrum-picker-padding-left-adjusted))*-1)}:host([size=s]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-s-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-s-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-s-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-s-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-s-texticon-popover-max-width,var(--spectrum-global-dimension-size-1800)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-s-texticon-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-s-texticon-min-width,var(--spectrum-global-dimension-size-450)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-s-texticon-width,var(--spectrum-global-dimension-size-2000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-s-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-s-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-s-textonly-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-s-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=m]){--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-m-texticon-padding-left\n);--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-m-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-m-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-m-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-m-texticon-popover-max-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-m-texticon-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-m-texticon-min-width,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-m-texticon-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-m-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-m-textonly-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-m-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=l]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-l-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-l-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-l-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-l-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-l-texticon-popover-max-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-l-texticon-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-l-texticon-min-width,var(--spectrum-global-dimension-size-750)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-l-texticon-width,var(--spectrum-global-dimension-size-2500)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-l-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-l-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-l-textonly-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-l-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=xl]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-xl-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-xl-texticon-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-xl-texticon-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-xl-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-xl-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-xl-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-xl-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-xl-texticon-popover-max-width,var(--spectrum-global-dimension-size-3600)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-xl-texticon-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-xl-texticon-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-xl-texticon-min-width,var(--spectrum-global-dimension-size-900)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-xl-texticon-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-xl-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-xl-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-xl-textonly-padding-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-xl-textonly-padding-right,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-xl-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host{--spectrum-picker-texticon-min-width:var(\n--spectrum-global-dimension-size-400\n);--spectrum-picker-texticon-disabled-border-size:0;--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-global-dimension-size-3000\n);--spectrum-picker-texticon-width:var(\n--spectrum-global-dimension-size-2400\n);--spectrum-picker-texticon-border-size-increase-focus:1px;--spectrum-picker-padding-left-adjusted:calc(var(--spectrum-picker-texticon-padding-left) - var(--spectrum-picker-texticon-border-size));--spectrum-picker-textonly-padding-left-adjusted:calc(var(--spectrum-picker-textonly-padding-left) - var(--spectrum-picker-textonly-border-size));--spectrum-picker-textonly-padding-right-adjusted:calc(var(--spectrum-picker-textonly-padding-right) - var(--spectrum-picker-textonly-border-size));--spectrum-picker-focus-ring-border-radius-adjusted:calc(var(--spectrum-picker-textonly-border-radius) + var(--spectrum-picker-focus-ring-gap))}:host{--spectrum-picker-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-picker-focus-ring-size:var(\n--spectrum-alias-component-focusring-size,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-picker-focus-ring-color:var(\n--spectrum-picker-m-textonly-focusring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}#button{transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button:after{border-radius:var(--spectrum-picker-focus-ring-border-radius-adjusted);bottom:0;content:\"\";left:0;margin:calc((var(--spectrum-picker-focus-ring-gap) + var(--spectrum-picker-textonly-border-size))*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button.focus-visible{box-shadow:none}#button:focus-visible{box-shadow:none}#button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-picker-focus-ring-size) var(--spectrum-picker-focus-ring-color)}#button:focus-visible:after{box-shadow:0 0 0 var(--spectrum-picker-focus-ring-size) var(--spectrum-picker-focus-ring-color)}:host([quiet]){--spectrum-picker-texticon-border-size:0;--spectrum-picker-texticon-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0;--spectrum-picker-quiet-background-color-key-focus:transparent;--spectrum-picker-quiet-border-color-key-focus:var(\n--spectrum-global-color-blue-400\n)}:host([quiet]) #button{min-width:0;width:auto}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{box-shadow:none}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;font-size:var(--spectrum-picker-texticon-text-size);height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);line-height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{font-style:var(--spectrum-picker-texticon-placeholder-font-style);font-weight:var(\n--spectrum-picker-texticon-placeholder-font-weight\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;flex-shrink:0;position:relative;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;vertical-align:top}:host([dir=ltr]) .validation-icon{margin-left:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=rtl]) .validation-icon{margin-right:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=ltr]) #label~.picker{margin-left:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}:host([dir=rtl]) #label~.picker{margin-right:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}#popover{max-width:var(\n--spectrum-picker-texticon-popover-max-width\n)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}#button{background-color:var(\n--spectrum-picker-m-texticon-background-color,var(--spectrum-alias-component-background-color-default)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color,var(--spectrum-alias-component-border-color-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:hover{background-color:var(\n--spectrum-picker-m-texticon-background-color-hover,var(--spectrum-alias-component-background-color-hover)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-hover,var(--spectrum-alias-component-border-color-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}#button:hover .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)\n)}#button:active,:host([open]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-down,var(--spectrum-alias-component-background-color-down)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-component-border-color-down)\n)}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down)\n)}#button.focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button:focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([invalid]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n)}:host([invalid]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-validation-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) #button:hover{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n)}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#button:disabled,:host([disabled]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon,:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)\n)}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}.picker{color:var(\n--spectrum-picker-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)\n)}#label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color,var(--spectrum-alias-placeholder-text-color)\n)}#label.placeholder:hover{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)\n)}#label.placeholder:active{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color-down)\n)}:host([quiet]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color,var(--spectrum-alias-component-background-color-quiet-default)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color,var(--spectrum-alias-component-border-color-quiet-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}:host([quiet]) #button:hover{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-hover,var(--spectrum-alias-component-background-color-quiet-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button.focus-visible:after,:host([quiet][focused]) #button:after{box-shadow:none}:host([quiet]) #button:focus-visible:after,:host([quiet][focused]) #button:after{box-shadow:none}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-down,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color-down,var(--spectrum-alias-component-border-color-quiet-down)\n)}:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-quiet-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}@media (forced-colors:active){#button{--spectrum-picker-focus-ring-color:Highlight;--spectrum-picker-m-quiet-texticon-border-color-down:ButtonText;--spectrum-picker-m-quiet-texticon-border-color:ButtonText;--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-border-color-error-key-focus:Highlight;--spectrum-picker-m-texticon-placeholder-text-color-disabled:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-down:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-hover:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color:GrayText;--spectrum-picker-m-texticon-text-color-disabled:GrayText;--spectrum-picker-m-texticon-text-color-key-focus:ButtonText;--spectrum-picker-m-texticon-text-color:ButtonText;--spectrum-picker-m-textonly-focusring-border-color-key-focus:Highlight;--spectrum-picker-quiet-border-color-key-focus:Highlight}#button.focus-visible{outline:2px solid Highlight}#button:focus-visible{outline:2px solid Highlight}#button:disabled,:host([disabled]) #button{border-color:GrayText;border-width:var(--spectrum-picker-texticon-border-size)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}}:host{display:inline-flex;max-width:100%;min-width:var(--spectrum-picker-min-width);vertical-align:top;width:var(--spectrum-picker-width)}:host([quiet]){min-width:0;width:auto}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{max-width:100%;min-width:100%;width:100%}#icon:not([hidden]){display:inline-flex}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}sp-popover{display:none}.picker,.validation-icon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(\n--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([focused]:not([quiet])) #button .picker{color:var(\n--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}.visually-hidden{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([dir=ltr]) #label.visually-hidden+.picker{margin-left:auto}:host([dir=rtl]) #label.visually-hidden+.picker{margin-right:auto}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6Sf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/picker.css.js
CHANGED
|
@@ -293,7 +293,7 @@ var(--spectrum-alias-border-size-thin)
|
|
|
293
293
|
--spectrum-picker-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-quiet-disabled)
|
|
294
294
|
);color:var(
|
|
295
295
|
--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)
|
|
296
|
-
)}@media (forced-colors:active){#button{--spectrum-picker-focus-ring-color:Highlight;--spectrum-picker-m-quiet-texticon-border-color-down:ButtonText;--spectrum-picker-m-quiet-texticon-border-color:ButtonText;--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-border-color-error-key-focus:Highlight;--spectrum-picker-m-texticon-placeholder-text-color-disabled:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-down:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-hover:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color:GrayText;--spectrum-picker-m-texticon-text-color-disabled:GrayText;--spectrum-picker-m-texticon-text-color-key-focus:ButtonText;--spectrum-picker-m-texticon-text-color:ButtonText;--spectrum-picker-m-textonly-focusring-border-color-key-focus:Highlight;--spectrum-picker-quiet-border-color-key-focus:Highlight}#button.focus-visible{outline:2px solid Highlight}#button:focus-visible{outline:2px solid Highlight}#button:disabled,:host([disabled]) #button{border-color:GrayText;border-width:var(--spectrum-picker-texticon-border-size)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}}:host{display:inline-flex;max-width:100%;min-width:var(--spectrum-picker-min-width);vertical-align:top;width:var(--spectrum-picker-width)}:host([quiet]){min-width:0;width:auto}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{max-width:100%;min-width:100%;width:100%}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}sp-popover{display:none}.picker,.validation-icon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(
|
|
296
|
+
)}@media (forced-colors:active){#button{--spectrum-picker-focus-ring-color:Highlight;--spectrum-picker-m-quiet-texticon-border-color-down:ButtonText;--spectrum-picker-m-quiet-texticon-border-color:ButtonText;--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-border-color-error-key-focus:Highlight;--spectrum-picker-m-texticon-placeholder-text-color-disabled:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-down:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-hover:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color:GrayText;--spectrum-picker-m-texticon-text-color-disabled:GrayText;--spectrum-picker-m-texticon-text-color-key-focus:ButtonText;--spectrum-picker-m-texticon-text-color:ButtonText;--spectrum-picker-m-textonly-focusring-border-color-key-focus:Highlight;--spectrum-picker-quiet-border-color-key-focus:Highlight}#button.focus-visible{outline:2px solid Highlight}#button:focus-visible{outline:2px solid Highlight}#button:disabled,:host([disabled]) #button{border-color:GrayText;border-width:var(--spectrum-picker-texticon-border-size)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}}:host{display:inline-flex;max-width:100%;min-width:var(--spectrum-picker-min-width);vertical-align:top;width:var(--spectrum-picker-width)}:host([quiet]){min-width:0;width:auto}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{max-width:100%;min-width:100%;width:100%}#icon:not([hidden]){display:inline-flex}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}sp-popover{display:none}.picker,.validation-icon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(
|
|
297
297
|
--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)
|
|
298
298
|
)}:host([focused]:not([quiet])) #button .picker{color:var(
|
|
299
299
|
--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)
|
package/src/picker.css.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["picker.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);overflow:visible;position:relative;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(\n--spectrum-picker-textonly-padding-left-adjusted\n);padding-right:var(--spectrum-picker-textonly-padding-right-adjusted)}:host([dir=rtl]) #button{padding-left:var(--spectrum-picker-textonly-padding-right-adjusted);padding-right:var(\n--spectrum-picker-textonly-padding-left-adjusted\n)}#button{align-items:center;border-radius:var(--spectrum-picker-texticon-border-radius);border-style:solid;border-width:var(--spectrum-picker-texticon-border-size);display:flex;height:var(--spectrum-picker-texticon-height);justify-content:center;margin:0;min-width:var(--spectrum-picker-texticon-min-width);padding-bottom:0;padding-top:0;transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);width:var(--spectrum-picker-texticon-width)}#button:disabled,:host([disabled]) #button{border-width:var(\n--spectrum-picker-texticon-disabled-border-size\n);cursor:default}:host([dir=ltr]) #button .icon{margin-right:var(\n--spectrum-picker-texticon-icon-gap\n)}:host([dir=rtl]) #button .icon{margin-left:var(\n--spectrum-picker-texticon-icon-gap\n)}.icon{flex-shrink:0}:host([dir=ltr]) #button #label+.icon{margin-left:calc((var(--spectrum-picker-textonly-padding-left-adjusted) - var(--spectrum-picker-padding-left-adjusted))*-1)}:host([dir=rtl]) #button #label+.icon{margin-right:calc((var(--spectrum-picker-textonly-padding-left-adjusted) - var(--spectrum-picker-padding-left-adjusted))*-1)}:host([size=s]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-s-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-s-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-s-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-s-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-s-texticon-popover-max-width,var(--spectrum-global-dimension-size-1800)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-s-texticon-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-s-texticon-min-width,var(--spectrum-global-dimension-size-450)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-s-texticon-width,var(--spectrum-global-dimension-size-2000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-s-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-s-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-s-textonly-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-s-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=m]){--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-m-texticon-padding-left\n);--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-m-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-m-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-m-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-m-texticon-popover-max-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-m-texticon-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-m-texticon-min-width,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-m-texticon-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-m-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-m-textonly-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-m-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=l]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-l-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-l-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-l-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-l-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-l-texticon-popover-max-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-l-texticon-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-l-texticon-min-width,var(--spectrum-global-dimension-size-750)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-l-texticon-width,var(--spectrum-global-dimension-size-2500)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-l-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-l-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-l-textonly-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-l-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=xl]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-xl-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-xl-texticon-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-xl-texticon-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-xl-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-xl-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-xl-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-xl-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-xl-texticon-popover-max-width,var(--spectrum-global-dimension-size-3600)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-xl-texticon-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-xl-texticon-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-xl-texticon-min-width,var(--spectrum-global-dimension-size-900)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-xl-texticon-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-xl-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-xl-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-xl-textonly-padding-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-xl-textonly-padding-right,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-xl-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host{--spectrum-picker-texticon-min-width:var(\n--spectrum-global-dimension-size-400\n);--spectrum-picker-texticon-disabled-border-size:0;--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-global-dimension-size-3000\n);--spectrum-picker-texticon-width:var(\n--spectrum-global-dimension-size-2400\n);--spectrum-picker-texticon-border-size-increase-focus:1px;--spectrum-picker-padding-left-adjusted:calc(var(--spectrum-picker-texticon-padding-left) - var(--spectrum-picker-texticon-border-size));--spectrum-picker-textonly-padding-left-adjusted:calc(var(--spectrum-picker-textonly-padding-left) - var(--spectrum-picker-textonly-border-size));--spectrum-picker-textonly-padding-right-adjusted:calc(var(--spectrum-picker-textonly-padding-right) - var(--spectrum-picker-textonly-border-size));--spectrum-picker-focus-ring-border-radius-adjusted:calc(var(--spectrum-picker-textonly-border-radius) + var(--spectrum-picker-focus-ring-gap))}:host{--spectrum-picker-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-picker-focus-ring-size:var(\n--spectrum-alias-component-focusring-size,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-picker-focus-ring-color:var(\n--spectrum-picker-m-textonly-focusring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}#button{transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button:after{border-radius:var(--spectrum-picker-focus-ring-border-radius-adjusted);bottom:0;content:\"\";left:0;margin:calc((var(--spectrum-picker-focus-ring-gap) + var(--spectrum-picker-textonly-border-size))*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button.focus-visible{box-shadow:none}#button:focus-visible{box-shadow:none}#button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-picker-focus-ring-size) var(--spectrum-picker-focus-ring-color)}#button:focus-visible:after{box-shadow:0 0 0 var(--spectrum-picker-focus-ring-size) var(--spectrum-picker-focus-ring-color)}:host([quiet]){--spectrum-picker-texticon-border-size:0;--spectrum-picker-texticon-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0;--spectrum-picker-quiet-background-color-key-focus:transparent;--spectrum-picker-quiet-border-color-key-focus:var(\n--spectrum-global-color-blue-400\n)}:host([quiet]) #button{min-width:0;width:auto}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{box-shadow:none}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;font-size:var(--spectrum-picker-texticon-text-size);height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);line-height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{font-style:var(--spectrum-picker-texticon-placeholder-font-style);font-weight:var(\n--spectrum-picker-texticon-placeholder-font-weight\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;flex-shrink:0;position:relative;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;vertical-align:top}:host([dir=ltr]) .validation-icon{margin-left:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=rtl]) .validation-icon{margin-right:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=ltr]) #label~.picker{margin-left:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}:host([dir=rtl]) #label~.picker{margin-right:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}#popover{max-width:var(\n--spectrum-picker-texticon-popover-max-width\n)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}#button{background-color:var(\n--spectrum-picker-m-texticon-background-color,var(--spectrum-alias-component-background-color-default)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color,var(--spectrum-alias-component-border-color-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:hover{background-color:var(\n--spectrum-picker-m-texticon-background-color-hover,var(--spectrum-alias-component-background-color-hover)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-hover,var(--spectrum-alias-component-border-color-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}#button:hover .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)\n)}#button:active,:host([open]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-down,var(--spectrum-alias-component-background-color-down)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-component-border-color-down)\n)}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down)\n)}#button.focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button:focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([invalid]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n)}:host([invalid]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-validation-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) #button:hover{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n)}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#button:disabled,:host([disabled]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon,:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)\n)}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}.picker{color:var(\n--spectrum-picker-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)\n)}#label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color,var(--spectrum-alias-placeholder-text-color)\n)}#label.placeholder:hover{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)\n)}#label.placeholder:active{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color-down)\n)}:host([quiet]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color,var(--spectrum-alias-component-background-color-quiet-default)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color,var(--spectrum-alias-component-border-color-quiet-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}:host([quiet]) #button:hover{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-hover,var(--spectrum-alias-component-background-color-quiet-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button.focus-visible:after,:host([quiet][focused]) #button:after{box-shadow:none}:host([quiet]) #button:focus-visible:after,:host([quiet][focused]) #button:after{box-shadow:none}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-down,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color-down,var(--spectrum-alias-component-border-color-quiet-down)\n)}:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-quiet-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}@media (forced-colors:active){#button{--spectrum-picker-focus-ring-color:Highlight;--spectrum-picker-m-quiet-texticon-border-color-down:ButtonText;--spectrum-picker-m-quiet-texticon-border-color:ButtonText;--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-border-color-error-key-focus:Highlight;--spectrum-picker-m-texticon-placeholder-text-color-disabled:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-down:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-hover:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color:GrayText;--spectrum-picker-m-texticon-text-color-disabled:GrayText;--spectrum-picker-m-texticon-text-color-key-focus:ButtonText;--spectrum-picker-m-texticon-text-color:ButtonText;--spectrum-picker-m-textonly-focusring-border-color-key-focus:Highlight;--spectrum-picker-quiet-border-color-key-focus:Highlight}#button.focus-visible{outline:2px solid Highlight}#button:focus-visible{outline:2px solid Highlight}#button:disabled,:host([disabled]) #button{border-color:GrayText;border-width:var(--spectrum-picker-texticon-border-size)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}}:host{display:inline-flex;max-width:100%;min-width:var(--spectrum-picker-min-width);vertical-align:top;width:var(--spectrum-picker-width)}:host([quiet]){min-width:0;width:auto}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{max-width:100%;min-width:100%;width:100%}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}sp-popover{display:none}.picker,.validation-icon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(\n--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([focused]:not([quiet])) #button .picker{color:var(\n--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}.visually-hidden{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([dir=ltr]) #label.visually-hidden+.picker{margin-left:auto}:host([dir=rtl]) #label.visually-hidden+.picker{margin-right:auto}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n#button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);overflow:visible;position:relative;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}#button:disabled{cursor:default}:host([dir=ltr]) #button{padding-left:var(\n--spectrum-picker-textonly-padding-left-adjusted\n);padding-right:var(--spectrum-picker-textonly-padding-right-adjusted)}:host([dir=rtl]) #button{padding-left:var(--spectrum-picker-textonly-padding-right-adjusted);padding-right:var(\n--spectrum-picker-textonly-padding-left-adjusted\n)}#button{align-items:center;border-radius:var(--spectrum-picker-texticon-border-radius);border-style:solid;border-width:var(--spectrum-picker-texticon-border-size);display:flex;height:var(--spectrum-picker-texticon-height);justify-content:center;margin:0;min-width:var(--spectrum-picker-texticon-min-width);padding-bottom:0;padding-top:0;transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);width:var(--spectrum-picker-texticon-width)}#button:disabled,:host([disabled]) #button{border-width:var(\n--spectrum-picker-texticon-disabled-border-size\n);cursor:default}:host([dir=ltr]) #button .icon{margin-right:var(\n--spectrum-picker-texticon-icon-gap\n)}:host([dir=rtl]) #button .icon{margin-left:var(\n--spectrum-picker-texticon-icon-gap\n)}.icon{flex-shrink:0}:host([dir=ltr]) #button #label+.icon{margin-left:calc((var(--spectrum-picker-textonly-padding-left-adjusted) - var(--spectrum-picker-padding-left-adjusted))*-1)}:host([dir=rtl]) #button #label+.icon{margin-right:calc((var(--spectrum-picker-textonly-padding-left-adjusted) - var(--spectrum-picker-padding-left-adjusted))*-1)}:host([size=s]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-s-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-s-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-s-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-s-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-s-texticon-popover-max-width,var(--spectrum-global-dimension-size-1800)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-s-texticon-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-s-texticon-min-width,var(--spectrum-global-dimension-size-450)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-s-texticon-width,var(--spectrum-global-dimension-size-2000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-s-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-s-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-s-textonly-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-s-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=m]){--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-m-texticon-padding-left\n);--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-m-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-m-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-m-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-m-texticon-popover-max-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-m-texticon-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-m-texticon-min-width,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-m-texticon-width,var(--spectrum-global-dimension-size-2400)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-m-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-m-textonly-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-m-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=l]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-l-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-l-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-l-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-l-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-l-texticon-popover-max-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-l-texticon-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-l-texticon-min-width,var(--spectrum-global-dimension-size-750)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-l-texticon-width,var(--spectrum-global-dimension-size-2500)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-l-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-l-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-l-textonly-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-l-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([size=xl]){--spectrum-picker-texticon-border-size:var(\n--spectrum-picker-xl-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-texticon-text-size:var(\n--spectrum-picker-xl-texticon-text-size,var(--spectrum-global-dimension-font-size-300)\n);--spectrum-picker-texticon-icon-gap:var(\n--spectrum-picker-xl-texticon-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-placeholder-font-style:var(\n--spectrum-picker-xl-texticon-placeholder-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-picker-texticon-placeholder-font-weight:var(\n--spectrum-picker-xl-texticon-placeholder-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-picker-texticon-error-icon-margin-left:var(\n--spectrum-picker-xl-texticon-error-icon-margin-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-texticon-ui-icon-gap:var(\n--spectrum-picker-xl-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-picker-xl-texticon-popover-max-width,var(--spectrum-global-dimension-size-3600)\n);--spectrum-picker-texticon-padding-left:var(\n--spectrum-picker-xl-texticon-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-picker-texticon-height:var(\n--spectrum-picker-xl-texticon-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-picker-texticon-min-width:var(\n--spectrum-picker-xl-texticon-min-width,var(--spectrum-global-dimension-size-900)\n);--spectrum-picker-texticon-width:var(\n--spectrum-picker-xl-texticon-width,var(--spectrum-global-dimension-size-3000)\n);--spectrum-picker-texticon-border-radius:var(\n--spectrum-picker-xl-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n);--spectrum-picker-textonly-border-size:var(\n--spectrum-picker-xl-textonly-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-picker-textonly-padding-left:var(\n--spectrum-picker-xl-textonly-padding-left,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-padding-right:var(\n--spectrum-picker-xl-textonly-padding-right,var(--spectrum-global-dimension-size-225)\n);--spectrum-picker-textonly-border-radius:var(\n--spectrum-picker-xl-textonly-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host{--spectrum-picker-texticon-min-width:var(\n--spectrum-global-dimension-size-400\n);--spectrum-picker-texticon-disabled-border-size:0;--spectrum-picker-texticon-popover-max-width:var(\n--spectrum-global-dimension-size-3000\n);--spectrum-picker-texticon-width:var(\n--spectrum-global-dimension-size-2400\n);--spectrum-picker-texticon-border-size-increase-focus:1px;--spectrum-picker-padding-left-adjusted:calc(var(--spectrum-picker-texticon-padding-left) - var(--spectrum-picker-texticon-border-size));--spectrum-picker-textonly-padding-left-adjusted:calc(var(--spectrum-picker-textonly-padding-left) - var(--spectrum-picker-textonly-border-size));--spectrum-picker-textonly-padding-right-adjusted:calc(var(--spectrum-picker-textonly-padding-right) - var(--spectrum-picker-textonly-border-size));--spectrum-picker-focus-ring-border-radius-adjusted:calc(var(--spectrum-picker-textonly-border-radius) + var(--spectrum-picker-focus-ring-gap))}:host{--spectrum-picker-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-picker-focus-ring-size:var(\n--spectrum-alias-component-focusring-size,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-picker-focus-ring-color:var(\n--spectrum-picker-m-textonly-focusring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}#button{transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button:after{border-radius:var(--spectrum-picker-focus-ring-border-radius-adjusted);bottom:0;content:\"\";left:0;margin:calc((var(--spectrum-picker-focus-ring-gap) + var(--spectrum-picker-textonly-border-size))*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button.focus-visible{box-shadow:none}#button:focus-visible{box-shadow:none}#button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-picker-focus-ring-size) var(--spectrum-picker-focus-ring-color)}#button:focus-visible:after{box-shadow:0 0 0 var(--spectrum-picker-focus-ring-size) var(--spectrum-picker-focus-ring-color)}:host([quiet]){--spectrum-picker-texticon-border-size:0;--spectrum-picker-texticon-border-radius:0;--spectrum-picker-textonly-padding-left:0;--spectrum-picker-textonly-padding-right:0;--spectrum-picker-quiet-background-color-key-focus:transparent;--spectrum-picker-quiet-border-color-key-focus:var(\n--spectrum-global-color-blue-400\n)}:host([quiet]) #button{min-width:0;width:auto}:host([quiet]) #button:disabled.focus-visible,:host([quiet][disabled]) #button.focus-visible{box-shadow:none}:host([quiet]) #button:disabled:focus-visible,:host([quiet][disabled]) #button:focus-visible{box-shadow:none}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}#label{flex:1 1 auto;font-size:var(--spectrum-picker-texticon-text-size);height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);line-height:calc(var(--spectrum-picker-texticon-height) - var(--spectrum-picker-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label.placeholder{font-style:var(--spectrum-picker-texticon-placeholder-font-style);font-weight:var(\n--spectrum-picker-texticon-placeholder-font-weight\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.picker{display:inline-block;flex-shrink:0;position:relative;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;vertical-align:top}:host([dir=ltr]) .validation-icon{margin-left:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=rtl]) .validation-icon{margin-right:var(\n--spectrum-picker-texticon-error-icon-margin-left\n)}:host([dir=ltr]) #label~.picker{margin-left:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}:host([dir=rtl]) #label~.picker{margin-right:var(\n--spectrum-picker-texticon-ui-icon-gap\n)}#popover{max-width:var(\n--spectrum-picker-texticon-popover-max-width\n)}:host([dir=ltr]) .spectrum-Picker-popover--quiet{margin-left:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}:host([dir=rtl]) .spectrum-Picker-popover--quiet{margin-right:calc((var(\n--spectrum-picker-m-quiet-texticon-popover-offset-x,\nvar(--spectrum-global-dimension-size-150)\n) + var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))*-1)}#button{background-color:var(\n--spectrum-picker-m-texticon-background-color,var(--spectrum-alias-component-background-color-default)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color,var(--spectrum-alias-component-border-color-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:hover{background-color:var(\n--spectrum-picker-m-texticon-background-color-hover,var(--spectrum-alias-component-background-color-hover)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-hover,var(--spectrum-alias-component-border-color-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}#button:hover .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)\n)}#button:active,:host([open]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-down,var(--spectrum-alias-component-background-color-down)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-down,var(--spectrum-alias-component-border-color-down)\n)}#button:active.placeholder #label,:host([open]) #button.placeholder #label{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down)\n)}#button.focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button:focus-visible,:host([focused]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-key-focus,var(--spectrum-alias-component-background-color-key-focus)\n);border-color:var(\n--spectrum-picker-m-texticon-border-color-key-focus,var(--spectrum-alias-component-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);color:var(\n--spectrum-picker-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}#button.focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}#button:focus-visible.placeholder,:host([focused]) #button.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([invalid]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n)}:host([invalid]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-validation-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) #button:hover{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n)}:host([invalid]) #button:active,:host([invalid][open]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([invalid]) #button.focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([invalid]) #button:focus-visible,:host([invalid][focused]) #button{border-color:var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#button:disabled,:host([disabled]) #button{background-color:var(\n--spectrum-picker-m-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon,:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon{color:var(\n--spectrum-picker-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)\n)}#button:disabled #label.placeholder,:host([disabled]) #button #label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}.picker{color:var(\n--spectrum-picker-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)\n)}#label.placeholder{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color,var(--spectrum-alias-placeholder-text-color)\n)}#label.placeholder:hover{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)\n)}#label.placeholder:active{color:var(\n--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus,var(--spectrum-alias-placeholder-text-color-down)\n)}:host([quiet]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color,var(--spectrum-alias-component-background-color-quiet-default)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color,var(--spectrum-alias-component-border-color-quiet-default)\n);color:var(\n--spectrum-picker-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}:host([quiet]) #button:hover{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-hover,var(--spectrum-alias-component-background-color-quiet-hover)\n);color:var(\n--spectrum-picker-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button.focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button:focus-visible.placeholder,:host([quiet][focused]) #button.placeholder{color:var(\n--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([quiet]) #button.focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button:focus-visible .picker,:host([quiet][focused]) #button .picker{color:var(\n--spectrum-picker-m-texticon-icon-color-key-focus,var(--spectrum-alias-component-icon-color-key-focus)\n)}:host([quiet]) #button.focus-visible:after,:host([quiet][focused]) #button:after{box-shadow:none}:host([quiet]) #button:focus-visible:after,:host([quiet][focused]) #button:after{box-shadow:none}:host([quiet]) #button:active,:host([quiet][open]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-down,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-picker-m-quiet-texticon-border-color-down,var(--spectrum-alias-component-border-color-quiet-down)\n)}:host([quiet]) #button:active.focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button.focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet]) #button:active:focus-visible,:host([quiet][focused]) #button:active,:host([quiet][open]) #button:focus-visible,:host([quiet][open][focused]) #button{background-color:var(\n--spectrum-picker-quiet-background-color-key-focus\n);box-shadow:0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus)}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet][invalid]) #button:focus-visible,:host([quiet][invalid][focused]) #button{box-shadow:0 2px 0 0 var(\n--spectrum-picker-m-texticon-border-color-error-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([quiet]) #button:disabled,:host([quiet][disabled]) #button{background-color:var(\n--spectrum-picker-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-component-background-color-quiet-disabled)\n);color:var(\n--spectrum-picker-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}@media (forced-colors:active){#button{--spectrum-picker-focus-ring-color:Highlight;--spectrum-picker-m-quiet-texticon-border-color-down:ButtonText;--spectrum-picker-m-quiet-texticon-border-color:ButtonText;--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-border-color-error-key-focus:Highlight;--spectrum-picker-m-texticon-placeholder-text-color-disabled:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-down:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-hover:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-key-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color-mouse-focus:GrayText;--spectrum-picker-m-texticon-placeholder-text-color:GrayText;--spectrum-picker-m-texticon-text-color-disabled:GrayText;--spectrum-picker-m-texticon-text-color-key-focus:ButtonText;--spectrum-picker-m-texticon-text-color:ButtonText;--spectrum-picker-m-textonly-focusring-border-color-key-focus:Highlight;--spectrum-picker-quiet-border-color-key-focus:Highlight}#button.focus-visible{outline:2px solid Highlight}#button:focus-visible{outline:2px solid Highlight}#button:disabled,:host([disabled]) #button{border-color:GrayText;border-width:var(--spectrum-picker-texticon-border-size)}:host([quiet]) #button.focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}:host([quiet]) #button:focus-visible,:host([quiet][focused]) #button{box-shadow:0 1px 0 0 var(--spectrum-picker-focus-ring-color);forced-color-adjust:none;outline:0}}:host{display:inline-flex;max-width:100%;min-width:var(--spectrum-picker-min-width);vertical-align:top;width:var(--spectrum-picker-width)}:host([quiet]){min-width:0;width:auto}:host([size]){--spectrum-picker-width:var(--spectrum-global-dimension-size-2400)}#button{max-width:100%;min-width:100%;width:100%}#icon:not([hidden]){display:inline-flex}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}sp-popover{display:none}.picker,.validation-icon{flex-shrink:0}:host([focused]:not([quiet])) #button #label.placeholder{color:var(\n--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host([focused]:not([quiet])) #button .picker{color:var(\n--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}.visually-hidden{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([dir=ltr]) #label.visually-hidden+.picker{margin-left:auto}:host([dir=rtl]) #label.visually-hidden+.picker{margin-right:auto}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6Sf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["picker-sizes.test-vrt.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 * as stories from '../stories/picker-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('PickerSizesStories', stories);\n"],
|
|
5
|
-
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;
|
|
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 * as stories from '../stories/picker-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('PickerSizesStories', stories as unknown as TestsType);\n"],
|
|
5
|
+
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,sBAAsB,OAA+B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["picker.test-vrt.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 * as stories from '../stories/picker.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('PickerStories', stories);\n"],
|
|
5
|
-
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;
|
|
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 * as stories from '../stories/picker.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('PickerStories', stories as unknown as TestsType);\n"],
|
|
5
|
+
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,iBAAiB,OAA+B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|