660 lines
37 KiB
JavaScript
660 lines
37 KiB
JavaScript
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{$n as t,Ar as n,Bn as r,Cr as i,Dr as ee,Er as te,Fn as a,Gn as ne,Hn as o,In as re,Kn as ie,Ln as ae,Mr as oe,Or as se,Pn as s,Qn as ce,Rn as le,Sr as c,Tr as ue,Un as l,Vn as u,Wn as d,Xn as de,Zn as fe,_r as f,ar as p,br as m,cr as h,dr as pe,fr as me,gr as he,ir as g,jr as ge,kr as _e,mr as ve,pr as ye,qn as _,vr as v,wr as be,xr as y,yr as b,zn as x}from"./control-ui-foundation-CeFMP1Ly.js";import{B as S,G as C,J as w,W as T,Z as E,at as D,et as O,ft as k,i as xe,lt as A,n as Se,rt as j,z as Ce}from"./lit-runtime-BEtFSUCp.js";import{D as we,E as Te,T as M,w as Ee}from"./control-ui-boot-wpHCbPL9.js";var N;function P(){return(P=e((()=>{T(),N=A`
|
|
:host {
|
|
--current-text-color: var(--wa-color-brand-on-loud);
|
|
|
|
display: block;
|
|
color: var(--wa-color-text-normal);
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
font: inherit;
|
|
padding: 0.5em 1em 0.5em 0.25em;
|
|
border-radius: var(--wa-border-radius-s);
|
|
line-height: var(--wa-line-height-condensed);
|
|
transition: var(--wa-transition-fast) background-color var(--wa-transition-easing);
|
|
cursor: pointer;
|
|
}
|
|
|
|
:host(:focus) {
|
|
outline: none;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
:host(:not(:state(disabled), :state(current)):is(:state(hover), :hover)) {
|
|
background-color: var(--wa-color-neutral-fill-normal);
|
|
color: var(--wa-color-neutral-on-normal);
|
|
}
|
|
}
|
|
|
|
:host(:state(current)),
|
|
:host(:state(disabled):state(current)) {
|
|
background-color: var(--wa-form-control-activated-color);
|
|
color: var(--current-text-color);
|
|
opacity: 1;
|
|
}
|
|
|
|
:host(:state(disabled)) {
|
|
outline: none;
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.label {
|
|
flex: 1 1 auto;
|
|
display: inline-block;
|
|
}
|
|
|
|
.check {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--wa-font-size-smaller);
|
|
visibility: hidden;
|
|
width: 2em;
|
|
}
|
|
|
|
:host(:state(selected)) .check {
|
|
visibility: visible;
|
|
}
|
|
|
|
.start,
|
|
.end {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.start::slotted(*) {
|
|
margin-inline-end: 0.5em;
|
|
}
|
|
|
|
.end::slotted(*) {
|
|
margin-inline-start: 0.5em;
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
:host(:hover:not([aria-disabled='true'])) {
|
|
outline: dashed 1px SelectedItem;
|
|
outline-offset: -1px;
|
|
}
|
|
}
|
|
`})))()}function F(e,t=0){if(!e||!globalThis.Node)return``;if(typeof e[Symbol.iterator]==`function`)return(Array.isArray(e)?e:[...e]).map(e=>F(e,--t)).join(``);let n=e;if(n.nodeType===Node.TEXT_NODE)return n.textContent??``;if(n.nodeType===Node.ELEMENT_NODE){let e=n;if(e.hasAttribute(`slot`)||e.matches(`style, script`))return``;if(e instanceof HTMLSlotElement){let n=e.assignedNodes({flatten:!0});if(n.length>0)return F(n,--t)}return t>-1?F(e,--t):e.textContent??``}return n.hasChildNodes()?F(n.childNodes,--t):``}var I;function L(){return(L=e((()=>{P(),y(),v(),i(),T(),E(),I=class extends m{constructor(){super(...arguments),this.localize=new f(this),this.cachedDefaultLabel=``,this.isInitialized=!1,this.isDefaultLabelDirty=!0,this.current=!1,this.value=``,this.disabled=!1,this.selected=!1,this.defaultSelected=!1,this._label=``,this.handleHover=e=>{e.type===`mouseenter`?this.customStates.set(`hover`,!0):e.type===`mouseleave`&&this.customStates.set(`hover`,!1)}}set label(e){let t=this._label;this._label=e||``,this._label!==t&&this.requestUpdate(`label`,t)}get label(){return this._label?this._label:this.defaultLabel}get defaultLabel(){return(this.isDefaultLabelDirty||!this.cachedDefaultLabel)&&this.updateDefaultLabel(),this.cachedDefaultLabel}connectedCallback(){super.connectedCallback(),this.setAttribute(`role`,`option`),this.setAttribute(`aria-selected`,`false`),this.addEventListener(`mouseenter`,this.handleHover),this.addEventListener(`mouseleave`,this.handleHover)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`mouseenter`,this.handleHover),this.removeEventListener(`mouseleave`,this.handleHover)}handleDefaultSlotChange(){this.isDefaultLabelDirty=!0,this.isInitialized?(customElements.whenDefined(`wa-select`).then(()=>{let e=this.closest(`wa-select`);e&&e.handleDefaultSlotChange?.()}),customElements.whenDefined(`wa-combobox`).then(()=>{let e=this.closest(`wa-combobox`);e&&e.handleDefaultSlotChange?.()})):this.isInitialized=!0}willUpdate(e){e.has(`defaultSelected`)&&(this.didSSR&&this.hasUpdated||!this.didSSR)&&this.syncDefaultSelected(),super.willUpdate(e)}syncDefaultSelected(){if(`closest`in this&&!this.closest(`wa-combobox, wa-select`)?.hasInteracted&&this.defaultSelected){let e=this.selected;this.selected=this.defaultSelected,this.requestUpdate(`selected`,e)}}updated(e){e.has(`disabled`)&&(this.setAttribute(`aria-disabled`,this.disabled?`true`:`false`),this.customStates.set(`disabled`,this.disabled)),e.has(`selected`)&&(this.setAttribute(`aria-selected`,this.selected?`true`:`false`),this.customStates.set(`selected`,this.selected)),e.has(`value`)&&(typeof this.value!=`string`&&(this.value=String(this.value)),this.handleDefaultSlotChange()),e.has(`current`)&&this.customStates.set(`current`,this.current),super.updated(e)}async firstUpdated(e){if(super.firstUpdated(e),this.didSSR&&!this.hasUpdated&&await this.updateComplete,this.syncDefaultSelected(),this.selected&&!this.defaultSelected){let e=this.closest(`wa-select, wa-combobox`);e&&!e.hasInteracted&&(await customElements.whenDefined(e?.localName),await e.updateComplete,e.selectionChanged?.())}}updateDefaultLabel(){let e=this.cachedDefaultLabel;this.cachedDefaultLabel=F(this).trim(),this.isDefaultLabelDirty=!1;let t=this.cachedDefaultLabel!==e;return!this._label&&t&&this.requestUpdate(`label`,e),t}render(){let e=this.selected;return this.didSSR&&!this.hasUpdated?(this.updateComplete.then(()=>{this.requestUpdate()}),C):w`
|
|
${e?w`<wa-icon
|
|
part="checked-icon"
|
|
class="check"
|
|
name="check"
|
|
library="system"
|
|
variant="solid"
|
|
aria-hidden="true"
|
|
></wa-icon>`:w`<span part="checked-icon" class="check" aria-hidden="true"></span>`}
|
|
<slot part="start" name="start" class="start"></slot>
|
|
<slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
|
|
<slot part="end" name="end" class="end"></slot>
|
|
`}},I.css=N,c([O(`.label`)],I.prototype,`defaultSlot`,2),c([j()],I.prototype,`current`,2),c([D({reflect:!0})],I.prototype,`value`,2),c([D({type:Boolean})],I.prototype,`disabled`,2),c([D({type:Boolean,attribute:!1})],I.prototype,`selected`,2),c([D({type:Boolean,attribute:`selected`})],I.prototype,`defaultSelected`,2),c([D()],I.prototype,`label`,1),I=c([k(`wa-option`)],I)})))()}function R(){return(R=e((()=>{L(),P(),s(),a(),y(),v(),b()})))()}var z;function B(){return(B=e((()=>{T(),z=A`
|
|
:host {
|
|
--tag-max-size: 10ch;
|
|
--show-duration: var(--wa-transition-fast);
|
|
--hide-duration: var(--wa-transition-fast);
|
|
}
|
|
|
|
/* Add ellipses to multi select options */
|
|
:host wa-tag::part(content) {
|
|
display: initial;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
max-width: var(--tag-max-size);
|
|
}
|
|
|
|
:host .disabled [part~='combobox'] {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
outline: none;
|
|
}
|
|
|
|
:host .enabled:is(.open, :focus-within) [part~='combobox'] {
|
|
outline-color: var(--wa-color-focus);
|
|
}
|
|
|
|
/** The popup */
|
|
.select {
|
|
flex: 1 1 auto;
|
|
display: inline-flex;
|
|
width: 100%;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
|
|
/* Pass through from select to the popup */
|
|
--show-duration: inherit;
|
|
--hide-duration: inherit;
|
|
|
|
&::part(popup) {
|
|
z-index: 900;
|
|
}
|
|
|
|
&[data-current-placement^='top']::part(popup) {
|
|
transform-origin: bottom;
|
|
}
|
|
|
|
&[data-current-placement^='bottom']::part(popup) {
|
|
transform-origin: top;
|
|
}
|
|
}
|
|
|
|
/* Combobox */
|
|
.combobox {
|
|
flex: 1;
|
|
display: flex;
|
|
width: 100%;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-content: start;
|
|
|
|
min-height: var(--wa-form-control-height);
|
|
|
|
background-color: var(--wa-form-control-background-color);
|
|
border-color: var(--wa-form-control-border-color);
|
|
border-radius: var(--wa-form-control-border-radius);
|
|
border-style: var(--wa-form-control-border-style);
|
|
border-width: var(--wa-form-control-border-width);
|
|
color: var(--wa-form-control-value-color);
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-weight: var(--wa-form-control-value-font-weight);
|
|
line-height: var(--wa-form-control-value-line-height);
|
|
overflow: hidden;
|
|
padding: 0 var(--wa-form-control-padding-inline);
|
|
position: relative;
|
|
vertical-align: middle;
|
|
transition:
|
|
background-color var(--wa-transition-normal),
|
|
border-color var(--wa-transition-normal),
|
|
outline-color var(--wa-transition-fast);
|
|
transition-timing-function: var(--wa-transition-easing);
|
|
outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) transparent;
|
|
outline-offset: var(--wa-focus-ring-offset);
|
|
|
|
/* Pills */
|
|
:host([pill]) & {
|
|
border-radius: var(--wa-border-radius-pill);
|
|
}
|
|
}
|
|
|
|
/* Appearance modifiers */
|
|
:host([appearance='outlined']) .combobox {
|
|
background-color: var(--wa-form-control-background-color);
|
|
border-color: var(--wa-form-control-border-color);
|
|
}
|
|
|
|
:host([appearance='filled']) .combobox {
|
|
background-color: var(--wa-color-neutral-fill-quiet);
|
|
border-color: var(--wa-color-neutral-fill-quiet);
|
|
}
|
|
|
|
:host([appearance='filled-outlined']) .combobox {
|
|
background-color: var(--wa-color-neutral-fill-quiet);
|
|
border-color: var(--wa-form-control-border-color);
|
|
}
|
|
|
|
.display-input {
|
|
position: relative;
|
|
width: 100%;
|
|
font: inherit;
|
|
border: none;
|
|
background: none;
|
|
line-height: var(--wa-form-control-value-line-height);
|
|
color: var(--wa-form-control-value-color);
|
|
cursor: inherit;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
margin: 0;
|
|
-webkit-appearance: none;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--wa-form-control-placeholder-color);
|
|
}
|
|
}
|
|
|
|
/* Manage spacing when tags are present */
|
|
:host([multiple]) {
|
|
--_padding-with-tags: calc(var(--wa-form-control-height) * 0.1 - var(--wa-form-control-border-width));
|
|
|
|
& .combobox:has(.tags wa-tag) {
|
|
padding-block: var(--_padding-with-tags);
|
|
padding-inline-start: var(--_padding-with-tags);
|
|
}
|
|
}
|
|
|
|
/* Visually hide the display input when multiple is enabled */
|
|
:host([multiple]) .combobox:has(.tags wa-tag) .display-input {
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
}
|
|
|
|
.value-input {
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.25em;
|
|
|
|
&::slotted(wa-tag) {
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.disabled &,
|
|
.disabled &::slotted(wa-tag) {
|
|
cursor: not-allowed !important;
|
|
}
|
|
}
|
|
|
|
/* Start and End */
|
|
|
|
.start,
|
|
.end {
|
|
flex: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: var(--wa-color-neutral-on-quiet);
|
|
}
|
|
|
|
.end::slotted(*) {
|
|
margin-inline-start: var(--wa-form-control-padding-inline);
|
|
}
|
|
|
|
.start::slotted(*) {
|
|
margin-inline-end: var(--wa-form-control-padding-inline);
|
|
}
|
|
|
|
:host([multiple]) .combobox:has(.tags wa-tag) .start::slotted(*) {
|
|
margin-inline-start: calc(var(--wa-form-control-padding-inline) - var(--_padding-with-tags));
|
|
}
|
|
|
|
/* Clear button */
|
|
[part~='clear-button'] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: inherit;
|
|
color: var(--wa-color-neutral-on-quiet);
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
transition: color var(--wa-transition-normal);
|
|
cursor: pointer;
|
|
margin-inline-start: var(--wa-form-control-padding-inline);
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
&:hover {
|
|
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
|
|
}
|
|
}
|
|
|
|
/* Expand icon */
|
|
.expand-icon {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--wa-color-neutral-on-quiet);
|
|
transition: rotate var(--wa-transition-slow) var(--wa-transition-easing);
|
|
rotate: 0deg;
|
|
margin-inline-start: var(--wa-form-control-padding-inline);
|
|
|
|
.open & {
|
|
rotate: -180deg;
|
|
}
|
|
}
|
|
|
|
/* Listbox */
|
|
.listbox {
|
|
display: block;
|
|
position: relative;
|
|
font: inherit;
|
|
box-shadow: var(--wa-shadow-m);
|
|
background: var(--wa-color-surface-raised);
|
|
border-color: var(--wa-color-surface-border);
|
|
border-radius: var(--wa-border-radius-m);
|
|
border-style: var(--wa-border-style);
|
|
border-width: var(--wa-border-width-s);
|
|
padding: 0.25em;
|
|
overflow: auto;
|
|
overscroll-behavior: none;
|
|
|
|
/* Make sure it adheres to the popup's auto size */
|
|
max-width: var(--auto-size-available-width);
|
|
max-height: var(--auto-size-available-height);
|
|
|
|
&::slotted(wa-divider) {
|
|
--spacing: 0.5em;
|
|
}
|
|
}
|
|
|
|
/* Space options with half the listbox's padding */
|
|
.listbox slot:not([name]) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125em;
|
|
}
|
|
|
|
slot:not([name])::slotted(small) {
|
|
display: block;
|
|
font-size: var(--wa-font-size-smaller);
|
|
font-weight: var(--wa-font-weight-semibold);
|
|
color: var(--wa-color-text-quiet);
|
|
padding-block: 0.5em;
|
|
padding-inline: 2.25em;
|
|
}
|
|
`})))()}var V;function H(){return(H=e((()=>{V=class extends Event{constructor(){super(`wa-clear`,{bubbles:!0,cancelable:!1,composed:!0})}}})))()}var U;function W(){return(W=e((()=>{B(),ce(),oe(),n(),se(),te(),H(),pe(),we(),M(),_(),fe(),l(),u(),v(),i(),T(),E(),Ce(),Se(),U=class extends ie{constructor(){super(...arguments),this.assumeInteractionOn=[`blur`,`input`],this.cachedOptions=null,this.hasSlotController=new de(this,`hint`,`label`),this.localize=new f(this),this.selectionOrder=new Map,this.typeToSelectString=``,this.slotChangePending=!1,this.displayLabel=``,this.selectedOptions=[],this.name=``,this._defaultValue=null,this.size=`m`,this.placeholder=``,this.multiple=!1,this.maxOptionsVisible=3,this.disabled=!1,this.withClear=!1,this.open=!1,this.appearance=`outlined`,this.pill=!1,this.label=``,this.placement=`bottom`,this.hint=``,this.withLabel=!1,this.withHint=!1,this.required=!1,this.getTag=e=>w`
|
|
<wa-tag
|
|
part="tag"
|
|
exportparts="
|
|
base:tag__base,
|
|
content:tag__content,
|
|
remove-button:tag__remove-button,
|
|
remove-button__base:tag__remove-button__base
|
|
"
|
|
?pill=${this.pill}
|
|
size=${this.size}
|
|
with-remove
|
|
data-value=${e.value}
|
|
@wa-remove=${t=>this.handleTagRemove(t,e)}
|
|
>
|
|
${e.label}
|
|
</wa-tag>
|
|
`,this.handleDocumentFocusIn=e=>{let t=e.composedPath();this&&!t.includes(this)&&this.hide()},this.handleDocumentKeyDown=e=>{let t=e.target,n=t.closest(`[part~="clear-button"]`)!==null,r=t.closest(`wa-button`)!==null;if(!(n||r)){if(e.key===`Escape`&&this.open&&me(this)&&(e.preventDefault(),e.stopPropagation(),this.hide(),this.displayInput.focus({preventScroll:!0})),e.key===`Enter`||e.key===` `&&this.typeToSelectString===``){if(e.preventDefault(),e.stopImmediatePropagation(),!this.open){this.show();return}this.currentOption&&!this.currentOption.disabled&&(this.valueHasChanged=!0,this.hasInteracted=!0,this.multiple?this.toggleOptionSelection(this.currentOption):this.setSelectedOptions(this.currentOption),this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))}),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0})));return}if([`ArrowUp`,`ArrowDown`,`Home`,`End`].includes(e.key)){let t=this.getAllOptions(),n=t.indexOf(this.currentOption),r=Math.max(0,n);if(e.preventDefault(),!this.open&&(this.show(),this.currentOption))return;e.key===`ArrowDown`?(r=n+1,r>t.length-1&&(r=0)):e.key===`ArrowUp`?(r=n-1,r<0&&(r=t.length-1)):e.key===`Home`?r=0:e.key===`End`&&(r=t.length-1),this.setCurrentOption(t[r])}if(e.key?.length===1||e.key===`Backspace`){let t=this.getAllOptions();if(e.metaKey||e.ctrlKey||e.altKey)return;if(!this.open){if(e.key===`Backspace`)return;this.show()}e.stopPropagation(),e.preventDefault(),clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout(()=>this.typeToSelectString=``,1e3),e.key===`Backspace`?this.typeToSelectString=this.typeToSelectString.slice(0,-1):this.typeToSelectString+=e.key.toLowerCase();for(let e of t)if(e.label.toLowerCase().startsWith(this.typeToSelectString)){this.setCurrentOption(e);break}}}},this.handleDocumentMouseDown=e=>{let t=e.composedPath();this&&!t.includes(this)&&this.hide()}}static get validators(){let e=[Te({validationElement:Object.assign(document.createElement(`select`),{required:!0})})];return[...super.validators,...e]}get validationTarget(){return this.valueInput}set defaultValue(e){this._defaultValue=this.convertDefaultValue(e)}get defaultValue(){return this.convertDefaultValue(this._defaultValue)}rawValuesEqual(e,t){return e==null&&t==null?!0:e==null||t==null||e.length!==t.length?!1:e.every((e,n)=>e===t[n])}convertDefaultValue(e){return!(this.multiple||this.hasAttribute(`multiple`))&&Array.isArray(e)&&(e=e[0]),e}set value(e){let t=this.value;e instanceof FormData&&(e=e.getAll(this.name)),e!=null&&!Array.isArray(e)&&(e=[e]);let n=this._value;this._value=e??null,this.rawValuesEqual(n,this._value)||(this.valueHasChanged=!0,this.requestUpdate(`value`,t))}get value(){let e=this._value??this.defaultValue??null;e!=null&&(e=Array.isArray(e)?e:[e]),this.optionValues=new Set(this.getAllOptions().filter(e=>!e.disabled).map(e=>e.value));let t=e;return e!=null&&(t=e.filter(e=>this.optionValues.has(e)),t=this.multiple?t:t[0],t??=null),t}handleSizeChange(){d(this.localName,this.size)}connectedCallback(){super.connectedCallback(),this.processSlotChange(),this.open=!1}disconnectedCallback(){super.disconnectedCallback(),this.removeOpenListeners(),this.cachedOptions=null}updateDefaultValue(){let e=this.getAllOptions().filter(e=>e.hasAttribute(`selected`)||e.defaultSelected);if(e.length>0){let t=e.map(e=>e.value);this._defaultValue=this.multiple?t:t[0]}this.hasAttribute(`value`)&&(this._defaultValue=this.getAttribute(`value`)||null)}addOpenListeners(){document.addEventListener(`focusin`,this.handleDocumentFocusIn),document.addEventListener(`keydown`,this.handleDocumentKeyDown),document.addEventListener(`mousedown`,this.handleDocumentMouseDown),ye(this),this.getRootNode()!==document&&this.getRootNode().addEventListener(`focusin`,this.handleDocumentFocusIn)}removeOpenListeners(){document.removeEventListener(`focusin`,this.handleDocumentFocusIn),document.removeEventListener(`keydown`,this.handleDocumentKeyDown),document.removeEventListener(`mousedown`,this.handleDocumentMouseDown),ve(this),this.getRootNode()!==document&&this.getRootNode().removeEventListener(`focusin`,this.handleDocumentFocusIn)}handleFocus(){this.displayInput.setSelectionRange(0,0)}handleLabelClick(){this.displayInput.focus()}handleComboboxClick(e){e.preventDefault()}handleComboboxMouseDown(e){let t=e.composedPath().some(e=>e instanceof Element&&e.tagName.toLowerCase()===`wa-button`);this.disabled||t||(e.preventDefault(),this.displayInput.focus({preventScroll:!0}),this.open=!this.open)}handleComboboxKeyDown(e){e.stopPropagation(),this.handleDocumentKeyDown(e)}handleClearClick(e){e.stopPropagation(),this.hasInteracted=!0,this.valueHasChanged=!0,this.value!==null&&(this.displayLabel=``,this.selectionOrder.clear(),this.setSelectedOptions([]),this.displayInput.focus({preventScroll:!0}),this.updateComplete.then(()=>{this.dispatchEvent(new V),this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))}))}handleClearMouseDown(e){e.stopPropagation(),e.preventDefault()}handleOptionClick(e){let t=e.target.closest(`wa-option`);t&&!t.disabled&&(this.hasInteracted=!0,this.valueHasChanged=!0,this.multiple?this.toggleOptionSelection(t):this.setSelectedOptions(t),this.updateComplete.then(()=>this.displayInput.focus({preventScroll:!0})),this.requestUpdate(`value`),this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))}),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0})))}handleDefaultSlotChange(){this.slotChangePending||(this.slotChangePending=!0,queueMicrotask(()=>{this.slotChangePending=!1,this.processSlotChange()}))}processSlotChange(){if(customElements.get(`wa-option`)||customElements.whenDefined(`wa-option`).then(()=>this.handleDefaultSlotChange()),this.didSSR&&!this.hasUpdated){this.updateComplete.then(()=>{this.handleDefaultSlotChange()});return}this.cachedOptions=null;let e=this.getAllOptions();this.updateDefaultValue();let t=this.value;if(t==null||!this.valueHasChanged&&!this.hasInteracted){this.selectionChanged();return}Array.isArray(t)||(t=[t]);let n=e.filter(e=>t.includes(e.value));this.setSelectedOptions(n)}handleTagRemove(e,t){if(e.stopPropagation(),this.disabled)return;this.hasInteracted=!0,this.valueHasChanged=!0;let n=t;if(!n){let t=e.target.closest(`wa-tag[data-value]`);if(t){let e=t.dataset.value;n=this.selectedOptions.find(t=>t.value===e)}}n&&(this.toggleOptionSelection(n,!1),this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))}))}getAllOptions(){return this.cachedOptions?this.cachedOptions:this?.querySelectorAll?(this.cachedOptions=[...this.querySelectorAll(`wa-option`)],this.cachedOptions):[]}getFirstOption(){return this.querySelector(`wa-option`)}setCurrentOption(e){this.getAllOptions().forEach(e=>{e.current=!1,e.tabIndex=-1}),e&&(this.currentOption=e,e.current=!0,e.tabIndex=0,e.focus({preventScroll:!0}),this.open&&!this.listbox.hidden&&t(e,this.listbox,`vertical`,`auto`))}setSelectedOptions(e){let t=this.getAllOptions(),n=Array.isArray(e)?e:[e];t.forEach(e=>{n.includes(e)||(e.selected=!1)}),n.length&&n.forEach(e=>e.selected=!0),this.selectionChanged()}toggleOptionSelection(e,t){e.selected=t===!0||t===!1?t:!e.selected,this.selectionChanged()}selectionChanged(){let e=this.getAllOptions().filter(e=>{if(!this.hasInteracted&&!this.valueHasChanged){let t=this.defaultValue,n=Array.isArray(t)?t:[t];return e.hasAttribute(`selected`)||e.defaultSelected||e.selected||n?.includes(e.value)}return e.selected}),t=new Set(e.map(e=>e.value));for(let e of this.selectionOrder.keys())t.has(e)||this.selectionOrder.delete(e);let n=(this.selectionOrder.size>0?Math.max(...this.selectionOrder.values()):-1)+1;for(let t of e)this.selectionOrder.has(t.value)||this.selectionOrder.set(t.value,n++);this.selectedOptions=e.sort((e,t)=>(this.selectionOrder.get(e.value)??0)-(this.selectionOrder.get(t.value)??0));let r=new Set(this.selectedOptions.map(e=>e.value));if(r.size>0||this._value){let e=this._value;if(this._value==null){let e=this.defaultValue??[];this._value=Array.isArray(e)?e:[e]}this._value=this._value?.filter(e=>!this.optionValues?.has(e))??null,this._value?.unshift(...r),this.requestUpdate(`value`,e)}if(this.multiple)this.displayLabel=this.placeholder&&!this.value?.length?``:this.localize.term(`numOptionsSelected`,this.selectedOptions.length);else{let e=this.selectedOptions[0];this.displayLabel=e?.label??``}this.updateComplete.then(()=>{this.updateValidity()})}get tags(){return this.selectedOptions.map((e,t)=>{if(t<this.maxOptionsVisible||this.maxOptionsVisible<=0){let n=this.getTag(e,t);return n?typeof n==`string`?xe(n):n:null}return t===this.maxOptionsVisible?w`
|
|
<wa-tag
|
|
part="tag"
|
|
exportparts="
|
|
base:tag__base,
|
|
content:tag__content,
|
|
remove-button:tag__remove-button,
|
|
remove-button__base:tag__remove-button__base
|
|
"
|
|
>+${this.selectedOptions.length-t}</wa-tag
|
|
>
|
|
`:null})}updated(e){super.updated(e),(e.has(`value`)||e.has(`displayLabel`))&&this.customStates.set(`blank`,!this.value&&!this.displayLabel)}handleDisabledChange(){this.disabled&&this.open&&(this.open=!1)}handleValueChange(){let e=this.getAllOptions(),t=Array.isArray(this.value)?this.value:[this.value],n=e.filter(e=>t.includes(e.value));this.setSelectedOptions(n),this.updateValidity()}async handleOpenChange(){if(this.open&&!this.disabled){this.setCurrentOption(this.selectedOptions[0]||this.getFirstOption());let e=new ge;if(this.dispatchEvent(e),e.defaultPrevented){this.open=!1;return}this.addOpenListeners(),this.listbox.hidden=!1,this.popup.active=!0,requestAnimationFrame(()=>{this.setCurrentOption(this.currentOption)}),await p(this.popup.popup,`show`),this.currentOption&&t(this.currentOption,this.listbox,`vertical`,`auto`),this.dispatchEvent(new ee)}else{let e=new _e;if(this.dispatchEvent(e),e.defaultPrevented){this.open=!1;return}this.removeOpenListeners(),await p(this.popup.popup,`hide`),this.listbox.hidden=!0,this.popup.active=!1,this.dispatchEvent(new ue)}}async show(){if(this.open||this.disabled){this.open=!1;return}return this.open=!0,h(this,`wa-after-show`)}async hide(){if(!this.open||this.disabled){this.open=!1;return}return this.open=!1,h(this,`wa-after-hide`)}focus(e){this.displayInput.focus(e)}blur(){this.displayInput.blur()}formResetCallback(){this.selectionOrder.clear(),this.value=this.defaultValue,super.formResetCallback(),this.handleValueChange(),this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))})}render(){let e=this.hasSlotController.test(`label`,`withLabel`),t=this.hasSlotController.test(`hint`,`withHint`),n=this.label?!0:!!e,r=this.hint?!0:!!t,i=(this.hasUpdated||!1)&&this.withClear&&!this.disabled&&(this.displayLabel||this.value&&this.value.length>0);return w`
|
|
<div
|
|
part="form-control"
|
|
class=${S({"form-control":!0,"form-control-has-label":n})}
|
|
>
|
|
<label
|
|
id="label"
|
|
part="form-control-label label"
|
|
class=${S({label:!0,"has-label":n})}
|
|
aria-hidden=${n?`false`:`true`}
|
|
@click=${this.handleLabelClick}
|
|
>
|
|
<slot name="label">${this.label}</slot>
|
|
</label>
|
|
|
|
<div part="form-control-input" class="form-control-input">
|
|
<wa-popup
|
|
class=${S({select:!0,open:this.open,disabled:this.disabled,enabled:!this.disabled,multiple:this.multiple})}
|
|
placement=${this.placement}
|
|
flip
|
|
shift
|
|
sync="width"
|
|
auto-size="vertical"
|
|
auto-size-padding="10"
|
|
>
|
|
<div
|
|
part="combobox"
|
|
class="combobox"
|
|
slot="anchor"
|
|
@keydown=${this.handleComboboxKeyDown}
|
|
@mousedown=${this.handleComboboxMouseDown}
|
|
@click=${this.handleComboboxClick}
|
|
>
|
|
<slot part="start" name="start" class="start"></slot>
|
|
|
|
<input
|
|
part="display-input"
|
|
class="display-input"
|
|
type="text"
|
|
placeholder=${this.placeholder}
|
|
.disabled=${this.disabled}
|
|
.value=${this.displayLabel}
|
|
?required=${this.required}
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
autocapitalize="off"
|
|
readonly
|
|
aria-invalid=${!this.validity.valid}
|
|
aria-controls="listbox"
|
|
aria-expanded=${this.open?`true`:`false`}
|
|
aria-haspopup="listbox"
|
|
aria-labelledby="label"
|
|
aria-disabled=${this.disabled?`true`:`false`}
|
|
aria-describedby="hint"
|
|
role="combobox"
|
|
tabindex="0"
|
|
@focus=${this.handleFocus}
|
|
/>
|
|
|
|
<!-- Tags need to wait for first hydration before populating otherwise it will create a hydration mismatch. -->
|
|
${this.multiple&&this.hasUpdated?w`<div part="tags" class="tags" @wa-remove=${this.handleTagRemove}>${this.tags}</div>`:``}
|
|
|
|
<input
|
|
class="value-input"
|
|
type="text"
|
|
?disabled=${this.disabled}
|
|
?required=${this.required}
|
|
.value=${Array.isArray(this.value)?this.value.join(`, `):this.value}
|
|
tabindex="-1"
|
|
aria-hidden="true"
|
|
@focus=${()=>this.focus()}
|
|
/>
|
|
|
|
${i?w`
|
|
<button
|
|
part="clear-button"
|
|
type="button"
|
|
aria-label=${this.localize.term(`clearEntry`)}
|
|
@mousedown=${this.handleClearMouseDown}
|
|
@click=${this.handleClearClick}
|
|
tabindex="-1"
|
|
>
|
|
<slot name="clear-icon">
|
|
<wa-icon name="circle-xmark" library="system" variant="regular"></wa-icon>
|
|
</slot>
|
|
</button>
|
|
`:``}
|
|
|
|
<slot name="end" part="end" class="end"></slot>
|
|
|
|
<slot name="expand-icon" part="expand-icon" class="expand-icon">
|
|
<wa-icon library="system" name="chevron-down" variant="solid"></wa-icon>
|
|
</slot>
|
|
</div>
|
|
|
|
<div
|
|
id="listbox"
|
|
role="listbox"
|
|
aria-expanded=${this.open?`true`:`false`}
|
|
aria-multiselectable=${this.multiple?`true`:`false`}
|
|
aria-labelledby="label"
|
|
part="listbox"
|
|
class="listbox"
|
|
tabindex="-1"
|
|
@mouseup=${this.handleOptionClick}
|
|
>
|
|
<slot @slotchange=${this.handleDefaultSlotChange}></slot>
|
|
</div>
|
|
</wa-popup>
|
|
</div>
|
|
|
|
<slot
|
|
id="hint"
|
|
name="hint"
|
|
part="hint"
|
|
class=${S({"has-slotted":r})}
|
|
aria-hidden=${r?`false`:`true`}
|
|
>${this.hint}</slot
|
|
>
|
|
</div>
|
|
`}},U.css=[z,Ee,o],c([O(`.select`)],U.prototype,`popup`,2),c([O(`.combobox`)],U.prototype,`combobox`,2),c([O(`.display-input`)],U.prototype,`displayInput`,2),c([O(`.value-input`)],U.prototype,`valueInput`,2),c([O(`.listbox`)],U.prototype,`listbox`,2),c([j()],U.prototype,`displayLabel`,2),c([j()],U.prototype,`currentOption`,2),c([j()],U.prototype,`selectedOptions`,2),c([D({reflect:!0})],U.prototype,`name`,2),c([D({attribute:!1})],U.prototype,`defaultValue`,1),c([D({attribute:`value`,reflect:!1})],U.prototype,`value`,1),c([D({reflect:!0})],U.prototype,`size`,2),c([g(`size`)],U.prototype,`handleSizeChange`,1),c([D()],U.prototype,`placeholder`,2),c([D({type:Boolean,reflect:!0})],U.prototype,`multiple`,2),c([D({attribute:`max-options-visible`,type:Number})],U.prototype,`maxOptionsVisible`,2),c([D({type:Boolean})],U.prototype,`disabled`,2),c([D({attribute:`with-clear`,type:Boolean})],U.prototype,`withClear`,2),c([D({type:Boolean,reflect:!0})],U.prototype,`open`,2),c([D({reflect:!0})],U.prototype,`appearance`,2),c([D({type:Boolean,reflect:!0})],U.prototype,`pill`,2),c([D()],U.prototype,`label`,2),c([D({reflect:!0})],U.prototype,`placement`,2),c([D({attribute:`hint`})],U.prototype,`hint`,2),c([D({attribute:`with-label`,type:Boolean})],U.prototype,`withLabel`,2),c([D({attribute:`with-hint`,type:Boolean})],U.prototype,`withHint`,2),c([D({type:Boolean,reflect:!0})],U.prototype,`required`,2),c([D({attribute:!1})],U.prototype,`getTag`,2),c([g(`disabled`,{waitUntilFirstUpdate:!0})],U.prototype,`handleDisabledChange`,1),c([g(`value`,{waitUntilFirstUpdate:!0})],U.prototype,`handleValueChange`,1),c([g(`open`,{waitUntilFirstUpdate:!0})],U.prototype,`handleOpenChange`,1),U=c([k(`wa-select`)],U),U.disableWarning?.(`change-in-update`)})))()}var G;function K(){return(K=e((()=>{G=class extends Event{constructor(){super(`wa-remove`,{bubbles:!0,cancelable:!1,composed:!0})}}})))()}var q;function J(){return(J=e((()=>{T(),q=A`
|
|
@layer wa-component {
|
|
:host {
|
|
display: inline-flex;
|
|
gap: 0.5em;
|
|
border-radius: var(--wa-border-radius-m);
|
|
align-items: center;
|
|
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
|
|
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
|
|
border-style: var(--wa-border-style);
|
|
border-width: var(--wa-border-width-s);
|
|
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
|
font-size: inherit;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
height: calc(var(--wa-form-control-height) * 0.8);
|
|
line-height: calc(var(--wa-form-control-height) - var(--wa-form-control-border-width) * 2);
|
|
padding: 0 0.75em;
|
|
}
|
|
|
|
/* Appearance modifiers */
|
|
:host([appearance='outlined']) {
|
|
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
|
background-color: transparent;
|
|
border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
|
|
}
|
|
|
|
:host([appearance='filled']) {
|
|
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
|
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
|
|
border-color: transparent;
|
|
}
|
|
|
|
:host([appearance='filled-outlined']) {
|
|
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
|
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
|
|
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
|
|
}
|
|
|
|
:host([appearance='accent']) {
|
|
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
|
|
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
font-size: var(--wa-font-size-smaller);
|
|
}
|
|
|
|
[part='remove-button'] {
|
|
line-height: 1;
|
|
}
|
|
|
|
[part='remove-button']::part(base) {
|
|
padding: 0;
|
|
height: 1em;
|
|
width: 1em;
|
|
color: currentColor;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
:host(:hover) > [part='remove-button']::part(base) {
|
|
background-color: transparent;
|
|
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
|
}
|
|
}
|
|
|
|
:host(:active) > [part='remove-button']::part(base) {
|
|
background-color: transparent;
|
|
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
|
|
}
|
|
|
|
/*
|
|
* Pill modifier
|
|
*/
|
|
:host([pill]) {
|
|
border-radius: var(--wa-border-radius-pill);
|
|
}
|
|
`})))()}var Y;function X(){return(X=e((()=>{K(),J(),l(),u(),x(),y(),v(),i(),T(),E(),Y=class extends m{constructor(){super(...arguments),this.localize=new f(this),this.variant=`neutral`,this.appearance=`filled-outlined`,this.size=`m`,this.pill=!1,this.withRemove=!1}handleSizeChange(){d(this.localName,this.size)}handleRemoveClick(){this.dispatchEvent(new G)}render(){return w`
|
|
<slot part="content" class="content"></slot>
|
|
|
|
${this.withRemove?w`
|
|
<wa-button
|
|
part="remove-button"
|
|
exportparts="base:remove-button__base"
|
|
class="remove"
|
|
appearance="plain"
|
|
size=${this.size}
|
|
@click=${this.handleRemoveClick}
|
|
tabindex="-1"
|
|
>
|
|
<wa-icon name="xmark" library="system" variant="solid" label=${this.localize.term(`remove`)}></wa-icon>
|
|
</wa-button>
|
|
`:``}
|
|
`}},Y.css=[q,r,o],c([D({reflect:!0})],Y.prototype,`variant`,2),c([D({reflect:!0})],Y.prototype,`appearance`,2),c([D({reflect:!0})],Y.prototype,`size`,2),c([g(`size`)],Y.prototype,`handleSizeChange`,1),c([D({type:Boolean,reflect:!0})],Y.prototype,`pill`,2),c([D({attribute:`with-remove`,type:Boolean})],Y.prototype,`withRemove`,2),Y=c([k(`wa-tag`)],Y)})))()}function Z(){return(Z=e((()=>{W(),X(),J(),B(),L(),P(),he(),be(),M(),le(),re(),ae(),_(),ne(),u(),x(),s(),a(),y(),v(),b()})))()}function Q(){return(Q=e((()=>{R(),Z()})))()}function De(){return(De=e((()=>{})))()}function Oe(e){let t=e.value===null||e.value===``||e.options.some(t=>t.value===e.value)?e.options:[...e.options,{value:e.value,label:e.value}],n=t=>{let n=t&&e.renderLeading?.(t);return n==null||n===C?C:w`<span slot="start">${n}</span>`};return w`
|
|
<wa-select
|
|
id=${e.id??C}
|
|
class=${`settings-select picker-select ${e.className??``}`}
|
|
style="width:100%;min-width:min(138px,100%)"
|
|
title=${e.title??C}
|
|
placeholder=${e.value===null?e.label:C}
|
|
placement=${e.placement??C}
|
|
.value=${e.value}
|
|
?disabled=${e.disabled}
|
|
@wa-show=${()=>e.onOpen?.()}
|
|
@change=${n=>{let r=n.currentTarget.value,i=typeof r==`string`&&t.find(e=>e.value===r);i&&!i.disabled&&(e.onChangeTarget?e.onChangeTarget(r,n.currentTarget):e.onChange(r))}}
|
|
>
|
|
<span slot="label" class="settings-control__sr-label">${e.label}</span>
|
|
${n(t.find(t=>t.value===e.value))}
|
|
${t.map(t=>w`
|
|
<wa-option
|
|
class="picker-select__option"
|
|
value=${t.value}
|
|
.label=${t.label}
|
|
?selected=${t.value===e.value}
|
|
?disabled=${t.disabled}
|
|
>
|
|
${n(t)}
|
|
<span class="picker-select__copy">
|
|
<span class="picker-select__label" style=${t.labelStyle??C}
|
|
>${t.label}</span
|
|
>
|
|
${t.description?w`<span class="picker-select__description">${t.description}</span>`:C}
|
|
</span>
|
|
</wa-option>
|
|
`)}
|
|
</wa-select>
|
|
`}function $(){return($=e((()=>{T(),Q()})))()}export{Q as i,Oe as n,De as r,$ as t};
|
|
//# sourceMappingURL=select-picker-BINM0f88.js.map
|