@colijnit/transaction 12.1.5 → 12.1.8

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

@@ -0,0 +1,13 @@
+import { EventEmitter } from "@angular/core";
+import { Address } from "@colijnit/transactionapi/build/model/address.bo";
+import { Icon } from "../../enum/icon.enum";
+export declare class RelationAddressTileComponent {
+    readonly icons: typeof Icon;
+    showClass(): boolean;
+    address: Address;
+    actAsAddTile: boolean;
+    selected: boolean;
+    addAddressClicked: EventEmitter<void>;
+    editAddressClicked: EventEmitter<Address>;
+    handleEditAddressClick(event: MouseEvent): void;
+}

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

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

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

@@ -0,0 +1,63 @@
+@import "../../../style/mixin";
+
+@include export-module('co-relation-address-tile-layout') {
+  .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;
+      row-gap: $tp-relation-address-tile-row-gap;
+    }
+    .relation-address-type {
+      font-weight: bold;
+    }
+    .relation-address-create, .relation-address-change {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-weight: bold;
+      .relation-address-icon {
+        height: $tp-relation-address-tile-icon-width;
+        width: $tp-relation-address-tile-icon-width;
+      }
+    }
+    .relation-address-create {
+      justify-content: center;
+    }
+    .relation-address-edit {
+      position: absolute;
+      top: 0;
+      right: 0;
+      opacity: 0.5;
+      .relation-address-edit-icon {
+        height: $tp-relation-address-tile-edit-icon-width;
+        width: $tp-relation-address-tile-edit-icon-width;
+      }
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+$tp-relation-address-tile-font-family: $tp-font-family !default;
+$tp-relation-address-tile-font-size: $tp-font-size !default;
+$tp-relation-address-tile-row-gap: 3px;
+$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-border: 2px solid !default;
+$tp-relation-address-tile-border-color: $tp-color-border !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;
+$tp-relation-address-tile-edit-icon-width: 30px !default;

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

@@ -0,0 +1,51 @@
+@import "../../../style/mixin";
+
+@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] {
+          fill: $tp-relation-address-tile-selected-border-color;
+        }
+      }
+      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] {
+          fill: $tp-relation-address-tile-edit-icon-color;
+        }
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,154 @@
+@import "../../style/variables";
+//@import "src/style/styles";
+/*
+
+:host {
+  %transaction-tab {
+    @extend %flex-column;
+    @extend %full-width;
+    @extend %overflow-hidden;
+    padding-bottom: 60px;
+  }
+
+  @extend %transaction-tab;
+  .page-wrapper & {
+    padding: 20px;
+    margin-bottom: 60px;
+  }
+  transaction-order-totals {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  .transaction-totals-show {
+    padding: 20px;
+  }
+
+  .transaction-totals-hide {
+    position: relative;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+::ng-deep #transaction_planning_agenda {
+  //transform: scale(1) translate(-50%, 0) !important;
+  top: 160px !important;
+  width: calc(100vw - 80px) !important;
+  .popup-card-title {
+    padding: 10px 20px;
+    background: $tp-color-active-light;
+    color: white;
+    .header-wrapper {
+      align-items: center !important;
+    }
+    .separator {
+      border-color: white !important;
+    }
+    .header {
+      font-size: 15px;
+      font-weight: normal;
+    }
+    .sub-header {
+      font-size: 18px;
+      color: white !important;
+      font-weight: bold !important;
+    }
+    button-select {
+      icon {
+        [fill] {
+          fill: white;
+        }
+      }
+    }
+  }
+  .popup-card-content {
+    overflow: hidden;
+  }
+  @include screen-xs() {
+    width: 100vw !important;
+    .popup-card-content {
+      padding: 0;
+    }
+  }
+
+}
+
+$block_content_height: 60px;
+$color-border: #dedede;
+.column-separator {
+  padding-right: 25px;
+  border-right: 1px solid #0000001c;
+}
+
+.floating-icon-wrapper {
+  position: fixed;
+  bottom: 50px;
+  right: 50px;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  background: $tp-color-dark-accent;
+  height: 50px;
+  width: 50px;
+  opacity: 0.5;
+  transition: opacity 0.4s ease-in-out;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.6);
+  -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.6);
+  -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.6);
+  cursor: pointer;
+  &:hover {
+    opacity: 1;
+    transition: opacity 0.4s ease-in-out;
+  }
+  ::ng-deep icon {
+    height: 44px !important;
+    width: 44px !important;
+    color: white !important;
+    flex-shrink: 0;
+  }
+}
+.transaction-wrapper {
+  padding: 0 20px;
+}
+
+.view-mode-buttons co-button {
+  padding: 0;
+}
+
+.transaction-view {
+  display: flex;
+  margin-top: 10px;
+  justify-content: stretch;
+
+  .view-mode-buttons {
+    display: flex;
+    flex-direction: row;
+    @extend %margin-left-medium;
+    button-select {
+      ::ng-deep button-colijn {
+        border-radius: 0;
+      }
+      &:first-child {
+        margin-right: 5px;
+        ::ng-deep button-colijn {
+          @include border-left-radius(3px);
+          @include border-right-radius(3px);
+        }
+      }
+
+      &:nth-child(2) ::ng-deep button-colijn {
+        @include border-left-radius(3px);
+      }
+      &:last-child ::ng-deep button-colijn {
+        @include border-right-radius(3px);
+      }
+    }
+  }
+
+}
+*/

