@colijnit/relation 260.1.0 → 261.1.0

package/lib/component/relation/relation.component.d.ts

@@ -8,6 +8,7 @@ import { RelationConnectorService } from '../../service/relation-connector.servi
 import { Title } from "@colijnit/mainapi/build/model/title.bo";
 import { IconCacheService } from "../../service/icon-cache.service";
 import { Icon } from "../../enum/icon.enum";
+import { RelmanCfgName } from '../../enum/relman-cfg-name.enum';
 export declare class RelationComponent implements OnInit, OnDestroy {
     protected relationEventService: RelationEventService;
     private _translationService;
@@ -16,6 +17,7 @@ export declare class RelationComponent implements OnInit, OnDestroy {
     private _relationService;
     iconCacheService: IconCacheService;
     readonly icons: typeof Icon;
+    readonly relmanCfgNames: typeof RelmanCfgName;
     loadRelationFromLoginResponse: boolean;
     forceReadOnly: boolean;
     customerPortal: boolean;

package/lib/component/relation-contact-options/relation-contact-option-list.component.d.ts

@@ -18,5 +18,7 @@ export declare class RelationContactOptionListComponent {
      */
     handleOptionMouseDown(event: MouseEvent): void;
     handleOptionMouseUp(event: MouseEvent): void;
+    handleSequenceUp(option: ContactOption): void;
+    handleSequenceDown(option: ContactOption): void;
     private _reArrangeSequences;
 }

package/lib/component/relation-contact-options/relation-contact-option.component.d.ts

@@ -18,10 +18,13 @@ export declare class RelationContactOptionComponent implements OnInit {
     screenConfigObjectName: string;
     saveClick: EventEmitter<ContactOption>;
     deleteClick: EventEmitter<ContactOption>;
+    sequenceChangeUp: EventEmitter<ContactOption>;
+    sequenceChangeDown: EventEmitter<ContactOption>;
     showClass: boolean;
     iconType: Icon;
     label: string;
     input: InputTextComponent;
+    showSequenceArrows: boolean;
     private _model;
     private _type;
     constructor(iconCacheService: IconCacheService, _relationService: RelationService);

package/lib/component/relation-contact-options/style/_layout.scss

@@ -2,9 +2,16 @@
   .co-relation-contact-options {
     font-family: $re-co-relation-contact-options-font-family;
     font-size: $re-co-relation-contact-options-font-size;
+    display: flex;
+    flex-wrap: wrap;
+    gap: $re-co-relation-contact-options-gap;
     .relation-option-wrapper {
       margin: 0 0 10px 0;
+      width: calc(50% - 5px);
+      flex-direction: column-reverse;
+      display: flex;
     }
+
     .relation-contact-options-label {
       font-family: $re-co-relation-contact-options-label-font-family;
       font-size: $re-co-relation-contact-options-label-font-size;
@@ -15,97 +22,141 @@
       align-items: center;
       margin: $re-co-relation-contact-options-label-margin;
       gap: $re-co-relation-contact-options-label-gap;
+      width: 100%;
       .co-icon {
         cursor: pointer;
         height: $re-co-relation-contact-options-label-icon-size;
         width: $re-co-relation-contact-options-label-icon-size;
+
         svg {
           fill: #1A73E8;
         }
+
         svg [fill] {
           fill: #1A73E8;
         }
       }
+
       .relation-contact-options-type-label {
         font-size: 12px;
         color: #1A73E8;
         cursor: pointer;
       }
     }
+
     .contact-option-wrapper {
       display: flex;
-      flex-direction: row;
+      flex-direction: column;
       gap: $re-co-relation-contact-options-type-gap;
     }
+
     &.adding-email-option, .adding-phone-option, .adding-other-option {
       .co-relation-contact-option:not(.new-contact-option) {
         opacity: 0.5;
         pointer-events: none;
       }
     }
-  }
-  .co-relation-contact-option {
-    font-family: $re-co-relation-contact-options-font-family;
-    font-size: $re-co-relation-contact-options-font-size;
-    display: flex;
-    align-items: center;
-    gap: $re-co-relation-contact-option-gap;
-    position: relative;
-    width: 50%;
-    .co-input-text {
+    .co-relation-contact-option {
+      font-family: $re-co-relation-contact-options-font-family;
+      font-size: $re-co-relation-contact-options-font-size;
+      display: flex;
+      align-items: center;
+      gap: $re-co-relation-contact-option-gap;
+      position: relative;
       width: 100%;
-    }
-    .co-icon {
-      cursor: pointer;
-      height: $re-co-relation-contact-option-delete-icon-size;
-      width: $re-co-relation-contact-option-delete-icon-size;
-      &.relation-delete {
-        width: 10px;
-        height: 10px;
-        position: absolute;
-        top: 5px;
-        right: 5px;
-        display: none;
-        & svg {
-          fill: #000;
+
+      .co-input-text {
+        width: 100%;
+      }
+
+      .co-icon {
+        cursor: pointer;
+        height: $re-co-relation-contact-option-delete-icon-size;
+        width: $re-co-relation-contact-option-delete-icon-size;
+
+        &.relation-delete {
+          width: 10px;
+          height: 10px;
+          position: absolute;
+          top: 5px;
+          right: 5px;
+          display: none;
+
+          & svg {
+            fill: #000;
+          }
+
+          & svg [fill] {
+            fill: #000;
+          }
         }
-        & svg [fill] {
-          fill: #000;
+      }
+
+      &.new-contact-option {
+        margin: $re-co-relation-contact-options-type-new-option-margin;
+
+        &:hover {
+          .co-icon {
+            &.relation-delete {
+              display: none;
+            }
+          }
         }
       }
-    }
-    &.new-contact-option {
-      margin: $re-co-relation-contact-options-type-new-option-margin;
+
       &:hover {
         .co-icon {
           &.relation-delete {
-            display: none;
+            display: block;
           }
         }
       }
     }
-    &:hover {
-      .co-icon {
-        &.relation-delete {
-          display: block;
-        }
-      }
-    }
   }
+
   .relation-contact-option-sequence {
     border-radius: 50%;
     position: absolute;
-    z-index: 1;
-    top: 2px;
-    left: 2px;
-    height: 15px;
-    width: 15px;
-    font-size: 10px;
+    z-index: 2;
+    top: -4px;
+    left: -4px;
+    height: 13px;
+    width: 13px;
+    font-size: 9px;
+    font-family: 'Public Sans', $re-co-relation-contact-options-font-family;
     align-items: center;
     display: flex;
     justify-content: center;
   }
 
+  .arrows {
+    border-radius: 50%;
+    transition: all 0.15s;
+    position: absolute;
+    z-index: 2;
+    left: 50%;
+
+    &.up {
+      top: -25px;
+
+      svg {
+        transform: rotate(-90deg);
+      }
+    }
+
+    &.down {
+      bottom: -25px;
+
+      svg {
+        transform: rotate(90deg);
+      }
+    }
+
+    &:hover {
+      scale: 1.25;
+    }
+  }
+
   .draggable-contact-option.cdk-drag-preview, can-drag.cdk-drag-preview {
     box-sizing: border-box;
     border-radius: 4px;
@@ -141,17 +192,20 @@
     border-style: $re-co-relation-contact-options-type-popup-border-style;
     border-width: $re-co-relation-contact-options-type-popup-border-width;
     box-shadow: $re-co-relation-contact-options-type-popup-box-shadow;
+
     .other-types-wrapper {
       cursor: pointer;
       display: flex;
       align-items: center;
       gap: $re-co-relation-contact-options-type-popup-gap;
       padding: $re-co-relation-contact-options-type-popup-item-padding;
+
       .co-icon {
         height: $re-co-relation-contact-options-type-popup-icon-size;
         width: $re-co-relation-contact-options-type-popup-icon-size;
       }
     }
+
     .other-type-label {
 
     }

package/lib/component/relation-contact-options/style/_material-definition.scss

@@ -5,12 +5,13 @@ $re-co-relation-contact-options-font-color: $re-color-font !default;
 $re-co-relation-contact-options-label-font-family: $re-font-family !default;
 $re-co-relation-contact-options-label-font-size: $re-font-size !default;
 
+$re-co-relation-contact-options-gap: 10px !default;
 $re-co-relation-contact-options-label-margin: 0 !default;
 $re-co-relation-contact-options-label-gap: 0 !default;
 $re-co-relation-contact-options-label-icon-size: 20px !default;
 $re-co-relation-contact-options-label-icon-color: $re-color-action !default;
 $re-co-relation-contact-options-type-gap: 5px !default;
-$re-co-relation-contact-options-type-new-option-margin: 0 !default;
+$re-co-relation-contact-options-type-new-option-margin: 20px 0 0 0 !default;
 
 $re-co-relation-contact-options-sequence-background-color: #e85152 !default;
 $re-co-relation-contact-options-sequence-color: #f7fafa !default;

package/lib/component/relation-contact-options/style/_theme.scss

@@ -3,41 +3,62 @@
   }
   .co-relation-contact-option {
     color: $re-co-relation-contact-options-font-color;
+
     .co-icon {
       svg {
         fill: $re-co-relation-contact-options-label-icon-color;
       }
+
       [fill] {
         fill: $re-co-relation-contact-options-label-icon-color;
       }
     }
+
+    .arrows {
+      background-color: $re-co-relation-contact-options-sequence-background-color;
+
+      svg {
+        fill: $re-co-relation-contact-options-sequence-color;
+      }
+
+      [fill] {
+        fill: $re-co-relation-contact-options-sequence-color;
+      }
+    }
   }
   .relation-contact-option-sequence {
     background-color: $re-co-relation-contact-options-sequence-background-color;
     color: $re-co-relation-contact-options-sequence-color;
   }
+
   .relation-contact-options-other-types-popup-content {
     background-color: $re-co-relation-contact-options-type-popup-background-color;
     border-color: $re-co-relation-contact-options-type-popup-border-color;
     color: $re-co-relation-contact-options-type-popup-color;
+
     .other-types-wrapper {
       background-color: $re-co-relation-contact-options-type-popup-item-background-color;
       color: $re-co-relation-contact-options-type-popup-item-color;
+
       .co-icon {
         svg {
           fill: $re-co-relation-contact-options-type-popup-item-color;
         }
+
         [fill] {
           fill: $re-co-relation-contact-options-type-popup-item-color;
         }
       }
+
       &:hover {
         background-color: $re-co-relation-contact-options-type-popup-item-hover-background-color;
         color: $re-co-relation-contact-options-type-popup-item-hover-color;
+
         .co-icon {
           svg {
             fill: $re-co-relation-contact-options-type-popup-item-hover-color;
           }
+
           [fill] {
             fill: $re-co-relation-contact-options-type-popup-item-hover-color;
           }

package/lib/component/relation-documents/relation-documents.component.d.ts

@@ -0,0 +1,18 @@
+import { RelationAnyType } from "@colijnit/relationapi/build/model/relation-any-type";
+import { CoDocument } from "@colijnit/mainapi/build/model/co-document.bo";
+import { Icon } from "../../enum/icon.enum";
+import { IconCacheService } from "../../service/icon-cache.service";
+export declare class RelationDocumentsComponent {
+    iconCacheService: IconCacheService;
+    readonly icons: typeof Icon;
+    private _relation;
+    set relation(value: RelationAnyType);
+    get relation(): RelationAnyType;
+    get documentsCollection(): CoDocument[];
+    constructor(iconCacheService: IconCacheService);
+    showDocument(relDocument: CoDocument): void;
+    downloadDocument(relDocument: CoDocument, event: MouseEvent): Promise<void>;
+    getDocumentFileExtension(relDocument: CoDocument): string;
+    formatDate(date: string | Date): string;
+    private documentHasKlantportaalTag;
+}

package/lib/component/relation-documents/relation-documents.module.d.ts

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

package/lib/enum/icon.enum.d.ts

@@ -3,7 +3,9 @@ export declare enum Icon {
     ArrowPointRight = "arrow_point_right",
     CheckDuotone = "check_duotone",
     Crossskinny = "crossskinny",
+    DownloadRegular = "download_regular",
     Email = "email",
+    EyeRegular = "eye_regular",
     Mobile = "mobile",
     PencilRegular = "pencil_regular",
     PencilRoundOpen = "pencil_round_open",