@saydar/table-builder 1.0.14 → 1.0.15-beta.0
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.
|
@@ -1444,29 +1444,56 @@ const isNull = (filterInfo) => {
|
|
|
1444
1444
|
return func;
|
|
1445
1445
|
};
|
|
1446
1446
|
|
|
1447
|
+
// Splits on comma, tab, newline, or carriage return (consecutive delimiters collapse).
|
|
1448
|
+
// Plain space is deliberately excluded: legitimate filter values often contain spaces
|
|
1449
|
+
// (company names, addresses, descriptions) and a user can't accidentally type tab or
|
|
1450
|
+
// newline into a single-line input — so these are unambiguous "I copy-pasted multiple
|
|
1451
|
+
// values" signals.
|
|
1452
|
+
const DELIMITERS = /[,\t\n\r]+/;
|
|
1447
1453
|
function splitCommaValue(value) {
|
|
1448
|
-
if (typeof value === 'string' &&
|
|
1449
|
-
return value.split(
|
|
1454
|
+
if (typeof value === 'string' && DELIMITERS.test(value)) {
|
|
1455
|
+
return value.split(DELIMITERS).map(s => s.trim()).filter(s => s);
|
|
1450
1456
|
}
|
|
1451
1457
|
return value;
|
|
1452
1458
|
}
|
|
1453
1459
|
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1460
|
+
function hasWildcard(s) {
|
|
1461
|
+
return typeof s === 'string' && /[*?]/.test(s);
|
|
1462
|
+
}
|
|
1463
|
+
function wildcardToRegex(pattern, anchor) {
|
|
1464
|
+
const escaped = pattern
|
|
1465
|
+
.replace(/[.+^${}()|[\]\\]/g, '\\$&')
|
|
1466
|
+
.replace(/\*/g, '.*')
|
|
1467
|
+
.replace(/\?/g, '.');
|
|
1468
|
+
const prefix = anchor === 'start' || anchor === 'both' ? '^' : '';
|
|
1469
|
+
const suffix = anchor === 'end' || anchor === 'both' ? '$' : '';
|
|
1470
|
+
return new RegExp(prefix + escaped + suffix, 'i');
|
|
1471
|
+
}
|
|
1472
|
+
|
|
1473
|
+
const makeSegmentMatcher = (segment, anchor, literalOp) => {
|
|
1474
|
+
const prepped = prepareForStringCompare(segment);
|
|
1475
|
+
if (hasWildcard(prepped)) {
|
|
1476
|
+
const re = wildcardToRegex(prepped, anchor);
|
|
1477
|
+
return (val) => re.test(val);
|
|
1459
1478
|
}
|
|
1460
|
-
|
|
1461
|
-
|
|
1479
|
+
return (val) => literalOp(val, prepped);
|
|
1480
|
+
};
|
|
1481
|
+
const makeStringFunc = (anchor, literalOp) => (filterInfo) => {
|
|
1482
|
+
const filterValue = splitCommaValue(filterInfo.filterValue);
|
|
1483
|
+
const segments = Array.isArray(filterValue) ? filterValue : [filterValue];
|
|
1484
|
+
const matchers = segments.map(seg => makeSegmentMatcher(seg, anchor, literalOp));
|
|
1485
|
+
return (val) => {
|
|
1486
|
+
const prepped = prepareForStringCompare(val) ?? '';
|
|
1487
|
+
return matchers.some(m => m(prepped));
|
|
1488
|
+
};
|
|
1462
1489
|
};
|
|
1463
|
-
const stringEqualFunc = makeStringFunc((a, b) => a === b);
|
|
1464
|
-
const stringContainsFunc = makeStringFunc((a, b) => a.includes(b));
|
|
1465
|
-
const stringStartsWithFunc = makeStringFunc((a, b) => a.startsWith(b));
|
|
1466
|
-
const stringEndsWithFunc = makeStringFunc((a, b) => a.endsWith(b));
|
|
1490
|
+
const stringEqualFunc = makeStringFunc('both', (a, b) => a === b);
|
|
1491
|
+
const stringContainsFunc = makeStringFunc('none', (a, b) => a.includes(b));
|
|
1492
|
+
const stringStartsWithFunc = makeStringFunc('start', (a, b) => a.startsWith(b));
|
|
1493
|
+
const stringEndsWithFunc = makeStringFunc('end', (a, b) => a.endsWith(b));
|
|
1467
1494
|
const stringDoesNotContainFunc = (filterInfo) => {
|
|
1468
|
-
const
|
|
1469
|
-
return (
|
|
1495
|
+
const match = makeSegmentMatcher(filterInfo.filterValue, 'none', (a, b) => a.includes(b));
|
|
1496
|
+
return (val) => !match(prepareForStringCompare(val) ?? '');
|
|
1470
1497
|
};
|
|
1471
1498
|
const multipleStringValuesEqualsFunc = (filterInfo) => {
|
|
1472
1499
|
const filterVals = filterInfo.filterValue.map((v) => prepareForStringCompare(v));
|
|
@@ -2954,6 +2981,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
2954
2981
|
type: Input
|
|
2955
2982
|
}] } });
|
|
2956
2983
|
|
|
2984
|
+
// Helpers for preserving multi-line / tab-separated paste content into single-line
|
|
2985
|
+
// <input> elements. Browsers replace `\n` with a space when pasting into a single-line
|
|
2986
|
+
// input, which destroys the structure of an Excel column paste before any framework code
|
|
2987
|
+
// can see it. The trick is to intercept the `paste` event, read the raw clipboard text,
|
|
2988
|
+
// and write it directly into the input's value via the prototype setter so frameworks
|
|
2989
|
+
// (Angular's ngModel, etc.) still get a synthetic input event.
|
|
2990
|
+
function hasPreservableDelimiters(text) {
|
|
2991
|
+
return !!text && /[\n\r\t]/.test(text);
|
|
2992
|
+
}
|
|
2993
|
+
function injectPasteText(input, text) {
|
|
2994
|
+
const start = input.selectionStart ?? input.value.length;
|
|
2995
|
+
const end = input.selectionEnd ?? input.value.length;
|
|
2996
|
+
const newValue = input.value.slice(0, start) + text + input.value.slice(end);
|
|
2997
|
+
const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
|
|
2998
|
+
setter?.call(input, newValue);
|
|
2999
|
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
3000
|
+
}
|
|
3001
|
+
|
|
3002
|
+
/**
|
|
3003
|
+
* Apply to any single-line `<input>` to keep tab and newline characters from being
|
|
3004
|
+
* silently replaced with spaces on paste. The pasted text is injected via the native
|
|
3005
|
+
* value setter so Angular's ngModel still sees the change.
|
|
3006
|
+
*
|
|
3007
|
+
* Pair with `splitCommaValue` (or any predicate that handles `[,\t\n\r]+` delimiters)
|
|
3008
|
+
* for the multi-value semantics. Plain typed input with regular spaces is untouched.
|
|
3009
|
+
*/
|
|
3010
|
+
class PreservePasteDelimitersDirective {
|
|
3011
|
+
constructor(host) {
|
|
3012
|
+
this.host = host;
|
|
3013
|
+
}
|
|
3014
|
+
onPaste(e) {
|
|
3015
|
+
const text = e.clipboardData?.getData('text/plain');
|
|
3016
|
+
if (!hasPreservableDelimiters(text))
|
|
3017
|
+
return;
|
|
3018
|
+
e.preventDefault();
|
|
3019
|
+
// Single-line <input> sanitizes its `.value` by stripping newlines per HTML spec,
|
|
3020
|
+
// so injecting raw newlines would lose them. Convert tab/newline runs to commas
|
|
3021
|
+
// before injection — splitter handles commas, and the user sees the normalized
|
|
3022
|
+
// value as visible confirmation of how their paste was interpreted.
|
|
3023
|
+
const normalized = text.replace(/[\t\n\r]+/g, ',');
|
|
3024
|
+
injectPasteText(this.host.nativeElement, normalized);
|
|
3025
|
+
}
|
|
3026
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PreservePasteDelimitersDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3027
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: PreservePasteDelimitersDirective, isStandalone: false, selector: "input[tbPreservePasteDelimiters]", host: { listeners: { "paste": "onPaste($event)" } }, ngImport: i0 }); }
|
|
3028
|
+
}
|
|
3029
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PreservePasteDelimitersDirective, decorators: [{
|
|
3030
|
+
type: Directive,
|
|
3031
|
+
args: [{
|
|
3032
|
+
selector: 'input[tbPreservePasteDelimiters]',
|
|
3033
|
+
standalone: false,
|
|
3034
|
+
}]
|
|
3035
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onPaste: [{
|
|
3036
|
+
type: HostListener,
|
|
3037
|
+
args: ['paste', ['$event']]
|
|
3038
|
+
}] } });
|
|
3039
|
+
|
|
2957
3040
|
class InFilterComponent {
|
|
2958
3041
|
constructor(ref) {
|
|
2959
3042
|
this.ref = ref;
|
|
@@ -2988,8 +3071,8 @@ class InFilterComponent {
|
|
|
2988
3071
|
}
|
|
2989
3072
|
onValueChange(i, value) {
|
|
2990
3073
|
this.value = [...this.value];
|
|
2991
|
-
if (typeof value === 'string' && value
|
|
2992
|
-
const parts = value.split(
|
|
3074
|
+
if (typeof value === 'string' && /[,\t\n\r]/.test(value)) {
|
|
3075
|
+
const parts = value.split(/[,\t\n\r]+/).map(s => s.trim());
|
|
2993
3076
|
const leading = parts.slice(0, -1).filter(s => s);
|
|
2994
3077
|
const last = parts[parts.length - 1];
|
|
2995
3078
|
this.value.splice(i, 1, ...leading, last);
|
|
@@ -3005,7 +3088,7 @@ class InFilterComponent {
|
|
|
3005
3088
|
provide: NG_VALUE_ACCESSOR,
|
|
3006
3089
|
useExisting: InFilterComponent,
|
|
3007
3090
|
multi: true
|
|
3008
|
-
}], ngImport: i0, template: "<div class=inline>\n <div *ngFor=\"let val of value; index as i\">\n <input *ngIf=\"type === FieldType.Number || type === FieldType.Currency\"\n [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\n <input *ngIf=\"type !== FieldType.Number && type !== FieldType.Currency\"\n [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n [readonly]=\"i+1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\n #input [autoFocus]=\"i === value.length - 1\" />\n <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\n <button *ngIf=\"i === value.length - 1\" [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n </div>\n</div>\n", styles: [".inline{display:inline-block}\n"], dependencies: [{ 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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3091
|
+
}], ngImport: i0, template: "<div class=inline>\n <div *ngFor=\"let val of value; index as i\">\n <input *ngIf=\"type === FieldType.Number || type === FieldType.Currency\"\n [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\n <input *ngIf=\"type !== FieldType.Number && type !== FieldType.Currency\"\n [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n [readonly]=\"i+1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\n tbPreservePasteDelimiters\n #input [autoFocus]=\"i === value.length - 1\" />\n <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\n <button *ngIf=\"i === value.length - 1\" [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n </div>\n</div>\n", styles: [".inline{display:inline-block}\n"], dependencies: [{ 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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }, { kind: "directive", type: PreservePasteDelimitersDirective, selector: "input[tbPreservePasteDelimiters]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3009
3092
|
}
|
|
3010
3093
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InFilterComponent, decorators: [{
|
|
3011
3094
|
type: Component,
|
|
@@ -3013,7 +3096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
3013
3096
|
provide: NG_VALUE_ACCESSOR,
|
|
3014
3097
|
useExisting: InFilterComponent,
|
|
3015
3098
|
multi: true
|
|
3016
|
-
}], standalone: false, template: "<div class=inline>\n <div *ngFor=\"let val of value; index as i\">\n <input *ngIf=\"type === FieldType.Number || type === FieldType.Currency\"\n [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\n <input *ngIf=\"type !== FieldType.Number && type !== FieldType.Currency\"\n [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n [readonly]=\"i+1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\n #input [autoFocus]=\"i === value.length - 1\" />\n <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\n <button *ngIf=\"i === value.length - 1\" [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n </div>\n</div>\n", styles: [".inline{display:inline-block}\n"] }]
|
|
3099
|
+
}], standalone: false, template: "<div class=inline>\n <div *ngFor=\"let val of value; index as i\">\n <input *ngIf=\"type === FieldType.Number || type === FieldType.Currency\"\n [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\n <input *ngIf=\"type !== FieldType.Number && type !== FieldType.Currency\"\n [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\n [readonly]=\"i+1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\n tbPreservePasteDelimiters\n #input [autoFocus]=\"i === value.length - 1\" />\n <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\n <button *ngIf=\"i === value.length - 1\" [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n </div>\n</div>\n", styles: [".inline{display:inline-block}\n"] }]
|
|
3017
3100
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
|
|
3018
3101
|
type: Input
|
|
3019
3102
|
}] } });
|
|
@@ -3071,11 +3154,11 @@ class FilterComponent {
|
|
|
3071
3154
|
}
|
|
3072
3155
|
}
|
|
3073
3156
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3074
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: FilterComponent, isStandalone: false, selector: "tb-filter", inputs: { filter: "filter" }, outputs: { close: "close" }, ngImport: i0, template: "@if (filter) {\n<mat-card\n appearance=\"outlined\"\n class=\"filter-card\"\n>\n <mat-card-content>\n <form\n #form=\"ngForm\"\n (keydown.enter)=\"onEnter(form.value,$event)\"\n (keydown.escape)=\"close.emit()\"\n >\n <input\n type=\"hidden\"\n name=\"filterId\"\n [ngModel]=\"filter.filterId\"\n />\n <input\n type=\"hidden\"\n name=\"key\"\n [ngModel]=\"filter.key\"\n />\n <input\n type=\"hidden\"\n name=\"fieldType\"\n [ngModel]=\"filter.fieldType\"\n />\n <div class=\"head-row\">\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n <button\n class=\"cancel-button small-button\"\n color=\"primary\"\n mat-icon-button\n (click)=\"close.emit();\"\n type=\"button\"\n matTooltip=\"Close\"\n >\n <mat-icon\n class=\"cancel-button\"\n color=\"primary\"\n >close</mat-icon>\n </button>\n </div>\n <div class=\"filter-row\">\n <div class=\"inline\">\n <mat-form-field class=\"my-filter\">\n <mat-select\n placeholder=\"Select Filter Type\"\n name=\"filterType\"\n [(ngModel)]=\"currentFilterType\"\n >\n @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {\n <mat-option [value]=\"$any(kvp.value)[0]\">\n {{ kvp.key }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n @switch (true) {\n @case (filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {\n <ng-container *ngTemplateOutlet=\"String\"></ng-container>\n }\n @case (filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency) {\n <tb-number-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-number-filter>\n }\n @case (filter.fieldType === FieldType.Boolean) {\n <ng-container *ngTemplateOutlet=\"Boolean\"></ng-container>\n }\n @case (filter.fieldType === FieldType.Date) {\n <tb-date-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-date-filter>\n }\n @case (filter.fieldType === FieldType.DateTime) {\n <tb-date-time-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-date-time-filter>\n }\n @case (filter.fieldType === FieldType.Enum) {\n <ng-container *ngTemplateOutlet=\"Enum\"></ng-container>\n }\n }\n @if (currentFilterType === FilterType.IsNull) {\n <mat-radio-group\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n >\n <mat-radio-button [value]=\"true\">True</mat-radio-button>\n <mat-radio-button [value]=\"false\">False</mat-radio-button>\n </mat-radio-group>\n }\n </div>\n <button\n mat-button\n (click)=\"state.addFilter(form.value)\"\n disableRipple\n [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\"\n >\n Apply\n </button>\n\n\n <ng-template #String>\n @if (currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In) {\n <mat-form-field class=\"my-filter\">\n <input\n matInput\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n />\n </mat-form-field>\n }\n @if (currentFilterType === FilterType.In) {\n <lib-in-filter\n [type]=\"FieldType.String\"\n name='filterValue'\n [(ngModel)]=\"filter.filterValue\"\n ></lib-in-filter>\n }\n </ng-template>\n\n <ng-template #Boolean>\n @if (currentFilterType === FilterType.BooleanEquals) {\n <div class=\"switch\">\n <mat-radio-group\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n >\n <mat-radio-button\n [value]=\"true\"\n preventEnter\n >True</mat-radio-button>\n <mat-radio-button\n [value]=\"false\"\n preventEnter\n >False</mat-radio-button>\n </mat-radio-group>\n </div>\n }\n </ng-template>\n <ng-template #Enum>\n @if (currentFilterType === FilterType.In) {\n <tb-in-list-filter\n [key]='filter.key'\n name='filterValue'\n [(ngModel)]='filter.filterValue'\n ></tb-in-list-filter>\n }\n </ng-template>\n </form>\n </mat-card-content>\n</mat-card>\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ 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: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i8$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "component", type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["CurrentFilterType", "info"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "component", type: DateTimeFilterComponent, selector: "tb-date-time-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3157
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: FilterComponent, isStandalone: false, selector: "tb-filter", inputs: { filter: "filter" }, outputs: { close: "close" }, ngImport: i0, template: "@if (filter) {\n<mat-card\n appearance=\"outlined\"\n class=\"filter-card\"\n>\n <mat-card-content>\n <form\n #form=\"ngForm\"\n (keydown.enter)=\"onEnter(form.value,$event)\"\n (keydown.escape)=\"close.emit()\"\n >\n <input\n type=\"hidden\"\n name=\"filterId\"\n [ngModel]=\"filter.filterId\"\n />\n <input\n type=\"hidden\"\n name=\"key\"\n [ngModel]=\"filter.key\"\n />\n <input\n type=\"hidden\"\n name=\"fieldType\"\n [ngModel]=\"filter.fieldType\"\n />\n <div class=\"head-row\">\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n <button\n class=\"cancel-button small-button\"\n color=\"primary\"\n mat-icon-button\n (click)=\"close.emit();\"\n type=\"button\"\n matTooltip=\"Close\"\n >\n <mat-icon\n class=\"cancel-button\"\n color=\"primary\"\n >close</mat-icon>\n </button>\n </div>\n <div class=\"filter-row\">\n <div class=\"inline\">\n <mat-form-field class=\"my-filter\">\n <mat-select\n placeholder=\"Select Filter Type\"\n name=\"filterType\"\n [(ngModel)]=\"currentFilterType\"\n >\n @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {\n <mat-option [value]=\"$any(kvp.value)[0]\">\n {{ kvp.key }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n @switch (true) {\n @case (filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {\n <ng-container *ngTemplateOutlet=\"String\"></ng-container>\n }\n @case (filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency) {\n <tb-number-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-number-filter>\n }\n @case (filter.fieldType === FieldType.Boolean) {\n <ng-container *ngTemplateOutlet=\"Boolean\"></ng-container>\n }\n @case (filter.fieldType === FieldType.Date) {\n <tb-date-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-date-filter>\n }\n @case (filter.fieldType === FieldType.DateTime) {\n <tb-date-time-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-date-time-filter>\n }\n @case (filter.fieldType === FieldType.Enum) {\n <ng-container *ngTemplateOutlet=\"Enum\"></ng-container>\n }\n }\n @if (currentFilterType === FilterType.IsNull) {\n <mat-radio-group\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n >\n <mat-radio-button [value]=\"true\">True</mat-radio-button>\n <mat-radio-button [value]=\"false\">False</mat-radio-button>\n </mat-radio-group>\n }\n </div>\n <button\n mat-button\n (click)=\"state.addFilter(form.value)\"\n disableRipple\n [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\"\n >\n Apply\n </button>\n\n\n <ng-template #String>\n @if (currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In) {\n <mat-form-field class=\"my-filter\">\n <input\n matInput\n name=\"filterValue\"\n tbPreservePasteDelimiters\n [ngModel]=\"filter.filterValue\"\n />\n </mat-form-field>\n }\n @if (currentFilterType === FilterType.In) {\n <lib-in-filter\n [type]=\"FieldType.String\"\n name='filterValue'\n [(ngModel)]=\"filter.filterValue\"\n ></lib-in-filter>\n }\n </ng-template>\n\n <ng-template #Boolean>\n @if (currentFilterType === FilterType.BooleanEquals) {\n <div class=\"switch\">\n <mat-radio-group\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n >\n <mat-radio-button\n [value]=\"true\"\n preventEnter\n >True</mat-radio-button>\n <mat-radio-button\n [value]=\"false\"\n preventEnter\n >False</mat-radio-button>\n </mat-radio-group>\n </div>\n }\n </ng-template>\n <ng-template #Enum>\n @if (currentFilterType === FilterType.In) {\n <tb-in-list-filter\n [key]='filter.key'\n name='filterValue'\n [(ngModel)]='filter.filterValue'\n ></tb-in-list-filter>\n }\n </ng-template>\n </form>\n </mat-card-content>\n</mat-card>\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ 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: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i8$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "component", type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["CurrentFilterType", "info"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "component", type: DateTimeFilterComponent, selector: "tb-date-time-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "directive", type: PreservePasteDelimitersDirective, selector: "input[tbPreservePasteDelimiters]" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3075
3158
|
}
|
|
3076
3159
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3077
3160
|
type: Component,
|
|
3078
|
-
args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (filter) {\n<mat-card\n appearance=\"outlined\"\n class=\"filter-card\"\n>\n <mat-card-content>\n <form\n #form=\"ngForm\"\n (keydown.enter)=\"onEnter(form.value,$event)\"\n (keydown.escape)=\"close.emit()\"\n >\n <input\n type=\"hidden\"\n name=\"filterId\"\n [ngModel]=\"filter.filterId\"\n />\n <input\n type=\"hidden\"\n name=\"key\"\n [ngModel]=\"filter.key\"\n />\n <input\n type=\"hidden\"\n name=\"fieldType\"\n [ngModel]=\"filter.fieldType\"\n />\n <div class=\"head-row\">\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n <button\n class=\"cancel-button small-button\"\n color=\"primary\"\n mat-icon-button\n (click)=\"close.emit();\"\n type=\"button\"\n matTooltip=\"Close\"\n >\n <mat-icon\n class=\"cancel-button\"\n color=\"primary\"\n >close</mat-icon>\n </button>\n </div>\n <div class=\"filter-row\">\n <div class=\"inline\">\n <mat-form-field class=\"my-filter\">\n <mat-select\n placeholder=\"Select Filter Type\"\n name=\"filterType\"\n [(ngModel)]=\"currentFilterType\"\n >\n @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {\n <mat-option [value]=\"$any(kvp.value)[0]\">\n {{ kvp.key }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n @switch (true) {\n @case (filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {\n <ng-container *ngTemplateOutlet=\"String\"></ng-container>\n }\n @case (filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency) {\n <tb-number-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-number-filter>\n }\n @case (filter.fieldType === FieldType.Boolean) {\n <ng-container *ngTemplateOutlet=\"Boolean\"></ng-container>\n }\n @case (filter.fieldType === FieldType.Date) {\n <tb-date-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-date-filter>\n }\n @case (filter.fieldType === FieldType.DateTime) {\n <tb-date-time-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-date-time-filter>\n }\n @case (filter.fieldType === FieldType.Enum) {\n <ng-container *ngTemplateOutlet=\"Enum\"></ng-container>\n }\n }\n @if (currentFilterType === FilterType.IsNull) {\n <mat-radio-group\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n >\n <mat-radio-button [value]=\"true\">True</mat-radio-button>\n <mat-radio-button [value]=\"false\">False</mat-radio-button>\n </mat-radio-group>\n }\n </div>\n <button\n mat-button\n (click)=\"state.addFilter(form.value)\"\n disableRipple\n [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\"\n >\n Apply\n </button>\n\n\n <ng-template #String>\n @if (currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In) {\n <mat-form-field class=\"my-filter\">\n <input\n matInput\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n />\n </mat-form-field>\n }\n @if (currentFilterType === FilterType.In) {\n <lib-in-filter\n [type]=\"FieldType.String\"\n name='filterValue'\n [(ngModel)]=\"filter.filterValue\"\n ></lib-in-filter>\n }\n </ng-template>\n\n <ng-template #Boolean>\n @if (currentFilterType === FilterType.BooleanEquals) {\n <div class=\"switch\">\n <mat-radio-group\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n >\n <mat-radio-button\n [value]=\"true\"\n preventEnter\n >True</mat-radio-button>\n <mat-radio-button\n [value]=\"false\"\n preventEnter\n >False</mat-radio-button>\n </mat-radio-group>\n </div>\n }\n </ng-template>\n <ng-template #Enum>\n @if (currentFilterType === FilterType.In) {\n <tb-in-list-filter\n [key]='filter.key'\n name='filterValue'\n [(ngModel)]='filter.filterValue'\n ></tb-in-list-filter>\n }\n </ng-template>\n </form>\n </mat-card-content>\n</mat-card>\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
|
|
3161
|
+
args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (filter) {\n<mat-card\n appearance=\"outlined\"\n class=\"filter-card\"\n>\n <mat-card-content>\n <form\n #form=\"ngForm\"\n (keydown.enter)=\"onEnter(form.value,$event)\"\n (keydown.escape)=\"close.emit()\"\n >\n <input\n type=\"hidden\"\n name=\"filterId\"\n [ngModel]=\"filter.filterId\"\n />\n <input\n type=\"hidden\"\n name=\"key\"\n [ngModel]=\"filter.key\"\n />\n <input\n type=\"hidden\"\n name=\"fieldType\"\n [ngModel]=\"filter.fieldType\"\n />\n <div class=\"head-row\">\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n <button\n class=\"cancel-button small-button\"\n color=\"primary\"\n mat-icon-button\n (click)=\"close.emit();\"\n type=\"button\"\n matTooltip=\"Close\"\n >\n <mat-icon\n class=\"cancel-button\"\n color=\"primary\"\n >close</mat-icon>\n </button>\n </div>\n <div class=\"filter-row\">\n <div class=\"inline\">\n <mat-form-field class=\"my-filter\">\n <mat-select\n placeholder=\"Select Filter Type\"\n name=\"filterType\"\n [(ngModel)]=\"currentFilterType\"\n >\n @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {\n <mat-option [value]=\"$any(kvp.value)[0]\">\n {{ kvp.key }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n @switch (true) {\n @case (filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {\n <ng-container *ngTemplateOutlet=\"String\"></ng-container>\n }\n @case (filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency) {\n <tb-number-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-number-filter>\n }\n @case (filter.fieldType === FieldType.Boolean) {\n <ng-container *ngTemplateOutlet=\"Boolean\"></ng-container>\n }\n @case (filter.fieldType === FieldType.Date) {\n <tb-date-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-date-filter>\n }\n @case (filter.fieldType === FieldType.DateTime) {\n <tb-date-time-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-date-time-filter>\n }\n @case (filter.fieldType === FieldType.Enum) {\n <ng-container *ngTemplateOutlet=\"Enum\"></ng-container>\n }\n }\n @if (currentFilterType === FilterType.IsNull) {\n <mat-radio-group\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n >\n <mat-radio-button [value]=\"true\">True</mat-radio-button>\n <mat-radio-button [value]=\"false\">False</mat-radio-button>\n </mat-radio-group>\n }\n </div>\n <button\n mat-button\n (click)=\"state.addFilter(form.value)\"\n disableRipple\n [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\"\n >\n Apply\n </button>\n\n\n <ng-template #String>\n @if (currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In) {\n <mat-form-field class=\"my-filter\">\n <input\n matInput\n name=\"filterValue\"\n tbPreservePasteDelimiters\n [ngModel]=\"filter.filterValue\"\n />\n </mat-form-field>\n }\n @if (currentFilterType === FilterType.In) {\n <lib-in-filter\n [type]=\"FieldType.String\"\n name='filterValue'\n [(ngModel)]=\"filter.filterValue\"\n ></lib-in-filter>\n }\n </ng-template>\n\n <ng-template #Boolean>\n @if (currentFilterType === FilterType.BooleanEquals) {\n <div class=\"switch\">\n <mat-radio-group\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n >\n <mat-radio-button\n [value]=\"true\"\n preventEnter\n >True</mat-radio-button>\n <mat-radio-button\n [value]=\"false\"\n preventEnter\n >False</mat-radio-button>\n </mat-radio-group>\n </div>\n }\n </ng-template>\n <ng-template #Enum>\n @if (currentFilterType === FilterType.In) {\n <tb-in-list-filter\n [key]='filter.key'\n name='filterValue'\n [(ngModel)]='filter.filterValue'\n ></tb-in-list-filter>\n }\n </ng-template>\n </form>\n </mat-card-content>\n</mat-card>\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
|
|
3079
3162
|
}], ctorParameters: () => [{ type: TableStore }], propDecorators: { filter: [{
|
|
3080
3163
|
type: Input
|
|
3081
3164
|
}], close: [{
|
|
@@ -4127,6 +4210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
4127
4210
|
args: [{ selector: 'group-by-list', standalone: false, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\n <span *ngIf=\"groupByKeys?.length\" class=\"tb-group-label\">Group By:</span>\n <ng-container *ngFor=\"let groupByKey of groupByKeys; let i = index;\">\n <mat-icon *ngIf=\"i > 0\" class=\"nested-arrow\">arrow_right</mat-icon>\n <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\n {{groupByKey | spaceCase}}\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </ng-container>\n</mat-chip-set>\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"] }]
|
|
4128
4211
|
}], ctorParameters: () => [{ type: TableStore }] });
|
|
4129
4212
|
|
|
4213
|
+
const BLANK_GROUP_LABEL = '(Blank)';
|
|
4130
4214
|
class TableContainerComponent {
|
|
4131
4215
|
set isVs(val) {
|
|
4132
4216
|
if (val || val === '') {
|
|
@@ -4167,7 +4251,15 @@ class TableContainerComponent {
|
|
|
4167
4251
|
this.collapseHeader$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseHeader));
|
|
4168
4252
|
this.tbGroupBy = (data, groupByKeys, parentGroupName) => {
|
|
4169
4253
|
let res = {};
|
|
4170
|
-
|
|
4254
|
+
const key = groupByKeys[0];
|
|
4255
|
+
res = groupBy(data, (row) => {
|
|
4256
|
+
const v = row?.[key];
|
|
4257
|
+
const isBlank = v === null
|
|
4258
|
+
|| v === undefined
|
|
4259
|
+
|| v === ''
|
|
4260
|
+
|| (Array.isArray(v) && v.length === 0);
|
|
4261
|
+
return isBlank ? BLANK_GROUP_LABEL : v;
|
|
4262
|
+
});
|
|
4171
4263
|
const remainingGroupByKeys = groupByKeys.slice(1);
|
|
4172
4264
|
if (remainingGroupByKeys.length) {
|
|
4173
4265
|
Object.keys(res).forEach(key => res[key] = this.tbGroupBy(res[key], remainingGroupByKeys, key));
|
|
@@ -4551,7 +4643,8 @@ class TableBuilderModule {
|
|
|
4551
4643
|
TableFilterStringContainsDirective,
|
|
4552
4644
|
TableWrapperDirective,
|
|
4553
4645
|
GroupByListComponent,
|
|
4554
|
-
DateTimeFilterComponent
|
|
4646
|
+
DateTimeFilterComponent,
|
|
4647
|
+
PreservePasteDelimitersDirective], imports: [CommonModule,
|
|
4555
4648
|
MaterialModule, i3$4.StoreFeatureModule, i1$3.EffectsFeatureModule, FormsModule,
|
|
4556
4649
|
RouterModule,
|
|
4557
4650
|
LetDirective,
|
|
@@ -4576,7 +4669,8 @@ class TableBuilderModule {
|
|
|
4576
4669
|
TableFilterDirective,
|
|
4577
4670
|
TableFilterStringContainsDirective,
|
|
4578
4671
|
TableWrapperDirective,
|
|
4579
|
-
GroupByListComponent
|
|
4672
|
+
GroupByListComponent,
|
|
4673
|
+
PreservePasteDelimitersDirective] }); }
|
|
4580
4674
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableBuilderModule, providers: [
|
|
4581
4675
|
SpaceCasePipe,
|
|
4582
4676
|
DatePipe,
|
|
@@ -4629,6 +4723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
4629
4723
|
TableFilterStringContainsDirective,
|
|
4630
4724
|
TableWrapperDirective,
|
|
4631
4725
|
GroupByListComponent,
|
|
4726
|
+
PreservePasteDelimitersDirective,
|
|
4632
4727
|
],
|
|
4633
4728
|
declarations: [
|
|
4634
4729
|
ColumnTotalPipe,
|
|
@@ -4667,6 +4762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
4667
4762
|
TableWrapperDirective,
|
|
4668
4763
|
GroupByListComponent,
|
|
4669
4764
|
DateTimeFilterComponent,
|
|
4765
|
+
PreservePasteDelimitersDirective,
|
|
4670
4766
|
],
|
|
4671
4767
|
providers: [
|
|
4672
4768
|
SpaceCasePipe,
|
|
@@ -5015,5 +5111,5 @@ const shallowEquals = (first, second) => {
|
|
|
5015
5111
|
* Generated bundle index. Do not edit.
|
|
5016
5112
|
*/
|
|
5017
5113
|
|
|
5018
|
-
export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GenericTableVsComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, InitializationState, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersisitedTableSettings, PaginatorComponent, PesrsistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, TableBuilder, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableStore, TableVirtualScrollObservableDataSource, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollViewportDirective, actionStatusReducer, chainRequest, combineArrays, createActionableSelector, createFailure, createFilterFunc, createSuccess, defaultFilter, defaultShareReplay, defaultTableState, delayOn, filterArray, filterTypeMap, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isCustomFilter, isErrorState, isFilterInfo, isSuccessOrErrorState, isSuccessState, keysToDelete, mapArray, mapError, notNull, notStarted, onWait, onceWhen, orderMetaData, orderViewableMetaData, previousAndCurrent, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, stateIs, statusAdapter, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
|
|
5114
|
+
export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GenericTableVsComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, InitializationState, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersisitedTableSettings, PaginatorComponent, PesrsistedTableSettings, PhoneNumberPipe, PreservePasteDelimitersDirective, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, TableBuilder, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableStore, TableVirtualScrollObservableDataSource, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollViewportDirective, actionStatusReducer, chainRequest, combineArrays, createActionableSelector, createFailure, createFilterFunc, createSuccess, defaultFilter, defaultShareReplay, defaultTableState, delayOn, filterArray, filterTypeMap, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isCustomFilter, isErrorState, isFilterInfo, isSuccessOrErrorState, isSuccessState, keysToDelete, mapArray, mapError, notNull, notStarted, onWait, onceWhen, orderMetaData, orderViewableMetaData, previousAndCurrent, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, stateIs, statusAdapter, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
|
|
5019
5115
|
//# sourceMappingURL=saydar-table-builder.mjs.map
|