devextreme/esm/ui/form/components/label.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/ui/form/components/label.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/
 */
import $ from "../../../core/renderer";
import {
    isDefined
} from "../../../core/utils/type";
import {
    getPublicElement
} from "../../../core/element";
import {
    getLabelMarkText
} from "../ui.form.layout_manager.utils";
import {
    FIELD_ITEM_LABEL_CONTENT_CLASS,
    FIELD_ITEM_LABEL_CLASS
} from "../constants";
export var GET_LABEL_WIDTH_BY_TEXT_CLASS = "dx-layout-manager-hidden-label";
export var FIELD_ITEM_REQUIRED_MARK_CLASS = "dx-field-item-required-mark";
export var FIELD_ITEM_LABEL_LOCATION_CLASS = "dx-field-item-label-location-";
export var FIELD_ITEM_OPTIONAL_MARK_CLASS = "dx-field-item-optional-mark";
export var FIELD_ITEM_LABEL_TEXT_CLASS = "dx-field-item-label-text";
export function renderLabel(_ref) {
    var {
        text: text,
        id: id,
        location: location,
        alignment: alignment,
        labelID: labelID = null,
        markOptions: markOptions = {},
        labelTemplate: labelTemplate,
        labelTemplateData: labelTemplateData,
        onLabelTemplateRendered: onLabelTemplateRendered
    } = _ref;
    if ((!isDefined(text) || text.length <= 0) && !isDefined(labelTemplate)) {
        return null
    }
    var $label = $("<label>").addClass(FIELD_ITEM_LABEL_CLASS + " " + FIELD_ITEM_LABEL_LOCATION_CLASS + location).attr("for", id).attr("id", labelID).css("textAlign", alignment);
    var $labelContainer = $("<span>").addClass(FIELD_ITEM_LABEL_CONTENT_CLASS);
    var $labelContent = $("<span>").addClass(FIELD_ITEM_LABEL_TEXT_CLASS).text(text);
    if (labelTemplate) {
        $labelContent = $("<div>").addClass("dx-field-item-custom-label-content");
        labelTemplateData.text = text;
        labelTemplate.render({
            container: getPublicElement($labelContent),
            model: labelTemplateData,
            onRendered() {
                null === onLabelTemplateRendered || void 0 === onLabelTemplateRendered ? void 0 : onLabelTemplateRendered()
            }
        })
    }
    return $label.append($labelContainer.append($labelContent, _renderLabelMark(markOptions)))
}

function _renderLabelMark(markOptions) {
    var markText = getLabelMarkText(markOptions);
    if ("" === markText) {
        return null
    }
    return $("<span>").addClass(markOptions.showRequiredMark ? FIELD_ITEM_REQUIRED_MARK_CLASS : FIELD_ITEM_OPTIONAL_MARK_CLASS).text(markText)
}
export function setLabelWidthByMaxLabelWidth($targetContainer, labelsSelector, labelMarkOptions) {
    var FIELD_ITEM_LABEL_CONTENT_CLASS_Selector = "".concat(labelsSelector, " > .").concat(FIELD_ITEM_LABEL_CLASS, ":not(.").concat(FIELD_ITEM_LABEL_LOCATION_CLASS, "top) > .").concat(FIELD_ITEM_LABEL_CONTENT_CLASS);
    var $FIELD_ITEM_LABEL_CONTENT_CLASS_Items = $targetContainer.find(FIELD_ITEM_LABEL_CONTENT_CLASS_Selector);
    var FIELD_ITEM_LABEL_CONTENT_CLASS_Length = $FIELD_ITEM_LABEL_CONTENT_CLASS_Items.length;
    var labelWidth;
    var i;
    var maxWidth = 0;
    for (i = 0; i < FIELD_ITEM_LABEL_CONTENT_CLASS_Length; i++) {
        labelWidth = getLabelWidthByHTML($FIELD_ITEM_LABEL_CONTENT_CLASS_Items[i]);
        if (labelWidth > maxWidth) {
            maxWidth = labelWidth
        }
    }
    for (i = 0; i < FIELD_ITEM_LABEL_CONTENT_CLASS_Length; i++) {
        $FIELD_ITEM_LABEL_CONTENT_CLASS_Items[i].style.width = maxWidth + "px"
    }
}

function getLabelWidthByHTML(labelContent) {
    var result = 0;
    var itemsCount = labelContent.children.length;
    for (var i = 0; i < itemsCount; i++) {
        var child = labelContent.children[i];
        result += child.offsetWidth
    }
    return result
}