ngx-st-sap-installed-instruments 19.0.1 → 20.0.1

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

@@ -1,56 +1,41 @@
 import * as i0 from '@angular/core';
-import { Inject, SkipSelf, Injectable, viewChild, input, output, signal, inject, ChangeDetectorRef, effect, ChangeDetectionStrategy, Component, ViewChild, HostBinding, NgModule } from '@angular/core';
-import * as i1 from '@angular/common/http';
-import { HttpParams } from '@angular/common/http';
-import { map, takeUntil, tap } from 'rxjs/operators';
+import { inject, Injectable, viewChild, input, output, signal, ChangeDetectorRef, DestroyRef, effect, ChangeDetectionStrategy, Component, Injector, NgModule } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { map, takeUntil, switchMap } from 'rxjs/operators';
 import moment from 'moment';
-import { StSubscribeDestroyComponent } from 'ngx-st-base-functions';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { Router, ActivatedRoute } from '@angular/router';
-import * as i7 from '@angular/material/sort';
-import { MatSort, MatSortModule } from '@angular/material/sort';
-import * as i2$1 from '@angular/material/paginator';
+import { MatSort, MatSortHeader, MatSortModule } from '@angular/material/sort';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i1$3 from '@angular/material/table';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatTableModule } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
-import * as i1$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i1$2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i6 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i4 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-import * as i5 from 'ngx-st-date-format';
+import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
+import { MatMenuTrigger, MatMenu, MatMenuItem, MatMenuModule } from '@angular/material/menu';
+import { MatIcon, MatIconRegistry, MatIconModule } from '@angular/material/icon';
+import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
+import * as i1$3 from '@ngx-translate/core';
+import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
+import * as i1 from 'ngx-st-date-format';
 import { StDateFormatModule } from 'ngx-st-date-format';
-import * as i9 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { NonNullableFormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { Subject, of } from 'rxjs';
-import * as i1$4 from '@angular/common';
-import { Location, CommonModule } from '@angular/common';
-import * as i3 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4$1 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i5$1 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i6$1 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i8 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i10 from 'ngx-st-multiselect-autocomplete';
+import * as i2 from 'ngx-st-multiselect-autocomplete';
 import { StMultiselectAutocompleteModule } from 'ngx-st-multiselect-autocomplete';
-import * as i11 from 'ngx-st-search-selects';
+import { NgClass, AsyncPipe, NgTemplateOutlet, Location, CommonModule } from '@angular/common';
+import { MatFormField, MatSuffix, MatLabel, MatFormFieldModule } from '@angular/material/form-field';
+import { MatInput, MatInputModule } from '@angular/material/input';
+import { MatSelect, MatOption, MatSelectModule } from '@angular/material/select';
+import * as i3 from 'ngx-st-search-selects';
 import { StSearchSelectsModule } from 'ngx-st-search-selects';
-import * as i2$2 from 'ngx-st-card';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import { MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
+import * as i1$2 from 'ngx-st-card';
 import { NgxStCardModule } from 'ngx-st-card';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i2$3 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogRef, MatDialog, MatDialogModule } from '@angular/material/dialog';
-import * as i2$4 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { MatTabGroup, MatTab, MatTabsModule } from '@angular/material/tabs';
 import { MatRippleModule, MatNativeDateModule } from '@angular/material/core';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatListModule } from '@angular/material/list';
@@ -74,11 +59,11 @@ var InstalledInstrumentTableColumnsMapperEnum;
 })(InstalledInstrumentTableColumnsMapperEnum || (InstalledInstrumentTableColumnsMapperEnum = {}));
 
 class SapInstalledInstrumentsService {
-    constructor(config, http) {
-        this.config = config;
-        this.http = http;
+    constructor() {
         this.territoryFilter = false;
         this.accessToken = '';
+        this.config = inject('config');
+        this.http = inject(HttpClient, { skipSelf: true });
         this.baseUrl = `${this.config.api_base_uri}${this.config.base_uri}${this.config.api_module}`;
     }
     getInstalledInstrumentList(searchForm, sort) {
@@ -158,32 +143,28 @@ class SapInstalledInstrumentsService {
     }
     getApplicationSearch(search) {
         const params = new HttpParams().set('application', search);
-        return this.http.get(`${this.baseUrl}/application?application='}`);
+        return this.http.get(`${this.baseUrl}/application`, {
+            params,
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SapInstalledInstrumentsService, deps: [{ token: 'config' }, { token: i1.HttpClient, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SapInstalledInstrumentsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: SapInstalledInstrumentsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: SapInstalledInstrumentsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SapInstalledInstrumentsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: SapInstalledInstrumentsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['config']
-                }] }, { type: i1.HttpClient, decorators: [{
-                    type: SkipSelf
-                }] }] });
+        }], ctorParameters: () => [] });
 
