import { QuestionFieldType } from "@boldpenguin/sdk-types";
import { hasValueChanged } from "@boldpenguin/sdk-utility";
import { h } from "@stencil/core";
import { MaskedInputService } from "../../services/masked-input.service";
export class BpSdkMaskedInput {
    constructor() {
        this.shouldUpdateMask = true;
        this.shouldUpdatePlaceholder = true;
        this.completedValue = '';
        this.inputValue = '';
        this.ariaValue = '';
        // mm/dd/yyyy
        this.dateFormatRegex = /\d\d\/\d\d\/\d\d\d\d/;
        this.inputMaskClassName = {
            text: 'masked-text',
            password: 'masked-password',
        };
        this.onFocus = () => {
            this.hasFocus = true;
            this.shouldUpdateMask = true;
        };
        this.onToggleVisibilityButton = () => {
            this.isHidden = !this.isHidden;
            this.shouldUpdateMask = true;
        };
        this.onInput = (event) => {
            var _a;
            const el = event.target;
            const unmaskedValue = ((_a = el.inputmask) === null || _a === void 0 ? void 0 : _a.unmaskedvalue()) || '';
            this.updateAnswer(unmaskedValue);
        };
        this.onAutocompleteInput = (event) => {
            const el = event.target;
            this.updateAnswer(el.value);
        };
        this.onBlur = () => {
            this.hasFocus = false;
            this.shouldUpdateMask = true;
            if (!this.pristine) {
                this._touched = true;
            }
        };
        this.answerId = undefined;
        this.autoComplete = undefined;
        this.labelId = undefined;
        this.errors = [];
        this.code = undefined;
        this.errorText = undefined;
        this.min = undefined;
        this.minDate = undefined;
        this.max = undefined;
        this.maxDate = undefined;
        this.pattern = undefined;
        this.mask = undefined;
        this.options = undefined;
        this.canHide = false;
        this.useComplexMaskLogic = false;
        this.required = false;
        this.value = undefined;
        this.placeholder = '';
        this.touched = false;
        this.pristine = true;
        this.isCompleted = false;
        this.isReadOnly = false;
        this.fieldType = undefined;
        this.questionId = undefined;
        this.label = undefined;
        this.labelledBy = undefined;
        this.helpText = undefined;
        this.answeredBySource = undefined;
        this._labelledBy = undefined;
        this._placeholder = '';
        this._touched = false;
        this.isHidden = false;
        this.useExternal = false;
        this.hasFocus = false;
    }
    onTouchedChange() {
        this._touched = this.touched;
    }
    onIsCompletedChange() {
        if (this.useComplexMaskLogic) {
            this.shouldUpdateMask = true;
        }
    }
    onValueChange(value) {
        this.shouldUpdateMask = true;
        if (this.isCompleted) {
            this.completedValue = value;
            this.inputValue = value;
        }
    }
    onAnswerIdChange() {
        this.completedValue = '';
        this.inputValue = '';
    }
    onCanHideChange(canHide) {
        this.isHidden = canHide;
        this.shouldUpdateMask = true;
    }
    onPlaceholderChange() {
        this.shouldUpdatePlaceholder = true;
    }
    onMaskChange() {
        this.shouldUpdateMask = true;
        this.shouldUpdatePlaceholder = true;
    }
    onOptionsChange(options, oldOptions) {
        if (hasValueChanged(options, oldOptions)) {
            this.shouldUpdateMask = true;
            this.shouldUpdatePlaceholder = true;
        }
    }
    onUseComplexMaskLogicChange() {
        this.shouldUpdateMask = true;
    }
    onLabelIdChange(labelId) {
        this.updateLabelledBy(this.labelledBy, labelId);
    }
    onLabelledByChange(labelledBy) {
        this.updateLabelledBy(labelledBy, this.labelId);
    }
    resetState() {
        this._touched = false;
    }
    connectedCallback() {
        this.resetState();
        if (!this.service) {
            this.service = new MaskedInputService();
        }
    }
    componentWillLoad() {
        this.useExternal = !!customElements.get('bp-sdk-external-masked-input');
        customElements.whenDefined('bp-sdk-external-masked-input').then(() => {
            this.useExternal = true;
        });
        this.onLabelIdChange(this.labelId);
        this.onLabelledByChange(this.labelledBy);
        this.onIsCompletedChange();
        this.onCanHideChange(this.canHide);
        this.onValueChange(this.value);
        this.inputValue = this.value;
        this.ariaValue = this.value;
        this._touched = this.touched;
        if (!this.useExternal && !this.isReadOnly) {
            this._placeholder = this.service.buildPlaceholderFromMaskConfig(this.placeholder, this.mask, this.options);
        }
        this.shouldUpdatePlaceholder = false;
    }
    componentWillUpdate() {
        if (!this.useExternal && !this.isReadOnly) {
            if (this.shouldUpdatePlaceholder) {
                this._placeholder = this.service.buildPlaceholderFromMaskConfig(this.placeholder, this.mask, this.options);
            }
        }
        this.shouldUpdatePlaceholder = false;
    }
    componentDidRender() {
        if (!this.useExternal && !this.isReadOnly) {
            // Mask updates need to take place in componentDidRender(). The mask library attaches
            // to a DOM element, so it needs to be rendered first for the element to exist
            if (this.shouldUpdateMask) {
                this.addMaskToInput(this.mask, this.options);
            }
        }
        this.shouldUpdateMask = false;
    }
    disconnectedCallback() {
        this.removeMaskFromInput();
    }
    render() {
        return [this.useExternal && this.renderExternal(), !this.useExternal && this.renderInternal()];
    }
    renderExternal() {
        return (h("bp-sdk-external-masked-input", { answerId: this.answerId, autoComplete: this.autoComplete, canHide: this.canHide, code: this.code, errorText: this.errorText, errors: this.errors, fieldType: this.fieldType, helpText: this.helpText, answeredBySource: this.answeredBySource, isCompleted: this.isCompleted, isReadOnly: this.isReadOnly, labelId: this.labelId, label: this.label, labelledBy: this.labelledBy, mask: this.mask, maxDate: this.maxDate, max: this.max, minDate: this.minDate, min: this.min, options: this.options, pattern: this.pattern, placeholder: this.placeholder, pristine: this.pristine, questionId: this.questionId, required: this.required, shouldHideOnBlur: this.canHide, touched: this.touched, useComplexMaskLogic: this.useComplexMaskLogic, value: this.value }));
    }
    renderInternal() {
        var _a;
        const input = this.isReadOnly ? this.renderReadOnlyElement(this.value) : [this.renderInput(), this.renderButton()];
        const hasErrors = (this.errorText && !this.isCompleted) || !!((_a = this.errors) === null || _a === void 0 ? void 0 : _a.length);
        const isTouched = this.touched && this._touched;
        const isDirty = !this.pristine;
        const shouldDisplayErrors = isTouched && isDirty && hasErrors;
        return (h("div", { class: "bp-sdk-masked__container" }, h("div", { class: "bp-sdk-masked__content" }, h("label", { id: this.labelId, htmlFor: `bp-sdk-masked__${this.answerId}`, class: "bp-sdk__label bp-sdk-masked__label", innerHTML: this.label }), h("div", { class: "bp-sdk-masked__wrapper" }, input)), shouldDisplayErrors && (h("bp-sdk-errors-container", { answerId: this.answerId, questionId: this.questionId, fieldType: this.fieldType, min: this.min, minDate: this.minDate, max: this.max, maxDate: this.maxDate, pattern: this.pattern, errors: this.errors, errorText: this.errorText }))));
    }
    renderReadOnlyElement(value) {
        return h("span", { class: "read-only-value" }, value);
    }
    renderPasswordInput() {
        return (h("input", { id: `bp-sdk-masked__${this.answerId}`, "aria-labelledby": this._labelledBy, "aria-valuetext": this.ariaValue, placeholder: this._placeholder, required: this.required, type: "password", class: `bp-sdk-masked__input bp-sdk-masked__input--blurs ${this.inputMaskClassName.password}`, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, value: this.inputValue }));
    }
    renderTextInput() {
        return (h("input", { "aria-labelledby": this._labelledBy, "aria-valuetext": this.ariaValue, placeholder: this._placeholder, required: this.required, class: `bp-sdk-masked__input ${this.inputMaskClassName.text}`, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, value: this.inputValue }));
    }
    /**
     * This input is intended to receive autocomplete data from a browser and forward it to the visible inputs.
     */
    renderAutocompleteInput() {
        return h("input", { "aria-hidden": true, tabindex: "-1", autocomplete: this.autoComplete, class: "bp-sdk-hidden", onInput: this.onAutocompleteInput });
    }
    renderInput() {
        const input = this.isHidden ? this.renderPasswordInput() : this.renderTextInput();
        return [this.renderAutocompleteInput(), input];
    }
    renderButton() {
        return (this.canHide && (h("bp-sdk-masked-input-button", { class: "bp-sdk-masked__button", "aria-label": this.isHidden ? 'Show Text' : 'Hide Text', onClick: this.onToggleVisibilityButton }, this.isHidden && h("bp-sdk-icon-container", { name: "eye" }), !this.isHidden && h("bp-sdk-icon-container", { name: "eye-slash" }))));
    }
    updateAnswer(unmaskedValue) {
        let value = unmaskedValue;
        if (this.fieldType === QuestionFieldType.Date) {
            value = this.serializeDateValue(unmaskedValue);
        }
        const hasValueChanged = value !== this.inputValue;
        const hasPreviousValue = this.hasValue(this.value);
        const hasCurrentValue = this.hasValue(value);
        const shouldValueChangeTriggerUpdate = hasPreviousValue || hasCurrentValue;
        if (hasValueChanged && shouldValueChangeTriggerUpdate) {
            this.inputValue = unmaskedValue;
            this.valueUpdate.emit(value);
        }
    }
    hasValue(value) {
        return !(value == null || value === '');
    }
    serializeDateValue(value) {
        return this.dateFormatRegex.test(value) ? new Date(value).toISOString() : undefined;
    }
    updateLabelledBy(labelledBy, labelledById) {
        let parts = [];
        if (labelledById) {
            parts.push(`${labelledById}`);
        }
        if (labelledBy) {
            parts.push(`${labelledBy}`);
        }
        const label = parts.join(' ');
        // undefined is used because it will unset the HTML attribute
        this._labelledBy = label || undefined;
    }
    /**
     * Attaches an instance of InputMask to whichever input element is currently rendered.
     * This should be called after the input is rendered as the InputMask library attaches
     * to an element in the DOM.
     */
    addMaskToInput(maskPattern, maskOptions) {
        const elementSelector = this.getInputCssClassSelector();
        const element = this.el.querySelector(elementSelector);
        if (element) {
            let maskInstance = this.service.createDefaultMaskInstance();
            // We need to cache this before applying a mask or the mask will affect it
            const currentElementValue = element.value;
            if (this.useComplexMaskLogic) {
                this.service.removeMaskFromElement(element);
                maskInstance = this.getMaskForComplexLogic(maskPattern, maskOptions);
                this.service.applyMaskToElement(element, maskInstance);
                let valueOverride = this.getValueForComplexLogic(currentElementValue);
                if (valueOverride !== null) {
                    element.value = valueOverride;
                    this.inputValue = valueOverride;
                }
            }
            else if (!element.inputmask || !this.service.isElementMaskSame(element, this.mask)) {
                // 1. re-applying same inputmask can disrupt the cursor position
                // 2. DOM can reuse elements, remove and apply mask only if different
                this.service.removeMaskFromElement(element);
                maskInstance = this.createCustomMaskInstance(maskPattern, maskOptions);
                this.service.applyMaskToElement(element, maskInstance);
            }
        }
    }
    removeMaskFromInput() {
        const elementSelector = this.getInputCssClassSelector();
        const element = this.el.querySelector(elementSelector);
        this.service.removeMaskFromElement(element);
    }
    getMaskForComplexLogic(maskPattern, maskOptions) {
        let maskInstance = this.service.createDefaultMaskInstance();
        // When the field has focus, we assume the user is trying to edit the value - even a
        // completed value - so the mask needs to reflect the field type.
        // When the field does not have focus, but is incomplete, we assume the user is still
        // filling out the value, so the mask needs to match the field type.
        if (this.hasFocus || !(this.isCompleted && this.completedValue)) {
            maskInstance = this.createCustomMaskInstance(maskPattern, maskOptions);
        }
        return maskInstance;
    }
    getValueForComplexLogic(elementValue) {
        let valueOverride = null;
        if (this.hasFocus) {
            // Allows the user to edit a completed value. The server doesn't send the actual value, so just
            // blank it out rather than give the impression they can make a partial edit.
            const isDisplayingObfuscatedValue = elementValue === this.completedValue && this.completedValue.includes('*');
            if (this.isCompleted && isDisplayingObfuscatedValue) {
                valueOverride = '';
            }
        }
        else if (this.isCompleted && this.completedValue) {
            // If the user attempts to edit a completed value from the server and makes no changes,
            // this restores the server value.
            valueOverride = this.completedValue;
        }
        return valueOverride;
    }
    createCustomMaskInstance(maskPattern, maskOptions) {
        return this.isHidden
            ? this.service.createPasswordMaskInstance(maskPattern, maskOptions)
            : this.service.createTextMaskInstance(maskPattern, maskOptions);
    }
    getInputCssClassSelector() {
        return this.isHidden ? `.${this.inputMaskClassName.password}` : `.${this.inputMaskClassName.text}`;
    }
    static get is() { return "bp-sdk-masked-input"; }
    static get originalStyleUrls() {
        return {
            "$": ["bp-sdk-masked-input.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bp-sdk-masked-input.css"]
        };
    }
    static get properties() {
        return {
            "answerId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Answer id"
                },
                "attribute": "answer-id",
                "reflect": false
            },
            "autoComplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Autocomplete attribute value for input"
                },
                "attribute": "auto-complete",
                "reflect": false
            },
            "labelId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Aria label id's that describes input for screen readers"
                },
                "attribute": "label-id",
                "reflect": false
            },
            "errors": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "any[]",
                    "resolved": "any[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Error messages"
                },
                "defaultValue": "[]"
            },
            "code": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "question code"
                },
                "attribute": "code",
                "reflect": false
            },
            "errorText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Error message"
                },
                "attribute": "error_text",
                "reflect": false
            },
            "min": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "minimum value"
                },
                "attribute": "min_value",
                "reflect": false
            },
            "minDate": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "minimum date value"
                },
                "attribute": "min_date",
                "reflect": false
            },
            "max": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "maximum value"
                },
                "attribute": "max_value",
                "reflect": false
            },
            "maxDate": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "maximum date value"
                },
                "attribute": "max_date",
                "reflect": false
            },
            "pattern": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Regex pattern to match"
                },
                "attribute": "pattern",
                "reflect": false
            },
            "mask": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Mask pattern to be applied to the input in visible mode.\n\nSee [the documentation](https://github.com/RobinHerbots/Inputmask)\nof the InputMask package for valid mask patterns."
                },
                "attribute": "mask",
                "reflect": false
            },
            "options": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IMaskOptions",
                    "resolved": "IMaskOptions",
                    "references": {
                        "IMaskOptions": {
                            "location": "import",
                            "path": "@boldpenguin/sdk-types",
                            "id": "../sdk-types/dist/types.d.ts::IMaskOptions"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Options for input mask. Supported options are:\n\nplaceholder (string) - This character will be used in the mask and input placeholder\nto represent where user input is expected (i.e. non-separator characters). For example,\na date mask of `dd/mm/yyyy` with `#` as a placeholder character will display as `##/##/####`.\n\nprefix (string) - This text will be displayed at the start of the mask and input placeholder.\nFor example, for a mask of `0.00`, a prefix of `$`, and a placeholder of `#`,\nthe mask displayed in the input will be `$#.##`."
                }
            },
            "canHide": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When true, the input can be toggled between text and password modes.\n\nIn text mode, the input displays the text entered by the user as is.\nIn password mode, the input obfuscates the text value (usually with `*` or `\u2022`)."
                },
                "attribute": "can-hide",
                "reflect": false,
                "defaultValue": "false"
            },
            "useComplexMaskLogic": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When this prop is true, and a valid answer for this question has been synced to the backend,\nif the user edits the value without providing a valid answer, the original persisted answer\nwill be restored.\n\nAdditionally, the formatting mask will be temporarily disabled until the user makes edits to\nthe answer field. This allows an obfuscated form of the answer (i.e. 12345 -> ***45) to be\nprovided by the backend without conflicting with the requirements of the mask pattern."
                },
                "attribute": "use-complex-mask-logic",
                "reflect": false,
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Determines if input is required"
                },
                "attribute": "required",
                "reflect": false,
                "defaultValue": "false"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Current value"
                },
                "attribute": "value",
                "reflect": false
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Placeholder to display"
                },
                "attribute": "placeholder",
                "reflect": false,
                "defaultValue": "''"
            },
            "touched": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Is touched"
                },
                "attribute": "touched",
                "reflect": false,
                "defaultValue": "false"
            },
            "pristine": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Is pristine"
                },
                "attribute": "pristine",
                "reflect": false,
                "defaultValue": "true"
            },
            "isCompleted": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Is answer in complete state"
                },
                "attribute": "is_completed",
                "reflect": false,
                "defaultValue": "false"
            },
            "isReadOnly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When true, the field will be readonly. It will display only the label and value as plain text."
                },
                "attribute": "is-read-only",
                "reflect": false,
                "defaultValue": "false"
            },
            "fieldType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "field type"
                },
                "attribute": "field_type",
                "reflect": false
            },
            "questionId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Question id"
                },
                "attribute": "question_id",
                "reflect": false
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label to use"
                },
                "attribute": "label",
                "reflect": false
            },
            "labelledBy": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Labels that describe group"
                },
                "attribute": "labelled-by",
                "reflect": false
            },
            "helpText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Help text"
                },
                "attribute": "help-text",
                "reflect": false
            },
            "answeredBySource": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | undefined",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifically how the question was answered (ie. \"ACORD 126\")"
                },
                "attribute": "answered-by-source",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "_labelledBy": {},
            "_placeholder": {},
            "_touched": {},
            "isHidden": {},
            "useExternal": {},
            "hasFocus": {}
        };
    }
    static get events() {
        return [{
                "method": "valueUpdate",
                "name": "valueUpdate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "touched",
                "methodName": "onTouchedChange"
            }, {
                "propName": "isCompleted",
                "methodName": "onIsCompletedChange"
            }, {
                "propName": "value",
                "methodName": "onValueChange"
            }, {
                "propName": "answerId",
                "methodName": "onAnswerIdChange"
            }, {
                "propName": "canHide",
                "methodName": "onCanHideChange"
            }, {
                "propName": "placeholder",
                "methodName": "onPlaceholderChange"
            }, {
                "propName": "mask",
                "methodName": "onMaskChange"
            }, {
                "propName": "options",
                "methodName": "onOptionsChange"
            }, {
                "propName": "useComplexMaskLogic",
                "methodName": "onUseComplexMaskLogicChange"
            }, {
                "propName": "labelId",
                "methodName": "onLabelIdChange"
            }, {
                "propName": "labelledBy",
                "methodName": "onLabelledByChange"
            }];
    }
}
