@sneat/contactus-shared 0.2.0

package/esm2022/lib/components/contact-forms/phones-form/phones-form.component.js

@@ -0,0 +1,79 @@
+import { Component, EventEmitter, Input, Output, } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IonCard, IonCol, IonGrid, IonIcon, IonInput, IonItem, IonItemDivider, IonLabel, IonRow, IonSelect, IonSelectOption, } from '@ionic/angular/standalone';
+import * as i0 from "@angular/core";
+const phoneTypes = [
+    { id: 'personal', title: 'Personal' },
+    { id: 'mobile', title: 'Mobile' },
+    { id: 'landline', title: 'Landline' },
+    { id: 'work', title: 'Work' },
+    { id: 'fax', title: 'Fax' },
+];
+const emptyPhones = [
+    { type: 'personal', number: '' },
+    { type: 'work', number: '' },
+];
+export class PhonesFormComponent {
+    constructor() {
+        this.disabled = false;
+        this.hideHeader = false;
+        this.isActiveInWizard = false;
+        this.types = phoneTypes;
+        this.phones = emptyPhones;
+        this.phonesChange = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        const phonesChange = changes['phones'];
+        if (phonesChange && !phonesChange.currentValue) {
+            this.phones = emptyPhones;
+        }
+    }
+    typeChanged(event, i) {
+        event.stopPropagation();
+        if (this.phones) {
+            this.phones[i] = {
+                ...this.phones[i],
+                type: event.detail.value,
+            };
+        }
+    }
+    numberChanged(event, i) {
+        event.stopPropagation();
+        if (this.phones) {
+            this.phones[i] = {
+                ...this.phones[i],
+                number: event.detail.value,
+            };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PhonesFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PhonesFormComponent, isStandalone: true, selector: "sneat-phones-form", inputs: { disabled: "disabled", hideHeader: "hideHeader", isActiveInWizard: "isActiveInWizard", phones: "phones" }, outputs: { phonesChange: "phonesChange" }, usesOnChanges: true, ngImport: i0, template: "<ion-card>\n  @if (!hideHeader) {\n    <ion-item-divider [color]=\"isActiveInWizard ? 'primary' : 'light'\">\n      <ion-label>\n        <ion-icon name=\"call\" class=\"ion-margin-end\" />\n        Phone numbers\n      </ion-label>\n    </ion-item-divider>\n  }\n\n  <ion-grid class=\"ion-grid-layout\">\n    @for (phone of phones; track phone.type + phone.number; let i = $index) {\n      <ion-row>\n        <ion-col size=\"auto\">\n          <ion-item>\n            <ion-select\n              interface=\"popover\"\n              [disabled]=\"true\"\n              [value]=\"phone.type\"\n              (ionChange)=\"typeChanged($event, i)\"\n            >\n              @for (t of types; track t.id) {\n                <ion-select-option [value]=\"t.id\" [disabled]=\"disabled\">\n                  {{ t.title }}\n                </ion-select-option>\n              }\n            </ion-select>\n          </ion-item>\n        </ion-col>\n\n        <ion-col>\n          <ion-item>\n            <ion-input\n              type=\"tel\"\n              placeholder=\"phone #\"\n              [disabled]=\"disabled\"\n              [value]=\"phone.number\"\n              (ionChange)=\"numberChanged($event, i)\"\n              (ionBlur)=\"numberChanged($event, i)\"\n            />\n          </ion-item>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-grid>\n</ion-card>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonRow, selector: "ion-row" }, { kind: "component", type: IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PhonesFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-phones-form', imports: [
+                        FormsModule,
+                        IonCard,
+                        IonItemDivider,
+                        IonLabel,
+                        IonIcon,
+                        IonGrid,
+                        IonRow,
+                        IonCol,
+                        IonItem,
+                        IonSelect,
+                        IonSelectOption,
+                        IonInput,
+                    ], template: "<ion-card>\n  @if (!hideHeader) {\n    <ion-item-divider [color]=\"isActiveInWizard ? 'primary' : 'light'\">\n      <ion-label>\n        <ion-icon name=\"call\" class=\"ion-margin-end\" />\n        Phone numbers\n      </ion-label>\n    </ion-item-divider>\n  }\n\n  <ion-grid class=\"ion-grid-layout\">\n    @for (phone of phones; track phone.type + phone.number; let i = $index) {\n      <ion-row>\n        <ion-col size=\"auto\">\n          <ion-item>\n            <ion-select\n              interface=\"popover\"\n              [disabled]=\"true\"\n              [value]=\"phone.type\"\n              (ionChange)=\"typeChanged($event, i)\"\n            >\n              @for (t of types; track t.id) {\n                <ion-select-option [value]=\"t.id\" [disabled]=\"disabled\">\n                  {{ t.title }}\n                </ion-select-option>\n              }\n            </ion-select>\n          </ion-item>\n        </ion-col>\n\n        <ion-col>\n          <ion-item>\n            <ion-input\n              type=\"tel\"\n              placeholder=\"phone #\"\n              [disabled]=\"disabled\"\n              [value]=\"phone.number\"\n              (ionChange)=\"numberChanged($event, i)\"\n              (ionBlur)=\"numberChanged($event, i)\"\n            />\n          </ion-item>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-grid>\n</ion-card>\n" }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], hideHeader: [{
+                type: Input
+            }], isActiveInWizard: [{
+                type: Input
+            }], phones: [{
+                type: Input
+            }], phonesChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=phones-form.component.js.map

