'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-d337cd8a.js');
const helpers = require('./helpers-fc4016d2.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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * 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() {
        helpers.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 (index.h(index.Host, { key: '324edfe4443673e3c50afaf6abe1507dddf8c5a1', class: {
                "ic-input-label-disabled": !!disabled,
                "ic-input-label-readonly": readonly,
                "with-helper": helperText !== "",
            } }, !hideLabel && (index.h("ic-typography", { key: 'cc4776d1421cf7b93ff5bb5c0b148c82d9c42ef4', variant: "label", class: {
                "readonly-label": readonly,
                "error-label": status === "error" && !(readonly || disabled),
            } }, readonly || !useLabelTag ? (`${labelText}`) : (index.h("label", { htmlFor: this.for }, labelText)))), helperText !== "" && (index.h("ic-typography", { key: '8ccf12c8a4430108018f4ce1097359dbd23baefe', variant: "caption", class: {
                helpertext: true,
                "helpertext-normal": !disabled && !readonly,
                "helpertext-readonly": readonly,
            } }, index.h("span", { key: 'e6a63927e7da03f64b50f5b65be1eb63410f8dab', id: this.for && helpers.getInputHelperTextID(this.for) }, helperText)))));
    }
};
InputLabel.style = IcInputLabelStyle0;

const icInputValidationCss = "ic-input-validation{width:var(--input-width, 20rem);margin-top:var(--ic-space-xs);display:flex}ic-input-validation.ic-input-validation-full-width{width:100%}ic-input-validation span.status-icon{padding-right:var(--ic-space-xxs)}ic-input-validation span.status-icon>svg{height:1.25rem;width:1.25rem}ic-input-validation span.icon-success>svg{fill:var(--ic-input-validation-success-icon-color)}ic-input-validation span.icon-error>svg{fill:var(--ic-input-validation-error, var(--ic-atoms-status-icon-error))}ic-input-validation span.icon-warning>svg{fill:var(--ic-input-validation-warning-icon-color)}ic-input-validation .statustext{flex-grow:1;color:var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  );--ic-typography-color:var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  )}";
const IcInputValidationStyle0 = icInputValidationCss;

const icon = {
    [helpers.IcInformationStatus.Warning]: helpers.warningIcon,
    [helpers.IcInformationStatus.Error]: helpers.errorIcon,
    [helpers.IcInformationStatus.Success]: helpers.successIcon,
};
const InputValidation = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         *  The ARIA live mode to apply to the message.
         */
        this.ariaLiveMode = "polite";
        /**
         *  If `true`, the input validation will fill the width of the container.
         */
        this.fullWidth = false;
        /**
         * The status of the validation - e.g. 'error' | 'warning' | 'success'.
         */
        this.status = "";
    }
    componentDidLoad() {
        helpers.onComponentRequiredPropUndefined([{ prop: this.message, propName: "message" }], "Input Validation");
    }
    render() {
        const { ariaLiveMode, fullWidth, status, message } = this;
        const displayIcon = status !== "" ? icon[status] : "";
        return (index.h(index.Host, { key: 'f61832a182b954a8b114547acd18ce38576daf06', class: {
                [`ic-input-validation-${status}`]: status !== "",
                "ic-input-validation-full-width": !!fullWidth,
            } }, displayIcon !== "" && (index.h("span", { key: '2d0766ad790827b8757354c2dc3d29e3aa9a5f71', class: {
                "status-icon": true,
                [`icon-${status}`]: true,
            }, innerHTML: displayIcon })), index.h("ic-typography", { key: 'b1a98a5b7fd18ab96cde1ff555410f35f76a66e2', variant: "caption", class: "statustext" }, index.h("span", { key: '5306d723ea7527eb997d778e82fbe10e00af7852', "aria-live": ariaLiveMode, id: this.for && helpers.getInputValidationTextID(this.for) }, message)), index.h("slot", { key: 'a7e3c126ac89a1c616a327da99b8324df7c4464e', name: "validation-message-adornment" })));
    }
    get el() { return index.getElement(this); }
};
InputValidation.style = IcInputValidationStyle0;

exports.ic_input_label = InputLabel;
exports.ic_input_validation = InputValidation;

//# sourceMappingURL=ic-input-label_2.cjs.entry.js.map