@colijnit/transaction 12.1.126 → 12.1.128

package/lib/component/add-product/add-product.component.d.ts

@@ -1,15 +1,12 @@
-import { EventEmitter } from "@angular/core";
-import { ArticleExtended } from "@colijnit/articleapi/build/model/article-extended.bo";
-import { Icon } from "../../enum/icon.enum";
-import { IconCacheService } from "../../service/icon-cache.service";
-import { TransactionService } from "../../service/transaction.service";
+import { ArticleExtended } from '@colijnit/articleapi/build/model/article-extended.bo';
+import { Icon } from '../../enum/icon.enum';
+import { IconCacheService } from '../../service/icon-cache.service';
+import { TransactionService } from '../../service/transaction.service';
 import { SafeHtml } from '@angular/platform-browser';
 export declare class AddProductComponent {
     iconService: IconCacheService;
     private _transactionService;
     readonly icons: typeof Icon;
-    addArticle: EventEmitter<string>;
-    returnArticle: EventEmitter<string>;
     showClass(): boolean;
     return: boolean;
     catalogOptions: any;
@@ -20,10 +17,10 @@ export declare class AddProductComponent {
     cartMinIcon: SafeHtml;
     constructor(iconService: IconCacheService, _transactionService: TransactionService);
     handleSearch(text: string): Promise<void>;
+    handleAddArticle(sku: string): Promise<boolean>;
     handleCatalogArticleClick(article: ArticleExtended): Promise<void>;
     showCatalogDialog(): void;
     handleCartIconClick(event: MouseEvent): void;
     handleSearchIconClick(event: MouseEvent): void;
     private _prepareCatalogRequest;
-    private _handleAddArticle;
 }

package/lib/component/checkout/checkout-overview-delivery-edit/checkout-overview-delivery-edit.component.d.ts

@@ -46,20 +46,10 @@ export declare class CheckoutOverviewDeliveryEditComponent implements OnInit {
     dropshipment: boolean;
     get deliveryDate(): Date;
     set deliveryDate(value: Date);
-    get preferredDeliveryDate(): Date;
-    set preferredDeliveryDate(value: Date);
     constructor(_dictionaryService: DictionaryService, _formMasterService: FormMasterService, service: TransactionService, iconService: IconCacheService);
     ngOnInit(): Promise<void>;
     submit(): boolean;
-    handleDeliveryMethodChange(deliveryMethod: DeliveryMethod): Promise<void>;
-    setIndexDeliveryType(idx: number): void;
     selectDeliveryOptionsByDeliveryMethod(deliveryMethod: DeliveryMethod): DeliveryOption[];
-    selectDeliveryMethodById(deliveryMethodId: string): DeliveryMethod;
-    isDeliveryOptionChecked(deliveryOptionItem: DeliveryOption): boolean;
-    changePreferredDeliveryDate2(preferredDateOption: string): void;
-    onMarketingCodeChange(marketingCode: string): void;
-    onChangeLocationCancelClick(): void;
-    handleTransactionDefinitive(definitive: boolean): Promise<void>;
     private calculateDeliveryCosts;
     private calculateAssemblyCosts;
 }

package/lib/component/checkout/checkout-overview-delivery-edit/style/_layout.scss

@@ -1,5 +1,3 @@
-@import "../../../../style/mixin";
-
 @include export-module('co-checkout-overview-delivery-edit-layout') {
   .co-checkout-overview-delivery-edit {
     font-family: $tp-checkout-delivery-font-family;

package/lib/component/checkout/checkout-overview-delivery-edit/style/_theme.scss

@@ -1,6 +1,3 @@
-@import "../../../../style/mixin";
-@import "./material-definition";
-
 @include export-module('co-checkout-overview-delivery-edit-theme') {
   .co-checkout-overview-delivery-edit {
     .checkout-label-column {

package/lib/component/checkout/checkout-overview-delivery-edit/style/material.scss

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

package/lib/component/checkout/checkout-overview-relation-edit/style/_layout.scss

@@ -1,5 +1,3 @@
-@import "../../../../style/mixin";
-
 @include export-module('co-checkout-overview-relation-edit-layout') {
   .co-checkout-overview-relation-edit {
     display: block;

package/lib/component/checkout/checkout-overview-relation-edit/style/_theme.scss

@@ -1,6 +1,3 @@
-@import "../../../../style/mixin";
-@import "./material-definition";
-
 @include export-module('co-checkout-overview-relation-edit-theme') {
   .co-checkout-overview-relation-edit {
     .checkout-label-column {

package/lib/component/checkout/checkout-overview-relation-edit/style/material.scss

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

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

@@ -1,5 +1,3 @@
-@import "../../../style/mixin";
-
 @include export-module('co-checkout-layout') {
   .co-checkout {
     .co-stepper-content-wrapper {

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

@@ -1,6 +1,3 @@
-@import "../../../style/mixin";
-@import "./material-definition";
-
 @include export-module('co-checkout-theme') {
   .co-checkout {
 

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

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

package/lib/component/checkout-simple/checkout-simple-overview-delivery-edit/style/_layout.scss

@@ -0,0 +1,6 @@
+@include export-module('co-checkout-simple-overview-delivery-edit-layout') {
+  .co-checkout-simple-overview-delivery-edit {
+    font-family: $tp-checkout-simple-delivery-font-family;
+    font-size: $tp-checkout-simple-delivery-font-size;
+  }
+}

package/lib/component/checkout-simple/checkout-simple-overview-delivery-edit/style/_material-definition.scss

@@ -0,0 +1,2 @@
+$tp-checkout-simple-delivery-font-family: $tp-font-family !default;
+$tp-checkout-simple-delivery-font-size: $tp-font-size !default;

package/lib/component/checkout-simple/checkout-simple-overview-delivery-edit/style/_theme.scss

@@ -0,0 +1,6 @@
+@include export-module('co-checkout-simple-overview-delivery-edit-theme') {
+  .co-checkout-simple-overview-delivery-edit {
+    .checkout-label-column {
+    }
+  }
+}

package/lib/component/checkout-simple/checkout-simple-overview-delivery-edit/style/material.scss

@@ -0,0 +1,8 @@
+@import "../../../../style/mixin";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../../relation/relation-address-select/style/material";
+@import "../../../relation/relation-address-tile/style/material";
+@import "../../../delivery-type-tile/style/material";
+@import "../../../transaction-header-fields/transaction-header-delivery-options/style/material";

package/lib/component/checkout-simple/checkout-simple-overview-payment/style/_layout.scss

@@ -0,0 +1,47 @@
+@include export-module('co-checkout-overview-payment-layout') {
+  .co-checkout-simple-overview-payment {
+    font-family: $tp-checkout-simple-overview-payment-font-family;
+    font-size: $tp-checkout-simple-overview-payment-font-size;
+    .checkout-overview-section {
+      display: flex;
+      flex-direction: column;
+      border-style: $tp-checkout-simple-overview-payment-section-border-style;
+      border-width: $tp-checkout-simple-overview-payment-section-border-width;
+      margin: $tp-checkout-simple-overview-payment-section-margin;
+      padding: $tp-checkout-simple-overview-payment-section-padding;
+    }
+    .two-column-grid {
+      display: grid;
+      grid-template-columns: 50% 50%;
+    }
+    .overview-address {
+      display: flex;
+      flex-direction: column;
+      margin: $tp-checkout-simple-overview-payment-address-margin;
+      .overview-address-title {
+        font-family: $tp-checkout-simple-overview-payment-address-title-font-family;
+        font-size: $tp-checkout-simple-overview-payment-address-title-font-size;
+        font-weight: $tp-checkout-simple-overview-payment-address-title-font-weight;
+        margin: $tp-checkout-simple-overview-payment-address-title-margin;
+      }
+    }
+    .overview-section-change-link {
+      font-family: $tp-checkout-simple-overview-payment-change-link-font-family;
+      font-size: $tp-checkout-simple-overview-payment-change-link-font-size;
+      font-weight: $tp-checkout-simple-overview-payment-change-link-font-weight;
+      cursor: pointer;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .overview-section-change-icon {
+        height: 20px;
+        width: 20px;
+      }
+    }
+    .overview-row {
+      display: flex;
+      flex-direction: row;
+      column-gap: 5px;
+    }
+  }
+}

package/lib/component/checkout-simple/checkout-simple-overview-payment/style/_material-definition.scss

@@ -0,0 +1,18 @@
+$tp-checkout-simple-overview-payment-font-family: $tp-font-family !default;
+$tp-checkout-simple-overview-payment-font-size: $tp-font-size !default;
+$tp-checkout-simple-overview-payment-font-color: $tp-color-font !default;
+$tp-checkout-simple-overview-payment-section-border-style: solid !default;
+$tp-checkout-simple-overview-payment-section-border-color: $tp-color-border !default;
+$tp-checkout-simple-overview-payment-section-border-width: 0 0 1px 0 !default;
+$tp-checkout-simple-overview-payment-section-margin: 0 0 20px 0 !default;
+$tp-checkout-simple-overview-payment-section-padding: 0 0 10px 0 !default;
+$tp-checkout-simple-overview-payment-address-margin: 10px 0 !default;
+$tp-checkout-simple-overview-payment-address-title-font-family: $tp-font-family !default;
+$tp-checkout-simple-overview-payment-address-title-font-size: $tp-font-size !default;
+$tp-checkout-simple-overview-payment-address-title-font-weight: bold !default;
+$tp-checkout-simple-overview-payment-address-title-font-color: $tp-color-font !default;
+$tp-checkout-simple-overview-payment-address-title-margin: 5px 0 !default;
+$tp-checkout-simple-overview-payment-change-link-font-family: $tp-font-family !default;
+$tp-checkout-simple-overview-payment-change-link-font-size: $tp-font-size !default;
+$tp-checkout-simple-overview-payment-change-link-font-weight: bold !default;
+$tp-checkout-simple-overview-payment-change-link-font-color: $tp-color-action !default;

package/lib/component/checkout-simple/checkout-simple-overview-payment/style/_theme.scss

@@ -0,0 +1,21 @@
+@include export-module('co-checkout-simple-overview-payment-theme') {
+  .co-checkout-simple-overview-payment {
+    color: $tp-checkout-simple-overview-payment-address-title-font-color;
+    .checkout-overview-section {
+      border-color: $tp-checkout-simple-overview-payment-section-border-color;
+    }
+    .overview-address {
+      .overview-address-title {
+        color: $tp-checkout-simple-overview-payment-address-title-font-color;
+      }
+    }
+    .overview-section-change-link {
+      color: $tp-checkout-simple-overview-payment-change-link-font-color;
+      .overview-section-change-icon {
+        [fill] {
+          fill: $tp-checkout-simple-overview-payment-change-link-font-color;
+        }
+      }
+    }
+  }
+}

package/lib/component/checkout-simple/checkout-simple-overview-payment/style/material.scss

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

package/lib/component/checkout-simple/checkout-simple-overview-relation-edit/style/_layout.scss

@@ -0,0 +1,15 @@
+@include export-module('co-checkout-simple-overview-relation-edit-layout') {
+  .co-checkout-simple-overview-relation-edit {
+    display: block;
+    width: 100%;
+    font-family: $tp-checkout-simple-relation-font-family;
+    font-size: $tp-checkout-simple-relation-font-size;
+    .empty-relation-button {
+      cursor: pointer;
+      width: auto;
+      border-style: $tp-checkout-simple-relation-empty-button-border-style;
+      border-width: $tp-checkout-simple-relation-empty-button-border-width;
+      border-radius: $tp-checkout-simple-relation-empty-button-border-radius;
+    }
+  }
+}

package/lib/component/checkout-simple/checkout-simple-overview-relation-edit/style/_material-definition.scss

@@ -0,0 +1,7 @@
+$tp-checkout-simple-relation-font-family: $tp-font-family !default;
+$tp-checkout-simple-relation-font-size: $tp-font-size !default;
+$tp-checkout-simple-relation-empty-button-background-color: transparent !default;
+$tp-checkout-simple-relation-empty-button-border-style: solid !default;
+$tp-checkout-simple-relation-empty-button-border-width: 1px !default;
+$tp-checkout-simple-relation-empty-button-border-radius: $tp-default-border-radius !default;
+$tp-checkout-simple-relation-empty-button-border-color: $tp-color-font !default;

package/lib/component/checkout-simple/checkout-simple-overview-relation-edit/style/_theme.scss

@@ -0,0 +1,10 @@
+@include export-module('co-checkout-simple-overview-relation-edit-theme') {
+  .co-checkout-simple-overview-relation-edit {
+    .checkout-label-column {
+    }
+    .empty-relation-button {
+      background-color: $tp-checkout-simple-relation-empty-button-background-color;
+      border-color: $tp-checkout-simple-relation-empty-button-border-color;
+    }
+  }
+}

package/lib/component/checkout-simple/checkout-simple-overview-relation-edit/style/material.scss

@@ -0,0 +1,9 @@
+@import "../../../../style/mixin";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+$cc-co-carousel-3d-navigate-button-width: 40px;
+@import "../../../relation/relation-address/style/material";
+@import "~@colijnit/corecomponents_v12/lib/components/carousel-3d/style/material";
+@import "~@colijnit/corecomponents_v12/lib/components/drop-down-list/style/material";
+@import "~@colijnit/corecomponents_v12/lib/components/input-checkbox/style/material";

package/lib/component/checkout-simple/style/_layout.scss

@@ -0,0 +1,115 @@
+@include export-module('co-checkout-simple-layout') {
+  .co-checkout-simple {
+    .co-stepper-content-wrapper {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      column-gap: $tp-checkout-simple-column-gap;
+      padding: $tp-checkout-simple-padding;
+    }
+    .co-stepper-step {
+      flex-basis: $tp-checkout-simple-default-width;
+      flex-grow: 1;
+      flex-shrink: 1;
+      max-width: $tp-checkout-simple-max-width;
+    }
+    .co-checkout-right-panel {
+      display: flex;
+      flex-direction: column;
+      row-gap: $tp-checkout-simple-right-panel-row-gap;
+      flex-basis: $tp-checkout-simple-right-panel-width;
+      flex-grow: 1;
+      flex-shrink: 1;
+      max-width: $tp-checkout-simple-max-width;
+    }
+    .co-checkout-right-panel-relation {
+      display: flex;
+      justify-content: flex-end;
+    }
+    .co-checkout-overview-payment {
+      width: 100%;
+    }
+    co-form {
+      flex: 1;
+    }
+    .co-shopping-cart-preview {
+      min-width: 35%;
+    }
+    .checkout-form-wrapper {
+      display: grid;
+      grid-template-columns: minmax(170px, 250px) auto;
+      grid-template-areas: "columnlabel columndata";
+      grid-row-gap: 50px;
+      //display: flex;
+      //flex-direction: column;
+      //row-gap: 50px;
+    }
+    .checkout-section-wrapper {
+      display: flex;
+      flex-direction: row;
+    }
+    .checkout-label-column {
+      font-family: $tp-checkout-simple-label-column-font-family;
+      font-size: $tp-checkout-simple-label-fontsize;
+      display: flex;
+      flex-direction: column;
+      grid-area: columnlabel;
+      grid-column-start: 1;
+      grid-row: auto;
+      align-self: baseline;
+      width: 170px;
+      .label-description {
+        font-size: $tp-checkout-simple-label-description-fontsize;
+        font-weight: $tp-checkout-simple-label-description-fontweight;
+      }
+    }
+    .checkout-data-column {
+      grid-area: columndata;
+      grid-column-start: 2;
+      grid-row: auto;
+      width: 100%;
+      overflow: hidden;
+    }
+    .checkout-data-row {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      column-gap: $tp-checkout-default-padding;
+      margin-bottom: $tp-checkout-simple-row-gap;
+      > :not(.default-width) {
+        flex: 1;
+        width: 100%;
+      }
+    }
+    .collapseable {
+      overflow: hidden;
+    }
+    .two-column-grid {
+      display: grid;
+      grid-template-areas: "firstcolumn secondcolumn";
+      .first-column {
+        grid-area: firstcolumn;
+        grid-row: auto;
+      }
+      .second-column {
+        grid-area: secondcolumn;
+        grid-row: auto;
+      }
+    }
+    .relation-address-new {
+      cursor: pointer;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-weight: bold;
+      .relation-address-icon {
+        height: 20px;
+        width: 20px;
+      }
+    }
+    .overview-delivery-invoice-address {
+      overflow: hidden;
+    }
+
+  }
+}

package/lib/component/checkout-simple/style/_material-definition.scss

@@ -0,0 +1,13 @@
+$tp-checkout-simple-font-family: $tp-font-family !default;
+$tp-checkout-simple-padding: 30px !default;
+$tp-checkout-simple-column-gap: 10px !default;
+$tp-checkout-simple-row-gap: 10px !default;
+$tp-checkout-simple-default-width: 55% !default;
+$tp-checkout-simple-max-width: 80% !default;
+$tp-checkout-simple-right-panel-row-gap: 10px !default;
+$tp-checkout-simple-right-panel-width: 400px !default;
+$tp-checkout-simple-right-panel-width: 50% !default;
+$tp-checkout-simple-label-column-font-family: $tp-font-family;
+$tp-checkout-simple-label-fontsize: 12px !default;
+$tp-checkout-simple-label-description-fontsize: 16px !default;
+$tp-checkout-simple-label-description-fontweight: bold !default;

package/lib/component/checkout-simple/style/_theme.scss

@@ -0,0 +1,7 @@
+@include export-module('co-checkout-simple-theme') {
+  .co-checkout-simple {
+    .co-stepper-content-wrapper {
+      background: var(--stepper-color);
+    }
+  }
+}

package/lib/component/checkout-simple/style/material.scss

@@ -0,0 +1,10 @@
+@import "../../../style/mixin";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../checkout-simple-overview-relation-edit/style/material";
+@import "../checkout-simple-overview-delivery-edit/style/material";
+@import "../checkout-simple-overview-payment/style/material";
+@import "../../stepper/style/material";
+@import "../../avatar/style/material";
+@import "../../payment/style/material";

package/lib/component/core/base/transaction-search-tile-base.component.d.ts

@@ -5,6 +5,7 @@ import { IconCacheService } from "../../../service/icon-cache.service";
 export declare abstract class TransactionSearchTileBaseComponent {
     iconCacheService: IconCacheService;
     readonly icons: typeof Icon;
+    showCheckbox: boolean;
     transaction: TransactionSearchView;
     transactionClick: EventEmitter<TransactionSearchView>;
     showClass(): boolean;

package/lib/component/dialog/dialog-header-search/style/_layout.scss

@@ -2,6 +2,8 @@
 
 @include export-module('co-dialog-header-search-layout') {
   .co-dialog-header-search {
+    display: block;
+    margin: $tp-dialog-header-search-margin;
     .dialog-header-search-title {
       font-family: $tp-dialog-header-search-title-font-family;
       font-size: $tp-dialog-header-search-title-font-size;

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

@@ -3,3 +3,4 @@ $tp-dialog-header-search-title-font-size: $tp-font-size-big !default;
 $tp-dialog-header-search-title-font-weight: bold !default;
 $tp-dialog-header-search-title-margin: 0 0 20px 0 !default;
 $tp-dialog-header-search-input-height: $cc-co-input-search-height !default;
+$tp-dialog-header-search-margin: 0 0 20px 0 !default;

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

@@ -5,11 +5,11 @@
     .co-dialog:not(.is-mobile) .co-dialog-wrapper {
       min-width: $tp-dialog-transaction-line-warehouse-cc-min-width;
     }
-    //.co-transaction-line-checkbox-list .virtual-scroll-container {
-    //  height: $tp-dialog-transaction-line-warehouse-cc-commission-code-height;
-    //}
     .transaction-line-warehouse-cc-section {
       margin: $tp-dialog-transaction-line-warehouse-cc-section-margin;
+      .checkbox-list-wrapper {
+        max-height: $tp-dialog-transaction-line-warehouse-cc-section-max-height;
+      }
     }
     .quantity-number-picker {
       width: $tp-dialog-transaction-line-warehouse-cc-quantity-width;

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

@@ -3,8 +3,9 @@ $tp-dialog-transaction-line-warehouse-cc-font-size: $tp-font-size !default;
 $tp-dialog-transaction-line-warehouse-cc-font-color: $tp-color-font !default;
 $tp-dialog-transaction-line-warehouse-cc-min-width: 500px !default;
 $tp-dialog-transaction-line-warehouse-cc-commission-code-height: 100px !default;
-$tp-dialog-transaction-line-warehouse-cc-quantity-width: 100px !default;
+$tp-dialog-transaction-line-warehouse-cc-quantity-width: 200px !default;
 $tp-dialog-transaction-line-warehouse-cc-section-margin: 20px 0 !default;
+$tp-dialog-transaction-line-warehouse-cc-section-max-height: 150px !default;
 $tp-dialog-transaction-line-warehouse-cc-section-label-margin: 10px 0 !default;
 $tp-dialog-transaction-line-warehouse-cc-section-label-font-size: $tp-font-size !default;
 $tp-dialog-transaction-line-warehouse-cc-section-label-font-color: $tp-color-font !default;

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

@@ -6,11 +6,18 @@
     display: block;
     padding: $tp-transaction-padding;
     .transaction-footer-wrapper {
-      display: flex;
+      display: grid;
+      grid-template-columns: repeat(2, minmax(50%, 1fr));
       flex-direction: row;
-      justify-content: flex-end;
+      //grid-template-areas: 'column1 column2';
       margin: $tp-transaction-totals-margin;
-      .transaction-totals-wrapper {
+      .co-add-product {
+        grid-column: 1/1;
+        justify-self: flex-start;
+      }
+      .co-transaction-totals {
+        grid-column: 2/2;
+        justify-self: flex-end;
         width: 300px;
       }
     }

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

@@ -19,6 +19,7 @@ export declare class TransactionComponent implements OnDestroy {
     private _appRef;
     private _dynamicComponentService;
     private _transactionEventService;
+    readonly categories: typeof TransactionTypeCategory;
     readonly viewModes: typeof ContentViewMode;
     readonly icons: typeof Icon;
     sidePanelComponents: QueryList<TransactionLineSidePanelComponent>;

package/lib/component/transaction-batch-order-picking/fast-date-range-picker/fast-date-range-picker.component.d.ts

@@ -0,0 +1,13 @@
+import { EventEmitter, OnInit } from "@angular/core";
+import { DatePeriod } from "../../../enum/date-period.enum";
+export declare class FastDateRangePickerComponent implements OnInit {
+    datePeriods: DatePeriod[];
+    dateRangeSelected: EventEmitter<Date[]>;
+    dateRangeMap: Map<DatePeriod, [Date, Date]>;
+    activeDateRange: [Date, Date];
+    showClass(): boolean;
+    ngOnInit(): void;
+    private _initDateMap;
+    dateRangeClicked(range: [Date, Date]): void;
+    asIsOrder(): number;
+}

package/lib/component/transaction-batch-order-picking/fast-date-range-picker/fast-date-range-picker.module.d.ts

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

package/lib/component/transaction-batch-order-picking/fast-date-range-picker/style/_layout.scss

@@ -0,0 +1,28 @@
+@include export-module('cc-fast-date-range-picker-layout') {
+  .co-fast-date-range-picker {
+
+    .fast-date-range-wrapper {
+      display: flex;
+      flex-direction: row;
+
+      .date-selection-button {
+        padding: 3px 8px;
+        background: white;
+        border-radius: 19px;
+        margin: 3px;
+        cursor: pointer;
+        display: none;
+
+        &.selected {
+          background-color: #ff4141;
+          color: white;
+          font-weight: bold;
+        }
+
+        &.visible {
+          display: block;
+        }
+      }
+    }
+  }
+}

package/lib/component/transaction-batch-order-picking/fast-date-range-picker/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('cc-fast-date-range-picker-theme') {
+  .co-fast-date-range-picker {
+  }
+}

package/lib/component/transaction-batch-order-picking/fast-date-range-picker/style/material.scss

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

package/lib/component/transaction-batch-order-picking/style/_layout.scss

@@ -0,0 +1,5 @@
+@include export-module('cc-transaction-batch-order-picking-layout') {
+  .co-transaction-batch-order-picking {
+
+  }
+}

package/lib/component/transaction-batch-order-picking/style/_theme.scss

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

package/lib/component/transaction-batch-order-picking/style/material.scss

@@ -0,0 +1,5 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";
+@import "../fast-date-range-picker/style/material";

package/lib/component/transaction-batch-order-picking/transaction-batch-order-picking.component.d.ts

@@ -0,0 +1,5 @@
+import { DatePeriod } from "../../enum/date-period.enum";
+export declare class TransactionBatchOrderPickingComponent {
+    readonly datePeriod: typeof DatePeriod;
+    showClass(): boolean;
+}

package/lib/component/transaction-batch-order-picking/transaction-batch-order-picking.module.d.ts

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