import { Host, h } from "@stencil/core";
import { IcInformationStatus, } from "../../utils/types";
import successIcon from "../../assets/success-icon.svg";
import { removeDisabledFalse, renderDynamicChildSlots, slotHasContent, } from "../../utils/helpers";
/**
 * @slot left-icon - Content will be placed to the left of the input.
 */
export class InputComponentContainer {
    constructor() {
        /**
         *  If `true`, the disabled state will be set.
         */
        this.disabled = false;
        /**
         *  If `true`, the input component container will fill the width of the container it is in.
         */
        this.fullWidth = false;
        /**
         *  If `true`, the input component container will allow for multiple lines.
         */
        this.multiLine = false;
        /**
         *  If `true`, the readonly state will be set.
         */
        this.readonly = false;
        /**
         * The size of the input component container component.
         */
        this.size = "medium";
        /**
         *  If `true`, the validation will display inline.
         */
        this.validationInline = false;
        /**
         * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.
         */
        this.validationStatus = "";
    }
    watchDisabledHandler() {
        removeDisabledFalse(this.disabled, this.el);
    }
    componentWillLoad() {
        removeDisabledFalse(this.disabled, this.el);
    }
    componentDidLoad() {
        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, "left-icon", this));
        this.hostMutationObserver.observe(this.el, { childList: true });
    }
    render() {
        const { size, validationStatus, disabled, readonly, multiLine, fullWidth, validationInline, } = this;
        return (h(Host, { key: '86271007106caa930e823cd2a9b9242670a1d2c1', class: {
                [`ic-input-component-container-${size}`]: true,
                [`ic-input-component-container-${validationStatus}`]: validationStatus !== "" && !disabled && !readonly,
                "ic-input-component-container-disabled": !!disabled,
                "ic-input-component-container-readonly": !!readonly,
                "ic-input-component-container-multiline": !!multiLine,
                "ic-input-component-container-full-width": !!fullWidth,
            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: '2b8e64e7cc2d78b34b816b080f7e5856b4aef254', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: '738e1d776664a7971bd97f36a68b8193849178ae', class: "icon-container" }, h("slot", { key: 'c6d5fa181367e1988b3e454b06c01345afa393ff', name: "left-icon" }))), h("slot", { key: '970ccdc08abd4dbf84248cc5708ab09ecbcbc0ae' }), validationInline &&
            validationStatus === IcInformationStatus.Success && (h("span", { key: '6c7cbd9c69c11a8688972039ba519829805d3ab7', class: "inline-success", innerHTML: successIcon })))));
    }
    static get is() { return "ic-input-component-container"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-input-component-container.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-input-component-container.css"]
        };
    }
    static get properties() {
        return {
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the disabled state will be set."
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "fullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the input component container will fill the width of the container it is in."
                },
                "getter": false,
                "setter": false,
                "attribute": "full-width",
                "reflect": false,
                "defaultValue": "false"
            },
            "multiLine": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the input component container will allow for multiple lines."
                },
                "getter": false,
                "setter": false,
                "attribute": "multi-line",
                "reflect": false,
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the readonly state will be set."
                },
                "getter": false,
                "setter": false,
                "attribute": "readonly",
                "reflect": false,
                "defaultValue": "false"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcSizes",
                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                    "references": {
                        "IcSizes": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcSizes"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the input component container component."
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "\"medium\""
            },
            "validationInline": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the validation will display inline."
                },
                "getter": false,
                "setter": false,
                "attribute": "validation-inline",
                "reflect": false,
                "defaultValue": "false"
            },
            "validationStatus": {
                "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 validation status of the input component container - e.g. 'error' | 'warning' | 'success'."
                },
                "getter": false,
                "setter": false,
                "attribute": "validation-status",
                "reflect": false,
                "defaultValue": "\"\""
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "disabled",
                "methodName": "watchDisabledHandler"
            }];
    }
}
//# sourceMappingURL=ic-input-component-container.js.map
