@progress/kendo-vue-treeview 3.2.2-dev.202204181420

package/dist/es/TreeView.js

@@ -0,0 +1,359 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { Keys, validatePackage, guid, kendoThemeMaps, classNames } from '@progress/kendo-vue-common';
+import nav from './utils/getItemIdUponKeyboardNavigation';
+import { resolveItemId, isEnabledAndAllParentsEnabled, hasChildren } from './utils/itemUtils';
+import { TreeViewItem } from './TreeViewItem';
+import { ZERO_LEVEL_ZERO_NODE_ID, getItemById as _getItemById } from './utils/itemIdUtils';
+import FieldsService from './utils/FieldsService';
+import { packageMetadata } from './package-metadata';
+import { CHECK_FIELD, CHECK_INDETERMINATE_FIELD, CHILDREN_FIELD, DISABLED_FIELD, EXPAND_FIELD, HAS_CHILDREN_FIELD, SELECT_FIELD, TEXT_FIELD } from './utils/consts';
+var sizeMap = kendoThemeMaps.sizeMap; // tslint:enable:max-line-length
+
+var TreeViewVue2 = {
+  name: 'KendoTreeView',
+  props: {
+    dataItems: Array,
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    tabIndex: Number,
+    focusIdField: String,
+    getFocusHierarchicalIndex: Function,
+    expandField: {
+      type: String,
+      default: EXPAND_FIELD
+    },
+    selectField: {
+      type: String,
+      default: SELECT_FIELD
+    },
+    childrenField: {
+      type: String,
+      default: CHILDREN_FIELD
+    },
+    hasChildrenField: {
+      type: String,
+      default: HAS_CHILDREN_FIELD
+    },
+    expandIcons: Boolean,
+    checkboxes: Boolean,
+    textField: {
+      type: String,
+      default: TEXT_FIELD
+    },
+    disableField: {
+      type: String,
+      default: DISABLED_FIELD
+    },
+    checkField: {
+      type: String,
+      default: CHECK_FIELD
+    },
+    checkIndeterminateField: {
+      type: String,
+      default: CHECK_INDETERMINATE_FIELD
+    },
+    item: [Object, String, Function],
+    ariaMultiSelectable: [String, Boolean],
+    ariaLabel: String,
+    ariaLabelledby: String,
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    }
+  },
+  data: function data() {
+    return {
+      focusedItemId: undefined,
+      focusedItemPublicId: undefined,
+      tabbableItemId: ZERO_LEVEL_ZERO_NODE_ID
+    };
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.allowExplicitFocus = false;
+    this.treeGuid = guid();
+  },
+  updated: function updated() {
+    this.allowExplicitFocus = false;
+    this.refocusDueToFocusIdField();
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _a;
+
+    var h = gh || createElement;
+    this.fieldsSvc = new FieldsService(this.$props);
+    var size = this.$props.size;
+    return h("div", {
+      "class": classNames('k-treeview', (_a = {}, _a["k-treeview-" + (sizeMap[size] || size)] = size, _a)),
+      onKeydown: this.onKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.onKeyDown,
+        "focusin": this.onFocus,
+        "focusout": this.onBlur
+      },
+      onFocusin: this.onFocus,
+      onFocusout: this.onBlur,
+      role: "tree",
+      attrs: this.v3 ? undefined : {
+        role: "tree",
+        "aria-multiselectable": this.ariaMultiSelectable ? true : undefined,
+        "aria-label": this.$props['aria-label'],
+        "aria-labelledby": this.$props['aria-labelledby'],
+        tabIndex: this.$props.tabIndex
+      },
+      "aria-multiselectable": this.ariaMultiSelectable ? true : undefined,
+      "aria-label": this.$props['aria-label'],
+      "aria-labelledby": this.$props['aria-labelledby'],
+      tabIndex: this.$props.tabIndex
+    }, [h("ul", {
+      "class": "k-treeview-lines k-treeview-group",
+      role: "group",
+      attrs: this.v3 ? undefined : {
+        role: "group"
+      }
+    }, [this.dataItems.map(function (item, index) {
+      return h(TreeViewItem, {
+        item: item,
+        attrs: this.v3 ? undefined : {
+          item: item,
+          itemId: index.toString(),
+          treeGuid: this.treeGuid,
+          animate: this.$props.animate,
+          focusedItemId: this.focusedItemId,
+          tabbableItemId: this.tabbableItemId,
+          fieldsService: this.fieldsSvc,
+          itemUI: this.$props.item,
+          checkboxes: this.$props.checkboxes,
+          ariaMultiSelectable: this.ariaMultiSelectable,
+          draggable: this.$props.draggable,
+          expandIcons: this.$props.expandIcons,
+          size: size
+        },
+        itemId: index.toString(),
+        treeGuid: this.treeGuid,
+        animate: this.$props.animate,
+        focusedItemId: this.focusedItemId,
+        tabbableItemId: this.tabbableItemId,
+        fieldsService: this.fieldsSvc,
+        itemUI: this.$props.item,
+        checkboxes: this.$props.checkboxes,
+        ariaMultiSelectable: this.ariaMultiSelectable,
+        onItemclick: this.onItemClick,
+        on: this.v3 ? undefined : {
+          "itemclick": this.onItemClick,
+          "focusdomelneeded": this.onFocusDomElNeeded,
+          "press": this.onPress,
+          "drag": this.onDrag,
+          "release": this.onRelease,
+          "expandchange": this.onExpandChange,
+          "checkchange": this.onCheckChange
+        },
+        onFocusdomelneeded: this.onFocusDomElNeeded,
+        draggable: this.$props.draggable,
+        onPress: this.onPress,
+        onDrag: this.onDrag,
+        onRelease: this.onRelease,
+        expandIcons: this.$props.expandIcons,
+        onExpandchange: this.onExpandChange,
+        onCheckchange: this.onCheckChange,
+        key: index,
+        size: size
+      });
+    }, this)])]);
+  },
+  methods: {
+    onFocusDomElNeeded: function onFocusDomElNeeded(domItem) {
+      if (this.allowExplicitFocus) {
+        this.focusDomItem(domItem);
+      }
+    },
+    onCheckChange: function onCheckChange(event, item, itemId) {
+      this.setFocus(itemId);
+      this.dispatchCheckChange(event, item, itemId);
+    },
+    onExpandChange: function onExpandChange(event, item, itemId) {
+      this.setFocus(itemId);
+      this.dispatchExpandChange(event, item, itemId);
+    },
+    onPress: function onPress(_event, item, itemId) {
+      if (this.$props.onItemDragStart) {
+        this.$props.onItemDragStart.call(undefined, {
+          target: this,
+          item: item,
+          itemHierarchicalIndex: itemId
+        });
+      }
+    },
+    onDrag: function onDrag(event, item, itemId) {
+      var pageX = event.pageX,
+          pageY = event.pageY,
+          clientX = event.clientX,
+          clientY = event.clientY;
+
+      if (this.$props.onItemDragOver) {
+        this.$props.onItemDragOver.call(undefined, {
+          target: this,
+          item: item,
+          itemHierarchicalIndex: itemId,
+          pageX: pageX,
+          pageY: pageY,
+          clientX: clientX,
+          clientY: clientY
+        });
+      }
+    },
+    onRelease: function onRelease(event, item, itemId) {
+      var pageX = event.pageX,
+          pageY = event.pageY,
+          clientX = event.clientX,
+          clientY = event.clientY;
+
+      if (this.$props.onItemDragEnd) {
+        this.$props.onItemDragEnd.call(undefined, {
+          target: this,
+          item: item,
+          itemHierarchicalIndex: itemId,
+          pageX: pageX,
+          pageY: pageY,
+          clientX: clientX,
+          clientY: clientY
+        });
+      }
+    },
+    onItemClick: function onItemClick(event, item, itemId) {
+      this.setFocus(itemId);
+      this.dispatchItemClick(event, item, itemId);
+    },
+    onFocus: function onFocus() {
+      clearTimeout(this.blurRequest);
+
+      if (this.focusedItemId === undefined && this.dataItems.length) {
+        this.setFocus(this.tabbableItemId);
+      }
+    },
+    onBlur: function onBlur() {
+      var _this = this;
+
+      clearTimeout(this.blurRequest);
+      this.blurRequest = window.setTimeout(function () {
+        return _this.setFocus(undefined);
+      }, 0);
+    },
+    onKeyDown: function onKeyDown(event) {
+      var focusedItem = this.getFocusedItem();
+
+      if (focusedItem) {
+        var newItemId = nav(focusedItem, this.focusedItemId, this.dataItems, event.keyCode, this.fieldsSvc);
+
+        if (newItemId !== this.focusedItemId) {
+          // This disables the auto-scroll. The scroll is achieved via item focusing.
+          event.preventDefault();
+          this.allowExplicitFocus = true;
+          this.setFocus(newItemId);
+        }
+
+        this.dispatchEventsOnKeyDown(event, focusedItem);
+      }
+    },
+    dispatchEventsOnKeyDown: function dispatchEventsOnKeyDown(event, focusedItem) {
+      var _this = this; // isEnabled is the most expensive op and that is why is left last.
+
+
+      var isEnabled = function isEnabled() {
+        return isEnabledAndAllParentsEnabled(_this.focusedItemId, _this.dataItems, _this.fieldsSvc);
+      };
+
+      if (event.keyCode === Keys.left && this.fieldsSvc.expanded(focusedItem) && isEnabled()) {
+        this.dispatchExpandChange(event, focusedItem, this.focusedItemId);
+      } else if (event.keyCode === Keys.right && !this.fieldsSvc.expanded(focusedItem) && (this.fieldsSvc.hasChildren(focusedItem) || hasChildren(focusedItem, this.$props.childrenField)) && isEnabled()) {
+        this.dispatchExpandChange(event, focusedItem, this.focusedItemId);
+      } else if (event.keyCode === Keys.enter && isEnabled()) {
+        this.dispatchItemClick(event, focusedItem, this.focusedItemId);
+      } else if (event.keyCode === Keys.space && isEnabled()) {
+        // W/o preventDefault() long TreeViews gets incorrectly scrolled.
+        event.preventDefault();
+        this.dispatchCheckChange(event, focusedItem, this.focusedItemId);
+      }
+    },
+    setFocus: function setFocus(focusedItemId) {
+      if (focusedItemId) {
+        if (this.fieldsSvc.focusIdField) {
+          var item = this.getItemById(focusedItemId);
+          this.focusedItemId = focusedItemId;
+          this.focusedItemPublicId = this.fieldsSvc.focusId(item);
+        } else {
+          this.focusedItemId = focusedItemId;
+        }
+      } else {
+        this.focusedItemId = undefined;
+        this.focusedItemPublicId = undefined;
+        this.tabbableItemId = this.focusedItemId;
+      }
+    },
+    getFocusedItem: function getFocusedItem() {
+      return this.focusedItemId ? this.getItemById(this.focusedItemId) : undefined;
+    },
+    getItemById: function getItemById(itemId) {
+      return _getItemById(itemId, this.dataItems, this.$props.childrenField || CHILDREN_FIELD);
+    },
+    dispatchCheckChange: function dispatchCheckChange(_dispatchedEvent, item, itemId) {
+      this.$emit('checkchange', {
+        item: item,
+        itemHierarchicalIndex: itemId
+      });
+    },
+    dispatchExpandChange: function dispatchExpandChange(_dispatchedEvent, item, itemId) {
+      this.$emit('expandchange', {
+        item: item,
+        itemHierarchicalIndex: itemId
+      });
+    },
+    dispatchItemClick: function dispatchItemClick(_dispatchedEvent, item, itemId) {
+      this.$emit('itemclick', {
+        item: item,
+        itemHierarchicalIndex: itemId
+      });
+    },
+    refocusDueToFocusIdField: function refocusDueToFocusIdField() {
+      if (this.fieldsSvc.focusIdField) {
+        var focusedItemPublicId = this.focusedItemPublicId;
+
+        if (focusedItemPublicId) {
+          var focusedItemId = this.$props.getFocusHierarchicalIndex ? this.$props.getFocusHierarchicalIndex(focusedItemPublicId) : resolveItemId(focusedItemPublicId, this.fieldsSvc.focusIdField, this.dataItems, this.$props.childrenField);
+
+          if (focusedItemId !== this.focusedItemId) {
+            this.allowExplicitFocus = true;
+            this.focusedItemId = focusedItemId;
+          }
+        }
+      }
+    },
+    // private get ariaMultiSelectable() {
+    //     return this.$props['aria-multiselectable'] === true || this.$props['aria-multiselectable'] === 'true';
+    // }
+    focusDomItem: function focusDomItem(domItem) {
+      domItem.focus();
+    },
+    guid: function guid() {
+      return this.treeGuid;
+    }
+  }
+};
+var TreeView = TreeViewVue2;
+export { TreeView, TreeViewVue2 };

