devextreme/cjs/__internal/ui/number_box/m_number_box.spins.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__internal/ui/number_box/m_number_box.spins.js)
 * Version: 25.2.8
 * Build date: Mon Jun 08 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.default = void 0;
var _events_engine = _interopRequireDefault(require("../../../common/core/events/core/events_engine"));
var _pointer = _interopRequireDefault(require("../../../common/core/events/pointer"));
var _index = require("../../../common/core/events/utils/index");
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _extend = require("../../../core/utils/extend");
var _button = _interopRequireDefault(require("../../ui/text_box/texteditor_button_collection/button"));
var _m_number_box = _interopRequireDefault(require("./m_number_box.spin"));

function _interopRequireDefault(e) {
    return e && e.__esModule ? e : {
        default: e
    }
}
const SPIN_CLASS = "dx-numberbox-spin";
const SPIN_CONTAINER_CLASS = "dx-numberbox-spin-container";
const SPIN_TOUCH_FRIENDLY_CLASS = "dx-numberbox-spin-touch-friendly";
class SpinButtons extends _button.default {
    _attachEvents(instance, $spinContainer) {
        const {
            editor: editor
        } = this;
        if (!editor) {
            return
        }
        const eventName = (0, _index.addNamespace)(_pointer.default.down, editor.NAME ?? "");
        const $spinContainerChildren = $spinContainer.children();
        const pointerDownAction = editor._createAction(e => {
            var _this$editor;
            null === (_this$editor = this.editor) || void 0 === _this$editor || _this$editor._spinButtonsPointerDownHandler(e)
        });
        _events_engine.default.off($spinContainer, eventName);
        _events_engine.default.on($spinContainer, eventName, e => pointerDownAction({
            event: e
        }));
        _m_number_box.default.getInstance($spinContainerChildren.eq(0)).option("onChange", e => {
            var _this$editor2;
            null === (_this$editor2 = this.editor) || void 0 === _this$editor2 || _this$editor2._spinUpChangeHandler(e)
        });
        _m_number_box.default.getInstance($spinContainerChildren.eq(1)).option("onChange", e => {
            var _this$editor3;
            null === (_this$editor3 = this.editor) || void 0 === _this$editor3 || _this$editor3._spinDownChangeHandler(e)
        })
    }
    _create() {
        const {
            editor: editor
        } = this;
        const $spinContainer = (0, _renderer.default)("<div>").addClass(SPIN_CONTAINER_CLASS);
        const $spinUp = (0, _renderer.default)("<div>").appendTo($spinContainer);
        const $spinDown = (0, _renderer.default)("<div>").appendTo($spinContainer);
        const options = this._getOptions();
        this._addToContainer($spinContainer);
        null === editor || void 0 === editor || editor._createComponent($spinUp, _m_number_box.default, (0, _extend.extend)({
            direction: "up"
        }, options));
        null === editor || void 0 === editor || editor._createComponent($spinDown, _m_number_box.default, (0, _extend.extend)({
            direction: "down"
        }, options));
        this._legacyRender(null === editor || void 0 === editor ? void 0 : editor.$element(), this._isTouchFriendly(), options.visible);
        return {
            instance: $spinContainer,
            $element: $spinContainer
        }
    }
    _getOptions() {
        const {
            editor: editor
        } = this;
        const visible = this._isVisible();
        const disabled = null === editor || void 0 === editor ? void 0 : editor.option("disabled");
        return {
            visible: visible,
            disabled: disabled
        }
    }
    _isVisible() {
        const {
            editor: editor
        } = this;
        return super._isVisible() && (null === editor || void 0 === editor ? void 0 : editor.option("showSpinButtons"))
    }
    _isTouchFriendly() {
        const {
            editor: editor
        } = this;
        return (null === editor || void 0 === editor ? void 0 : editor.option("showSpinButtons")) && (null === editor || void 0 === editor ? void 0 : editor.option("useLargeSpinButtons"))
    }
    _legacyRender($editor, isTouchFriendly, isVisible) {
        $editor.toggleClass(SPIN_TOUCH_FRIENDLY_CLASS, isTouchFriendly);
        $editor.toggleClass(SPIN_CLASS, isVisible)
    }
    update() {
        const shouldUpdate = super.update();
        if (shouldUpdate) {
            const {
                editor: editor,
                instance: instance
            } = this;
            const $editor = null === editor || void 0 === editor ? void 0 : editor.$element();
            const isVisible = this._isVisible();
            const isTouchFriendly = this._isTouchFriendly();
            const $spinButtons = instance.children();
            const spinUp = _m_number_box.default.getInstance($spinButtons.eq(0));
            const spinDown = _m_number_box.default.getInstance($spinButtons.eq(1));
            const options = this._getOptions();
            spinUp.option(options);
            spinDown.option(options);
            this._legacyRender($editor, isTouchFriendly, isVisible)
        }
    }
}
exports.default = SpinButtons;