Size-reporter migrated to base vnext without sample changes

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).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).catch(err => console.error(err));
 
 defineCustomElements(window);

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-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/main.ts

@@ -4,11 +4,14 @@ import { defineCustomElements } from 'igniteui-dockmanager/loader';
 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).catch(err => console.log(err));
 
 defineCustomElements(window);

src/sample-size-reporter.ts

@@ -0,0 +1,85 @@
+/**
+ * Demo-side half of the docs <Sample fitContent> contract
+ * (astro-components/src/scripts/sample-widget.ts).
+ *
+ * The docs host posts { type: 'igd-sample-fit', width?: boolean } into the
+ * iframe when it loads. In response we neutralize the viewport-bound sizing
+ * from styles.scss (html/body height: 100%, overflow: hidden — which would
+ * only echo the iframe's height back) and report the content's size with
+ * { type: 'igd-sample-height', height, width? } immediately and on every
+ * resize. Demos embedded at a fixed height never receive the enable message,
+ * so this stays dormant for them and their percentage layouts are untouched.
+ */
+const FIT_ENABLE = 'igd-sample-fit';
+const FIT_REPORT = 'igd-sample-height';
+
+export function initSampleSizeReporter(): void {
+    if (typeof window === 'undefined' || window.parent === window) {
+        return;
+    }
+
+    let reportWidth = false;
+    let observer: ResizeObserver | null = null;
+    let styled = false;
+    // Captured from the host's enable message so replies go back to that exact
+    // origin instead of being broadcast to any window that happens to listen.
+    let hostOrigin = '*';
+
+    // Right-most element edge, mirroring the host's same-origin measurement:
+    // block-level content stretches to the viewport width, so the intrinsic
+    // width has to come from the element boxes, not the body itself.
+    const measureWidth = (): number | undefined => {
+        const body = document.body;
+        const left = body.getBoundingClientRect().left;
+        let right = left;
+        body.querySelectorAll('*').forEach(el => {
+            right = Math.max(right, el.getBoundingClientRect().right);
+        });
+        if (right <= left) {
+            return undefined;
+        }
+        const cs = getComputedStyle(body);
+        return right - left + parseFloat(cs.paddingRight || '0') + parseFloat(cs.borderRightWidth || '0');
+    };
+
+    const report = () => {
+        const height = Math.max(
+            document.documentElement.offsetHeight,
+            document.body.offsetHeight,
+            document.body.scrollHeight
+        );
+        window.parent.postMessage(
+            { type: FIT_REPORT, height, width: reportWidth ? measureWidth() : undefined },
+            hostOrigin
+        );
+    };
+
+    window.addEventListener('message', (e: MessageEvent) => {
+        if (e.source !== window.parent) {
+            return;
+        }
+        if (!e.origin || !/^https?:\/\//.test(e.origin)) {
+            return;
+        }
+        if (!e.data || e.data.type !== FIT_ENABLE) {
+            return;
+        }
+        reportWidth = Boolean(e.data.width);
+        hostOrigin = e.origin;
+
+        if (!styled) {
+            styled = true;
+            const style = document.createElement('style');
+            style.textContent =
+                'html, body { height: auto !important; overflow: visible !important; }' +
+                '.sample-wrapper { height: auto !important; }';
+            document.head.appendChild(style);
+        }
+
+        report();
+        if ('ResizeObserver' in window && !observer) {
+            observer = new ResizeObserver(report);
+            observer.observe(document.body);
+        }
+    });
+}

tsconfig.json

@@ -1,6 +1,9 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "paths": {
+      "@shared/sample-size-reporter": ["./src/sample-size-reporter.ts"]
+    },
     "importHelpers": true,
     "module": "ES2022",
     "outDir": "./dist/out-tsc",