@rosoftlab/core 0.0.100 → 0.0.101

package/fesm2020/rosoftlab-core.mjs

@@ -1,52 +1,47 @@
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Optional, Self, Output, Injectable, ElementRef, ViewEncapsulation, ViewChild, Directive, ContentChildren, NgModule, Pipe } from '@angular/core';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i2 from '@angular/forms';
-import { FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { Subject, Observable, throwError, from, merge, of, fromEvent, BehaviorSubject, combineLatest } from 'rxjs';
-import { filter, debounceTime, tap, switchMap, finalize, takeUntil, map, catchError, distinctUntilChanged, startWith } from 'rxjs/operators';
-import * as i1 from '@angular/cdk/a11y';
-import * as i3 from '@angular/material/form-field';
-import * as i4 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i6 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i7 from '@angular/material/core';
-import { MatNativeDateModule, MatRippleModule, MatOptionModule } from '@angular/material/core';
-import * as i8 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i3$1 from '@angular/common';
-import { DatePipe, DecimalPipe, PercentPipe, CommonModule } from '@angular/common';
-import * as i1$1 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
+import { Component, Input, Injectable, EventEmitter, ElementRef, ViewChild, Output, Directive, ContentChildren, NgModule, Pipe } from '@angular/core';
 import { __decorate } from 'tslib';
-import * as i2$2 from 'ng-block-ui';
+import * as i1$1 from '@angular/forms';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import * as i2$1 from 'ng-block-ui';
 import { BlockUI, BlockUIModule } from 'ng-block-ui';
-import * as i2$1 from '@angular/router';
-import * as i1$2 from '@angular/common/http';
+import { Observable, throwError, from, Subject, merge, of, BehaviorSubject, combineLatest } from 'rxjs';
+import * as i2 from '@angular/router';
+import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpErrorResponse, HttpClientModule } from '@angular/common/http';
 import { compare } from 'fast-json-patch';
 import * as qs from 'qs';
+import { map, catchError, debounceTime, distinctUntilChanged, startWith, switchMap } from 'rxjs/operators';
 import Swal from 'sweetalert2';
-import * as i12 from '@angular/cdk/drag-drop';
+import * as i1$2 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i3 from '@angular/common';
+import { DatePipe, DecimalPipe, PercentPipe, CommonModule } from '@angular/common';
+import * as i11 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i9 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i8$1 from '@angular/material/sort';
+import * as i8 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import * as i6$1 from '@angular/material/table';
+import * as i6 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as jsonLogic from 'json-logic-js/logic.js';
-import * as i5$1 from '@angular/material/progress-spinner';
+import * as i4 from '@angular/material/form-field';
+import * as i5 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i13 from '@angular/material/tooltip';
+import * as i7 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i10 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i12 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { parseISO } from 'date-fns';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
+import { MatNativeDateModule, MatRippleModule, MatOptionModule } from '@angular/material/core';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -73,10 +68,10 @@ import { CdkStepperModule } from '@angular/cdk/stepper';
 class FieldErrorDisplayComponent {
 }
 FieldErrorDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FieldErrorDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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"] });
