[US TRTL-584] add animations ts in common front end

ui/ui-frontend-common/src/app/modules/animations/index.ts

+export * from './vitamui-common-animations';

ui/ui-frontend-common/src/app/modules/animations/vitamui-common-animations.ts

+import { animate, keyframes, query, stagger, state, style, transition, trigger } from '@angular/animations';
+
+export const collapseAnimation = trigger('collapseAnimation', [
+  state('collapsed', style({ height: 0, visibility: 'hidden' })),
+  state('expanded', style({ height: '*' })),
+  transition('expanded <=> collapsed', animate('300ms ease-out')),
+]);
+
+export const rotateAnimation = trigger('rotateAnimation', [
+  state('collapsed', style({ transform: 'rotate(180deg)' })),
+  state('expanded', style({ transform: 'none' })),
+  transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
+]);
+
+export const rotateUpAnimation = trigger('rotateUpAnimation', [
+  state('true', style({ transform: 'none' })),
+  state('false', style({ transform: 'rotate(180deg)' })),
+  transition('true <=> false', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
+]);
+
+export const rotate90Animation = trigger('rotate90Animation', [
+  state('collapsed', style({ transform: 'rotate(-90deg)' })),
+  state('expanded', style({ transform: 'rotate(0deg)' })),
+  transition('expanded <=> collapsed', animate('200ms ease-out')),
+]);
+
+export const fadeInOutAnimation = trigger('fadeInOutAnimation', [
+  transition(':enter', [style({ opacity: 0 }), animate('200ms', style({ opacity: 1 }))]),
+  transition(':leave', [style({ opacity: 1 }), animate('200ms', style({ opacity: 0 }))]),
+]);
+
+export const slideDownAnimation = trigger('slideDownAnimation', [
+  state('*', style({ opacity: 1, transform: 'translateX(0)' })),
+  transition(':enter', [
+    style({
+      opacity: 0,
+      transform: 'translateY(-100%)'
+    }),
+    animate('100ms ease-out'),
+  ]),
+]);
+
+export const tooltipAnimation = trigger('tooltipAnimation', [
+  state('*', style({ opacity: 1, transform: 'translateX(0)' })),
+  transition(':enter', [
+    style({
+      opacity: 0,
+      transform: 'translateY(-100%)'
+    }),
+    animate('100ms ease-out'),
+  ]),
+]);
+
+export const opacityAnimation = trigger('opacityAnimation', [
+  state('close', style({})),
+  transition(':enter', [
+    animate('500ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
+      style({ opacity: 0 }),
+      style({ opacity: 1 }),
+    ])),
+  ]),
+  transition('* => close', [
+    animate('500ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
+      style({ opacity: 1 }),
+      style({ opacity: 0 }),
+    ])),
+  ]),
+]);
+
+export const transitionAnimation = trigger('transitionAnimation', [
+  state('previous', style({ height: '0px', visibility: 'hidden' })),
+  state('next', style({ height: '0px', visibility: 'hidden' })),
+  state('current', style({ height: '*', visibility: 'visible' })),
+  transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+]);
+
+export const slideAnimation = trigger('slideAnimation', [
+  transition(':enter', [
+    query('*', [
+      style({ opacity: 0, transform: 'translateX(-20px)' }),
+      stagger(50, [
+        animate(
+          '50ms',
+          style({ opacity: 1, transform: 'none' })
+        )
+      ])
+    ])
+  ]),
+  transition(':leave', [
+    animate(
+      '250ms',
+      style({ opacity: 0, transform: 'translateX(+100px)' })
+    )
+  ])
+]);

ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.html

 <div class="collapse-title" (click)="toggle()">
-    <i class="material-icons" [@rotateAnimation]="collapseState">keyboard_arrow_down</i> {{collapseTitle}}
+    <i class="material-icons" [@rotate90Animation]="collapseState">keyboard_arrow_down</i> {{collapseTitle}}
 </div>
 <div class="collapse-content" [@collapseAnimation]="collapseState"><ng-content></ng-content></div>

ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.spec.ts

