@spectrum-web-components/picker 1.1.0 → 1.1.1
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 +16 -16
- package/sp-picker.d.ts +6 -0
- package/sp-picker.dev.js +5 -0
- package/sp-picker.dev.js.map +7 -0
- package/sp-picker.js +2 -0
- package/sp-picker.js.map +7 -0
- package/src/DesktopController.d.ts +7 -0
- package/src/DesktopController.dev.js +72 -0
- package/src/DesktopController.dev.js.map +7 -0
- package/src/DesktopController.js +2 -0
- package/src/DesktopController.js.map +7 -0
- package/src/InteractionController.d.ts +44 -0
- package/src/InteractionController.dev.js +122 -0
- package/src/InteractionController.dev.js.map +7 -0
- package/src/InteractionController.js +2 -0
- package/src/InteractionController.js.map +7 -0
- package/src/MobileController.d.ts +8 -0
- package/src/MobileController.dev.js +51 -0
- package/src/MobileController.dev.js.map +7 -0
- package/src/MobileController.js +2 -0
- package/src/MobileController.js.map +7 -0
- package/src/Picker.d.ts +139 -0
- package/src/Picker.dev.js +717 -0
- package/src/Picker.dev.js.map +7 -0
- package/src/Picker.js +116 -0
- package/src/Picker.js.map +7 -0
- package/src/index.d.ts +1 -0
- package/src/index.dev.js +3 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +2 -0
- package/src/index.js.map +7 -0
- package/src/picker-overrides.css.d.ts +2 -0
- package/src/picker-overrides.css.dev.js +7 -0
- package/src/picker-overrides.css.dev.js.map +7 -0
- package/src/picker-overrides.css.js +4 -0
- package/src/picker-overrides.css.js.map +7 -0
- package/src/picker.css.d.ts +2 -0
- package/src/picker.css.dev.js +7 -0
- package/src/picker.css.dev.js.map +7 -0
- package/src/picker.css.js +4 -0
- package/src/picker.css.js.map +7 -0
- package/src/spectrum-picker.css.d.ts +2 -0
- package/src/spectrum-picker.css.dev.js +7 -0
- package/src/spectrum-picker.css.dev.js.map +7 -0
- package/src/spectrum-picker.css.js +4 -0
- package/src/spectrum-picker.css.js.map +7 -0
- package/src/strategies.d.ts +6 -0
- package/src/strategies.dev.js +8 -0
- package/src/strategies.dev.js.map +7 -0
- package/src/strategies.js +2 -0
- package/src/strategies.js.map +7 -0
- package/stories/args.js +56 -0
- package/stories/args.js.map +7 -0
- package/stories/picker-pending.stories.js +16 -0
- package/stories/picker-pending.stories.js.map +7 -0
- package/stories/picker-sizes.stories.js +75 -0
- package/stories/picker-sizes.stories.js.map +7 -0
- package/stories/picker.stories.js +664 -0
- package/stories/picker.stories.js.map +7 -0
- package/stories/states.js +228 -0
- package/stories/states.js.map +7 -0
- package/stories/template.js +32 -0
- package/stories/template.js.map +7 -0
- package/sync/index.d.ts +3 -0
- package/sync/index.dev.js +5 -0
- package/sync/index.dev.js.map +7 -0
- package/sync/index.js +2 -0
- package/sync/index.js.map +7 -0
- package/sync/sp-picker.d.ts +2 -0
- package/sync/sp-picker.dev.js +4 -0
- package/sync/sp-picker.dev.js.map +7 -0
- package/sync/sp-picker.js +2 -0
- package/sync/sp-picker.js.map +7 -0
- package/test/benchmark/basic-test.js +269 -0
- package/test/benchmark/basic-test.js.map +7 -0
- package/test/index.js +1680 -0
- package/test/index.js.map +7 -0
- package/test/picker-memory.test.js +5 -0
- package/test/picker-memory.test.js.map +7 -0
- package/test/picker-pending.test-vrt.js +5 -0
- package/test/picker-pending.test-vrt.js.map +7 -0
- package/test/picker-reparenting.test.js +92 -0
- package/test/picker-reparenting.test.js.map +7 -0
- package/test/picker-responsive.test.js +125 -0
- package/test/picker-responsive.test.js.map +7 -0
- package/test/picker-sizes.test-vrt.js +5 -0
- package/test/picker-sizes.test-vrt.js.map +7 -0
- package/test/picker-sync.test.js +7 -0
- package/test/picker-sync.test.js.map +7 -0
- package/test/picker.test-vrt.js +5 -0
- package/test/picker.test-vrt.js.map +7 -0
- package/test/picker.test.js +7 -0
- package/test/picker.test.js.map +7 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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 {\n classMap,\n ifDefined,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\nimport chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js';\n\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport type { Tooltip } from '@spectrum-web-components/tooltip';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n Menu,\n MenuItem,\n MenuItemChildren,\n} from '@spectrum-web-components/menu';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';\nimport { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';\nimport { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport type { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\nimport type { FieldLabel } from '@spectrum-web-components/field-label';\n\nimport { DesktopController } from './DesktopController.dev.js'\nimport { MobileController } from './MobileController.dev.js'\nimport { strategies } from './strategies.dev.js'\n\nconst chevronClass = {\n s: 'spectrum-UIIcon-ChevronDown75',\n m: 'spectrum-UIIcon-ChevronDown100',\n l: 'spectrum-UIIcon-ChevronDown200',\n xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport const DESCRIPTION_ID = 'option-picker';\nexport class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {\n public isMobile = new MatchMediaController(this, IS_MOBILE);\n\n public strategy!: DesktopController | MobileController;\n\n @state()\n appliedLabel?: string;\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n public dependencyManager = new DependencyManagerController(this);\n\n private deprecatedMenu: Menu | null = null;\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String, reflect: true })\n public icons?: 'only' | 'none';\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n /**\n * Forces the Picker to render as a popover on mobile instead of a tray.\n *\n * @memberof PickerBase\n */\n @property({ type: Boolean, reflect: true })\n public forcePopover = false;\n\n /** Whether the items are currently loading. */\n @property({ type: Boolean, reflect: true })\n public pending = false;\n\n /** Defines a string value that labels the Picker while it is in pending state. */\n @property({ type: String, attribute: 'pending-label' })\n public pendingLabel = 'Pending';\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 @state()\n public labelAlignment?: 'inline';\n\n protected get menuItems(): MenuItem[] {\n return this.optionsMenu.childItems;\n }\n\n @query('sp-menu')\n public optionsMenu!: Menu;\n\n private _selfManageFocusElement = false;\n\n public override get selfManageFocusElement(): boolean {\n return this._selfManageFocusElement;\n }\n\n @query('sp-overlay')\n public overlayElement!: Overlay;\n\n protected tooltipEl?: Tooltip;\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n\n @property()\n public placement: Placement = 'bottom-start';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public value = '';\n\n @property({ attribute: false })\n public get selectedItem(): MenuItem | undefined {\n return this._selectedItem;\n }\n\n public pendingStateController: PendingStateController<this>;\n\n /**\n * Initializes the `PendingStateController` for the Picker component.\n * The `PendingStateController` manages the pending state of the Picker.\n */\n constructor() {\n super();\n this.pendingStateController = new PendingStateController(this);\n }\n\n public set selectedItem(selectedItem: MenuItem | undefined) {\n this.selectedItemContent = selectedItem\n ? selectedItem.itemChildren\n : undefined;\n\n if (selectedItem === this.selectedItem) return;\n const oldSelectedItem = this.selectedItem;\n this._selectedItem = selectedItem;\n this.requestUpdate('selectedItem', oldSelectedItem);\n }\n\n _selectedItem?: MenuItem;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public override get focusElement(): HTMLElement {\n if (this.open) {\n return this.optionsMenu;\n }\n return this.button;\n }\n\n public forceFocusVisible(): void {\n if (this.disabled) {\n return;\n }\n\n this.focused = true;\n }\n\n public override click(): void {\n if (this.disabled) {\n return;\n }\n\n this.toggle();\n }\n\n public handleButtonBlur(): void {\n this.focused = false;\n }\n\n public override focus(options?: FocusOptions): void {\n super.focus(options);\n\n if (!this.disabled && this.focusElement) {\n this.focused = this.hasVisibleFocusInTree();\n }\n }\n\n public handleHelperFocus(): void {\n // set focused to true here instead of handleButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public handleChange(event: Event): void {\n if (this.strategy) {\n this.strategy.preventNextToggle = 'no';\n }\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n event.stopPropagation();\n if (event.cancelable) {\n this.setValueFromItem(selected, event);\n } else {\n // Non-cancelable \"change\" events announce a selection with no value\n // change that should close the Picker element.\n this.open = false;\n if (this.strategy) {\n this.strategy.open = false;\n }\n }\n }\n\n public handleButtonFocus(event: FocusEvent): void {\n this.strategy?.handleButtonFocus(event);\n }\n\n protected handleKeydown = (event: KeyboardEvent): void => {\n this.focused = true;\n if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n return;\n }\n event.stopPropagation();\n event.preventDefault();\n this.toggle(true);\n };\n\n protected async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n this.open = false;\n // should always close when \"setting\" a value\n if (this.strategy) {\n this.strategy.open = false;\n }\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n\n // Set a value.\n this.selectedItem = item;\n this.value = item?.value ?? '';\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n // Allow it to be prevented.\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault && this.selects) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem as MenuItem, false);\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, true);\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n if (this.strategy) {\n this.strategy.open = true;\n }\n return;\n } else if (!this.selects) {\n // Unset the value if not carrying a selection\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n return;\n }\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, false);\n }\n this.setMenuItemSelected(item, !!this.selects);\n }\n\n protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n // matches null | undefined\n if (this.selects == null) return;\n item.selected = value;\n }\n\n public toggle(target?: boolean): void {\n if (this.readonly || this.pending) {\n return;\n }\n this.open = typeof target !== 'undefined' ? target : !this.open;\n if (this.strategy) {\n this.strategy.open = this.open;\n }\n if (this.open) {\n this._selfManageFocusElement = true;\n } else {\n this._selfManageFocusElement = false;\n }\n }\n\n public close(): void {\n if (this.readonly) {\n return;\n }\n if (this.strategy) {\n this.open = false;\n this.strategy.open = false;\n }\n }\n\n protected get containerStyles(): StyleInfo {\n // @todo: test in mobile\n /* c8 ignore next 5 */\n if (this.isMobile.matches) {\n return {\n '--swc-menu-width': '100%',\n };\n }\n return {};\n }\n\n @state()\n protected get selectedItemContent(): MenuItemChildren {\n return this._selectedItemContent || { icon: [], content: [] };\n }\n\n protected set selectedItemContent(\n selectedItemContent: MenuItemChildren | undefined\n ) {\n if (selectedItemContent === this.selectedItemContent) return;\n\n const oldContent = this.selectedItemContent;\n this._selectedItemContent = selectedItemContent;\n this.requestUpdate('selectedItemContent', oldContent);\n }\n\n _selectedItemContent?: MenuItemChildren;\n\n protected handleTooltipSlotchange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.tooltipEl = event.target.assignedElements()[0] as\n | Tooltip\n | undefined;\n }\n\n public handleSlottableRequest = (_event: SlottableRequestEvent): void => {};\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\" id=\"label\">\n <span\n aria-hidden=${ifDefined(\n this.appliedLabel ? undefined : 'true'\n )}\n >\n ${this.label}\n </span>\n </slot>\n `;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const labelClasses = {\n 'visually-hidden': this.icons === 'only' && !!this.value,\n placeholder: !this.value,\n label: true,\n };\n const appliedLabel = this.appliedLabel || this.label;\n return [\n html`\n <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n ${this.selectedItemContent.icon}\n </span>\n <span\n id=${ifDefined(\n this.value && this.selectedItem ? 'label' : undefined\n )}\n class=${classMap(labelClasses)}\n >\n ${this.renderLabelContent(this.selectedItemContent.content)}\n </span>\n ${this.value && this.selectedItem\n ? html`\n <span\n aria-hidden=\"true\"\n class=\"visually-hidden\"\n id=\"applied-label\"\n >\n ${appliedLabel}\n <slot name=\"label\"></slot>\n </span>\n `\n : html`\n <span hidden id=\"applied-label\">${appliedLabel}</span>\n `}\n ${this.invalid && !this.pending\n ? html`\n <sp-icon-alert\n class=\"validation-icon\"\n ></sp-icon-alert>\n `\n : nothing}\n ${this.pendingStateController.renderPendingState()}\n <sp-icon-chevron100\n class=\"picker ${chevronClass[\n this.size as DefaultElementSize\n ]}\"\n ></sp-icon-chevron100>\n <slot\n aria-hidden=\"true\"\n name=\"tooltip\"\n id=\"tooltip\"\n @slotchange=${this.handleTooltipSlotchange}\n ></slot>\n `,\n ];\n }\n\n applyFocusElementLabel = (\n value: string,\n labelElement: FieldLabel\n ): void => {\n this.appliedLabel = value;\n this.labelAlignment = labelElement.sideAligned ? 'inline' : undefined;\n };\n\n protected renderOverlay(menu: TemplateResult): TemplateResult {\n if (this.strategy?.overlay === undefined) {\n return menu;\n }\n const container = this.renderContainer(menu);\n render(container, this.strategy?.overlay as unknown as HTMLElement, {\n host: this,\n });\n return this.strategy?.overlay as unknown as TemplateResult;\n }\n\n protected get renderDescriptionSlot(): TemplateResult {\n return html`\n <div id=${DESCRIPTION_ID}>\n <slot name=\"description\"></slot>\n </div>\n `;\n }\n // a helper to throw focus to the button is needed because Safari\n // won't include buttons in the tab order even with tabindex=\"0\"\n protected override render(): TemplateResult {\n if (this.tooltipEl) {\n this.tooltipEl.disabled = this.open;\n }\n return html`\n <span\n id=\"focus-helper\"\n tabindex=\"${this.focused || this.open ? '-1' : '0'}\"\n @focus=${this.handleHelperFocus}\n aria-describedby=${DESCRIPTION_ID}\n ></span>\n <button\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-describedby=\"tooltip\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"true\"\n aria-labelledby=\"loader icon label applied-label\"\n id=\"button\"\n class=${ifDefined(\n this.labelAlignment\n ? `label-${this.labelAlignment}`\n : undefined\n )}\n @blur=${this.handleButtonBlur}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n tabindex=\"-1\"\n >\n ${this.buttonContent}\n </button>\n ${this.renderMenu} ${this.renderDescriptionSlot}\n `;\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (this.selects) {\n /**\n * Always force `selects` to \"single\" when set.\n *\n * @todo: Add support functionally and visually for \"multiple\"\n */\n this.selects = 'single';\n }\n if (changes.has('disabled') && this.disabled) {\n if (this.strategy) {\n this.open = false;\n this.strategy.open = false;\n }\n }\n if (changes.has('pending') && this.pending) {\n if (this.strategy) {\n this.open = false;\n this.strategy.open = false;\n }\n }\n if (changes.has('value')) {\n // MenuItems update a frame late for <slot> management,\n // await the same here.\n this.shouldScheduleManageSelection();\n }\n // Maybe it's finally time to remove this support?\n if (!this.hasUpdated) {\n this.deprecatedMenu = this.querySelector(':scope > sp-menu');\n this.deprecatedMenu?.toggleAttribute('ignore', true);\n this.deprecatedMenu?.setAttribute('selects', 'inherit');\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) {\n const { localName } = this;\n window.__swc.warn(\n this,\n `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n { level: 'deprecation' }\n );\n }\n this.updateComplete.then(async () => {\n // Attributes should be user supplied, making them available before first update.\n // However, `appliesLabel` is applied by external elements that must be update complete as well to be bound appropriately.\n await new Promise((res) => requestAnimationFrame(res));\n await new Promise((res) => requestAnimationFrame(res));\n if (\n !this.label &&\n !this.getAttribute('aria-label') &&\n !this.getAttribute('aria-labelledby') &&\n !this.appliedLabel\n ) {\n window.__swc.warn(\n this,\n `<${this.localName}> needs one of the following to be accessible:`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#accessibility',\n {\n type: 'accessibility',\n issues: [\n `an <sp-field-label> element with a \\`for\\` attribute referencing the \\`id\\` of the \\`<${this.localName}>\\`, or`,\n 'value supplied to the \"label\" attribute, which will be displayed visually as placeholder text, or',\n 'text content supplied in a <span> with slot=\"label\", which will also be displayed visually as placeholder text.',\n ],\n }\n );\n }\n });\n }\n super.update(changes);\n }\n\n protected bindButtonKeydownListener(): void {\n this.button.addEventListener('keydown', this.handleKeydown);\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n super.updated(changes);\n if (changes.has('open')) {\n this.strategy.open = this.open;\n }\n }\n\n protected override firstUpdated(changes: PropertyValues<this>): void {\n super.firstUpdated(changes);\n this.bindButtonKeydownListener();\n this.bindEvents();\n }\n\n protected get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n aria-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected renderContainer(menu: TemplateResult): TemplateResult {\n const accessibleMenu = html`\n ${this.dismissHelper} ${menu} ${this.dismissHelper}\n `;\n // @todo: test in mobile\n if (this.isMobile.matches && !this.forcePopover) {\n this.dependencyManager.add('sp-tray');\n import('@spectrum-web-components/tray/sp-tray.js');\n return html`\n <sp-tray\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n >\n ${accessibleMenu}\n </sp-tray>\n `;\n }\n this.dependencyManager.add('sp-popover');\n import('@spectrum-web-components/popover/sp-popover.js');\n return html`\n <sp-popover\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n placement=${this.placement}\n >\n ${accessibleMenu}\n </sp-popover>\n `;\n }\n\n protected hasRenderedOverlay = false;\n\n private onScroll(): void {\n this.dispatchEvent(\n new Event('scroll', {\n cancelable: true,\n composed: true,\n })\n );\n }\n\n protected get renderMenu(): TemplateResult {\n const menu = html`\n <sp-menu\n aria-labelledby=\"applied-label\"\n @change=${this.handleChange}\n id=\"menu\"\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n @scroll=${this.onScroll}\n role=${this.listRole}\n .selects=${this.selects}\n .selected=${this.value ? [this.value] : []}\n size=${this.size}\n @sp-menu-item-added-or-updated=${this.shouldManageSelection}\n >\n <slot @slotchange=${this.shouldScheduleManageSelection}></slot>\n </sp-menu>\n `;\n this.hasRenderedOverlay =\n this.hasRenderedOverlay ||\n this.focused ||\n this.open ||\n !!this.deprecatedMenu;\n if (this.hasRenderedOverlay) {\n if (this.dependencyManager.loaded) {\n this.dependencyManager.add('sp-overlay');\n }\n return this.renderOverlay(menu);\n }\n return menu;\n }\n\n private willManageSelection = false;\n\n protected shouldScheduleManageSelection(event?: Event): void {\n if (\n !this.willManageSelection &&\n (!event ||\n ((event.target as HTMLElement).getRootNode() as ShadowRoot)\n .host === this)\n ) {\n this.willManageSelection = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.manageSelection();\n });\n });\n }\n }\n\n protected shouldManageSelection(): void {\n if (this.willManageSelection) {\n return;\n }\n this.willManageSelection = true;\n this.manageSelection();\n }\n\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\n await this.optionsMenu.updateComplete;\n if (this.recentlyConnected) {\n // Work around for attach timing differences in Safari and Firefox.\n // Remove when refactoring to Menu passthrough wrapper.\n await new Promise((res) => requestAnimationFrame(() => res(true)));\n this.recentlyConnected = false;\n }\n this.menuItems.forEach((item) => {\n if (this.value === item.value && !item.disabled) {\n selectedItem = item;\n } else {\n item.selected = false;\n }\n });\n if (selectedItem) {\n selectedItem.selected = !!this.selects;\n this.selectedItem = selectedItem;\n } else {\n this.value = '';\n this.selectedItem = undefined;\n }\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.optionsMenu.updateSelectedItemIndex();\n }\n this.selectionResolver();\n this.willManageSelection = false;\n }\n\n private selectionPromise = Promise.resolve();\n private selectionResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.selectionPromise;\n // if (this.overlayElement) {\n // await this.overlayElement.updateComplete;\n // }\n return complete;\n }\n\n private recentlyConnected = false;\n\n private enterKeydownOn: EventTarget | null = null;\n\n protected handleEnterKeydown = (event: KeyboardEvent): void => {\n if (event.code !== 'Enter') {\n return;\n }\n\n if (this.enterKeydownOn) {\n event.preventDefault();\n return;\n }\n this.enterKeydownOn = event.target;\n this.addEventListener(\n 'keyup',\n async (keyupEvent: KeyboardEvent) => {\n if (keyupEvent.code !== 'Enter') {\n return;\n }\n this.enterKeydownOn = null;\n },\n { once: true }\n );\n };\n\n public bindEvents(): void {\n this.strategy?.abort();\n if (this.isMobile.matches) {\n this.strategy = new strategies['mobile'](this.button, this);\n } else {\n this.strategy = new strategies['desktop'](this.button, this);\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.recentlyConnected = this.hasUpdated;\n }\n\n public override disconnectedCallback(): void {\n this.close();\n this.strategy?.releaseDescription();\n super.disconnectedCallback();\n }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot description - The description content for the Picker\n * @slot tooltip - Tooltip to to be applied to the the Picker Button\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles, chevronIconOverrides];\n }\n\n protected override get containerStyles(): StyleInfo {\n const styles = super.containerStyles;\n if (!this.quiet) {\n styles['min-width'] = `${this.offsetWidth}px`;\n }\n return styles;\n }\n\n protected override handleKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n this.focused = true;\n if (!code.startsWith('Arrow') || this.readonly || this.pending) {\n return;\n }\n if (code === 'ArrowUp' || code === 'ArrowDown') {\n this.toggle(true);\n event.preventDefault();\n return;\n }\n event.preventDefault();\n const selectedIndex = this.selectedItem\n ? this.menuItems.indexOf(this.selectedItem)\n : -1;\n // use a positive offset to find the first non-disabled item when no selection is available.\n const nextOffset = selectedIndex < 0 || code === 'ArrowRight' ? 1 : -1;\n let nextIndex = selectedIndex + nextOffset;\n while (\n this.menuItems[nextIndex] &&\n this.menuItems[nextIndex].disabled\n ) {\n nextIndex += nextOffset;\n }\n if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {\n return;\n }\n if (!this.value || nextIndex !== selectedIndex) {\n this.setValueFromItem(this.menuItems[nextIndex]);\n }\n };\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/src/Picker.js
ADDED
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
"use strict";var b=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var i=(d,a,e,t)=>{for(var s=t>1?void 0:t?y(a,e):a,n=d.length-1,l;n>=0;n--)(l=d[n])&&(s=(t?l(a,e,s):l(s))||s);return t&&s&&b(a,e,s),s};import{html as r,nothing as v,render as g,SizedMixin as w}from"@spectrum-web-components/base";import{classMap as I,ifDefined as p,styleMap as m}from"@spectrum-web-components/base/src/directives.js";import{property as o,query as u,state as c}from"@spectrum-web-components/base/src/decorators.js";import M from"./picker.css.js";import S from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import C from"@spectrum-web-components/icon/src/icon-chevron-overrides.css.js";import{Focusable as E}from"@spectrum-web-components/shared/src/focusable.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import"@spectrum-web-components/menu/sp-menu.js";import{IS_MOBILE as $,MatchMediaController as R}from"@spectrum-web-components/reactive-controllers/src/MatchMedia.js";import{DependencyManagerController as D}from"@spectrum-web-components/reactive-controllers/src/DependencyManger.js";import{PendingStateController as T}from"@spectrum-web-components/reactive-controllers/src/PendingState.js";import{strategies as f}from"./strategies.js";const F={s:"spectrum-UIIcon-ChevronDown75",m:"spectrum-UIIcon-ChevronDown100",l:"spectrum-UIIcon-ChevronDown200",xl:"spectrum-UIIcon-ChevronDown300"};export const DESCRIPTION_ID="option-picker";export class PickerBase extends w(E,{noDefaultSize:!0}){constructor(){super();this.isMobile=new R(this,$);this.dependencyManager=new D(this);this.deprecatedMenu=null;this.disabled=!1;this.focused=!1;this.invalid=!1;this.forcePopover=!1;this.pending=!1;this.pendingLabel="Pending";this.open=!1;this.readonly=!1;this.selects="single";this._selfManageFocusElement=!1;this.placement="bottom-start";this.quiet=!1;this.value="";this.listRole="listbox";this.itemRole="option";this.handleKeydown=e=>{this.focused=!0,!(e.code!=="ArrowDown"&&e.code!=="ArrowUp")&&(e.stopPropagation(),e.preventDefault(),this.toggle(!0))};this.handleSlottableRequest=e=>{};this.applyFocusElementLabel=(e,t)=>{this.appliedLabel=e,this.labelAlignment=t.sideAligned?"inline":void 0};this.hasRenderedOverlay=!1;this.willManageSelection=!1;this.selectionPromise=Promise.resolve();this.recentlyConnected=!1;this.enterKeydownOn=null;this.handleEnterKeydown=e=>{if(e.code==="Enter"){if(this.enterKeydownOn){e.preventDefault();return}this.enterKeydownOn=e.target,this.addEventListener("keyup",async t=>{t.code==="Enter"&&(this.enterKeydownOn=null)},{once:!0})}};this.pendingStateController=new T(this)}get menuItems(){return this.optionsMenu.childItems}get selfManageFocusElement(){return this._selfManageFocusElement}get selectedItem(){return this._selectedItem}set selectedItem(e){if(this.selectedItemContent=e?e.itemChildren:void 0,e===this.selectedItem)return;const t=this.selectedItem;this._selectedItem=e,this.requestUpdate("selectedItem",t)}get focusElement(){return this.open?this.optionsMenu:this.button}forceFocusVisible(){this.disabled||(this.focused=!0)}click(){this.disabled||this.toggle()}handleButtonBlur(){this.focused=!1}focus(e){super.focus(e),!this.disabled&&this.focusElement&&(this.focused=this.hasVisibleFocusInTree())}handleHelperFocus(){this.focused=!0,this.button.focus()}handleChange(e){this.strategy&&(this.strategy.preventNextToggle="no");const t=e.target,[s]=t.selectedItems;e.stopPropagation(),e.cancelable?this.setValueFromItem(s,e):(this.open=!1,this.strategy&&(this.strategy.open=!1))}handleButtonFocus(e){var t;(t=this.strategy)==null||t.handleButtonFocus(e)}async setValueFromItem(e,t){var h;this.open=!1,this.strategy&&(this.strategy.open=!1);const s=this.selectedItem,n=this.value;if(this.selectedItem=e,this.value=(h=e==null?void 0:e.value)!=null?h:"",await this.updateComplete,!this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))&&this.selects){t&&t.preventDefault(),this.setMenuItemSelected(this.selectedItem,!1),s&&this.setMenuItemSelected(s,!0),this.selectedItem=s,this.value=n,this.open=!0,this.strategy&&(this.strategy.open=!0);return}else if(!this.selects){this.selectedItem=s,this.value=n;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.pending||(this.open=typeof e!="undefined"?e:!this.open,this.strategy&&(this.strategy.open=this.open),this.open?this._selfManageFocusElement=!0:this._selfManageFocusElement=!1)}close(){this.readonly||this.strategy&&(this.open=!1,this.strategy.open=!1)}get containerStyles(){return this.isMobile.matches?{"--swc-menu-width":"100%"}:{}}get selectedItemContent(){return this._selectedItemContent||{icon:[],content:[]}}set selectedItemContent(e){if(e===this.selectedItemContent)return;const t=this.selectedItemContent;this._selectedItemContent=e,this.requestUpdate("selectedItemContent",t)}handleTooltipSlotchange(e){this.tooltipEl=e.target.assignedElements()[0]}renderLabelContent(e){return this.value&&this.selectedItem?e:r`
|
|
2
|
+
<slot name="label" id="label">
|
|
3
|
+
<span
|
|
4
|
+
aria-hidden=${p(this.appliedLabel?void 0:"true")}
|
|
5
|
+
>
|
|
6
|
+
${this.label}
|
|
7
|
+
</span>
|
|
8
|
+
</slot>
|
|
9
|
+
`}get buttonContent(){const e={"visually-hidden":this.icons==="only"&&!!this.value,placeholder:!this.value,label:!0},t=this.appliedLabel||this.label;return[r`
|
|
10
|
+
<span id="icon" ?hidden=${this.icons==="none"}>
|
|
11
|
+
${this.selectedItemContent.icon}
|
|
12
|
+
</span>
|
|
13
|
+
<span
|
|
14
|
+
id=${p(this.value&&this.selectedItem?"label":void 0)}
|
|
15
|
+
class=${I(e)}
|
|
16
|
+
>
|
|
17
|
+
${this.renderLabelContent(this.selectedItemContent.content)}
|
|
18
|
+
</span>
|
|
19
|
+
${this.value&&this.selectedItem?r`
|
|
20
|
+
<span
|
|
21
|
+
aria-hidden="true"
|
|
22
|
+
class="visually-hidden"
|
|
23
|
+
id="applied-label"
|
|
24
|
+
>
|
|
25
|
+
${t}
|
|
26
|
+
<slot name="label"></slot>
|
|
27
|
+
</span>
|
|
28
|
+
`:r`
|
|
29
|
+
<span hidden id="applied-label">${t}</span>
|
|
30
|
+
`}
|
|
31
|
+
${this.invalid&&!this.pending?r`
|
|
32
|
+
<sp-icon-alert
|
|
33
|
+
class="validation-icon"
|
|
34
|
+
></sp-icon-alert>
|
|
35
|
+
`:v}
|
|
36
|
+
${this.pendingStateController.renderPendingState()}
|
|
37
|
+
<sp-icon-chevron100
|
|
38
|
+
class="picker ${F[this.size]}"
|
|
39
|
+
></sp-icon-chevron100>
|
|
40
|
+
<slot
|
|
41
|
+
aria-hidden="true"
|
|
42
|
+
name="tooltip"
|
|
43
|
+
id="tooltip"
|
|
44
|
+
@slotchange=${this.handleTooltipSlotchange}
|
|
45
|
+
></slot>
|
|
46
|
+
`]}renderOverlay(e){var s,n,l;if(((s=this.strategy)==null?void 0:s.overlay)===void 0)return e;const t=this.renderContainer(e);return g(t,(n=this.strategy)==null?void 0:n.overlay,{host:this}),(l=this.strategy)==null?void 0:l.overlay}get renderDescriptionSlot(){return r`
|
|
47
|
+
<div id=${DESCRIPTION_ID}>
|
|
48
|
+
<slot name="description"></slot>
|
|
49
|
+
</div>
|
|
50
|
+
`}render(){return this.tooltipEl&&(this.tooltipEl.disabled=this.open),r`
|
|
51
|
+
<span
|
|
52
|
+
id="focus-helper"
|
|
53
|
+
tabindex="${this.focused||this.open?"-1":"0"}"
|
|
54
|
+
@focus=${this.handleHelperFocus}
|
|
55
|
+
aria-describedby=${DESCRIPTION_ID}
|
|
56
|
+
></span>
|
|
57
|
+
<button
|
|
58
|
+
aria-controls=${p(this.open?"menu":void 0)}
|
|
59
|
+
aria-describedby="tooltip"
|
|
60
|
+
aria-expanded=${this.open?"true":"false"}
|
|
61
|
+
aria-haspopup="true"
|
|
62
|
+
aria-labelledby="loader icon label applied-label"
|
|
63
|
+
id="button"
|
|
64
|
+
class=${p(this.labelAlignment?`label-${this.labelAlignment}`:void 0)}
|
|
65
|
+
@blur=${this.handleButtonBlur}
|
|
66
|
+
@keydown=${{handleEvent:this.handleEnterKeydown,capture:!0}}
|
|
67
|
+
?disabled=${this.disabled}
|
|
68
|
+
tabindex="-1"
|
|
69
|
+
>
|
|
70
|
+
${this.buttonContent}
|
|
71
|
+
</button>
|
|
72
|
+
${this.renderMenu} ${this.renderDescriptionSlot}
|
|
73
|
+
`}update(e){var t,s;this.selects&&(this.selects="single"),e.has("disabled")&&this.disabled&&this.strategy&&(this.open=!1,this.strategy.open=!1),e.has("pending")&&this.pending&&this.strategy&&(this.open=!1,this.strategy.open=!1),e.has("value")&&this.shouldScheduleManageSelection(),this.hasUpdated||(this.deprecatedMenu=this.querySelector(":scope > sp-menu"),(t=this.deprecatedMenu)==null||t.toggleAttribute("ignore",!0),(s=this.deprecatedMenu)==null||s.setAttribute("selects","inherit")),super.update(e)}bindButtonKeydownListener(){this.button.addEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("open")&&(this.strategy.open=this.open)}firstUpdated(e){super.firstUpdated(e),this.bindButtonKeydownListener(),this.bindEvents()}get dismissHelper(){return r`
|
|
74
|
+
<div class="visually-hidden">
|
|
75
|
+
<button
|
|
76
|
+
tabindex="-1"
|
|
77
|
+
aria-label="Dismiss"
|
|
78
|
+
@click=${this.close}
|
|
79
|
+
></button>
|
|
80
|
+
</div>
|
|
81
|
+
`}renderContainer(e){const t=r`
|
|
82
|
+
${this.dismissHelper} ${e} ${this.dismissHelper}
|
|
83
|
+
`;return this.isMobile.matches&&!this.forcePopover?(this.dependencyManager.add("sp-tray"),import("@spectrum-web-components/tray/sp-tray.js"),r`
|
|
84
|
+
<sp-tray
|
|
85
|
+
id="popover"
|
|
86
|
+
role="presentation"
|
|
87
|
+
style=${m(this.containerStyles)}
|
|
88
|
+
>
|
|
89
|
+
${t}
|
|
90
|
+
</sp-tray>
|
|
91
|
+
`):(this.dependencyManager.add("sp-popover"),import("@spectrum-web-components/popover/sp-popover.js"),r`
|
|
92
|
+
<sp-popover
|
|
93
|
+
id="popover"
|
|
94
|
+
role="presentation"
|
|
95
|
+
style=${m(this.containerStyles)}
|
|
96
|
+
placement=${this.placement}
|
|
97
|
+
>
|
|
98
|
+
${t}
|
|
99
|
+
</sp-popover>
|
|
100
|
+
`)}onScroll(){this.dispatchEvent(new Event("scroll",{cancelable:!0,composed:!0}))}get renderMenu(){const e=r`
|
|
101
|
+
<sp-menu
|
|
102
|
+
aria-labelledby="applied-label"
|
|
103
|
+
@change=${this.handleChange}
|
|
104
|
+
id="menu"
|
|
105
|
+
@keydown=${{handleEvent:this.handleEnterKeydown,capture:!0}}
|
|
106
|
+
@scroll=${this.onScroll}
|
|
107
|
+
role=${this.listRole}
|
|
108
|
+
.selects=${this.selects}
|
|
109
|
+
.selected=${this.value?[this.value]:[]}
|
|
110
|
+
size=${this.size}
|
|
111
|
+
@sp-menu-item-added-or-updated=${this.shouldManageSelection}
|
|
112
|
+
>
|
|
113
|
+
<slot @slotchange=${this.shouldScheduleManageSelection}></slot>
|
|
114
|
+
</sp-menu>
|
|
115
|
+
`;return this.hasRenderedOverlay=this.hasRenderedOverlay||this.focused||this.open||!!this.deprecatedMenu,this.hasRenderedOverlay?(this.dependencyManager.loaded&&this.dependencyManager.add("sp-overlay"),this.renderOverlay(e)):e}shouldScheduleManageSelection(e){!this.willManageSelection&&(!e||e.target.getRootNode().host===this)&&(this.willManageSelection=!0,requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.manageSelection()})}))}shouldManageSelection(){this.willManageSelection||(this.willManageSelection=!0,this.manageSelection())}async manageSelection(){if(this.selects==null)return;this.selectionPromise=new Promise(t=>this.selectionResolver=t);let e;await this.optionsMenu.updateComplete,this.recentlyConnected&&(await new Promise(t=>requestAnimationFrame(()=>t(!0))),this.recentlyConnected=!1),this.menuItems.forEach(t=>{this.value===t.value&&!t.disabled?e=t:t.selected=!1}),e?(e.selected=!!this.selects,this.selectedItem=e):(this.value="",this.selectedItem=void 0),this.open&&(await this.optionsMenu.updateComplete,this.optionsMenu.updateSelectedItemIndex()),this.selectionResolver(),this.willManageSelection=!1}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.selectionPromise,e}bindEvents(){var e;(e=this.strategy)==null||e.abort(),this.isMobile.matches?this.strategy=new f.mobile(this.button,this):this.strategy=new f.desktop(this.button,this)}connectedCallback(){super.connectedCallback(),this.recentlyConnected=this.hasUpdated}disconnectedCallback(){var e;this.close(),(e=this.strategy)==null||e.releaseDescription(),super.disconnectedCallback()}}i([c()],PickerBase.prototype,"appliedLabel",2),i([u("#button")],PickerBase.prototype,"button",2),i([o({type:Boolean,reflect:!0})],PickerBase.prototype,"disabled",2),i([o({type:Boolean,reflect:!0})],PickerBase.prototype,"focused",2),i([o({type:String,reflect:!0})],PickerBase.prototype,"icons",2),i([o({type:Boolean,reflect:!0})],PickerBase.prototype,"invalid",2),i([o({type:Boolean,reflect:!0})],PickerBase.prototype,"forcePopover",2),i([o({type:Boolean,reflect:!0})],PickerBase.prototype,"pending",2),i([o({type:String,attribute:"pending-label"})],PickerBase.prototype,"pendingLabel",2),i([o()],PickerBase.prototype,"label",2),i([o({type:Boolean,reflect:!0})],PickerBase.prototype,"open",2),i([o({type:Boolean,reflect:!0})],PickerBase.prototype,"readonly",2),i([c()],PickerBase.prototype,"labelAlignment",2),i([u("sp-menu")],PickerBase.prototype,"optionsMenu",2),i([u("sp-overlay")],PickerBase.prototype,"overlayElement",2),i([o()],PickerBase.prototype,"placement",2),i([o({type:Boolean,reflect:!0})],PickerBase.prototype,"quiet",2),i([o({type:String})],PickerBase.prototype,"value",2),i([o({attribute:!1})],PickerBase.prototype,"selectedItem",1),i([c()],PickerBase.prototype,"selectedItemContent",1);export class Picker extends PickerBase{constructor(){super(...arguments);this.handleKeydown=e=>{const{code:t}=e;if(this.focused=!0,!t.startsWith("Arrow")||this.readonly||this.pending)return;if(t==="ArrowUp"||t==="ArrowDown"){this.toggle(!0),e.preventDefault();return}e.preventDefault();const s=this.selectedItem?this.menuItems.indexOf(this.selectedItem):-1,n=s<0||t==="ArrowRight"?1:-1;let l=s+n;for(;this.menuItems[l]&&this.menuItems[l].disabled;)l+=n;!this.menuItems[l]||this.menuItems[l].disabled||(!this.value||l!==s)&&this.setValueFromItem(this.menuItems[l])}}static get styles(){return[M,S,C]}get containerStyles(){const e=super.containerStyles;return this.quiet||(e["min-width"]=`${this.offsetWidth}px`),e}}
|
|
116
|
+
//# sourceMappingURL=Picker.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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 {\n classMap,\n ifDefined,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport pickerStyles from './picker.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\nimport chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js';\n\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport type { Tooltip } from '@spectrum-web-components/tooltip';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport type {\n Menu,\n MenuItem,\n MenuItemChildren,\n} from '@spectrum-web-components/menu';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport {\n IS_MOBILE,\n MatchMediaController,\n} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';\nimport { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';\nimport { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';\nimport type { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\nimport type { FieldLabel } from '@spectrum-web-components/field-label';\n\nimport { DesktopController } from './DesktopController.js';\nimport { MobileController } from './MobileController.js';\nimport { strategies } from './strategies.js';\n\nconst chevronClass = {\n s: 'spectrum-UIIcon-ChevronDown75',\n m: 'spectrum-UIIcon-ChevronDown100',\n l: 'spectrum-UIIcon-ChevronDown200',\n xl: 'spectrum-UIIcon-ChevronDown300',\n};\n\nexport const DESCRIPTION_ID = 'option-picker';\nexport class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {\n public isMobile = new MatchMediaController(this, IS_MOBILE);\n\n public strategy!: DesktopController | MobileController;\n\n @state()\n appliedLabel?: string;\n\n @query('#button')\n public button!: HTMLButtonElement;\n\n public dependencyManager = new DependencyManagerController(this);\n\n private deprecatedMenu: Menu | null = null;\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String, reflect: true })\n public icons?: 'only' | 'none';\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n /**\n * Forces the Picker to render as a popover on mobile instead of a tray.\n *\n * @memberof PickerBase\n */\n @property({ type: Boolean, reflect: true })\n public forcePopover = false;\n\n /** Whether the items are currently loading. */\n @property({ type: Boolean, reflect: true })\n public pending = false;\n\n /** Defines a string value that labels the Picker while it is in pending state. */\n @property({ type: String, attribute: 'pending-label' })\n public pendingLabel = 'Pending';\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 @state()\n public labelAlignment?: 'inline';\n\n protected get menuItems(): MenuItem[] {\n return this.optionsMenu.childItems;\n }\n\n @query('sp-menu')\n public optionsMenu!: Menu;\n\n private _selfManageFocusElement = false;\n\n public override get selfManageFocusElement(): boolean {\n return this._selfManageFocusElement;\n }\n\n @query('sp-overlay')\n public overlayElement!: Overlay;\n\n protected tooltipEl?: Tooltip;\n\n /**\n * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n * @attr\n */\n\n @property()\n public placement: Placement = 'bottom-start';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public value = '';\n\n @property({ attribute: false })\n public get selectedItem(): MenuItem | undefined {\n return this._selectedItem;\n }\n\n public pendingStateController: PendingStateController<this>;\n\n /**\n * Initializes the `PendingStateController` for the Picker component.\n * The `PendingStateController` manages the pending state of the Picker.\n */\n constructor() {\n super();\n this.pendingStateController = new PendingStateController(this);\n }\n\n public set selectedItem(selectedItem: MenuItem | undefined) {\n this.selectedItemContent = selectedItem\n ? selectedItem.itemChildren\n : undefined;\n\n if (selectedItem === this.selectedItem) return;\n const oldSelectedItem = this.selectedItem;\n this._selectedItem = selectedItem;\n this.requestUpdate('selectedItem', oldSelectedItem);\n }\n\n _selectedItem?: MenuItem;\n\n protected listRole: 'listbox' | 'menu' = 'listbox';\n protected itemRole = 'option';\n\n public override get focusElement(): HTMLElement {\n if (this.open) {\n return this.optionsMenu;\n }\n return this.button;\n }\n\n public forceFocusVisible(): void {\n if (this.disabled) {\n return;\n }\n\n this.focused = true;\n }\n\n public override click(): void {\n if (this.disabled) {\n return;\n }\n\n this.toggle();\n }\n\n public handleButtonBlur(): void {\n this.focused = false;\n }\n\n public override focus(options?: FocusOptions): void {\n super.focus(options);\n\n if (!this.disabled && this.focusElement) {\n this.focused = this.hasVisibleFocusInTree();\n }\n }\n\n public handleHelperFocus(): void {\n // set focused to true here instead of handleButtonFocus so clicks don't flash a focus outline\n this.focused = true;\n this.button.focus();\n }\n\n public handleChange(event: Event): void {\n if (this.strategy) {\n this.strategy.preventNextToggle = 'no';\n }\n const target = event.target as Menu;\n const [selected] = target.selectedItems;\n event.stopPropagation();\n if (event.cancelable) {\n this.setValueFromItem(selected, event);\n } else {\n // Non-cancelable \"change\" events announce a selection with no value\n // change that should close the Picker element.\n this.open = false;\n if (this.strategy) {\n this.strategy.open = false;\n }\n }\n }\n\n public handleButtonFocus(event: FocusEvent): void {\n this.strategy?.handleButtonFocus(event);\n }\n\n protected handleKeydown = (event: KeyboardEvent): void => {\n this.focused = true;\n if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {\n return;\n }\n event.stopPropagation();\n event.preventDefault();\n this.toggle(true);\n };\n\n protected async setValueFromItem(\n item: MenuItem,\n menuChangeEvent?: Event\n ): Promise<void> {\n this.open = false;\n // should always close when \"setting\" a value\n if (this.strategy) {\n this.strategy.open = false;\n }\n const oldSelectedItem = this.selectedItem;\n const oldValue = this.value;\n\n // Set a value.\n this.selectedItem = item;\n this.value = item?.value ?? '';\n await this.updateComplete;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n // Allow it to be prevented.\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault && this.selects) {\n if (menuChangeEvent) {\n menuChangeEvent.preventDefault();\n }\n this.setMenuItemSelected(this.selectedItem as MenuItem, false);\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, true);\n }\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n this.open = true;\n if (this.strategy) {\n this.strategy.open = true;\n }\n return;\n } else if (!this.selects) {\n // Unset the value if not carrying a selection\n this.selectedItem = oldSelectedItem;\n this.value = oldValue;\n return;\n }\n if (oldSelectedItem) {\n this.setMenuItemSelected(oldSelectedItem, false);\n }\n this.setMenuItemSelected(item, !!this.selects);\n }\n\n protected setMenuItemSelected(item: MenuItem, value: boolean): void {\n // matches null | undefined\n if (this.selects == null) return;\n item.selected = value;\n }\n\n public toggle(target?: boolean): void {\n if (this.readonly || this.pending) {\n return;\n }\n this.open = typeof target !== 'undefined' ? target : !this.open;\n if (this.strategy) {\n this.strategy.open = this.open;\n }\n if (this.open) {\n this._selfManageFocusElement = true;\n } else {\n this._selfManageFocusElement = false;\n }\n }\n\n public close(): void {\n if (this.readonly) {\n return;\n }\n if (this.strategy) {\n this.open = false;\n this.strategy.open = false;\n }\n }\n\n protected get containerStyles(): StyleInfo {\n // @todo: test in mobile\n /* c8 ignore next 5 */\n if (this.isMobile.matches) {\n return {\n '--swc-menu-width': '100%',\n };\n }\n return {};\n }\n\n @state()\n protected get selectedItemContent(): MenuItemChildren {\n return this._selectedItemContent || { icon: [], content: [] };\n }\n\n protected set selectedItemContent(\n selectedItemContent: MenuItemChildren | undefined\n ) {\n if (selectedItemContent === this.selectedItemContent) return;\n\n const oldContent = this.selectedItemContent;\n this._selectedItemContent = selectedItemContent;\n this.requestUpdate('selectedItemContent', oldContent);\n }\n\n _selectedItemContent?: MenuItemChildren;\n\n protected handleTooltipSlotchange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.tooltipEl = event.target.assignedElements()[0] as\n | Tooltip\n | undefined;\n }\n\n public handleSlottableRequest = (_event: SlottableRequestEvent): void => {};\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\" id=\"label\">\n <span\n aria-hidden=${ifDefined(\n this.appliedLabel ? undefined : 'true'\n )}\n >\n ${this.label}\n </span>\n </slot>\n `;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const labelClasses = {\n 'visually-hidden': this.icons === 'only' && !!this.value,\n placeholder: !this.value,\n label: true,\n };\n const appliedLabel = this.appliedLabel || this.label;\n return [\n html`\n <span id=\"icon\" ?hidden=${this.icons === 'none'}>\n ${this.selectedItemContent.icon}\n </span>\n <span\n id=${ifDefined(\n this.value && this.selectedItem ? 'label' : undefined\n )}\n class=${classMap(labelClasses)}\n >\n ${this.renderLabelContent(this.selectedItemContent.content)}\n </span>\n ${this.value && this.selectedItem\n ? html`\n <span\n aria-hidden=\"true\"\n class=\"visually-hidden\"\n id=\"applied-label\"\n >\n ${appliedLabel}\n <slot name=\"label\"></slot>\n </span>\n `\n : html`\n <span hidden id=\"applied-label\">${appliedLabel}</span>\n `}\n ${this.invalid && !this.pending\n ? html`\n <sp-icon-alert\n class=\"validation-icon\"\n ></sp-icon-alert>\n `\n : nothing}\n ${this.pendingStateController.renderPendingState()}\n <sp-icon-chevron100\n class=\"picker ${chevronClass[\n this.size as DefaultElementSize\n ]}\"\n ></sp-icon-chevron100>\n <slot\n aria-hidden=\"true\"\n name=\"tooltip\"\n id=\"tooltip\"\n @slotchange=${this.handleTooltipSlotchange}\n ></slot>\n `,\n ];\n }\n\n applyFocusElementLabel = (\n value: string,\n labelElement: FieldLabel\n ): void => {\n this.appliedLabel = value;\n this.labelAlignment = labelElement.sideAligned ? 'inline' : undefined;\n };\n\n protected renderOverlay(menu: TemplateResult): TemplateResult {\n if (this.strategy?.overlay === undefined) {\n return menu;\n }\n const container = this.renderContainer(menu);\n render(container, this.strategy?.overlay as unknown as HTMLElement, {\n host: this,\n });\n return this.strategy?.overlay as unknown as TemplateResult;\n }\n\n protected get renderDescriptionSlot(): TemplateResult {\n return html`\n <div id=${DESCRIPTION_ID}>\n <slot name=\"description\"></slot>\n </div>\n `;\n }\n // a helper to throw focus to the button is needed because Safari\n // won't include buttons in the tab order even with tabindex=\"0\"\n protected override render(): TemplateResult {\n if (this.tooltipEl) {\n this.tooltipEl.disabled = this.open;\n }\n return html`\n <span\n id=\"focus-helper\"\n tabindex=\"${this.focused || this.open ? '-1' : '0'}\"\n @focus=${this.handleHelperFocus}\n aria-describedby=${DESCRIPTION_ID}\n ></span>\n <button\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-describedby=\"tooltip\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"true\"\n aria-labelledby=\"loader icon label applied-label\"\n id=\"button\"\n class=${ifDefined(\n this.labelAlignment\n ? `label-${this.labelAlignment}`\n : undefined\n )}\n @blur=${this.handleButtonBlur}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n tabindex=\"-1\"\n >\n ${this.buttonContent}\n </button>\n ${this.renderMenu} ${this.renderDescriptionSlot}\n `;\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (this.selects) {\n /**\n * Always force `selects` to \"single\" when set.\n *\n * @todo: Add support functionally and visually for \"multiple\"\n */\n this.selects = 'single';\n }\n if (changes.has('disabled') && this.disabled) {\n if (this.strategy) {\n this.open = false;\n this.strategy.open = false;\n }\n }\n if (changes.has('pending') && this.pending) {\n if (this.strategy) {\n this.open = false;\n this.strategy.open = false;\n }\n }\n if (changes.has('value')) {\n // MenuItems update a frame late for <slot> management,\n // await the same here.\n this.shouldScheduleManageSelection();\n }\n // Maybe it's finally time to remove this support?\n if (!this.hasUpdated) {\n this.deprecatedMenu = this.querySelector(':scope > sp-menu');\n this.deprecatedMenu?.toggleAttribute('ignore', true);\n this.deprecatedMenu?.setAttribute('selects', 'inherit');\n }\n if (window.__swc.DEBUG) {\n if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) {\n const { localName } = this;\n window.__swc.warn(\n this,\n `You no longer need to provide an <sp-menu> child to ${localName}. Any styling or attributes on the <sp-menu> will be ignored.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',\n { level: 'deprecation' }\n );\n }\n this.updateComplete.then(async () => {\n // Attributes should be user supplied, making them available before first update.\n // However, `appliesLabel` is applied by external elements that must be update complete as well to be bound appropriately.\n await new Promise((res) => requestAnimationFrame(res));\n await new Promise((res) => requestAnimationFrame(res));\n if (\n !this.label &&\n !this.getAttribute('aria-label') &&\n !this.getAttribute('aria-labelledby') &&\n !this.appliedLabel\n ) {\n window.__swc.warn(\n this,\n `<${this.localName}> needs one of the following to be accessible:`,\n 'https://opensource.adobe.com/spectrum-web-components/components/picker/#accessibility',\n {\n type: 'accessibility',\n issues: [\n `an <sp-field-label> element with a \\`for\\` attribute referencing the \\`id\\` of the \\`<${this.localName}>\\`, or`,\n 'value supplied to the \"label\" attribute, which will be displayed visually as placeholder text, or',\n 'text content supplied in a <span> with slot=\"label\", which will also be displayed visually as placeholder text.',\n ],\n }\n );\n }\n });\n }\n super.update(changes);\n }\n\n protected bindButtonKeydownListener(): void {\n this.button.addEventListener('keydown', this.handleKeydown);\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n super.updated(changes);\n if (changes.has('open')) {\n this.strategy.open = this.open;\n }\n }\n\n protected override firstUpdated(changes: PropertyValues<this>): void {\n super.firstUpdated(changes);\n this.bindButtonKeydownListener();\n this.bindEvents();\n }\n\n protected get dismissHelper(): TemplateResult {\n return html`\n <div class=\"visually-hidden\">\n <button\n tabindex=\"-1\"\n aria-label=\"Dismiss\"\n @click=${this.close}\n ></button>\n </div>\n `;\n }\n\n protected renderContainer(menu: TemplateResult): TemplateResult {\n const accessibleMenu = html`\n ${this.dismissHelper} ${menu} ${this.dismissHelper}\n `;\n // @todo: test in mobile\n if (this.isMobile.matches && !this.forcePopover) {\n this.dependencyManager.add('sp-tray');\n import('@spectrum-web-components/tray/sp-tray.js');\n return html`\n <sp-tray\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n >\n ${accessibleMenu}\n </sp-tray>\n `;\n }\n this.dependencyManager.add('sp-popover');\n import('@spectrum-web-components/popover/sp-popover.js');\n return html`\n <sp-popover\n id=\"popover\"\n role=\"presentation\"\n style=${styleMap(this.containerStyles)}\n placement=${this.placement}\n >\n ${accessibleMenu}\n </sp-popover>\n `;\n }\n\n protected hasRenderedOverlay = false;\n\n private onScroll(): void {\n this.dispatchEvent(\n new Event('scroll', {\n cancelable: true,\n composed: true,\n })\n );\n }\n\n protected get renderMenu(): TemplateResult {\n const menu = html`\n <sp-menu\n aria-labelledby=\"applied-label\"\n @change=${this.handleChange}\n id=\"menu\"\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n @scroll=${this.onScroll}\n role=${this.listRole}\n .selects=${this.selects}\n .selected=${this.value ? [this.value] : []}\n size=${this.size}\n @sp-menu-item-added-or-updated=${this.shouldManageSelection}\n >\n <slot @slotchange=${this.shouldScheduleManageSelection}></slot>\n </sp-menu>\n `;\n this.hasRenderedOverlay =\n this.hasRenderedOverlay ||\n this.focused ||\n this.open ||\n !!this.deprecatedMenu;\n if (this.hasRenderedOverlay) {\n if (this.dependencyManager.loaded) {\n this.dependencyManager.add('sp-overlay');\n }\n return this.renderOverlay(menu);\n }\n return menu;\n }\n\n private willManageSelection = false;\n\n protected shouldScheduleManageSelection(event?: Event): void {\n if (\n !this.willManageSelection &&\n (!event ||\n ((event.target as HTMLElement).getRootNode() as ShadowRoot)\n .host === this)\n ) {\n this.willManageSelection = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.manageSelection();\n });\n });\n }\n }\n\n protected shouldManageSelection(): void {\n if (this.willManageSelection) {\n return;\n }\n this.willManageSelection = true;\n this.manageSelection();\n }\n\n protected async manageSelection(): Promise<void> {\n if (this.selects == null) return;\n\n this.selectionPromise = new Promise(\n (res) => (this.selectionResolver = res)\n );\n let selectedItem: MenuItem | undefined;\n await this.optionsMenu.updateComplete;\n if (this.recentlyConnected) {\n // Work around for attach timing differences in Safari and Firefox.\n // Remove when refactoring to Menu passthrough wrapper.\n await new Promise((res) => requestAnimationFrame(() => res(true)));\n this.recentlyConnected = false;\n }\n this.menuItems.forEach((item) => {\n if (this.value === item.value && !item.disabled) {\n selectedItem = item;\n } else {\n item.selected = false;\n }\n });\n if (selectedItem) {\n selectedItem.selected = !!this.selects;\n this.selectedItem = selectedItem;\n } else {\n this.value = '';\n this.selectedItem = undefined;\n }\n if (this.open) {\n await this.optionsMenu.updateComplete;\n this.optionsMenu.updateSelectedItemIndex();\n }\n this.selectionResolver();\n this.willManageSelection = false;\n }\n\n private selectionPromise = Promise.resolve();\n private selectionResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.selectionPromise;\n // if (this.overlayElement) {\n // await this.overlayElement.updateComplete;\n // }\n return complete;\n }\n\n private recentlyConnected = false;\n\n private enterKeydownOn: EventTarget | null = null;\n\n protected handleEnterKeydown = (event: KeyboardEvent): void => {\n if (event.code !== 'Enter') {\n return;\n }\n\n if (this.enterKeydownOn) {\n event.preventDefault();\n return;\n }\n this.enterKeydownOn = event.target;\n this.addEventListener(\n 'keyup',\n async (keyupEvent: KeyboardEvent) => {\n if (keyupEvent.code !== 'Enter') {\n return;\n }\n this.enterKeydownOn = null;\n },\n { once: true }\n );\n };\n\n public bindEvents(): void {\n this.strategy?.abort();\n if (this.isMobile.matches) {\n this.strategy = new strategies['mobile'](this.button, this);\n } else {\n this.strategy = new strategies['desktop'](this.button, this);\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.recentlyConnected = this.hasUpdated;\n }\n\n public override disconnectedCallback(): void {\n this.close();\n this.strategy?.releaseDescription();\n super.disconnectedCallback();\n }\n}\n\n/**\n * @element sp-picker\n *\n * @slot label - The placeholder content for the Picker\n * @slot description - The description content for the Picker\n * @slot tooltip - Tooltip to to be applied to the the Picker Button\n * @slot - menu items to be listed in the Picker\n * @fires change - Announces that the `value` of the element has changed\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class Picker extends PickerBase {\n public static override get styles(): CSSResultArray {\n return [pickerStyles, chevronStyles, chevronIconOverrides];\n }\n\n protected override get containerStyles(): StyleInfo {\n const styles = super.containerStyles;\n if (!this.quiet) {\n styles['min-width'] = `${this.offsetWidth}px`;\n }\n return styles;\n }\n\n protected override handleKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n this.focused = true;\n if (!code.startsWith('Arrow') || this.readonly || this.pending) {\n return;\n }\n if (code === 'ArrowUp' || code === 'ArrowDown') {\n this.toggle(true);\n event.preventDefault();\n return;\n }\n event.preventDefault();\n const selectedIndex = this.selectedItem\n ? this.menuItems.indexOf(this.selectedItem)\n : -1;\n // use a positive offset to find the first non-disabled item when no selection is available.\n const nextOffset = selectedIndex < 0 || code === 'ArrowRight' ? 1 : -1;\n let nextIndex = selectedIndex + nextOffset;\n while (\n this.menuItems[nextIndex] &&\n this.menuItems[nextIndex].disabled\n ) {\n nextIndex += nextOffset;\n }\n if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {\n return;\n }\n if (!this.value || nextIndex !== selectedIndex) {\n this.setValueFromItem(this.menuItems[nextIndex]);\n }\n };\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["html", "nothing", "render", "SizedMixin", "classMap", "ifDefined", "styleMap", "property", "query", "state", "pickerStyles", "chevronStyles", "chevronIconOverrides", "Focusable", "IS_MOBILE", "MatchMediaController", "DependencyManagerController", "PendingStateController", "strategies", "chevronClass", "event", "_event", "value", "labelElement", "keyupEvent", "selectedItem", "oldSelectedItem", "options", "target", "selected", "_a", "item", "menuChangeEvent", "oldValue", "selectedItemContent", "oldContent", "content", "labelClasses", "appliedLabel", "menu", "_b", "_c", "container", "changes", "accessibleMenu", "res", "complete", "__decorateClass", "code", "selectedIndex", "nextOffset", "nextIndex", "styles"]
|
|
7
|
+
}
|
package/src/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Picker.js';
|
package/src/index.dev.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["index.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\nexport * from './Picker.dev.js'\n"],
|
|
5
|
+
"mappings": ";AAYA,cAAc;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/src/index.js
ADDED
package/src/index.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["index.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\nexport * from './Picker.js';\n"],
|
|
5
|
+
"mappings": "aAYA,WAAc",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { css } from "@spectrum-web-components/base";
|
|
3
|
+
const styles = css`
|
|
4
|
+
:host{--spectrum-picker-background-color-default:var(--system-picker-background-color-default);--spectrum-picker-background-color-default-open:var(--system-picker-background-color-default-open);--spectrum-picker-background-color-active:var(--system-picker-background-color-active);--spectrum-picker-background-color-hover:var(--system-picker-background-color-hover);--spectrum-picker-background-color-hover-open:var(--system-picker-background-color-hover-open);--spectrum-picker-background-color-key-focus:var(--system-picker-background-color-key-focus);--spectrum-picker-border-color-default:var(--system-picker-border-color-default);--spectrum-picker-border-color-default-open:var(--system-picker-border-color-default-open);--spectrum-picker-border-color-hover:var(--system-picker-border-color-hover);--spectrum-picker-border-color-hover-open:var(--system-picker-border-color-hover-open);--spectrum-picker-border-color-active:var(--system-picker-border-color-active);--spectrum-picker-border-color-key-focus:var(--system-picker-border-color-key-focus);--spectrum-picker-border-width:var(--system-picker-border-width);--spectrum-picker-font-size:var(--system-picker-font-size);--spectrum-picker-font-weight:var(--system-picker-font-weight);--spectrum-picker-placeholder-font-style:var(--system-picker-placeholder-font-style);--spectrum-picker-line-height:var(--system-picker-line-height);--spectrum-picker-block-size:var(--system-picker-block-size);--spectrum-picker-inline-size:var(--system-picker-inline-size);--spectrum-picker-border-radius:var(--system-picker-border-radius);--spectrum-picker-spacing-top-to-text:var(--system-picker-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-spacing-edge-to-text);--spectrum-picker-spacing-edge-to-text-quiet:var(--system-picker-spacing-edge-to-text-quiet);--spectrum-picker-spacing-label-to-picker:var(--system-picker-spacing-label-to);--spectrum-picker-spacing-text-to-icon:var(--system-picker-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-spacing-edge-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(--system-picker-spacing-edge-to-disclosure-icon-quiet);--spectrum-picker-animation-duration:var(--system-picker-animation-duration);--spectrum-picker-font-color-default:var(--system-picker-font-color-default);--spectrum-picker-font-color-default-open:var(--system-picker-font-color-default-open);--spectrum-picker-font-color-hover:var(--system-picker-font-color-hover);--spectrum-picker-font-color-hover-open:var(--system-picker-font-color-hover-open);--spectrum-picker-font-color-active:var(--system-picker-font-color-active);--spectrum-picker-font-color-key-focus:var(--system-picker-font-color-key-focus);--spectrum-picker-icon-color-default:var(--system-picker-icon-color-default);--spectrum-picker-icon-color-default-open:var(--system-picker-icon-color-default-open);--spectrum-picker-icon-color-hover:var(--system-picker-icon-color-hover);--spectrum-picker-icon-color-hover-open:var(--system-picker-icon-color-hover-open);--spectrum-picker-icon-color-active:var(--system-picker-icon-color-active);--spectrum-picker-icon-color-key-focus:var(--system-picker-icon-color-key-focus);--spectrum-picker-border-color-error-default:var(--system-picker-border-color-error-default);--spectrum-picker-border-color-error-default-open:var(--system-picker-border-color-error-default-open);--spectrum-picker-border-color-error-hover:var(--system-picker-border-color-error-hover);--spectrum-picker-border-color-error-hover-open:var(--system-picker-border-color-error-hover-open);--spectrum-picker-border-color-error-active:var(--system-picker-border-color-error-active);--spectrum-picker-border-color-error-key-focus:var(--system-picker-border-color-error-key-focus);--spectrum-picker-icon-color-error:var(--system-picker-icon-color-error);--spectrum-picker-background-color-disabled:var(--system-picker-background-color-disabled);--spectrum-picker-font-color-disabled:var(--system-picker-font-color-disabled);--spectrum-picker-icon-color-disabled:var(--system-picker-icon-color-disabled);--spectrum-picker-focus-indicator-gap:var(--system-picker-focus-indicator-gap);--spectrum-picker-focus-indicator-thickness:var(--system-picker-focus-indicator-thickness);--spectrum-picker-focus-indicator-color:var(--system-picker-focus-indicator-color)}:host([size=s]){--spectrum-picker-font-size:var(--system-picker-size-s-font-size);--spectrum-picker-block-size:var(--system-picker-size-s-block-size);--spectrum-picker-spacing-top-to-text:var(--system-picker-size-s-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-size-s-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-size-s-spacing-edge-to-text);--spectrum-picker-spacing-text-to-icon:var(--system-picker-size-s-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-size-s-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-size-s-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-size-s-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-size-s-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-size-s-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-size-s-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-size-s-spacing-edge-to-disclosure-icon)}:host([size=l]){--spectrum-picker-font-size:var(--system-picker-size-l-font-size);--spectrum-picker-block-size:var(--system-picker-size-l-block-size);--spectrum-picker-spacing-top-to-text:var(--system-picker-size-l-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-size-l-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-size-l-spacing-edge-to-text);--spectrum-picker-spacing-text-to-icon:var(--system-picker-size-l-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-size-l-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-size-l-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-size-l-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-size-l-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-size-l-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-size-l-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-size-l-spacing-edge-to-disclosure-icon)}:host([size=xl]){--spectrum-picker-font-size:var(--system-picker-size-xl-font-size);--spectrum-picker-block-size:var(--system-picker-size-xl-block-size);--spectrum-picker-spacing-top-to-text:var(--system-picker-size-xl-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-size-xl-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-size-xl-spacing-edge-to-text);--spectrum-picker-spacing-text-to-icon:var(--system-picker-size-xl-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-size-xl-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-size-xl-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-size-xl-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-size-xl-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-size-xl-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-size-xl-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-size-xl-spacing-edge-to-disclosure-icon)}
|
|
5
|
+
`;
|
|
6
|
+
export default styles;
|
|
7
|
+
//# sourceMappingURL=picker-overrides.css.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["picker-overrides.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2025 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 :host{--spectrum-picker-background-color-default:var(--system-picker-background-color-default);--spectrum-picker-background-color-default-open:var(--system-picker-background-color-default-open);--spectrum-picker-background-color-active:var(--system-picker-background-color-active);--spectrum-picker-background-color-hover:var(--system-picker-background-color-hover);--spectrum-picker-background-color-hover-open:var(--system-picker-background-color-hover-open);--spectrum-picker-background-color-key-focus:var(--system-picker-background-color-key-focus);--spectrum-picker-border-color-default:var(--system-picker-border-color-default);--spectrum-picker-border-color-default-open:var(--system-picker-border-color-default-open);--spectrum-picker-border-color-hover:var(--system-picker-border-color-hover);--spectrum-picker-border-color-hover-open:var(--system-picker-border-color-hover-open);--spectrum-picker-border-color-active:var(--system-picker-border-color-active);--spectrum-picker-border-color-key-focus:var(--system-picker-border-color-key-focus);--spectrum-picker-border-width:var(--system-picker-border-width);--spectrum-picker-font-size:var(--system-picker-font-size);--spectrum-picker-font-weight:var(--system-picker-font-weight);--spectrum-picker-placeholder-font-style:var(--system-picker-placeholder-font-style);--spectrum-picker-line-height:var(--system-picker-line-height);--spectrum-picker-block-size:var(--system-picker-block-size);--spectrum-picker-inline-size:var(--system-picker-inline-size);--spectrum-picker-border-radius:var(--system-picker-border-radius);--spectrum-picker-spacing-top-to-text:var(--system-picker-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-spacing-edge-to-text);--spectrum-picker-spacing-edge-to-text-quiet:var(--system-picker-spacing-edge-to-text-quiet);--spectrum-picker-spacing-label-to-picker:var(--system-picker-spacing-label-to);--spectrum-picker-spacing-text-to-icon:var(--system-picker-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-spacing-edge-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(--system-picker-spacing-edge-to-disclosure-icon-quiet);--spectrum-picker-animation-duration:var(--system-picker-animation-duration);--spectrum-picker-font-color-default:var(--system-picker-font-color-default);--spectrum-picker-font-color-default-open:var(--system-picker-font-color-default-open);--spectrum-picker-font-color-hover:var(--system-picker-font-color-hover);--spectrum-picker-font-color-hover-open:var(--system-picker-font-color-hover-open);--spectrum-picker-font-color-active:var(--system-picker-font-color-active);--spectrum-picker-font-color-key-focus:var(--system-picker-font-color-key-focus);--spectrum-picker-icon-color-default:var(--system-picker-icon-color-default);--spectrum-picker-icon-color-default-open:var(--system-picker-icon-color-default-open);--spectrum-picker-icon-color-hover:var(--system-picker-icon-color-hover);--spectrum-picker-icon-color-hover-open:var(--system-picker-icon-color-hover-open);--spectrum-picker-icon-color-active:var(--system-picker-icon-color-active);--spectrum-picker-icon-color-key-focus:var(--system-picker-icon-color-key-focus);--spectrum-picker-border-color-error-default:var(--system-picker-border-color-error-default);--spectrum-picker-border-color-error-default-open:var(--system-picker-border-color-error-default-open);--spectrum-picker-border-color-error-hover:var(--system-picker-border-color-error-hover);--spectrum-picker-border-color-error-hover-open:var(--system-picker-border-color-error-hover-open);--spectrum-picker-border-color-error-active:var(--system-picker-border-color-error-active);--spectrum-picker-border-color-error-key-focus:var(--system-picker-border-color-error-key-focus);--spectrum-picker-icon-color-error:var(--system-picker-icon-color-error);--spectrum-picker-background-color-disabled:var(--system-picker-background-color-disabled);--spectrum-picker-font-color-disabled:var(--system-picker-font-color-disabled);--spectrum-picker-icon-color-disabled:var(--system-picker-icon-color-disabled);--spectrum-picker-focus-indicator-gap:var(--system-picker-focus-indicator-gap);--spectrum-picker-focus-indicator-thickness:var(--system-picker-focus-indicator-thickness);--spectrum-picker-focus-indicator-color:var(--system-picker-focus-indicator-color)}:host([size=s]){--spectrum-picker-font-size:var(--system-picker-size-s-font-size);--spectrum-picker-block-size:var(--system-picker-size-s-block-size);--spectrum-picker-spacing-top-to-text:var(--system-picker-size-s-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-size-s-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-size-s-spacing-edge-to-text);--spectrum-picker-spacing-text-to-icon:var(--system-picker-size-s-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-size-s-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-size-s-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-size-s-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-size-s-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-size-s-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-size-s-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-size-s-spacing-edge-to-disclosure-icon)}:host([size=l]){--spectrum-picker-font-size:var(--system-picker-size-l-font-size);--spectrum-picker-block-size:var(--system-picker-size-l-block-size);--spectrum-picker-spacing-top-to-text:var(--system-picker-size-l-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-size-l-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-size-l-spacing-edge-to-text);--spectrum-picker-spacing-text-to-icon:var(--system-picker-size-l-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-size-l-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-size-l-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-size-l-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-size-l-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-size-l-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-size-l-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-size-l-spacing-edge-to-disclosure-icon)}:host([size=xl]){--spectrum-picker-font-size:var(--system-picker-size-xl-font-size);--spectrum-picker-block-size:var(--system-picker-size-xl-block-size);--spectrum-picker-spacing-top-to-text:var(--system-picker-size-xl-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-size-xl-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-size-xl-spacing-edge-to-text);--spectrum-picker-spacing-text-to-icon:var(--system-picker-size-xl-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-size-xl-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-size-xl-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-size-xl-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-size-xl-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-size-xl-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-size-xl-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-size-xl-spacing-edge-to-disclosure-icon)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
"use strict";import{css as e}from"@spectrum-web-components/base";const r=e`
|
|
2
|
+
:host{--spectrum-picker-background-color-default:var(--system-picker-background-color-default);--spectrum-picker-background-color-default-open:var(--system-picker-background-color-default-open);--spectrum-picker-background-color-active:var(--system-picker-background-color-active);--spectrum-picker-background-color-hover:var(--system-picker-background-color-hover);--spectrum-picker-background-color-hover-open:var(--system-picker-background-color-hover-open);--spectrum-picker-background-color-key-focus:var(--system-picker-background-color-key-focus);--spectrum-picker-border-color-default:var(--system-picker-border-color-default);--spectrum-picker-border-color-default-open:var(--system-picker-border-color-default-open);--spectrum-picker-border-color-hover:var(--system-picker-border-color-hover);--spectrum-picker-border-color-hover-open:var(--system-picker-border-color-hover-open);--spectrum-picker-border-color-active:var(--system-picker-border-color-active);--spectrum-picker-border-color-key-focus:var(--system-picker-border-color-key-focus);--spectrum-picker-border-width:var(--system-picker-border-width);--spectrum-picker-font-size:var(--system-picker-font-size);--spectrum-picker-font-weight:var(--system-picker-font-weight);--spectrum-picker-placeholder-font-style:var(--system-picker-placeholder-font-style);--spectrum-picker-line-height:var(--system-picker-line-height);--spectrum-picker-block-size:var(--system-picker-block-size);--spectrum-picker-inline-size:var(--system-picker-inline-size);--spectrum-picker-border-radius:var(--system-picker-border-radius);--spectrum-picker-spacing-top-to-text:var(--system-picker-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-spacing-edge-to-text);--spectrum-picker-spacing-edge-to-text-quiet:var(--system-picker-spacing-edge-to-text-quiet);--spectrum-picker-spacing-label-to-picker:var(--system-picker-spacing-label-to);--spectrum-picker-spacing-text-to-icon:var(--system-picker-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-spacing-edge-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(--system-picker-spacing-edge-to-disclosure-icon-quiet);--spectrum-picker-animation-duration:var(--system-picker-animation-duration);--spectrum-picker-font-color-default:var(--system-picker-font-color-default);--spectrum-picker-font-color-default-open:var(--system-picker-font-color-default-open);--spectrum-picker-font-color-hover:var(--system-picker-font-color-hover);--spectrum-picker-font-color-hover-open:var(--system-picker-font-color-hover-open);--spectrum-picker-font-color-active:var(--system-picker-font-color-active);--spectrum-picker-font-color-key-focus:var(--system-picker-font-color-key-focus);--spectrum-picker-icon-color-default:var(--system-picker-icon-color-default);--spectrum-picker-icon-color-default-open:var(--system-picker-icon-color-default-open);--spectrum-picker-icon-color-hover:var(--system-picker-icon-color-hover);--spectrum-picker-icon-color-hover-open:var(--system-picker-icon-color-hover-open);--spectrum-picker-icon-color-active:var(--system-picker-icon-color-active);--spectrum-picker-icon-color-key-focus:var(--system-picker-icon-color-key-focus);--spectrum-picker-border-color-error-default:var(--system-picker-border-color-error-default);--spectrum-picker-border-color-error-default-open:var(--system-picker-border-color-error-default-open);--spectrum-picker-border-color-error-hover:var(--system-picker-border-color-error-hover);--spectrum-picker-border-color-error-hover-open:var(--system-picker-border-color-error-hover-open);--spectrum-picker-border-color-error-active:var(--system-picker-border-color-error-active);--spectrum-picker-border-color-error-key-focus:var(--system-picker-border-color-error-key-focus);--spectrum-picker-icon-color-error:var(--system-picker-icon-color-error);--spectrum-picker-background-color-disabled:var(--system-picker-background-color-disabled);--spectrum-picker-font-color-disabled:var(--system-picker-font-color-disabled);--spectrum-picker-icon-color-disabled:var(--system-picker-icon-color-disabled);--spectrum-picker-focus-indicator-gap:var(--system-picker-focus-indicator-gap);--spectrum-picker-focus-indicator-thickness:var(--system-picker-focus-indicator-thickness);--spectrum-picker-focus-indicator-color:var(--system-picker-focus-indicator-color)}:host([size=s]){--spectrum-picker-font-size:var(--system-picker-size-s-font-size);--spectrum-picker-block-size:var(--system-picker-size-s-block-size);--spectrum-picker-spacing-top-to-text:var(--system-picker-size-s-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-size-s-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-size-s-spacing-edge-to-text);--spectrum-picker-spacing-text-to-icon:var(--system-picker-size-s-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-size-s-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-size-s-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-size-s-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-size-s-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-size-s-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-size-s-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-size-s-spacing-edge-to-disclosure-icon)}:host([size=l]){--spectrum-picker-font-size:var(--system-picker-size-l-font-size);--spectrum-picker-block-size:var(--system-picker-size-l-block-size);--spectrum-picker-spacing-top-to-text:var(--system-picker-size-l-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-size-l-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-size-l-spacing-edge-to-text);--spectrum-picker-spacing-text-to-icon:var(--system-picker-size-l-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-size-l-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-size-l-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-size-l-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-size-l-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-size-l-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-size-l-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-size-l-spacing-edge-to-disclosure-icon)}:host([size=xl]){--spectrum-picker-font-size:var(--system-picker-size-xl-font-size);--spectrum-picker-block-size:var(--system-picker-size-xl-block-size);--spectrum-picker-spacing-top-to-text:var(--system-picker-size-xl-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-size-xl-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-size-xl-spacing-edge-to-text);--spectrum-picker-spacing-text-to-icon:var(--system-picker-size-xl-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-size-xl-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-size-xl-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-size-xl-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-size-xl-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-size-xl-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-size-xl-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-size-xl-spacing-edge-to-disclosure-icon)}
|
|
3
|
+
`;export default r;
|
|
4
|
+
//# sourceMappingURL=picker-overrides.css.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["picker-overrides.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2025 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 :host{--spectrum-picker-background-color-default:var(--system-picker-background-color-default);--spectrum-picker-background-color-default-open:var(--system-picker-background-color-default-open);--spectrum-picker-background-color-active:var(--system-picker-background-color-active);--spectrum-picker-background-color-hover:var(--system-picker-background-color-hover);--spectrum-picker-background-color-hover-open:var(--system-picker-background-color-hover-open);--spectrum-picker-background-color-key-focus:var(--system-picker-background-color-key-focus);--spectrum-picker-border-color-default:var(--system-picker-border-color-default);--spectrum-picker-border-color-default-open:var(--system-picker-border-color-default-open);--spectrum-picker-border-color-hover:var(--system-picker-border-color-hover);--spectrum-picker-border-color-hover-open:var(--system-picker-border-color-hover-open);--spectrum-picker-border-color-active:var(--system-picker-border-color-active);--spectrum-picker-border-color-key-focus:var(--system-picker-border-color-key-focus);--spectrum-picker-border-width:var(--system-picker-border-width);--spectrum-picker-font-size:var(--system-picker-font-size);--spectrum-picker-font-weight:var(--system-picker-font-weight);--spectrum-picker-placeholder-font-style:var(--system-picker-placeholder-font-style);--spectrum-picker-line-height:var(--system-picker-line-height);--spectrum-picker-block-size:var(--system-picker-block-size);--spectrum-picker-inline-size:var(--system-picker-inline-size);--spectrum-picker-border-radius:var(--system-picker-border-radius);--spectrum-picker-spacing-top-to-text:var(--system-picker-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-spacing-edge-to-text);--spectrum-picker-spacing-edge-to-text-quiet:var(--system-picker-spacing-edge-to-text-quiet);--spectrum-picker-spacing-label-to-picker:var(--system-picker-spacing-label-to);--spectrum-picker-spacing-text-to-icon:var(--system-picker-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-spacing-edge-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(--system-picker-spacing-edge-to-disclosure-icon-quiet);--spectrum-picker-animation-duration:var(--system-picker-animation-duration);--spectrum-picker-font-color-default:var(--system-picker-font-color-default);--spectrum-picker-font-color-default-open:var(--system-picker-font-color-default-open);--spectrum-picker-font-color-hover:var(--system-picker-font-color-hover);--spectrum-picker-font-color-hover-open:var(--system-picker-font-color-hover-open);--spectrum-picker-font-color-active:var(--system-picker-font-color-active);--spectrum-picker-font-color-key-focus:var(--system-picker-font-color-key-focus);--spectrum-picker-icon-color-default:var(--system-picker-icon-color-default);--spectrum-picker-icon-color-default-open:var(--system-picker-icon-color-default-open);--spectrum-picker-icon-color-hover:var(--system-picker-icon-color-hover);--spectrum-picker-icon-color-hover-open:var(--system-picker-icon-color-hover-open);--spectrum-picker-icon-color-active:var(--system-picker-icon-color-active);--spectrum-picker-icon-color-key-focus:var(--system-picker-icon-color-key-focus);--spectrum-picker-border-color-error-default:var(--system-picker-border-color-error-default);--spectrum-picker-border-color-error-default-open:var(--system-picker-border-color-error-default-open);--spectrum-picker-border-color-error-hover:var(--system-picker-border-color-error-hover);--spectrum-picker-border-color-error-hover-open:var(--system-picker-border-color-error-hover-open);--spectrum-picker-border-color-error-active:var(--system-picker-border-color-error-active);--spectrum-picker-border-color-error-key-focus:var(--system-picker-border-color-error-key-focus);--spectrum-picker-icon-color-error:var(--system-picker-icon-color-error);--spectrum-picker-background-color-disabled:var(--system-picker-background-color-disabled);--spectrum-picker-font-color-disabled:var(--system-picker-font-color-disabled);--spectrum-picker-icon-color-disabled:var(--system-picker-icon-color-disabled);--spectrum-picker-focus-indicator-gap:var(--system-picker-focus-indicator-gap);--spectrum-picker-focus-indicator-thickness:var(--system-picker-focus-indicator-thickness);--spectrum-picker-focus-indicator-color:var(--system-picker-focus-indicator-color)}:host([size=s]){--spectrum-picker-font-size:var(--system-picker-size-s-font-size);--spectrum-picker-block-size:var(--system-picker-size-s-block-size);--spectrum-picker-spacing-top-to-text:var(--system-picker-size-s-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-size-s-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-size-s-spacing-edge-to-text);--spectrum-picker-spacing-text-to-icon:var(--system-picker-size-s-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-size-s-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-size-s-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-size-s-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-size-s-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-size-s-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-size-s-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-size-s-spacing-edge-to-disclosure-icon)}:host([size=l]){--spectrum-picker-font-size:var(--system-picker-size-l-font-size);--spectrum-picker-block-size:var(--system-picker-size-l-block-size);--spectrum-picker-spacing-top-to-text:var(--system-picker-size-l-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-size-l-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-size-l-spacing-edge-to-text);--spectrum-picker-spacing-text-to-icon:var(--system-picker-size-l-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-size-l-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-size-l-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-size-l-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-size-l-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-size-l-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-size-l-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-size-l-spacing-edge-to-disclosure-icon)}:host([size=xl]){--spectrum-picker-font-size:var(--system-picker-size-xl-font-size);--spectrum-picker-block-size:var(--system-picker-size-xl-block-size);--spectrum-picker-spacing-top-to-text:var(--system-picker-size-xl-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-size-xl-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-size-xl-spacing-edge-to-text);--spectrum-picker-spacing-text-to-icon:var(--system-picker-size-xl-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-size-xl-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-size-xl-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-size-xl-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-size-xl-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-size-xl-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-size-xl-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-size-xl-spacing-edge-to-disclosure-icon)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
|
+
"names": ["css", "styles"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { css } from "@spectrum-web-components/base";
|
|
3
|
+
const styles = css`
|
|
4
|
+
#button{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--mod-button-font-family,var(--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--mod-button-line-height,var(--mod-line-height-100,var(--spectrum-line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,border-color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,box-shadow var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative;overflow:visible}#button::-moz-focus-inner{border-style:none;padding:0}#button:focus{outline:none}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:Highlight;--highcontrast-picker-border-color-default:ButtonBorder;--highcontrast-picker-border-color-hover:Highlight;--highcontrast-picker-border-color-disabled:GrayText;--highcontrast-picker-content-color-default:ButtonText;--highcontrast-picker-content-color-disabled:GrayText;--highcontrast-picker-background-color:ButtonFace}#button.is-keyboardFocused,#button:focus-visible{--highcontrast-picker-border-color-hover:ButtonText}#button .label,#button:after{forced-color-adjust:none}}#button{box-sizing:border-box;max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size,var(--spectrum-picker-block-size)));inline-size:var(--mod-picker-inline-size,var(--spectrum-picker-inline-size));block-size:var(--mod-picker-block-size,var(--spectrum-picker-block-size));border-width:var(--mod-picker-border-width,var(--spectrum-picker-border-width));border-radius:var(--mod-picker-border-radius,var(--spectrum-picker-border-radius));transition:background-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),box-shadow var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),border-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)));border-style:solid;border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-default,var(--spectrum-picker-border-color-default)));margin-block-start:var(--mod-picker-spacing-label-to-picker,var(--spectrum-picker-spacing-label-to-picker));padding-block:0;padding-inline-start:var(--mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text));padding-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon));display:flex}#button:after{pointer-events:none;content:"";block-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);inline-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);border-style:solid;border-width:var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness));border-radius:calc(var(--mod-picker-border-radius,var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)));border-color:#0000;margin-block-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);margin-inline-start:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);position:absolute;inset-block:0;inset-inline:0}#button:active{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-active,var(--spectrum-picker-background-color-active)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-active,var(--spectrum-picker-border-color-active)))}#button:active:after{border-color:#0000}#button.placeholder:active .label{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}#button.is-keyboardFocused,#button:focus-visible{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)));outline:none}#button.is-keyboardFocused:after,#button:focus-visible:after{border-color:var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)))}#button.is-keyboardFocused.placeholder,#button.placeholder:focus-visible{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)))}#button.is-keyboardFocused .picker,#button:focus-visible .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled){color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default-open,var(--spectrum-picker-font-color-default-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default-open,var(--spectrum-picker-background-color-default-open)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-default-open,var(--spectrum-picker-border-color-default-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled) .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default-open,var(--spectrum-picker-icon-color-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default,var(--spectrum-picker-border-color-error-default)))}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-error,var(--spectrum-picker-icon-color-error)))}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-active,var(--spectrum-picker-border-color-error-active)))}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default-open,var(--spectrum-picker-border-color-error-default-open)))}:host([invalid]) #button.is-keyboardFocused:not(:disabled,.is-disabled),:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)))}:host([pending]) #button .picker{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([invalid]) #button .label,:host([pending]) #button .label{margin-inline-end:var(--mod-picker-spacing-text-to-icon-inline-end,var(--mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-icon-inline-end)))}.icon{flex-shrink:0;margin-inline-end:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}.label{white-space:nowrap;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));line-height:var(--mod-picker-line-height,var(--spectrum-picker-line-height));font-weight:var(--mod-picker-font-weight,var(--spectrum-picker-font-weight));text-overflow:ellipsis;text-align:start;flex:auto;padding-block-start:var(--mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text));padding-block-end:calc(var(--mod-picker-spacing-bottom-to-text,var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));overflow:hidden}.label.placeholder{font-weight:var(--mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight));font-style:var(--mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style));transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)))}.label.placeholder:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}.picker{vertical-align:top;transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-out;margin-inline-start:var(--mod-picker-spacing-icon-to-disclosure-icon,var(--spectrum-picker-spacing-icon-to-disclosure-icon));margin-block:var(--mod-picker-spacing-top-to-disclosure-icon,var(--spectrum-picker-spacing-top-to-disclosure-icon));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default,var(--spectrum-picker-icon-color-default)));flex-shrink:0;display:inline-block;position:relative}.picker:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-active,var(--spectrum-picker-icon-color-active)))}.validation-icon{margin-block-start:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}#button .progress-circle{margin-block-start:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}.label~.picker{margin-inline-start:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}:host([quiet]) #button{inline-size:auto;min-inline-size:0;padding-inline:var(--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent);border:none;border-radius:0;margin-block-start:calc(var(--mod-picker-spacing-label-to-picker-quiet,var(--spectrum-picker-spacing-label-to-picker-quiet)) + 1px)}:host([quiet]) #button.label-inline{margin-block-start:0}:host([quiet]) #button .picker{margin-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet))}:host([quiet]) #button:after{block-size:auto;inline-size:auto;border:none}@media (hover:hover){#button:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)))}#button:hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)))}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)))}.label.placeholder:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)))}:host([quiet]) #button:hover{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}}:host([quiet]) #button.is-keyboardFocused,:host([quiet]) #button:focus-visible{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button.is-keyboardFocused:after,:host([quiet]) #button:focus-visible:after{box-shadow:0 var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness))0 0 var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)));margin:calc(( var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1)0;border:none;border-radius:0}:host([quiet][open]) #button,:host([quiet][disabled]) #button#button,:host([quiet]) #button#button:disabled,:host([quiet]) #button:active{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}.label-inline{vertical-align:top;display:inline-flex}:host([disabled]) #button,#button:disabled{cursor:default;background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-disabled,var(--spectrum-picker-background-color-disabled)));border-color:#0000;border-color:var(--highcontrast-picker-border-color-disabled,transparent);color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon,#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([disabled]) #button .label.placeholder,#button:disabled .label.placeholder{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}:host{--spectrum-picker-background-color-default:var(--system-picker-background-color-default);--spectrum-picker-background-color-default-open:var(--system-picker-background-color-default-open);--spectrum-picker-background-color-active:var(--system-picker-background-color-active);--spectrum-picker-background-color-hover:var(--system-picker-background-color-hover);--spectrum-picker-background-color-hover-open:var(--system-picker-background-color-hover-open);--spectrum-picker-background-color-key-focus:var(--system-picker-background-color-key-focus);--spectrum-picker-border-color-default:var(--system-picker-border-color-default);--spectrum-picker-border-color-default-open:var(--system-picker-border-color-default-open);--spectrum-picker-border-color-hover:var(--system-picker-border-color-hover);--spectrum-picker-border-color-hover-open:var(--system-picker-border-color-hover-open);--spectrum-picker-border-color-active:var(--system-picker-border-color-active);--spectrum-picker-border-color-key-focus:var(--system-picker-border-color-key-focus);--spectrum-picker-border-width:var(--system-picker-border-width);--spectrum-picker-font-size:var(--system-picker-font-size);--spectrum-picker-font-weight:var(--system-picker-font-weight);--spectrum-picker-placeholder-font-style:var(--system-picker-placeholder-font-style);--spectrum-picker-line-height:var(--system-picker-line-height);--spectrum-picker-block-size:var(--system-picker-block-size);--spectrum-picker-inline-size:var(--system-picker-inline-size);--spectrum-picker-border-radius:var(--system-picker-border-radius);--spectrum-picker-spacing-top-to-text:var(--system-picker-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-spacing-edge-to-text);--spectrum-picker-spacing-edge-to-text-quiet:var(--system-picker-spacing-edge-to-text-quiet);--spectrum-picker-spacing-label-to-picker:var(--system-picker-spacing-label-to);--spectrum-picker-spacing-text-to-icon:var(--system-picker-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-spacing-edge-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(--system-picker-spacing-edge-to-disclosure-icon-quiet);--spectrum-picker-animation-duration:var(--system-picker-animation-duration);--spectrum-picker-font-color-default:var(--system-picker-font-color-default);--spectrum-picker-font-color-default-open:var(--system-picker-font-color-default-open);--spectrum-picker-font-color-hover:var(--system-picker-font-color-hover);--spectrum-picker-font-color-hover-open:var(--system-picker-font-color-hover-open);--spectrum-picker-font-color-active:var(--system-picker-font-color-active);--spectrum-picker-font-color-key-focus:var(--system-picker-font-color-key-focus);--spectrum-picker-icon-color-default:var(--system-picker-icon-color-default);--spectrum-picker-icon-color-default-open:var(--system-picker-icon-color-default-open);--spectrum-picker-icon-color-hover:var(--system-picker-icon-color-hover);--spectrum-picker-icon-color-hover-open:var(--system-picker-icon-color-hover-open);--spectrum-picker-icon-color-active:var(--system-picker-icon-color-active);--spectrum-picker-icon-color-key-focus:var(--system-picker-icon-color-key-focus);--spectrum-picker-border-color-error-default:var(--system-picker-border-color-error-default);--spectrum-picker-border-color-error-default-open:var(--system-picker-border-color-error-default-open);--spectrum-picker-border-color-error-hover:var(--system-picker-border-color-error-hover);--spectrum-picker-border-color-error-hover-open:var(--system-picker-border-color-error-hover-open);--spectrum-picker-border-color-error-active:var(--system-picker-border-color-error-active);--spectrum-picker-border-color-error-key-focus:var(--system-picker-border-color-error-key-focus);--spectrum-picker-icon-color-error:var(--system-picker-icon-color-error);--spectrum-picker-background-color-disabled:var(--system-picker-background-color-disabled);--spectrum-picker-font-color-disabled:var(--system-picker-font-color-disabled);--spectrum-picker-icon-color-disabled:var(--system-picker-icon-color-disabled);--spectrum-picker-focus-indicator-gap:var(--system-picker-focus-indicator-gap);--spectrum-picker-focus-indicator-thickness:var(--system-picker-focus-indicator-thickness);--spectrum-picker-focus-indicator-color:var(--system-picker-focus-indicator-color)}:host([size=s]){--spectrum-picker-font-size:var(--system-picker-size-s-font-size);--spectrum-picker-block-size:var(--system-picker-size-s-block-size);--spectrum-picker-spacing-top-to-text:var(--system-picker-size-s-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-size-s-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-size-s-spacing-edge-to-text);--spectrum-picker-spacing-text-to-icon:var(--system-picker-size-s-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-size-s-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-size-s-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-size-s-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-size-s-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-size-s-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-size-s-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-size-s-spacing-edge-to-disclosure-icon)}:host([size=l]){--spectrum-picker-font-size:var(--system-picker-size-l-font-size);--spectrum-picker-block-size:var(--system-picker-size-l-block-size);--spectrum-picker-spacing-top-to-text:var(--system-picker-size-l-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-size-l-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-size-l-spacing-edge-to-text);--spectrum-picker-spacing-text-to-icon:var(--system-picker-size-l-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-size-l-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-size-l-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-size-l-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-size-l-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-size-l-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-size-l-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-size-l-spacing-edge-to-disclosure-icon)}:host([size=xl]){--spectrum-picker-font-size:var(--system-picker-size-xl-font-size);--spectrum-picker-block-size:var(--system-picker-size-xl-block-size);--spectrum-picker-spacing-top-to-text:var(--system-picker-size-xl-spacing-top-to-text);--spectrum-picker-spacing-bottom-to-text:var(--system-picker-size-xl-spacing-bottom-to-text);--spectrum-picker-spacing-edge-to-text:var(--system-picker-size-xl-spacing-edge-to-text);--spectrum-picker-spacing-text-to-icon:var(--system-picker-size-xl-spacing-text-to-icon);--spectrum-picker-spacing-text-to-icon-inline-end:var(--system-picker-size-xl-spacing-text-to-icon-inline-end);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--system-picker-size-xl-spacing-icon-to-disclosure-icon);--spectrum-picker-spacing-label-to-picker-quiet:var(--system-picker-size-xl-spacing-label-to-quiet);--spectrum-picker-spacing-top-to-alert-icon:var(--system-picker-size-xl-spacing-top-to-alert-icon);--spectrum-picker-spacing-top-to-progress-circle:var(--system-picker-size-xl-spacing-top-to-progress-circle);--spectrum-picker-spacing-top-to-disclosure-icon:var(--system-picker-size-xl-spacing-top-to-disclosure-icon);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--system-picker-size-xl-spacing-edge-to-disclosure-icon)}:host{vertical-align:top;max-inline-size:100%;inline-size:var(--mod-picker-inline-size,var(--spectrum-picker-inline-size));min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size,var(--spectrum-picker-block-size)));display:inline-flex}:host([quiet]){width:auto;min-width:0}:host([disabled]){pointer-events:none}#button{width:100%;min-width:100%;max-width:100%}#icon:not([hidden]){display:inline-flex}:host([readonly]) #button{user-select:inherit}.picker,.validation-icon{flex-shrink:0}sp-overlay{pointer-events:none}sp-menu{pointer-events:initial}:host>sp-menu{display:none}:host([focused]:not([quiet])) #button #label.placeholder{color:var(--spectrum-picker-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}#label.visually-hidden~.picker{margin-inline-start:auto}:host([focused]:not([quiet],[pending])) #button .picker{color:var(--spectrum-picker-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}.visually-hidden{clip:rect(0,0,0,0);clip-path:inset(50%);height:1px;width:1px;white-space:nowrap;border:0;margin:0 -1px -1px 0;padding:0;position:absolute;overflow:hidden}sp-overlay:not(:defined){display:none}#button.remove-focus-ring-safari-hack:focus-visible{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-default,var(--spectrum-picker-border-color-default)));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)))}#button.remove-focus-ring-safari-hack:after{border:none}#button.remove-focus-ring-safari-hack:focus-visible:after{box-shadow:none}#button.remove-focus-ring-safari-hack:active{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-default,var(--spectrum-picker-border-color-default)));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)))}
|
|
5
|
+
`;
|
|
6
|
+
export default styles;
|
|
7
|
+
//# sourceMappingURL=picker.css.dev.js.map
|