@limble/limble-tree 0.12.4 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/README.md +149 -149
  2. package/{esm2015/lib/classes/Branch.js → esm2020/lib/classes/Branch.mjs} +1 -1
  3. package/{esm2015/lib/classes/DropZone.js → esm2020/lib/classes/DropZone.mjs} +1 -1
  4. package/{esm2015/lib/classes/DropZoneLocation.js → esm2020/lib/classes/DropZoneLocation.mjs} +1 -1
  5. package/{esm2015/lib/custom-event-bindings/dragleave-no-change-detect.directive.js → esm2020/lib/custom-event-bindings/dragleave-no-change-detect.directive.mjs} +0 -0
  6. package/{esm2015/lib/custom-event-bindings/dragover-no-change-detect.directive.js → esm2020/lib/custom-event-bindings/dragover-no-change-detect.directive.mjs} +1 -1
  7. package/esm2020/lib/drop-zone/drop-zone.component.mjs +75 -0
  8. package/esm2020/lib/limble-tree-branch/limble-tree-branch.component.mjs +110 -0
  9. package/esm2020/lib/limble-tree-node/limble-tree-node.component.mjs +467 -0
  10. package/{esm2015/lib/limble-tree-placeholder/limble-tree-placeholder.component.js → esm2020/lib/limble-tree-placeholder/limble-tree-placeholder.component.mjs} +3 -8
  11. package/esm2020/lib/limble-tree-root/drop-zone.service.mjs +376 -0
  12. package/esm2020/lib/limble-tree-root/limble-tree-root.component.mjs +172 -0
  13. package/{esm2015/lib/limble-tree-root/tree-construction-status.service.js → esm2020/lib/limble-tree-root/tree-construction-status.service.mjs} +1 -1
  14. package/esm2020/lib/limble-tree-root/tree.service.mjs +297 -0
  15. package/{esm2015/lib/limble-tree.module.js → esm2020/lib/limble-tree.module.mjs} +5 -5
  16. package/{esm2015/lib/singletons/component-creator.service.js → esm2020/lib/singletons/component-creator.service.mjs} +1 -1
  17. package/esm2020/lib/singletons/drag-state.service.mjs +63 -0
  18. package/esm2020/lib/singletons/global-events.service.mjs +136 -0
  19. package/{esm2015/lib/util.js → esm2020/lib/util.mjs} +1 -1
  20. package/{esm2015/limble-limble-tree.js → esm2020/limble-limble-tree.mjs} +0 -0
  21. package/{esm2015/public-api.js → esm2020/public-api.mjs} +1 -1
  22. package/fesm2015/limble-limble-tree.mjs +2256 -0
  23. package/fesm2015/limble-limble-tree.mjs.map +1 -0
  24. package/{fesm2015/limble-limble-tree.js → fesm2020/limble-limble-tree.mjs} +89 -136
  25. package/fesm2020/limble-limble-tree.mjs.map +1 -0
  26. package/{limble-limble-tree.d.ts → index.d.ts} +0 -0
  27. package/lib/custom-event-bindings/dragleave-no-change-detect.directive.d.ts +1 -1
  28. package/lib/custom-event-bindings/dragover-no-change-detect.directive.d.ts +1 -1
  29. package/lib/drop-zone/drop-zone.component.d.ts +1 -1
  30. package/lib/limble-tree-branch/limble-tree-branch.component.d.ts +1 -1
  31. package/lib/limble-tree-node/limble-tree-node.component.d.ts +1 -1
  32. package/lib/limble-tree-placeholder/limble-tree-placeholder.component.d.ts +1 -1
  33. package/lib/limble-tree-root/limble-tree-root.component.d.ts +1 -1
  34. package/package.json +22 -9
  35. package/bundles/limble-limble-tree.umd.js +0 -2910
  36. package/bundles/limble-limble-tree.umd.js.map +0 -1
  37. package/esm2015/lib/drop-zone/drop-zone.component.js +0 -81
  38. package/esm2015/lib/limble-tree-branch/limble-tree-branch.component.js +0 -116
  39. package/esm2015/lib/limble-tree-node/limble-tree-node.component.js +0 -484
  40. package/esm2015/lib/limble-tree-root/drop-zone.service.js +0 -377
  41. package/esm2015/lib/limble-tree-root/limble-tree-root.component.js +0 -178
  42. package/esm2015/lib/limble-tree-root/tree.service.js +0 -301
  43. package/esm2015/lib/singletons/drag-state.service.js +0 -64
  44. package/esm2015/lib/singletons/global-events.service.js +0 -137
  45. package/fesm2015/limble-limble-tree.js.map +0 -1
@@ -195,13 +195,12 @@ class DragStateService {
195
195
  }
196
196
  /** Called to indicate that a drop into a valid drop zone has occurred. Returns the item that was dropped. */
197
197
  capture() {
198
- var _a;
199
198
  if (this.state !== "droppable") {
200
199
  throw new Error("Can only move to `captured` state from `droppable` state");
201
200
  }
202
201
  this.state = "captured";
203
202
  this.state$.next(this.state);
204
- return (_a = this._tempData) === null || _a === void 0 ? void 0 : _a.branch;
203
+ return this._tempData?.branch;
205
204
  }
206
205
  /** Called to reset the service for future drags */
207
206
  release() {
@@ -478,15 +477,14 @@ class DropZoneService {
478
477
  location.parentCoordinates.length > 0);
479
478
  })
