@sneat/contactus-shared 0.2.0

package/esm2022/index.js

@@ -0,0 +1,4 @@
+export * from './lib';
+export * from './lib/components/lib-exports';
+export * from './lib/pipes';
+//# sourceMappingURL=index.js.map

package/esm2022/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/contactus/shared/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,aAAa,CAAC","sourcesContent":["export * from './lib';\nexport * from './lib/components/lib-exports';\nexport * from './lib/pipes';\n"]}

package/esm2022/lib/components/address-form/address-form.component.js

@@ -0,0 +1,182 @@
+import { Component, EventEmitter, Input, Output, signal, ViewChild, inject, } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators, } from '@angular/forms';
+import { IonButton, IonButtons, IonCard, IonIcon, IonInput, IonItem, IonItemDivider, IonLabel, IonSpinner, IonTextarea, } from '@ionic/angular/standalone';
+import { CountrySelectorComponent } from '@sneat/components';
+import { excludeUndefined } from '@sneat/core';
+import { ErrorLogger } from '@sneat/core';
+import { createSetFocusToInput } from '@sneat/ui';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class AddressFormComponent {
+    constructor() {
+        this.errorLogger = inject(ErrorLogger);
+        this.title = 'Address';
+        this.save = new EventEmitter();
+        this.addressChange = new EventEmitter();
+        this.formCreated = new EventEmitter(); // TODO: there is should be a better way of doing this
+        this.setFocusToInput = createSetFocusToInput(this.errorLogger);
+        this.$saving = signal(false, ...(ngDevMode ? [{ debugName: "$saving" }] : []));
+        this.countryID = new FormControl('', [Validators.required]);
+        this.zip = new FormControl('', [
+            Validators.pattern('[0-9 A-Z]{2,10}'),
+        ]);
+        this.state = new FormControl('', {
+            validators: [Validators.minLength(2), Validators.maxLength(20)],
+        });
+        this.city = new FormControl('', {
+            validators: [Validators.minLength(2), Validators.maxLength(20)],
+        });
+        this.lines = new FormControl('', [Validators.maxLength(200)]);
+        this.form = new FormGroup({
+            countryID: this.countryID,
+            zip: this.zip,
+            state: this.state,
+            city: this.city,
+            lines: this.lines,
+        });
+    }
+    ngOnInit() {
+        this.formCreated.emit(this.form);
+    }
+    onCountryChanged(countryID) {
+        this.countryID.setValue(countryID);
+        this.countryID.markAsDirty();
+        if (!countryID ||
+            countryID === '--' ||
+            (this.address?.countryID && this.address.countryID != countryID)) {
+            this.zip.setValue('');
+            this.lines.setValue('');
+        }
+        this.address = {
+            countryID: countryID,
+            zipCode: this.zip.value || undefined,
+            state: this.state.value || undefined,
+        };
+        this.addressChange.emit(this.address);
+        setTimeout(() => this.setFocusToInput(this.zipInput), 100);
+    }
+    get mustAddress() {
+        return this.address || { countryID: '' };
+    }
+    onZipChanged() {
+        this.address = { ...this.mustAddress, zipCode: this.zip.value || '' };
+        // 'AddressFormComponent.onZipChanged()',
+        // this.zip.value,
+        // address,
+        // this.address,
+        this.addressChange.emit(this.address);
+    }
+    onStateChanged() {
+        const address = this.mustAddress;
+        this.address = { ...address, state: this.state.value || '' };
+        // 'AddressFormComponent.onStateChanged()',
+        // this.state.value,
+        // address,
+        // this.address,
+        this.addressChange.emit(this.address);
+    }
+    onCityChanged() {
+        this.address = { ...this.mustAddress, city: this.city.value || '' };
+        this.addressChange.emit(this.address);
+    }
+    onLinesChanged() {
+        this.address = { ...this.mustAddress, lines: this.lines.value || '' };
+        this.addressChange.emit(this.address);
+    }
+    ngOnChanges(changes) {
+        if (changes['requiredFields'] && this.requiredFields) {
+            if (this.requiredFields?.zip) {
+                this.zip.setValidators([Validators.required]);
+            }
+            if (this.requiredFields?.lines) {
+                this.lines.setValidators([Validators.required]);
+            }
+            if (this.requiredFields?.state) {
+                this.state.setValidators([Validators.required]);
+            }
+            if (this.requiredFields?.city) {
+                this.city.setValidators([Validators.required]);
+            }
+        }
+        if (changes['address']) {
+            if (!this.countryID.dirty) {
+                this.countryID.setValue(this.address?.countryID || '');
+                this.countryID.markAsPristine();
+            }
+            if (!this.zip.dirty) {
+                this.zip.setValue(this.address?.zipCode || '');
+                this.zip.markAsPristine();
+            }
+            if (!this.lines.dirty) {
+                this.lines.setValue(this.address?.lines || '');
+                this.lines.markAsPristine();
+            }
+        }
+    }
+    cancelChanges() {
+        this.countryID.setValue(this.address?.countryID || '');
+        this.countryID.markAsPristine();
+        this.zip.setValue(this.address?.zipCode || '');
+        this.zip.markAsPristine();
+        this.lines.setValue(this.address?.lines || '');
+        this.lines.markAsPristine();
+    }
+    saveChanges() {
+        const success = () => {
+            this.$saving.set(false);
+            this.form.markAsPristine();
+        };
+        const error = (e) => {
+            this.$saving.set(false);
+            this.errorLogger.logError(e, 'Failed to save address');
+        };
+        this.$saving.set(true);
+        const countryID = this.countryID.value;
+        if (this.form.dirty && countryID) {
+            const object = excludeUndefined({
+                countryID,
+                zipCode: this.zip.value || undefined,
+                lines: this.lines.value || undefined,
+            });
+            this.save.emit({ object, success, error });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AddressFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AddressFormComponent, isStandalone: true, selector: "sneat-address-form", inputs: { mode: "mode", title: "title", address: "address", requiredFields: "requiredFields" }, outputs: { save: "save", addressChange: "addressChange", formCreated: "formCreated" }, viewQueries: [{ propertyName: "zipInput", first: true, predicate: ["zipInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-card>\n  <ion-item-divider color=\"light\">\n    <ion-label color=\"medium\">\n      {{ title }}\n      @if (!countryID.value) {\n        <span>&mdash; please select country</span>\n      }\n    </ion-label>\n    @if (mode === \"edit\" && form.dirty) {\n      <ion-buttons slot=\"end\">\n        @if (countryID.value) {\n          <ion-button\n            color=\"primary\"\n            fill=\"solid\"\n            [disabled]=\"$saving()\"\n            (click)=\"saveChanges()\"\n          >\n            @if ($saving()) {\n              <ion-spinner slot=\"start\" color=\"light\" name=\"lines-small\" />\n            } @else {\n              <ion-icon slot=\"start\" name=\"save-outline\" />\n            }\n\n            <ion-label>\n              @if ($saving()) {\n                Saving...\n              } @else {\n                Save changes\n              }\n            </ion-label>\n          </ion-button>\n        }\n\n        @if (!$saving()) {\n          <ion-button (click)=\"cancelChanges()\">\n            <ion-label>Cancel</ion-label>\n          </ion-button>\n        }\n      </ion-buttons>\n    }\n  </ion-item-divider>\n\n  <sneat-country-selector\n    [countryID]=\"countryID.value || undefined\"\n    [disabled]=\"$saving()\"\n    (countryIDChange)=\"onCountryChanged($event)\"\n  />\n\n  @if (countryID.value) {\n    <ion-item>\n      <ion-label color=\"medium\">Zip code</ion-label>\n      <ion-input\n        type=\"text\"\n        #zipInput\n        maxlength=\"10\"\n        [formControl]=\"zip\"\n        [disabled]=\"$saving()\"\n        (ionChange)=\"onZipChanged()\"\n      />\n    </ion-item>\n\n    <ion-item>\n      <ion-label color=\"medium\">State</ion-label>\n      <ion-input\n        type=\"text\"\n        maxlength=\"20\"\n        [formControl]=\"state\"\n        (ionChange)=\"onStateChanged()\"\n      />\n    </ion-item>\n\n    <ion-item>\n      <ion-label color=\"medium\">City</ion-label>\n      <ion-input\n        type=\"text\"\n        maxlength=\"85\"\n        [formControl]=\"city\"\n        (ionChange)=\"onCityChanged()\"\n      />\n    </ion-item>\n\n    <ion-item>\n      <ion-label color=\"medium\">Address</ion-label>\n      <ion-textarea\n        [formControl]=\"lines\"\n        auto-grow=\"true\"\n        [disabled]=\"$saving()\"\n        (ionChange)=\"onLinesChanged()\"\n      />\n    </ion-item>\n  }\n</ion-card>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CountrySelectorComponent, selector: "sneat-country-selector", inputs: ["countryID", "defaultCountryID", "readonly", "disabled", "label", "canBeUnknown"], outputs: ["countryIDChange"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: 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: 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: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AddressFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-address-form', imports: [
+                        ReactiveFormsModule,
+                        FormsModule,
+                        CountrySelectorComponent,
+                        IonCard,
+                        IonItemDivider,
+                        IonLabel,
+                        IonButtons,
+                        IonButton,
+                        IonSpinner,
+                        IonIcon,
+                        IonItem,
+                        IonInput,
+                        IonTextarea,
+                    ], template: "<ion-card>\n  <ion-item-divider color=\"light\">\n    <ion-label color=\"medium\">\n      {{ title }}\n      @if (!countryID.value) {\n        <span>&mdash; please select country</span>\n      }\n    </ion-label>\n    @if (mode === \"edit\" && form.dirty) {\n      <ion-buttons slot=\"end\">\n        @if (countryID.value) {\n          <ion-button\n            color=\"primary\"\n            fill=\"solid\"\n            [disabled]=\"$saving()\"\n            (click)=\"saveChanges()\"\n          >\n            @if ($saving()) {\n              <ion-spinner slot=\"start\" color=\"light\" name=\"lines-small\" />\n            } @else {\n              <ion-icon slot=\"start\" name=\"save-outline\" />\n            }\n\n            <ion-label>\n              @if ($saving()) {\n                Saving...\n              } @else {\n                Save changes\n              }\n            </ion-label>\n          </ion-button>\n        }\n\n        @if (!$saving()) {\n          <ion-button (click)=\"cancelChanges()\">\n            <ion-label>Cancel</ion-label>\n          </ion-button>\n        }\n      </ion-buttons>\n    }\n  </ion-item-divider>\n\n  <sneat-country-selector\n    [countryID]=\"countryID.value || undefined\"\n    [disabled]=\"$saving()\"\n    (countryIDChange)=\"onCountryChanged($event)\"\n  />\n\n  @if (countryID.value) {\n    <ion-item>\n      <ion-label color=\"medium\">Zip code</ion-label>\n      <ion-input\n        type=\"text\"\n        #zipInput\n        maxlength=\"10\"\n        [formControl]=\"zip\"\n        [disabled]=\"$saving()\"\n        (ionChange)=\"onZipChanged()\"\n      />\n    </ion-item>\n\n    <ion-item>\n      <ion-label color=\"medium\">State</ion-label>\n      <ion-input\n        type=\"text\"\n        maxlength=\"20\"\n        [formControl]=\"state\"\n        (ionChange)=\"onStateChanged()\"\n      />\n    </ion-item>\n\n    <ion-item>\n      <ion-label color=\"medium\">City</ion-label>\n      <ion-input\n        type=\"text\"\n        maxlength=\"85\"\n        [formControl]=\"city\"\n        (ionChange)=\"onCityChanged()\"\n      />\n    </ion-item>\n\n    <ion-item>\n      <ion-label color=\"medium\">Address</ion-label>\n      <ion-textarea\n        [formControl]=\"lines\"\n        auto-grow=\"true\"\n        [disabled]=\"$saving()\"\n        (ionChange)=\"onLinesChanged()\"\n      />\n    </ion-item>\n  }\n</ion-card>\n" }]
+        }], propDecorators: { mode: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], address: [{
+                type: Input
+            }], requiredFields: [{
+                type: Input
+            }], save: [{
+                type: Output
+            }], addressChange: [{
+                type: Output
+            }], formCreated: [{
+                type: Output
+            }], zipInput: [{
+                type: ViewChild,
+                args: ['zipInput', { static: false }]
+            }] } });
+//# sourceMappingURL=address-form.component.js.map

