initial push

AuthentesApp/src/app/app-routing.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: 'home',
+    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
+  },
+  {
+    path: 'beliefs',
+    loadChildren: () => import('./beliefs/beliefs.module').then( m => m.BeliefsPageModule)
+  },
+  {
+    path: 'values',
+    loadChildren: () => import('./values/values.module').then( m => m.ValuesPageModule)
+  },
+  {
+    path: '',
+    redirectTo: 'home',
+    pathMatch: 'full'
+  },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

AuthentesApp/src/app/app.component.html

@@ -0,0 +1,3 @@
+<ion-app>
+  <ion-router-outlet></ion-router-outlet>
+</ion-app>

AuthentesApp/src/app/app.component.spec.ts

@@ -0,0 +1,23 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TestBed, waitForAsync } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+
+  beforeEach(waitForAsync(() => {
+
+    TestBed.configureTestingModule({
+      declarations: [AppComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+  // TODO: add more tests!
+
+});

AuthentesApp/src/app/app.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss'],
+})
+export class AppComponent {
+  constructor(statusbar: StatusBar) {
+    // platform.ready().then(() => {
+    // Okay, so the platform is ready and our plugins are available.
+    // Here you can do any higher level native things you might need.
+    statusbar.hide();
+
+  }
+}

AuthentesApp/src/app/app.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouteReuseStrategy } from '@angular/router';
+
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+
+@NgModule({
+  declarations: [AppComponent],
+  entryComponents: [],
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  providers: [
+    StatusBar,
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

AuthentesApp/src/app/beliefs/beliefs-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { BeliefsPage } from './beliefs.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: BeliefsPage,
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class BeliefsPageRoutingModule {}

AuthentesApp/src/app/beliefs/beliefs.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { BeliefsPage } from './beliefs.page';
+
+import { BeliefsPageRoutingModule } from './beliefs-routing.module';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BeliefsPageRoutingModule
+  ],
+  declarations: [BeliefsPage]
+})
+export class BeliefsPageModule {}

AuthentesApp/src/app/beliefs/beliefs.page.html

@@ -0,0 +1,15 @@
+<!-- <ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Blank
+    </ion-title>
+  </ion-toolbar>
+</ion-header> -->
+
+<ion-content [fullscreen]="true">
+  <div class="logo">
+    <img class="logo_dark" src="assets/logo-authentes.png" />
+    <img class="logo_light" src="assets/logo-authentes-white.png" />
+  </div>
+  
+</ion-content>

AuthentesApp/src/app/beliefs/beliefs.page.scss

@@ -0,0 +1,8 @@
+#container {
+  text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}

AuthentesApp/src/app/beliefs/beliefs.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BeliefsPage } from './beliefs.page';
+
+describe('HomePage', () => {
+  let component: BeliefsPage;
+  let fixture: ComponentFixture<BeliefsPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BeliefsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BeliefsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

AuthentesApp/src/app/beliefs/beliefs.page.ts

@@ -0,0 +1,13 @@
+import { Component, Input, ViewChildren, QueryList, ElementRef, EventEmitter, Output, Renderer2, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+import { GestureController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'beliefs.page.html',
+  styleUrls: ['beliefs.page.scss'],
+})
+export class BeliefsPage {
+
+  constructor(private router: Router, private renderer: Renderer2, private gestureCtrl: GestureController) {}
+}

AuthentesApp/src/app/home/home-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HomePage } from './home.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomePage,
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HomePageRoutingModule {}

AuthentesApp/src/app/home/home.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { HomePage } from './home.page';
+
+import { HomePageRoutingModule } from './home-routing.module';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    HomePageRoutingModule
+  ],
+  declarations: [HomePage]
+})
+export class HomePageModule {}

AuthentesApp/src/app/home/home.page.html