@@ -86,16 +86,16 @@ describe('CollapseComponent', () => {
   });
 
   it('should toggle the content on click on the title', () => {
-    expect(testhost.component.collapseState).toBe('expand');
+    expect(testhost.component.collapseState).toBe('expanded');
     const elTitle = fixture.nativeElement.querySelector('.collapse-title');
 
     elTitle.click();
     fixture.detectChanges();
-    expect(testhost.component.collapseState).toBe('collapse');
+    expect(testhost.component.collapseState).toBe('collapsed');
 
     elTitle.click();
     fixture.detectChanges();
-    expect(testhost.component.collapseState).toBe('expand');
+    expect(testhost.component.collapseState).toBe('expanded');
 
   });
 });

ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.ts

@@ -34,8 +34,9 @@
  * The fact that you are presently reading this means that you have had
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
-import { animate, state, style, transition, trigger } from '@angular/animations';
+
 import { Component, HostBinding, Input, OnInit } from '@angular/core';
+import { collapseAnimation, rotate90Animation } from '../../animations/vitamui-common-animations';
 
 @Component({
   selector: 'vitamui-common-collapse',
@@ -43,16 +44,8 @@ import { Component, HostBinding, Input, OnInit } from '@angular/core';
   styleUrls: ['./collapse.component.scss'],
   exportAs: 'vitamuiCommonCollapse',
   animations: [
-    trigger('collapseAnimation', [
-      state('collapse', style({ height: 0, visibility: 'hidden' })),
-      state('expand', style({ height: '*' })),
-      transition('expand <=> collapse', animate('200ms ease-out')),
-    ]),
-    trigger('rotateAnimation', [
-      state('collapse', style({ transform: 'rotate(-90deg)' })),
-      state('expand', style({ transform: 'rotate(0deg)' })),
-      transition('expand <=> collapse', animate('200ms ease-out')),
-    ]),
+    collapseAnimation,
+    rotate90Animation,
   ]
 })
 export class CollapseComponent implements OnInit {
@@ -61,7 +54,7 @@ export class CollapseComponent implements OnInit {
 
   @Input() collapseTitle: string;
 
-  @Input() collapseState = 'expand';
+  @Input() collapseState = 'expanded';
 
   constructor() { }
 
@@ -69,7 +62,7 @@ export class CollapseComponent implements OnInit {
   }
 
   toggle() {
-    this.collapseState = this.collapseState === 'expand' ? 'collapse' : 'expand';
+    this.collapseState = this.collapseState === 'expanded' ? 'collapsed' : 'expanded';
   }
 
 }

ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.html

   <div class="d-flex">
-    <div class="tooltip-custom {{className}}" [class.outline]="outline" @tooltip>{{ text }}</div>
+    <div class="tooltip-custom {{className}}" [class.outline]="outline" @fadeInOutAnimation>{{ text }}</div>
   </div>

ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.ts

@@ -36,21 +36,14 @@
  */
 import { animate, style, transition, trigger } from '@angular/animations';
 import { Component, OnInit } from '@angular/core';
+import { fadeInOutAnimation } from '../../animations';
 
 @Component({
   selector: 'vitamui-common-tooltip',
   templateUrl: './common-tooltip.component.html',
   styleUrls: ['./common-tooltip.component.scss'],
   animations: [
-    trigger('tooltip', [
-      transition(':enter', [
-        style({ opacity: 0 }),
-        animate(300, style({ opacity: 1 })),
-      ]),
-      transition(':leave', [
-        animate(300, style({ opacity: 0 })),
-      ]),
-    ]),
+    fadeInOutAnimation,
   ],
 })
 export class CommonTooltipComponent implements OnInit {

ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html

@@ -35,7 +35,7 @@
             <mat-selection-list id="searchResults"
                 class="py-3 overflow"
                 (selectionChange)="openApplication($event.option.value)">
-                <mat-list-option [value]="app" @slideLeftRight *ngFor="let app of filteredApplications">
+                <mat-list-option [value]="app" @slideAnimation *ngFor="let app of filteredApplications">
                     <vitamui-common-menu-application-tile [application]="app" [hlCriteria]="criteria"></vitamui-common-menu-application-tile>
                 </mat-list-option>
             </mat-selection-list>

ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts

@@ -5,6 +5,7 @@ import { MatTabChangeEvent } from '@angular/material/tabs';
 import { Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { opacityAnimation , slideAnimation} from '../../../animations';
 import { ApplicationService } from '../../../application.service';
 import { Category } from '../../../models';
 import { Application } from '../../../models/application/application.interface';
@@ -19,40 +20,8 @@ import { MenuOverlayRef } from './menu-overlay-ref';
   templateUrl: './menu.component.html',
   styleUrls: ['./menu.component.scss'],
   animations: [
-    trigger('opacityAnimation', [
-      state('close', style({})),
-      transition(':enter', [
-        animate('500ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
-          style({ opacity: 0 }),
-          style({ opacity: 1 }),
-        ])),
-      ]),
-      transition('* => close', [
-        animate('500ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
-          style({ opacity: 1 }),
-          style({ opacity: 0 }),
-        ])),
-      ]),
-    ]),
-    trigger('slideLeftRight', [
-      transition(':enter', [
-        query('*', [
-          style({ opacity: 0, transform: 'translateX(-20px)' }),
-          stagger(50, [
-            animate(
-              '50ms',
-              style({ opacity: 1, transform: 'none' })
-            )
-          ])
-        ])
-      ]),
-      transition(':leave', [
-        animate(
-          '250ms',
-          style({ opacity: 0, transform: 'translateX(+100px)' })
-        )
-      ])
-    ])
+    opacityAnimation,
+    slideAnimation,
   ]
 })
 export class MenuComponent implements OnInit, AfterViewInit {

ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.ts

@@ -34,9 +34,10 @@
  * The fact that you are presently reading this means that you have had
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
-import { animate, state, style, transition, trigger } from '@angular/animations';
+
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { rotateUpAnimation } from '../../animations/vitamui-common-animations';
 
 import { ApplicationId } from '../../application-id.enum';
 import { AuthService } from '../../auth.service';
@@ -50,11 +51,7 @@ import { MenuOption } from './customer-menu/menu-option.interface';
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss'],
   animations: [
-    trigger('arrowUp', [
-      state('true', style({ transform: 'none' })),
-      state('false', style({ transform: 'rotate(180deg)' })),
-      transition('true <=> false', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
-    ]),
+    rotateUpAnimation,
   ]
 })
 export class NavbarComponent {

ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.html

 <ng-container *ngFor="let step of steps; let i = index; let isLast = last">
-  <div class="step" [@stepTransition]="_getAnimationDirection(i)" [attr.tabindex]="selectedIndex === i ? 0 : null"
+  <div class="step" [@transitionAnimation]="_getAnimationDirection(i)" [attr.tabindex]="selectedIndex === i ? 0 : null"
     [attr.aria-expanded]="selectedIndex === i">
     <ng-container [ngTemplateOutlet]="step.content"></ng-container>
   </div>

ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.ts

@@ -37,6 +37,7 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { CdkStepper } from '@angular/cdk/stepper';
 import { Component } from '@angular/core';
+import { transitionAnimation } from '../../animations/vitamui-common-animations';
 
 @Component({
   selector: 'vitamui-common-stepper',
@@ -46,12 +47,7 @@ import { Component } from '@angular/core';
   // by other components.
   providers: [{ provide: CdkStepper, useExisting: StepperComponent }],
   animations: [
-    trigger('stepTransition', [
-      state('previous', style({ height: '0px', visibility: 'hidden' })),
-      state('next', style({ height: '0px', visibility: 'hidden' })),
-      state('current', style({ height: '*', visibility: 'visible' })),
-      transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-    ]),
+    transitionAnimation,
   ]
 })
 export class StepperComponent extends CdkStepper {

ui/ui-frontend-common/src/app/modules/components/vitamui-field-error/vitamui-field-error.component.ts

@@ -34,24 +34,16 @@
  * The fact that you are presently reading this means that you have had
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
-import { animate, state, style, transition, trigger } from '@angular/animations';
+
 import { Component, Input } from '@angular/core';
+import { slideDownAnimation } from '../../animations/vitamui-common-animations';
 
 @Component({
   selector: 'vitamui-common-field-error',
   template: `<div *ngIf="show" @slideDownAnimation><ng-content></ng-content></div>`,
   styleUrls: ['./vitamui-field-error.component.scss'],
   animations: [
-    trigger('slideDownAnimation', [
-      state('*', style({ opacity: 1, transform: 'translateY(0)' })),
-      transition(':enter', [
-        style({
-          opacity: 0,
-          transform: 'translateY(-100%)'
-        }),
-        animate('100ms ease-out'),
-      ]),
-    ]),
+    slideDownAnimation
   ]
 })
 export class VitamUIFieldErrorComponent {

ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-error.component.ts

@@ -34,24 +34,16 @@
  * The fact that you are presently reading this means that you have had
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
-import { animate, state, style, transition, trigger } from '@angular/animations';
+
 import { Component, HostBinding, OnInit } from '@angular/core';
+import { slideDownAnimation } from '../../animations/vitamui-common-animations';
 
 @Component({
   selector: 'vitamui-common-input-error',
   template: `<ng-content></ng-content>`,
   styleUrls: ['./vitamui-input-error.component.scss'],
   animations: [
-    trigger('slideDownAnimation', [
-      state('*', style({ opacity: 1, transform: 'translateX(0)' })),
-      transition(':enter', [
-        style({
-          opacity: 0,
-          transform: 'translateY(-100%)'
-        }),
-        animate('100ms ease-out'),
-      ]),
-    ]),
+    slideDownAnimation,
   ]
 })
 export class VitamUIInputErrorComponent implements OnInit {

ui/ui-frontend-common/src/app/modules/directives/tooltip/tooltip.component.ts

@@ -34,8 +34,9 @@
  * The fact that you are presently reading this means that you have had
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
-import { animate, keyframes, style, transition, trigger } from '@angular/animations';
+
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject } from '@angular/core';
+import { tooltipAnimation } from '../../animations';
 
 import { VitamUITooltipMessage, VITAMUI_TOOLTIP_MESSAGE } from '../../injection-tokens';
 
@@ -44,15 +45,7 @@ import { VitamUITooltipMessage, VITAMUI_TOOLTIP_MESSAGE } from '../../injection-
   templateUrl: './tooltip.component.html',
   styleUrls: ['./tooltip.component.scss'],
   animations: [
-    trigger('tooltipAnimation', [
-      transition(':enter', [
-        animate('300ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
-          style({ opacity: 0, transform: 'scale(0)', offset: 0 }),
-          style({ opacity: 0.5, transform: 'scale(1.1)', offset: 0.7 }),
-          style({ opacity: 1, transform: 'scale(1)', offset: 1 }),
-        ])),
-      ]),
-    ]),
+    tooltipAnimation,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })

