devextreme/cjs/__internal/ui/text_box/text_box.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__internal/ui/text_box/text_box.js)
 * Version: 26.1.3
 * Build date: Wed Jun 10 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 _component_registrator = _interopRequireDefault(require("../../../core/component_registrator"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _size = require("../../../core/utils/size");
var _text_editor = _interopRequireDefault(require("../../ui/text_box/text_editor.mask"));

function _interopRequireDefault(e) {
    return e && e.__esModule ? e : {
        default: e
    }
}
const TEXTBOX_CLASS = "dx-textbox";
const SEARCHBOX_CLASS = "dx-searchbox";
const ICON_CLASS = "dx-icon";
const SEARCH_ICON_CLASS = "dx-icon-search";
class TextBox extends _text_editor.default {
    ctor(element, options) {
        if (options) {
            this._showClearButton = options.showClearButton
        }
        super.ctor(element, options)
    }
    _getDefaultOptions() {
        return Object.assign({}, super._getDefaultOptions(), {
            value: "",
            mode: "text",
            maxLength: null
        })
    }
    _initMarkup() {
        this.$element().addClass("dx-textbox");
        super._initMarkup();
        this.setAria("role", "textbox")
    }
    _renderInputType() {
        super._renderInputType();
        this._renderSearchMode()
    }
    _useTemplates() {
        return false
    }
    _renderProps() {
        super._renderProps();
        this._toggleMaxLengthProp()
    }
    _toggleMaxLengthProp() {
        const maxLength = this._getMaxLength();
        if (maxLength && maxLength > 0) {
            this._input().attr("maxLength", maxLength)
        } else {
            this._input().removeAttr("maxLength")
        }
    }
    _renderSearchMode() {
        const {
            mode: mode
        } = this.option();
        if ("search" === mode) {
            this.$element().addClass("dx-searchbox");
            this._renderSearchIcon();
            if (void 0 === this._showClearButton) {
                const {
                    showClearButton: showClearButton
                } = this.option();
                this._showClearButton = showClearButton;
                this.option("showClearButton", true)
            }
        } else {
            this.$element().removeClass("dx-searchbox");
            if (this._$searchIcon) {
                this._$searchIcon.remove()
            }
            if (void 0 === this._showClearButton) {
                return
            }
            this.option({
                showClearButton: this._showClearButton
            });
            this._showClearButton = void 0
        }
    }
    _renderSearchIcon() {
        const $searchIcon = (0, _renderer.default)("<div>").addClass("dx-icon").addClass("dx-icon-search");
        $searchIcon.prependTo(this._input().parent());
        this._$searchIcon = $searchIcon
    }
    _getLabelContainerWidth() {
        if (this._$searchIcon) {
            const $inputContainer = this._input().parent();
            return (0, _size.getWidth)($inputContainer) - this._getLabelBeforeWidth()
        }
        return super._getLabelContainerWidth()
    }
    _getLabelBeforeWidth() {
        let labelBeforeWidth = super._getLabelBeforeWidth();
        if (this._$searchIcon) {
            labelBeforeWidth += (0, _size.getOuterWidth)(this._$searchIcon)
        }
        return labelBeforeWidth
    }
    _optionChanged(args) {
        switch (args.name) {
            case "maxLength":
                this._toggleMaxLengthProp();
                break;
            case "mode":
                super._optionChanged(args);
                this._updateLabelWidth();
                break;
            case "mask":
                super._optionChanged(args);
                this._toggleMaxLengthProp();
                break;
            default:
                super._optionChanged(args)
        }
    }
    _getMaxLength() {
        const {
            mask: mask,
            maxLength: rawLength
        } = this.option();
        const isMaskSpecified = !!mask;
        const maxLength = "string" === typeof rawLength ? parseInt(rawLength, 10) : rawLength;
        return isMaskSpecified ? null : maxLength
    }
}(0, _component_registrator.default)("dxTextBox", TextBox);
var _default = exports.default = TextBox;