devextreme/cjs/__internal/scheduler/appointments_new/appointment_collector.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__internal/scheduler/appointments_new/appointment_collector.js)
 * Version: 26.1.4
 * Build date: Fri Jul 24 2026
 *
 * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.AppointmentCollector = void 0;
var _date = _interopRequireDefault(require("../../../common/core/localization/date"));
var _message = _interopRequireDefault(require("../../../common/core/localization/message"));
var _component_registrator = _interopRequireDefault(require("../../../core/component_registrator"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _empty_template = require("../../../core/templates/empty_template");
var _button = _interopRequireDefault(require("../../../ui/button"));
var _m_function_template = require("../../core/templates/m_function_template");
var _const = require("./const");
var _view_item = require("./view_item");

function _interopRequireDefault(e) {
    return e && e.__esModule ? e : {
        default: e
    }
}
class AppointmentCollector extends _view_item.ViewItem {
    get appointmentsCount() {
        return this.option().items.length
    }
    _setOptionsByReference() {
        super._setOptionsByReference();
        this._optionsByReference = Object.assign({}, this._optionsByReference, {
            items: true,
            targetedAppointmentData: true
        })
    }
    _init() {
        super._init();
        this.defaultAppointmentCollectorTemplate = new _m_function_template.FunctionTemplate(options => {
            this.defaultAppointmentCollectorContent((0, _renderer.default)(options.container))
        })
    }
    _initMarkup() {
        super._initMarkup();
        this.resize();
        this.applyElementClasses();
        this.applyElementAria();
        this.attachFocusEvents();
        this.attachKeydownEvents();
        this.renderContentTemplate()
    }
    resize(geometry) {
        var _this$buttonInstance;
        const newGeometry = geometry ?? this.option().geometry;
        const {
            top: top,
            left: left,
            width: width,
            height: height
        } = newGeometry;
        this.$element().css({
            top: top,
            left: left
        });
        null === (_this$buttonInstance = this.buttonInstance) || void 0 === _this$buttonInstance || _this$buttonInstance.option({
            width: width,
            height: height
        })
    }
    setTabIndex(tabIndex) {
        var _this$buttonInstance2;
        super.setTabIndex(tabIndex);
        null === (_this$buttonInstance2 = this.buttonInstance) || void 0 === _this$buttonInstance2 || _this$buttonInstance2.option("tabIndex", tabIndex)
    }
    applyElementClasses() {
        this.$element().addClass(_const.APPOINTMENT_COLLECTOR_CLASSES.CONTAINER).toggleClass(_const.APPOINTMENT_COLLECTOR_CLASSES.COMPACT, this.option().isCompact)
    }
    applyElementAria() {
        const localizeDate = date => `${_date.default.format(date,"monthAndDay")}, ${_date.default.format(date,"year")}`;
        const {
            targetedAppointmentData: targetedAppointmentData
        } = this.option();
        const startDateText = localizeDate(targetedAppointmentData.displayStartDate);
        const endDateText = localizeDate(targetedAppointmentData.displayEndDate);
        const dateText = startDateText === endDateText ? startDateText : `${startDateText} - ${endDateText}`;
        this.$element().attr("aria-roledescription", dateText)
    }
    renderContentTemplate() {
        const template = this.option().appointmentCollectorTemplate instanceof _empty_template.EmptyTemplate ? this.defaultAppointmentCollectorTemplate : this.option().appointmentCollectorTemplate;
        this.buttonInstance = this._createComponent(this.$element(), _button.default, {
            type: "default",
            tabIndex: this.option().tabIndex,
            width: this.option().geometry.width,
            height: this.option().geometry.height,
            template: new _m_function_template.FunctionTemplate(e => template.render({
                container: e.container,
                model: {
                    appointmentCount: this.appointmentsCount,
                    isCompact: this.option().isCompact,
                    items: this.option().items.map(item => item.itemData)
                }
            })),
            onClick: e => {
                this.option().onClick(this, e.event)
            }
        })
    }
    defaultAppointmentCollectorContent($container) {
        const count = this.appointmentsCount;
        const text = this.option().isCompact ? count : _message.default.getFormatter("dxScheduler-moreAppointments")(count);
        (0, _renderer.default)("<span>").text(text).appendTo($container);
        $container.addClass(_const.APPOINTMENT_COLLECTOR_CLASSES.CONTENT);
        return $container
    }
}
exports.AppointmentCollector = AppointmentCollector;
(0, _component_registrator.default)("dxSchedulerNewAppointmentCollector", AppointmentCollector);