refactor(animations): igniteui-angular/animations

.eslintrc.json

@@ -14,9 +14,10 @@
         ],
         "createDefaultProgram": true
       },
+      "plugins": [
+        "@typescript-eslint"
+      ],
       "extends": [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended",
         "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],

projects/bundle-test/src/app/app.component.html

@@ -1,5 +1,6 @@
 <!-- Toolbar -->
 <div role="banner">
-  <router-outlet></router-outlet>
+  <igx-chip [resourceStrings]="chipStrings">Chip</igx-chip>
+  <!-- <router-outlet></router-outlet> -->
 </div>
 

projects/bundle-test/src/app/app.component.ts

@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
+import { ChipResourceStringsBG } from 'igniteui-angular-i18n';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
+    protected chipStrings = ChipResourceStringsBG;
 }

projects/bundle-test/src/app/app.module.ts

@@ -2,15 +2,17 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app-routing.module';
+// import { AppRoutingModule } from './app-routing.module';
+import { IgxChipsModule } from 'igniteui-angular';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    // AppRoutingModule,
+    IgxChipsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

projects/bundle-test/tsconfig.app.json

@@ -8,6 +8,9 @@
         "igniteui-angular": [
           "dist/igniteui-angular"
         ],
+        "igniteui-angular/*": [
+          "dist/igniteui-angular/*"
+        ],
         "igniteui-angular-i18n": [
           "dist/igniteui-angular-i18n"
         ]

projects/igniteui-angular/.eslintrc.json

@@ -63,6 +63,9 @@
       "files": [
         "*.html"
       ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
       "rules": {}
     }
   ]

projects/igniteui-angular/src/lib/animations/README.md → projects/igniteui-angular/animations/README.md

@@ -64,7 +64,7 @@ There are three main timing function groups - **EaseIn**, **EaseOut**, and **Eas
 
 To use a specific timing function, import it first:
 ``` typescript 
-import { EaseOut } from "igniteui-angular/animations/easings";
+import { EaseOut } from "igniteui-angular/animations";
 ```
 and then use it as value for the easing param in any animation:
 

projects/igniteui-angular/animations/index.ts

@@ -0,0 +1 @@
+export * from './src/public-api';

projects/igniteui-angular/animations/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/igniteui-angular/animations/src/easings.ts

@@ -0,0 +1,32 @@
+export const enum EaseIn {
+    Quad = `cubic-bezier(0.550, 0.085, 0.680, 0.530)`,
+    Cubic = `cubic-bezier(0.550, 0.055, 0.675, 0.190)`,
+    Quart = `cubic-bezier(0.895, 0.030, 0.685, 0.220)`,
+    Quint = `cubic-bezier(0.755, 0.050, 0.855, 0.060)`,
+    Sine = `cubic-bezier(0.470, 0.000, 0.745, 0.715)`,
+    Expo = `cubic-bezier(0.950, 0.050, 0.795, 0.035)`,
+    Circ = `cubic-bezier(0.600, 0.040, 0.980, 0.335)`,
+    Back = `cubic-bezier(0.600, -0.280, 0.735, 0.045)`
+}
+
+export const enum EaseOut {
+    Quad = `cubic-bezier(0.250, 0.460, 0.450, 0.940)`,
+    Cubic = `cubic-bezier(0.215, 0.610, 0.355, 1.000)`,
+    Quart = `cubic-bezier(0.165, 0.840, 0.440, 1.000)`,
+    Quint = `cubic-bezier(0.230, 1.000, 0.320, 1.000)`,
+    Sine = `cubic-bezier(0.390, 0.575, 0.565, 1.000)`,
+    Expo = `cubic-bezier(0.190, 1.000, 0.220, 1.000)`,
+    Circ = `cubic-bezier(0.075, 0.820, 0.165, 1.000)`,
+    Back = `cubic-bezier(0.175, 0.885, 0.320, 1.275)`
+}
+
+export const enum EaseInOut {
+    Quad = `cubic-bezier(0.455, 0.030, 0.515, 0.955)`,
+    Cubic = `cubic-bezier(0.645, 0.045, 0.355, 1.000)`,
+    Quart = `cubic-bezier(0.770, 0.000, 0.175, 1.000)`,
+    Quint = `cubic-bezier(0.860, 0.000, 0.070, 1.000)`,
+    Sine = `cubic-bezier(0.445, 0.050, 0.550, 0.950)`,
+    Expo = `cubic-bezier(1.000, 0.000, 0.000, 1.000)`,
+    Circ = `cubic-bezier(0.785, 0.135, 0.150, 0.860)`,
+    Back = `cubic-bezier(0.680, -0.550, 0.265, 1.550)`
+}

