@rosoftlab/core 0.0.100 → 0.0.101

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.
Files changed (29) hide show
  1. package/esm2020/lib/base-components/base-form-edit.component.mjs +15 -41
  2. package/esm2020/lib/base-components/field-error-display/field-error-display.component.mjs +3 -3
  3. package/esm2020/lib/base-components/generic-table/generic-table.component.mjs +17 -80
  4. package/esm2020/lib/base-components/index.mjs +1 -2
  5. package/esm2020/lib/base-components/page-not-found/page-not-found.component.mjs +3 -3
  6. package/esm2020/lib/base-components/under-construction/under-construction.component.mjs +3 -3
  7. package/esm2020/lib/decorators/attribute.decorator.mjs +1 -4
  8. package/esm2020/lib/interfaces/attribute-decorator-options.interface.mjs +1 -1
  9. package/esm2020/lib/models/base.model.mjs +3 -46
  10. package/esm2020/lib/models/grid-layout-format.enum.mjs +1 -2
  11. package/esm2020/lib/module.mjs +5 -14
  12. package/esm2020/lib/services/base.service.mjs +2 -6
  13. package/fesm2015/rosoftlab-core.mjs +72 -443
  14. package/fesm2015/rosoftlab-core.mjs.map +1 -1
  15. package/fesm2020/rosoftlab-core.mjs +72 -438
  16. package/fesm2020/rosoftlab-core.mjs.map +1 -1
  17. package/lib/base-components/base-form-edit.component.d.ts +4 -9
  18. package/lib/base-components/field-error-display/field-error-display.component.d.ts +1 -1
  19. package/lib/base-components/generic-table/generic-table.component.d.ts +4 -17
  20. package/lib/base-components/index.d.ts +0 -1
  21. package/lib/base-components/page-not-found/page-not-found.component.d.ts +1 -1
  22. package/lib/base-components/under-construction/under-construction.component.d.ts +1 -1
  23. package/lib/interfaces/attribute-decorator-options.interface.d.ts +0 -1
  24. package/lib/models/base.model.d.ts +3 -7
  25. package/lib/models/grid-layout-format.enum.d.ts +1 -2
  26. package/lib/module.d.ts +6 -8
  27. package/package.json +3 -3
  28. package/esm2020/lib/base-components/searchable-dropdown/searchable-dropdown.component.mjs +0 -231
  29. package/lib/base-components/searchable-dropdown/searchable-dropdown.component.d.ts +0 -62
@@ -1,52 +1,47 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Component, Input, EventEmitter, Optional, Self, Output, Injectable, ElementRef, ViewEncapsulation, ViewChild, Directive, ContentChildren, NgModule, Pipe } from '@angular/core';
3
- import { coerceBooleanProperty } from '@angular/cdk/coercion';
4
- import * as i2 from '@angular/forms';
5
- import { FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
6
- import { Subject, Observable, throwError, from, merge, of, fromEvent, BehaviorSubject, combineLatest } from 'rxjs';
7
- import { filter, debounceTime, tap, switchMap, finalize, takeUntil, map, catchError, distinctUntilChanged, startWith } from 'rxjs/operators';
8
- import * as i1 from '@angular/cdk/a11y';
9
- import * as i3 from '@angular/material/form-field';
10
- import * as i4 from '@angular/material/button';
11
- import { MatButtonModule } from '@angular/material/button';
12
- import * as i5 from '@angular/material/icon';
13
- import { MatIconModule } from '@angular/material/icon';
14
- import * as i6 from '@angular/material/autocomplete';
15
- import { MatAutocompleteModule } from '@angular/material/autocomplete';
16
- import * as i7 from '@angular/material/core';
17
- import { MatNativeDateModule, MatRippleModule, MatOptionModule } from '@angular/material/core';
18
- import * as i8 from '@angular/material/input';
19
- import { MatInputModule } from '@angular/material/input';
20
- import * as i3$1 from '@angular/common';
21
- import { DatePipe, DecimalPipe, PercentPipe, CommonModule } from '@angular/common';
22
- import * as i1$1 from '@ngx-translate/core';
23
- import { TranslateModule } from '@ngx-translate/core';
2
+ import { Component, Input, Injectable, EventEmitter, ElementRef, ViewChild, Output, Directive, ContentChildren, NgModule, Pipe } from '@angular/core';
24
3
  import { __decorate } from 'tslib';
25
- import * as i2$2 from 'ng-block-ui';
4
+ import * as i1$1 from '@angular/forms';
5
+ import { FormGroup, FormControl, Validators } from '@angular/forms';
6
+ import * as i2$1 from 'ng-block-ui';
26
7
  import { BlockUI, BlockUIModule } from 'ng-block-ui';
27
- import * as i2$1 from '@angular/router';
28
- import * as i1$2 from '@angular/common/http';
8
+ import { Observable, throwError, from, Subject, merge, of, BehaviorSubject, combineLatest } from 'rxjs';
9
+ import * as i2 from '@angular/router';
10
+ import * as i1 from '@angular/common/http';
29
11
  import { HttpHeaders, HttpParams, HttpErrorResponse, HttpClientModule } from '@angular/common/http';
30
12
  import { compare } from 'fast-json-patch';
31
13
  import * as qs from 'qs';
14
+ import { map, catchError, debounceTime, distinctUntilChanged, startWith, switchMap } from 'rxjs/operators';
32
15
  import Swal from 'sweetalert2';
33
- import * as i12 from '@angular/cdk/drag-drop';
16
+ import * as i1$2 from '@ngx-translate/core';
17
+ import { TranslateModule } from '@ngx-translate/core';
18
+ import * as i3 from '@angular/common';
19
+ import { DatePipe, DecimalPipe, PercentPipe, CommonModule } from '@angular/common';
20
+ import * as i11 from '@angular/cdk/drag-drop';
34
21
  import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
35
22
  import * as i9 from '@angular/material/paginator';
36
23
  import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
37
- import * as i8$1 from '@angular/material/sort';
24
+ import * as i8 from '@angular/material/sort';
38
25
  import { MatSort, MatSortModule } from '@angular/material/sort';
39
- import * as i6$1 from '@angular/material/table';
26
+ import * as i6 from '@angular/material/table';
40
27
  import { MatTableDataSource, MatTableModule } from '@angular/material/table';
41
28
  import * as jsonLogic from 'json-logic-js/logic.js';
42
- import * as i5$1 from '@angular/material/progress-spinner';
29
+ import * as i4 from '@angular/material/form-field';
30
+ import * as i5 from '@angular/material/progress-spinner';
43
31
  import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
44
- import * as i13 from '@angular/material/tooltip';
32
+ import * as i7 from '@angular/material/icon';
33
+ import { MatIconModule } from '@angular/material/icon';
34
+ import * as i10 from '@angular/material/input';
35
+ import { MatInputModule } from '@angular/material/input';
36
+ import * as i12 from '@angular/material/tooltip';
45
37
  import { MatTooltipModule } from '@angular/material/tooltip';
46
38
  import { parseISO } from 'date-fns';
39
+ import { MatAutocompleteModule } from '@angular/material/autocomplete';
40
+ import { MatButtonModule } from '@angular/material/button';
47
41
  import { MatButtonToggleModule } from '@angular/material/button-toggle';
48
42
  import { MatCheckboxModule } from '@angular/material/checkbox';
49
43
  import { MatChipsModule } from '@angular/material/chips';
44
+ import { MatNativeDateModule, MatRippleModule, MatOptionModule } from '@angular/material/core';
50
45
  import { MatGridListModule } from '@angular/material/grid-list';
51
46
  import { MatMenuModule } from '@angular/material/menu';
52
47
  import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -73,10 +68,10 @@ import { CdkStepperModule } from '@angular/cdk/stepper';
73
68
  class FieldErrorDisplayComponent {
74
69
  }
75
70
  FieldErrorDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FieldErrorDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
76
- FieldErrorDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: FieldErrorDisplayComponent, selector: "rsl-field-error-display", inputs: { errorMsg: "errorMsg", displayError: "displayError" }, ngImport: i0, template: "<div *ngIf=\"displayError\" >\n <!-- <span class=\"glyphicon glyphicon-remove form-control-feedback fix-error-icon\"></span> -->\n <span class=\"sr-only\">(error)</span>\n <div class=\"error-msg\">\n {{ errorMsg }}\n </div>\n</div>\n", styles: [".error-msg{color:red}.fix-error-icon{top:27px}\n"] });
71
+ FieldErrorDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: FieldErrorDisplayComponent, selector: "app-field-error-display", inputs: { errorMsg: "errorMsg", displayError: "displayError" }, ngImport: i0, template: "<div *ngIf=\"displayError\" >\n <!-- <span class=\"glyphicon glyphicon-remove form-control-feedback fix-error-icon\"></span> -->\n <span class=\"sr-only\">(error)</span>\n <div class=\"error-msg\">\n {{ errorMsg }}\n </div>\n</div>\n", styles: [".error-msg{color:red}.fix-error-icon{top:27px}\n"] });
77
72
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FieldErrorDisplayComponent, decorators: [{
78
73
  type: Component,
79
- args: [{ selector: 'rsl-field-error-display', template: "<div *ngIf=\"displayError\" >\n <!-- <span class=\"glyphicon glyphicon-remove form-control-feedback fix-error-icon\"></span> -->\n <span class=\"sr-only\">(error)</span>\n <div class=\"error-msg\">\n {{ errorMsg }}\n </div>\n</div>\n", styles: [".error-msg{color:red}.fix-error-icon{top:27px}\n"] }]
74
+ args: [{ selector: 'app-field-error-display', template: "<div *ngIf=\"displayError\" >\n <!-- <span class=\"glyphicon glyphicon-remove form-control-feedback fix-error-icon\"></span> -->\n <span class=\"sr-only\">(error)</span>\n <div class=\"error-msg\">\n {{ errorMsg }}\n </div>\n</div>\n", styles: [".error-msg{color:red}.fix-error-icon{top:27px}\n"] }]
80
75
  }], propDecorators: { errorMsg: [{
81
76
  type: Input
82
77
  }], displayError: [{
@@ -90,237 +85,20 @@ class PageNotFoundComponent {
90
85
  }
91
86
  }
92
87
  PageNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
93
- PageNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: PageNotFoundComponent, selector: "rsl-page-not-found", ngImport: i0, template: "<div class=\"forms-view-container\">\n <div class=\"under-construction-view-container\">\n Page not found\n </div>\n</div>", styles: [".under-construction-view-container{height:calc(100vh - 250px);margin:60px 0 0;padding:0;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:1.8em;line-height:1.3em;font-weight:300;color:#58585b;text-align:center}\n"] });
88
+ PageNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: PageNotFoundComponent, selector: "app-page-not-found", ngImport: i0, template: "<div class=\"forms-view-container\">\n <div class=\"under-construction-view-container\">\n Page not found\n </div>\n</div>", styles: [".under-construction-view-container{height:calc(100vh - 250px);margin:60px 0 0;padding:0;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:1.8em;line-height:1.3em;font-weight:300;color:#58585b;text-align:center}\n"] });
94
89
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: PageNotFoundComponent, decorators: [{
95
90
  type: Component,
96
- args: [{ selector: 'rsl-page-not-found', template: "<div class=\"forms-view-container\">\n <div class=\"under-construction-view-container\">\n Page not found\n </div>\n</div>", styles: [".under-construction-view-container{height:calc(100vh - 250px);margin:60px 0 0;padding:0;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:1.8em;line-height:1.3em;font-weight:300;color:#58585b;text-align:center}\n"] }]
91
+ args: [{ selector: 'app-page-not-found', template: "<div class=\"forms-view-container\">\n <div class=\"under-construction-view-container\">\n Page not found\n </div>\n</div>", styles: [".under-construction-view-container{height:calc(100vh - 250px);margin:60px 0 0;padding:0;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:1.8em;line-height:1.3em;font-weight:300;color:#58585b;text-align:center}\n"] }]
97
92
  }], ctorParameters: function () { return []; } });