ui/ui-frontend-common/src/app/modules/index.ts

@@ -38,6 +38,7 @@ export * from './models/index';
 
 export * from './account/index';
 export * from './active-tenant.guard';
+export * from './animations/index';
 export * from './api/application-api.service';
 export * from './api/logbook-api.service';
 export * from './api/profile-api.service';

ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.html

@@ -16,7 +16,7 @@
             <div class="d-flex align-items-center clickable">
               <div class="col-1 d-flex" (click)="row.toggle()">
                 <i class="vitamui-icon vitamui-icon-bank"></i>
-                <i class="material-icons caret ml-1" [style.fontSize.px]="20" [@arrow]="row.state">keyboard_arrow_up</i>
+                <i class="material-icons caret ml-1" [style.fontSize.px]="20" [@rotateAnimation]="row.state">keyboard_arrow_up</i>
               </div>
 
               <div (click)="customerClick.emit(customer)" class="col-2 d-flex align-items-center align-self-stretch">{{ customer?.code }}</div>
@@ -36,7 +36,7 @@
           </div>
 
           <app-owner-list
-            [@expansion]="row.state"
+            [@collapseAnimation]="row.state"
             [customer]="customer"
             (ownerClick)="ownerClick.emit($event)"
             (tenantClick)="tenantClick.emit($event)">

ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.ts

