@elderbyte/ngx-starter 12.13.0 → 12.13.1

package/bundles/elderbyte-ngx-starter.umd.js

@@ -3467,6 +3467,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DataContextBase.prototype, "isStarted$", {
+            get: function () {
+                return this._started.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DataContextBase.prototype, "isClosed", {
             get: function () {
                 return this._closed.getValue();
@@ -11313,6 +11320,54 @@
         { type: DataContextSelectionDirective }
     ]; };
 
+    var DataContextStateIndicatorComponent = /** @class */ (function () {
+        /***************************************************************************
+         *                                                                         *
+         * Constructor                                                             *
+         *                                                                         *
+         **************************************************************************/
+        function DataContextStateIndicatorComponent() {
+            /***************************************************************************
+             *                                                                         *
+             * Fields                                                                  *
+             *                                                                         *
+             **************************************************************************/
+            this.dataContext$ = new rxjs.BehaviorSubject(null);
+        }
+        /***************************************************************************
+         *                                                                         *
+         * Life Cycle                                                              *
+         *                                                                         *
+         **************************************************************************/
+        DataContextStateIndicatorComponent.prototype.ngOnInit = function () {
+        };
+        Object.defineProperty(DataContextStateIndicatorComponent.prototype, "dataContext", {
+            /***************************************************************************
+             *                                                                         *
+             * Properties                                                              *
+             *                                                                         *
+             **************************************************************************/
+            set: function (dataContext) {
+                this.dataContext$.next(dataContext);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return DataContextStateIndicatorComponent;
+    }());
+    DataContextStateIndicatorComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'elder-data-context-state-indicator',
+                    template: "<ng-container *ngIf=\"dataContext$ | async as dataContext\">\n\n  <ng-container *ngIf=\"dataContext else noDataContext\">\n\n    <ng-container *ngIf=\"(dataContext.isStarted$ | async) else dataContextNotStarted\">\n\n      <ng-container *ngIf=\"!(dataContext?.status | async)?.hasError else dataContextHasError\">\n\n        <ng-container *ngIf=\"(dataContext?.data | async)?.length === 0\">\n          <ng-template [ngTemplateOutlet]=\"dataContextNoData\"></ng-template>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-container>\n\n  </ng-container>\n\n</ng-container>\n\n<ng-template #noDataContext>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'No data context'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNotStarted>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'Data context not started'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextHasError>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', iconColor: 'warn', text: 'Error while loading data'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNoData>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'info', text: 'No data available'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #indicator let-icon=\"icon\" let-iconColor=\"iconColor\" let-text=\"text\">\n\n  <div fxFill\n       fxLayout=\"column\"\n       fxLayoutAlign=\"center center\"\n       class=\"elder-table-hint mat-body-1\">\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <mat-icon [color]=\"iconColor\">{{icon}}</mat-icon>\n      <span class=\"hint mat-body-1\">{{text | translate}}</span>\n    </div>\n\n  </div>\n\n</ng-template>\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    DataContextStateIndicatorComponent.ctorParameters = function () { return []; };
+    DataContextStateIndicatorComponent.propDecorators = {
+        dataContext: [{ type: i0.Input }]
+    };
+
     var ElderDataCommonModule = /** @class */ (function () {
         function ElderDataCommonModule() {
         }
@@ -11336,14 +11391,16 @@
                         ElderToolbarContentDirective,
                         ElderSingleSortComponent,
                         ElderSelectionMasterCheckboxComponent,
-                        DataContextSelectionDirective
+                        DataContextSelectionDirective,
+                        DataContextStateIndicatorComponent
                     ],
                     exports: [
                         ElderDataToolbarComponent,
                         ElderToolbarContentDirective,
                         ElderSingleSortComponent,
                         ElderSelectionMasterCheckboxComponent,
-                        DataContextSelectionDirective
+                        DataContextSelectionDirective,
+                        DataContextStateIndicatorComponent
                     ],
                 },] }
     ];
@@ -12839,7 +12896,7 @@
     ElderTableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'elder-table, ebs-table',
-                    template: "\n<div fxLayout=\"column\" fxFlex\n     class=\"elder-table\"\n     [class.elder-mat-table-container]=\"!embedded\"\n     [class.mat-elevation-z5]=\"float\"\n     [class.elder-mat-table-flat]=\"!embedded && !float\"\n>\n\n  <!-- Toolbar Rows -->\n  <ng-container *ngFor=\"let toolbarRowTemplate of toolbarRowTemplates$ | async\">\n    <ng-template *ngTemplateOutlet=\"toolbarRowTemplate; context: {$implicit: this}\">\n    </ng-template>\n  </ng-container>\n\n  <!-- Scrollable Table -->\n  <div fxLayout=\"column\" class=\"scrollable elder-table-scroll\"\n       infiniteScroll\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]=\"dataContext$ | async\"\n      [elderDataContextSelection]=\"dataContext$ | async\" #dataSelection=\"elderDataContextSelection\"\n      [elderDataContextSelectionModel]=\"selectionModel\"\n    >\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          <mat-checkbox (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]=\"(dataSelection.selectionState$ | async).anySelected\"\n          >\n          </mat-checkbox>\n        </td>\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container *ngIf=\"(tableModel.displayedColumnsInner$ | async) as displayedColumnsInner\">\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n        <tr mat-row 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]=\"interactionMode == 'selection' && selectionModel.observeSelection(entity) | async\"\n            (click)=\"onItemClick(entity)\"\n            (dblclick)=\"onItemDoubleClick(entity)\"\n        >\n        </tr>\n        <ng-container *ngIf=\"showFooter\">\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n        </ng-container>\n      </ng-container>\n    </table>\n  </div>\n\n  <div fxLayout=\"column\" fxFlex fxLayoutAlign=\"center center\">\n\n    <span class=\"elder-table-hint mat-body-1\" *ngIf=\"(dataContext?.data | async)?.length === 0 && !(dataContext?.status | async)?.hasError\">\n      {{'No data available' | translate}}\n    </span>\n\n    <div *ngIf=\"(dataContext?.status | async)?.hasError\"\n         fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"20px\">\n      <mat-icon color=\"warn\">warning</mat-icon>\n      <span class=\"hint mat-body-1\">{{'Error while loading data' | translate}}</span>\n    </div>\n\n  </div>\n\n  <mat-progress-bar fxFlex=\"none\"\n                    [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n                    [color]=\"((dataContext?.status | async)?.hasError) ? 'warn' : 'primary'\">\n  </mat-progress-bar>\n\n  <!-- Optional Paginator Toolbar -->\n  <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                 fxFlex=\"none\"\n                 [length]=\"dataContext?.total | async\"\n                 [pageIndex]=\"page?.index\"\n                 [pageSize]=\"page?.size\"\n                 [pageSizeOptions]=\"pageSizeOptions\">\n  </mat-paginator>\n\n  <!-- Optional Continuation Footer -->\n  <div *ngIf=\"isContinuable\" class=\"elder-table-footer\"\n       fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\"\n       style=\"padding-right: 10px\" >\n\n    <span class=\"mat-caption noselect\" style=\"color: gray\">\n      {{(dataContext?.data | async)?.length}} / {{total$ | async}}\n    </span>\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            [disabled]=\"!(canLoadMore$ | async)\"\n            (click)=\"dataContinuable.loadMore()\">\n      <mat-icon>keyboard_arrow_down</mat-icon>\n    </button>\n  </div>\n\n</div>\n",
+                    template: "\n<div fxLayout=\"column\" fxFlex\n     class=\"elder-table\"\n     [class.elder-mat-table-container]=\"!embedded\"\n     [class.mat-elevation-z5]=\"float\"\n     [class.elder-mat-table-flat]=\"!embedded && !float\"\n>\n\n  <!-- Toolbar Rows -->\n  <ng-container *ngFor=\"let toolbarRowTemplate of toolbarRowTemplates$ | async\">\n    <ng-template *ngTemplateOutlet=\"toolbarRowTemplate; context: {$implicit: this}\">\n    </ng-template>\n  </ng-container>\n\n  <!-- Scrollable Table -->\n  <div fxLayout=\"column\" class=\"scrollable elder-table-scroll\"\n       infiniteScroll\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]=\"dataContext$ | async\"\n      [elderDataContextSelection]=\"dataContext$ | async\" #dataSelection=\"elderDataContextSelection\"\n      [elderDataContextSelectionModel]=\"selectionModel\"\n    >\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          <mat-checkbox (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]=\"(dataSelection.selectionState$ | async).anySelected\"\n          >\n          </mat-checkbox>\n        </td>\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container *ngIf=\"(tableModel.displayedColumnsInner$ | async) as displayedColumnsInner\">\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n        <tr mat-row 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]=\"interactionMode == 'selection' && selectionModel.observeSelection(entity) | async\"\n            (click)=\"onItemClick(entity)\"\n            (dblclick)=\"onItemDoubleClick(entity)\"\n        >\n        </tr>\n        <ng-container *ngIf=\"showFooter\">\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n        </ng-container>\n      </ng-container>\n    </table>\n  </div>\n\n  <elder-data-context-state-indicator fxFlex [dataContext]=\"dataContext\">\n  </elder-data-context-state-indicator>\n\n  <mat-progress-bar fxFlex=\"none\"\n                    [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n                    [color]=\"((dataContext?.status | async)?.hasError) ? 'warn' : 'primary'\">\n  </mat-progress-bar>\n\n  <!-- Optional Paginator Toolbar -->\n  <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                 fxFlex=\"none\"\n                 [length]=\"dataContext?.total | async\"\n                 [pageIndex]=\"page?.index\"\n                 [pageSize]=\"page?.size\"\n                 [pageSizeOptions]=\"pageSizeOptions\">\n  </mat-paginator>\n\n  <!-- Optional Continuation Footer -->\n  <div *ngIf=\"isContinuable\" class=\"elder-table-footer\"\n       fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\"\n       style=\"padding-right: 10px\" >\n\n    <span class=\"mat-caption noselect\" style=\"color: gray\">\n      {{(dataContext?.data | async)?.length}} / {{total$ | async}}\n    </span>\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            [disabled]=\"!(canLoadMore$ | async)\"\n            (click)=\"dataContinuable.loadMore()\">\n      <mat-icon>keyboard_arrow_down</mat-icon>\n    </button>\n  </div>\n\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         ElderTableProviders.ExistingOrNewTableModel,
@@ -25984,12 +26041,13 @@
     exports.ɵd = createSelectionModel;
     exports.ɵe = createDataViewSelection;
     exports.ɵf = ELDER_DATA_VIEW;
-    exports.ɵh = ElderTripleStateCheckboxDirective;
-    exports.ɵi = ElderTableColumnDirective;
-    exports.ɵj = ElderTableRowDirective;
-    exports.ɵk = ElderPaginatorIntl;
-    exports.ɵl = StandardToastComponent;
-    exports.ɵm = ElderSelectBase;
+    exports.ɵh = DataContextStateIndicatorComponent;
+    exports.ɵi = ElderTripleStateCheckboxDirective;
+    exports.ɵj = ElderTableColumnDirective;
+    exports.ɵk = ElderTableRowDirective;
+    exports.ɵl = ElderPaginatorIntl;
+    exports.ɵm = StandardToastComponent;
+    exports.ɵn = ElderSelectBase;
 
     Object.defineProperty(exports, '__esModule', { value: true });