@colijnit/relation 12.1.1

package/lib/component/relation-contact-options/relation-contact-options-other-types-popup.component.d.ts

@@ -0,0 +1,22 @@
+import { ElementRef, EventEmitter, OnInit } from '@angular/core';
+import { CommunicationType } from '@colijnit/relationapi/build/enum/communication-type.enum';
+import { Icon } from '../../enum/icon.enum';
+import { RelationService } from '../../service/relation.service';
+import { IconCacheService } from '../../service/icon-cache.service';
+export interface otherType {
+    type: CommunicationType;
+    icon: Icon;
+    label: string;
+}
+export declare class RelationContactOptionsOtherTypesPopupComponent implements OnInit {
+    iconCacheService: IconCacheService;
+    private _relationService;
+    readonly icons: typeof Icon;
+    parentForOverlay: ElementRef;
+    typeClick: EventEmitter<CommunicationType>;
+    clickedOutside: EventEmitter<void>;
+    showClass: boolean;
+    types: otherType[];
+    constructor(iconCacheService: IconCacheService, _relationService: RelationService);
+    ngOnInit(): void;
+}

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

@@ -0,0 +1,40 @@
+import { ChangeDetectorRef, ElementRef } from '@angular/core';
+import { RelationScreenConfigBaseComponent } from '../base/relation-screen-config-base.component';
+import { RelmanContactOptionsCfgNames } from '../../enum/relman-contact-options-cfg-names';
+import { ContactOption } from '@colijnit/relationapi/build/model/contact-option.bo';
+import { CommunicationType } from '@colijnit/relationapi/build/enum/communication-type.enum';
+import { OverlayService } from '@colijnit/corecomponents_v12';
+import { RelationService } from '../../service/relation.service';
+import { IconCacheService } from '../../service/icon-cache.service';
+import { RelationConnectorService } from '../../service/relation-connector.service';
+import { RelationEventService } from '../../service/relation-event.service';
+export declare class RelationContactOptionsComponent extends RelationScreenConfigBaseComponent {
+    relationService: RelationService;
+    iconCacheService: IconCacheService;
+    protected relationConnectorService: RelationConnectorService;
+    protected relationEventService: RelationEventService;
+    private _overlayService;
+    private _changeDetector;
+    readonly commType: typeof CommunicationType;
+    readonly generalContactOptionsCfgNames: RelmanContactOptionsCfgNames;
+    overlayParent: ElementRef;
+    showClass(): boolean;
+    handleKeyDown(event: KeyboardEvent): void;
+    emailContactOptions: ContactOption[];
+    phoneContactOptions: ContactOption[];
+    otherContactOptions: ContactOption[];
+    showNewEmail: boolean;
+    showNewPhone: boolean;
+    showNewOther: boolean;
+    newOtherType: CommunicationType;
+    private _otherTypePopupComponentRef;
+    constructor(relationService: RelationService, iconCacheService: IconCacheService, relationConnectorService: RelationConnectorService, relationEventService: RelationEventService, _overlayService: OverlayService, _changeDetector: ChangeDetectorRef);
+    showNewOtherPopup(): void;
+    hideNewOtherPopup(): void;
+    addContactOption(option: ContactOption): Promise<void>;
+    handleDeleteOption(option: ContactOption): void;
+    protected relationSet(): void;
+    private _handleCreateOtherType;
+    private _getCollection;
+    private _resetNew;
+}

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

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

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

