@one-paragon/angular-utilities 0.0.29 → 0.0.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/http-request-state/HttpRequestStateFactory.mjs +3 -3
- package/esm2020/http-request-state/HttpRequestStateStore.mjs +3 -3
- package/esm2020/http-request-state/directives/HttpStateDirectiveBase.mjs +3 -3
- package/esm2020/http-request-state/directives/http-error-state-directive.mjs +3 -3
- package/esm2020/http-request-state/directives/http-inProgress-state-directive.mjs +3 -3
- package/esm2020/http-request-state/directives/http-notStarted-state-directive.mjs +3 -3
- package/esm2020/http-request-state/directives/http-success-state-directive.mjs +3 -3
- package/esm2020/http-request-state/directives/request-state-directive.mjs +3 -3
- package/esm2020/http-request-state/http-state-module.mjs +4 -4
- package/esm2020/table-builder/classes/data-filter.mjs +3 -3
- package/esm2020/table-builder/classes/table-store.mjs +3 -3
- package/esm2020/table-builder/components/array-column.component.mjs +3 -3
- package/esm2020/table-builder/components/column-builder/column-builder.component.mjs +3 -3
- package/esm2020/table-builder/components/date-filter/date-filter.component.mjs +3 -3
- package/esm2020/table-builder/components/filter/filter.component.mjs +3 -3
- package/esm2020/table-builder/components/filter/in-list/in-list-filter.component.mjs +3 -3
- package/esm2020/table-builder/components/gen-col-displayer/gen-col-displayer.component.mjs +3 -3
- package/esm2020/table-builder/components/generic-table/generic-table.component.mjs +3 -3
- package/esm2020/table-builder/components/generic-table/paginator.component.mjs +3 -3
- package/esm2020/table-builder/components/header-menu/header-menu.component.mjs +3 -3
- package/esm2020/table-builder/components/in-filter/in-filter.component.mjs +3 -3
- package/esm2020/table-builder/components/initialization-component/initialization-component.mjs +21 -6
- package/esm2020/table-builder/components/number-filter/number-filter.component.mjs +3 -3
- package/esm2020/table-builder/components/sort-menu/sort-menu.component-store.mjs +3 -3
- package/esm2020/table-builder/components/sort-menu/sort-menu.component.mjs +3 -3
- package/esm2020/table-builder/components/table-container/table-container.mjs +3 -3
- package/esm2020/table-builder/components/table-container-filter/filter-list/filter-list.component.mjs +3 -3
- package/esm2020/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.mjs +3 -3
- package/esm2020/table-builder/components/table-container-filter/table-wrapper-filter-store.mjs +3 -3
- package/esm2020/table-builder/directives/custom-cell-directive.mjs +3 -3
- package/esm2020/table-builder/directives/multi-sort.directive.mjs +3 -3
- package/esm2020/table-builder/directives/resize-column.directive.mjs +3 -3
- package/esm2020/table-builder/directives/table-wrapper.directive.mjs +3 -3
- package/esm2020/table-builder/directives/tb-filter.directive.mjs +30 -30
- package/esm2020/table-builder/interfaces/report-def.mjs +1 -1
- package/esm2020/table-builder/material.module.mjs +4 -4
- package/esm2020/table-builder/ngrx/effects.mjs +3 -3
- package/esm2020/table-builder/pipes/column-total.pipe.mjs +3 -3
- package/esm2020/table-builder/pipes/format-filter-type.pipe.mjs +3 -3
- package/esm2020/table-builder/pipes/format-filter-value.pipe.mjs +3 -3
- package/esm2020/table-builder/pipes/key-display.mjs +3 -3
- package/esm2020/table-builder/services/export-to-csv.service.mjs +3 -3
- package/esm2020/table-builder/services/table-template-service.mjs +3 -3
- package/esm2020/table-builder/services/transform-creator.mjs +3 -3
- package/esm2020/table-builder/table-builder.module.mjs +4 -4
- package/esm2020/utilities/directives/auto-focus.directive.mjs +3 -3
- package/esm2020/utilities/directives/clickEmitterDirective.mjs +3 -3
- package/esm2020/utilities/directives/clickSubject.mjs +3 -3
- package/esm2020/utilities/directives/dialog-service.mjs +3 -3
- package/esm2020/utilities/directives/dialog.mjs +6 -6
- package/esm2020/utilities/directives/mat-toggle-group-directive.mjs +3 -3
- package/esm2020/utilities/directives/prevent-enter.directive.mjs +3 -3
- package/esm2020/utilities/directives/stop-propagation.directive.mjs +3 -3
- package/esm2020/utilities/directives/styler.mjs +3 -3
- package/esm2020/utilities/module.mjs +4 -4
- package/esm2020/utilities/pipes/function.pipe.mjs +3 -3
- package/esm2020/utilities/pipes/phone.pipe.mjs +3 -3
- package/esm2020/utilities/pipes/space-case.pipes.mjs +3 -3
- package/fesm2015/one-paragon-angular-utilities.mjs +221 -205
- package/fesm2015/one-paragon-angular-utilities.mjs.map +1 -1
- package/fesm2020/one-paragon-angular-utilities.mjs +220 -205
- package/fesm2020/one-paragon-angular-utilities.mjs.map +1 -1
- package/package.json +1 -1
- package/table-builder/components/initialization-component/initialization-component.d.ts +4 -3
- package/table-builder/interfaces/report-def.d.ts +7 -2
|
@@ -30,8 +30,8 @@ export class PaginatorComponent {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
-
PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
34
|
-
PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
33
|
+
PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: PaginatorComponent, deps: [{ token: i1.TableStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
34
|
+
PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: PaginatorComponent, selector: "tb-paginator", inputs: { dataSource: "dataSource", tableElRef: "tableElRef", data$: "data$" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], ngImport: i0, template: `
|
|
35
35
|
<div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}" *ngIf="currentPageData$ | async as pageData">
|
|
36
36
|
{{pageData.currentStart}} - {{pageData.currentEnd}} of {{pageData.total}}
|
|
37
37
|
</div>
|
|
@@ -39,7 +39,7 @@ PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
|
|
|
39
39
|
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
40
40
|
</mat-paginator>
|
|
41
41
|
`, isInline: true, styles: [".mat-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0px;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!important}.group-header{font-weight:700;font-size:20px}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], components: [{ type: i2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
42
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
42
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
43
43
|
type: Component,
|
|
44
44
|
args: [{ selector: 'tb-paginator', template: `
|
|
45
45
|
<div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}" *ngIf="currentPageData$ | async as pageData">
|
|
@@ -74,9 +74,9 @@ export class HeaderMenuComponent {
|
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
|
-
HeaderMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
78
|
-
HeaderMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: { filter: "filter", metaData: "metaData" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button mat-icon-button disableRipple [matMenuTriggerFor]=\"menu\" style=\"height:16px;\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n <span>Hide Column</span>\r\n </button>\r\n <ng-form #myForm=\"ngForm\" [ngSwitch]=\"true\" (keydown.enter)=\"onEnter(myForm.value)\">\r\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"'header-column-' + metaData.key\" />\r\n <input type=\"hidden\" name=\"filterType\" [ngModel]=\"myFilterType\" />\r\n <input type=\"hidden\" name=\"key\" [ngModel]=\"metaData.key\" />\r\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"metaData.fieldType\" />\r\n\r\n <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n <tb-in-list-filter style=\"display:block;padding: 0 16px\" name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' >\r\n </tb-in-list-filter>\r\n </ng-container>\r\n\r\n\r\n <ng-template #defaultFilter>\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber\">\r\n <mat-form-field stop-propagation class=\"font\" style=\"padding: 0 16px\">\r\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\">\r\n <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n block\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency\">\r\n <mat-form-field class=\"auto-width\" stop-propagation style=\"padding: 0 16px\">\r\n <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n <input matInput type='number' name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matPrefix>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.NumberLessThan)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.NumberGreaterThan)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\">\r\n arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <span (click)=\"setFilterType(FilterType.NumberEquals)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n =</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Boolean\">\r\n <div style=\"padding: 0 16px\">\r\n <label>\r\n <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n </label>\r\n <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n </mat-radio-group>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Date\">\r\n <mat-form-field style=\"padding: 0 16px\" class=\"font auto-width\" stop-propagation >\r\n <span matPrefix>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.DateOnOrAfter)\" class=\"suffix-icons underline\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.DateOnOrBefore)\" class=\"suffix-icons underline\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore }\">\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <span (click)=\"setFilterType(FilterType.DateIsOn)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n =</span>\r\n </button>\r\n </span>\r\n <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n (click)=\"calendar.open()\"/>\r\n <mat-datepicker-toggle matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n <mat-datepicker #calendar></mat-datepicker>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n Apply\r\n </button>\r\n </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}::ng-deep .form-field .mat-form-field-wrapper{padding-bottom:4px!important;padding-top:4px!important;margin-bottom:5px!important}.menu-icon{font-size:16px;line-height:16px!important;vertical-align:top!important}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}::ng-deep .form-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:5px 0;width:auto}::ng-deep .auto-width .mat-form-field-infix{width:auto}.suffix-icons{font-size:14px;margin-left:6px}mat-icon.chosen-icon.mat-icon.suffix-icons,.chosen-icon{font-size:20px;color:green}mat-icon.mat-icon.suffix-icons.underline{-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid;transform:scaleX(.7)}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i5.InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i8.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i9.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i11.StopPropagationDirective, selector: "[stop-propagation]" }, { type: i6.MatPrefix, selector: "[matPrefix]" }, { type: i6.MatLabel, selector: "mat-label" }, { type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i6.MatSuffix, selector: "[matSuffix]" }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
79
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
77
|
+
HeaderMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: i1.TableStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
78
|
+
HeaderMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: { filter: "filter", metaData: "metaData" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button mat-icon-button disableRipple [matMenuTriggerFor]=\"menu\" style=\"height:16px;\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n <span>Hide Column</span>\r\n </button>\r\n <ng-form #myForm=\"ngForm\" [ngSwitch]=\"true\" (keydown.enter)=\"onEnter(myForm.value)\">\r\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"'header-column-' + metaData.key\" />\r\n <input type=\"hidden\" name=\"filterType\" [ngModel]=\"myFilterType\" />\r\n <input type=\"hidden\" name=\"key\" [ngModel]=\"metaData.key\" />\r\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"metaData.fieldType\" />\r\n\r\n <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n <tb-in-list-filter style=\"display:block;padding: 0 16px\" name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' >\r\n </tb-in-list-filter>\r\n </ng-container>\r\n\r\n\r\n <ng-template #defaultFilter>\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber\">\r\n <mat-form-field stop-propagation class=\"font\" style=\"padding: 0 16px\">\r\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\">\r\n <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n block\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency\">\r\n <mat-form-field class=\"auto-width\" stop-propagation style=\"padding: 0 16px\">\r\n <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n <input matInput type='number' name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matPrefix>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.NumberLessThan)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.NumberGreaterThan)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\">\r\n arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <span (click)=\"setFilterType(FilterType.NumberEquals)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n =</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Boolean\">\r\n <div style=\"padding: 0 16px\">\r\n <label>\r\n <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n </label>\r\n <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n </mat-radio-group>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Date\">\r\n <mat-form-field style=\"padding: 0 16px\" class=\"font auto-width\" stop-propagation >\r\n <span matPrefix>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.DateOnOrAfter)\" class=\"suffix-icons underline\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.DateOnOrBefore)\" class=\"suffix-icons underline\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore }\">\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <span (click)=\"setFilterType(FilterType.DateIsOn)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n =</span>\r\n </button>\r\n </span>\r\n <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n (click)=\"calendar.open()\"/>\r\n <mat-datepicker-toggle matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n <mat-datepicker #calendar></mat-datepicker>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n Apply\r\n </button>\r\n </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}::ng-deep .form-field .mat-form-field-wrapper{padding-bottom:4px!important;padding-top:4px!important;margin-bottom:5px!important}.menu-icon{font-size:16px;line-height:16px!important;vertical-align:top!important}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}::ng-deep .form-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:5px 0;width:auto}::ng-deep .auto-width .mat-form-field-infix{width:auto}.suffix-icons{font-size:14px;margin-left:6px}mat-icon.chosen-icon.mat-icon.suffix-icons,.chosen-icon{font-size:20px;color:green}mat-icon.mat-icon.suffix-icons.underline{-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid;transform:scaleX(.7)}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i5.InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i8.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i9.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i11.StopPropagationDirective, selector: "[stop-propagation]" }, { type: i6.MatPrefix, selector: "[matPrefix]" }, { type: i6.MatLabel, selector: "mat-label" }, { type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i6.MatSuffix, selector: "[matSuffix]" }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
79
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: HeaderMenuComponent, decorators: [{
|
|
80
80
|
type: Component,
|
|
81
81
|
args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-icon-button disableRipple [matMenuTriggerFor]=\"menu\" style=\"height:16px;\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n <span>Hide Column</span>\r\n </button>\r\n <ng-form #myForm=\"ngForm\" [ngSwitch]=\"true\" (keydown.enter)=\"onEnter(myForm.value)\">\r\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"'header-column-' + metaData.key\" />\r\n <input type=\"hidden\" name=\"filterType\" [ngModel]=\"myFilterType\" />\r\n <input type=\"hidden\" name=\"key\" [ngModel]=\"metaData.key\" />\r\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"metaData.fieldType\" />\r\n\r\n <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n <tb-in-list-filter style=\"display:block;padding: 0 16px\" name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' >\r\n </tb-in-list-filter>\r\n </ng-container>\r\n\r\n\r\n <ng-template #defaultFilter>\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber\">\r\n <mat-form-field stop-propagation class=\"font\" style=\"padding: 0 16px\">\r\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\">\r\n <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n block\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency\">\r\n <mat-form-field class=\"auto-width\" stop-propagation style=\"padding: 0 16px\">\r\n <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n <input matInput type='number' name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matPrefix>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.NumberLessThan)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.NumberGreaterThan)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\">\r\n arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <span (click)=\"setFilterType(FilterType.NumberEquals)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n =</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Boolean\">\r\n <div style=\"padding: 0 16px\">\r\n <label>\r\n <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n </label>\r\n <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n </mat-radio-group>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Date\">\r\n <mat-form-field style=\"padding: 0 16px\" class=\"font auto-width\" stop-propagation >\r\n <span matPrefix>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.DateOnOrAfter)\" class=\"suffix-icons underline\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.DateOnOrBefore)\" class=\"suffix-icons underline\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore }\">\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <span (click)=\"setFilterType(FilterType.DateIsOn)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n =</span>\r\n </button>\r\n </span>\r\n <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n (click)=\"calendar.open()\"/>\r\n <mat-datepicker-toggle matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n <mat-datepicker #calendar></mat-datepicker>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n Apply\r\n </button>\r\n </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}::ng-deep .form-field .mat-form-field-wrapper{padding-bottom:4px!important;padding-top:4px!important;margin-bottom:5px!important}.menu-icon{font-size:16px;line-height:16px!important;vertical-align:top!important}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}::ng-deep .form-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:5px 0;width:auto}::ng-deep .auto-width .mat-form-field-infix{width:auto}.suffix-icons{font-size:14px;margin-left:6px}mat-icon.chosen-icon.mat-icon.suffix-icons,.chosen-icon{font-size:20px;color:green}mat-icon.mat-icon.suffix-icons.underline{-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid;transform:scaleX(.7)}\n"] }]
|
|
82
82
|
}], ctorParameters: function () { return [{ type: i1.TableStore }]; }, propDecorators: { filter: [{
|
|
@@ -47,13 +47,13 @@ export class InFilterComponent {
|
|
|
47
47
|
this.onChange(this.value);
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
|
-
InFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
51
|
-
InFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
50
|
+
InFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: InFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
51
|
+
InFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: InFilterComponent, selector: "lib-in-filter", inputs: { type: "type" }, providers: [{
|
|
52
52
|
provide: NG_VALUE_ACCESSOR,
|
|
53
53
|
useExisting: InFilterComponent,
|
|
54
54
|
multi: true
|
|
55
55
|
}], 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"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
56
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
56
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: InFilterComponent, decorators: [{
|
|
57
57
|
type: Component,
|
|
58
58
|
args: [{ selector: 'lib-in-filter', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
59
59
|
provide: NG_VALUE_ACCESSOR,
|
package/esm2020/table-builder/components/initialization-component/initialization-component.mjs
CHANGED
|
@@ -13,16 +13,31 @@ export class InitializationComponent {
|
|
|
13
13
|
: metaData.additional?.boolean?.showForFalse?.icon || null;
|
|
14
14
|
this.useRouterLink = (metaData) => metaData.additional?.link?.useRouterLink || metaData.additional?.useRouterLink;
|
|
15
15
|
this.target = (metaData) => metaData.additional?.link?.target || metaData.additional?.target || '_blank';
|
|
16
|
-
this.base = (metaData) => metaData.additional?.link?.base || metaData.additional?.base;
|
|
17
16
|
this.key = (metaData, element) => metaData.additional?.link?.urlKey ? element[metaData.additional?.link?.urlKey] :
|
|
18
17
|
metaData.additional?.urlKey ? element[metaData.additional.urlKey] : element[metaData.key];
|
|
18
|
+
this.getLink = (metaData, element) => {
|
|
19
|
+
const hasRoute = !!metaData.additional?.link?.route;
|
|
20
|
+
let link = hasRoute ? this.parseInterpolatedRoute((metaData.additional?.link?.route), element) : (metaData.additional?.link?.base || metaData.additional?.base);
|
|
21
|
+
if (!hasRoute) {
|
|
22
|
+
link += `/${this.key(metaData, element)}`;
|
|
23
|
+
}
|
|
24
|
+
return link;
|
|
25
|
+
};
|
|
26
|
+
this.parseInterpolatedRoute = (route, element) => {
|
|
27
|
+
let interpolated = route?.interpolated || '';
|
|
28
|
+
const dict = route?.params || {};
|
|
29
|
+
Object.keys(dict).forEach(key => {
|
|
30
|
+
interpolated = interpolated.replace(`{${key}}`, element[dict[key]]);
|
|
31
|
+
});
|
|
32
|
+
return interpolated;
|
|
33
|
+
};
|
|
19
34
|
}
|
|
20
35
|
}
|
|
21
|
-
InitializationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
22
|
-
InitializationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
36
|
+
InitializationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
37
|
+
InitializationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: InitializationComponent, selector: "ng-component", viewQueries: [{ propertyName: "booleanTemplate", first: true, predicate: ["boolean"], descendants: true, static: true }, { propertyName: "linkTemplate", first: true, predicate: ["link"], descendants: true, static: true }, { propertyName: "imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, static: true }, { propertyName: "currencyTemplate", first: true, predicate: ["currency"], descendants: true, static: true }, { propertyName: "arrayTemplate", first: true, predicate: ["array"], descendants: true, static: true }, { propertyName: "expressionTemplate", first: true, predicate: ["expression"], descendants: true, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["default"], descendants: true, static: true }, { propertyName: "enumTemplate", first: true, predicate: ["enum"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #boolean let-element='element' let-metaData='metaData'>\n <span>\n <mat-icon *ngIf=\"element[metaData.key]\">\n {{forTrueIcon | func : metaData}}\n </mat-icon>\n <mat-icon *ngIf=\"!element[metaData.key]\">\n <ng-container *ngIf=\"(forFalseIcon | func : metaData) as icon\">\n {{icon}}\n </ng-container>\n </mat-icon>\n </span>\n</ng-template>\n<ng-template #link let-element='element' let-metaData='metaData'>\n <a *ngIf=\"useRouterLink | func : metaData; else hrefLink\" target=\"{{target | func : metaData }}\"\n [routerLink]=\" [(getLink | func : metaData : element)]\">\n {{element[metaData.key]}}\n </a>\n <ng-template #hrefLink>\n <a target=\"{{target | func : metaData}}\"\n href=\"{{(getLink | func : metaData : element)}}\">\n {{element[metaData.key]}}\n </a>\n </ng-template>\n</ng-template>\n<ng-template #imageUrl let-element='element' let-metaData='metaData'>\n <span>\n <img src=\"{{element[metaData.key]}}\" height=\"75px\" width=\"75px\" />\n </span>\n</ng-template>\n<ng-template #currency let-element='element' let-metaData='metaData' >\n <span [class.negative-currency]=\"element[metaData.key] < 0\">\n {{ element[metaData.key] | currency }}\n </span>\n</ng-template>\n<ng-template #array let-element='element' let-metaData='metaData'>\n <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>\n</ng-template>\n<ng-template #expression let-element='element' let-metaData='metaData'>\n <span>{{ metaData.transform | func : element }}</span>\n</ng-template>\n<ng-template #enum let-element='element' let-metaData='metaData' >\n <span>{{ metaData.additional.enumMap[element[metaData.key]] | spaceCase }}</span>\n</ng-template>\n<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform'>\n <span>{{ transform | func : element[metaData.key] }}</span>\n</ng-template>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.ArrayColumnComponent, selector: "tb-array-column", inputs: ["array", "metaData"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "func": i5.FunctionPipe, "currency": i3.CurrencyPipe, "spaceCase": i6.SpaceCasePipe } });
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: InitializationComponent, decorators: [{
|
|
24
39
|
type: Component,
|
|
25
|
-
args: [{ template: "<ng-template #boolean let-element='element' let-metaData='metaData'>\n <span>\n <mat-icon *ngIf=\"element[metaData.key]\">\n {{forTrueIcon | func : metaData}}\n </mat-icon>\n <mat-icon *ngIf=\"!element[metaData.key]\">\n <ng-container *ngIf=\"(forFalseIcon | func : metaData) as icon\">\n {{icon}}\n </ng-container>\n </mat-icon>\n </span>\n</ng-template>\n<ng-template #link let-element='element' let-metaData='metaData'>\n <a *ngIf=\"useRouterLink | func : metaData; else hrefLink\" target=\"{{target | func : metaData }}\"\n [routerLink]=\"[(
|
|
40
|
+
args: [{ template: "<ng-template #boolean let-element='element' let-metaData='metaData'>\n <span>\n <mat-icon *ngIf=\"element[metaData.key]\">\n {{forTrueIcon | func : metaData}}\n </mat-icon>\n <mat-icon *ngIf=\"!element[metaData.key]\">\n <ng-container *ngIf=\"(forFalseIcon | func : metaData) as icon\">\n {{icon}}\n </ng-container>\n </mat-icon>\n </span>\n</ng-template>\n<ng-template #link let-element='element' let-metaData='metaData'>\n <a *ngIf=\"useRouterLink | func : metaData; else hrefLink\" target=\"{{target | func : metaData }}\"\n [routerLink]=\" [(getLink | func : metaData : element)]\">\n {{element[metaData.key]}}\n </a>\n <ng-template #hrefLink>\n <a target=\"{{target | func : metaData}}\"\n href=\"{{(getLink | func : metaData : element)}}\">\n {{element[metaData.key]}}\n </a>\n </ng-template>\n</ng-template>\n<ng-template #imageUrl let-element='element' let-metaData='metaData'>\n <span>\n <img src=\"{{element[metaData.key]}}\" height=\"75px\" width=\"75px\" />\n </span>\n</ng-template>\n<ng-template #currency let-element='element' let-metaData='metaData' >\n <span [class.negative-currency]=\"element[metaData.key] < 0\">\n {{ element[metaData.key] | currency }}\n </span>\n</ng-template>\n<ng-template #array let-element='element' let-metaData='metaData'>\n <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>\n</ng-template>\n<ng-template #expression let-element='element' let-metaData='metaData'>\n <span>{{ metaData.transform | func : element }}</span>\n</ng-template>\n<ng-template #enum let-element='element' let-metaData='metaData' >\n <span>{{ metaData.additional.enumMap[element[metaData.key]] | spaceCase }}</span>\n</ng-template>\n<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform'>\n <span>{{ transform | func : element[metaData.key] }}</span>\n</ng-template>\n" }]
|
|
26
41
|
}], propDecorators: { booleanTemplate: [{
|
|
27
42
|
type: ViewChild,
|
|
28
43
|
args: ['boolean', { static: true }]
|
|
@@ -48,4 +63,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
|
|
|
48
63
|
type: ViewChild,
|
|
49
64
|
args: ['enum', { static: true }]
|
|
50
65
|
}] } });
|
|
51
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
66
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5pdGlhbGl6YXRpb24tY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci11dGlsaXRpZXMvc3JjL3RhYmxlLWJ1aWxkZXIvY29tcG9uZW50cy9pbml0aWFsaXphdGlvbi1jb21wb25lbnQvaW5pdGlhbGl6YXRpb24tY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci11dGlsaXRpZXMvc3JjL3RhYmxlLWJ1aWxkZXIvY29tcG9uZW50cy9pbml0aWFsaXphdGlvbi1jb21wb25lbnQvaW5pdGlhbGl6YXRpb24tY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBZSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7O0FBTWxFLE1BQU0sT0FBTyx1QkFBdUI7SUFIcEM7UUFZRSxnQkFBVyxHQUFHLENBQUMsUUFBbUIsRUFBRSxFQUFFLENBQUMsUUFBUSxDQUFDLFVBQVUsRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksSUFBSyxPQUFPLENBQUM7UUFDL0YsaUJBQVksR0FBRyxDQUFDLFFBQW1CLEVBQWtCLEVBQUUsQ0FDckQsUUFBUSxDQUFDLFVBQVUsRUFBRSxPQUFPLEVBQUUsWUFBWSxLQUFLLElBQUksQ0FBQyxDQUFDLENBQUMsT0FBTztZQUM3RCxDQUFDLENBQUMsUUFBUSxDQUFDLFVBQVUsRUFBRSxPQUFPLEVBQUUsWUFBWSxFQUFFLElBQUksSUFBSSxJQUFJLENBQUM7UUFDN0Qsa0JBQWEsR0FBRyxDQUFDLFFBQW1CLEVBQUUsRUFBRSxDQUFDLFFBQVEsQ0FBQyxVQUFVLEVBQUUsSUFBSSxFQUFFLGFBQWEsSUFBSSxRQUFRLENBQUMsVUFBVSxFQUFFLGFBQWEsQ0FBQztRQUN4SCxXQUFNLEdBQUcsQ0FBQyxRQUFtQixFQUFFLEVBQUUsQ0FBQyxRQUFRLENBQUMsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLElBQUksUUFBUSxDQUFDLFVBQVUsRUFBRSxNQUFNLElBQUksUUFBUSxDQUFDO1FBRXZHLFFBQUcsR0FBRyxDQUFDLFFBQW1CLEVBQUUsT0FBYSxFQUFFLEVBQUUsQ0FBQyxRQUFRLENBQUMsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDO1lBQ3BJLFFBQVEsQ0FBQyxVQUFVLEVBQUUsTUFBTSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUM1RixZQUFPLEdBQUcsQ0FBQyxRQUFtQixFQUFFLE9BQWEsRUFBRSxFQUFFO1lBQy9DLE1BQU0sUUFBUSxHQUFHLENBQUMsQ0FBQyxRQUFRLENBQUMsVUFBVSxFQUFFLElBQUksRUFBRSxLQUFLLENBQUM7WUFDcEQsSUFBSSxJQUFJLEdBQUcsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsc0JBQXNCLENBQUMsQ0FBQyxRQUFRLENBQUMsVUFBVSxFQUFFLElBQUksRUFBRSxLQUFLLENBQUUsRUFBRSxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUUsQ0FBRSxRQUFRLENBQUMsVUFBVSxFQUFFLElBQUksRUFBRSxJQUFJLElBQUksUUFBUSxDQUFDLFVBQVUsRUFBRSxJQUFJLENBQUMsQ0FBQztZQUNuSyxJQUFHLENBQUMsUUFBUSxFQUFDO2dCQUNYLElBQUksSUFBSSxJQUFJLElBQUksQ0FBQyxHQUFHLENBQUMsUUFBUSxFQUFFLE9BQU8sQ0FBQyxFQUFFLENBQUM7YUFDM0M7WUFDRCxPQUFPLElBQUksQ0FBQztRQUNkLENBQUMsQ0FBQTtRQUNELDJCQUFzQixHQUFHLENBQUUsS0FBWSxFQUFFLE9BQVksRUFBRyxFQUFFO1lBQ3hELElBQUksWUFBWSxHQUFHLEtBQUssRUFBRSxZQUFZLElBQUksRUFBRSxDQUFDO1lBQzdDLE1BQU0sSUFBSSxHQUFHLEtBQUssRUFBRSxNQUFNLElBQUksRUFBRSxDQUFDO1lBQ2pDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxFQUFFO2dCQUM5QixZQUFZLEdBQUcsWUFBWSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLE9BQU8sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ3RFLENBQUMsQ0FBQyxDQUFDO1lBQ0gsT0FBTyxZQUFZLENBQUM7UUFDdEIsQ0FBQyxDQUFBO0tBRUY7O29IQW5DWSx1QkFBdUI7d0dBQXZCLHVCQUF1QixxNUJDTnBDLDQ1REE4Q0E7MkZEeENhLHVCQUF1QjtrQkFIbkMsU0FBUzs7OEJBSThCLGVBQWU7c0JBQXBELFNBQVM7dUJBQUMsU0FBUyxFQUFFLEVBQUMsTUFBTSxFQUFFLElBQUksRUFBQztnQkFDRCxZQUFZO3NCQUE5QyxTQUFTO3VCQUFDLE1BQU0sRUFBRSxFQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUM7Z0JBQ00sZ0JBQWdCO3NCQUF0RCxTQUFTO3VCQUFDLFVBQVUsRUFBRSxFQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUM7Z0JBQ0UsZ0JBQWdCO3NCQUF0RCxTQUFTO3VCQUFDLFVBQVUsRUFBRSxFQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUM7Z0JBQ0QsYUFBYTtzQkFBaEQsU0FBUzt1QkFBQyxPQUFPLEVBQUUsRUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFDO2dCQUNPLGtCQUFrQjtzQkFBMUQsU0FBUzt1QkFBQyxZQUFZLEVBQUUsRUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFDO2dCQUNELGVBQWU7c0JBQXBELFNBQVM7dUJBQUMsU0FBUyxFQUFFLEVBQUMsTUFBTSxFQUFFLElBQUksRUFBQztnQkFDRCxZQUFZO3NCQUE5QyxTQUFTO3VCQUFDLE1BQU0sRUFBRSxFQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIFRlbXBsYXRlUmVmLCBWaWV3Q2hpbGQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgTWV0YURhdGEsIFJvdXRlIH0gZnJvbSBcIi4uLy4uL2ludGVyZmFjZXMvcmVwb3J0LWRlZlwiO1xuXG5AQ29tcG9uZW50KHtcbiAgdGVtcGxhdGVVcmw6ICcuL2luaXRpYWxpemF0aW9uLWNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBJbml0aWFsaXphdGlvbkNvbXBvbmVudCB7XG4gIEBWaWV3Q2hpbGQoJ2Jvb2xlYW4nLCB7c3RhdGljOiB0cnVlfSkgYm9vbGVhblRlbXBsYXRlISA6IFRlbXBsYXRlUmVmPGFueT47XG4gIEBWaWV3Q2hpbGQoJ2xpbmsnLCB7c3RhdGljOiB0cnVlfSkgbGlua1RlbXBsYXRlISA6IFRlbXBsYXRlUmVmPGFueT47XG4gIEBWaWV3Q2hpbGQoJ2ltYWdlVXJsJywge3N0YXRpYzogdHJ1ZX0pIGltYWdlVXJsVGVtcGxhdGUhIDogVGVtcGxhdGVSZWY8YW55PjtcbiAgQFZpZXdDaGlsZCgnY3VycmVuY3knLCB7c3RhdGljOiB0cnVlfSkgY3VycmVuY3lUZW1wbGF0ZSEgOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICBAVmlld0NoaWxkKCdhcnJheScsIHtzdGF0aWM6IHRydWV9KSBhcnJheVRlbXBsYXRlISA6IFRlbXBsYXRlUmVmPGFueT47XG4gIEBWaWV3Q2hpbGQoJ2V4cHJlc3Npb24nLCB7c3RhdGljOiB0cnVlfSkgZXhwcmVzc2lvblRlbXBsYXRlISA6IFRlbXBsYXRlUmVmPGFueT47XG4gIEBWaWV3Q2hpbGQoJ2RlZmF1bHQnLCB7c3RhdGljOiB0cnVlfSkgZGVmYXVsdFRlbXBsYXRlISA6IFRlbXBsYXRlUmVmPGFueT47XG4gIEBWaWV3Q2hpbGQoJ2VudW0nLCB7c3RhdGljOiB0cnVlfSkgZW51bVRlbXBsYXRlISA6IFRlbXBsYXRlUmVmPGFueT47XG4gIGZvclRydWVJY29uID0gKG1ldGFEYXRhIDogTWV0YURhdGEpID0+IG1ldGFEYXRhLmFkZGl0aW9uYWw/LmJvb2xlYW4/LmZvclRydWU/Lmljb24gfHwgICdjaGVjayc7XG4gIGZvckZhbHNlSWNvbiA9IChtZXRhRGF0YSA6IE1ldGFEYXRhKSA6IHN0cmluZyB8IG51bGwgPT4gXG4gICAgbWV0YURhdGEuYWRkaXRpb25hbD8uYm9vbGVhbj8uc2hvd0ZvckZhbHNlID09PSB0cnVlID8gJ2NsZWFyJ1xuICAgIDogbWV0YURhdGEuYWRkaXRpb25hbD8uYm9vbGVhbj8uc2hvd0ZvckZhbHNlPy5pY29uIHx8IG51bGw7XG4gIHVzZVJvdXRlckxpbmsgPSAobWV0YURhdGEgOiBNZXRhRGF0YSkgPT4gbWV0YURhdGEuYWRkaXRpb25hbD8ubGluaz8udXNlUm91dGVyTGluayB8fCBtZXRhRGF0YS5hZGRpdGlvbmFsPy51c2VSb3V0ZXJMaW5rO1xuICB0YXJnZXQgPSAobWV0YURhdGEgOiBNZXRhRGF0YSkgPT4gbWV0YURhdGEuYWRkaXRpb25hbD8ubGluaz8udGFyZ2V0IHx8IG1ldGFEYXRhLmFkZGl0aW9uYWw/LnRhcmdldCB8fCAnX2JsYW5rJztcbiAgXG4gIHByaXZhdGUga2V5ID0gKG1ldGFEYXRhIDogTWV0YURhdGEsIGVsZW1lbnQgOiBhbnkpID0+IG1ldGFEYXRhLmFkZGl0aW9uYWw/Lmxpbms/LnVybEtleSA/IGVsZW1lbnRbbWV0YURhdGEuYWRkaXRpb25hbD8ubGluaz8udXJsS2V5XSA6XG4gICAgbWV0YURhdGEuYWRkaXRpb25hbD8udXJsS2V5ID8gZWxlbWVudFttZXRhRGF0YS5hZGRpdGlvbmFsLnVybEtleV0gOiBlbGVtZW50W21ldGFEYXRhLmtleV07XG4gIGdldExpbmsgPSAobWV0YURhdGEgOiBNZXRhRGF0YSwgZWxlbWVudCA6IGFueSkgPT4ge1xuICAgIGNvbnN0IGhhc1JvdXRlID0gISFtZXRhRGF0YS5hZGRpdGlvbmFsPy5saW5rPy5yb3V0ZTtcbiAgICBsZXQgbGluayA9IGhhc1JvdXRlID8gdGhpcy5wYXJzZUludGVycG9sYXRlZFJvdXRlKChtZXRhRGF0YS5hZGRpdGlvbmFsPy5saW5rPy5yb3V0ZSkhLCBlbGVtZW50KSA6ICAoIG1ldGFEYXRhLmFkZGl0aW9uYWw/Lmxpbms/LmJhc2UgfHwgbWV0YURhdGEuYWRkaXRpb25hbD8uYmFzZSk7XG4gICAgaWYoIWhhc1JvdXRlKXtcbiAgICAgIGxpbmsgKz0gYC8ke3RoaXMua2V5KG1ldGFEYXRhLCBlbGVtZW50KX1gO1xuICAgIH1cbiAgICByZXR1cm4gbGluaztcbiAgfVxuICBwYXJzZUludGVycG9sYXRlZFJvdXRlID0gKCByb3V0ZTogUm91dGUsIGVsZW1lbnQ6IGFueSApID0+IHtcbiAgICBsZXQgaW50ZXJwb2xhdGVkID0gcm91dGU/LmludGVycG9sYXRlZCB8fCAnJztcbiAgICBjb25zdCBkaWN0ID0gcm91dGU/LnBhcmFtcyB8fCB7fTtcbiAgICBPYmplY3Qua2V5cyhkaWN0KS5mb3JFYWNoKGtleSA9PiB7XG4gICAgICBpbnRlcnBvbGF0ZWQgPSBpbnRlcnBvbGF0ZWQucmVwbGFjZShgeyR7a2V5fX1gLCBlbGVtZW50W2RpY3Rba2V5XV0pO1xuICAgIH0pO1xuICAgIHJldHVybiBpbnRlcnBvbGF0ZWQ7XG4gIH1cblxufSIsIjxuZy10ZW1wbGF0ZSAjYm9vbGVhbiAgbGV0LWVsZW1lbnQ9J2VsZW1lbnQnIGxldC1tZXRhRGF0YT0nbWV0YURhdGEnPlxuICA8c3Bhbj5cbiAgICA8bWF0LWljb24gKm5nSWY9XCJlbGVtZW50W21ldGFEYXRhLmtleV1cIj5cbiAgICAgIHt7Zm9yVHJ1ZUljb24gfCBmdW5jICA6IG1ldGFEYXRhfX1cbiAgICA8L21hdC1pY29uPlxuICAgIDxtYXQtaWNvbiAqbmdJZj1cIiFlbGVtZW50W21ldGFEYXRhLmtleV1cIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIoZm9yRmFsc2VJY29uIHwgZnVuYyA6IG1ldGFEYXRhKSBhcyBpY29uXCI+XG4gICAgICAgIHt7aWNvbn19XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L21hdC1pY29uPlxuICA8L3NwYW4+XG48L25nLXRlbXBsYXRlPlxuPG5nLXRlbXBsYXRlICNsaW5rICBsZXQtZWxlbWVudD0nZWxlbWVudCcgbGV0LW1ldGFEYXRhPSdtZXRhRGF0YSc+XG4gIDxhICpuZ0lmPVwidXNlUm91dGVyTGluayB8IGZ1bmMgOiBtZXRhRGF0YTsgZWxzZSBocmVmTGlua1wiIHRhcmdldD1cInt7dGFyZ2V0IHwgZnVuYyA6IG1ldGFEYXRhIH19XCJcbiAgICBbcm91dGVyTGlua109XCIgWyhnZXRMaW5rIHwgZnVuYyA6IG1ldGFEYXRhIDogZWxlbWVudCldXCI+XG4gICAge3tlbGVtZW50W21ldGFEYXRhLmtleV19fVxuICA8L2E+XG4gIDxuZy10ZW1wbGF0ZSAjaHJlZkxpbms+XG4gICAgPGEgdGFyZ2V0PVwie3t0YXJnZXQgfCBmdW5jIDogbWV0YURhdGF9fVwiXG4gICAgICBocmVmPVwie3soZ2V0TGluayB8IGZ1bmMgOiBtZXRhRGF0YSA6IGVsZW1lbnQpfX1cIj5cbiAgICAgIHt7ZWxlbWVudFttZXRhRGF0YS5rZXldfX1cbiAgICA8L2E+XG4gIDwvbmctdGVtcGxhdGU+XG48L25nLXRlbXBsYXRlPlxuPG5nLXRlbXBsYXRlICNpbWFnZVVybCAgbGV0LWVsZW1lbnQ9J2VsZW1lbnQnIGxldC1tZXRhRGF0YT0nbWV0YURhdGEnPlxuICA8c3Bhbj5cbiAgICA8aW1nIHNyYz1cInt7ZWxlbWVudFttZXRhRGF0YS5rZXldfX1cIiBoZWlnaHQ9XCI3NXB4XCIgd2lkdGg9XCI3NXB4XCIgLz5cbiAgPC9zcGFuPlxuPC9uZy10ZW1wbGF0ZT5cbjxuZy10ZW1wbGF0ZSAjY3VycmVuY3kgIGxldC1lbGVtZW50PSdlbGVtZW50JyBsZXQtbWV0YURhdGE9J21ldGFEYXRhJyA+XG4gIDxzcGFuIFtjbGFzcy5uZWdhdGl2ZS1jdXJyZW5jeV09XCJlbGVtZW50W21ldGFEYXRhLmtleV0gPCAwXCI+XG4gICAge3sgZWxlbWVudFttZXRhRGF0YS5rZXldIHwgY3VycmVuY3kgfX1cbiAgPC9zcGFuPlxuPC9uZy10ZW1wbGF0ZT5cbjxuZy10ZW1wbGF0ZSAjYXJyYXkgbGV0LWVsZW1lbnQ9J2VsZW1lbnQnIGxldC1tZXRhRGF0YT0nbWV0YURhdGEnPlxuICA8dGItYXJyYXktY29sdW1uIFthcnJheV09J2VsZW1lbnRbbWV0YURhdGEua2V5XScgW21ldGFEYXRhXT0nbWV0YURhdGEnPjwvdGItYXJyYXktY29sdW1uPlxuPC9uZy10ZW1wbGF0ZT5cbjxuZy10ZW1wbGF0ZSAjZXhwcmVzc2lvbiBsZXQtZWxlbWVudD0nZWxlbWVudCcgbGV0LW1ldGFEYXRhPSdtZXRhRGF0YSc+XG4gIDxzcGFuPnt7IG1ldGFEYXRhLnRyYW5zZm9ybSB8IGZ1bmMgOiBlbGVtZW50IH19PC9zcGFuPlxuPC9uZy10ZW1wbGF0ZT5cbjxuZy10ZW1wbGF0ZSAjZW51bSBsZXQtZWxlbWVudD0nZWxlbWVudCcgbGV0LW1ldGFEYXRhPSdtZXRhRGF0YScgPlxuICA8c3Bhbj57eyBtZXRhRGF0YS5hZGRpdGlvbmFsLmVudW1NYXBbZWxlbWVudFttZXRhRGF0YS5rZXldXSB8IHNwYWNlQ2FzZSB9fTwvc3Bhbj5cbjwvbmctdGVtcGxhdGU+XG48bmctdGVtcGxhdGUgI2RlZmF1bHQgbGV0LWVsZW1lbnQ9J2VsZW1lbnQnIGxldC1tZXRhRGF0YT0nbWV0YURhdGEnIGxldC10cmFuc2Zvcm09J3RyYW5zZm9ybSc+XG4gIDxzcGFuPnt7IHRyYW5zZm9ybSB8IGZ1bmMgOiBlbGVtZW50W21ldGFEYXRhLmtleV0gfX08L3NwYW4+XG48L25nLXRlbXBsYXRlPlxuIl19
|
|
@@ -14,9 +14,9 @@ export class NumberFilterComponent {
|
|
|
14
14
|
this.FieldType = FieldType;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
-
NumberFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
18
|
-
NumberFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
19
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
17
|
+
NumberFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18
|
+
NumberFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: NumberFilterComponent, selector: "tb-number-filter", inputs: { CurrentFilterType: "CurrentFilterType", info: "info" }, ngImport: i0, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In\">\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\n </mat-form-field>\n</ng-container>\n\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.NumberBetween\">\n <ng-container ngModelGroup=\"filterValue\" >\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\n </mat-form-field>\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\n </mat-form-field>\n </ng-container>\n</ng-container>\n\n<div class=\"inline\" *ngIf=\"CurrentFilterType === FilterType.In\">\n <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' ></lib-in-filter>\n</div>\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"], components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: NumberFilterComponent, decorators: [{
|
|
20
20
|
type: Component,
|
|
21
21
|
args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In\">\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\n </mat-form-field>\n</ng-container>\n\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.NumberBetween\">\n <ng-container ngModelGroup=\"filterValue\" >\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\n </mat-form-field>\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\n </mat-form-field>\n </ng-container>\n</ng-container>\n\n<div class=\"inline\" *ngIf=\"CurrentFilterType === FilterType.In\">\n <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' ></lib-in-filter>\n</div>\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"] }]
|
|
22
22
|
}], propDecorators: { CurrentFilterType: [{
|
|
@@ -32,9 +32,9 @@ export class SortMenuComponentStore extends ComponentStore {
|
|
|
32
32
|
};
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
|
-
SortMenuComponentStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
36
|
-
SortMenuComponentStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.
|
|
37
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
35
|
+
SortMenuComponentStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: SortMenuComponentStore, deps: [{ token: i1.TableStore }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
36
|
+
SortMenuComponentStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: SortMenuComponentStore });
|
|
37
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: SortMenuComponentStore, decorators: [{
|
|
38
38
|
type: Injectable
|
|
39
39
|
}], ctorParameters: function () { return [{ type: i1.TableStore }]; } });
|
|
40
40
|
const equalSortArray = (arr1, arr2) => arr1.length === arr2.length && arr2.every(s1 => arr1.some(s2 => s1.active === s2.active));
|
|
@@ -65,9 +65,9 @@ export class SortMenuComponent {
|
|
|
65
65
|
this.store.setDirection(sort);
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
|
-
SortMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
69
|
-
SortMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
70
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
68
|
+
SortMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: SortMenuComponent, deps: [{ token: i1.TableStore }, { token: i2.SortMenuComponentStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
69
|
+
SortMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: SortMenuComponent, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\n<ng-container *ngIf=\"sorted$ | async as sorted\">\n <ng-container *ngIf=\"notSorted$ | async as notSorted\">\n <!-- Menu Trigger -->\n <span matTooltip=\"Sort\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon color=\"primary\">swap_vert</mat-icon>\n </button>\n </span>\n\n <!-- Menu -->\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\" (closed)=\"reset()\">\n <div mat-menu-item class=\"menu-button\">\n <div class=\"close-button-wrapper\">\n <span matTooltip=\"Close\">\n <mat-icon>close</mat-icon>\n </span>\n <span *ngIf=\"dirty\" matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\n <mat-icon>undo</mat-icon>\n </span>\n </div>\n </div>\n\n <!-- Apply Button -->\n <div class=\"apply-button-wrapper\">\n <button mat-button color=\"primary\" (click)=\"apply(null)\"\n stop-propagation [class.apply-border]=\"dirty\"\n [disabled]=\"!dirty\">\n Apply\n <ng-container *ngIf=\"dirty\">Unsaved Changes</ng-container>\n </button>\n </div>\n\n <!-- Default Sorting Text -->\n <div *ngIf=\"!sorted.length\" class=\"tip\" >\n Sorting List\n </div>\n\n <!-- Sorted Menu List -->\n <div class=\"list\"\n cdkDropList\n #sortedGroup=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[notSortedGroup]\"\n [cdkDropListData]=\"sorted\"\n (cdkDropListDropped)=\"dropIntoSorted($event)\">\n\n <!-- Menu Item Wrapper -->\n <ng-container *ngFor=\"let sort of sorted;let i=index\">\n\n <!-- Menu Item Headers -->\n <span *ngIf=\"sorted.length > 1 && i === 0 \" class=\"description\" class=\"sort-header\">First By</span>\n <span *ngIf=\"sorted.length > 1 && i !== 0 \" class=\"description\" class=\"sort-header\">Then By</span>\n\n <!-- Menu Item -->\n <div mat-menu-item cdkDrag class=\"menu-item\">\n <div class=\"sort-item\">\n <span class=\"sorted-name\">\n {{sort.displayName || (sort.active | spaceCase)}}\n <span class=\"direction-text\">{{sort.direction}}</span>\n </span>\n\n <!-- Sort Direction Buttons -->\n <div class=\"up-down-buttons-wrapper\">\n <button class=\"up-down-button up-button\" stop-propagation\n (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\n <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n arrow_upward\n </mat-icon>\n </button>\n\n <button class=\"up-down-button\" stop-propagation\n (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\n <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n arrow_downward\n </mat-icon>\n </button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Default Not Sorted Text -->\n <div *ngIf=\"!notSorted.length\" class=\"tip\" >\n Not Sorted List\n </div>\n <!-- Not Sorted Menu List -->\n <div class=\"list\"\n cdkDropList\n #notSortedGroup=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[sortedGroup]\"\n [cdkDropListData]=\"notSorted\"\n (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\n <div mat-menu-item *ngFor=\"let sort of notSorted\" class=\"menu-item\" cdkDrag>\n <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\n </div>\n </div>\n </mat-menu>\n </ng-container>\n</ng-container>\n</ng-container>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:white}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-menu-item.menu-item,.mat-menu-item.menu-button{padding:0 3px;font-size:17px;font-weight:700;line-height:25px;height:30px}.mat-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c}.not-sorted-name{color:#93b1ea}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i6.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i9.StopPropagationDirective, selector: "[stop-propagation]" }, { type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i7.AsyncPipe, "spaceCase": i11.SpaceCasePipe } });
|
|
70
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: SortMenuComponent, decorators: [{
|
|
71
71
|
type: Component,
|
|
72
72
|
args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\n<ng-container *ngIf=\"sorted$ | async as sorted\">\n <ng-container *ngIf=\"notSorted$ | async as notSorted\">\n <!-- Menu Trigger -->\n <span matTooltip=\"Sort\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon color=\"primary\">swap_vert</mat-icon>\n </button>\n </span>\n\n <!-- Menu -->\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\" (closed)=\"reset()\">\n <div mat-menu-item class=\"menu-button\">\n <div class=\"close-button-wrapper\">\n <span matTooltip=\"Close\">\n <mat-icon>close</mat-icon>\n </span>\n <span *ngIf=\"dirty\" matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\n <mat-icon>undo</mat-icon>\n </span>\n </div>\n </div>\n\n <!-- Apply Button -->\n <div class=\"apply-button-wrapper\">\n <button mat-button color=\"primary\" (click)=\"apply(null)\"\n stop-propagation [class.apply-border]=\"dirty\"\n [disabled]=\"!dirty\">\n Apply\n <ng-container *ngIf=\"dirty\">Unsaved Changes</ng-container>\n </button>\n </div>\n\n <!-- Default Sorting Text -->\n <div *ngIf=\"!sorted.length\" class=\"tip\" >\n Sorting List\n </div>\n\n <!-- Sorted Menu List -->\n <div class=\"list\"\n cdkDropList\n #sortedGroup=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[notSortedGroup]\"\n [cdkDropListData]=\"sorted\"\n (cdkDropListDropped)=\"dropIntoSorted($event)\">\n\n <!-- Menu Item Wrapper -->\n <ng-container *ngFor=\"let sort of sorted;let i=index\">\n\n <!-- Menu Item Headers -->\n <span *ngIf=\"sorted.length > 1 && i === 0 \" class=\"description\" class=\"sort-header\">First By</span>\n <span *ngIf=\"sorted.length > 1 && i !== 0 \" class=\"description\" class=\"sort-header\">Then By</span>\n\n <!-- Menu Item -->\n <div mat-menu-item cdkDrag class=\"menu-item\">\n <div class=\"sort-item\">\n <span class=\"sorted-name\">\n {{sort.displayName || (sort.active | spaceCase)}}\n <span class=\"direction-text\">{{sort.direction}}</span>\n </span>\n\n <!-- Sort Direction Buttons -->\n <div class=\"up-down-buttons-wrapper\">\n <button class=\"up-down-button up-button\" stop-propagation\n (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\n <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n arrow_upward\n </mat-icon>\n </button>\n\n <button class=\"up-down-button\" stop-propagation\n (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\n <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n arrow_downward\n </mat-icon>\n </button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Default Not Sorted Text -->\n <div *ngIf=\"!notSorted.length\" class=\"tip\" >\n Not Sorted List\n </div>\n <!-- Not Sorted Menu List -->\n <div class=\"list\"\n cdkDropList\n #notSortedGroup=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[sortedGroup]\"\n [cdkDropListData]=\"notSorted\"\n (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\n <div mat-menu-item *ngFor=\"let sort of notSorted\" class=\"menu-item\" cdkDrag>\n <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\n </div>\n </div>\n </mat-menu>\n </ng-container>\n</ng-container>\n</ng-container>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:white}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-menu-item.menu-item,.mat-menu-item.menu-button{padding:0 3px;font-size:17px;font-weight:700;line-height:25px;height:30px}.mat-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c}.not-sorted-name{color:#93b1ea}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"] }]
|
|
73
73
|
}], ctorParameters: function () { return [{ type: i1.TableStore }, { type: i2.SortMenuComponentStore }]; } });
|
|
@@ -217,9 +217,9 @@ export class TableContainerComponent {
|
|
|
217
217
|
return _.flattenDeep(withHeadersAndFooters);
|
|
218
218
|
}
|
|
219
219
|
}
|
|
220
|
-
TableContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
221
|
-
TableContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
222
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
220
|
+
TableContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableContainerComponent, deps: [{ token: i1.TableStore }, { token: i2.ExportToCsvService }, { token: TableBuilderConfigToken }, { token: i3.Store }, { token: i4.TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
221
|
+
TableContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: TableContainerComponent, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", OnStateReset: "OnStateReset", OnSaveState: "OnSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], ngImport: i0, template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\n <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n <div class=\"header-wrapper\">\n <div class=\"title\">\n <ng-content select=\".tb-header-title\"\n *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n </ng-content>\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list></lib-filter-list>\n <ng-container *ngIf=\"!tableSettings.hideHeader\">\n <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n </ng-container>\n <ng-template #allMenu>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <div class=\"flex-column\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n </ng-template>\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n (click)=\"state.toggleCollapseHeader()\">\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n </mat-icon>\n </ng-container>\n </div>\n </div>\n\n <div style=\"clear: both;\">\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\">\n </tb-generic-table>\n </div>\n\n\n\n <ng-template #headerMenu>\n <ng-container>\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n </tb-filter-displayer>\n <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\n <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\n </ng-container>\n </ng-template>\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"resetState()\">\n <mat-icon color=\"primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\n <mat-icon color=\"primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\n <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\n <mat-icon color=\"primary\">save</mat-icon>\n <span>Save to {{currentKey}}</span>\n </button>\n <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n <span>Choose Profile</span>\n </button>\n </ng-container>\n\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n <button mat-menu-item clickEmitter #add='clickEmitter'>\n <mat-icon>add</mat-icon>\n <span>New</span>\n </button>\n <ng-container *ngFor='let key of stateKeys$ | async'>\n <button mat-menu-item (click)='setProfileState(key)'>\n <div style='display: flex; align-items: center; justify-content: space-between;'>\n <span style='display:flex;'>{{key}}</span>\n <span style='display:flex;'>\n <span style=\"width: 120px;\"></span>\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n </span>\n </div>\n </button>\n </ng-container>\n </mat-menu>\n <div *opDialog='add'>\n <mat-form-field>\n <input style='width:90%' matInput #addedKey />\n </mat-form-field>\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n [disabled]=\"!addedKey.value\">Add</button>\n </div>\n </ng-template>\n\n </ng-container>\n\n</ng-container>\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], components: [{ type: i5.FilterChipsComponent, selector: "lib-filter-list" }, { type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i9.GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "disableSort"], outputs: ["selection$"] }, { type: i10.GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { type: i11.GenColDisplayerComponent, selector: "tb-col-displayer" }, { type: i12.SortMenuComponent, selector: "tb-sort-menu" }, { type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i13.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i14.MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { type: i15.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i16.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i17.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i18.ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { type: i16.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i19.StopPropagationDirective, selector: "[stop-propagation]" }, { type: i20.DialogDirective, selector: "[opDialog]", inputs: ["opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { type: i21.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], pipes: { "async": i16.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
222
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
223
223
|
type: Component,
|
|
224
224
|
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\n <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n <div class=\"header-wrapper\">\n <div class=\"title\">\n <ng-content select=\".tb-header-title\"\n *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n </ng-content>\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list></lib-filter-list>\n <ng-container *ngIf=\"!tableSettings.hideHeader\">\n <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n </ng-container>\n <ng-template #allMenu>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <div class=\"flex-column\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n </ng-template>\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n (click)=\"state.toggleCollapseHeader()\">\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n </mat-icon>\n </ng-container>\n </div>\n </div>\n\n <div style=\"clear: both;\">\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\">\n </tb-generic-table>\n </div>\n\n\n\n <ng-template #headerMenu>\n <ng-container>\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n </tb-filter-displayer>\n <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\n <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\n </ng-container>\n </ng-template>\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"resetState()\">\n <mat-icon color=\"primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\n <mat-icon color=\"primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\n <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\n <mat-icon color=\"primary\">save</mat-icon>\n <span>Save to {{currentKey}}</span>\n </button>\n <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n <span>Choose Profile</span>\n </button>\n </ng-container>\n\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n <button mat-menu-item clickEmitter #add='clickEmitter'>\n <mat-icon>add</mat-icon>\n <span>New</span>\n </button>\n <ng-container *ngFor='let key of stateKeys$ | async'>\n <button mat-menu-item (click)='setProfileState(key)'>\n <div style='display: flex; align-items: center; justify-content: space-between;'>\n <span style='display:flex;'>{{key}}</span>\n <span style='display:flex;'>\n <span style=\"width: 120px;\"></span>\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n </span>\n </div>\n </button>\n </ng-container>\n </mat-menu>\n <div *opDialog='add'>\n <mat-form-field>\n <input style='width:90%' matInput #addedKey />\n </mat-form-field>\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n [disabled]=\"!addedKey.value\">Add</button>\n </div>\n </ng-template>\n\n </ng-container>\n\n</ng-container>\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
225
225
|
}], ctorParameters: function () { return [{ type: i1.TableStore }, { type: i2.ExportToCsvService }, { type: undefined, decorators: [{
|
|
@@ -33,9 +33,9 @@ export class FilterChipsComponent {
|
|
|
33
33
|
this.filterStore.clearAll();
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
|
-
FilterChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
37
|
-
FilterChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
38
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
36
|
+
FilterChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FilterChipsComponent, deps: [{ token: i1.TableStore }, { token: i2.WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
37
|
+
FilterChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: FilterChipsComponent, selector: "lib-filter-list", ngImport: i0, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\n matTooltip=\"Close all Filters\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n\n\n <div *ngIf=\"currentFilters.length\" class=\"float\">\n <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\n </div>\n </div>\n\n <mat-chip-list *ngrxLet=\"filters$ as filters\">\n <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\n Clear All\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </mat-chip-list>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { type: i6.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i7.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i6.MatChipRemove, selector: "[matChipRemove]" }], pipes: { "async": i8.AsyncPipe, "keyDisplay": i10.KeyDisplayPipe, "formatFilterType": i11.FormatFilterTypePipe, "formatFilterValue": i12.FormatFilterValuePipe } });
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FilterChipsComponent, decorators: [{
|
|
39
39
|
type: Component,
|
|
40
40
|
args: [{ selector: 'lib-filter-list', template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\n matTooltip=\"Close all Filters\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n\n\n <div *ngIf=\"currentFilters.length\" class=\"float\">\n <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\n </div>\n </div>\n\n <mat-chip-list *ngrxLet=\"filters$ as filters\">\n <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\n Clear All\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </mat-chip-list>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"] }]
|
|
41
41
|
}], ctorParameters: function () { return [{ type: i1.TableStore }, { type: i2.WrapperFilterStore }]; } });
|
|
@@ -21,9 +21,9 @@ export class GenFilterDisplayerComponent {
|
|
|
21
21
|
this.filterStore.addFilter({ key: metaData.key, fieldType: metaData.fieldType });
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
|
-
GenFilterDisplayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
25
|
-
GenFilterDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
24
|
+
GenFilterDisplayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: GenFilterDisplayerComponent, deps: [{ token: i1.TableStore }, { token: i2.WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
+
GenFilterDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n <button class=\"filter-labels\" *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\n {{md.displayName || (md.key | spaceCase)}}\n </button>\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i6.StopPropagationDirective, selector: "[stop-propagation]" }, { type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i8.AsyncPipe, "spaceCase": i9.SpaceCasePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
28
|
args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n <button class=\"filter-labels\" *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\n {{md.displayName || (md.key | spaceCase)}}\n </button>\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"] }]
|
|
29
29
|
}], ctorParameters: function () { return [{ type: i1.TableStore }, { type: i2.WrapperFilterStore }]; } });
|
package/esm2020/table-builder/components/table-container-filter/table-wrapper-filter-store.mjs
CHANGED
|
@@ -17,9 +17,9 @@ export class WrapperFilterStore extends ComponentStore {
|
|
|
17
17
|
});
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
|
-
WrapperFilterStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
21
|
-
WrapperFilterStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
20
|
+
WrapperFilterStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: WrapperFilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
21
|
+
WrapperFilterStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: WrapperFilterStore });
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: WrapperFilterStore, decorators: [{
|
|
23
23
|
type: Injectable
|
|
24
24
|
}], ctorParameters: function () { return []; } });
|
|
25
25
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtd3JhcHBlci1maWx0ZXItc3RvcmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXV0aWxpdGllcy9zcmMvdGFibGUtYnVpbGRlci9jb21wb25lbnRzL3RhYmxlLWNvbnRhaW5lci1maWx0ZXIvdGFibGUtd3JhcHBlci1maWx0ZXItc3RvcmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzQyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDdkQsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQUdyQyxNQUFNLE9BQU8sa0JBQW9CLFNBQVEsY0FBNEM7SUFDbkY7UUFDRSxLQUFLLENBQUMsRUFBQyxVQUFVLEVBQUMsRUFBRSxFQUFDLENBQUMsQ0FBQztRQUd6QixhQUFRLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxHQUFFLEVBQUUsQ0FBQSxDQUFDLEVBQUMsVUFBVSxFQUFDLEVBQUUsRUFBQyxDQUFDLENBQUMsQ0FBQztRQUMvQyxrQkFBYSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxLQUFLLEVBQUMsS0FBWSxFQUFDLEVBQUU7WUFDakQsTUFBTSxHQUFHLEdBQUcsQ0FBQyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQUMsQ0FBQztZQUNsQyxHQUFHLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztZQUNyQixPQUFPLEVBQUMsVUFBVSxFQUFDLEdBQUcsRUFBQyxDQUFDO1FBQzFCLENBQUMsQ0FBQyxDQUFDO1FBRUgsb0JBQWUsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxLQUFLLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQztRQUVuRSxjQUFTLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEtBQUssRUFBQyxNQUFvQixFQUFDLEVBQUU7WUFDckQsT0FBTyxDQUFDLEVBQUMsR0FBRyxLQUFLLEVBQUMsVUFBVSxFQUFDLENBQUMsR0FBRyxLQUFLLENBQUMsVUFBVSxFQUFDLE1BQU0sQ0FBQyxFQUFDLENBQUMsQ0FBQztRQUM5RCxDQUFDLENBQUMsQ0FBQTtJQWJGLENBQUM7OytHQUhVLGtCQUFrQjttSEFBbEIsa0JBQWtCOzJGQUFsQixrQkFBa0I7a0JBRDlCLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IENvbXBvbmVudFN0b3JlIH0gZnJvbSBcIkBuZ3J4L2NvbXBvbmVudC1zdG9yZVwiO1xuaW1wb3J0IHsgbWFwIH0gZnJvbSBcInJ4anMvb3BlcmF0b3JzXCI7XG5pbXBvcnQgeyBQYXJ0aWFsRmlsdGVyIH0gZnJvbSBcIi4uLy4uL2NsYXNzZXMvZmlsdGVyLWluZm9cIjtcbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBXcmFwcGVyRmlsdGVyU3RvcmUgIGV4dGVuZHMgQ29tcG9uZW50U3RvcmU8e2ZpbHRlckluZm86UGFydGlhbEZpbHRlcltdfT57XG4gIGNvbnN0cnVjdG9yKCl7XG4gICAgc3VwZXIoe2ZpbHRlckluZm86W119KTtcbiAgfVxuXG4gIGNsZWFyQWxsID0gdGhpcy51cGRhdGVyKCgpPT4oe2ZpbHRlckluZm86W119KSk7XG4gIGRlbGV0ZUJ5SW5kZXggPSB0aGlzLnVwZGF0ZXIoKHN0YXRlLGluZGV4Om51bWJlcik9PntcbiAgICBjb25zdCBhcnIgPSBbLi4uc3RhdGUuZmlsdGVySW5mb107XG4gICAgYXJyLnNwbGljZShpbmRleCwgMSk7XG4gICAgcmV0dXJuIHtmaWx0ZXJJbmZvOmFycn07XG4gIH0pO1xuXG4gIGN1cnJlbnRGaWx0ZXJzJCA9IHRoaXMuc3RhdGUkLnBpcGUobWFwKHN0YXRlID0+IHN0YXRlLmZpbHRlckluZm8pKTtcblxuICBhZGRGaWx0ZXIgPSB0aGlzLnVwZGF0ZXIoKHN0YXRlLGZpbHRlcjpQYXJ0aWFsRmlsdGVyKT0+e1xuICAgIHJldHVybiAoey4uLnN0YXRlLGZpbHRlckluZm86Wy4uLnN0YXRlLmZpbHRlckluZm8sZmlsdGVyXX0pO1xuICB9KVxufVxuIl19
|
|
@@ -32,9 +32,9 @@ export class CustomCellDirective {
|
|
|
32
32
|
};
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
|
-
CustomCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
36
|
-
CustomCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.
|
|
37
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
35
|
+
CustomCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: CustomCellDirective, deps: [{ token: i0.TemplateRef, optional: true }, { token: i1.CdkColumnDef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
36
|
+
CustomCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.5", type: CustomCellDirective, selector: "[customCell]", inputs: { customCell: "customCell", displayName: "displayName", preSort: "preSort", TemplateRef: "TemplateRef", customCellOrder: "customCellOrder", customCellWidth: "customCellWidth" }, ngImport: i0 });
|
|
37
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: CustomCellDirective, decorators: [{
|
|
38
38
|
type: Directive,
|
|
39
39
|
args: [{
|
|
40
40
|
selector: '[customCell]',
|