@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
173 lines (172 loc) • 6.49 kB
JavaScript
import { h, Host } from "@stencil/core";
import { inheritAriaAttributes } from "../utils";
/**
* A customizable input label component.
*
* The component supports a `<slot>` for injecting additional custom content inside the label, such as icons or formatted text
*/
export class ModusWcInputLabel {
constructor() {
this.inheritedAttributes = {};
/** Additional classes for custom styling. */
this.customClass = '';
/** Whether the label indicates a required field. */
this.required = false;
/** The size of the label. */
this.size = 'md';
this.getClasses = () => {
const classList = ['modus-wc-input-label'];
// The order CSS classes are added matters to CSS specificity
if (this.size)
classList.push(`modus-wc-input-label-size-${this.size}`);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
};
}
componentWillLoad() {
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
render() {
return (h(Host, { key: '62b2bb840ab521f43598060ed9d3a419c52c862e', class: "modus-wc-input-label-host" }, h("label", Object.assign({ key: '792891bba9eafad34ca5eb8eeba4398ae03acd2b', class: this.getClasses(), htmlFor: this.forId }, this.inheritedAttributes), this.labelText, this.required && (h("span", { key: '6bec08b26f903eaeada8ae9630777b735f38af24', "aria-hidden": "true", class: "required-indicator" }, '\u00A0*')), this.subLabelText && (h("div", { key: '2869fbd51cf41a1545be648ae99b37f19b44ef54', class: "modus-wc-input-label-sublabel" }, this.subLabelText)), h("slot", { key: 'bff8002fc67310c3ee3c8ef781699d9f9ea3f4fb' }))));
}
static get is() { return "modus-wc-input-label"; }
static get originalStyleUrls() {
return {
"$": ["modus-wc-input-label.scss"]
};
}
static get styleUrls() {
return {
"$": ["modus-wc-input-label.css"]
};
}
static get properties() {
return {
"forId": {
"type": "string",
"attribute": "for-id",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The `for` attribute of the label, matching the `id` of the associated input."
},
"getter": false,
"setter": false,
"reflect": false
},
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Additional classes for custom styling."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"labelText": {
"type": "string",
"attribute": "label-text",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The text to display within the label."
},
"getter": false,
"setter": false,
"reflect": false
},
"required": {
"type": "boolean",
"attribute": "required",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Whether the label indicates a required field."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"size": {
"type": "string",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "ModusSize",
"resolved": "\"lg\" | \"md\" | \"sm\" | undefined",
"references": {
"ModusSize": {
"location": "import",
"path": "../types",
"id": "src/components/types.ts::ModusSize"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The size of the label."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'md'"
},
"subLabelText": {
"type": "string",
"attribute": "sub-label-text",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The text rendered beneath the label."
},
"getter": false,
"setter": false,
"reflect": false
}
};
}
static get elementRef() { return "el"; }
}