import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { o as onComponentRequiredPropUndefined, x as getInputHelperTextID } from './helpers.js';
import { d as defineCustomElement$1 } from './ic-typography2.js';

const icInputLabelCss = "ic-input-label{margin-bottom:var(--ic-space-xs);--ic-typography-color:var(\n    --ic-input-label-text-color,\n    var(--ic-color-text-primary)\n  )}ic-input-label.with-helper{margin-bottom:var(--ic-space-xxxs)}ic-input-label.ic-input-label-readonly{--ic-typography-color:var(--ic-input-label-readonly-typography-color)}ic-input-label .helpertext{margin-top:var(--ic-space-xxxs);padding-bottom:var(--ic-input-label-helpertext-padding, 0);--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-normal{--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-readonly{--ic-typography-color:var(--ic-input-label-readonly-helpertext-color)}ic-input-label .readonly-label{--ic-typography-color:var(--ic-input-label-readonly-label-color)}ic-input-label .error-label{--ic-typography-color:var(--ic-input-label-error-label-color)}";
const IcInputLabelStyle0 = icInputLabelCss;

const InputLabel = /*@__PURE__*/ proxyCustomElement(class InputLabel extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        /**
         * If `true`, the disabled state will be set.
         */
        this.disabled = false;
        /**
         * The helper text that will be displayed.
         */
        this.helperText = "";
        /**
         * The label will be visually hidden.
         */
        this.hideLabel = false;
        /**
         * If `true`, the readonly state will be set.
         */
        this.readonly = false;
        /**
         * If `true`, the input label will require a value.
         */
        this.required = false;
        /**
         * The status of the label - e.g. 'error'.
         */
        this.status = "";
        /**
         * @internal If `true`, wraps label text in label tag
         */
        this.useLabelTag = true;
    }
    componentDidLoad() {
        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Input Label");
    }
    render() {
        const { disabled, readonly, label, required, helperText, status, hideLabel, useLabelTag, } = this;
        const labelText = required ? label + " *" : label;
        return (h(Host, { key: '324edfe4443673e3c50afaf6abe1507dddf8c5a1', class: {
                "ic-input-label-disabled": !!disabled,
                "ic-input-label-readonly": readonly,
                "with-helper": helperText !== "",
            } }, !hideLabel && (h("ic-typography", { key: 'cc4776d1421cf7b93ff5bb5c0b148c82d9c42ef4', variant: "label", class: {
                "readonly-label": readonly,
                "error-label": status === "error" && !(readonly || disabled),
            } }, readonly || !useLabelTag ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText)))), helperText !== "" && (h("ic-typography", { key: '8ccf12c8a4430108018f4ce1097359dbd23baefe', variant: "caption", class: {
                helpertext: true,
                "helpertext-normal": !disabled && !readonly,
                "helpertext-readonly": readonly,
            } }, h("span", { key: 'e6a63927e7da03f64b50f5b65be1eb63410f8dab', id: this.for && getInputHelperTextID(this.for) }, helperText)))));
    }
    static get style() { return IcInputLabelStyle0; }
}, [0, "ic-input-label", {
        "disabled": [4],
        "for": [1],
        "helperText": [1, "helper-text"],
        "hideLabel": [4, "hide-label"],
        "label": [1],
        "readonly": [4],
        "required": [4],
        "status": [1],
        "useLabelTag": [4, "use-label-tag"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ic-input-label", "ic-typography"];
    components.forEach(tagName => { switch (tagName) {
        case "ic-input-label":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, InputLabel);
            }
            break;
        case "ic-typography":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { InputLabel as I, defineCustomElement as d };

//# sourceMappingURL=ic-input-label2.js.map