@@ -34,13 +34,20 @@
  * The fact that you are presently reading this means that you have had
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
-import { animate, state, style, transition, trigger } from '@angular/animations';
+
 import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
-import { Customer, DEFAULT_PAGE_SIZE, Direction, InfiniteScrollTable, Owner, PageRequest, Tenant } from 'ui-frontend-common';
+import { collapseAnimation,
+  Customer,
+  DEFAULT_PAGE_SIZE,
+  Direction,
+  InfiniteScrollTable,
+  Owner, PageRequest,
+  rotateAnimation,
+  Tenant } from 'ui-frontend-common';
 import { CustomerService } from '../../core/customer.service';
 import { CustomerDataService } from '../customer.data.service';
 import { OwnerCreateComponent } from '../owner-create/owner-create.component';
@@ -52,17 +59,8 @@ import { CustomerListService } from './customer-list.service';
   templateUrl: './customer-list.component.html',
   styleUrls: ['./customer-list.component.scss'],
   animations: [
-    trigger('expansion', [
-      state('collapsed', style({height: '0px', visibility: 'hidden', opacity: '0'})),
-      state('expanded', style({height: '*', visibility: 'visible',  opacity: '1'})),
-      transition('expanded <=> collapsed', animate('150ms cubic-bezier(0.4,0.0,0.2,1)')),
-    ]),
-
-    trigger('arrow', [
-      state('collapsed', style({transform: 'rotate(180deg)'})),
-      state('expanded', style({transform: 'none'})),
-      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
-    ]),
+   collapseAnimation,
+   rotateAnimation,
   ]
 })
 export class CustomerListComponent extends InfiniteScrollTable<Customer> implements OnDestroy, OnInit {

ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.ts

@@ -34,13 +34,11 @@
  * The fact that you are presently reading this means that you have had
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
-import { Subscription } from 'rxjs';
-import { AuthService, buildValidators, ConfirmDialogService } from 'ui-frontend-common';
-
-import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Subscription } from 'rxjs';
+import { AuthService, buildValidators, collapseAnimation, ConfirmDialogService , rotateAnimation} from 'ui-frontend-common';
 
 
 import { GroupService } from '../group.service';