package/esm2022/lib/components/contact-forms/phones-form/phones-form.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"phones-form.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/contactus/shared/src/lib/components/contact-forms/phones-form/phones-form.component.ts","../../../../../../../../../libs/contactus/shared/src/lib/components/contact-forms/phones-form/phones-form.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,YAAY,EACZ,KAAK,EAEL,MAAM,GAEP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EACL,OAAO,EACP,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,cAAc,EACd,QAAQ,EACR,MAAM,EACN,SAAS,EACT,eAAe,GAChB,MAAM,2BAA2B,CAAC;;AAKnC,MAAM,UAAU,GAAuC;IACrD,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACjC,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;IACrC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAC7B,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;CAC5B,CAAC;AAEF,MAAM,WAAW,GAAa;IAC5B,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,EAAE;IAChC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE;CAC7B,CAAC;AAoBF,MAAM,OAAO,mBAAmB;IAlBhC;QAmBW,aAAQ,GAAG,KAAK,CAAC;QAEjB,eAAU,GAAG,KAAK,CAAC;QACnB,qBAAgB,GAAG,KAAK,CAAC;QAEzB,UAAK,GAAG,UAAU,CAAC;QAEnB,WAAM,GAAc,WAAW,CAAC;QACtB,iBAAY,GAAG,IAAI,YAAY,EAAY,CAAC;KA4BhE;IA1BC,WAAW,CAAC,OAAsB;QAChC,MAAM,YAAY,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;QACvC,IAAI,YAAY,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;YAC/C,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,WAAW,CAAC,KAAY,EAAE,CAAS;QACjC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG;gBACf,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;gBACjB,IAAI,EAAG,KAAqB,CAAC,MAAM,CAAC,KAAK;aAC1C,CAAC;QACJ,CAAC;IACH,CAAC;IAED,aAAa,CAAC,KAAY,EAAE,CAAS;QACnC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG;gBACf,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;gBACjB,MAAM,EAAG,KAAqB,CAAC,MAAM,CAAC,KAAK;aAC5C,CAAC;QACJ,CAAC;IACH,CAAC;8GApCU,mBAAmB;kGAAnB,mBAAmB,iQCzDhC,o2CA8CA,2CDHI,WAAW,+BACX,OAAO,yLACP,cAAc,kGACd,QAAQ,6FACR,OAAO,2JACP,OAAO,wEACP,MAAM,oDACN,MAAM,kTACN,OAAO,0NACP,SAAS,kVACT,eAAe,6FACf,QAAQ;;2FAGC,mBAAmB;kBAlB/B,SAAS;+BACE,mBAAmB,WAEpB;wBACP,WAAW;wBACX,OAAO;wBACP,cAAc;wBACd,QAAQ;wBACR,OAAO;wBACP,OAAO;wBACP,MAAM;wBACN,MAAM;wBACN,OAAO;wBACP,SAAS;wBACT,eAAe;wBACf,QAAQ;qBACT;;sBAGA,KAAK;;sBAEL,KAAK;;sBACL,KAAK;;sBAIL,KAAK;;sBACL,MAAM","sourcesContent":["import {\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  Output,\n  SimpleChanges,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport {\n  IonCard,\n  IonCol,\n  IonGrid,\n  IonIcon,\n  IonInput,\n  IonItem,\n  IonItemDivider,\n  IonLabel,\n  IonRow,\n  IonSelect,\n  IonSelectOption,\n} from '@ionic/angular/standalone';\nimport { IPhone } from '@sneat/contactus-core';\n\ntype PhoneType = 'personal' | 'mobile' | 'work' | 'fax' | 'landline';\n\nconst phoneTypes: { id: PhoneType; title: string }[] = [\n  { id: 'personal', title: 'Personal' },\n  { id: 'mobile', title: 'Mobile' },\n  { id: 'landline', title: 'Landline' },\n  { id: 'work', title: 'Work' },\n  { id: 'fax', title: 'Fax' },\n];\n\nconst emptyPhones: IPhone[] = [\n  { type: 'personal', number: '' },\n  { type: 'work', number: '' },\n];\n\n@Component({\n  selector: 'sneat-phones-form',\n  templateUrl: './phones-form.component.html',\n  imports: [\n    FormsModule,\n    IonCard,\n    IonItemDivider,\n    IonLabel,\n    IonIcon,\n    IonGrid,\n    IonRow,\n    IonCol,\n    IonItem,\n    IonSelect,\n    IonSelectOption,\n    IonInput,\n  ],\n})\nexport class PhonesFormComponent implements OnChanges {\n  @Input() disabled = false;\n\n  @Input() hideHeader = false;\n  @Input() isActiveInWizard = false;\n\n  readonly types = phoneTypes;\n\n  @Input() phones?: IPhone[] = emptyPhones;\n  @Output() readonly phonesChange = new EventEmitter<IPhone[]>();\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const phonesChange = changes['phones'];\n    if (phonesChange && !phonesChange.currentValue) {\n      this.phones = emptyPhones;\n    }\n  }\n\n  typeChanged(event: Event, i: number): void {\n    event.stopPropagation();\n    if (this.phones) {\n      this.phones[i] = {\n        ...this.phones[i],\n        type: (event as CustomEvent).detail.value,\n      };\n    }\n  }\n\n  numberChanged(event: Event, i: number): void {\n    event.stopPropagation();\n    if (this.phones) {\n      this.phones[i] = {\n        ...this.phones[i],\n        number: (event as CustomEvent).detail.value,\n      };\n    }\n  }\n}\n","<ion-card>\n  @if (!hideHeader) {\n    <ion-item-divider [color]=\"isActiveInWizard ? 'primary' : 'light'\">\n      <ion-label>\n        <ion-icon name=\"call\" class=\"ion-margin-end\" />\n        Phone numbers\n      </ion-label>\n    </ion-item-divider>\n  }\n\n  <ion-grid class=\"ion-grid-layout\">\n    @for (phone of phones; track phone.type + phone.number; let i = $index) {\n      <ion-row>\n        <ion-col size=\"auto\">\n          <ion-item>\n            <ion-select\n              interface=\"popover\"\n              [disabled]=\"true\"\n              [value]=\"phone.type\"\n              (ionChange)=\"typeChanged($event, i)\"\n            >\n              @for (t of types; track t.id) {\n                <ion-select-option [value]=\"t.id\" [disabled]=\"disabled\">\n                  {{ t.title }}\n                </ion-select-option>\n              }\n            </ion-select>\n          </ion-item>\n        </ion-col>\n\n        <ion-col>\n          <ion-item>\n            <ion-input\n              type=\"tel\"\n              placeholder=\"phone #\"\n              [disabled]=\"disabled\"\n              [value]=\"phone.number\"\n              (ionChange)=\"numberChanged($event, i)\"\n              (ionBlur)=\"numberChanged($event, i)\"\n            />\n          </ion-item>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-grid>\n</ion-card>\n"]}

package/esm2022/lib/components/contact-forms/relationship-form/contact-relationship-form.component.js

