@wizishop/angular-components 14.4.69 → 14.4.70

package/angular-components.scss

@@ -150,6 +150,74 @@ $wac-link-active: #38A3F1!default;
 .wac-table__head__cell--checkbox .wac-field-checkbox__row {
   transform: translateX(5px);
 }
+.wac-alert {
+  width: 100%;
+  background-color: transparentize($wac-link-color, 0.85);
+  color: $wac-link-color;
+  border-radius: 3px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  padding: 20px;
+  &.success {
+    background-color: transparentize($wac-green-color, 0.85);
+    p {
+      color: $wac-p-alert-color-success;
+      > * {
+        color: $wac-p-alert-color-success;
+      }
+    }
+    i {
+      color: $wac-green-color;
+    }
+  }
+  &.warning {
+    background-color: transparentize($wac-primary-button, 0.85);
+    p {
+      color: $wac-p-alert-color-warning;
+      > * {
+        color: $wac-p-alert-color-warning;
+      }
+    }
+    i {
+      color: $wac-primary-button;
+    }
+  }
+  &.alert {
+    background-color: transparentize($wac-orange-color, 0.85);
+    p {
+      color: $wac-p-alert-color-alert;
+      > * {
+        color: $wac-p-alert-color-alert;
+      }
+    }
+    i {
+      color: $wac-orange-color;
+    }
+  }
+  p {
+    width: 100%;
+    font-size: rem(14);
+    line-height: rem(25);
+    margin: 0;
+    padding: 0;
+    color: $wac-p-alert-color-default;
+    > * {
+      color: $wac-p-alert-color-default;
+    }
+  }
+  i {
+    width: auto;
+    margin: 0 10px 0 0;
+    color: inherit;
+    font-size: rem(14);
+    line-height: rem(25);
+  }
+
+  .wac-button i {
+    color: $wac-white;
+  }
+}
 .wac-alert-popup {
   .alert {
     z-index: 999999;
@@ -372,74 +440,6 @@ $wac-link-active: #38A3F1!default;
   }
 
 }
