@limetech/lime-elements
Version:
166 lines (165 loc) • 6.15 kB
JavaScript
import { Host, h } from "@stencil/core";
/**
* This is an internal and private component that many input fields
* use to display a helper text, along with a character counter below the
* input field.
*
* We created this to keep the visual styles the same everywhere
* and to avoid importing styles separately.
*
* Also this enables us to open the helper line in limel-portal,
* more easily without having to send the styles to the portal.
*
* @exampleComponent limel-example-helper-line-basic
* @exampleComponent limel-example-helper-line-invalid
* @exampleComponent limel-example-helper-line-long-text
* @exampleComponent limel-example-helper-line-long-text-no-counter
* @exampleComponent limel-example-helper-line-character-counter
* @exampleComponent limel-example-helper-line-empty
* @exampleComponent limel-example-helper-line-animation
* @private
*/
export class HelperLine {
constructor() {
/**
* Turns `true`, when the parent component is invalid.
* For example, when the parent component is `required` but is left empty.
* Or when the input format is invalid.
*/
this.invalid = false;
this.hasContent = () => {
return !!(this.maxLength > 0 ||
(this.helperText && this.helperText.length > 0));
};
this.renderHelperText = () => {
if (!this.helperText) {
return;
}
return (h("span", { class: "helper-text", id: this.helperTextId }, this.helperText));
};
this.renderCharacterCounter = () => {
const counter = `${this.length} / ${this.maxLength}`;
if (!this.maxLength) {
return;
}
return h("span", { class: "counter" }, counter);
};
}
render() {
return (h(Host, { key: '8ef6eb3b3e372e5dc61af1424a88c1c342023d13', tabIndex: -1, class: {
invalid: this.invalid,
}, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '3b4e31c23f5964aabb67556e68bd1785c871d934' }, this.renderHelperText(), this.renderCharacterCounter())));
}
static get is() { return "limel-helper-line"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["helper-line.scss"]
};
}
static get styleUrls() {
return {
"$": ["helper-line.css"]
};
}
static get properties() {
return {
"helperText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The helper text that is displayed on the left side."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "helper-text"
},
"length": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Length of the current input value, coming from the parent component.\nUsed in the character counter section on the right side."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "length"
},
"maxLength": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Maximum length of the characters, defined on the parent component.\nUsed in the character counter section on the right side."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "max-length"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Turns `true`, when the parent component is invalid.\nFor example, when the parent component is `required` but is left empty.\nOr when the input format is invalid."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "invalid",
"defaultValue": "false"
},
"helperTextId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Used by `aria-controls` and `aria-describedby` in the parent component."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "helper-text-id"
}
};
}
}