@@ -0,0 +1,125 @@
+import { Component, computed, EventEmitter, inject, Input, input, Output, signal, } from '@angular/core';
+import { FamilyMemberRelation, MemberRelationshipOther, MemberRelationshipUndisclosed, relationshipTitle, } from '@sneat/contactus-core';
+import { WithSpaceInput } from '@sneat/space-services';
+import { SpaceService } from '@sneat/space-services';
+import { ClassName } from '@sneat/ui';
+import { RelationshipFormComponent } from './relationship-form.component';
+import * as i0 from "@angular/core";
+const getRelOptions = (r) => [
+    ...r.map((id) => ({ id, title: relationshipTitle(id) })),
+    { id: MemberRelationshipOther, title: 'Other' },
+    { id: MemberRelationshipUndisclosed, title: 'Undisclosed' },
+];
+export class ContactRelationshipFormComponent extends WithSpaceInput {
+    constructor() {
+        super();
+        this.$contactID = input.required(...(ngDevMode ? [{ debugName: "$contactID" }] : []));
+        this.$itemRef = computed(() => {
+            const spaceID = this.$spaceID();
+            const itemID = this.$contactID();
+            return spaceID && itemID
+                ? {
+                    spaceID,
+                    module: 'contactus',
+                    collection: 'contacts',
+                    itemID,
+                }
+                : undefined;
+        }, ...(ngDevMode ? [{ debugName: "$itemRef" }] : []));
+        this.$ageGroup = input.required(...(ngDevMode ? [{ debugName: "$ageGroup" }] : []));
+        this.$relatedTo = input.required(...(ngDevMode ? [{ debugName: "$relatedTo" }] : []));
+        this.$isProcessing = signal(false, ...(ngDevMode ? [{ debugName: "$isProcessing" }] : []));
+        this.$userSpaceContactID = input.required(...(ngDevMode ? [{ debugName: "$userSpaceContactID" }] : []));
+        this.isActive = false;
+        this.disabled = false;
+        this.relatedAsChange = new EventEmitter();
+        this.spaceService = inject(SpaceService);
+        this.$relationshipOptions = computed(() => {
+            switch (this.$spaceType()) {
+                case 'family': {
+                    return getRelOptions(this.$ageGroup() === 'child'
+                        ? [
+                            FamilyMemberRelation.child,
+                            FamilyMemberRelation.sibling,
+                            FamilyMemberRelation.cousin,
+                        ]
+                        : [
+                            FamilyMemberRelation.spouse,
+                            FamilyMemberRelation.partner,
+                            FamilyMemberRelation.child,
+                            FamilyMemberRelation.sibling,
+                            FamilyMemberRelation.cousin,
+                            FamilyMemberRelation.parent,
+                            FamilyMemberRelation.parentInLaw,
+                            FamilyMemberRelation.grandparent,
+                            FamilyMemberRelation.grandparentInLaw,
+                        ]);
+                }
+                default:
+                    return [];
+            }
+        }, ...(ngDevMode ? [{ debugName: "$relationshipOptions" }] : []));
+    }
+    onRelatedAsChanged(relatedChange) {
+        const contactID = this.$contactID();
+        const spaceID = this.$spaceID();
+        if (!contactID) {
+            const relRoles = {};
+            relatedChange.remove?.rolesToItem?.forEach((role) => delete relRoles[role]);
+            relatedChange.add?.rolesToItem?.forEach((role) => (relRoles[role] = { created: { at: '', by: '' } }));
+            this.relatedAsChange.emit(relRoles);
+            return;
+        }
+        if (!spaceID) {
+            throw new Error('onRelatedAsChanged() - spaceID is not set');
+        }
+        const userContactID = this.$userSpaceContactID();
+        if (!userContactID) {
+            throw new Error('onRelatedAsChanged() - userContactID is not set');
+        }
+        const request = {
+            spaceID,
+            moduleID: 'contactus',
+            collection: 'contacts',
+            id: contactID,
+            related: [
+                {
+                    itemRef: {
+                        spaceID: this.$spaceID() || '',
+                        module: 'contactus',
+                        collection: 'contacts',
+                        itemID: userContactID,
+                    },
+                    ...relatedChange,
+                },
+            ],
+        };
+        this.$isProcessing.set(true);
+        this.spaceService.updateRelated(request).subscribe({
+            next: () => {
+                this.$isProcessing.set(false);
+            },
+            error: (err) => {
+                this.errorLogger.logError(err, 'Failed to update contact');
+                setTimeout(() => this.$isProcessing.set(false), 500);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactRelationshipFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ContactRelationshipFormComponent, isStandalone: true, selector: "sneat-contact-relationship-form", inputs: { $contactID: { classPropertyName: "$contactID", publicName: "$contactID", isSignal: true, isRequired: true, transformFunction: null }, $ageGroup: { classPropertyName: "$ageGroup", publicName: "$ageGroup", isSignal: true, isRequired: true, transformFunction: null }, $relatedTo: { classPropertyName: "$relatedTo", publicName: "$relatedTo", isSignal: true, isRequired: true, transformFunction: null }, $userSpaceContactID: { classPropertyName: "$userSpaceContactID", publicName: "$userSpaceContactID", isSignal: true, isRequired: true, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { relatedAsChange: "relatedAsChange" }, providers: [
+            { provide: ClassName, useValue: 'ContactRelationshipFormComponent' },
+        ], usesInheritance: true, ngImport: i0, template: "<sneat-relationship-form\n  [disabled]=\"disabled\"\n  [isActive]=\"isActive\"\n  [$space]=\"$space()\"\n  [$itemRef]=\"$itemRef()\"\n  [$relatedTo]=\"$relatedTo()\"\n  [$relationshipOptions]=\"$relationshipOptions()\"\n  [$isProcessing]=\"$isProcessing()\"\n  (relatedAsChange)=\"onRelatedAsChanged($event)\"\n/>\n", dependencies: [{ kind: "component", type: RelationshipFormComponent, selector: "sneat-relationship-form", inputs: ["$itemRef", "$relatedTo", "$relationshipOptions", "$isProcessing", "isActive", "disabled", "maxNumberOfRelationships"], outputs: ["relatedAsChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactRelationshipFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-contact-relationship-form', imports: [RelationshipFormComponent], providers: [
+                        { provide: ClassName, useValue: 'ContactRelationshipFormComponent' },
+                    ], template: "<sneat-relationship-form\n  [disabled]=\"disabled\"\n  [isActive]=\"isActive\"\n  [$space]=\"$space()\"\n  [$itemRef]=\"$itemRef()\"\n  [$relatedTo]=\"$relatedTo()\"\n  [$relationshipOptions]=\"$relationshipOptions()\"\n  [$isProcessing]=\"$isProcessing()\"\n  (relatedAsChange)=\"onRelatedAsChanged($event)\"\n/>\n" }]
+        }], ctorParameters: () => [], propDecorators: { $contactID: [{ type: i0.Input, args: [{ isSignal: true, alias: "$contactID", required: true }] }], $ageGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "$ageGroup", required: true }] }], $relatedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "$relatedTo", required: true }] }], $userSpaceContactID: [{ type: i0.Input, args: [{ isSignal: true, alias: "$userSpaceContactID", required: true }] }], isActive: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], relatedAsChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=contact-relationship-form.component.js.map

