Updating production with changes from staging

en/components/accordion.md

@@ -42,7 +42,7 @@ The next step is to import the `IgxAccordionModule` in your **app.module.ts** fi
 // app.module.ts
 
 ...
-import { IgxAccordionModule } from 'igniteui-angular';
+import { IgxAccordionModule } from 'igniteui-angular/accordion';
 // import { IgxAccordionModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -59,7 +59,7 @@ Alternatively, as of `16.0.0` you can import the `IgxAccordionComponent` as a st
 // home.component.ts
 
 ...
-import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular';
+import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular/accordion';
 // import { IGX_ACCORDION_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -134,9 +134,8 @@ Angular Accordion supports animations for both expanding and collapsing actions
 With regards to animation, you have two options. First, you could set the `animationSettings` property on the accordion component:
 
 ```typescript
-import { useAnimation } from '@angular/animations';
-import { slideInLeft, slideOutRight } from 'igniteui-angular';
-// import { slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package
+import { useAnimation, slideInLeft, slideOutRight } from '@angular/animations';
+// import { useAnimation, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular/animations'; for licensed package
 
 @Component({
     ...

en/components/action-strip.md

@@ -36,7 +36,7 @@ The next step is to import the `IgxActionStripModule` in your **app.module.ts**
 // app.module.ts
 
 ...
-import { IgxActionStripModule } from 'igniteui-angular';
+import { IgxActionStripModule } from 'igniteui-angular/action-strip';
 // import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -53,7 +53,9 @@ Alternatively, as of `16.0.0` you can import the `IgxActionStripComponent` as a
 // home.component.ts
 
 ...
-import { IGX_ACTION_STRIP_DIRECTIVES, IgxButtonDirective, IgxIconComponent } from 'igniteui-angular';
+import { IGX_ACTION_STRIP_DIRECTIVES } from 'igniteui-angular/action-strip';
+import { IgxButtonDirective } from 'igniteui-angular/button';
+import { IgxIconComponent } from 'igniteui-angular/icon';
 // import { IGX_ACTION_STRIP_DIRECTIVES, IgxButtonDirective, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({

en/components/autocomplete.md

@@ -41,11 +41,8 @@ The next step is to import the **IgxAutocompleteModule** and **IgxDropDownModule
 // app.module.ts
 
 ...
-import { 
-    IgxAutocompleteModule,
-    IgxDropDownModule, 
-    IgxInputGroupModule 
-} from 'igniteui-angular';
+import { IgxAutocompleteModule, IgxDropDownModule } from 'igniteui-angular/drop-down';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
 // import { IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -68,7 +65,8 @@ Alternatively, as of `16.0.0` you can import the `IgxAutocompleteDirective` as a
 // home.component.ts
 
 ...
-import { IgxAutocompleteDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES } from 'igniteui-angular';
+import { IgxAutocompleteDirective, IGX_DROP_DOWN_DIRECTIVES } from 'igniteui-angular/drop-down';
+import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
 // import { IgxAutocompleteDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({

en/components/avatar.md

@@ -35,7 +35,7 @@ The next step is to import the `IgxAvatarModule` in your **app.module.ts** file.
 // app.module.ts
 
 ...
-import { IgxAvatarModule } from 'igniteui-angular';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
 // import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -52,7 +52,7 @@ Alternatively, as of `16.0.0` you can import the `IgxAvatarComponent` as a stand
 // home.component.ts
 
 ...
-import { IgxAvatarComponent } from 'igniteui-angular';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 // import { IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({

en/components/badge.md

@@ -34,7 +34,7 @@ The next step is to import the `IgxBadgeModule` in your **app.module.ts** file.
 // app.module.ts
 
 ...
-import { IgxBadgeModule } from 'igniteui-angular';
+import { IgxBadgeModule } from 'igniteui-angular/badge';
 // import { IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -51,7 +51,7 @@ Alternatively, as of `16.0.0` you can import the `IgxBadgeComponent` as a standa
 // home.component.ts
 
 ...
-import { IgxBadgeComponent } from 'igniteui-angular';
+import { IgxBadgeComponent } from 'igniteui-angular/badge';
 // import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -73,7 +73,8 @@ Let's see how the demo sample is done. It's a simple success badge on an avatar.
 ```typescript
 // app.module.ts
 ...
