@webority/ui-elements 0.146.2 → 0.148.0

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

@@ -1 +1 @@
-(function(e,t,n,r,i,a,o){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var s=globalThis.WeborityUiElementsInternal?.version;if(s!==`0.146.2`)throw Error(`[webority-ui] wizard expects ui-elements 0.146.2 but the page loaded `+s+`.`);var c=`wui-wizard-step`,l=`:scope > [data-wui-glyphs]`,u={done:`Done`,active:`Current`,pending:`To do`,error:`Error`,skipped:`Skipped`},d=[`data-nav`,`data-step`,`data-close`],f=new WeakSet,p=class extends i.ElementBase{static get observedAttributes(){return[`active`,`variant`,`orientation`,`align`,`icon-size`,`non-linear`,`hide-stepper`,`hide-connectors`,`disabled`,`skippable`,`label`,`back-label`,`next-label`,`skip-label`,`finish-label`,`top-bar`,`bar-title`,`close-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._topBar=null,this._onTopBarClick=e=>{e.target.closest(`[data-close]`)&&this.dispatchEvent(new CustomEvent(`wui-wizard:close`,{detail:{index:this._active},bubbles:!0}))},this._known=[],this._observer=null,this._glyphs=null,this._glyphObserver=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 > ${c}`)]}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`)}else 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);let t=this._focusedControl();this._syncTopBar(e),this._header.innerHTML=this._headerHtml(e),this._footer.innerHTML=this._footerHtml(e),this._header.hidden=this.hasAttribute(`hide-stepper`),this._restoreFocus(t)}_focusedControl(){let e=document.activeElement;if(!e||![this._topBar,this._header,this._footer].some(t=>t?.contains(e)))return null;let t=d.find(t=>e.hasAttribute(t));return t?{attr:t,value:e.getAttribute(t)}:null}_restoreFocus(e){if(e)for(let t of[this._topBar,this._header,this._footer]){let n=t&&[...t.querySelectorAll(`[${e.attr}]`)].find(t=>t.getAttribute(e.attr)===e.value);if(n){n.disabled||n.focus({preventScroll:!0});return}}}_syncTopBar(e){if(!this.hasAttribute(`top-bar`)){this._topBar?.removeEventListener(`click`,this._onTopBarClick),this._topBar?.remove(),this._topBar=null;return}this._topBar||(this._topBar=document.createElement(`div`),this._topBar.className=`wui-wizard-topbar`,this._rendered&&this._topBar.addEventListener(`click`,this._onTopBarClick)),this._header.previousElementSibling!==this._topBar&&this.insertBefore(this._topBar,this._header);let t=this.getAttribute(`bar-title`)||``,n=this.getAttribute(`close-label`)||`Close`,r=e.length?`<span class="wui-wizard-topbar-count">Step ${this._active+1} of ${e.length}</span>`:``;this._topBar.innerHTML=`<span class="wui-wizard-topbar-title">${h(t)}</span>${r}<button type="button" class="wui-wizard-topbar-close" data-close aria-label="${g(n)}">${this._glyph(`x`)}</button>`}_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,m(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,t=!e.length||this._header.nextElementSibling===e[0]&&this._footer.previousElementSibling===e[e.length-1];this.querySelector(l)!==this._glyphs&&(this._watchGlyphs(),this._renderHeader()),t&&m(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`,i=this.getAttribute(`variant`)===`tiles`,a=this.getAttribute(`orientation`)===`vertical`,s=!this.hasAttribute(`hide-connectors`),c=this.getAttribute(`align`)===`start`;this._header.className=[`stepper`,`wizard-stepper`,t&&`stepper-journey`,n&&`stepper-icons`,i&&`wui-step-tiles`,a&&`stepper-vertical`,!s&&`wui-stepper-no-connectors`,c&&`wui-stepper-start`].filter(Boolean).join(` `),this._header.setAttribute(`aria-label`,this.getAttribute(`label`)||`Progress`);let l=this.hasAttribute(`non-linear`);for(let t of e)t.getAttribute(`label`)||f.has(t)||(f.add(t),(0,r.devWarn)(`wui-wizard: a <wui-wizard-step> needs a label attribute; its header segment is empty.`));let d=(0,o.stepperHeaderItems)(e.map(e=>({label:e.getAttribute(`label`)||``,icon:e.getAttribute(`icon`)||void 0})),{statusOf:t=>this._stepStatus(e[t],t),journey:t,connectors:s}).map(r=>{let a=r.index,o=e[a],s=r.status,c=o.getAttribute(`label`)||``,d=o.getAttribute(`description`)||``,f=a+1,p=r.glyph.icon?this._glyph(r.glyph.icon):String(r.glyph.number),m=r.className,g=r.current?` aria-current="step"`:``,_=l||a<this._active;if(i){let e=`<span class="step-circle">${p}</span><span class="step-text"><span class="step-label">${h(c)}</span><span class="wui-step-tile-state">${u[s]??``}</span></span>`,t=_?`<button type="button" class="wui-step-tile-body" data-step="${a}"${g}>${e}</button>`:`<div class="wui-step-tile-body"${g}>${e}</div>`;return`<li class="${s===`pending`?`wui-step-tile`:`wui-step-tile ${s}`}">${t}</li>`}let v=d?`<span class="step-desc">${h(d)}</span>`:``,y;y=t?`<span class="step-circle">${p}</span><span class="step-text"><span class="step-index">Step ${f}</span><span class="step-label">${h(c)}</span>${v}</span>`:n?`<span class="step-circle">${p}</span><span class="step-index">Step ${f}</span><span class="step-label">${h(c)}</span>${v}`:`<span class="step-circle">${p}</span><span class="step-label">${h(c)}</span>${v}`;let b=_?`<button type="button" class="${m}" data-step="${a}"${g}>${y}</button>`:`<div class="${m}"${g}>${y}</div>`;return r.line?`${b}<span class="step-line${r.line.done?` done`:``}" aria-hidden="true"></span>`:b}).join(``);return i?`<ol>${d}</ol>`:d}_footerHtml(e){let t=this._active,r=e.length-1,i=this.hasAttribute(`disabled`)?` disabled`:``,o=e[t]?.hasAttribute(`optional`)||this.hasAttribute(`skippable`),s=this.getAttribute(`back-label`)||`Back`,c=this.getAttribute(`next-label`)||`Next`,l=this.getAttribute(`skip-label`)||`Skip`,u=this.getAttribute(`finish-label`)||`Finish`;return`${t>0?`<button type="button" class="${(0,n.buttonClass)(`primary`,`soft`,`md`)}" data-nav="back"${i} data-wui="${n.APP_BUTTON_MARKER}">${(0,a.glyphSvg)(`arrow-left`,{className:`me-2`})}${h(s)}</button>`:`<span></span>`}<span class="wizard-footer-actions">${o&&t<r?`<button type="button" class="${(0,n.buttonClass)(`neutral`,`soft`,`md`)}" data-nav="skip"${i} data-wui="${n.APP_BUTTON_MARKER}">${h(l)}</button>`:``}${t<r?`<button type="button" class="${(0,n.buttonClass)(`primary`,`solid`,`md`)}" data-nav="next"${i} data-wui="${n.APP_BUTTON_MARKER}">${h(c)}${(0,a.glyphSvg)(`arrow-right`,{className:`ms-2`})}</button>`:`<button type="button" class="${(0,n.buttonClass)(`primary`,`solid`,`md`)}" data-nav="finish"${i} data-wui="${n.APP_BUTTON_MARKER}">${h(u)}</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._topBar?.addEventListener(`click`,this._onTopBarClick),this._observer=new MutationObserver(()=>this._onStepsMutated()),this._observer.observe(this,{childList:!0}),this._watchGlyphs()}_glyph(e){let t=this.querySelector(l),n=t&&[...t.children].find(t=>t.getAttribute(`data-icon`)===e);if(n)return n.outerHTML;let r=Number.parseInt(this.getAttribute(`icon-size`),10);return(0,a.glyphSvg)(e,r>0?{size:r}:void 0)}_watchGlyphs(){this._glyphObserver?.disconnect(),this._glyphObserver=null,this._glyphs=this.querySelector(l),this._glyphs&&(this._glyphObserver=new MutationObserver(()=>this._renderHeader()),this._glyphObserver.observe(this._glyphs,{childList:!0,subtree:!0,attributes:!0,characterData:!0}))}_renderHeader(){if(!this._rendered)return;let e=this._focusedControl();this._header.innerHTML=this._headerHtml(this._steps),this._restoreFocus(e)}_teardown(){this._header&&this._onHeaderClick&&this._header.removeEventListener(`click`,this._onHeaderClick),this._footer&&this._onFooterClick&&this._footer.removeEventListener(`click`,this._onFooterClick),this._topBar?.removeEventListener(`click`,this._onTopBarClick),this._observer?.disconnect(),this._observer=null,this._glyphObserver?.disconnect(),this._glyphObserver=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}},m=(e,t)=>e.length===t.length&&e.every((e,n)=>e===t[n]),h=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),g=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),_=class extends i.ElementBase{static get observedAttributes(){return[`label`,`description`,`optional`,`icon`,`status`]}attributeChangedCallback(){let e=this.closest(`wui-wizard`);e&&typeof e.refresh==`function`&&e.refresh()}};(0,t.defineElement)(`wui-wizard-step`,_),(0,t.defineElement)(`wui-wizard`,p),e.WuiWizard=p,e.WuiWizardStep=_})(this.WeborityUiElements=this.WeborityUiElements||{},WeborityUiElementsInternal.modules.defineElement,WeborityUiElementsInternal.modules.buttonClass,WeborityUiElementsInternal.modules.devWarn,WeborityUiElementsInternal.modules.elementBase,WeborityUiElementsInternal.modules.iconGlyphs,WeborityUiElementsInternal.modules.stepperHeader);
+(function(e,t,n,r,i,a,o){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var s=globalThis.WeborityUiElementsInternal?.version;if(s!==`0.148.0`)throw Error(`[webority-ui] wizard expects ui-elements 0.148.0 but the page loaded `+s+`.`);var c=`wui-wizard-step`,l=`:scope > [data-wui-glyphs]`,u={done:`Done`,active:`Current`,pending:`To do`,error:`Error`,skipped:`Skipped`},d=[`data-nav`,`data-step`,`data-close`],f=new WeakSet,p=class extends i.ElementBase{static get observedAttributes(){return[`active`,`variant`,`orientation`,`align`,`icon-size`,`non-linear`,`hide-stepper`,`hide-connectors`,`disabled`,`skippable`,`label`,`back-label`,`next-label`,`skip-label`,`finish-label`,`top-bar`,`bar-title`,`close-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._topBar=null,this._onTopBarClick=e=>{e.target.closest(`[data-close]`)&&this.dispatchEvent(new CustomEvent(`wui-wizard:close`,{detail:{index:this._active},bubbles:!0}))},this._known=[],this._observer=null,this._glyphs=null,this._glyphObserver=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 > ${c}`)]}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`)}else 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);let t=this._focusedControl();this._syncTopBar(e),this._header.innerHTML=this._headerHtml(e),this._footer.innerHTML=this._footerHtml(e),this._header.hidden=this.hasAttribute(`hide-stepper`),this._restoreFocus(t)}_focusedControl(){let e=document.activeElement;if(!e||![this._topBar,this._header,this._footer].some(t=>t?.contains(e)))return null;let t=d.find(t=>e.hasAttribute(t));return t?{attr:t,value:e.getAttribute(t)}:null}_restoreFocus(e){if(e)for(let t of[this._topBar,this._header,this._footer]){let n=t&&[...t.querySelectorAll(`[${e.attr}]`)].find(t=>t.getAttribute(e.attr)===e.value);if(n){n.disabled||n.focus({preventScroll:!0});return}}}_syncTopBar(e){if(!this.hasAttribute(`top-bar`)){this._topBar?.removeEventListener(`click`,this._onTopBarClick),this._topBar?.remove(),this._topBar=null;return}this._topBar||(this._topBar=document.createElement(`div`),this._topBar.className=`wui-wizard-topbar`,this._rendered&&this._topBar.addEventListener(`click`,this._onTopBarClick)),this._header.previousElementSibling!==this._topBar&&this.insertBefore(this._topBar,this._header);let t=this.getAttribute(`bar-title`)||``,n=this.getAttribute(`close-label`)||`Close`,r=e.length?`<span class="wui-wizard-topbar-count">Step ${this._active+1} of ${e.length}</span>`:``;this._topBar.innerHTML=`<span class="wui-wizard-topbar-title">${h(t)}</span>${r}<button type="button" class="wui-wizard-topbar-close" data-close aria-label="${g(n)}">${this._glyph(`x`)}</button>`}_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,m(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,t=!e.length||this._header.nextElementSibling===e[0]&&this._footer.previousElementSibling===e[e.length-1];this.querySelector(l)!==this._glyphs&&(this._watchGlyphs(),this._renderHeader()),t&&m(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`,i=this.getAttribute(`variant`)===`tiles`,a=this.getAttribute(`orientation`)===`vertical`,s=!this.hasAttribute(`hide-connectors`),c=this.getAttribute(`align`)===`start`;this._header.className=[`stepper`,`wizard-stepper`,t&&`stepper-journey`,n&&`stepper-icons`,i&&`wui-step-tiles`,a&&`stepper-vertical`,!s&&`wui-stepper-no-connectors`,c&&`wui-stepper-start`].filter(Boolean).join(` `),this._header.setAttribute(`aria-label`,this.getAttribute(`label`)||`Progress`);let l=this.hasAttribute(`non-linear`);for(let t of e)t.getAttribute(`label`)||f.has(t)||(f.add(t),(0,r.devWarn)(`wui-wizard: a <wui-wizard-step> needs a label attribute; its header segment is empty.`));let d=(0,o.stepperHeaderItems)(e.map(e=>({label:e.getAttribute(`label`)||``,icon:e.getAttribute(`icon`)||void 0})),{statusOf:t=>this._stepStatus(e[t],t),journey:t,connectors:s}).map(r=>{let a=r.index,o=e[a],s=r.status,c=o.getAttribute(`label`)||``,d=o.getAttribute(`description`)||``,f=a+1,p=r.glyph.icon?this._glyph(r.glyph.icon):String(r.glyph.number),m=r.className,g=r.current?` aria-current="step"`:``,_=l||a<this._active;if(i){let e=`<span class="step-circle">${p}</span><span class="step-text"><span class="step-label">${h(c)}</span><span class="wui-step-tile-state">${u[s]??``}</span></span>`,t=_?`<button type="button" class="wui-step-tile-body" data-step="${a}"${g}>${e}</button>`:`<div class="wui-step-tile-body"${g}>${e}</div>`;return`<li class="${s===`pending`?`wui-step-tile`:`wui-step-tile ${s}`}">${t}</li>`}let v=d?`<span class="step-desc">${h(d)}</span>`:``,y;y=t?`<span class="step-circle">${p}</span><span class="step-text"><span class="step-index">Step ${f}</span><span class="step-label">${h(c)}</span>${v}</span>`:n?`<span class="step-circle">${p}</span><span class="step-index">Step ${f}</span><span class="step-label">${h(c)}</span>${v}`:`<span class="step-circle">${p}</span><span class="step-label">${h(c)}</span>${v}`;let b=_?`<button type="button" class="${m}" data-step="${a}"${g}>${y}</button>`:`<div class="${m}"${g}>${y}</div>`;return r.line?`${b}<span class="step-line${r.line.done?` done`:``}" aria-hidden="true"></span>`:b}).join(``);return i?`<ol>${d}</ol>`:d}_footerHtml(e){let t=this._active,r=e.length-1,i=this.hasAttribute(`disabled`)?` disabled`:``,o=e[t]?.hasAttribute(`optional`)||this.hasAttribute(`skippable`),s=this.getAttribute(`back-label`)||`Back`,c=this.getAttribute(`next-label`)||`Next`,l=this.getAttribute(`skip-label`)||`Skip`,u=this.getAttribute(`finish-label`)||`Finish`;return`${t>0?`<button type="button" class="${(0,n.buttonClass)(`primary`,`soft`,`md`)}" data-nav="back"${i} data-wui="${n.APP_BUTTON_MARKER}">${(0,a.glyphSvg)(`arrow-left`,{className:`me-2`})}${h(s)}</button>`:`<span></span>`}<span class="wizard-footer-actions">${o&&t<r?`<button type="button" class="${(0,n.buttonClass)(`neutral`,`soft`,`md`)}" data-nav="skip"${i} data-wui="${n.APP_BUTTON_MARKER}">${h(l)}</button>`:``}${t<r?`<button type="button" class="${(0,n.buttonClass)(`primary`,`solid`,`md`)}" data-nav="next"${i} data-wui="${n.APP_BUTTON_MARKER}">${h(c)}${(0,a.glyphSvg)(`arrow-right`,{className:`ms-2`})}</button>`:`<button type="button" class="${(0,n.buttonClass)(`primary`,`solid`,`md`)}" data-nav="finish"${i} data-wui="${n.APP_BUTTON_MARKER}">${h(u)}</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._topBar?.addEventListener(`click`,this._onTopBarClick),this._observer=new MutationObserver(()=>this._onStepsMutated()),this._observer.observe(this,{childList:!0}),this._watchGlyphs()}_glyph(e){let t=this.querySelector(l),n=t&&[...t.children].find(t=>t.getAttribute(`data-icon`)===e);if(n)return n.outerHTML;let r=Number.parseInt(this.getAttribute(`icon-size`),10);return(0,a.glyphSvg)(e,r>0?{size:r}:void 0)}_watchGlyphs(){this._glyphObserver?.disconnect(),this._glyphObserver=null,this._glyphs=this.querySelector(l),this._glyphs&&(this._glyphObserver=new MutationObserver(()=>this._renderHeader()),this._glyphObserver.observe(this._glyphs,{childList:!0,subtree:!0,attributes:!0,characterData:!0}))}_renderHeader(){if(!this._rendered)return;let e=this._focusedControl();this._header.innerHTML=this._headerHtml(this._steps),this._restoreFocus(e)}_teardown(){this._header&&this._onHeaderClick&&this._header.removeEventListener(`click`,this._onHeaderClick),this._footer&&this._onFooterClick&&this._footer.removeEventListener(`click`,this._onFooterClick),this._topBar?.removeEventListener(`click`,this._onTopBarClick),this._observer?.disconnect(),this._observer=null,this._glyphObserver?.disconnect(),this._glyphObserver=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}},m=(e,t)=>e.length===t.length&&e.every((e,n)=>e===t[n]),h=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),g=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),_=class extends i.ElementBase{static get observedAttributes(){return[`label`,`description`,`optional`,`icon`,`status`]}attributeChangedCallback(){let e=this.closest(`wui-wizard`);e&&typeof e.refresh==`function`&&e.refresh()}};(0,t.defineElement)(`wui-wizard-step`,_),(0,t.defineElement)(`wui-wizard`,p),e.WuiWizard=p,e.WuiWizardStep=_})(this.WeborityUiElements=this.WeborityUiElements||{},WeborityUiElementsInternal.modules.defineElement,WeborityUiElementsInternal.modules.buttonClass,WeborityUiElementsInternal.modules.devWarn,WeborityUiElementsInternal.modules.elementBase,WeborityUiElementsInternal.modules.iconGlyphs,WeborityUiElementsInternal.modules.stepperHeader);