@one-paragon/angular-utilities 0.1.31 → 0.1.32
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/table-builder/classes/GenericTableDataSource.mjs +1 -1
- package/esm2020/table-builder/components/table-container/table-container.mjs +1 -1
- package/esm2020/utilities/directives/dialog.mjs +5 -5
- package/fesm2015/one-paragon-angular-utilities.mjs +5 -5
- package/fesm2015/one-paragon-angular-utilities.mjs.map +1 -1
- package/fesm2020/one-paragon-angular-utilities.mjs +5 -5
- package/fesm2020/one-paragon-angular-utilities.mjs.map +1 -1
- package/package.json +1 -1
- package/utilities/directives/dialog.d.ts +2 -2
|
@@ -826,7 +826,7 @@ class DialogDirective {
|
|
|
826
826
|
this.service = service;
|
|
827
827
|
this.opDialogClosed = new EventEmitter();
|
|
828
828
|
this._dialogConfig = defaultDialogConfig;
|
|
829
|
-
this.
|
|
829
|
+
this.opDialogAddDialogClass = true;
|
|
830
830
|
this._data = new Subject();
|
|
831
831
|
this.subscription = this._data.pipe(switchAll()).subscribe(d => {
|
|
832
832
|
if (d) {
|
|
@@ -856,7 +856,7 @@ class DialogDirective {
|
|
|
856
856
|
const position = { left: `${rect.left}px`, top: `${rect.bottom - 50}px` };
|
|
857
857
|
this.opDialogConfig = { ...this.opDialogConfig, position };
|
|
858
858
|
}
|
|
859
|
-
if (this.
|
|
859
|
+
if (this.opDialogAddDialogClass) {
|
|
860
860
|
this.opDialogConfig.panelClass = [...(Array.isArray(this.opDialogConfig.panelClass) ? this.opDialogConfig.panelClass : this.opDialogConfig.panelClass ? [this.opDialogConfig.panelClass] : []), 'opDialog'];
|
|
861
861
|
}
|
|
862
862
|
this.dialogRef = this.dialog.open(DialogWrapper, this.opDialogConfig);
|
|
@@ -897,13 +897,13 @@ class DialogDirective {
|
|
|
897
897
|
}
|
|
898
898
|
}
|
|
899
899
|
DialogDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DialogDirective, deps: [{ token: i0.TemplateRef }, { token: i1.MatDialog }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
900
|
-
DialogDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: DialogDirective, selector: "[opDialog]", inputs: {
|
|
900
|
+
DialogDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: DialogDirective, selector: "[opDialog]", inputs: { opDialogAddDialogClass: "opDialogAddDialogClass", opDialogConfig: "opDialogConfig", state: ["opDialog", "state"], nativeElement: ["opDialogOrigin", "nativeElement"] }, outputs: { opDialogClosed: "opDialogClosed" }, ngImport: i0 });
|
|
901
901
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DialogDirective, decorators: [{
|
|
902
902
|
type: Directive,
|
|
903
903
|
args: [{ selector: '[opDialog]' }]
|
|
904
904
|
}], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i1.MatDialog }, { type: DialogService }]; }, propDecorators: { opDialogClosed: [{
|
|
905
905
|
type: Output
|
|
906
|
-
}],
|
|
906
|
+
}], opDialogAddDialogClass: [{
|
|
907
907
|
type: Input
|
|
908
908
|
}], opDialogConfig: [{
|
|
909
909
|
type: Input
|
|
@@ -4200,7 +4200,7 @@ class TableContainerComponent {
|
|
|
4200
4200
|
}
|
|
4201
4201
|
}
|
|
4202
4202
|
TableContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: TableContainerComponent, deps: [{ token: TableStore }, { token: ExportToCsvService }, { token: TableBuilderConfigToken }, { token: i3$4.Store }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4203
|
-
TableContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: TableContainerComponent, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters", groupHeaderTemplate: "groupHeaderTemplate" }, 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 }], viewQueries: [{ propertyName: "genericTableComponent", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" >\r\n</ng-content>\r\n\r\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\r\n <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n\r\n\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n <ng-content select=\".tb-header-title\"\r\n *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\r\n\r\n </ng-content>\r\n <group-by-list></group-by-list>\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list></lib-filter-list>\r\n <ng-container *ngIf=\"!tableSettings.hideHeader\">\r\n <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\r\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\r\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n <ng-template #allMenu>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\r\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\r\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\r\n </mat-menu>\r\n </ng-template>\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div style=\"clear: both;\">\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\r\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\">\r\n </tb-generic-table>\r\n </div>\r\n\r\n\r\n\r\n <ng-template #headerMenu>\r\n <ng-container>\r\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\r\n </tb-filter-displayer>\r\n <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\r\n <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #headerMenuExtra>\r\n <button mat-menu-item (click)=\"resetState()\">\r\n <mat-icon color=\"primary\">autorenew</mat-icon>\r\n <span>Reset table</span>\r\n </button>\r\n <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\r\n <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>Save to {{currentKey}}</span>\r\n </button>\r\n <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n <span>Choose Profile</span>\r\n </button>\r\n </ng-container>\r\n\r\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n <button mat-menu-item clickEmitter #add='clickEmitter'>\r\n <mat-icon>add</mat-icon>\r\n <span>New</span>\r\n </button>\r\n <ng-container *ngFor='let key of stateKeys$ | async'>\r\n <button mat-menu-item (click)='setProfileState(key)'>\r\n <div style='display: flex; align-items: center; justify-content: space-between;'>\r\n <span style='display:flex;'>{{key}}</span>\r\n <span style='display:flex;'>\r\n <span style=\"width: 120px;\"></span>\r\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n </span>\r\n </div>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n <ng-container *opDialog='add'>\r\n <mat-form-field>\r\n <input style='width:90%' matInput #addedKey />\r\n </mat-form-field>\r\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\r\n [disabled]=\"!addedKey.value\">Add</button>\r\n </ng-container>\r\n </ng-template>\r\n\r\n </ng-container>\r\n\r\n</ng-container>\r\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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i8$1.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"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["add_opDialog_Class", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "groupHeaderTemplate", "disableSort"], outputs: ["selection$"] }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4203
|
+
TableContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: TableContainerComponent, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters", groupHeaderTemplate: "groupHeaderTemplate" }, 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 }], viewQueries: [{ propertyName: "genericTableComponent", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" >\r\n</ng-content>\r\n\r\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\r\n <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n\r\n\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n <ng-content select=\".tb-header-title\"\r\n *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\r\n\r\n </ng-content>\r\n <group-by-list></group-by-list>\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list></lib-filter-list>\r\n <ng-container *ngIf=\"!tableSettings.hideHeader\">\r\n <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\r\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\r\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n <ng-template #allMenu>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\r\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\r\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\r\n </mat-menu>\r\n </ng-template>\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div style=\"clear: both;\">\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\r\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\">\r\n </tb-generic-table>\r\n </div>\r\n\r\n\r\n\r\n <ng-template #headerMenu>\r\n <ng-container>\r\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\r\n </tb-filter-displayer>\r\n <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\r\n <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #headerMenuExtra>\r\n <button mat-menu-item (click)=\"resetState()\">\r\n <mat-icon color=\"primary\">autorenew</mat-icon>\r\n <span>Reset table</span>\r\n </button>\r\n <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\r\n <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>Save to {{currentKey}}</span>\r\n </button>\r\n <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n <span>Choose Profile</span>\r\n </button>\r\n </ng-container>\r\n\r\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n <button mat-menu-item clickEmitter #add='clickEmitter'>\r\n <mat-icon>add</mat-icon>\r\n <span>New</span>\r\n </button>\r\n <ng-container *ngFor='let key of stateKeys$ | async'>\r\n <button mat-menu-item (click)='setProfileState(key)'>\r\n <div style='display: flex; align-items: center; justify-content: space-between;'>\r\n <span style='display:flex;'>{{key}}</span>\r\n <span style='display:flex;'>\r\n <span style=\"width: 120px;\"></span>\r\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n </span>\r\n </div>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n <ng-container *opDialog='add'>\r\n <mat-form-field>\r\n <input style='width:90%' matInput #addedKey />\r\n </mat-form-field>\r\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\r\n [disabled]=\"!addedKey.value\">Add</button>\r\n </ng-container>\r\n </ng-template>\r\n\r\n </ng-container>\r\n\r\n</ng-container>\r\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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i8$1.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"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogAddDialogClass", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "groupHeaderTemplate", "disableSort"], outputs: ["selection$"] }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4204
4204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
4205
4205
|
type: Component,
|
|
4206
4206
|
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], template: "<ng-content select=\"[before]\" >\r\n</ng-content>\r\n\r\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\r\n <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n\r\n\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n <ng-content select=\".tb-header-title\"\r\n *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\r\n\r\n </ng-content>\r\n <group-by-list></group-by-list>\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list></lib-filter-list>\r\n <ng-container *ngIf=\"!tableSettings.hideHeader\">\r\n <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\r\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\r\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n <ng-template #allMenu>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\r\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\r\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\r\n </mat-menu>\r\n </ng-template>\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div style=\"clear: both;\">\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\r\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\">\r\n </tb-generic-table>\r\n </div>\r\n\r\n\r\n\r\n <ng-template #headerMenu>\r\n <ng-container>\r\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\r\n </tb-filter-displayer>\r\n <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\r\n <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #headerMenuExtra>\r\n <button mat-menu-item (click)=\"resetState()\">\r\n <mat-icon color=\"primary\">autorenew</mat-icon>\r\n <span>Reset table</span>\r\n </button>\r\n <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\r\n <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>Save to {{currentKey}}</span>\r\n </button>\r\n <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n <span>Choose Profile</span>\r\n </button>\r\n </ng-container>\r\n\r\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n <button mat-menu-item clickEmitter #add='clickEmitter'>\r\n <mat-icon>add</mat-icon>\r\n <span>New</span>\r\n </button>\r\n <ng-container *ngFor='let key of stateKeys$ | async'>\r\n <button mat-menu-item (click)='setProfileState(key)'>\r\n <div style='display: flex; align-items: center; justify-content: space-between;'>\r\n <span style='display:flex;'>{{key}}</span>\r\n <span style='display:flex;'>\r\n <span style=\"width: 120px;\"></span>\r\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n </span>\r\n </div>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n <ng-container *opDialog='add'>\r\n <mat-form-field>\r\n <input style='width:90%' matInput #addedKey />\r\n </mat-form-field>\r\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\r\n [disabled]=\"!addedKey.value\">Add</button>\r\n </ng-container>\r\n </ng-template>\r\n\r\n </ng-container>\r\n\r\n</ng-container>\r\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"] }]
|