480
479
  .sort((valueA, valueB) => {
481
- var _a, _b, _c, _d;
482
480
  const aCoordinates = valueA.getFullInsertCoordinates();
483
481
  const bCoordinates = valueB.getFullInsertCoordinates();
484
482
  const length = Math.max(aCoordinates.length, bCoordinates.length);
485
483
  for (let index = 0; index < length; index++) {
486
- if (((_a = aCoordinates[index]) !== null && _a !== void 0 ? _a : -1) > ((_b = bCoordinates[index]) !== null && _b !== void 0 ? _b : -1)) {
484
+ if ((aCoordinates[index] ?? -1) > (bCoordinates[index] ?? -1)) {
487
485
  return -1;
488
486
  }
489
- else if (((_c = aCoordinates[index]) !== null && _c !== void 0 ? _c : -1) < ((_d = bCoordinates[index]) !== null && _d !== void 0 ? _d : -1)) {
487
+ else if ((aCoordinates[index] ?? -1) < (bCoordinates[index] ?? -1)) {
490
488
  return 1;
491
489
  }
492
490
  }
@@ -779,7 +777,7 @@ const _c0$3 = function (a0, a1) { return { active: a0, related: a1 }; };
779
777
  function DropZoneComponent_div_0_Template(rf, ctx) { if (rf & 1) {
780
778
  const _r2 = i0.ɵɵgetCurrentView();
781
779
  i0.ɵɵelementStart(0, "div", 1);
782
- i0.ɵɵlistener("dragenter", function DropZoneComponent_div_0_Template_div_dragenter_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r1 = i0.ɵɵnextContext(); return ctx_r1.dragenterHandler(); });
780
+ i0.ɵɵlistener("dragenter", function DropZoneComponent_div_0_Template_div_dragenter_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.dragenterHandler()); });
783
781
  i0.ɵɵelement(1, "div", 2);
784
782
  i0.ɵɵelementEnd();
785
783
  } if (rf & 2) {
@@ -807,14 +805,13 @@ class DropZoneComponent {
807
805
  this.commSubscription = this.dropZone
808
806
  .getCommChannel()
809
807
  .subscribe((message) => {
810
- var _a, _b, _c, _d;
811
808
  switch (message) {
812
809
  case "checkVisible": {
813
- this.visible = (_b = (_a = this.dropZone) === null || _a === void 0 ? void 0 : _a.isVisible()) !== null && _b !== void 0 ? _b : false;
810
+ this.visible = this.dropZone?.isVisible() ?? false;
814
811
  break;
815
812
  }
816
813
  case "checkActive": {
817
- this.active = (_d = (_c = this.dropZone) === null || _c === void 0 ? void 0 : _c.isActive()) !== null && _d !== void 0 ? _d : false;
814
+ this.active = this.dropZone?.isActive() ?? false;
818
815
  break;
819
816
  }
820
817
  case "checkRendered": {
@@ -839,15 +836,10 @@ DropZoneComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DropZoneC
839
836
  i0.ɵɵtemplate(0, DropZoneComponent_div_0_Template, 2, 4, "div", 0);
840
837
  } if (rf & 2) {
841
838
  i0.ɵɵproperty("ngIf", ctx.visible);
842
- } }, directives: [i2.NgIf, i2.NgClass], styles: [".active[_ngcontent-%COMP%]{margin:10px 0;width:calc(100% - 20px);height:105px;border-radius:5px;background:#f0f9ff;border:2px dashed #bed2db;box-sizing:border-box}.related[_ngcontent-%COMP%]{margin:10px 0;width:calc(100% - 20px);height:30px;border-radius:5px;background:#fff6f0;border:1px dashed #dbccbe;box-sizing:border-box;opacity:.8}.dropZoneContainer[_ngcontent-%COMP%]{position:relative}"], changeDetection: 0 });
839
+ } }, dependencies: [i2.NgClass, i2.NgIf], styles: [".active[_ngcontent-%COMP%]{margin:10px 0;width:calc(100% - 20px);height:105px;border-radius:5px;background:#f0f9ff;border:2px dashed #bed2db;box-sizing:border-box}.related[_ngcontent-%COMP%]{margin:10px 0;width:calc(100% - 20px);height:30px;border-radius:5px;background:#fff6f0;border:1px dashed #dbccbe;box-sizing:border-box;opacity:.8}.dropZoneContainer[_ngcontent-%COMP%]{position:relative}"], changeDetection: 0 });
843
840
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DropZoneComponent, [{
844
841
  type: Component,
845
- args: [{
846
- selector: "drop-zone",
847
- templateUrl: "./drop-zone.component.html",
848
- styleUrls: ["./drop-zone.component.scss"],
849
- changeDetection: ChangeDetectionStrategy.OnPush
850
- }]
842
+ args: [{ selector: "drop-zone", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dropZoneContainer\" (dragenter)=\"dragenterHandler()\" *ngIf=\"visible\">\n <div [ngClass]=\"{ active: active, related: !active }\"></div>\n</div>\n", styles: [".active{margin:10px 0;width:calc(100% - 20px);height:105px;border-radius:5px;background:#f0f9ff;border:2px dashed #bed2db;box-sizing:border-box}.related{margin:10px 0;width:calc(100% - 20px);height:30px;border-radius:5px;background:#fff6f0;border:1px dashed #dbccbe;box-sizing:border-box;opacity:.8}.dropZoneContainer{position:relative}\n"] }]
851
843
  }], function () { return [{ type: DropZoneService }, { type: i0.ChangeDetectorRef }]; }, { dropZone: [{
852
844
  type: Input
853
845
  }] }); })();