-import { IgxBadgeModule, IgxAvatarModule } from 'igniteui-angular';
+import { IgxBadgeModule } from 'igniteui-angular/badge';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
 // import {  IgxBadgeModule, IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -171,11 +172,9 @@ To continue, include all needed modules and import them in the **app.module.ts**
 // app.module.ts
 
 ...
-import {
-    IgxListModule,
-    IgxAvatarModule,
-    IgxBadgeModule
-} from 'igniteui-angular';
+import { IgxListModule } from 'igniteui-angular/list';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
+import { IgxBadgeModule } from 'igniteui-angular/badge';
 // import { IgxListModule, IgxAvatarModule, IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({

en/components/banner.md

@@ -34,7 +34,7 @@ The next step is to import the `IgxBannerModule` in your **app.module.ts** file.
 // app.module.ts
 
 ...
-import { IgxBannerModule } from 'igniteui-angular';
+import { IgxBannerModule } from 'igniteui-angular/banner';
 // import { IgxBannerModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -51,7 +51,7 @@ Alternatively, as of `16.0.0` you can import the `IgxBannerComponent` as a stand
 // home.component.ts
 
 ...
-import { IGX_BANNER_DIRECTIVES } from 'igniteui-angular';
+import { IGX_BANNER_DIRECTIVES } from 'igniteui-angular/banner';
 // import { IGX_BANNER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -172,7 +172,8 @@ Let's change the animations that our banner uses, so that it slides in and out:
 
 ```typescript
 // banner.component.ts
-import { IgxBannerComponent, slideInLeft, slideOutRight } from 'igniteui-angular'
+import { IgxBannerComponent } from 'igniteui-angular/banner';
+import { slideInLeft, slideOutRight } from 'igniteui-angular/animations'
 // import { IgxBannerComponent, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package
 ...
 export class MyBannerComponent {

en/components/button-group.md

@@ -34,7 +34,7 @@ The next step is to import the `IgxButtonGroupModule` in your **app.module.ts**
 // app.module.ts
 
 ...
-import { IgxButtonGroupModule } from 'igniteui-angular';
+import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
 // import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -51,7 +51,8 @@ Alternatively, as of `16.0.0` you can import the `IgxButtonGroupComponent` as a
 // home.component.ts
 
 ...
-import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from 'igniteui-angular';
+import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group';
+import { IgxIconComponent } from 'igniteui-angular/icon';
 // import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -114,7 +115,7 @@ Use the [`alignment`]({environment:angularApiUrl}/classes/igxbuttongroupcomponen
 
 ```typescript
 //sample.component.ts
-import { ButtonGroupAlignment } from 'igniteui-angular';
+import { ButtonGroupAlignment } from 'igniteui-angular/button-group';
 // import { ButtonGroupAlignment } from '@infragistics/igniteui-angular'; for licensed package
 
 ...

en/components/button.md