package/esm2022/lib/components/address-form/address-form.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"address-form.component.js","sourceRoot":"","sources":["../../../../../../../../libs/contactus/shared/src/lib/components/address-form/address-form.component.ts","../../../../../../../../libs/contactus/shared/src/lib/components/address-form/address-form.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  signal,\n  SimpleChanges,\n  ViewChild,\n  inject,\n} from '@angular/core';\nimport {\n  FormControl,\n  FormGroup,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\nimport {\n  IonButton,\n  IonButtons,\n  IonCard,\n  IonIcon,\n  IonInput,\n  IonItem,\n  IonItemDivider,\n  IonLabel,\n  IonSpinner,\n  IonTextarea,\n} from '@ionic/angular/standalone';\nimport { CountrySelectorComponent, ISaveEvent } from '@sneat/components';\nimport { excludeUndefined } from '@sneat/core';\nimport { IAddress } from '@sneat/contactus-core';\nimport { ErrorLogger, IErrorLogger } from '@sneat/core';\nimport { createSetFocusToInput } from '@sneat/ui';\n\nexport interface IAddressFormControls {\n  countryID: FormControl<string | null>;\n  zip: FormControl<string | null>;\n  state: FormControl<string | null>;\n  city: FormControl<string | null>;\n  lines: FormControl<string | null>;\n}\n\nexport type AddressForm = FormGroup<IAddressFormControls>;\n\nexport interface AddressRequiredFields {\n  zip?: boolean;\n  state?: boolean;\n  city?: boolean;\n  lines?: boolean;\n}\n\n@Component({\n  selector: 'sneat-address-form',\n  templateUrl: './address-form.component.html',\n  imports: [\n    ReactiveFormsModule,\n    FormsModule,\n    CountrySelectorComponent,\n    IonCard,\n    IonItemDivider,\n    IonLabel,\n    IonButtons,\n    IonButton,\n    IonSpinner,\n    IonIcon,\n    IonItem,\n    IonInput,\n    IonTextarea,\n  ],\n})\nexport class AddressFormComponent implements OnChanges, OnInit {\n  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);\n\n  @Input() mode?: 'new' | 'edit';\n  @Input() title = 'Address';\n  @Input() address?: IAddress;\n  @Input() requiredFields?: AddressRequiredFields;\n  @Output() readonly save = new EventEmitter<ISaveEvent<IAddress>>();\n  @Output() readonly addressChange = new EventEmitter<IAddress>();\n  @Output() readonly formCreated = new EventEmitter<AddressForm>(); // TODO: there is should be a better way of doing this\n\n  @ViewChild('zipInput', { static: false }) zipInput?: IonInput;\n\n  public readonly setFocusToInput = createSetFocusToInput(this.errorLogger);\n\n  protected readonly $saving = signal(false);\n\n  protected readonly countryID = new FormControl('', [Validators.required]);\n  protected readonly zip = new FormControl('', [\n    Validators.pattern('[0-9 A-Z]{2,10}'),\n  ]);\n  readonly state = new FormControl<string>('', {\n    validators: [Validators.minLength(2), Validators.maxLength(20)],\n  });\n  readonly city = new FormControl<string>('', {\n    validators: [Validators.minLength(2), Validators.maxLength(20)],\n  });\n  protected readonly lines = new FormControl('', [Validators.maxLength(200)]);\n\n  public readonly form: AddressForm = new FormGroup({\n    countryID: this.countryID,\n    zip: this.zip,\n    state: this.state,\n    city: this.city,\n    lines: this.lines,\n  });\n\n  ngOnInit(): void {\n    this.formCreated.emit(this.form);\n  }\n\n  onCountryChanged(countryID: string): void {\n    this.countryID.setValue(countryID);\n    this.countryID.markAsDirty();\n    if (\n      !countryID ||\n      countryID === '--' ||\n      (this.address?.countryID && this.address.countryID != countryID)\n    ) {\n      this.zip.setValue('');\n      this.lines.setValue('');\n    }\n    this.address = {\n      countryID: countryID,\n      zipCode: this.zip.value || undefined,\n      state: this.state.value || undefined,\n    };\n    this.addressChange.emit(this.address);\n    setTimeout(() => this.setFocusToInput(this.zipInput), 100);\n  }\n\n  get mustAddress(): IAddress {\n    return this.address || { countryID: '' };\n  }\n\n  onZipChanged(): void {\n    this.address = { ...this.mustAddress, zipCode: this.zip.value || '' };\n    // 'AddressFormComponent.onZipChanged()',\n    // this.zip.value,\n    // address,\n    // this.address,\n    this.addressChange.emit(this.address);\n  }\n\n  onStateChanged(): void {\n    const address = this.mustAddress;\n    this.address = { ...address, state: this.state.value || '' };\n    // 'AddressFormComponent.onStateChanged()',\n    // this.state.value,\n    // address,\n    // this.address,\n    this.addressChange.emit(this.address);\n  }\n\n  onCityChanged(): void {\n    this.address = { ...this.mustAddress, city: this.city.value || '' };\n    this.addressChange.emit(this.address);\n  }\n\n  onLinesChanged(): void {\n    this.address = { ...this.mustAddress, lines: this.lines.value || '' };\n    this.addressChange.emit(this.address);\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['requiredFields'] && this.requiredFields) {\n      if (this.requiredFields?.zip) {\n        this.zip.setValidators([Validators.required]);\n      }\n      if (this.requiredFields?.lines) {\n        this.lines.setValidators([Validators.required]);\n      }\n      if (this.requiredFields?.state) {\n        this.state.setValidators([Validators.required]);\n      }\n      if (this.requiredFields?.city) {\n        this.city.setValidators([Validators.required]);\n      }\n    }\n    if (changes['address']) {\n      if (!this.countryID.dirty) {\n        this.countryID.setValue(this.address?.countryID || '');\n        this.countryID.markAsPristine();\n      }\n      if (!this.zip.dirty) {\n        this.zip.setValue(this.address?.zipCode || '');\n        this.zip.markAsPristine();\n      }\n      if (!this.lines.dirty) {\n        this.lines.setValue(this.address?.lines || '');\n        this.lines.markAsPristine();\n      }\n    }\n  }\n\n  protected cancelChanges(): void {\n    this.countryID.setValue(this.address?.countryID || '');\n    this.countryID.markAsPristine();\n    this.zip.setValue(this.address?.zipCode || '');\n    this.zip.markAsPristine();\n    this.lines.setValue(this.address?.lines || '');\n    this.lines.markAsPristine();\n  }\n\n  protected saveChanges(): void {\n    const success = (): void => {\n      this.$saving.set(false);\n      this.form.markAsPristine();\n    };\n    const error = (e: unknown): void => {\n      this.$saving.set(false);\n      this.errorLogger.logError(e, 'Failed to save address');\n    };\n    this.$saving.set(true);\n    const countryID = this.countryID.value;\n    if (this.form.dirty && countryID) {\n      const object: IAddress = excludeUndefined({\n        countryID,\n        zipCode: this.zip.value || undefined,\n        lines: this.lines.value || undefined,\n      });\n      this.save.emit({ object, success, error });\n    }\n  }\n}\n","<ion-card>\n  <ion-item-divider color=\"light\">\n    <ion-label color=\"medium\">\n      {{ title }}\n      @if (!countryID.value) {\n        <span>&mdash; please select country</span>\n      }\n    </ion-label>\n    @if (mode === \"edit\" && form.dirty) {\n      <ion-buttons slot=\"end\">\n        @if (countryID.value) {\n          <ion-button\n            color=\"primary\"\n            fill=\"solid\"\n            [disabled]=\"$saving()\"\n            (click)=\"saveChanges()\"\n          >\n            @if ($saving()) {\n              <ion-spinner slot=\"start\" color=\"light\" name=\"lines-small\" />\n            } @else {\n              <ion-icon slot=\"start\" name=\"save-outline\" />\n            }\n\n            <ion-label>\n              @if ($saving()) {\n                Saving...\n              } @else {\n                Save changes\n              }\n            </ion-label>\n          </ion-button>\n        }\n\n        @if (!$saving()) {\n          <ion-button (click)=\"cancelChanges()\">\n            <ion-label>Cancel</ion-label>\n          </ion-button>\n        }\n      </ion-buttons>\n    }\n  </ion-item-divider>\n\n  <sneat-country-selector\n    [countryID]=\"countryID.value || undefined\"\n    [disabled]=\"$saving()\"\n    (countryIDChange)=\"onCountryChanged($event)\"\n  />\n\n  @if (countryID.value) {\n    <ion-item>\n      <ion-label color=\"medium\">Zip code</ion-label>\n      <ion-input\n        type=\"text\"\n        #zipInput\n        maxlength=\"10\"\n        [formControl]=\"zip\"\n        [disabled]=\"$saving()\"\n        (ionChange)=\"onZipChanged()\"\n      />\n    </ion-item>\n\n    <ion-item>\n      <ion-label color=\"medium\">State</ion-label>\n      <ion-input\n        type=\"text\"\n        maxlength=\"20\"\n        [formControl]=\"state\"\n        (ionChange)=\"onStateChanged()\"\n      />\n    </ion-item>\n\n    <ion-item>\n      <ion-label color=\"medium\">City</ion-label>\n      <ion-input\n        type=\"text\"\n        maxlength=\"85\"\n        [formControl]=\"city\"\n        (ionChange)=\"onCityChanged()\"\n      />\n    </ion-item>\n\n    <ion-item>\n      <ion-label color=\"medium\">Address</ion-label>\n      <ion-textarea\n        [formControl]=\"lines\"\n        auto-grow=\"true\"\n        [disabled]=\"$saving()\"\n        (ionChange)=\"onLinesChanged()\"\n      />\n    </ion-item>\n  }\n</ion-card>\n"]}

