@one-paragon/angular-utilities 2.7.0 → 2.7.1
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.
|
@@ -2893,6 +2893,12 @@ function cleanPersistedState(state, pState) {
|
|
|
2893
2893
|
const metas = Object.values(state.metaData);
|
|
2894
2894
|
const filters = Object.values(pState.filters).filter(fltr => isCustomFilter(fltr) || metas.some(m => m.key === fltr.key)).reduce((obj, filter) => {
|
|
2895
2895
|
obj[filter.filterId] = pState.filters[filter.filterId];
|
|
2896
|
+
if (isFilterInfo(filter)) {
|
|
2897
|
+
const metaData = state.metaData[filter.key];
|
|
2898
|
+
if (metaData) {
|
|
2899
|
+
filter.filterBy = metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy;
|
|
2900
|
+
}
|
|
2901
|
+
}
|
|
2896
2902
|
return obj;
|
|
2897
2903
|
}, {});
|
|
2898
2904
|
const sorted = pState.sorted.filter(s => metas.some(m => m.key === s.active));
|
|
@@ -2919,7 +2925,6 @@ const mergeMeta = (orig, merge) => {
|
|
|
2919
2925
|
width: merge.width ?? orig.width,
|
|
2920
2926
|
noExport: merge.noExport || orig.noExport,
|
|
2921
2927
|
noFilter: merge.noFilter || orig.noFilter,
|
|
2922
|
-
customCell: merge.customCell ?? orig.customCell,
|
|
2923
2928
|
transform: merge.transform ?? orig.transform,
|
|
2924
2929
|
map: merge.map ?? orig.map,
|
|
2925
2930
|
click: merge.click ?? orig.click,
|
|
@@ -3038,6 +3043,8 @@ class TableStore extends ComponentStore {
|
|
|
3038
3043
|
if (!filter.filterId) {
|
|
3039
3044
|
filter.filterId = crypto.randomUUID();
|
|
3040
3045
|
}
|
|
3046
|
+
const metaData = state.metaData[filter.key];
|
|
3047
|
+
filter.filterBy = metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy;
|
|
3041
3048
|
filtersObj[filter.filterId] = filter;
|
|
3042
3049
|
return filtersObj;
|
|
3043
3050
|
}, {});
|
|
@@ -3826,7 +3833,6 @@ class FilterComponent {
|
|
|
3826
3833
|
this.$enteredFilterType = signal(undefined, ...(ngDevMode ? [{ debugName: "$enteredFilterType" }] : []));
|
|
3827
3834
|
this.$currentFilterType = computed(() => this.$enteredFilterType() || this.$filter()?.filterType, ...(ngDevMode ? [{ debugName: "$currentFilterType" }] : []));
|
|
3828
3835
|
this.$availableFilterTypes = computed(() => this.filterTypes[this.$filter()?.fieldType], ...(ngDevMode ? [{ debugName: "$availableFilterTypes" }] : []));
|
|
3829
|
-
this.$filterBy = computed(() => this.$filter().filterBy, ...(ngDevMode ? [{ debugName: "$filterBy" }] : []));
|
|
3830
3836
|
}
|
|
3831
3837
|
onEnter(filter, event) {
|
|
3832
3838
|
event.preventDefault();
|
|
@@ -3836,7 +3842,7 @@ class FilterComponent {
|
|
|
3836
3842
|
}
|
|
3837
3843
|
}
|
|
3838
3844
|
addFilter(filter) {
|
|
3839
|
-
this.state.addFilter({ ...filter
|
|
3845
|
+
this.state.addFilter({ ...filter });
|
|
3840
3846
|
this.done$.next();
|
|
3841
3847
|
}
|
|
3842
3848
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -3915,7 +3921,6 @@ class GenFilterDisplayerComponent {
|
|
|
3915
3921
|
this.filterStore.addFilter({
|
|
3916
3922
|
key: metaData.key,
|
|
3917
3923
|
fieldType: metaData.filterLogic?.filterType || metaData.fieldType,
|
|
3918
|
-
filterBy: metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy
|
|
3919
3924
|
});
|
|
3920
3925
|
}
|
|
3921
3926
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GenFilterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -4304,7 +4309,6 @@ class ColumnHeaderMenuComponent {
|
|
|
4304
4309
|
filterType: this.$currentFilterType(),
|
|
4305
4310
|
filterValue: filter.filterValue,
|
|
4306
4311
|
key: metaData.key,
|
|
4307
|
-
filterBy: metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy
|
|
4308
4312
|
});
|
|
4309
4313
|
this.$trigger().closeMenu();
|
|
4310
4314
|
}
|
|
@@ -4315,7 +4319,6 @@ class ColumnHeaderMenuComponent {
|
|
|
4315
4319
|
this.addFilter$.next({
|
|
4316
4320
|
key: metaData.key,
|
|
4317
4321
|
fieldType: metaData.filterLogic?.filterType || metaData.fieldType,
|
|
4318
|
-
filterBy: metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy
|
|
4319
4322
|
});
|
|
4320
4323
|
}
|
|
4321
4324
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -4493,7 +4496,7 @@ class ColumnBuilderComponent {
|
|
|
4493
4496
|
}
|
|
4494
4497
|
}
|
|
4495
4498
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4496
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "$columnDef", first: true, predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "$bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let customCell = $customCell();\r\n@let styles = $styles()!;\r\n\r\n@if(metaData)\r\n{\r\n <ng-container [matColumnDef]=\"metaData.key\">\r\n\r\n <!-- header -->\r\n <ng-template #myHeader matHeaderCellDef>\r\n <mat-header-cell class=\"column-head\" cdkDrag resizeColumn [style]='styles?.header' [key]=\"metaData.key\"\r\n [class]='metaData.additional?.columnPartClasses?.header'>\r\n <div class=\"header-container\" cdkDragHandle>\r\n @if(!customCell?.columnDef?.headerCell)\r\n {\r\n @if(metaData.fieldType !== FieldType.NotMapped || !!metaData.sortLogic?.sortBy)\r\n {\r\n <div mat-sort-header style=\"width: 100%\"
|
|
4499
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "$columnDef", first: true, predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "$bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let customCell = $customCell();\r\n@let styles = $styles()!;\r\n\r\n@if(metaData)\r\n{\r\n <ng-container [matColumnDef]=\"metaData.key\">\r\n\r\n <!-- header -->\r\n <ng-template #myHeader matHeaderCellDef>\r\n <mat-header-cell class=\"column-head\" cdkDrag resizeColumn [style]='styles?.header' [key]=\"metaData.key\"\r\n [class]='metaData.additional?.columnPartClasses?.header'>\r\n <div class=\"header-container\" cdkDragHandle>\r\n @if(!customCell?.columnDef?.headerCell)\r\n {\r\n @if((metaData.fieldType !== FieldType.NotMapped || !!metaData.sortLogic?.sortBy) && !metaData.noSort)\r\n {\r\n <div mat-sort-header style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n }\r\n @else if(metaData.fieldType === FieldType.NotMapped || metaData.noSort)\r\n {\r\n <div style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n }\r\n @if($showFilters())\r\n {\r\n <tb-header-menu #menu [metaData]='metaData' />\r\n }\r\n }\r\n @else\r\n {\r\n <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles: styles?.header} \" />\r\n }\r\n </div>\r\n </mat-header-cell>\r\n </ng-template>\r\n \r\n <!-- body -->\r\n <ng-container *matCellDef=\"let element;\">\r\n <ng-container *ngTemplateOutlet=\"$outerTemplate()!; context: { metaData: metaData, element: element , styles: styles?.body, $implicit: element }\"/>\r\n </ng-container>\r\n <ng-template #body let-element='element' >\r\n <mat-cell [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\" \r\n [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body'\r\n (click)='cellClicked(element, metaData.key, $event)' >\r\n <ng-container *ngTemplateOutlet=\"$innerTemplate()!;\r\n context: {\r\n value: ($transform()! | func : element),\r\n element: element,\r\n additional: $additional(),\r\n innerStyles: styles.innerBody,\r\n $implicit: element\r\n }; Injector: injector\" />\r\n </mat-cell>\r\n </ng-template>\r\n \r\n <!-- footer -->\r\n <ng-template matFooterCellDef>\r\n @if(customCell?.columnDef?.footerCell)\r\n {\r\n <ng-container\r\n *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template;\r\n context: {metaData: metaData, data: $data, styles : styles.footer }\"/>\r\n }\r\n @else\r\n {\r\n @let data = $data();\r\n <mat-footer-cell [style]='styles.footer' [class]='metaData.additional?.columnPartClasses?.footer'>\r\n @if(!!data?.length && metaData.additional?.footer)\r\n {\r\n <span class=\"bold\">\r\n @switch (metaData.fieldType)\r\n {\r\n @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n }\r\n </span>\r\n }\r\n \r\n </mat-footer-cell>\r\n }\r\n </ng-template>\r\n </ng-container>\r\n}", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: ColumnHeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
|
|
4497
4500
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
4498
4501
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4499
4502
|
}
|
|
@@ -4505,7 +4508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
4505
4508
|
MatTableModule, NgTemplateOutlet, ResizeColumnDirective, FunctionPipe, StylerDirective,
|
|
4506
4509
|
ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, ColumnHeaderMenuComponent,
|
|
4507
4510
|
MatTooltipModule, ColumnTotalPipe, CurrencyPipe, DecimalPipe
|
|
4508
|
-
], template: "@let metaData = $metaData();\r\n@let customCell = $customCell();\r\n@let styles = $styles()!;\r\n\r\n@if(metaData)\r\n{\r\n <ng-container [matColumnDef]=\"metaData.key\">\r\n\r\n <!-- header -->\r\n <ng-template #myHeader matHeaderCellDef>\r\n <mat-header-cell class=\"column-head\" cdkDrag resizeColumn [style]='styles?.header' [key]=\"metaData.key\"\r\n [class]='metaData.additional?.columnPartClasses?.header'>\r\n <div class=\"header-container\" cdkDragHandle>\r\n @if(!customCell?.columnDef?.headerCell)\r\n {\r\n @if(metaData.fieldType !== FieldType.NotMapped || !!metaData.sortLogic?.sortBy)\r\n {\r\n <div mat-sort-header style=\"width: 100%\"
|
|
4511
|
+
], template: "@let metaData = $metaData();\r\n@let customCell = $customCell();\r\n@let styles = $styles()!;\r\n\r\n@if(metaData)\r\n{\r\n <ng-container [matColumnDef]=\"metaData.key\">\r\n\r\n <!-- header -->\r\n <ng-template #myHeader matHeaderCellDef>\r\n <mat-header-cell class=\"column-head\" cdkDrag resizeColumn [style]='styles?.header' [key]=\"metaData.key\"\r\n [class]='metaData.additional?.columnPartClasses?.header'>\r\n <div class=\"header-container\" cdkDragHandle>\r\n @if(!customCell?.columnDef?.headerCell)\r\n {\r\n @if((metaData.fieldType !== FieldType.NotMapped || !!metaData.sortLogic?.sortBy) && !metaData.noSort)\r\n {\r\n <div mat-sort-header style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n }\r\n @else if(metaData.fieldType === FieldType.NotMapped || metaData.noSort)\r\n {\r\n <div style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n }\r\n @if($showFilters())\r\n {\r\n <tb-header-menu #menu [metaData]='metaData' />\r\n }\r\n }\r\n @else\r\n {\r\n <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles: styles?.header} \" />\r\n }\r\n </div>\r\n </mat-header-cell>\r\n </ng-template>\r\n \r\n <!-- body -->\r\n <ng-container *matCellDef=\"let element;\">\r\n <ng-container *ngTemplateOutlet=\"$outerTemplate()!; context: { metaData: metaData, element: element , styles: styles?.body, $implicit: element }\"/>\r\n </ng-container>\r\n <ng-template #body let-element='element' >\r\n <mat-cell [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\" \r\n [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body'\r\n (click)='cellClicked(element, metaData.key, $event)' >\r\n <ng-container *ngTemplateOutlet=\"$innerTemplate()!;\r\n context: {\r\n value: ($transform()! | func : element),\r\n element: element,\r\n additional: $additional(),\r\n innerStyles: styles.innerBody,\r\n $implicit: element\r\n }; Injector: injector\" />\r\n </mat-cell>\r\n </ng-template>\r\n \r\n <!-- footer -->\r\n <ng-template matFooterCellDef>\r\n @if(customCell?.columnDef?.footerCell)\r\n {\r\n <ng-container\r\n *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template;\r\n context: {metaData: metaData, data: $data, styles : styles.footer }\"/>\r\n }\r\n @else\r\n {\r\n @let data = $data();\r\n <mat-footer-cell [style]='styles.footer' [class]='metaData.additional?.columnPartClasses?.footer'>\r\n @if(!!data?.length && metaData.additional?.footer)\r\n {\r\n <span class=\"bold\">\r\n @switch (metaData.fieldType)\r\n {\r\n @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n }\r\n </span>\r\n }\r\n \r\n </mat-footer-cell>\r\n }\r\n </ng-template>\r\n </ng-container>\r\n}", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"] }]
|
|
4509
4512
|
}], propDecorators: { $columnDef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatColumnDef), { isSignal: true }] }], $bodyTemplate: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }] } });
|
|
4510
4513
|
|
|
4511
4514
|
// If we are only sorting due to a change in the Sorts[] we can 'optimize'. If the sort array was first by column a asc then by column b desc then by column c asc,
|