ngx-auth-firebaseui-updated/fesm2022/ngx-auth-firebaseui-updated.mjs.map

From ngx-auth-firbaseui but updated to fix dependency issues with Angular 16. Open Source Library for Angular Web Apps to integrate a material user interface for firebase authentication

{"version":3,"file":"ngx-auth-firebaseui-updated.mjs","sources":["../../../projects/ngx-auth-firebaseui/src/lib/enums/accounts.enum.ts","../../../projects/ngx-auth-firebaseui/src/lib/tokens/index.ts","../../../projects/ngx-auth-firebaseui/src/lib/services/firestore-sync.service.ts","../../../projects/ngx-auth-firebaseui/src/lib/services/auth-process.service.ts","../../../projects/ngx-auth-firebaseui/src/lib/components/email-confirmation/email-confirmation.component.ts","../../../projects/ngx-auth-firebaseui/src/lib/components/email-confirmation/email-confirmation.component.html","../../../projects/ngx-auth-firebaseui/src/lib/components/legality-dialog/legality-dialog.component.ts","../../../projects/ngx-auth-firebaseui/src/lib/components/legality-dialog/legality-dialog.component.html","../../../projects/ngx-auth-firebaseui/src/lib/interfaces/config.interface.ts","../../../projects/ngx-auth-firebaseui/src/lib/interfaces/main.interface.ts","../../../projects/ngx-auth-firebaseui/src/lib/animations/index.ts","../../../projects/ngx-auth-firebaseui/src/lib/components/providers/auth.providers.component.ts","../../../projects/ngx-auth-firebaseui/src/lib/components/providers/auth.providers.component.html","../../../projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui/auth.component.ts","../../../projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui/auth.component.html","../../../projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component.ts","../../../projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component.html","../../../projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.ts","../../../projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.html","../../../projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui-register/ngx-auth-firebaseui-register.component.ts","../../../projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui-register/ngx-auth-firebaseui-register.component.html","../../../projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui-user/user.component.ts","../../../projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui-user/user.component.html","../../../projects/ngx-auth-firebaseui/src/lib/guards/logged-in.guard.ts","../../../projects/ngx-auth-firebaseui/src/lib/ngx-auth-firebaseui.module.ts","../../../projects/ngx-auth-firebaseui/src/public-api.ts","../../../projects/ngx-auth-firebaseui/src/ngx-auth-firebaseui-updated.ts"],"sourcesContent":["export enum Accounts {\n  NONE = 'account',\n  CHECK = 'account-check',\n  EDIT = 'account-edit',\n  OFF = 'account-off',\n  REMOVE = 'account-remove',\n}\n","// This token is the official token containing the final configuration; ie. the merge between default and user provided configurations\nimport {InjectionToken} from '@angular/core';\nimport {NgxAuthFirebaseUIConfig} from '../interfaces';\n\nexport const NgxAuthFirebaseUIConfigToken = new InjectionToken<NgxAuthFirebaseUIConfig>('NgxAuthFirebaseUIConfigToken');\n// This is an intermediate token containing only user-provided configuration\nexport const UserProvidedConfigToken = new InjectionToken<NgxAuthFirebaseUIConfig>('UserProvidedConfigToken');\n","import { Injectable } from \"@angular/core\";\nimport {\n  AngularFirestore,\n  AngularFirestoreDocument,\n} from \"@angular/fire/compat/firestore\";\nimport firebase from \"firebase/compat/app\";\n\nexport const collections = {\n  users: \"users\",\n};\n\n@Injectable({\n  providedIn: \"root\",\n})\nexport class FirestoreSyncService {\n  constructor(public afs: AngularFirestore) {\n    // this.afs.firestore.settings({timestampsInSnapshots: true});\n  }\n\n  // get timestamp() {\n  //     return firebase.firestore.FieldValue.serverTimestamp();\n  // }\n\n  public getUserDocRefByUID(\n    uid: string\n  ): AngularFirestoreDocument<firebase.UserInfo> {\n    return this.afs.doc(`${collections.users}/${uid}`);\n  }\n\n  public deleteUserData(uid: string): Promise<any> {\n    const userRef: AngularFirestoreDocument<firebase.UserInfo> = this.getUserDocRefByUID(\n      uid\n    );\n    return userRef.delete();\n  }\n\n  public updateUserData(user: firebase.UserInfo): Promise<any> {\n    // Sets user$ data to firestore on login\n    const userRef: AngularFirestoreDocument<firebase.UserInfo> = this.getUserDocRefByUID(\n      user.uid\n    );\n    const data: firebase.UserInfo = {\n      uid: user.uid,\n      email: user.email,\n      displayName: user.displayName,\n      photoURL: user.photoURL,\n      phoneNumber: user.phoneNumber,\n      providerId: user.providerId,\n    };\n    return userRef.set(data, { merge: true });\n  }\n}\n","import '@firebase/auth';\n\nimport { EventEmitter, forwardRef, Inject, Injectable } from '@angular/core';\nimport { AngularFireAuth } from '@angular/fire/compat/auth';\nimport { MAT_SNACK_BAR_DEFAULT_OPTIONS, MatSnackBar, MatSnackBarConfig} from '@angular/material/snack-bar';\nimport firebase from 'firebase/compat/app';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { map, take } from 'rxjs/operators';\n\nimport { Accounts } from '../enums';\nimport { ICredentials, ISignInProcess, ISignUpProcess, NgxAuthFirebaseUIConfig } from '../interfaces';\nimport { NgxAuthFirebaseUIConfigToken } from '../tokens';\nimport { FirestoreSyncService } from './firestore-sync.service';\n\nimport UserCredential = firebase.auth.UserCredential;\n\nexport const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\nexport const googleAuthProvider = new firebase.auth.GoogleAuthProvider();\nexport const appleAuthProvider = new firebase.auth.OAuthProvider(\"apple.com\");\nexport const twitterAuthProvider = new firebase.auth.TwitterAuthProvider();\nexport const githubAuthProvider = new firebase.auth.GithubAuthProvider();\nexport const microsoftAuthProvider = new firebase.auth.OAuthProvider(\n  \"microsoft.com\"\n);\nexport const yahooAuthProvider = new firebase.auth.OAuthProvider(\"yahoo.com\");\n\nexport enum AuthProvider {\n  ALL = \"all\",\n  ANONYMOUS = \"anonymous\",\n  EmailAndPassword = \"firebase\",\n  Google = \"google\",\n  Apple = \"apple\",\n  Facebook = \"facebook\",\n  Twitter = \"twitter\",\n  Github = \"github\",\n  Microsoft = \"microsoft\",\n  Yahoo = \"yahoo\",\n  PhoneNumber = \"phoneNumber\",\n}\n\n@Injectable({\n  providedIn: \"root\",\n})\nexport class AuthProcessService implements ISignInProcess, ISignUpProcess {\n  onSuccessEmitter: EventEmitter<any> = new EventEmitter<any>();\n  onErrorEmitter: EventEmitter<any> = new EventEmitter<any>();\n\n  // Useful to know about auth state even between reloads.\n  // Replace emailConfirmationSent and emailToConfirm.\n  private _user$ = new BehaviorSubject<firebase.User | null>(null);\n  get user$(): Observable<firebase.User | null> {\n    return this._user$.asObservable();\n  }\n\n  /**\n   * @deprecated access via user$ asynchronously instead\n   */\n  user: firebase.User;\n\n  messageOnAuthSuccess: string;\n  messageOnAuthError: string;\n\n  // Legacy field that is set to true after sign up.\n  // Value is lost in case of reload. The idea here is to know if we just sent a verification email.\n  emailConfirmationSent: boolean;\n  // Legacy filed that contain the mail to confirm. Same lifecycle than emailConfirmationSent.\n  emailToConfirm: string;\n\n  constructor(\n    public afa: AngularFireAuth,\n    @Inject(forwardRef(() => NgxAuthFirebaseUIConfigToken))\n    public config: NgxAuthFirebaseUIConfig,\n    private snackBar: MatSnackBar,\n    private fireStoreService: FirestoreSyncService,\n    @Inject(MAT_SNACK_BAR_DEFAULT_OPTIONS)\n    private matSnackBarConfig: MatSnackBarConfig\n  ) {}\n\n  listenToUserEvents() {\n    this.afa.user.subscribe((user: firebase.User | null) => {\n      this._user$.next(user);\n      this.user = user;\n    });\n  }\n\n  /**\n   * Reset the password of the ngx-auth-firebaseui-user via email\n   *\n   * @param email - the email to reset\n   */\n  public async resetPassword(email: string): Promise<void> {\n    try {\n      console.log(\"Password reset email sent\");\n      return await this.afa.sendPasswordResetEmail(email);\n    } catch (error) {\n      return this.notifyError(error);\n    }\n  }\n\n  /**\n   * General sign in mechanism to authenticate the users with a firebase project\n   * using a traditional way, via username and password or by using an authentication provider\n   * like google, facebook, twitter and github\n   *\n   * @param provider - the provider to authenticate with (google, facebook, twitter, github)\n   * @param credentials optional email and password\n   */\n  public async signInWith(provider: AuthProvider, credentials?: ICredentials) {\n    try {\n      let signInResult: UserCredential | any;\n\n      switch (provider) {\n        case AuthProvider.ANONYMOUS:\n          signInResult = (await this.afa.signInAnonymously()) as UserCredential;\n          break;\n\n        case AuthProvider.EmailAndPassword:\n          signInResult = (await this.afa.signInWithEmailAndPassword(\n            credentials.email,\n            credentials.password\n          )) as UserCredential;\n          break;\n\n        case AuthProvider.Google:\n          signInResult = (await this.afa.signInWithPopup(\n            googleAuthProvider\n          )) as UserCredential;\n          break;\n\n        case AuthProvider.Apple:\n          signInResult = (await this.afa.signInWithPopup(\n            appleAuthProvider\n          )) as UserCredential;\n          break;\n\n        case AuthProvider.Facebook:\n          signInResult = (await this.afa.signInWithPopup(\n            facebookAuthProvider\n          )) as UserCredential;\n          break;\n\n        case AuthProvider.Twitter:\n          signInResult = (await this.afa.signInWithPopup(\n            twitterAuthProvider\n          )) as UserCredential;\n          break;\n\n        case AuthProvider.Github:\n          signInResult = (await this.afa.signInWithPopup(\n            githubAuthProvider\n          )) as UserCredential;\n          break;\n\n        case AuthProvider.Microsoft:\n          signInResult = (await this.afa.signInWithPopup(\n            microsoftAuthProvider\n          )) as UserCredential;\n          break;\n\n        case AuthProvider.Yahoo:\n          signInResult = (await this.afa.signInWithPopup(\n            yahooAuthProvider\n          )) as UserCredential;\n          break;\n\n        case AuthProvider.PhoneNumber:\n          // coming soon - see feature/sms branch\n          break;\n\n        default:\n          throw new Error(\n            `${AuthProvider[provider]} is not available as auth provider`\n          );\n      }\n      await this.handleSuccess(signInResult);\n    } catch (err) {\n      this.handleError(err);\n    }\n  }\n\n  /**\n   * Sign up new users via email and password.\n   * After that the ngx-auth-firebaseui-user should verify and confirm an email sent via the firebase\n   *\n   * @param displayName - the displayName if the new ngx-auth-firebaseui-user\n   * @param credentials email and password\n   * @returns -\n   */\n  public async signUp(displayName: string, credentials: ICredentials) {\n    try {\n      const userCredential: UserCredential = await this.afa.createUserWithEmailAndPassword(\n        credentials.email,\n        credentials.password\n      );\n      const user = userCredential.user;\n      await this.updateProfile(displayName, user.photoURL);\n\n      if (this.config.enableFirestoreSync) {\n        await this.fireStoreService.getUserDocRefByUID(user.uid).set({\n          uid: user.uid,\n          displayName,\n          email: user.email,\n          photoURL: user.photoURL,\n        } as firebase.User);\n      }\n\n      if (this.config.enableEmailVerification) {\n        await user.sendEmailVerification();\n      }\n\n      // Legacy fields\n      this.emailConfirmationSent = true;\n      this.emailToConfirm = credentials.email;\n\n      await this.handleSuccess(userCredential);\n    } catch (err) {\n      this.handleError(err);\n    }\n  }\n\n  async sendNewVerificationEmail(): Promise<void | never> {\n    if (!this.user) {\n      return Promise.reject(new Error(\"No signed in user\"));\n    }\n    return this.user.sendEmailVerification();\n  }\n\n  async signOut() {\n    try {\n      await this.afa.signOut();\n    } catch (error) {\n      this.notifyError(error);\n    }\n  }\n\n  /**\n   * Update the profile (name + photo url) of the authenticated ngx-auth-firebaseui-user in the\n   * firebase authentication feature (not in firestore)\n   *\n   * @param name - the new name of the authenticated ngx-auth-firebaseui-user\n   * @param photoURL - the new photo url of the authenticated ngx-auth-firebaseui-user\n   * @returns -\n   */\n  public updateProfile(name: string, photoURL: string): Promise<void> {\n    return this.afa.currentUser.then((user: firebase.User) => {\n      if (!photoURL) {\n        return user.updateProfile({ displayName: name });\n      } else {\n        return user.updateProfile({ displayName: name, photoURL });\n      }\n    });\n  }\n\n  public parseUserInfo(user: firebase.User): firebase.UserInfo {\n    return {\n      uid: user.uid,\n      displayName: user.displayName,\n      email: user.email,\n      phoneNumber: user.phoneNumber,\n      photoURL: user.photoURL,\n      providerId:\n        user.providerData.length > 0 ? user.providerData[0].providerId : null,\n    };\n  }\n\n  public getUserPhotoUrl(): Observable<string | null> {\n    return this._user$.pipe(\n      map((user: firebase.User | null) => {\n        if (!user) {\n          return null;\n        } else if (user.photoURL) {\n          return user.photoURL;\n        } else if (user.emailVerified) {\n          return this.getPhotoPath(Accounts.CHECK);\n        } else if (user.isAnonymous) {\n          return this.getPhotoPath(Accounts.OFF);\n        } else {\n          return this.getPhotoPath(Accounts.NONE);\n        }\n      })\n    );\n  }\n\n  public getPhotoPath(image: string): string {\n    return `assets/user/${image}.svg`;\n  }\n\n  public signInWithPhoneNumber() {\n    // todo: 3.1.18\n  }\n\n  async handleSuccess(userCredential: UserCredential) {\n\n    if(this.config.useRawUserCredential) {\n      this.onSuccessEmitter.next(userCredential);\n    } else {\n      this.onSuccessEmitter.next(userCredential.user);\n    }\n\n    if (this.config.enableFirestoreSync) {\n      try {\n        await this.fireStoreService.updateUserData(\n          this.parseUserInfo(userCredential.user)\n        );\n      } catch (e) {\n        console.error(\n          `Error occurred while updating user data with firestore: ${e}`\n        );\n      }\n    }\n    if (this.config.toastMessageOnAuthSuccess) {\n      const fallbackMessage = `Hello ${\n        userCredential.user.displayName ? userCredential.user.displayName : \"\"\n      }!`;\n      this.showToast(this.messageOnAuthSuccess || fallbackMessage);\n    }\n  }\n\n  handleError(error: any) {\n    this.notifyError(error);\n    console.error(error);\n  }\n\n  // Refresh user info. Can be useful for instance to get latest status regarding email verification.\n  reloadUserInfo() {\n    return this._user$\n      .pipe(take(1))\n      .subscribe((user: firebase.User | null) => user && user.reload());\n  }\n\n  // Search for an error message.\n  // Consumers of this library are given the possibility to provide a\n  // function in case they want to instrument message based on error properties.\n  getMessageOnAuthError(error: any) {\n    // eslint-disable-next-line no-bitwise\n    return (\n      error.toString() || \"Sorry, something went wrong. Please retry later.\"\n    );\n  }\n\n  // Show a toast using current snackbar config. If message is empty, no toast is displayed allowing to opt-out when needed.\n  // Default MatSnackBarConfig has no duration, meaning it stays visible forever.\n  // If that's the case, an action button is added to allow the end-user to dismiss the toast.\n  showToast(message: string) {\n    if (message) {\n      this.snackBar.open(\n        message,\n        this.matSnackBarConfig.duration ? null : \"OK\"\n      );\n    }\n  }\n\n  showErrorToast(error: any) {\n    if (this.config.toastMessageOnAuthError) {\n      this.showToast(this.getMessageOnAuthError(error));\n    }\n  }\n\n  notifyError(error: any) {\n    this.onErrorEmitter.emit(error);\n    this.showErrorToast(error);\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild\n} from '@angular/core';\nimport {Router} from '@angular/router';\nimport {AuthProcessService} from '../../services/auth-process.service';\n\ninterface VerifyEmailContext {\n  email: string;\n  goBackURL: string;\n  verifyEmailTitleText: string;\n  verifyEmailConfirmationText: string;\n  verifyEmailGoBackText: string;\n  messageOnEmailConfirmationSuccess: string;\n  messageOnError: string;\n}\n\nconst defaultTranslations = {\n  verifyEmailTitleText: 'Confirm your e-mail address!',\n  verifyEmailConfirmationText: 'A confirmation e-mail has been sent.' +\n    ' Check your inbox and click on the link \"Confirm my e-mail\" to confirm your e-mail address.',\n  verifyEmailGoBackText: 'Go back',\n  sendNewVerificationEmailText: 'Send new confirmation e-mail',\n  signOutText: 'Sign out',\n  messageOnEmailConfirmationSuccess: 'A new confirmation e-mail has been sent. Please check your inbox.',\n};\n\n@Component({\n  selector: 'ngx-auth-firebaseui-email-confirmation',\n  templateUrl: './email-confirmation.component.html',\n  styleUrls: ['./email-confirmation.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class EmailConfirmationComponent implements OnInit, OnChanges {\n\n  @Input() email: string;\n  @Input() goBackURL: string;\n  // i18n translations to use in default template\n  @Input() verifyEmailTitleText: string;\n  @Input() verifyEmailConfirmationText: string;\n  @Input() verifyEmailGoBackText: string;\n  @Input() sendNewVerificationEmailText: string;\n  @Input() signOutText: string;\n  @Input() messageOnEmailConfirmationSuccess: string;\n\n  // Template to use in place of default template\n  @Input() template: TemplateRef<any>;\n\n  @Output() signOut = new EventEmitter();\n\n  // Final template\n  verifyEmailTemplate: TemplateRef<any>;\n  // Context hash to use for verifyEmailTemplate.\n  verifyEmailContext: VerifyEmailContext;\n\n  isLoading: boolean;\n\n  @ViewChild('defaultVerifyEmail', {static: true}) defaultTemplate: TemplateRef<any>;\n\n  constructor(public authProcess: AuthProcessService, private router: Router, private changeDetectorRef: ChangeDetectorRef) {\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.verifyEmailTemplate && changes.verifyEmailTemplate.currentValue == null) {\n      this.verifyEmailTemplate = this.defaultTemplate;\n      console.log('ngOnChanges - defaultTemplate:', this.verifyEmailTemplate);\n    }\n    this.verifyEmailContext = this.createTemplateContext();\n  }\n\n  ngOnInit(): void {\n    if (!this.verifyEmailTemplate) {\n      console.log('ngOnInit - defaultTemplate');\n      this.verifyEmailTemplate = this.defaultTemplate;\n    }\n    this.verifyEmailContext = this.createTemplateContext();\n    console.log('verifyEmailTemplate:', this.verifyEmailTemplate);\n    console.log('verifyEmailContext:', this.verifyEmailContext);\n  }\n\n  async continue() {\n    try {\n      await this.authProcess.reloadUserInfo();\n      await this.router.navigate([this.goBackURL]);\n    } catch (error) {\n      this.authProcess.notifyError(error);\n    }\n  }\n\n  async sendNewVerificationEmail() {\n    try {\n      this.isLoading = true;\n      this.changeDetectorRef.markForCheck();\n      await this.authProcess.sendNewVerificationEmail();\n      this.authProcess.showToast(this.verifyEmailContext.messageOnEmailConfirmationSuccess);\n    } catch (error) {\n      this.authProcess.notifyError(error);\n    } finally {\n      this.isLoading = false;\n      this.changeDetectorRef.markForCheck();\n    }\n  }\n\n  private createTemplateContext(): any {\n    return {\n      email: this.email,\n      goBackURL: this.goBackURL,\n      verifyEmailTitleText: this.verifyEmailTitleText || defaultTranslations.verifyEmailTitleText,\n      verifyEmailConfirmationText: this.verifyEmailConfirmationText || defaultTranslations.verifyEmailConfirmationText,\n      verifyEmailGoBackText: this.verifyEmailGoBackText || defaultTranslations.verifyEmailGoBackText,\n      sendNewVerificationEmailText: this.sendNewVerificationEmailText || defaultTranslations.sendNewVerificationEmailText,\n      signOutText: this.signOutText || defaultTranslations.signOutText,\n      messageOnEmailConfirmationSuccess: this.messageOnEmailConfirmationSuccess || defaultTranslations.messageOnEmailConfirmationSuccess\n    };\n  }\n}\n","<ng-container *ngTemplateOutlet=\"verifyEmailTemplate; context: verifyEmailContext\"></ng-container>\n<ng-template #defaultVerifyEmail let-email=\"email\" let-goBackURL=\"goBackURL\"\n             let-sendNewVerificationEmailText=\"sendNewVerificationEmailText\"\n             let-signOutText=\"signOutText\"\n             let-verifyEmailConfirmationText=\"verifyEmailConfirmationText\" let-verifyEmailGoBackText=\"verifyEmailGoBackText\"\n             let-verifyEmailTitleText=\"verifyEmailTitleText\">\n  <mat-card class=\"verify-email\">\n    <mat-card-content style=\"flex-direction: column\" fxLayoutAlign=\"center center\">\n      <mat-icon>email</mat-icon>\n      <p class=\"title\" style=\"flex-direction: column\" fxLayoutAlign=\"center center\">\n        <span class=\"mat-subheading-2\">{{ verifyEmailTitleText }}</span>\n        <span class=\"mat-body-2\">{{ email }}</span>\n      </p>\n      <p class=\"subtitle\">{{ verifyEmailConfirmationText }}</p>\n      <mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n    </mat-card-content>\n    <mat-card-actions style=\"flex-direction: column\" fxLayoutAlign=\"center center\">\n      <button (click)=\"continue()\" *ngIf=\"goBackURL\" class=\"go-back-button action-button\" mat-stroked-button>\n        {{ verifyEmailGoBackText }}\n      </button>\n      <button (click)=\"sendNewVerificationEmail()\" class=\"send-new-mail-button action-button\"\n              mat-stroked-button>{{ sendNewVerificationEmailText }}</button>\n      <button (click)=\"this.signOut.emit()\" class=\"sign-out-button action-button\" color=\"warn\"\n              mat-stroked-button>{{ signOutText }}</button>\n    </mat-card-actions>\n  </mat-card>\n</ng-template>\n","import {Component, Inject} from '@angular/core';\nimport {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';\nimport {LegalityDialogParams, LegalityDialogResult} from '../../interfaces';\n\n@Component({\n  selector: 'ngx-auth-firebaseui-legality-dialog',\n  templateUrl: './legality-dialog.component.html',\n  styleUrls: ['./legality-dialog.component.scss']\n})\nexport class LegalityDialogComponent {\n\n  checkTOS: boolean;\n  checkPrivacyPolicy: boolean;\n\n  constructor(public dialogRef: MatDialogRef<LegalityDialogComponent>,\n              @Inject(MAT_DIALOG_DATA) public data: LegalityDialogParams) {\n  }\n\n  // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match\n  private _disableConfirmActionButton = false;\n\n  get disableConfirmActionButton(): boolean {\n    if (this.data.tosUrl && this.data.privacyPolicyUrl) {\n      this._disableConfirmActionButton = !(this.checkTOS && this.checkPrivacyPolicy);\n    } else if (this.data.tosUrl && !this.data.privacyPolicyUrl) {\n      this._disableConfirmActionButton = !this.checkTOS;\n    } else if (!this.data.tosUrl && this.data.privacyPolicyUrl) {\n      this._disableConfirmActionButton = !this.checkPrivacyPolicy;\n    }\n    return this._disableConfirmActionButton;\n  }\n\n  closeDialog() {\n    const result: LegalityDialogResult = {\n      checked: !this.disableConfirmActionButton,\n      authProvider: this.data.authProvider\n    };\n    this.dialogRef.close(result);\n  }\n\n}\n","<h1 matDialogTitle>Legal requirements</h1>\n\n<mat-dialog-content>\n  <div style=\"flex-direction: column\" fxLayoutAlign=\"start\">\n    <mat-checkbox *ngIf=\"this.data.tosUrl\" [(ngModel)]=\"checkTOS\">\n      I agree to the\n      <span>&nbsp;</span>\n      <a [href]=\"this.data.tosUrl\"\n         target=\"_blank\">\n        Terms of Service and Conditions\n      </a>\n    </mat-checkbox>\n\n    <mat-checkbox *ngIf=\"this.data.privacyPolicyUrl\"\n                  [(ngModel)]=\"checkPrivacyPolicy\">\n      I have read and agree to the\n      <span>&nbsp;</span>\n      <a [href]=\"this.data.privacyPolicyUrl\"\n         target=\"_blank\">\n        Privacy\n      </a>\n    </mat-checkbox>\n  </div>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n  <button color=\"warn\"\n          id=\"decline-action\"\n          mat-raised-button\n          matDialogClose>Decline\n  </button>\n  <button (click)=\"closeDialog()\"\n          [disabled]=\"disableConfirmActionButton\"\n          color=\"primary\"\n          id=\"confirm-action\"\n          mat-raised-button>Confirm\n  </button>\n</mat-dialog-actions>\n\n","// import * as firebase from 'firebase';\n\nexport interface NgxAuthFirebaseUIConfig {\n  // authNextURL?: string, // popup or redirect\n  // tosUrl?: string, // term of services url\n  // ppUrl?: string, // privacy policy url\n  // authProviders?: Array<AuthProvider>,\n  // languageCode?: string, // todo: 28.3.18\n  authGuardFallbackURL?: string;\n  authGuardLoggedInURL?: string;\n  enableFirestoreSync?: boolean;\n\n  // Toasts\n  toastMessageOnAuthSuccess?: boolean;\n  toastMessageOnAuthError?: boolean;\n\n  // Password length min/max in forms independently of each componenet min/max.\n  // `min/max` input parameters in components should be within this range.\n  passwordMaxLength?: number;\n  passwordMinLength?: number;\n\n  // Same as password but for the name\n  nameMaxLength?: number;\n  nameMinLength?: number;\n\n  // If set, sign-in/up form is not available until email has been verified.\n  // Plus protected routes are still protected even though user is connected.\n  guardProtectedRoutesUntilEmailIsVerified?: boolean;\n\n  // Control whether or not email verification is used\n  enableEmailVerification?: boolean;\n\n  // If set to true outputs the UserCredential object instead of firebase.User after login and signup\n  useRawUserCredential?: boolean\n}\n\nexport const defaultAuthFirebaseUIConfig: NgxAuthFirebaseUIConfig = {\n  // authMethod: 'redirect',\n  // authProviders: [new GoogleAuthProvider(), new FacebookAuthProvider(), new TwitterAuthProvider(), new GithubAuthProvider()],\n  enableFirestoreSync: true,\n  toastMessageOnAuthSuccess: true,\n  toastMessageOnAuthError: true,\n  authGuardFallbackURL: '/',\n  authGuardLoggedInURL: '/',\n\n  // Password length min/max in forms independently of each componenet min/max.\n  // `min/max` input parameters in components should be within this range.\n  passwordMaxLength: 60,\n  passwordMinLength: 8,\n\n  // Same as password but for the name\n  nameMaxLength: 50,\n  nameMinLength: 2,\n\n  // If set, sign-in/up form is not available until email has been verified.\n  // Plus protected routes are still protected even though user is connected.\n  guardProtectedRoutesUntilEmailIsVerified: true,\n\n  // Default to email verification on\n  enableEmailVerification: true,\n\n  // Default to false to keep the current projects working as is\n  useRawUserCredential: false\n};\n\n// Merge default config with user provided config.\nexport function ngxAuthFirebaseUIConfigFactory(userProvidedConfig: NgxAuthFirebaseUIConfig): NgxAuthFirebaseUIConfig {\n  return Object.assign({}, defaultAuthFirebaseUIConfig, userProvidedConfig);\n}\n","import {AuthProvider} from '../services/auth-process.service';\n\nexport interface ICredentials {\n  email: string;\n  password: string;\n}\n\nexport interface ISignUpProcess {\n\n  signUp(name: string, credentials: ICredentials): any;\n}\n\nexport interface ISignInProcess {\n\n  onSuccessEmitter: any;\n  onErrorEmitter: any;\n\n  signInWith(provider: AuthProvider, credentials?: ICredentials): any;\n\n  resetPassword(email: string): any;\n}\n\nexport enum Theme {\n  DEFAULT = 'default',\n  CLASSIC = 'classic',\n  STROKED = 'stroked',\n  FAB = 'fab',\n  MINI_FAB = 'mini-fab',\n  RAISED = 'raised',\n}\n\nexport enum Layout {\n  ROW = 'row',\n  COLUMN = 'column'\n}\n\nexport const EMAIL_REGEX = new RegExp(\n  [\n    '^(([^<>()[\\\\]\\\\.,;:\\\\s@\"]+(\\\\.[^<>()\\\\[\\\\]\\\\.,;:\\\\s@\"]+)*)',\n    '|(\".+\"))@((\\\\[[0-9]{1,3}\\\\.[0-9]{1,3}\\\\.[0-9]{1,3}\\\\.',\n    '[0-9]{1,3}])|(([a-zA-Z\\\\-0-9]+\\\\.)+',\n    '[a-zA-Z]{2,}))$',\n  ].join('')\n);\n\n// eslint-disable-next-line max-len\nexport const PHONE_NUMBER_REGEX = new RegExp(\n  [\n    '^[+]{0,1}[(]{0,1}[0-9]{1,4}[)]{0,1}[-\\\\s\\\\.]{0,1}[(]{0,1}[0-9]{1,4}[)]{0,1}[-\\\\s\\\\./0-9]{4,12}$',\n  ].join('')\n);\n","import {animate, animateChild, animation, query, stagger, state, style, transition, trigger, useAnimation} from '@angular/animations';\n\nconst customAnimation = animation(\n  [\n    style({\n      opacity: '{{opacity}}',\n      transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'\n    }),\n    animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))\n  ],\n  {\n    params: {\n      duration: '200ms',\n      delay: '0ms',\n      opacity: '0',\n      scale: '1',\n      x: '0',\n      y: '0',\n      z: '0'\n    }\n  }\n);\n\nexport const NgxAuthFirebaseuiAnimations = [\n  trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),\n\n  trigger('animateStagger', [\n    state('50', style('*')),\n    state('100', style('*')),\n    state('200', style('*')),\n\n    transition('void => 50', query('@*', [stagger('50ms', [animateChild()])], {optional: true})),\n    transition('void => 100', query('@*', [stagger('100ms', [animateChild()])], {optional: true})),\n    transition('void => 200', query('@*', [stagger('200ms', [animateChild()])], {optional: true}))\n  ]),\n];\n","import {Component, Input, Output, Renderer2} from '@angular/core';\nimport {AuthProcessService, AuthProvider} from '../../services/auth-process.service';\nimport {NgxAuthFirebaseuiAnimations} from '../../animations';\nimport {Layout, LegalityDialogParams, LegalityDialogResult, Theme} from '../../interfaces';\nimport {MatDialog,MatDialogRef} from '@angular/material/dialog';\nimport {LegalityDialogComponent} from '../legality-dialog/legality-dialog.component';\nimport { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';\n\n@Component({\n  selector: 'ngx-auth-firebaseui-providers',\n  templateUrl: 'auth.providers.component.html',\n  styleUrls: ['auth.providers.component.scss'],\n  animations: NgxAuthFirebaseuiAnimations\n})\nexport class AuthProvidersComponent {\n\n  @Input() theme: Theme; // theme: string = Theme.DEFAULT;\n  @Input() layout: string = Layout.ROW;\n  @Input() providers: AuthProvider[] | AuthProvider = AuthProvider.ALL; //  google, facebook, twitter, github, microsoft, yahoo\n\n  @Output() onSuccess: any;\n  @Output() onError: any;\n\n  @Input() tosUrl: string;\n  @Input() privacyPolicyUrl: string;\n  dialogRef: MatDialogRef<LegalityDialogComponent>;\n\n  themes = Theme;\n  authProvider = AuthProvider;\n\n  isXsScreen: boolean;\n\n  constructor(public authProcess: AuthProcessService, public dialog: MatDialog,\n      private renderer: Renderer2,\n      private breakpointObserver: BreakpointObserver) {\n    this.onSuccess = authProcess.onSuccessEmitter;\n    this.onError = authProcess.onErrorEmitter;\n  }\n  ngOnInit() {\n    this.breakpointObserver.observe([Breakpoints.XSmall])\n      .subscribe(result => {\n        this.isXsScreen = result.matches;\n      });\n  }\n  processLegalSignUP(authProvider?: AuthProvider) {\n    if (this.tosUrl || this.privacyPolicyUrl) {\n      const params: LegalityDialogParams = {\n        tosUrl: this.tosUrl,\n        privacyPolicyUrl: this.privacyPolicyUrl,\n        authProvider\n      };\n\n      this.dialogRef = this.dialog.open(LegalityDialogComponent, {data: params});\n      this.dialogRef.afterClosed().subscribe((result: LegalityDialogResult) => {\n        if (result && result.checked) {\n          // this._afterSignUpMiddleware(result.authProvider).then(() => this.signUpFormGroup.reset());\n          this.authProcess.signInWith(authProvider);\n        }\n        this.dialogRef = null;\n      });\n    } else {\n      // this._afterSignUpMiddleware(authProvider).then(() => this.signUpFormGroup.reset());\n      this.authProcess.signInWith(authProvider);\n    }\n  }\n\n}\n","<div [@animateStagger]=\"{ value: '50' }\" [ngSwitch]=\"theme\">\n\n  <!--default icon buttons-->\n  <div *ngSwitchDefault\n       [ngStyle]=\"{'flex-direction': isXsScreen ? 'column' : layout, 'justify-content': layout == 'row' ? 'space-around center' : 'stretch'}\">\n    <button (click)=\"processLegalSignUP(authProvider.Google)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Google)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            mat-button>\n      <mat-icon svgIcon=\"google-colored\"></mat-icon>\n      Google\n    </button>\n\n    <button (click)=\"processLegalSignUP(authProvider.Apple)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Apple)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"apple-filled\"\n            mat-button>\n      <mat-icon svgIcon=\"apple\"></mat-icon>\n      Apple\n    </button>\n\n    <button (click)=\"processLegalSignUP(authProvider.Facebook)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Facebook)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"facebook-filled\"\n            mat-button>\n      <mat-icon svgIcon=\"facebook\"></mat-icon>\n      Facebook\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Twitter)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Twitter)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"twitter-filled\"\n            mat-button>\n      <mat-icon svgIcon=\"twitter\"></mat-icon>\n      Twitter\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Github)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Github)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            mat-button>\n      <mat-icon svgIcon=\"github\"></mat-icon>\n      GitHub\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Microsoft)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Microsoft)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            mat-button>\n      <mat-icon svgIcon=\"microsoft\"></mat-icon>\n      Microsoft\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Yahoo)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Yahoo)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            mat-button>\n      <mat-icon svgIcon=\"yahoo\"></mat-icon>\n      Yahoo\n    </button>\n  </div>\n\n  <!--classic-->\n  <div *ngSwitchCase=\"themes.CLASSIC\"\n       [ngStyle]=\"{'flex-direction': isXsScreen ? 'column' : layout, 'justify-content': layout == 'row'? 'space-around center' : 'stretch'}\"\n       class=\"buttons-classic\">\n    <button (click)=\"processLegalSignUP(authProvider.Google)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Google)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"google-classic\"\n            mat-button>\n      Google\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Apple)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Apple)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"apple-classic\"\n            mat-button>\n      Apple\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Facebook)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Facebook)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"facebook-classic\"\n            mat-button>\n      Facebook\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Twitter)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Twitter)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"twitter-classic\"\n            mat-button>\n      Twitter\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Github)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Github)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"github-classic\"\n            mat-button>\n      GitHub\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Microsoft)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Microsoft)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"microsoft-classic\"\n            mat-button>\n      Microsoft\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Yahoo)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Yahoo)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"yahoo-classic\"\n            mat-button>\n      Yahoo\n    </button>\n  </div>\n\n  <!--stroked-->\n  <div *ngSwitchCase=\"themes.STROKED\"\n\n       [ngStyle]=\"{'flex-direction': isXsScreen ? 'column' : layout, 'justify-content': layout == 'row' ? 'space-around center' : 'stretch'}\"\n       class=\"buttons-classic\">\n    <button (click)=\"processLegalSignUP(authProvider.Google)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Google)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':true}\"\n            class=\"google-classic\"\n            mat-stroked-button>\n      Google\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Apple)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Apple)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"apple-classic\"\n            mat-stroked-button>\n      Apple\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Facebook)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Facebook)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"facebook-classic\"\n            mat-stroked-button>\n      Facebook\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Twitter)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Twitter)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"twitter-classic\"\n            mat-stroked-button>\n      Twitter\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Github)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Github)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"github-classic\"\n            mat-stroked-button>\n      GitHub\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Microsoft)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Microsoft)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"microsoft-classic\"\n            mat-stroked-button>\n      Microsoft\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Yahoo)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Yahoo)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"yahoo-classic\"\n            mat-stroked-button>\n      Yahoo\n    </button>\n  </div>\n\n  <!--raised-->\n  <div *ngSwitchCase=\"themes.RAISED\"\n       [ngStyle]=\"{'flex-direction': isXsScreen ? 'column' : layout, 'justify-content': layout == 'row' ? 'space-around center' : 'stretch'}\"\n       class=\"buttons-raised\">\n    <button (click)=\"processLegalSignUP(authProvider.Google)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Google)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"google-raised\"\n            mat-raised-button>\n      Google\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Apple)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Apple)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"apple-raised\"\n            mat-raised-button>\n      Apple\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Facebook)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Facebook)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"facebook-raised\"\n            mat-raised-button>\n      Facebook\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Twitter)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Twitter)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"twitter-raised\"\n            mat-raised-button>\n      Twitter\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Github)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Github)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"github-raised\"\n            mat-raised-button>\n      GitHub\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Microsoft)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Microsoft)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"microsoft-raised\"\n            mat-raised-button>\n      Microsoft\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Yahoo)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Yahoo)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            [ngClass]=\"{'space-full-xs':isXsScreen}\"\n            class=\"yahoo-raised\"\n            mat-raised-button>\n      Yahoo\n    </button>\n  </div>\n\n  <!--fab-->\n  <div *ngSwitchCase=\"themes.FAB\"\n       [ngStyle]=\"{'flex-direction': layout, 'justify-content': layout == 'row' ? 'space-around center' : 'stretch'}\"\n       class=\"buttons-raised\">\n    <button (click)=\"processLegalSignUP(authProvider.Google)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Google)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            class=\"google-raised\"\n            mat-fab>\n      <mat-icon svgIcon=\"google\"></mat-icon>\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Apple)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Apple)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            class=\"apple-raised\"\n            mat-fab>\n      <mat-icon svgIcon=\"apple\"></mat-icon>\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Facebook)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Facebook)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            class=\"facebook-raised\"\n            mat-fab>\n      <mat-icon svgIcon=\"facebook\"></mat-icon>\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Twitter)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Twitter)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            class=\"twitter-raised\"\n            mat-fab>\n      <mat-icon svgIcon=\"twitter\"></mat-icon>\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Github)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Github)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            class=\"github-raised\"\n            mat-fab>\n      <mat-icon svgIcon=\"github\"></mat-icon>\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Microsoft)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Microsoft)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            class=\"microsoft\"\n            mat-fab>\n      <mat-icon svgIcon=\"microsoft\"></mat-icon>\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Yahoo)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Yahoo)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            class=\"yahoo-raised\"\n            mat-fab>\n      <mat-icon svgIcon=\"yahoo\"></mat-icon>\n    </button>\n  </div>\n\n  <!--mini-fab-->\n  <div *ngSwitchCase=\"themes.MINI_FAB\"\n       [ngStyle]=\"{'flex-direction': layout, 'justify-content': layout == 'row' ? 'space-around center' : 'stretch'}\"\n       class=\"buttons-raised\"\n       fxLayoutAlign.xs=\"center center\">\n    <button (click)=\"processLegalSignUP(authProvider.Google)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Google)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            class=\"google-raised\"\n            fxFlexAlign=\"center\"\n            mat-mini-fab>\n      <mat-icon svgIcon=\"google\"></mat-icon>\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Apple)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Apple)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            class=\"apple-raised\"\n            mat-mini-fab>\n      <mat-icon svgIcon=\"apple\"></mat-icon>\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Facebook)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Facebook)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            class=\"facebook-raised\"\n            mat-mini-fab>\n      <mat-icon svgIcon=\"facebook\"></mat-icon>\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Twitter)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Twitter)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            class=\"twitter-raised\"\n            mat-mini-fab>\n      <mat-icon class=\"icon-white\" svgIcon=\"twitter\"></mat-icon>\n    </button>\n    <button (click)=\"processLegalSignUP(authProvider.Github)\"\n            *ngIf=\"providers === authProvider.ALL || providers.includes(authProvider.Github)\"\n            [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n            class=\"gi