+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"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FieldErrorDisplayComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], propDecorators: { errorMsg: [{
                 type: Input
             }], displayError: [{
@@ -90,235 +85,20 @@ class PageNotFoundComponent {
     }
 }
 PageNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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"] });
+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"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: PageNotFoundComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: function () { return []; } });
 
-class SearchableDropdownComponent {
-    constructor(_focusMonitor, _elementRef, ngControl) {
-        this._focusMonitor = _focusMonitor;
-        this._elementRef = _elementRef;
-        this.ngControl = ngControl;
-        this.onChange = (_) => { };
-        this.onTouched = () => { };
-        this.stateChanges = new Subject();
-        this.focused = false;
-        this.errorState = false;
-        this.id = `rsl-searchable-dropdown-${SearchableDropdownComponent.nextId++}`;
-        // label for the search dropdown
-        this.label = '';
-        //Fields for sorting the API data
-        this.sortFields = '';
-        // The value used to populate the control value
-        this.valueField = 'id';
-        // The minumum char for search
-        this.minLengthTerm = 3;
-        this.modelSelected = new EventEmitter();
-        this._required = false;
-        this._disabled = false;
-        this.showSerach = true;
-        this.isLoading = false;
-        this.options = [];
-        this.filteredOptions = [];
-        /** Subject that emits when the component has been destroyed. */
-        this._onDestroy = new Subject();
-        this.searchControl = new FormControl('');
-        _focusMonitor.monitor(_elementRef, true).subscribe(origin => {
-            if (this.focused && !origin) {
-                this.onTouched();
-            }
-            this.focused = !!origin;
-            this.stateChanges.next();
-        });
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
-    }
-    get empty() {
-        return !this.value;
-    }
-    get required() { return this._required; }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
-        this.stateChanges.next();
-    }
-    get disabled() { return this._disabled; }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        this.stateChanges.next();
-    }
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        if (value)
-            if (this._value !== value) {
-                this.loadModel(value);
-            }
-        this._value = value;
-        this.stateChanges.next();
-    }
-    ngOnInit() {
-        if (!this.displayFields)
-            this.displayFields = this.searchFields;
-        this.loadModel(this.ngControl.value);
-        if (this.preloadElementsCount) {
-            this.serviceRef.getAll(1, this.preloadElementsCount).subscribe({
-                next: (data) => {
-                    this.showSerach = false;
-                    this.options = data.getModels();
-                    this.filteredOptions = this.options;
-                }
-            });
-        }
-        this.searchControl.valueChanges
-            .pipe(filter((res) => {
-            const result = res !== null && res.length >= this.minLengthTerm;
-            if (!result) {
-                this.options = [];
-                this.filteredOptions = [];
-            }
-            this.showSerach = !result;
-            return result;
-        }), debounceTime(300), tap(() => {
-            this.filteredOptions = [];
-            this.isLoading = true;
-        }), switchMap((value) => this.serviceRef
-            .getAll(1, 10, this.sortFields, `${this.searchFields.replace(',', '|')}@=*${value}`)
-            .pipe(finalize(() => {
-            this.isLoading = false;
-        }))), takeUntil(this._onDestroy))
-            .subscribe((options) => {
-            this.filteredOptions = options.getModels();
-        });
-    }
-    onSelected($event) {
-        const value = $event.option.value;
-        this.searchControl.setValue(value);
-        this.modelSelected.emit(value);
-        if (this.valueField in value) {
-            this.setControlValue(value[this.valueField]);
-        }
-    }
-    setControlValue(value) {
-        this.value = value;
-        this.ngControl.control.setValue(value);
-    }
-    displayWith(value) {
-        return this.getConcatedFields(value);
-    }
-    clearSelection() {
-        this.modelSelected.emit(null);
-        this.setControlValue(null);
-        this.searchControl.setValue(null);
-        this.filteredOptions = this.options;
-    }
-    getConcatedFields(option) {
-        if (!option)
-            return null;
-        const filtersArr = this.displayFields.split(',');
-        return filtersArr.reduce((acc, cv) => {
-            return acc.concat(option[cv] + ' ');
-        }, '');
-    }
-    ngOnDestroy() {
-        this.searchControl = null;
-        this.stateChanges.complete();
-        this._focusMonitor.stopMonitoring(this._elementRef);
-        this._onDestroy.next();
-        this._onDestroy.complete();
-    }
-    getSearchText() {
-        return `Enter ${this.minLengthTerm} characters to start search`;
-    }
-    writeValue(model) {
-        console.log(model);
-        this.value = model;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    loadModel(id) {
-        //Load the model from API to display the value
-        let needLoad = false;
-        if (id) {
-            if (!this.searchControl.value)
-                needLoad = true;
-            else {
-                if (this.searchControl.value[this.valueField] !== id) {
-                    needLoad = true;
-                }
-            }
-        }
-        if (needLoad) {
-            this.serviceRef.get(id).subscribe({
-                next: (model) => {
-                    this.options.push(model);
-                    this.filteredOptions = this.options;
-                    this.searchControl.setValue(model);
-                }
-            });
-        }
-    }
-}
-SearchableDropdownComponent.nextId = 0;
-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 });
-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 } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SearchableDropdownComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rsl-searchable-dropdown', host: {
-                        '[class.example-floating]': 'shouldLabelFloat',
-                        '[id]': 'id',
-                        '[attr.aria-describedby]': 'describedBy',
-                    }, 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>" }]
-        }], ctorParameters: function () { return [{ type: i1.FocusMonitor }, { type: i0.ElementRef }, { type: i2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }]; }, propDecorators: { label: [{
-                type: Input
-            }], fControlName: [{
-                type: Input
-            }], serviceRef: [{
-                type: Input
-            }], searchFields: [{
-                type: Input
-            }], displayFields: [{
-                type: Input
-            }], sortFields: [{
-                type: Input
-            }], valueField: [{
-                type: Input
-            }], minLengthTerm: [{
-                type: Input
-            }], preloadElementsCount: [{
-                type: Input
-            }], modelSelected: [{
-                type: Output
-            }], required: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }] } });
-
 class UnderConstructionComponent {
     constructor() { }
 }
 UnderConstructionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: UnderConstructionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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"] });
