@coderundebug/ui-web/ui-input-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 UiInputStepper extends HTMLElement{static get formAssociated(){return!0}static get i(){return'\n        <svg viewBox="0 0 16 16">\n            <path d="M 1,8 H 15"></path>\n        </svg>\n        '}static get t(){return'\n        <svg viewBox="0 0 16 16">\n            <path d="M 8,1 V 15"></path>\n            <path d="M 1,8 H 15"></path>\n        </svg>\n        '}static get o(){return'\n        <svg viewBox="0 0 8 14">\n            <path d="M 7,1 1,7 7,13"></path>\n        </svg>\n        '}static get u(){return'\n        <svg viewBox="0 0 8 14">\n            <path d="M 1,1 7,7 1,13"></path>\n        </svg>\n        '}static get h(){return'\n        <svg viewBox="0 0 14 8">\n            <path d="M 13,7 7,1 1,7"></path>\n        </svg>\n        '}static get l(){return'\n        <svg viewBox="0 0 14 8">\n            <path d="M 13,1 7,7 1,1"></path>\n        </svg>\n        '}constructor(){super(),this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.innerHTML=UiInputStepper.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiInputStepper.uiCssStyleSheet],this.p=this.attachInternals(),this.v=this.shadowRoot.querySelector(".base"),this.m=this.shadowRoot.querySelector(".minus"),this.k=this.shadowRoot.querySelector(".prefix"),this.S=this.shadowRoot.querySelector(".number"),this.U=this.shadowRoot.querySelector(".suffix"),this.I=this.shadowRoot.querySelector(".plus"),this._=this.shadowRoot.querySelector(".group-arrows-minus"),this.M=this.shadowRoot.querySelector(".group-arrows-plus"),this.C=this.C.bind(this),this.j=this.j.bind(this),this.A=this.A.bind(this),this.B=!1,this.F=!1,this.D=!1,this.H=!1,this.R=void 0,this.V=0,this.L=100,this.P=1,this.T=0}get value(){return this.R}set value(i){null!=i&&("string"==typeof i&&(i=parseFloat(i)),0!==this.K&&(i=this.q(i)),i<this.V&&(i=this.V),i>this.L&&(i=this.L),this.R=i,this.G())}connectedCallback(){this.m.addEventListener("click",this.C),this.I.addEventListener("click",this.j),this._.addEventListener("click",this.C),this.M.addEventListener("click",this.j),this.v.addEventListener("keydown",this.A),this.B=!1,!0===this.hasAttribute("arrows")&&(this.B=!0),this.F=!1,!0===this.hasAttribute("group-arrows")&&(this.F=!0),this.D=!1,!0===this.hasAttribute("vertical")&&(this.D=!0),this.H=!1,!0===this.hasAttribute("reverse")&&(this.H=!0),this.k.textContent="",this.U.textContent="",!0===this.hasAttribute("prefix")&&(this.k.textContent=this.getAttribute("prefix")),!0===this.hasAttribute("suffix")&&(this.U.textContent=this.getAttribute("suffix")),this.J(),this.N(),void 0===this.R&&(!0===this.hasAttribute("value")?this.O(this.getAttribute("value")):this.R=this.V),this.G()}disconnectedCallback(){this.m.removeEventListener("click",this.C),this.I.removeEventListener("click",this.j),this._.removeEventListener("click",this.C),this.M.removeEventListener("click",this.j),this.v.removeEventListener("keydown",this.A)}attributeChangedCallback(i,t,s){"min"!==i&&"max"!==i&&"step"!==i?("value"===i&&this.O(s),this.G()):this.J()}static get observedAttributes(){return["max","min","step","value"]}C(){!0!==this.v.hasAttribute("disabled")&&this.W(!0,0)}j(){!0!==this.v.hasAttribute("disabled")&&this.W(!1,0)}A(i){if(!0===this.v.hasAttribute("disabled"))return;let t=!1,s=!1,r=!1,e=!1;if("ArrowLeft"===i.key&&(t=!0),"ArrowRight"===i.key&&(s=!0),"ArrowUp"===i.key&&(r=!0),"ArrowDown"===i.key&&(e=!0),!0===t||!0===s||!0===r||!0===e){let o=!0;return!0!==s&&!0!==r||(o=!1),!0===this.H&&(!0===this.D?!0===this.F?!0!==t&&!0!==s||(o=!o):!0!==r&&!0!==e||(o=!o):!0===this.F?!0!==r&&!0!==e||(o=!o):!0!==t&&!0!==s||(o=!o)),this.W(o,0),i.preventDefault(),void i.stopPropagation()}if("PageUp"===i.key||"PageDown"===i.key){if(!0===this.v.hasAttribute("disabled"))return;let t=!0;"PageUp"===i.key&&(t=!1),this.W(t,1),i.preventDefault(),i.stopPropagation()}if("Home"===i.key||"End"===i.key){if(!0===this.v.hasAttribute("disabled"))return;let t=!0;"End"===i.key&&(t=!1),this.W(t,2),i.preventDefault(),i.stopPropagation()}}X(){const i=new CustomEvent("change");this.dispatchEvent(i)}J(){let i=0,t=0,s=0;if(this.V=0,this.L=100,this.P=void 0,!0===this.hasAttribute("min")){let t=this.getAttribute("min");this.V=parseFloat(t);let s=t.indexOf(".");-1!==s&&(i=t.length-s)}if(!0===this.hasAttribute("max")){let i=this.getAttribute("max");this.L=parseFloat(i);let s=i.indexOf(".");-1!==s&&(t=i.length-s)}if(!0===this.hasAttribute("step")){let i=this.getAttribute("step");this.P=parseFloat(i);let t=i.indexOf(".");-1!==t&&(s=i.length-t)}if(this.T=0,i>this.T&&(this.T=i),t>this.T&&(this.T=t),s>this.T&&(this.T=s),this.V>this.L){const i=this.V;this.V=this.L,this.L=i}this.v.setAttribute("aria-valuemin",this.V.toString()),this.v.setAttribute("aria-valuemax",this.L.toString()),!0===this.D?this.v.setAttribute("aria-orientation","vertical"):this.v.setAttribute("aria-orientation","horizontal"),this.Y=this.L-this.V,0!==this.Y?this.P?(this.Z=Math.ceil(this.Y/this.P),this.K=this.P/this.Y):(this.Z=0,this.K=0):this.K=0}N(){!1===this.B&&!1===this.F&&(this.m.innerHTML=UiInputStepper.i,this.I.innerHTML=UiInputStepper.t),!0===this.B&&(!1===this.D&&(!0===this.H?(this.m.innerHTML=UiInputStepper.u,this.I.innerHTML=UiInputStepper.o):(this.m.innerHTML=UiInputStepper.o,this.I.innerHTML=UiInputStepper.u)),!0===this.D&&(!0===this.H?(this.m.innerHTML=UiInputStepper.h,this.I.innerHTML=UiInputStepper.l):(this.m.innerHTML=UiInputStepper.l,this.I.innerHTML=UiInputStepper.h))),!0===this.F&&(!1===this.D&&(!0===this.H?(this._.innerHTML=UiInputStepper.h,this.M.innerHTML=UiInputStepper.l):(this._.innerHTML=UiInputStepper.l,this.M.innerHTML=UiInputStepper.h)),!0===this.D&&(!0===this.H?(this._.innerHTML=UiInputStepper.u,this.M.innerHTML=UiInputStepper.o):(this._.innerHTML=UiInputStepper.o,this.M.innerHTML=UiInputStepper.u)))}W(i,t){let s=0,r=this.P;if(this.P||(r=(this.L-this.V)/20),1===t){if(this.P){const i=Math.round((this.L-this.V)/10)*this.P;r=i<2*this.P?2*this.P:i}this.P||(r=(this.L-this.V)/10)}let e=this.R;!0===i&&(s=e-r),!1===i&&(s=e+r),2===t&&(!0===i&&(s=this.V),!1===i&&(s=this.L)),s<this.V&&(s=this.V),s>this.L&&(s=this.L),s!==this.R&&(this.R=s,this.G(),this.X())}O(i){this.H=!1,!0===this.hasAttribute("reverse")&&(this.H=!0),i?(this.R=parseFloat(i),0!==this.K&&(this.R=this.q(this.R)),this.R<this.V&&(this.R=this.V),this.R>this.L&&(this.R=this.L)):this.R=this.V}q(i){let t=(i-this.V)/this.Y;return t=Math.round(t/this.K)*this.K,t*this.Y+this.V}G(){this.S.textContent=this.R.toFixed(this.T),this.p.setFormValue(this.R.toFixed(this.T)),this.v.setAttribute("aria-valuenow",this.R),this.v.setAttribute("aria-valuetext",this.R.toFixed(this.T))}formDisabledCallback(i){this.v.tabIndex=!0===i?-1:0,!0===i?this.v.setAttribute("disabled",""):this.v.removeAttribute("disabled"),this.G()}formStateRestoreCallback(i){this.O(i),this.G(),this.p.setFormValue(this.R)}formResetCallback(){this.R=this.V,this.p.setFormValue(this.R),this.G()}}UiInputStepper.uiCss=" :host{display:inline-block;box-shadow:var(--ui-input-box-shadow, var(--ui-border-box-shadow, none));}.base{display:inline-grid;direction:ltr;user-select:none;-webkit-user-select:none;--ui-is-size:calc(var(--ui-input-font-size, var(--ui-font-size-normal, 16px)));--ui-is-bs:calc(var(--ui-is-size) * 1.75);--ui-is-bg:var(--ui-input-stepper-button-background, var(--ui-default-background, hsl(0 0% 90% / 1)));--ui-is-fg:var(--ui-input-stepper-button-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));border-radius:var(--ui-input-border-radius, var(--ui-border-radius-normal, 4px));border-style:var(--ui-input-border-style, var(--ui-border-style, solid));border-width:var(--ui-input-border-width, 2px);border-color:var(--ui-input-border-color, var(--ui-midground, hsl(0 0% 90% / 1)));box-shadow:none;background-color:var(--ui-input-background, field);color:var(--ui-input-foreground, fieldText);box-sizing:border-box;transition:border-color var(--ui-animation-duration-default, 200ms) ease-in-out, box-shadow var(--ui-animation-duration-default, 200ms) ease-in-out;-webkit-tap-highlight-color:transparent;}:host([valid]) .base:not([disabled]){border-color:var(--ui-input-border-valid-color, hsl(120 80% 50% / 1));--ui-icon-primary-color:var(--ui-input-icon-valid-color, hsl(120 80% 50% / 1));}:host([invalid]) .base:not([disabled]){border-color:var(--ui-input-border-invalid-color, hsl(0 80% 50% / 1));--ui-icon-primary-color:var(--ui-input-icon-invalid-color, hsl(0 80% 50% / 1));}.base:not([disabled]):focus, .base:not([disabled]):focus-visible, .base:not([disabled]):focus-within{outline-style:var(--ui-input-outline-style, none);outline-width:var(--ui-input-outline-width, 0);outline-offset:var(--ui-input-outline-offset, 0);outline-color:var(--ui-input-outline-color, transparent);border-width:var(--ui-input-focus-width, 2px);border-color:var(--ui-input-focus-color, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));box-shadow:inset 0 0 0 var(--ui-input-focus-shadow-width, 4px) var(--ui-input-focus-shadow-color, var(--ui-selected-background, hsl(215 50% 90% / 1)));}:host([valid]) .base:not([disabled]):focus-within{outline-color:var(--ui-input-outline-valid-color, transparent);border-width:var(--ui-input-focus-width, 2px);border-color:var(--ui-input-focus-valid-color, hsl(120 80% 50% / 1));box-shadow:inset 0 0 0 var(--ui-input-focus-shadow-width, 4px) var(--ui-input-focus-valid-shadow-color, hsl(120 50% 80% / 1));}:host([invalid]) .base:not([disabled]):focus-within{outline-color:var(--ui-input-outline-invalid-color, transparent);border-width:var(--ui-input-focus-width, 2px);border-color:var(--ui-input-focus-invalid-color, hsl(0 80% 50% / 1));box-shadow:inset 0 0 0 var(--ui-input-focus-shadow-width, 4px) var(--ui-input-focus-invalid-shadow-color, hsl(0 50% 80% / 1));}.base[disabled]{background-color:var( --ui-input-disabled-background, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 75%, var(--ui-background, hsl(0 0% 97% / 1)) 25% ) );color:var( --ui-input-disabled-foreground, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 25%, var(--ui-background, hsl(0 0% 97% / 1)) 75% ) );--ui-is-fg:var( --ui-input-disabled-foreground, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 25%, var(--ui-background, hsl(0 0% 97% / 1)) 75% ) );cursor:not-allowed;}.value{display:grid;align-items:center;justify-items:center;padding:var(--ui-input-padding, 8px 8px);}.value > div{display:flex;gap:var(--ui-input-stepper-value-gap, 4px);}.prefix, .suffix{color:var(--ui-input-stepper-value-color, var(--ui-default-foreground, hsl(0 0% 30% / 1)));}.prefix, .number, .suffix{font-family:inherit;font-size:var(--ui-input-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-input-font-weight, var(--ui-font-weight-normal, normal));line-height:150%;background-color:transparent;}svg{fill:none;stroke:var(--ui-is-fg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;height:60%;height:round(60%, 2px);}:host([vertical][arrows]) svg{height:40%;height:round(40%, 2px);}:host([vertical][group-arrows]){& .base{grid-template-columns:1fr;grid-template-rows:[value] 1fr [group-arrows] auto;}&:host([switch]){& .base{grid-template-rows:[group-arrows] auto [value] 1fr;}} & .minus-parent, .plus-parent{display:none;}& .value{grid-column:1;grid-row:value;min-width:calc(var(--ui-is-size) * 1.75);}& .group-arrows{grid-column:1;grid-row:group-arrows;display:grid;grid-template-columns:[minus] 1fr [plus] 1fr;padding:var(--ui-input-stepper-button-gap, 6px);}&:host([reverse]){& .group-arrows{grid-template-columns:[plus] 1fr [minus] 1fr;}} & .group-arrows-minus{grid-column:minus;grid-row:1;}& .group-arrows-plus{grid-column:plus;grid-row:1;}& .group-arrows-minus, .group-arrows-plus{display:grid;justify-self:center;justify-items:center;align-items:center;height:var(--ui-is-bs);width:calc(var(--ui-is-size) * 1.75 * 0.5);border-radius:3px;}} :host([vertical]:not([group-arrows])){& .base{grid-template-columns:1fr;grid-template-rows:[plus] auto [value] 1fr [minus] auto;}&:host([reverse]){& .base{grid-template-rows:[minus] auto [value] 1fr [plus] auto;}} & .minus-parent{grid-column:1;grid-row:minus;}& .value{grid-column:1;grid-row:value;min-width:calc(var(--ui-is-size) * 1.75);}& .plus-parent{grid-column:1;grid-row:plus;}.minus-parent, .plus-parent{padding:var(--ui-input-stepper-button-gap, 6px);}& .minus, .plus{display:grid;justify-items:center;align-items:center;height:100%;width:100%;aspect-ratio:1 / 1;border-radius:3px;}& .group-arrows{display:none;}} :host(:not([vertical])[group-arrows]){& .base{grid-template-columns:[value] 1fr [group-arrows] auto;grid-template-rows:1fr;}&:host([switch]){& .base{grid-template-columns:[group-arrows] auto [value] 1fr;}} & .minus-parent, .plus-parent{display:none;}& .value{grid-column:value;grid-row:1;min-width:calc(var(--ui-is-size) * 2);}& .group-arrows{grid-column:group-arrows;grid-row:1;display:grid;grid-template-rows:[plus] 1fr [minus] 1fr;padding:var(--ui-input-stepper-button-gap, 6px);}&:host([reverse]){& .group-arrows{grid-template-rows:[minus] 1fr [plus] 1fr;}} & .group-arrows-minus{grid-column:1;grid-row:minus;}& .group-arrows-plus{grid-column:1;grid-row:plus;}& .group-arrows-minus, .group-arrows-plus{display:grid;justify-items:center;align-items:center;height:calc(var(--ui-is-size) * 1.75 * 0.5);width:var(--ui-is-bs);border-radius:3px;}} :host(:not([vertical]):not([group-arrows])){& .base{grid-template-columns:[minus] auto [value] 1fr [plus] auto;grid-template-rows:1fr;}&:host([reverse]){& .base{grid-template-columns:[plus] auto [value] 1fr [minus] auto;}} & .minus-parent{grid-column:minus;grid-row:1;}& .value{grid-column:value;grid-row:1;min-width:calc(var(--ui-is-size) * 2);}& .plus-parent{grid-column:plus;grid-row:1;}.minus-parent, .plus-parent{padding:var(--ui-input-stepper-button-gap, 6px);}& .minus, .plus{display:grid;justify-items:center;align-items:center;height:var(--ui-is-bs);width:var(--ui-is-bs);border-radius:3px;}& .group-arrows{display:none;}} .base:not([disabled]){& .minus:hover, .plus:hover, .group-arrows-minus:hover, .group-arrows-plus:hover{background-color:var(--ui-is-bg);cursor:pointer;}& .minus:active, .plus:active, .group-arrows-minus:active, .group-arrows-plus:active{filter:brightness(65%);}} @media (forced-colors:active) or (prefers-contrast:more){.base{border-style:solid;border-color:fieldtext;box-shadow:none;transition:none;}:host(:not([disabled])) .base:focus, :host(:not([disabled])) .base:focus-visible, :host(:not([disabled])) .base:focus-within, :host([open]) .base{box-shadow:none;outline:3px solid fieldtext;outline-offset:2px;}} @media (prefers-reduced-motion){.base{transition:none;}} ",UiInputStepper.uiHtml='<div class="base" role="slider" tabindex="0"><div class="minus-parent" aria-hidden="true"><div class="minus"></div></div><div class="value" aria-hidden="true"><div><div class="prefix"></div><div class="number"></div><div class="suffix"></div></div></div><div class="plus-parent" aria-hidden="true"><div class="plus"></div></div><div class="group-arrows" aria-hidden="true"><div class="group-arrows-plus"></div><div class="group-arrows-minus"></div></div></div>',i.createUi(UiInputStepper,"ui-input-stepper",import.meta.url);