[add] NG Animation demo

applications/prisme/src/app/components/misc/animations/animations.feature.scss

@@ -1,13 +1,27 @@
 @import "~@lucca-front/scss/src/theming.overridable";
 @import "~@lucca-front/scss/src/mixins";
 
-.grid-md3 {
-	cursor: pointer;
-	text-align: center;
-}
-
 .demo-animation {
 	padding: 1rem;
 	text-align: center;
 	margin: .5rem 0 .25rem;
 }
+
+.animated-block {
+	border: 1px solid grey;
+	padding: 0.5em 1em;
+	height: 60px;
+	width: 100%;
+}
+
+.scss-demo-block {
+	text-align: center;
+	cursor: pointer;
+}
+
+.ng-demo-block {
+	height: 100px;
+	h3 .button {
+		margin-left: 1rem;
+	}
+}

applications/prisme/src/app/components/misc/animations/animations.feature.ts

@@ -2,6 +2,9 @@ import { Component } from '@angular/core';
 import { IFeatureInfos, ThemeDocumentationService } from '@prisme/common';
 import { EnterExampleComponent } from './enter/enter.example';
 import { ExitExampleComponent } from './exit/exit.example';
+import { NgLuFadeAnimationFactoryExample } from './ng-lu-fade-animation-factory/ng-lu-fade-animation-factory.example';
+import { NgLuSlideAnimationFactoryExample } from './ng-lu-slide-animation-factory/ng-lu-slide-animation-factory.example';
+import { NgLuScaleAnimationFactoryExample } from './ng-lu-scale-animation-factory/ng-lu-scale-animation-factory.example';
 declare var require: any;
 
 @Component({
@@ -12,21 +15,39 @@ declare var require: any;
 export class AnimationsFeature {
 	infos: IFeatureInfos = {
 		title: 'Animations',
-		packages: ['SCSS'],
+		packages: ['SCSS', 'NG'],
 		description: "Les animations servent à créer une transition sur un élément au moment de son apparition. Elles doivent être utilisées de manière judicieuse et servir la compréhension de l'interaction.",
 		examples: [
 			{
-				title: 'Apparition',
+				title: '[SCSS] Apparition',
 				description: `Cliquez pour voir l'animation`,
 				component: EnterExampleComponent,
 				code: require('!!prismjs-loader?lang=markup!./enter/enter.example.html'),
 			},
 			{
-				title: 'Disparition',
+				title: '[SCSS] Disparition',
 				description: `Cliquez pour voir l'animation`,
 				component: ExitExampleComponent,
 				code: require('!!prismjs-loader?lang=markup!./exit/exit.example.html'),
 			},
+			{
+				title: '[NG] LuFadeAnimationFactory',
+				component: NgLuFadeAnimationFactoryExample,
+				code: require('!!prismjs-loader?lang=markup!./ng-lu-fade-animation-factory/ng-lu-fade-animation-factory.example.html'),
+				tsCode: require('!!prismjs-loader?lang=typescript!./ng-lu-fade-animation-factory/ng-lu-fade-animation-factory.example.ts')
+			},
+			{
+				title: '[NG] LuSlideAnimationFactory',
+				component: NgLuSlideAnimationFactoryExample,
+				code: require('!!prismjs-loader?lang=markup!./ng-lu-slide-animation-factory/ng-lu-slide-animation-factory.example.html'),
+				tsCode: require('!!prismjs-loader?lang=typescript!./ng-lu-slide-animation-factory/ng-lu-slide-animation-factory.example.ts')
+			},
+			{
+				title: '[NG] LuScaleAnimationFactory',
+				component: NgLuScaleAnimationFactoryExample,
+				code: require('!!prismjs-loader?lang=markup!./ng-lu-scale-animation-factory/ng-lu-scale-animation-factory.example.html'),
+				tsCode: require('!!prismjs-loader?lang=typescript!./ng-lu-scale-animation-factory/ng-lu-scale-animation-factory.example.ts')
+			},
 		],
 		theme: this.themeService.get('animations')
 	};

applications/prisme/src/app/components/misc/animations/animations.module.ts

@@ -3,6 +3,9 @@ import { CommonModule } from '@prisme/common';
 import { AnimationsFeature } from './animations.feature';
 import { EnterExampleComponent } from './enter/enter.example';
 import { ExitExampleComponent } from './exit/exit.example';
+import { NgLuFadeAnimationFactoryExample } from './ng-lu-fade-animation-factory/ng-lu-fade-animation-factory.example';
+import { NgLuSlideAnimationFactoryExample } from './ng-lu-slide-animation-factory/ng-lu-slide-animation-factory.example';
+import { NgLuScaleAnimationFactoryExample } from './ng-lu-scale-animation-factory/ng-lu-scale-animation-factory.example';
 
 @NgModule({
 	imports: [
@@ -11,11 +14,17 @@ import { ExitExampleComponent } from './exit/exit.example';
 	entryComponents: [
 		EnterExampleComponent,
 		ExitExampleComponent,
+		NgLuFadeAnimationFactoryExample,
+		NgLuSlideAnimationFactoryExample,
+		NgLuScaleAnimationFactoryExample,
 	],
 	declarations: [
 		EnterExampleComponent,
 		ExitExampleComponent,
 		AnimationsFeature,
+		NgLuFadeAnimationFactoryExample,
+		NgLuSlideAnimationFactoryExample,
+		NgLuScaleAnimationFactoryExample,
 	]
 })
 export class AnimationsModule { }

applications/prisme/src/app/components/misc/animations/enter/enter.example.html

@@ -1,19 +1,19 @@
 <section class="contentSection">
 	<h3>Slides</h3>
 	<div class="grid">
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation u-animatedSlideIn">Top</div>
 			<code class="code">u-animatedSlideInTop</code>
 		</div>
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation u-animatedSlideInRight">Right</div>
 			<code class="code">u-animatedSlideInRight</code>
 		</div>
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation u-animatedSlideInBottom">Bottom</div>
 			<code class="code">u-animatedSlideInBottom</code>
 		</div>
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation u-animatedSlideInLeft">Left</div>
 			<code class="code">u-animatedSlideInLeft</code>
 		</div>
@@ -23,23 +23,23 @@ <h3>Slides</h3>
 <section class="contentSection">
 	<h3>Scale</h3>
 	<div class="grid">
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation u-animatedScaleIn">Center</div>
 			<code class="code">u-animatedScaleIn</code>
 		</div>
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation u-animatedScaleInTop">Top</div>
 			<code class="code">u-animatedScaleInTop</code>
 		</div>
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation u-animatedScaleInRight">Right</div>
 			<code class="code">u-animatedScaleInRight</code>
 		</div>
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation u-animatedScaleInBottom">Bottom</div>
 			<code class="code">u-animatedScaleInBottom</code>
 		</div>
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation u-animatedScaleInLeft">Left</div>
 			<code class="code">u-animatedScaleInLeft</code>
 		</div>
@@ -49,7 +49,7 @@ <h3>Scale</h3>
 <section class="contentSection">
 	<h3>Fade</h3>
 	<div class="grid">
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation u-animatedFadeIn">Center</div>
 			<code class="code">u-animatedFadeIn</code>
 		</div>

applications/prisme/src/app/components/misc/animations/exit/exit.example.html

@@ -1,19 +1,19 @@
 <section class="contentSection">
 	<h3>Slide</h3>
 	<div class="grid">
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation">Top</div>
 			<code class="code">u-animatedSlideOutTop</code>
 		</div>
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation">Right</div>
 			<code class="code">u-animatedSlideOutRight</code>
 		</div>
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation">Bottom</div>
 			<code class="code">u-animatedSlideOutBottom</code>
 		</div>
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation">Left</div>
 			<code class="code">u-animatedSlideOutLeft</code>
 		</div>
@@ -22,23 +22,23 @@ <h3>Slide</h3>
 <section class="contentSection">
 	<h3>Scale</h3>
 	<div class="grid">
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation">Center</div>
 			<code class="code">u-animatedScaleOut</code>
 		</div>
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation">Top</div>
 			<code class="code">u-animatedScaleOutTop</code>
 		</div>
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation">Right</div>
 			<code class="code">u-animatedScaleOutRight</code>
 		</div>
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation">Bottom</div>
 			<code class="code">u-animatedScaleOutBottom</code>
 		</div>
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation">Left</div>
 			<code class="code">u-animatedScaleOutLeft</code>
 		</div>
@@ -47,7 +47,7 @@ <h3>Scale</h3>
 <section class="contentSection">
 	<h3>Fade</h3>
 	<div class="grid">
-		<div class="grid-md3" (click)="reloadAnimation($event.currentTarget)">
+		<div class="grid-md3 scss-demo-block" (click)="reloadAnimation($event.currentTarget)">
 			<div class="card demo-animation">Center</div>
 			<code class="code">u-animatedFadeOut</code>
 		</div>

applications/prisme/src/app/components/misc/animations/ng-lu-fade-animation-factory/ng-lu-fade-animation-factory.example.html

@@ -0,0 +1,8 @@
+<div class="grid">
+	<div class="grid-md3 ng-demo-block">
+		<h3 class="u-marginReset">Fade
+			<button class="button size-small" (click)="fading=!fading">{{ fading ? 'Show':'Hide'}}</button>
+		</h3>
+		<div class="animated-block" [@fadeAnimation] *ngIf="!fading">Fade</div>
+	</div>
+</div>

applications/prisme/src/app/components/misc/animations/ng-lu-fade-animation-factory/ng-lu-fade-animation-factory.example.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { luFadeAnimationFactory } from '@lucca-front/ng';
+
+@Component({
+	selector: 'pri-ng-lu-fade-animation-factory-example',
+	templateUrl: './ng-lu-fade-animation-factory.example.html',
+	styleUrls: ['../animations.feature.scss'],
+	animations: [luFadeAnimationFactory()]
+})
+export class NgLuFadeAnimationFactoryExample {
+	fading = false;
+}

applications/prisme/src/app/components/misc/animations/ng-lu-scale-animation-factory/ng-lu-scale-animation-factory.example.html

@@ -0,0 +1,31 @@
+<div class="grid">
+	<div class="grid-md3 ng-demo-block">
+		<h3 class="u-marginReset">Scale
+			<button class="button size-small" (click)="scalingCenter=!scalingCenter">{{ scalingCenter ? 'Show':'Hide'}}</button>
+		</h3>
+		<div class="animated-block" [@scaleAnimation] *ngIf="!scalingCenter">Scale from center</div>
+	</div>
+	<div class="grid-md3 ng-demo-block">
+		<h3 class="u-marginReset">Scale Left <button class="button size-small"
+				(click)="scalingLeft=!scalingLeft">{{ scalingLeft ? 'Show':'Hide'}}</button></h3>
+		<div class="animated-block" [@scaleAnimation]="'left'" *ngIf="!scalingLeft">Scale from left</div>
+	</div>
+	<div class="grid-md3 ng-demo-block">
+		<h3 class="u-marginReset">Scale Right
+			<button class="button size-small" (click)="scalingRight=!scalingRight">{{ scalingRight ? 'Show':'Hide'}}</button>
+		</h3>
+		<div class="animated-block" [@scaleAnimation]="'right'" *ngIf="!scalingRight">Scale from right</div>
+	</div>
+	<div class="grid-md3 ng-demo-block">
+		<h3 class="u-marginReset">Scale Top
+			<button class="button size-small" (click)="scalingTop=!scalingTop">{{ scalingTop ? 'Show':'Hide'}}</button>
+		</h3>
+		<div class="animated-block" [@scaleAnimation]="'top'" *ngIf="!scalingTop">Scale from top</div>
+	</div>
+	<div class="grid-md3 ng-demo-block">
+		<h3 class="u-marginReset">Scale Bottom
+			<button class="button size-small" (click)="scalingBottom=!scalingBottom">{{ scalingBottom ? 'Show':'Hide'}}</button>
+		</h3>
+		<div class="animated-block" [@scaleAnimation]="'bottom'" *ngIf="!scalingBottom">Scale from bottom</div>
+	</div>
+</div>

applications/prisme/src/app/components/misc/animations/ng-lu-scale-animation-factory/ng-lu-scale-animation-factory.example.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { luScaleAnimationFactory } from '@lucca-front/ng';
+
+@Component({
+	selector: 'pri-ng-lu-scale-animation-factory-example',
+	templateUrl: './ng-lu-scale-animation-factory.example.html',
+	styleUrls: ['../animations.feature.scss'],
+	animations: [ luScaleAnimationFactory() ]
+})
+export class NgLuScaleAnimationFactoryExample {
+	scalingLeft = false;
+	scalingRight = false;
+	scalingTop = false;
+	scalingBottom = false;
+	scalingCenter = false;
+}

applications/prisme/src/app/components/misc/animations/ng-lu-slide-animation-factory/ng-lu-slide-animation-factory.example.html

@@ -0,0 +1,25 @@
+<div class="grid">
+	<div class="grid-md3 ng-demo-block">
+		<h3 class="u-marginReset">Slide Left <button class="button size-small"
+				(click)="slidingLeft=!slidingLeft">{{ slidingLeft ? 'Show':'Hide'}}</button></h3>
+		<div class="animated-block" [@slideAnimation]="'left'" *ngIf="!slidingLeft">Slide from left</div>
+	</div>
+	<div class="grid-md3 ng-demo-block">
+		<h3 class="u-marginReset">Slide Right
+			<button class="button size-small" (click)="slidingRight=!slidingRight">{{ slidingRight ? 'Show':'Hide'}}</button>
+		</h3>
+		<div class="animated-block" [@slideAnimation]="'right'" *ngIf="!slidingRight">Slide from right</div>
+	</div>
+	<div class="grid-md3 ng-demo-block">
+		<h3 class="u-marginReset">Slide Top
+			<button class="button size-small" (click)="slidingTop=!slidingTop">{{ slidingTop ? 'Show':'Hide'}}</button>
+		</h3>
+		<div class="animated-block" [@slideAnimation]="'top'" *ngIf="!slidingTop">Slide from top</div>
+	</div>
+	<div class="grid-md3 ng-demo-block">
+		<h3 class="u-marginReset">Slide Bottom
+			<button class="button size-small" (click)="slidingBottom=!slidingBottom">{{ slidingBottom ? 'Show':'Hide'}}</button>
+		</h3>
+		<div class="animated-block" [@slideAnimation]="'bottom'" *ngIf="!slidingBottom">Slide from bottom</div>
+	</div>
+</div>

applications/prisme/src/app/components/misc/animations/ng-lu-slide-animation-factory/ng-lu-slide-animation-factory.example.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { luSlideAnimationFactory } from '@lucca-front/ng';
+
+@Component({
+	selector: 'pri-ng-lu-slide-animation-factory-example',
+	templateUrl: './ng-lu-slide-animation-factory.example.html',
+	styleUrls: ['../animations.feature.scss'],
+	animations: [luSlideAnimationFactory()]
+})
+export class NgLuSlideAnimationFactoryExample {
+	slidingLeft = false;
+	slidingRight = false;
+	slidingTop = false;
+	slidingBottom = false;
+}

libraries/common/src/lib/feature/example/code/code-tabs.component.ts

@@ -41,8 +41,9 @@ export class CodeTabsComponent implements AfterViewInit {
 	constructor(private cd: ChangeDetectorRef, private cfr: ComponentFactoryResolver) {}
 
 	ngAfterViewInit() {
-		this.cd.detectChanges();
+		this.tabsQL.changes.subscribe(() => this.cd.detectChanges());
 		this.activeTab = this.tabsQL.first;
+		this.cd.detectChanges();
 	}
 
 	renderComponent() {