@coderundebug/ui-web/ui-radio.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 UiRadio extends HTMLElement{static get formAssociated(){return!0}constructor(){super(),this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.innerHTML=UiRadio.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiRadio.uiCssStyleSheet],this.i=this.attachInternals(),this.t=this.shadowRoot.querySelector(".base"),this.o=this.shadowRoot.querySelector("input"),this.l=this.l.bind(this),this.h=this.h.bind(this),this.u=this.u.bind(this)}get value(){return this.o.value}set value(i){this.o.value=i||""}get checked(){return this.o.checked}set checked(i){if(this.o.checked===i)return;this.o.checked=i,this.i.setFormValue(i),!0===this.o.checked&&this.v();const t=new Event("change",{bubbles:!0,composed:!0});this.dispatchEvent(t)}connectedCallback(){this.t.addEventListener("click",this.l),this.o.addEventListener("click",this.h),this.o.addEventListener("change",this.u)}disconnectedCallback(){this.t.removeEventListener("click",this.l),this.o.removeEventListener("click",this.h),this.o.removeEventListener("change",this.u)}attributeChangedCallback(i,t,e){this.o.setAttribute(i,e)}static get observedAttributes(){return["checked","value"]}h(i){i.stopPropagation()}l(){this.o.click()}u(){this.i.setFormValue(this.o.value),!0===this.o.checked&&this.v();const i=new Event("change",{bubbles:!0,composed:!0});this.dispatchEvent(i)}v(){if(!1===this.hasAttribute("name"))return;let i=this.getAttribute("name");if(!i)return;i='[name="'+i+'"]';let t=!0,e=this;for(;e;){if(!0===t&&e.querySelectorAll){const t=e.querySelectorAll(i);if(t.forEach((i=>{i!==this&&"boolean"==typeof i.checked&&(i.checked=!1)})),t.length>1)return}if(e.assignedSlot)e=e.assignedSlot,t=!1;else if(e.parentElement)e=e.parentElement,t=!0;else if(e.parentNode)e=e.parentNode,t=!1;else{if(!e.host)break;e=e.host,t=!0}}}formDisabledCallback(i){!0===i?(this.o.setAttribute("disabled",""),this.t.setAttribute("disabled","")):(this.o.removeAttribute("disabled"),this.t.removeAttribute("disabled"))}formStateRestoreCallback(i){this.o.value===i?this.o.checked=!0:this.o.checked=!1,this.i.setFormValue(i)}formResetCallback(){this.o.checked=!1,this.i.setFormValue(void 0)}}UiRadio.uiCss=" .base{display:flex;align-items:center;gap:var(--ui-radio-gap, 8px);}.outer-radio{padding:var(--ui-radio-padding, 2px);}.input-radio{display:inline-flex;height:var(--ui-radio-size, 16px);width:var(--ui-radio-size, 16px);padding:var(--ui-radio-focus-width, 3px);border-radius:10rem;border:none;background-color:transparent;transition:background-color var(--ui-animation-duration-default, 200ms) ease-in-out;}.input-radio:focus-within{background-color:var(--ui-radio-focus-color, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}input{accent-color:var(--ui-radio-accent-color, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));height:var(--ui-radio-size, 16px);width:var(--ui-radio-size, 16px);padding:0;margin:0;outline:none;}label{font-family:inherit;font-size:var(--ui-radio-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-radio-font-weight, var(--ui-font-weight-normal, normal));color:var(--ui-radio-label-foreground, var(--ui-foreground, hsl(0 0% 18% / 1)));}.base[disabled] label{color:var( --ui-radio-label-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;}@media (forced-colors:active) or (prefers-contrast:more) {}@media (prefers-reduced-motion) {}",UiRadio.uiHtml='<div id="base" class="base"><div class="outer-radio"><div class="input-radio"><input type="radio"></div></div><label><slot></slot></label></div>',i.createUi(UiRadio,"ui-radio",import.meta.url);