feat(samples): add sample-size reporter for auto-fitting docs iframes

live-editing/configs/PivotGridConfigGenerator.ts

@@ -82,6 +82,12 @@ export class PivotGridConfigGenerator implements IConfigGenerator {
             component: 'PivotGridLayoutComponent'
         }));
 
+        configs.push(new Config({
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/dataToAnalyze.ts'],
+            appConfig: BaseAppConfig,
+            component: 'PivotStylingComponent'
+        }));
+
         return configs;
     }
 }

projects/app-crm/src/main.ts

@@ -3,9 +3,12 @@ import { environment } from './environments/environment';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { AppConfig } from './app/app.config';
+import { initSampleSizeReporter } from '@shared/sample-size-reporter';
 
 if (environment.production) {
   enableProdMode();
 }
 
+initSampleSizeReporter();
+
 bootstrapApplication(AppComponent, {...AppConfig, providers: [provideZoneChangeDetection(), ...AppConfig.providers]}).catch((err) => console.error(err));

projects/app-lob/src/app/index/docs-layout.component.scss

@@ -1,6 +1 @@
-::ng-deep {
-	.custom-body {
-		color: var(--ig-surface-500-contrast);
-		background: var(--ig-surface-500);
-	}
-}
+

projects/app-lob/src/main.ts

@@ -6,11 +6,14 @@ import { environment } from './environments/environment';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { AppConfig } from './app/app.config';
+import { initSampleSizeReporter } from '@shared/sample-size-reporter';
 
 if (environment.production) {
     enableProdMode();
 }
 
+initSampleSizeReporter();
+
 bootstrapApplication(AppComponent, {...AppConfig, providers: [provideZoneChangeDetection(), ...AppConfig.providers]}).catch(err => console.error(err));
 
 defineCustomElements(window);

src/app/data-display/chip/chip-variants/chip-variants.component.scss

@@ -1,8 +1,8 @@
-igx-chip {
-    margin-right: 5px;
-}
-
 .sample-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 5px;
     padding-top: 15px;
     padding-left: 10px;
 }

src/app/index/docs-layout.component.scss

@@ -1,6 +1 @@
-::ng-deep {
-	.custom-body {
-		color: var(--ig-surface-500-contrast);
-		background: var(--ig-surface-500);
-	}
-}
+

src/app/interactions/toggle/toggle-samples.scss

@@ -9,7 +9,7 @@
     height: 260px;
 }
 
-.toggle-section{
+.toggle-section {
     flex-flow: row wrap;
     display: flex;
     width: 100%;
@@ -18,15 +18,6 @@
     align-items: center;
     text-align: center;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-
-    .dark-theme & {
-        background-color: #111;
-    }
-
-    .custom-body & {
-        color: var(--ig-surface-500-contrast);
-        background-color: var(--ig-surface-500);
-    }
 }
 
 img{

src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss

@@ -13,7 +13,3 @@
         );
     }
 }
-
-igx-avatar {
-    margin: 8px;
-}

src/app/layouts/avatar/avatar-sample-1/avatar-sample-1.component.scss

@@ -1,5 +0,0 @@
-.igx-avatar{
-    --ig-avatar-background: #e41c77;
-    color: black;
-    margin: 15px;
-}

src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.html

@@ -1 +1 @@
-<igx-avatar src="assets/images/men/1.jpg" shape="rounded" size="large"></igx-avatar>
+<igx-avatar src="assets/images/men/1.jpg" shape="rounded"></igx-avatar>

src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.scss

@@ -1,4 +0,0 @@
-.igx-avatar{
-    margin: 5px 15px;
-}
-

src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.html

@@ -1,11 +1,3 @@
-<article class="avatars-wrapper">
-    <div class="avatar-sample initials">
-        <igx-avatar initials="JS" size="medium"></igx-avatar>
-    </div>
-    <div class="avatar-sample">
-        <igx-avatar src="assets/images/men/1.jpg" shape="rounded" size="medium"></igx-avatar>
-    </div>
-    <div class="avatar-sample icon">
-        <igx-avatar icon="person" shape="circle" size="medium"></igx-avatar>
-    </div>
-</article>
+<igx-avatar initials="JS"></igx-avatar>
+<igx-avatar src="assets/images/men/1.jpg"></igx-avatar>
+<igx-avatar icon="person"></igx-avatar>

