@elderbyte/ngx-starter 15.9.0 → 15.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/data-view/common/selection/elder-selection-master-checkbox/elder-selection-master-checkbox.component.mjs +3 -3
- package/esm2020/lib/components/data-view/table/elder-table/elder-table.component.mjs +3 -3
- package/fesm2015/elderbyte-ngx-starter.mjs +4 -4
- package/fesm2015/elderbyte-ngx-starter.mjs.map +1 -1
- package/fesm2020/elderbyte-ngx-starter.mjs +4 -4
- package/fesm2020/elderbyte-ngx-starter.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/data-view/table/elder-table/elder-table.component.scss +3 -2
- package/theming/_mixins.scss +9 -10
|
@@ -12639,10 +12639,10 @@ class ElderSelectionMasterCheckboxComponent {
|
|
|
12639
12639
|
}
|
|
12640
12640
|
}
|
|
12641
12641
|
ElderSelectionMasterCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ElderSelectionMasterCheckboxComponent, deps: [{ token: DataContextSelectionDirective }], target: i0.ɵɵFactoryTarget.Component });
|
|
12642
|
-
ElderSelectionMasterCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox", ngImport: i0, template: "<ng-container *ngIf=\"dataContextSelection?.selectionState$ | async as selectionState\">\n <div\n *ngIf=\"selectionState.isMultiSelection\"\n [matBadgeHidden]=\"selectionState.count === 0\"\n [matBadge]=\"selectionState.count + ''\"\n [matBadgePosition]=\"'above before'\"\n [matBadgeOverlap]=\"false\"\n [matBadgeSize]=\"'small'\"\n >\n <mat-checkbox (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n [checked]=\"selectionState.allSelected\"\n [indeterminate]=\"selectionState.someSelected\"\n >\n </mat-checkbox>\n </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12642
|
+
ElderSelectionMasterCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox", ngImport: i0, template: "<ng-container *ngIf=\"dataContextSelection?.selectionState$ | async as selectionState\">\n <div class=\"layout-row place-start-center\"\n *ngIf=\"selectionState.isMultiSelection\"\n [matBadgeHidden]=\"selectionState.count === 0\"\n [matBadge]=\"selectionState.count + ''\"\n [matBadgePosition]=\"'above before'\"\n [matBadgeOverlap]=\"false\"\n [matBadgeSize]=\"'small'\"\n >\n <mat-checkbox (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n [checked]=\"selectionState.allSelected\"\n [indeterminate]=\"selectionState.someSelected\"\n >\n </mat-checkbox>\n </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12643
12643
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ElderSelectionMasterCheckboxComponent, decorators: [{
|
|
12644
12644
|
type: Component,
|
|
12645
|
-
args: [{ selector: 'elder-selection-master-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"dataContextSelection?.selectionState$ | async as selectionState\">\n <div\n *ngIf=\"selectionState.isMultiSelection\"\n [matBadgeHidden]=\"selectionState.count === 0\"\n [matBadge]=\"selectionState.count + ''\"\n [matBadgePosition]=\"'above before'\"\n [matBadgeOverlap]=\"false\"\n [matBadgeSize]=\"'small'\"\n >\n <mat-checkbox (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n [checked]=\"selectionState.allSelected\"\n [indeterminate]=\"selectionState.someSelected\"\n >\n </mat-checkbox>\n </div>\n</ng-container>\n" }]
|
|
12645
|
+
args: [{ selector: 'elder-selection-master-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"dataContextSelection?.selectionState$ | async as selectionState\">\n <div class=\"layout-row place-start-center\"\n *ngIf=\"selectionState.isMultiSelection\"\n [matBadgeHidden]=\"selectionState.count === 0\"\n [matBadge]=\"selectionState.count + ''\"\n [matBadgePosition]=\"'above before'\"\n [matBadgeOverlap]=\"false\"\n [matBadgeSize]=\"'small'\"\n >\n <mat-checkbox (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n [checked]=\"selectionState.allSelected\"\n [indeterminate]=\"selectionState.someSelected\"\n >\n </mat-checkbox>\n </div>\n</ng-container>\n" }]
|
|
12646
12646
|
}], ctorParameters: function () { return [{ type: DataContextSelectionDirective }]; } });
|
|
12647
12647
|
|
|
12648
12648
|
class DataContextStateIndicatorComponent {
|
|
@@ -13913,7 +13913,7 @@ ElderTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
|
|
|
13913
13913
|
provide: ELDER_DATA_VIEW,
|
|
13914
13914
|
useExisting: forwardRef(() => ElderTableComponent)
|
|
13915
13915
|
}
|
|
13916
|
-
], 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: "<mat-card class=\"full\"\n [class.embedded]=\"embedded\"\n [appearance]=\"appearance\"\n style=\"overflow: hidden\"\n>\n <div class=\"layout-col elder-table full\">\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 class=\"layout-col 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]=\"$any(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 class=\"flex-none\" [dataContext]=\"dataContext\">\n </elder-data-context-state-indicator>\n\n <mat-progress-bar class=\"flex-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 class=\"flex-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=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\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 </div>\n</mat-card>\n", styles: [".elder-table-scroll{height:100%}.elder-mat-inner-table{width:100%}.elder-table-row.dense{height:42px!important}.elder-mat-table-container{border-radius:4px;overflow:hidden}.mat-column-select{overflow:initial;max-width:48px;width:48px}.elder-row-removing{text-decoration:line-through}.elder-row-hidden{display:none}.elder-table-row{cursor:pointer}:host{min-width:0;min-height:0}.elder-table-hint{color:gray}.elder-table-footer{height:44px}.elder-table-checkbox{opacity:.25;transition:opacity .5s ease-in-out}.elder-table-row:hover .elder-table-checkbox{opacity:.9}.elder-table-checkbox-visible{opacity:1}.mat-mdc-table .mat-mdc-header-cell{padding-left:8px;padding-right:12px;overflow-wrap:normal;word-wrap:normal;word-break:normal;white-space:unset;-webkit-hyphens:auto;hyphens:auto}.mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:20px}.mat-mdc-table .mat-mdc-header-cell:last-of-type{padding-right:8px}.mat-mdc-table .mat-mdc-header-cell:last-of-type[mat-sort-header]:not([arrowposition=before]){padding-right:8px}.mat-mdc-table .mat-mdc-header-cell[mat-sort-header][arrowposition=before]{padding-left:0}.mat-mdc-table .mat-mdc-header-cell[mat-sort-header]:not([arrowposition=before]){padding-right:12px}.mat-mdc-table .mat-mdc-header-cell>.mat-sort-header-container{display:inline-flex}.mat-mdc-table .mat-mdc-cell{padding-left:8px;padding-right:12px;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:unset;-webkit-hyphens:auto;hyphens:auto}.mat-mdc-table .mat-mdc-cell:first-of-type{padding-left:20px}.mat-mdc-table .mat-mdc-cell:last-of-type{padding-right:8px}.mat-mdc-table .mat-mdc-footer-cell{padding-left:8px;padding-right:12px;font-weight:700}.mat-mdc-table .mat-mdc-footer-cell:first-of-type{padding-left:20px}.mat-mdc-table .mat-mdc-footer-cell:last-of-type{padding-right:8px}.mat-mdc-table .mat-mdc-footer-cell .mat-mdc-paginator{margin-left:-8px;margin-right:-8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i11.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i11.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { kind: "component", type: i17.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow"], exportAs: ["elderTableRow"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13916
|
+
], 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: "<mat-card class=\"full\"\n [class.embedded]=\"embedded\"\n [appearance]=\"appearance\"\n style=\"overflow: hidden\"\n>\n <div class=\"layout-col elder-table full\">\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 class=\"layout-col 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]=\"$any(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 <div class=\"layout-row place-start-center\">\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 </div>\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 class=\"flex-none\" [dataContext]=\"dataContext\">\n </elder-data-context-state-indicator>\n\n <mat-progress-bar class=\"flex-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 class=\"flex-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=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\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 </div>\n</mat-card>\n", styles: [".elder-table-scroll{height:100%}.elder-mat-inner-table{width:100%}.elder-table-row.dense{height:42px!important}.elder-mat-table-container{border-radius:4px;overflow:hidden}.mat-column-select{overflow:initial;min-width:72px;max-width:5%;width:72px}.elder-row-removing{text-decoration:line-through}.elder-row-hidden{display:none}.elder-table-row{cursor:pointer}:host{min-width:0;min-height:0}.elder-table-hint{color:gray}.elder-table-footer{height:44px}.elder-table-checkbox{opacity:.25;transition:opacity .5s ease-in-out}.elder-table-row:hover .elder-table-checkbox{opacity:.9}.elder-table-checkbox-visible{opacity:1}.mat-mdc-table .mat-mdc-header-cell{padding-left:8px;padding-right:12px;overflow-wrap:normal;word-wrap:normal;word-break:normal;white-space:unset;-webkit-hyphens:auto;hyphens:auto}.mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:20px}.mat-mdc-table .mat-mdc-header-cell:last-of-type{padding-right:8px}.mat-mdc-table .mat-mdc-header-cell:last-of-type[mat-sort-header]:not([arrowposition=before]){padding-right:8px}.mat-mdc-table .mat-mdc-header-cell[mat-sort-header][arrowposition=before]{padding-left:0}.mat-mdc-table .mat-mdc-header-cell[mat-sort-header]:not([arrowposition=before]){padding-right:12px}.mat-mdc-table .mat-mdc-header-cell>.mat-sort-header-container{display:inline-flex}.mat-mdc-table .mat-mdc-cell{padding-left:8px;padding-right:12px;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:unset;-webkit-hyphens:auto;hyphens:auto}.mat-mdc-table .mat-mdc-cell:first-of-type{padding-left:20px}.mat-mdc-table .mat-mdc-cell:last-of-type{padding-right:8px}.mat-mdc-table .mat-mdc-footer-cell{padding-left:8px;padding-right:12px;font-weight:700}.mat-mdc-table .mat-mdc-footer-cell:first-of-type{padding-left:20px}.mat-mdc-table .mat-mdc-footer-cell:last-of-type{padding-right:8px}.mat-mdc-table .mat-mdc-footer-cell .mat-mdc-paginator{margin-left:-8px;margin-right:-8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i11.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i11.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { kind: "component", type: i17.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow"], exportAs: ["elderTableRow"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13917
13917
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ElderTableComponent, decorators: [{
|
|
13918
13918
|
type: Component,
|
|
13919
13919
|
args: [{ selector: 'elder-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -13922,7 +13922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
13922
13922
|
provide: ELDER_DATA_VIEW,
|
|
13923
13923
|
useExisting: forwardRef(() => ElderTableComponent)
|
|
13924
13924
|
}
|
|
13925
|
-
], template: "<mat-card class=\"full\"\n [class.embedded]=\"embedded\"\n [appearance]=\"appearance\"\n style=\"overflow: hidden\"\n>\n <div class=\"layout-col elder-table full\">\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 class=\"layout-col 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]=\"$any(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
|
|
13925
|
+
], template: "<mat-card class=\"full\"\n [class.embedded]=\"embedded\"\n [appearance]=\"appearance\"\n style=\"overflow: hidden\"\n>\n <div class=\"layout-col elder-table full\">\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 class=\"layout-col 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]=\"$any(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 <div class=\"layout-row place-start-center\">\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 </div>\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 class=\"flex-none\" [dataContext]=\"dataContext\">\n </elder-data-context-state-indicator>\n\n <mat-progress-bar class=\"flex-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 class=\"flex-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=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\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 </div>\n</mat-card>\n", styles: [".elder-table-scroll{height:100%}.elder-mat-inner-table{width:100%}.elder-table-row.dense{height:42px!important}.elder-mat-table-container{border-radius:4px;overflow:hidden}.mat-column-select{overflow:initial;min-width:72px;max-width:5%;width:72px}.elder-row-removing{text-decoration:line-through}.elder-row-hidden{display:none}.elder-table-row{cursor:pointer}:host{min-width:0;min-height:0}.elder-table-hint{color:gray}.elder-table-footer{height:44px}.elder-table-checkbox{opacity:.25;transition:opacity .5s ease-in-out}.elder-table-row:hover .elder-table-checkbox{opacity:.9}.elder-table-checkbox-visible{opacity:1}.mat-mdc-table .mat-mdc-header-cell{padding-left:8px;padding-right:12px;overflow-wrap:normal;word-wrap:normal;word-break:normal;white-space:unset;-webkit-hyphens:auto;hyphens:auto}.mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:20px}.mat-mdc-table .mat-mdc-header-cell:last-of-type{padding-right:8px}.mat-mdc-table .mat-mdc-header-cell:last-of-type[mat-sort-header]:not([arrowposition=before]){padding-right:8px}.mat-mdc-table .mat-mdc-header-cell[mat-sort-header][arrowposition=before]{padding-left:0}.mat-mdc-table .mat-mdc-header-cell[mat-sort-header]:not([arrowposition=before]){padding-right:12px}.mat-mdc-table .mat-mdc-header-cell>.mat-sort-header-container{display:inline-flex}.mat-mdc-table .mat-mdc-cell{padding-left:8px;padding-right:12px;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:unset;-webkit-hyphens:auto;hyphens:auto}.mat-mdc-table .mat-mdc-cell:first-of-type{padding-left:20px}.mat-mdc-table .mat-mdc-cell:last-of-type{padding-right:8px}.mat-mdc-table .mat-mdc-footer-cell{padding-left:8px;padding-right:12px;font-weight:700}.mat-mdc-table .mat-mdc-footer-cell:first-of-type{padding-left:20px}.mat-mdc-table .mat-mdc-footer-cell:last-of-type{padding-right:8px}.mat-mdc-table .mat-mdc-footer-cell .mat-mdc-paginator{margin-left:-8px;margin-right:-8px}\n"] }]
|
|
13926
13926
|
}], ctorParameters: function () { return [{ type: ElderTableModel }, { type: SelectionModel, decorators: [{
|
|
13927
13927
|
type: Optional
|
|
13928
13928
|
}] }, { type: ElderDataViewOptionsProvider, decorators: [{
|