@aceshooting/lyra-ui 17.0.0 → 18.1.0
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/CHANGELOG.md +483 -0
- package/README.md +2 -2
- package/custom-elements.json +1 -1
- package/design-tokens.json +1 -1
- package/dist/cli/migration-contract.json +1 -1
- package/dist/components/conversation/message-actions/message-actions.class.d.ts +2 -1
- package/dist/components/conversation/streaming-text/streaming-text-core.class.d.ts +22 -0
- package/dist/components/conversation/streaming-text/streaming-text-core.class.js +1 -0
- package/dist/components/conversation/streaming-text/streaming-text.class.d.ts +22 -0
- package/dist/components/conversation/streaming-text/streaming-text.class.js +1 -0
- package/dist/components/conversation/thread-list/thread-list.class.js +1 -1
- package/dist/components/data/table/table.styles.js +1 -1
- package/dist/components/forms/combobox/combobox.class.d.ts +12 -2
- package/dist/components/forms/combobox/combobox.class.js +2 -2
- package/dist/components/forms/combobox/combobox.styles.js +1 -1
- package/dist/components/forms/icon-button/icon-button.class.d.ts +18 -9
- package/dist/components/forms/select/select.class.d.ts +63 -8
- package/dist/components/forms/select/select.class.js +4 -4
- package/dist/components/forms/select/select.styles.js +1 -1
- package/dist/components/layout/filter-bar/filter-bar.class.d.ts +148 -14
- package/dist/components/layout/filter-bar/filter-bar.class.js +12 -4
- package/dist/components/layout/filter-bar/filter-bar.styles.js +1 -1
- package/dist/components/layout/reorder-list/reorder-list.class.js +1 -1
- package/dist/components/layout/virtual-list/virtual-list.class.d.ts +154 -18
- package/dist/components/layout/virtual-list/virtual-list.class.js +12 -7
- package/dist/components/media/map/map.class.d.ts +269 -14
- package/dist/components/media/map/map.class.js +62 -30
- package/dist/components/media/map/map.styles.js +1 -1
- package/dist/components/utility/copy-button/copy-button.class.d.ts +4 -3
- package/dist/custom-elements-jsx.d.ts +1 -1
- package/dist/events.d.ts +13 -1
- package/dist/internal/package-metadata.d.ts +1 -1
- package/dist/internal/package-metadata.js +1 -1
- package/dist/internal/tokens.styles.js +1 -1
- package/dist/lyra.d.ts +1 -1
- package/dist/lyra.js +1 -1
- package/dist/styles/tokens-root.css +1 -1
- package/dist/svelte.d.ts +1 -1
- package/dist/testing/lyra-tag-event-map.js +1 -1
- package/dist/translations/ar/retrieval.js +1 -1
- package/dist/translations/ar/shared.js +1 -1
- package/dist/translations/de/retrieval.js +1 -1
- package/dist/translations/de/shared.js +1 -1
- package/dist/translations/es/retrieval.js +1 -1
- package/dist/translations/es/shared.js +1 -1
- package/dist/translations/fa/retrieval.js +1 -1
- package/dist/translations/fa/shared.js +1 -1
- package/dist/translations/fr/retrieval.js +1 -1
- package/dist/translations/fr/shared.js +1 -1
- package/dist/translations/he/retrieval.js +1 -1
- package/dist/translations/he/shared.js +1 -1
- package/dist/translations/it/retrieval.js +1 -1
- package/dist/translations/it/shared.js +1 -1
- package/dist/translations/ja/retrieval.js +1 -1
- package/dist/translations/ja/shared.js +1 -1
- package/dist/translations/pt-BR/retrieval.js +1 -1
- package/dist/translations/pt-BR/shared.js +1 -1
- package/dist/translations/ro/agent-tools.d.ts +1 -0
- package/dist/translations/ro/agent-tools.js +1 -0
- package/dist/translations/ro/charts.d.ts +1 -0
- package/dist/translations/ro/charts.js +1 -0
- package/dist/translations/ro/conversation.d.ts +1 -0
- package/dist/translations/ro/conversation.js +1 -0
- package/dist/translations/ro/data.d.ts +1 -0
- package/dist/translations/ro/data.js +1 -0
- package/dist/translations/ro/forms.d.ts +1 -0
- package/dist/translations/ro/forms.js +1 -0
- package/dist/translations/ro/layout.d.ts +1 -0
- package/dist/translations/ro/layout.js +1 -0
- package/dist/translations/ro/media.d.ts +1 -0
- package/dist/translations/ro/media.js +1 -0
- package/dist/translations/ro/overlays.d.ts +1 -0
- package/dist/translations/ro/overlays.js +1 -0
- package/dist/translations/ro/retrieval.d.ts +1 -0
- package/dist/translations/ro/retrieval.js +1 -0
- package/dist/translations/ro/shared.d.ts +1 -0
- package/dist/translations/ro/shared.js +1 -0
- package/dist/translations/ro/utility.d.ts +1 -0
- package/dist/translations/ro/utility.js +1 -0
- package/dist/translations/ro/viewers.d.ts +1 -0
- package/dist/translations/ro/viewers.js +5 -0
- package/dist/translations/ro.d.ts +1 -0
- package/dist/translations/ro.js +1 -0
- package/dist/translations/ru/retrieval.js +1 -1
- package/dist/translations/ru/shared.js +1 -1
- package/dist/translations/zh-CN/retrieval.js +1 -1
- package/dist/translations/zh-CN/shared.js +1 -1
- package/dist/vue.d.ts +1 -1
- package/llms/components/lr-button.md +5 -4
- package/llms/components/lr-card.md +2 -1
- package/llms/components/lr-combobox.md +11 -0
- package/llms/components/lr-filter-bar.md +123 -7
- package/llms/components/lr-icon-button.md +17 -8
- package/llms/components/lr-map.md +127 -8
- package/llms/components/lr-option.md +11 -0
- package/llms/components/lr-select.md +45 -3
- package/llms/components/lr-streaming-text-core.md +7 -3
- package/llms/components/lr-streaming-text.md +7 -2
- package/llms/components/lr-virtual-list.md +53 -0
- package/llms/shared.md +47 -3
- package/llms/tokens.md +7 -4
- package/llms-full.txt +465 -36
- package/package.json +28 -2
- package/registrations.json +1 -1
- package/vscode-css-data.json +1 -1
- package/vscode-html-data.json +1 -1
- package/web-types.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{type TemplateResult,type PropertyValues}from'lit';import type{Placement}from'@floating-ui/dom';import{LyraElement,type LyraEventDetailSnapshot}from'../../../internal/lyra-element.js';import type{PlaceStrategy}from'../../../internal/positioner.js';import type{LyraPickerDetailValue,LyraPickerValue}from'../../../internal/picker-value.js';import type{LyraAppearance,LyraSize}from'../../../internal/variants.js';import type{LyraOption}from'../combobox/option.class.js';import'../combobox/option.class.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';import{type LyraFormValidator}from'../form-validator.js';
|
|
1
|
+
import{type TemplateResult,type PropertyValues}from'lit';import type{Placement}from'@floating-ui/dom';import{LyraElement,type LyraEventDetailSnapshot}from'../../../internal/lyra-element.js';import type{PlaceStrategy,PlaceSync}from'../../../internal/positioner.js';import type{LyraPickerDetailValue,LyraPickerValue}from'../../../internal/picker-value.js';import type{LyraAppearance,LyraSize}from'../../../internal/variants.js';import type{LyraOption}from'../combobox/option.class.js';import'../combobox/option.class.js';import{type FormOwnerValue}from'../../../internal/form-associated.js';import{type LyraFormValidator}from'../form-validator.js';
|
|
2
2
|
/** Re-exported so a consumer importing only the select subpath can still name the shared
|
|
3
3
|
* positioning vocabulary `positioningStrategy` uses. */
|
|
4
4
|
export type{LyraPickerDetailValue,LyraPickerValue,PlaceStrategy};
|
|
@@ -94,7 +94,12 @@ export type LyraSelectChangeEvent<Multiple extends boolean=boolean> =LyraSelectE
|
|
|
94
94
|
* matching no current option (a stale value, or a programmatic assignment with a typo) still
|
|
95
95
|
* commits rather than being dropped, but renders with a dashed/italic `[part='unknown-value']`
|
|
96
96
|
* badge instead of silently passing the raw string off as an ordinary label -- see
|
|
97
|
-
* `isUnknownValue()`.
|
|
97
|
+
* `isUnknownValue()`. Set `loading` while that same value's catalog simply hasn't arrived yet (an
|
|
98
|
+
* async fetch still in flight, say): a still-unmatched value then renders the localized `loading`
|
|
99
|
+
* placeholder instead, with no `unknown-value` badge, since it is not yet known to be missing. The
|
|
100
|
+
* same flag covers an empty selection too -- with nothing selected the trigger shows that same
|
|
101
|
+
* localized text in place of `placeholder`, so both halves of a pending state read the same words
|
|
102
|
+
* without a consumer re-localizing them.
|
|
98
103
|
*
|
|
99
104
|
* A slotted `<lr-option>`'s `start`/`end` (and the Shoelace `prefix`/`suffix` aliases) adornments
|
|
100
105
|
* are cloned into the corresponding `[part='option-start']`/`[part='option-end']` listbox row,
|
|
@@ -301,7 +306,14 @@ export declare class LyraSelect<Multiple extends boolean=boolean>extends LyraEle
|
|
|
301
306
|
* `<lr-prompt-queue>`'s `lr-queue-change` detail uses for its own `items`. */
|
|
302
307
|
protected static readonly identityEventDetailCollectionItems:Readonly<{'lr-input':readonly string[];'lr-change':readonly string[];}>;
|
|
303
308
|
/** Public WA-compatible intrinsic validator catalog. */
|
|
304
|
-
static get validators():LyraFormValidator<LyraSelect>[];static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};multiple:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};required:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};value:{noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;converter:import("lit").ComplexAttributeConverter<string,unknown>;};maxOptionsVisible:{type:NumberConstructor;attribute:string;noAccessor:boolean;};defaultValue:{attribute:string;noAccessor:boolean;};};
|
|
309
|
+
static get validators():LyraFormValidator<LyraSelect>[];static formAssociated:boolean;static styles:import("lit").CSSResultGroup[];static properties:{customError:{attribute:string;reflect:boolean;noAccessor:boolean;};multiple:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};disabled:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};required:{type:BooleanConstructor;reflect:boolean;noAccessor:boolean;};value:{noAccessor:boolean;};name:{reflect:boolean;noAccessor:boolean;converter:import("lit").ComplexAttributeConverter<string,unknown>;};maxOptionsVisible:{type:NumberConstructor;attribute:string;noAccessor:boolean;};defaultValue:{attribute:string;noAccessor:boolean;};};
|
|
310
|
+
/** Text shown on the trigger while nothing is selected. It still names the trigger when neither
|
|
311
|
+
* a host `aria-label` nor a `label` does. One exception to "an empty selection always shows
|
|
312
|
+
* this": while `loading` is `true` the trigger shows the localized `loading` text instead, so a
|
|
313
|
+
* consumer never has to re-localize that string in its own catalog to cover the empty half of a
|
|
314
|
+
* pending state -- see {@link loading}. The trigger's accessible name is unaffected either way.
|
|
315
|
+
* @default '' */
|
|
316
|
+
placeholder:string;
|
|
305
317
|
/** Visible label. A host `aria-label` wins on the internal trigger by attribute presence,
|
|
306
318
|
* including an explicitly empty value that suppresses this label's naming fallback. */
|
|
307
319
|
label:string;hint:string;
|
|
@@ -329,7 +341,20 @@ pill:boolean;
|
|
|
329
341
|
/** Preferred listbox placement. `flip`/`shift` may still override it to keep the popup in view,
|
|
330
342
|
* and the `left`/`right` component is swapped under RTL. Changes reposition an already-open
|
|
331
343
|
* listbox without closing it or changing overlay stack ownership. */
|
|
332
|
-
placement:Placement;
|
|
344
|
+
placement:Placement;
|
|
345
|
+
/**
|
|
346
|
+
* Copies the trigger's width, height, or both onto the listbox -- the same property
|
|
347
|
+
* `<lr-popup>`/`<lr-popover>`/`<lr-dropdown>`/`<lr-combobox>` spell, with the same values. Unset
|
|
348
|
+
* (the default), the listbox sizes to its own content, clamped between `--lr-size-12rem` and
|
|
349
|
+
* `--lr-size-28rem`, exactly as before. Set `sync="width"` so a full-width trigger with short
|
|
350
|
+
* option labels gets a listbox that aligns to its own edges instead of floating narrower in the
|
|
351
|
+
* middle -- the content clamp above no longer applies while this is set, since the trigger's own
|
|
352
|
+
* width is now the intentional bound. A synced listbox is still bounded by the space actually
|
|
353
|
+
* measured beside its anchor, so an over-wide trigger cannot push it off-screen. Changes
|
|
354
|
+
* reposition an already-open listbox without closing it.
|
|
355
|
+
* @default undefined
|
|
356
|
+
*/
|
|
357
|
+
sync?:PlaceSync;private _positioningStrategy?;
|
|
333
358
|
/**
|
|
334
359
|
* CSS positioning scheme the listbox is laid out with -- the one property `<lr-select>`,
|
|
335
360
|
* `<lr-dropdown>` and `<lr-popover>` all spell the same way. `absolute` (this control's mirrored
|
|
@@ -368,7 +393,8 @@ getTag?:LyraSelectTagRenderer;
|
|
|
368
393
|
* Off by default, because it adds a row to a listbox that has always rendered only real options.
|
|
369
394
|
* Turn it on wherever a stored value can outlive its catalog entry: without it, the out-of-list
|
|
370
395
|
* value is visible on the trigger but absent from the listbox, so a user who opens the listbox
|
|
371
|
-
* has no way back to the value they arrived with.
|
|
396
|
+
* has no way back to the value they arrived with. No synthetic row appears for a value `loading`
|
|
397
|
+
* is currently suppressing -- see that property -- since it is not yet known to be unmatched.
|
|
372
398
|
* @default false
|
|
373
399
|
*/
|
|
374
400
|
showUnknownOption:boolean;
|
|
@@ -380,10 +406,33 @@ showUnknownOption:boolean;
|
|
|
380
406
|
* everywhere that value's label appears -- the trigger, a `multiple` tag, and the synthetic
|
|
381
407
|
* listbox row -- and is used only while the value is genuinely unmatched, so it can never
|
|
382
408
|
* override a real option's own label. A blank return falls back to the raw value, exactly as no
|
|
383
|
-
* hook at all would. Caller-supplied text: it is not localized here.
|
|
409
|
+
* hook at all would. Caller-supplied text: it is not localized here. Not consulted while
|
|
410
|
+
* `loading` is `true` and the value is still unresolved -- see `loading` below -- because that
|
|
411
|
+
* value is not yet known to be unmatched at all.
|
|
384
412
|
*/
|
|
385
413
|
getUnknownLabel?:(value:string)=>string;
|
|
386
414
|
/**
|
|
415
|
+
* Whether a committed value's real label may still be pending -- e.g. the `<lr-option>` catalog
|
|
416
|
+
* behind it is still being fetched/mounted asynchronously and simply hasn't arrived yet. While
|
|
417
|
+
* `true`, a committed value that currently matches no option (the same condition `isUnknownValue()`
|
|
418
|
+
* tests) renders the localized `loading` placeholder in the trigger label or the relevant
|
|
419
|
+
* `multiple` tag instead of the raw value, and is not flagged with the dashed/italic
|
|
420
|
+
* `notInCatalog`/`[part='unknown-value']` badge a genuinely unmatched value gets, nor added to the
|
|
421
|
+
* synthetic `showUnknownOption` listbox row -- "not yet resolved" is a different state from "known
|
|
422
|
+
* to be missing". With nothing selected at all -- a create form whose catalog is still being
|
|
423
|
+
* fetched, or an edit form whose saved selection is legitimately empty -- the trigger shows that
|
|
424
|
+
* same localized `loading` text in place of `placeholder`, so one property covers the whole
|
|
425
|
+
* pending state rather than only its committed-value half and the two halves always read the
|
|
426
|
+
* same words. The trigger's accessible name is unchanged by this: a host `aria-label` still
|
|
427
|
+
* wins, then `label`, then `placeholder`, then the localized `select` fallback.
|
|
428
|
+
* A value that already matches a live option is unaffected either way. Reflected
|
|
429
|
+
* so `:host([loading])` is available as a styling hook. Never mutates `value`/`selectedOptions`
|
|
430
|
+
* itself, and does not itself disable the trigger -- pair it with `disabled` when the control
|
|
431
|
+
* should also be non-interactive while its catalog is pending.
|
|
432
|
+
* @default false
|
|
433
|
+
*/
|
|
434
|
+
loading:boolean;
|
|
435
|
+
/**
|
|
387
436
|
* Opt-in: when `true` and exactly one `<lr-option>` is enabled, the
|
|
388
437
|
* trigger commits that option directly (click/Enter/Space/ArrowDown/
|
|
389
438
|
* ArrowUp) instead of opening the listbox, and renders as a plain
|
|
@@ -573,13 +622,19 @@ private selectUnknownValue;
|
|
|
573
622
|
* declares it -- the shared lookup behind both `labelFor()` and `isUnknownValue()`. */
|
|
574
623
|
private resolvedLabelFor;
|
|
575
624
|
/** The label to show for one committed value: the selected occurrence's own label, else any
|
|
576
|
-
* option sharing that value, else
|
|
625
|
+
* option sharing that value, else -- while `loading` -- the localized loading placeholder, else
|
|
626
|
+
* the raw value (a programmatic write with no matching row). */
|
|
577
627
|
private labelFor;
|
|
578
628
|
/** Whether a committed value matches no currently-slotted `<lr-option>` -- a stale value from
|
|
579
629
|
* before an option was removed, or a programmatic `value`/`defaultValue` assignment that never
|
|
580
630
|
* matched anything. Drives the dashed/italic "not in catalog" presentation in `render()`, so a
|
|
581
631
|
* genuinely unresolved value never leaks its raw string with no explanation, while
|
|
582
|
-
* `resolvedLabelFor()` keeps the raw value itself fully reachable through `labelFor()`/`value`.
|
|
632
|
+
* `resolvedLabelFor()` keeps the raw value itself fully reachable through `labelFor()`/`value`.
|
|
633
|
+
*
|
|
634
|
+
* Suppressed entirely while `loading` is `true`: an unresolved value in that window simply
|
|
635
|
+
* hasn't had its matching `<lr-option>` mount yet, which is "not yet known", not "genuinely
|
|
636
|
+
* unknown" -- see `labelFor()`'s own loading-placeholder fallback, which this has to agree with
|
|
637
|
+
* so the trigger/tag text and the "not in catalog" badge are never shown at the same time. */
|
|
583
638
|
private isUnknownValue;
|
|
584
639
|
/**
|
|
585
640
|
* The sole available option, when `autoCommitSingleOption` is set and
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{acquireNativeControlDescription}from"../../../internal/native-control-description.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{deferredPlaceReady as place}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{nextId,srOnly}from"../../../internal/a11y.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{chevronIcon,closeIcon}from"../../../internal/icons.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{finiteCount}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{styles}from"./select.styles.js";import{sizes}from"../../../internal/sizes.styles.js";import"../combobox/option.class.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{omittedEmptyStringConverter,optionalLiteralSetConverter}from"../../../internal/converters.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{isOptionSelectedDirty,isOptionSelectedWrite,wasOptionInitiallySelected,RESET_OPTION_SELECTED_FROM_OWNER,SET_OPTION_SELECTED_FROM_OWNER}from"../../../internal/option-selection.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{tag}from"../../../internal/prefix.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_notInCatalog,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_select,LYRA_DEFAULT_selectSelectedOverflow,LYRA_DEFAULT_selectValueMissing}from"../../../internal/default-strings.generated.js";const TYPE_AHEAD_RESET_MS=500;function isLyraOptionElement(value){return isHtmlElement(value)&&value.localName===tag("option")}function normalizeSelectionValues(next){return Array.isArray(next)?next.filter(value=>typeof value=="string"):typeof next=="string"?[next]:[]}const POSITIONING_STRATEGY=optionalLiteralSetConverter(["absolute","fixed"]);class LyraSelect extends LyraElement{static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,notInCatalog:LYRA_DEFAULT_notInCatalog,removeWithContext:LYRA_DEFAULT_removeWithContext,select:LYRA_DEFAULT_select,selectSelectedOverflow:LYRA_DEFAULT_selectSelectedOverflow,selectValueMissing:LYRA_DEFAULT_selectValueMissing}}static{this.immutableEventDetails=Object.freeze(["lr-input","lr-change"])}static{this.identityEventDetailCollectionItems=Object.freeze({"lr-input":Object.freeze(["data"]),"lr-change":Object.freeze(["data"])})}static get validators(){return[currentValidityValidator("required","disabled","value","multiple")]}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles,srOnly]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},multiple:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{noAccessor:!0},name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},maxOptionsVisible:{type:Number,attribute:"max-options-visible",noAccessor:!0},defaultValue:{attribute:"default-value",noAccessor:!0}}}get open(){return this._open}set open(next){const requested=!!next,normalized=requested&&!this.effectiveDisabled;if(normalized===this._open){requested!==normalized&&this.hasAttribute("open")&&this.removeAttribute("open");return}this.applyOpenState(normalized)}get positioningStrategy(){return this._positioningStrategy??"absolute"}set positioningStrategy(next){const normalized=POSITIONING_STRATEGY.normalize(next)??"absolute",old=this.positioningStrategy;this._positioningStrategy=normalized,normalized!==old&&(this.requestUpdate("positioningStrategy",old),old==="fixed"!=(normalized==="fixed")&&this.requestUpdate("hoist",old==="fixed"))}get hoist(){return this.positioningStrategy==="fixed"}set hoist(next){this.positioningStrategy=next?"fixed":"absolute"}focus(options){this.effectiveDisabled||this.triggerElement?.focus(options)}blur(){this.triggerElement?.blur()}click(){this.effectiveDisabled||this.triggerElement?.click()}constructor(){super(),this.placeholder="",this.label="",this.hint="",this.helpText="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.autofocus=!1,this.title="",this._open=!1,this.size="m",this.appearance="outlined",this.pill=!1,this.placement="bottom",this.filled=!1,this.withClear=!1,this.clearable=!1,this.showUnknownOption=!1,this.autoCommitSingleOption=!1,this.activeIndex=-1,this.options=[],this.touched=!1,this.hasInteracted=!1,this.slotPresence=new SlotPresenceController(this),this._fieldsetDisabled=!1,this.listId=nextId("select-list"),this.triggerId=nextId("select-trigger"),this.valueTextId=nextId("select-value"),this.positioningReady=Promise.resolve(!1),this.restoreFocusOnClose=!0,this._isFirstUpdate=!0,this.openVetoed=!1,this.openStateGeneration=0,this.transitionToken=0,this.transitionWaiters=new Map,this._selected=[],this._selectedOptions=[],this._selectedValuesByOption=new Map,this.adornmentClones=new WeakMap,this._multiple=!1,this._disabled=!1,this._required=!1,this._defaultSelected=[],this._defaultSelectedOptions=[],this._defaultCaptured=!1,this._valueDirty=!1,this._restoredStateActive=!1,this._resolvingPendingInitialSelection=!1,this._defaultValueDirty=!1,this.typeAheadBuffer="",this.typeAheadReset=new DebounceController(TYPE_AHEAD_RESET_MS,armedIn=>{!this.isConnected||this.ownerDocument.defaultView!==armedIn||(this.typeAheadBuffer="")},()=>this.ownerDocument.defaultView),this._name="",this._maxOptionsVisible=3,this.localDescriptionIds="",this.markInteracted=()=>{this.hasInteracted||(this.hasInteracted=!0,this.reflectValidityStates())},this.collectOptions=e=>{this.collectOptionsFromSlot(e.target)},this.unknownOptionCache=new Map,this.onOptionChange=e=>{e.stopPropagation();const option=e.composedPath().find(isLyraOptionElement);if(isLyraOptionElement(option)&&this.options.includes(option)&&isOptionSelectedWrite(e)){this._valueDirty=!0,this._restoredStateActive=!1;const selected=this._selectedOptions.includes(option);if(option.selected===selected&&(!selected||this._selectedValuesByOption.get(option)===option.value))return;if(option.selected&&!this.multiple){this.setSelection([option.value],[option]);return}const remaining=[...this._selectedOptions],preferred=this._selected.map(value=>{const index2=remaining.findIndex(candidate=>this._selectedValuesByOption.get(candidate)===value);return index2<0?void 0:remaining.splice(index2,1)[0]}),values=[...this._selected],index=preferred.indexOf(option);if(option.selected)index<0?(values.push(option.value),preferred.push(option)):values[index]=option.value;else{if(index<0)return;values.splice(index,1),preferred.splice(index,1)}this.setSelection(values,preferred);return}isLyraOptionElement(option)&&this.adornmentClones.get(option)?.markup!==this.adornmentMarkup(option)&&this.adornmentClones.delete(option);const previousActive=this.activeOption,previousActiveRawIndex=previousActive?this.options.indexOf(previousActive):this.activeIndex;queueMicrotask(()=>{this.refreshOptionDefaults(),this.reflectSelected(),this.options=[...this.options],this.reconcileActiveOption(previousActive,previousActiveRawIndex)})},this.onDocPointer=e=>{if(!e.composedPath().includes(this)){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.restoreFocusOnClose=!1,this.hide()}},this.onTriggerClick=()=>{if(!this.effectiveDisabled){if(this.onlyOption)return this.selectOption(this.onlyOption);this.open?this.hide():this.show()}},this.onTriggerBlur=event=>{this.effectiveDisabled||(this.touched=!0,this.hasInteracted=!0,this.reflectValidityStates()),this.open&&(this.restoreFocusOnClose=!1),this.hide(),relayNativeEvent(this,event)},this.onTriggerFocus=event=>{relayNativeEvent(this,event)},this.onKeyDown=e=>{const navigable=this.navigableOptions();switch(e.key){case"ArrowDown":if(e.preventDefault(),this.onlyOption)return this.selectOption(this.onlyOption);if(!this.open){this.show();return}this.setActiveIndex(Math.min(navigable.length-1,this.activeIndex+1),navigable);break;case"ArrowUp":if(e.preventDefault(),this.onlyOption)return this.selectOption(this.onlyOption);if(!this.open){this.show();return}this.setActiveIndex(Math.max(0,this.activeIndex-1),navigable);break;case"Enter":case" ":if(this.open){e.preventDefault();const active=navigable[this.activeIndex];this.activeIndex>=0&&active?this.selectOption(active):this.hide()}break;case"Escape":this.open&&(!this.overlayHandle?.isActive()||this.overlayHandle.isTopmost())&&(e.preventDefault(),this.hide());break;case"Home":this.open&&(e.preventDefault(),this.setActiveIndex(0,navigable));break;case"End":this.open&&(e.preventDefault(),this.setActiveIndex(navigable.length-1,navigable));break;case"Backspace":case"Delete":this.multiple&&this._selected.length>0&&(e.preventDefault(),this.removeValueAt(this._selected.length-1));break;default:e.key.length===1&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&this.typeAhead(e.key);break}},this.onListboxMouseDown=e=>{e.preventDefault()},this.onListboxClick=e=>{const optionEl=e.target.closest('[part="option"]'),index=Number(optionEl?.dataset.index);if(!Number.isInteger(index))return;const option=this.listboxOptions[index];option&&this.selectOption(option)},installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),installInteractionOnInvalid(this,this.markInteracted),this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),this.syncFormValue()}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="trigger"]')??null}syncExternalDescription(){if(!this.isConnected)return;const target=this.renderRoot.querySelector('[part="trigger"]');target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireNativeControlDescription(this,target,()=>this.localDescriptionIds))}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.updateValidity(),this.hasUpdated&&this.open&&queueMicrotask(()=>this.reconnectOpenPopup())}willUpdate(changed){if(super.willUpdate(changed),this._isFirstUpdate=!this.hasUpdated,this._isFirstUpdate&&(this._pendingInitialDefaultValue!==void 0||this._pendingInitialValue!==void 0||this._pendingInitialSelectedOptions!==void 0)){this._resolvingPendingInitialSelection=!0;try{if(this._pendingInitialDefaultValue!==void 0){const pending=this._pendingInitialDefaultValue;this._pendingInitialDefaultValue=void 0,this.assignDefaultValue(pending)}if(this._pendingInitialValue!==void 0){const pending=this._pendingInitialValue;this._pendingInitialValue=void 0,this.assignValue(pending)}if(this._pendingInitialSelectedOptions!==void 0){const pending=this._pendingInitialSelectedOptions;this._pendingInitialSelectedOptions=void 0,this.selectedOptions=pending}}finally{this._resolvingPendingInitialSelection=!1}}this.announceOpenTransition(changed),changed.has("open")&&!this.open&&!this.openVetoed&&this.setActiveIndex(-1)}firstUpdated(changed){super.firstUpdated(changed);const slot=this.optionsSlot;queueMicrotask(()=>{collectInitialSlotAssignment(slot,s=>{s.assignedElements({flatten:!0}).some(isLyraOptionElement)&&this.collectOptionsFromSlot(s)})})}applyOpenState(next){const old=this._open;this.pendingOpenTransitionStart===void 0&&(this.pendingOpenTransitionStart=old),this.openStateGeneration++,this._open=next,this.requestUpdate("open",old)}forceCloseOpenState(){const isClosing=this._open||this.pendingOpenTransitionStart===!0;if(this.transitionToken++,this.resolveTransitionWaiters("lr-after-show"),this.resolveTransitionWaiters("lr-after-hide"),!this._open){isClosing&&(this.suppressedOpenLifecycleGeneration=this.openStateGeneration),this.hasAttribute("open")&&this.removeAttribute("open");return}this.applyOpenState(!1),this.suppressedOpenLifecycleGeneration=this.openStateGeneration}announceOpenTransition(changed){if(this.openVetoed=!1,!changed.has("open")||this._isFirstUpdate||this.suppressedOpenLifecycleGeneration===this.openStateGeneration)return;const name=this.open?"lr-show":"lr-hide";if(!this.isConnected){this.emit("lr-hide");return}this.emit(name,null,{cancelable:!0}).defaultPrevented&&(this.openVetoed=!0,this.open=!this.open,this.resolveTransitionWaiters(this.open?"lr-after-hide":"lr-after-show"))}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.syncFormValue(),this.requestUpdate("name",old)}get multiple(){return this._multiple}set multiple(next){const old=this._multiple;this._multiple=!!next,this.toggleAttribute("multiple",this._multiple),!this._multiple&&this._selected.length>1?this.setSelection(this._selected.slice(0,1),this._selectedOptions.slice(0,1)):this.syncFormValue(),this.requestUpdate("multiple",old)}get maxOptionsVisible(){return this._maxOptionsVisible}set maxOptionsVisible(next){const old=this._maxOptionsVisible;this._maxOptionsVisible=finiteCount(next,3),this.requestUpdate("maxOptionsVisible",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&this.forceCloseOpenState(),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get value(){return this.multiple?[...this._selected]:this._selected[0]??""}set value(next){!this.hasUpdated&&!this._resolvingPendingInitialSelection&&(this._pendingInitialValue=next),this._restoredStateActive=!1,this._valueDirty=!0;const values=normalizeSelectionValues(next);this.setSelection(values,values.map(value=>this.options.find(option=>option.value===value)))}get defaultValue(){return this.multiple?[...this._defaultSelected]:this._defaultSelected[0]??""}set defaultValue(next){!this.hasUpdated&&!this._resolvingPendingInitialSelection&&(this._pendingInitialDefaultValue=next),this._defaultValueDirty=!0;const old=this.multiple?[...this._defaultSelected]:this._defaultSelected[0]??"",values=normalizeSelectionValues(next);this._defaultSelected=this.multiple?[...values]:values.slice(0,1),this._defaultSelectedOptions=this.resolveOccurrences(this._defaultSelected),!this._valueDirty&&!this._restoredStateActive&&this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions]),this.requestUpdate("defaultValue",old)}get selectedOptions(){return[...this._selectedOptions]}set selectedOptions(next){!this.hasUpdated&&!this._resolvingPendingInitialSelection&&(this._pendingInitialSelectedOptions=next),this._restoredStateActive=!1,this._valueDirty=!0;const candidates=Array.isArray(next)?next:[],live=candidates.filter((option,index)=>isLyraOptionElement(option)&&this.contains(option)&&this.options.includes(option)&&candidates.indexOf(option)===index),selected=this.multiple?live:live.slice(0,1);this.setSelection(selected.map(option=>option.value),selected)}get selectedData(){return this.resolveOccurrenceSlots(this._selected,this._selectedOptions).map(option=>option?.data)}setSelection(next,preferred=[]){const values=this.multiple?[...next]:next.slice(0,1),previousValues=this._selected,previousOptions=this._selectedOptions,old=this.multiple?[...previousValues]:previousValues[0]??"";this._selected=values,this._selectedOptions=this.resolveOccurrences(values,preferred),this.syncFormValue(),this.reflectSelected(),this.updateValidity(),this.requestUpdate("value",old);const sameValues=previousValues.length===values.length&&previousValues.every((value,i)=>value===values[i]),sameOptions=previousOptions.length===this._selectedOptions.length&&previousOptions.every((option,i)=>option===this._selectedOptions[i]);sameValues&&!sameOptions&&this.requestUpdate()}resolveOccurrences(values,preferred=[]){return this.resolveOccurrenceSlots(values,preferred).filter(option=>option!==void 0)}resolveOccurrenceSlots(values,preferred=[]){const claimed=new Set;return values.map((value,index)=>{const hint=preferred.length===values.length?preferred[index]:preferred.find(option=>option?.value===value&&!claimed.has(option)),match=hint&&hint.value===value&&this.options.includes(hint)&&!claimed.has(hint)?hint:this.options.find(option=>option.value===value&&!claimed.has(option));if(match)return claimed.add(match),match})}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&this._selected.length===0?this.validityController.setValidity({valueMissing:!0},this.localize("selectValueMissing")):this.validityController.setValidity({}),this.reflectValidityStates()}reflectValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred:this.barredFromValidation}),this._selected.length===0?this.internals.states?.add("blank"):this.internals.states?.delete("blank")}syncFormValue(){if(!this.multiple){this.internals.setFormValue(this._selected[0]??"");return}const state2=JSON.stringify(this._selected);if(!this.name){this.internals.setFormValue(null,state2);return}const data=new FormData;for(const value of this._selected)data.append(this.name,value);this.internals.setFormValue(data,state2)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}formResetCallback(){this.touched=!1,this.hasInteracted=!1,this._restoredStateActive=!1,this._valueDirty=!1;const resetOptions=this._defaultSelectedOptions.length>0?this._defaultSelectedOptions:this.options.filter(option=>wasOptionInitiallySelected(option));this._defaultSelectedOptions.length===0&&resetOptions.length>0&&(this._defaultSelectedOptions=[...resetOptions],this._defaultSelected=resetOptions.map(option=>option.value));const defaults=new Set(resetOptions);for(const option of this.options)option[RESET_OPTION_SELECTED_FROM_OWNER](defaults.has(option));this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions])}formStateRestoreCallback(state2,reason){if(!this.multiple)this.assignValue(typeof state2=="string"?state2:void 0);else{let restored=[];if(typeof state2=="string")try{const parsed=JSON.parse(state2);Array.isArray(parsed)&&parsed.every(entry=>typeof entry=="string")&&(restored=parsed)}catch{}this.assignValue(restored)}this._restoredStateActive=!0,this._valueDirty=!0}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&this.forceCloseOpenState(),this.updateValidity(),this.requestUpdate()}checkValidity(){return this.updateValidity(),withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.updateValidity(),this.hasInteracted=!0,this.reflectValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates()}resetValidity(){this.setCustomValidity("")}disconnectedCallback(){this.releaseExternalDescription(),this.transitionToken++,super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=void 0,this.clearTypeAheadTimer(),this.typeAheadBuffer="",this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0,this.unbindDocumentPointer(),this.resolveTransitionWaiters("lr-after-show"),this.resolveTransitionWaiters("lr-after-hide"),this.open=!1}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription(),this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=void 0,this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0,this.unbindDocumentPointer(),this.clearTypeAheadTimer(),queueMicrotask(()=>this.reconnectOpenPopup())}collectOptionsFromSlot(slot){const previous=new Set(this.options),previousActive=this.activeOption,previousActiveRawIndex=previousActive?this.options.indexOf(previousActive):this.activeIndex;if(this.options=slot.assignedElements({flatten:!0}).filter(isLyraOptionElement),this.adornmentClones=new WeakMap,this.reconcileActiveOption(previousActive,previousActiveRawIndex),this._defaultCaptured){const newDefaults=this.options.filter(option=>!previous.has(option)&&option.defaultSelected),newLive=this.options.filter(option=>!previous.has(option)&&option.selected&&!option.defaultSelected);this.refreshOptionDefaults();const eligible=[...!this._restoredStateActive&&!this._valueDirty?newDefaults:[],...this._restoredStateActive?[]:newLive];if(eligible.length>0){const added=this.multiple?eligible:eligible.slice(-1),occurrences=this.multiple?[...new Set([...this._selectedOptions,...added])]:added;newLive.length>0&&(this._valueDirty=!0),this.setSelection(occurrences.map(option=>option.value),occurrences);return}}else{this._defaultCaptured=!0;const explicitDefault=this.hasAttribute("default-value")||this._defaultValueDirty,allDefaults=this.options.filter(option=>option.defaultSelected),defaults=this.multiple?allDefaults:allDefaults.slice(0,1),allLive=this.options.filter(option=>option.selected),live=this.multiple?allLive:allLive.slice(0,1),initialLive=this.options.filter(option=>wasOptionInitiallySelected(option)),optionDirty=this.options.some(option=>isOptionSelectedDirty(option)),dirtySelected=this.options.filter(option=>isOptionSelectedDirty(option)&&option.selected);if(explicitDefault)this._defaultSelectedOptions=this.resolveOccurrences(this._defaultSelected);else{const resetOptions=defaults.length>0?defaults:initialLive.length>0?initialLive:live;this._defaultSelected=resetOptions.map(option=>option.value),this._defaultSelectedOptions=[...resetOptions]}const fromDefaults=explicitDefault||defaults.length>0,initial=optionDirty?this.multiple?allLive:dirtySelected.slice(-1)[0]?dirtySelected.slice(-1):live:explicitDefault?this._defaultSelectedOptions:fromDefaults?defaults:live;if(initial.length>0&&!this._restoredStateActive&&!this._valueDirty){(!fromDefaults||optionDirty)&&(this._valueDirty=!0),this.setSelection(initial.map(option=>option.value),[...initial]);return}if(optionDirty&&(this._valueDirty=!0),explicitDefault&&!this._valueDirty&&!this._restoredStateActive){this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions]);return}}this.reflectSelected()}refreshOptionDefaults(){if(this.hasAttribute("default-value")||this._defaultValueDirty)return;const declared=this.options.filter(option=>option.defaultSelected),defaults=this.multiple?declared:declared.slice(0,1);this._defaultSelected=defaults.map(option=>option.value),this._defaultSelectedOptions=[...defaults],!this._valueDirty&&!this._restoredStateActive&&this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions])}reflectSelected(){this._selectedOptions=this.resolveOccurrences(this._selected,this._selectedOptions),this._selectedValuesByOption=new Map(this._selectedOptions.map(option=>[option,option.value]));const chosen=new Set(this._selectedOptions);for(const option of this.options)option[SET_OPTION_SELECTED_FROM_OWNER](chosen.has(option))}selectUnknownValue(value){if(this.hasInteracted=!0,this._restoredStateActive=!1,this._valueDirty=!0,this.multiple){const index=this._selected.indexOf(value),values=index>=0?this._selected.filter((_,position)=>position!==index):[...this._selected,value];this.setSelection(values,this.resolveOccurrences(values,this._selectedOptions)),this.emitValueEvents(),this.emit("lr-activate",{value});return}this.hide(),this.emit("lr-activate",{value})}resolvedLabelFor(value,occurrenceIndex=0){return(this._selectedOptions[occurrenceIndex]?.value===value?this._selectedOptions[occurrenceIndex]?.label:void 0)??this._selectedOptions.find(option=>option.value===value)?.label??this.options.find(option=>option.value===value)?.label}labelFor(value,occurrenceIndex=0){const resolved=this.resolvedLabelFor(value,occurrenceIndex);if(resolved!==void 0)return resolved;const override=this.getUnknownLabel?.(value);return override!==void 0&&override.trim().length>0?override:value}isUnknownValue(value,occurrenceIndex=0){return this.resolvedLabelFor(value,occurrenceIndex)===void 0}get onlyOption(){if(!this.autoCommitSingleOption)return;const navigable=this.navigableOptions(this.options);return navigable.length===1?navigable[0]:void 0}isOptionAvailable(option){return!option.disabled&&!option.inert&&!option.closest("[inert]")}navigableOptions(options=this.listboxOptions){return options.filter(option=>this.isOptionAvailable(option))}get unknownValues(){return this.showUnknownOption?this._selected.filter((value,index)=>this.isUnknownValue(value,index)):[]}get unknownOptions(){const values=this.unknownValues;if(values.length===0)return this.unknownOptionCache.clear(),[];for(const key of[...this.unknownOptionCache.keys()])values.includes(key)||this.unknownOptionCache.delete(key);return values.map(value=>{let option=this.unknownOptionCache.get(value);return option||(option=this.ownerDocument.createElement(tag("option")),this.unknownOptionCache.set(value,option)),option.value=value,option.label=this.labelFor(value),option})}get listboxOptions(){const unknown=this.unknownOptions;return unknown.length===0?this.options:[...this.options,...unknown]}setActiveIndex(next,navigable=this.navigableOptions()){if(next<0||navigable.length===0){this.activeIndex=-1,this.activeOption=void 0;return}const index=Math.min(next,navigable.length-1);this.activeIndex=index,this.activeOption=navigable[index]}reconcileActiveOption(previousActive,previousRawIndex){if(!previousActive&&this.activeIndex<0)return;const navigable=this.navigableOptions();if(previousActive){const preservedIndex=navigable.indexOf(previousActive);if(preservedIndex>=0){this.setActiveIndex(preservedIndex,navigable);return}}if(navigable.length===0){this.setActiveIndex(-1,navigable);return}const pivot=Math.max(0,previousRawIndex);let nearestIndex=0,nearestDistance=Number.POSITIVE_INFINITY,nearestRawIndex=-1;navigable.forEach((option,index)=>{const rawIndex=this.listboxOptions.indexOf(option),distance=Math.abs(rawIndex-pivot);(distance<nearestDistance||distance===nearestDistance&&rawIndex>=pivot&&nearestRawIndex<pivot)&&(nearestIndex=index,nearestDistance=distance,nearestRawIndex=rawIndex)}),this.setActiveIndex(nearestIndex,navigable)}show(){if(this.open||this.effectiveDisabled)return Promise.resolve();this.resolveTransitionWaiters("lr-after-hide");const settled=this.waitForTransition("lr-after-show");return this.open=!0,settled}hide(){if(!this.open)return Promise.resolve();this.resolveTransitionWaiters("lr-after-show");const settled=this.waitForTransition("lr-after-hide");return this.open=!1,settled}positionListbox(){this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=this.effectiveDirection;const anchor=this.renderRoot.querySelector('[part="trigger"]'),listbox=this.renderRoot.querySelector('[part="listbox"]');!anchor||!listbox||(this.cleanup=place(anchor,listbox,{placement:rtlAwarePlacement(this.placement,this),strategy:resolveEffectivePositioningStrategy(this,this._positioningStrategy,"absolute")}),this.positioningReady=this.cleanup.ready)}activateListboxOverlay(){this.cleanup?.(),this.cleanup=void 0,this.overlayHandle?.deactivate({restoreFocus:!1}),this.restoreFocusOnClose=!0,this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="listbox"]'),onEscape:()=>{this.hide()},onBackdrop:()=>{this.restoreFocusOnClose=!1,this.hide()},restoreFocusTo:this.triggerElement??null}),this.bindDocumentPointer(),this.positionListbox()}teardownListboxOverlay(restoreFocus=this.restoreFocusOnClose){this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=void 0,this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0,this.unbindDocumentPointer(),this.restoreFocusOnClose=!0}bindDocumentPointer(){if(!this.isConnected)return;const ownerDocument=this.ownerDocument;if(this.pointerListenerDocument===ownerDocument&&this.pointerListener)return;this.unbindDocumentPointer();const listener=event=>{this.pointerListener!==listener||this.pointerListenerDocument!==ownerDocument||!this.isConnected||this.ownerDocument!==ownerDocument||this.onDocPointer(event)};this.pointerListenerDocument=ownerDocument,this.pointerListener=listener,ownerDocument.addEventListener("pointerdown",listener,!0)}unbindDocumentPointer(){this.pointerListenerDocument&&this.pointerListener&&this.pointerListenerDocument.removeEventListener("pointerdown",this.pointerListener,!0),this.pointerListenerDocument=void 0,this.pointerListener=void 0}reconnectOpenPopup(){!this.isConnected||!this.open||this.activateListboxOverlay()}updated(changed){super.updated(changed),this.syncExternalDescription();const suppressOpenLifecycle=changed.has("open")&&this.suppressedOpenLifecycleGeneration===this.openStateGeneration,shouldRefreshPosition=this.open&&this.isConnected&&(changed.has("placement")||changed.has("positioningStrategy")||this.positionedDirection!==this.effectiveDirection);changed.has("open")&&!this.openVetoed?this.open&&this.isConnected?(this.activateListboxOverlay(),!this._isFirstUpdate&&!suppressOpenLifecycle&&this.settleTransition("lr-after-show")):this.open?this.teardownListboxOverlay(!1):(this.teardownListboxOverlay(),!this._isFirstUpdate&&!suppressOpenLifecycle&&this.settleTransition("lr-after-hide")):changed.has("open")&&this.openVetoed?(this.restoreFocusOnClose=!0,shouldRefreshPosition&&this.positionListbox()):shouldRefreshPosition&&this.positionListbox(),(changed.has("touched")||changed.has("required")||changed.has("value"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),changed.has("open")&&(this.pendingOpenTransitionStart=void 0,this.suppressedOpenLifecycleGeneration=void 0)}async settleTransition(event){const token=++this.transitionToken;if(await this.updateComplete,this.transitionToken===token){if(event==="lr-after-show"){for(;this.open;){const readiness=this.positioningReady,positioned=await readiness;if(this.transitionToken!==token)return;if(positioned)break;if(readiness===this.positioningReady){this.forceCloseOpenState();return}}if(await this.updateComplete,this.transitionToken!==token)return}if(this.isConnected){const view=this.ownerDocument.defaultView;if(view&&await new Promise(resolve=>view.requestAnimationFrame(()=>resolve())),this.transitionToken!==token)return;const animations=this.renderRoot.querySelector('[part="listbox"]')?.getAnimations({subtree:!0})??[];if(await Promise.all(animations.map(animation=>animation.finished.catch(()=>{}))),this.transitionToken!==token)return}this.emit(event),this.resolveTransitionWaiters(event)}}waitForTransition(event){return new Promise(resolve=>{const waiters=this.transitionWaiters.get(event)??new Set;waiters.add(resolve),this.transitionWaiters.set(event,waiters)})}resolveTransitionWaiters(event){const waiters=this.transitionWaiters.get(event);if(waiters){this.transitionWaiters.delete(event);for(const resolve of waiters)resolve()}}emitValueEvents(){const self=this,data=this.selectedData;dispatchNativeInputEvent(this),self.emit("lr-input",{value:self.value,data}),dispatchNativeEvent(this,"change"),self.emit("lr-change",{value:self.value,data})}assignValue(next){this.value=next}assignDefaultValue(next){this.defaultValue=next}selectOption(option){if(this.effectiveDisabled||!this.isOptionAvailable(option))return;if(this.unknownOptionCache.get(option.value)===option){this.selectUnknownValue(option.value);return}if(this.hasInteracted=!0,this._restoredStateActive=!1,this._valueDirty=!0,this.multiple){const selectedIndex=this._selectedOptions.indexOf(option),selected=selectedIndex>=0,occurrences=selected?this._selectedOptions.filter((_,index)=>index!==selectedIndex):[...this._selectedOptions,option],values=selected?this._selected.filter((_,index)=>index!==selectedIndex):[...this._selected,option.value];this.setSelection(values,occurrences),this.emitValueEvents(),this.emit("lr-activate",{value:option.value});return}const changed=option!==this._selectedOptions[0]||option.value!==this._selected[0];this.setSelection([option.value],[option]),this.hide(),changed&&this.emitValueEvents(),this.emit("lr-activate",{value:option.value})}removeValueAt(index){this.effectiveDisabled||index<0||index>=this._selected.length||(this._restoredStateActive=!1,this._valueDirty=!0,this.setSelection(this._selected.filter((_,candidateIndex)=>candidateIndex!==index),this._selectedOptions.filter((_,candidateIndex)=>candidateIndex!==index)),this.emitValueEvents())}clear(){this.effectiveDisabled||this._selected.length===0||(this._restoredStateActive=!1,this._valueDirty=!0,this.setSelection([],[]),this.emitValueEvents(),this.emit("lr-clear"))}removeTag(value,index,event){event.stopPropagation(),this._selected[index]===value&&(this.removeValueAt(index),this.updateComplete.then(()=>{const buttons=[...this.renderRoot.querySelectorAll('[part~="tag__remove-button"]')];(buttons[Math.min(index,buttons.length-1)]??this.triggerElement)?.focus()}))}typeAhead(char){this.clearTypeAheadTimer(),this.typeAheadBuffer+=char.toLocaleLowerCase(this.effectiveLocale);const ownerWindow=this.ownerDocument.defaultView;this.isConnected&&ownerWindow&&this.typeAheadReset.push(ownerWindow);const navigable=this.navigableOptions();if(!navigable.length)return;const currentOption=this.open?navigable[this.activeIndex]:this._selectedOptions[this._selectedOptions.length-1],currentIndex=navigable.indexOf(currentOption),n=navigable.length;for(let step=1;step<=n;step++){const idx=(currentIndex+step+n)%n,candidate=navigable[idx];if(candidate!==void 0&&candidate.label.toLocaleLowerCase(this.effectiveLocale).startsWith(this.typeAheadBuffer)){if(this.open){this.setActiveIndex(idx,navigable);return}if(this.multiple&&this._selectedOptions.includes(candidate))continue;this.selectOption(candidate);return}}}clearTypeAheadTimer(){this.typeAheadReset.cancel()}adornmentMarkup(option){return Array.from(option.children).filter(child=>["start","end","prefix","suffix"].includes(child.getAttribute("slot")??"")).map(child=>child.outerHTML).join("")}adornmentsFor(option){const cached=this.adornmentClones.get(option);if(cached)return cached;const cloneSlot=selector=>{const nodes=Array.from(option.querySelectorAll(selector));if(nodes.length!==0)return nodes.map(node=>node.cloneNode(!0))},resolved={markup:this.adornmentMarkup(option),start:cloneSlot(':scope > [slot="start"], :scope > [slot="prefix"]'),end:cloneSlot(':scope > [slot="end"], :scope > [slot="suffix"]')};return this.adornmentClones.set(option,resolved),resolved}renderRows(options,activeId){const out=[],chosen=new Set(this._selectedOptions);let currentGroup,groupRows=[],groupIndex=0;const flushGroup=()=>{if(groupRows.length!==0){if(currentGroup){const labelId=`${this.listId}-group-${groupIndex++}`;out.push(html`<div role="group" aria-labelledby=${labelId}>
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{acquireNativeControlDescription}from"../../../internal/native-control-description.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{deferredPlaceReady as place}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{nextId,srOnly}from"../../../internal/a11y.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{chevronIcon,closeIcon}from"../../../internal/icons.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{finiteCount}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{styles}from"./select.styles.js";import{sizes}from"../../../internal/sizes.styles.js";import"../combobox/option.class.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{omittedEmptyStringConverter,optionalLiteralSetConverter}from"../../../internal/converters.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{isOptionSelectedDirty,isOptionSelectedWrite,wasOptionInitiallySelected,RESET_OPTION_SELECTED_FROM_OWNER,SET_OPTION_SELECTED_FROM_OWNER}from"../../../internal/option-selection.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{tag}from"../../../internal/prefix.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_clear,LYRA_DEFAULT_loading,LYRA_DEFAULT_notInCatalog,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_select,LYRA_DEFAULT_selectSelectedOverflow,LYRA_DEFAULT_selectValueMissing}from"../../../internal/default-strings.generated.js";const TYPE_AHEAD_RESET_MS=500;function isLyraOptionElement(value){return isHtmlElement(value)&&value.localName===tag("option")}function normalizeSelectionValues(next){return Array.isArray(next)?next.filter(value=>typeof value=="string"):typeof next=="string"?[next]:[]}const POSITIONING_STRATEGY=optionalLiteralSetConverter(["absolute","fixed"]);class LyraSelect extends LyraElement{static{this.defaultStrings={...super.defaultStrings,clear:LYRA_DEFAULT_clear,loading:LYRA_DEFAULT_loading,notInCatalog:LYRA_DEFAULT_notInCatalog,removeWithContext:LYRA_DEFAULT_removeWithContext,select:LYRA_DEFAULT_select,selectSelectedOverflow:LYRA_DEFAULT_selectSelectedOverflow,selectValueMissing:LYRA_DEFAULT_selectValueMissing}}static{this.immutableEventDetails=Object.freeze(["lr-input","lr-change"])}static{this.identityEventDetailCollectionItems=Object.freeze({"lr-input":Object.freeze(["data"]),"lr-change":Object.freeze(["data"])})}static get validators(){return[currentValidityValidator("required","disabled","value","multiple")]}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles,srOnly]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},multiple:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{noAccessor:!0},name:{reflect:!0,noAccessor:!0,converter:omittedEmptyStringConverter},maxOptionsVisible:{type:Number,attribute:"max-options-visible",noAccessor:!0},defaultValue:{attribute:"default-value",noAccessor:!0}}}get open(){return this._open}set open(next){const requested=!!next,normalized=requested&&!this.effectiveDisabled;if(normalized===this._open){requested!==normalized&&this.hasAttribute("open")&&this.removeAttribute("open");return}this.applyOpenState(normalized)}get positioningStrategy(){return this._positioningStrategy??"absolute"}set positioningStrategy(next){const normalized=POSITIONING_STRATEGY.normalize(next)??"absolute",old=this.positioningStrategy;this._positioningStrategy=normalized,normalized!==old&&(this.requestUpdate("positioningStrategy",old),old==="fixed"!=(normalized==="fixed")&&this.requestUpdate("hoist",old==="fixed"))}get hoist(){return this.positioningStrategy==="fixed"}set hoist(next){this.positioningStrategy=next?"fixed":"absolute"}focus(options){this.effectiveDisabled||this.triggerElement?.focus(options)}blur(){this.triggerElement?.blur()}click(){this.effectiveDisabled||this.triggerElement?.click()}constructor(){super(),this.placeholder="",this.label="",this.hint="",this.helpText="",this.withLabel=!1,this.withHint=!1,this.errorText="",this.autofocus=!1,this.title="",this._open=!1,this.size="m",this.appearance="outlined",this.pill=!1,this.placement="bottom",this.filled=!1,this.withClear=!1,this.clearable=!1,this.showUnknownOption=!1,this.loading=!1,this.autoCommitSingleOption=!1,this.activeIndex=-1,this.options=[],this.touched=!1,this.hasInteracted=!1,this.slotPresence=new SlotPresenceController(this),this._fieldsetDisabled=!1,this.listId=nextId("select-list"),this.triggerId=nextId("select-trigger"),this.valueTextId=nextId("select-value"),this.positioningReady=Promise.resolve(!1),this.restoreFocusOnClose=!0,this._isFirstUpdate=!0,this.openVetoed=!1,this.openStateGeneration=0,this.transitionToken=0,this.transitionWaiters=new Map,this._selected=[],this._selectedOptions=[],this._selectedValuesByOption=new Map,this.adornmentClones=new WeakMap,this._multiple=!1,this._disabled=!1,this._required=!1,this._defaultSelected=[],this._defaultSelectedOptions=[],this._defaultCaptured=!1,this._valueDirty=!1,this._restoredStateActive=!1,this._resolvingPendingInitialSelection=!1,this._defaultValueDirty=!1,this.typeAheadBuffer="",this.typeAheadReset=new DebounceController(TYPE_AHEAD_RESET_MS,armedIn=>{!this.isConnected||this.ownerDocument.defaultView!==armedIn||(this.typeAheadBuffer="")},()=>this.ownerDocument.defaultView),this._name="",this._maxOptionsVisible=3,this.localDescriptionIds="",this.markInteracted=()=>{this.hasInteracted||(this.hasInteracted=!0,this.reflectValidityStates())},this.collectOptions=e=>{this.collectOptionsFromSlot(e.target)},this.unknownOptionCache=new Map,this.onOptionChange=e=>{e.stopPropagation();const option=e.composedPath().find(isLyraOptionElement);if(isLyraOptionElement(option)&&this.options.includes(option)&&isOptionSelectedWrite(e)){this._valueDirty=!0,this._restoredStateActive=!1;const selected=this._selectedOptions.includes(option);if(option.selected===selected&&(!selected||this._selectedValuesByOption.get(option)===option.value))return;if(option.selected&&!this.multiple){this.setSelection([option.value],[option]);return}const remaining=[...this._selectedOptions],preferred=this._selected.map(value=>{const index2=remaining.findIndex(candidate=>this._selectedValuesByOption.get(candidate)===value);return index2<0?void 0:remaining.splice(index2,1)[0]}),values=[...this._selected],index=preferred.indexOf(option);if(option.selected)index<0?(values.push(option.value),preferred.push(option)):values[index]=option.value;else{if(index<0)return;values.splice(index,1),preferred.splice(index,1)}this.setSelection(values,preferred);return}isLyraOptionElement(option)&&this.adornmentClones.get(option)?.markup!==this.adornmentMarkup(option)&&this.adornmentClones.delete(option);const previousActive=this.activeOption,previousActiveRawIndex=previousActive?this.options.indexOf(previousActive):this.activeIndex;queueMicrotask(()=>{this.refreshOptionDefaults(),this.reflectSelected(),this.options=[...this.options],this.reconcileActiveOption(previousActive,previousActiveRawIndex)})},this.onDocPointer=e=>{if(!e.composedPath().includes(this)){if(this.overlayHandle?.isActive()){this.overlayHandle.dismissBackdrop();return}this.restoreFocusOnClose=!1,this.hide()}},this.onTriggerClick=()=>{if(!this.effectiveDisabled){if(this.onlyOption)return this.selectOption(this.onlyOption);this.open?this.hide():this.show()}},this.onTriggerBlur=event=>{this.effectiveDisabled||(this.touched=!0,this.hasInteracted=!0,this.reflectValidityStates()),this.open&&(this.restoreFocusOnClose=!1),this.hide(),relayNativeEvent(this,event)},this.onTriggerFocus=event=>{relayNativeEvent(this,event)},this.onKeyDown=e=>{const navigable=this.navigableOptions();switch(e.key){case"ArrowDown":if(e.preventDefault(),this.onlyOption)return this.selectOption(this.onlyOption);if(!this.open){this.show();return}this.setActiveIndex(Math.min(navigable.length-1,this.activeIndex+1),navigable);break;case"ArrowUp":if(e.preventDefault(),this.onlyOption)return this.selectOption(this.onlyOption);if(!this.open){this.show();return}this.setActiveIndex(Math.max(0,this.activeIndex-1),navigable);break;case"Enter":case" ":if(this.open){e.preventDefault();const active=navigable[this.activeIndex];this.activeIndex>=0&&active?this.selectOption(active):this.hide()}break;case"Escape":this.open&&(!this.overlayHandle?.isActive()||this.overlayHandle.isTopmost())&&(e.preventDefault(),this.hide());break;case"Home":this.open&&(e.preventDefault(),this.setActiveIndex(0,navigable));break;case"End":this.open&&(e.preventDefault(),this.setActiveIndex(navigable.length-1,navigable));break;case"Backspace":case"Delete":this.multiple&&this._selected.length>0&&(e.preventDefault(),this.removeValueAt(this._selected.length-1));break;default:e.key.length===1&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&this.typeAhead(e.key);break}},this.onListboxMouseDown=e=>{e.preventDefault()},this.onListboxClick=e=>{const optionEl=e.target.closest('[part="option"]'),index=Number(optionEl?.dataset.index);if(!Number.isInteger(index))return;const option=this.listboxOptions[index];option&&this.selectOption(option)},installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),installInteractionOnInvalid(this,this.markInteracted),this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),this.syncFormValue()}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="trigger"]')??null}syncExternalDescription(){if(!this.isConnected)return;const target=this.renderRoot.querySelector('[part="trigger"]');target&&(this.externalDescriptionLease?this.externalDescriptionLease.update(target):this.externalDescriptionLease=acquireNativeControlDescription(this,target,()=>this.localDescriptionIds))}releaseExternalDescription(){this.externalDescriptionLease?.release(),this.externalDescriptionLease=void 0}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncExternalDescription(),this.updateValidity(),this.hasUpdated&&this.open&&queueMicrotask(()=>this.reconnectOpenPopup())}willUpdate(changed){if(super.willUpdate(changed),this._isFirstUpdate=!this.hasUpdated,this._isFirstUpdate&&(this._pendingInitialDefaultValue!==void 0||this._pendingInitialValue!==void 0||this._pendingInitialSelectedOptions!==void 0)){this._resolvingPendingInitialSelection=!0;try{if(this._pendingInitialDefaultValue!==void 0){const pending=this._pendingInitialDefaultValue;this._pendingInitialDefaultValue=void 0,this.assignDefaultValue(pending)}if(this._pendingInitialValue!==void 0){const pending=this._pendingInitialValue;this._pendingInitialValue=void 0,this.assignValue(pending)}if(this._pendingInitialSelectedOptions!==void 0){const pending=this._pendingInitialSelectedOptions;this._pendingInitialSelectedOptions=void 0,this.selectedOptions=pending}}finally{this._resolvingPendingInitialSelection=!1}}this.announceOpenTransition(changed),changed.has("open")&&!this.open&&!this.openVetoed&&this.setActiveIndex(-1)}firstUpdated(changed){super.firstUpdated(changed);const slot=this.optionsSlot;queueMicrotask(()=>{collectInitialSlotAssignment(slot,s=>{s.assignedElements({flatten:!0}).some(isLyraOptionElement)&&this.collectOptionsFromSlot(s)})})}applyOpenState(next){const old=this._open;this.pendingOpenTransitionStart===void 0&&(this.pendingOpenTransitionStart=old),this.openStateGeneration++,this._open=next,this.requestUpdate("open",old)}forceCloseOpenState(){const isClosing=this._open||this.pendingOpenTransitionStart===!0;if(this.transitionToken++,this.resolveTransitionWaiters("lr-after-show"),this.resolveTransitionWaiters("lr-after-hide"),!this._open){isClosing&&(this.suppressedOpenLifecycleGeneration=this.openStateGeneration),this.hasAttribute("open")&&this.removeAttribute("open");return}this.applyOpenState(!1),this.suppressedOpenLifecycleGeneration=this.openStateGeneration}announceOpenTransition(changed){if(this.openVetoed=!1,!changed.has("open")||this._isFirstUpdate||this.suppressedOpenLifecycleGeneration===this.openStateGeneration)return;const name=this.open?"lr-show":"lr-hide";if(!this.isConnected){this.emit("lr-hide");return}this.emit(name,null,{cancelable:!0}).defaultPrevented&&(this.openVetoed=!0,this.open=!this.open,this.resolveTransitionWaiters(this.open?"lr-after-hide":"lr-after-show"))}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.syncFormValue(),this.requestUpdate("name",old)}get multiple(){return this._multiple}set multiple(next){const old=this._multiple;this._multiple=!!next,this.toggleAttribute("multiple",this._multiple),!this._multiple&&this._selected.length>1?this.setSelection(this._selected.slice(0,1),this._selectedOptions.slice(0,1)):this.syncFormValue(),this.requestUpdate("multiple",old)}get maxOptionsVisible(){return this._maxOptionsVisible}set maxOptionsVisible(next){const old=this._maxOptionsVisible;this._maxOptionsVisible=finiteCount(next,3),this.requestUpdate("maxOptionsVisible",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&this.forceCloseOpenState(),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get value(){return this.multiple?[...this._selected]:this._selected[0]??""}set value(next){!this.hasUpdated&&!this._resolvingPendingInitialSelection&&(this._pendingInitialValue=next),this._restoredStateActive=!1,this._valueDirty=!0;const values=normalizeSelectionValues(next);this.setSelection(values,values.map(value=>this.options.find(option=>option.value===value)))}get defaultValue(){return this.multiple?[...this._defaultSelected]:this._defaultSelected[0]??""}set defaultValue(next){!this.hasUpdated&&!this._resolvingPendingInitialSelection&&(this._pendingInitialDefaultValue=next),this._defaultValueDirty=!0;const old=this.multiple?[...this._defaultSelected]:this._defaultSelected[0]??"",values=normalizeSelectionValues(next);this._defaultSelected=this.multiple?[...values]:values.slice(0,1),this._defaultSelectedOptions=this.resolveOccurrences(this._defaultSelected),!this._valueDirty&&!this._restoredStateActive&&this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions]),this.requestUpdate("defaultValue",old)}get selectedOptions(){return[...this._selectedOptions]}set selectedOptions(next){!this.hasUpdated&&!this._resolvingPendingInitialSelection&&(this._pendingInitialSelectedOptions=next),this._restoredStateActive=!1,this._valueDirty=!0;const candidates=Array.isArray(next)?next:[],live=candidates.filter((option,index)=>isLyraOptionElement(option)&&this.contains(option)&&this.options.includes(option)&&candidates.indexOf(option)===index),selected=this.multiple?live:live.slice(0,1);this.setSelection(selected.map(option=>option.value),selected)}get selectedData(){return this.resolveOccurrenceSlots(this._selected,this._selectedOptions).map(option=>option?.data)}setSelection(next,preferred=[]){const values=this.multiple?[...next]:next.slice(0,1),previousValues=this._selected,previousOptions=this._selectedOptions,old=this.multiple?[...previousValues]:previousValues[0]??"";this._selected=values,this._selectedOptions=this.resolveOccurrences(values,preferred),this.syncFormValue(),this.reflectSelected(),this.updateValidity(),this.requestUpdate("value",old);const sameValues=previousValues.length===values.length&&previousValues.every((value,i)=>value===values[i]),sameOptions=previousOptions.length===this._selectedOptions.length&&previousOptions.every((option,i)=>option===this._selectedOptions[i]);sameValues&&!sameOptions&&this.requestUpdate()}resolveOccurrences(values,preferred=[]){return this.resolveOccurrenceSlots(values,preferred).filter(option=>option!==void 0)}resolveOccurrenceSlots(values,preferred=[]){const claimed=new Set;return values.map((value,index)=>{const hint=preferred.length===values.length?preferred[index]:preferred.find(option=>option?.value===value&&!claimed.has(option)),match=hint&&hint.value===value&&this.options.includes(hint)&&!claimed.has(hint)?hint:this.options.find(option=>option.value===value&&!claimed.has(option));if(match)return claimed.add(match),match})}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&this._selected.length===0?this.validityController.setValidity({valueMissing:!0},this.localize("selectValueMissing")):this.validityController.setValidity({}),this.reflectValidityStates()}reflectValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.hasInteracted,barred:this.barredFromValidation}),this._selected.length===0?this.internals.states?.add("blank"):this.internals.states?.delete("blank")}syncFormValue(){if(!this.multiple){this.internals.setFormValue(this._selected[0]??"");return}const state2=JSON.stringify(this._selected);if(!this.name){this.internals.setFormValue(null,state2);return}const data=new FormData;for(const value of this._selected)data.append(this.name,value);this.internals.setFormValue(data,state2)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}formResetCallback(){this.touched=!1,this.hasInteracted=!1,this._restoredStateActive=!1,this._valueDirty=!1;const resetOptions=this._defaultSelectedOptions.length>0?this._defaultSelectedOptions:this.options.filter(option=>wasOptionInitiallySelected(option));this._defaultSelectedOptions.length===0&&resetOptions.length>0&&(this._defaultSelectedOptions=[...resetOptions],this._defaultSelected=resetOptions.map(option=>option.value));const defaults=new Set(resetOptions);for(const option of this.options)option[RESET_OPTION_SELECTED_FROM_OWNER](defaults.has(option));this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions])}formStateRestoreCallback(state2,reason){if(!this.multiple)this.assignValue(typeof state2=="string"?state2:void 0);else{let restored=[];if(typeof state2=="string")try{const parsed=JSON.parse(state2);Array.isArray(parsed)&&parsed.every(entry=>typeof entry=="string")&&(restored=parsed)}catch{}this.assignValue(restored)}this._restoredStateActive=!0,this._valueDirty=!0}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&this.forceCloseOpenState(),this.updateValidity(),this.requestUpdate()}checkValidity(){return this.updateValidity(),withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.updateValidity(),this.hasInteracted=!0,this.reflectValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.reflectValidityStates()}resetValidity(){this.setCustomValidity("")}disconnectedCallback(){this.releaseExternalDescription(),this.transitionToken++,super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=void 0,this.clearTypeAheadTimer(),this.typeAheadBuffer="",this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0,this.unbindDocumentPointer(),this.resolveTransitionWaiters("lr-after-show"),this.resolveTransitionWaiters("lr-after-hide"),this.open=!1}adoptedCallback(){super.adoptedCallback(),this.releaseExternalDescription(),this.hasUpdated&&this.syncExternalDescription(),this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=void 0,this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0,this.unbindDocumentPointer(),this.clearTypeAheadTimer(),queueMicrotask(()=>this.reconnectOpenPopup())}collectOptionsFromSlot(slot){const previous=new Set(this.options),previousActive=this.activeOption,previousActiveRawIndex=previousActive?this.options.indexOf(previousActive):this.activeIndex;if(this.options=slot.assignedElements({flatten:!0}).filter(isLyraOptionElement),this.adornmentClones=new WeakMap,this.reconcileActiveOption(previousActive,previousActiveRawIndex),this._defaultCaptured){const newDefaults=this.options.filter(option=>!previous.has(option)&&option.defaultSelected),newLive=this.options.filter(option=>!previous.has(option)&&option.selected&&!option.defaultSelected);this.refreshOptionDefaults();const eligible=[...!this._restoredStateActive&&!this._valueDirty?newDefaults:[],...this._restoredStateActive?[]:newLive];if(eligible.length>0){const added=this.multiple?eligible:eligible.slice(-1),occurrences=this.multiple?[...new Set([...this._selectedOptions,...added])]:added;newLive.length>0&&(this._valueDirty=!0),this.setSelection(occurrences.map(option=>option.value),occurrences);return}}else{this._defaultCaptured=!0;const explicitDefault=this.hasAttribute("default-value")||this._defaultValueDirty,allDefaults=this.options.filter(option=>option.defaultSelected),defaults=this.multiple?allDefaults:allDefaults.slice(0,1),allLive=this.options.filter(option=>option.selected),live=this.multiple?allLive:allLive.slice(0,1),initialLive=this.options.filter(option=>wasOptionInitiallySelected(option)),optionDirty=this.options.some(option=>isOptionSelectedDirty(option)),dirtySelected=this.options.filter(option=>isOptionSelectedDirty(option)&&option.selected);if(explicitDefault)this._defaultSelectedOptions=this.resolveOccurrences(this._defaultSelected);else{const resetOptions=defaults.length>0?defaults:initialLive.length>0?initialLive:live;this._defaultSelected=resetOptions.map(option=>option.value),this._defaultSelectedOptions=[...resetOptions]}const fromDefaults=explicitDefault||defaults.length>0,initial=optionDirty?this.multiple?allLive:dirtySelected.slice(-1)[0]?dirtySelected.slice(-1):live:explicitDefault?this._defaultSelectedOptions:fromDefaults?defaults:live;if(initial.length>0&&!this._restoredStateActive&&!this._valueDirty){(!fromDefaults||optionDirty)&&(this._valueDirty=!0),this.setSelection(initial.map(option=>option.value),[...initial]);return}if(optionDirty&&(this._valueDirty=!0),explicitDefault&&!this._valueDirty&&!this._restoredStateActive){this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions]);return}}this.reflectSelected()}refreshOptionDefaults(){if(this.hasAttribute("default-value")||this._defaultValueDirty)return;const declared=this.options.filter(option=>option.defaultSelected),defaults=this.multiple?declared:declared.slice(0,1);this._defaultSelected=defaults.map(option=>option.value),this._defaultSelectedOptions=[...defaults],!this._valueDirty&&!this._restoredStateActive&&this.setSelection([...this._defaultSelected],[...this._defaultSelectedOptions])}reflectSelected(){this._selectedOptions=this.resolveOccurrences(this._selected,this._selectedOptions),this._selectedValuesByOption=new Map(this._selectedOptions.map(option=>[option,option.value]));const chosen=new Set(this._selectedOptions);for(const option of this.options)option[SET_OPTION_SELECTED_FROM_OWNER](chosen.has(option))}selectUnknownValue(value){if(this.hasInteracted=!0,this._restoredStateActive=!1,this._valueDirty=!0,this.multiple){const index=this._selected.indexOf(value),values=index>=0?this._selected.filter((_,position)=>position!==index):[...this._selected,value];this.setSelection(values,this.resolveOccurrences(values,this._selectedOptions)),this.emitValueEvents(),this.emit("lr-activate",{value});return}this.hide(),this.emit("lr-activate",{value})}resolvedLabelFor(value,occurrenceIndex=0){return(this._selectedOptions[occurrenceIndex]?.value===value?this._selectedOptions[occurrenceIndex]?.label:void 0)??this._selectedOptions.find(option=>option.value===value)?.label??this.options.find(option=>option.value===value)?.label}labelFor(value,occurrenceIndex=0){const resolved=this.resolvedLabelFor(value,occurrenceIndex);if(resolved!==void 0)return resolved;if(this.loading)return this.localize("loading");const override=this.getUnknownLabel?.(value);return override!==void 0&&override.trim().length>0?override:value}isUnknownValue(value,occurrenceIndex=0){return this.loading?!1:this.resolvedLabelFor(value,occurrenceIndex)===void 0}get onlyOption(){if(!this.autoCommitSingleOption)return;const navigable=this.navigableOptions(this.options);return navigable.length===1?navigable[0]:void 0}isOptionAvailable(option){return!option.disabled&&!option.inert&&!option.closest("[inert]")}navigableOptions(options=this.listboxOptions){return options.filter(option=>this.isOptionAvailable(option))}get unknownValues(){return this.showUnknownOption?this._selected.filter((value,index)=>this.isUnknownValue(value,index)):[]}get unknownOptions(){const values=this.unknownValues;if(values.length===0)return this.unknownOptionCache.clear(),[];for(const key of[...this.unknownOptionCache.keys()])values.includes(key)||this.unknownOptionCache.delete(key);return values.map(value=>{let option=this.unknownOptionCache.get(value);return option||(option=this.ownerDocument.createElement(tag("option")),this.unknownOptionCache.set(value,option)),option.value=value,option.label=this.labelFor(value),option})}get listboxOptions(){const unknown=this.unknownOptions;return unknown.length===0?this.options:[...this.options,...unknown]}setActiveIndex(next,navigable=this.navigableOptions()){if(next<0||navigable.length===0){this.activeIndex=-1,this.activeOption=void 0;return}const index=Math.min(next,navigable.length-1);this.activeIndex=index,this.activeOption=navigable[index]}reconcileActiveOption(previousActive,previousRawIndex){if(!previousActive&&this.activeIndex<0)return;const navigable=this.navigableOptions();if(previousActive){const preservedIndex=navigable.indexOf(previousActive);if(preservedIndex>=0){this.setActiveIndex(preservedIndex,navigable);return}}if(navigable.length===0){this.setActiveIndex(-1,navigable);return}const pivot=Math.max(0,previousRawIndex);let nearestIndex=0,nearestDistance=Number.POSITIVE_INFINITY,nearestRawIndex=-1;navigable.forEach((option,index)=>{const rawIndex=this.listboxOptions.indexOf(option),distance=Math.abs(rawIndex-pivot);(distance<nearestDistance||distance===nearestDistance&&rawIndex>=pivot&&nearestRawIndex<pivot)&&(nearestIndex=index,nearestDistance=distance,nearestRawIndex=rawIndex)}),this.setActiveIndex(nearestIndex,navigable)}show(){if(this.open||this.effectiveDisabled)return Promise.resolve();this.resolveTransitionWaiters("lr-after-hide");const settled=this.waitForTransition("lr-after-show");return this.open=!0,settled}hide(){if(!this.open)return Promise.resolve();this.resolveTransitionWaiters("lr-after-show");const settled=this.waitForTransition("lr-after-hide");return this.open=!1,settled}positionListbox(){this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=this.effectiveDirection;const anchor=this.renderRoot.querySelector('[part="trigger"]'),listbox=this.renderRoot.querySelector('[part="listbox"]');!anchor||!listbox||(this.cleanup=place(anchor,listbox,{placement:rtlAwarePlacement(this.placement,this),strategy:resolveEffectivePositioningStrategy(this,this._positioningStrategy,"absolute"),sync:this.sync}),this.positioningReady=this.cleanup.ready)}activateListboxOverlay(){this.cleanup?.(),this.cleanup=void 0,this.overlayHandle?.deactivate({restoreFocus:!1}),this.restoreFocusOnClose=!0,this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part="listbox"]'),onEscape:()=>{this.hide()},onBackdrop:()=>{this.restoreFocusOnClose=!1,this.hide()},restoreFocusTo:this.triggerElement??null}),this.bindDocumentPointer(),this.positionListbox()}teardownListboxOverlay(restoreFocus=this.restoreFocusOnClose){this.cleanup?.(),this.cleanup=void 0,this.positionedDirection=void 0,this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0,this.unbindDocumentPointer(),this.restoreFocusOnClose=!0}bindDocumentPointer(){if(!this.isConnected)return;const ownerDocument=this.ownerDocument;if(this.pointerListenerDocument===ownerDocument&&this.pointerListener)return;this.unbindDocumentPointer();const listener=event=>{this.pointerListener!==listener||this.pointerListenerDocument!==ownerDocument||!this.isConnected||this.ownerDocument!==ownerDocument||this.onDocPointer(event)};this.pointerListenerDocument=ownerDocument,this.pointerListener=listener,ownerDocument.addEventListener("pointerdown",listener,!0)}unbindDocumentPointer(){this.pointerListenerDocument&&this.pointerListener&&this.pointerListenerDocument.removeEventListener("pointerdown",this.pointerListener,!0),this.pointerListenerDocument=void 0,this.pointerListener=void 0}reconnectOpenPopup(){!this.isConnected||!this.open||this.activateListboxOverlay()}updated(changed){super.updated(changed),this.syncExternalDescription();const suppressOpenLifecycle=changed.has("open")&&this.suppressedOpenLifecycleGeneration===this.openStateGeneration,shouldRefreshPosition=this.open&&this.isConnected&&(changed.has("placement")||changed.has("positioningStrategy")||changed.has("sync")||this.positionedDirection!==this.effectiveDirection);changed.has("open")&&!this.openVetoed?this.open&&this.isConnected?(this.activateListboxOverlay(),!this._isFirstUpdate&&!suppressOpenLifecycle&&this.settleTransition("lr-after-show")):this.open?this.teardownListboxOverlay(!1):(this.teardownListboxOverlay(),!this._isFirstUpdate&&!suppressOpenLifecycle&&this.settleTransition("lr-after-hide")):changed.has("open")&&this.openVetoed?(this.restoreFocusOnClose=!0,shouldRefreshPosition&&this.positionListbox()):shouldRefreshPosition&&this.positionListbox(),(changed.has("touched")||changed.has("required")||changed.has("value"))&&this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid),changed.has("open")&&(this.pendingOpenTransitionStart=void 0,this.suppressedOpenLifecycleGeneration=void 0)}async settleTransition(event){const token=++this.transitionToken;if(await this.updateComplete,this.transitionToken===token){if(event==="lr-after-show"){for(;this.open;){const readiness=this.positioningReady,positioned=await readiness;if(this.transitionToken!==token)return;if(positioned)break;if(readiness===this.positioningReady){this.forceCloseOpenState();return}}if(await this.updateComplete,this.transitionToken!==token)return}if(this.isConnected){const view=this.ownerDocument.defaultView;if(view&&await new Promise(resolve=>view.requestAnimationFrame(()=>resolve())),this.transitionToken!==token)return;const animations=this.renderRoot.querySelector('[part="listbox"]')?.getAnimations({subtree:!0})??[];if(await Promise.all(animations.map(animation=>animation.finished.catch(()=>{}))),this.transitionToken!==token)return}this.emit(event),this.resolveTransitionWaiters(event)}}waitForTransition(event){return new Promise(resolve=>{const waiters=this.transitionWaiters.get(event)??new Set;waiters.add(resolve),this.transitionWaiters.set(event,waiters)})}resolveTransitionWaiters(event){const waiters=this.transitionWaiters.get(event);if(waiters){this.transitionWaiters.delete(event);for(const resolve of waiters)resolve()}}emitValueEvents(){const self=this,data=this.selectedData;dispatchNativeInputEvent(this),self.emit("lr-input",{value:self.value,data}),dispatchNativeEvent(this,"change"),self.emit("lr-change",{value:self.value,data})}assignValue(next){this.value=next}assignDefaultValue(next){this.defaultValue=next}selectOption(option){if(this.effectiveDisabled||!this.isOptionAvailable(option))return;if(this.unknownOptionCache.get(option.value)===option){this.selectUnknownValue(option.value);return}if(this.hasInteracted=!0,this._restoredStateActive=!1,this._valueDirty=!0,this.multiple){const selectedIndex=this._selectedOptions.indexOf(option),selected=selectedIndex>=0,occurrences=selected?this._selectedOptions.filter((_,index)=>index!==selectedIndex):[...this._selectedOptions,option],values=selected?this._selected.filter((_,index)=>index!==selectedIndex):[...this._selected,option.value];this.setSelection(values,occurrences),this.emitValueEvents(),this.emit("lr-activate",{value:option.value});return}const changed=option!==this._selectedOptions[0]||option.value!==this._selected[0];this.setSelection([option.value],[option]),this.hide(),changed&&this.emitValueEvents(),this.emit("lr-activate",{value:option.value})}removeValueAt(index){this.effectiveDisabled||index<0||index>=this._selected.length||(this._restoredStateActive=!1,this._valueDirty=!0,this.setSelection(this._selected.filter((_,candidateIndex)=>candidateIndex!==index),this._selectedOptions.filter((_,candidateIndex)=>candidateIndex!==index)),this.emitValueEvents())}clear(){this.effectiveDisabled||this._selected.length===0||(this._restoredStateActive=!1,this._valueDirty=!0,this.setSelection([],[]),this.emitValueEvents(),this.emit("lr-clear"))}removeTag(value,index,event){event.stopPropagation(),this._selected[index]===value&&(this.removeValueAt(index),this.updateComplete.then(()=>{const buttons=[...this.renderRoot.querySelectorAll('[part~="tag__remove-button"]')];(buttons[Math.min(index,buttons.length-1)]??this.triggerElement)?.focus()}))}typeAhead(char){this.clearTypeAheadTimer(),this.typeAheadBuffer+=char.toLocaleLowerCase(this.effectiveLocale);const ownerWindow=this.ownerDocument.defaultView;this.isConnected&&ownerWindow&&this.typeAheadReset.push(ownerWindow);const navigable=this.navigableOptions();if(!navigable.length)return;const currentOption=this.open?navigable[this.activeIndex]:this._selectedOptions[this._selectedOptions.length-1],currentIndex=navigable.indexOf(currentOption),n=navigable.length;for(let step=1;step<=n;step++){const idx=(currentIndex+step+n)%n,candidate=navigable[idx];if(candidate!==void 0&&candidate.label.toLocaleLowerCase(this.effectiveLocale).startsWith(this.typeAheadBuffer)){if(this.open){this.setActiveIndex(idx,navigable);return}if(this.multiple&&this._selectedOptions.includes(candidate))continue;this.selectOption(candidate);return}}}clearTypeAheadTimer(){this.typeAheadReset.cancel()}adornmentMarkup(option){return Array.from(option.children).filter(child=>["start","end","prefix","suffix"].includes(child.getAttribute("slot")??"")).map(child=>child.outerHTML).join("")}adornmentsFor(option){const cached=this.adornmentClones.get(option);if(cached)return cached;const cloneSlot=selector=>{const nodes=Array.from(option.querySelectorAll(selector));if(nodes.length!==0)return nodes.map(node=>node.cloneNode(!0))},resolved={markup:this.adornmentMarkup(option),start:cloneSlot(':scope > [slot="start"], :scope > [slot="prefix"]'),end:cloneSlot(':scope > [slot="end"], :scope > [slot="suffix"]')};return this.adornmentClones.set(option,resolved),resolved}renderRows(options,activeId){const out=[],chosen=new Set(this._selectedOptions);let currentGroup,groupRows=[],groupIndex=0;const flushGroup=()=>{if(groupRows.length!==0){if(currentGroup){const labelId=`${this.listId}-group-${groupIndex++}`;out.push(html`<div role="group" aria-labelledby=${labelId}>
|
|
2
2
|
<div id=${labelId} class="group-label" part="group-label">${currentGroup}</div>
|
|
3
3
|
${groupRows}
|
|
4
4
|
</div>`)}else out.push(...groupRows);groupRows=[]}};return options.forEach((o,i)=>{o.group!==currentGroup&&(flushGroup(),currentGroup=o.group);const id=`${this.listId}-opt-${i}`,unknown=this.unknownOptionCache.get(o.value)===o,selected=unknown||chosen.has(o),adornments=this.adornmentsFor(o);groupRows.push(html`<div
|
|
@@ -37,7 +37,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
37
37
|
>
|
|
38
38
|
${closeIcon()}
|
|
39
39
|
</button>
|
|
40
|
-
</span>`}render(){const options=this.listboxOptions,navigable=this.navigableOptions(options),active=this.activeIndex>=0?navigable[this.activeIndex]:void 0,activeId=active?`${this.listId}-opt-${options.indexOf(active)}`:"",selectedLabel=this._selected.length>0?this.labelFor(this._selected[0]):"",selectedLabels=this._selected.map((value,index)=>this.labelFor(value,index)).join(", "),hasValue=this._selected.length>0,singleValueUnknown=hasValue&&!this.multiple&&this.isUnknownValue(this._selected[0]),shownValues=this.maxOptionsVisible>0?this._selected.slice(0,this.maxOptionsVisible):this._selected,overflow=this._selected.length-shownValues.length,showClear=(this.withClear||this.clearable)&&hasValue,hasHint=this.slotPresence.has("hint")||this.slotPresence.has("help-text")||(this.hint??"").length>0||(this.helpText??"").length>0||this.withHint,hasError=this.slotPresence.has("error")||(this.errorText??"").length>0,hasLabel=this.slotPresence.has("label")||(this.label??"").length>0||this.withLabel,describedBy=this.localDescriptionIds=[this.multiple&&hasValue?this.valueTextId:"",hasError?"select-error":"",hasHint?"select-hint":""].filter(Boolean).join(" "),isSingleOption=this.autoCommitSingleOption&&navigable.length===1;return html`
|
|
40
|
+
</span>`}render(){const options=this.listboxOptions,navigable=this.navigableOptions(options),active=this.activeIndex>=0?navigable[this.activeIndex]:void 0,activeId=active?`${this.listId}-opt-${options.indexOf(active)}`:"",selectedLabel=this._selected.length>0?this.labelFor(this._selected[0]):"",selectedLabels=this._selected.map((value,index)=>this.labelFor(value,index)).join(", "),hasValue=this._selected.length>0,emptyDisplayText=this.loading?this.localize("loading"):this.placeholder,singleValueUnknown=hasValue&&!this.multiple&&this.isUnknownValue(this._selected[0]),shownValues=this.maxOptionsVisible>0?this._selected.slice(0,this.maxOptionsVisible):this._selected,overflow=this._selected.length-shownValues.length,showClear=(this.withClear||this.clearable)&&hasValue,hasHint=this.slotPresence.has("hint")||this.slotPresence.has("help-text")||(this.hint??"").length>0||(this.helpText??"").length>0||this.withHint,hasError=this.slotPresence.has("error")||(this.errorText??"").length>0,hasLabel=this.slotPresence.has("label")||(this.label??"").length>0||this.withLabel,describedBy=this.localDescriptionIds=[this.multiple&&hasValue?this.valueTextId:"",hasError?"select-error":"",hasHint?"select-hint":""].filter(Boolean).join(" "),isSingleOption=this.autoCommitSingleOption&&navigable.length===1;return html`
|
|
41
41
|
<div part="form-control">
|
|
42
42
|
<label
|
|
43
43
|
part="form-control-label"
|
|
@@ -89,7 +89,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
89
89
|
?data-placeholder=${!hasValue}
|
|
90
90
|
?data-multiple-value=${this.multiple&&hasValue}
|
|
91
91
|
?data-unknown-value=${singleValueUnknown}
|
|
92
|
-
>${hasValue&&!this.multiple?selectedLabel:this.multiple&&hasValue?selectedLabels:
|
|
92
|
+
>${hasValue&&!this.multiple?selectedLabel:this.multiple&&hasValue?selectedLabels:emptyDisplayText}${singleValueUnknown?html`<span part="unknown-value">${this.localize("notInCatalog")}</span>`:""}</span
|
|
93
93
|
>
|
|
94
94
|
<span
|
|
95
95
|
part="end"
|
|
@@ -152,4 +152,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
152
152
|
@lr-option-change=${this.onOptionChange}
|
|
153
153
|
hidden
|
|
154
154
|
></slot>
|
|
155
|
-
`}}__decorate([property()],LyraSelect.prototype,"placeholder",void 0),__decorate([property()],LyraSelect.prototype,"label",void 0),__decorate([property()],LyraSelect.prototype,"hint",void 0),__decorate([property({attribute:"help-text"})],LyraSelect.prototype,"helpText",void 0),__decorate([property({type:Boolean,attribute:"with-label"})],LyraSelect.prototype,"withLabel",void 0),__decorate([property({type:Boolean,attribute:"with-hint"})],LyraSelect.prototype,"withHint",void 0),__decorate([property({attribute:"error-text"})],LyraSelect.prototype,"errorText",void 0),__decorate([property({type:Boolean})],LyraSelect.prototype,"autofocus",void 0),__decorate([property()],LyraSelect.prototype,"title",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraSelect.prototype,"open",null),__decorate([property({reflect:!0})],LyraSelect.prototype,"size",void 0),__decorate([property({reflect:!0})],LyraSelect.prototype,"appearance",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraSelect.prototype,"pill",void 0),__decorate([property({reflect:!0})],LyraSelect.prototype,"placement",void 0),__decorate([property({attribute:"positioning-strategy",reflect:!0,converter:POSITIONING_STRATEGY})],LyraSelect.prototype,"positioningStrategy",null),__decorate([property({type:Boolean,reflect:!0})],LyraSelect.prototype,"hoist",null),__decorate([property({type:Boolean,reflect:!0})],LyraSelect.prototype,"filled",void 0),__decorate([property({type:Boolean,reflect:!0,attribute:"with-clear"})],LyraSelect.prototype,"withClear",void 0),__decorate([property({type:Boolean})],LyraSelect.prototype,"clearable",void 0),__decorate([property({attribute:!1})],LyraSelect.prototype,"getTag",void 0),__decorate([property({type:Boolean,attribute:"show-unknown-option",reflect:!0})],LyraSelect.prototype,"showUnknownOption",void 0),__decorate([property({attribute:!1})],LyraSelect.prototype,"getUnknownLabel",void 0),__decorate([property({type:Boolean,attribute:"auto-commit-single-option"})],LyraSelect.prototype,"autoCommitSingleOption",void 0),__decorate([state()],LyraSelect.prototype,"activeIndex",void 0),__decorate([state()],LyraSelect.prototype,"options",void 0),__decorate([state()],LyraSelect.prototype,"touched",void 0),__decorate([query('[part="trigger"]')],LyraSelect.prototype,"triggerElement",void 0),__decorate([query("slot:not([name])")],LyraSelect.prototype,"optionsSlot",void 0);export{LyraSelect};
|
|
155
|
+
`}}__decorate([property()],LyraSelect.prototype,"placeholder",void 0),__decorate([property()],LyraSelect.prototype,"label",void 0),__decorate([property()],LyraSelect.prototype,"hint",void 0),__decorate([property({attribute:"help-text"})],LyraSelect.prototype,"helpText",void 0),__decorate([property({type:Boolean,attribute:"with-label"})],LyraSelect.prototype,"withLabel",void 0),__decorate([property({type:Boolean,attribute:"with-hint"})],LyraSelect.prototype,"withHint",void 0),__decorate([property({attribute:"error-text"})],LyraSelect.prototype,"errorText",void 0),__decorate([property({type:Boolean})],LyraSelect.prototype,"autofocus",void 0),__decorate([property()],LyraSelect.prototype,"title",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraSelect.prototype,"open",null),__decorate([property({reflect:!0})],LyraSelect.prototype,"size",void 0),__decorate([property({reflect:!0})],LyraSelect.prototype,"appearance",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraSelect.prototype,"pill",void 0),__decorate([property({reflect:!0})],LyraSelect.prototype,"placement",void 0),__decorate([property({reflect:!0})],LyraSelect.prototype,"sync",void 0),__decorate([property({attribute:"positioning-strategy",reflect:!0,converter:POSITIONING_STRATEGY})],LyraSelect.prototype,"positioningStrategy",null),__decorate([property({type:Boolean,reflect:!0})],LyraSelect.prototype,"hoist",null),__decorate([property({type:Boolean,reflect:!0})],LyraSelect.prototype,"filled",void 0),__decorate([property({type:Boolean,reflect:!0,attribute:"with-clear"})],LyraSelect.prototype,"withClear",void 0),__decorate([property({type:Boolean})],LyraSelect.prototype,"clearable",void 0),__decorate([property({attribute:!1})],LyraSelect.prototype,"getTag",void 0),__decorate([property({type:Boolean,attribute:"show-unknown-option",reflect:!0})],LyraSelect.prototype,"showUnknownOption",void 0),__decorate([property({attribute:!1})],LyraSelect.prototype,"getUnknownLabel",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraSelect.prototype,"loading",void 0),__decorate([property({type:Boolean,attribute:"auto-commit-single-option"})],LyraSelect.prototype,"autoCommitSingleOption",void 0),__decorate([state()],LyraSelect.prototype,"activeIndex",void 0),__decorate([state()],LyraSelect.prototype,"options",void 0),__decorate([state()],LyraSelect.prototype,"touched",void 0),__decorate([query('[part="trigger"]')],LyraSelect.prototype,"triggerElement",void 0),__decorate([query("slot:not([name])")],LyraSelect.prototype,"optionsSlot",void 0);export{LyraSelect};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";import{formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";import{overlaySurface}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: block; --_lr-select-trigger-padding: var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline); --_lr-select-trigger-min-height: var(--lr-form-control-height); --_lr-select-font-size: var(--lr-form-control-font-size); --_lr-select-expand-size: var(--lr-size-1-75rem); --_lr-select-gap: var(--lr-space-xs); --_lr-select-radius: var(--lr-form-control-radius); --_lr-select-tag-padding: var(--lr-space-2xs) var(--lr-space-xs); --_lr-select-tag-font-size: var(--lr-font-size-sm); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } :host([size="2xs"]), :host([size="xs"]) { --_lr-select-expand-size: var(--lr-size-1rem); } :host([size="s"]), :host([size="small"]) { --_lr-select-expand-size: var(--lr-size-1-25rem); } [part="form-control-label"] { display: block; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part="form-control-label"][hidden] { display: none; } ${formControlRequiredMarker} :host([pill]) { --_lr-select-radius: var(--lr-radius-pill); } :host([filled]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-surface-raised)); border-color: var(--lr-select-trigger-border-color, transparent); } .control { position: relative; display: grid; } .control > [part="trigger"], .control > [part="tags"] { grid-area: 1 / 1; } [part="trigger"] { display: flex; align-items: center; justify-content: space-between; gap: var(--lr-select-gap, var(--_lr-select-gap)); inline-size: 100%; min-inline-size: 0; min-block-size: var( --lr-select-trigger-height, var(--lr-select-trigger-min-height, var(--_lr-select-trigger-min-height)) ); box-sizing: border-box; block-size: var(--lr-select-trigger-height, auto); padding: var( --lr-select-trigger-padding, var(--_lr-select-trigger-padding) ); border: var(--lr-border-width-thin) solid var(--lr-select-trigger-border-color, var(--lr-color-border)); border-radius: var(--lr-select-radius, var(--_lr-select-radius)); background: var(--lr-select-trigger-fill, var(--lr-color-surface)); color: inherit; font: inherit; font-size: var(--lr-select-font-size, var(--_lr-select-font-size)); text-align: start; cursor: pointer; } [part="trigger"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="trigger"]:focus { ${formControlFocusHalo} } :where([part="trigger"]):hover:where(:not(:disabled)) { background: var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)); border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, var(--lr-color-border)) ); } :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([appearance="filled"]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-surface-raised)); border-color: var(--lr-select-trigger-border-color, transparent); } :host([appearance="filled-outlined"]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-surface-raised)); } :host([appearance="plain"]) [part="trigger"] { background: var(--lr-select-trigger-fill, transparent); border-color: var(--lr-select-trigger-border-color, transparent); } :host([appearance="accent"]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-brand)); border-color: var(--lr-select-trigger-border-color, transparent); color: var(--lr-color-on-brand); } :host([appearance="accent"]) [part="trigger"] .trigger-label[data-placeholder], :host([appearance="accent"]) [part="trigger"] [part="expand-icon"], :host([appearance="accent"]) [part="trigger"] [part="start"], :host([appearance="accent"]) [part="trigger"] [part="end"] { color: inherit; } :host([appearance="accent"]) [part~="tag"] { background: color-mix(in srgb, currentColor 20%, transparent); } :host([appearance="filled"]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([appearance="filled-outlined"]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([filled]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([appearance="plain"]) :where([part="trigger"]):hover:where(:not(:disabled)) { background: var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)); border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, transparent) ); } :host([appearance="filled-outlined"]) :where([part="trigger"]):hover:where(:not(:disabled)) { border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, var(--lr-color-border)) ); } :host([appearance="filled"]) :where([part="trigger"]):active:where(:not(:disabled)), :host([appearance="filled-outlined"]) :where([part="trigger"]):active:where(:not(:disabled)), :host([filled]) :where([part="trigger"]):active:where(:not(:disabled)), :host([appearance="plain"]) :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([appearance="accent"]) :where([part="trigger"]):hover:where(:not(:disabled)) { background: var( --lr-select-trigger-hover-bg, color-mix( in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-hover) ) ); border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, transparent) ); } :host([appearance="accent"]) :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([open]) [part="trigger"] { border-color: var(--lr-select-open-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host(:disabled) [part="trigger"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="start"], [part="end"] { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--lr-color-text-quiet); pointer-events: none; } [part="start"][hidden], [part="end"][hidden] { display: none; } .trigger-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trigger-label[data-placeholder] { color: var(--lr-color-text-quiet); } [part="tags"] { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--lr-space-2xs); min-inline-size: 0; } .control > [part="tags"] { z-index: var(--lr-layer-content); align-self: center; margin-inline-start: var(--lr-form-control-padding-inline); margin-inline-end: calc( var(--lr-select-expand-size, var(--_lr-select-expand-size)) + var(--lr-form-control-padding-inline) ); padding-block: var(--lr-form-control-padding-block); pointer-events: none; } [part~="tag"] { display: inline-flex; align-items: center; box-sizing: border-box; max-inline-size: min(100%, var(--tag-max-size, var(--lr-size-12rem))); padding: var(--lr-select-tag-padding, var(--_lr-select-tag-padding)); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface-raised); font-size: var(--lr-select-tag-font-size, var(--_lr-select-tag-font-size)); line-height: var(--lr-line-height-none); pointer-events: auto; } [part="tag-label"] { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part~="tag-overflow"] { color: var(--lr-color-text-quiet); white-space: nowrap; } [part~="tag__remove-button"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); margin-block: calc(var(--lr-space-2xs) * -1); margin-inline-end: calc(var(--lr-space-xs) * -1); padding: var(--lr-space-2xs); border: none; border-radius: var(--lr-radius-xs); background: transparent; color: var(--lr-color-text-quiet); font: inherit; cursor: pointer; } [part~="tag__remove-button"]:hover { color: var(--lr-color-text); background: var(--lr-color-brand-quiet); } [part~="tag__remove-button"]:active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="tag__remove-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="tag__remove-button"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="clear-button"] { position: absolute; z-index: var(--lr-layer-content); inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: var(--lr-space-2xs); border: none; border-radius: var(--lr-select-radius, var(--_lr-select-radius)); background: none; color: var(--lr-color-text-quiet); font: inherit; line-height: var(--lr-line-height-none); cursor: pointer; } .control[data-clearable] [part="trigger"] { padding-inline-end: var(--lr-icon-button-size); } [part="clear-button"]:hover { color: var(--lr-color-text); } [part="clear-button"]:active { color: var(--lr-color-text); background: color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="clear-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="clear-button"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="expand-icon"] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); min-inline-size: min( var(--lr-icon-button-size), var(--lr-select-expand-size, var(--_lr-select-expand-size)) ); min-block-size: min( var(--lr-icon-button-size), var(--lr-select-expand-size, var(--_lr-select-expand-size)) ); line-height: var(--lr-line-height-none); } [part="expand-icon"] svg { transform: rotate(90deg); } [part="listbox"] { position: absolute; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); box-sizing: border-box; max-block-size: var(--lr-size-18rem); overflow-y: auto; overflow-x: hidden; inline-size: max-content; min-inline-size: var(--lr-size-12rem); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-28rem) ); padding: var(--lr-space-xs); ${overlaySurface} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--hide-duration, var(--lr-transition-fast)), transform var(--hide-duration, var(--lr-transition-fast)), visibility var(--hide-duration, var(--lr-transition-fast)); } :host([hoist]) [part="listbox"] { position: fixed; } :host([open]) [part="listbox"] { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity var(--show-duration, var(--lr-transition-fast)), transform var(--show-duration, var(--lr-transition-fast)), visibility var(--show-duration, var(--lr-transition-fast)); } :host(:disabled) [part="listbox"] { visibility: hidden; opacity: 0; pointer-events: none; transition: none; } @media (prefers-reduced-motion: reduce) { [part="listbox"] { transition: none !important; } } [part="option"] { display: flex; flex-direction: row; align-items: center; gap: var(--lr-space-xs); inline-size: 100%; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var(--lr-radius); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } [part="option"][aria-selected="true"] { background: var(--lr-select-option-selected-bg, transparent); border-color: var( --lr-select-option-selected-border, var(--lr-color-brand) ); color: var(--lr-select-option-selected-color, var(--lr-color-brand)); font-weight: var( --lr-select-option-selected-font-weight, var(--lr-font-weight-semibold) ); } [part="option"]:where(:not([aria-disabled="true"])):hover, [part="option"][data-active] { background: var(--lr-select-option-active-bg, var(--lr-color-brand-quiet)); } [part="option"]:where(:not([aria-disabled="true"])):active { background: color-mix( in oklab, var(--lr-select-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="option"][aria-disabled="true"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="option-dot"] { inline-size: var(--lr-size-0-5rem); block-size: var(--lr-size-0-5rem); border-radius: 50%; flex: 0 0 auto; } [part="option-start"], [part="option-end"] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; max-inline-size: 40%; overflow: hidden; } [part="option-label"] { display: flex; flex-direction: column; min-inline-size: 0; } [part="option-sub"] { font-size: var(--lr-font-size-xs); color: var(--lr-color-text-quiet); } .trigger-label[data-unknown-value], [part~="tag"][data-unknown-value] [part="tag__content"] { font-style: italic; } [part~="tag"][data-unknown-value] { border: var(--lr-border-width-thin) var(--lr-select-unknown-value-border-style, dashed) var(--lr-select-unknown-value-border-color, var(--lr-color-border)); } [part~="option"][data-unknown-value] [part="option-label"] { font-style: italic; } [part~="option"][data-unknown-value] { border: var(--lr-border-width-thin) var(--lr-select-unknown-value-border-style, dashed) var(--lr-select-unknown-value-border-color, var(--lr-color-border)); } [part="option-badge"] { flex: 0 0 auto; margin-inline-start: auto; padding: 0 var(--lr-space-xs); border-radius: var(--lr-radius-pill); background: var(--lr-select-option-badge-bg, var(--lr-color-brand-quiet)); color: var(--lr-color-text); font-size: var(--lr-font-size-xs); font-style: normal; } [part="unknown-value"] { margin-inline-start: var(--lr-space-2xs); font-size: var(--lr-size-0-6875rem); font-style: normal; font-weight: var(--lr-font-weight-normal); color: var(--lr-color-text-quiet); } [part="form-control"], [part="form-control-label"], [part~="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } [part="option"] { box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; } [part="option-label"] { max-inline-size: 100%; overflow-wrap: anywhere; } [part="option-sub"], .group-label { overflow-wrap: anywhere; } .group-label { padding: var(--lr-space-xs) var(--lr-space-s) 0; font-size: var(--lr-size-0-6875rem); font-weight: var(--lr-font-weight-bold); text-transform: uppercase; letter-spacing: var(--lr-size-0-04em); color: var(--lr-color-text-quiet); } [part~="hint"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part~="hint"][hidden] { display: none; } [part="error"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part="error"][hidden] { display: none; } `;export{styles};
|
|
1
|
+
import{css}from"lit";import{formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";import{overlaySurface}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: block; --_lr-select-trigger-padding: var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline); --_lr-select-trigger-min-height: var(--lr-form-control-height); --_lr-select-font-size: var(--lr-form-control-font-size); --_lr-select-expand-size: var(--lr-size-1-75rem); --_lr-select-gap: var(--lr-space-xs); --_lr-select-radius: var(--lr-form-control-radius); --_lr-select-tag-padding: var(--lr-space-2xs) var(--lr-space-xs); --_lr-select-tag-font-size: var(--lr-font-size-sm); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } :host([size="2xs"]), :host([size="xs"]) { --_lr-select-expand-size: var(--lr-size-1rem); } :host([size="s"]), :host([size="small"]) { --_lr-select-expand-size: var(--lr-size-1-25rem); } [part="form-control-label"] { display: block; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part="form-control-label"][hidden] { display: none; } ${formControlRequiredMarker} :host([pill]) { --_lr-select-radius: var(--lr-radius-pill); } :host([filled]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-surface-raised)); border-color: var(--lr-select-trigger-border-color, transparent); } .control { position: relative; display: grid; } .control > [part="trigger"], .control > [part="tags"] { grid-area: 1 / 1; } [part="trigger"] { display: flex; align-items: center; justify-content: space-between; gap: var(--lr-select-gap, var(--_lr-select-gap)); inline-size: 100%; min-inline-size: 0; min-block-size: var( --lr-select-trigger-height, var(--lr-select-trigger-min-height, var(--_lr-select-trigger-min-height)) ); box-sizing: border-box; block-size: var(--lr-select-trigger-height, auto); padding: var( --lr-select-trigger-padding, var(--_lr-select-trigger-padding) ); border: var(--lr-border-width-thin) solid var(--lr-select-trigger-border-color, var(--lr-color-border)); border-radius: var(--lr-select-radius, var(--_lr-select-radius)); background: var(--lr-select-trigger-fill, var(--lr-color-surface)); color: inherit; font: inherit; font-size: var(--lr-select-font-size, var(--_lr-select-font-size)); text-align: start; cursor: pointer; } [part="trigger"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="trigger"]:focus { ${formControlFocusHalo} } :where([part="trigger"]):hover:where(:not(:disabled)) { background: var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)); border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, var(--lr-color-border)) ); } :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([appearance="filled"]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-surface-raised)); border-color: var(--lr-select-trigger-border-color, transparent); } :host([appearance="filled-outlined"]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-surface-raised)); } :host([appearance="plain"]) [part="trigger"] { background: var(--lr-select-trigger-fill, transparent); border-color: var(--lr-select-trigger-border-color, transparent); } :host([appearance="accent"]) [part="trigger"] { background: var(--lr-select-trigger-fill, var(--lr-color-brand)); border-color: var(--lr-select-trigger-border-color, transparent); color: var(--lr-color-on-brand); } :host([appearance="accent"]) [part="trigger"] .trigger-label[data-placeholder], :host([appearance="accent"]) [part="trigger"] [part="expand-icon"], :host([appearance="accent"]) [part="trigger"] [part="start"], :host([appearance="accent"]) [part="trigger"] [part="end"] { color: inherit; } :host([appearance="accent"]) [part~="tag"] { background: color-mix(in srgb, currentColor 20%, transparent); } :host([appearance="filled"]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([appearance="filled-outlined"]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([filled]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([appearance="plain"]) :where([part="trigger"]):hover:where(:not(:disabled)) { background: var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)); border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, transparent) ); } :host([appearance="filled-outlined"]) :where([part="trigger"]):hover:where(:not(:disabled)) { border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, var(--lr-color-border)) ); } :host([appearance="filled"]) :where([part="trigger"]):active:where(:not(:disabled)), :host([appearance="filled-outlined"]) :where([part="trigger"]):active:where(:not(:disabled)), :host([filled]) :where([part="trigger"]):active:where(:not(:disabled)), :host([appearance="plain"]) :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([appearance="accent"]) :where([part="trigger"]):hover:where(:not(:disabled)) { background: var( --lr-select-trigger-hover-bg, color-mix( in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-hover) ) ); border-color: var( --lr-select-trigger-hover-border-color, var(--lr-select-trigger-border-color, transparent) ); } :host([appearance="accent"]) :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([open]) [part="trigger"] { border-color: var(--lr-select-open-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host(:disabled) [part="trigger"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="start"], [part="end"] { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--lr-color-text-quiet); pointer-events: none; } [part="start"][hidden], [part="end"][hidden] { display: none; } .trigger-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trigger-label[data-placeholder] { color: var(--lr-color-text-quiet); } [part="tags"] { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--lr-space-2xs); min-inline-size: 0; } .control > [part="tags"] { z-index: var(--lr-layer-content); align-self: center; margin-inline-start: var(--lr-form-control-padding-inline); margin-inline-end: calc( var(--lr-select-expand-size, var(--_lr-select-expand-size)) + var(--lr-form-control-padding-inline) ); padding-block: var(--lr-form-control-padding-block); pointer-events: none; } [part~="tag"] { display: inline-flex; align-items: center; box-sizing: border-box; max-inline-size: min(100%, var(--tag-max-size, var(--lr-size-12rem))); padding: var(--lr-select-tag-padding, var(--_lr-select-tag-padding)); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface-raised); font-size: var(--lr-select-tag-font-size, var(--_lr-select-tag-font-size)); line-height: var(--lr-line-height-none); pointer-events: auto; } [part="tag-label"] { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part~="tag-overflow"] { color: var(--lr-color-text-quiet); white-space: nowrap; } [part~="tag__remove-button"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); margin-block: calc(var(--lr-space-2xs) * -1); margin-inline-end: calc(var(--lr-space-xs) * -1); padding: var(--lr-space-2xs); border: none; border-radius: var(--lr-radius-xs); background: transparent; color: var(--lr-color-text-quiet); font: inherit; cursor: pointer; } [part~="tag__remove-button"]:hover { color: var(--lr-color-text); background: var(--lr-color-brand-quiet); } [part~="tag__remove-button"]:active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="tag__remove-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="tag__remove-button"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="clear-button"] { position: absolute; z-index: var(--lr-layer-content); inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: var(--lr-space-2xs); border: none; border-radius: var(--lr-select-radius, var(--_lr-select-radius)); background: none; color: var(--lr-color-text-quiet); font: inherit; line-height: var(--lr-line-height-none); cursor: pointer; } .control[data-clearable] [part="trigger"] { padding-inline-end: var(--lr-icon-button-size); } [part="clear-button"]:hover { color: var(--lr-color-text); } [part="clear-button"]:active { color: var(--lr-color-text); background: color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="clear-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="clear-button"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="expand-icon"] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); min-inline-size: min( var(--lr-icon-button-size), var(--lr-select-expand-size, var(--_lr-select-expand-size)) ); min-block-size: min( var(--lr-icon-button-size), var(--lr-select-expand-size, var(--_lr-select-expand-size)) ); line-height: var(--lr-line-height-none); } [part="expand-icon"] svg { transform: rotate(90deg); } [part="listbox"] { position: absolute; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); box-sizing: border-box; max-block-size: var(--lr-size-18rem); overflow-y: auto; overflow-x: hidden; inline-size: max-content; padding: var(--lr-space-xs); ${overlaySurface} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--hide-duration, var(--lr-transition-fast)), transform var(--hide-duration, var(--lr-transition-fast)), visibility var(--hide-duration, var(--lr-transition-fast)); } :host(:not([sync="width"]):not([sync="both"])) [part="listbox"] { min-inline-size: var(--lr-size-12rem); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-28rem) ); } :host([sync="width"]) [part="listbox"], :host([sync="both"]) [part="listbox"] { max-inline-size: var(--lr-positioner-available-inline-size, 100vw); } :host([hoist]) [part="listbox"] { position: fixed; } :host([open]) [part="listbox"] { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity var(--show-duration, var(--lr-transition-fast)), transform var(--show-duration, var(--lr-transition-fast)), visibility var(--show-duration, var(--lr-transition-fast)); } :host(:disabled) [part="listbox"] { visibility: hidden; opacity: 0; pointer-events: none; transition: none; } @media (prefers-reduced-motion: reduce) { [part="listbox"] { transition: none !important; } } [part="option"] { display: flex; flex-direction: row; align-items: center; gap: var(--lr-space-xs); inline-size: 100%; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var(--lr-radius); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } [part="option"][aria-selected="true"] { background: var(--lr-select-option-selected-bg, transparent); border-color: var( --lr-select-option-selected-border, var(--lr-color-brand) ); color: var(--lr-select-option-selected-color, var(--lr-color-brand)); font-weight: var( --lr-select-option-selected-font-weight, var(--lr-font-weight-semibold) ); } [part="option"]:where(:not([aria-disabled="true"])):hover, [part="option"][data-active] { background: var(--lr-select-option-active-bg, var(--lr-color-brand-quiet)); } [part="option"]:where(:not([aria-disabled="true"])):active { background: color-mix( in oklab, var(--lr-select-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="option"][aria-disabled="true"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="option-dot"] { inline-size: var(--lr-size-0-5rem); block-size: var(--lr-size-0-5rem); border-radius: 50%; flex: 0 0 auto; } [part="option-start"], [part="option-end"] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; max-inline-size: 40%; overflow: hidden; } [part="option-label"] { display: flex; flex-direction: column; min-inline-size: 0; } [part="option-sub"] { font-size: var(--lr-font-size-xs); color: var(--lr-color-text-quiet); } .trigger-label[data-unknown-value], [part~="tag"][data-unknown-value] [part="tag__content"] { font-style: italic; } [part~="tag"][data-unknown-value] { border: var(--lr-border-width-thin) var(--lr-select-unknown-value-border-style, dashed) var(--lr-select-unknown-value-border-color, var(--lr-color-border)); } [part~="option"][data-unknown-value] [part="option-label"] { font-style: italic; } [part~="option"][data-unknown-value] { border: var(--lr-border-width-thin) var(--lr-select-unknown-value-border-style, dashed) var(--lr-select-unknown-value-border-color, var(--lr-color-border)); } [part="option-badge"] { flex: 0 0 auto; margin-inline-start: auto; padding: 0 var(--lr-space-xs); border-radius: var(--lr-radius-pill); background: var(--lr-select-option-badge-bg, var(--lr-color-brand-quiet)); color: var(--lr-color-text); font-size: var(--lr-font-size-xs); font-style: normal; } [part="unknown-value"] { margin-inline-start: var(--lr-space-2xs); font-size: var(--lr-size-0-6875rem); font-style: normal; font-weight: var(--lr-font-weight-normal); color: var(--lr-color-text-quiet); } [part="form-control"], [part="form-control-label"], [part~="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } [part="option"] { box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; } [part="option-label"] { max-inline-size: 100%; overflow-wrap: anywhere; } [part="option-sub"], .group-label { overflow-wrap: anywhere; } .group-label { padding: var(--lr-space-xs) var(--lr-space-s) 0; font-size: var(--lr-size-0-6875rem); font-weight: var(--lr-font-weight-bold); text-transform: uppercase; letter-spacing: var(--lr-size-0-04em); color: var(--lr-color-text-quiet); } [part~="hint"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part~="hint"][hidden] { display: none; } [part="error"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part="error"][hidden] { display: none; } `;export{styles};
|