chore: created part1 and part2

.eslintrc.json

@@ -25,7 +25,7 @@
           "error",
           {
             "type": "attribute",
-            "prefix": "agnularPreferReduceMotion",
+            "prefix": "angularPreferReduceMotion",
             "style": "camelCase"
           }
         ],

.prettierrc

@@ -1,3 +1,4 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 80
 }

README.md

@@ -1,4 +1,4 @@
-# AgnularPreferReduceMotion
+# angularPreferReduceMotion
 
 <a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
 
@@ -7,7 +7,7 @@
 
 ## Start the app
 
-To start the development server run `nx serve agnular-prefer-reduce-motion`. Open your browser and navigate to http://localhost:4200/. Happy coding!
+To start the development server run `nx serve angular-prefer-reduce-motion`. Open your browser and navigate to http://localhost:4200/. Happy coding!
 
 
 ## Generate code

e2e/playwright.config.ts

@@ -25,7 +25,7 @@ export default defineConfig({
   },
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'npx nx serve agnular-prefer-reduce-motion',
+    command: 'npx nx serve angular-prefer-reduce-motion',
     url: 'http://localhost:4200',
     reuseExistingServer: !process.env.CI,
     cwd: workspaceRoot,

e2e/project.json

@@ -16,5 +16,5 @@
       "outputs": ["{options.outputFile}"]
     }
   },
-  "implicitDependencies": ["agnular-prefer-reduce-motion"]
+  "implicitDependencies": ["angular-prefer-reduce-motion"]
 }

e2e/src/example.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test';
 