projects/igniteui-angular/src/lib/animations/fade/README.md → projects/igniteui-angular/animations/src/fade/README.md

@@ -21,7 +21,7 @@ const params: IAnimationParams = {
 If parameters are attached, they act as default values.  When an animation is invoked via [`useAnimation`](https://angular.io/api/animations/useAnimation) then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing then the default values will be used.
 
 ``` typescript
-import { fadeIn } from "igniteui-angular/animations/main";
+import { fadeIn } from "igniteui-angular/animations";
 import { EaseOut } from "ignieui-angular/animations/easings";
 
 useAnimation(fadeIn, {

projects/igniteui-angular/animations/src/fade/index.ts

@@ -0,0 +1,34 @@
+import { animate, animation, AnimationMetadata, style } from '@angular/animations';
+import { EaseOut } from '../easings';
+
+const base: AnimationMetadata[] = [
+    /*@__PURE__*/style({
+        opacity: `{{startOpacity}}`
+    }),
+    /*@__PURE__*/animate(
+        `{{duration}} {{delay}} {{easing}}`,
+        /*@__PURE__*/style({
+            opacity: `{{endOpacity}}`
+        })
+    )
+];
+
+export const fadeIn = /*@__PURE__*/animation(base, {
+    params: {
+        delay: '0s',
+        duration: '350ms',
+        easing: EaseOut.Sine,
+        endOpacity: 1,
+        startOpacity: 0
+    }
+});
+
+export const fadeOut = /*@__PURE__*/animation(base, {
+    params: {
+        delay: '0s',
+        duration: '350ms',
+        easing: EaseOut.Sine,
+        endOpacity: 0,
+        startOpacity: 1
+    }
+});

projects/igniteui-angular/src/lib/animations/flip/README.md → projects/igniteui-angular/animations/src/flip/README.md

@@ -32,7 +32,7 @@ const params: IAnimationParams = {
 If parameters are attached, they act as default values.  When an animation is invoked via [`useAnimation`](https://angular.io/api/animations/useAnimation) then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing then the default values will be used.
 
 ``` typescript
-import { flipTop } from "igniteui-angular/animations/main";
+import { flipTop } from "igniteui-angular/animations";
 
 useAnimation(fadeIn);
-```
+```

projects/igniteui-angular/animations/src/flip/index.ts

@@ -0,0 +1,150 @@
+import {
+    animate,
+    animation,
+    AnimationMetadata,
+    keyframes,
+    style
+} from '@angular/animations';
+import { EaseOut } from '../easings';
+
+const baseRecipe: AnimationMetadata[] = [
+    /*@__PURE__*/style({
+        backfaceVisibility: 'hidden',
+        transformStyle: 'preserve-3d'
+    }),
+    /*@__PURE__*/animate(
+        `{{duration}} {{delay}} {{easing}}`,
+        /*@__PURE__*/keyframes([
+            /*@__PURE__*/style({
+                offset: 0,
+                transform: `translateZ({{startDistance}})
+                rotate3d({{rotateX}}, {{rotateY}}, {{rotateZ}}, {{startAngle}}deg)`
+            }),
+            /*@__PURE__*/style({
+                offset: 1,
+                transform: `translateZ({{endDistance}})
+                rotate3d({{rotateX}}, {{rotateY}}, {{rotateZ}}, {{endAngle}}deg)`
+            })
+        ])
+    )
+];
+
+export const flipTop = /*@__PURE__*/animation(baseRecipe, {
+    params: {
+        delay: '0s',
+        duration: '600ms',
+        easing: EaseOut.Quad,
+        endAngle: 180,
+        endDistance: '0px',
+        rotateX: 1,
+        rotateY: 0,
+        rotateZ: 0,
+        startAngle: 0,
+        startDistance: '0px'
+    }
+});
+
+export const flipBottom = /*@__PURE__*/animation(baseRecipe, {
+    params: {
+        delay: '0s',
+        duration: '600ms',
+        easing: EaseOut.Quad,
+        endDistance: '0px',
+        rotateX: 1,
+        rotateY: 0,
+        rotateZ: 0,
+        startAngle: 0,
+        startDistance: '0px',
+        endAngle: -180
+    }
+});
+
+export const flipLeft = /*@__PURE__*/animation(baseRecipe, {
+    params: {
+        delay: '0s',
+        duration: '600ms',
+        easing: EaseOut.Quad,
+        endAngle: 180,
+        endDistance: '0px',
+        rotateZ: 0,
+        startAngle: 0,
+        startDistance: '0px',
+        rotateX: 0,
+        rotateY: 1
+    }
+});
+
+export const flipRight = /*@__PURE__*/animation(baseRecipe, {
+    params: {
+        delay: '0s',
+        duration: '600ms',
+        easing: EaseOut.Quad,
+        endDistance: '0px',
+        rotateZ: 0,
+        startAngle: 0,
+        startDistance: '0px',
+        endAngle: -180,
+        rotateX: 0,
+        rotateY: 1
+    }
+});
+
+export const flipHorFwd = /*@__PURE__*/animation(baseRecipe, {
+    params: {
+        delay: '0s',
+        duration: '600ms',
+        easing: EaseOut.Quad,
+        endAngle: 180,
+        rotateX: 1,
+        rotateY: 0,
+        rotateZ: 0,
+        startAngle: 0,
+        startDistance: '0px',
+        endDistance: '170px'
+    }
+});
+
+export const flipHorBck = /*@__PURE__*/animation(baseRecipe, {
+    params: {
+        delay: '0s',
+        duration: '600ms',
+        easing: EaseOut.Quad,
+        endAngle: 180,
+        rotateX: 1,
+        rotateY: 0,
+        rotateZ: 0,
+        startAngle: 0,
+        startDistance: '0px',
+        endDistance: '-170px'
+    }
+});
+
+export const flipVerFwd = /*@__PURE__*/animation(baseRecipe, {
+    params: {
+        delay: '0s',
+        duration: '600ms',
+        easing: EaseOut.Quad,
+        endAngle: 180,
+        rotateZ: 0,
+        startAngle: 0,
+        startDistance: '0px',
+        endDistance: '170px',
+        rotateX: 0,
+        rotateY: 1
+    }
+});
+
+export const flipVerBck = /*@__PURE__*/animation(baseRecipe, {
+    params: {
+        delay: '0s',
+        duration: '600ms',
+        easing: EaseOut.Quad,
+        endAngle: 180,
+        rotateZ: 0,
+        startAngle: 0,
+        startDistance: '0px',
+        endDistance: '-170px',
+        rotateX: 0,
+        rotateY: 1
+    }
+});

projects/igniteui-angular/src/lib/animations/grow/index.ts → projects/igniteui-angular/animations/src/grow/index.ts

@@ -1,38 +1,26 @@
-import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from '@angular/animations';
-import { EaseIn, EaseOut } from '../easings';
-import { IAnimationParams } from '../interface';
+import { animate, animation, AnimationMetadata, style } from '@angular/animations';
+import { EaseOut } from '../easings';
 
 const base: AnimationMetadata[] = [
-    style({
+    /*@__PURE__*/style({
         opacity: `{{ startOpacity }}`,
         height: `{{ startHeight }}`,
         paddingBlock: `{{ startPadding }}`
     }),
-    animate(
+    /*@__PURE__*/animate(
         `{{duration}} {{delay}} {{easing}}`,
-        style({
+        /*@__PURE__*/style({
             opacity: `{{ endOpacity }}`,
             height: `{{ endHeight }}`,
             paddingBlock: `{{ endPadding }}`
         })
     )
 ];
 
-const baseParams: IAnimationParams = {
-    delay: '0s',
-    duration: '350ms',
-    easing: EaseIn.Quad,
-    startOpacity: 0,
-    endOpacity: 1,
-    startHeight: '',
-    endHeight: '',
-    startPadding: '',
-    endPadding: '',
-};
-
-const growVerIn: AnimationReferenceMetadata = animation(base, {
+export const growVerIn = /*@__PURE__*/animation(base, {
     params: {
-        ...baseParams,
+        delay: '0s',
+        duration: '350ms',
         easing: EaseOut.Quad,
         startOpacity: 0,
         endOpacity: 1,
@@ -43,9 +31,10 @@ const growVerIn: AnimationReferenceMetadata = animation(base, {
     }
 });
 
-const growVerOut: AnimationReferenceMetadata = animation(base, {
+export const growVerOut = /*@__PURE__*/animation(base, {
     params: {
-        ...baseParams,
+        delay: '0s',
+        duration: '350ms',
         easing: EaseOut.Quad,
         startOpacity: 1,
         endOpacity: 0,
@@ -55,5 +44,3 @@ const growVerOut: AnimationReferenceMetadata = animation(base, {
         endPadding: '0px'
     }
 });
-
-export { growVerIn, growVerOut };