@colijnit/transaction 12.1.14 → 12.1.15

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

@@ -104,12 +104,48 @@
       height: $tp-transaction-line-amount-height;
       padding: $tp-transaction-line-inner-padding;
       .circle {
+        opacity: 0;
         height: 25px;
         width: 25px;
         co-icon {
           height: 25px;
           width: 25px;
         }
+        &.show {
+          opacity: 1;
+        }
+      }
+      .circle:nth-child(1) {
+        //animation-delay: .4s;
+        transition: all .2s .4s;
+      }
+      .circle:nth-child(2) {
+        //animation-delay: .4s;
+        transition: all .2s .3s;
+      }
+      .circle:nth-child(3) {
+        //animation-delay: .6s;
+        transition: all .2s .2s;
+      }
+      .circle:nth-child(4) {
+        //animation-delay: .8s;
+        transition: all .2s .1s;
+      }
+      .circle.show:nth-child(1) {
+        //animation-delay: .4s;
+        transition: all .2s;
+      }
+      .circle.show:nth-child(2) {
+        //animation-delay: .4s;
+        transition: all .2s .1s;
+      }
+      .circle.show:nth-child(3) {
+        //animation-delay: .6s;
+        transition: all .2s .2s;
+      }
+      .circle.show:nth-child(4) {
+        //animation-delay: .8s;
+        transition: all .2s .3s;
       }
     }
     .transaction-line-description-description {

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

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

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

@@ -8,21 +8,25 @@ import { IconCacheService } from "../../service/icon-cache.service";
 import { TransactionAddTextLineRequest } from "@colijnit/transactionapi/build/model/transaction-add-text-line-request.bo";
 import { DialogService } from "../../service/dialog.service";
 import { ResolveLinePendingReasonRequest } from "@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo";
+import { TransactionImageService } from "../../service/transaction-image.service";
 export declare class TransactionLineComponent {
     service: TransactionService;
     iconCacheService: IconCacheService;
     private _dialogService;
     private _dictionaryService;
+    private _imageService;
     readonly icons: typeof Icon;
     preview: boolean;
     set line(value: TransactionLineInfo);
     get line(): TransactionLineInfo;
     waitingForUserAction: EventEmitter<boolean>;
-    showSidePanelClicked: EventEmitter<boolean>;
+    sidePanelButtonClicked: EventEmitter<void>;
     isText: boolean;
     isArticle: boolean;
     isSelected: boolean;
     showClass(): boolean;
+    handleMouseOver(event: MouseEvent): void;
+    handleMouseLeave(event: MouseEvent): void;
     localAmount: number;
     image: string;
     stock: StockStatus;
@@ -31,9 +35,9 @@ export declare class TransactionLineComponent {
     showTransactionArticleTextOverview: boolean;
     articleTextHeader: string;
     textToEdit: string;
-    showSidePanel: boolean;
+    mouseOver: boolean;
     private _line;
-    constructor(service: TransactionService, iconCacheService: IconCacheService, _dialogService: DialogService, _dictionaryService: DictionaryService);
+    constructor(service: TransactionService, iconCacheService: IconCacheService, _dialogService: DialogService, _dictionaryService: DictionaryService, _imageService: TransactionImageService);
     changeLineAmount(amount: number): void;
     deleteTransactionLineClick(): Promise<void>;
     handleTransactionArticleText(event: MouseEvent): void;
@@ -48,5 +52,4 @@ export declare class TransactionLineComponent {
     private _showArticleTextOverviewDialog;
     private _hideArticleTextOverviewDialog;
     handleShowSidePanel(event: MouseEvent): void;
-    handleCloseSidePanel(event: MouseEvent): void;
 }

package/lib/component/transaction-line-grid/style/material.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

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

@@ -8,9 +8,9 @@
     font-size: $tp-transaction-line-side-panel-font-size;
     position: fixed;
     right: 0;
-    top: 0;
+    top: $tp-transaction-line-side-panel-top;
     width: $tp-transaction-line-side-panel-width;
-    height: 100%;
+    height: $tp-transaction-line-side-panel-height;
     z-index: 10;
     box-shadow: $tp-transaction-line-side-panel-box-shadow;
     padding: $tp-transaction-line-side-panel-padding;

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

@@ -1,5 +1,7 @@
 $tp-transaction-line-side-panel-font-family: $tp-font-family !default;
 $tp-transaction-line-side-panel-font-size: $tp-font-size !default;
+$tp-transaction-line-side-panel-top: 0 !default;
+$tp-transaction-line-side-panel-height: 100% !default;
 $tp-transaction-line-side-panel-width: 700px !default;
 $tp-transaction-line-side-panel-box-shadow: -3px 0px 16px 1px rgb(0, 0, 0, 0.2) !default;
 $tp-transaction-line-side-panel-padding: 10px !default;

package/lib/component/transaction-line-side-panel/style/material.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

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

@@ -3,16 +3,18 @@ import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transa
 import { TabCategory } from "../../enum/tab-category.enum";
 import { Icon } from "../../enum/icon.enum";
 import { IconCacheService } from "../../service/icon-cache.service";
+import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
+import { TransactionTypeCategory } from "../../enum/transaction-type-category.enum";
 export declare class TransactionLineSidePanelComponent {
     iconService: IconCacheService;
     readonly icons: typeof Icon;
     readonly tabCategory: typeof TabCategory;
+    readonly transactionTypes: typeof TransactionKind;
+    transactionType: TransactionKind;
     transactionLine: TransactionLineInfo;
-    activeTabCategory: TabCategory;
+    activeCategory: TransactionTypeCategory;
     cancelClick: EventEmitter<MouseEvent>;
     showClass(): boolean;
     constructor(iconService: IconCacheService);
     handleCancelClick(event: MouseEvent): void;
-    handleSaveDetailsEdit(): void;
-    handleCancelDetailsEdit(): void;
 }

package/lib/component/transaction-line-side-panel-default/style/material.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

package/lib/component/transaction-line-side-panel-purchase/style/_layout.scss

@@ -0,0 +1,6 @@
+@import "../../../style/mixin";
+
+@include export-module('cc-transaction-line-side-panel-purchase-layout') {
+  .co-transaction-line-side-panel-purchase {
+  }
+}

package/lib/component/transaction-line-side-panel-purchase/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../style/mixin";
+
+@include export-module('cc-transaction-line-side-panel-purchase-theme') {
+  .co-transaction-line-side-panel-purchase {
+  }
+}

package/lib/component/transaction-line-side-panel-purchase/style/material.scss

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

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

@@ -0,0 +1,8 @@
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { TransactionTypeCategory } from "../../enum/transaction-type-category.enum";
+export declare class TransactionLineSidePanelPurchaseComponent {
+    readonly categories: typeof TransactionTypeCategory;
+    category: TransactionTypeCategory;
+    transactionLine: TransactionLineInfo;
+    showClass(): boolean;
+}

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

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

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

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

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

@@ -14,15 +14,13 @@ export declare class TransactionLinesComponent {
     transactionLines: TransactionLineInfo[];
     preview: boolean;
     saveTransactionLine: EventEmitter<TransactionAddTextLineRequest>;
-    showSidePanelClicked: EventEmitter<{
-        show: boolean;
-        line: TransactionLineInfo;
-    }>;
+    showSidePanelClicked: EventEmitter<TransactionLineInfo>;
     showClass(): boolean;
     showTransactionArticleText: boolean;
     selectedArticleText: TransactionLineInfo;
     textToEdit: string;
     userActionRequired: boolean;
+    selectedTransactionLine: TransactionLineInfo;
     constructor(iconCacheService: IconCacheService, service: TransactionService);
     trackByFn(index: number, line: TransactionLineInfo): any;
     handleCanDragDrop(drag: CdkDrag, drop: CdkDropList): boolean;
@@ -31,7 +29,7 @@ export declare class TransactionLinesComponent {
     handleTransactionArticleText(event: MouseEvent): void;
     closeTransactionArticleText(event: MouseEvent): void;
     saveTransactionArticleLineText(transactionLine: TransactionAddTextLineRequest): void;
-    handleShowSidePanelClicked(event: boolean, line: TransactionLineInfo): void;
+    handleShowSidePanelClicked(line: TransactionLineInfo): void;
     private _showArticleTextDialog;
     private _hideArticleTextDialog;
 }

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

@@ -0,0 +1,11 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-quick-access-layout') {
+  .co-transaction-quick-access {
+    .quick-access-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+  }
+}

package/lib/component/{transaction-commit-bar → transaction-quick-access/transaction-quick-access}/style/_theme.scss

@@ -1,4 +1,4 @@
-@import "../../../style/mixin";
+@import "../../../../style/mixin";
 
 @include export-module('co-transaction') {
   .co-transaction {

package/lib/component/transaction-quick-access/transaction-quick-access/style/material.scss

@@ -0,0 +1,6 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../transaction-quick-access-order-confirmation/style/material";
+@import "../../transaction-quick-access-received-goods/style/material";
+@import "../../transaction-quick-access-overview/style/material";

package/lib/component/transaction-quick-access/transaction-quick-access/transaction-quick-access.component.d.ts

@@ -0,0 +1,21 @@
+import { ApplicationRef, ComponentFactoryResolver, ElementRef, Injector } from "@angular/core";
+import { TransactionTypeCategory } from "../../../enum/transaction-type-category.enum";
+import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
+import { TransactionMappingService } from "../../../service/transaction-mapping.service";
+export declare class TransactionQuickAccessComponent {
+    private _mappingService;
+    private _compFactoryResolver;
+    private appRef;
+    private injector;
+    quickAccessContainer: ElementRef;
+    set transactionType(value: TransactionKind);
+    get transactionType(): TransactionKind;
+    set activeCategory(value: TransactionTypeCategory);
+    get activeCategory(): TransactionTypeCategory;
+    showClass(): boolean;
+    private _transactionType;
+    private _activeCategory;
+    private _componentRef;
+    constructor(_mappingService: TransactionMappingService, _compFactoryResolver: ComponentFactoryResolver, appRef: ApplicationRef, injector: Injector);
+    private _prepareContent;
+}

package/lib/component/transaction-quick-access/transaction-quick-access/transaction-quick-access.module.d.ts

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

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

@@ -0,0 +1,9 @@
+@import "../../../../style/mixin";
+
+@include export-module('cc-transaction-quick-access-order-confirmation-layout') {
+  .co-transaction-quick-access-order-confirmation {
+    display: flex;
+    column-gap: 10px;
+    align-items: center;
+  }
+}

package/lib/component/transaction-quick-access/transaction-quick-access-order-confirmation/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../../style/mixin";
+
+@include export-module('cc-transaction-quick-access-order-confirmation-theme') {
+  .co-transaction-quick-access-order-confirmation {
+  }
+}

package/lib/component/transaction-quick-access/transaction-quick-access-order-confirmation/style/material.scss

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

package/lib/component/transaction-quick-access/transaction-quick-access-order-confirmation/transaction-quick-access-order-confirmation.component.d.ts

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

package/lib/component/transaction-quick-access/transaction-quick-access-order-confirmation/transaction-quick-access-order-confirmation.module.d.ts

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

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

@@ -0,0 +1,7 @@
+@import "../../../../style/mixin";
+
+@include export-module('cc-transaction-quick-access-overview-layout') {
+  .co-transaction-quick-access-overview {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,6 @@
+@import "../../../../style/mixin";
+
+@include export-module('cc-transaction-quick-access-overview-theme') {
+  .co-transaction-quick-access-overview {
+  }
+}

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

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

package/lib/component/transaction-quick-access/transaction-quick-access-overview/transaction-quick-access-overview.component.d.ts

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

package/lib/component/transaction-quick-access/transaction-quick-access-overview/transaction-quick-access-overview.module.d.ts

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

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

@@ -0,0 +1,9 @@
+@import "../../../../style/mixin";
+
+@include export-module('cc-transaction-quick-access-received-goods-layout') {
+  .co-transaction-quick-access-received-goods {
+    display: flex;
+    column-gap: 10px;
+    align-items: center;
+  }
+}

package/lib/component/transaction-quick-access/transaction-quick-access-received-goods/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../../style/mixin";
+
+@include export-module('cc-transaction-quick-access-received-goods-theme') {
+  .co-transaction-quick-access-received-goods {
+  }
+}

package/lib/component/transaction-quick-access/transaction-quick-access-received-goods/style/material.scss

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

package/lib/component/transaction-quick-access/transaction-quick-access-received-goods/transaction-quick-access-received-goods.component.d.ts

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

package/lib/component/transaction-quick-access/transaction-quick-access-received-goods/transaction-quick-access-received-goods.module.d.ts

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

package/lib/component/transaction-receiving-goods-details/style/material.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

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

@@ -3,4 +3,6 @@ export declare class TransactionReceivingGoodsDetailsComponent {
     transactionLineInfo: TransactionLineInfo;
     showClass(): boolean;
     valuePlaceholder: any;
+    handleSaveDetailsEdit(): void;
+    handleCancelDetailsEdit(): void;
 }

package/lib/component/transaction-receiving-goods-history/style/material.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

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

@@ -0,0 +1,11 @@
+import { FilterItemViewmodel } from "../../../model/filter-item.viewmodel";
+import { TransactionService } from "../../../service/transaction.service";
+export declare class FilterRequestService {
+    private _transactionService;
+    constructor(_transactionService: TransactionService);
+    getFilterRequestForCollectionRange(collection: FilterItemViewmodel[]): string;
+    getFilterRequestForCollectionArray(collection: FilterItemViewmodel[]): string[];
+    getFilterRequestForDateRange(startDate: Date, endDate: Date): string;
+    getDateFromFilterRequestRange(filterRequestRange: string, index: number): Date;
+    formatDate(date: Date): string;
+}

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

@@ -0,0 +1,11 @@
+import { TransactionSearchViewRequest } from "@colijnit/transactionapi/build/model/transaction-search-view-request";
+import { TransactionSearchView } from "@colijnit/transactionapi/build/model/transaction-search-view.bo";
+import { TransactionService } from "../../../service/transaction.service";
+export declare class TransactionSearchService {
+    private _transactionService;
+    searchRequest: TransactionSearchViewRequest;
+    transactions: TransactionSearchView[];
+    constructor(_transactionService: TransactionService);
+    searchTransactions(): void;
+    resetFilters(): void;
+}

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

@@ -0,0 +1,37 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-search-layout') {
+  .co-transaction-search {
+    font-family: $tp-co-transaction-search-font-family;
+    font-size: $tp-co-transaction-search-font-size;
+    .transaction-search-wrapper {
+      display: flex;
+      width: 100%;
+      height: 100%;
+    }
+    .transaction-filter-wrapper {
+      display: flex;
+      flex-basis: 350px;
+    }
+    .transaction-search-result-wrapper {
+      display: flex;
+      flex-basis: 100%;
+      justify-content: flex-start;
+      padding: 10px;
+    }
+    .transaction-search-header-wrapper {
+      display: flex;
+      justify-content: center;
+      .transaction-search-general {
+        width: 320px;
+      }
+      .transaction-search-filter-button {
+        height: 50px;
+        width: 50px;
+        border-radius: 5px;
+        padding: 0;
+        justify-content: center;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+$tp-co-transaction-search-font-family: $tp-font-family !default;
+$tp-co-transaction-search-font-size: $tp-font-size !default;
+$tp-co-transaction-search-filter-wrapper-min-width: 360px !default;
+$tp-co-transaction-search-filter-wrapper-height: 95vh !default;
+
+$tp-co-transaction-filter-font-family: $tp-font-family !default;
+$tp-co-transaction-filter-font-size: $tp-font-size !default;
+$cc-co-transaction-filter-background-color: $cc-color-light !default;
+$cc-co-transaction-filter-width: 350px !default;
+$cc-co-transaction-filter-padding: 10px !default;
+$cc-co-transaction-filter-border: solid 1px !default;
+$cc-co-transaction-filter-top: 0 !default;
+
+$cc-co-transaction-filter-icon-margin-left: 10px !default;
+$cc-co-transaction-filter-icon-height: 13px !default;
+$cc-co-transaction-filter-icon-width: 13px !default;
+
+$cc-co-transaction-filter-header-font-weight: $grid-header-font-weight !default;
+$cc-co-transaction-filter-header-font-size: 13px !default;
+
+$cc-co-transaction-category-filter-wrapper-padding-top: 10px !default;
+$cc-co-transaction-category-filter-content-width: 350px !default;
+
+$tp-co-transaction-search-filter-categories-font-family: $tp-font-family !default;
+$tp-co-transaction-search-filter-categories-font-size: 15px !default;
+$tp-co-transaction-search-filter-categories-font-weight: bold !default;
+$tp-co-transaction-search-filter-categories-active-color: $tp-color-action !default;
+$tp-co-transaction-search-filter-categories-inactive-color: $tp-color-grey !default;
+$tp-co-transaction-search-filter-categories-padding: 20px 30px !default;
+$tp-co-transaction-search-filter-categories-border-width: 0 0 1px 0 !default;
+$tp-co-transaction-search-filter-categories-border-style: solid !default;
+$tp-co-transaction-search-filter-categories-active-border-width: 0 0 1px 0 !default;
+$tp-co-transaction-search-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-result-width: 100% !default;

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

@@ -0,0 +1,6 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-search-theme') {
+  .co-transaction-search {
+  }
+}

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

@@ -0,0 +1,7 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../transaction-filter/style/material";
+@import "../transaction-search-result/style/material";
+@import "../transaction-tile/style/material";
+@import "../../view-mode-buttons/style/material";

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

@@ -0,0 +1,53 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-filter-layout') {
+  .co-transaction-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/style/_material-definition.scss

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,8 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-filter-theme') {
+  .co-transaction-filter {
+    background-color: $cc-co-transaction-filter-background-color;
+    border-color: $cc-color-border;
+  }
+}

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

@@ -0,0 +1,7 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../transaction-filter-categories/style/material";
+@import "../../transaction-filter-content-article/style/material";
+@import "../../transaction-filter-content-order/style/material";
+@import "../../transaction-filter-content-logistics/style/material";