@@ -0,0 +1,113 @@
+@include export-module('co-relation-contact-options-layout') {
+  .co-relation-contact-options {
+    font-family: $re-co-relation-contact-options-font-family;
+    font-size: $re-co-relation-contact-options-font-size;
+    .relation-contact-options-label {
+      font-family: $re-co-relation-contact-options-label-font-family;
+      font-size: $re-co-relation-contact-options-label-font-size;
+      margin: $re-co-relation-contact-options-label-margin;
+    }
+    .relation-contact-options-type-label-wrapper {
+      display: flex;
+      align-items: center;
+      margin: $re-co-relation-contact-options-label-margin;
+      gap: $re-co-relation-contact-options-label-gap;
+      .co-icon {
+        cursor: pointer;
+        height: $re-co-relation-contact-options-label-icon-size;
+        width: $re-co-relation-contact-options-label-icon-size;
+      }
+    }
+    .contact-option-wrapper {
+      display: flex;
+      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;
+    .co-icon {
+      cursor: pointer;
+      height: $re-co-relation-contact-option-delete-icon-size;
+      width: $re-co-relation-contact-option-delete-icon-size;
+    }
+    &.new-contact-option {
+      margin: $re-co-relation-contact-options-type-new-option-margin;
+    }
+  }
+  .relation-contact-option-sequence {
+    border-radius: 50%;
+    position: absolute;
+    z-index: 1;
+    top: 2px;
+    left: 2px;
+    height: 15px;
+    width: 15px;
+    font-size: 10px;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+
+  .draggable-contact-option.cdk-drag-preview, can-drag.cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 4px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  }
+
+  .draggable-contact-option.cdk-drag-placeholder, .can-drag.cdk-drag-placeholder {
+    opacity: 0.3;
+  }
+
+  .cdk-drag-animating {
+    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .draggable-contact-option:last-child {
+    border: none;
+  }
+
+  .drag-drop-list.cdk-drop-list-dragging .draggable-contact-option:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .relation-contact-options-other-types-popup-content {
+    display: flex;
+    flex-direction: column;
+    z-index: $re-co-relation-contact-options-type-popup-z-index;
+    gap: $re-co-relation-contact-options-type-popup-gap;
+    font-family: $re-co-relation-contact-options-font-family;
+    font-size: $re-co-relation-contact-options-font-size;
+    padding: $re-co-relation-contact-options-type-popup-padding;
+    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

@@ -0,0 +1,35 @@
+$re-co-relation-contact-options-font-family: $re-font-family !default;
+$re-co-relation-contact-options-font-size: $re-font-size !default;
+$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-label-margin: 10px 0 !default;
+$re-co-relation-contact-options-label-gap: 10px !default;
+$re-co-relation-contact-options-label-icon-size: 15px !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 0 10px 0 !default;
+
+$re-co-relation-contact-options-sequence-background-color: #e85152 !default;
+$re-co-relation-contact-options-sequence-color: #f7fafa !default;
+
+$re-co-relation-contact-options-type-popup-z-index: 999 !default;
+$re-co-relation-contact-options-type-popup-icon-size: 20px !default;
+$re-co-relation-contact-options-type-popup-gap: 10px !default;
+$re-co-relation-contact-options-type-popup-padding: 10px !default;
+$re-co-relation-contact-options-type-popup-background-color: $re-color-background-popup !default;
+$re-co-relation-contact-options-type-popup-color: $re-color-light !default;
+$re-co-relation-contact-options-type-popup-border-style: solid !default;
+$re-co-relation-contact-options-type-popup-border-width: 0 !default;
+$re-co-relation-contact-options-type-popup-border-color: $re-color-border !default;
+$re-co-relation-contact-options-type-popup-box-shadow: 2px 2px 5px 1px $re-color-border !default;
+$re-co-relation-contact-options-type-popup-item-padding: 10px !default;
+$re-co-relation-contact-options-type-popup-item-background-color: $re-color-background-popup-item !default;
+$re-co-relation-contact-options-type-popup-item-color: $re-color-light !default;
+$re-co-relation-contact-options-type-popup-item-hover-background-color: $re-color-background-popup-item-hover !default;
+$re-co-relation-contact-options-type-popup-item-hover-color: $re-color-font !default;
+
+$re-co-relation-contact-option-gap: 10px !default;
+$re-co-relation-contact-option-delete-icon-size: 20px !default;

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

@@ -0,0 +1,48 @@
+@include export-module('co-relation-contact-options-theme') {
+  .co-relation-contact-options {
+  }
+  .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;
+      }
+    }
+  }
+  .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-contact-options/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/component/relation-first-name/relation-first-name.component.d.ts

@@ -0,0 +1,4 @@
+import { RelationScreenConfigBaseComponent } from '../base/relation-screen-config-base.component';
+export declare class RelationFirstNameComponent extends RelationScreenConfigBaseComponent {
+    showClass: boolean;
+}

package/lib/component/relation-first-name/relation-first-name.module.d.ts

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

package/lib/component/relation-first-name/style/_layout.scss

@@ -0,0 +1,9 @@
+@include export-module('co-relation-first-name-layout') {
+  .co-relation-first-name {
+    font-family: $re-co-relation-first-name-font-family;
+    font-size: $re-co-relation-first-name-font-size;
+    &:has(.co-input-text.hidden) {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+$re-co-relation-first-name-font-family: $re-font-family !default;
+$re-co-relation-first-name-font-size: $re-font-size !default;
+$re-co-relation-first-name-font-color: $re-color-font !default;

package/lib/component/relation-first-name/style/_theme.scss

@@ -0,0 +1,5 @@
+@include export-module('co-relation-first-name-theme') {
+  .co-relation-first-name {
+    color: $re-co-relation-first-name-font-color;
+  }
+}

package/lib/component/relation-first-name/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

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

@@ -0,0 +1,7 @@
+import { RelationScreenConfigBaseComponent } from '../base/relation-screen-config-base.component';
+import { GenderType } from '@colijnit/relationapi/build/enum/gender-type.enum';
+export declare class RelationGenderComponent extends RelationScreenConfigBaseComponent {
+    readonly genderType: typeof GenderType;
+    showClass(): boolean;
+    changeGenderType(value: GenderType): void;
+}

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

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

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

@@ -0,0 +1,8 @@
+@include export-module('co-relation-gender-layout') {
+  .co-relation-gender {
+    font-family: $re-co-relation-gender-font-family;
+    font-size: $re-co-relation-gender-font-size;
+    display: flex;
+    gap: $re-co-relation-gender-gap;
+  }
+}

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

@@ -0,0 +1,4 @@
+$re-co-relation-gender-gap: 10px !default;
+$re-co-relation-gender-font-family: $re-font-family !default;
+$re-co-relation-gender-font-size: $re-font-size !default;
+$re-co-relation-gender-font-color: $re-color-font !default;

package/lib/component/relation-gender/style/_theme.scss

@@ -0,0 +1,5 @@
+@include export-module('co-relation-gender-theme') {
+  .co-relation-gender {
+    color: $re-co-relation-gender-font-color;
+  }
+}

package/lib/component/relation-gender/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

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

@@ -0,0 +1,4 @@
+import { RelationScreenConfigBaseComponent } from '../base/relation-screen-config-base.component';
+export declare class RelationInitialsComponent extends RelationScreenConfigBaseComponent {
+    showClass(): boolean;
+}

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

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

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

@@ -0,0 +1,9 @@
+@include export-module('co-relation-initials-layout') {
+  .co-relation-initials {
+    font-family: $re-co-relation-initials-font-family;
+    font-size: $re-co-relation-initials-font-size;
+    &:has(.co-input-text.hidden) {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+$re-co-relation-initials-font-family: $re-font-family !default;
+$re-co-relation-initials-font-size: $re-font-size !default;
+$re-co-relation-initials-font-color: $re-color-font !default;

package/lib/component/relation-initials/style/_theme.scss

@@ -0,0 +1,5 @@
+@include export-module('co-relation-initials-theme') {
+  .co-relation-initials {
+    color: $re-co-relation-initials-font-color;
+  }
+}

package/lib/component/relation-initials/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

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

@@ -0,0 +1,12 @@
+import { RelationScreenConfigBaseComponent } from '../base/relation-screen-config-base.component';
+import { Language } from '@colijnit/mainapi/build/model/language.bo';
+export declare class RelationLanguageComponent extends RelationScreenConfigBaseComponent {
+    showClass(): boolean;
+    collection: Language[];
+    language: Language;
+    ngOnInit(): void;
+    handleLanguageChange(language: Language): void;
+    protected relationSet(): void;
+    private _getData;
+    private _setModel;
+}

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

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

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

@@ -0,0 +1,9 @@
+@include export-module('co-relation-language-layout') {
+  .co-relation-language {
+    font-family: $re-co-relation-language-font-family;
+    font-size: $re-co-relation-language-font-size;
+    &:has(.co-list-of-values.hidden) {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+$re-co-relation-language-font-family: $re-font-family !default;
+$re-co-relation-language-font-size: $re-font-size !default;
+$re-co-relation-language-font-color: $re-color-font !default;

package/lib/component/relation-language/style/_theme.scss

@@ -0,0 +1,5 @@
+@include export-module('co-relation-language-theme') {
+  .co-relation-language {
+    color: $re-co-relation-language-font-color;
+  }
+}

package/lib/component/relation-language/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/component/relation-last-name/relation-last-name.component.d.ts

@@ -0,0 +1,4 @@
+import { RelationScreenConfigBaseComponent } from '../base/relation-screen-config-base.component';
+export declare class RelationLastNameComponent extends RelationScreenConfigBaseComponent {
+    showClass(): boolean;
+}

package/lib/component/relation-last-name/relation-last-name.module.d.ts

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

package/lib/component/relation-last-name/style/_layout.scss

@@ -0,0 +1,9 @@
+@include export-module('co-relation-last-name-layout') {
+  .co-relation-last-name {
+    font-family: $re-co-relation-last-name-font-family;
+    font-size: $re-co-relation-last-name-font-size;
+    &:has(.co-input-text.hidden) {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+$re-co-relation-last-name-font-family: $re-font-family !default;
+$re-co-relation-last-name-font-size: $re-font-size !default;
+$re-co-relation-last-name-font-color: $re-color-font !default;

package/lib/component/relation-last-name/style/_theme.scss

@@ -0,0 +1,5 @@
+@include export-module('co-relation-last-name-theme') {
+  .co-relation-last-name {
+    color: $re-co-relation-last-name-font-color;
+  }
+}

package/lib/component/relation-last-name/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

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

@@ -0,0 +1,13 @@
+import { RelationScreenConfigBaseComponent } from '../base/relation-screen-config-base.component';
+import { RelationPrivacySetting } from '@colijnit/relationapi/build/model/relation-privacy-setting.bo';
+export declare class PrivacySettingViewModel {
+    privacySetting: RelationPrivacySetting;
+    checked: boolean;
+}
+export declare class RelationPreferencesComponent extends RelationScreenConfigBaseComponent {
+    showClass(): boolean;
+    privacySettings: PrivacySettingViewModel[];
+    changePrivacySetting(relationPrivacySetting: RelationPrivacySetting, value: boolean): void;
+    protected relationSet(): void;
+    private _loadPrivacySettings;
+}

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

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

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

@@ -0,0 +1,16 @@
+@include export-module('co-relation-preferences-layout') {
+  .co-relation-preferences {
+    font-family: $re-co-relation-preferences-font-family;
+    font-size: $re-co-relation-preferences-font-size;
+    .relation-preferences-label {
+      font-family: $re-co-relation-preferences-label-font-family;
+      font-size: $re-co-relation-preferences-label-font-size;
+      margin: $re-co-relation-preferences-label-margin;
+    }
+    .relation-preferences-wrapper {
+      display: grid;
+      grid-template-columns: auto auto;
+      gap: $re-co-relation-preferences-gap;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+$re-co-relation-preferences-font-family: $re-font-family !default;
+$re-co-relation-preferences-font-size: $re-font-size !default;
+$re-co-relation-preferences-font-color: $re-color-font !default;
+$re-co-relation-preferences-gap: 5px !default;
+
+$re-co-relation-preferences-label-font-family: $re-font-family !default;
+$re-co-relation-preferences-label-font-size: $re-font-size !default;
+$re-co-relation-preferences-label-margin: 10px 0 !default;

package/lib/component/relation-preferences/style/_theme.scss

@@ -0,0 +1,5 @@
+@include export-module('co-relation-preferences-theme') {
+  .co-relation-preferences {
+    color: $re-co-relation-preferences-font-color;
+  }
+}

package/lib/component/relation-preferences/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/component/relation-prefix-name/relation-prefix-name.component.d.ts

@@ -0,0 +1,4 @@
+import { RelationScreenConfigBaseComponent } from '../base/relation-screen-config-base.component';
+export declare class RelationPrefixNameComponent extends RelationScreenConfigBaseComponent {
+    showClass(): boolean;
+}

package/lib/component/relation-prefix-name/relation-prefix-name.module.d.ts

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

package/lib/component/relation-prefix-name/style/_layout.scss

@@ -0,0 +1,9 @@
+@include export-module('co-relation-prefix-name-layout') {
+  .co-relation-prefix-name {
+    font-family: $re-co-relation-prefix-font-family;
+    font-size: $re-co-relation-prefix-font-size;
+    &:has(.co-input-text.hidden) {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+$re-co-relation-prefix-font-family: $re-font-family !default;
+$re-co-relation-prefix-font-size: $re-font-size !default;
+$re-co-relation-prefix-font-color: $re-color-font !default;

package/lib/component/relation-prefix-name/style/_theme.scss

@@ -0,0 +1,5 @@
+@include export-module('co-relation-prefix-name-theme') {
+  .co-relation-prefix-name {
+    color: $re-co-relation-prefix-font-color;
+  }
+}

package/lib/component/relation-prefix-name/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

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

@@ -0,0 +1,13 @@
+import { OnInit } from '@angular/core';
+import { RelationScreenConfigBaseComponent } from '../base/relation-screen-config-base.component';
+import { Title } from '@colijnit/mainapi/build/model/title.bo';
+export declare class RelationTitleComponent extends RelationScreenConfigBaseComponent implements OnInit {
+    showClass(): boolean;
+    collection: Title[];
+    title: Title;
+    ngOnInit(): void;
+    handleTitleChange(title: Title): void;
+    protected relationSet(): void;
+    private _getData;
+    private _setModel;
+}

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

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

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

@@ -0,0 +1,9 @@
+@include export-module('co-relation-title-layout') {
+  .co-relation-title {
+    font-family: $re-co-relation-title-font-family;
+    font-size: $re-co-relation-title-font-size;
+    &:has(.co-list-of-values.hidden) {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+$re-co-relation-title-font-family: $re-font-family !default;
+$re-co-relation-title-font-size: $re-font-size !default;
+$re-co-relation-title-font-color: $re-color-font !default;

package/lib/component/relation-title/style/_theme.scss

@@ -0,0 +1,5 @@
+@include export-module('co-relation-title-theme') {
+  .co-relation-title {
+    color: $re-co-relation-title-font-color;
+  }
+}

package/lib/component/relation-title/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";