@progress/kendo-angular-dropdowns 6.0.2-dev.202202251358 → 7.0.0-next.202203232111

package/dist/es/dropdowntrees/multiselecttree.component.js

@@ -1,1683 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, Inject, Input, isDevMode, NgZone, Optional, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { anyChanged, guid, hasObservers, Keys, KendoInput, isDocumentAvailable } from '@progress/kendo-angular-common';
-import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
-import { NavigationService } from '../common/navigation/navigation.service';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { DataBoundComponent, ExpandableComponent, TreeViewComponent } from '@progress/kendo-angular-treeview';
-import { DataService } from '../common/data.service';
-import { DisabledItemsService } from '../common/disabled-items/disabled-items.service';
-import { SelectionService } from '../common/selection/selection.service';
-import { PreventableEvent } from '../common/models/preventable-event';
-import { NavigationAction } from '../common/navigation/navigation-action';
-import { getFillModeClass, getRoundedClass, getSizeClass, hasProps, isArray, isObject, isObjectArray, isPresent, isUntouched, noop, parseNumber, valueFrom } from '../common/util';
-import { RemoveTagEvent } from '../common/models/remove-tag-event';
-import { MultiSelectTreeMessages } from '../common/constants/error-messages';
-import { HeaderTemplateDirective } from '../common/templates/header-template.directive';
-import { FooterTemplateDirective } from '../common/templates/footer-template.directive';
-import { NodeTemplateDirective } from './templates/node-template.directive';
-import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
-import { TagTemplateDirective } from '../common/templates/tag-template.directive';
-import { GroupTagTemplateDirective } from '../common/templates/group-tag-template.directive';
-import { TOUCH_ENABLED } from '../common/constants/touch-enabled';
-import { merge, of } from 'rxjs';
-import { filter, tap } from 'rxjs/operators';
-/* tslint:disable:member-ordering */
-var DEFAULT_POPUP_SETTINGS = { animate: true };
-var DEFAULT_CHECKABLE_SETTINGS = { checkChildren: true, checkOnClick: true };
-var hasChildren = function () { return false; };
-var ɵ0 = hasChildren;
-var fetchChildren = function () { return of([]); };
-var ɵ1 = fetchChildren;
-var itemDisabled = function () { return false; };
-var ɵ2 = itemDisabled;
-var isNodeVisible = function () { return true; };
-var ɵ3 = isNodeVisible;
-/**
- * Represents the [Kendo UI MultiSelectTree component for Angular]({% slug overview_multiselecttree %}).
- */
-var MultiSelectTreeComponent = /** @class */ (function () {
-    function MultiSelectTreeComponent(wrapper, popupService, renderer, navigationService, _zone, localization, cdr, touchEnabled) {
-        this.wrapper = wrapper;
-        this.popupService = popupService;
-        this.renderer = renderer;
-        this.navigationService = navigationService;
-        this._zone = _zone;
-        this.localization = localization;
-        this.cdr = cdr;
-        this.touchEnabled = touchEnabled;
-        this.hostClasses = true;
-        this.role = 'combobox';
-        this.ariaHasPopup = 'tree';
-        /**
-         * Sets the levels in the data set where the values can be found when `valueField` is an Array.
-         * The field serves to correctly allocate a data item used when the MultiSelectTree is initialized with a value.
-         */
-        this.valueDepth = [];
-        /**
-         * The hint which is displayed when the component is empty.
-         */
-        this.placeholder = "";
-        /**
-         * Sets the height of the options list. By default, `listHeight` is 200px.
-         *
-         * > The `listHeight` property affects only the list of options and not the whole popup container.
-         * > To set the height of the popup container, use `popupSettings.height`.
-         */
-        this.listHeight = 200;
-        /**
-         * Sets the disabled state of the component.
-         */
-        this.disabled = false;
-        /**
-         * Sets the read-only state of the component.
-         */
-        this.readonly = false;
-        /**
-         * Specifies the type of the selected value
-         * ([more information and example]({% slug valuebinding_multiselecttree %}#toc-primitive-values)).
-         * If set to `true`, the selected value has to be a primitive one.
-         */
-        this.valuePrimitive = false;
-        /**
-         * Indicates whether the child nodes will be fetched on node expand or will be initially prefetched.
-         * @default false
-         */
-        this.loadOnDemand = false;
-        /**
-         * @hidden
-         *
-         * Used by the kendo-label and kendo-floatinglabel to access and associate the focusable element with the provided label via aria-labelledby.
-         */
-        this.focusableId = "k-" + guid();
-        /**
-         * If set to `true`, renders a button on hovering over the component.
-         * Clicking this button resets the value of the component to `undefined` and triggers the `change` event.
-         * @default true
-         */
-        this.clearButton = true;
-        /**
-         * Renders the built-in input element for filtering the MultiSelectTree.
-         * If set to `true`, the component emits the `filterChange` event, which can be used to [filter the MultiSelectTree manually]({% slug filtering_multiselecttree %}#toc-manual-filtering).
-         * A built-in filtering implementation is available to use with the [`kendoMultiSelectTreeHierarchyBinding`]({% slug api_dropdowns_multiselecttreehierarchybindingdirective %}) and [`kendoMultiSelectTreeFlatBinding`]({% slug api_dropdowns_multiselecttreeflatbindingdirective %}) directives.
-         * @default false
-         */
-        this.filterable = false;
-        /**
-         * If `checkАll` is set to `true` and the checkboxes are enabled, a tri-state checkbox appears above the embedded treeview.
-         * Clicking the checkbox checks or unchecks all enabled items of the treeview that are loaded.
-         * @default false
-         */
-        this.checkAll = false;
-        /**
-         * A function which determines if a specific node has child nodes.
-         */
-        this.hasChildren = hasChildren;
-        /**
-         * A function which provides the child nodes for a given parent node.
-         */
-        this.fetchChildren = fetchChildren;
-        /**
-         * A callback which determines whether a tree node should be rendered as hidden. The utility .k-display-none class is used to hide the nodes.
-         * Useful for custom filtering implementations.
-         */
-        this.isNodeVisible = isNodeVisible;
-        /**
-         * A function that is executed for each data item and determines if a specific item is disabled.
-         */
-        this.itemDisabled = itemDisabled;
-        /**
-         * A user-defined callback function which receives an array of selected data items and maps them to an array of tags.
-         *
-         * @param { Any[] } dataItems - The selected data items from the list.
-         * @returns { Any[] } - The tags that will be rendered by the component.
-         */
-        this.tagMapper = function (tags) { return tags || []; };
-        /**
-         * Fires each time the user focuses the MultiSelectTree.
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time the MultiSelectTree gets blurred.
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * Fires each time the popup is about to open
-         * ([see example]({% slug openstate_multiselecttree %})).
-         * This event is preventable. If you cancel it, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires after the popup has been opened.
-         */
-        this.opened = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close
-         * ([see example]({% slug openstate_multiselecttree %})).
-         * This event is preventable. If you cancel it, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        /**
-         * Fires after the popup has been closed.
-         */
-        this.closed = new EventEmitter();
-        /**
-         * Fires when the user expands a node in the popup TreeView.
-         */
-        this.nodeExpand = new EventEmitter();
-        /**
-         * Fires when the user collapses a node in the popup TreeView.
-         */
-        this.nodeCollapse = new EventEmitter();
-        /**
-         * Fires each time the value is changed
-         * ([see example]({% slug overview_multiselecttree %}#toc-events)).
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * Fires each time a tag is about to be removed.
-         * This event is preventable. If you cancel it, the tag will not be removed.
-         */
-        this.removeTag = new EventEmitter();
-        /**
-         * Fires when the value of the built-in filter input element changes.
-         */
-        this.filterChange = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.filterStateChange = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.checkedItems = [];
-        /**
-         * @hidden
-         */
-        this.checkBy = function (item) { return item; };
-        /**
-         * @hidden
-         */
-        this.showAfter = 0;
-        /**
-         * @hidden
-         */
-        this.allNodesHidden = false;
-        this.tagListId = guid();
-        this.tagPrefix = "tag-" + guid();
-        this.focusedTagIndex = undefined;
-        this._value = [];
-        this._tabindex = 0;
-        this._popupSettings = DEFAULT_POPUP_SETTINGS;
-        this._checkableSettings = DEFAULT_CHECKABLE_SETTINGS;
-        this._isFocused = false;
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
-        this.subscriptions = [];
-        this.lastAction = 'check';
-        this.onTouchedCallback = noop;
-        this.onChangeCallback = noop;
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.subscribeEvents();
-        this.subscribeFocusEvents();
-    }
-    MultiSelectTreeComponent_1 = MultiSelectTreeComponent;
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "isDisabled", {
-        get: function () {
-            return this.disabled;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "isLoading", {
-        get: function () {
-            return this.loading;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "id", {
-        get: function () {
-            return this.focusableId;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "hostTabIndex", {
-        get: function () {
-            return this.tabindex;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "isAriaExpanded", {
-        get: function () {
-            return this.isOpen;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "isReadonly", {
-        get: function () {
-            return this.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "ariaDescribedBy", {
-        get: function () {
-            return this.tagListId;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "ariaActiveDescendant", {
-        get: function () {
-            return this.focusedTagId;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.handleClick = function () {
-        this.togglePopup(!this.isOpen);
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.handleKeydown = function (event) {
-        var deleteTag = this.isWrapperActive && event.keyCode === Keys.Backspace && this.tags.length > 0;
-        if (deleteTag) {
-            this.handleBackspace();
-            return;
-        }
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        var eventData = event;
-        var action = this.navigationService.process({
-            originalEvent: eventData
-        });
-        if (action === NavigationAction.Open) {
-            eventData.preventDefault();
-        }
-    };
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "treeview", {
-        get: function () {
-            return this._treeview;
-        },
-        set: function (treeview) {
-            var _this = this;
-            this._treeview = treeview;
-            if (treeview) {
-                // If filtering is enabled, focus the TreeView on mobile devices instead of the filter input
-                if (this.isFocused && !this.filterable && !this.checkAll || this.touchEnabled) {
-                    treeview.focus();
-                }
-                /**
-                 * the treeview animations are initially disabled (we don't want expand animations during popup opening)
-                 * re-enables the animations for user interaction
-                 * The Promise is required to properly change the `animate` property when
-                 * the popup is appended to a container and opened upon initialization.
-                 * Otherwise, the "Expression has changed..." type error will be thrown.
-                 */
-                Promise.resolve(null).then(function () { return _this.treeview.animate = true; });
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "tabindex", {
-        get: function () {
-            return this.disabled ? -1 : this._tabindex;
-        },
-        /**
-         * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
-         */
-        set: function (value) {
-            var providedTabIndex = parseNumber(value);
-            var defaultTabIndex = 0;
-            this._tabindex = !isNaN(providedTabIndex) ? providedTabIndex : defaultTabIndex;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "size", {
-        get: function () {
-            return this._size;
-        },
-        /**
-         * Sets the size of the component.
-         *
-         * The possible values are:
-         * * `'small'`
-         * * `'medium'` (default)
-         * * `'large'`
-         * * `null`
-         *
-         */
-        set: function (size) {
-            this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
-            if (size) {
-                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
-            }
-            this._size = size;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "rounded", {
-        get: function () {
-            return this._rounded;
-        },
-        /**
-         * Sets the border radius of the component.
-         *
-         * The possible values are:
-         * * `'small'`
-         * * `'medium'` (default)
-         * * `'large'`
-         * * `'full'`
-         * * `null`
-         *
-         */
-        set: function (rounded) {
-            this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-            if (rounded) {
-                this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
-            }
-            this._rounded = rounded;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "fillMode", {
-        get: function () {
-            return this._fillMode;
-        },
-        /**
-         * Sets the fillMode of the component.
-         *
-         * The possible values are:
-         * * `'flat'`
-         * * `'solid'` (default)
-         * * `'outline'`
-         * * `null`
-         *
-         */
-        set: function (fillMode) {
-            this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
-            if (fillMode) {
-                this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
-            }
-            this._fillMode = fillMode;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "popupSettings", {
-        get: function () {
-            return this._popupSettings;
-        },
-        /**
-         * Configures the popup of the MultiSelectTree.
-         *
-         * The available options are:
-         * - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
-         * - `width: Number | String`—Sets the width of the popup container. By default, the width of the host element is used. If set to `auto`, the component automatically adjusts the width of the popup and no item labels are wrapped.
-         * - `height: Number`—Sets the height of the popup container.
-         * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
-         * - `appendTo: "root" | "component" | ViewContainerRef`—Specifies the component to which the popup will be appended.
-         */
-        set: function (settings) {
-            this._popupSettings = Object.assign({}, DEFAULT_POPUP_SETTINGS, settings);
-            // `detectChanges` needed, otherwise upon value initialization and `appendTo` property
-            // an error is thrown => ExpressionChangedAfterItHasBeenCheckedError
-            this.cdr.detectChanges();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "checkableSettings", {
-        get: function () {
-            return this._checkableSettings;
-        },
-        /**
-         * Defines the checkable settings of the MultiSelecTree nodes.
-         * If no value is provided, the default [`CheckableSettings`]({% slug api_dropdowns_multiselecttreecheckablesettings %}) are applied.
-         */
-        set: function (settings) {
-            this._checkableSettings = Object.assign({}, DEFAULT_CHECKABLE_SETTINGS, settings);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "data", {
-        get: function () {
-            return this._nodes;
-        },
-        /**
-         * Sets the data of the MultiSelectTree.
-         *
-         * > The data has to be provided in an array-like list with objects.
-         */
-        set: function (data) {
-            this._nodes = data;
-            this.setState();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "value", {
-        get: function () {
-            return this._value;
-        },
-        /**
-         * Sets the value of the MultiSelectTree.
-         * It can either be of the primitive (string, numbers) or of the complex (objects) type.
-         * To define the type, use the `valuePrimitive` option.
-         *
-         */
-        set: function (value) {
-            this._value = value ? value : [];
-            this.setState();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "dataItems", {
-        get: function () {
-            var _this = this;
-            return this._dataItems || this.value.map(function (value, index) { return ({
-                dataItem: value,
-                index: null,
-                level: _this.valueDepth[index] || 0
-            }); });
-        },
-        /**
-         * Keeps the current `dataItems` object in order to resolve selection.
-         * Needs to be provided when when programmatically setting a `value` and `valuePrimitive` is set to `true`.
-         */
-        set: function (items) {
-            var _this = this;
-            this._dataItems = (items || []).map(function (item, index) {
-                if (hasProps(item, ['dataItem', 'index', 'level'])) {
-                    return item;
-                }
-                return {
-                    dataItem: item,
-                    index: null,
-                    level: _this.valueDepth[index] || 0
-                };
-            });
-            this.setState();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "focusedTagId", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            if (!isPresent(this.focusedTagIndex) || this.isOpen) {
-                return null;
-            }
-            var dataItem = this.tags[this.focusedTagIndex];
-            return this.tagPrefix + "-" + valueFrom({ dataItem: dataItem }, this.valueField);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "isFocused", {
-        get: function () {
-            return this._isFocused;
-        },
-        set: function (isFocused) {
-            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
-            this._isFocused = isFocused;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "isOpen", {
-        /**
-         * Returns the current open state of the popup.
-         */
-        get: function () {
-            return isPresent(this.popupRef);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "width", {
-        get: function () {
-            var wrapperWidth = this.wrapper.nativeElement.offsetWidth;
-            var width = this.popupSettings.width || wrapperWidth;
-            var minWidth = isNaN(wrapperWidth) ? wrapperWidth : wrapperWidth + "px";
-            var maxWidth = isNaN(width) ? width : width + "px";
-            return { min: minWidth, max: maxWidth };
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "height", {
-        get: function () {
-            var popupHeight = this.popupSettings.height;
-            return isPresent(popupHeight) ? popupHeight + "px" : 'auto';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "appendTo", {
-        get: function () {
-            var appendTo = this.popupSettings.appendTo;
-            if (!appendTo || appendTo === 'root') {
-                return undefined;
-            }
-            return appendTo === 'component' ? this.container : appendTo;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "popupContainerClasses", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            var containerClasses = ['k-popup-dropdowntree'];
-            if (this.popupSettings.popupClass) {
-                containerClasses.push(this.popupSettings.popupClass);
-            }
-            return containerClasses;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "nodes", {
-        get: function () {
-            return this.data;
-        },
-        /**
-         * @hidden
-         *
-         * Alias for `data`. Used for compatibility with the `DataBoundComponent` interface.
-         * Required for the data-binding directives.
-         */
-        set: function (nodes) {
-            this.data = nodes;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "children", {
-        get: function () {
-            return this.fetchChildren;
-        },
-        /**
-         * @hidden
-         *
-         * Alias for `fetchChildren`. Used for compatibility with the `DataBoundComponent` interface.
-         * Required for the data-binding directives
-         */
-        set: function (callback) {
-            this.fetchChildren = callback;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "expand", {
-        /**
-         * @hidden
-         *
-         * Alias for `nodeExpand`. Used for compatibility with the `ExpandableComponent` interface.
-         * Required for the expand-directive.
-         */
-        get: function () {
-            return this.nodeExpand;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "collapse", {
-        /**
-         * @hidden
-         *
-         * Alias for `nodeCollapse`. Used for compatibility with the `ExpandableComponent` interface.
-         * Required for the expand-directive.
-         */
-        get: function () {
-            return this.nodeCollapse;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "isExpanded", {
-        get: function () {
-            return this.isNodeExpanded;
-        },
-        /**
-         * @hidden
-         *
-         * Alias for `isNodeExpanded`. Used for compatibility with the `ExpandableComponent` interface.
-         * Required for the expand-directive.
-         */
-        set: function (callback) {
-            this.isNodeExpanded = callback;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "isVisible", {
-        get: function () {
-            return this.isNodeVisible;
-        },
-        /**
-         * @hidden
-         *
-         * Alias for `isNodeVisible`. Used for compatibility with the `DataBoundComponent` interface.
-         * The `DataBoundComponent` interface is used in the data-binding directives.
-         */
-        set: function (callback) {
-            this.isNodeVisible = callback;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "isTagFocused", {
-        get: function () {
-            return !this.isOpen && this.focusedTagIndex !== undefined;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "isTreeViewActive", {
-        get: function () {
-            return this.treeview && this.treeview.isActive;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "isWrapperActive", {
-        get: function () {
-            return document.activeElement === this.wrapper.nativeElement;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "isFilterActive", {
-        get: function () {
-            return this.filterInput && document.activeElement === this.filterInput.nativeElement;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "isCheckAllActive", {
-        get: function () {
-            return this.checkAllInput && document.activeElement === this.checkAllInput.nativeElement;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    MultiSelectTreeComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', String(this.isOpen));
-        this.subscriptions.push(this.localization
-            .changes.subscribe(function (_a) {
-            var rtl = _a.rtl;
-            _this.direction = rtl ? 'rtl' : 'ltr';
-            _this.cdr.markForCheck();
-        }));
-        this.setComponentClasses();
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.ngOnDestroy = function () {
-        this.destroyPopup();
-        this.unsubscribeEvents();
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.ngOnChanges = function (changes) {
-        var _this = this;
-        if (anyChanged(['textField', 'valueField', 'valuePrimitive'], changes, false)) {
-            this.setState();
-        }
-        if (anyChanged(['valueDepth', 'value', 'dataItems'], changes, false)) {
-            if (changes.value && !changes.dataItems && !this.valuePrimitive) {
-                // Update the dataItems if the value is updated programmatically (non-primitive values only)
-                // In the primitive case, the client should update the dataItems as well
-                this.dataItems = this.value;
-            }
-            else {
-                // Re-map the dataItems because `valueDepth` is not yet available when the check directive parses the items
-                this.dataItems = this.dataItems.map(function (item, index) { return (tslib_1.__assign({}, item, { level: _this.valueDepth[index] || 0 })); });
-            }
-        }
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.ngAfterContentChecked = function () {
-        this.verifySettings();
-    };
-    /**
-     * @hidden
-     *
-     * Used by the kendo-floatinglabel component to determine if the floating label
-     * should be rendered inside the input when the component is not focused.
-     */
-    MultiSelectTreeComponent.prototype.isEmpty = function () {
-        return !Boolean(this.placeholder) && (!isPresent(this.value) || this.value.length === 0);
-    };
-    /**
-     * Focuses the MultiSelectTree.
-     */
-    MultiSelectTreeComponent.prototype.focus = function () {
-        if (!this.disabled) {
-            this.wrapper.nativeElement.focus();
-        }
-    };
-    /**
-     * Blurs the MultiSelectTree.
-     */
-    MultiSelectTreeComponent.prototype.blur = function () {
-        if (!this.disabled) {
-            this.wrapper.nativeElement.blur();
-        }
-    };
-    /**
-     * Focuses a specific item of the MultiSelectTree based on a provided index in the format of `1_1`.
-     * The targeted item should be expanded in order for it to be focused.
-     * If null or invalid index is provided the focus will be set on the first item.
-     */
-    MultiSelectTreeComponent.prototype.focusItemAt = function (index) {
-        if (this.treeview) {
-            var lookup = this.treeview.itemLookup(index);
-            var isItemDisabled = !isPresent(lookup) || this.treeview.isDisabled(lookup.item.dataItem, lookup.item.index);
-            if (!isItemDisabled) {
-                this.treeview.focus(index);
-            }
-        }
-    };
-    /**
-     * Resets the value of the MultiSelectTree.
-     * If you use the `reset` method to clear the value of the component,
-     * the model will not update automatically and the `valueChange` event will not be fired.
-     */
-    MultiSelectTreeComponent.prototype.reset = function () {
-        this.value = [];
-        this.dataItems = [];
-        this.valueDepth = [];
-    };
-    /**
-     * Toggles the visibility of the popup
-     * ([see example]({% slug openstate_multiselecttree %})).
-     * If you use the `toggle` method to open or close the popup, the `open` and `close` events will not be fired.
-     *
-     * @param open - The state of the popup.
-     */
-    MultiSelectTreeComponent.prototype.toggle = function (open) {
-        var _this = this;
-        // The Promise is required to open the popup on load.
-        // Otherwise, the "ViewContainerRef not found..." error will be thrown.
-        Promise.resolve(null).then(function () {
-            var shouldOpen = isPresent(open) ? open : !isPresent(_this.popupRef);
-            _this.destroyPopup();
-            if (shouldOpen) {
-                _this.createPopup();
-            }
-        });
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.handleFocus = function (event) {
-        var _this = this;
-        if (event.target !== this.wrapper.nativeElement) {
-            return;
-        }
-        event.stopImmediatePropagation();
-        if (!this.isFocused) {
-            this.isFocused = true;
-            if (hasObservers(this.onFocus)) {
-                this._zone.run(function () {
-                    _this.onFocus.emit();
-                });
-            }
-            // Re-focus the treeview if `close` is prevented
-            if (this.isOpen && this.treeview) {
-                if (this.lastNodeOnFocus) {
-                    this.lastNodeOnFocus.setAttribute('tabindex', '0');
-                }
-                this.treeview.focus();
-            }
-        }
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.handleBlur = function (e) {
-        var _this = this;
-        var relatedTarget = e && e.relatedTarget;
-        if (this.wrapper.nativeElement.contains(relatedTarget) ||
-            (this.isOpen && this.popupRef.popupElement.contains(relatedTarget))) {
-            return;
-        }
-        this.isFocused = false;
-        this.togglePopup(false);
-        if (hasObservers(this.onBlur) ||
-            isUntouched(this.wrapper.nativeElement)) {
-            this._zone.run(function () {
-                _this.onBlur.emit();
-                _this.onTouchedCallback();
-            });
-        }
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.handleNodeClick = function (node) {
-        if (!this.isFocused) {
-            // Re-focus the MultiSelectTree when popup close is prevented and a node is clicked
-            // On click the focus should be on the clicked element which is why we need to update the lastNodeOnFocus
-            var parent_1 = node.originalEvent.target.parentElement.parentElement;
-            this.lastNodeOnFocus = parent_1;
-            this.focus();
-        }
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.togglePopup = function (open) {
-        var _this = this;
-        var isDisabled = this.disabled || this.readonly;
-        var sameState = this.isOpen === open;
-        this._zone.run(function () {
-            _this.focusedTagIndex = undefined;
-        });
-        if (isDisabled || sameState) {
-            return;
-        }
-        var togglePrevented = this.triggerPopupEvents(open);
-        if (!togglePrevented) {
-            open ?
-                this.createPopup() :
-                this.destroyPopup();
-        }
-        else {
-            this.removeTreeViewFromTabOrder();
-        }
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.messageFor = function (key) {
-        return this.localization.get(key);
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.handleCheckedItemsChange = function (items) {
-        this.valueDepth = items.map(function (item) { return item.level; });
-        this.lastAction = items.length > this.dataItems.length ? 'check' : 'uncheck';
-        this.dataItems = items.slice();
-        this.updateValue(this.dataItems);
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.handleRemoveTag = function (_a) {
-        var _this = this;
-        var tag = _a.tag, index = _a.index;
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        var eventArgs = new RemoveTagEvent(tag);
-        this.removeTag.emit(eventArgs);
-        if (eventArgs.isDefaultPrevented()) {
-            return;
-        }
-        // Remove tags based on their position index
-        if (tag instanceof Array) {
-            // Remove group tag
-            this.dataItems = this.dataItems.filter(function (_item, i) { return i < _this.showAfter || _this.disabledIndices.has(i); });
-            this.valueDepth = this.valueDepth.filter(function (_item, i) { return i < _this.showAfter || _this.disabledIndices.has(i); });
-        }
-        else {
-            // Remove single tag
-            this.dataItems = this.dataItems.filter(function (_item, i) { return i !== index || _this.disabledIndices.has(i); });
-            this.valueDepth = this.valueDepth.filter(function (_item, i) { return i !== index || _this.disabledIndices.has(i); });
-        }
-        this.updateValue(this.dataItems);
-        // focus the wrapper if the component is not focused - the floating label reacts to focus/blur
-        if (!this.isFocused) {
-            this.focus();
-        }
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.handleTagMapperChange = function (showAfter) {
-        this.showAfter = parseNumber(showAfter);
-        this.setTags();
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.clearAll = function (event) {
-        var _this = this;
-        event.stopImmediatePropagation();
-        event.preventDefault();
-        this.focus();
-        this.value = this.value.filter(function (_item, index) { return _this.disabledIndices.has(index); });
-        this.dataItems = this.dataItems.filter(function (_item, index) { return _this.disabledIndices.has(index); });
-        this.valueDepth = this.valueDepth.filter(function (_depth, index) { return _this.disabledIndices.has(index); });
-        this.emitValueChange(this.value);
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.writeValue = function (value) {
-        this.value = value || [];
-        // Update the dataItems if the value is updated programmatically (non-primitive values only)
-        // In the primitive case, the client should update the dataItems as well
-        if (!this.valuePrimitive) {
-            this.dataItems = this.value;
-        }
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.registerOnChange = function (fn) {
-        this.onChangeCallback = fn;
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.registerOnTouched = function (fn) {
-        this.onTouchedCallback = fn;
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.setDisabledState = function (isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.handleFilterInputChange = function (term) {
-        var _this = this;
-        this.filterChange.next(term);
-        this.allNodesHidden = this.nodes.every(function (node, index) { return !_this.isVisible(node, String(index)); });
-    };
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "filterInputClasses", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return (this.size ? getSizeClass('input', this.size) : '') + " " + (this.fillMode ? 'k-input-' + this.fillMode : '') + " " + (this.rounded ? getRoundedClass(this.rounded) : '');
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MultiSelectTreeComponent.prototype, "checkAllCheckboxClasses", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return "" + (this.size ? getSizeClass('checkbox', this.size) : '');
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.toggleCheckAll = function () {
-        this.checkAllInput.nativeElement.focus();
-        this.checkAllInput.nativeElement.click();
-    };
-    MultiSelectTreeComponent.prototype.verifySettings = function () {
-        if (!isDevMode()) {
-            return;
-        }
-        if (!isPresent(this.valueField) || !isPresent(this.textField)) {
-            throw new Error(MultiSelectTreeMessages.textAndValue);
-        }
-        if (!isArray(this.value)) {
-            throw new Error(MultiSelectTreeMessages.array);
-        }
-        if (this.value.length > 0) {
-            if (this.valuePrimitive && this.value.some(function (item) { return isObject(item); })) {
-                throw new Error(MultiSelectTreeMessages.primitive);
-            }
-            var isEveryDataItemObject = this.dataItems.every(function (item) { return isObject(item.dataItem); });
-            if (this.valuePrimitive && !isArray(this.dataItems)) {
-                throw new Error(MultiSelectTreeMessages.dataItems);
-            }
-            if (this.valuePrimitive && !isEveryDataItemObject) {
-                throw new Error(MultiSelectTreeMessages.dataItems);
-            }
-            if (this.valuePrimitive && this.dataItems.length !== this.value.length) {
-                throw new Error(MultiSelectTreeMessages.dataItemsLength);
-            }
-            if (!this.valuePrimitive && !isObjectArray(this.value)) {
-                throw new Error(MultiSelectTreeMessages.object);
-            }
-            if ((isArray(this.valueField) || isArray(this.textField)) && !isArray(this.valueDepth)) {
-                throw new Error(MultiSelectTreeMessages.valueDepth);
-            }
-            if ((isArray(this.valueField) || isArray(this.textField)) && this.valueDepth.length === 0) {
-                throw new Error(MultiSelectTreeMessages.valueDepth);
-            }
-            if ((isArray(this.valueField) || isArray(this.textField)) && this.valueDepth.length !== this.value.length) {
-                throw new Error(MultiSelectTreeMessages.valueDepthLength);
-            }
-        }
-    };
-    MultiSelectTreeComponent.prototype.emitValueChange = function (value) {
-        this.onChangeCallback(value);
-        this.valueChange.emit(value);
-    };
-    MultiSelectTreeComponent.prototype.triggerPopupEvents = function (open) {
-        var eventArgs = new PreventableEvent();
-        open ?
-            this.open.emit(eventArgs) :
-            this.close.emit(eventArgs);
-        return eventArgs.isDefaultPrevented();
-    };
-    MultiSelectTreeComponent.prototype.createPopup = function () {
-        var _this = this;
-        var horizontalAlign = this.direction === "rtl" ? "right" : "left";
-        var anchorPosition = { horizontal: horizontalAlign, vertical: 'bottom' };
-        var popupPosition = { horizontal: horizontalAlign, vertical: 'top' };
-        this.popupRef = this.popupService.open({
-            anchor: this.wrapper,
-            appendTo: this.appendTo,
-            anchorAlign: anchorPosition,
-            content: this.popupTemplate,
-            popupAlign: popupPosition,
-            positionMode: 'absolute',
-            popupClass: this.popupContainerClasses
-        });
-        var popupWrapper = this.popupRef.popupElement;
-        var _a = this.width, min = _a.min, max = _a.max;
-        popupWrapper.style.minWidth = min;
-        popupWrapper.style.width = max;
-        popupWrapper.style.height = this.height;
-        this.renderer.setAttribute(popupWrapper, 'dir', this.direction);
-        this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
-        this.popupRef.popupOpen.subscribe(function () {
-            _this.cdr.detectChanges();
-            _this.opened.emit();
-        });
-        this.popupRef.popupClose.subscribe(function () {
-            _this.closed.emit();
-        });
-    };
-    MultiSelectTreeComponent.prototype.destroyPopup = function () {
-        var _this = this;
-        if (this.popupRef) {
-            this.popupRef.close();
-            this.popupRef = null;
-            this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
-            if (this.filter !== "") {
-                this.filter = "";
-                this.allNodesHidden = false;
-                if (hasObservers(this.filterChange)) {
-                    this._zone.run(function () {
-                        _this.filterChange.emit("");
-                    });
-                }
-            }
-        }
-    };
-    MultiSelectTreeComponent.prototype.subscribeEvents = function () {
-        var _this = this;
-        this.subscriptions.push(this.navigationService.open.subscribe(function () { return _this.togglePopup(true); }), this.navigationService.enter
-            .pipe(tap(function (event) { return event.originalEvent.preventDefault(); }))
-            .subscribe(function () { return _this.togglePopup(true); }), merge(this.navigationService.close, this.navigationService.esc).subscribe(function () {
-            _this.focus();
-            _this.togglePopup(false);
-        }), this.navigationService.tab.subscribe(this.handleTabKey.bind(this)), this.navigationService.up.subscribe(this.handleUpKey.bind(this)), this.navigationService.down.subscribe(this.handleDownKey.bind(this)), this.navigationService.left
-            .pipe(filter(function () { return !_this.isTreeViewActive; }))
-            .subscribe(this.direction === 'rtl' ? this.handleRightKey.bind(this) : this.handleLeftKey.bind(this)), this.navigationService.right
-            .pipe(filter(function () { return !_this.isTreeViewActive; }))
-            .subscribe(this.direction === 'rtl' ? this.handleLeftKey.bind(this) : this.handleRightKey.bind(this)), this.navigationService.home.pipe(filter(function () { return !_this.isOpen; })).subscribe(this.handleHome.bind(this)), this.navigationService.end.pipe(filter(function () { return !_this.isOpen; })).subscribe(this.handleEnd.bind(this)), this.navigationService.backspace.pipe(filter(function () { return _this.isTagFocused; })).subscribe(this.handleBackspace.bind(this)), this.navigationService.delete.pipe(filter(function () { return _this.isTagFocused; })).subscribe(this.handleDelete.bind(this)));
-    };
-    MultiSelectTreeComponent.prototype.subscribeFocusEvents = function () {
-        var _this = this;
-        if (isDocumentAvailable()) {
-            this.handleFocus = this.handleFocus.bind(this);
-            this.handleDocumentBlur = this.handleDocumentBlur.bind(this);
-            this._zone.runOutsideAngular(function () {
-                var useCapture = true;
-                document.addEventListener('focus', _this.handleFocus, useCapture);
-                document.addEventListener('blur', _this.handleDocumentBlur, useCapture);
-            });
-        }
-    };
-    MultiSelectTreeComponent.prototype.unSubscribeFocusEvents = function () {
-        if (isDocumentAvailable()) {
-            var useCapture = true;
-            document.removeEventListener('focus', this.handleFocus, useCapture);
-            document.removeEventListener('blur', this.handleDocumentBlur, useCapture);
-        }
-    };
-    MultiSelectTreeComponent.prototype.handleDocumentBlur = function (event) {
-        if (event.target !== this.wrapper.nativeElement) {
-            return;
-        }
-        event.stopImmediatePropagation();
-        this.handleBlur(event);
-    };
-    MultiSelectTreeComponent.prototype.handleTabKey = function () {
-        this.focus();
-        if (this.isOpen) {
-            this.treeview.blur();
-            this.removeTreeViewFromTabOrder();
-        }
-    };
-    MultiSelectTreeComponent.prototype.handleUpKey = function (event) {
-        if (!this.treeview) {
-            return;
-        }
-        event.originalEvent.preventDefault();
-        // Prevent toggling the focus between the filterInput and the wrapper elements with `up` key
-        if (this.isWrapperActive) {
-            return;
-        }
-        var isFirstNodeActive = this.treeview['navigationService']['activeIndex'] === '0';
-        // Current focus is on the filter input => should focus the wrapper
-        if (this.filterable && this.isFilterActive) {
-            this.focus();
-            // Current focus is on the treeview first node => should focus the check all checkbox if enabled
-        }
-        else if (this.checkAll && !this.isCheckAllActive && isFirstNodeActive) {
-            this.checkAllInput.nativeElement.focus();
-            // Current focus is either on the check all checkbox or the treeview's first node
-            // => should focus either the filter input (if enabled) or the wrapper
-        }
-        else if (this.isCheckAllActive || isFirstNodeActive) {
-            this.filterable ?
-                this.filterInput.nativeElement.focus() :
-                this.focus();
-        }
-    };
-    MultiSelectTreeComponent.prototype.handleDownKey = function (event) {
-        if (!this.treeview) {
-            return;
-        }
-        event.originalEvent.preventDefault();
-        // Current focus is on the wrapper => should focus the filter input
-        if (this.filterable && this.isWrapperActive) {
-            this.filterInput.nativeElement.focus();
-            // Current focus is on the wrapper/filter input => should focus check all checkbox if enabled
-        }
-        else if (this.checkAll && (this.isWrapperActive || this.isFilterActive)) {
-            this.checkAllInput.nativeElement.focus();
-            // Should focus the treeview if filterable and check all are disabled
-        }
-        else if (!this.treeview.isActive) {
-            this.treeview.focus();
-        }
-        this.focusedTagIndex = undefined;
-    };
-    MultiSelectTreeComponent.prototype.handleRightKey = function (event) {
-        event.originalEvent.preventDefault();
-        var last = this.tags.length - 1;
-        if (this.focusedTagIndex === last) {
-            this.focusedTagIndex = undefined;
-        }
-        else if (this.focusedTagIndex < last) {
-            this.focusedTagIndex++;
-        }
-        else if (!this.focusedTagIndex) {
-            this.focusedTagIndex = 0;
-        }
-    };
-    MultiSelectTreeComponent.prototype.handleLeftKey = function (event) {
-        event.originalEvent.preventDefault();
-        if (this.focusedTagIndex === undefined || this.focusedTagIndex < 0) {
-            this.focusedTagIndex = this.tags.length - 1;
-        }
-        else if (this.focusedTagIndex !== 0) {
-            this.focusedTagIndex--;
-        }
-    };
-    MultiSelectTreeComponent.prototype.handleEnd = function (event) {
-        event.originalEvent.preventDefault();
-        this.focusedTagIndex = this.tags.length - 1;
-    };
-    MultiSelectTreeComponent.prototype.handleHome = function (event) {
-        event.originalEvent.preventDefault();
-        this.focusedTagIndex = 0;
-    };
-    MultiSelectTreeComponent.prototype.handleBackspace = function () {
-        if (this.focusedTagIndex !== undefined) {
-            this.handleDelete();
-        }
-        else {
-            var tag = this.tags[this.tags.length - 1];
-            var index = this.tags.length - 1;
-            this.handleRemoveTag({ tag: tag, index: index });
-        }
-    };
-    MultiSelectTreeComponent.prototype.handleDelete = function () {
-        var tag = this.tags[this.focusedTagIndex];
-        var index = this.focusedTagIndex;
-        this.handleRemoveTag({ tag: tag, index: index });
-        if (this.focusedTagIndex === this.tags.length) {
-            this.focusedTagIndex = undefined;
-        }
-    };
-    MultiSelectTreeComponent.prototype.unsubscribeEvents = function () {
-        this.subscriptions.forEach(function (sub) { return sub.unsubscribe(); });
-        this.unSubscribeFocusEvents();
-    };
-    /**
-     * Remove the `TreeView` from the tab order, otherwise a focus loop between the page elements will occur
-     * and the user will not be able to tab to the rest of the browser elements
-     */
-    MultiSelectTreeComponent.prototype.removeTreeViewFromTabOrder = function () {
-        var _this = this;
-        var nodes = this.treeview.element.nativeElement.querySelectorAll('li');
-        nodes.forEach(function (item) {
-            if (item.getAttribute('tabindex') === '0') {
-                _this.lastNodeOnFocus = item;
-                _this.lastNodeOnFocus.setAttribute('tabindex', '-1');
-            }
-        });
-    };
-    MultiSelectTreeComponent.prototype.setState = function () {
-        if (isPresent(this.dataItems) && isPresent(this.valueField)) {
-            this.setTags();
-            this.checkedItems = this.dataItems.slice();
-        }
-        this.cdr.markForCheck();
-    };
-    MultiSelectTreeComponent.prototype.setTags = function () {
-        var source = this.dataItems.map(function (item) { return item.dataItem; });
-        this.tags = this.tagMapper(source);
-        this.disabledIndices = this.disabledItemsMapper();
-    };
-    MultiSelectTreeComponent.prototype.updateValue = function (value) {
-        var _this = this;
-        var newValue = this.valuePrimitive ?
-            value.map(function (item) { return valueFrom(item, _this.valueField); }) :
-            value.map(function (item) { return item.dataItem; });
-        this.value = newValue;
-        this.emitValueChange(this.value);
-    };
-    /**
-     * @hidden
-     *
-     * Determines which of the provided tags should be disabled and stores their position indices
-     */
-    MultiSelectTreeComponent.prototype.disabledItemsMapper = function () {
-        var _this = this;
-        return new Set(this.dataItems.reduce(function (indices, item, index) {
-            if (_this.itemDisabled(item.dataItem, item.index)) {
-                indices.push(index);
-            }
-            return indices;
-        }, []));
-    };
-    MultiSelectTreeComponent.prototype.setComponentClasses = function () {
-        if (this.size) {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
-        }
-        if (this.rounded) {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        }
-        if (this.fillMode) {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
-        }
-    };
-    var MultiSelectTreeComponent_1;
-    tslib_1.__decorate([
-        HostBinding('class.k-dropdowntree'),
-        HostBinding('class.k-input'),
-        tslib_1.__metadata("design:type", Boolean)
-    ], MultiSelectTreeComponent.prototype, "hostClasses", void 0);
-    tslib_1.__decorate([
-        HostBinding('class.k-disabled'),
-        HostBinding('attr.aria-disabled'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], MultiSelectTreeComponent.prototype, "isDisabled", null);
-    tslib_1.__decorate([
-        HostBinding('class.k-loading'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], MultiSelectTreeComponent.prototype, "isLoading", null);
-    tslib_1.__decorate([
-        HostBinding('attr.id'),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], MultiSelectTreeComponent.prototype, "id", null);
-    tslib_1.__decorate([
-        HostBinding('attr.dir'),
-        tslib_1.__metadata("design:type", String)
-    ], MultiSelectTreeComponent.prototype, "direction", void 0);
-    tslib_1.__decorate([
-        HostBinding('attr.tabindex'),
-        tslib_1.__metadata("design:type", Number),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], MultiSelectTreeComponent.prototype, "hostTabIndex", null);
-    tslib_1.__decorate([
-        HostBinding('attr.role'),
-        tslib_1.__metadata("design:type", String)
-    ], MultiSelectTreeComponent.prototype, "role", void 0);
-    tslib_1.__decorate([
-        HostBinding('attr.aria-expanded'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], MultiSelectTreeComponent.prototype, "isAriaExpanded", null);
-    tslib_1.__decorate([
-        HostBinding('attr.aria-haspopup'),
-        tslib_1.__metadata("design:type", String)
-    ], MultiSelectTreeComponent.prototype, "ariaHasPopup", void 0);
-    tslib_1.__decorate([
-        HostBinding('attr.readonly'),
-        HostBinding('attr.aria-readonly'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], MultiSelectTreeComponent.prototype, "isReadonly", null);
-    tslib_1.__decorate([
-        HostBinding('attr.aria-describedby'),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], MultiSelectTreeComponent.prototype, "ariaDescribedBy", null);
-    tslib_1.__decorate([
-        HostBinding('attr.aria-activedescendant'),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], MultiSelectTreeComponent.prototype, "ariaActiveDescendant", null);
-    tslib_1.__decorate([
-        HostListener('click'),
-        tslib_1.__metadata("design:type", Function),
-        tslib_1.__metadata("design:paramtypes", []),
-        tslib_1.__metadata("design:returntype", void 0)
-    ], MultiSelectTreeComponent.prototype, "handleClick", null);
-    tslib_1.__decorate([
-        HostListener('keydown', ['$event']),
-        tslib_1.__metadata("design:type", Function),
-        tslib_1.__metadata("design:paramtypes", [Object]),
-        tslib_1.__metadata("design:returntype", void 0)
-    ], MultiSelectTreeComponent.prototype, "handleKeydown", null);
-    tslib_1.__decorate([
-        ContentChild(HeaderTemplateDirective, { static: false }),
-        tslib_1.__metadata("design:type", HeaderTemplateDirective)
-    ], MultiSelectTreeComponent.prototype, "headerTemplate", void 0);
-    tslib_1.__decorate([
-        ContentChild(FooterTemplateDirective, { static: false }),
-        tslib_1.__metadata("design:type", FooterTemplateDirective)
-    ], MultiSelectTreeComponent.prototype, "footerTemplate", void 0);
-    tslib_1.__decorate([
-        ContentChild(NodeTemplateDirective, { static: false }),
-        tslib_1.__metadata("design:type", NodeTemplateDirective)
-    ], MultiSelectTreeComponent.prototype, "nodeTemplate", void 0);
-    tslib_1.__decorate([
-        ContentChild(NoDataTemplateDirective, { static: false }),
-        tslib_1.__metadata("design:type", NoDataTemplateDirective)
-    ], MultiSelectTreeComponent.prototype, "noDataTemplate", void 0);
-    tslib_1.__decorate([
-        ContentChild(TagTemplateDirective, { static: false }),
-        tslib_1.__metadata("design:type", TagTemplateDirective)
-    ], MultiSelectTreeComponent.prototype, "tagTemplate", void 0);
-    tslib_1.__decorate([
-        ContentChild(GroupTagTemplateDirective, { static: false }),
-        tslib_1.__metadata("design:type", GroupTagTemplateDirective)
-    ], MultiSelectTreeComponent.prototype, "groupTagTemplate", void 0);
-    tslib_1.__decorate([
-        ViewChild('popupTemplate', { static: true }),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], MultiSelectTreeComponent.prototype, "popupTemplate", void 0);
-    tslib_1.__decorate([
-        ViewChild('container', { read: ViewContainerRef, static: true }),
-        tslib_1.__metadata("design:type", ViewContainerRef)
-    ], MultiSelectTreeComponent.prototype, "container", void 0);
-    tslib_1.__decorate([
-        ViewChild('treeview', { static: false }),
-        tslib_1.__metadata("design:type", TreeViewComponent),
-        tslib_1.__metadata("design:paramtypes", [TreeViewComponent])
-    ], MultiSelectTreeComponent.prototype, "treeview", null);
-    tslib_1.__decorate([
-        ViewChild('filterInput', { static: false }),
-        tslib_1.__metadata("design:type", ElementRef)
-    ], MultiSelectTreeComponent.prototype, "filterInput", void 0);
-    tslib_1.__decorate([
-        ViewChild('checkAllInput', { static: false }),
-        tslib_1.__metadata("design:type", ElementRef)
-    ], MultiSelectTreeComponent.prototype, "checkAllInput", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number),
-        tslib_1.__metadata("design:paramtypes", [Number])
-    ], MultiSelectTreeComponent.prototype, "tabindex", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [String])
-    ], MultiSelectTreeComponent.prototype, "size", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [String])
-    ], MultiSelectTreeComponent.prototype, "rounded", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [String])
-    ], MultiSelectTreeComponent.prototype, "fillMode", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object),
-        tslib_1.__metadata("design:paramtypes", [Object])
-    ], MultiSelectTreeComponent.prototype, "popupSettings", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object),
-        tslib_1.__metadata("design:paramtypes", [Object])
-    ], MultiSelectTreeComponent.prototype, "checkableSettings", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Array),
-        tslib_1.__metadata("design:paramtypes", [Array])
-    ], MultiSelectTreeComponent.prototype, "data", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Array),
-        tslib_1.__metadata("design:paramtypes", [Array])
-    ], MultiSelectTreeComponent.prototype, "value", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Array),
-        tslib_1.__metadata("design:paramtypes", [Array])
-    ], MultiSelectTreeComponent.prototype, "dataItems", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object)
-    ], MultiSelectTreeComponent.prototype, "textField", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object)
-    ], MultiSelectTreeComponent.prototype, "valueField", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Array)
-    ], MultiSelectTreeComponent.prototype, "valueDepth", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], MultiSelectTreeComponent.prototype, "loading", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], MultiSelectTreeComponent.prototype, "placeholder", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], MultiSelectTreeComponent.prototype, "listHeight", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], MultiSelectTreeComponent.prototype, "disabled", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], MultiSelectTreeComponent.prototype, "readonly", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], MultiSelectTreeComponent.prototype, "valuePrimitive", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], MultiSelectTreeComponent.prototype, "loadOnDemand", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], MultiSelectTreeComponent.prototype, "focusableId", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], MultiSelectTreeComponent.prototype, "clearButton", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], MultiSelectTreeComponent.prototype, "filterable", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], MultiSelectTreeComponent.prototype, "checkAll", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Function)
-    ], MultiSelectTreeComponent.prototype, "hasChildren", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Function)
-    ], MultiSelectTreeComponent.prototype, "fetchChildren", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Function)
-    ], MultiSelectTreeComponent.prototype, "isNodeExpanded", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Function)
-    ], MultiSelectTreeComponent.prototype, "isNodeVisible", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Function)
-    ], MultiSelectTreeComponent.prototype, "itemDisabled", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object)
-    ], MultiSelectTreeComponent.prototype, "tagMapper", void 0);
-    tslib_1.__decorate([
-        Output('focus'),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], MultiSelectTreeComponent.prototype, "onFocus", void 0);
-    tslib_1.__decorate([
-        Output('blur'),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], MultiSelectTreeComponent.prototype, "onBlur", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], MultiSelectTreeComponent.prototype, "open", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], MultiSelectTreeComponent.prototype, "opened", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], MultiSelectTreeComponent.prototype, "close", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], MultiSelectTreeComponent.prototype, "closed", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], MultiSelectTreeComponent.prototype, "nodeExpand", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], MultiSelectTreeComponent.prototype, "nodeCollapse", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], MultiSelectTreeComponent.prototype, "valueChange", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], MultiSelectTreeComponent.prototype, "removeTag", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], MultiSelectTreeComponent.prototype, "filterChange", void 0);
-    MultiSelectTreeComponent = MultiSelectTreeComponent_1 = tslib_1.__decorate([
-        Component({
-            exportAs: 'kendoMultiSelectTree',
-            providers: [
-                LocalizationService,
-                NavigationService,
-                DataService,
-                DisabledItemsService,
-                SelectionService,
-                {
-                    provide: L10N_PREFIX,
-                    useValue: 'kendo.multiselecttree'
-                },
-                {
-                    multi: true,
-                    provide: NG_VALUE_ACCESSOR,
-                    useExisting: forwardRef(function () { return MultiSelectTreeComponent_1; })
-                },
-                {
-                    provide: DataBoundComponent,
-                    useExisting: forwardRef(function () { return MultiSelectTreeComponent_1; })
-                },
-                {
-                    provide: ExpandableComponent,
-                    useExisting: forwardRef(function () { return MultiSelectTreeComponent_1; })
-                },
-                {
-                    provide: KendoInput,
-                    useExisting: forwardRef(function () { return MultiSelectTreeComponent_1; })
-                }
-            ],
-            selector: 'kendo-multiselecttree',
-            template: "\n        <ng-container kendoMultiSelectTreeLocalizedMessages\n            i18n-noDataText=\"kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.multiselecttree.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n\n            i18n-checkAllText=\"kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox\"\n            checkAllText=\"Check all\"\n        >\n        </ng-container>\n        <kendo-taglist\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [id]=\"tagListId\"\n            [tags]=\"tags\"\n            [focused]=\"focusedTagIndex\"\n            [textField]=\"textField\"\n            [valueField]=\"valueField\"\n            [valueDepth]=\"valueDepth\"\n            [disabled]=\"disabled\"\n            [tagPrefix]=\"tagPrefix\"\n            [template]=\"tagTemplate\"\n            [groupTemplate]=\"groupTagTemplate\"\n            [disabledIndices]=\"disabledIndices\"\n            (removeTag)=\"handleRemoveTag($event)\"\n        >\n            <span *ngIf=\"!tags || !tags.length\"\n                class=\"k-input-inner k-readonly\"\n            >\n                <span class=\"k-input-value-text\">{{ placeholder }}</span>\n            </span>\n        </kendo-taglist>\n        <span\n            *ngIf=\"!disabled && !loading && !readonly && clearButton && tags?.length\"\n            class=\"k-clear-value\"\n            [attr.title]=\"messageFor('clearTitle')\"\n            role=\"button\"\n            tabindex=\"-1\"\n            (click)=\"clearAll($event)\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <span\n            *ngIf=\"loading\"\n            class=\"k-icon k-i-loading\"\n        >\n        </span>\n        <ng-template #popupTemplate>\n            <span\n                *ngIf=\"filterable\"\n                class=\"k-list-filter\"\n            >\n                <span\n                    class=\"k-textbox k-input\"\n                    [ngClass]=\"filterInputClasses\"\n                >\n                    <span class=\"k-input-prefix\">\n                        <span class=\"k-input-icon k-icon k-i-search\"></span>\n                    </span>\n                    <input\n                        #filterInput\n                        (input)=\"handleFilterInputChange($event.target.value)\"\n                        [filterInput]=\"filterable && !touchEnabled\"\n                        (keydown)=\"handleKeydown($event)\"\n                        [(ngModel)]=\"filter\"\n                        class=\"k-input-inner\"\n                        role=\"textbox\"\n                        aria-haspopup=\"true\"\n                        aria-expanded=\"false\"\n                        tabindex=\"0\"\n                        aria-disabled=\"false\"\n                        aria-readonly=\"false\"\n                        [kendoEventsOutsideAngular]=\"{\n                            blur: handleBlur\n                        }\"\n                        [scope]=\"this\"\n                    >\n                </span>\n            </span>\n            <!--header template-->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <div *ngIf=\"checkAll\" class=\"k-check-all\">\n                <input\n                    #checkAllInput\n                    [checkAll]=\"!filterable && !touchEnabled\"\n                    type=\"checkbox\"\n                    class=\"k-checkbox\"\n                    [ngClass]=\"checkAllCheckboxClasses\"\n                    role=\"checkbox\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                    aria-readonly=\"false\"\n                    [treeview]=\"treeview\"\n                    [checkedItems]=\"checkedItems\"\n                    [valueField]=\"valueField\"\n                    [lastAction]=\"lastAction\"\n                    (checkedItemsChange)=\"handleCheckedItemsChange($event)\"\n                    (keydown)=\"handleKeydown($event)\"\n                    [kendoEventsOutsideAngular]=\"{\n                        blur: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                <span\n                    class=\"k-checkbox-label\"\n                    (click)=\"toggleCheckAll()\"\n                    (mousedown)=\"$event.preventDefault()\"\n                >\n                    {{ messageFor('checkAllText') }}\n                </span>\n            </div>\n            <kendo-treeview\n                #treeview\n                [size]=\"size\"\n                [nodes]=\"data\"\n                [style.maxHeight.px]=\"listHeight\"\n                [animate]=\"false\"\n                kendoMultiSelectTreeCheckable\n                [checkable]=\"checkableSettings\"\n                [checkedItems]=\"checkedItems\"\n                [valueField]=\"valueField\"\n                [textField]=\"textField\"\n                [children]=\"children\"\n                [hasChildren]=\"hasChildren\"\n                [isExpanded]=\"isNodeExpanded\"\n                [isDisabled]=\"itemDisabled\"\n                [nodeTemplate]=\"nodeTemplate\"\n                [loadOnDemand]=\"loadOnDemand\"\n                [filter]=\"filter\"\n                [isVisible]=\"isNodeVisible\"\n                (keydown)=\"handleKeydown($event)\"\n                (nodeClick)=\"handleNodeClick($event)\"\n                (expand)=\"nodeExpand.emit($event)\"\n                (collapse)=\"nodeCollapse.emit($event)\"\n                (checkedItemsChange)=\"handleCheckedItemsChange($event)\"\n                [kendoEventsOutsideAngular]=\"{\n                    focusout: handleBlur\n                }\"\n                [scope]=\"this\"\n            >\n            </kendo-treeview>\n            <!--footer template-->\n            <ng-template\n                *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <!--no-data template-->\n            <div class=\"k-no-data\" *ngIf=\"data?.length === 0 || allNodesHidden\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate?.templateRef\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ messageFor('noDataText') }}</div>\n                </ng-template>\n            </div>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
-        }),
-        tslib_1.__param(7, Optional()), tslib_1.__param(7, Inject(TOUCH_ENABLED)),
-        tslib_1.__metadata("design:paramtypes", [ElementRef,
-            PopupService,
-            Renderer2,
-            NavigationService,
-            NgZone,
-            LocalizationService,
-            ChangeDetectorRef, Boolean])
-    ], MultiSelectTreeComponent);
-    return MultiSelectTreeComponent;
-}());
-export { MultiSelectTreeComponent };
-export { ɵ0, ɵ1, ɵ2, ɵ3 };