src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.scss

@@ -1,22 +1,4 @@
-.avatars-wrapper {
+:host {
     display: flex;
-    flex-flow: row wrap;
-}
-
-.avatar-sample {
-    display: flex;
-    flex: 1 0 30%;
-    width: 88px;
-    height: 88px;
-    justify-content: center;
-    align-items: center;
-    margin: 15px 0;
-}
-
-.avatar-sample.initials .igx-avatar{
-    --ig-avatar-background: #e41c77;
-}
-
-.avatar-sample.icon .igx-avatar{
-    --ig-avatar-background: #9e9e9e;
+    gap: 32px;
 }

src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.ts

@@ -9,7 +9,5 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar';
     imports: [IgxAvatarComponent]
 })
 export class AvatarSample3Component {
-
   constructor() { }
-
 }

src/app/layouts/avatar/avatar-sample-4/avatar-sample-4.component.scss

@@ -1,4 +0,0 @@
-.igx-avatar{
-    --ig-avatar-background: #9e9e9e;
-    margin: 15px;
-}

src/app/layouts/avatar/avatar-styling/avatar-styling.component.html

@@ -1,8 +1,8 @@
-<article class="avatars-wrapper">
-  <div class="avatar-sample initials">
+<div class="initials">
     <igx-avatar initials="JS" shape="rounded" size="medium"></igx-avatar>
-  </div>
-  <div class="avatar-sample icon">
+</div>
+
+<div class="icon">
     <igx-avatar icon="person" shape="circle" size="medium"></igx-avatar>
-  </div>
-</article>
+</div>
+

src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss

@@ -1,19 +1,19 @@
-@use "layout.scss";
-@use "igniteui-angular/theming" as *;
+@use 'layout.scss';
+@use 'igniteui-angular/theming' as *;
 
 $initials-avatar-theme: avatar-theme(
-  $background: #72da67,
-  $border-radius: 16px
+    $background: #72da67,
+    $border-radius: 16px
 );
 
 $icon-avatar-theme: avatar-theme(
-  $background: #217346,
+    $background: #217346,
 );
 
