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

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/ui/form/components/label.js)
 * Version: 25.2.7
 * Build date: Tue May 05 2026
 *
 * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
import {
    getPublicElement
} from "../../../../core/element";
import $ from "../../../../core/renderer";
import {
    isDefined
} from "../../../../core/utils/type";
import {
    FIELD_ITEM_LABEL_CLASS,
    FIELD_ITEM_LABEL_CONTENT_CLASS
} from "../../../ui/form/constants";
import {
    getLabelMarkText
} from "../../../ui/form/form.layout_manager.utils";
export const GET_LABEL_WIDTH_BY_TEXT_CLASS = "dx-layout-manager-hidden-label";
export const FIELD_ITEM_REQUIRED_MARK_CLASS = "dx-field-item-required-mark";
export const FIELD_ITEM_LABEL_LOCATION_CLASS = "dx-field-item-label-location-";
export const FIELD_ITEM_OPTIONAL_MARK_CLASS = "dx-field-item-optional-mark";
export const FIELD_ITEM_LABEL_TEXT_CLASS = "dx-field-item-label-text";

function renderLabelMark(markOptions) {
    const markText = getLabelMarkText(markOptions);
    if ("" === markText) {
        return $()
    }
    const markClass = markOptions.showRequiredMark ? "dx-field-item-required-mark" : "dx-field-item-optional-mark";
    return $("<span>").addClass(markClass).attr("aria-hidden", "true").text(markText)
}
export function renderLabel(_ref) {
    let {
        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
    }
    const $label = $("<label>").addClass(`${FIELD_ITEM_LABEL_CLASS} dx-field-item-label-location-${location}`).attr("for", id).attr("id", labelID).css("textAlign", alignment);
    const $labelContainer = $("<span>").addClass(FIELD_ITEM_LABEL_CONTENT_CLASS);
    let $labelContent = $("<span>").addClass("dx-field-item-label-text");
    $labelContent.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 || onLabelTemplateRendered()
            }
        })
    }
    return $label.append($labelContainer.append($labelContent).append(renderLabelMark(markOptions)))
}

function getLabelWidthByHTML(labelContent) {
    let result = 0;
    const itemsCount = labelContent.children.length;
    for (let i = 0; i < itemsCount; i += 1) {
        const child = labelContent.children[i];
        result += child.offsetWidth
    }
    return result
}
export function setLabelWidthByMaxLabelWidth($targetContainer, labelsSelector) {
    const labelContentItemsSelector = `${labelsSelector} > .${FIELD_ITEM_LABEL_CLASS}:not(.dx-field-item-label-location-top) > .${FIELD_ITEM_LABEL_CONTENT_CLASS}`;
    const $labelContentItems = $targetContainer.find(labelContentItemsSelector);
    const labelContentItemCount = $labelContentItems.length;
    let labelWidth = 0;
    let maxWidth = 0;
    for (let i = 0; i < labelContentItemCount; i += 1) {
        labelWidth = getLabelWidthByHTML($labelContentItems[i]);
        if (labelWidth > maxWidth) {
            maxWidth = labelWidth
        }
    }
    for (let i = 0; i < labelContentItemCount; i += 1) {
        $labelContentItems[i].style.width = `${maxWidth}px`
    }
}