@colijnit/transaction 12.1.6 → 12.1.9

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;
+    }
+  }
+}
+*/

package/lib/component/service-order/transaction-relation/transaction-relation-edit.component.scss

@@ -0,0 +1,24 @@
+.button-wrapper {
+  margin-top: 10px;
+  justify-content: center;
+}
+
+co-input-radio-button {
+  margin-left:16px;
+}
+
+.transaction-relation-label-h2 {
+  display: block;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.transaction-relation-label-h3 {
+  display: block;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  font-size: 14px;
+  font-weight: bold;
+}

package/lib/component/service-order/transaction-sidebar/transaction-sidebar-right.component.scss

@@ -0,0 +1,17 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.e-accordion {
+  border: none;
+}
+
+.e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon .e-icons {
+  color: lightblue;
+}
+
+.e-tab .e-toolbar-items {
+  display: flex;
+  justify-content: center;
+}

package/lib/component/service-order/warehouse/warehouse.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/shared/transaction-article-text/style/_layout.scss

@@ -0,0 +1,42 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-article-text-layout') {
+  .co-transaction-article-text {
+    font-size: $tp-co-transaction-article-text-font-size;
+    .article-text-content-wrapper {
+      display: flex;
+      flex-direction: row;
+      column-gap: 25px;
+      textarea {
+        font-family: $tp-co-transaction-article-text-font-family;
+        min-height: 250px;
+        min-width: 350px;
+        border: 1px solid;
+        &:focus {
+          outline: none;
+        }
+        &:read-only {
+          opacity: $tp-co-transaction-article-text-readonly-opacity;
+        }
+      }
+    }
+    .editor-wrapper {
+      display: flex;
+      //flex-basis: 450px;
+    }
+    .option-wrapper {
+      display: flex;
+      flex-direction: column;
+      row-gap: $tp-co-transaction-article-text-options-row-gap;
+      width: 300px;
+      flex-shrink: 0;
+    }
+    .button-wrapper {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      padding: 10px;
+      column-gap: 5px;
+    }
+  }
+}

package/lib/component/shared/transaction-article-text/style/_material-definition.scss

@@ -0,0 +1,7 @@
+$tp-co-transaction-article-text-font-family: $tp-font-family !default;
+$tp-co-transaction-article-text-font-size: $tp-font-size !default;
+$tp-co-transaction-article-text-readonly-opacity: 0.5 !default;
+$tp-co-transaction-article-text-border-color: $tp-color-border !default;
+$tp-co-transaction-article-text-options-row-gap: 40px !default;
+$cc-co-input-listbox-font-size: $tp-co-transaction-article-text-font-size;
+$cc-co-input-listbox-header-font-size: $tp-co-transaction-article-text-font-size;

package/lib/component/shared/transaction-article-text/style/_theme.scss

@@ -0,0 +1,11 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-article-text-theme') {
+  .co-transaction-article-text {
+    .article-text-content-wrapper {
+      textarea {
+        border-color: $tp-co-transaction-article-text-border-color;
+      }
+    }
+  }
+}

package/lib/component/shared/transaction-article-text/style/material.scss

@@ -0,0 +1,5 @@
+@import "../../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "lib/components/input-listbox/style/material";