-.wac-alert {
-  width: 100%;
-  background-color: transparentize($wac-link-color, 0.85);
-  color: $wac-link-color;
-  border-radius: 3px;
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  padding: 20px;
-  &.success {
-    background-color: transparentize($wac-green-color, 0.85);
-    p {
-      color: $wac-p-alert-color-success;
-      > * {
-        color: $wac-p-alert-color-success;
-      }
-    }
-    i {
-      color: $wac-green-color;
-    }
-  }
-  &.warning {
-    background-color: transparentize($wac-primary-button, 0.85);
-    p {
-      color: $wac-p-alert-color-warning;
-      > * {
-        color: $wac-p-alert-color-warning;
-      }
-    }
-    i {
-      color: $wac-primary-button;
-    }
-  }
-  &.alert {
-    background-color: transparentize($wac-orange-color, 0.85);
-    p {
-      color: $wac-p-alert-color-alert;
-      > * {
-        color: $wac-p-alert-color-alert;
-      }
-    }
-    i {
-      color: $wac-orange-color;
-    }
-  }
-  p {
-    width: 100%;
-    font-size: rem(14);
-    line-height: rem(25);
-    margin: 0;
-    padding: 0;
-    color: $wac-p-alert-color-default;
-    > * {
-      color: $wac-p-alert-color-default;
-    }
-  }
-  i {
-    width: auto;
-    margin: 0 10px 0 0;
-    color: inherit;
-    font-size: rem(14);
-    line-height: rem(25);
-  }
-
-  .wac-button i {
-    color: $wac-white;
-  }
-}
 .wac-back {
   width: 40px;
   height: 40px;

package/esm2020/lib/components/tree/tree.component.mjs

@@ -4,18 +4,21 @@ import * as i1 from "@angular/common";
 export class TreeComponent {
     constructor() {
         this.treeDepth = 0;
+        this.tackByFn = (index, item) => item;
     }
 }
 TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TreeComponent, selector: "wac-tree", inputs: { items: "items", treeDepth: "treeDepth", optionTemplate: "optionTemplate" }, ngImport: i0, template: "<ul [ngClass]=\"['treeDepth-' + treeDepth]\">\n   <li *ngFor=\"let item of items; let index = index\">\n\n    <ng-template #defaultItem>\n      {{ item?.treeLabel }}\n    </ng-template>\n\n    <ng-container\n      [ngTemplateOutlet]=\"optionTemplate || defaultItem\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n    >\n    </ng-container>\n\n    <wac-tree [optionTemplate]=\"optionTemplate\" [items]=\"item.treeChildren\" *ngIf=\"item.treeChildren?.length\" [treeDepth]=\"treeDepth + 1\"></wac-tree>\n   </li>\n</ul>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: TreeComponent, selector: "wac-tree", inputs: ["items", "treeDepth", "optionTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TreeComponent, selector: "wac-tree", inputs: { items: "items", treeDepth: "treeDepth", optionTemplate: "optionTemplate", tackByFn: "tackByFn" }, ngImport: i0, template: "<ul [ngClass]=\"['treeDepth-' + treeDepth]\">\n   <li *ngFor=\"let item of items; let index = index; trackBy: tackByFn\">\n\n    <ng-template #defaultItem>\n      {{ item?.treeLabel }}\n    </ng-template>\n\n    <ng-container\n      [ngTemplateOutlet]=\"optionTemplate || defaultItem\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n    >\n    </ng-container>\n\n    <wac-tree [optionTemplate]=\"optionTemplate\" [items]=\"item.treeChildren\" *ngIf=\"item.treeChildren?.length\" [treeDepth]=\"treeDepth + 1\"></wac-tree>\n   </li>\n</ul>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: TreeComponent, selector: "wac-tree", inputs: ["items", "treeDepth", "optionTemplate", "tackByFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ul [ngClass]=\"['treeDepth-' + treeDepth]\">\n   <li *ngFor=\"let item of items; let index = index\">\n\n    <ng-template #defaultItem>\n      {{ item?.treeLabel }}\n    </ng-template>\n\n    <ng-container\n      [ngTemplateOutlet]=\"optionTemplate || defaultItem\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n    >\n    </ng-container>\n\n    <wac-tree [optionTemplate]=\"optionTemplate\" [items]=\"item.treeChildren\" *ngIf=\"item.treeChildren?.length\" [treeDepth]=\"treeDepth + 1\"></wac-tree>\n   </li>\n</ul>" }]
