@sneat/contactus-shared 0.2.0

package/esm2022/lib/components/contacts-component/contacts.component.js

@@ -0,0 +1,200 @@
+import { ChangeDetectionStrategy, Component, computed, EventEmitter, inject, Input, input, Output, signal, } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IonBadge, IonCard, IonCol, IonGrid, IonIcon, IonItem, IonItemSliding, IonLabel, IonList, IonRow, IonSegment, IonSegmentButton, } from '@ionic/angular/standalone';
+import { FilterItemComponent } from '@sneat/components';
+import { addSpace, filterContactsByTextAndRole, } from '@sneat/contactus-core';
+import { defaultFamilyContactGroups } from '@sneat/contactus-services';
+import { listItemAnimations } from '@sneat/core';
+import { SpaceNavService } from '@sneat/space-services';
+import { ClassName, SneatBaseComponent } from '@sneat/ui';
+import { Observable } from 'rxjs';
+import { ContactsByTypeComponent } from '../contacts-by-type';
+import { ContactsListItemComponent } from '../contacts-list-item/contacts-list-item.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class ContactsComponent extends SneatBaseComponent {
+    onFilterChanged(filter) {
+        this.$filter.set(filter);
+    }
+    constructor() {
+        super();
+        this.$space = input.required(...(ngDevMode ? [{ debugName: "$space" }] : []));
+        this.$roleID = input(...(ngDevMode ? [undefined, { debugName: "$roleID" }] : []));
+        this.$role = signal(undefined, ...(ngDevMode ? [{ debugName: "$role" }] : []));
+        this.roleChange = new EventEmitter();
+        this.contactsChange = new EventEmitter();
+        this.goToNewContactPage = true;
+        this.addContactEvent = new EventEmitter();
+        this.$showTabs = computed(() => !this.$roleID() && this.$space().type === 'family', ...(ngDevMode ? [{ debugName: "$showTabs" }] : []));
+        this.$filter = signal('', ...(ngDevMode ? [{ debugName: "$filter" }] : []));
+        this.spaceNavService = inject(SpaceNavService);
+        this.$allContacts = input.required(...(ngDevMode ? [{ debugName: "$allContacts" }] : []));
+        this.$contactsWithSpace = computed(() => {
+            const contacts = this.$contacts();
+            if (!contacts) {
+                return undefined;
+            }
+            const space = this.$space();
+            return contacts?.map(addSpace(space));
+        }, ...(ngDevMode ? [{ debugName: "$contactsWithSpace" }] : []));
+        this.familyGroupDefinitions = defaultFamilyContactGroups;
+        this.segment = 'groups';
+        this.groups = [];
+        this.$contactsByRole = computed(() => {
+            const contacts = this.$allContacts() || [];
+            const contactsByRole = {
+                '': [],
+            };
+            const space = this.$space();
+            contacts.forEach((c) => {
+                const contact = { ...c, space };
+                contactsByRole[''].push(contact);
+                c.brief?.roles?.forEach((role) => {
+                    const roleContacts = contactsByRole[role];
+                    if (roleContacts) {
+                        roleContacts.push(contact);
+                    }
+                    else {
+                        contactsByRole[role] = [contact];
+                    }
+                });
+            });
+            return contactsByRole;
+        }, ...(ngDevMode ? [{ debugName: "$contactsByRole" }] : []));
+        this.roles = [
+            { id: '', title: 'All', iconName: 'people-outline' },
+            { id: 'freight_agent', title: 'Agents', iconName: 'body-outline' },
+            { id: 'buyer', title: 'Buyers', iconName: 'cash-outline' },
+            { id: 'dispatcher', title: 'Dispatchers', iconName: 'business-outline' },
+            { id: 'trucker', title: 'Truckers', iconName: 'bus-outline' },
+            { id: 'shipping_line', title: 'Shipping lines', iconName: 'boat-outline' },
+        ];
+        this.$canAdd = computed(() => {
+            const role = this.$roleID();
+            return role !== 'tenant' && role !== 'landlord';
+        }, ...(ngDevMode ? [{ debugName: "$canAdd" }] : []));
+        this.$contacts = computed(() => {
+            const allContacts = this.$allContacts();
+            if (!allContacts) {
+                return undefined;
+            }
+            const role = this.$roleID(), filter = this.$filter().trim().toLowerCase();
+            const space = this.$space();
+            return filterContactsByTextAndRole(allContacts, filter, role)?.map(addSpace(space));
+        }, ...(ngDevMode ? [{ debugName: "$contacts" }] : []));
+        this.contactClicked = (event, contact) => {
+            this.console.log(`ContactsComponent.contactClicked(contact{id=${contact.id})`);
+            event.stopPropagation();
+            event.preventDefault();
+            const space = this.$space();
+            this.spaceNavService
+                .navigateForwardToSpacePage(space, `contact/${contact.id}`, {
+                state: { contact },
+            })
+                .catch(this.errorLogger.logErrorHandler('failed to navigate to contact page'));
+        };
+        this.addContactClick = new EventEmitter();
+        this.addNewContact = async (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            if (!this.goToNewContactPage) {
+                const role = this.$role();
+                this.addContactClick.emit({
+                    event,
+                    role,
+                });
+            }
+            const space = this.$space();
+            if (!space.id && !space.type) {
+                return;
+            }
+            try {
+                await this.spaceNavService.navigateForwardToSpacePage(space, 'new-contact', { queryParams: this.$roleID() ? { role: this.$roleID() } : undefined });
+            }
+            catch (err) {
+                this.errorLogger.logError(err, 'failed to navigate to new contact page');
+            }
+        };
+    }
+    ngOnInit() {
+        this.command?.pipe(this.takeUntilDestroyed()).subscribe((command) => {
+            switch (command.name) {
+                case 'new_contact':
+                    this.addNewContact(command.event).catch(this.errorLogger.logErrorHandler('failed to navigate to new contact page'));
+                    break;
+                case 'reset_selected':
+                    this.contactsChange.emit(this.$allContacts()?.map((c) => Object.assign(c, { isChecked: false })));
+                    break;
+                case 'select_all':
+                    break;
+            }
+        });
+    }
+    contactsNumber(role) {
+        const contactsByRole = this.$contactsByRole();
+        const roleContacts = (contactsByRole && contactsByRole[role]) ?? [];
+        return roleContacts?.length ?? 0;
+    }
+    contactSelectionChanged(args) {
+        this.contactsChange.emit(this.$allContacts()?.map((c) => Object.assign(c, {
+            isChecked: c.id === args.id ? args.checked : c.isChecked,
+        })));
+    }
+    goGroup(group) {
+        const space = this.$space();
+        this.spaceNavService
+            .navigateForwardToSpacePage(space, `group/${group.id}`, {
+            state: {
+                group: group,
+            },
+        })
+            .catch(this.errorLogger.logErrorHandler('failed to navigate to contact creation page'));
+    }
+    onRoleChanged(event) {
+        event.stopPropagation();
+        this.roleChange.emit(event.detail.value);
+    }
+    addGroup(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        alert('Not implemented yet');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ContactsComponent, isStandalone: true, selector: "sneat-contacts", inputs: { $space: { classPropertyName: "$space", publicName: "$space", isSignal: true, isRequired: true, transformFunction: null }, $roleID: { classPropertyName: "$roleID", publicName: "$roleID", isSignal: true, isRequired: false, transformFunction: null }, command: { classPropertyName: "command", publicName: "command", isSignal: false, isRequired: false, transformFunction: null }, goToNewContactPage: { classPropertyName: "goToNewContactPage", publicName: "goToNewContactPage", isSignal: false, isRequired: false, transformFunction: null }, $allContacts: { classPropertyName: "$allContacts", publicName: "$allContacts", isSignal: true, isRequired: true, transformFunction: null }, contactClicked: { classPropertyName: "contactClicked", publicName: "contactClicked", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { roleChange: "roleChange", contactsChange: "contactsChange", addContactEvent: "addContactEvent", addContactClick: "addContactClick" }, providers: [{ provide: ClassName, useValue: 'ContactsComponent' }], usesInheritance: true, ngImport: i0, template: "@let space = $space();\n@let role = $roleID();\n\n@if (space.type === \"company\") {\n  <ion-segment [value]=\"role\" (ionChange)=\"onRoleChanged($event)\">\n    <!--\t\t<ion-segment-button>All</ion-segment-button>-->\n    @for (r of roles; track r.id) {\n      <ion-segment-button [value]=\"r.id\">\n        @if (r.iconName) {\n          <ion-icon [name]=\"r.iconName\" />\n        }\n        <ion-label style=\"font-size: smaller\"\n          >{{ r.title }}\n          <ion-badge color=\"light\">\n            <ion-label\n              color=\"medium\"\n              style=\"font-size: smaller; font-weight: normal\"\n              >{{ contactsNumber(r.id) }}\n            </ion-label>\n          </ion-badge>\n        </ion-label>\n      </ion-segment-button>\n    }\n  </ion-segment>\n}\n\n<ion-card>\n  <ion-grid class=\"ion-grid-layout\">\n    <ion-row>\n      <ion-col size=\"12\" size-sm=\"5\">\n        <sneat-filter-item\n          [$filter]=\"$filter()\"\n          (changed)=\"onFilterChanged($event)\"\n        />\n      </ion-col>\n      @if ($showTabs()) {\n        <ion-col size=\"12\" size-sm=\"7\">\n          <ion-item lines=\"none\" class=\"ion-no-padding-ion-no-margin\">\n            <ion-segment [(ngModel)]=\"segment\">\n              <ion-segment-button value=\"list\">\n                <ion-label>List</ion-label>\n              </ion-segment-button>\n              <ion-segment-button value=\"groups\">\n                <ion-label>By type</ion-label>\n              </ion-segment-button>\n            </ion-segment>\n            <!--\t\t\t\t\t\tMake it to work in a modal - too narrow at the moment.-->\n            <!--\t\t\t\t\t\t@if (segment === \"groups\") {-->\n            <!--\t\t\t\t\t\t\t<ion-buttons slot=\"end\">-->\n            <!--\t\t\t\t\t\t\t\t<ion-button color=\"tertiary\" (click)=\"addGroup($event)\">-->\n            <!--\t\t\t\t\t\t\t\t\t<ion-icon name=\"add-outline\" slot=\"start\" />-->\n            <!--\t\t\t\t\t\t\t\t\t<ion-label>Add group</ion-label>-->\n            <!--\t\t\t\t\t\t\t\t</ion-button>-->\n            <!--\t\t\t\t\t\t\t</ion-buttons>-->\n            <!--\t\t\t\t\t\t}-->\n          </ion-item>\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  @if (segment === \"list\" || space.type !== \"family\") {\n    <ion-list>\n      @for (contact of $contacts(); track contact.id) {\n        <ion-item-sliding @listItem>\n          <sneat-contacts-list-item\n            [$space]=\"$space()\"\n            [$contact]=\"contact\"\n            [contactClicked]=\"contactClicked\"\n            [excludeRole]=\"$roleID()\"\n          />\n        </ion-item-sliding>\n      }\n      @if ($canAdd()) {\n        <ion-item button (click)=\"addNewContact($event)\">\n          <ion-icon name=\"add\" color=\"primary\" />\n          <ion-label color=\"primary\">Add contact</ion-label>\n        </ion-item>\n      }\n    </ion-list>\n  }\n\n  @if (segment === \"groups\") {\n    <ion-list>\n      @if (space.type === \"family\") {\n        <sneat-contacts-by-type\n          [$contacts]=\"$contactsWithSpace()\"\n          [$contactGroupDefinitions]=\"familyGroupDefinitions\"\n          [$space]=\"space\"\n          [$filter]=\"$filter()\"\n          [contactClicked]=\"contactClicked\"\n          [command]=\"command\"\n          [goToNewContactPage]=\"goToNewContactPage\"\n          (contactSelectionChange)=\"contactSelectionChanged($event)\"\n          (addContactClick)=\"addContactClick.emit($event)\"\n        />\n      }\n      @if (groups) {\n        @for (group of groups; track group.id) {\n          <ion-item (click)=\"goGroup(group)\" tappable>\n            <ion-label>\n              {{ group.brief?.title }}\n            </ion-label>\n            @if (group.dbo?.numberOf?.members) {\n              <ion-badge color=\"light\">\n                {{ group.dbo?.numberOf?.members }}\n              </ion-badge>\n            }\n          </ion-item>\n        }\n      }\n    </ion-list>\n  }\n</ion-card>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ContactsByTypeComponent, selector: "sneat-contacts-by-type", inputs: ["$space", "$contactGroupDefinitions", "$contacts", "$filter", "contactClicked", "command", "goToNewContactPage"], outputs: ["contactsChange", "contactSelectionChange", "addContactClick"] }, { kind: "component", type: ContactsListItemComponent, selector: "sneat-contacts-list-item", inputs: ["$contact", "$space", "hideCheckbox", "excludeRole", "showAddress", "showBorder", "hideRoles", "relatedTo", "showRelatedAs", "showRelatedItems", "contactClicked"], outputs: ["checkChange"] }, { kind: "component", type: FilterItemComponent, selector: "sneat-filter-item", inputs: ["$filter"], outputs: ["changed", "blured"] }, { kind: "component", type: IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { 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: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }], animations: [listItemAnimations], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-contacts', imports: [
+                        FormsModule,
+                        ContactsByTypeComponent,
+                        ContactsListItemComponent,
+                        FilterItemComponent,
+                        IonSegment,
+                        IonSegmentButton,
+                        IonIcon,
+                        IonLabel,
+                        IonBadge,
+                        IonCard,
+                        IonGrid,
+                        IonRow,
+                        IonCol,
+                        IonItem,
+                        IonList,
+                        IonItemSliding,
+                    ], providers: [{ provide: ClassName, useValue: 'ContactsComponent' }], changeDetection: ChangeDetectionStrategy.OnPush, animations: [listItemAnimations], template: "@let space = $space();\n@let role = $roleID();\n\n@if (space.type === \"company\") {\n  <ion-segment [value]=\"role\" (ionChange)=\"onRoleChanged($event)\">\n    <!--\t\t<ion-segment-button>All</ion-segment-button>-->\n    @for (r of roles; track r.id) {\n      <ion-segment-button [value]=\"r.id\">\n        @if (r.iconName) {\n          <ion-icon [name]=\"r.iconName\" />\n        }\n        <ion-label style=\"font-size: smaller\"\n          >{{ r.title }}\n          <ion-badge color=\"light\">\n            <ion-label\n              color=\"medium\"\n              style=\"font-size: smaller; font-weight: normal\"\n              >{{ contactsNumber(r.id) }}\n            </ion-label>\n          </ion-badge>\n        </ion-label>\n      </ion-segment-button>\n    }\n  </ion-segment>\n}\n\n<ion-card>\n  <ion-grid class=\"ion-grid-layout\">\n    <ion-row>\n      <ion-col size=\"12\" size-sm=\"5\">\n        <sneat-filter-item\n          [$filter]=\"$filter()\"\n          (changed)=\"onFilterChanged($event)\"\n        />\n      </ion-col>\n      @if ($showTabs()) {\n        <ion-col size=\"12\" size-sm=\"7\">\n          <ion-item lines=\"none\" class=\"ion-no-padding-ion-no-margin\">\n            <ion-segment [(ngModel)]=\"segment\">\n              <ion-segment-button value=\"list\">\n                <ion-label>List</ion-label>\n              </ion-segment-button>\n              <ion-segment-button value=\"groups\">\n                <ion-label>By type</ion-label>\n              </ion-segment-button>\n            </ion-segment>\n            <!--\t\t\t\t\t\tMake it to work in a modal - too narrow at the moment.-->\n            <!--\t\t\t\t\t\t@if (segment === \"groups\") {-->\n            <!--\t\t\t\t\t\t\t<ion-buttons slot=\"end\">-->\n            <!--\t\t\t\t\t\t\t\t<ion-button color=\"tertiary\" (click)=\"addGroup($event)\">-->\n            <!--\t\t\t\t\t\t\t\t\t<ion-icon name=\"add-outline\" slot=\"start\" />-->\n            <!--\t\t\t\t\t\t\t\t\t<ion-label>Add group</ion-label>-->\n            <!--\t\t\t\t\t\t\t\t</ion-button>-->\n            <!--\t\t\t\t\t\t\t</ion-buttons>-->\n            <!--\t\t\t\t\t\t}-->\n          </ion-item>\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  @if (segment === \"list\" || space.type !== \"family\") {\n    <ion-list>\n      @for (contact of $contacts(); track contact.id) {\n        <ion-item-sliding @listItem>\n          <sneat-contacts-list-item\n            [$space]=\"$space()\"\n            [$contact]=\"contact\"\n            [contactClicked]=\"contactClicked\"\n            [excludeRole]=\"$roleID()\"\n          />\n        </ion-item-sliding>\n      }\n      @if ($canAdd()) {\n        <ion-item button (click)=\"addNewContact($event)\">\n          <ion-icon name=\"add\" color=\"primary\" />\n          <ion-label color=\"primary\">Add contact</ion-label>\n        </ion-item>\n      }\n    </ion-list>\n  }\n\n  @if (segment === \"groups\") {\n    <ion-list>\n      @if (space.type === \"family\") {\n        <sneat-contacts-by-type\n          [$contacts]=\"$contactsWithSpace()\"\n          [$contactGroupDefinitions]=\"familyGroupDefinitions\"\n          [$space]=\"space\"\n          [$filter]=\"$filter()\"\n          [contactClicked]=\"contactClicked\"\n          [command]=\"command\"\n          [goToNewContactPage]=\"goToNewContactPage\"\n          (contactSelectionChange)=\"contactSelectionChanged($event)\"\n          (addContactClick)=\"addContactClick.emit($event)\"\n        />\n      }\n      @if (groups) {\n        @for (group of groups; track group.id) {\n          <ion-item (click)=\"goGroup(group)\" tappable>\n            <ion-label>\n              {{ group.brief?.title }}\n            </ion-label>\n            @if (group.dbo?.numberOf?.members) {\n              <ion-badge color=\"light\">\n                {{ group.dbo?.numberOf?.members }}\n              </ion-badge>\n            }\n          </ion-item>\n        }\n      }\n    </ion-list>\n  }\n</ion-card>\n" }]
+        }], ctorParameters: () => [], propDecorators: { $space: [{ type: i0.Input, args: [{ isSignal: true, alias: "$space", required: true }] }], $roleID: [{ type: i0.Input, args: [{ isSignal: true, alias: "$roleID", required: false }] }], command: [{
+                type: Input
+            }], roleChange: [{
+                type: Output
+            }], contactsChange: [{
+                type: Output
+            }], goToNewContactPage: [{
+                type: Input
+            }], addContactEvent: [{
+                type: Output
+            }], $allContacts: [{ type: i0.Input, args: [{ isSignal: true, alias: "$allContacts", required: true }] }], contactClicked: [{
+                type: Input
+            }], addContactClick: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=contacts.component.js.map

package/esm2022/lib/components/contacts-component/contacts.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contacts.component.js","sourceRoot":"","sources":["../../../../../../../../libs/contactus/shared/src/lib/components/contacts-component/contacts.component.ts","../../../../../../../../libs/contactus/shared/src/lib/components/contacts-component/contacts.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  OnInit,\n  Output,\n  signal,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport {\n  IonBadge,\n  IonCard,\n  IonCol,\n  IonGrid,\n  IonIcon,\n  IonItem,\n  IonItemSliding,\n  IonLabel,\n  IonList,\n  IonRow,\n  IonSegment,\n  IonSegmentButton,\n} from '@ionic/angular/standalone';\nimport { FilterItemComponent } from '@sneat/components';\nimport {\n  addSpace,\n  ContactRole,\n  filterContactsByTextAndRole,\n  IContactWithBrief,\n  IContactWithCheck,\n  IContactWithBriefAndSpace,\n  IMemberGroupContext,\n} from '@sneat/contactus-core';\nimport { defaultFamilyContactGroups } from '@sneat/contactus-services';\nimport { listItemAnimations } from '@sneat/core';\nimport { ISpaceContext } from '@sneat/space-models';\nimport { SpaceNavService } from '@sneat/space-services';\nimport { ClassName, ISelectItem, SneatBaseComponent } from '@sneat/ui';\nimport { Observable } from 'rxjs';\nimport { IContactAddEventArgs } from '../contact-events';\nimport { ContactsByTypeComponent } from '../contacts-by-type';\nimport { ICheckChangedArgs } from '../contacts-checklist';\nimport { ContactsComponentCommand } from '../contacts-component.commands';\nimport { ContactsListItemComponent } from '../contacts-list-item/contacts-list-item.component';\nimport { OptionalContactRoleIdAndBrief } from '../contact-forms/new-contact';\n\n@Component({\n  selector: 'sneat-contacts',\n  templateUrl: './contacts.component.html',\n  imports: [\n    FormsModule,\n    ContactsByTypeComponent,\n    ContactsListItemComponent,\n    FilterItemComponent,\n    IonSegment,\n    IonSegmentButton,\n    IonIcon,\n    IonLabel,\n    IonBadge,\n    IonCard,\n    IonGrid,\n    IonRow,\n    IonCol,\n    IonItem,\n    IonList,\n    IonItemSliding,\n  ],\n  providers: [{ provide: ClassName, useValue: 'ContactsComponent' }],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [listItemAnimations],\n})\nexport class ContactsComponent extends SneatBaseComponent implements OnInit {\n  public readonly $space = input.required<ISpaceContext>();\n\n  public readonly $roleID = input<ContactRole | undefined>();\n  protected readonly $role = signal<OptionalContactRoleIdAndBrief>(undefined);\n\n  @Input() command?: Observable<ContactsComponentCommand>;\n\n  @Output() readonly roleChange = new EventEmitter<undefined | ContactRole>();\n\n  @Output() public readonly contactsChange = new EventEmitter<\n    readonly IContactWithCheck[]\n  >();\n\n  @Input() goToNewContactPage = true;\n  @Output() readonly addContactEvent = new EventEmitter<IContactAddEventArgs>();\n\n  protected readonly $showTabs = computed(\n    () => !this.$roleID() && this.$space().type === 'family',\n  );\n\n  protected readonly $filter = signal<string>('');\n\n  protected onFilterChanged(filter: string): void {\n    this.$filter.set(filter);\n  }\n\n  private readonly spaceNavService = inject(SpaceNavService);\n\n  public readonly $allContacts = input.required<\n    readonly IContactWithCheck[] | undefined\n  >();\n\n  protected readonly $contactsWithSpace = computed<\n    readonly IContactWithBriefAndSpace[] | undefined\n  >(() => {\n    const contacts = this.$contacts();\n    if (!contacts) {\n      return undefined;\n    }\n    const space = this.$space();\n    return contacts?.map(addSpace(space));\n  });\n\n  public constructor() {\n    super();\n  }\n\n  protected readonly familyGroupDefinitions = defaultFamilyContactGroups;\n\n  public segment: 'list' | 'groups' = 'groups';\n\n  public groups: readonly IMemberGroupContext[] = [];\n\n  public ngOnInit() {\n    this.command?.pipe(this.takeUntilDestroyed()).subscribe((command) => {\n      switch (command.name) {\n        case 'new_contact':\n          this.addNewContact(command.event).catch(\n            this.errorLogger.logErrorHandler(\n              'failed to navigate to new contact page',\n            ),\n          );\n          break;\n        case 'reset_selected':\n          this.contactsChange.emit(\n            this.$allContacts()?.map((c) =>\n              Object.assign(c, { isChecked: false }),\n            ),\n          );\n          break;\n        case 'select_all':\n          break;\n      }\n    });\n  }\n\n  private $contactsByRole = computed<\n    Record<string, readonly IContactWithCheck[]>\n  >(() => {\n    const contacts = this.$allContacts() || [];\n    const contactsByRole: Record<string, IContactWithBriefAndSpace[]> = {\n      '': [],\n    };\n    const space = this.$space();\n    contacts.forEach((c) => {\n      const contact = { ...c, space };\n      contactsByRole[''].push(contact);\n      c.brief?.roles?.forEach((role) => {\n        const roleContacts = contactsByRole[role as ContactRole];\n        if (roleContacts) {\n          roleContacts.push(contact);\n        } else {\n          contactsByRole[role] = [contact];\n        }\n      });\n    });\n    return contactsByRole;\n  });\n\n  readonly roles: readonly ISelectItem[] = [\n    { id: '', title: 'All', iconName: 'people-outline' },\n    { id: 'freight_agent', title: 'Agents', iconName: 'body-outline' },\n    { id: 'buyer', title: 'Buyers', iconName: 'cash-outline' },\n    { id: 'dispatcher', title: 'Dispatchers', iconName: 'business-outline' },\n    { id: 'trucker', title: 'Truckers', iconName: 'bus-outline' },\n    { id: 'shipping_line', title: 'Shipping lines', iconName: 'boat-outline' },\n  ];\n\n  protected $canAdd = computed<boolean>(() => {\n    const role = this.$roleID();\n    return role !== 'tenant' && role !== 'landlord';\n  });\n\n  public contactsNumber(role: string): number {\n    const contactsByRole = this.$contactsByRole();\n    const roleContacts = (contactsByRole && contactsByRole[role]) ?? [];\n    return roleContacts?.length ?? 0;\n  }\n\n  protected $contacts = computed(() => {\n    const allContacts = this.$allContacts();\n    if (!allContacts) {\n      return undefined;\n    }\n    const role = this.$roleID(),\n      filter = this.$filter().trim().toLowerCase();\n\n    const space = this.$space();\n\n    return filterContactsByTextAndRole(allContacts, filter, role)?.map(\n      addSpace(space),\n    );\n  });\n\n  @Input() public contactClicked = (\n    event: Event,\n    contact: IContactWithBrief,\n  ): void => {\n    this.console.log(\n      `ContactsComponent.contactClicked(contact{id=${contact.id})`,\n    );\n    event.stopPropagation();\n    event.preventDefault();\n    const space = this.$space();\n    this.spaceNavService\n      .navigateForwardToSpacePage(space, `contact/${contact.id}`, {\n        state: { contact },\n      })\n      .catch(\n        this.errorLogger.logErrorHandler('failed to navigate to contact page'),\n      );\n  };\n\n  @Output() readonly addContactClick = new EventEmitter<IContactAddEventArgs>();\n\n  protected readonly addNewContact = async (event: Event): Promise<void> => {\n    event.stopPropagation();\n    event.preventDefault();\n    if (!this.goToNewContactPage) {\n      const role = this.$role();\n      this.addContactClick.emit({\n        event,\n        role,\n      });\n    }\n    const space = this.$space();\n    if (!space.id && !space.type) {\n      return;\n    }\n    try {\n      await this.spaceNavService.navigateForwardToSpacePage(\n        space,\n        'new-contact',\n        { queryParams: this.$roleID() ? { role: this.$roleID() } : undefined },\n      );\n    } catch (err) {\n      this.errorLogger.logError(err, 'failed to navigate to new contact page');\n    }\n  };\n\n  protected contactSelectionChanged(args: ICheckChangedArgs) {\n    this.contactsChange.emit(\n      this.$allContacts()?.map((c) =>\n        Object.assign(c, {\n          isChecked: c.id === args.id ? args.checked : c.isChecked,\n        }),\n      ),\n    );\n  }\n\n  protected goGroup(group: IMemberGroupContext): void {\n    const space = this.$space();\n    this.spaceNavService\n      .navigateForwardToSpacePage(space, `group/${group.id}`, {\n        state: {\n          group: group,\n        },\n      })\n      .catch(\n        this.errorLogger.logErrorHandler(\n          'failed to navigate to contact creation page',\n        ),\n      );\n  }\n\n  protected onRoleChanged(event: CustomEvent): void {\n    event.stopPropagation();\n    this.roleChange.emit(event.detail.value);\n  }\n\n  protected addGroup(event: Event): void {\n    event.stopPropagation();\n    event.preventDefault();\n    alert('Not implemented yet');\n  }\n}\n","@let space = $space();\n@let role = $roleID();\n\n@if (space.type === \"company\") {\n  <ion-segment [value]=\"role\" (ionChange)=\"onRoleChanged($event)\">\n    <!--\t\t<ion-segment-button>All</ion-segment-button>-->\n    @for (r of roles; track r.id) {\n      <ion-segment-button [value]=\"r.id\">\n        @if (r.iconName) {\n          <ion-icon [name]=\"r.iconName\" />\n        }\n        <ion-label style=\"font-size: smaller\"\n          >{{ r.title }}\n          <ion-badge color=\"light\">\n            <ion-label\n              color=\"medium\"\n              style=\"font-size: smaller; font-weight: normal\"\n              >{{ contactsNumber(r.id) }}\n            </ion-label>\n          </ion-badge>\n        </ion-label>\n      </ion-segment-button>\n    }\n  </ion-segment>\n}\n\n<ion-card>\n  <ion-grid class=\"ion-grid-layout\">\n    <ion-row>\n      <ion-col size=\"12\" size-sm=\"5\">\n        <sneat-filter-item\n          [$filter]=\"$filter()\"\n          (changed)=\"onFilterChanged($event)\"\n        />\n      </ion-col>\n      @if ($showTabs()) {\n        <ion-col size=\"12\" size-sm=\"7\">\n          <ion-item lines=\"none\" class=\"ion-no-padding-ion-no-margin\">\n            <ion-segment [(ngModel)]=\"segment\">\n              <ion-segment-button value=\"list\">\n                <ion-label>List</ion-label>\n              </ion-segment-button>\n              <ion-segment-button value=\"groups\">\n                <ion-label>By type</ion-label>\n              </ion-segment-button>\n            </ion-segment>\n            <!--\t\t\t\t\t\tMake it to work in a modal - too narrow at the moment.-->\n            <!--\t\t\t\t\t\t@if (segment === \"groups\") {-->\n            <!--\t\t\t\t\t\t\t<ion-buttons slot=\"end\">-->\n            <!--\t\t\t\t\t\t\t\t<ion-button color=\"tertiary\" (click)=\"addGroup($event)\">-->\n            <!--\t\t\t\t\t\t\t\t\t<ion-icon name=\"add-outline\" slot=\"start\" />-->\n            <!--\t\t\t\t\t\t\t\t\t<ion-label>Add group</ion-label>-->\n            <!--\t\t\t\t\t\t\t\t</ion-button>-->\n            <!--\t\t\t\t\t\t\t</ion-buttons>-->\n            <!--\t\t\t\t\t\t}-->\n          </ion-item>\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  @if (segment === \"list\" || space.type !== \"family\") {\n    <ion-list>\n      @for (contact of $contacts(); track contact.id) {\n        <ion-item-sliding @listItem>\n          <sneat-contacts-list-item\n            [$space]=\"$space()\"\n            [$contact]=\"contact\"\n            [contactClicked]=\"contactClicked\"\n            [excludeRole]=\"$roleID()\"\n          />\n        </ion-item-sliding>\n      }\n      @if ($canAdd()) {\n        <ion-item button (click)=\"addNewContact($event)\">\n          <ion-icon name=\"add\" color=\"primary\" />\n          <ion-label color=\"primary\">Add contact</ion-label>\n        </ion-item>\n      }\n    </ion-list>\n  }\n\n  @if (segment === \"groups\") {\n    <ion-list>\n      @if (space.type === \"family\") {\n        <sneat-contacts-by-type\n          [$contacts]=\"$contactsWithSpace()\"\n          [$contactGroupDefinitions]=\"familyGroupDefinitions\"\n          [$space]=\"space\"\n          [$filter]=\"$filter()\"\n          [contactClicked]=\"contactClicked\"\n          [command]=\"command\"\n          [goToNewContactPage]=\"goToNewContactPage\"\n          (contactSelectionChange)=\"contactSelectionChanged($event)\"\n          (addContactClick)=\"addContactClick.emit($event)\"\n        />\n      }\n      @if (groups) {\n        @for (group of groups; track group.id) {\n          <ion-item (click)=\"goGroup(group)\" tappable>\n            <ion-label>\n              {{ group.brief?.title }}\n            </ion-label>\n            @if (group.dbo?.numberOf?.members) {\n              <ion-badge color=\"light\">\n                {{ group.dbo?.numberOf?.members }}\n              </ion-badge>\n            }\n          </ion-item>\n        }\n      }\n    </ion-list>\n  }\n</ion-card>\n"]}

