@webority/ui-elements 0.13.4 → 0.13.5

package/dist/ui-elements.global.js

@@ -452,4 +452,4 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
           ${_(`clock`)}
         </button>
         <div class="timepicker-pop" role="listbox" tabindex="-1" hidden></div>
-      </div>`,this._rendered=!0,h(this,this._value),this._wire()}_syncFormValue(){h(this,this._value)}_syncTrigger(){let e=this.querySelector(`.timepicker-trigger`),t=this.querySelector(`[data-trigger-label]`);if(!t)return;let n=Wu(this._value),r=this.getAttribute(`format`)||`24`;t.textContent=n?Gu(n,r):this.getAttribute(`placeholder`)||`Select time`,t.classList.toggle(`timepicker-placeholder`,!n),e?.classList.toggle(`has-value`,!!n)}_buildTimes(){let e=Math.max(1,parseInt(this.getAttribute(`step`)||`30`,10)),t=this.getAttribute(`min`)||`00:00`,n=this.getAttribute(`max`)||`23:59`,r=Wu(t)||{h:0,m:0},i=Wu(n)||{h:23,m:59},a=[],o=r.h,s=r.m;for(s=Math.ceil(s/e)*e,s>=60&&(o+=1,s-=60);o<i.h||o===i.h&&s<=i.m;)a.push({h:o,m:s}),s+=e,s>=60&&(o+=1,s-=60);return a}_renderOptions(){let e=this.querySelector(`.timepicker-pop`);if(!e)return;let t=this.getAttribute(`format`)||`24`,n=this._buildTimes(),r=Wu(this._value),i=this._focus,a=``;for(let e=0;e<n.length;e++){let o=n[e],s=Uu(o.h,o.m),c=r&&r.h===o.h&&r.m===o.m;a+=`<button type="button" class="timepicker-option${c?` is-selected`:``}" data-hm="${s}" role="option" tabindex="${i===e?`0`:`-1`}"${c?` aria-selected="true"`:``}>${Gu(o,t)}</button>`}e.innerHTML=a,this._focusActive()}_focusActive(){let e=this.querySelector(`.timepicker-pop`),t=e?.querySelector(`[tabindex="0"]`)||e?.querySelector(`.is-selected`);t&&!e.hidden&&t.focus()}_position(e,t){d(e,t)}_onKey(e){let t=[...this.querySelector(`.timepicker-pop`).querySelectorAll(`.timepicker-option`)];switch(e.key){case`ArrowUp`:{e.preventDefault();let t=Math.max((this._focus??0)-1,0);this._focus=t,this._renderOptions();break}case`ArrowDown`:{e.preventDefault();let n=Math.min((this._focus??-1)+1,t.length-1);this._focus=n,this._renderOptions();break}case`Home`:if(e.preventDefault(),!t.length)return;this._focus=0,this._renderOptions();break;case`End`:if(e.preventDefault(),!t.length)return;this._focus=t.length-1,this._renderOptions();break;case`PageUp`:{if(e.preventDefault(),!t.length)return;let n=this._focus==null||this._focus<0?0:this._focus;this._focus=Math.max(n-8,0),this._renderOptions();break}case`PageDown`:{if(e.preventDefault(),!t.length)return;let n=this._focus==null||this._focus<0?0:this._focus;this._focus=Math.min(n+8,t.length-1),this._renderOptions();break}case`Enter`:case` `:e.preventDefault(),t[this._focus]&&(this.value=t[this._focus].dataset.hm,this.dispatchEvent(new Event(`change`,{bubbles:!0})),this._close());break;case`Escape`:this._close();break;default:if(e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey){e.preventDefault(),clearTimeout(this._typeaheadTimer),this._typeahead+=e.key.toLowerCase(),this._typeaheadTimer=setTimeout(()=>{this._typeahead=``,this._typeaheadTimer=null},500);let n=t.findIndex(e=>e.textContent.trim().toLowerCase().startsWith(this._typeahead));n>=0&&(this._focus=n,this._renderOptions())}}}_wire(){this._teardown();let e=this.querySelector(`.timepicker-trigger`),t=this.querySelector(`.timepicker-pop`),n=this.querySelector(`.timepicker`);if(!e||!t)return;let r=()=>!t.hidden;this._open=()=>{this._focus=null,this._renderOptions(),t.hidden=!1,n?.classList.add(`open`),e.setAttribute(`aria-expanded`,`true`),this._position(e,t);let r=t.querySelector(`.is-selected`);r?this._focus=[...t.querySelectorAll(`.timepicker-option`)].indexOf(r):this._focus=0,this._renderOptions(),t.querySelector(`[tabindex="0"]`)?.focus()},this._close=()=>{t.hidden=!0,n?.classList.remove(`open`),e.setAttribute(`aria-expanded`,`false`),clearTimeout(this._typeaheadTimer),this._typeaheadTimer=null,this._typeahead=``,e.focus()},e.addEventListener(`click`,()=>r()?this._close():this._open()),e.addEventListener(`keydown`,e=>{(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`)&&(e.preventDefault(),r()||this._open())}),t.addEventListener(`click`,e=>{this._popClick=!0;let t=e.target.closest(`.timepicker-option`);t&&!t.disabled&&(this.value=t.dataset.hm,this.dispatchEvent(new Event(`change`,{bubbles:!0})),this._close())}),this._onKeyBound=e=>{r()&&this._onKey(e)},t.addEventListener(`keydown`,this._onKeyBound),this._bindGlobal=()=>{this._teardown(),this._onDocClick=e=>{let t=this._popClick;this._popClick=!1,r()&&!t&&!this.contains(e.target)&&this._close()},document.addEventListener(`click`,this._onDocClick),this._onDocKey=e=>{r()&&e.key===`Escape`&&this._close()},document.addEventListener(`keydown`,this._onDocKey),f(this,()=>{r()&&this._position(e,t)})},this._bindGlobal(),this._syncFormValue()}_teardown(){this._onDocClick&&=(document.removeEventListener(`click`,this._onDocClick),null),this._onDocKey&&=(document.removeEventListener(`keydown`,this._onDocKey),null),p(this),clearTimeout(this._typeaheadTimer),this._typeaheadTimer=null,this._typeahead=``}disconnectedCallback(){this._teardown()}},qu=`wui-wizard-step`,Ju=class extends i{static get observedAttributes(){return[`active`,`variant`,`orientation`,`non-linear`,`hide-stepper`,`disabled`,`skippable`,`label`,`back-label`,`next-label`,`skip-label`,`finish-label`]}constructor(){super(),this._active=0,this._skipped=new Set,this._invalid=new Set,this._finished=!1,this._rendered=!1,this._reflecting=!1,this._beforeNext=null,this._header=null,this._footer=null,this._known=[],this._observer=null}get active(){return this._active}set active(e){let t=Number.parseInt(e,10);Number.isFinite(t)&&this._go(t,`set`)}get beforeNext(){return this._beforeNext}set beforeNext(e){this._beforeNext=typeof e==`function`?e:null}get _steps(){return[...this.querySelectorAll(`:scope > ${qu}`)]}refresh(){this._rendered&&this._renderChrome()}connectedCallback(){if(this._rendered)this._wire(),this._onStepsMutated();else{let e=Number.parseInt(this.getAttribute(`active`),10);this._active=Number.isFinite(e)&&e>=0?e:0,this.render()}}disconnectedCallback(){this._teardown()}attributeChangedCallback(e,t,n){if(!(!this._rendered||this._reflecting)){if(e===`active`){let e=Number.parseInt(n,10);Number.isFinite(e)&&this._go(e,`set`);return}this._renderChrome()}}render(){let e=this._steps;this._header||(this._header=document.createElement(`nav`),this._header.className=`stepper wizard-stepper`,this._footer=document.createElement(`div`),this._footer.className=`form-actions wizard-footer form-actions-between`,e.length?(this.insertBefore(this._header,e[0]),e[e.length-1].after(this._footer)):(this.prepend(this._header),this.append(this._footer))),this._known=e,this._renderChrome(),this._rendered=!0,this._wire()}_renderChrome(){let e=this._reconcileSteps();this._placeChrome(e),this._clampActive(e),this._syncPanels(e),this._header.innerHTML=this._headerHtml(e),this._footer.innerHTML=this._footerHtml(e),this._header.hidden=this.hasAttribute(`hide-stepper`)}_clampActive(e){let t=Math.max(0,e.length-1);this._active>t&&(this._active=t),this._active<0&&(this._active=0)}_reconcileSteps(){let e=this._steps,t=this._known;if(this._known=e,Yu(e,t))return e;let n=n=>new Set([...n].map(n=>e.indexOf(t[n])).filter(e=>e>=0));this._skipped=n(this._skipped),this._invalid=n(this._invalid);let r=t[this._active];if(!r)return e;let i=e.indexOf(r);if(i<0){let n=t=>e.includes(t),r=t.slice(this._active+1).find(n)??t.slice(0,this._active).reverse().find(n);i=r?e.indexOf(r):this._active}return i=Math.min(i,Math.max(0,e.length-1)),i!==this._active&&(this._active=i,this._reflectActive(i)),e}_placeChrome(e){if(!e.length)return;let t=e[e.length-1];this._header.nextElementSibling!==e[0]&&this.insertBefore(this._header,e[0]),this._footer.previousElementSibling!==t&&t.after(this._footer)}_onStepsMutated(){if(!this._rendered)return;let e=this._steps;(!e.length||this._header.nextElementSibling===e[0]&&this._footer.previousElementSibling===e[e.length-1])&&Yu(e,this._known)||(this._renderChrome(),this._observer?.takeRecords())}_syncPanels(e){e.forEach((e,t)=>{let n=t===this._active;e.classList.add(`wizard-panel`),e.hidden=!n,e.setAttribute(`role`,`tabpanel`),e.setAttribute(`aria-hidden`,n?`false`:`true`)})}_stepStatus(e,t){return e.getAttribute(`status`)||(this._invalid.has(t)?`error`:this._finished?`done`:t===this._active?`active`:t<this._active?this._skipped.has(t)?`skipped`:`done`:`pending`)}_headerHtml(e){let t=this.getAttribute(`variant`)===`journey`,n=this.getAttribute(`variant`)===`icons`,r=this.getAttribute(`orientation`)===`vertical`;this._header.className=[`stepper`,`wizard-stepper`,t&&`stepper-journey`,n&&`stepper-icons`,r&&`stepper-vertical`].filter(Boolean).join(` `),this._header.setAttribute(`aria-label`,this.getAttribute(`label`)||`Progress`);let i=this.hasAttribute(`non-linear`);return e.map((e,r)=>{let a=this._stepStatus(e,r),o=e.getAttribute(`label`)||``,s=e.getAttribute(`description`)||``,c=e.getAttribute(`icon`)||``,l=r+1,u;u=a===`done`?_(`check`):a===`error`?_(`alert-triangle`):a===`skipped`?_(`minus`):c?_(c):String(l);let d=a===`pending`?`step`:`step ${a}`,f=a===`active`?` aria-current="step"`:``,p=i||r<this._active,m=s?`<span class="step-desc">${Q(s)}</span>`:``,h;return h=t?`<span class="step-circle">${u}</span><span class="step-text"><span class="step-index">Step ${l}</span><span class="step-label">${Q(o)}</span>${m}</span>`:n?`<span class="step-circle">${u}</span><span class="step-index">Step ${l}</span><span class="step-label">${Q(o)}</span>${m}`:`<span class="step-circle">${u}</span><span class="step-label">${Q(o)}</span>${m}`,p?`<button type="button" class="${d}" data-step="${r}"${f}>${h}</button>`:`<div class="${d}"${f}>${h}</div>`}).join(``)}_footerHtml(e){let t=this._active,n=e.length-1,r=this.hasAttribute(`disabled`)?` disabled`:``,i=e[t]?.hasAttribute(`optional`)||this.hasAttribute(`skippable`),a=this.getAttribute(`back-label`)||`Back`,o=this.getAttribute(`next-label`)||`Next`,s=this.getAttribute(`skip-label`)||`Skip`,c=this.getAttribute(`finish-label`)||`Finish`;return`${t>0?`<button type="button" class="btn btn-secondary" data-nav="back"${r}>${_(`arrow-left`,{className:`me-2`})}${Q(a)}</button>`:`<span></span>`}<span class="wizard-footer-actions">${i&&t<n?`<button type="button" class="btn btn-subtle" data-nav="skip"${r}>${Q(s)}</button>`:``}${t<n?`<button type="button" class="btn btn-primary" data-nav="next"${r}>${Q(o)}${_(`arrow-right`,{className:`ms-2`})}</button>`:`<button type="button" class="btn btn-primary" data-nav="finish"${r}>${Q(c)}</button>`}</span>`}_wire(){this._teardown(),this._onHeaderClick=e=>{let t=e.target.closest(`[data-step]`);t&&this.contains(t)&&this._stepTo(Number.parseInt(t.dataset.step,10))},this._onFooterClick=e=>{let t=e.target.closest(`[data-nav]`);if(!t||!this.contains(t)||this.hasAttribute(`disabled`))return;let n=t.dataset.nav;n===`back`?this._back():n===`skip`?this._skip():(n===`next`||n===`finish`)&&this._next()},this._header.addEventListener(`click`,this._onHeaderClick),this._footer.addEventListener(`click`,this._onFooterClick),this._observer=new MutationObserver(()=>this._onStepsMutated()),this._observer.observe(this,{childList:!0})}_teardown(){this._header&&this._onHeaderClick&&this._header.removeEventListener(`click`,this._onHeaderClick),this._footer&&this._onFooterClick&&this._footer.removeEventListener(`click`,this._onFooterClick),this._observer?.disconnect(),this._observer=null}_stepTo(e){this.hasAttribute(`disabled`)||!this.hasAttribute(`non-linear`)&&e>=this._active||this._go(e,`step`)}_back(){this._active>0&&this._go(this._active-1,`back`)}async _next(){this._reconcileSteps();let e=this._active,t=this._steps,n=e>=t.length-1,r=t[e];if(!this.dispatchEvent(new CustomEvent(`wui-wizard:beforechange`,{detail:n?{index:e,next:e,reason:`finish`}:{index:e,next:e+1,reason:`next`},cancelable:!0})))return this._flagInvalid(e);if(this._beforeNext){let i;try{i=await this._beforeNext(e)}catch{i=!1}if(this._reconcileSteps(),t=this._steps,e=t.indexOf(r),e<0)return;if(n=e>=t.length-1,i===!1)return this._flagInvalid(e)}if(this._invalid.delete(e),this._skipped.delete(e),n)return this._finish();this._go(e+1,`next`)}_skip(){let e=this._active,t=this._steps;if(!(!t[e]?.hasAttribute(`optional`)&&!this.hasAttribute(`skippable`))){if(this._invalid.delete(e),this._skipped.add(e),this.dispatchEvent(new CustomEvent(`wui-wizard:skip`,{detail:{index:e}})),e>=t.length-1)return this._finish();this._go(e+1,`skip`)}}_flagInvalid(e){this._invalid.add(e),this._renderChrome(),this.dispatchEvent(new CustomEvent(`wui-wizard:invalid`,{detail:{index:e}}))}_finish(){this._invalid.delete(this._active),this._finished=!0,this._renderChrome(),this.dispatchEvent(new CustomEvent(`wui-wizard:finish`,{detail:{index:this._active}}))}_go(e,t){let n=this._reconcileSteps(),r=Math.max(0,n.length-1),i=Math.min(Math.max(e,0),r),a=this._active;this._finished=!1,this._invalid.delete(a),this._active=i,this._reflectActive(i),this._renderChrome(),t!==`silent`&&i!==a&&this.dispatchEvent(new CustomEvent(`wui-wizard:change`,{detail:{index:i,previous:a,reason:t}}))}_reflectActive(e){this._reflecting=!0,this.setAttribute(`active`,String(e)),this._reflecting=!1}},Yu=(e,t)=>e.length===t.length&&e.every((e,n)=>e===t[n]),Q=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),Xu=class extends i{static get observedAttributes(){return[`label`,`description`,`optional`,`icon`,`status`]}attributeChangedCallback(){let e=this.closest(`wui-wizard`);e&&typeof e.refresh==`function`&&e.refresh()}},Zu=2e3;async function Qu(e){try{if(navigator.clipboard?.writeText)return await navigator.clipboard.writeText(e),!0}catch{}try{let t=document.createElement(`textarea`);t.value=e,t.style.position=`fixed`,t.style.top=`0`,t.style.left=`0`,t.style.opacity=`0`,document.body.appendChild(t),t.select();let n=document.execCommand(`copy`);return document.body.removeChild(t),!!n}catch{return!1}}var $u=`image/png,image/jpeg,image/webp`,ed=5,td={"image/png":[`.png`],"image/jpeg":[`.jpg`,`.jpeg`],"image/webp":[`.webp`],"image/gif":[`.gif`],"image/svg+xml":[`.svg`],"application/pdf":[`.pdf`]},nd={"image/png":`PNG`,"image/jpeg":`JPG`,"image/webp":`WEBP`,"image/gif":`GIF`,"image/svg+xml":`SVG`,"application/pdf":`PDF`,".png":`PNG`,".jpg":`JPG`,".jpeg":`JPG`,".webp":`WEBP`,".gif":`GIF`,".svg":`SVG`,".pdf":`PDF`},rd=e=>String(e||``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean),id=[`.png`,`.jpg`,`.jpeg`,`.webp`,`.gif`,`.svg`,`.bmp`,`.avif`,`.heic`];function ad(e){if(!e)return!1;let t=typeof e==`object`&&e.type?String(e.type).toLowerCase():``;if(t)return t.startsWith(`image/`);let n=typeof e==`string`?e:e.name||e.url||``,r=String(n).toLowerCase();return id.some(e=>r.endsWith(e))}function od(e){let t=rd(e);return t.length?t.every(e=>e.startsWith(`.`)?id.includes(e):e===`image/*`||e.startsWith(`image/`)):!1}function sd(e){let t=[];for(let n of rd(e)){let e=nd[n]||(n.startsWith(`.`)?n.slice(1).toUpperCase():n.toUpperCase());t.includes(e)||t.push(e)}return t.length<=1?t[0]||`supported`:`${t.slice(0,-1).join(`, `)} or ${t[t.length-1]}`}function cd(e,t){let n=rd(t);if(!n.length)return!0;let r=(e.type||``).toLowerCase(),i=(e.name||``).toLowerCase();return n.some(e=>e.startsWith(`.`)?i.endsWith(e):e.endsWith(`/*`)?r.startsWith(e.slice(0,-1)):r&&r===e?!0:!r&&(td[e]||[]).some(e=>i.endsWith(e)))}function ld(e,t={}){if(!e)return null;let n=t.accept===void 0?$u:t.accept,r=t.maxSizeMb||5;return cd(e,n)?e.size>r*1024*1024?`Keep the file under ${r} MB.`:null:`Choose a ${sd(n)} file.`}var ud={minLength:8,uppercase:!0,lowercase:!0,digit:!0,special:!0,uniqueChars:0},dd=`Password Requirements`;function fd(e){return e===!0||e==null?{...ud}:{...ud,...e}}function pd(e){let t=fd(e),n=[];if(t.minLength>0&&n.push({key:`length`,label:`At least ${t.minLength} characters long`,test:e=>e.length>=t.minLength}),t.uppercase&&n.push({key:`uppercase`,label:`At least one uppercase letter`,test:e=>/[A-Z]/.test(e)}),t.lowercase&&n.push({key:`lowercase`,label:`At least one lowercase letter`,test:e=>/[a-z]/.test(e)}),t.digit&&n.push({key:`digit`,label:`At least one digit`,test:e=>/[0-9]/.test(e)}),t.special&&n.push({key:`special`,label:`At least one special character`,test:e=>/[^A-Za-z0-9]/.test(e)}),t.uniqueChars>0){let e=t.uniqueChars;n.push({key:`unique`,label:`At least ${e} unique character${e>1?`s`:``}`,test:t=>new Set(t).size>=e})}return n}function md(e,t){let n=e==null?``:String(e);return pd(t).map(e=>({key:e.key,label:e.label,met:e.test(n)}))}function hd(e,t){return md(e,t).every(e=>e.met)}var $=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function gd(){$(`wui-select`,Iu),$(`wui-phone`,Fu),$(`wui-datepicker`,_e),$(`wui-date-range`,ve),$(`wui-dock`,ye),$(`wui-consent-banner`,ce),$(`wui-slider`,Lu),$(`wui-timepicker`,Ku),$(`wui-autocomplete`,te),$(`wui-multiselect`,De),$(`wui-taginput`,zu),$(`wui-otp`,ze),$(`wui-status-icon`,s),$(`wui-wizard-step`,Xu),$(`wui-wizard`,Ju)}return gd(),e.COPY_FEEDBACK_MS=Zu,e.DEFAULT_IMAGE_ACCEPT=$u,e.DEFAULT_MAX_SIZE_MB=ed,e.DEFAULT_PASSWORD_RULES=ud,e.DEFAULT_REQUIREMENTS_TITLE=dd,e.STATUS_TONES=o,e.WuiAutocomplete=te,e.WuiConsentBanner=ce,e.WuiDatePicker=_e,e.WuiDateRange=ve,e.WuiDock=ye,e.WuiMultiSelect=De,e.WuiOtp=ze,e.WuiPhone=Fu,e.WuiSelect=Iu,e.WuiSlider=Lu,e.WuiStatusIcon=s,e.WuiTagInput=zu,e.WuiTimePicker=Ku,e.WuiWizard=Ju,e.WuiWizardStep=Xu,e.acceptLabel=sd,e.buildPasswordRules=pd,e.copyTextToClipboard=Qu,e.defineWeborityElements=gd,e.evaluatePassword=md,e.glyphSvg=_,e.isImageFile=ad,e.isImageOnlyAccept=od,e.matchesAccept=cd,e.passwordSatisfies=hd,e.validateFile=ld,e})({});
+      </div>`,this._rendered=!0,h(this,this._value),this._wire()}_syncFormValue(){h(this,this._value)}_syncTrigger(){let e=this.querySelector(`.timepicker-trigger`),t=this.querySelector(`[data-trigger-label]`);if(!t)return;let n=Wu(this._value),r=this.getAttribute(`format`)||`24`;t.textContent=n?Gu(n,r):this.getAttribute(`placeholder`)||`Select time`,t.classList.toggle(`timepicker-placeholder`,!n),e?.classList.toggle(`has-value`,!!n)}_buildTimes(){let e=Math.max(1,parseInt(this.getAttribute(`step`)||`30`,10)),t=this.getAttribute(`min`)||`00:00`,n=this.getAttribute(`max`)||`23:59`,r=Wu(t)||{h:0,m:0},i=Wu(n)||{h:23,m:59},a=[],o=r.h,s=r.m;for(s=Math.ceil(s/e)*e,s>=60&&(o+=1,s-=60);o<i.h||o===i.h&&s<=i.m;)a.push({h:o,m:s}),s+=e,s>=60&&(o+=1,s-=60);return a}_renderOptions(){let e=this.querySelector(`.timepicker-pop`);if(!e)return;let t=this.getAttribute(`format`)||`24`,n=this._buildTimes(),r=Wu(this._value),i=this._focus,a=``;for(let e=0;e<n.length;e++){let o=n[e],s=Uu(o.h,o.m),c=r&&r.h===o.h&&r.m===o.m;a+=`<button type="button" class="timepicker-option${c?` is-selected`:``}" data-hm="${s}" role="option" tabindex="${i===e?`0`:`-1`}"${c?` aria-selected="true"`:``}>${Gu(o,t)}</button>`}e.innerHTML=a,this._focusActive()}_focusActive(){let e=this.querySelector(`.timepicker-pop`),t=e?.querySelector(`[tabindex="0"]`)||e?.querySelector(`.is-selected`);t&&!e.hidden&&t.focus()}_position(e,t){d(e,t)}_onKey(e){let t=[...this.querySelector(`.timepicker-pop`).querySelectorAll(`.timepicker-option`)];switch(e.key){case`ArrowUp`:{e.preventDefault();let t=Math.max((this._focus??0)-1,0);this._focus=t,this._renderOptions();break}case`ArrowDown`:{e.preventDefault();let n=Math.min((this._focus??-1)+1,t.length-1);this._focus=n,this._renderOptions();break}case`Home`:if(e.preventDefault(),!t.length)return;this._focus=0,this._renderOptions();break;case`End`:if(e.preventDefault(),!t.length)return;this._focus=t.length-1,this._renderOptions();break;case`PageUp`:{if(e.preventDefault(),!t.length)return;let n=this._focus==null||this._focus<0?0:this._focus;this._focus=Math.max(n-8,0),this._renderOptions();break}case`PageDown`:{if(e.preventDefault(),!t.length)return;let n=this._focus==null||this._focus<0?0:this._focus;this._focus=Math.min(n+8,t.length-1),this._renderOptions();break}case`Enter`:case` `:e.preventDefault(),t[this._focus]&&(this.value=t[this._focus].dataset.hm,this.dispatchEvent(new Event(`change`,{bubbles:!0})),this._close());break;case`Escape`:this._close();break;default:if(e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey){e.preventDefault(),clearTimeout(this._typeaheadTimer),this._typeahead+=e.key.toLowerCase(),this._typeaheadTimer=setTimeout(()=>{this._typeahead=``,this._typeaheadTimer=null},500);let n=t.findIndex(e=>e.textContent.trim().toLowerCase().startsWith(this._typeahead));n>=0&&(this._focus=n,this._renderOptions())}}}_wire(){this._teardown();let e=this.querySelector(`.timepicker-trigger`),t=this.querySelector(`.timepicker-pop`),n=this.querySelector(`.timepicker`);if(!e||!t)return;let r=()=>!t.hidden;this._open=()=>{this._focus=null,this._renderOptions(),t.hidden=!1,n?.classList.add(`open`),e.setAttribute(`aria-expanded`,`true`),this._position(e,t);let r=t.querySelector(`.is-selected`);r?this._focus=[...t.querySelectorAll(`.timepicker-option`)].indexOf(r):this._focus=0,this._renderOptions(),t.querySelector(`[tabindex="0"]`)?.focus()},this._close=()=>{t.hidden=!0,n?.classList.remove(`open`),e.setAttribute(`aria-expanded`,`false`),clearTimeout(this._typeaheadTimer),this._typeaheadTimer=null,this._typeahead=``,e.focus()},e.addEventListener(`click`,()=>r()?this._close():this._open()),e.addEventListener(`keydown`,e=>{(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`)&&(e.preventDefault(),r()||this._open())}),t.addEventListener(`click`,e=>{this._popClick=!0;let t=e.target.closest(`.timepicker-option`);t&&!t.disabled&&(this.value=t.dataset.hm,this.dispatchEvent(new Event(`change`,{bubbles:!0})),this._close())}),this._onKeyBound=e=>{r()&&this._onKey(e)},t.addEventListener(`keydown`,this._onKeyBound),this._bindGlobal=()=>{this._teardown(),this._onDocClick=e=>{let t=this._popClick;this._popClick=!1,r()&&!t&&!this.contains(e.target)&&this._close()},document.addEventListener(`click`,this._onDocClick),this._onDocKey=e=>{r()&&e.key===`Escape`&&this._close()},document.addEventListener(`keydown`,this._onDocKey),f(this,()=>{r()&&this._position(e,t)})},this._bindGlobal(),this._syncFormValue()}_teardown(){this._onDocClick&&=(document.removeEventListener(`click`,this._onDocClick),null),this._onDocKey&&=(document.removeEventListener(`keydown`,this._onDocKey),null),p(this),clearTimeout(this._typeaheadTimer),this._typeaheadTimer=null,this._typeahead=``}disconnectedCallback(){this._teardown()}},qu=`wui-wizard-step`,Ju=class extends i{static get observedAttributes(){return[`active`,`variant`,`orientation`,`non-linear`,`hide-stepper`,`disabled`,`skippable`,`label`,`back-label`,`next-label`,`skip-label`,`finish-label`]}constructor(){super(),this._active=0,this._skipped=new Set,this._invalid=new Set,this._finished=!1,this._rendered=!1,this._reflecting=!1,this._beforeNext=null,this._header=null,this._footer=null,this._known=[],this._observer=null}get active(){return this._active}set active(e){let t=Number.parseInt(e,10);Number.isFinite(t)&&this._go(t,`set`)}get beforeNext(){return this._beforeNext}set beforeNext(e){this._beforeNext=typeof e==`function`?e:null}get _steps(){return[...this.querySelectorAll(`:scope > ${qu}`)]}refresh(){this._rendered&&this._renderChrome()}connectedCallback(){if(this._rendered)this._wire(),this._onStepsMutated();else{let e=Number.parseInt(this.getAttribute(`active`),10);this._active=Number.isFinite(e)&&e>=0?e:0,this.render()}}disconnectedCallback(){this._teardown()}attributeChangedCallback(e,t,n){if(!(!this._rendered||this._reflecting)){if(e===`active`){let e=Number.parseInt(n,10);Number.isFinite(e)&&this._go(e,`set`);return}this._renderChrome()}}render(){let e=this._steps;this._header||(this._header=document.createElement(`nav`),this._header.className=`stepper wizard-stepper`,this._footer=document.createElement(`div`),this._footer.className=`form-actions wizard-footer form-actions-between`,e.length?(this.insertBefore(this._header,e[0]),e[e.length-1].after(this._footer)):(this.prepend(this._header),this.append(this._footer))),this._known=e,this._renderChrome(),this._rendered=!0,this._wire()}_renderChrome(){let e=this._reconcileSteps();this._placeChrome(e),this._clampActive(e),this._syncPanels(e),this._header.innerHTML=this._headerHtml(e),this._footer.innerHTML=this._footerHtml(e),this._header.hidden=this.hasAttribute(`hide-stepper`)}_clampActive(e){let t=Math.max(0,e.length-1);this._active>t&&(this._active=t),this._active<0&&(this._active=0)}_reconcileSteps(){let e=this._steps,t=this._known;if(this._known=e,Yu(e,t))return e;let n=n=>new Set([...n].map(n=>e.indexOf(t[n])).filter(e=>e>=0));this._skipped=n(this._skipped),this._invalid=n(this._invalid);let r=t[this._active];if(!r)return e;let i=e.indexOf(r);if(i<0){let n=t=>e.includes(t),r=t.slice(this._active+1).find(n)??t.slice(0,this._active).reverse().find(n);i=r?e.indexOf(r):this._active}return i=Math.min(i,Math.max(0,e.length-1)),i!==this._active&&(this._active=i,this._reflectActive(i)),e}_placeChrome(e){if(!e.length)return;let t=e[e.length-1];this._header.nextElementSibling!==e[0]&&this.insertBefore(this._header,e[0]),this._footer.previousElementSibling!==t&&t.after(this._footer)}_onStepsMutated(){if(!this._rendered)return;let e=this._steps;(!e.length||this._header.nextElementSibling===e[0]&&this._footer.previousElementSibling===e[e.length-1])&&Yu(e,this._known)||(this._renderChrome(),this._observer?.takeRecords())}_syncPanels(e){e.forEach((e,t)=>{let n=t===this._active;e.classList.add(`wizard-panel`),e.hidden=!n,e.setAttribute(`role`,`tabpanel`),e.setAttribute(`aria-hidden`,n?`false`:`true`)})}_stepStatus(e,t){return e.getAttribute(`status`)||(this._invalid.has(t)?`error`:this._finished?`done`:t===this._active?`active`:t<this._active?this._skipped.has(t)?`skipped`:`done`:`pending`)}_headerHtml(e){let t=this.getAttribute(`variant`)===`journey`,n=this.getAttribute(`variant`)===`icons`,r=this.getAttribute(`orientation`)===`vertical`;this._header.className=[`stepper`,`wizard-stepper`,t&&`stepper-journey`,n&&`stepper-icons`,r&&`stepper-vertical`].filter(Boolean).join(` `),this._header.setAttribute(`aria-label`,this.getAttribute(`label`)||`Progress`);let i=this.hasAttribute(`non-linear`);return e.map((e,r)=>{let a=this._stepStatus(e,r),o=e.getAttribute(`label`)||``,s=e.getAttribute(`description`)||``,c=e.getAttribute(`icon`)||``,l=r+1,u;u=a===`done`?_(`check`):a===`error`?_(`alert-triangle`):a===`skipped`?_(`minus`):c?_(c):String(l);let d=a===`pending`?`step`:`step ${a}`,f=a===`active`?` aria-current="step"`:``,p=i||r<this._active,m=s?`<span class="step-desc">${Q(s)}</span>`:``,h;return h=t?`<span class="step-circle">${u}</span><span class="step-text"><span class="step-index">Step ${l}</span><span class="step-label">${Q(o)}</span>${m}</span>`:n?`<span class="step-circle">${u}</span><span class="step-index">Step ${l}</span><span class="step-label">${Q(o)}</span>${m}`:`<span class="step-circle">${u}</span><span class="step-label">${Q(o)}</span>${m}`,p?`<button type="button" class="${d}" data-step="${r}"${f}>${h}</button>`:`<div class="${d}"${f}>${h}</div>`}).join(``)}_footerHtml(e){let t=this._active,n=e.length-1,r=this.hasAttribute(`disabled`)?` disabled`:``,i=e[t]?.hasAttribute(`optional`)||this.hasAttribute(`skippable`),a=this.getAttribute(`back-label`)||`Back`,o=this.getAttribute(`next-label`)||`Next`,s=this.getAttribute(`skip-label`)||`Skip`,c=this.getAttribute(`finish-label`)||`Finish`;return`${t>0?`<button type="button" class="btn btn-secondary" data-nav="back"${r}>${_(`arrow-left`,{className:`me-2`})}${Q(a)}</button>`:`<span></span>`}<span class="wizard-footer-actions">${i&&t<n?`<button type="button" class="btn btn-subtle" data-nav="skip"${r}>${Q(s)}</button>`:``}${t<n?`<button type="button" class="btn btn-primary" data-nav="next"${r}>${Q(o)}${_(`arrow-right`,{className:`ms-2`})}</button>`:`<button type="button" class="btn btn-primary" data-nav="finish"${r}>${Q(c)}</button>`}</span>`}_wire(){this._teardown(),this._onHeaderClick=e=>{let t=e.target.closest(`[data-step]`);t&&this.contains(t)&&this._stepTo(Number.parseInt(t.dataset.step,10))},this._onFooterClick=e=>{let t=e.target.closest(`[data-nav]`);if(!t||!this.contains(t)||this.hasAttribute(`disabled`))return;let n=t.dataset.nav;n===`back`?this._back():n===`skip`?this._skip():(n===`next`||n===`finish`)&&this._next()},this._header.addEventListener(`click`,this._onHeaderClick),this._footer.addEventListener(`click`,this._onFooterClick),this._observer=new MutationObserver(()=>this._onStepsMutated()),this._observer.observe(this,{childList:!0})}_teardown(){this._header&&this._onHeaderClick&&this._header.removeEventListener(`click`,this._onHeaderClick),this._footer&&this._onFooterClick&&this._footer.removeEventListener(`click`,this._onFooterClick),this._observer?.disconnect(),this._observer=null}_stepTo(e){this.hasAttribute(`disabled`)||!this.hasAttribute(`non-linear`)&&e>=this._active||this._go(e,`step`)}_back(){this._active>0&&this._go(this._active-1,`back`)}async _next(){this._reconcileSteps();let e=this._active,t=this._steps,n=e>=t.length-1,r=t[e];if(!this.dispatchEvent(new CustomEvent(`wui-wizard:beforechange`,{detail:n?{index:e,next:e,reason:`finish`}:{index:e,next:e+1,reason:`next`},cancelable:!0})))return this._flagInvalid(e);if(this._beforeNext){let i;try{i=await this._beforeNext(e)}catch{i=!1}if(this._reconcileSteps(),t=this._steps,e=t.indexOf(r),e<0)return;if(n=e>=t.length-1,i===!1)return this._flagInvalid(e)}if(this._invalid.delete(e),this._skipped.delete(e),n)return this._finish();this._go(e+1,`next`)}_skip(){let e=this._active,t=this._steps;if(!(!t[e]?.hasAttribute(`optional`)&&!this.hasAttribute(`skippable`))){if(this._invalid.delete(e),this._skipped.add(e),this.dispatchEvent(new CustomEvent(`wui-wizard:skip`,{detail:{index:e}})),e>=t.length-1)return this._finish();this._go(e+1,`skip`)}}_flagInvalid(e){this._invalid.add(e),this._renderChrome(),this.dispatchEvent(new CustomEvent(`wui-wizard:invalid`,{detail:{index:e}}))}_finish(){this._invalid.delete(this._active),this._finished=!0,this._renderChrome(),this.dispatchEvent(new CustomEvent(`wui-wizard:finish`,{detail:{index:this._active}}))}_go(e,t){let n=this._reconcileSteps(),r=Math.max(0,n.length-1),i=Math.min(Math.max(e,0),r),a=this._active;this._finished=!1,this._invalid.delete(a),this._active=i,this._reflectActive(i),this._renderChrome(),t!==`silent`&&i!==a&&this.dispatchEvent(new CustomEvent(`wui-wizard:change`,{detail:{index:i,previous:a,reason:t}}))}_reflectActive(e){this._reflecting=!0,this.setAttribute(`active`,String(e)),this._reflecting=!1}},Yu=(e,t)=>e.length===t.length&&e.every((e,n)=>e===t[n]),Q=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),Xu=class extends i{static get observedAttributes(){return[`label`,`description`,`optional`,`icon`,`status`]}attributeChangedCallback(){let e=this.closest(`wui-wizard`);e&&typeof e.refresh==`function`&&e.refresh()}},Zu=2e3;async function Qu(e){try{if(navigator.clipboard?.writeText)return await navigator.clipboard.writeText(e),!0}catch{}try{let t=document.createElement(`textarea`);t.value=e,t.style.position=`fixed`,t.style.top=`0`,t.style.left=`0`,t.style.opacity=`0`,document.body.appendChild(t),t.select();let n=document.execCommand(`copy`);return document.body.removeChild(t),!!n}catch{return!1}}var $u=`image/png,image/jpeg,image/webp`,ed=5,td={"image/png":[`.png`],"image/jpeg":[`.jpg`,`.jpeg`],"image/webp":[`.webp`],"image/gif":[`.gif`],"image/svg+xml":[`.svg`],"application/pdf":[`.pdf`]},nd={"image/png":`PNG`,"image/jpeg":`JPG`,"image/webp":`WEBP`,"image/gif":`GIF`,"image/svg+xml":`SVG`,"application/pdf":`PDF`,".png":`PNG`,".jpg":`JPG`,".jpeg":`JPG`,".webp":`WEBP`,".gif":`GIF`,".svg":`SVG`,".pdf":`PDF`},rd=e=>String(e||``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean),id=[`.png`,`.jpg`,`.jpeg`,`.webp`,`.gif`,`.svg`,`.bmp`,`.avif`,`.heic`];function ad(e){if(!e)return!1;let t=typeof e==`object`&&e.type?String(e.type).toLowerCase():``;if(t)return t.startsWith(`image/`);let n=typeof e==`string`?e:e.name||e.url||``,r=String(n).toLowerCase();return id.some(e=>r.endsWith(e))}function od(e){let t=rd(e);return t.length?t.every(e=>e.startsWith(`.`)?id.includes(e):e===`image/*`||e.startsWith(`image/`)):!1}function sd(e){let t=[];for(let n of rd(e)){let e=nd[n]||(n.startsWith(`.`)?n.slice(1).toUpperCase():n.toUpperCase());t.includes(e)||t.push(e)}return t.length<=1?t[0]||`supported`:`${t.slice(0,-1).join(`, `)} or ${t[t.length-1]}`}function cd(e,t){let n=rd(t);if(!n.length)return!0;let r=(e.type||``).toLowerCase(),i=(e.name||``).toLowerCase();return n.some(e=>e.startsWith(`.`)?i.endsWith(e):e.endsWith(`/*`)?r.startsWith(e.slice(0,-1)):r&&r===e?!0:!r&&(td[e]||[]).some(e=>i.endsWith(e)))}function ld(e,t={}){if(!e)return null;let n=t.accept===void 0?$u:t.accept,r=t.maxSizeMb===void 0?5:t.maxSizeMb;return cd(e,n)?r>0&&e.size>r*1024*1024?`Keep the file under ${r} MB.`:null:`Choose a ${sd(n)} file.`}var ud={minLength:8,uppercase:!0,lowercase:!0,digit:!0,special:!0,uniqueChars:0},dd=`Password Requirements`;function fd(e){return e===!0||e==null?{...ud}:{...ud,...e}}function pd(e){let t=fd(e),n=[];if(t.minLength>0&&n.push({key:`length`,label:`At least ${t.minLength} characters long`,test:e=>e.length>=t.minLength}),t.uppercase&&n.push({key:`uppercase`,label:`At least one uppercase letter`,test:e=>/[A-Z]/.test(e)}),t.lowercase&&n.push({key:`lowercase`,label:`At least one lowercase letter`,test:e=>/[a-z]/.test(e)}),t.digit&&n.push({key:`digit`,label:`At least one digit`,test:e=>/[0-9]/.test(e)}),t.special&&n.push({key:`special`,label:`At least one special character`,test:e=>/[^A-Za-z0-9]/.test(e)}),t.uniqueChars>0){let e=t.uniqueChars;n.push({key:`unique`,label:`At least ${e} unique character${e>1?`s`:``}`,test:t=>new Set(t).size>=e})}return n}function md(e,t){let n=e==null?``:String(e);return pd(t).map(e=>({key:e.key,label:e.label,met:e.test(n)}))}function hd(e,t){return md(e,t).every(e=>e.met)}var $=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function gd(){$(`wui-select`,Iu),$(`wui-phone`,Fu),$(`wui-datepicker`,_e),$(`wui-date-range`,ve),$(`wui-dock`,ye),$(`wui-consent-banner`,ce),$(`wui-slider`,Lu),$(`wui-timepicker`,Ku),$(`wui-autocomplete`,te),$(`wui-multiselect`,De),$(`wui-taginput`,zu),$(`wui-otp`,ze),$(`wui-status-icon`,s),$(`wui-wizard-step`,Xu),$(`wui-wizard`,Ju)}return gd(),e.COPY_FEEDBACK_MS=Zu,e.DEFAULT_IMAGE_ACCEPT=$u,e.DEFAULT_MAX_SIZE_MB=ed,e.DEFAULT_PASSWORD_RULES=ud,e.DEFAULT_REQUIREMENTS_TITLE=dd,e.STATUS_TONES=o,e.WuiAutocomplete=te,e.WuiConsentBanner=ce,e.WuiDatePicker=_e,e.WuiDateRange=ve,e.WuiDock=ye,e.WuiMultiSelect=De,e.WuiOtp=ze,e.WuiPhone=Fu,e.WuiSelect=Iu,e.WuiSlider=Lu,e.WuiStatusIcon=s,e.WuiTagInput=zu,e.WuiTimePicker=Ku,e.WuiWizard=Ju,e.WuiWizardStep=Xu,e.acceptLabel=sd,e.buildPasswordRules=pd,e.copyTextToClipboard=Qu,e.defineWeborityElements=gd,e.evaluatePassword=md,e.glyphSvg=_,e.isImageFile=ad,e.isImageOnlyAccept=od,e.matchesAccept=cd,e.passwordSatisfies=hd,e.validateFile=ld,e})({});

package/dist/ui-elements.js

@@ -5135,8 +5135,8 @@ function ut(e, t) {
 }
 function dt(e, t = {}) {
 	if (!e) return null;
-	let n = t.accept === void 0 ? tt : t.accept, r = t.maxSizeMb || 5;
-	return ut(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${lt(n)} file.`;
+	let n = t.accept === void 0 ? tt : t.accept, r = t.maxSizeMb === void 0 ? 5 : t.maxSizeMb;
+	return ut(e, n) ? r > 0 && e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${lt(n)} file.`;
 }
 //#endregion
 //#region src/passwordRules.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-elements",
-  "version": "0.13.4",
+  "version": "0.13.5",
   "description": "Webority framework-agnostic UI custom elements (<wui-*>) — the single implementation of the interactive components, styled by @webority/theme. Used natively in Razor and wrapped by @webority/ui-react.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",