@colijnit/transaction 12.1.57 → 12.1.59

package/lib/component/core/base/transaction-header-filter-popup-base.component.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter } from "@angular/core";
+import { BusinessObject } from "@colijnit/transactionapi/build/model/business-object";
+import { TransactionInfo } from "@colijnit/transactionapi/build/model/transaction-info.bo";
+export declare abstract class TransactionHeaderFilterPopupBaseComponent<T extends BusinessObject | number | string> {
+    autoClose: boolean;
+    useModel: boolean;
+    set searchText(value: string);
+    get searchText(): string;
+    value: any;
+    valueChange: EventEmitter<any>;
+    closeAfterCommit: EventEmitter<void>;
+    set collection(value: T[]);
+    get collection(): T[];
+    get model(): TransactionInfo;
+    viewModels: {
+        value: any;
+        propsForLabel: string[];
+        checked: boolean;
+    }[];
+    viewModelsFiltered: {
+        value: any;
+        propsForLabel: string[];
+        checked: boolean;
+    }[];
+    protected codeField: string;
+    protected checkField: string;
+    protected propsForLabel: string[];
+    private _collection;
+    private _searchText;
+    commit(value: any): Promise<boolean>;
+    handleChecked(row: {
+        value: number;
+        text: string;
+        checked: boolean;
+    }): Promise<void>;
+    protected prepareViewModels(): void;
+    private _doSearch;
+}

package/lib/component/core/base/transaction-line-base.component.d.ts

@@ -1,8 +1,7 @@
 import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
 import { TransactionInfo } from "@colijnit/transactionapi/build/model/transaction-info.bo";
 import { BusinessObject } from "@colijnit/transactionapi/build/model/business-object";
