@colijnit/transaction 12.1.20 → 12.1.21

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

@@ -29,7 +29,7 @@
     }
     &:not(.preview) {
       .transaction-line-wrapper {
-        min-height: $tp-transaction-line-min-height;
+        //min-height: $tp-transaction-line-min-height;
       }
     }
     .transaction-line-image {
@@ -53,15 +53,20 @@
         flex-direction: row;
         align-items: center;
       }
-      .delete-icon {
-        height: 20px;
-        width: 20px;
-      }
+    }
+    .transaction-line-stock-wrapper {
+      display: flex;
+      column-gap: 5px;
+    }
+    .delete-icon {
+      cursor: pointer;
+      height: $tp-transaction-line-delete-icon-size;
+      width: $tp-transaction-line-delete-icon-size;
     }
     .transaction-line-description {
       display: flex;
       flex-direction: column;
-      row-gap: 10px;
+      row-gap: $tp-transaction-line-row-gap;
       flex-basis: 100%;
       padding: $tp-transaction-line-inner-padding;
     }
@@ -69,46 +74,105 @@
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
+      row-gap: $tp-transaction-line-row-gap;
       padding: $tp-transaction-line-inner-padding;
     }
-    .transaction-line-amount {
-      display: flex;
-      height: $tp-transaction-line-amount-height;
-      flex-shrink: 0;
-      padding: $tp-transaction-line-inner-padding;
-      .amount-number-picker {
-        border-color: $tp-transaction-line-amount-input-border-color;
-        input {
-          width: $tp-transaction-line-amount-input-width;
-        }
-      }
-    }
     &:not(.preview) {
       .transaction-line-amount {
-        height: $tp-transaction-line-amount-height;
+        //height: $tp-transaction-line-amount-height;
       }
     }
     .transaction-line-totals {
-      display: flex;
-      align-items: center;
-      flex-shrink: 0;
-      height: $tp-transaction-line-amount-height;
-      padding: $tp-transaction-line-inner-padding;
-      width: 100px;
-      justify-content: flex-end;
+      //display: flex;
+      //align-items: flex-start;
+      //flex-shrink: 0;
+      //height: $tp-transaction-line-amount-height;
+      //padding: $tp-transaction-line-inner-padding;
+      //width: 600px;
+      //justify-content: flex-end;
+      //font-weight: $tp-transaction-line-totals-font-weight;
+      //span { // todo fix
+      //  border: 1px solid #d3d3d3;
+      //  padding: 5px 22px;
+      //  border-radius: 10px;
+      //}
+      display: grid;
+      grid-template-columns: 100px 100px 100px;
+      grid-template-rows: 30px 30px;
+      grid-column-gap: $tp-transaction-line-column-gap;
+      grid-row-gap: $tp-transaction-line-row-gap;
+
+      .transaction-line-totals-price {
+        grid-column: 1 / 1;
+        grid-row: 1 / 1;
+      }
+
+      .transaction-line-totals-discount {
+        grid-column: 1 / 1;
+        grid-row: 2 / 2;
+      }
+
+      .transaction-line-totals-amount {
+        grid-column: 2 / 2;
+        grid-row: 1 / 1;
+
+        .amount-number-picker {
+          border: none;
+          //border-color: $tp-transaction-line-amount-input-border-color;
+          //border-radius: 10px;
+
+          //input {
+          //  width: $tp-transaction-line-amount-input-width;
+          //}
+          .co-button {
+            height: 18px;
+            width: 20px;
+          }
+        }
+      }
+
+      .transaction-line-totals-total {
+        grid-column: 3 / 3;
+        grid-row: 1 / 1;
+      }
+
+      .transaction-line-totals-price, .transaction-line-totals-discount, .transaction-line-totals-amount, .transaction-line-totals-total {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid $tp-transaction-line-border-color;
+        border-radius: 10px;
+        .co-input-text {
+          width: 80%;
+          height: 95%;
+          input {
+            margin: 6px 0 0;
+          }
+        }
+      }
     }
