UNPKG

@trimble-oss/moduswebcomponents

Version:

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

1 lines 2.79 kB
import{r as s,h as e,e as t,g as l}from"./p-C1-Dpkp7.js";import{h as o}from"./p-tWS3Egrk.js";import{i}from"./p-DJ2rBB6r.js";const a=class{constructor(e){s(this,e),this.inheritedAttributes={},this.customClass="",this.required=!1,this.size="md",this.getClasses=()=>{const s=["modus-wc-input-label"];return this.size&&s.push(`modus-wc-input-label-size-${this.size}`),this.customClass&&s.push(this.customClass),s.join(" ")}}componentWillLoad(){o(this.el),this.inheritedAttributes=i(this.el)}render(){return e(t,{key:"a605e23fc81d86b963f7e3fa36f8b69adcff9065",class:"modus-wc-input-label-host"},e("label",Object.assign({key:"8cf73f3be6c782b8e19c35e9036ac4a4ee72301a",class:this.getClasses(),htmlFor:this.forId},this.inheritedAttributes),this.labelText,this.required&&e("span",{key:"af1eb301512856ac485f6b8031269e337651188a","aria-hidden":"true",class:"required-indicator"}," *"),this.subLabelText&&e("div",{key:"414b1c2706ca0e8543c259ed9bff0a91b112c554",class:"modus-wc-input-label-sublabel"},this.subLabelText),e("slot",{key:"7e4bad51e82106e94c0e99d5e06e45dca882b91e"})))}get el(){return l(this)}};a.style="modus-wc-input-label.modus-wc-input-label-host{align-items:center;display:flex}modus-wc-input-label .modus-wc-input-label{font-weight:var(--modus-wc-font-weight-bold)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-sm{font-size:var(--modus-wc-font-size-xs)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-sm .modus-wc-input-label-sublabel{font-size:var(--modus-wc-font-size-2xs)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-md{font-size:var(--modus-wc-font-size-sm)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-md .modus-wc-input-label-sublabel{font-size:var(--modus-wc-font-size-xs)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-lg{font-size:var(--modus-wc-font-size-md)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-lg .modus-wc-input-label-sublabel{font-size:var(--modus-wc-font-size-sm)}modus-wc-input-label .modus-wc-input-label .required-indicator{color:var(--modus-wc-color-error)}[data-theme=modus-classic-light] modus-wc-input-label .modus-wc-input-label{color:var(--modus-wc-color-gray-8)}[data-theme=modus-classic-dark] modus-wc-input-label .modus-wc-input-label{color:var(--modus-wc-color-gray-2)}[data-theme=connect-light] modus-wc-input-label .modus-wc-input-label{color:oklch(var(--s));font-weight:var(--modus-wc-font-weight-normal);margin-bottom:0;min-height:var(--modus-wc-line-height-md)}[data-theme=connect-dark] modus-wc-input-label .modus-wc-input-label{color:var(--modus-wc-color-white);font-weight:var(--modus-wc-font-weight-normal);margin-bottom:0;min-height:var(--modus-wc-line-height-md)}";export{a as modus_wc_input_label}