package/esm2022/lib/components/contact-forms/relationship-form/contact-relationship-form.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-relationship-form.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/contactus/shared/src/lib/components/contact-forms/relationship-form/contact-relationship-form.component.ts","../../../../../../../../../libs/contactus/shared/src/lib/components/contact-forms/relationship-form/contact-relationship-form.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  computed,\n  EventEmitter,\n  inject,\n  Input,\n  input,\n  Output,\n  signal,\n} from '@angular/core';\nimport {\n  FamilyMemberRelation,\n  MemberRelationshipOther,\n  MemberRelationshipUndisclosed,\n  relationshipTitle,\n} from '@sneat/contactus-core';\nimport { AgeGroupID } from '@sneat/core';\nimport { WithSpaceInput } from '@sneat/space-services';\nimport { IRelatedChange, IUpdateRelatedRequest } from '@sneat/space-models';\nimport { SpaceService } from '@sneat/space-services';\nimport { ClassName, ISelectItem } from '@sneat/ui';\nimport { RelationshipFormComponent } from './relationship-form.component';\nimport {\n  IRelatedTo,\n  IRelationshipRoles,\n  ISpaceModuleItemRef,\n  WritableRelationshipRoles,\n} from '@sneat/dto';\n\nconst getRelOptions = (r: FamilyMemberRelation[]): ISelectItem[] => [\n  ...r.map((id) => ({ id, title: relationshipTitle(id) })),\n  { id: MemberRelationshipOther, title: 'Other' },\n  { id: MemberRelationshipUndisclosed, title: 'Undisclosed' },\n];\n\n@Component({\n  selector: 'sneat-contact-relationship-form',\n  templateUrl: './contact-relationship-form.component.html',\n  imports: [RelationshipFormComponent],\n  providers: [\n    { provide: ClassName, useValue: 'ContactRelationshipFormComponent' },\n  ],\n})\nexport class ContactRelationshipFormComponent extends WithSpaceInput {\n  public readonly $contactID = input.required<string | undefined>();\n\n  protected readonly $itemRef = computed<ISpaceModuleItemRef | undefined>(\n    () => {\n      const spaceID = this.$spaceID();\n      const itemID = this.$contactID();\n      return spaceID && itemID\n        ? {\n            spaceID,\n            module: 'contactus',\n            collection: 'contacts',\n            itemID,\n          }\n        : undefined;\n    },\n  );\n\n  public readonly $ageGroup = input.required<AgeGroupID | undefined>();\n\n  public readonly $relatedTo = input.required<IRelatedTo | undefined>();\n  public readonly $isProcessing = signal(false);\n\n  public readonly $userSpaceContactID = input.required<\n    string | null | undefined\n  >();\n\n  @Input() public isActive = false;\n  @Input() public disabled = false;\n\n  @Output() readonly relatedAsChange = new EventEmitter<IRelationshipRoles>();\n\n  private readonly spaceService = inject(SpaceService);\n\n  public constructor() {\n    super();\n  }\n\n  protected onRelatedAsChanged(relatedChange: IRelatedChange): void {\n    const contactID = this.$contactID();\n    const spaceID = this.$spaceID();\n    if (!contactID) {\n      const relRoles: WritableRelationshipRoles = {};\n      relatedChange.remove?.rolesToItem?.forEach(\n        (role: string) => delete relRoles[role],\n      );\n      relatedChange.add?.rolesToItem?.forEach(\n        (role: string) => (relRoles[role] = { created: { at: '', by: '' } }),\n      );\n      this.relatedAsChange.emit(relRoles);\n      return;\n    }\n    if (!spaceID) {\n      throw new Error('onRelatedAsChanged() - spaceID is not set');\n    }\n    const userContactID = this.$userSpaceContactID();\n    if (!userContactID) {\n      throw new Error('onRelatedAsChanged() - userContactID is not set');\n    }\n\n    const request: IUpdateRelatedRequest = {\n      spaceID,\n      moduleID: 'contactus',\n      collection: 'contacts',\n      id: contactID,\n      related: [\n        {\n          itemRef: {\n            spaceID: this.$spaceID() || '',\n            module: 'contactus',\n            collection: 'contacts',\n            itemID: userContactID,\n          },\n          ...relatedChange,\n        },\n      ],\n    };\n    this.$isProcessing.set(true);\n    this.spaceService.updateRelated(request).subscribe({\n      next: () => {\n        this.$isProcessing.set(false);\n      },\n      error: (err) => {\n        this.errorLogger.logError(err, 'Failed to update contact');\n        setTimeout(() => this.$isProcessing.set(false), 500);\n      },\n    });\n  }\n\n  protected $relationshipOptions = computed(() => {\n    switch (this.$spaceType()) {\n      case 'family': {\n        return getRelOptions(\n          this.$ageGroup() === 'child'\n            ? ([\n                FamilyMemberRelation.child,\n                FamilyMemberRelation.sibling,\n                FamilyMemberRelation.cousin,\n              ] as FamilyMemberRelation[])\n            : ([\n                FamilyMemberRelation.spouse,\n                FamilyMemberRelation.partner,\n                FamilyMemberRelation.child,\n                FamilyMemberRelation.sibling,\n                FamilyMemberRelation.cousin,\n                FamilyMemberRelation.parent,\n                FamilyMemberRelation.parentInLaw,\n                FamilyMemberRelation.grandparent,\n                FamilyMemberRelation.grandparentInLaw,\n              ] as FamilyMemberRelation[]),\n        );\n      }\n      default:\n        return [];\n    }\n  });\n}\n","<sneat-relationship-form\n  [disabled]=\"disabled\"\n  [isActive]=\"isActive\"\n  [$space]=\"$space()\"\n  [$itemRef]=\"$itemRef()\"\n  [$relatedTo]=\"$relatedTo()\"\n  [$relationshipOptions]=\"$relationshipOptions()\"\n  [$isProcessing]=\"$isProcessing()\"\n  (relatedAsChange)=\"onRelatedAsChanged($event)\"\n/>\n"]}

package/esm2022/lib/components/contact-forms/relationship-form/index.js

@@ -0,0 +1,2 @@
+export * from './relationship-form.component';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/contact-forms/relationship-form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../libs/contactus/shared/src/lib/components/contact-forms/relationship-form/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './relationship-form.component';\n"]}

package/esm2022/lib/components/contact-forms/relationship-form/relationship-form.component.js

