Merge pull request #13493 from IgniteUI/utils-i18n-refactor

refactor(i18n, util): tree shaking i18n
IgniteUI · Oct 18, 2023 · bad608a · bad608a
2 parents bdfe0f7 + e11fb8b
commit bad608a
Show file tree

Hide file tree

Showing 147 changed files with 2,547 additions and 2,928 deletions.
diff --git a/.eslintrc.json b/.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"
       ],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -73,7 +73,7 @@
     "rxjs": "^6.6.7",
     "tslib": "^2.3.0",
     "uuid": "^9.0.0",
-    "zone.js": "~0.13.1"
+    "zone.js": "~0.13.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.2.5",

diff --git a/projects/bundle-test/src/app/app.component.html b/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>
 
diff --git a/projects/bundle-test/src/app/app.component.ts b/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;
 }
diff --git a/projects/bundle-test/src/app/app.module.ts b/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]

diff --git a/projects/bundle-test/tsconfig.app.json b/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"
         ]

diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsBG_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: 'Входните данни трябва да са дълги поне {0} знака.',
     igx_grid_max_length_validation_error: 'Входните данни не трябва да са дълги повече от {0} знака.',
     igx_grid_email_validation_error: 'Трябва да бъде въведен валиден имейл адрес.',
-    igx_grid_pattern_validation_error: 'Въведените данни не спазват зададения образец.',
-    igx_grid_pivot_no_aggregator: 'Няма открит валиден агрегатор за {0}. Задайте валидна стойност на aggregatorName или aggregator.'
+    igx_grid_pattern_validation_error: 'Въведените данни не спазват зададения образец.'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsCS_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: 'Záznam by měl mít alespoň {0} znaků',
     igx_grid_max_length_validation_error: 'Záznam by neměl mít více než {0} znaků',
     igx_grid_email_validation_error: 'Je třeba zadat platnou e-mailovou adresu',
-    igx_grid_pattern_validation_error: 'Položka neodpovídá požadovanému vzoru',
-    igx_grid_pivot_no_aggregator: 'Pro {0} nebyl nalezen žádný platný agregátor. Nastavte prosím buď platný aggregatorName nebo aggregator.'
+    igx_grid_pattern_validation_error: 'Položka neodpovídá požadovanému vzoru'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsDA_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: 'Indtastningen skal være mindst {0} tegn',
     igx_grid_max_length_validation_error: 'Indtastningen må højst være {0} tegn',
     igx_grid_email_validation_error: 'Der skal indtastes en gyldig e-mailadresse',
-    igx_grid_pattern_validation_error: 'Indtastning stemmer ikke overens med det krævede mønster',
-    igx_grid_pivot_no_aggregator: 'Der blev ikke fundet nogen gyldig aggregator for {0}. Indstil enten et gyldigt "aggregatorName" eller "aggregator".'
+    igx_grid_pattern_validation_error: 'Indtastning stemmer ikke overens med det krævede mønster'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsDE_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: 'Bitte geben Sie mindestens {0} Zeichen ein',
     igx_grid_max_length_validation_error: 'Bitte geben Sie nicht mehr als {0} Zeichen ein',
     igx_grid_email_validation_error: 'Eine gültige E-Mail-Adresse sollte eingegeben werden',
-    igx_grid_pattern_validation_error: 'Eintrag entspricht nicht dem erforderlichen Muster',
-    igx_grid_pivot_no_aggregator: 'Kein gültiger Aggregator für {0} gefunden. Bitte legen Sie entweder einen gültigen „aggregatorName“ oder „aggregator“ fest.'
+    igx_grid_pattern_validation_error: 'Eintrag entspricht nicht dem erforderlichen Muster'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsES_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: 'Escriba {0} caracteres como mínimo',
     igx_grid_max_length_validation_error: 'No escriba más de {0} caracteres',
     igx_grid_email_validation_error: 'Debe introducirse una dirección de correo electrónico válida.',
-    igx_grid_pattern_validation_error: 'La entrada no coincide con el patrón necesario.',
-    igx_grid_pivot_no_aggregator: 'No se encontró un agregador válido para {0}. Establezca un aggregatorName o aggregator válido.'
+    igx_grid_pattern_validation_error: 'La entrada no coincide con el patrón necesario.'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsFR_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: 'Veuillez entrer au moins {0} caractères',
     igx_grid_max_length_validation_error: 'Veuillez sélectionner au maximum {0} caractères',
     igx_grid_email_validation_error: 'Une adresse e-mail valide doit être saisie',
-    igx_grid_pattern_validation_error: 'La valeur entrée ne correspond pas au schéma requis',
-    igx_grid_pivot_no_aggregator: 'Aucun agrégateur valide trouvé pour {0}. Veuillez définir un « aggregatorName » ou un « aggregator » valide.'
+    igx_grid_pattern_validation_error: 'La valeur entrée ne correspond pas au schéma requis'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts
@@ -165,8 +165,7 @@ const GridResourceStringsHU_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: 'A bejegyzésnek legalább {0} karakter hosszúságúnak kell lennie',
     igx_grid_max_length_validation_error: 'A bejegyzés legfeljebb {0} karakter hosszúságú lehet',
     igx_grid_email_validation_error: 'Érvényes e-mail címet kell megadni',
