@webority/ui-elements 0.54.0 → 0.55.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.
@@ -0,0 +1,13 @@
1
+ import{t as e}from"./elementBase-BlsR4tqa.js";import{n as t,r as n,t as r}from"./anchorOverlay-WcDeH46q.js";import{n as i,t as a}from"./focusOrigin-2imUSs-u.js";import{t as o}from"./formMirror-BgY7zkC3.js";import{t as s}from"./iconGlyphs.g-CUm_mfze.js";import{n as c,t as l}from"./listboxKeyNav-DMIvs9d6.js";import{a as u,i as d,n as f,r as p,t as m}from"./optionLabel-BBaur8Bs.js";var h=class extends e{static formAssociated=!0;_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}static get observedAttributes(){return[`value`,`placeholder`,`disabled`,`min-chars`,`debounce`,`remote`,`size`,`aria-label`,`allow-custom`,`aria-invalid`]}constructor(){super(),this._value=``,this._label=``,this._optionsProp=null,this._loading=!1,this._active=-1,this._timer=null,this._reqSeq=0,this._pendingSearch=null,this._typeahead=``,this._typeaheadTimer=null;try{this._internals=this.attachInternals()}catch{this._internals=null}}connectedCallback(){if(!this._rendered){this._defaultCaptured||=(this._defaultValue=this._value,!0),this.render();return}if(this._bindGlobal?.(),this._pendingSearch){let{query:e,seq:t}=this._pendingSearch;clearTimeout(this._timer),this._timer=setTimeout(()=>this._fireSearch(e,t),this._debounceMs)}}formResetCallback(){this.value=this._defaultValue||``}attributeChangedCallback(e,t,n){if(e===`value`){this.value=n;return}if(e===`aria-invalid`){this._syncInvalid();return}this._rendered&&this.render()}_syncInvalid(){let e=this.querySelector(`.search-select-control`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}get value(){return this._value}set value(e){this._value=e==null?``:String(e),o(this,this._value);let t=this._readOptions().find(e=>String(e.value)===this._value);this._label=t?d(t):``,this._syncInput(),this._renderOptions(``)}set options(e){this._optionsProp=Array.isArray(e)?e:[];let t=this._readOptions().find(e=>String(e.value)===this._value);t&&(this._label=d(t)),this._renderOptions(),this._syncInput()}get options(){return this._readOptions()}set loading(e){this._loading=!!e,this._renderLoading(),this._renderOptions()}get loading(){return this._loading}get _remote(){return this.hasAttribute(`remote`)}get _allowCustom(){return this.hasAttribute(`allow-custom`)}_matchesKnownOption(e){let t=e.toLowerCase();return this._readOptions().some(e=>d(e).toLowerCase()===t||String(e.value??``).toLowerCase()===t)}get _minChars(){let e=+!!this._remote,t=this.getAttribute(`min-chars`);if(t==null||t.trim()===``)return e;let n=Number(t);return Number.isInteger(n)&&n>=0?n:e}get _debounceMs(){let e=this.getAttribute(`debounce`);if(e==null||e===``)return 250;let t=Number(e);return Number.isFinite(t)&&t>=0?t:250}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,icon:e.getAttribute(`icon`)||void 0,[m]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();let e=this.getAttribute(`placeholder`)||`Search…`,t=this.getAttribute(`size`),n=t===`sm`?` search-select-sm`:t===`lg`?` search-select-lg`:``;this.id||=`wui-autocomplete-${Math.random().toString(36).slice(2,9)}`;let r=`${this.id}-listbox`;this._listboxId=r,this.innerHTML=`
2
+ <div class="search-select${n}">
3
+ <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${g(r)}" aria-label="${g(this._accessibleName())}"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}>
4
+ <input class="search-select-input search-select-ac-input" placeholder="${g(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute(`disabled`)?` disabled`:``} />
5
+ <span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
6
+ <button type="button" class="search-select-clear" aria-label="Clear" hidden>${s(`x`)}</button>
7
+ </div>
8
+ <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${g(r)}" tabindex="-1" hidden>
9
+ <div class="search-select-options"></div>
10
+ <div class="search-select-empty" hidden>No matches</div>
11
+ <div class="search-select-hint" hidden>Type to search…</div>
12
+ </div>
13
+ </div>`,this._rendered=!0,o(this,this._value),this._wire(),this._syncInput(),this._renderOptions()}_refs(){return{control:this.querySelector(`.search-select-control`),input:this.querySelector(`.search-select-ac-input`),menu:this.querySelector(`.search-select-menu`),spinner:this.querySelector(`.search-select-spinner`),clear:this.querySelector(`.search-select-clear`),optionsWrap:this.querySelector(`.search-select-options`),empty:this.querySelector(`.search-select-empty`),hint:this.querySelector(`.search-select-hint`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_syncInput(){let{input:e,clear:t}=this._refs();e&&document.activeElement!==e&&(e.value=this._label),t&&(t.hidden=!this._value&&!e?.value)}_renderLoading(){let{spinner:e}=this._refs();e&&(e.hidden=!this._loading)}_renderOptions(e){let t=this._refs();if(!t.optionsWrap)return;let n=e??(t.input?t.input.value:``),r=n.trim().toLowerCase(),i=this._readOptions();!this._remote&&r&&(i=i.filter(e=>d(e).toLowerCase().includes(r)));let a=n.trim(),o=this._allowCustom&&a&&!this._matchesKnownOption(a)?[...i,{value:a,custom:!0}]:i,s=this._listboxId||`${this.id||`wui-autocomplete`}-listbox`;t.optionsWrap.innerHTML=o.map((e,t)=>{let n=`${s}-opt-${t}`;if(e.custom){let t=`Add “${f(e.value)}”`;return`<button type="button" role="option" id="${g(n)}" class="search-select-option search-select-option-custom" data-value="${g(e.value)}" data-custom="true" aria-selected="false">${t}</button>`}let r=String(e.value)===String(this._value);return`<button type="button" role="option" id="${g(n)}" class="search-select-option${r?` selected`:``}" data-value="${g(e.value)}" aria-selected="${r}">${p(e)}</button>`}).join(``),this._active=-1,t.control?.removeAttribute(`aria-activedescendant`);let c=r.length<this._minChars;t.hint&&(t.hint.hidden=!(this._remote&&c&&!i.length)),t.empty&&(t.empty.hidden=this._loading||o.length>0||this._remote&&c),this._reanchor?.()}_wire(){this._teardown();let e=this._refs();if(!e.control||!e.input)return;let s=()=>r(e.control,e.menu,{matchWidth:!0}),f=()=>this._optionEls().filter(e=>!e.hidden),p=(t,{reveal:n=!0}={})=>{let r=f();this._active=t,c(e.optionsWrap,t>=0&&r[t]||null),t>=0&&r[t]?(n&&r[t].scrollIntoView({block:`nearest`}),e.control.setAttribute(`aria-activedescendant`,r[t].id)):e.control.removeAttribute(`aria-activedescendant`)},m=()=>!e.menu.hidden,h=()=>{m()&&s()},g=()=>{!this._remote||this._minChars!==0||e.input.value.trim()||(clearTimeout(this._timer),this._fireSearch(``,++this._reqSeq))},_=({load:n=!0}={})=>{e.menu.hidden=!1,e.control.setAttribute(`aria-expanded`,`true`),e.control.classList.add(`open`),s(),t(this,h),n&&g(),this._renderOptions()},v=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),p(-1),clearTimeout(this._typeaheadTimer),this._typeaheadTimer=null,this._typeahead=``,this._syncInput(),n(this)},y=t=>{let n=t.dataset.custom===`true`;this._value=t.dataset.value;let r=n?null:this._readOptions().find(e=>String(e.value)===t.dataset.value);this._label=n?t.dataset.value:r?d(r):u(t.innerHTML),o(this,this._value),e.input.value=this._label,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,detail:{isCustom:n}})),v(),e.input.focus()},b=t=>{this._value=t,this._label=t,o(this,t),e.input.value=t,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,detail:{isCustom:!0}})),v()},x=()=>{let t=e.input.value;if(e.clear&&(e.clear.hidden=!t),m()||_({load:!1}),this._remote){if(this._renderOptions(t),clearTimeout(this._timer),t.trim().length<this._minChars){this._pendingSearch=null;return}let e=++this._reqSeq;this._pendingSearch={query:t,seq:e},this._timer=setTimeout(()=>this._fireSearch(t,e),this._debounceMs)}else this._renderOptions(t)};this._navHandler=l({getVisibleOptions:f,getActive:()=>this._active,setActive:e=>p(e),onEnter:(t,n)=>{if(n[this._active])y(n[this._active]);else if(this._allowCustom){let t=e.input.value.trim();t&&!this._matchesKnownOption(t)&&b(t)}},onEscape:()=>{this._navHandler.clearTypeahead(),v()}});let S=e=>{let t=e.target?.tagName===`INPUT`||e.target?.tagName===`TEXTAREA`;if(e.key===`ArrowDown`){e.preventDefault(),m()||_();let t=f();p(Math.min(this._active+1,t.length-1));return}else if(e.key===`ArrowUp`){e.preventDefault(),p(Math.max(this._active-1,0));return}else if((e.key===`Home`||e.key===`End`||e.key===`PageDown`||e.key===`PageUp`)&&(!m()||t))return;else if(e.key.length===1&&(e.ctrlKey||e.metaKey||e.altKey||!m()||e.target?.tagName===`INPUT`||e.target?.tagName===`TEXTAREA`)&&(!m()||e.target?.tagName===`INPUT`||e.target?.tagName===`TEXTAREA`))return;this._navHandler.handler(e)};i(),e.input.addEventListener(`focus`,()=>{a()&&!m()&&_()}),e.control.addEventListener(`click`,t=>{e.input.disabled||t.target.closest(`.search-select-clear`)||(t.target!==e.input&&e.input.focus(),m()||_())}),e.input.addEventListener(`input`,x),e.input.addEventListener(`keydown`,S),e.menu.addEventListener(`keydown`,S),e.input.addEventListener(`blur`,t=>{if(!this._allowCustom||t.relatedTarget&&this.contains(t.relatedTarget))return;let n=e.input.value.trim();!n||n===this._label||this._matchesKnownOption(n)||b(n)}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&y(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&!t.classList.contains(`is-active`)&&p(this._optionEls().indexOf(t),{reveal:!1})}),e.optionsWrap.addEventListener(`mouseleave`,()=>p(-1)),e.clear?.addEventListener(`click`,()=>{this._value=``,this._label=``,o(this,``),e.input.value=``,e.clear.hidden=!0,this._renderOptions(``),this.dispatchEvent(new Event(`change`,{bubbles:!0})),e.input.focus(),m()?g():_()}),this._bindGlobal=()=>{this._teardown(),this._onDocClick=e=>{m()&&!this.contains(e.target)&&v()},document.addEventListener(`click`,this._onDocClick),m()&&t(this,h)},this._bindGlobal()}_fireSearch(e,t){this._pendingSearch=null,this.dispatchEvent(new CustomEvent(`search`,{bubbles:!0,detail:{query:e,seq:t}}))}_teardown(){this._onDocClick&&=(document.removeEventListener(`click`,this._onDocClick),null),n(this),clearTimeout(this._timer),this._navHandler?.teardown()}disconnectedCallback(){this._teardown()}},g=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`);export{h as t};
@@ -1,2 +1,2 @@
1
- import{t as e}from"./elementBase-BlsR4tqa.js";import{n as t}from"./optionLabel-DOZb8ERB.js";import{t as n}from"./textMatch-wdY7XLIc.js";var r=`[role="option"]`,i=`No results`,a=`All`,o=`Recent`,s=5,c=20,l=`.wui-cmd-back, [data-depth]`,u=0,d=class extends e{static get observedAttributes(){return[`filter`,`highlight`,`empty-text`,`path`,`root-label`,`recents-key`,`recents-limit`,`recents-label`]}constructor(){super(),this._path=[],this._crumbSig=null,this._modal=null,this._recentsId=`wui-cmd-recents-${++u}`,this._onModalHidden=()=>this._reset(),this._activeId=null,this._lastQuery=null,this._lastIds=null,this._userChose=!1,this._onKeyDown=e=>this._handleKeyDown(e),this._onClick=e=>{let t=e.target?.closest?.(l);if(t&&this.contains(t)){let e=t.matches(`.wui-cmd-back`)?this._path.length-1:Number(t.dataset.depth);this._goTo(this._path.slice(0,e));return}let n=this._optionFrom(e.target);n&&this._select(n)},this._onMouseDown=e=>{let t=e.target?.closest?.(l);(t&&this.contains(t)||this._optionFrom(e.target,!0))&&e.preventDefault()},this._onMouseMove=e=>{let t=this._optionFrom(e.target);t&&t.id!==this._activeId&&(this._userChose=!0,this._setActive(t,!1))},this._onInput=e=>{!this.hasAttribute(`filter`)||e.target!==this._input()||(this._applyFilter(),this.refresh())}}connectedCallback(){this._teardown(),this.addEventListener(`keydown`,this._onKeyDown),this.addEventListener(`click`,this._onClick),this.addEventListener(`mousedown`,this._onMouseDown),this.addEventListener(`mousemove`,this._onMouseMove),this.addEventListener(`input`,this._onInput),this._modal=this.closest(`.modal`),this._modal?.addEventListener(`hidden.bs.modal`,this._onModalHidden),this._readPath(),this.hasAttribute(`filter`)&&this._applyFilter(),this.refresh()}disconnectedCallback(){this._teardown()}attributeChangedCallback(e){this.isConnected&&(e===`path`&&this._readPath(),this.hasAttribute(`filter`)&&this._applyFilter(),this.refresh())}get filter(){return this.hasAttribute(`filter`)}set filter(e){this.toggleAttribute(`filter`,!!e)}get highlight(){return this.getAttribute(`highlight`)!==`false`}set highlight(e){this.setAttribute(`highlight`,e?`true`:`false`)}get emptyText(){return this.getAttribute(`empty-text`)??i}set emptyText(e){this.setAttribute(`empty-text`,String(e??``))}refresh(){this._renderRecents(),this._renderCrumbs();let e=this._input(),t=e?e.value:``,n=t!==this._lastQuery;this._lastQuery=t;let r=this._selectableOptions(),i=r.map(e=>e.id).join(`
1
+ import{t as e}from"./elementBase-BlsR4tqa.js";import{n as t}from"./optionLabel-BBaur8Bs.js";import{t as n}from"./textMatch-wdY7XLIc.js";var r=`[role="option"]`,i=`No results`,a=`All`,o=`Recent`,s=5,c=20,l=`.wui-cmd-back, [data-depth]`,u=0,d=class extends e{static get observedAttributes(){return[`filter`,`highlight`,`empty-text`,`path`,`root-label`,`recents-key`,`recents-limit`,`recents-label`]}constructor(){super(),this._path=[],this._crumbSig=null,this._modal=null,this._recentsId=`wui-cmd-recents-${++u}`,this._onModalHidden=()=>this._reset(),this._activeId=null,this._lastQuery=null,this._lastIds=null,this._userChose=!1,this._onKeyDown=e=>this._handleKeyDown(e),this._onClick=e=>{let t=e.target?.closest?.(l);if(t&&this.contains(t)){let e=t.matches(`.wui-cmd-back`)?this._path.length-1:Number(t.dataset.depth);this._goTo(this._path.slice(0,e));return}let n=this._optionFrom(e.target);n&&this._select(n)},this._onMouseDown=e=>{let t=e.target?.closest?.(l);(t&&this.contains(t)||this._optionFrom(e.target,!0))&&e.preventDefault()},this._onMouseMove=e=>{let t=this._optionFrom(e.target);t&&t.id!==this._activeId&&(this._userChose=!0,this._setActive(t,!1))},this._onInput=e=>{!this.hasAttribute(`filter`)||e.target!==this._input()||(this._applyFilter(),this.refresh())}}connectedCallback(){this._teardown(),this.addEventListener(`keydown`,this._onKeyDown),this.addEventListener(`click`,this._onClick),this.addEventListener(`mousedown`,this._onMouseDown),this.addEventListener(`mousemove`,this._onMouseMove),this.addEventListener(`input`,this._onInput),this._modal=this.closest(`.modal`),this._modal?.addEventListener(`hidden.bs.modal`,this._onModalHidden),this._readPath(),this.hasAttribute(`filter`)&&this._applyFilter(),this.refresh()}disconnectedCallback(){this._teardown()}attributeChangedCallback(e){this.isConnected&&(e===`path`&&this._readPath(),this.hasAttribute(`filter`)&&this._applyFilter(),this.refresh())}get filter(){return this.hasAttribute(`filter`)}set filter(e){this.toggleAttribute(`filter`,!!e)}get highlight(){return this.getAttribute(`highlight`)!==`false`}set highlight(e){this.setAttribute(`highlight`,e?`true`:`false`)}get emptyText(){return this.getAttribute(`empty-text`)??i}set emptyText(e){this.setAttribute(`empty-text`,String(e??``))}refresh(){this._renderRecents(),this._renderCrumbs();let e=this._input(),t=e?e.value:``,n=t!==this._lastQuery;this._lastQuery=t;let r=this._selectableOptions(),i=r.map(e=>e.id).join(`
2
2
  `),a=i!==this._lastIds;this._lastIds=i;let o=!n&&(this._userChose||!a)?r.find(e=>e.id===this._activeId):null;o||(this._userChose=!1),this._setActive(o??r[0]??null,n)}_input(){return this.querySelector(`[role="combobox"]`)}_optionFrom(e,t=!1){let n=e?.closest?.(r);return n&&this.contains(n)&&!this._isHidden(n)&&(t||!this._isDisabled(n))?n:null}_isDisabled(e){return e.getAttribute(`aria-disabled`)===`true`}_isHidden(e){return e.hidden||!!e.closest(`[role="group"]`)?.hidden}_selectableOptions(){return[...this.querySelectorAll(r)].filter(e=>!this._isHidden(e)&&!this._isDisabled(e))}_setActive(e,t){this._activeId=e?e.id:null;for(let t of this.querySelectorAll(r))t.setAttribute(`aria-selected`,t===e?`true`:`false`);let n=this._input();n&&(e?n.setAttribute(`aria-activedescendant`,e.id):n.removeAttribute(`aria-activedescendant`)),e&&t&&e.scrollIntoView({block:`nearest`})}_move(e){let t=this._selectableOptions();if(!t.length)return;let n=t.findIndex(e=>e.id===this._activeId),r=n<0?e>0?0:t.length-1:(n+e+t.length)%t.length;this._userChose=!0,this._setActive(t[r],!0)}_handleKeyDown(e){if(e.target===this._input()){if(e.key===`ArrowDown`||e.key===`ArrowUp`)e.preventDefault(),this._move(e.key===`ArrowDown`?1:-1);else if(e.key===`Backspace`&&!e.isComposing&&this._path.length&&!e.target.value)e.preventDefault(),this._goTo(this._path.slice(0,-1));else if(e.key===`Enter`&&!e.isComposing){let t=this._selectableOptions().find(e=>e.id===this._activeId);if(!t)return;e.preventDefault(),this._select(t)}}}_select(e){this._remember(e),this.dispatchEvent(new CustomEvent(`wui-command-palette:select`,{bubbles:!0,cancelable:!0,detail:{key:e.dataset.key??null,groupKey:e.dataset.groupKey??null,id:e.id}}))&&(e.dataset.opens?this._open(e.dataset.opens):e.dataset.href&&this._navigate(e.dataset.href))}_open(e){let t=[...this.querySelectorAll(`.wui-cmd-page`)].find(t=>t.dataset.page===e);this._goTo([...this._path,{key:e,label:t?.dataset.label??e}])}_goTo(e){this._input()?.focus(),this.dispatchEvent(new CustomEvent(`wui-command-palette:navigate`,{bubbles:!0,cancelable:!0,detail:{path:e}}))&&(this._path=e,this._restart())}_restart(){let e=this._input();e&&(e.value=``),this.hasAttribute(`filter`)&&this._applyFilter(),this.refresh()}_reset(){this.hasAttribute(`path`)||(this._path=[],this._restart())}_readPath(){let e=this.getAttribute(`path`);if(e==null)return;let t=JSON.parse(e);this._path=Array.isArray(t)?t.filter(e=>e&&typeof e.key==`string`&&typeof e.label==`string`):[]}_renderCrumbs(){let e=this.querySelector(`.wui-cmd-crumbs`);if(!e)return;let t=this.getAttribute(`root-label`)??a,n=JSON.stringify([t,this._path]);if(e.hidden=this._path.length===0,n===this._crumbSig)return;this._crumbSig=n;let r=e.querySelector(`.wui-cmd-trail`);if(!r)return;let i=[t,...this._path.map(e=>e.label)];r.replaceChildren(...i.map((e,t)=>{let n=document.createElement(`li`),r=t===i.length-1,a=document.createElement(r?`span`:`button`);return a.className=`wui-cmd-crumb`,a.textContent=e,r?a.setAttribute(`aria-current`,`page`):(a.type=`button`,a.dataset.depth=String(t)),n.append(a),n}))}_recentsHost(){return this.querySelector(`.wui-cmd-recents`)}_realOptions(){let e=this._recentsHost();return[...this.querySelectorAll(r)].filter(t=>!e?.contains(t))}_recentEntries(){let e=this.getAttribute(`recents-key`);if(!e)return[];let t;try{t=JSON.parse(globalThis.localStorage?.getItem(e)??`[]`)}catch{return[]}return Array.isArray(t)?t.filter(e=>e&&typeof e.g==`string`&&typeof e.k==`string`):[]}_recentsLimit(){let e=Number.parseInt(this.getAttribute(`recents-limit`)??``,10);return Number.isFinite(e)&&e>0?Math.min(e,c):s}_remember(e){let t=this.getAttribute(`recents-key`),{groupKey:n,key:r,opens:i}=e.dataset;if(!t||i||n==null||r==null)return;let a=[{g:n,k:r},...this._recentEntries().filter(e=>!(e.g===n&&e.k===r))];try{globalThis.localStorage?.setItem(t,JSON.stringify(a.slice(0,this._recentsLimit())))}catch{}}_renderRecents(){let e=this._recentsHost();if(!e)return;let t=this._input(),n=this._path.length===0&&!(t?.value??``).trim()?this._recentEntries():[],r=this._realOptions(),i=[];for(let e of n){let t=r.find(t=>t.dataset.groupKey===e.g&&t.dataset.key===e.k);if(t&&!t.dataset.opens&&!this._isDisabled(t)&&i.push(t),i.length>=this._recentsLimit())break}if(!i.length){e.firstChild&&e.replaceChildren();return}let a=`${this._recentsId}-label`,s=document.createElement(`div`);s.className=`wui-cmd-group`,s.setAttribute(`role`,`group`),s.setAttribute(`aria-labelledby`,a);let c=document.createElement(`div`);c.className=`wui-cmd-group-label`,c.setAttribute(`role`,`presentation`),c.id=a,c.textContent=this.getAttribute(`recents-label`)??o,s.append(c);for(let e of i){let t=e.cloneNode(!0);t.id=`${this._recentsId}-${e.id}`,t.hidden=!1,t.removeAttribute(`aria-selected`),s.append(t)}e.replaceChildren(s)}_inScope(e,t){return!t||(e.closest(`.wui-cmd-page`)?.dataset.page??null)===(this._path.at(-1)?.key??null)}_navigate(e){window.location.assign(e)}_applyFilter(){let e=this._input(),i=(e?e.value:``).trim(),a=i.toLowerCase(),o=this.highlight,s=[...this.querySelectorAll(`.wui-cmd-page`)],c=s.length>0,l=this._path.at(-1)?.key??null;for(let e of s)e.hidden=e.dataset.page!==l;let u=0;for(let e of this._realOptions()){let r=e.querySelector(`.wui-cmd-item-label`),s=e.dataset.label??r?.textContent??``,l=this._inScope(e,c)&&(!a||s.toLowerCase().includes(a));e.hidden=!l,l&&u++,r&&(r.innerHTML=n(s,o?i:``).map(e=>e.match?`<mark class="wui-cmd-mark">${t(e.text)}</mark>`:t(e.text)).join(``))}let d=this._recentsHost();for(let e of this.querySelectorAll(`[role="group"]`))d?.contains(e)||(e.hidden=![...e.querySelectorAll(r)].some(e=>!e.hidden));let f=this.querySelector(`[role="listbox"]`);f&&(f.hidden=u===0);let p=this.querySelector(`.wui-cmd-empty`);p&&(p.textContent=a&&u===0?this.emptyText:``)}_teardown(){this.removeEventListener(`keydown`,this._onKeyDown),this.removeEventListener(`click`,this._onClick),this.removeEventListener(`mousedown`,this._onMouseDown),this.removeEventListener(`mousemove`,this._onMouseMove),this.removeEventListener(`input`,this._onInput),this._modal?.removeEventListener(`hidden.bs.modal`,this._onModalHidden),this._modal=null}};export{d as t};