package/esm2022/lib/components/address-form/index.js

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

package/esm2022/lib/components/address-form/index.js.map

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

package/esm2022/lib/components/basic-contact-form/basic-contact-form.component.js

@@ -0,0 +1,71 @@
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IonButton, IonInput, IonItem, IonLabel, IonSpinner, } from '@ionic/angular/standalone';
+import { ErrorLogger } from '@sneat/core';
+import { ContactService } from '@sneat/contactus-services';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class BasicContactFormComponent {
+    constructor() {
+        this.errorLogger = inject(ErrorLogger);
+        this.contactService = inject(ContactService);
+        this.contactChange = new EventEmitter();
+        this.contactCreated = new EventEmitter();
+        this.isSubmitting = false;
+        this.isCreated = false;
+        this.title = '';
+    }
+    createContact(event) {
+        event.stopPropagation();
+        if (!this.space) {
+            console.error('space is required');
+            return;
+        }
+        if (!this.contactType) {
+            console.error('contactType is required');
+            return;
+        }
+        const request = {
+            spaceID: this.space.id,
+            type: this.contactType,
+            // type: this.contactType,
+            roles: this.contactRoles,
+            parentContactID: this.parentContact?.id,
+            status: 'active',
+            basic: {
+                title: this.title,
+            },
+        };
+        this.isSubmitting = true;
+        this.contactService.createContact(this.space, request).subscribe({
+            next: (contact) => {
+                this.isCreated = true;
+                this.contactCreated.emit(contact);
+            },
+            error: (err) => {
+                this.isSubmitting = false;
+                this.errorLogger.logError(err, `Failed to create new [${this.contactType}]`);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BasicContactFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BasicContactFormComponent, isStandalone: true, selector: "sneat-basic-contact-form", inputs: { parentContact: "parentContact", space: "space", contactType: "contactType", contactRoles: "contactRoles" }, outputs: { contactChange: "contactChange", contactCreated: "contactCreated" }, ngImport: i0, template: "<ion-item>\n  <ion-input\n    label=\"Name\"\n    [(ngModel)]=\"title\"\n    required=\"true\"\n    [disabled]=\"isSubmitting\"\n  />\n</ion-item>\n<div class=\"ion-padding\">\n  @if (!isCreated) {\n    <ion-button (click)=\"createContact($event)\" [disabled]=\"isSubmitting\">\n      @if (!isSubmitting) {\n        <ion-label>Create</ion-label>\n      }\n      @if (isSubmitting) {\n        <ion-label>Creating...</ion-label>\n      }\n      @if (isSubmitting && !isCreated) {\n        <ion-spinner name=\"lines-small\" slot=\"end\" />\n      }\n    </ion-button>\n  }\n  @if (isCreated) {\n    <p>Created...</p>\n  }\n</div>\n", dependencies: [{ 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: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BasicContactFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-basic-contact-form', imports: [IonItem, IonInput, FormsModule, IonButton, IonLabel, IonSpinner], template: "<ion-item>\n  <ion-input\n    label=\"Name\"\n    [(ngModel)]=\"title\"\n    required=\"true\"\n    [disabled]=\"isSubmitting\"\n  />\n</ion-item>\n<div class=\"ion-padding\">\n  @if (!isCreated) {\n    <ion-button (click)=\"createContact($event)\" [disabled]=\"isSubmitting\">\n      @if (!isSubmitting) {\n        <ion-label>Create</ion-label>\n      }\n      @if (isSubmitting) {\n        <ion-label>Creating...</ion-label>\n      }\n      @if (isSubmitting && !isCreated) {\n        <ion-spinner name=\"lines-small\" slot=\"end\" />\n      }\n    </ion-button>\n  }\n  @if (isCreated) {\n    <p>Created...</p>\n  }\n</div>\n" }]
+        }], propDecorators: { parentContact: [{
+                type: Input
+            }], space: [{
+                type: Input,
+                args: [{ required: true }]
+            }], contactType: [{
+                type: Input
+            }], contactRoles: [{
+                type: Input
+            }], contactChange: [{
+                type: Output
+            }], contactCreated: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=basic-contact-form.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"basic-contact-form.component.js","sourceRoot":"","sources":["../../../../../../../../libs/contactus/shared/src/lib/components/basic-contact-form/basic-contact-form.component.ts","../../../../../../../../libs/contactus/shared/src/lib/components/basic-contact-form/basic-contact-form.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EACL,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,UAAU,GACX,MAAM,2BAA2B,CAAC;AAOnC,OAAO,EAAE,WAAW,EAAgB,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;;;AAQ3D,MAAM,OAAO,yBAAyB;IALtC;QAMmB,gBAAW,GAAG,MAAM,CAAe,WAAW,CAAC,CAAC;QAChD,mBAAc,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;QAStC,kBAAa,GAAG,IAAI,YAAY,EAAqB,CAAC;QACtD,mBAAc,GAAG,IAAI,YAAY,EAAqB,CAAC;QAE1E,iBAAY,GAAG,KAAK,CAAC;QACrB,cAAS,GAAG,KAAK,CAAC;QAElB,UAAK,GAAG,EAAE,CAAC;KAuCZ;IArCC,aAAa,CAAC,KAAY;QACxB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;YACzC,OAAO;QACT,CAAC;QACD,MAAM,OAAO,GAA+B;YAC1C,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE;YACtB,IAAI,EAAE,IAAI,CAAC,WAAW;YACtB,0BAA0B;YAC1B,KAAK,EAAE,IAAI,CAAC,YAAY;YACxB,eAAe,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE;YACvC,MAAM,EAAE,QAAQ;YAChB,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB;SACF,CAAC;QACF,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAEzB,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC;YAC/D,IAAI,EAAE,CAAC,OAAO,EAAE,EAAE;gBAChB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACpC,CAAC;YACD,KAAK,EAAE,CAAC,GAAY,EAAE,EAAE;gBACtB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;gBAC1B,IAAI,CAAC,WAAW,CAAC,QAAQ,CACvB,GAAG,EACH,yBAAyB,IAAI,CAAC,WAAW,GAAG,CAC7C,CAAC;YACJ,CAAC;SACF,CAAC,CAAC;IACL,CAAC;8GAvDU,yBAAyB;kGAAzB,yBAAyB,yRCxBtC,snBA0BA,4CDJY,OAAO,0NAAE,QAAQ,6eAAE,WAAW,4jBAAE,SAAS,oPAAE,QAAQ,6FAAE,UAAU;;2FAE9D,yBAAyB;kBALrC,SAAS;+BACE,0BAA0B,WAE3B,CAAC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,CAAC;;sBAMzE,KAAK;;sBACL,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;sBACxB,KAAK;;sBAGL,KAAK;;sBAEL,MAAM;;sBACN,MAAM","sourcesContent":["import { Component, EventEmitter, Input, Output, inject } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport {\n  IonButton,\n  IonInput,\n  IonItem,\n  IonLabel,\n  IonSpinner,\n} from '@ionic/angular/standalone';\nimport {\n  ContactRole,\n  ContactType,\n  IContactWithBrief,\n  ICreateContactBasicRequest,\n} from '@sneat/contactus-core';\nimport { ErrorLogger, IErrorLogger } from '@sneat/core';\nimport { ContactService } from '@sneat/contactus-services';\nimport { ISpaceContext } from '@sneat/space-models';\n\n@Component({\n  selector: 'sneat-basic-contact-form',\n  templateUrl: './basic-contact-form.component.html',\n  imports: [IonItem, IonInput, FormsModule, IonButton, IonLabel, IonSpinner],\n})\nexport class BasicContactFormComponent {\n  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);\n  private readonly contactService = inject(ContactService);\n\n  @Input() parentContact?: IContactWithBrief;\n  @Input({ required: true }) space?: ISpaceContext;\n  @Input() contactType?: ContactType;\n\n  // @Input() contactRole?: ContactRole; // use contactRoles to support multiple roles\n  @Input() contactRoles?: ContactRole[];\n\n  @Output() readonly contactChange = new EventEmitter<IContactWithBrief>();\n  @Output() readonly contactCreated = new EventEmitter<IContactWithBrief>();\n\n  isSubmitting = false;\n  isCreated = false;\n\n  title = '';\n\n  createContact(event: Event): void {\n    event.stopPropagation();\n    if (!this.space) {\n      console.error('space is required');\n      return;\n    }\n    if (!this.contactType) {\n      console.error('contactType is required');\n      return;\n    }\n    const request: ICreateContactBasicRequest = {\n      spaceID: this.space.id,\n      type: this.contactType,\n      // type: this.contactType,\n      roles: this.contactRoles,\n      parentContactID: this.parentContact?.id,\n      status: 'active',\n      basic: {\n        title: this.title,\n      },\n    };\n    this.isSubmitting = true;\n\n    this.contactService.createContact(this.space, request).subscribe({\n      next: (contact) => {\n        this.isCreated = true;\n        this.contactCreated.emit(contact);\n      },\n      error: (err: unknown) => {\n        this.isSubmitting = false;\n        this.errorLogger.logError(\n          err,\n          `Failed to create new [${this.contactType}]`,\n        );\n      },\n    });\n  }\n}\n","<ion-item>\n  <ion-input\n    label=\"Name\"\n    [(ngModel)]=\"title\"\n    required=\"true\"\n    [disabled]=\"isSubmitting\"\n  />\n</ion-item>\n<div class=\"ion-padding\">\n  @if (!isCreated) {\n    <ion-button (click)=\"createContact($event)\" [disabled]=\"isSubmitting\">\n      @if (!isSubmitting) {\n        <ion-label>Create</ion-label>\n      }\n      @if (isSubmitting) {\n        <ion-label>Creating...</ion-label>\n      }\n      @if (isSubmitting && !isCreated) {\n        <ion-spinner name=\"lines-small\" slot=\"end\" />\n      }\n    </ion-button>\n  }\n  @if (isCreated) {\n    <p>Created...</p>\n  }\n</div>\n"]}

package/esm2022/lib/components/basic-contact-form/index.js

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

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

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

package/esm2022/lib/components/contact-comm-channels/comm-channel-form.component.js

@@ -0,0 +1,90 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, inject, input, Output, signal, } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { IonButton, IonButtons, IonIcon, IonInput, IonItem, IonLabel, IonSelect, IonSelectOption, IonTextarea, } from '@ionic/angular/standalone';
+import { ContactService, } from '@sneat/contactus-services';
+import { ClassName, SelectFromListComponent, SneatBaseComponent, } from '@sneat/ui';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class CommChannelFormComponent extends SneatBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.$contact = input.required(...(ngDevMode ? [{ debugName: "$contact" }] : []));
+        this.$channelType = input.required(...(ngDevMode ? [{ debugName: "$channelType" }] : []));
+        this.$placeholder = input.required(...(ngDevMode ? [{ debugName: "$placeholder" }] : []));
+        this.closeForm = new EventEmitter();
+        this.$type = signal(undefined, ...(ngDevMode ? [{ debugName: "$type" }] : []));
+        this.channelID = new FormControl('', Validators.required);
+        this.types = [
+            { id: 'personal', title: 'Personal' },
+            { id: 'work', title: 'Work' },
+        ];
+        this.contactService = inject(ContactService);
+        this.$saving = signal(false, ...(ngDevMode ? [{ debugName: "$saving" }] : []));
+    }
+    onTypeChanged(value) {
+        this.$type.set(value);
+    }
+    addNewChannel(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        // console.log('addNewChannel');
+        const contact = this.$contact();
+        if (!contact.id) {
+            return;
+        }
+        const channelID = (this.channelID.value || '').trim();
+        if (!channelID) {
+            this.channelID.markAsTouched();
+            this.channelID.setErrors({ required: true });
+            return;
+        }
+        const request = {
+            contactID: contact.id,
+            spaceID: contact.space.id,
+            channelType: this.$channelType(),
+            type: 'private',
+            channelID,
+        };
+        this.$saving.set(true);
+        this.contactService.addContactCommChannel(request).subscribe({
+            next: () => {
+                this.closeForm.emit();
+            },
+            error: (err) => {
+                this.$saving.set(false);
+                this.errorLogger.logError(err, `Failed to add ${this.$channelType()}`);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CommChannelFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CommChannelFormComponent, isStandalone: true, selector: "sneat-comm-channel-form", inputs: { $contact: { classPropertyName: "$contact", publicName: "$contact", isSignal: true, isRequired: true, transformFunction: null }, $channelType: { classPropertyName: "$channelType", publicName: "$channelType", isSignal: true, isRequired: true, transformFunction: null }, $placeholder: { classPropertyName: "$placeholder", publicName: "$placeholder", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closeForm: "closeForm" }, providers: [
+            {
+                provide: ClassName,
+                useValue: 'CommChannelFormComponent',
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<ion-item class=\"sneat-tiny-end-padding\">\n  @if ($type()) {\n    <ion-select\n      [value]=\"$type()\"\n      placeholder=\"Choose type\"\n      interface=\"popover\"\n      slot=\"start\"\n      style=\"min-width: 120px\"\n      (ionChange)=\"onTypeChanged($event.detail.value)\"\n    >\n      <ion-select-option value=\"work\">Work</ion-select-option>\n      <ion-select-option value=\"personal\">Personal</ion-select-option>\n    </ion-select>\n  }\n  <ion-input\n    [formControl]=\"channelID\"\n    [placeholder]=\"$placeholder()\"\n    (keyup.enter)=\"addNewChannel($event)\"\n  />\n\n  <ion-buttons>\n    <ion-button fill=\"solid\" color=\"primary\" (click)=\"addNewChannel($event)\">\n      <ion-label>Add</ion-label>\n    </ion-button>\n    <ion-button (click)=\"closeForm.emit()\">\n      <ion-icon name=\"close-outline\" />\n    </ion-button>\n  </ion-buttons>\n</ion-item>\n\n@if (!$type()) {\n  <sneat-select-from-list\n    [items]=\"types\"\n    (valueChange)=\"onTypeChanged($event)\"\n  />\n}\n\n<ion-item lines=\"none\">\n  <ion-textarea label=\"Note\" labelPlacement=\"stacked\" />\n</ion-item>\n", dependencies: [{ 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: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { 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"] }, { 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: 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: 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: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CommChannelFormComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        IonButton,
+                        IonButtons,
+                        IonIcon,
+                        IonInput,
+                        IonItem,
+                        IonLabel,
+                        IonSelect,
+                        IonTextarea,
+                        SelectFromListComponent,
+                        IonSelectOption,
+                        ReactiveFormsModule,
+                    ], providers: [
+                        {
+                            provide: ClassName,
+                            useValue: 'CommChannelFormComponent',
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'sneat-comm-channel-form', template: "<ion-item class=\"sneat-tiny-end-padding\">\n  @if ($type()) {\n    <ion-select\n      [value]=\"$type()\"\n      placeholder=\"Choose type\"\n      interface=\"popover\"\n      slot=\"start\"\n      style=\"min-width: 120px\"\n      (ionChange)=\"onTypeChanged($event.detail.value)\"\n    >\n      <ion-select-option value=\"work\">Work</ion-select-option>\n      <ion-select-option value=\"personal\">Personal</ion-select-option>\n    </ion-select>\n  }\n  <ion-input\n    [formControl]=\"channelID\"\n    [placeholder]=\"$placeholder()\"\n    (keyup.enter)=\"addNewChannel($event)\"\n  />\n\n  <ion-buttons>\n    <ion-button fill=\"solid\" color=\"primary\" (click)=\"addNewChannel($event)\">\n      <ion-label>Add</ion-label>\n    </ion-button>\n    <ion-button (click)=\"closeForm.emit()\">\n      <ion-icon name=\"close-outline\" />\n    </ion-button>\n  </ion-buttons>\n</ion-item>\n\n@if (!$type()) {\n  <sneat-select-from-list\n    [items]=\"types\"\n    (valueChange)=\"onTypeChanged($event)\"\n  />\n}\n\n<ion-item lines=\"none\">\n  <ion-textarea label=\"Note\" labelPlacement=\"stacked\" />\n</ion-item>\n" }]
+        }], propDecorators: { $contact: [{ type: i0.Input, args: [{ isSignal: true, alias: "$contact", required: true }] }], $channelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "$channelType", required: true }] }], $placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "$placeholder", required: true }] }], closeForm: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=comm-channel-form.component.js.map

package/esm2022/lib/components/contact-comm-channels/comm-channel-form.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"comm-channel-form.component.js","sourceRoot":"","sources":["../../../../../../../../libs/contactus/shared/src/lib/components/contact-comm-channels/comm-channel-form.component.ts","../../../../../../../../libs/contactus/shared/src/lib/components/contact-comm-channels/comm-channel-form.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  inject,\n  input,\n  Output,\n  signal,\n} from '@angular/core';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport {\n  IonButton,\n  IonButtons,\n  IonIcon,\n  IonInput,\n  IonItem,\n  IonLabel,\n  IonSelect,\n  IonSelectOption,\n  IonTextarea,\n} from '@ionic/angular/standalone';\nimport { ContactCommChannelType, IContactContext } from '@sneat/contactus-core';\nimport {\n  ContactService,\n  IAddContactCommChannelRequest,\n} from '@sneat/contactus-services';\nimport {\n  ClassName,\n  ISelectItem,\n  SelectFromListComponent,\n  SneatBaseComponent,\n} from '@sneat/ui';\n\n@Component({\n  imports: [\n    IonButton,\n    IonButtons,\n    IonIcon,\n    IonInput,\n    IonItem,\n    IonLabel,\n    IonSelect,\n    IonTextarea,\n    SelectFromListComponent,\n    IonSelectOption,\n    ReactiveFormsModule,\n  ],\n  providers: [\n    {\n      provide: ClassName,\n      useValue: 'CommChannelFormComponent',\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'sneat-comm-channel-form',\n  templateUrl: 'comm-channel-form.component.html',\n})\nexport class CommChannelFormComponent extends SneatBaseComponent {\n  public readonly $contact = input.required<IContactContext>();\n  public readonly $channelType = input.required<ContactCommChannelType>();\n  public readonly $placeholder = input.required<string>();\n\n  @Output() public readonly closeForm = new EventEmitter<void>();\n\n  protected readonly $type = signal<'personal' | 'work' | undefined>(undefined);\n\n  protected readonly channelID = new FormControl('', Validators.required);\n\n  protected readonly types: readonly ISelectItem[] = [\n    { id: 'personal', title: 'Personal' },\n    { id: 'work', title: 'Work' },\n  ];\n\n  protected onTypeChanged(value: string): void {\n    this.$type.set(value as 'personal' | 'work');\n  }\n\n  private readonly contactService = inject(ContactService);\n\n  protected readonly $saving = signal(false);\n\n  protected addNewChannel(event: Event): void {\n    event.stopPropagation();\n    event.preventDefault();\n    // console.log('addNewChannel');\n    const contact = this.$contact();\n    if (!contact.id) {\n      return;\n    }\n    const channelID = (this.channelID.value || '').trim();\n    if (!channelID) {\n      this.channelID.markAsTouched();\n      this.channelID.setErrors({ required: true });\n      return;\n    }\n    const request: IAddContactCommChannelRequest = {\n      contactID: contact.id,\n      spaceID: contact.space.id,\n      channelType: this.$channelType(),\n      type: 'private',\n      channelID,\n    };\n    this.$saving.set(true);\n    this.contactService.addContactCommChannel(request).subscribe({\n      next: () => {\n        this.closeForm.emit();\n      },\n      error: (err) => {\n        this.$saving.set(false);\n        this.errorLogger.logError(err, `Failed to add ${this.$channelType()}`);\n      },\n    });\n  }\n}\n","<ion-item class=\"sneat-tiny-end-padding\">\n  @if ($type()) {\n    <ion-select\n      [value]=\"$type()\"\n      placeholder=\"Choose type\"\n      interface=\"popover\"\n      slot=\"start\"\n      style=\"min-width: 120px\"\n      (ionChange)=\"onTypeChanged($event.detail.value)\"\n    >\n      <ion-select-option value=\"work\">Work</ion-select-option>\n      <ion-select-option value=\"personal\">Personal</ion-select-option>\n    </ion-select>\n  }\n  <ion-input\n    [formControl]=\"channelID\"\n    [placeholder]=\"$placeholder()\"\n    (keyup.enter)=\"addNewChannel($event)\"\n  />\n\n  <ion-buttons>\n    <ion-button fill=\"solid\" color=\"primary\" (click)=\"addNewChannel($event)\">\n      <ion-label>Add</ion-label>\n    </ion-button>\n    <ion-button (click)=\"closeForm.emit()\">\n      <ion-icon name=\"close-outline\" />\n    </ion-button>\n  </ion-buttons>\n</ion-item>\n\n@if (!$type()) {\n  <sneat-select-from-list\n    [items]=\"types\"\n    (valueChange)=\"onTypeChanged($event)\"\n  />\n}\n\n<ion-item lines=\"none\">\n  <ion-textarea label=\"Note\" labelPlacement=\"stacked\" />\n</ion-item>\n"]}

package/esm2022/lib/components/contact-comm-channels/comm-channel-item.component.js

@@ -0,0 +1,128 @@
+import { ChangeDetectionStrategy, Component, effect, signal, input, inject, } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { IonButton, IonButtons, IonIcon, IonInput, IonItem, IonLabel, IonSelect, IonSelectOption, } from '@ionic/angular/standalone';
+import { ContactService, } from '@sneat/contactus-services';
+import { ClassName, SneatBaseComponent } from '@sneat/ui';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class CommChannelItemComponent extends SneatBaseComponent {
+    constructor() {
+        super();
+        this.$channelType = input.required(...(ngDevMode ? [{ debugName: "$channelType" }] : []));
+        this.$channel = input.required(...(ngDevMode ? [{ debugName: "$channel" }] : []));
+        this.$contactID = input.required(...(ngDevMode ? [{ debugName: "$contactID" }] : []));
+        this.$spaceID = input.required(...(ngDevMode ? [{ debugName: "$spaceID" }] : []));
+        this.channelID = new FormControl();
+        this.$lines = input.required(...(ngDevMode ? [{ debugName: "$lines" }] : []));
+        this.$saving = signal(false, ...(ngDevMode ? [{ debugName: "$saving" }] : []));
+        this.contactService = inject(ContactService);
+        effect(() => {
+            const channel = this.$channel();
+            if (!this.channelID.dirty) {
+                this.channelID.setValue(channel.id);
+            }
+        });
+    }
+    deleteChannel(_event) {
+        // console.log('deleteChannel', event);
+        const channelID = this.$channel().id;
+        if (!channelID) {
+            throw new Error('Unable to delete channel without ID');
+        }
+        if (!confirm(`Are you sure you want to delete ${channelID}?`)) {
+            return;
+        }
+        this.$saving.set(true);
+        const request = {
+            spaceID: this.$spaceID(),
+            contactID: this.$contactID(),
+            channelType: this.$channelType(),
+            channelID,
+        };
+        this.contactService
+            .deleteContactCommChannel(request)
+            .pipe(this.takeUntilDestroyed())
+            .subscribe({
+            next: () => this.$saving.set(false),
+            error: (err) => {
+                this.$saving.set(false);
+                this.errorLogger.logError(err, 'Failed to delete contact ' + this.$channelType());
+            },
+        });
+    }
+    saveChanges(_event) {
+        // console.log('saveChanges', event);
+        const channelID = (this.channelID.value || '').trim();
+        if (!channelID) {
+            this.channelID.markAsTouched();
+            this.channelID.setErrors({ required: true });
+            return;
+        }
+        this.$saving.set(true);
+        const request = {
+            spaceID: this.$spaceID(),
+            contactID: this.$contactID(),
+            channelID: this.$channel().id,
+            channelType: this.$channelType(),
+            newChannelID: channelID,
+        };
+        this.contactService
+            .updateContactCommChannel(request)
+            .pipe(this.takeUntilDestroyed())
+            .subscribe({
+            next: () => this.$saving.set(false),
+            error: (err) => {
+                this.errorLogger.logError(err, 'Failed to update contact' + this.$channelType());
+            },
+        });
+    }
+    onTypeChanged(event) {
+        // console.log('onTypeChanged', event);
+        const type = event.detail.value;
+        this.$saving.set(true);
+        const request = {
+            spaceID: this.$spaceID(),
+            contactID: this.$contactID(),
+            channelID: this.$channel().id,
+            channelType: this.$channelType(),
+            type,
+        };
+        this.contactService
+            .updateContactCommChannel(request)
+            .pipe(this.takeUntilDestroyed())
+            .subscribe({
+            next: () => this.$saving.set(false),
+            error: (err) => {
+                this.$saving.set(false);
+                this.errorLogger.logError(err, 'Failed to update type of contact ' + this.$channelType());
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CommChannelItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CommChannelItemComponent, isStandalone: true, selector: "sneat-comm-channel-item", inputs: { $channelType: { classPropertyName: "$channelType", publicName: "$channelType", isSignal: true, isRequired: true, transformFunction: null }, $channel: { classPropertyName: "$channel", publicName: "$channel", isSignal: true, isRequired: true, transformFunction: null }, $contactID: { classPropertyName: "$contactID", publicName: "$contactID", isSignal: true, isRequired: true, transformFunction: null }, $spaceID: { classPropertyName: "$spaceID", publicName: "$spaceID", isSignal: true, isRequired: true, transformFunction: null }, $lines: { classPropertyName: "$lines", publicName: "$lines", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            {
+                provide: ClassName,
+                useValue: 'CommChannelItemComponent',
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<ion-item class=\"sneat-tiny-end-padding\" [lines]=\"$lines()\">\n  <ion-select\n    placeholder=\"Choose type\"\n    interface=\"popover\"\n    slot=\"start\"\n    [value]=\"$channel().type\"\n    style=\"min-width: 120px\"\n    (ionChange)=\"onTypeChanged($event)\"\n  >\n    <ion-select-option value=\"work\">Work</ion-select-option>\n    <ion-select-option value=\"personal\">Personal</ion-select-option>\n  </ion-select>\n\n  <ion-input [formControl]=\"channelID\" (keyup.enter)=\"saveChanges($event)\" />\n\n  <ion-buttons slot=\"end\">\n    @if (channelID.dirty) {\n      <ion-button fill=\"solid\" color=\"danger\" (click)=\"saveChanges($event)\">\n        <ion-icon name=\"save-outline\" />\n        <ion-label>Save</ion-label>\n      </ion-button>\n      <ion-button\n        title=\"Cancel changes\"\n        (click)=\"channelID.reset($channel().id)\"\n      >\n        <ion-icon name=\"close-outline\" />\n      </ion-button>\n    } @else {\n      <ion-button title=\"Copy\">\n        <ion-icon name=\"copy-outline\" />\n      </ion-button>\n      <ion-button title=\"Remove\" (click)=\"deleteChannel($event)\">\n        <ion-icon name=\"close-outline\" />\n      </ion-button>\n    }\n  </ion-buttons>\n</ion-item>\n", dependencies: [{ 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: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CommChannelItemComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        IonButton,
+                        IonButtons,
+                        IonIcon,
+                        IonInput,
+                        IonItem,
+                        IonSelect,
+                        IonSelectOption,
+                        ReactiveFormsModule,
+                        IonLabel,
+                    ], providers: [
+                        {
+                            provide: ClassName,
+                            useValue: 'CommChannelItemComponent',
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'sneat-comm-channel-item', template: "<ion-item class=\"sneat-tiny-end-padding\" [lines]=\"$lines()\">\n  <ion-select\n    placeholder=\"Choose type\"\n    interface=\"popover\"\n    slot=\"start\"\n    [value]=\"$channel().type\"\n    style=\"min-width: 120px\"\n    (ionChange)=\"onTypeChanged($event)\"\n  >\n    <ion-select-option value=\"work\">Work</ion-select-option>\n    <ion-select-option value=\"personal\">Personal</ion-select-option>\n  </ion-select>\n\n  <ion-input [formControl]=\"channelID\" (keyup.enter)=\"saveChanges($event)\" />\n\n  <ion-buttons slot=\"end\">\n    @if (channelID.dirty) {\n      <ion-button fill=\"solid\" color=\"danger\" (click)=\"saveChanges($event)\">\n        <ion-icon name=\"save-outline\" />\n        <ion-label>Save</ion-label>\n      </ion-button>\n      <ion-button\n        title=\"Cancel changes\"\n        (click)=\"channelID.reset($channel().id)\"\n      >\n        <ion-icon name=\"close-outline\" />\n      </ion-button>\n    } @else {\n      <ion-button title=\"Copy\">\n        <ion-icon name=\"copy-outline\" />\n      </ion-button>\n      <ion-button title=\"Remove\" (click)=\"deleteChannel($event)\">\n        <ion-icon name=\"close-outline\" />\n      </ion-button>\n    }\n  </ion-buttons>\n</ion-item>\n" }]
+        }], ctorParameters: () => [], propDecorators: { $channelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "$channelType", required: true }] }], $channel: [{ type: i0.Input, args: [{ isSignal: true, alias: "$channel", required: true }] }], $contactID: [{ type: i0.Input, args: [{ isSignal: true, alias: "$contactID", required: true }] }], $spaceID: [{ type: i0.Input, args: [{ isSignal: true, alias: "$spaceID", required: true }] }], $lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "$lines", required: true }] }] } });
+//# sourceMappingURL=comm-channel-item.component.js.map