@@ -38,7 +38,7 @@ The next step is to import the `IgxButtonModule` in your **app.module.ts** file.
 
 ```typescript
 // app.module.ts
-import { IgxButtonModule } from 'igniteui-angular';
+import { IgxButtonModule } from 'igniteui-angular/button';
 // import { IgxButtonModule } from '@infragistics/igniteui-angular'; for licensed package
 @NgModule({
     imports: [
@@ -56,7 +56,7 @@ Alternatively, as of `16.0.0` you can import the `IgxButtonDirective` as a stand
 // home.component.ts
 
 ...
-import { IgxButtonDirective } from 'igniteui-angular';
+import { IgxButtonDirective } from 'igniteui-angular/button';
 // import { IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
@@ -198,7 +198,7 @@ We can allow the user to choose the size of the `igxButton` by using the `--ig-s
 ```typescript
 // app.module.ts
 ...
-import { IgxButtonGroupModule } from 'igniteui-angular';
+import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
 // import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package
 @NgModule({
     imports: [

en/components/calendar.md

@@ -46,7 +46,7 @@ The next step is to import the `IgxCalendarModule` in your **app.module.ts** fil
 ...
 import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxCalendarModule } from 'igniteui-angular';
+import { IgxCalendarModule } from 'igniteui-angular/calendar';
 // import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -64,7 +64,7 @@ Alternatively, as of `16.0.0` you can import the `IgxCalendarComponent` as a sta
 
 import { HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IGX_CALENDAR_DIRECTIVES } from 'igniteui-angular';
+import { IGX_CALENDAR_DIRECTIVES } from 'igniteui-angular/calendar';
 // import { IGX_CALENDAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({

en/components/card.md

@@ -39,7 +39,7 @@ The next step is to import the `IgxCardModule` inside your **app.module.ts** fil
 ```typescript
 // app.module.ts
 ...
-import { IgxCardModule } from 'igniteui-angular';
+import { IgxCardModule } from 'igniteui-angular/card';
 // import { IgxCardModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -55,7 +55,7 @@ Alternatively, as of `16.0.0` you can import the `IgxCardComponent` as a standal
 ```typescript
 // home.component.ts
 
-import { IGX_CARD_DIRECTIVES } from 'igniteui-angular';
+import { IGX_CARD_DIRECTIVES } from 'igniteui-angular/card';
 // import { IGX_CARD_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({

en/components/carousel.md

@@ -43,7 +43,7 @@ The next step is to import the **IgxCarouselModule** in our **app.module.ts** fi
 // app.module.ts
 
 import { HammerModule } from '@angular/platform-browser';
-import { IgxCarouselModule } from 'igniteui-angular';
+import { IgxCarouselModule } from 'igniteui-angular/carousel';
 // import { IgxCarouselModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -60,7 +60,7 @@ Alternatively, as of `16.0.0` you can import the `IgxCarouselComponent` as a sta
 // home.component.ts
 
 import { HammerModule } from '@angular/platform-browser';
-import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular';
+import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular/carousel';
 // import { IGX_CAROUSEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({

en/components/chat.md

@@ -1,7 +1,8 @@
 ---
 title: Angular Chat | Ignite UI | Infragistics
 _description: With the Ignite UI for Angular Chat component, you can build interactive messaging experiences with support for messages, attachments, suggestions, typing indicators, and custom templates.  
-_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Chat components, Angular Chat controls  
+_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Chat components, Angular Chat controls
+_license: MIT
 mentionedTypes: ["Chat"]  
 ---
 
@@ -32,7 +33,7 @@ Once installed, you can import the component in your project:
 
 ```ts
 import { Component } from '@angular/core';
