import { Host, h } from "@stencil/core";
import { IcInformationStatus, } from "../../utils/types";
import errorIcon from "../../assets/error-icon.svg";
import successIcon from "../../assets/success-icon.svg";
import warningIcon from "../../assets/warning-icon.svg";
import { getInputValidationTextID, isSlotUsed } from "../../utils/helpers";
const ICON = {
    [IcInformationStatus.Warning]: warningIcon,
    [IcInformationStatus.Error]: errorIcon,
    [IcInformationStatus.Success]: successIcon,
};
const INVISIBLE_CHAR = "\u200B";
/**
 * @slot validation-message-adornment - Content will be placed to the right of the validation message.
 * @slot validation-message - Content will be placed as the validation message.
 */
export class InputValidation {
    constructor() {
        /**
         *  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 = "";
    }
    watchMessageHandler(newValue) {
        // Force detectable DOM changes
        // Invisible character used as screen readers can ignore whitespace changes e.g. "" and " "
        this.messageEl.textContent = INVISIBLE_CHAR;
        setTimeout(() => {
            this.messageEl.textContent = newValue;
        }, 200); // Delay to help ensure screen readers detect change
    }
    componentDidLoad() {
        this.messageEl.textContent = INVISIBLE_CHAR;
    }
    render() {
        const { ariaLiveMode, fullWidth, status, message } = this;
        const displayIcon = status !== "" ? ICON[status] : "";
        return (h(Host, { key: '3b6f6b3e7ad37b899ee8fb71dbf7868a0eb4bd3f', class: {
                [`ic-input-validation-${status}`]: status !== "",
                "ic-input-validation-full-width": !!fullWidth,
                "ic-input-validation-with-status": status !== "",
            } }, displayIcon !== "" && (h("span", { key: 'f5d6eab684ec1ce116a2bb09e2a91a2d88d1620f', class: {
                "status-icon": true,
                [`icon-${status}`]: true,
            }, innerHTML: displayIcon })), h("ic-typography", { key: '841d8bfbf9dab21d611325dd3d7148c83ea09f40', variant: "caption", class: "statustext" }, h("span", { key: 'b35e925cc1dfd87cf8b4b2e3a8276492d5f4abda', id: this.for && getInputValidationTextID(this.for) }, isSlotUsed(this.el, "validation-message") ? (h("slot", { name: "validation-message" })) : (message)), h("span", { key: '2945b04c5e9dd1376793efc206a3c61fd96d84f2', ref: (el) => (this.messageEl = el), class: "sr-only", "aria-live": ariaLiveMode })), h("slot", { key: 'fd6c89ce76c2abf86813c2d20aadd2e652e649ca', name: "validation-message-adornment" })));
    }
    static get is() { return "ic-input-validation"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-input-validation.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-input-validation.css"]
        };
    }
    static get properties() {
        return {
            "ariaLiveMode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcAriaLive",
                    "resolved": "\"assertive\" | \"off\" | \"polite\" | undefined",
                    "references": {
                        "IcAriaLive": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcAriaLive"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The ARIA live mode to apply to the message."
                },
                "getter": false,
                "setter": false,
                "attribute": "aria-live-mode",
                "reflect": false,
                "defaultValue": "\"polite\""
            },
            "for": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The ID of the form element the validation is bound to."
                },
                "getter": false,
                "setter": false,
                "attribute": "for",
                "reflect": false
            },
            "fullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the input validation will fill the width of the container."
                },
                "getter": false,
                "setter": false,
                "attribute": "full-width",
                "reflect": false,
                "defaultValue": "false"
            },
            "message": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The validation message to display."
                },
                "getter": false,
                "setter": false,
                "attribute": "message",
                "reflect": false
            },
            "status": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcInformationStatusOrEmpty",
                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\" | undefined",
                    "references": {
                        "IcInformationStatusOrEmpty": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcInformationStatusOrEmpty"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The status of the validation - e.g. 'error' | 'warning' | 'success'."
                },
                "getter": false,
                "setter": false,
                "attribute": "status",
                "reflect": false,
                "defaultValue": "\"\""
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "message",
                "methodName": "watchMessageHandler"
            }];
    }
}
//# sourceMappingURL=ic-input-validation.js.map