@@ -862,14 +854,13 @@ function LimbleTreeBranchComponent_drop_zone_1_Template(rf, ctx) { if (rf & 1) {
862
854
  function LimbleTreeBranchComponent_ng_template_3_Template(rf, ctx) { }
863
855
  class LimbleTreeBranchComponent {
864
856
  constructor(treeService, changeDetectorRef, dropZoneService, treeConstructionStatus, ngZone) {
865
- var _a;
866
857
  this.treeService = treeService;
867
858
  this.changeDetectorRef = changeDetectorRef;
868
859
  this.dropZoneService = dropZoneService;
869
860
  this.treeConstructionStatus = treeConstructionStatus;
870
861
  this.ngZone = ngZone;
871
862
  this.treeConstructionStatus.constructing();
872
- this.indent = (_a = this.treeService.treeOptions) === null || _a === void 0 ? void 0 : _a.indent;
863
+ this.indent = this.treeService.treeOptions?.indent;
873
864
  this.renderDropZoneInside = false;
874
865
  }
875
866
  ngOnInit() {
@@ -935,22 +926,17 @@ LimbleTreeBranchComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: L
935
926
  i0.ɵɵtemplate(1, LimbleTreeBranchComponent_drop_zone_1_Template, 1, 1, "drop-zone", 0);
936
927
  i0.ɵɵelementStart(2, "span", 1);
937
928
  i0.ɵɵtemplate(3, LimbleTreeBranchComponent_ng_template_3_Template, 0, 0, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
938
- i0.ɵɵelementEnd();
939
- i0.ɵɵelementEnd();
929
+ i0.ɵɵelementEnd()();
940
930
  } if (rf & 2) {
941
931
  i0.ɵɵstyleProp("margin-left", ctx.indent, "px");
942
932
  i0.ɵɵadvance(1);
943
933
  i0.ɵɵproperty("ngIf", ctx.renderDropZoneInside);
944
934
  i0.ɵɵadvance(1);
945
935
  i0.ɵɵproperty("hidden", ctx.branch && ctx.branch.data.collapsed);
946
- } }, directives: [i2.NgIf, DropZoneComponent], styles: [""] });
936
+ } }, dependencies: [i2.NgIf, DropZoneComponent] });
947
937
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LimbleTreeBranchComponent, [{
948
938
  type: Component,
949
- args: [{
950
- selector: "limble-tree-branch",
951
- templateUrl: "./limble-tree-branch.component.html",
952
- styleUrls: ["./limble-tree-branch.component.scss"]
953
- }]
939
+ args: [{ selector: "limble-tree-branch", template: "<div [style.marginLeft.px]=\"indent\">\n <drop-zone\n *ngIf=\"renderDropZoneInside\"\n [dropZone]=\"dropZoneInside\"\n ></drop-zone>\n <span [hidden]=\"branch && branch.data.collapsed\" class=\"limble-child-nodes\">\n <ng-template #children></ng-template>\n </span>\n</div>\n" }]
954
940
  }], function () { return [{ type: TreeService }, { type: i0.ChangeDetectorRef }, { type: DropZoneService }, { type: TreeConstructionStatus }, { type: i0.NgZone }]; }, { branch: [{
955
941
  type: Input
956
942
  }], children: [{
@@ -976,7 +962,6 @@ ComponentCreatorService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token:
976
962
  }], function () { return [{ type: i0.ComponentFactoryResolver }]; }, null); })();
977
963
 
