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: '3071dff00262f73ae8555fac09dedccad474b7fb', class: "limel-notched-outline" }, h("slot", { key: '15f3ecd4b18c36c310b62d4670aa81bdff90c99e', name: "content" }), h("span", { key: 'c7b02545a82d0f995bb86d489392d38c36f770e2', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: 'f03ae4002a01844989af7d2ad19252f3113d2155', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: '6e15221fe2d1c6fafb0d8109c6031d8302447762', 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"
            }
        };
    }
}