98
93
 
99
- class SearchableDropdownComponent {
100
- constructor(_focusMonitor, _elementRef, ngControl) {
101
- this._focusMonitor = _focusMonitor;
102
- this._elementRef = _elementRef;
103
- this.ngControl = ngControl;
104
- this.onChange = (_) => { };
105
- this.onTouched = () => { };
106
- this.stateChanges = new Subject();
107
- this.focused = false;
108
- this.errorState = false;
109
- this.id = `rsl-searchable-dropdown-${SearchableDropdownComponent.nextId++}`;
110
- // label for the search dropdown
111
- this.label = '';
112
- //Fields for sorting the API data
113
- this.sortFields = '';
114
- // The value used to populate the control value
115
- this.valueField = 'id';
116
- // The minumum char for search
117
- this.minLengthTerm = 3;
118
- this.modelSelected = new EventEmitter();
119
- this._required = false;
120
- this._disabled = false;
121
- this.showSerach = true;
122
- this.isLoading = false;
123
- this.options = [];
124
- this.filteredOptions = [];
125
- /** Subject that emits when the component has been destroyed. */
126
- this._onDestroy = new Subject();
127
- this.searchControl = new FormControl('');
128
- _focusMonitor.monitor(_elementRef, true).subscribe(origin => {
129
- if (this.focused && !origin) {
130
- this.onTouched();
131
- }
132
- this.focused = !!origin;
133
- this.stateChanges.next();
134
- });
135
- if (this.ngControl) {
136
- this.ngControl.valueAccessor = this;
137
- }
138
- }
139
- get empty() {
140
- return !this.value;
141
- }
142
- get required() { return this._required; }
143
- set required(value) {
144
- this._required = coerceBooleanProperty(value);
145
- this.stateChanges.next();
146
- }
147
- get disabled() { return this._disabled; }
148
- set disabled(value) {
149
- this._disabled = coerceBooleanProperty(value);
150
- this.stateChanges.next();
151
- }
152
- get value() {
153
- return this._value;
154
- }
155
- set value(value) {
156
- if (value)
157
- if (this._value !== value) {
158
- this.loadModel(value);
159
- }
160
- this._value = value;
161
- this.stateChanges.next();
162
- }
163
- ngOnInit() {
164
- if (!this.displayFields)
165
- this.displayFields = this.searchFields;
166
- this.loadModel(this.ngControl.value);
167
- if (this.preloadElementsCount) {
168
- this.serviceRef.getAll(1, this.preloadElementsCount).subscribe({
169
- next: (data) => {
170
- this.showSerach = false;
171
- this.options = data.getModels();
172
- this.filteredOptions = this.options;
173
- }
174
- });
175
- }
176
- this.searchControl.valueChanges
177
- .pipe(filter((res) => {
178
- const result = res !== null && res.length >= this.minLengthTerm;
179
- if (!result) {
180
- this.options = [];
181
- this.filteredOptions = [];
182
- }
183
- this.showSerach = !result;
184
- return result;
185
- }), debounceTime(300), tap(() => {
186
- this.filteredOptions = [];
187
- this.isLoading = true;
188
- }), switchMap((value) => this.serviceRef
189
- .getAll(1, 10, this.sortFields, `${this.searchFields.replace(',', '|')}@=*${value}`)
190
- .pipe(finalize(() => {
191
- this.isLoading = false;
192
- }))), takeUntil(this._onDestroy))
193
- .subscribe((options) => {
194
- this.filteredOptions = options.getModels();
195
- });
196
- }
197
- onSelected($event) {
198
- const value = $event.option.value;
199
- this.searchControl.setValue(value);
200
- this.modelSelected.emit(value);
201
- if (this.valueField in value) {
202
- this.setControlValue(value[this.valueField]);
203
- }
204
- }
205
- setControlValue(value) {
206
- this.value = value;
207
- this.ngControl.control.setValue(value);
208
- }
209
- displayWith(value) {
210
- return this.getConcatedFields(value);
211
- }
212
- clearSelection() {
213
- this.modelSelected.emit(null);
214
- this.setControlValue(null);
215
- this.searchControl.setValue(null);
216
- this.filteredOptions = this.options;
217
- }
218
- getConcatedFields(option) {
219
- if (!option)
220
- return null;
221
- const filtersArr = this.displayFields.split(',');
222
- return filtersArr.reduce((acc, cv) => {
223
- return acc.concat(option[cv] + ' ');
224
- }, '');
225
- }
226
- ngOnDestroy() {
227
- this.searchControl = null;
228
- this.stateChanges.complete();
229
- this._focusMonitor.stopMonitoring(this._elementRef);
230
- this._onDestroy.next();
231
- this._onDestroy.complete();
232
- }
233
- getSearchText() {
234
- return `Enter ${this.minLengthTerm} characters to start search`;
235
- }
236
- writeValue(model) {
237
- console.log(model);
238
- this.value = model;
239
- }
240
- registerOnChange(fn) {
241
- this.onChange = fn;
242
- }
243
- registerOnTouched(fn) {
244
- this.onTouched = fn;
245
- }
246
- setDisabledState(isDisabled) {
247
- this.disabled = isDisabled;
248
- }
249
- loadModel(id) {
250
- //Load the model from API to display the value
251
- let needLoad = false;
252
- if (id) {
253
- if (!this.searchControl.value)
254
- needLoad = true;
255
- else {
256
- if (this.searchControl.value[this.valueField] !== id) {
257
- needLoad = true;
258
- }
259
- }
260
- }
261
- if (needLoad) {
262
- this.serviceRef.get(id).subscribe({
263
- next: (model) => {
264
- this.options.push(model);
265
- this.filteredOptions = this.options;
266
- this.searchControl.setValue(model);
267
- }
268
- });
269
- }
270
- }
271
- }
272
- SearchableDropdownComponent.nextId = 0;
273
- SearchableDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SearchableDropdownComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ElementRef }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
274
- SearchableDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: SearchableDropdownComponent, selector: "rsl-searchable-dropdown", inputs: { label: "label", fControlName: "fControlName", serviceRef: "serviceRef", searchFields: "searchFields", displayFields: "displayFields", sortFields: "sortFields", valueField: "valueField", minLengthTerm: "minLengthTerm", preloadElementsCount: "preloadElementsCount", required: "required", disabled: "disabled", value: "value" }, outputs: { modelSelected: "modelSelected" }, host: { properties: { "class.example-floating": "shouldLabelFloat", "id": "id", "attr.aria-describedby": "describedBy" } }, ngImport: i0, template: "<div class=\"form-group\">\r\n <label>{{label | translate}}</label>\r\n <mat-form-field appearance=\"outline\" fxFlex>\r\n <input matInput [matAutocomplete]=\"auto\" [formControl]=\"searchControl\">\r\n <button *ngIf=\"searchControl.value\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearSelection()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelected($event)\"\r\n [displayWith]=\"displayWith.bind(this)\">\r\n <mat-option *ngIf=\"isLoading\">Loading...</mat-option>\r\n <mat-option *ngIf=\"!isLoading && filteredOptions.length == 0 && !showSerach\" disabled>Not found</mat-option>\r\n <mat-option *ngIf=\"showSerach\" disabled>{{getSearchText()}}</mat-option>\r\n <ng-container *ngIf=\"!isLoading && filteredOptions.length > 0\">\r\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\r\n <span><b>{{getConcatedFields(option)}}</b></span>\r\n </mat-option>\r\n </ng-container>\r\n\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n</div>", components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i8.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.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatSuffix, selector: "[matSuffix]" }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$1.TranslatePipe } });
275
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SearchableDropdownComponent, decorators: [{
276
- type: Component,
277
- args: [{ selector: 'rsl-searchable-dropdown', host: {
278
- '[class.example-floating]': 'shouldLabelFloat',
279
- '[id]': 'id',
280
- '[attr.aria-describedby]': 'describedBy',
281
- }, template: "<div class=\"form-group\">\r\n <label>{{label | translate}}</label>\r\n <mat-form-field appearance=\"outline\" fxFlex>\r\n <input matInput [matAutocomplete]=\"auto\" [formControl]=\"searchControl\">\r\n <button *ngIf=\"searchControl.value\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearSelection()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelected($event)\"\r\n [displayWith]=\"displayWith.bind(this)\">\r\n <mat-option *ngIf=\"isLoading\">Loading...</mat-option>\r\n <mat-option *ngIf=\"!isLoading && filteredOptions.length == 0 && !showSerach\" disabled>Not found</mat-option>\r\n <mat-option *ngIf=\"showSerach\" disabled>{{getSearchText()}}</mat-option>\r\n <ng-container *ngIf=\"!isLoading && filteredOptions.length > 0\">\r\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\r\n <span><b>{{getConcatedFields(option)}}</b></span>\r\n </mat-option>\r\n </ng-container>\r\n\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n</div>" }]
282
- }], ctorParameters: function () {
283
- return [{ type: i1.FocusMonitor }, { type: i0.ElementRef }, { type: i2.NgControl, decorators: [{
284
- type: Optional
285
- }, {
286
- type: Self
287
- }] }];
288
- }, propDecorators: { label: [{
289
- type: Input
290
- }], fControlName: [{
291
- type: Input
292
- }], serviceRef: [{
293
- type: Input
294
- }], searchFields: [{
295
- type: Input
296
- }], displayFields: [{
297
- type: Input
298
- }], sortFields: [{
299
- type: Input
300
- }], valueField: [{
301
- type: Input
302
- }], minLengthTerm: [{
303
- type: Input
304
- }], preloadElementsCount: [{
305
- type: Input
306
- }], modelSelected: [{
307
- type: Output
308
- }], required: [{
309
- type: Input
310
- }], disabled: [{
311
- type: Input
312
- }], value: [{
313
- type: Input
314
- }] } });
315
-
316
94
  class UnderConstructionComponent {
317
95
  constructor() { }
318
96
  }
