@clr/angular 16.5.3 → 16.5.4

package/fesm2015/clr-angular.mjs

@@ -13467,6 +13467,19 @@ var ClrDatagridSortOrder;
     ClrDatagridSortOrder[ClrDatagridSortOrder["DESC"] = -1] = "DESC";
 })(ClrDatagridSortOrder || (ClrDatagridSortOrder = {}));
 
+/*
+ * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+// @TODO The top two are not used now, which is probably a performance drag that was broken along the way.
+// There was a previous pattern to hide everything to do computation then display, for Firefox, needs revisiting.
+const NO_LAYOUT_CLASS = 'datagrid-no-layout';
+const COMPUTE_WIDTH_CLASS = 'datagrid-computing-columns-width';
+const STRICT_WIDTH_CLASS = 'datagrid-fixed-width';
+const HIDDEN_COLUMN_CLASS = 'datagrid-hidden-column';
+
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -13905,15 +13918,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrDatagridColumn extends DatagridFilterRegistrar {
-    constructor(_sort, filters, vcr, detailService, changeDetectorRef) {
+    constructor(el, _sort, filters, vcr, detailService, changeDetectorRef) {
         super(filters);
+        this.el = el;
         this._sort = _sort;
         this.vcr = vcr;
         this.detailService = detailService;
         this.changeDetectorRef = changeDetectorRef;
         this.sortOrderChange = new EventEmitter();
         this.filterValueChange = new EventEmitter();
-        this.showSeparator = true;
         /**
          * A custom filter for this column that can be provided in the projected content
          */
@@ -13932,9 +13945,20 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
          * Subscription to the sort service changes
          */
         this.subscriptions = [];
+        this._showSeparator = true;
         this.subscriptions.push(this.listenForSortingChanges());
         this.subscriptions.push(this.listenForDetailPaneChanges());
     }
+    get isHidden() {
+        return this.el.nativeElement.classList.contains(HIDDEN_COLUMN_CLASS);
+    }
+    get showSeparator() {
+        return this._showSeparator;
+    }
+    set showSeparator(value) {
+        this._showSeparator = value;
+        this.changeDetectorRef.markForCheck();
+    }
     // TODO: We might want to make this an enum in the future
     get colType() {
         return this._colType;
@@ -14110,8 +14134,6 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
         return this.detailService.stateChange.subscribe(state => {
             if (this.showSeparator !== !state) {
                 this.showSeparator = !state;
-                // Have to manually change because of OnPush
-                this.changeDetectorRef.markForCheck();
             }
         });
     }
@@ -14144,7 +14166,7 @@ class ClrDatagridColumn extends DatagridFilterRegistrar {
         }
     }
 }
-ClrDatagridColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridColumn, deps: [{ token: Sort }, { token: FiltersProvider }, { token: i0.ViewContainerRef }, { token: DetailService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatagridColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridColumn, deps: [{ token: i0.ElementRef }, { token: Sort }, { token: FiltersProvider }, { token: i0.ViewContainerRef }, { token: DetailService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ClrDatagridColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDatagridColumn, selector: "clr-dg-column", inputs: { filterStringPlaceholder: ["clrFilterStringPlaceholder", "filterStringPlaceholder"], filterNumberMaxPlaceholder: ["clrFilterNumberMaxPlaceholder", "filterNumberMaxPlaceholder"], filterNumberMinPlaceholder: ["clrFilterNumberMinPlaceholder", "filterNumberMinPlaceholder"], colType: ["clrDgColType", "colType"], field: ["clrDgField", "field"], sortBy: ["clrDgSortBy", "sortBy"], sortOrder: ["clrDgSortOrder", "sortOrder"], updateFilterValue: ["clrFilterValue", "updateFilterValue"] }, outputs: { sortOrderChange: "clrDgSortOrderChange", filterValueChange: "clrFilterValueChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.datagrid-column": "true", "attr.aria-sort": "ariaSort" } }, queries: [{ propertyName: "projectedFilter", first: true, predicate: CustomFilter, descendants: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: ClrPopoverHostDirective }], ngImport: i0, template: `
     <div class="datagrid-column-flex">
       <button class="datagrid-column-title" *ngIf="sortable" (click)="sort()" type="button">
@@ -14239,7 +14261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: Sort }, { type: FiltersProvider }, { type: i0.ViewContainerRef }, { type: DetailService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filterStringPlaceholder: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Sort }, { type: FiltersProvider }, { type: i0.ViewContainerRef }, { type: DetailService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filterStringPlaceholder: [{
                 type: Input,
                 args: ['clrFilterStringPlaceholder']
             }], filterNumberMaxPlaceholder: [{
@@ -15845,19 +15867,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: FiltersProvider }, { type: Sort }, { type: Page }, { type: StateDebouncer }]; } });
 
-/*
- * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-// @TODO The top two are not used now, which is probably a performance drag that was broken along the way.
-// There was a previous pattern to hide everything to do computation then display, for Firefox, needs revisiting.
-const NO_LAYOUT_CLASS = 'datagrid-no-layout';
-const COMPUTE_WIDTH_CLASS = 'datagrid-computing-columns-width';
-const STRICT_WIDTH_CLASS = 'datagrid-fixed-width';
-const HIDDEN_COLUMN_CLASS = 'datagrid-hidden-column';
-
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
  * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
@@ -15958,7 +15967,7 @@ class DatagridRowRenderer {
     }
 }
 DatagridRowRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridRowRenderer, deps: [{ token: ColumnsService }], target: i0.ɵɵFactoryTarget.Directive });
-DatagridRowRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: DatagridRowRenderer, selector: "clr-dg-row, clr-dg-row-detail", queries: [{ propertyName: "cells", predicate: DatagridCellRenderer }], ngImport: i0 });
+DatagridRowRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: DatagridRowRenderer, selector: "clr-dg-row, clr-dg-row-detail", queries: [{ propertyName: "expandableRow", first: true, predicate: i0.forwardRef(function () { return DatagridRowRenderer; }), descendants: true }, { propertyName: "cells", predicate: DatagridCellRenderer }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridRowRenderer, decorators: [{
             type: Directive,
             args: [{
@@ -15967,6 +15976,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
         }], ctorParameters: function () { return [{ type: ColumnsService }]; }, propDecorators: { cells: [{
                 type: ContentChildren,
                 args: [DatagridCellRenderer]
+            }], expandableRow: [{
+                type: ContentChild,
+                args: [forwardRef(() => DatagridRowRenderer)]
             }] } });
 
 /*
@@ -18325,25 +18337,32 @@ class DatagridMainRenderer {
                     case DatagridColumnChanges.WIDTH:
                         this.headers.get(columnIndex).setWidth(state);
                         this.rows.forEach(row => {
+                            var _a, _b;
                             if ((row === null || row === void 0 ? void 0 : row.cells.length) === this.columnsService.columns.length) {
                                 row.cells.get(columnIndex).setWidth(state);
+                                (_b = (_a = row.expandableRow) === null || _a === void 0 ? void 0 : _a.cells.get(columnIndex)) === null || _b === void 0 ? void 0 : _b.setWidth(state);
                             }
                         });
                         break;
                     case DatagridColumnChanges.HIDDEN:
                         this.headers.get(columnIndex).setHidden(state);
                         this.rows.forEach(row => {
+                            var _a, _b;
                             if (row.cells && row.cells.length) {
                                 row.cells.get(columnIndex).setHidden(state);
+                                (_b = (_a = row.expandableRow) === null || _a === void 0 ? void 0 : _a.cells.get(columnIndex)) === null || _b === void 0 ? void 0 : _b.setHidden(state);
                             }
                         });
+                        this.updateColumnSeparatorsVisibility();
                         this.keyNavigation.resetKeyGrid();
                         break;
                     case DatagridColumnChanges.INITIALIZE:
                         if (state.hideable && state.hidden) {
                             this.headers.get(columnIndex).setHidden(state);
                             this.rows.forEach(row => {
+                                var _a;
                                 row.setCellsState();
+                                (_a = row.expandableRow) === null || _a === void 0 ? void 0 : _a.setCellsState();
                             });
                         }
                         break;
@@ -18378,9 +18397,20 @@ class DatagridMainRenderer {
             return false;
         }
     }
+    updateColumnSeparatorsVisibility() {
+        const visibleColumns = this.datagrid.columns.filter(column => !column.isHidden);
+        visibleColumns.forEach((column, index) => {
+            if (index === visibleColumns.length - 1) {
+                column.showSeparator = false;
+            }
+            else if (!column.showSeparator) {
+                column.showSeparator = true;
+            }
+        });
+    }
 }
 DatagridMainRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridMainRenderer, deps: [{ token: ClrDatagrid }, { token: DatagridRenderOrganizer }, { token: Items }, { token: Page }, { token: DomAdapter }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DetailService }, { token: TableSizeService }, { token: ColumnsService }, { token: i0.NgZone }, { token: KeyNavigationGridController }], target: i0.ɵɵFactoryTarget.Directive });
-DatagridMainRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: DatagridMainRenderer, selector: "clr-datagrid", providers: [{ provide: DomAdapter, useFactory: domAdapterFactory, deps: [PLATFORM_ID] }], queries: [{ propertyName: "headers", predicate: DatagridHeaderRenderer }, { propertyName: "rows", predicate: DatagridRowRenderer, descendants: true }], ngImport: i0 });
+DatagridMainRenderer.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: DatagridMainRenderer, selector: "clr-datagrid", providers: [{ provide: DomAdapter, useFactory: domAdapterFactory, deps: [PLATFORM_ID] }], queries: [{ propertyName: "headers", predicate: DatagridHeaderRenderer }, { propertyName: "rows", predicate: DatagridRowRenderer }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DatagridMainRenderer, decorators: [{
             type: Directive,
             args: [{
@@ -18392,7 +18422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 args: [DatagridHeaderRenderer]
             }], rows: [{
                 type: ContentChildren,
-                args: [DatagridRowRenderer, { descendants: true }]
+                args: [DatagridRowRenderer]
             }] } });
 
 /*