@limetech/lime-elements
Version:
222 lines (221 loc) • 7.29 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() {
this.required = false;
this.readonly = false;
this.invalid = false;
this.disabled = false;
this.label = undefined;
this.labelId = undefined;
this.hasValue = false;
this.hasLeadingIcon = false;
this.hasFloatingLabel = false;
}
render() {
return (h("div", { class: "limel-notched-outline" }, h("slot", { name: "content" }), h("span", { class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { 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."
},
"attribute": "required",
"reflect": true,
"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."
},
"attribute": "readonly",
"reflect": true,
"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."
},
"attribute": "invalid",
"reflect": true,
"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."
},
"attribute": "disabled",
"reflect": true,
"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:::"
},
"attribute": "label",
"reflect": true
},
"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."
},
"attribute": "label-id",
"reflect": true
},
"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."
},
"attribute": "has-value",
"reflect": true,
"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."
},
"attribute": "has-leading-icon",
"reflect": true,
"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."
},
"attribute": "has-floating-label",
"reflect": true,
"defaultValue": "false"
}
};
}
}
//# sourceMappingURL=notched-outline.js.map