@progress/kendo-ui/esm/kendo.dropdowntree.js

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

import './kendo.treeview.js';
import './kendo.popup.js';
import './kendo.actionsheet.js';
import './kendo.binder.js';
import './kendo.html.chip.js';
import './kendo.html.chiplist.js';
import './kendo.html.button.js';
import './kendo.html.input.js';
import './kendo.label.js';
import './kendo.icons.js';
import { v as valueMapperOptions } from './valueMapper-CXgI6HWc.js';
import { i as initLoader } from './dropdowns-loader-00xUvouJ.js';
import './kendo.data.js';
import './kendo.core.js';
import './kendo.licensing.js';
import '@progress/kendo-licensing';
import './kendo.data.odata.js';
import './kendo.data.xml.js';
import './kendo.treeview.draganddrop.js';
import './kendo.draganddrop.js';
import './kendo.userevents.js';
import './kendo.html.icon.js';
import './kendo.html.base.js';
import '@progress/kendo-svg-icons';
import './kendo.floatinglabel.js';

(function($, undefined$1) {

    var kendo = window.kendo,
        ui = kendo.ui,
        keys = kendo.keys,
        DISABLED = "k-disabled",
        SELECT = "select",
        CHECKED = "checked",
        DATABOUND = "dataBound",
        CLICK = "click",
        NS = ".kendoTreeView",
        INDETERMINATE = "indeterminate",
        NAVIGATE = "navigate",
        subGroup,
        TreeView = ui.TreeView;

        function contentChild(filter) {
            return function(node) {
                var result = node.children(".k-animation-container");

                if (!result.length) {
                    result = node;
                }

                return result.children(filter);
            };
        }

        subGroup = contentChild(".k-treeview-group");

    var Tree = TreeView.extend({
        init: function(element, options, dropdowntree) {
            var that = this;

            that.dropdowntree = dropdowntree;

            TreeView.fn.init.call(that, element, options);
            if (that.dropdowntree._isMultipleSelection()) {
                that.wrapper.on(CLICK + NS, '.k-treeview-leaf.k-selected', that._clickSelectedItem.bind(that));
            }
        },

        _checkOnSelect: function(e) {
            if (!e.isDefaultPrevented()) {
                var dataItem = this.dataItem(e.node);

                dataItem.set("checked", !dataItem.checked);
            }
        },

        _setCheckedValue: function(node, value) {
            node.set(CHECKED, value);
        },

        _click: function(e) {
            var that = this;

            if (that.dropdowntree._isMultipleSelection()) {
                that.one("select", that._checkOnSelect);
            }
            TreeView.fn._click.call(that, e);
        },

        _clickSelectedItem: function(e) {
            var that = this,
            node = $(e.currentTarget);

            that.one("select", that._checkOnSelect);
            if (!that._trigger(SELECT, node)) {
                that.dataItem(node).set("selected", false);
            }
        },

        defaultrefresh: function(e) {
            var that = this;
            var node = e.node;
            var action = e.action;
            var items = e.items;
            var parentNode = this.wrapper;
            var options = this.options;
            var loadOnDemand = options.loadOnDemand;
            var checkChildren = options.checkboxes && options.checkboxes.checkChildren;
            var i;

            if (this._skip) {
                return;
            }

            if (e.field) {
                if (!items[0] || !items[0].level) {
                    return;
                }

                return this._updateNodes(items, e.field);
            }

            if (node) {
                parentNode = this.findByUid(node.uid);
                this._progress(parentNode, false);
            }

            if (checkChildren && action != "remove") {
                var bubble = false;

                for (i = 0; i < items.length; i++) {
                    if ("checked" in items[i]) {
                        bubble = true;
                        break;
                    }
                }

                if (!bubble && node && node.checked) {
                    for (i = 0; i < items.length; i++) {
                        items[i].checked = true;
                    }
                }
            }

            if (action == "add") {
                this._appendItems(e.index, items, parentNode);
            } else if (action == "remove") {
                this._remove(this.findByUid(items[0].uid), false);
            } else if (action == "itemchange") {
                this._updateNodes(items);
            } else if (action == "itemloaded") {
                this._refreshChildren(parentNode, items, e.index);
            } else {
                this._refreshRoot(items);
            }

            if (action != "remove") {
                for (i = 0; i < items.length; i++) {
                    if (!loadOnDemand || items[i].expanded) {
                        items[i].load();
                    }
                }
            }

            that.wrapper.find(">ul").attr("role", "tree");

            this.trigger(DATABOUND, { node: node ? parentNode : undefined$1 });
            this.dropdowntree._treeViewDataBound({ node: node ? parentNode : undefined$1, sender: this });
            if (this.options.checkboxes.checkChildren) {
                this.updateIndeterminate();
            }
        },

        _previousVisible: function(node) {
            var that = this,
                lastChild,
                result;

            if (!node.length || node.prev().length) {
                if (node.length) {
                    result = node.prev();
                } else {
                    result = that.root.children().last();
                }

                while (that._expanded(result)) {
                    lastChild = subGroup(result).children().last();

                    if (!lastChild.length) {
                        break;
                    }

                    result = lastChild;
                }
            } else {
                result = that.parent(node) || node;

                if (!result.length) {
                    if (that.dropdowntree.checkAll && that.dropdowntree.checkAll.is(":visible")) {
                        that.dropdowntree.checkAll.find(".k-checkbox").trigger("focus");
                    } else if (that.dropdowntree.filterInput) {
                        that.dropdowntree.filterInput.trigger("focus");
                    } else {
                        that.dropdowntree.wrapper.trigger("focus");
                    }
                }
            }

            return result;
        },

        _keydown: function(e) {
            var that = this,
                key = e.keyCode,
                target,
                focused = that.current(),
                expanded = that._expanded(focused),
                checkbox = focused.find(".k-checkbox-wrap").first().find(":checkbox"),
                rtl = kendo.support.isRtl(that.element);

            if (e.target != e.currentTarget) {
                return;
            }

            if ((!rtl && key == keys.RIGHT) || (rtl && key == keys.LEFT)) {
                if (expanded) {
                    target = that._nextVisible(focused);
                } else if (!focused.find(".k-treeview-leaf").first().hasClass(DISABLED)) {
                    that.expand(focused);
                }
            } else if ((!rtl && key == keys.LEFT) || (rtl && key == keys.RIGHT)) {
                if (expanded && !focused.find(".k-treeview-leaf").first().hasClass(DISABLED)) {
                    that.collapse(focused);
                } else {
                    target = that.parent(focused);

                    if (!that._enabled(target)) {
                        target = undefined$1;
                    }
                }
            } else if (key == keys.DOWN) {
                target = that._nextVisible(focused);
            } else if (key == keys.UP && !e.altKey) {
                target = that._previousVisible(focused);
            } else if (key == keys.HOME) {
                target = that._nextVisible($());
            } else if (key == keys.END) {
                target = that._previousVisible($());
            } else if (key == keys.ENTER && !focused.find(".k-treeview-leaf").first().hasClass(DISABLED)) {
                if (!focused.find(".k-treeview-leaf").first().hasClass("k-selected")) {
                    if (!that._trigger(SELECT, focused)) {
                        that.select(focused);
                    }
                }
            } else if (key == keys.SPACEBAR && checkbox.length && !focused.find(".k-treeview-leaf").first().hasClass(DISABLED)) {
                checkbox.prop(CHECKED, !checkbox.prop(CHECKED))
                    .data(INDETERMINATE, false)
                    .prop(INDETERMINATE, false);

                that._checkboxChange({ target: checkbox });

                target = focused;
            } else if ((e.altKey && key === keys.UP) || key === keys.ESC) {
                that._closePopup();
            } else if ( key === keys.TAB) {
                e.preventDefault();
                that._closePopup();
            }

            if (target) {
                e.preventDefault();

                if (focused[0] != target[0]) {
                    that._trigger(NAVIGATE, target);
                    that.current(target);
                    that.scrollTo(target);
                }
            }
        },

        _closePopup: function() {
            this.dropdowntree.close();
            this.dropdowntree.wrapper.trigger("focus");
        },

        refresh: function(e) {
            this.defaultrefresh(e);

            if (this.dropdowntree.options.skipUpdateOnBind) {
                return;
            }

            if (e.action === "itemchange") {
                if (this.dropdowntree._isMultipleSelection()) {
                    if (e.field === "checked") {
                        this.dropdowntree._checkValue(e.items[0]);
                    }
                } else if (e.field !== "checked" && e.field !== "expanded" && e.items[0].selected) {
                    this.dropdowntree._selectValue(e.items[0]);
                }
            } else {
                this.dropdowntree.refresh(e);
            }
        }

    });

    kendo.ui._dropdowntree = Tree;

})(window.kendo.jQuery);

