@colijnit/transaction 256.1.8 → 256.1.9

package/fesm2015/colijnit-transaction.js

@@ -1,6 +1,6 @@
 import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewEncapsulation, Input, HostBinding, EventEmitter, ChangeDetectorRef, Output, Injector, ComponentFactoryResolver, ApplicationRef, Directive, ViewChild, ViewChildren, ElementRef, forwardRef, Pipe, NgModule, ContentChildren, HostListener, ChangeDetectionStrategy, Renderer2, Inject, LOCALE_ID } from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, Input, HostBinding, EventEmitter, ChangeDetectorRef, Output, Injector, ComponentFactoryResolver, ApplicationRef, Directive, ViewChild, ViewChildren, ElementRef, forwardRef, Pipe, NgModule, ContentChildren, ChangeDetectionStrategy, HostListener, Renderer2, ViewContainerRef, Inject, LOCALE_ID } from '@angular/core';
 import { SequenceName } from '@colijnit/transactionapi/build/enum/sequence-name.enum';
 import { BehaviorSubject, Subject, throwError } from 'rxjs';
 import { PendingReasonType } from '@colijnit/transactionapi/build/enum/pending-reason-type.enum';
@@ -278,8 +278,8 @@ class Version {
     constructor() {
         this.name = "@colijnit/transaction";
         this.description = "Colijn IT transaction package";
-        this.symVer = "256.1.8";
-        this.publishDate = "1-11-2024 08:49:24";
+        this.symVer = "256.1.9";
+        this.publishDate = "6-11-2024 14:22:44";
     }
 }
 