package/dist/es/TreeViewDragAnalyzer.d.ts

@@ -0,0 +1,135 @@
+import { TreeViewItemDragOverEvent, TreeViewItemDragEndEvent } from './events';
+/**
+ * A class which provides an API for analyzing the `drag` events
+ * of the TreeView.
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *     dragClue;
+ *     state = { tree };
+ *
+ *     render() {
+ *         return (
+ *             <div>
+ *                 <TreeView data={this.state.tree} draggable={true}
+ *                     onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
+ *                 <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
+ *             </div>
+ *         );
+ *     }
+ *
+ *     onItemDragOver = (event) => {
+ *         this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
+ *     }
+ *     onItemDragEnd = (event) => {
+ *         this.dragClue.hide();
+ *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
+ *
+ *         if (eventAnalyzer.isDropAllowed) {
+ *             const updatedTree = moveTreeViewItem(
+ *                 event.itemHierarchicalIndex,
+ *                 this.state.tree,
+ *                 eventAnalyzer.getDropOperation(),
+ *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
+ *             );
+ *
+ *             this.setState({ tree: updatedTree });
+ *         }
+ *     }
+ *     getClueClassName(event) {
+ *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
+ *         const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
+ *
+ *         if (eventAnalyzer.isDropAllowed) {
+ *             switch (eventAnalyzer.getDropOperation()) {
+ *                 case 'child':
+ *                     return 'k-i-plus';
+ *                 case 'before':
+ *                     return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
+ *                         'k-i-insert-up' : 'k-i-insert-middle';
+ *                 case 'after':
+ *                     const siblings = getSiblings(itemIndex, this.state.tree);
+ *                     const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
+ *
+ *                     return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
+ *                 default:
+ *                     break;
+ *             }
+ *         }
+ *
+ *         return 'k-i-cancel';
+ *     }
+ * }
+ *
+ * function getSiblings(itemIndex, data) {
+ *     let result = data;
+ *
+ *     const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
+ *     for (let i = 0; i < indices.length - 1; i++) {
+ *         result = result[indices[i]].items;
+ *     }
+ *
+ *     return result;
+ * }
+ *
+ * const SEPARATOR = '_';
+ * const tree = [{
+ *     text: 'Furniture', expanded: true, items: [
+ *         { text: 'Tables & Chairs', expanded: true },
+ *         { text: 'Sofas', expanded: true },
+ *         { text: 'Occasional Furniture', expanded: true }]
+ * }, {
+ *     text: 'Decor', expanded: true, items: [
+ *         { text: 'Bed Linen', expanded: true },
+ *         { text: 'Curtains & Blinds', expanded: true },
+ *         { text: 'Carpets', expanded: true }]
+ * }];
+ *
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export default class TreeViewDragAnalyzer {
+    private event;
+    private itemId;
+    private treeViewGuid;
+    private initialized;
+    private destDomNodeWithMeta;
+    private destItemId;
+    private destTreeViewGuid;
+    /**
+     * @param event - The event that will be analyzed.
+     */
+    constructor(event: TreeViewItemDragOverEvent | TreeViewItemDragEndEvent);
+    /**
+     * The method which initializes the analyzer.
+     * Invoke the method before you call any other methods.
+     *
+     * @returns - The analyzer object of the `drag` event.
+     */
+    init(): this;
+    /**
+     * Returns `true` if dropping is allowed. Otherwise, returns `false`.
+     */
+    get isDropAllowed(): boolean;
+    /**
+     * Returns an object which contains:
+     * * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and
+     * * The `guid` of the destination TreeView (the TreeView which renders the destination item).
+     */
+    get destinationMeta(): {
+        itemHierarchicalIndex: string;
+        treeViewGuid: string;
+    };
+    /**
+     * Returns the specific drop operation.
+     *
+     * @returns - The following values are returned:
+     * * `before`&mdash;Indicates that the dragged item is positioned at the beginning of the destination item.
+     * * `after`&mdash;Indicates that the dragged item is positioned at the end of the destination item.
+     * * `child`&mdash;Indicates that the dragged item is positioned in the middle of the destination item.
+     * * `undefined`&mdash;Indicates that dropping is not allowed.
+     */
+    getDropOperation(): "before" | "after" | "child";
+    private setDestimationMeta;
+}