-    igx_grid_pattern_validation_error: 'A bejegyzés nem felel meg a szükséges sémának',
-    igx_grid_pivot_no_aggregator: 'Nem található érvényes összesítő a következőhöz: {0}. Adjon meg egy érvényes „aggregatorName” vagy „aggregator” értéket.'
+    igx_grid_pattern_validation_error: 'A bejegyzés nem felel meg a szükséges sémának'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsIT_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: 'La voce deve contenere almeno {0} caratteri',
     igx_grid_max_length_validation_error: 'La voce non deve contenere più di {0} caratteri',
     igx_grid_email_validation_error: 'È necessario inserire un indirizzo e-mail valido',
-    igx_grid_pattern_validation_error: 'La voce non corrisponde al modello richiesto',
-    igx_grid_pivot_no_aggregator: 'Nessun aggregatore valido trovato per {0}. Imposta un "aggregatorName" o un "aggregator" valido.'
+    igx_grid_pattern_validation_error: 'La voce non corrisponde al modello richiesto'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsJA_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: '入力の長さは少なくとも {0} 文字である必要があります',
     igx_grid_max_length_validation_error: '入力の長さは {0} 文字以下である必要があります',
     igx_grid_email_validation_error: '有効なメール アドレスを入力してください',
-    igx_grid_pattern_validation_error: '入力が所定のパターンに一致しません',
-    igx_grid_pivot_no_aggregator: '{0} の有効なアグリゲーターが見つかりません。有効な aggregatorName または aggregator を設定してください。'
+    igx_grid_pattern_validation_error: '入力が所定のパターンに一致しません'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsKO_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: '항목은 {0} 자 이상이어야합니다',
     igx_grid_max_length_validation_error: '항목은 {0} 자 이상이어야합니다',
     igx_grid_email_validation_error: '유효한 이메일 주소를 입력해야합니다',
-    igx_grid_pattern_validation_error: '항목이 필요한 패턴과 일치하지 않습니다',
-    igx_grid_pivot_no_aggregator: '{0} 에 유효한 집계 가 없습니다. 유효한 "aggregatorName" 또는 "aggregator" 를 설정하십시오.'
+    igx_grid_pattern_validation_error: '항목이 필요한 패턴과 일치하지 않습니다'
 };
 
 

diff --git a/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsNB_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: 'Oppføringen skal være minst {0} tegn(er) lang',
     igx_grid_max_length_validation_error: 'Oppføringen må ikke være mer enn {0} tegn(er) lang',
     igx_grid_email_validation_error: 'Du må angi en gyldig e-postadresse',
-    igx_grid_pattern_validation_error: 'Oppføringen samsvarer ikke med det nødvendige mønsteret',
-    igx_grid_pivot_no_aggregator: 'Ingen gyldig aggregator funnet for {0}. Angi enten et gyldig aggregatorName eller aggregator.'
+    igx_grid_pattern_validation_error: 'Oppføringen samsvarer ikke med det nødvendige mønsteret'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsNL_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: 'Invoer moet minimaal {0} teken(s) lang zijn',
     igx_grid_max_length_validation_error: 'Invoer mag niet meer dan {0} teken(s) lang zijn',
     igx_grid_email_validation_error: 'Er moet een geldig e-mailadres worden ingevoerd',
-    igx_grid_pattern_validation_error: 'Invoer komt niet overeen met het vereiste patroon',
-    igx_grid_pivot_no_aggregator: 'Geen geldige aggregator gevonden voor {0}. Stel een geldige aggregatorName of aggregator in.'
+    igx_grid_pattern_validation_error: 'Invoer komt niet overeen met het vereiste patroon'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsPL_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: 'Wpis powinien mieć co najmniej {0} znaków',
     igx_grid_max_length_validation_error: 'Długość wpisu nie może przekraczać {0} znaków',
     igx_grid_email_validation_error: 'Należy podać prawidłowy adres e-mail',
-    igx_grid_pattern_validation_error: 'Wpis nie pasuje do wymaganego wzorca',
-    igx_grid_pivot_no_aggregator: 'Nie znaleziono prawidłowego agregatora dla {0}. Ustaw prawidłową nazwę agregatorName lub agregator.'
+    igx_grid_pattern_validation_error: 'Wpis nie pasuje do wymaganego wzorca'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsPT_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: 'A entrada deve ter pelo menos {0} caracteres',
     igx_grid_max_length_validation_error: 'A entrada não deve ter mais de {0} caracteres',
     igx_grid_email_validation_error: 'Deve ser introduzido um endereço de e-mail válido',