-test('has title', async ({ page }) => {
+test('has title', async ({ page }): Promise<void> => {
   await page.goto('/');
 
   // Expect h1 to contain a substring.

jest.config.ts

@@ -1,9 +1,9 @@
 /* eslint-disable */
 export default {
-  displayName: 'agnular-prefer-reduce-motion',
+  displayName: 'angular-prefer-reduce-motion',
   preset: './jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  coverageDirectory: './coverage/agnular-prefer-reduce-motion',
+  coverageDirectory: './coverage/angular-prefer-reduce-motion',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',

nx.json

@@ -65,5 +65,5 @@
       "style": "scss"
     }
   },
-  "defaultProject": "agnular-prefer-reduce-motion"
+  "defaultProject": "angular-prefer-reduce-motion"
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@agnular-prefer-reduce-motion/source",
+  "name": "@angular-prefer-reduce-motion/source",
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {

project.json

@@ -1,16 +1,16 @@
 {
-  "name": "agnular-prefer-reduce-motion",
+  "name": "angular-prefer-reduce-motion",
   "$schema": "node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
-  "prefix": "agnular-prefer-reduce-motion",
+  "prefix": "angular-prefer-reduce-motion",
   "sourceRoot": "./src",
   "tags": [],
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:application",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/agnular-prefer-reduce-motion",
+        "outputPath": "dist/angular-prefer-reduce-motion",
         "index": "./src/index.html",
         "browser": "./src/main.ts",
         "polyfills": ["zone.js"],
@@ -48,18 +48,18 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "buildTarget": "agnular-prefer-reduce-motion:build:production"
+          "buildTarget": "angular-prefer-reduce-motion:build:production"
         },
         "development": {
-          "buildTarget": "agnular-prefer-reduce-motion:build:development"
+          "buildTarget": "angular-prefer-reduce-motion:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "buildTarget": "agnular-prefer-reduce-motion:build"
+        "buildTarget": "angular-prefer-reduce-motion:build"
       }
     },
     "lint": {

src/app/app.component.html

@@ -1,20 +1,3 @@
-<button (click)="show = !show" style="width: 100px;">
-    {{ show ? 'Hide' : 'Show'}}
-</button>
-
-<div style="display: flex; gap: 8px">
-    <app-item *ngIf="show"
-              [@collapse]="options"
-              (@collapse.start)="onAnimationEvent($event)"
-              (@collapse.done)="onAnimationEvent($event)"
-    >
-        Angular animation item
-    </app-item>
-
-    <app-item
-            class="css-animation"
-            [ngClass]="show ? 'show' : 'hide'">
-        Css animation item
-    </app-item>
-</div>
+<!--<app-reusable-animations></app-reusable-animations> Part 1-->
+<app-disable-animations></app-disable-animations>
 

src/app/app.component.scss

@@ -1,17 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  .show {
-    opacity: 1;
-  }
-
-  .hide {
-    opacity: 0;
-  }
-
-  .css-animation {
-    transition: all 300ms linear;
-  }
-}

src/app/app.component.ts

@@ -1,42 +1,12 @@
-import { AnimationOptions, AnimationEvent  } from '@angular/animations';
-import { NgClass, NgIf } from '@angular/common';
 import { Component } from '@angular/core';
-import { AN_COLLAPSE } from './animations/collapse';
-import { ItemComponent } from './components/angular-animation/item.component';
+import { ReusableAnimationsComponent } from './part-1/reusable-animations.component';
+import { DisableAnimationsComponent } from './part-2/disable-animations.component';
 
 @Component({
   standalone: true,
-  imports: [ItemComponent, NgIf, NgClass],
+  imports: [ReusableAnimationsComponent, DisableAnimationsComponent],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
-  animations: [
-      AN_COLLAPSE
-  ]
 })
-export class AppComponent {
-  show = true
-
-  options: AnimationOptions & { value: boolean } = {
-    value: true,
-    params: {
-      duration: 400
-    }
-  };
-
-  onAnimationEvent(event: AnimationEvent ) {
-    switch (event.phaseName) {
-      case 'start': {
-        console.time('animation');
-        break
-      }
-      case 'done': {
-        console.timeEnd('animation');
-        break;
-      }
-      default: {
-        break
-      }
-    }
-  }
-}
+export class AppComponent {}

src/app/part-1/animations/collapse.ts

@@ -0,0 +1,30 @@
+import {
+  animate,
+  animation,
+  AnimationOptions,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+
+const closedStyle = style({ height: 0 });
+const openStyle = style({ height: '*' });
+const animateTimings = '{{duration}}ms linear';
+const defaultOptions: AnimationOptions = { params: { duration: 300 } };
+
+export const collapse = trigger('collapse', [
+  transition(
+    ':enter',
+    animation([closedStyle, animate(animateTimings, openStyle)]),
+    defaultOptions
+  ),
+  transition(
+    ':leave',
+    animation([openStyle, animate(animateTimings, closedStyle)]),
+    defaultOptions
+  ),
+]);
+
+export interface ReusableAnimationOptions<State> extends AnimationOptions {
+  value?: State;
+}

src/app/part-1/components/bonus/bonus.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

src/app/part-1/components/bonus/bonus.component.scss

@@ -0,0 +1,8 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  background: #f3dfdf;
+  width: 100px;
+}

src/app/part-1/components/bonus/bonus.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { collapse, ReusableAnimationOptions } from '../../animations/collapse';
+
+@Component({
+  selector: 'app-bonus',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './bonus.component.html',
+  styleUrl: './bonus.component.scss',
+  animations: [collapse],
+  host: {
+    '[@collapse]': 'animationOptions',
+  },
+})
+export class BonusComponent implements OnInit {
+  @Input()
+  public collapseDuration: number = 300;
+
+  public animationOptions!: ReusableAnimationOptions<string>
+
+  public ngOnInit(): void {
+    this.animationOptions = {
+      value: '_',
+      params: { duration: this.collapseDuration },
+    };
+  }
+}

src/app/part-1/reusable-animations.component.html

@@ -0,0 +1,22 @@
+<div class="flex">
+    <button (click)="state = !state">{{
+        state ? 'close' : 'open'
+        }}</button>
+</div>
+
+<div class="flex">
+    <div *ngIf="state" class="example-block" [@collapse]="slowAnimation">
+        <div class="block">Slow</div>
+    </div>
+    <div *ngIf="state" class="example-block" [@collapse]="fastAnimation">
+        <div class="block">Fast</div>
+    </div>
+</div>
+
+<div class="flex">
+    <ng-container *ngFor="let duration of durations">
+        <app-bonus  *ngIf="state" [collapseDuration]="duration">
+            <div class="block">Duration {{duration}} ms</div>
+        </app-bonus>
+    </ng-container>
+</div>

src/app/part-1/reusable-animations.component.scss

@@ -0,0 +1,11 @@
+:host {
+  .example-block {
+    background: #b59e9e;
+    width: 100px;
+  }
+
+  .block {
+    width: 100px;
+    height: 100px;
+  }
+}

src/app/part-1/reusable-animations.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { collapse, ReusableAnimationOptions } from './animations/collapse';
+import { BonusComponent } from './components/bonus/bonus.component';
+
+@Component({
+  selector: 'app-reusable-animations',
+  standalone: true,
+  imports: [CommonModule, BonusComponent],
+  templateUrl: './reusable-animations.component.html',
+  styleUrl: './reusable-animations.component.scss',
+  animations: [collapse],
+  host: {
+    '[class.flex]': 'true',
+    '[class.flex-column]': 'true',
+  },
+})
+export class ReusableAnimationsComponent {
+  public state: boolean = false;
+  public slowAnimation: ReusableAnimationOptions<string> = {
+    value: '_',
+    params: { duration: 800 },
+  };
+  public fastAnimation: ReusableAnimationOptions<string> = {
+    value: '_',
+    params: { duration: 200 },
+  };
+
+  public durations = [1000, 800, 600, 400, 200, 0]
+}