ngx-st-sap-installed-instruments 1.0.0

package/fesm2020/ngx-st-sap-installed-instruments.mjs

@@ -0,0 +1,921 @@
+import * as i0 from '@angular/core';
+import { Injectable, Inject, EventEmitter, Component, ChangeDetectionStrategy, ViewChild, Input, Output, HostBinding, NgModule } from '@angular/core';
+import * as i1 from '@angular/common/http';
+import { HttpParams, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { map, tap } from 'rxjs/operators';
+import moment from 'moment';
+import { StSubscribeDestroyComponent } from 'ngx-st-base-functions';
+import * as i3$1 from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import * as i2$1 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import * as i5 from '@angular/material/sort';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import * as i2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5$1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i7 from 'ngx-st-date-format';
+import { StDateFormatModule } from 'ngx-st-date-format';
+import { of } from 'rxjs';
+import * as i3$2 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as i2$2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i6 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i7$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i8 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i9 from '@angular/material/core';
+import { MatRippleModule, MatNativeDateModule } from '@angular/material/core';
+import * as i10 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i11 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i12 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i13 from 'ngx-st-multiselect-autocomplete';
+import { NgxStMultiselectAutocompleteModule } from 'ngx-st-multiselect-autocomplete';
+import * as i14 from 'ngx-st-search-selects';
+import { StSearchSelectsModule } from 'ngx-st-search-selects';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i1$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i4 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatListModule } from '@angular/material/list';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+var InstalledInstrumentSortByColumnEnum;
+(function (InstalledInstrumentSortByColumnEnum) {
+    InstalledInstrumentSortByColumnEnum[InstalledInstrumentSortByColumnEnum["ItemCode"] = 0] = "ItemCode";
+    InstalledInstrumentSortByColumnEnum[InstalledInstrumentSortByColumnEnum["ItemName"] = 1] = "ItemName";
+    InstalledInstrumentSortByColumnEnum[InstalledInstrumentSortByColumnEnum["SerialNumber"] = 2] = "SerialNumber";
+    InstalledInstrumentSortByColumnEnum[InstalledInstrumentSortByColumnEnum["BpId"] = 3] = "BpId";
+    InstalledInstrumentSortByColumnEnum[InstalledInstrumentSortByColumnEnum["BpName"] = 4] = "BpName";
+    InstalledInstrumentSortByColumnEnum[InstalledInstrumentSortByColumnEnum["EndCustomer"] = 5] = "EndCustomer";
+    InstalledInstrumentSortByColumnEnum[InstalledInstrumentSortByColumnEnum["City"] = 6] = "City";
+    InstalledInstrumentSortByColumnEnum[InstalledInstrumentSortByColumnEnum["Territory"] = 7] = "Territory";
+    InstalledInstrumentSortByColumnEnum[InstalledInstrumentSortByColumnEnum["Country"] = 8] = "Country";
+    InstalledInstrumentSortByColumnEnum[InstalledInstrumentSortByColumnEnum["Status"] = 9] = "Status";
+    InstalledInstrumentSortByColumnEnum[InstalledInstrumentSortByColumnEnum["InstallationDate"] = 10] = "InstallationDate";
+})(InstalledInstrumentSortByColumnEnum || (InstalledInstrumentSortByColumnEnum = {}));
+
+var InstalledInstrumentSortOrderEnum;
+(function (InstalledInstrumentSortOrderEnum) {
+    InstalledInstrumentSortOrderEnum[InstalledInstrumentSortOrderEnum["Asc"] = 0] = "Asc";
+    InstalledInstrumentSortOrderEnum[InstalledInstrumentSortOrderEnum["Desc"] = 1] = "Desc";
+})(InstalledInstrumentSortOrderEnum || (InstalledInstrumentSortOrderEnum = {}));
+
+var InstalledInstrumentTableColumnsMapperEnum;
+(function (InstalledInstrumentTableColumnsMapperEnum) {
+    InstalledInstrumentTableColumnsMapperEnum[InstalledInstrumentTableColumnsMapperEnum["instrumentNo"] = 0] = "instrumentNo";
+    InstalledInstrumentTableColumnsMapperEnum[InstalledInstrumentTableColumnsMapperEnum["instrumentDescription"] = 1] = "instrumentDescription";
+    InstalledInstrumentTableColumnsMapperEnum[InstalledInstrumentTableColumnsMapperEnum["serialNumber"] = 2] = "serialNumber";
+    InstalledInstrumentTableColumnsMapperEnum[InstalledInstrumentTableColumnsMapperEnum["customerNo"] = 3] = "customerNo";
+    InstalledInstrumentTableColumnsMapperEnum[InstalledInstrumentTableColumnsMapperEnum["businessPartnerName"] = 4] = "businessPartnerName";
+    InstalledInstrumentTableColumnsMapperEnum[InstalledInstrumentTableColumnsMapperEnum["endUserName"] = 5] = "endUserName";
+    InstalledInstrumentTableColumnsMapperEnum[InstalledInstrumentTableColumnsMapperEnum["city"] = 6] = "city";
+    InstalledInstrumentTableColumnsMapperEnum[InstalledInstrumentTableColumnsMapperEnum["territoryId"] = 7] = "territoryId";
+    InstalledInstrumentTableColumnsMapperEnum[InstalledInstrumentTableColumnsMapperEnum["country"] = 8] = "country";
+    InstalledInstrumentTableColumnsMapperEnum[InstalledInstrumentTableColumnsMapperEnum["status"] = 9] = "status";
+    InstalledInstrumentTableColumnsMapperEnum[InstalledInstrumentTableColumnsMapperEnum["installationDate"] = 10] = "installationDate";
+})(InstalledInstrumentTableColumnsMapperEnum || (InstalledInstrumentTableColumnsMapperEnum = {}));
+
+class SapInstalledInstrumentsService {
+    constructor(config, http) {
+        this.config = config;
+        this.http = http;
+    }
+    getInstalledInstrumentList(searchForm, sort) {
+        const search = {
+            applicationList: searchForm?.application || [],
+            instrumentNo: searchForm?.instrumentNo || '',
+            instrumentDescription: searchForm?.instrumentDesc || '',
+            serialNumber: searchForm?.serialNumber || '',
+            customerNo: searchForm?.customerNo || '',
+            businessPartnerName: searchForm?.bpName || '',
+            statusId: searchForm?.status || '',
+            technicianLastName: searchForm?.technicianLastName || '',
+            territoryId: searchForm?.territory || null,
+            endUserName: searchForm?.endUserName || '',
+            endUserCode: searchForm?.endUserCode || '',
+            city: searchForm?.city || '',
+            stateId: searchForm?.state || '',
+            countryId: searchForm?.country || '',
+            county: searchForm?.county || '',
+            installationDateFrom: searchForm?.installationDateFrom
+                ? moment(searchForm.installationDateFrom).format('YYYY-MM-DD')
+                : null,
+            installationDateTo: searchForm?.installationDateTo
+                ? moment(searchForm.installationDateTo).format('YYYY-MM-DD')
+                : null,
+        };
+        if (sort && sort.direction !== '') {
+            search.sortOrder =
+                sort.direction === 'asc'
+                    ? InstalledInstrumentSortOrderEnum.Asc
+                    : InstalledInstrumentSortOrderEnum.Desc;
+            search.sortByColumn = InstalledInstrumentTableColumnsMapperEnum[sort.active];
+        }
+        return this.http
+            .post(this.config.api_base_uri + '/admin/sap-master-data/installedInstrument/list', search)
+            .pipe(map((res) => {
+            return res.map(installInstrument => ({
+                ...installInstrument,
+                technicianName: installInstrument.technicianFirstName
+                    ? installInstrument.technicianFirstName +
+                        ' ' +
+                        installInstrument.technicianLastName
+                    : '',
+            }));
+        }));
+    }
+    getInstalledInstrument(eqCard) {
+        const params = new HttpParams().set('eqCard', eqCard);
+        return this.http.get(this.config.api_base_uri + '/admin/sap-master-data/installedInstrument', { params });
+    }
+    getTerritory(refresh = false) {
+        const params = new HttpParams().set('refresh', refresh);
+        return this.http.get(this.config.api_base_uri +
+            '/admin/sap-master-data/installedInstrument/territory', { params });
+    }
+    getState(country, refresh = false) {
+        const params = new HttpParams()
+            .set('refresh', refresh)
+            .set('country', country);
+        return this.http.get(this.config.api_base_uri +
+            '/admin/sap-master-data/installedInstrument/state', { params });
+    }
+    getCountry(refresh = false) {
+        const params = new HttpParams().set('refresh', refresh);
+        return this.http.get(this.config.api_base_uri +
+            '/admin/sap-master-data/installedInstrument/country', { params });
+    }
+    getContracts(eqCard) {
+        const params = new HttpParams().set('eqCard', eqCard);
+        return this.http.get(this.config.api_base_uri +
+            '/admin/sap-master-data/installedInstrument/contract', { params });
+    }
+    getCalls(eqCard) {
+        const params = new HttpParams().set('eqCard', eqCard);
+        return this.http.get(this.config.api_base_uri +
+            '/admin/sap-master-data/installedInstrument/call', { params });
+    }
+    getActivities(callId) {
+        const params = new HttpParams().set('callId', callId);
+        return this.http.get(this.config.api_base_uri +
+            '/admin/sap-master-data/installedInstrument/activity', { params });
+    }
+    getApplicationSearch(search) {
+        return this.http.get(this.config.api_base_uri +
+            '/admin/sap-master-data/InstalledInstrument/application?application=' +
+            search);
+    }
+}
+SapInstalledInstrumentsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SapInstalledInstrumentsService, deps: [{ token: 'config' }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+SapInstalledInstrumentsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SapInstalledInstrumentsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SapInstalledInstrumentsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['config']
+                }] }, { type: i1.HttpClient }]; } });
+
+class SapInstalledInstrumentListTableComponent extends StSubscribeDestroyComponent {
+    constructor(router, activatedRoute) {
+        super();
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.sortChanged = new EventEmitter();
+        this.dataSource = new MatTableDataSource();
+        this.tableColumns = [
+            'instrumentNo',
+            'instrumentDescription',
+            'serialNumber',
+            'customerNo',
+            'businessPartnerName',
+            'endUserName',
+            'city',
+            'territoryId',
+            'country',
+            'installationDate',
+            'status',
+        ];
+    }
+    set tableData(data) {
+        this.dataSource.data = data;
+    }
+    ngOnInit() {
+        this.setTableColumns();
+        // this.store
+        //   .select(appQuery.getUser)
+        //   .pipe(takeUntil(this.ngDestroyed$), filter(StBaseService.notNull))
+        //   .subscribe(user => {
+        //     if (!user.instrumentTerritoryFilter) {
+        //       this.tableColumns = this.tableColumns.filter(
+        //         column => column !== 'territoryId'
+        //       );
+        //     }
+        //   });
+    }
+    ngAfterViewInit() {
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+        this.sort.sortChange.subscribe(res => {
+            this.sortChanged.emit(res);
+        });
+        const queryParamsKeys = Object.keys(this.activatedRoute.snapshot.queryParams || {});
+        if (queryParamsKeys.length > 0 &&
+            this.activatedRoute.snapshot.queryParams['active'] &&
+            this.activatedRoute.snapshot.queryParams['direction']) {
+            this.sort.sort({
+                id: this.activatedRoute.snapshot.queryParams['active'],
+                start: this.activatedRoute.snapshot.queryParams['direction'],
+                disableClear: false,
+            });
+        }
+    }
+    rowClicked(row) {
+        this.router.navigate(['details', row.equipmentCardNo], {
+            relativeTo: this.activatedRoute,
+        });
+    }
+    setTableColumns() {
+        this.mapTableColumns = {
+            instrumentNo: 'sapAdminInstalledInstrument.instrumentNo',
+            instrumentDescription: 'sapAdminInstalledInstrument.instrumentDescription',
+            serialNumber: 'sapAdminInstalledInstrument.serialNumber',
+            customerNo: 'sapAdminInstalledInstrument.accountNo',
+            businessPartnerName: 'sapAdminInstalledInstrument.accountName',
+            endUserName: 'sapAdminInstalledInstrument.endCustomer',
+            city: 'global.city',
+            territoryId: 'global.territory',
+            country: 'global.country',
+            status: 'global.status',
+            installationDate: 'sapAdminInstalledInstrument.installationDate',
+        };
+    }
+}
+SapInstalledInstrumentListTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SapInstalledInstrumentListTableComponent, deps: [{ token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+SapInstalledInstrumentListTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SapInstalledInstrumentListTableComponent, selector: "app-sap-installed-instrument-list-table", inputs: { tableData: "tableData" }, outputs: { sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<table\r\n  mat-table\r\n  [dataSource]=\"dataSource\"\r\n  style=\"width: 100%\"\r\n  class=\"no-hover\"\r\n  matSort\r\n>\r\n  <ng-container [matColumnDef]=\"column\" *ngFor=\"let column of tableColumns\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n      {{ mapTableColumns[column] | translate }}\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <ng-container *ngIf=\"column === 'installationDate'\">\r\n        {{ element[column] | stDateFormatPipe }}\r\n      </ng-container>\r\n      <ng-container *ngIf=\"column !== 'installationDate'\">\r\n        {{ element[column] }}\r\n      </ng-container>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"tableColumns\"></tr>\r\n  <tr\r\n    mat-row\r\n    *matRowDef=\"let row; columns: tableColumns\"\r\n    (click)=\"rowClicked(row)\"\r\n  ></tr>\r\n</table>\r\n<mat-paginator\r\n  [pageSizeOptions]=\"[10, 20]\"\r\n  [showFirstLastButtons]=\"true\"\r\n></mat-paginator>\r\n", styles: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%}table::ng-deep thead tr{background-color:#fff9c4}table::ng-deep thead tr th{border-color:#fdd835}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr:hover{background-color:#a5d6a7}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent}table.no-hover::ng-deep tbody tr:hover{background-color:transparent}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.DateFormatPipe, name: "stDateFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SapInstalledInstrumentListTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sap-installed-instrument-list-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\r\n  mat-table\r\n  [dataSource]=\"dataSource\"\r\n  style=\"width: 100%\"\r\n  class=\"no-hover\"\r\n  matSort\r\n>\r\n  <ng-container [matColumnDef]=\"column\" *ngFor=\"let column of tableColumns\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n      {{ mapTableColumns[column] | translate }}\r\n    </th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <ng-container *ngIf=\"column === 'installationDate'\">\r\n        {{ element[column] | stDateFormatPipe }}\r\n      </ng-container>\r\n      <ng-container *ngIf=\"column !== 'installationDate'\">\r\n        {{ element[column] }}\r\n      </ng-container>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"tableColumns\"></tr>\r\n  <tr\r\n    mat-row\r\n    *matRowDef=\"let row; columns: tableColumns\"\r\n    (click)=\"rowClicked(row)\"\r\n  ></tr>\r\n</table>\r\n<mat-paginator\r\n  [pageSizeOptions]=\"[10, 20]\"\r\n  [showFirstLastButtons]=\"true\"\r\n></mat-paginator>\r\n", styles: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%}table::ng-deep thead tr{background-color:#fff9c4}table::ng-deep thead tr th{border-color:#fdd835}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr:hover{background-color:#a5d6a7}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent}table.no-hover::ng-deep tbody tr:hover{background-color:transparent}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.Router }, { type: i2.ActivatedRoute }]; }, propDecorators: { paginator: [{
+                type: ViewChild,
+                args: [MatPaginator, { static: true }]
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort]
+            }], tableData: [{
+                type: Input
+            }], sortChanged: [{
+                type: Output
+            }] } });
+
+class SapInstalledInstrumentListSearchComponent {
+    constructor(sapInstalledInstrumentService, router, activatedRoute, fb) {
+        this.sapInstalledInstrumentService = sapInstalledInstrumentService;
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.fb = fb;
+        this.filtersChanged = new EventEmitter();
+        this.showFilters = false;
+        this.searchForm = this.fb.group({
+            application: [[]],
+            serialNumber: '',
+            instrumentNo: '',
+            instrumentDesc: '',
+            customerNo: '',
+            bpName: '',
+            city: '',
+            county: '',
+            endUserName: '',
+            endUserCode: '',
+            territory: null,
+            technicianLastName: '',
+            country: '',
+            state: '',
+            status: '',
+            installationDateFrom: null,
+            installationDateTo: null
+        });
+        this.getFilteredOptions = (search) => {
+            return this.sapInstalledInstrumentService.getApplicationSearch(search);
+        };
+    }
+    ngOnInit() {
+        this.setSearchForm();
+        this.setAsyncFilters();
+        const queryParamsKeys = Object.keys(this.activatedRoute.snapshot.queryParams || {});
+        if (queryParamsKeys.length > 2) {
+            this.showFilters = true;
+            queryParamsKeys.forEach((queryParam) => {
+                const formControl = this.searchForm.get(queryParam);
+                if (formControl) {
+                    if (queryParam === 'installationDateFrom' || queryParam === 'installationDateTo') {
+                        formControl.setValue(this.activatedRoute.snapshot.queryParams[queryParam] ? new Date(this.activatedRoute.snapshot.queryParams[queryParam]) : null);
+                    }
+                    else {
+                        formControl.setValue(this.activatedRoute.snapshot.queryParams[queryParam]);
+                    }
+                }
+            });
+        }
+    }
+    clearAllFilters() {
+        this.searchForm.reset();
+        this.multiselectAutocomplete.clearSelectedData();
+        this.searchSubmitted();
+    }
+    refreshTerritories() {
+        this.searchForm.controls.territory.setValue(null);
+        this.territories$ = this.sapInstalledInstrumentService.getTerritory(true);
+    }
+    refreshCountries() {
+        this.searchForm.controls.country.setValue('');
+        this.countries$ = this.sapInstalledInstrumentService.getCountry(true);
+    }
+    refreshStates() {
+        this.searchForm.controls.state.setValue('');
+        this.states$ = this.sapInstalledInstrumentService.getState(this.searchForm.controls.country.value, true);
+    }
+    getCountryValue(country) {
+        return country.id;
+    }
+    getStateValue(state) {
+        return state.id;
+    }
+    getTerritoryValue(territory) {
+        return territory.id;
+    }
+    searchSubmitted() {
+        const formValues = this.searchForm.getRawValue();
+        this.filtersChanged.emit(formValues);
+    }
+    clearInputValue(formControlName) {
+        this.searchForm.get(formControlName).setValue('');
+        this.searchSubmitted();
+    }
+    applicationSelected(data) {
+        this.searchForm.controls.application.setValue(data);
+    }
+    setAsyncFilters() {
+        this.territories$ = this.sapInstalledInstrumentService.getTerritory(false);
+        this.countries$ = this.sapInstalledInstrumentService.getCountry(false);
+        this.states$ = of([]);
+    }
+    setSearchForm() {
+        this.searchForm.controls.country.valueChanges.subscribe((country) => {
+            this.searchForm.controls.state.setValue('');
+            if (country) {
+                this.states$ = this.sapInstalledInstrumentService.getState(country);
+            }
+            else {
+                this.states$ = of([]);
+            }
+        });
+    }
+}
+SapInstalledInstrumentListSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SapInstalledInstrumentListSearchComponent, deps: [{ token: SapInstalledInstrumentsService }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$2.NonNullableFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+SapInstalledInstrumentListSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SapInstalledInstrumentListSearchComponent, selector: "app-sap-installed-instrument-list-search", outputs: { filtersChanged: "filtersChanged" }, viewQueries: [{ propertyName: "multiselectAutocomplete", first: true, predicate: ["multiselectAutocomplete"], descendants: true }], ngImport: i0, template: "<form\r\n  class=\"search-filters\"\r\n  [formGroup]=\"searchForm\"\r\n  (ngSubmit)=\"searchSubmitted()\"\r\n>\r\n  <div class=\"row align-items-center\" [ngClass]=\"{ hide: !showFilters }\">\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <ngx-st-multiselect-autocomplete\r\n        #multiselectAutocomplete\r\n        [label]=\"\r\n          ('sapAdminInstalledInstrument.application' | translate) +\r\n          ' (' +\r\n          ('global.max' | translate) +\r\n          ': 10)'\r\n        \"\r\n        [placeholder]=\"\r\n          'sapAdminInstalledInstrument.applicationPlaceholder' | translate\r\n        \"\r\n        [getFilteredOptions]=\"this.getFilteredOptions\"\r\n        [initSelectedData]=\"searchForm.controls.application.value\"\r\n        [maxLengthSelectedData]=\"10\"\r\n        (selectedDataChanged)=\"applicationSelected($event)\"\r\n      ></ngx-st-multiselect-autocomplete>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"bpName\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.accountName' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.bpName.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('bpName')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"technicianLastName\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.technicianLastName' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.technicianLastName.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('technicianLastName')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n  <div class=\"row\" [ngClass]=\"{ hide: !showFilters }\">\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"serialNumber\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.serialNumber' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.serialNumber.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('serialNumber')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"instrumentNo\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.instrumentNo' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.instrumentNo.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('instrumentNo')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"instrumentDesc\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.instrumentDescription' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.instrumentDesc.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('instrumentDesc')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n  <div class=\"row\" [ngClass]=\"{ hide: !showFilters }\">\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <mat-form-field>\r\n        <mat-label>{{\r\n          'sapAdminInstalledInstrument.instrumentStatus' | translate\r\n        }}</mat-label>\r\n        <mat-select formControlName=\"status\">\r\n          <mat-option [value]=\"''\">{{ 'global.empty' | translate }}</mat-option>\r\n          <mat-option [value]=\"'A'\">{{\r\n            'sapAdminInstalledInstrument.statusA' | translate\r\n          }}</mat-option>\r\n          <mat-option [value]=\"'R'\">{{\r\n            'sapAdminInstalledInstrument.statusR' | translate\r\n          }}</mat-option>\r\n          <mat-option [value]=\"'T'\">{{\r\n            'sapAdminInstalledInstrument.statusT' | translate\r\n          }}</mat-option>\r\n          <mat-option [value]=\"'L'\">{{\r\n            'sapAdminInstalledInstrument.statusL' | translate\r\n          }}</mat-option>\r\n          <mat-option [value]=\"'I'\">{{\r\n            'sapAdminInstalledInstrument.statusI' | translate\r\n          }}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"customerNo\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.accountNo' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.customerNo.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('customerNo')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center row\">\r\n      <ngx-st-search-select\r\n        *ngIf=\"\r\n          searchForm?.get('territory') &&\r\n          ((territories$ | async) || []) as territories\r\n        \"\r\n        [options]=\"territories || []\"\r\n        [selectLabel]=\"'global.territory' | translate\"\r\n        [optionLabelPropertyName]=\"'name'\"\r\n        [selectFormControl]=\"searchForm.controls.territory\"\r\n        [selectBindType]=\"'control'\"\r\n        [searchLabel]=\"'global.search' | translate\"\r\n        [valueMethod]=\"getTerritoryValue\"\r\n      ></ngx-st-search-select>\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'global.refresh' | translate\"\r\n        (click)=\"refreshTerritories()\"\r\n        type=\"button\"\r\n      >\r\n        <i class=\"material-icons\">refresh</i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"row\" [ngClass]=\"{ hide: !showFilters }\">\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"city\"\r\n          placeholder=\"{{ 'global.city' | translate }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.city.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('city')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center row\">\r\n      <ngx-st-search-select\r\n        *ngIf=\"searchForm?.get('state') && ((states$ | async) || []) as states\"\r\n        [options]=\"states || []\"\r\n        [selectLabel]=\"'global.state' | translate\"\r\n        [optionLabelPropertyName]=\"'name'\"\r\n        [selectFormControl]=\"searchForm.controls.state\"\r\n        [selectBindType]=\"'control'\"\r\n        [searchLabel]=\"'global.search' | translate\"\r\n        [valueMethod]=\"getStateValue\"\r\n      ></ngx-st-search-select>\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'global.refresh' | translate\"\r\n        [disabled]=\"!searchForm.controls.country.value\"\r\n        (click)=\"refreshStates()\"\r\n        type=\"button\"\r\n      >\r\n        <i class=\"material-icons\">refresh</i>\r\n      </button>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"county\"\r\n          placeholder=\"{{ 'global.county' | translate }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.county.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('county')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center row\">\r\n      <ngx-st-search-select\r\n        *ngIf=\"\r\n          searchForm?.get('country') &&\r\n          ((countries$ | async) || []) as countries\r\n        \"\r\n        [options]=\"countries || []\"\r\n        [selectLabel]=\"'global.country' | translate\"\r\n        [optionLabelPropertyName]=\"'name'\"\r\n        [selectFormControl]=\"searchForm.controls.country\"\r\n        [selectBindType]=\"'control'\"\r\n        [searchLabel]=\"'global.search' | translate\"\r\n        [valueMethod]=\"getCountryValue\"\r\n      ></ngx-st-search-select>\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'global.refresh' | translate\"\r\n        (click)=\"refreshCountries()\"\r\n        type=\"button\"\r\n      >\r\n        <i class=\"material-icons\">refresh</i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"row\" [ngClass]=\"{ hide: !showFilters }\">\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center\">\r\n      <mat-form-field>\r\n        <mat-label>{{\r\n          'sapAdminInstalledInstrument.installationDateFrom' | translate\r\n        }}</mat-label>\r\n        <input\r\n          matInput\r\n          [matDatepicker]=\"picker1\"\r\n          formControlName=\"installationDateFrom\"\r\n        />\r\n        <mat-datepicker-toggle\r\n          matSuffix\r\n          [for]=\"picker1\"\r\n        ></mat-datepicker-toggle>\r\n        <mat-datepicker #picker1></mat-datepicker>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center\">\r\n      <mat-form-field>\r\n        <mat-label>{{\r\n          'sapAdminInstalledInstrument.installationDateTo' | translate\r\n        }}</mat-label>\r\n        <input\r\n          matInput\r\n          [matDatepicker]=\"picker2\"\r\n          formControlName=\"installationDateTo\"\r\n        />\r\n        <mat-datepicker-toggle\r\n          matSuffix\r\n          [for]=\"picker2\"\r\n        ></mat-datepicker-toggle>\r\n        <mat-datepicker #picker2></mat-datepicker>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"endUserName\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.endCustomerName' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.endUserName.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('endUserName')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"endUserCode\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.endCustomerNo' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.endUserCode.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('endUserCode')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row justify-content-center\" style=\"margin-bottom: 10px\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      (click)=\"clearAllFilters()\"\r\n      *ngIf=\"showFilters\"\r\n      style=\"margin-right: 10px\"\r\n    >\r\n      Clear All\r\n    </button>\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      color=\"accent\"\r\n      (click)=\"showFilters = !showFilters\"\r\n    >\r\n      <ng-container *ngIf=\"showFilters\">\r\n        {{ 'sapAdminInstalledInstrument.hideFilters' | translate }}\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!showFilters\">\r\n        {{ 'sapAdminInstalledInstrument.showFilters' | translate }}\r\n      </ng-container>\r\n    </button>\r\n    <button\r\n      *ngIf=\"showFilters\"\r\n      mat-raised-button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      style=\"margin-left: 10px\"\r\n    >\r\n      Search\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.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"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7$1.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: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i12.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i12.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i13.NgxStMultiselectAutocompleteComponent, selector: "ngx-st-multiselect-autocomplete", inputs: ["label", "placeholder", "getFilteredOptions", "initSelectedData", "maxLengthSelectedData"], outputs: ["selectedDataChanged"] }, { kind: "component", type: i14.SearchSelectComponent, selector: "ngx-st-search-select", inputs: ["selectLabel", "filterMethod", "optionLabelMethod", "optionLabelPropertyName", "valueMethod", "displaySelected", "model", "modelChange", "selectFormControl", "required", "selectBindType", "searchLabel", "options"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SapInstalledInstrumentListSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sap-installed-instrument-list-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\r\n  class=\"search-filters\"\r\n  [formGroup]=\"searchForm\"\r\n  (ngSubmit)=\"searchSubmitted()\"\r\n>\r\n  <div class=\"row align-items-center\" [ngClass]=\"{ hide: !showFilters }\">\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <ngx-st-multiselect-autocomplete\r\n        #multiselectAutocomplete\r\n        [label]=\"\r\n          ('sapAdminInstalledInstrument.application' | translate) +\r\n          ' (' +\r\n          ('global.max' | translate) +\r\n          ': 10)'\r\n        \"\r\n        [placeholder]=\"\r\n          'sapAdminInstalledInstrument.applicationPlaceholder' | translate\r\n        \"\r\n        [getFilteredOptions]=\"this.getFilteredOptions\"\r\n        [initSelectedData]=\"searchForm.controls.application.value\"\r\n        [maxLengthSelectedData]=\"10\"\r\n        (selectedDataChanged)=\"applicationSelected($event)\"\r\n      ></ngx-st-multiselect-autocomplete>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"bpName\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.accountName' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.bpName.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('bpName')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"technicianLastName\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.technicianLastName' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.technicianLastName.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('technicianLastName')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n  <div class=\"row\" [ngClass]=\"{ hide: !showFilters }\">\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"serialNumber\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.serialNumber' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.serialNumber.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('serialNumber')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"instrumentNo\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.instrumentNo' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.instrumentNo.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('instrumentNo')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"instrumentDesc\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.instrumentDescription' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.instrumentDesc.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('instrumentDesc')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n  <div class=\"row\" [ngClass]=\"{ hide: !showFilters }\">\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <mat-form-field>\r\n        <mat-label>{{\r\n          'sapAdminInstalledInstrument.instrumentStatus' | translate\r\n        }}</mat-label>\r\n        <mat-select formControlName=\"status\">\r\n          <mat-option [value]=\"''\">{{ 'global.empty' | translate }}</mat-option>\r\n          <mat-option [value]=\"'A'\">{{\r\n            'sapAdminInstalledInstrument.statusA' | translate\r\n          }}</mat-option>\r\n          <mat-option [value]=\"'R'\">{{\r\n            'sapAdminInstalledInstrument.statusR' | translate\r\n          }}</mat-option>\r\n          <mat-option [value]=\"'T'\">{{\r\n            'sapAdminInstalledInstrument.statusT' | translate\r\n          }}</mat-option>\r\n          <mat-option [value]=\"'L'\">{{\r\n            'sapAdminInstalledInstrument.statusL' | translate\r\n          }}</mat-option>\r\n          <mat-option [value]=\"'I'\">{{\r\n            'sapAdminInstalledInstrument.statusI' | translate\r\n          }}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"customerNo\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.accountNo' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.customerNo.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('customerNo')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center row\">\r\n      <ngx-st-search-select\r\n        *ngIf=\"\r\n          searchForm?.get('territory') &&\r\n          ((territories$ | async) || []) as territories\r\n        \"\r\n        [options]=\"territories || []\"\r\n        [selectLabel]=\"'global.territory' | translate\"\r\n        [optionLabelPropertyName]=\"'name'\"\r\n        [selectFormControl]=\"searchForm.controls.territory\"\r\n        [selectBindType]=\"'control'\"\r\n        [searchLabel]=\"'global.search' | translate\"\r\n        [valueMethod]=\"getTerritoryValue\"\r\n      ></ngx-st-search-select>\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'global.refresh' | translate\"\r\n        (click)=\"refreshTerritories()\"\r\n        type=\"button\"\r\n      >\r\n        <i class=\"material-icons\">refresh</i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"row\" [ngClass]=\"{ hide: !showFilters }\">\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"city\"\r\n          placeholder=\"{{ 'global.city' | translate }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.city.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('city')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center row\">\r\n      <ngx-st-search-select\r\n        *ngIf=\"searchForm?.get('state') && ((states$ | async) || []) as states\"\r\n        [options]=\"states || []\"\r\n        [selectLabel]=\"'global.state' | translate\"\r\n        [optionLabelPropertyName]=\"'name'\"\r\n        [selectFormControl]=\"searchForm.controls.state\"\r\n        [selectBindType]=\"'control'\"\r\n        [searchLabel]=\"'global.search' | translate\"\r\n        [valueMethod]=\"getStateValue\"\r\n      ></ngx-st-search-select>\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'global.refresh' | translate\"\r\n        [disabled]=\"!searchForm.controls.country.value\"\r\n        (click)=\"refreshStates()\"\r\n        type=\"button\"\r\n      >\r\n        <i class=\"material-icons\">refresh</i>\r\n      </button>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"county\"\r\n          placeholder=\"{{ 'global.county' | translate }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.county.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('county')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center row\">\r\n      <ngx-st-search-select\r\n        *ngIf=\"\r\n          searchForm?.get('country') &&\r\n          ((countries$ | async) || []) as countries\r\n        \"\r\n        [options]=\"countries || []\"\r\n        [selectLabel]=\"'global.country' | translate\"\r\n        [optionLabelPropertyName]=\"'name'\"\r\n        [selectFormControl]=\"searchForm.controls.country\"\r\n        [selectBindType]=\"'control'\"\r\n        [searchLabel]=\"'global.search' | translate\"\r\n        [valueMethod]=\"getCountryValue\"\r\n      ></ngx-st-search-select>\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'global.refresh' | translate\"\r\n        (click)=\"refreshCountries()\"\r\n        type=\"button\"\r\n      >\r\n        <i class=\"material-icons\">refresh</i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"row\" [ngClass]=\"{ hide: !showFilters }\">\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center\">\r\n      <mat-form-field>\r\n        <mat-label>{{\r\n          'sapAdminInstalledInstrument.installationDateFrom' | translate\r\n        }}</mat-label>\r\n        <input\r\n          matInput\r\n          [matDatepicker]=\"picker1\"\r\n          formControlName=\"installationDateFrom\"\r\n        />\r\n        <mat-datepicker-toggle\r\n          matSuffix\r\n          [for]=\"picker1\"\r\n        ></mat-datepicker-toggle>\r\n        <mat-datepicker #picker1></mat-datepicker>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center\">\r\n      <mat-form-field>\r\n        <mat-label>{{\r\n          'sapAdminInstalledInstrument.installationDateTo' | translate\r\n        }}</mat-label>\r\n        <input\r\n          matInput\r\n          [matDatepicker]=\"picker2\"\r\n          formControlName=\"installationDateTo\"\r\n        />\r\n        <mat-datepicker-toggle\r\n          matSuffix\r\n          [for]=\"picker2\"\r\n        ></mat-datepicker-toggle>\r\n        <mat-datepicker #picker2></mat-datepicker>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"endUserName\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.endCustomerName' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.endUserName.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('endUserName')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center\">\r\n      <mat-form-field>\r\n        <input\r\n          matInput\r\n          formControlName=\"endUserCode\"\r\n          placeholder=\"{{\r\n            'sapAdminInstalledInstrument.endCustomerNo' | translate\r\n          }}\"\r\n        />\r\n        <button\r\n          *ngIf=\"searchForm.controls.endUserCode.value\"\r\n          type=\"button\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearInputValue('endUserCode')\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row justify-content-center\" style=\"margin-bottom: 10px\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      (click)=\"clearAllFilters()\"\r\n      *ngIf=\"showFilters\"\r\n      style=\"margin-right: 10px\"\r\n    >\r\n      Clear All\r\n    </button>\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      color=\"accent\"\r\n      (click)=\"showFilters = !showFilters\"\r\n    >\r\n      <ng-container *ngIf=\"showFilters\">\r\n        {{ 'sapAdminInstalledInstrument.hideFilters' | translate }}\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!showFilters\">\r\n        {{ 'sapAdminInstalledInstrument.showFilters' | translate }}\r\n      </ng-container>\r\n    </button>\r\n    <button\r\n      *ngIf=\"showFilters\"\r\n      mat-raised-button\r\n      type=\"submit\"\r\n      color=\"primary\"\r\n      style=\"margin-left: 10px\"\r\n    >\r\n      Search\r\n    </button>\r\n  </div>\r\n</form>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SapInstalledInstrumentsService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$2.NonNullableFormBuilder }]; }, propDecorators: { multiselectAutocomplete: [{
+                type: ViewChild,
+                args: ['multiselectAutocomplete']
+            }], filtersChanged: [{
+                type: Output
+            }] } });
+
+class SapInstalledInstrumentListComponent extends StSubscribeDestroyComponent {
+    constructor(sapInstalledInstrumentService, changeDetector, router, activatedRoute) {
+        super();
+        this.sapInstalledInstrumentService = sapInstalledInstrumentService;
+        this.changeDetector = changeDetector;
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.class = 'display-flex-component';
+        this.installedInstruments = [];
+        this.lastSearchFilters = {};
+        this.lastSearchSorts = {};
+    }
+    ngOnInit() {
+        const queryParamsKeys = Object.keys(this.activatedRoute.snapshot.queryParams || {});
+        if (queryParamsKeys.length > 0) {
+            queryParamsKeys.forEach(queryParam => {
+                if (queryParam === 'active' || queryParam === 'direction') {
+                    this.lastSearchSorts[queryParam] =
+                        this.activatedRoute.snapshot.queryParams[queryParam];
+                }
+                else {
+                    this.lastSearchFilters[queryParam] =
+                        this.activatedRoute.snapshot.queryParams[queryParam];
+                    this.lastSearchFilters['installationDateFrom'] = this.activatedRoute
+                        .snapshot.queryParams['installationDateFrom']
+                        ? new Date(this.activatedRoute.snapshot.queryParams['installationDateFrom'])
+                        : null;
+                    this.lastSearchFilters['installationDateTo'] = this.activatedRoute
+                        .snapshot.queryParams['installationDateTo']
+                        ? new Date(this.activatedRoute.snapshot.queryParams['installationDateTo'])
+                        : null;
+                }
+            });
+        }
+        this.loadInstalledInstruments(this.lastSearchFilters, this.lastSearchSorts);
+    }
+    filtersChanged(event) {
+        this.loadInstalledInstruments(event, this.lastSearchSorts);
+    }
+    sortChanged(event) {
+        this.loadInstalledInstruments(this.lastSearchFilters, event);
+    }
+    loadInstalledInstruments(searchForm, sort) {
+        this.router.navigate([], {
+            queryParams: {
+                ...searchForm,
+                installationDateFrom: searchForm.installationDateFrom?.toISOString() || '',
+                installationDateTo: searchForm.installationDateTo?.toISOString() || '',
+                ...sort,
+            },
+        });
+        this.sapInstalledInstrumentService
+            .getInstalledInstrumentList(searchForm, sort)
+            .subscribe(res => {
+            this.lastSearchFilters = searchForm;
+            this.lastSearchSorts = sort;
+            this.installedInstruments = res;
+            this.changeDetector.markForCheck();
+        });
+    }
+}
+SapInstalledInstrumentListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SapInstalledInstrumentListComponent, deps: [{ token: SapInstalledInstrumentsService }, { token: i0.ChangeDetectorRef }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+SapInstalledInstrumentListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SapInstalledInstrumentListComponent, selector: "app-sap-installed-instrument-list", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid no-cut\">\r\n  <div class=\"card\">\r\n    <div class=\"card-header card-header-warning\">\r\n      <h3 class=\"card-title\">\r\n        {{\r\n          'sapAdminInstalledInstrument.titleInstalledInstrumentList' | translate\r\n        }}\r\n      </h3>\r\n    </div>\r\n\r\n    <div class=\"card-body\">\r\n      <app-sap-installed-instrument-list-search\r\n        (filtersChanged)=\"filtersChanged($event)\"\r\n      ></app-sap-installed-instrument-list-search>\r\n\r\n      <app-sap-installed-instrument-list-table\r\n        [tableData]=\"installedInstruments\"\r\n        (sortChanged)=\"sortChanged($event)\"\r\n      ></app-sap-installed-instrument-list-table>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: SapInstalledInstrumentListSearchComponent, selector: "app-sap-installed-instrument-list-search", outputs: ["filtersChanged"] }, { kind: "component", type: SapInstalledInstrumentListTableComponent, selector: "app-sap-installed-instrument-list-table", inputs: ["tableData"], outputs: ["sortChanged"] }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SapInstalledInstrumentListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sap-installed-instrument-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container-fluid no-cut\">\r\n  <div class=\"card\">\r\n    <div class=\"card-header card-header-warning\">\r\n      <h3 class=\"card-title\">\r\n        {{\r\n          'sapAdminInstalledInstrument.titleInstalledInstrumentList' | translate\r\n        }}\r\n      </h3>\r\n    </div>\r\n\r\n    <div class=\"card-body\">\r\n      <app-sap-installed-instrument-list-search\r\n        (filtersChanged)=\"filtersChanged($event)\"\r\n      ></app-sap-installed-instrument-list-search>\r\n\r\n      <app-sap-installed-instrument-list-table\r\n        [tableData]=\"installedInstruments\"\r\n        (sortChanged)=\"sortChanged($event)\"\r\n      ></app-sap-installed-instrument-list-table>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: SapInstalledInstrumentsService }, { type: i0.ChangeDetectorRef }, { type: i2.Router }, { type: i2.ActivatedRoute }]; }, propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class ActivityDetailsViewComponent {
+    constructor(config) {
+        this.config = config;
+        this.baseDownloadLink = '';
+    }
+    ngOnInit() {
+        this.baseDownloadLink =
+            this.config.api_base_uri +
+                '/admin/sap-master-data/installedInstrument/activity-attachment?access_token=' +
+                this.config.accessToken;
+    }
+    updateLink() {
+        const company = localStorage.getItem('company-id')
+            ? `&company-id=${localStorage.getItem('company-id')}`
+            : '';
+        this.baseDownloadLink =
+            this.config.api_base_uri +
+                '/admin/sap-master-data/installedInstrument/activity-attachment?access_token=' +
+                this.config.accessToken +
+                company;
+    }
+}
+ActivityDetailsViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActivityDetailsViewComponent, deps: [{ token: 'config' }], target: i0.ɵɵFactoryTarget.Component });
+ActivityDetailsViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ActivityDetailsViewComponent, selector: "app-activity-details-view", inputs: { activity: "activity" }, ngImport: i0, template: "<div class=\"group-details row\" style=\"margin-top: 20px;\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.activity' | translate}}</span>\r\n        <p>{{activity.activity || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'global.type' | translate}}</span>\r\n        <p>{{activity.type || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.subject' | translate}}</span>\r\n        <p>{{activity.subject || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'global.remarks' | translate}}</span>\r\n        <p>{{activity.remarks || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.startTime' | translate}}</span>\r\n        <p>{{(activity.startTime | stDateTimeFormatPipe) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.endTime' | translate}}</span>\r\n        <p>{{(activity.endTime | stDateTimeFormatPipe) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.duration' | translate}}</span>\r\n        <p>{{activity.duration || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.content' | translate}}</span>\r\n        <p>{{activity.content || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<hr/>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.coordinator' | translate}}</span>\r\n        <p>{{activity.coordinatorName || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.orderNumber' | translate}}</span>\r\n        <p>{{activity.orderNumber || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.detailedSymptom' | translate}}</span>\r\n        <p>{{activity.detailedSymptom || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.solution' | translate}}</span>\r\n        <p>{{activity.solution || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-12\">\r\n        <span>{{'sapAdminInstalledInstrument.incompleteReason' | translate}}</span>\r\n        <p>{{activity.incompleteReason || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"group-details row\" *ngIf=\"activity.attachmentList.length > 0\">\r\n    <div class=\"col-xs-12 col-sm-12\">\r\n        <p class=\"attachments-title\">{{'global.attachments' | translate}}:</p>\r\n        <ul class=\"row\">\r\n            <li class=\"row align-items-center\" *ngFor=\"let attachment of activity.attachmentList\">\r\n                <p>{{attachment.fileName}}.{{attachment.fileExt}}</p>\r\n\r\n                <a [href]=\"baseDownloadLink + '&id=' + attachment.id + '&line=' + attachment.line + '&preview=true'\" target=\"_blank\" (click)=\"updateLink()\">\r\n                    <button mat-icon-button>\r\n                        <mat-icon class=\"material-icons\">preview</mat-icon>\r\n                    </button>\r\n                </a>\r\n\r\n                <a [href]=\"baseDownloadLink + '&id=' + attachment.id + '&line=' + attachment.line + '&preview=false'\" target=\"_blank\" (click)=\"updateLink()\">\r\n                    <button mat-icon-button>\r\n                        <mat-icon class=\"material-icons\">cloud_download</mat-icon>\r\n                    </button>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [".group-details .attachments-title{font-weight:500;margin-bottom:0}.group-details ul{padding-left:0}.group-details ul li{padding:0 10px;border-right:2px solid #66bb6a}.group-details ul li:last-child{border-right:0}.group-details ul li p{margin-bottom:0}.group-details ul li button{width:32px;height:32px;line-height:32px;opacity:.8}.group-details ul li button:hover{opacity:1}.group-details ul li button mat-icon{font-size:22px;line-height:22px;width:22px;height:22px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.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"] }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActivityDetailsViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-activity-details-view', template: "<div class=\"group-details row\" style=\"margin-top: 20px;\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.activity' | translate}}</span>\r\n        <p>{{activity.activity || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'global.type' | translate}}</span>\r\n        <p>{{activity.type || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.subject' | translate}}</span>\r\n        <p>{{activity.subject || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'global.remarks' | translate}}</span>\r\n        <p>{{activity.remarks || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.startTime' | translate}}</span>\r\n        <p>{{(activity.startTime | stDateTimeFormatPipe) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.endTime' | translate}}</span>\r\n        <p>{{(activity.endTime | stDateTimeFormatPipe) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.duration' | translate}}</span>\r\n        <p>{{activity.duration || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.content' | translate}}</span>\r\n        <p>{{activity.content || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<hr/>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.coordinator' | translate}}</span>\r\n        <p>{{activity.coordinatorName || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.orderNumber' | translate}}</span>\r\n        <p>{{activity.orderNumber || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.detailedSymptom' | translate}}</span>\r\n        <p>{{activity.detailedSymptom || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{'sapAdminInstalledInstrument.solution' | translate}}</span>\r\n        <p>{{activity.solution || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-12\">\r\n        <span>{{'sapAdminInstalledInstrument.incompleteReason' | translate}}</span>\r\n        <p>{{activity.incompleteReason || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"group-details row\" *ngIf=\"activity.attachmentList.length > 0\">\r\n    <div class=\"col-xs-12 col-sm-12\">\r\n        <p class=\"attachments-title\">{{'global.attachments' | translate}}:</p>\r\n        <ul class=\"row\">\r\n            <li class=\"row align-items-center\" *ngFor=\"let attachment of activity.attachmentList\">\r\n                <p>{{attachment.fileName}}.{{attachment.fileExt}}</p>\r\n\r\n                <a [href]=\"baseDownloadLink + '&id=' + attachment.id + '&line=' + attachment.line + '&preview=true'\" target=\"_blank\" (click)=\"updateLink()\">\r\n                    <button mat-icon-button>\r\n                        <mat-icon class=\"material-icons\">preview</mat-icon>\r\n                    </button>\r\n                </a>\r\n\r\n                <a [href]=\"baseDownloadLink + '&id=' + attachment.id + '&line=' + attachment.line + '&preview=false'\" target=\"_blank\" (click)=\"updateLink()\">\r\n                    <button mat-icon-button>\r\n                        <mat-icon class=\"material-icons\">cloud_download</mat-icon>\r\n                    </button>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [".group-details .attachments-title{font-weight:500;margin-bottom:0}.group-details ul{padding-left:0}.group-details ul li{padding:0 10px;border-right:2px solid #66bb6a}.group-details ul li:last-child{border-right:0}.group-details ul li p{margin-bottom:0}.group-details ul li button{width:32px;height:32px;line-height:32px;opacity:.8}.group-details ul li button:hover{opacity:1}.group-details ul li button mat-icon{font-size:22px;line-height:22px;width:22px;height:22px}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['config']
+                }] }]; }, propDecorators: { activity: [{
+                type: Input
+            }] } });
+
+class ActivitiesListViewComponent {
+    constructor() {
+        this.class = 'display-flex-component';
+        this.columnsToDisplay = ['activityNumber', 'detailedSymptom', 'solution', 'coordinator', 'startTime', 'endTime'];
+    }
+    ngOnInit() {
+        this.setTable();
+    }
+    ngAfterViewInit() {
+        this.paginator.pageSize = 5;
+        this.tableSource.paginator = this.paginator;
+    }
+    setTable() {
+        this.tableSource = new MatTableDataSource(this.activities);
+    }
+}
+ActivitiesListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActivitiesListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ActivitiesListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ActivitiesListViewComponent, selector: "app-activities-list-view", inputs: { activities: "activities" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"activities-list-view\">\r\n  <table mat-table [dataSource]=\"tableSource\" [multiTemplateDataRows]=\"true\">\r\n    <ng-container matColumnDef=\"activityNumber\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.activityNo' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.activityNumber }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"type\">\r\n      <th mat-header-cell *matHeaderCellDef>{{ 'global.type' | translate }}</th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.type }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"detailedSymptom\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.detailedSymptom' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.detailedSymptom }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"solution\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.solution' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.solution }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"coordinator\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.coordinator' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.coordinatorName }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"startTime\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.startTime' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{ element.startTime | stDateTimeFormatPipe }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"endTime\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.endTime' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{ element.endTime | stDateTimeFormatPipe }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"expandedDetail\">\r\n      <td\r\n        mat-cell\r\n        *matCellDef=\"let element\"\r\n        [attr.colspan]=\"columnsToDisplay.length\"\r\n      >\r\n        <div\r\n          class=\"row-detail\"\r\n          [@detailExpand]=\"\r\n            element == expandedElement ? 'expanded' : 'collapsed'\r\n          \"\r\n        >\r\n          <app-activity-details-view\r\n            *ngIf=\"element == expandedElement\"\r\n            [activity]=\"element\"\r\n          ></app-activity-details-view>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let element; columns: columnsToDisplay\"\r\n      class=\"details-element-row\"\r\n      [class.details-expanded-row]=\"expandedElement === element\"\r\n      (click)=\"expandedElement = expandedElement === element ? null : element\"\r\n    ></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n      class=\"detail-row\"\r\n    ></tr>\r\n  </table>\r\n  <mat-paginator\r\n    [pageSizeOptions]=\"[5, 10]\"\r\n    [showFirstLastButtons]=\"true\"\r\n  ></mat-paginator>\r\n</div>\r\n", styles: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%}table::ng-deep thead tr{background-color:#fff9c4}table::ng-deep thead tr th{border-color:#fdd835}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr:hover{background-color:#a5d6a7}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent}table.no-hover::ng-deep tbody tr:hover{background-color:transparent}table.admin-table::ng-deep .actions-cell{width:100px}.activities-list-view{width:100%}table::ng-deep tbody>tr.active{background-color:#90caf9!important}table::ng-deep tbody>tr:hover{background-color:#90caf9!important}table::ng-deep tbody>tr:not(.details-expanded-row):hover{background-color:#f5f5f5!important}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent!important;cursor:default}table::ng-deep tbody>tr.detail-row{height:0}table::ng-deep tbody>tr.detail-row .row-detail{overflow:hidden;max-height:inherit}table::ng-deep tbody>tr.detail-row .row-detail ul{margin:10px 0}table::ng-deep tbody>tr.details-element-row:not(.details-expanded-row):hover{background:whitesmoke}table::ng-deep tbody>tr.details-element-row td{border-bottom-width:0}table::ng-deep tbody>tr.details-expanded-row{background-color:#bbdefb;border-left:3px solid #bbdefb;border-right:3px solid #bbdefb}table::ng-deep tbody>tr.details-expanded-row+tr{border-left:3px solid #bbdefb;border-right:3px solid #bbdefb;border-bottom:3px solid #bbdefb}table::ng-deep tbody>tr .mat-column-expanded{width:50px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ActivityDetailsViewComponent, selector: "app-activity-details-view", inputs: ["activity"] }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], animations: [
+        trigger('detailExpand', [
+            state('collapsed', style({ height: '0px', minHeight: '0' })),
+            state('expanded', style({ height: '*' })),
+            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+        ]),
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ActivitiesListViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-activities-list-view', animations: [
+                        trigger('detailExpand', [
+                            state('collapsed', style({ height: '0px', minHeight: '0' })),
+                            state('expanded', style({ height: '*' })),
+                            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+                        ]),
+                    ], template: "<div class=\"activities-list-view\">\r\n  <table mat-table [dataSource]=\"tableSource\" [multiTemplateDataRows]=\"true\">\r\n    <ng-container matColumnDef=\"activityNumber\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.activityNo' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.activityNumber }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"type\">\r\n      <th mat-header-cell *matHeaderCellDef>{{ 'global.type' | translate }}</th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.type }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"detailedSymptom\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.detailedSymptom' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.detailedSymptom }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"solution\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.solution' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.solution }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"coordinator\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.coordinator' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.coordinatorName }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"startTime\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.startTime' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{ element.startTime | stDateTimeFormatPipe }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"endTime\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.endTime' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{ element.endTime | stDateTimeFormatPipe }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"expandedDetail\">\r\n      <td\r\n        mat-cell\r\n        *matCellDef=\"let element\"\r\n        [attr.colspan]=\"columnsToDisplay.length\"\r\n      >\r\n        <div\r\n          class=\"row-detail\"\r\n          [@detailExpand]=\"\r\n            element == expandedElement ? 'expanded' : 'collapsed'\r\n          \"\r\n        >\r\n          <app-activity-details-view\r\n            *ngIf=\"element == expandedElement\"\r\n            [activity]=\"element\"\r\n          ></app-activity-details-view>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let element; columns: columnsToDisplay\"\r\n      class=\"details-element-row\"\r\n      [class.details-expanded-row]=\"expandedElement === element\"\r\n      (click)=\"expandedElement = expandedElement === element ? null : element\"\r\n    ></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n      class=\"detail-row\"\r\n    ></tr>\r\n  </table>\r\n  <mat-paginator\r\n    [pageSizeOptions]=\"[5, 10]\"\r\n    [showFirstLastButtons]=\"true\"\r\n  ></mat-paginator>\r\n</div>\r\n", styles: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%}table::ng-deep thead tr{background-color:#fff9c4}table::ng-deep thead tr th{border-color:#fdd835}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr:hover{background-color:#a5d6a7}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent}table.no-hover::ng-deep tbody tr:hover{background-color:transparent}table.admin-table::ng-deep .actions-cell{width:100px}.activities-list-view{width:100%}table::ng-deep tbody>tr.active{background-color:#90caf9!important}table::ng-deep tbody>tr:hover{background-color:#90caf9!important}table::ng-deep tbody>tr:not(.details-expanded-row):hover{background-color:#f5f5f5!important}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent!important;cursor:default}table::ng-deep tbody>tr.detail-row{height:0}table::ng-deep tbody>tr.detail-row .row-detail{overflow:hidden;max-height:inherit}table::ng-deep tbody>tr.detail-row .row-detail ul{margin:10px 0}table::ng-deep tbody>tr.details-element-row:not(.details-expanded-row):hover{background:whitesmoke}table::ng-deep tbody>tr.details-element-row td{border-bottom-width:0}table::ng-deep tbody>tr.details-expanded-row{background-color:#bbdefb;border-left:3px solid #bbdefb;border-right:3px solid #bbdefb}table::ng-deep tbody>tr.details-expanded-row+tr{border-left:3px solid #bbdefb;border-right:3px solid #bbdefb;border-bottom:3px solid #bbdefb}table::ng-deep tbody>tr .mat-column-expanded{width:50px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator]
+            }], activities: [{
+                type: Input
+            }] } });
+
+class ServiceContractDetailsViewComponent {
+    constructor() {
+    }
+    ngOnInit() {
+    }
+}
+ServiceContractDetailsViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ServiceContractDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ServiceContractDetailsViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ServiceContractDetailsViewComponent, selector: "app-service-contract-details-view", inputs: { contract: "contract" }, ngImport: i0, template: "<div class=\"group-details row\" style=\"margin-top: 20px;\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.customer' | translate}}</span>\r\n        <p>{{contract.customer || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.customerName' | translate}}</span>\r\n        <p>{{contract.customerName || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'global.description' | translate}}</span>\r\n        <p>{{contract.description || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.startDate' | translate}}</span>\r\n        <p>{{(contract.startDate | stDateFormatPipe) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.endDate' | translate}}</span>\r\n        <p>{{(contract.endDate | stDateFormatPipe) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.terminationDate' | translate}}</span>\r\n        <p>{{(contract.terminationDate | stDateFormatPipe) || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<hr/>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-6\">\r\n        <span>{{'sapAdminInstalledInstrument.serviceType' | translate}}</span>\r\n        <p>{{(contract.serviceType) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-6\">\r\n        <span>{{'sapAdminInstalledInstrument.template' | translate}}</span>\r\n        <p>{{(contract.template) || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-6\">\r\n        <span>{{'sapAdminInstalledInstrument.handledBy' | translate}}</span>\r\n        <p>{{(contract.handledBy) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-6\">\r\n        <span>{{'sapAdminInstalledInstrument.remarks' | translate}}</span>\r\n        <p>{{(contract.remarks) || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<hr/>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.itemCode' | translate}}</span>\r\n        <p>{{(contract.itemCode) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.itemName' | translate}}</span>\r\n        <p>{{(contract.itemName) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.serialNumber' | translate}}</span>\r\n        <p>{{(contract.serialNumber) || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.startDateDetails' | translate}}</span>\r\n        <p>{{(contract.startDateDetail | stDateFormatPipe) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.endDateDetails' | translate}}</span>\r\n        <p>{{(contract.endDateDetail | stDateFormatPipe) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.terminationDateDetails' | translate}}</span>\r\n        <p>{{(contract.terminationDateDetail | stDateFormatPipe) || '-'}}</p>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.DateFormatPipe, name: "stDateFormatPipe" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ServiceContractDetailsViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-service-contract-details-view', template: "<div class=\"group-details row\" style=\"margin-top: 20px;\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.customer' | translate}}</span>\r\n        <p>{{contract.customer || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.customerName' | translate}}</span>\r\n        <p>{{contract.customerName || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'global.description' | translate}}</span>\r\n        <p>{{contract.description || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.startDate' | translate}}</span>\r\n        <p>{{(contract.startDate | stDateFormatPipe) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.endDate' | translate}}</span>\r\n        <p>{{(contract.endDate | stDateFormatPipe) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.terminationDate' | translate}}</span>\r\n        <p>{{(contract.terminationDate | stDateFormatPipe) || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<hr/>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-6\">\r\n        <span>{{'sapAdminInstalledInstrument.serviceType' | translate}}</span>\r\n        <p>{{(contract.serviceType) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-6\">\r\n        <span>{{'sapAdminInstalledInstrument.template' | translate}}</span>\r\n        <p>{{(contract.template) || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-6\">\r\n        <span>{{'sapAdminInstalledInstrument.handledBy' | translate}}</span>\r\n        <p>{{(contract.handledBy) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-6\">\r\n        <span>{{'sapAdminInstalledInstrument.remarks' | translate}}</span>\r\n        <p>{{(contract.remarks) || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<hr/>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.itemCode' | translate}}</span>\r\n        <p>{{(contract.itemCode) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.itemName' | translate}}</span>\r\n        <p>{{(contract.itemName) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.serialNumber' | translate}}</span>\r\n        <p>{{(contract.serialNumber) || '-'}}</p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.startDateDetails' | translate}}</span>\r\n        <p>{{(contract.startDateDetail | stDateFormatPipe) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.endDateDetails' | translate}}</span>\r\n        <p>{{(contract.endDateDetail | stDateFormatPipe) || '-'}}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{'sapAdminInstalledInstrument.terminationDateDetails' | translate}}</span>\r\n        <p>{{(contract.terminationDateDetail | stDateFormatPipe) || '-'}}</p>\r\n    </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { contract: [{
+                type: Input
+            }] } });
+
+class ServiceContractsModalDetailsViewComponent {
+    constructor(data, dialogRef) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+    }
+    ngOnInit() {
+    }
+    close() {
+        this.dialogRef.close();
+    }
+}
+ServiceContractsModalDetailsViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ServiceContractsModalDetailsViewComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+ServiceContractsModalDetailsViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ServiceContractsModalDetailsViewComponent, selector: "app-service-contracts-modal-details-view", ngImport: i0, template: "<h1 mat-dialog-title>{{'sapAdminInstalledInstrument.serviceContract' | translate}}</h1>\r\n<div mat-dialog-content>\r\n    <app-service-contract-details-view\r\n            [contract]=\"data.contract\"\r\n    ></app-service-contract-details-view>\r\n</div>\r\n<div class=\"row justify-content-end\" mat-dialog-actions>\r\n    <button mat-button type=\"button\" (click)=\"close()\">{{'global.close' | translate}}</button>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: i2$2.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"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ServiceContractDetailsViewComponent, selector: "app-service-contract-details-view", inputs: ["contract"] }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ServiceContractsModalDetailsViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-service-contracts-modal-details-view', template: "<h1 mat-dialog-title>{{'sapAdminInstalledInstrument.serviceContract' | translate}}</h1>\r\n<div mat-dialog-content>\r\n    <app-service-contract-details-view\r\n            [contract]=\"data.contract\"\r\n    ></app-service-contract-details-view>\r\n</div>\r\n<div class=\"row justify-content-end\" mat-dialog-actions>\r\n    <button mat-button type=\"button\" (click)=\"close()\">{{'global.close' | translate}}</button>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$1.MatDialogRef }]; } });
+
+class CallDetailsViewComponent {
+    constructor(dialog, sapInstalledInstruments) {
+        this.dialog = dialog;
+        this.sapInstalledInstruments = sapInstalledInstruments;
+        this.activitiesLoading = true;
+        this.activities = [];
+    }
+    ngOnInit() {
+        if (this.call && this.contracts && this.call.contractNo) {
+            this.contractDetails = this.contracts.find((contract) => contract.contractId === this.call.contractNo);
+        }
+        this.loadActivities();
+    }
+    openContractModel() {
+        this.dialog.open(ServiceContractsModalDetailsViewComponent, {
+            data: { contract: this.contractDetails },
+            width: '50%',
+        });
+    }
+    tabChanged(event) {
+    }
+    loadActivities() {
+        this.activities$ = this.sapInstalledInstruments.getActivities(this.call.callId)
+            .pipe(tap(res => {
+            this.activities = res;
+            this.activitiesLoading = false;
+        }));
+    }
+}
+CallDetailsViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallDetailsViewComponent, deps: [{ token: i1$1.MatDialog }, { token: SapInstalledInstrumentsService }], target: i0.ɵɵFactoryTarget.Component });
+CallDetailsViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CallDetailsViewComponent, selector: "app-call-details-view", inputs: { call: "call", contracts: "contracts" }, ngImport: i0, template: "<mat-tab-group (selectedTabChange)=\"tabChanged($event)\">\r\n    <mat-tab label=\"{{'sapAdminInstalledInstrument.callDetails' | translate}}\">\r\n        <div class=\"group-details row\" style=\"margin-top: 20px;\">\r\n            <div class=\"col-xs-12 col-sm-6\">\r\n                <span>{{'sapAdminInstalledInstrument.callId' | translate}}</span>\r\n                <p>{{call.callId || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-6\">\r\n                <span>{{'sapAdminInstalledInstrument.contractNo' | translate}}</span>\r\n                <div class=\"row\">\r\n                    <p>{{call.contractNo || '-'}}</p>\r\n                    <i class=\"material-icons-outlined show-contract\"  *ngIf=\"contractDetails\" (click)=\"openContractModel()\">visibility</i>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <hr/>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.accountNo' | translate}}</span>\r\n                <p>{{call.customer || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.accountName' | translate}}</span>\r\n                <p>{{call.customerName || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'global.contactPerson' | translate}}</span>\r\n                <p>{{call.contactPerson || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'global.phone' | translate}}</span>\r\n                <p>{{call.telephoneNo || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.shipToCode' | translate}}</span>\r\n                <p>{{call.shipToCode || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.shipToAddress' | translate}}</span>\r\n                <p>{{call.shipToAddress || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.billToCode' | translate}}</span>\r\n                <p>{{call.billToCode || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.billToAddress' | translate}}</span>\r\n                <p>{{call.billToAddress || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <hr/>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.subject' | translate}}</span>\r\n                <p>{{call.subject || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.callStatus' | translate}}</span>\r\n                <p>{{call.callStatus || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.createdOn' | translate}}</span>\r\n                <p>{{(call.createdOn | stDateTimeFormatPipe) || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.closedOn' | translate}}</span>\r\n                <p>{{(call.closedOn | stDateTimeFormatPipe) || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <hr/>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-4\">\r\n                <span>{{'sapAdminInstalledInstrument.origin' | translate}}</span>\r\n                <p>{{call.origin || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-4\">\r\n                <span>{{'sapAdminInstalledInstrument.problemType' | translate}}</span>\r\n                <p>{{call.problemType || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-4\">\r\n                <span>{{'sapAdminInstalledInstrument.problemSubtype' | translate}}</span>\r\n                <p>{{call.problemSubtype || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-4\">\r\n                <span>{{'sapAdminInstalledInstrument.callType' | translate}}</span>\r\n                <p>{{call.callType || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-4\">\r\n                <span>{{'sapAdminInstalledInstrument.technician' | translate}}</span>\r\n                <p>{{call.technicianFirstName ? call.technicianFirstName + ' ' + call.technicianLastName : '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-4\">\r\n                <span>{{'sapAdminInstalledInstrument.handledBy' | translate}}</span>\r\n                <p>{{call.handledBy || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <hr/>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-12\">\r\n                <span>{{'global.remarks' | translate}}</span>\r\n                <p>{{call.remarks || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-12\">\r\n                <span>{{'sapAdminInstalledInstrument.resolution' | translate}}</span>\r\n                <p>{{call.resolution || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <hr/>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.startTime' | translate}}</span>\r\n                <p>{{(call.startTime | stDateTimeFormatPipe) || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.endTime' | translate}}</span>\r\n                <p>{{(call.endTime | stDateTimeFormatPipe) || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.duration' | translate}}</span>\r\n                <p>{{call.duration || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.travelTime' | translate}}</span>\r\n                <p>{{call.travelTime || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-12\">\r\n                <span>{{'sapAdminInstalledInstrument.internalComments' | translate}}</span>\r\n                <p>{{call.internalComments || '-'}}</p>\r\n            </div>\r\n        </div>\r\n    </mat-tab>\r\n\r\n    <mat-tab label=\"{{'sapAdminInstalledInstrument.activities' | translate}} ({{activities.length || 0}})\">\r\n        <ng-container *ngIf=\"activities$ | async\">\r\n            <app-activities-list-view\r\n                    [activities]=\"activities\"\r\n            ></app-activities-list-view>\r\n        </ng-container>\r\n    </mat-tab>\r\n</mat-tab-group>\r\n\r\n\r\n\r\n\r\n", styles: [".show-contract{margin-left:5px;font-size:22px;opacity:.8;cursor:pointer;color:#1976d2}.show-contract:hover{opacity:1}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: ActivitiesListViewComponent, selector: "app-activities-list-view", inputs: ["activities"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallDetailsViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-call-details-view', template: "<mat-tab-group (selectedTabChange)=\"tabChanged($event)\">\r\n    <mat-tab label=\"{{'sapAdminInstalledInstrument.callDetails' | translate}}\">\r\n        <div class=\"group-details row\" style=\"margin-top: 20px;\">\r\n            <div class=\"col-xs-12 col-sm-6\">\r\n                <span>{{'sapAdminInstalledInstrument.callId' | translate}}</span>\r\n                <p>{{call.callId || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-6\">\r\n                <span>{{'sapAdminInstalledInstrument.contractNo' | translate}}</span>\r\n                <div class=\"row\">\r\n                    <p>{{call.contractNo || '-'}}</p>\r\n                    <i class=\"material-icons-outlined show-contract\"  *ngIf=\"contractDetails\" (click)=\"openContractModel()\">visibility</i>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <hr/>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.accountNo' | translate}}</span>\r\n                <p>{{call.customer || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.accountName' | translate}}</span>\r\n                <p>{{call.customerName || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'global.contactPerson' | translate}}</span>\r\n                <p>{{call.contactPerson || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'global.phone' | translate}}</span>\r\n                <p>{{call.telephoneNo || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.shipToCode' | translate}}</span>\r\n                <p>{{call.shipToCode || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.shipToAddress' | translate}}</span>\r\n                <p>{{call.shipToAddress || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.billToCode' | translate}}</span>\r\n                <p>{{call.billToCode || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.billToAddress' | translate}}</span>\r\n                <p>{{call.billToAddress || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <hr/>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.subject' | translate}}</span>\r\n                <p>{{call.subject || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.callStatus' | translate}}</span>\r\n                <p>{{call.callStatus || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.createdOn' | translate}}</span>\r\n                <p>{{(call.createdOn | stDateTimeFormatPipe) || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.closedOn' | translate}}</span>\r\n                <p>{{(call.closedOn | stDateTimeFormatPipe) || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <hr/>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-4\">\r\n                <span>{{'sapAdminInstalledInstrument.origin' | translate}}</span>\r\n                <p>{{call.origin || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-4\">\r\n                <span>{{'sapAdminInstalledInstrument.problemType' | translate}}</span>\r\n                <p>{{call.problemType || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-4\">\r\n                <span>{{'sapAdminInstalledInstrument.problemSubtype' | translate}}</span>\r\n                <p>{{call.problemSubtype || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-4\">\r\n                <span>{{'sapAdminInstalledInstrument.callType' | translate}}</span>\r\n                <p>{{call.callType || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-4\">\r\n                <span>{{'sapAdminInstalledInstrument.technician' | translate}}</span>\r\n                <p>{{call.technicianFirstName ? call.technicianFirstName + ' ' + call.technicianLastName : '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-4\">\r\n                <span>{{'sapAdminInstalledInstrument.handledBy' | translate}}</span>\r\n                <p>{{call.handledBy || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <hr/>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-12\">\r\n                <span>{{'global.remarks' | translate}}</span>\r\n                <p>{{call.remarks || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-12\">\r\n                <span>{{'sapAdminInstalledInstrument.resolution' | translate}}</span>\r\n                <p>{{call.resolution || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <hr/>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.startTime' | translate}}</span>\r\n                <p>{{(call.startTime | stDateTimeFormatPipe) || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.endTime' | translate}}</span>\r\n                <p>{{(call.endTime | stDateTimeFormatPipe) || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.duration' | translate}}</span>\r\n                <p>{{call.duration || '-'}}</p>\r\n            </div>\r\n            <div class=\"col-xs-12 col-sm-3\">\r\n                <span>{{'sapAdminInstalledInstrument.travelTime' | translate}}</span>\r\n                <p>{{call.travelTime || '-'}}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"group-details row\">\r\n            <div class=\"col-xs-12 col-sm-12\">\r\n                <span>{{'sapAdminInstalledInstrument.internalComments' | translate}}</span>\r\n                <p>{{call.internalComments || '-'}}</p>\r\n            </div>\r\n        </div>\r\n    </mat-tab>\r\n\r\n    <mat-tab label=\"{{'sapAdminInstalledInstrument.activities' | translate}} ({{activities.length || 0}})\">\r\n        <ng-container *ngIf=\"activities$ | async\">\r\n            <app-activities-list-view\r\n                    [activities]=\"activities\"\r\n            ></app-activities-list-view>\r\n        </ng-container>\r\n    </mat-tab>\r\n</mat-tab-group>\r\n\r\n\r\n\r\n\r\n", styles: [".show-contract{margin-left:5px;font-size:22px;opacity:.8;cursor:pointer;color:#1976d2}.show-contract:hover{opacity:1}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }, { type: SapInstalledInstrumentsService }]; }, propDecorators: { call: [{
+                type: Input
+            }], contracts: [{
+                type: Input
+            }] } });
+
+class CallsListViewComponent {
+    constructor() {
+        this.class = 'display-flex-component';
+        this.columnsToDisplay = ['callId', 'callStatus', 'callType', 'problemType', 'customer', 'customerName', 'handledBy', 'createdOn', 'closedOn'];
+    }
+    ngOnInit() {
+        this.setTable();
+    }
+    ngAfterViewInit() {
+        this.paginator.pageSize = 10;
+        this.tableSource.paginator = this.paginator;
+    }
+    setTable() {
+        this.tableSource = new MatTableDataSource(this.calls);
+    }
+}
+CallsListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallsListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CallsListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CallsListViewComponent, selector: "app-calls-list-view", inputs: { calls: "calls", contracts: "contracts" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"calls-list-view\">\r\n  <table mat-table [dataSource]=\"tableSource\" [multiTemplateDataRows]=\"true\">\r\n    <ng-container matColumnDef=\"callId\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'global.callId' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.callId }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"callStatus\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'global.status' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.callStatus }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"callType\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.callType' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.callType }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"problemType\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.problemType' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.problemType }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"customer\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.accountNo' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.customer }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"customerName\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.accountName' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.customerName }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"handledBy\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.handledBy' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.handledBy }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"createdOn\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.createdOn' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{ element.createdOn | stDateTimeFormatPipe }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"closedOn\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.closedOn' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{ element.closedOn | stDateTimeFormatPipe }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"expandedDetail\">\r\n      <td\r\n        mat-cell\r\n        *matCellDef=\"let element\"\r\n        [attr.colspan]=\"columnsToDisplay.length\"\r\n      >\r\n        <div\r\n          class=\"row-detail\"\r\n          [@detailExpand]=\"\r\n            element == expandedElement ? 'expanded' : 'collapsed'\r\n          \"\r\n        >\r\n          <app-call-details-view\r\n            *ngIf=\"element == expandedElement\"\r\n            [call]=\"element\"\r\n            [contracts]=\"contracts\"\r\n          ></app-call-details-view>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let element; columns: columnsToDisplay\"\r\n      class=\"details-element-row\"\r\n      [class.details-expanded-row]=\"expandedElement === element\"\r\n      (click)=\"expandedElement = expandedElement === element ? null : element\"\r\n    ></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n      class=\"detail-row\"\r\n    ></tr>\r\n  </table>\r\n  <mat-paginator\r\n    [pageSizeOptions]=\"[10, 20]\"\r\n    showFirstLastButtons\r\n  ></mat-paginator>\r\n</div>\r\n", styles: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%}table::ng-deep thead tr{background-color:#fff9c4}table::ng-deep thead tr th{border-color:#fdd835}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr:hover{background-color:#a5d6a7}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent}table.no-hover::ng-deep tbody tr:hover{background-color:transparent}table.admin-table::ng-deep .actions-cell{width:100px}.calls-list-view{width:100%}table::ng-deep tbody>tr:not(.details-expanded-row):hover{background-color:#f5f5f5!important}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent!important;cursor:default}table::ng-deep tbody>tr.detail-row{height:0}table::ng-deep tbody>tr.detail-row .row-detail{overflow:hidden;max-height:inherit}table::ng-deep tbody>tr.detail-row .row-detail ul{margin:10px 0}table::ng-deep tbody>tr.details-element-row:not(.details-expanded-row):hover{background:whitesmoke}table::ng-deep tbody>tr.details-element-row td{border-bottom-width:0}table::ng-deep tbody>tr.details-expanded-row{background-color:#c8e6c9;border-left:3px solid #c8e6c9;border-right:3px solid #c8e6c9}table::ng-deep tbody>tr.details-expanded-row+tr{border-left:3px solid #c8e6c9;border-right:3px solid #c8e6c9;border-bottom:3px solid #c8e6c9}table::ng-deep tbody>tr .mat-column-expanded{width:50px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: CallDetailsViewComponent, selector: "app-call-details-view", inputs: ["call", "contracts"] }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], animations: [
+        trigger('detailExpand', [
+            state('collapsed', style({ height: '0px', minHeight: '0' })),
+            state('expanded', style({ height: '*' })),
+            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+        ]),
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallsListViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-calls-list-view', animations: [
+                        trigger('detailExpand', [
+                            state('collapsed', style({ height: '0px', minHeight: '0' })),
+                            state('expanded', style({ height: '*' })),
+                            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+                        ]),
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"calls-list-view\">\r\n  <table mat-table [dataSource]=\"tableSource\" [multiTemplateDataRows]=\"true\">\r\n    <ng-container matColumnDef=\"callId\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'global.callId' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.callId }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"callStatus\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'global.status' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.callStatus }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"callType\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.callType' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.callType }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"problemType\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.problemType' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.problemType }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"customer\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.accountNo' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.customer }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"customerName\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.accountName' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.customerName }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"handledBy\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.handledBy' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.handledBy }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"createdOn\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.createdOn' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{ element.createdOn | stDateTimeFormatPipe }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"closedOn\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.closedOn' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{ element.closedOn | stDateTimeFormatPipe }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"expandedDetail\">\r\n      <td\r\n        mat-cell\r\n        *matCellDef=\"let element\"\r\n        [attr.colspan]=\"columnsToDisplay.length\"\r\n      >\r\n        <div\r\n          class=\"row-detail\"\r\n          [@detailExpand]=\"\r\n            element == expandedElement ? 'expanded' : 'collapsed'\r\n          \"\r\n        >\r\n          <app-call-details-view\r\n            *ngIf=\"element == expandedElement\"\r\n            [call]=\"element\"\r\n            [contracts]=\"contracts\"\r\n          ></app-call-details-view>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let element; columns: columnsToDisplay\"\r\n      class=\"details-element-row\"\r\n      [class.details-expanded-row]=\"expandedElement === element\"\r\n      (click)=\"expandedElement = expandedElement === element ? null : element\"\r\n    ></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n      class=\"detail-row\"\r\n    ></tr>\r\n  </table>\r\n  <mat-paginator\r\n    [pageSizeOptions]=\"[10, 20]\"\r\n    showFirstLastButtons\r\n  ></mat-paginator>\r\n</div>\r\n", styles: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%}table::ng-deep thead tr{background-color:#fff9c4}table::ng-deep thead tr th{border-color:#fdd835}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr:hover{background-color:#a5d6a7}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent}table.no-hover::ng-deep tbody tr:hover{background-color:transparent}table.admin-table::ng-deep .actions-cell{width:100px}.calls-list-view{width:100%}table::ng-deep tbody>tr:not(.details-expanded-row):hover{background-color:#f5f5f5!important}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent!important;cursor:default}table::ng-deep tbody>tr.detail-row{height:0}table::ng-deep tbody>tr.detail-row .row-detail{overflow:hidden;max-height:inherit}table::ng-deep tbody>tr.detail-row .row-detail ul{margin:10px 0}table::ng-deep tbody>tr.details-element-row:not(.details-expanded-row):hover{background:whitesmoke}table::ng-deep tbody>tr.details-element-row td{border-bottom-width:0}table::ng-deep tbody>tr.details-expanded-row{background-color:#c8e6c9;border-left:3px solid #c8e6c9;border-right:3px solid #c8e6c9}table::ng-deep tbody>tr.details-expanded-row+tr{border-left:3px solid #c8e6c9;border-right:3px solid #c8e6c9;border-bottom:3px solid #c8e6c9}table::ng-deep tbody>tr .mat-column-expanded{width:50px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator]
+            }], calls: [{
+                type: Input
+            }], contracts: [{
+                type: Input
+            }] } });
+
+class DataDetailsViewComponent {
+    constructor() {
+    }
+    ngOnInit() {
+    }
+}
+DataDetailsViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DataDetailsViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataDetailsViewComponent, selector: "app-data-details-view", inputs: { installedInstrument: "installedInstrument" }, ngImport: i0, template: "<ng-container *ngIf=\"installedInstrument\">\r\n    <div class=\"group-details row\">\r\n<!--        <div class=\"col-xs-12 col-sm-4\">-->\r\n<!--            <span>{{'sapAdminInstalledInstrument.equipmentCardNo' | translate}}</span>-->\r\n<!--            <p>{{installedInstrument.equipmentCardNo || '-'}}</p>-->\r\n<!--        </div>-->\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.instrumentNo' | translate}}</span>\r\n            <p>{{installedInstrument.instrumentNo || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.instrumentDescription' | translate}}</span>\r\n            <p>{{installedInstrument.instrumentDescription || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.serialNumber' | translate}}</span>\r\n            <p>{{installedInstrument.serialNumber || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.customerNo' | translate}}</span>\r\n            <p>{{installedInstrument.customerNo || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.businessPartnerName' | translate}}</span>\r\n            <p>{{installedInstrument.businessPartnerName || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.contactPerson' | translate}}</span>\r\n            <p>{{installedInstrument.contactPerson || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <hr/>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.status' | translate}}</span>\r\n            <p>{{installedInstrument.status || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.technicianName' | translate}}</span>\r\n            <p>{{installedInstrument.technicianFirstName ? installedInstrument.technicianFirstName + ' ' + installedInstrument.technicianLastName : '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.territory' | translate}}</span>\r\n            <p>{{installedInstrument.territory || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.installationDate' | translate}}</span>\r\n            <p>{{(installedInstrument.installationDate | stDateFormatPipe) || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.endUserName' | translate}}</span>\r\n            <p>{{installedInstrument.endUserName || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.endUserCode' | translate}}</span>\r\n            <p>{{installedInstrument.endUserCode || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <hr/>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'global.addressName' | translate}}</span>\r\n            <p>{{installedInstrument.addressName || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'global.street' | translate}}</span>\r\n            <p>{{installedInstrument.street || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'global.streetNo' | translate}}</span>\r\n            <p>{{installedInstrument.streetNo || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'global.block' | translate}}</span>\r\n            <p>{{installedInstrument.block || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.building' | translate}}</span>\r\n            <p>{{installedInstrument.building || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.city' | translate}}</span>\r\n            <p>{{installedInstrument.city || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.county' | translate}}</span>\r\n            <p>{{installedInstrument.county || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.state' | translate}}</span>\r\n            <p>{{installedInstrument.state || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.zipCode' | translate}}</span>\r\n            <p>{{installedInstrument.zipCode || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.country' | translate}}</span>\r\n            <p>{{installedInstrument.country || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <hr/>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.softwareVersion' | translate}}</span>\r\n            <p>{{installedInstrument.softwareVersion || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.pcSoftwareVersion' | translate}}</span>\r\n            <p>{{installedInstrument.pcSoftwareVersion || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.vessels' | translate}}</span>\r\n            <p>{{installedInstrument.vessels || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.relatedItem1' | translate}}</span>\r\n            <p>{{installedInstrument.relatedItem1 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.relatedItem2' | translate}}</span>\r\n            <p>{{installedInstrument.relatedItem2 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.relatedItem3' | translate}}</span>\r\n            <p>{{installedInstrument.relatedItem3 || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <hr/>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit1' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit1 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit2' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit2 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit3' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit3 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit4' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit4 || '-'}}</p>\r\n        </div>\r\n    </div>\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit5' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit5 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit6' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit6 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit7' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit7 || '-'}}</p>\r\n        </div>\r\n    </div>\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit8' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit8 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit9' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit9 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit10' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit10 || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <hr/>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.numberOfAnalysis' | translate}}</span>\r\n            <p>{{installedInstrument.numberOfAnalysis || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.application1' | translate}}</span>\r\n            <p>{{installedInstrument.application1 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.application2' | translate}}</span>\r\n            <p>{{installedInstrument.application2 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.application3' | translate}}</span>\r\n            <p>{{installedInstrument.application3 || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.application4' | translate}}</span>\r\n            <p>{{installedInstrument.application4 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.application5' | translate}}</span>\r\n            <p>{{installedInstrument.application5 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.application6' | translate}}</span>\r\n            <p>{{installedInstrument.application6 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.application7' | translate}}</span>\r\n            <p>{{installedInstrument.application7 || '-'}}</p>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.DateFormatPipe, name: "stDateFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataDetailsViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-data-details-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"installedInstrument\">\r\n    <div class=\"group-details row\">\r\n<!--        <div class=\"col-xs-12 col-sm-4\">-->\r\n<!--            <span>{{'sapAdminInstalledInstrument.equipmentCardNo' | translate}}</span>-->\r\n<!--            <p>{{installedInstrument.equipmentCardNo || '-'}}</p>-->\r\n<!--        </div>-->\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.instrumentNo' | translate}}</span>\r\n            <p>{{installedInstrument.instrumentNo || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.instrumentDescription' | translate}}</span>\r\n            <p>{{installedInstrument.instrumentDescription || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.serialNumber' | translate}}</span>\r\n            <p>{{installedInstrument.serialNumber || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.customerNo' | translate}}</span>\r\n            <p>{{installedInstrument.customerNo || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.businessPartnerName' | translate}}</span>\r\n            <p>{{installedInstrument.businessPartnerName || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.contactPerson' | translate}}</span>\r\n            <p>{{installedInstrument.contactPerson || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <hr/>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.status' | translate}}</span>\r\n            <p>{{installedInstrument.status || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.technicianName' | translate}}</span>\r\n            <p>{{installedInstrument.technicianFirstName ? installedInstrument.technicianFirstName + ' ' + installedInstrument.technicianLastName : '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.territory' | translate}}</span>\r\n            <p>{{installedInstrument.territory || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.installationDate' | translate}}</span>\r\n            <p>{{(installedInstrument.installationDate | stDateFormatPipe) || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.endUserName' | translate}}</span>\r\n            <p>{{installedInstrument.endUserName || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.endUserCode' | translate}}</span>\r\n            <p>{{installedInstrument.endUserCode || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <hr/>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'global.addressName' | translate}}</span>\r\n            <p>{{installedInstrument.addressName || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'global.street' | translate}}</span>\r\n            <p>{{installedInstrument.street || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'global.streetNo' | translate}}</span>\r\n            <p>{{installedInstrument.streetNo || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'global.block' | translate}}</span>\r\n            <p>{{installedInstrument.block || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.building' | translate}}</span>\r\n            <p>{{installedInstrument.building || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.city' | translate}}</span>\r\n            <p>{{installedInstrument.city || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.county' | translate}}</span>\r\n            <p>{{installedInstrument.county || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.state' | translate}}</span>\r\n            <p>{{installedInstrument.state || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.zipCode' | translate}}</span>\r\n            <p>{{installedInstrument.zipCode || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'global.country' | translate}}</span>\r\n            <p>{{installedInstrument.country || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <hr/>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.softwareVersion' | translate}}</span>\r\n            <p>{{installedInstrument.softwareVersion || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.pcSoftwareVersion' | translate}}</span>\r\n            <p>{{installedInstrument.pcSoftwareVersion || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.vessels' | translate}}</span>\r\n            <p>{{installedInstrument.vessels || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.relatedItem1' | translate}}</span>\r\n            <p>{{installedInstrument.relatedItem1 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.relatedItem2' | translate}}</span>\r\n            <p>{{installedInstrument.relatedItem2 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.relatedItem3' | translate}}</span>\r\n            <p>{{installedInstrument.relatedItem3 || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <hr/>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit1' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit1 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit2' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit2 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit3' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit3 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit4' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit4 || '-'}}</p>\r\n        </div>\r\n    </div>\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit5' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit5 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit6' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit6 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit7' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit7 || '-'}}</p>\r\n        </div>\r\n    </div>\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit8' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit8 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit9' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit9 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-4\">\r\n            <span>{{'sapAdminInstalledInstrument.majorUpgradeKit10' | translate}}</span>\r\n            <p>{{installedInstrument.majorUpgradeKit10 || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <hr/>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.numberOfAnalysis' | translate}}</span>\r\n            <p>{{installedInstrument.numberOfAnalysis || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.application1' | translate}}</span>\r\n            <p>{{installedInstrument.application1 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.application2' | translate}}</span>\r\n            <p>{{installedInstrument.application2 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.application3' | translate}}</span>\r\n            <p>{{installedInstrument.application3 || '-'}}</p>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.application4' | translate}}</span>\r\n            <p>{{installedInstrument.application4 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.application5' | translate}}</span>\r\n            <p>{{installedInstrument.application5 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.application6' | translate}}</span>\r\n            <p>{{installedInstrument.application6 || '-'}}</p>\r\n        </div>\r\n        <div class=\"col-xs-12 col-sm-3\">\r\n            <span>{{'sapAdminInstalledInstrument.application7' | translate}}</span>\r\n            <p>{{installedInstrument.application7 || '-'}}</p>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { installedInstrument: [{
+                type: Input
+            }] } });
+
+class ServiceContractsListViewComponent {
+    constructor() {
+        this.class = 'display-flex-component';
+        this.columnsToDisplay = ['contractId', 'customer', 'customerName', 'itemCode', 'itemName', 'serialNumber', 'serviceType', 'startDate', 'terminationDate'];
+    }
+    ngOnInit() {
+        this.setTable();
+    }
+    ngAfterViewInit() {
+        this.paginator.pageSize = 10;
+        this.tableSource.paginator = this.paginator;
+    }
+    setTable() {
+        this.tableSource = new MatTableDataSource(this.contracts);
+    }
+}
+ServiceContractsListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ServiceContractsListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ServiceContractsListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ServiceContractsListViewComponent, selector: "app-service-contracts-list-view", inputs: { contracts: "contracts" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"service-contracts-list-view\">\r\n  <table mat-table [dataSource]=\"tableSource\" [multiTemplateDataRows]=\"true\">\r\n    <ng-container matColumnDef=\"contractId\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.contractId' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.contractId }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"customer\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.customer' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.customer }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"customerName\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.customerName' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.customerName }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"itemCode\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.itemCode' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.itemCode }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"itemName\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.itemName' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.itemName }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"serialNumber\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.serialNumber' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.serialNumber }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"serviceType\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.serviceType' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.serviceType }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"startDate\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.startDate' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{ element.startDate | stDateFormatPipe }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"terminationDate\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.endDate' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{ element.endDateDetail | stDateFormatPipe }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"expandedDetail\">\r\n      <td\r\n        mat-cell\r\n        *matCellDef=\"let element\"\r\n        [attr.colspan]=\"columnsToDisplay.length\"\r\n      >\r\n        <div\r\n          class=\"row-detail\"\r\n          [@detailExpand]=\"\r\n            element == expandedElement ? 'expanded' : 'collapsed'\r\n          \"\r\n        >\r\n          <app-service-contract-details-view\r\n            [contract]=\"element\"\r\n          ></app-service-contract-details-view>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let element; columns: columnsToDisplay\"\r\n      class=\"details-element-row\"\r\n      [class.details-expanded-row]=\"expandedElement === element\"\r\n      (click)=\"expandedElement = expandedElement === element ? null : element\"\r\n    ></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n      class=\"detail-row\"\r\n    ></tr>\r\n  </table>\r\n  <mat-paginator\r\n    [pageSizeOptions]=\"[10, 20]\"\r\n    showFirstLastButtons\r\n  ></mat-paginator>\r\n</div>\r\n", styles: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%}table::ng-deep thead tr{background-color:#fff9c4}table::ng-deep thead tr th{border-color:#fdd835}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr:hover{background-color:#a5d6a7}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent}table.no-hover::ng-deep tbody tr:hover{background-color:transparent}table.admin-table::ng-deep .actions-cell{width:100px}.service-contracts-list-view{width:100%}table::ng-deep tbody>tr:not(.details-expanded-row):hover{background-color:#f5f5f5!important}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent!important;cursor:default}table::ng-deep tbody>tr.detail-row{height:0}table::ng-deep tbody>tr.detail-row .row-detail{overflow:hidden;max-height:inherit}table::ng-deep tbody>tr.detail-row .row-detail ul{margin:10px 0}table::ng-deep tbody>tr.details-element-row:not(.details-expanded-row):hover{background:whitesmoke}table::ng-deep tbody>tr.details-element-row td{border-bottom-width:0}table::ng-deep tbody>tr.details-expanded-row{background-color:#c8e6c9;border-left:3px solid #c8e6c9;border-right:3px solid #c8e6c9}table::ng-deep tbody>tr.details-expanded-row+tr{border-left:3px solid #c8e6c9;border-right:3px solid #c8e6c9;border-bottom:3px solid #c8e6c9}table::ng-deep tbody>tr .mat-column-expanded{width:50px}\n"], dependencies: [{ kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ServiceContractDetailsViewComponent, selector: "app-service-contract-details-view", inputs: ["contract"] }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.DateFormatPipe, name: "stDateFormatPipe" }], animations: [
+        trigger('detailExpand', [
+            state('collapsed', style({ height: '0px', minHeight: '0' })),
+            state('expanded', style({ height: '*' })),
+            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+        ]),
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ServiceContractsListViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-service-contracts-list-view', animations: [
+                        trigger('detailExpand', [
+                            state('collapsed', style({ height: '0px', minHeight: '0' })),
+                            state('expanded', style({ height: '*' })),
+                            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+                        ]),
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"service-contracts-list-view\">\r\n  <table mat-table [dataSource]=\"tableSource\" [multiTemplateDataRows]=\"true\">\r\n    <ng-container matColumnDef=\"contractId\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.contractId' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.contractId }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"customer\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.customer' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.customer }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"customerName\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.customerName' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.customerName }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"itemCode\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.itemCode' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.itemCode }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"itemName\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.itemName' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.itemName }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"serialNumber\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.serialNumber' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.serialNumber }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"serviceType\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.serviceType' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.serviceType }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"startDate\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.startDate' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{ element.startDate | stDateFormatPipe }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"terminationDate\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.endDate' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        {{ element.endDateDetail | stDateFormatPipe }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"expandedDetail\">\r\n      <td\r\n        mat-cell\r\n        *matCellDef=\"let element\"\r\n        [attr.colspan]=\"columnsToDisplay.length\"\r\n      >\r\n        <div\r\n          class=\"row-detail\"\r\n          [@detailExpand]=\"\r\n            element == expandedElement ? 'expanded' : 'collapsed'\r\n          \"\r\n        >\r\n          <app-service-contract-details-view\r\n            [contract]=\"element\"\r\n          ></app-service-contract-details-view>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let element; columns: columnsToDisplay\"\r\n      class=\"details-element-row\"\r\n      [class.details-expanded-row]=\"expandedElement === element\"\r\n      (click)=\"expandedElement = expandedElement === element ? null : element\"\r\n    ></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n      class=\"detail-row\"\r\n    ></tr>\r\n  </table>\r\n  <mat-paginator\r\n    [pageSizeOptions]=\"[10, 20]\"\r\n    showFirstLastButtons\r\n  ></mat-paginator>\r\n</div>\r\n", styles: [".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear i{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%}table::ng-deep thead tr{background-color:#fff9c4}table::ng-deep thead tr th{border-color:#fdd835}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr:hover{background-color:#a5d6a7}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a i{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent}table.no-hover::ng-deep tbody tr:hover{background-color:transparent}table.admin-table::ng-deep .actions-cell{width:100px}.service-contracts-list-view{width:100%}table::ng-deep tbody>tr:not(.details-expanded-row):hover{background-color:#f5f5f5!important}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent!important;cursor:default}table::ng-deep tbody>tr.detail-row{height:0}table::ng-deep tbody>tr.detail-row .row-detail{overflow:hidden;max-height:inherit}table::ng-deep tbody>tr.detail-row .row-detail ul{margin:10px 0}table::ng-deep tbody>tr.details-element-row:not(.details-expanded-row):hover{background:whitesmoke}table::ng-deep tbody>tr.details-element-row td{border-bottom-width:0}table::ng-deep tbody>tr.details-expanded-row{background-color:#c8e6c9;border-left:3px solid #c8e6c9;border-right:3px solid #c8e6c9}table::ng-deep tbody>tr.details-expanded-row+tr{border-left:3px solid #c8e6c9;border-right:3px solid #c8e6c9;border-bottom:3px solid #c8e6c9}table::ng-deep tbody>tr .mat-column-expanded{width:50px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator]
+            }], contracts: [{
+                type: Input
+            }] } });
+
+class SapInstalledInstrumentDetailsComponent {
+    constructor(sapInstalledInstrumentService, activatedRoute, location) {
+        this.sapInstalledInstrumentService = sapInstalledInstrumentService;
+        this.activatedRoute = activatedRoute;
+        this.location = location;
+        this.class = 'display-flex-component';
+        this.tabActive = 0;
+        this.calls = [];
+        this.serviceContracts = [];
+    }
+    ngOnInit() {
+        this.id = this.activatedRoute.snapshot.params['id'];
+        this.loadTabsData();
+    }
+    tabChanged(event) {
+        this.tabActive = event.index;
+    }
+    goBack() {
+        this.location.back();
+    }
+    loadTabsData() {
+        this.installedInstrument$ = this.sapInstalledInstrumentService
+            .getInstalledInstrument(this.id)
+            .pipe(tap(installedInstrument => {
+            this.installedInstrument = installedInstrument;
+        }));
+        this.calls$ = this.sapInstalledInstrumentService
+            .getCalls(this.id)
+            .pipe(tap(res => (this.calls = res)));
+        this.serviceContracts$ = this.sapInstalledInstrumentService
+            .getContracts(this.id)
+            .pipe(tap(res => (this.serviceContracts = res)));
+    }
+}
+SapInstalledInstrumentDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SapInstalledInstrumentDetailsComponent, deps: [{ token: SapInstalledInstrumentsService }, { token: i2.ActivatedRoute }, { token: i3.Location }], target: i0.ɵɵFactoryTarget.Component });
+SapInstalledInstrumentDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SapInstalledInstrumentDetailsComponent, selector: "app-sap-installed-instrument-details", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"container-fluid no-cut\">\r\n    <div class=\"card\">\r\n        <div class=\"card-header card-header-warning\">\r\n            <h3 class=\"card-title\">{{'sapAdminInstalledInstrument.titleInstalledInstrumentDetails' | translate}}</h3>\r\n        </div>\r\n\r\n        <div class=\"card-body\">\r\n            <button mat-icon-button class=\"back-link\" (click)=\"goBack()\">\r\n                <span class=\"material-icons\">keyboard_backspace</span>\r\n            </button>\r\n\r\n            <mat-tab-group (selectedTabChange)=\"tabChanged($event)\">\r\n                <mat-tab label=\"{{'sapAdminInstalledInstrument.instrumentDetails' | translate}}\">\r\n                    <ng-container *ngIf=\"installedInstrument$ | async\">\r\n                        <app-data-details-view\r\n                                *ngIf=\"tabActive === 0\"\r\n                                [installedInstrument]=\"installedInstrument\"\r\n                        ></app-data-details-view>\r\n                    </ng-container>\r\n                </mat-tab>\r\n                <mat-tab label=\"{{'sapAdminInstalledInstrument.calls' | translate}} ({{calls.length || 0}})\">\r\n                    <ng-container *ngIf=\"calls$ | async\">\r\n                        <app-calls-list-view\r\n                                *ngIf=\"tabActive === 1\"\r\n                                [calls]=\"calls\"\r\n                                [contracts]=\"serviceContracts\"\r\n                        ></app-calls-list-view>\r\n                    </ng-container>\r\n                </mat-tab>\r\n                <mat-tab label=\"{{'sapAdminInstalledInstrument.serviceContracts' | translate}} ({{serviceContracts.length || 0}})\">\r\n                    <ng-container *ngIf=\"serviceContracts$ | async\">\r\n                        <app-service-contracts-list-view\r\n                                *ngIf=\"tabActive === 2\"\r\n                                [contracts]=\"serviceContracts\"\r\n                        ></app-service-contracts-list-view>\r\n                    </ng-container>\r\n                </mat-tab>\r\n            </mat-tab-group>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["mat-tab-group::ng-deep mat-tab-body{padding:10px 0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.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"] }, { kind: "component", type: i4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: DataDetailsViewComponent, selector: "app-data-details-view", inputs: ["installedInstrument"] }, { kind: "component", type: CallsListViewComponent, selector: "app-calls-list-view", inputs: ["calls", "contracts"] }, { kind: "component", type: ServiceContractsListViewComponent, selector: "app-service-contracts-list-view", inputs: ["contracts"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SapInstalledInstrumentDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sap-installed-instrument-details', template: "<div class=\"container-fluid no-cut\">\r\n    <div class=\"card\">\r\n        <div class=\"card-header card-header-warning\">\r\n            <h3 class=\"card-title\">{{'sapAdminInstalledInstrument.titleInstalledInstrumentDetails' | translate}}</h3>\r\n        </div>\r\n\r\n        <div class=\"card-body\">\r\n            <button mat-icon-button class=\"back-link\" (click)=\"goBack()\">\r\n                <span class=\"material-icons\">keyboard_backspace</span>\r\n            </button>\r\n\r\n            <mat-tab-group (selectedTabChange)=\"tabChanged($event)\">\r\n                <mat-tab label=\"{{'sapAdminInstalledInstrument.instrumentDetails' | translate}}\">\r\n                    <ng-container *ngIf=\"installedInstrument$ | async\">\r\n                        <app-data-details-view\r\n                                *ngIf=\"tabActive === 0\"\r\n                                [installedInstrument]=\"installedInstrument\"\r\n                        ></app-data-details-view>\r\n                    </ng-container>\r\n                </mat-tab>\r\n                <mat-tab label=\"{{'sapAdminInstalledInstrument.calls' | translate}} ({{calls.length || 0}})\">\r\n                    <ng-container *ngIf=\"calls$ | async\">\r\n                        <app-calls-list-view\r\n                                *ngIf=\"tabActive === 1\"\r\n                                [calls]=\"calls\"\r\n                                [contracts]=\"serviceContracts\"\r\n                        ></app-calls-list-view>\r\n                    </ng-container>\r\n                </mat-tab>\r\n                <mat-tab label=\"{{'sapAdminInstalledInstrument.serviceContracts' | translate}} ({{serviceContracts.length || 0}})\">\r\n                    <ng-container *ngIf=\"serviceContracts$ | async\">\r\n                        <app-service-contracts-list-view\r\n                                *ngIf=\"tabActive === 2\"\r\n                                [contracts]=\"serviceContracts\"\r\n                        ></app-service-contracts-list-view>\r\n                    </ng-container>\r\n                </mat-tab>\r\n            </mat-tab-group>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["mat-tab-group::ng-deep mat-tab-body{padding:10px 0}\n"] }]
+        }], ctorParameters: function () { return [{ type: SapInstalledInstrumentsService }, { type: i2.ActivatedRoute }, { type: i3.Location }]; }, propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+const StSapInstalledInstrumentsRoutingModule = [
+    { path: '', component: SapInstalledInstrumentListComponent },
+    { path: 'details/:id', component: SapInstalledInstrumentDetailsComponent }
+];
+
+class StSapInstalledInstrumentsModule {
+    static forRoot(config = {}) {
+        return {
+            ngModule: StSapInstalledInstrumentsModule,
+            providers: [
+                {
+                    provide: HTTP_INTERCEPTORS,
+                    useClass: config.errorInterceptor,
+                    multi: true,
+                },
+                {
+                    provide: HTTP_INTERCEPTORS,
+                    useClass: config.apiInterceptor,
+                    multi: true,
+                },
+            ],
+        };
+    }
+}
+StSapInstalledInstrumentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StSapInstalledInstrumentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+StSapInstalledInstrumentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: StSapInstalledInstrumentsModule, declarations: [SapInstalledInstrumentListComponent,
+        SapInstalledInstrumentDetailsComponent,
+        DataDetailsViewComponent,
+        CallsListViewComponent,
+        ServiceContractsListViewComponent,
+        ServiceContractDetailsViewComponent,
+        CallDetailsViewComponent,
+        ServiceContractsModalDetailsViewComponent,
+        ActivitiesListViewComponent,
+        ActivityDetailsViewComponent,
+        SapInstalledInstrumentListSearchComponent,
+        SapInstalledInstrumentListTableComponent], imports: [CommonModule, i2.RouterModule, MatButtonModule,
+        MatRippleModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        MatTooltipModule,
+        MatMenuModule,
+        MatIconModule,
+        MatChipsModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatListModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        MatDialogModule,
+        MatTabsModule,
+        MatSnackBarModule,
+        MatCheckboxModule,
+        MatAutocompleteModule,
+        MatAutocompleteModule,
+        MatSortModule, i5$1.TranslateModule, StDateFormatModule,
+        ReactiveFormsModule,
+        NgxStMultiselectAutocompleteModule,
+        StSearchSelectsModule] });
+StSapInstalledInstrumentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StSapInstalledInstrumentsModule, providers: [SapInstalledInstrumentsService], imports: [CommonModule,
+        RouterModule.forChild(StSapInstalledInstrumentsRoutingModule),
+        MatButtonModule,
+        MatRippleModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        MatTooltipModule,
+        MatMenuModule,
+        MatIconModule,
+        MatChipsModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatListModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        MatDialogModule,
+        MatTabsModule,
+        MatSnackBarModule,
+        MatCheckboxModule,
+        MatAutocompleteModule,
+        MatAutocompleteModule,
+        MatSortModule,
+        TranslateModule.forChild(),
+        StDateFormatModule,
+        ReactiveFormsModule,
+        NgxStMultiselectAutocompleteModule,
+        StSearchSelectsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StSapInstalledInstrumentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SapInstalledInstrumentListComponent,
+                        SapInstalledInstrumentDetailsComponent,
+                        DataDetailsViewComponent,
+                        CallsListViewComponent,
+                        ServiceContractsListViewComponent,
+                        ServiceContractDetailsViewComponent,
+                        CallDetailsViewComponent,
+                        ServiceContractsModalDetailsViewComponent,
+                        ActivitiesListViewComponent,
+                        ActivityDetailsViewComponent,
+                        SapInstalledInstrumentListSearchComponent,
+                        SapInstalledInstrumentListTableComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        RouterModule.forChild(StSapInstalledInstrumentsRoutingModule),
+                        MatButtonModule,
+                        MatRippleModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatTooltipModule,
+                        MatMenuModule,
+                        MatIconModule,
+                        MatChipsModule,
+                        MatTableModule,
+                        MatPaginatorModule,
+                        MatListModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        MatDialogModule,
+                        MatTabsModule,
+                        MatSnackBarModule,
+                        MatCheckboxModule,
+                        MatAutocompleteModule,
+                        MatAutocompleteModule,
+                        MatSortModule,
+                        TranslateModule.forChild(),
+                        StDateFormatModule,
+                        ReactiveFormsModule,
+                        NgxStMultiselectAutocompleteModule,
+                        StSearchSelectsModule,
+                    ],
+                    providers: [SapInstalledInstrumentsService],
+                    exports: [],
+                }]
+        }] });
+
+/*
+ * Public API Surface of ngx-st-sap-installed-instruments
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActivitiesListViewComponent, ActivityDetailsViewComponent, CallDetailsViewComponent, CallsListViewComponent, DataDetailsViewComponent, InstalledInstrumentSortByColumnEnum, InstalledInstrumentSortOrderEnum, SapInstalledInstrumentDetailsComponent, SapInstalledInstrumentListComponent, SapInstalledInstrumentListSearchComponent, SapInstalledInstrumentListTableComponent, SapInstalledInstrumentsService, ServiceContractDetailsViewComponent, ServiceContractsListViewComponent, ServiceContractsModalDetailsViewComponent, StSapInstalledInstrumentsModule };
+//# sourceMappingURL=ngx-st-sap-installed-instruments.mjs.map