319
97
  UnderConstructionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: UnderConstructionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
320
- UnderConstructionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: UnderConstructionComponent, selector: "rsl-under-construction", ngImport: i0, template: "<div class=\"forms-view-container\">\n <div class=\"under-construction-view-container\">\n Page under construction\n </div>\n</div>", styles: [".under-construction-view-container{height:calc(100vh - 250px);margin:60px 0 0;padding:0;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:1.8em;line-height:1.3em;font-weight:300;color:#58585b;text-align:center}\n"] });
98
+ UnderConstructionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: UnderConstructionComponent, selector: "app-under-construction", ngImport: i0, template: "<div class=\"forms-view-container\">\n <div class=\"under-construction-view-container\">\n Page under construction\n </div>\n</div>", styles: [".under-construction-view-container{height:calc(100vh - 250px);margin:60px 0 0;padding:0;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:1.8em;line-height:1.3em;font-weight:300;color:#58585b;text-align:center}\n"] });
321
99
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: UnderConstructionComponent, decorators: [{
322
100
  type: Component,
323
- args: [{ selector: 'rsl-under-construction', template: "<div class=\"forms-view-container\">\n <div class=\"under-construction-view-container\">\n Page under construction\n </div>\n</div>", styles: [".under-construction-view-container{height:calc(100vh - 250px);margin:60px 0 0;padding:0;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:1.8em;line-height:1.3em;font-weight:300;color:#58585b;text-align:center}\n"] }]
101
+ args: [{ selector: 'app-under-construction', template: "<div class=\"forms-view-container\">\n <div class=\"under-construction-view-container\">\n Page under construction\n </div>\n</div>", styles: [".under-construction-view-container{height:calc(100vh - 250px);margin:60px 0 0;padding:0;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:1.8em;line-height:1.3em;font-weight:300;color:#58585b;text-align:center}\n"] }]
324
102
  }], ctorParameters: function () { return []; } });
325
103
 
326
104
  class BaseQueryData {
@@ -654,11 +432,11 @@ class BaseDatastore {
654
432
  return qs.stringify(params, { arrayFormat: 'brackets' });
655
433
  }
656
434
  }
657
- BaseDatastore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BaseDatastore, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
435
+ BaseDatastore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BaseDatastore, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
658
436
  BaseDatastore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BaseDatastore });
659
437
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BaseDatastore, decorators: [{
660
438
  type: Injectable
661
- }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; } });
439
+ }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
662
440
 
663
441
  class BaseService {
664
442
  constructor(datastore) {
@@ -733,11 +511,7 @@ class BaseService {
733
511
  return fromModel.getFromGroup(fb);
734
512
  }
735
513
  fromFormGroup(formGroup, id) {
736
- // const saveModel = this.newModel(formGroup.getRawValue());
737
- // saveModel.id = id ? id : null;
738
- // return saveModel;
739
- const saveModel = this.newModel();
740
- saveModel.getModelFromFormGroup(formGroup);
514
+ const saveModel = this.newModel(formGroup.getRawValue());
741
515
  saveModel.id = id ? id : null;
742
516
  return saveModel;
743
517
  }
@@ -959,18 +733,10 @@ class BaseFormEditComponent {
959
733
  }
960
734
  afterFormGenerated() {
961
735
  }
962
- getFromGroup(formGroup = null) {
963
- if (!formGroup)
964
- return this.baseForm;
965
- if (formGroup instanceof FormGroup)
966
- return formGroup;
967
- return this.baseForm.controls[formGroup];
968
- }
969
- validateAllFormFields(formGroup = null) {
970
- const fg = this.getFromGroup(formGroup);
971
- Object.keys(fg.controls).forEach(field => {
736
+ validateAllFormFields(formGroup) {
737
+ Object.keys(formGroup.controls).forEach(field => {
972
738
  // console.log(field);
973
- const control = fg.get(field);
739
+ const control = formGroup.get(field);
974
740
  if (control instanceof FormControl) {
975
741
  control.markAsTouched({ onlySelf: true });
976
742
  }
@@ -979,32 +745,22 @@ class BaseFormEditComponent {
979
745
  }
980
746
  });
981
747
  }
982
- isFieldValid(field, formGroup = null) {
983
- const fg = this.getFromGroup(formGroup);
984
- const filedControl = fg.get(field);
985
- return !filedControl.valid && filedControl.touched;
986
- }
987
- isFieldValidFromArray(arrayIndex, field, arrayName = 'formArray') {
988
- const fieldControl = this.baseForm.get(arrayName).get([arrayIndex]).get(field);
989
- return !fieldControl.valid && fieldControl.touched;
748
+ isFieldValid(form, field) {
749
+ return !form.get(field).valid && form.get(field).touched;
990
750
  }
991
- displayFieldCss(field) {
751
+ displayFieldCss(form, field) {
992
752
  return {
993
- 'has-error': this.isFieldValid(field),
994
- 'has-feedback': this.isFieldValid(field)
753
+ 'has-error': this.isFieldValid(form, field),
754
+ 'has-feedback': this.isFieldValid(form, field)
995
755
  };
996
756
  }
997
757
  onCancel() {
998
758
  this.router.navigate([this.cancelRoute]);
999
759
  }
1000
760
  onSave() {
1001
- this.saveModel(this.baseForm);
1002
- }
1003
- saveModel(formGroup = null) {
1004
- const fg = this.getFromGroup(formGroup);
1005
761
  const that = this;
1006
- if (fg) {
1007
- if (fg.valid) {
762
+ if (this.baseForm) {
763
+ if (this.baseForm.valid) {
1008
764
  that.blockUI.start('Saving ...');
1009
765
  this.beforeSave(this.model).subscribe(_ => {
1010
766
  this.modelService.save(this.baseForm, this.modelId, this.model).subscribe((newModel) => {
@@ -1020,7 +776,7 @@ class BaseFormEditComponent {
1020
776
  this.afterSave(newModel).subscribe((val) => {
1021
777
  this.blockUI.stop();
1022
778
  this.dialogService.showSaveMessage('Your changes were saved successfully.').subscribe(d => {
1023
- fg.markAsPristine();
779
+ this.baseForm.markAsPristine();
1024
780
  });
1025
781
  });
1026
782
  }, err => {
@@ -1030,7 +786,7 @@ class BaseFormEditComponent {
1030
786
  });
1031
787
  }
1032
788
  else {
1033
- this.validateAllFormFields(formGroup);
789
+ this.validateAllFormFields(this.baseForm);
1034
790
  }
1035
791
  }
1036
792
  }
@@ -1079,16 +835,8 @@ class BaseFormEditComponent {
1079
835
  getCustomErrorMessage(error, fieldLabel) {
1080
836
  return '';
1081
837
  }
1082
- getErrorMessageFromArray(arrayIndex, field, filedTranslationKey, arrayName = 'formArray') {
1083
- const fieldControl = this.baseForm.get(arrayName).get([arrayIndex]).get(field);
1084
- return this.getErrorMessageForField(fieldControl, filedTranslationKey);
1085
- }
1086
- getErrorMessage(field, filedTranslationKey, formGroup = null) {
1087
- const fg = this.getFromGroup(formGroup);
1088
- return this.getErrorMessageForField(fg.get(field), filedTranslationKey);
1089
- }
1090
- getErrorMessageForField(fieldControl, filedTranslationKey) {
1091
- const error = fieldControl.errors;
838
+ getErrorMessage(field, filedTranslationKey) {
839
+ const error = this.baseForm.get(field).errors;
1092
840
  const fieldLabel = this.translate.instant(filedTranslationKey);
1093
841
  let rvalue = '';
1094
842
  if (error !== null) {
@@ -1114,7 +862,7 @@ class BaseFormEditComponent {
1114
862
  return rvalue;
1115
863
  }
1116
864
  }
1117
- BaseFormEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BaseFormEditComponent, deps: [{ token: i2.FormBuilder }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }, { token: BaseService }, { token: DialogService }, { token: i1$1.TranslateService }, { token: i3$1.Location }], target: i0.ɵɵFactoryTarget.Component });
865
+ BaseFormEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BaseFormEditComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: BaseService }, { token: DialogService }, { token: i1$2.TranslateService }, { token: i3.Location }], target: i0.ɵɵFactoryTarget.Component });
1118
866
  BaseFormEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: BaseFormEditComponent, selector: "app-base.form.edit", ngImport: i0, template: '', isInline: true });
1119
867
  __decorate([
1120
868
  BlockUI()
@@ -1125,7 +873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
1125
873
  selector: 'app-base.form.edit',
1126
874
  template: ''
1127
875
  }]
1128
- }], ctorParameters: function () { return [{ type: i2.FormBuilder }, { type: i2$1.Router }, { type: i2$1.ActivatedRoute }, { type: BaseService }, { type: DialogService }, { type: i1$1.TranslateService }, { type: i3$1.Location }]; }, propDecorators: { blockUI: [] } });
876
+ }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: BaseService }, { type: DialogService }, { type: i1$2.TranslateService }, { type: i3.Location }]; }, propDecorators: { blockUI: [] } });
1129
877
 
