@colijnit/extendedcomponents 12.0.8 → 12.0.10

package/bundles/colijnit-extendedcomponents.umd.js

@@ -1267,6 +1267,7 @@
           this.depth = 0;
           this.indentation = 10;
           this.dataPipe = null;
+          this.dataPointClicked = new i0.EventEmitter();
       }
       RecursiveListComponent.prototype.toggleCollapse = function (event, item) {
           event.stopPropagation(); // Stop event propagation here
@@ -1286,15 +1287,18 @@
               return dataValue.toString(); // No formatting needed
           }
       };
+      RecursiveListComponent.prototype.handleDataPointClicked = function (event) {
+          this.dataPointClicked.emit(event);
+      };
       return RecursiveListComponent;
   }());
   RecursiveListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RecursiveListComponent, deps: [{ token: IconCacheService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  RecursiveListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RecursiveListComponent, selector: "co-recursive-list", inputs: { collection: "collection", columns: "columns", subColumns: "subColumns", tableLegend: "tableLegend", depth: "depth", indentation: "indentation", dataPipe: "dataPipe", params: "params" }, ngImport: i0__namespace, template: "\n    <div class=\"co-recursive-list\">\n      <div class=\"table-header-row\">\n        <div class=\"table-legend\" *ngIf=\"tableLegend.length > 1\">\n          <span [textContent]=\"tableLegend | localize\"></span>\n        </div>\n        <div class=\"table-header\" *ngIf=\"columns && columns.length > 0\">\n          <div class=\"table-row\">\n            <div class=\"table-cell\" *ngFor=\"let column of columns\">\n              <span [textContent]=\"formatDataValue(column) | localize\"></span>\n            </div>\n          </div>\n          <div class=\"table-row\" *ngIf=\"subColumns && subColumns.length > 0\">\n            <div class=\"table-cell\" *ngFor=\"let column of subColumns\">\n              <span [textContent]=\"formatDataValue(column)\"></span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"tree-node\" [class.background]=\"depth === 0\" *ngFor=\"let item of collection\" (click)=\"toggleCollapse($event, item)\">\n        <div class=\"table-row\">\n          <div class=\"table-cell node-text-icon\" [ngStyle]=\"{'padding-left.px' : indentation}\">\n            <co-icon *ngIf=\"item.children && item.children.length > 0\" [iconData]=\"iconCacheService.getIcon(getCurrentIcon(item))\"></co-icon>\n            <span [textContent]=\"item.name\"></span>\n          </div>\n          <div class=\"table-cell data-points\">\n            <div *ngFor=\"let dataPoint of item.data\" class=\"custom-property\">\n              <span [textContent]=\"formatDataValue(dataPoint, params)\"></span>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngIf=\"item.children && item.children.length > 0 && item.expanded\">\n          <co-recursive-list [dataPipe]=\"dataPipe\" [collection]=\"item.children\" [depth]=\"depth + 1\" [indentation]=\"indentation + 20\" [params]=\"params\"></co-recursive-list>\n        </ng-container>\n      </div>\n    </div>\n  ", isInline: true, components: [{ type: i2__namespace.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: RecursiveListComponent, selector: "co-recursive-list", inputs: ["collection", "columns", "subColumns", "tableLegend", "depth", "indentation", "dataPipe", "params"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "localize": LocalizePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  RecursiveListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RecursiveListComponent, selector: "co-recursive-list", inputs: { collection: "collection", columns: "columns", subColumns: "subColumns", tableLegend: "tableLegend", depth: "depth", indentation: "indentation", dataPipe: "dataPipe", params: "params" }, outputs: { dataPointClicked: "dataPointClicked" }, ngImport: i0__namespace, template: "\n    <div class=\"co-recursive-list\">\n      <div class=\"table-header-row\">\n        <div class=\"table-legend\" *ngIf=\"tableLegend.length > 1\">\n          <span [textContent]=\"tableLegend | localize\"></span>\n        </div>\n        <div class=\"table-header\" *ngIf=\"columns && columns.length > 0\">\n          <div class=\"table-row\">\n            <div class=\"table-cell\" *ngFor=\"let column of columns\">\n              <span [textContent]=\"formatDataValue(column) | localize\"></span>\n            </div>\n          </div>\n          <div class=\"table-row\" *ngIf=\"subColumns && subColumns.length > 0\">\n            <div class=\"table-cell\" *ngFor=\"let column of subColumns\">\n              <span [textContent]=\"formatDataValue(column)\"></span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"tree-node\" [class.background]=\"depth === 0\" *ngFor=\"let item of collection\" (click)=\"toggleCollapse($event, item)\">\n        <div class=\"table-row\">\n          <div class=\"table-cell node-text-icon\" [ngStyle]=\"{'padding-left.px' : indentation}\">\n            <co-icon *ngIf=\"item.children && item.children.length > 0\" [iconData]=\"iconCacheService.getIcon(getCurrentIcon(item))\"></co-icon>\n            <span (click)=\"handleDataPointClicked(item.name)\" [textContent]=\"item.name\"></span>\n          </div>\n          <div class=\"table-cell data-points\">\n            <div *ngFor=\"let dataPoint of item.data\" class=\"custom-property\">\n              <span [textContent]=\"formatDataValue(dataPoint, params)\"></span>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngIf=\"item.children && item.children.length > 0 && item.expanded\">\n          <co-recursive-list [dataPipe]=\"dataPipe\" [collection]=\"item.children\" [depth]=\"depth + 1\" [indentation]=\"indentation + 20\" [params]=\"params\" (dataPointClicked)=\"handleDataPointClicked($event)\"></co-recursive-list>\n        </ng-container>\n      </div>\n    </div>\n  ", isInline: true, components: [{ type: i2__namespace.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: RecursiveListComponent, selector: "co-recursive-list", inputs: ["collection", "columns", "subColumns", "tableLegend", "depth", "indentation", "dataPipe", "params"], outputs: ["dataPointClicked"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "localize": LocalizePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RecursiveListComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: 'co-recursive-list',
-                      template: "\n    <div class=\"co-recursive-list\">\n      <div class=\"table-header-row\">\n        <div class=\"table-legend\" *ngIf=\"tableLegend.length > 1\">\n          <span [textContent]=\"tableLegend | localize\"></span>\n        </div>\n        <div class=\"table-header\" *ngIf=\"columns && columns.length > 0\">\n          <div class=\"table-row\">\n            <div class=\"table-cell\" *ngFor=\"let column of columns\">\n              <span [textContent]=\"formatDataValue(column) | localize\"></span>\n            </div>\n          </div>\n          <div class=\"table-row\" *ngIf=\"subColumns && subColumns.length > 0\">\n            <div class=\"table-cell\" *ngFor=\"let column of subColumns\">\n              <span [textContent]=\"formatDataValue(column)\"></span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"tree-node\" [class.background]=\"depth === 0\" *ngFor=\"let item of collection\" (click)=\"toggleCollapse($event, item)\">\n        <div class=\"table-row\">\n          <div class=\"table-cell node-text-icon\" [ngStyle]=\"{'padding-left.px' : indentation}\">\n            <co-icon *ngIf=\"item.children && item.children.length > 0\" [iconData]=\"iconCacheService.getIcon(getCurrentIcon(item))\"></co-icon>\n            <span [textContent]=\"item.name\"></span>\n          </div>\n          <div class=\"table-cell data-points\">\n            <div *ngFor=\"let dataPoint of item.data\" class=\"custom-property\">\n              <span [textContent]=\"formatDataValue(dataPoint, params)\"></span>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngIf=\"item.children && item.children.length > 0 && item.expanded\">\n          <co-recursive-list [dataPipe]=\"dataPipe\" [collection]=\"item.children\" [depth]=\"depth + 1\" [indentation]=\"indentation + 20\" [params]=\"params\"></co-recursive-list>\n        </ng-container>\n      </div>\n    </div>\n  ",
+                      template: "\n    <div class=\"co-recursive-list\">\n      <div class=\"table-header-row\">\n        <div class=\"table-legend\" *ngIf=\"tableLegend.length > 1\">\n          <span [textContent]=\"tableLegend | localize\"></span>\n        </div>\n        <div class=\"table-header\" *ngIf=\"columns && columns.length > 0\">\n          <div class=\"table-row\">\n            <div class=\"table-cell\" *ngFor=\"let column of columns\">\n              <span [textContent]=\"formatDataValue(column) | localize\"></span>\n            </div>\n          </div>\n          <div class=\"table-row\" *ngIf=\"subColumns && subColumns.length > 0\">\n            <div class=\"table-cell\" *ngFor=\"let column of subColumns\">\n              <span [textContent]=\"formatDataValue(column)\"></span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"tree-node\" [class.background]=\"depth === 0\" *ngFor=\"let item of collection\" (click)=\"toggleCollapse($event, item)\">\n        <div class=\"table-row\">\n          <div class=\"table-cell node-text-icon\" [ngStyle]=\"{'padding-left.px' : indentation}\">\n            <co-icon *ngIf=\"item.children && item.children.length > 0\" [iconData]=\"iconCacheService.getIcon(getCurrentIcon(item))\"></co-icon>\n            <span (click)=\"handleDataPointClicked(item.name)\" [textContent]=\"item.name\"></span>\n          </div>\n          <div class=\"table-cell data-points\">\n            <div *ngFor=\"let dataPoint of item.data\" class=\"custom-property\">\n              <span [textContent]=\"formatDataValue(dataPoint, params)\"></span>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngIf=\"item.children && item.children.length > 0 && item.expanded\">\n          <co-recursive-list [dataPipe]=\"dataPipe\" [collection]=\"item.children\" [depth]=\"depth + 1\" [indentation]=\"indentation + 20\" [params]=\"params\" (dataPointClicked)=\"handleDataPointClicked($event)\"></co-recursive-list>\n        </ng-container>\n      </div>\n    </div>\n  ",
                       encapsulation: i0.ViewEncapsulation.None,
                   }]
           }], ctorParameters: function () { return [{ type: IconCacheService }]; }, propDecorators: { collection: [{
@@ -1313,79 +1317,30 @@
                   type: i0.Input
               }], params: [{
                   type: i0.Input
+              }], dataPointClicked: [{
+                  type: i0.Output
               }] } });
 
   // summary-grid.component.ts
   var SummaryGridComponent = /** @class */ (function () {
       function SummaryGridComponent() {
           this.showClass = true;
-          this.columns = ['Column1', 'Column2']; // Add your column headers here
-          this.subColumns = ['SubColumn1', 'SubColumn2']; // Add your column headers here
-          this.tableLegend = "Legend";
+          this.columns = [];
+          this.subColumns = [];
+          this.tableLegend = "";
           this.dataPipe = null;
-          this.collection = [
-              {
-                  name: 'Root 1',
-                  expanded: false,
-                  data: [1, 2],
-                  children: [
-                      {
-                          name: 'Child 1.1',
-                          expanded: false,
-                          data: [3, 4],
-                          children: [
-                              {
-                                  name: 'Grandchild 1.1.1',
-                                  expanded: false,
-                                  data: [5, 6],
-                              },
-                              {
-                                  name: 'Grandchild 1.1.2',
-                                  expanded: false,
-                                  data: [7, 0],
-                              },
-                          ],
-                      },
-                      // ... other nodes
-                  ],
-              },
-              {
-                  name: 'Root 2',
-                  expanded: false,
-                  data: [9, 10],
-                  children: [
-                      {
-                          name: 'Child 2.1',
-                          expanded: false,
-                          data: [11, 12],
-                          children: [
-                              {
-                                  name: 'Grandchild 2.1.1',
-                                  expanded: false,
-                                  data: [13, 14],
-                              },
-                              {
-                                  name: 'Grandchild 2.1.2',
-                                  expanded: false,
-                                  data: [15, 16],
-                              },
-                          ],
-                      },
-                      // ... other nodes
-                  ],
-              },
-              // ... other root nodes
-          ];
+          this.collection = [];
+          this.dataPointClickedEvent = new i0.EventEmitter();
       }
       return SummaryGridComponent;
   }());
   SummaryGridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SummaryGridComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  SummaryGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SummaryGridComponent, selector: "co-summary-grid", inputs: { columns: "columns", subColumns: "subColumns", tableLegend: "tableLegend", dataPipe: "dataPipe", params: "params", collection: "collection" }, host: { properties: { "class.co-summary-grid": "this.showClass" } }, ngImport: i0__namespace, template: "\n    <co-recursive-list\n      [collection]=\"collection\"\n      [columns]=\"columns\"\n      [subColumns]=\"subColumns\"\n      [tableLegend]=\"tableLegend\"\n      [dataPipe]=\"dataPipe\"\n      [params]=\"params\"\n    ></co-recursive-list>\n  ", isInline: true, components: [{ type: RecursiveListComponent, selector: "co-recursive-list", inputs: ["collection", "columns", "subColumns", "tableLegend", "depth", "indentation", "dataPipe", "params"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+  SummaryGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SummaryGridComponent, selector: "co-summary-grid", inputs: { columns: "columns", subColumns: "subColumns", tableLegend: "tableLegend", dataPipe: "dataPipe", params: "params", collection: "collection" }, outputs: { dataPointClickedEvent: "dataPointClickedEvent" }, host: { properties: { "class.co-summary-grid": "this.showClass" } }, ngImport: i0__namespace, template: "\n    <co-recursive-list\n      [collection]=\"collection\"\n      [columns]=\"columns\"\n      [subColumns]=\"subColumns\"\n      [tableLegend]=\"tableLegend\"\n      [dataPipe]=\"dataPipe\"\n      [params]=\"params\"\n      (dataPointClicked)=\"dataPointClickedEvent.emit($event)\"\n    ></co-recursive-list>\n  ", isInline: true, components: [{ type: RecursiveListComponent, selector: "co-recursive-list", inputs: ["collection", "columns", "subColumns", "tableLegend", "depth", "indentation", "dataPipe", "params"], outputs: ["dataPointClicked"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SummaryGridComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: 'co-summary-grid',
-                      template: "\n    <co-recursive-list\n      [collection]=\"collection\"\n      [columns]=\"columns\"\n      [subColumns]=\"subColumns\"\n      [tableLegend]=\"tableLegend\"\n      [dataPipe]=\"dataPipe\"\n      [params]=\"params\"\n    ></co-recursive-list>\n  ",
+                      template: "\n    <co-recursive-list\n      [collection]=\"collection\"\n      [columns]=\"columns\"\n      [subColumns]=\"subColumns\"\n      [tableLegend]=\"tableLegend\"\n      [dataPipe]=\"dataPipe\"\n      [params]=\"params\"\n      (dataPointClicked)=\"dataPointClickedEvent.emit($event)\"\n    ></co-recursive-list>\n  ",
                       encapsulation: i0.ViewEncapsulation.None,
                   }]
           }], propDecorators: { showClass: [{
@@ -1403,6 +1358,8 @@
                   type: i0.Input
               }], collection: [{
                   type: i0.Input
+              }], dataPointClickedEvent: [{
+                  type: i0.Output
               }] } });
 
   var ExtendedComponentsTranslationService = /** @class */ (function () {