-    igx_grid_pattern_validation_error: 'A entrada não corresponde ao padrão necessário',
-    igx_grid_pivot_no_aggregator: 'Nenhum agregador válido encontrado para {0}. Defina um aggregatorName ou aggregator válido.'
+    igx_grid_pattern_validation_error: 'A entrada não corresponde ao padrão necessário'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsRO_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: 'Intrarea trebuie să aibă cel puțin {0} caractere',
     igx_grid_max_length_validation_error: 'Intrarea nu trebuie să aibă mai mult de {0} caractere',
     igx_grid_email_validation_error: 'Ar trebui introdusă o adresă de e-mail validă',
-    igx_grid_pattern_validation_error: 'Intrarea nu se potrivește cu modelul cerut',
-    igx_grid_pivot_no_aggregator: 'Nu a fost găsit niciun agregator valid pentru {0}. Vă rugăm să setați un „aggregatorName” sau un „aggregator” valid.'
+    igx_grid_pattern_validation_error: 'Intrarea nu se potrivește cu modelul cerut'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsSV_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: 'Inmatningen ska innehålla minst {0} tecken',
     igx_grid_max_length_validation_error: 'Inmatningen får inte vara längre än {0} tecken',
     igx_grid_email_validation_error: 'En giltig e-postadress borde anges',
-    igx_grid_pattern_validation_error: 'Inmatningen matchar inte det önskade mönstret',
-    igx_grid_pivot_no_aggregator: 'Ingen giltig aggregator hittades för {0}. Ange antingen ett giltigt "aggregatorName" eller "aggregator".'
+    igx_grid_pattern_validation_error: 'Inmatningen matchar inte det önskade mönstret'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsTR_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: 'Giriş en az {0} karakter uzunluğunda olmalıdır',
     igx_grid_max_length_validation_error: 'Giriş, {0} karakterden uzun olmamalıdır',
     igx_grid_email_validation_error: 'Geçerli bir e-posta adresi girilmelidir',
-    igx_grid_pattern_validation_error: 'Giriş, gerekli modelle eşleşmiyor',
-    igx_grid_pivot_no_aggregator: '{0} için geçerli bir toplayıcı bulunamadı. Lütfen geçerli bir "aggregatorName" veya "aggregator" ayarlayın.'
+    igx_grid_pattern_validation_error: 'Giriş, gerekli modelle eşleşmiyor'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsZHHANS_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: '输入项的字符长度至少应为 {0} 个字符',
     igx_grid_max_length_validation_error: '输入项的字符不得超过 {0} 个字符',
     igx_grid_email_validation_error: '必须输入有效的电子邮件地址',
-    igx_grid_pattern_validation_error: '输入项与要求的模式不匹配',
-    igx_grid_pivot_no_aggregator: '找不到 {0} 的有效聚合器。请设置有效的 aggregatorName 或 aggregator。'
+    igx_grid_pattern_validation_error: '输入项与要求的模式不匹配'
 };
 
 /**

diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts
@@ -164,8 +164,7 @@ const GridResourceStringsZHHANT_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_min_length_validation_error: '輸入內容必須至少 {0} 個字元',
     igx_grid_max_length_validation_error: '輸入內容不得超過 {0} 個字元',
     igx_grid_email_validation_error: '必須輸入有效的電子郵件地址',
-    igx_grid_pattern_validation_error: '輸入的內容不符合要求的格式',
-    igx_grid_pivot_no_aggregator: '找不到 {0} 的有效聚合器。請設置有效的 aggregatorName 或 aggregator。'
+    igx_grid_pattern_validation_error: '輸入的內容不符合要求的格式'
 };
 
 /**

diff --git a/projects/igniteui-angular/.eslintrc.json b/projects/igniteui-angular/.eslintrc.json
@@ -63,6 +63,9 @@
       "files": [
         "*.html"
       ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
       "rules": {}
     }
   ]

diff --git a/...teui-angular/src/lib/animations/README.md → ...cts/igniteui-angular/animations/README.md b/...teui-angular/src/lib/animations/README.md → ...cts/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:
 

diff --git a/projects/igniteui-angular/animations/index.ts b/projects/igniteui-angular/animations/index.ts
@@ -0,0 +1 @@
+export * from './src/public-api';
diff --git a/projects/igniteui-angular/animations/ng-package.json b/projects/igniteui-angular/animations/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
diff --git a/projects/igniteui-angular/animations/src/easings.ts b/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)`
+}
diff --git a/...angular/src/lib/animations/fade/README.md → ...eui-angular/animations/src/fade/README.md b/...angular/src/lib/animations/fade/README.md → ...eui-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, {

diff --git a/projects/igniteui-angular/animations/src/fade/index.ts b/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
+    }
+});
diff --git a/...angular/src/lib/animations/flip/README.md → ...eui-angular/animations/src/flip/README.md b/...angular/src/lib/animations/flip/README.md → ...eui-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);
-```
+```