@@ -0,0 +1,29 @@
+<!-- <ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Blank
+    </ion-title>
+  </ion-toolbar>
+</ion-header> -->
+
+<ion-content [fullscreen]="true">
+
+
+  <div id="container">
+    <div class="logo">
+      <img class="logo_dark" src="assets/logo-authentes.png" />
+      <img class="logo_light" src="assets/logo-authentes-white.png" />
+    </div>
+
+
+    <div class="nav_buttons">
+      <ion-button (click)="wellnesswheel()" color="primary" size="large" shape="round" expand="block">Wellness wheel</ion-button>
+      <ion-button (click)="lifeline()" color="primary" size="large" shape="round" expand="block">Lifeline</ion-button>
+      <ion-button (click)="beliefs()" color="primary" size="large" shape="round" expand="block">Beliefs</ion-button>
+      <ion-button (click)="values()" color="primary" size="large" shape="round" expand="block">Values</ion-button>
+    </div>
+
+
+
+  </div>
+</ion-content>

AuthentesApp/src/app/home/home.page.scss

@@ -0,0 +1,39 @@
+#container {
+  text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.nav_buttons {
+  width: 80vw;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  *{
+    margin-top: 30px;
+    height: 10vh;
+  }
+}
+
+// .logo {
+//   margin-left: auto;
+//   margin-right: auto;
+//   margin-bottom: 50px;
+//   max-width: 80vw;
+// }
+// .logo_light {
+//   display: none;
+// }
+
+// @media (prefers-color-scheme: dark) {
+//   .logo_dark{
+//     display: none;
+//   }
+
+//   .logo_light {
+//     display: block;
+//   }
+// }

AuthentesApp/src/app/home/home.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { HomePage } from './home.page';
+
+describe('HomePage', () => {
+  let component: HomePage;
+  let fixture: ComponentFixture<HomePage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HomePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

AuthentesApp/src/app/home/home.page.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+})
+export class HomePage {
+
+  constructor(private router: Router) {}
+
+  wellnesswheel() {
+    console.log("komt wellnesswheel game");
+  }
+
+  lifeline() {
+    console.log("komt lifeline game");
+  }
+
+  beliefs() {
+    console.log("komt beliefs game");
+  }
+
+  values() {
+    this.router.navigateByUrl(`/values`);
+  }
+}

AuthentesApp/src/app/services/alert.service.ts

@@ -0,0 +1,63 @@
+import { Injectable } from '@angular/core';
+import { ToastController, LoadingController, AlertController} from '@ionic/angular';
+
+@Injectable({
+providedIn: 'root'
+})
+
+export class AlertService {
+    constructor(private toastController: ToastController, public loadingController: LoadingController, public alertController: AlertController) { }
+
+    async presentToast(message: any) {
+        const toast = await this.toastController.create({
+            message: message,
+            duration: 3000
+        });
+        toast.present();
+    }
+
+    // Show the loader for infinite time
+    async showLoader(message: any) {
+        this.loadingController.create({
+            message: message
+        }).then((res) => {
+            res.present();
+        });
+    }
+    
+    // Hide the loader if already created otherwise return error
+    async hideLoader() {
+        this.checkAndCloseLoader();
+
+        // if theres a delay run check again
+        setTimeout(() => this.checkAndCloseLoader(), 1000);
+    }
+    
+    async checkAndCloseLoader() {
+       // Use getTop function to find the loader and dismiss only if loader is present.
+       const loader = await this.loadingController.getTop();
+       // if loader present then dismiss
+        if(loader !== undefined) { 
+          await this.loadingController.dismiss();
+        }
+    }
+
+    async presentAlert(header: any, message: any) {
+        const alert = await this.alertController.create({
+          header: header,
+          message: message,
+          buttons: [
+            {
+              text: 'Ok',
+              role: 'ok',
+            }
+            
+          ]
+        });
+    
+        await alert.present();
+    
+        const { role } = await alert.onDidDismiss();
+        return role;
+      }
+}

AuthentesApp/src/app/values/values-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ValuesPage } from './values.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ValuesPage,
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ValuesPageRoutingModule {}

AuthentesApp/src/app/values/values.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { ValuesPage } from './values.page';
+
+import { ValuesPageRoutingModule } from './values-routing.module';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ValuesPageRoutingModule
+  ],
+  declarations: [ValuesPage]
+})
+export class ValuesPageModule {}

AuthentesApp/src/app/values/values.page.html

