igniteui-webcomponents/components/common/mixins/form-associated.js

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { property } from 'lit/decorators.js';
export function FormAssociatedMixin(superClass) {
    class FormAssociatedElement extends superClass {
        get __validators() {
            return [];
        }
        get form() {
            return this.__internals.form;
        }
        get validity() {
            return this.__internals.validity;
        }
        get validationMessage() {
            return this.__internals.validationMessage;
        }
        get willValidate() {
            return this.__internals.willValidate;
        }
        set disabled(value) {
            this._disabled = value;
            this.toggleAttribute('disabled', Boolean(this._disabled));
        }
        get disabled() {
            return this._disabled;
        }
        set invalid(value) {
            this._invalid = value;
            this.toggleAttribute('invalid', Boolean(this._invalid));
        }
        get invalid() {
            return this._invalid;
        }
        constructor(...args) {
            super(args);
            this._disabled = false;
            this._invalid = false;
            this._dirty = false;
            this.__internals = this.attachInternals();
            this.addEventListener('invalid', this.handleInvalid);
        }
        connectedCallback() {
            super.connectedCallback();
            this._dirty = false;
            this.setDefaultValue();
        }
        setDefaultValue() {
            if ('checked' in this) {
                this._defaultValue = this.checked;
            }
            else if ('value' in this) {
                this._defaultValue = this.value;
            }
        }
        restoreDefaultValue() {
            if ('checked' in this) {
                this.checked = this._defaultValue;
            }
            else if ('value' in this) {
                this.value = this._defaultValue;
            }
        }
        handleInvalid(event) {
            event.preventDefault();
            this.invalid = true;
        }
        setFormValue(value, state) {
            this.__internals.setFormValue(value, state || value);
        }
        setValidity(flags, message, anchor) {
            this.__internals.setValidity(flags, message, anchor);
        }
        formResetCallback() {
            this.restoreDefaultValue();
            this._dirty = false;
            this.performUpdate();
            this.invalid = false;
        }
        formDisabledCallback(state) {
            this._disabled = state;
            this.requestUpdate();
        }
        updateValidity(message) {
            const validity = {};
            let validationMessage = '';
            for (const validator of this.__validators) {
                const isValid = validator.isValid(this);
                validity[validator.key] = !isValid;
                if (!isValid) {
                    validationMessage =
                        typeof validator.message === 'function'
                            ? validator.message(this)
                            : validator.message;
                }
            }
            if (message) {
                validity.customError = true;
                validationMessage = message;
            }
            this.__internals.setValidity(validity, validationMessage);
        }
        setInvalidState() {
            if (this.hasUpdated || this._dirty) {
                this.invalid = !this.checkValidity();
            }
        }
        reportValidity() {
            return this.__internals.reportValidity();
        }
        checkValidity() {
            return this.__internals.checkValidity();
        }
        setCustomValidity(message) {
            this.updateValidity(message);
            this.invalid = !this.checkValidity();
        }
    }
    FormAssociatedElement.formAssociated = true;
    __decorate([
        property({ reflect: true })
    ], FormAssociatedElement.prototype, "name", void 0);
    __decorate([
        property({ type: Boolean, reflect: true })
    ], FormAssociatedElement.prototype, "disabled", null);
    __decorate([
        property({ type: Boolean, reflect: true })
    ], FormAssociatedElement.prototype, "invalid", null);
    return FormAssociatedElement;
}
//# sourceMappingURL=form-associated.js.map