@@ -2178,6 +2178,9 @@ class TransactionConnectorAdapterService {
         return __awaiter(this, void 0, void 0, function* () {
             const result = yield this.connector.getSingleImage(nodeId, publication, includeMimetype, thumb);
             if (result.validationResult && result.validationResult.success) {
+                if (result.resultObject && result.resultObject.fileType === 'UNITYWEB') {
+                    return "";
+                }
                 if (result.resultObject && result.resultObject.filePath !== null && result.resultObject.filePath !== undefined && result.resultObject.filePath !== "") {
                     return ImageUtils.getFixedImageFilepathUrl(result.resultObject.filePath);
                 }
@@ -6672,58 +6675,53 @@ class TransactionConnectorService {
     }
     getCommissionCodes(languageCode) {
         return __awaiter(this, void 0, void 0, function* () {
-            //const domainName: DomainName = DomainName.CommissionCode;
-            //return this._selectMultipleParameterizedCacheService.requestCache<CoDomainValue>(CoDomainValue, (languageCode: string, domainName: DomainName) => {
-            return this._adapterService.getCommissionCodes(languageCode);
-            //}).getValue(languageCode, domainName);
+            return this._selectMultipleParameterizedCacheService.requestCache(DomainName.CommissionCode, (languageCode, domainName) => {
+                return this._adapterService.getCommissionCodes(languageCode);
+            }).getValue(languageCode, DomainName.CommissionCode);
         });
     }
     getInOutCollection(languageCode) {
         return __awaiter(this, void 0, void 0, function* () {
-            //const domainName: DomainName = DomainName.InOutCollection;
-            //return this._selectMultipleParameterizedCacheService.requestCache<CoDomainValue>(CoDomainValue, (languageCode: string, domainName: DomainName) => {
-            return this._adapterService.getInOutCollection(languageCode);
-            //}).getValue(languageCode, domainName);
+            return this._selectMultipleParameterizedCacheService.requestCache(DomainName.InOutCollection, (languageCode, domainName) => {
+                return this._adapterService.getInOutCollection(languageCode);
+            }).getValue(languageCode, DomainName.InOutCollection);
         });
     }
     getYesNoCollection(languageCode) {
         return __awaiter(this, void 0, void 0, function* () {
-            //const domainName: DomainName = DomainName.YesNo;
-            //return this._selectMultipleParameterizedCacheService.requestCache<CoDomainValue>(CoDomainValue, (languageCode: string, domainName: DomainName) => {
-            return this._adapterService.getYesNoCollection(languageCode);
-            //}).getValue(languageCode, domainName);
+            return this._selectMultipleParameterizedCacheService.requestCache(DomainName.YesNo, (languageCode, domainName) => {
+                return this._adapterService.getYesNoCollection(languageCode);
+            }).getValue(languageCode, DomainName.YesNo);
         });
     }
     getPriceKindCollection(languageCode) {
         return __awaiter(this, void 0, void 0, function* () {
-            //const domainName: DomainName = DomainName.PriceKind;
-            //return this._selectMultipleParameterizedCacheService.requestCache<CoDomainValue>(CoDomainValue, (languageCode: string, domainName: DomainName) => {
-            return this._adapterService.getPriceKindCollection(languageCode);
-            //}).getValue(languageCode, domainName);
+            return this._selectMultipleParameterizedCacheService.requestCache(DomainName.PriceKind, (languageCode, domainName) => {
+                return this._adapterService.getPriceKindCollection(languageCode);
+            }).getValue(languageCode, DomainName.PriceKind);
         });
     }
     getPriorityCollection(languageCode) {
         return __awaiter(this, void 0, void 0, function* () {
-            // const domainName: DomainName = DomainName.Priority;
-            //return this._selectMultipleParameterizedCacheService.requestCache<CoDomainValue>(CoDomainValue, (languageCode: string, domainName: DomainName) => {
-            return this._adapterService.getPriorityCollection(languageCode);
-            // }).getValue(languageCode, domainName);
+            return this._selectMultipleParameterizedCacheService.requestCache(DomainName.Priority, (languageCode, domainName) => {
+                return this._adapterService.getPriorityCollection(languageCode);
+            }).getValue(languageCode, DomainName.Priority);
         });
     }
     getEntryTypes(languageCode) {
-        // const domainName: DomainName = DomainName.ServiceCommunicationType;
-        //return this._selectMultipleParameterizedCacheService.requestCache<CoDomainValue>(CoDomainValue, (languageCode: string, domainName: DomainName) => {
-        return this._adapterService.getEntryTypes(languageCode);
-        //}).getValue(languageCode, domainName);
+        return this._selectMultipleParameterizedCacheService.requestCache(DomainName.ServiceCommunicationType, (languageCode, domainName) => {
+            return this._adapterService.getEntryTypes(languageCode);
+        }).getValue(languageCode, DomainName.ServiceCommunicationType);
     }
     getDomainTypes(languageCode) {
-        // const domainName: DomainName = DomainName.TransType;
-        // return this._selectMultipleParameterizedCacheService.requestCache<CoDomainValue>(CoDomainValue, (languageCode: string, domainName: DomainName) => {
-        return this._adapterService.getDomainTypes(languageCode);
-        //}).getValue(languageCode, domainName);
+        return this._selectMultipleParameterizedCacheService.requestCache(DomainName.TransType, (languageCode, domainName) => {
+            return this._adapterService.getDomainTypes(languageCode);
+        }).getValue(languageCode, DomainName.TransType);
     }
     getCauseCodes() {
-        return this._adapterService.getCauseCodes();
+        return this._selectMultipleCacheService.requestCache(CauseCode, () => {
+            return this._adapterService.getCauseCodes();
+        }).getValue();
     }
     getTransactionArticleWarehouses(goodId) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -7233,12 +7231,16 @@ class TransactionConnectorService {
     }
     getOrderConfirmationDefaultSendMethod(relationId) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this._adapterService.getOrderConfirmationDefaultSendMethod(relationId);
+            return this._selectSinlgeParameterizedCacheService.requestCache(Number, (relationId) => {
+                return this._adapterService.getOrderConfirmationDefaultSendMethod(relationId);
+            }).getValue(relationId);
         });
     }
     getDefaultEmailAddressListForOrderConfirmation(transactionUUID) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this._adapterService.getDefaultEmailAddressListForOrderConfirmation(transactionUUID);
+            return this._selectMultipleParameterizedCacheService.requestCache(String, (transactionUUID) => {
+                return this._adapterService.getDefaultEmailAddressListForOrderConfirmation(transactionUUID);
+            }).getValue(transactionUUID);
         });
     }
     printOrderConfirmation(request) {
@@ -7598,7 +7600,9 @@ class TransactionConnectorService {
     }
     getTransactionInfo(transId, lineNr) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this._adapterService.getTransactionInfo(transId, lineNr);
+            return this._selectMultipleParameterizedCacheService.requestCache(TransactionInfoHistory, ([transId, lineNr]) => {
+                return this._adapterService.getTransactionInfo(transId, lineNr);
+            }).getValue([transId, lineNr]);
         });
     }
     getRefTransactions(transId) {
@@ -7627,12 +7631,16 @@ class TransactionConnectorService {
     }
     getReportHeadersByTransIdAndLayoutCode(transId, documentCode) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this._adapterService.getReportHeadersByTransIdAndLayoutCode(transId, documentCode);
+            return this._selectMultipleParameterizedCacheService.requestCache(HistoricReport, (transId, documentCode) => {
+                return this._adapterService.getReportHeadersByTransIdAndLayoutCode(transId, documentCode);
+            }).getValue(transId, documentCode);
         });
     }
     getPackageStickerPrintLayouts() {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this._adapterService.getPackageStickerPrintLayouts();
+            return this._selectMultipleCacheService.requestCache(ReportLayoutSelectionPrint, () => {
+                return this._adapterService.getPackageStickerPrintLayouts();
+            }).getValue();
         });
     }
     copySalesOrder(copyTransactionRequest) {
@@ -8258,6 +8266,7 @@ class TransactionBaseComponent {
     set cfgName(value) {
         this._cfgName = value;
         this.configSet();
+        this.detectChanges();
     }
     get cfgName() {
         return this._cfgName;
@@ -8269,11 +8278,13 @@ class TransactionBaseComponent {
             this.headerReadonly = false;
             this.tooltipMessage = undefined;
         }
+        this.detectChanges();
     }
     get forceWritable() {
         return this._forceWritable;
     }
     set transaction(value) {
+        const shouldDetectChanges = this._transaction !== value;
         this._transaction = value;
         if (this._transaction) {
             if (this._transaction.transactionInfo) {
@@ -8309,11 +8320,15 @@ class TransactionBaseComponent {
                 this.transactionLines.filter(l => l.articleLineStatus ? l.articleLineStatus.quantityToInvoice !== 0 : false).length > 0 :
                 this.transactionLines.filter(l => l.articleLineStatus ? l.articleLineStatus.quantityToInvoice === 0 : false).length === 0;
         }
+        if (shouldDetectChanges) {
+            this.detectChanges();
+        }
     }
     get transaction() {
         return this._transaction;
     }
     set transactionLine(value) {
+        const shouldDetectChanges = this._transactionLine !== value;
         if (value) {
             this._transactionLine = value;
             if (this._transactionLine.salesUnitDecimals) {
@@ -8351,6 +8366,9 @@ class TransactionBaseComponent {
             this.lineQuantityTransportNotification = this._transactionLine.articleLineStatus && this._transactionLine.articleLineStatus.hasOwnProperty('quantityTransportNotification') ? this._transactionLine.articleLineStatus.quantityTransportNotification : 0;
             this.lineQuantityInvoiceControl = this._transactionLine.articleLineStatus && this._transactionLine.articleLineStatus.hasOwnProperty('quantityInvoiceControl') ? this._transactionLine.articleLineStatus.quantityInvoiceControl : 0;
             this.transactionLineSet();
+            if (shouldDetectChanges) {
+                this.detectChanges();
+            }
         }
     }
     get transactionLine() {
@@ -8365,6 +8383,7 @@ class TransactionBaseComponent {
     //   return this._transactionMarginInfo;
     // }
     set transactionInfo(value) {
+        const shouldDetectChanges = this._transactionInfo !== value;
         if (value) {
             this.headerReadonly = false;
             this.tooltipMessage = "";
@@ -8385,13 +8404,20 @@ class TransactionBaseComponent {
                 this.orderLineSets = this._transactionInfo.orderLineSets;
             }
             this.transactionInfoSet();
+            if (shouldDetectChanges) {
+                this.detectChanges();
+            }
         }
     }
     get transactionInfo() {
         return this._transactionInfo;
     }
     set orderLineSets(value) {
+        const shouldDetectChanges = this._orderLineSets !== value;
         this._orderLineSets = value;
+        if (shouldDetectChanges) {
+            this.detectChanges();
+        }
     }
     get orderLineSets() {
         return this._orderLineSets;
@@ -8405,20 +8431,28 @@ class TransactionBaseComponent {
         return this._transactionServiceInfo ? this._transactionServiceInfo : new TransactionServiceInfo();
     }*/
     set transactionTotal(value) {
+        const shouldDetectChanges = this._transactionTotal !== value;
         if (value) {
             this._transactionTotal = value;
             this.transactionTotalSet();
+            if (shouldDetectChanges) {
+                this.detectChanges();
+            }
         }
     }
     get transactionTotal() {
         return this._transactionTotal;
     }
     set relation(value) {
+        const shouldDetectChanges = this._relation !== value;
         if (value) {
             this._relation = value;
             this.relationKind = this._relation.relationType;
             this.relationType = this._relation.type;
             this.relationSet();
+            if (shouldDetectChanges) {
+                this.detectChanges();
+            }
         }
     }
     get relation() {
@@ -8429,6 +8463,7 @@ class TransactionBaseComponent {
         if (this.transactionLine) {
             this.transactionLine.selected = this._selected;
         }
+        this.detectChanges();
     }
     get selected() {
         return this._selected;
@@ -8437,6 +8472,7 @@ class TransactionBaseComponent {
         return this._transactionLine.hasOwnProperty('lineNr') ? this._transactionLine : this._transactionInfo;
     }
     ngOnInit() {
+        this.changeDetector.markForCheck();
         this._baseSubs.push(this.transactionEventService.transactionLineVisibilityChange.subscribe((data) => {
             if (data && this.transactionLine && data.line.lineNr === this.transactionLine.lineNr) {
                 this.visibilitySet(data.visible);
@@ -8469,6 +8505,7 @@ class TransactionBaseComponent {
     }
     visibilitySet(visible) {
         this.visible = visible;
+        this.detectChanges();
     }
     configSet() {
     }
@@ -8609,6 +8646,7 @@ class DialogTransactionBaseComponent extends TransactionBaseComponent {
         }
         this.close.emit();
         this.onClose(type);
+        this.detectChanges();
     }
 }
 DialogTransactionBaseComponent.decorators = [
@@ -9314,9 +9352,9 @@ class TransactionRelationService {
         // }).getValue();
     }
     getSupplierLightById(supplierId) {
-        // return this._selectSingleCacheService.requestCache<SupplierFullObject>(SupplierFullObject, relationNo, () => {
-        return this._adapterService.getSupplierLightById(supplierId);
-        // }).getValue();
+        return this._selectSingleCacheService.requestCache(SupplierLightObject, supplierId, () => {
+            return this._adapterService.getSupplierLightById(supplierId);
+        }).getValue();
     }
     insertAddress(address) {
         return this._adapterService.insertAddress(address);
@@ -10303,12 +10341,12 @@ class TransactionService extends PendingReasonService {
     }
     prepareJsPickingListInternalParam() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.internalParameterJsPickingList = yield this.getInternalParameter(InternalParam.PickingList);
+            this.getInternalParameter(InternalParam.PickingList).then((value) => this.internalParameterJsPickingList = value);
         });
     }
     prepareManualSaveInternalParam() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.manualSaveParam = yield this.getInternalParameter(InternalParam.TransManualSave);
+            this.getInternalParameter(InternalParam.TransManualSave).then((value) => this.manualSaveParam = value);
         });
     }
     prepareDropShipmentInternalParam() {
@@ -15433,6 +15471,9 @@ class TransactionTotalsComponent extends TransactionBaseComponent {
             }
         });
     }
+    transactionTotalSet() {
+        this.detectChanges();
+    }
 }
 TransactionTotalsComponent.decorators = [
     { type: Component, args: [{
@@ -15471,6 +15512,7 @@ TransactionTotalsComponent.decorators = [
                                            (close)="showDiscountDialog = false">
     </co-dialog-transaction-header-discount>
   `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -15832,8 +15874,9 @@ TransactionHeaderDiscountTransactionTotalModule.decorators = [
 ];
 
 class TransactionButtonComponent {
-    constructor(_screenConfigService) {
+    constructor(_screenConfigService, _changeDetector) {
         this._screenConfigService = _screenConfigService;
+        this._changeDetector = _changeDetector;
         this.statusColor = false;
         this.readonly = false;
         this.hidden = false;
@@ -15878,11 +15921,13 @@ TransactionButtonComponent.decorators = [
                         provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => TransactionButtonComponent)
                     }],
-                encapsulation: ViewEncapsulation.None
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.Default
             },] }
 ];
 TransactionButtonComponent.ctorParameters = () => [
-    { type: TransactionScreenConfigurationService }
+    { type: TransactionScreenConfigurationService },
+    { type: ChangeDetectorRef }
 ];
 TransactionButtonComponent.propDecorators = {
     label: [{ type: Input }],
@@ -15964,6 +16009,7 @@ class TransactionLineDescriptionComponent extends TransactionInputFieldBaseCompo
         super(...arguments);
         this.icons = Icon;
         this.showPurchaseDesc = false;
+        this.customHeight = true;
     }
     set child(content) {
         if (content) {
@@ -16065,7 +16111,7 @@ TransactionLineDescriptionComponent.decorators = [
                    [readonly]="readonly"
                    [model]="getDescription()"
                    (blur)="editMode = false"
-                   class="custom-height"
+                   [class.custom-height]="customHeight"
     ></co-input-text>
   `,
                 providers: [{
@@ -16079,7 +16125,8 @@ TransactionLineDescriptionComponent.decorators = [
 TransactionLineDescriptionComponent.propDecorators = {
     child: [{ type: ViewChild, args: ['input', { read: InputTextComponent },] }],
     showPurchaseDesc: [{ type: Input }],
-    configNames: [{ type: Input }]
+    configNames: [{ type: Input }],
+    customHeight: [{ type: Input }]
 };
 
 class TransactionLineDescriptionModule {
@@ -16658,7 +16705,9 @@ class TransactionSearchService {
     set transactionType(value) {
         if (this._transactionType !== value) {
             this._resetRequest();
+            this.searchRequest.transactionKind = value;
             this.transactions.length = 0;
+            this.searchRequestSet.next(this.searchRequest);
         }
         this._transactionType = value;
     }
@@ -17078,13 +17127,28 @@ TransactionSearchSalesOrderGridComponent.propDecorators = {
 };
 
 class TransactionSearchTileBaseComponent {
-    constructor(iconCacheService) {
+    constructor(iconCacheService, changeDetection) {
         this.iconCacheService = iconCacheService;
+        this.changeDetection = changeDetection;
         this.cfgNames = TransactionCfgName;
         this.icons = Icon;
         this.transactionClick = new EventEmitter();
         this.selectedClick = new EventEmitter();
     }
+    set showCheckbox(value) {
+        this._showCheckbox = value;
+        this.detectChanges();
+    }
+    get showCheckbox() {
+        return this._showCheckbox;
+    }
+    set transaction(value) {
+        this._transaction = value;
+        this.detectChanges();
+    }
+    get transaction() {
+        return this._transaction;
+    }
     showClass() {
         return true;
     }
@@ -17094,12 +17158,16 @@ class TransactionSearchTileBaseComponent {
     onSelectedClick(transaction) {
         this.selectedClick.emit(transaction);
     }
+    detectChanges() {
+        this.changeDetection.detectChanges();
+    }
 }
 TransactionSearchTileBaseComponent.decorators = [
     { type: Directive }
 ];
 TransactionSearchTileBaseComponent.ctorParameters = () => [
-    { type: IconCacheService }
+    { type: IconCacheService },
+    { type: ChangeDetectorRef }
 ];
 TransactionSearchTileBaseComponent.propDecorators = {
     showCheckbox: [{ type: Input }],
@@ -17188,9 +17256,10 @@ TransactionSearchPurchaseOrderTileComponent.decorators = [
 ];
 
 class TransactionSearchSalesOrderTileComponent extends TransactionSearchTileBaseComponent {
-    constructor(iconCacheService) {
-        super(iconCacheService);
+    constructor(iconCacheService, changeDetector) {
+        super(iconCacheService, changeDetector);
         this.iconCacheService = iconCacheService;
+        this.changeDetector = changeDetector;
         this.statusBarConfigNames = {
             statusBarBT: this.cfgNames.StatusBarBT,
             statusBarTG: this.cfgNames.StatusBarTG,
@@ -17202,86 +17271,95 @@ class TransactionSearchSalesOrderTileComponent extends TransactionSearchTileBase
             statusBarGL: this.cfgNames.StatusBarGL,
             statusBarGF: this.cfgNames.StatusBarGF
         };
-        this.showAvatar = true;
+        this._showAvatar = true;
+    }
+    set showAvatar(value) {
+        this._showAvatar = value;
+        this.detectChanges();
+    }
+    get showAvatar() {
+        return this._showAvatar;
     }
 }
 TransactionSearchSalesOrderTileComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-transaction-search-sales-order-tile",
                 template: `
-    <div class="transaction-tile-wrapper" (click)="onTransactionClick(transaction)">
-      <div class="tile">
-        <div class="tile-header">
-          <div class="tile-upper-left" *ngIf="showAvatar">
-            <div class="transaction-tile-avatar">
-              <co-avatar [image]="transaction.execImage" [relationId]="transaction.handledBy"></co-avatar>
-            </div>
-          </div>
-          <div class="tile-upper-middle">
-            <div class="header">
-              <span [textContent]="transaction.transNr"></span>
-              <div class="type-indicator"><span [textContent]="transaction.transactionKind"></span></div>
-            </div>
-            <div class="text"><span [textContent]="transaction.brancheName"></span></div>
-          </div>
-          <div class="tile-upper-right">
-            <div class="status-bar-wrapper" (click)="$event.stopPropagation()">
-              <co-transaction-statusbar
-                [screenConfigurationObject]="cfgNames.StatusBar"
-                [configNames]="statusBarConfigNames"
-                [transaction]="transaction"></co-transaction-statusbar>
-            </div>
-            <div class="header total-price-vat"><span
-              [textContent]="transaction.totalPriceWithVat | currency:'EUR'"></span></div>
-          </div>
-        </div>
-        <div class="tile-body">
-          <div class="tile-middle-left">
-            <co-input-checkbox
-              *ngIf="showCheckbox"
-              [(model)]="transaction.selected"
-              (modelChange)="onSelectedClick(transaction)"
-            ></co-input-checkbox>
-          </div>
-          <div class="tile-middle-middle">
-            <div class="text"><span [textContent]="transaction.relationName"></span></div>
-            <div class="text"><span [textContent]="transaction.getAdres()"></span></div>
-          </div>
-          <div class="tile-middle-right"></div>
-        </div>
-        <div class="tile-footer">
-          <div class="tile-bottom-left order-info-section">
-            <div class="label"><span [textContent]="'ORDER_DATE' | localize"></span></div>
-            <div class="value">
-              <span [textContent]="transaction.getTransDate() | date:'dd MMM yyyy'"></span></div>
-          </div>
-          <div class="tile-bottom-middle order-info-section">
-            <div class="label"><span [textContent]="'DELIVERY_DATE' | localize"></span></div>
-            <div class="value">
-              <span [textContent]="transaction.getDeliveryDate() | date:'dd MMM yyyy'"></span>
-              <div *ngIf="transaction.getDeliveryDate()">
-                <co-icon *ngIf="transaction.deliveryDateDefinitive; else indefinite"
-                         [iconData]="iconCacheService.getIcon(icons.Lock)" class="lock-icon"></co-icon>
-                <ng-template #indefinite>
-                  <co-icon [iconData]="iconCacheService.getIcon(icons.Unlock)" class="unlock-icon"></co-icon>
-                </ng-template>
+      <div class="transaction-tile-wrapper" (click)="onTransactionClick(transaction)">
+          <div class="tile">
+              <div class="tile-header">
+                  <div class="tile-upper-left" *ngIf="showAvatar">
+                      <div class="transaction-tile-avatar">
+                          <co-avatar [image]="transaction.execImage" [relationId]="transaction.handledBy"></co-avatar>
+                      </div>
+                  </div>
+                  <div class="tile-upper-middle">
+                      <div class="header">
+                          <span [textContent]="transaction.transNr"></span>
+                          <div class="type-indicator"><span [textContent]="transaction.transactionKind"></span></div>
+                      </div>
+                      <div class="text"><span [textContent]="transaction.brancheName"></span></div>
+                  </div>
+                  <div class="tile-upper-right">
+                      <div class="status-bar-wrapper" (click)="$event.stopPropagation()">
+                          <co-transaction-statusbar
+                                  [screenConfigurationObject]="cfgNames.StatusBar"
+                                  [configNames]="statusBarConfigNames"
+                                  [transaction]="transaction"></co-transaction-statusbar>
+                      </div>
+                      <div class="header total-price-vat"><span
+                              [textContent]="transaction.totalPriceWithVat | currency:'EUR'"></span></div>
+                  </div>
+              </div>
+              <div class="tile-body">
+                  <div class="tile-middle-left">
+                      <co-input-checkbox
+                              *ngIf="showCheckbox"
+                              [(model)]="transaction.selected"
+                              (modelChange)="onSelectedClick(transaction)"
+                      ></co-input-checkbox>
+                  </div>
+                  <div class="tile-middle-middle">
+                      <div class="text"><span [textContent]="transaction.relationName"></span></div>
+                      <div class="text"><span [textContent]="transaction.getAdres()"></span></div>
+                  </div>
+                  <div class="tile-middle-right"></div>
+              </div>
+              <div class="tile-footer">
+                  <div class="tile-bottom-left order-info-section">
+                      <div class="label"><span [textContent]="'ORDER_DATE' | localize"></span></div>
+                      <div class="value">
+                          <span [textContent]="transaction.getTransDate() | date:'dd MMM yyyy'"></span></div>
+                  </div>
+                  <div class="tile-bottom-middle order-info-section">
+                      <div class="label"><span [textContent]="'DELIVERY_DATE' | localize"></span></div>
+                      <div class="value">
+                          <span [textContent]="transaction.getDeliveryDate() | date:'dd MMM yyyy'"></span>
+                          <div *ngIf="transaction.getDeliveryDate()">
+                              <co-icon *ngIf="transaction.deliveryDateDefinitive; else indefinite"
+                                       [iconData]="iconCacheService.getIcon(icons.Lock)" class="lock-icon"></co-icon>
+                              <ng-template #indefinite>
+                                  <co-icon [iconData]="iconCacheService.getIcon(icons.Unlock)" class="unlock-icon"></co-icon>
+                              </ng-template>
+                          </div>
+                      </div>
+                  </div>
+                  <div class="tile-bottom-right order-info-section">
+                      <div class="label"><span [textContent]="'ORDER_RULE' | localize"></span></div>
+                      <div class="value">
+                          <span [textContent]="'68/00'"></span></div>
+                  </div>
               </div>
-            </div>
-          </div>
-          <div class="tile-bottom-right order-info-section">
-            <div class="label"><span [textContent]="'ORDER_RULE' | localize"></span></div>
-            <div class="value">
-              <span [textContent]="'68/00'"></span></div>
           </div>
-        </div>
       </div>
-    </div>
   `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
 TransactionSearchSalesOrderTileComponent.ctorParameters = () => [
-    { type: IconCacheService }
+    { type: IconCacheService },
+    { type: ChangeDetectorRef }
 ];
 TransactionSearchSalesOrderTileComponent.propDecorators = {
     showAvatar: [{ type: Input }]
@@ -17384,7 +17462,9 @@ class PurchaseConfirmationService {
                 const result = yield this._transactionConnectorService.getAnalyzedOrderConfirmations();
                 if (result) {
                     this.analyzedConfirmation = result.find(a => a.analysisId === this.confirmationAnalysisId);
-                    this.setOrdersTotal(this.analyzedConfirmation.ordersTotal);
+                    if (this.analyzedConfirmation) {
+                        this.setOrdersTotal(this.analyzedConfirmation.ordersTotal);
+                    }
                 }
             }
         });
@@ -17695,8 +17775,12 @@ class TransactionQuickAccessSendMethodBaseComponent extends TransactionBaseCompo
             if (this.printLayouts && this.printLayouts.length > 0) {
                 const defaultLayout = this.printLayouts.find(p => p.isDefault);
                 if (defaultLayout) {
-                    this.reportDocumentPrintRequest.reportId = defaultLayout.reportId;
-                    this.reportDocumentPdfRequest.reportId = defaultLayout.reportId;
+                    if (this.reportDocumentPrintRequest) {
+                        this.reportDocumentPrintRequest.reportId = defaultLayout.reportId;
+                    }
+                    if (this.reportDocumentPdfRequest) {
+                        this.reportDocumentPdfRequest.reportId = defaultLayout.reportId;
+                    }
                 }
             }
         });
@@ -18398,12 +18482,13 @@ TransactionLineActionButtonsPopupComponent.propDecorators = {
 };
 
 class TransactionLineActionButtonsComponent {
-    constructor(elementRef, iconCacheService, _transactionService, _transactionEventService, _overlayService) {
+    constructor(elementRef, iconCacheService, _transactionService, _transactionEventService, _overlayService, _changeDetector) {
         this.elementRef = elementRef;
         this.iconCacheService = iconCacheService;
         this._transactionService = _transactionService;
         this._transactionEventService = _transactionEventService;
         this._overlayService = _overlayService;
+        this._changeDetector = _changeDetector;
         this.icons = Icon;
         this.isFirst = false;
         this.waitingForUserAction = new EventEmitter();
@@ -18515,7 +18600,8 @@ TransactionLineActionButtonsComponent.decorators = [
                 providers: [
                     OverlayService
                 ],
-                encapsulation: ViewEncapsulation.None
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
 TransactionLineActionButtonsComponent.ctorParameters = () => [
@@ -18523,7 +18609,8 @@ TransactionLineActionButtonsComponent.ctorParameters = () => [
     { type: IconCacheService },
     { type: TransactionService },
     { type: TransactionEventService },
-    { type: OverlayService }
+    { type: OverlayService },
+    { type: ChangeDetectorRef }
 ];
 TransactionLineActionButtonsComponent.propDecorators = {
     configNames: [{ type: Input }],
@@ -18695,7 +18782,8 @@ TransactionOverviewLineComponent.decorators = [
           </ng-container>
       </co-transaction-base-line>
   `,
-                encapsulation: ViewEncapsulation.None
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
 TransactionOverviewLineComponent.ctorParameters = () => [
@@ -19126,6 +19214,9 @@ class TransactionReceiveGoodsLineBaseComponent extends TransactionBaseComponent
         this._subscriptions.forEach(s => s.unsubscribe());
     }
     changeLineAmount(amount) {
+        if (this.transactionLine.articleLineStatus) {
+            this.transactionLine.articleLineStatus.quantityToReceive = amount;
+        }
         this.transactionLine.stickerAmount = amount * (this.transactionLine.productItemsAmount ? this.transactionLine.productItemsAmount : 1);
     }
     handleLineClicked(mouseClick) {
@@ -19239,7 +19330,7 @@ TransactionReceiveGoodsLineComponent.decorators = [
               <div class="transaction-line-totals-amount">
                 <co-input-number-picker class="amount-number-picker"
                                         [screenConfigurationObject]="cfgNames.LineQuantityToReceive"
-                                        [(model)]="transactionLine.articleLineStatus.quantityToReceive"
+                                        [model]="transactionLine.articleLineStatus?.quantityToReceive"
                                         [decimals]="decimals"
                                         [min]="1"
                                         [max]="transactionLine.amount - lineQuantityReceived"
@@ -20332,6 +20423,7 @@ class TransactionPurchaseOrderLineBaseComponent extends TransactionBaseComponent
         this.subs = [];
     }
     ngOnInit() {
+        super.ngOnInit();
         this.subs.push(this.transactionEventService.orderConfirmationDropped.subscribe((data) => {
             if (data) {
                 if (data.lineNr !== undefined && this.transactionLine && this.transactionLine.lineNr === data.lineNr) {
@@ -20349,7 +20441,6 @@ class TransactionPurchaseOrderLineBaseComponent extends TransactionBaseComponent
         }), this.transactionEventService.overwritePurchaseOrderConfirmationCompletedChanged.subscribe(() => {
             this._handleConfirmationOverwrite();
         }));
-        this._getPurchasePortalLine();
     }
     ngOnDestroy() {
         this.subs.forEach(s => s.unsubscribe());
@@ -20386,11 +20477,19 @@ class TransactionPurchaseOrderLineBaseComponent extends TransactionBaseComponent
     }
     transactionLineSet() {
         super.transactionLineSet();
+        this._getPurchasePortalLine();
         this.showCheckboxForLine = this.transactionLine.articleLineStatus &&
             this.transactionLine.articleLineStatus.quantityPurchaseConfirmed !== this.transactionLine.amount;
     }
+    visibilitySet(visible) {
+        super.visibilitySet(visible);
+        this._getPurchasePortalLine();
+    }
     _getPurchasePortalLine() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (this._purchasePortalLinesResponse || !this.transactionInfo || !this.transactionLine || !this.visible) {
+                return;
+            }
             const getPurchasePortalLine = new GetPurchasePortalLine();
             const purchasePortalFilter = new PurchasePortalFilters();
             purchasePortalFilter.purchaseOrderNo = this.transactionInfo.transactionNr.toString();
@@ -20398,9 +20497,9 @@ class TransactionPurchaseOrderLineBaseComponent extends TransactionBaseComponent
             getPurchasePortalLine.transIdPurchase = this.transactionInfo.id;
             getPurchasePortalLine.docKind = "IB";
             getPurchasePortalLine.filterObject = purchasePortalFilter;
-            const purchasePortalLinesResponse = yield this.transactionService.getPurchasePortalLines(getPurchasePortalLine);
-            if (purchasePortalLinesResponse.length > 0) {
-                this.transactionLine.purchasePortalLine = purchasePortalLinesResponse[0];
+            this._purchasePortalLinesResponse = yield this.transactionService.getPurchasePortalLines(getPurchasePortalLine);
+            if (this._purchasePortalLinesResponse.length > 0) {
+                this.transactionLine.purchasePortalLine = this._purchasePortalLinesResponse[0];
                 this.transactionLine.quantityPurchaseToConfirm = +this.transactionLine.purchasePortalLine.amountOrdered - +this.transactionLine.purchasePortalLine.amountConfirmedTarget;
                 this.transactionEventService.transactionLineChanged.next(this.transactionLine);
                 this.detectChanges();
@@ -20777,6 +20876,7 @@ TransactionSalesAllocationButtonBarButtonComponent.decorators = [
     <co-icon class="co-transaction-button-bar-icon" [iconData]="iconCacheService.getIcon(iconName)"></co-icon>
     <span class="button-title" [textContent]="title | localize"></span>
   `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -22942,9 +23042,10 @@ TransactionSearchSalesQuotationGridComponent.propDecorators = {
 };
 
 class TransactionSearchSalesQuotationTileComponent extends TransactionSearchTileBaseComponent {
-    constructor(iconCacheService) {
-        super(iconCacheService);
+    constructor(iconCacheService, changeDetector) {
+        super(iconCacheService, changeDetector);
         this.iconCacheService = iconCacheService;
+        this.changeDetector = changeDetector;
     }
     showClass() {
         return true;
@@ -23010,7 +23111,8 @@ TransactionSearchSalesQuotationTileComponent.decorators = [
             },] }
 ];
 TransactionSearchSalesQuotationTileComponent.ctorParameters = () => [
-    { type: IconCacheService }
+    { type: IconCacheService },
+    { type: ChangeDetectorRef }
 ];
 TransactionSearchSalesQuotationTileComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ["class.co-transaction-search-sales-quotation-tile",] }]
@@ -23371,9 +23473,10 @@ TransactionServiceServiceButtonBarButtonComponent.propDecorators = {
 };
 
 class TransactionSearchPosOrderTileComponent extends TransactionSearchTileBaseComponent {
-    constructor(iconCacheService) {
-        super(iconCacheService);
+    constructor(iconCacheService, changeDetector) {
+        super(iconCacheService, changeDetector);
         this.iconCacheService = iconCacheService;
+        this.changeDetector = changeDetector;
         this.statusBarConfigNames = {
             statusBarBT: this.cfgNames.StatusBarBT,
             statusBarTG: this.cfgNames.StatusBarTG,
@@ -23391,76 +23494,77 @@ TransactionSearchPosOrderTileComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-transaction-search-pos-order-tile',
                 template: `
-        <div class="transaction-tile-wrapper" (click)="onTransactionClick(transaction)">
-            <div class="tile">
-                <div class="tile-header">
-                    <div class="tile-upper-left">
-                        <div class="transaction-tile-avatar">
-                            <co-avatar [image]="transaction.execImage" [relationId]="transaction.handledBy"></co-avatar>
-                        </div>
-                    </div>
-                    <div class="tile-upper-middle">
-                        <div class="header">
-                            <span [textContent]="transaction.transNr"></span>
-                            <div class="type-indicator"><span [textContent]="transaction.transactionKind"></span></div>
-                        </div>
-                        <div class="text"><span [textContent]="transaction.brancheName"></span></div>
-                    </div>
-                    <div class="tile-upper-right">
-                        <div class="status-bar-wrapper"  (click)="$event.stopPropagation()">
-                            <co-transaction-statusbar
-                                    [screenConfigurationObject]="cfgNames.StatusBar"
-                                    [configNames]="statusBarConfigNames"
-                                    [transaction]="transaction"></co-transaction-statusbar>
-                        </div>
-                        <div class="header total-price-vat"><span [textContent]="transaction.totalPriceWithVat | currency:'EUR'"></span></div>
-                    </div>
-                </div>
-                <div class="tile-body">
-                    <div class="tile-middle-left">
-                        <co-input-checkbox *ngIf="showCheckbox"
-                                           [(model)]="transaction.selected"
-                        ></co-input-checkbox>
-                    </div>
-                    <div class="tile-middle-middle">
-                        <div class="text"><span [textContent]="transaction.relationName"></span></div>
-                        <div class="text"><span [textContent]="transaction.getAdres()"></span></div>
-                    </div>
-                    <div class="tile-middle-right"></div>
-                </div>
-                <div class="tile-footer">
-                    <div class="tile-bottom-left order-info-section">
-                        <div class="label"><span [textContent]="'ORDER_DATE' | localize"></span></div>
-                        <div class="value">
-                            <span [textContent]="transaction.getTransDate() | date:'dd MMM yyyy'"></span></div>
-                    </div>
-                    <div class="tile-bottom-middle order-info-section">
-                        <div class="label"><span [textContent]="'DELIVERY_DATE' | localize"></span></div>
-                        <div class="value">
-                            <span [textContent]="transaction.getDeliveryDate() | date:'dd MMM yyyy'"></span>
-                            <div *ngIf="transaction.getDeliveryDate()">
-                                <co-icon *ngIf="transaction.deliveryDateDefinitive; else indefinite"
-                                         [iconData]="iconCacheService.getIcon(icons.Lock)" class="lock-icon"></co-icon>
-                                <ng-template #indefinite>
-                                    <co-icon [iconData]="iconCacheService.getIcon(icons.Unlock)" class="unlock-icon"></co-icon>
-                                </ng-template>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="tile-bottom-right order-info-section">
-                        <div class="label"><span [textContent]="'ORDER_RULE' | localize"></span></div>
-                        <div class="value">
-                            <span [textContent]="'68/00'"></span></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    `,
+      <div class="transaction-tile-wrapper" (click)="onTransactionClick(transaction)">
+          <div class="tile">
+              <div class="tile-header">
+                  <div class="tile-upper-left">
+                      <div class="transaction-tile-avatar">
+                          <co-avatar [image]="transaction.execImage" [relationId]="transaction.handledBy"></co-avatar>
+                      </div>
+                  </div>
+                  <div class="tile-upper-middle">
+                      <div class="header">
+                          <span [textContent]="transaction.transNr"></span>
+                          <div class="type-indicator"><span [textContent]="transaction.transactionKind"></span></div>
+                      </div>
+                      <div class="text"><span [textContent]="transaction.brancheName"></span></div>
+                  </div>
+                  <div class="tile-upper-right">
+                      <div class="status-bar-wrapper" (click)="$event.stopPropagation()">
+                          <co-transaction-statusbar
+                                  [screenConfigurationObject]="cfgNames.StatusBar"
+                                  [configNames]="statusBarConfigNames"
+                                  [transaction]="transaction"></co-transaction-statusbar>
+                      </div>
+                      <div class="header total-price-vat"><span [textContent]="transaction.totalPriceWithVat | currency:'EUR'"></span></div>
+                  </div>
+              </div>
+              <div class="tile-body">
+                  <div class="tile-middle-left">
+                      <co-input-checkbox *ngIf="showCheckbox"
+                                         [(model)]="transaction.selected"
+                      ></co-input-checkbox>
+                  </div>
+                  <div class="tile-middle-middle">
+                      <div class="text"><span [textContent]="transaction.relationName"></span></div>
+                      <div class="text"><span [textContent]="transaction.getAdres()"></span></div>
+                  </div>
+                  <div class="tile-middle-right"></div>
+              </div>
+              <div class="tile-footer">
+                  <div class="tile-bottom-left order-info-section">
+                      <div class="label"><span [textContent]="'ORDER_DATE' | localize"></span></div>
+                      <div class="value">
+                          <span [textContent]="transaction.getTransDate() | date:'dd MMM yyyy'"></span></div>
+                  </div>
+                  <div class="tile-bottom-middle order-info-section">
+                      <div class="label"><span [textContent]="'DELIVERY_DATE' | localize"></span></div>
+                      <div class="value">
+                          <span [textContent]="transaction.getDeliveryDate() | date:'dd MMM yyyy'"></span>
+                          <div *ngIf="transaction.getDeliveryDate()">
+                              <co-icon *ngIf="transaction.deliveryDateDefinitive; else indefinite"
+                                       [iconData]="iconCacheService.getIcon(icons.Lock)" class="lock-icon"></co-icon>
+                              <ng-template #indefinite>
+                                  <co-icon [iconData]="iconCacheService.getIcon(icons.Unlock)" class="unlock-icon"></co-icon>
+                              </ng-template>
+                          </div>
+                      </div>
+                  </div>
+                  <div class="tile-bottom-right order-info-section">
+                      <div class="label"><span [textContent]="'ORDER_RULE' | localize"></span></div>
+                      <div class="value">
+                          <span [textContent]="'68/00'"></span></div>
+                  </div>
+              </div>
+          </div>
+      </div>
+  `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
 TransactionSearchPosOrderTileComponent.ctorParameters = () => [
-    { type: IconCacheService }
+    { type: IconCacheService },
+    { type: ChangeDetectorRef }
 ];
 TransactionSearchPosOrderTileComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ['class.co-transaction-search-pos-order-tile',] }]
@@ -24149,6 +24253,7 @@ class TransactionPlanningLineComponent extends TransactionBaseComponent {
         super.ngOnInit();
         this._subscriptions.push(this.transactionEventService.selectAllSalesOrderLinesToBePicked.subscribe((value) => {
             this.transactionLine.selected = value && !this.transactionLineToBePickedCompleted;
+            this.detectChanges();
         }));
     }
     ngOnDestroy() {
@@ -24163,6 +24268,7 @@ class TransactionPlanningLineComponent extends TransactionBaseComponent {
             this.hasOpenedSidePanel = true;
         }
         this.transactionLine.selected = value;
+        this.detectChanges();
     }
     handleLineClicked(mouseClick) {
         var _a, _b;
@@ -24176,7 +24282,7 @@ class TransactionPlanningLineComponent extends TransactionBaseComponent {
     }
     dragStarted(ev) {
         this._deliveryPlanningService.currentTransId = this.transaction.transactionInfo.id;
-        ev.dataTransfer.setData("text", "lines");
+        ev.dataTransfer.setData('text', 'lines');
     }
     get linePlanned() {
         var _a, _b;
@@ -24185,112 +24291,109 @@ class TransactionPlanningLineComponent extends TransactionBaseComponent {
         }
         return !((_b = (_a = this._deliveryPlanningService.linesPlanOrder) === null || _a === void 0 ? void 0 : _a.lines) === null || _b === void 0 ? void 0 : _b.find(line => line.originalLineNr === this.transactionLine.lineNr));
     }
-    allowPartialDelivery() {
-        var _a;
-        return (_a = this.transactionInfo) === null || _a === void 0 ? void 0 : _a.allowPartialDelivery;
-    }
 }
 TransactionPlanningLineComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-planning-overview-line",
+                selector: 'co-transaction-planning-line',
                 template: `
-    <co-transaction-base-line
-      [transactionInfo]="transactionInfo"
-      [transactionLine]="transactionLine"
-      [preview]="preview"
-      [isFirst]="isFirst"
-      [draggable]="!linePlanned"
-      (dragstart)="dragStarted($event)"
-      [checkbox]="true"
-      [checkboxValue]="transactionLine.selected || !allowPartialDelivery()"
-      [checkboxReadonly]="!allowPartialDelivery()"
-      (checkboxValueChanged)="handleCheckBoxValueChanged($event, transactionLine)"
-      (click)="handleLineClicked($event)"
-      observeVisibility #observer=visibilityObserve
-      (visibilityChange)="handleVisibilityChange(transactionLine, $event)">
-      <ng-container *ngIf="transactionLine.isArticle">
-        <div class="transaction-line-wrapper">
-          <div *ngIf=!preview class="transaction-line-extended-wrapper">
-            <div class="column1">
-              <span class="transaction-field-label" [textContent]="'COMMISSION_CODE' | localize" *ngIf="isFirst"></span>
-              <co-transaction-line-commission-button
-                [screenConfigurationObject]="cfgNames.LineCommission"
-                [transactionLine]="transactionLine"
-                [transactionInfo]="transactionInfo"
-              ></co-transaction-line-commission-button>
-            </div>
-            <div class="column2">
+      <co-transaction-base-line
+              [transactionInfo]="transactionInfo"
+              [transactionLine]="transactionLine"
+              [preview]="preview"
+              [isFirst]="isFirst"
+              [draggable]="!linePlanned"
+              (dragstart)="dragStarted($event)"
+              [checkbox]="true"
+              [checkboxValue]="transactionLine.selected || !transactionInfo?.allowPartialDelivery"
+              [checkboxReadonly]="!transactionInfo?.allowPartialDelivery"
+              (checkboxValueChanged)="handleCheckBoxValueChanged($event, transactionLine)"
+              (click)="handleLineClicked($event)"
+              observeVisibility #observer=visibilityObserve
+              (visibilityChange)="handleVisibilityChange(transactionLine, $event)">
+          <ng-container *ngIf="transactionLine.isArticle">
+              <div class="transaction-line-wrapper">
+                  <div *ngIf=!preview class="transaction-line-extended-wrapper">
+                      <div class="column1">
+                          <span class="transaction-field-label" [textContent]="'COMMISSION_CODE' | localize" *ngIf="isFirst"></span>
+                          <co-transaction-line-commission-button
+                                  [screenConfigurationObject]="cfgNames.LineCommission"
+                                  [transactionLine]="transactionLine"
+                                  [transactionInfo]="transactionInfo"
+                          ></co-transaction-line-commission-button>
+                      </div>
+                      <div class="column2">
               <span class="transaction-field-label" [textContent]="'WAREHOUSE_AND_STATUS' | localize"
                     *ngIf="isFirst"></span>
-              <co-transaction-line-warehouse-button
-                [screenConfigurationObject]="cfgNames.LineWarehouse"
-                [transactionLine]="transactionLine"
-                [transactionInfo]="transactionInfo"
-              ></co-transaction-line-warehouse-button>
-              <co-transaction-line-statusbar
-                [screenConfigurationObject]="cfgNames.StatusBar"
-                [configNames]="statusBarConfigNames"
-                [transactionInfo]="transactionInfo"
-                [transactionLine]="transactionLine"
-                [activeCategory]="category.SalesOrderPlanning"></co-transaction-line-statusbar>
-            </div>
-            <div class="column3">
+                          <co-transaction-line-warehouse-button
+                                  [screenConfigurationObject]="cfgNames.LineWarehouse"
+                                  [transactionLine]="transactionLine"
+                                  [transactionInfo]="transactionInfo"
+                          ></co-transaction-line-warehouse-button>
+                          <co-transaction-line-statusbar
+                                  [screenConfigurationObject]="cfgNames.StatusBar"
+                                  [configNames]="statusBarConfigNames"
+                                  [transactionInfo]="transactionInfo"
+                                  [transactionLine]="transactionLine"
+                                  [activeCategory]="category.SalesOrderPlanning"></co-transaction-line-statusbar>
+                      </div>
+                      <div class="column3">
               <span class="transaction-field-label" [textContent]="'DELIVERY_INFORMATION' | localize"
                     *ngIf="isFirst"></span>
-              <co-transaction-line-delivery-button
-                [screenConfigurationObject]="cfgNames.LineDeliveryMethod"
-                [transactionLine]="transactionLine"
-                [transactionInfo]="transactionInfo"
-              ></co-transaction-line-delivery-button>
-              <co-transaction-line-delivery-date-button class="transaction-line-delivery-date two-column"
-                                                        [screenConfigurationObject]="cfgNames.LineDeliveryDate"
-                                                        [transactionInfo]="transactionInfo"
-                                                        [transactionLine]="transactionLine"
-              ></co-transaction-line-delivery-date-button>
-            </div>
-          </div>
-          <div class="transaction-line-section">
+                          <co-transaction-line-delivery-button
+                                  [screenConfigurationObject]="cfgNames.LineDeliveryMethod"
+                                  [transactionLine]="transactionLine"
+                                  [transactionInfo]="transactionInfo"
+                          ></co-transaction-line-delivery-button>
+                          <co-transaction-line-delivery-date-button class="transaction-line-delivery-date two-column"
+                                                                    [screenConfigurationObject]="cfgNames.LineDeliveryDate"
+                                                                    [transactionInfo]="transactionInfo"
+                                                                    [transactionLine]="transactionLine"
+                          ></co-transaction-line-delivery-date-button>
+                      </div>
+                  </div>
+                  <div class="transaction-line-section">
             <span class="transaction-field-label" [textContent]="'TOTALS_AND_DISCOUNT' | localize"
                   *ngIf="isFirst"></span>
-            <co-transaction-line-vat-button *ngIf="!preview"
-                                            [screenConfigurationObject]="cfgNames.LineVat"
-                                            [transactionLine]="transactionLine"
-                                            [transactionInfo]="transactionInfo"
-            ></co-transaction-line-vat-button>
-            <div class="transaction-line-totals">
-              <co-transaction-line-price class="transaction-line-totals-price price"
-                                         [screenConfigurationObject]="cfgNames.LinePrice"
-                                         [transactionInfo]="transactionInfo"
-                                         [transactionLine]="transactionLine"
-                                         [showLabel]="false"
-                                         [defaultEditMode]="false"
-              ></co-transaction-line-price>
-              <co-transaction-line-discount-button *ngIf="!preview"
-                                                   [screenConfigurationObject]="cfgNames.LineDiscount"
-                                                   [configNames]="discountConfigNames"
-                                                   [transactionLine]="transactionLine"
-                                                   [transactionInfo]="transactionInfo"
-              ></co-transaction-line-discount-button>
-              <div class="transaction-line-totals-amount">
-                <co-transaction-line-amount class="amount-number-picker"
-                                            [screenConfigurationObject]="cfgNames.LineAmount"
-                                            [transactionLine]="transactionLine"
-                                            [transactionInfo]="transactionInfo"
-                ></co-transaction-line-amount>
+                      <co-transaction-line-vat-button *ngIf="!preview"
+                                                      [screenConfigurationObject]="cfgNames.LineVat"
+                                                      [transactionLine]="transactionLine"
+                                                      [transactionInfo]="transactionInfo"
+                      ></co-transaction-line-vat-button>
+                      <div class="transaction-line-totals">
+                          <co-transaction-line-price class="transaction-line-totals-price price"
+                                                     [screenConfigurationObject]="cfgNames.LinePrice"
+                                                     [transactionInfo]="transactionInfo"
+                                                     [transactionLine]="transactionLine"
+                                                     [showLabel]="false"
+                                                     [defaultEditMode]="false"
+                          ></co-transaction-line-price>
+                          <co-transaction-line-discount-button *ngIf="!preview"
+                                                               [screenConfigurationObject]="cfgNames.LineDiscount"
+                                                               [configNames]="discountConfigNames"
+                                                               [transactionLine]="transactionLine"
+                                                               [transactionInfo]="transactionInfo"
+                          ></co-transaction-line-discount-button>
+                          <div class="transaction-line-totals-amount">
+                              <co-transaction-line-amount class="amount-number-picker"
+                                                          [screenConfigurationObject]="cfgNames.LineAmount"
+                                                          [transactionLine]="transactionLine"
+                                                          [transactionInfo]="transactionInfo"
+                              ></co-transaction-line-amount>
+                          </div>
+                          <co-editable-label class="transaction-line-totals-total price"
+                                             [screenConfigurationObject]="cfgNames.LineNetLineTotal"
+                                             [model]="transactionLine.displayNetLineTotal | coCurrency: true"
+                                             [editModel]="transactionLine.displayNetLineTotal"
+                                             [commit]="!readonly"
+                          ></co-editable-label>
+                      </div>
+                  </div>
               </div>
-              <co-editable-label class="transaction-line-totals-total price"
-                                 [screenConfigurationObject]="cfgNames.LineNetLineTotal"
-                                 [model]="transactionLine.displayNetLineTotal | coCurrency: true"
-                                 [editModel]="transactionLine.displayNetLineTotal"
-                                 [commit]="!readonly"
-              ></co-editable-label>
-            </div>
-          </div>
-        </div>
-      </ng-container>
-    </co-transaction-base-line>
+          </ng-container>
+      </co-transaction-base-line>
   `,
-                encapsulation: ViewEncapsulation.None
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
 TransactionPlanningLineComponent.ctorParameters = () => [
@@ -24307,9 +24410,9 @@ TransactionPlanningLineComponent.ctorParameters = () => [
 TransactionPlanningLineComponent.propDecorators = {
     transactionLineActionButtons: [{ type: ViewChild, args: [TransactionLineActionButtonsComponent,] }],
     descriptionDblClick: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ["class.co-transaction-overview-line",] }],
-    handleMouseOver: [{ type: HostListener, args: ["mouseover", ["$event"],] }],
-    handleMouseLeave: [{ type: HostListener, args: ["mouseleave", ["$event"],] }]
+    showClass: [{ type: HostBinding, args: ['class.co-transaction-planning-line',] }],
+    handleMouseOver: [{ type: HostListener, args: ['mouseover', ['$event'],] }],
+    handleMouseLeave: [{ type: HostListener, args: ['mouseleave', ['$event'],] }]
 };
 
 class TransactionQuickAccessPlanningComponent extends TransactionBaseComponent {
@@ -25683,14 +25786,15 @@ class TransactionLineComponent extends TransactionBaseComponent {
         if (!componentClass) {
             return;
         }
-        this._componentRef = this._compFactoryResolver
-            .resolveComponentFactory(componentClass)
-            .create(this.injector);
-        this.appRef.attachView(this._componentRef.hostView);
+        const factory = this._compFactoryResolver.resolveComponentFactory(componentClass);
+        this._transactionLineContainer.clear();
+        this._componentRef = this._transactionLineContainer.createComponent(factory);
         this._prepareProps();
-        const domElem = this._componentRef.hostView
-            .rootNodes[0];
-        this._transactionLineContainer.nativeElement.appendChild(domElem);
+        this.changeDetector.markForCheck();
+        // const domElem = (this._componentRef.hostView as EmbeddedViewRef<any>)
+        //   .rootNodes[0] as HTMLElement;
+        //
+        // this._transactionLineContainer.nativeElement.appendChild(domElem);
         this._componentRef.onDestroy(() => {
             this.appRef.detachView(this._componentRef.hostView);
         });
@@ -25734,7 +25838,7 @@ TransactionLineComponent.ctorParameters = () => [
     { type: Injector }
 ];
 TransactionLineComponent.propDecorators = {
-    container: [{ type: ViewChild, args: ['transactionLine', { read: ElementRef },] }],
+    container: [{ type: ViewChild, args: ['transactionLine', { read: ViewContainerRef },] }],
     activeCategory: [{ type: Input }],
     preview: [{ type: Input }],
     isFirst: [{ type: Input }],
@@ -28784,10 +28888,9 @@ class TransactionLineSupplierButtonComponent extends TransactionBaseComponent {
         this._getSupplierDescription();
     }
     _getSupplierDescription() {
-        if (this.transactionLine && this.transactionLine.isArticle && this.transactionLine.supplierDescription === undefined) {
-            this._relationService.getRelationById(this.transactionLine.supplierId).then((relations) => {
-                const relation = relations && relations.length > 0 ? relations[0] : null;
-                this.transactionLine.supplierDescription = relation ? relation.displayName : "";
+        if (this.transactionLine && this.transactionLine.isArticle && this.transactionLine.supplierDescription === undefined && this.visible) {
+            this._relationService.getSupplierLightById(this.transactionLine.supplierId).then((supplier) => {
+                this.transactionLine.supplierDescription = supplier ? supplier.supplierName : "";
                 this.detectChanges();
             });
             this.readonly = !this.transactionLine.articleFreeSupplier;
@@ -29145,21 +29248,10 @@ class TransactionLineDropShipmentButtonComponent extends TransactionBaseComponen
     }
     _getSupplierAllowsDropShipmentParameter() {
         if (this.transactionLine && this.visible) {
-            this._relationService.getSupplierLightById(this.transactionLine.supplierId).then(result => {
-                this.supplierAllowsDropShipment = result.dropshipment;
+            this._relationService.getSupplierLightById(this.transactionLine.supplierId).then((supplier) => {
+                this.supplierAllowsDropShipment = supplier.dropshipment;
                 this.detectChanges();
             });
-            // this._relationService.getRelationById(this.transactionLine.supplierId).then((relations: RelationListObject[]) => {
-            //   const relation: RelationListObject = relations && relations.length > 0 ? relations[0] : null;
-            //   if (relation) {
-            //     this._relationService.getSupplierFullObject(+relation.relationNr).then((result) => {
-            //       if (result) {
-            //         this.supplierAllowsDropShipment = result.dropshipment;
-            //         this.detectChanges();
-            //       }
-            //     });
-            //   }
-            // });
         }
     }
 }
@@ -29339,6 +29431,7 @@ class TransactionLineConfirmedDeliveryDateButtonComponent extends TransactionBas
         this.showConfirmedDeliveryDate = false;
         this.isConfirmedDateLater = false;
         this._subs = [];
+        this._handled = false;
     }
     showClass() {
         return true;
@@ -29362,7 +29455,8 @@ class TransactionLineConfirmedDeliveryDateButtonComponent extends TransactionBas
         this._checkDates();
     }
     _checkConfirmedDeliveryDate(line) {
-        if (line && line.refTransactions && line.refTransactions.length === 1 && !this.confirmedDeliveryDate) {
+        if (line && line.lineNr === this.transactionLine.lineNr && line.refTransactions && line.refTransactions.length === 1 &&
+            !this.confirmedDeliveryDate && this.visible && !this._handled) {
             if (line.refTransactions[0].refTransactionType === TransactionKind.PurchaseOrder) {
                 this.service.getMaxConfirmedDeliveryDateForPurchaseOrder(line.refTransactions[0].refTransactionId).then((date) => {
                     if (date) {
@@ -29370,6 +29464,7 @@ class TransactionLineConfirmedDeliveryDateButtonComponent extends TransactionBas
                         this.showConfirmedDeliveryDate = true;
                         this._checkDates();
                     }
+                    this._handled = true;
                 });
             }
         }
@@ -35945,6 +36040,7 @@ class TransactionHeaderDeliveryMethodButtonComponent extends TransactionBaseComp
             event.stopImmediatePropagation();
             if (yield this.lockTransaction()) {
                 this.showDialog = true;
+                this.detectChanges();
             }
         });
     }
@@ -35983,7 +36079,8 @@ TransactionHeaderDeliveryMethodButtonComponent.decorators = [
                         useExisting: forwardRef(() => TransactionHeaderDeliveryMethodButtonComponent)
                     }
                 ],
-                encapsulation: ViewEncapsulation.None
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
 TransactionHeaderDeliveryMethodButtonComponent.ctorParameters = () => [
@@ -36104,13 +36201,15 @@ class TransactionHeaderDeliverydateDefinitiveButtonComponent extends Transaction
             event.preventDefault();
             event.stopPropagation();
             if (yield this.lockTransaction()) {
-                this.transactionService.updateHeaderTransactionDeliveryDateDefinitive(this.transactionInfo.uuid, definitive, this.lockAndSave);
+                yield this.transactionService.updateHeaderTransactionDeliveryDateDefinitive(this.transactionInfo.uuid, definitive, this.lockAndSave);
+                this.detectChanges();
             }
         });
     }
     configSet() {
         if (this.screenConfigService.configObjects && this.cfgName) {
             this.hidden = this.screenConfigService.getObjectConfigurationFor(this.cfgName).immediatelyHidden();
+            this.detectChanges();
         }
     }
 }
@@ -38109,14 +38208,6 @@ class SearchViewModeService {
     get collapsed() {
         return this.activeSearchBarViewMode === SearchbarViewMode.Collapsed;
     }
-    calculateClasses() {
-        return {
-            'fullscreen': this.fullscreen,
-            'sidebar': !this.fullscreen,
-            'collapsed': this.collapsed,
-            'expanded': !this.collapsed,
-        };
-    }
     toggleFilter() {
         this.showFilterSidebar = !this.showFilterSidebar;
     }
@@ -38170,6 +38261,8 @@ class SearchFilterPanelComponent {
     constructor(iconCacheService, searchViewModeService) {
         this.iconCacheService = iconCacheService;
         this.searchViewModeService = searchViewModeService;
+        this.viewMode = SearchViewMode;
+        this.barViewMode = SearchbarViewMode;
         this.align = ColumnAlign;
         this.icon = Icon;
         this.resetFilterClick = new EventEmitter();
@@ -38206,9 +38299,11 @@ SearchFilterPanelComponent.decorators = [
       </div>
 
       <!--filter-content-->
-      <div class="search-filter-wrapper narrow-scrollbar"
-           [ngClass]="searchViewModeService.calculateClasses()"
-           *ngIf=" searchViewModeService.showFilterSidebar">
+      <div class="search-filter-wrapper narrow-scrollbar" *ngIf=" searchViewModeService.showFilterSidebar"
+           [class.fullscreen]="searchViewModeService.activeSearchViewMode === viewMode.FullScreen"
+           [class.sidebar]="searchViewModeService.activeSearchViewMode !== viewMode.FullScreen"
+           [class.collapsed]="searchViewModeService.activeSearchBarViewMode === barViewMode.Collapsed"
+           [class.expanced]="searchViewModeService.activeSearchBarViewMode !== barViewMode.Collapsed">
         <ng-content></ng-content>
       </div>
 
@@ -38246,11 +38341,12 @@ SearchFilterPanelModule.decorators = [
 ];
 
 class TransactionFilterComponent {
-    constructor(_mappingService, _compFactoryResolver, appRef, injector, searchService) {
+    constructor(_mappingService, _compFactoryResolver, appRef, injector, _changeDetector, searchService) {
         this._mappingService = _mappingService;
         this._compFactoryResolver = _compFactoryResolver;
         this.appRef = appRef;
         this.injector = injector;
+        this._changeDetector = _changeDetector;
         this.searchService = searchService;
     }
     set container(content) {
@@ -38291,6 +38387,7 @@ class TransactionFilterComponent {
         const domElem = this._componentRef.hostView
             .rootNodes[0];
         this._transactionFilterContainer.nativeElement.appendChild(domElem);
+        this._changeDetector.detectChanges();
         this._componentRef.onDestroy(() => {
             this.appRef.detachView(this._componentRef.hostView);
         });
@@ -38303,6 +38400,7 @@ TransactionFilterComponent.decorators = [
     <div #transactionFilter class="transaction-filter-wrapper">
     </div>
     `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -38311,6 +38409,7 @@ TransactionFilterComponent.ctorParameters = () => [
     { type: ComponentFactoryResolver },
     { type: ApplicationRef },
     { type: Injector },
+    { type: ChangeDetectorRef },
     { type: TransactionSearchService }
 ];
 TransactionFilterComponent.propDecorators = {
@@ -38526,10 +38625,11 @@ TransactionSearchSalesOrderTileModule.decorators = [
 ];
 
 class TransactionSearchSalesLineSelectTileComponent extends TransactionSearchTileBaseComponent {
-    constructor(iconCacheService, transactionService) {
-        super(iconCacheService);
+    constructor(iconCacheService, transactionService, changeDetector) {
+        super(iconCacheService, changeDetector);
         this.iconCacheService = iconCacheService;
         this.transactionService = transactionService;
+        this.changeDetector = changeDetector;
         this.lineClicked = new EventEmitter();
     }
     showClass() {
@@ -38548,28 +38648,30 @@ class TransactionSearchSalesLineSelectTileComponent extends TransactionSearchTil
 }
 TransactionSearchSalesLineSelectTileComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-transaction-search-sales-line-select-tile",
+                selector: 'co-transaction-search-sales-line-select-tile',
                 template: `
-    <div class="co-transaction-search-sales-line-select-tile-wrapper " observeVisibility #observer=visibilityObserve (visibilityChange)="handleVisibilityChange($event)">
-      <co-transaction-search-sales-order-tile [transaction]="transaction" [showAvatar]="true">
-      </co-transaction-search-sales-order-tile>
-      <div class="vertical-line "></div>
-      <div class="order-lines-container co-small-scrollbar">
-        <div *ngFor="let line of lines" >
-          <co-transaction-line-tile [line]="line" (click)="tileClicked(line)"></co-transaction-line-tile>
-        </div>
+      <div class="co-transaction-search-sales-line-select-tile-wrapper " observeVisibility #observer=visibilityObserve
+           (visibilityChange)="handleVisibilityChange($event)">
+          <co-transaction-search-sales-order-tile [transaction]="transaction" [showAvatar]="true">
+          </co-transaction-search-sales-order-tile>
+          <div class="vertical-line "></div>
+          <div class="order-lines-container co-small-scrollbar">
+              <div *ngFor="let line of lines">
+                  <co-transaction-line-tile [line]="line" (click)="tileClicked(line)"></co-transaction-line-tile>
+              </div>
+          </div>
       </div>
-    </div>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
 TransactionSearchSalesLineSelectTileComponent.ctorParameters = () => [
     { type: IconCacheService },
-    { type: TransactionService }
+    { type: TransactionService },
+    { type: ChangeDetectorRef }
 ];
 TransactionSearchSalesLineSelectTileComponent.propDecorators = {
-    showClass: [{ type: HostBinding, args: ["class.co-transaction-search-sales-line-select-tile",] }],
+    showClass: [{ type: HostBinding, args: ['class.co-transaction-search-sales-line-select-tile',] }],
     lineClicked: [{ type: Output }]
 };
 
@@ -39936,7 +40038,7 @@ class TransactionInternalComponent {
               if(result) {*/
             this._transactionEventService.requestCreateServiceOrderFromTransactionLine.next({ transaction: this.transaction, lineNr: lineNr });
             //added for bundle purposes so we can pass the value along without the event service. Use the event service in all other cases.
-            this.serviceRequested.emit({ transaction: this.transaction.transactionInfo.transactionNr, lineNr: lineNr });
+            this.serviceRequested.emit({ transactionNr: this.transaction.transactionInfo.transactionNr, transactionId: this.transaction.transactionInfo.id, lineNr: lineNr });
             /*   }
              });*/
         }
@@ -40091,8 +40193,7 @@ TransactionInternalComponent.decorators = [
             [screenConfigurationObject]="cfgNames.HeaderBranch"
             screenConfigNativeElement>
           </co-avatar>
-          <co-view-mode-buttons
-            *ngIf="!shouldShowTiles() && showViewModeButtons"
+          <co-view-mode-buttons *ngIf="!shouldShowTiles() && showViewModeButtons"
             [showViewModes]="[viewModes.List, viewModes.Tiles]"
             (viewModeChange)="handleViewModeChange($event)">
           </co-view-mode-buttons>
@@ -40129,9 +40230,8 @@ TransactionInternalComponent.decorators = [
                 activeCategory === categories.SalesOrderQuotation ||
                 activeCategory === categories.ServiceOrderOverview">
               </co-add-product>
-              <co-transaction-button
+              <co-transaction-button *ngIf="activeCategory !== categories.ServiceOrderService"
                 class="custom-width text-rule"
-                *ngIf="activeCategory !== categories.ServiceOrderService"
                 [iconData]="iconCacheService.getIcon(icons.TextSolid)"
                 (click)="handleTransactionText()">
               </co-transaction-button>
@@ -40142,9 +40242,7 @@ TransactionInternalComponent.decorators = [
                                      [transactionInfo]="transaction.transactionInfo"
               ></co-transaction-margin>
             </div>
-
-            <co-transaction-totals
-              *ngIf="activeCategory !== category.ServiceOrderService"
+            <co-transaction-totals *ngIf="activeCategory !== category.ServiceOrderService"
               [transactionInfo]="transaction.transactionInfo"
               [transactionTotal]="transaction.transactionTotal"
               [showDiscount]="true">
@@ -40152,16 +40250,12 @@ TransactionInternalComponent.decorators = [
           </div>
         </div>
 
-        <co-transaction-lines-side-panel
-          *ngIf="
-          transaction &&
-          (transaction.transactionInfo.transactionKind === transactionKind.CashDesk && !fullyInvoiced())"
+        <co-transaction-lines-side-panel *ngIf="transaction && (transaction.transactionInfo.transactionKind === transactionKind.CashDesk && !fullyInvoiced())"
           [posOrderData]="posOrderData"
           [transaction]="transaction">
         </co-transaction-lines-side-panel>
 
-        <co-transaction-line-side-panel
-          *ngIf="showSidePanel"
+        <co-transaction-line-side-panel *ngIf="showSidePanel"
           [transaction]="transaction"
           [transactionInfo]="transaction.transactionInfo"
           [transactionLine]="sidePanelTransactionLine"
@@ -40170,8 +40264,7 @@ TransactionInternalComponent.decorators = [
         </co-transaction-line-side-panel>
 
         <!--Popup voor wijzigen volgorde van tekstregels-->
-        <co-transaction-article-text-overview
-          *ngIf="showArticleTextOverview"
+        <co-transaction-article-text-overview *ngIf="showArticleTextOverview"
           [transactionInfo]="transaction.transactionInfo"
           [transactionLine]="transactionLine"
           (closeClick)="closeArticleTextOverview()"
@@ -40179,8 +40272,7 @@ TransactionInternalComponent.decorators = [
         </co-transaction-article-text-overview>
 
         <!--Popup voor aanmaken en updaten transactietekstregels-->
-        <co-transaction-article-text
-          *ngIf="showTransactionText"
+        <co-transaction-article-text *ngIf="showTransactionText"
           [header]="'ORDER_TEXT_LINE' | localize"
           [transactionUuid]="transaction.transactionInfo.uuid"
           [editText]="textToEdit"
@@ -40193,8 +40285,7 @@ TransactionInternalComponent.decorators = [
         </co-transaction-article-text>
 
         <!--Popup voor aanmaken en updaten artikeltekstregels-->
-        <co-transaction-article-text
-          *ngIf="showArticleText"
+        <co-transaction-article-text *ngIf="showArticleText"
           [header]="'PRODUCT_DESCRIPTION_AND_TEXTS' | localize"
           [transactionUuid]="transaction.transactionInfo.uuid"
           [showArticleImageDescription]="transactionLine.articleBound"
@@ -40208,15 +40299,15 @@ TransactionInternalComponent.decorators = [
           (cancelClick)="closeArticleText()">
         </co-transaction-article-text>
 
-        <co-transaction-copy-order
-          *ngIf="showCopyOrderDialog"
+        <co-transaction-copy-order *ngIf="showCopyOrderDialog"
           [transaction]="transaction"
           (closeDialog)="showCopyOrderDialog = false">
         </co-transaction-copy-order>
       </div>
     </ng-container>
   `,
-                encapsulation: ViewEncapsulation.None
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
 TransactionInternalComponent.ctorParameters = () => [
@@ -40353,6 +40444,7 @@ class TransactionHeaderRelationComponent extends TransactionBaseComponent {
         }), this.transactionService.relationUpdated.subscribe(relation => {
             if (relation !== undefined) {
                 this.loaded = true;
+                this.changeDetector.markForCheck();
             }
         }));
     }
@@ -40363,6 +40455,7 @@ class TransactionHeaderRelationComponent extends TransactionBaseComponent {
     relationSet() {
         super.relationSet();
         this._setRelationAddress();
+        this.changeDetector.markForCheck();
     }
     transactionInfoSet() {
         super.transactionInfoSet();
@@ -40437,7 +40530,8 @@ TransactionHeaderRelationComponent.decorators = [
                         useExisting: forwardRef(() => TransactionHeaderRelationComponent)
                     }
                 ],
-                encapsulation: ViewEncapsulation.None
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
 TransactionHeaderRelationComponent.propDecorators = {
@@ -40851,7 +40945,7 @@ class TransactionHeaderRemainingAmountComponent {
     }
     ngOnInit() {
         this._subs.push(this._transactionEventService.quantitySelectedLineChanged.subscribe((changed) => {
-            if (changed) {
+            if (changed && !this.transactionService.manualSaveParam) {
                 const request = new CalculateAmountToPayRequest();
                 request.transactionUuid = this.transactionUuid;
                 this._paymentConnectorService.calculateAmountToPayWithLineSelection(request).then((data) => {
@@ -41103,6 +41197,7 @@ QuickSendButtonComponent.decorators = [
       </div>
     </div>
   `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -42487,6 +42582,7 @@ TransactionLineSidePanelDefaultComponent.decorators = [
         <div class="collapsible-content-wrapper">
           <div class="side-panel-input-row">
             <co-transaction-line-description class="side-panel-input"
+                                             [customHeight]="false"
                                              [transactionLine]="transactionLine"></co-transaction-line-description>
           </div>
           <div class="side-panel-input-row">
@@ -45565,7 +45661,8 @@ class SearchHeaderButtonsComponent {
         this.searchViewModeService = searchViewModeService;
         this.icon = Icon;
         this.contentViewModes = ContentViewMode;
-        this.searchViewModes = SearchViewMode;
+        this.viewMode = SearchViewMode;
+        this.barViewMode = SearchbarViewMode;
         this.iconSlideIn = this.iconCacheService.getIcon(this.icon.SlideIn);
         this.iconResize = this.iconCacheService.getIcon(this.icon.ExpandSolid);
         this.iconCancel = this.iconCacheService.getIcon(this.icon.XSolid);
@@ -45604,7 +45701,10 @@ SearchHeaderButtonsComponent.decorators = [
       <div class="upper-header">
         <div class="header-buttons-wrapper">
           <div class="close-search-button-wrapper button-wrapper" *ngIf="!fullscreen"
-               [ngClass]="searchViewModeService.calculateClasses()">
+               [class.fullscreen]="searchViewModeService.activeSearchViewMode === viewMode.FullScreen"
+               [class.sidebar]="searchViewModeService.activeSearchViewMode !== viewMode.FullScreen"
+               [class.collapsed]="searchViewModeService.activeSearchBarViewMode === barViewMode.Collapsed"
+               [class.expanced]="searchViewModeService.activeSearchBarViewMode !== barViewMode.Collapsed">
             <co-button [iconData]="iconResize"
                        class="toggle-sidebar-button transparent"
                        (click)="onResizeClick()"></co-button>
@@ -45621,7 +45721,11 @@ SearchHeaderButtonsComponent.decorators = [
         <co-button class="add-button transparent" [iconData]="iconCacheService.getIcon(icon.PlusSimple)"
                    (click)="onAddButtonClick()"></co-button>
 
-        <div class="search-header-content-wrapper" [ngClass]="searchViewModeService.calculateClasses()">
+        <div class="search-header-content-wrapper"
+             [class.fullscreen]="searchViewModeService.activeSearchViewMode === viewMode.FullScreen"
+             [class.sidebar]="searchViewModeService.activeSearchViewMode !== viewMode.FullScreen"
+             [class.collapsed]="searchViewModeService.activeSearchBarViewMode === barViewMode.Collapsed"
+             [class.expanced]="searchViewModeService.activeSearchBarViewMode !== barViewMode.Collapsed">
           <ng-content></ng-content>
         </div>
 
@@ -45690,6 +45794,8 @@ SearchHeaderButtonsModule.decorators = [
 class SearchComponent {
     constructor(searchViewModeService) {
         this.searchViewModeService = searchViewModeService;
+        this.viewMode = SearchViewMode;
+        this.barViewMode = SearchbarViewMode;
         this.icon = Icon;
         this.headerLabel = '';
         this.addClick = new EventEmitter();
@@ -45714,12 +45820,18 @@ SearchComponent.decorators = [
                 selector: 'co-search',
                 template: `
     <div class="search-main-wrapper">
-      <div class="search-wrapper" [ngClass]=searchViewModeService.calculateClasses()>
+      <div class="search-wrapper" 
+           [class.fullscreen]="searchViewModeService.activeSearchViewMode === viewMode.FullScreen"
+           [class.sidebar]="searchViewModeService.activeSearchViewMode !== viewMode.FullScreen"
+           [class.collapsed]="searchViewModeService.activeSearchBarViewMode === barViewMode.Collapsed"
+           [class.expanced]="searchViewModeService.activeSearchBarViewMode !== barViewMode.Collapsed">
 
         <!--filter panel-->
-        <div class="search-filter-panel narrow-scrollbar"
-             [ngClass]="searchViewModeService.calculateClasses()"
-             *ngIf="searchViewModeService.showFilterSidebar" @showHideFilterSidebar>
+        <div class="search-filter-panel narrow-scrollbar" *ngIf="searchViewModeService.showFilterSidebar" @showHideFilterSidebar
+             [class.fullscreen]="searchViewModeService.activeSearchViewMode === viewMode.FullScreen"
+             [class.sidebar]="searchViewModeService.activeSearchViewMode !== viewMode.FullScreen"
+             [class.collapsed]="searchViewModeService.activeSearchBarViewMode === barViewMode.Collapsed"
+             [class.expanced]="searchViewModeService.activeSearchBarViewMode !== barViewMode.Collapsed">
           <co-search-filter-panel (resetFilterClick)="onResetFilterClick()">
             <ng-content select="[search-filter-panel]"></ng-content>
           </co-search-filter-panel>
@@ -45736,7 +45848,11 @@ SearchComponent.decorators = [
           </div>
 
           <!--search result-->
-          <div class="search-result" [ngClass]="searchViewModeService.calculateClasses()">
+          <div class="search-result"
+               [class.fullscreen]="searchViewModeService.activeSearchViewMode === viewMode.FullScreen"
+               [class.sidebar]="searchViewModeService.activeSearchViewMode !== viewMode.FullScreen"
+               [class.collapsed]="searchViewModeService.activeSearchBarViewMode === barViewMode.Collapsed"
+               [class.expanced]="searchViewModeService.activeSearchBarViewMode !== barViewMode.Collapsed">
             <ng-content select="[search-result]"></ng-content>
           </div>
         </div>
@@ -45744,7 +45860,10 @@ SearchComponent.decorators = [
 
       <!--routing content-->
       <div class="search-content-wrapper"
-           [ngClass]="searchViewModeService.calculateClasses()">
+           [class.fullscreen]="searchViewModeService.activeSearchViewMode === viewMode.FullScreen"
+           [class.sidebar]="searchViewModeService.activeSearchViewMode !== viewMode.FullScreen"
+           [class.collapsed]="searchViewModeService.activeSearchBarViewMode === barViewMode.Collapsed"
+           [class.expanced]="searchViewModeService.activeSearchBarViewMode !== barViewMode.Collapsed">
         <!--routing content?-->
         <ng-content></ng-content>
       </div>
@@ -48267,6 +48386,7 @@ class TransactionSearchComponent {
     set overrideSearchType(kind) {
         if (!(kind === null || kind === undefined)) {
             this.transactionSearchService.transactionType = kind;
+            this.transactionSearchService.searchTransactions();
         }
     }
     showClass() {
@@ -53555,9 +53675,9 @@ class TransactionServiceOverviewComponent extends TransactionBaseComponent {
     }
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.priorityDomainColl = yield this.transactionService.getPriority("NL");
+            this.priorityDomainColl = yield this.transactionService.getPriority('NL');
             this.causeCodeColl = yield this.transactionService.getCauseCodes();
-            this.entryTypeColl = yield this.transactionService.getEntryTypes("NL");
+            this.entryTypeColl = yield this.transactionService.getEntryTypes('NL');
             this.priorityModel = this.priorityDomainColl.find(p => p.codeAsNumber === this.transactionServiceInfo.priority);
             this.causeCodeModel = this.causeCodeColl.find(c => c.causeCode === this.transactionServiceInfo.causeCode);
             this.entryTypeModel = this.entryTypeColl.find(e => e.code === this.transactionServiceInfo.entryType);
@@ -53576,6 +53696,7 @@ class TransactionServiceOverviewComponent extends TransactionBaseComponent {
     getActivities() {
         return __awaiter(this, void 0, void 0, function* () {
             this.activities = yield this.transactionService.getHistoricActivities(this.transactionInfo.id);
+            this.detectChanges();
         });
     }
     finishedActivitiesRefreshRequested() {
@@ -53583,12 +53704,15 @@ class TransactionServiceOverviewComponent extends TransactionBaseComponent {
     }
     fullActivitiesRefreshRequested() {
         this.getActivities();
-        this.openActivities.getActivities();
+        this.openActivities.getActivities().then(() => {
+            this.detectChanges();
+        });
     }
     fetchDocuments() {
         this.transactionService.loadDocumentsOfTransaction(this.transactionInfo.id.toString()).then((fetchedDocuments) => {
             this.documents = fetchedDocuments;
             this.documents.forEach((d) => __awaiter(this, void 0, void 0, function* () { return d.documentBody = yield this.transactionService.loadDocumentContent(d.documentId, false); }));
+            this.detectChanges();
         });
     }
     setPriority(priority) {
@@ -53601,6 +53725,7 @@ class TransactionServiceOverviewComponent extends TransactionBaseComponent {
                 this.priorityModel = null;
             }
             yield this.transactionService.updateServiceHeaderPriority(this.transactionServiceInfo.priority, true);
+            this.detectChanges();
         });
     }
     setCauseCode(causeCode) {
@@ -53613,6 +53738,7 @@ class TransactionServiceOverviewComponent extends TransactionBaseComponent {
                 this.causeCodeModel = null;
             }
             yield this.transactionService.updateServiceHeaderCauseCode(this.transactionServiceInfo.causeCode, true);
+            this.detectChanges();
         });
     }
     setEntryType(entryType) {
@@ -53625,6 +53751,7 @@ class TransactionServiceOverviewComponent extends TransactionBaseComponent {
                 this.entryTypeModel = null;
             }
             yield this.transactionService.updateServiceHeaderEntryType(this.transactionServiceInfo.entryType, true);
+            this.detectChanges();
         });
     }
     upsertDocument(doc) {
@@ -53632,7 +53759,7 @@ class TransactionServiceOverviewComponent extends TransactionBaseComponent {
             const response = yield this.transactionService.mergeDocumentOnTransaction(this.transactionInfo.id.toString(), doc);
             if (response) {
                 this.fetchDocuments();
-                yield this._dialogService.showToast("DATA_SAVED", true);
+                yield this._dialogService.showToast('DATA_SAVED', true);
             }
         });
     }
@@ -53641,7 +53768,7 @@ class TransactionServiceOverviewComponent extends TransactionBaseComponent {
             const response = yield this.transactionService.deleteDocument(doc.documentId);
             if (response && response.success) {
                 this.fetchDocuments();
-                yield this._dialogService.showToast("DATA_SAVED", true);
+                yield this._dialogService.showToast('DATA_SAVED', true);
             }
         });
     }
@@ -53661,7 +53788,7 @@ class TransactionServiceOverviewComponent extends TransactionBaseComponent {
     }
     sortDocumentList() {
         SortUtils.SortObjectArray(this.documents, [{
-                property: "documentId",
+                property: 'documentId',
                 direction: SortDirection.Ascending,
                 type: SortType.Number
             }]);
@@ -53669,64 +53796,72 @@ class TransactionServiceOverviewComponent extends TransactionBaseComponent {
 }
 TransactionServiceOverviewComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-transaction-service-overview",
-                template: `
-    <div class="service-overview-wrapper">
-      <div class="message-and-task-wrapper">
-        <div class="service-message-and-image-wrapper">
-          <div class="service-message-wrapper">
-            <div class="service-message">
-              <label class="label service-label" [textContent]="'SERVICE_REPORT'| localize"></label>
-              <span  *ngIf="transactionServiceInfo && transactionServiceInfo.wizardQuestionsAndAnswers"
-                                 [textContent]="transactionServiceInfo.wizardQuestionsAndAnswers" [screenConfigurationObject]="cfgNames.ServiceWizardMessage" screenConfigNativeElement
-                                 ></span> <!---->
-              <co-transaction-service-message  class="transaction-service-message" [transaction]="transaction">
-              </co-transaction-service-message>
-            </div>
-          <co-files-upload (documentChangeEvent)="upsertDocument($event)" [screenConfigurationObject]="cfgNames.ServiceOverviewImage"
-                           (documentDeleted)="deleteDocument($event)"
-                           [label]="'ADD_IMAGES' | localize"
-                           [documents]="documents"
-                           [isEditable]="false" > <!---->
-          </co-files-upload>
-          </div>
-          <div class="service-order-lines-wrapper">
-            <div class="service-message-extra-wrapper">
-              <co-list-of-values [label]="'PRIORITY'| localize" displayField="description" [model]="priorityModel"
-                                 [collection]="priorityDomainColl" [screenConfigurationObject]="cfgNames.ServicePriority"
-                                 (modelChange)="setPriority($event)"></co-list-of-values> <!---->
-              <co-list-of-values [label]="'CAUSE_CODE' | localize" displayField="description" [model]="causeCodeModel"
-                                 [collection]="causeCodeColl" [screenConfigurationObject]="cfgNames.ServiceCauseCode"
-                                 (modelChange)="setCauseCode($event)"></co-list-of-values> <!---->
-              <co-list-of-values [label]="'ENTRY_TYPE' | localize" displayField="description" [model]="entryTypeModel"
-                                 [collection]="entryTypeColl" [screenConfigurationObject]="cfgNames.ServiceEntryType"
-                                 (modelChange)="setEntryType($event)"></co-list-of-values> <!---->
-            </div>
-            <co-transaction-lines-side-panel
-              class="higher-max-width"
-              [posOrderData]="posOrderData"
-              [transaction]="transaction">
-            </co-transaction-lines-side-panel>
-          </div>
+                selector: 'co-transaction-service-overview',
+                template: `
+      <div class="service-overview-wrapper">
+          <div class="message-and-task-wrapper">
+              <div class="service-message-and-image-wrapper">
+                  <div class="service-message-wrapper">
+                      <div class="service-message">
+                          <label class="label service-label" [textContent]="'SERVICE_REPORT'| localize"></label>
+                          <span *ngIf="transactionServiceInfo && transactionServiceInfo.wizardQuestionsAndAnswers"
+                                [textContent]="transactionServiceInfo.wizardQuestionsAndAnswers"
+                                [screenConfigurationObject]="cfgNames.ServiceWizardMessage" screenConfigNativeElement
+                          ></span>
+                          <co-transaction-service-message class="transaction-service-message" [transaction]="transaction">
+                          </co-transaction-service-message>
+                      </div>
+                      <co-files-upload (documentChangeEvent)="upsertDocument($event)"
+                                       [screenConfigurationObject]="cfgNames.ServiceOverviewImage"
+                                       (documentDeleted)="deleteDocument($event)"
+                                       [label]="'ADD_IMAGES' | localize"
+                                       [documents]="documents"
+                                       [isEditable]="false">
+                      </co-files-upload>
+                  </div>
+                  <div class="service-order-lines-wrapper">
+                      <div class="service-message-extra-wrapper">
+                          <co-list-of-values [label]="'PRIORITY'| localize" displayField="description" [model]="priorityModel"
+                                             [collection]="priorityDomainColl" [screenConfigurationObject]="cfgNames.ServicePriority"
+                                             (modelChange)="setPriority($event)"></co-list-of-values>
+                          <co-list-of-values [label]="'CAUSE_CODE' | localize" displayField="description" [model]="causeCodeModel"
+                                             [collection]="causeCodeColl" [screenConfigurationObject]="cfgNames.ServiceCauseCode"
+                                             (modelChange)="setCauseCode($event)"></co-list-of-values>
+                          <co-list-of-values [label]="'ENTRY_TYPE' | localize" displayField="description" [model]="entryTypeModel"
+                                             [collection]="entryTypeColl" [screenConfigurationObject]="cfgNames.ServiceEntryType"
+                                             (modelChange)="setEntryType($event)"></co-list-of-values>
+                      </div>
+                      <co-transaction-lines-side-panel
+                              class="higher-max-width"
+                              [posOrderData]="posOrderData"
+                              [transaction]="transaction">
+                      </co-transaction-lines-side-panel>
+                  </div>
 
-        </div>
-        <div class="activity-list-component-wrapper">
-          <div class="activity-task-creator-wrapper">
-            <co-component-activity-list #openActivities [showActivityHeader]="showActivityHeader" [screenConfigurationObject]="cfgNames.HeaderActivityList"
-                                        [table]="TableName.Transactions" [key]="transactionInfo.id.toString()" (refreshRequested)="finishedActivitiesRefreshRequested()">
-            </co-component-activity-list>
-            <co-task-creator [table]="TableName.Transactions" [remarkAndWorkKey]="transactionInfo.id.toString()" [taskKey]="transactionInfo.transactionNr.toString()"
-                             [author]="transactionService.loggedInUser" [branchNo]="transactionInfo.branch.relationNr.toString()"
-                             [workflowCategoryType]="WorkflowCategoryType.ServiceOrder" [screenConfigurationObject]="cfgNames.HeaderTaskCreator"
-                             (activityCreated)="fullActivitiesRefreshRequested()"></co-task-creator>
-          </div>
-          <div class="activity-list-conv-wrapper">
-            <label class="label history-label" [textContent]="'HISTORIC_ACTIVITY_CHAT'| localize" [screenConfigurationObject]="cfgNames.HeaderHistActivities" screenConfigNativeElement></label>
-            <co-activity-list [activities]="activities" [screenConfigurationObject]="cfgNames.HeaderHistActivities"></co-activity-list>
+              </div>
+              <div class="activity-list-component-wrapper">
+                  <div class="activity-task-creator-wrapper">
+                      <co-component-activity-list #openActivities [showActivityHeader]="showActivityHeader"
+                                                  [screenConfigurationObject]="cfgNames.HeaderActivityList"
+                                                  [table]="TableName.Transactions" [key]="transactionInfo.id.toString()"
+                                                  (refreshRequested)="finishedActivitiesRefreshRequested()">
+                      </co-component-activity-list>
+                      <co-task-creator [table]="TableName.Transactions" [remarkAndWorkKey]="transactionInfo.id.toString()"
+                                       [taskKey]="transactionInfo.transactionNr.toString()"
+                                       [author]="transactionService.loggedInUser" [branchNo]="transactionInfo.branch.relationNr.toString()"
+                                       [workflowCategoryType]="WorkflowCategoryType.ServiceOrder"
+                                       [screenConfigurationObject]="cfgNames.HeaderTaskCreator"
+                                       (activityCreated)="fullActivitiesRefreshRequested()"></co-task-creator>
+                  </div>
+                  <div class="activity-list-conv-wrapper">
+                      <label class="label history-label" [textContent]="'HISTORIC_ACTIVITY_CHAT'| localize"
+                             [screenConfigurationObject]="cfgNames.HeaderHistActivities" screenConfigNativeElement></label>
+                      <co-activity-list [activities]="activities"
+                                        [screenConfigurationObject]="cfgNames.HeaderHistActivities"></co-activity-list>
+                  </div>
+              </div>
           </div>
-        </div>
       </div>
-    </div>
 
   `,
                 providers: [{
@@ -53749,7 +53884,7 @@ TransactionServiceOverviewComponent.ctorParameters = () => [
 ];
 TransactionServiceOverviewComponent.propDecorators = {
     openActivities: [{ type: ViewChild, args: [ComponentActivityListComponent,] }],
-    showClass: [{ type: HostBinding, args: ["class.co-transaction-service-overview",] }],
+    showClass: [{ type: HostBinding, args: ['class.co-transaction-service-overview',] }],
     posOrderData: [{ type: Input }]
 };
 
@@ -56253,10 +56388,11 @@ TransactionLineGridModule.decorators = [
 ];
 
 class TransactionTagsComponent {
-    constructor(_transactionService, _transactionEventService, _transactionConnectorService, iconCacheService) {
+    constructor(_transactionService, _transactionEventService, _transactionConnectorService, _changeDetector, iconCacheService) {
         this._transactionService = _transactionService;
         this._transactionEventService = _transactionEventService;
         this._transactionConnectorService = _transactionConnectorService;
+        this._changeDetector = _changeDetector;
         this.iconCacheService = iconCacheService;
         this.icons = Icon;
         this.tags = [];
@@ -56293,6 +56429,7 @@ class TransactionTagsComponent {
             this._transactionService.getJoinedTags(this._table, this._key).then((tags) => {
                 this.tags = tags;
                 this.editingTags = [...tags];
+                this._changeDetector.detectChanges();
             });
         }
     }
@@ -56310,6 +56447,7 @@ class TransactionTagsComponent {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.allTags.length === 0) {
                 this.allTags = yield this._transactionService.getTagsFullTree(this._getTabCategory(), true);
+                this._changeDetector.detectChanges();
             }
             this.showEditTagsDialog = true;
         });
@@ -56323,12 +56461,14 @@ class TransactionTagsComponent {
                 else {
                     tag.image.thumbnailBody = null;
                 }
+                this._changeDetector.detectChanges();
             }
             return tag;
         });
         this._transactionService.mergeJoinedTags(this._table, this._key, tagsToMerge).then((success) => {
             if (success) {
                 this.tags = this.editingTags;
+                this._changeDetector.detectChanges();
             }
         });
     }
@@ -56345,8 +56485,7 @@ TransactionTagsComponent.decorators = [
             ></co-button>
           </div>
           <co-transaction-tag *ngFor="let tag of tags" [tag]="tag"></co-transaction-tag>
-          <co-simple-tags
-            *ngIf="showEditTagsDialog"
+          <co-simple-tags *ngIf="showEditTagsDialog"
             [tags]="allTags"
             [linkedTags]="editingTags"
             (saveClick)="handleSaveTags($event)"
@@ -56354,6 +56493,7 @@ TransactionTagsComponent.decorators = [
           ></co-simple-tags>
         </div>
     `,
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -56361,6 +56501,7 @@ TransactionTagsComponent.ctorParameters = () => [
     { type: TransactionService },
     { type: TransactionEventService },
     { type: TransactionConnectorService },
+    { type: ChangeDetectorRef },
     { type: IconCacheService }
 ];
 TransactionTagsComponent.propDecorators = {