@@ -1 +1 @@
1
- import{t as e}from"./countries-CvmZ2xpG.js";import{t}from"./WuiSelect-DcbtqI9s.js";var n=e=>{if(e==null)return null;let t=String(e).split(`,`).map(e=>e.trim().toUpperCase()).filter(Boolean);return t.length?new Set(t):null},r=t=>{let r=n(t);return e.filter(([e])=>!r||r.has(e)).map(([e,t])=>({value:e,label:t,flag:e}))},i=class extends t{static get observedAttributes(){return[...t.observedAttributes,`countries`]}_readOptions(){let e=this.getAttribute(`countries`);return this._countryCache?.attr!==e&&(this._countryCache={attr:e,options:r(e)}),this._countryCache.options}};export{i as t};
1
+ import{t as e}from"./countries-CvmZ2xpG.js";import{t}from"./WuiSelect-CT8tgsxL.js";var n=e=>{if(e==null)return null;let t=String(e).split(`,`).map(e=>e.trim().toUpperCase()).filter(Boolean);return t.length?new Set(t):null},r=t=>{let r=n(t);return e.filter(([e])=>!r||r.has(e)).map(([e,t])=>({value:e,label:t,flag:e}))},i=class extends t{static get observedAttributes(){return[...t.observedAttributes,`countries`]}_readOptions(){let e=this.getAttribute(`countries`);return this._countryCache?.attr!==e&&(this._countryCache={attr:e,options:r(e)}),this._countryCache.options}};export{i as t};
@@ -1,4 +1,4 @@
1
- import{t as e}from"./elementBase-BlsR4tqa.js";import{n as t,r as n,t as r}from"./anchorOverlay-WcDeH46q.js";import{t as i}from"./formMirror-BgY7zkC3.js";import{t as a}from"./iconGlyphs.g-CUm_mfze.js";import{n as o}from"./optionLabel-DOZb8ERB.js";import{a as s,c,i as l,n as u,o as d,r as f,s as p,t as m}from"./calendarMath-BC2wGCD-.js";var h=class extends e{static formAssociated=!0;static get observedAttributes(){return[`value`,`min`,`max`,`placeholder`,`disabled`,`first-day`,`display-format`,`size`,`aria-label`,`aria-describedby`,`aria-invalid`]}constructor(){super();try{this._internals=this.attachInternals()}catch{this._internals=null}this._value=``;let e=new Date(2e3,0,1);this._viewY=e.getFullYear(),this._viewM=e.getMonth(),this._mode=`days`,this._focus=null,this._slide=``}connectedCallback(){if(!this._rendered){this.render();return}this._bindGlobal?.()}attributeChangedCallback(e,t,n){if(e===`aria-invalid`){this._syncInvalid();return}this._rendered&&(e===`value`?(this._value=n||``,this._syncFormValue(),this._syncTrigger()):e===`display-format`?this._syncTrigger():e===`first-day`?this.querySelector(`.datepicker-pop`)?.hidden||this._renderView():this.render())}_syncInvalid(){let e=this.querySelector(`.datepicker-trigger`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}formResetCallback(){this.value=this._defaultValue||``}get value(){return this._value}set value(e){this._value=e||``,i(this,this._value),this._syncTrigger()}_firstDay(){return s(this)}render(){this._defaultValue===void 0&&(this._defaultValue=this.getAttribute(`value`)||``,this._value=this._defaultValue||this._value);let e=this.getAttribute(`placeholder`)||`Enter Date`,t=p(this._value);t&&(this._viewY=t.y,this._viewM=t.m);let n=this.getAttribute(`size`),r=n===`sm`?` input-sm`:n===`lg`?` input-lg`:``,s=this.getAttribute(`aria-label`),c=this.getAttribute(`aria-describedby`);this.innerHTML=`
1
+ import{t as e}from"./elementBase-BlsR4tqa.js";import{n as t,r as n,t as r}from"./anchorOverlay-WcDeH46q.js";import{t as i}from"./formMirror-BgY7zkC3.js";import{t as a}from"./iconGlyphs.g-CUm_mfze.js";import{n as o}from"./optionLabel-BBaur8Bs.js";import{a as s,c,i as l,n as u,o as d,r as f,s as p,t as m}from"./calendarMath-BC2wGCD-.js";var h=class extends e{static formAssociated=!0;static get observedAttributes(){return[`value`,`min`,`max`,`placeholder`,`disabled`,`first-day`,`display-format`,`size`,`aria-label`,`aria-describedby`,`aria-invalid`]}constructor(){super();try{this._internals=this.attachInternals()}catch{this._internals=null}this._value=``;let e=new Date(2e3,0,1);this._viewY=e.getFullYear(),this._viewM=e.getMonth(),this._mode=`days`,this._focus=null,this._slide=``}connectedCallback(){if(!this._rendered){this.render();return}this._bindGlobal?.()}attributeChangedCallback(e,t,n){if(e===`aria-invalid`){this._syncInvalid();return}this._rendered&&(e===`value`?(this._value=n||``,this._syncFormValue(),this._syncTrigger()):e===`display-format`?this._syncTrigger():e===`first-day`?this.querySelector(`.datepicker-pop`)?.hidden||this._renderView():this.render())}_syncInvalid(){let e=this.querySelector(`.datepicker-trigger`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}formResetCallback(){this.value=this._defaultValue||``}get value(){return this._value}set value(e){this._value=e||``,i(this,this._value),this._syncTrigger()}_firstDay(){return s(this)}render(){this._defaultValue===void 0&&(this._defaultValue=this.getAttribute(`value`)||``,this._value=this._defaultValue||this._value);let e=this.getAttribute(`placeholder`)||`Enter Date`,t=p(this._value);t&&(this._viewY=t.y,this._viewM=t.m);let n=this.getAttribute(`size`),r=n===`sm`?` input-sm`:n===`lg`?` input-lg`:``,s=this.getAttribute(`aria-label`),c=this.getAttribute(`aria-describedby`);this.innerHTML=`
2
2
  <div class="datepicker">
3
3
  <button type="button" class="input datepicker-trigger${r}${t?` has-value`:``}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${this.hasAttribute(`disabled`)?` disabled`:``}${s?` aria-label="${o(s)}"`:``}${c?` aria-describedby="${o(c)}"`:``}>
4
4
  <span data-trigger-label class="${t?``:`search-select-placeholder`}">${o(t?d(this._value,this.getAttribute(`display-format`)):e)}</span>
@@ -1,4 +1,4 @@
1
- import{t as e}from"./elementBase-BlsR4tqa.js";import{n as t,r as n,t as r}from"./anchorOverlay-WcDeH46q.js";import{t as i}from"./iconGlyphs.g-CUm_mfze.js";import{n as a}from"./optionLabel-DOZb8ERB.js";import{a as o,c as s,i as c,n as l,o as u,r as d,s as f,t as p}from"./calendarMath-BC2wGCD-.js";var m=`Asia/Kolkata`,h=3,g=[`today`,`last7Days`,`thisMonth`,`lastMonth`,`thisFinancialYear`],_={today:`Today`,last7Days:`Last 7 days`,thisMonth:`This month`,lastMonth:`Last month`,thisFinancialYear:`This financial year`},v=e=>String(e).padStart(2,`0`),y=e=>`${e.getUTCFullYear()}-${v(e.getUTCMonth()+1)}-${v(e.getUTCDate())}`;function b(e=new Date){let t=new Intl.DateTimeFormat(`en-US`,{timeZone:m,year:`numeric`,month:`2-digit`,day:`2-digit`}).formatToParts(e),n=e=>t.find(t=>t.type===e).value;return`${n(`year`)}-${n(`month`)}-${n(`day`)}`}function x(e,t=new Date){let{y:n,m:r,d:i}=f(b(t)),a=(e,t,n)=>y(new Date(Date.UTC(e,t,n))),o=_[e];switch(e){case`today`:return{label:o,start:a(n,r,i),end:a(n,r,i)};case`last7Days`:return{label:o,start:a(n,r,i-6),end:a(n,r,i)};case`thisMonth`:return{label:o,start:a(n,r,1),end:a(n,r+1,0)};case`lastMonth`:return{label:o,start:a(n,r-1,1),end:a(n,r,0)};case`thisFinancialYear`:{let e=r>=h?n:n-1;return{label:o,start:a(e,h,1),end:a(e+1,h,0)}}default:return null}}function S(e){console.warn(`[@webority/ui-elements] <wui-date-range> presets: ${e}`)}function C(e,t=new Date){let n=String(e??``).trim();if(!n)return[];let r;if(n.startsWith(`[`))try{r=JSON.parse(n)}catch{return S(`the attribute is not valid JSON`),[]}else r=n.split(`,`).map(e=>e.trim());let i=[];for(let e of r)if(typeof e==`string`){let n=x(e,t);n?i.push(n):S(`"${e}" is not one of ${g.join(`, `)}`)}else e&&typeof e.label==`string`&&e.label&&f(e.start)&&f(e.end)?i.push({label:e.label,start:e.start,end:e.end}):S(`an item needs a label and ISO start and end dates, or a preset name`);return i}var w=class extends e{static formAssociated=!0;static get observedAttributes(){return[`start`,`end`,`min`,`max`,`placeholder`,`disabled`,`first-day`,`size`,`aria-label`,`aria-describedby`,`name`,`start-name`,`end-name`,`presets`,`aria-invalid`]}constructor(){super();try{this._internals=this.attachInternals()}catch{this._internals=null}this._start=``,this._end=``,this._hover=``;let e=new Date(2e3,0,1);this._viewY=e.getFullYear(),this._viewM=e.getMonth()}connectedCallback(){if(!this._rendered){this.render();return}this._bindGlobal?.()}attributeChangedCallback(e,t,n){if(e===`aria-invalid`){this._syncInvalid();return}this._rendered&&(e===`start`||e===`end`?(this._start=this.getAttribute(`start`)||``,this._end=this.getAttribute(`end`)||``,this._syncTrigger(),this._syncMirrors()):this.render())}_syncInvalid(){let e=this.querySelector(`.daterange-trigger`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}get value(){return{start:this._start,end:this._end}}set value(e){this._start=e?.start||``,this._end=e?.end||``,this._syncTrigger(),this._syncMirrors()}_firstDay(){return o(this)}_label(){let e=this.getAttribute(`placeholder`)||`Start to End`;return!this._start&&!this._end?{text:e,empty:!0}:{text:`${u(this._start)||`Start`} to ${u(this._end)||`End`}`,empty:!1}}render(){this._defaultStart===void 0&&(this._defaultStart=this.getAttribute(`start`)||``,this._defaultEnd=this.getAttribute(`end`)||``,this._start=this._defaultStart||this._start,this._end=this._defaultEnd||this._end);let e=f(this._start);e&&(this._viewY=e.y,this._viewM=e.m);let t=this.getAttribute(`size`),n=t===`sm`?` input-sm`:t===`lg`?` input-lg`:``,{text:r,empty:o}=this._label(),s=this.getAttribute(`aria-label`),c=this.getAttribute(`aria-describedby`);this.innerHTML=`
1
+ import{t as e}from"./elementBase-BlsR4tqa.js";import{n as t,r as n,t as r}from"./anchorOverlay-WcDeH46q.js";import{t as i}from"./iconGlyphs.g-CUm_mfze.js";import{n as a}from"./optionLabel-BBaur8Bs.js";import{a as o,c as s,i as c,n as l,o as u,r as d,s as f,t as p}from"./calendarMath-BC2wGCD-.js";var m=`Asia/Kolkata`,h=3,g=[`today`,`last7Days`,`thisMonth`,`lastMonth`,`thisFinancialYear`],_={today:`Today`,last7Days:`Last 7 days`,thisMonth:`This month`,lastMonth:`Last month`,thisFinancialYear:`This financial year`},v=e=>String(e).padStart(2,`0`),y=e=>`${e.getUTCFullYear()}-${v(e.getUTCMonth()+1)}-${v(e.getUTCDate())}`;function b(e=new Date){let t=new Intl.DateTimeFormat(`en-US`,{timeZone:m,year:`numeric`,month:`2-digit`,day:`2-digit`}).formatToParts(e),n=e=>t.find(t=>t.type===e).value;return`${n(`year`)}-${n(`month`)}-${n(`day`)}`}function x(e,t=new Date){let{y:n,m:r,d:i}=f(b(t)),a=(e,t,n)=>y(new Date(Date.UTC(e,t,n))),o=_[e];switch(e){case`today`:return{label:o,start:a(n,r,i),end:a(n,r,i)};case`last7Days`:return{label:o,start:a(n,r,i-6),end:a(n,r,i)};case`thisMonth`:return{label:o,start:a(n,r,1),end:a(n,r+1,0)};case`lastMonth`:return{label:o,start:a(n,r-1,1),end:a(n,r,0)};case`thisFinancialYear`:{let e=r>=h?n:n-1;return{label:o,start:a(e,h,1),end:a(e+1,h,0)}}default:return null}}function S(e){console.warn(`[@webority/ui-elements] <wui-date-range> presets: ${e}`)}function C(e,t=new Date){let n=String(e??``).trim();if(!n)return[];let r;if(n.startsWith(`[`))try{r=JSON.parse(n)}catch{return S(`the attribute is not valid JSON`),[]}else r=n.split(`,`).map(e=>e.trim());let i=[];for(let e of r)if(typeof e==`string`){let n=x(e,t);n?i.push(n):S(`"${e}" is not one of ${g.join(`, `)}`)}else e&&typeof e.label==`string`&&e.label&&f(e.start)&&f(e.end)?i.push({label:e.label,start:e.start,end:e.end}):S(`an item needs a label and ISO start and end dates, or a preset name`);return i}var w=class extends e{static formAssociated=!0;static get observedAttributes(){return[`start`,`end`,`min`,`max`,`placeholder`,`disabled`,`first-day`,`size`,`aria-label`,`aria-describedby`,`name`,`start-name`,`end-name`,`presets`,`aria-invalid`]}constructor(){super();try{this._internals=this.attachInternals()}catch{this._internals=null}this._start=``,this._end=``,this._hover=``;let e=new Date(2e3,0,1);this._viewY=e.getFullYear(),this._viewM=e.getMonth()}connectedCallback(){if(!this._rendered){this.render();return}this._bindGlobal?.()}attributeChangedCallback(e,t,n){if(e===`aria-invalid`){this._syncInvalid();return}this._rendered&&(e===`start`||e===`end`?(this._start=this.getAttribute(`start`)||``,this._end=this.getAttribute(`end`)||``,this._syncTrigger(),this._syncMirrors()):this.render())}_syncInvalid(){let e=this.querySelector(`.daterange-trigger`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}get value(){return{start:this._start,end:this._end}}set value(e){this._start=e?.start||``,this._end=e?.end||``,this._syncTrigger(),this._syncMirrors()}_firstDay(){return o(this)}_label(){let e=this.getAttribute(`placeholder`)||`Start to End`;return!this._start&&!this._end?{text:e,empty:!0}:{text:`${u(this._start)||`Start`} to ${u(this._end)||`End`}`,empty:!1}}render(){this._defaultStart===void 0&&(this._defaultStart=this.getAttribute(`start`)||``,this._defaultEnd=this.getAttribute(`end`)||``,this._start=this._defaultStart||this._start,this._end=this._defaultEnd||this._end);let e=f(this._start);e&&(this._viewY=e.y,this._viewM=e.m);let t=this.getAttribute(`size`),n=t===`sm`?` input-sm`:t===`lg`?` input-lg`:``,{text:r,empty:o}=this._label(),s=this.getAttribute(`aria-label`),c=this.getAttribute(`aria-describedby`);this.innerHTML=`
2
2
  <div class="daterange">
3
3
  <button type="button" class="input daterange-trigger${n}${o?``:` has-value`}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${this.hasAttribute(`disabled`)?` disabled`:``}${s?` aria-label="${a(s)}"`:``}${c?` aria-describedby="${a(c)}"`:``}>
4
4
  <span data-range-label class="${o?`search-select-placeholder`:``}">${a(r)}</span>
@@ -0,0 +1,25 @@
1
+ import{t as e}from"./elementBase-BlsR4tqa.js";import{n as t,r as n,t as r}from"./anchorOverlay-WcDeH46q.js";import{n as i,t as a}from"./focusOrigin-2imUSs-u.js";import{n as o}from"./formMirror-BgY7zkC3.js";import{t as s}from"./iconGlyphs.g-CUm_mfze.js";import{n as c,t as l}from"./listboxKeyNav-DMIvs9d6.js";import{a as u,i as d,n as f,r as p,t as m}from"./optionLabel-BBaur8Bs.js";import{i as h,t as g}from"./tokenCommit-BKckxgtg.js";var _=class extends e{static formAssociated=!0;_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}static get observedAttributes(){return[`placeholder`,`search-placeholder`,`searchable`,`disabled`,`icon`,`size`,`collapse-chips`,`aria-label`,`aria-invalid`,`allow-custom`,`custom-pattern`,`custom-invalid-message`]}constructor(){super(),this._values=[],this._optionsProp=null,this._active=-1,this._typeahead=``,this._typeaheadTimer=null,this._customError=``;try{this._internals=this.attachInternals()}catch{this._internals=null}}connectedCallback(){if(!this._rendered){if(!this._valuesInit&&!this._optionsProp&&!this._values.length){let e=this.getAttribute(`value`);if(e!=null&&e!==``)this._values=e.split(`,`).map(e=>e.trim()).filter(Boolean);else{let e=[...this.querySelectorAll(`:scope > wui-option[selected]`)].map(e=>e.getAttribute(`value`)??e.textContent.trim());e.length&&(this._values=e.map(String))}}this._valuesInit=!0,this._defaultCaptured||=(this._defaultValues=this._values.slice(),!0),this.render();return}this._bindGlobal?.()}formResetCallback(){this.values=(this._defaultValues||[]).slice();let e=this.querySelector(`[data-input]`);e&&(e.value=``),this._setCustomError(``)}attributeChangedCallback(e){if(e===`aria-invalid`){this._syncInvalid();return}e===`custom-pattern`||e===`custom-invalid-message`||this._rendered&&this.render()}_syncInvalid(){let e=this.querySelector(`.search-select-control`);e&&(this.hasAttribute(`aria-invalid`)||this._customError?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}get values(){return this._values.slice()}set values(e){this._values=Array.isArray(e)?e.map(String):[],o(this,this._values),this._rendered&&(this._renderControl(),this._renderOptions(this._query()))}set options(e){if(this._optionsProp=Array.isArray(e)?e:null,this._rendered&&this._allowCustom){this._renderControl(),this._renderOptions(this._query());return}this.isConnected&&this.render()}get options(){return this._readOptions()}get validateCustom(){return this._validateCustom??null}set validateCustom(e){this._validateCustom=typeof e==`function`?e:null}get _allowCustom(){return this.hasAttribute(`allow-custom`)}_query(){let e=this.querySelector(this._allowCustom?`[data-input]`:`.search-select-input`);return e?e.value:``}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>{let t={value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,icon:e.getAttribute(`icon`)||void 0,[m]:!0,selected:e.hasAttribute(`selected`)};for(let[n,r]of y){let i=e.getAttribute(n);i&&(t[r]=i)}return e.hasAttribute(`disabled`)&&(t.disabled=!0),t}))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}_labelFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?d(t):u(e)}_labelHtmlFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?p(t):f(e)}render(){this._snapshotDeclared();let e=this._allowCustom,t=this.hasAttribute(`searchable`)&&!e,n=this.getAttribute(`search-placeholder`)||`Search…`,r=this.getAttribute(`icon`),i=this.getAttribute(`size`),a=i===`sm`?` search-select-sm`:i===`lg`?` search-select-lg`:``;o(this,this._values),this.id||=`wui-multiselect-${Math.random().toString(36).slice(2,9)}`;let c=`${this.id}-listbox`;this._listboxId=c;let l=this.hasAttribute(`disabled`);if(e){let e=`${this.id}-custom-error`;this.innerHTML=`
2
+ <div class="search-select${a}">
3
+ <div class="input search-select-control search-select-multi"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${l?` aria-disabled="true"`:``}>
4
+ ${r?s(r,{className:`search-select-icon`}):``}
5
+ <div class="ms-chips" data-chips><input type="text" class="ms-input" data-input role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="false" aria-controls="${E(c)}" aria-label="${E(this._accessibleName())}" aria-describedby="${E(e)}" autocomplete="off"${l?` disabled`:``} /></div>
6
+ ${s(`chevron-down`,{className:`search-select-caret`})}
7
+ </div>
8
+ <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${E(c)}" aria-multiselectable="true" tabindex="-1" hidden>
9
+ <div class="search-select-options"></div>
10
+ </div>
11
+ </div>
12
+ <div class="field-error wui-ms-custom-error" id="${E(e)}" aria-live="polite" hidden></div>`}else this.innerHTML=`
13
+ <div class="search-select${a}">
14
+ <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${E(c)}" aria-label="${E(this._accessibleName())}"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${l?` aria-disabled="true"`:` tabindex="0"`}>
15
+ ${r?s(r,{className:`search-select-icon`}):``}
16
+ <div class="ms-chips" data-chips></div>
17
+ ${s(`chevron-down`,{className:`search-select-caret`})}
18
+ </div>
19
+ <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${E(c)}" aria-multiselectable="true" tabindex="-1" hidden>
20
+ ${t?`<div class="search-select-search">${s(`search`)}<input class="search-select-input" placeholder="${E(n)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${s(`x`)}</button></div>`:``}
21
+ <div class="search-select-options"></div>
22
+ <div class="search-select-empty" hidden>No matches</div>
23
+ </div>
24
+ </div>`;this._rendered=!0,this._customError=``,o(this,this._values),this._renderControl(),this._renderOptions(),this._wire()}_renderControl(){let e=this.querySelector(`[data-chips]`);if(!e)return;let t=this.getAttribute(`placeholder`)||`Select…`,n=this._allowCustom?e.querySelector(`[data-input]`):null,r=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${E(e)}" aria-label="Remove ${E(this._labelFor(e))}">${s(`x`)}</button></span>`).join(``);if(n){for(let t of[...e.querySelectorAll(`:scope > .chip`)])t.remove();n.insertAdjacentHTML(`beforebegin`,r),n.placeholder=this._values.length?``:t,this._collapseChips();return}if(!this._values.length){e.innerHTML=`<span class="search-select-placeholder">${f(t)}</span>`;return}e.innerHTML=r,this._collapseChips()}_collapseChips(){let e=this.querySelector(`[data-chips]`);if(!e||!this.hasAttribute(`collapse-chips`)||!this._values.length)return;e.querySelector(`.chip-more`)?.remove();let t=[...e.querySelectorAll(`:scope > .chip:not(.chip-more)`)];for(let e of t)e.style.display=``;if(!t.length)return;let n=e.clientWidth,r=e=>e.offsetLeft+e.offsetWidth;if(r(t[t.length-1])<=n)return;let i=document.createElement(`span`);i.className=`chip chip-sm chip-more`,i.textContent=`+${t.length}`,t[t.length-1].after(i);let a=i.offsetWidth+6,o=0;for(let e of t)if(r(e)<=n-a)o+=1;else break;o<1&&(o=1);for(let e=o;e<t.length;e+=1)t[e].style.display=`none`;i.textContent=`+${t.length-o}`}_matches(e,t){return d(e).toLowerCase().includes(t)||String(e.description??``).toLowerCase().includes(t)}_optionNamed(e){let t=e.trim().toLowerCase();return this._readOptions().find(e=>String(e.value??``).toLowerCase()===t||d(e).trim().toLowerCase()===t)}_renderOptions(e){let t=this.querySelector(`.search-select-options`),n=this.querySelector(`.search-select-empty`);if(!t)return;let r=(e||``).trim(),i=r.toLowerCase(),a=this._readOptions();i&&(a=a.filter(e=>this._matches(e,i)));let o=this._listboxId||`${this.id||`wui-multiselect`}-listbox`,c=this._allowCustom&&r&&!this._optionNamed(r),l=a.map((e,t)=>{let n=this._values.includes(String(e.value)),r=`${o}-opt-${t}`;return b(e)?C(e,r,n):`<button type="button" role="option" id="${E(r)}" class="search-select-option${n?` selected`:``}" data-value="${E(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${p(e)}</span><span class="ms-check">${s(`check`)}</span></button>`});c&&l.push(`<button type="button" role="option" id="${E(`${o}-opt-${a.length}`)}" class="search-select-option search-select-option-custom" data-value="${E(r)}" data-custom="true" aria-selected="false">Add “${f(r)}”</button>`),t.innerHTML=l.join(``),n&&(n.hidden=a.length>0),this._active=-1,this._combobox()?.removeAttribute(`aria-activedescendant`),this._allowCustom&&this._syncCustomMenu?.(),this._reanchor?.()}_combobox(){return this._allowCustom?this.querySelector(`[data-input]`):this.querySelector(`.search-select-control`)}_setCustomError(e){this._customError=e||``;let t=this.querySelector(`.wui-ms-custom-error`),n=this.querySelector(`[data-input]`);t&&(t.textContent=this._customError,t.hidden=!this._customError),n&&(this._customError?n.setAttribute(`aria-invalid`,`true`):n.removeAttribute(`aria-invalid`)),this._syncInvalid()}_customRefusal(e){let t=this.getAttribute(`custom-invalid-message`)||`Enter a valid value.`,n=this.getAttribute(`custom-pattern`);if(n){let r=T(n);if(r&&!r.test(e))return t}let r=this._validateCustom;if(r){let n=r(e);return n===!0?``:typeof n==`string`&&n?n:t}return``}_commitTyped(e){let t=e.trim().replace(/,+$/,``).trim();if(!t)return``;let n=this._optionNamed(t),r;if(n){if(n.disabled)return n.disabledHint||this.getAttribute(`custom-invalid-message`)||`That option is not available.`;r=String(n.value)}else{let e=this._customRefusal(t);if(e)return e;r=t}let i=r.toLowerCase();return this._values.some(e=>e.toLowerCase()===i)||(this._values=[...this._values,r]),``}_wire(){this._teardown();let e=this.querySelector(`.search-select-control`),s=this.querySelector(`.search-select-menu`),u=this.querySelector(`.search-select-input`),d=this.querySelector(`.search-select-clear`),f=this.querySelector(`.search-select-options`),p=this._allowCustom,m=p?this.querySelector(`[data-input]`):null,_=m||e;if(!e||!s)return;let y=()=>this.hasAttribute(`disabled`),b=()=>r(e,s,{matchWidth:!0}),x=()=>[...this.querySelectorAll(`.search-select-option`)],S=()=>x().filter(e=>!e.hidden),C=(e,{reveal:t=!0}={})=>{let n=S();this._active=e,c(f,e>=0&&n[e]||null),e>=0&&n[e]?(t&&n[e].scrollIntoView({block:`nearest`}),_.setAttribute(`aria-activedescendant`,n[e].id)):_.removeAttribute(`aria-activedescendant`)},w=!1,T=()=>p?w:!s.hidden,E=()=>{let t=w&&x().length>0,n=s.hidden;s.hidden=!t,_.setAttribute(`aria-expanded`,String(t)),e.classList.toggle(`open`,t),t&&n&&b()};this._syncCustomMenu=p?E:null;let D=()=>{T()&&b()},O=()=>{if(!y()){if(t(this,D),p){w=!0,E();return}s.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),b(),u&&(u.value=``,this._renderOptions(``),u.focus())}},k=()=>{p?(w=!1,E()):(s.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`)),C(-1),clearTimeout(this._typeaheadTimer),this._typeaheadTimer=null,this._typeahead=``,n(this)},A=()=>{o(this,this._values),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},j=e=>{let t=String(e);if(this._values.includes(t))this._values=this._values.filter(e=>e!==t);else if(p&&this._values.some(e=>e.toLowerCase()===t.toLowerCase()))return;else this._values=[...this._values,t];this._renderControl(),this._renderOptions(this._query()),A()},M=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(this._query()),A()},N=(e,{quiet:t=!1}={})=>{let n=this._values.length,r=g(e,v)?h(e,v):[e],i=[],a=``;for(let e of r){let t=this._commitTyped(e);t&&(i.push(e.trim()),a||=t)}t&&i.length||(m.value=i.join(`, `),this._setCustomError(a),this._values.length!==n&&(this._renderControl(),A()),this._renderOptions(m.value))},P=e=>{if(!(!e||e.getAttribute(`aria-disabled`)===`true`)){if(e.dataset.custom===`true`){N(e.dataset.value);return}j(e.dataset.value),m?.value&&(m.value=``,this._setCustomError(``),this._renderOptions(``))}};e.addEventListener(`click`,e=>{if(y())return;let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),M(t.dataset.remove),m?.focus();return}if(m){let t=T();e.target!==m&&m.focus(),e.target===m||!t?O():k();return}T()?k():O()}),f.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(P(t),(m||u)?.focus())}),f.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&!t.classList.contains(`is-active`)&&C(S().indexOf(t),{reveal:!1})}),f.addEventListener(`mouseleave`,()=>C(-1)),f.addEventListener(`error`,e=>{e.target?.classList?.contains(`avatar-img`)&&e.target.remove()},!0),u?.addEventListener(`input`,()=>{this._renderOptions(u.value),d&&(d.hidden=!u.value),C(-1)}),this._navHandler=l({getVisibleOptions:S,getActive:()=>this._active,setActive:e=>C(e),onEnter:e=>{e?P(e):m?.value.trim()&&N(m.value)},onEscape:()=>{this._navHandler.clearTypeahead(),k(),m||e.focus()}});let F=e=>{let t=m||u;if(e.key===`Backspace`&&!t?.value&&this._values.length){M(this._values[this._values.length-1]);return}this._navHandler.handler(e)};if(u?.addEventListener(`keydown`,F),d?.addEventListener(`click`,()=>{u.value=``,this._renderOptions(``),d.hidden=!0,u.focus()}),m){let t=e=>{e.target!==m&&e.preventDefault()};f.addEventListener(`mousedown`,t),e.addEventListener(`mousedown`,t),i(),m.addEventListener(`focus`,()=>{a()&&O()}),m.addEventListener(`input`,()=>{this._customError&&this._setCustomError(``),this._renderOptions(m.value),O()}),m.addEventListener(`keydown`,e=>{if(e.key===`,`&&m.value.trim()){e.preventDefault(),N(m.value);return}if(e.key===`Enter`){if(this._active<0&&!m.value.trim())return;this._navHandler.handler(e);return}(e.key===`ArrowDown`||e.key===`ArrowUp`)&&!T()&&O(),F(e)}),m.addEventListener(`paste`,e=>{let t=e.clipboardData?.getData(`text/plain`)??``;g(t,v)&&(e.preventDefault(),N(`${m.value}${t}`))}),m.addEventListener(`blur`,e=>{e.relatedTarget&&this.contains(e.relatedTarget)||(m.value.trim()&&N(m.value,{quiet:!0}),k())})}else e.addEventListener(`keydown`,e=>{if(T()){F(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),O())});this._bindGlobal=()=>{this._teardown(),!this._ro&&typeof ResizeObserver<`u`&&(this._ro=new ResizeObserver(()=>this._collapseChips()),this._ro.observe(this)),this._onDocClick=e=>{T()&&!this.contains(e.target)&&k()},document.addEventListener(`click`,this._onDocClick),T()&&t(this,D)},this._bindGlobal()}_teardown(){this._onDocClick&&=(document.removeEventListener(`click`,this._onDocClick),null),n(this),this._navHandler?.teardown()}disconnectedCallback(){this._teardown(),this._ro?.disconnect(),this._ro=null}},v=[`,`,`;`,`
25
+ `,` `],y=[[`description`,`description`],[`avatar`,`avatar`],[`initials`,`initials`],[`disabled-hint`,`disabledHint`]],b=e=>!!(e.description||e.avatar||e.initials||e.disabled||e.disabledHint),x=e=>{let t=String(e??``).trim();return/^(https?:)?\/\//i.test(t)||/^\/(?!\/)/.test(t)||/^data:image\/(png|jpe?g|gif|webp|avif);/i.test(t)?t:``},S=e=>{let t=x(e.avatar);return!t&&!e.initials?``:`<span class="avatar wui-opt-avatar" aria-hidden="true"><span class="avatar-face">${f(e.initials??``)}</span>${t?`<img class="avatar-img" src="${E(t)}" alt="" />`:``}</span>`},C=(e,t,n)=>{let r=!!e.disabled,i=e.description?`<span class="wui-opt-desc">${f(e.description)}</span>`:``,a=e.disabledHint&&r?`<span class="wui-opt-hint">${f(e.disabledHint)}</span>`:``;return`<button type="button" role="option" id="${E(t)}" class="search-select-option wui-opt-rich${n?` selected`:``}" data-value="${E(e.value)}" aria-selected="${n}"${r?` aria-disabled="true"`:``}><span class="ms-opt-label"><span class="wui-opt-name">${p(e)}</span>${i}</span>${a}${S(e)}<span class="ms-check">${s(`check`)}</span></button>`},w=new Map,T=e=>{if(w.has(e))return w.get(e);let t=null;try{t=RegExp(`^(?:${e})$`,`u`)}catch{console.warn(`<wui-multiselect> custom-pattern is not a valid regular expression and is ignored: ${e}`)}return w.set(e,t),t},E=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`);export{_ as t};
@@ -1,4 +1,4 @@
1
- import{t as e}from"./elementBase-BlsR4tqa.js";import{n as t,r as n,t as r}from"./anchorOverlay-WcDeH46q.js";import{t as i}from"./formMirror-BgY7zkC3.js";import{t as a}from"./iconGlyphs.g-CUm_mfze.js";import{n as o,t as s}from"./listboxKeyNav-DMIvs9d6.js";import{n as c,r as l,t as u}from"./optionLabel-DOZb8ERB.js";var d=class extends e{static formAssociated=!0;static get observedAttributes(){return[`value`,`placeholder`,`search-placeholder`,`searchable`,`disabled`,`compact`,`size`,`clearable`,`icon`,`prefix`,`aria-label`,`aria-invalid`]}_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}constructor(){super();try{this._internals=this.attachInternals()}catch{this._internals=null}this._value=``,this._optionsProp=null,this._active=-1,this._typeahead=``,this._typeaheadTimer=null}connectedCallback(){if(!this._rendered){this.render();return}this._bindGlobal?.()}attributeChangedCallback(e,t,n){if(e===`value`){this.value=n;return}if(e===`aria-invalid`){this._syncInvalid();return}this._rendered&&this.render()}_syncInvalid(){let e=this.querySelector(`.search-select-control`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}formResetCallback(){this.value=this._defaultValue||``}get value(){return this._value}set value(e){this._value=e==null?``:String(e),i(this,this._value),this._syncSelected(),this._syncReset()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,icon:e.getAttribute(`icon`)||void 0,[u]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._defaultValue===void 0&&(this._defaultValue=this.getAttribute(`value`)||``),this._snapshotDeclared();let e=this._readOptions(),t=this.hasAttribute(`searchable`),n=this.hasAttribute(`clearable`),r=this.getAttribute(`size`),o=r===`sm`?` search-select-sm`:r===`lg`?` search-select-lg`:``,s=this.getAttribute(`icon`),u=this.getAttribute(`prefix`),d=this.getAttribute(`placeholder`)||`Select...`,p=this.getAttribute(`search-placeholder`)||`Search...`,m=e.find(e=>String(e.value)===String(this._value))||e.find(e=>e.selected);m&&(this._value=String(m.value)),i(this,this._value),this.id||=`wui-select-${Math.random().toString(36).slice(2,9)}`;let h=`${this.id}-listbox`;this._listboxId=h;let g=e.map((e,t)=>{let n=String(e.value)===String(this._value);return`<button type="button" role="option" id="${f(`${h}-opt-${t}`)}" class="search-select-option${n?` selected`:``}" data-value="${f(e.value)}" aria-selected="${n}">${l(e)}</button>`}).join(``);this.innerHTML=`
1
+ import{t as e}from"./elementBase-BlsR4tqa.js";import{n as t,r as n,t as r}from"./anchorOverlay-WcDeH46q.js";import{t as i}from"./formMirror-BgY7zkC3.js";import{t as a}from"./iconGlyphs.g-CUm_mfze.js";import{n as o,t as s}from"./listboxKeyNav-DMIvs9d6.js";import{n as c,r as l,t as u}from"./optionLabel-BBaur8Bs.js";var d=class extends e{static formAssociated=!0;static get observedAttributes(){return[`value`,`placeholder`,`search-placeholder`,`searchable`,`disabled`,`compact`,`size`,`clearable`,`icon`,`prefix`,`aria-label`,`aria-invalid`]}_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}constructor(){super();try{this._internals=this.attachInternals()}catch{this._internals=null}this._value=``,this._optionsProp=null,this._active=-1,this._typeahead=``,this._typeaheadTimer=null}connectedCallback(){if(!this._rendered){this.render();return}this._bindGlobal?.()}attributeChangedCallback(e,t,n){if(e===`value`){this.value=n;return}if(e===`aria-invalid`){this._syncInvalid();return}this._rendered&&this.render()}_syncInvalid(){let e=this.querySelector(`.search-select-control`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}formResetCallback(){this.value=this._defaultValue||``}get value(){return this._value}set value(e){this._value=e==null?``:String(e),i(this,this._value),this._syncSelected(),this._syncReset()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,icon:e.getAttribute(`icon`)||void 0,[u]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._defaultValue===void 0&&(this._defaultValue=this.getAttribute(`value`)||``),this._snapshotDeclared();let e=this._readOptions(),t=this.hasAttribute(`searchable`),n=this.hasAttribute(`clearable`),r=this.getAttribute(`size`),o=r===`sm`?` search-select-sm`:r===`lg`?` search-select-lg`:``,s=this.getAttribute(`icon`),u=this.getAttribute(`prefix`),d=this.getAttribute(`placeholder`)||`Select...`,p=this.getAttribute(`search-placeholder`)||`Search...`,m=e.find(e=>String(e.value)===String(this._value))||e.find(e=>e.selected);m&&(this._value=String(m.value)),i(this,this._value),this.id||=`wui-select-${Math.random().toString(36).slice(2,9)}`;let h=`${this.id}-listbox`;this._listboxId=h;let g=e.map((e,t)=>{let n=String(e.value)===String(this._value);return`<button type="button" role="option" id="${f(`${h}-opt-${t}`)}" class="search-select-option${n?` selected`:``}" data-value="${f(e.value)}" aria-selected="${n}">${l(e)}</button>`}).join(``);this.innerHTML=`
2
2
  <div class="search-select${this.hasAttribute(`compact`)?` search-select-compact`:``}${o}">
3
3
  <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-controls="${f(h)}" aria-label="${f(this._accessibleName())}"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${this.hasAttribute(`disabled`)?` disabled`:``}>
4
4
  ${s?a(s,{className:`search-select-icon`}):``}