feat(rating): update samples content

live-editing/configs/ButtonConfigGenerator.ts

@@ -86,6 +86,8 @@ export class ButtonConfigGenerator implements IConfigGenerator {
         // button tailwind styling
         configs.push(new Config({
             component: 'ButtonTailwindStylingComponent',
+            additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"],
+            additionalFiles: [".postcssrc.json"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/button/"
         }));

live-editing/configs/ButtonGroupConfigGenerator.ts

@@ -76,6 +76,8 @@ export class ButtonGroupConfigGenerator implements IConfigGenerator {
         // button group tailwind styling
         configs.push(new Config({
             component: 'ButtonGroupTailwindStylingComponent',
+            additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"],
+            additionalFiles: [".postcssrc.json"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));

live-editing/configs/CardConfigGenerator.ts

@@ -56,9 +56,11 @@ export class CardConfigGenerator implements IConfigGenerator {
         // card tailwind styling
         configs.push(new Config({
             component: 'CardTailwindStylingComponent',
+            additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"],
             appConfig: BaseAppConfig,
             additionalFiles: [
-                "/src/app/layouts/card/card-tailwind-styling/icons.ts"
+                "/src/app/layouts/card/card-tailwind-styling/icons.ts",
+                ".postcssrc.json"
             ],
             shortenComponentPathBy: "/layouts/card/"
         }));

live-editing/configs/CheckboxConfigGenerator.ts

@@ -31,6 +31,8 @@ export class CheckboxConfigGenerator implements IConfigGenerator {
         // checkbox tailwind styling
         configs.push(new Config({
             component: 'CheckboxTailwindStylingComponent',
+            additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"],
+            additionalFiles: [".postcssrc.json"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/checkbox/"
         }));

live-editing/configs/RatingConfigGenerator.ts

@@ -0,0 +1,67 @@
+import { Config, IConfigGenerator } from 'igniteui-live-editing'
+import { BaseAppConfig } from './BaseConfig';
+export class RatingConfigGenerator implements IConfigGenerator {
+
+    public generateConfigs(): Config[] {
+        const configs = new Array<Config>();
+
+        // rating overview
+        configs.push(new Config({
+            component: 'RatingOverviewComponent',
+            additionalDependencies: ['igniteui-webcomponents'],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/rating/"
+        }));
+
+        // rating layout
+        configs.push(new Config({
+            component: 'RatingLayoutComponent',
+            additionalDependencies: ['igniteui-webcomponents'],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/rating/"
+        }));
+
+        // rating interaction states
+        configs.push(new Config({
+            component: 'RatingInteractionStatesComponent',
+            additionalDependencies: ['igniteui-webcomponents'],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/rating/"
+        }));
+
+        // rating states
+        configs.push(new Config({
+            component: 'RatingStatesComponent',
+            additionalDependencies: ['igniteui-webcomponents'],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/rating/"
+        }));
+
+        // rating size
+        configs.push(new Config({
+            component: 'RatingSizeComponent',
+            additionalDependencies: ['igniteui-webcomponents'],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/rating/"
+        }));
+
+        // rating styling
+        configs.push(new Config({
+            component: 'RatingStylingComponent',
+            additionalDependencies: ['igniteui-webcomponents'],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/rating/"
+        }));
+
+        // rating tailwind styling
+        configs.push(new Config({
+            component: 'RatingTailwindStylingComponent',
+            additionalDependencies: ['igniteui-webcomponents', 'tailwindcss', '@tailwindcss/postcss'],
+            additionalFiles: ['.postcssrc.json'],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/rating/"
+        }));
+
+        return configs;
+    }
+}

live-editing/generators/ConfigGenerators.ts

@@ -44,6 +44,7 @@ import { NavbarConfigGenerator } from '../configs/NavbarConfigGenerator';
 import { NavdrawerConfigGenerator } from '../configs/NavDrawerConfigGenerator';
 import { OverlayConfigGenerator } from '../configs/OverlayConfigGenerator';
 import { RadioConfigGenerator } from '../configs/RadioConfigGenerator';
+import { RatingConfigGenerator } from '../configs/RatingConfigGenerator';
 import { RippleConfigGenerator } from '../configs/RippleConfigGenerator';
 import { SelectConfigGenerator } from '../configs/SelectConfigGenerator';
 import { SliderConfigGenerator } from '../configs/SliderConfigGenerator';
@@ -115,6 +116,7 @@ export const CONFIG_GENERATORS =
         MaskConfigGenerator,
         MonthPickerConfigGenerator,
         RadioConfigGenerator,
+        RatingConfigGenerator,
         SelectConfigGenerator,
         SliderConfigGenerator,
         SwitchConfigGenerator,

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

@@ -78,6 +78,13 @@ export const dataEntriesRoutesData = {
     "radio-styling-sample": { displayName: "Styling Radio Buttons", parentName: "Radio" },
     "radio-tailwind-styling-sample": { displayName: "Tailwind Styling Radio Buttons", parentName: "Radio" },
     "rating-form": { displayName: "Rating in Form", parentName: "Rating" },
+    "rating-overview": { displayName: "Rating Overview", parentName: "Rating" },
+    "rating-layout": { displayName: "Rating Layout", parentName: "Rating" },
+    "rating-interaction-states": { displayName: "Rating Interaction States", parentName: "Rating" },
+    "rating-states": { displayName: "Rating States", parentName: "Rating" },
+    "rating-size": { displayName: "Rating Size", parentName: "Rating" },
+    "rating-styling": { displayName: "Rating Styling", parentName: "Rating" },
+    "rating-tailwind-styling": { displayName: "Rating Tailwind Styling", parentName: "Rating" },
     "switch-overview": { displayName: "Switch Overview", parentName: "Switch" },
     "switch-enabled": { displayName: "Enabled Switches", parentName: "Switch" },
     "switch-disabled": { displayName: "Disabled Switches", parentName: "Switch" },

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

@@ -85,6 +85,13 @@ import { SwitchLayoutComponent } from './switch/switch-layout/switch-layout.comp
 import { SwitchStylingComponent } from './switch/switch-styling/switch-styling.component';
 import { SwitchTailwindStylingComponent } from './switch/switch-tailwind-styling/switch-tailwind-styling.component';
 import { RatingInFormComponent } from './rating/rating-form/rating-form.component';
+import { RatingOverviewComponent } from './rating/rating-overview/rating-overview.component';
+import { RatingLayoutComponent } from './rating/rating-layout/rating-layout.component';
+import { RatingInteractionStatesComponent } from './rating/rating-interaction-states/rating-interaction-states.component';
+import { RatingStatesComponent } from './rating/rating-states/rating-states.component';
+import { RatingSizeComponent } from './rating/rating-size/rating-size.component';
+import { RatingStylingComponent } from './rating/rating-styling/rating-styling.component';
+import { RatingTailwindStylingComponent } from './rating/rating-tailwind-styling/rating-tailwind-styling.component';
 import { TemplateDrivenFormValidationComponent } from './input-group/template-driven-form-validation/template-driven-form-validation.component';
 import { ReactiveFormValidationComponent } from './input-group/reactive-form-validation/reactive-form-validation.component';
 import { ReactiveFormCustomValidationComponent } from './input-group/reactive-form-custom-validation/reactive-form-custom-validation.component';
@@ -489,6 +496,41 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['rating-in-form'],
         path: 'rating-form'
     },
+    {
+        component: RatingOverviewComponent,
+        data: dataEntriesRoutesData['rating-overview'],
+        path: 'rating-overview'
+    },
+    {
+        component: RatingLayoutComponent,
+        data: dataEntriesRoutesData['rating-layout'],
+        path: 'rating-layout'
+    },
+    {
+        component: RatingInteractionStatesComponent,
+        data: dataEntriesRoutesData['rating-interaction-states'],
+        path: 'rating-interaction-states'
+    },
+    {
+        component: RatingStatesComponent,
+        data: dataEntriesRoutesData['rating-states'],
+        path: 'rating-states'
+    },
+    {
+        component: RatingSizeComponent,
+        data: dataEntriesRoutesData['rating-size'],
+        path: 'rating-size'
+    },
+    {
+        component: RatingStylingComponent,
+        data: dataEntriesRoutesData['rating-styling'],
+        path: 'rating-styling'
+    },
+    {
+        component: RatingTailwindStylingComponent,
+        data: dataEntriesRoutesData['rating-tailwind-styling'],
+        path: 'rating-tailwind-styling'
+    },
     {
         component: SwitchOverviewComponent,
         data: dataEntriesRoutesData['switch-overview'],

src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.html

@@ -0,0 +1,10 @@
+<div class="states">
+    <div class="state">
+        <span class="state-label">Enabled</span>
+        <igc-rating label="Rate your experience" [value]="1"></igc-rating>
+    </div>
+    <div class="state">
+        <span class="state-label">Disabled</span>
+        <igc-rating label="Rate your experience" [value]="1" [disabled]="true"></igc-rating>
+    </div>
+</div>

src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.scss

@@ -0,0 +1,37 @@
+:host {
+    /* styles.scss asks the page for the large size; the ratings keep their own
+       default medium size here. */
+    --ig-size: var(--ig-size-medium);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.states {
+    display: flex;
+    align-items: center;
+    gap: 3.75rem;
+}
+
+.state {
+    display: flex;
+    align-items: center;
+    gap: 1.875rem;
+}
+
+.state-label {
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+    color: var(--ig-gray-600);
+}
+
+igc-rating {
+    --ig-rating-label-color: var(--ig-gray-700);
+    --ig-rating-disabled-label-color: var(--ig-gray-500);
+}

src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.ts

@@ -0,0 +1,13 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcRatingComponent);
+
+@Component({
+    selector: 'app-rating-interaction-states',
+    styleUrls: ['./rating-interaction-states.component.scss'],
+    templateUrl: './rating-interaction-states.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class RatingInteractionStatesComponent { }

src/app/data-entries/rating/rating-layout/rating-layout.component.html

@@ -0,0 +1,10 @@
+<div class="layouts">
+    <div class="layout">
+        <span class="layout-label">Label / On</span>
+        <igc-rating label="Rate your experience" [value]="3"></igc-rating>
+    </div>
+    <div class="layout">
+        <span class="layout-label">Label / Off</span>
+        <igc-rating aria-label="Rate your experience" [value]="3"></igc-rating>
+    </div>
+</div>

src/app/data-entries/rating/rating-layout/rating-layout.component.scss

@@ -0,0 +1,36 @@
+:host {
+    /* styles.scss asks the page for the large size; the ratings keep their own
+       default medium size here. */
+    --ig-size: var(--ig-size-medium);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.layouts {
+    display: flex;
+    align-items: center;
+    gap: 3.75rem;
+}
+
+.layout {
+    display: flex;
+    align-items: center;
+    gap: 1.875rem;
+}
+
+.layout-label {
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+    color: var(--ig-gray-600);
+}
+
+igc-rating {
+    --ig-rating-label-color: var(--ig-gray-700);
+}

src/app/data-entries/rating/rating-layout/rating-layout.component.ts

@@ -0,0 +1,13 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcRatingComponent);
+
+@Component({
+    selector: 'app-rating-layout',
+    styleUrls: ['./rating-layout.component.scss'],
+    templateUrl: './rating-layout.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class RatingLayoutComponent { }

src/app/data-entries/rating/rating-overview/rating-overview.component.html

@@ -0,0 +1,9 @@
+<igx-card class="rating-card">
+    <igx-card-header>
+        <span igxCardHeaderTitle>Rate this product</span>
+        <span igxCardHeaderSubtitle>Your opinion matters to us!</span>
+    </igx-card-header>
+    <igx-card-content>
+        <igc-rating aria-label="Rate this product" [hoverPreview]="true"></igc-rating>
+    </igx-card-content>
+</igx-card>

src/app/data-entries/rating/rating-overview/rating-overview.component.scss

@@ -0,0 +1,21 @@
+:host {
+    /* styles.scss asks the page for the large size; the rating keeps its own
+       default medium size here. */
+    --ig-size: var(--ig-size-medium);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.rating-card {
+    width: 15rem;
+    box-shadow: var(--ig-elevation-2);
+}
+
+.rating-card igx-card-content {
+    display: flex;
+    padding-bottom: 0.5rem;
+}

src/app/data-entries/rating/rating-overview/rating-overview.component.ts

@@ -0,0 +1,20 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
+import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective } from 'igniteui-angular/card';
+
+defineComponents(IgcRatingComponent);
+
+@Component({
+    selector: 'app-rating-overview',
+    styleUrls: ['./rating-overview.component.scss'],
+    templateUrl: './rating-overview.component.html',
+    imports: [
+        IgxCardComponent,
+        IgxCardHeaderComponent,
+        IgxCardHeaderTitleDirective,
+        IgxCardHeaderSubtitleDirective,
+        IgxCardContentDirective
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class RatingOverviewComponent { }

src/app/data-entries/rating/rating-size/rating-size.component.html

@@ -0,0 +1,14 @@
+<div class="sizes">
+    <div class="size">
+        <span class="size-label">Small</span>
+        <igc-rating class="size-small" label="Rate your experience" [value]="5"></igc-rating>
+    </div>
+    <div class="size">
+        <span class="size-label">Medium</span>
+        <igc-rating class="size-medium" label="Rate your experience" [value]="5"></igc-rating>
+    </div>
+    <div class="size">
+        <span class="size-label">Large</span>
+        <igc-rating class="size-large" label="Rate your experience" [value]="5"></igc-rating>
+    </div>
+</div>