@colijnit/transaction 12.1.17 → 12.1.20

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

@@ -6,7 +6,8 @@ $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: white !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;

package/lib/component/transaction-grid/transaction-base-grid/style/_layout.scss

@@ -18,6 +18,10 @@
     width: 40px;
     height: 40px;
   }
+  .co-transaction-line-action-buttons {
+    display: flex;
+    justify-content: center;
+  }
   .transaction-grid-article-image {
     width: $tp-co-transaction-grid-article-image-width;
   }

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

@@ -99,56 +99,9 @@
     }
     .transaction-line-buttons {
       display: flex;
-      flex-direction: column;
       align-items: center;
       flex-shrink: 0;
-      row-gap: 5px;
       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 {
       font-weight: bold;

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

@@ -21,23 +21,6 @@
       background-color: $tp-transaction-line-article-text-background-color;
       color: $tp-transaction-line-article-text-color;
     }
-    .transaction-line-overview-button {
-      background-color: $tp-transaction-line-buttons-overview-background-color;
-      co-icon [fill] {
-        fill: $tp-transaction-line-buttons-overview-text-color;
-      }
-    }
-    .transaction-line-add-text-button {
-      background-color: $tp-transaction-line-buttons-add-text-background-color;
-      co-icon [fill] {
-        fill: $tp-transaction-line-buttons-add-text-text-color;
-      }
-    }
-    .transaction-line-show-sidebar-button {
-      co-icon [fill] {
-        fill: $tp-transaction-line-buttons-add-text-text-color;
-      }
-    }
     .article-text {
       color: $tp-transaction-line-article-text-font-color;
       background-color: $tp-transaction-line-background-color;

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

@@ -5,10 +5,9 @@ import { TransactionService } from "../../service/transaction.service";
 import { DictionaryService } from "../../service/dictionary.service";
 import { Icon } from "../../enum/icon.enum";
 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";
+import { TransactionLineActionButtonsComponent } from "../transaction-line-action-buttons/transaction-line-action-buttons.component";
 export declare class TransactionLineComponent {
     service: TransactionService;
     iconCacheService: IconCacheService;
@@ -21,6 +20,7 @@ export declare class TransactionLineComponent {
     get line(): TransactionLineInfo;
     waitingForUserAction: EventEmitter<boolean>;
     sidePanelButtonClicked: EventEmitter<void>;
+    transactionLineActionButtons: TransactionLineActionButtonsComponent;
     isText: boolean;
     isArticle: boolean;
     isSelected: boolean;
@@ -30,26 +30,12 @@ export declare class TransactionLineComponent {
     localAmount: number;
     image: string;
     stock: StockStatus;
-    currentReason: ResolveLinePendingReasonRequest;
-    showTransactionArticleText: boolean;
-    showTransactionArticleTextOverview: boolean;
-    articleTextHeader: string;
-    textToEdit: string;
     mouseOver: boolean;
     private _line;
     constructor(service: TransactionService, iconCacheService: IconCacheService, _dialogService: DialogService, _dictionaryService: DictionaryService, _imageService: TransactionImageService);
     changeLineAmount(amount: number): void;
     deleteTransactionLineClick(): Promise<void>;
-    handleTransactionArticleText(event: MouseEvent): void;
-    handleTransactionArticleTextOverview(event: MouseEvent): void;
-    saveTransactionArticleLineText(transactionAddTextLineRequest: TransactionAddTextLineRequest): void;
-    closeTransactionArticleText(event: MouseEvent): void;
-    closeTransactionArticleTextOverview(event: MouseEvent): void;
     handleOpenArticleText(text: string): void;
+    handleShowSidePanel(): void;
     private _loadLineImage;
-    private _showArticleTextDialog;
-    private _hideArticleTextDialog;
-    private _showArticleTextOverviewDialog;
-    private _hideArticleTextOverviewDialog;
-    handleShowSidePanel(event: MouseEvent): void;
 }

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

@@ -0,0 +1,106 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-line-action-buttons-layout') {
+  .co-transaction-line-action-buttons {
+
+    .transaction-line-action-buttons-wrapper {
+      padding: $tp-transaction-line-show-hide-button-padding;
+      border-radius: 14px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .show-hide-button {
+        width: $tp-transaction-line-show-hide-button-size;
+        height: $tp-transaction-line-show-hide-button-size;
+        cursor: pointer;
+      }
+    }
+
+    .transaction-line-overview-button {
+      background-color: $tp-transaction-line-buttons-overview-background-color;
+      co-icon [fill] {
+        fill: $tp-transaction-line-buttons-overview-text-color;
+      }
+    }
+    .transaction-line-add-text-button {
+      background-color: $tp-transaction-line-buttons-add-text-background-color;
+      co-icon [fill] {
+        fill: $tp-transaction-line-buttons-add-text-text-color;
+      }
+    }
+    .transaction-line-show-sidebar-button {
+      co-icon [fill] {
+        fill: $tp-transaction-line-buttons-add-text-text-color;
+      }
+    }
+
+    .action-buttons-container {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+
+      .circle {
+        opacity: 0;
+        height: 25px;
+        width: 25px;
+        margin: 5px;
+        cursor: pointer;
+        co-icon {
+          height: 25px;
+          width: 25px;
+        }
+        &.show {
+          opacity: 1;
+        }
+      }
+      .circle:nth-child(1) {
+        transition: all .2s .4s;
+      }
+      .circle:nth-child(2) {
+        transition: all .2s .3s;
+      }
+      .circle:nth-child(3) {
+        transition: all .2s .2s;
+      }
+      .circle:nth-child(4) {
+        transition: all .2s .1s;
+      }
+      .circle.show:nth-child(1) {
+        transition: all .2s;
+      }
+      .circle.show:nth-child(2) {
+        transition: all .2s .1s;
+      }
+      .circle.show:nth-child(3) {
+        transition: all .2s .2s;
+      }
+      .circle.show:nth-child(4) {
+        transition: all .2s .3s;
+      }
+
+      &.bottom {
+        transform: translate(0, calc(50% + (#{$tp-transaction-line-show-hide-button-size} / 2) +
+        #{$tp-transaction-line-show-hide-button-padding}));
+      }
+
+      &.top {
+        transform: translate(0, calc(-50% - (#{$tp-transaction-line-show-hide-button-size} / 2) -
+        #{$tp-transaction-line-show-hide-button-padding}));
+        flex-direction: column-reverse;
+      }
+
+      &.left {
+        transform: translate(calc(-50% - (#{$tp-transaction-line-show-hide-button-size} / 2) -
+        #{$tp-transaction-line-show-hide-button-padding}));
+        flex-direction: row-reverse;
+      }
+
+      &.right {
+        transform: translate(calc(50% + (#{$tp-transaction-line-show-hide-button-size} / 2) +
+        #{$tp-transaction-line-show-hide-button-padding}));
+        flex-direction: row;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+$tp-transaction-line-buttons-overview-background-color: $tp-color-active-light !default;
+$tp-transaction-line-buttons-overview-text-color: $tp-color-light !default;
+$tp-transaction-line-buttons-add-text-background-color: $tp-color-action !default;
+$tp-transaction-line-buttons-add-text-text-color: $tp-color-light !default;
+$tp-transaction-line-show-hide-button-size: 30px !default;
+$tp-transaction-line-show-hide-button-padding: 4px !default;
+

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

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

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

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

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

@@ -0,0 +1,43 @@
+import { EventEmitter, OnInit } from "@angular/core";
+import { TransactionService } from "../../service/transaction.service";
+import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
+import { Icon } from "../../enum/icon.enum";
+import { DictionaryService } from "../../service/dictionary.service";
+import { IconCacheService } from "../../service/icon-cache.service";
+import { Direction } from "../../enum/direction.enum";
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { TransactionAddTextLineRequest } from "@colijnit/transactionapi/build/model/transaction-add-text-line-request.bo";
+export declare class TransactionLineActionButtonsComponent implements OnInit {
+    iconCacheService: IconCacheService;
+    private _transactionService;
+    private _dictionaryService;
+    readonly icons: typeof Icon;
+    transactionLine: TransactionLineInfo;
+    alignDirection: Direction;
+    waitingForUserAction: EventEmitter<boolean>;
+    sidePanelButtonClicked: EventEmitter<TransactionLineInfo>;
+    showClass(): boolean;
+    showActionButtons: boolean;
+    showActionButtonsDelayed: boolean;
+    transactionKind: TransactionKind;
+    showTransactionArticleText: boolean;
+    showTransactionArticleTextOverview: boolean;
+    articleTextHeader: string;
+    textToEdit: string;
+    constructor(iconCacheService: IconCacheService, _transactionService: TransactionService, _dictionaryService: DictionaryService);
+    ngOnInit(): void;
+    handleShowHideClick(): void;
+    handleTransactionArticleTextOverview(): void;
+    handleTransactionArticleText(): void;
+    handleShowSidePanel(): void;
+    showOverviewButton(): boolean;
+    showAddTextButton(): boolean;
+    showSidebarButton(): boolean;
+    saveTransactionArticleLineText(transactionAddTextLineRequest: TransactionAddTextLineRequest): void;
+    closeTransactionArticleText(event: MouseEvent): void;
+    closeTransactionArticleTextOverview(event: MouseEvent): void;
+    showArticleTextDialog(): void;
+    private _hideArticleTextDialog;
+    private _showArticleTextOverviewDialog;
+    private _hideArticleTextOverviewDialog;
+}

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

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

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

@@ -35,10 +35,12 @@
         width: 1px;
         margin: 5px;
       }
-      .close-button {
-        width: 30px;
-        height: 30px;
-      }
+    }
+    .close-button {
+      display: flex;
+      align-self: flex-end;
+      width: 25px;
+      height: 25px;
     }
     .transaction-line-side-panel-nav-bar {
       display: flex;

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

@@ -2,7 +2,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-width: 450px !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;
 $tp-transaction-line-side-panel-header-label-font-family: $tp-font-family !default;

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

@@ -2,6 +2,9 @@
 
 @include export-module('co-transaction-line-side-panel-default') {
   .co-transaction-line-side-panel-default {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
     //.side-panel-header-description {
     //  font-weight: $tp-transaction-line-side-panel-header-description-font-weight;
     //}

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

@@ -7,8 +7,8 @@ export declare class FilterRequestService {
     constructor(searchService: TransactionSearchService, _transactionService: TransactionService);
     handleCollectionChangeForRange(collection: FilterItemViewmodel[], modelName: string): void;
     handleCollectionChangeForArray(collection: FilterItemViewmodel[], modelName: string): void;
-    handleCollectionChangeForSingleValue(collection: FilterItemViewmodel[], modelName: string): void;
-    handleCollectionChangeForSingleNumber(collection: FilterItemViewmodel[], modelName: string): void;
+    handleCollectionChangeForSingleValue(value: string, modelName: string): void;
+    handleCollectionChangeForSingleNumber(value: number, modelName: string): void;
     handleCheckboxValueChangeForString(value: boolean, modelName: string): void;
     handleCheckboxValueChangeForNumber(value: boolean, modelName: string): void;
     handleDateRangeChange(dates: Date[], modelName: string): void;
@@ -16,8 +16,6 @@ export declare class FilterRequestService {
     private _getFilterRequestForCollectionRange;
     private _getFilterRequestForBooleanToString;
     private _getFilterRequestForCollectionArray;
-    private _getFilterRequestForSingleCollectionValue;
-    private _getFilterRequestForSingleCollectionNumber;
     private _getFilterRequestForDateRange;
     private _formatDateToString;
 }

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

@@ -5,7 +5,13 @@ export declare class TransactionSearchService {
     private _transactionService;
     searchRequest: TransactionSearchViewRequest;
     transactions: TransactionSearchView[];
+    set transactionType(value: string);
+    get transactionType(): string;
+    labelBasedOnTransactionType: Map<string, string>;
+    private _transactionType;
     constructor(_transactionService: TransactionService);
     searchTransactions(): void;
+    getLabelBasedOnTransactionType(): string;
     resetFilters(): void;
+    private _resetRequest;
 }

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

@@ -4,34 +4,52 @@
   .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%;
+      border-right: $cc-co-transaction-search-border-style;
+      //height: $cc-co-transaction-search-screen-height;
+      //overflow: hidden;
+
+      &.fullscreen {
+        width: 100vw;
+        transition: width 0.2s ease-in-out;
+      }
+
+      &.sidebar {
+        width:$cc-co-transaction-searchbar-width;
+        transition: width 0.2s ease-in-out;
+      }
     }
+
     .transaction-filter-wrapper {
       display: flex;
-      flex-basis: 350px;
+      //flex-basis: 350px;
+      //overflow-y: auto;
+      //overflow-x: hidden;
+      min-width: $tp-co-transaction-filter-wrapper-min-width;
+      //height: $cc-co-transaction-search-screen-height;
+
+      &.sidebar {
+        position: absolute;
+        left: -$cc-co-transaction-searchbar-width;
+        transition: left 0.2s ease-in-out;
+      }
+
+      &.fullscreen{
+        position: relative;
+        left: 0;
+        transition: left 0.2s ease-in-out;
+      }
     }
+
     .transaction-search-result-wrapper {
       display: flex;
+      //height: $cc-co-transaction-search-screen-height;
+      overflow-y: auto;
       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;
-      }
+      padding: $tp-co-transaction-search-result-wrapper-padding;
     }
   }
 }

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

@@ -1,16 +1,22 @@
 $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-search-filter-button-color: $cc-color-light !default;
-$tp-co-transaction-search-filter-input-border: none !default;
+$cc-co-transaction-search-background-color: $cc-color-light !default;
+$cc-co-transaction-search-border-color: $tp-color-border !default;
+$cc-co-transaction-search-border-style: solid 1px !default;
+//$cc-co-transaction-search-screen-height: 95vh !default;
+
+$cc-co-transaction-searchbar-width:370px !default;
+
+$tp-co-transaction-filter-wrapper-min-width: 360px !default;
+$tp-co-transaction-filter-button-color: $cc-color-light !default;
+$tp-co-transaction-filter-input-border: none !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-border: none !default;
 $cc-co-transaction-filter-top: 0 !default;
 
 $cc-co-transaction-filter-icon-margin-left: 10px !default;
@@ -23,19 +29,30 @@ $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-filter-categories-font-family: $tp-font-family !default;
+$tp-co-transaction-filter-categories-font-size: 15px !default;
+$tp-co-transaction-filter-categories-font-weight: bold !default;
+$tp-co-transaction-filter-categories-active-color: $tp-color-action !default;
+$tp-co-transaction-filter-categories-inactive-color: $tp-color-grey !default;
+$tp-co-transaction-filter-categories-padding: 20px 30px !default;
+$tp-co-transaction-filter-categories-border-width: 0 0 1px 0 !default;
+$tp-co-transaction-filter-categories-border-style: solid !default;
+$tp-co-transaction-filter-categories-active-border-width: 0 0 1px 0 !default;
+$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-result-width: 100% !default;
+$tp-co-transaction-search-result-wrapper-padding: 10px !default;
+$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-view-modes-wrapper-padding: 0 35px !default;

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

@@ -2,5 +2,9 @@
 
 @include export-module('co-transaction-search-theme') {
   .co-transaction-search {
+    .transaction-search-wrapper {
+      background-color: $cc-co-transaction-search-background-color;
+      border-right-color: $cc-co-transaction-search-border-color;
+    }
   }
 }

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

@@ -3,5 +3,6 @@
 @import "./theme";
 @import "../transaction-filter/style/material";
 @import "../transaction-search-result/style/material";
-@import "../transaction-tile/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";

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

@@ -1,15 +1,18 @@
 import { ElementRef, EventEmitter } from "@angular/core";
 import { Icon } from "../../../enum/icon.enum";
+import { SearchViewMode } from "../../../enum/search-view-mode.enum";
 import { IconCacheService } from "../../../service/icon-cache.service";
 import { TransactionSearchService } from "../service/transaction-search.service";
 export declare class TransactionFilterComponent {
     iconCacheService: IconCacheService;
     searchService: TransactionSearchService;
     readonly icon: typeof Icon;
+    readonly searchViewModes: typeof SearchViewMode;
     filterItems: ElementRef;
     orderFilter: ElementRef;
     logisticsFilter: ElementRef;
     articleFilter: ElementRef;
+    activeSearchViewMode: SearchViewMode;
     closeButtonClick: EventEmitter<void>;
     resetFilterClick: EventEmitter<void>;
     showClass(): boolean;

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

@@ -2,21 +2,21 @@
 
 @include export-module('co-transaction-filter-categories-layout') {
   .co-transaction-filter-categories {
-    font-family: $tp-co-transaction-search-filter-categories-font-family;
-    font-size: $tp-co-transaction-search-filter-categories-font-size;
-    font-weight: $tp-co-transaction-search-filter-categories-font-weight;
+    font-family: $tp-co-transaction-filter-categories-font-family;
+    font-size: $tp-co-transaction-filter-categories-font-size;
+    font-weight: $tp-co-transaction-filter-categories-font-weight;
     .transaction-filter-categories-wrapper {
       display: flex;
       justify-content: center;
     }
     .transaction-filter-category {
       cursor: pointer;
-      padding: $tp-co-transaction-search-filter-categories-padding;
-      border-width: $tp-co-transaction-search-filter-categories-border-width;
-      border-style: $tp-co-transaction-search-filter-categories-border-style;
+      padding: $tp-co-transaction-filter-categories-padding;
+      border-width: $tp-co-transaction-filter-categories-border-width;
+      border-style: $tp-co-transaction-filter-categories-border-style;
       &.active {
-        border-width: $tp-co-transaction-search-filter-categories-active-border-width;
-        border-style: $tp-co-transaction-search-filter-categories-active-border-style;
+        border-width: $tp-co-transaction-filter-categories-active-border-width;
+        border-style: $tp-co-transaction-filter-categories-active-border-style;
       }
     }
   }

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

@@ -3,10 +3,10 @@
 @include export-module('co-transaction-filter-categories-theme') {
   .co-transaction-filter-categories {
     .transaction-filter-category {
-      border-color: $tp-co-transaction-search-filter-categories-inactive-color;
+      border-color: $tp-co-transaction-filter-categories-inactive-color;
       &.active {
-        color: $tp-co-transaction-search-filter-categories-active-color;
-        border-color: $tp-co-transaction-search-filter-categories-active-color;
+        color: $tp-co-transaction-filter-categories-active-color;
+        border-color: $tp-co-transaction-filter-categories-active-color;
       }
     }
   }