@colijnit/relation 256.1.0 → 257.1.0

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

@@ -5,17 +5,30 @@ import { RelationSettingsService } from '../../service/relation-settings.service
 import { RelationAnyType } from '@colijnit/relationapi/build/model/relation-any-type';
 import { RelationService } from '../../service/relation.service';
 import { RelationConnectorService } from '../../service/relation-connector.service';
+import { Title } from "@colijnit/mainapi/build/model/title.bo";
+import { IconCacheService } from "../../service/icon-cache.service";
+import { Icon } from "../../enum/icon.enum";
 export declare class RelationComponent implements OnInit, OnDestroy {
     protected relationEventService: RelationEventService;
     private _translationService;
     private _settingsService;
     private _relationConnectorService;
     private _relationService;
+    iconCacheService: IconCacheService;
+    readonly icons: typeof Icon;
     loadRelationFromLoginResponse: boolean;
+    forceReadOnly: boolean;
+    customerPortal: boolean;
     showClass(): boolean;
     relation: RelationAnyType;
+    relationTitle: string;
+    collection: Title[];
     private _subs;
-    constructor(relationEventService: RelationEventService, _translationService: CoreComponentsTranslationService, _settingsService: RelationSettingsService, _relationConnectorService: RelationConnectorService, _relationService: RelationService);
+    constructor(relationEventService: RelationEventService, _translationService: CoreComponentsTranslationService, _settingsService: RelationSettingsService, _relationConnectorService: RelationConnectorService, _relationService: RelationService, iconCacheService: IconCacheService);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    handleSaveClick(): Promise<void>;
+    getTitleCollection(): Promise<void>;
+    getTitleForRelation(relation: RelationAnyType): string;
+    getGenderLabel(gender: string): string;
 }

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

@@ -27,20 +27,84 @@
         flex-basis: 100%;
       }
       .co-relation-prefix-name {
-        flex-basis: 20%;
+        flex-basis: 50%;
       }
     }
+    .relation-data-column {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
     .relation-data-field-default {
       flex-basis: 50%;
     }
     .relation-section-label {
-      font-family: $re-co-relation-section-label-font-family;
       font-size: $re-co-relation-section-label-font-size;
       margin: $re-co-relation-section-label-margin;
     }
+    .relation-section-sub-label {
+      font-size: 14px;
+      font-weight: 500;
+      margin-top: 15px;
+    }
     .relation-account-data {
       display: flex;
       justify-content: space-between;
     }
+    .relation-account-data-wrapper {
+      &.non-editable {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+        min-width: 50%;
+        .relation-data-row {
+          gap: 30px;
+          .non-editable-column {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            .label {
+              font-size: 12px;
+              color: #8083A3;
+            }
+            .value {
+              font-size: 14px;
+              color: #000;
+            }
+          }
+        }
+      }
+    }
+    .save-editable-wrapper {
+      display: flex;
+      justify-content: center;
+      gap: 5px;
+      margin-top: 15px;
+      .save-button {
+        background-color: #F5F5FC;
+        .co-icon {
+          svg {
+            fill: #1a73e8;
+          }
+        }
+      }
+      .close-button {
+        background-color: #F5F5FC;
+        .co-icon {
+          svg {
+            fill: #898e9b;
+          }
+        }
+        .co-icon [fill] {
+          fill: #898e9b;
+        }
+      }
+    }
+    .switch-editable {
+      margin-top: 15px;
+      color: #1a73e8;
+      font-weight: 600;
+      cursor: pointer;
+    }
   }
 }

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

@@ -4,12 +4,12 @@ $re-co-relation-font-color: $re-color-font !default;
 $re-co-relation-section-background-color: $re-color-background !default;
 $re-co-relation-section-width: 800px !default;
 $re-co-relation-section-gap: 10px !default;
-$re-co-relation-section-padding: 20px !default;
+$re-co-relation-section-padding: 0 !default;
 $re-co-relation-section-margin: 0 0 20px 0 !default;
 
 $re-co-relation-section-fields-margin: 0 0 5px 0 !default;
 
 $re-co-relation-section-label-font-family: $re-font-family !default;
 $re-co-relation-section-label-font-size: 20px !default;
-$re-co-relation-section-label-font-color: $re-color-action !default;
+$re-co-relation-section-label-font-color: $re-color-font !default;
 $re-co-relation-section-label-margin: 10px 0 !default;

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

@@ -2,10 +2,10 @@ import { EventEmitter, OnInit } from '@angular/core';
 import { RelationAddressCfgNames } from '../../interface/relation-address-cfg-names.interface';
 import { Address } from '@colijnit/relationapi/build/model/address.bo';
 import { Country } from '@colijnit/ioneconnector/build/model/country.bo';
-import { DictionaryService } from '../../service/dictionary.service';
 import { FormMasterService } from '@colijnit/corecomponents_v12';
 import { RelationService } from '../../service/relation.service';
 import { RelationConnectorService } from '../../service/relation-connector.service';