const __meta__ = {
    id: "dropdowntree",
    name: "DropDownTree",
    category: "web",
    description: "The DropDownTree widget displays a hierarchy of items and allows the selection of single or multiple items.",
    depends: [ "treeview", "popup", "binder", "html.chip", "html.chiplist", "html.button", "html.input", "label", "icons", "actionsheet" ]
};

(function($, undefined$1) {
    var kendo = window.kendo,
        ui = kendo.ui,
        html = kendo.html,
        encode = kendo.htmlEncode,
        mediaQuery = kendo.mediaQuery,
        Widget = ui.Widget,
        TreeView = ui._dropdowntree,
        ObservableArray = kendo.data.ObservableArray,
        ObservableObject = kendo.data.ObservableObject,
        extend = $.extend,
        activeElement = kendo._activeElement,
        ns = ".kendoDropDownTree",
        keys = kendo.keys,
        support = kendo.support,
        HIDDENCLASS = "k-hidden",
        WIDTH = "width",
        browser = support.browser,
        outerWidth = kendo._outerWidth,
        DOT = ".",
        DISABLED = "disabled",
        READONLY = "readonly",
        STATEDISABLED = "k-disabled",
        ARIA_DISABLED = "aria-disabled",
        HOVER = "k-hover",
        FOCUSED = "k-focus",
        HOVEREVENTS = "mouseenter" + ns + " mouseleave" + ns,
        TABINDEX = "tabindex",
        CLICK = "click",
        OPEN = "open",
        CLOSE = "close",
        CHANGE = "change",
        quotRegExp = /"/g,

        CHIP = ".k-chip";

    function getterFunction(field) {
        if (Array.isArray(field)) {
            var count = field.length;
            var levels = $.map(field, function(x) {
                return function(d) { return d[x];};
            });

            return function(dataItem) {
                var level = dataItem._level;

                if (!level && level !== 0) {
                    return;
                }

                return levels[Math.min(level, count - 1)](dataItem);
            };
        } else {
            return kendo.getter(field);
        }
    }

    var DropDownTree = kendo.ui.Widget.extend( {
        init: function(element, options) {
            var that = this;
            that.ns = ns;

            kendo.ui.Widget.fn.init.call(that, element, options);
            that._selection = that._getSelection();
            that._focusInputHandler = that._focusInput.bind(that);
            that._initial = that.element.val();
            that._values = [];

            var value = this.options.value;

            if (value === null || !value.length) {
                this._noInitialValue = true;
            }

            if (!this._isNullorUndefined(value)) {
                this._valueMethodCalled = true;
                value = this._isArrayOfObjects(value) && that.options.autoBind ? value.map(x=>x[that.options.dataValueField]) : value;
                this._values = Array.isArray(value) ? value.slice(0) : [value];
            }

            that.bigScreenMQL = mediaQuery("large");
            that.smallScreenMQL = mediaQuery("small");
            if (that.options.adaptiveMode == "auto") {
                that.smallScreenMQL.onChange(function() {
                    if (that.popup && kendo.isFunction(that.popup.fullscreen)) {
                        that.popup.fullscreen(that.smallScreenMQL.mediaQueryList.matches);
                    }
                });
            }

            this._bindLoader();
            this._inputTemplate();

            this._accessors();
            this._setTreeViewOptions(this.options);
            this._dataSource();
            this._selection._initWrapper();
            this._applyCssClasses();
            this._placeholder(true);
            this._tabindex();

            this.wrapper.data(TABINDEX, this.wrapper.attr(TABINDEX));

            this.tree = $('<div/>')
            .attr({
                tabIndex: -1,
                "aria-hidden": true
            });

            this.list = $("<div/>")
                .append(this.tree);

            this._header();
            this._noData();
            this._footer();
            this._reset();
            this._popup();

            if (that.options.adaptiveMode == "auto") {
                that.bigScreenMQL.onChange(() => {
                    that.list = $("<div class='k-list-container'/>")
                        .append(that.tree);
                    that._header.bind(that)();
                    that._noData.bind(that)();
                    that._footer.bind(that)();
                    that._reset.bind(that)();

                    if (that.popup) {
                        if (that.popup.wrapper) {
                            that.popup.wrapper.remove();
                        }
                        that.popup.destroy();
                        that.popup.element.remove();
                        that.popup = null;
                    }
                    if (that.treeview) {
                        that.treeview.destroy();
                    }

                    that._popup.bind(that)();
                    that._filterHeader.bind(that)();
                    that._treeview.bind(that)();

                    that._renderFooter.bind(that)();

                    that._checkAll.bind(that)();
                    that._enable.bind(that)();
                    that._toggleCloseVisibility.bind(that)();

                    that._aria.bind(that)();
                });
            }

            this._clearButton();
            this._filterHeader();
            this._treeview();

            this._renderFooter();

            this._checkAll();
            this._enable();
            this._toggleCloseVisibility();

            if (!this.options.autoBind) {
                var text = options.text || "";
                if (!this._isNullorUndefined(options.value)) {
                    this._preselect(options.value);
                } else if (text) {
                    this._textAccessor(text);
                } else if (options.placeholder) {
                    this._placeholder(true);
                }
            }

            var disabled = $(this.element).parents("fieldset").is(':disabled');

            if (disabled) {
                this.enable(false);
            }
            this._valueMethodCalled = false;

            if (this.options.label) {
                this._label();
            }
            if (this.options.loadOnDemand && this.options.loadOnDemand.valueMapper && this.options.value) {
                this.one('dataBound', () => this.requireValueMapper(this.options));
            }
            this._aria();

            kendo.notify(this);
        },

        _bindLoader: function() {
            const that = this;

            that._initLoader = initLoader.bind(that);
            that._initLoader();
        },

        _label: function() {
            var that = this;
            var options = that.options;
            var labelOptions = $.isPlainObject(options.label) ? options.label : {
                content: options.label
            };

            that.label = new kendo.ui.Label(null, $.extend({}, labelOptions, {
                widget: that,
                floatCheck: that._floatCheck.bind(that)
            }));

            that._inputLabel = that.label.element;
        },

        _floatCheck: function() {
            var hasValue = (this.value() && !this._isMultipleSelection()) || this.value().length || this.text();
            return !hasValue && !this.popup.visible();
        },

        _refreshFloatingLabel: function() {
            var that = this;

            if (that.label && that.label.floatingLabel) {
                that.label.floatingLabel.refresh();
            }
        },

        _preselect: function(data, value) {
            this._selection._preselect(data, value);
        },

        _setTreeViewOptions: function(options) {
            var treeviewOptions = {
                autoBind: options.autoBind,
                checkboxes: options.checkboxes,
                dataImageUrlField: options.dataImageUrlField,
                dataSpriteCssClassField: options.dataSpriteCssClassField,
                dataTextField: options.dataTextField,
                dataUrlField: options.dataUrlField,
                loadOnDemand: options.loadOnDemand,
                size: options.size
            };

            this.options.treeview = $.extend({}, treeviewOptions, this.options.treeview);

            if (options.template) {
                this.options.treeview.template = options.template;
            }

            if (options.size) {
                this.options.treeview.size = options.size;
            }
        },

        _dataSource: function() {
            const that = this;
            const rootDataSource = that.options.dataSource;
            that._requestStartHandler = that._showBusy;
            that._requestEndHandler = that._hideBusy;
            that._errorHandler = function() {
                that._hideBusy();
            };

            that.dataSource = kendo.data.HierarchicalDataSource.create(rootDataSource).bind("progress", that._requestStartHandler)
            .bind("error", that._errorHandler).bind("requestEnd", that._requestEndHandler);

            if (rootDataSource) {
                $.extend(that.options.treeview,{
                    dataSource: that.dataSource
                });
            }
        },

        _popupOpen: function() {
            var popup = this.popup;
            popup.wrapper = kendo.wrap(popup.element);
        },

        _getSelection: function() {
            if (this._isMultipleSelection()) {
                this.options._altname = "MultiSelectTree";
                return new ui.DropDownTree.MultipleSelection(this);
            } else {
                return new ui.DropDownTree.SingleSelection(this);
            }
        },

        setDataSource: function(dataSource) {
            this._isDataSourceSet = true;
            if (this._tags) {
                this._noInitialValue = true;
                this.setValue([]);
                this._tags.empty();
                this.span.show();
                this._multipleTags.empty();
            }
            this.dataSource = dataSource;
            this.treeview.setDataSource(dataSource);
            this._isDataSourceSet = false;
        },

        _isMultipleSelection: function() {
            return this.options && (this.options.treeview.checkboxes || this.options.checkboxes);
        },

        _isArrayOfObjects: function(value) {
            return Array.isArray(value) && value.map(x=> typeof x == "object").includes(true);
        },

        options: {
            name: "DropDownTree",
            adaptiveMode: "none",
            animation: {},
            autoBind: true,
            autoClose: true,
            autoWidth: false,
            clearButton: true,
            dataTextField: "",
            dataValueField: "",
            dataImageUrlField: "",
            dataSpriteCssClassField: "",
            dataUrlField: "",
            delay: 500,
            enabled: true,
            enforceMinLength: false,
            filter: "none",
            height: 200,
            ignoreCase: true,
            index: 0,
            loadOnDemand: false,
            messages: {
                "singleTag": "item(s) selected",
                "clear": "clear",
                "deleteTag": "delete",
                "noData": "No data found."
            },
            minLength: 1,
            checkboxes: false,
            noDataTemplate: true,
            placeholder: "",
            checkAll: false,
            checkAllTemplate: () => "Check all",
            tagMode: "multiple",
            template: null,
            text: null,
            treeview: {},
            valuePrimitive: false,
            footerTemplate: () => "",
            headerTemplate: () => "",
            value: null,
            valueTemplate: null,
            popup: null,
            filterLabel: null,
            size: "medium",
            fillMode: "solid",
            rounded: "medium",
            label: null
        },

        events: [
            "open",
            "close",
            "dataBound",
            CHANGE,
            "select",
            "filtering"
        ],

        focus: function() {
            this.wrapper.trigger("focus");
        },

        dataItem: function(node) {
            return this.treeview.dataItem(node);
        },

        readonly: function(readonly) {
            this._editable({
                readonly: readonly === undefined$1 ? true : readonly,
                disable: false
            });
            this._toggleCloseVisibility();

            if (this.label && this.label.floatingLabel) {
                this.label.floatingLabel.readonly(readonly === undefined$1 ? true : readonly);
            }
        },

        enable: function(enable) {
            this._editable({
                readonly: false,
                disable: !(enable = enable === undefined$1 ? true : enable)
            });
            this._toggleCloseVisibility();

            if (this.label && this.label.floatingLabel) {
                this.label.floatingLabel.enable(enable = enable === undefined$1 ? true : enable);
            }
        },

        toggle: function(open) {
            this._toggle(open);
        },

        open: function() {
            var popup = this.popup;

            if (!this.options.autoBind && !this.dataSource.data().length) {
                this.treeview._progress(true);
                if (this._isFilterEnabled()) {
                    this._search();
                } else {
                    this.dataSource.fetch();
                }
            }

            if (popup.visible() || !this._allowOpening()) {
                return;
            }

            popup.one("activate", this._focusInputHandler);
            popup._hovered = true;
            popup.open();
        },

        close: function() {
            this.popup.close();
        },

        search: function(word) {
            var options = this.options;
            var filter;
            clearTimeout(this._typingTimeout);

            if ((!options.enforceMinLength && !word.length) || word.length >= options.minLength) {
                filter = this._getFilter(word);
                if (this.trigger("filtering", { filter: filter }) ||
                 Array.isArray(this.options.dataTextField)) {
                    return;
                }

                this._filtering = true;
                this.treeview.dataSource.filter(filter);
            }
        },

        _mapValuesToId: function(values) {
            const that = this;

            if (typeof that.dataSource.options.schema.model === 'function') {
                throw new Error("The valueMapper needs dataSource.schema");
            }
            const field = that.dataSource.options.schema.model.id;

            return values.map((item) => item[field]);
        },

        requireValueMapper: function(options, value) {
            const that = this;
            let hasValue = value ? value : options.value;
            hasValue = hasValue && (hasValue instanceof Array ? hasValue : [hasValue]);

            if (hasValue && options.loadOnDemand && typeof options.loadOnDemand.valueMapper !== "function") {
                throw new Error("ValueMapper is not provided while the value is being set. See http://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization#the-valuemapper-function");
            }

            if (hasValue.length) {
                let index = 0;
                that.options.loadOnDemand.valueMapper(valueMapperOptions(that.options, hasValue, that._useValueMapper.bind(that, hasValue, index)));

            }
        },

        _useValueMapper: function(data, index, response) {
            const that = this;
            const deferred = $.Deferred();
            that._deferred = deferred;

            that._handleValueMapperData(index, response);

            deferred.done(() => {
                index++;
                if (index < data.length) {
                    that._useValueMapper(data, index, response);
                }
            });
        },

        _handleValueMapperData: function(index, data) {
            const that = this;

            const response = data[index] instanceof Array ? data[index] : data;
            if (!response || !response.length) {
                return;
            }

                let idIndex = 0;
                that._loadItem(response, idIndex);
        },

        _loadItem: function(data, index) {
            const that = this;
            const node = that.dataSource.get(data[index]);
                if (node) {
                    node.load().done(() => {
                        index++;
                        if (index < data.length - 1) {
                            that._loadItem(data, index);
                        } else {
                            that._deferred.resolve();
                        }
                    });
                }
        },

        _getFilter: function(word) {
            return {
                field: this.options.dataTextField,
                operator: this.options.filter,
                value: word,
                ignoreCase: this.options.ignoreCase
              };
        },

        refresh: function() {
            var data = this.treeview.dataSource.flatView();
            this._renderFooter();
            this._renderNoData();
            if (this.filterInput && this.checkAll) {
                this.checkAll.toggle(!this.filterInput.val().length);
            }

            this.tree.toggle(!!data.length);
            $(this.noData).toggle(!data.length);
        },

        setOptions: function(options) {
            if (this.options.checkboxes != options.checkboxes) {
                delete options.checkboxes;
                window.console.warn('setOptions method can not be used to set the checkboxes option in DropDownTree');
            }

            Widget.fn.setOptions.call(this, options);

            this._setTreeViewOptions(options);
            this._dataSource();
            if (this.options.treeview || options.size) {
                this.treeview.destroy();
                this._treeview();
            }

            if (options.height && this.tree) {
                this.tree.css('max-height', options.height);
            }

            this._header();
            this._noData();
            this._footer();

            this._renderFooter();
            this._renderNoData();
            if (this.span && (this._isMultipleSelection() || this.span.hasClass("k-readonly"))) {
                this._placeholder(true);
            }
            this._inputTemplate();
            this._accessors();
            this._filterHeader();
            this._checkAll();
            this._enable();
            if (options && (options.enable || options.enabled)) {
                this.enable(true);
            }
            this._clearButton();

            if (options === undefined$1 || options === null) {
                options = {};
            }

            if (options.label && this._inputLabel) {
                this.label.setOptions(options.label);
            } else if (options.label === false) {
                this.label._unwrapFloating();
                this._inputLabel.remove();
                delete this._inputLabel;
            } else if (options.label) {
                this._label();
            }

            this._aria();
        },

        destroy: function() {
            kendo.ui.Widget.fn.destroy.call(this);
            if (this.treeview) {
                this.treeview.destroy();
            }
            this.popup.destroy();

            this.wrapper.off(ns);
            this._clear.off(ns);
            if (this.filterInput) {
                this.filterInput.off(ns);
            }

            if (this.tagList) {
                this.tagList.off(ns);
            }

            if (this.bigScreenMQL) {
                this.bigScreenMQL.destroy();
            }

            if (this.smallScreenMQL) {
                this.smallScreenMQL.destroy();
            }

            kendo.unbind(this.tagList);
            if (this.options.checkAll && this.checkAll) {
                this.checkAll.off(ns);
            }

            if (this._form) {
                this._form.off("reset", this._resetHandler);
            }

            if (this.label) {
                this.label.destroy();
            }
        },

        setValue: function(value) {
            value = Array.isArray(value) || value instanceof ObservableArray ? value.slice(0) : [value];

            this._values = value;
        },

        items: function() {
            return this.treeview.items();
        },

        _useValueMapperWithValue: function(value) {
            const that = this;
            let values = value instanceof Array ? value : [value];

            if (typeof values[0] === 'object') {
                values = that._mapValuesToId(values);
            }
            that.requireValueMapper(this.options, values);
            that._deferred.done(() => {
                that._selection._setValue(values);
            });
        },

        value: function(value) {
            const that = this;
            const loadOnDemand = that.options.loadOnDemand;
            if (value) {
                if (that.filterInput && that.dataSource._filter) {
                    that._filtering = true;
                    that.dataSource.filter({});
                } else if (!that.dataSource.data().length || !that.treeview.dataSource.data().length) {
                    if (!loadOnDemand) {
                        that.treeview.one('loadCompleted', function() {
                            that._selection._setValue(value);
                        });

                        if (!that.options.autoBind && that.options.valuePrimitive) {
                            that.dataSource.fetch();
                        }
                    } else if (loadOnDemand.valueMapper) {
                        that.one('dataBound', () => {
                            that._useValueMapperWithValue(value);
                        });
                    } else {
                        that.dataSource.fetch(function() {
                            that._selection._setValue(value);
                        });
                    }

                    return;
                } else if (loadOnDemand && loadOnDemand.valueMapper) {
                    that._useValueMapperWithValue(value);
                return;
                }
            }

            return that._selection._setValue(value);
        },

        text: function(text) {
            var loweredText;
            var ignoreCase = this.options.ignoreCase;

            text = text === null ? "" : text;

            if (text !== undefined$1 && !this._isMultipleSelection()) {
                if (typeof text !== "string") {
                    this._textAccessor(text);
                    return;
                }

                loweredText = ignoreCase ? text : text.toLowerCase();

                this._selectItemByText(loweredText);

                this._textAccessor(loweredText);
                this._refreshFloatingLabel();
            } else {
                return this._textAccessor();
            }

        },

        _aria: function() {
            this.wrapper.find("span.k-input-inner");

            this.wrapper.attr({
                "aria-haspopup": "tree",
                "aria-expanded": false,
                "aria-controls": this.treeview.element.attr("id"),
                "role": "combobox"
            });

            this._activeId = kendo.guid();
            this._ariaLabel(this.wrapper);

            if (this.filterInput && this.options.filterLabel) {
                this.filterInput.attr("aria-label", this.options.filterLabel);
            }

            if (this.options.checkboxes) {
                this.wrapper.attr({
                    "aria-describedby": this.tagList[0].id
                });
                this.tagList.attr({
                    "role": "listbox",
                    "aria-orientation": "horizontal",
                    "aria-multiselectable": true
                });
                this._ariaLabel(this.tagList);
            }
        },

        _header: function() {
            var list = this;
            var header = $(list.header);
            var template = list.options.headerTemplate;

            kendo.destroy(header);
            header.remove();

            if (!template) {
                list.header = null;
                return;
            }

            var headerTemplate = typeof template !== "function" ? kendo.template(template) : template;
            header = $(headerTemplate({}));

            list.header = header[0] ? header : null;
            list.list.prepend(header);
        },

        _noData: function() {
            var list = this;
            var noData = $(list.noData);
            var template = list.options.noDataTemplate === true ? encode(list.options.messages.noData) : list.options.noDataTemplate;

            kendo.destroy(noData);
            noData.remove();

            if (!template) {
                list.noData = null;
                return;
            }

            list.noData = $('<div class="k-no-data"></div>').hide().appendTo(list.list);
            list.noDataTemplate = typeof template !== "function" ? kendo.template(() => template) : template;
        },

        _renderNoData: function() {
            var list = this;
            var noData = list.noData;

            if (!noData) {
                return;
            }

            noData.html(list.noDataTemplate({ instance: list }));
        },

        _footer: function() {
            var list = this;
            var footer = $(list.footer);
            var template = list.options.footerTemplate;

            kendo.destroy(footer);
            footer.remove();

            if (!template) {
                list.footer = null;
                return;
            }

            list.footer = $('<div class="k-footer"></div>').appendTo(list.list);
            list.footerTemplate = typeof template !== "function" ? kendo.template(template) : template;
        },

        _renderFooter: function() {
            var list = this;
            var footer = list.footer;

            if (!footer) {
                return;
            }

            footer.html(list.footerTemplate({ instance: list }));
        },

        _enable: function() {
            var that = this,
                options = that.options,
                disabled = that.element.is("[disabled]");

            if (options.enable !== undefined$1) {
                options.enabled = options.enable;
            }

            if (!options.enabled || disabled) {
                that.enable(false);
            } else {
                that.readonly(that.element.is("[readonly]"));
            }
        },

        _adjustListWidth: function() {
            var that = this,
                list = that.list,
                width = list[0].style.width,
                wrapper = that.wrapper,
                computedStyle, computedWidth;

            if (!list.data(WIDTH) && width) {
                return;
            }

            computedStyle = window.getComputedStyle ? window.getComputedStyle(wrapper[0], null) : 0;
            computedWidth = parseFloat(computedStyle && computedStyle.width) || outerWidth(wrapper);

            if (computedStyle && browser.msie) { // getComputedStyle returns different box in IE.
                computedWidth += parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight) + parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
            }

            if (list.css("box-sizing") !== "border-box") {
                width = computedWidth - (outerWidth(list) - list.width());
            } else {
                width = computedWidth;
            }

            list.css({
                fontFamily: wrapper.css("font-family"),
                width: that.options.autoWidth ? "auto" : width,
                minWidth: width,
                whiteSpace: that.options.autoWidth ? "nowrap" : "normal"
            })
            .data(WIDTH, width);

            return true;
        },

        _reset: function() {
            var that = this,
                element = that.element,
                formId = element.attr("form"),
                form = formId ? $("#" + formId) : element.closest("form");

            if (form[0]) {
                that._resetHandler = function() {
                    setTimeout(function() {
                        that.value(that._initial);
                    });
                };

                that._form = form.on("reset", that._resetHandler);
            }
        },

        _hasActionSheet: function() {
            return this.options.adaptiveMode === "auto" && !this.bigScreenMQL.mediaQueryList.matches;
        },

        _popup: function() {
            var that = this;
            var list = this;

            if (that.options.checkboxes) {
                if (that.options.checkAll) {
                    that.list.attr("role", "application");
                }

                that.list.addClass("k-multiselecttree-popup");
            } else {
                that.list.addClass("k-dropdowntree-popup");
            }

            if (list.options.adaptiveMode == "auto" && !list.bigScreenMQL.mediaQueryList.matches) {
                $(document.body).append(list.list);
                list.popup = new ui.ActionSheet(list.list, {
                    adaptive: true,
                    hideOverflowContent: true,
                    headerTemplate: (options) =>
                        `<div class="k-text-center k-actionsheet-titlebar" >` +
                            '<div class="k-actionsheet-titlebar-group k-hbox">' +
                                `<div  class="k-actionsheet-title">` +
                                    `<div class="k-text-center">${list.label ? list.label.element.text() : list.options.label || list.options.placeholder || "Select"}</div>` +
                                    (list.options.placeholder && (list.label || list.options.label) ? `<div class="k-actionsheet-subtitle k-text-center">${list.options.placeholder || ""}</div>` : "") +
                                '</div>' +
                                (options.closeButton ?
                                '<div class="k-actionsheet-actions">' +
                                    kendo.html.renderButton(`<button tabindex="-1" ${kendo.attr("ref-actionsheet-close-button")}></button>`, { icon: "x", fillMode: "flat", size: "large" }) +
                                '</div>'
                                : "") +
                                '</div>' +
                            (this._isFilterEnabled() ? `<div class="k-actionsheet-titlebar-group k-actionsheet-filter"></div>` : '') +
                        '</div>',
                    closeButton: true,
                    focusOnActivate: false,
                    fullscreen: list.smallScreenMQL.mediaQueryList.matches,
                    popup: extend({}, list.options.popup, {
                        anchor: list.wrapper,
                        open: list._openHandler.bind(list),
                        close: list._closeHandler.bind(list),
                        animation: list.options.animation,
                        isRtl: support.isRtl(list.wrapper),
                        autosize: list.options.autoWidth,
                    }),
                    deactivate: () => {
                        this._refreshFloatingLabel();
                    },
                    activate: () => {
                        this._refreshFloatingLabel();
                    }
                });
            } else {
                list.popup = new ui.Popup(list.list, extend({}, list.options.popup, {
                    anchor: list.wrapper,
                    open: list._openHandler.bind(list),
                    close: list._closeHandler.bind(list),
                    animation: list.options.animation,
                    isRtl: support.isRtl(list.wrapper),
                    autosize: list.options.autoWidth,
                    deactivate: () => {
                        this._refreshFloatingLabel();
                    },
                    activate: () => {
                        this._refreshFloatingLabel();
                    }
                }));

                list.popup.one("open", list._popupOpen.bind(list));
            }
        },

        _allowOpening: function() {
            return this.options.noDataTemplate || this.treeview.dataSource.flatView().length;
        },

        _placeholder: function(show) {
            if (this.span) {
                this.span.toggleClass("k-readonly", show).text(show ? this.options.placeholder : "");
            }
        },

        _currentValue: function(dataItem) {
            var currentValue = this._value(dataItem);
            if (!currentValue && currentValue !== 0) {
                currentValue = dataItem;
            }

            return currentValue;
        },

        _checkValue: function(dataItem) {
            var value = "";
            var indexOfValue = -1;
            var currentValue = this.value();
            var isMultiple = this.options.tagMode === "multiple";

            if (dataItem || dataItem === 0) {
                if (dataItem.level) {
                    dataItem._level = dataItem.level();
                }

                value = this._currentValue(dataItem);

                indexOfValue = currentValue.indexOf(value);
            }

            if (dataItem.checked) {
                var alreadyAddedTag = $.grep(this._tags, function( item ) {
                    return item.uid === dataItem._tagUid;
                });

                if (alreadyAddedTag.length) {
                    return;
                }

                var itemToAdd = new ObservableObject(dataItem.toJSON());
                dataItem._tagUid = itemToAdd.uid;
                this._tags.push(itemToAdd);

                if (this._tags.length === 1) {
                    this.span.hide();

                    if (!isMultiple) {
                        this._multipleTags.push(itemToAdd);
                    }
                }

                if (indexOfValue === -1) {
                    currentValue.push(value);
                    this.setValue(currentValue);
                }
            } else {
                var itemToRemove = this._tags.find(function(item) {
                    return item.uid === dataItem._tagUid;
                });

                var idx = this._tags.indexOf(itemToRemove);

                if (idx !== -1) {
                    this._tags.splice(idx, 1);
                } else {
                    this._treeViewCheckAllCheck(dataItem);
                    return;
                }

                if (this._tags.length === 0) {
                    this.span.show();
                    if (!isMultiple) {
                        this._multipleTags.splice(0, 1);
                    }
                }
                if (indexOfValue !== -1) {
                    currentValue.splice(indexOfValue, 1);
                    this.setValue(currentValue);
                }
            }

            this._treeViewCheckAllCheck(dataItem);
            if (!this._preventChangeTrigger && !this._valueMethodCalled && !this.dataSource._requestInProgress) {
                this.trigger(CHANGE);
            }

            if (this.options.autoClose && this.popup.visible()) {
                this.close();
                this.wrapper.trigger("focus");
            }

            this.popup.position();
            this._toggleCloseVisibility();
            this._updateSelectedOptions();
        },

        _updateSelectedOptions: function() {
            if (this.element[0].tagName.toLowerCase() !== 'select') {
                return;
            }

            var selectedItems = this._tags;
            var options = '';
            var dataItem = null;
            var value = null;

            if (selectedItems.length) {
                for (var idx = 0; idx < selectedItems.length; idx++) {
                    dataItem = selectedItems[idx];

                    value = this._value(dataItem);
                    options += this._option(value, this._text(dataItem), true);
                }
            }

            this.element.html(options);
        },

        _option: function(dataValue, dataText, selected) {
            var option = "<option";

            if (dataValue !== undefined$1) {
                dataValue += "";

                if (dataValue.indexOf('"') !== -1) {
                    dataValue = dataValue.replace(quotRegExp, "&quot;");
                }

                option += ' value="' + dataValue + '"';
            }

            if (selected) {
                option += ' selected';
            }

            option += ">";

            if (dataText !== undefined$1) {
                option += kendo.htmlEncode(dataText);
            }

            return option += "</option>";
        },

        _selectValue: function(dataItem) {
            var value = "";
            var text = "";

            if (dataItem || dataItem === 0) {
                if (dataItem.level) {
                    dataItem._level = dataItem.level();
                }
                text = this._text(dataItem) || dataItem;
                value = this._currentValue(dataItem);
            }

            if (value === null) {
                value = "";
            }
            this.setValue(value);
            this._textAccessor(text, dataItem);
            this._accessor(value);

            if (!this._preventChangeTrigger && !this._valueMethodCalled) {
                this.trigger(CHANGE);
            }
            this._valueMethodCalled = false;

            if (this.options.autoClose && this.popup.visible()) {
                this.close();
                this.wrapper.trigger("focus");
            }

            this.popup.position();
            this._toggleCloseVisibility();
        },

        _clearClick: function(e) {
            e.stopPropagation();
            this.wrapper.trigger("focus");
            this._clearTextAndValue();
        },

        _clearTextAndValue: function() {
            var shouldTrigger = this._selection._clearValue();

            this.setValue([]);
            this._clearInput();
            this._clearText();
            this.popup.position();
            this._toggleCloseVisibility();
            this._refreshFloatingLabel();

            if (shouldTrigger) {
                this.trigger(CHANGE);
            }
        },

        _clearText: function() {
            if (this.options.placeholder) {
                this._placeholder(true);
            } else {
                if (this.span) {
                    this.span.html("");
                }
            }
        },

        _inputTemplate: function() {
            var template = this.options.valueTemplate;

            if (!template) {
                template = (data) => encode(this._text(data));
            } else {
                template = kendo.template(template);