@@ -0,0 +1,69 @@
+<!-- <ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Blank
+    </ion-title>
+  </ion-toolbar>
+</ion-header> -->
+
+<ion-content [fullscreen]="true">
+  <div class="logo">
+    <img class="logo_dark" src="assets/logo-authentes.png" />
+    <img class="logo_light" src="assets/logo-authentes-white.png" />
+  </div>
+  <div class="values">
+
+    <div class="values-status">
+  
+        <div #cross class="cross">
+            <svg width="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                <svg:path
+                    d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"
+                    fill="#CDD6DD" />
+            </svg>
+        </div>
+  
+        <div #heart class="heart">
+            <svg width="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                <svg:path
+                    d="M349.6 64c-36.4 0-70.7 16.7-93.6 43.9C233.1 80.7 198.8 64 162.4 64 97.9 64 48 114.2 48 179.1c0 79.5 70.7 143.3 177.8 241.7L256 448l30.2-27.2C393.3 322.4 464 258.6 464 179.1 464 114.2 414.1 64 349.6 64zm-80.8 329.3l-4.2 3.9-8.6 7.8-8.6-7.8-4.2-3.9c-50.4-46.3-94-86.3-122.7-122-28-34.7-40.4-63.1-40.4-92.2 0-22.9 8.4-43.9 23.7-59.3 15.2-15.4 36-23.8 58.6-23.8 26.1 0 52 12.2 69.1 32.5l24.5 29.1 24.5-29.1c17.1-20.4 43-32.5 69.1-32.5 22.6 0 43.4 8.4 58.7 23.8 15.3 15.4 23.7 36.5 23.7 59.3 0 29-12.5 57.5-40.4 92.2-28.8 35.7-72.3 75.7-122.8 122z"
+                    fill="var(--ion-color-primary)" />
+            </svg>
+        </div>
+  
+    </div>
+  
+    <div class="values-cards">
+  
+        <div #card class="values-card" (transitionend)="handleShift()" *ngFor="let card of cardset; let i = index"
+            [ngStyle]="{ zIndex: cardset.length - i, transform: 'scale(' + (20 - i) / 20 + ') translateY(-' + 20 * i + 'px)' }">
+  
+            <h3>{{ card.title }}</h3>
+            <p>{{ card.description }}</p>
+  
+        </div>
+  
+    </div>
+  
+    <div class="values-buttons">
+      <p>{{ cardset.length }} / 5</p>
+      <button (click)="userClickedButton($event, false)">
+          <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+              <svg:path
+                  d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"
+                  fill="#CDD6DD" />
+          </svg>
+      </button>
+  
+      <button (click)="userClickedButton($event, true)">
+          <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+              <svg:path
+                  d="M349.6 64c-36.4 0-70.7 16.7-93.6 43.9C233.1 80.7 198.8 64 162.4 64 97.9 64 48 114.2 48 179.1c0 79.5 70.7 143.3 177.8 241.7L256 448l30.2-27.2C393.3 322.4 464 258.6 464 179.1 464 114.2 414.1 64 349.6 64zm-80.8 329.3l-4.2 3.9-8.6 7.8-8.6-7.8-4.2-3.9c-50.4-46.3-94-86.3-122.7-122-28-34.7-40.4-63.1-40.4-92.2 0-22.9 8.4-43.9 23.7-59.3 15.2-15.4 36-23.8 58.6-23.8 26.1 0 52 12.2 69.1 32.5l24.5 29.1 24.5-29.1c17.1-20.4 43-32.5 69.1-32.5 22.6 0 43.4 8.4 58.7 23.8 15.3 15.4 23.7 36.5 23.7 59.3 0 29-12.5 57.5-40.4 92.2-28.8 35.7-72.3 75.7-122.8 122z"
+                  fill="var(--ion-color-primary)" />
+          </svg>
+      </button>
+  
+    </div>
+  
+  </div>
+</ion-content>

AuthentesApp/src/app/values/values.page.scss