-import { TransactionFilterPopupBaseComponent } from "./transaction-filter-popup-base.component";
-export declare abstract class TransactionLineBaseComponent<T extends BusinessObject | number | string> extends TransactionFilterPopupBaseComponent<T> {
+export declare abstract class TransactionLineBaseComponent<T extends BusinessObject | number | string> {
     set transactionLine(value: TransactionLineInfo);
     get transactionLine(): TransactionLineInfo;
     set transactionInfo(value: TransactionInfo);

package/lib/component/core/base/transaction-lines-line-base.component.d.ts

@@ -16,6 +16,6 @@ export declare abstract class TransactionLinesLineBaseComponent {
     isArticle: boolean;
     _line: TransactionLineInfo;
     readonly: boolean;
-    lineSet: BehaviorSubject<boolean>;
     lineVisible: BehaviorSubject<boolean>;
+    protected transactionLineSet(): void;
 }

package/lib/component/core/relation/customer-groups.component.d.ts

@@ -3,6 +3,7 @@ import { TransactionConnectorService } from "../../../service/transaction-connec
 import { CustomerGroup } from "@colijnit/transactionapi/build/model/customer-group.bo";
 export declare class CustomerGroupsComponent implements OnInit {
     private _connector;
+    readonly: boolean;
     required: boolean;
     model: string;
     modelChange: EventEmitter<CustomerGroup>;

package/lib/component/dialog/transaction-header/dialog-transaction-header-delivery-method/style/_layout.scss

@@ -3,10 +3,6 @@
     .co-dialog:not(.is-mobile) .co-dialog-wrapper {
       min-width: $tp-dialog-transaction-header-delivery-method-min-width;
     }
-    .dialog-footer-button-wrapper {
-      display: flex;
-      justify-content: $tp-transaction-dialog-footer-justify-content;
-    }
     .co-dialog .dialog-content {
       max-height: $tp-dialog-transaction-header-delivery-method-height;
       height: $tp-dialog-transaction-header-delivery-method-height;

package/lib/component/dialog/transaction-header/dialog-transaction-header-discount/style/_layout.scss

@@ -3,12 +3,10 @@
     .co-dialog:not(.is-mobile) .co-dialog-wrapper {
       min-width: $tp-dialog-transaction-discount-min-width;
     }
-    .dialog-footer-button-wrapper {
-      display: flex;
-      justify-content: $tp-transaction-dialog-footer-justify-content;
-    }
     .transaction-discount-wrapper {
-      display: block;
+      display: flex;
+      flex-direction: column;
+      row-gap: $tp-dialog-transaction-discount-row-gap;
       max-height: $tp-dialog-transaction-discount-height;
     }
     .two-column-grid {
@@ -37,6 +35,7 @@
       justify-content: space-between;
       padding: $tp-dialog-transaction-discount-overview-item-padding;
       &.total {
+        font-size: $tp-dialog-transaction-discount-total-font-size;
         font-weight: $tp-dialog-transaction-discount-total-font-weight;
       }
     }

package/lib/component/dialog/transaction-header/dialog-transaction-header-discount/style/_material-definition.scss

@@ -1,11 +1,13 @@
-$tp-dialog-transaction-discount-min-width: 500px !default;
+$tp-dialog-transaction-discount-min-width: 460px !default;
+$tp-dialog-transaction-discount-row-gap: 20px !default;
 $tp-dialog-transaction-discount-height: 500px !default;
 $tp-dialog-transaction-discount-overview-border: 1px solid !default;
 $tp-dialog-transaction-discount-overview-border-color: $tp-color-border !default;
 $tp-dialog-transaction-discount-overview-border-radius: 10px !default;
-$tp-dialog-transaction-discount-overview-margin: 20px 0 0 0 !default;
+$tp-dialog-transaction-discount-overview-margin: 15px 0 0 0 !default;
+$tp-dialog-transaction-discount-total-font-size: 13px !default;
 $tp-dialog-transaction-discount-total-font-weight: bold !default;
-$tp-dialog-transaction-discount-overview-item-padding: 20px 10px !default;
+$tp-dialog-transaction-discount-overview-item-padding: 10px !default;
 $tp-dialog-transaction-discount-overview-item-border-style: solid !default;
 $tp-dialog-transaction-discount-overview-item-border-width: 0 0 1px 0 !default;
 $tp-dialog-transaction-discount-overview-item-border-color: $tp-color-border !default;

package/lib/component/dialog/transaction-line/dialog-transaction-line-commission-code/style/_layout.scss

@@ -3,10 +3,6 @@
     .co-dialog:not(.is-mobile) .co-dialog-wrapper {
       min-width: $tp-dialog-transaction-line-commission-code-min-width;
     }
-    .dialog-footer-button-wrapper {
-      display: flex;
-      justify-content: $tp-transaction-dialog-footer-justify-content;
-    }
     //.co-dialog .dialog-content {
     //  max-height: $tp-dialog-transaction-line-commission-code-height;
     //}

package/lib/component/dialog/transaction-line/dialog-transaction-line-delivery-method/style/_layout.scss

@@ -3,10 +3,6 @@
     .co-dialog:not(.is-mobile) .co-dialog-wrapper {
       min-width: $tp-dialog-transaction-line-delivery-method-min-width;
     }
-    .dialog-footer-button-wrapper {
-      display: flex;
-      justify-content: $tp-transaction-dialog-footer-justify-content;
-    }
     .co-dialog .dialog-content {
       max-height: $tp-dialog-transaction-line-delivery-method-height;
       height: $tp-dialog-transaction-line-delivery-method-height;

package/lib/component/dialog/transaction-line/dialog-transaction-line-discount/style/_layout.scss

@@ -3,12 +3,10 @@
     .co-dialog:not(.is-mobile) .co-dialog-wrapper {
       min-width: $tp-dialog-transaction-line-discount-min-width;
     }
-    .dialog-footer-button-wrapper {
-      display: flex;
-      justify-content: $tp-transaction-dialog-footer-justify-content;
-    }
     .transaction-line-discount-wrapper {
-      display: block;
+      display: flex;
+      flex-direction: column;
+      row-gap: $tp-dialog-transaction-line-discount-row-gap;
       max-height: $tp-dialog-transaction-line-discount-height;
     }
     .two-column-grid {
@@ -37,6 +35,7 @@
       justify-content: space-between;
       padding: $tp-dialog-transaction-line-discount-overview-item-padding;
       &.total {
+        font-size: $tp-dialog-transaction-line-discount-total-font-size;
         font-weight: $tp-dialog-transaction-line-discount-total-font-weight;
       }
     }

package/lib/component/dialog/transaction-line/dialog-transaction-line-discount/style/_material-definition.scss

@@ -1,11 +1,13 @@
-$tp-dialog-transaction-line-discount-min-width: 500px !default;
+$tp-dialog-transaction-line-discount-min-width: 460px !default;
+$tp-dialog-transaction-line-discount-row-gap: 20px !default;
 $tp-dialog-transaction-line-discount-height: 500px !default;
 $tp-dialog-transaction-line-discount-overview-border: 1px solid !default;
 $tp-dialog-transaction-line-discount-overview-border-color: $tp-color-border !default;
 $tp-dialog-transaction-line-discount-overview-border-radius: 10px !default;
-$tp-dialog-transaction-line-discount-overview-margin: 20px 0 0 0 !default;
+$tp-dialog-transaction-line-discount-overview-margin: 15px 0 0 0 !default;
+$tp-dialog-transaction-line-discount-total-font-size: 13px !default;
 $tp-dialog-transaction-line-discount-total-font-weight: bold !default;
-$tp-dialog-transaction-line-discount-overview-item-padding: 20px 10px !default;
+$tp-dialog-transaction-line-discount-overview-item-padding: 10px !default;
 $tp-dialog-transaction-line-discount-overview-item-border-style: solid !default;
 $tp-dialog-transaction-line-discount-overview-item-border-width: 0 0 1px 0 !default;
 $tp-dialog-transaction-line-discount-overview-item-border-color: $tp-color-border !default;

package/lib/component/dialog/transaction-line/dialog-transaction-line-price-list/style/_layout.scss

@@ -3,10 +3,6 @@
     .co-dialog:not(.is-mobile) .co-dialog-wrapper {
       min-width: $tp-dialog-transaction-line-price-list-min-width;
     }
-    .dialog-footer-button-wrapper {
-      display: flex;
-      justify-content: $tp-transaction-dialog-footer-justify-content;
-    }
     .co-dialog .dialog-content {
       max-height: $tp-dialog-transaction-line-price-list-height;
       height: $tp-dialog-transaction-line-price-list-height;

package/lib/component/dialog/transaction-line/dialog-transaction-line-supplier/dialog-transaction-line-supplier.component.d.ts

@@ -0,0 +1,4 @@
+import { DialogTransactionLineBaseComponent } from "../../../core/base/dialog-transaction-line-base.component";
+export declare class DialogTransactionLineSupplierComponent extends DialogTransactionLineBaseComponent {
+    showClass(): boolean;
+}

package/lib/component/dialog/transaction-line/dialog-transaction-line-supplier/dialog-transaction-line-supplier.module.d.ts

@@ -0,0 +1,2 @@
+export declare class DialogTransactionLineSupplierModule {
+}

package/lib/component/dialog/transaction-line/dialog-transaction-line-supplier/style/_layout.scss

@@ -0,0 +1,11 @@
+@include export-module('co-dialog-transaction-line-supplier-layout') {
+  .co-dialog-transaction-line-supplier {
+    .co-dialog:not(.is-mobile) .co-dialog-wrapper {
+      min-width: $tp-dialog-transaction-line-supplier-min-width;
+    }
+    .co-dialog .dialog-content {
+      max-height: $tp-dialog-transaction-line-supplier-height;
+      height: $tp-dialog-transaction-line-supplier-height;
+    }
+  }
+}

package/lib/component/dialog/transaction-line/dialog-transaction-line-supplier/style/_material-definition.scss

@@ -0,0 +1,2 @@
+$tp-dialog-transaction-line-supplier-min-width: 410px !default;
+$tp-dialog-transaction-line-supplier-height: 400px !default;

package/lib/component/dialog/transaction-line/dialog-transaction-line-supplier/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('co-dialog-transaction-line-supplier-theme') {
+  .co-dialog-transaction-line-supplier {
+  }
+}

package/lib/component/dialog/transaction-line/dialog-transaction-line-supplier/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/component/dialog/transaction-line/dialog-transaction-line-vat/style/_layout.scss

@@ -3,10 +3,6 @@
     .co-dialog:not(.is-mobile) .co-dialog-wrapper {
       min-width: $tp-dialog-transaction-line-vat-min-width;
     }
-    .dialog-footer-button-wrapper {
-      display: flex;
-      justify-content: $tp-transaction-dialog-footer-justify-content;
-    }
     .co-dialog .dialog-content {
       max-height: $tp-dialog-transaction-line-vat-height;
       height: $tp-dialog-transaction-line-vat-height;

package/lib/component/dialog/transaction-line/dialog-transaction-line-warehouse/style/_layout.scss

@@ -3,10 +3,6 @@
     .co-dialog:not(.is-mobile) .co-dialog-wrapper {
       min-width: $tp-dialog-transaction-line-warehouse-min-width;
     }
-    .dialog-footer-button-wrapper {
-      display: flex;
-      justify-content: $tp-transaction-dialog-footer-justify-content;
-    }
     .co-dialog .dialog-content {
       max-height: $tp-dialog-transaction-line-warehouse-height;
       height: $tp-dialog-transaction-line-warehouse-height;

package/lib/component/dialog/transaction-line/dialog-transaction-line-warehouse-cc/style/_layout.scss

@@ -5,10 +5,6 @@
     .co-dialog:not(.is-mobile) .co-dialog-wrapper {
       min-width: $tp-dialog-transaction-line-warehouse-cc-min-width;
     }
-    .dialog-footer-button-wrapper {
-      display: flex;
-      justify-content: $tp-transaction-dialog-footer-justify-content;
-    }
     .co-transaction-line-checkbox-list .virtual-scroll-container {
       height: $tp-dialog-transaction-line-warehouse-cc-commission-code-height;
     }

package/lib/component/dialog/transaction-line/dialog-transaction-line-warehouse-location/style/_layout.scss

@@ -3,10 +3,6 @@
     .co-dialog:not(.is-mobile) .co-dialog-wrapper {
       min-width: $tp-dialog-transaction-line-warehouse-location-min-width;
     }
-    .dialog-footer-button-wrapper {
-      display: flex;
-      justify-content: $tp-transaction-dialog-footer-justify-content;
-    }
     .co-dialog .dialog-content {
       max-height: $tp-dialog-transaction-line-warehouse-location-height;
       height: $tp-dialog-transaction-line-warehouse-location-height;

package/lib/component/{core → loader}/loader.component.d.ts

@@ -1,2 +1,3 @@
 export declare class LoaderComponent {
+    showClass(): boolean;
 }

package/lib/component/loader/loader.module.d.ts

@@ -0,0 +1,2 @@
+export declare class LoaderModule {
+}

package/lib/component/loader/style/_layout.scss

@@ -0,0 +1,8 @@
+@include export-module('co-loader-layout') {
+  .co-loader {
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/lib/component/loader/style/_material-definition.scss

@@ -0,0 +1 @@
+$tp-co-loader-color: $tp-color-action;

package/lib/component/loader/style/_theme.scss

@@ -0,0 +1,10 @@
+@include export-module('co-loader-theme') {
+  .co-loader {
+    stop {
+      stop-color: $tp-co-loader-color;
+    }
+    circle {
+      fill: $tp-co-loader-color;
+    }
+  }
+}

package/lib/component/loader/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/component/relation/relation-address/style/_layout.scss

@@ -2,6 +2,9 @@
   .co-relation-address {
     font-family: $tp-relation-address-font-family;
     font-size: $tp-relation-address-font-size;
+    display: flex;
+    flex-direction: column;
+    row-gap: $tp-relation-address-default-padding;
     co-form {
       display: flex;
       flex-direction: column;

package/lib/component/relation/relation-address-tile/relation-address-tile.component.d.ts

@@ -7,8 +7,9 @@ export declare class RelationAddressTileComponent {
     address: Address;
     actAsAddTile: boolean;
     selected: boolean;
-    selectedChange: EventEmitter<boolean>;
+    selectedChange: EventEmitter<Address>;
     addAddressClicked: EventEmitter<void>;
     editAddressClicked: EventEmitter<Address>;
     handleEditAddressClick(event: MouseEvent): void;
+    handleSelectedChange(address: Address): void;
 }

package/lib/component/relation/relation-addresses/relation-addresses.component.d.ts

@@ -9,11 +9,12 @@ export declare class RelationAddressesComponent extends RelationBaseComponent {
     private _boFactory;
     private _formMasterService;
     readonly icons: typeof Icon;
+    readonly: boolean;
     addresses: Address[];
+    showOnlyActive: boolean;
     type: AddressType;
-    selectedAddressIdx: number;
-    selectedAddressChange: EventEmitter<number>;
-    selectedAddressNawNrChange: EventEmitter<number>;
+    selectedNawNr: number;
+    selectedNawNrChange: EventEmitter<number>;
     showClass(): boolean;
     showEditAddressDialog: boolean;
     addressToEdit: Address;
@@ -21,6 +22,6 @@ export declare class RelationAddressesComponent extends RelationBaseComponent {
     submitForm(): void;
     saveAddress(address: Address): void;
     showNewAddressDialog(): void;
-    setIndexAddress(idx: number): void;
+    changeAddress(address: Address): void;
     editAddress(addr: Address): void;
 }

package/lib/component/relation/relation-addresses/style/_layout.scss

@@ -5,8 +5,8 @@
       height: 175px;
     }
     .default-data-row {
-      display: flex;
-      overflow: hidden;
+      flex: 1;
+      width: 100%;
     }
     .relation-address-new {
       cursor: pointer;
@@ -19,9 +19,5 @@
         width: 20px;
       }
     }
-    .dialog-footer-button-wrapper {
-      display: flex;
-      justify-content: $tp-transaction-dialog-footer-justify-content;
-    }
   }
 }

package/lib/component/relation/relation-contact-details/relation-contact-details.component.d.ts

@@ -1,6 +1,7 @@
 import { RelationBaseComponent } from "../relation-base.component";
 import { ContactOption } from "@colijnit/transactionapi/build/model/contact-option.bo";
 export declare class RelationContactDetailsComponent extends RelationBaseComponent {
+    readonly: boolean;
     showClass(): boolean;
     emailAddress: ContactOption;
     phoneNumber: ContactOption;

package/lib/component/relation/relation-general/relation-general.component.d.ts

@@ -3,15 +3,20 @@ import { GenderType } from "@colijnit/transactionapi/build/enum/gender-type.enum
 import { RelationListObject } from "@colijnit/transactionapi/build/model/relation-list-object.bo";
 import { TransactionService } from "../../../service/transaction.service";
 import { RelationBaseComponent } from "../relation-base.component";
+import { DialogService } from "../../../service/dialog.service";
+import { DictionaryService } from "../../../service/dictionary.service";
 export declare class RelationGeneralComponent extends RelationBaseComponent {
     private _service;
+    private _dictionaryService;
+    private _dialogService;
     readonly relType: typeof RelationNameKind;
     readonly genderType: typeof GenderType;
+    readonly: boolean;
     showClass(): boolean;
     relationSuggestions: RelationListObject[];
     showSuggestionsSidebar: boolean;
     dateOfBirth: Date;
-    constructor(_service: TransactionService);
+    constructor(_service: TransactionService, _dictionaryService: DictionaryService, _dialogService: DialogService);
     firstNameChange(firstName: string): void;
     familyNameChange(familyName: string): void;
     changeGenderType(value: GenderType): void;

package/lib/component/relation/relation-preferences/relation-preferences.component.d.ts

@@ -4,6 +4,7 @@ import { TransactionService } from "../../../service/transaction.service";
 import { RelationBaseComponent } from "../relation-base.component";
 export declare class RelationPreferencesComponent extends RelationBaseComponent implements OnInit {
     private _service;
+    readonly: boolean;
     showClass(): boolean;
     privacySettings: RelationPrivacySetting[];
     constructor(_service: TransactionService);

package/lib/component/relation/relation-type/relation-type.component.d.ts

@@ -3,6 +3,7 @@ import { RelationNameKind } from "@colijnit/transactionapi/build/enum/relation-n
 import { RelationAnyType } from "@colijnit/transactionapi/build/model/relation-any-type";
 export declare class RelationTypeComponent {
     readonly relType: typeof RelationNameKind;
+    readonly: boolean;
     relation: RelationAnyType;
     relationChange: EventEmitter<RelationAnyType>;
     showClass(): boolean;

package/lib/component/tile/style/_layout.scss

@@ -4,23 +4,26 @@
   .co-tile {
     display: flex;
     position: relative;
+    &.selected {
+      transform: scale($tp-tile-selected-zoom);
+    }
     .co-tile-wrapper {
       display: flex;
       flex-direction: row;
       position: relative;
       column-gap: 10px;
-      border: $tp-relation-address-tile-border;
-      border-radius: $tp-relation-address-tile-border-radius;
-      padding: $tp-relation-address-tile-padding;
+      border: $tp-tile-border;
+      border-radius: $tp-tile-border-radius;
+      padding: $tp-tile-padding;
       min-width: $tp-tile-min-width;
       min-height: $tp-tile-min-height;
     }
     .co-tile-select-wrapper {
-      position: absolute;
+      //position: absolute;
       .co-radio-button {
         border: none;
-        height: $tp-relation-address-tile-icon-width;
-        width: $tp-relation-address-tile-icon-width;
+        height: $tp-tile-icon-width;
+        width: $tp-tile-icon-width;
         padding: 0;
         align-items: baseline;
       }
@@ -28,7 +31,7 @@
     .co-tile-content-wrapper {
       display: flex;
       justify-content: center;
-      width: 100%;
+      //width: 100%;
       height: 100%;
       overflow: hidden;
     }

package/lib/component/tile/style/_material-definition.scss

@@ -2,16 +2,17 @@ $tp-tile-font-family: $tp-font-family !default;
 $tp-tile-font-size: $tp-font-size !default;
 $tp-tile-row-gap: 3px;
 $tp-tile-padding: 10px !default;
+$tp-tile-border: 2px solid !default;
 $tp-tile-border-radius: 5px !default;
 $tp-tile-min-width: 200px !default;
 $tp-tile-min-height: 100px !default;
 $tp-tile-icon-width: 20px !default;
 $tp-tile-background-color: $tp-color-light !default;
 $tp-tile-hover-background-color: $tp-color-less-light !default;
-$tp-tile-border: 2px solid !default;
 $tp-tile-border-color: $tp-color-border !default;
 $tp-tile-selected-background-color: #f1fcff !default;
 $tp-tile-selected-border-color: #0084de !default;
 $tp-tile-edit-background-color: $tp-color-border !default;
 $tp-tile-edit-icon-color: $tp-color-action !default;
 $tp-tile-edit-icon-width: 30px !default;
+$tp-tile-selected-zoom: 1.05 !default;

package/lib/component/transaction-button-bar/style/_layout.scss

@@ -13,7 +13,22 @@
       padding: 2px;
     }
     .co-transaction-button-bar-button {
+      position: relative;
       flex: 1;
+      transition: all .2s;
+      .co-loader {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 25px;
+        height: 25px;
+      }
+      &.show-loader {
+        .button-wrapper > * {
+          opacity: 0.1;
+        }
+      }
     }
     .button-wrapper {
       //height: $tp-co-transaction-button-bar-button-size;
@@ -30,6 +45,11 @@
         font-size: $tp-co-transaction-button-bar-label-font-size;
         //padding: 0 7px 4px 7px;
       }
+      .co-animated-checkbox {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
       .co-transaction-button-bar-icon {
         height: $tp-co-transaction-button-bar-icon-size;
         width: $tp-co-transaction-button-bar-icon-size;
@@ -46,5 +66,10 @@
         border: $tp-co-transaction-button-bar-button-selected-box-border;
       }
     }
+    .co-transaction-sales-purchase-button-bar-button {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
   }
 }

package/lib/component/transaction-button-bar/transaction-button-bar-button/transaction-button-bar-button-base.component.d.ts

@@ -0,0 +1,16 @@
+import { Icon } from "../../../enum/icon.enum";
+import { TransactionInfoResponse } from "@colijnit/transactionapi/build/model/transaction-info-response.bo";
+import { BehaviorSubject } from "rxjs";
+export declare abstract class TransactionButtonBarButtonBaseComponent {
+    title: string;
+    iconName: Icon;
+    transactionInfoResponse: TransactionInfoResponse;
+    set showLoader(value: boolean);
+    get showLoader(): boolean;
+    set checked(value: boolean);
+    get checked(): boolean;
+    showLoaderChange: BehaviorSubject<boolean>;
+    checkedChange: BehaviorSubject<boolean>;
+    private _showLoader;
+    private _checked;
+}

package/lib/component/transaction-button-bar/transaction-button-bar-button/transaction-button-bar-button.component.d.ts

@@ -1,9 +1,18 @@
-import { Icon } from "../../../enum/icon.enum";
+import { ApplicationRef, ComponentFactoryResolver, ElementRef, Injector, OnInit, Type } from "@angular/core";
 import { IconCacheService } from "../../../service/icon-cache.service";
-export declare class TransactionButtonBarButtonComponent {
+import { TransactionButtonBarButtonBaseComponent } from "./transaction-button-bar-button-base.component";
+export declare class TransactionButtonBarButtonComponent extends TransactionButtonBarButtonBaseComponent implements OnInit {
     iconCacheService: IconCacheService;
-    title: string;
-    iconName: Icon;
+    private _compFactoryResolver;
+    private appRef;
+    private injector;
+    set child(content: any);
+    component: Type<TransactionButtonBarButtonBaseComponent>;
     showClass: boolean;
-    constructor(iconCacheService: IconCacheService);
+    get isLoaderShowing(): boolean;
+    useComponent: boolean;
+    buttonWrapper: ElementRef;
+    constructor(iconCacheService: IconCacheService, _compFactoryResolver: ComponentFactoryResolver, appRef: ApplicationRef, injector: Injector);
+    ngOnInit(): void;
+    private _checkAndCreateComponent;
 }

package/lib/component/transaction-button-bar/transaction-button-bar-button/transaction-sales-purchase-button-bar-button.component.d.ts

@@ -0,0 +1,12 @@
+import { OnDestroy } from "@angular/core";
+import { IconCacheService } from "../../../service/icon-cache.service";
+import { TransactionButtonBarButtonBaseComponent } from "./transaction-button-bar-button-base.component";
+import { TransactionEventService } from "../../../service/transaction-event.service";
+export declare class TransactionSalesPurchaseButtonBarButtonComponent extends TransactionButtonBarButtonBaseComponent implements OnDestroy {
+    iconCacheService: IconCacheService;
+    private _transactionEventService;
+    showClass: boolean;
+    private _subs;
+    constructor(iconCacheService: IconCacheService, _transactionEventService: TransactionEventService);
+    ngOnDestroy(): void;
+}

package/lib/component/transaction-button-bar/transaction-button-bar.component.d.ts

@@ -3,10 +3,12 @@ import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction
 import { TransactionBarButton } from "../../model/transaction-bar-button";
 import { TransactionMappingService } from "../../service/transaction-mapping.service";
 import { TransactionTypeCategory } from "../../enum/transaction-type-category.enum";
+import { TransactionInfoResponse } from "@colijnit/transactionapi/build/model/transaction-info-response.bo";
 export declare class TransactionButtonBarComponent {
     private _mappingService;
     set transactionType(value: TransactionKind);
     get transactionType(): TransactionKind;
+    transactionInfoResponse: TransactionInfoResponse;
     selectedCategory: TransactionTypeCategory;
     buttonClicked: EventEmitter<TransactionBarButton>;
     showClass(): boolean;

package/lib/component/transaction-header/transaction-header-payment/style/_material-definition.scss

@@ -4,6 +4,7 @@ $tp-transaction-header-block-payment-balance-border-style: solid !default;
 $tp-transaction-header-block-payment-balance-border-color: $tp-color-border !default;
 $tp-transaction-header-block-payment-balance-border-width: 1px !default;
 $tp-transaction-header-block-payment-balance-border-radius: 10px !default;
-$tp-transaction-header-block-payment-balance-to-pay-color: #FF4141 !default;
+$tp-transaction-header-block-payment-balance-paid-color: #FF4141 !default;
+$tp-transaction-header-block-payment-balance-paid-color-success: $tp-color-active-light !default;
 $tp-transaction-header-block-payment-balance-icon-size: 17px !default;
 $tp-transaction-header-block-payment-balance-height: $tp-default-button-height !default;