+    //.transaction-line-totals-price-discount {
+    //  display: flex;
+    //  flex-direction: column;
+    //  row-gap: 5px;
+    //}
     .transaction-line-buttons {
       display: flex;
       align-items: center;
       flex-shrink: 0;
       height: $tp-transaction-line-amount-height;
     }
+    .transaction-line-description {
+      .description-wrapper {
+        display: flex;
+        flex-direction: row;
+        column-gap: $tp-transaction-line-column-gap;
+        align-items: center;
+      }
+    }
     .transaction-line-description-description {
       font-weight: bold;
     }
-    .transaction-line-description-divider {
-      margin: 0 10px;
-    }
     .transaction-line-description-sku {
     }
     .article-text-wrapper {
@@ -120,6 +184,9 @@
         min-height: $tp-transaction-line-article-text-min-height;
       }
     }
+    .price {
+      font-weight: $tp-transaction-line-price-font-weight;
+    }
   }
   .article-text {
     font-family: $tp-transaction-line-font-family;

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

@@ -7,17 +7,19 @@ $tp-transaction-line-padding: 10px !default;
 $tp-transaction-line-inner-padding: 10px !default;
 $tp-transaction-line-border: 1px solid !default;
 $tp-transaction-line-border-width: 0 0 1px 0 !default;
-$tp-transaction-line-border-color: $tp-color-action !default;
-$tp-transaction-line-image-border: 1px solid $tp-color-border !default;
+$tp-transaction-line-border-color: $tp-color-border !default;
+$tp-transaction-line-image-border: none !default;
 $tp-transaction-line-column-gap: 15px !default;
-$tp-transaction-line-row-gap: 15px !default;
+$tp-transaction-line-row-gap: 5px !default;
 $tp-transaction-line-image-width: 67px !default;
+$tp-transaction-line-delete-icon-size: 15px !default;
 $tp-transaction-line-preview-image-width: 75px !default;
 $tp-transaction-line-image-height: 50px !default;
 $tp-transaction-line-preview-image-height: 50px !default;
 $tp-transaction-line-amount-height: 50px !default;
 $tp-transaction-line-amount-input-width: 50px !default;
 $tp-transaction-line-amount-input-border-color: $tp-color-border !default;
+$tp-transaction-line-totals-font-weight: bold !default;
 $tp-transaction-line-delete-color: $tp-color-action !default;
 $tp-transaction-line-article-text-background-color: $tp-color-light-accent !default;
 $tp-transaction-line-article-text-color: $tp-color-dark !default;
@@ -28,3 +30,5 @@ $tp-transaction-line-buttons-add-text-text-color: $tp-color-light !default;
 $tp-transaction-line-article-text-font-size: $tp-font-size !default;
 $tp-transaction-line-article-text-font-color: $tp-color-label !default;
 $tp-transaction-line-article-text-padding: 2px !default;
+$tp-transaction-line-price-font-weight: bold !default;
+$tp-transaction-line-discount-background-color: #F5F5FA !default;

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

@@ -25,5 +25,8 @@
       color: $tp-transaction-line-article-text-font-color;
       background-color: $tp-transaction-line-background-color;
     }
+    .discount {
+      background-color: $tp-transaction-line-discount-background-color;
+    }
   }
 }

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