package/lib/component/service-order/summary/transaction-delivery-summary.component.scss

@@ -0,0 +1,22 @@
+@import "../../../style/variables";
+/*
+@import "src/style/styles";
+
+:host {
+  .planning-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    color: $tp-color-action;
+    margin-top: -10px;
+    font-size: 13px;
+    ::ng-deep icon {
+      cursor: pointer;
+      [fill] {
+        fill: $tp-color-action;
+      }
+    }
+  }
+}
+*/

package/lib/component/service-order/summary/transaction-summary-block.component.scss

@@ -0,0 +1,109 @@
+@import "../../../style/variables";
+/*
+@import "src/style/styles";
+
+$block_content_height: 60px;
+$summary-block-width: 368px;
+$summary-block-min-height: 130px;
+
+:host {
+  width: $summary-block-width;
+  min-height: $summary-block-min-height;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  //  border: 1px solid $color_border;
+  //  outline: 1px solid $color-border;
+  margin-top: 1px;
+  margin-left: 1px;
+  padding: 30px 20px;
+  .content-wrapper {
+    .value-block {
+      margin-bottom: 10px;
+      ::ng-deep .planning-wrapper {
+        justify-content: flex-start;
+        arrow-link {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+  .disabled-indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: none;
+  }
+  &.disabled {
+    .disabled-indicator {
+      display: block;
+    }
+  }
+  ::ng-deep image-display {
+    height: $block_content_height;
+    width: $block_content_height;
+    flex-shrink: 0;
+    span {
+      display: none;
+    }
+  }
+
+  .icon-wrapper {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    background: #F8FBFA;
+    height: $block_content_height;
+    width: $block_content_height;
+    border-radius: 50%;
+    border: 1px solid $tp-color-border;
+    overflow: hidden;
+    ::ng-deep icon {
+      height: 60px !important;
+      width: 60px !important;
+      flex-shrink: 0;
+    }
+  }
+
+  .title {
+    font-size: 13px;
+    color: $tp-color-dark;
+  }
+
+  .block-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .border {
+    border-radius: 3px;
+    padding: 15px;
+    background: white;
+    border: 1px solid $tp-color-border;
+  }
+
+  .content-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 10px;
+    min-height: $block_content_height;
+    height: auto;
+    width: 100%;
+  }
+
+  .header-label, .subheader-label {
+    font-size: 11px;
+    line-height: 13px;
+    color: $tp-color-label;
+  }
+
+  .header, .subheader {
+    font-size: 13px;
+    font-weight: bold;
+    color: $tp-color-dark;
+  }
+}
+*/

package/lib/component/service-order/transaction-manager/transaction-manager.component.scss

@@ -0,0 +1,54 @@
+@import "../../../style/variables";
+/*
+@import "src/style/styles";
+
+::ng-deep #warehouseDialog {
+  align-items: center;
+  max-height: 100%;
+
+  ::ng-deep co-form {
+    height: 100%;
+    width: 500px;
+  }
+
+  ::ng-deep .form-content {
+    height: calc(100% - 80px);
+    width: 100%;
+
+    .message-field {
+      @extend %margin-left-medium;
+      height: 20px;
+      word-wrap: break-word;
+      white-space: normal;
+    }
+  }
+
+}
+
+co-button:not(:last-child) {
+  margin-right: 10px;
+}
+
+.commission-fields {
+  @extend %margin-left-medium;
+  justify-content: space-between;
+  margin: 10px 0 10px;
+}
+
+.warehouse-line-container {
+  @extend %flex;
+  @extend %flex-row;
+}
+
+.warehouse-description-item {
+  width: 15rem;
+}
+
+.warehouse-nr-item {
+  width: 5rem;
+}
+
+co-input-number-picker co-button {
+  max-width: 20px;
+}
+*/