+            args: [{ selector: 'wac-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ul [ngClass]=\"['treeDepth-' + treeDepth]\">\n   <li *ngFor=\"let item of items; let index = index; trackBy: tackByFn\">\n\n    <ng-template #defaultItem>\n      {{ item?.treeLabel }}\n    </ng-template>\n\n    <ng-container\n      [ngTemplateOutlet]=\"optionTemplate || defaultItem\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n    >\n    </ng-container>\n\n    <wac-tree [optionTemplate]=\"optionTemplate\" [items]=\"item.treeChildren\" *ngIf=\"item.treeChildren?.length\" [treeDepth]=\"treeDepth + 1\"></wac-tree>\n   </li>\n</ul>" }]
         }], propDecorators: { items: [{
                 type: Input
             }], treeDepth: [{
                 type: Input
             }], optionTemplate: [{
                 type: Input
+            }], tackByFn: [{
+                type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3RyZWUvdHJlZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3RyZWUvdHJlZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBZSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBUzFHLE1BQU0sT0FBTyxhQUFhO0lBUDFCO1FBZ0JXLGNBQVMsR0FBVSxDQUFDLENBQUM7S0FHL0I7OzBHQVpZLGFBQWE7OEZBQWIsYUFBYSxzSUNUMUIsaWlCQWVLLGtoQkROUSxhQUFhOzJGQUFiLGFBQWE7a0JBUHpCLFNBQVM7K0JBQ0UsVUFBVSxtQkFFSCx1QkFBdUIsQ0FBQyxNQUFNLGlCQUNoQyxpQkFBaUIsQ0FBQyxJQUFJOzhCQVc1QixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQsIFRlbXBsYXRlUmVmLCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd3YWMtdHJlZScsXG4gIHRlbXBsYXRlVXJsOiAndHJlZS5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcblxuZXhwb3J0IGNsYXNzIFRyZWVDb21wb25lbnQge1xuXG4gIC8vIGh0dHBzOi8vaW5kZXB0aC5kZXYvcG9zdHMvMTQwNS9uZ3RlbXBsYXRlb3V0bGV0XG5cblxuICAvKipcbiAgICohIGl0ZW1zIHNvdWxkIGluY2x1ZGUgUmVjdXJzaWZEdG8gaW50ZXJmYWNlXG4gICAqL1xuICBASW5wdXQoKSBpdGVtczogYW55W107XG4gIEBJbnB1dCgpIHRyZWVEZXB0aDpudW1iZXIgPSAwO1xuICBASW5wdXQoKSBvcHRpb25UZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcblxufSIsIjx1bCBbbmdDbGFzc109XCJbJ3RyZWVEZXB0aC0nICsgdHJlZURlcHRoXVwiPlxuICAgPGxpICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zOyBsZXQgaW5kZXggPSBpbmRleFwiPlxuXG4gICAgPG5nLXRlbXBsYXRlICNkZWZhdWx0SXRlbT5cbiAgICAgIHt7IGl0ZW0/LnRyZWVMYWJlbCB9fVxuICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICA8bmctY29udGFpbmVyXG4gICAgICBbbmdUZW1wbGF0ZU91dGxldF09XCJvcHRpb25UZW1wbGF0ZSB8fCBkZWZhdWx0SXRlbVwiXG4gICAgICBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwieyAkaW1wbGljaXQ6IGl0ZW0sIGluZGV4OiBpbmRleCB9XCJcbiAgICA+XG4gICAgPC9uZy1jb250YWluZXI+XG5cbiAgICA8d2FjLXRyZWUgW29wdGlvblRlbXBsYXRlXT1cIm9wdGlvblRlbXBsYXRlXCIgW2l0ZW1zXT1cIml0ZW0udHJlZUNoaWxkcmVuXCIgKm5nSWY9XCJpdGVtLnRyZWVDaGlsZHJlbj8ubGVuZ3RoXCIgW3RyZWVEZXB0aF09XCJ0cmVlRGVwdGggKyAxXCI+PC93YWMtdHJlZT5cbiAgIDwvbGk+XG48L3VsPiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3RyZWUvdHJlZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3RyZWUvdHJlZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBZSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBVTFHLE1BQU0sT0FBTyxhQUFhO0lBUDFCO1FBZ0JXLGNBQVMsR0FBVSxDQUFDLENBQUM7UUFFckIsYUFBUSxHQUF1QyxDQUFDLEtBQUssRUFBRSxJQUFJLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQztLQUUvRTs7MEdBYlksYUFBYTs4RkFBYixhQUFhLDRKQ1YxQixvakJBZUssa2hCRExRLGFBQWE7MkZBQWIsYUFBYTtrQkFQekIsU0FBUzsrQkFDRSxVQUFVLG1CQUVILHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUk7OEJBVzVCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0LCBUZW1wbGF0ZVJlZiwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFJlY3Vyc2lmRHRvLCBUcmVlRHRvIH0gZnJvbSAnLi90cmVlLmR0byc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3dhYy10cmVlJyxcbiAgdGVtcGxhdGVVcmw6ICd0cmVlLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuXG5leHBvcnQgY2xhc3MgVHJlZUNvbXBvbmVudDxUcmVlIGV4dGVuZHMgUmVjdXJzaWZEdG88VHJlZT4+IHtcblxuICAvLyBodHRwczovL2luZGVwdGguZGV2L3Bvc3RzLzE0MDUvbmd0ZW1wbGF0ZW91dGxldFxuXG5cbiAgLyoqXG4gICAqISBpdGVtcyBzb3VsZCBpbmNsdWRlIFJlY3Vyc2lmRHRvIGludGVyZmFjZVxuICAgKi9cbiAgQElucHV0KCkgaXRlbXM6IFRyZWVbXTtcbiAgQElucHV0KCkgdHJlZURlcHRoOm51bWJlciA9IDA7XG4gIEBJbnB1dCgpIG9wdGlvblRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICBASW5wdXQoKSB0YWNrQnlGbjogKGluZGV4OiBudW1iZXIsIGl0ZW06IFRyZWUpID0+IGFueSA9IChpbmRleCwgaXRlbSkgPT4gaXRlbTtcblxufSIsIjx1bCBbbmdDbGFzc109XCJbJ3RyZWVEZXB0aC0nICsgdHJlZURlcHRoXVwiPlxuICAgPGxpICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zOyBsZXQgaW5kZXggPSBpbmRleDsgdHJhY2tCeTogdGFja0J5Rm5cIj5cblxuICAgIDxuZy10ZW1wbGF0ZSAjZGVmYXVsdEl0ZW0+XG4gICAgICB7eyBpdGVtPy50cmVlTGFiZWwgfX1cbiAgICA8L25nLXRlbXBsYXRlPlxuXG4gICAgPG5nLWNvbnRhaW5lclxuICAgICAgW25nVGVtcGxhdGVPdXRsZXRdPVwib3B0aW9uVGVtcGxhdGUgfHwgZGVmYXVsdEl0ZW1cIlxuICAgICAgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cInsgJGltcGxpY2l0OiBpdGVtLCBpbmRleDogaW5kZXggfVwiXG4gICAgPlxuICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgPHdhYy10cmVlIFtvcHRpb25UZW1wbGF0ZV09XCJvcHRpb25UZW1wbGF0ZVwiIFtpdGVtc109XCJpdGVtLnRyZWVDaGlsZHJlblwiICpuZ0lmPVwiaXRlbS50cmVlQ2hpbGRyZW4/Lmxlbmd0aFwiIFt0cmVlRGVwdGhdPVwidHJlZURlcHRoICsgMVwiPjwvd2FjLXRyZWU+XG4gICA8L2xpPlxuPC91bD4iXX0=

package/esm2020/lib/components/tree/tree.dto.mjs

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZS5kdG8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3RyZWUvdHJlZS5kdG8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgVHJlZUR0byBleHRlbmRzIFJlY3Vyc2lmRHRvPFRyZWVEdG8+IHtcbiAgICB0cmVlTGFiZWw6IHN0cmluZztcbn1cbmV4cG9ydCBpbnRlcmZhY2UgUmVjdXJzaWZEdG88VD4ge1xuICAgIHRyZWVEZXB0aDogbnVtYmVyO1xuICAgIGhhc1RyZWVDaGlsZHJlbjogYm9vbGVhbjtcbiAgICB0cmVlQ2hpbGRyZW4/OiBBcnJheTxUPjtcbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZS5kdG8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3RyZWUvdHJlZS5kdG8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgVHJlZUR0byBleHRlbmRzIFJlY3Vyc2lmRHRvPFRyZWVEdG8+IHtcbn1cbmV4cG9ydCBpbnRlcmZhY2UgUmVjdXJzaWZEdG88VD4ge1xuICAgIHRyZWVEZXB0aDogbnVtYmVyO1xuICAgIGhhc1RyZWVDaGlsZHJlbjogYm9vbGVhbjtcbiAgICB0cmVlQ2hpbGRyZW4/OiBBcnJheTxUPjtcbiAgICB0cmVlTGFiZWw/OiBzdHJpbmc7XG59XG4iXX0=

package/fesm2015/wizishop-angular-components.mjs

@@ -4528,19 +4528,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
 class TreeComponent {
     constructor() {
         this.treeDepth = 0;
+        this.tackByFn = (index, item) => item;
     }
 }
 TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TreeComponent, selector: "wac-tree", inputs: { items: "items", treeDepth: "treeDepth", optionTemplate: "optionTemplate" }, ngImport: i0, template: "<ul [ngClass]=\"['treeDepth-' + treeDepth]\">\n   <li *ngFor=\"let item of items; let index = index\">\n\n    <ng-template #defaultItem>\n      {{ item?.treeLabel }}\n    </ng-template>\n\n    <ng-container\n      [ngTemplateOutlet]=\"optionTemplate || defaultItem\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n    >\n    </ng-container>\n\n    <wac-tree [optionTemplate]=\"optionTemplate\" [items]=\"item.treeChildren\" *ngIf=\"item.treeChildren?.length\" [treeDepth]=\"treeDepth + 1\"></wac-tree>\n   </li>\n</ul>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: TreeComponent, selector: "wac-tree", inputs: ["items", "treeDepth", "optionTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TreeComponent, selector: "wac-tree", inputs: { items: "items", treeDepth: "treeDepth", optionTemplate: "optionTemplate", tackByFn: "tackByFn" }, ngImport: i0, template: "<ul [ngClass]=\"['treeDepth-' + treeDepth]\">\n   <li *ngFor=\"let item of items; let index = index; trackBy: tackByFn\">\n\n    <ng-template #defaultItem>\n      {{ item?.treeLabel }}\n    </ng-template>\n\n    <ng-container\n      [ngTemplateOutlet]=\"optionTemplate || defaultItem\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n    >\n    </ng-container>\n\n    <wac-tree [optionTemplate]=\"optionTemplate\" [items]=\"item.treeChildren\" *ngIf=\"item.treeChildren?.length\" [treeDepth]=\"treeDepth + 1\"></wac-tree>\n   </li>\n</ul>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: TreeComponent, selector: "wac-tree", inputs: ["items", "treeDepth", "optionTemplate", "tackByFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ul [ngClass]=\"['treeDepth-' + treeDepth]\">\n   <li *ngFor=\"let item of items; let index = index\">\n\n    <ng-template #defaultItem>\n      {{ item?.treeLabel }}\n    </ng-template>\n\n    <ng-container\n      [ngTemplateOutlet]=\"optionTemplate || defaultItem\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n    >\n    </ng-container>\n\n    <wac-tree [optionTemplate]=\"optionTemplate\" [items]=\"item.treeChildren\" *ngIf=\"item.treeChildren?.length\" [treeDepth]=\"treeDepth + 1\"></wac-tree>\n   </li>\n</ul>" }]
+            args: [{ selector: 'wac-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ul [ngClass]=\"['treeDepth-' + treeDepth]\">\n   <li *ngFor=\"let item of items; let index = index; trackBy: tackByFn\">\n\n    <ng-template #defaultItem>\n      {{ item?.treeLabel }}\n    </ng-template>\n\n    <ng-container\n      [ngTemplateOutlet]=\"optionTemplate || defaultItem\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n    >\n    </ng-container>\n\n    <wac-tree [optionTemplate]=\"optionTemplate\" [items]=\"item.treeChildren\" *ngIf=\"item.treeChildren?.length\" [treeDepth]=\"treeDepth + 1\"></wac-tree>\n   </li>\n</ul>" }]
         }], propDecorators: { items: [{
                 type: Input
             }], treeDepth: [{
                 type: Input
             }], optionTemplate: [{
                 type: Input
+            }], tackByFn: [{
+                type: Input
             }] } });
 
 class FormatObjectToRecursifTreePipe {