@sneat/auth-ui 0.1.3 → 0.1.6

package/esm2022/index.js

@@ -0,0 +1,4 @@
+export * from './lib/pages/sneat-auth-routing.module';
+export * from './lib/components';
+export * from './lib/pipes/person-names.pipe';
+//# sourceMappingURL=index.js.map

package/esm2022/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/auth/ui/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC;AACtD,cAAc,kBAAkB,CAAC;AACjC,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './lib/pages/sneat-auth-routing.module';\nexport * from './lib/components';\nexport * from './lib/pipes/person-names.pipe';\n"]}

package/esm2022/lib/components/auth-menu-item/auth-menu-item.component.js

@@ -0,0 +1,82 @@
+import { JsonPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, signal, inject, } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { IonButton, IonButtons, IonIcon, IonItem, IonItemDivider, IonLabel, MenuController, NavController, } from '@ionic/angular/standalone';
+import { SneatAuthStateService, SneatUserService, } from '@sneat/auth-core';
+import { ErrorLogger } from '@sneat/core';
+import { Subject, takeUntil } from 'rxjs';
+import { PersonNamesPipe, personNames } from '../../pipes/person-names.pipe';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+export class AuthMenuItemComponent {
+    ngOnDestroy() {
+        this.$destroyed.next();
+        this.$destroyed.complete();
+    }
+    constructor() {
+        this.errorLogger = inject(ErrorLogger);
+        this.navCtrl = inject(NavController);
+        this.authStateService = inject(SneatAuthStateService);
+        this.menuController = inject(MenuController);
+        this.$user = signal(undefined, ...(ngDevMode ? [{ debugName: "$user" }] : []));
+        this.$err = signal(undefined, ...(ngDevMode ? [{ debugName: "$err" }] : []));
+        this.$authState = signal(undefined, ...(ngDevMode ? [{ debugName: "$authState" }] : []));
+        this.$authStatus = computed(() => this.$authState()?.status, ...(ngDevMode ? [{ debugName: "$authStatus" }] : []));
+        this.$isAuthenticating = computed(() => this.$authStatus() === 'authenticating', ...(ngDevMode ? [{ debugName: "$isAuthenticating" }] : []));
+        this.$destroyed = new Subject();
+        this.personName = personNames;
+        const errorLogger = this.errorLogger;
+        const authStateService = this.authStateService;
+        const userService = inject(SneatUserService);
+        userService.userState
+            .pipe(takeUntil(this.$destroyed))
+            .subscribe(this.$user.set);
+        authStateService.authState.pipe(takeUntil(this.$destroyed)).subscribe({
+            next: this.$authState.set,
+            error: (err) => {
+                this.$err.set(err);
+                errorLogger.logError('failed to get auth state');
+            },
+        });
+    }
+    closeMenu() {
+        this.menuController
+            .close()
+            .catch(this.errorLogger.logErrorHandler('Failed to close menu'));
+    }
+    logout(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        try {
+            this.authStateService
+                .signOut()
+                .then(() => {
+                this.navCtrl
+                    .navigateBack('/signed-out')
+                    .catch(this.errorLogger.logErrorHandler('Failed to navigate to signed out page'));
+            })
+                .catch(this.errorLogger.logErrorHandler('Failed to sign out'));
+        }
+        catch (e) {
+            this.errorLogger.logError(e, 'Failed to logout');
+        }
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AuthMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AuthMenuItemComponent, isStandalone: true, selector: "sneat-auth-menu-item", ngImport: i0, template: "<ion-item-divider color=\"light\">\n  @if ($authStatus() === \"authenticated\") {\n    <ion-label>Signed in as</ion-label>\n  } @else {\n    <ion-label>Authentication</ion-label>\n  }\n</ion-item-divider>\n@if (!$authState()) {\n  <ion-item>\n    <ion-label>Loading....</ion-label>\n  </ion-item>\n} @else if ($isAuthenticating()) {\n  <ion-item routerLink=\"login\">\n    <ion-label>Authenticating....</ion-label>\n  </ion-item>\n}\n@if ($authStatus() === \"notAuthenticated\") {\n  <ion-item routerLink=\"/login\" tappable=\"true\">\n    <ion-icon slot=\"start\" name=\"person-circle-outline\" />\n    <ion-label color=\"primary\"> Please sign in</ion-label>\n  </ion-item>\n}\n@if ($authStatus() === \"authenticated\") {\n  <ion-item\n    tappable=\"true\"\n    routerLink=\"/my\"\n    routerDirection=\"forward\"\n    (click)=\"closeMenu()\"\n  >\n    <!--    <ion-buttons slot=\"start\" class=\"ion-no-margin\">-->\n    <!--      <ion-button disabled color=\"medium\" >-->\n    <!--        <ion-icon  slot=\"start\" name=\"person-circle-outline\"></ion-icon>-->\n    <!--      </ion-button>-->\n    <!--    </ion-buttons>-->\n    <ion-icon slot=\"start\" name=\"person-circle-outline\" />\n\n    <ion-label color=\"medium\">\n      @if ($user()?.record?.names; as names) {\n        {{ names | personNames }}\n      } @else {\n        @if ($authState()?.user; as user) {\n          {{ user.displayName || user.email || user.phoneNumber || user.uid }}\n        }\n      }\n    </ion-label>\n\n    <ion-buttons slot=\"end\">\n      <!--\t\t<ion-button color=\"medium\" title=\"Settings\">-->\n      <!--\t\t\t<ion-icon name=\"settings-outline\"></ion-icon>-->\n      <!--\t\t</ion-button>-->\n      <ion-button color=\"medium\" title=\"Sign-out\" (click)=\"logout($event)\">\n        <ion-icon name=\"log-out-outline\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-item>\n}\n@if ($err()) {\n  <ion-item> ERROR: {{ $err() | json }}</ion-item>\n}\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: 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: "pipe", type: PersonNamesPipe, name: "personNames" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AuthMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-auth-menu-item', imports: [
+                        RouterModule,
+                        PersonNamesPipe,
+                        IonItemDivider,
+                        IonLabel,
+                        IonItem,
+                        IonIcon,
+                        IonButtons,
+                        IonButton,
+                        JsonPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item-divider color=\"light\">\n  @if ($authStatus() === \"authenticated\") {\n    <ion-label>Signed in as</ion-label>\n  } @else {\n    <ion-label>Authentication</ion-label>\n  }\n</ion-item-divider>\n@if (!$authState()) {\n  <ion-item>\n    <ion-label>Loading....</ion-label>\n  </ion-item>\n} @else if ($isAuthenticating()) {\n  <ion-item routerLink=\"login\">\n    <ion-label>Authenticating....</ion-label>\n  </ion-item>\n}\n@if ($authStatus() === \"notAuthenticated\") {\n  <ion-item routerLink=\"/login\" tappable=\"true\">\n    <ion-icon slot=\"start\" name=\"person-circle-outline\" />\n    <ion-label color=\"primary\"> Please sign in</ion-label>\n  </ion-item>\n}\n@if ($authStatus() === \"authenticated\") {\n  <ion-item\n    tappable=\"true\"\n    routerLink=\"/my\"\n    routerDirection=\"forward\"\n    (click)=\"closeMenu()\"\n  >\n    <!--    <ion-buttons slot=\"start\" class=\"ion-no-margin\">-->\n    <!--      <ion-button disabled color=\"medium\" >-->\n    <!--        <ion-icon  slot=\"start\" name=\"person-circle-outline\"></ion-icon>-->\n    <!--      </ion-button>-->\n    <!--    </ion-buttons>-->\n    <ion-icon slot=\"start\" name=\"person-circle-outline\" />\n\n    <ion-label color=\"medium\">\n      @if ($user()?.record?.names; as names) {\n        {{ names | personNames }}\n      } @else {\n        @if ($authState()?.user; as user) {\n          {{ user.displayName || user.email || user.phoneNumber || user.uid }}\n        }\n      }\n    </ion-label>\n\n    <ion-buttons slot=\"end\">\n      <!--\t\t<ion-button color=\"medium\" title=\"Settings\">-->\n      <!--\t\t\t<ion-icon name=\"settings-outline\"></ion-icon>-->\n      <!--\t\t</ion-button>-->\n      <ion-button color=\"medium\" title=\"Sign-out\" (click)=\"logout($event)\">\n        <ion-icon name=\"log-out-outline\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-item>\n}\n@if ($err()) {\n  <ion-item> ERROR: {{ $err() | json }}</ion-item>\n}\n" }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=auth-menu-item.component.js.map

package/esm2022/lib/components/auth-menu-item/auth-menu-item.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-menu-item.component.js","sourceRoot":"","sources":["../../../../../../../../libs/auth/ui/src/lib/components/auth-menu-item/auth-menu-item.component.ts","../../../../../../../../libs/auth/ui/src/lib/components/auth-menu-item/auth-menu-item.component.html"],"names":[],"mappings":"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","sourcesContent":["import { JsonPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  signal,\n  OnDestroy,\n  inject,\n} from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport {\n  IonButton,\n  IonButtons,\n  IonIcon,\n  IonItem,\n  IonItemDivider,\n  IonLabel,\n  MenuController,\n  NavController,\n} from '@ionic/angular/standalone';\nimport {\n  ISneatAuthState,\n  ISneatUserState,\n  SneatAuthStateService,\n  SneatUserService,\n} from '@sneat/auth-core';\nimport { ErrorLogger, IErrorLogger } from '@sneat/core';\nimport { Subject, takeUntil } from 'rxjs';\nimport { PersonNamesPipe, personNames } from '../../pipes/person-names.pipe';\n@Component({\n  selector: 'sneat-auth-menu-item',\n  templateUrl: './auth-menu-item.component.html',\n  imports: [\n    RouterModule,\n    PersonNamesPipe,\n    IonItemDivider,\n    IonLabel,\n    IonItem,\n    IonIcon,\n    IonButtons,\n    IonButton,\n    JsonPipe,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AuthMenuItemComponent implements OnDestroy {\n  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);\n  private readonly navCtrl = inject(NavController);\n  private readonly authStateService = inject(SneatAuthStateService);\n  private readonly menuController = inject(MenuController);\n\n  protected readonly $user = signal<ISneatUserState | undefined>(undefined);\n  protected $err = signal<unknown>(undefined);\n\n  protected readonly $authState = signal<ISneatAuthState | undefined>(\n    undefined,\n  );\n  protected readonly $authStatus = computed(() => this.$authState()?.status);\n  protected readonly $isAuthenticating = computed(\n    () => this.$authStatus() === 'authenticating',\n  );\n\n  protected readonly $destroyed = new Subject<void>();\n\n  public ngOnDestroy(): void {\n    this.$destroyed.next();\n    this.$destroyed.complete();\n  }\n\n  constructor() {\n    const errorLogger = this.errorLogger;\n    const authStateService = this.authStateService;\n    const userService = inject(SneatUserService);\n\n    userService.userState\n      .pipe(takeUntil(this.$destroyed))\n      .subscribe(this.$user.set);\n    authStateService.authState.pipe(takeUntil(this.$destroyed)).subscribe({\n      next: this.$authState.set,\n      error: (err) => {\n        this.$err.set(err);\n        errorLogger.logError('failed to get auth state');\n      },\n    });\n  }\n\n  public closeMenu(): void {\n    this.menuController\n      .close()\n      .catch(this.errorLogger.logErrorHandler('Failed to close menu'));\n  }\n\n  public logout(event: Event): boolean {\n    event.stopPropagation();\n    event.preventDefault();\n    try {\n      this.authStateService\n        .signOut()\n        .then(() => {\n          this.navCtrl\n            .navigateBack('/signed-out')\n            .catch(\n              this.errorLogger.logErrorHandler(\n                'Failed to navigate to signed out page',\n              ),\n            );\n        })\n        .catch(this.errorLogger.logErrorHandler('Failed to sign out'));\n    } catch (e) {\n      this.errorLogger.logError(e, 'Failed to logout');\n    }\n    return false;\n  }\n\n  protected readonly personName = personNames;\n}\n","<ion-item-divider color=\"light\">\n  @if ($authStatus() === \"authenticated\") {\n    <ion-label>Signed in as</ion-label>\n  } @else {\n    <ion-label>Authentication</ion-label>\n  }\n</ion-item-divider>\n@if (!$authState()) {\n  <ion-item>\n    <ion-label>Loading....</ion-label>\n  </ion-item>\n} @else if ($isAuthenticating()) {\n  <ion-item routerLink=\"login\">\n    <ion-label>Authenticating....</ion-label>\n  </ion-item>\n}\n@if ($authStatus() === \"notAuthenticated\") {\n  <ion-item routerLink=\"/login\" tappable=\"true\">\n    <ion-icon slot=\"start\" name=\"person-circle-outline\" />\n    <ion-label color=\"primary\"> Please sign in</ion-label>\n  </ion-item>\n}\n@if ($authStatus() === \"authenticated\") {\n  <ion-item\n    tappable=\"true\"\n    routerLink=\"/my\"\n    routerDirection=\"forward\"\n    (click)=\"closeMenu()\"\n  >\n    <!--    <ion-buttons slot=\"start\" class=\"ion-no-margin\">-->\n    <!--      <ion-button disabled color=\"medium\" >-->\n    <!--        <ion-icon  slot=\"start\" name=\"person-circle-outline\"></ion-icon>-->\n    <!--      </ion-button>-->\n    <!--    </ion-buttons>-->\n    <ion-icon slot=\"start\" name=\"person-circle-outline\" />\n\n    <ion-label color=\"medium\">\n      @if ($user()?.record?.names; as names) {\n        {{ names | personNames }}\n      } @else {\n        @if ($authState()?.user; as user) {\n          {{ user.displayName || user.email || user.phoneNumber || user.uid }}\n        }\n      }\n    </ion-label>\n\n    <ion-buttons slot=\"end\">\n      <!--\t\t<ion-button color=\"medium\" title=\"Settings\">-->\n      <!--\t\t\t<ion-icon name=\"settings-outline\"></ion-icon>-->\n      <!--\t\t</ion-button>-->\n      <ion-button color=\"medium\" title=\"Sign-out\" (click)=\"logout($event)\">\n        <ion-icon name=\"log-out-outline\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-item>\n}\n@if ($err()) {\n  <ion-item> ERROR: {{ $err() | json }}</ion-item>\n}\n"]}

package/esm2022/lib/components/index.js

@@ -0,0 +1,4 @@
+export * from './user-required-fields';
+export * from './user-auth-providers/user-auth-accounts.component';
+export * from './auth-menu-item/auth-menu-item.component';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/auth/ui/src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,oDAAoD,CAAC;AACnE,cAAc,2CAA2C,CAAC","sourcesContent":["export * from './user-required-fields';\nexport * from './user-auth-providers/user-auth-accounts.component';\nexport * from './auth-menu-item/auth-menu-item.component';\n"]}

package/esm2022/lib/components/user-auth-providers/user-auth-accounts.component.js

@@ -0,0 +1,83 @@
+import { ChangeDetectionStrategy, Component, signal, inject, } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IonButton, IonButtons, IonCard, IonCardContent, IonIcon, IonItem, IonItemDivider, IonLabel, IonList, IonText, } from '@ionic/angular/standalone';
+import { SneatApiService } from '@sneat/api';
+import { SneatUserService } from '@sneat/auth-core';
+import { ClassName, SneatBaseComponent } from '@sneat/ui';
+import { LoginWithTelegramComponent } from '../../pages/login-page/login-with-telegram.component';
+import { UserAuthAProviderStatusComponent } from './user-auth-provider-status';
+import * as i0 from "@angular/core";
+export class UserAuthAccountsComponent extends SneatBaseComponent {
+    constructor() {
+        super();
+        this.sneatUserService = inject(SneatUserService);
+        this.sneatApiService = inject(SneatApiService);
+        this.$userRecord = signal(undefined, ...(ngDevMode ? [{ debugName: "$userRecord" }] : []));
+        this.signingInWith = signal(undefined, ...(ngDevMode ? [{ debugName: "signingInWith" }] : []));
+        this.sneatUserService.userState.pipe(this.takeUntilDestroyed()).subscribe({
+            next: (user) => {
+                this.$userRecord.set(user.record || undefined);
+            },
+        });
+    }
+    hasAccount(provider) {
+        provider = provider + ':';
+        for (const account of this.$userRecord()?.accounts || []) {
+            if (account.startsWith(provider)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    getAccountID(provider) {
+        const prefix = provider + '::';
+        const a = this.$userRecord()?.accounts?.find((a) => a.startsWith(prefix));
+        return a?.replace(prefix, '') || '';
+    }
+    disconnect(provider) {
+        if (!confirm('Are you sure you want to disconnect Telegram login from your account?')) {
+            return;
+        }
+        this.disconnecting = provider;
+        this.sneatApiService
+            .delete('auth/disconnect?provider=' + provider)
+            .subscribe({
+            next: () => {
+                this.disconnecting = undefined;
+                alert('Disconnected!');
+            },
+            error: this.errorLogger.logErrorHandler('Failed to disconnect'),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UserAuthAccountsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: UserAuthAccountsComponent, isStandalone: true, selector: "sneat-user-auth-accounts", providers: [
+            {
+                provide: ClassName,
+                useValue: 'UserAuthAccountsComponent',
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<ion-card>\n  <!--\t<ion-item color=\"light\" lines=\"full\">-->\n  <!--\t\t<ion-label color=\"medium\"-->\n  <!--\t\t\t><h2 style=\"font-weight: bold\">Authentication</h2></ion-label-->\n  <!--\t\t>-->\n  <!--\t</ion-item>-->\n  <!--\t<ion-accordion-group [value]=\"integrations\">-->\n  <!--\t\t<ion-accordion value=\"messaging-apps\">-->\n  <!--\t\t\t<ion-item slot=\"header\" color=\"light\">-->\n  <!--\t\t\t\t<ion-label>First Accordion</ion-label>-->\n  <!--\t\t\t</ion-item>-->\n  <!--\t\t\t<div class=\"ion-padding\" slot=\"content\">First Content</div>-->\n  <!--\t\t</ion-accordion>-->\n  <!--\t\t<ion-accordion value=\"quick-logins\">-->\n  <!--\t\t\t<ion-item slot=\"header\" color=\"light\">-->\n  <!--\t\t\t\t<ion-label>Second Accordion</ion-label>-->\n  <!--\t\t\t</ion-item>-->\n  <!--\t\t\t<div class=\"ion-padding\" slot=\"content\">Second Content</div>-->\n  <!--\t\t</ion-accordion>-->\n  <!--\t</ion-accordion-group>-->\n  <!--\t<ion-item>-->\n  <!--\t\t<ion-segment [(ngModel)]=\"integrations\" style=\"margin-bottom: 0.5em\">-->\n  <!--\t\t\t<ion-segment-button value=\"messaging-apps\"-->\n  <!--\t\t\t\t>Messaging Apps-->\n  <!--\t\t\t</ion-segment-button>-->\n  <!--\t\t\t<ion-segment-button value=\"quick-logins\">Quick logins</ion-segment-button>-->\n  <!--\t\t</ion-segment>-->\n  <!--\t</ion-item>-->\n  <ion-list>\n    <ion-item-divider color=\"light\">\n      <ion-label color=\"medium\" style=\"font-weight: bold\"\n        >Quick logins</ion-label\n      >\n    </ion-item-divider>\n    <sneat-user-auth-provider-status\n      providerID=\"google.com\"\n      [signingInWith]=\"signingInWith()\"\n      (signingInWithChange)=\"signingInWith.set($event)\"\n    />\n    <sneat-user-auth-provider-status\n      providerID=\"apple.com\"\n      [signingInWith]=\"signingInWith()\"\n      (signingInWithChange)=\"signingInWith.set($event)\"\n    />\n    <sneat-user-auth-provider-status\n      providerID=\"microsoft.com\"\n      [signingInWith]=\"signingInWith()\"\n      (signingInWithChange)=\"signingInWith.set($event)\"\n    />\n  </ion-list>\n  <ion-list>\n    <ion-item-divider color=\"light\">\n      <ion-label color=\"medium\" style=\"font-weight: bold\"\n        >Messaging apps</ion-label\n      >\n    </ion-item-divider>\n\n    <ion-item>\n      <ion-icon slot=\"start\" name=\"paper-plane\" color=\"primary\"></ion-icon>\n      @if (!$userRecord()) {\n        <ion-label>\n          <h3>Telegram</h3>\n          <p>Checking....</p>\n        </ion-label>\n      } @else if (hasAccount(\"telegram\")) {\n        <ion-label>\n          <h3 style=\"font-weight: bold\">Telegram</h3>\n          <ion-text color=\"success\" [title]=\"getAccountID('telegram')\"\n            >Connected!\n          </ion-text>\n        </ion-label>\n        <ion-buttons slot=\"end\">\n          <ion-button\n            [disabled]=\"disconnecting\"\n            color=\"warning\"\n            fill=\"solid\"\n            (click)=\"disconnect('telegram')\"\n          >\n            <ion-icon name=\"close-outline\" slot=\"start\"></ion-icon>\n            <ion-label>Disconnect</ion-label>\n          </ion-button>\n        </ion-buttons>\n      } @else {\n        <ion-label>\n          <h3>Telegram</h3>\n          <p>Not connected yet.</p>\n        </ion-label>\n        <ion-buttons slot=\"end\">\n          <sneat-login-with-telegram [isUserAuthenticated]=\"true\" />\n        </ion-buttons>\n      }\n    </ion-item>\n    <ion-item>\n      <ion-icon slot=\"start\" name=\"logo-whatsapp\"></ion-icon>\n      <ion-label color=\"medium\">\n        <h3 style=\"font-weight: bold\">WhatsApp</h3>\n        <p>Not implemented yet - coming soon!</p>\n      </ion-label>\n      <!--\t\t<ion-buttons slot=\"end\">-->\n      <!--\t\t\t<ion-button color=\"danger\">-->\n      <!--\t\t\t\t<ion-icon name=\"close-circle-outline\" slot=\"start\"></ion-icon>-->\n      <!--\t\t\t\t<ion-label>I have no WhatsApp</ion-label>-->\n      <!--\t\t\t</ion-button>-->\n      <!--\t\t</ion-buttons>-->\n    </ion-item>\n    <ion-item>\n      <ion-icon slot=\"start\" name=\"logo-whatsapp\"></ion-icon>\n      <!-- TODO: place Viber logo here -->\n      <ion-label color=\"medium\">\n        <h3 style=\"font-weight: bold\">Viber</h3>\n        <p>Not implemented yet - coming soon!</p>\n      </ion-label>\n    </ion-item>\n  </ion-list>\n  <ion-card-content>\n    <p>\n      You'll get much more out of Sneat.app if you integrate it with messaging\n      apps you use. Benefits:\n    </p>\n    <ul>\n      <li>Easily add contacts</li>\n      <li>Get reminders</li>\n      <li>Add todo/to_buy from your messenger</li>\n      <li>etc.</li>\n    </ul>\n  </ion-card-content>\n</ion-card>\n", dependencies: [{ kind: "component", type: LoginWithTelegramComponent, selector: "sneat-login-with-telegram", inputs: ["isUserAuthenticated", "botID", "size", "requestAccess", "userPic"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UserAuthAProviderStatusComponent, selector: "sneat-user-auth-provider-status", inputs: ["providerID", "signingInWith"], outputs: ["signingInWithChange"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { 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: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UserAuthAccountsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-user-auth-accounts', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        LoginWithTelegramComponent,
+                        FormsModule,
+                        UserAuthAProviderStatusComponent,
+                        IonCard,
+                        IonList,
+                        IonItemDivider,
+                        IonLabel,
+                        IonItem,
+                        IonIcon,
+                        IonText,
+                        IonButtons,
+                        IonButton,
+                        IonCardContent,
+                    ], providers: [
+                        {
+                            provide: ClassName,
+                            useValue: 'UserAuthAccountsComponent',
+                        },
+                    ], template: "<ion-card>\n  <!--\t<ion-item color=\"light\" lines=\"full\">-->\n  <!--\t\t<ion-label color=\"medium\"-->\n  <!--\t\t\t><h2 style=\"font-weight: bold\">Authentication</h2></ion-label-->\n  <!--\t\t>-->\n  <!--\t</ion-item>-->\n  <!--\t<ion-accordion-group [value]=\"integrations\">-->\n  <!--\t\t<ion-accordion value=\"messaging-apps\">-->\n  <!--\t\t\t<ion-item slot=\"header\" color=\"light\">-->\n  <!--\t\t\t\t<ion-label>First Accordion</ion-label>-->\n  <!--\t\t\t</ion-item>-->\n  <!--\t\t\t<div class=\"ion-padding\" slot=\"content\">First Content</div>-->\n  <!--\t\t</ion-accordion>-->\n  <!--\t\t<ion-accordion value=\"quick-logins\">-->\n  <!--\t\t\t<ion-item slot=\"header\" color=\"light\">-->\n  <!--\t\t\t\t<ion-label>Second Accordion</ion-label>-->\n  <!--\t\t\t</ion-item>-->\n  <!--\t\t\t<div class=\"ion-padding\" slot=\"content\">Second Content</div>-->\n  <!--\t\t</ion-accordion>-->\n  <!--\t</ion-accordion-group>-->\n  <!--\t<ion-item>-->\n  <!--\t\t<ion-segment [(ngModel)]=\"integrations\" style=\"margin-bottom: 0.5em\">-->\n  <!--\t\t\t<ion-segment-button value=\"messaging-apps\"-->\n  <!--\t\t\t\t>Messaging Apps-->\n  <!--\t\t\t</ion-segment-button>-->\n  <!--\t\t\t<ion-segment-button value=\"quick-logins\">Quick logins</ion-segment-button>-->\n  <!--\t\t</ion-segment>-->\n  <!--\t</ion-item>-->\n  <ion-list>\n    <ion-item-divider color=\"light\">\n      <ion-label color=\"medium\" style=\"font-weight: bold\"\n        >Quick logins</ion-label\n      >\n    </ion-item-divider>\n    <sneat-user-auth-provider-status\n      providerID=\"google.com\"\n      [signingInWith]=\"signingInWith()\"\n      (signingInWithChange)=\"signingInWith.set($event)\"\n    />\n    <sneat-user-auth-provider-status\n      providerID=\"apple.com\"\n      [signingInWith]=\"signingInWith()\"\n      (signingInWithChange)=\"signingInWith.set($event)\"\n    />\n    <sneat-user-auth-provider-status\n      providerID=\"microsoft.com\"\n      [signingInWith]=\"signingInWith()\"\n      (signingInWithChange)=\"signingInWith.set($event)\"\n    />\n  </ion-list>\n  <ion-list>\n    <ion-item-divider color=\"light\">\n      <ion-label color=\"medium\" style=\"font-weight: bold\"\n        >Messaging apps</ion-label\n      >\n    </ion-item-divider>\n\n    <ion-item>\n      <ion-icon slot=\"start\" name=\"paper-plane\" color=\"primary\"></ion-icon>\n      @if (!$userRecord()) {\n        <ion-label>\n          <h3>Telegram</h3>\n          <p>Checking....</p>\n        </ion-label>\n      } @else if (hasAccount(\"telegram\")) {\n        <ion-label>\n          <h3 style=\"font-weight: bold\">Telegram</h3>\n          <ion-text color=\"success\" [title]=\"getAccountID('telegram')\"\n            >Connected!\n          </ion-text>\n        </ion-label>\n        <ion-buttons slot=\"end\">\n          <ion-button\n            [disabled]=\"disconnecting\"\n            color=\"warning\"\n            fill=\"solid\"\n            (click)=\"disconnect('telegram')\"\n          >\n            <ion-icon name=\"close-outline\" slot=\"start\"></ion-icon>\n            <ion-label>Disconnect</ion-label>\n          </ion-button>\n        </ion-buttons>\n      } @else {\n        <ion-label>\n          <h3>Telegram</h3>\n          <p>Not connected yet.</p>\n        </ion-label>\n        <ion-buttons slot=\"end\">\n          <sneat-login-with-telegram [isUserAuthenticated]=\"true\" />\n        </ion-buttons>\n      }\n    </ion-item>\n    <ion-item>\n      <ion-icon slot=\"start\" name=\"logo-whatsapp\"></ion-icon>\n      <ion-label color=\"medium\">\n        <h3 style=\"font-weight: bold\">WhatsApp</h3>\n        <p>Not implemented yet - coming soon!</p>\n      </ion-label>\n      <!--\t\t<ion-buttons slot=\"end\">-->\n      <!--\t\t\t<ion-button color=\"danger\">-->\n      <!--\t\t\t\t<ion-icon name=\"close-circle-outline\" slot=\"start\"></ion-icon>-->\n      <!--\t\t\t\t<ion-label>I have no WhatsApp</ion-label>-->\n      <!--\t\t\t</ion-button>-->\n      <!--\t\t</ion-buttons>-->\n    </ion-item>\n    <ion-item>\n      <ion-icon slot=\"start\" name=\"logo-whatsapp\"></ion-icon>\n      <!-- TODO: place Viber logo here -->\n      <ion-label color=\"medium\">\n        <h3 style=\"font-weight: bold\">Viber</h3>\n        <p>Not implemented yet - coming soon!</p>\n      </ion-label>\n    </ion-item>\n  </ion-list>\n  <ion-card-content>\n    <p>\n      You'll get much more out of Sneat.app if you integrate it with messaging\n      apps you use. Benefits:\n    </p>\n    <ul>\n      <li>Easily add contacts</li>\n      <li>Get reminders</li>\n      <li>Add todo/to_buy from your messenger</li>\n      <li>etc.</li>\n    </ul>\n  </ion-card-content>\n</ion-card>\n" }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=user-auth-accounts.component.js.map

package/esm2022/lib/components/user-auth-providers/user-auth-accounts.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-auth-accounts.component.js","sourceRoot":"","sources":["../../../../../../../../libs/auth/ui/src/lib/components/user-auth-providers/user-auth-accounts.component.ts","../../../../../../../../libs/auth/ui/src/lib/components/user-auth-providers/user-auth-accounts.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,MAAM,EACN,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EACL,SAAS,EACT,UAAU,EACV,OAAO,EACP,cAAc,EACd,OAAO,EACP,OAAO,EACP,cAAc,EACd,QAAQ,EACR,OAAO,EACP,OAAO,GACR,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAkB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sDAAsD,CAAC;AAClG,OAAO,EAAE,gCAAgC,EAAE,MAAM,6BAA6B,CAAC;;AA4B/E,MAAM,OAAO,yBAA0B,SAAQ,kBAAkB;IAU/D;QACE,KAAK,EAAE,CAAC;QAVO,qBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;QAC5C,oBAAe,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;QAExC,gBAAW,GAAG,MAAM,CAA0B,SAAS,uDAAC,CAAC;QAEzD,kBAAa,GAAG,MAAM,CACvC,SAAS,yDACV,CAAC;QAIA,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,SAAS,CAAC;YACxE,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;gBACb,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,SAAS,CAAC,CAAC;YACjD,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAES,UAAU,CAAC,QAA2C;QAC9D,QAAQ,GAAG,QAAQ,GAAG,GAAG,CAAC;QAC1B,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE,QAAQ,IAAI,EAAE,EAAE,CAAC;YACzD,IAAI,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACjC,OAAO,IAAI,CAAC;YACd,CAAC;QACH,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAES,YAAY,CAAC,QAAoB;QACzC,MAAM,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;QAC/B,MAAM,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;QAC1E,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;IACtC,CAAC;IAIS,UAAU,CAAC,QAAoB;QACvC,IACE,CAAC,OAAO,CACN,uEAAuE,CACxE,EACD,CAAC;YACD,OAAO;QACT,CAAC;QACD,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;QAC9B,IAAI,CAAC,eAAe;aACjB,MAAM,CAAC,2BAA2B,GAAG,QAAQ,CAAC;aAC9C,SAAS,CAAC;YACT,IAAI,EAAE,GAAG,EAAE;gBACT,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;gBAC/B,KAAK,CAAC,eAAe,CAAC,CAAC;YACzB,CAAC;YACD,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,sBAAsB,CAAC;SAChE,CAAC,CAAC;IACP,CAAC;8GAvDU,yBAAyB;kGAAzB,yBAAyB,uEAPzB;YACT;gBACE,OAAO,EAAE,SAAS;gBAClB,QAAQ,EAAE,2BAA2B;aACtC;SACF,iDClDH,glJA+HA,4CDhGI,0BAA0B,mJAC1B,WAAW,+BACX,gCAAgC,uJAChC,OAAO,yLACP,OAAO,yFACP,cAAc,kGACd,QAAQ,6FACR,OAAO,0NACP,OAAO,2JACP,OAAO,gFACP,UAAU,8EACV,SAAS,oPACT,cAAc;;2FASL,yBAAyB;kBA1BrC,SAAS;+BACE,0BAA0B,mBAEnB,uBAAuB,CAAC,MAAM,WACtC;wBACP,0BAA0B;wBAC1B,WAAW;wBACX,gCAAgC;wBAChC,OAAO;wBACP,OAAO;wBACP,cAAc;wBACd,QAAQ;wBACR,OAAO;wBACP,OAAO;wBACP,OAAO;wBACP,UAAU;wBACV,SAAS;wBACT,cAAc;qBACf,aACU;wBACT;4BACE,OAAO,EAAE,SAAS;4BAClB,QAAQ,EAAE,2BAA2B;yBACtC;qBACF","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  signal,\n  inject,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport {\n  IonButton,\n  IonButtons,\n  IonCard,\n  IonCardContent,\n  IonIcon,\n  IonItem,\n  IonItemDivider,\n  IonLabel,\n  IonList,\n  IonText,\n} from '@ionic/angular/standalone';\nimport { SneatApiService } from '@sneat/api';\nimport { AuthProviderID, SneatUserService } from '@sneat/auth-core';\nimport { IUserRecord } from '@sneat/auth-models';\nimport { ClassName, SneatBaseComponent } from '@sneat/ui';\nimport { LoginWithTelegramComponent } from '../../pages/login-page/login-with-telegram.component';\nimport { UserAuthAProviderStatusComponent } from './user-auth-provider-status';\n\n@Component({\n  selector: 'sneat-user-auth-accounts',\n  templateUrl: './user-auth-accounts.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    LoginWithTelegramComponent,\n    FormsModule,\n    UserAuthAProviderStatusComponent,\n    IonCard,\n    IonList,\n    IonItemDivider,\n    IonLabel,\n    IonItem,\n    IonIcon,\n    IonText,\n    IonButtons,\n    IonButton,\n    IonCardContent,\n  ],\n  providers: [\n    {\n      provide: ClassName,\n      useValue: 'UserAuthAccountsComponent',\n    },\n  ],\n})\nexport class UserAuthAccountsComponent extends SneatBaseComponent {\n  private readonly sneatUserService = inject(SneatUserService);\n  private readonly sneatApiService = inject(SneatApiService);\n\n  protected readonly $userRecord = signal<IUserRecord | undefined>(undefined);\n\n  protected readonly signingInWith = signal<AuthProviderID | undefined>(\n    undefined,\n  );\n\n  constructor() {\n    super();\n    this.sneatUserService.userState.pipe(this.takeUntilDestroyed()).subscribe({\n      next: (user) => {\n        this.$userRecord.set(user.record || undefined);\n      },\n    });\n  }\n\n  protected hasAccount(provider: 'telegram' | 'viber' | 'whatsapp'): boolean {\n    provider = provider + ':';\n    for (const account of this.$userRecord()?.accounts || []) {\n      if (account.startsWith(provider)) {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  protected getAccountID(provider: 'telegram'): string {\n    const prefix = provider + '::';\n    const a = this.$userRecord()?.accounts?.find((a) => a.startsWith(prefix));\n    return a?.replace(prefix, '') || '';\n  }\n\n  protected disconnecting?: 'telegram' | 'viber' | 'whatsapp';\n\n  protected disconnect(provider: 'telegram'): void {\n    if (\n      !confirm(\n        'Are you sure you want to disconnect Telegram login from your account?',\n      )\n    ) {\n      return;\n    }\n    this.disconnecting = provider;\n    this.sneatApiService\n      .delete('auth/disconnect?provider=' + provider)\n      .subscribe({\n        next: () => {\n          this.disconnecting = undefined;\n          alert('Disconnected!');\n        },\n        error: this.errorLogger.logErrorHandler('Failed to disconnect'),\n      });\n  }\n}\n","<ion-card>\n  <!--\t<ion-item color=\"light\" lines=\"full\">-->\n  <!--\t\t<ion-label color=\"medium\"-->\n  <!--\t\t\t><h2 style=\"font-weight: bold\">Authentication</h2></ion-label-->\n  <!--\t\t>-->\n  <!--\t</ion-item>-->\n  <!--\t<ion-accordion-group [value]=\"integrations\">-->\n  <!--\t\t<ion-accordion value=\"messaging-apps\">-->\n  <!--\t\t\t<ion-item slot=\"header\" color=\"light\">-->\n  <!--\t\t\t\t<ion-label>First Accordion</ion-label>-->\n  <!--\t\t\t</ion-item>-->\n  <!--\t\t\t<div class=\"ion-padding\" slot=\"content\">First Content</div>-->\n  <!--\t\t</ion-accordion>-->\n  <!--\t\t<ion-accordion value=\"quick-logins\">-->\n  <!--\t\t\t<ion-item slot=\"header\" color=\"light\">-->\n  <!--\t\t\t\t<ion-label>Second Accordion</ion-label>-->\n  <!--\t\t\t</ion-item>-->\n  <!--\t\t\t<div class=\"ion-padding\" slot=\"content\">Second Content</div>-->\n  <!--\t\t</ion-accordion>-->\n  <!--\t</ion-accordion-group>-->\n  <!--\t<ion-item>-->\n  <!--\t\t<ion-segment [(ngModel)]=\"integrations\" style=\"margin-bottom: 0.5em\">-->\n  <!--\t\t\t<ion-segment-button value=\"messaging-apps\"-->\n  <!--\t\t\t\t>Messaging Apps-->\n  <!--\t\t\t</ion-segment-button>-->\n  <!--\t\t\t<ion-segment-button value=\"quick-logins\">Quick logins</ion-segment-button>-->\n  <!--\t\t</ion-segment>-->\n  <!--\t</ion-item>-->\n  <ion-list>\n    <ion-item-divider color=\"light\">\n      <ion-label color=\"medium\" style=\"font-weight: bold\"\n        >Quick logins</ion-label\n      >\n    </ion-item-divider>\n    <sneat-user-auth-provider-status\n      providerID=\"google.com\"\n      [signingInWith]=\"signingInWith()\"\n      (signingInWithChange)=\"signingInWith.set($event)\"\n    />\n    <sneat-user-auth-provider-status\n      providerID=\"apple.com\"\n      [signingInWith]=\"signingInWith()\"\n      (signingInWithChange)=\"signingInWith.set($event)\"\n    />\n    <sneat-user-auth-provider-status\n      providerID=\"microsoft.com\"\n      [signingInWith]=\"signingInWith()\"\n      (signingInWithChange)=\"signingInWith.set($event)\"\n    />\n  </ion-list>\n  <ion-list>\n    <ion-item-divider color=\"light\">\n      <ion-label color=\"medium\" style=\"font-weight: bold\"\n        >Messaging apps</ion-label\n      >\n    </ion-item-divider>\n\n    <ion-item>\n      <ion-icon slot=\"start\" name=\"paper-plane\" color=\"primary\"></ion-icon>\n      @if (!$userRecord()) {\n        <ion-label>\n          <h3>Telegram</h3>\n          <p>Checking....</p>\n        </ion-label>\n      } @else if (hasAccount(\"telegram\")) {\n        <ion-label>\n          <h3 style=\"font-weight: bold\">Telegram</h3>\n          <ion-text color=\"success\" [title]=\"getAccountID('telegram')\"\n            >Connected!\n          </ion-text>\n        </ion-label>\n        <ion-buttons slot=\"end\">\n          <ion-button\n            [disabled]=\"disconnecting\"\n            color=\"warning\"\n            fill=\"solid\"\n            (click)=\"disconnect('telegram')\"\n          >\n            <ion-icon name=\"close-outline\" slot=\"start\"></ion-icon>\n            <ion-label>Disconnect</ion-label>\n          </ion-button>\n        </ion-buttons>\n      } @else {\n        <ion-label>\n          <h3>Telegram</h3>\n          <p>Not connected yet.</p>\n        </ion-label>\n        <ion-buttons slot=\"end\">\n          <sneat-login-with-telegram [isUserAuthenticated]=\"true\" />\n        </ion-buttons>\n      }\n    </ion-item>\n    <ion-item>\n      <ion-icon slot=\"start\" name=\"logo-whatsapp\"></ion-icon>\n      <ion-label color=\"medium\">\n        <h3 style=\"font-weight: bold\">WhatsApp</h3>\n        <p>Not implemented yet - coming soon!</p>\n      </ion-label>\n      <!--\t\t<ion-buttons slot=\"end\">-->\n      <!--\t\t\t<ion-button color=\"danger\">-->\n      <!--\t\t\t\t<ion-icon name=\"close-circle-outline\" slot=\"start\"></ion-icon>-->\n      <!--\t\t\t\t<ion-label>I have no WhatsApp</ion-label>-->\n      <!--\t\t\t</ion-button>-->\n      <!--\t\t</ion-buttons>-->\n    </ion-item>\n    <ion-item>\n      <ion-icon slot=\"start\" name=\"logo-whatsapp\"></ion-icon>\n      <!-- TODO: place Viber logo here -->\n      <ion-label color=\"medium\">\n        <h3 style=\"font-weight: bold\">Viber</h3>\n        <p>Not implemented yet - coming soon!</p>\n      </ion-label>\n    </ion-item>\n  </ion-list>\n  <ion-card-content>\n    <p>\n      You'll get much more out of Sneat.app if you integrate it with messaging\n      apps you use. Benefits:\n    </p>\n    <ul>\n      <li>Easily add contacts</li>\n      <li>Get reminders</li>\n      <li>Add todo/to_buy from your messenger</li>\n      <li>etc.</li>\n    </ul>\n  </ion-card-content>\n</ion-card>\n"]}

package/esm2022/lib/components/user-auth-providers/user-auth-provider-status.js

@@ -0,0 +1,118 @@
+import { Component, EventEmitter, input, Output, signal, computed, inject, } from '@angular/core';
+import { IonButton, IonButtons, IonIcon, IonItem, IonLabel, IonSpinner, } from '@ionic/angular/standalone';
+import { SneatAuthStateService, } from '@sneat/auth-core';
+import { ErrorLogger } from '@sneat/core';
+import { Subject, takeUntil } from 'rxjs';
+import * as i0 from "@angular/core";
+export class UserAuthAProviderStatusComponent {
+    constructor() {
+        this.errorLogger = inject(ErrorLogger);
+        this.authStateService = inject(SneatAuthStateService);
+        this.$destroyed = new Subject();
+        this.providerID = input.required(...(ngDevMode ? [{ debugName: "providerID" }] : []));
+        this.provider = computed(() => {
+            const id = this.providerID();
+            switch (id) {
+                case 'facebook.com':
+                    return {
+                        id: id,
+                        title: 'Facebook',
+                        icon: 'logo-facebook',
+                        color: 'primary',
+                    };
+                case 'google.com':
+                    return {
+                        id,
+                        title: 'Google',
+                        icon: 'logo-google',
+                        color: 'danger',
+                    };
+                case 'apple.com':
+                    return {
+                        id,
+                        title: 'Apple',
+                        icon: 'logo-apple',
+                        color: 'dark',
+                    };
+                case 'microsoft.com':
+                    return {
+                        id,
+                        title: 'Microsoft',
+                        icon: 'logo-windows',
+                        color: 'secondary',
+                    };
+                case undefined:
+                    throw new Error('Undefined provider ID');
+                default:
+                    return {
+                        id,
+                        title: id,
+                        icon: 'help-circle',
+                        color: 'medium',
+                    };
+            }
+        }, ...(ngDevMode ? [{ debugName: "provider" }] : []));
+        this.signingInWith = input.required(...(ngDevMode ? [{ debugName: "signingInWith" }] : []));
+        this.signingInWithChange = new EventEmitter();
+        this.currentUser = signal(undefined, ...(ngDevMode ? [{ debugName: "currentUser" }] : []));
+        this.isSigningIn = computed(() => this.signingInWith() === this.providerID(), ...(ngDevMode ? [{ debugName: "isSigningIn" }] : []));
+        this.isDisabled = computed(() => {
+            const signingInWith = this.signingInWith();
+            return !!signingInWith;
+        }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+        this.authProviderUserInfo = computed(() => {
+            const providerID = this.providerID();
+            return this.currentUser()?.providerData?.find((pd) => pd.providerId == providerID);
+        }, ...(ngDevMode ? [{ debugName: "authProviderUserInfo" }] : []));
+        this.isConnected = computed(() => !!this.authProviderUserInfo(), ...(ngDevMode ? [{ debugName: "isConnected" }] : []));
+        this.authStateService.authUser
+            .pipe(takeUntil(this.$destroyed))
+            .subscribe((authUser) => {
+            this.currentUser.set(authUser);
+        });
+    }
+    connect() {
+        const providerID = this.providerID();
+        if (!providerID) {
+            throw new Error('auth providerID is not set');
+        }
+        this.signingInWithChange.emit(providerID);
+        this.authStateService
+            .linkWith(providerID)
+            .then(() => {
+            this.signingInWithChange.emit(undefined);
+        })
+            .catch((e) => {
+            console.error('Failed to connect', e);
+            this.signingInWithChange.emit(undefined);
+        });
+    }
+    disconnect() {
+        const providerID = this.providerID();
+        if (!providerID) {
+            this.errorLogger.logError('auth providerID is not set');
+            return;
+        }
+        this.authStateService
+            .unlinkAuthProvider(providerID)
+            .then(() => this.signingInWithChange.emit(undefined))
+            .catch((err) => {
+            this.signingInWithChange.emit(undefined);
+            this.errorLogger.logError(err);
+        });
+        this.signingInWithChange.emit(providerID);
+    }
+    ngOnDestroy() {
+        this.$destroyed.next();
+        this.$destroyed.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UserAuthAProviderStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: UserAuthAProviderStatusComponent, isStandalone: true, selector: "sneat-user-auth-provider-status", inputs: { providerID: { classPropertyName: "providerID", publicName: "providerID", isSignal: true, isRequired: true, transformFunction: null }, signingInWith: { classPropertyName: "signingInWith", publicName: "signingInWith", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { signingInWithChange: "signingInWithChange" }, ngImport: i0, template: "<ion-item>\n  <ion-icon [color]=\"provider().color\" [name]=\"provider().icon\" slot=\"start\" />\n  <ion-label>\n    <h3>{{ provider().title || providerID() }}</h3>\n    <p>\n      @if(isConnected()) { Connected as\n      <b>{{authProviderUserInfo()?.displayName}}</b>\n      &nbsp;&dash;&nbsp;\n      <a href=\"mailto:{{authProviderUserInfo()?.email}}\"\n        >{{authProviderUserInfo()?.email}}</a\n      >. } @else { Not connected yet. }\n    </p>\n  </ion-label>\n  <ion-buttons slot=\"end\">\n    @if (isConnected()) {\n    <ion-button color=\"medium\" fill=\"outline\" (click)=\"disconnect()\">\n      <ion-icon name=\"close-circle-outline\" slot=\"start\"></ion-icon>\n      <ion-label>\n        @if (isSigningIn()) { Disconnecting... } @else { Disconnect }\n      </ion-label>\n    </ion-button>\n    } @else {\n    <ion-button\n      [disabled]=\"isDisabled()\"\n      [color]=\"provider().color\"\n      [fill]=\"'solid'\"\n      (click)=\"connect()\"\n    >\n      @if (isSigningIn()) {\n      <ion-spinner slot=\"start\" name=\"lines-small\" />\n      } @else {\n      <ion-icon slot=\"start\" [name]=\"provider().icon\" />\n      }\n\n      <ion-label>\n        @if (signingInWith() === providerID()) { Signing in... } @else { Connect\n        }\n      </ion-label>\n    </ion-button>\n    }\n  </ion-buttons>\n</ion-item>\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: 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: 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UserAuthAProviderStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-user-auth-provider-status', imports: [IonItem, IonIcon, IonLabel, IonButtons, IonButton, IonSpinner], template: "<ion-item>\n  <ion-icon [color]=\"provider().color\" [name]=\"provider().icon\" slot=\"start\" />\n  <ion-label>\n    <h3>{{ provider().title || providerID() }}</h3>\n    <p>\n      @if(isConnected()) { Connected as\n      <b>{{authProviderUserInfo()?.displayName}}</b>\n      &nbsp;&dash;&nbsp;\n      <a href=\"mailto:{{authProviderUserInfo()?.email}}\"\n        >{{authProviderUserInfo()?.email}}</a\n      >. } @else { Not connected yet. }\n    </p>\n  </ion-label>\n  <ion-buttons slot=\"end\">\n    @if (isConnected()) {\n    <ion-button color=\"medium\" fill=\"outline\" (click)=\"disconnect()\">\n      <ion-icon name=\"close-circle-outline\" slot=\"start\"></ion-icon>\n      <ion-label>\n        @if (isSigningIn()) { Disconnecting... } @else { Disconnect }\n      </ion-label>\n    </ion-button>\n    } @else {\n    <ion-button\n      [disabled]=\"isDisabled()\"\n      [color]=\"provider().color\"\n      [fill]=\"'solid'\"\n      (click)=\"connect()\"\n    >\n      @if (isSigningIn()) {\n      <ion-spinner slot=\"start\" name=\"lines-small\" />\n      } @else {\n      <ion-icon slot=\"start\" [name]=\"provider().icon\" />\n      }\n\n      <ion-label>\n        @if (signingInWith() === providerID()) { Signing in... } @else { Connect\n        }\n      </ion-label>\n    </ion-button>\n    }\n  </ion-buttons>\n</ion-item>\n" }]
+        }], ctorParameters: () => [], propDecorators: { providerID: [{ type: i0.Input, args: [{ isSignal: true, alias: "providerID", required: true }] }], signingInWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "signingInWith", required: true }] }], signingInWithChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=user-auth-provider-status.js.map

package/esm2022/lib/components/user-auth-providers/user-auth-provider-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-auth-provider-status.js","sourceRoot":"","sources":["../../../../../../../../libs/auth/ui/src/lib/components/user-auth-providers/user-auth-provider-status.ts","../../../../../../../../libs/auth/ui/src/lib/components/user-auth-providers/user-auth-provider-status.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  EventEmitter,\n  input,\n  Output,\n  signal,\n  computed,\n  OnDestroy,\n  inject,\n} from '@angular/core';\nimport {\n  IonButton,\n  IonButtons,\n  IonIcon,\n  IonItem,\n  IonLabel,\n  IonSpinner,\n} from '@ionic/angular/standalone';\nimport {\n  AuthProviderID,\n  ISneatAuthUser,\n  SneatAuthStateService,\n} from '@sneat/auth-core';\nimport { ErrorLogger, IErrorLogger } from '@sneat/core';\nimport { Subject, takeUntil } from 'rxjs';\n\ntype IonicColor =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'light'\n  | 'medium'\n  | 'dark';\n\ninterface provider {\n  readonly id: AuthProviderID;\n  readonly title: string;\n  readonly icon: string;\n  readonly color: IonicColor;\n}\n\n@Component({\n  selector: 'sneat-user-auth-provider-status',\n  templateUrl: './user-auth-provider-status.html',\n  imports: [IonItem, IonIcon, IonLabel, IonButtons, IonButton, IonSpinner],\n})\nexport class UserAuthAProviderStatusComponent implements OnDestroy {\n  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);\n  private readonly authStateService = inject(SneatAuthStateService);\n\n  private readonly $destroyed = new Subject<void>();\n  public providerID = input.required<AuthProviderID>();\n  protected readonly provider = computed<provider>(() => {\n    const id = this.providerID();\n    switch (id) {\n      case 'facebook.com':\n        return {\n          id: id,\n          title: 'Facebook',\n          icon: 'logo-facebook',\n          color: 'primary',\n        };\n      case 'google.com':\n        return {\n          id,\n          title: 'Google',\n          icon: 'logo-google',\n          color: 'danger',\n        };\n      case 'apple.com':\n        return {\n          id,\n          title: 'Apple',\n          icon: 'logo-apple',\n          color: 'dark',\n        };\n      case 'microsoft.com':\n        return {\n          id,\n          title: 'Microsoft',\n          icon: 'logo-windows',\n          color: 'secondary',\n        };\n      case undefined:\n        throw new Error('Undefined provider ID');\n      default:\n        return {\n          id,\n          title: id,\n          icon: 'help-circle',\n          color: 'medium',\n        };\n    }\n  });\n\n  readonly signingInWith = input.required<AuthProviderID | undefined>();\n\n  @Output() readonly signingInWithChange = new EventEmitter<\n    AuthProviderID | undefined\n  >();\n\n  protected readonly currentUser = signal<ISneatAuthUser | null | undefined>(\n    undefined,\n  );\n\n  constructor() {\n    this.authStateService.authUser\n      .pipe(takeUntil(this.$destroyed))\n      .subscribe((authUser) => {\n        this.currentUser.set(authUser);\n      });\n  }\n\n  protected readonly isSigningIn = computed(\n    () => this.signingInWith() === this.providerID(),\n  );\n\n  protected readonly isDisabled = computed(() => {\n    const signingInWith = this.signingInWith();\n    return !!signingInWith;\n  });\n\n  readonly authProviderUserInfo = computed(() => {\n    const providerID = this.providerID();\n    return this.currentUser()?.providerData?.find(\n      (pd) => pd.providerId == providerID,\n    );\n  });\n\n  readonly isConnected = computed(() => !!this.authProviderUserInfo());\n\n  protected connect(): void {\n    const providerID = this.providerID();\n    if (!providerID) {\n      throw new Error('auth providerID is not set');\n    }\n    this.signingInWithChange.emit(providerID);\n    this.authStateService\n      .linkWith(providerID)\n      .then(() => {\n        this.signingInWithChange.emit(undefined);\n      })\n      .catch((e) => {\n        console.error('Failed to connect', e);\n        this.signingInWithChange.emit(undefined);\n      });\n  }\n\n  protected disconnect(): void {\n    const providerID = this.providerID();\n    if (!providerID) {\n      this.errorLogger.logError('auth providerID is not set');\n      return;\n    }\n    this.authStateService\n      .unlinkAuthProvider(providerID)\n      .then(() => this.signingInWithChange.emit(undefined))\n      .catch((err) => {\n        this.signingInWithChange.emit(undefined);\n        this.errorLogger.logError(err);\n      });\n    this.signingInWithChange.emit(providerID);\n  }\n\n  public ngOnDestroy(): void {\n    this.$destroyed.next();\n    this.$destroyed.complete();\n  }\n}\n","<ion-item>\n  <ion-icon [color]=\"provider().color\" [name]=\"provider().icon\" slot=\"start\" />\n  <ion-label>\n    <h3>{{ provider().title || providerID() }}</h3>\n    <p>\n      @if(isConnected()) { Connected as\n      <b>{{authProviderUserInfo()?.displayName}}</b>\n      &nbsp;&dash;&nbsp;\n      <a href=\"mailto:{{authProviderUserInfo()?.email}}\"\n        >{{authProviderUserInfo()?.email}}</a\n      >. } @else { Not connected yet. }\n    </p>\n  </ion-label>\n  <ion-buttons slot=\"end\">\n    @if (isConnected()) {\n    <ion-button color=\"medium\" fill=\"outline\" (click)=\"disconnect()\">\n      <ion-icon name=\"close-circle-outline\" slot=\"start\"></ion-icon>\n      <ion-label>\n        @if (isSigningIn()) { Disconnecting... } @else { Disconnect }\n      </ion-label>\n    </ion-button>\n    } @else {\n    <ion-button\n      [disabled]=\"isDisabled()\"\n      [color]=\"provider().color\"\n      [fill]=\"'solid'\"\n      (click)=\"connect()\"\n    >\n      @if (isSigningIn()) {\n      <ion-spinner slot=\"start\" name=\"lines-small\" />\n      } @else {\n      <ion-icon slot=\"start\" [name]=\"provider().icon\" />\n      }\n\n      <ion-label>\n        @if (signingInWith() === providerID()) { Signing in... } @else { Connect\n        }\n      </ion-label>\n    </ion-button>\n    }\n  </ion-buttons>\n</ion-item>\n"]}

package/esm2022/lib/components/user-required-fields/index.js

@@ -0,0 +1,3 @@
+export * from './user-required-fields-modal.component';
+export * from './user-required-fields.service';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/user-required-fields/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../libs/auth/ui/src/lib/components/user-required-fields/index.ts"],"names":[],"mappings":"AAAA,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './user-required-fields-modal.component';\nexport * from './user-required-fields.service';\n"]}

package/esm2022/lib/components/user-required-fields/user-required-fields-modal.component.js

@@ -0,0 +1,111 @@
+import { Component, Input, inject } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators, } from '@angular/forms';
+import { IonButton, IonButtons, IonContent, IonFooter, IonHeader, IonIcon, IonInput, IonItem, IonItemDivider, IonLabel, IonTitle, IonToolbar, ModalController, } from '@ionic/angular/standalone';
+import { SneatUserService, UserRecordService, } from '@sneat/auth-core';
+import { ClassName, SelectFromListComponent } from '@sneat/ui';
+import { SneatBaseComponent } from '@sneat/ui';
+import { takeUntil } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class UserRequiredFieldsModalComponent extends SneatBaseComponent {
+    constructor() {
+        super();
+        this.modalController = inject(ModalController);
+        this.userRecordService = inject(UserRecordService);
+        this.sneatUserService = inject(SneatUserService);
+        this.space = { id: '' };
+        this.genders = [
+            { id: 'male', emoji: '♂️', title: 'Male' },
+            { id: 'female', emoji: '♀️', title: 'Female' },
+            { id: 'other', emoji: '⚥', title: 'Other' },
+            { id: 'undisclosed', iconName: 'body', title: 'Undisclosed' },
+        ];
+        this.ageGroups = [
+            { id: 'adult', emoji: '🧓', title: 'Adult' },
+            { id: 'child', emoji: '🧒', title: 'Child' },
+        ];
+        this.firstName = new FormControl('', Validators.required);
+        this.lastName = new FormControl('', Validators.required);
+        this.gender = new FormControl('', Validators.required);
+        this.ageGroup = new FormControl('', Validators.required);
+        this.form = new FormGroup({
+            firstName: this.firstName,
+            lastName: this.lastName,
+            gender: this.gender,
+            ageGroup: this.ageGroup,
+        });
+        this.submitting = false;
+        this.sneatUserService.userState.pipe(takeUntil(this.destroyed$)).subscribe({
+            next: (userState) => (this.userState = userState),
+        });
+    }
+    save() {
+        this.submitting = true;
+        if (!this.form.valid) {
+            setTimeout(() => {
+                alert('Please fill in all fields.');
+                this.submitting = false;
+            });
+            return;
+        }
+        const gender = this.gender.value;
+        const ageGroup = this.ageGroup.value;
+        const request = {
+            names: {
+                firstName: this.firstName.value || undefined,
+                lastName: this.lastName.value || undefined,
+            },
+            gender,
+            ageGroup,
+        };
+        this.userRecordService.initUserRecord(request).subscribe({
+            next: () => this.modalController.dismiss(true).catch(console.error),
+            error: (err) => {
+                this.errorLogger.logError('Failed to init user record:', err);
+                alert('Failed to init user record');
+                this.submitting = false;
+            },
+        });
+    }
+    close() {
+        this.modalController
+            .dismiss(false)
+            .catch(this.errorLogger.logErrorHandler('Failed to close modal'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UserRequiredFieldsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: UserRequiredFieldsModalComponent, isStandalone: true, selector: "sneat-user-required-fields-form", inputs: { space: "space" }, providers: [
+            {
+                provide: ClassName,
+                useValue: 'UserRequiredFieldsModalComponent',
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-title>About me</ion-title>\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close()\">\n        <ion-icon name=\"close-outline\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <form (ngSubmit)=\"save()\" [formGroup]=\"form\">\n    <ion-item>\n      <ion-input\n        label=\"First name\"\n        name=\"first_name\"\n        type=\"text\"\n        required\n        max=\"20\"\n        [formControl]=\"firstName\"\n      />\n    </ion-item>\n    <ion-item>\n      <ion-input\n        label=\"Last name\"\n        name=\"last_name\"\n        type=\"text\"\n        required\n        max=\"20\"\n        [formControl]=\"lastName\"\n      />\n    </ion-item>\n    @if (!gender.value) {\n      <ion-item-divider>\n        <ion-label>Gender</ion-label>\n      </ion-item-divider>\n    }\n    <sneat-select-from-list\n      label=\"Gender\"\n      [items]=\"genders\"\n      [formControl]=\"gender\"\n    />\n\n    @if (gender.value || ageGroup.value) {\n      @if (!ageGroup.value) {\n        <ion-item-divider>\n          <ion-label>Age group</ion-label>\n        </ion-item-divider>\n      }\n      <sneat-select-from-list\n        label=\"Age group\"\n        [items]=\"ageGroups\"\n        [formControl]=\"ageGroup\"\n      />\n    }\n  </form>\n</ion-content>\n<ion-footer>\n  <ion-toolbar>\n    <ion-buttons slot=\"end\">\n      <ion-button [disabled]=\"submitting\" (click)=\"save()\">Save</ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-footer>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { 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: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { 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: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UserRequiredFieldsModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sneat-user-required-fields-form', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SelectFromListComponent,
+                        IonHeader,
+                        IonToolbar,
+                        IonTitle,
+                        IonButtons,
+                        IonButton,
+                        IonIcon,
+                        IonContent,
+                        IonItem,
+                        IonInput,
+                        IonItemDivider,
+                        IonLabel,
+                        IonFooter,
+                    ], providers: [
+                        {
+                            provide: ClassName,
+                            useValue: 'UserRequiredFieldsModalComponent',
+                        },
+                    ], template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-title>About me</ion-title>\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close()\">\n        <ion-icon name=\"close-outline\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <form (ngSubmit)=\"save()\" [formGroup]=\"form\">\n    <ion-item>\n      <ion-input\n        label=\"First name\"\n        name=\"first_name\"\n        type=\"text\"\n        required\n        max=\"20\"\n        [formControl]=\"firstName\"\n      />\n    </ion-item>\n    <ion-item>\n      <ion-input\n        label=\"Last name\"\n        name=\"last_name\"\n        type=\"text\"\n        required\n        max=\"20\"\n        [formControl]=\"lastName\"\n      />\n    </ion-item>\n    @if (!gender.value) {\n      <ion-item-divider>\n        <ion-label>Gender</ion-label>\n      </ion-item-divider>\n    }\n    <sneat-select-from-list\n      label=\"Gender\"\n      [items]=\"genders\"\n      [formControl]=\"gender\"\n    />\n\n    @if (gender.value || ageGroup.value) {\n      @if (!ageGroup.value) {\n        <ion-item-divider>\n          <ion-label>Age group</ion-label>\n        </ion-item-divider>\n      }\n      <sneat-select-from-list\n        label=\"Age group\"\n        [items]=\"ageGroups\"\n        [formControl]=\"ageGroup\"\n      />\n    }\n  </form>\n</ion-content>\n<ion-footer>\n  <ion-toolbar>\n    <ion-buttons slot=\"end\">\n      <ion-button [disabled]=\"submitting\" (click)=\"save()\">Save</ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-footer>\n" }]
+        }], ctorParameters: () => [], propDecorators: { space: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+//# sourceMappingURL=user-required-fields-modal.component.js.map

package/esm2022/lib/components/user-required-fields/user-required-fields-modal.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-required-fields-modal.component.js","sourceRoot":"","sources":["../../../../../../../../libs/auth/ui/src/lib/components/user-required-fields/user-required-fields-modal.component.ts","../../../../../../../../libs/auth/ui/src/lib/components/user-required-fields/user-required-fields-modal.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, inject } from '@angular/core';\nimport {\n  FormControl,\n  FormGroup,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\nimport {\n  IonButton,\n  IonButtons,\n  IonContent,\n  IonFooter,\n  IonHeader,\n  IonIcon,\n  IonInput,\n  IonItem,\n  IonItemDivider,\n  IonLabel,\n  IonTitle,\n  IonToolbar,\n  ModalController,\n} from '@ionic/angular/standalone';\nimport {\n  IInitUserRecordRequest,\n  ISneatUserState,\n  SneatUserService,\n  UserRecordService,\n} from '@sneat/auth-core';\nimport { AgeGroupID, Gender } from '@sneat/core';\nimport { ClassName, ISelectItem, SelectFromListComponent } from '@sneat/ui';\nimport { ISpaceContext } from '@sneat/space-models';\nimport { SneatBaseComponent } from '@sneat/ui';\nimport { takeUntil } from 'rxjs';\n\n@Component({\n  selector: 'sneat-user-required-fields-form',\n  templateUrl: './user-required-fields-modal.component.html',\n  imports: [\n    FormsModule,\n    ReactiveFormsModule,\n    SelectFromListComponent,\n    IonHeader,\n    IonToolbar,\n    IonTitle,\n    IonButtons,\n    IonButton,\n    IonIcon,\n    IonContent,\n    IonItem,\n    IonInput,\n    IonItemDivider,\n    IonLabel,\n    IonFooter,\n  ],\n  providers: [\n    {\n      provide: ClassName,\n      useValue: 'UserRequiredFieldsModalComponent',\n    },\n  ],\n})\nexport class UserRequiredFieldsModalComponent extends SneatBaseComponent {\n  private readonly modalController = inject(ModalController);\n  private readonly userRecordService = inject(UserRecordService);\n  private readonly sneatUserService = inject(SneatUserService);\n\n  @Input({ required: true }) space: ISpaceContext = { id: '' };\n\n  protected readonly genders: ISelectItem[] = [\n    { id: 'male', emoji: '♂️', title: 'Male' },\n    { id: 'female', emoji: '♀️', title: 'Female' },\n    { id: 'other', emoji: '⚥', title: 'Other' },\n    { id: 'undisclosed', iconName: 'body', title: 'Undisclosed' },\n  ];\n\n  protected readonly ageGroups: ISelectItem[] = [\n    { id: 'adult', emoji: '🧓', title: 'Adult' },\n    { id: 'child', emoji: '🧒', title: 'Child' },\n  ];\n\n  protected readonly firstName = new FormControl('', Validators.required);\n  protected readonly lastName = new FormControl('', Validators.required);\n  protected readonly gender = new FormControl('', Validators.required);\n  protected readonly ageGroup = new FormControl('', Validators.required);\n\n  protected readonly form = new FormGroup({\n    firstName: this.firstName,\n    lastName: this.lastName,\n    gender: this.gender,\n    ageGroup: this.ageGroup,\n  });\n\n  protected submitting = false;\n\n  protected userState?: ISneatUserState;\n\n  constructor() {\n    super();\n    this.sneatUserService.userState.pipe(takeUntil(this.destroyed$)).subscribe({\n      next: (userState) => (this.userState = userState),\n    });\n  }\n\n  protected save(): void {\n    this.submitting = true;\n    if (!this.form.valid) {\n      setTimeout(() => {\n        alert('Please fill in all fields.');\n        this.submitting = false;\n      });\n      return;\n    }\n\n    const gender = this.gender.value as Gender;\n    const ageGroup = this.ageGroup.value as AgeGroupID;\n\n    const request: IInitUserRecordRequest = {\n      names: {\n        firstName: this.firstName.value || undefined,\n        lastName: this.lastName.value || undefined,\n      },\n      gender,\n      ageGroup,\n    };\n    this.userRecordService.initUserRecord(request).subscribe({\n      next: () => this.modalController.dismiss(true).catch(console.error),\n      error: (err) => {\n        this.errorLogger.logError('Failed to init user record:', err);\n        alert('Failed to init user record');\n        this.submitting = false;\n      },\n    });\n  }\n\n  protected close(): void {\n    this.modalController\n      .dismiss(false)\n      .catch(this.errorLogger.logErrorHandler('Failed to close modal'));\n  }\n}\n","<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-title>About me</ion-title>\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close()\">\n        <ion-icon name=\"close-outline\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <form (ngSubmit)=\"save()\" [formGroup]=\"form\">\n    <ion-item>\n      <ion-input\n        label=\"First name\"\n        name=\"first_name\"\n        type=\"text\"\n        required\n        max=\"20\"\n        [formControl]=\"firstName\"\n      />\n    </ion-item>\n    <ion-item>\n      <ion-input\n        label=\"Last name\"\n        name=\"last_name\"\n        type=\"text\"\n        required\n        max=\"20\"\n        [formControl]=\"lastName\"\n      />\n    </ion-item>\n    @if (!gender.value) {\n      <ion-item-divider>\n        <ion-label>Gender</ion-label>\n      </ion-item-divider>\n    }\n    <sneat-select-from-list\n      label=\"Gender\"\n      [items]=\"genders\"\n      [formControl]=\"gender\"\n    />\n\n    @if (gender.value || ageGroup.value) {\n      @if (!ageGroup.value) {\n        <ion-item-divider>\n          <ion-label>Age group</ion-label>\n        </ion-item-divider>\n      }\n      <sneat-select-from-list\n        label=\"Age group\"\n        [items]=\"ageGroups\"\n        [formControl]=\"ageGroup\"\n      />\n    }\n  </form>\n</ion-content>\n<ion-footer>\n  <ion-toolbar>\n    <ion-buttons slot=\"end\">\n      <ion-button [disabled]=\"submitting\" (click)=\"save()\">Save</ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-footer>\n"]}