@one-paragon/angular-utilities 2.0.12 → 2.0.14
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/fesm2022/one-paragon-angular-utilities.mjs +57 -56
- package/fesm2022/one-paragon-angular-utilities.mjs.map +1 -1
- package/package.json +1 -1
- package/table-builder/components/column-builder/column-builder.component.d.ts +2 -1
- package/table-builder/components/column-builder/column-helpers.d.ts +2 -0
- package/table-builder/interfaces/report-def.d.ts +7 -11
- package/utilities/directives/conditional-classes.directive.d.ts +4 -5
- package/utilities/directives/styler.d.ts +6 -5
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, computed, isSignal, Injectable, Pipe, input, signal, Renderer2, ElementRef, booleanAttribute, InjectionToken, makeEnvironmentProviders, Component, ChangeDetectionStrategy, HostListener, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, output, ViewChild, EnvironmentInjector, createComponent, viewChild, linkedSignal,
|
|
2
|
+
import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, computed, isSignal, Injectable, Pipe, input, signal, Renderer2, ElementRef, booleanAttribute, InjectionToken, makeEnvironmentProviders, Component, ChangeDetectionStrategy, HostListener, EventEmitter, untracked, Output, effect, ContentChildren, ChangeDetectorRef, output, ViewChild, EnvironmentInjector, createComponent, viewChild, linkedSignal, contentChild, forwardRef, contentChildren, model, runInInjectionContext, provideAppInitializer } from '@angular/core';
|
|
3
3
|
import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, distinctUntilChanged, observeOn, debounceTime, scan as scan$1, timestamp as timestamp$1, first as first$1 } from 'rxjs/operators';
|
|
4
4
|
import * as i1 from 'rxjs';
|
|
5
5
|
import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, timestamp, animationFrameScheduler, debounceTime as debounceTime$1, BehaviorSubject } from 'rxjs';
|
|
@@ -2554,40 +2554,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
|
|
|
2554
2554
|
class StylerDirective {
|
|
2555
2555
|
el = inject(ElementRef);
|
|
2556
2556
|
renderer = inject(Renderer2);
|
|
2557
|
-
stylesApplied = {};
|
|
2558
|
-
element;
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
}
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2557
|
+
$stylesApplied = signal({});
|
|
2558
|
+
$element = input.required({ alias: 'element' });
|
|
2559
|
+
$styler = input.required({ alias: 'styler' });
|
|
2560
|
+
#stylerEffect = effect(() => {
|
|
2561
|
+
const styles = this.$styler();
|
|
2562
|
+
untracked(() => {
|
|
2563
|
+
const element = this.$element();
|
|
2564
|
+
const toApply = Object.entries(styles ?? {}).reduce((acc, [key, val]) => {
|
|
2565
|
+
if (!val)
|
|
2566
|
+
return acc;
|
|
2567
|
+
if (typeof (val) === 'string') {
|
|
2568
|
+
acc[key] = val;
|
|
2569
|
+
this.el.nativeElement.style[key] = val;
|
|
2570
|
+
}
|
|
2571
|
+
else if (!val?.condition || val?.condition === true || val?.condition(element)) {
|
|
2572
|
+
const value = typeof (val.value) === 'string' ? val.value : val?.value(element);
|
|
2573
|
+
acc[key] = value;
|
|
2574
|
+
this.el.nativeElement.style[key] = value;
|
|
2575
|
+
}
|
|
2576
|
+
return acc;
|
|
2577
|
+
}, {});
|
|
2578
|
+
Object.keys(this.$stylesApplied()).filter(key => !Object.keys(toApply).includes(key)).forEach(key => {
|
|
2579
|
+
this.renderer.removeStyle(this.el.nativeElement, key);
|
|
2580
|
+
});
|
|
2581
|
+
this.$stylesApplied.set(toApply);
|
|
2574
2582
|
});
|
|
2575
|
-
|
|
2576
|
-
}
|
|
2577
|
-
;
|
|
2583
|
+
});
|
|
2578
2584
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: StylerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2579
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
2585
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: StylerDirective, isStandalone: true, selector: "[styler]", inputs: { $element: { classPropertyName: "$element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, $styler: { classPropertyName: "$styler", publicName: "styler", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
2580
2586
|
}
|
|
2581
2587
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: StylerDirective, decorators: [{
|
|
2582
2588
|
type: Directive,
|
|
2583
|
-
args: [{
|
|
2584
|
-
|
|
2585
|
-
}]
|
|
2586
|
-
}], propDecorators: { element: [{
|
|
2587
|
-
type: Input
|
|
2588
|
-
}], styler: [{
|
|
2589
|
-
type: Input
|
|
2590
|
-
}] } });
|
|
2589
|
+
args: [{ selector: '[styler]' }]
|
|
2590
|
+
}] });
|
|
2591
2591
|
|
|
2592
2592
|
class MatSlideToggleGroupDirective {
|
|
2593
2593
|
allowMultiple = false;
|
|
@@ -2690,35 +2690,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
|
|
|
2690
2690
|
class ConditionalClassesDirective {
|
|
2691
2691
|
el = inject(ElementRef);
|
|
2692
2692
|
renderer = inject(Renderer2);
|
|
2693
|
-
element;
|
|
2694
|
-
classes;
|
|
2693
|
+
$element = input.required({ alias: 'element' });
|
|
2694
|
+
$classes = input(undefined, { alias: 'conditionalClasses' });
|
|
2695
2695
|
classesApplied = [];
|
|
2696
|
-
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
|
|
2703
|
-
|
|
2704
|
-
|
|
2705
|
-
|
|
2706
|
-
|
|
2707
|
-
|
|
2696
|
+
#onClasses = effect(() => {
|
|
2697
|
+
const classes = this.$classes();
|
|
2698
|
+
untracked(() => {
|
|
2699
|
+
const element = this.$element();
|
|
2700
|
+
let toApply = [];
|
|
2701
|
+
if (classes) {
|
|
2702
|
+
toApply = Object.keys(classes)
|
|
2703
|
+
.filter(key => (classes[key] === true) || classes[key](element));
|
|
2704
|
+
}
|
|
2705
|
+
var classesNotYetApplied = toApply.filter(c => !this.classesApplied.includes(c));
|
|
2706
|
+
var classesToRemove = this.classesApplied.filter(c => !toApply.includes(c));
|
|
2707
|
+
classesToRemove.forEach(c => this.renderer.removeClass(this.el.nativeElement, c));
|
|
2708
|
+
classesNotYetApplied.forEach(c => this.renderer.addClass(this.el.nativeElement, c));
|
|
2709
|
+
this.classesApplied = toApply;
|
|
2710
|
+
});
|
|
2711
|
+
});
|
|
2708
2712
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ConditionalClassesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2709
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
2713
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: ConditionalClassesDirective, isStandalone: true, selector: "[conditionalClasses]", inputs: { $element: { classPropertyName: "$element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, $classes: { classPropertyName: "$classes", publicName: "conditionalClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
2710
2714
|
}
|
|
2711
2715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ConditionalClassesDirective, decorators: [{
|
|
2712
2716
|
type: Directive,
|
|
2713
2717
|
args: [{
|
|
2714
2718
|
selector: '[conditionalClasses]',
|
|
2715
2719
|
}]
|
|
2716
|
-
}]
|
|
2717
|
-
type: Input
|
|
2718
|
-
}], classes: [{
|
|
2719
|
-
type: Input,
|
|
2720
|
-
args: ['conditionalClasses']
|
|
2721
|
-
}] } });
|
|
2720
|
+
}] });
|
|
2722
2721
|
|
|
2723
2722
|
class UtilitiesModule {
|
|
2724
2723
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -3384,14 +3383,15 @@ class InitializationComponent {
|
|
|
3384
3383
|
defaultTemplate;
|
|
3385
3384
|
defaultWithIcon;
|
|
3386
3385
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3387
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: InitializationComponent, isStandalone: true, selector: "initialization", viewQueries: [{ propertyName: "linkTemplate", first: true, predicate: ["link"], descendants: true, static: true }, { propertyName: "routerLinkTemplate", first: true, predicate: ["routerLink"], descendants: true, static: true }, { propertyName: "linkWithIconTemplate", first: true, predicate: ["linkWithIcon"], descendants: true, static: true }, { propertyName: "routerLinkWithIconTemplate", first: true, predicate: ["routerLinkWithIcon"], descendants: true, static: true }, { propertyName: "imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, static: true }, { propertyName: "arrayNewLineTemplate", first: true, predicate: ["arrayNewLine"], descendants: true, static: true }, { propertyName: "arrayCommaTemplate", first: true, predicate: ["arrayComma"], descendants: true, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["default"], descendants: true, static: true }, { propertyName: "defaultWithIcon", first: true, predicate: ["defaultWithIcon"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #link let-value='value' let-element='element' let-additional=\"additional\">\r\n <tb-link-column [element]=\"element\" [additional]=\"additional\">\r\n {{value}}
|
|
3386
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: InitializationComponent, isStandalone: true, selector: "initialization", viewQueries: [{ propertyName: "linkTemplate", first: true, predicate: ["link"], descendants: true, static: true }, { propertyName: "routerLinkTemplate", first: true, predicate: ["routerLink"], descendants: true, static: true }, { propertyName: "linkWithIconTemplate", first: true, predicate: ["linkWithIcon"], descendants: true, static: true }, { propertyName: "routerLinkWithIconTemplate", first: true, predicate: ["routerLinkWithIcon"], descendants: true, static: true }, { propertyName: "imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, static: true }, { propertyName: "arrayNewLineTemplate", first: true, predicate: ["arrayNewLine"], descendants: true, static: true }, { propertyName: "arrayCommaTemplate", first: true, predicate: ["arrayComma"], descendants: true, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["default"], descendants: true, static: true }, { propertyName: "defaultWithIcon", first: true, predicate: ["defaultWithIcon"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #link let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n <tb-link-column [element]=\"element\" [additional]=\"additional\">\r\n <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n </tb-link-column>\r\n</ng-template>\r\n\r\n<ng-template #routerLink let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n <tb-router-link-column [element]=\"element\" [additional]=\"additional\">\r\n <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n </tb-router-link-column>\r\n</ng-template>\r\n\r\n<ng-template #linkWithIcon let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n <tb-link-column [element]=\"element\" [additional]=\"additional\">\r\n <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n </tb-link-column>\r\n</ng-template>\r\n\r\n<ng-template #routerLinkWithIcon let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n <tb-router-link-column [element]=\"element\" [additional]=\"additional\">\r\n <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n </tb-router-link-column>\r\n</ng-template>\r\n\r\n<ng-template #imageUrl let-value='value'>\r\n <span>\r\n <img src=\"{{value}}\" height=\"75px\" width=\"75px\" />\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n <tb-new-line-array-column [value]='value' [additional]='additional' [styler]=\"styles\" [element]=\"element\"/>\r\n</ng-template>\r\n\r\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n <tb-comma-array-column [value]='value' [additional]='additional' [styler]=\"styles\" [element]=\"element\"/>\r\n</ng-template>\r\n\r\n<ng-template #default let-value='value' let-element='element' let-styles=\"innerStyles\">\r\n <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon let-value='value' let-element='element' let-styles=\"innerStyles\">\r\n <mat-icon [styler]=\"styles\" [element]=\"element\">{{value}}</mat-icon>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: LinkColumnComponent, selector: "tb-link-column", inputs: ["element", "additional"] }, { kind: "component", type: ArrayCommaColumnComponent, selector: "tb-comma-array-column", inputs: ["value", "additional"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RouterLinkColumnComponent, selector: "tb-router-link-column", inputs: ["additional", "element"] }, { kind: "component", type: ArrayNewLineColumnComponent, selector: "tb-new-line-array-column", inputs: ["value", "additional"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }] });
|
|
3388
3387
|
}
|
|
3389
3388
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InitializationComponent, decorators: [{
|
|
3390
3389
|
type: Component,
|
|
3391
3390
|
args: [{ selector: 'initialization', imports: [
|
|
3392
3391
|
LinkColumnComponent, ArrayCommaColumnComponent, MatIcon,
|
|
3393
|
-
RouterLinkColumnComponent, ArrayNewLineColumnComponent
|
|
3394
|
-
|
|
3392
|
+
RouterLinkColumnComponent, ArrayNewLineColumnComponent,
|
|
3393
|
+
StylerDirective
|
|
3394
|
+
], template: "<ng-template #link let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n <tb-link-column [element]=\"element\" [additional]=\"additional\">\r\n <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n </tb-link-column>\r\n</ng-template>\r\n\r\n<ng-template #routerLink let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n <tb-router-link-column [element]=\"element\" [additional]=\"additional\">\r\n <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n </tb-router-link-column>\r\n</ng-template>\r\n\r\n<ng-template #linkWithIcon let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n <tb-link-column [element]=\"element\" [additional]=\"additional\">\r\n <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n </tb-link-column>\r\n</ng-template>\r\n\r\n<ng-template #routerLinkWithIcon let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n <tb-router-link-column [element]=\"element\" [additional]=\"additional\">\r\n <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n </tb-router-link-column>\r\n</ng-template>\r\n\r\n<ng-template #imageUrl let-value='value'>\r\n <span>\r\n <img src=\"{{value}}\" height=\"75px\" width=\"75px\" />\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n <tb-new-line-array-column [value]='value' [additional]='additional' [styler]=\"styles\" [element]=\"element\"/>\r\n</ng-template>\r\n\r\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n <tb-comma-array-column [value]='value' [additional]='additional' [styler]=\"styles\" [element]=\"element\"/>\r\n</ng-template>\r\n\r\n<ng-template #default let-value='value' let-element='element' let-styles=\"innerStyles\">\r\n <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon let-value='value' let-element='element' let-styles=\"innerStyles\">\r\n <mat-icon [styler]=\"styles\" [element]=\"element\">{{value}}</mat-icon>\r\n</ng-template>\r\n" }]
|
|
3395
3395
|
}], propDecorators: { linkTemplate: [{
|
|
3396
3396
|
type: ViewChild,
|
|
3397
3397
|
args: ['link', { static: true }]
|
|
@@ -3592,6 +3592,7 @@ const columnStyles = (metaData, userDefinedWidth, tableSettingsMinWidth) => {
|
|
|
3592
3592
|
const styles = {
|
|
3593
3593
|
header: { ...tableWidth, ...fullMetaStyles, ...metaData.additional?.columnPartStyles?.header, ...userWidth },
|
|
3594
3594
|
footer: { ...tableWidth, ...fullMetaStyles, ...metaData.additional?.columnPartStyles?.footer, ...userWidth },
|
|
3595
|
+
innerBody: { ...metaData.additional?.columnPartStyles?.innerBody },
|
|
3595
3596
|
body: { ...tableWidth, ...fullMetaStyles, ...metaData.additional?.columnPartStyles?.body, ...userWidth },
|
|
3596
3597
|
};
|
|
3597
3598
|
return styles;
|
|
@@ -3702,7 +3703,7 @@ class ColumnBuilderComponent {
|
|
|
3702
3703
|
return metaData.toolTip(element);
|
|
3703
3704
|
};
|
|
3704
3705
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ColumnBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3705
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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 matHeaderCellDef #myHeader>\r\n <mat-header-cell cdkDrag [style]='styles?.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\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){\r\n <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n } @else if(metaData.fieldType === FieldType.NotMapped){\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 <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 </ng-container>\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) : ''\" [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n <ng-container *ngTemplateOutlet=\"$innerTemplate()!; context: { value: ($transform()! | func : element), element: element, additional: $additional(), $implicit: element }; 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 <ng-container\r\n *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: $data, styles : styles.footer }\"/>\r\n } @else {\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 <span class=\"bold\">\r\n @switch (metaData.fieldType) {\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: "pipe", type: FunctionPipe, name: "func" }, { 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$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "component", type: ColumnHeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
|
|
3706
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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 matHeaderCellDef #myHeader>\r\n <mat-header-cell cdkDrag [style]='styles?.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\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){\r\n <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n } @else if(metaData.fieldType === FieldType.NotMapped){\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 <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 </ng-container>\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) : ''\" [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n <ng-container *ngTemplateOutlet=\"$innerTemplate()!; context: { value: ($transform()! | func : element), element: element, additional: $additional(), innerStyles: styles.innerBody, $implicit: element }; 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 <ng-container\r\n *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: $data, styles : styles.footer }\"/>\r\n } @else {\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 <span class=\"bold\">\r\n @switch (metaData.fieldType) {\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: "pipe", type: FunctionPipe, name: "func" }, { 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$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "component", type: ColumnHeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
|
|
3706
3707
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
3707
3708
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3708
3709
|
}
|
|
@@ -3714,7 +3715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
|
|
|
3714
3715
|
MatTableModule, NgTemplateOutlet, ResizeColumnDirective, FunctionPipe, StylerDirective,
|
|
3715
3716
|
ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, ColumnHeaderMenuComponent,
|
|
3716
3717
|
MatTooltipModule, ColumnTotalPipe, CurrencyPipe, DecimalPipe
|
|
3717
|
-
], 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 matHeaderCellDef #myHeader>\r\n <mat-header-cell cdkDrag [style]='styles?.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\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){\r\n <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n } @else if(metaData.fieldType === FieldType.NotMapped){\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 <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 </ng-container>\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) : ''\" [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n <ng-container *ngTemplateOutlet=\"$innerTemplate()!; context: { value: ($transform()! | func : element), element: element, additional: $additional(), $implicit: element }; 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 <ng-container\r\n *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: $data, styles : styles.footer }\"/>\r\n } @else {\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 <span class=\"bold\">\r\n @switch (metaData.fieldType) {\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"] }]
|
|
3718
|
+
], 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 matHeaderCellDef #myHeader>\r\n <mat-header-cell cdkDrag [style]='styles?.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\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){\r\n <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n } @else if(metaData.fieldType === FieldType.NotMapped){\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 <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 </ng-container>\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) : ''\" [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n <ng-container *ngTemplateOutlet=\"$innerTemplate()!; context: { value: ($transform()! | func : element), element: element, additional: $additional(), innerStyles: styles.innerBody, $implicit: element }; 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 <ng-container\r\n *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: $data, styles : styles.footer }\"/>\r\n } @else {\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 <span class=\"bold\">\r\n @switch (metaData.fieldType) {\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"] }]
|
|
3718
3719
|
}] });
|
|
3719
3720
|
|
|
3720
3721
|
// 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,
|