pragma-views2/baremetal/lib/behaviours/validation-behaviour.js

import {BehaviourBase} from "./behaviour-base.js";

export class ValidationBehaviour extends BehaviourBase {
    connectedCallback(element, args) {
        super.connectedCallback(element);
        this.setRule(args);

        if (this._element.hasValidation != true) {
            this._valueChangedHandler = this._valueChanged.bind(this);
            this._element.addEventListener("change", this._valueChangedHandler);
            this._element.hasValidation = true;
        }
    }

    setRule(expression) {
        if (this._attributeName != undefined) {
            this._element.removeAttribute(this._attributeName);
        }

        const ruleParts = expression.split("=");
        this._attributeName = ruleParts[0].trim();

        this.applyRule(ruleParts.length > 1 ? ruleParts[1].trim() : null);
    }

    disconnectedCallback(element) {
        this._element.removeEventListener("change", this._valueChangedHandler);
        super.disconnectedCallback();
    }

    _valueChanged(event) {
        if (window.eventEmitter == undefined) {
            return;
        }

        let isValid = true;
        let message = "";

        if (this._element.validity != undefined) {
            isValid = this._element.validity.valid;
            message = this._element.validationMessage;
        }

        window.eventEmitter.emit("input-validation", {
            element: this._element,
            isValid: isValid,
            message: message
        });
    }

    applyRule(value) {
        if (this[this._attributeName] != undefined) {
            this[this._attributeName](value);
        }
    }

    required(value) {
        this.setConditionalAttribute("required", value);
    }

    readonly(value) {
        this.setConditionalAttribute("readonly", value);
    }

    setConditionalAttribute(attribute, value) {
        if (value == null || boolean.parse(value) == true) {
            this._element.setAttribute(attribute, attribute);
        } else {
            this._element.removeAttribute(attribute);
        }
    }

    minlength(value) {
        this._element.setAttribute("pattern", `.{${value},}`);
    }

    maxlength(value) {
        this._element.setAttribute("maxlength", value);
    }

    pattern(value) {
        this._element.setAttribute("pattern", value);
    }

    max(value) {
        this._element.setAttribute("min", value);
    }

    min(value) {
        this._element.setAttribute("max", value);
    }
}