@sneat/contactus-shared 0.2.0

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

@@ -0,0 +1,91 @@
+import { Component, computed, EventEmitter, input, Output, signal, inject, } from '@angular/core';
+import { IonButton, IonButtons, IonIcon, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonSelect, IonSelectOption, } from '@ionic/angular/standalone';
+import { addSpace, } from '@sneat/contactus-core';
+import { ContactTitlePipe } from '../../pipes';
+import { ContactsListComponent } from '../contacts-list';
+import { ContactsAsBadgesComponent } from '../members-as-badges';
+import { ErrorLogger } from '@sneat/core';
+import { ContactsSelectorService } from './contacts-selector.service';
+import * as i0 from "@angular/core";
+export class ContactsSelectorInputComponent {
+    constructor() {
+        this.errorLogger = inject(ErrorLogger);
+        this.contactsSelectorService = inject(ContactsSelectorService);
+        // TODO: Is it duplicate of ContactInputComponent?
+        this.$contactusSpace = signal(undefined, ...(ngDevMode ? [{ debugName: "$contactusSpace" }] : []));
+        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" }] : []));
+        this.$selectedContacts = input.required(...(ngDevMode ? [{ debugName: "$selectedContacts" }] : []));
+        this.$hasSelectedContacts = computed(() => !!this.$selectedContacts().length, ...(ngDevMode ? [{ debugName: "$hasSelectedContacts" }] : []));
+        this.$max = input(undefined, ...(ngDevMode ? [{ debugName: "$max" }] : []));
+        this.selectedContactsChange = new EventEmitter();
+        this.removeMember = new EventEmitter();
+    }
+    get selectedContactID() {
+        const selectedContacts = this.$selectedContacts();
+        return (selectedContacts.length && selectedContacts[0].id) || undefined;
+    }
+    selectContacts(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        const space = this.$space();
+        const contactusSpace = this.$contactusSpace();
+        if (!contactusSpace || !space) {
+            return;
+        }
+        const options = {
+            selectedItems: this.$selectedContacts(),
+            // items: from(
+            // 	zipMapBriefsWithIDs(contactusSpace.dbo?.contacts)?.map((m) =>
+            // 		contactContextFromBrief(m, space),
+            // 	),
+            // ),
+            max: this.$max(),
+        };
+        this.contactsSelectorService
+            .selectMultipleContacts(options)
+            .then((selectedContacts) => {
+            // this.$selectedContacts.set( selectedContacts || []);
+            this.selectedContactsChange.emit(selectedContacts || []);
+        })
+            .catch(this.errorLogger.logErrorHandler('Failed to select members in modal'));
+    }
+    onRemoveMember(member) {
+        this.removeMember.emit(member);
+    }
+    onSelectedMembersChanged(members) {
+        this.selectedContactsChange.emit(members);
+    }
+    clear() {
+        // this.selectedContacts = [];
+        this.selectedContactsChange.emit([]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactsSelectorInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ContactsSelectorInputComponent, isStandalone: true, selector: "sneat-contacts-selector-input", inputs: { $space: { classPropertyName: "$space", publicName: "$space", isSignal: true, isRequired: true, transformFunction: null }, $contacts: { classPropertyName: "$contacts", publicName: "$contacts", isSignal: true, isRequired: true, transformFunction: null }, $selectedContacts: { classPropertyName: "$selectedContacts", publicName: "$selectedContacts", isSignal: true, isRequired: true, transformFunction: null }, $max: { classPropertyName: "$max", publicName: "$max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedContactsChange: "selectedContactsChange", removeMember: "removeMember" }, ngImport: i0, template: "<ion-item-group>\n  <ion-item-divider [color]=\"$hasSelectedContacts() ? 'light' : 'primary'\">\n    <b>Belongs to</b>&nbsp;<i>- please choose</i>\n    <ion-buttons slot=\"end\">\n      @if ($hasSelectedContacts()) {\n        <ion-button color=\"medium\" (click)=\"clear()\">\n          <ion-icon name=\"close-outline\" />\n        </ion-button>\n      } @else {\n        <ion-button (click)=\"clear()\">\n          <ion-label>Skip</ion-label>\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-item-divider>\n\n  <sneat-contacts-list [$space]=\"$space()\" [$contacts]=\"$contactsWithSpace()\">\n    <!--\t[(selectedMembers)]=\"selectedContacts\"-->\n    <!--\t(selectedMembersChange)=\"onSelectedMembersChanged($event)\"-->\n    <!--\t[max]=\"$max()\"-->\n  </sneat-contacts-list>\n\n  @if ($hasSelectedContacts()) {\n    @if ($max() === 1 && ($selectedContacts().length || 0) === 1) {\n      <ion-item>\n        <ion-icon name=\"person-outline\" color=\"medium\" slot=\"start\" />\n        <ion-label color=\"medium\">Member</ion-label>\n        <ion-select [value]=\"selectedContactID\" interface=\"popover\">\n          @for (contact of $contacts() || []; track contact.id) {\n            <ion-select-option [value]=\"contact.id\">\n              {{ contact | contactTitle }}\n            </ion-select-option>\n          }\n        </ion-select>\n      </ion-item>\n    }\n    @if ($hasSelectedContacts() && ($max() !== 1 || !$hasSelectedContacts())) {\n      <ion-item>\n        @if (!$hasSelectedContacts()) {\n          <ion-label color=\"medium\">\n            <sneat-contacts-as-badges\n              [$contacts]=\"$selectedContacts()\"\n              (deleteContact)=\"onRemoveMember($event)\"\n            />\n            @if (!$hasSelectedContacts()) {\n              @if ($contacts()) {\n                Nobody assigned\n              } @else {\n                Loading...\n              }\n            }\n          </ion-label>\n        } @else {\n          <ion-label color=\"medium\"> No members selected </ion-label>\n        }\n\n        <ion-buttons slot=\"end\">\n          <ion-button color=\"tertiary\" (click)=\"selectContacts($event)\">\n            <ion-icon name=\"person-add-outline\" slot=\"start\" />\n            <ion-label>Add</ion-label>\n          </ion-button>\n        </ion-buttons>\n      </ion-item>\n    }\n  }\n</ion-item-group>\n", dependencies: [{ kind: "component", type: ContactsListComponent, selector: "sneat-contacts-list", inputs: ["emptyText", "$space", "$contacts"] }, { kind: "component", type: ContactsAsBadgesComponent, selector: "sneat-contacts-as-badges", inputs: ["$contacts", "color", "showDelete"], outputs: ["deleteContact"] }, { kind: "component", type: IonItemGroup, selector: "ion-item-group" }, { kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { 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: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: "pipe", type: ContactTitlePipe, name: "contactTitle" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactsSelectorInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-contacts-selector-input', imports: [
+                        ContactsListComponent,
+                        ContactTitlePipe,
+                        ContactsAsBadgesComponent,
+                        IonItemGroup,
+                        IonItemDivider,
+                        IonButtons,
+                        IonButton,
+                        IonIcon,
+                        IonLabel,
+                        IonItem,
+                        IonSelect,
+                        IonSelectOption,
+                    ], template: "<ion-item-group>\n  <ion-item-divider [color]=\"$hasSelectedContacts() ? 'light' : 'primary'\">\n    <b>Belongs to</b>&nbsp;<i>- please choose</i>\n    <ion-buttons slot=\"end\">\n      @if ($hasSelectedContacts()) {\n        <ion-button color=\"medium\" (click)=\"clear()\">\n          <ion-icon name=\"close-outline\" />\n        </ion-button>\n      } @else {\n        <ion-button (click)=\"clear()\">\n          <ion-label>Skip</ion-label>\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-item-divider>\n\n  <sneat-contacts-list [$space]=\"$space()\" [$contacts]=\"$contactsWithSpace()\">\n    <!--\t[(selectedMembers)]=\"selectedContacts\"-->\n    <!--\t(selectedMembersChange)=\"onSelectedMembersChanged($event)\"-->\n    <!--\t[max]=\"$max()\"-->\n  </sneat-contacts-list>\n\n  @if ($hasSelectedContacts()) {\n    @if ($max() === 1 && ($selectedContacts().length || 0) === 1) {\n      <ion-item>\n        <ion-icon name=\"person-outline\" color=\"medium\" slot=\"start\" />\n        <ion-label color=\"medium\">Member</ion-label>\n        <ion-select [value]=\"selectedContactID\" interface=\"popover\">\n          @for (contact of $contacts() || []; track contact.id) {\n            <ion-select-option [value]=\"contact.id\">\n              {{ contact | contactTitle }}\n            </ion-select-option>\n          }\n        </ion-select>\n      </ion-item>\n    }\n    @if ($hasSelectedContacts() && ($max() !== 1 || !$hasSelectedContacts())) {\n      <ion-item>\n        @if (!$hasSelectedContacts()) {\n          <ion-label color=\"medium\">\n            <sneat-contacts-as-badges\n              [$contacts]=\"$selectedContacts()\"\n              (deleteContact)=\"onRemoveMember($event)\"\n            />\n            @if (!$hasSelectedContacts()) {\n              @if ($contacts()) {\n                Nobody assigned\n              } @else {\n                Loading...\n              }\n            }\n          </ion-label>\n        } @else {\n          <ion-label color=\"medium\"> No members selected </ion-label>\n        }\n\n        <ion-buttons slot=\"end\">\n          <ion-button color=\"tertiary\" (click)=\"selectContacts($event)\">\n            <ion-icon name=\"person-add-outline\" slot=\"start\" />\n            <ion-label>Add</ion-label>\n          </ion-button>\n        </ion-buttons>\n      </ion-item>\n    }\n  }\n</ion-item-group>\n" }]
+        }], propDecorators: { $space: [{ type: i0.Input, args: [{ isSignal: true, alias: "$space", required: true }] }], $contacts: [{ type: i0.Input, args: [{ isSignal: true, alias: "$contacts", required: true }] }], $selectedContacts: [{ type: i0.Input, args: [{ isSignal: true, alias: "$selectedContacts", required: true }] }], $max: [{ type: i0.Input, args: [{ isSignal: true, alias: "$max", required: false }] }], selectedContactsChange: [{
+                type: Output
+            }], removeMember: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=contacts-selector-input.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"contacts-selector-input.component.js","sourceRoot":"","sources":["../../../../../../../../libs/contactus/shared/src/lib/components/contacts-selector/contacts-selector-input.component.ts","../../../../../../../../libs/contactus/shared/src/lib/components/contacts-selector/contacts-selector-input.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  computed,\n  EventEmitter,\n  input,\n  Output,\n  signal,\n  inject,\n} from '@angular/core';\nimport {\n  IonButton,\n  IonButtons,\n  IonIcon,\n  IonItem,\n  IonItemDivider,\n  IonItemGroup,\n  IonLabel,\n  IonSelect,\n  IonSelectOption,\n} from '@ionic/angular/standalone';\nimport {\n  addSpace,\n  IContactusSpaceDboAndID,\n  IContactWithBrief,\n  IContactWithBriefAndSpace,\n} from '@sneat/contactus-core';\nimport { ContactTitlePipe } from '../../pipes';\nimport { ContactsListComponent } from '../contacts-list';\nimport { ContactsAsBadgesComponent } from '../members-as-badges';\nimport { IContactSelectorOptions } from './contacts-selector.interfaces';\nimport { ErrorLogger, IErrorLogger } from '@sneat/core';\nimport { ISpaceContext } from '@sneat/space-models';\nimport { ContactsSelectorService } from './contacts-selector.service';\n\n@Component({\n  selector: 'sneat-contacts-selector-input',\n  templateUrl: 'contacts-selector-input.component.html',\n  imports: [\n    ContactsListComponent,\n    ContactTitlePipe,\n    ContactsAsBadgesComponent,\n    IonItemGroup,\n    IonItemDivider,\n    IonButtons,\n    IonButton,\n    IonIcon,\n    IonLabel,\n    IonItem,\n    IonSelect,\n    IonSelectOption,\n  ],\n})\nexport class ContactsSelectorInputComponent {\n  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);\n  private readonly contactsSelectorService = inject(ContactsSelectorService);\n\n  // TODO: Is it duplicate of ContactInputComponent?\n  protected readonly $contactusSpace = signal<\n    IContactusSpaceDboAndID | undefined\n  >(undefined);\n\n  public readonly $space = input.required<ISpaceContext>();\n  public readonly $contacts = input.required<\n    readonly IContactWithBrief[] | undefined\n  >();\n  protected readonly $contactsWithSpace = computed(() => {\n    const space = this.$space();\n    return this.$contacts()?.map(addSpace(space));\n  });\n  public readonly $selectedContacts =\n    input.required<readonly IContactWithBriefAndSpace[]>();\n\n  public readonly $hasSelectedContacts = computed(\n    () => !!this.$selectedContacts().length,\n  );\n\n  public readonly $max = input<number | undefined>(undefined);\n\n  @Output() readonly selectedContactsChange = new EventEmitter<\n    readonly IContactWithBriefAndSpace[]\n  >();\n\n  @Output() readonly removeMember = new EventEmitter<IContactWithBrief>();\n\n  get selectedContactID(): string | undefined {\n    const selectedContacts = this.$selectedContacts();\n    return (selectedContacts.length && selectedContacts[0].id) || undefined;\n  }\n\n  protected selectContacts(event: Event): void {\n    event.stopPropagation();\n    event.preventDefault();\n    const space = this.$space();\n    const contactusSpace = this.$contactusSpace();\n    if (!contactusSpace || !space) {\n      return;\n    }\n    const options: IContactSelectorOptions = {\n      selectedItems: this.$selectedContacts(),\n      // items: from(\n      // \tzipMapBriefsWithIDs(contactusSpace.dbo?.contacts)?.map((m) =>\n      // \t\tcontactContextFromBrief(m, space),\n      // \t),\n      // ),\n      max: this.$max(),\n    };\n    this.contactsSelectorService\n      .selectMultipleContacts(options)\n      .then((selectedContacts) => {\n        // this.$selectedContacts.set( selectedContacts || []);\n        this.selectedContactsChange.emit(selectedContacts || []);\n      })\n      .catch(\n        this.errorLogger.logErrorHandler('Failed to select members in modal'),\n      );\n  }\n\n  onRemoveMember(member: IContactWithBrief): void {\n    this.removeMember.emit(member);\n  }\n\n  onSelectedMembersChanged(\n    members: readonly IContactWithBriefAndSpace[],\n  ): void {\n    this.selectedContactsChange.emit(members);\n  }\n\n  clear(): void {\n    // this.selectedContacts = [];\n    this.selectedContactsChange.emit([]);\n  }\n}\n","<ion-item-group>\n  <ion-item-divider [color]=\"$hasSelectedContacts() ? 'light' : 'primary'\">\n    <b>Belongs to</b>&nbsp;<i>- please choose</i>\n    <ion-buttons slot=\"end\">\n      @if ($hasSelectedContacts()) {\n        <ion-button color=\"medium\" (click)=\"clear()\">\n          <ion-icon name=\"close-outline\" />\n        </ion-button>\n      } @else {\n        <ion-button (click)=\"clear()\">\n          <ion-label>Skip</ion-label>\n        </ion-button>\n      }\n    </ion-buttons>\n  </ion-item-divider>\n\n  <sneat-contacts-list [$space]=\"$space()\" [$contacts]=\"$contactsWithSpace()\">\n    <!--\t[(selectedMembers)]=\"selectedContacts\"-->\n    <!--\t(selectedMembersChange)=\"onSelectedMembersChanged($event)\"-->\n    <!--\t[max]=\"$max()\"-->\n  </sneat-contacts-list>\n\n  @if ($hasSelectedContacts()) {\n    @if ($max() === 1 && ($selectedContacts().length || 0) === 1) {\n      <ion-item>\n        <ion-icon name=\"person-outline\" color=\"medium\" slot=\"start\" />\n        <ion-label color=\"medium\">Member</ion-label>\n        <ion-select [value]=\"selectedContactID\" interface=\"popover\">\n          @for (contact of $contacts() || []; track contact.id) {\n            <ion-select-option [value]=\"contact.id\">\n              {{ contact | contactTitle }}\n            </ion-select-option>\n          }\n        </ion-select>\n      </ion-item>\n    }\n    @if ($hasSelectedContacts() && ($max() !== 1 || !$hasSelectedContacts())) {\n      <ion-item>\n        @if (!$hasSelectedContacts()) {\n          <ion-label color=\"medium\">\n            <sneat-contacts-as-badges\n              [$contacts]=\"$selectedContacts()\"\n              (deleteContact)=\"onRemoveMember($event)\"\n            />\n            @if (!$hasSelectedContacts()) {\n              @if ($contacts()) {\n                Nobody assigned\n              } @else {\n                Loading...\n              }\n            }\n          </ion-label>\n        } @else {\n          <ion-label color=\"medium\"> No members selected </ion-label>\n        }\n\n        <ion-buttons slot=\"end\">\n          <ion-button color=\"tertiary\" (click)=\"selectContacts($event)\">\n            <ion-icon name=\"person-add-outline\" slot=\"start\" />\n            <ion-label>Add</ion-label>\n          </ion-button>\n        </ion-buttons>\n      </ion-item>\n    }\n  }\n</ion-item-group>\n"]}

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

@@ -0,0 +1,415 @@
+import { TitleCasePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, effect, Input, signal, inject, } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IonButton, IonButtons, IonCard, IonCardHeader, IonCardSubtitle, IonContent, IonFooter, IonHeader, IonIcon, IonItemDivider, IonLabel, IonSegment, IonSegmentButton, IonSpinner, IonText, IonToolbar, ModalController, } from '@ionic/angular/standalone';
+import { CONTACT_ROLES_BY_TYPE } from '@sneat/app';
+import { getFullName } from '@sneat/auth-models';
+import { countryFlagEmoji } from '@sneat/components';
+import { ClassName, OverlayController, SelectFromListComponent, SelectorModalComponent, } from '@sneat/ui';
+import { ContactusSpaceService } from '@sneat/contactus-services';
+import { computeSpaceRefFromSpaceContext, } from '@sneat/space-models';
+import { BehaviorSubject, map, Subject, takeUntil } from 'rxjs';
+import { NewContactFormComponent } from '../contact-forms/new-contact';
+import { ContactsComponent } from '../contacts-component/contacts.component';
+import { NewCompanyFormComponent, } from '../contact-forms/new-contact';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class ContactsSelectorComponent extends SelectorModalComponent {
+    setupEffects() {
+        this.destroyEffects();
+        this.effects = [effect(() => this.onSpaceIDChanged())];
+        // runInInjectionContext(this.injector, () => {
+        // 	this.effects = [effect(() => this.onSpaceIDChanged())];
+        // });
+    }
+    onSpaceIDChanged() {
+        const spaceID = this.$spaceID();
+        this.spaceID$.next(spaceID);
+        this.watchContactBriefs();
+    }
+    get label() {
+        const r = this.contactRoleID;
+        return r ? r[0].toUpperCase() + r.substr(1) : 'Contact';
+    }
+    constructor() {
+        super();
+        this.contactRolesByType = inject(CONTACT_ROLES_BY_TYPE);
+        this.contactusSpaceService = inject(ContactusSpaceService);
+        this.parentChanged = new Subject();
+        this.$parentTab = signal('existing', ...(ngDevMode ? [{ debugName: "$parentTab" }] : []));
+        this.onParentTabChanged = (event) => {
+            this.$parentTab.set(event.detail.value);
+        };
+        this.$contactTab = signal('existing', ...(ngDevMode ? [{ debugName: "$contactTab" }] : []));
+        this.onContactTabChanged = (event) => {
+            this.$contactTab.set(event.detail.value);
+            if (this.$contactTab() === 'existing') {
+                this.selectGroupAndRole$.next({ event });
+                // this.newContactCommand$.next('reset');
+            }
+        };
+        this.spaceIDChangesCount = 0;
+        this.okButtonLabel = 'OK';
+        // we can't yet use `$space = input.required` for modal component yet
+        this.$space = signal({ id: '' }, ...(ngDevMode ? [{ debugName: "$space" }] : []));
+        this.$spaceRef = computeSpaceRefFromSpaceContext(this.$space);
+        this.$spaceID = computed(() => {
+            const spaceID = this.$spaceRef().id;
+            // `ContactsSelectorComponent.$spaceID(spaceID=${spaceID})`,
+            // this.spaceIDChangesCount,
+            if (spaceID && !this.spaceIDChangesCount) {
+                this.spaceIDChangesCount += 1;
+                // this.setupEffects();
+            }
+            return spaceID;
+        }, ...(ngDevMode ? [{ debugName: "$spaceID" }] : []));
+        // We use it to cancel request to ContactusSpace if space ID changed.
+        this.spaceID$ = new Subject();
+        this.parentIcon = 'business-outline';
+        this.contactIcon = 'business-outline';
+        this.title = 'Contacts selector';
+        this.$contact = signal({}, ...(ngDevMode ? [{ debugName: "$contact" }] : []));
+        this.$contactWithDbo = computed(() => {
+            const contact = this.$contact();
+            let contactWithDbo;
+            if (contact.dbo) {
+                // Applying cast to ContactIdAndDboWithSpaceRef as seems to be a bug in TS
+                contactWithDbo = contact;
+            }
+            else if (contact.brief) {
+                contactWithDbo = { ...contact, dbo: contact.brief };
+            }
+            else {
+                contactWithDbo = { ...contact, dbo: {} };
+            }
+            return contactWithDbo;
+        }, ...(ngDevMode ? [{ debugName: "$contactWithDbo" }] : []));
+        this.contactRoles = [
+            { id: 'agent', title: 'Agent', iconName: 'body-outline' },
+            { id: 'buyer', title: 'Buyer', iconName: 'cash-outline' },
+            { id: 'freight_agent', title: 'Freight Agent', iconName: 'train-outline' },
+            { id: 'dispatcher', title: 'Dispatcher', iconName: 'business-outline' },
+            { id: 'shipper', title: 'Shipper', iconName: 'boat-outline' },
+        ];
+        this.$contacts = signal(undefined, ...(ngDevMode ? [{ debugName: "$contacts" }] : []));
+        this.$selectedContacts = computed(() => this.$contacts()?.filter((c) => c.isChecked), ...(ngDevMode ? [{ debugName: "$selectedContacts" }] : []));
+        this.$selectedContactsCount = computed(() => this.$selectedContacts()?.length || 0, ...(ngDevMode ? [{ debugName: "$selectedContactsCount" }] : []));
+        this.newContactCommand$ = new Subject();
+        this.$isNewContactCreating = signal(false, ...(ngDevMode ? [{ debugName: "$isNewContactCreating" }] : []));
+        this.getParentItem = (c) => ({
+            id: c.id,
+            emoji: countryFlagEmoji(c.brief?.countryID),
+            title: `${c.brief?.title || c.id}`,
+            iconName: this.parentIcon,
+        });
+        this.getChildItem = (c) => {
+            const { brief } = c;
+            let title = brief.title;
+            if (!title && brief.names) {
+                title = getFullName(brief.names);
+            }
+            return {
+                id: c.id,
+                title: title || c.id,
+                emoji: countryFlagEmoji(brief.countryID),
+                iconName: this.contactIcon,
+            };
+        };
+        this.$isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "$isSubmitting" }] : []));
+        this.selectGroupAndRole$ = new BehaviorSubject(undefined);
+        this.contactClicked = (event, contact) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.$contacts.update((contacts) => contacts?.map((c) => c.id === contact.id ? { ...c, isChecked: !c.isChecked } : c));
+            // 'ContactsSelectorComponent.contactClicked() => $selectedContacts:',
+            // this.$selectedContacts(),
+        };
+        this.setupEffects();
+    }
+    ngOnInit() {
+        if (this.space) {
+            // When dynamically creating the component in modal ngOnChanges are not called.
+            this.$space.set(this.space);
+            // we need to call this as effects would not be set without something consumers
+            // this.onSpaceIDChanged();
+        }
+        if (this.contactType) {
+            this.$contact.set({
+                id: '',
+                space: this.$spaceRef(),
+                dbo: { type: this.contactType },
+            });
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.destroyEffects();
+    }
+    destroyEffects() {
+        this.effects?.forEach((effect) => effect.destroy());
+        this.effects = undefined;
+    }
+    ngOnChanges(changes) {
+        if (changes['space']) {
+            // we use @Input() due to modal not able to set signal property
+            this.$space.set(this.space || { id: '' });
+        }
+    }
+    watchContactBriefs() {
+        const spaceID = this.$spaceID();
+        this.contactBriefsSub?.unsubscribe();
+        this.contactBriefsSub = this.contactusSpaceService
+            .watchContactBriefs(spaceID)
+            .pipe(this.takeUntilDestroyed(), takeUntil(this.spaceID$), map((contacts) => {
+            const space = this.$space();
+            return contacts.map((c) => ({ ...c, space }));
+        }))
+            .subscribe((contacts) => {
+            this.allContacts = contacts;
+            // 'ContactSelectorComponent.watchContactBriefs() => contacts:',
+            // contacts,
+            this.setContacts();
+        });
+    }
+    setContacts() {
+        const filterByTypeRoleAndParentID = (t, r, parentID) => (c) => {
+            const roleIDs = [];
+            if (r) {
+                roleIDs.push(r);
+                if (t && r) {
+                    const role = this.contactRolesByType[t]?.find((role) => role.id === r);
+                    if (role?.canBeImpersonatedByRoles?.length) {
+                        roleIDs.push(...role.canBeImpersonatedByRoles);
+                    }
+                }
+            }
+            return ((!t || c.brief?.type === t) &&
+                (!r || roleIDs.some((roleID) => c.brief?.roles?.includes(roleID))) &&
+                (!parentID || c.brief?.parentID === parentID));
+        };
+        const allContactBriefs = this.allContacts;
+        this.parentContacts =
+            this.parentType || this.parentRole
+                ? allContactBriefs?.filter(filterByTypeRoleAndParentID(this.parentType, this.parentRole)) || []
+                : undefined;
+        this.$contacts.set(allContactBriefs?.filter(filterByTypeRoleAndParentID(this.contactType, this.contactRoleID, this.parentContactID)));
+        const removeExcluded = (ids) => (c) => !ids?.includes(c.id);
+        this.contactItems = this.$contacts()
+            ?.filter(removeExcluded(this.excludeContactIDs))
+            .map(this.getChildItem);
+        this.parentItems = this.parentContacts
+            ?.filter(removeExcluded(this.excludeParentIDs))
+            .map(this.getChildItem);
+        if (this.parentType || this.parentRole) {
+            if (!this.parentContactID &&
+                this.parentContacts &&
+                !this.parentContacts.length) {
+                this.$parentTab.set('new');
+            }
+        }
+        // if (this.$contacts && !this.$contacts.length) {
+        // 	this.contactTab = 'new';
+        // }
+        // 'setContacts',
+        // this.allContacts,
+        // this.contactRoleID,
+        // this.contactType,
+        // this.$contacts,
+        // this.parentType,
+        // this.parentRole,
+        // this.parentContactID,
+        // this.parentContacts,
+    }
+    onParentContactIDChanged(contactID) {
+        // 'ContactsSelectorComponent.onParentContactSelected()',
+        // contactID,
+        const parentContact = this.parentContacts?.find((c) => c.id === contactID);
+        this.onParentContactChanged(parentContact);
+    }
+    onParentContactCreated(contact) {
+        const parentContact = {
+            ...contact,
+            brief: contact.dbo,
+        };
+        this.parentItems?.push(this.getParentItem(parentContact));
+        this.onParentContactChanged(parentContact);
+    }
+    onNewContactChanged(contact) {
+        this.$contact.set(contact);
+    }
+    onContactChanged(contact) {
+        this.$contact.set(contact);
+    }
+    onContactCreated(contact) {
+        this.selectedContact = {
+            ...contact,
+            space: this.$spaceRef(),
+            isChecked: true,
+        };
+        this.emitOnSelected(this.selectedContact);
+    }
+    onParentContactChanged(contact) {
+        this.$parentTab.set('existing');
+        this.selectedParent = contact || undefined;
+        this.parentContactID = contact?.id;
+        this.setContacts();
+        this.parentChanged.next();
+    }
+    onContactSelected(contactID) {
+        const selectedContact = this.$contacts()?.find((c) => c.id === contactID);
+        if (!selectedContact) {
+            console.error('contact not found by ID', contactID, this.$contacts);
+            return;
+        }
+        this.selectedContact = { ...selectedContact, space: this.$spaceRef() };
+        this.emitOnSelected(this.selectedContact);
+        // if (this.selectedParent?.dto) {
+        // 	const contactBrief = this.selectedParent.dto.relatedContacts?.find(c => c.id === contactID);
+        // 	if (contactBrief) {
+        // 		const subContact: IContactContext = contactContextFromBrief(this.team, contactBrief);
+        // 		this.emitOnSelected(subContact);
+        // 	}
+        // } else {
+        //
+        // }
+        this.close(undefined);
+    }
+    async submitSelected(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        const selectedContacts = this.$selectedContacts();
+        if (this.onSelected) {
+            this.$isSubmitting.set(true);
+            try {
+                await this.onSelected(selectedContacts);
+            }
+            catch (e) {
+                this.errorLogger.logError(e, 'failed to call onSelected callback');
+                this.$isSubmitting.set(false);
+            }
+        }
+        else {
+            console.error('onSelected is not set');
+        }
+    }
+    // protected onContactSelected2(contactID: string): void {
+    // 	console.log('onContactSelected()', contactID);
+    // 	this.selectedContact = this.contacts?.find(c => c.id === contactID);
+    // 	if (!this.contactType && this.selectedContact) {
+    // 		this.emitOnSelected(this.selectedContact);
+    // 		this.close(undefined);
+    // 		return;
+    // 	}
+    // 	const contactType = this.contactType;
+    // 	if (contactType) {
+    // 		this.contactItems = this.selectedContact?.dto?.relatedContacts?.filter(c => c.type === contactType).map(c => ({
+    // 			id: c.id,
+    // 			title: ((c.title + ' - ') + (c.address?.lines?.join(', ') || '')).trim(),
+    // 		}));
+    // 	}
+    // 	this.newLocationContact = {
+    // 		id: '',
+    // 		team: this.team,
+    // 		dto: {
+    // 			type: 'location',
+    // 			countryID: this.selectedContact?.dto?.countryID,
+    // 			address: this.selectedContact?.dto?.address,
+    // 		},
+    // 	};
+    // }
+    emitOnSelected(contact) {
+        if (this.onSelected) {
+            this.onSelected(contact ? [contact] : undefined).catch(this.errorLogger.logErrorHandler('Failed to call onSelected callback'));
+        }
+        else {
+            console.warn('instance ContactSelectorComponent has unset `onSelected` input callback.');
+        }
+    }
+    cancel(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.modalController
+            .dismiss()
+            .catch(this.errorLogger.logErrorHandler('Failed to close contacts selector modal'));
+    }
+    switchToNewContact(args) {
+        args.event.stopPropagation();
+        args.event.preventDefault();
+        this.$contactTab.set('new');
+        this.selectGroupAndRole$.next(args);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactsSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ContactsSelectorComponent, isStandalone: true, selector: "sneat-contacts-selector", inputs: { space: "space", okButtonLabel: "okButtonLabel", parentIcon: "parentIcon", contactIcon: "contactIcon", title: "title", contactRoleID: "contactRoleID", parentType: "parentType", parentRole: "parentRole", contactType: "contactType", excludeContactIDs: "excludeContactIDs", excludeParentIDs: "excludeParentIDs", onSelected: "onSelected" }, providers: [
+            {
+                provide: ClassName,
+                useValue: 'ContactsSelectorComponent',
+            },
+            {
+                provide: OverlayController,
+                useClass: ModalController,
+            },
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\">\n    <ion-label slot=\"start\" color=\"medium\" class=\"ion-padding-start\">\n      @if (contactRoleID) {\n        {{ contactRoleID | titlecase }} selector\n      } @else {\n        {{ title }}\n      }\n    </ion-label>\n\n    @if (!parentRole) {\n      <ion-segment\n        [value]=\"$contactTab()\"\n        (ionChange)=\"onContactTabChanged($event)\"\n        class=\"ion-margin-start ion-margin-end\"\n      >\n        <ion-segment-button value=\"existing\">Existing</ion-segment-button>\n        <ion-segment-button value=\"new\">New</ion-segment-button>\n      </ion-segment>\n    }\n\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close($event)\">\n        <ion-icon name=\"close-outline\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<!--<ion-item color=\"primary\" class=\"sneat-tiny-end-padding\">-->\n<!--\t<ion-label>-->\n<!--\t\t@if (contactRole) {-->\n<!--\t\t\t{{ contactRole | titlecase }} selector-->\n<!--\t\t} @else {-->\n<!--\t\t\t{{ title }}-->\n<!--\t\t}-->\n<!--\t</ion-label>-->\n<!--\t<ion-buttons slot=\"end\">-->\n<!--\t\t<ion-button (click)=\"close($event)\">-->\n<!--\t\t\t<ion-icon name=\"close-outline\" />-->\n<!--\t\t</ion-button>-->\n<!--\t</ion-buttons>-->\n<!--</ion-item>-->\n\n<ion-content>\n  @if (parentRole) {\n    @if (!selectedParent) {\n      <ion-card-header>\n        <ion-card-subtitle>\n          Step 1 of 2: Select {{ parentRole }}\n        </ion-card-subtitle>\n      </ion-card-header>\n    }\n    <ion-card>\n      @if (!selectedParent) {\n        <ion-segment\n          [value]=\"$parentTab()\"\n          (ionChange)=\"onParentTabChanged($event)\"\n          class=\"ion-padding-horizontal\"\n        >\n          <ion-segment-button value=\"existing\">Existing</ion-segment-button>\n          <ion-segment-button value=\"new\">New</ion-segment-button>\n        </ion-segment>\n      }\n\n      @switch ($parentTab()) {\n        @case (\"existing\") {\n          <sneat-select-from-list\n            [label]=\"(selectedParent ? parentRole : '') | titlecase\"\n            [items]=\"parentItems\"\n            [(ngModel)]=\"parentContactID\"\n            (ngModelChange)=\"onParentContactIDChanged($event)\"\n            [isFilterable]=\"true\"\n            labelPlacement=\"start\"\n          />\n        }\n        @case (\"new\") {\n          <sneat-new-company-form\n            [$space]=\"$space()\"\n            [$contact]=\"$contactWithDbo()\"\n            [contactRoles]=\"contactRoles\"\n            [contactRole]=\"contactRoleID\"\n            [hideRole]=\"true\"\n            (contactCreated)=\"onParentContactCreated($event)\"\n            (contactChange)=\"onNewContactChanged($event)\"\n          />\n        }\n      }\n    </ion-card>\n    @if (selectedParent) {\n      <ion-card-header>\n        <ion-card-subtitle\n          >Step 2 of 2: Select {{ contactRoleID }}\n        </ion-card-subtitle>\n      </ion-card-header>\n    }\n  }\n\n  @if (!parentRole || selectedParent) {\n    @if (parentRole && selectedParent) {\n      <ion-segment\n        [value]=\"$contactTab()\"\n        (ionChange)=\"onContactTabChanged($event)\"\n        class=\"ion-margin-start ion-margin-end\"\n      >\n        <ion-segment-button value=\"existing\">Existing</ion-segment-button>\n        <ion-segment-button value=\"new\">New</ion-segment-button>\n      </ion-segment>\n    }\n\n    @switch ($contactTab()) {\n      @case (\"existing\") {\n        @if ($contacts(); as contacts) {\n          @if (selectedParent && !contacts.length) {\n            <ion-text color=\"medium\" class=\"ion-padding\">\n              <p>No locations for selected contact</p>\n            </ion-text>\n          }\n        }\n        <sneat-contacts\n          [$space]=\"$space()\"\n          [$allContacts]=\"$contacts()\"\n          (contactsChange)=\"$contacts.set($event)\"\n          (addContactClick)=\"switchToNewContact($event)\"\n          [goToNewContactPage]=\"false\"\n          [contactClicked]=\"contactClicked\"\n        />\n        <!--\t\t\t\t\t<sneat-select-from-list-->\n        <!--\t\t\t\t\t\t[selectMode]=\"'multiple'\"-->\n        <!--\t\t\t\t\t\tlabel=\"\"-->\n        <!--\t\t\t\t\t\tlabelPlacement=\"start\"-->\n        <!--\t\t\t\t\t\t[items]=\"contactItems\"-->\n        <!--\t\t\t\t\t\t[(ngModel)]=\"selectedSubContactID\"-->\n        <!--\t\t\t\t\t\t(ngModelChange)=\"onContactSelected($event)\"-->\n        <!--\t\t\t\t\t\t[isFilterable]=\"true\"-->\n        <!--\t\t\t\t\t/>-->\n      }\n      @case (\"new\") {\n        @if (contactRoleID) {\n          <!-- TODO: Not clear what it is for - needs a comment or removal or move to sneat-new-contact-form -->\n          <ion-item-divider>\n            <ion-label>{{ contactRoleID || \"\" | titlecase }}</ion-label>\n          </ion-item-divider>\n        }\n\n        <sneat-new-contact-form\n          [$space]=\"$space()\"\n          [$contact]=\"$contactWithDbo()\"\n          [command]=\"newContactCommand$\"\n          [selectGroupAndRole$]=\"selectGroupAndRole$\"\n          (creatingChange)=\"$isNewContactCreating.set($event)\"\n        />\n      }\n    }\n  }\n</ion-content>\n\n@if (selectMode === \"multiple\") {\n  <ion-footer>\n    <ion-toolbar color=\"light\">\n      @if ($selectedContactsCount(); as selectedContactsCount) {\n        <ion-label class=\"ion-margin-start ion-margin-end\">\n          @if (selectedContactsCount === 1) {\n            {{ selectedContactsCount }} contact selected\n          } @else {\n            {{ selectedContactsCount }} contacts selected\n          }\n        </ion-label>\n      }\n      <!--\t\t\t<ion-buttons slot=\"start\">-->\n      <!--\t\t\t\t<ion-button (click)=\"cancel($event)\" color=\"medium\">-->\n      <!--\t\t\t\t\t<ion-icon name=\"close-outline\" slot=\"start\"></ion-icon>-->\n      <!--\t\t\t\t\t<ion-label>Cancel</ion-label>-->\n      <!--\t\t\t\t</ion-button>-->\n      <!--\t\t\t</ion-buttons>-->\n      @if ($isSubmitting()) {\n        <ion-spinner name=\"lines-small\" slot=\"end\" />\n      }\n      <ion-buttons slot=\"end\">\n        @switch ($contactTab()) {\n          @case (\"existing\") {\n            <ion-button\n              fill=\"solid\"\n              (click)=\"submitSelected($event)\"\n              color=\"primary\"\n              [disabled]=\"!$selectedContactsCount() || $isSubmitting()\"\n            >\n              <ion-icon name=\"save-outline\" slot=\"start\"></ion-icon>\n              <ion-label>{{ okButtonLabel }}</ion-label>\n            </ion-button>\n          }\n          @case (\"new\") {\n            <ion-button\n              fill=\"solid\"\n              color=\"primary\"\n              [disabled]=\"$isNewContactCreating()\"\n              (click)=\"newContactCommand$.next('create')\"\n            >\n              @if ($isNewContactCreating()) {\n                <ion-spinner name=\"lines-small\" slot=\"start\" />\n                <ion-label>Creating contact...</ion-label>\n              } @else {\n                <ion-icon name=\"save-outline\" slot=\"start\"></ion-icon>\n                <ion-label>Create contact</ion-label>\n              }\n            </ion-button>\n          }\n        }\n      </ion-buttons>\n    </ion-toolbar>\n  </ion-footer>\n}\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: 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: NewCompanyFormComponent, selector: "sneat-new-company-form", inputs: ["contactRoles", "contactRole", "hideRole", "parentContact"] }, { kind: "component", type: ContactsComponent, selector: "sneat-contacts", inputs: ["$space", "$roleID", "command", "goToNewContactPage", "$allContacts", "contactClicked"], outputs: ["roleChange", "contactsChange", "addContactEvent", "addContactClick"] }, { 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: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { 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: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: NewContactFormComponent, selector: "sneat-new-contact-form", inputs: ["command", "selectGroupAndRole$"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ContactsSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        FormsModule,
+                        SelectFromListComponent,
+                        NewCompanyFormComponent,
+                        TitleCasePipe,
+                        TitleCasePipe,
+                        ContactsComponent,
+                        IonButton,
+                        IonLabel,
+                        IonSpinner,
+                        IonIcon,
+                        IonButtons,
+                        IonFooter,
+                        IonToolbar,
+                        IonContent,
+                        IonCard,
+                        IonSegment,
+                        IonSegmentButton,
+                        IonCardSubtitle,
+                        IonCardHeader,
+                        IonText,
+                        IonItemDivider,
+                        IonHeader,
+                        NewContactFormComponent,
+                    ], providers: [
+                        {
+                            provide: ClassName,
+                            useValue: 'ContactsSelectorComponent',
+                        },
+                        {
+                            provide: OverlayController,
+                            useClass: ModalController,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'sneat-contacts-selector', template: "<ion-header>\n  <ion-toolbar color=\"light\">\n    <ion-label slot=\"start\" color=\"medium\" class=\"ion-padding-start\">\n      @if (contactRoleID) {\n        {{ contactRoleID | titlecase }} selector\n      } @else {\n        {{ title }}\n      }\n    </ion-label>\n\n    @if (!parentRole) {\n      <ion-segment\n        [value]=\"$contactTab()\"\n        (ionChange)=\"onContactTabChanged($event)\"\n        class=\"ion-margin-start ion-margin-end\"\n      >\n        <ion-segment-button value=\"existing\">Existing</ion-segment-button>\n        <ion-segment-button value=\"new\">New</ion-segment-button>\n      </ion-segment>\n    }\n\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close($event)\">\n        <ion-icon name=\"close-outline\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<!--<ion-item color=\"primary\" class=\"sneat-tiny-end-padding\">-->\n<!--\t<ion-label>-->\n<!--\t\t@if (contactRole) {-->\n<!--\t\t\t{{ contactRole | titlecase }} selector-->\n<!--\t\t} @else {-->\n<!--\t\t\t{{ title }}-->\n<!--\t\t}-->\n<!--\t</ion-label>-->\n<!--\t<ion-buttons slot=\"end\">-->\n<!--\t\t<ion-button (click)=\"close($event)\">-->\n<!--\t\t\t<ion-icon name=\"close-outline\" />-->\n<!--\t\t</ion-button>-->\n<!--\t</ion-buttons>-->\n<!--</ion-item>-->\n\n<ion-content>\n  @if (parentRole) {\n    @if (!selectedParent) {\n      <ion-card-header>\n        <ion-card-subtitle>\n          Step 1 of 2: Select {{ parentRole }}\n        </ion-card-subtitle>\n      </ion-card-header>\n    }\n    <ion-card>\n      @if (!selectedParent) {\n        <ion-segment\n          [value]=\"$parentTab()\"\n          (ionChange)=\"onParentTabChanged($event)\"\n          class=\"ion-padding-horizontal\"\n        >\n          <ion-segment-button value=\"existing\">Existing</ion-segment-button>\n          <ion-segment-button value=\"new\">New</ion-segment-button>\n        </ion-segment>\n      }\n\n      @switch ($parentTab()) {\n        @case (\"existing\") {\n          <sneat-select-from-list\n            [label]=\"(selectedParent ? parentRole : '') | titlecase\"\n            [items]=\"parentItems\"\n            [(ngModel)]=\"parentContactID\"\n            (ngModelChange)=\"onParentContactIDChanged($event)\"\n            [isFilterable]=\"true\"\n            labelPlacement=\"start\"\n          />\n        }\n        @case (\"new\") {\n          <sneat-new-company-form\n            [$space]=\"$space()\"\n            [$contact]=\"$contactWithDbo()\"\n            [contactRoles]=\"contactRoles\"\n            [contactRole]=\"contactRoleID\"\n            [hideRole]=\"true\"\n            (contactCreated)=\"onParentContactCreated($event)\"\n            (contactChange)=\"onNewContactChanged($event)\"\n          />\n        }\n      }\n    </ion-card>\n    @if (selectedParent) {\n      <ion-card-header>\n        <ion-card-subtitle\n          >Step 2 of 2: Select {{ contactRoleID }}\n        </ion-card-subtitle>\n      </ion-card-header>\n    }\n  }\n\n  @if (!parentRole || selectedParent) {\n    @if (parentRole && selectedParent) {\n      <ion-segment\n        [value]=\"$contactTab()\"\n        (ionChange)=\"onContactTabChanged($event)\"\n        class=\"ion-margin-start ion-margin-end\"\n      >\n        <ion-segment-button value=\"existing\">Existing</ion-segment-button>\n        <ion-segment-button value=\"new\">New</ion-segment-button>\n      </ion-segment>\n    }\n\n    @switch ($contactTab()) {\n      @case (\"existing\") {\n        @if ($contacts(); as contacts) {\n          @if (selectedParent && !contacts.length) {\n            <ion-text color=\"medium\" class=\"ion-padding\">\n              <p>No locations for selected contact</p>\n            </ion-text>\n          }\n        }\n        <sneat-contacts\n          [$space]=\"$space()\"\n          [$allContacts]=\"$contacts()\"\n          (contactsChange)=\"$contacts.set($event)\"\n          (addContactClick)=\"switchToNewContact($event)\"\n          [goToNewContactPage]=\"false\"\n          [contactClicked]=\"contactClicked\"\n        />\n        <!--\t\t\t\t\t<sneat-select-from-list-->\n        <!--\t\t\t\t\t\t[selectMode]=\"'multiple'\"-->\n        <!--\t\t\t\t\t\tlabel=\"\"-->\n        <!--\t\t\t\t\t\tlabelPlacement=\"start\"-->\n        <!--\t\t\t\t\t\t[items]=\"contactItems\"-->\n        <!--\t\t\t\t\t\t[(ngModel)]=\"selectedSubContactID\"-->\n        <!--\t\t\t\t\t\t(ngModelChange)=\"onContactSelected($event)\"-->\n        <!--\t\t\t\t\t\t[isFilterable]=\"true\"-->\n        <!--\t\t\t\t\t/>-->\n      }\n      @case (\"new\") {\n        @if (contactRoleID) {\n          <!-- TODO: Not clear what it is for - needs a comment or removal or move to sneat-new-contact-form -->\n          <ion-item-divider>\n            <ion-label>{{ contactRoleID || \"\" | titlecase }}</ion-label>\n          </ion-item-divider>\n        }\n\n        <sneat-new-contact-form\n          [$space]=\"$space()\"\n          [$contact]=\"$contactWithDbo()\"\n          [command]=\"newContactCommand$\"\n          [selectGroupAndRole$]=\"selectGroupAndRole$\"\n          (creatingChange)=\"$isNewContactCreating.set($event)\"\n        />\n      }\n    }\n  }\n</ion-content>\n\n@if (selectMode === \"multiple\") {\n  <ion-footer>\n    <ion-toolbar color=\"light\">\n      @if ($selectedContactsCount(); as selectedContactsCount) {\n        <ion-label class=\"ion-margin-start ion-margin-end\">\n          @if (selectedContactsCount === 1) {\n            {{ selectedContactsCount }} contact selected\n          } @else {\n            {{ selectedContactsCount }} contacts selected\n          }\n        </ion-label>\n      }\n      <!--\t\t\t<ion-buttons slot=\"start\">-->\n      <!--\t\t\t\t<ion-button (click)=\"cancel($event)\" color=\"medium\">-->\n      <!--\t\t\t\t\t<ion-icon name=\"close-outline\" slot=\"start\"></ion-icon>-->\n      <!--\t\t\t\t\t<ion-label>Cancel</ion-label>-->\n      <!--\t\t\t\t</ion-button>-->\n      <!--\t\t\t</ion-buttons>-->\n      @if ($isSubmitting()) {\n        <ion-spinner name=\"lines-small\" slot=\"end\" />\n      }\n      <ion-buttons slot=\"end\">\n        @switch ($contactTab()) {\n          @case (\"existing\") {\n            <ion-button\n              fill=\"solid\"\n              (click)=\"submitSelected($event)\"\n              color=\"primary\"\n              [disabled]=\"!$selectedContactsCount() || $isSubmitting()\"\n            >\n              <ion-icon name=\"save-outline\" slot=\"start\"></ion-icon>\n              <ion-label>{{ okButtonLabel }}</ion-label>\n            </ion-button>\n          }\n          @case (\"new\") {\n            <ion-button\n              fill=\"solid\"\n              color=\"primary\"\n              [disabled]=\"$isNewContactCreating()\"\n              (click)=\"newContactCommand$.next('create')\"\n            >\n              @if ($isNewContactCreating()) {\n                <ion-spinner name=\"lines-small\" slot=\"start\" />\n                <ion-label>Creating contact...</ion-label>\n              } @else {\n                <ion-icon name=\"save-outline\" slot=\"start\"></ion-icon>\n                <ion-label>Create contact</ion-label>\n              }\n            </ion-button>\n          }\n        }\n      </ion-buttons>\n    </ion-toolbar>\n  </ion-footer>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { space: [{
+                type: Input,
+                args: [{ required: true }]
+            }], okButtonLabel: [{
+                type: Input
+            }], parentIcon: [{
+                type: Input
+            }], contactIcon: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], contactRoleID: [{
+                type: Input
+            }], parentType: [{
+                type: Input
+            }], parentRole: [{
+                type: Input
+            }], contactType: [{
+                type: Input
+            }], excludeContactIDs: [{
+                type: Input
+            }], excludeParentIDs: [{
+                type: Input
+            }], onSelected: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=contacts-selector.component.js.map