@@ -0,0 +1,136 @@
+import { ChangeDetectionStrategy, Component, computed, EventEmitter, inject, input, Input, Output, } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IonButton, IonButtons, IonCard, IonIcon, IonItem, IonItemDivider, IonLabel, IonSpinner, } from '@ionic/angular/standalone';
+import { SneatUserService } from '@sneat/auth-core';
+import { formNexInAnimation } from '@sneat/core';
+import { getRelatedItemByKey, } from '@sneat/dto';
+import { SpaceService } from '@sneat/space-services';
+import { ClassName, SelectFromListComponent } from '@sneat/ui';
+import { SpaceRelatedFormComponent } from '../space-related-form.component';
+import * as i0 from "@angular/core";
+export class RelationshipFormComponent extends SpaceRelatedFormComponent {
+    constructor() {
+        super(...arguments);
+        this.userService = inject(SneatUserService);
+        this.$itemRef = input.required(...(ngDevMode ? [{ debugName: "$itemRef" }] : []));
+        this.$relatedTo = input.required(...(ngDevMode ? [{ debugName: "$relatedTo" }] : []));
+        this.$relationshipOptions = input.required(...(ngDevMode ? [{ debugName: "$relationshipOptions" }] : []));
+        this.$isProcessing = input(...(ngDevMode ? [undefined, { debugName: "$isProcessing" }] : []));
+        this.$rolesOfItemRelatedToTarget = computed(() => {
+            const relatedTo = this.$relatedTo();
+            if (!relatedTo?.related) {
+                return undefined;
+            }
+            const relatedItem = getRelatedItemByKey(relatedTo.related, relatedTo.key);
+            // console.log('$rolesOfItemRelatedToTarget', relatedTo, relatedItem);
+            if (!relatedItem) {
+                return []; // if we return undefined, the "loading..." spinner will be shown
+            }
+            const rolesToItem = [];
+            Object.entries(relatedItem.rolesToItem || {}).forEach(([id, rel]) => {
+                const roleOfItem = {
+                    id,
+                    ...rel,
+                };
+                rolesToItem.push(roleOfItem);
+            });
+            return rolesToItem;
+        }, ...(ngDevMode ? [{ debugName: "$rolesOfItemRelatedToTarget" }] : []));
+        this.$relationshipsCount = computed(() => this.$rolesOfItemRelatedToTarget()?.length || 0, ...(ngDevMode ? [{ debugName: "$relationshipsCount" }] : []));
+        this.$hasRelationships = computed(() => !!this.$relationshipsCount(), ...(ngDevMode ? [{ debugName: "$hasRelationships" }] : []));
+        this.$useSelect = computed(() => {
+            const n = this.$rolesOfItemRelatedToTarget()?.length;
+            return n === 0 || n === 1;
+        }, ...(ngDevMode ? [{ debugName: "$useSelect" }] : []));
+        this.relatedAsChange = new EventEmitter();
+        this.isActive = false;
+        this.disabled = false;
+        this.relatedAsSingle = new FormControl('');
+        this.spaceService = inject(SpaceService);
+        // Defined here as it is used in the template twice
+        this.label = 'Related to me as';
+        this.maxNumberOfRelationships = 2;
+    }
+    onRelationshipChanged(value) {
+        // console.log('onRelationshipChanged()', value);
+        // this.relatedAsRelationships = [value];
+        this.relatedAsChange.emit({ add: { rolesToItem: [value] } });
+    }
+    openAddRelationship(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        alert('Not implemented yet');
+    }
+    removeRelationship(event, id) {
+        event.preventDefault();
+        event.stopPropagation();
+        // console.log('removeRelationship()', event);
+        const itemRef = this.$itemRef();
+        if (!itemRef) {
+            throw new Error('itemRef is not set');
+        }
+        const relatedToKey = this.$relatedTo()?.key;
+        if (!relatedToKey) {
+            throw new Error('relatedToKey is not set');
+        }
+        const request = {
+            spaceID: itemRef.spaceID,
+            moduleID: itemRef.module,
+            collection: itemRef?.collection,
+            id: itemRef.itemID,
+            related: [
+                {
+                    itemRef: relatedToKey,
+                    remove: {
+                        rolesToItem: [id],
+                    },
+                },
+            ],
+        };
+        this.spaceService.updateRelated(request).subscribe({
+            next: () => {
+                this.relatedAsChange.emit({ remove: { rolesToItem: [id] } });
+            },
+            error: (err) => {
+                console.error('Error removing relationship', err);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RelationshipFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: RelationshipFormComponent, isStandalone: true, selector: "sneat-relationship-form", inputs: { $itemRef: { classPropertyName: "$itemRef", publicName: "$itemRef", isSignal: true, isRequired: true, transformFunction: null }, $relatedTo: { classPropertyName: "$relatedTo", publicName: "$relatedTo", isSignal: true, isRequired: true, transformFunction: null }, $relationshipOptions: { classPropertyName: "$relationshipOptions", publicName: "$relationshipOptions", isSignal: true, isRequired: true, transformFunction: null }, $isProcessing: { classPropertyName: "$isProcessing", publicName: "$isProcessing", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, maxNumberOfRelationships: { classPropertyName: "maxNumberOfRelationships", publicName: "maxNumberOfRelationships", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { relatedAsChange: "relatedAsChange" }, providers: [
+            {
+                provide: ClassName,
+                useValue: 'RelationshipFormComponent',
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<ion-card @formNextIn>\n  <!--\t<p>$relatedTo: {{ $relatedTo() | json }}</p>-->\n  <!--\t<p>$spaceType: {{ $spaceType() }}</p>-->\n  <!--\t<p>$rolesOfItemRelatedToTarget(): {{ $rolesOfItemRelatedToTarget() | json }}</p>-->\n  <!--\t<p>$relationshipOptions: {{ $relationshipOptions()|json }}</p>-->\n\n  <ion-item-divider\n    [color]=\"isActive ? 'primary' : 'light'\"\n    class=\"sneat-tiny-end-padding\"\n  >\n    <ion-label>\n      <b>{{ label }}</b>\n    </ion-label>\n    @if (\n      $hasRelationships() && $relationshipsCount() < maxNumberOfRelationships\n    ) {\n      <ion-buttons slot=\"end\">\n        <ion-button (click)=\"openAddRelationship($event)\" color=\"medium\">\n          <ion-icon name=\"add\" slot=\"start\" />\n          <ion-label>Add</ion-label>\n        </ion-button>\n      </ion-buttons>\n    }\n  </ion-item-divider>\n\n  <!-- we do not use select even if a single role selected as it requires a \"replace\" implementation that is quite complex without big benefits to UX -->\n\n  @if ($rolesOfItemRelatedToTarget(); as rolesOfItemRelatedToTarget) {\n    @for (rel of rolesOfItemRelatedToTarget; track rel.id) {\n      <ion-item class=\"sneat-tiny-end-padding\">\n        <ion-label>{{ rel.id }}</ion-label>\n        <ion-buttons slot=\"end\">\n          <ion-button\n            color=\"medium\"\n            title=\"Remove relationship\"\n            (click)=\"removeRelationship($event, rel.id)\"\n          >\n            <ion-icon name=\"close-outline\" />\n          </ion-button>\n        </ion-buttons>\n      </ion-item>\n    } @empty {\n      <!-- we do use select from list when no roles selected for great UX -->\n      <sneat-select-from-list\n        [items]=\"$relationshipOptions()\"\n        [label]=\"label\"\n        [$isProcessing]=\"$isProcessing()\"\n        (valueChange)=\"onRelationshipChanged($event)\"\n      />\n    }\n  } @else {\n    <ion-item>\n      <ion-label color=\"medium\">Loading...</ion-label>\n      <ion-spinner name=\"lines-small\" slot=\"end\" />\n    </ion-item>\n  }\n</ion-card>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: SelectFromListComponent, selector: "sneat-select-from-list", inputs: ["value", "filterLabel", "label", "listLabel", "listLabelColor", "isFilterable", "isLoading", "items", "items$", "lastItemLines", "labelPlacement", "justify", "other", "canAdd", "filterItem", "selectMode", "isReadonly", "$isProcessing", "sortBy"], outputs: ["valueChange", "filterChanged"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }], animations: [formNexInAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RelationshipFormComponent, decorators: [{
+            type: Component,
+            args: [{ animations: [formNexInAnimation], imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        IonCard,
+                        IonItem,
+                        IonItemDivider,
+                        IonLabel,
+                        SelectFromListComponent,
+                        IonButtons,
+                        IonButton,
+                        IonIcon,
+                        IonSpinner,
+                    ], providers: [
+                        {
+                            provide: ClassName,
+                            useValue: 'RelationshipFormComponent',
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'sneat-relationship-form', template: "<ion-card @formNextIn>\n  <!--\t<p>$relatedTo: {{ $relatedTo() | json }}</p>-->\n  <!--\t<p>$spaceType: {{ $spaceType() }}</p>-->\n  <!--\t<p>$rolesOfItemRelatedToTarget(): {{ $rolesOfItemRelatedToTarget() | json }}</p>-->\n  <!--\t<p>$relationshipOptions: {{ $relationshipOptions()|json }}</p>-->\n\n  <ion-item-divider\n    [color]=\"isActive ? 'primary' : 'light'\"\n    class=\"sneat-tiny-end-padding\"\n  >\n    <ion-label>\n      <b>{{ label }}</b>\n    </ion-label>\n    @if (\n      $hasRelationships() && $relationshipsCount() < maxNumberOfRelationships\n    ) {\n      <ion-buttons slot=\"end\">\n        <ion-button (click)=\"openAddRelationship($event)\" color=\"medium\">\n          <ion-icon name=\"add\" slot=\"start\" />\n          <ion-label>Add</ion-label>\n        </ion-button>\n      </ion-buttons>\n    }\n  </ion-item-divider>\n\n  <!-- we do not use select even if a single role selected as it requires a \"replace\" implementation that is quite complex without big benefits to UX -->\n\n  @if ($rolesOfItemRelatedToTarget(); as rolesOfItemRelatedToTarget) {\n    @for (rel of rolesOfItemRelatedToTarget; track rel.id) {\n      <ion-item class=\"sneat-tiny-end-padding\">\n        <ion-label>{{ rel.id }}</ion-label>\n        <ion-buttons slot=\"end\">\n          <ion-button\n            color=\"medium\"\n            title=\"Remove relationship\"\n            (click)=\"removeRelationship($event, rel.id)\"\n          >\n            <ion-icon name=\"close-outline\" />\n          </ion-button>\n        </ion-buttons>\n      </ion-item>\n    } @empty {\n      <!-- we do use select from list when no roles selected for great UX -->\n      <sneat-select-from-list\n        [items]=\"$relationshipOptions()\"\n        [label]=\"label\"\n        [$isProcessing]=\"$isProcessing()\"\n        (valueChange)=\"onRelationshipChanged($event)\"\n      />\n    }\n  } @else {\n    <ion-item>\n      <ion-label color=\"medium\">Loading...</ion-label>\n      <ion-spinner name=\"lines-small\" slot=\"end\" />\n    </ion-item>\n  }\n</ion-card>\n" }]
+        }], propDecorators: { $itemRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "$itemRef", required: true }] }], $relatedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "$relatedTo", required: true }] }], $relationshipOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "$relationshipOptions", required: true }] }], $isProcessing: [{ type: i0.Input, args: [{ isSignal: true, alias: "$isProcessing", required: false }] }], relatedAsChange: [{
+                type: Output
+            }], isActive: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], maxNumberOfRelationships: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=relationship-form.component.js.map