@@ -0,0 +1,118 @@
+#container {
+  text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.cross, .heart {
+  opacity: 0;
+}
+
+.values {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  // background-color: rgba(0,0,0,0.4);
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.values-status {
+  position: absolute;
+  top: 50%;
+  margin-top: -30px;
+  z-index: 999;
+  width: 100%;
+  text-align: center;
+  pointer-events: none;
+}
+
+.values-status > div {
+  transition: all 0.3s ease-in-out;
+}
+
+.values-status svg {
+  transition: all 0.3s ease-in-out;
+  position: absolute;
+  width: 100px;
+  margin-left: -50px;
+}
+
+.values-cards {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.values-card {
+  display: inline-block;
+  width: 260px;
+  height: 40%;
+  background: var(--ion-color-item-background);
+  padding-bottom: 40px;
+  border-radius: 8px;
+  overflow: hidden;
+  position: absolute;
+  will-change: transform;
+  transition: all 0.3s ease-in-out;
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: grab;
+}
+
+.moving.values-card {
+  transition: none;
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
+}
+
+.values-card h3 {
+  color: var(--ion-color-primary);
+  margin-top: 16px;
+  font-size: 24px;
+  padding: 0 16px;
+  pointer-events: none;
+}
+
+.values-card p {
+  margin-top: 24px;
+  font-size: 16px;
+  padding: 0 16px;
+  pointer-events: none;
+}
+
+.values-buttons {
+  position: absolute;
+  flex: 0 0 100px;
+  text-align: center;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+}
+
+.values-buttons button {
+  border-radius: 50%;
+  line-height: 50px;
+  width: 50px;
+  height: 50px;
+  border: 0;
+  background: var(--ion-color-item-background);
+  display: inline-block;
+  padding-top: 10px;
+  margin: 0 12px;
+}
+
+.values-buttons button:focus {
+  outline: 0;
+}

AuthentesApp/src/app/values/values.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ValuesPage } from './values.page';
+
+describe('HomePage', () => {
+  let component: ValuesPage;
+  let fixture: ComponentFixture<ValuesPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ValuesPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ValuesPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

AuthentesApp/src/app/values/values.page.ts

@@ -0,0 +1,262 @@
+import { Component, Input, ViewChildren, QueryList, ElementRef, EventEmitter, Output, Renderer2, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+import { GestureController } from '@ionic/angular';
+import { AlertService } from '../services/alert.service';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'values.page.html',
+  styleUrls: ['values.page.scss'],
+})
+export class ValuesPage {
+
+  cardset = [
+    {
+      img: "https://placeimg.com/300/300/people",
+      title: "Demo card 1",
+      description: "This is a demo for Tinder like swipe cards"
+    },
+    {
+      img: "https://placeimg.com/300/300/animals",
+      title: "Demo card 2",
+      description: "This is a demo for Tinder like swipe cards"
+    },
+    {
+      img: "https://placeimg.com/300/300/nature",
+      title: "Demo card 3",
+      description: "This is a demo for Tinder like swipe cards"
+    },
+    {
+      img: "https://placeimg.com/300/300/tech",
+      title: "Demo card 4",
+      description: "This is a demo for Tinder like swipe cards"
+    },
+    {
+      img: "https://placeimg.com/300/300/arch",
+      title: "Demo card 5",
+      description: "This is a demo for Tinder like swipe cards"
+    },
+    {
+      img: "https://placeimg.com/300/300/arch",
+      title: "Demo card 6",
+      description: "This is a demo for Tinder like swipe cards"
+    },
+    {
+      img: "https://placeimg.com/300/300/people",
+      title: "Demo card 1",
+      description: "This is a demo for Tinder like swipe cards"
+    },
+    {
+      img: "https://placeimg.com/300/300/animals",
+      title: "Demo card 2",
+      description: "This is a demo for Tinder like swipe cards"
+    },
+    {
+      img: "https://placeimg.com/300/300/nature",
+      title: "Demo card 3",
+      description: "This is a demo for Tinder like swipe cards"
+    },
+    {
+      img: "https://placeimg.com/300/300/tech",
+      title: "Demo card 4",
+      description: "This is a demo for Tinder like swipe cards"
+    },
+    {
+      img: "https://placeimg.com/300/300/arch",
+      title: "Demo card 5",
+      description: "This is a demo for Tinder like swipe cards"
+    },
+    {
+      img: "https://placeimg.com/300/300/arch",
+      title: "Demo card 6",
+      description: "This is a demo for Tinder like swipe cards"
+    }
+  ]
+
+  @ViewChildren('card') cards: QueryList<ElementRef>;
+  cardsArray: Array<ElementRef>;
+
+  @ViewChild('cross') cross: ElementRef;
+  @ViewChild('heart') heart: ElementRef;
+
+
+  @Output() choiceMade = new EventEmitter();
+
+  moveOutWidth: number;
+  shiftRequired: boolean;
+  transitionInProgress: boolean;
+  isHearts: boolean;
+  heartVisible: boolean;
+  crossVisible: boolean;
+
+  constructor(private router: Router, private renderer: Renderer2, private gestureCtrl: GestureController, public alertService: AlertService) {}
+
+  ngAfterViewInit() {
+    this.moveOutWidth = document.documentElement.clientWidth * 1.5;
+    this.cardsArray = this.cards.toArray();
+    this.cards.changes.subscribe(()=>{
+      this.cardsArray = this.cards.toArray();
+    })
+    this.swiper();
+  };
+
+  async swiper() {
+    // select all cards one by one
+    for(let i = 0; i < this.cardsArray.length; i++){
+      const card = this.cardsArray[i];
+
+      // create swipe gesture
+      const gesture = this.gestureCtrl.create({
+        el: card.nativeElement,
+        gestureName: 'swiping',
+        onMove: event => {
+          if (event.deltaX === 0 || !this.cardset.length) return;
+      
+          // is transitioning stop swiper availability
+          if (this.transitionInProgress) {
+            this.handleShift();
+          }
+      
+          this.renderer.addClass(card.nativeElement, 'moving');
+      
+          // set heart or cross icon
+          if (event.deltaX > 0) { 
+            this.toggleChoiceIndicator(false,true);
+          }
+          if (event.deltaX < 0) { 
+            this.toggleChoiceIndicator(true,false);
+          }
+      
+          // Create a small rotation to the swipe
+          let xMulti = event.deltaX * 0.03;
+          let yMulti = event.deltaY / 80;
+          let rotate = xMulti * yMulti;
+      
+          this.renderer.setStyle(card.nativeElement, 'transform', 'translate(' + event.deltaX + 'px, ' + event.deltaY + 'px) rotate(' + rotate + 'deg)');
+      
+          this.shiftRequired = true;
+        },
+        onEnd: event => {
+
+          // remove indicators
+          this.toggleChoiceIndicator(false,false);
+
+          if (!this.cardset.length) return;
+      
+          this.renderer.removeClass(card.nativeElement, 'moving');
+
+          // Create a save state (in which movement the card needs to stay)
+          let keep = Math.abs(event.deltaX) < 80;
+          if (keep) {
+            // trasform to startplace
+            this.renderer.setStyle(card.nativeElement, 'transform', '');
+            this.shiftRequired = false;
+      
+          } else {
+            
+            // create animation for fading away
+            let endX = Math.max(Math.abs(event.velocityX) * this.moveOutWidth, this.moveOutWidth);
+            let toX = event.deltaX > 0 ? endX : -endX;
+            let endY = Math.abs(event.velocityY) * this.moveOutWidth;
+            let toY = event.deltaY > 0 ? endY : -endY;
+            let xMulti = event.deltaX * 0.03;
+            let yMulti = event.deltaY / 80;
+            let rotate = xMulti * yMulti;
+      
+            this.renderer.setStyle(card.nativeElement, 'transform', 'translate(' + toX + 'px, ' + (toY + event.deltaY) + 'px) rotate(' + rotate + 'deg)');
+      
+            // do actual stuff with the card
+            this.shiftRequired = true;
+            this.emitChoice(!!(event.deltaX > 0), this.cardset[0]);
+            this.isHearts = !!(event.deltaX > 0);
+          }
+
+          // make sure swipe cant be used
+          this.transitionInProgress = true;
+        }
+        
+      });
+      gesture.enable(true);
+    }
+  }
+
+  async userClickedButton(event, heart) {
+    event.preventDefault();
+    if (!this.cardset.length) return false;
+    // if value is true than its a heart
+    if (heart) {
+
+      // fade away the card
+      this.renderer.setStyle(this.cardsArray[0].nativeElement, 'transform', 'translate(' + this.moveOutWidth + 'px, -100px) rotate(-30deg)');
+      // set indicator
+      this.toggleChoiceIndicator(false,true);
+
+      // set state of the card
+      this.emitChoice(heart, this.cardset[0]);
+      this.isHearts = true;
+    } else {
+      // fade away the card
+      this.renderer.setStyle(this.cardsArray[0].nativeElement, 'transform', 'translate(-' + this.moveOutWidth + 'px, -100px) rotate(30deg)');
+      // set indicator
+      this.toggleChoiceIndicator(true,false);
+     
+      // set state of the card
+      this.emitChoice(heart, this.cardset[0]);
+      this.isHearts = false;
+    };
+
+    // make sure swiping cant be used
+    this.shiftRequired = true;
+    this.transitionInProgress = true;
+  };
+
+  // set card value
+  async toggleChoiceIndicator(cross, heart) {
+    this.crossVisible = cross;
+    this.heartVisible = heart;
+
+    // set opacity of the card
+    if(this.heartVisible){
+      this.renderer.setStyle(this.heart.nativeElement, 'opacity', '1');
+      this.renderer.setStyle(this.cross.nativeElement, 'opacity', '0');
+    }else if(this.crossVisible){
+      this.renderer.setStyle(this.heart.nativeElement, 'opacity', '0');
+      this.renderer.setStyle(this.cross.nativeElement, 'opacity', '1');
+    }else{
+      this.renderer.setStyle(this.heart.nativeElement, 'opacity', '0');
+      this.renderer.setStyle(this.cross.nativeElement, 'opacity', '0');
+    }
+  };
+
+  // handle stack change
+  async handleShift() {
+    this.transitionInProgress = false;
+    this.toggleChoiceIndicator(false,false)
+    if (this.shiftRequired) {
+      this.shiftRequired = false;
+      // If the answer is true keep in stack
+      if(this.isHearts){
+        this.cardset[this.cardset.push(this.cardset.shift())-1];
+      }else{
+        this.cardset.shift();
+      }
+
+      console.log(this.cardset.length);
+      // go to rearrange page
+      if(this.cardset.length <= 5){
+        console.log("may remove");
+        await this.alertService.presentAlert("Cards selected","INSTRUCTIONS WILL COME HERE");
+        console.log("SYNC TO NEXT PAGE");
+      }
+    };
+
+  };
+
+  async emitChoice(heart, card) {
+    this.choiceMade.emit({
+      choice: heart,
+      payload: card
+    })
+  };
+  
+}

AuthentesApp/src/assets/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

AuthentesApp/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

AuthentesApp/src/environments/environment.ts

@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

AuthentesApp/src/global.scss

@@ -0,0 +1,46 @@
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+
+/* Core CSS required for Ionic components to work properly */
+@import "~@ionic/angular/css/core.css";
+
+/* Basic CSS for apps built with Ionic */
+@import "~@ionic/angular/css/normalize.css";
+@import "~@ionic/angular/css/structure.css";
+@import "~@ionic/angular/css/typography.css";
+@import '~@ionic/angular/css/display.css';
+
+/* Optional CSS utils that can be commented out */
+@import "~@ionic/angular/css/padding.css";
+@import "~@ionic/angular/css/float-elements.css";
+@import "~@ionic/angular/css/text-alignment.css";
+@import "~@ionic/angular/css/text-transformation.css";
+@import "~@ionic/angular/css/flex-utils.css";
+
+.logo {
+    // margin-left: auto;
+    // margin-right: auto;
+    margin: 25px auto;
+    max-width: 80vw;
+  }
+  .logo_light {
+    display: none;
+  }
+  
+  @media (prefers-color-scheme: dark) {
+    .logo_dark{
+      display: none;
+    }
+  
+    .logo_light {
+      display: block;
+    }
+  }

AuthentesApp/src/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Ionic App</title>
+
+  <base href="/" />
+
+  <meta name="color-scheme" content="light dark" />
+  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="format-detection" content="telephone=no" />
+  <meta name="msapplication-tap-highlight" content="no" />
+
+  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
+
+  <!-- add to homescreen for ios -->
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+</head>
+
+<body>
+  <app-root></app-root>
+</body>
+
+</html>

AuthentesApp/src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));