@@ -52,17 +50,8 @@ import { GroupValidators } from '../group.validators';
   templateUrl: './group-create.component.html',
   styleUrls: ['./group-create.component.scss'],
   animations: [
-    trigger('expansion', [
-      state('collapsed', style({height: '0px', visibility: 'hidden'})),
-      state('expanded', style({height: '*', visibility: 'visible'})),
-      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
-    ]),
-
-    trigger('arrow', [
-      state('collapsed', style({transform: 'rotate(180deg)'})),
-      state('expanded', style({transform: 'none'})),
-      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
-    ]),
+    collapseAnimation,
+    rotateAnimation,
   ]
 })
 export class GroupCreateComponent implements OnInit, OnDestroy {

ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.ts

@@ -34,17 +34,19 @@
  * The fact that you are presently reading this means that you have had
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
-import { animate, state, style, transition, trigger } from '@angular/animations';
+
 import {Component, EventEmitter, Inject, Input, LOCALE_ID, OnDestroy, OnInit, Output} from '@angular/core';
 import {merge, Subject, Subscription} from 'rxjs';
 
 import {
   buildCriteriaFromSearch,
-  DEFAULT_PAGE_SIZE, Direction,
+  collapseAnimation, DEFAULT_PAGE_SIZE,
+  Direction,
   Group,
   InfiniteScrollTable,
   PageRequest,
-  SearchQuery
+  rotateAnimation,
+  SearchQuery,
 } from 'ui-frontend-common';
 import { GroupService } from '../group.service';
 import {buildCriteriaFromGroupFilters} from './group-criteria-builder.util';
@@ -54,17 +56,8 @@ import {buildCriteriaFromGroupFilters} from './group-criteria-builder.util';
   templateUrl: './group-list.component.html',
   styleUrls: ['./group-list.component.scss'],
   animations: [
-    trigger('expansion', [
-      state('collapsed', style({height: '0px', visibility: 'hidden'})),
-      state('expanded', style({height: '*', visibility: 'visible'})),
-      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
-    ]),
-
-    trigger('arrow', [
-      state('collapsed', style({transform: 'rotate(180deg)'})),
-      state('expanded', style({transform: 'none'})),
-      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
-    ]),
+    collapseAnimation,
+    rotateAnimation,
   ]
 })
 export class GroupListComponent extends InfiniteScrollTable<Group> implements OnDestroy, OnInit {