package/esm2022/lib/components/contact-forms/relationship-form/relationship-form.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"relationship-form.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/contactus/shared/src/lib/components/contact-forms/relationship-form/relationship-form.component.ts","../../../../../../../../../libs/contactus/shared/src/lib/components/contact-forms/relationship-form/relationship-form.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  EventEmitter,\n  inject,\n  input,\n  Input,\n  Output,\n} from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport {\n  IonButton,\n  IonButtons,\n  IonCard,\n  IonIcon,\n  IonItem,\n  IonItemDivider,\n  IonLabel,\n  IonSpinner,\n} from '@ionic/angular/standalone';\nimport { SneatUserService } from '@sneat/auth-core';\nimport { formNexInAnimation } from '@sneat/core';\nimport {\n  getRelatedItemByKey,\n  IRelatedTo,\n  IRelationshipRole,\n  ISpaceModuleItemRef,\n} from '@sneat/dto';\nimport { IRelatedChange, IUpdateRelatedRequest } from '@sneat/space-models';\nimport { SpaceService } from '@sneat/space-services';\nimport { ClassName, ISelectItem, SelectFromListComponent } from '@sneat/ui';\nimport { SpaceRelatedFormComponent } from '../space-related-form.component';\n\ninterface IRelationshipWithID extends IRelationshipRole {\n  readonly id: string;\n}\n\n@Component({\n  animations: [formNexInAnimation],\n  imports: [\n    FormsModule,\n    ReactiveFormsModule,\n    IonCard,\n    IonItem,\n    IonItemDivider,\n    IonLabel,\n    SelectFromListComponent,\n    IonButtons,\n    IonButton,\n    IonIcon,\n    IonSpinner,\n  ],\n  providers: [\n    {\n      provide: ClassName,\n      useValue: 'RelationshipFormComponent',\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'sneat-relationship-form',\n  templateUrl: 'relationship-form.component.html',\n})\nexport class RelationshipFormComponent extends SpaceRelatedFormComponent {\n  private readonly userService = inject(SneatUserService);\n\n  public readonly $itemRef = input.required<ISpaceModuleItemRef | undefined>();\n\n  public readonly $relatedTo = input.required<IRelatedTo | undefined>();\n\n  public readonly $relationshipOptions = input.required<\n    readonly ISelectItem[] | undefined\n  >();\n\n  public readonly $isProcessing = input<boolean>();\n\n  protected readonly $rolesOfItemRelatedToTarget = computed<\n    readonly IRelationshipWithID[] | undefined\n  >(() => {\n    const relatedTo = this.$relatedTo();\n    if (!relatedTo?.related) {\n      return undefined;\n    }\n    const relatedItem = getRelatedItemByKey(relatedTo.related, relatedTo.key);\n    // console.log('$rolesOfItemRelatedToTarget', relatedTo, relatedItem);\n    if (!relatedItem) {\n      return []; // if we return undefined, the \"loading...\" spinner will be shown\n    }\n    const rolesToItem: IRelationshipWithID[] = [];\n    Object.entries(relatedItem.rolesToItem || {}).forEach(([id, rel]) => {\n      const roleOfItem: IRelationshipWithID = {\n        id,\n        ...rel,\n      };\n      rolesToItem.push(roleOfItem);\n    });\n    return rolesToItem;\n  });\n\n  protected readonly $relationshipsCount = computed(\n    () => this.$rolesOfItemRelatedToTarget()?.length || 0,\n  );\n\n  protected readonly $hasRelationships = computed(\n    () => !!this.$relationshipsCount(),\n  );\n\n  protected readonly $useSelect = computed(() => {\n    const n = this.$rolesOfItemRelatedToTarget()?.length;\n    return n === 0 || n === 1;\n  });\n\n  @Output() readonly relatedAsChange = new EventEmitter<IRelatedChange>();\n\n  @Input() public isActive = false;\n  @Input() public disabled = false;\n\n  protected readonly relatedAsSingle = new FormControl<string>('');\n\n  private readonly spaceService = inject(SpaceService);\n\n  // Defined here as it is used in the template twice\n  protected readonly label = 'Related to me as';\n\n  protected onRelationshipChanged(value: string): void {\n    // console.log('onRelationshipChanged()', value);\n    // this.relatedAsRelationships = [value];\n    this.relatedAsChange.emit({ add: { rolesToItem: [value] } });\n  }\n\n  @Input() maxNumberOfRelationships = 2;\n\n  protected openAddRelationship(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    alert('Not implemented yet');\n  }\n\n  protected removeRelationship(event: Event, id: string): void {\n    event.preventDefault();\n    event.stopPropagation();\n    // console.log('removeRelationship()', event);\n    const itemRef = this.$itemRef();\n    if (!itemRef) {\n      throw new Error('itemRef is not set');\n    }\n    const relatedToKey = this.$relatedTo()?.key;\n    if (!relatedToKey) {\n      throw new Error('relatedToKey is not set');\n    }\n    const request: IUpdateRelatedRequest = {\n      spaceID: itemRef.spaceID,\n      moduleID: itemRef.module,\n      collection: itemRef?.collection,\n      id: itemRef.itemID,\n      related: [\n        {\n          itemRef: relatedToKey,\n          remove: {\n            rolesToItem: [id],\n          },\n        },\n      ],\n    };\n    this.spaceService.updateRelated(request).subscribe({\n      next: () => {\n        this.relatedAsChange.emit({ remove: { rolesToItem: [id] } });\n      },\n      error: (err) => {\n        console.error('Error removing relationship', err);\n      },\n    });\n  }\n}\n","<ion-card @formNextIn>\n  <!--\t<p>$relatedTo: {{ $relatedTo() | json }}</p>-->\n  <!--\t<p>$spaceType: {{ $spaceType() }}</p>-->\n  <!--\t<p>$rolesOfItemRelatedToTarget(): {{ $rolesOfItemRelatedToTarget() | json }}</p>-->\n  <!--\t<p>$relationshipOptions: {{ $relationshipOptions()|json }}</p>-->\n\n  <ion-item-divider\n    [color]=\"isActive ? 'primary' : 'light'\"\n    class=\"sneat-tiny-end-padding\"\n  >\n    <ion-label>\n      <b>{{ label }}</b>\n    </ion-label>\n    @if (\n      $hasRelationships() && $relationshipsCount() < maxNumberOfRelationships\n    ) {\n      <ion-buttons slot=\"end\">\n        <ion-button (click)=\"openAddRelationship($event)\" color=\"medium\">\n          <ion-icon name=\"add\" slot=\"start\" />\n          <ion-label>Add</ion-label>\n        </ion-button>\n      </ion-buttons>\n    }\n  </ion-item-divider>\n\n  <!-- we do not use select even if a single role selected as it requires a \"replace\" implementation that is quite complex without big benefits to UX -->\n\n  @if ($rolesOfItemRelatedToTarget(); as rolesOfItemRelatedToTarget) {\n    @for (rel of rolesOfItemRelatedToTarget; track rel.id) {\n      <ion-item class=\"sneat-tiny-end-padding\">\n        <ion-label>{{ rel.id }}</ion-label>\n        <ion-buttons slot=\"end\">\n          <ion-button\n            color=\"medium\"\n            title=\"Remove relationship\"\n            (click)=\"removeRelationship($event, rel.id)\"\n          >\n            <ion-icon name=\"close-outline\" />\n          </ion-button>\n        </ion-buttons>\n      </ion-item>\n    } @empty {\n      <!-- we do use select from list when no roles selected for great UX -->\n      <sneat-select-from-list\n        [items]=\"$relationshipOptions()\"\n        [label]=\"label\"\n        [$isProcessing]=\"$isProcessing()\"\n        (valueChange)=\"onRelationshipChanged($event)\"\n      />\n    }\n  } @else {\n    <ion-item>\n      <ion-label color=\"medium\">Loading...</ion-label>\n      <ion-spinner name=\"lines-small\" slot=\"end\" />\n    </ion-item>\n  }\n</ion-card>\n"]}