+import { RelationDictionaryService } from '../../translation/relation-dictionary.service';
 export declare class RelationAddressComponent implements OnInit {
     private _dictionary;
     private _relationConnectorService;
@@ -23,7 +23,7 @@ export declare class RelationAddressComponent implements OnInit {
     private _prevPostalCodeForCheck;
     private _prevHouseNoForCheck;
     private _address;
-    constructor(_dictionary: DictionaryService, _relationConnectorService: RelationConnectorService, _formMasterService: FormMasterService, relationService: RelationService);
+    constructor(_dictionary: RelationDictionaryService, _relationConnectorService: RelationConnectorService, _formMasterService: FormMasterService, relationService: RelationService);
     ngOnInit(): Promise<void>;
     checkForPostalCodeCheckError(): Promise<void>;
     changeHouseNo(): void;

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

@@ -33,13 +33,45 @@
       position: absolute;
       top: 0;
       right: 0;
-      opacity: 0.5;
+      opacity: 0;
+      visibility: hidden;
+      transition: all .3s ease-in-out;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      width: 100%;
+      height: 100%;
+
       .relation-address-edit-icon {
         height: $re-co-relation-address-tile-edit-icon-width;
         width: $re-co-relation-address-tile-edit-icon-width;
+        padding: 9px;
+        background: #1A73E8;
+        border-radius: 5px;
+        cursor: pointer;
+        svg {
+          fill: #FFF;
+        }
       }
-      &:hover {
+    }
+    &:hover {
+      .relation-address-edit {
         opacity: 1;
+        visibility: visible;
+        transition: all .3s ease-in-out;
+      }
+    }
+    .co-tile-select {
+      .co-tile-wrapper {
+        height: 90px;
+        min-height: 90px;
+        width: 200px;
+        border-width: 1px;
+        border-radius: 0;
+        padding: 10px 15px;
+        .co-tile-content-wrapper {
+          justify-content: flex-start;
+        }
       }
     }
   }

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

@@ -15,4 +15,4 @@ $re-co-relation-address-tile-selected-background-color: $re-color-background-sel
 $re-co-relation-address-tile-selected-border-color: #0084de !default;
 $re-co-relation-address-tile-edit-background-color: $re-color-border !default;
 $re-co-relation-address-tile-edit-icon-color: $re-color-action !default;
-$re-co-relation-address-tile-edit-icon-width: 30px !default;
+$re-co-relation-address-tile-edit-icon-width: 36px !default;

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

@@ -11,6 +11,7 @@
     .relation-addresses-label {
       font-size: $re-co-relation-addresses-label-font-size;
       margin: $re-co-relation-addresses-label-margin;
+      font-weight: 500;
     }
     .relation-address-new {
       display: flex;
@@ -22,5 +23,11 @@
         width: $re-co-relation-addresses-new-address-icon-size;
       }
     }
+    .address-tile-wrapper {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 15px;
+    }
   }
 }

package/lib/component/relation-addresses/style/_material-definition.scss

@@ -7,6 +7,6 @@ $re-co-relation-addresses-new-address-margin: 5px 0 !default;
 $re-co-relation-addresses-new-address-color: $re-color-action !default;
 $re-co-relation-addresses-new-address-icon-color: $re-color-action !default;
 
-$re-co-relation-addresses-label-font-size: $re-font-size !default;
+$re-co-relation-addresses-label-font-size: 14px !default;
 $re-co-relation-addresses-label-color: $re-color-font !default;
 $re-co-relation-addresses-label-margin: 10px 0 !default;

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

@@ -15,6 +15,7 @@ export declare class RelationContactOptionComponent implements OnInit {
     set type(value: CommunicationType);
     shouldFocus: boolean;
     get type(): CommunicationType;
+    screenConfigurationObject: string;
     saveClick: EventEmitter<ContactOption>;
     deleteClick: EventEmitter<ContactOption>;
     showClass: boolean;

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

@@ -29,6 +29,8 @@ export declare class RelationContactOptionsComponent extends RelationScreenConfi
     newOtherType: CommunicationType;
     shouldFocus: boolean;
     showAddContact: boolean;
+    emailScreenConfigurationObject: string;
+    phoneScreenConfigurationObject: string;
     private _otherTypePopupComponentRef;
     constructor(relationService: RelationService, iconCacheService: IconCacheService, relationConnectorService: RelationConnectorService, relationEventService: RelationEventService, _overlayService: OverlayService, _changeDetector: ChangeDetectorRef);
     showNewOtherPopup(): void;

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

@@ -5,6 +5,7 @@ export declare enum Icon {
     Crossskinny = "crossskinny",
     Email = "email",
     Mobile = "mobile",
+    PencilRegular = "pencil_regular",
     PencilRoundOpen = "pencil_round_open",
     Phone = "phone",
     PlusSimple = "plus_simple",