@coderundebug/ui-web/ui-label.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";class i extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=i.uiHtml,this.shadowRoot.adoptedStyleSheets=[i.uiCssStyleSheet],this.i=this.shadowRoot.querySelector("label"),this.l=this.l.bind(this)}connectedCallback(){this.i.addEventListener("click",this.l)}disconnectedCallback(){this.i.removeEventListener("click",this.l)}l(){const e=this.t();e&&(e.focus(),e.showPicker&&e.showPicker(),"boolean"==typeof e.checked&&(e.checked=!e.checked))}t(){if(!1===this.hasAttribute("for"))return;let e=this.getAttribute("for");if(!e)return;e="#"+e;let i=!0,l=this;for(;l;){if(!0===i&&l.querySelector){const i=l.querySelector(e);if(i)return i}if(l.assignedSlot)l=l.assignedSlot,i=!1;else if(l.parentElement)l=l.parentElement,i=!0;else if(l.parentNode)l=l.parentNode,i=!1;else{if(!l.host)break;l=l.host,i=!0}}}}i.uiCss=" :host{display:inline-block;}label{display:inline-block;font-family:inherit;font-size:var(--ui-label-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-label-font-weight, var(--ui-font-weight-bold, 600));color:var(--ui-label-foreground, var(--ui-foreground, hsl(0 0% 18% / 1)));padding:var(--ui-label-padding, 8px 4px);}.required{display:none;}:host([required]) .required{display:inline-block;user-select:none;-webkit-user-select:none;color:var(--ui-label-required-color, hsl(0 80% 50% / 1));font-size:var(--ui-label-required-font-size, var(--ui-font-size-large, 24px));line-height:50%;padding:var(--ui-label-required-padding, 0 4px);}",i.uiHtml='<label><slot></slot><span class="required">*</span></label>',e.createUi(i,"ui-label",import.meta.url);