package/esm2022/lib/components/contact-forms/role-form/contact-role-form.component.js

@@ -0,0 +1,98 @@
+import { ChangeDetectionStrategy, Component, computed, EventEmitter, input, Output, signal, inject, } from '@angular/core';
+import { IonCard, IonItemDivider, IonLabel } from '@ionic/angular/standalone';
+import { ClassName, SelectFromListComponent } from '@sneat/ui';
+import { ContactGroupService } from '@sneat/contactus-services';
+import { SneatBaseComponent } from '@sneat/ui';
+import * as i0 from "@angular/core";
+export class ContactRoleFormComponent extends SneatBaseComponent {
+    constructor() {
+        super();
+        this.$contactGroupID = input.required(...(ngDevMode ? [{ debugName: "$contactGroupID" }] : []));
+        this.$contactGroup = computed(() => {
+            const id = this.$contactGroupID();
+            const groups = this.$groups();
+            const group = groups?.find((g) => g.id === id);
+            this.contactGroupChange.emit(group);
+            return group;
+        }, ...(ngDevMode ? [{ debugName: "$contactGroup" }] : []));
+        this.contactGroupIDChange = new EventEmitter();
+        this.contactGroupChange = new EventEmitter();
+        this.$contactRoleID = input.required(...(ngDevMode ? [{ debugName: "$contactRoleID" }] : []));
+        this.contactRoleIDChange = new EventEmitter();
+        this.contactRoleChange = new EventEmitter();
+        this.$groups = signal(undefined, ...(ngDevMode ? [{ debugName: "$groups" }] : []));
+        this.$groupItems = computed(() => {
+            const groups = this.$groups();
+            return (groups?.map((g) => ({
+                id: g.id,
+                title: g.dbo.title,
+                emoji: g.dbo.emoji,
+            })) || []);
+        }, ...(ngDevMode ? [{ debugName: "$groupItems" }] : []));
+        this.$roleItems = computed(() => {
+            const group = this.$contactGroup();
+            if (!group) {
+                return [];
+            }
+            return group.dbo?.roles
+                ?.filter((r) => r.id !== 'pet')
+                ?.map((r) => ({
+                id: r.id,
+                title: r.brief.title,
+                emoji: r.brief.emoji,
+            }));
+        }, ...(ngDevMode ? [{ debugName: "$roleItems" }] : []));
+        this.roleBriefID = (o) => o.id;
+        this.groupID = (_, o) => o.id;
+        const contactGroupService = inject(ContactGroupService);
+        contactGroupService
+            .getContactGroups()
+            .pipe(this.takeUntilDestroyed())
+            .subscribe({
+            next: (groups) => {
+                this.$groups.set(groups);
+            },
+        });
+    }
+    onContactGroupIDChanged(contactGroupID) {
+        // event.stopPropagation();
+        this.contactGroupIDChange.emit(contactGroupID);
+        const group = this.$groups()?.find((g) => g.id === contactGroupID);
+        this.contactGroupChange.emit(group);
+        this.clearContactType();
+    }
+    onContactRoleIDChanged(contactRoleID) {
+        this.contactRoleIDChange.emit(contactRoleID);
+        const group = this.$contactGroup();
+        const role = group?.dbo?.roles?.find((r) => r.id == contactRoleID);
+        this.contactRoleChange.emit(role);
+    }
+    clearContactType() {
+        this.contactRoleIDChange.emit(undefined);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactRoleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ContactRoleFormComponent, isStandalone: true, selector: "sneat-contact-role-form", inputs: { $contactGroupID: { classPropertyName: "$contactGroupID", publicName: "$contactGroupID", isSignal: true, isRequired: true, transformFunction: null }, $contactRoleID: { classPropertyName: "$contactRoleID", publicName: "$contactRoleID", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { contactGroupIDChange: "contactGroupIDChange", contactGroupChange: "contactGroupChange", contactRoleIDChange: "contactRoleIDChange", contactRoleChange: "contactRoleChange" }, providers: [
+            {
+                provide: ClassName,
+                useValue: 'ContactRoleFormComponent',
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<ion-card>\n  @if (!$contactGroupID()) {\n    <ion-item-divider color=\"primary\">\n      <ion-label>Please select contact group</ion-label>\n    </ion-item-divider>\n  }\n  <sneat-select-from-list\n    label=\"Contact group\"\n    [items]=\"$groupItems()\"\n    [value]=\"$contactGroupID() || ''\"\n    (valueChange)=\"onContactGroupIDChanged($event)\"\n  />\n  @if ($contactGroupID()) {\n    @if (!$contactRoleID()) {\n      <ion-item-divider color=\"primary\">\n        Please select contact role\n      </ion-item-divider>\n    }\n    <sneat-select-from-list\n      label=\"Contact role\"\n      sortBy=\"title\"\n      [items]=\"$roleItems()\"\n      [value]=\"$contactRoleID() || ''\"\n      (valueChange)=\"onContactRoleIDChanged($event)\"\n    />\n  }\n</ion-card>\n", dependencies: [{ kind: "component", type: SelectFromListComponent, selector: "sneat-select-from-list", inputs: ["value", "filterLabel", "label", "listLabel", "listLabelColor", "isFilterable", "isLoading", "items", "items$", "lastItemLines", "labelPlacement", "justify", "other", "canAdd", "filterItem", "selectMode", "isReadonly", "$isProcessing", "sortBy"], outputs: ["valueChange", "filterChanged"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactRoleFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-contact-role-form', imports: [SelectFromListComponent, IonCard, IonItemDivider, IonLabel], providers: [
+                        {
+                            provide: ClassName,
+                            useValue: 'ContactRoleFormComponent',
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-card>\n  @if (!$contactGroupID()) {\n    <ion-item-divider color=\"primary\">\n      <ion-label>Please select contact group</ion-label>\n    </ion-item-divider>\n  }\n  <sneat-select-from-list\n    label=\"Contact group\"\n    [items]=\"$groupItems()\"\n    [value]=\"$contactGroupID() || ''\"\n    (valueChange)=\"onContactGroupIDChanged($event)\"\n  />\n  @if ($contactGroupID()) {\n    @if (!$contactRoleID()) {\n      <ion-item-divider color=\"primary\">\n        Please select contact role\n      </ion-item-divider>\n    }\n    <sneat-select-from-list\n      label=\"Contact role\"\n      sortBy=\"title\"\n      [items]=\"$roleItems()\"\n      [value]=\"$contactRoleID() || ''\"\n      (valueChange)=\"onContactRoleIDChanged($event)\"\n    />\n  }\n</ion-card>\n" }]
+        }], ctorParameters: () => [], propDecorators: { $contactGroupID: [{ type: i0.Input, args: [{ isSignal: true, alias: "$contactGroupID", required: true }] }], contactGroupIDChange: [{
+                type: Output
+            }], contactGroupChange: [{
+                type: Output
+            }], $contactRoleID: [{ type: i0.Input, args: [{ isSignal: true, alias: "$contactRoleID", required: true }] }], contactRoleIDChange: [{
+                type: Output
+            }], contactRoleChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=contact-role-form.component.js.map

package/esm2022/lib/components/contact-forms/role-form/contact-role-form.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-role-form.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/contactus/shared/src/lib/components/contact-forms/role-form/contact-role-form.component.ts","../../../../../../../../../libs/contactus/shared/src/lib/components/contact-forms/role-form/contact-role-form.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  EventEmitter,\n  input,\n  Output,\n  signal,\n  inject,\n} from '@angular/core';\nimport { IonCard, IonItemDivider, IonLabel } from '@ionic/angular/standalone';\nimport { ClassName, SelectFromListComponent } from '@sneat/ui';\nimport { ContactGroupService } from '@sneat/contactus-services';\nimport { IIdAndDbo } from '@sneat/core';\nimport {\n  ContactRole,\n  IContactGroupDbo,\n  IContactRoleWithIdAndBrief,\n} from '@sneat/contactus-core';\nimport { SneatBaseComponent } from '@sneat/ui';\n\n@Component({\n  selector: 'sneat-contact-role-form',\n  templateUrl: './contact-role-form.component.html',\n  imports: [SelectFromListComponent, IonCard, IonItemDivider, IonLabel],\n  providers: [\n    {\n      provide: ClassName,\n      useValue: 'ContactRoleFormComponent',\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ContactRoleFormComponent extends SneatBaseComponent {\n  public $contactGroupID = input.required<string | undefined>();\n\n  protected $contactGroup = computed(() => {\n    const id = this.$contactGroupID();\n    const groups = this.$groups();\n    const group = groups?.find((g) => g.id === id);\n    this.contactGroupChange.emit(group);\n    return group;\n  });\n\n  @Output() readonly contactGroupIDChange = new EventEmitter<\n    string | undefined\n  >();\n\n  @Output() readonly contactGroupChange = new EventEmitter<\n    IIdAndDbo<IContactGroupDbo> | undefined\n  >();\n\n  public readonly $contactRoleID = input.required<ContactRole | undefined>();\n\n  @Output() readonly contactRoleIDChange = new EventEmitter<\n    ContactRole | undefined\n  >();\n\n  @Output() readonly contactRoleChange = new EventEmitter<\n    IContactRoleWithIdAndBrief | undefined\n  >();\n\n  protected readonly $groups = signal<\n    readonly IIdAndDbo<IContactGroupDbo>[] | undefined\n  >(undefined);\n\n  protected readonly $groupItems = computed(() => {\n    const groups = this.$groups();\n    return (\n      groups?.map((g) => ({\n        id: g.id,\n        title: g.dbo.title,\n        emoji: g.dbo.emoji,\n      })) || []\n    );\n  });\n\n  protected readonly $roleItems = computed(() => {\n    const group = this.$contactGroup();\n    if (!group) {\n      return [];\n    }\n    return group.dbo?.roles\n      ?.filter((r) => r.id !== 'pet')\n      ?.map((r) => ({\n        id: r.id,\n        title: r.brief.title,\n        emoji: r.brief.emoji,\n      }));\n  });\n\n  protected readonly roleBriefID = (o: IContactRoleWithIdAndBrief) => o.id;\n  protected readonly groupID = (_: number, o: IIdAndDbo<IContactGroupDbo>) =>\n    o.id;\n\n  constructor() {\n    super();\n    const contactGroupService = inject(ContactGroupService);\n    contactGroupService\n      .getContactGroups()\n      .pipe(this.takeUntilDestroyed())\n      .subscribe({\n        next: (groups) => {\n          this.$groups.set(groups);\n        },\n      });\n  }\n\n  protected onContactGroupIDChanged(contactGroupID: string): void {\n    // event.stopPropagation();\n    this.contactGroupIDChange.emit(contactGroupID);\n    const group = this.$groups()?.find((g) => g.id === contactGroupID);\n    this.contactGroupChange.emit(group);\n    this.clearContactType();\n  }\n\n  protected onContactRoleIDChanged(contactRoleID: string): void {\n    this.contactRoleIDChange.emit(contactRoleID as ContactRole);\n    const group = this.$contactGroup();\n    const role = group?.dbo?.roles?.find((r) => r.id == contactRoleID);\n    this.contactRoleChange.emit(role);\n  }\n\n  protected clearContactType(): void {\n    this.contactRoleIDChange.emit(undefined);\n  }\n}\n","<ion-card>\n  @if (!$contactGroupID()) {\n    <ion-item-divider color=\"primary\">\n      <ion-label>Please select contact group</ion-label>\n    </ion-item-divider>\n  }\n  <sneat-select-from-list\n    label=\"Contact group\"\n    [items]=\"$groupItems()\"\n    [value]=\"$contactGroupID() || ''\"\n    (valueChange)=\"onContactGroupIDChanged($event)\"\n  />\n  @if ($contactGroupID()) {\n    @if (!$contactRoleID()) {\n      <ion-item-divider color=\"primary\">\n        Please select contact role\n      </ion-item-divider>\n    }\n    <sneat-select-from-list\n      label=\"Contact role\"\n      sortBy=\"title\"\n      [items]=\"$roleItems()\"\n      [value]=\"$contactRoleID() || ''\"\n      (valueChange)=\"onContactRoleIDChanged($event)\"\n    />\n  }\n</ion-card>\n"]}

package/esm2022/lib/components/contact-forms/role-form/index.js

@@ -0,0 +1,2 @@
+export * from './contact-role-form.component';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/contact-forms/role-form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../libs/contactus/shared/src/lib/components/contact-forms/role-form/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './contact-role-form.component';\n"]}

package/esm2022/lib/components/contact-forms/roles-form/index.js

@@ -0,0 +1,2 @@
+export * from './roles-form.component';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/contact-forms/roles-form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../libs/contactus/shared/src/lib/components/contact-forms/roles-form/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './roles-form.component';\n"]}