@adia-ai/web-components 0.8.12 → 0.8.14

package/dist/web-components.min.js

@@ -248,11 +248,11 @@ Correct shape for <chart-ui x="label" y="value">:
         <span slot="text">${this.text}</span>
         ${this.badge?`<span slot="badge">${this.badge}</span>`:""}
         <icon-ui slot="caret" name="caret-right"></icon-ui>
-      `,this.prepend(this.#i)),this.#i?.addEventListener("keydown",this.#s)}render(){let t=this.querySelector('[slot="header"] [slot="text"]');t&&(t.textContent=this.text);let e=this.querySelector('[slot="header"] [slot="badge"]');e&&(e.textContent=this.badge),this.setAttribute("aria-expanded",String(this.open))}showPopover(){if(!this.#t){this.#t=document.createElement("div"),this.#t.setAttribute("slot","popover"),this.#t.setAttribute("popover","auto");let t=document.createElement("div");t.setAttribute("slot","popover-label"),t.textContent=this.text,this.#t.appendChild(t);for(let e of this.querySelectorAll(":scope > nav-item-ui")){let i=document.createElement("div");i.setAttribute("role","option"),i.dataset.sourceValue=e.getAttribute("value")||"",i.textContent=e.text,i.addEventListener("click",()=>{let n=this.closest("nav-ui");n&&n.select(e),this.#t.hidePopover()}),this.#t.appendChild(i)}this.appendChild(this.#t),this.#t.addEventListener("toggle",e=>{e.newState==="closed"&&(this.#e?.(),this.#e=null)})}for(let t of this.#t.querySelectorAll('[role="option"]')){let e=t.dataset.sourceValue;(e?this.querySelector(`:scope > nav-item-ui[value="${e}"]`):null)?.hasAttribute("selected")?(t.setAttribute("aria-current","page"),t.setAttribute("aria-selected","true")):(t.removeAttribute("aria-current"),t.removeAttribute("aria-selected"))}this.#t.showPopover(),this.#e?.(),this.#e=lt(this,this.#t,{placement:"right",gap:4})}disconnected(){this.#i?.removeEventListener("keydown",this.#s),this.#e?.(),this.#e=null,this.#t?.hidePopover?.()}};x("nav-group-ui",Eo);P();var Po=class extends w{static properties={text:{type:String,default:"",reflect:!0},icon:{type:String,default:"",reflect:!0},value:{type:String,default:"",reflect:!0},badge:{type:String,default:"",reflect:!0},selected:{type:Boolean,default:!1,reflect:!0},disabled:{type:Boolean,default:!1,reflect:!0},variant:{type:String,default:"",reflect:!0}};static template=()=>null;#t=t=>{if(this.disabled){t.preventDefault();return}this.closest("nav-ui")?.select?.(this),this.dispatchEvent(new CustomEvent("nav-select",{bubbles:!0,detail:{item:this,text:this.text,value:this.value}}))};#e=t=>{this.disabled||(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.#t(t))};connected(){this.setAttribute("role","link"),this.setAttribute("tabindex",this.disabled?"-1":"0"),this.querySelector('[slot="text"]')||(this.innerHTML=`
+      `,this.prepend(this.#i)),this.#i?.addEventListener("keydown",this.#s)}render(){let t=this.querySelector('[slot="header"] [slot="text"]');t&&(t.textContent=this.text);let e=this.querySelector('[slot="header"] [slot="badge"]');e&&(e.textContent=this.badge),this.setAttribute("aria-expanded",String(this.open));let i=this.querySelector('[slot="header"] [slot="icon"] icon-ui');i&&i.setAttribute("weight",this.open?"fill":"regular")}showPopover(){if(!this.#t){this.#t=document.createElement("div"),this.#t.setAttribute("slot","popover"),this.#t.setAttribute("popover","auto");let t=document.createElement("div");t.setAttribute("slot","popover-label"),t.textContent=this.text,this.#t.appendChild(t);for(let e of this.querySelectorAll(":scope > nav-item-ui")){let i=document.createElement("div");i.setAttribute("role","option"),i.dataset.sourceValue=e.getAttribute("value")||"",i.textContent=e.text,i.addEventListener("click",()=>{let n=this.closest("nav-ui");n&&n.select(e),this.#t.hidePopover()}),this.#t.appendChild(i)}this.appendChild(this.#t),this.#t.addEventListener("toggle",e=>{e.newState==="closed"&&(this.#e?.(),this.#e=null)})}for(let t of this.#t.querySelectorAll('[role="option"]')){let e=t.dataset.sourceValue;(e?this.querySelector(`:scope > nav-item-ui[value="${e}"]`):null)?.hasAttribute("selected")?(t.setAttribute("aria-current","page"),t.setAttribute("aria-selected","true")):(t.removeAttribute("aria-current"),t.removeAttribute("aria-selected"))}this.#t.showPopover(),this.#e?.(),this.#e=lt(this,this.#t,{placement:"right",gap:4})}disconnected(){this.#i?.removeEventListener("keydown",this.#s),this.#e?.(),this.#e=null,this.#t?.hidePopover?.()}};x("nav-group-ui",Eo);P();var Po=class extends w{static properties={text:{type:String,default:"",reflect:!0},icon:{type:String,default:"",reflect:!0},value:{type:String,default:"",reflect:!0},badge:{type:String,default:"",reflect:!0},selected:{type:Boolean,default:!1,reflect:!0},disabled:{type:Boolean,default:!1,reflect:!0},variant:{type:String,default:"",reflect:!0}};static template=()=>null;#t=t=>{if(this.disabled){t.preventDefault();return}this.closest("nav-ui")?.select?.(this),this.dispatchEvent(new CustomEvent("nav-select",{bubbles:!0,detail:{item:this,text:this.text,value:this.value}}))};#e=t=>{this.disabled||(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.#t(t))};connected(){this.setAttribute("role","link"),this.setAttribute("tabindex",this.disabled?"-1":"0"),this.querySelector('[slot="text"]')||(this.innerHTML=`
         <span slot="icon">${this.icon?`<icon-ui name="${this.icon}"></icon-ui>`:""}</span>
         <span slot="text">${this.text}</span>
         ${this.badge?`<span slot="badge">${this.badge}</span>`:""}
