devextreme/cjs/ui/validation_message.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/ui/validation_message.js)
 * Version: 23.2.6
 * Build date: Wed May 01 2024
 *
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
"use strict";
exports.default = void 0;
var _size = require("../core/utils/size");
var _renderer = _interopRequireDefault(require("../core/renderer"));
var _component_registrator = _interopRequireDefault(require("../core/component_registrator"));
var _ui = _interopRequireDefault(require("./overlay/ui.overlay"));
var _extend = require("../core/utils/extend");
var _string = require("../core/utils/string");
var _position = require("../core/utils/position");

function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    }
}

function _extends() {
    _extends = Object.assign ? Object.assign.bind() : function(target) {
        for (var i = 1; i < arguments.length; i++) {
            var source = arguments[i];
            for (var key in source) {
                if (Object.prototype.hasOwnProperty.call(source, key)) {
                    target[key] = source[key]
                }
            }
        }
        return target
    };
    return _extends.apply(this, arguments)
}
const INVALID_MESSAGE = "dx-invalid-message";
const INVALID_MESSAGE_AUTO = "dx-invalid-message-auto";
const INVALID_MESSAGE_ALWAYS = "dx-invalid-message-always";
const INVALID_MESSAGE_CONTENT = "dx-invalid-message-content";
const VALIDATION_MESSAGE_MIN_WIDTH = 100;
const ValidationMessage = _ui.default.inherit({
    _getDefaultOptions() {
        return (0, _extend.extend)(this.callBase(), {
            integrationOptions: {},
            templatesRenderAsynchronously: false,
            shading: false,
            width: "auto",
            height: "auto",
            hideOnOutsideClick: false,
            animation: null,
            visible: true,
            propagateOutsideClick: true,
            _checkParentVisibility: false,
            rtlEnabled: false,
            contentTemplate: this._renderInnerHtml,
            maxWidth: "100%",
            container: this.$element(),
            target: void 0,
            mode: "auto",
            validationErrors: void 0,
            preventScrollEvents: false,
            positionSide: "top",
            boundary: void 0,
            offset: {
                h: 0,
                v: 0
            },
            contentId: void 0
        })
    },
    _init() {
        this.callBase();
        this.updateMaxWidth();
        this._updatePosition()
    },
    _initMarkup() {
        this.callBase();
        this._ensureMessageNotEmpty();
        this._updatePositionByTarget();
        this._toggleModeClass();
        this._updateContentId()
    },
    _updatePositionByTarget: function() {
        const {
            target: target
        } = this.option();
        this.option("position.of", target)
    },
    _ensureMessageNotEmpty: function() {
        this._textMarkup = this._getTextMarkup();
        const shouldShowMessage = this.option("visible") && this._textMarkup;
        this._toggleVisibilityClasses(shouldShowMessage)
    },
    _toggleVisibilityClasses: function(visible) {
        if (visible) {
            this.$element().addClass(INVALID_MESSAGE);
            this.$wrapper().addClass(INVALID_MESSAGE)
        } else {
            this.$element().removeClass(INVALID_MESSAGE);
            this.$wrapper().removeClass(INVALID_MESSAGE)
        }
    },
    _updateContentId() {
        const {
            container: container,
            contentId: contentId
        } = this.option();
        const id = null !== contentId && void 0 !== contentId ? contentId : (0, _renderer.default)(container).attr("aria-describedby");
        this.$content().addClass(INVALID_MESSAGE_CONTENT).attr("id", id)
    },
    _renderInnerHtml(element) {
        const $element = element && (0, _renderer.default)(element);
        null === $element || void 0 === $element ? void 0 : $element.html(this._textMarkup)
    },
    _getTextMarkup() {
        var _this$option;
        const validationErrors = null !== (_this$option = this.option("validationErrors")) && void 0 !== _this$option ? _this$option : [];
        let validationErrorMessage = "";
        validationErrors.forEach(err => {
            var _err$message;
            const separator = validationErrorMessage ? "<br />" : "";
            validationErrorMessage += separator + (0, _string.encodeHtml)(null !== (_err$message = null === err || void 0 === err ? void 0 : err.message) && void 0 !== _err$message ? _err$message : "")
        });
        return validationErrorMessage
    },
    _toggleModeClass() {
        const mode = this.option("mode");
        this.$wrapper().toggleClass(INVALID_MESSAGE_AUTO, "auto" === mode).toggleClass(INVALID_MESSAGE_ALWAYS, "always" === mode)
    },
    updateMaxWidth() {
        const target = this.option("target");
        const targetWidth = (0, _size.getOuterWidth)(target);
        let maxWidth = "100%";
        if (targetWidth) {
            maxWidth = Math.max(targetWidth, 100)
        }
        this.option({
            maxWidth: maxWidth
        })
    },
    _getPositionsArray: function(positionSide, rtlSide) {
        switch (positionSide) {
            case "top":
                return ["".concat(rtlSide, " bottom"), "".concat(rtlSide, " top")];
            case "left":
                return ["right", "left"];
            case "right":
                return ["left", "right"];
            default:
                return ["".concat(rtlSide, " top"), "".concat(rtlSide, " bottom")]
        }
    },
    _updatePosition: function() {
        const {
            positionSide: positionSide,
            rtlEnabled: rtlEnabled,
            offset: componentOffset,
            boundary: boundary
        } = this.option();
        const rtlSide = (0, _position.getDefaultAlignment)(rtlEnabled);
        const positions = this._getPositionsArray(positionSide, rtlSide);
        const offset = _extends({}, componentOffset);
        this.$element().addClass("dx-invalid-message-".concat(positionSide));
        if (rtlEnabled && "left" !== positionSide && "right" !== positionSide) {
            offset.h = -offset.h
        }
        if ("top" === positionSide) {
            offset.v = -offset.v
        }
        if ("left" === positionSide) {
            offset.h = -offset.h
        }
        this.option("position", {
            offset: offset,
            boundary: boundary,
            my: positions[0],
            at: positions[1],
            collision: "none flip"
        })
    },
    _optionChanged(args) {
        const {
            name: name,
            value: value,
            previousValue: previousValue
        } = args;
        switch (name) {
            case "target":
                this._updatePositionByTarget();
                this.updateMaxWidth();
                this.callBase(args);
                break;
            case "boundary":
                this.option("position.boundary", value);
                break;
            case "mode":
                this._toggleModeClass(value);
                break;
            case "rtlEnabled":
            case "offset":
            case "positionSide":
                this.$element().removeClass("dx-invalid-message-".concat(previousValue));
                this._updatePosition();
                break;
            case "container":
                this._updateContentId();
                this.callBase(args);
                break;
            case "contentId":
                this._updateContentId();
                break;
            case "validationErrors":
                this._ensureMessageNotEmpty();
                this._renderInnerHtml(this.$content());
                break;
            default:
                this.callBase(args)
        }
    }
});
(0, _component_registrator.default)("dxValidationMessage", ValidationMessage);
var _default = ValidationMessage;
exports.default = _default;
module.exports = exports.default;
module.exports.default = exports.default;