978
964
  function getScrollParent(element) {
979
- var _a;
980
965
  const regex = /(auto|scroll)/;
981
966
  const parents = (_node, parentList) => {
982
967
  if (_node === null || _node.parentNode === null) {
@@ -995,7 +980,7 @@ function getScrollParent(element) {
995
980
  return parent;
996
981
  }
997
982
  }
998
- return ((_a = document.scrollingElement) !== null && _a !== void 0 ? _a : document.documentElement);
983
+ return (document.scrollingElement ?? document.documentElement);
999
984
  }
1000
985
  class GlobalEventsService {
1001
986
  constructor(ngZone) {
@@ -1167,20 +1152,19 @@ class LimbleTreeNodeComponent {
1167
1152
  }
1168
1153
  }
1169
1154
  ngOnInit() {
1170
- var _a, _b, _c;
1171
- if (((_a = this.treeService.treeOptions) === null || _a === void 0 ? void 0 : _a.allowDragging) === false) {
1155
+ if (this.treeService.treeOptions?.allowDragging === false) {
1172
1156
  return;
1173
1157
  }
1174
- const parent = (_b = this.branch) === null || _b === void 0 ? void 0 : _b.getParent();
1175
- if ((parent === null || parent === void 0 ? void 0 : parent.data) !== null) {
1176
- const parentData = parent === null || parent === void 0 ? void 0 : parent.data;
1158
+ const parent = this.branch?.getParent();
1159
+ if (parent?.data !== null) {
1160
+ const parentData = parent?.data;
1177
1161
  if (!isNestingAllowed(this.treeService.treeOptions, parentData)) {
1178
1162
  this.renderInnerBranch = false;
1179
1163
  return;
1180
1164
  }
1181
1165
  }
1182
1166
  this.registerDropZones();
1183
- this.currentBranchCoordinates = (_c = this.branch) === null || _c === void 0 ? void 0 : _c.getCoordinates();
1167
+ this.currentBranchCoordinates = this.branch?.getCoordinates();
1184
1168
  this.ngZone.runOutsideAngular(() => {
1185
1169
  if (this.dropZoneAbove === undefined ||
1186
1170
  this.dropZoneBelow === undefined) {
@@ -1217,7 +1201,6 @@ class LimbleTreeNodeComponent {
1217
1201
  this.treeService.cleanupSignal$.next(true);
1218
1202
  }
1219
1203
  dragstartHandler(event) {
1220
- var _a;
1221
1204
  event.stopPropagation();
1222
1205
  if (event.dataTransfer === null ||
1223
1206
  this.branch === undefined ||
@@ -1225,7 +1208,7 @@ class LimbleTreeNodeComponent {
1225
1208
  throw new Error("failed to run dragstartHandler");
1226
1209
  }
1227
1210
  const draggedElement = event.target;
1228
- if (((_a = draggedElement.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) !== "LIMBLE-TREE-NODE") {
1211
+ if (draggedElement.parentElement?.tagName !== "LIMBLE-TREE-NODE") {
1229
1212
  //Don't drag stuff that isn't part of the tree
1230
1213
  event.preventDefault();
1231
1214
  return;
@@ -1239,10 +1222,9 @@ class LimbleTreeNodeComponent {
1239
1222
  this.ngZone.runOutsideAngular(() => {
1240
1223
  //We have to use a setTimeout due to a bug in chrome: https://stackoverflow.com/a/20733870/8796651
1241
1224
  setTimeout(() => {
1242
- var _a, _b;
1243
1225
  draggedElement.classList.add("dragging");
1244
- if (((_a = this.treeService.treeData) === null || _a === void 0 ? void 0 : _a.length) === 1 &&
1245
- ((_b = this.branch) === null || _b === void 0 ? void 0 : _b.getCoordinates().length) === 1) {
1226
+ if (this.treeService.treeData?.length === 1 &&
1227
+ this.branch?.getCoordinates().length === 1) {
1246
1228
  //We are dragging the only element in the tree, so we have to use the placeholder system
1247
1229
  this.treeService.placeholder$.next(true);
1248
1230
  }
@@ -1263,8 +1245,8 @@ class LimbleTreeNodeComponent {
1263
1245
  const parent = this.branch.getParent();
1264
1246
  let parentData;
1265
1247
  let parentNestingAllowed = true;
1266
- if ((parent === null || parent === void 0 ? void 0 : parent.data) !== null) {
1267
- parentData = parent === null || parent === void 0 ? void 0 : parent.data;
1248
+ if (parent?.data !== null) {
1249
+ parentData = parent?.data;
1268
1250
  parentNestingAllowed = isNestingAllowed(this.treeService.treeOptions, parentData);
1269
1251
  }
1270
1252
  if (this.dropZoneAbove !== undefined && parentNestingAllowed) {
@@ -1281,8 +1263,7 @@ class LimbleTreeNodeComponent {
1281
1263
  });
1282
1264
  }
1283
1265
  dragendHandler(event) {
1284
- var _a, _b;
1285
- event === null || event === void 0 ? void 0 : event.stopPropagation();
1266
+ event?.stopPropagation();
1286
1267
  if (this.draggableDiv === undefined) {
1287
1268
  throw new Error("could not get draggable div");
1288
1269
  }
@@ -1304,8 +1285,8 @@ class LimbleTreeNodeComponent {
1304
1285
  this.dragStateService.release();
1305
1286
  this.dropZoneService.clearVisibleZones();
1306
1287
  this.dropZoneService.restoreFamilies();
1307
- if (((_a = this.treeService.treeData) === null || _a === void 0 ? void 0 : _a.length) === 1 &&
1308
- ((_b = this.branch) === null || _b === void 0 ? void 0 : _b.getCoordinates().length) === 1) {
1288
+ if (this.treeService.treeData?.length === 1 &&
1289
+ this.branch?.getCoordinates().length === 1) {
1309
1290
  //We were dragging the only element in the tree, so we have to
1310
1291
  //remove the placeholder that we added in the dragstart
1311
1292
  this.treeService.placeholder$.next(false);
@@ -1313,7 +1294,6 @@ class LimbleTreeNodeComponent {
1313
1294
  }
1314
1295
  }
1315
1296
  dragoverHandler(event) {
1316
- var _a, _b, _c;
1317
1297
  if (this.globalEventsService.scrolling === true) {
1318
1298
  return;
1319
1299
  }
@@ -1337,7 +1317,7 @@ class LimbleTreeNodeComponent {
1337
1317
  }
1338
1318
  let topLine;
1339
1319
  let bottomLine;
1340
- if (((_a = this.innerBranch) === null || _a === void 0 ? void 0 : _a.renderDropZoneInside) === false) {
1320
+ if (this.innerBranch?.renderDropZoneInside === false) {
1341
1321
  topLine = target.offsetHeight / 2 - 6;
1342
1322
  bottomLine = topLine;
1343
1323
  }
@@ -1348,8 +1328,8 @@ class LimbleTreeNodeComponent {
1348
1328
  const parent = this.branch.getParent();
1349
1329
  let parentData;
1350
1330
  let parentNestingAllowed = true;
1351
- if ((parent === null || parent === void 0 ? void 0 : parent.data) !== null) {
1352
- parentData = parent === null || parent === void 0 ? void 0 : parent.data;
1331
+ if (parent?.data !== null) {
1332
+ parentData = parent?.data;
1353
1333
  parentNestingAllowed = isNestingAllowed(this.treeService.treeOptions, parentData);
1354
1334
  }
1355
1335
  /** The y-coordinates of the mouse in relation to the node it is hovering over */
@@ -1373,8 +1353,8 @@ class LimbleTreeNodeComponent {
1373
1353
  }
1374
1354
  else if (offsetY < bottomLine &&
1375
1355
  offsetY > topLine &&
1376
- ((_b = this.innerBranch) === null || _b === void 0 ? void 0 : _b.renderDropZoneInside) === true &&
1377
- ((_c = this.innerBranch) === null || _c === void 0 ? void 0 : _c.dropZoneInside) !== undefined &&
1356
+ this.innerBranch?.renderDropZoneInside === true &&
1357
+ this.innerBranch?.dropZoneInside !== undefined &&
1378
1358
  (activeDropZone === null ||
1379
1359
  !DropZone.dropZoneLocationsAreEqual(activeDropZone, this.innerBranch.dropZoneInside))) {
1380
1360
  this.dropZoneService.showDropZoneFamily(this.innerBranch.dropZoneInside);
@@ -1399,13 +1379,12 @@ class LimbleTreeNodeComponent {
1399
1379
  }
1400
1380
  }
1401
1381
  renderNode() {
1402
- var _a;
1403
1382
  if (this.nodeHost === undefined || this.branch === undefined) {
1404
1383
  throw new Error("Failed to render tree node");
1405
1384
  }
1406
1385
  let component = this.branch.data.component;
1407
1386
  if (component === undefined) {
1408
- component = (_a = this.treeService.treeOptions) === null || _a === void 0 ? void 0 : _a.defaultComponent;
1387
+ component = this.treeService.treeOptions?.defaultComponent;
1409
1388
  }
1410
1389
  if (component === undefined) {
1411
1390
  throw new Error("limbleTree requires a component to render");
@@ -1421,37 +1400,33 @@ class LimbleTreeNodeComponent {
1421
1400
  this.addDropZoneBelow();
1422
1401
  }
1423
1402
  addDropZoneAbove() {
1424
- var _a;
1425
1403
  if (this.branch === undefined) {
1426
1404
  throw new Error("failed to register drop zone above");
1427
1405
  }
1428
1406
  const parent = this.branch.getParent();
1429
1407
  const currentCoordinates = this.branch.getCoordinates();
1430
1408
  const index = currentCoordinates[currentCoordinates.length - 1];
1431
- this.dropZoneAbove = new DropZone([...((_a = parent === null || parent === void 0 ? void 0 : parent.getCoordinates()) !== null && _a !== void 0 ? _a : [])], index);
1409
+ this.dropZoneAbove = new DropZone([...(parent?.getCoordinates() ?? [])], index);
1432
1410
  this.dropZoneService.addDropZone(this.dropZoneAbove);
1433
1411
  }
1434
1412
  addDropZoneBelow() {
1435
- var _a;
1436
1413
  if (this.branch === undefined) {
1437
1414
  throw new Error("failed to register drop zone below");
1438
1415
  }
1439
1416
  const parent = this.branch.getParent();
1440
1417
  const currentCoordinates = this.branch.getCoordinates();
1441
1418
  const index = currentCoordinates[currentCoordinates.length - 1];
1442
- this.dropZoneBelow = new DropZone([...((_a = parent === null || parent === void 0 ? void 0 : parent.getCoordinates()) !== null && _a !== void 0 ? _a : [])], index + 1);
1419
+ this.dropZoneBelow = new DropZone([...(parent?.getCoordinates() ?? [])], index + 1);
1443
1420
  this.dropZoneService.addDropZone(this.dropZoneBelow);
1444
1421
  }
1445
1422
  updateDropZones() {
1446
- var _a;
1447
- this.currentBranchCoordinates = (_a = this.branch) === null || _a === void 0 ? void 0 : _a.getCoordinates();
1423
+ this.currentBranchCoordinates = this.branch?.getCoordinates();
1448
1424
  this.updateDropZoneAbove();
1449
1425
  this.updateDropZoneBelow();
1450
1426
  this.updateDropZoneInside();
1451
1427
  this.setDropZoneHosts();
1452
1428
  }
1453
1429
  updateDropZoneAbove() {
1454
- var _a;
1455
1430
  if (this.branch === undefined || this.dropZoneAbove === undefined) {
1456
1431
  throw new Error("failed to update drop zone above");
1457
1432
  }
@@ -1459,11 +1434,10 @@ class LimbleTreeNodeComponent {
1459
1434
  const currentCoordinates = this.branch.getCoordinates();
1460
1435
  const index = currentCoordinates[currentCoordinates.length - 1];
1461
1436
  const location = this.dropZoneAbove.getLocation();
1462
- location.setParentCoordinates([...((_a = parent === null || parent === void 0 ? void 0 : parent.getCoordinates()) !== null && _a !== void 0 ? _a : [])]);
1437
+ location.setParentCoordinates([...(parent?.getCoordinates() ?? [])]);
1463
1438
  location.setInsertIndex(index);
1464
1439
  }
1465
1440
  updateDropZoneBelow() {
1466
- var _a;
1467
1441
  if (this.branch === undefined || this.dropZoneBelow === undefined) {
1468
1442
  throw new Error("failed to update drop zone below");
1469
1443
  }
@@ -1471,12 +1445,11 @@ class LimbleTreeNodeComponent {
1471
1445
  const currentCoordinates = this.branch.getCoordinates();
1472
1446
  const index = currentCoordinates[currentCoordinates.length - 1];
1473
1447
  const location = this.dropZoneBelow.getLocation();
1474
- location.setParentCoordinates([...((_a = parent === null || parent === void 0 ? void 0 : parent.getCoordinates()) !== null && _a !== void 0 ? _a : [])]);
1448
+ location.setParentCoordinates([...(parent?.getCoordinates() ?? [])]);
1475
1449
  location.setInsertIndex(index + 1);
1476
1450
  }
1477
1451
  updateDropZoneInside() {
1478
- var _a;
1479
- if (((_a = this.innerBranch) === null || _a === void 0 ? void 0 : _a.dropZoneInside) === undefined) {
1452
+ if (this.innerBranch?.dropZoneInside === undefined) {
1480
1453
  return;
1481
1454
  }
1482
1455
  if (this.branch === undefined) {
@@ -1494,7 +1467,6 @@ class LimbleTreeNodeComponent {
1494
1467
  this.dropZoneBelow.setHost(this.parentHost);
1495
1468
  }
1496
1469
  checkForHandle() {
1497
- var _a;
1498
1470
  if (this.nodeHostContainer === undefined ||
1499
1471
  this.draggableDiv === undefined) {
1500
1472
  return;
@@ -1502,7 +1474,7 @@ class LimbleTreeNodeComponent {
1502
1474
  const nodeHostContainerElement = this.nodeHostContainer.nativeElement;
1503
1475
  const handle = nodeHostContainerElement.querySelector(".limble-tree-handle");
1504
1476
  const draggableDivElement = this.draggableDiv.nativeElement;
1505
- if (!isDraggingAllowed(this.treeService.treeOptions, (_a = this.branch) === null || _a === void 0 ? void 0 : _a.data)) {
1477
+ if (!isDraggingAllowed(this.treeService.treeOptions, this.branch?.data)) {
1506
1478
  draggableDivElement.setAttribute("draggable", "false");
1507
1479
  }
1508
1480
  else if (handle === null) {
@@ -1556,11 +1528,7 @@ LimbleTreeNodeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Lim
1556
1528
  } }, styles: [".dragging[_ngcontent-%COMP%]{position:absolute;transition:transform .01s;transform:translate(-9999px)}"] });
1557
1529
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LimbleTreeNodeComponent, [{
1558
1530
  type: Component,
1559
- args: [{
1560
- selector: "limble-tree-node",
1561
- templateUrl: "./limble-tree-node.component.html",
1562
- styleUrls: ["./limble-tree-node.component.scss"]
1563
- }]
1531
+ args: [{ selector: "limble-tree-node", template: "<drop-zone\n *ngIf=\"renderDropZoneAbove === true\"\n [dropZone]=\"dropZoneAbove\"\n></drop-zone>\n<div\n (dragstart)=\"dragstartHandler($event)\"\n (dragend)=\"dragendHandler($event)\"\n class=\"limble-parent-container\"\n #draggableDiv\n>\n <div\n class=\"node-host-container\"\n (dragoverNoChangeDetect)=\"dragoverHandler($event)\"\n [dragoverEventThrottle]=\"10\"\n #nodeHostContainer\n >\n <ng-template #nodeHost></ng-template>\n </div>\n <limble-tree-branch\n *ngIf=\"branch !== undefined && renderInnerBranch === true\"\n [branch]=\"branch\"\n #innerBranch\n ></limble-tree-branch>\n</div>\n<drop-zone\n *ngIf=\"renderDropZoneBelow === true\"\n [dropZone]=\"dropZoneBelow\"\n></drop-zone>\n", styles: [".dragging{position:absolute;transition:transform .01s;transform:translate(-9999px)}\n"] }]
1564
1532
  }], function () { return [{ type: ComponentCreatorService }, { type: i0.ChangeDetectorRef }, { type: DragStateService }, { type: DropZoneService }, { type: TreeService }, { type: GlobalEventsService }, { type: i0.NgZone }, { type: TreeConstructionStatus }]; }, { branch: [{
1565
1533
  type: Input
1566
1534
  }], nodeHost: [{
@@ -1621,7 +1589,6 @@ class TreeService {
1621
1589
  });
1622
1590
  }
1623
1591
  drop(source, targetCoordinates) {
1624
- var _a;
1625
1592
  //prep
1626
1593
  const sourceParent = source.getParent();
1627
1594
  if (sourceParent === null) {
@@ -1649,9 +1616,9 @@ class TreeService {
1649
1616
  throw new Error("could not get to target");
1650
1617
  }
1651
1618
  const target = this.dropZoneService.getDropZone(targetCoordinates);
1652
- const targetIndex = target === null || target === void 0 ? void 0 : target.getLocation().insertIndex;
1653
- const targetHost = target === null || target === void 0 ? void 0 : target.getHost();
1654
- const sourceHost = (_a = this.dragStateService.getData()) === null || _a === void 0 ? void 0 : _a.parentContainer;
1619
+ const targetIndex = target?.getLocation().insertIndex;
1620
+ const targetHost = target?.getHost();
1621
+ const sourceHost = this.dragStateService.getData()?.parentContainer;
1655
1622
  if (this.placeholder === true) {
1656
1623
  this.placeholder$.next(false);
1657
1624
  }
@@ -1719,11 +1686,10 @@ class TreeService {
1719
1686
  this.render();
1720
1687
  }
1721
1688
  cleanup(rebuild = false) {
1722
- var _a;
1723
1689
  if (rebuild) {
1724
1690
  this.rebuildTreeData();
1725
1691
  }
1726
- if (((_a = this.treeData) === null || _a === void 0 ? void 0 : _a.length) === 0) {
1692
+ if (this.treeData?.length === 0) {
1727
1693
  //We do a full render here because it isn't actually any slower
1728
1694
  //when there are no nodes, and it is a little more straightforward
1729
1695
  this.render();
@@ -1768,13 +1734,12 @@ class TreeService {
1768
1734
  }
1769
1735
  /** Renders a branch of the tree and all of its descendants */
1770
1736
  renderBranch(host, branch) {
1771
- var _a, _b;
1772
1737
  if (this.treeModel === undefined) {
1773
1738
  throw new Error("TreeModel not initialized");
1774
1739
  }
1775
1740
  host.clear();
1776
1741
  branch.clearChildren();
1777
- for (const node of (_b = (_a = branch.data) === null || _a === void 0 ? void 0 : _a.nodes) !== null && _b !== void 0 ? _b : []) {
1742
+ for (const node of branch.data?.nodes ?? []) {
1778
1743
  const newBranch = new Branch(node);
1779
1744
  branch.appendChild(newBranch);
1780
1745
  const componentRef = this.componentCreatorService.appendComponent(LimbleTreeNodeComponent, host);
@@ -1785,7 +1750,6 @@ class TreeService {
1785
1750
  }
1786
1751
  }
1787
1752
  processOptions(options = {}, itemsPerPage = Infinity, page = 1) {
1788
- var _a, _b, _c, _d, _e;
1789
1753
  if (options.listMode === true &&
1790
1754
  options.allowNesting !== undefined &&
1791
1755
  options.allowNesting !== false) {
@@ -1793,11 +1757,11 @@ class TreeService {
1793
1757
  }
1794
1758
  const result = {
1795
1759
  defaultComponent: options.defaultComponent,
1796
- indent: (_a = options.indent) !== null && _a !== void 0 ? _a : INDENT,
1797
- allowNesting: options.listMode !== true && ((_b = options.allowNesting) !== null && _b !== void 0 ? _b : true),
1798
- allowDragging: (_c = options.allowDragging) !== null && _c !== void 0 ? _c : true,
1799
- allowDrop: (_d = options.allowDrop) !== null && _d !== void 0 ? _d : (() => true),
1800
- listMode: (_e = options.listMode) !== null && _e !== void 0 ? _e : false,
1760
+ indent: options.indent ?? INDENT,
1761
+ allowNesting: options.listMode !== true && (options.allowNesting ?? true),
1762
+ allowDragging: options.allowDragging ?? true,
1763
+ allowDrop: options.allowDrop ?? (() => true),
1764
+ listMode: options.listMode ?? false,
1801
1765
  itemsPerPage: options.listMode ? itemsPerPage : undefined,
1802
1766
  page: options.listMode ? page : undefined
1803
1767
  };
@@ -1904,36 +1868,6 @@ DragoverNoChangeDetectDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ t
1904
1868
  type: Output
1905
1869
  }] }); })();
1906
1870
 
1907
- class DragleaveNoChangeDetectDirective {
1908
- constructor(ngZone, el) {
1909
- this.ngZone = ngZone;
1910
- this.el = el;
1911
- this.dragleaveNoChangeDetect = new EventEmitter();
1912
- }
1913
- ngOnInit() {
1914
- this.ngZone.runOutsideAngular(() => {
1915
- this.eventSubscription = fromEvent(this.el.nativeElement, "dragleave").subscribe(($event) => {
1916
- this.dragleaveNoChangeDetect.emit($event);
1917
- });
1918
- });
1919
- }
1920
- ngOnDestroy() {
1921
- if (this.eventSubscription !== undefined) {
1922
- this.eventSubscription.unsubscribe();
1923
- }
1924
- }
1925
- }
1926
- DragleaveNoChangeDetectDirective.ɵfac = function DragleaveNoChangeDetectDirective_Factory(t) { return new (t || DragleaveNoChangeDetectDirective)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ElementRef)); };
1927
- DragleaveNoChangeDetectDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: DragleaveNoChangeDetectDirective, selectors: [["", "dragleaveNoChangeDetect", ""]], outputs: { dragleaveNoChangeDetect: "dragleaveNoChangeDetect" } });
1928
- (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DragleaveNoChangeDetectDirective, [{
1929
- type: Directive,
1930
- args: [{
1931
- selector: "[dragleaveNoChangeDetect]"
1932
- }]
1933
- }], function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }]; }, { dragleaveNoChangeDetect: [{
1934
- type: Output
1935
- }] }); })();
1936
-
1937
1871
  class LimbleTreePlaceholderComponent {
1938
1872
  constructor(dropZoneService, changeDetectorRef, treeService, treeConstructionStatus) {
1939
1873
  this.dropZoneService = dropZoneService;
@@ -1990,16 +1924,41 @@ LimbleTreePlaceholderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
1990
1924
  i0.ɵɵelementEnd();
1991
1925
  } if (rf & 2) {
1992
1926
  i0.ɵɵproperty("dropZone", ctx.dropZone);
1993
- } }, directives: [DropZoneComponent, DragoverNoChangeDetectDirective], styles: [".placeholder[_ngcontent-%COMP%]{width:100%;height:20px}"], changeDetection: 0 });
1927
+ } }, dependencies: [DropZoneComponent, DragoverNoChangeDetectDirective], styles: [".placeholder[_ngcontent-%COMP%]{width:100%;height:20px}"], changeDetection: 0 });
1994
1928
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LimbleTreePlaceholderComponent, [{
1995
1929
  type: Component,
1930
+ args: [{ selector: "limble-tree-placeholder", changeDetection: ChangeDetectionStrategy.OnPush, template: "<drop-zone [dropZone]=\"dropZone\"></drop-zone>\n<div class=\"placeholder\" (dragoverNoChangeDetect)=\"dragoverHandler()\"></div>\n", styles: [".placeholder{width:100%;height:20px}\n"] }]
1931
+ }], function () { return [{ type: DropZoneService }, { type: i0.ChangeDetectorRef }, { type: TreeService }, { type: TreeConstructionStatus }]; }, null); })();
1932
+
1933
+ class DragleaveNoChangeDetectDirective {
1934
+ constructor(ngZone, el) {
1935
+ this.ngZone = ngZone;
1936
+ this.el = el;
1937
+ this.dragleaveNoChangeDetect = new EventEmitter();
1938
+ }
1939
+ ngOnInit() {
1940
+ this.ngZone.runOutsideAngular(() => {
1941
+ this.eventSubscription = fromEvent(this.el.nativeElement, "dragleave").subscribe(($event) => {
1942
+ this.dragleaveNoChangeDetect.emit($event);
1943
+ });
1944
+ });
1945
+ }
1946
+ ngOnDestroy() {
1947
+ if (this.eventSubscription !== undefined) {
1948
+ this.eventSubscription.unsubscribe();
1949
+ }
1950
+ }
1951
+ }
1952
+ DragleaveNoChangeDetectDirective.ɵfac = function DragleaveNoChangeDetectDirective_Factory(t) { return new (t || DragleaveNoChangeDetectDirective)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ElementRef)); };
1953
+ DragleaveNoChangeDetectDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: DragleaveNoChangeDetectDirective, selectors: [["", "dragleaveNoChangeDetect", ""]], outputs: { dragleaveNoChangeDetect: "dragleaveNoChangeDetect" } });
1954
+ (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DragleaveNoChangeDetectDirective, [{
1955
+ type: Directive,
1996
1956
  args: [{
1997
- selector: "limble-tree-placeholder",
1998
- templateUrl: "./limble-tree-placeholder.component.html",
1999
- styleUrls: ["./limble-tree-placeholder.component.scss"],
2000
- changeDetection: ChangeDetectionStrategy.OnPush
1957
+ selector: "[dragleaveNoChangeDetect]"
2001
1958
  }]
2002
- }], function () { return [{ type: DropZoneService }, { type: i0.ChangeDetectorRef }, { type: TreeService }, { type: TreeConstructionStatus }]; }, null); })();
1959
+ }], function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }]; }, { dragleaveNoChangeDetect: [{
1960
+ type: Output
1961
+ }] }); })();
2003
1962
 
2004
1963
  const _c0 = ["host"];
2005
1964
  function LimbleTreeRootComponent_limble_tree_placeholder_1_Template(rf, ctx) { if (rf & 1) {
@@ -2041,8 +2000,7 @@ class LimbleTreeRootComponent {
2041
2000
  });
2042
2001
  }
2043
2002
  ngAfterViewInit() {
2044
- var _a;
2045
- if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.listMode) !== true &&
2003
+ if (this.options?.listMode !== true &&
2046
2004
  (this.itemsPerPage !== undefined || this.page !== undefined)) {
2047
2005
  console.warn("pagination is only allowed in listMode; `itemsPerPage` and `page` inputs will be ignored");
2048
2006
  }
@@ -2138,15 +2096,10 @@ LimbleTreeRootComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Lim
2138
2096
  } if (rf & 2) {
2139
2097
  i0.ɵɵadvance(1);
2140
2098
  i0.ɵɵproperty("ngIf", ctx.placeholder === true);
2141
- } }, directives: [DragoverNoChangeDetectDirective, DragleaveNoChangeDetectDirective, i2.NgIf, LimbleTreePlaceholderComponent], styles: [""] });
2099
+ } }, dependencies: [i2.NgIf, LimbleTreePlaceholderComponent, DragoverNoChangeDetectDirective, DragleaveNoChangeDetectDirective] });
2142
2100
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LimbleTreeRootComponent, [{
2143
2101
  type: Component,
2144
- args: [{
2145
- selector: "limble-tree-root",
2146
- templateUrl: "./limble-tree-root.component.html",
2147
- styleUrls: ["./limble-tree-root.component.scss"],
2148
- providers: [TreeService, DropZoneService, TreeConstructionStatus]
2149
- }]
2102
+ args: [{ selector: "limble-tree-root", providers: [TreeService, DropZoneService, TreeConstructionStatus], template: "<div\n (dragoverNoChangeDetect)=\"dragoverHandler($event)\"\n (dragleaveNoChangeDetect)=\"dragleaveHandler($event)\"\n (drop)=\"dropHandler($event)\"\n class=\"tree-event-host\"\n>\n <limble-tree-placeholder\n *ngIf=\"placeholder === true\"\n ></limble-tree-placeholder>\n <ng-template #host></ng-template>\n</div>\n" }]
2150
2103
  }], function () { return [{ type: TreeService }, { type: DropZoneService }, { type: DragStateService }, { type: GlobalEventsService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, { data: [{
2151
2104
  type: Input
2152
2105
  }], options: [{
@@ -2168,7 +2121,7 @@ class LimbleTreeModule {
2168
2121
  }
2169
2122
  LimbleTreeModule.ɵfac = function LimbleTreeModule_Factory(t) { return new (t || LimbleTreeModule)(); };
2170
2123
  LimbleTreeModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: LimbleTreeModule });
2171
- LimbleTreeModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [ComponentCreatorService, DragStateService, GlobalEventsService], imports: [[CommonModule]] });
2124
+ LimbleTreeModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [ComponentCreatorService, DragStateService, GlobalEventsService], imports: [CommonModule] });
2172
2125
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LimbleTreeModule, [{
2173
2126
  type: NgModule,
2174
2127
  args: [{
@@ -2193,9 +2146,9 @@ LimbleTreeModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [Compo
2193
2146
  LimbleTreePlaceholderComponent,
2194
2147
  DragoverNoChangeDetectDirective,
2195
2148
  DragleaveNoChangeDetectDirective], imports: [CommonModule], exports: [LimbleTreeRootComponent] }); })();
2196
- i0.ɵɵsetComponentScope(LimbleTreeNodeComponent, [i2.NgIf, DropZoneComponent,
2197
- DragoverNoChangeDetectDirective,
2198
- LimbleTreeBranchComponent], []);
2149
+ i0.ɵɵsetComponentScope(LimbleTreeNodeComponent, [i2.NgIf, LimbleTreeBranchComponent,
2150
+ DropZoneComponent,
2151
+ DragoverNoChangeDetectDirective], []);
2199
2152
 
2200
2153
  /*
2201
2154
  * Public API Surface of limble-tree
@@ -2206,4 +2159,4 @@ i0.ɵɵsetComponentScope(LimbleTreeNodeComponent, [i2.NgIf, DropZoneComponent,
2206
2159
  */
2207
2160
 
2208
2161
  export { LimbleTreeModule, LimbleTreeRootComponent };
2209
- //# sourceMappingURL=limble-limble-tree.js.map
2162
+ //# sourceMappingURL=limble-limble-tree.mjs.map