@rosoftlab/material 1.0.0-alpha-0

package/fesm2022/rosoftlab-material.mjs

@@ -0,0 +1,823 @@
+import * as i13 from '@angular/cdk/drag-drop';
+import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { NgModule, Injectable, EventEmitter, ElementRef, Component, ViewEncapsulation, Input, ViewChild, Output, Optional, Self } from '@angular/core';
+import * as i8 from '@angular/material/paginator';
+import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
+import * as i10 from '@angular/material/sort';
+import { MatSortModule, MatSort } from '@angular/material/sort';
+import * as i11 from '@angular/material/table';
+import { MatTableModule, MatTableDataSource } from '@angular/material/table';
+import * as i2 from '@angular/router';
+import * as i1$1 from '@rosoftlab/core';
+import { CellTextAlign, GridLayoutFormat, BaseModel } from '@rosoftlab/core';
+import * as jsonLogic from 'json-logic-js/logic.js';
+import { Subject, merge, of, fromEvent } from 'rxjs';
+import { debounceTime, distinctUntilChanged, startWith, switchMap, map, catchError, filter, tap, finalize, takeUntil } from 'rxjs/operators';
+import { PortalModule } from '@angular/cdk/portal';
+import { CdkStepperModule } from '@angular/cdk/stepper';
+import * as i2$1 from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
+import * as i4 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
+import * as i6$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i5$1 from '@angular/material/core';
+import { MatNativeDateModule, MatRippleModule, MatOptionModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import * as i5 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i6 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i9 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i12 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTreeModule } from '@angular/material/tree';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i7 from '@angular/material/form-field';
+import * as i1$2 from '@angular/cdk/a11y';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+
+const COMMON_MODULES = [
+    CommonModule,
+    ReactiveFormsModule,
+    MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule,
+    MatDialogModule, MatExpansionModule, MatGridListModule, MatIconModule,
+    MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule,
+    MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule,
+    MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule,
+    MatTooltipModule, MatOptionModule, DragDropModule, MatDividerModule, PortalModule, MatTreeModule, MatBadgeModule, MatStepperModule,
+    CdkStepperModule
+];
+class RSLMaterialModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: RSLMaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: RSLMaterialModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule,
+            MatDialogModule, MatExpansionModule, MatGridListModule, MatIconModule,
+            MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule,
+            MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule,
+            MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule,
+            MatTooltipModule, MatOptionModule, DragDropModule, MatDividerModule, PortalModule, MatTreeModule, MatBadgeModule, MatStepperModule,
+            CdkStepperModule, i1.TranslateModule], exports: [CommonModule,
+            ReactiveFormsModule,
+            MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule,
+            MatDialogModule, MatExpansionModule, MatGridListModule, MatIconModule,
+            MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule,
+            MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule,
+            MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule,
+            MatTooltipModule, MatOptionModule, DragDropModule, MatDividerModule, PortalModule, MatTreeModule, MatBadgeModule, MatStepperModule,
+            CdkStepperModule, TranslateModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: RSLMaterialModule, imports: [COMMON_MODULES, TranslateModule.forRoot({}), CommonModule,
+            ReactiveFormsModule,
+            MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule,
+            MatDialogModule, MatExpansionModule, MatGridListModule, MatIconModule,
+            MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule,
+            MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule,
+            MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule,
+            MatTooltipModule, MatOptionModule, DragDropModule, MatDividerModule, PortalModule, MatTreeModule, MatBadgeModule, MatStepperModule,
+            CdkStepperModule, TranslateModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: RSLMaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ...COMMON_MODULES,
+                        TranslateModule.forRoot({})
+                    ],
+                    exports: [
+                        ...COMMON_MODULES,
+                        TranslateModule
+                    ],
+                }]
+        }] });
+
+class GridLayoutService {
+    constructor(baseService) {
+        this.baseService = baseService;
+    }
+    getGridLayout() {
+        var model = this.baseService.newModel();
+        return model.getGridLayout();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: GridLayoutService, deps: [{ token: i1$1.BaseService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: GridLayoutService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: GridLayoutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.BaseService }]; } });
+
+class GenericTableComponent {
+    // ruleEngineService: RuleEngineService<T>;
+    constructor(dialogService, router, datePipe, numberPipe, percentPipe, renderer) {
+        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';
+        this.stickyColumns = null;
+        this.editOnClick = false;
+        this.editOnDblClick = false;
+        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() {
+        if (this.baseService !== undefined || this.baseService !== null) {
+            if (this.gridLayoutService != null) {
+                this.gridLayout = this.gridLayoutService.getGridLayout();
+            }
+            else {
+                const model = this.baseService.newModel();
+                this.gridLayout = model.getGridLayout();
+            }
+            this.displayedColumns = [];
+            if (this.allowReorderItems) {
+                this.displayedColumns.push('position');
+            }
+            this.displayedColumns.push.apply(this.displayedColumns, this.gridLayout.map(x => x.propertyName));
+            if (!this.editOnClick && !this.editOnDblClick && this.allowEdit) {
+                this.displayedColumns.push('delete');
+            }
+        }
+    }
+    ngOnInit() {
+        this.filterChangedSubscription = this.filterChanged
+            .pipe(debounceTime(300), distinctUntilChanged())
+            .subscribe(newText => {
+            if (newText.length >= 3 || newText.length == 0) {
+                this.filterValue = newText;
+                this.paginator.pageIndex = 0;
+                this.refreshForm();
+            }
+        });
+        // this.getGridLayout();
+        this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
+        this.paginator.pageSize = 15;
+        if (this.defaultSort) {
+            this.sort.active = this.defaultSort;
+            if (this.defaultSortDirection) {
+                this.sort.direction = this.defaultSortDirection;
+            }
+            else {
+                this.sort.direction = 'asc';
+            }
+        }
+        // this.dataSource.paginator = this.paginator;
+        merge(this.sort.sortChange, this.paginator.page)
+            .pipe(startWith({}), switchMap(() => {
+            this.isLoadingResults = true;
+            return this.getData();
+        }), map(data => {
+            // Flip flag to show that loading has finished.
+            this.isLoadingResults = false;
+            this.isRateLimitReached = false;
+            if (data) {
+                this.resultsLength = data.getMeta().meta.count;
+                return data.getModels();
+            }
+            else {
+                this.resultsLength = 0;
+                return [];
+            }
+        }), catchError(() => {
+            this.isLoadingResults = false;
+            // Catch if the GitHub API has reached its rate limit. Return empty data.
+            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;
+        const pageIndex = (this.paginator.pageIndex || 0) + 1;
+        const pageSize = this.paginator.pageSize || 20;
+        const filters = [];
+        let sorts = '';
+        if (this.sort.active) {
+            if (this.sort.direction === 'desc') {
+                sorts = '-' + this.sort.active;
+            }
+            else {
+                sorts = this.sort.active;
+            }
+        }
+        if (this.hasSearch) {
+            if (this.filterValue) {
+                // const filtersArr = this.searchFields.split(",");
+                // filtersArr.forEach(element => {
+                //   filters.push(element + '@=*' + this.filterValue);
+                // });
+                const y = '(' + this.searchFields.replace(',', '|') + ')';
+                filters.push(y + '@=*' + this.filterValue);
+            }
+        }
+        if (this.defaultFilter) {
+            filters.push(this.defaultFilter);
+        }
+        const filtersValue = filters.join(', ');
+        return this.baseService.getAll(pageIndex, pageSize, sorts, filtersValue, this.customInclude);
+    }
+    refreshForm() {
+        this.getData().subscribe(data => {
+            if (data) {
+                this.isLoadingResults = false;
+                this.isRateLimitReached = false;
+                this.resultsLength = data.getMeta().meta.count;
+                this.dataSource.data = data.getModels();
+            }
+            else {
+                this.isLoadingResults = false;
+                this.isRateLimitReached = false;
+                this.resultsLength = 0;
+                this.dataSource.data = [];
+            }
+        });
+    }
+    highlight(element) {
+        if (this.selectedItem) {
+            this.selectedItem.highlighted = element.highlighted;
+        }
+        this.selectedItem = null;
+        element.highlighted = !element.highlighted;
+        if (element.highlighted) {
+            this.selectedItem = element;
+            this.selectedObject.emit(element);
+        }
+        else {
+            this.selectedObject.emit(null);
+        }
+    }
+    deleteObject(model) {
+        const msg = 'Do you want to delete ' + model[this.deletePropertyName] + '?';
+        this.dialogService.confirm(msg).subscribe((response) => {
+            if (response) {
+                this.baseService.delete(model.id).subscribe(() => {
+                    const tempData = [];
+                    this.selectedObject.emit(null);
+                    this.dataSource.data.map((item) => {
+                        if (item.id !== model.id) {
+                            tempData.push(item);
+                        }
+                    });
+                    this.dataSource.data = tempData;
+                });
+            }
+        });
+    }
+    editObject(model) {
+        if (!this.popupEdit) {
+            const id = model.id;
+            this.router.navigate([this.editLink, id]);
+        }
+        else {
+            this.editModel.emit(model);
+        }
+    }
+    getFlexStyle(column) {
+        if (column.width) {
+            const style = column.grow + ' ' + column.shrink + ' ' + column.width + 'px';
+            return style;
+        }
+        return null;
+    }
+    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);
+        }
+        else {
+            return false;
+        }
+    }
+    cellClick(model, propertyName) {
+        this.click.emit({ propertyName, model });
+    }
+    evaluateRule(rules, model) {
+        let result = true;
+        rules.forEach(rule => {
+            let jsonRule;
+            if (typeof rule.rule === 'string') {
+                jsonRule = JSON.parse(rule.rule);
+            }
+            else {
+                jsonRule = rule.rule;
+            }
+            if (rule.parameters) {
+                const data = '{' + rule.parameters.map((item) => {
+                    return '"' + item + '":"' + model[item] + '"';
+                }).join(',') + '}';
+                result = jsonLogic.apply(jsonRule, JSON.parse(data));
+            }
+            else {
+                result = jsonLogic.apply(jsonRule);
+            }
+        });
+        return result;
+    }
+    getCelValue(row, propertyName) {
+        if (!row)
+            return "";
+        // if (propertyName == 'kompetenzenStdev')
+        //   console.log(propertyName);
+        if (propertyName.indexOf('.') === -1) {
+            var gridLayout = this.gridLayout.find(f => f.propertyName.indexOf(propertyName) > -1);
+            return this.getFormatedValue(gridLayout, row[propertyName]);
+        }
+        else {
+            const prop = propertyName.split('.')[0];
+            const subProp = propertyName.replace(prop + '.', '');
+            return this.getCelValue(row[prop], subProp);
+        }
+    }
+    getFormatedValue(gridLayout, value) {
+        if (gridLayout) {
+            switch (gridLayout.formating) {
+                case GridLayoutFormat.date:
+                    return this.datePipe.transform(value, gridLayout.format);
+                    break;
+                case GridLayoutFormat.number:
+                    return this.numberPipe.transform(value, gridLayout.format);
+                case GridLayoutFormat.percent:
+                    const valuePrc = value / 100;
+                    return this.percentPipe.transform(valuePrc, gridLayout.format);
+                default:
+                    return value;
+                    break;
+            }
+        }
+        return value;
+    }
+    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();
+            }
+        }
+    }
+    isColumnSticky(name) {
+        if (this.stickyColumns) {
+            const filtersArr = this.stickyColumns.split(",");
+            return filtersArr.findIndex(f => f == name) !== -1;
+        }
+        return false;
+    }
+    updateElement(model) {
+        //Find if element exist
+        var currentElement = this.dataSource.data.find(f => f.id === model.id);
+        if (currentElement !== null) {
+            const index = this.dataSource.data.indexOf(currentElement);
+            this.dataSource.data[index] = model;
+        }
+        else {
+            this.dataSource.data.push(model);
+        }
+        const newData = [...this.dataSource.data];
+        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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$1.DialogService }, { token: i2.Router }, { token: i3.DatePipe }, { token: i3.DecimalPipe }, { token: i3.PercentPipe }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: GenericTableComponent, isStandalone: true, 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"], dependencies: [{ kind: "ngmodule", type: RSLMaterialModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.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"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i13.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"] }, { kind: "directive", type: i13.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i13.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: GenericTableComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'rsl-generic-table', encapsulation: ViewEncapsulation.None, imports: [RSLMaterialModule], 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: i1$1.DialogService }, { type: i2.Router }, { type: i3.DatePipe }, { type: i3.DecimalPipe }, { type: i3.PercentPipe }, { type: i0.Renderer2 }]; }, propDecorators: { modelType: [{
+                type: Input
+            }], baseService: [{
+                type: Input
+            }], gridLayoutService: [{
+                type: Input
+            }], editLink: [{
+                type: Input
+            }], defaultSort: [{
+                type: Input
+            }], defaultSortDirection: [{
+                type: Input
+            }], deleteDisableRule: [{
+                type: Input
+            }], deletePropertyName: [{
+                type: Input
+            }], hasSearch: [{
+                type: Input
+            }], searchFields: [{
+                type: Input
+            }], defaultFilter: [{
+                type: Input
+            }], allowReorderItems: [{
+                type: Input
+            }], stickyColumns: [{
+                type: Input
+            }], editOnClick: [{
+                type: Input
+            }], editOnDblClick: [{
+                type: Input
+            }], allowEdit: [{
+                type: Input
+            }], popupEdit: [{
+                type: Input
+            }], customInclude: [{
+                type: Input
+            }], changeItemPosition: [{
+                type: Input
+            }], infiniteScroll: [{
+                type: Input
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator, { static: true }]
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort, { static: true }]
+            }], filter: [{
+                type: ViewChild,
+                args: [ElementRef, { static: false }]
+            }], table: [{
+                type: ViewChild,
+                args: ['table']
+            }], matTableRef: [{
+                type: ViewChild,
+                args: ['table', { read: ElementRef }]
+            }], selectedObject: [{
+                type: Output
+            }], click: [{
+                type: Output
+            }], editModel: [{
+                type: Output
+            }] } });
+
+class SearchableDropdownComponent {
+    static { this.nextId = 0; }
+    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();
+    }
+    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 UntypedFormControl('');
+        _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;
+        }
+    }
+    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);
+                }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SearchableDropdownComponent, deps: [{ token: i1$2.FocusMonitor }, { token: i0.ElementRef }, { token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SearchableDropdownComponent, isStandalone: true, 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>", dependencies: [{ kind: "ngmodule", type: RSLMaterialModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.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"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SearchableDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'rsl-searchable-dropdown', host: {
+                        '[class.example-floating]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                        '[attr.aria-describedby]': 'describedBy',
+                    }, imports: [RSLMaterialModule], 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$2.FocusMonitor }, { type: i0.ElementRef }, { type: i2$1.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
+            }] } });
+
+function GridLayout(translateKey, width, grow = 0, shrink = 0, subProperty, formating = GridLayoutFormat.none, format = '', order = 0, textAlign = CellTextAlign.left) {
+    return (target, propertyName) => {
+        const annotations = Reflect.getMetadata('GridLayout', target) || [];
+        let propName = propertyName;
+        if (subProperty) {
+            propName = propertyName.toString() + '.' + subProperty;
+        }
+        annotations.push({
+            propertyName: propName,
+            translateKey,
+            width,
+            grow,
+            shrink,
+            formating,
+            format,
+            order,
+            textAlign
+        });
+        Reflect.defineMetadata('GridLayout', annotations, target);
+    };
+}
+
+class GridLayoutModel {
+    constructor(propertyName, translateKey = null, width = null, grow = 0, shrink = 0, formating = GridLayoutFormat.none, format = '', order = 0, textAlign = CellTextAlign.left) {
+        this.formating = GridLayoutFormat.none;
+        this.order = 0;
+        this.textAlign = CellTextAlign.left;
+        this.propertyName = propertyName;
+        this.translateKey = translateKey;
+        this.width = width;
+        this.grow = grow;
+        this.shrink = shrink;
+        this.formating = formating;
+        this.format = format;
+        this.order = order;
+        this.textAlign = textAlign;
+    }
+}
+
+class MaterialBaseModel extends BaseModel {
+    getGridLayout() {
+        const result = Array();
+        const gridLayout = Reflect.getMetadata('GridLayout', this);
+        if (gridLayout) {
+            for (const layout of gridLayout) {
+                const data = new GridLayoutModel(layout.propertyName, layout.translateKey, layout.width, layout.shrink, layout.grow, layout.formating, layout.format, layout.order, layout.textAlign);
+                result.push(data);
+            }
+        }
+        return result.sort(function (a, b) { return a.order - b.order; });
+        //result;
+    }
+}
+
+/*
+ * Public API Surface of core
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GenericTableComponent, GridLayout, GridLayoutModel, GridLayoutService, MaterialBaseModel, RSLMaterialModule, SearchableDropdownComponent };
+//# sourceMappingURL=rosoftlab-material.mjs.map