-      `),this.addEventListener("click",this.#t),this.addEventListener("keydown",this.#e)}render(){let t=this.querySelector('[slot="text"]');t&&(t.textContent=this.text),this.setAttribute("tabindex",this.disabled?"-1":"0"),this.selected?this.setAttribute("aria-current","page"):this.removeAttribute("aria-current")}disconnected(){this.removeEventListener("click",this.#t),this.removeEventListener("keydown",this.#e)}};x("nav-item-ui",Po);var Qo=class extends Z{static properties={...Z.properties,length:{type:Number,default:6,reflect:!0}};static template=()=>null;#t=[];#e=t=>{let e=this.#t.indexOf(t.currentTarget);e<0||this.#o(t,e)};#i=t=>{let e=this.#t.indexOf(t.currentTarget);e<0||this.#l(t,e)};#s=t=>{this.#c(t)};connected(){super.connected(),this.setAttribute("role","group"),this.setAttribute("aria-label","One-time password"),this.#n(),this.#r()}#n(){let t=this.length||6;this.innerHTML="",this.#t=[];for(let e=0;e<t;e++){let i=document.createElement("input");i.type="text",i.maxLength=1,i.inputMode="numeric",i.autocomplete="one-time-code",i.setAttribute("slot","digit"),i.setAttribute("aria-label",`Digit ${e+1}`),this.appendChild(i),this.#t.push(i)}}#r(){for(let t of this.#t)t.addEventListener("input",this.#e),t.addEventListener("keydown",this.#i),t.addEventListener("paste",this.#s)}#a(){for(let t of this.#t)t.removeEventListener("input",this.#e),t.removeEventListener("keydown",this.#i),t.removeEventListener("paste",this.#s)}render(){if(!this.#t.length)return;let t=this.disabled;for(let e of this.#t)e.disabled=t}#o(t,e){let i=this.#t[e];i.value=i.value.replace(/\D/g,"").slice(0,1),this.#h(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{value:this.value}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}})),i.value&&e<this.#t.length-1&&this.#t[e+1].focus(),this.#u()}#l(t,e){t.key==="Backspace"&&!this.#t[e].value&&e>0&&(this.#t[e-1].focus(),this.#t[e-1].value="",this.#h(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{value:this.value}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}})))}#c(t){t.preventDefault();let e=(t.clipboardData?.getData("text/plain")||"").replace(/\D/g,"");for(let n=0;n<this.#t.length;n++)this.#t[n].value=e[n]||"";this.#h(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{value:this.value}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}}));let i=this.#t.findIndex(n=>!n.value);i>=0?this.#t[i].focus():this.#t[this.#t.length-1].focus(),this.#u()}#h(){let t=this.#t.map(e=>e.value).join("");this.value=t,this.syncValue(t)}#u(){let t=this.#t.map(e=>e.value).join("");t.length===this.#t.length&&this.dispatchEvent(new CustomEvent("complete",{bubbles:!0,detail:{value:t}}))}focus(){let t=this.#t.findIndex(e=>!e.value);this.#t[t>=0?t:0]?.focus()}clear(){for(let t of this.#t)t.value="";this.value="",this.syncValue(""),this.#t[0]?.focus()}disconnected(){super.disconnected(),this.#a(),this.#t=[]}};x("otp-input-ui",Qo);P();var To=class extends w{static properties={src:{type:String,default:"",reflect:!0},alt:{type:String,default:"",reflect:!0},width:{type:String,default:"",reflect:!0},height:{type:String,default:"",reflect:!0},size:{type:String,default:"",reflect:!0},fit:{type:String,default:"cover",reflect:!0},radius:{type:String,default:"",reflect:!0},raw:{type:Boolean,default:!1,reflect:!0},fallback:{type:String,default:"",reflect:!0}};static template=()=>null;#t=null;#e=null;connected(){this.#e=this.querySelector(':scope > [slot="skeleton"]'),this.#e||(this.#e=document.createElement("skeleton-ui"),this.#e.setAttribute("slot","skeleton"),this.#e.setAttribute("width","100%"),this.#e.setAttribute("height","100%"),this.appendChild(this.#e)),this.#t=this.querySelector(':scope > [slot="image"]'),this.#t||(this.#t=document.createElement("img"),this.#t.setAttribute("slot","image"),this.#t.loading="lazy",this.appendChild(this.#t)),this.#t.addEventListener("load",this.#s),this.#t.addEventListener("error",this.#n),this.#i()}render(){this.#t&&(this.#t.getAttribute("src")!==this.src&&(this.removeAttribute("data-loaded"),this.removeAttribute("data-error"),this.#t.src=this.src||""),this.#t.alt=this.alt||"",this.#i())}#i(){this.width&&(this.style.width=this.width),this.height&&(this.style.height=this.height)}#s=()=>{this.setAttribute("data-loaded",""),this.removeAttribute("data-error")};#n=()=>{this.fallback&&this.#t.src!==this.fallback?this.#t.src=this.fallback:this.setAttribute("data-error","")};disconnected(){this.#t&&(this.#t.removeEventListener("load",this.#s),this.#t.removeEventListener("error",this.#n)),this.#t=null,this.#e=null}};x("image-ui",To);var Lo=class extends Z{static properties={...Z.properties,placeholder:{type:String,default:"Search...",reflect:!0},debounce:{type:Number,default:300,reflect:!0}};static template=()=>null;#t=null;#e=null;#i=null;connected(){if(super.connected(),this.setAttribute("role","search"),!this.querySelector("input-ui")){let t=this.getAttribute("size");this.innerHTML=`<input-ui
+      `),this.addEventListener("click",this.#t),this.addEventListener("keydown",this.#e)}render(){let t=this.querySelector('[slot="text"]');t&&(t.textContent=this.text),this.setAttribute("tabindex",this.disabled?"-1":"0"),this.selected?this.setAttribute("aria-current","page"):this.removeAttribute("aria-current");let e=this.querySelector('[slot="icon"] icon-ui');e&&e.setAttribute("weight",this.selected?"fill":"regular")}disconnected(){this.removeEventListener("click",this.#t),this.removeEventListener("keydown",this.#e)}};x("nav-item-ui",Po);var Qo=class extends Z{static properties={...Z.properties,length:{type:Number,default:6,reflect:!0}};static template=()=>null;#t=[];#e=t=>{let e=this.#t.indexOf(t.currentTarget);e<0||this.#o(t,e)};#i=t=>{let e=this.#t.indexOf(t.currentTarget);e<0||this.#l(t,e)};#s=t=>{this.#c(t)};connected(){super.connected(),this.setAttribute("role","group"),this.setAttribute("aria-label","One-time password"),this.#n(),this.#r()}#n(){let t=this.length||6;this.innerHTML="",this.#t=[];for(let e=0;e<t;e++){let i=document.createElement("input");i.type="text",i.maxLength=1,i.inputMode="numeric",i.autocomplete="one-time-code",i.setAttribute("slot","digit"),i.setAttribute("aria-label",`Digit ${e+1}`),this.appendChild(i),this.#t.push(i)}}#r(){for(let t of this.#t)t.addEventListener("input",this.#e),t.addEventListener("keydown",this.#i),t.addEventListener("paste",this.#s)}#a(){for(let t of this.#t)t.removeEventListener("input",this.#e),t.removeEventListener("keydown",this.#i),t.removeEventListener("paste",this.#s)}render(){if(!this.#t.length)return;let t=this.disabled;for(let e of this.#t)e.disabled=t}#o(t,e){let i=this.#t[e];i.value=i.value.replace(/\D/g,"").slice(0,1),this.#h(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{value:this.value}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}})),i.value&&e<this.#t.length-1&&this.#t[e+1].focus(),this.#u()}#l(t,e){t.key==="Backspace"&&!this.#t[e].value&&e>0&&(this.#t[e-1].focus(),this.#t[e-1].value="",this.#h(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{value:this.value}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}})))}#c(t){t.preventDefault();let e=(t.clipboardData?.getData("text/plain")||"").replace(/\D/g,"");for(let n=0;n<this.#t.length;n++)this.#t[n].value=e[n]||"";this.#h(),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{value:this.value}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}}));let i=this.#t.findIndex(n=>!n.value);i>=0?this.#t[i].focus():this.#t[this.#t.length-1].focus(),this.#u()}#h(){let t=this.#t.map(e=>e.value).join("");this.value=t,this.syncValue(t)}#u(){let t=this.#t.map(e=>e.value).join("");t.length===this.#t.length&&this.dispatchEvent(new CustomEvent("complete",{bubbles:!0,detail:{value:t}}))}focus(){let t=this.#t.findIndex(e=>!e.value);this.#t[t>=0?t:0]?.focus()}clear(){for(let t of this.#t)t.value="";this.value="",this.syncValue(""),this.#t[0]?.focus()}disconnected(){super.disconnected(),this.#a(),this.#t=[]}};x("otp-input-ui",Qo);P();var To=class extends w{static properties={src:{type:String,default:"",reflect:!0},alt:{type:String,default:"",reflect:!0},width:{type:String,default:"",reflect:!0},height:{type:String,default:"",reflect:!0},size:{type:String,default:"",reflect:!0},fit:{type:String,default:"cover",reflect:!0},radius:{type:String,default:"",reflect:!0},raw:{type:Boolean,default:!1,reflect:!0},fallback:{type:String,default:"",reflect:!0}};static template=()=>null;#t=null;#e=null;connected(){this.#e=this.querySelector(':scope > [slot="skeleton"]'),this.#e||(this.#e=document.createElement("skeleton-ui"),this.#e.setAttribute("slot","skeleton"),this.#e.setAttribute("width","100%"),this.#e.setAttribute("height","100%"),this.appendChild(this.#e)),this.#t=this.querySelector(':scope > [slot="image"]'),this.#t||(this.#t=document.createElement("img"),this.#t.setAttribute("slot","image"),this.#t.loading="lazy",this.appendChild(this.#t)),this.#t.addEventListener("load",this.#s),this.#t.addEventListener("error",this.#n),this.#i()}render(){this.#t&&(this.#t.getAttribute("src")!==this.src&&(this.removeAttribute("data-loaded"),this.removeAttribute("data-error"),this.#t.src=this.src||""),this.#t.alt=this.alt||"",this.#i())}#i(){this.width&&(this.style.width=this.width),this.height&&(this.style.height=this.height)}#s=()=>{this.setAttribute("data-loaded",""),this.removeAttribute("data-error")};#n=()=>{this.fallback&&this.#t.src!==this.fallback?this.#t.src=this.fallback:this.setAttribute("data-error","")};disconnected(){this.#t&&(this.#t.removeEventListener("load",this.#s),this.#t.removeEventListener("error",this.#n)),this.#t=null,this.#e=null}};x("image-ui",To);var Lo=class extends Z{static properties={...Z.properties,placeholder:{type:String,default:"Search...",reflect:!0},debounce:{type:Number,default:300,reflect:!0}};static template=()=>null;#t=null;#e=null;#i=null;connected(){if(super.connected(),this.setAttribute("role","search"),!this.querySelector("input-ui")){let t=this.getAttribute("size");this.innerHTML=`<input-ui
         type="search"
         prefix="magnifying-glass"
         suffix="x-circle"