-class SapInstalledInstrumentListTableComponent extends StSubscribeDestroyComponent {
+class SapInstalledInstrumentListTableComponent {
     constructor() {
-        super();
         this.paginator = viewChild.required(MatPaginator);
         this.sort = viewChild.required(MatSort);
-        this.useMapButton = input(false);
-        this.tableData = input([]);
+        this.useMapButton = input(false, ...(ngDevMode ? [{ debugName: "useMapButton" }] : []));
+        this.tableData = input([], ...(ngDevMode ? [{ debugName: "tableData" }] : []));
         this.sortChanged = output();
-        this.dataSource = signal(new MatTableDataSource());
+        this.dataSource = signal(new MatTableDataSource(), ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
         this.tableColumns = signal([
             'instrumentNo',
             'instrumentDescription',
@@ -196,13 +177,14 @@ class SapInstalledInstrumentListTableComponent extends StSubscribeDestroyCompone
             'country',
             'installationDate',
             'status',
-        ]);
-        this.mapTableColumns = signal({});
-        this.showOnMapSelection = signal(new SelectionModel(true));
+        ], ...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
+        this.mapTableColumns = signal({}, ...(ngDevMode ? [{ debugName: "mapTableColumns" }] : []));
+        this.showOnMapSelection = signal(new SelectionModel(true), ...(ngDevMode ? [{ debugName: "showOnMapSelection" }] : []));
         this.router = inject(Router);
         this.activatedRoute = inject(ActivatedRoute);
         this.sapInstalledInstruments = inject(SapInstalledInstrumentsService);
         this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.destroyRef = inject(DestroyRef);
         effect(() => {
             const tableData = this.tableData();
             this.dataSource.update(oldData => {
@@ -221,7 +203,7 @@ class SapInstalledInstrumentListTableComponent extends StSubscribeDestroyCompone
         this.dataSource().paginator = this.paginator();
         this.dataSource().sort = this.sort();
         this.sort()
-            ?.sortChange.pipe(takeUntil(this.ngDestroyed$))
+            ?.sortChange.pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(res => {
             this.sortChanged.emit(res);
         });
@@ -299,22 +281,44 @@ class SapInstalledInstrumentListTableComponent extends StSubscribeDestroyCompone
             selectToMap: '',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SapInstalledInstrumentListTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: SapInstalledInstrumentListTableComponent, isStandalone: false, selector: "app-sap-installed-instrument-list-table", inputs: { useMapButton: { classPropertyName: "useMapButton", publicName: "useMapButton", isSignal: true, isRequired: false, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (useMapButton()) {\r\n  <div class=\"row justify-content-end show-on-map-actions\">\r\n    <button mat-raised-button [matMenuTriggerFor]=\"menu\">\r\n      {{ 'sapAdminInstalledInstrument.selected' | translate }}:\r\n      {{ showOnMapSelection().selected.length }}\r\n    </button>\r\n    <mat-menu #menu=\"matMenu\">\r\n      @for (\r\n        instrument of showOnMapSelection().selected;\r\n        track instrument.instrumentNo\r\n      ) {\r\n        <div mat-menu-item (click)=\"showOnMapSelection().deselect(instrument)\">\r\n          {{ instrument.instrumentNo }}\r\n          <mat-icon style=\"font-size: 20px; width: 20px; height: 20px\"\r\n            >delete</mat-icon\r\n          >\r\n        </div>\r\n      }\r\n    </mat-menu>\r\n    <button\r\n      mat-raised-button\r\n      color=\"primary\"\r\n      (click)=\"redirectToShowOnMap()\"\r\n      [disabled]=\"showOnMapSelection().selected.length === 0\"\r\n    >\r\n      {{ 'sapAdminInstalledInstrument.showOnMap' | translate }}\r\n    </button>\r\n  </div>\r\n}\r\n\r\n<table\r\n  mat-table\r\n  [dataSource]=\"dataSource()\"\r\n  style=\"width: 100%\"\r\n  class=\"no-hover st-material-table\"\r\n  matSort\r\n>\r\n  @for (column of tableColumns(); track column) {\r\n    <ng-container [matColumnDef]=\"column\">\r\n      @if (column !== 'selectToMap') {\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n          {{ mapTableColumns()[column] | translate }}\r\n        </th>\r\n      } @else {\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          <mat-checkbox\r\n            color=\"primary\"\r\n            (change)=\"toggleAll($event.checked)\"\r\n          ></mat-checkbox>\r\n        </th>\r\n      }\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        @if (column === 'selectToMap') {\r\n          @if (element.sfIdView) {\r\n            <mat-checkbox\r\n              color=\"primary\"\r\n              [checked]=\"showOnMapSelection().isSelected(element)\"\r\n              (click)=\"changeRowSelection($event, element)\"\r\n            ></mat-checkbox>\r\n          }\r\n        } @else if (column === 'installationDate') {\r\n          {{ element[column] | stDateFormatPipe }}\r\n        } @else {\r\n          {{ element[column] }}\r\n        }\r\n      </td>\r\n    </ng-container>\r\n  }\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: [".show-on-map-actions{justify-content:end;margin-bottom:5px;margin-top:-45px;gap:5px}\n"], dependencies: [{ kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.DateFormatPipe, name: "stDateFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: SapInstalledInstrumentListTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: SapInstalledInstrumentListTableComponent, isStandalone: true, selector: "app-sap-installed-instrument-list-table", inputs: { useMapButton: { classPropertyName: "useMapButton", publicName: "useMapButton", isSignal: true, isRequired: false, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if (useMapButton()) {\n  <div class=\"row justify-content-end show-on-map-actions\">\n    <button mat-raised-button [matMenuTriggerFor]=\"menu\">\n      {{ 'sapAdminInstalledInstrument.selected' | translate }}:\n      {{ showOnMapSelection().selected.length }}\n    </button>\n    <mat-menu #menu=\"matMenu\">\n      @for (\n        instrument of showOnMapSelection().selected;\n        track $index\n      ) {\n        <div mat-menu-item (click)=\"showOnMapSelection().deselect(instrument)\">\n          {{ instrument.instrumentNo }}\n          <mat-icon style=\"font-size: 20px; width: 20px; height: 20px\"\n            >delete</mat-icon\n          >\n        </div>\n      }\n    </mat-menu>\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"redirectToShowOnMap()\"\n      [disabled]=\"showOnMapSelection().selected.length === 0\"\n    >\n      {{ 'sapAdminInstalledInstrument.showOnMap' | translate }}\n    </button>\n  </div>\n}\n\n<table\n  mat-table\n  [dataSource]=\"dataSource()\"\n  style=\"width: 100%\"\n  class=\"no-hover st-material-table\"\n  matSort\n>\n  @for (column of tableColumns(); track column) {\n    <ng-container [matColumnDef]=\"column\">\n      @if (column !== 'selectToMap') {\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          {{ mapTableColumns()[column] | translate }}\n        </th>\n      } @else {\n        <th mat-header-cell *matHeaderCellDef>\n          <mat-checkbox\n            color=\"primary\"\n            (change)=\"toggleAll($event.checked)\"\n          ></mat-checkbox>\n        </th>\n      }\n      <td mat-cell *matCellDef=\"let element\">\n        @if (column === 'selectToMap') {\n          @if (element.sfIdView) {\n            <mat-checkbox\n              color=\"primary\"\n              [checked]=\"showOnMapSelection().isSelected(element)\"\n              (click)=\"changeRowSelection($event, element)\"\n            ></mat-checkbox>\n          }\n        } @else if (column === 'installationDate') {\n          {{ element[column] | stDateFormatPipe }}\n        } @else {\n          {{ element[column] }}\n        }\n      </td>\n    </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"tableColumns()\"></tr>\n  <tr\n    mat-row\n    *matRowDef=\"let row; columns: tableColumns()\"\n    (click)=\"rowClicked(row)\"\n  ></tr>\n</table>\n<mat-paginator\n  [pageSizeOptions]=\"[10, 20]\"\n  [showFirstLastButtons]=\"true\"\n></mat-paginator>\n", styles: [".show-on-map-actions{justify-content:end;margin-bottom:5px;margin-top:-45px;gap:5px}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: StDateFormatModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.DateFormatPipe, name: "stDateFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SapInstalledInstrumentListTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: SapInstalledInstrumentListTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-sap-installed-instrument-list-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (useMapButton()) {\r\n  <div class=\"row justify-content-end show-on-map-actions\">\r\n    <button mat-raised-button [matMenuTriggerFor]=\"menu\">\r\n      {{ 'sapAdminInstalledInstrument.selected' | translate }}:\r\n      {{ showOnMapSelection().selected.length }}\r\n    </button>\r\n    <mat-menu #menu=\"matMenu\">\r\n      @for (\r\n        instrument of showOnMapSelection().selected;\r\n        track instrument.instrumentNo\r\n      ) {\r\n        <div mat-menu-item (click)=\"showOnMapSelection().deselect(instrument)\">\r\n          {{ instrument.instrumentNo }}\r\n          <mat-icon style=\"font-size: 20px; width: 20px; height: 20px\"\r\n            >delete</mat-icon\r\n          >\r\n        </div>\r\n      }\r\n    </mat-menu>\r\n    <button\r\n      mat-raised-button\r\n      color=\"primary\"\r\n      (click)=\"redirectToShowOnMap()\"\r\n      [disabled]=\"showOnMapSelection().selected.length === 0\"\r\n    >\r\n      {{ 'sapAdminInstalledInstrument.showOnMap' | translate }}\r\n    </button>\r\n  </div>\r\n}\r\n\r\n<table\r\n  mat-table\r\n  [dataSource]=\"dataSource()\"\r\n  style=\"width: 100%\"\r\n  class=\"no-hover st-material-table\"\r\n  matSort\r\n>\r\n  @for (column of tableColumns(); track column) {\r\n    <ng-container [matColumnDef]=\"column\">\r\n      @if (column !== 'selectToMap') {\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n          {{ mapTableColumns()[column] | translate }}\r\n        </th>\r\n      } @else {\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          <mat-checkbox\r\n            color=\"primary\"\r\n            (change)=\"toggleAll($event.checked)\"\r\n          ></mat-checkbox>\r\n        </th>\r\n      }\r\n      <td mat-cell *matCellDef=\"let element\">\r\n        @if (column === 'selectToMap') {\r\n          @if (element.sfIdView) {\r\n            <mat-checkbox\r\n              color=\"primary\"\r\n              [checked]=\"showOnMapSelection().isSelected(element)\"\r\n              (click)=\"changeRowSelection($event, element)\"\r\n            ></mat-checkbox>\r\n          }\r\n        } @else if (column === 'installationDate') {\r\n          {{ element[column] | stDateFormatPipe }}\r\n        } @else {\r\n          {{ element[column] }}\r\n        }\r\n      </td>\r\n    </ng-container>\r\n  }\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: [".show-on-map-actions{justify-content:end;margin-bottom:5px;margin-top:-45px;gap:5px}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'app-sap-installed-instrument-list-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatButton,
+                        MatMenuTrigger,
+                        MatMenu,
+                        MatMenuItem,
+                        MatIcon,
+                        MatTable,
+                        MatSort,
+                        MatColumnDef,
+                        MatHeaderCellDef,
+                        MatHeaderCell,
+                        MatSortHeader,
+                        MatCheckbox,
+                        MatCellDef,
+                        MatCell,
+                        MatHeaderRowDef,
+                        MatHeaderRow,
+                        MatRowDef,
+                        MatRow,
+                        MatPaginator,
+                        TranslatePipe,
+                        StDateFormatModule,
+                    ], template: "@if (useMapButton()) {\n  <div class=\"row justify-content-end show-on-map-actions\">\n    <button mat-raised-button [matMenuTriggerFor]=\"menu\">\n      {{ 'sapAdminInstalledInstrument.selected' | translate }}:\n      {{ showOnMapSelection().selected.length }}\n    </button>\n    <mat-menu #menu=\"matMenu\">\n      @for (\n        instrument of showOnMapSelection().selected;\n        track $index\n      ) {\n        <div mat-menu-item (click)=\"showOnMapSelection().deselect(instrument)\">\n          {{ instrument.instrumentNo }}\n          <mat-icon style=\"font-size: 20px; width: 20px; height: 20px\"\n            >delete</mat-icon\n          >\n        </div>\n      }\n    </mat-menu>\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"redirectToShowOnMap()\"\n      [disabled]=\"showOnMapSelection().selected.length === 0\"\n    >\n      {{ 'sapAdminInstalledInstrument.showOnMap' | translate }}\n    </button>\n  </div>\n}\n\n<table\n  mat-table\n  [dataSource]=\"dataSource()\"\n  style=\"width: 100%\"\n  class=\"no-hover st-material-table\"\n  matSort\n>\n  @for (column of tableColumns(); track column) {\n    <ng-container [matColumnDef]=\"column\">\n      @if (column !== 'selectToMap') {\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          {{ mapTableColumns()[column] | translate }}\n        </th>\n      } @else {\n        <th mat-header-cell *matHeaderCellDef>\n          <mat-checkbox\n            color=\"primary\"\n            (change)=\"toggleAll($event.checked)\"\n          ></mat-checkbox>\n        </th>\n      }\n      <td mat-cell *matCellDef=\"let element\">\n        @if (column === 'selectToMap') {\n          @if (element.sfIdView) {\n            <mat-checkbox\n              color=\"primary\"\n              [checked]=\"showOnMapSelection().isSelected(element)\"\n              (click)=\"changeRowSelection($event, element)\"\n            ></mat-checkbox>\n          }\n        } @else if (column === 'installationDate') {\n          {{ element[column] | stDateFormatPipe }}\n        } @else {\n          {{ element[column] }}\n        }\n      </td>\n    </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"tableColumns()\"></tr>\n  <tr\n    mat-row\n    *matRowDef=\"let row; columns: tableColumns()\"\n    (click)=\"rowClicked(row)\"\n  ></tr>\n</table>\n<mat-paginator\n  [pageSizeOptions]=\"[10, 20]\"\n  [showFirstLastButtons]=\"true\"\n></mat-paginator>\n", styles: [".show-on-map-actions{justify-content:end;margin-bottom:5px;margin-top:-45px;gap:5px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }], useMapButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "useMapButton", required: false }] }], tableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableData", required: false }] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }] } });
 
 class SapInstalledInstrumentListSearchComponent {
     constructor() {
-        this.multiselectAutocomplete = viewChild('multiselectAutocomplete');
+        this.multiselectAutocomplete = viewChild('multiselectAutocomplete', ...(ngDevMode ? [{ debugName: "multiselectAutocomplete" }] : []));
         this.sapInstalledInstrumentService = inject(SapInstalledInstrumentsService);
         this.activatedRoute = inject(ActivatedRoute);
         this.fb = inject(NonNullableFormBuilder);
         this.filtersChanged = output();
-        this.showFilters = signal(false);
+        this.showFilters = signal(false, ...(ngDevMode ? [{ debugName: "showFilters" }] : []));
         this.searchForm = this.fb.group({
             application: [[]],
             serialNumber: '',
@@ -411,27 +415,35 @@ class SapInstalledInstrumentListSearchComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SapInstalledInstrumentListSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: SapInstalledInstrumentListSearchComponent, isStandalone: false, selector: "app-sap-installed-instrument-list-search", outputs: { filtersChanged: "filtersChanged" }, viewQueries: [{ propertyName: "multiselectAutocomplete", first: true, predicate: ["multiselectAutocomplete"], descendants: true, isSignal: true }], ngImport: i0, template: "<form\r\n  class=\"search-filters\"\r\n  [formGroup]=\"searchForm\"\r\n  (keyup.enter)=\"searchSubmitted()\"\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          ('sapAdminInstalledInstrument.max' | translate) +\r\n          ': 10)'\r\n        \"\r\n        [searchLabel]=\"\r\n          'sapAdminInstalledInstrument.applicationPlaceholder' | translate\r\n        \"\r\n        [settings]=\"{\r\n          getFilteredOptions: this.getFilteredOptions\r\n        }\"\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        @if (searchForm.controls.bpName.value) {\r\n          <button\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        }\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        @if (searchForm.controls.technicianLastName.value) {\r\n          <button\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        }\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        @if (searchForm.controls.serialNumber.value) {\r\n          <button\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        }\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        @if (searchForm.controls.instrumentNo.value) {\r\n          <button\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        }\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        @if (searchForm.controls.instrumentDesc.value) {\r\n          <button\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        }\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]=\"''\">{{\r\n            'sapAdminInstalledInstrument.empty' | translate\r\n          }}</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        @if (searchForm.controls.customerNo.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center row\">\r\n      @if (\r\n        searchForm?.get('territory') && ((territories$ | async) || []);\r\n        as territories\r\n      ) {\r\n        <ngx-st-search-select\r\n          [options]=\"territories || []\"\r\n          [selectLabel]=\"'sapAdminInstalledInstrument.territory' | translate\"\r\n          [optionLabelFields]=\"'name'\"\r\n          [optionValueField]=\"'id'\"\r\n          [selectFormControl]=\"searchForm.controls.territory\"\r\n          [selectBindType]=\"'control'\"\r\n          [searchLabel]=\"'sapAdminInstalledInstrument.search' | translate\"\r\n        ></ngx-st-search-select>\r\n      }\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'sapAdminInstalledInstrument.refresh' | translate\"\r\n        (click)=\"refreshTerritories()\"\r\n        type=\"button\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\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=\"{{ 'sapAdminInstalledInstrument.city' | translate }}\"\r\n        />\r\n        @if (searchForm.controls.city.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center row\">\r\n      @if (searchForm?.get('state') && ((states$ | async) || []); as states) {\r\n        <ngx-st-search-select\r\n          [options]=\"states || []\"\r\n          [selectLabel]=\"'sapAdminInstalledInstrument.state' | translate\"\r\n          [optionLabelFields]=\"'name'\"\r\n          [optionValueField]=\"'id'\"\r\n          [selectFormControl]=\"searchForm.controls.state\"\r\n          [selectBindType]=\"'control'\"\r\n          [searchLabel]=\"'sapAdminInstalledInstrument.search' | translate\"\r\n        ></ngx-st-search-select>\r\n      }\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'sapAdminInstalledInstrument.refresh' | translate\"\r\n        [disabled]=\"!searchForm.controls.country.value\"\r\n        (click)=\"refreshStates()\"\r\n        type=\"button\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\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=\"{{ 'sapAdminInstalledInstrument.county' | translate }}\"\r\n        />\r\n        @if (searchForm.controls.county.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center row\">\r\n      @if (\r\n        searchForm?.get('country') && ((countries$ | async) || []);\r\n        as countries\r\n      ) {\r\n        <ngx-st-search-select\r\n          [options]=\"countries || []\"\r\n          [selectLabel]=\"'sapAdminInstalledInstrument.country' | translate\"\r\n          [optionLabelFields]=\"'name'\"\r\n          [optionValueField]=\"'id'\"\r\n          [selectFormControl]=\"searchForm.controls.country\"\r\n          [selectBindType]=\"'control'\"\r\n          [searchLabel]=\"'sapAdminInstalledInstrument.search' | translate\"\r\n        ></ngx-st-search-select>\r\n      }\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'sapAdminInstalledInstrument.refresh' | translate\"\r\n        (click)=\"refreshCountries()\"\r\n        type=\"button\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\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        @if (searchForm.controls.endUserName.value) {\r\n          <button\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        }\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        @if (searchForm.controls.endUserCode.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    class=\"row justify-content-sm-start justify-content-lg-center\"\r\n    style=\"margin-bottom: 10px\"\r\n  >\r\n    @if (showFilters()) {\r\n      <button\r\n        mat-raised-button\r\n        type=\"button\"\r\n        (click)=\"clearAllFilters()\"\r\n        style=\"margin-right: 10px\"\r\n      >\r\n        Clear All\r\n      </button>\r\n    }\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      color=\"accent\"\r\n      (click)=\"showFilters.set(!showFilters())\"\r\n    >\r\n      @if (showFilters()) {\r\n        {{ 'sapAdminInstalledInstrument.hideFilters' | translate }}\r\n      }\r\n      @if (!showFilters()) {\r\n        {{ 'sapAdminInstalledInstrument.showFilters' | translate }}\r\n      }\r\n    </button>\r\n    @if (showFilters()) {\r\n      <button\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    }\r\n  </div>\r\n</form>\r\n", styles: [".hide{display:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgxStMultiselectAutocompleteComponent, selector: "ngx-st-multiselect-autocomplete", inputs: ["label", "searchLabel", "settings", "initSelectedData", "maxLengthSelectedData", "clearAfterSelect"], outputs: ["selectedDataChanged"] }, { kind: "component", type: i11.SearchSelectComponent, selector: "ngx-st-search-select", inputs: ["selectLabel", "optionValueField", "optionLabelFields", "filteredByFields", "model", "modelChange", "selectFormControl", "required", "selectBindType", "searchLabel", "showEmptyOption", "useVirtualScrollOptions", "options", "disabled"], outputs: ["modelChange", "selectDataChanged"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: SapInstalledInstrumentListSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: SapInstalledInstrumentListSearchComponent, isStandalone: true, selector: "app-sap-installed-instrument-list-search", outputs: { filtersChanged: "filtersChanged" }, viewQueries: [{ propertyName: "multiselectAutocomplete", first: true, predicate: ["multiselectAutocomplete"], descendants: true, isSignal: true }], ngImport: i0, template: "<form\r\n  class=\"search-filters\"\r\n  [formGroup]=\"searchForm\"\r\n  (keyup.enter)=\"searchSubmitted()\"\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          ('sapAdminInstalledInstrument.max' | translate) +\r\n          ': 10)'\r\n        \"\r\n        [searchLabel]=\"\r\n          'sapAdminInstalledInstrument.applicationPlaceholder' | translate\r\n        \"\r\n        [settings]=\"{\r\n          getFilteredOptions: this.getFilteredOptions\r\n        }\"\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        @if (searchForm.controls.bpName.value) {\r\n          <button\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        }\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        @if (searchForm.controls.technicianLastName.value) {\r\n          <button\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        }\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        @if (searchForm.controls.serialNumber.value) {\r\n          <button\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        }\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        @if (searchForm.controls.instrumentNo.value) {\r\n          <button\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        }\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        @if (searchForm.controls.instrumentDesc.value) {\r\n          <button\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        }\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]=\"''\">{{\r\n            'sapAdminInstalledInstrument.empty' | translate\r\n          }}</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        @if (searchForm.controls.customerNo.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center row\">\r\n      @if (\r\n        searchForm?.get('territory') && ((territories$ | async) || []);\r\n        as territories\r\n      ) {\r\n        <ngx-st-search-select\r\n          [options]=\"territories || []\"\r\n          [selectLabel]=\"'sapAdminInstalledInstrument.territory' | translate\"\r\n          [optionLabelFields]=\"'name'\"\r\n          [optionValueField]=\"'id'\"\r\n          [selectFormControl]=\"searchForm.controls.territory\"\r\n          [selectBindType]=\"'control'\"\r\n          [searchLabel]=\"'sapAdminInstalledInstrument.search' | translate\"\r\n        ></ngx-st-search-select>\r\n      }\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'sapAdminInstalledInstrument.refresh' | translate\"\r\n        (click)=\"refreshTerritories()\"\r\n        type=\"button\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\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=\"{{ 'sapAdminInstalledInstrument.city' | translate }}\"\r\n        />\r\n        @if (searchForm.controls.city.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center row\">\r\n      @if (searchForm?.get('state') && ((states$ | async) || []); as states) {\r\n        <ngx-st-search-select\r\n          [options]=\"states || []\"\r\n          [selectLabel]=\"'sapAdminInstalledInstrument.state' | translate\"\r\n          [optionLabelFields]=\"'name'\"\r\n          [optionValueField]=\"'id'\"\r\n          [selectFormControl]=\"searchForm.controls.state\"\r\n          [selectBindType]=\"'control'\"\r\n          [searchLabel]=\"'sapAdminInstalledInstrument.search' | translate\"\r\n        ></ngx-st-search-select>\r\n      }\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'sapAdminInstalledInstrument.refresh' | translate\"\r\n        [disabled]=\"!searchForm.controls.country.value\"\r\n        (click)=\"refreshStates()\"\r\n        type=\"button\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\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=\"{{ 'sapAdminInstalledInstrument.county' | translate }}\"\r\n        />\r\n        @if (searchForm.controls.county.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center row\">\r\n      @if (\r\n        searchForm?.get('country') && ((countries$ | async) || []);\r\n        as countries\r\n      ) {\r\n        <ngx-st-search-select\r\n          [options]=\"countries || []\"\r\n          [selectLabel]=\"'sapAdminInstalledInstrument.country' | translate\"\r\n          [optionLabelFields]=\"'name'\"\r\n          [optionValueField]=\"'id'\"\r\n          [selectFormControl]=\"searchForm.controls.country\"\r\n          [selectBindType]=\"'control'\"\r\n          [searchLabel]=\"'sapAdminInstalledInstrument.search' | translate\"\r\n        ></ngx-st-search-select>\r\n      }\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'sapAdminInstalledInstrument.refresh' | translate\"\r\n        (click)=\"refreshCountries()\"\r\n        type=\"button\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\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        @if (searchForm.controls.endUserName.value) {\r\n          <button\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        }\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        @if (searchForm.controls.endUserCode.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    class=\"row justify-content-sm-start justify-content-lg-center\"\r\n    style=\"margin-bottom: 10px\"\r\n  >\r\n    @if (showFilters()) {\r\n      <button\r\n        mat-raised-button\r\n        type=\"button\"\r\n        (click)=\"clearAllFilters()\"\r\n        style=\"margin-right: 10px\"\r\n      >\r\n        Clear All\r\n      </button>\r\n    }\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      color=\"accent\"\r\n      (click)=\"showFilters.set(!showFilters())\"\r\n    >\r\n      @if (showFilters()) {\r\n        {{ 'sapAdminInstalledInstrument.hideFilters' | translate }}\r\n      }\r\n      @if (!showFilters()) {\r\n        {{ 'sapAdminInstalledInstrument.showFilters' | translate }}\r\n      }\r\n    </button>\r\n    @if (showFilters()) {\r\n      <button\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    }\r\n  </div>\r\n</form>\r\n", styles: [".hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: StMultiselectAutocompleteModule }, { kind: "component", type: i2.NgxStMultiselectAutocompleteComponent, selector: "ngx-st-multiselect-autocomplete", inputs: ["label", "searchLabel", "appearance", "settings", "initSelectedData", "maxLengthSelectedData", "clearAfterSelect"], outputs: ["selectedDataChanged"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: StSearchSelectsModule }, { kind: "component", type: i3.SearchSelectComponent, selector: "ngx-st-search-select", inputs: ["selectLabel", "optionValueField", "optionLabelFields", "filteredByFields", "model", "modelChange", "selectFormControl", "required", "selectBindType", "searchLabel", "appearance", "showEmptyOption", "useVirtualScrollOptions", "options", "disabled"], outputs: ["modelChange", "selectDataChanged"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SapInstalledInstrumentListSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: SapInstalledInstrumentListSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-sap-installed-instrument-list-search', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<form\r\n  class=\"search-filters\"\r\n  [formGroup]=\"searchForm\"\r\n  (keyup.enter)=\"searchSubmitted()\"\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          ('sapAdminInstalledInstrument.max' | translate) +\r\n          ': 10)'\r\n        \"\r\n        [searchLabel]=\"\r\n          'sapAdminInstalledInstrument.applicationPlaceholder' | translate\r\n        \"\r\n        [settings]=\"{\r\n          getFilteredOptions: this.getFilteredOptions\r\n        }\"\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        @if (searchForm.controls.bpName.value) {\r\n          <button\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        }\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        @if (searchForm.controls.technicianLastName.value) {\r\n          <button\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        }\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        @if (searchForm.controls.serialNumber.value) {\r\n          <button\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        }\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        @if (searchForm.controls.instrumentNo.value) {\r\n          <button\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        }\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        @if (searchForm.controls.instrumentDesc.value) {\r\n          <button\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        }\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]=\"''\">{{\r\n            'sapAdminInstalledInstrument.empty' | translate\r\n          }}</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        @if (searchForm.controls.customerNo.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center row\">\r\n      @if (\r\n        searchForm?.get('territory') && ((territories$ | async) || []);\r\n        as territories\r\n      ) {\r\n        <ngx-st-search-select\r\n          [options]=\"territories || []\"\r\n          [selectLabel]=\"'sapAdminInstalledInstrument.territory' | translate\"\r\n          [optionLabelFields]=\"'name'\"\r\n          [optionValueField]=\"'id'\"\r\n          [selectFormControl]=\"searchForm.controls.territory\"\r\n          [selectBindType]=\"'control'\"\r\n          [searchLabel]=\"'sapAdminInstalledInstrument.search' | translate\"\r\n        ></ngx-st-search-select>\r\n      }\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'sapAdminInstalledInstrument.refresh' | translate\"\r\n        (click)=\"refreshTerritories()\"\r\n        type=\"button\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\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=\"{{ 'sapAdminInstalledInstrument.city' | translate }}\"\r\n        />\r\n        @if (searchForm.controls.city.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center row\">\r\n      @if (searchForm?.get('state') && ((states$ | async) || []); as states) {\r\n        <ngx-st-search-select\r\n          [options]=\"states || []\"\r\n          [selectLabel]=\"'sapAdminInstalledInstrument.state' | translate\"\r\n          [optionLabelFields]=\"'name'\"\r\n          [optionValueField]=\"'id'\"\r\n          [selectFormControl]=\"searchForm.controls.state\"\r\n          [selectBindType]=\"'control'\"\r\n          [searchLabel]=\"'sapAdminInstalledInstrument.search' | translate\"\r\n        ></ngx-st-search-select>\r\n      }\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'sapAdminInstalledInstrument.refresh' | translate\"\r\n        [disabled]=\"!searchForm.controls.country.value\"\r\n        (click)=\"refreshStates()\"\r\n        type=\"button\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\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=\"{{ 'sapAdminInstalledInstrument.county' | translate }}\"\r\n        />\r\n        @if (searchForm.controls.county.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center row\">\r\n      @if (\r\n        searchForm?.get('country') && ((countries$ | async) || []);\r\n        as countries\r\n      ) {\r\n        <ngx-st-search-select\r\n          [options]=\"countries || []\"\r\n          [selectLabel]=\"'sapAdminInstalledInstrument.country' | translate\"\r\n          [optionLabelFields]=\"'name'\"\r\n          [optionValueField]=\"'id'\"\r\n          [selectFormControl]=\"searchForm.controls.country\"\r\n          [selectBindType]=\"'control'\"\r\n          [searchLabel]=\"'sapAdminInstalledInstrument.search' | translate\"\r\n        ></ngx-st-search-select>\r\n      }\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'sapAdminInstalledInstrument.refresh' | translate\"\r\n        (click)=\"refreshCountries()\"\r\n        type=\"button\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\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        @if (searchForm.controls.endUserName.value) {\r\n          <button\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        }\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        @if (searchForm.controls.endUserCode.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    class=\"row justify-content-sm-start justify-content-lg-center\"\r\n    style=\"margin-bottom: 10px\"\r\n  >\r\n    @if (showFilters()) {\r\n      <button\r\n        mat-raised-button\r\n        type=\"button\"\r\n        (click)=\"clearAllFilters()\"\r\n        style=\"margin-right: 10px\"\r\n      >\r\n        Clear All\r\n      </button>\r\n    }\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      color=\"accent\"\r\n      (click)=\"showFilters.set(!showFilters())\"\r\n    >\r\n      @if (showFilters()) {\r\n        {{ 'sapAdminInstalledInstrument.hideFilters' | translate }}\r\n      }\r\n      @if (!showFilters()) {\r\n        {{ 'sapAdminInstalledInstrument.showFilters' | translate }}\r\n      }\r\n    </button>\r\n    @if (showFilters()) {\r\n      <button\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    }\r\n  </div>\r\n</form>\r\n", styles: [".hide{display:none}\n"] }]
-        }] });
+            args: [{ selector: 'app-sap-installed-instrument-list-search', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, NgClass, StMultiselectAutocompleteModule, MatFormField, MatInput, MatIconButton, MatSuffix, MatIcon, MatLabel, MatSelect, MatOption, StSearchSelectsModule, MatTooltip, MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatButton, AsyncPipe, TranslatePipe], template: "<form\r\n  class=\"search-filters\"\r\n  [formGroup]=\"searchForm\"\r\n  (keyup.enter)=\"searchSubmitted()\"\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          ('sapAdminInstalledInstrument.max' | translate) +\r\n          ': 10)'\r\n        \"\r\n        [searchLabel]=\"\r\n          'sapAdminInstalledInstrument.applicationPlaceholder' | translate\r\n        \"\r\n        [settings]=\"{\r\n          getFilteredOptions: this.getFilteredOptions\r\n        }\"\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        @if (searchForm.controls.bpName.value) {\r\n          <button\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        }\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        @if (searchForm.controls.technicianLastName.value) {\r\n          <button\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        }\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        @if (searchForm.controls.serialNumber.value) {\r\n          <button\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        }\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        @if (searchForm.controls.instrumentNo.value) {\r\n          <button\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        }\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        @if (searchForm.controls.instrumentDesc.value) {\r\n          <button\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        }\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]=\"''\">{{\r\n            'sapAdminInstalledInstrument.empty' | translate\r\n          }}</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        @if (searchForm.controls.customerNo.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4 align-items-center row\">\r\n      @if (\r\n        searchForm?.get('territory') && ((territories$ | async) || []);\r\n        as territories\r\n      ) {\r\n        <ngx-st-search-select\r\n          [options]=\"territories || []\"\r\n          [selectLabel]=\"'sapAdminInstalledInstrument.territory' | translate\"\r\n          [optionLabelFields]=\"'name'\"\r\n          [optionValueField]=\"'id'\"\r\n          [selectFormControl]=\"searchForm.controls.territory\"\r\n          [selectBindType]=\"'control'\"\r\n          [searchLabel]=\"'sapAdminInstalledInstrument.search' | translate\"\r\n        ></ngx-st-search-select>\r\n      }\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'sapAdminInstalledInstrument.refresh' | translate\"\r\n        (click)=\"refreshTerritories()\"\r\n        type=\"button\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\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=\"{{ 'sapAdminInstalledInstrument.city' | translate }}\"\r\n        />\r\n        @if (searchForm.controls.city.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center row\">\r\n      @if (searchForm?.get('state') && ((states$ | async) || []); as states) {\r\n        <ngx-st-search-select\r\n          [options]=\"states || []\"\r\n          [selectLabel]=\"'sapAdminInstalledInstrument.state' | translate\"\r\n          [optionLabelFields]=\"'name'\"\r\n          [optionValueField]=\"'id'\"\r\n          [selectFormControl]=\"searchForm.controls.state\"\r\n          [selectBindType]=\"'control'\"\r\n          [searchLabel]=\"'sapAdminInstalledInstrument.search' | translate\"\r\n        ></ngx-st-search-select>\r\n      }\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'sapAdminInstalledInstrument.refresh' | translate\"\r\n        [disabled]=\"!searchForm.controls.country.value\"\r\n        (click)=\"refreshStates()\"\r\n        type=\"button\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\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=\"{{ 'sapAdminInstalledInstrument.county' | translate }}\"\r\n        />\r\n        @if (searchForm.controls.county.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3 align-items-center row\">\r\n      @if (\r\n        searchForm?.get('country') && ((countries$ | async) || []);\r\n        as countries\r\n      ) {\r\n        <ngx-st-search-select\r\n          [options]=\"countries || []\"\r\n          [selectLabel]=\"'sapAdminInstalledInstrument.country' | translate\"\r\n          [optionLabelFields]=\"'name'\"\r\n          [optionValueField]=\"'id'\"\r\n          [selectFormControl]=\"searchForm.controls.country\"\r\n          [selectBindType]=\"'control'\"\r\n          [searchLabel]=\"'sapAdminInstalledInstrument.search' | translate\"\r\n        ></ngx-st-search-select>\r\n      }\r\n      <button\r\n        mat-icon-button\r\n        [matTooltip]=\"'sapAdminInstalledInstrument.refresh' | translate\"\r\n        (click)=\"refreshCountries()\"\r\n        type=\"button\"\r\n      >\r\n        <mat-icon>refresh</mat-icon>\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        @if (searchForm.controls.endUserName.value) {\r\n          <button\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        }\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        @if (searchForm.controls.endUserCode.value) {\r\n          <button\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        }\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    class=\"row justify-content-sm-start justify-content-lg-center\"\r\n    style=\"margin-bottom: 10px\"\r\n  >\r\n    @if (showFilters()) {\r\n      <button\r\n        mat-raised-button\r\n        type=\"button\"\r\n        (click)=\"clearAllFilters()\"\r\n        style=\"margin-right: 10px\"\r\n      >\r\n        Clear All\r\n      </button>\r\n    }\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      color=\"accent\"\r\n      (click)=\"showFilters.set(!showFilters())\"\r\n    >\r\n      @if (showFilters()) {\r\n        {{ 'sapAdminInstalledInstrument.hideFilters' | translate }}\r\n      }\r\n      @if (!showFilters()) {\r\n        {{ 'sapAdminInstalledInstrument.showFilters' | translate }}\r\n      }\r\n    </button>\r\n    @if (showFilters()) {\r\n      <button\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    }\r\n  </div>\r\n</form>\r\n", styles: [".hide{display:none}\n"] }]
+        }], propDecorators: { multiselectAutocomplete: [{ type: i0.ViewChild, args: ['multiselectAutocomplete', { isSignal: true }] }], filtersChanged: [{ type: i0.Output, args: ["filtersChanged"] }] } });
 
 class SapInstalledInstrumentListComponent {
     constructor() {
-        this.accessToken = input();
-        this.territoryFilter = input.required();
-        this.showWithCardContent = input(true);
-        this.useMapButton = input(false);
-        this.installedInstruments = signal([]);
-        this.lastSearchFilters = signal({});
-        this.lastSearchSorts = signal({});
+        this.accessToken = input(...(ngDevMode ? [undefined, { debugName: "accessToken" }] : []));
+        this.territoryFilter = input.required(...(ngDevMode ? [{ debugName: "territoryFilter" }] : []));
+        this.showWithCardContent = input(true, ...(ngDevMode ? [{ debugName: "showWithCardContent" }] : []));
+        this.useMapButton = input(false, ...(ngDevMode ? [{ debugName: "useMapButton" }] : []));
+        this.installedInstruments = signal([], ...(ngDevMode ? [{ debugName: "installedInstruments" }] : []));
+        this.lastSearchFilters = signal({}, ...(ngDevMode ? [{ debugName: "lastSearchFilters" }] : []));
+        this.lastSearchSorts = signal({}, ...(ngDevMode ? [{ debugName: "lastSearchSorts" }] : []));
+        this.search$ = new Subject();
         this.sapInstalledInstrumentService = inject(SapInstalledInstrumentsService);
         this.changeDetector = inject(ChangeDetectorRef);
         this.router = inject(Router);
         this.activatedRoute = inject(ActivatedRoute);
+        this.destroyRef = inject(DestroyRef);
+        this.search$
+            .pipe(switchMap(({ searchForm, sort }) => this.sapInstalledInstrumentService.getInstalledInstrumentList(searchForm, sort)), takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            this.installedInstruments.set(res);
+            this.changeDetector.markForCheck();
+        });
     }
     ngOnInit() {
         this.sapInstalledInstrumentService.territoryFilter = this.territoryFilter();
@@ -466,29 +478,24 @@ class SapInstalledInstrumentListComponent {
                 ...sort,
             },
         });
-        this.sapInstalledInstrumentService
-            .getInstalledInstrumentList(searchForm, sort)
-            .subscribe(res => {
-            this.lastSearchFilters.set(searchForm);
-            this.lastSearchSorts.set(sort);
-            this.installedInstruments.set(res);
-            this.changeDetector.markForCheck();
-        });
+        this.lastSearchFilters.set(searchForm);
+        this.lastSearchSorts.set(sort);
+        this.search$.next({ searchForm, sort });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SapInstalledInstrumentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: SapInstalledInstrumentListComponent, isStandalone: false, selector: "app-sap-installed-instrument-list", inputs: { accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: true, isRequired: false, transformFunction: null }, territoryFilter: { classPropertyName: "territoryFilter", publicName: "territoryFilter", isSignal: true, isRequired: true, transformFunction: null }, showWithCardContent: { classPropertyName: "showWithCardContent", publicName: "showWithCardContent", isSignal: true, isRequired: false, transformFunction: null }, useMapButton: { classPropertyName: "useMapButton", publicName: "useMapButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "display-flex-component" }, ngImport: i0, template: "@if (showWithCardContent()) {\r\n  <ngx-st-card\r\n    [title]=\"\r\n      'sapAdminInstalledInstrument.titleInstalledInstrumentList' | translate\r\n    \"\r\n  >\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"installedInstrumentContent\"\r\n    ></ng-container>\r\n  </ngx-st-card>\r\n}\r\n\r\n@if (!showWithCardContent()) {\r\n  <ng-container [ngTemplateOutlet]=\"installedInstrumentContent\"></ng-container>\r\n}\r\n\r\n<ng-template #installedInstrumentContent>\r\n  <div style=\"display: flex; flex-direction: column; width: 100%\">\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      [useMapButton]=\"useMapButton()\"\r\n      (sortChanged)=\"sortChanged($event)\"\r\n    ></app-sap-installed-instrument-list-table>\r\n  </div>\r\n</ng-template>\r\n", styles: ["", ".card{background:#fff;border:none;box-shadow:0 1px 4px #00000024;margin-bottom:30px;margin-top:30px;font-size:1rem}.card .card-header{max-width:380px;text-align:center;margin-left:auto!important;margin-right:auto!important;border-radius:3px;margin-top:-20px;background:linear-gradient(60deg,#ffa726,#fb8c00)!important;padding:15px 30px;border:none}.card .card-header h4,.card .card-header h3{margin:0!important;color:#fff;font-size:1.5625rem;line-height:1.4em;font-weight:400}.card .card-body{position:relative;padding:.5rem}.card .card-body .back-link{color:#000;position:absolute;top:-40px;left:5px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.CardComponent, selector: "ngx-st-card", inputs: ["title", "createLink", "backLink", "showHistoryBack", "actionMenu", "actionButton", "noBodyTopPadding", "createLinkLabel"] }, { 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: ["useMapButton", "tableData"], outputs: ["sortChanged"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: SapInstalledInstrumentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: SapInstalledInstrumentListComponent, isStandalone: true, selector: "app-sap-installed-instrument-list", inputs: { accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: true, isRequired: false, transformFunction: null }, territoryFilter: { classPropertyName: "territoryFilter", publicName: "territoryFilter", isSignal: true, isRequired: true, transformFunction: null }, showWithCardContent: { classPropertyName: "showWithCardContent", publicName: "showWithCardContent", isSignal: true, isRequired: false, transformFunction: null }, useMapButton: { classPropertyName: "useMapButton", publicName: "useMapButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "display-flex-component" }, ngImport: i0, template: "@if (showWithCardContent()) {\r\n  <ngx-st-card\r\n    [title]=\"\r\n      'sapAdminInstalledInstrument.titleInstalledInstrumentList' | translate\r\n    \"\r\n  >\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"installedInstrumentContent\"\r\n    ></ng-container>\r\n  </ngx-st-card>\r\n}\r\n\r\n@if (!showWithCardContent()) {\r\n  <ng-container [ngTemplateOutlet]=\"installedInstrumentContent\"></ng-container>\r\n}\r\n\r\n<ng-template #installedInstrumentContent>\r\n  <div style=\"display: flex; flex-direction: column; width: 100%\">\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      [useMapButton]=\"useMapButton()\"\r\n      (sortChanged)=\"sortChanged($event)\"\r\n    ></app-sap-installed-instrument-list-table>\r\n  </div>\r\n</ng-template>\r\n", styles: ["", ".card{background:#fff;border:none;box-shadow:0 1px 4px #00000024;margin-bottom:30px;margin-top:30px;font-size:1rem}.card .card-header{max-width:380px;text-align:center;margin-left:auto!important;margin-right:auto!important;border-radius:3px;margin-top:-20px;background:linear-gradient(60deg,#ffa726,#fb8c00)!important;padding:15px 30px;border:none}.card .card-header h4,.card .card-header h3{margin:0!important;color:#fff;font-size:1.5625rem;line-height:1.4em;font-weight:400}.card .card-body{position:relative;padding:.5rem}.card .card-body .back-link{color:#000;position:absolute;top:-40px;left:5px}\n"], dependencies: [{ kind: "ngmodule", type: NgxStCardModule }, { kind: "component", type: i1$2.CardComponent, selector: "ngx-st-card", inputs: ["title", "createLink", "backLink", "showHistoryBack", "checkIframeHistoryOnBack", "actionMenu", "actionButton", "noBodyTopPadding", "createLinkLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: ["useMapButton", "tableData"], outputs: ["sortChanged"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SapInstalledInstrumentListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: SapInstalledInstrumentListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-sap-installed-instrument-list', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'display-flex-component' }, standalone: false, template: "@if (showWithCardContent()) {\r\n  <ngx-st-card\r\n    [title]=\"\r\n      'sapAdminInstalledInstrument.titleInstalledInstrumentList' | translate\r\n    \"\r\n  >\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"installedInstrumentContent\"\r\n    ></ng-container>\r\n  </ngx-st-card>\r\n}\r\n\r\n@if (!showWithCardContent()) {\r\n  <ng-container [ngTemplateOutlet]=\"installedInstrumentContent\"></ng-container>\r\n}\r\n\r\n<ng-template #installedInstrumentContent>\r\n  <div style=\"display: flex; flex-direction: column; width: 100%\">\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      [useMapButton]=\"useMapButton()\"\r\n      (sortChanged)=\"sortChanged($event)\"\r\n    ></app-sap-installed-instrument-list-table>\r\n  </div>\r\n</ng-template>\r\n", styles: [".card{background:#fff;border:none;box-shadow:0 1px 4px #00000024;margin-bottom:30px;margin-top:30px;font-size:1rem}.card .card-header{max-width:380px;text-align:center;margin-left:auto!important;margin-right:auto!important;border-radius:3px;margin-top:-20px;background:linear-gradient(60deg,#ffa726,#fb8c00)!important;padding:15px 30px;border:none}.card .card-header h4,.card .card-header h3{margin:0!important;color:#fff;font-size:1.5625rem;line-height:1.4em;font-weight:400}.card .card-body{position:relative;padding:.5rem}.card .card-body .back-link{color:#000;position:absolute;top:-40px;left:5px}\n"] }]
-        }] });
+            args: [{ selector: 'app-sap-installed-instrument-list', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'display-flex-component' }, imports: [NgxStCardModule, NgTemplateOutlet, SapInstalledInstrumentListSearchComponent, SapInstalledInstrumentListTableComponent, TranslatePipe], template: "@if (showWithCardContent()) {\r\n  <ngx-st-card\r\n    [title]=\"\r\n      'sapAdminInstalledInstrument.titleInstalledInstrumentList' | translate\r\n    \"\r\n  >\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"installedInstrumentContent\"\r\n    ></ng-container>\r\n  </ngx-st-card>\r\n}\r\n\r\n@if (!showWithCardContent()) {\r\n  <ng-container [ngTemplateOutlet]=\"installedInstrumentContent\"></ng-container>\r\n}\r\n\r\n<ng-template #installedInstrumentContent>\r\n  <div style=\"display: flex; flex-direction: column; width: 100%\">\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      [useMapButton]=\"useMapButton()\"\r\n      (sortChanged)=\"sortChanged($event)\"\r\n    ></app-sap-installed-instrument-list-table>\r\n  </div>\r\n</ng-template>\r\n", styles: [".card{background:#fff;border:none;box-shadow:0 1px 4px #00000024;margin-bottom:30px;margin-top:30px;font-size:1rem}.card .card-header{max-width:380px;text-align:center;margin-left:auto!important;margin-right:auto!important;border-radius:3px;margin-top:-20px;background:linear-gradient(60deg,#ffa726,#fb8c00)!important;padding:15px 30px;border:none}.card .card-header h4,.card .card-header h3{margin:0!important;color:#fff;font-size:1.5625rem;line-height:1.4em;font-weight:400}.card .card-body{position:relative;padding:.5rem}.card .card-body .back-link{color:#000;position:absolute;top:-40px;left:5px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { accessToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessToken", required: false }] }], territoryFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "territoryFilter", required: true }] }], showWithCardContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWithCardContent", required: false }] }], useMapButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "useMapButton", required: false }] }] } });
 
 class AttachmentsListViewComponent {
-    constructor(config) {
-        this.config = config;
-        this.attachments = input.required();
-        this.accessToken = input('');
-        this.baseDownloadLink = signal('');
+    constructor() {
+        this.attachments = input.required(...(ngDevMode ? [{ debugName: "attachments" }] : []));
+        this.accessToken = input('', ...(ngDevMode ? [{ debugName: "accessToken" }] : []));
+        this.baseDownloadLink = signal('', ...(ngDevMode ? [{ debugName: "baseDownloadLink" }] : []));
+        this.config = inject('config');
     }
     ngOnInit() {
         this.updateLink();
@@ -504,36 +511,33 @@ class AttachmentsListViewComponent {
             this.accessToken() +
             company);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AttachmentsListViewComponent, deps: [{ token: 'config' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: AttachmentsListViewComponent, isStandalone: false, selector: "app-attachments-list-view", inputs: { attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: true, transformFunction: null }, accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"attachments-list-view\">\r\n  <p class=\"attachments-title\">\r\n    {{ 'sapAdminInstalledInstrument.attachments' | translate }}:\r\n  </p>\r\n  <ul class=\"row\">\r\n    @for (attachment of attachments(); track attachment.id) {\r\n      <li class=\"row align-items-center\">\r\n        <p>{{ attachment.fileName }}.{{ attachment.fileExt }}</p>\r\n        <a\r\n          [href]=\"\r\n            baseDownloadLink() +\r\n            '&id=' +\r\n            attachment.id +\r\n            '&line=' +\r\n            attachment.line +\r\n            '&preview=true'\r\n          \"\r\n          target=\"_blank\"\r\n          (click)=\"updateLink()\"\r\n        >\r\n          <button mat-icon-button>\r\n            <mat-icon>preview</mat-icon>\r\n          </button>\r\n        </a>\r\n        <a\r\n          [href]=\"\r\n            baseDownloadLink() +\r\n            '&id=' +\r\n            attachment.id +\r\n            '&line=' +\r\n            attachment.line +\r\n            '&preview=false'\r\n          \"\r\n          target=\"_blank\"\r\n          (click)=\"updateLink()\"\r\n        >\r\n          <button mat-icon-button>\r\n            <mat-icon>cloud_download</mat-icon>\r\n          </button>\r\n        </a>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".attachments-list-view .attachments-title{font-weight:500;margin-bottom:0}.attachments-list-view ul{padding-left:0}.attachments-list-view ul li{padding:0 10px;border-right:2px solid #66bb6a}.attachments-list-view ul li:last-child{border-right:0}.attachments-list-view ul li p{margin-bottom:0}.attachments-list-view ul li button{width:32px;height:32px;line-height:32px;opacity:.8}.attachments-list-view ul li button:hover{opacity:1}.attachments-list-view ul li button mat-icon{font-size:22px;line-height:22px;width:22px;height:22px}\n"], dependencies: [{ kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: AttachmentsListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: AttachmentsListViewComponent, isStandalone: true, selector: "app-attachments-list-view", inputs: { attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: true, transformFunction: null }, accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"attachments-list-view\">\r\n  <p class=\"attachments-title\">\r\n    {{ 'sapAdminInstalledInstrument.attachments' | translate }}:\r\n  </p>\r\n  <ul class=\"row\">\r\n    @for (attachment of attachments(); track attachment.id) {\r\n      <li class=\"row align-items-center\">\r\n        <p>{{ attachment.fileName }}.{{ attachment.fileExt }}</p>\r\n        <a\r\n          [href]=\"\r\n            baseDownloadLink() +\r\n            '&id=' +\r\n            attachment.id +\r\n            '&line=' +\r\n            attachment.line +\r\n            '&preview=true'\r\n          \"\r\n          target=\"_blank\"\r\n          (click)=\"updateLink()\"\r\n        >\r\n          <button mat-icon-button>\r\n            <mat-icon>preview</mat-icon>\r\n          </button>\r\n        </a>\r\n        <a\r\n          [href]=\"\r\n            baseDownloadLink() +\r\n            '&id=' +\r\n            attachment.id +\r\n            '&line=' +\r\n            attachment.line +\r\n            '&preview=false'\r\n          \"\r\n          target=\"_blank\"\r\n          (click)=\"updateLink()\"\r\n        >\r\n          <button mat-icon-button>\r\n            <mat-icon>cloud_download</mat-icon>\r\n          </button>\r\n        </a>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".attachments-list-view .attachments-title{font-weight:500;margin-bottom:0}.attachments-list-view ul{padding-left:0}.attachments-list-view ul li{padding:0 10px;border-right:2px solid #66bb6a}.attachments-list-view ul li:last-child{border-right:0}.attachments-list-view ul li p{margin-bottom:0}.attachments-list-view ul li button{width:32px;height:32px;line-height:32px;opacity:.8}.attachments-list-view ul li button:hover{opacity:1}.attachments-list-view ul li button mat-icon{font-size:22px;line-height:22px;width:22px;height:22px}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AttachmentsListViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: AttachmentsListViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-attachments-list-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"attachments-list-view\">\r\n  <p class=\"attachments-title\">\r\n    {{ 'sapAdminInstalledInstrument.attachments' | translate }}:\r\n  </p>\r\n  <ul class=\"row\">\r\n    @for (attachment of attachments(); track attachment.id) {\r\n      <li class=\"row align-items-center\">\r\n        <p>{{ attachment.fileName }}.{{ attachment.fileExt }}</p>\r\n        <a\r\n          [href]=\"\r\n            baseDownloadLink() +\r\n            '&id=' +\r\n            attachment.id +\r\n            '&line=' +\r\n            attachment.line +\r\n            '&preview=true'\r\n          \"\r\n          target=\"_blank\"\r\n          (click)=\"updateLink()\"\r\n        >\r\n          <button mat-icon-button>\r\n            <mat-icon>preview</mat-icon>\r\n          </button>\r\n        </a>\r\n        <a\r\n          [href]=\"\r\n            baseDownloadLink() +\r\n            '&id=' +\r\n            attachment.id +\r\n            '&line=' +\r\n            attachment.line +\r\n            '&preview=false'\r\n          \"\r\n          target=\"_blank\"\r\n          (click)=\"updateLink()\"\r\n        >\r\n          <button mat-icon-button>\r\n            <mat-icon>cloud_download</mat-icon>\r\n          </button>\r\n        </a>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".attachments-list-view .attachments-title{font-weight:500;margin-bottom:0}.attachments-list-view ul{padding-left:0}.attachments-list-view ul li{padding:0 10px;border-right:2px solid #66bb6a}.attachments-list-view ul li:last-child{border-right:0}.attachments-list-view ul li p{margin-bottom:0}.attachments-list-view ul li button{width:32px;height:32px;line-height:32px;opacity:.8}.attachments-list-view ul li button:hover{opacity:1}.attachments-list-view ul li button mat-icon{font-size:22px;line-height:22px;width:22px;height:22px}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['config']
-                }] }] });
+            args: [{ selector: 'app-attachments-list-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton, MatIcon, TranslatePipe], template: "<div class=\"attachments-list-view\">\r\n  <p class=\"attachments-title\">\r\n    {{ 'sapAdminInstalledInstrument.attachments' | translate }}:\r\n  </p>\r\n  <ul class=\"row\">\r\n    @for (attachment of attachments(); track attachment.id) {\r\n      <li class=\"row align-items-center\">\r\n        <p>{{ attachment.fileName }}.{{ attachment.fileExt }}</p>\r\n        <a\r\n          [href]=\"\r\n            baseDownloadLink() +\r\n            '&id=' +\r\n            attachment.id +\r\n            '&line=' +\r\n            attachment.line +\r\n            '&preview=true'\r\n          \"\r\n          target=\"_blank\"\r\n          (click)=\"updateLink()\"\r\n        >\r\n          <button mat-icon-button>\r\n            <mat-icon>preview</mat-icon>\r\n          </button>\r\n        </a>\r\n        <a\r\n          [href]=\"\r\n            baseDownloadLink() +\r\n            '&id=' +\r\n            attachment.id +\r\n            '&line=' +\r\n            attachment.line +\r\n            '&preview=false'\r\n          \"\r\n          target=\"_blank\"\r\n          (click)=\"updateLink()\"\r\n        >\r\n          <button mat-icon-button>\r\n            <mat-icon>cloud_download</mat-icon>\r\n          </button>\r\n        </a>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".attachments-list-view .attachments-title{font-weight:500;margin-bottom:0}.attachments-list-view ul{padding-left:0}.attachments-list-view ul li{padding:0 10px;border-right:2px solid #66bb6a}.attachments-list-view ul li:last-child{border-right:0}.attachments-list-view ul li p{margin-bottom:0}.attachments-list-view ul li button{width:32px;height:32px;line-height:32px;opacity:.8}.attachments-list-view ul li button:hover{opacity:1}.attachments-list-view ul li button mat-icon{font-size:22px;line-height:22px;width:22px;height:22px}\n"] }]
+        }], propDecorators: { attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: true }] }], accessToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessToken", required: false }] }] } });
 
 class ActivityDetailsViewComponent {
     constructor() {
-        this.activity = input.required();
-        this.accessToken = input('');
+        this.activity = input.required(...(ngDevMode ? [{ debugName: "activity" }] : []));
+        this.accessToken = input('', ...(ngDevMode ? [{ debugName: "accessToken" }] : []));
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ActivityDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ActivityDetailsViewComponent, isStandalone: false, selector: "app-activity-details-view", inputs: { activity: { classPropertyName: "activity", publicName: "activity", isSignal: true, isRequired: true, transformFunction: null }, accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: true, isRequired: false, transformFunction: null } }, 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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.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>{{\r\n      'sapAdminInstalledInstrument.incompleteReason' | translate\r\n    }}</span>\r\n    <p>{{ activity().incompleteReason || '-' }}</p>\r\n  </div>\r\n</div>\r\n\r\n@if (activity().attachmentList.length > 0) {\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-12\">\r\n      <app-attachments-list-view\r\n        [attachments]=\"activity().attachmentList\"\r\n        [accessToken]=\"accessToken()\"\r\n      ></app-attachments-list-view>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ""], dependencies: [{ kind: "component", type: AttachmentsListViewComponent, selector: "app-attachments-list-view", inputs: ["attachments", "accessToken"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: ActivityDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: ActivityDetailsViewComponent, isStandalone: true, selector: "app-activity-details-view", inputs: { activity: { classPropertyName: "activity", publicName: "activity", isSignal: true, isRequired: true, transformFunction: null }, accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: true, isRequired: false, transformFunction: null } }, 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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.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>{{\r\n      'sapAdminInstalledInstrument.incompleteReason' | translate\r\n    }}</span>\r\n    <p>{{ activity().incompleteReason || '-' }}</p>\r\n  </div>\r\n</div>\r\n\r\n@if (activity().attachmentList.length > 0) {\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-12\">\r\n      <app-attachments-list-view\r\n        [attachments]=\"activity().attachmentList\"\r\n        [accessToken]=\"accessToken()\"\r\n      ></app-attachments-list-view>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ""], dependencies: [{ kind: "component", type: AttachmentsListViewComponent, selector: "app-attachments-list-view", inputs: ["attachments", "accessToken"] }, { kind: "ngmodule", type: StDateFormatModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ActivityDetailsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: ActivityDetailsViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-activity-details-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.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>{{\r\n      'sapAdminInstalledInstrument.incompleteReason' | translate\r\n    }}</span>\r\n    <p>{{ activity().incompleteReason || '-' }}</p>\r\n  </div>\r\n</div>\r\n\r\n@if (activity().attachmentList.length > 0) {\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-12\">\r\n      <app-attachments-list-view\r\n        [attachments]=\"activity().attachmentList\"\r\n        [accessToken]=\"accessToken()\"\r\n      ></app-attachments-list-view>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n"] }]
-        }] });
+            args: [{ selector: 'app-activity-details-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AttachmentsListViewComponent, TranslatePipe, StDateFormatModule], 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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.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>{{\r\n      'sapAdminInstalledInstrument.incompleteReason' | translate\r\n    }}</span>\r\n    <p>{{ activity().incompleteReason || '-' }}</p>\r\n  </div>\r\n</div>\r\n\r\n@if (activity().attachmentList.length > 0) {\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-12\">\r\n      <app-attachments-list-view\r\n        [attachments]=\"activity().attachmentList\"\r\n        [accessToken]=\"accessToken()\"\r\n      ></app-attachments-list-view>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n"] }]
+        }], propDecorators: { activity: [{ type: i0.Input, args: [{ isSignal: true, alias: "activity", required: true }] }], accessToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessToken", required: false }] }] } });
 
 class ActivitiesListViewComponent {
     constructor() {
-        this.class = 'display-flex-component';
-        this.activities = input();
-        this.accessToken = input('');
+        this.paginator = viewChild.required(MatPaginator);
+        this.activities = input(...(ngDevMode ? [undefined, { debugName: "activities" }] : []));
+        this.accessToken = input('', ...(ngDevMode ? [{ debugName: "accessToken" }] : []));
         this.columnsToDisplay = [
             'activityNumber',
             'detailedSymptom',
@@ -542,20 +546,22 @@ class ActivitiesListViewComponent {
             'startTime',
             'endTime',
         ];
-        this.expandedElement = signal(null);
-    }
-    ngOnInit() {
-        this.setTable();
+        this.tableSource = signal(new MatTableDataSource(), ...(ngDevMode ? [{ debugName: "tableSource" }] : []));
+        this.expandedElement = signal(null, ...(ngDevMode ? [{ debugName: "expandedElement" }] : []));
+        effect(() => {
+            const activities = this.activities();
+            this.tableSource.update(oldData => {
+                oldData.data = activities ?? [];
+                return oldData;
+            });
+        });
     }
     ngAfterViewInit() {
-        this.paginator.pageSize = 5;
-        this.tableSource.paginator = this.paginator;
-    }
-    setTable() {
-        this.tableSource = new MatTableDataSource(this.activities());
+        this.paginator().pageSize = 5;
+        this.tableSource().paginator = this.paginator();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ActivitiesListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ActivitiesListViewComponent, isStandalone: false, selector: "app-activities-list-view", inputs: { activities: { classPropertyName: "activities", publicName: "activities", isSignal: true, isRequired: false, transformFunction: null }, accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: true, isRequired: false, transformFunction: null } }, 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\r\n    class=\"st-material-table\"\r\n    mat-table\r\n    [dataSource]=\"tableSource\"\r\n    [multiTemplateDataRows]=\"true\"\r\n  >\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>\r\n        {{ 'sapAdminInstalledInstrument.type' | translate }}\r\n      </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          @if (element == expandedElement()) {\r\n            <app-activity-details-view\r\n              [activity]=\"element\"\r\n              [accessToken]=\"accessToken()\"\r\n            ></app-activity-details-view>\r\n          }\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)=\"\r\n        expandedElement.set(expandedElement() === element ? null : element)\r\n      \"\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: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".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:var(--surface-100, whitesmoke)!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-color:var(--surface-100, whitesmoke)!important}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: "component", type: i1$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ActivityDetailsViewComponent, selector: "app-activity-details-view", inputs: ["activity", "accessToken"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: ActivitiesListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: ActivitiesListViewComponent, isStandalone: true, selector: "app-activities-list-view", inputs: { activities: { classPropertyName: "activities", publicName: "activities", isSignal: true, isRequired: false, transformFunction: null }, accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "display-flex-component" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"activities-list-view\">\r\n  <table\r\n    class=\"st-material-table\"\r\n    mat-table\r\n    [dataSource]=\"tableSource()\"\r\n    [multiTemplateDataRows]=\"true\"\r\n  >\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>\r\n        {{ 'sapAdminInstalledInstrument.type' | translate }}\r\n      </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          @if (element == expandedElement()) {\r\n            <app-activity-details-view\r\n              [activity]=\"element\"\r\n              [accessToken]=\"accessToken()\"\r\n            ></app-activity-details-view>\r\n          }\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)=\"\r\n        expandedElement.set(expandedElement() === element ? null : element)\r\n      \"\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: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".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:var(--surface-100, whitesmoke)!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-color:var(--surface-100, whitesmoke)!important}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: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: ActivityDetailsViewComponent, selector: "app-activity-details-view", inputs: ["activity", "accessToken"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: StDateFormatModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -563,7 +569,7 @@ class ActivitiesListViewComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ActivitiesListViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: ActivitiesListViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-activities-list-view', animations: [
                         trigger('detailExpand', [
@@ -571,26 +577,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                             state('expanded', style({ height: '*' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"activities-list-view\">\r\n  <table\r\n    class=\"st-material-table\"\r\n    mat-table\r\n    [dataSource]=\"tableSource\"\r\n    [multiTemplateDataRows]=\"true\"\r\n  >\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>\r\n        {{ 'sapAdminInstalledInstrument.type' | translate }}\r\n      </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          @if (element == expandedElement()) {\r\n            <app-activity-details-view\r\n              [activity]=\"element\"\r\n              [accessToken]=\"accessToken()\"\r\n            ></app-activity-details-view>\r\n          }\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)=\"\r\n        expandedElement.set(expandedElement() === element ? null : element)\r\n      \"\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: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".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:var(--surface-100, whitesmoke)!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-color:var(--surface-100, whitesmoke)!important}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: () => [], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], paginator: [{
-                type: ViewChild,
-                args: [MatPaginator]
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'display-flex-component' }, imports: [MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, ActivityDetailsViewComponent, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatPaginator, TranslatePipe, StDateFormatModule], template: "<div class=\"activities-list-view\">\r\n  <table\r\n    class=\"st-material-table\"\r\n    mat-table\r\n    [dataSource]=\"tableSource()\"\r\n    [multiTemplateDataRows]=\"true\"\r\n  >\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>\r\n        {{ 'sapAdminInstalledInstrument.type' | translate }}\r\n      </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          @if (element == expandedElement()) {\r\n            <app-activity-details-view\r\n              [activity]=\"element\"\r\n              [accessToken]=\"accessToken()\"\r\n            ></app-activity-details-view>\r\n          }\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)=\"\r\n        expandedElement.set(expandedElement() === element ? null : element)\r\n      \"\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: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".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:var(--surface-100, whitesmoke)!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-color:var(--surface-100, whitesmoke)!important}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: () => [], propDecorators: { paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], activities: [{ type: i0.Input, args: [{ isSignal: true, alias: "activities", required: false }] }], accessToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessToken", required: false }] }] } });
 
 class ServiceContractDetailsViewComponent {
     constructor() {
-        this.contract = input.required();
+        this.contract = input.required(...(ngDevMode ? [{ debugName: "contract" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ServiceContractDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.25", type: ServiceContractDetailsViewComponent, isStandalone: false, selector: "app-service-contract-details-view", inputs: { contract: { classPropertyName: "contract", publicName: "contract", isSignal: true, isRequired: true, transformFunction: null } }, 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>{{ 'sapAdminInstalledInstrument.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>{{\r\n      'sapAdminInstalledInstrument.startDateDetails' | translate\r\n    }}</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>{{\r\n      'sapAdminInstalledInstrument.terminationDateDetails' | translate\r\n    }}</span>\r\n    <p>{{ (contract().terminationDateDetail | stDateFormatPipe) || '-' }}</p>\r\n  </div>\r\n</div>\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ""], dependencies: [{ kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.DateFormatPipe, name: "stDateFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: ServiceContractDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.29", type: ServiceContractDetailsViewComponent, isStandalone: true, selector: "app-service-contract-details-view", inputs: { contract: { classPropertyName: "contract", publicName: "contract", isSignal: true, isRequired: true, transformFunction: null } }, 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>{{ 'sapAdminInstalledInstrument.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>{{\r\n      'sapAdminInstalledInstrument.startDateDetails' | translate\r\n    }}</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>{{\r\n      'sapAdminInstalledInstrument.terminationDateDetails' | translate\r\n    }}</span>\r\n    <p>{{ (contract().terminationDateDetail | stDateFormatPipe) || '-' }}</p>\r\n  </div>\r\n</div>\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ""], dependencies: [{ kind: "ngmodule", type: StDateFormatModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.DateFormatPipe, name: "stDateFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ServiceContractDetailsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: ServiceContractDetailsViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-service-contract-details-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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>{{ 'sapAdminInstalledInstrument.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>{{\r\n      'sapAdminInstalledInstrument.startDateDetails' | translate\r\n    }}</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>{{\r\n      'sapAdminInstalledInstrument.terminationDateDetails' | translate\r\n    }}</span>\r\n    <p>{{ (contract().terminationDateDetail | stDateFormatPipe) || '-' }}</p>\r\n  </div>\r\n</div>\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n"] }]
-        }] });
+            args: [{ selector: 'app-service-contract-details-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe, StDateFormatModule], 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>{{ 'sapAdminInstalledInstrument.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>{{\r\n      'sapAdminInstalledInstrument.startDateDetails' | translate\r\n    }}</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>{{\r\n      'sapAdminInstalledInstrument.terminationDateDetails' | translate\r\n    }}</span>\r\n    <p>{{ (contract().terminationDateDetail | stDateFormatPipe) || '-' }}</p>\r\n  </div>\r\n</div>\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n"] }]
+        }], propDecorators: { contract: [{ type: i0.Input, args: [{ isSignal: true, alias: "contract", required: true }] }] } });
 
 class ServiceContractsModalDetailsViewComponent {
     constructor() {
@@ -600,23 +600,21 @@ class ServiceContractsModalDetailsViewComponent {
     close() {
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ServiceContractsModalDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ServiceContractsModalDetailsViewComponent, isStandalone: false, selector: "app-service-contracts-modal-details-view", ngImport: i0, template: "<h1 mat-dialog-title>\r\n  {{ 'sapAdminInstalledInstrument.serviceContract' | translate }}\r\n</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()\">\r\n    {{ 'sapAdminInstalledInstrument.close' | translate }}\r\n  </button>\r\n</div>\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ""], dependencies: [{ kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i2$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: ServiceContractDetailsViewComponent, selector: "app-service-contract-details-view", inputs: ["contract"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: ServiceContractsModalDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.29", type: ServiceContractsModalDetailsViewComponent, isStandalone: true, selector: "app-service-contracts-modal-details-view", ngImport: i0, template: "<h1 mat-dialog-title>\r\n  {{ 'sapAdminInstalledInstrument.serviceContract' | translate }}\r\n</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()\">\r\n    {{ 'sapAdminInstalledInstrument.close' | translate }}\r\n  </button>\r\n</div>\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ""], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: ServiceContractDetailsViewComponent, selector: "app-service-contract-details-view", inputs: ["contract"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ServiceContractsModalDetailsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: ServiceContractsModalDetailsViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-service-contracts-modal-details-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<h1 mat-dialog-title>\r\n  {{ 'sapAdminInstalledInstrument.serviceContract' | translate }}\r\n</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()\">\r\n    {{ 'sapAdminInstalledInstrument.close' | translate }}\r\n  </button>\r\n</div>\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n"] }]
+            args: [{ selector: 'app-service-contracts-modal-details-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogTitle, CdkScrollable, MatDialogContent, ServiceContractDetailsViewComponent, MatDialogActions, MatButton, TranslatePipe], template: "<h1 mat-dialog-title>\r\n  {{ 'sapAdminInstalledInstrument.serviceContract' | translate }}\r\n</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()\">\r\n    {{ 'sapAdminInstalledInstrument.close' | translate }}\r\n  </button>\r\n</div>\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n"] }]
         }] });
 
 class CallDetailsViewComponent {
     constructor() {
-        this.call = input.required();
-        this.contracts = input.required();
-        this.accessToken = input('');
-        this.contractDetails = signal(undefined);
-        this.activitiesLoading = signal(true);
-        this.activities$ = signal(null);
-        this.activities = signal([]);
+        this.call = input.required(...(ngDevMode ? [{ debugName: "call" }] : []));
+        this.contracts = input.required(...(ngDevMode ? [{ debugName: "contracts" }] : []));
+        this.accessToken = input('', ...(ngDevMode ? [{ debugName: "accessToken" }] : []));
+        this.contractDetails = signal(undefined, ...(ngDevMode ? [{ debugName: "contractDetails" }] : []));
+        this.activities = signal([], ...(ngDevMode ? [{ debugName: "activities" }] : []));
         this.dialog = inject(MatDialog);
         this.sapInstalledInstruments = inject(SapInstalledInstrumentsService);
     }
@@ -624,7 +622,9 @@ class CallDetailsViewComponent {
         if (this.call() && this.contracts() && this.call().contractNo) {
             this.contractDetails.set(this.contracts().find(contract => contract.contractId === this.call().contractNo));
         }
-        this.loadActivities();
+        this.sapInstalledInstruments
+            .getActivities(this.call().callId)
+            .subscribe(res => this.activities.set(res));
     }
     openContractModel() {
         this.dialog.open(ServiceContractsModalDetailsViewComponent, {
@@ -633,29 +633,20 @@ class CallDetailsViewComponent {
         });
     }
     tabChanged(event) { }
-    loadActivities() {
-        const activitiesObservable = this.sapInstalledInstruments
-            .getActivities(this.call().callId)
-            .pipe(tap(res => {
-            this.activities.set(res);
-            this.activitiesLoading.set(false);
-        }));
-        this.activities$.set(activitiesObservable);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CallDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CallDetailsViewComponent, isStandalone: false, selector: "app-call-details-view", inputs: { call: { classPropertyName: "call", publicName: "call", isSignal: true, isRequired: true, transformFunction: null }, contracts: { classPropertyName: "contracts", publicName: "contracts", isSignal: true, isRequired: true, transformFunction: null }, accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: true, isRequired: false, transformFunction: null } }, 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          @if (contractDetails()) {\r\n            <mat-icon class=\"show-contract\" (click)=\"openContractModel()\"\r\n              >visibility</mat-icon\r\n            >\r\n          }\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>{{\r\n          'sapAdminInstalledInstrument.contactPerson' | translate\r\n        }}</span>\r\n        <p>{{ call().contactPerson || '-' }}</p>\r\n      </div>\r\n      <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{ 'sapAdminInstalledInstrument.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>{{\r\n          'sapAdminInstalledInstrument.shipToAddress' | translate\r\n        }}</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>{{\r\n          'sapAdminInstalledInstrument.billToAddress' | translate\r\n        }}</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>{{\r\n          'sapAdminInstalledInstrument.problemSubtype' | translate\r\n        }}</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>\r\n          {{\r\n            call().technicianFirstName\r\n              ? call().technicianFirstName + ' ' + call().technicianLastName\r\n              : '-'\r\n          }}\r\n        </p>\r\n      </div>\r\n      <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{\r\n          'sapAdminInstalledInstrument.engineerName' | translate\r\n        }}</span>\r\n        <p>{{ call().engeneerName || '-' }}</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>{{ 'sapAdminInstalledInstrument.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>{{\r\n          'sapAdminInstalledInstrument.internalComments' | translate\r\n        }}</span>\r\n        <p>{{ call().internalComments || '-' }}</p>\r\n      </div>\r\n    </div>\r\n\r\n    @if (call()?.attachmentList && call().attachmentList!.length > 0) {\r\n      <hr />\r\n      <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-12\">\r\n          <app-attachments-list-view\r\n            [attachments]=\"call().attachmentList!\"\r\n            [accessToken]=\"accessToken()\"\r\n          ></app-attachments-list-view>\r\n        </div>\r\n      </div>\r\n    }\r\n  </mat-tab>\r\n\r\n  <mat-tab\r\n    label=\"{{ 'sapAdminInstalledInstrument.activities' | translate }} ({{\r\n      activities().length || 0\r\n    }})\"\r\n  >\r\n    @if (activities$() | async) {\r\n      <app-activities-list-view\r\n        [activities]=\"activities()\"\r\n        [accessToken]=\"accessToken()\"\r\n      ></app-activities-list-view>\r\n    }\r\n  </mat-tab>\r\n</mat-tab-group>\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".show-contract{margin-left:5px;font-size:22px;opacity:.8;cursor:pointer;color:#1976d2}.show-contract:hover{opacity:1}\n"], dependencies: [{ kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: ActivitiesListViewComponent, selector: "app-activities-list-view", inputs: ["activities", "accessToken"] }, { kind: "component", type: AttachmentsListViewComponent, selector: "app-attachments-list-view", inputs: ["attachments", "accessToken"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: CallDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: CallDetailsViewComponent, isStandalone: true, selector: "app-call-details-view", inputs: { call: { classPropertyName: "call", publicName: "call", isSignal: true, isRequired: true, transformFunction: null }, contracts: { classPropertyName: "contracts", publicName: "contracts", isSignal: true, isRequired: true, transformFunction: null }, accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: true, isRequired: false, transformFunction: null } }, 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          @if (contractDetails()) {\r\n            <mat-icon class=\"show-contract\" (click)=\"openContractModel()\"\r\n              >visibility</mat-icon\r\n            >\r\n          }\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>{{\r\n          'sapAdminInstalledInstrument.contactPerson' | translate\r\n        }}</span>\r\n        <p>{{ call().contactPerson || '-' }}</p>\r\n      </div>\r\n      <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{ 'sapAdminInstalledInstrument.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>{{\r\n          'sapAdminInstalledInstrument.shipToAddress' | translate\r\n        }}</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>{{\r\n          'sapAdminInstalledInstrument.billToAddress' | translate\r\n        }}</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>{{\r\n          'sapAdminInstalledInstrument.problemSubtype' | translate\r\n        }}</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>\r\n          {{\r\n            call().technicianFirstName\r\n              ? call().technicianFirstName + ' ' + call().technicianLastName\r\n              : '-'\r\n          }}\r\n        </p>\r\n      </div>\r\n      <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{\r\n          'sapAdminInstalledInstrument.engineerName' | translate\r\n        }}</span>\r\n        <p>{{ call().engeneerName || '-' }}</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>{{ 'sapAdminInstalledInstrument.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>{{\r\n          'sapAdminInstalledInstrument.internalComments' | translate\r\n        }}</span>\r\n        <p>{{ call().internalComments || '-' }}</p>\r\n      </div>\r\n    </div>\r\n\r\n    @if (call()?.attachmentList && call().attachmentList!.length > 0) {\r\n      <hr />\r\n      <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-12\">\r\n          <app-attachments-list-view\r\n            [attachments]=\"call().attachmentList!\"\r\n            [accessToken]=\"accessToken()\"\r\n          ></app-attachments-list-view>\r\n        </div>\r\n      </div>\r\n    }\r\n  </mat-tab>\r\n\r\n  <mat-tab\r\n    label=\"{{ 'sapAdminInstalledInstrument.activities' | translate }} ({{\r\n      activities().length\r\n    }})\"\r\n  >\r\n    <app-activities-list-view\r\n      [activities]=\"activities()\"\r\n      [accessToken]=\"accessToken()\"\r\n    ></app-activities-list-view>\r\n  </mat-tab>\r\n</mat-tab-group>\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".show-contract{margin-left:5px;font-size:22px;opacity:.8;cursor:pointer;color:#1976d2}.show-contract:hover{opacity:1}\n"], dependencies: [{ kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AttachmentsListViewComponent, selector: "app-attachments-list-view", inputs: ["attachments", "accessToken"] }, { kind: "component", type: ActivitiesListViewComponent, selector: "app-activities-list-view", inputs: ["activities", "accessToken"] }, { kind: "ngmodule", type: StDateFormatModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CallDetailsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: CallDetailsViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-call-details-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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          @if (contractDetails()) {\r\n            <mat-icon class=\"show-contract\" (click)=\"openContractModel()\"\r\n              >visibility</mat-icon\r\n            >\r\n          }\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>{{\r\n          'sapAdminInstalledInstrument.contactPerson' | translate\r\n        }}</span>\r\n        <p>{{ call().contactPerson || '-' }}</p>\r\n      </div>\r\n      <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{ 'sapAdminInstalledInstrument.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>{{\r\n          'sapAdminInstalledInstrument.shipToAddress' | translate\r\n        }}</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>{{\r\n          'sapAdminInstalledInstrument.billToAddress' | translate\r\n        }}</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>{{\r\n          'sapAdminInstalledInstrument.problemSubtype' | translate\r\n        }}</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>\r\n          {{\r\n            call().technicianFirstName\r\n              ? call().technicianFirstName + ' ' + call().technicianLastName\r\n              : '-'\r\n          }}\r\n        </p>\r\n      </div>\r\n      <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{\r\n          'sapAdminInstalledInstrument.engineerName' | translate\r\n        }}</span>\r\n        <p>{{ call().engeneerName || '-' }}</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>{{ 'sapAdminInstalledInstrument.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>{{\r\n          'sapAdminInstalledInstrument.internalComments' | translate\r\n        }}</span>\r\n        <p>{{ call().internalComments || '-' }}</p>\r\n      </div>\r\n    </div>\r\n\r\n    @if (call()?.attachmentList && call().attachmentList!.length > 0) {\r\n      <hr />\r\n      <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-12\">\r\n          <app-attachments-list-view\r\n            [attachments]=\"call().attachmentList!\"\r\n            [accessToken]=\"accessToken()\"\r\n          ></app-attachments-list-view>\r\n        </div>\r\n      </div>\r\n    }\r\n  </mat-tab>\r\n\r\n  <mat-tab\r\n    label=\"{{ 'sapAdminInstalledInstrument.activities' | translate }} ({{\r\n      activities().length || 0\r\n    }})\"\r\n  >\r\n    @if (activities$() | async) {\r\n      <app-activities-list-view\r\n        [activities]=\"activities()\"\r\n        [accessToken]=\"accessToken()\"\r\n      ></app-activities-list-view>\r\n    }\r\n  </mat-tab>\r\n</mat-tab-group>\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".show-contract{margin-left:5px;font-size:22px;opacity:.8;cursor:pointer;color:#1976d2}.show-contract:hover{opacity:1}\n"] }]
-        }] });
+            args: [{ selector: 'app-call-details-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTabGroup, MatTab, MatIcon, AttachmentsListViewComponent, ActivitiesListViewComponent, TranslatePipe, StDateFormatModule], 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          @if (contractDetails()) {\r\n            <mat-icon class=\"show-contract\" (click)=\"openContractModel()\"\r\n              >visibility</mat-icon\r\n            >\r\n          }\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>{{\r\n          'sapAdminInstalledInstrument.contactPerson' | translate\r\n        }}</span>\r\n        <p>{{ call().contactPerson || '-' }}</p>\r\n      </div>\r\n      <div class=\"col-xs-12 col-sm-3\">\r\n        <span>{{ 'sapAdminInstalledInstrument.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>{{\r\n          'sapAdminInstalledInstrument.shipToAddress' | translate\r\n        }}</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>{{\r\n          'sapAdminInstalledInstrument.billToAddress' | translate\r\n        }}</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>{{\r\n          'sapAdminInstalledInstrument.problemSubtype' | translate\r\n        }}</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>\r\n          {{\r\n            call().technicianFirstName\r\n              ? call().technicianFirstName + ' ' + call().technicianLastName\r\n              : '-'\r\n          }}\r\n        </p>\r\n      </div>\r\n      <div class=\"col-xs-12 col-sm-4\">\r\n        <span>{{\r\n          'sapAdminInstalledInstrument.engineerName' | translate\r\n        }}</span>\r\n        <p>{{ call().engeneerName || '-' }}</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>{{ 'sapAdminInstalledInstrument.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>{{\r\n          'sapAdminInstalledInstrument.internalComments' | translate\r\n        }}</span>\r\n        <p>{{ call().internalComments || '-' }}</p>\r\n      </div>\r\n    </div>\r\n\r\n    @if (call()?.attachmentList && call().attachmentList!.length > 0) {\r\n      <hr />\r\n      <div class=\"group-details row\">\r\n        <div class=\"col-xs-12 col-sm-12\">\r\n          <app-attachments-list-view\r\n            [attachments]=\"call().attachmentList!\"\r\n            [accessToken]=\"accessToken()\"\r\n          ></app-attachments-list-view>\r\n        </div>\r\n      </div>\r\n    }\r\n  </mat-tab>\r\n\r\n  <mat-tab\r\n    label=\"{{ 'sapAdminInstalledInstrument.activities' | translate }} ({{\r\n      activities().length\r\n    }})\"\r\n  >\r\n    <app-activities-list-view\r\n      [activities]=\"activities()\"\r\n      [accessToken]=\"accessToken()\"\r\n    ></app-activities-list-view>\r\n  </mat-tab>\r\n</mat-tab-group>\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".show-contract{margin-left:5px;font-size:22px;opacity:.8;cursor:pointer;color:#1976d2}.show-contract:hover{opacity:1}\n"] }]
+        }], propDecorators: { call: [{ type: i0.Input, args: [{ isSignal: true, alias: "call", required: true }] }], contracts: [{ type: i0.Input, args: [{ isSignal: true, alias: "contracts", required: true }] }], accessToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessToken", required: false }] }] } });
 
 class CallsListViewComponent {
     constructor() {
         this.paginator = viewChild.required(MatPaginator);
-        this.calls = input.required();
-        this.contracts = input.required();
-        this.accessToken = input('');
+        this.calls = input.required(...(ngDevMode ? [{ debugName: "calls" }] : []));
+        this.contracts = input.required(...(ngDevMode ? [{ debugName: "contracts" }] : []));
+        this.accessToken = input('', ...(ngDevMode ? [{ debugName: "accessToken" }] : []));
         this.columnsToDisplay = [
             'callId',
             'callStatus',
@@ -667,21 +658,22 @@ class CallsListViewComponent {
             'createdOn',
             'closedOn',
         ];
-        this.tableSource = signal(new MatTableDataSource([]));
-        this.expandedElement = signal(null);
-    }
-    ngOnInit() {
-        this.setTable();
+        this.tableSource = signal(new MatTableDataSource([]), ...(ngDevMode ? [{ debugName: "tableSource" }] : []));
+        this.expandedElement = signal(null, ...(ngDevMode ? [{ debugName: "expandedElement" }] : []));
+        effect(() => {
+            const calls = this.calls();
+            this.tableSource.update(oldData => {
+                oldData.data = calls ?? [];
+                return oldData;
+            });
+        });
     }
     ngAfterViewInit() {
         this.paginator().pageSize = 10;
         this.tableSource().paginator = this.paginator();
     }
-    setTable() {
-        this.tableSource.set(new MatTableDataSource(this.calls()));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CallsListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CallsListViewComponent, isStandalone: false, selector: "app-calls-list-view", inputs: { calls: { classPropertyName: "calls", publicName: "calls", isSignal: true, isRequired: true, transformFunction: null }, contracts: { classPropertyName: "contracts", publicName: "contracts", isSignal: true, isRequired: true, transformFunction: null }, accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "display-flex-component" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"calls-list-view\">\r\n  <table\r\n    class=\"st-material-table\"\r\n    mat-table\r\n    [dataSource]=\"tableSource()\"\r\n    multiTemplateDataRows\r\n  >\r\n    <ng-container matColumnDef=\"callId\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.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        {{ 'sapAdminInstalledInstrument.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=\"engeneerName\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.engineerName' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.engeneerName }}</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          @if (element == expandedElement) {\r\n            <app-call-details-view\r\n              [call]=\"element\"\r\n              [contracts]=\"contracts()\"\r\n              [accessToken]=\"accessToken()\"\r\n            ></app-call-details-view>\r\n          }\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: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".calls-list-view{width:100%}table::ng-deep tbody>tr:not(.details-expanded-row):hover{background-color:var(--surface-100, whitesmoke)!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-color:var(--surface-100, whitesmoke)!important}table::ng-deep tbody>tr.details-element-row td{border-bottom-width:0}table::ng-deep tbody>tr.details-expanded-row{background-color:var(--active-table-row, var(--active-table-row, #c8e6c9));border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr.details-expanded-row+tr{border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9);border-bottom:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr .mat-column-expanded{width:50px}\n"], dependencies: [{ kind: "component", type: i1$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: CallDetailsViewComponent, selector: "app-call-details-view", inputs: ["call", "contracts", "accessToken"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: CallsListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: CallsListViewComponent, isStandalone: true, selector: "app-calls-list-view", inputs: { calls: { classPropertyName: "calls", publicName: "calls", isSignal: true, isRequired: true, transformFunction: null }, contracts: { classPropertyName: "contracts", publicName: "contracts", isSignal: true, isRequired: true, transformFunction: null }, accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "display-flex-component" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"calls-list-view\">\r\n  <table\r\n    class=\"st-material-table\"\r\n    mat-table\r\n    [dataSource]=\"tableSource()\"\r\n    multiTemplateDataRows\r\n  >\r\n    <ng-container matColumnDef=\"callId\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.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        {{ 'sapAdminInstalledInstrument.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=\"engeneerName\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.engineerName' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.engeneerName }}</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          @if (element == expandedElement) {\r\n            <app-call-details-view\r\n              [call]=\"element\"\r\n              [contracts]=\"contracts()\"\r\n              [accessToken]=\"accessToken()\"\r\n            ></app-call-details-view>\r\n          }\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: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".calls-list-view{width:100%}table::ng-deep tbody>tr:not(.details-expanded-row):hover{background-color:var(--surface-100, whitesmoke)!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-color:var(--surface-100, whitesmoke)!important}table::ng-deep tbody>tr.details-element-row td{border-bottom-width:0}table::ng-deep tbody>tr.details-expanded-row{background-color:var(--active-table-row, var(--active-table-row, #c8e6c9));border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr.details-expanded-row+tr{border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9);border-bottom:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr .mat-column-expanded{width:50px}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: CallDetailsViewComponent, selector: "app-call-details-view", inputs: ["call", "contracts", "accessToken"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: StDateFormatModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -689,7 +681,7 @@ class CallsListViewComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CallsListViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: CallsListViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-calls-list-view', animations: [
                         trigger('detailExpand', [
@@ -697,26 +689,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                             state('expanded', style({ height: '*' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'display-flex-component' }, standalone: false, template: "<div class=\"calls-list-view\">\r\n  <table\r\n    class=\"st-material-table\"\r\n    mat-table\r\n    [dataSource]=\"tableSource()\"\r\n    multiTemplateDataRows\r\n  >\r\n    <ng-container matColumnDef=\"callId\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.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        {{ 'sapAdminInstalledInstrument.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=\"engeneerName\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.engineerName' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.engeneerName }}</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          @if (element == expandedElement) {\r\n            <app-call-details-view\r\n              [call]=\"element\"\r\n              [contracts]=\"contracts()\"\r\n              [accessToken]=\"accessToken()\"\r\n            ></app-call-details-view>\r\n          }\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: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".calls-list-view{width:100%}table::ng-deep tbody>tr:not(.details-expanded-row):hover{background-color:var(--surface-100, whitesmoke)!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-color:var(--surface-100, whitesmoke)!important}table::ng-deep tbody>tr.details-element-row td{border-bottom-width:0}table::ng-deep tbody>tr.details-expanded-row{background-color:var(--active-table-row, var(--active-table-row, #c8e6c9));border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr.details-expanded-row+tr{border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9);border-bottom:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr .mat-column-expanded{width:50px}\n"] }]
-        }] });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'display-flex-component' }, imports: [MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, CallDetailsViewComponent, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatPaginator, TranslatePipe, StDateFormatModule], template: "<div class=\"calls-list-view\">\r\n  <table\r\n    class=\"st-material-table\"\r\n    mat-table\r\n    [dataSource]=\"tableSource()\"\r\n    multiTemplateDataRows\r\n  >\r\n    <ng-container matColumnDef=\"callId\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.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        {{ 'sapAdminInstalledInstrument.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=\"engeneerName\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        {{ 'sapAdminInstalledInstrument.engineerName' | translate }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let element\">{{ element.engeneerName }}</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          @if (element == expandedElement) {\r\n            <app-call-details-view\r\n              [call]=\"element\"\r\n              [contracts]=\"contracts()\"\r\n              [accessToken]=\"accessToken()\"\r\n            ></app-call-details-view>\r\n          }\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: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".calls-list-view{width:100%}table::ng-deep tbody>tr:not(.details-expanded-row):hover{background-color:var(--surface-100, whitesmoke)!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-color:var(--surface-100, whitesmoke)!important}table::ng-deep tbody>tr.details-element-row td{border-bottom-width:0}table::ng-deep tbody>tr.details-expanded-row{background-color:var(--active-table-row, var(--active-table-row, #c8e6c9));border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr.details-expanded-row+tr{border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9);border-bottom:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr .mat-column-expanded{width:50px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], calls: [{ type: i0.Input, args: [{ isSignal: true, alias: "calls", required: true }] }], contracts: [{ type: i0.Input, args: [{ isSignal: true, alias: "contracts", required: true }] }], accessToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessToken", required: false }] }] } });
 
 class DataDetailsViewComponent {
     constructor() {
-        this.installedInstrument = input.required();
+        this.installedInstrument = input.required(...(ngDevMode ? [{ debugName: "installedInstrument" }] : []));
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DataDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: DataDetailsViewComponent, isStandalone: false, selector: "app-data-details-view", inputs: { installedInstrument: { classPropertyName: "installedInstrument", publicName: "installedInstrument", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (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>{{\r\n        'sapAdminInstalledInstrument.instrumentDescription' | translate\r\n      }}</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  <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>{{\r\n        'sapAdminInstalledInstrument.businessPartnerName' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().businessPartnerName || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{ 'sapAdminInstalledInstrument.contactPerson' | translate }}</span>\r\n      <p>{{ installedInstrument().contactPerson || '-' }}</p>\r\n    </div>\r\n  </div>\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{ 'sapAdminInstalledInstrument.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>{{\r\n        'sapAdminInstalledInstrument.technicianName' | translate\r\n      }}</span>\r\n      <p>\r\n        {{\r\n          installedInstrument().technicianFirstName\r\n            ? installedInstrument().technicianFirstName +\r\n              ' ' +\r\n              installedInstrument().technicianLastName\r\n            : '-'\r\n        }}\r\n      </p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{ 'sapAdminInstalledInstrument.territory' | translate }}</span>\r\n      <p>{{ installedInstrument().territory || '-' }}</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>{{\r\n        'sapAdminInstalledInstrument.installationDate' | translate\r\n      }}</span>\r\n      <p>\r\n        {{ (installedInstrument().installationDate | stDateFormatPipe) || '-' }}\r\n      </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  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.block' | translate }}</span>\r\n      <p>{{ installedInstrument().block || '-' }}</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.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.county' | translate }}</span>\r\n      <p>{{ installedInstrument().county || '-' }}</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.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.country' | translate }}</span>\r\n      <p>{{ installedInstrument().country || '-' }}</p>\r\n    </div>\r\n  </div>\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.softwareVersion' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().softwareVersion || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.pcSoftwareVersion' | translate\r\n      }}</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  <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  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit1' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit1 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit2' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit2 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit3' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit3 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit4' | translate\r\n      }}</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>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit5' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit5 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit6' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit6 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit7' | translate\r\n      }}</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>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit8' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit8 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit9' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit9 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit10' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit10 || '-' }}</p>\r\n    </div>\r\n  </div>\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.numberOfAnalysis' | translate\r\n      }}</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  <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}\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ""], dependencies: [{ kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.DateFormatPipe, name: "stDateFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: DataDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: DataDetailsViewComponent, isStandalone: true, selector: "app-data-details-view", inputs: { installedInstrument: { classPropertyName: "installedInstrument", publicName: "installedInstrument", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (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>{{\r\n        'sapAdminInstalledInstrument.instrumentDescription' | translate\r\n      }}</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  <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>{{\r\n        'sapAdminInstalledInstrument.businessPartnerName' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().businessPartnerName || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{ 'sapAdminInstalledInstrument.contactPerson' | translate }}</span>\r\n      <p>{{ installedInstrument().contactPerson || '-' }}</p>\r\n    </div>\r\n  </div>\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{ 'sapAdminInstalledInstrument.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>{{\r\n        'sapAdminInstalledInstrument.technicianName' | translate\r\n      }}</span>\r\n      <p>\r\n        {{\r\n          installedInstrument().technicianFirstName\r\n            ? installedInstrument().technicianFirstName +\r\n              ' ' +\r\n              installedInstrument().technicianLastName\r\n            : '-'\r\n        }}\r\n      </p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{ 'sapAdminInstalledInstrument.territory' | translate }}</span>\r\n      <p>{{ installedInstrument().territory || '-' }}</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>{{\r\n        'sapAdminInstalledInstrument.installationDate' | translate\r\n      }}</span>\r\n      <p>\r\n        {{ (installedInstrument().installationDate | stDateFormatPipe) || '-' }}\r\n      </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  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.block' | translate }}</span>\r\n      <p>{{ installedInstrument().block || '-' }}</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.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.county' | translate }}</span>\r\n      <p>{{ installedInstrument().county || '-' }}</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.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.country' | translate }}</span>\r\n      <p>{{ installedInstrument().country || '-' }}</p>\r\n    </div>\r\n  </div>\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.softwareVersion' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().softwareVersion || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.pcSoftwareVersion' | translate\r\n      }}</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  <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  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit1' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit1 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit2' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit2 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit3' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit3 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit4' | translate\r\n      }}</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>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit5' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit5 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit6' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit6 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit7' | translate\r\n      }}</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>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit8' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit8 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit9' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit9 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit10' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit10 || '-' }}</p>\r\n    </div>\r\n  </div>\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.numberOfAnalysis' | translate\r\n      }}</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  <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}\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ""], dependencies: [{ kind: "ngmodule", type: StDateFormatModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.DateFormatPipe, name: "stDateFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DataDetailsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: DataDetailsViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-data-details-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (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>{{\r\n        'sapAdminInstalledInstrument.instrumentDescription' | translate\r\n      }}</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  <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>{{\r\n        'sapAdminInstalledInstrument.businessPartnerName' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().businessPartnerName || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{ 'sapAdminInstalledInstrument.contactPerson' | translate }}</span>\r\n      <p>{{ installedInstrument().contactPerson || '-' }}</p>\r\n    </div>\r\n  </div>\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{ 'sapAdminInstalledInstrument.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>{{\r\n        'sapAdminInstalledInstrument.technicianName' | translate\r\n      }}</span>\r\n      <p>\r\n        {{\r\n          installedInstrument().technicianFirstName\r\n            ? installedInstrument().technicianFirstName +\r\n              ' ' +\r\n              installedInstrument().technicianLastName\r\n            : '-'\r\n        }}\r\n      </p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{ 'sapAdminInstalledInstrument.territory' | translate }}</span>\r\n      <p>{{ installedInstrument().territory || '-' }}</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>{{\r\n        'sapAdminInstalledInstrument.installationDate' | translate\r\n      }}</span>\r\n      <p>\r\n        {{ (installedInstrument().installationDate | stDateFormatPipe) || '-' }}\r\n      </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  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.block' | translate }}</span>\r\n      <p>{{ installedInstrument().block || '-' }}</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.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.county' | translate }}</span>\r\n      <p>{{ installedInstrument().county || '-' }}</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.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.country' | translate }}</span>\r\n      <p>{{ installedInstrument().country || '-' }}</p>\r\n    </div>\r\n  </div>\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.softwareVersion' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().softwareVersion || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.pcSoftwareVersion' | translate\r\n      }}</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  <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  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit1' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit1 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit2' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit2 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit3' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit3 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit4' | translate\r\n      }}</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>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit5' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit5 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit6' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit6 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit7' | translate\r\n      }}</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>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit8' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit8 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit9' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit9 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit10' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit10 || '-' }}</p>\r\n    </div>\r\n  </div>\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.numberOfAnalysis' | translate\r\n      }}</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  <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}\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n"] }]
-        }] });
+            args: [{ selector: 'app-data-details-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe, StDateFormatModule], template: "@if (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>{{\r\n        'sapAdminInstalledInstrument.instrumentDescription' | translate\r\n      }}</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  <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>{{\r\n        'sapAdminInstalledInstrument.businessPartnerName' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().businessPartnerName || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{ 'sapAdminInstalledInstrument.contactPerson' | translate }}</span>\r\n      <p>{{ installedInstrument().contactPerson || '-' }}</p>\r\n    </div>\r\n  </div>\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{ 'sapAdminInstalledInstrument.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>{{\r\n        'sapAdminInstalledInstrument.technicianName' | translate\r\n      }}</span>\r\n      <p>\r\n        {{\r\n          installedInstrument().technicianFirstName\r\n            ? installedInstrument().technicianFirstName +\r\n              ' ' +\r\n              installedInstrument().technicianLastName\r\n            : '-'\r\n        }}\r\n      </p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{ 'sapAdminInstalledInstrument.territory' | translate }}</span>\r\n      <p>{{ installedInstrument().territory || '-' }}</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>{{\r\n        'sapAdminInstalledInstrument.installationDate' | translate\r\n      }}</span>\r\n      <p>\r\n        {{ (installedInstrument().installationDate | stDateFormatPipe) || '-' }}\r\n      </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  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.block' | translate }}</span>\r\n      <p>{{ installedInstrument().block || '-' }}</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.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.county' | translate }}</span>\r\n      <p>{{ installedInstrument().county || '-' }}</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.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>{{ 'sapAdminInstalledInstrument.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>{{ 'sapAdminInstalledInstrument.country' | translate }}</span>\r\n      <p>{{ installedInstrument().country || '-' }}</p>\r\n    </div>\r\n  </div>\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.softwareVersion' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().softwareVersion || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.pcSoftwareVersion' | translate\r\n      }}</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  <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  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit1' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit1 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit2' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit2 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit3' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit3 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit4' | translate\r\n      }}</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>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit5' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit5 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit6' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit6 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit7' | translate\r\n      }}</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>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit8' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit8 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit9' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit9 || '-' }}</p>\r\n    </div>\r\n    <div class=\"col-xs-12 col-sm-4\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.majorUpgradeKit10' | translate\r\n      }}</span>\r\n      <p>{{ installedInstrument().majorUpgradeKit10 || '-' }}</p>\r\n    </div>\r\n  </div>\r\n  <hr />\r\n  <div class=\"group-details row\">\r\n    <div class=\"col-xs-12 col-sm-3\">\r\n      <span>{{\r\n        'sapAdminInstalledInstrument.numberOfAnalysis' | translate\r\n      }}</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  <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}\r\n", styles: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n"] }]
+        }], propDecorators: { installedInstrument: [{ type: i0.Input, args: [{ isSignal: true, alias: "installedInstrument", required: true }] }] } });
 
 class ServiceContractsListViewComponent {
     constructor() {
         this.paginator = viewChild.required(MatPaginator);
-        this.contracts = input();
+        this.contracts = input(...(ngDevMode ? [undefined, { debugName: "contracts" }] : []));
         this.columnsToDisplay = [
             'contractId',
             'customer',
@@ -728,21 +720,22 @@ class ServiceContractsListViewComponent {
             'startDate',
             'terminationDate',
         ];
-        this.tableSource = signal(new MatTableDataSource([]));
-        this.expandedElement = signal(null);
-    }
-    ngOnInit() {
-        this.setTable();
+        this.tableSource = signal(new MatTableDataSource([]), ...(ngDevMode ? [{ debugName: "tableSource" }] : []));
+        this.expandedElement = signal(null, ...(ngDevMode ? [{ debugName: "expandedElement" }] : []));
+        effect(() => {
+            const contracts = this.contracts();
+            this.tableSource.update(oldData => {
+                oldData.data = contracts ?? [];
+                return oldData;
+            });
+        });
     }
     ngAfterViewInit() {
         this.paginator().pageSize = 10;
         this.tableSource().paginator = this.paginator();
     }
-    setTable() {
-        this.tableSource.set(new MatTableDataSource(this.contracts()));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ServiceContractsListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.25", type: ServiceContractsListViewComponent, isStandalone: false, selector: "app-service-contracts-list-view", inputs: { contracts: { classPropertyName: "contracts", publicName: "contracts", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "display-flex-component" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"service-contracts-list-view\">\r\n  <table\r\n    class=\"st-material-table\"\r\n    mat-table\r\n    [dataSource]=\"tableSource()\"\r\n    multiTemplateDataRows\r\n  >\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: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".service-contracts-list-view{width:100%}table::ng-deep tbody>tr:not(.details-expanded-row):hover{background-color:var(--surface-100, whitesmoke)!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-color:var(--surface-100, whitesmoke)!important}table::ng-deep tbody>tr.details-element-row td{border-bottom-width:0}table::ng-deep tbody>tr.details-expanded-row{background-color:var(--active-table-row, #c8e6c9);border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr.details-expanded-row+tr{border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9);border-bottom:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr .mat-column-expanded{width:50px}\n"], dependencies: [{ kind: "component", type: i1$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ServiceContractDetailsViewComponent, selector: "app-service-contract-details-view", inputs: ["contract"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.DateFormatPipe, name: "stDateFormatPipe" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: ServiceContractsListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.29", type: ServiceContractsListViewComponent, isStandalone: true, selector: "app-service-contracts-list-view", inputs: { contracts: { classPropertyName: "contracts", publicName: "contracts", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "display-flex-component" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"service-contracts-list-view\">\r\n  <table\r\n    class=\"st-material-table\"\r\n    mat-table\r\n    [dataSource]=\"tableSource()\"\r\n    multiTemplateDataRows\r\n  >\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: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".service-contracts-list-view{width:100%}table::ng-deep tbody>tr:not(.details-expanded-row):hover{background-color:var(--surface-100, whitesmoke)!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-color:var(--surface-100, whitesmoke)!important}table::ng-deep tbody>tr.details-element-row td{border-bottom-width:0}table::ng-deep tbody>tr.details-expanded-row{background-color:var(--active-table-row, #c8e6c9);border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr.details-expanded-row+tr{border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9);border-bottom:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr .mat-column-expanded{width:50px}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: ServiceContractDetailsViewComponent, selector: "app-service-contract-details-view", inputs: ["contract"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: StDateFormatModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.DateFormatPipe, name: "stDateFormatPipe" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -750,7 +743,7 @@ class ServiceContractsListViewComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ServiceContractsListViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: ServiceContractsListViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-service-contracts-list-view', animations: [
                         trigger('detailExpand', [
@@ -758,29 +751,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                             state('expanded', style({ height: '*' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'display-flex-component' }, standalone: false, template: "<div class=\"service-contracts-list-view\">\r\n  <table\r\n    class=\"st-material-table\"\r\n    mat-table\r\n    [dataSource]=\"tableSource()\"\r\n    multiTemplateDataRows\r\n  >\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: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".service-contracts-list-view{width:100%}table::ng-deep tbody>tr:not(.details-expanded-row):hover{background-color:var(--surface-100, whitesmoke)!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-color:var(--surface-100, whitesmoke)!important}table::ng-deep tbody>tr.details-element-row td{border-bottom-width:0}table::ng-deep tbody>tr.details-expanded-row{background-color:var(--active-table-row, #c8e6c9);border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr.details-expanded-row+tr{border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9);border-bottom:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr .mat-column-expanded{width:50px}\n"] }]
-        }] });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'display-flex-component' }, imports: [MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, ServiceContractDetailsViewComponent, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatPaginator, TranslatePipe, StDateFormatModule], template: "<div class=\"service-contracts-list-view\">\r\n  <table\r\n    class=\"st-material-table\"\r\n    mat-table\r\n    [dataSource]=\"tableSource()\"\r\n    multiTemplateDataRows\r\n  >\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: [".group-details{width:100%}.group-details>div>span{font-size:.8rem;color:#9e9e9e}.group-details p{font-size:1rem;line-height:1.5rem;white-space:pre-line;align-items:center;display:flex;color:#3c4858}.group-details p mat-icon{cursor:pointer;margin-left:2px;font-size:1.4rem;opacity:.8}.group-details p mat-icon:hover{opacity:1}.group-details p span.info{color:#fbc02d}.group-details .html-field{max-height:100px;overflow-y:auto}\n", ".service-contracts-list-view{width:100%}table::ng-deep tbody>tr:not(.details-expanded-row):hover{background-color:var(--surface-100, whitesmoke)!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-color:var(--surface-100, whitesmoke)!important}table::ng-deep tbody>tr.details-element-row td{border-bottom-width:0}table::ng-deep tbody>tr.details-expanded-row{background-color:var(--active-table-row, #c8e6c9);border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr.details-expanded-row+tr{border-left:3px solid var(--active-table-row, #c8e6c9);border-right:3px solid var(--active-table-row, #c8e6c9);border-bottom:3px solid var(--active-table-row, #c8e6c9)}table::ng-deep tbody>tr .mat-column-expanded{width:50px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], contracts: [{ type: i0.Input, args: [{ isSignal: true, alias: "contracts", required: false }] }] } });
 
 class SapInstalledInstrumentDetailsComponent {
     constructor() {
-        this.id = input();
-        this.accessToken = input();
-        this.territoryFilter = input(false);
-        this.showWithCardContent = input(true);
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.accessToken = input(...(ngDevMode ? [undefined, { debugName: "accessToken" }] : []));
+        this.territoryFilter = input(false, ...(ngDevMode ? [{ debugName: "territoryFilter" }] : []));
+        this.showWithCardContent = input(true, ...(ngDevMode ? [{ debugName: "showWithCardContent" }] : []));
         this.sapInstalledInstrumentService = inject(SapInstalledInstrumentsService);
         this.location = inject(Location);
-        this.installedInstrument$ = signal(null);
-        this.calls$ = signal(null);
-        this.serviceContracts$ = signal(null);
-        this.tabActive = signal(0);
-        this.installedInstrument = signal(null);
-        this.calls = signal([]);
-        this.serviceContracts = signal([]);
-    }
+        this.injector = inject(Injector);
+        this.tabActive = signal(0, ...(ngDevMode ? [{ debugName: "tabActive" }] : []));
+        this.installedInstrument = signal(undefined).asReadonly();
+        this.calls = signal([]).asReadonly();
+        this.serviceContracts = signal([]).asReadonly();
+    }
+    // Inputs are not available in the constructor. Token and territory filter
+    // are set on the service before the requests below fire, since the HTTP
+    // interceptor reads these synchronously off the service.
     ngOnInit() {
         this.sapInstalledInstrumentService.accessToken = this.accessToken();
         this.sapInstalledInstrumentService.territoryFilter = this.territoryFilter();
-        this.loadTabsData();
+        this.installedInstrument = toSignal(this.sapInstalledInstrumentService.getInstalledInstrument(this.id()), { injector: this.injector });
+        this.calls = toSignal(this.sapInstalledInstrumentService.getCalls(this.id()), { initialValue: [], injector: this.injector });
+        this.serviceContracts = toSignal(this.sapInstalledInstrumentService.getContracts(this.id()), { initialValue: [], injector: this.injector });
     }
     tabChanged(event) {
         this.tabActive.set(event.index);
@@ -788,29 +784,13 @@ class SapInstalledInstrumentDetailsComponent {
     goBack() {
         this.location.back();
     }
-    loadTabsData() {
-        const instrumentObs = this.sapInstalledInstrumentService
-            .getInstalledInstrument(this.id())
-            .pipe(tap(installedInstrument => {
-            this.installedInstrument.set(installedInstrument);
-        }));
-        this.installedInstrument$.set(instrumentObs);
-        const callsObs = this.sapInstalledInstrumentService
-            .getCalls(this.id())
-            .pipe(tap(res => this.calls.set(res)));
-        this.calls$.set(callsObs);
-        const contractsObs = this.sapInstalledInstrumentService
-            .getContracts(this.id())
-            .pipe(tap(res => this.serviceContracts.set(res)));
-        this.serviceContracts$.set(contractsObs);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SapInstalledInstrumentDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: SapInstalledInstrumentDetailsComponent, isStandalone: false, selector: "app-sap-installed-instrument-details", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: true, isRequired: false, transformFunction: null }, territoryFilter: { classPropertyName: "territoryFilter", publicName: "territoryFilter", isSignal: true, isRequired: false, transformFunction: null }, showWithCardContent: { classPropertyName: "showWithCardContent", publicName: "showWithCardContent", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "display-flex-component" }, ngImport: i0, template: "@if (showWithCardContent()) {\r\n  <ngx-st-card\r\n    [title]=\"\r\n      'sapAdminInstalledInstrument.titleInstalledInstrumentDetails' | translate\r\n    \"\r\n    [showHistoryBack]=\"true\"\r\n  >\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"installedInstrumentContent\"\r\n    ></ng-container>\r\n  </ngx-st-card>\r\n}\r\n\r\n@if (!showWithCardContent()) {\r\n  <ng-container [ngTemplateOutlet]=\"installedInstrumentContent\"></ng-container>\r\n}\r\n\r\n<ng-template #installedInstrumentContent>\r\n  <div\r\n    style=\"\r\n      display: flex;\r\n      flex-direction: column;\r\n      width: 100%;\r\n      position: relative;\r\n    \"\r\n  >\r\n    @if (!showWithCardContent()) {\r\n      <button\r\n        mat-icon-button\r\n        style=\"position: absolute; top: 5px; left: 0; z-index: 11\"\r\n        (click)=\"goBack()\"\r\n      >\r\n        <mat-icon>keyboard_backspace</mat-icon>\r\n      </button>\r\n    }\r\n\r\n    <mat-tab-group (selectedTabChange)=\"tabChanged($event)\">\r\n      <mat-tab\r\n        label=\"{{\r\n          'sapAdminInstalledInstrument.instrumentDetails' | translate\r\n        }}\"\r\n      >\r\n        @if (installedInstrument$() | async) {\r\n          @if (tabActive() === 0 && installedInstrument()) {\r\n            <app-data-details-view\r\n              [installedInstrument]=\"installedInstrument()!\"\r\n            ></app-data-details-view>\r\n          }\r\n        }\r\n      </mat-tab>\r\n      <mat-tab\r\n        label=\"{{ 'sapAdminInstalledInstrument.calls' | translate }} ({{\r\n          calls().length || 0\r\n        }})\"\r\n      >\r\n        @if (calls$() | async) {\r\n          @if (tabActive() === 1) {\r\n            <app-calls-list-view\r\n              [calls]=\"calls()\"\r\n              [contracts]=\"serviceContracts()\"\r\n              [accessToken]=\"accessToken()!\"\r\n            ></app-calls-list-view>\r\n          }\r\n        }\r\n      </mat-tab>\r\n      <mat-tab\r\n        label=\"{{\r\n          'sapAdminInstalledInstrument.serviceContracts' | translate\r\n        }} ({{ serviceContracts().length || 0 }})\"\r\n      >\r\n        @if (serviceContracts$() | async) {\r\n          @if (tabActive() === 2) {\r\n            <app-service-contracts-list-view\r\n              [contracts]=\"serviceContracts()\"\r\n            ></app-service-contracts-list-view>\r\n          }\r\n        }\r\n      </mat-tab>\r\n    </mat-tab-group>\r\n  </div>\r\n</ng-template>\r\n", styles: ["mat-tab-group{width:100%}mat-tab-group::ng-deep mat-tab-body{padding:10px 0}\n", ".card{background:#fff;border:none;box-shadow:0 1px 4px #00000024;margin-bottom:30px;margin-top:30px;font-size:1rem}.card .card-header{max-width:380px;text-align:center;margin-left:auto!important;margin-right:auto!important;border-radius:3px;margin-top:-20px;background:linear-gradient(60deg,#ffa726,#fb8c00)!important;padding:15px 30px;border:none}.card .card-header h4,.card .card-header h3{margin:0!important;color:#fff;font-size:1.5625rem;line-height:1.4em;font-weight:400}.card .card-body{position:relative;padding:.5rem}.card .card-body .back-link{color:#000;position:absolute;top:-40px;left:5px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$2.CardComponent, selector: "ngx-st-card", inputs: ["title", "createLink", "backLink", "showHistoryBack", "actionMenu", "actionButton", "noBodyTopPadding", "createLinkLabel"] }, { kind: "component", type: CallsListViewComponent, selector: "app-calls-list-view", inputs: ["calls", "contracts", "accessToken"] }, { kind: "component", type: DataDetailsViewComponent, selector: "app-data-details-view", inputs: ["installedInstrument"] }, { kind: "component", type: ServiceContractsListViewComponent, selector: "app-service-contracts-list-view", inputs: ["contracts"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: SapInstalledInstrumentDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: SapInstalledInstrumentDetailsComponent, isStandalone: true, selector: "app-sap-installed-instrument-details", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: true, isRequired: false, transformFunction: null }, territoryFilter: { classPropertyName: "territoryFilter", publicName: "territoryFilter", isSignal: true, isRequired: false, transformFunction: null }, showWithCardContent: { classPropertyName: "showWithCardContent", publicName: "showWithCardContent", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "display-flex-component" }, ngImport: i0, template: "@if (showWithCardContent()) {\r\n  <ngx-st-card\r\n    [title]=\"\r\n      'sapAdminInstalledInstrument.titleInstalledInstrumentDetails' | translate\r\n    \"\r\n    [showHistoryBack]=\"true\"\r\n  >\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"installedInstrumentContent\"\r\n    ></ng-container>\r\n  </ngx-st-card>\r\n}\r\n\r\n@if (!showWithCardContent()) {\r\n  <ng-container [ngTemplateOutlet]=\"installedInstrumentContent\"></ng-container>\r\n}\r\n\r\n<ng-template #installedInstrumentContent>\r\n  <div\r\n    style=\"\r\n      display: flex;\r\n      flex-direction: column;\r\n      width: 100%;\r\n      position: relative;\r\n    \"\r\n  >\r\n    @if (!showWithCardContent()) {\r\n      <button\r\n        mat-icon-button\r\n        style=\"position: absolute; top: 5px; left: 0; z-index: 11\"\r\n        (click)=\"goBack()\"\r\n      >\r\n        <mat-icon>keyboard_backspace</mat-icon>\r\n      </button>\r\n    }\r\n\r\n    <mat-tab-group (selectedTabChange)=\"tabChanged($event)\">\r\n      <mat-tab\r\n        label=\"{{\r\n          'sapAdminInstalledInstrument.instrumentDetails' | translate\r\n        }}\"\r\n      >\r\n        @if (tabActive() === 0 && installedInstrument()) {\r\n          <app-data-details-view\r\n            [installedInstrument]=\"installedInstrument()!\"\r\n          ></app-data-details-view>\r\n        }\r\n      </mat-tab>\r\n      <mat-tab\r\n        label=\"{{ 'sapAdminInstalledInstrument.calls' | translate }} ({{\r\n          calls().length\r\n        }})\"\r\n      >\r\n        @if (tabActive() === 1) {\r\n          <app-calls-list-view\r\n            [calls]=\"calls()\"\r\n            [contracts]=\"serviceContracts()\"\r\n            [accessToken]=\"accessToken()!\"\r\n          ></app-calls-list-view>\r\n        }\r\n      </mat-tab>\r\n      <mat-tab\r\n        label=\"{{\r\n          'sapAdminInstalledInstrument.serviceContracts' | translate\r\n        }} ({{ serviceContracts().length }})\"\r\n      >\r\n        @if (tabActive() === 2) {\r\n          <app-service-contracts-list-view\r\n            [contracts]=\"serviceContracts()\"\r\n          ></app-service-contracts-list-view>\r\n        }\r\n      </mat-tab>\r\n    </mat-tab-group>\r\n  </div>\r\n</ng-template>\r\n", styles: ["mat-tab-group{width:100%}mat-tab-group::ng-deep mat-tab-body{padding:10px 0}\n", ".card{background:#fff;border:none;box-shadow:0 1px 4px #00000024;margin-bottom:30px;margin-top:30px;font-size:1rem}.card .card-header{max-width:380px;text-align:center;margin-left:auto!important;margin-right:auto!important;border-radius:3px;margin-top:-20px;background:linear-gradient(60deg,#ffa726,#fb8c00)!important;padding:15px 30px;border:none}.card .card-header h4,.card .card-header h3{margin:0!important;color:#fff;font-size:1.5625rem;line-height:1.4em;font-weight:400}.card .card-body{position:relative;padding:.5rem}.card .card-body .back-link{color:#000;position:absolute;top:-40px;left:5px}\n"], dependencies: [{ kind: "ngmodule", type: NgxStCardModule }, { kind: "component", type: i1$2.CardComponent, selector: "ngx-st-card", inputs: ["title", "createLink", "backLink", "showHistoryBack", "checkIframeHistoryOnBack", "actionMenu", "actionButton", "noBodyTopPadding", "createLinkLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], 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", "accessToken"] }, { kind: "component", type: ServiceContractsListViewComponent, selector: "app-service-contracts-list-view", inputs: ["contracts"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SapInstalledInstrumentDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: SapInstalledInstrumentDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-sap-installed-instrument-details', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'display-flex-component' }, standalone: false, template: "@if (showWithCardContent()) {\r\n  <ngx-st-card\r\n    [title]=\"\r\n      'sapAdminInstalledInstrument.titleInstalledInstrumentDetails' | translate\r\n    \"\r\n    [showHistoryBack]=\"true\"\r\n  >\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"installedInstrumentContent\"\r\n    ></ng-container>\r\n  </ngx-st-card>\r\n}\r\n\r\n@if (!showWithCardContent()) {\r\n  <ng-container [ngTemplateOutlet]=\"installedInstrumentContent\"></ng-container>\r\n}\r\n\r\n<ng-template #installedInstrumentContent>\r\n  <div\r\n    style=\"\r\n      display: flex;\r\n      flex-direction: column;\r\n      width: 100%;\r\n      position: relative;\r\n    \"\r\n  >\r\n    @if (!showWithCardContent()) {\r\n      <button\r\n        mat-icon-button\r\n        style=\"position: absolute; top: 5px; left: 0; z-index: 11\"\r\n        (click)=\"goBack()\"\r\n      >\r\n        <mat-icon>keyboard_backspace</mat-icon>\r\n      </button>\r\n    }\r\n\r\n    <mat-tab-group (selectedTabChange)=\"tabChanged($event)\">\r\n      <mat-tab\r\n        label=\"{{\r\n          'sapAdminInstalledInstrument.instrumentDetails' | translate\r\n        }}\"\r\n      >\r\n        @if (installedInstrument$() | async) {\r\n          @if (tabActive() === 0 && installedInstrument()) {\r\n            <app-data-details-view\r\n              [installedInstrument]=\"installedInstrument()!\"\r\n            ></app-data-details-view>\r\n          }\r\n        }\r\n      </mat-tab>\r\n      <mat-tab\r\n        label=\"{{ 'sapAdminInstalledInstrument.calls' | translate }} ({{\r\n          calls().length || 0\r\n        }})\"\r\n      >\r\n        @if (calls$() | async) {\r\n          @if (tabActive() === 1) {\r\n            <app-calls-list-view\r\n              [calls]=\"calls()\"\r\n              [contracts]=\"serviceContracts()\"\r\n              [accessToken]=\"accessToken()!\"\r\n            ></app-calls-list-view>\r\n          }\r\n        }\r\n      </mat-tab>\r\n      <mat-tab\r\n        label=\"{{\r\n          'sapAdminInstalledInstrument.serviceContracts' | translate\r\n        }} ({{ serviceContracts().length || 0 }})\"\r\n      >\r\n        @if (serviceContracts$() | async) {\r\n          @if (tabActive() === 2) {\r\n            <app-service-contracts-list-view\r\n              [contracts]=\"serviceContracts()\"\r\n            ></app-service-contracts-list-view>\r\n          }\r\n        }\r\n      </mat-tab>\r\n    </mat-tab-group>\r\n  </div>\r\n</ng-template>\r\n", styles: ["mat-tab-group{width:100%}mat-tab-group::ng-deep mat-tab-body{padding:10px 0}\n", ".card{background:#fff;border:none;box-shadow:0 1px 4px #00000024;margin-bottom:30px;margin-top:30px;font-size:1rem}.card .card-header{max-width:380px;text-align:center;margin-left:auto!important;margin-right:auto!important;border-radius:3px;margin-top:-20px;background:linear-gradient(60deg,#ffa726,#fb8c00)!important;padding:15px 30px;border:none}.card .card-header h4,.card .card-header h3{margin:0!important;color:#fff;font-size:1.5625rem;line-height:1.4em;font-weight:400}.card .card-body{position:relative;padding:.5rem}.card .card-body .back-link{color:#000;position:absolute;top:-40px;left:5px}\n"] }]
-        }] });
+            args: [{ selector: 'app-sap-installed-instrument-details', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'display-flex-component' }, imports: [NgxStCardModule, NgTemplateOutlet, MatIconButton, MatIcon, MatTabGroup, MatTab, DataDetailsViewComponent, CallsListViewComponent, ServiceContractsListViewComponent, TranslatePipe], template: "@if (showWithCardContent()) {\r\n  <ngx-st-card\r\n    [title]=\"\r\n      'sapAdminInstalledInstrument.titleInstalledInstrumentDetails' | translate\r\n    \"\r\n    [showHistoryBack]=\"true\"\r\n  >\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"installedInstrumentContent\"\r\n    ></ng-container>\r\n  </ngx-st-card>\r\n}\r\n\r\n@if (!showWithCardContent()) {\r\n  <ng-container [ngTemplateOutlet]=\"installedInstrumentContent\"></ng-container>\r\n}\r\n\r\n<ng-template #installedInstrumentContent>\r\n  <div\r\n    style=\"\r\n      display: flex;\r\n      flex-direction: column;\r\n      width: 100%;\r\n      position: relative;\r\n    \"\r\n  >\r\n    @if (!showWithCardContent()) {\r\n      <button\r\n        mat-icon-button\r\n        style=\"position: absolute; top: 5px; left: 0; z-index: 11\"\r\n        (click)=\"goBack()\"\r\n      >\r\n        <mat-icon>keyboard_backspace</mat-icon>\r\n      </button>\r\n    }\r\n\r\n    <mat-tab-group (selectedTabChange)=\"tabChanged($event)\">\r\n      <mat-tab\r\n        label=\"{{\r\n          'sapAdminInstalledInstrument.instrumentDetails' | translate\r\n        }}\"\r\n      >\r\n        @if (tabActive() === 0 && installedInstrument()) {\r\n          <app-data-details-view\r\n            [installedInstrument]=\"installedInstrument()!\"\r\n          ></app-data-details-view>\r\n        }\r\n      </mat-tab>\r\n      <mat-tab\r\n        label=\"{{ 'sapAdminInstalledInstrument.calls' | translate }} ({{\r\n          calls().length\r\n        }})\"\r\n      >\r\n        @if (tabActive() === 1) {\r\n          <app-calls-list-view\r\n            [calls]=\"calls()\"\r\n            [contracts]=\"serviceContracts()\"\r\n            [accessToken]=\"accessToken()!\"\r\n          ></app-calls-list-view>\r\n        }\r\n      </mat-tab>\r\n      <mat-tab\r\n        label=\"{{\r\n          'sapAdminInstalledInstrument.serviceContracts' | translate\r\n        }} ({{ serviceContracts().length }})\"\r\n      >\r\n        @if (tabActive() === 2) {\r\n          <app-service-contracts-list-view\r\n            [contracts]=\"serviceContracts()\"\r\n          ></app-service-contracts-list-view>\r\n        }\r\n      </mat-tab>\r\n    </mat-tab-group>\r\n  </div>\r\n</ng-template>\r\n", styles: ["mat-tab-group{width:100%}mat-tab-group::ng-deep mat-tab-body{padding:10px 0}\n", ".card{background:#fff;border:none;box-shadow:0 1px 4px #00000024;margin-bottom:30px;margin-top:30px;font-size:1rem}.card .card-header{max-width:380px;text-align:center;margin-left:auto!important;margin-right:auto!important;border-radius:3px;margin-top:-20px;background:linear-gradient(60deg,#ffa726,#fb8c00)!important;padding:15px 30px;border:none}.card .card-header h4,.card .card-header h3{margin:0!important;color:#fff;font-size:1.5625rem;line-height:1.4em;font-weight:400}.card .card-body{position:relative;padding:.5rem}.card .card-body .back-link{color:#000;position:absolute;top:-40px;left:5px}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], accessToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessToken", required: false }] }], territoryFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "territoryFilter", required: false }] }], showWithCardContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWithCardContent", required: false }] }] } });
 
 class StSapInstalledInstrumentsModule {
     static forRoot(config = {}) {
@@ -819,24 +799,12 @@ class StSapInstalledInstrumentsModule {
             providers: [{ provide: 'config', useValue: config.config }],
         };
     }
-    constructor(matIconRegistry) {
-        this.matIconRegistry = matIconRegistry;
+    constructor() {
+        this.matIconRegistry = inject(MatIconRegistry);
         this.matIconRegistry.setDefaultFontSetClass('material-symbols-outlined');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: StSapInstalledInstrumentsModule, deps: [{ token: i1$2.MatIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: StSapInstalledInstrumentsModule, declarations: [SapInstalledInstrumentDetailsComponent,
-            SapInstalledInstrumentListComponent,
-            ActivitiesListViewComponent,
-            ActivityDetailsViewComponent,
-            CallDetailsViewComponent,
-            CallsListViewComponent,
-            DataDetailsViewComponent,
-            ServiceContractsListViewComponent,
-            ServiceContractDetailsViewComponent,
-            ServiceContractsModalDetailsViewComponent,
-            SapInstalledInstrumentListSearchComponent,
-            SapInstalledInstrumentListTableComponent,
-            AttachmentsListViewComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: StSapInstalledInstrumentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.29", ngImport: i0, type: StSapInstalledInstrumentsModule, imports: [CommonModule,
             MatButtonModule,
             MatRippleModule,
             MatFormFieldModule,
@@ -856,14 +824,27 @@ class StSapInstalledInstrumentsModule {
             MatSnackBarModule,
             MatCheckboxModule,
             MatAutocompleteModule,
-            MatSortModule, i4.TranslateModule, StDateFormatModule,
+            MatSortModule, i1$3.TranslateModule, StDateFormatModule,
             ReactiveFormsModule,
             StMultiselectAutocompleteModule,
             StSearchSelectsModule,
             AuthModule,
-            NgxStCardModule], exports: [SapInstalledInstrumentListComponent,
+            NgxStCardModule,
+            SapInstalledInstrumentDetailsComponent,
+            SapInstalledInstrumentListComponent,
+            ActivitiesListViewComponent,
+            ActivityDetailsViewComponent,
+            CallDetailsViewComponent,
+            CallsListViewComponent,
+            DataDetailsViewComponent,
+            ServiceContractsListViewComponent,
+            ServiceContractDetailsViewComponent,
+            ServiceContractsModalDetailsViewComponent,
+            SapInstalledInstrumentListSearchComponent,
+            SapInstalledInstrumentListTableComponent,
+            AttachmentsListViewComponent], exports: [SapInstalledInstrumentListComponent,
             SapInstalledInstrumentDetailsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: StSapInstalledInstrumentsModule, providers: [SapInstalledInstrumentsService], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: StSapInstalledInstrumentsModule, providers: [SapInstalledInstrumentsService], imports: [CommonModule,
             MatButtonModule,
             MatRippleModule,
             MatFormFieldModule,
@@ -890,26 +871,24 @@ class StSapInstalledInstrumentsModule {
             StMultiselectAutocompleteModule,
             StSearchSelectsModule,
             AuthModule,
-            NgxStCardModule] }); }
+            NgxStCardModule,
+            SapInstalledInstrumentDetailsComponent,
+            SapInstalledInstrumentListComponent,
+            ActivitiesListViewComponent,
+            ActivityDetailsViewComponent,
+            CallDetailsViewComponent,
+            CallsListViewComponent,
+            DataDetailsViewComponent,
+            ServiceContractsListViewComponent,
+            ServiceContractDetailsViewComponent,
+            ServiceContractsModalDetailsViewComponent,
+            SapInstalledInstrumentListSearchComponent,
+            SapInstalledInstrumentListTableComponent,
+            AttachmentsListViewComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: StSapInstalledInstrumentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: StSapInstalledInstrumentsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SapInstalledInstrumentDetailsComponent,
-                        SapInstalledInstrumentListComponent,
-                        ActivitiesListViewComponent,
-                        ActivityDetailsViewComponent,
-                        CallDetailsViewComponent,
-                        CallsListViewComponent,
-                        DataDetailsViewComponent,
-                        ServiceContractsListViewComponent,
-                        ServiceContractDetailsViewComponent,
-                        ServiceContractsModalDetailsViewComponent,
-                        SapInstalledInstrumentListSearchComponent,
-                        SapInstalledInstrumentListTableComponent,
-                        AttachmentsListViewComponent,
-                    ],
                     imports: [
                         CommonModule,
                         MatButtonModule,
@@ -939,6 +918,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         StSearchSelectsModule,
                         AuthModule,
                         NgxStCardModule,
+                        SapInstalledInstrumentDetailsComponent,
+                        SapInstalledInstrumentListComponent,
+                        ActivitiesListViewComponent,
+                        ActivityDetailsViewComponent,
+                        CallDetailsViewComponent,
+                        CallsListViewComponent,
+                        DataDetailsViewComponent,
+                        ServiceContractsListViewComponent,
+                        ServiceContractDetailsViewComponent,
+                        ServiceContractsModalDetailsViewComponent,
+                        SapInstalledInstrumentListSearchComponent,
+                        SapInstalledInstrumentListTableComponent,
+                        AttachmentsListViewComponent,
                     ],
                     providers: [SapInstalledInstrumentsService],
                     exports: [
@@ -946,7 +938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         SapInstalledInstrumentDetailsComponent,
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i1$2.MatIconRegistry }] });
+        }], ctorParameters: () => [] });
 
 /*
  * Public API Surface of ngx-st-sap-installed-instruments