@one-paragon/angular-utilities 0.0.27 → 0.0.28

package/fesm2020/one-paragon-angular-utilities.mjs

@@ -2925,6 +2925,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i7$2.MatButtonToggle }]; } });
 
+class TableWrapperDirective {
+}
+TableWrapperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TableWrapperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: TableWrapperDirective, selector: "[tbWrapper]", queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableWrapperDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tbWrapper]'
+                }]
+        }], propDecorators: { customFilters: [{
+                type: ContentChildren,
+                args: [TableCustomFilterDirective, { descendants: true }]
+            }], filters: [{
+                type: ContentChildren,
+                args: [TableFilterDirective, { descendants: true }]
+            }] } });
+
 class DataFilter {
     constructor(filters$) {
         this.filters$ = filters$;
@@ -3411,11 +3428,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
             }] } });
 
 class TableContainerComponent {
-    constructor(state, exportToCsvService, config, store) {
+    constructor(state, exportToCsvService, config, store, wrapper) {
         this.state = state;
         this.exportToCsvService = exportToCsvService;
         this.config = config;
         this.store = store;
+        this.wrapper = wrapper;
         this.IndexColumn = false;
         this.SelectionColumn = false;
         this.isSticky = true;
@@ -3505,35 +3523,30 @@ class TableContainerComponent {
     ngAfterContentInit() {
         this.InitializeColumns();
         this.state.runOnceWhen(stateIs(InitializationState.LoadedFromStore), state => {
+            var allFilters = [...this.filters, ...this.customFilters];
+            if (this.wrapper) {
+                allFilters = [...allFilters, ...this.wrapper.customFilters, ...this.wrapper.filters];
+            }
             var customFilters = [];
-            this.filters.filter(f => !f.used).forEach(f => {
+            allFilters.filter(f => !f.used).forEach(f => {
                 f.used = true;
                 if (f.savable) {
                     var filter = state.filters[f.filterId];
                     if (isFilterInfo(filter)) {
-                        f.fieldType = filter.fieldType;
-                        f.filterType = filter.filterType;
-                        f.setFilterValue(filter.filterValue);
-                        f.key = filter.key;
-                        f.update();
+                        const filterDirective = f;
+                        filterDirective.fieldType = filter.fieldType;
+                        filterDirective.filterType = filter.filterType;
+                        filterDirective.setFilterValue(filter.filterValue);
+                        filterDirective.key = filter.key;
+                        filterDirective.update();
                     }
-                    this.state.addFilter(f.filter$);
-                }
-                else {
-                    customFilters.push(f);
-                }
-            });
-            this.customFilters.filter(cf => !cf.used).forEach(cf => {
-                cf.used = true;
-                if (cf.savable) {
-                    var filter = state.filters[cf.filterId];
                     if (isCustomFilter(filter)) {
-                        cf.active = filter.active ?? false;
+                        f.active = filter.active ?? false;
                     }
-                    this.state.addFilter(cf.filter$);
+                    this.state.addFilter(f.filter$);
                 }
                 else {
-                    customFilters.push(cf);
+                    customFilters.push(f);
                 }
             });
             const filters$ = from(customFilters.map(cf => cf.filter$)).pipe(mergeAll(), scan((a, b) => {
@@ -3589,7 +3602,7 @@ class TableContainerComponent {
         return _.flattenDeep(withHeadersAndFooters);
     }
 }
-TableContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableContainerComponent, deps: [{ token: TableStore }, { token: ExportToCsvService }, { token: TableBuilderConfigToken }, { token: i3$3.Store }], target: i0.ɵɵFactoryTarget.Component });
+TableContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableContainerComponent, deps: [{ token: TableStore }, { token: ExportToCsvService }, { token: TableBuilderConfigToken }, { token: i3$3.Store }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 TableContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: TableContainerComponent, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", OnStateReset: "OnStateReset", OnSaveState: "OnSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], ngImport: i0, template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\n  <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n    <div class=\"header-wrapper\">\n      <div class=\"title\">\n        <ng-content select=\".tb-header-title\"\n          *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n        </ng-content>\n      </div>\n      <div class=\"flx-row-end\">\n        <lib-filter-list></lib-filter-list>\n        <ng-container *ngIf=\"!tableSettings.hideHeader\">\n          <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\n            <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-container>\n          <ng-template #allMenu>\n            <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n              [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n            </button>\n            <mat-menu #mainMenu='matMenu'>\n              <div class=\"flex-column\">\n                <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n              </div>\n              <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n            </mat-menu>\n          </ng-template>\n          <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n            (click)=\"state.toggleCollapseHeader()\">\n            {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n          </mat-icon>\n        </ng-container>\n      </div>\n    </div>\n\n    <div style=\"clear: both;\">\n      <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n        [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n        [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\">\n      </tb-generic-table>\n    </div>\n\n\n\n    <ng-template #headerMenu>\n      <ng-container>\n        <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n        </tb-filter-displayer>\n        <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\n        <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\n      </ng-container>\n    </ng-template>\n    <ng-template #headerMenuExtra>\n      <button mat-menu-item (click)=\"resetState()\">\n        <mat-icon color=\"primary\">autorenew</mat-icon>\n        <span>Reset table</span>\n      </button>\n      <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\n        <mat-icon color=\"primary\">file_download</mat-icon>\n        <span>Export Table</span>\n      </button>\n      <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\n        <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\n          <mat-icon color=\"primary\">save</mat-icon>\n          <span>Save to {{currentKey}}</span>\n        </button>\n        <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n          <span>Choose Profile</span>\n        </button>\n      </ng-container>\n\n      <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n        <button mat-menu-item clickEmitter  #add='clickEmitter'>\n          <mat-icon>add</mat-icon>\n          <span>New</span>\n        </button>\n        <ng-container *ngFor='let key of stateKeys$ | async'>\n          <button mat-menu-item (click)='setProfileState(key)'>\n            <div style='display: flex; align-items: center; justify-content: space-between;'>\n              <span style='display:flex;'>{{key}}</span>\n              <span style='display:flex;'>\n                <span style=\"width: 120px;\"></span>\n                <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n              </span>\n            </div>\n          </button>\n        </ng-container>\n      </mat-menu>\n      <div *opDialog='add'>\n        <mat-form-field>\n          <input style='width:90%' matInput #addedKey />\n        </mat-form-field>\n        <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n          [disabled]=\"!addedKey.value\">Add</button>\n      </div>\n    </ng-template>\n\n  </ng-container>\n\n</ng-container>\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], components: [{ type: FilterChipsComponent, selector: "lib-filter-list" }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "disableSort"], outputs: ["selection$"] }, { type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { type: SortMenuComponent, selector: "tb-sort-menu" }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
@@ -3597,7 +3610,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
         }], ctorParameters: function () { return [{ type: TableStore }, { type: ExportToCsvService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TableBuilderConfigToken]
-                }] }, { type: i3$3.Store }]; }, propDecorators: { customFilters: [{
+                }] }, { type: i3$3.Store }, { type: TableWrapperDirective, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { customFilters: [{
                 type: ContentChildren,
                 args: [TableCustomFilterDirective, { descendants: true }]
             }], filters: [{
@@ -3928,7 +3943,8 @@ TableBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         MatCheckboxTbFilterDirective,
         MatButtonToggleFilterDirective,
         TableFilterDirective,
-        TableFilterStringContainsDirective], imports: [CommonModule,
+        TableFilterStringContainsDirective,
+        TableWrapperDirective], imports: [CommonModule,
         MaterialModule, i3$3.StoreFeatureModule, i1$4.EffectsFeatureModule, FormsModule,
         RouterModule,
         ReactiveComponentModule,
@@ -3948,7 +3964,8 @@ TableBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         MatCheckboxTbFilterDirective,
         MatButtonToggleFilterDirective,
         TableFilterDirective,
-        TableFilterStringContainsDirective] });
+        TableFilterStringContainsDirective,
+        TableWrapperDirective] });
 TableBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: TableBuilderModule, providers: [
         SpaceCasePipe,
         DatePipe,
@@ -3997,6 +4014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
                         MatButtonToggleFilterDirective,
                         TableFilterDirective,
                         TableFilterStringContainsDirective,
+                        TableWrapperDirective,
                     ],
                     declarations: [
                         ColumnTotalPipe,
@@ -4029,6 +4047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
                         MatButtonToggleFilterDirective,
                         TableFilterDirective,
                         TableFilterStringContainsDirective,
+                        TableWrapperDirective,
                     ],
                     providers: [
                         SpaceCasePipe,
@@ -4099,5 +4118,5 @@ const CreateTableBuilder = (reportDef$) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayStyle, AutoFocusDirective, ClickEmitterDirective, ClickSubjectDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NotPersisitedTableSettings, PaginatorComponent, PesrsistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, TableBuilder, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, UtilitiesModule, chainRequest, combineArrays, createFailure, createSuccess, defaultShareReplay, filterArray, getRequestorBody, getRequestorStatus, httpRequest, httpRequestor, inProgress, isErrorState, isSuccessState, mapArray, mapError, notNull, notStarted, onWait, onceWhen, previousAndCurrent, skipOneWhen, spaceCase, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
+export { ArrayStyle, AutoFocusDirective, ClickEmitterDirective, ClickSubjectDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NotPersisitedTableSettings, PaginatorComponent, PesrsistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, TableBuilder, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, UtilitiesModule, chainRequest, combineArrays, createFailure, createSuccess, defaultShareReplay, filterArray, getRequestorBody, getRequestorStatus, httpRequest, httpRequestor, inProgress, isErrorState, isSuccessState, mapArray, mapError, notNull, notStarted, onWait, onceWhen, previousAndCurrent, skipOneWhen, spaceCase, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
 //# sourceMappingURL=one-paragon-angular-utilities.mjs.map