@coderundebug/ui-web/ui-stepper.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as i}from"./ui-tools.js";export class UiStepper extends HTMLElement{static get i(){return'\n        <svg viewBox="0 0 16 16">\n            <path d="M 6,12 14,4"></path>\n            <path d="m 2,8 4,4"></path>        \n        </svg>\n        '}static get t(){return'\n        <svg viewBox="0 0 16 16">\n            <path d="M 1,8 H 15"></path>\n        </svg>\n        '}static get o(){return'\n        <svg viewBox="0 0 16 16">\n            <path d="M 8,10 V 8 C 9.9329966,8 11.5,6.4329966 11.5,4.5 11.5,2.5670034 9.9329966,1 8,1 6.0670034,1 4.5,2.5670034 4.5,4.5"></path>\n            <circle style="stroke: none; fill: var(--ui-icon-primary-color);" cx="8" cy="14.5" r="1.5"></circle>\n        </svg>\n        '}constructor(){super(),this.attachShadow({mode:"open",slotAssignment:"manual"}),this.shadowRoot.innerHTML=UiStepper.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiStepper.uiCssStyleSheet],this.l=this.shadowRoot.querySelector(".base"),this.p=this.p.bind(this),this.u=!1,this.h=0,this.v=0,this.m=[],this.k=[],this.S=[],this.j=[],this.U=[],this._=null,this.M=null,this.C=null,this.I=null}get value(){return this.v}set value(i){null!=i&&("string"==typeof i&&(i=parseInt(i)),this.setAttribute("value",i.toString()))}connectedCallback(){this.B=new MutationObserver(this.p),this.B.observe(this,{childList:!0}),this.A(),this.u=!0,this.H()}disconnectedCallback(){this.B.disconnect(),this.B=void 0,this.u=!1}attributeChangedCallback(i,t,s){"value"===i&&(this.v=parseInt(s)),!0===this.u&&this.A(),this.H()}static get observedAttributes(){return["double-label","skipped","steps","swap-label","value"]}p(i,t){this.A()}H(){let i=!1;!0===this.hasAttribute("icons")&&(i=!0),this.L();for(let t=0;t<this.m.length;t++){const s=this.m[t];s.classList.remove("done","active","todo","skipped"),-1===this.U.indexOf(t+1)?(s.V<this.v&&(s.classList.add("done"),this.q(s,t,i,"done")),s.V===this.v&&(s.classList.add("active"),this.q(s,t,i,"active")),s.V>this.v&&(s.classList.add("todo"),this.q(s,t,i,"todo"))):(s.classList.add("skipped"),this.q(s,t,i,"skipped"))}for(let i=0;i<this.k.length;i++){const t=this.k[i];t.classList.remove("done","active","todo"),t.V<=this.v&&t.classList.add("done"),t.V>this.v&&t.classList.add("todo")}for(let i=0;i<this.S.length;i++){const t=this.S[i];t.classList.remove("done","skipped","active","todo"),t.O.classList.remove("done","skipped","active","todo"),-1===this.U.indexOf(i+1)?(t.V===this.v&&(t.classList.add("active"),t.O.classList.add("active")),t.V<this.v&&(t.classList.add("done"),t.O.classList.add("done")),t.V>this.v&&(t.classList.add("todo"),t.O.classList.add("todo"))):(t.classList.add("skipped"),t.O.classList.add("skipped"))}}q(i,t,s,e){if("done"!==e||!0!==s)if("skipped"!==e||!0!==s)if("active"!==e||!0!==s){if("todo"===e&&!0===s&&null!==this.I){const t=this.I.cloneNode(!0);return i.innerHTML="",void i.appendChild(t)}if(t+1<=this.j.length){const s=this.j[t].cloneNode(!0);i.innerHTML="",i.appendChild(s)}}else if(null!==this.C){const t=this.C.cloneNode(!0);i.innerHTML="",i.appendChild(t)}else i.innerHTML=UiStepper.o;else if(null!==this.M){const t=this.M.cloneNode(!0);i.innerHTML="",i.appendChild(t)}else i.innerHTML=UiStepper.t;else if(null!==this._){const t=this._.cloneNode(!0);i.innerHTML="",i.appendChild(t)}else i.innerHTML=UiStepper.i}L(){if(this.U=[],!1===this.hasAttribute("skipped"))return;this.getAttribute("skipped").split(",").forEach((i=>{const t=parseInt(i);0!==t&&this.U.push(t)}))}A(){if(this.T(),0===this.h)return;this.l.innerHTML="",this.m=[],this.k=[],this.S=[],this.j=[];let i=!1;!0===this.hasAttribute("double-label")&&(i=!0);let t=!1;!0===this.hasAttribute("swap-label")&&(t=!0);let s=!1;!0===this.hasAttribute("vertical")&&(s=!0);let e=!1;!0===this.hasAttribute("numbers")&&(e=!0);let r=[],o=null;for(const i of this.children)if("info"!==i.slot)"done"===i.slot&&(this._=i),"skipped"===i.slot&&(this.M=i),"active"===i.slot&&(this.C=i),"todo"===i.slot&&(this.I=i),"icon"===i.slot&&this.j.push(i),!0!==i.hasAttribute("slot")&&(i.D=null,r.push(i),o=i);else{if(null===o)continue;o.D=i}let a=-1,c=-1,n=-1,l="1fr,var(--ui-sss),1fr,".repeat(this.h);l=l.substring(0,l.length-1);let p=l.split(",");l=p.join(" "),!1===s&&(this.l.style.gridTemplateColumns=l,!0===i?(this.l.style.gridTemplateRows="auto 1fr auto",a=1,c=3,n=2):!0===t?(this.l.style.gridTemplateRows="auto 1fr",a=1,n=2):(this.l.style.gridTemplateRows="1fr auto",a=2,n=1)),!0===s&&(this.l.style.gridTemplateRows=l,!0===i?(this.l.style.gridTemplateColumns="auto 1fr auto",a=1,c=3,n=2):!0===t?(this.l.style.gridTemplateColumns="auto 1fr",a=1,n=2):(this.l.style.gridTemplateColumns="1fr auto",a=2,n=1));let u=0;for(let t=0;t<this.h;t++){const o=document.createElement("div"),l=document.createElement("div");o.appendChild(l),o.setAttribute("aria-hidden","true"),o.V=t+1,o.classList.add("step"),!0===e&&(o.textContent=(t+1).toString());let p=3*t+2;if(!1===s?(o.style.gridColumn=p.toString(),o.style.gridRow=n):(o.style.gridColumn=n,o.style.gridRow=p.toString()),this.l.appendChild(o),this.m.push(o),t+1<this.h){const i=document.createElement("div");i.V=t+2,i.classList.add("line");let e=3*t+3;!1===s?(i.style.gridColumn=e.toString()+" / span 2",i.style.gridRow=n):(i.style.gridColumn=n,i.style.gridRow=e.toString()+" / span 2"),this.l.appendChild(i),this.k.push(i)}if(u+1>r.length)continue;let d=r[u],h=document.createElement("div");h.V=t+1,h.classList.add("label"),!0===i&&h.classList.add("double");let v=document.createElement("slot");if(h.appendChild(v),this.l.appendChild(h),v.assign(d),h.O=d,p=3*t+1,!1===s?(h.style.gridColumn=p.toString()+" / span 3",h.style.gridRow=a):(h.style.gridColumn=a,h.style.gridRow=p.toString()+" / span 3"),this.S.push(h),d.D&&!0===s){const s=document.createElement("div");s.classList.add("info"),!0===i&&s.classList.add("double");let e=document.createElement("slot");s.appendChild(e),this.l.appendChild(s),e.assign(d.D),p=3*t+3,s.style.gridColumn=a,s.style.gridRow=p.toString()+" / span 2"}if(u++,!1!==i&&!(u+1>r.length)){if(d=r[u],h=document.createElement("div"),h.V=t+1,h.classList.add("label"),v=document.createElement("slot"),h.appendChild(v),this.l.appendChild(h),v.assign(d),h.O=d,p=3*t+1,!1===s?(h.style.gridColumn=p.toString()+" / span 3",h.style.gridRow=c):(h.style.gridColumn=c,h.style.gridRow=p.toString()+" / span 3"),this.S.push(h),d.D&&!0===s){const i=document.createElement("div");i.classList.add("info");let s=document.createElement("slot");i.appendChild(s),this.l.appendChild(i),s.assign(d.D),p=3*t+3,i.style.gridColumn=c,i.style.gridRow=p.toString()+" / span 2"}u++}}0!==this.S.length?this.l.classList.add("labels"):this.l.classList.remove("labels")}T(){if(this.h=0,!0===this.hasAttribute("steps")){let i=parseInt(this.getAttribute("steps"));if(i<=0||i>=1e3)return;return void(this.h=i)}let i=0;for(const t of this.children)!0!==t.hasAttribute("slot")&&i++;if(0!==i)return void(!0===this.hasAttribute("double-label")?this.h=Math.floor(i/2):this.h=i);let t=0;for(const i of this.children)"icon"===i.slot&&t++;0===t||(this.h=t)}}UiStepper.uiCss=" .base{display:inline-grid;isolation:isolate;width:100%;height:100%;user-select:none;-webkit-user-select:none;box-sizing:border-box;--ui-sss:var(--ui-stepper-step-size, calc(var(--ui-font-size-normal, 16px) * 1.75));--ui-spc:var(--ui-stepper-primary-color, var(--ui-default-foreground, hsl(0 0% 30% / 1)));--ui-ssc:var(--ui-stepper-secondary-color, var(--ui-default-background, hsl(0 0% 90% / 1)));}:host(:not([vertical])){display:block;& .base{align-items:center;column-gap:var(--ui-stepper-line-gap, 0);}& .base.labels{row-gap:var(--ui-stepper-label-gap, 8px);}& .line{border-block-start-width:var(--ui-stepper-line-size, 4px);border-block-start-style:var(--ui-stepper-line-style, solid);}& .line.done{border-block-start-color:var(--ui-spc);}& .line.todo{border-block-start-color:var(--ui-ssc);}& .label{justify-self:center;}} :host([vertical]){display:inline-block;& .base{justify-items:center;row-gap:var(--ui-stepper-line-gap, 0);}& .base.labels{column-gap:var(--ui-stepper-label-gap, 8px);}& .line{border-inline-start-width:var(--ui-stepper-line-size, 4px);border-inline-start-style:var(--ui-stepper-line-style, solid);}& .line.done{border-inline-start-color:var(--ui-spc);}& .line.todo{border-inline-start-color:var(--ui-ssc);}& .label{align-self:center;justify-self:start;}& .label.double, .info.double{justify-self:end;}& .info{align-self:start;justify-self:start;}& .info.double{justify-self:end;}} .step{display:grid;align-items:center;justify-items:center;height:var(--ui-sss);width:var(--ui-sss);font-size:var(--ui-stepper-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-stepper-font-weight, var(--ui-font-weight-bold, bold));border-radius:10rem;}.step > *{height:60%;height:round(60%, 2px);width:60%;width:round(60%, 2px);}.step.done{background-color:var(--ui-spc);--ui-icon-primary-color:var(--ui-ssc);}.step.skipped{background-color:var(--ui-spc);--ui-icon-primary-color:var(--ui-ssc);}.step.active{background-color:var(--ui-spc);--ui-icon-primary-color:var(--ui-ssc);}.step.todo{background-color:var(--ui-ssc);--ui-icon-primary-color:var(--ui-spc);}:host([circle]){& .step{box-sizing:border-box;border-radius:10rem;border-style:var(--ui-stepper-circle-style, solid);border-width:var(--ui-stepper-circle-width, 4px);border-color:var(--ui-ssc);background-color:transparent;}& .step.done{border-color:var(--ui-spc);--ui-icon-primary-color:var(--ui-spc);}& .step.skipped{border-color:var(--ui-spc);--ui-icon-primary-color:var(--ui-spc);}& .step.active{border-color:var(--ui-spc);--ui-icon-primary-color:var(--ui-spc);}& .step.todo{border-color:var(--ui-ssc);--ui-icon-primary-color:var(--ui-ssc);}} :host([numbers]){& .step{text-align:center;line-height:var(--ui-sss);}} :host([numbers]:not([circle])){& .step.done{color:var(--ui-ssc);}& .step.skipped{color:var(--ui-ssc);}& .step.active{color:var(--ui-ssc);}& .step.todo{color:var(--ui-spc);}} :host([numbers][circle]){& .step{line-height:calc(var(--ui-sss) - (var(--ui-stepper-circle-width, 4px) * 2));background-color:transparent;}& .step.done{color:var(--ui-spc);}& .step.skipped{color:var(--ui-spc);}& .step.active{color:var(--ui-spc);}& .step.todo{color:var(--ui-ssc);}} :host([icons]){& .step{display:grid;align-items:center;justify-items:center;}& svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;height:60%;height:round(60%, 2px);}} :host([icons]:not([circle])){& .step.done svg{stroke:var(--ui-ssc);--ui-icon-primary-color:var(--ui-ssc);}& .step.skipped svg{stroke:var(--ui-ssc);--ui-icon-primary-color:var(--ui-ssc);}& .step.active svg{stroke:var(--ui-ssc);--ui-icon-primary-color:var(--ui-ssc);}& .step.todo svg{stroke:var(--ui-spc);--ui-icon-primary-color:var(--ui-spc);}} :host([icons][circle]){& .step.done svg{stroke:var(--ui-spc);--ui-icon-primary-color:var(--ui-spc);}& .step.skipped svg{stroke:var(--ui-spc);--ui-icon-primary-color:var(--ui-spc);}& .step.active svg{stroke:var(--ui-spc);--ui-icon-primary-color:var(--ui-spc);}& .step.todo svg{stroke:var(--ui-ssc);--ui-icon-primary-color:var(--ui-ssc);}} :host([active-highlight]){&:host(:not([circle])){& .step.active{box-sizing:border-box;border-radius:10rem;border-style:var(--ui-stepper-circle-style, solid);border-width:var(--ui-stepper-circle-width, 4px);border-color:var(--ui-spc);--ui-icon-primary-color:var(--ui-spc);background-color:transparent;}&:host([numbers]){& .step.active{text-align:center;line-height:calc(var(--ui-sss) - (var(--ui-stepper-circle-width, 4px) * 2));color:var(--ui-spc);}} &:host([icons]){& .step.active{display:grid;align-items:center;justify-items:center;--ui-icon-primary-color:var(--ui-spc);& svg{stroke:var(--ui-spc);--ui-icon-primary-color:var(--ui-spc);}}}} &:host([circle]){& .step.active{border-radius:10rem;border:none;background-color:var(--ui-spc);--ui-icon-primary-color:var(--ui-ssc);}&:host([numbers]){& .step.active{text-align:center;line-height:calc(var(--ui-sss) - (var(--ui-stepper-circle-width, 4px) * 2));color:var(--ui-ssc);}} &:host([icons]){& .step.active{display:grid;align-items:center;justify-items:center;--ui-icon-primary-color:var(--ui-ssc);& svg{stroke:var(--ui-ssc);--ui-icon-primary-color:var(--ui-ssc);}}}}}::slotted(*:not(:defined)){display:none;}@media (forced-colors:active) or (prefers-contrast:more){.step, .step.done, .step.skipped, .step.active, .step.todo{box-sizing:border-box !important;border-radius:10rem !important;border-style:solid !important;border-width:4px !important;border-color:var(--ui-spc) !important;text-align:center !important;line-height:calc(var(--ui-sss) - (var(--ui-stepper-circle-width, 4px) * 2)) !important;background-color:transparent !important;--ui-icon-primary-color:var(--ui-spc) !important;}.step.todo{border-style:dashed !important;}:host([vertical]) .line.todo{border-inline-start-style:dashed !important;}:host(:not([vertical])) .line.todo{border-block-start-style:dashed !important;}& .step svg, .step.done svg, .step.skipped svg, .step.active svg, .step svg{stroke:var(--ui-spc) !important;}} ",UiStepper.uiHtml='<div class="base"></div>',i.createUi(UiStepper,"ui-stepper",import.meta.url);