@colijnit/transaction 12.1.13 → 12.1.16

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,27 @@
+import { EventEmitter, OnInit, OnDestroy } from "@angular/core";
+import { TransactionBaseComponent } from "../../core/base/transaction-base.component";
+import { TransactionEventService } from "../../../service/transaction-event.service";
+import { TransactionService } from "../../../service/transaction.service";
+export declare class TransactionQuickAccessReceivedGoodsComponent extends TransactionBaseComponent implements OnInit, OnDestroy {
+    private _transactionService;
+    private _transactionEventService;
+    commitDate: Date;
+    commitReferenceId: string;
+    packingSlipId: string;
+    checkboxValueChanged: EventEmitter<{
+        checkboxValue: boolean;
+        date: Date;
+        id: string;
+    }>;
+    showClass(): boolean;
+    commitCheckboxState: boolean;
+    private _subscriptions;
+    constructor(_transactionService: TransactionService, _transactionEventService: TransactionEventService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    handleCommitEvent(value: {
+        checkboxValue: boolean;
+        date: Date;
+        id: string;
+    }): void;
+}

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/_layout.scss

@@ -8,8 +8,8 @@
     }
 
     .details-header {
-      font-size: 1.2em;
-      margin-bottom: 10px;
+      font-size: $tp-co-transaction-receiving-goods-details-title-font-size;
+      margin: $tp-co-transaction-receiving-goods-details-title-margin;
     }
 
     .columns-wrapper {
@@ -27,12 +27,12 @@
 
       .divider {
         border-left: 1px solid #dce4ea;
-        margin-bottom: 25px
+        margin: $tp-co-transaction-receiving-goods-details-input-margin;
       }
     }
 
     .details-input {
-      margin-bottom: 25px
+      margin: $tp-co-transaction-receiving-goods-details-input-margin;
     }
   }
 }

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

@@ -1 +1,3 @@
-$tp-transaction: $tp-font-family !default;
+$tp-co-transaction-receiving-goods-details-title-font-size: 1.2em !default;
+$tp-co-transaction-receiving-goods-details-title-margin: 0 0 10px 0 !default;
+$tp-co-transaction-receiving-goods-details-input-margin: 0 0 25px 0 !default;

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

@@ -1,6 +1,32 @@
+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";
+import { ReceiveGoodsForPurchaseOrderRequest } from "@colijnit/transactionapi/build/model/receive-goods-for-purchase-order-request.bo";
+import { TransactionService } from "../../service/transaction.service";
+import { ArticleService } from "../../service/article.service";
 export declare class TransactionReceivingGoodsDetailsComponent {
-    transactionLineInfo: TransactionLineInfo;
+    private _formMaster;
+    private _service;
+    private _articleService;
+    set amountLeftToReceive(value: number);
+    transactionId: number;
+    set transactionLine(value: TransactionLineInfo);
+    reloadReceivingGoodsHistory: EventEmitter<void>;
     showClass(): boolean;
-    valuePlaceholder: any;
+    get amountLeftToReceive(): number;
+    get transactionLine(): TransactionLineInfo;
+    receiptDetails: PurchaseOrderLineReceiptDetails;
+    request: ReceiveGoodsForPurchaseOrderRequest;
+    saveButtonDisabled: boolean;
+    locations: string[];
+    locationDropdownFields: {};
+    private _transactionLine;
+    private _amountLeftToReceive;
+    constructor(_formMaster: FormMasterService, _service: TransactionService, _articleService: ArticleService);
+    submit(): boolean;
+    locationRequired(): boolean;
+    handleSaveDetailsEdit(): Promise<void>;
+    handleCancelDetailsEdit(): void;
+    handleDropDownSelected(warehouseNr: number): Promise<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-receiving-goods-history/transaction-receiving-goods-history.component.d.ts

@@ -1,5 +1,18 @@
+import { EventEmitter } from "@angular/core";
 import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { TransactionService } from "../../service/transaction.service";
+import { GoodsReceiptHistory } from "@colijnit/transactionapi/build/model/goods-receipt-history.bo";
+import { DatePipe } from "@angular/common";
 export declare class TransactionReceivingGoodsHistoryComponent {
-    transactionLines: TransactionLineInfo[];
+    private _service;
+    private _datePipe;
+    set goodsReceiptHistory(value: GoodsReceiptHistory[]);
+    transactionLine: TransactionLineInfo;
+    transactionId: number;
+    reloadReceivingGoodsHistory: EventEmitter<void>;
+    get goodsReceiptHistory(): GoodsReceiptHistory[];
+    private _goodsReceiptHistory;
+    constructor(_service: TransactionService, _datePipe: DatePipe);
     showClass(): boolean;
+    handleDeleteSelectedRow(row: GoodsReceiptHistory): Promise<void>;
 }

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

@@ -0,0 +1,23 @@
+import { FilterItemViewmodel } from "../../../model/filter-item.viewmodel";
+import { TransactionService } from "../../../service/transaction.service";
+import { TransactionSearchService } from "./transaction-search.service";
+export declare class FilterRequestService {
+    searchService: TransactionSearchService;
+    private _transactionService;
+    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;
+    handleCheckboxValueChangeForString(value: boolean, modelName: string): void;
+    handleCheckboxValueChangeForNumber(value: boolean, modelName: string): void;
+    handleDateRangeChange(dates: Date[], modelName: string): void;
+    getDateFromFilterRequestRange(filterRequestRange: string, index: number): Date;
+    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

@@ -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,41 @@
+$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;
+
+$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";

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

@@ -0,0 +1,21 @@
+import { ElementRef, EventEmitter } from "@angular/core";
+import { Icon } from "../../../enum/icon.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;
+    filterItems: ElementRef;
+    orderFilter: ElementRef;
+    logisticsFilter: ElementRef;
+    articleFilter: ElementRef;
+    closeButtonClick: EventEmitter<void>;
+    resetFilterClick: EventEmitter<void>;
+    showClass(): boolean;
+    filterCategories: string[];
+    constructor(iconCacheService: IconCacheService, searchService: TransactionSearchService);
+    handleCategoryClick(cat: string): void;
+    onCloseButtonClick(): void;
+    resetFilters(): void;
+}

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

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

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

@@ -0,0 +1,23 @@
+@import "../../../../style/mixin";
+
+@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;
+    .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;
+      &.active {
+        border-width: $tp-co-transaction-search-filter-categories-active-border-width;
+        border-style: $tp-co-transaction-search-filter-categories-active-border-style;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+@import "../../../../style/mixin";
+
+@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;
+      &.active {
+        color: $tp-co-transaction-search-filter-categories-active-color;
+        border-color: $tp-co-transaction-search-filter-categories-active-color;
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,10 @@
+import { EventEmitter } from "@angular/core";
+export declare class TransactionFilterCategoriesComponent {
+    set categories(value: string[]);
+    get categories(): string[];
+    categoryClick: EventEmitter<string>;
+    showClass(): boolean;
+    activeCategory: string;
+    private _categories;
+    handleCategoryClick(category: string): void;
+}

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

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

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

@@ -0,0 +1,13 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-filter-content-article-layout') {
+  .co-transaction-filter-content-article {
+    width: $tp-co-transaction-search-filter-width;
+
+    .filter-button-container {
+      padding: $tp-co-transaction-search-filter-button-padding;
+      width: $tp-co-transaction-search-filter-button-width;
+    }
+
+  }
+}

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

@@ -0,0 +1 @@
+

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

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

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

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