package/esm2022/lib/components/contacts-component.commands.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=contacts-component.commands.js.map

package/esm2022/lib/components/contacts-component.commands.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contacts-component.commands.js","sourceRoot":"","sources":["../../../../../../../libs/contactus/shared/src/lib/components/contacts-component.commands.ts"],"names":[],"mappings":"","sourcesContent":["export type ContactsComponentCommandName =\n  | 'new_contact'\n  | 'reset_selected'\n  | 'select_all';\n\nexport interface ContactsComponentCommand {\n  readonly name: ContactsComponentCommandName;\n  readonly event: Event;\n}\n"]}

package/esm2022/lib/components/contacts-list/contacts-list.component.js

@@ -0,0 +1,32 @@
+import { Component, computed, Input, input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { IonItem, IonItemSliding, IonLabel } from '@ionic/angular/standalone';
+import { addSpace } from '@sneat/contactus-core';
+import { ContactsListItemComponent } from '../contacts-list-item/contacts-list-item.component';
+import * as i0 from "@angular/core";
+export class ContactsListComponent {
+    constructor() {
+        this.emptyText = 'No contacts';
+        this.$space = input.required(...(ngDevMode ? [{ debugName: "$space" }] : []));
+        this.$contacts = input.required(...(ngDevMode ? [{ debugName: "$contacts" }] : []));
+        this.$contactsWithSpace = computed(() => {
+            const space = this.$space();
+            return this.$contacts()?.map(addSpace(space)) || [];
+        }, ...(ngDevMode ? [{ debugName: "$contactsWithSpace" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ContactsListComponent, isStandalone: true, selector: "sneat-contacts-list", inputs: { emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, $space: { classPropertyName: "$space", publicName: "$space", isSignal: true, isRequired: true, transformFunction: null }, $contacts: { classPropertyName: "$contacts", publicName: "$contacts", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (contact of $contactsWithSpace(); track contact.id) {\n  <ion-item-sliding>\n    <sneat-contacts-list-item [$space]=\"$space()\" [$contact]=\"contact\" />\n  </ion-item-sliding>\n} @empty {\n  <ion-item lines=\"none\">\n    <ion-label color=\"medium\">{{ emptyText }}</ion-label>\n  </ion-item>\n}\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: ContactsListItemComponent, selector: "sneat-contacts-list-item", inputs: ["$contact", "$space", "hideCheckbox", "excludeRole", "showAddress", "showBorder", "hideRoles", "relatedTo", "showRelatedAs", "showRelatedItems", "contactClicked"], outputs: ["checkChange"] }, { kind: "component", type: IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { 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: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactsListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-contacts-list', imports: [
+                        RouterModule,
+                        ContactsListItemComponent,
+                        IonItemSliding,
+                        IonItem,
+                        IonLabel,
+                    ], template: "@for (contact of $contactsWithSpace(); track contact.id) {\n  <ion-item-sliding>\n    <sneat-contacts-list-item [$space]=\"$space()\" [$contact]=\"contact\" />\n  </ion-item-sliding>\n} @empty {\n  <ion-item lines=\"none\">\n    <ion-label color=\"medium\">{{ emptyText }}</ion-label>\n  </ion-item>\n}\n" }]
+        }], propDecorators: { emptyText: [{
+                type: Input
+            }], $space: [{ type: i0.Input, args: [{ isSignal: true, alias: "$space", required: true }] }], $contacts: [{ type: i0.Input, args: [{ isSignal: true, alias: "$contacts", required: true }] }] } });
+//# sourceMappingURL=contacts-list.component.js.map

package/esm2022/lib/components/contacts-list/contacts-list.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contacts-list.component.js","sourceRoot":"","sources":["../../../../../../../../libs/contactus/shared/src/lib/components/contacts-list/contacts-list.component.ts","../../../../../../../../libs/contactus/shared/src/lib/components/contacts-list/contacts-list.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAqB,MAAM,uBAAuB,CAAC;AAEpE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oDAAoD,CAAC;;AAa/F,MAAM,OAAO,qBAAqB;IAXlC;QAYkB,cAAS,GAAG,aAAa,CAAC;QAC1B,WAAM,GAAG,KAAK,CAAC,QAAQ,iDAAiB,CAAC;QACzC,cAAS,GAAG,KAAK,CAAC,QAAQ,oDAEvC,CAAC;QAEe,uBAAkB,GAAG,QAAQ,CAAC,GAAG,EAAE;YACpD,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAC5B,OAAO,IAAI,CAAC,SAAS,EAAE,EAAE,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;QACtD,CAAC,8DAAC,CAAC;KACJ;8GAXY,qBAAqB;kGAArB,qBAAqB,6dClBlC,kTASA,2CDEI,YAAY,+BACZ,yBAAyB,4QACzB,cAAc,mFACd,OAAO,0NACP,QAAQ;;2FAGC,qBAAqB;kBAXjC,SAAS;+BACE,qBAAqB,WAEtB;wBACP,YAAY;wBACZ,yBAAyB;wBACzB,cAAc;wBACd,OAAO;wBACP,QAAQ;qBACT;;sBAGA,KAAK","sourcesContent":["import { Component, computed, Input, input } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { IonItem, IonItemSliding, IonLabel } from '@ionic/angular/standalone';\nimport { addSpace, IContactWithCheck } from '@sneat/contactus-core';\nimport { ISpaceContext } from '@sneat/space-models';\nimport { ContactsListItemComponent } from '../contacts-list-item/contacts-list-item.component';\n\n@Component({\n  selector: 'sneat-contacts-list',\n  templateUrl: './contacts-list.component.html',\n  imports: [\n    RouterModule,\n    ContactsListItemComponent,\n    IonItemSliding,\n    IonItem,\n    IonLabel,\n  ],\n})\nexport class ContactsListComponent {\n  @Input() public emptyText = 'No contacts';\n  public readonly $space = input.required<ISpaceContext>();\n  public readonly $contacts = input.required<\n    undefined | readonly IContactWithCheck[]\n  >();\n\n  protected readonly $contactsWithSpace = computed(() => {\n    const space = this.$space();\n    return this.$contacts()?.map(addSpace(space)) || [];\n  });\n}\n","@for (contact of $contactsWithSpace(); track contact.id) {\n  <ion-item-sliding>\n    <sneat-contacts-list-item [$space]=\"$space()\" [$contact]=\"contact\" />\n  </ion-item-sliding>\n} @empty {\n  <ion-item lines=\"none\">\n    <ion-label color=\"medium\">{{ emptyText }}</ion-label>\n  </ion-item>\n}\n"]}

package/esm2022/lib/components/contacts-list/index.js

@@ -0,0 +1,3 @@
+export * from './contacts-list.component';
+export * from '../contacts-list-item/contacts-list-item.component';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/contacts-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../libs/contactus/shared/src/lib/components/contacts-list/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oDAAoD,CAAC","sourcesContent":["export * from './contacts-list.component';\nexport * from '../contacts-list-item/contacts-list-item.component';\n"]}

package/esm2022/lib/components/contacts-list-item/contacts-list-item.component.js

@@ -0,0 +1,138 @@
+import { TitleCasePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, EventEmitter, input, Input, Output, inject, } from '@angular/core';
+import { IonBadge, IonButton, IonButtons, IonCheckbox, IonIcon, IonItem, IonItemOption, IonItemOptions, IonLabel, IonText, IonTextarea, } from '@ionic/angular/standalone';
+import { CountryFlagPipe, CountryTitle, GenderColorPipe, GenderIconNamePipe, } from '@sneat/components';
+import { ContactService } from '@sneat/contactus-services';
+import { SpaceNavService } from '@sneat/space-services';
+import { ClassName, SneatBaseComponent } from '@sneat/ui';
+import { PersonTitle } from '../../pipes';
+import { RelatedAsComponent } from './related-as.component';
+import * as i0 from "@angular/core";
+export class ContactsListItemComponent extends SneatBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.spaceNavService = inject(SpaceNavService);
+        this.contactService = inject(ContactService);
+        this.$contact = input.required(...(ngDevMode ? [{ debugName: "$contact" }] : []));
+        this.$contactID = computed(() => this.$contact().id, ...(ngDevMode ? [{ debugName: "$contactID" }] : []));
+        this.$space = input.required(...(ngDevMode ? [{ debugName: "$space" }] : []));
+        this.hideCheckbox = false;
+        this.showAddress = false;
+        this.showBorder = undefined;
+        this.hideRoles = [
+            '--',
+            'creator',
+            'contributor',
+            'owner',
+            'space_member',
+        ];
+        this.showRelatedAs = true;
+        // protected get relatedContacts(): readonly IIdAndBrief<IRelatedItem>[] {
+        // 	return []; // zipMapBriefsWithIDs(this.contact?.dto?.related);
+        // }
+        this.checkChange = new EventEmitter();
+        // @Input() clicked: (contactID: string, event: Event) => void = () => void 0;
+        this.contactClicked = (event, contact) => {
+            this.console.log(`ContactsListItemComponent.contactClicked(contact{id=${contact.id})`);
+            event.stopPropagation();
+            event.preventDefault();
+            this.spaceNavService
+                .navigateForwardToSpacePage(this.$space(), `contact/${contact.id}`, {
+                state: { contact },
+            })
+                .catch(this.errorLogger.logErrorHandler('failed to navigate to contact page'));
+        };
+    }
+    checkboxChanged(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        const args = {
+            event,
+            id: this.$contact().id,
+            checked: !!event.detail.checked,
+            resolve: () => void 0,
+            reject: () => void 0,
+        };
+        this.checkChange.emit(args);
+    }
+    hideRole(role) {
+        return this.hideRoles.includes(role) || role == this.excludeRole;
+    }
+    archiveContact() {
+        const space = this.$space();
+        if (!space.id) {
+            return;
+        }
+        const contact = this.$contact();
+        if (contact?.id) {
+            this.contactService
+                .setContactsStatus({
+                status: 'archived',
+                spaceID: space.id,
+                contactIDs: [contact.id],
+            })
+                .subscribe({
+                next: () => {
+                    // Success - no action needed
+                },
+                error: this.errorLogger.logError,
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactsListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ContactsListItemComponent, isStandalone: true, selector: "sneat-contacts-list-item", inputs: { $contact: { classPropertyName: "$contact", publicName: "$contact", isSignal: true, isRequired: true, transformFunction: null }, $space: { classPropertyName: "$space", publicName: "$space", isSignal: true, isRequired: true, transformFunction: null }, hideCheckbox: { classPropertyName: "hideCheckbox", publicName: "hideCheckbox", isSignal: false, isRequired: false, transformFunction: null }, excludeRole: { classPropertyName: "excludeRole", publicName: "excludeRole", isSignal: false, isRequired: false, transformFunction: null }, showAddress: { classPropertyName: "showAddress", publicName: "showAddress", isSignal: false, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: false, isRequired: false, transformFunction: null }, hideRoles: { classPropertyName: "hideRoles", publicName: "hideRoles", isSignal: false, isRequired: false, transformFunction: null }, relatedTo: { classPropertyName: "relatedTo", publicName: "relatedTo", isSignal: false, isRequired: false, transformFunction: null }, showRelatedAs: { classPropertyName: "showRelatedAs", publicName: "showRelatedAs", isSignal: false, isRequired: false, transformFunction: null }, showRelatedItems: { classPropertyName: "showRelatedItems", publicName: "showRelatedItems", isSignal: false, isRequired: false, transformFunction: null }, contactClicked: { classPropertyName: "contactClicked", publicName: "contactClicked", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { checkChange: "checkChange" }, providers: [
+            {
+                provide: ClassName,
+                useValue: 'ContactsListItemComponent',
+            },
+        ], usesInheritance: true, ngImport: i0, template: "@let contact = $contact();\n\n<ion-item\n  tappable\n  class=\"with-buttons\"\n  [lines]=\"showBorder\"\n  (click)=\"contactClicked($event, contact)\"\n>\n  <ion-icon\n    slot=\"start\"\n    [name]=\"contact.brief.gender | genderIconName\"\n    [color]=\"contact.brief.gender | genderColor\"\n  />\n\n  <ion-label class=\"sneat-badges\">\n    {{ contact | personTitle }}\n    @if (contact.brief.roles?.length) {\n      @for (role of contact.brief.roles || []; track role) {\n        @if (!hideRole(role)) {\n          <ion-badge color=\"light\">\n            <ion-text color=\"medium\">{{ role | titlecase }}</ion-text>\n          </ion-badge>\n        }\n      }\n    }\n\n    @if (showRelatedAs && relatedTo) {\n      <sneat-related-as\n        [$moduleID]=\"'contactus'\"\n        [$collectionID]=\"'contacts'\"\n        [$spaceRef]=\"$space()\"\n        [$itemID]=\"$contactID()\"\n        [$relatedTo]=\"relatedTo\"\n      />\n    }\n    @if (showRelatedItems) {\n      <!--\t\t@for (relatedContact of relatedContacts; track relatedContact.id) {-->\n      <!--\t\t\t@if (firstRelated(relatedContact.brief.rolesOfItem)) {-->\n      <!--\t\t\t\t<ion-badge>-->\n      <!--\t\t\t\t\t<a [href]=\"relatedContact.id\" (click)=\"clicked(relatedContact.id, $event)\">-->\n      <!--\t\t\t\t\t\t{{ relatedContact.id }} (TODO: lookup contact by ID);-->\n      <!--\t\t\t\t\t</a>-->\n      <!--\t\t\t\t</ion-badge>-->\n      <!--\t\t\t}-->\n      <!--\t\t}-->\n    }\n\n    @if (contact.brief.countryID && contact.brief.countryID !== \"--\") {\n      <span\n        style=\"margin: 0 1em\"\n        title=\"{{ contact.brief.countryID | countryTitle }}\"\n      >\n        {{ contact.brief.countryID | countryFlag }}\n      </span>\n    }\n  </ion-label>\n\n  <ion-buttons slot=\"end\">\n    @if (contact.dbo?.email) {\n      <ion-button\n        href=\"mailto:{{ contact.dbo?.email }}\"\n        color=\"primary\"\n        [title]=\"contact.dbo?.email\"\n        (click)=\"$event.stopPropagation()\"\n        >&#64;\n      </ion-button>\n    }\n\n    @if (contact.dbo?.phone) {\n      <ion-button\n        href=\"tel:{{ contact.dbo?.phone }}\"\n        color=\"primary\"\n        [title]=\"contact.dbo?.phone\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <ion-icon name=\"call\" />\n      </ion-button>\n    }\n    @if (!contact.dbo?.email) {\n      <ion-button color=\"light\">&#64;</ion-button>\n    }\n    @if (!contact.dbo?.phone) {\n      <ion-button color=\"light\">\n        <ion-icon name=\"call\" />\n      </ion-button>\n    }\n  </ion-buttons>\n  @if (!hideCheckbox) {\n    <ion-checkbox\n      slot=\"end\"\n      [checked]=\"$contact().isChecked\"\n      (ionChange)=\"checkboxChanged($event)\"\n      (click)=\"$event.stopPropagation()\"\n    />\n  }\n</ion-item>\n\n@if (showAddress && contact.dbo?.address) {\n  <ion-item>\n    <ion-label>Address</ion-label>\n    <ion-textarea readonly=\"readonly\" [value]=\"contact.dbo?.address\" />\n  </ion-item>\n}\n\n<ion-item-options slot=\"end\">\n  <ion-item-option color=\"warning\" (click)=\"archiveContact()\"\n    >Archive\n  </ion-item-option>\n</ion-item-options>\n", styles: ["ion-badge.light{font-weight:400;margin-left:4px}\n"], dependencies: [{ kind: "component", type: RelatedAsComponent, selector: "sneat-related-as", inputs: ["$spaceRef", "$itemID", "$moduleID", "$collectionID", "$relatedTo"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { 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: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { kind: "component", type: IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { kind: "pipe", type: CountryTitle, name: "countryTitle" }, { kind: "pipe", type: CountryFlagPipe, name: "countryFlag" }, { kind: "pipe", type: GenderIconNamePipe, name: "genderIconName" }, { kind: "pipe", type: PersonTitle, name: "personTitle" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: GenderColorPipe, name: "genderColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactsListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-contacts-list-item', imports: [
+                        CountryTitle,
+                        CountryFlagPipe,
+                        GenderIconNamePipe,
+                        PersonTitle,
+                        TitleCasePipe,
+                        GenderColorPipe,
+                        RelatedAsComponent,
+                        IonItem,
+                        IonIcon,
+                        IonLabel,
+                        IonBadge,
+                        IonText,
+                        IonButtons,
+                        IonButton,
+                        IonCheckbox,
+                        IonTextarea,
+                        IonItemOptions,
+                        IonItemOption,
+                    ], providers: [
+                        {
+                            provide: ClassName,
+                            useValue: 'ContactsListItemComponent',
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let contact = $contact();\n\n<ion-item\n  tappable\n  class=\"with-buttons\"\n  [lines]=\"showBorder\"\n  (click)=\"contactClicked($event, contact)\"\n>\n  <ion-icon\n    slot=\"start\"\n    [name]=\"contact.brief.gender | genderIconName\"\n    [color]=\"contact.brief.gender | genderColor\"\n  />\n\n  <ion-label class=\"sneat-badges\">\n    {{ contact | personTitle }}\n    @if (contact.brief.roles?.length) {\n      @for (role of contact.brief.roles || []; track role) {\n        @if (!hideRole(role)) {\n          <ion-badge color=\"light\">\n            <ion-text color=\"medium\">{{ role | titlecase }}</ion-text>\n          </ion-badge>\n        }\n      }\n    }\n\n    @if (showRelatedAs && relatedTo) {\n      <sneat-related-as\n        [$moduleID]=\"'contactus'\"\n        [$collectionID]=\"'contacts'\"\n        [$spaceRef]=\"$space()\"\n        [$itemID]=\"$contactID()\"\n        [$relatedTo]=\"relatedTo\"\n      />\n    }\n    @if (showRelatedItems) {\n      <!--\t\t@for (relatedContact of relatedContacts; track relatedContact.id) {-->\n      <!--\t\t\t@if (firstRelated(relatedContact.brief.rolesOfItem)) {-->\n      <!--\t\t\t\t<ion-badge>-->\n      <!--\t\t\t\t\t<a [href]=\"relatedContact.id\" (click)=\"clicked(relatedContact.id, $event)\">-->\n      <!--\t\t\t\t\t\t{{ relatedContact.id }} (TODO: lookup contact by ID);-->\n      <!--\t\t\t\t\t</a>-->\n      <!--\t\t\t\t</ion-badge>-->\n      <!--\t\t\t}-->\n      <!--\t\t}-->\n    }\n\n    @if (contact.brief.countryID && contact.brief.countryID !== \"--\") {\n      <span\n        style=\"margin: 0 1em\"\n        title=\"{{ contact.brief.countryID | countryTitle }}\"\n      >\n        {{ contact.brief.countryID | countryFlag }}\n      </span>\n    }\n  </ion-label>\n\n  <ion-buttons slot=\"end\">\n    @if (contact.dbo?.email) {\n      <ion-button\n        href=\"mailto:{{ contact.dbo?.email }}\"\n        color=\"primary\"\n        [title]=\"contact.dbo?.email\"\n        (click)=\"$event.stopPropagation()\"\n        >&#64;\n      </ion-button>\n    }\n\n    @if (contact.dbo?.phone) {\n      <ion-button\n        href=\"tel:{{ contact.dbo?.phone }}\"\n        color=\"primary\"\n        [title]=\"contact.dbo?.phone\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <ion-icon name=\"call\" />\n      </ion-button>\n    }\n    @if (!contact.dbo?.email) {\n      <ion-button color=\"light\">&#64;</ion-button>\n    }\n    @if (!contact.dbo?.phone) {\n      <ion-button color=\"light\">\n        <ion-icon name=\"call\" />\n      </ion-button>\n    }\n  </ion-buttons>\n  @if (!hideCheckbox) {\n    <ion-checkbox\n      slot=\"end\"\n      [checked]=\"$contact().isChecked\"\n      (ionChange)=\"checkboxChanged($event)\"\n      (click)=\"$event.stopPropagation()\"\n    />\n  }\n</ion-item>\n\n@if (showAddress && contact.dbo?.address) {\n  <ion-item>\n    <ion-label>Address</ion-label>\n    <ion-textarea readonly=\"readonly\" [value]=\"contact.dbo?.address\" />\n  </ion-item>\n}\n\n<ion-item-options slot=\"end\">\n  <ion-item-option color=\"warning\" (click)=\"archiveContact()\"\n    >Archive\n  </ion-item-option>\n</ion-item-options>\n", styles: ["ion-badge.light{font-weight:400;margin-left:4px}\n"] }]
+        }], propDecorators: { $contact: [{ type: i0.Input, args: [{ isSignal: true, alias: "$contact", required: true }] }], $space: [{ type: i0.Input, args: [{ isSignal: true, alias: "$space", required: true }] }], hideCheckbox: [{
+                type: Input
+            }], excludeRole: [{
+                type: Input
+            }], showAddress: [{
+                type: Input
+            }], showBorder: [{
+                type: Input
+            }], hideRoles: [{
+                type: Input
+            }], relatedTo: [{
+                type: Input
+            }], showRelatedAs: [{
+                type: Input
+            }], showRelatedItems: [{
+                type: Input
+            }], checkChange: [{
+                type: Output
+            }], contactClicked: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=contacts-list-item.component.js.map

package/esm2022/lib/components/contacts-list-item/contacts-list-item.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contacts-list-item.component.js","sourceRoot":"","sources":["../../../../../../../../libs/contactus/shared/src/lib/components/contacts-list-item/contacts-list-item.component.ts","../../../../../../../../libs/contactus/shared/src/lib/components/contacts-list-item/contacts-list-item.component.html"],"names":[],"mappings":"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","sourcesContent":["import { TitleCasePipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  EventEmitter,\n  input,\n  Input,\n  Output,\n  inject,\n} from '@angular/core';\nimport {\n  IonBadge,\n  IonButton,\n  IonButtons,\n  IonCheckbox,\n  IonIcon,\n  IonItem,\n  IonItemOption,\n  IonItemOptions,\n  IonLabel,\n  IonText,\n  IonTextarea,\n} from '@ionic/angular/standalone';\nimport {\n  CountryFlagPipe,\n  CountryTitle,\n  GenderColorPipe,\n  GenderIconNamePipe,\n} from '@sneat/components';\nimport {\n  ContactRole,\n  IContactWithBrief,\n  IContactWithCheck,\n} from '@sneat/contactus-core';\nimport { ContactService } from '@sneat/contactus-services';\nimport { IRelatedTo } from '@sneat/dto';\nimport { ISpaceContext } from '@sneat/space-models';\nimport { SpaceNavService } from '@sneat/space-services';\nimport { ClassName, SneatBaseComponent } from '@sneat/ui';\nimport { PersonTitle } from '../../pipes';\nimport { ICheckChangedArgs } from '../contacts-checklist';\nimport { RelatedAsComponent } from './related-as.component';\n\n@Component({\n  selector: 'sneat-contacts-list-item',\n  templateUrl: './contacts-list-item.component.html',\n  styleUrls: ['./contacts-list-item.component.scss'],\n  imports: [\n    CountryTitle,\n    CountryFlagPipe,\n    GenderIconNamePipe,\n    PersonTitle,\n    TitleCasePipe,\n    GenderColorPipe,\n    RelatedAsComponent,\n    IonItem,\n    IonIcon,\n    IonLabel,\n    IonBadge,\n    IonText,\n    IonButtons,\n    IonButton,\n    IonCheckbox,\n    IonTextarea,\n    IonItemOptions,\n    IonItemOption,\n  ],\n  providers: [\n    {\n      provide: ClassName,\n      useValue: 'ContactsListItemComponent',\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ContactsListItemComponent extends SneatBaseComponent {\n  private readonly spaceNavService = inject(SpaceNavService);\n  private readonly contactService = inject(ContactService);\n\n  public readonly $contact = input.required<IContactWithCheck>();\n  public readonly $contactID = computed(() => this.$contact().id);\n  public readonly $space = input.required<ISpaceContext>();\n\n  @Input() hideCheckbox = false;\n  @Input() excludeRole?: ContactRole;\n  @Input() showAddress = false;\n  @Input() showBorder: undefined | 'full' | 'inset' | 'none' = undefined;\n  @Input() hideRoles: string[] = [\n    '--',\n    'creator',\n    'contributor',\n    'owner',\n    'space_member',\n  ];\n\n  // The `relatedTo` input is not used at the moment\n  // as in related contacts we set showRelatedAs=false\n  // as we are already grouping by related.\n  // TODO: We need to use this in the `/space/contacts` page to show relationship to the current user.\n  @Input() relatedTo?: IRelatedTo;\n  @Input() showRelatedAs = true;\n\n  @Input() showRelatedItems?: boolean;\n  // protected get relatedContacts(): readonly IIdAndBrief<IRelatedItem>[] {\n  // \treturn []; // zipMapBriefsWithIDs(this.contact?.dto?.related);\n  // }\n\n  @Output() public readonly checkChange = new EventEmitter<ICheckChangedArgs>();\n\n  protected checkboxChanged(event: CustomEvent): void {\n    event.stopPropagation();\n    event.preventDefault();\n    const args: ICheckChangedArgs = {\n      event,\n      id: this.$contact().id,\n      checked: !!event.detail.checked,\n      resolve: () => void 0,\n      reject: () => void 0,\n    };\n    this.checkChange.emit(args);\n  }\n\n  hideRole(role: string): boolean {\n    return this.hideRoles.includes(role) || role == this.excludeRole;\n  }\n\n  // @Input() clicked: (contactID: string, event: Event) => void = () => void 0;\n\n  @Input() contactClicked = (\n    event: Event,\n    contact: IContactWithBrief,\n  ): void => {\n    this.console.log(\n      `ContactsListItemComponent.contactClicked(contact{id=${contact.id})`,\n    );\n    event.stopPropagation();\n    event.preventDefault();\n    this.spaceNavService\n      .navigateForwardToSpacePage(this.$space(), `contact/${contact.id}`, {\n        state: { contact },\n      })\n      .catch(\n        this.errorLogger.logErrorHandler('failed to navigate to contact page'),\n      );\n  };\n\n  archiveContact(): void {\n    const space = this.$space();\n    if (!space.id) {\n      return;\n    }\n    const contact = this.$contact();\n    if (contact?.id) {\n      this.contactService\n        .setContactsStatus({\n          status: 'archived',\n          spaceID: space.id,\n          contactIDs: [contact.id],\n        })\n        .subscribe({\n          next: () => {\n            // Success - no action needed\n          },\n          error: this.errorLogger.logError,\n        });\n    }\n  }\n}\n","@let contact = $contact();\n\n<ion-item\n  tappable\n  class=\"with-buttons\"\n  [lines]=\"showBorder\"\n  (click)=\"contactClicked($event, contact)\"\n>\n  <ion-icon\n    slot=\"start\"\n    [name]=\"contact.brief.gender | genderIconName\"\n    [color]=\"contact.brief.gender | genderColor\"\n  />\n\n  <ion-label class=\"sneat-badges\">\n    {{ contact | personTitle }}\n    @if (contact.brief.roles?.length) {\n      @for (role of contact.brief.roles || []; track role) {\n        @if (!hideRole(role)) {\n          <ion-badge color=\"light\">\n            <ion-text color=\"medium\">{{ role | titlecase }}</ion-text>\n          </ion-badge>\n        }\n      }\n    }\n\n    @if (showRelatedAs && relatedTo) {\n      <sneat-related-as\n        [$moduleID]=\"'contactus'\"\n        [$collectionID]=\"'contacts'\"\n        [$spaceRef]=\"$space()\"\n        [$itemID]=\"$contactID()\"\n        [$relatedTo]=\"relatedTo\"\n      />\n    }\n    @if (showRelatedItems) {\n      <!--\t\t@for (relatedContact of relatedContacts; track relatedContact.id) {-->\n      <!--\t\t\t@if (firstRelated(relatedContact.brief.rolesOfItem)) {-->\n      <!--\t\t\t\t<ion-badge>-->\n      <!--\t\t\t\t\t<a [href]=\"relatedContact.id\" (click)=\"clicked(relatedContact.id, $event)\">-->\n      <!--\t\t\t\t\t\t{{ relatedContact.id }} (TODO: lookup contact by ID);-->\n      <!--\t\t\t\t\t</a>-->\n      <!--\t\t\t\t</ion-badge>-->\n      <!--\t\t\t}-->\n      <!--\t\t}-->\n    }\n\n    @if (contact.brief.countryID && contact.brief.countryID !== \"--\") {\n      <span\n        style=\"margin: 0 1em\"\n        title=\"{{ contact.brief.countryID | countryTitle }}\"\n      >\n        {{ contact.brief.countryID | countryFlag }}\n      </span>\n    }\n  </ion-label>\n\n  <ion-buttons slot=\"end\">\n    @if (contact.dbo?.email) {\n      <ion-button\n        href=\"mailto:{{ contact.dbo?.email }}\"\n        color=\"primary\"\n        [title]=\"contact.dbo?.email\"\n        (click)=\"$event.stopPropagation()\"\n        >&#64;\n      </ion-button>\n    }\n\n    @if (contact.dbo?.phone) {\n      <ion-button\n        href=\"tel:{{ contact.dbo?.phone }}\"\n        color=\"primary\"\n        [title]=\"contact.dbo?.phone\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <ion-icon name=\"call\" />\n      </ion-button>\n    }\n    @if (!contact.dbo?.email) {\n      <ion-button color=\"light\">&#64;</ion-button>\n    }\n    @if (!contact.dbo?.phone) {\n      <ion-button color=\"light\">\n        <ion-icon name=\"call\" />\n      </ion-button>\n    }\n  </ion-buttons>\n  @if (!hideCheckbox) {\n    <ion-checkbox\n      slot=\"end\"\n      [checked]=\"$contact().isChecked\"\n      (ionChange)=\"checkboxChanged($event)\"\n      (click)=\"$event.stopPropagation()\"\n    />\n  }\n</ion-item>\n\n@if (showAddress && contact.dbo?.address) {\n  <ion-item>\n    <ion-label>Address</ion-label>\n    <ion-textarea readonly=\"readonly\" [value]=\"contact.dbo?.address\" />\n  </ion-item>\n}\n\n<ion-item-options slot=\"end\">\n  <ion-item-option color=\"warning\" (click)=\"archiveContact()\"\n    >Archive\n  </ion-item-option>\n</ion-item-options>\n"]}

package/esm2022/lib/components/contacts-list-item/related-as.component.js

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, computed, input, } from '@angular/core';
+import { IonText } from '@ionic/angular/standalone';
+import { getRelatedItemByKey } from '@sneat/dto';
+import * as i0 from "@angular/core";
+export class RelatedAsComponent {
+    constructor() {
+        this.$spaceRef = input.required(...(ngDevMode ? [{ debugName: "$spaceRef" }] : []));
+        this.$spaceID = computed(() => this.$spaceRef().id, ...(ngDevMode ? [{ debugName: "$spaceID" }] : []));
+        this.$itemID = input.required(...(ngDevMode ? [{ debugName: "$itemID" }] : []));
+        this.$moduleID = input.required(...(ngDevMode ? [{ debugName: "$moduleID" }] : []));
+        this.$collectionID = input.required(...(ngDevMode ? [{ debugName: "$collectionID" }] : []));
+        this.$relatedTo = input.required(...(ngDevMode ? [{ debugName: "$relatedTo" }] : []));
+        this.$relatedTitle = computed(() => this.$relatedTo().title, ...(ngDevMode ? [{ debugName: "$relatedTitle" }] : []));
+        this.$relatedItemsOfRelatedItem = computed(() => this.$relatedTo().related, ...(ngDevMode ? [{ debugName: "$relatedItemsOfRelatedItem" }] : []));
+        this.$relatedAsRoles = computed(() => {
+            const relatedItem = getRelatedItemByKey(this.$relatedItemsOfRelatedItem(), {
+                module: this.$moduleID(),
+                collection: this.$collectionID(),
+                spaceID: this.$spaceID(),
+                itemID: this.$itemID(),
+            });
+            return relatedItem?.rolesOfItem
+                ? Object.keys(relatedItem.rolesOfItem)
+                : undefined;
+        }, ...(ngDevMode ? [{ debugName: "$relatedAsRoles" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RelatedAsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: RelatedAsComponent, isStandalone: true, selector: "sneat-related-as", inputs: { $spaceRef: { classPropertyName: "$spaceRef", publicName: "$spaceRef", isSignal: true, isRequired: true, transformFunction: null }, $itemID: { classPropertyName: "$itemID", publicName: "$itemID", isSignal: true, isRequired: true, transformFunction: null }, $moduleID: { classPropertyName: "$moduleID", publicName: "$moduleID", isSignal: true, isRequired: true, transformFunction: null }, $collectionID: { classPropertyName: "$collectionID", publicName: "$collectionID", isSignal: true, isRequired: true, transformFunction: null }, $relatedTo: { classPropertyName: "$relatedTo", publicName: "$relatedTo", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let relatedAsRoles = $relatedAsRoles();\n@if (relatedAsRoles?.length) {\n  <ion-text color=\"medium\" class=\"ion-padding-start\">\n    &mdash;\n    @for (\n      role of relatedAsRoles;\n      track role;\n      let last = $last;\n      let first = $first\n    ) {\n      @if (last && !first) {\n        and\n      }\n      {{ role }}\n    }\n    @if ($relatedTitle(); as relatedTitle) {\n      of {{ relatedTitle }}\n    }\n  </ion-text>\n}\n", dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RelatedAsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-related-as', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IonText], template: "@let relatedAsRoles = $relatedAsRoles();\n@if (relatedAsRoles?.length) {\n  <ion-text color=\"medium\" class=\"ion-padding-start\">\n    &mdash;\n    @for (\n      role of relatedAsRoles;\n      track role;\n      let last = $last;\n      let first = $first\n    ) {\n      @if (last && !first) {\n        and\n      }\n      {{ role }}\n    }\n    @if ($relatedTitle(); as relatedTitle) {\n      of {{ relatedTitle }}\n    }\n  </ion-text>\n}\n" }]
+        }], propDecorators: { $spaceRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "$spaceRef", required: true }] }], $itemID: [{ type: i0.Input, args: [{ isSignal: true, alias: "$itemID", required: true }] }], $moduleID: [{ type: i0.Input, args: [{ isSignal: true, alias: "$moduleID", required: true }] }], $collectionID: [{ type: i0.Input, args: [{ isSignal: true, alias: "$collectionID", required: true }] }], $relatedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "$relatedTo", required: true }] }] } });
+//# sourceMappingURL=related-as.component.js.map

package/esm2022/lib/components/contacts-list-item/related-as.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"related-as.component.js","sourceRoot":"","sources":["../../../../../../../../libs/contactus/shared/src/lib/components/contacts-list-item/related-as.component.ts","../../../../../../../../libs/contactus/shared/src/lib/components/contacts-list-item/related-as.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAc,MAAM,YAAY,CAAC;;AAQ7D,MAAM,OAAO,kBAAkB;IAN/B;QAOS,cAAS,GAAG,KAAK,CAAC,QAAQ,oDAAa,CAAC;QACrC,aAAQ,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,oDAAC,CAAC;QAClD,YAAO,GAAG,KAAK,CAAC,QAAQ,kDAAU,CAAC;QACnC,cAAS,GAAG,KAAK,CAAC,QAAQ,oDAAU,CAAC;QACrC,kBAAa,GAAG,KAAK,CAAC,QAAQ,wDAAU,CAAC;QAEhC,eAAU,GAAG,KAAK,CAAC,QAAQ,qDAAc,CAAC;QAEnD,kBAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,yDAAC,CAAC;QACxD,+BAA0B,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,OAAO,sEAAC,CAAC;QAE3D,oBAAe,GAAG,QAAQ,CAAC,GAAG,EAAE;YACjD,MAAM,WAAW,GAAG,mBAAmB,CAAC,IAAI,CAAC,0BAA0B,EAAE,EAAE;gBACzE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE;gBACxB,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE;gBAChC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE;gBACxB,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;aACvB,CAAC,CAAC;YACH,OAAO,WAAW,EAAE,WAAW;gBAC7B,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC;gBACtC,CAAC,CAAC,SAAS,CAAC;QAChB,CAAC,2DAAC,CAAC;KACJ;8GAvBY,kBAAkB;kGAAlB,kBAAkB,gvBChB/B,+bAoBA,4CDNY,OAAO;;2FAEN,kBAAkB;kBAN9B,SAAS;+BACE,kBAAkB,mBAEX,uBAAuB,CAAC,MAAM,WACtC,CAAC,OAAO,CAAC","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n} from '@angular/core';\nimport { IonText } from '@ionic/angular/standalone';\nimport { ISpaceRef } from '@sneat/core';\nimport { getRelatedItemByKey, IRelatedTo } from '@sneat/dto';\n\n@Component({\n  selector: 'sneat-related-as',\n  templateUrl: 'related-as.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IonText],\n})\nexport class RelatedAsComponent {\n  public $spaceRef = input.required<ISpaceRef>();\n  protected $spaceID = computed(() => this.$spaceRef().id);\n  public $itemID = input.required<string>();\n  public $moduleID = input.required<string>();\n  public $collectionID = input.required<string>();\n\n  public readonly $relatedTo = input.required<IRelatedTo>();\n\n  public $relatedTitle = computed(() => this.$relatedTo().title);\n  public $relatedItemsOfRelatedItem = computed(() => this.$relatedTo().related);\n\n  protected readonly $relatedAsRoles = computed(() => {\n    const relatedItem = getRelatedItemByKey(this.$relatedItemsOfRelatedItem(), {\n      module: this.$moduleID(),\n      collection: this.$collectionID(),\n      spaceID: this.$spaceID(),\n      itemID: this.$itemID(),\n    });\n    return relatedItem?.rolesOfItem\n      ? Object.keys(relatedItem.rolesOfItem)\n      : undefined;\n  });\n}\n","@let relatedAsRoles = $relatedAsRoles();\n@if (relatedAsRoles?.length) {\n  <ion-text color=\"medium\" class=\"ion-padding-start\">\n    &mdash;\n    @for (\n      role of relatedAsRoles;\n      track role;\n      let last = $last;\n      let first = $first\n    ) {\n      @if (last && !first) {\n        and\n      }\n      {{ role }}\n    }\n    @if ($relatedTitle(); as relatedTitle) {\n      of {{ relatedTitle }}\n    }\n  </ion-text>\n}\n"]}