@coderundebug/ui-web/ui-checkbox.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 e}from"./ui-tools.js";export class UiCheckbox extends HTMLElement{static get formAssociated(){return!0}constructor(){super(),this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.innerHTML=UiCheckbox.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiCheckbox.uiCssStyleSheet],this.i=this.attachInternals(),this.t=this.shadowRoot.querySelector(".base"),this.o=this.shadowRoot.querySelector("input"),this.h=this.h.bind(this),this.l=this.l.bind(this),this.u=this.u.bind(this)}get value(){return this.o.value}set value(e){this.o.value=e||""}get checked(){return this.o.checked}set checked(e){if(this.o.checked===e)return;this.o.checked=e;const i=new Event("change");this.dispatchEvent(i)}get indeterminate(){return this.o.indeterminate}set indeterminate(e){if(this.o.indeterminate===e)return;this.o.indeterminate=e;const i=new Event("change");this.dispatchEvent(i)}connectedCallback(){this.t.addEventListener("click",this.h),this.o.addEventListener("click",this.l),this.o.addEventListener("change",this.u)}disconnectedCallback(){this.t.removeEventListener("click",this.h),this.o.removeEventListener("click",this.l),this.o.removeEventListener("change",this.u)}attributeChangedCallback(e,i,t){this.o.setAttribute(e,t)}static get observedAttributes(){return["checked","value"]}l(e){e.stopPropagation()}h(){if(!0===this.t.hasAttribute("disabled"))return;this.o.checked=!this.o.checked;const e=new Event("change");this.dispatchEvent(e)}u(){this.i.setFormValue(this.o.value);const e=new Event("change");this.dispatchEvent(e)}formDisabledCallback(e){!0===e?(this.o.setAttribute("disabled",""),this.t.setAttribute("disabled","")):(this.o.removeAttribute("disabled"),this.t.removeAttribute("disabled"))}formStateRestoreCallback(e){this.o.value=e,this.i.setFormValue(e)}formResetCallback(){this.o.checked=!1,this.i.setFormValue(void 0)}}UiCheckbox.uiCss=" .base{display:flex;align-items:center;gap:var(--ui-checkbox-gap, 8px);}.input-checkbox{display:inline-flex;height:var(--ui-checkbox-size, 16px);width:var(--ui-checkbox-size, 16px);padding:var(--ui-checkbox-padding, 3px);border-radius:var(--ui-checkbox-focus-radius, var(--ui-border-radius-normal, 4px));border-style:var(--ui-checkbox-focus-style, var(--ui-border-style, solid));border-width:var(--ui-checkbox-focus-width, 2px);border-color:transparent;background-color:transparent;transition:border-color var(--ui-animation-duration-default, 200ms) ease-in-out;}.input-checkbox:focus-within{border-color:var(--ui-checkbox-focus-color, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}input{accent-color:var(--ui-checkbox-accent-color, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));height:var(--ui-checkbox-size, 16px);width:var(--ui-checkbox-size, 16px);padding:0;margin:0;outline:none;}label{font-family:inherit;font-size:var(--ui-checkbox-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-checkbox-font-weight, var(--ui-font-weight-normal, normal));color:var(--ui-checkbox-label-foreground, var(--ui-foreground, hsl(0 0% 18% / 1)));}.base[disabled] label{color:var( --ui-checkbox-label-disabled-foreground, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 75%, var(--ui-background, hsl(0 0% 97% / 1)) 25% ) );cursor:not-allowed;}@media (forced-colors:active) or (prefers-contrast:more){.input-checkbox{border:none;}} @media (prefers-reduced-motion){.input-checkbox{transition:none;}} ",UiCheckbox.uiHtml='<div class="base"><div class="input-checkbox"><input type="checkbox"></div><label><slot></slot></label></div>',e.createUi(UiCheckbox,"ui-checkbox",import.meta.url);