openclaw
Version:
Multi-channel AI gateway with extensible messaging integrations
666 lines (592 loc) • 38.7 kB
JavaScript
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{$r as t,Br as n,Cr as r,Fr as i,Gr as a,Hr as o,Ir as ee,Jr as te,Kr as s,Lr as ne,Mr as c,Or as l,Qr as re,Rr as ie,Sr as ae,Ur as u,Vr as d,Wr as f,Xr as oe,Yr as se,Zr as ce,_r as p,ar as m,br as le,cr as ue,dr as de,ei as fe,fr as h,gr as pe,hr as g,ir as _,kr as me,lr as v,mr as y,ni as he,or as ge,pr as b,qr as x,sr as _e,ti as ve,ur as ye,xr as be}from"./control-ui-foundation-Cydpkyqa.js";import{$ as S,B as xe,K as C,V as w,X as T,at as E,dt as D,mt as O,nt as k,q as A,r as Se,st as j,t as Ce}from"./lit-runtime-CV_MH99K.js";import{F as we,I as M}from"./control-ui-boot-shared-BYq7Cchl.js";import{St as Te,xt as Ee}from"./control-ui-boot-chat-Cgwe4GEM.js";var N;function P(){return(P=e((()=>{C(),N=D`
: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(),a(),o(),x(),C(),S(),I=class extends f{constructor(){super(...arguments),this.localize=new d(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()}),A):T`
${e?T`<wa-icon
part="checked-icon"
class="check"
name="check"
library="system"
variant="solid"
aria-hidden="true"
></wa-icon>`:T`<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,s([k(`.label`)],I.prototype,`defaultSlot`,2),s([E()],I.prototype,`current`,2),s([j({reflect:!0})],I.prototype,`value`,2),s([j({type:Boolean})],I.prototype,`disabled`,2),s([j({type:Boolean,attribute:!1})],I.prototype,`selected`,2),s([j({type:Boolean,attribute:`selected`})],I.prototype,`defaultSelected`,2),s([j()],I.prototype,`label`,1),I=s([O(`wa-option`)],I)})))()}function R(){return(R=e((()=>{L(),P(),_(),m(),a(),o(),u()})))()}var z;function B(){return(B=e((()=>{C(),z=D`
: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'] {
flex: 0 0 auto;
display: inline-flex;
align-self: stretch;
align-items: center;
justify-content: center;
inline-size: 1.5em;
font-size: inherit;
color: var(--wa-color-neutral-on-quiet);
border: none;
background: none;
padding: 0;
transition: color var(--wa-transition-normal);
cursor: pointer;
/* The box is wider than the glyph, so overhang half that growth on each side. Keeps the glyph
on the same trailing axis as the segmented-field pickers' clear buttons. */
margin-inline-start: calc(var(--wa-form-control-padding-inline) - 0.125em);
margin-inline-end: -0.125em;
&: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(),ae(),he(),fe(),re(),oe(),H(),i(),Te(),M(),p(),y(),be(),h(),o(),x(),C(),S(),xe(),Ce(),U=class extends pe{constructor(){super(...arguments),this.assumeInteractionOn=[`blur`,`input`],this.cachedOptions=null,this.hasSlotController=new le(this,`hint`,`label`),this.localize=new d(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=>T`
<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&&ee(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=[Ee({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(){g(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),ne(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),ie(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&&r(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`?Se(n):n:null}return t===this.maxOptionsVisible?T`
<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 ve;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 me(this.popup.popup,`show`),this.currentOption&&r(this.currentOption,this.listbox,`vertical`,`auto`),this.dispatchEvent(new ce)}else{let e=new t;if(this.dispatchEvent(e),e.defaultPrevented){this.open=!1;return}this.removeOpenListeners(),await me(this.popup.popup,`hide`),this.listbox.hidden=!0,this.popup.active=!1,this.dispatchEvent(new se)}}async show(){if(this.open||this.disabled){this.open=!1;return}return this.open=!0,c(this,`wa-after-show`)}async hide(){if(!this.open||this.disabled){this.open=!1;return}return this.open=!1,c(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 T`
<div
part="form-control"
class=${w({"form-control":!0,"form-control-has-label":n})}
>
<label
id="label"
part="form-control-label label"
class=${w({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=${w({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?T`<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?T`
<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=${w({"has-slotted":r})}
aria-hidden=${r?`false`:`true`}
>${this.hint}</slot
>
</div>
`}},U.css=[z,we,b],s([k(`.select`)],U.prototype,`popup`,2),s([k(`.combobox`)],U.prototype,`combobox`,2),s([k(`.display-input`)],U.prototype,`displayInput`,2),s([k(`.value-input`)],U.prototype,`valueInput`,2),s([k(`.listbox`)],U.prototype,`listbox`,2),s([E()],U.prototype,`displayLabel`,2),s([E()],U.prototype,`currentOption`,2),s([E()],U.prototype,`selectedOptions`,2),s([j({reflect:!0})],U.prototype,`name`,2),s([j({attribute:!1})],U.prototype,`defaultValue`,1),s([j({attribute:`value`,reflect:!1})],U.prototype,`value`,1),s([j({reflect:!0})],U.prototype,`size`,2),s([l(`size`)],U.prototype,`handleSizeChange`,1),s([j()],U.prototype,`placeholder`,2),s([j({type:Boolean,reflect:!0})],U.prototype,`multiple`,2),s([j({attribute:`max-options-visible`,type:Number})],U.prototype,`maxOptionsVisible`,2),s([j({type:Boolean})],U.prototype,`disabled`,2),s([j({attribute:`with-clear`,type:Boolean})],U.prototype,`withClear`,2),s([j({type:Boolean,reflect:!0})],U.prototype,`open`,2),s([j({reflect:!0})],U.prototype,`appearance`,2),s([j({type:Boolean,reflect:!0})],U.prototype,`pill`,2),s([j()],U.prototype,`label`,2),s([j({reflect:!0})],U.prototype,`placement`,2),s([j({attribute:`hint`})],U.prototype,`hint`,2),s([j({attribute:`with-label`,type:Boolean})],U.prototype,`withLabel`,2),s([j({attribute:`with-hint`,type:Boolean})],U.prototype,`withHint`,2),s([j({type:Boolean,reflect:!0})],U.prototype,`required`,2),s([j({attribute:!1})],U.prototype,`getTag`,2),s([l(`disabled`,{waitUntilFirstUpdate:!0})],U.prototype,`handleDisabledChange`,1),s([l(`value`,{waitUntilFirstUpdate:!0})],U.prototype,`handleValueChange`,1),s([l(`open`,{waitUntilFirstUpdate:!0})],U.prototype,`handleOpenChange`,1),U=s([O(`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((()=>{C(),q=D`
@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(),y(),h(),v(),a(),o(),x(),C(),S(),Y=class extends f{constructor(){super(...arguments),this.localize=new d(this),this.variant=`neutral`,this.appearance=`filled-outlined`,this.size=`m`,this.pill=!1,this.withRemove=!1}handleSizeChange(){g(this.localName,this.size)}handleRemoveClick(){this.dispatchEvent(new G)}render(){return T`
<slot part="content" class="content"></slot>
${this.withRemove?T`
<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,ye,b],s([j({reflect:!0})],Y.prototype,`variant`,2),s([j({reflect:!0})],Y.prototype,`appearance`,2),s([j({reflect:!0})],Y.prototype,`size`,2),s([l(`size`)],Y.prototype,`handleSizeChange`,1),s([j({type:Boolean,reflect:!0})],Y.prototype,`pill`,2),s([j({attribute:`with-remove`,type:Boolean})],Y.prototype,`withRemove`,2),Y=s([O(`wa-tag`)],Y)})))()}function Z(){return(Z=e((()=>{W(),X(),J(),B(),L(),P(),n(),te(),M(),ue(),ge(),_e(),p(),h(),de(),v(),_(),m(),a(),o(),u()})))()}function Q(){return(Q=e((()=>{R(),Z()})))()}function $(){return($=e((()=>{})))()}function De(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===A?A:T`<span slot="start">${n}</span>`};return T`
<wa-select
id=${e.id??A}
class=${`settings-select picker-select ${e.className??``}`}
style="width:100%;min-width:min(138px,100%)"
title=${e.title??A}
placeholder=${e.value===null?e.label:A}
placement=${e.placement??A}
.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=>T`
<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??A}
>${t.label}</span
>
${t.description?T`<span class="picker-select__description">${t.description}</span>`:A}
</span>
</wa-option>
`)}
</wa-select>
`}function Oe(){return(Oe=e((()=>{C(),Q()})))()}export{Q as i,De as n,$ as r,Oe as t};
//# sourceMappingURL=select-picker-BNhpItgu.js.map