@webority/ui-elements 0.12.0 → 0.12.1

package/dist/ui-elements.global.js

@@ -300,4 +300,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=Ju(this._value),r=this.getAttribute(`format`)||`24`;t.textContent=n?Yu(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=Ju(t)||{h:0,m:0},i=Ju(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=Ju(this._value),i=this._focus,a=``;for(let e=0;e<n.length;e++){let o=n[e],s=qu(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"`:``}>${Yu(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()}},Zu=`wui-wizard-step`,Qu=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}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 > ${Zu}`)]}refresh(){this._rendered&&this._renderChrome()}connectedCallback(){if(this._rendered)this._wire();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)&&e!==this._active&&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._renderChrome(),this._rendered=!0,this._wire()}_renderChrome(){let e=this._steps;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)}_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`?this._next():n===`finish`&&this._finish()},this._header.addEventListener(`click`,this._onHeaderClick),this._footer.addEventListener(`click`,this._onFooterClick)}_teardown(){this._header&&this._onHeaderClick&&this._header.removeEventListener(`click`,this._onHeaderClick),this._footer&&this._onFooterClick&&this._footer.removeEventListener(`click`,this._onFooterClick)}_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(){let e=this._active,t=this._steps;if(!this.dispatchEvent(new CustomEvent(`wui-wizard:beforechange`,{detail:{index:e,next:e+1,reason:`next`},cancelable:!0})))return this._flagInvalid(e);if(this._beforeNext){let t;try{t=await this._beforeNext(e)}catch{t=!1}if(t===!1)return this._flagInvalid(e)}if(this._invalid.delete(e),this._skipped.delete(e),e>=t.length-1)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._steps,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}},Q=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),$u=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()}},ed=2e3;async function td(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 nd=`image/png,image/jpeg,image/webp`,rd=5,id={"image/png":[`.png`],"image/jpeg":[`.jpg`,`.jpeg`],"image/webp":[`.webp`],"image/gif":[`.gif`],"image/svg+xml":[`.svg`],"application/pdf":[`.pdf`]},ad={"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`},od=e=>String(e||``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean),sd=[`.png`,`.jpg`,`.jpeg`,`.webp`,`.gif`,`.svg`,`.bmp`,`.avif`,`.heic`];function cd(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 sd.some(e=>r.endsWith(e))}function ld(e){let t=od(e);return t.length?t.every(e=>e.startsWith(`.`)?sd.includes(e):e===`image/*`||e.startsWith(`image/`)):!1}function ud(e){let t=[];for(let n of od(e)){let e=ad[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 dd(e,t){let n=od(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&&(id[e]||[]).some(e=>i.endsWith(e)))}function fd(e,t={}){if(!e)return null;let n=t.accept===void 0?nd:t.accept,r=t.maxSizeMb||5;return dd(e,n)?e.size>r*1024*1024?`Keep the file under ${r} MB.`:null:`Choose a ${ud(n)} file.`}var pd={minLength:8,uppercase:!0,lowercase:!0,digit:!0,special:!0,uniqueChars:0},md=`Password Requirements`;function hd(e){return e===!0||e==null?{...pd}:{...pd,...e}}function gd(e){let t=hd(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 _d(e,t){let n=e==null?``:String(e);return gd(t).map(e=>({key:e.key,label:e.label,met:e.test(n)}))}function vd(e,t){return _d(e,t).every(e=>e.met)}var $=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function yd(){$(`wui-select`,zu),$(`wui-phone`,Ru),$(`wui-datepicker`,he),$(`wui-date-range`,ge),$(`wui-dock`,_e),$(`wui-feedback`,Se),$(`wui-consent-banner`,oe),$(`wui-slider`,Vu),$(`wui-timepicker`,Xu),$(`wui-autocomplete`,te),$(`wui-multiselect`,je),$(`wui-taginput`,Uu),$(`wui-otp`,Ue),$(`wui-status-icon`,s),$(`wui-wizard-step`,$u),$(`wui-wizard`,Qu)}return yd(),e.COPY_FEEDBACK_MS=ed,e.DEFAULT_IMAGE_ACCEPT=nd,e.DEFAULT_MAX_SIZE_MB=rd,e.DEFAULT_PASSWORD_RULES=pd,e.DEFAULT_REQUIREMENTS_TITLE=md,e.STATUS_TONES=o,e.WuiAutocomplete=te,e.WuiConsentBanner=oe,e.WuiDatePicker=he,e.WuiDateRange=ge,e.WuiDock=_e,e.WuiFeedback=Se,e.WuiMultiSelect=je,e.WuiOtp=Ue,e.WuiPhone=Ru,e.WuiSelect=zu,e.WuiSlider=Vu,e.WuiStatusIcon=s,e.WuiTagInput=Uu,e.WuiTimePicker=Xu,e.WuiWizard=Qu,e.WuiWizardStep=$u,e.acceptLabel=ud,e.buildPasswordRules=gd,e.copyTextToClipboard=td,e.defineWeborityElements=yd,e.evaluatePassword=_d,e.glyphSvg=_,e.isImageFile=cd,e.isImageOnlyAccept=ld,e.matchesAccept=dd,e.passwordSatisfies=vd,e.validateFile=fd,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=Ju(this._value),r=this.getAttribute(`format`)||`24`;t.textContent=n?Yu(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=Ju(t)||{h:0,m:0},i=Ju(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=Ju(this._value),i=this._focus,a=``;for(let e=0;e<n.length;e++){let o=n[e],s=qu(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"`:``}>${Yu(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()}},Zu=`wui-wizard-step`,Qu=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}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 > ${Zu}`)]}refresh(){this._rendered&&this._renderChrome()}connectedCallback(){if(this._rendered)this._wire();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)&&e!==this._active&&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._renderChrome(),this._rendered=!0,this._wire()}_renderChrome(){let e=this._steps;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)}_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)}_teardown(){this._header&&this._onHeaderClick&&this._header.removeEventListener(`click`,this._onHeaderClick),this._footer&&this._onFooterClick&&this._footer.removeEventListener(`click`,this._onFooterClick)}_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(){let e=this._active,t=e>=this._steps.length-1;if(!this.dispatchEvent(new CustomEvent(`wui-wizard:beforechange`,{detail:t?{index:e,next:e,reason:`finish`}:{index:e,next:e+1,reason:`next`},cancelable:!0})))return this._flagInvalid(e);if(this._beforeNext){let t;try{t=await this._beforeNext(e)}catch{t=!1}if(t===!1)return this._flagInvalid(e)}if(this._invalid.delete(e),this._skipped.delete(e),t)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._steps,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}},Q=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),$u=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()}},ed=2e3;async function td(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 nd=`image/png,image/jpeg,image/webp`,rd=5,id={"image/png":[`.png`],"image/jpeg":[`.jpg`,`.jpeg`],"image/webp":[`.webp`],"image/gif":[`.gif`],"image/svg+xml":[`.svg`],"application/pdf":[`.pdf`]},ad={"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`},od=e=>String(e||``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean),sd=[`.png`,`.jpg`,`.jpeg`,`.webp`,`.gif`,`.svg`,`.bmp`,`.avif`,`.heic`];function cd(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 sd.some(e=>r.endsWith(e))}function ld(e){let t=od(e);return t.length?t.every(e=>e.startsWith(`.`)?sd.includes(e):e===`image/*`||e.startsWith(`image/`)):!1}function ud(e){let t=[];for(let n of od(e)){let e=ad[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 dd(e,t){let n=od(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&&(id[e]||[]).some(e=>i.endsWith(e)))}function fd(e,t={}){if(!e)return null;let n=t.accept===void 0?nd:t.accept,r=t.maxSizeMb||5;return dd(e,n)?e.size>r*1024*1024?`Keep the file under ${r} MB.`:null:`Choose a ${ud(n)} file.`}var pd={minLength:8,uppercase:!0,lowercase:!0,digit:!0,special:!0,uniqueChars:0},md=`Password Requirements`;function hd(e){return e===!0||e==null?{...pd}:{...pd,...e}}function gd(e){let t=hd(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 _d(e,t){let n=e==null?``:String(e);return gd(t).map(e=>({key:e.key,label:e.label,met:e.test(n)}))}function vd(e,t){return _d(e,t).every(e=>e.met)}var $=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function yd(){$(`wui-select`,zu),$(`wui-phone`,Ru),$(`wui-datepicker`,he),$(`wui-date-range`,ge),$(`wui-dock`,_e),$(`wui-feedback`,Se),$(`wui-consent-banner`,oe),$(`wui-slider`,Vu),$(`wui-timepicker`,Xu),$(`wui-autocomplete`,te),$(`wui-multiselect`,je),$(`wui-taginput`,Uu),$(`wui-otp`,Ue),$(`wui-status-icon`,s),$(`wui-wizard-step`,$u),$(`wui-wizard`,Qu)}return yd(),e.COPY_FEEDBACK_MS=ed,e.DEFAULT_IMAGE_ACCEPT=nd,e.DEFAULT_MAX_SIZE_MB=rd,e.DEFAULT_PASSWORD_RULES=pd,e.DEFAULT_REQUIREMENTS_TITLE=md,e.STATUS_TONES=o,e.WuiAutocomplete=te,e.WuiConsentBanner=oe,e.WuiDatePicker=he,e.WuiDateRange=ge,e.WuiDock=_e,e.WuiFeedback=Se,e.WuiMultiSelect=je,e.WuiOtp=Ue,e.WuiPhone=Ru,e.WuiSelect=zu,e.WuiSlider=Vu,e.WuiStatusIcon=s,e.WuiTagInput=Uu,e.WuiTimePicker=Xu,e.WuiWizard=Qu,e.WuiWizardStep=$u,e.acceptLabel=ud,e.buildPasswordRules=gd,e.copyTextToClipboard=td,e.defineWeborityElements=yd,e.evaluatePassword=_d,e.glyphSvg=_,e.isImageFile=cd,e.isImageOnlyAccept=ld,e.matchesAccept=dd,e.passwordSatisfies=vd,e.validateFile=fd,e})({});

package/dist/ui-elements.js

@@ -4914,7 +4914,7 @@ var Ue = class extends 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" ? this._next() : n === "finish" && this._finish();
+			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);
 	}
 	_teardown() {
@@ -4927,9 +4927,13 @@ var Ue = class extends e {
 		this._active > 0 && this._go(this._active - 1, "back");
 	}
 	async _next() {
-		let e = this._active, t = this._steps;
+		let e = this._active, t = e >= this._steps.length - 1;
 		if (!this.dispatchEvent(new CustomEvent("wui-wizard:beforechange", {
-			detail: {
+			detail: t ? {
+				index: e,
+				next: e,
+				reason: "finish"
+			} : {
 				index: e,
 				next: e + 1,
 				reason: "next"
@@ -4945,7 +4949,7 @@ var Ue = class extends e {
 			}
 			if (t === !1) return this._flagInvalid(e);
 		}
-		if (this._invalid.delete(e), this._skipped.delete(e), e >= t.length - 1) return this._finish();
+		if (this._invalid.delete(e), this._skipped.delete(e), t) return this._finish();
 		this._go(e + 1, "next");
 	}
 	_skip() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-elements",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "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",