@colijnit/transaction 12.1.8 → 12.1.9

package/lib/component/relation-address/style/_layout.scss

@@ -4,6 +4,11 @@
   .co-relation-address {
     font-family: $tp-relation-address-font-family;
     font-size: $tp-relation-address-font-size;
+    co-form {
+      display: flex;
+      flex-direction: column;
+      row-gap: $tp-relation-address-default-padding;
+    }
     .relation-address-data-row {
       display: flex;
       flex-direction: row;

package/lib/component/relation-address-tile/relation-address-tile.component.d.ts

@@ -7,6 +7,7 @@ export declare class RelationAddressTileComponent {
     address: Address;
     actAsAddTile: boolean;
     selected: boolean;
+    selectedChange: EventEmitter<boolean>;
     addAddressClicked: EventEmitter<void>;
     editAddressClicked: EventEmitter<Address>;
     handleEditAddressClick(event: MouseEvent): void;

package/lib/component/relation-address-tile/style/_layout.scss

@@ -4,27 +4,6 @@
   .co-relation-address-tile {
     display: flex;
     position: relative;
-    .relation-address, .relation-address-create {
-      display: flex;
-      flex-direction: row;
-      column-gap: 10px;
-      border: $tp-relation-address-tile-border;
-      border-radius: $tp-relation-address-tile-border-radius;
-      padding: $tp-relation-address-tile-padding;
-      width: 200px;
-      height: 100px;
-    }
-    .relation-select-wrapper {
-      display: flex;
-      flex-direction: column;
-      .co-radio-button {
-        border: none;
-        height: $tp-relation-address-tile-icon-width;
-        width: $tp-relation-address-tile-icon-width;
-        padding: 0;
-        align-items: baseline;
-      }
-    }
     .relation-content-wrapper {
       display: flex;
       flex-direction: column;

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

@@ -5,10 +5,11 @@ $tp-relation-address-tile-padding: 10px !default;
 $tp-relation-address-tile-border-radius: 5px !default;
 $tp-relation-address-tile-min-width: 200px !default;
 $tp-relation-address-tile-min-height: 100px !default;
-$tp-relation-address-tile-background-color: #f1fcff !default;
 $tp-relation-address-tile-icon-width: 20px !default;
+$tp-relation-address-tile-background-color: white !default;
 $tp-relation-address-tile-border: 2px solid !default;
 $tp-relation-address-tile-border-color: $tp-color-border !default;
+$tp-relation-address-tile-selected-background-color: #f1fcff !default;
 $tp-relation-address-tile-selected-border-color: #0084de !default;
 $tp-relation-address-tile-edit-background-color: $tp-color-border !default;
 $tp-relation-address-tile-edit-icon-color: $tp-color-action !default;

package/lib/component/relation-address-tile/style/_theme.scss

@@ -2,17 +2,6 @@
 
 @include export-module('co-relation-address-tile-theme') {
   .co-relation-address-tile {
-    .relation-address, .relation-address-create {
-      background-color: white;
-      border-color: $tp-relation-address-tile-border-color;
-    }
-    .relation-select-wrapper {
-      .co-radio-button {
-        label:before {
-          border-color: $tp-relation-address-tile-border-color;
-        }
-      }
-    }
     .relation-address-create, .relation-address-change {
       .relation-address-icon {
         [fill] {
@@ -21,25 +10,6 @@
       }
       color: $tp-relation-address-tile-selected-border-color;
     }
-    &.selected {
-      .relation-address {
-        background-color: $tp-relation-address-tile-background-color;
-        border-color: $tp-relation-address-tile-selected-border-color;
-        .relation-select-wrapper {
-          .co-radio-button {
-            label:before {
-              border-color: $tp-relation-address-tile-selected-border-color;
-              background-color: $tp-relation-address-tile-selected-border-color;
-            }
-
-            label:after {
-              color: $tp-relation-address-tile-selected-border-color;
-              background-color: white;
-            }
-          }
-        }
-      }
-    }
     .relation-address-edit {
       .relation-address-edit-icon {
         [fill] {

package/lib/component/relation-address-tile/style/material.scss

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

package/lib/component/sell-order/sell-order-side-panel/sell-order-side-panel.component.scss

@@ -0,0 +1,49 @@
+@import "../../../style/variables";
+
+:host {
+
+  co-collapsible {
+    padding: 30px 15px 0 15px;
+  }
+
+  .double-input-wrapper {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+
+    co-input-text {
+      padding-right: 10px;
+      width: 50%;
+    }
+
+    co-input-combo-box {
+      width: 50%;
+    }
+  }
+
+  .input-wrapper {
+    padding-right: 10px;
+  }
+
+  .collapsible-content-wrapper {
+    padding-bottom: 20px;
+  }
+
+  ::ng-deep ejs-combobox {
+    padding-right: 10px;
+  }
+
+  .side-panel-header-wrapper {
+    padding: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: $tp-color-grey;
+    margin-bottom: 20px;
+  }
+
+  .side-panel-header {
+    font-size: 1.2em;
+    font-family: $tp-font-family;
+  }
+}

package/lib/component/sell-order/sell-order.component.scss

@@ -0,0 +1,15 @@
+@import "../../style/variables";
+
+:host {
+
+  .sell-order-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .side-panel-wrapper {
+      width: 30%;
+      height: 100%;
+    }
+  }
+}

package/lib/component/seller-information/seller-information.component.d.ts

@@ -0,0 +1,13 @@
+import { TransactionService } from "../../service/transaction.service";
+import { RelationListObject } from "@colijnit/transactionapi/build/model/relation-list-object.bo";
+export declare class SellerInformationComponent {
+    private _service;
+    set relationId(value: number);
+    get relationId(): number;
+    relation: RelationListObject;
+    showClass(): boolean;
+    image: string;
+    private _relationId;
+    constructor(_service: TransactionService);
+    private _getRelation;
+}

package/lib/component/seller-information/seller-information.module.d.ts

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

package/lib/component/seller-information/style/_layout.scss

@@ -0,0 +1,21 @@
+@import "../../../style/mixin";
+
+@include export-module('co-seller-information-layout') {
+  .co-seller-information {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: $tp-co-seller-information-font-family;
+    height: $tp-co-seller-information-image-size;
+    width: $tp-co-seller-information-image-size;
+    border-radius: 50%;
+    background: #0084de; // todo make dynamic
+    svg {
+      height: 100%;
+      width: 100%;
+      text {
+        fill: white;
+      }
+    }
+  }
+}

package/lib/component/seller-information/style/_material-definition.scss

@@ -0,0 +1,2 @@
+$tp-co-seller-information-font-family: $tp-font-family !default;
+$tp-co-seller-information-image-size: 50px !default;

package/lib/component/seller-information/style/_theme.scss

@@ -0,0 +1,7 @@
+@import "../../../style/mixin";
+@import "./material-definition";
+
+@include export-module('co-seller-information-theme') {
+  .co-seller-information {
+  }
+}

package/lib/component/seller-information/style/material.scss

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

package/lib/component/shopping-cart-preview/shopping-cart-preview.component.d.ts

@@ -4,6 +4,8 @@ import { Icon } from "../../enum/icon.enum";
 export declare class ShoppingCartPreviewComponent {
     service: TransactionService;
     readonly icons: typeof Icon;
+    showCheckoutButton: boolean;
+    withoutBorder: boolean;
     checkout: EventEmitter<void>;
     editCartClick: EventEmitter<void>;
     showClass(): boolean;

package/lib/component/shopping-cart-preview/style/_layout.scss

@@ -6,8 +6,12 @@
     font-family: $tp-shopping-cart-preview-font-family;
     font-size: $tp-shopping-cart-preview-font-size;
     padding: $tp-shopping-cart-preview-padding;
-    border: $tp-shopping-cart-preview-border;
-    box-shadow: $tp-shopping-cart-preview-box-shadow;
+    border: none;
+    box-shadow: none;
+    &:not(.borderless) {
+      border: $tp-shopping-cart-preview-border;
+      box-shadow: $tp-shopping-cart-preview-box-shadow;
+    }
     .cart-header {
       font-family: $tp-shopping-cart-preview-header-font-family;
       font-size: $tp-shopping-cart-preview-header-font-size;

package/lib/component/shopping-cart-preview/style/_material-definition.scss

@@ -1,6 +1,6 @@
 $tp-shopping-cart-preview-font-family: $tp-font-family !default;
 $tp-shopping-cart-preview-font-size: $tp-font-size !default;
-$tp-shopping-cart-preview-background-color: white !default;
+$tp-shopping-cart-preview-background-color: transparent !default;
 $tp-shopping-cart-preview-font-color: $tp-color-dark !default;
 $tp-shopping-cart-preview-padding: 10px !default;
 $tp-shopping-cart-preview-border: none !default;

package/lib/component/stepper/component/stepper-step.component.d.ts

@@ -4,8 +4,8 @@ export declare class StepperStepComponent {
     label: string;
     set completed(value: boolean);
     get completed(): boolean;
-    validateStep: EventEmitter<void>;
     show: boolean;
+    validateStep: EventEmitter<void>;
     showClass(): boolean;
     private _completed;
     onComplete: (complete: boolean) => void;

package/lib/component/stepper/stepper.component.d.ts

@@ -1,12 +1,15 @@
-import { AfterContentInit, EventEmitter } from "@angular/core";
+import { EventEmitter } from "@angular/core";
 import { StepperStepComponent } from "./component/stepper-step.component";
+import { Icon } from "../../enum/icon.enum";
 export interface steps {
     index: number;
     description: string;
     complete: boolean;
 }
-export declare class StepperComponent implements AfterContentInit {
+export declare class StepperComponent {
+    readonly icons: typeof Icon;
     set content(children: any);
+    set child(child: any);
     finishButtonLabel: string;
     finishStep: EventEmitter<void>;
     showClass(): boolean;
@@ -15,12 +18,14 @@ export declare class StepperComponent implements AfterContentInit {
     get canPrevious(): boolean;
     get canNext(): boolean;
     get finished(): boolean;
-    activeStep: number;
+    set activeStep(value: number);
+    get activeStep(): number;
     firstStep: number;
     lastStep: number;
-    steps: steps[];
+    truckPosition: number;
     private _stepChildren;
-    ngAfterContentInit(): void;
+    private _activeStep;
+    private _deliveryTruckClientRect;
     goto(idx: number): void;
     gotoPrevious(): void;
     gotoNext(): void;

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

@@ -1,5 +1,7 @@
 @import "../../../style/mixin";
 
+$index-origin: calc((#{$tp-co-stepper-step-index-size} / 2) + (#{$tp-co-stepper-step-index-border-width} / 2));
+
 @include export-module('co-stepper-layout') {
   .co-stepper {
     font-family: $tp-co-stepper-font-family;
@@ -7,24 +9,38 @@
     display: flex;
     flex-direction: column;
     width: 100%;
+    box-sizing: initial;
     .co-stepper-content {
       display: flex;
       flex-direction: row;
+      position: relative;
     }
     .stepper-step {
+      position: relative;
       flex: 1;
       display: flex;
       flex-direction: column;
       align-items: center;
-      &:not(:last-child):after {
+      &:not(.last):after {
+        content: "";
+        position: absolute;
+        top: calc(100% - (#{$index-origin} + 2px));
+        width: calc(100% - #{$tp-co-stepper-step-index-size} - #{$tp-co-stepper-step-index-border-width});
+        left: calc(50% + #{$index-origin});
+        height: 2px;
+        order: -1;
+      }
+      &:not(.last):before {
         content: "";
-        position: relative;
-        top: calc(#{$tp-co-stepper-step-index-size} / 2);
-        width: calc(100% - #{$tp-co-stepper-step-index-size} - (5px * 2));
-        left: 50%;
+        position: absolute;
+        top: calc(100% - (#{$index-origin} + 2px));
+        width: 0;
+        max-width: calc(100% - #{$tp-co-stepper-step-index-size} - #{$tp-co-stepper-step-index-border-width});
+        left: calc(50% + #{$index-origin});
         height: 2px;
-        background-color: $tp-co-stepper-step-complete-background-color;
         order: -1;
+        z-index: 1;
+        transition: all .2s;
       }
       .index {
         cursor: pointer;
@@ -35,35 +51,51 @@
         align-items: center;
         justify-content: center;
         border-radius: 50%;
-        background-color: $tp-co-stepper-step-incomplete-background-color;
-        color: $tp-co-stepper-step-incomplete-color;
+        border-style: solid;
+        border-width: $tp-co-stepper-step-index-border-width;
+        box-sizing: initial;
       }
       .description {
-        margin-top: 15px;
-        color: $tp-co-stepper-step-incomplete-background-color;
+        margin-bottom: 15px;
+        font-weight: $tp-co-stepper-step-incomplete-description-font-weight;
       }
       &.active {
-        .index {
-          background-color: $tp-co-stepper-step-active-background-color;
-          color: $tp-co-stepper-step-active-color;
+        &:not(.last):before {
+          width: 50%;
         }
         .description {
-          color: $tp-co-stepper-step-active-background-color;
+          font-weight: $tp-co-stepper-step-description-font-weight;
+        }
+        .delivery-truck {
+          opacity: 1;
+          left: calc(100% - #{$tp-co-stepper-step-delivery-truck-size / 2});
         }
       }
       &.complete {
-        .index {
-          background-color: $tp-co-stepper-step-complete-background-color;
-          color: $tp-co-stepper-step-complete-color;
+        &:not(.last):before {
+          width: 100%;
         }
         .description {
-          color: $tp-co-stepper-step-complete-background-color;
+          font-weight: $tp-co-stepper-step-description-font-weight;
         }
       }
     }
+    .delivery-truck {
+      position: absolute;
+      width: $tp-co-stepper-step-delivery-truck-size;
+      height: $tp-co-stepper-step-delivery-truck-size;
+      top: calc(100% - (#{$index-origin} + 2px + #{$tp-co-stepper-step-delivery-truck-size / 2}));
+      //opacity: 0;
+      //left: 50%;
+      transform: translateX(-#{$tp-co-stepper-step-delivery-truck-size / 2});
+      transition: all .2s;
+      z-index: 2;
+    }
     .co-stepper-step {
-      display: block;
-      padding: $tp-co-stepper-step-padding;
+      display: none;
+      &.show {
+        display: flex;
+      }
     }
     .stepper-button-wrapper {
       display: flex;

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

@@ -1,11 +1,18 @@
 $tp-co-stepper-font-family: $tp-font-family !default;
 $tp-co-stepper-font-size: $tp-font-size !default;
-$tp-co-stepper-step-index-size: 30px !default;
+$tp-co-stepper-step-index-size: 11px !default;
+$tp-co-stepper-step-index-border-width: 3px !default;
 $tp-co-stepper-step-index-font-size: $tp-font-size-big !default;
 $tp-co-stepper-step-padding: 30px !default;
 $tp-co-stepper-step-complete-color: white !default;
-$tp-co-stepper-step-complete-background-color: $tp-color-active !default;
+$tp-co-stepper-step-complete-background-color: $tp-color-action !default;
 $tp-co-stepper-step-incomplete-background-color: $tp-color-action-light !default;
 $tp-co-stepper-step-incomplete-color: $tp-color-dark !default;
 $tp-co-stepper-step-active-background-color: $tp-color-action !default;
 $tp-co-stepper-step-active-color: white !default;
+$tp-co-stepper-step-delivery-truck-size: 45px !default;
+$tp-co-stepper-step-description-font-size: $tp-font-size !default;
+$tp-co-stepper-step-description-color: black !default;
+$tp-co-stepper-step-description-font-weight: bold !default;
+$tp-co-stepper-step-incomplete-description-color: rgba(0, 0, 0, 0.3) !default;
+$tp-co-stepper-step-incomplete-description-font-weight: normal !default;

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

@@ -3,5 +3,41 @@
 
 @include export-module('co-stepper-theme') {
   .co-stepper {
+    .stepper-step {
+      &:not(.last):after {
+        background-color: $tp-co-stepper-step-incomplete-background-color;
+      }
+      &:not(.last):before {
+        background-color: $tp-co-stepper-step-complete-background-color;
+      }
+      .index {
+        //background-color: $tp-co-stepper-step-incomplete-background-color;
+        color: $tp-co-stepper-step-incomplete-background-color;
+        border-color: $tp-co-stepper-step-incomplete-background-color;
+      }
+      .description {
+        color: $tp-co-stepper-step-incomplete-description-color;
+      }
+      &.active {
+        .index {
+          background-color: $tp-co-stepper-step-active-background-color;
+          color: $tp-co-stepper-step-active-color;
+          border-color: $tp-co-stepper-step-active-background-color;
+        }
+        .description {
+          color: $tp-co-stepper-step-description-color;
+        }
+      }
+      &.complete {
+        .index {
+          background-color: $tp-co-stepper-step-complete-background-color;
+          color: $tp-co-stepper-step-complete-color;
+          border-color: $tp-co-stepper-step-complete-background-color;
+        }
+        .description {
+          color: $tp-co-stepper-step-description-color;
+        }
+      }
+    }
   }
 }

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

@@ -0,0 +1,36 @@
+@import "../../../style/mixin";
+
+@include export-module('co-tile-layout') {
+  .co-tile {
+    display: flex;
+    position: relative;
+    .co-tile-wrapper {
+      display: flex;
+      flex-direction: row;
+      position: relative;
+      column-gap: 10px;
+      border: $tp-relation-address-tile-border;
+      border-radius: $tp-relation-address-tile-border-radius;
+      padding: $tp-relation-address-tile-padding;
+      min-width: $tp-tile-min-width;
+      min-height: $tp-tile-min-height;
+    }
+    .co-tile-select-wrapper {
+      position: absolute;
+      .co-radio-button {
+        border: none;
+        height: $tp-relation-address-tile-icon-width;
+        width: $tp-relation-address-tile-icon-width;
+        padding: 0;
+        align-items: baseline;
+      }
+    }
+    .co-tile-content-wrapper {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+$tp-tile-font-family: $tp-font-family !default;
+$tp-tile-font-size: $tp-font-size !default;
+$tp-tile-row-gap: 3px;
+$tp-tile-padding: 10px !default;
+$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-border: 2px solid !default;
+$tp-tile-border-color: $tp-color-border !default;
+$tp-tile-selected-background-color: #f1fcff !default;
+$tp-tile-selected-border-color: #0084de !default;
+$tp-tile-edit-background-color: $tp-color-border !default;
+$tp-tile-edit-icon-color: $tp-color-action !default;
+$tp-tile-edit-icon-width: 30px !default;

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

@@ -0,0 +1,36 @@
+@import "../../../style/mixin";
+
+@include export-module('co-tile-theme') {
+  .co-tile {
+    .co-tile-wrapper {
+      background-color: $tp-tile-background-color;
+      border-color: $tp-tile-border-color;
+    }
+    .co-tile-select-wrapper {
+      .co-radio-button {
+        label:before {
+          border-color: $tp-tile-border-color;
+        }
+      }
+    }
+    &.selected {
+      .co-tile-wrapper {
+        background-color: $tp-tile-selected-background-color;
+        border-color: $tp-tile-selected-border-color;
+        .co-tile-select-wrapper {
+          .co-radio-button {
+            label:before {
+              border-color: $tp-tile-selected-border-color;
+              background-color: $tp-tile-selected-border-color;
+            }
+
+            label:after {
+              color: $tp-tile-selected-border-color;
+              background-color: white;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

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

package/lib/component/tile/tile.component.d.ts

@@ -0,0 +1,6 @@
+import { EventEmitter } from "@angular/core";
+export declare class TileComponent {
+    selected: boolean;
+    selectedChange: EventEmitter<boolean>;
+    showClass(): boolean;
+}

package/lib/component/tile/tile.module.d.ts

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

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

@@ -32,5 +32,10 @@
         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;
+      }
+    }
   }
 }

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

@@ -6,3 +6,4 @@
 @import "../../core/image-display/style/material";
 @import "../../shared/transaction-article-text/style/material";
 @import "../../shared/transaction-article-text-overview/style/material";
+@import "../../transaction-line-side-panel/style/material";

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from "@angular/core";
 import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
 import { StockStatus } from "@colijnit/transactionapi/build/enum/refcode/stock-status.enum";
 import { TransactionService } from "../../service/transaction.service";
@@ -16,6 +17,7 @@ export declare class TransactionLineComponent {
     preview: boolean;
     set line(value: TransactionLineInfo);
     get line(): TransactionLineInfo;
+    waitingForUserAction: EventEmitter<boolean>;
     isText: boolean;
     isArticle: boolean;
     isSelected: boolean;
@@ -28,6 +30,7 @@ export declare class TransactionLineComponent {
     showTransactionArticleTextOverview: boolean;
     articleTextHeader: string;
     textToEdit: string;
+    showSidePanel: boolean;
     private _line;
     constructor(service: TransactionService, iconCacheService: IconCacheService, _dialogService: DialogService, _dictionaryService: DictionaryService);
     changeLineAmount(amount: number): void;
@@ -43,4 +46,6 @@ export declare class TransactionLineComponent {
     private _hideArticleTextDialog;
     private _showArticleTextOverviewDialog;
     private _hideArticleTextOverviewDialog;
+    handleShowSidePanel(event: MouseEvent): void;
+    handleCloseSidePanel(event: MouseEvent): void;
 }