AuthentesApp/src/polyfills.ts

@@ -0,0 +1,65 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+import './zone-flags';
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

AuthentesApp/src/test.ts

@@ -0,0 +1,25 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

AuthentesApp/src/theme/variables.scss

@@ -0,0 +1,236 @@
+// Ionic Variables and Theming. For more info, please see:
+// http://ionicframework.com/docs/theming/
+
+/** Ionic CSS Variables **/
+:root {
+  /** primary **/
+  --ion-color-primary: #E98D00;
+  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #c07503;
+  --ion-color-primary-tint: #834f02;
+
+  /** secondary **/
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-secondary-rgb: 61, 194, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #36abe0;
+  --ion-color-secondary-tint: #50c8ff;
+
+  /** tertiary **/
+  --ion-color-item-background: #f1f1f1;
+  --ion-color-item-background-rgb: 82, 96, 255;
+  --ion-color-item-background-contrast: #ffffff;
+  --ion-color-item-background-contrast-rgb: 255, 255, 255;
+  --ion-color-item-background-shade: #4854e0;
+  --ion-color-item-background-tint: #6370ff;
+
+  /** success **/
+  --ion-color-success: #2dd36f;
+  --ion-color-success-rgb: 45, 211, 111;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #28ba62;
+  --ion-color-success-tint: #42d77d;
+
+  /** warning **/
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255, 196, 9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  /** danger **/
+  --ion-color-danger: #eb445a;
+  --ion-color-danger-rgb: 235, 68, 90;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #cf3c4f;
+  --ion-color-danger-tint: #ed576b;
+
+  /** dark **/
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  /** medium **/
+  --ion-color-medium: #92949c;
+  --ion-color-medium-rgb: 146, 148, 156;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #808289;
+  --ion-color-medium-tint: #9d9fa6;
+
+  /** light **/
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+}
+
+@media (prefers-color-scheme: dark) {
+  /*
+   * Dark Colors
+   * -------------------------------------------
+   */
+
+  body {
+    --ion-color-primary: #E98D00;
+    --ion-color-primary-rgb: 66,140,255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255,255,255;
+    --ion-color-primary-shade: #c07503;
+    --ion-color-primary-tint: #834f02;
+
+    --ion-color-secondary: #50c8ff;
+    --ion-color-secondary-rgb: 80,200,255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255,255,255;
+    --ion-color-secondary-shade: #46b0e0;
+    --ion-color-secondary-tint: #62ceff;
+
+    --ion-color-item-background: #181a1b;
+    --ion-color-item-background-rgb: 106,100,255;
+    --ion-color-item-background-contrast: #ffffff;
+    --ion-color-item-background-contrast-rgb: 255,255,255;
+    --ion-color-item-background-shade: #5d58e0;
+    --ion-color-item-background-tint: #7974ff;
+
+    --ion-color-success: #2fdf75;
+    --ion-color-success-rgb: 47,223,117;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0,0,0;
+    --ion-color-success-shade: #29c467;
+    --ion-color-success-tint: #44e283;
+
+    --ion-color-warning: #ffd534;
+    --ion-color-warning-rgb: 255,213,52;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0,0,0;
+    --ion-color-warning-shade: #e0bb2e;
+    --ion-color-warning-tint: #ffd948;
+
+    --ion-color-danger: #ff4961;
+    --ion-color-danger-rgb: 255,73,97;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255,255,255;
+    --ion-color-danger-shade: #e04055;
+    --ion-color-danger-tint: #ff5b71;
+
+    --ion-color-dark: #f4f5f8;
+    --ion-color-dark-rgb: 244,245,248;
+    --ion-color-dark-contrast: #000000;
+    --ion-color-dark-contrast-rgb: 0,0,0;
+    --ion-color-dark-shade: #d7d8da;
+    --ion-color-dark-tint: #f5f6f9;
+
+    --ion-color-medium: #989aa2;
+    --ion-color-medium-rgb: 152,154,162;
+    --ion-color-medium-contrast: #000000;
+    --ion-color-medium-contrast-rgb: 0,0,0;
+    --ion-color-medium-shade: #86888f;
+    --ion-color-medium-tint: #a2a4ab;
+
+    --ion-color-light: #222428;
+    --ion-color-light-rgb: 34,36,40;
+    --ion-color-light-contrast: #ffffff;
+    --ion-color-light-contrast-rgb: 255,255,255;
+    --ion-color-light-shade: #1e2023;
+    --ion-color-light-tint: #383a3e;
+  }
+
+  /*
+   * iOS Dark Theme
+   * -------------------------------------------
+   */
+
+  .ios body {
+    --ion-background-color: #000000;
+    --ion-background-color-rgb: 0,0,0;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255,255,255;
+
+    --ion-color-step-50: #0d0d0d;
+    --ion-color-step-100: #1a1a1a;
+    --ion-color-step-150: #262626;
+    --ion-color-step-200: #333333;
+    --ion-color-step-250: #404040;
+    --ion-color-step-300: #4d4d4d;
+    --ion-color-step-350: #595959;
+    --ion-color-step-400: #666666;
+    --ion-color-step-450: #737373;
+    --ion-color-step-500: #808080;
+    --ion-color-step-550: #8c8c8c;
+    --ion-color-step-600: #999999;
+    --ion-color-step-650: #a6a6a6;
+    --ion-color-step-700: #b3b3b3;
+    --ion-color-step-750: #bfbfbf;
+    --ion-color-step-800: #cccccc;
+    --ion-color-step-850: #d9d9d9;
+    --ion-color-step-900: #e6e6e6;
+    --ion-color-step-950: #f2f2f2;
+
+    --ion-item-background: #000000;
+
+    --ion-card-background: #1c1c1d;
+  }
+
+  .ios ion-modal {
+    --ion-background-color: var(--ion-color-step-100);
+    --ion-toolbar-background: var(--ion-color-step-150);
+    --ion-toolbar-border-color: var(--ion-color-step-250);
+  }
+
+
+  /*
+   * Material Design Dark Theme
+   * -------------------------------------------
+   */
+
+  .md body {
+    --ion-background-color: #121212;
+    --ion-background-color-rgb: 18,18,18;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255,255,255;
+
+    --ion-border-color: #222222;
+
+    --ion-color-step-50: #1e1e1e;
+    --ion-color-step-100: #2a2a2a;
+    --ion-color-step-150: #363636;
+    --ion-color-step-200: #414141;
+    --ion-color-step-250: #4d4d4d;
+    --ion-color-step-300: #595959;
+    --ion-color-step-350: #656565;
+    --ion-color-step-400: #717171;
+    --ion-color-step-450: #7d7d7d;
+    --ion-color-step-500: #898989;
+    --ion-color-step-550: #949494;
+    --ion-color-step-600: #a0a0a0;
+    --ion-color-step-650: #acacac;
+    --ion-color-step-700: #b8b8b8;
+    --ion-color-step-750: #c4c4c4;
+    --ion-color-step-800: #d0d0d0;
+    --ion-color-step-850: #dbdbdb;
+    --ion-color-step-900: #e7e7e7;
+    --ion-color-step-950: #f3f3f3;
+
+    --ion-item-background: #1e1e1e;
+
+    --ion-toolbar-background: #1f1f1f;
+
+    --ion-tab-bar-background: #1f1f1f;
+
+    --ion-card-background: #1e1e1e;
+  }
+}

AuthentesApp/src/zone-flags.ts

@@ -0,0 +1,6 @@
+/**
+ * Prevents Angular change detection from
+ * running with certain Web Component callbacks
+ */
+// eslint-disable-next-line no-underscore-dangle
+(window as any).__Zone_disable_customElements = true;