@@ -31,6 +31,7 @@ export declare class TransactionLineComponent {
     image: string;
     stock: StockStatus;
     mouseOver: boolean;
+    readonly: boolean;
     private _line;
     constructor(service: TransactionService, iconCacheService: IconCacheService, _dialogService: DialogService, _dictionaryService: DictionaryService, _imageService: TransactionImageService);
     changeLineAmount(amount: number): void;

package/lib/component/transaction-line-action-buttons/transaction-line-action-buttons.component.d.ts

@@ -12,7 +12,8 @@ export declare class TransactionLineActionButtonsComponent implements OnInit {
     private _transactionService;
     private _dictionaryService;
     readonly icons: typeof Icon;
-    transactionLine: TransactionLineInfo;
+    set transactionLine(value: TransactionLineInfo);
+    get transactionLine(): TransactionLineInfo;
     alignDirection: Direction;
     waitingForUserAction: EventEmitter<boolean>;
     sidePanelButtonClicked: EventEmitter<TransactionLineInfo>;
@@ -24,6 +25,8 @@ export declare class TransactionLineActionButtonsComponent implements OnInit {
     showTransactionArticleTextOverview: boolean;
     articleTextHeader: string;
     textToEdit: string;
+    readonly: boolean;
+    private _transactionLine;
     constructor(iconCacheService: IconCacheService, _transactionService: TransactionService, _dictionaryService: DictionaryService);
     ngOnInit(): void;
     handleShowHideClick(): void;

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

@@ -2,5 +2,7 @@ import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transa
 export declare abstract class TransactionLineFieldsBaseComponent {
     set transactionLine(value: TransactionLineInfo);
     get transactionLine(): TransactionLineInfo;
+    readonly: boolean;
     private _transactionLine;
+    protected transactionLineSet(): void;
 }

package/lib/component/transaction-line-fields/transaction-line-price.component.d.ts

@@ -4,7 +4,14 @@ import { TransactionService } from "../../service/transaction.service";
 export declare class TransactionLinePriceComponent extends TransactionLineFieldsBaseComponent {
     private _transactionService;
     set child(content: any);
+    showLabel: boolean;
+    defaultEditMode: boolean;
+    set editMode(value: boolean);
+    get editMode(): boolean;
+    handleClick(event: MouseEvent): void;
     input: InputTextComponent;
+    private _editMode;
     constructor(_transactionService: TransactionService);
     commitPrice(price: number): Promise<boolean>;
+    protected transactionLineSet(): void;
 }

package/lib/component/transaction-line-side-panel/transaction-line-side-panel.component.d.ts

@@ -18,6 +18,7 @@ export declare class TransactionLineSidePanelComponent {
     transactionId: number;
     activeCategory: TransactionTypeCategory;
     cancelClick: EventEmitter<MouseEvent>;
+    transactionInfoNr: number;
     showClass(): boolean;
     quantityToReceive: number;
     constructor(iconService: IconCacheService, _service: TransactionService, _transactionEventService: TransactionEventService);

package/lib/component/transaction-line-side-panel-default/transaction-line-side-panel-default.component.d.ts

@@ -7,10 +7,13 @@ export declare class TransactionLineSidePanelDefaultComponent {
     iconService: IconCacheService;
     private _transactionService;
     readonly icons: typeof Icon;
-    transactionLine: TransactionLineInfo;
+    set transactionLine(value: TransactionLineInfo);
+    get transactionLine(): TransactionLineInfo;
     cancelClick: EventEmitter<MouseEvent>;
     showClass(): boolean;
     data: any[];
+    readonly: boolean;
+    private _transactionLine;
     constructor(iconService: IconCacheService, _transactionService: TransactionService);
     handleCancelClick(event: MouseEvent): void;
 }

package/lib/component/transaction-line-side-panel-purchase/transaction-line-side-panel-purchase.component.d.ts

@@ -12,6 +12,7 @@ export declare class TransactionLineSidePanelPurchaseComponent {
     set transactionId(value: number);
     get transactionId(): number;
     category: TransactionTypeCategory;
+    transactionInfoNr: number;
     quantityToReceiveChange: EventEmitter<number>;
     showClass(): boolean;
     goodsReceiptStatus: GoodsReceiptStatusWithHistory;

package/lib/component/transaction-quick-access/transaction-quick-access-overview/style/_layout.scss

@@ -1,7 +1,19 @@
+@use "sass:math";
 @import "../../../../style/mixin";
 
 @include export-module('cc-transaction-quick-access-overview-layout') {
   .co-transaction-quick-access-overview {
     width: 100%;
+    .co-input-search {
+      display: block;
+      width: $tp-transaction-quick-access-search-width;
+      height: $tp-transaction-quick-access-search-height;
+      .co-input-text {
+        height: $tp-transaction-quick-access-search-height;
+        label {
+          top: math.div($tp-transaction-quick-access-search-height, 2);
+        }
+      }
+    }
   }
 }

package/lib/component/transaction-quick-access/transaction-quick-access-overview/style/_material-definition.scss

@@ -0,0 +1,2 @@
+$tp-transaction-quick-access-search-width: 300px !default;
+$tp-transaction-quick-access-search-height: 35px !default;

package/lib/component/transaction-receiving-goods-details/transaction-receiving-goods-details.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter } from "@angular/core";
 import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
 import { PurchaseOrderLineReceiptDetails } from "@colijnit/transactionapi/build/model/purchase-order-line-receipt-details.bo";
 import { FormMasterService } from "@colijnit/corecomponents_v12";
@@ -21,6 +21,7 @@ export declare class TransactionReceivingGoodsDetailsComponent {
     saveButtonDisabled: boolean;
     locations: string[];
     locationDropdownFields: {};
+    readonly: boolean;
     private _transactionLine;
     private _amountLeftToReceive;
     constructor(_formMaster: FormMasterService, _service: TransactionService, _articleService: ArticleService);

package/lib/component/transaction-search/service/filter-request.service.d.ts

@@ -5,17 +5,83 @@ export declare class FilterRequestService {
     searchService: TransactionSearchService;
     private _transactionService;
     constructor(searchService: TransactionSearchService, _transactionService: TransactionService);
+    /**
+     * @param collection collection of FilterItemViewmodels
+     * @param modelName name of the model, has to match with a property of TransactionSearchViewRequest
+     * @sets searchRequest in following format: modelName: "?='20191',?='27053'"
+     */
     handleCollectionChangeForRange(collection: FilterItemViewmodel[], modelName: string): void;
+    /**
+     * @param collection collection of FilterItemViewmodels
+     * @param modelName name of the model, has to match with properties of TransactionSearchViewRequest
+     * @sets searchRequest in following format:  modelName: ['0', '1']
+     */
     handleCollectionChangeForArray(collection: FilterItemViewmodel[], modelName: string): void;
-    handleCollectionChangeForSingleValue(value: string, modelName: string): void;
+    /**
+     * @param value value of selected item
+     * @param modelName name of the model, has to match with properties of TransactionSearchViewRequest
+     * @sets searchRequest in following format:  modelName: 2
+     */
     handleCollectionChangeForSingleNumber(value: number, modelName: string): void;
+    /**
+     * @param collection collection of FilterItemViewmodels
+     * @param modelName name of the model, has to match with properties of TransactionSearchViewRequest
+     * @sets searchRequest in following format:  modelName: 2
+     */
+    handleCollectionChangeForSingleSelect(collection: FilterItemViewmodel[], modelName: string): void;
+    /**
+     * @param value value of (un)checked item
+     * @param modelName name of the model, has to match with properties of TransactionSearchViewRequest
+     * @sets searchRequest in following format:  modelName: "?='J'"
+     */
     handleCheckboxValueChangeForString(value: boolean, modelName: string): void;
+    /**
+     * @param value value of (un)checked item
+     * @param modelName name of the model, has to match with properties of TransactionSearchViewRequest
+     * @sets searchRequest in following format:  modelName: 1
+     */
     handleCheckboxValueChangeForNumber(value: boolean, modelName: string): void;
+    /**
+     * @param dates an array with a startDate and an endDate
+     * @param modelName name of the model, has to match with properties of TransactionSearchViewRequest
+     * @sets searchRequest in following format:  modelName: "?>='01-08-2022'& ?<='31-08-2022'"
+     */
     handleDateRangeChange(dates: Date[], modelName: string): void;
+    /**
+     * @param filterRequestRange a date range in string format
+     * @param index the index of which date should be returned
+     * @returns the requested date in Date format
+     */
     getDateFromFilterRequestRange(filterRequestRange: string, index: number): Date;
+    /**
+     * @param collection collection of FilterItemViewmodels
+     * @returns filterRequest in following format: "?='20191',?='27053'"
+     */
     private _getFilterRequestForCollectionRange;
+    /**
+     * @param value value of (un)checked item
+     * @returns filterRequest in following format: "?='J'"
+     */
     private _getFilterRequestForBooleanToString;
+    /**
+     * @param collection collection of FilterItemViewmodels
+     * @returns filterRequest in following format: ['0', '1']
+     */
     private _getFilterRequestForCollectionArray;
+    /**
+     * @param collection collection of FilterItemViewmodels
+     * @returns filterRequest in following format: 2
+     */
+    private _getFilterRequestForSingleSelect;
+    /**
+     * @param startDate startDate of the date range
+     * @param endDate endDate of the date range
+     * @returns filterRequest in following format: "?>='01-08-2022'& ?<='31-08-2022'"
+     */
     private _getFilterRequestForDateRange;
+    /**
+     * @param date date in Date format
+     * @returns date in following string format: '01-08-2022'
+     */
     private _formatDateToString;
 }

package/lib/component/transaction-search/service/transaction-search.service.d.ts

@@ -8,6 +8,11 @@ export declare class TransactionSearchService {
     set transactionType(value: string);
     get transactionType(): string;
     labelBasedOnTransactionType: Map<string, string>;
+    transactionsPerPage: number;
+    resultCount: number;
+    get showcasePage(): number;
+    set showcasePage(value: number);
+    private _showcasePage;
     private _transactionType;
     constructor(_transactionService: TransactionService);
     searchTransactions(): void;

package/lib/component/transaction-search/style/_layout.scss

@@ -7,7 +7,7 @@
 
     .transaction-search-wrapper {
       display: flex;
-      border-right: $cc-co-transaction-search-border-style;
+      //border-right: $cc-co-transaction-search-border-style;
       //height: $cc-co-transaction-search-screen-height;
       //overflow: hidden;
 

package/lib/component/transaction-search/style/_material-definition.scss

@@ -43,6 +43,8 @@ $tp-co-transaction-filter-categories-active-border-style: solid !default;
 $tp-co-transaction-search-filter-width: 100% !default;
 $tp-co-transaction-search-filter-button-padding: 20px 0 !default;
 $tp-co-transaction-search-filter-button-width: 90% !default;
+$tp-co-transaction-search-filter-button-size: 50px !default;
+$tp-co-transaction-search-filter-button-border-radius: 5px !default;
 
 $tp-co-transaction-search-result-width: 100% !default;
 $tp-co-transaction-search-result-wrapper-padding: 10px !default;
@@ -50,9 +52,46 @@ $tp-co-transaction-search-result-upper-header-padding-left: 27px !default;
 $tp-co-transaction-search-result-header-buttons-wrapper-padding: 0 27px !default;
 $tp-co-transaction-search-result-header-sidebar-button-size: 21px !default;
 
-$tp-co-transaction-search-input-text-width: 300px !default;
-$tp-co-transaction-search-filter-button-size: 50px !default;
-$tp-co-transaction-search-filter-button-border-radius: 5px !default;
-$tp-co-transaction-search-filter-button-padding: 0 !default;
+$tp-co-transaction-search-input-text-fullscreen-width: 650px !default;
+$tp-co-transaction-search-input-text-sidebar-width: 300px !default;
+$tp-co-transaction-search-input-text-label-margin-left: 5% !default;
 
 $tp-co-transaction-search-view-modes-wrapper-padding: 0 35px !default;
+
+$tp-transaction-tiles-wrapper-padding: 20px !default;
+$tp-transaction-tiles-wrapper-row-gap: 5px !default;
+$tp-transaction-tiles-wrapper-width: 100% !default;
+$tp-transaction-tiles-wrapper-height: 100% !default;
+$tp-transaction-tiles-wrapper-column-gap: 5px !default;
+$tp-transaction-tile-font-family: $tp-font-family !default;
+$tp-transaction-tile-font-size: $tp-font-size !default;
+$tp-transaction-tile-height: 150px !default;
+$tp-transaction-tile-width: 300px !default;
+$tp-transaction-tile-padding: 10px 15px !default;
+$tp-transaction-tile-row-gap: 10px !default;
+$tp-transaction-tile-column-gap: 10px !default;
+$tp-transaction-tile-font-size-small: $tp-font-size-small !default;
+$tp-transaction-tile-font-color: #6E7694 !default;
+$tp-transaction-tile-font-color-dark: $tp-color-font !default;
+$tp-transaction-tile-header-font-size: $tp-font-size !default;
+$tp-transaction-tile-header-font-weight: bold !default;
+$tp-transaction-tile-header-font-color: $tp-color-font !default;
+$tp-transaction-tile-footer-border-color: $tp-transaction-tile-font-color !default;
+$tp-transaction-tile-value-height: 20px !default;
+$tp-transaction-tile-border-color: $tp-color-border !default;
+$tp-transaction-tile-button-color: $tp-color-active-light !default;
+$tp-transaction-tile-button-border-radius: 8px !default;
+$tp-transaction-tile-button-height: 25px !default;
+$tp-transaction-tile-button-margin-top: 10px !default;
+$tp-transaction-tile-button-font-weight: bold !default;
+$tp-transaction-tile-avatar-height: 30px !default;
+$tp-transaction-tile-avatar-width: 30px !default;
+$tp-transaction-tile-icon-width: 1.2rem !default;
+$tp-transaction-tile-icon-height: 1.2rem !default;
+$tp-transaction-tile-icon-active-color: $tp-color-active !default;
+$tp-transaction-tile-icon-inactive-color: $tp-color-font !default;
+
+$tp-transaction-tile-background-color: $tp-color-light  !default;
+$tp-transaction-tile-hover-background-color: $tp-color-less-light !default;
+$tp-transaction-tile-selected-background-color: #F0F5FF !default;
+

package/lib/component/transaction-search/style/_theme.scss

@@ -4,7 +4,7 @@
   .co-transaction-search {
     .transaction-search-wrapper {
       background-color: $cc-co-transaction-search-background-color;
-      border-right-color: $cc-co-transaction-search-border-color;
+      //border-right-color: $cc-co-transaction-search-border-color;
     }
   }
 }

package/lib/component/transaction-search/style/material.scss

@@ -1,8 +1,8 @@
 @import "./material-definition";
 @import "./layout";
 @import "./theme";
-@import "../transaction-filter/style/material";
-@import "../transaction-search-result/style/material";
 @import "../transaction-search-header/style/material";
-@import "../transaction-search-tile/transaction-search-sales-order-tile/style/material";
-@import "../../view-mode-buttons/style/material";
+@import "../transaction-filter/transaction-filter/style/material";
+@import "../transaction-search-result/style/material";
+@import "~@colijnit/corecomponents_v12/lib/components/pagination/style/material";
+

package/lib/component/transaction-search/transaction-filter/transaction-filter/style/_layout.scss

@@ -0,0 +1,55 @@
+@include export-module('cc-transaction-filter-layout') {
+  .co-transaction-filter {
+
+    .co-transaction-sales-order-filter, .co-transaction-purchase-order-filter {
+      font-family: $tp-co-transaction-filter-font-family;
+      font-size: $tp-co-transaction-filter-font-size;
+      width: $cc-co-transaction-filter-width;
+      padding: $cc-co-transaction-filter-padding;
+      display: flex;
+      flex-direction: column;
+      height: fit-content;
+      position: relative;
+      border: $cc-co-transaction-filter-border;
+      top: $cc-co-transaction-filter-top;
+
+      .transaction-filter-header-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+
+        .transaction-filter-header {
+          display: flex;
+          justify-items: flex-start;
+          align-items: baseline;
+          font-weight: $cc-co-transaction-filter-header-font-weight;
+          font-size: $cc-co-transaction-filter-header-font-size;
+
+          co-icon {
+            margin-left: $cc-co-transaction-filter-icon-margin-left;
+            height: $cc-co-transaction-filter-icon-height;
+            width: $cc-co-transaction-filter-icon-width;
+          }
+        }
+      }
+
+
+      .transaction-category-filter-wrapper {
+        display: flex;
+        overflow: hidden;
+        padding-top: $cc-co-transaction-category-filter-wrapper-padding-top;
+        scroll-behavior: smooth;
+      }
+
+      .transaction-filter-category-content {
+        display: flex;
+        width: $cc-co-transaction-category-filter-content-width;
+        flex-shrink: 0;
+      }
+
+      .clickable {
+        cursor: pointer;
+      }
+    }
+  }
+}

package/lib/component/transaction-search/transaction-filter/transaction-filter/style/_theme.scss

@@ -0,0 +1,8 @@
+@include export-module('cc-transaction-filter-theme') {
+  .co-transaction-filter {
+    .co-transaction-sales-order-filter, .co-transaction-purchase-order-filter {
+      background-color: $cc-co-transaction-filter-background-color;
+      border-color: $cc-color-border;
+    }
+  }
+}

package/lib/component/transaction-search/transaction-filter/transaction-filter/style/material.scss

@@ -0,0 +1,6 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../../transaction-filter-categories/style/material";
+@import "../../../transaction-filter-historic-state/style/material";
+@import "../../../transaction-filter-content/style/material";

package/lib/component/transaction-search/transaction-filter/transaction-filter/transaction-filter.component.d.ts

@@ -0,0 +1,26 @@
+import { ApplicationRef, ComponentFactoryResolver, EventEmitter, Injector } from "@angular/core";
+import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
+import { SearchViewMode } from "../../../../enum/search-view-mode.enum";
+import { TransactionMappingService } from "../../../../service/transaction-mapping.service";
+import { TransactionSearchService } from "../../service/transaction-search.service";
+export declare class TransactionFilterComponent {
+    private _mappingService;
+    private _compFactoryResolver;
+    private appRef;
+    private injector;
+    searchService: TransactionSearchService;
+    set container(content: any);
+    set transactionType(value: TransactionKind);
+    get transactionType(): TransactionKind;
+    set activeSearchViewMode(value: SearchViewMode);
+    get activeSearchViewMode(): SearchViewMode;
+    closeButtonClick: EventEmitter<void>;
+    resetFilterClick: EventEmitter<void>;
+    showClass(): boolean;
+    private _transactionFilterContainer;
+    private _transactionType;
+    private _activeSearchViewMode;
+    private _componentRef;
+    constructor(_mappingService: TransactionMappingService, _compFactoryResolver: ComponentFactoryResolver, appRef: ApplicationRef, injector: Injector, searchService: TransactionSearchService);
+    private _prepareContent;
+}

package/lib/component/transaction-search/transaction-filter/transaction-purchase-order-filter/style/_layout.scss

@@ -0,0 +1,4 @@
+@include export-module('co-transaction-purchase-order-filter-layout') {
+  .co-transaction-purchase-order-filter {
+  }
+}

package/lib/component/transaction-search/transaction-filter/transaction-purchase-order-filter/style/_material-definition.scss

@@ -0,0 +1 @@
+

package/lib/component/transaction-search/transaction-filter/transaction-purchase-order-filter/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('co-transaction-purchase-order-filter-theme') {
+  .co-transaction-purchase-order-filter {
+  }
+}

package/lib/component/transaction-search/transaction-filter/transaction-purchase-order-filter/style/material.scss

@@ -0,0 +1,4 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+