@limetech/lime-elements
Version:
270 lines (269 loc) • 11 kB
JavaScript
import { h } from "@stencil/core";
/**
* This is a private component, used to render a notched outline
* around all input elements that can have a floating label.
* Inspired by Material Design's styles for input fields.
* We use it in various components to unify styles and avoid
* repeating code.
*
* :::note
* The component has `shadow: false`. This is to improve performance,
* and ensure that its internal elements are considered as internal parts
* of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
* would be correctly associated with the input element's `id`, in the consumer component.
* :::
* @exampleComponent limel-example-notched-outline-basic
* @private
*/
export class NotchedOutline {
constructor() {
/**
* Set to `true` when the input element is required.
* This applies proper visual styles, such as inclusion of an asterisk
* beside the label.
*/
this.required = false;
/**
* Set to `true` when the input element is readonly.
* This applies proper visual styles, such as making the outline transparent.
*/
this.readonly = false;
/**
* Set to `true` to indicate that the current value of the input element is
* invalid. This applies proper visual styles, such as making the outlines red.
*/
this.invalid = false;
/**
* Set to `true` to indicate that the input element is
* disabled. This applies proper visual styles, such as making the outlines
* and the label transparent.
*/
this.disabled = false;
/**
* Set to `true` when the user has entered a value for the input element,
* shrinking the label in size, and visually rendering it above the entered value.
*/
this.hasValue = false;
/**
* Set to `true` when the consumer element displays a leading icon.
* This applies proper visual styles, such as rendering the label
* correctly placed beside the leading icon.
*/
this.hasLeadingIcon = false;
/**
* Set to `true` when the consumer element needs to render the
* label above the input element, despite existence of a `value`.
* For example in the `text-editor` or `limel-select`,
* where the default layout requires a floating label.
*/
this.hasFloatingLabel = false;
}
render() {
return (h("div", { key: '5dd66f7356821043d750963f18ef8f39889e65cc', class: "limel-notched-outline" }, h("slot", { key: '1b2072f7acd112137188b570229470677458ace7', name: "content" }), h("span", { key: '3d1d04a75ff0459b53294a2b2bbb4f15192409cd', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '9677d3b3bc1f37e954c3ab2907e98db8b9122466', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: '62a494be847b2181cdd00f20e50cffbbc121bfd2', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
}
renderLabel() {
if (!this.label) {
return;
}
return (h("span", { class: "limel-notched-outline--notch" }, h("label", { htmlFor: this.labelId }, this.label)));
}
renderEmptyReadonlyValue() {
if (!this.readonly || this.hasValue) {
return;
}
return (h("span", { class: "limel-notched-outline--empty-readonly-value", "aria-hidden": "true" }, "\u2013"));
}
static get is() { return "limel-notched-outline"; }
static get originalStyleUrls() {
return {
"$": ["notched-outline.scss"]
};
}
static get styleUrls() {
return {
"$": ["notched-outline.css"]
};
}
static get properties() {
return {
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` when the input element is required.\nThis applies proper visual styles, such as inclusion of an asterisk\nbeside the label."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "required",
"defaultValue": "false"
},
"readonly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` when the input element is readonly.\nThis applies proper visual styles, such as making the outline transparent."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "readonly",
"defaultValue": "false"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to indicate that the current value of the input element is\ninvalid. This applies proper visual styles, such as making the outlines red."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "invalid",
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to indicate that the input element is\ndisabled. This applies proper visual styles, such as making the outlines\nand the label transparent."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "disabled",
"defaultValue": "false"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Label to display for the input element.\n:::important\nNote that the input element of the consumer component will be\nlabeled by this label, using the `labelId` prop.\n:::"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "label"
},
"labelId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The `id` of the input element which should be\nlabeled by the provided label."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "label-id"
},
"hasValue": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` when the user has entered a value for the input element,\nshrinking the label in size, and visually rendering it above the entered value."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "has-value",
"defaultValue": "false"
},
"hasLeadingIcon": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` when the consumer element displays a leading icon.\nThis applies proper visual styles, such as rendering the label\ncorrectly placed beside the leading icon."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "has-leading-icon",
"defaultValue": "false"
},
"hasFloatingLabel": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` when the consumer element needs to render the\nlabel above the input element, despite existence of a `value`.\nFor example in the `text-editor` or `limel-select`,\nwhere the default layout requires a floating label."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "has-floating-label",
"defaultValue": "false"
}
};
}
}