package/dist/es/TreeViewDragAnalyzer.js

@@ -0,0 +1,184 @@
+import { DOM_KENDO_ITEM_ID_FIELD, DOM_KENDO_TREEVIEW_GUID_FIELD } from './utils/consts';
+var DROPZONE_BOUNDARY_DELTA = 6;
+/**
+ * A class which provides an API for analyzing the `drag` events
+ * of the TreeView.
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *     dragClue;
+ *     state = { tree };
+ *
+ *     render() {
+ *         return (
+ *             <div>
+ *                 <TreeView data={this.state.tree} draggable={true}
+ *                     onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
+ *                 <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
+ *             </div>
+ *         );
+ *     }
+ *
+ *     onItemDragOver = (event) => {
+ *         this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
+ *     }
+ *     onItemDragEnd = (event) => {
+ *         this.dragClue.hide();
+ *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
+ *
+ *         if (eventAnalyzer.isDropAllowed) {
+ *             const updatedTree = moveTreeViewItem(
+ *                 event.itemHierarchicalIndex,
+ *                 this.state.tree,
+ *                 eventAnalyzer.getDropOperation(),
+ *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
+ *             );
+ *
+ *             this.setState({ tree: updatedTree });
+ *         }
+ *     }
+ *     getClueClassName(event) {
+ *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
+ *         const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
+ *
+ *         if (eventAnalyzer.isDropAllowed) {
+ *             switch (eventAnalyzer.getDropOperation()) {
+ *                 case 'child':
+ *                     return 'k-i-plus';
+ *                 case 'before':
+ *                     return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
+ *                         'k-i-insert-up' : 'k-i-insert-middle';
+ *                 case 'after':
+ *                     const siblings = getSiblings(itemIndex, this.state.tree);
+ *                     const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
+ *
+ *                     return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
+ *                 default:
+ *                     break;
+ *             }
+ *         }
+ *
+ *         return 'k-i-cancel';
+ *     }
+ * }
+ *
+ * function getSiblings(itemIndex, data) {
+ *     let result = data;
+ *
+ *     const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
+ *     for (let i = 0; i < indices.length - 1; i++) {
+ *         result = result[indices[i]].items;
+ *     }
+ *
+ *     return result;
+ * }
+ *
+ * const SEPARATOR = '_';
+ * const tree = [{
+ *     text: 'Furniture', expanded: true, items: [
+ *         { text: 'Tables & Chairs', expanded: true },
+ *         { text: 'Sofas', expanded: true },
+ *         { text: 'Occasional Furniture', expanded: true }]
+ * }, {
+ *     text: 'Decor', expanded: true, items: [
+ *         { text: 'Bed Linen', expanded: true },
+ *         { text: 'Curtains & Blinds', expanded: true },
+ *         { text: 'Carpets', expanded: true }]
+ * }];
+ *
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+var TreeViewDragAnalyzer = /** @class */ (function () {
+    /**
+     * @param event - The event that will be analyzed.
+     */
+    function TreeViewDragAnalyzer(event) {
+        this.event = event;
+        this.initialized = false;
+        this.itemId = event.itemHierarchicalIndex;
+        this.treeViewGuid = event.target.guid;
+    }
+    /**
+     * The method which initializes the analyzer.
+     * Invoke the method before you call any other methods.
+     *
+     * @returns - The analyzer object of the `drag` event.
+     */
+    TreeViewDragAnalyzer.prototype.init = function () {
+        if (!this.initialized) {
+            this.setDestimationMeta(document.elementFromPoint(this.event.clientX, this.event.clientY));
+            this.initialized = true;
+        }
+        return this;
+    };
+    Object.defineProperty(TreeViewDragAnalyzer.prototype, "isDropAllowed", {
+        /**
+         * Returns `true` if dropping is allowed. Otherwise, returns `false`.
+         */
+        get: function () {
+            if (this.initialized && this.destItemId && this.destTreeViewGuid) {
+                // Disallow circular references.
+                return !((this.destTreeViewGuid + "_" + this.destItemId + "_").
+                    startsWith(this.treeViewGuid + "_" + this.itemId + "_"));
+            }
+            else {
+                return false;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TreeViewDragAnalyzer.prototype, "destinationMeta", {
+        /**
+         * Returns an object which contains:
+         * * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and
+         * * The `guid` of the destination TreeView (the TreeView which renders the destination item).
+         */
+        get: function () {
+            return { itemHierarchicalIndex: this.destItemId, treeViewGuid: this.destTreeViewGuid };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Returns the specific drop operation.
+     *
+     * @returns - The following values are returned:
+     * * `before`&mdash;Indicates that the dragged item is positioned at the beginning of the destination item.
+     * * `after`&mdash;Indicates that the dragged item is positioned at the end of the destination item.
+     * * `child`&mdash;Indicates that the dragged item is positioned in the middle of the destination item.
+     * * `undefined`&mdash;Indicates that dropping is not allowed.
+     */
+    TreeViewDragAnalyzer.prototype.getDropOperation = function () {
+        if (this.initialized && this.isDropAllowed) {
+            var _a = this.destDomNodeWithMeta.getBoundingClientRect(), top_1 = _a.top, height = _a.height;
+            if (top_1 + height - this.event.clientY < DROPZONE_BOUNDARY_DELTA) {
+                return 'after';
+            }
+            else if (this.event.clientY - top_1 < DROPZONE_BOUNDARY_DELTA) {
+                return 'before';
+            }
+            else {
+                return 'child';
+            }
+        }
+        else {
+            return undefined;
+        }
+    };
+    TreeViewDragAnalyzer.prototype.setDestimationMeta = function (element) {
+        var node = element;
+        while (node && !node[DOM_KENDO_ITEM_ID_FIELD]) {
+            node = node.parentNode;
+        }
+        if (node && node[DOM_KENDO_ITEM_ID_FIELD]) {
+            this.destDomNodeWithMeta = node;
+            this.destItemId = node[DOM_KENDO_ITEM_ID_FIELD];
+            this.destTreeViewGuid = node[DOM_KENDO_TREEVIEW_GUID_FIELD];
+        }
+    };
+    return TreeViewDragAnalyzer;
+}());
+export default TreeViewDragAnalyzer;