package/lib/component/service-order/transaction-order-line-view/transaction-order-line-view.component.scss

@@ -0,0 +1,90 @@
+@import "../../../style/variables";
+/*
+@import "src/style/styles";
+
+:host {
+  display: block;
+  padding: 20px;
+
+  ::ng-deep collapseable {
+    width: 100% !important;
+  }
+}
+
+.horizontal {
+  display: flex;
+  flex-direction: row;
+}
+
+.service-request-button-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.transaction-order-line-r {
+  display: flex;
+  justify-content: stretch;
+  flex-direction: row;
+
+  @media (max-width: 800px) {
+    flex-direction: column;
+  }
+
+  .transaction-order-line-image {
+    @extend %margin-vertical-big;
+    display: flex;
+    flex: 1 0 auto !important;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-right: 10px;
+    image-display {
+      @include square(6em);
+    }
+    ::ng-deep no-image-display {
+      display: none;
+    }
+  }
+  .transaction-order-line-description {
+    @extend %margin-big;
+    display: flex;
+    flex-direction: column;
+    width: auto;
+    max-width: 355px;
+    margin-left: 10px;
+    .cart-line-description-main {
+      font-weight: bold;
+    }
+    .cart-line-description-artnr {
+      @extend %font-small;
+    }
+  }
+  .transaction-order-line-right {
+    justify-content: flex-end;
+    align-items: center;
+    .transaction-order-line-stock {
+      @extend %margin-vertical-big;
+      width: 10em;
+    }
+
+    .transaction-order-line-amount {
+      @extend %margin-big;
+      width: 15em;
+    }
+
+    .transaction-order-line-totals {
+      display: flex;
+      @extend %margin-vertical-big;
+      @extend %margin-left-big;
+      justify-content: flex-end;
+      min-width: 100px;
+      font-weight: bold;
+
+      span {
+        text-align: right;
+      }
+    }
+  }
+}
+*/

package/lib/component/service-order/transaction-order-lines/transaction-order-lines.component.scss

@@ -0,0 +1,85 @@
+@import "../../../style/variables";
+/*
+@import "src/style/styles";
+
+:host {
+  display: block;
+  padding: 20px;
+
+  ::ng-deep collapseable {
+    width: 100% !important;
+  }
+}
+
+.service-request-button-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.transaction-order-line-r {
+  display: flex;
+  justify-content: stretch;
+  flex-direction: row;
+
+  @media (max-width: 800px) {
+    flex-direction: column;
+  }
+
+  .transaction-order-line-image {
+    @extend %margin-vertical-big;
+    display: flex;
+    flex: 1 0 auto !important;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-right: 10px;
+    image-display {
+      @include square(6em);
+    }
+    ::ng-deep no-image-display {
+      display: none;
+    }
+  }
+  .transaction-order-line-description {
+    @extend %margin-big;
+    display: flex;
+    flex-direction: column;
+    width: auto;
+    max-width: 355px;
+    margin-left: 10px;
+    .cart-line-description-main {
+      font-weight: bold;
+    }
+    .cart-line-description-artnr {
+      @extend %font-small;
+    }
+  }
+  .transaction-order-line-right {
+    justify-content: flex-end;
+    align-items: center;
+    .transaction-order-line-stock {
+      @extend %margin-vertical-big;
+      width: 10em;
+    }
+
+    .transaction-order-line-amount {
+      @extend %margin-big;
+      width: 15em;
+    }
+
+    .transaction-order-line-totals {
+      display: flex;
+      @extend %margin-vertical-big;
+      @extend %margin-left-big;
+      justify-content: flex-end;
+      min-width: 100px;
+      font-weight: bold;
+
+      span {
+        text-align: right;
+      }
+    }
+  }
+}
+*/

package/lib/component/service-order/transaction-order-totals/transaction-order-totals.component.scss

@@ -0,0 +1,26 @@
+@import "../../../style/variables";
+/*
+@import "src/style/styles";
+
+:host {
+  .totals-wrapper {
+    width: 310px;
+    font-size: 13px;
+  }
+  .totals-item {
+    display: flex;
+    flex-direction: row;
+    height: 25px;
+    align-items: center;
+    > div {
+      text-align: end;
+      width: 50%;
+    }
+    &.total {
+      font-weight: bold;
+      height: 30px;
+      border-top: 1px solid $tp-color-border;
+    }
+  }
+}
+*/