@ali-hm/angular-tree-component 12.0.1

package/fesm2015/ali-hm-angular-tree-component.mjs

@@ -0,0 +1,2511 @@
+import * as i0 from '@angular/core';
+import { Directive, Input, Injectable, Component, ViewEncapsulation, EventEmitter, Output, HostListener, ContentChild, ViewChild, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { autorun, reaction, computed as computed$1, observable as observable$1, action as action$1 } from 'mobx';
+
+class TreeMobxAutorunDirective {
+    constructor(templateRef, viewContainer) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.templateBindings = {};
+    }
+    ngOnInit() {
+        this.view = this.viewContainer.createEmbeddedView(this.templateRef);
+        if (this.dispose) {
+            this.dispose();
+        }
+        if (this.shouldDetach()) {
+            this.view.detach();
+        }
+        this.autoDetect(this.view);
+    }
+    shouldDetach() {
+        return this.treeMobxAutorun && this.treeMobxAutorun.detach;
+    }
+    autoDetect(view) {
+        this.dispose = autorun(() => view.detectChanges());
+    }
+    ngOnDestroy() {
+        if (this.dispose) {
+            this.dispose();
+        }
+    }
+}
+/** @nocollapse */ TreeMobxAutorunDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeMobxAutorunDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ TreeMobxAutorunDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TreeMobxAutorunDirective, selector: "[treeMobxAutorun]", inputs: { treeMobxAutorun: "treeMobxAutorun" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeMobxAutorunDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[treeMobxAutorun]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { treeMobxAutorun: [{
+                type: Input
+            }] } });
+
+const KEYS = {
+    LEFT: 37,
+    UP: 38,
+    RIGHT: 39,
+    DOWN: 40,
+    ENTER: 13,
+    SPACE: 32,
+    CONTEXT_MENU: 32
+};
+
+const TREE_ACTIONS = {
+    TOGGLE_ACTIVE: (tree, node, $event) => node && node.toggleActivated(),
+    TOGGLE_ACTIVE_MULTI: (tree, node, $event) => node && node.toggleActivated(true),
+    TOGGLE_SELECTED: (tree, node, $event) => node && node.toggleSelected(),
+    ACTIVATE: (tree, node, $event) => node.setIsActive(true),
+    DEACTIVATE: (tree, node, $event) => node.setIsActive(false),
+    SELECT: (tree, node, $event) => node.setIsSelected(true),
+    DESELECT: (tree, node, $event) => node.setIsSelected(false),
+    FOCUS: (tree, node, $event) => node.focus(),
+    TOGGLE_EXPANDED: (tree, node, $event) => node.hasChildren && node.toggleExpanded(),
+    EXPAND: (tree, node, $event) => node.expand(),
+    COLLAPSE: (tree, node, $event) => node.collapse(),
+    DRILL_DOWN: (tree, node, $event) => tree.focusDrillDown(),
+    DRILL_UP: (tree, node, $event) => tree.focusDrillUp(),
+    NEXT_NODE: (tree, node, $event) => tree.focusNextNode(),
+    PREVIOUS_NODE: (tree, node, $event) => tree.focusPreviousNode(),
+    MOVE_NODE: (tree, node, $event, { from, to }) => {
+        // default action assumes from = node, to = {parent, index}
+        if ($event.ctrlKey) {
+            tree.copyNode(from, to);
+        }
+        else {
+            tree.moveNode(from, to);
+        }
+    }
+};
+const defaultActionMapping = {
+    mouse: {
+        click: TREE_ACTIONS.TOGGLE_ACTIVE,
+        dblClick: null,
+        contextMenu: null,
+        expanderClick: TREE_ACTIONS.TOGGLE_EXPANDED,
+        checkboxClick: TREE_ACTIONS.TOGGLE_SELECTED,
+        drop: TREE_ACTIONS.MOVE_NODE
+    },
+    keys: {
+        [KEYS.RIGHT]: TREE_ACTIONS.DRILL_DOWN,
+        [KEYS.LEFT]: TREE_ACTIONS.DRILL_UP,
+        [KEYS.DOWN]: TREE_ACTIONS.NEXT_NODE,
+        [KEYS.UP]: TREE_ACTIONS.PREVIOUS_NODE,
+        [KEYS.SPACE]: TREE_ACTIONS.TOGGLE_ACTIVE,
+        [KEYS.ENTER]: TREE_ACTIONS.TOGGLE_ACTIVE
+    }
+};
+class TreeOptions {
+    constructor(options = {}) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35;
+        this.options = options;
+        this.actionMapping = {
+            mouse: {
+                click: (_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.actionMapping) === null || _b === void 0 ? void 0 : _b.mouse) === null || _c === void 0 ? void 0 : _c.click) !== null && _d !== void 0 ? _d : defaultActionMapping.mouse.click,
+                dblClick: (_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.actionMapping) === null || _f === void 0 ? void 0 : _f.mouse) === null || _g === void 0 ? void 0 : _g.dblClick) !== null && _h !== void 0 ? _h : defaultActionMapping.mouse.dblClick,
+                contextMenu: (_m = (_l = (_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.actionMapping) === null || _k === void 0 ? void 0 : _k.mouse) === null || _l === void 0 ? void 0 : _l.contextMenu) !== null && _m !== void 0 ? _m : defaultActionMapping.mouse.contextMenu,
+                expanderClick: (_r = (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.actionMapping) === null || _p === void 0 ? void 0 : _p.mouse) === null || _q === void 0 ? void 0 : _q.expanderClick) !== null && _r !== void 0 ? _r : defaultActionMapping.mouse.expanderClick,
+                checkboxClick: (_v = (_u = (_t = (_s = this.options) === null || _s === void 0 ? void 0 : _s.actionMapping) === null || _t === void 0 ? void 0 : _t.mouse) === null || _u === void 0 ? void 0 : _u.checkboxClick) !== null && _v !== void 0 ? _v : defaultActionMapping.mouse.checkboxClick,
+                drop: (_z = (_y = (_x = (_w = this.options) === null || _w === void 0 ? void 0 : _w.actionMapping) === null || _x === void 0 ? void 0 : _x.mouse) === null || _y === void 0 ? void 0 : _y.drop) !== null && _z !== void 0 ? _z : defaultActionMapping.mouse.drop,
+                dragStart: (_3 = (_2 = (_1 = (_0 = this.options) === null || _0 === void 0 ? void 0 : _0.actionMapping) === null || _1 === void 0 ? void 0 : _1.mouse) === null || _2 === void 0 ? void 0 : _2.dragStart) !== null && _3 !== void 0 ? _3 : undefined,
+                drag: (_7 = (_6 = (_5 = (_4 = this.options) === null || _4 === void 0 ? void 0 : _4.actionMapping) === null || _5 === void 0 ? void 0 : _5.mouse) === null || _6 === void 0 ? void 0 : _6.drag) !== null && _7 !== void 0 ? _7 : undefined,
+                dragEnd: (_11 = (_10 = (_9 = (_8 = this.options) === null || _8 === void 0 ? void 0 : _8.actionMapping) === null || _9 === void 0 ? void 0 : _9.mouse) === null || _10 === void 0 ? void 0 : _10.dragEnd) !== null && _11 !== void 0 ? _11 : undefined,
+                dragOver: (_15 = (_14 = (_13 = (_12 = this.options) === null || _12 === void 0 ? void 0 : _12.actionMapping) === null || _13 === void 0 ? void 0 : _13.mouse) === null || _14 === void 0 ? void 0 : _14.dragOver) !== null && _15 !== void 0 ? _15 : undefined,
+                dragLeave: (_19 = (_18 = (_17 = (_16 = this.options) === null || _16 === void 0 ? void 0 : _16.actionMapping) === null || _17 === void 0 ? void 0 : _17.mouse) === null || _18 === void 0 ? void 0 : _18.dragLeave) !== null && _19 !== void 0 ? _19 : undefined,
+                dragEnter: (_23 = (_22 = (_21 = (_20 = this.options) === null || _20 === void 0 ? void 0 : _20.actionMapping) === null || _21 === void 0 ? void 0 : _21.mouse) === null || _22 === void 0 ? void 0 : _22.dragEnter) !== null && _23 !== void 0 ? _23 : undefined,
+                mouseOver: (_27 = (_26 = (_25 = (_24 = this.options) === null || _24 === void 0 ? void 0 : _24.actionMapping) === null || _25 === void 0 ? void 0 : _25.mouse) === null || _26 === void 0 ? void 0 : _26.mouseOver) !== null && _27 !== void 0 ? _27 : undefined,
+                mouseOut: (_31 = (_30 = (_29 = (_28 = this.options) === null || _28 === void 0 ? void 0 : _28.actionMapping) === null || _29 === void 0 ? void 0 : _29.mouse) === null || _30 === void 0 ? void 0 : _30.mouseOut) !== null && _31 !== void 0 ? _31 : undefined,
+            },
+            keys: {
+                [KEYS.RIGHT]: TREE_ACTIONS.DRILL_DOWN,
+                [KEYS.LEFT]: TREE_ACTIONS.DRILL_UP,
+                [KEYS.DOWN]: TREE_ACTIONS.NEXT_NODE,
+                [KEYS.UP]: TREE_ACTIONS.PREVIOUS_NODE,
+                [KEYS.SPACE]: TREE_ACTIONS.TOGGLE_ACTIVE,
+                [KEYS.ENTER]: TREE_ACTIONS.TOGGLE_ACTIVE
+            }
+        };
+        if ((_33 = (_32 = this.options) === null || _32 === void 0 ? void 0 : _32.actionMapping) === null || _33 === void 0 ? void 0 : _33.keys) {
+            this.actionMapping.keys = Object.assign(Object.assign({}, this.actionMapping.keys), this.options.actionMapping.keys);
+        }
+        if (options.rtl) {
+            this.actionMapping.keys[KEYS.RIGHT] = ((_34 = options.actionMapping) === null || _34 === void 0 ? void 0 : _34.keys[KEYS.RIGHT]) || TREE_ACTIONS.DRILL_UP;
+            this.actionMapping.keys[KEYS.LEFT] = ((_35 = options.actionMapping) === null || _35 === void 0 ? void 0 : _35.keys[KEYS.LEFT]) || TREE_ACTIONS.DRILL_DOWN;
+        }
+    }
+    get hasChildrenField() { return this.options.hasChildrenField || 'hasChildren'; }
+    get childrenField() { return this.options.childrenField || 'children'; }
+    get displayField() { return this.options.displayField || 'name'; }
+    get idField() { return this.options.idField || 'id'; }
+    get isExpandedField() { return this.options.isExpandedField || 'isExpanded'; }
+    get getChildren() { return this.options.getChildren; }
+    get levelPadding() { return this.options.levelPadding || 0; }
+    get useVirtualScroll() { return this.options.useVirtualScroll; }
+    get animateExpand() { return this.options.animateExpand; }
+    get animateSpeed() { return this.options.animateSpeed || 1; }
+    get animateAcceleration() { return this.options.animateAcceleration || 1.2; }
+    get scrollOnActivate() { return this.options.scrollOnActivate === undefined ? true : this.options.scrollOnActivate; }
+    get rtl() { return !!this.options.rtl; }
+    get rootId() { return this.options.rootId; }
+    get useCheckbox() { return this.options.useCheckbox; }
+    get useTriState() { return this.options.useTriState === undefined ? true : this.options.useTriState; }
+    get scrollContainer() { return this.options.scrollContainer; }
+    get allowDragoverStyling() { return this.options.allowDragoverStyling === undefined ? true : this.options.allowDragoverStyling; }
+    getNodeClone(node) {
+        if (this.options.getNodeClone) {
+            return this.options.getNodeClone(node);
+        }
+        // remove id from clone
+        // keeping ie11 compatibility
+        const nodeClone = Object.assign({}, node.data);
+        if (nodeClone.id) {
+            delete nodeClone.id;
+        }
+        return nodeClone;
+    }
+    allowDrop(element, to, $event) {
+        if (this.options.allowDrop instanceof Function) {
+            return this.options.allowDrop(element, to, $event);
+        }
+        else {
+            return this.options.allowDrop === undefined ? true : this.options.allowDrop;
+        }
+    }
+    allowDrag(node) {
+        if (this.options.allowDrag instanceof Function) {
+            return this.options.allowDrag(node);
+        }
+        else {
+            return this.options.allowDrag;
+        }
+    }
+    nodeClass(node) {
+        return this.options.nodeClass ? this.options.nodeClass(node) : '';
+    }
+    nodeHeight(node) {
+        if (node.data.virtual) {
+            return 0;
+        }
+        let nodeHeight = this.options.nodeHeight || 22;
+        if (typeof nodeHeight === 'function') {
+            nodeHeight = nodeHeight(node);
+        }
+        // account for drop slots:
+        return nodeHeight + (node.index === 0 ? 2 : 1) * this.dropSlotHeight;
+    }
+    get dropSlotHeight() {
+        return typeof this.options.dropSlotHeight === 'number' ? this.options.dropSlotHeight : 2;
+    }
+}
+
+const TREE_EVENTS = {
+    toggleExpanded: 'toggleExpanded',
+    activate: 'activate',
+    deactivate: 'deactivate',
+    nodeActivate: 'nodeActivate',
+    nodeDeactivate: 'nodeDeactivate',
+    select: 'select',
+    deselect: 'deselect',
+    focus: 'focus',
+    blur: 'blur',
+    initialized: 'initialized',
+    updateData: 'updateData',
+    moveNode: 'moveNode',
+    copyNode: 'copyNode',
+    event: 'event',
+    loadNodeChildren: 'loadNodeChildren',
+    changeFilter: 'changeFilter',
+    stateChange: 'stateChange'
+};
+
+var __decorate$3 = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class TreeNode {
+    constructor(data, parent, treeModel, index) {
+        this.data = data;
+        this.parent = parent;
+        this.treeModel = treeModel;
+        this.position = 0;
+        this.allowDrop = (element, $event) => {
+            return this.options.allowDrop(element, { parent: this, index: 0 }, $event);
+        };
+        this.allowDragoverStyling = () => {
+            return this.options.allowDragoverStyling;
+        };
+        if (this.id === undefined || this.id === null) {
+            this.id = uuid();
+        } // Make sure there's a unique id without overriding existing ids to work with immutable data structures
+        this.index = index;
+        if (this.getField('children')) {
+            this._initChildren();
+        }
+        this.autoLoadChildren();
+    }
+    get isHidden() { return this.treeModel.isHidden(this); }
+    ;
+    get isExpanded() { return this.treeModel.isExpanded(this); }
+    ;
+    get isActive() { return this.treeModel.isActive(this); }
+    ;
+    get isFocused() { return this.treeModel.isNodeFocused(this); }
+    ;
+    get isSelected() {
+        if (this.isSelectable()) {
+            return this.treeModel.isSelected(this);
+        }
+        else {
+            return this.children.some((node) => node.isSelected);
+        }
+    }
+    ;
+    get isAllSelected() {
+        if (this.isSelectable()) {
+            return this.treeModel.isSelected(this);
+        }
+        else {
+            return this.children.every((node) => node.isAllSelected);
+        }
+    }
+    ;
+    get isPartiallySelected() {
+        return this.isSelected && !this.isAllSelected;
+    }
+    get level() {
+        return this.parent ? this.parent.level + 1 : 0;
+    }
+    get path() {
+        return this.parent ? [...this.parent.path, this.id] : [];
+    }
+    get elementRef() {
+        throw `Element Ref is no longer supported since introducing virtual scroll\n
+      You may use a template to obtain a reference to the element`;
+    }
+    get originalNode() { return this._originalNode; }
+    ;
+    // helper get functions:
+    get hasChildren() {
+        return !!(this.getField('hasChildren') || (this.children && this.children.length > 0));
+    }
+    get isCollapsed() { return !this.isExpanded; }
+    get isLeaf() { return !this.hasChildren; }
+    get isRoot() { return this.parent.data.virtual; }
+    get realParent() { return this.isRoot ? null : this.parent; }
+    // proxy functions:
+    get options() { return this.treeModel.options; }
+    fireEvent(event) { this.treeModel.fireEvent(event); }
+    // field accessors:
+    get displayField() {
+        return this.getField('display');
+    }
+    get id() {
+        return this.getField('id');
+    }
+    set id(value) {
+        this.setField('id', value);
+    }
+    getField(key) {
+        return this.data[this.options[`${key}Field`]];
+    }
+    setField(key, value) {
+        this.data[this.options[`${key}Field`]] = value;
+    }
+    // traversing:
+    _findAdjacentSibling(steps, skipHidden = false) {
+        const siblings = this._getParentsChildren(skipHidden);
+        const index = siblings.indexOf(this);
+        return siblings.length > index + steps ? siblings[index + steps] : null;
+    }
+    findNextSibling(skipHidden = false) {
+        return this._findAdjacentSibling(+1, skipHidden);
+    }
+    findPreviousSibling(skipHidden = false) {
+        return this._findAdjacentSibling(-1, skipHidden);
+    }
+    getVisibleChildren() {
+        return this.visibleChildren;
+    }
+    get visibleChildren() {
+        return (this.children || []).filter((node) => !node.isHidden);
+    }
+    getFirstChild(skipHidden = false) {
+        let children = skipHidden ? this.visibleChildren : this.children;
+        return children != null && children.length ? children[0] : null;
+    }
+    getLastChild(skipHidden = false) {
+        let children = skipHidden ? this.visibleChildren : this.children;
+        return children != null && children.length ? children[children.length - 1] : null;
+    }
+    findNextNode(goInside = true, skipHidden = false) {
+        return goInside && this.isExpanded && this.getFirstChild(skipHidden) ||
+            this.findNextSibling(skipHidden) ||
+            this.parent && this.parent.findNextNode(false, skipHidden);
+    }
+    findPreviousNode(skipHidden = false) {
+        let previousSibling = this.findPreviousSibling(skipHidden);
+        if (!previousSibling) {
+            return this.realParent;
+        }
+        return previousSibling._getLastOpenDescendant(skipHidden);
+    }
+    _getLastOpenDescendant(skipHidden = false) {
+        const lastChild = this.getLastChild(skipHidden);
+        return (this.isCollapsed || !lastChild)
+            ? this
+            : lastChild._getLastOpenDescendant(skipHidden);
+    }
+    _getParentsChildren(skipHidden = false) {
+        const children = this.parent &&
+            (skipHidden ? this.parent.getVisibleChildren() : this.parent.children);
+        return children || [];
+    }
+    getIndexInParent(skipHidden = false) {
+        return this._getParentsChildren(skipHidden).indexOf(this);
+    }
+    isDescendantOf(node) {
+        if (this === node)
+            return true;
+        else
+            return this.parent && this.parent.isDescendantOf(node);
+    }
+    getNodePadding() {
+        return this.options.levelPadding * (this.level - 1) + 'px';
+    }
+    getClass() {
+        return [this.options.nodeClass(this), `tree-node-level-${this.level}`].join(' ');
+    }
+    onDrop($event) {
+        this.mouseAction('drop', $event.event, {
+            from: $event.element,
+            to: { parent: this, index: 0, dropOnNode: true }
+        });
+    }
+    allowDrag() {
+        return this.options.allowDrag(this);
+    }
+    // helper methods:
+    loadNodeChildren() {
+        if (!this.options.getChildren) {
+            return Promise.resolve(); // Not getChildren method - for using redux
+        }
+        return Promise.resolve(this.options.getChildren(this))
+            .then((children) => {
+            if (children) {
+                this.setField('children', children);
+                this._initChildren();
+                if (this.options.useTriState && this.treeModel.isSelected(this)) {
+                    this.setIsSelected(true);
+                }
+                this.children.forEach((child) => {
+                    if (child.getField('isExpanded') && child.hasChildren) {
+                        child.expand();
+                    }
+                });
+            }
+        }).then(() => {
+            this.fireEvent({
+                eventName: TREE_EVENTS.loadNodeChildren,
+                node: this
+            });
+        });
+    }
+    expand() {
+        if (!this.isExpanded) {
+            this.toggleExpanded();
+        }
+        return this;
+    }
+    collapse() {
+        if (this.isExpanded) {
+            this.toggleExpanded();
+        }
+        return this;
+    }
+    doForAll(fn) {
+        Promise.resolve(fn(this)).then(() => {
+            if (this.children) {
+                this.children.forEach((child) => child.doForAll(fn));
+            }
+        });
+    }
+    expandAll() {
+        this.doForAll((node) => node.expand());
+    }
+    collapseAll() {
+        this.doForAll((node) => node.collapse());
+    }
+    ensureVisible() {
+        if (this.realParent) {
+            this.realParent.expand();
+            this.realParent.ensureVisible();
+        }
+        return this;
+    }
+    toggleExpanded() {
+        this.setIsExpanded(!this.isExpanded);
+        return this;
+    }
+    setIsExpanded(value) {
+        if (this.hasChildren) {
+            this.treeModel.setExpandedNode(this, value);
+        }
+        return this;
+    }
+    ;
+    autoLoadChildren() {
+        this.handler =
+            reaction(() => this.isExpanded, (isExpanded) => {
+                if (!this.children && this.hasChildren && isExpanded) {
+                    this.loadNodeChildren();
+                }
+            }, { fireImmediately: true });
+    }
+    dispose() {
+        if (this.children) {
+            this.children.forEach((child) => child.dispose());
+        }
+        if (this.handler) {
+            this.handler();
+        }
+        this.parent = null;
+        this.children = null;
+    }
+    setIsActive(value, multi = false) {
+        this.treeModel.setActiveNode(this, value, multi);
+        if (value) {
+            this.focus(this.options.scrollOnActivate);
+        }
+        return this;
+    }
+    isSelectable() {
+        return this.isLeaf || !this.children || !this.options.useTriState;
+    }
+    setIsSelected(value) {
+        if (this.isSelectable()) {
+            this.treeModel.setSelectedNode(this, value);
+        }
+        else {
+            this.visibleChildren.forEach((child) => child.setIsSelected(value));
+        }
+        return this;
+    }
+    toggleSelected() {
+        this.setIsSelected(!this.isSelected);
+        return this;
+    }
+    toggleActivated(multi = false) {
+        this.setIsActive(!this.isActive, multi);
+        return this;
+    }
+    setActiveAndVisible(multi = false) {
+        this.setIsActive(true, multi)
+            .ensureVisible();
+        setTimeout(this.scrollIntoView.bind(this));
+        return this;
+    }
+    scrollIntoView(force = false) {
+        this.treeModel.virtualScroll.scrollIntoView(this, force);
+    }
+    focus(scroll = true) {
+        let previousNode = this.treeModel.getFocusedNode();
+        this.treeModel.setFocusedNode(this);
+        if (scroll) {
+            this.scrollIntoView();
+        }
+        if (previousNode) {
+            this.fireEvent({ eventName: TREE_EVENTS.blur, node: previousNode });
+        }
+        this.fireEvent({ eventName: TREE_EVENTS.focus, node: this });
+        return this;
+    }
+    blur() {
+        let previousNode = this.treeModel.getFocusedNode();
+        this.treeModel.setFocusedNode(null);
+        if (previousNode) {
+            this.fireEvent({ eventName: TREE_EVENTS.blur, node: this });
+        }
+        return this;
+    }
+    setIsHidden(value) {
+        this.treeModel.setIsHidden(this, value);
+    }
+    hide() {
+        this.setIsHidden(true);
+    }
+    show() {
+        this.setIsHidden(false);
+    }
+    mouseAction(actionName, $event, data = null) {
+        this.treeModel.setFocus(true);
+        const actionMapping = this.options.actionMapping.mouse;
+        const mouseAction = actionMapping[actionName];
+        if (mouseAction) {
+            mouseAction(this.treeModel, this, $event, data);
+        }
+    }
+    getSelfHeight() {
+        return this.options.nodeHeight(this);
+    }
+    _initChildren() {
+        this.children = this.getField('children')
+            .map((c, index) => new TreeNode(c, this, this.treeModel, index));
+    }
+}
+__decorate$3([
+    computed$1
+], TreeNode.prototype, "isHidden", null);
+__decorate$3([
+    computed$1
+], TreeNode.prototype, "isExpanded", null);
+__decorate$3([
+    computed$1
+], TreeNode.prototype, "isActive", null);
+__decorate$3([
+    computed$1
+], TreeNode.prototype, "isFocused", null);
+__decorate$3([
+    computed$1
+], TreeNode.prototype, "isSelected", null);
+__decorate$3([
+    computed$1
+], TreeNode.prototype, "isAllSelected", null);
+__decorate$3([
+    computed$1
+], TreeNode.prototype, "isPartiallySelected", null);
+__decorate$3([
+    observable$1
+], TreeNode.prototype, "children", void 0);
+__decorate$3([
+    observable$1
+], TreeNode.prototype, "index", void 0);
+__decorate$3([
+    observable$1
+], TreeNode.prototype, "position", void 0);
+__decorate$3([
+    observable$1
+], TreeNode.prototype, "height", void 0);
+__decorate$3([
+    computed$1
+], TreeNode.prototype, "level", null);
+__decorate$3([
+    computed$1
+], TreeNode.prototype, "path", null);
+__decorate$3([
+    computed$1
+], TreeNode.prototype, "visibleChildren", null);
+__decorate$3([
+    action$1
+], TreeNode.prototype, "setIsSelected", null);
+__decorate$3([
+    action$1
+], TreeNode.prototype, "_initChildren", null);
+function uuid() {
+    return Math.floor(Math.random() * 10000000000000);
+}
+
+var __decorate$2 = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class TreeModel {
+    constructor() {
+        this.options = new TreeOptions();
+        this.eventNames = Object.keys(TREE_EVENTS);
+        this.expandedNodeIds = {};
+        this.selectedLeafNodeIds = {};
+        this.activeNodeIds = {};
+        this.hiddenNodeIds = {};
+        this.focusedNodeId = null;
+        this.firstUpdate = true;
+        this.subscriptions = [];
+    }
+    // events
+    fireEvent(event) {
+        event.treeModel = this;
+        this.events[event.eventName].emit(event);
+        this.events.event.emit(event);
+    }
+    subscribe(eventName, fn) {
+        const subscription = this.events[eventName].subscribe(fn);
+        this.subscriptions.push(subscription);
+    }
+    // getters
+    getFocusedNode() {
+        return this.focusedNode;
+    }
+    getActiveNode() {
+        return this.activeNodes[0];
+    }
+    getActiveNodes() {
+        return this.activeNodes;
+    }
+    getVisibleRoots() {
+        return this.virtualRoot.visibleChildren;
+    }
+    getFirstRoot(skipHidden = false) {
+        const root = skipHidden ? this.getVisibleRoots() : this.roots;
+        return root != null && root.length ? root[0] : null;
+    }
+    getLastRoot(skipHidden = false) {
+        const root = skipHidden ? this.getVisibleRoots() : this.roots;
+        return root != null && root.length ? root[root.length - 1] : null;
+    }
+    get isFocused() {
+        return TreeModel.focusedTree === this;
+    }
+    isNodeFocused(node) {
+        return this.focusedNode === node;
+    }
+    isEmptyTree() {
+        return this.roots && this.roots.length === 0;
+    }
+    get focusedNode() {
+        return this.focusedNodeId ? this.getNodeById(this.focusedNodeId) : null;
+    }
+    get expandedNodes() {
+        const nodes = Object.keys(this.expandedNodeIds)
+            .filter((id) => this.expandedNodeIds[id])
+            .map((id) => this.getNodeById(id));
+        return nodes.filter(Boolean);
+    }
+    get activeNodes() {
+        const nodes = Object.keys(this.activeNodeIds)
+            .filter((id) => this.activeNodeIds[id])
+            .map((id) => this.getNodeById(id));
+        return nodes.filter(Boolean);
+    }
+    get hiddenNodes() {
+        const nodes = Object.keys(this.hiddenNodeIds)
+            .filter((id) => this.hiddenNodeIds[id])
+            .map((id) => this.getNodeById(id));
+        return nodes.filter(Boolean);
+    }
+    get selectedLeafNodes() {
+        const nodes = Object.keys(this.selectedLeafNodeIds)
+            .filter((id) => this.selectedLeafNodeIds[id])
+            .map((id) => this.getNodeById(id));
+        return nodes.filter(Boolean);
+    }
+    // locating nodes
+    getNodeByPath(path, startNode = null) {
+        if (!path)
+            return null;
+        startNode = startNode || this.virtualRoot;
+        if (path.length === 0)
+            return startNode;
+        if (!startNode.children)
+            return null;
+        const childId = path.shift();
+        const childNode = startNode.children.find(c => c.id === childId);
+        if (!childNode)
+            return null;
+        return this.getNodeByPath(path, childNode);
+    }
+    getNodeById(id) {
+        const idStr = id.toString();
+        return this.getNodeBy((node) => node.id.toString() === idStr);
+    }
+    getNodeBy(predicate, startNode = null) {
+        startNode = startNode || this.virtualRoot;
+        if (!startNode.children)
+            return null;
+        const found = startNode.children.find(predicate);
+        if (found) { // found in children
+            return found;
+        }
+        else { // look in children's children
+            for (let child of startNode.children) {
+                const foundInChildren = this.getNodeBy(predicate, child);
+                if (foundInChildren)
+                    return foundInChildren;
+            }
+        }
+    }
+    isExpanded(node) {
+        return this.expandedNodeIds[node.id];
+    }
+    isHidden(node) {
+        return this.hiddenNodeIds[node.id];
+    }
+    isActive(node) {
+        return this.activeNodeIds[node.id];
+    }
+    isSelected(node) {
+        return this.selectedLeafNodeIds[node.id];
+    }
+    ngOnDestroy() {
+        this.dispose();
+        this.unsubscribeAll();
+    }
+    dispose() {
+        // Dispose reactions of the replaced nodes
+        if (this.virtualRoot) {
+            this.virtualRoot.dispose();
+        }
+    }
+    unsubscribeAll() {
+        this.subscriptions.forEach(subscription => subscription.unsubscribe());
+        this.subscriptions = [];
+    }
+    // actions
+    setData({ nodes, options = null, events = null }) {
+        if (options) {
+            this.options = new TreeOptions(options);
+        }
+        if (events) {
+            this.events = events;
+        }
+        if (nodes) {
+            this.nodes = nodes;
+        }
+        this.update();
+    }
+    update() {
+        // Rebuild tree:
+        let virtualRootConfig = {
+            id: this.options.rootId,
+            virtual: true,
+            [this.options.childrenField]: this.nodes
+        };
+        this.dispose();
+        this.virtualRoot = new TreeNode(virtualRootConfig, null, this, 0);
+        this.roots = this.virtualRoot.children;
+        // Fire event:
+        if (this.firstUpdate) {
+            if (this.roots) {
+                this.firstUpdate = false;
+                this._calculateExpandedNodes();
+            }
+        }
+        else {
+            this.fireEvent({ eventName: TREE_EVENTS.updateData });
+        }
+    }
+    setFocusedNode(node) {
+        this.focusedNodeId = node ? node.id : null;
+    }
+    setFocus(value) {
+        TreeModel.focusedTree = value ? this : null;
+    }
+    doForAll(fn) {
+        this.roots.forEach((root) => root.doForAll(fn));
+    }
+    focusNextNode() {
+        let previousNode = this.getFocusedNode();
+        let nextNode = previousNode ? previousNode.findNextNode(true, true) : this.getFirstRoot(true);
+        if (nextNode)
+            nextNode.focus();
+    }
+    focusPreviousNode() {
+        let previousNode = this.getFocusedNode();
+        let nextNode = previousNode ? previousNode.findPreviousNode(true) : this.getLastRoot(true);
+        if (nextNode)
+            nextNode.focus();
+    }
+    focusDrillDown() {
+        let previousNode = this.getFocusedNode();
+        if (previousNode && previousNode.isCollapsed && previousNode.hasChildren) {
+            previousNode.toggleExpanded();
+        }
+        else {
+            let nextNode = previousNode ? previousNode.getFirstChild(true) : this.getFirstRoot(true);
+            if (nextNode)
+                nextNode.focus();
+        }
+    }
+    focusDrillUp() {
+        let previousNode = this.getFocusedNode();
+        if (!previousNode)
+            return;
+        if (previousNode.isExpanded) {
+            previousNode.toggleExpanded();
+        }
+        else {
+            let nextNode = previousNode.realParent;
+            if (nextNode)
+                nextNode.focus();
+        }
+    }
+    setActiveNode(node, value, multi = false) {
+        if (multi) {
+            this._setActiveNodeMulti(node, value);
+        }
+        else {
+            this._setActiveNodeSingle(node, value);
+        }
+        if (value) {
+            node.focus(this.options.scrollOnActivate);
+            this.fireEvent({ eventName: TREE_EVENTS.activate, node });
+            this.fireEvent({ eventName: TREE_EVENTS.nodeActivate, node }); // For IE11
+        }
+        else {
+            this.fireEvent({ eventName: TREE_EVENTS.deactivate, node });
+            this.fireEvent({ eventName: TREE_EVENTS.nodeDeactivate, node }); // For IE11
+        }
+    }
+    setSelectedNode(node, value) {
+        this.selectedLeafNodeIds = Object.assign({}, this.selectedLeafNodeIds, { [node.id]: value });
+        if (value) {
+            node.focus();
+            this.fireEvent({ eventName: TREE_EVENTS.select, node });
+        }
+        else {
+            this.fireEvent({ eventName: TREE_EVENTS.deselect, node });
+        }
+    }
+    setExpandedNode(node, value) {
+        this.expandedNodeIds = Object.assign({}, this.expandedNodeIds, { [node.id]: value });
+        this.fireEvent({ eventName: TREE_EVENTS.toggleExpanded, node, isExpanded: value });
+    }
+    expandAll() {
+        this.roots.forEach((root) => root.expandAll());
+    }
+    collapseAll() {
+        this.roots.forEach((root) => root.collapseAll());
+    }
+    setIsHidden(node, value) {
+        this.hiddenNodeIds = Object.assign({}, this.hiddenNodeIds, { [node.id]: value });
+    }
+    setHiddenNodeIds(nodeIds) {
+        this.hiddenNodeIds = nodeIds.reduce((hiddenNodeIds, id) => Object.assign(hiddenNodeIds, {
+            [id]: true
+        }), {});
+    }
+    performKeyAction(node, $event) {
+        const keyAction = this.options.actionMapping.keys[$event.keyCode];
+        if (keyAction) {
+            $event.preventDefault();
+            keyAction(this, node, $event);
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    filterNodes(filter, autoShow = true) {
+        let filterFn;
+        if (!filter) {
+            return this.clearFilter();
+        }
+        // support function and string filter
+        if (filter && typeof filter.valueOf() === 'string') {
+            filterFn = (node) => node.displayField.toLowerCase().indexOf(filter.toLowerCase()) !== -1;
+        }
+        else if (filter && typeof filter === 'function') {
+            filterFn = filter;
+        }
+        else {
+            console.error('Don\'t know what to do with filter', filter);
+            console.error('Should be either a string or function');
+            return;
+        }
+        const ids = {};
+        this.roots.forEach((node) => this._filterNode(ids, node, filterFn, autoShow));
+        this.hiddenNodeIds = ids;
+        this.fireEvent({ eventName: TREE_EVENTS.changeFilter });
+    }
+    clearFilter() {
+        this.hiddenNodeIds = {};
+        this.fireEvent({ eventName: TREE_EVENTS.changeFilter });
+    }
+    moveNode(node, to) {
+        const fromIndex = node.getIndexInParent();
+        const fromParent = node.parent;
+        if (!this.canMoveNode(node, to, fromIndex))
+            return;
+        const fromChildren = fromParent.getField('children');
+        // If node doesn't have children - create children array
+        if (!to.parent.getField('children')) {
+            to.parent.setField('children', []);
+        }
+        const toChildren = to.parent.getField('children');
+        const originalNode = fromChildren.splice(fromIndex, 1)[0];
+        // Compensate for index if already removed from parent:
+        let toIndex = (fromParent === to.parent && to.index > fromIndex) ? to.index - 1 : to.index;
+        toChildren.splice(toIndex, 0, originalNode);
+        fromParent.treeModel.update();
+        if (to.parent.treeModel !== fromParent.treeModel) {
+            to.parent.treeModel.update();
+        }
+        this.fireEvent({
+            eventName: TREE_EVENTS.moveNode,
+            node: originalNode,
+            to: { parent: to.parent.data, index: toIndex },
+            from: { parent: fromParent.data, index: fromIndex }
+        });
+    }
+    copyNode(node, to) {
+        const fromIndex = node.getIndexInParent();
+        if (!this.canMoveNode(node, to, fromIndex))
+            return;
+        // If node doesn't have children - create children array
+        if (!to.parent.getField('children')) {
+            to.parent.setField('children', []);
+        }
+        const toChildren = to.parent.getField('children');
+        const nodeCopy = this.options.getNodeClone(node);
+        toChildren.splice(to.index, 0, nodeCopy);
+        node.treeModel.update();
+        if (to.parent.treeModel !== node.treeModel) {
+            to.parent.treeModel.update();
+        }
+        this.fireEvent({ eventName: TREE_EVENTS.copyNode, node: nodeCopy, to: { parent: to.parent.data, index: to.index } });
+    }
+    getState() {
+        return {
+            expandedNodeIds: this.expandedNodeIds,
+            selectedLeafNodeIds: this.selectedLeafNodeIds,
+            activeNodeIds: this.activeNodeIds,
+            hiddenNodeIds: this.hiddenNodeIds,
+            focusedNodeId: this.focusedNodeId
+        };
+    }
+    setState(state) {
+        if (!state)
+            return;
+        Object.assign(this, {
+            expandedNodeIds: state.expandedNodeIds || {},
+            selectedLeafNodeIds: state.selectedLeafNodeIds || {},
+            activeNodeIds: state.activeNodeIds || {},
+            hiddenNodeIds: state.hiddenNodeIds || {},
+            focusedNodeId: state.focusedNodeId
+        });
+    }
+    subscribeToState(fn) {
+        autorun(() => fn(this.getState()));
+    }
+    canMoveNode(node, to, fromIndex = undefined) {
+        const fromNodeIndex = fromIndex || node.getIndexInParent();
+        // same node:
+        if (node.parent === to.parent && fromIndex === to.index) {
+            return false;
+        }
+        return !to.parent.isDescendantOf(node);
+    }
+    calculateExpandedNodes() {
+        this._calculateExpandedNodes();
+    }
+    // private methods
+    _filterNode(ids, node, filterFn, autoShow) {
+        // if node passes function then it's visible
+        let isVisible = filterFn(node);
+        if (node.children) {
+            // if one of node's children passes filter then this node is also visible
+            node.children.forEach((child) => {
+                if (this._filterNode(ids, child, filterFn, autoShow)) {
+                    isVisible = true;
+                }
+            });
+        }
+        // mark node as hidden
+        if (!isVisible) {
+            ids[node.id] = true;
+        }
+        // auto expand parents to make sure the filtered nodes are visible
+        if (autoShow && isVisible) {
+            node.ensureVisible();
+        }
+        return isVisible;
+    }
+    _calculateExpandedNodes(startNode = null) {
+        startNode = startNode || this.virtualRoot;
+        if (startNode.data[this.options.isExpandedField]) {
+            this.expandedNodeIds = Object.assign({}, this.expandedNodeIds, { [startNode.id]: true });
+        }
+        if (startNode.children) {
+            startNode.children.forEach((child) => this._calculateExpandedNodes(child));
+        }
+    }
+    _setActiveNodeSingle(node, value) {
+        // Deactivate all other nodes:
+        this.activeNodes
+            .filter((activeNode) => activeNode !== node)
+            .forEach((activeNode) => {
+            this.fireEvent({ eventName: TREE_EVENTS.deactivate, node: activeNode });
+            this.fireEvent({ eventName: TREE_EVENTS.nodeDeactivate, node: activeNode }); // For IE11
+        });
+        if (value) {
+            this.activeNodeIds = { [node.id]: true };
+        }
+        else {
+            this.activeNodeIds = {};
+        }
+    }
+    _setActiveNodeMulti(node, value) {
+        this.activeNodeIds = Object.assign({}, this.activeNodeIds, { [node.id]: value });
+    }
+}
+TreeModel.focusedTree = null;
+/** @nocollapse */ TreeModel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ TreeModel.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeModel });
+__decorate$2([
+    observable$1
+], TreeModel.prototype, "roots", void 0);
+__decorate$2([
+    observable$1
+], TreeModel.prototype, "expandedNodeIds", void 0);
+__decorate$2([
+    observable$1
+], TreeModel.prototype, "selectedLeafNodeIds", void 0);
+__decorate$2([
+    observable$1
+], TreeModel.prototype, "activeNodeIds", void 0);
+__decorate$2([
+    observable$1
+], TreeModel.prototype, "hiddenNodeIds", void 0);
+__decorate$2([
+    observable$1
+], TreeModel.prototype, "focusedNodeId", void 0);
+__decorate$2([
+    observable$1
+], TreeModel.prototype, "virtualRoot", void 0);
+__decorate$2([
+    computed$1
+], TreeModel.prototype, "focusedNode", null);
+__decorate$2([
+    computed$1
+], TreeModel.prototype, "expandedNodes", null);
+__decorate$2([
+    computed$1
+], TreeModel.prototype, "activeNodes", null);
+__decorate$2([
+    computed$1
+], TreeModel.prototype, "hiddenNodes", null);
+__decorate$2([
+    computed$1
+], TreeModel.prototype, "selectedLeafNodes", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "setData", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "update", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "setFocusedNode", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "setFocus", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "doForAll", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "focusNextNode", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "focusPreviousNode", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "focusDrillDown", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "focusDrillUp", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "setActiveNode", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "setSelectedNode", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "setExpandedNode", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "expandAll", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "collapseAll", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "setIsHidden", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "setHiddenNodeIds", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "filterNodes", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "clearFilter", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "moveNode", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "copyNode", null);
+__decorate$2([
+    action$1
+], TreeModel.prototype, "setState", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeModel, decorators: [{
+            type: Injectable
+        }], propDecorators: { roots: [], expandedNodeIds: [], selectedLeafNodeIds: [], activeNodeIds: [], hiddenNodeIds: [], focusedNodeId: [], virtualRoot: [], focusedNode: [], expandedNodes: [], activeNodes: [], hiddenNodes: [], selectedLeafNodes: [], setData: [], update: [], setFocusedNode: [], setFocus: [], doForAll: [], focusNextNode: [], focusPreviousNode: [], focusDrillDown: [], focusDrillUp: [], setActiveNode: [], setSelectedNode: [], setExpandedNode: [], expandAll: [], collapseAll: [], setIsHidden: [], setHiddenNodeIds: [], filterNodes: [], clearFilter: [], moveNode: [], copyNode: [], setState: [] } });
+
+class TreeDraggedElement {
+    constructor() {
+        this._draggedElement = null;
+    }
+    set(draggedElement) {
+        this._draggedElement = draggedElement;
+    }
+    get() {
+        return this._draggedElement;
+    }
+    isDragging() {
+        return !!this.get();
+    }
+}
+/** @nocollapse */ TreeDraggedElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeDraggedElement, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ TreeDraggedElement.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeDraggedElement, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeDraggedElement, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const Y_OFFSET = 500; // Extra pixels outside the viewport, in each direction, to render nodes in
+const Y_EPSILON = 150; // Minimum pixel change required to recalculate the rendered nodes
+class TreeVirtualScroll {
+    constructor(treeModel) {
+        this.treeModel = treeModel;
+        this.yBlocks = 0;
+        this.x = 0;
+        this.viewportHeight = null;
+        this.viewport = null;
+        treeModel.virtualScroll = this;
+        this._dispose = [autorun(() => this.fixScroll())];
+    }
+    get y() {
+        return this.yBlocks * Y_EPSILON;
+    }
+    get totalHeight() {
+        return this.treeModel.virtualRoot ? this.treeModel.virtualRoot.height : 0;
+    }
+    fireEvent(event) {
+        this.treeModel.fireEvent(event);
+    }
+    init() {
+        const fn = this.recalcPositions.bind(this);
+        fn();
+        this._dispose = [
+            ...this._dispose,
+            reaction(() => this.treeModel.roots, fn),
+            reaction(() => this.treeModel.expandedNodeIds, fn),
+            reaction(() => this.treeModel.hiddenNodeIds, fn)
+        ];
+        this.treeModel.subscribe(TREE_EVENTS.loadNodeChildren, fn);
+    }
+    isEnabled() {
+        return this.treeModel.options.useVirtualScroll;
+    }
+    _setYBlocks(value) {
+        this.yBlocks = value;
+    }
+    recalcPositions() {
+        this.treeModel.virtualRoot.height = this._getPositionAfter(this.treeModel.getVisibleRoots(), 0);
+    }
+    _getPositionAfter(nodes, startPos) {
+        let position = startPos;
+        nodes.forEach((node) => {
+            node.position = position;
+            position = this._getPositionAfterNode(node, position);
+        });
+        return position;
+    }
+    _getPositionAfterNode(node, startPos) {
+        let position = node.getSelfHeight() + startPos;
+        if (node.children && node.isExpanded) { // TBD: consider loading component as well
+            position = this._getPositionAfter(node.visibleChildren, position);
+        }
+        node.height = position - startPos;
+        return position;
+    }
+    clear() {
+        this._dispose.forEach((d) => d());
+    }
+    setViewport(viewport) {
+        Object.assign(this, {
+            viewport,
+            x: viewport.scrollLeft,
+            yBlocks: Math.round(viewport.scrollTop / Y_EPSILON),
+            viewportHeight: viewport.getBoundingClientRect ? viewport.getBoundingClientRect().height : 0
+        });
+    }
+    scrollIntoView(node, force, scrollToMiddle = true) {
+        if (node.options.scrollContainer) {
+            const scrollContainer = node.options.scrollContainer;
+            const scrollContainerHeight = scrollContainer.getBoundingClientRect().height;
+            const scrollContainerTop = scrollContainer.getBoundingClientRect().top;
+            const nodeTop = this.viewport.getBoundingClientRect().top + node.position - scrollContainerTop;
+            if (force || // force scroll to node
+                nodeTop < scrollContainer.scrollTop || // node is above scroll container
+                nodeTop + node.getSelfHeight() > scrollContainer.scrollTop + scrollContainerHeight) { // node is below container
+                scrollContainer.scrollTop = scrollToMiddle ?
+                    nodeTop - scrollContainerHeight / 2 : // scroll to middle
+                    nodeTop; // scroll to start
+            }
+        }
+        else {
+            if (force || // force scroll to node
+                node.position < this.y || // node is above viewport
+                node.position + node.getSelfHeight() > this.y + this.viewportHeight) { // node is below viewport
+                if (this.viewport) {
+                    this.viewport.scrollTop = scrollToMiddle ?
+                        node.position - this.viewportHeight / 2 : // scroll to middle
+                        node.position; // scroll to start
+                    this._setYBlocks(Math.floor(this.viewport.scrollTop / Y_EPSILON));
+                }
+            }
+        }
+    }
+    getViewportNodes(nodes) {
+        if (!nodes)
+            return [];
+        const visibleNodes = nodes.filter((node) => !node.isHidden);
+        if (!this.isEnabled())
+            return visibleNodes;
+        if (!this.viewportHeight || !visibleNodes.length)
+            return [];
+        // When loading children async this method is called before their height and position is calculated.
+        // In that case firstIndex === 0 and lastIndex === visibleNodes.length - 1 (e.g. 1000),
+        // which means that it loops through every visibleNodes item and push them into viewportNodes array.
+        // We can prevent nodes from being pushed to the array and wait for the appropriate calculations to take place
+        const lastVisibleNode = visibleNodes.slice(-1)[0];
+        if (!lastVisibleNode.height && lastVisibleNode.position === 0)
+            return [];
+        // Search for first node in the viewport using binary search
+        // Look for first node that starts after the beginning of the viewport (with buffer)
+        // Or that ends after the beginning of the viewport
+        const firstIndex = binarySearch(visibleNodes, (node) => {
+            return (node.position + Y_OFFSET > this.y) ||
+                (node.position + node.height > this.y);
+        });
+        // Search for last node in the viewport using binary search
+        // Look for first node that starts after the end of the viewport (with buffer)
+        const lastIndex = binarySearch(visibleNodes, (node) => {
+            return node.position - Y_OFFSET > this.y + this.viewportHeight;
+        }, firstIndex);
+        const viewportNodes = [];
+        for (let i = firstIndex; i <= lastIndex; i++) {
+            viewportNodes.push(visibleNodes[i]);
+        }
+        return viewportNodes;
+    }
+    fixScroll() {
+        const maxY = Math.max(0, this.totalHeight - this.viewportHeight);
+        if (this.y < 0)
+            this._setYBlocks(0);
+        if (this.y > maxY)
+            this._setYBlocks(maxY / Y_EPSILON);
+    }
+}
+/** @nocollapse */ TreeVirtualScroll.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeVirtualScroll, deps: [{ token: TreeModel }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ TreeVirtualScroll.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeVirtualScroll });
+__decorate$1([
+    observable$1
+], TreeVirtualScroll.prototype, "yBlocks", void 0);
+__decorate$1([
+    observable$1
+], TreeVirtualScroll.prototype, "x", void 0);
+__decorate$1([
+    observable$1
+], TreeVirtualScroll.prototype, "viewportHeight", void 0);
+__decorate$1([
+    computed$1
+], TreeVirtualScroll.prototype, "y", null);
+__decorate$1([
+    computed$1
+], TreeVirtualScroll.prototype, "totalHeight", null);
+__decorate$1([
+    action$1
+], TreeVirtualScroll.prototype, "_setYBlocks", null);
+__decorate$1([
+    action$1
+], TreeVirtualScroll.prototype, "recalcPositions", null);
+__decorate$1([
+    action$1
+], TreeVirtualScroll.prototype, "setViewport", null);
+__decorate$1([
+    action$1
+], TreeVirtualScroll.prototype, "scrollIntoView", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeVirtualScroll, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: TreeModel }]; }, propDecorators: { yBlocks: [], x: [], viewportHeight: [], y: [], totalHeight: [], _setYBlocks: [], recalcPositions: [], setViewport: [], scrollIntoView: [] } });
+function binarySearch(nodes, condition, firstIndex = 0) {
+    let index = firstIndex;
+    let toIndex = nodes.length - 1;
+    while (index !== toIndex) {
+        let midIndex = Math.floor((index + toIndex) / 2);
+        if (condition(nodes[midIndex])) {
+            toIndex = midIndex;
+        }
+        else {
+            if (index === midIndex)
+                index = toIndex;
+            else
+                index = midIndex;
+        }
+    }
+    return index;
+}
+
+class LoadingComponent {
+}
+/** @nocollapse */ LoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ LoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoadingComponent, selector: "tree-loading-component", inputs: { template: "template", node: "node" }, ngImport: i0, template: `
+    <span *ngIf="!template">loading...</span>
+    <ng-container
+      [ngTemplateOutlet]="template"
+      [ngTemplateOutletContext]="{ $implicit: node }">
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    encapsulation: ViewEncapsulation.None,
+                    selector: 'tree-loading-component',
+                    template: `
+    <span *ngIf="!template">loading...</span>
+    <ng-container
+      [ngTemplateOutlet]="template"
+      [ngTemplateOutletContext]="{ $implicit: node }">
+    </ng-container>
+  `,
+                }]
+        }], propDecorators: { template: [{
+                type: Input
+            }], node: [{
+                type: Input
+            }] } });
+
+const DRAG_OVER_CLASS$1 = 'is-dragging-over';
+const DRAG_DISABLED_CLASS = 'is-dragging-over-disabled';
+class TreeDropDirective {
+    constructor(el, renderer, treeDraggedElement, ngZone) {
+        this.el = el;
+        this.renderer = renderer;
+        this.treeDraggedElement = treeDraggedElement;
+        this.ngZone = ngZone;
+        this.allowDragoverStyling = true;
+        this.onDropCallback = new EventEmitter();
+        this.onDragOverCallback = new EventEmitter();
+        this.onDragLeaveCallback = new EventEmitter();
+        this.onDragEnterCallback = new EventEmitter();
+        this._allowDrop = (element, $event) => true;
+        this.dragOverEventHandler = this.onDragOver.bind(this);
+        this.dragEnterEventHandler = this.onDragEnter.bind(this);
+        this.dragLeaveEventHandler = this.onDragLeave.bind(this);
+    }
+    set treeAllowDrop(allowDrop) {
+        if (allowDrop instanceof Function) {
+            this._allowDrop = allowDrop;
+        }
+        else
+            this._allowDrop = (element, $event) => allowDrop;
+    }
+    allowDrop($event) {
+        return this._allowDrop(this.treeDraggedElement.get(), $event);
+    }
+    ngAfterViewInit() {
+        let el = this.el.nativeElement;
+        this.ngZone.runOutsideAngular(() => {
+            el.addEventListener('dragover', this.dragOverEventHandler);
+            el.addEventListener('dragenter', this.dragEnterEventHandler);
+            el.addEventListener('dragleave', this.dragLeaveEventHandler);
+        });
+    }
+    ngOnDestroy() {
+        let el = this.el.nativeElement;
+        el.removeEventListener('dragover', this.dragOverEventHandler);
+        el.removeEventListener('dragenter', this.dragEnterEventHandler);
+        el.removeEventListener('dragleave', this.dragLeaveEventHandler);
+    }
+    onDragOver($event) {
+        if (!this.allowDrop($event)) {
+            if (this.allowDragoverStyling) {
+                return this.addDisabledClass();
+            }
+            return;
+        }
+        this.onDragOverCallback.emit({ event: $event, element: this.treeDraggedElement.get() });
+        $event.preventDefault();
+        if (this.allowDragoverStyling) {
+            this.addClass();
+        }
+    }
+    onDragEnter($event) {
+        if (!this.allowDrop($event))
+            return;
+        $event.preventDefault();
+        this.onDragEnterCallback.emit({ event: $event, element: this.treeDraggedElement.get() });
+    }
+    onDragLeave($event) {
+        if (!this.allowDrop($event)) {
+            if (this.allowDragoverStyling) {
+                return this.removeDisabledClass();
+            }
+            return;
+        }
+        this.onDragLeaveCallback.emit({ event: $event, element: this.treeDraggedElement.get() });
+        if (this.allowDragoverStyling) {
+            this.removeClass();
+        }
+    }
+    onDrop($event) {
+        if (!this.allowDrop($event))
+            return;
+        $event.preventDefault();
+        this.onDropCallback.emit({ event: $event, element: this.treeDraggedElement.get() });
+        if (this.allowDragoverStyling) {
+            this.removeClass();
+        }
+        this.treeDraggedElement.set(null);
+    }
+    addClass() {
+        this.renderer.addClass(this.el.nativeElement, DRAG_OVER_CLASS$1);
+    }
+    removeClass() {
+        this.renderer.removeClass(this.el.nativeElement, DRAG_OVER_CLASS$1);
+    }
+    addDisabledClass() {
+        this.renderer.addClass(this.el.nativeElement, DRAG_DISABLED_CLASS);
+    }
+    removeDisabledClass() {
+        this.renderer.removeClass(this.el.nativeElement, DRAG_DISABLED_CLASS);
+    }
+}
+/** @nocollapse */ TreeDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeDropDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: TreeDraggedElement }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ TreeDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TreeDropDirective, selector: "[treeDrop]", inputs: { allowDragoverStyling: "allowDragoverStyling", treeAllowDrop: "treeAllowDrop" }, outputs: { onDropCallback: "treeDrop", onDragOverCallback: "treeDropDragOver", onDragLeaveCallback: "treeDropDragLeave", onDragEnterCallback: "treeDropDragEnter" }, host: { listeners: { "drop": "onDrop($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[treeDrop]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TreeDraggedElement }, { type: i0.NgZone }]; }, propDecorators: { allowDragoverStyling: [{
+                type: Input
+            }], onDropCallback: [{
+                type: Output,
+                args: ['treeDrop']
+            }], onDragOverCallback: [{
+                type: Output,
+                args: ['treeDropDragOver']
+            }], onDragLeaveCallback: [{
+                type: Output,
+                args: ['treeDropDragLeave']
+            }], onDragEnterCallback: [{
+                type: Output,
+                args: ['treeDropDragEnter']
+            }], treeAllowDrop: [{
+                type: Input
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class TreeNodeDropSlot {
+    onDrop($event) {
+        this.node.mouseAction('drop', $event.event, {
+            from: $event.element,
+            to: { parent: this.node, index: this.dropIndex }
+        });
+    }
+    allowDrop(element, $event) {
+        return this.node.options.allowDrop(element, { parent: this.node, index: this.dropIndex }, $event);
+    }
+}
+/** @nocollapse */ TreeNodeDropSlot.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeDropSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TreeNodeDropSlot.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeNodeDropSlot, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: { node: "node", dropIndex: "dropIndex" }, ngImport: i0, template: `
+    <div
+      class="node-drop-slot"
+      (treeDrop)="onDrop($event)"
+      [treeAllowDrop]="allowDrop.bind(this)"
+      [allowDragoverStyling]="true">
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TreeDropDirective, selector: "[treeDrop]", inputs: ["allowDragoverStyling", "treeAllowDrop"], outputs: ["treeDrop", "treeDropDragOver", "treeDropDragLeave", "treeDropDragEnter"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeDropSlot, decorators: [{
+            type: Component,
+            args: [{ selector: 'TreeNodeDropSlot, tree-node-drop-slot', encapsulation: ViewEncapsulation.None, template: `
+    <div
+      class="node-drop-slot"
+      (treeDrop)="onDrop($event)"
+      [treeAllowDrop]="allowDrop.bind(this)"
+      [allowDragoverStyling]="true">
+    </div>
+  ` }]
+        }], propDecorators: { node: [{
+                type: Input
+            }], dropIndex: [{
+                type: Input
+            }] } });
+
+// Re-export mobx operators to be able to use inside components with AOT:
+function actionInternal(...args) {
+    return action$1(...args);
+}
+const action = Object.assign(actionInternal, action$1);
+function computedInternal(...args) {
+    return computed$1(...args);
+}
+const computed = Object.assign(computedInternal, computed$1);
+function observableInternal(...args) {
+    return observable$1(...args);
+}
+const observable = Object.assign(observableInternal, observable$1);
+
+const EASE_ACCELERATION = 1.005;
+class TreeAnimateOpenDirective {
+    constructor(renderer, templateRef, viewContainerRef) {
+        this.renderer = renderer;
+        this.templateRef = templateRef;
+        this.viewContainerRef = viewContainerRef;
+    }
+    set isOpen(value) {
+        if (value) {
+            this._show();
+            if (this.isEnabled && this._isOpen === false) {
+                this._animateOpen();
+            }
+        }
+        else {
+            this.isEnabled ? this._animateClose() : this._hide();
+        }
+        this._isOpen = !!value;
+    }
+    ;
+    _show() {
+        if (this.innerElement)
+            return;
+        // create child view
+        this.innerElement = this.viewContainerRef.createEmbeddedView(this.templateRef).rootNodes[0];
+    }
+    _hide() {
+        this.viewContainerRef.clear();
+        this.innerElement = null;
+    }
+    _animateOpen() {
+        let delta = this.animateSpeed;
+        let ease = this.animateAcceleration;
+        let maxHeight = 0;
+        // set height to 0
+        this.renderer.setStyle(this.innerElement, 'max-height', `0`);
+        // increase maxHeight until height doesn't change
+        setTimeout(() => {
+            const i = setInterval(() => {
+                if (!this._isOpen || !this.innerElement)
+                    return clearInterval(i);
+                maxHeight += delta;
+                const roundedMaxHeight = Math.round(maxHeight);
+                this.renderer.setStyle(this.innerElement, 'max-height', `${roundedMaxHeight}px`);
+                const height = this.innerElement.getBoundingClientRect ? this.innerElement.getBoundingClientRect().height : 0; // TBD use renderer
+                delta *= ease;
+                ease *= EASE_ACCELERATION;
+                if (height < roundedMaxHeight) {
+                    // Make maxHeight auto because animation finished and container might change height later on
+                    this.renderer.setStyle(this.innerElement, 'max-height', null);
+                    clearInterval(i);
+                }
+            }, 17);
+        });
+    }
+    _animateClose() {
+        if (!this.innerElement)
+            return;
+        let delta = this.animateSpeed;
+        let ease = this.animateAcceleration;
+        let height = this.innerElement.getBoundingClientRect().height; // TBD use renderer
+        // slowly decrease maxHeight to 0, starting from current height
+        const i = setInterval(() => {
+            if (this._isOpen || !this.innerElement)
+                return clearInterval(i);
+            height -= delta;
+            this.renderer.setStyle(this.innerElement, 'max-height', `${height}px`);
+            delta *= ease;
+            ease *= EASE_ACCELERATION;
+            if (height <= 0) {
+                // after animation complete - remove child element
+                this.viewContainerRef.clear();
+                this.innerElement = null;
+                clearInterval(i);
+            }
+        }, 17);
+    }
+}
+/** @nocollapse */ TreeAnimateOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeAnimateOpenDirective, deps: [{ token: i0.Renderer2 }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ TreeAnimateOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TreeAnimateOpenDirective, selector: "[treeAnimateOpen]", inputs: { animateSpeed: ["treeAnimateOpenSpeed", "animateSpeed"], animateAcceleration: ["treeAnimateOpenAcceleration", "animateAcceleration"], isEnabled: ["treeAnimateOpenEnabled", "isEnabled"], isOpen: ["treeAnimateOpen", "isOpen"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeAnimateOpenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[treeAnimateOpen]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { animateSpeed: [{
+                type: Input,
+                args: ['treeAnimateOpenSpeed']
+            }], animateAcceleration: [{
+                type: Input,
+                args: ['treeAnimateOpenAcceleration']
+            }], isEnabled: [{
+                type: Input,
+                args: ['treeAnimateOpenEnabled']
+            }], isOpen: [{
+                type: Input,
+                args: ['treeAnimateOpen']
+            }] } });
+
+class TreeNodeContent {
+}
+/** @nocollapse */ TreeNodeContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TreeNodeContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeNodeContent, selector: "tree-node-content", inputs: { node: "node", index: "index", template: "template" }, ngImport: i0, template: `
+  <span *ngIf="!template">{{ node.displayField }}</span>
+  <ng-container
+    [ngTemplateOutlet]="template"
+    [ngTemplateOutletContext]="{ $implicit: node, node: node, index: index }">
+  </ng-container>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tree-node-content',
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+  <span *ngIf="!template">{{ node.displayField }}</span>
+  <ng-container
+    [ngTemplateOutlet]="template"
+    [ngTemplateOutletContext]="{ $implicit: node, node: node, index: index }">
+  </ng-container>`,
+                }]
+        }], propDecorators: { node: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }] } });
+
+const DRAG_OVER_CLASS = 'is-dragging-over';
+class TreeDragDirective {
+    constructor(el, renderer, treeDraggedElement, ngZone) {
+        this.el = el;
+        this.renderer = renderer;
+        this.treeDraggedElement = treeDraggedElement;
+        this.ngZone = ngZone;
+        this.dragEventHandler = this.onDrag.bind(this);
+    }
+    ngAfterViewInit() {
+        let el = this.el.nativeElement;
+        this.ngZone.runOutsideAngular(() => {
+            el.addEventListener('drag', this.dragEventHandler);
+        });
+    }
+    ngDoCheck() {
+        this.renderer.setAttribute(this.el.nativeElement, 'draggable', this.treeDragEnabled ? 'true' : 'false');
+    }
+    ngOnDestroy() {
+        let el = this.el.nativeElement;
+        el.removeEventListener('drag', this.dragEventHandler);
+    }
+    onDragStart(ev) {
+        // setting the data is required by firefox
+        ev.dataTransfer.setData('text', ev.target.id);
+        this.treeDraggedElement.set(this.draggedElement);
+        if (this.draggedElement.mouseAction) {
+            this.draggedElement.mouseAction('dragStart', ev);
+        }
+    }
+    onDrag(ev) {
+        if (this.draggedElement.mouseAction) {
+            this.draggedElement.mouseAction('drag', ev);
+        }
+    }
+    onDragEnd() {
+        if (this.draggedElement.mouseAction) {
+            this.draggedElement.mouseAction('dragEnd');
+        }
+        this.treeDraggedElement.set(null);
+    }
+}
+/** @nocollapse */ TreeDragDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeDragDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: TreeDraggedElement }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ TreeDragDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TreeDragDirective, selector: "[treeDrag]", inputs: { draggedElement: ["treeDrag", "draggedElement"], treeDragEnabled: "treeDragEnabled" }, host: { listeners: { "dragstart": "onDragStart($event)", "dragend": "onDragEnd()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeDragDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[treeDrag]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TreeDraggedElement }, { type: i0.NgZone }]; }, propDecorators: { draggedElement: [{
+                type: Input,
+                args: ['treeDrag']
+            }], treeDragEnabled: [{
+                type: Input
+            }], onDragStart: [{
+                type: HostListener,
+                args: ['dragstart', ['$event']]
+            }], onDragEnd: [{
+                type: HostListener,
+                args: ['dragend']
+            }] } });
+
+class TreeNodeExpanderComponent {
+}
+/** @nocollapse */ TreeNodeExpanderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TreeNodeExpanderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeNodeExpanderComponent, selector: "tree-node-expander", inputs: { node: "node" }, ngImport: i0, template: `
+    <ng-container *treeMobxAutorun="{ dontDetach: true }">
+      <span
+        *ngIf="node.hasChildren"
+        [class.toggle-children-wrapper-expanded]="node.isExpanded"
+        [class.toggle-children-wrapper-collapsed]="node.isCollapsed"
+        class="toggle-children-wrapper"
+        (click)="node.mouseAction('expanderClick', $event)"
+      >
+        <span class="toggle-children"></span>
+      </span>
+      <span *ngIf="!node.hasChildren" class="toggle-children-placeholder">
+      </span>
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TreeMobxAutorunDirective, selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeExpanderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tree-node-expander', encapsulation: ViewEncapsulation.None, template: `
+    <ng-container *treeMobxAutorun="{ dontDetach: true }">
+      <span
+        *ngIf="node.hasChildren"
+        [class.toggle-children-wrapper-expanded]="node.isExpanded"
+        [class.toggle-children-wrapper-collapsed]="node.isCollapsed"
+        class="toggle-children-wrapper"
+        (click)="node.mouseAction('expanderClick', $event)"
+      >
+        <span class="toggle-children"></span>
+      </span>
+      <span *ngIf="!node.hasChildren" class="toggle-children-placeholder">
+      </span>
+    </ng-container>
+  ` }]
+        }], propDecorators: { node: [{
+                type: Input
+            }] } });
+
+class TreeNodeCheckboxComponent {
+}
+/** @nocollapse */ TreeNodeCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TreeNodeCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeNodeCheckboxComponent, selector: "tree-node-checkbox", inputs: { node: "node" }, ngImport: i0, template: `
+    <ng-container *treeMobxAutorun="{ dontDetach: true }">
+      <input
+        class="tree-node-checkbox"
+        type="checkbox"
+        (click)="node.mouseAction('checkboxClick', $event)"
+        [checked]="node.isSelected"
+        [indeterminate]="node.isPartiallySelected"
+      />
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TreeMobxAutorunDirective, selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tree-node-checkbox', encapsulation: ViewEncapsulation.None, template: `
+    <ng-container *treeMobxAutorun="{ dontDetach: true }">
+      <input
+        class="tree-node-checkbox"
+        type="checkbox"
+        (click)="node.mouseAction('checkboxClick', $event)"
+        [checked]="node.isSelected"
+        [indeterminate]="node.isPartiallySelected"
+      />
+    </ng-container>
+  ` }]
+        }], propDecorators: { node: [{
+                type: Input
+            }] } });
+
+class TreeNodeWrapperComponent {
+}
+/** @nocollapse */ TreeNodeWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TreeNodeWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeNodeWrapperComponent, selector: "tree-node-wrapper", inputs: { node: "node", index: "index", templates: "templates" }, ngImport: i0, template: `
+      <div *ngIf="!templates.treeNodeWrapperTemplate" class="node-wrapper" [style.padding-left]="node.getNodePadding()">
+          <tree-node-checkbox *ngIf="node.options.useCheckbox" [node]="node"></tree-node-checkbox>
+          <tree-node-expander [node]="node"></tree-node-expander>
+          <div class="node-content-wrapper"
+               [class.node-content-wrapper-active]="node.isActive"
+               [class.node-content-wrapper-focused]="node.isFocused"
+               (click)="node.mouseAction('click', $event)"
+               (dblclick)="node.mouseAction('dblClick', $event)"
+               (mouseover)="node.mouseAction('mouseOver', $event)"
+               (mouseout)="node.mouseAction('mouseOut', $event)"
+               (contextmenu)="node.mouseAction('contextMenu', $event)"
+               (treeDrop)="node.onDrop($event)"
+               (treeDropDragOver)="node.mouseAction('dragOver', $event)"
+               (treeDropDragLeave)="node.mouseAction('dragLeave', $event)"
+               (treeDropDragEnter)="node.mouseAction('dragEnter', $event)"
+               [treeAllowDrop]="node.allowDrop"
+               [allowDragoverStyling]="node.allowDragoverStyling()"
+               [treeDrag]="node"
+               [treeDragEnabled]="node.allowDrag()">
+
+              <tree-node-content [node]="node" [index]="index" [template]="templates.treeNodeTemplate">
+              </tree-node-content>
+          </div>
+      </div>
+      <ng-container
+              [ngTemplateOutlet]="templates.treeNodeWrapperTemplate"
+              [ngTemplateOutletContext]="{ $implicit: node, node: node, index: index, templates: templates }">
+      </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TreeNodeContent, selector: "tree-node-content", inputs: ["node", "index", "template"] }, { kind: "directive", type: TreeDropDirective, selector: "[treeDrop]", inputs: ["allowDragoverStyling", "treeAllowDrop"], outputs: ["treeDrop", "treeDropDragOver", "treeDropDragLeave", "treeDropDragEnter"] }, { kind: "directive", type: TreeDragDirective, selector: "[treeDrag]", inputs: ["treeDrag", "treeDragEnabled"] }, { kind: "component", type: TreeNodeExpanderComponent, selector: "tree-node-expander", inputs: ["node"] }, { kind: "component", type: TreeNodeCheckboxComponent, selector: "tree-node-checkbox", inputs: ["node"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tree-node-wrapper', encapsulation: ViewEncapsulation.None, template: `
+      <div *ngIf="!templates.treeNodeWrapperTemplate" class="node-wrapper" [style.padding-left]="node.getNodePadding()">
+          <tree-node-checkbox *ngIf="node.options.useCheckbox" [node]="node"></tree-node-checkbox>
+          <tree-node-expander [node]="node"></tree-node-expander>
+          <div class="node-content-wrapper"
+               [class.node-content-wrapper-active]="node.isActive"
+               [class.node-content-wrapper-focused]="node.isFocused"
+               (click)="node.mouseAction('click', $event)"
+               (dblclick)="node.mouseAction('dblClick', $event)"
+               (mouseover)="node.mouseAction('mouseOver', $event)"
+               (mouseout)="node.mouseAction('mouseOut', $event)"
+               (contextmenu)="node.mouseAction('contextMenu', $event)"
+               (treeDrop)="node.onDrop($event)"
+               (treeDropDragOver)="node.mouseAction('dragOver', $event)"
+               (treeDropDragLeave)="node.mouseAction('dragLeave', $event)"
+               (treeDropDragEnter)="node.mouseAction('dragEnter', $event)"
+               [treeAllowDrop]="node.allowDrop"
+               [allowDragoverStyling]="node.allowDragoverStyling()"
+               [treeDrag]="node"
+               [treeDragEnabled]="node.allowDrag()">
+
+              <tree-node-content [node]="node" [index]="index" [template]="templates.treeNodeTemplate">
+              </tree-node-content>
+          </div>
+      </div>
+      <ng-container
+              [ngTemplateOutlet]="templates.treeNodeWrapperTemplate"
+              [ngTemplateOutletContext]="{ $implicit: node, node: node, index: index, templates: templates }">
+      </ng-container>
+  ` }]
+        }], propDecorators: { node: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], templates: [{
+                type: Input
+            }] } });
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class TreeNodeChildrenComponent {
+}
+/** @nocollapse */ TreeNodeChildrenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeChildrenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TreeNodeChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeNodeChildrenComponent, selector: "tree-node-children", inputs: { node: "node", templates: "templates" }, ngImport: i0, template: `
+    <ng-container *treeMobxAutorun="{ dontDetach: true }">
+      <div
+        [class.tree-children]="true"
+        [class.tree-children-no-padding]="node.options.levelPadding"
+        *treeAnimateOpen="
+          node.isExpanded;
+          speed: node.options.animateSpeed;
+          acceleration: node.options.animateAcceleration;
+          enabled: node.options.animateExpand
+        "
+      >
+        <tree-node-collection
+          *ngIf="node.children"
+          [nodes]="node.children"
+          [templates]="templates"
+          [treeModel]="node.treeModel"
+        >
+        </tree-node-collection>
+        <tree-loading-component
+          [style.padding-left]="node.getNodePadding()"
+          class="tree-node-loading"
+          *ngIf="!node.children"
+          [template]="templates.loadingTemplate"
+          [node]="node"
+        ></tree-loading-component>
+      </div>
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return LoadingComponent; }), selector: "tree-loading-component", inputs: ["template", "node"] }, { kind: "component", type: i0.forwardRef(function () { return TreeNodeCollectionComponent; }), selector: "tree-node-collection", inputs: ["nodes", "treeModel", "templates"] }, { kind: "directive", type: i0.forwardRef(function () { return TreeAnimateOpenDirective; }), selector: "[treeAnimateOpen]", inputs: ["treeAnimateOpenSpeed", "treeAnimateOpenAcceleration", "treeAnimateOpenEnabled", "treeAnimateOpen"] }, { kind: "directive", type: i0.forwardRef(function () { return TreeMobxAutorunDirective; }), selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeChildrenComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tree-node-children', encapsulation: ViewEncapsulation.None, template: `
+    <ng-container *treeMobxAutorun="{ dontDetach: true }">
+      <div
+        [class.tree-children]="true"
+        [class.tree-children-no-padding]="node.options.levelPadding"
+        *treeAnimateOpen="
+          node.isExpanded;
+          speed: node.options.animateSpeed;
+          acceleration: node.options.animateAcceleration;
+          enabled: node.options.animateExpand
+        "
+      >
+        <tree-node-collection
+          *ngIf="node.children"
+          [nodes]="node.children"
+          [templates]="templates"
+          [treeModel]="node.treeModel"
+        >
+        </tree-node-collection>
+        <tree-loading-component
+          [style.padding-left]="node.getNodePadding()"
+          class="tree-node-loading"
+          *ngIf="!node.children"
+          [template]="templates.loadingTemplate"
+          [node]="node"
+        ></tree-loading-component>
+      </div>
+    </ng-container>
+  ` }]
+        }], propDecorators: { node: [{
+                type: Input
+            }], templates: [{
+                type: Input
+            }] } });
+class TreeNodeCollectionComponent {
+    constructor() {
+        this._dispose = [];
+    }
+    get nodes() {
+        return this._nodes;
+    }
+    set nodes(nodes) {
+        this.setNodes(nodes);
+    }
+    get marginTop() {
+        const firstNode = this.viewportNodes && this.viewportNodes.length && this.viewportNodes[0];
+        const relativePosition = firstNode && firstNode.parent
+            ? firstNode.position -
+                firstNode.parent.position -
+                firstNode.parent.getSelfHeight()
+            : 0;
+        return `${relativePosition}px`;
+    }
+    setNodes(nodes) {
+        this._nodes = nodes;
+    }
+    ngOnInit() {
+        this.virtualScroll = this.treeModel.virtualScroll;
+        this._dispose = [
+            // return node indexes so we can compare structurally,
+            reaction(() => {
+                return this.virtualScroll
+                    .getViewportNodes(this.nodes)
+                    .map(n => n.index);
+            }, nodeIndexes => {
+                this.viewportNodes = nodeIndexes.map(i => this.nodes[i]);
+            }, { compareStructural: true, fireImmediately: true }),
+            reaction(() => this.nodes, nodes => {
+                this.viewportNodes = this.virtualScroll.getViewportNodes(nodes);
+            })
+        ];
+    }
+    ngOnDestroy() {
+        this._dispose.forEach(d => d());
+    }
+    trackNode(index, node) {
+        return node.id;
+    }
+}
+/** @nocollapse */ TreeNodeCollectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeCollectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TreeNodeCollectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeNodeCollectionComponent, selector: "tree-node-collection", inputs: { nodes: "nodes", treeModel: "treeModel", templates: "templates" }, ngImport: i0, template: `
+    <ng-container *treeMobxAutorun="{ dontDetach: true }">
+      <div [style.margin-top]="marginTop">
+        <tree-node
+          *ngFor="let node of viewportNodes; let i = index; trackBy: trackNode"
+          [node]="node"
+          [index]="i"
+          [templates]="templates"
+        >
+        </tree-node>
+      </div>
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i0.forwardRef(function () { return TreeNodeComponent; }), selector: "TreeNode, tree-node", inputs: ["node", "index", "templates"] }, { kind: "directive", type: i0.forwardRef(function () { return TreeMobxAutorunDirective; }), selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }], encapsulation: i0.ViewEncapsulation.None });
+__decorate([
+    observable
+], TreeNodeCollectionComponent.prototype, "_nodes", void 0);
+__decorate([
+    observable
+], TreeNodeCollectionComponent.prototype, "viewportNodes", void 0);
+__decorate([
+    computed
+], TreeNodeCollectionComponent.prototype, "marginTop", null);
+__decorate([
+    action
+], TreeNodeCollectionComponent.prototype, "setNodes", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeCollectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tree-node-collection',
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+    <ng-container *treeMobxAutorun="{ dontDetach: true }">
+      <div [style.margin-top]="marginTop">
+        <tree-node
+          *ngFor="let node of viewportNodes; let i = index; trackBy: trackNode"
+          [node]="node"
+          [index]="i"
+          [templates]="templates"
+        >
+        </tree-node>
+      </div>
+    </ng-container>
+  `
+                }]
+        }], propDecorators: { nodes: [{
+                type: Input
+            }], treeModel: [{
+                type: Input
+            }], _nodes: [], templates: [{
+                type: Input
+            }], viewportNodes: [], marginTop: [], setNodes: [] } });
+class TreeNodeComponent {
+}
+/** @nocollapse */ TreeNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TreeNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeNodeComponent, selector: "TreeNode, tree-node", inputs: { node: "node", index: "index", templates: "templates" }, ngImport: i0, template: `
+    <ng-container *treeMobxAutorun="{ dontDetach: true }">
+      <div
+        *ngIf="!templates.treeNodeFullTemplate"
+        [class]="node.getClass()"
+        [class.tree-node]="true"
+        [class.tree-node-expanded]="node.isExpanded && node.hasChildren"
+        [class.tree-node-collapsed]="node.isCollapsed && node.hasChildren"
+        [class.tree-node-leaf]="node.isLeaf"
+        [class.tree-node-active]="node.isActive"
+        [class.tree-node-focused]="node.isFocused"
+      >
+        <tree-node-drop-slot
+          *ngIf="index === 0"
+          [dropIndex]="node.index"
+          [node]="node.parent"
+        ></tree-node-drop-slot>
+
+        <tree-node-wrapper
+          [node]="node"
+          [index]="index"
+          [templates]="templates"
+        ></tree-node-wrapper>
+
+        <tree-node-children
+          [node]="node"
+          [templates]="templates"
+        ></tree-node-children>
+        <tree-node-drop-slot
+          [dropIndex]="node.index + 1"
+          [node]="node.parent"
+        ></tree-node-drop-slot>
+      </div>
+      <ng-container
+        [ngTemplateOutlet]="templates.treeNodeFullTemplate"
+        [ngTemplateOutletContext]="{
+          $implicit: node,
+          node: node,
+          index: index,
+          templates: templates
+        }"
+      >
+      </ng-container>
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TreeNodeChildrenComponent, selector: "tree-node-children", inputs: ["node", "templates"] }, { kind: "component", type: TreeNodeDropSlot, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: ["node", "dropIndex"] }, { kind: "component", type: TreeNodeWrapperComponent, selector: "tree-node-wrapper", inputs: ["node", "index", "templates"] }, { kind: "directive", type: TreeMobxAutorunDirective, selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'TreeNode, tree-node', encapsulation: ViewEncapsulation.None, template: `
+    <ng-container *treeMobxAutorun="{ dontDetach: true }">
+      <div
+        *ngIf="!templates.treeNodeFullTemplate"
+        [class]="node.getClass()"
+        [class.tree-node]="true"
+        [class.tree-node-expanded]="node.isExpanded && node.hasChildren"
+        [class.tree-node-collapsed]="node.isCollapsed && node.hasChildren"
+        [class.tree-node-leaf]="node.isLeaf"
+        [class.tree-node-active]="node.isActive"
+        [class.tree-node-focused]="node.isFocused"
+      >
+        <tree-node-drop-slot
+          *ngIf="index === 0"
+          [dropIndex]="node.index"
+          [node]="node.parent"
+        ></tree-node-drop-slot>
+
+        <tree-node-wrapper
+          [node]="node"
+          [index]="index"
+          [templates]="templates"
+        ></tree-node-wrapper>
+
+        <tree-node-children
+          [node]="node"
+          [templates]="templates"
+        ></tree-node-children>
+        <tree-node-drop-slot
+          [dropIndex]="node.index + 1"
+          [node]="node.parent"
+        ></tree-node-drop-slot>
+      </div>
+      <ng-container
+        [ngTemplateOutlet]="templates.treeNodeFullTemplate"
+        [ngTemplateOutletContext]="{
+          $implicit: node,
+          node: node,
+          index: index,
+          templates: templates
+        }"
+      >
+      </ng-container>
+    </ng-container>
+  ` }]
+        }], propDecorators: { node: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], templates: [{
+                type: Input
+            }] } });
+
+class TreeViewportComponent {
+    constructor(elementRef, virtualScroll) {
+        this.elementRef = elementRef;
+        this.virtualScroll = virtualScroll;
+        this.setViewport = this.throttle(() => {
+            this.virtualScroll.setViewport(this.elementRef.nativeElement);
+        }, 17);
+        this.scrollEventHandler = this.setViewport.bind(this);
+    }
+    ngOnInit() {
+        this.virtualScroll.init();
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.setViewport();
+            this.virtualScroll.fireEvent({ eventName: TREE_EVENTS.initialized });
+        });
+        let el = this.elementRef.nativeElement;
+        el.addEventListener('scroll', this.scrollEventHandler);
+    }
+    ngOnDestroy() {
+        this.virtualScroll.clear();
+        let el = this.elementRef.nativeElement;
+        el.removeEventListener('scroll', this.scrollEventHandler);
+    }
+    getTotalHeight() {
+        return ((this.virtualScroll.isEnabled() &&
+            this.virtualScroll.totalHeight + 'px') ||
+            'auto');
+    }
+    throttle(func, timeFrame) {
+        let lastTime = 0;
+        return function () {
+            let now = Date.now();
+            if (now - lastTime >= timeFrame) {
+                func();
+                lastTime = now;
+            }
+        };
+    }
+}
+/** @nocollapse */ TreeViewportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeViewportComponent, deps: [{ token: i0.ElementRef }, { token: TreeVirtualScroll }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TreeViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeViewportComponent, selector: "tree-viewport", providers: [TreeVirtualScroll], ngImport: i0, template: `
+    <ng-container *treeMobxAutorun="{ dontDetach: true }">
+      <div [style.height]="getTotalHeight()">
+        <ng-content></ng-content>
+      </div>
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TreeMobxAutorunDirective, selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeViewportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tree-viewport', providers: [TreeVirtualScroll], template: `
+    <ng-container *treeMobxAutorun="{ dontDetach: true }">
+      <div [style.height]="getTotalHeight()">
+        <ng-content></ng-content>
+      </div>
+    </ng-container>
+  ` }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TreeVirtualScroll }]; } });
+
+class TreeComponent {
+    constructor(treeModel, treeDraggedElement) {
+        this.treeModel = treeModel;
+        this.treeDraggedElement = treeDraggedElement;
+        treeModel.eventNames.forEach((name) => this[name] = new EventEmitter());
+        treeModel.subscribeToState((state) => this.stateChange.emit(state));
+    }
+    // Will be handled in ngOnChanges
+    set nodes(nodes) {
+    }
+    ;
+    set options(options) {
+    }
+    ;
+    set focused(value) {
+        this.treeModel.setFocus(value);
+    }
+    set state(state) {
+        this.treeModel.setState(state);
+    }
+    onKeydown($event) {
+        if (!this.treeModel.isFocused)
+            return;
+        if (['input', 'textarea'].includes(document.activeElement.tagName.toLowerCase()))
+            return;
+        const focusedNode = this.treeModel.getFocusedNode();
+        this.treeModel.performKeyAction(focusedNode, $event);
+    }
+    onMousedown($event) {
+        function isOutsideClick(startElement, nodeName) {
+            return !startElement ? true : startElement.localName === nodeName ? false : isOutsideClick(startElement.parentElement, nodeName);
+        }
+        if (isOutsideClick($event.target, 'tree-root')) {
+            this.treeModel.setFocus(false);
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.options || changes.nodes) {
+            this.treeModel.setData({
+                options: changes.options && changes.options.currentValue,
+                nodes: changes.nodes && changes.nodes.currentValue,
+                events: this.pick(this, this.treeModel.eventNames)
+            });
+        }
+    }
+    sizeChanged() {
+        this.viewportComponent.setViewport();
+    }
+    pick(object, keys) {
+        return keys.reduce((obj, key) => {
+            if (object && object.hasOwnProperty(key)) {
+                obj[key] = object[key];
+            }
+            return obj;
+        }, {});
+    }
+}
+/** @nocollapse */ TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeComponent, deps: [{ token: TreeModel }, { token: TreeDraggedElement }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeComponent, selector: "Tree, tree-root", inputs: { nodes: "nodes", options: "options", focused: "focused", state: "state" }, outputs: { toggleExpanded: "toggleExpanded", activate: "activate", deactivate: "deactivate", nodeActivate: "nodeActivate", nodeDeactivate: "nodeDeactivate", select: "select", deselect: "deselect", focus: "focus", blur: "blur", updateData: "updateData", initialized: "initialized", moveNode: "moveNode", copyNode: "copyNode", loadNodeChildren: "loadNodeChildren", changeFilter: "changeFilter", event: "event", stateChange: "stateChange" }, host: { listeners: { "body: keydown": "onKeydown($event)", "body: mousedown": "onMousedown($event)" } }, providers: [TreeModel], queries: [{ propertyName: "loadingTemplate", first: true, predicate: ["loadingTemplate"], descendants: true }, { propertyName: "treeNodeTemplate", first: true, predicate: ["treeNodeTemplate"], descendants: true }, { propertyName: "treeNodeWrapperTemplate", first: true, predicate: ["treeNodeWrapperTemplate"], descendants: true }, { propertyName: "treeNodeFullTemplate", first: true, predicate: ["treeNodeFullTemplate"], descendants: true }], viewQueries: [{ propertyName: "viewportComponent", first: true, predicate: ["viewport"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+      <tree-viewport #viewport>
+          <div
+                  class="angular-tree-component"
+                  [class.node-dragging]="treeDraggedElement.isDragging()"
+                  [class.angular-tree-component-rtl]="treeModel.options.rtl">
+              <tree-node-collection
+                      *ngIf="treeModel.roots"
+                      [nodes]="treeModel.roots"
+                      [treeModel]="treeModel"
+                      [templates]="{
+            loadingTemplate: loadingTemplate,
+            treeNodeTemplate: treeNodeTemplate,
+            treeNodeWrapperTemplate: treeNodeWrapperTemplate,
+            treeNodeFullTemplate: treeNodeFullTemplate
+          }">
+              </tree-node-collection>
+              <tree-node-drop-slot
+                      class="empty-tree-drop-slot"
+                      *ngIf="treeModel.isEmptyTree()"
+                      [dropIndex]="0"
+                      [node]="treeModel.virtualRoot">
+              </tree-node-drop-slot>
+          </div>
+      </tree-viewport>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TreeNodeDropSlot, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: ["node", "dropIndex"] }, { kind: "component", type: TreeNodeCollectionComponent, selector: "tree-node-collection", inputs: ["nodes", "treeModel", "templates"] }, { kind: "component", type: TreeViewportComponent, selector: "tree-viewport" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'Tree, tree-root', providers: [TreeModel], template: `
+      <tree-viewport #viewport>
+          <div
+                  class="angular-tree-component"
+                  [class.node-dragging]="treeDraggedElement.isDragging()"
+                  [class.angular-tree-component-rtl]="treeModel.options.rtl">
+              <tree-node-collection
+                      *ngIf="treeModel.roots"
+                      [nodes]="treeModel.roots"
+                      [treeModel]="treeModel"
+                      [templates]="{
+            loadingTemplate: loadingTemplate,
+            treeNodeTemplate: treeNodeTemplate,
+            treeNodeWrapperTemplate: treeNodeWrapperTemplate,
+            treeNodeFullTemplate: treeNodeFullTemplate
+          }">
+              </tree-node-collection>
+              <tree-node-drop-slot
+                      class="empty-tree-drop-slot"
+                      *ngIf="treeModel.isEmptyTree()"
+                      [dropIndex]="0"
+                      [node]="treeModel.virtualRoot">
+              </tree-node-drop-slot>
+          </div>
+      </tree-viewport>
+  ` }]
+        }], ctorParameters: function () { return [{ type: TreeModel }, { type: TreeDraggedElement }]; }, propDecorators: { loadingTemplate: [{
+                type: ContentChild,
+                args: ['loadingTemplate', { static: false }]
+            }], treeNodeTemplate: [{
+                type: ContentChild,
+                args: ['treeNodeTemplate', { static: false }]
+            }], treeNodeWrapperTemplate: [{
+                type: ContentChild,
+                args: ['treeNodeWrapperTemplate', { static: false }]
+            }], treeNodeFullTemplate: [{
+                type: ContentChild,
+                args: ['treeNodeFullTemplate', { static: false }]
+            }], viewportComponent: [{
+                type: ViewChild,
+                args: ['viewport', { static: false }]
+            }], nodes: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], focused: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], toggleExpanded: [{
+                type: Output
+            }], activate: [{
+                type: Output
+            }], deactivate: [{
+                type: Output
+            }], nodeActivate: [{
+                type: Output
+            }], nodeDeactivate: [{
+                type: Output
+            }], select: [{
+                type: Output
+            }], deselect: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], updateData: [{
+                type: Output
+            }], initialized: [{
+                type: Output
+            }], moveNode: [{
+                type: Output
+            }], copyNode: [{
+                type: Output
+            }], loadNodeChildren: [{
+                type: Output
+            }], changeFilter: [{
+                type: Output
+            }], event: [{
+                type: Output
+            }], stateChange: [{
+                type: Output
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['body: keydown', ['$event']]
+            }], onMousedown: [{
+                type: HostListener,
+                args: ['body: mousedown', ['$event']]
+            }] } });
+
+class TreeModule {
+}
+/** @nocollapse */ TreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ TreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TreeModule, declarations: [TreeComponent,
+        TreeNodeComponent,
+        TreeNodeContent,
+        LoadingComponent,
+        TreeDropDirective,
+        TreeDragDirective,
+        TreeNodeExpanderComponent,
+        TreeNodeChildrenComponent,
+        TreeNodeDropSlot,
+        TreeNodeCollectionComponent,
+        TreeViewportComponent,
+        TreeNodeWrapperComponent,
+        TreeNodeCheckboxComponent,
+        TreeAnimateOpenDirective,
+        TreeMobxAutorunDirective], imports: [CommonModule], exports: [TreeComponent,
+        TreeNodeComponent,
+        TreeNodeContent,
+        LoadingComponent,
+        TreeDropDirective,
+        TreeDragDirective,
+        TreeNodeExpanderComponent,
+        TreeNodeChildrenComponent,
+        TreeNodeDropSlot,
+        TreeNodeCollectionComponent,
+        TreeViewportComponent,
+        TreeNodeWrapperComponent,
+        TreeNodeCheckboxComponent,
+        TreeAnimateOpenDirective,
+        TreeMobxAutorunDirective] });
+/** @nocollapse */ TreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TreeComponent,
+                        TreeNodeComponent,
+                        TreeNodeContent,
+                        LoadingComponent,
+                        TreeDropDirective,
+                        TreeDragDirective,
+                        TreeNodeExpanderComponent,
+                        TreeNodeChildrenComponent,
+                        TreeNodeDropSlot,
+                        TreeNodeCollectionComponent,
+                        TreeViewportComponent,
+                        TreeNodeWrapperComponent,
+                        TreeNodeCheckboxComponent,
+                        TreeAnimateOpenDirective,
+                        TreeMobxAutorunDirective
+                    ],
+                    exports: [
+                        TreeComponent,
+                        TreeNodeComponent,
+                        TreeNodeContent,
+                        LoadingComponent,
+                        TreeDropDirective,
+                        TreeDragDirective,
+                        TreeNodeExpanderComponent,
+                        TreeNodeChildrenComponent,
+                        TreeNodeDropSlot,
+                        TreeNodeCollectionComponent,
+                        TreeViewportComponent,
+                        TreeNodeWrapperComponent,
+                        TreeNodeCheckboxComponent,
+                        TreeAnimateOpenDirective,
+                        TreeMobxAutorunDirective
+                    ],
+                    imports: [CommonModule],
+                    providers: []
+                }]
+        }] });
+
+/*
+ * Public API Surface of angular-tree-component
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KEYS, LoadingComponent, TREE_ACTIONS, TreeAnimateOpenDirective, TreeComponent, TreeDragDirective, TreeDraggedElement, TreeDropDirective, TreeMobxAutorunDirective, TreeModel, TreeModule, TreeNode, TreeNodeCheckboxComponent, TreeNodeChildrenComponent, TreeNodeCollectionComponent, TreeNodeComponent, TreeNodeContent, TreeNodeDropSlot, TreeNodeExpanderComponent, TreeNodeWrapperComponent, TreeViewportComponent, TreeVirtualScroll };
+//# sourceMappingURL=ali-hm-angular-tree-component.mjs.map