@ng-doc/app 22.0.0 → 22.1.0

package/fesm2022/ng-doc-app-classes-root-page.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-classes-root-page.mjs","sources":["../../../../libs/app/classes/root-page/root-page.ts","../../../../libs/app/classes/root-page/ng-doc-app-classes-root-page.ts"],"sourcesContent":["import { NgDocDemoAssets } from '@ng-doc/app/interfaces';\nimport type { NgDocContentSource, NgDocPage } from '@ng-doc/core/interfaces';\nimport { NgDocPageType } from '@ng-doc/core/types';\n\n/**\n * Base class for NgDoc page\n */\nexport abstract class NgDocRootPage {\n  /**\n   * The type of the page\n   */\n  abstract readonly pageType: NgDocPageType;\n  /**\n   * Html content of the page\n   */\n  abstract readonly pageContent: string;\n\n  /**\n   * Deferred content for generated pages. Legacy pages can continue to provide\n   * {@link pageContent} only.\n   */\n  readonly pageContentSource?: NgDocContentSource;\n\n  /**\n   * Edit URL that can be used to edit the page source file in the repository\n   */\n  abstract readonly editSourceFileUrl?: string;\n\n  /**\n   * View URL that can be used to view the page source file in the repository\n   */\n  abstract readonly viewSourceFileUrl?: string;\n\n  /**\n   * The page dependencies file\n   */\n  readonly page?: NgDocPage;\n\n  /**\n   * The page demo assets that have code examples of the demo components\n   */\n  readonly demoAssets?: NgDocDemoAssets;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAIA;;AAEG;MACmB,aAAa,CAAA;AAmClC;;AC1CD;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-app-classes-root-page.mjs","sources":["../../../../libs/app/classes/root-page/root-page.ts","../../../../libs/app/classes/root-page/ng-doc-app-classes-root-page.ts"],"sourcesContent":["import { NgDocDemoAssets } from '@ng-doc/app/interfaces';\nimport type { NgDocContentSource, NgDocPage } from '@ng-doc/core/interfaces';\nimport { NgDocPageType } from '@ng-doc/core/types';\n\n/**\n * Base class for NgDoc page\n */\nexport abstract class NgDocRootPage {\n  /**\n   * The type of the page\n   */\n  abstract readonly pageType: NgDocPageType;\n  /**\n   * Html content of the page\n   */\n  abstract readonly pageContent: string;\n\n  /**\n   * Deferred content for generated pages. Legacy pages can continue to provide\n   * {@link pageContent} only.\n   */\n  readonly pageContentSource?: NgDocContentSource;\n\n  /**\n   * Edit URL that can be used to edit the page source file in the repository\n   */\n  abstract readonly editSourceFileUrl?: string;\n\n  /**\n   * View URL that can be used to view the page source file in the repository\n   */\n  abstract readonly viewSourceFileUrl?: string;\n\n  /**\n   * The page dependencies file\n   */\n  readonly page?: NgDocPage;\n\n  /**\n   * The page demo assets that have code examples of the demo components\n   */\n  readonly demoAssets?: NgDocDemoAssets;\n\n  /**\n   * The path of the page's demo pages, relative to the base href, when the Vite engine built them:\n   * the demo `X` has its page at `<base href><demoRoute>/X`. Isolated demos show it in an iframe,\n   * and the demo toolbar opens it in a new tab.\n   */\n  readonly demoRoute?: string;\n\n  /** Whether the page's demos are isolated unless their `demo` action says otherwise (`isolatedDemos`). */\n  readonly isolatedDemos?: boolean;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAIA;;AAEG;MACmB,aAAa,CAAA;AA6ClC;;ACpDD;;AAEG;;;;"}

package/fesm2022/ng-doc-app-components-demo-frame.mjs

@@ -0,0 +1,96 @@
+import * as i0 from '@angular/core';
+import { input, signal, computed, inject, viewChild, afterNextRender, DestroyRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ɵisNgDocDemoSizeMessage as _isNgDocDemoSizeMessage } from '@ng-doc/app/demo-app';
+
+/** How long a loaded demo page may take to report its size before the frame reports a failure. */
+const READY_TIMEOUT_MS = 10_000;
+/**
+ * Shows a demo page of the demo application in an iframe, as tall as the demo's content: the demo
+ * page reports its height with `postMessage`, and only messages from this iframe's window and
+ * origin are accepted. The iframe is created in the browser after the first render (the server
+ * renders a placeholder with a link to the demo page) and loads lazily. Until the demo reports its
+ * size, a placeholder tells that it is loading; a demo page that loads without reporting it within
+ * 10 seconds is reported as failed, with the link.
+ */
+class NgDocDemoFrameComponent {
+    constructor() {
+        /** The URL of the demo page, relative to the document or absolute on its origin. */
+        this.src = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+        /** The accessible title of the iframe. */
+        this.frameTitle = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frameTitle" }] : /* istanbul ignore next */ []));
+        /** Whether the iframe fills its container instead of taking the demo's height (fullscreen). */
+        this.fill = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
+        /** The height the demo reported, in pixels. */
+        this.height = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /** `loading` until the demo reports its size, then `ready`; `failed` when it never does. */
+        this.state = computed(() => this.height() !== undefined ? 'ready' : this.failed() ? 'failed' : 'loading', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        /** Whether the iframe exists: only in the browser, after the first render. */
+        this.created = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "created" }] : /* istanbul ignore next */ []));
+        /** The demo page's URL for the iframe. */
+        this.frameSrc = computed(() => 
+        // The URL comes from the generated demo route and the demo's name: a page of this site.
+        this.sanitizer.bypassSecurityTrustResourceUrl(this.src()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frameSrc" }] : /* istanbul ignore next */ []));
+        this.sanitizer = inject(DomSanitizer);
+        this.frame = viewChild('frame', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []));
+        this.failed = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => this.created.set(true));
+        inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));
+    }
+    /**
+     * Waits for the demo's size once its page has loaded.
+     * @internal
+     */
+    onLoad() {
+        clearTimeout(this.timer);
+        if (this.height() !== undefined)
+            return;
+        this.timer = setTimeout(() => this.failed.set(this.height() === undefined), READY_TIMEOUT_MS);
+    }
+    /**
+     * Takes the height a demo page reports, from this iframe only.
+     * @param event - A message to the window.
+     * @internal
+     */
+    onMessage(event) {
+        const frame = this.frame()?.nativeElement;
+        if (!frame?.contentWindow ||
+            event.source !== frame.contentWindow ||
+            event.origin !== new URL(frame.src, frame.baseURI).origin ||
+            !_isNgDocDemoSizeMessage(event.data)) {
+            return;
+        }
+        // The first message comes before the demo has rendered, with no height yet.
+        if (event.data.height === 0 && this.height() === undefined)
+            return;
+        clearTimeout(this.timer);
+        this.failed.set(false);
+        this.height.set(event.data.height);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocDemoFrameComponent, isStandalone: true, selector: "ng-doc-demo-frame", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, frameTitle: { classPropertyName: "frameTitle", publicName: "frameTitle", isSignal: true, isRequired: true, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:message": "onMessage($event)" }, properties: { "attr.data-ng-doc-state": "state()", "attr.data-ng-doc-fill": "fill()" } }, viewQueries: [{ propertyName: "frame", first: true, predicate: ["frame"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (created()) {\n  <iframe\n    #frame\n    class=\"ng-doc-demo-frame-iframe\"\n    loading=\"lazy\"\n    [src]=\"frameSrc()\"\n    [title]=\"frameTitle()\"\n    [style.height.px]=\"fill() ? null : height()\"\n    (load)=\"onLoad()\"></iframe>\n}\n@if (state() !== 'ready') {\n  <div class=\"ng-doc-demo-frame-status\" role=\"status\" [attr.aria-busy]=\"state() === 'loading'\">\n    @if (state() === 'loading') {\n      <span class=\"ng-doc-demo-frame-skeleton\" aria-hidden=\"true\"></span>\n      <span\n        >Loading the demo.\n        <a [href]=\"src()\" target=\"_blank\" rel=\"noopener\">Open it in a new tab</a></span\n      >\n    } @else {\n      <span\n        >The demo did not load.\n        <a [href]=\"src()\" target=\"_blank\" rel=\"noopener\">Open it in a new tab</a></span\n      >\n    }\n  </div>\n}\n", styles: [":host{position:relative;display:block;width:100%}.ng-doc-demo-frame-iframe{display:block;width:100%;border:0;background:transparent;color-scheme:normal}:host(:not([data-ng-doc-state=ready])) .ng-doc-demo-frame-iframe{position:absolute;inset:0;height:100%;opacity:0;pointer-events:none}:host([data-ng-doc-fill=true]){height:100%}:host([data-ng-doc-fill=true]) .ng-doc-demo-frame-iframe{height:100%}.ng-doc-demo-frame-status{display:flex;flex-direction:column;align-items:center;gap:var(--ng-doc-space-3);padding:var(--ng-doc-space-4);font-size:13px;color:var(--ng-doc-text-muted);text-align:center}.ng-doc-demo-frame-skeleton{width:min(240px,100%);height:32px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2);animation:ng-doc-demo-frame-pulse 1.2s ease-in-out infinite alternate}@keyframes ng-doc-demo-frame-pulse{0%{opacity:.5}to{opacity:1}}@media(prefers-reduced-motion:reduce){.ng-doc-demo-frame-skeleton{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoFrameComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-doc-demo-frame', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-ng-doc-state]': 'state()',
+                        '[attr.data-ng-doc-fill]': 'fill()',
+                        '(window:message)': 'onMessage($event)',
+                    }, template: "@if (created()) {\n  <iframe\n    #frame\n    class=\"ng-doc-demo-frame-iframe\"\n    loading=\"lazy\"\n    [src]=\"frameSrc()\"\n    [title]=\"frameTitle()\"\n    [style.height.px]=\"fill() ? null : height()\"\n    (load)=\"onLoad()\"></iframe>\n}\n@if (state() !== 'ready') {\n  <div class=\"ng-doc-demo-frame-status\" role=\"status\" [attr.aria-busy]=\"state() === 'loading'\">\n    @if (state() === 'loading') {\n      <span class=\"ng-doc-demo-frame-skeleton\" aria-hidden=\"true\"></span>\n      <span\n        >Loading the demo.\n        <a [href]=\"src()\" target=\"_blank\" rel=\"noopener\">Open it in a new tab</a></span\n      >\n    } @else {\n      <span\n        >The demo did not load.\n        <a [href]=\"src()\" target=\"_blank\" rel=\"noopener\">Open it in a new tab</a></span\n      >\n    }\n  </div>\n}\n", styles: [":host{position:relative;display:block;width:100%}.ng-doc-demo-frame-iframe{display:block;width:100%;border:0;background:transparent;color-scheme:normal}:host(:not([data-ng-doc-state=ready])) .ng-doc-demo-frame-iframe{position:absolute;inset:0;height:100%;opacity:0;pointer-events:none}:host([data-ng-doc-fill=true]){height:100%}:host([data-ng-doc-fill=true]) .ng-doc-demo-frame-iframe{height:100%}.ng-doc-demo-frame-status{display:flex;flex-direction:column;align-items:center;gap:var(--ng-doc-space-3);padding:var(--ng-doc-space-4);font-size:13px;color:var(--ng-doc-text-muted);text-align:center}.ng-doc-demo-frame-skeleton{width:min(240px,100%);height:32px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2);animation:ng-doc-demo-frame-pulse 1.2s ease-in-out infinite alternate}@keyframes ng-doc-demo-frame-pulse{0%{opacity:.5}to{opacity:1}}@media(prefers-reduced-motion:reduce){.ng-doc-demo-frame-skeleton{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], frameTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "frameTitle", required: true }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], frame: [{ type: i0.ViewChild, args: ['frame', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgDocDemoFrameComponent };
+//# sourceMappingURL=ng-doc-app-components-demo-frame.mjs.map

package/fesm2022/ng-doc-app-components-demo-frame.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-doc-app-components-demo-frame.mjs","sources":["../../../../libs/app/components/demo-frame/demo-frame.component.ts","../../../../libs/app/components/demo-frame/demo-frame.component.html","../../../../libs/app/components/demo-frame/ng-doc-app-components-demo-frame.ts"],"sourcesContent":["import {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  ElementRef,\n  inject,\n  input,\n  Signal,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';\nimport { ɵisNgDocDemoSizeMessage } from '@ng-doc/app/demo-app';\n\n/** How long a loaded demo page may take to report its size before the frame reports a failure. */\nconst READY_TIMEOUT_MS = 10_000;\n\n/**\n * Shows a demo page of the demo application in an iframe, as tall as the demo's content: the demo\n * page reports its height with `postMessage`, and only messages from this iframe's window and\n * origin are accepted. The iframe is created in the browser after the first render (the server\n * renders a placeholder with a link to the demo page) and loads lazily. Until the demo reports its\n * size, a placeholder tells that it is loading; a demo page that loads without reporting it within\n * 10 seconds is reported as failed, with the link.\n */\n@Component({\n  selector: 'ng-doc-demo-frame',\n  templateUrl: './demo-frame.component.html',\n  styleUrls: ['./demo-frame.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-ng-doc-state]': 'state()',\n    '[attr.data-ng-doc-fill]': 'fill()',\n    '(window:message)': 'onMessage($event)',\n  },\n})\nexport class NgDocDemoFrameComponent {\n  /** The URL of the demo page, relative to the document or absolute on its origin. */\n  readonly src = input.required<string>();\n\n  /** The accessible title of the iframe. */\n  readonly frameTitle = input.required<string>();\n\n  /** Whether the iframe fills its container instead of taking the demo's height (fullscreen). */\n  readonly fill = input<boolean>(false);\n\n  /** The height the demo reported, in pixels. */\n  readonly height = signal<number | undefined>(undefined);\n\n  /** `loading` until the demo reports its size, then `ready`; `failed` when it never does. */\n  readonly state: Signal<'loading' | 'ready' | 'failed'> = computed(() =>\n    this.height() !== undefined ? 'ready' : this.failed() ? 'failed' : 'loading',\n  );\n\n  /** Whether the iframe exists: only in the browser, after the first render. */\n  protected readonly created = signal(false);\n\n  /** The demo page's URL for the iframe. */\n  protected readonly frameSrc: Signal<SafeResourceUrl> = computed(() =>\n    // The URL comes from the generated demo route and the demo's name: a page of this site.\n    this.sanitizer.bypassSecurityTrustResourceUrl(this.src()),\n  );\n\n  private readonly sanitizer = inject(DomSanitizer);\n  private readonly frame = viewChild<ElementRef<HTMLIFrameElement>>('frame');\n  private readonly failed = signal(false);\n  private timer?: ReturnType<typeof setTimeout>;\n\n  constructor() {\n    afterNextRender(() => this.created.set(true));\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));\n  }\n\n  /**\n   * Waits for the demo's size once its page has loaded.\n   * @internal\n   */\n  protected onLoad(): void {\n    clearTimeout(this.timer);\n    if (this.height() !== undefined) return;\n    this.timer = setTimeout(() => this.failed.set(this.height() === undefined), READY_TIMEOUT_MS);\n  }\n\n  /**\n   * Takes the height a demo page reports, from this iframe only.\n   * @param event - A message to the window.\n   * @internal\n   */\n  protected onMessage(event: MessageEvent): void {\n    const frame = this.frame()?.nativeElement;\n\n    if (\n      !frame?.contentWindow ||\n      event.source !== frame.contentWindow ||\n      event.origin !== new URL(frame.src, frame.baseURI).origin ||\n      !ɵisNgDocDemoSizeMessage(event.data)\n    ) {\n      return;\n    }\n    // The first message comes before the demo has rendered, with no height yet.\n    if (event.data.height === 0 && this.height() === undefined) return;\n    clearTimeout(this.timer);\n    this.failed.set(false);\n    this.height.set(event.data.height);\n  }\n}\n","@if (created()) {\n  <iframe\n    #frame\n    class=\"ng-doc-demo-frame-iframe\"\n    loading=\"lazy\"\n    [src]=\"frameSrc()\"\n    [title]=\"frameTitle()\"\n    [style.height.px]=\"fill() ? null : height()\"\n    (load)=\"onLoad()\"></iframe>\n}\n@if (state() !== 'ready') {\n  <div class=\"ng-doc-demo-frame-status\" role=\"status\" [attr.aria-busy]=\"state() === 'loading'\">\n    @if (state() === 'loading') {\n      <span class=\"ng-doc-demo-frame-skeleton\" aria-hidden=\"true\"></span>\n      <span\n        >Loading the demo.\n        <a [href]=\"src()\" target=\"_blank\" rel=\"noopener\">Open it in a new tab</a></span\n      >\n    } @else {\n      <span\n        >The demo did not load.\n        <a [href]=\"src()\" target=\"_blank\" rel=\"noopener\">Open it in a new tab</a></span\n      >\n    }\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ɵisNgDocDemoSizeMessage"],"mappings":"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"}

package/fesm2022/ng-doc-app-components-demo-pane.mjs

@@ -39,7 +39,7 @@ class NgDocDemoPaneComponent {
         ...(ngDevMode ? [{ debugName: "assets" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocDemoPaneComponent, isStandalone: true, selector: "ng-doc-demo-pane", inputs: { componentName: { classPropertyName: "componentName", publicName: "componentName", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "options().class ?? \"\"" } }, ngImport: i0, template: "<ng-doc-pane [expanded]=\"options().expanded ?? false\">\n  <ng-container *ngTemplateOutlet=\"codeContent\" ngDocPaneBack></ng-container>\n  <div class=\"ng-doc-demo-pane-stage\" ngDocPaneFront ngDocFullscreen #stage=\"ngDocFullscreen\">\n    <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    @if (!options().fullscreenRoute) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-pane-fullscreen\" [target]=\"stage\" />\n    }\n  </div>\n</ng-doc-pane>\n\n<ng-template #demoTemplate>\n  @if (options().fullscreenRoute; as route) {\n    <ng-doc-fullscreen-button [route]=\"route\"></ng-doc-fullscreen-button>\n  } @else if (demo(); as demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options().inputs\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #codeContent>\n  @if (assets().length === 1) {\n    <ng-doc-code [html]=\"assets()[0].code\"></ng-doc-code>\n  }\n\n  @if (assets().length > 1) {\n    <ng-doc-tab-group [openedTab]=\"options().defaultTab\">\n      @for (asset of assets(); track asset.title) {\n        <ng-doc-tab [id]=\"asset.title\" [label]=\"label\" [content]=\"assetContent\">\n          <ng-template #label>\n            @if (asset.icon) {\n              <ng-doc-icon [customIcon]=\"asset.icon\"></ng-doc-icon>\n            }\n            {{ asset.title }}\n          </ng-template>\n          <ng-template #assetContent>\n            <ng-doc-code [html]=\"asset.code\"></ng-doc-code>\n          </ng-template>\n        </ng-doc-tab>\n      }\n    </ng-doc-tab-group>\n  }\n</ng-template>\n", styles: [":host{display:block;height:var(--ng-doc-demo-pane-height);margin:var(--ng-doc-demo-pane-margin);--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none;--ng-doc-tab-group-tabs-background: var(--ng-doc-demo-toolbar-background);--ng-doc-tab-group-border: none;--ng-doc-tab-group-border-radius: 0;--ng-doc-pane-border-radius: var(--ng-doc-demo-displayer-border-radius)}:host ng-doc-tab-group,:host ng-doc-code,:host ng-doc-pane{width:100%;height:100%}.ng-doc-demo-pane-stage{background-image:radial-gradient(color-mix(in srgb,var(--ng-doc-base-5) 55%,transparent) 1px,transparent 1px);background-size:16px 16px;position:relative;display:grid;place-items:center;align-self:stretch;width:100%;min-height:100%}.ng-doc-demo-pane-stage[data-ng-doc-fullscreen=true]{overflow:auto;padding:var(--ng-doc-space-16) var(--ng-doc-space-8);background-color:var(--ng-doc-pane-front-background, var(--ng-doc-pane-background, var(--ng-doc-base-1)))}.ng-doc-demo-pane-fullscreen{position:absolute;top:var(--ng-doc-space-2);right:var(--ng-doc-space-2)}\n"], dependencies: [{ kind: "component", type: NgDocPaneComponent, selector: "ng-doc-pane", inputs: ["expanded"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgDocPaneBackDirective, selector: "[ngDocPaneBack]" }, { kind: "directive", type: NgDocPaneFrontDirective, selector: "[ngDocPaneFront]" }, { kind: "component", type: NgDocCodeComponent, selector: "ng-doc-code", inputs: ["html", "copyButton", "name", "icon"] }, { kind: "component", type: NgDocTabGroupComponent, selector: "ng-doc-tab-group", inputs: ["openedTab"] }, { kind: "component", type: NgDocTabComponent, selector: "ng-doc-tab, a[ng-doc-tab]", inputs: ["label", "id", "content"] }, { kind: "component", type: NgDocFullscreenButtonComponent, selector: "ng-doc-fullscreen-button", inputs: ["route"] }, { kind: "directive", type: NgDocFullscreenDirective, selector: "[ngDocFullscreen]", exportAs: ["ngDocFullscreen"] }, { kind: "component", type: NgDocFullscreenToggleComponent, selector: "ng-doc-fullscreen-toggle", inputs: ["target"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocDemoPaneComponent, isStandalone: true, selector: "ng-doc-demo-pane", inputs: { componentName: { classPropertyName: "componentName", publicName: "componentName", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "options().class ?? \"\"" } }, ngImport: i0, template: "<ng-doc-pane [expanded]=\"options().expanded ?? false\">\n  <ng-container *ngTemplateOutlet=\"codeContent\" ngDocPaneBack></ng-container>\n  <div class=\"ng-doc-demo-pane-stage\" ngDocPaneFront ngDocFullscreen #stage=\"ngDocFullscreen\">\n    <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    @if (!options().fullscreenRoute) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-pane-fullscreen\" [target]=\"stage\" />\n    }\n  </div>\n</ng-doc-pane>\n\n<ng-template #demoTemplate>\n  @if (options().fullscreenRoute; as route) {\n    <ng-doc-fullscreen-button [route]=\"route\"></ng-doc-fullscreen-button>\n  } @else if (demo(); as demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options().inputs\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #codeContent>\n  @if (assets().length === 1) {\n    <ng-doc-code [html]=\"assets()[0].code\"></ng-doc-code>\n  }\n\n  @if (assets().length > 1) {\n    <ng-doc-tab-group [openedTab]=\"options().defaultTab\">\n      @for (asset of assets(); track asset.title) {\n        <ng-doc-tab [id]=\"asset.title\" [label]=\"label\" [content]=\"assetContent\">\n          <ng-template #label>\n            @if (asset.icon) {\n              <ng-doc-icon [customIcon]=\"asset.icon\"></ng-doc-icon>\n            }\n            {{ asset.title }}\n          </ng-template>\n          <ng-template #assetContent>\n            <ng-doc-code [html]=\"asset.code\"></ng-doc-code>\n          </ng-template>\n        </ng-doc-tab>\n      }\n    </ng-doc-tab-group>\n  }\n</ng-template>\n", styles: [":host{display:block;height:var(--ng-doc-demo-pane-height);margin:var(--ng-doc-demo-pane-margin);--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none;--ng-doc-tab-group-tabs-background: var(--ng-doc-demo-toolbar-background);--ng-doc-tab-group-border: none;--ng-doc-tab-group-border-radius: 0;--ng-doc-pane-border-radius: var(--ng-doc-demo-displayer-border-radius)}:host ng-doc-tab-group,:host ng-doc-code,:host ng-doc-pane{width:100%;height:100%}.ng-doc-demo-pane-stage{background-image:radial-gradient(color-mix(in srgb,var(--ng-doc-base-5) 55%,transparent) 1px,transparent 1px);background-size:16px 16px;position:relative;display:grid;place-items:center;align-self:stretch;width:100%;min-height:100%}.ng-doc-demo-pane-stage[data-ng-doc-fullscreen=true]{overflow:auto;padding:var(--ng-doc-space-16) var(--ng-doc-space-8);background-color:var(--ng-doc-pane-front-background, var(--ng-doc-pane-background, var(--ng-doc-base-1)))}.ng-doc-demo-pane-fullscreen{position:absolute;top:var(--ng-doc-space-2);right:var(--ng-doc-space-2)}\n"], dependencies: [{ kind: "component", type: NgDocPaneComponent, selector: "ng-doc-pane", inputs: ["expanded"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgDocPaneBackDirective, selector: "[ngDocPaneBack]" }, { kind: "directive", type: NgDocPaneFrontDirective, selector: "[ngDocPaneFront]" }, { kind: "component", type: NgDocCodeComponent, selector: "ng-doc-code", inputs: ["html", "copyButton", "name", "icon"] }, { kind: "component", type: NgDocTabGroupComponent, selector: "ng-doc-tab-group", inputs: ["appearance", "openedTab"] }, { kind: "component", type: NgDocTabComponent, selector: "ng-doc-tab, a[ng-doc-tab]", inputs: ["label", "id", "content"] }, { kind: "component", type: NgDocFullscreenButtonComponent, selector: "ng-doc-fullscreen-button", inputs: ["route"] }, { kind: "directive", type: NgDocFullscreenDirective, selector: "[ngDocFullscreen]", exportAs: ["ngDocFullscreen"] }, { kind: "component", type: NgDocFullscreenToggleComponent, selector: "ng-doc-fullscreen-toggle", inputs: ["target"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoPaneComponent, decorators: [{
             type: Component,

package/fesm2022/ng-doc-app-components-demo-pane.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-demo-pane.mjs","sources":["../../../../libs/app/components/demo-pane/demo-pane.component.ts","../../../../libs/app/components/demo-pane/demo-pane.component.html","../../../../libs/app/components/demo-pane/ng-doc-app-components-demo-pane.ts"],"sourcesContent":["import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  Signal,\n  Type,\n} from '@angular/core';\nimport { NgDocRootPage } from '@ng-doc/app/classes/root-page';\nimport { NgDocCodeComponent } from '@ng-doc/app/components/code';\nimport { NgDocFullscreenButtonComponent } from '@ng-doc/app/components/fullscreen-button';\nimport { NgDocFullscreenToggleComponent } from '@ng-doc/app/components/fullscreen-toggle';\nimport { NgDocDemoAsset } from '@ng-doc/app/interfaces';\nimport { asArray } from '@ng-doc/core/helpers/as-array';\nimport { NgDocDemoPaneActionOptions } from '@ng-doc/core/interfaces';\nimport {\n  NgDocFullscreenDirective,\n  NgDocIconComponent,\n  NgDocPaneBackDirective,\n  NgDocPaneComponent,\n  NgDocPaneFrontDirective,\n  NgDocTabComponent,\n  NgDocTabGroupComponent,\n} from '@ng-doc/ui-kit';\n\n/**\n * Renders a demo of the page in front of its source files, which the reader reveals by dragging\n * the pane's resizer. The demo sits on the dot-grid canvas of demos, with a control that shows it\n * fullscreen with the browser Fullscreen API where the browser supports it.\n */\n@Component({\n  selector: 'ng-doc-demo-pane',\n  templateUrl: './demo-pane.component.html',\n  styleUrls: ['./demo-pane.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgDocPaneComponent,\n    NgTemplateOutlet,\n    NgDocPaneBackDirective,\n    NgDocPaneFrontDirective,\n    NgDocCodeComponent,\n    NgDocTabGroupComponent,\n    NgDocTabComponent,\n    NgDocFullscreenButtonComponent,\n    NgDocFullscreenDirective,\n    NgDocFullscreenToggleComponent,\n    NgComponentOutlet,\n    NgDocIconComponent,\n  ],\n  host: {\n    '[class]': 'options().class ?? \"\"',\n  },\n})\nexport class NgDocDemoPaneComponent {\n  private readonly rootPage = inject(NgDocRootPage);\n\n  /** Name of the demo component in the page's `demos`. */\n  readonly componentName = input<string | undefined>(undefined);\n\n  /** Options of the `demoPane` action. */\n  readonly options = input<NgDocDemoPaneActionOptions>({});\n\n  /** The demo component. */\n  readonly demo: Signal<Type<unknown> | undefined> = computed(() => {\n    const name: string | undefined = this.componentName();\n\n    return name ? this.rootPage.page?.demos?.[name] : undefined;\n  });\n\n  /** Source files of the demo, filtered by the `tabs` option. */\n  readonly assets: Signal<NgDocDemoAsset[]> = computed(() => {\n    const name: string | undefined = this.componentName();\n    const tabs: string | string[] | undefined = this.options().tabs;\n\n    return name\n      ? (this.rootPage.demoAssets?.[name] ?? []).filter(\n          (asset: NgDocDemoAsset) => !tabs?.length || asArray(tabs).includes(asset.title),\n        )\n      : [];\n  });\n}\n","<ng-doc-pane [expanded]=\"options().expanded ?? false\">\n  <ng-container *ngTemplateOutlet=\"codeContent\" ngDocPaneBack></ng-container>\n  <div class=\"ng-doc-demo-pane-stage\" ngDocPaneFront ngDocFullscreen #stage=\"ngDocFullscreen\">\n    <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    @if (!options().fullscreenRoute) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-pane-fullscreen\" [target]=\"stage\" />\n    }\n  </div>\n</ng-doc-pane>\n\n<ng-template #demoTemplate>\n  @if (options().fullscreenRoute; as route) {\n    <ng-doc-fullscreen-button [route]=\"route\"></ng-doc-fullscreen-button>\n  } @else if (demo(); as demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options().inputs\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #codeContent>\n  @if (assets().length === 1) {\n    <ng-doc-code [html]=\"assets()[0].code\"></ng-doc-code>\n  }\n\n  @if (assets().length > 1) {\n    <ng-doc-tab-group [openedTab]=\"options().defaultTab\">\n      @for (asset of assets(); track asset.title) {\n        <ng-doc-tab [id]=\"asset.title\" [label]=\"label\" [content]=\"assetContent\">\n          <ng-template #label>\n            @if (asset.icon) {\n              <ng-doc-icon [customIcon]=\"asset.icon\"></ng-doc-icon>\n            }\n            {{ asset.title }}\n          </ng-template>\n          <ng-template #assetContent>\n            <ng-doc-code [html]=\"asset.code\"></ng-doc-code>\n          </ng-template>\n        </ng-doc-tab>\n      }\n    </ng-doc-tab-group>\n  }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-doc-app-components-demo-pane.mjs","sources":["../../../../libs/app/components/demo-pane/demo-pane.component.ts","../../../../libs/app/components/demo-pane/demo-pane.component.html","../../../../libs/app/components/demo-pane/ng-doc-app-components-demo-pane.ts"],"sourcesContent":["import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  Signal,\n  Type,\n} from '@angular/core';\nimport { NgDocRootPage } from '@ng-doc/app/classes/root-page';\nimport { NgDocCodeComponent } from '@ng-doc/app/components/code';\nimport { NgDocFullscreenButtonComponent } from '@ng-doc/app/components/fullscreen-button';\nimport { NgDocFullscreenToggleComponent } from '@ng-doc/app/components/fullscreen-toggle';\nimport { NgDocDemoAsset } from '@ng-doc/app/interfaces';\nimport { asArray } from '@ng-doc/core/helpers/as-array';\nimport { NgDocDemoPaneActionOptions } from '@ng-doc/core/interfaces';\nimport {\n  NgDocFullscreenDirective,\n  NgDocIconComponent,\n  NgDocPaneBackDirective,\n  NgDocPaneComponent,\n  NgDocPaneFrontDirective,\n  NgDocTabComponent,\n  NgDocTabGroupComponent,\n} from '@ng-doc/ui-kit';\n\n/**\n * Renders a demo of the page in front of its source files, which the reader reveals by dragging\n * the pane's resizer. The demo sits on the dot-grid canvas of demos, with a control that shows it\n * fullscreen with the browser Fullscreen API where the browser supports it.\n */\n@Component({\n  selector: 'ng-doc-demo-pane',\n  templateUrl: './demo-pane.component.html',\n  styleUrls: ['./demo-pane.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgDocPaneComponent,\n    NgTemplateOutlet,\n    NgDocPaneBackDirective,\n    NgDocPaneFrontDirective,\n    NgDocCodeComponent,\n    NgDocTabGroupComponent,\n    NgDocTabComponent,\n    NgDocFullscreenButtonComponent,\n    NgDocFullscreenDirective,\n    NgDocFullscreenToggleComponent,\n    NgComponentOutlet,\n    NgDocIconComponent,\n  ],\n  host: {\n    '[class]': 'options().class ?? \"\"',\n  },\n})\nexport class NgDocDemoPaneComponent {\n  private readonly rootPage = inject(NgDocRootPage);\n\n  /** Name of the demo component in the page's `demos`. */\n  readonly componentName = input<string | undefined>(undefined);\n\n  /** Options of the `demoPane` action. */\n  readonly options = input<NgDocDemoPaneActionOptions>({});\n\n  /** The demo component. */\n  readonly demo: Signal<Type<unknown> | undefined> = computed(() => {\n    const name: string | undefined = this.componentName();\n\n    return name ? this.rootPage.page?.demos?.[name] : undefined;\n  });\n\n  /** Source files of the demo, filtered by the `tabs` option. */\n  readonly assets: Signal<NgDocDemoAsset[]> = computed(() => {\n    const name: string | undefined = this.componentName();\n    const tabs: string | string[] | undefined = this.options().tabs;\n\n    return name\n      ? (this.rootPage.demoAssets?.[name] ?? []).filter(\n          (asset: NgDocDemoAsset) => !tabs?.length || asArray(tabs).includes(asset.title),\n        )\n      : [];\n  });\n}\n","<ng-doc-pane [expanded]=\"options().expanded ?? false\">\n  <ng-container *ngTemplateOutlet=\"codeContent\" ngDocPaneBack></ng-container>\n  <div class=\"ng-doc-demo-pane-stage\" ngDocPaneFront ngDocFullscreen #stage=\"ngDocFullscreen\">\n    <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    @if (!options().fullscreenRoute) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-pane-fullscreen\" [target]=\"stage\" />\n    }\n  </div>\n</ng-doc-pane>\n\n<ng-template #demoTemplate>\n  @if (options().fullscreenRoute; as route) {\n    <ng-doc-fullscreen-button [route]=\"route\"></ng-doc-fullscreen-button>\n  } @else if (demo(); as demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options().inputs\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #codeContent>\n  @if (assets().length === 1) {\n    <ng-doc-code [html]=\"assets()[0].code\"></ng-doc-code>\n  }\n\n  @if (assets().length > 1) {\n    <ng-doc-tab-group [openedTab]=\"options().defaultTab\">\n      @for (asset of assets(); track asset.title) {\n        <ng-doc-tab [id]=\"asset.title\" [label]=\"label\" [content]=\"assetContent\">\n          <ng-template #label>\n            @if (asset.icon) {\n              <ng-doc-icon [customIcon]=\"asset.icon\"></ng-doc-icon>\n            }\n            {{ asset.title }}\n          </ng-template>\n          <ng-template #assetContent>\n            <ng-doc-code [html]=\"asset.code\"></ng-doc-code>\n          </ng-template>\n        </ng-doc-tab>\n      }\n    </ng-doc-tab-group>\n  }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-doc-app-components-demo.mjs

@@ -1,13 +1,14 @@
-import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import { PlatformLocation, APP_BASE_HREF, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, input, computed, linkedSignal, signal, viewChildren, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, DOCUMENT, input, computed, viewChild, linkedSignal, signal, viewChildren, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
 import { NgDocCodeComponent } from '@ng-doc/app/components/code';
 import { NgDocCopyButtonComponent } from '@ng-doc/app/components/copy-button';
+import { NgDocDemoFrameComponent } from '@ng-doc/app/components/demo-frame';
 import { NgDocFullscreenButtonComponent } from '@ng-doc/app/components/fullscreen-button';
 import { NgDocFullscreenToggleComponent } from '@ng-doc/app/components/fullscreen-toggle';
 import { asArray } from '@ng-doc/core/helpers/as-array';
-import { NgDocFullscreenDirective, NgDocIconComponent, NgDocSelectionComponent, NgDocSelectionHostDirective, NgDocSelectionOriginDirective, NgDocTooltipDirective } from '@ng-doc/ui-kit';
+import { NgDocFullscreenDirective, NgDocButtonIconComponent, NgDocIconComponent, NgDocSelectionComponent, NgDocSelectionHostDirective, NgDocSelectionOriginDirective, NgDocTooltipDirective } from '@ng-doc/ui-kit';
 
 /** The preview widths, in the order of their buttons. */
 const PREVIEW_WIDTHS = [
@@ -22,13 +23,18 @@ let nextId = 0;
  * shows the stage fullscreen with the browser Fullscreen API; it is hidden where the browser does
  * not support it.
  *
- * The preview widths set the width of the demo's container; they do not emulate a device, so
- * media queries inside the demo do not respond to them.
+ * When the Vite engine built demo pages for the page (`NgDocRootPage.demoRoute`), the toolbar
+ * opens the demo's page in a new tab, and an isolated demo (the `isolated` option, or
+ * `isolatedDemos`) is shown in an iframe of its page: the preview widths are then the width of the
+ * iframe's viewport, so media queries inside the demo respond to them. Otherwise the demo renders
+ * in the page, and the preview widths set the width of its container only.
  */
 class NgDocDemoComponent {
     constructor() {
         this.rootPage = inject(NgDocRootPage);
         this.document = inject(DOCUMENT);
+        this.platformLocation = inject(PlatformLocation);
+        this.appBaseHref = inject(APP_BASE_HREF, { optional: true });
         /** Name of the demo component in the page's `demos`. */
         this.componentName = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "componentName" }] : /* istanbul ignore next */ []));
@@ -41,6 +47,44 @@ class NgDocDemoComponent {
             return name ? this.rootPage.page?.demos?.[name] : undefined;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "demo" }] : /* istanbul ignore next */ []));
+        /**
+         * The URL of the demo's page, when the page has demo pages and the demo exists: the generated
+         * demo route and the demo's name under the base href, with the `inputs` option as a query
+         * parameter.
+         */
+        this.demoUrl = computed(() => {
+            const route = this.rootPage.demoRoute;
+            const name = this.componentName();
+            if (!route || !name || !this.demo())
+                return undefined;
+            // The demo pages are files under the document's base href, whatever the location strategy.
+            const baseHref = (this.appBaseHref ??
+                this.platformLocation.getBaseHrefFromDOM() ??
+                '/').replace(/^\/+|\/+$/g, '');
+            const path = [...baseHref.split('/'), ...route.split('/'), name]
+                .filter(Boolean)
+                .map((segment) => encodeURIComponent(segment))
+                .join('/');
+            const inputs = this.options().inputs;
+            const query = inputs && Object.keys(inputs).length
+                ? `?inputs=${encodeURIComponent(JSON.stringify(inputs))}`
+                : '';
+            return `/${path}${query}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "demoUrl" }] : /* istanbul ignore next */ []));
+        /** Whether the demo is shown in an iframe of its page. */
+        this.isolated = computed(() => !!this.demoUrl() &&
+            !this.options().fullscreenRoute &&
+            (this.options().isolated ?? this.rootPage.isolatedDemos ?? false), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isolated" }] : /* istanbul ignore next */ []));
+        /** The accessible title of the demo's iframe. */
+        this.frameTitle = computed(() => `${this.componentName()} demo`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frameTitle" }] : /* istanbul ignore next */ []));
+        /** Whether the stage is fullscreen. */
+        this.fullscreen = computed(() => this.stage()?.active() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fullscreen" }] : /* istanbul ignore next */ []));
+        this.stage = viewChild(NgDocFullscreenDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stage" }] : /* istanbul ignore next */ []));
         /** Source files of the demo, filtered by the `tabs` option. */
         this.assets = computed(() => {
             const name = this.componentName();
@@ -124,7 +168,7 @@ class NgDocDemoComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocDemoComponent, isStandalone: true, selector: "ng-doc-demo", inputs: { componentName: { classPropertyName: "componentName", publicName: "componentName", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "options().class ?? \"\"", "attr.data-ng-doc-container": "options().container ?? true" } }, viewQueries: [{ propertyName: "viewTabs", predicate: ["viewTab"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (options().container ?? true) {\n  <div class=\"ng-doc-demo-toolbar\">\n    <div class=\"ng-doc-demo-views\" role=\"tablist\" aria-label=\"Demo view\" ngDocSelectionHost>\n      <ng-doc-selection [align]=\"null\" />\n      @for (item of views(); track item; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"ng-doc-demo-view\"\n          role=\"tab\"\n          [id]=\"idPrefix + '-tab-' + i\"\n          [attr.aria-selected]=\"view() === item\"\n          [ngDocSelectionOrigin]=\"view() === item\"\n          [attr.aria-controls]=\"idPrefix + '-panel-' + i\"\n          [attr.tabindex]=\"view() === item ? 0 : -1\"\n          (click)=\"openView(item)\"\n          (keydown)=\"onViewKeydown($event)\"\n          #viewTab>\n          @if (item === 'preview') {\n            Preview\n          } @else {\n            @if (assets()[i - 1].icon; as icon) {\n              <ng-doc-icon [customIcon]=\"icon\"></ng-doc-icon>\n            }\n            {{ item }}\n          }\n        </button>\n      }\n    </div>\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <span class=\"ng-doc-demo-width-readout\">{{ widthReadout() }}</span>\n      <div class=\"ng-doc-demo-widths\" role=\"group\" aria-label=\"Preview width\" ngDocSelectionHost>\n        <ng-doc-selection [align]=\"null\" />\n        @for (item of previewWidths; track item.width) {\n          <button\n            type=\"button\"\n            class=\"ng-doc-demo-width\"\n            [attr.aria-pressed]=\"previewWidth() === item.width\"\n            [ngDocSelectionOrigin]=\"previewWidth() === item.width\"\n            [attr.aria-label]=\"item.label\"\n            [ngDocTooltip]=\"item.label\"\n            (click)=\"previewWidth.set(item.width)\">\n            @switch (item.width) {\n              @case ('full') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" />\n                  <path d=\"M8 21h8M12 17v4\" />\n                </svg>\n              }\n              @case ('480') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n              @case ('280') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"6\" y=\"2\" width=\"12\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (assets().length) {\n      <ng-doc-copy-button class=\"ng-doc-demo-copy\" [text]=\"copyText\" label=\"Copy code\">\n        <ng-doc-icon icon=\"copy\"></ng-doc-icon>\n      </ng-doc-copy-button>\n    }\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen\" [target]=\"stage\" />\n    }\n  </div>\n\n  <div\n    class=\"ng-doc-demo-stage\"\n    role=\"tabpanel\"\n    [id]=\"idPrefix + '-panel-0'\"\n    [attr.aria-labelledby]=\"idPrefix + '-tab-0'\"\n    [attr.data-ng-doc-width]=\"previewWidth()\"\n    [hidden]=\"view() !== 'preview'\"\n    ngDocFullscreen\n    #stage=\"ngDocFullscreen\">\n    <div class=\"ng-doc-demo-frame\">\n      <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    </div>\n    <!-- The toolbar is not shown in fullscreen, so the stage carries its own way out. -->\n    @if (stage.active()) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen-exit\" [target]=\"stage\" />\n    }\n  </div>\n\n  @for (asset of assets(); track asset.title; let i = $index) {\n    @if (view() === asset.title) {\n      <div\n        class=\"ng-doc-demo-source\"\n        role=\"tabpanel\"\n        [id]=\"idPrefix + '-panel-' + (i + 1)\"\n        [attr.aria-labelledby]=\"idPrefix + '-tab-' + (i + 1)\">\n        <ng-doc-code [html]=\"asset.code\" [copyButton]=\"false\"></ng-doc-code>\n      </div>\n    }\n  }\n} @else {\n  <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n}\n\n<ng-template #demoTemplate>\n  @if (options().fullscreenRoute; as route) {\n    <ng-doc-fullscreen-button [route]=\"route\"></ng-doc-fullscreen-button>\n  } @else if (demo(); as demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options().inputs\"></ng-container>\n  }\n</ng-template>\n", styles: [":host{display:block;margin:var(--ng-doc-demo-margin);border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);background:var(--ng-doc-demo-displayer-background, var(--ng-doc-background));overflow:hidden;min-width:0;--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none}:host[data-ng-doc-container=false]{border:none;border-radius:0;background:none;overflow:visible}.ng-doc-demo-toolbar{display:flex;align-items:center;gap:var(--ng-doc-space-2);min-height:48px;padding:var(--ng-doc-space-2);background:var(--ng-doc-demo-toolbar-background);border-bottom:1px solid var(--ng-doc-border-color);font-family:var(--ng-doc-font-family)}.ng-doc-demo-views,.ng-doc-demo-widths{display:inline-flex;flex:none;gap:2px;max-width:100%;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2);overflow-x:auto;scrollbar-width:none}.ng-doc-demo-views{flex:0 1 auto}.ng-doc-demo-view,.ng-doc-demo-width{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:inherit;font-size:13px;font-weight:500;line-height:18px;color:var(--ng-doc-text-muted);white-space:nowrap;cursor:pointer;--ng-doc-icon-color: currentColor}.ng-doc-demo-view:hover,.ng-doc-demo-width:hover{color:var(--ng-doc-heading-color)}.ng-doc-demo-view:focus-visible,.ng-doc-demo-width:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-demo-view[aria-selected=true],.ng-doc-demo-view[aria-pressed=true],.ng-doc-demo-width[aria-selected=true],.ng-doc-demo-width[aria-pressed=true]{color:var(--ng-doc-heading-color)}.ng-doc-demo-views,.ng-doc-demo-widths{position:relative}.ng-doc-demo-views ng-doc-selection,.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true],.ng-doc-demo-widths ng-doc-selection,.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}.ng-doc-demo-view,.ng-doc-demo-width{position:relative}.ng-doc-demo-width{padding:0 7px}.ng-doc-demo-width svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}:host-context([data-theme=dark]) ng-doc-selection,:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:host-context([data-theme=auto]) ng-doc-selection,:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}.ng-doc-demo-width-readout{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ng-doc-text-muted);white-space:nowrap}.ng-doc-demo-copy{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-copy{margin-left:0}.ng-doc-demo-fullscreen{margin-left:auto}.ng-doc-demo-width-readout~.ng-doc-demo-fullscreen,.ng-doc-demo-copy~.ng-doc-demo-fullscreen{margin-left:0}.ng-doc-demo-stage{background-image:radial-gradient(color-mix(in srgb,var(--ng-doc-base-5) 55%,transparent) 1px,transparent 1px);background-size:16px 16px;position:relative;display:grid;place-items:center;min-height:160px;padding:var(--ng-doc-space-8) var(--ng-doc-space-4);background-color:var(--ng-doc-demo-displayer-background, var(--ng-doc-background))}.ng-doc-demo-stage[hidden]{display:none}.ng-doc-demo-stage[data-ng-doc-fullscreen=true]{overflow:auto;padding:var(--ng-doc-space-16) var(--ng-doc-space-8)}.ng-doc-demo-stage[data-ng-doc-fullscreen=true][data-ng-doc-width=full]>.ng-doc-demo-frame{width:auto;max-width:100%}.ng-doc-demo-fullscreen-exit{position:absolute;top:var(--ng-doc-space-4);right:var(--ng-doc-space-4);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm)}.ng-doc-demo-frame{width:100%;min-width:0;border-radius:var(--ng-doc-radius-md);transition:width var(--ng-doc-transition) var(--ng-doc-easing)}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame,[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{padding:var(--ng-doc-space-5);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm);overflow:auto}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame{width:min(480px,100%)}[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{width:min(280px,100%)}.ng-doc-demo-source{background:var(--ng-doc-code-background)}@media(prefers-reduced-motion:reduce){.ng-doc-demo-frame{transition:none}}@media(max-width:640px){.ng-doc-demo-width-readout,.ng-doc-demo-widths{display:none}.ng-doc-demo-copy{margin-left:auto}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgDocCodeComponent, selector: "ng-doc-code", inputs: ["html", "copyButton", "name", "icon"] }, { kind: "component", type: NgDocCopyButtonComponent, selector: "ng-doc-copy-button", inputs: ["text", "label"] }, { kind: "component", type: NgDocFullscreenButtonComponent, selector: "ng-doc-fullscreen-button", inputs: ["route"] }, { kind: "directive", type: NgDocFullscreenDirective, selector: "[ngDocFullscreen]", exportAs: ["ngDocFullscreen"] }, { kind: "component", type: NgDocFullscreenToggleComponent, selector: "ng-doc-fullscreen-toggle", inputs: ["target"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocSelectionComponent, selector: "ng-doc-selection", inputs: ["align"] }, { kind: "directive", type: NgDocSelectionHostDirective, selector: "[ngDocSelectionHost]" }, { kind: "directive", type: NgDocSelectionOriginDirective, selector: "[ngDocSelectionOrigin]", inputs: ["ngDocSelectionOrigin"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocDemoComponent, isStandalone: true, selector: "ng-doc-demo", inputs: { componentName: { classPropertyName: "componentName", publicName: "componentName", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "options().class ?? \"\"", "attr.data-ng-doc-container": "options().container ?? true" } }, viewQueries: [{ propertyName: "stage", first: true, predicate: NgDocFullscreenDirective, descendants: true, isSignal: true }, { propertyName: "viewTabs", predicate: ["viewTab"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (options().container ?? true) {\n  <div class=\"ng-doc-demo-toolbar\">\n    <div class=\"ng-doc-demo-views\" role=\"tablist\" aria-label=\"Demo view\" ngDocSelectionHost>\n      <ng-doc-selection [align]=\"null\" />\n      @for (item of views(); track item; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"ng-doc-demo-view\"\n          role=\"tab\"\n          [id]=\"idPrefix + '-tab-' + i\"\n          [attr.aria-selected]=\"view() === item\"\n          [ngDocSelectionOrigin]=\"view() === item\"\n          [attr.aria-controls]=\"idPrefix + '-panel-' + i\"\n          [attr.tabindex]=\"view() === item ? 0 : -1\"\n          (click)=\"openView(item)\"\n          (keydown)=\"onViewKeydown($event)\"\n          #viewTab>\n          @if (item === 'preview') {\n            Preview\n          } @else {\n            @if (assets()[i - 1].icon; as icon) {\n              <ng-doc-icon [customIcon]=\"icon\"></ng-doc-icon>\n            }\n            {{ item }}\n          }\n        </button>\n      }\n    </div>\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <span class=\"ng-doc-demo-width-readout\">{{ widthReadout() }}</span>\n      <div class=\"ng-doc-demo-widths\" role=\"group\" aria-label=\"Preview width\" ngDocSelectionHost>\n        <ng-doc-selection [align]=\"null\" />\n        @for (item of previewWidths; track item.width) {\n          <button\n            type=\"button\"\n            class=\"ng-doc-demo-width\"\n            [attr.aria-pressed]=\"previewWidth() === item.width\"\n            [ngDocSelectionOrigin]=\"previewWidth() === item.width\"\n            [attr.aria-label]=\"item.label\"\n            [ngDocTooltip]=\"item.label\"\n            (click)=\"previewWidth.set(item.width)\">\n            @switch (item.width) {\n              @case ('full') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" />\n                  <path d=\"M8 21h8M12 17v4\" />\n                </svg>\n              }\n              @case ('480') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n              @case ('280') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"6\" y=\"2\" width=\"12\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (assets().length) {\n      <ng-doc-copy-button class=\"ng-doc-demo-copy\" [text]=\"copyText\" label=\"Copy code\">\n        <ng-doc-icon icon=\"copy\"></ng-doc-icon>\n      </ng-doc-copy-button>\n    }\n\n    @if (demoUrl(); as url) {\n      <a\n        class=\"ng-doc-demo-open\"\n        ng-doc-button-icon\n        [rounded]=\"false\"\n        [href]=\"url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        aria-label=\"Open in a new tab\"\n        ngDocTooltip=\"Open in a new tab\">\n        <ng-doc-icon icon=\"external-link\"></ng-doc-icon>\n      </a>\n    }\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen\" [target]=\"stage\" />\n    }\n  </div>\n\n  <div\n    class=\"ng-doc-demo-stage\"\n    role=\"tabpanel\"\n    [id]=\"idPrefix + '-panel-0'\"\n    [attr.aria-labelledby]=\"idPrefix + '-tab-0'\"\n    [attr.data-ng-doc-width]=\"previewWidth()\"\n    [attr.data-ng-doc-isolated]=\"isolated()\"\n    [hidden]=\"view() !== 'preview'\"\n    ngDocFullscreen\n    #stage=\"ngDocFullscreen\">\n    <div class=\"ng-doc-demo-frame\">\n      <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    </div>\n    <!-- The toolbar is not shown in fullscreen, so the stage carries its own way out. -->\n    @if (stage.active()) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen-exit\" [target]=\"stage\" />\n    }\n  </div>\n\n  @for (asset of assets(); track asset.title; let i = $index) {\n    @if (view() === asset.title) {\n      <div\n        class=\"ng-doc-demo-source\"\n        role=\"tabpanel\"\n        [id]=\"idPrefix + '-panel-' + (i + 1)\"\n        [attr.aria-labelledby]=\"idPrefix + '-tab-' + (i + 1)\">\n        <ng-doc-code [html]=\"asset.code\" [copyButton]=\"false\"></ng-doc-code>\n      </div>\n    }\n  }\n} @else {\n  <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n}\n\n<ng-template #demoTemplate>\n  @if (options().fullscreenRoute; as route) {\n    <ng-doc-fullscreen-button [route]=\"route\"></ng-doc-fullscreen-button>\n  } @else if (isolated()) {\n    <ng-doc-demo-frame [src]=\"demoUrl()!\" [frameTitle]=\"frameTitle()\" [fill]=\"fullscreen()\" />\n  } @else if (demo(); as demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options().inputs\"></ng-container>\n  }\n</ng-template>\n", styles: [":host{display:block;margin:var(--ng-doc-demo-margin);border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);background:var(--ng-doc-demo-displayer-background, var(--ng-doc-background));overflow:hidden;min-width:0;--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none}:host[data-ng-doc-container=false]{border:none;border-radius:0;background:none;overflow:visible}.ng-doc-demo-toolbar{display:flex;align-items:center;gap:var(--ng-doc-space-2);min-height:48px;padding:var(--ng-doc-space-2);background:var(--ng-doc-demo-toolbar-background);border-bottom:1px solid var(--ng-doc-border-color);font-family:var(--ng-doc-font-family)}.ng-doc-demo-views,.ng-doc-demo-widths{display:inline-flex;flex:none;gap:2px;max-width:100%;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2);overflow-x:auto;scrollbar-width:none}.ng-doc-demo-views{flex:0 1 auto}.ng-doc-demo-view,.ng-doc-demo-width{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:inherit;font-size:13px;font-weight:500;line-height:18px;color:var(--ng-doc-text-muted);white-space:nowrap;cursor:pointer;--ng-doc-icon-color: currentColor}.ng-doc-demo-view:hover,.ng-doc-demo-width:hover{color:var(--ng-doc-heading-color)}.ng-doc-demo-view:focus-visible,.ng-doc-demo-width:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-demo-view[aria-selected=true],.ng-doc-demo-view[aria-pressed=true],.ng-doc-demo-width[aria-selected=true],.ng-doc-demo-width[aria-pressed=true]{color:var(--ng-doc-heading-color)}.ng-doc-demo-views,.ng-doc-demo-widths{position:relative}.ng-doc-demo-views ng-doc-selection,.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true],.ng-doc-demo-widths ng-doc-selection,.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}.ng-doc-demo-view,.ng-doc-demo-width{position:relative}.ng-doc-demo-width{padding:0 7px}.ng-doc-demo-width svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}:host-context([data-theme=dark]) ng-doc-selection,:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:host-context([data-theme=auto]) ng-doc-selection,:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}.ng-doc-demo-width-readout{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ng-doc-text-muted);white-space:nowrap}.ng-doc-demo-copy{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-copy{margin-left:0}.ng-doc-demo-open{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-open,.ng-doc-demo-copy~.ng-doc-demo-open{margin-left:0}.ng-doc-demo-fullscreen{margin-left:auto}.ng-doc-demo-width-readout~.ng-doc-demo-fullscreen,.ng-doc-demo-copy~.ng-doc-demo-fullscreen,.ng-doc-demo-open~.ng-doc-demo-fullscreen{margin-left:0}.ng-doc-demo-stage{background-image:radial-gradient(color-mix(in srgb,var(--ng-doc-base-5) 55%,transparent) 1px,transparent 1px);background-size:16px 16px;position:relative;display:grid;place-items:center;min-height:160px;padding:var(--ng-doc-space-8) var(--ng-doc-space-4);background-color:var(--ng-doc-demo-displayer-background, var(--ng-doc-background))}.ng-doc-demo-stage[hidden]{display:none}.ng-doc-demo-stage[data-ng-doc-fullscreen=true]{overflow:auto;padding:var(--ng-doc-space-16) var(--ng-doc-space-8)}.ng-doc-demo-stage[data-ng-doc-fullscreen=true][data-ng-doc-width=full]>.ng-doc-demo-frame{width:auto;max-width:100%}.ng-doc-demo-fullscreen-exit{position:absolute;top:var(--ng-doc-space-4);right:var(--ng-doc-space-4);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm)}.ng-doc-demo-frame{width:100%;min-width:0;border-radius:var(--ng-doc-radius-md);transition:width var(--ng-doc-transition) var(--ng-doc-easing)}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame,[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{padding:var(--ng-doc-space-5);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm);overflow:auto}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame{width:min(480px,100%)}[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{width:min(280px,100%)}.ng-doc-demo-stage[data-ng-doc-isolated=true]>.ng-doc-demo-frame{padding:0;overflow:hidden}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true]{place-items:stretch center;padding:0}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true]>.ng-doc-demo-frame{height:100%}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true][data-ng-doc-width=full]>.ng-doc-demo-frame{width:100%}.ng-doc-demo-source{background:var(--ng-doc-code-background)}@media(prefers-reduced-motion:reduce){.ng-doc-demo-frame{transition:none}}@media(max-width:640px){.ng-doc-demo-width-readout,.ng-doc-demo-widths{display:none}.ng-doc-demo-copy,.ng-doc-demo-open{margin-left:auto}.ng-doc-demo-copy~.ng-doc-demo-open{margin-left:0}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgDocCodeComponent, selector: "ng-doc-code", inputs: ["html", "copyButton", "name", "icon"] }, { kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "component", type: NgDocCopyButtonComponent, selector: "ng-doc-copy-button", inputs: ["text", "label"] }, { kind: "component", type: NgDocDemoFrameComponent, selector: "ng-doc-demo-frame", inputs: ["src", "frameTitle", "fill"] }, { kind: "component", type: NgDocFullscreenButtonComponent, selector: "ng-doc-fullscreen-button", inputs: ["route"] }, { kind: "directive", type: NgDocFullscreenDirective, selector: "[ngDocFullscreen]", exportAs: ["ngDocFullscreen"] }, { kind: "component", type: NgDocFullscreenToggleComponent, selector: "ng-doc-fullscreen-toggle", inputs: ["target"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocSelectionComponent, selector: "ng-doc-selection", inputs: ["align"] }, { kind: "directive", type: NgDocSelectionHostDirective, selector: "[ngDocSelectionHost]" }, { kind: "directive", type: NgDocSelectionOriginDirective, selector: "[ngDocSelectionOrigin]", inputs: ["ngDocSelectionOrigin"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoComponent, decorators: [{
             type: Component,
@@ -132,7 +176,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
                         NgComponentOutlet,
                         NgTemplateOutlet,
                         NgDocCodeComponent,
+                        NgDocButtonIconComponent,
                         NgDocCopyButtonComponent,
+                        NgDocDemoFrameComponent,
                         NgDocFullscreenButtonComponent,
                         NgDocFullscreenDirective,
                         NgDocFullscreenToggleComponent,
@@ -144,8 +190,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
                     ], host: {
                         '[class]': 'options().class ?? ""',
                         '[attr.data-ng-doc-container]': 'options().container ?? true',
-                    }, template: "@if (options().container ?? true) {\n  <div class=\"ng-doc-demo-toolbar\">\n    <div class=\"ng-doc-demo-views\" role=\"tablist\" aria-label=\"Demo view\" ngDocSelectionHost>\n      <ng-doc-selection [align]=\"null\" />\n      @for (item of views(); track item; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"ng-doc-demo-view\"\n          role=\"tab\"\n          [id]=\"idPrefix + '-tab-' + i\"\n          [attr.aria-selected]=\"view() === item\"\n          [ngDocSelectionOrigin]=\"view() === item\"\n          [attr.aria-controls]=\"idPrefix + '-panel-' + i\"\n          [attr.tabindex]=\"view() === item ? 0 : -1\"\n          (click)=\"openView(item)\"\n          (keydown)=\"onViewKeydown($event)\"\n          #viewTab>\n          @if (item === 'preview') {\n            Preview\n          } @else {\n            @if (assets()[i - 1].icon; as icon) {\n              <ng-doc-icon [customIcon]=\"icon\"></ng-doc-icon>\n            }\n            {{ item }}\n          }\n        </button>\n      }\n    </div>\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <span class=\"ng-doc-demo-width-readout\">{{ widthReadout() }}</span>\n      <div class=\"ng-doc-demo-widths\" role=\"group\" aria-label=\"Preview width\" ngDocSelectionHost>\n        <ng-doc-selection [align]=\"null\" />\n        @for (item of previewWidths; track item.width) {\n          <button\n            type=\"button\"\n            class=\"ng-doc-demo-width\"\n            [attr.aria-pressed]=\"previewWidth() === item.width\"\n            [ngDocSelectionOrigin]=\"previewWidth() === item.width\"\n            [attr.aria-label]=\"item.label\"\n            [ngDocTooltip]=\"item.label\"\n            (click)=\"previewWidth.set(item.width)\">\n            @switch (item.width) {\n              @case ('full') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" />\n                  <path d=\"M8 21h8M12 17v4\" />\n                </svg>\n              }\n              @case ('480') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n              @case ('280') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"6\" y=\"2\" width=\"12\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (assets().length) {\n      <ng-doc-copy-button class=\"ng-doc-demo-copy\" [text]=\"copyText\" label=\"Copy code\">\n        <ng-doc-icon icon=\"copy\"></ng-doc-icon>\n      </ng-doc-copy-button>\n    }\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen\" [target]=\"stage\" />\n    }\n  </div>\n\n  <div\n    class=\"ng-doc-demo-stage\"\n    role=\"tabpanel\"\n    [id]=\"idPrefix + '-panel-0'\"\n    [attr.aria-labelledby]=\"idPrefix + '-tab-0'\"\n    [attr.data-ng-doc-width]=\"previewWidth()\"\n    [hidden]=\"view() !== 'preview'\"\n    ngDocFullscreen\n    #stage=\"ngDocFullscreen\">\n    <div class=\"ng-doc-demo-frame\">\n      <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    </div>\n    <!-- The toolbar is not shown in fullscreen, so the stage carries its own way out. -->\n    @if (stage.active()) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen-exit\" [target]=\"stage\" />\n    }\n  </div>\n\n  @for (asset of assets(); track asset.title; let i = $index) {\n    @if (view() === asset.title) {\n      <div\n        class=\"ng-doc-demo-source\"\n        role=\"tabpanel\"\n        [id]=\"idPrefix + '-panel-' + (i + 1)\"\n        [attr.aria-labelledby]=\"idPrefix + '-tab-' + (i + 1)\">\n        <ng-doc-code [html]=\"asset.code\" [copyButton]=\"false\"></ng-doc-code>\n      </div>\n    }\n  }\n} @else {\n  <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n}\n\n<ng-template #demoTemplate>\n  @if (options().fullscreenRoute; as route) {\n    <ng-doc-fullscreen-button [route]=\"route\"></ng-doc-fullscreen-button>\n  } @else if (demo(); as demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options().inputs\"></ng-container>\n  }\n</ng-template>\n", styles: [":host{display:block;margin:var(--ng-doc-demo-margin);border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);background:var(--ng-doc-demo-displayer-background, var(--ng-doc-background));overflow:hidden;min-width:0;--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none}:host[data-ng-doc-container=false]{border:none;border-radius:0;background:none;overflow:visible}.ng-doc-demo-toolbar{display:flex;align-items:center;gap:var(--ng-doc-space-2);min-height:48px;padding:var(--ng-doc-space-2);background:var(--ng-doc-demo-toolbar-background);border-bottom:1px solid var(--ng-doc-border-color);font-family:var(--ng-doc-font-family)}.ng-doc-demo-views,.ng-doc-demo-widths{display:inline-flex;flex:none;gap:2px;max-width:100%;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2);overflow-x:auto;scrollbar-width:none}.ng-doc-demo-views{flex:0 1 auto}.ng-doc-demo-view,.ng-doc-demo-width{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:inherit;font-size:13px;font-weight:500;line-height:18px;color:var(--ng-doc-text-muted);white-space:nowrap;cursor:pointer;--ng-doc-icon-color: currentColor}.ng-doc-demo-view:hover,.ng-doc-demo-width:hover{color:var(--ng-doc-heading-color)}.ng-doc-demo-view:focus-visible,.ng-doc-demo-width:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-demo-view[aria-selected=true],.ng-doc-demo-view[aria-pressed=true],.ng-doc-demo-width[aria-selected=true],.ng-doc-demo-width[aria-pressed=true]{color:var(--ng-doc-heading-color)}.ng-doc-demo-views,.ng-doc-demo-widths{position:relative}.ng-doc-demo-views ng-doc-selection,.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true],.ng-doc-demo-widths ng-doc-selection,.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}.ng-doc-demo-view,.ng-doc-demo-width{position:relative}.ng-doc-demo-width{padding:0 7px}.ng-doc-demo-width svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}:host-context([data-theme=dark]) ng-doc-selection,:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:host-context([data-theme=auto]) ng-doc-selection,:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}.ng-doc-demo-width-readout{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ng-doc-text-muted);white-space:nowrap}.ng-doc-demo-copy{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-copy{margin-left:0}.ng-doc-demo-fullscreen{margin-left:auto}.ng-doc-demo-width-readout~.ng-doc-demo-fullscreen,.ng-doc-demo-copy~.ng-doc-demo-fullscreen{margin-left:0}.ng-doc-demo-stage{background-image:radial-gradient(color-mix(in srgb,var(--ng-doc-base-5) 55%,transparent) 1px,transparent 1px);background-size:16px 16px;position:relative;display:grid;place-items:center;min-height:160px;padding:var(--ng-doc-space-8) var(--ng-doc-space-4);background-color:var(--ng-doc-demo-displayer-background, var(--ng-doc-background))}.ng-doc-demo-stage[hidden]{display:none}.ng-doc-demo-stage[data-ng-doc-fullscreen=true]{overflow:auto;padding:var(--ng-doc-space-16) var(--ng-doc-space-8)}.ng-doc-demo-stage[data-ng-doc-fullscreen=true][data-ng-doc-width=full]>.ng-doc-demo-frame{width:auto;max-width:100%}.ng-doc-demo-fullscreen-exit{position:absolute;top:var(--ng-doc-space-4);right:var(--ng-doc-space-4);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm)}.ng-doc-demo-frame{width:100%;min-width:0;border-radius:var(--ng-doc-radius-md);transition:width var(--ng-doc-transition) var(--ng-doc-easing)}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame,[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{padding:var(--ng-doc-space-5);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm);overflow:auto}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame{width:min(480px,100%)}[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{width:min(280px,100%)}.ng-doc-demo-source{background:var(--ng-doc-code-background)}@media(prefers-reduced-motion:reduce){.ng-doc-demo-frame{transition:none}}@media(max-width:640px){.ng-doc-demo-width-readout,.ng-doc-demo-widths{display:none}.ng-doc-demo-copy{margin-left:auto}}\n"] }]
-        }], propDecorators: { componentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentName", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], viewTabs: [{ type: i0.ViewChildren, args: ['viewTab', { isSignal: true }] }] } });
+                    }, template: "@if (options().container ?? true) {\n  <div class=\"ng-doc-demo-toolbar\">\n    <div class=\"ng-doc-demo-views\" role=\"tablist\" aria-label=\"Demo view\" ngDocSelectionHost>\n      <ng-doc-selection [align]=\"null\" />\n      @for (item of views(); track item; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"ng-doc-demo-view\"\n          role=\"tab\"\n          [id]=\"idPrefix + '-tab-' + i\"\n          [attr.aria-selected]=\"view() === item\"\n          [ngDocSelectionOrigin]=\"view() === item\"\n          [attr.aria-controls]=\"idPrefix + '-panel-' + i\"\n          [attr.tabindex]=\"view() === item ? 0 : -1\"\n          (click)=\"openView(item)\"\n          (keydown)=\"onViewKeydown($event)\"\n          #viewTab>\n          @if (item === 'preview') {\n            Preview\n          } @else {\n            @if (assets()[i - 1].icon; as icon) {\n              <ng-doc-icon [customIcon]=\"icon\"></ng-doc-icon>\n            }\n            {{ item }}\n          }\n        </button>\n      }\n    </div>\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <span class=\"ng-doc-demo-width-readout\">{{ widthReadout() }}</span>\n      <div class=\"ng-doc-demo-widths\" role=\"group\" aria-label=\"Preview width\" ngDocSelectionHost>\n        <ng-doc-selection [align]=\"null\" />\n        @for (item of previewWidths; track item.width) {\n          <button\n            type=\"button\"\n            class=\"ng-doc-demo-width\"\n            [attr.aria-pressed]=\"previewWidth() === item.width\"\n            [ngDocSelectionOrigin]=\"previewWidth() === item.width\"\n            [attr.aria-label]=\"item.label\"\n            [ngDocTooltip]=\"item.label\"\n            (click)=\"previewWidth.set(item.width)\">\n            @switch (item.width) {\n              @case ('full') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" />\n                  <path d=\"M8 21h8M12 17v4\" />\n                </svg>\n              }\n              @case ('480') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n              @case ('280') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"6\" y=\"2\" width=\"12\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (assets().length) {\n      <ng-doc-copy-button class=\"ng-doc-demo-copy\" [text]=\"copyText\" label=\"Copy code\">\n        <ng-doc-icon icon=\"copy\"></ng-doc-icon>\n      </ng-doc-copy-button>\n    }\n\n    @if (demoUrl(); as url) {\n      <a\n        class=\"ng-doc-demo-open\"\n        ng-doc-button-icon\n        [rounded]=\"false\"\n        [href]=\"url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        aria-label=\"Open in a new tab\"\n        ngDocTooltip=\"Open in a new tab\">\n        <ng-doc-icon icon=\"external-link\"></ng-doc-icon>\n      </a>\n    }\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen\" [target]=\"stage\" />\n    }\n  </div>\n\n  <div\n    class=\"ng-doc-demo-stage\"\n    role=\"tabpanel\"\n    [id]=\"idPrefix + '-panel-0'\"\n    [attr.aria-labelledby]=\"idPrefix + '-tab-0'\"\n    [attr.data-ng-doc-width]=\"previewWidth()\"\n    [attr.data-ng-doc-isolated]=\"isolated()\"\n    [hidden]=\"view() !== 'preview'\"\n    ngDocFullscreen\n    #stage=\"ngDocFullscreen\">\n    <div class=\"ng-doc-demo-frame\">\n      <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    </div>\n    <!-- The toolbar is not shown in fullscreen, so the stage carries its own way out. -->\n    @if (stage.active()) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen-exit\" [target]=\"stage\" />\n    }\n  </div>\n\n  @for (asset of assets(); track asset.title; let i = $index) {\n    @if (view() === asset.title) {\n      <div\n        class=\"ng-doc-demo-source\"\n        role=\"tabpanel\"\n        [id]=\"idPrefix + '-panel-' + (i + 1)\"\n        [attr.aria-labelledby]=\"idPrefix + '-tab-' + (i + 1)\">\n        <ng-doc-code [html]=\"asset.code\" [copyButton]=\"false\"></ng-doc-code>\n      </div>\n    }\n  }\n} @else {\n  <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n}\n\n<ng-template #demoTemplate>\n  @if (options().fullscreenRoute; as route) {\n    <ng-doc-fullscreen-button [route]=\"route\"></ng-doc-fullscreen-button>\n  } @else if (isolated()) {\n    <ng-doc-demo-frame [src]=\"demoUrl()!\" [frameTitle]=\"frameTitle()\" [fill]=\"fullscreen()\" />\n  } @else if (demo(); as demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options().inputs\"></ng-container>\n  }\n</ng-template>\n", styles: [":host{display:block;margin:var(--ng-doc-demo-margin);border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);background:var(--ng-doc-demo-displayer-background, var(--ng-doc-background));overflow:hidden;min-width:0;--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none}:host[data-ng-doc-container=false]{border:none;border-radius:0;background:none;overflow:visible}.ng-doc-demo-toolbar{display:flex;align-items:center;gap:var(--ng-doc-space-2);min-height:48px;padding:var(--ng-doc-space-2);background:var(--ng-doc-demo-toolbar-background);border-bottom:1px solid var(--ng-doc-border-color);font-family:var(--ng-doc-font-family)}.ng-doc-demo-views,.ng-doc-demo-widths{display:inline-flex;flex:none;gap:2px;max-width:100%;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2);overflow-x:auto;scrollbar-width:none}.ng-doc-demo-views{flex:0 1 auto}.ng-doc-demo-view,.ng-doc-demo-width{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:inherit;font-size:13px;font-weight:500;line-height:18px;color:var(--ng-doc-text-muted);white-space:nowrap;cursor:pointer;--ng-doc-icon-color: currentColor}.ng-doc-demo-view:hover,.ng-doc-demo-width:hover{color:var(--ng-doc-heading-color)}.ng-doc-demo-view:focus-visible,.ng-doc-demo-width:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-demo-view[aria-selected=true],.ng-doc-demo-view[aria-pressed=true],.ng-doc-demo-width[aria-selected=true],.ng-doc-demo-width[aria-pressed=true]{color:var(--ng-doc-heading-color)}.ng-doc-demo-views,.ng-doc-demo-widths{position:relative}.ng-doc-demo-views ng-doc-selection,.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-views ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true],.ng-doc-demo-widths ng-doc-selection,.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],.ng-doc-demo-widths ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}.ng-doc-demo-view,.ng-doc-demo-width{position:relative}.ng-doc-demo-width{padding:0 7px}.ng-doc-demo-width svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}:host-context([data-theme=dark]) ng-doc-selection,:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=dark]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:host-context([data-theme=auto]) ng-doc-selection,:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-selected=true],:host-context([data-theme=auto]) ng-doc-selection:not([data-ng-doc-placed])~[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}.ng-doc-demo-width-readout{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ng-doc-text-muted);white-space:nowrap}.ng-doc-demo-copy{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-copy{margin-left:0}.ng-doc-demo-open{margin-left:auto;--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-demo-width-readout~.ng-doc-demo-open,.ng-doc-demo-copy~.ng-doc-demo-open{margin-left:0}.ng-doc-demo-fullscreen{margin-left:auto}.ng-doc-demo-width-readout~.ng-doc-demo-fullscreen,.ng-doc-demo-copy~.ng-doc-demo-fullscreen,.ng-doc-demo-open~.ng-doc-demo-fullscreen{margin-left:0}.ng-doc-demo-stage{background-image:radial-gradient(color-mix(in srgb,var(--ng-doc-base-5) 55%,transparent) 1px,transparent 1px);background-size:16px 16px;position:relative;display:grid;place-items:center;min-height:160px;padding:var(--ng-doc-space-8) var(--ng-doc-space-4);background-color:var(--ng-doc-demo-displayer-background, var(--ng-doc-background))}.ng-doc-demo-stage[hidden]{display:none}.ng-doc-demo-stage[data-ng-doc-fullscreen=true]{overflow:auto;padding:var(--ng-doc-space-16) var(--ng-doc-space-8)}.ng-doc-demo-stage[data-ng-doc-fullscreen=true][data-ng-doc-width=full]>.ng-doc-demo-frame{width:auto;max-width:100%}.ng-doc-demo-fullscreen-exit{position:absolute;top:var(--ng-doc-space-4);right:var(--ng-doc-space-4);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm)}.ng-doc-demo-frame{width:100%;min-width:0;border-radius:var(--ng-doc-radius-md);transition:width var(--ng-doc-transition) var(--ng-doc-easing)}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame,[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{padding:var(--ng-doc-space-5);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-sm);overflow:auto}[data-ng-doc-width=\"480\"]>.ng-doc-demo-frame{width:min(480px,100%)}[data-ng-doc-width=\"280\"]>.ng-doc-demo-frame{width:min(280px,100%)}.ng-doc-demo-stage[data-ng-doc-isolated=true]>.ng-doc-demo-frame{padding:0;overflow:hidden}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true]{place-items:stretch center;padding:0}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true]>.ng-doc-demo-frame{height:100%}.ng-doc-demo-stage[data-ng-doc-isolated=true][data-ng-doc-fullscreen=true][data-ng-doc-width=full]>.ng-doc-demo-frame{width:100%}.ng-doc-demo-source{background:var(--ng-doc-code-background)}@media(prefers-reduced-motion:reduce){.ng-doc-demo-frame{transition:none}}@media(max-width:640px){.ng-doc-demo-width-readout,.ng-doc-demo-widths{display:none}.ng-doc-demo-copy,.ng-doc-demo-open{margin-left:auto}.ng-doc-demo-copy~.ng-doc-demo-open{margin-left:0}}\n"] }]
+        }], propDecorators: { componentName: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentName", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], stage: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgDocFullscreenDirective), { isSignal: true }] }], viewTabs: [{ type: i0.ViewChildren, args: ['viewTab', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-app-components-demo.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-demo.mjs","sources":["../../../../libs/app/components/demo/demo.component.ts","../../../../libs/app/components/demo/demo.component.html","../../../../libs/app/components/demo/ng-doc-app-components-demo.ts"],"sourcesContent":["import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DOCUMENT,\n  ElementRef,\n  inject,\n  input,\n  linkedSignal,\n  Signal,\n  signal,\n  Type,\n  untracked,\n  viewChildren,\n} from '@angular/core';\nimport { NgDocRootPage } from '@ng-doc/app/classes/root-page';\nimport { NgDocCodeComponent } from '@ng-doc/app/components/code';\nimport { NgDocCopyButtonComponent } from '@ng-doc/app/components/copy-button';\nimport { NgDocFullscreenButtonComponent } from '@ng-doc/app/components/fullscreen-button';\nimport { NgDocFullscreenToggleComponent } from '@ng-doc/app/components/fullscreen-toggle';\nimport { NgDocDemoAsset } from '@ng-doc/app/interfaces';\nimport { asArray } from '@ng-doc/core/helpers/as-array';\nimport { NgDocDemoActionOptions } from '@ng-doc/core/interfaces';\nimport {\n  NgDocFullscreenDirective,\n  NgDocIconComponent,\n  NgDocSelectionComponent,\n  NgDocSelectionHostDirective,\n  NgDocSelectionOriginDirective,\n  NgDocTooltipDirective,\n} from '@ng-doc/ui-kit';\n\n/** Widths the demo can be previewed at. */\nexport type NgDocDemoPreviewWidth = 'full' | '480' | '280';\n\n/** The preview widths, in the order of their buttons. */\nconst PREVIEW_WIDTHS: ReadonlyArray<{\n  readonly width: NgDocDemoPreviewWidth;\n  readonly label: string;\n  readonly readout: string;\n}> = [\n  { width: 'full', label: 'Full width', readout: '100% × auto' },\n  { width: '480', label: '480 pixels wide', readout: '480 × auto' },\n  { width: '280', label: '280 pixels wide', readout: '280 × auto' },\n];\n\nlet nextId = 0;\n\n/**\n * Renders a demo of the page in a panel: a toolbar with Preview and source tabs, the preview\n * width, copy and fullscreen controls, over the demo on a dot-grid stage. The fullscreen control\n * shows the stage fullscreen with the browser Fullscreen API; it is hidden where the browser does\n * not support it.\n *\n * The preview widths set the width of the demo's container; they do not emulate a device, so\n * media queries inside the demo do not respond to them.\n */\n@Component({\n  selector: 'ng-doc-demo',\n  templateUrl: './demo.component.html',\n  styleUrls: ['./demo.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgComponentOutlet,\n    NgTemplateOutlet,\n    NgDocCodeComponent,\n    NgDocCopyButtonComponent,\n    NgDocFullscreenButtonComponent,\n    NgDocFullscreenDirective,\n    NgDocFullscreenToggleComponent,\n    NgDocIconComponent,\n    NgDocSelectionComponent,\n    NgDocSelectionHostDirective,\n    NgDocSelectionOriginDirective,\n    NgDocTooltipDirective,\n  ],\n  host: {\n    '[class]': 'options().class ?? \"\"',\n    '[attr.data-ng-doc-container]': 'options().container ?? true',\n  },\n})\nexport class NgDocDemoComponent {\n  private readonly rootPage = inject(NgDocRootPage);\n  private readonly document = inject(DOCUMENT);\n\n  /** Name of the demo component in the page's `demos`. */\n  readonly componentName = input<string | undefined>(undefined);\n\n  /** Options of the `demo` action. */\n  readonly options = input<NgDocDemoActionOptions>({});\n\n  /** The demo component. */\n  readonly demo: Signal<Type<unknown> | undefined> = computed(() => {\n    const name: string | undefined = this.componentName();\n\n    return name ? this.rootPage.page?.demos?.[name] : undefined;\n  });\n\n  /** Source files of the demo, filtered by the `tabs` option. */\n  readonly assets: Signal<NgDocDemoAsset[]> = computed(() => {\n    const name: string | undefined = this.componentName();\n    const tabs: string | string[] | undefined = this.options().tabs;\n\n    return name\n      ? (this.rootPage.demoAssets?.[name] ?? []).filter(\n          (asset: NgDocDemoAsset) => !tabs?.length || asArray(tabs).includes(asset.title),\n        )\n      : [];\n  });\n\n  /**\n   * The open view: `preview`, or the title of a source file. It starts on the preview, or on the\n   * default source file when the `expanded` option is set.\n   */\n  readonly view = linkedSignal<string>(() => {\n    const options: NgDocDemoActionOptions = this.options();\n\n    return options.expanded ? this.defaultAsset()?.title ?? 'preview' : 'preview';\n  });\n\n  /** The width the demo is previewed at. */\n  readonly previewWidth = signal<NgDocDemoPreviewWidth>('full');\n\n  protected readonly previewWidths = PREVIEW_WIDTHS;\n\n  /** Readout of the preview width. */\n  protected readonly widthReadout: Signal<string> = computed(\n    () =>\n      PREVIEW_WIDTHS.find(({ width }) => width === this.previewWidth())?.readout ?? '100% × auto',\n  );\n\n  /** The views in tab order: the preview, then the source files. */\n  protected readonly views: Signal<string[]> = computed(() => [\n    'preview',\n    ...this.assets().map((asset: NgDocDemoAsset) => asset.title),\n  ]);\n\n  /** Prefix of the ids that tie the view tabs to their panels. */\n  protected readonly idPrefix: string = `ng-doc-demo-${nextId++}`;\n\n  /** Reads the code of the open source file (or the default one) when copy is pressed. */\n  protected readonly copyText = (): string => {\n    const assets: NgDocDemoAsset[] = this.assets();\n    const asset: NgDocDemoAsset | undefined =\n      assets.find((item: NgDocDemoAsset) => item.title === this.view()) ?? this.defaultAsset();\n    const template: HTMLTemplateElement = this.document.createElement('template');\n\n    template.innerHTML = asset?.code ?? '';\n\n    return template.content.textContent ?? '';\n  };\n\n  private readonly viewTabs = viewChildren<ElementRef<HTMLElement>>('viewTab');\n\n  /**\n   * The source file that opens first: the snippet marked `opened`, then `defaultTab`, then the\n   * first file (the order the demo has always used).\n   */\n  private readonly defaultAsset: Signal<NgDocDemoAsset | undefined> = computed(() => {\n    const assets: NgDocDemoAsset[] = this.assets();\n    const defaultTab: string | undefined = this.options().defaultTab;\n\n    return (\n      assets.find((asset: NgDocDemoAsset) => asset.opened) ??\n      assets.find((asset: NgDocDemoAsset) => asset.title === defaultTab) ??\n      assets[0]\n    );\n  });\n\n  /**\n   * Opens a view.\n   * @param view - `preview` or the title of a source file.\n   */\n  openView(view: string): void {\n    untracked(() => this.view.set(view));\n  }\n\n  /**\n   * Moves between the view tabs with the keyboard.\n   * @param event - The key press on a view tab.\n   */\n  protected onViewKeydown(event: KeyboardEvent): void {\n    const views: string[] = this.views();\n    const current: number = Math.max(views.indexOf(this.view()), 0);\n    const next: number | undefined = {\n      ArrowRight: (current + 1) % views.length,\n      ArrowLeft: (current - 1 + views.length) % views.length,\n      Home: 0,\n      End: views.length - 1,\n    }[event.key];\n\n    if (next !== undefined) {\n      event.preventDefault();\n      this.openView(views[next]);\n      this.viewTabs()[next]?.nativeElement.focus();\n    }\n  }\n}\n","@if (options().container ?? true) {\n  <div class=\"ng-doc-demo-toolbar\">\n    <div class=\"ng-doc-demo-views\" role=\"tablist\" aria-label=\"Demo view\" ngDocSelectionHost>\n      <ng-doc-selection [align]=\"null\" />\n      @for (item of views(); track item; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"ng-doc-demo-view\"\n          role=\"tab\"\n          [id]=\"idPrefix + '-tab-' + i\"\n          [attr.aria-selected]=\"view() === item\"\n          [ngDocSelectionOrigin]=\"view() === item\"\n          [attr.aria-controls]=\"idPrefix + '-panel-' + i\"\n          [attr.tabindex]=\"view() === item ? 0 : -1\"\n          (click)=\"openView(item)\"\n          (keydown)=\"onViewKeydown($event)\"\n          #viewTab>\n          @if (item === 'preview') {\n            Preview\n          } @else {\n            @if (assets()[i - 1].icon; as icon) {\n              <ng-doc-icon [customIcon]=\"icon\"></ng-doc-icon>\n            }\n            {{ item }}\n          }\n        </button>\n      }\n    </div>\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <span class=\"ng-doc-demo-width-readout\">{{ widthReadout() }}</span>\n      <div class=\"ng-doc-demo-widths\" role=\"group\" aria-label=\"Preview width\" ngDocSelectionHost>\n        <ng-doc-selection [align]=\"null\" />\n        @for (item of previewWidths; track item.width) {\n          <button\n            type=\"button\"\n            class=\"ng-doc-demo-width\"\n            [attr.aria-pressed]=\"previewWidth() === item.width\"\n            [ngDocSelectionOrigin]=\"previewWidth() === item.width\"\n            [attr.aria-label]=\"item.label\"\n            [ngDocTooltip]=\"item.label\"\n            (click)=\"previewWidth.set(item.width)\">\n            @switch (item.width) {\n              @case ('full') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" />\n                  <path d=\"M8 21h8M12 17v4\" />\n                </svg>\n              }\n              @case ('480') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n              @case ('280') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"6\" y=\"2\" width=\"12\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (assets().length) {\n      <ng-doc-copy-button class=\"ng-doc-demo-copy\" [text]=\"copyText\" label=\"Copy code\">\n        <ng-doc-icon icon=\"copy\"></ng-doc-icon>\n      </ng-doc-copy-button>\n    }\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen\" [target]=\"stage\" />\n    }\n  </div>\n\n  <div\n    class=\"ng-doc-demo-stage\"\n    role=\"tabpanel\"\n    [id]=\"idPrefix + '-panel-0'\"\n    [attr.aria-labelledby]=\"idPrefix + '-tab-0'\"\n    [attr.data-ng-doc-width]=\"previewWidth()\"\n    [hidden]=\"view() !== 'preview'\"\n    ngDocFullscreen\n    #stage=\"ngDocFullscreen\">\n    <div class=\"ng-doc-demo-frame\">\n      <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    </div>\n    <!-- The toolbar is not shown in fullscreen, so the stage carries its own way out. -->\n    @if (stage.active()) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen-exit\" [target]=\"stage\" />\n    }\n  </div>\n\n  @for (asset of assets(); track asset.title; let i = $index) {\n    @if (view() === asset.title) {\n      <div\n        class=\"ng-doc-demo-source\"\n        role=\"tabpanel\"\n        [id]=\"idPrefix + '-panel-' + (i + 1)\"\n        [attr.aria-labelledby]=\"idPrefix + '-tab-' + (i + 1)\">\n        <ng-doc-code [html]=\"asset.code\" [copyButton]=\"false\"></ng-doc-code>\n      </div>\n    }\n  }\n} @else {\n  <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n}\n\n<ng-template #demoTemplate>\n  @if (options().fullscreenRoute; as route) {\n    <ng-doc-fullscreen-button [route]=\"route\"></ng-doc-fullscreen-button>\n  } @else if (demo(); as demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options().inputs\"></ng-container>\n  }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-doc-app-components-demo.mjs","sources":["../../../../libs/app/components/demo/demo.component.ts","../../../../libs/app/components/demo/demo.component.html","../../../../libs/app/components/demo/ng-doc-app-components-demo.ts"],"sourcesContent":["import {\n  APP_BASE_HREF,\n  NgComponentOutlet,\n  NgTemplateOutlet,\n  PlatformLocation,\n} from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DOCUMENT,\n  ElementRef,\n  inject,\n  input,\n  linkedSignal,\n  Signal,\n  signal,\n  Type,\n  untracked,\n  viewChild,\n  viewChildren,\n} from '@angular/core';\nimport { NgDocRootPage } from '@ng-doc/app/classes/root-page';\nimport { NgDocCodeComponent } from '@ng-doc/app/components/code';\nimport { NgDocCopyButtonComponent } from '@ng-doc/app/components/copy-button';\nimport { NgDocDemoFrameComponent } from '@ng-doc/app/components/demo-frame';\nimport { NgDocFullscreenButtonComponent } from '@ng-doc/app/components/fullscreen-button';\nimport { NgDocFullscreenToggleComponent } from '@ng-doc/app/components/fullscreen-toggle';\nimport { NgDocDemoAsset } from '@ng-doc/app/interfaces';\nimport { asArray } from '@ng-doc/core/helpers/as-array';\nimport { NgDocDemoActionOptions } from '@ng-doc/core/interfaces';\nimport {\n  NgDocButtonIconComponent,\n  NgDocFullscreenDirective,\n  NgDocIconComponent,\n  NgDocSelectionComponent,\n  NgDocSelectionHostDirective,\n  NgDocSelectionOriginDirective,\n  NgDocTooltipDirective,\n} from '@ng-doc/ui-kit';\n\n/** Widths the demo can be previewed at. */\nexport type NgDocDemoPreviewWidth = 'full' | '480' | '280';\n\n/** The preview widths, in the order of their buttons. */\nconst PREVIEW_WIDTHS: ReadonlyArray<{\n  readonly width: NgDocDemoPreviewWidth;\n  readonly label: string;\n  readonly readout: string;\n}> = [\n  { width: 'full', label: 'Full width', readout: '100% × auto' },\n  { width: '480', label: '480 pixels wide', readout: '480 × auto' },\n  { width: '280', label: '280 pixels wide', readout: '280 × auto' },\n];\n\nlet nextId = 0;\n\n/**\n * Renders a demo of the page in a panel: a toolbar with Preview and source tabs, the preview\n * width, copy and fullscreen controls, over the demo on a dot-grid stage. The fullscreen control\n * shows the stage fullscreen with the browser Fullscreen API; it is hidden where the browser does\n * not support it.\n *\n * When the Vite engine built demo pages for the page (`NgDocRootPage.demoRoute`), the toolbar\n * opens the demo's page in a new tab, and an isolated demo (the `isolated` option, or\n * `isolatedDemos`) is shown in an iframe of its page: the preview widths are then the width of the\n * iframe's viewport, so media queries inside the demo respond to them. Otherwise the demo renders\n * in the page, and the preview widths set the width of its container only.\n */\n@Component({\n  selector: 'ng-doc-demo',\n  templateUrl: './demo.component.html',\n  styleUrls: ['./demo.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgComponentOutlet,\n    NgTemplateOutlet,\n    NgDocCodeComponent,\n    NgDocButtonIconComponent,\n    NgDocCopyButtonComponent,\n    NgDocDemoFrameComponent,\n    NgDocFullscreenButtonComponent,\n    NgDocFullscreenDirective,\n    NgDocFullscreenToggleComponent,\n    NgDocIconComponent,\n    NgDocSelectionComponent,\n    NgDocSelectionHostDirective,\n    NgDocSelectionOriginDirective,\n    NgDocTooltipDirective,\n  ],\n  host: {\n    '[class]': 'options().class ?? \"\"',\n    '[attr.data-ng-doc-container]': 'options().container ?? true',\n  },\n})\nexport class NgDocDemoComponent {\n  private readonly rootPage = inject(NgDocRootPage);\n  private readonly document = inject(DOCUMENT);\n  private readonly platformLocation = inject(PlatformLocation);\n  private readonly appBaseHref = inject(APP_BASE_HREF, { optional: true });\n\n  /** Name of the demo component in the page's `demos`. */\n  readonly componentName = input<string | undefined>(undefined);\n\n  /** Options of the `demo` action. */\n  readonly options = input<NgDocDemoActionOptions>({});\n\n  /** The demo component. */\n  readonly demo: Signal<Type<unknown> | undefined> = computed(() => {\n    const name: string | undefined = this.componentName();\n\n    return name ? this.rootPage.page?.demos?.[name] : undefined;\n  });\n\n  /**\n   * The URL of the demo's page, when the page has demo pages and the demo exists: the generated\n   * demo route and the demo's name under the base href, with the `inputs` option as a query\n   * parameter.\n   */\n  readonly demoUrl: Signal<string | undefined> = computed(() => {\n    const route: string | undefined = this.rootPage.demoRoute;\n    const name: string | undefined = this.componentName();\n\n    if (!route || !name || !this.demo()) return undefined;\n    // The demo pages are files under the document's base href, whatever the location strategy.\n    const baseHref: string = (\n      this.appBaseHref ??\n      this.platformLocation.getBaseHrefFromDOM() ??\n      '/'\n    ).replace(/^\\/+|\\/+$/g, '');\n    const path: string = [...baseHref.split('/'), ...route.split('/'), name]\n      .filter(Boolean)\n      .map((segment: string) => encodeURIComponent(segment))\n      .join('/');\n    const inputs: Record<string, unknown> | undefined = this.options().inputs;\n    const query: string =\n      inputs && Object.keys(inputs).length\n        ? `?inputs=${encodeURIComponent(JSON.stringify(inputs))}`\n        : '';\n\n    return `/${path}${query}`;\n  });\n\n  /** Whether the demo is shown in an iframe of its page. */\n  readonly isolated: Signal<boolean> = computed(\n    () =>\n      !!this.demoUrl() &&\n      !this.options().fullscreenRoute &&\n      (this.options().isolated ?? this.rootPage.isolatedDemos ?? false),\n  );\n\n  /** The accessible title of the demo's iframe. */\n  protected readonly frameTitle: Signal<string> = computed(() => `${this.componentName()} demo`);\n\n  /** Whether the stage is fullscreen. */\n  protected readonly fullscreen: Signal<boolean> = computed(() => this.stage()?.active() ?? false);\n\n  private readonly stage = viewChild(NgDocFullscreenDirective);\n\n  /** Source files of the demo, filtered by the `tabs` option. */\n  readonly assets: Signal<NgDocDemoAsset[]> = computed(() => {\n    const name: string | undefined = this.componentName();\n    const tabs: string | string[] | undefined = this.options().tabs;\n\n    return name\n      ? (this.rootPage.demoAssets?.[name] ?? []).filter(\n          (asset: NgDocDemoAsset) => !tabs?.length || asArray(tabs).includes(asset.title),\n        )\n      : [];\n  });\n\n  /**\n   * The open view: `preview`, or the title of a source file. It starts on the preview, or on the\n   * default source file when the `expanded` option is set.\n   */\n  readonly view = linkedSignal<string>(() => {\n    const options: NgDocDemoActionOptions = this.options();\n\n    return options.expanded ? this.defaultAsset()?.title ?? 'preview' : 'preview';\n  });\n\n  /** The width the demo is previewed at. */\n  readonly previewWidth = signal<NgDocDemoPreviewWidth>('full');\n\n  protected readonly previewWidths = PREVIEW_WIDTHS;\n\n  /** Readout of the preview width. */\n  protected readonly widthReadout: Signal<string> = computed(\n    () =>\n      PREVIEW_WIDTHS.find(({ width }) => width === this.previewWidth())?.readout ?? '100% × auto',\n  );\n\n  /** The views in tab order: the preview, then the source files. */\n  protected readonly views: Signal<string[]> = computed(() => [\n    'preview',\n    ...this.assets().map((asset: NgDocDemoAsset) => asset.title),\n  ]);\n\n  /** Prefix of the ids that tie the view tabs to their panels. */\n  protected readonly idPrefix: string = `ng-doc-demo-${nextId++}`;\n\n  /** Reads the code of the open source file (or the default one) when copy is pressed. */\n  protected readonly copyText = (): string => {\n    const assets: NgDocDemoAsset[] = this.assets();\n    const asset: NgDocDemoAsset | undefined =\n      assets.find((item: NgDocDemoAsset) => item.title === this.view()) ?? this.defaultAsset();\n    const template: HTMLTemplateElement = this.document.createElement('template');\n\n    template.innerHTML = asset?.code ?? '';\n\n    return template.content.textContent ?? '';\n  };\n\n  private readonly viewTabs = viewChildren<ElementRef<HTMLElement>>('viewTab');\n\n  /**\n   * The source file that opens first: the snippet marked `opened`, then `defaultTab`, then the\n   * first file (the order the demo has always used).\n   */\n  private readonly defaultAsset: Signal<NgDocDemoAsset | undefined> = computed(() => {\n    const assets: NgDocDemoAsset[] = this.assets();\n    const defaultTab: string | undefined = this.options().defaultTab;\n\n    return (\n      assets.find((asset: NgDocDemoAsset) => asset.opened) ??\n      assets.find((asset: NgDocDemoAsset) => asset.title === defaultTab) ??\n      assets[0]\n    );\n  });\n\n  /**\n   * Opens a view.\n   * @param view - `preview` or the title of a source file.\n   */\n  openView(view: string): void {\n    untracked(() => this.view.set(view));\n  }\n\n  /**\n   * Moves between the view tabs with the keyboard.\n   * @param event - The key press on a view tab.\n   */\n  protected onViewKeydown(event: KeyboardEvent): void {\n    const views: string[] = this.views();\n    const current: number = Math.max(views.indexOf(this.view()), 0);\n    const next: number | undefined = {\n      ArrowRight: (current + 1) % views.length,\n      ArrowLeft: (current - 1 + views.length) % views.length,\n      Home: 0,\n      End: views.length - 1,\n    }[event.key];\n\n    if (next !== undefined) {\n      event.preventDefault();\n      this.openView(views[next]);\n      this.viewTabs()[next]?.nativeElement.focus();\n    }\n  }\n}\n","@if (options().container ?? true) {\n  <div class=\"ng-doc-demo-toolbar\">\n    <div class=\"ng-doc-demo-views\" role=\"tablist\" aria-label=\"Demo view\" ngDocSelectionHost>\n      <ng-doc-selection [align]=\"null\" />\n      @for (item of views(); track item; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"ng-doc-demo-view\"\n          role=\"tab\"\n          [id]=\"idPrefix + '-tab-' + i\"\n          [attr.aria-selected]=\"view() === item\"\n          [ngDocSelectionOrigin]=\"view() === item\"\n          [attr.aria-controls]=\"idPrefix + '-panel-' + i\"\n          [attr.tabindex]=\"view() === item ? 0 : -1\"\n          (click)=\"openView(item)\"\n          (keydown)=\"onViewKeydown($event)\"\n          #viewTab>\n          @if (item === 'preview') {\n            Preview\n          } @else {\n            @if (assets()[i - 1].icon; as icon) {\n              <ng-doc-icon [customIcon]=\"icon\"></ng-doc-icon>\n            }\n            {{ item }}\n          }\n        </button>\n      }\n    </div>\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <span class=\"ng-doc-demo-width-readout\">{{ widthReadout() }}</span>\n      <div class=\"ng-doc-demo-widths\" role=\"group\" aria-label=\"Preview width\" ngDocSelectionHost>\n        <ng-doc-selection [align]=\"null\" />\n        @for (item of previewWidths; track item.width) {\n          <button\n            type=\"button\"\n            class=\"ng-doc-demo-width\"\n            [attr.aria-pressed]=\"previewWidth() === item.width\"\n            [ngDocSelectionOrigin]=\"previewWidth() === item.width\"\n            [attr.aria-label]=\"item.label\"\n            [ngDocTooltip]=\"item.label\"\n            (click)=\"previewWidth.set(item.width)\">\n            @switch (item.width) {\n              @case ('full') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" />\n                  <path d=\"M8 21h8M12 17v4\" />\n                </svg>\n              }\n              @case ('480') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n              @case ('280') {\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                  <rect x=\"6\" y=\"2\" width=\"12\" height=\"20\" rx=\"2\" />\n                  <path d=\"M12 18h.01\" />\n                </svg>\n              }\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (assets().length) {\n      <ng-doc-copy-button class=\"ng-doc-demo-copy\" [text]=\"copyText\" label=\"Copy code\">\n        <ng-doc-icon icon=\"copy\"></ng-doc-icon>\n      </ng-doc-copy-button>\n    }\n\n    @if (demoUrl(); as url) {\n      <a\n        class=\"ng-doc-demo-open\"\n        ng-doc-button-icon\n        [rounded]=\"false\"\n        [href]=\"url\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        aria-label=\"Open in a new tab\"\n        ngDocTooltip=\"Open in a new tab\">\n        <ng-doc-icon icon=\"external-link\"></ng-doc-icon>\n      </a>\n    }\n\n    @if (view() === 'preview' && !options().fullscreenRoute) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen\" [target]=\"stage\" />\n    }\n  </div>\n\n  <div\n    class=\"ng-doc-demo-stage\"\n    role=\"tabpanel\"\n    [id]=\"idPrefix + '-panel-0'\"\n    [attr.aria-labelledby]=\"idPrefix + '-tab-0'\"\n    [attr.data-ng-doc-width]=\"previewWidth()\"\n    [attr.data-ng-doc-isolated]=\"isolated()\"\n    [hidden]=\"view() !== 'preview'\"\n    ngDocFullscreen\n    #stage=\"ngDocFullscreen\">\n    <div class=\"ng-doc-demo-frame\">\n      <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n    </div>\n    <!-- The toolbar is not shown in fullscreen, so the stage carries its own way out. -->\n    @if (stage.active()) {\n      <ng-doc-fullscreen-toggle class=\"ng-doc-demo-fullscreen-exit\" [target]=\"stage\" />\n    }\n  </div>\n\n  @for (asset of assets(); track asset.title; let i = $index) {\n    @if (view() === asset.title) {\n      <div\n        class=\"ng-doc-demo-source\"\n        role=\"tabpanel\"\n        [id]=\"idPrefix + '-panel-' + (i + 1)\"\n        [attr.aria-labelledby]=\"idPrefix + '-tab-' + (i + 1)\">\n        <ng-doc-code [html]=\"asset.code\" [copyButton]=\"false\"></ng-doc-code>\n      </div>\n    }\n  }\n} @else {\n  <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n}\n\n<ng-template #demoTemplate>\n  @if (options().fullscreenRoute; as route) {\n    <ng-doc-fullscreen-button [route]=\"route\"></ng-doc-fullscreen-button>\n  } @else if (isolated()) {\n    <ng-doc-demo-frame [src]=\"demoUrl()!\" [frameTitle]=\"frameTitle()\" [fill]=\"fullscreen()\" />\n  } @else if (demo(); as demo) {\n    <ng-container *ngComponentOutlet=\"demo; inputs: options().inputs\"></ng-container>\n  }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}