-.initials{
-  @include tokens($initials-avatar-theme);
+.initials {
+    @include tokens($initials-avatar-theme);
 }
 
-.icon{
-  @include tokens($icon-avatar-theme);
+.icon {
+    @include tokens($icon-avatar-theme);
 }

src/app/layouts/avatar/avatar-styling/layout.scss

@@ -1,13 +1,4 @@
-.avatars-wrapper {
-  display: flex;
-  flex-flow: row wrap;
-}
-
-.avatar-sample {
-  display: flex;
-  flex: 1 0 30%;
-  width: 88px;
-  justify-content: center;
-  align-items: center;
-  margin: 15px 0;
+:host {
+  display: inline-flex;
+  gap: 32px
 }

src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss

@@ -1,3 +0,0 @@
-igx-avatar {
-    margin: 12px;
-}

src/app/pivot-grid/pivot-grid-routes-data.ts

@@ -6,6 +6,7 @@ export const pivotGridsRoutesData = {
     'pivot-grid-export': { displayName: 'Pivot Grid Export', parentName: 'Pivot Grid' },
     'pivot-grid-features': { displayName: 'Pivot Grid With Features', parentName: 'Pivot Grid' },
     'pivot-grid-state-persistence': { displayName: 'Pivot Grid With State Persistence', parentName: 'Pivot Grid' },
+    'pivot-grid-styling': { displayName: 'Pivot Grid Styling', parentName: 'Pivot Grid' },
     'pivot-grid-noop-persistence': { displayName: 'Pivot Noop Grid with State Persistence', parentName: 'Pivot Grid' },
     'pivot-grid-about': { displayName: 'Pivot Grid About', parentName: 'Pivot Grid' },
     'pivot-grid-layout': { displayName: 'Pivot Grid Layout', parentName: 'Pivot Grid' }

src/app/pivot-grid/pivot-grids.routes.ts

@@ -10,6 +10,7 @@ import { pivotGridsRoutesData } from './pivot-grid-routes-data';
 import { PivotGridAboutComponent } from './pivot-state-persistence/about.component';
 import { PivotGridStatePersistenceSampleComponent } from './pivot-state-persistence/pivot-grid-state-persistence-sample.component';
 import { PivotGridLayoutComponent } from './pivot-layout/pivot-layout.component'
+import { PivotStylingComponent } from './pivot-styling/pivot-styling.component';
 // tslint:enable:max-line-length
 
 export const PivotGridsRoutes: Routes = [
@@ -51,11 +52,16 @@ export const PivotGridsRoutes: Routes = [
     {
         component: PivotGridAboutComponent,
         data: pivotGridsRoutesData['pivot-grid-about'],
-        path: 'pivot-state-about'
+        path: 'pivot-grid-about'
     },
     {
         component: PivotGridLayoutComponent,
         data: pivotGridsRoutesData['pivot-grid-features'],
         path: 'pivot-grid-layout'
+    },
+    {
+        component: PivotStylingComponent,
+        data: pivotGridsRoutesData['pivot-grid-styling'],
+        path: 'pivot-grid-styling'
     }
 ];

src/app/pivot-grid/pivot-styling/layout.scss

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  padding: 8px;
+}

src/app/pivot-grid/pivot-styling/pivot-styling.component.html

@@ -0,0 +1,2 @@
+<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfigHierarchy" height="500px">
+</igx-pivot-grid>

src/app/pivot-grid/pivot-styling/pivot-styling.component.scss

@@ -0,0 +1,16 @@
+@use "layout.scss";
+@use "igniteui-angular/theming" as *;
+
+$background: #292826;
+$foreground: #eeece1;
+$accent: #ffcd0f;
+
+$custom-grid: grid-theme(
+  $background: $background,
+  $foreground: $foreground,
+  $accent-color: $accent,
+);
+
+igx-pivot-grid {
+  @include tokens($custom-grid);
+}

src/app/pivot-grid/pivot-styling/pivot-styling.component.ts

@@ -0,0 +1,45 @@
+import { Component, ChangeDetectionStrategy } from "@angular/core";
+import { DATA } from '../../data/pivot-data';
+
+import { IPivotConfiguration, IgxPivotNumericAggregate } from 'igniteui-angular/grids/core';
+import { IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid';
+
+@Component({
+    selector: 'app-pivot-styling',
+    styleUrls: ['./pivot-styling.component.scss'],
+    templateUrl: './pivot-styling.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxPivotGridComponent]
+})
+
+export class PivotStylingComponent {
+  public data = DATA;
+  public pivotConfigHierarchy: IPivotConfiguration = {
+    columns: [
+      {
+        memberName: 'Product',
+        memberFunction: (data) => data.Product.Name,
+        enabled: true
+      } 
+    ],
+    rows: [
+      {
+        memberName: 'Seller',
+        memberFunction: (data) => data.Seller.Name,
+        enabled: true
+      }
+    ],
+    values: [
+      {
+        member: 'NumberOfUnits',
+        aggregate: {
+          aggregator: IgxPivotNumericAggregate.sum,
+          key: 'sum',
+          label: 'Sum'
+        },
+        enabled: true
+      }
+    ],
+    filters: null
+  };
+}

src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.html

@@ -1,8 +1,3 @@
-<igx-card elevated>
-    <igx-card-header>
-        <h5 class="igx-card-header__title">Days View</h5>
-    </igx-card-header>
-    <igx-card-content>
-        <igx-days-view [selection]="'single'"></igx-days-view>
-    </igx-card-content>
-</igx-card>
+<igx-days-view [selection]="'single'"></igx-days-view>
+
+

src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.scss

@@ -1,9 +1,3 @@
-.igx-card {
-    max-width: 500px;
-    min-width: 200px;
-    margin: 8px;
-}
-
-.igx-calendar {
-	--ig-size: 2;
+igx-days-view {
+    border: 1px solid var(--ig-gray-300);
 }

src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.html

@@ -1,8 +1 @@
-<igx-card elevated>
-    <igx-card-header>
-        <h5 class="igx-card-header__title">Months View</h5>
-    </igx-card-header>
-    <igx-card-content>
-        <igx-months-view></igx-months-view>
-    </igx-card-content>
-</igx-card>
+<igx-months-view></igx-months-view>

src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.scss

@@ -1,9 +1,3 @@
-.igx-card {
-    max-width: 500px;
-    min-width: 200px;
-    margin: 8px;
-}
-
-.igx-calendar {
-	--ig-size: 2;
+igx-months-view {
+    border: 1px solid var(--ig-gray-300);
 }