@ali-hm/angular-tree-component 12.0.1

package/lib/directives/tree-drag.directive.d.ts

@@ -0,0 +1,21 @@
+import { AfterViewInit, DoCheck, ElementRef, NgZone, OnDestroy, Renderer2 } from '@angular/core';
+import { TreeDraggedElement } from '../models/tree-dragged-element.model';
+import * as i0 from "@angular/core";
+export declare class TreeDragDirective implements AfterViewInit, DoCheck, OnDestroy {
+    private el;
+    private renderer;
+    private treeDraggedElement;
+    private ngZone;
+    draggedElement: any;
+    treeDragEnabled: any;
+    private readonly dragEventHandler;
+    constructor(el: ElementRef, renderer: Renderer2, treeDraggedElement: TreeDraggedElement, ngZone: NgZone);
+    ngAfterViewInit(): void;
+    ngDoCheck(): void;
+    ngOnDestroy(): void;
+    onDragStart(ev: any): void;
+    onDrag(ev: any): void;
+    onDragEnd(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TreeDragDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TreeDragDirective, "[treeDrag]", never, { "draggedElement": "treeDrag"; "treeDragEnabled": "treeDragEnabled"; }, {}, never, never, false>;
+}

package/lib/directives/tree-drop.directive.d.ts

@@ -0,0 +1,33 @@
+import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnDestroy, Renderer2 } from '@angular/core';
+import { TreeDraggedElement } from '../models/tree-dragged-element.model';
+import * as i0 from "@angular/core";
+export declare class TreeDropDirective implements AfterViewInit, OnDestroy {
+    private el;
+    private renderer;
+    private treeDraggedElement;
+    private ngZone;
+    allowDragoverStyling: boolean;
+    onDropCallback: EventEmitter<any>;
+    onDragOverCallback: EventEmitter<any>;
+    onDragLeaveCallback: EventEmitter<any>;
+    onDragEnterCallback: EventEmitter<any>;
+    private readonly dragOverEventHandler;
+    private readonly dragEnterEventHandler;
+    private readonly dragLeaveEventHandler;
+    private _allowDrop;
+    set treeAllowDrop(allowDrop: any);
+    allowDrop($event: any): boolean;
+    constructor(el: ElementRef, renderer: Renderer2, treeDraggedElement: TreeDraggedElement, ngZone: NgZone);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    onDragOver($event: any): void;
+    onDragEnter($event: any): void;
+    onDragLeave($event: any): void;
+    onDrop($event: any): void;
+    private addClass;
+    private removeClass;
+    private addDisabledClass;
+    private removeDisabledClass;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TreeDropDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TreeDropDirective, "[treeDrop]", never, { "allowDragoverStyling": "allowDragoverStyling"; "treeAllowDrop": "treeAllowDrop"; }, { "onDropCallback": "treeDrop"; "onDragOverCallback": "treeDropDragOver"; "onDragLeaveCallback": "treeDropDragLeave"; "onDragEnterCallback": "treeDropDragEnter"; }, never, never, false>;
+}

package/lib/mobx-angular/mobx-proxy.d.ts

@@ -0,0 +1,7 @@
+import { action as mobxAction } from 'mobx';
+import { computed as mobxComputed } from 'mobx';
+import { observable as mobxObservable } from 'mobx';
+export declare function actionInternal(...args: any[]): any;
+export declare const action: typeof mobxAction;
+export declare const computed: typeof mobxComputed;
+export declare const observable: typeof mobxObservable;

package/lib/mobx-angular/tree-mobx-autorun.directive.d.ts