+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"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: UnderConstructionComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: function () { return []; } });
 
 class BaseQueryData {
@@ -652,11 +432,11 @@ class BaseDatastore {
         return qs.stringify(params, { arrayFormat: 'brackets' });
     }
 }
-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 });
+BaseDatastore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BaseDatastore, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
 BaseDatastore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BaseDatastore });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: BaseDatastore, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; } });
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
 class BaseService {
     constructor(datastore) {
@@ -731,11 +511,7 @@ class BaseService {
         return fromModel.getFromGroup(fb);
     }
     fromFormGroup(formGroup, id) {
-        // const saveModel = this.newModel(formGroup.getRawValue());
-        // saveModel.id = id ? id : null;
-        // return saveModel;
-        const saveModel = this.newModel();
-        saveModel.getModelFromFormGroup(formGroup);
+        const saveModel = this.newModel(formGroup.getRawValue());
         saveModel.id = id ? id : null;
         return saveModel;
     }
@@ -956,18 +732,10 @@ class BaseFormEditComponent {
     }
     afterFormGenerated() {
     }
-    getFromGroup(formGroup = null) {
-        if (!formGroup)
-            return this.baseForm;
-        if (formGroup instanceof FormGroup)
-            return formGroup;
-        return this.baseForm.controls[formGroup];
-    }
-    validateAllFormFields(formGroup = null) {
-        const fg = this.getFromGroup(formGroup);
-        Object.keys(fg.controls).forEach(field => {
+    validateAllFormFields(formGroup) {
+        Object.keys(formGroup.controls).forEach(field => {
             // console.log(field);
-            const control = fg.get(field);
+            const control = formGroup.get(field);
             if (control instanceof FormControl) {
                 control.markAsTouched({ onlySelf: true });
             }
@@ -976,32 +744,22 @@ class BaseFormEditComponent {
             }
         });
     }
-    isFieldValid(field, formGroup = null) {
-        const fg = this.getFromGroup(formGroup);
-        const filedControl = fg.get(field);
-        return !filedControl.valid && filedControl.touched;
-    }
-    isFieldValidFromArray(arrayIndex, field, arrayName = 'formArray') {
-        const fieldControl = this.baseForm.get(arrayName).get([arrayIndex]).get(field);
-        return !fieldControl.valid && fieldControl.touched;
+    isFieldValid(form, field) {
+        return !form.get(field).valid && form.get(field).touched;
     }
-    displayFieldCss(field) {
+    displayFieldCss(form, field) {
         return {
-            'has-error': this.isFieldValid(field),
-            'has-feedback': this.isFieldValid(field)
+            'has-error': this.isFieldValid(form, field),
+            'has-feedback': this.isFieldValid(form, field)
         };
     }
     onCancel() {
         this.router.navigate([this.cancelRoute]);
     }
     onSave() {
-        this.saveModel(this.baseForm);
-    }
-    saveModel(formGroup = null) {
-        const fg = this.getFromGroup(formGroup);
         const that = this;
-        if (fg) {
-            if (fg.valid) {
+        if (this.baseForm) {
+            if (this.baseForm.valid) {
                 that.blockUI.start('Saving ...');
                 this.beforeSave(this.model).subscribe(_ => {
                     this.modelService.save(this.baseForm, this.modelId, this.model).subscribe((newModel) => {
@@ -1017,7 +775,7 @@ class BaseFormEditComponent {
                         this.afterSave(newModel).subscribe((val) => {
                             this.blockUI.stop();
                             this.dialogService.showSaveMessage('Your changes were saved successfully.').subscribe(d => {
-                                fg.markAsPristine();
+                                this.baseForm.markAsPristine();
                             });
                         });
                     }, err => {
@@ -1027,7 +785,7 @@ class BaseFormEditComponent {
                 });
             }
             else {
-                this.validateAllFormFields(formGroup);
+                this.validateAllFormFields(this.baseForm);
             }
         }
     }
@@ -1076,16 +834,8 @@ class BaseFormEditComponent {
     getCustomErrorMessage(error, fieldLabel) {
         return '';
     }
-    getErrorMessageFromArray(arrayIndex, field, filedTranslationKey, arrayName = 'formArray') {
-        const fieldControl = this.baseForm.get(arrayName).get([arrayIndex]).get(field);
-        return this.getErrorMessageForField(fieldControl, filedTranslationKey);
-    }
-    getErrorMessage(field, filedTranslationKey, formGroup = null) {
-        const fg = this.getFromGroup(formGroup);
-        return this.getErrorMessageForField(fg.get(field), filedTranslationKey);
-    }
-    getErrorMessageForField(fieldControl, filedTranslationKey) {
-        const error = fieldControl.errors;
+    getErrorMessage(field, filedTranslationKey) {
+        const error = this.baseForm.get(field).errors;
         const fieldLabel = this.translate.instant(filedTranslationKey);
         let rvalue = '';
         if (error !== null) {
@@ -1111,7 +861,7 @@ class BaseFormEditComponent {
         return rvalue;
     }
 }
-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 });
+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 });
 BaseFormEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: BaseFormEditComponent, selector: "app-base.form.edit", ngImport: i0, template: '', isInline: true });
 __decorate([
     BlockUI()
@@ -1122,7 +872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                     selector: 'app-base.form.edit',
                     template: ''
                 }]
-        }], 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: [] } });
+        }], 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: [] } });
 
 var GridLayoutFormat;
 (function (GridLayoutFormat) {
@@ -1130,7 +880,6 @@ var GridLayoutFormat;
     GridLayoutFormat[GridLayoutFormat["date"] = 1] = "date";
     GridLayoutFormat[GridLayoutFormat["number"] = 2] = "number";
     GridLayoutFormat[GridLayoutFormat["percent"] = 3] = "percent";
-    GridLayoutFormat[GridLayoutFormat["picture"] = 4] = "picture";
 })(GridLayoutFormat || (GridLayoutFormat = {}));
 var CellTextAlign;
 (function (CellTextAlign) {
@@ -1141,13 +890,12 @@ var CellTextAlign;
 
 class GenericTableComponent {
     // ruleEngineService: RuleEngineService<T>;
-    constructor(dialogService, router, datePipe, numberPipe, percentPipe, renderer) {
+    constructor(dialogService, router, datePipe, numberPipe, percentPipe) {
         this.dialogService = dialogService;
         this.router = router;
         this.datePipe = datePipe;
         this.numberPipe = numberPipe;
         this.percentPipe = percentPipe;
-        this.renderer = renderer;
         this.defaultSort = null;
         this.defaultSortDirection = null;
         this.deletePropertyName = 'name';
@@ -1157,14 +905,12 @@ class GenericTableComponent {
         this.allowEdit = true;
         this.popupEdit = false;
         this.customInclude = null;
-        this.infiniteScroll = false;
         this.dataSource = new MatTableDataSource();
         this.resultsLength = 0;
         this.isLoadingResults = true;
         this.isRateLimitReached = false;
         this.filterChanged = new Subject();
         this.selectedObject = new EventEmitter();
-        this.click = new EventEmitter();
         this.editModel = new EventEmitter();
     }
     ngOnChanges() {
@@ -1231,20 +977,8 @@ class GenericTableComponent {
             this.isRateLimitReached = true;
             return of([]);
         })).subscribe(data => {
-            // if (this.infiniteScroll) {
-            //   let oldData = this.dataSource.data ?? null;
-            //   // if (oldData.length === 0) {
-            //   //   oldData = data;
-            //   // } else {
-            //     oldData=oldData.concat(data);
-            //   // }
-            //   this.dataSource.data = oldData;
-            // }
-            // else {
             this.dataSource.data = data;
-            // }
         });
-        // this.paginator.nextPage()
     }
     getData() {
         this.isLoadingResults = true;
@@ -1342,9 +1076,6 @@ class GenericTableComponent {
     getCellTextAlign(column) {
         return column.textAlign ?? CellTextAlign.left;
     }
-    showPictureCell(column) {
-        return (column?.formating ?? GridLayoutFormat.none) === GridLayoutFormat.picture;
-    }
     deleteDisabled(model) {
         if (this.deleteDisableRule) {
             return this.evaluateRule(this.deleteDisableRule, model);
@@ -1353,9 +1084,6 @@ class GenericTableComponent {
             return false;
         }
     }
-    cellClick(model, propertyName) {
-        this.click.emit({ propertyName, model });
-    }
     evaluateRule(rules, model) {
         let result = true;
         rules.forEach(rule => {
@@ -1414,14 +1142,12 @@ class GenericTableComponent {
     applyFilter(event) {
     }
     dropTable(event) {
-        if (this.changeItemPosition) {
-            const prevItem = this.dataSource.data[event.previousIndex];
-            const currentItem = this.dataSource.data[event.currentIndex];
-            if (this.changeItemPosition(prevItem, currentItem)) {
-                const prevIndex = this.dataSource.data.findIndex((d) => d === event.item.data);
-                moveItemInArray(this.dataSource.data, prevIndex, event.currentIndex);
-                this.table.renderRows();
-            }
+        const prevItem = this.dataSource.data[event.previousIndex];
+        const currentItem = this.dataSource.data[event.currentIndex];
+        if (this.changeItemPosition(prevItem, currentItem)) {
+            const prevIndex = this.dataSource.data.findIndex((d) => d === event.item.data);
+            moveItemInArray(this.dataSource.data, prevIndex, event.currentIndex);
+            this.table.renderRows();
         }
     }
     isColumnSticky(name) {
@@ -1445,45 +1171,13 @@ class GenericTableComponent {
         this.dataSource.data = newData;
         this.dataSource._updateChangeSubscription();
     }
-    ngAfterViewInit() {
-        fromEvent(this.matTableRef.nativeElement, 'scroll')
-            .pipe(debounceTime(700))
-            .subscribe((e) => this.onTableScroll(e));
-    }
-    onTableScroll(e) {
-        const tableViewHeight = e.target.offsetHeight; // viewport: ~500px
-        const tableScrollHeight = e.target.scrollHeight; // length of all table
-        const scrollLocation = e.target.scrollTop; // how far user scrolled
-        // If the user has scrolled within 200px of the bottom, add more data
-        const scrollThreshold = 200;
-        const scrollUpLimit = scrollThreshold;
-        if (scrollLocation < scrollUpLimit && this.paginator.pageIndex > 0) {
-            // this.firstPage--;
-            console.log(`onTableScroll() UP: firstPage decreased to ${this.paginator.pageIndex}. Now fetching data...`);
-            // this.fetchData();
-            this.scrollTo(tableScrollHeight / 2 - 2 * tableViewHeight);
-        }
-        const scrollDownLimit = tableScrollHeight - tableViewHeight - scrollThreshold;
-        if (scrollLocation > scrollDownLimit && this.paginator.pageIndex < this.paginator.getNumberOfPages()) {
-            // this.firstPage++;
-            console.log(`onTableScroll(): firstPage increased to ${this.paginator.pageIndex}. Now fetching data...`);
-            this.paginator.nextPage();
-            // this.scrollTo(tableScrollHeight / 2 + tableViewHeight);
-        }
-    }
-    scrollTo(position) {
-        this.renderer.setProperty(this.matTableRef.nativeElement, 'scrollTop', position);
-    }
-    getCellClass(model, property) {
-        return model.getCellClass(property);
-    }
 }
-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 });
-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 });
+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 });
+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 } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
-            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"] }]
-        }], 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: [{
+            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"] }]
+        }], ctorParameters: function () { return [{ type: DialogService }, { type: i2.Router }, { type: i3.DatePipe }, { type: i3.DecimalPipe }, { type: i3.PercentPipe }]; }, propDecorators: { modelType: [{
                 type: Input
             }], baseService: [{
                 type: Input
@@ -1521,8 +1215,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 type: Input
             }], changeItemPosition: [{
                 type: Input
-            }], infiniteScroll: [{
-                type: Input
             }], paginator: [{
                 type: ViewChild,
                 args: [MatPaginator, { static: true }]
@@ -1535,13 +1227,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
             }], table: [{
                 type: ViewChild,
                 args: ['table']
-            }], matTableRef: [{
-                type: ViewChild,
-                args: ['table', { read: ElementRef }]
             }], selectedObject: [{
                 type: Output
-            }], click: [{
-                type: Output
             }], editModel: [{
                 type: Output
             }] } });
