@elderbyte/ngx-starter 19.1.0-beta.27 → 19.1.0-beta.28

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -15760,6 +15760,7 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
         this.pageSizeOptions = [30, 50, 100, 150, 200];
         this.keepSelection = true;
         this.showFooter = false;
+        this.denseHorizontal = false;
         this.toolbarRowTemplates$ = new BehaviorSubject([]);
         /**
          * Gets the current rows of this table.
@@ -15920,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", 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: "idField", removingField: "removingField", hiddenField: "hiddenField", pageSizeOptions: "pageSizeOptions", keepSelection: "keepSelection", showFooter: "showFooter", denseHorizontal: "denseHorizontal", toolbarTemplate: "toolbarTemplate", data: "data", displayedColumns: "displayedColumns", selectionVisible: "selectionVisible" }, 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\">\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,
@@ -15966,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\">\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: [{
@@ -16006,6 +16007,8 @@ 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 }]
@@ -30941,7 +30944,7 @@ class ElderLocalizedInputTableComponent extends FormFieldBaseComponent {
         return localizables;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderLocalizedInputTableComponent, deps: [{ token: ElderToastService }, { token: ElderLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderLocalizedInputTableComponent, isStandalone: true, selector: "elder-localized-input-table", inputs: { dense: "dense", float: "float", embedded: "embedded", textColumns: "textColumns", defaultLanguageTags: "defaultLanguageTags" }, providers: buildFormIntegrationProviders(ElderLocalizedInputTableComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"layout-col full\">\n  <elder-table\n    matSort\n    class=\"flex\"\n    [data]=\"data\"\n    [selectionVisible]=\"true\"\n    [selectionMultiEnabled]=\"true\"\n    [dense]=\"dense\"\n    [float]=\"float\"\n    [embedded]=\"embedded\"\n  >\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div class=\"layout-col place-start-center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{ label ?? placeholder }}</h4>\n        </div>\n      </ng-template>\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-set\n          ><mat-chip highlighted>{{ localized.locale }}</mat-chip></mat-chip-set\n        >\n      </td>\n    </ng-container>\n\n    <ng-container\n      *ngFor=\"let textColumn of textColumns$ | async\"\n      matColumnDef=\"{{ textColumn.name }}\"\n    >\n      <th mat-header-cell *matHeaderCellDef>{{ textColumn.title | translate }}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <div class=\"layout-row place-center-center\">\n          <mat-form-field class=\"full-width\" appearance=\"fill\" elderDense>\n            <!--\n            <mat-label>{{textColumn.title | translate}} ({{localized.locale}})</mat-label>\n            -->\n            <!--\n            <span matTextPrefix>{{textColumn.title | translate}}</span>\n            -->\n            <input\n              matInput\n              type=\"text\"\n              name=\"i18n-{{ localized.locale }}-{{ textColumn.name }}\"\n              [ngModel]=\"localized[textColumn.name]\"\n              [ngModelOptions]=\"{ updateOn: 'blur' }\"\n              (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n              [required]=\"required && textColumn.required\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n            />\n          </mat-form-field>\n        </div>\n      </td>\n    </ng-container>\n  </elder-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ElderTableComponent, selector: "elder-table", inputs: ["idField", "removingField", "hiddenField", "pageSizeOptions", "keepSelection", "showFooter", "toolbarTemplate", "data", "displayedColumns", "selectionVisible"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: ElderTableToolbarDirective, selector: "[elderTableToolbar]" }, { kind: "component", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: ["canAdd", "canRemove", "canMore", "confirmRemoval", "keepSelectionAfterRemoval", "selectionModel"], outputs: ["requestNew", "requestRemove"] }, { kind: "directive", type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: ["elderToolbarContent"] }, { kind: "directive", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { 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: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderLocalizedInputTableComponent, isStandalone: true, selector: "elder-localized-input-table", inputs: { dense: "dense", float: "float", embedded: "embedded", textColumns: "textColumns", defaultLanguageTags: "defaultLanguageTags" }, providers: buildFormIntegrationProviders(ElderLocalizedInputTableComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"layout-col full\">\n  <elder-table\n    matSort\n    class=\"flex\"\n    [data]=\"data\"\n    [selectionVisible]=\"true\"\n    [selectionMultiEnabled]=\"true\"\n    [dense]=\"dense\"\n    [float]=\"float\"\n    [embedded]=\"embedded\"\n  >\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div class=\"layout-col place-start-center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{ label ?? placeholder }}</h4>\n        </div>\n      </ng-template>\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-set\n          ><mat-chip highlighted>{{ localized.locale }}</mat-chip></mat-chip-set\n        >\n      </td>\n    </ng-container>\n\n    <ng-container\n      *ngFor=\"let textColumn of textColumns$ | async\"\n      matColumnDef=\"{{ textColumn.name }}\"\n    >\n      <th mat-header-cell *matHeaderCellDef>{{ textColumn.title | translate }}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <div class=\"layout-row place-center-center\">\n          <mat-form-field class=\"full-width\" appearance=\"fill\" elderDense>\n            <!--\n            <mat-label>{{textColumn.title | translate}} ({{localized.locale}})</mat-label>\n            -->\n            <!--\n            <span matTextPrefix>{{textColumn.title | translate}}</span>\n            -->\n            <input\n              matInput\n              type=\"text\"\n              name=\"i18n-{{ localized.locale }}-{{ textColumn.name }}\"\n              [ngModel]=\"localized[textColumn.name]\"\n              [ngModelOptions]=\"{ updateOn: 'blur' }\"\n              (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n              [required]=\"required && textColumn.required\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n            />\n          </mat-form-field>\n        </div>\n      </td>\n    </ng-container>\n  </elder-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ElderTableComponent, selector: "elder-table", inputs: ["idField", "removingField", "hiddenField", "pageSizeOptions", "keepSelection", "showFooter", "denseHorizontal", "toolbarTemplate", "data", "displayedColumns", "selectionVisible"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: ElderTableToolbarDirective, selector: "[elderTableToolbar]" }, { kind: "component", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: ["canAdd", "canRemove", "canMore", "confirmRemoval", "keepSelectionAfterRemoval", "selectionModel"], outputs: ["requestNew", "requestRemove"] }, { kind: "directive", type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: ["elderToolbarContent"] }, { kind: "directive", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { 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: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderLocalizedInputTableComponent, decorators: [{
             type: Component,