Merge branch 'vNext' into thristodorova/fix-3005

Author: hanastasov

package-lock.json

@@ -63,12 +63,13 @@
     "domino": "^2.1.4",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^14.0.0",
+    "igniteui-angular": "^14.1.0-alpha.0",
     "igniteui-angular-charts": "^14.0.0",
     "igniteui-angular-core": "^14.0.0",
     "igniteui-angular-i18n": "^14.0.2",
     "igniteui-dockmanager": "^1.8.0",
-    "igniteui-live-editing": "^2.0.1",
+    "igniteui-webcomponents": "^3.3.0",
+    "igniteui-live-editing": "^2.0.2",
     "immediate": "^3.2.3",
     "intl": "^1.2.5",
     "jszip": "^3.7.1",

package.json

@@ -48,6 +48,7 @@ export const dataEntriesRoutesData = {
     "radio-group-sample": { displayName: "Radio Group", parentName: "Radio" },
     "radio-group-vertical": { displayName: "Vertical Radio Group", parentName: "Radio" },
     "radio-styling-sample": { displayName: "Styling Radio Buttons", parentName: "Radio" },
+    "rating-form": { displayName: "Rating in Form", parentName: "Rating" },
     "switch-sample-1": { displayName: "Switch Overview", parentName: "Switch" },
     "switch-sample-2": { displayName: "Multiple Switches", parentName: "Switch" },
     "switch-styling": { displayName: "Styled Switches", parentName: "Switch" },
@@ -56,5 +57,5 @@ export const dataEntriesRoutesData = {
     "select-sample-4": { displayName: "Custom Overlay Settings", parentName: "Select" },
     "select-input-directives": { displayName: "Select Input Directives", parentName: "Select" },
     "select-header-footer": { displayName: "Select with Header&Footer Templates", parentName: "Select" },
-    "input-text-selection": {displayName: "Input with Text Selection", parentName: "Input Group"}
+    "input-text-selection": { displayName: "Input with Text Selection", parentName: "Input Group" }
 };

src/app/data-entries/data-entries-routes-data.ts

@@ -57,6 +57,7 @@ import { SelectSample4Component } from './select/select-sample-4/select-sample-4
 import { SwitchSample1Component } from './switch/switch-sample-1/switch-sample-1.component';
 import { SwitchSample2Component } from './switch/switch-sample-2/switch-sample-2.component';
 import { SwitchStylingComponent } from './switch/switch-styling/switch-styling.component';
+import { RatingInFormComponent } from './rating/rating-form/rating-form.component';
 
 export const dataEntriesRoutes: Routes = [
     {
@@ -294,6 +295,11 @@ export const dataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['radio-styling-sample'],
         path: 'radio-styling-sample'
     },
+    {
+        component: RatingInFormComponent,
+        data: dataEntriesRoutesData['rating-in-form'],
+        path: 'rating-form'
+    },
     {
         component: SwitchSample1Component,
         data: dataEntriesRoutesData['switch-sample-1'],

src/app/data-entries/data-entries-routing.module.ts

@@ -3,7 +3,8 @@ import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
-    IgxAutocompleteModule, IgxButtonGroupModule, IgxButtonModule, IgxCheckboxModule, IgxComboModule,
+    IgcFormsModule,
+    IgxAutocompleteModule, IgxButtonGroupModule, IgxButtonModule, IgxCardModule, IgxCheckboxModule, IgxComboModule,
     IgxDatePickerModule, IgxDialogModule, IgxDropDownModule, IgxFocusModule, IgxForOfModule,
     IgxIconModule, IgxInputGroupModule, IgxNavbarModule, IgxProgressBarModule, IgxRadioModule, IgxRippleModule,
     IgxSelectModule, IgxSwitchModule, IgxTextSelectionModule, IgxTimePickerModule, IgxToastModule, IgxToggleModule
@@ -65,6 +66,7 @@ import { SelectSample4Component } from './select/select-sample-4/select-sample-4
 import { SwitchSample1Component } from './switch/switch-sample-1/switch-sample-1.component';
 import { SwitchSample2Component } from './switch/switch-sample-2/switch-sample-2.component';
 import { SwitchStylingComponent } from './switch/switch-styling/switch-styling.component';
+import { RatingInFormComponent } from './rating/rating-form/rating-form.component';
 
 @NgModule({
     declarations: [
@@ -112,6 +114,7 @@ import { SwitchStylingComponent } from './switch/switch-styling/switch-styling.c
         RadioSample2Component,
         RadioSample3Component,
         RadioStylingSampleComponent,
+        RatingInFormComponent,
         SwitchSample1Component,
         SwitchSample2Component,
         SwitchStylingComponent,
@@ -153,7 +156,9 @@ import { SwitchStylingComponent } from './switch/switch-styling/switch-styling.c
         IgxProgressBarModule,
         IgxForOfModule,
         IgxTextSelectionModule,
-        IgxFocusModule
+        IgxFocusModule,
+        IgxCardModule,
+        IgcFormsModule
     ]
 })
 export class DataEntriesModule { }

src/app/data-entries/data-entries.module.ts

@@ -0,0 +1,31 @@
+<div class="sample-column">
+    <form>
+        <igx-card>
+            <igx-card-media height="300px">
+                <img [src]="product.ImageURL">
+            </igx-card-media>
+
+            <igx-card-header>
+                <h4 igxCardHeaderTitle>{{ product.ProductName }}</h4>
+            </igx-card-header>
+
+            <igx-card-content>
+                <span igxCardHeaderSubtitle>Price: {{ product.UnitPrice | currency:'USD' }}</span>
+                <span igxCardHeaderSubtitle>
+                    User Rating: {{ productRating }} from {{ product.TotalReviews + (product.UserRating !== 0 ? 1 : 0) }} users
+                </span>
+                <igc-rating [(ngModel)]="product.UserRating" name="userRating"></igc-rating>
+            </igx-card-content>
+            <igx-card-actions>
+                <button igxButton="outlined" igxRipple>Buy again</button>
+                <button igxButton="icon"
+                    igxRipple
+                    igxRippleCentered="true"
+                    *ngFor="let icon of product.icons">
+                    <igx-icon [style.color]="'#ECAA53'">{{icon}}</igx-icon>
+                </button>
+            </igx-card-actions>
+        </igx-card>
+    </form>
+</div>
+