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
 * @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: '141eab695d67c1561ac6175c30596833b96ad384', tabIndex: -1, class: {
                invalid: this.invalid,
            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: 'd82f31bec7730301ba43b380e034de632c391bda' }, 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"
            }
        };
    }
}