-import { IgxChatComponent } from "igniteui-angular";
+import { IgxChatComponent } from "igniteui-angular/chat";
 
 @Component({
   ...
@@ -44,7 +45,7 @@ export class AppComponent { ... }
 Define the chat options and bind them in your template:
 
 ```ts
-import { IgxChatComponent, IgxChatOptions  } from "igniteui-angular";
+import { IgxChatComponent, IgxChatOptions } from "igniteui-angular/chat";
 
 public options: IgxChatOptions  = {
   currentUserId: 'me',

en/components/checkbox.md

@@ -37,7 +37,7 @@ The next step is to import the `IgxCheckboxModule` in the **app.module.ts** file
 ```typescript
 // app.module.ts
 
-import { IgxCheckboxModule } from 'igniteui-angular';
+import { IgxCheckboxModule } from 'igniteui-angular/checkbox';
 // import { IgxCheckboxModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -53,7 +53,7 @@ Alternatively, as of `16.0.0` you can import the `IgxCheckboxComponent` as a sta
 ```typescript
 // home.component.ts
 
-import { IgxCheckboxComponent } from 'igniteui-angular';
+import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
 // import { IgxCheckboxComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({

en/components/chip.md

@@ -33,7 +33,7 @@ The next step is to import the **IgxChipsModule** in the **app.module.ts** file:
 ```typescript
 // app.module.ts
 
-import { IgxChipsModule } from 'igniteui-angular';
+import { IgxChipsModule } from 'igniteui-angular/chips';
 // import { IgxChipsModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -49,7 +49,7 @@ Alternatively, as of `16.0.0` you can import the `IgxChipComponent` as a standal
 ```typescript
 // home.component.ts
 
-import { IGX_CHIPS_DIRECTIVES } from 'igniteui-angular';
+import { IGX_CHIPS_DIRECTIVES } from 'igniteui-angular/chips';
 import { NgFor } from '@angular/common';
 // import { IGX_CHIPS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
@@ -151,7 +151,7 @@ Dragging can be enabled by setting the [`draggable`]({environment:angularApiUrl}
 Then, we need to add the `chipList` and the function, that handles the [`remove`]({environment:angularApiUrl}/classes/igxchipcomponent.html#remove) event:
 
 ```ts
-import { IBaseChipEventArgs } from 'igniteui-angular';
+import { IBaseChipEventArgs } from 'igniteui-angular/chips';
 // import { IBaseChipEventArgs } from '@infragistics/igniteui-angular'; for licensed package
 ...
 public chipList = [
@@ -279,7 +279,7 @@ To create the demo sample below, we will use the features above:
 Then, we need to add the `chipList` and the function, that handles the [`remove`]({environment:angularApiUrl}/classes/igxchipcomponent.html#remove) event:
 
 ```ts
-import { IBaseChipEventArgs } from 'igniteui-angular';
+import { IBaseChipEventArgs } from 'igniteui-angular/chips';
 // import { IBaseChipEventArgs } from '@infragistics/igniteui-angular'; for licensed package
 ...
 public chipList = [
@@ -428,7 +428,7 @@ Resize the avatar to fit the chip:
 Add the `chipList` and the functions that handle the events:
 
 ```ts
-import { IBaseChipEventArgs, IChipsAreaReorderEventArgs } from 'igniteui-angular';
+import { IBaseChipEventArgs, IChipsAreaReorderEventArgs } from 'igniteui-angular/chips';
 // import { IBaseChipEventArgs, IChipsAreaReorderEventArgs } from '@infragistics/igniteui-angular'; for licensed package
 
 ...

en/components/circular-progress.md

@@ -34,7 +34,7 @@ The next step is to import the `IgxProgressBarModule` in the **app.module.ts** f
 // app.module.ts
 
 ...
-import { IgxProgressBarModule } from 'igniteui-angular';
+import { IgxProgressBarModule } from 'igniteui-angular/progressbar';
 // import { IgxProgressBarModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -50,7 +50,7 @@ Alternatively, as of `16.0.0` you can import the `IgxCircularProgressBarComponen
 ```typescript
 // home.component.ts
 
-import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular';
+import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular/progressbar';
 // import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({

en/components/combo-features.md

@@ -30,7 +30,8 @@ The following demo demonstrates some of the combobox features that are enabled/d
 To get started with the combobox component, first you need to import the `IgxComboModule` in your **app.module.ts** file. Our sample also uses the [igx-switch]({environment:angularApiUrl}/classes/igxswitchcomponent.html) component to toggle combobox properties' values, so we will need the `IgxSwitchModule` as well:
 
 ```typescript
-import { IgxComboModule, IgxSwitchModule } from 'igniteui-angular';
+import { IgxComboModule } from 'igniteui-angular/combo';
+import { IgxSwitchModule } from 'igniteui-angular/switch';
 // import { IgxComboModule, IgxSwitchModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
@@ -203,7 +204,7 @@ You can set whether groups should be sorted in ascending or descending order. By
 
 ```typescript
 ...
-import { SortingDirection } from 'igniteui-angular'
+import { SortingDirection } from 'igniteui-angular/core'
 // import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package
 
 export class ComboDemo {