import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { o as onComponentRequiredPropUndefined, y as getInputValidationTextID, z as IcInformationStatus, A as warningIcon, B as errorIcon, C as successIcon } from './helpers.js';
import { d as defineCustomElement$1 } from './ic-typography2.js';

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 = {
    [IcInformationStatus.Warning]: warningIcon,
    [IcInformationStatus.Error]: errorIcon,
    [IcInformationStatus.Success]: successIcon,
};
const InputValidation = /*@__PURE__*/ proxyCustomElement(class InputValidation extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        /**
         *  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() {
        onComponentRequiredPropUndefined([{ prop: this.message, propName: "message" }], "Input Validation");
    }
    render() {
        const { ariaLiveMode, fullWidth, status, message } = this;
        const displayIcon = status !== "" ? icon[status] : "";
        return (h(Host, { key: 'f61832a182b954a8b114547acd18ce38576daf06', class: {
                [`ic-input-validation-${status}`]: status !== "",
                "ic-input-validation-full-width": !!fullWidth,
            } }, displayIcon !== "" && (h("span", { key: '2d0766ad790827b8757354c2dc3d29e3aa9a5f71', class: {
                "status-icon": true,
                [`icon-${status}`]: true,
            }, innerHTML: displayIcon })), h("ic-typography", { key: 'b1a98a5b7fd18ab96cde1ff555410f35f76a66e2', variant: "caption", class: "statustext" }, h("span", { key: '5306d723ea7527eb997d778e82fbe10e00af7852', "aria-live": ariaLiveMode, id: this.for && getInputValidationTextID(this.for) }, message)), h("slot", { key: 'a7e3c126ac89a1c616a327da99b8324df7c4464e', name: "validation-message-adornment" })));
    }
    get el() { return this; }
    static get style() { return IcInputValidationStyle0; }
}, [4, "ic-input-validation", {
        "ariaLiveMode": [1, "aria-live-mode"],
        "for": [1],
        "fullWidth": [4, "full-width"],
        "message": [1],
        "status": [1]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ic-input-validation", "ic-typography"];
    components.forEach(tagName => { switch (tagName) {
        case "ic-input-validation":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, InputValidation);
            }
            break;
        case "ic-typography":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { InputValidation as I, defineCustomElement as d };

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