@@ -0,0 +1,17 @@
+import { ViewContainerRef, TemplateRef, OnInit, OnDestroy, EmbeddedViewRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class TreeMobxAutorunDirective implements OnInit, OnDestroy {
+    protected templateRef: TemplateRef<any>;
+    protected viewContainer: ViewContainerRef;
+    protected templateBindings: {};
+    protected dispose: any;
+    protected view: EmbeddedViewRef<any>;
+    treeMobxAutorun: any;
+    constructor(templateRef: TemplateRef<any>, viewContainer: ViewContainerRef);
+    ngOnInit(): void;
+    shouldDetach(): any;
+    autoDetect(view: EmbeddedViewRef<any>): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TreeMobxAutorunDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TreeMobxAutorunDirective, "[treeMobxAutorun]", never, { "treeMobxAutorun": "treeMobxAutorun"; }, {}, never, never, false>;
+}

package/lib/models/tree-dragged-element.model.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class TreeDraggedElement {
+    _draggedElement: any;
+    set(draggedElement: any): void;
+    get(): any;
+    isDragging(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TreeDraggedElement, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TreeDraggedElement>;
+}

package/lib/models/tree-node.model.d.ts

@@ -0,0 +1,83 @@
+import { TreeModel } from './tree.model';
+import { TreeOptions } from './tree-options.model';
+import { ITreeNode } from '../defs/api';
+export declare class TreeNode implements ITreeNode {
+    data: any;
+    parent: TreeNode;
+    treeModel: TreeModel;
+    private handler;
+    get isHidden(): boolean;
+    get isExpanded(): boolean;
+    get isActive(): boolean;
+    get isFocused(): boolean;
+    get isSelected(): boolean;
+    get isAllSelected(): boolean;
+    get isPartiallySelected(): boolean;
+    children: TreeNode[];
+    index: number;
+    position: number;
+    height: number;
+    get level(): number;
+    get path(): string[];
+    get elementRef(): any;
+    private _originalNode;
+    get originalNode(): any;
+    constructor(data: any, parent: TreeNode, treeModel: TreeModel, index: number);
+    get hasChildren(): boolean;
+    get isCollapsed(): boolean;
+    get isLeaf(): boolean;
+    get isRoot(): boolean;
+    get realParent(): TreeNode;
+    get options(): TreeOptions;
+    fireEvent(event: any): void;
+    get displayField(): any;
+    get id(): any;
+    set id(value: any);
+    getField(key: any): any;
+    setField(key: any, value: any): void;
+    _findAdjacentSibling(steps: any, skipHidden?: boolean): any;
+    findNextSibling(skipHidden?: boolean): any;
+    findPreviousSibling(skipHidden?: boolean): any;
+    getVisibleChildren(): TreeNode[];
+    get visibleChildren(): TreeNode[];
+    getFirstChild(skipHidden?: boolean): TreeNode;
+    getLastChild(skipHidden?: boolean): TreeNode;
+    findNextNode(goInside?: boolean, skipHidden?: boolean): any;
+    findPreviousNode(skipHidden?: boolean): any;
+    _getLastOpenDescendant(skipHidden?: boolean): any;
+    private _getParentsChildren;
+    private getIndexInParent;
+    isDescendantOf(node: TreeNode): any;
+    getNodePadding(): string;
+    getClass(): string;
+    onDrop($event: any): void;
+    allowDrop: (element: any, $event?: any) => boolean;
+    allowDragoverStyling: () => boolean;
+    allowDrag(): boolean;
+    loadNodeChildren(): Promise<void>;
+    expand(): this;
+    collapse(): this;
+    doForAll(fn: (node: ITreeNode) => any): void;
+    expandAll(): void;
+    collapseAll(): void;
+    ensureVisible(): this;
+    toggleExpanded(): this;
+    setIsExpanded(value: any): this;
+    autoLoadChildren(): void;
+    dispose(): void;
+    setIsActive(value: any, multi?: boolean): this;
+    isSelectable(): boolean;
+    setIsSelected(value: any): this;
+    toggleSelected(): this;
+    toggleActivated(multi?: boolean): this;
+    setActiveAndVisible(multi?: boolean): this;
+    scrollIntoView(force?: boolean): void;
+    focus(scroll?: boolean): this;
+    blur(): this;
+    setIsHidden(value: any): void;
+    hide(): void;
+    show(): void;
+    mouseAction(actionName: string, $event: any, data?: any): void;
+    getSelfHeight(): number;
+    _initChildren(): void;
+}

package/lib/models/tree-options.model.d.ts

@@ -0,0 +1,77 @@
+import { TreeNode } from './tree-node.model';
+import { TreeModel } from './tree.model';
+import { ITreeOptions } from '../defs/api';
+export interface IActionHandler {
+    (tree: TreeModel, node: TreeNode, $event: any, ...rest: any[]): any;
+}
+export declare const TREE_ACTIONS: {
+    TOGGLE_ACTIVE: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode;
+    TOGGLE_ACTIVE_MULTI: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode;
+    TOGGLE_SELECTED: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode;
+    ACTIVATE: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode;
+    DEACTIVATE: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode;
+    SELECT: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode;
+    DESELECT: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode;
+    FOCUS: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode;
+    TOGGLE_EXPANDED: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode;
+    EXPAND: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode;
+    COLLAPSE: (tree: TreeModel, node: TreeNode, $event: any) => TreeNode;
+    DRILL_DOWN: (tree: TreeModel, node: TreeNode, $event: any) => void;
+    DRILL_UP: (tree: TreeModel, node: TreeNode, $event: any) => void;
+    NEXT_NODE: (tree: TreeModel, node: TreeNode, $event: any) => void;
+    PREVIOUS_NODE: (tree: TreeModel, node: TreeNode, $event: any) => void;
+    MOVE_NODE: (tree: TreeModel, node: TreeNode, $event: any, { from, to }: {
+        from: any;
+        to: any;
+    }) => void;
+};
+export interface IActionMapping {
+    mouse?: {
+        click?: IActionHandler;
+        dblClick?: IActionHandler;
+        contextMenu?: IActionHandler;
+        expanderClick?: IActionHandler;
+        checkboxClick?: IActionHandler;
+        dragStart?: IActionHandler;
+        drag?: IActionHandler;
+        dragEnd?: IActionHandler;
+        dragOver?: IActionHandler;
+        dragLeave?: IActionHandler;
+        dragEnter?: IActionHandler;
+        drop?: IActionHandler;
+        mouseOver?: IActionHandler;
+        mouseOut?: IActionHandler;
+    };
+    keys?: {
+        [key: number]: IActionHandler;
+    };
+}
+export declare class TreeOptions {
+    private options;
+    get hasChildrenField(): string;
+    get childrenField(): string;
+    get displayField(): string;
+    get idField(): string;
+    get isExpandedField(): string;
+    get getChildren(): any;
+    get levelPadding(): number;
+    get useVirtualScroll(): boolean;
+    get animateExpand(): boolean;
+    get animateSpeed(): number;
+    get animateAcceleration(): number;
+    get scrollOnActivate(): boolean;
+    get rtl(): boolean;
+    get rootId(): any;
+    get useCheckbox(): boolean;
+    get useTriState(): boolean;
+    get scrollContainer(): HTMLElement;
+    get allowDragoverStyling(): boolean;
+    actionMapping: IActionMapping;
+    constructor(options?: ITreeOptions);
+    getNodeClone(node: TreeNode): any;
+    allowDrop(element: any, to: any, $event?: any): boolean;
+    allowDrag(node: TreeNode): boolean;
+    nodeClass(node: TreeNode): string;
+    nodeHeight(node: TreeNode): number;
+    get dropSlotHeight(): number;
+}

package/lib/models/tree-virtual-scroll.model.d.ts

@@ -0,0 +1,27 @@
+import { TreeModel } from './tree.model';
+import * as i0 from "@angular/core";
+export declare class TreeVirtualScroll {
+    private treeModel;
+    private _dispose;
+    yBlocks: number;
+    x: number;
+    viewportHeight: any;
+    viewport: any;
+    get y(): number;
+    get totalHeight(): number;
+    constructor(treeModel: TreeModel);
+    fireEvent(event: any): void;
+    init(): void;
+    isEnabled(): boolean;
+    private _setYBlocks;
+    recalcPositions(): void;
+    private _getPositionAfter;
+    private _getPositionAfterNode;
+    clear(): void;
+    setViewport(viewport: any): void;
+    scrollIntoView(node: any, force: any, scrollToMiddle?: boolean): void;
+    getViewportNodes(nodes: any): any;
+    fixScroll(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TreeVirtualScroll, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TreeVirtualScroll>;
+}

package/lib/models/tree.model.d.ts

@@ -0,0 +1,91 @@
+import { OnDestroy } from '@angular/core';
+import { TreeNode } from './tree-node.model';
+import { TreeOptions } from './tree-options.model';
+import { TreeVirtualScroll } from './tree-virtual-scroll.model';
+import { ITreeModel, IDType, IDTypeDictionary } from '../defs/api';
+import * as i0 from "@angular/core";
+export declare class TreeModel implements ITreeModel, OnDestroy {
+    static focusedTree: any;
+    options: TreeOptions;
+    nodes: any[];
+    eventNames: string[];
+    virtualScroll: TreeVirtualScroll;
+    roots: TreeNode[];
+    expandedNodeIds: IDTypeDictionary;
+    selectedLeafNodeIds: IDTypeDictionary;
+    activeNodeIds: IDTypeDictionary;
+    hiddenNodeIds: IDTypeDictionary;
+    focusedNodeId: IDType;
+    virtualRoot: TreeNode;
+    private firstUpdate;
+    private events;
+    private subscriptions;
+    fireEvent(event: any): void;
+    subscribe(eventName: any, fn: any): void;
+    getFocusedNode(): TreeNode;
+    getActiveNode(): TreeNode;
+    getActiveNodes(): TreeNode[];
+    getVisibleRoots(): TreeNode[];
+    getFirstRoot(skipHidden?: boolean): TreeNode;
+    getLastRoot(skipHidden?: boolean): TreeNode;
+    get isFocused(): boolean;
+    isNodeFocused(node: any): boolean;
+    isEmptyTree(): boolean;
+    get focusedNode(): any;
+    get expandedNodes(): any[];
+    get activeNodes(): any[];
+    get hiddenNodes(): any[];
+    get selectedLeafNodes(): any[];
+    getNodeByPath(path: any[], startNode?: any): TreeNode;
+    getNodeById(id: any): any;
+    getNodeBy(predicate: any, startNode?: any): any;
+    isExpanded(node: any): boolean;
+    isHidden(node: any): boolean;
+    isActive(node: any): boolean;
+    isSelected(node: any): boolean;
+    ngOnDestroy(): void;
+    dispose(): void;
+    unsubscribeAll(): void;
+    setData({ nodes, options, events }: {
+        nodes: any;
+        options: any;
+        events: any;
+    }): void;
+    update(): void;
+    setFocusedNode(node: any): void;
+    setFocus(value: any): void;
+    doForAll(fn: any): void;
+    focusNextNode(): void;
+    focusPreviousNode(): void;
+    focusDrillDown(): void;
+    focusDrillUp(): void;
+    setActiveNode(node: any, value: any, multi?: boolean): void;
+    setSelectedNode(node: any, value: any): void;
+    setExpandedNode(node: any, value: any): void;
+    expandAll(): void;
+    collapseAll(): void;
+    setIsHidden(node: any, value: any): void;
+    setHiddenNodeIds(nodeIds: any): void;
+    performKeyAction(node: any, $event: any): boolean;
+    filterNodes(filter: any, autoShow?: boolean): void;
+    clearFilter(): void;
+    moveNode(node: any, to: any): void;
+    copyNode(node: any, to: any): void;
+    getState(): {
+        expandedNodeIds: IDTypeDictionary;
+        selectedLeafNodeIds: IDTypeDictionary;
+        activeNodeIds: IDTypeDictionary;
+        hiddenNodeIds: IDTypeDictionary;
+        focusedNodeId: IDType;
+    };
+    setState(state: any): void;
+    subscribeToState(fn: any): void;
+    canMoveNode(node: any, to: any, fromIndex?: any): boolean;
+    calculateExpandedNodes(): void;
+    private _filterNode;
+    private _calculateExpandedNodes;
+    private _setActiveNodeSingle;
+    private _setActiveNodeMulti;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TreeModel, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TreeModel>;
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@ali-hm/angular-tree-component",
+  "version": "12.0.1",
+  "description": "A simple yet powerful tree component for Angular 14+",
+  "author": "ali-hm",
+  "homepage": "https://github.com/ali-hm/angular-tree-component",
+  "license": "MIT",
+  "repository": "https://github.com/ali-hm/angular-tree-component.git",
+  "bugs": {
+    "url": "https://github.com/ali-hm/angular-tree-component/issues"
+  },
+  "readme": "https://github.com/ali-hm/angular-tree-component/blob/master/README.md",
+  "keywords": [
+    "ng",
+    "angular",
+    "ng2",
+    "angular2",
+    "tree",
+    "treeview",
+    "tree-view",
+    "angular2-tree",
+    "angular-tree",
+    "angular tree",
+    "angular2 tree",
+    "ng2-tree",
+    "ng2tree",
+    "ng2 tree",
+    "ngtree",
+    "ng-tree",
+    "angular-treeview",
+    "angular2-treeview",
+    "angular-tree-component",
+    "angular tree component",
+    "angular2-tree-component",
+    "angular2 tree component"
+  ],
+  "peerDependencies": {
+    "@angular/common": ">=11.0.0",
+    "@angular/core": ">=11.0.0",
+    "mobx": ">=4.14.1"
+  },
+  "dependencies": {
+    "mobx": "~4.14.1",
+    "tslib": "^2.0.0"
+  },
+  "module": "fesm2015/ali-hm-angular-tree-component.mjs",
+  "es2020": "fesm2020/ali-hm-angular-tree-component.mjs",
+  "esm2020": "esm2020/ali-hm-angular-tree-component.mjs",
+  "fesm2020": "fesm2020/ali-hm-angular-tree-component.mjs",
+  "fesm2015": "fesm2015/ali-hm-angular-tree-component.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2020": "./esm2020/ali-hm-angular-tree-component.mjs",
+      "es2020": "./fesm2020/ali-hm-angular-tree-component.mjs",
+      "es2015": "./fesm2015/ali-hm-angular-tree-component.mjs",
+      "node": "./fesm2015/ali-hm-angular-tree-component.mjs",
+      "default": "./fesm2020/ali-hm-angular-tree-component.mjs"
+    }
+  },
+  "sideEffects": false
+}

package/public-api.d.ts

@@ -0,0 +1 @@
+export * from './lib/angular-tree-component.module';

package/src/lib/angular-tree-component.css

@@ -0,0 +1,84 @@
+.tree-children.tree-children-no-padding { padding-left: 0 }
+.tree-children { padding-left: 20px; overflow: hidden }
+.node-drop-slot { display: block; height: 2px }
+.node-drop-slot.is-dragging-over { background: #ddffee; height: 20px; border: 2px dotted #888; }
+.toggle-children-wrapper-expanded .toggle-children { transform: rotate(90deg) }
+.toggle-children-wrapper-collapsed .toggle-children { transform: rotate(0); }
+.toggle-children-wrapper {
+  padding: 2px 3px 5px 1px;
+}
+/* tslint:disable */
+.toggle-children {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYzRkRFQjcxODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYzRkRFQjcwODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+5iogFwAAAGhJREFUeNpiYGBgKABigf///zOQg0EARH4A4gZyDIIZ8B/JoAJKDIDhB0CcQIkBRBtEyABkgxwoMQCGD6AbRKoBGAYxQgXIBRuZGKgAKPIC3QLxArnRSHZCIjspk52ZKMrOFBUoAAEGAKnq593MQAZtAAAAAElFTkSuQmCC');
+  height: 8px;
+  width: 9px;
+  background-size: contain;
+  display: inline-block;
+  position: relative;
+  top: 1px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.toggle-children-placeholder {
+  display: inline-block;
+  height: 10px;
+  width: 10px;
+  position: relative;
+  top: 1px;
+  padding-right: 3px;
+}
+.node-content-wrapper {
+  display: inline-block;
+  padding: 2px 5px;
+  border-radius: 2px;
+  transition: background-color .15s,box-shadow .15s;
+}
+.node-wrapper {display: flex; align-items: flex-start;}
+.node-content-wrapper-active,
+.node-content-wrapper.node-content-wrapper-active:hover,
+.node-content-wrapper-active.node-content-wrapper-focused {
+  background: #beebff;
+}
+.node-content-wrapper-focused { background: #e7f4f9 }
+.node-content-wrapper:hover { background: #f7fbff }
+.node-content-wrapper-active, .node-content-wrapper-focused, .node-content-wrapper:hover {
+  box-shadow: inset 0 0 1px #999;
+}
+.node-content-wrapper.is-dragging-over { background: #ddffee; box-shadow: inset 0 0 1px #999; }
+.node-content-wrapper.is-dragging-over-disabled { opacity: 0.5 }
+
+tree-viewport {
+  -webkit-tap-highlight-color: transparent;
+  height: 100%;
+  overflow: auto;
+  display: block;
+}
+.tree-children { padding-left: 20px }
+.empty-tree-drop-slot .node-drop-slot { height: 20px; min-width: 100px }
+.angular-tree-component {
+  width: 100%;
+  position:relative;
+  display: inline-block;
+  cursor: pointer;
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* IE/Edge */
+  user-select: none;           /* non-prefixed version, currently not supported by any browser */
+}
+
+tree-root .angular-tree-component-rtl {
+  direction: rtl;
+}
+tree-root .angular-tree-component-rtl .toggle-children-wrapper-collapsed .toggle-children {
+  transform: rotate(180deg) !important;
+}
+tree-root .angular-tree-component-rtl .tree-children {
+  padding-right: 20px;
+  padding-left: 0;
+}
+
+tree-node-checkbox {
+  padding: 1px;
+}