diff --git a/ui/ui-frontend-common/src/app/modules/animations/index.ts b/ui/ui-frontend-common/src/app/modules/animations/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2882ae9a171f325745718ea18766e39d1e7c196e
--- /dev/null
+++ b/ui/ui-frontend-common/src/app/modules/animations/index.ts
@@ -0,0 +1 @@
+export * from './vitamui-common-animations';
diff --git a/ui/ui-frontend-common/src/app/modules/animations/vitamui-common-animations.ts b/ui/ui-frontend-common/src/app/modules/animations/vitamui-common-animations.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0b02f6bcb5f2f753c1252f66689465355b9f0db7
--- /dev/null
+++ b/ui/ui-frontend-common/src/app/modules/animations/vitamui-common-animations.ts
@@ -0,0 +1,95 @@
+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)' })
+ )
+ ])
+]);
diff --git a/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.html b/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.html
index 4f2fb02a6903689aab9e2b6220fce316649e71ce..ba71b86da952479bd39291f8a986e672f81e04c8 100644
--- a/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.html
@@ -1,4 +1,4 @@
<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>
diff --git a/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.spec.ts b/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.spec.ts
index 9dfdc29f2e4ac882b547a11bc2bf71493f65ed66..ac1acf90891d77b15ec7c3b8980dc8bc8a8210bf 100644
--- a/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.spec.ts
+++ b/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');
});
});
diff --git a/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.ts b/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.ts
index db6102464604dc1134520e33ad0eadd9a68929cc..9193909e41c4ab7079b0023ebc02c14a5370f1d6 100644
--- a/ui/ui-frontend-common/src/app/modules/components/collapse/collapse.component.ts
+++ b/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';
}
}
diff --git a/ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.html b/ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.html
index 19172cbfcdd68673ee0d9052e1570617964ddd90..9c27e217531fbb1be20e4176225137dabcd0610e 100644
--- a/ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.html
@@ -1,3 +1,3 @@
<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>
diff --git a/ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.ts b/ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.ts
index 423d308ccc4930176deb9fb3a8f3146c4da3e429..be916699cffb3b8e3e0b2b9770f8a295b0b7d025 100644
--- a/ui/ui-frontend-common/src/app/modules/components/common-tooltip/common-tooltip.component.ts
+++ b/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 {
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html
index f92d5d6ceac933d7dbbca52d520eeadc9ef7dc6d..871521cd5f59799f80cbe372bc71602f9e340242 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html
+++ b/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>
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts
index 9a27263ed9ccceff8d6dc4894caa78b596a7d0b6..80049c8fbf2ce8c2d7343671546f5fc4d44067c1 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts
+++ b/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 {
diff --git a/ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.ts b/ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.ts
index 078ae9cc4be9aee53a5cce835fac1c4492582b4d..ed32db641721212058a29be123b14b218dc8a129 100644
--- a/ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.ts
+++ b/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 {
diff --git a/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.html b/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.html
index abeaf864f2ab44e893e9f261c3018300870dba10..bf7f1ac86bf7d318b9c823355998ff08c29a95b0 100644
--- a/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.html
@@ -1,5 +1,5 @@
<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>
diff --git a/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.ts b/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.ts
index eb956bfb8766a96c2e20da7dd194eb5b010228e6..0aa8512118039cb17191c6ac995d89cd806bef85 100644
--- a/ui/ui-frontend-common/src/app/modules/components/stepper/stepper.component.ts
+++ b/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 {
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-field-error/vitamui-field-error.component.ts b/ui/ui-frontend-common/src/app/modules/components/vitamui-field-error/vitamui-field-error.component.ts
index 94b08052b5b3b4370c3e5c20867f756672a8828a..d1a5fa3f94aacd389f95418297c8055a6f4c8b0d 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-field-error/vitamui-field-error.component.ts
+++ b/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 {
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-error.component.ts b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-error.component.ts
index 5ba53b05b9982e5ca0663330f5cad653191f3eba..cf3d8dc36ed817a5ac04521aeb82bca4b9c0aeda 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-error.component.ts
+++ b/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 {
diff --git a/ui/ui-frontend-common/src/app/modules/directives/tooltip/tooltip.component.ts b/ui/ui-frontend-common/src/app/modules/directives/tooltip/tooltip.component.ts
index 6572a386e207417e0bc9903f2de24b2a475946cc..e883a40d4969da796c03a269a3bd50c6baf2510a 100644
--- a/ui/ui-frontend-common/src/app/modules/directives/tooltip/tooltip.component.ts
+++ b/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
})
diff --git a/ui/ui-frontend-common/src/app/modules/index.ts b/ui/ui-frontend-common/src/app/modules/index.ts
index 643013245ebfe6860dd509adf5a042693f0797af..ef90f0d7576571dcc2b2745b6291ee65a84db4e7 100644
--- a/ui/ui-frontend-common/src/app/modules/index.ts
+++ b/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';
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.html
index 69cbe71da7c244aa22f6dfaf818e03b621f02af7..99aec6c0fcc1717beec3850ad5ec404a1999f005 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.html
+++ b/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)">
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.ts
index 79b31e7267eeed3ba5195286e9fcc65e820313f7..7e5c55fdf105f6a43e72a0d5b7730168658d8994 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.ts
+++ b/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 {
diff --git a/ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.ts b/ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.ts
index cdddb95aeff7295fc05e582ffd008e4f0b11a975..80099605e0dd083035bba450ea304df380fb2121 100644
--- a/ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.ts
+++ b/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 {
diff --git a/ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.ts b/ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.ts
index 1fafb74060adae2bdba3ef84b5e70da83e21c81c..4090886f4dc9472113ddf50e72a93a1a0e1a02cc 100644
--- a/ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.ts
+++ b/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 {
diff --git a/ui/ui-frontend/projects/identity/src/app/hierarchy/hierarchy-create/hierarchy-create.component.ts b/ui/ui-frontend/projects/identity/src/app/hierarchy/hierarchy-create/hierarchy-create.component.ts
index 89e02cb0abf5661b83cdce6c8f2ab63fc199e605..992741f5edc82a27bcc86cfca8be2156d1a20782 100644
--- a/ui/ui-frontend/projects/identity/src/app/hierarchy/hierarchy-create/hierarchy-create.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/hierarchy/hierarchy-create/hierarchy-create.component.ts
@@ -34,9 +34,8 @@
* 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 { AuthService, buildValidators, ConfirmDialogService } from 'ui-frontend-common';
+import { AuthService, buildValidators, collapseAnimation, ConfirmDialogService, rotateAnimation } 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';
@@ -49,17 +48,8 @@ import { HierarchyService } from '../hierarchy.service';
templateUrl: './hierarchy-create.component.html',
styleUrls: ['./hierarchy-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 HierarchyCreateComponent implements OnInit, OnDestroy {
diff --git a/ui/ui-frontend/projects/identity/src/app/profile/profile-create/profile-create.component.ts b/ui/ui-frontend/projects/identity/src/app/profile/profile-create/profile-create.component.ts
index 854e5d67e11bcd8ecb41add26429c390cd3aaf24..7c7a6973572a6dfa68b6c90e9a892ba74d635a6c 100644
--- a/ui/ui-frontend/projects/identity/src/app/profile/profile-create/profile-create.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/profile/profile-create/profile-create.component.ts
@@ -36,10 +36,9 @@
*/
import { Subscription } from 'rxjs';
import {
- ApplicationId, AuthService, AuthUser, buildValidators, ConfirmDialogService, Group, Profile, Role
+ ApplicationId, AuthService, AuthUser, buildValidators, collapseAnimation, ConfirmDialogService, Group, Profile, Role
} 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';
@@ -53,11 +52,7 @@ import { ProfileValidators } from '../profile.validators';
templateUrl: './profile-create.component.html',
styleUrls: ['./profile-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)')),
- ]),
+ collapseAnimation,
]
})
export class ProfileCreateComponent implements OnInit, OnDestroy {
diff --git a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.html b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.html
index 3f245b7af491987a6c3426bab153267401731756..636e8f14cc6cc998057994d68fdbfa3e6bf34fc7 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.html
@@ -20,7 +20,7 @@
<div class="d-flex align-self-stretch align-items-center w-100" (click)="updateGroup(group?.id,group?.name, row)">{{group?.name}}</div>
<button class="btn link underline" (click)="row.toggle()">{{row.state === 'collapsed' ? "Voir detail" : "Masquer detail"}}</button>
</div>
- <app-group-detail *ngIf="row.state === 'expanded'" [group]="group" [@expansionAnimation]></app-group-detail>
+ <app-group-detail *ngIf="row.state === 'expanded'" [group]="group" [@collapseAnimation]></app-group-detail>
</div>
</ng-container>
</div>
diff --git a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.ts b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.ts
index 506226ab71d5d4a70c982fed87ba831982bab8b1..7f16e9683a01c38d268c917f6268d020bf775b48 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-list/group-list.component.ts
@@ -36,9 +36,9 @@
*/
/* tslint:disable: no-use-before-declare */
-import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { collapseAnimation, rotateAnimation } from 'ui-frontend-common';
import { GroupSelection } from './../../group-selection.interface';
@Component({
@@ -46,17 +46,8 @@ import { GroupSelection } from './../../group-selection.interface';
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('expansionAnimation', [
- state('true', style({ height: '*', visibility: 'visible' })),
- state('void', style({ height: '0px', visibility: 'hidden' })),
- transition(':enter', animate('150ms')),
- transition(':leave', animate('150ms')),
- ]),
+ collapseAnimation,
+ rotateAnimation,
]
})
export class GroupListComponent implements OnInit {
diff --git a/ui/ui-frontend/projects/identity/src/app/user/user-list/user-list.component.ts b/ui/ui-frontend/projects/identity/src/app/user/user-list/user-list.component.ts
index 416d835d79252e401a7acd8141df593dc5f2ea81..4456317f629b41e25b88aa6e406f6d684b76bda5 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/user-list/user-list.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/user/user-list/user-list.component.ts
@@ -37,11 +37,10 @@
import { merge, Subject, Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import {
- AdminUserProfile, ApplicationId, AuthService, buildCriteriaFromSearch, Criterion, DEFAULT_PAGE_SIZE,
- Direction, InfiniteScrollTable, Operators, PageRequest, Role, SearchQuery, User
+ AdminUserProfile, ApplicationId, AuthService, buildCriteriaFromSearch, collapseAnimation, Criterion, DEFAULT_PAGE_SIZE,
+ Direction, InfiniteScrollTable, Operators, PageRequest, Role, rotateAnimation, SearchQuery, User
} from 'ui-frontend-common';
-import { animate, state, style, transition, trigger } from '@angular/animations';
import { HttpParams } from '@angular/common/http';
import {
Component, ElementRef, EventEmitter, Inject, Input, LOCALE_ID, OnDestroy, OnInit, Output,
@@ -59,17 +58,8 @@ const FILTER_DEBOUNCE_TIME_MS = 400;
templateUrl: './user-list.component.html',
styleUrls: ['./user-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 UserListComponent extends InfiniteScrollTable<User> implements OnDestroy, OnInit {
diff --git a/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.html b/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.html
index d713819a504e62ed70e7f0abdadcbbd83898626f..0195f1481548911197e880b7c1745a62d7015c73 100644
--- a/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.html
+++ b/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.html
@@ -65,12 +65,12 @@
<!--td [vitamuiCommonCollapseTriggerFor]="row">
<i class="vitamui-icon vitamui-icon-bank vitamui-row-icon"></i>
- <i class="material-icons caret" [@arrow]="row.state">keyboard_arrow_up</i>
+ <i class="material-icons caret" [@rotateAnimation]="row.state">keyboard_arrow_up</i>
</td-->
<td>
<i class="vitamui-icon vitamui-icon-contrat vitamui-row-icon status-badge"
[ngClass]="{'status-badge-green': accessContract?.status == 'ACTIVE', 'status-badge-grey':accessContract?.status == 'INACTIVE' }"></i>
- <!--i class="material-icons caret" [@arrow]="row.state">keyboard_arrow_up</i-->
+ <!--i class="material-icons caret" [@rotateAnimation]="row.state">keyboard_arrow_up</i-->
</td>
<td class="clickable" (click)="accessContractClick.emit(accessContract)">{{ accessContract?.name }}</td>
<td class="clickable" (click)="accessContractClick.emit(accessContract)">{{ accessContract?.identifier }}</td>
diff --git a/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.ts b/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.ts
index b45f50ae7612c915ce002020ed977745f830af0b..d3a7040cd2cd8088ae2d15ea8633215f7defe839 100644
--- a/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.ts
+++ b/ui/ui-frontend/projects/referential/src/app/access-contract/access-contract-list/access-contract-list.component.ts
@@ -34,12 +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 {animate, state, style, transition, trigger} from '@angular/animations';
import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
import {AccessContract} from 'projects/vitamui-library/src/public-api';
import {merge, Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
-import {DEFAULT_PAGE_SIZE, Direction, InfiniteScrollTable, PageRequest} from 'ui-frontend-common';
+import {collapseAnimation, DEFAULT_PAGE_SIZE, Direction, InfiniteScrollTable, PageRequest, rotateAnimation} from 'ui-frontend-common';
import {AccessContractService} from '../access-contract.service';
@@ -50,17 +49,8 @@ const FILTER_DEBOUNCE_TIME_MS = 400;
templateUrl: './access-contract-list.component.html',
styleUrls: ['./access-contract-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 AccessContractListComponent extends InfiniteScrollTable<AccessContract> implements OnDestroy, OnInit {
diff --git a/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.html b/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.html
index 86d79c02b4f0b2197531a2a585f00f30c1e6689c..00b230ff91f38cb132b9627b86e6603682ec92b8 100644
--- a/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.html
+++ b/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.html
@@ -65,7 +65,7 @@
<td>
<i class="vitamui-icon vitamui-icon-securite vitamui-row-icon status-badge"
[ngClass]="{'status-badge-green': context?.status == 'ACTIVE', 'status-badge-grey':context?.status == 'INACTIVE' }"></i>
- <!--i class="material-icons caret" [@arrow]="row.state">keyboard_arrow_up</i-->
+ <!--i class="material-icons caret" [@rotateAnimation]="row.state">keyboard_arrow_up</i-->
</td>
<td class="clickable" (click)="contextClick.emit(context)">{{ context?.name }}</td>
<td class="clickable" (click)="contextClick.emit(context)">{{ context?.identifier }}</td>
diff --git a/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.ts b/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.ts
index 3541b79e31f1b2b075924183a4521a777f60d88f..91d0eadf32169fc746dde839306b023514a5f9f6 100644
--- a/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.ts
+++ b/ui/ui-frontend/projects/referential/src/app/context/context-list/context-list.component.ts
@@ -34,7 +34,7 @@
* 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,
ElementRef,
@@ -53,11 +53,13 @@ import {
AdminUserProfile,
ApplicationId,
AuthService,
+ collapseAnimation,
DEFAULT_PAGE_SIZE,
Direction,
InfiniteScrollTable,
PageRequest,
Role,
+ rotateAnimation,
User
} from 'ui-frontend-common';
import {ContextService} from '../context.service';
@@ -69,17 +71,8 @@ const FILTER_DEBOUNCE_TIME_MS = 400;
templateUrl: './context-list.component.html',
styleUrls: ['./context-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 ContextListComponent extends InfiniteScrollTable<Context> implements OnDestroy, OnInit {
diff --git a/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.html b/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.html
index d608cb7558e515ec464568b83318144f8bd02c56..a5cc84f5ea06f2705a00949d0e4f1cc5e5829cc1 100644
--- a/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.html
+++ b/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.html
@@ -77,7 +77,7 @@
</mat-tab>
</mat-tab-group>
</div>
- <div class="vitamui-sidepanel-loading-overlay" *ngIf="loading" @fadeInOut>
+ <div class="vitamui-sidepanel-loading-overlay" *ngIf="loading" @fadeInOutAnimation>
<mat-spinner color="accent" diameter="40"></mat-spinner>
</div>
</div>
diff --git a/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.ts b/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.ts
index 0e4567997ce93fde07e1ecb1ab3bce91c964f31d..eea46f046efcc51ba7d2e549d1ff818e8e52eda2 100644
--- a/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.ts
+++ b/ui/ui-frontend/projects/referential/src/app/logbook-operation/logbook-operation-detail/logbook-operation-detail.component.ts
@@ -34,10 +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, style, transition, trigger } from '@angular/animations';
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
-import { AuthService, Event, LogbookService } from 'ui-frontend-common';
+import { AuthService, Event, fadeInOutAnimation, LogbookService } from 'ui-frontend-common';
@Component({
@@ -45,16 +44,7 @@ import { AuthService, Event, LogbookService } from 'ui-frontend-common';
templateUrl: './logbook-operation-detail.component.html',
styleUrls: ['./logbook-operation-detail.component.scss'],
animations: [
- trigger('fadeInOut', [
- transition(':enter', [
- style({ opacity: 0 }),
- animate('200ms', style({ opacity: 1 })),
- ]),
- transition(':leave', [
- style({ opacity: 1 }),
- animate('200ms', style({ opacity: 0 })),
- ]),
- ])
+ fadeInOutAnimation
]
})
export class LogbookOperationDetailComponent implements OnInit, OnChanges {
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html
index 0854dfe3d0c5f00cd931a2815e317c4bc856d95d..3b69e5c27a08321d5c82aee76890e541915525ea 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.html
@@ -130,7 +130,7 @@
<div class="d-flex align-items-center clickable">
<div class="col-2 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 [style.display]="'contents'">
<div class="col-3">{{ customer?.name }}</div>
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.ts b/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.ts
index 844a461bcfdf02d4aae13b392bab341051c92f88..8639dce59b7b0c182a076c6991940d8062df225a 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.ts
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/arrays/arrays.component.ts
@@ -1,23 +1,14 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
+
import { Component, OnInit } from '@angular/core';
-import { Direction, Group } from 'ui-frontend-common';
+import { collapseAnimation, Direction, Group, rotateAnimation } from 'ui-frontend-common';
@Component({
selector: 'app-arrays',
templateUrl: './arrays.component.html',
styleUrls: ['./arrays.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 ArraysComponent implements OnInit {