1130
878
  var GridLayoutFormat;
1131
879
  (function (GridLayoutFormat) {
@@ -1133,7 +881,6 @@ var GridLayoutFormat;
1133
881
  GridLayoutFormat[GridLayoutFormat["date"] = 1] = "date";
1134
882
  GridLayoutFormat[GridLayoutFormat["number"] = 2] = "number";
1135
883
  GridLayoutFormat[GridLayoutFormat["percent"] = 3] = "percent";
1136
- GridLayoutFormat[GridLayoutFormat["picture"] = 4] = "picture";
1137
884
  })(GridLayoutFormat || (GridLayoutFormat = {}));
1138
885
  var CellTextAlign;
1139
886
  (function (CellTextAlign) {
@@ -1144,13 +891,12 @@ var CellTextAlign;
1144
891
 
1145
892
  class GenericTableComponent {
1146
893
  // ruleEngineService: RuleEngineService<T>;
1147
- constructor(dialogService, router, datePipe, numberPipe, percentPipe, renderer) {
894
+ constructor(dialogService, router, datePipe, numberPipe, percentPipe) {
1148
895
  this.dialogService = dialogService;
1149
896
  this.router = router;
1150
897
  this.datePipe = datePipe;
1151
898
  this.numberPipe = numberPipe;
1152
899
  this.percentPipe = percentPipe;
1153
- this.renderer = renderer;
1154
900
  this.defaultSort = null;
1155
901
  this.defaultSortDirection = null;
1156
902
  this.deletePropertyName = 'name';
@@ -1160,14 +906,12 @@ class GenericTableComponent {
1160
906
  this.allowEdit = true;
1161
907
  this.popupEdit = false;
1162
908
  this.customInclude = null;
1163
- this.infiniteScroll = false;
1164
909
  this.dataSource = new MatTableDataSource();
1165
910
  this.resultsLength = 0;
1166
911
  this.isLoadingResults = true;
1167
912
  this.isRateLimitReached = false;
1168
913
  this.filterChanged = new Subject();
1169
914
  this.selectedObject = new EventEmitter();
1170
- this.click = new EventEmitter();
1171
915
  this.editModel = new EventEmitter();
1172
916
  }
1173
917
  ngOnChanges() {
@@ -1234,20 +978,8 @@ class GenericTableComponent {
1234
978
  this.isRateLimitReached = true;
1235
979
  return of([]);
1236
980
  })).subscribe(data => {
1237
- // if (this.infiniteScroll) {
1238
- // let oldData = this.dataSource.data ?? null;
1239
- // // if (oldData.length === 0) {
1240
- // // oldData = data;
1241
- // // } else {
1242
- // oldData=oldData.concat(data);
1243
- // // }
1244
- // this.dataSource.data = oldData;
1245
- // }
1246
- // else {
1247
981
  this.dataSource.data = data;
1248
- // }
1249
982
  });
1250
- // this.paginator.nextPage()
1251
983
  }
1252
984
  getData() {
1253
985
  this.isLoadingResults = true;
@@ -1346,10 +1078,6 @@ class GenericTableComponent {
1346
1078
  var _a;
1347
1079
  return (_a = column.textAlign) !== null && _a !== void 0 ? _a : CellTextAlign.left;
1348
1080
  }
1349
- showPictureCell(column) {
1350
- var _a;
1351
- return ((_a = column === null || column === void 0 ? void 0 : column.formating) !== null && _a !== void 0 ? _a : GridLayoutFormat.none) === GridLayoutFormat.picture;
1352
- }
1353
1081
  deleteDisabled(model) {
1354
1082
  if (this.deleteDisableRule) {
1355
1083
  return this.evaluateRule(this.deleteDisableRule, model);
@@ -1358,9 +1086,6 @@ class GenericTableComponent {
1358
1086
  return false;
1359
1087
  }
1360
1088
  }
1361
- cellClick(model, propertyName) {
1362
- this.click.emit({ propertyName, model });
1363
- }
1364
1089
  evaluateRule(rules, model) {
1365
1090
  let result = true;
1366
1091
  rules.forEach(rule => {
@@ -1419,14 +1144,12 @@ class GenericTableComponent {
1419
1144
  applyFilter(event) {
1420
1145
  }
1421
1146
  dropTable(event) {
1422
- if (this.changeItemPosition) {
1423
- const prevItem = this.dataSource.data[event.previousIndex];
1424
- const currentItem = this.dataSource.data[event.currentIndex];
1425
- if (this.changeItemPosition(prevItem, currentItem)) {
1426
- const prevIndex = this.dataSource.data.findIndex((d) => d === event.item.data);
1427
- moveItemInArray(this.dataSource.data, prevIndex, event.currentIndex);
1428
- this.table.renderRows();
1429
- }
1147
+ const prevItem = this.dataSource.data[event.previousIndex];
1148
+ const currentItem = this.dataSource.data[event.currentIndex];
1149
+ if (this.changeItemPosition(prevItem, currentItem)) {
1150
+ const prevIndex = this.dataSource.data.findIndex((d) => d === event.item.data);
1151
+ moveItemInArray(this.dataSource.data, prevIndex, event.currentIndex);
1152
+ this.table.renderRows();
1430
1153
  }
1431
1154
  }
1432
1155
  isColumnSticky(name) {
@@ -1450,45 +1173,13 @@ class GenericTableComponent {
1450
1173
  this.dataSource.data = newData;
1451
1174
  this.dataSource._updateChangeSubscription();
1452
1175
  }
1453
- ngAfterViewInit() {
1454
- fromEvent(this.matTableRef.nativeElement, 'scroll')
1455
- .pipe(debounceTime(700))
1456
- .subscribe((e) => this.onTableScroll(e));
1457
- }
1458
- onTableScroll(e) {
1459
- const tableViewHeight = e.target.offsetHeight; // viewport: ~500px
1460
- const tableScrollHeight = e.target.scrollHeight; // length of all table
1461
- const scrollLocation = e.target.scrollTop; // how far user scrolled
1462
- // If the user has scrolled within 200px of the bottom, add more data
1463
- const scrollThreshold = 200;
1464
- const scrollUpLimit = scrollThreshold;
1465
- if (scrollLocation < scrollUpLimit && this.paginator.pageIndex > 0) {
1466
- // this.firstPage--;
1467
- console.log(`onTableScroll() UP: firstPage decreased to ${this.paginator.pageIndex}. Now fetching data...`);
1468
- // this.fetchData();
1469
- this.scrollTo(tableScrollHeight / 2 - 2 * tableViewHeight);
1470
- }
1471
- const scrollDownLimit = tableScrollHeight - tableViewHeight - scrollThreshold;
1472
- if (scrollLocation > scrollDownLimit && this.paginator.pageIndex < this.paginator.getNumberOfPages()) {
1473
- // this.firstPage++;
1474
- console.log(`onTableScroll(): firstPage increased to ${this.paginator.pageIndex}. Now fetching data...`);
1475
- this.paginator.nextPage();
1476
- // this.scrollTo(tableScrollHeight / 2 + tableViewHeight);
1477
- }
1478
- }
1479
- scrollTo(position) {
1480
- this.renderer.setProperty(this.matTableRef.nativeElement, 'scrollTop', position);
1481
- }
1482
- getCellClass(model, property) {
1483
- return model.getCellClass(property);
1484
- }
1485
1176
  }
1486
- GenericTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: GenericTableComponent, deps: [{ token: DialogService }, { token: i2$1.Router }, { token: i3$1.DatePipe }, { token: i3$1.DecimalPipe }, { token: i3$1.PercentPipe }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
1487
- GenericTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: GenericTableComponent, selector: "rsl-generic-table", inputs: { modelType: "modelType", baseService: "baseService", gridLayoutService: "gridLayoutService", editLink: "editLink", defaultSort: "defaultSort", defaultSortDirection: "defaultSortDirection", deleteDisableRule: "deleteDisableRule", deletePropertyName: "deletePropertyName", hasSearch: "hasSearch", searchFields: "searchFields", defaultFilter: "defaultFilter", allowReorderItems: "allowReorderItems", stickyColumns: "stickyColumns", editOnClick: "editOnClick", editOnDblClick: "editOnDblClick", allowEdit: "allowEdit", popupEdit: "popupEdit", customInclude: "customInclude", changeItemPosition: "changeItemPosition", infiniteScroll: "infiniteScroll" }, outputs: { selectedObject: "selectedObject", click: "click", editModel: "editModel" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ElementRef, descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matTableRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"containerX\" *ngIf=\"hasSearch\">\r\n <div fxLayout=\"row\" fxLayout.xs=\"column\" fxLayout.sm=\"column\" fxFlexFill>\r\n <mat-form-field fxFlex>\r\n <mat-label>Filter</mat-label>\r\n <input matInput [ngModel]='filterValue' (ngModelChange)='filterChanged.next($event)' #filter>\r\n </mat-form-field>\r\n </div>\r\n</div>\r\n\r\n<div class=\"table-container\">\r\n <div class=\"mat-elevation-z2\">\r\n <!-- #applicationsContainer -->\r\n <div class=\"example-loading-shade\" *ngIf=\"isLoadingResults || isRateLimitReached\">\r\n <mat-spinner *ngIf=\"isLoadingResults\"></mat-spinner>\r\n <div class=\"example-rate-limit-reached\" *ngIf=\"isRateLimitReached\">\r\n {{'General.LoadingData' | translate}}\r\n </div>\r\n </div>\r\n\r\n\r\n <mat-table fxFlex #table [dataSource]=\"dataSource\" id=\"tempalte-forms-table\" matSort matSortDisableClear\r\n matSortDirection=\"asc\" cdkDropList [cdkDropListData]=\"dataSource\" (cdkDropListDropped)=\"dropTable($event)\">\r\n <!-- (scroll)=\"onTableScroll($event)\" -->\r\n\r\n\r\n <ng-container matColumnDef=\"position\">\r\n <mat-header-cell *matHeaderCellDef disableClear=\"true\">\r\n <!-- {{'General.Order' | translate}} -->\r\n </mat-header-cell>\r\n <mat-cell fxFlex *matCellDef=\"let element;\">\r\n <mat-icon cdkDragHandle>reorder</mat-icon>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngFor=\"let column of gridLayout\" [matColumnDef]=\"column.propertyName\"\r\n [sticky]=\"isColumnSticky(column.propertyName)\">\r\n <mat-header-cell mat-sort-header disableClear [style.flex]=\"getFlexStyle(column)\" *matHeaderCellDef>\r\n {{column.translateKey | translate}}\r\n </mat-header-cell>\r\n <mat-cell matTooltip={{getCelValue(row,column.propertyName)}} [style.flex]=\"getFlexStyle(column)\"\r\n [style.text-align]=\"getCellTextAlign(column)\" *matCellDef=\"let row\" (click)=\"cellClick(row,column.propertyName)\">\r\n <div [ngClass]=\"getCellClass(row,column.propertyName)\" *ngIf=\"!showPictureCell(column)\">\r\n {{getCelValue(row,column.propertyName)}}\r\n </div>\r\n <img [ngClass]=\"getCellClass(row,column.propertyName)\" *ngIf=\"showPictureCell(column)\">\r\n </mat-cell>\r\n </ng-container>\r\n\r\n\r\n <ng-container matColumnDef=\"delete\" stickyEnd *ngIf=\"!editOnClick && !editOnDblClick\">\r\n <mat-header-cell *matHeaderCellDef disableClear=\"true\">\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let row\">\r\n <button class=\"btn btn-green btn-fill btn-wd btn-just-icon\" (click)=\"editObject(row)\"\r\n matTooltip=\"{{'General.Edit' | translate}}\">\r\n <!-- <mat-icon>edit</mat-icon> -->\r\n <i class=\"material-icons\">edit</i>\r\n <div class=\"ripple-container\"></div>\r\n </button>\r\n <button class=\"btn btn-red btn-fill btn-wd btn-just-icon\" (click)=\"deleteObject(row)\"\r\n [disabled]=\"deleteDisabled(row)\" matTooltip=\"{{'General.Delete' | translate}}\">\r\n <i class=\"material-icons\">delete</i>\r\n <div class=\"ripple-container\"></div>\r\n </button>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n <mat-header-row *matHeaderRowDef=\"displayedColumns;sticky: true\"></mat-header-row>\r\n\r\n <ng-container *ngIf=\"!editOnClick && !editOnDblClick\">\r\n <mat-row *matRowDef=\"let row;let index = dataIndex; columns: displayedColumns;\" cdkDrag [cdkDragData]=\"row\"\r\n [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\" (click)=\"highlight(row)\"\r\n (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\">\r\n </mat-row>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editOnClick && !editOnDblClick\">\r\n <mat-row *matRowDef=\"let row;let index = dataIndex; columns: displayedColumns;\" cdkDrag [cdkDragData]=\"row\"\r\n [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\" (click)=\"editObject(row)\"\r\n (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\" style=\"cursor: pointer;\"></mat-row>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!editOnClick && editOnDblClick\">\r\n <mat-row *matRowDef=\"let row;let index = dataIndex; columns: displayedColumns;\" cdkDrag [cdkDragData]=\"row\"\r\n [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\" (dblclick)=\"editObject(row)\"\r\n (click)=\"highlight(row)\" (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\"\r\n style=\"cursor: pointer;\"></mat-row>\r\n </ng-container>\r\n\r\n <!-- [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\"\r\n (click)=\"highlight(row)\" (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\" -->\r\n </mat-table>\r\n <mat-paginator #paginator [hidden]=\"infiniteScroll\" [length]=\"resultsLength\" [pageSize]=\"15\"\r\n [pageSizeOptions]=\"[15, 30, 100]\" [showFirstLastButtons]=\"true\">\r\n </mat-paginator>\r\n </div>\r\n</div>", styles: [".mat-column-delete{flex:0 0 90px;padding-right:30px}.mat-sort-header-button{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-column-position{flex:0 0 60px!important}.mat-table{overflow-x:auto}[hidden]{display:none!important}\n"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i9.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatLabel, selector: "mat-label" }, { type: i8.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: 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: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i12.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: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i6$1.MatCellDef, selector: "[matCellDef]" }, { type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i12.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i12.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], pipes: { "translate": i1$1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
1177
+ GenericTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: GenericTableComponent, deps: [{ token: DialogService }, { token: i2.Router }, { token: i3.DatePipe }, { token: i3.DecimalPipe }, { token: i3.PercentPipe }], target: i0.ɵɵFactoryTarget.Component });
1178
+ GenericTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: GenericTableComponent, selector: "app-generic-table", inputs: { modelType: "modelType", baseService: "baseService", gridLayoutService: "gridLayoutService", editLink: "editLink", defaultSort: "defaultSort", defaultSortDirection: "defaultSortDirection", deleteDisableRule: "deleteDisableRule", deletePropertyName: "deletePropertyName", hasSearch: "hasSearch", searchFields: "searchFields", defaultFilter: "defaultFilter", allowReorderItems: "allowReorderItems", stickyColumns: "stickyColumns", editOnClick: "editOnClick", editOnDblClick: "editOnDblClick", allowEdit: "allowEdit", popupEdit: "popupEdit", customInclude: "customInclude", changeItemPosition: "changeItemPosition" }, outputs: { selectedObject: "selectedObject", editModel: "editModel" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ElementRef, descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"containerX\" *ngIf=\"hasSearch\">\r\n <div fxLayout=\"row\" fxLayout.xs=\"column\" fxLayout.sm=\"column\" fxFlexFill>\r\n <mat-form-field fxFlex>\r\n <mat-label>Filter</mat-label>\r\n <input matInput [ngModel]='filterValue' (ngModelChange)='filterChanged.next($event)' #filter>\r\n </mat-form-field>\r\n </div>\r\n</div>\r\n\r\n<div class=\"table-container\">\r\n <div class=\"mat-elevation-z2\">\r\n <!-- #applicationsContainer -->\r\n <div class=\"example-loading-shade\" *ngIf=\"isLoadingResults || isRateLimitReached\">\r\n <mat-spinner *ngIf=\"isLoadingResults\"></mat-spinner>\r\n <div class=\"example-rate-limit-reached\" *ngIf=\"isRateLimitReached\">\r\n {{'General.LoadingData' | translate}}\r\n </div>\r\n </div>\r\n\r\n\r\n <mat-table fxFlex #table [dataSource]=\"dataSource\" id=\"tempalte-forms-table\" matSort matSortDisableClear\r\n matSortDirection=\"asc\" cdkDropList [cdkDropListData]=\"dataSource\" (cdkDropListDropped)=\"dropTable($event)\">\r\n\r\n\r\n <ng-container matColumnDef=\"position\">\r\n <mat-header-cell *matHeaderCellDef disableClear=\"true\">\r\n <!-- {{'General.Order' | translate}} -->\r\n </mat-header-cell>\r\n <mat-cell fxFlex *matCellDef=\"let element;\">\r\n <mat-icon cdkDragHandle>reorder</mat-icon>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngFor=\"let column of gridLayout\" [matColumnDef]=\"column.propertyName\"\r\n [sticky]=\"isColumnSticky(column.propertyName)\">\r\n <mat-header-cell mat-sort-header disableClear [style.flex]=\"getFlexStyle(column)\" *matHeaderCellDef>\r\n {{column.translateKey | translate}}\r\n </mat-header-cell>\r\n <mat-cell matTooltip={{getCelValue(row,column.propertyName)}} [style.flex]=\"getFlexStyle(column)\"\r\n [style.text-align]=\"getCellTextAlign(column)\" *matCellDef=\"let row\">{{getCelValue(row,column.propertyName)}}\r\n </mat-cell>\r\n </ng-container>\r\n\r\n\r\n <ng-container matColumnDef=\"delete\" stickyEnd *ngIf=\"!editOnClick && !editOnDblClick\">\r\n <mat-header-cell *matHeaderCellDef disableClear=\"true\">\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let row\">\r\n <button class=\"btn btn-green btn-fill btn-wd btn-just-icon\" (click)=\"editObject(row)\"\r\n matTooltip=\"{{'General.Edit' | translate}}\">\r\n <!-- <mat-icon>edit</mat-icon> -->\r\n <i class=\"material-icons\">edit</i>\r\n <div class=\"ripple-container\"></div>\r\n </button>\r\n <button class=\"btn btn-red btn-fill btn-wd btn-just-icon\" (click)=\"deleteObject(row)\"\r\n [disabled]=\"deleteDisabled(row)\" matTooltip=\"{{'General.Delete' | translate}}\">\r\n <i class=\"material-icons\">delete</i>\r\n <div class=\"ripple-container\"></div>\r\n </button>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n <mat-header-row *matHeaderRowDef=\"displayedColumns;sticky: true\"></mat-header-row>\r\n\r\n <ng-container *ngIf=\"!editOnClick && !editOnDblClick\">\r\n <mat-row *matRowDef=\"let row;let index = dataIndex; columns: displayedColumns;\" cdkDrag [cdkDragData]=\"row\"\r\n [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\" (click)=\"highlight(row)\"\r\n (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\">\r\n </mat-row>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editOnClick && !editOnDblClick\">\r\n <mat-row *matRowDef=\"let row;let index = dataIndex; columns: displayedColumns;\" cdkDrag [cdkDragData]=\"row\"\r\n [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\" (click)=\"editObject(row)\"\r\n (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\" style=\"cursor: pointer;\"></mat-row>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!editOnClick && editOnDblClick\">\r\n <mat-row *matRowDef=\"let row;let index = dataIndex; columns: displayedColumns;\" cdkDrag [cdkDragData]=\"row\"\r\n [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\" (dblclick)=\"editObject(row)\"\r\n (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\" style=\"cursor: pointer;\"></mat-row>\r\n </ng-container>\r\n\r\n <!-- [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\"\r\n (click)=\"highlight(row)\" (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\" -->\r\n </mat-table>\r\n <mat-paginator #paginator [length]=\"resultsLength\" [pageSize]=\"15\" [pageSizeOptions]=\"[15, 30, 100]\"\r\n [showFirstLastButtons]=\"true\">\r\n </mat-paginator>\r\n </div>\r\n</div>", styles: [".mat-column-delete{flex:0 0 90px;padding-right:30px}.mat-sort-header-button{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-column-position{flex:0 0 60px!important}.mat-table{overflow-x:scroll}\n"], components: [{ type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i9.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatLabel, selector: "mat-label" }, { type: i10.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: i8.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i11.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: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i6.MatCellDef, selector: "[matCellDef]" }, { type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i11.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1$2.TranslatePipe } });
1488
1179
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: GenericTableComponent, decorators: [{
1489
1180
  type: Component,
1490
- args: [{ selector: 'rsl-generic-table', encapsulation: ViewEncapsulation.None, template: "<div class=\"containerX\" *ngIf=\"hasSearch\">\r\n <div fxLayout=\"row\" fxLayout.xs=\"column\" fxLayout.sm=\"column\" fxFlexFill>\r\n <mat-form-field fxFlex>\r\n <mat-label>Filter</mat-label>\r\n <input matInput [ngModel]='filterValue' (ngModelChange)='filterChanged.next($event)' #filter>\r\n </mat-form-field>\r\n </div>\r\n</div>\r\n\r\n<div class=\"table-container\">\r\n <div class=\"mat-elevation-z2\">\r\n <!-- #applicationsContainer -->\r\n <div class=\"example-loading-shade\" *ngIf=\"isLoadingResults || isRateLimitReached\">\r\n <mat-spinner *ngIf=\"isLoadingResults\"></mat-spinner>\r\n <div class=\"example-rate-limit-reached\" *ngIf=\"isRateLimitReached\">\r\n {{'General.LoadingData' | translate}}\r\n </div>\r\n </div>\r\n\r\n\r\n <mat-table fxFlex #table [dataSource]=\"dataSource\" id=\"tempalte-forms-table\" matSort matSortDisableClear\r\n matSortDirection=\"asc\" cdkDropList [cdkDropListData]=\"dataSource\" (cdkDropListDropped)=\"dropTable($event)\">\r\n <!-- (scroll)=\"onTableScroll($event)\" -->\r\n\r\n\r\n <ng-container matColumnDef=\"position\">\r\n <mat-header-cell *matHeaderCellDef disableClear=\"true\">\r\n <!-- {{'General.Order' | translate}} -->\r\n </mat-header-cell>\r\n <mat-cell fxFlex *matCellDef=\"let element;\">\r\n <mat-icon cdkDragHandle>reorder</mat-icon>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngFor=\"let column of gridLayout\" [matColumnDef]=\"column.propertyName\"\r\n [sticky]=\"isColumnSticky(column.propertyName)\">\r\n <mat-header-cell mat-sort-header disableClear [style.flex]=\"getFlexStyle(column)\" *matHeaderCellDef>\r\n {{column.translateKey | translate}}\r\n </mat-header-cell>\r\n <mat-cell matTooltip={{getCelValue(row,column.propertyName)}} [style.flex]=\"getFlexStyle(column)\"\r\n [style.text-align]=\"getCellTextAlign(column)\" *matCellDef=\"let row\" (click)=\"cellClick(row,column.propertyName)\">\r\n <div [ngClass]=\"getCellClass(row,column.propertyName)\" *ngIf=\"!showPictureCell(column)\">\r\n {{getCelValue(row,column.propertyName)}}\r\n </div>\r\n <img [ngClass]=\"getCellClass(row,column.propertyName)\" *ngIf=\"showPictureCell(column)\">\r\n </mat-cell>\r\n </ng-container>\r\n\r\n\r\n <ng-container matColumnDef=\"delete\" stickyEnd *ngIf=\"!editOnClick && !editOnDblClick\">\r\n <mat-header-cell *matHeaderCellDef disableClear=\"true\">\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let row\">\r\n <button class=\"btn btn-green btn-fill btn-wd btn-just-icon\" (click)=\"editObject(row)\"\r\n matTooltip=\"{{'General.Edit' | translate}}\">\r\n <!-- <mat-icon>edit</mat-icon> -->\r\n <i class=\"material-icons\">edit</i>\r\n <div class=\"ripple-container\"></div>\r\n </button>\r\n <button class=\"btn btn-red btn-fill btn-wd btn-just-icon\" (click)=\"deleteObject(row)\"\r\n [disabled]=\"deleteDisabled(row)\" matTooltip=\"{{'General.Delete' | translate}}\">\r\n <i class=\"material-icons\">delete</i>\r\n <div class=\"ripple-container\"></div>\r\n </button>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n <mat-header-row *matHeaderRowDef=\"displayedColumns;sticky: true\"></mat-header-row>\r\n\r\n <ng-container *ngIf=\"!editOnClick && !editOnDblClick\">\r\n <mat-row *matRowDef=\"let row;let index = dataIndex; columns: displayedColumns;\" cdkDrag [cdkDragData]=\"row\"\r\n [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\" (click)=\"highlight(row)\"\r\n (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\">\r\n </mat-row>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editOnClick && !editOnDblClick\">\r\n <mat-row *matRowDef=\"let row;let index = dataIndex; columns: displayedColumns;\" cdkDrag [cdkDragData]=\"row\"\r\n [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\" (click)=\"editObject(row)\"\r\n (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\" style=\"cursor: pointer;\"></mat-row>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!editOnClick && editOnDblClick\">\r\n <mat-row *matRowDef=\"let row;let index = dataIndex; columns: displayedColumns;\" cdkDrag [cdkDragData]=\"row\"\r\n [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\" (dblclick)=\"editObject(row)\"\r\n (click)=\"highlight(row)\" (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\"\r\n style=\"cursor: pointer;\"></mat-row>\r\n </ng-container>\r\n\r\n <!-- [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\"\r\n (click)=\"highlight(row)\" (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\" -->\r\n </mat-table>\r\n <mat-paginator #paginator [hidden]=\"infiniteScroll\" [length]=\"resultsLength\" [pageSize]=\"15\"\r\n [pageSizeOptions]=\"[15, 30, 100]\" [showFirstLastButtons]=\"true\">\r\n </mat-paginator>\r\n </div>\r\n</div>", styles: [".mat-column-delete{flex:0 0 90px;padding-right:30px}.mat-sort-header-button{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-column-position{flex:0 0 60px!important}.mat-table{overflow-x:auto}[hidden]{display:none!important}\n"] }]
1491
- }], ctorParameters: function () { return [{ type: DialogService }, { type: i2$1.Router }, { type: i3$1.DatePipe }, { type: i3$1.DecimalPipe }, { type: i3$1.PercentPipe }, { type: i0.Renderer2 }]; }, propDecorators: { modelType: [{
1181
+ args: [{ selector: 'app-generic-table', template: "<div class=\"containerX\" *ngIf=\"hasSearch\">\r\n <div fxLayout=\"row\" fxLayout.xs=\"column\" fxLayout.sm=\"column\" fxFlexFill>\r\n <mat-form-field fxFlex>\r\n <mat-label>Filter</mat-label>\r\n <input matInput [ngModel]='filterValue' (ngModelChange)='filterChanged.next($event)' #filter>\r\n </mat-form-field>\r\n </div>\r\n</div>\r\n\r\n<div class=\"table-container\">\r\n <div class=\"mat-elevation-z2\">\r\n <!-- #applicationsContainer -->\r\n <div class=\"example-loading-shade\" *ngIf=\"isLoadingResults || isRateLimitReached\">\r\n <mat-spinner *ngIf=\"isLoadingResults\"></mat-spinner>\r\n <div class=\"example-rate-limit-reached\" *ngIf=\"isRateLimitReached\">\r\n {{'General.LoadingData' | translate}}\r\n </div>\r\n </div>\r\n\r\n\r\n <mat-table fxFlex #table [dataSource]=\"dataSource\" id=\"tempalte-forms-table\" matSort matSortDisableClear\r\n matSortDirection=\"asc\" cdkDropList [cdkDropListData]=\"dataSource\" (cdkDropListDropped)=\"dropTable($event)\">\r\n\r\n\r\n <ng-container matColumnDef=\"position\">\r\n <mat-header-cell *matHeaderCellDef disableClear=\"true\">\r\n <!-- {{'General.Order' | translate}} -->\r\n </mat-header-cell>\r\n <mat-cell fxFlex *matCellDef=\"let element;\">\r\n <mat-icon cdkDragHandle>reorder</mat-icon>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngFor=\"let column of gridLayout\" [matColumnDef]=\"column.propertyName\"\r\n [sticky]=\"isColumnSticky(column.propertyName)\">\r\n <mat-header-cell mat-sort-header disableClear [style.flex]=\"getFlexStyle(column)\" *matHeaderCellDef>\r\n {{column.translateKey | translate}}\r\n </mat-header-cell>\r\n <mat-cell matTooltip={{getCelValue(row,column.propertyName)}} [style.flex]=\"getFlexStyle(column)\"\r\n [style.text-align]=\"getCellTextAlign(column)\" *matCellDef=\"let row\">{{getCelValue(row,column.propertyName)}}\r\n </mat-cell>\r\n </ng-container>\r\n\r\n\r\n <ng-container matColumnDef=\"delete\" stickyEnd *ngIf=\"!editOnClick && !editOnDblClick\">\r\n <mat-header-cell *matHeaderCellDef disableClear=\"true\">\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let row\">\r\n <button class=\"btn btn-green btn-fill btn-wd btn-just-icon\" (click)=\"editObject(row)\"\r\n matTooltip=\"{{'General.Edit' | translate}}\">\r\n <!-- <mat-icon>edit</mat-icon> -->\r\n <i class=\"material-icons\">edit</i>\r\n <div class=\"ripple-container\"></div>\r\n </button>\r\n <button class=\"btn btn-red btn-fill btn-wd btn-just-icon\" (click)=\"deleteObject(row)\"\r\n [disabled]=\"deleteDisabled(row)\" matTooltip=\"{{'General.Delete' | translate}}\">\r\n <i class=\"material-icons\">delete</i>\r\n <div class=\"ripple-container\"></div>\r\n </button>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n <mat-header-row *matHeaderRowDef=\"displayedColumns;sticky: true\"></mat-header-row>\r\n\r\n <ng-container *ngIf=\"!editOnClick && !editOnDblClick\">\r\n <mat-row *matRowDef=\"let row;let index = dataIndex; columns: displayedColumns;\" cdkDrag [cdkDragData]=\"row\"\r\n [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\" (click)=\"highlight(row)\"\r\n (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\">\r\n </mat-row>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"editOnClick && !editOnDblClick\">\r\n <mat-row *matRowDef=\"let row;let index = dataIndex; columns: displayedColumns;\" cdkDrag [cdkDragData]=\"row\"\r\n [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\" (click)=\"editObject(row)\"\r\n (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\" style=\"cursor: pointer;\"></mat-row>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!editOnClick && editOnDblClick\">\r\n <mat-row *matRowDef=\"let row;let index = dataIndex; columns: displayedColumns;\" cdkDrag [cdkDragData]=\"row\"\r\n [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\" (dblclick)=\"editObject(row)\"\r\n (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\" style=\"cursor: pointer;\"></mat-row>\r\n </ng-container>\r\n\r\n <!-- [ngClass]=\"{hovered: row.hovered, highlighted: row.highlighted}\"\r\n (click)=\"highlight(row)\" (mouseover)=\"row.hovered = true\" (mouseout)=\"row.hovered = false\" -->\r\n </mat-table>\r\n <mat-paginator #paginator [length]=\"resultsLength\" [pageSize]=\"15\" [pageSizeOptions]=\"[15, 30, 100]\"\r\n [showFirstLastButtons]=\"true\">\r\n </mat-paginator>\r\n </div>\r\n</div>", styles: [".mat-column-delete{flex:0 0 90px;padding-right:30px}.mat-sort-header-button{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-column-position{flex:0 0 60px!important}.mat-table{overflow-x:scroll}\n"] }]
1182
+ }], ctorParameters: function () { return [{ type: DialogService }, { type: i2.Router }, { type: i3.DatePipe }, { type: i3.DecimalPipe }, { type: i3.PercentPipe }]; }, propDecorators: { modelType: [{
1492
1183
  type: Input
1493
1184
  }], baseService: [{
1494
1185
  type: Input
@@ -1526,8 +1217,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
1526
1217
  type: Input
1527
1218
  }], changeItemPosition: [{
1528
1219
  type: Input
1529
- }], infiniteScroll: [{
1530
- type: Input
1531
1220
  }], paginator: [{
1532
1221
  type: ViewChild,
1533
1222
  args: [MatPaginator, { static: true }]
@@ -1540,13 +1229,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
1540
1229
  }], table: [{
1541
1230
  type: ViewChild,
1542
1231
  args: ['table']
1543
- }], matTableRef: [{
1544
- type: ViewChild,
1545
- args: ['table', { read: ElementRef }]
1546
1232
  }], selectedObject: [{
1547
1233
  type: Output
1548
- }], click: [{
1549
- type: Output
1550
1234
  }], editModel: [{
1551
1235
  type: Output
1552
1236
  }] } });
@@ -1607,9 +1291,6 @@ function Attribute(options = {}) {
1607
1291
  const defaultMetadata = Reflect.getMetadata('AttributedefaultValue', target) || {};
1608
1292
  defaultMetadata[serializedPropertyName] = options.defaultValue !== undefined ? options.defaultValue : null;
1609
1293
  Reflect.defineMetadata('AttributedefaultValue', defaultMetadata, target);
1610
- const formSubGroupMetadata = Reflect.getMetadata('AttributeformSubGroup', target) || {};
1611
- formSubGroupMetadata[serializedPropertyName] = options.formSubGroup !== undefined ? options.formSubGroup : null;
1612
- Reflect.defineMetadata('AttributeformSubGroup', formSubGroupMetadata, target);
1613
1294
  };
1614
1295
  const setMetadata = (hasDirtyAttributes, instance, oldValue, newValue, isNew) => {
1615
1296
  const targetType = Reflect.getMetadata('design:type', target, propertyName);
@@ -1797,14 +1478,14 @@ class TranslatedContentDirective {
1797
1478
  this.subs.forEach(sub => sub.unsubscribe());
1798
1479
  }
1799
1480
  }
1800
- TranslatedContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: TranslatedContentDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
1481
+ TranslatedContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: TranslatedContentDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i1$2.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
1801
1482
  TranslatedContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: TranslatedContentDirective, selector: "[appTranslatedContent]", inputs: { translationKey: ["appTranslatedContent", "translationKey"] }, queries: [{ propertyName: "elements", predicate: TranslatedElementDirective }], ngImport: i0 });
1802
1483
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: TranslatedContentDirective, decorators: [{
1803
1484
  type: Directive,
1804
1485
  args: [{
1805
1486
  selector: '[appTranslatedContent]',
1806
1487
  }]
1807
- }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { translationKey: [{
1488
+ }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i1$2.TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { translationKey: [{
1808
1489
  type: Input,
1809
1490
  args: ['appTranslatedContent']
1810
1491
  }], elements: [{
@@ -1917,67 +1598,25 @@ class BaseModel {
1917
1598
  getModelDefaultPropertyValues(model) {
1918
1599
  return Reflect.getMetadata('AttributedefaultValue', model);
1919
1600
  }
1920
- getModelSubGroupPropertyNames(model) {
1921
- return Reflect.getMetadata('AttributeformSubGroup', model);
1922
- }
1923
1601
  getFromGroup(fb) {
1924
1602
  const props = Object.keys(this.getModelPropertyNames(this));
1925
1603
  const requiredProps = this.getModelRequiredPropertyNames(this);
1926
1604
  const defaultValues = this.getModelDefaultPropertyValues(this);
1927
- const formSubGroupsValues = this.getModelSubGroupPropertyNames(this);
1928
1605
  const controlsConfig = {};
1929
1606
  const that = this;
1930
1607
  if (props) {
1931
1608
  props.forEach(property => {
1932
- var _a;
1933
1609
  const value = that[property] !== undefined ? that[property] : defaultValues[property];
1934
- const formSubGroup = (_a = formSubGroupsValues[property]) !== null && _a !== void 0 ? _a : null;
1935
1610
  if (requiredProps[property]) {
1936
- if (formSubGroup)
1937
- this.getSubFromGroup(fb, controlsConfig, formSubGroup).addControl(property, fb.control(value, Validators.required));
1938
- else
1939
- controlsConfig[property] = [value, Validators.required];
1611
+ controlsConfig[property] = [value, Validators.required];
1940
1612
  }
1941
1613
  else {
1942
- if (formSubGroup)
1943
- this.getSubFromGroup(fb, controlsConfig, formSubGroup).addControl(property, fb.control(value));
1944
- else
1945
- controlsConfig[property] = value;
1614
+ controlsConfig[property] = value;
1946
1615
  }
1947
1616
  });
1948
1617
  }
1949
1618
  return fb.group(controlsConfig);
1950
1619
  }
1951
- getSubFromGroup(fb, controlsConfig, subGroup) {
1952
- if (!controlsConfig[subGroup])
1953
- controlsConfig[subGroup] = fb.group({});
1954
- return controlsConfig[subGroup];
1955
- }
1956
- getModelFromFormGroup(formGroup, id) {
1957
- const props = Object.keys(this.getModelPropertyNames(this));
1958
- const formSubGroupsValues = this.getModelSubGroupPropertyNames(this);
1959
- const data = {};
1960
- if (id) {
1961
- data.id = id;
1962
- }
1963
- const that = this;
1964
- if (props) {
1965
- props.forEach(property => {
1966
- var _a, _b, _c;
1967
- const formSubGroup = (_a = formSubGroupsValues[property]) !== null && _a !== void 0 ? _a : null;
1968
- if (!formSubGroup)
1969
- data[property] = (_b = formGroup.controls[property].value) !== null && _b !== void 0 ? _b : null;
1970
- else
1971
- data[property] = (_c = formGroup.controls[formSubGroup].controls[property].value) !== null && _c !== void 0 ? _c : null;
1972
- });
1973
- }
1974
- if (data) {
1975
- if (id) {
1976
- this.id = id;
1977
- }
1978
- Object.assign(this, data);
1979
- }
1980
- }
1981
1620
  getGridLayout() {
1982
1621
  const result = Array();
1983
1622
  const gridLayout = Reflect.getMetadata('GridLayout', this);
@@ -1994,9 +1633,6 @@ class BaseModel {
1994
1633
  const attributesMetadata = this[AttributeMetadata];
1995
1634
  return this._datastore.modelToEntity(this, attributesMetadata, true);
1996
1635
  }
1997
- getCellClass(property) {
1998
- return '';
1999
- }
2000
1636
  }
2001
1637
 
2002
1638
  class ErrorResponse {
@@ -2097,32 +1733,26 @@ const PROVIDERS = [
2097
1733
  class RslBaseModule {
2098
1734
  }
2099
1735
  RslBaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: RslBaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
2100
- RslBaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: RslBaseModule, declarations: [GenericTableComponent,
2101
- SearchableDropdownComponent], imports: [CommonModule, i1$1.TranslateModule, MaterialModule,
2102
- ReactiveFormsModule, i2$2.BlockUIModule], exports: [HttpClientModule,
2103
- GenericTableComponent,
2104
- SearchableDropdownComponent] });
1736
+ RslBaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: RslBaseModule, declarations: [GenericTableComponent], imports: [CommonModule, i1$2.TranslateModule, MaterialModule, i2$1.BlockUIModule], exports: [HttpClientModule,
1737
+ GenericTableComponent] });
2105
1738
  RslBaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: RslBaseModule, providers: [
2106
1739
  PROVIDERS
2107
1740
  ], imports: [[
2108
1741
  CommonModule,
2109
1742
  TranslateModule.forChild({}),
2110
1743
  MaterialModule,
2111
- ReactiveFormsModule,
2112
1744
  BlockUIModule.forRoot(),
2113
1745
  ], HttpClientModule] });
2114
1746
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: RslBaseModule, decorators: [{
2115
1747
  type: NgModule,
2116
1748
  args: [{
2117
1749
  declarations: [
2118
- GenericTableComponent,
2119
- SearchableDropdownComponent
1750
+ GenericTableComponent
2120
1751
  ],
2121
1752
  imports: [
2122
1753
  CommonModule,
2123
1754
  TranslateModule.forChild({}),
2124
1755
  MaterialModule,
2125
- ReactiveFormsModule,
2126
1756
  BlockUIModule.forRoot(),
2127
1757
  ],
2128
1758
  providers: [
@@ -2130,8 +1760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
2130
1760
  ],
2131
1761
  exports: [
2132
1762
  HttpClientModule,
2133
- GenericTableComponent,
2134
- SearchableDropdownComponent
1763
+ GenericTableComponent
2135
1764
  ]
2136
1765
  }]
2137
1766
  }] });
@@ -2161,14 +1790,14 @@ class InputErrorPipe {
2161
1790
  return rvalue;
2162
1791
  }
2163
1792
  }
2164
- InputErrorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputErrorPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
1793
+ InputErrorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputErrorPipe, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
2165
1794
  InputErrorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputErrorPipe, name: "inputError" });
2166
1795
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputErrorPipe, decorators: [{
2167
1796
  type: Pipe,
2168
1797
  args: [{
2169
1798
  name: 'inputError'
2170
1799
  }]
2171
- }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
1800
+ }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; } });
2172
1801
 
2173
1802
  class Nl2brPipe {
2174
1803
  transform(value, args) {
@@ -2213,5 +1842,5 @@ class CustomValidators {
2213
1842
  * Generated bundle index. Do not edit.
2214
1843
  */
2215
1844
 
2216
- export { Attribute, BaseDatastore, BaseDatastoreConfig, BaseFormEditComponent, BaseMetaModel, BaseModel, BaseModelConfig, BaseQueryData, BaseService, CellTextAlign, CustomType, CustomValidators, DialogService, ErrorResponse, FieldErrorDisplayComponent, GenericTableComponent, GridLayout, GridLayoutFormat, GridLayoutModel, GridLayoutService, InputErrorPipe, MaterialModule, Nl2brPipe, PROVIDERS, PageNotFoundComponent, RslBaseModule, Rule, SearchableDropdownComponent, TranslatedContentDirective, TranslatedElementDirective, UnderConstructionComponent };
1845
+ export { Attribute, BaseDatastore, BaseDatastoreConfig, BaseFormEditComponent, BaseMetaModel, BaseModel, BaseModelConfig, BaseQueryData, BaseService, CellTextAlign, CustomType, CustomValidators, DialogService, ErrorResponse, FieldErrorDisplayComponent, GenericTableComponent, GridLayout, GridLayoutFormat, GridLayoutModel, GridLayoutService, InputErrorPipe, MaterialModule, Nl2brPipe, PROVIDERS, PageNotFoundComponent, RslBaseModule, Rule, TranslatedContentDirective, TranslatedElementDirective, UnderConstructionComponent };
2217
1846
  //# sourceMappingURL=rosoftlab-core.mjs.map