@webority/ui-elements 0.138.0 → 0.139.0

package/dist/ui-elements/multiselect.global.js

@@ -1,25 +0,0 @@
-(function(e,t,n,r,i,a,o,s,c,l){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var u=globalThis.WeborityUiElementsInternal?.version;if(u!==`0.138.0`)throw Error(`[webority-ui] multiselect expects ui-elements 0.138.0 but the page loaded `+u+`.`);var d=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:``},f=(e,t=`wui-opt-avatar`)=>{let n=d(e.avatar);return!n&&!e.initials?``:`<span class="avatar ${t}" aria-hidden="true"><span class="avatar-face">${(0,r.escapeHtml)(e.initials??``)}</span>${n?`<img class="avatar-img" src="${p(n)}" alt="" />`:``}</span>`},p=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),m=!1,h=!1;function g(){h||typeof document>`u`||(h=!0,document.addEventListener(`keydown`,e=>{m=e.key===`Tab`},!0),document.addEventListener(`keyup`,()=>{m=!1},!0))}function _(){return m}function v(e,t){let n=[String(e??``)];for(let e of t)n=n.flatMap(t=>t.split(e));return n.map(e=>e.trim()).filter(Boolean)}var y=(e,t)=>t.some(t=>String(e??``).includes(t)),b=class extends a.ElementBase{static formAssociated=!0;_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}static get observedAttributes(){return[`placeholder`,`search-placeholder`,`searchable`,`disabled`,`readonly`,`loading`,`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)this._bindGlobal?.();else{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()}}formResetCallback(){this.values=(this._defaultValues||[]).slice();let e=this.querySelector(`[data-input]`);e&&(e.value=``),this._setCustomError(``)}attributeChangedCallback(e){e===`aria-invalid`?this._syncInvalid():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):[],(0,s.syncFormMirrors)(this,this._values),this._rendered&&(this._renderControl(),this._renderOptions(this._query()))}set options(e){this._optionsProp=Array.isArray(e)?e:null,this._rendered&&this._allowCustom?(this._renderControl(),this._renderOptions(this._query())):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,[r.TRUSTED_HTML]:!0,selected:e.hasAttribute(`selected`)};for(let[n,r]of S){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?(0,r.optionText)(t):(0,r.stripTags)(e)}_labelHtmlFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?(0,r.optionLabelHtml)(t):(0,r.escapeHtml)(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`:``;(0,s.syncFormMirrors)(this,this._values),this.id||=`wui-multiselect-${Math.random().toString(36).slice(2,9)}`;let l=`${this.id}-listbox`;this._listboxId=l;let u=this.hasAttribute(`disabled`),d=(0,o.isInert)(this);if(e){let e=`${this.id}-custom-error`;this.innerHTML=`
-      <div class="search-select${a}">
-        <div class="input search-select-control search-select-multi"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${u?` aria-disabled="true"`:``}>
-          ${r?(0,c.glyphSvg)(r,{className:`search-select-icon`}):``}
-          <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="${D(l)}" aria-label="${D(this._accessibleName())}" aria-describedby="${D(e)}" autocomplete="off"${u?` disabled`:d?` readonly`:``} /></div>
-          ${(0,c.glyphSvg)(`chevron-down`,{className:`search-select-caret`})}
-        </div>
-        <div class="search-select-menu search-select-menu-fixed" hidden>
-          <div class="search-select-options" role="listbox" id="${D(l)}" aria-multiselectable="true" tabindex="-1"></div>
-        </div>
-      </div>
-      <div class="field-error wui-ms-custom-error" id="${D(e)}" aria-live="polite" hidden></div>`}else this.innerHTML=`
-      <div class="search-select${a}">
-        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${D(l)}" aria-label="${D(this._accessibleName())}"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${u?` aria-disabled="true"`:` tabindex="0"`}>
-          ${r?(0,c.glyphSvg)(r,{className:`search-select-icon`}):``}
-          <div class="ms-chips" data-chips></div>
-          ${(0,c.glyphSvg)(`chevron-down`,{className:`search-select-caret`})}
-        </div>
-        <div class="search-select-menu search-select-menu-fixed" hidden>
-          ${t?`<div class="search-select-search">${(0,c.glyphSvg)(`search`)}<input class="search-select-input" placeholder="${D(n)}" aria-label="${D(n)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${(0,c.glyphSvg)(`x`)}</button></div>`:``}
-          <div class="search-select-options" role="listbox" id="${D(l)}" aria-multiselectable="true" tabindex="-1"></div>
-          <div class="search-select-empty" hidden>No matches</div>
-        </div>
-      </div>`;this._rendered=!0,this._customError=``,(0,s.syncFormMirrors)(this,this._values),this._renderControl(),this._renderOptions(),this._wire(),(0,o.syncFieldState)(this,this.querySelector(`.search-select-control`))}_renderControl(){let e=this.querySelector(`[data-chips]`);if(!e)return;let t=this.getAttribute(`placeholder`)||`Select…`,n=this._allowCustom?e.querySelector(`[data-input]`):null,i=!(0,o.isReadOnly)(this)&&!this.hasAttribute(`loading`),a=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span>${i?`<button type="button" class="chip-remove" data-remove="${D(e)}" aria-label="Remove ${D(this._labelFor(e))}">${(0,c.glyphSvg)(`x`)}</button>`:``}</span>`).join(``);if(n){for(let t of[...e.querySelectorAll(`:scope > .chip`)])t.remove();n.insertAdjacentHTML(`beforebegin`,a),n.placeholder=this._values.length?``:t,this._collapseChips()}else this._values.length?(e.innerHTML=a,this._collapseChips()):e.innerHTML=`<span class="search-select-placeholder">${(0,r.escapeHtml)(t)}</span>`}_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(0,r.optionText)(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||(0,r.optionText)(e).trim().toLowerCase()===t)}_renderOptions(e){let t=this.querySelector(`.search-select-options`),n=this.querySelector(`.search-select-empty`);if(!t)return;let i=(e||``).trim(),a=i.toLowerCase(),o=this._readOptions();a&&(o=o.filter(e=>this._matches(e,a)));let s=this._listboxId||`${this.id||`wui-multiselect`}-listbox`,l=this._allowCustom&&i&&!this._optionNamed(i),u=o.map((e,t)=>{let n=this._values.includes(String(e.value)),i=`${s}-opt-${t}`;return C(e)?w(e,i,n):`<button type="button" role="option" id="${D(i)}" class="search-select-option${n?` selected`:``}" data-value="${D(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${(0,r.optionLabelHtml)(e)}</span><span class="ms-check">${(0,c.glyphSvg)(`check`)}</span></button>`});l&&u.push(`<button type="button" role="option" id="${D(`${s}-opt-${o.length}`)}" class="search-select-option search-select-option-custom" data-value="${D(i)}" data-custom="true" aria-selected="false">Add “${(0,r.escapeHtml)(i)}”</button>`),t.innerHTML=u.join(``),n&&(n.hidden=o.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=E(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`),t=this.querySelector(`.search-select-menu`),r=this.querySelector(`.search-select-input`),i=this.querySelector(`.search-select-clear`),a=this.querySelector(`.search-select-options`),c=this._allowCustom,u=c?this.querySelector(`[data-input]`):null,d=u||e;if(!e||!t)return;let f=()=>(0,o.isInert)(this),p=()=>(0,n.anchorOverlay)(e,t,{matchWidth:!0}),m=()=>[...this.querySelectorAll(`.search-select-option`)],h=()=>m().filter(e=>!e.hidden),b=(e,{reveal:t=!0}={})=>{let n=h();this._active=e,(0,l.moveActiveRow)(a,e>=0&&n[e]||null),e>=0&&n[e]?(t&&n[e].scrollIntoView({block:`nearest`}),d.setAttribute(`aria-activedescendant`,n[e].id)):d.removeAttribute(`aria-activedescendant`)},S=!1,C=()=>c?S:!t.hidden,w=()=>{let n=S&&m().length>0,r=t.hidden;t.hidden=!n,d.setAttribute(`aria-expanded`,String(n)),e.classList.toggle(`open`,n),n&&r&&p()};this._syncCustomMenu=c?w:null;let T=()=>{C()&&p()},E=()=>{f()||((0,n.bindReanchor)(this,T),c?(S=!0,w()):(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),p(),r&&(r.value=``,this._renderOptions(``),r.focus())))},D=()=>{let r=c?S:e.getAttribute(`aria-expanded`)===`true`;c?(S=!1,w()):(t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`)),b(-1),clearTimeout(this._typeaheadTimer),this._typeaheadTimer=null,this._typeahead=``,(0,n.unbindReanchor)(this),r&&this.dispatchEvent(new Event(`wui-multiselect:close`,{bubbles:!0}))},O=()=>{(0,s.syncFormMirrors)(this,this._values),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},k=e=>{let t=String(e);if(this._values.includes(t))this._values=this._values.filter(e=>e!==t);else if(c&&this._values.some(e=>e.toLowerCase()===t.toLowerCase()))return;else this._values=[...this._values,t];this._renderControl(),this._renderOptions(this._query()),O()},A=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(this._query()),O()},j=(e,{quiet:t=!1}={})=>{let n=this._values.length,r=y(e,x)?v(e,x):[e],i=[],a=``;for(let e of r){let t=this._commitTyped(e);t&&(i.push(e.trim()),a||=t)}t&&i.length||(u.value=i.join(`, `),this._setCustomError(a),this._values.length!==n&&(this._renderControl(),O()),this._renderOptions(u.value))},M=e=>{e&&e.getAttribute(`aria-disabled`)!==`true`&&(e.dataset.custom===`true`?j(e.dataset.value):(k(e.dataset.value),u?.value&&(u.value=``,this._setCustomError(``),this._renderOptions(``))))};e.addEventListener(`click`,e=>{if(f())return;let t=e.target.closest(`[data-remove]`);if(t)e.stopPropagation(),A(t.dataset.remove),u?.focus();else if(u){let t=C();e.target!==u&&u.focus(),e.target===u||!t?E():D()}else C()?D():E()}),a.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(M(t),(u||r)?.focus())}),a.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&!t.classList.contains(`is-active`)&&b(h().indexOf(t),{reveal:!1})}),a.addEventListener(`mouseleave`,()=>b(-1)),a.addEventListener(`error`,e=>{e.target?.classList?.contains(`avatar-img`)&&e.target.remove()},!0),r?.addEventListener(`input`,()=>{this._renderOptions(r.value),i&&(i.hidden=!r.value),b(-1)}),this._navHandler=(0,l.createListboxKeyNav)({getVisibleOptions:h,getActive:()=>this._active,setActive:e=>b(e),onEnter:e=>{e?M(e):u?.value.trim()&&j(u.value)},onEscape:()=>{this._navHandler.clearTypeahead(),D(),u||e.focus()}});let N=e=>{if(f())return;let t=u||r;e.key===`Backspace`&&!t?.value&&this._values.length?A(this._values[this._values.length-1]):(e.key===`Escape`&&C()&&(e.preventDefault(),e.stopPropagation()),this._navHandler.handler(e))};if(r?.addEventListener(`keydown`,N),i?.addEventListener(`click`,()=>{r.value=``,this._renderOptions(``),i.hidden=!0,r.focus()}),u){let t=e=>{e.target!==u&&e.preventDefault()};a.addEventListener(`mousedown`,t),e.addEventListener(`mousedown`,t),g(),u.addEventListener(`focus`,()=>{_()&&E()}),u.addEventListener(`input`,()=>{this._customError&&this._setCustomError(``),this._renderOptions(u.value),E()}),u.addEventListener(`keydown`,e=>{if(!f()){if(e.key===`,`&&u.value.trim())e.preventDefault(),j(u.value);else if(e.key===`Enter`){if(this._active<0&&!u.value.trim())return;this._navHandler.handler(e)}else e.key!==`ArrowDown`&&e.key!==`ArrowUp`||C()||E(),N(e)}}),u.addEventListener(`paste`,e=>{if(f())return;let t=e.clipboardData?.getData(`text/plain`)??``;y(t,x)&&(e.preventDefault(),j(`${u.value}${t}`))}),u.addEventListener(`blur`,e=>{e.relatedTarget&&this.contains(e.relatedTarget)||(u.value.trim()&&j(u.value,{quiet:!0}),D())})}else e.addEventListener(`keydown`,e=>{C()?N(e):f()||(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),E())});this._bindGlobal=()=>{this._teardown(),!this._ro&&typeof ResizeObserver<`u`&&(this._ro=new ResizeObserver(()=>this._collapseChips()),this._ro.observe(this)),this._onDocClick=e=>{C()&&!this.contains(e.target)&&D()},document.addEventListener(`click`,this._onDocClick),C()&&(0,n.bindReanchor)(this,T)},this._bindGlobal()}_teardown(){this._onDocClick&&=(document.removeEventListener(`click`,this._onDocClick),null),(0,n.unbindReanchor)(this),this._navHandler?.teardown()}disconnectedCallback(){this._teardown(),this._ro?.disconnect(),this._ro=null}},x=[`,`,`;`,`
-`,`	`],S=[[`description`,`description`],[`avatar`,`avatar`],[`initials`,`initials`],[`disabled-hint`,`disabledHint`]],C=e=>!!(e.description||e.avatar||e.initials||e.disabled||e.disabledHint),w=(e,t,n)=>{let i=!!e.disabled,a=e.description?`<span class="wui-opt-desc">${(0,r.escapeHtml)(e.description)}</span>`:``,o=e.disabledHint&&i?`<span class="wui-opt-hint">${(0,r.escapeHtml)(e.disabledHint)}</span>`:``;return`<button type="button" role="option" id="${D(t)}" class="search-select-option wui-opt-rich${n?` selected`:``}" data-value="${D(e.value)}" aria-selected="${n}"${i?` aria-disabled="true"`:``}><span class="ms-opt-label"><span class="wui-opt-name">${(0,r.optionLabelHtml)(e)}</span>${a}</span>${o}${f(e)}<span class="ms-check">${(0,c.glyphSvg)(`check`)}</span></button>`},T=new Map,E=e=>{if(T.has(e))return T.get(e);let t=null;try{t=RegExp(`^(?:${e})$`,`u`)}catch{(0,i.devWarn)(`<wui-multiselect> custom-pattern is not a valid regular expression and is ignored: ${e}`)}return T.set(e,t),t},D=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`);(0,t.defineElement)(`wui-multiselect`,b),e.WuiMultiSelect=b})(this.WeborityUiElements=this.WeborityUiElements||{},WeborityUiElementsInternal.modules.defineElement,WeborityUiElementsInternal.modules.anchorOverlay,WeborityUiElementsInternal.modules.optionLabel,WeborityUiElementsInternal.modules.devWarn,WeborityUiElementsInternal.modules.elementBase,WeborityUiElementsInternal.modules.fieldState,WeborityUiElementsInternal.modules.formMirror,WeborityUiElementsInternal.modules.iconGlyphs,WeborityUiElementsInternal.modules.listboxKeyNav);

package/dist/ui-elements/taginput.global.js

@@ -1,7 +0,0 @@
-(function(e,t,n,r,i,a){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var o=globalThis.WeborityUiElementsInternal?.version;if(o!==`0.138.0`)throw Error(`[webority-ui] taginput expects ui-elements 0.138.0 but the page loaded `+o+`.`);var s={enter:`Enter`,comma:`,`,space:` `,tab:`Tab`},c={enter:`
-`,comma:`,`,space:` `,tab:`	`},l=e=>s[e],u=e=>c[e];function d(e,t){let n=[String(e??``)];for(let e of t)n=n.flatMap(t=>t.split(e));return n.map(e=>e.trim()).filter(Boolean)}var f=(e,t)=>t.some(t=>String(e??``).includes(t)),p=class extends n.ElementBase{static formAssociated=!0;_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Add tags`}static get observedAttributes(){return[`placeholder`,`disabled`,`readonly`,`loading`,`size`,`max-tags`,`aria-label`,`separators`,`allow-duplicates`,`aria-invalid`]}constructor(){super(),this._values=[],this._draftText=``;try{this._internals=this.attachInternals()}catch{this._internals=null}}connectedCallback(){if(this._rendered)this._wire();else{if(!this._valuesInit&&!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-tag`)].map(e=>e.textContent.trim());e.length&&(this._values=e.map(String))}}this._valuesInit=!0,this._defaultCaptured||=(this._defaultValues=this._values.slice(),!0),this.render()}}formResetCallback(){this.values=(this._defaultValues||[]).slice(),this._draftText=``;let e=this.querySelector(`[data-input]`);e&&(e.value=``)}attributeChangedCallback(e){e===`aria-invalid`?this._syncInvalid():this._rendered&&(e===`separators`||e===`allow-duplicates`?this._wire():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 values(){return this._values.slice()}set values(e){this._values=Array.isArray(e)?e.map(String):[],(0,i.syncFormMirrors)(this,this._values),this._rendered&&this._renderControl()}render(){let e=this.getAttribute(`size`),t=e===`sm`?` search-select-sm`:e===`lg`?` search-select-lg`:``;(0,i.syncFormMirrors)(this,this._values),this.innerHTML=`
-      <div class="search-select${t}">
-        <div class="input search-select-control search-select-multi"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
-          <div class="ms-chips" data-chips><input type="text" class="ms-input" data-input aria-label="${h(this._accessibleName())}" placeholder="${h(this.getAttribute(`placeholder`)||`Add…`)}" autocomplete="off"${this.hasAttribute(`disabled`)?` disabled`:``}${(0,r.isInert)(this)?` readonly`:``}/></div>
-        </div>
-      </div>`,this._rendered=!0,(0,i.syncFormMirrors)(this,this._values),this._renderControl(),this._wire(),(0,r.syncFieldState)(this,this.querySelector(`.input.search-select-control.search-select-multi`))}_renderControl(){let e=this.querySelector(`[data-chips]`);if(!e)return;for(let t of e.querySelectorAll(`:scope > .chip`))t.remove();if(!this._values.length)return;let t=!(0,r.isReadOnly)(this)&&!this.hasAttribute(`loading`);e.querySelector(`[data-input]`).insertAdjacentHTML(`beforebegin`,this._values.map(e=>{let n=t?`<button type="button" class="chip-remove" data-remove="${h(e)}" aria-label="Remove ${h(e)}">${(0,a.glyphSvg)(`x`)}</button>`:``;return`<span class="chip chip-sm"><span class="chip-label">${m(e)}</span>${n}</span>`}).join(``))}_wire(){this._teardown();let e=this.querySelector(`.search-select-control`),t=this.querySelector(`[data-input]`);if(!e||!t)return;let n=()=>(0,r.isInert)(this),a=(this.getAttribute(`separators`)||`enter,comma`).split(`,`).map(e=>e.trim()),o=this.getAttribute(`max-tags`),s=this.hasAttribute(`allow-duplicates`),c=new Set(a.map(l).filter(Boolean)),p=()=>{(0,i.syncFormMirrors)(this,this._values),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},m=e=>{let t=e.trim();if(!t||o&&this._values.length>=parseInt(o,10))return;let n=s?t:t.toLowerCase();(!this._values.some(e=>s?e===t:e.toLowerCase()===n)||s)&&(this._values.push(t),this._renderControl(),p())},h=()=>{!n()&&t.value.trim()&&(m(t.value.replace(/,+$/,``)),t.value=``)},g=e=>{this._values=this._values.filter(t=>t!==e),this._renderControl(),p()},_=e=>{if(!n()){if(e.key===`Enter`&&c.has(`Enter`))e.preventDefault(),m(t.value),t.value=``;else if(e.key===`,`&&c.has(`,`))e.preventDefault(),m(t.value.replace(/,+$/,``)),t.value=``;else if(e.key===` `&&c.has(` `)){let n=t.value.trim();n&&(e.preventDefault(),m(n),t.value=``)}else e.key===`Tab`&&c.has(`Tab`)?(e.preventDefault(),m(t.value),t.value=``):(e.key===`Backspace`&&!t.value&&this._values.length&&(e.preventDefault(),g(this._values[this._values.length-1])),e.key===`Escape`&&(t.value=``))}},v=e=>{if(e.preventDefault(),n())return;let r=e.clipboardData.getData(`text/plain`),i=[];for(let e of a){let t=u(e)??e;if(f(r,[t])){i.push(...d(r,[t]));break}}i.length||i.push(r.trim());for(let e of i)if(m(e),o&&this._values.length>=parseInt(o,10))break;t.value=``};this._onControlClick=e=>{let r=e.target.closest(`[data-remove]`);if(r){if(n())return;e.stopPropagation(),g(r.dataset.remove),t.focus()}else t.focus()},this._onInputKey=_,this._onInputPaste=v,this._onInputBlur=h,e.addEventListener(`click`,this._onControlClick),t.addEventListener(`keydown`,this._onInputKey),t.addEventListener(`paste`,this._onInputPaste),t.addEventListener(`blur`,this._onInputBlur),this._form=this.closest(`form`),this._onFormSubmit=h,this._form&&this._form.addEventListener(`submit`,this._onFormSubmit,!0),this._onDocClick=e=>{this.contains(e.target)||t.blur()},document.addEventListener(`click`,this._onDocClick)}_teardown(){this._onDocClick&&=(document.removeEventListener(`click`,this._onDocClick),null);let e=this.querySelector(`.search-select-control`),t=this.querySelector(`[data-input]`);e&&this._onControlClick&&e.removeEventListener(`click`,this._onControlClick),t&&this._onInputKey&&(t.removeEventListener(`keydown`,this._onInputKey),t.removeEventListener(`paste`,this._onInputPaste),t.removeEventListener(`blur`,this._onInputBlur)),this._form&&this._onFormSubmit&&(this._form.removeEventListener(`submit`,this._onFormSubmit,!0),this._form=null)}disconnectedCallback(){this._teardown()}},m=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),h=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`);(0,t.defineElement)(`wui-taginput`,p),e.WuiTagInput=p})(this.WeborityUiElements=this.WeborityUiElements||{},WeborityUiElementsInternal.modules.defineElement,WeborityUiElementsInternal.modules.elementBase,WeborityUiElementsInternal.modules.fieldState,WeborityUiElementsInternal.modules.formMirror,WeborityUiElementsInternal.modules.iconGlyphs);