@elderbyte/ngx-starter 19.1.0-beta.29 → 19.1.0-beta.30

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -13278,11 +13278,11 @@ class ElderHeaderComponent {
      **************************************************************************/
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderHeaderComponent, isStandalone: true, selector: "elder-header", inputs: { header: "header", subheader: "subheader" }, ngImport: i0, template: "<div class=\"layout-col\">\n  <h2>{{ header ? header : ('-' | translate) }}</h2>\n  <span class=\"mat-caption\">{{ subheader ? subheader : ('-' | translate) }}</span>\n</div>\n", styles: ["h2{margin-top:0;font:var(--md-sys-typescale-title-large);letter-spacing:var(--md-sys-typescale-title-large-tracking)}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderHeaderComponent, isStandalone: true, selector: "elder-header", inputs: { header: "header", subheader: "subheader" }, ngImport: i0, template: "<div class=\"layout-col\">\n  <h2>{{ header ? header : ('-' | translate) }}</h2>\n  <span class=\"mat-caption\">{{ subheader ? subheader : ('-' | translate) }}</span>\n</div>\n", styles: ["h2{margin:0;font:var(--md-sys-typescale-title-large);letter-spacing:var(--md-sys-typescale-title-large-tracking)}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-header', imports: [TranslateModule], template: "<div class=\"layout-col\">\n  <h2>{{ header ? header : ('-' | translate) }}</h2>\n  <span class=\"mat-caption\">{{ subheader ? subheader : ('-' | translate) }}</span>\n</div>\n", styles: ["h2{margin-top:0;font:var(--md-sys-typescale-title-large);letter-spacing:var(--md-sys-typescale-title-large-tracking)}\n"] }]
+            args: [{ selector: 'elder-header', imports: [TranslateModule], template: "<div class=\"layout-col\">\n  <h2>{{ header ? header : ('-' | translate) }}</h2>\n  <span class=\"mat-caption\">{{ subheader ? subheader : ('-' | translate) }}</span>\n</div>\n", styles: ["h2{margin:0;font:var(--md-sys-typescale-title-large);letter-spacing:var(--md-sys-typescale-title-large-tracking)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { header: [{
                 type: Input
             }], subheader: [{
@@ -15760,7 +15760,7 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
         this.pageSizeOptions = [30, 50, 100, 150, 200];
         this.keepSelection = true;
         this.showFooter = false;
-        this.denseHorizontal = false;
+        this.denseHorizontal = input(false, { transform: (v) => booleanAttribute(v) });
         this.toolbarRowTemplates$ = new BehaviorSubject([]);
         /**
          * Gets the current rows of this table.
@@ -15921,13 +15921,13 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderTableComponent, deps: [{ token: ElderTableModel }, { token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i2$3.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: ElderTableComponent, isStandalone: true, selector: "elder-table", inputs: { idField: "idField", removingField: "removingField", hiddenField: "hiddenField", pageSizeOptions: "pageSizeOptions", keepSelection: "keepSelection", showFooter: "showFooter", denseHorizontal: "denseHorizontal", toolbarTemplate: "toolbarTemplate", data: "data", displayedColumns: "displayedColumns", selectionVisible: "selectionVisible" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: ElderTableComponent, isStandalone: true, selector: "elder-table", inputs: { idField: { classPropertyName: "idField", publicName: "idField", isSignal: false, isRequired: false, transformFunction: null }, removingField: { classPropertyName: "removingField", publicName: "removingField", isSignal: false, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: false, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: false, isRequired: false, transformFunction: null }, keepSelection: { classPropertyName: "keepSelection", publicName: "keepSelection", isSignal: false, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: false, isRequired: false, transformFunction: null }, denseHorizontal: { classPropertyName: "denseHorizontal", publicName: "denseHorizontal", isSignal: true, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, selectionVisible: { classPropertyName: "selectionVisible", publicName: "selectionVisible", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
             ElderTableProviders.ExistingOrNewTableModel,
             {
                 provide: ELDER_DATA_VIEW,
                 useExisting: forwardRef(() => ElderTableComponent),
             },
-        ], queries: [{ propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "elderColumns", predicate: ElderTableColumnDirective }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "toolbarRowTemplateQuery", predicate: ElderTableToolbarDirective, read: TemplateRef }], viewQueries: [{ propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates$ | async; track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(dataContext?.data | async) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dataContext$ | async)\"\n        [elderDataContextSelection]=\"dataContext$ | async\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n      >\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <div class=\"layout-row place-start-center\">\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selectionModel.toggle(entity) : null\"\n                [checked]=\"selectionModel.observeSelection(entity) | async\"\n                [disabled]=\"!selectionModel.isSelectable(entity)\"\n                class=\"elder-table-checkbox\"\n                [class.elder-table-checkbox-visible]=\"\n                  (dataSelection.selectionState$ | async).anySelected\n                \"\n              >\n              </mat-checkbox>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        @if (tableModel.displayedColumnsInner$ | async; as displayedColumnsInner) {\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          <tr\n            mat-row\n            class=\"elder-table-row\"\n            *matRowDef=\"let entity; columns: displayedColumnsInner\"\n            [elderTableRow]=\"entity\"\n            [class.dense]=\"dense\"\n            [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n            [class.elder-row-removing]=\"removingField && entity[removingField]\"\n            [class.elder-table-row-selected]=\"\n              interactionMode === 'selection' && selectionModel.observeSelection(entity) | async\n            \"\n            (click)=\"onItemClick(entity)\"\n            (dblclick)=\"onItemDoubleClick(entity)\"\n          ></tr>\n          @if (showFooter) {\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          }\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(dataContext?.data | async)) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n      [color]=\"(dataContext?.status | async)?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    @if (isActivePaged) {\n      @if (dataActivePaged.page | async; as page) {\n        <!-- Optional Paginator Toolbar -->\n        <mat-paginator\n          class=\"flex-none\"\n          [length]=\"dataContext?.total | async\"\n          [pageIndex]=\"page?.index\"\n          [pageSize]=\"page?.size\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n        >\n        </mat-paginator>\n      }\n    }\n\n    <!-- Optional Continuation Footer -->\n    @if (isContinuable) {\n      <div class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n        <span class=\"mat-caption noselect\" style=\"color: var(--md-sys-color-outline)\">\n          {{ (dataContext?.data | async)?.length }} / {{ total$ | async }}\n        </span>\n\n        <button\n          mat-icon-button\n          type=\"button\"\n          color=\"primary\"\n          [disabled]=\"!(canLoadMore$ | async)\"\n          (click)=\"dataContinuable.loadMore()\"\n        >\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow"], exportAs: ["elderTableRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "elderColumns", predicate: ElderTableColumnDirective }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "toolbarRowTemplateQuery", predicate: ElderTableToolbarDirective, read: TemplateRef }], viewQueries: [{ propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates$ | async; track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(dataContext?.data | async) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dataContext$ | async)\"\n        [elderDataContextSelection]=\"dataContext$ | async\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n      >\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <div class=\"layout-row place-start-center\">\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selectionModel.toggle(entity) : null\"\n                [checked]=\"selectionModel.observeSelection(entity) | async\"\n                [disabled]=\"!selectionModel.isSelectable(entity)\"\n                class=\"elder-table-checkbox\"\n                [class.elder-table-checkbox-visible]=\"\n                  (dataSelection.selectionState$ | async).anySelected\n                \"\n              >\n              </mat-checkbox>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        @if (tableModel.displayedColumnsInner$ | async; as displayedColumnsInner) {\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          <tr\n            mat-row\n            class=\"elder-table-row\"\n            *matRowDef=\"let entity; columns: displayedColumnsInner\"\n            [elderTableRow]=\"entity\"\n            [class.dense]=\"dense\"\n            [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n            [class.elder-row-removing]=\"removingField && entity[removingField]\"\n            [class.elder-table-row-selected]=\"\n              interactionMode === 'selection' && selectionModel.observeSelection(entity) | async\n            \"\n            (click)=\"onItemClick(entity)\"\n            (dblclick)=\"onItemDoubleClick(entity)\"\n          ></tr>\n          @if (showFooter) {\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          }\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(dataContext?.data | async)) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n      [color]=\"(dataContext?.status | async)?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    @if (isActivePaged) {\n      @if (dataActivePaged.page | async; as page) {\n        <!-- Optional Paginator Toolbar -->\n        <mat-paginator\n          class=\"flex-none\"\n          [length]=\"dataContext?.total | async\"\n          [pageIndex]=\"page?.index\"\n          [pageSize]=\"page?.size\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n        >\n        </mat-paginator>\n      }\n    }\n\n    <!-- Optional Continuation Footer -->\n    @if (isContinuable) {\n      <div class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n        <span class=\"mat-caption noselect\" style=\"color: var(--md-sys-color-outline)\">\n          {{ (dataContext?.data | async)?.length }} / {{ total$ | async }}\n        </span>\n\n        <button\n          mat-icon-button\n          type=\"button\"\n          color=\"primary\"\n          [disabled]=\"!(canLoadMore$ | async)\"\n          (click)=\"dataContinuable.loadMore()\"\n        >\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow"], exportAs: ["elderTableRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderTableComponent, decorators: [{
             type: Component,
@@ -15967,7 +15967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                         MatIconButton,
                         MatIcon,
                         AsyncPipe,
-                    ], template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates$ | async; track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(dataContext?.data | async) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dataContext$ | async)\"\n        [elderDataContextSelection]=\"dataContext$ | async\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n      >\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <div class=\"layout-row place-start-center\">\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selectionModel.toggle(entity) : null\"\n                [checked]=\"selectionModel.observeSelection(entity) | async\"\n                [disabled]=\"!selectionModel.isSelectable(entity)\"\n                class=\"elder-table-checkbox\"\n                [class.elder-table-checkbox-visible]=\"\n                  (dataSelection.selectionState$ | async).anySelected\n                \"\n              >\n              </mat-checkbox>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        @if (tableModel.displayedColumnsInner$ | async; as displayedColumnsInner) {\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          <tr\n            mat-row\n            class=\"elder-table-row\"\n            *matRowDef=\"let entity; columns: displayedColumnsInner\"\n            [elderTableRow]=\"entity\"\n            [class.dense]=\"dense\"\n            [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n            [class.elder-row-removing]=\"removingField && entity[removingField]\"\n            [class.elder-table-row-selected]=\"\n              interactionMode === 'selection' && selectionModel.observeSelection(entity) | async\n            \"\n            (click)=\"onItemClick(entity)\"\n            (dblclick)=\"onItemDoubleClick(entity)\"\n          ></tr>\n          @if (showFooter) {\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          }\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(dataContext?.data | async)) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n      [color]=\"(dataContext?.status | async)?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    @if (isActivePaged) {\n      @if (dataActivePaged.page | async; as page) {\n        <!-- Optional Paginator Toolbar -->\n        <mat-paginator\n          class=\"flex-none\"\n          [length]=\"dataContext?.total | async\"\n          [pageIndex]=\"page?.index\"\n          [pageSize]=\"page?.size\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n        >\n        </mat-paginator>\n      }\n    }\n\n    <!-- Optional Continuation Footer -->\n    @if (isContinuable) {\n      <div class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n        <span class=\"mat-caption noselect\" style=\"color: var(--md-sys-color-outline)\">\n          {{ (dataContext?.data | async)?.length }} / {{ total$ | async }}\n        </span>\n\n        <button\n          mat-icon-button\n          type=\"button\"\n          color=\"primary\"\n          [disabled]=\"!(canLoadMore$ | async)\"\n          (click)=\"dataContinuable.loadMore()\"\n        >\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}\n"] }]
+                    ], template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates$ | async; track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(dataContext?.data | async) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dataContext$ | async)\"\n        [elderDataContextSelection]=\"dataContext$ | async\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n      >\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <div class=\"layout-row place-start-center\">\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selectionModel.toggle(entity) : null\"\n                [checked]=\"selectionModel.observeSelection(entity) | async\"\n                [disabled]=\"!selectionModel.isSelectable(entity)\"\n                class=\"elder-table-checkbox\"\n                [class.elder-table-checkbox-visible]=\"\n                  (dataSelection.selectionState$ | async).anySelected\n                \"\n              >\n              </mat-checkbox>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        @if (tableModel.displayedColumnsInner$ | async; as displayedColumnsInner) {\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          <tr\n            mat-row\n            class=\"elder-table-row\"\n            *matRowDef=\"let entity; columns: displayedColumnsInner\"\n            [elderTableRow]=\"entity\"\n            [class.dense]=\"dense\"\n            [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n            [class.elder-row-removing]=\"removingField && entity[removingField]\"\n            [class.elder-table-row-selected]=\"\n              interactionMode === 'selection' && selectionModel.observeSelection(entity) | async\n            \"\n            (click)=\"onItemClick(entity)\"\n            (dblclick)=\"onItemDoubleClick(entity)\"\n          ></tr>\n          @if (showFooter) {\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          }\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(dataContext?.data | async)) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n      [color]=\"(dataContext?.status | async)?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    @if (isActivePaged) {\n      @if (dataActivePaged.page | async; as page) {\n        <!-- Optional Paginator Toolbar -->\n        <mat-paginator\n          class=\"flex-none\"\n          [length]=\"dataContext?.total | async\"\n          [pageIndex]=\"page?.index\"\n          [pageSize]=\"page?.size\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n        >\n        </mat-paginator>\n      }\n    }\n\n    <!-- Optional Continuation Footer -->\n    @if (isContinuable) {\n      <div class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n        <span class=\"mat-caption noselect\" style=\"color: var(--md-sys-color-outline)\">\n          {{ (dataContext?.data | async)?.length }} / {{ total$ | async }}\n        </span>\n\n        <button\n          mat-icon-button\n          type=\"button\"\n          color=\"primary\"\n          [disabled]=\"!(canLoadMore$ | async)\"\n          (click)=\"dataContinuable.loadMore()\"\n        >\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}\n"] }]
         }], ctorParameters: () => [{ type: ElderTableModel }, { type: SelectionModel, decorators: [{
                     type: Optional
                 }] }, { type: ElderDataViewOptionsProvider, decorators: [{
@@ -16007,8 +16007,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                 type: Input
             }], showFooter: [{
                 type: Input
-            }], denseHorizontal: [{
-                type: Input
             }], toolbarRowTemplateQuery: [{
                 type: ContentChildren,
                 args: [ElderTableToolbarDirective, { read: TemplateRef }]