@webority/ui-elements 0.78.1 → 0.79.0

package/dist/WuiWizardStep-1O75EzB2.js

@@ -1 +0,0 @@
-import{t as e}from"./elementBase-BlsR4tqa.js";import{t}from"./iconGlyphs.g-Bk8AzmSO.js";var n=`wui-wizard-step`,r=`:scope > [data-wui-glyphs]`,i={done:`Done`,active:`Current`,pending:`To do`,error:`Error`,skipped:`Skipped`},a=[`data-nav`,`data-step`,`data-close`],o=class extends e{static get observedAttributes(){return[`active`,`variant`,`orientation`,`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 > ${n}`)]}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);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=a.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">${c(t)}</span>${r}<button type="button" class="wui-wizard-topbar-close" data-close aria-label="${l(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,s(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(r)!==this._glyphs&&(this._watchGlyphs(),this._renderHeader()),!(t&&s(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(`variant`)===`tiles`,a=this.getAttribute(`orientation`)===`vertical`,o=!this.hasAttribute(`hide-connectors`);this._header.className=[`stepper`,`wizard-stepper`,t&&`stepper-journey`,n&&`stepper-icons`,r&&`wui-step-tiles`,a&&`stepper-vertical`,!o&&`wui-stepper-no-connectors`].filter(Boolean).join(` `),this._header.setAttribute(`aria-label`,this.getAttribute(`label`)||`Progress`);let s=this.hasAttribute(`non-linear`),l=e.map((a,l)=>{let u=this._stepStatus(a,l),d=a.getAttribute(`label`)||``,f=a.getAttribute(`description`)||``,p=a.getAttribute(`icon`)||``,m=l+1,h;h=u===`done`?this._glyph(`check`):u===`error`?this._glyph(`alert-triangle`):u===`skipped`?this._glyph(`minus`):p?this._glyph(p):String(m);let g=u===`pending`?`step`:`step ${u}`,_=u===`active`?` aria-current="step"`:``,v=s||l<this._active;if(r){let e=`<span class="step-circle">${h}</span><span class="step-text"><span class="step-label">${c(d)}</span><span class="wui-step-tile-state">${i[u]??``}</span></span>`,t=v?`<button type="button" class="wui-step-tile-body" data-step="${l}"${_}>${e}</button>`:`<div class="wui-step-tile-body"${_}>${e}</div>`;return`<li class="${u===`pending`?`wui-step-tile`:`wui-step-tile ${u}`}">${t}</li>`}let y=f?`<span class="step-desc">${c(f)}</span>`:``,b;b=t?`<span class="step-circle">${h}</span><span class="step-text"><span class="step-index">Step ${m}</span><span class="step-label">${c(d)}</span>${y}</span>`:n?`<span class="step-circle">${h}</span><span class="step-index">Step ${m}</span><span class="step-label">${c(d)}</span>${y}`:`<span class="step-circle">${h}</span><span class="step-label">${c(d)}</span>${y}`;let x=v?`<button type="button" class="${g}" data-step="${l}"${_}>${b}</button>`:`<div class="${g}"${_}>${b}</div>`;return t&&o&&l<e.length-1?`${x}<span class="step-line${u===`done`?` done`:``}" aria-hidden="true"></span>`:x}).join(``);return r?`<ol>${l}</ol>`:l}_footerHtml(e){let n=this._active,r=e.length-1,i=this.hasAttribute(`disabled`)?` disabled`:``,a=e[n]?.hasAttribute(`optional`)||this.hasAttribute(`skippable`),o=this.getAttribute(`back-label`)||`Back`,s=this.getAttribute(`next-label`)||`Next`,l=this.getAttribute(`skip-label`)||`Skip`,u=this.getAttribute(`finish-label`)||`Finish`;return`${n>0?`<button type="button" class="btn btn-secondary" data-nav="back"${i}>${t(`arrow-left`,{className:`me-2`})}${c(o)}</button>`:`<span></span>`}<span class="wizard-footer-actions">${a&&n<r?`<button type="button" class="btn btn-neutral" data-nav="skip"${i}>${c(l)}</button>`:``}${n<r?`<button type="button" class="btn btn-primary" data-nav="next"${i}>${c(s)}${t(`arrow-right`,{className:`ms-2`})}</button>`:`<button type="button" class="btn btn-primary" data-nav="finish"${i}>${c(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 n=this.querySelector(r),i=n&&[...n.children].find(t=>t.getAttribute(`data-icon`)===e);if(i)return i.outerHTML;let a=Number.parseInt(this.getAttribute(`icon-size`),10);return t(e,a>0?{size:a}:void 0)}_watchGlyphs(){this._glyphObserver?.disconnect(),this._glyphObserver=null,this._glyphs=this.querySelector(r),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}},s=(e,t)=>e.length===t.length&&e.every((e,n)=>e===t[n]),c=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),l=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),u=class extends e{static get observedAttributes(){return[`label`,`description`,`optional`,`icon`,`status`]}attributeChangedCallback(){let e=this.closest(`wui-wizard`);e&&typeof e.refresh==`function`&&e.refresh()}};export{o as n,u as t};