@@ -1602,9 +1289,6 @@ function Attribute(options = {}) {
             const defaultMetadata = Reflect.getMetadata('AttributedefaultValue', target) || {};
             defaultMetadata[serializedPropertyName] = options.defaultValue !== undefined ? options.defaultValue : null;
             Reflect.defineMetadata('AttributedefaultValue', defaultMetadata, target);
-            const formSubGroupMetadata = Reflect.getMetadata('AttributeformSubGroup', target) || {};
-            formSubGroupMetadata[serializedPropertyName] = options.formSubGroup !== undefined ? options.formSubGroup : null;
-            Reflect.defineMetadata('AttributeformSubGroup', formSubGroupMetadata, target);
         };
         const setMetadata = (hasDirtyAttributes, instance, oldValue, newValue, isNew) => {
             const targetType = Reflect.getMetadata('design:type', target, propertyName);
@@ -1792,14 +1476,14 @@ class TranslatedContentDirective {
         this.subs.forEach(sub => sub.unsubscribe());
     }
 }
-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 });
+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 });
 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: TranslatedContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appTranslatedContent]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { translationKey: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i1$2.TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { translationKey: [{
                 type: Input,
                 args: ['appTranslatedContent']
             }], elements: [{
@@ -1912,65 +1596,25 @@ class BaseModel {
     getModelDefaultPropertyValues(model) {
         return Reflect.getMetadata('AttributedefaultValue', model);
     }
-    getModelSubGroupPropertyNames(model) {
-        return Reflect.getMetadata('AttributeformSubGroup', model);
-    }
     getFromGroup(fb) {
         const props = Object.keys(this.getModelPropertyNames(this));
         const requiredProps = this.getModelRequiredPropertyNames(this);
         const defaultValues = this.getModelDefaultPropertyValues(this);
-        const formSubGroupsValues = this.getModelSubGroupPropertyNames(this);
         const controlsConfig = {};
         const that = this;
         if (props) {
             props.forEach(property => {
                 const value = that[property] !== undefined ? that[property] : defaultValues[property];
-                const formSubGroup = formSubGroupsValues[property] ?? null;
                 if (requiredProps[property]) {
-                    if (formSubGroup)
-                        this.getSubFromGroup(fb, controlsConfig, formSubGroup).addControl(property, fb.control(value, Validators.required));
-                    else
-                        controlsConfig[property] = [value, Validators.required];
+                    controlsConfig[property] = [value, Validators.required];
                 }
                 else {
-                    if (formSubGroup)
-                        this.getSubFromGroup(fb, controlsConfig, formSubGroup).addControl(property, fb.control(value));
-                    else
-                        controlsConfig[property] = value;
+                    controlsConfig[property] = value;
                 }
             });
         }
         return fb.group(controlsConfig);
     }
-    getSubFromGroup(fb, controlsConfig, subGroup) {
-        if (!controlsConfig[subGroup])
-            controlsConfig[subGroup] = fb.group({});
-        return controlsConfig[subGroup];
-    }
-    getModelFromFormGroup(formGroup, id) {
-        const props = Object.keys(this.getModelPropertyNames(this));
-        const formSubGroupsValues = this.getModelSubGroupPropertyNames(this);
-        const data = {};
-        if (id) {
-            data.id = id;
-        }
-        const that = this;
-        if (props) {
-            props.forEach(property => {
-                const formSubGroup = formSubGroupsValues[property] ?? null;
-                if (!formSubGroup)
-                    data[property] = formGroup.controls[property].value ?? null;
-                else
-                    data[property] = formGroup.controls[formSubGroup].controls[property].value ?? null;
-            });
-        }
-        if (data) {
-            if (id) {
-                this.id = id;
-            }
-            Object.assign(this, data);
-        }
-    }
     getGridLayout() {
         const result = Array();
         const gridLayout = Reflect.getMetadata('GridLayout', this);
@@ -1987,9 +1631,6 @@ class BaseModel {
         const attributesMetadata = this[AttributeMetadata];
         return this._datastore.modelToEntity(this, attributesMetadata, true);
     }
-    getCellClass(property) {
-        return '';
-    }
 }
 
 class ErrorResponse {
@@ -2090,32 +1731,26 @@ const PROVIDERS = [
 class RslBaseModule {
 }
 RslBaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: RslBaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RslBaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: RslBaseModule, declarations: [GenericTableComponent,
-        SearchableDropdownComponent], imports: [CommonModule, i1$1.TranslateModule, MaterialModule,
-        ReactiveFormsModule, i2$2.BlockUIModule], exports: [HttpClientModule,
-        GenericTableComponent,
-        SearchableDropdownComponent] });
+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,
+        GenericTableComponent] });
 RslBaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: RslBaseModule, providers: [
         PROVIDERS
     ], imports: [[
             CommonModule,
             TranslateModule.forChild({}),
             MaterialModule,
-            ReactiveFormsModule,
             BlockUIModule.forRoot(),
         ], HttpClientModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: RslBaseModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        GenericTableComponent,
-                        SearchableDropdownComponent
+                        GenericTableComponent
                     ],
                     imports: [
                         CommonModule,
                         TranslateModule.forChild({}),
                         MaterialModule,
-                        ReactiveFormsModule,
                         BlockUIModule.forRoot(),
                     ],
                     providers: [
@@ -2123,8 +1758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                     ],
                     exports: [
                         HttpClientModule,
-                        GenericTableComponent,
-                        SearchableDropdownComponent
+                        GenericTableComponent
                     ]
                 }]
         }] });
@@ -2154,14 +1788,14 @@ class InputErrorPipe {
         return rvalue;
     }
 }
-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 });
+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 });
 InputErrorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputErrorPipe, name: "inputError" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: InputErrorPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'inputError'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; } });
 
 class Nl2brPipe {
     transform(value, args) {
@@ -2206,5 +1840,5 @@ class CustomValidators {
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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 };
 //# sourceMappingURL=rosoftlab-core.mjs.map